.ip-header {
position : fixed;
top : 0;
z-index : 100;
min-height : 460px;
width : 100%;
height : 100%;
background : #f1f1f1;
}
.ip-header h1 {
margin : 0;
}
.ip-logo, .ip-loader {
position : absolute;
left : 0;
width : 100%;
opacity : 0;
cursor : default;
}
.ip-logo {
top : 0;
height : 100%;
transform : translate3d(0,35%,0);
text-align : center;
}
.ip-loader {
bottom : 25%;
}
.ip-header .ip-inner {
display : block;
margin : 0 auto;
}
.ip-header .ip-logo svg {
position : absolute;
min-height : 200px;
height : 25%;
}
.loaded .ip-header .ip-logo svg {
max-height : 300px;
}
.ip-header .ip-loader svg path.ip-loader-circle {
transition : stroke-dashoffset 0.2s;
}
.ip-main {
overflow : hidden;
margin : 0 auto;
padding : 160px 0 10em 0;
max-width : 1100px;
width : 90%;
}
.ip-main h2 {
margin : 0;
padding : 0.5em 0 1em;
color : #1c9ccd;
text-align : center;
font-size : 4.25em;
font-size : 4vw;
line-height : 1;
}
.browser {
margin : 0 auto;
padding-top : 8%;
min-height : 400px;
max-width : 1000px;
width : 100%;
border-radius : 8px;
background : url(../img/browser.png) 50% 0 no-repeat #fff;
background-size : 100%;
color : #d3d3d3;
}
.box {
float : left;
padding : 3.5em;
width : 33.3%;
font-size : 0.7em;
line-height : 1.5;
}
[class^="icon-"]::before, [class*=" icon-"]::before {
display : block;
margin-bottom : 0.5em;
padding : 0.5em;
border-radius : 5px;
background : #dfdfdf;
color : #fff;
text-align : center;
text-transform : none;
font-weight : normal;
font-style : normal;
font-variant : normal;
font-size : 5em;
line-height : 1;
speak : none;
}
.icon-bell:before {
content : "\e006";
}
.icon-cog:before {
content : "\e023";
}
.icon-heart:before {
content : "\e024";
}
.loading .ip-logo, .loading .ip-loader {
opacity : 1;
}
.loading .ip-logo {
animation : animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;
text-align : center;
}
@keyframes animInitialLogo {
from {
opacity : 0;
}
}
.loading .ip-loader {
animation : animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;
}
@keyframes animInitialLoader {
from {
opacity : 0;
transform : scale3d(0.5,0.5,1);
}
}
.loaded .ip-logo, .loaded .ip-loader {
opacity : 1;
}
.loaded .ip-logo {
transform-origin : 50% 0;
animation : animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
}
@keyframes animLoadedLogo {
to {
transform : translate3d(0,100%,0), translate3d(0,40px,0), scale3d(0.65,0.65,1);
opacity : 0;
}
}
.loaded .ip-loader {
animation : animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}
@keyframes animLoadedLoader {
to {
opacity : 0;
transform : translate3d(0,-100%,0), scale3d(0.3,0.3,1);
}
}
.loaded .ip-logo svg path {
transition : all 0.5s 0.3s ease;
}
.loaded .ip-header {
animation : animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}
@keyframes animLoadedHeader {
to {
transform : translate3d(0,-100%,0);
}
}
.loaded .ip-main h2, .loaded .ip-main .browser, .loaded .ip-main .browser .box, .loaded .codrops-demos {
animation : animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
}
.loaded .ip-main h2, .loaded .ip-main .browser .box:first-child {
animation-delay : 0.1s;
}
.loaded .codrops-demos, .loaded .ip-main .browser .box:nth-child(2) {
animation-delay : 0.15s;
}
.loaded .ip-main .browser .box:nth-child(3) {
animation-delay : 0.2s;
}
@keyframes animLoadedContent {
from {
opacity : 0;
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;
transform : none;
}
@media screen and (max-width:45em) {
.ip-main h2 {
font-size : 2.25em;
font-size : 10vw;
}
}
.progress-button {
position : relative;
display : inline-block;
text-align : center;
width : 45%;
min-width : 250px;
margin : 10px;
}
.progress-button button {
display : block;
margin : 0 auto;
padding : 0;
width : 250px;
height : 70px;
border : #1ECD97 solid 2px;
border-radius : 40px;
background : transparent;
color : #1ECD97;
letter-spacing : 1px;
font-size : 18px;
font-family : 'Montserrat', sans-serif;
transition : background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}
.progress-button button:hover {
background-color : #1ECD97;
color : #fff;
}
.progress-button button:focus {
outline : none;
}
.progress-button button span {
transition : opacity 0.3s 0.1s;
}
.progress-button svg {
position : absolute;
top : 0;
left : 50%;
transform : translateX(-50%);
}
.progress-button svg path {
opacity : 0;
}
.progress-button svg.checkmark path, .progress-button svg.cross path {
transition : opacity 0.1s;
}
.loading.progress-button button {
width : 70px;
border-width : 5px;
border-color : #ddd;
background-color : transparent;
color : #fff;
}
.loading.progress-button span {
transition : opacity 0.15s;
}
.loading.progress-button span, .success.progress-button span, .error.progress-button span {
opacity : 0;
}
.success.progress-button button, .error.progress-button button {
transition : background-color 0.3s, width 0.3s, border-width 0.3s;
}
.success.progress-button button {
border-color : #1ECD97;
background-color : #1ECD97;
}
.error.progress-button button {
border-color : #FB797E;
background-color : #FB797E;
}
.loading.progress-button svg.progress-circle path, .success.progress-button svg.checkmark path, .error.progress-button svg.cross path {
opacity : 1;
transition : stroke-dashoffset 0.3s;
}
.elastic.progress-button button {
transition : background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25,0.25,0.4,1.6), border-width 0.3s, border-color 0.3s;
}
.loading.elastic.progress-button button {
transition : background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6,-0.6,0.75,0.75), border-width 0.3s, border-color 0.3s;
}