.intro {background:#574737 url(intro.jpg) center center no-repeat; background-size:cover}
.intro .intro-headline {background:rgba(31, 80, 156,.8); padding:16px 40px; display:inline-block; margin: 40px 0}
.intro .numbering {display:table; width:100%; max-width:none; margin:0; height:100vh}
.intro-content {display:table-cell; vertical-align:middle; text-align:center; color:#fff; padding:20px}
.intro-logo {width:245px}
/*.intro h1 {color:#fff; text-transform: uppercase; font-size:60px; font-weight:bold; line-height:76px; margin-top:0px}*/
.intro h1 {color:#fff; text-transform: uppercase; font-size:32px; font-weight:bold; line-height:50px; margin-top:0px}
.intro h2 {color:#fff; text-transform: uppercase; font-weight:bold; margin-top:0px}
.intro h3 {line-height: 1.3}

@media (min-width: 992px) and (max-width: 1200px) { /* Md */
.intro .intro-headline {margin:40px 0}
}
@media (min-width: 767px) and (max-width: 991px) { /* Sm */
.intro .intro-headline {margin:47px 0}
.intro h1 {font-size:30px; line-height:44px}
}
@media (min-width: 576px) and (max-width: 767px) { /* Sm */
.intro h1 {font-size:28px; line-height:40px}
}
@media (max-width: 576px) { /* xs for Bootstrap 4*/
.intro .intro-headline {padding:14px 7px 7px;margin: 37px 0 15px 0}
.intro-logo {width:255px}
.intro h1 {font-size:24px; line-height:36px}
.intro h2 {font-size:30px}
}
@media (max-width: 414px) { /* md mobiles iphone 6,8,6+,8+; huawei */
.intro .intro-headline {padding:14px 7px 7px;margin: 37px 0 15px 0}
.intro-logo {width:255px}
.intro h1 {font-size:20px; line-height:28px}
.intro h2 {font-size:30px}
}



/* Scroll down */
.mouse-wrap {display:inline-block; transform:translate(-50%, -50%); position:relative; margin-top:34px}
.mouse {top:0; position:absolute; left:50%; transform:translateX(-50%); width:29px; animation:nudgeMouse 5.5s ease-out infinite}
.mouse:after {content:''; background-color:#fff; width:7px; height:7px; border-radius:100%; animation:trackBallSlide 5.5s linear infinite; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; transform:translateY(20px)}
.mouse .frame {width:100%; position:absolute; z-index:1}
.mouse .frame path {fill:none; stroke:#fff; stroke-width:3; opacity:0.5}
.mouse .mouse-left, .mouse .mouse-right {width:50%; position:absolute; z-index:2}
.mouse .mouse-right {right:0}
.mouse .Animate-Draw {fill:none; stroke:#fff; stroke-width:3; fill-opacity:1}
.mouse .mouse-left .Animate-Draw {animation:DrawLine 5.5s ease-out infinite}
.mouse .mouse-right .Animate-Draw {animation:DrawLineBack 5.5s ease-out infinite}
/*Keyframes*/
@keyframes DrawLine {
0% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:1}
22% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:1}
38% {stroke-dashOffset:125; stroke-dasharray:120; stroke-opacity:1}
38.1% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:0}
48% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:1}
64% {stroke-dashOffset:125; stroke-dasharray:120; stroke-opacity:1}
64.1% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:0}
74% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:1}
90% {stroke-opacity:1; stroke-dashOffset:125; stroke-dasharray:120}
90.1% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:0}
}
@keyframes DrawLineBack {
0% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:1}
22% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:1}
38% {stroke-dashOffset:-114; stroke-dasharray:120; stroke-opacity:1}
38.1% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:0}
48% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:1}
64% {stroke-dashOffset:-114; stroke-dasharray:120; stroke-opacity:1}
64.1% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:0}
74% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:1}
90% {stroke-opacity:1; stroke-dashOffset:-114; stroke-dasharray:120}
90.1% {stroke-dashOffset:0; stroke-dasharray:120; stroke-opacity:0}
}
@keyframes nudgeMouse {
0% {transform:translateY(0) translateX(-50%)}
22% {transform:translateY(0px) translateX(-50%)}
38% {transform:translateY(9px) translateX(-50%)}
48% {transform:translateY(0px) translateX(-50%)}
64% {transform:translateY(9px) translateX(-50%)}
74% {transform:translateY(0px) translateX(-50%)}
90% {transform:translateY(9px) translateX(-50%)}
}
/*Text*/
@keyframes nudgeText {
0% {transform:translateY(0) translateX(-50%) scaleY(1); opacity:1}
22% {transform:translateY(0px) translateX(-50%) scaleY(1); opacity:1}
38% {transform:translateY(5px) translateX(-50%) scaleY(0.9); opacity:0.5}
48% {transform:translateY(0px) translateX(-50%) scaleY(1); opacity:1}
64% {transform:translateY(5px) translateX(-50%) scaleY(0.9); opacity:0.5}
74% {transform:translateY(0px) translateX(-50%) scaleY(1); opacity:1}
90% {transform:translateY(5px) translateX(-50%) scaleY(0.9); opacity:0.5}
}
/*Mouse wheel*/
@keyframes trackBallSlide {
0% {transform:translateY(20px) scale(1); opacity:1}
22% {transform:translateY(20px) scale(1); opacity:1}
26% {transform:translateY(30px) scale(0.9); opacity:1}
34% {transform:translateY(55px) scale(0.1); opacity:0}
41% {transform:translateY(30px) scale(0); opacity:0.3}
48% {transform:translateY(20px) scale(1); opacity:1}
52% {transform:translateY(30px) scale(0.9); opacity:1}
60% {transform:translateY(55px) scale(0.1); opacity:0}
67% {transform:translateY(30px) scale(0); opacity:0.3}
74% {transform:translateY(20px) scale(1); opacity:1}
78% {transform:translateY(30px) scale(0.9); opacity:1}
86% {transform:translateY(55px) scale(0.1); opacity:0}
93% {transform:translateY(30px) scale(0); opacity:0.3}
100% {transform:translateY(20px) scale(1); opacity:1}
}

.mouse-wrap [data-rows-scroll] {display:block; position:absolute; top:-13px; left:-20px; width:40px;height:80px}