/* CURRENTLY IN: styles/mobile.css */


/*
 *--------------------------------------------------
 *                      UNIVERSAL
 *--------------------------------------------------
 */


 /********** DEBUG **********/
/*div, nav {
    border: 1px solid black;
}*/
/********** /DEBUG **********/


/********** BOX-SIZING **********/
div {
    box-sizing: border-box;
}
/********** /BOX-SIZING **********/


/********** FONTS **********/
@font-face {
    font-family: GR-Bold;
    src: url(../fonts/GothamRoundedHTF/GothamRnd-Bold.otf);

}

@font-face {
    font-family: GR-BoldItal;
    src: url(../fonts/GothamRoundedHTF/GothamRnd-BoldItal.otf);
}

@font-face {
    font-family: GR-Book;
    src: url(../fonts/GothamRoundedHTF/GothamRnd-Book.otf);
}

@font-face {
    font-family: GR-BookItal;
    src: url(../fonts/GothamRoundedHTF/GothamRnd-BookItal.otf);
}

@font-face {
    font-family: GR-Light;
    src: url(../fonts/GothamRoundedHTF/GothamRnd-Light.otf);
}

@font-face {
    font-family: GR-LightItal;
    src: url(../fonts/GothamRoundedHTF/GothamRnd-LightItal.otf);
}

@font-face {
    font-family: GR-MedItal;
    src: url(../fonts/GothamRoundedHTF/GothamRnd-MedItal.otf);
}

@font-face {
    font-family: GR-Medium;
    src: url(../fonts/GothamRoundedHTF/GothamRnd-Medium.otf);
}
/********** /FONTS **********/




/*
 *----------------------------------------------------
 *                  PORTRAIT - iPhone 6
 *----------------------------------------------------
 */


@media only screen
    and (min-width: 0)
    and (max-width: 736px)
    and (orientation: portrait) {


    /********** NAV **********/
    .nav--left {
        width: 17%;
    }

    #TGIT #fp-nav.nav--left.left {
        top: 3%;
        left: 3%;
        margin-top: 0;
        width: 160px;
    }

    #TGIT #fp-nav .drop-logo {
        width: 100%;
        margin: 0 auto;
    }

    #TGIT #fp-nav .drop-logo img {
        width: 100%;
        margin: 0 auto;
    }

    #TGIT #fp-nav .nav-dots {
        width: 100%;
    }

    #TGIT #fp-nav #siteMenu{
        width: 34px;
        margin: -20px auto 0;
    }

    #TGIT #fp-nav #siteMenu li {
        margin: 0;
    }

    #TGIT #fp-nav ul li a {
        width: 34px;    
        height: 34px;
        margin: 60px 0;
        border-radius: 100%;
        background: #FFF;
    }

    #TGIT #fp-nav ul li.active a {
        width: 34px;    
        height: 34px;
        background: rgba(0,0,0,0);
        border: 6px solid #FFF;
    }

    /********** /NAV **********/


    /********** page1 **********/

    /* sky */
    .page1 .sky {
    	background-color: #c1e7f7;
    	width: 100%;
    	height: 100%;
        position: relative;
    }

    .page1 .clouds {
    	width: 100%;
        height: 35%;
    	padding: 2% 2% 2% 20%;
    }

    .page1 .cloud {
    	width: 100%;
    	padding: 4% 2% 4% 2%;
    }

    .page1 .cloud--small {
    	width: 60%;
    	margin: 0 0 0 0;
    }

    .page1 .cloud--large {
    	width: 580px;	
    	margin: 0 0 0 137px;
    }

    .page1 .cloud--small img {
        display: none;
    }

    .page1 .cloud--large img {
    width: 100%;
    }

    .page1 .sign {
        width: 100%;
        height: 600px;
        padding: 10px 10px 0 10px;
        position: absolute;
        bottom: 411px;
    }

    .page1 .sign__body {
        width: 900px;
        height: 582px;
        background-color: #6cb2c8;
        padding: 30px;
        margin: 0 auto;
    }

    .sign__body__text {
        text-align: center; 
        color: #FFF;
        font-family: "GR-Bold", Arial, sans-serif;
        font-size: 12vw;
        line-height: 120%;
        display: inline-block;
        padding: 6% 0;
    }

    .sign__body__inner-outline {
        height: 100%;
        width: 100%;
        border: 12px solid #FFF;
        border-radius: 30px 30px;
    }

    .page1 .sign__legs {
        width: 100%;
        height: 118px;
        position: relative;
    }

    .sign__leg {
        width: 10%;
        height: 100%;
        background-color: #74a6b4;
        position: absolute;
        display: none;
    }

    .page1 .sign__leg--left {
        left: 10%;
    }

    .page1 .sign__leg--middle {
        left: 45%;
        display: block;
    }

    .page1 .sign__leg--right {
        right: 10%;
    }

    /* /sky */

    /* ground */
    .page1 .ground {
    	background-color: #6ec5a4;
    	width: 100%;
    	height: 300px;
        position: absolute;
        bottom: 0;
    }

    .page1 .down-nav {
        width: 80%;
        height: 60%;
        margin: 0 auto;
        padding: 5%;
    }

    .page1 .down-nav__text {
        text-align: center; 
        color: #FFF;
        font-family: "GR-Bold", Arial, sans-serif;
        font-size: 5vw;
    }

    .page1 .down-nav__arrow {
        margin: 35px auto;
        width: 135px;
    }

    .page1 .down-nav__arrow img {
        width: 100%;
    }
    /* /ground */

    /********** /page 1**********/


    /********** page 2**********/

    /* sky */
    .page2 .sky {
        background-color: #6cb2c8;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .page2 .clouds {
        width: 100%;
        height: 12%;
        padding: 2% 2% 2% 20%;
    }

    .page2 .cloud {
        width: 100%;
        padding: 0% 2% 4% 2%;
    }

    .page2 .cloud--small {
        width: 35%;
        margin: 0 0 0 1%;
        display: inline-block;
    }

    .page2 .cloud--large {
        width: 46%; 
        margin: 2% 0 0 17%;
        display: inline-block;
    }

    .page2 .cloud--small img {
    width: 100%;
    }

    .page2 .cloud--large img {
    width: 100%;
    }

    .about-us {
        width: 100%;
        height: 85%;
    }

    .about-us__pic {
        width: 40%;
        margin: 0 auto;
    }

    .about-us__pic img {
        width: 100%;
        border: 20px solid #c1e7f7;
        border-radius: 100%;
    }

    .about-us__text--desktop {
        display: none;
    }

    .about-us__text {
        width: 735px;
        height: 625px;
        margin: 0 auto;
    }

    .about-us__text__title {
        color: #FFF;
        font-family: "GR-Bold", Arial, sans-serif;
        text-align: justify;
        font-size: 100px;
        margin-top: 5px;
    }

    .about-us__text__copy {
        color: #FFF;
        font-family: "GR-Light", Arial, sans-serif;
        font-size: 40px;
        line-height: 110%;
        padding: 10px 10px 0;
    }

    .about-us__text__copy .fp-tableCell {
        vertical-align: middle;
        /*text-align: justify;*/
        height: 100% !important;
    }

    .about-us__text__copy .fp-controlArrow {
        top: 65%;
    }

    .fp-slidesNav.bottom {
        bottom: 230px;
    }

    /* /sky */

    /* ground */
    .page2 .ground {
        background-color: #6ec5a4;
        width: 100%;
        height: 300px;
        position: absolute;
        bottom: 0;
    }

    .page2 .down-nav {
        width: 80%;
        height: 60%;
        margin: 0 auto;
        padding: 5%;
    }

    .page2 .down-nav__text {
        text-align: center; 
        color: #FFF;
        font-family: "GR-Bold", Arial, sans-serif;
        font-size: 5vw;
    }

    .page2 .down-nav__arrow {
        margin: 96px auto;
        width: 20%;
    }

    .page2 .down-nav__arrow img {
        width: 100%;
    }
    /* /ground */

    /********** /page 2**********/

    /********** page 3**********/

    /* sky */
    .page3 .sky {
        background-color: #c1e7f7;
        width: 100%;
        height: 100%;
    }

    .page3 .clouds {
        width: 100%;
        height: 25%;
    }

    .page3 .cloud {
        width: 100%;
        padding: 0% 2% 4% 2%;
    }

    .page3 .cloud--small {
        width: 55%; 
        margin: 13% 0 0 44%;
        float: left;
    }

    .page3 .cloud--large {
        width: 80%; 
        margin: 24% 0 0 0;
        float: left;
    }

    .page3 .cloud--small img {
    width: 500px;
    }

    .page3 .cloud--large img {
    width: 550px;
    }

    .page3 .product {
        width: 100%;
        height: 100%;
    }

    .page3 .product__pic {
        width: 50%;
        margin: 0 0 0 0;
        float: left;
        display: none;
    }

    .page3 .product__pic img {
        width: 400px;
        float: right;
        margin: 26% 70px 0 0;
    }

    .page3 .product__description {
        width: 100%;
        height: 100%;
    }

    .page3 .product__text {
        width: 100%;
        height: 40%;
        margin: 0 auto;
        padding: 5% 10% 0 10%;
    }

    .page3 .product__text__title {
        color: #3b7686;
        font-family: "GR-Bold", Arial, sans-serif;
        text-align: left;
        font-size: 100px;
        margin: 0 0 20px 0;
    }

    .page3 .product__text__copy {
        color: #4c7886;
        font-size: 30px;
        font-family: "GR-Book", Arial, sans-serif;
    }

    .page3 .product__text__button {
        margin: 55px 0 0 0;
        text-align: center;
    }

    .page3 .product__text__button a {
        padding: 20px 110px 20px 110px;
        background-color: orange;
        font-size: 5vw;
        font-family: "GR-Bold", Arial, sans-serif;
        text-align: center;
        text-decoration: none;
        color: white;
    }

    .page3 .product__text__copy--small-screen {
        font-size: 1.7vw;
        line-height: 120%;
        padding: 1vw 3vw 0;
    }

    .page3 .product__text__copy--small-screen p {
        margin: 0 1vw 0;
    }

    .page3 .product__text__copy--small-screen .fp-tableCell {
        vertical-align: middle;
        text-align: justify;
        height: 100% !important;
    }

    .page3 .product__text__copy--small-screen .fp-controlArrow {
        top: 50%;
    }

    .fp-slidesNav.bottom {
        bottom: 230px;
    }

    .page3 .product__text__copy--large-screen {
        display: none;
    }
    /* /sky */


    /********** /page 3**********/


}

/*
 *----------------------------------------------------
 *                  /PORTRAIT - iPhone 6
 *----------------------------------------------------
 */


/*
 *----------------------------------------------------
 *                  LANDSCAPE - iPhone 6
 *----------------------------------------------------
 */

@media only screen
    and (min-width: 0)
    and (max-width: 736px)
    and (orientation: landscape) {


    /********** NAV **********/

    .nav--left {
        width: 17%;
    }

    #TGIT #fp-nav.nav--left.left {
        top: 3%;
        left: 3%;
        margin-top: 0;
        width: 100px;
    }

    #TGIT #fp-nav .drop-logo {
        width: 100%;
        margin: 0 auto;
    }

    #TGIT #fp-nav .drop-logo img {
        width: 100%;
        margin: 0 auto;
    }

    #TGIT #fp-nav .nav-dots {
        width: 100%;
    }

    #TGIT #fp-nav #siteMenu{
        width: 25px;
        margin: -20px auto 0;
    }

    #TGIT #fp-nav #siteMenu li {
        margin: 0;
    }

    #TGIT #fp-nav ul li a {
        width: 25px;    
        height: 25px;
        margin: 40px 0;
        border-radius: 100%;
        background: #FFF;
    }

    #TGIT #fp-nav ul li.active a {
        width: 25px;    
        height: 25px;
        background: rgba(0,0,0,0);
        border: 4px solid #FFF;
    }

    /********** /NAV **********/


    /********** page1 **********/

    /* sky */
    .page1 .sky {
        background-color: #c1e7f7;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .page1 .clouds {
        width: 100%;
        height: 255px;
        padding: 20px 20px 20px 160px;
    }

    .page1 .cloud {
        width: 100%;
        padding: 5px 10px 0 20px;
    }

    .page1 .cloud--small {
        width: 200px;
        margin: 0 0 0 0;
        display: inline-block;
    }

    .page1 .cloud--large {
        width: 300px; 
        margin: 0 0 0 225px;
        display: inline-block;
    }

    .page1 .cloud--small img {
    width: 100%;
    }

    .page1 .cloud--large img {
    width: 100%;
    }

    .page1 .sign {
        width: 100%;
        height: 355px;
        padding: 0 49px 0 49px;
        position: absolute;
        bottom: 75px;
    }

    .page1 .sign__body {
        width: 685px;
        height: 240px;
        background-color: #6cb2c8;
        padding: 10px;
        margin: 0 auto;
    }


    .sign__body__inner-outline {
        height: 100%;
        width: 100%;
        border: 10px solid #FFF;
        border-radius: 30px 30px;
        padding: 4px;
    }


    .sign__body__text {
        width: 100%;
        margin: 25px 25px;
        display: block;
    }

    .sign__body__text span {
    text-align: center; 
    color: #FFF;
    font-family: "GR-Bold", Arial, sans-serif;
    font-size: 65px;
    line-height: 120%;
    display: inline-block;
    }

    .page1 .sign__legs {
        width: 100%;
        height: 50px;
        position: relative;
    }

    .page1 .sign__leg {
        width: 5%;
        height: 100%;
        background-color: #74a6b4;
        position: absolute;
        display: none;
    }

    .page1 .sign__leg--left {
        left: 20%;
        display: block;
    }

    .page1 .sign__leg--right {
        right: 20%;
        display: block;
    }

    .sign__leg--active {
        display: block;
    }

    /* /sky */

    /* ground */
    .page1 .ground {
        background-color: #6ec5a4;
        width: 100%;
        height: 140px;
        position: absolute;
        bottom: 0;
    }

    .page1 .down-nav {
        width: 80%;
        height: 60%;
        margin: 0 auto;
        padding: 2%;
    }

    .page1 .down-nav__text {
        text-align: center; 
        color: #FFF;
        font-family: "GR-Bold", Arial, sans-serif;
        font-size: 33px;
    }

    .page1 .down-nav__arrow {
        margin: 1% auto;
        width: 8%;
    }

    .page1 .down-nav__arrow img {
        width: 100%;
    }
    /* /ground */

    /********** /page 1**********/


    /********** page 2**********/

    /* sky */
    .page2 .sky {
        background-color: #6cb2c8;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .page2 .clouds {
        width: 100%;
        height: 12%;
        padding: 2% 2% 2% 20%;
    }

    .page2 .cloud {
        width: 100%;
        padding: 0% 2% 4% 2%;
    }

    .page2 .cloud--small {
        width: 160px;
        margin: 0 0 0 8px;
        display: inline-block;
    }

    .page2 .cloud--large {
        width: 235px; 
        margin: 2px 0 0 333px;
        display: inline-block;
    }

    .page2 .cloud--small img {
    width: 100%;
    }

    .page2 .cloud--large img {
    width: 100%;
    }

    .about-us {
        width: 100%;
        height: 85%;
    }

    .about-us__pic {
        width: 295px;
        margin: 50px 100px 0 10px;
        float: right;
    }

    .about-us__pic img {
        width: 100%;
        border: 20px solid #c1e7f7;
        border-radius: 100%;
    }

    .about-us__text--desktop {
        display: none;
    }

    .about-us__text {
        width: 90%;
        height: 210px;
        margin: 0 auto;
        padding: 30px 295px 0 60px;
    }

    .about-us__text__title {
        color: #FFF;
        font-family: "GR-Bold", Arial, sans-serif;
        text-align: left;
        font-size: 6vw;
        margin: 5px 0 0 6%;
    }

    .about-us__text__copy {
        color: #FFF;
        font-family: "GR-Light", Arial, sans-serif;
        font-size: 4vh;
        line-height: 120%;
        padding: 1vw 3vw 0;
    }

    .about-us__text__copy p {
        margin: 0 1vh 0;
    }

    .about-us__text__copy .fp-tableCell {
        vertical-align: middle;
        height: 100% !important;
    }

    .about-us__text__copy .fp-controlArrow {
        top: 50%;
    }

    .fp-slidesNav.bottom {
        bottom: 12%;
    }

    /* /sky */

    /* ground */
    .page2 .ground {
        background-color: #6ec5a4;
        width: 100%;
        height: 140px;
        position: absolute;
        bottom: 0;
    }

    .page2 .down-nav {
        width: 80%;
        height: 60%;
        margin: 0 auto;
        padding: 5%;
    }

    .page2 .down-nav__text {
        text-align: center; 
        color: #FFF;
        font-family: "GR-Bold", Arial, sans-serif;
        font-size: 5vw;
    }

    .page2 .down-nav__arrow {
        margin: 28px auto;
        width: 55px;
    }

    .page2 .down-nav__arrow img {
        width: 100%;
    }
    /* /ground */

    /********** /page 2**********/

    /********** page 3**********/

    /* sky */
    .page3 .sky {
        background-color: #c1e7f7;
        width: 100%;
        height: 100%;
    }

    .page3 .clouds {
        width: 100%;
        height: 85px;
    }

    .page3 .cloud {
        width: 100%;
        padding: 0% 2% 4% 2%;
    }

    .page3 .cloud--small {
        width: 40%; 
        margin: 8px 0 0 0;
        float: right;
    }

    .page3 .cloud--large {
        width: 55%; 
        margin: 18% 0 0 48%;
        float: left;
    }

    .page3 .cloud--small img {
    width: 100%;
    }

    .page3 .cloud--large img {
    display: none;
    }

    .page3 .product {
        width: 100%;
        height: 100%;
    }

    .page3 .product__pic {
        width: 43%;
        float: left;
        display: block;
        padding: 0 3% 0 0;
    }

    .page3 .product__pic img {
        width: 65%;
        float: right;
        margin: 100px 0 0 0;
    }

    .page3 .product__description {
        width: 57%;
        height: 100%;
        padding: 0 20px 0 0;
        float: left;
    }

    .page3 .product__text {
        width: 500px;
        height: 40%;
        margin: 0 auto;
        float: left;
    }

    .page3 .product__text__title {
        color: #3b7686;
        font-family: "GR-Bold", Arial, sans-serif;
        text-align: left;
        font-size: 60px;
        margin-top: 0;
    }

    .page3 .product__text__copy {
        color: #4c7886;
        font-size: 18px;
        font-family: "GR-Book", Arial, sans-serif;
    }

    .page3 .product__text__button {
        margin: 10px 0 0 0;
        float: left;
    }

    .page3 .product__text__button a {
        padding: 12px 20px 12px 20px;
        background-color: orange;
        font-size: 40px;
        font-family: "GR-Bold", Arial, sans-serif;
        text-align: center;
        text-decoration: none;
        color: white;
    }

    .page3 .product__text__copy--small-screen {
        font-size: 1.7vw;
        line-height: 120%;
        padding: 1vw 3vw 0;
    }

    .page3 .product__text__copy--small-screen p {
        margin: 0 1vw 0;
    }

    .page3 .product__text__copy--small-screen .fp-tableCell {
        vertical-align: middle;
        text-align: justify;
        height: 100% !important;
    }

    .page3 .product__text__copy--small-screen .fp-controlArrow {
        top: 50%;
    }

    .fp-slidesNav.bottom {
        bottom: 90px;
    }

    .page3 .product__text__copy--large-screen {
        display: none;
    }
    /* /sky */


    /********** /page 3**********/

}


/*
 *----------------------------------------------------
 *                  /LANDSCAPE - iPhone 6
 *----------------------------------------------------
 */