/**********
*
*
CUSTOM CSS STYLES
*
*
**********/
/*@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");*/
@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:400,500,600,700');
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");

body                { font-family:"Open Sans","Helvetica Neue","Lucida Grande",Arial,Verdana,
                      sans-serif; color:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-weight:400; font-size:100%; line-height:1.5em; position:absolute; height:100%; }
#page-bg            { background: url("../images/splash-bg.jpg") center center; background-size: cover;
                      background-attachment: fixed; position: fixed; top: 0; right: 0; bottom: 0; left: 0; min-height: 360px; text-align: center; }

.brand-logo         { position:absolute;left:10%;top:12%;max-width:380px}
h1,h2,h3,h4,h5,h6   { color:#fff;font-weight:400;line-height:1.3em}
h1 a,h2 a,h3 a,
h4 a,h5 a,h6 a      { color:inherit;text-decoration:none}
h1 small,h2 small,
h3 small,h4 small,
h5 small,h6 small   { color:inherit}
h1                  { font-size:36px;font-family: 'Barlow Semi Condensed',Arial,Verdana,
                      sans-serif; font-weight:700; letter-spacing: 0.275em; border-bottom: 6px solid #fff; padding-bottom: 0.5em; width: 45%; margin-bottom: 0px; }
h2                  { font-size:22px; margin-top:0.75em; margin-bottom:30px; font-weight: 300;
                      letter-spacing: 0.075em; }


#page-overlay       { position: fixed; top: 0; left: -99vw; height: 100%; overflow: visible; width: 100%;
                      opacity: 0; }
.overlay.skew-part  { -webkit-transform: skew(0deg, 0deg); -moz-transform: skew(0deg, 0deg);
                      -ms-transform: skew(0deg, 0deg); -o-transform: skew(0deg, 0deg); transform: skew(0deg, 0deg); }
.overlay            { position: fixed; overflow: hidden; top: 0; left: -60%; background: rgba(0,0,0,0.7);
                      width: 100%; height: 100%; -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
                      -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
                      transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); border-right: 1px solid #15171e;
                    }
#left-side          { position: fixed; left: 0; top: 0; width: 50%; height: 100%; opacity: 0; color: #fff;
                      -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1); -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1); -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);   -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
                      transition: all 0.3s cubic-bezier(0, 0, 0.58, 1); }
#left-side .content { position:absolute; z-index:0; left:0; padding:0; top:50vh; width:80%; padding:0 10%;
                      -webkit-transition:all .3s cubic-bezier(0, 0, 0.58, 1); -moz-transition:all .3s cubic-bezier(0, 0, 0.58, 1); -ms-transition:all .3s cubic-bezier(0, 0, 0.58, 1);-o-transition:all .3s cubic-bezier(0, 0, 0.58, 1);
                      transition:all .3s cubic-bezier(0, 0, 0.58, 1);
                      -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); text-align:left; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; opacity:1; visibility:visible; }
.action-btn         { border: 2px solid #fff; padding: 1.25em 2.5em; text-transform: uppercase;
                      letter-spacing: 0.275em; font-weight: 700; margin-top: 1.5em; background: transparent; color: #fff; font-size: 1.25em; }
.social-icons       { position:absolute; left:10%; bottom:20%; margin-left:-22px; margin-bottom:-22px;
                      display:block; z-index:9; width:auto; overflow:hidden; white-space:nowrap; -webkit-transition:all .7s cubic-bezier(0.42, 0, 0.58, 1); -moz-transition:all .7s cubic-bezier(0.42, 0, 0.58, 1); -ms-transition:all .7s cubic-bezier(0.42, 0, 0.58, 1); -o-transition:all .7s cubic-bezier(0.42, 0, 0.58, 1);
                      transition:all .7s cubic-bezier(0.42, 0, 0.58, 1)}
.social-icons i     { color:#fff; -webkit-transition:all .3s cubic-bezier(0, 0, 0.58, 1);
                      -moz-transition:all .3s cubic-bezier(0, 0, 0.58, 1); -ms-transition:all .3s cubic-bezier(0, 0, 0.58, 1); -o-transition:all .3s cubic-bezier(0, 0, 0.58, 1); transition:all .3s cubic-bezier(0, 0, 0.58, 1)}
.social-icons a     { color:#fff; width:60px; line-height:60px; letter-spacing:0; background:transparent;
                      font-size:2em; font-weight:300; height:50px; display:inline-block; text-align:center; float:left; margin-right:2px; border:none; -webkit-transition:all .3s cubic-bezier(0, 0, 0.58, 1); -moz-transition:all .3s cubic-bezier(0, 0, 0.58, 1); -ms-transition:all .3s cubic-bezier(0, 0, 0.58, 1);
                      -o-transition:all .3s cubic-bezier(0, 0, 0.58, 1); transition:all .3s cubic-bezier(0, 0, 0.58, 1)}
.social-icons a:hover
                    { color:#00c8aa; background:transparent; }
.social-icons a:hover i
                    { color:#00c8aa; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); }


@media only screen and (max-width: 1024px) {
    .brand-logo { max-width: 350px; top: 11%; }
}

@media only screen and (max-width: 1024px) {
  .brand-logo { max-width: 320px; }
  /*.overlay{left:0;width:100%;height:100%}
  .overlay.skew-part{-webkit-transform:skew(0deg, 0deg);-moz-transform:skew(0deg, 0deg);-ms-transform:skew(0deg, 0deg);-o-transform:skew(0deg, 0deg);transform:skew(0deg, 0deg)}
  #container{height:100%;position:absolute;width:100%;left:0}
  .brand-logo{position:relative;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);margin:25px 0}
  .action-btn{padding:0.7em 0;float:none;margin:0 auto;max-width:50%}
  /*#left-side{position:relative;width:100%;height:auto;padding:100px 0 150px}
  #left-side .content {position:relative;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);top:auto;text-align:center}
  .social-icons{left:0;bottom:0;margin-left:0;margin-bottom:0}*/
}

@media only screen and (max-width: 768px) {
  .brand-logo { max-width: 280px; }
  /*.action-btn{max-width:70%;min-width:60%}*/
}

@media only screen and (max-width: 480px){
  .overlay { left: 0%; }
  #page-overlay { left: -100vw; }
  #left-side, #left-side .content { width: 100%; }

  /*#left-side .content{padding:0 3%}
  #left-side.minimal-phone{height:100vh}
  h1.text-intro{font-size:30px}
  h2.text-intro{font-size:18px}
  .action-btn{max-width:80%;min-width:70%}*/
}

@media only screen and (max-width: 425px){
  .brand-logo { max-width: 260px; top: 8%; }
  #left-side .content { 52vh; }
  h1 { width: 100%; }
  h2 { font-size: 20px; }
  .social-icons { bottom: 16%; }
}

@media only screen and (max-width: 320px){
  .brand-logo { max-width: 240px; }
  #left-side .content { 54vh; }
  h1 { font-size: 32px; }
  h2 { font-size: 18px; }
  .social-icons { bottom: 16%; }
}

@media screen and (max-device-width: 736px) and (orientation: landscape){
  .overlay { left: 0%; }
  #page-overlay { left: -100vw; }
  #left-side, #left-side .content { width: 100%; }
  #left-side .content { top: 58vh; }
  .brand-logo { max-width: 180px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  .action-btn {float: right; margin-top: -25vh;}
  .social-icons { bottom: 20%; }
}