/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

@media (min-width: 1921px) {
    
    /* ==========================================================================
      01.  INTRO
      =========================================================================== */
    
    /* Intro Headers */
    #intro .intro-content p { padding: 0 28%; }

    
}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

@media (min-width: 1281px) and (max-width: 1920.99px) {

}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------- */

@media (min-width: 1200px) {

}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

@media (min-width: 992px) and (max-width: 1199.99px) {
    
    /* ==========================================================================
      01.  INTRO
      =========================================================================== */

    /* Intro Headers */
    #intro h3 { font-size: 1.85rem; margin-bottom: 25px; }
    #intro h2 { font-size: 5.5rem; margin-bottom: 20px; }

    
    /* ==========================================================================
      02.  ABOUT
      =========================================================================== */
    
    .about .about-body p.txt {
        font-size: 18px;
    }
    
    
    /* ==========================================================================
      03.  APPS
      =========================================================================== */
    
    .apps .apps-body img.logo {
        width: 260px;
    }

    .apps .apps-body h3.title {
        letter-spacing: 12px; 
        font-size: 52px; 
    }

    .apps .apps-body p.claim {
        font-size: 18px;
    }
    
    
    /* ==========================================================================
      04.  FILMS
      =========================================================================== */
    
    .films .films-body h3.title {
        letter-spacing: 12px; 
        font-size: 52px; 
    }
    
    
    /* ==========================================================================
      05.  THINGS
      =========================================================================== */
    
    
    /* ==========================================================================
      06.  CONTACT
      =========================================================================== */
    
    
}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 991.99px) { 
    
    /* ==========================================================================
      01.  INTRO
      =========================================================================== */

    /* Intro Headers */
    #intro h3 { font-size: 1.5rem; margin-bottom: 25px; }
    #intro h2 { font-size: 4rem; letter-spacing: -1px; margin-bottom: 15px; }
    #intro .intro-content p { font-size: 1.25rem; padding: 0 20%; }
    
    
    /* ==========================================================================
      02.  ABOUT
      =========================================================================== */

    .about .about-body img.instamatica {
        display: none;
    }

    .about .about-body img.instamatica-mobile {
        width: 360px;
        display: inline-block;
    }

    .about .about-body p.txt {
        font-size: 18px;
        margin-top: 0px;
    }
    
    
    /* ==========================================================================
      03.  APPS
      =========================================================================== */
    
    .apps .apps-body img.logo {
        width: 260px;
    }

    .apps .apps-body h3.title {
        letter-spacing: 12px; 
        font-size: 52px; 
    }

    .apps .apps-body p.claim {
        font-size: 18px;
    }
    
    
    /* ==========================================================================
      04.  FILMS
      =========================================================================== */
    
    .films .films-body h3.title {
        letter-spacing: 12px; 
        font-size: 56px; 
    }
    
    .films .films-body p.claim {
        font-size: 20px;
    }
    
    .films-icon {
        margin-bottom: 40px;
    }

    .films-icon-img {
        border-radius: 30px;
        max-width: 190px;
    }
    
    
    /* ==========================================================================
      05.  THINGS
      =========================================================================== */
    
    
    /* ==========================================================================
      06.  CONTACT
      =========================================================================== */
    
    
}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

/* 768px = iPad Portrait */

@media (max-width: 768px) { 
    
    /* ==========================================================================
      00.  HEADER
      =========================================================================== */

    .navbar-brand img.instamatica {
        height: 44px; 
    }
    
    /* ==========================================================================
      01.  INTRO
      =========================================================================== */
    
    
    /* ==========================================================================
      02.  ABOUT
      =========================================================================== */

    .about .about-body img.instamatica {
        display: none;
    }

    .about .about-body img.instamatica-mobile {
        width: 360px;
        display: inline-block;
    }

    .about .about-body p.txt {
        font-size: 18px;
        margin-top: 0px;
    }
    
    
    /* ==========================================================================
      03.  APPS
      =========================================================================== */
    
    
    .apps .apps-body img.logo {
        width: 260px;
    }

    .apps .apps-body h3.title {
        letter-spacing: 12px; 
        font-size: 52px; 
    }

    .apps .apps-body p.claim {
        font-size: 18px;
    }
    
    
    /* ==========================================================================
      04.  FILMS
      =========================================================================== */
    
    .films .films-body h3.title {
        letter-spacing: 12px; 
        font-size: 56px; 
    }
    
    .films .films-body p.claim {
        font-size: 20px;
    }
    
    .films-icon {
        margin-bottom: 40px;
    }

    .films-icon-img {
        border-radius: 30px;
        max-width: 190px;
    }
    

    /* ==========================================================================
      05.  THINGS
      =========================================================================== */
    
    
    /* ==========================================================================
      06.  CONTACT
      =========================================================================== */
    
    
}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

@media (min-width: 576px) and (max-width: 767.99px) {
    
    /* ==========================================================================
      01.  INTRO
      =========================================================================== */

    /* Intro Headers */
    #intro h3 { font-size: 1.25rem; margin-bottom: 25px; }
    #intro h2 { font-size: 3rem; letter-spacing: -1px; margin-bottom: 15px; }
    #intro .intro-content p { font-size: 1.25rem; padding: 0 12%; }
    
    
    /* ==========================================================================
      02.  ABOUT
      =========================================================================== */

    .about .about-body img.instamatica {
        display: none;
    }

    .about .about-body img.instamatica-mobile {
        width: 360px;
        display: inline-block;
    }

    .about .about-body p.txt {
        font-size: 18px;
        margin-top: 0px;
    }

    
    /* ==========================================================================
      03.  APPS
      =========================================================================== */
    
    .apps .apps-body img.logo {
        width: 260px;
    }

    .apps .apps-body h3.title {
        letter-spacing: 12px; 
        font-size: 52px; 
    }

    .apps .apps-body p.claim {
        font-size: 18px;
    }
    
    
    /* ==========================================================================
      04.  FILMS
      =========================================================================== */
    
    .films .films-body h3.title {
        letter-spacing: 12px; 
        font-size: 56px; 
    }
    
    .films .films-body p.claim {
        font-size: 20px;
    }
    
    .films-icon {
        margin-bottom: 25px;
    }

    .films-icon-img {
        border-radius: 25px;
        max-width: 155px;
    }
    
    
    /* ==========================================================================
      05.  THINGS
      =========================================================================== */
    
    
    /* ==========================================================================
      06.  CONTACT
      =========================================================================== */
    
    
} 

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

@media (max-width: 575px) { 
    
} 

@media (max-width: 480px) { 

}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

@media (min-width: 416px) and (max-width: 575.99px) {    
    
    /* ==========================================================================
      01.  INTRO
      =========================================================================== */

    /* Intro Headers */
    #intro h3 { font-size: 1.15rem; margin-bottom: 22px; }
    #intro h2 { font-size: 3.25rem; letter-spacing: -1px; margin-bottom: 15px; }
    #intro .intro-content p { font-size: 1.05rem; padding: 0 5%; }
    
    
    /* ==========================================================================
      02.  ABOUT
      =========================================================================== */

    .about .about-body img.instamatica {
        display: none;
    }

    .about .about-body img.instamatica-mobile {
        width: 280px;
        display: inline-block;
    }

    .about .about-body p.txt {
        font-size: 16px;
        margin-top: 0px;
    }
    
    
    /* ==========================================================================
      03.  APPS
      =========================================================================== */
    
    .apps .apps-body img.logo {
        width: 240px;
    }

    .apps .apps-body h3.title {
        letter-spacing: 10px; 
        font-size: 40px;
        margin-top: 20px;
    }

    .apps .apps-body p.claim {
        font-size: 16px;
        margin-top: 10px;
        padding: 0px 20px;
    }
    
    
    /* ==========================================================================
      04.  FILMS
      =========================================================================== */
    
    .films .films-body h3.title {
        letter-spacing: 10px; 
        font-size: 48px;
        /* margin-top: 20px; */
    }
    
    .films .films-body p.claim {
        font-size: 18px;
        margin-top: 10px;
        /* padding: 0px 20px; */
    }
    
    .films-icon {
        margin-bottom: 30px;
    }

    .films-icon-img {
        border-radius: 25px;
        max-width: 110px;
    }

    .films-icon.left {
        text-align: right;
        padding: 0px;
    }
    
    .films-icon.center {
        text-align: center;
    }
    
    .films-icon.right {
        text-align: left;
        padding: 0px;
    }
    
    
    /* ==========================================================================
      05.  THINGS
      =========================================================================== */
    
    .things .things-body {
        padding-top: 0px; /* navbar height */
    }
    
    .things-body div.section-title h3.title {
        font-size: 42px;
    }

    .things-body div.section-contents p.txt,
    .things-body div.section-caption p.txt {
        font-size: 18px;
    }
    
    
    /* ==========================================================================
      06.  CONTACT
      =========================================================================== */

    .contact .contact-body {
        padding-top: 0px; /* navbar height */
    }
    
    .contact-body div.section-title h3.title {
        font-size: 42px;  
    }

    .contact-body div.section-contents p.txt,
    .contact-body div.section-caption p.txt {
        font-size: 18px;
    }
    
    
}

@media (max-width: 456px) { 

    /* ==========================================================================
      03.  APPS
      =========================================================================== */
    
    .apps .apps-body img.logo {
        width: 220px;
    }

    .apps .apps-body h3.title {
        letter-spacing: 10px; 
        font-size: 38px;
        margin-top: 20px;
    }
    
    .apps .apps-body p.claim {
        font-size: 14px;
    }
    
    /* ==========================================================================
      04.  FILMS
      =========================================================================== */
    
    .films .films-body h3.title {
        letter-spacing: 10px; 
        font-size: 48px;
        /* margin-top: 20px; */
    }
    
    .films .films-body p.claim {
        font-size: 18px;
    }
    
}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

@media (min-width: 321px) and (max-width: 415px) { 
    
    /* ==========================================================================
      01.  INTRO
      =========================================================================== */

    /* Intro Headers */
    #intro h3 { font-size: 1.15rem; margin-bottom: 22px; }
    #intro h2 { font-size: 3.25rem; letter-spacing: -1px; margin-bottom: 15px; }
    #intro .intro-content p { font-size: 1.2145rem; padding: 0 5%; }
    
    
    /* ==========================================================================
      02.  ABOUT
      =========================================================================== */

    .about .about-body {
        padding-top: 0px;
    }

    .about .about-body img.instamatica {
        display: none;
    }

    .about .about-body img.instamatica-mobile {
        width: 200px;
        display: inline-block;
    }

    .about .about-body p.txt {
        font-size: 14px;
        margin-top: 0px;
    }
    
    
    /* ==========================================================================
      03.  APPS
      =========================================================================== */
    
    .apps .apps-body {
        padding-top: 0px; 
    }

    .apps .apps-body img.logo {
        width: 220px;
    }

    .apps .apps-body h3.title {
        letter-spacing: 8px; 
        font-size: 34px;
        margin-top: 20px;
    }

    .apps .apps-body p.claim {
        font-size: 14px;
        margin-top: 10px;
    }
    
    
    /* ==========================================================================
      04.  FILMS
      =========================================================================== */
    
    .films .films-body h3.title {
        letter-spacing: 8px; 
        font-size: 44px;
        /* margin-top: 20px; */
    }
    
    .films .films-body p.claim {
        font-size: 18px;
        margin-top: 0px;
    }
    
    .films-icon {
        margin-bottom: 20px;
    }

    .films-icon-img {
        border-radius: 20px;
        max-width: 80px;
    }
    
    .films-icon.left {
        text-align: right;
        padding: 0px;
    }
    
    .films-icon.center {
        text-align: center;
    }
    
    .films-icon.right {
        text-align: left;
        padding: 0px;
    }    
    
    
    /* ==========================================================================
      05.  THINGS
      =========================================================================== */
    
    .things .things-body {
        /* padding-top: 79px; /* navbar height */
        padding-top: 0px; /* navbar height */
    }
    
    .things-body div.section-title h3.title {
        font-size: 36px;
    }

    .things-body div.section-contents p.txt,
    .things-body div.section-caption p.txt {
        font-size: 15px;
    }
    
    .things-body div.section-button span {
        display: block;
        padding-top: 8px;
        padding-bottom: 2px;
    }
    
    
    /* ==========================================================================
      06.  CONTACT
      =========================================================================== */

    .contact .contact-body {
        /* padding-top: 79px; /* navbar height */
        padding-top: 0px; /* navbar height */
    }
    
    .contact-body div.section-title h3.title {
        font-size: 36px;  
    }

    .contact-body div.section-contents p.txt,
    .contact-body div.section-caption p.txt {
        font-size: 15px;
    }
    
    
}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

@media (max-width: 320px) { 
    
    /* ==========================================================================
      01.  INTRO
      =========================================================================== */

    /* Intro Headers */
    #intro h3 { font-size: 1.15rem; margin-bottom: 22px; }
    #intro h2 { font-size: 3.25rem; letter-spacing: -1px; margin-bottom: 15px; }
    #intro .intro-content p { font-size: 1.2145rem; padding: 0 5%; }
    
    
    /* ==========================================================================
      02.  ABOUT
      =========================================================================== */

    .about .about-body {
        padding-top: 0px;
    }

    .about .about-body img.instamatica {
        display: none;
    }

    .about .about-body img.instamatica-mobile {
        width: 200px;
        display: inline-block;
    }

    .about .about-body p.txt {
        font-size: 14px;
        margin-top: 0px;
    }
    
    
    /* ==========================================================================
      03.  APPS
      =========================================================================== */
    
    .apps .apps-body {
        padding-top: 0px; 
    }

    .apps .apps-body img.logo {
        width: 220px;
    }

    .apps .apps-body h3.title {
        letter-spacing: 8px; 
        font-size: 32px;
        margin-top: 20px;
    }

    .apps .apps-body p.claim {
        font-size: 14px;
        margin-top: 10px;
    } 
    
    
    /* ==========================================================================
      04.  FILMS
      =========================================================================== */

    .films .films-body h3.title {
        letter-spacing: 8px; 
        font-size: 42px;
        /* margin-top: 20px; */
    }
    
    .films .films-body p.claim {
        font-size: 17px;
        margin-top: 0px;
    } 
    
    .films-icon {
        margin-bottom: 20px;
    }

    .films-icon-img {
        border-radius: 16px;
        max-width: 78px;
    }
    
    .films-icon.left {
        text-align: right;
        padding: 0px;
    }
    
    .films-icon.center {
        text-align: center;
    }
    
    .films-icon.right {
        text-align: left;
        padding: 0px;
    }
    
    
    /* ==========================================================================
      05.  THINGS
      =========================================================================== */
    
    .things .things-body {
        /* padding-top: 79px; /* navbar height */
        padding-top: 0px; /* navbar height */
    }
    
    .things-body div.section-title h3.title {
        font-size: 32px; 
    }

    .things-body div.section-contents p.txt,
    .things-body div.section-caption p.txt {
        font-size: 12px;
    }
    
    .things-body div.section-button span {
        display: block;
        padding-top: 8px;
        padding-bottom: 2px;
    }
    
    
    /* ==========================================================================
      06.  CONTACT
      =========================================================================== */

    .contact .contact-body {
        /* padding-top: 79px; /* navbar height */
        padding-top: 0px; /* navbar height */
    }
    
    .contact-body div.section-title h3.title {
        font-size: 32px; 
    }

    .contact-body div.section-contents p.txt,
    .contact-body div.section-caption p.txt {
        font-size: 12px;
    }
    
    
}