.page-container {background: url("/im/home_bg.jpg") 50% 0 no-repeat #003989; background-size_: contain;}


/* SCREEN
-----------------------------------------------------------------*/
@media screen and (min-width: 1024px) {

.page-container {transition: background-position-y 0.9s ease-out;}
.page-container.page-0 {background-position-y: 0px; }
.page-container.page-1 {background-position-y: -130px; }
.page-container.page-2 {background-position-y: -260px; }
.page-container.page-3 {background-position-y: -390px; }
.page-container.page-4 {background-position-y: -520px; }
.page-container.page-5 {background-position-y: -650px; }

.page {width: 100%; height: 100%; box-sizing: border-box; transition: all 0.5s linear;} 

.home {overflow: hidden;}
.page-container {
   position: relative;
   width: 100%;
   height: 100%;
}
.page-container .page {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   display: none;
   overflow: hidden;
   z-index: 1;
}
.move-out-left {
   opacity: 0.1;
   animation: moveToLeft .7s ease-in-out both;
   z-index: 3;
}
.move-in-left {
   animation: moveFromRight .6s ease both;
   z-index: 2;
}
.move-out-right {
   opacity: 0.1;
   animation: moveToRight .7s ease-in-out both;
   z-index: 3;
}
.move-in-right {
   animation: moveFromLeft .6s ease both;
   z-index: 2;
}
.move-out-top {
   opacity: 0.1;
   animation: moveToTop .7s ease-in-out both;
   z-index: 3;
}
.move-in-top {
   animation: moveFromBottom .6s ease both;
   z-index: 2;
}
.move-out-bottom {
   opacity: 0.1;
   animation: moveToBottom .7s ease-in-out both;
   z-index: 3;
}
.move-in-bottom {
   animation: moveFromTop .6s ease both;
   z-index: 2;
}
@keyframes moveFromRight {
   from {transform: translateX(100%);}
}
@keyframes moveToLeft {
   from {}
   to {transform: translateX(-100%);}
}
@keyframes moveFromLeft {
   from {transform: translateX(-100%);}
}
@keyframes moveToRight {
   from {}
   to {transform: translateX(100%);}
}
@keyframes moveFromBottom {
   from {transform: translateY(100%);}
}
@keyframes moveToTop {
   from {}
   to {transform: translateY(-100%);}
}
@keyframes moveFromTop {
   from {transform: translateY(-100%);}
}
@keyframes moveToBottom {
   from {}
   to {transform: translateY(100%);}
}

.nav-home {opacity: 0.5; position: absolute; top: 35%; right: 50px; z-index: 80; display: inline-block; transition: all 0.2s linear;}
.nav-home:hover, .nav-home:active, .nav-home:focus {opacity: 1;}
.nav-home button:disabled,.nav-home button[disabled] {opacity: 0.1;}
.nav-home .btn:before {display: none !important;}
.nav-home .btn { padding: 0; border: none;
    border_: 1px solid #fff;
    color: #fff;
    font-size: 400%;
    background: none;
    cursor: pointer;
    display: block;
    margin: 0 0 5px 0px;
    text-transform: uppercase;
    outline: none !important;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
width: 40px; height: 80px; line-height: 80px; text-align: center;
}

.nav-home .btn:hover,
.nav-home .btn:active {
	color: #ff2e2d;
}
.nav-home li {list-style: none; margin: 10px 17px; padding: 0; display: block; width: 5px; height: 5px; border: 1px solid #fff; background: transparent; border-radius: 100%;}
.nav-home li.active {background: #fff;}
}

.keys {position: absolute; bottom: 25px; left: 50%; margin-left: -33px; z-index: 90; pointer-events: none; font-size_: 1rem; text-align: center;}
.keys span {display: inline-block; width: 16px; height: 16px; line-height: 16px; border: 1px solid #fff; opacity: 0.2; margin: 1px; border-radius: 4px;}
.keys span:nth-child(1) {position: absolute; top: -20px; left: 50%; margin-left: -9px; display_: none;}
.keys span:nth-child(3) {transform: translateY(0); animation: jump 1.4s ease-in-out infinite; animation-direction: alternate;}
@keyframes jump {
   100% {transform: translateY(5px);  opacity: 1;}
}


@media screen and (min-width: 1600px) and (max-width: 1730px) {
.nav-home {right: 5px;}
}



/* SCREEN
----------------------------------------------------

@media screen and (max-width: 1279px) {
.home {overflow: visible;}
.page-container {
   position: relative;
   width: 100%;
   height:  default !important;
}
.page-container .page {
   position: relative;
   width: 100%;
   height: default !important;
   top: 0;
   left: 0;
   display: block;
   overflow: visible;
}
-------------*/
@media screen and (max-width: 1279px) {
.nav-home, .keys {display: none;}

}