html, body { width:100%; height:100%; padding:0; margin:0; overflow-x:hidden; background-color:#0c4a90; }



header#header { background-color:#FFF; position:fixed; }

footer { display:none; }



.skrollable { position:fixed; z-index:100; }

.skrollr-mobile .skrollable { position:absolute; }

.skrollable .skrollable { position:absolute; }

.skrollable .skrollable .skrollable { position:static; }



#scrollbar { position:fixed; right:2px; height:50px; width:6px; background:#444; background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.6); z-index:300; border-radius:3px; }

.skrollr-desktop #scrollbar { display:none; }



.mouse { position:fixed; bottom:30%; left:50%; transform:translateX(-50%); z-index:5; }

.mouse svg { width:38px; }



#sections { width:100%; min-height:100vh; }

#sections .full-section { width:100%; height:100vh; position:fixed; perspective:1000px; /* transform-style:preserve-3d; */ }

#sections .full-section .bg { position:absolute; width:100vw; height:100vw; box-shadow:inset 0 0 200px #00000000, inset 0 0 200px #00000000; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); background-position:center center; background-size:cover; overflow:hidden; z-index:2; border-radius:50%; }

#sections .full-section .bg:before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#444; opacity:0.5; z-index:1; }

#sections .full-section .letter { position:absolute; top:45%; left:50%; z-index:5; width:360px; overflow:visible; }

#sections .full-section .letter path.letter-fill { fill:#004488; }

#sections .full-section .letter path.letter-border { transform:translate(2%, 2%); stroke:#FFF; fill:none; }

#sections .full-section .subtitle { color:#FFF; font-weight:700; font-size:24px; position:absolute; left:50%; width:420px; line-height:1.3; max-width:90%; text-align:center; z-index:5; transform:translateX(-50%); opacity:0; top:70%; }

#sections .full-section .overlay { position:absolute; width:100vw; height:100vw; top:50%; left:50%; transform:translate(-50%,-50%); background:#000; z-index:3; border-radius:50%;  }

#sections .full-section iframe { width:100%; height:calc(100% - 75px); background:transparent !important; position:absolute; top:0; left:0; border:0; margin-top:75px; overflow:hidden; }



#sections .full-section.custom .subtitle { top:50%; }



#sections .full-section.intro { z-index:0; }

#sections .full-section.letter-l { z-index:0; }

#sections .full-section.letter-o { z-index:0; }

#sections .full-section.letter-r { z-index:0; }

#sections .full-section.letter-d { z-index:0; border-radius:0; }

/* #sections [lord-first-scene] { z-index:2 !important; } */



#sections .video { height: calc(100vw * 0.75); position:fixed; right:0; left:0; z-index: -99; top:50%; transform:translateY(-50%); }



#sections .full-section.intro .intro-text { color:#FFF; font-weight:700; font-size:24px; position:fixed; left:50%; top:50%; width:360px; line-height:1.3; max-width:90%; text-align:center; z-index:200; transform:translate(-50%,-50%); opacity:1; }



@media screen and (max-width:1600px) {

	#sections .full-section .letter { width:260px; }

}



@media screen and (max-width:960px) {

	#sections .full-section .bg, #sections .full-section .overlay { width:100vh; height:100vh; }

	#sections .full-section .letter { width:180px; }

	#sections .full-section .subtitle { font-size:18px; width:240px; top:65%; }

	#sections .full-section.intro .intro-text { font-size:18px; }

	.mouse svg { width:78px; }

}

body::-webkit-scrollbar { display: none; }



.loading { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; z-index:10; }



.loader, .loader:before, .loader:after { border-radius: 50%; }

.loader { color: #ffffff; font-size: 11px; text-indent: -99999em; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.4); width: 10em; height: 10em; box-shadow: inset 0 0 0 1em; }

.loader:before,

.loader:after { position: absolute; content: ''; }

.loader:before { width: 5.2em; height: 10.2em; background: #000; border-radius: 10.2em 0 0 10.2em; top: -0.1em; left: -0.1em; -webkit-transform-origin: 5.1em 5.1em; transform-origin: 5.1em 5.1em; -webkit-animation: load2 2s infinite ease 1.5s; animation: load2 2s infinite ease 1.5s; }

.loader:after { width: 5.2em; height: 10.2em; background: #000; border-radius: 0 10.2em 10.2em 0; top: -0.1em; left: 4.9em; -webkit-transform-origin: 0.1em 5.1em; transform-origin: 0.1em 5.1em; -webkit-animation: load2 2s infinite ease; animation: load2 2s infinite ease; }

@-webkit-keyframes load2 { 0% {   -webkit-transform: rotate(0deg);   transform: rotate(0deg); } 100% {   -webkit-transform: rotate(360deg);   transform: rotate(360deg); } }

@keyframes load2 { 0% {   -webkit-transform: rotate(0deg);   transform: rotate(0deg); } 100% {   -webkit-transform: rotate(360deg);   transform: rotate(360deg); } }



@keyframes wiggle {

    0% { margin-bottom: 0px; }

   5% { margin-bottom: 20px; }

    10% { margin-bottom: 0px; }

   15% { margin-bottom: 20px; }

   25% { margin-bottom: 0px; }

  100% { margin-bottom: 0px; }

}

.mouse svg { animation:wiggle 5s infinite ease-in-out; }