:root {
     --a-light-blue: #0071BC;
     --a-dark-blue: #252F6C;

     }
/*----SVG-----*/
    .svg-dark{fill:var(--a-dark-blue);}
    .svg-light{fill:var(--a-light-blue);}




/*---Vertical Center Architecture---*/

.vc-wrap{
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.vc{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content:center;
    margin-top:-300px !important;
}

.vc-section{
    max-width:800px;
    padding:20px;
}



/*----------------------Typography---*/

h1,h2,h3,h4{
    font-family: 'Questrial', sans-serif;
    text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.5),1px 1px 2px rgba(0, 0, 0, 0.5);
}

p{
    font-size:1.1rem!important;
}

i{
    text-shadow: 2px 1px 8px rgba(150, 150, 150, 0.5);
}

body{
    font-family: 'Roboto', sans-serif;
    color:var(--a-dark-blue);
    /*--iphone scroll fix--*/
    overflow-y:scroll !important;
    -webkit-overflow-scrolling:touch;
}

/*----Welcome Animation --*/

div#logoAnimation{
    z-index:11;
    width:100%;
    height:auto;
    max-width:600px;
    }

/*-- !! -main contents should be hidden until animation is complete-*/
div#main-content{
    display:none;
}


/*-----------------------Navbar---------*/


div.dropBtn, div.nav-opened{
    position:absolute;
    right:20px;
    top:50px;
}

@media screen and (min-width: 600px) {
    div.nav-opened{
        display:block;
    }
    div.nav-collapsed{
        display:none;
    }
}
@media screen and (max-width: 599px) {
    div.nav-opened{
        display:none;
    }
    div.nav-collapsed{
        display:block;
    }
}


div.adro-nav{
    width:100%;
    height:120px;
    position:fixed;
    top: 0;
    z-index:10;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+40,ffffff+69,ffffff+100&1+62,0+100 */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 62%, rgba(255,255,255,0.82) 69%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 40%,rgba(255,255,255,1) 62%,rgba(255,255,255,0.82) 69%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 40%,rgba(255,255,255,1) 62%,rgba(255,255,255,0.82) 69%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */


}

div.navBurger{
    align-self: center;
    justify-self: end;
}

div.navItems{
    align-self: center;
}

ul.navList{
     list-style: none;
     width:100%;
}

ul.navList li{
    float:left;
    padding-left:10px;
}

div.nav-logo{
    position:absolute;
    left:10px;
    top:5px;
}
div.nav-logo img{
    width:100%;
    height:auto;
    max-width:130px;
}


/*----Landing----------*/


.landingBground{
    background-image:url("../images/globe-white.svg");
    background-repeat: no-repeat;
    background-position: top right;
    width:100%;
    height:100%;
}

/*div#landing{
    height:90vh;
    width:auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    background-image:url("../images/bluglobe.svg");

}*/

div.landingIntro{
    position:relative;

}

.gradient-landing{
    background-image: linear-gradient(to left bottom, rgba(255, 255, 255, 0.75),
     rgba(76, 107, 138, 0.75));
    background-size: 100%;
}

.introIcon{
    max-width:150px;
}



/*-----------Page Sections-------*/




.reversedColors{
    background-color:var(--a-light-blue);
    color:#fff!important;
}


div.adro-section{
    max-width:1024px;
    margin:0 auto;
    padding:10px 30px 10px 30px;
}


div.adro-form{
    max-width:800px;
    margin:0 auto;
    padding:10px;
}

.adro-graphic{
    max-width:300px;
    margin:0 auto;
}




/*--------------------------------------------------------------------------------------*/
/*----------------------------media queries - type----------------- --------------------*/
/*--------------------------------------------------------------------------------------*/

@media all and (min-width: 1281px) {
    h1.landingHeader{
        font-size:8em;
    }
    div.landingIntro{
        max-width:1000px;
        top:300px;
        left:300px;
    }

}

@media all and (max-width: 1280px) {
    h1.landingHeader{
        font-size:7em;
    }
    div.landingIntro{
        max-width:800px;
        top:300px;
        left:200px;
    }

}

@media all and (max-width: 980px) {
    h1.landingHeader{
        font-size:10em;
    }

}

@media all and (max-width: 769px) {
    h1.landingHeading{
        font-size:10em;
    }

}
@media all and (max-width: 500px) {
    h1.landingHeading{
        font-size:10em;
    }

}