.item-overlay,.portfolio{-webkit-box-direction:normal}.button,.float-down-arrow a,.float-logo a,.overlay ul li a,.pagination a{text-decoration:none}body{background-color:#fafafa;margin:0;font-family:Roboto}header{text-align:center;padding:3rem 2rem 6rem;color:#222}header h1{font-size:5rem}header h2{font-size:2rem;font-weight:400}.portfolio{display:-webkit-box;display:-ms-flexbox;display:flex;display:-webkit-flex;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;-webkit-flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-justify-content:center;width:100%;margin:0 auto;background-color:#717171}.container,article{margin-right:auto;margin-left:auto}.portfolio .item{background-image:url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052);background-size:cover;background-position:center center;min-height:300px;width:50%;cursor:pointer}.item-overlay{opacity:0;background:rgba(0,0,0,.6);display:-webkit-box;display:-ms-flexbox;display:flex;display:-webkit-flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-items:center;width:100%;min-height:300px;text-align:center;color:#fafafa;-webkit-transition:opacity .25s;transition:opacity .25s}.item-overlay-content{padding:1rem}.pagination,footer{padding-top:2rem;text-align:center}.item:focus .item-overlay,.item:hover .item-overlay{opacity:100}.button{line-height:2.5rem;border:2px solid #fafafa;padding-left:2rem;padding-right:2rem;height:2.5rem;display:inline-block;color:#fafafa;font-weight:300;margin-top:1rem;-webkit-transition:background-color .25s,color .25s;transition:background-color .25s,color .25s}.container,.float-logo,.page-number{padding-left:1rem;padding-right:1rem}.button:hover{background-color:#fafafa;color:#222}.pagination{padding-bottom:2rem;background-color:#383838;color:#fafafa}.float-logo,footer{background-color:#222}.pagination a{color:#27ae60}footer{color:#b4b4b4;padding-bottom:3rem}footer .copyright{margin-top:2rem}.header-image{height:100vh;text-align:center;color:#fafafa;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-shadow:0 10px 40px -10px rgba(0,0,0,.5)}.header-image h1{font-size:5rem}.header-image h2{font-size:1.5rem;font-weight:300}article{max-width:1000px;padding:1rem}article img{width:100%;margin-top:3rem;margin-bottom:3rem;box-shadow:-10px 10px 40px -10px rgba(0,0,0,.5)}article p{line-height:1.5rem}.container{max-width:1000px}.float-logo{font-size:2.15rem;font-weight:700;position:fixed;color:#fafafa;padding-top:calc(.5rem + 3px);padding-bottom:.5rem;top:2rem;left:2rem}.float-logo a{color:#fafafa}.float-down-arrow{position:fixed;bottom:2rem;left:50%;margin-left:calc(-1rem + -2.5px);width:calc(2rem + 5px);height:2rem;background-color:#fafafa;text-align:center;line-height:2rem;padding-top:5px;border-radius:50%}.float-down-arrow a{color:#222}.button_container{position:fixed;top:2rem;right:2rem;background-color:#222;padding:1rem;height:27px;width:35px;cursor:pointer;z-index:9999;-webkit-transition:opacity .25s ease,background-color .25s ease;transition:opacity .25s ease,background-color .25s ease}.button_container:hover{opacity:.7}.button_container.active{background:0 0}.button_container.active .top{-webkit-transform:translateY(11px) translateX(0) rotate(45deg);transform:translateY(11px) translateX(0) rotate(45deg);background:#FFF}.button_container.active .middle{opacity:0;background:#FFF}.button_container.active .bottom{-webkit-transform:translateY(-11px) translateX(0) rotate(-45deg);transform:translateY(-11px) translateX(0) rotate(-45deg);background:#FFF}.button_container span{background:#fafafa;border:none;height:5px;width:35px;position:absolute;top:1rem;left:1rem;-webkit-transition:all .35s ease;transition:all .35s ease;cursor:pointer}.overlay,.overlay ul li a:active:after,.overlay ul li a:focus:after,.overlay ul li a:hover:after{width:100%}.button_container span:nth-of-type(2){top:calc(1rem + 11px)}.button_container span:nth-of-type(3){top:calc(1rem + 22px)}.overlay{position:fixed;background:#222;top:0;left:0;height:0%;opacity:0;visibility:hidden;-webkit-transition:opacity .35s,visibility .35s,height .35s;transition:opacity .35s,visibility .35s,height .35s;overflow:hidden;z-index:9998}.overlay.open{opacity:.95;visibility:visible;height:100%}.overlay.open li{-webkit-animation:fadeInRight .5s ease forwards;animation:fadeInRight .5s ease forwards;-webkit-animation-delay:.35s;animation-delay:.35s}.overlay.open li:nth-of-type(2){-webkit-animation-delay:.4s;animation-delay:.4s}.overlay.open li:nth-of-type(3){-webkit-animation-delay:.45s;animation-delay:.45s}.overlay.open li:nth-of-type(4){-webkit-animation-delay:.5s;animation-delay:.5s}.overlay nav{position:relative;height:70%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:50px;font-weight:400;text-align:center}.overlay ul{list-style:none;padding:0;margin:0 auto;display:inline-block;position:relative;height:100%}.overlay ul li,.overlay ul li a{display:block;position:relative}.overlay ul li{height:25%;height:calc(100% / 4);min-height:50px;opacity:0}.overlay ul li a{color:#FFF;overflow:hidden}.overlay ul li a:after{content:'';position:absolute;bottom:0;left:50%;width:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);height:4px;background:#FFF;-webkit-transition:.35s;transition:.35s}@-webkit-keyframes fadeInRight{0%{opacity:0;left:20%}100%{opacity:1;left:0}}@keyframes fadeInRight{0%{opacity:0;left:20%}100%{opacity:1;left:0}}@media only screen and (max-width:40em){.portfolio .item{width:100%}header h1{font-size:4rem}header h2{font-size:2rem}.header-image h1{font-size:3rem}.header-inage h2{font-size:1rem}}.float-down-arrow{font-family:sans-serif;}