:after,:before{content:"";position:absolute;box-sizing:border-box}body{background-color:#011936;min-height:800px;animation:showUp 1s forwards linear}.app__header{text-align:center}.app__header__text{font-family:"Scope One",serif;display:inline-block;margin:1em auto .3em;color:#f7f7f7;font-size:3.5em;line-height:1.2;border-bottom:5px solid #78c932}.app__header__description{font-family:Roboto,sans-serif;font-weight:300;margin:0 auto;color:#a9dc7c;font-size:1.6em}.nav{max-width:100%;margin-top:4em}.nav__list{padding:0;text-align:center}.nav__list__item{display:inline-block;margin:0 .2em;text-align:center}.nav__list__link{font-family:Roboto,sans-serif;font-weight:300;width:110px;padding:5px 10px;color:#f7f7f7;font-size:1.2em;text-decoration:none;cursor:pointer;box-shadow:inset -43px 0 #569024,inset 43px 0 0 #569024,0 3px 0 #011936,0 4px 0 #78c932;transition:all .3s linear}.nav__list__link:hover{background-color:#4b7e1f;box-shadow:inset 0 0 0 #78c932,inset 0 0 0 #78c932}.nav__list__link.active{box-shadow:inset -43px 0 #78c932,inset 43px 0 0 #78c932,0 3px 0 #011936,0 4px 0 #78c932}.flex__container{display:flex;flex-wrap:wrap;justify-content:center;max-width:90%;margin:2em auto;animation:show .5s forwards linear}.flex__item{position:relative;width:440px;height:280px;margin:.7em;overflow:hidden;transition:all .3s linear}.flex__img{position:absolute;width:500px;height:auto}.flex__text{font-family:Roboto,sans-serif;font-weight:300;position:absolute;box-sizing:border-box;text-align:center;z-index:2}.flex__text>span{font-weight:700}.flex__item--first{background:radial-gradient(#444 50%,#000)}.flex__item--first .flex__img{left:50%;transform:translate(-43%,-7%) scale(1.1);transition:all 1.3s cubic-bezier(.25,.25,.52,1.5)}.flex__item--first .flex__text{width:260px;padding:12px 10px;background-color:#f7f7f7;color:#008ad7;font-size:.9em;text-transform:uppercase;letter-spacing:3px;opacity:0;transform:scale(8);transition:all 1.3s cubic-bezier(.25,.25,.52,1.15)}.flex__item--first .flex__text:nth-child(1){top:50%;left:-300%;z-index:2}.flex__item--first .flex__text:nth-child(2){bottom:50%;right:-300%;background-color:#008ad7;color:#f7f7f7;z-index:1}.flex__item--first:hover .flex__img{filter:brightness(.9) contrast(1.6);opacity:.6;transform:translate(-50%,-2%) scale(1)}.flex__item--first:hover .flex__text:nth-child(1){top:31%;left:50%;transform:translateX(-42%) scale(1);opacity:1}.flex__item--first:hover .flex__text:nth-child(2){bottom:31%;right:50%;transform:translateX(42%) scale(1);opacity:1}.flex__item--second::after{width:100%;height:100%;background:radial-gradient(transparent 30%,#333);opacity:0;transition:all .8s linear}.flex__item--second .flex__img{top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);transition:all 1.3s cubic-bezier(.25,.25,.52,1)}.flex__item--second .flex__text{width:260px;padding:12px 10px;background-color:#f7f7f7;color:#78c932;font-size:.9em;text-transform:uppercase;letter-spacing:3px;transform:scale(8,8);opacity:0;transition:all 1.3s cubic-bezier(.25,.25,.52,1.15)}.flex__item--second .flex__text:nth-child(1){top:150%;left:300%;z-index:2}.flex__item--second .flex__text:nth-child(2){bottom:150%;right:300%;background-color:#78c932;color:#f7f7f7;z-index:1}.flex__item--second:hover::after{opacity:.6}.flex__item--second:hover .flex__img{transform:translate(-55%,-55%) scale(1)}.flex__item--second:hover .flex__text:nth-child(1){top:31%;left:50%;transform:translateX(-42%) scale(1,1);opacity:1}.flex__item--second:hover .flex__text:nth-child(2){bottom:31%;right:50%;transform:translateX(42%) scale(1,1);opacity:1}.flex__item--third .flex__img{top:50%;left:50%;transform:translate(-50%,-50%) scale(1.2);transition:all 1.3s cubic-bezier(.25,.25,.52,1)}.flex__item--third .flex__text{width:180px;height:180px;padding-top:3.6em;background-color:#266173;top:150%;left:50%;transform:translateX(-50%) scaleX(0);color:#f7f7f7;font-size:1.1em;border:5px solid rgba(51,207,255,.2);border-radius:50%;opacity:0;transition:all 1s cubic-bezier(.25,.25,.52,1.3)}.flex__item--third .flex__text>span{margin-top:.15em}.flex__item--third:hover .flex__img{transform:translate(-50%,-40%) scale(1.3)}.flex__item--third:hover .flex__text{top:50%;left:50%;transform:translate(-50%,-58.5%) scaleX(1);opacity:1}.flex__item--fourth .flex__img{top:50%;left:50%;transform:translate(-55%,-50%) scale(1);transition:all 1.1s cubic-bezier(.25,.25,.52,1)}.flex__item--fourth .flex__text{width:180px;height:180px;padding-top:3.6em;background-color:rgba(9,109,29,.8);top:50%;left:150%;transform:translateY(-50%) scaleX(.5) rotate(90deg);color:#f7f7f7;font-size:1.1em;border:5px solid rgba(51,255,92,.2);border-radius:50%;opacity:0;transition:all 1s cubic-bezier(.25,.25,.52,1.3)}.flex__item--fourth .flex__text>span{margin-top:.15em}.flex__item--fourth:hover .flex__img{transform:translate(-40%,-50%) scale(1.1)}.flex__item--fourth:hover .flex__text{top:50%;left:50%;transform:translate(-50%,-58.5%) scaleX(1) rotate(0);opacity:1}.flex__item--fifth::after,.flex__item--fifth::before{top:-100%;left:50%;transform:translateX(-50%);opacity:0}.flex__item--fifth::before{width:155px;height:155px;background-color:rgba(244,240,244,.8);border:10px solid rgba(244,240,244,.3);transition:all .9s cubic-bezier(.25,.25,.52,1.2);z-index:1}.flex__item--fifth::after{width:175px;height:175px;border:5px solid rgba(244,240,244,.5);transition:all .9s cubic-bezier(.25,.25,.52,1.2)}.flex__item--fifth .flex__img{top:50%;left:50%;transform:translate(-50%,-50%) scale(1);transition:all 1.1s cubic-bezier(.25,.25,.52,1)}.flex__item--fifth .flex__text{left:45.5%;bottom:23%;color:#2985a3;font-size:1em;text-align:right;text-transform:uppercase;letter-spacing:3px;opacity:0;transform-origin:bottom;transform:scaleY(-1);transition:all 1.1s cubic-bezier(.25,.25,.52,1.1)}.flex__item--fifth:hover::after,.flex__item--fifth:hover::before{top:50%;transform:translate(-50%,-50%);opacity:1}.flex__item--fifth:hover .flex__img{transform:translate(-50%,-50%) scale(1.2)}.flex__item--fifth:hover .flex__text{transform:scaleY(1);opacity:1}.flex__item--sixth::after,.flex__item--sixth::before{top:50%;left:50%;transform:translate(-50%,-50%) scale(.2) rotate(180deg);opacity:0;transition:all 1s cubic-bezier(.25,.25,.52,1)}.flex__item--sixth::before{width:160px;height:160px;border:5px solid rgba(240,244,244,.5);z-index:1}.flex__item--sixth::after{width:140px;height:140px;background-color:rgba(244,240,244,.7);border:10px solid rgba(244,240,244,.2)}.flex__item--sixth .flex__img{top:50%;left:50%;transform:translate(-50%,-50%) scale(1);transition:all 1.1s cubic-bezier(.25,.25,.52,1)}.flex__item--sixth .flex__text{top:43%;left:50%;color:#2985a3;font-size:1em;text-transform:uppercase;letter-spacing:3px;transform-origin:bottom;transform:translateX(-50%) scaleY(0);opacity:0;transition:all .8s cubic-bezier(.25,.25,.52,1)}.flex__item--sixth:hover::after,.flex__item--sixth:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}.flex__item--sixth:hover .flex__img{transform:translate(-50%,-50%) scale(1.2)}.flex__item--sixth:hover .flex__text{transform:translate(-50%,-50%) scaleY(1);opacity:1}.flex__item--seventh .flex__img{top:50%;left:50%;transform:translate(-50%,-50%) scale(1);transition:all 1.1s cubic-bezier(.25,.25,.52,1)}.flex__item--seventh .flex__text{top:50%;left:50%;width:160px;height:160px;background:linear-gradient(to top left,rgba(227,117,53,.9) 20%,rgba(249,224,210,.9) 100%);color:#ffa;font-size:.9em;text-transform:uppercase;letter-spacing:3px;line-height:160px;border-radius:50%;transform-origin:bottom;transform:translate(-50%,-50%) scale(5);opacity:0;transition:all .8s cubic-bezier(.25,.25,.52,1)}.flex__item--seventh:hover .flex__img{filter:brightness(.9);transform:translate(-50%,-50%) scale(1.2)}.flex__item--seventh:hover .flex__text{transform:translate(-50%,-58%) scale(1);opacity:1}.flex__item--eight .flex__img{top:50%;left:50%;transform:translate(-50%,-50%) scale(1);transition:all 1.1s cubic-bezier(.25,.25,.52,1)}.flex__item--eight .flex__text{top:50%;left:50%;width:160px;height:160px;background:linear-gradient(to bottom right,rgba(75,147,185,.9) 0,rgba(253,206,165,.9) 80%);color:#ffa;font-size:.9em;text-transform:uppercase;letter-spacing:3px;line-height:160px;border-radius:50%;transform-origin:center;transform:translate(-50%,-50%) scale(8) rotate(-180deg);opacity:0;transition:all 1s cubic-bezier(.25,.25,.52,1.1)}.flex__item--eight:hover .flex__img{transform:translate(-50%,-50%) scale(1.2)}.flex__item--eight:hover .flex__text{transform:translate(-50%,-58%) scale(1) rotate(0);opacity:1}.flex__button{font-family:Roboto,sans-serif;font-weight:300;display:block;width:130px;margin:0 auto 1em;padding:10px 15px;color:#f7f7f7;text-align:center;font-size:1.2em;line-height:.9;border:0;box-shadow:inset -66px 0 #13a5a1,inset 66px 0 0 #13a5a1,0 3px 0 #011936,0 4px 0 #17c6c1;transition:all .3s linear;cursor:pointer}.flex__button:hover{background-color:#0e7c79;box-shadow:inset 0 0 0 #13a5a1,inset 0 0 0 #13a5a1}.code__container{display:block;max-width:80%;margin:1em auto}.code__heading{font-family:Roboto,sans-serif;font-weight:300;position:relative;display:block;box-sizing:border-box;width:100%;margin:0 auto;padding:5px 0 5px 10px;color:#fff;font-size:1.2em;text-transform:uppercase;animation:showUp .5s forwards alternate}.code__heading--html{background-color:#17c6c1}.code__heading--css{background-color:#78c932}pre{width:100%;margin:0 auto;animation:showUp .6s forwards alternate}.pre__css{height:600px}.footer{position:relative;top:2em;height:100px;text-align:center}.footer__copyright{font-family:Roboto,sans-serif;font-weight:300;color:#f7f7f7;font-size:1.1em}.footer__social-btn{margin-top:.5em}.fa.fa-codepen,.fa.fa-github,.fa.fa-twitter{width:25px;color:#78c932;transition:.2s linear}.fa.fa-twitter:hover{color:#96fb3f}.fa.fa-codepen:hover{color:#96fb3f}.fa.fa-github{width:33px}.fa.fa-github:hover{color:#96fb3f}.fa.fa-lg{font-size:1.5em}.fa.fa-lg:hover{transform:scale(1.1)}.hide-element{transform:scale(1,1);transform-origin:bottom;animation:hide 1s forwards}@keyframes show{0%{opacity:.5}100%{opacity:1}}@keyframes hide{0%{display:block;transform:scale(1,1);opacity:1}100%{display:none;margin:0 auto;height:0;transform:scale(1,0);opacity:0}}@keyframes showUp{0%{transform:translateY(2em);opacity:.5}100%{transform:translateY(0);opacity:1}}@media screen and (min-width:320px) and (max-width:640px){.app__header{font-size:80%;margin:0 2em}.nav{max-width:70%;margin:2.5em auto 0;line-height:2.5}}