@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,700");@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:300,400");@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}body{background:#4c4c4c;background:radial-gradient(ellipse at center,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c",endColorstr="#131313",GradientType=1);font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#666}#wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;height:100vh;margin-left:50px}@media (max-width:37.5em){#wrapper{margin-left:0}}#wrapper main{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;margin-top:80px}footer{position:fixed;bottom:10px;width:10%;right:100px;height:200px}@media (max-width:37.5em){footer{width:44%;right:0}}footer span img{height:200px}#intro{position:absolute;top:32%;font-family:Playfair Display,serif;margin:0 50% 0 auto;width:100%}@media (max-width:37.5em){#intro{top:15%;margin:0}}@media (min-width:37.5em){#intro{top:29%}}#intro a:active,#intro a:link{color:#fff}#intro a:hover,#intro a:visited{color:#00b159}#intro .intro-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 auto}@media (max-width:37.5em){#intro .intro-wrap{max-width:37.5em;margin-right:20px}}@media (min-width:37.5em){#intro .intro-wrap{max-width:48em}}@media (min-width:50em){#intro .intro-wrap{max-width:1200px}}#intro .intro-wrap .intro-wrap__item{-webkit-box-flex:1;-ms-flex:1 1 29em;flex:1 1 29em}@media (min-width:37.5em){#intro .intro-wrap .intro-wrap__item{max-width:22em}}#intro .intro-wrap .intro-wrap__item span{padding-top:0;font-size:3em}#intro .intro-wrap .intro-wrap__item p{font-family:Lato,sans-serif;font-weight:300;font-size:1.1em}#intro .intro-wrap .left{text-align:right;color:hsla(0,0%,100%,.5);border-right:3px solid #00b159;padding-right:10px}#intro .intro-wrap .right{color:hsla(0,0%,100%,.7);padding-left:10px}header{position:fixed;top:0;margin-left:50px;margin-right:auto;width:100%;height:60px;z-index:2}@media (max-width:37.5em){header{margin:0 auto}}header .search{position:relative;width:300px;margin-top:25px}header .search .btn-search{position:absolute;right:-50px;top:2px;z-index:20;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;width:30px;height:39px;color:#777;padding:0;margin:0}header .search .btn-search img,header .search .btn-search svg{width:20px;height:20px}header .search .btn-search img path,header .search .btn-search svg path{fill:currentColor}header input[placeholder]{background-color:hsla(0,0%,72%,.2);color:#b7b7b7}header input[placeholder]:focus{background-color:rgba(0,0,0,.1)}header input::-webkit-input-placeholder{color:#b7b7b7}header input:-ms-input-placeholder{color:#b7b7b7}header input::placeholder{color:#b7b7b7}header .input-search{height:32px;padding:3px 40px 3px 20px;border-radius:2px;box-shadow:none;border:1px solid #b7b7b7;width:100%;font-size:24px;font-family:Lato,sans-serif;font-weight:300}header .input-search:focus{outline:none;color:#fff;border-color:hsla(0,0%,100%,.8)}header .input-search:focus+.btn-search{color:hsla(0,0%,100%,.8)}header .search-error__span{left:430px;font-size:1.5em;top:30px;color:red;position:absolute}aside{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:18.7em;-ms-flex-item-align:end;align-self:flex-end;font-family:Lato,sans-serif;font-weight:400;z-index:10}@media (max-width:37.5em){aside{position:fixed;top:0;bottom:0;right:10px;width:100vw;background-color:rgba(0,0,0,.8)}}@media (min-width:37.5em){aside{position:fixed;top:0;bottom:0;right:0;width:100vw;background-color:rgba(0,0,0,.8)}}@media (min-width:50em){aside{background-color:rgba(0,0,0,.3)}}aside .aside-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-right:40px;margin-top:30px;padding-right:15px;border-right:3px solid #00b159;color:hsla(0,0%,100%,.8);line-height:180%}aside .aside-wrap span{font-size:1.1em}aside .aside-wrap span .aside-wrap__span{color:hsla(0,0%,100%,.6)}aside .aside-wrap .close-button{-ms-flex-item-align:start;align-self:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;width:25px;height:25px;padding:10px;-ms-flex-line-pack:center;align-content:center;border-radius:50%;margin-left:10px}aside .aside-wrap .close-button img{width:25px}aside .aside-wrap .close-button :hover{background-color:#d11141}aside span.close-button img{width:25px;z-index:11}.cards{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;max-width:980px}@media (max-width:1310px){.cards{max-width:620px}}.card:nth-of-type(6){visibility:hidden}@media (max-width:1350px){.card:nth-of-type(6){visibility:visible}}.card:first-of-type .card-title{background-color:#d11141}.card:nth-of-type(2) .card-title{background-color:#00b159}.card:nth-of-type(3) .card-title{background-color:#00aedb}.card:nth-of-type(4) .card-title{background-color:#f37735}.card:nth-of-type(5) .card-title{background-color:#666547}@media (max-width:1350px){.card:nth-of-type(7){visibility:hidden}}.card:nth-of-type(7) .card-title{background-color:#03396c}.card{position:relative;width:290px;margin-bottom:15px;margin-right:15px;padding-bottom:30px;background:#fefff9;color:#363636;text-decoration:none;box-shadow:0 0 8px 0 rgba(0,0,0,.9);border-radius:4px}.card span{display:block}.card .card-summary{padding:5% 5% 3%;font-family:Lato,sans-serif;color:#9bc90d;font-size:1.5em}.card .card-summary span{font-family:Lato,sans-serif;font-weight:700;color:rgba(0,0,0,.6)}.card .card-header{position:relative;height:175px;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:50%;background-color:hsla(0,0%,100%,.15);background-blend-mode:overlay;border-radius:4px 4px 0 0}.card .card-header:focus,.card .card-header:hover{background-color:hsla(0,0%,100%,.2)}.card .card-genre{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}.card .card-genre span{font-size:10px;font-weight:700;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:100px;display:block;background:linear-gradient(#9bc90d,#9bc90d);box-shadow:0 3px 10px -5px #000;position:absolute;top:19px;right:-21px}.card .card-genre span :after,.card .card-genre span :before{border-bottom:3px solid transparent;border-left-style:solid;border-left-width:3px;border-right-style:solid;border-right-width:3px;border-top:3px solid #79a70a;content:"";position:absolute;top:100%;z-index:-1}.card .card-title{background-color:rgba(218,165,32,.9);padding:3.5% 0 2.5%;color:#fff;font-family:Roboto Slab,serif;text-transform:uppercase;position:absolute;bottom:0;width:100%}.card .card-title h3{font-size:1.1em;font-weight:400;line-height:1.2;padding:0 3.5%;margin:0}.card .card-meta{max-height:0;overflow:hidden;color:#777;font-size:.78em;text-transform:uppercase;position:absolute;bottom:3%;padding:0 5%;right:0}.card .card-meta img{height:35px}.card:focus,.card:hover{background:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,.45)}.card:focus .card-title,.card:hover .card-title{background:rgba(157,187,63,.95)}.card:focus .card-meta,.card:hover .card-meta{max-height:3em}.fade-enter-active{-webkit-animation:slide-in .3s ease-out forwards;animation:slide-in .3s ease-out forwards}.fade-leave-active{-webkit-animation:slide-out .3s ease-out forwards;animation:slide-out .3s ease-out forwards}@-webkit-keyframes slide-in{0%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in{0%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes slide-out{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}@keyframes slide-out{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}