body {
margin: 0px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


img {
border-width: 0px;
}


@font-face {
    font-family: "Roboto-Regular";
    src: url('../font/Roboto-Regular.eot');
    src: url('../font/Roboto-Regular.eot') format('embedded-opentype'),
         url('../font/Roboto-Regular.woff') format('woff'),
         url('../font/Roboto-Regular.ttf') format('truetype'),
         url('../font/Roboto-Regular.svg#Roboto-Regular') format('svg');
}


@font-face {
    font-family: "Uni-Sans-Heavy";
    src: url('../font/Uni-Sans-Heavy.eot');
    src: url('../font/Uni-Sans-Heavy.eot') format('embedded-opentype'),
         url('../font/Uni-Sans-Heavy.woff') format('woff'),
         url('../font/Uni-Sans-Heavy.ttf') format('truetype'),
         url('../font/Uni-Sans-Heavy.svg#Uni-Sans-Heavy') format('svg');
}


#preload {
display: none;
}


#logo {
position: fixed;
top: 5%;
right: 0px;
left: 0px;
margin-left: auto;
margin-right: auto;
height: 4%;
width: auto;
cursor: pointer;
z-index: 10;
}
@media screen and (orientation:portrait) {
#logo {
height: auto;
width: 35%;
}
}


#campaign_intro {
position: absolute;
top: 22%;
right: 0px;
left: 0px;
margin-left: auto;
margin-right: auto;
height: 30%;
width: auto;
display: none;
}
@media screen and (orientation:portrait) {
#campaign_intro {
top: 26%;
height: auto;
width: 80%;
}
}


.button {
position: absolute;
right: 0px;
left: 0px;
margin-left: auto;
margin-right: auto;
height: 7%;
width: auto;
display: none;
cursor: pointer;
}
@media screen and (orientation:portrait) {
.button {
height: auto;
width: 70%;
}
}


#start {
top: 72%;
}
@media screen and (orientation:portrait) {
#start {
}
}


#skip {
top: 82%;
z-index: 10;
}
@media screen and (orientation:portrait) {
#skip {
}
}


.stage_container {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
display: none;
overflow: hidden;
}
@media screen and (orientation:portrait) {
.stage_container {
}
}


#stage_container01 {
z-index: 3;
}
@media screen and (orientation:portrait) {
#stage_container01 {
}
}


#stage_container02 {
z-index: 4;
}
@media screen and (orientation:portrait) {
#stage_container02 {
}
}


#stage_container03 {
z-index: 5;
}
@media screen and (orientation:portrait) {
#stage_container03 {
}
}


#stage_container04 {
background-color: #fff;
z-index: 6;
}
@media screen and (orientation:portrait) {
#stage_container04 {
}
}


#campaign_final {
position: absolute;
top: 29%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
height: 37%;
width: auto;
}
@media screen and (orientation:portrait) {
#campaign_final {
top: 30%;
height: auto;
width: 85%;
}
}


.stage {
position: fixed;
top: -50%;
left: 0px;
height: 150%;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media screen and (orientation:portrait) {
.stage {
}
}


#stage01 {
background: url(../img/stage01.jpg) no-repeat center center;
}
@media screen and (orientation:portrait) {
#stage01 {
}
}


#stage02 {
background: url(../img/stage02.jpg) no-repeat center center;
}
@media screen and (orientation:portrait) {
#stage02 {
}
}


#stage03 {
background: url(../img/stage03.jpg) no-repeat center center; 
}
@media screen and (orientation:portrait) {
#stage03 {
}
}


#eagle {
position: absolute;
bottom: -35%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
height: 35%;
width: auto; 
z-index: 10;
}
@media screen and (orientation:portrait) {
#eagle {
bottom: -30%;
height: auto;
width: 95%; 
}
}


.headline {
position: absolute;
top: 40%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
height: 20%;
width: auto; 
display: none;
z-index: 9;
}
@media screen and (orientation:portrait) {
.headline {
top: 35%;
height: auto;
width: 95%; 
}
}


#header {
position: fixed;
top: 0px;
left: 0px;
height: 14%;
width: 100%;
background-color: #fff;
z-index: 9;
}
@media screen and (orientation:portrait) {
#header {
}
}


.part {
position: absolute;
left: 0px;
height: 97%;
width: 100%;
z-index: 1;
}
@media screen and (orientation:portrait) {
.part {
}
}


#part01 {
top: 0px;
overflow: hidden;
}


.bg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
}


#products01 {
position: absolute;
bottom: -10%;
right: -70%;
height: 90%;
width: auto;
}
@media screen and (orientation:portrait) {
#products01 {
top: -40%;
right: 8%;
height: auto;
width: 84%;
}
}


.campaign_home {
position: absolute;
top: 28%;
left: 12%;
height: 37%;
width: auto;
display: none;
}
@media screen and (orientation:portrait) {
.campaign_home {
top: 56%;
left: 8%; 
height: auto;
width: 83%;
}
}


#discover {
position: absolute;
top: 77%;
left: 12%;
height: 8.5%;
width: auto;
cursor: pointer;
display: none;
}
@media screen and (orientation:portrait) {
#discover {
top: 84%;
left: 25%;
height: auto;
width: 50%;
}
}


.arrow {
position: absolute;
bottom: 2%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 3%;
cursor: pointer;
z-index: 5;
}
@media screen and (orientation:portrait) {
.arrow {
width: 9%;
height: auto;
}
}


#part02 {
top: 100%;
background: url(../img/white_bg.jpg) no-repeat center center;
}
@media screen and (orientation:portrait) {
#part02 {
}
}


#part03 {
top: 200%;
background: url(../img/white_bg.jpg) no-repeat center center;
}
@media screen and (orientation:portrait) {
#part03 {
}
}


#part04 {
top: 300%;
background: url(../img/white_bg.jpg) no-repeat center center;
}
@media screen and (orientation:portrait) {
#part03 {
}
}


.cover {
position: absolute;
top: 0px;
left: 0px;
height: 50%;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
z-index: 1;
}
@media screen and (orientation:portrait) {
.cover {
height: 30%;
}
}


#cover02 {
background: url('../img/cover02.jpg') no-repeat right center;
}
@media screen and (orientation:portrait) {
#cover02 {
background-image: url(../img/cover02.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
}
}


#cover03 {
background: url(../img/cover03.jpg) no-repeat right center;
}
@media screen and (orientation:portrait) {
#cover03 {
background-image: url(../img/cover03.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;

}
}


#cover04 {
background: url(../img/cover04.jpg) no-repeat right center;
}
@media screen and (orientation:portrait) {
#cover04 {
background-image: url(../img/cover04.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;

}
}


.products {
position: absolute;
top: 28%;
left: 1%;
height: auto;
width: 45%;
z-index: 2;
}
@media screen and (orientation:portrait) {
.products {
top: 5%;
left: 7%;
width: 86%;
}
}


.feature {
position: absolute;
top: 56%;
height: 30%;
width: 20%;
border-width: 0px;
border-right: 4px;
border-color: #000;
border-style: solid; 
padding-right: 35px;
padding-top: 20px;
font-family: "Roboto-Regular", Arial, Helvetica, sans-serif;
font-size: 0.9vw;
line-height: 1.3vw;
letter-spacing: 0.02vw;
z-index: 2;
}
@media screen and (orientation:portrait) {
.feature {
height: 20%;
width: 80%;
border-right: 0px;
padding-right: 0px;
padding-top: 0px;
font-size: 3vw;
line-height: 4.4vw;
}
}


.feature span {
font-family: "Uni-Sans-Heavy", Arial, Helvetica, sans-serif;
font-size: 1.9vw;
line-height: 1.9vw;
color: #283679;
}
@media screen and (orientation:portrait) {
.feature span {
font-size: 5.5vw;
line-height: 5.5vw;
}
}


#feature01 {
left: 44%;
display: block;
}
@media screen and (orientation:portrait) {
#feature01 {
display: none;
}
}


#feature02 {
right: 6%;
display: block;
}
@media screen and (orientation:portrait) {
#feature02 {
display: none;
}
}


#feature_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#feature_mobile {
top: 39%;
left: 10%;
display: block;
}
}


#feature_mobile hr {
border-top: 5px solid #000;
}


#footer {
position: absolute;
top: 400%;
left: 0px;
height: 10%;
width: 100%;
background-color: #283679;
}
@media screen and (orientation:portrait) {
#footer {
height: 16%;
}
}


#logos_footer {
position: absolute;
top: 29%;
left: 4%;
height: 40%;
width: auto;
}
@media screen and (orientation:portrait) {
#logos_footer {
top: 13%;
left: 15%;
height: auto;
width: 70%
}
}


.social {
position: absolute;
top: 25%;
max-height: 50%;
max-width: 20%;
cursor: pointer;
-webkit-transition: transform .2s;
-moz-transition: transform .2s;
-o-transition: transform .2s;
transition: transform .2s;
}
@media screen and (orientation:portrait) {
.social {
top: 50%;
max-height: 33%;
max-width: 23%;
}
}


.social:hover {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-o-transform: scale(1.15);
transform: scale(1.15);
}



#social04 {
right: 4%;
}
@media screen and (orientation:portrait) {
#social04 {
right: 5%;
}
}


#social03 {
right: 7.5%;
}
@media screen and (orientation:portrait) {
#social03 {
right: 15%;
}
}


#social02 {
right: 11%;
}
@media screen and (orientation:portrait) {
#social02 {
right: 25%;
}
}


#social01 {
right: 14.5%;
}
@media screen and (orientation:portrait) {
#social01 {
right: 35%;
}
}


#gotowebsite {
position: absolute;
top: 25%;
right: 22%;
height: 50%;
width: auto;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#gotowebsite {
top: 53%;
right: inherit;
left: 5%;
height: auto;
width: 45%;
}
}