html{scroll-behavior:smooth}*{padding:0;margin:0}body{background:#1b1718;font-family:"Raleway", Arial, Helvetica, sans-serif;color:#fbfaf8}main{position:relative}a{text-decoration:none;color:#fbfaf8}button:focus,a:focus,input:focus,textarea:focus{outline:none}header{height:30vh;width:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#231f20}header .background-logo{position:absolute;width:100%;height:100%;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}header .background-logo .happect-logo{width:650px;height:240px;opacity:0.3}header .happect-text-logo{z-index:10}header h1{text-align:center;z-index:10;text-transform:uppercase;font-size:50px;font-weight:200;letter-spacing:0.5em;text-indent:0.5em}main{background:#1b1718;min-height:70vh;width:100%}main h2{text-align:center;font-weight:200;padding:50px 0}main .projects-grid{width:70%;margin-left:15%;display:-ms-grid;display:grid;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;-ms-flex-line-pack:center;align-content:center;justify-items:center;row-gap:30px;-webkit-transition:all 230ms ease;transition:all 230ms ease}main .projects-grid .project{position:relative;width:375px;height:375px;border-radius:30px;background:#c4c4c4;background-position:center center;background-size:cover;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:all 230ms ease;transition:all 230ms ease;overflow:hidden}main .projects-grid .project .project-action{position:absolute;bottom:0;left:0;width:100%;height:30px;background:#404040;-webkit-transition:all 230ms ease;transition:all 230ms ease;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}main .projects-grid .project .project-action:before{content:"Hover me";font-size:1em;color:White;text-align:center;width:100%;opacity:0.5}main .projects-grid .project .project-title{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:all 230ms ease;transition:all 230ms ease}main .projects-grid .project .project-info{position:absolute;opacity:0;-webkit-transition:all 230ms ease;transition:all 230ms ease}main .projects-grid .project .project-info .description{-webkit-transition:all 230ms ease;transition:all 230ms ease;-webkit-transform:scale(1.2);transform:scale(1.2)}main .projects-grid .project:hover .project-action{opacity:0;height:0;-webkit-transition:all 230ms ease;transition:all 230ms ease}main .projects-grid .project:hover .project-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;opacity:1;-webkit-transition:all 230ms ease;transition:all 230ms ease;background:rgba(0,0,0,0.5);cursor:pointer}main .projects-grid .project:hover .project-info .description{-webkit-transform:scale(1);transform:scale(1)}main .projects-grid .project:hover .project-title{-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0;-webkit-transition:all 230ms ease;transition:all 230ms ease}.happect-footer{background:#1b1718;margin-top:10vh;width:100%}.happect-footer .happect-logo-area{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}.happect-footer .copyright{text-align:center;padding:30px;opacity:0.75}.home-link{z-index:99;position:fixed;padding:5px;background:rgba(255,255,255,0.5);color:#231F20;width:auto;top:20px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:all 230ms cubic-bezier(0.68, -0.6, 0.32, 1.6);transition:all 230ms cubic-bezier(0.68, -0.6, 0.32, 1.6);-webkit-animation:home-link-animation 2s cubic-bezier(0.25, 1, 0.5, 1);animation:home-link-animation 2s cubic-bezier(0.25, 1, 0.5, 1)}.home-link:hover{background:#fff;-webkit-transition:all 230ms cubic-bezier(0.68, -0.6, 0.32, 1.6);transition:all 230ms cubic-bezier(0.68, -0.6, 0.32, 1.6)}.language-switcher-wrapper{position:fixed;left:50px;bottom:50px}.language-switcher-wrapper h2{font-weight:300}.language-switcher-wrapper .chosen-language{padding-top:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.language-switcher-wrapper .chosen-language:before{content:'';width:100%;height:1px;position:absolute;background:#FBFAF8;bottom:-7px;opacity:0;-webkit-transition-duration:230ms;transition-duration:230ms;-webkit-transition-timing-function:cubic-bezier(0.68, -0.6, 0.32, 1.6);transition-timing-function:cubic-bezier(0.68, -0.6, 0.32, 1.6)}.language-switcher-wrapper .chosen-language:hover:before,.language-switcher-wrapper .chosen-language:focus:before{content:'';width:100%;height:1px;background:#FBFAF8;bottom:-3px;opacity:1;-webkit-transition-duration:230ms;transition-duration:230ms;-webkit-transition-timing-function:cubic-bezier(0.68, -0.6, 0.32, 1.6);transition-timing-function:cubic-bezier(0.68, -0.6, 0.32, 1.6)}.language-switcher-wrapper .language-list-hidden{display:none;opacity:0;-webkit-transition:all 230ms ease;transition:all 230ms ease;-webkit-animation:slide-in-blurred-bottom-small 230ms ease;animation:slide-in-blurred-bottom-small 230ms ease}.language-switcher-wrapper .language-list-hidden h2{padding:10px 0}.language-switcher-wrapper .language-list-shown{display:block;-webkit-transition:all 230ms ease;transition:all 230ms ease;-webkit-animation:slide-in-blurred-bottom-small 230ms ease;animation:slide-in-blurred-bottom-small 230ms ease}.language-switcher-wrapper .language-list-shown h2{padding:10px 0}.language-switcher-wrapper .language-list-hidden h2,.language-switcher-wrapper .language-list-shown h2{font-size:20px;opacity:0.7;-webkit-transition:all 230ms ease;transition:all 230ms ease}.language-switcher-wrapper .language-list-hidden h2:hover,.language-switcher-wrapper .language-list-shown h2:hover{opacity:1}.contact-button-wrapper{position:fixed;right:50px;bottom:50px;width:70px;height:70px;cursor:pointer;background:#364d7d;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50%}.contact-button-wrapper svg{width:35px;height:35px;-webkit-transition:all 230ms;transition:all 230ms;-webkit-animation:slide-in-blurred-bottom-small 230ms ease;animation:slide-in-blurred-bottom-small 230ms ease}.contact-button-wrapper svg:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.contact-button-wrapper .close-form{display:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:36px;-webkit-transition:all 230ms;transition:all 230ms;-webkit-animation:slide-in-blurred-top-small 230ms ease;animation:slide-in-blurred-top-small 230ms ease}.contacts .contact-form-wrapper-hide{opacity:0;display:none;-webkit-transform:translateY(-10px);transform:translateY(-10px);position:fixed;right:50px;bottom:150px;padding:15px;height:70vh;width:500px;background:#231f20;border:2px double #fbfaf8;border-radius:10px 0 0 10px;font-family:"Open sans", Arial, Helvetica, sans-serif;-webkit-transition:all 230ms;transition:all 230ms}.contacts .contact-form-wrapper-hide form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.contacts .contact-form-wrapper-show{-webkit-animation:puff-in-center 230ms ease;animation:puff-in-center 230ms ease;position:fixed;opacity:1;display:block;right:50px;bottom:150px;padding:15px;height:70vh;width:500px;background:#231f20;border:2px double #fbfaf8;border-radius:10px 0 0 10px;font-family:"Open sans", Arial, Helvetica, sans-serif;-webkit-transition:all 230ms;transition:all 230ms}.contacts .contact-form-wrapper-show form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.contacts .contact-form-info{margin-bottom:30px}.contacts .contact-form input{background:none;border:none;border-bottom:3px solid #63575a;padding:10px 0;color:#fbfaf8;-webkit-transition:all 230ms ease;transition:all 230ms ease;font-size:20px}.contacts .contact-form input:focus,.contacts .contact-form textarea:focus{border-bottom:3px solid #c7bbbe}.contacts .contact-form .input-wrapper{position:relative}.contacts .contact-form .contact-float{position:absolute;pointer-events:none;left:0;top:15px;-webkit-transition:0.2s ease all;transition:0.2s ease all}.contacts .contact-form #contact-name:focus ~ .contact-name-float,.contacts .contact-form #contact-name:not(:focus):valid ~ .contact-name-float{top:-10px;font-size:14px;opacity:0.6}.contacts .contact-form .answer-question{margin:20px 0}.contacts .contact-form .where-to-answer{padding:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.contacts .contact-form .where-to-answer input{display:none;opacity:0;cursor:pointer;z-index:99}.contacts .contact-form .where-to-answer svg{width:30px;height:30px;-webkit-transition:all 230ms ease;transition:all 230ms ease;cursor:pointer}.contacts .contact-form .where-to-answer input:checked ~ .radio-mark svg{width:35px;height:35px;padding-bottom:5px;border-bottom:1px solid #fbfaf8;-webkit-transform:translateY(-5px);transform:translateY(-5px);-webkit-transition:all 230ms ease;transition:all 230ms ease}.contacts .contact-form #client-telegram,.contacts .contact-form #client-viber{display:none}.contacts .contact-form #client-telegram::-webkit-input-placeholder,.contacts .contact-form #client-viber::-webkit-input-placeholder{font-size:16px;opacity:0.8;color:#fbfaf8}.contacts .contact-form #client-telegram:-ms-input-placeholder,.contacts .contact-form #client-viber:-ms-input-placeholder{font-size:16px;opacity:0.8;color:#fbfaf8}.contacts .contact-form #client-telegram::-ms-input-placeholder,.contacts .contact-form #client-viber::-ms-input-placeholder{font-size:16px;opacity:0.8;color:#fbfaf8}.contacts .contact-form #client-telegram::placeholder,.contacts .contact-form #client-viber::placeholder{font-size:16px;opacity:0.8;color:#fbfaf8}.contacts .contact-form #client-email::-webkit-input-placeholder{font-size:16px;opacity:0.8;color:#fbfaf8}.contacts .contact-form #client-email:-ms-input-placeholder{font-size:16px;opacity:0.8;color:#fbfaf8}.contacts .contact-form #client-email::-ms-input-placeholder{font-size:16px;opacity:0.8;color:#fbfaf8}.contacts .contact-form #client-email::placeholder{font-size:16px;opacity:0.8;color:#fbfaf8}.contacts .contact-form #contact-message{margin-top:50px;background:none;border:none;border-bottom:3px solid #63575a;padding:10px 0;color:#fbfaf8;font-size:20px;width:100%;resize:vertical;height:100px;max-height:200px;min-height:50px;line-height:1.01em;letter-spacing:0.04em;-webkit-transition:all 230ms ease;transition:all 230ms ease}.contacts .contact-form #contact-message:focus{border-bottom:3px solid #c7bbbe}.contacts .contact-form #contact-submit{margin-top:10px;position:absolute;bottom:10px;width:calc(100% - 30px);cursor:pointer;padding:5px;border-top:1px solid #63575a;border-bottom:1px solid #63575a;-webkit-transition:all 230ms ease;transition:all 230ms ease}.contacts .contact-form #contact-submit:focus,.contacts .contact-form #contact-submit:hover{border-bottom:3px solid #c7bbbe;border-top:3px solid #c7bbbe}@media screen and (max-width: 1440px) and (min-width: 1024px){main .projects-grid{width:80%;margin-left:10%}main .projects-grid .project{width:250px;height:250px;border-radius:15px}.contacts .contact-form-info{font-size:12px;margin-bottom:10px}.contacts .contact-form-wrapper-hide{max-height:60vh;width:400px}.contacts .contact-form-wrapper-show{max-height:60vh;width:400px}.contacts .contact-form .contact-float{top:5px;font-size:16px}.contacts .contact-form .answer-question{font-size:12px}.contacts .contact-form .where-to-answer label svg{width:20px}.contacts .contact-form .where-to-answer input:checked ~ .radio-mark svg{width:25px}.contacts .contact-form input{font-size:16px;padding:5px 0}.contacts .contact-form #contact-message{margin-top:10px;max-height:120px}}@media screen and (max-width: 1023px) and (min-width: 768px){header .happect-text-logo{width:600px}main .projects-grid{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;width:80%;margin-left:10%}main .projects-grid .project{width:250px;height:250px;border-radius:15px}main .projects-grid .project .project-action:before{content:'Click/Hover me'}.contacts .contact-form-info{font-size:12px;margin-bottom:10px}.contacts .contact-form-wrapper-hide{max-height:70vh;width:400px}.contacts .contact-form-wrapper-show{max-height:70vh;width:400px}.contacts .contact-form .contact-float{top:5px;font-size:16px}.contacts .contact-form .answer-question{font-size:12px}.contacts .contact-form .where-to-answer label svg{width:20px}.contacts .contact-form .where-to-answer input:checked ~ .radio-mark svg{width:25px}.contacts .contact-form input{font-size:16px;padding:5px 0}.contacts .contact-form #contact-message{margin-top:10px;max-height:120px}}@media screen and (max-width: 767px){header .happect-text-logo{width:200px}header .background-logo{width:50%;height:50%}header h1{font-size:20px}main h2{font-size:16px;max-width:80%;margin:0 auto}main .projects-grid{-ms-grid-columns:1fr;grid-template-columns:1fr;width:80%;margin-left:10%}main .projects-grid .project{width:250px;height:250px;border-radius:15px}main .projects-grid .project .project-action:before{content:'Click me'}.contact-button-wrapper{z-index:999}.contacts .contact-form-info{font-size:16px}.contacts .contact-form-wrapper-hide{z-index:998;height:100vh;width:100vw;left:0;border:none;border-radius:0;right:0;bottom:0;padding:5px}.contacts .contact-form-wrapper-show{z-index:998;height:100vh;border-radius:0;width:100vw;left:0;border:none;right:0;padding:5px;bottom:0}.contacts .contact-form .answer-question{font-size:16px}.contacts .contact-form #contact-message{margin-top:20px;max-height:150px}}@media screen and (max-height: 800px) and (min-width: 768px){.contacts .contact-form-info{font-size:12px;margin-bottom:10px}.contacts .contact-form-wrapper-hide{max-height:80vh;width:400px;bottom:30px}.contacts .contact-form-wrapper-show{max-height:80vh;width:400px;bottom:30px}.contacts .contact-form .contact-float{top:5px;font-size:16px}.contacts .contact-form .answer-question{font-size:12px}.contacts .contact-form .where-to-answer label svg{width:20px}.contacts .contact-form .where-to-answer input:checked ~ .radio-mark svg{width:25px}.contacts .contact-form input{font-size:16px;padding:5px 0}.contacts .contact-form #contact-message{margin-top:10px;max-height:120px}}@-webkit-keyframes puff-in-center{0%{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0px);filter:blur(0px);opacity:1}}@keyframes puff-in-center{0%{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0px);filter:blur(0px);opacity:1}}@-webkit-keyframes home-link-animation{0%{left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);font-size:70px;padding:10px;opacity:0;background:#fff}75%{background:#fff}100%{padding:5px;background:rgba(255,255,255,0.5);color:#231F20;width:auto;top:20px;left:50%}}@keyframes home-link-animation{0%{left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);font-size:70px;padding:10px;opacity:0;background:#fff}75%{background:#fff}100%{padding:5px;background:rgba(255,255,255,0.5);color:#231F20;width:auto;top:20px;left:50%}}
/*# sourceMappingURL=portfolio.css.map */