*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}ul li{list-style:none}a{text-decoration:none}

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:'Oswald', sans-serif}body{background:#012;color:#fff}.top-wrap{position:relative;height:100%}.top-wrap .logo{margin:0 auto;text-align:center;overflow:hidden}.top-wrap .logo h1{font-size:6rem;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:uppercase;background:#156}.top-wrap .social{position:absolute;top:50%;right:20px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.top-wrap .social a{font-size:1.25rem;color:#fff;padding:0px 6px}.top-wrap .social a:hover{color:#0ff}section{margin:0 auto;text-align:center;overflow:hidden}section h2{padding-top:15px;font-size:3rem;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:uppercase}#page2{background:#013}#page2{background:#021}.container{position:relative;margin-top:40px;padding-bottom:15px;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;float:right;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.container .box{margin:10px;width:350px;height:450px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.1);box-shadow:0 10px 20px rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);overflow:hidden;cursor:pointer}.container .box .content{position:relative;width:100%;height:100%}.container .box .content .img{position:relative;width:100%;height:100%;background:url(../img/hargluk.jpg) no-repeat center center/cover;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}#page1 .container .box:nth-child(1) .content .img{background:url(../images/1.jpg) no-repeat center center/cover}#page1 .container .box:nth-child(2) .content .img{background:url(../images/2.jpg) no-repeat center center/cover}#page1 .container .box:nth-child(3) .content .img{background:url(../images/3.jpg) no-repeat center center/cover}#page1 .container .box:nth-child(4) .content .img{background:url(../images/4.jpg) no-repeat center center/cover}#page2 .container .box:nth-child(1) .content .img{background:url(../images/work.jpg) no-repeat center center/cover}#page2 .container .box:nth-child(2) .content .img{background:url(../images/home.jpg) no-repeat center center/cover}#page2 .container .box:nth-child(3) .content .img{background:url(../images/test.jpg) no-repeat center center/cover}#page2 .container .box:nth-child(4) .content .img{background:url(../images/lenin.jpg) no-repeat center center/cover}#page1 .container .box:hover .content .img::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear, left bottom, left top, from(#012), to(#059));background:-o-linear-gradient(bottom, #012, #059);background:linear-gradient(to top, #012, #059);opacity:0.9;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;z-index:0}#page2 .container .box:hover .content .img::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear, left bottom, left top, from(#031), to(#095));background:-o-linear-gradient(bottom, #031, #095);background:linear-gradient(to top, #031, #095);opacity:0.9;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;z-index:0}#page2 .container .box:hover:nth-child(4) .content .img::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear, left bottom, left top, from(#570000), to(#810000));background:-o-linear-gradient(bottom, #570000, #810000);background:linear-gradient(to top, #570000, #810000);opacity:0.9;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;z-index:0}.container .box:hover .content .img{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);-webkit-filter:opacity(1);filter:opacity(1)}.container .box .content .info{padding:10px;position:absolute;width:100%;height:100%;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;-webkit-transition-delay:0.2s;-o-transition-delay:0.2s;transition-delay:0.2s;-webkit-filter:opacity(0);filter:opacity(0)}.container .box:hover .content .info{-webkit-transform:rotateY(360eg);transform:rotateY(360eg);-webkit-filter:opacity(1);filter:opacity(1)}.container .box .content .info h3{margin-bottom:15px;text-transform:uppercase;color:#fff}.container .box .content .info ul{margin-left:25px}.container .box .content .info ul li{padding:10px 20px;list-style:decimal-leading-zero;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.container .box .content .info p{line-height:16px}.container .box .content .info p q{position:relative;font-weight:400}.box .content a{position:relative;margin:20px 00;padding:10px 20px;text-decoration:none;border:2px solid #fff;color:#fff;font-weight:600;letter-spacing:2px;text-transform:uppercase;display:inline-block;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;-webkit-transform:translateY(-40px);-ms-transform:translateY(-40px);transform:translateY(-40px);opacity:0;visibility:hidden}.box:hover .content a{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;visibility:visible}.box .content a:hover{background:#fff;color:#012}.top-wrap .logo h1 letter{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-animation:jello 1s linear 2;animation:jello 1s linear 2;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}section h2 letter{-webkit-animation:rubberBand 1s linear 1;animation:rubberBand 1s linear 1;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.top-wrap .logo h1 letter,section h2 letter{position:relative;display:inline-block;cursor:pointer}.top-wrap .logo h1 letter.active{-webkit-animation:rubberBand 1s linear forwards;animation:rubberBand 1s linear forwards;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}section h2 letter.active{-webkit-animation:jello 1s linear forwards;animation:jello 1s linear forwards;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}@-webkit-keyframes smoke{0%{opacity:1;-webkit-filter:blur(0);filter:blur(0);-webkit-transform:translateX(0) translateY(0) rotate(0deg) scale(1);transform:translateX(0) translateY(0) rotate(0deg) scale(1)}50%{opacity:1;pointer-events:none}100%{opacity:0;-webkit-filter:blur(20px);filter:blur(20px);-webkit-transform:translateX(100px) translateY(0) rotate(720deg) scale(3);transform:translateX(100px) translateY(0) rotate(720deg) scale(3);color:#333}}@keyframes smoke{0%{opacity:1;-webkit-filter:blur(0);filter:blur(0);-webkit-transform:translateX(0) translateY(0) rotate(0deg) scale(1);transform:translateX(0) translateY(0) rotate(0deg) scale(1)}50%{opacity:1;pointer-events:none}100%{opacity:0;-webkit-filter:blur(20px);filter:blur(20px);-webkit-transform:translateX(100px) translateY(0) rotate(720deg) scale(3);transform:translateX(100px) translateY(0) rotate(720deg) scale(3);color:#333}}@-webkit-keyframes rubberBand{from{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes rubberBand{from{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@-webkit-keyframes jello{from,11.1%,to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{-webkit-transform:skewX(0.39063deg) skewY(0.39063deg);transform:skewX(0.39063deg) skewY(0.39063deg)}88.8%{-webkit-transform:skewX(-0.19531deg) skewY(-0.19531deg);transform:skewX(-0.19531deg) skewY(-0.19531deg)}}@keyframes jello{from,11.1%,to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{-webkit-transform:skewX(0.39063deg) skewY(0.39063deg);transform:skewX(0.39063deg) skewY(0.39063deg)}88.8%{-webkit-transform:skewX(-0.19531deg) skewY(-0.19531deg);transform:skewX(-0.19531deg) skewY(-0.19531deg)}}@media only screen and (max-width: 999px){.top-wrap .logo h1{font-size:4rem}section h2{font-size:2rem}.container{position:relative;margin-top:25px}.container .box .content .info h3{margin-bottom:10px}.container .box .content .info p{line-height:16px}}@media only screen and (max-width: 660px){.top-wrap .logo{text-align:left}.top-wrap .logo h1{font-size:3rem;padding-left:20px}}@media only screen and (max-width: 500px){.top-wrap .logo h1{font-size:2rem;padding-left:10px}.top-wrap .social{right:10px}.top-wrap .social a{padding:0 5px}section h2{font-size:1.25rem}.container{position:relative;margin-top:10px}.container .box .content .info h3{margin-bottom:5px}.top-wrap .logo h1 letter.active{-webkit-animation:smoke 1s linear forwards;animation:smoke 1s linear forwards}section h2 letter.active{-webkit-animation:smoke 1s linear forwards;animation:smoke 1s linear forwards}}