body,html{margin:0;padding:0}body{background:#000;overflow-x:hidden}.fogwrapper{height:100%;position:absolute;top:0;width:100%;filter:blur(1px) grayscale(.2) saturate(1.2) sepia(.2)}#foglayer_01,#foglayer_02,#foglayer_03{height:100%;position:absolute;width:200%}#foglayer_01 .image01,#foglayer_01 .image02,#foglayer_02 .image01,#foglayer_02 .image02,#foglayer_03 .image01,#foglayer_03 .image02{float:left;height:100%;width:50%}#foglayer_01{animation:foglayer_01_opacity 10s linear infinite,foglayer_moveme 15s linear infinite}#foglayer_02,#foglayer_03{animation:foglayer_02_opacity 21s linear infinite,foglayer_moveme 13s linear infinite}#foglayer_01 .image01,#foglayer_01 .image02{background:url(https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png) 50%/cover no-repeat transparent}#foglayer_02 .image01,#foglayer_02 .image02,#foglayer_03 .image01,#foglayer_03 .image02{background:url(https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png) 50%/cover no-repeat transparent}@keyframes foglayer_01_opacity{0%{opacity:.1}22%{opacity:.5}40%{opacity:.28}58%{opacity:.4}80%{opacity:.16}to{opacity:.1}}@keyframes foglayer_02_opacity{0%{opacity:.5}25%{opacity:.2}50%{opacity:.1}80%{opacity:.3}to{opacity:.5}}@keyframes foglayer_03_opacity{0%{opacity:.8}27%{opacity:.2}52%{opacity:.6}68%{opacity:.3}to{opacity:.8}}@keyframes foglayer_moveme{0%{left:0}to{left:-100%}}@media only screen and (min-width:280px) and (max-width:767px){#foglayer_01 .image01,#foglayer_01 .image02,#foglayer_02 .image01,#foglayer_02 .image02,#foglayer_03 .image01,#foglayer_03 .image02{width:100%}}.modal-animation{animation:modal-animation .3s ease-out forwards}@keyframes modal-animation{0%{transform:translateY(100vh) scale(.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.fog{pointer-events:none}.fog,.image01,.image02{position:absolute;width:100%;height:100%}.image01,.image02{background:url(/path-to-your-image) repeat;opacity:.6;animation:animateFog 300s linear infinite}.image01{animation-duration:150s}.image02{animation-duration:200s}@keyframes animateFog{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}@keyframes modal-close-animation{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(100vh) scale(.5);opacity:0}}@keyframes nav-slide-up{0%{transform:translateY(50%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes glance-slide-up{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes past-fade-in{0%{opacity:0}to{opacity:1}}.nav-animate{animation:nav-slide-up .5s ease forwards}.glance-animate{animation:glance-slide-up .5s ease forwards}.past-animate{animation:past-fade-in .5s ease forwards}.animate-nav{animation:nav-slide-up}@keyframes slideRight{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.animate-slide-right{animation:slideRight 1.5s ease-in-out forwards}.page-animate{animation:dropDown 2s ease-in-out}@keyframes dropDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}.animate-slide-left{animation:slideLeft 2.5s ease-in-out forwards}@media (max-width:640px){.hide-on-small{display:none}}@media (min-width:641px){.show-on-large{display:block!important}}