.ip-header{position:fixed;top:0;z-index:100;min-height:460px;width:100%;height:100%;background:#D7DCDF}
.ip-header h1{margin:0}
.ip-logo,.ip-loader{position:absolute;left:0;width:100%;opacity:0;cursor:default;pointer-events:none}
.ip-logo{top:-20px;height:100%;-webkit-transform:translate3d(0,25%,0);transform:translate3d(0,25%,0)}
.ip-loader{bottom:20%}
.ip-header .ip-inner{display:block;margin:0 auto}
.ip-header .ip-logo svg{position:absolute;min-height:210px;height:20%;top: 0;}
.loaded .ip-header .ip-logo svg{max-height:150px}
.ip-header .ip-logo svg path{fill:#fff}
.ip-header .ip-loader svg path{fill:none;stroke-width:6}
.ip-header .ip-loader svg path.ip-loader-circlebg{stroke:#fff}
.ip-header .ip-loader svg path.ip-loader-circle{-webkit-transition:stroke-dashoffset .2s;transition:stroke-dashoffset .2s;stroke:#00adef; }
.ip-main{overflow:hidden;margin:0 auto;padding:160px 0 10em;}
.ip-main h2{margin:0;padding:.5em 0 1em;color:#1c9ccd;text-align:center;font-size:4.25em;font-size:4vw;line-height:1}
.loading .ip-logo,.loading .ip-loader{opacity:1}
.loading .ip-logo{-webkit-animation:animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;animation:animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both}
@-webkit-keyframes animInitialLogo {
from{opacity:0}
}
@keyframes animInitialLogo {
from{opacity:0}
}
.loading .ip-loader{-webkit-animation:animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;animation:animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both}
@-webkit-keyframes animInitialLoader {
from{opacity:0;-webkit-transform:scale3d(0.5,0.5,1)}
}
@keyframes animInitialLoader {
from{opacity:0;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
}
.loaded .ip-logo,.loaded .ip-loader{opacity:1}
.loaded .ip-logo{-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-animation:animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;animation:animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards}
@-webkit-keyframes animLoadedLogo {
to{-webkit-transform:translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1)}
}
@keyframes animLoadedLogo {
to{-webkit-transform:translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1);transform:translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1)}
}
.loaded .ip-loader{-webkit-animation:animLoadedLoader .5s cubic-bezier(0.7,0,0.3,1) forwards;animation:animLoadedLoader .5s cubic-bezier(0.7,0,0.3,1) forwards}
@-webkit-keyframes animLoadedLoader {
to{opacity:0;-webkit-transform:translate3d(0,-100%,0) scale3d(0.3,0.3,1)}
}
@keyframes animLoadedLoader {
to{opacity:0;-webkit-transform:translate3d(0,-100%,0) scale3d(0.3,0.3,1);transform:translate3d(0,-100%,0) scale3d(0.3,0.3,1)}
}
.loaded .ip-logo svg path, .loaded .ip-logo svg image{-webkit-transition:all .5s ease .3s;transition:all .5s ease .3s;fill:#121212}
.loaded .ip-header{-webkit-animation:animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;animation:animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards}
@-webkit-keyframes animLoadedHeader {
to{-webkit-transform:translate3d(0,-100%,0)}
}
@keyframes animLoadedHeader {
to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
}
.loaded .ip-main h2,.loaded .ip-main .browser,.loaded .ip-main .browser .box,.loaded .codrops-demos{-webkit-animation:animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;animation:animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both}
.loaded .ip-main h2,.loaded .ip-main .browser .box:first-child{-webkit-animation-delay:.1s;animation-delay:.1s}
.loaded .codrops-demos,.loaded .ip-main .browser .box:nth-child(2){-webkit-animation-delay:.15s;animation-delay:.15s}
.loaded .ip-main .browser .box:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}
@-webkit-keyframes animLoadedContent {
from{opacity:0;-webkit-transform:scale3d(0.3,0.3,1)}
}
@keyframes animLoadedContent {
from{opacity:0;-webkit-transform:scale3d(0.3,0.3,1);transform:scale3d(0.3,0.3,1)}
}
.layout-switch .ip-header{position:absolute}
.no-js .ip-header{position:relative;min-height:0}
.no-js .ip-header .ip-logo{margin-top:20px;height:180px;opacity:1;-webkit-transform:none;transform:none}
.no-js .ip-header .ip-logo svg path{fill:#fff}
@media screen and (max-width: 45em) {
.ip-main h2{font-size:2.25em;font-size:10vw}
.box{width:100%}
}