/*
Theme Name: Why?
*/

* { margin:0; padding:0; border:0; z-index:9; }

body, html { width:100%; overflow-x: hidden; }

header { position: fixed; z-index:99; }
header img { width: 175px; }


/* FONTS */

h1 { font-family: corporate-s, sans-serif; font-weight:300; font-size:3em; text-transform: uppercase; letter-spacing: 10px; line-height: 1.2em; }
h1 strong { font-weight:700; }
h2 { font-family: corporate-s, sans-serif; font-weight:300; font-size:2.25em; text-transform: uppercase; letter-spacing: 10px; line-height: 1.2em; opacity:0.6; }
h3 { font-family: corporate-e, sans-serif; font-weight:700; font-size:2em; text-transform: uppercase; letter-spacing: 5px; line-height: 0.9em; display:block; }
h3 span { font-size:4.5em; letter-spacing: 0; font-weight: 700; }
@media screen and (max-width: 768px) {
    h3.counter,
    h3 span { text-align:center; }
}
h4 { font-family: corporate-s, sans-serif; font-weight:300; font-size:1.25em; text-transform: uppercase; letter-spacing: 10px; line-height: 0.9em; display:block; }
h5 { font-family: corporate-e, sans-serif; font-weight:700; font-size:1.25em; text-transform: uppercase; letter-spacing: 2px; line-height: 0.9em; display:block; }
h6 { font-family: corporate-s, sans-serif; font-weight:300; font-size:0.8em; text-transform: uppercase; letter-spacing: 4px; line-height: 0.9em; display:block; }
    @media screen and (max-width: 596px) {
        h1 { font-size:2em; letter-spacing: 7px; }
        h2 { font-size:1.25em; letter-spacing: 5px; }
    }

h3.counter { font-size:4em; margin-top:30px;}
p, ul, input, textarea, option { font-family: corporate-s, sans-serif; font-weight:300; font-size:1.5em; letter-spacing: 2px; line-height: 1.6em; }
header ul { text-transform: uppercase; }

header a, header a:hover { font-weight:300; }

a, a:hover { text-transform: uppercase; text-decoration: none; color:#949fad; cursor:pointer; }

a.button {
transition: all 500ms ease;     
}

a.button:after {
    content: "";
    position: relative;
    top:-2px !important;
  border: solid black;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 3px;
    transform: rotate(-45deg);
    border-color:#949fad;
    left:5px;
     transition: all 500ms ease;
}
a.button:hover:after { left:15px !important; transition: all 500ms ease; }
/* COLORS */

body { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#283250+30,1d2b3f+100 */
background: rgb(58,57,82);
background: -moz-radial-gradient(circle, rgba(58,57,82,1) 30%, rgba(29,43,63,1) 100%);
background: -webkit-radial-gradient(circle, rgba(58,57,82,1) 30%, rgba(29,43,63,1) 100%);
background: radial-gradient(circle, rgba(58,57,82,1) 30%, rgba(29,43,63,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3a3952",endColorstr="#1d2b3f",GradientType=1);
}
body.light { background:#fff;}


#wrapper { position: relative; width:calc(100vw - 0px); min-height: 100vh; display: inline-block; top:-20px; }
header { position:fixed; top:0; right:0; width:100px; height:100px; background:transparent; }
header { z-index:999999; top:0; }
 nav { height:100vh; }
 nav .menu { background:#fff; position: absolute; display: block; top:0; right:auto; bottom:0; width:100vw; z-index: 999990; opacity:0; position: fixed; }
 nav.hide { display:none; }
nav ul { list-style: none; display: table !important; width:calc(100vw - 0px); height:100vh; }
nav ul li { display: inline-block; margin-bottom: 10px; display: table; margin-top: -6px; width:calc(100vw - 0px); height:100vh; } 
nav ul li .inner { display: table-cell; vertical-align: middle; letter-spacing: 10px; font-size:3em; text-align: center; }
nav ul li a { color:#283250; transition:500ms ease all; }
nav ul li a:hover { color:#999; transition:500ms ease all; }

 header i:hover { cursor:pointer; }
 header .fa-times { color:#283250; transition:all 1000ms ease; }
 header .fa-bars { color:#fff !important; transition:all 1000ms ease; }
 body.light header .fa-bars,
 body.light header .fa-times { color:#283250 !important; transition:all 1000ms ease; }
 
nav .submenu { font-size:0.8em; position: absolute; left:0; right:0; bottom:150px; height:50px; color:#283250; text-transform: uppercase; text-align: center; }
nav .info { font-size:0.8em; position: absolute; left:0; right:0; bottom:0px; height:50px; color:#283250; text-transform: uppercase; text-align: center; }

.form { display:none;}
 .knowmore {     position: absolute;
    margin: 50px 0 0 0;
    left: calc(50vw - 125px);
    font-size: 0.2em;
    letter-spacing: 3px;
    border: 1px solid #1f1f1f;
    width: 250px;
    font-weight: 500;
    padding: 10px; 
     text-transform: uppercase; 
}

#content .knowmore {
    margin: 3rem 0 0 0;
    letter-spacing: 5px;
    border: 1px solid #fff;
    width: 300px;
    font-weight: 300;
    padding: 15px; 
    font-size:1.25em;
    text-align: center; 
    text-transform: uppercase;
    transition:500ms all ease;
    background:#fff;
    color:#283250;
    left:3rem; 
}
#content .knowmore:hover {
    background:transparent;
    color:#fff;
    cursor: pointer;
    transition:500ms all ease;
}
header .logo,
header .logo,
header .symbol { opacity:1; transition:all 500ms ease; position: absolute; }
header .logo { margin:0 0 0 0px; }
header .logo.blue { opacity:0; }
header .symbol { height:33px; width:33px; }
header .symbol.scrolled,
header .logo.scrolled { opacity:0; transition:all 500ms ease; }


footer img { width:50px; }
#hero { font-size:1.5em; position: relative; height:100vh; }

#hero ul { position: fixed; width:100%; height:100%; }
#hero ul li { height:100%; position: absolute; display: table; vertical-align: middle;}
#hero ul li.why { display:none; }
#hero ul li .inner { width:100%; height:100%; display: table-cell; vertical-align: middle; }

 
#hero ul li.active { z-index: 100; }
#hero ul li.last-active { z-index: 90; }
#hero ul li.last-active { z-index: 90; }
#hero ul li h1,
#hero ul li h2 { width:calc(100vw - 0px); z-index: 9; position: relative; vertical-align: middle; color:#fff; padding-left:8.333%; }
#hero ul li h2 { padding-left:16.666%; color:#949fad; }
/*#hero ul li .inner.i1 h1:nth-child(2) { margin-left: 102px; }
#hero ul li .inner.i1 h1:nth-child(3) { margin-left: 40px; }
#hero ul li .inner.i2 h1:nth-child(1) { margin-left: 40px; }
#hero ul li .inner.i2 h1:nth-child(2) { margin-left: 102px; }
#hero ul li .inner.i3 h1:nth-child(1) { margin-left: 40px; }
#hero ul li .inner.i3 h1:nth-child(3) { margin-left: 72px; }*/
#hero ul li .bg { position: absolute; width:100vw; height:100vh; top:0; right:0; bottom:0; left:0; background-repeat: no-repeat; background-size:cover; background-position:center center; z-index:0; opacity:0.25; }
#hero ul li h1 {margin-left:200vh; }
#hero.static ul li h1 {margin-left:0vh; }
#hero ul li h2 {margin-left:-100vh; }
#hero ul li h1,
#hero ul li h2,
#hero ul li { opacity:0; }
#hero.static ul li { opacity:1; }
#hero.static ul li h1,
#hero.static ul li h2,
#hero.static ul li .bg { opacity:1; }
#hero.static ul li .bg { opacity:0.25; }


#hero h1 a { color:#fff; transition: all 500ms ease; }
#hero h1 a:hover { cursor: pointer; color:#949fad; transition: all 500ms ease; }
#hero ul li.why h1 { font-size:2em !important; padding-left:0; margin-left:0vh !important; text-align: center; opacity:1;}
#hero ul li.why h1 a { opacity:0; }

.scroll { position: absolute; bottom:30px; left:calc(50% - 25px); width:50px; height:50px; transition: all 500ms ease; opacity:1; z-index:9999999; }
.scroll img { width: 100%; margin-top:-20px; transition: all 500ms ease;  }
.scroll img:first-child { margin-top:0px; transition: all 500ms ease; }
.scroll:hover img { margin-top:0; transition: all 500ms ease; cursor: pointer; }
.scroll.scrolled { opacity:0; transition: all 500ms ease; }

#highlights,
#content { color:#fff; position: relative; z-index: 99999; }
#highlights .row div{ background:#fff; color:#283250;}
#content h3,
#content p { font-family: corporate-s, sans-serif; font-weight:300; color:rgba(255, 255, 255, 1); }
#content img { width: 100%; }
#content .box { color:#1d2b3f; background-color:#fff; }
#content h1 { font-size:6em; margin-bottom:3rem; }
#content h2 { margin-bottom:3rem; }
#content .box h2 { font-size:2.25em; letter-spacing: 8px; }
#content .box p { color:rgba(29, 43, 63, 1); background-color:#fff; }

#highlights span { position: relative; display: inline-block; margin:0 20px; text-align: center; }
#highlights img { width: 70px; margin:0 auto; display:block; }
.picfade { display:none; }

body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6,
body.light p,
body.light ul li { color:#283250 !important;}
input, textarea, select { width:100%; font-size:1em; font-weight:300; color:#fff; border:1px solid #fff; background:transparent; padding:10px 15px; }
option { font-size:1em; font-weight:300;  }
input::placeholder, textarea::placeholder, select { color:#949fad; }
form p { width: calc(100% - 40px); }
form p.half { width:calc(50% - 22px); position: relative; display: inline-block; }

@media screen and (max-width: 596px) { 
    p, ul, input, textarea, option { font-family: corporate-s, sans-serif; font-weight:300; font-size:1.25em; letter-spacing: 2px; line-height: 1.46em; }
input, textarea, select { width:100%; font-size:0.8em; font-weight:300; color:#fff; border:1px solid #fff; background:transparent; padding:10px 15px; }
#highlights span { position: relative; display: inline-block; margin:0 20px 20px; text-align: center; }
    h3 span { font-size: 3em; }
    #hero {font-size:0.9em; }
    nav ul {list-style: none;
display: table !important;
width: calc(100vw - 5px);
height: 100vh;
margin-top: -52px;
margin-left: 5px; }
    #hero ul li.why h1 a { display:block; }
    nav .menu ul li a { display: block; margin-bottom: 10px; font-size: 0.55em; }
    nav .submenu { font-size:0.6em;}
    #hero ul li h1 { padding-left:40px; }
    #content h1 { font-size:4em; }
    #content p { padding-left:0;}
    #content .knowmore { margin: 3rem auto; left:auto; position: relative; }
    #content h3 { padding-left:0; }
    #hero.static h1 { font-size:4em;}
}

#content .legal a { text-transform: none !important; }
#content .legal p { padding-left:0 !important; }
#content .legal ul li { margin-left:25px !important; }



#preloader-wrapper {
    height: 100%;
    width: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}

#preloader-wrapper .preloader img {
 width:100%;   
}
#preloader-wrapper .preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 30px;
}

.cc-window { z-index:99999999 !important; }