/*
@font-face {
    font-family: 'blblack';
    src: url('../fonts/proximanova-black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rgbold';
    src: url('../fonts/proximanova-bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ltlight';
    src: url('../fonts/proximanova-light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rgregular';
    src: url('../fonts/proximanova-reg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'thextrabold';
    src: url('../fonts/proximanova-xbold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "nastaliq";
  src: url(IranNastaliq.ttf) format("truetype");
}
*/
/* base style */
html {
    overflow: visible !important;
}
/*
* { font-family: "nastaliq", 'nastaliq', nastaliq; }
*/
/*html.mobile {*/
    /*overflow-x: hidden !important;*/
/*}*/
body {
    background: #fff;
    margin: 0;
    padding: 0;
    font-family: 'ltlight';
    color: #272727;
    position: relative;
    overflow: hidden;
    transition: all .3s;
}
body.load-animation {
    transform: scale(.9);
}
.loader.hide .percentage, .loader.hide .loader-img {
    opacity: 0;
    transition: opacity .1s;
}
.loader .loader-img {
    color: #f2f2f2;
    margin-top: 40vh;
    text-align: center;
    opacity: 1;
}
.loader .percentage {
    font-size: 72px;
    font-family: 'blblack';
    color: #ccc;
    margin-top: 0;
    position: absolute;
    right: 50px;
    bottom: 20px;
    opacity: 1;
}
.loader {
    text-align: center;
    background: #ffffff;
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    opacity: 1;
    visibility: visible;
}
.loader.hide {
    opacity: 0;
    visibility: hidden;
    transition: all .6s .3s;
}
header, .header-page {
    padding: 50px;
    position: fixed;
    z-index: 5;
    width: calc(100% - 100px);
}
.logo {
    position: absolute;
    z-index: 5;
}
.logo-a {
    padding: 5px 10px;
    margin-left: -10px;
    margin-top: -5px;
    width: 18px;
    display: inline-block;
}
.logo-a:hover {
    animation-name: elastic;
    animation-duration: .7s;
}
.logo-a:active {
    transform: scale(0.9);
    transition: all .2s;
}
.logo .t {
    fill: #d52b1e;
    fill-rule: evenodd;
}
.page-name, .prev-name, .menu-name {
    display: inline-block;
    font-size: 20px;
    font-family: 'thextrabold';
    vertical-align: top;
    margin-top: 5px;
}
.page-name {
    position: absolute;
    z-index: 3;
    margin-top: 55px;
    margin-left: 120px;
    opacity: 0;
    transition: all .1s;
}
.menu.open .page-name {
    opacity: 1;
    margin-left: 80px;
    transition: margin-left .3s .3s, opacity .3s .3s;
}
.page-open .menu .page-name, .main-page-open .menu .page-name {
    margin-left: 50px;
    opacity: 0;
    transition: margin-left .2s .15s, opacity .1s .15s;
}
.page-open .page-name, .main-page-open .page-name {
    opacity: 1;
    margin-left: 80px;
    transition: margin-left .3s .8s, opacity .3s .8s;
}
.works-item.done .page-name {
    opacity: 1;
    left: 0;
    margin-left: 80px;
    transition: margin-left .3s .8s, opacity .3s .8s;
    position: fixed;
    top: 0;
}
.wow-portfolio-ajax-block.done .page-name {
    opacity: 1;
    left: 0;
    margin-left: 80px;
    transition: margin-left .3s .8s, opacity .3s .8s;
    position: fixed;
    top: 0;
}


/* menu icon styles */
body.page-open .menu-icon-wrapper, body.main-page-open .menu-icon-wrapper {
    opacity: 0;
    /*transition: opacity .3s .3s;*/
}
.hamburger {
    position: absolute;
    right: 50px;
    cursor: pointer;
    z-index: 5;
}
.prev-name {
    position: absolute;
    display: inline-block;
    font-size: 20px;
    vertical-align: top;
    right: 0;
    z-index: 3;
    padding: 5px 40px 5px 0;
    margin-top: 50px;
    margin-right: 45px;
    opacity: 0;
}
.open .prev-name {
    opacity: 1;
    margin-right: 55px;
    transition: all .3s;
}
.page-open .prev-name, .main-page-open .prev-name {
    opacity: 0;
    margin-right: 95px;
    transition: all .3s;
}
.open .prev-name.on {
    color: #d52b1e;
    margin-right: 60px;
}
.hamburger:hover .menu-name {
    color: #d52b1e;
    margin-right: 20px;
    transition: all .2s;
}
.hamburger.open .menu-name {
    opacity: 0;
    visibility: hidden;
    margin-right: 70px;
    transition: all .2s;
}
.menu:before:hover {
    color: #d52b1e;
    transition: all .2s;
    margin-right: 105px;
}
.hamburger .menu-name {
    transition: all .2s;
}
.menu-name {
    color: #272727;
    margin-right: 15px;
}
.menu-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    pointer-events: none;
    /*transition: 0.1s;*/
    transition: opacity .3s .1s;
}

.menu-icon-wrapper.scaled {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

.menu-icon-wrapper svg {
    position: absolute;
    top: -33px;
    left: -33px;
    -webkit-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

.menu-icon-wrapper svg path {
    stroke: #d52b1e;
    stroke-width: 20px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: transparent;
}
.hamburger #pathB {
    opacity: 1;
}
.hamburger.open #pathB {
    opacity: 0;
    transition: opacity .2s .1s;
}
.hamburger-arrow {
    position: absolute;
    right: 70px;
    cursor: pointer;
    z-index: 6;
    width: 167px;
    padding: 5px 0;
    visibility: hidden;
    margin-top: -2px;
    opacity: 0;
    text-align: right;
    transition: opacity 0s .3s, visibility 0s .6s;
}
.hamburger-arrow svg {
    fill: #d52b1e;
    width: 34px;
    margin-right: -50px;
    opacity: 0;
    transition: margin-right .3s, opacity .3s;
}
.page-open .hamburger-arrow svg, .main-page-open .hamburger-arrow svg {
    opacity: 1;
    margin-right: 0;
    transition: opacity .3s;
}
.hamburger-arrow:before {
    content: 'to menu';
    display: block;
    font-size: 20px;
    font-family: 'thextrabold';
    position: absolute;
    right: 0;
    opacity: 0;
    margin-top: 2px;
}
.page-open .hamburger-arrow.on:active:before, .main-page-open .hamburger-arrow.on:active:before {
    margin-right: 35px;
    opacity: 0;
    transition: opacity .3s, margin-right .3s;
}
.page-open .hamburger-arrow.on:before, .main-page-open .hamburger-arrow.on:before {
    color: #d52b1e;
    margin-right: 5px;
    transition: margin-right .3s, color .3s;
}
.page-open .hamburger-arrow:before, .main-page-open .hamburger-arrow:before {
    opacity: 1;
    margin-left: 0;
    right: 50px;
    transition: opacity .4s .5s, right .4s .5s, color .2s, margin-right .2s;
}
.page-open .hamburger-arrow, .main-page-open .hamburger-arrow {
    opacity: 1;
    right: 50px;
    visibility: visible;
    transition: opacity .45s .4s, right .45s .4s;
}
.page-open .hamburger-arrow:hover svg, .main-page-open .hamburger-arrow:hover svg {
    animation-name: elastic-arrow;
    animation-duration: .6s;
}

/* menu open */
.menu {
    position: absolute;
    transform: translateX(100%);
    transition: all 0.4s;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 3;
}
.menu.open {
    transform: translateX(0%);
}
.menu.open .menu-left {
    transform: translateX(0%);
    transition: all .3s .3s;
}
.menu-left {
    width: 60vw;
    height: 100vh;
    background: #ffffff;
    display: inline-block;
    vertical-align: top;
    position: relative;
    z-index: 2;
    transform: translateX(100%);
    transition: all 0.2s;
}
.menu-right {
    width: 40vw;
    height: 100vh;
    background: #fafafa;
    display: inline-block;
    vertical-align: top;
    position: relative;
    z-index: 2;
    margin-left: -5px;
    transition: all 0.2s;
}
body .main {
    transition: all .2s;
}
body.open .main {
    transform: scale(0.95);
    transition: all .4s;
}
.menu-container {
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    height: 100vh;
}
.menu-list a:after {
    content: attr(data-summ);
    display: block;
    position: absolute;
    color: #c6c6c6;
    font-size: 32px;
    font-family: 'rgbold';
    top: -15px;
    right: -65px;
}

/* menu open */
.menu-list {
    margin: 0 0 0 22%;
    list-style: none;
    padding: 0;
    position: relative;
}
.menu-list li {
    opacity: 0;
    margin-left: 70px;
}
.open .menu-list li:nth-child(1) {
    opacity: 1;
    margin-left: 0;
    transition: all .2s .5s;
}
.open .menu-list li:nth-child(2) {
    opacity: 1;
    margin-left: 0;
    transition: all .2s .6s;
}
.open .menu-list li:nth-child(3) {
    opacity: 1;
    margin-left: 0;
    transition: all .2s .7s;
}
.main-page-open .menu-list li:nth-child(1) {
    opacity: 0;
    margin-left: 20%;
    transition: all .2s .1s;
}
.main-page-open .menu-list li:nth-child(2) {
    opacity: 0;
    margin-left: 20%;
    transition: all .2s .2s;
}
.main-page-open .menu-list li:nth-child(3) {
    opacity: 0;
    margin-left: 20%;
    transition: all .2s .3s;
}
.page-open .menu-list li:nth-child(1) {
    opacity: 0;
    margin-left: -20%;
    transition: all .2s .1s;
}
.page-open .menu-list li:nth-child(2) {
    opacity: 0;
    margin-left: -20%;
    transition: all .2s .2s;
}
.page-open .menu-list li:nth-child(3) {
    opacity: 0;
    margin-left: -20%;
    transition: all .2s .3s;
}
.menu-list li {
    padding: 10px 0;
}
.menu-list li a {
    color: #272727;
    text-decoration: none;
    font-size: 94px;
    font-family: 'blblack';
    text-transform: uppercase;
    position: relative;
}
.menu-small {
    margin: 50px 0 0 22%;
    list-style: none;
    padding: 0;
}
.menu-small li {
    display: inline-block;
    margin-right: 50px;
}
.menu-small li a {
    color: #878787;
}
.menu-list li a {
    transition: all .2s;
    display: inline-block;
}
.menu-list li a:hover {
    opacity: 1;
    transition: all .3s;
    color: #d52b1e;
    margin-left: -5px;
}
.menu-list li a:active {
    transform: scale(0.98);
}
.menu-name:active, .page-name:active {
    transform: scale(0.98);
}
.menu-list li:nth-child(3) {
    /*margin-bottom: 50px;*/
}

/* menu-right */
.menu-right .menu-container {
    margin-left: 22%;
    width: 70%;
    min-width: 360px;
    max-width: 500px;
    opacity: 0;
}
.menu.open .menu-right .menu-container {
    opacity: 1;
    margin-left: 20%;
    transition: opacity .3s .9s, margin-left .3s .9s;
}
.page-open .menu.open .menu-right .menu-container {
    opacity: 0;
    transition: opacity .2s .3s;
}
.main-page-open .menu.open .menu-right .menu-container {
    opacity: 0;
    transition: opacity .2s;
}
.live:hover, .article:hover, .like:hover {
}
.live:active, .article:active, .like:active {
    transform: scale(0.98);
    transition: all .3s;
}
.live, .article, .like {
    margin-bottom: 40px;
    text-decoration: none;
    cursor: pointer;
}
.menu-right .live h2, .menu-right .article h2, .menu-right .like h2 {
    font-family: 'rgbold';
    color: #272727;
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 0;
    text-decoration: none;
    padding: 5px 0 5px 50px;
    margin-left: -50px;
}
.menu-right .live:hover h2, .menu-right .article:hover h2, .menu-right .like:hover h2 {
    color: #d52b1e;
    transition: all .3s;
}
.menu-right .live:hover h2:after, .menu-right .article:hover h2:after, .menu-right .like:hover h2:after {
    /*animation-name: right-left;*/
    /*animation-duration: .35s;*/
    width: 50px;
}
.menu-right .live h2:after, .menu-right .article h2:after, .menu-right .like h2:after {
    content: '';
    display: block;
    position: absolute;
    width: 100px;
    margin-top: 5px;
    height: 2px;
    background: #d52b1e;
    transition: all .2s;
}
.menu-right .live .icon svg {
    width: 30px;
    fill: #d52b1e;
}
.menu-right .article .icon svg.document_2 {
    fill: #d52b1e;
    position: absolute;
    left: 12px;
    top: -12px;
}
.menu-right .article .icon {
    position: relative;
}
.menu-right .article .icon svg {
    width: 32px;
    fill: #d52b1e;
    transition: all .2s;
}
.menu-right .like .icon .heart {
    width: 30px;
    fill: #d52b1e;
    opacity: 1;
}
.menu-right .like.active .icon .heart {
    opacity: 0;
    position: absolute;
}
.menu-right .like.active .icon .heart-fill-animation {
    animation: heart-fill .6s;
    opacity: 0;
}
.ff .menu-right .like .icon .heart-fill-animation,
.safari .menu-right .like .icon .heart-fill-animation {
    margin-left: -31px;
    margin-top: 0;
}
.safari .works-list-item .works-list-item-text {
    margin-top: 15%;
}
.safari .works-list-item.hide {
    padding: 0 150px 100px 150px;
}
.menu-right .like .icon .heart-fill-animation {
    width: 30px;
    fill: #d52b1e;
    opacity: 0;
    position: absolute;
    margin-top: -31px;
}
.menu-right .like .icon .heart-fill {
    width: 30px;
    fill: #d52b1e;
    opacity: 0;
}
.menu-right .like.active .icon .heart-fill {
    opacity: 1;
}
.menu-right .article:hover .icon svg.document {
    margin-top: -12px;
    transition: all .3s;
}
.menu-right .article:hover .icon svg.document_2 {
    margin-top: 12px;
    transition: all .3s;
}
.menu-right .like:hover .icon svg {
    animation: bounce .8s infinite;
}
.menu-right .live:hover .icon svg {
    animation: away .5s;
}
body.page-open.page-live .menu-right .live .icon svg, body.page-open.page-article .menu-right .article .icon svg {
    opacity: 0;
    transition: opacity 0s;
}
.menu-right .live:active .icon svg {
    opacity: 0;
    margin-top: -20px; margin-left: 20px;
    transition: all .3s;
}
.menu-right .article:active .icon svg.document {
    margin-top: -22px;
    opacity: 0;
    transition: all .3s;
}
.menu-right .article:active .icon svg.document_2 {
    margin-top: 22px;
    opacity: 0;
    transition: all .3s;
}
.menu-right .live .icon {
    width: 30px;
    display: inline-block;
    position: absolute;
    margin-left: -49px;
    padding-right: 49px;
    margin-top: 35px;
}
.menu-right .article .icon {
    width: 32px;
    display: inline-block;
    position: absolute;
    margin-left: -51px;
    padding-right: 51px;
    margin-top: 31px;
}
.menu-right .like .icon {
    width: 30px;
    display: inline-block;
    position: absolute;
    margin-left: -49px;
    padding-right: 49px;
    margin-top: 35px;
}
.live-short, .article-short, .like-short {
    font-size: 18px;
    color: #878787;
    margin-top: 16px;
    text-decoration: none;
}




/* footer */
footer .pencil {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    bottom: 50px;
    right: 50px;
    background: #d52b1e;
    cursor: pointer;
    -webkit-box-shadow: 0 20px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow:    0 20px 15px 0 rgba(0, 0, 0, 0.1);
    box-shadow:         0 20px 15px 0 rgba(0, 0, 0, 0.1);
    transition: all .2s;
    z-index: 22;
}
footer .pencil:active {
    background: #ffffff !important;
    transform: scale(0.95);
}
footer .pencil:hover {
    bottom: 53px;
    transform: scale(1.03);
    transition: all .2s;
    -webkit-box-shadow: 0 30px 20px 0 rgba(0, 0, 0, 0.07);
    -moz-box-shadow:    0 30px 20px 0 rgba(0, 0, 0, 0.07);
    box-shadow:         0 30px 20px 0 rgba(0, 0, 0, 0.07);
}
footer .pencil.show:hover {
    transform: none;
    bottom: 50px;
}
footer .pencil.show .pencil-button {
    opacity: 0;
}
footer .pencil .pencil-button {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    position: absolute;
    background: #d52b1e;
    bottom: -1px;
    right: -1px;
    z-index: 2;
    opacity: 1;
    transition: opacity .1s, background .1s .5s;
}
footer .pencil .pencil-button svg {
    width: 32px;
    margin-top: 14px;
    margin-left: 15px;
    fill: #fff;
    position: absolute;
}
footer .pencil.show .pencil-svg {
    opacity: 0;
    bottom: 250px;
    right: 250px;
    position: absolute;
}

footer .pencil.active .pencil-svg {
    opacity: 0;
}
footer .pencil.show {
    box-shadow: none;
    position: fixed;
    cursor: default;
}
/*footer .pencil:hover .pencil-bg {*/
    /*right: 0;*/
    /*bottom: 0;*/
/*}*/
footer .pencil .pencil-bg {
    transition: all .25s;
    /*opacity: 0;*/
    /*visibility: hidden;*/
    background: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    right: 0;
    bottom: 0;
    position: absolute;
}
footer .pencil .pencil-bg.show {
    opacity: 1;
    border-radius: 50%;
    background: #ffffff;
    visibility: visible;
    position: absolute;
    /*animation-name: footer-easing;*/
    /*animation-duration: .3s;*/
    width: 800px;
    height: 800px;
    bottom: -350px;
    right: -350px;
    transition: width .4s, height .4s, bottom .4s, right .4s;
    z-index: 4;
    -webkit-box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.05);
    -moz-box-shadow:    0 0 60px 0 rgba(0, 0, 0, 0.05);
    box-shadow:         0 0 60px 0 rgba(0, 0, 0, 0.05);
}
footer .pencil .pencil-bg.active {
    width: 300vw;
    height: 450vh;
    opacity: 1;
    bottom: -225vh;
    right: -150vw;
    border-radius: 50%;
    visibility: visible;
    background: #ffffff;
    position: fixed;
    transition: width .6s, height .6s, bottom .6s, right .6s;
    z-index: 7;
    cursor: default;
}
footer .pencil .close-button, footer .pencil .brief-button, footer .pencil .feedback-button {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
}
footer .pencil .close-button svg {
    width: 23px;
    margin-left: -10px;
    margin-top: -19px;
    position: absolute;
    opacity: 0;
}
footer .pencil.show .close-button:hover svg {
    animation-name: elastic-close;
    animation-duration: .6s;
}
footer .pencil.show .close-button:active svg {
    margin-top: -7px;
}
footer .pencil.show .close-button svg {
    margin-top: -13px;
    opacity: 1;
    transition: all .3s;
}
footer .pencil.show .close-button {
    padding: 32px;
    background: #fafafa;
    border-radius: 50%;
    opacity: 1;
    visibility: visible;
    cursor: pointer;
    position: absolute;
    z-index: 5;
    right: -1px;
}
footer .pencil.show .brief-button i {
    opacity: 1;
    visibility: visible;
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #d52b1e;
    cursor: pointer;
    -webkit-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.16);
    transition: all .2s;
}
footer .pencil .feedback-button {
    bottom: 60px;
    width: 200px;
    right: 13px;
}
footer .pencil .brief-button {
    bottom: 60px;
    width: 200px;
    right: 13px;
}
footer .pencil.show .feedback-button {
    z-index: 7;
    opacity: 1;
    width: 200px;
    right: 13px;
    bottom: 200px;
    transition: bottom .3s .15s, opacity .3s .15s;
    cursor: pointer;
}
footer .pencil.show .brief-button {
    opacity: 1;
    z-index: 6;
    width: 200px;
    right: 13px;
    bottom: 110px;
    transition: bottom .3s .25s, opacity .3s .25s;
    cursor: pointer;
}

footer .pencil.show .feedback-button svg, footer .pencil .feedback-button svg {
    width: 28px;
    fill: #fff;
    margin-top: 22px;
    margin-left: 14px;
}
footer .pencil.show .brief-button svg, footer .pencil .brief-button svg {
    fill: #fff;
    width: 20px;
    margin-top: 20px;
    margin-left: 20px;
}
footer .pencil .feedback-button span, footer .pencil .brief-button span {
    transition: all .2s;
    margin-top: 20px;
    color: #ffffff;
    font-size: 18px;
    padding: 10px 20px 10px 0;
    display: inline-block;
}
footer .pencil.show .brief-button span {
    display: inline-block;
    visibility: visible;
    font-size: 18px;
    color: #272727;
    opacity: 1;
    margin-top: 8px;
    transition: opacity .3s .4s, margin-top .3s .4s, visibility .3s .4s, margin-left .1s, padding .1s;
    padding: 10px 20px 10px 0;
}
footer .pencil.show .feedback-button span {
    display: inline-block;
    visibility: visible;
    font-size: 18px;
    color: #272727;
    padding: 10px 20px 10px 0;
    opacity: 1;
    margin-top: 8px;
    transition: opacity .3s .4s, margin-top .3s .4s, visibility .3s .4s, margin-left .1s, padding .1s;
}
footer .pencil.show .feedback-button i {
    opacity: 1;
    display: inline-block;
    visibility: visible;
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #d52b1e;
    cursor: pointer;
    -webkit-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.16);
    transition: all .2s;
}
footer .pencil.show .feedback-button:hover i {
    transform: scale(1.03);
    -webkit-box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.16);
    transition: all .3s;
}
footer .pencil.show .brief-button:hover i {
    transform: scale(1.03);
    -webkit-box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.16);
    transition: all .3s;
}
footer .pencil.show .brief-button:active, footer .pencil.show .feedback-button:active {
    transform: scale(0.98);
}
footer .pencil.show .brief-button:hover span, footer .pencil.show .feedback-button:hover span {
    color: #d52b1e;
    margin-left: -5px;
    padding: 10px 25px 10px 0;
    transition: all .2s;
}

/* pages */
body.page-open, body.main-page-open {
    overflow: visible !important;
}

/* live pages */
.live-page, .article-page, .works-page, .about-page, .contacts-page {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    width: 100vw;
    overflow-x: hidden;
    z-index: 4;
    height: 100vh;
    transition: all .3s;
}
.live-page.open, .article-page.open, .works-page.open, .about-page.open, .contacts-page.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0s .5s;
    background: #fff;
    height: auto;
}
.live-page-right, .article-page-right {
    width: 40vw;
    min-height: 100vh;
    background: #fafafa;
    margin-left: 0;
    display: inline-block;
    float: right;
    transition: all .4s;
}
.live-page.open .live-page-right, .article-page.open .article-page-right {
    width: 75vw;
    margin-left: 25vw;
    transition: width .4s .7s;
}
.page-loader.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s 1.1s, visibility .2s 1.1s;
}
.page-loader {
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    opacity: 0;
    visibility: hidden;
}
.live-page-container.hide {
    opacity: 0;
    transition: opacity .1s;
}
.live-page-container a:hover {
    text-decoration: none;
    border-bottom: none;
}
.live-page-container a {
    color: #037caf;
    border-bottom: 1px solid #037caf;
    text-decoration: none;
}
.live-page-container {
    margin-top: 150px;
}
.post {
    width: 100vw;
}
.post.hide .post-left .post-left-avatar {
    margin-top: 40px;
    opacity: 0;
}
.post .post-left .post-left-avatar {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
    opacity: 1;
    transition: all .6s;
}
.post .post-left .post-left-avatar img {
    width: 60px;
    margin-top: -13px;
}

.post .post-left .post-left-text .post-left-text-name {
    font-size: 30px;
    font-family: 'rgbold';
    color: #272727;
    text-transform: uppercase;
    margin-left: 0;
    opacity: 1;
    transition: all .3s .1s;
}
.post.hide .post-left .post-left-text .post-left-text-name {
    margin-left: 50px;
    opacity: 0;
}
.post.hide .post-left .post-left-text .post-left-text-name:after {
    margin-left: 50px;
    opacity: 0;
}
.post:hover .post-left .post-left-text .post-left-text-name:after {
    width: 50px;
    transition: all .3s;
}
.post .post-left .post-left-text .post-left-text-name:after {
    content: '';
    opacity: 1;
    margin-left: 0;
    display: block;
    position: absolute;
    width: 100px;
    height: 2px;
    background: #d52b1e;
    margin-top: 4px;
    transition: width .3s, opacity .3s .15s, margin-left .3s .15s;
}
.post.hide .post-left .post-left-text .post-left-text-position {
    margin-left: 50px;
    opacity: 0;
}
.post .post-left .post-left-text .post-left-text-position {
    font-size: 18px;
    margin-top: 15px;
    margin-left: 0;
    opacity: 1;
    transition: all .3s .2s;
}
.post.hide .post-left .post-left-text .post-left-text-date {
    margin-left: 50px;
    opacity: 0;
}
.post .post-left .post-left-text .post-left-text-date {
    color: #cecece;
    font-size: 16px;
    margin-top: 5px;
    margin-left: 0;
    opacity: 1;
    transition: all .3s .25s;
}
.post .post-left .post-left-text {
    display: inline-block;
    vertical-align: top;
    padding-left: 20px;
}
.post .post-left {
    width: calc(25vw - 50px);
    margin-left: -25vw;
    vertical-align: top;
    display: inline-block;
    padding-left: 50px;
    margin-top: 3px;
}
.post .post-right p:nth-child(1) {
    margin-top: 0;
}
.post .post-right p img {
    max-width: 80%;
}
.post .post-right p {
    max-width: 80%;
    font-size: 18px;
}
.post.hide .post-right {
    opacity: 0;
}
.post .post-right {
    width: calc(75vw - 50px);
    padding-left: 50px;
    margin-left: -5px;
    vertical-align: top;
    display: inline-block;
    opacity: 1;
    margin-top: 7px;
    transition: all .3s .25s;
}
.post {
    margin-bottom: 80px;
}
.article-page-right {
    padding-top: 150px;
    vertical-align: top;
}
.article-page-list .article-page-header span {
    position: relative;
    z-index: 1;
}
.article-page-list .article-page-header .article-page-date {
    color: #cecece;
    font-size: 16px;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.article-page-list .article-page-header:hover:before {
    width: 5%;
    height: 100%;
    transition: width .3s;
    background: #fafafa;
    content: '';
    display: block;
}
.article-page-list .article-page-header:before {
    transition: all .1s;
    width: 0;
    right: 0;
    top: 0;
    height: 100%;
    content: '';
    display: block;
    position: absolute;
    z-index: 0;
    background: #fafafa;
}
.article-page-list .article-page-header.active:before {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    background: #fafafa;
    top: 0;
    right: 0;
    transition: width .3s;
}
.article-page-list .article-page-header:after {
    width: 0;
    height: 100%;
    content: '';
    display: block;
    position: absolute;
    background: #d52b1e;
    top: 0;
    left: 0;
}
.article-page-list .article-page-header.active:after {
    width: 2px;
    height: 100%;
    content: '';
    display: block;
    position: absolute;
    background: #d52b1e;
    top: 0;
    left: 0;
    transition: all .3s;
}
.article-page-list .article-page-header:hover {
}
.article-page-list .article-page-header {
    font-size: 18px;
    padding: 25px 50px 20px 50px;
    cursor: pointer;
    transition: padding .1s;
    position: relative;
}
.article-page .article-page-list {
    opacity: 0;
    margin-left: -23vw;
    display: inline-block;
}
.article-page.open .article-page-list {
    width: 25vw;
    margin-left: -25vw;
    vertical-align: top;
    opacity: 1;
    display: inline-block;
    transition: all .3s 1s;
}
.article-page-container {
    margin-left: -5px;
    opacity: 0;
    vertical-align: top;
    display: inline-block;
    width: calc(75vw - 55px);
    padding-left: 55px;
    padding-bottom: 50px;
}
.article-content p a:hover {
    text-decoration: none;
}
.article-content p a {
    color: #272727;
}
.article-content ul {
    font-size: 18px;
    max-width: 70%;
}
.article-content b {
    font-family: 'rgbold';
}
.article-content h2 {
    max-width: 80%;
}
.article-page.open .article-page-container {

}
.article-content h1 {
    margin-top: 50px;
}
.article-content h1, .article-author .article-author-name {
    max-width: 80%;
    font-size: 30px;
    font-family: 'rgbold';
    text-transform: uppercase;
}
.article-author .article-author-date {
    margin-top: 4px;
    color: #cecece;
}
.article-author .article-author-position {
    font-size: 18px;
}
.article-page .article-author .article-author-name:after, .article-page .article-content h1:after {
    width: 10px;
    content: '';
    height: 2px;
    background: #d52b1e;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    left: 0;

}
.article-page.open .article-author .article-author-name:after, .article-page.open .article-content h1:after {
    width: 100px;
    transition: all .3s 3.3s;
}
.article-page.open .article-page-container {
    opacity: 1;
    transition: opacity .5s .3s;
}
.article-page.open .article-page-container.hide {
    opacity: 0;
    transition: all .3s;
    margin-left: 50px;
}
.article-page.open .article-content h1:after {
    margin-top: 10px;
}
.article-content img {
    max-width: 100%;
}
.article-content p {
    font-size: 18px;
    max-width: 80%;
}
.article-author .article-author-avatar img {
    max-width: 200px;
    margin-top: -35px;
}
.article-author .article-author-avatar {
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
    border-radius: 200px;
    overflow: hidden;
}

.works-page, .about-page, .contacts-page {
    width: 0;
    left: 0;
    background: #ffffff;
    transition: width .4s, height 0s .4s, visibility 0s .4s, opacity 0s .4s;
}
.works-page.open, .about-page.open, .contacts-page.open {
    width: 100vw;
    min-height: 100vh;
    transition: width .4s .5s;
}
.works-page-content {
    padding: 0 0 50px 0;
    background: #fff;
}
.works-page.open .works-page-content .works-header, .works-page.open .works-page-content .works-page-container, .about-page.open .about-page-container, .contacts-page.open .contacts-page-container {
    opacity: 1;
}
.works-page .works-page-content .works-header, .works-page .works-page-content .works-page-container, .about-page .about-page-container, .contacts-page .contacts-page-container {
    opacity: 0;
    transition: opacity .05s;
}
.works-page-content .works-header {
    padding: 150px 150px 0 150px;
}
.works-page-content .works-header span {
    font-size: 18px;
    margin-top: 50px;
    opacity: 0;
}
.works-page.open .works-page-content .works-header h1, .works-page.open .works-page-content .works-header span {
    opacity: 1;
    margin-top: 0;
    transition: all .3s .9s;
}
.works-page-content .works-header h1 {
    font-family: 'blblack';
    font-size: 74px;
    text-transform: uppercase;
    margin-bottom: 15px;
    margin-top: 50px;
    opacity: 0;
}
.works-page.open .works-page-content .works-header h1:after {
    width: 100px;
    transition: width .3s 1.2s;
}
.works-page-content .works-header h1:after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #d52b1e;
}
.works-list-item-text h2 {
    font-size: 30px;
    font-family: 'rgbold';
    text-transform: uppercase;
    margin-bottom: 15px;
}
.works-list-item-text h2:after {
    content: '';
    display: block;
    width: 100px;
    margin-top: 7px;
    height: 2px;
    background: #d52b1e;
    transition: width .2s;
}
.works-list-item .works-list-item-text:hover ~ .works-list-item-cover img {
    -webkit-box-shadow: 0 65px 95px 65px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 65px 95px 65px rgba(0,0,0,0.07);
    box-shadow: 0 65px 95px 65px rgba(0,0,0,0.07);
    transition: all .3s;
    transform: scale(1.01);
}
.works-list-item .works-list-item-text:hover h2:after {
    width: 50px;
    transition: width .2s;
}
.works-list-item .works-list-item-text {
    max-width: 480px;
    position: absolute;
    margin-top: 10%;
    margin-left: 5%;
    z-index: 2;
    cursor: pointer;
}
.works-list-item.active .works-list-item-cover:hover img {
    box-shadow: none;
    transform: none;
}
.works-list-item.active .works-list-item-cover:hover img {
    box-shadow: none;
    transform: none;
}
.works-list-item .works-list-item-cover:hover img {
    -webkit-box-shadow: 0 65px 95px 65px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 65px 95px 65px rgba(0,0,0,0.07);
    box-shadow: 0 65px 95px 65px rgba(0,0,0,0.07);
    transition: all .3s;
    transform: scale(1.01);
}
.works-list-item .works-list-item-cover {
    position: relative;
    margin-left: 30%;
    max-width: 70%;
    text-align: right;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
}
.works-list-item:nth-child(1) .works-list-item-cover {
    top: -40px;
    /*margin-top: 50px;*/
}
.works-list-item:nth-child(even) .works-list-item-cover {
    margin-left: 0;
    text-align: left;
}
.works-list-item:nth-child(even) .works-list-item-text {
    right: 20px;
}
.works-list-item.active .works-list-item-cover img {
    box-shadow: none;
}
.works-list-item .works-list-item-cover img {
    width: 100%;
    transition: all .2s;
    -webkit-box-shadow: 0 50px 80px 50px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 50px 80px 50px rgba(0,0,0,0.1);
    box-shadow: 0 50px 80px 50px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}
.works-list-item-text span {
    font-size: 28px;
}
.works-page-container {
    margin-top: 220px;
}
.works-list-item {
    opacity: 1;
    margin-top: 100px;
    position: relative;
    margin-bottom: 200px;
    transition: opacity .3s, padding-top .3s;
    padding: 0 150px 100px 150px;
}
.works-list-item.hide {
    opacity: 0;
    padding: 100px 150px 0 150px;
}
.works-list-item.active .works-list-item-cover .works-item {
    top: 0;
    position: absolute;
    min-height: 100vh;
    height: 100%;
    width: 100vw;
    z-index: 3;
    background: #ffffff;
    overflow-y: scroll;
}
.works-list-item.active:nth-child(odd) .works-list-item-cover {
    animation: rightScreen .3s;
}
.one-item-main-image img {
    z-index: 0 !important;
}
.works-list-item.active .works-list-item-cover {
    width: 100vw;
    height: 100vh;
    margin-left: -150px;
    max-width: 100%;
    position: absolute;
    cursor: default;
    z-index: 14;
    transition: all .3s;
}
body.one-works-item header {
    opacity: 0;
    visibility: hidden;
}
body.one-works-item  .works-item .header-page {
    opacity: 0;
}
body.one-works-item  .works-item.done .header-page {
    position: fixed;
    top: 0;
    opacity: 1;
    transition: opacity .3s .2s;
}
.works-list-item .works-list-item-cover:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: #ffffff;
    opacity: 0;
    z-index: 1;
}
.works-list-item .works-list-item-cover:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    z-index: 2;
}
.works-list-item.active .works-list-item-cover:after, .works-list-item.active .works-list-item-cover:before {
    opacity: 1;
    transition: opacity .2s .1s;
}
.wow-portfolio-ajax-block:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    transition: opacity .4s .2s;
    z-index: 1;
}
.works-item:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: opacity .4s .2s;
    z-index: 1;
}
.works-item.done:before, .wow-portfolio-ajax-block.done:before {
    opacity: 0;
    transition: opacity .4s .2s;
}

/* one item */
.animate-block {
    opacity: 1;
    transition: opacity .6s;
    position: relative;
}
.animate-block.hide {
    opacity: 0;
}
.works-item.done .one-item, .wow-portfolio-ajax.done .one-item  {
    background: #ffffff;
}
.one-item-main-image h1 {
    color: #ffffff;
    font-size: 132px;
    letter-spacing: 10px;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    text-align: center;
    width: calc(100vw - 100px);
    font-family: 'blblack';
    margin-top: 50px;
    opacity: 0;
    text-shadow: rgba(0, 0, 0, .3) 0 0 1em;
}
.one-item-main-image {
    position: relative;
}
.one-item-main-image h2 {
    opacity: 0;
    font-size: 30px;
    font-family: 'rgbold';
    color: #ffffff;
}
.works-item.done .one-item-main-image h1, .wow-portfolio-ajax-block.done .one-item-main-image h1 {
    opacity: 1;
    margin-top: 0;
    top: 45%;
    padding: 0 50px;
    transition: opacity .6s .3s, top .3s .3s;
}
.one-item .one-item-number h2 {
    color: #cecece;
    text-transform: uppercase;
    font-size: 30px;
    text-align: left;
    font-family: 'rgbold';
    margin-top: 0;
}
.one-item h2:after {
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background: #d52b1e;
    margin-top: 10px;
}
.one-item .one-item-number .number-desc {
    font-size: 22px;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}
.one-item .one-item-number .number {
    font-size: 94px;
    font-family: 'blblack';
    display: inline-block;
    margin-right: 58px;
    letter-spacing: 4px;
    vertical-align: middle;
}
.one-item-link ~ .work-with-me-baby {
    opacity: 1;
    transition: opacity .6s .1s;
}
.one-item-link.hide ~ .work-with-me-baby {
    opacity: 0;
}
.one-item .one-item-number {
    background: #fafafa;
    color: #272727;
    padding: 60px 10%;
    text-align: center;
    margin-top: -5px;
}
.one-item-desc h2:after {
    display: none;
}
.one-item-desc h2 {
    color: #272727;
    text-transform: uppercase;
    font-size: 30px;
    text-align: center;
    font-family: 'rgbold';
    margin-top: 0;
}
.one-item-desc span {
    text-align: center;
    display: block;
    font-size: 22px;
    line-height: 40px;
}
.one-item-desc {
    padding: 150px 10%;
}
.one-item-quest span {
    font-size: 22px;
    margin-top: 30px;
    display: block;
    line-height: 40px;
}
.one-item-quest h2 {
    font-family: 'blblack';
    font-size: 74px;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #272727;
}
.one-item-quest .one-item-screen img {
    width: 100%;
}
.one-item-studio .studio-text span {
    font-size: 16px;
    color: #cecece;
    display: block;
    margin-bottom: 17px;
}
.one-item-studio .studio-text h3:after {
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background: #d52b1e;
    margin-top: 8px;
    margin-bottom: 8px;
}
.one-item-studio .studio-text h3 {
    font-size: 30px;
    font-family: 'rgbold';
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}
.one-item-studio .studio-text {
    vertical-align: top;
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    max-width: 80%;
    line-height: 28px;
}
.one-item-studio .studio-avatar img {
    max-width: 100%;
    margin-top: -20px;
}
.one-item-studio .studio-avatar {
    width: 150px;
    display: inline-block;
    margin-right: 30px;
    vertical-align: top;
    margin-top: -10px;
    border-radius: 50%;
    height: 150px;
    overflow: hidden;
}
.one-item-studio {
    background: #272727;
    padding: 100px 10%;
    text-align: left;
    margin-top: -10px;
}
.one-item-quest .one-item-screen {
    width: 100vw;
}
.one-item-quest .one-item-task {
    padding: 0 5% 150px 10%;
    text-align: left;
    display: inline-block;
    width: calc(50% - 16%);
    vertical-align: top;
}
.one-item-quest .one-item-idea {
    padding: 0 10% 100px 5%;
    text-align: left;
    display: inline-block;
    width: calc(50% - 15%);
    vertical-align: top;
}
.one-item-mobile .one-item-mobile-screen .one-item-mobile-screen-center {
    vertical-align: middle;
}
.one-item-mobile .one-item-mobile-screen {
    position: absolute;
    right: -395px;
    text-align: left;
    top: 160px;
    width: 360px;
}
.one-item-mobile .one-item-mobile-header {
    position: absolute;
    font-size: 74px;
    font-family: 'blblack';
    text-transform: uppercase;
    top: 0;
    left: 390px;
    line-height: 70px;
}
.one-item-mobile .one-item-mobile-img img {
    margin-left: 30px;
    margin-top: -180px;
    margin-bottom: -235px;
    position: relative;
    z-index: 4;
    max-width: 300px;
}
.one-item-mobile .one-item-mobile-img {
    max-width: 360px;
    width: 50%;
    margin: 320px auto 350px;
    position: relative;
    border: 2px solid #d52b1e;
    text-align: left;
    left: -20%;
}
.one-item-mobile .one-item-mobile-screen img {
    border-top: 30px solid #fff;
    z-index: 2;
    max-width: 460px;
}
.one-item-mobile {
    padding-bottom: 1px;
}
.one-item-link {
    padding: 50px 10%;
    text-align: center;
    background: #fafafa;
}
.one-item-link a {
    font-size: 74px;
    color: #272727;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'blblack';
    transition: all .1s;
    display: inline-block;
}
.one-item-link a:hover {
    color: #d52b1e;
    transition: all .3s;
}
.one-item-link a:active {
    transform: scale(0.98);
}
.about-page .work-with-me-baby {
    background: #fafafa;
    color: #272727;
}
.work-with-me-baby {
    text-align: right;
    padding: 30px 100px 30px 50px;
    background: #272727;
    color: #ffffff;
}
.work-with-me-baby .pointer {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    margin-right: 105px;
}
.work-with-me-baby .pointer-img img {
    transform: rotate(-50deg) !important;
}
.work-with-me-baby .pointer-img {
    width: 58px;
    display: inline-block;
    vertical-align: top;
    margin-left: -85px;
    margin-top: -15px;
    position: absolute;
}


/* about page */
.about-awards {
    height: auto;
    background: #fafafa;
    padding: 160px 100px 60px 100px;
    text-align: center;
    transition: height .3s, padding .3s;
}
.about-awards.hide {
    height: 0;
    padding: 0;
}
.about-awards .view-all div:hover h2, .about-awards .view-all div:hover svg {
    color: #d52b1e;
    transition: color .2s;
}
.about-awards .view-all div:hover svg {
    animation-name: elastic-close;
    animation-duration: .6s;
}
.about-awards .view-all div {
    display: inline-block;
    cursor: pointer;
}
.about-awards .view-all {
    display: block;
    margin: 70px auto 0 auto;
    text-align: center;
    position: relative;
}
.about-awards .view-all svg {
    width: 23px;
    fill: #d52b1e;
    display: inline-block;
    margin-top: -13px;
    top: 18px;
    padding: 0 15px;
    margin-left: 115px;
    position: absolute;
    left: 50%;
}
.about-awards .view-all h2 {
    display: inline-block;
    font-size: 30px;
    font-family: 'blblack';
    margin-bottom: 7px;
    margin-top: 0;
    transition: color .1s;
}
.about-awards.hide .about-awards-item {
    opacity: 0;
    position: relative;
    top: -50px;
}
.about-awards .about-awards-item {
    display: inline-block;
    vertical-align: top;
    margin: 0 30px;
    opacity: 1;
    position: relative;
    top: 0;
    transition: all .4s .2s;
}
.about-awards .about-awards-item span {
    font-size: 18px;
    display: block;
}
.about-awards .about-awards-item h3 {
    margin: 5px 0 3px;
    font-family: 'rgbold';
    font-size: 25px;
    display: block;
}
.about-awards .about-awards-item svg {
    height: 120px;
    fill: #d52b1e;
}
.about-text {
    padding: 100px 10%;
    transition: opacity .3s .4s;
}
.about-num .num-text:nth-child(8) {
    margin-right: 0;
}
.about-num .num-text {
    display: inline-block;
    font-size:21px;
    transform: rotate(-90deg);
    vertical-align: top;
    margin-right: 90px;
    margin-top: 160px;
    margin-left: 23px;
    width: 0;
}
.about-num .num h1 {
    display: inline-block;
    font-family: 'blblack';
    font-size: 172px;
    margin: 0;
    vertical-align: bottom;
    color: #D52B1E;
}
.about-num .num {
    display: inline-block;
}
.about-num {
    padding: 0 10% 100px 10%;
    transition: opacity .3s .4s;
    text-align: center;
}
.about-text p {
    font-size: 18px;
}
.about-text h2, .about-team h2, .about-services h2, .about-review h2, .about-awards-list h2 {
    font-size: 30px;
    font-family: 'blblack';
    text-transform: uppercase;
    margin-top: 0;
}
.about-text h2:after, .about-team h2:after, .about-services h2:after, .about-review h2:after, .about-awards-list h2:after {
    width: 100px;
    height: 2px;
    content: '';
    display: block;
    background: #d52b1e;
    margin-top: 10px;
}
.about-team h2 {
    color: #ffffff;
    padding: 0 40px;
    text-align: left;
}
.about-team .team-item {
    position: relative;
    top: 0;
    opacity: 1;
    transition: top .5s .2s, opacity .5s .2s;
}
.about-team .team-item.animate  {
    top: 80px;
    position: relative;
    opacity: 0;
}
.about-team .team-item .team-item-photo img {
    max-width: 450px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.about-team .team-item .team-item-name:after {
    width: 100px;
    height: 2px;
    content: '';
    display: block;
    background: #d52b1e;
    margin-top: 3px;
}
.about-team .team-item .team-item-position {
    font-size: 18px;
    margin-top: 8px;
}
.about-team .team-item .team-item-name {
    font-size: 30px;
    font-family: 'rgbold';
    text-transform: uppercase;
    margin-top: 15px;

}
.about-team .team-item {
    color: #ffffff;
    margin: 60px 40px 20px 40px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: calc(25% - 84px);
}
.about-team {
    background: #272727;
    padding: 100px calc(10% - 40px);
    text-align: center;
}
.about-services p {
    font-size: 18px;
}
.about-services span {
    font-size: 18px;
    max-width: 60%;
    min-width: 320px;
}
.about-services h1 {
    font-size: 70px;
    font-family: 'blblack';
    text-transform: uppercase;
    margin-bottom: 0;
}
.about-services, .about-awards-list {
    padding: 100px 10%;
}
.about-review {
    padding: 100px 10% 50px 10%;
}
.about-review {
    background: #fafafa;
}
.about-review-text-text .about-review-video, .about-review-text-text .about-review-audio {
    display: inline-block;
    margin-top: 30px;
}


/* slider */
.slider {
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    z-index: 1;
}
.slider ul {
    position: relative;
    margin: 50px 0 0 0;
    padding: 0;
    list-style: none;
}
.slider ul li .about-review-photo img {
    width: 100%;
    border-radius: 50%;
}
.slider ul li .about-review-text .about-review-text-text {
    font-size: 18px;
    line-height: 30px;
}
.slider ul li .about-review-text .about-review-text-position {
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #878787;
}
.slider ul li .about-review-text .about-review-text-name:after {
    width: 100px;
    height: 2px;
    content: '';
    display: block;
    background: #d52b1e;
    margin-top: 5px;
}
.slider ul li .about-review-text .about-review-text-name {
    font-size: 30px;
    font-family: 'rgbold';
    text-transform: uppercase;
    margin-top: 15px;
}
.slider ul li .about-review-text {
    width: 70%;
    margin-left: 5%;
    max-width: 800px;
    display: inline-block;
    vertical-align: top;
}
.slider ul li .about-review-photo {
    width: 25%;
    max-width: 380px;
    display: inline-block;
    vertical-align: top;
}
.slider ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
}
.control_next svg {
    fill: #d52b1e;
    width: 34px;
}
.control_next:hover svg {
    animation-name: elastic-arrow;
    animation-duration: .6s;
}
.control_next:active svg {
    transform: scale(0.95);
    transition: scale .2s;
}
.control_next {
    position: absolute;
    z-index: 2;
    right: 10%;
    cursor: pointer;
    width: 50px;
    text-align: right;
}
.about-review-video, .about-review-audio {
    color: #878787;
    text-decoration: none;
    vertical-align: top;
    margin-right: 30px;
    transition: all .1s;
}
.about-review-video:hover, .about-review-audio:hover {
    color: #d52b1e;
    transition: all .3s;
}
.about-review-video:active, .about-review-audio:active {
    transform: scale(0.98);
    transition: all .3s;
}
.about-review-video:hover svg, .about-review-audio:hover svg {
    fill: #d52b1e;
    transition: all .3s;
}
.about-review-video svg, .about-review-audio svg {
    width: 16px;
    fill: #878787;
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
    margin-right: 7px;
}
.awards-block .awards-block-icon svg {
    width: 80px;
    fill: #d52b1e;
}
.awards-block .awards-block-icon {
    display: inline-block;
    vertical-align: top;
}
.awards-block .awards-block-name .awards-block-name-counter {
    font-size: 18px;
}
.awards-block .awards-block-name .awards-block-name-text {
    font-size: 25px;
    font-family: 'rgbold';
    text-transform: uppercase;
}
.awards-block .awards-block-name {
    display: inline-block;
    vertical-align: top;
    margin-left: 25px;
    margin-top: 15px;
}
.awards-block .awards-block-list li .awards-block-site a:active {
    transform: scale(0.95);
    transition: all .3s;
}
.awards-block .awards-block-list li .awards-block-site a:hover {
    color: #d52b1e;
    transition: all .3s;
}
.awards-block .awards-block-list li .awards-block-site a {
    text-decoration: none;
    color: #272727;
    transition: all .1s;
    display: block;
}
.awards-block .awards-block-list li .awards-block-site {
    width: 24%;
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
}
.awards-block .awards-block-list li .awards-block-item span {
    font-size: 18px;
    display: block;
    color: #878787;
    margin-top: 5px;
}
.awards-block .awards-block-list li .awards-block-item {
    width: 75%;
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
}
.awards-block .awards-block-list li {
    margin: 10px 0 20px;
}
.awards-block .awards-block-list {
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
}
.awards-block {
    width: 100%;
    margin: 60px 0 80px;
}

.contacts-page-block.hover .contacts-left-block.show {
    width: calc(40vw - 50px);
    transition: width .3s, padding-left .3s;
    padding-left: 50px;
}
.contacts-page-block .contacts-left-block.show {
    padding-top: 150px;
    padding-left: 150px;
    opacity: 1;
    transition: width .2s, padding-left .2s, opacity .3s .4s, padding-top .3s .4s;
}
.contacts-page-block .contacts-left-block {
    width: calc(60vw - 150px);
    height: calc(100vh - 200px);
    display: inline-block;
    vertical-align: top;
    transition: width .2s, padding-left .2s;
    padding-top: 200px;
    opacity: 0;
    padding-left: 150px;
}
.contacts-page-block.hover .contacts-right-block {
    width: 60vw;
    transition: width .3s;
}
.contacts-page-block .contacts-right-block.show:before {
    transform: translateX(-100%);
    transition: width 0s .3s, all .4s .1s;
    width: 0;
}
.contacts-page-block .contacts-right-block:before {
    content: '';
    width: 40vw;
    height: 100vh;
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
    background: #ffffff;
    transform: translateX(0);
    transition: all 3s 1s;
}
.contacts-page-block .contacts-right-block {
    width: 40vw;
    height: 100vh;
    display: inline-block;
    vertical-align: top;
    background: #fafafa;
    margin-left: -5px;
    overflow: hidden;
    transition: width .2s;
}
.hover #googleMap {
    left: 0;
    transition: left .3s;
}
#googleMap {
    height: 100vh;
    width: 40vw;
    z-index: 1;
}
body.page-contacts {
    overflow: hidden;
}
.social a svg {
    height: 20px;
    transition: all .2s;
}
.social  {
    margin-top: 45px;
    margin-bottom: 7px
}
.social a:active {
    transform: scale(0.95);
    transition: scale .3s;
}
.social a:hover svg {
    fill: #d52b1e;
    transition: all .3s;
}
.social a {
    display: inline-block;
    text-decoration: none;
    margin-right: 25px;
}
.contacts-left-block h1:after {
    width: 100px;
    height: 2px;
    content: '';
    display: block;
    background: #d52b1e;
    margin-bottom: 10px;
}
.contacts-left-block span {
    font-size: 18px;
}
.contacts-left-block h2 {
    font-size: 30px;
    font-family: 'rgbold';
    margin-top: 45px;
    margin-bottom: 7px;
}
.contacts-left-block h1 {
    font-size: 70px;
    font-family: 'blblack';
    margin-bottom: 0;
}

/* footer */
footer #hamburger-feedback.hamburger.show {
    opacity: 0;
}
footer #hamburger-feedback.hamburger {
    opacity: 1;
    transition: opacity .3s .2s;
}
footer #hamburger-feedback {
    position: fixed;
    right: 50px;
    top: 50px;
    cursor: pointer;
    z-index: 5;
}
#menu-icon-wrapper-feedback {
    opacity: 1;
}
.pencil-bg.active .feedback-form form {
    display: table-cell;
    vertical-align: middle;
    padding-left: 12%;
}
.pencil-bg.active #form-brief {
    margin-top: 150px;
    opacity: 1;
    transition: all .3s;
}
.pencil-bg.active #form-brief.hide {
    margin-top: 250px;
    opacity: 0;
}
.pencil-bg.active .brief-form {
    position: fixed;
    top: 0;
    opacity: 1;
    left: 0;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}
.pencil-bg.active .feedback-form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: table;
}
.brief-form .form-input input:focus ~ .graphic, .feedback-form .form-input input:focus ~ .graphic {
    stroke: #d52b1e;
    -webkit-transform: translate3d(-66.6%, 0, 0);
    transform: translate3d(-66.6%, 0, 0);
    transition: all .7s;
}
.brief-form .form-input input, .feedback-form .form-input input {
    display: block;
    border: none;
    background: transparent;
    width: 100%;
    padding: 10px 10px 13px 0;
    outline: none;
    font-size: 25px;
    color: #272727;
    font-family: 'ltlight';
    transition: all .1s;
}
.brief-form .form-input label, .feedback-form .form-input label {
    font-size: 30px;
    font-family: 'rgbold';
    text-transform: uppercase;
}
.brief-form .graphic, .feedback-form .graphic {
    position: relative;
    top: -8px;
    margin-top: -79px;
    left: 0;
    height: 94px;
    fill: none;
    stroke-width: 2px;
    stroke: #d9d9d9;
    pointer-events: none;
    -webkit-transition: stroke 0.7s;
    transition: stroke 0.7s;
    -webkit-transition-timing-function: cubic-bezier(0, 0.15, 0.2, 1);
    transition-timing-function: cubic-bezier(0, 0.15, 0.2, 1);
}
.brief-form .form-input, .feedback-form .form-input {
    max-width: 700px;
    margin-bottom: 60px;
    overflow: hidden;
    position: relative;
}
.brief-form button span, .feedback-form button span {
    font-size: 20px;
    color: #ffffff;
    font-family: 'rgbold';
    margin-left: 23px;
    opacity: 1;
}
.brief-form button:hover svg, .feedback-form button:hover svg {
    animation: elastic-send .6s;
}
.brief-form button svg, .feedback-form button svg {
    position: absolute;
    fill: #fff;
    width: 28px;
    left: 20px;
    margin-top: 3px;
}
.brief-form button:active svg, .feedback-form button:active svg {
    left: 30px;
    transition: all .3s;
}
.brief-form button:active, .feedback-form button:active {
    transform: scale(0.98);
    transition: scale .3s;
}
.brief-form button:hover, .feedback-form button:hover {
    -webkit-box-shadow: 0 20px 15px 0 rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0 20px 15px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 20px 15px 0 rgba(0, 0, 0, 0.06);
    transition: all .3s;
}
.brief-form button, .feedback-form button {
    border: none;
    position: relative;
    background: #d52b1e;
    border-radius: 50px;
    width: 240px;
    padding: 17px 0;
    cursor: pointer;
    opacity: 1;
    -webkit-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
    transition: all .1s;
    outline: none;
}
.pencil:after {
    content: '';
    display: block;
    background: #ffffff;
    border-radius: 50px;
    height: 22px;
    position: absolute;
    font-size: 18px;
    right: 20px;
    width: 1px;
    padding: 18px 0;
    top: 1px;
    z-index: 0;
    transition: all .3s;
    overflow: hidden;
}
.pencil.done:after {
    content: 'Thank, the application is accepted!';
    background: #ffffff;
    border-radius: 50px;
    width: 250px;
    height: 22px;
    position: absolute;
    font-size: 18px;
    right: 0;
    padding: 18px 45px 18px 30px;
    top: 1px;
    z-index: 0;
    transition: all .3s;
    overflow: hidden;
}
.pencil:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #1ecd97;
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    position: relative;
    transition: all .2s .4s;
}
.pencil.done:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #1ecd97;
    border-radius: 50%;
    z-index: 2;
    opacity: 1;
    position: relative;
    transition: opacity .3s .1s;
}
.pencil.done:hover {
    transform: none;
    -webkit-box-shadow: 0 20px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow:    0 20px 15px 0 rgba(0, 0, 0, 0.1);
    box-shadow:         0 20px 15px 0 rgba(0, 0, 0, 0.1);
    cursor: default;
    bottom: 50px;
}
.pencil.done .pencil-button {
    opacity: 0;
    background: #1ecd97;
    transition: opacity .3s, background .3s .2s;
}
.pencil.done .checkmark {
    opacity: 1;
    visibility: visible;
    transition: all .3s;
}
.checkmark {
    opacity: 0;
    transition: all .3s .4s;
    fill: #fff;
    position: absolute;
    z-index: 5;
    visibility: hidden;
    top: 20px;
    left: 15px;
    width: 30px;
}
footer .pencil .pencil-button svg {
    opacity: 1;
    transition: opacity .1s .5s;
}
.pencil.done .pencil-button svg {
    opacity: 0;
}
body.fixed {
    overflow: hidden !important;
}
#form-feedback {
    opacity: 1;
    transition: all .3s .2s;
    padding-top: 0;
}
#form-feedback.hide {
    opacity: 0;
    padding-top: 100px;
}

#form-brief .intro {
    margin-bottom: 50px;
    display: block;
    font-size: 18px;
}
#form-brief .form-input span {
    color: #cecece;
    display: block;
}
#form-brief h1:after {
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background: #d52b1e;
}
#form-brief h1 {
    font-size: 74px;
    font-family: 'blblack';
    text-transform: uppercase;
}
#form-brief .form-input .checkbox span {
    color: #272727;
}
#form-brief .form-input .checkbox input {
    width: 0;
    height: 0;
    border: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background: transparent;
}
#form-brief .form-input .checkbox input:not(checked) ~ span:after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    background: #d9d9d9;
    left: 0;
    top: 8px;
    transition: all .2s;
}
#form-brief .form-input .checkbox input:checked ~ span:after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    background: #d52b1e;
    left: 15px;
    top: 8px;
    transition: all .2s;
}
#form-brief .form-input .checkbox input:not(checked)  ~ span:before {
    content: '';
    display: block;
    width: 30px;
    height: 15px;
    background: #f2f2f2;
    position: absolute;
    left: 0;
    top: 8px;
}
#form-brief .form-input .checkbox:hover span {
    color: #d52b1e;
    transition: color .3s;
}
#form-brief .form-input .checkbox {
    font-size: 25px;
    font-family: 'ltlight';
    text-transform: none;
    cursor: pointer;
    position: relative;
    padding-left: 50px;
    margin-top: 17px;
    display: block;
    transition: color .2s;
}
#form-brief .form-input .radio span {
    color: #272727;
}
#form-brief .form-input .radio input {
    width: 0;
    height: 0;
    border: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background: transparent;
}
#form-brief .form-input .radio input:not(checked) ~ span:after {
    content: '';
    display: block;
    width: 0;
    left: 16px;
    top: 16px;
    height: 0;
    position: absolute;
    background: #d52b1e;
    border-radius: 50%;
    transition: all .2s;
}
#form-brief .form-input .radio input:checked ~ span:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    background: #d52b1e;
    border-radius: 50%;
    left: 7px;
    top: 7px;
    transition: all .2s;
}
#form-brief .form-input .radio input:not(checked)  ~ span:before {
    content: '';
    display: block;
    width: 30px;
    border-radius: 50%;
    height: 30px;
    background: #f2f2f2;
    position: absolute;
    left: 0;
    top: 0;
}
#form-brief .form-input .radio:hover span {
    color: #d52b1e;
    transition: color .3s;
}
#form-brief .form-input .radio {
    font-size: 25px;
    font-family: 'ltlight';
    text-transform: none;
    cursor: pointer;
    position: relative;
    padding-left: 50px;
    margin-top: 17px;
    display: block;
    transition: color .2s;
}
#form-brief {
    margin-left: 12%;
    margin-top: 150px;
}
#form-brief .send-feedback {
    margin-top: 40px;
}


/* other */
#hamburger:active .menu-name {
    transform: scale(0.95);
}


/* самая срань — главная, main */
.main {
    background: url('../images/main/back.jpg') center no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.main .mount-left img {
    bottom: -14px;
    position: absolute;
    left: -40px;
    width: 49vw;
}
.main .mount img {
    bottom: 0;
    width: calc(100vw + 40px);
    left: -20px;
    position: absolute;
}
.main .cloud-front-right img {
    width: 77vw;
    right: -16vw;
    bottom: 11vh;
    position: absolute;
}
.main .cloud-front-left img {
    width: 31vw;
    position: absolute;
    left: 22vw;
    bottom: 38vh;
}
.main .cloud-front-left {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
}
.main .cloud-front-right {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
}
.main .mount-left {
    position: relative;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.main .mount {
    width: 100vw;
    height: 100vh;
    position: relative;
    bottom: 0;
    z-index: 2;
}
.main .parallax {
    transition: all .1s;
}
.main .cloud-scene .cloud-zero img {
    height: 100%;
    animation: cloud-140 550s linear infinite;
    top: -50px;
    transform: translateX(-140%);
}
.main .cloud-scene .cloud-more img {
    height: 100%;
    animation: cloud-140 450s linear infinite;
    top: -400px;
    transform: translateX(-140%);
}
.main .cloud-scene .cloud-eight img {
    height: 100%;
    animation: cloud-140 350s linear infinite;
    top: -500px;
    transform: translateX(-140%);
}
.main .cloud-scene .cloud-seven img {
    height: 100%;
    animation: cloud-140 250s linear infinite;
    top: 0;
    transform: translateX(-140%);
}
.main .cloud-scene .cloud-six img {
    height: 100%;
    animation: cloud-100 150s 225s linear infinite;
    top: 0;
    transform: translateX(-100%);
}
.main .cloud-scene .cloud-five img {
    height: 100%;
    animation: cloud-100 150s 150s linear infinite;
    top: -300px;
    transform: translateX(-100%);
}
.main .cloud-scene .cloud-four img {
    height: 100%;
    animation: cloud-100 150s 75s linear infinite;
    top: -150px;
    transform: translateX(-100%);
}
.main .cloud-scene .cloud-three img {
    height: 100%;
    animation: cloud-100 150s linear infinite;
    top: 0;
}
.main .cloud-scene .cloud-two img {
    height: 100%;
    animation: cloud-two linear 150s;
    top: 0;
    opacity: 0;
}
.main .cloud-scene .cloud-one img {
    height: 100%;
    animation: cloud-one linear 110s;
    opacity: 0;
    top: -150px;
}
.main .cloud-scene img {
    position: absolute;
    min-width: 100vw;
}
.main .cloud-scene .cloud-one, .main .cloud-scene .cloud-two,
.main .cloud-scene .cloud-three, .main .cloud-scene .cloud-four,
.main .cloud-scene .cloud-five, .main .cloud-scene .cloud-six,
.main .cloud-scene .cloud-seven, .main .cloud-scene .cloud-eight,
.main .cloud-scene .cloud-zero, .main .cloud-scene .cloud-more {
    height: 100%;
    width: 100vw;
    position: absolute;
    top: 0;
}
.main .cloud-scene {
    width: 100vw;
    position: absolute;
    top: 0;
    z-index: 1;
    display: block;
}
.main .cloud-front img {
    position: absolute;
    bottom: -10px;
    left: -50px;
    width: 50vw;
}
.main .cloud-front {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.main .main-text .awards-list {
    position: absolute;
    width: 75vw;
    margin-left: 50px;
}
.main .main-text .awards-item:nth-child(2) {
    margin-top: 6%;
}
.main .main-text .awards-item:nth-child(1) {
    margin-top: 12%;
}
.main .main-text .awards-item:nth-child(3) {
    margin-right: 0;
    margin-top: 17%;
}
.main .main-text .awards-item .telegram {
    stroke: #D52B1E;
    stroke-width: 2px;
    width: 36px;
    fill: transparent;
    margin-left: -36px;
    margin-top: -26px;
}
.main .main-text .awards-item .circle {
    stroke: #D52B1E;
    stroke-width: 2px;
    width: 26px;
    fill: transparent;
    margin-left: -34px;
    margin-top: -18px;
    border-radius: 50%;
}
.main .main-text .awards-item .star {
    stroke: #D52B1E;
    stroke-width: 2px;
    width: 40px;
    fill: transparent;
    margin-left: -43px;
    margin-top: -28px;
}
.main .news-block.refresh .news-block-icon svg, .main .news-block.refresh .news-block-icon:hover svg {
    animation: rotate .6s linear infinite;
}
.main .news-block .news-block-icon:active svg {
    transform: scale(0.95);
}
.main .news-block .news-block-icon:hover svg {
    animation: rotateRefresh .3s;
}
.main .news-block.refresh .news-block-text {
    opacity: 0;
    margin-left: 122px;
    transform: scale(0.95);
    transition: opacity .1s, margin-left 1s;
}
.main .news-block .news-block-icon {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    margin-top: -6px;
    padding: 5px;
    cursor: pointer;
}
.main .news-block svg {
    width: 37px;
    fill: #D52B1E;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}
.main .news-block-text {
    font-size: 16px;
    vertical-align: top;
    min-width: 200px;
    max-width: 350px;
    opacity: 1;
    transition: margin-left .3s;
    height: 40px;
    margin-left: 52px;
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 18px;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.main .main-text h2 {
    font-size: 4vw;
    margin: 10px 0 0 0;
    padding: 0;
    line-height: 100%;
}
.main .main-text h1 {
    font-size: 6vw;
    color: #650000;
    font-family: 'blblack';
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}
.main .main-text {
    opacity: 1;
    position: absolute;
    left: 16%;
    top: 33%;
    max-width: 1300px;
    min-width: 960px;
    z-index: 3;
    transition: opacity .3s;
}
/*.safari body.fixed .cloud-scene.no-animation img, .safari body.open .no-animation.cloud-scene img {*/
    /*animation: none !important;*/
/*}*/
body.fixed .cloud-scene.no-animation img, body.open .no-animation.cloud-scene img {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
.slide-down.fp-viewing-one .wow-portfolio .wow-portfolio-item .wow-portfolio-item-desc {
    opacity: 1;
    transition: opacity .2s .6s;
}
.slide-down.fp-viewing-one .wow-portfolio .wow-portfolio-item .wow-portfolio-item-header {
    opacity: 1;
    transition: all .2s .6s;
}
.fp-viewing-main .wow-portfolio .wow-portfolio-item img {
    transform: scale(0.9);
}
.slide-down.fp-viewing-one .wow-portfolio .wow-portfolio-item img {
    transition: all .2s .5s;
    transform: scale(1);
    opacity: 1;
}
.main .wow-portfolio .wow-portfolio-item img {
    max-width: 100%;
    min-width: 320px;
    cursor: pointer;
}
.main .wow-portfolio .wow-portfolio-item .wow-portfolio-item-desc {
    position: relative;
    z-index: 5;
    font-size: 2vw;
    max-width: 920px;
    margin: 0 auto;
    cursor: pointer;
}
.main .wow-portfolio .wow-portfolio-item .wow-portfolio-item-header {
    color: #D52B1E;
    font-size: 5vw;
    text-transform: uppercase;
    font-family: 'blblack';
    margin-top: -180px;
    z-index: 7;
    position: relative;
    cursor: pointer;
}
.main .wow-portfolio .wow-portfolio-item {
    position: absolute;
    width: 100vw;
    text-align: center;
    z-index: 8;
}
.main .wow-portfolio {
    top: 0;
    position: absolute !important;
}
.touch .main .wow-portfolio .wow-cloud-front {}
.touch .main .wow-portfolio {
    z-index: 2;
}
.main .news-block {
    position: fixed;
    bottom: 50px;
    left: 50px;
    z-index: 4;
}
.main .main-nav ul li span, .main .main-nav ul li.active span {
    opacity: 0;
    visibility: hidden;
    margin-right: -10px;
    transition: all .2s;
}
.main .main-nav ul li:hover span {
    opacity: 1;
    visibility: visible;
    margin-right: 0;
    transition: all .4s;
}
.main .main-nav ul li.active {
    padding-right: 45px;
    transition: all .4s;
}
.main .main-nav ul li {
    cursor: pointer;
    padding: 3px 30px 3px 0;
    transition: all .2s;
}
.main .main-nav ul li.active:after {
    width: 30px;
    transition: all .3s;
}
.main .main-nav ul li:after {
    content: '';
    transition: all .2s;
    display: block;
    width: 15px;
    height: 1px;
    position: absolute;
/*    background: #272727; */
    right: 0;
    margin-top: -9px;
}
.main .main-nav ul {
    list-style: none;
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    position: relative;
}
.main .main-nav {
    height: 100vh;
    position: absolute;
    display: table;
    right: 50px;
    top: 0;
    z-index: 4;
}
.fp-viewing-main .main .mainEffect {
    animation: mainEffectReverse .7s;
    z-index: 2;
    bottom: -50px;
    opacity: 0;
}
.fp-viewing-one.slide-down .main .mainEffect {
    animation: mainEffect .6s .1s;
    bottom: -90%;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
}
.main .mainEffect {
    position: absolute;
}
.main .mainEffect img {
    width: calc(100vw + 40px);
    left: -20px;
}
.fp-viewing-main .main .main-scene {
    opacity: 1;
    transition: opacity .3s .2s;
}
.fp-viewing-one .main .main-scene, .fp-viewing-two .main .main-scene, .fp-viewing-three .main .main-scene,
.fp-viewing-four .main .main-scene, .fp-viewing-five .main .main-scene, .fp-viewing-six .main .main-scene,
.fp-viewing-seven .main .main-scene{
    animation: none !important;
    opacity: 0;
    transform: none;
    transition: opacity .3s .2s;
    z-index: 0;
}
.fp-viewing-one .main .main-text {
    opacity: 0;
    transform: scale(1.1);
    transition: all .2s;
}
.fp-viewing-main .main .main-text {
    transform: scale(1);
    transition: all .2s .2s;
}
.wow-portfolio .wow-cloud-front img {
    height: calc(100vh + 100px);
    min-width: 100vw;
    transform: scale(1.2);
}
.wow-portfolio .wow-cloud-back img {
    max-width: 100%;
    width: 100vw;
    position: relative;
    transform: scale(.8);
    top: 80px;
}
.slide-down.fp-viewing-one .wow-portfolio .wow-cloud-front, .slide-down.fp-viewing-one .wow-portfolio .wow-cloud-back {
    /*animation: cloudTop .3s .4s;*/
    top: 0;
}
footer .pencil .close-button {
    padding: 32px;
    opacity: 1;
    visibility: visible;
    border-radius: 50%;
}
.touch .fp-viewing-main .wow-portfolio .wow-cloud-front, .touch  .fp-viewing-main .wow-portfolio .wow-cloud-back {
    z-index: 0;
}
.touch .main .main-text-mobile h2 {
    margin: 15px 0 0 0;
    padding: 0;
    display: block;
    font-size: 22px;
    line-height: 24px;
}
.touch .main .main-text-mobile h1 {
    color: #D52B1E;
    font-family: 'blblack';
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-size: 40px;
}
.main .main-text-mobile {
    display: none;
}
.touch .main .cloud-front-left {
    display: none;
}
.touch .main .main-text-mobile {
    left: 12%;
    top: 36%;
    opacity: 1;
    display: block;
    position: absolute;
    max-width: 1300px;
    min-width: 960px;
    z-index: 3;
    text-align: left;
    transition: opacity .3s;
}
.touch .main .main-text {
    display: none;
}
.fp-viewing-main .wow-portfolio .wow-cloud-front, .fp-viewing-main .wow-portfolio .wow-cloud-back {
    animation: opacityCloud 2s;
}
.wow-portfolio .wow-cloud-front {
    position: absolute;
    top: 0;
    z-index: 4;
}
.wow-portfolio .wow-cloud-back {
    position: absolute;
    top: 0;
    z-index: 4;
    width: 100vw;
}
.wow-cloud-effect img {
    width: 100%;
    opacity: 0;
}
.wow-cloud-effect {
    position: absolute;
    z-index: 7;
    transition: all .3s;
    width: 100vw;
}
.up-animation .wow-cloud-effect, .down-animation .wow-cloud-effect {
    position: absolute;
    z-index: 9;
    transform: scale(1);
}
.down-animation .wow-cloud-effect img {
    animation: slide-down .5s .2s linear;
}
.down-animation .wow-portfolio .wow-cloud-back img {
    animation: scaleBack .7s linear;
    transition: opacity 0s .3s;
}
.down-animation .wow-portfolio .wow-cloud-front img {
    animation: scaleFront .7s linear;
    transition: opacity 0s .3s;
}
.up-animation .wow-cloud-effect img {
    animation: slide-up .5s .2s linear;
}
.up-animation .wow-portfolio .wow-cloud-back img {
    animation: scaleBack-up .7s linear;
    transition: opacity 0s;
}
.up-animation .wow-portfolio .wow-cloud-front img {
    animation: scaleFront-up .7s linear;
    transition: opacity 0s;
}
.fp-viewing-main .wow-portfolio .wow-cloud-back img {
    opacity: 0;
}


.fp-viewing-main .wow-portfolio .wow-cloud-front img, .fp-viewing-main .wow-portfolio .wow-cloud-back img,
.fp-viewing-main .wow-portfolio .wow-cloud-front, .fp-viewing-main .wow-portfolio .wow-cloud-back {
    animation: none !important;
    transform: scale(1);
}

.main .wow-portfolio .wow-portfolio-item {
    opacity: 0;
}
.main .wow-portfolio .wow-portfolio-item.fp-completely {
    opacity: 1;
}
.down-animation .main .wow-portfolio .wow-portfolio-item.fp-completely {
    opacity: 0;
    animation: workUp .15s;
}
.down-animation .main .wow-portfolio .wow-portfolio-item.active {
    animation: portfolioDown .7s;
    opacity: 1;
}
.up-animation .main .wow-portfolio .wow-portfolio-item.fp-completely {
    animation: portfolioUp .6s;
    opacity: 0;
}
.up-animation .main .wow-portfolio .wow-portfolio-item.active {
    animation: workDown .75s;
    opacity: 1;
}
.fp-tableCell {
    display: table;
    text-align: center;
}
.fp-tableCell .wow-portfolio-item-block {
    display: table-cell;
    vertical-align: middle;
    width: 100vw;
    text-align: center;
}
.main .wow-portfolio .wow-portfolio-item img {
    margin-top: -200px;
}

.fp-viewing-one .mainEffect,
.fp-viewing-two .mainEffect,
.fp-viewing-three .mainEffect,
.fp-viewing-four .mainEffect,
.fp-viewing-five .mainEffect,
.fp-viewing-six .mainEffect,
.fp-viewing-seven .mainEffect {
    z-index: 0 !important;
    visibility: hidden;
}

.main .wow-portfolio .wow-portfolio-item-block img, .main .wow-portfolio .wow-portfolio-item-block div {
    cursor: pointer;
}
.wow-portfolio-item.active .wow-portfolio-item-block img,
.wow-portfolio-item.active .wow-portfolio-item-block div {
    transition: .3s !important;
}
.wow-portfolio-item.active {
    z-index: 9 !important;
}
.wow-portfolio-item-block:active img {
    transform: scale(0.98) !important;
    transition: scale .3s !important;
}

/* main portfolio */
.wow-portfolio-ajax-block.load {
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    transform: translateY(0%);
    transition: all .6s;
    visibility: visible;
    opacity: 1;
    z-index: 4;
}
body.main-page-open .wow-portfolio-ajax-block,
body.page-open .wow-portfolio-ajax-block {
    display: none;
}
.wow-portfolio-ajax-block {
    top: 0;
    width: 100vw;
    min-height: 100vh;
    position: absolute;
    background: #ffffff;
    transform: translateY(100%);
    z-index: 0;
}
.wow-portfolio-ajax-block .header-page .logo {
    display: none;
}
.wow-portfolio-ajax-block.done {
    overflow-x: scroll;
    width: 100vw;
    min-height: 100vh;
    height: 100%;
    z-index: 4;
    transform: translateY(0);
}
.wow-portfolio-ajax-block.hidden {
    transform: translateY(100%);
    z-index: 0;
    transition: all .45s;
}
.wow-portfolio-ajax .one-item-main-image img {
    width: 100vw;
}
.wow-portfolio-ajax .one-item-screen img {
    width: 100vw;
}
.wow-portfolio-ajax-block .page-loader.show {
    z-index: 2;
}
.wow-portfolio-ajax .header-page {
    position: fixed;
}
.wow-portfolio-ajax .one-item-main-image,
.wow-portfolio-ajax .one-item-mobile,
.wow-portfolio-ajax .one-item-quest,
.wow-portfolio-ajax .one-item,
.wow-portfolio-ajax .one-item-desc {
    background: #fff;
}
.about-text .part {
    width: 170px;
    display: inline-block;
    vertical-align: top;
}
.about-text p span {
    display: inline-block;
    vertical-align: top;
}
.fz {
    display: block;
    font-size: 16px;
    margin-top:30px;
    color: #878787;
    max-width: 700px;
    padding-right: 20px;
}
.fz a {
    color: #878787;
    text-decoration: underline;
}
.fz a:hover {
    text-decoration: none;
}
.brief-form .fz {
    margin-bottom: 150px;
}
.arrow-main {
    display: none;
}
html.mobile .cloud-scene div img, .mobile .main .cloud-scene .cloud-one img,
.mobile .main .cloud-scene .cloud-two img, .mobile .main .cloud-scene .cloud-three img {
    animation: cloud-stop .0s !important;
}
html.mobile body.page-open, html.mobile body.main-page-open {
    overflow-y: visible !important;
    overflow-x: hidden !important;
}
html.mobile .arrow-main {
    display: block;
}
.main-text h2.mobile {
    display: none;
}
html.overflow .works-item.done {
    position: fixed !important;
}
html.overflow .works-page.open, html.overflow {
    height: calc(100vh - 65px) !important;
    overflow: hidden !important;
}
.works-page-container {
    position: relative;
}
html.fixed, html.fixed .works-page.open, html.fixed .works-item.done,
html.fixed.ios .main,
html.fixed.ios body,
html.fixed.ios .menu,
html.fixed.ios .contacts-page,
html.fixed.ios .article-page,
html.fixed.ios .live-page,
html.fixed.ios .works-page {
     overflow: hidden !important;
     height: 10vh !important;
}



/* keyframes */
@keyframes cloud-stop {
    0% {
        transform: none;
    }
    100% {
        transform: none;
    }
}
@keyframes workDown {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }
    55% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes workUp {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes portfolioUp {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(.7);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes portfolioDown {
    0% {
        opacity: 0;
        transform: scale(.7);
    }
    55% {
        opacity: 0;
        transform: scale(.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes scaleBack {
    0% {
        transform: scale(1);
    }
    39% {
        transform: scale(3);
    }
    40% {
        transform: scale(.6);
    }
    55% {
        transform: scale(.6);
    }
    100% {
        transform: scale(.8);
    }
}
@keyframes scaleFront {
    0% {
        transform: scale(1);
    }
    39% {
        transform: scale(3);
    }
    40% {
        transform: scale(1);
    }
    55% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}
@keyframes slide-down {
    0% {
        transform: scale(1.6);
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: scale(3);
        opacity: 1;
    }
    100% {
        transform: scale(4.5);
        opacity: 0;
    }
}

@keyframes scaleBack-up {
    0% {
        transform: scale(.8);
    }
    39% {
        transform: scale(.4);
    }
    40% {
        transform: scale(1.2);
    }
    55% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(.8);
    }
}
@keyframes scaleFront-up {
    0% {
        transform: scale(1.2);
    }
    39% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.4);
    }
    55% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1.2);
    }
}
@keyframes slide-up {
    0% {
        transform: scale(4);
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: scale(2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
@keyframes cloudTop {
    0% {
        top: -100px;
        opacity: 1;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}
@keyframes opacityCloud {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes mainEffectReverse {
    0% {
        opacity: 1;
        bottom: -80%;
    }
    5% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        bottom: -25%;
        opacity: 0;
    }
}
@keyframes mainEffect {
    0% {
        bottom: -25%;
        opacity: 1;
        visibility: visible;
    }
    55% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        bottom: -80%;
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
@keyframes rotateRefresh {
    0% {
        transform: rotate(-30deg);
    }
    25% {
        transform: rotate(-60deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes stop {
    0% {
        transition: none;
    }
    100% {
        transition: none;
    }
}
@keyframes cloud-100 {
    0% {
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        transform: translateX(110%);
    }
}

@keyframes cloud-140 {
    0% {
        transform: translateX(-140%);
        opacity: 1;
    }
    100% {
        transform: translateX(110%);
    }
}
@keyframes cloud-one {
    0% {
        transform: translateX(15%);
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        transform: translateX(110%);
        opacity: 0;
    }
}
@keyframes cloud-two {
    0% {
        transform: translateX(-15%);
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}
@keyframes rightScreen {
    0% { right: 100px; }
    100% { right: 0; }
}
@keyframes elastic {
    0% { margin-top: -5px; padding-bottom: 5px; }
    25% {margin-top: -10px; padding-bottom: 10px; }
    50% { margin-top: -2px; padding-bottom: 2px; }
    75% { margin-top: -7px; padding-bottom: 7px; }
    100% { margin-top: -5px; padding-bottom: 5px; }
}
@keyframes right-left {
    0% {width: 90px;}
    10% {width: 80px;}
    20% {width: 70px;}
    30% {width: 60px;}
    40% {width: 50px;}
    50% {width: 55px;}
    60% {width: 60px;}
    70% {width: 55px;}
    80% {width: 50px;}
    90% {width: 50px;}
    100% {width: 50px;}
}
@keyframes bad-opacity {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes heart-fill {
    0% {
        width: 30px;
        opacity: 1;
    }
    100% {
        width: 100vw;
        opacity: 0;
        margin-top: -50vw;
        margin-left: -50vw
    }
}
@keyframes bounce {
    0% {transform: scale(1.05);}
    15% {transform: scale(1.1);}
    35% {transform: scale(1.05);}
    50% {transform: scale(.95);}
    80% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes away {
    0% { margin-top: -5px; margin-left: 5px; }
    25% {margin-top: -8px; margin-left: 8px; }
    50% { margin-top: 2px; margin-left: -2px; }
    75% { margin-top: -4px; margin-left: 4px; }
    100% { margin-top: -1px; margin-left: 1px; }
}
@keyframes footer-easing {
    0% {
        width: 60px;
        height: 60px;
        bottom: 0;
        right: 0;
    }
    100% {
        width: 800px;
        height: 800px;
        bottom: -350px;
        right: -350px;
    }
}
@keyframes elastic-close {
    0% { margin-top: -13px; }
    25% {margin-top: -4px;}
    50% { margin-top: -17px; }
    75% { margin-top: -10px; }
    100% { margin-top: -13px; }
}
@keyframes elastic-send {
    0% { left: 20px; }
    25% { left: 29px;}
    50% { left: 16px; }
    75% { left: 23px;}
    100% { left: 20px;  }
}
@keyframes elastic-arrow {
    0% { margin-right: 0; }
    25% { margin-right: -9px;}
    50% { margin-right: 4px; }
    75% { margin-right: -3px;}
    100% { margin-right: 0; }
}
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@-moz-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

/* media */
@media only screen and (min-width: 2110px) {
    .main .main-text h1 {
        font-size: 110px;
    }
    .main .main-text h2 {
        font-size: 80px;
    }
}
@media only screen and (max-width: 1920px) {
    .about-team .team-item {
        width: calc(33% - 84px);
    }
}
@media only screen and (max-width: 1440px) {
    .works-list-item {
        margin-bottom: 100px;
    }
    .main .wow-portfolio .wow-portfolio-item img {
        max-width: 650px;
        margin-top: -130px;
    }
    .main .wow-portfolio .wow-portfolio-item .wow-portfolio-item-header {
        font-size: 4vw;
        margin-top: -110px;
    }
    .main .wow-portfolio .wow-portfolio-item .wow-portfolio-item-desc {
        font-size: 1.7vw;
    }
    .live, .article, .like {
        margin-bottom: 10px;
    }
    .contacts-page-block .contacts-left-block.show {
        padding-top: 80px;
    }
    .menu-list li a {
        font-size: 72px;
    }
    .menu-right .live h2, .menu-right .article h2, .menu-right .like h2 {
        font-size: 18px;
    }
    .live-short, .article-short, .like-short {
        font-size: 15px;
        margin-top: 10px;
    }
    .menu-right .live h2:after, .menu-right .article h2:after, .menu-right .like h2:after {
        width: 50px;
    }
    .menu-right .live:hover h2:after, .menu-right .article:hover h2:after, .menu-right .like:hover h2:after {
        width: 20px;
    }
    .menu-right .article .icon, .menu-right .live .icon, .menu-right .like .icon .heart, .menu-right .like .icon .heart-fill {
        display: none;
    }
    .menu-right .like.active h2 {
        color: #D52B1E;
    }
    .live, .article, .like {
        margin-bottom: 15px;
    }
    .menu-right .like.active h2 i:before {
        content: '!';
        display: inline-block;
        font-style: normal;
    }
    .works-list-item {
        margin-bottom: 100px;
    }
}
@media only screen and (max-width: 1366px) {
    .menu-list li a {
        font-size: 72px;
    }
    .menu-right .live h2, .menu-right .article h2, .menu-right .like h2 {
        font-size: 18px;
    }
    .live-short, .article-short, .like-short {
        font-size: 15px;
        margin-top: 10px;
    }
    .menu-right .live h2:after, .menu-right .article h2:after, .menu-right .like h2:after {
        width: 50px;
    }
    .menu-right .live:hover h2:after, .menu-right .article:hover h2:after, .menu-right .like:hover h2:after {
        width: 20px;
    }
    .menu-right .article .icon, .menu-right .like .icon, .menu-right .live .icon {
        display: none;
    }
    .live, .article, .like {
        margin-bottom: 15px;
    }
    .post .post-left .post-left-text {
        padding-left: 10px;
    }
    .post .post-left .post-left-text .post-left-text-name {
        font-size: 22px;
    }
    .post .post-left .post-left-avatar {
        width: 50px;
        height: 50px;
    }
    .post .post-left .post-left-avatar img {
        width: 50px;
    }
    .post .post-left .post-left-text .post-left-text-name:after {
        width: 70px;
    }
    .post .post-left .post-left-text .post-left-text-position {
        font-size: 16px;
        margin-top: 10px;
        margin-left: 0;
    }
    .post .post-left .post-left-text .post-left-text-date {
        font-size: 14px;
    }
    .post .post-right p {
        font-size: 16px;
    }
    .article-page-list .article-page-header {
        font-size: 16px;
        padding: 15px 30px 10px 30px;
    }
    .article-author .article-author-avatar {
        width: 150px;
        height: 150px;
    }
    .article-author .article-author-avatar img {
        max-width: 150px;
        margin-top: -15px;
    }
    .article-content h1, .article-author .article-author-name  {
        font-size: 22px;
    }
    .article-content h1 {
        margin-top: 30px;
    }
    .article-content p {
        font-size: 16px;
    }
    footer .pencil.show .feedback-button span {
        font-size: 16px;
    }
    footer .pencil.show .feedback-button {
        right: 0;
        bottom: 170px;
    }
    footer .pencil.show .brief-button span {
        font-size: 16px;
    }
    footer .pencil.show .brief-button {
        right: 0;
        bottom: 93px;
    }
    footer .pencil .pencil-bg.show {
        width: 650px;
        height: 650px;
        bottom: -275px;
        right: -275px;
    }
    footer .pencil .pencil-bg.active {
        width: 300vw;
        height: 450vh;
        opacity: 1;
        bottom: -225vh;
        right: -150vw;
        border-radius: 50%;
        visibility: visible;
        background: #ffffff;
        position: fixed;
        transition: width .6s, height .6s, bottom .6s, right .6s;
        z-index: 7;
        cursor: default;
    }
    .brief-form .form-input label, .feedback-form .form-input label {
        font-size: 22px;
    }
    .brief-form .form-input input, .feedback-form .form-input input {
        font-size: 18px;
    }
    #form-brief .intro {
        font-size: 16px;
        margin-bottom: 30px;
    }
    .brief-form .form-input, .feedback-form .form-input {
        margin-top: 30px;
    }
    #form-brief .form-input span {
        margin-top: -5px;
    }
    #form-brief h1 {
        font-size: 60px;
    }
    #form-brief .form-input .checkbox, #form-brief .form-input .radio {
        font-size: 18px;
    }
    #form-brief .form-input .checkbox input:not(checked)  ~ span:before, #form-brief .form-input .checkbox input:not(checked) ~ span:after, #form-brief .form-input .checkbox input:checked ~ span:after {
        top: 5px;
    }
    #form-brief .form-input .radio input:not(checked)  ~ span:before {
        width: 20px;
        height: 20px;
    }
    #form-brief .form-input .radio {
        padding-left: 35px;
    }
    .main .wow-portfolio .wow-portfolio-item img {
        max-width: 600px;
    }
    .main .wow-portfolio .wow-portfolio-item .wow-portfolio-item-header {
        font-size: 4vw;
        margin-top: -110px;
    }
    .main .wow-portfolio .wow-portfolio-item .wow-portfolio-item-desc {
        font-size: 1.7vw;
    }
    .contacts-page-block .contacts-left-block.show {
        padding-top: 125px;
        padding-left: 100px;
    }
    .contacts-left-block h1 {
        font-size: 52px;
    }
    .contacts-left-block span, .about-awards .about-awards-item span,
    .about-text p, .about-team .team-item .team-item-position,
    .about-services p, .about-services span,
    .awards-block .awards-block-name .awards-block-name-counter,
    .awards-block .awards-block-list li .awards-block-item span {
        font-size: 16px;
    }
    .contacts-left-block h2 {
        font-size: 22px;
        margin-top: 30px;
    }
    .contacts-page-block .contacts-left-block {
        width: calc(60vw - 100px);
    }
    .about-awards .view-all h2, .about-awards .view-all div:hover h2, .about-awards .view-all div:hover svg, .about-text h2, .about-team h2, .about-services h2, .about-review h2, .about-awards-list h2 {
        font-size: 22px;
    }
    .about-awards .view-all svg {
        margin-left: 75px;
        margin-top: -17px;
    }
    .about-awards {
        padding: 130px 50px 40px 50px;
    }
    .about-awards .about-awards-item svg {
        height: 100px;
    }
    .about-awards .about-awards-item h3 {
        font-size: 21px;
    }
    .about-awards .about-awards-item {
        margin: 0 25px;
    }
    .about-awards .view-all {
        margin: 50px auto 0 auto;
    }
    .about-text {
        padding: 60px 10%;
    }
    .about-team {
        padding: 50px calc(10% - 40px);
    }
    .about-team h2 {
        margin-bottom: 0;
        padding: 0 47px;
    }
    .about-team .team-item .team-item-name {
        font-size: 22px;
    }
    .about-team .team-item .team-item-position {
        margin-top: 5px;
    }
    .about-team .team-item {
        margin: 45px 40px 20px 40px;
    }
    .about-services, .about-awards-list {
        padding: 50px 10%;
    }
    .about-services h1 {
        font-size: 50px;
    }
    .about-review {
        padding: 50px 10% 50px 10%;
    }
    .slider ul li .about-review-photo {
        width: 20%;
    }
    .slider ul {
        margin: 40px 0 0 0;
    }
    .slider {
        margin-top: 20px;
    }
    .slider ul li .about-review-text {
        width: 75%;
        margin-left: 2%;
    }
    .slider ul li .about-review-text .about-review-text-name {
        font-size: 22px;
        margin-top: 6px;
    }
    .slider ul li .about-review-text .about-review-text-position {
        font-size: 15px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .slider ul li .about-review-text .about-review-text-text {
        font-size: 16px;
        line-height: 25px;
    }
    .awards-block {
        margin: 40px 0 40px;
    }
    .awards-block .awards-block-icon svg {
        width: 50px;
    }
    .awards-block .awards-block-name .awards-block-name-text {
        font-size: 20px;
    }
    .awards-block .awards-block-list {
        margin: 20px 0 0 0;
    }
    .awards-block .awards-block-list li .awards-block-item {
        font-size: 20px;
    }
    .awards-block .awards-block-list li .awards-block-item span {
        margin-top: 0;
    }
    .awards-block .awards-block-name {
        margin-top: 20px;
        margin-left: 15px;
    }
    .awards-block .awards-block-list li .awards-block-site {
        font-size: 18px;
        margin-top: 8px;
    }
    .works-page-content .works-header h1 {
        font-size: 52px;
    }
    .works-page-content .works-header span {
        font-size: 16px;
    }
    .works-page-container {
        margin-top: 120px;
    }
    .works-list-item .works-list-item-text {
        margin-left: 2%;
        margin-top: 8%;
        max-width: 340px;
    }
    .works-list-item-text h2 {
        font-size: 22px;
        margin-bottom: 10px;
    }
    .works-list-item-text span {
        font-size: 19px;
    }
    .works-list-item {
        padding: 0 150px 30px 150px;
        margin-bottom: 100px;
    }
    .works-list-item:nth-child(even) .works-list-item-text {
        right: 50px;
    }
    .one-item-main-image h1 {
        font-size: 90px;
        letter-spacing: 4px;
    }
    .one-item .one-item-number {
        padding: 30px 10%;
    }
    .one-item .one-item-number .number {
        font-size: 56px;
        margin-right: 30px;
    }
    .one-item .one-item-number .number-desc {
        font-size: 18px;
    }
    .one-item-desc {
        padding: 80px 10%
    }
    .one-item-desc h2 {
        font-size: 22px;
    }
    .one-item-desc span {
        font-size: 18px;
        line-height: 30px;
    }
    .one-item-quest h2 {
        font-size: 52px;
        margin-top: 20px;
    }
    .one-item-quest span {
        font-size: 18px;
        line-height: 30px;
        margin-top: 20px;
    }
    .one-item-quest .one-item-task {
        padding: 0 5% 100px 10%;
    }
    .one-item-studio .studio-avatar {
        margin-right: 30px;
    }
    .one-item-studio {
        padding: 60px 10%;
    }
    .one-item-studio .studio-text h3 {
        font-size: 22px;
    }
    .one-item-studio .studio-text h3:after {
        margin-top: 4px;
        margin-bottom: 4px;
    }
    .one-item-studio .studio-text span {
        font-size: 15px;
        margin-bottom: 8px;
    }
    .one-item-studio .studio-text {
        font-size: 16px;
        line-height: 24px;
    }
    .one-item-mobile .one-item-mobile-header {
        left: 390px;
        font-size: 52px;
        line-height: 56px;
        top: 0;
    }
    .one-item-mobile .one-item-mobile-screen {
        top: 200px;
    }
    .one-item-mobile .one-item-mobile-img {
        margin: 270px auto 300px;
    }
    .one-item-link {
        padding: 30px 10%;
    }
    .one-item-link a {
        font-size: 50px;
    }
}
@media only screen and (max-width: 1146px) {
    .menu-list {
        margin: 0 0 0 15%;
    }
    .menu.open .menu-right .menu-container {
        margin-left: 14%;
    }
    .menu-right .menu-container {
        min-width: 300px;
    }
    .post .post-left {
        width: calc(25vw - 20px);
        padding-left: 20px;
    }
    .pencil-bg.active .feedback-form form {
        padding-left: 8%;
    }
    .pencil-bg.active #form-brief {
        margin-top: 100px;
    }
    #form-brief {
        margin-left: 8%;
    }
}
@media only screen and (max-width: 940px) {
    .pencil-bg.active .feedback-form form {
        padding-left: 4%;
    }
    .brief-form .form-input, .feedback-form .form-input {
        margin-top: 10px;
    }
    .brief-form .form-input, .feedback-form .form-input {
        margin-bottom: 20px;
        max-width: 90%;
    }
}
@media only screen and (max-width: 820px) {
    .one-item-mobile .one-item-mobile-img {
        margin: 170px 30px 100px 30px;
        width: calc(100% - 60px);
        text-align: center;
        left: 0;
        max-width: 100%;

    }
    .one-item-mobile .one-item-mobile-img img {
        margin: 0;
        padding-top: 30px;
        max-width: 100%;
    }
    .one-item-mobile .one-item-mobile-header {
        font-size: 32px;
        left: 0;
        line-height: 35px;
    }
    .one-item-mobile .one-item-mobile-screen:after {
        display: none;
    }
    .one-item-mobile .one-item-mobile-screen {
        position: relative;
        bottom: 0;
        right: 0;
        text-align: left;
        margin: 0 30px 30px 30px;
        height: auto;
        width: calc(100% - 60px);
    }
}
@media only screen and (max-width: 720px) {
    .logo-a {
    padding: 0em 0em;
    }
    footer .pencil, footer .pencil:hover {
        bottom: 20px;
        right: 20px;
    }
    footer .pencil.show .close-button {
        bottom: -30px;
    }
    footer .pencil.show .brief-button {
        bottom: 73px;
    }
    footer .pencil.show .feedback-button {
        bottom: 150px;
    }
    .main .main-scene {
        transform: none !important;
    }
    header, .header-page {
        padding: 30px;
        width: calc(100% - 60px);
    }
    .main .main-nav {
        height: auto;
    }
    .main .main-text {
        left: 12%;;
        top: 36%;
    }
    .main .main-nav ul li span, .main .main-nav ul li.active span {
        opacity: 0;
        width: 1px;
        overflow: hidden;
        display: block;
    }
    .main .main-text h1 {
        font-size: 52px;
    }
    .main-text h2.no-mobile {
        display: none;
    }
    .main-text h2.mobile {
        display: block;
        font-size: 26px;
        line-height: 34px;
        margin-top: 20px;
    }
    .main .news-block {
        display: none;
    }
    .menu.open .page-name {
        margin-left: 60px;
    }
    .page-name {
        margin-top: 37px;
    }
    .prev-name {
        display: none;
    }
    .main .mount img {
        width: calc(180vw + 40px);
        left: -40vw;
    }
    .logo-a {
        margin-left: -15px;
    }
    .fp-viewing-main .main .mainEffect {
        display: none;
    }
    .arrow-main path:first-child {
        animation: fadeOut linear .6s;
        animation-iteration-count: infinite;
    }
    .arrow-main path:last-child {
        animation: fadeIn linear .6s;
        animation-iteration-count: infinite;
    }
    .arrow-main {
        position: absolute;
        bottom: 35px;
        left: 30px;
        z-index: 2;
    }
    .menu-left {
        width: 100vw;
        display: block;
    }
    .menu-right {
        width: 100vw;
        height: 38vh;
        top: -38vh;
        background: transparent;
        display: inline-block;
        vertical-align: top;
        position: relative;
        z-index: 2;
        margin-left: 12%;
        transition: all 0.2s;
        opacity: 0;
    }
    .menu.open .menu-right {
        opacity: 1;
        transition: opacity .6s .9s;
    }
    .menu-list {
        margin: -34% 0 0 12%;
    }
    .menu-list li a {
        font-size: 42px;
    }
    .menu.open .menu-right .menu-container {
        margin-left: 0;
        width: 100%;
        display: block;
    }
    .live-short, .article-short, .like-short {
        display: none;
    }
    .menu-right .live h2, .menu-right .article h2, .menu-right .like h2 {
        margin-top: 5px;
    }
    .menu-right .live h2:after, .menu-right .article h2:after, .menu-right .like h2:after {
        display: none;
    }
    .hamburger-arrow:before {
        display: none;
    }
    .contacts-page-block .contacts-right-block {
        display: none;
    }
    .contacts-page-block .contacts-left-block.show {
        padding-top: 110px;
        padding-left: 30px;
        width: 100%;
    }
    .contacts-left-block h1 {
        font-size: 40px;
    }
    .social a {
        margin-right: 15px;
    }
    .page-open .page-name, .main-page-open .page-name {
        margin-left: 55px;
    }
    .main .cloud-scene {
        display: none;
    }
    .main .wow-portfolio .wow-portfolio-item img {
        width: 100%;
        margin-top: -20px;
    }
    .main .wow-portfolio .wow-portfolio-item .wow-portfolio-item-header {
        font-size: 30px;
    }
    .main .wow-portfolio .wow-portfolio-item .wow-portfolio-item-desc {
        max-width: 80%;
        font-size: 22px;
    }
    .wow-portfolio .wow-cloud-back {
        top: 30%;
    }
    .touch .main .wow-portfolio {
        z-index: 0;
    }
    .wow-portfolio-item.active {
        display: block;
    }
    .wow-portfolio-item {
        display: none;
    }
    .menu-right .like h2 {
        display: none;
    }
    .menu-right .like  {
        position: fixed;
        bottom: 80px;
        left: 80px;
    }
    .menu-right .like .icon {
        display: block;
    }
    .menu {
        overflow: hidden;
    }
    .menu-list li {
        padding: 6px 0;
    }
    .about-awards {
        padding: 60px 20px 40px 20px;
    }
    .about-awards .about-awards-item svg {
        height: 45px;
    }
    .about-awards .about-awards-item {
        max-width: 30%;
        margin-top: 40px;
    }
    .about-awards .about-awards-item h3 {
        font-size: 18px;
    }
    .work-with-me-baby .pointer-img {
        display: none;
    }
    .work-with-me-baby .pointer {
        font-size: 16px;
        margin-right: 0;
    }
    .menu {
        width: 0;
        height: 0;
    }
    .menu.open {
        width: 100vw;
        height: 100vh;
    }
    .hamburger {
        right: 25px;
    }
    .menu-icon-wrapper svg {
        left: -42px;
    }
    .ios .main, .ios body, .ios .menu, .ios .contacts-page, .ios .article-page, .ios .live-page, .ios .works-page {
        height: calc(100vh - 65px);
    }
    .ios .live-page.open, .ios .works-page.open, .ios .live-page.open {
        height: auto;
    }
    .page-open .hamburger-arrow, .main-page-open .hamburger-arrow {
        right: 25px;
    }
    .about-team h2 {
        padding: 0 37px;
    }
    .about-team .team-item {
        width: calc(50% - 50px);
        margin: 45px 25px 20px 25px;
    }
    .about-team .team-item:nth-child(odd) {
        margin: 45px 25px 20px 0;
    }
    .about-team .team-item .team-item-name {
        font-size: 20px;
    }
    .about-services h1 {
        font-size: 30px;
    }
    .touch .control_next {
        display: none;
    }
    .touch .slider ul li .about-review-photo {
        display: block;
    }
    .touch .slider ul li .about-review-text {
        width: 100%;
    }
    .touch .slider li {
        display: none;
    }
    .touch .slider li:nth-child(1) {
        display: block;
    }
    .about-review-text-text .about-review-video, .about-review-text-text .about-review-audio {
        margin-top: 18px;
    }
    .wow-portfolio-item:nth-child(1) {
        opacity: 1 !important;
        display: block;
        height: 100vh;
    }
    .live-page.open .live-page-right, .article-page.open .article-page-right {
        width: 100vw;
        margin-left: 0;
    }
    .post .post-left {
        width: 100vw;
        display: block;
        margin-left: 0;
        padding-left: 30px;
    }
    .post .post-right {
        padding-left: 35px;
        padding-right: 35px;
        width: calc(100vw - 70px);
        margin-top: 20px;
    }
    .post .post-right p img, .post .post-right p {
        max-width: 100%;
    }
    .post {
        margin-bottom: 40px;
    }
    .works-page-content .works-header {
        padding: 100px 25px 0 25px;
    }
    .works-page-content .works-header h1 {
        font-size: 30px;
    }
    .works-list-item {
        padding: 0 25px 30px 25px;
    }
    .works-list-item.hide {
        padding: 0 25px 30px 25px;
    }
    .works-list-item .works-list-item-cover {
        max-width: 100%;
        margin-left: 0;
    }
    .works-list-item .works-list-item-cover img{
        -webkit-box-shadow: 0 20px 40px 20px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 20px 40px 20px rgba(0,0,0,0.1);
        box-shadow: 0 20px 40px 20px rgba(0,0,0,0.1);
    }
    .works-list-item .works-list-item-text {
        max-width: 85%;
        margin-top: 50%;
    }
    .works-list-item:nth-child(1)  {
        margin-top: 50px;
    }
    .works-list-item:nth-child(1) .works-list-item-cover {
        top: 0;
    }
    .works-page-container {
        margin-top: 30px;
    }
    .works-list-item:nth-child(even) .works-list-item-text {
        right: 20px;
    }
    .works-list-item.active .works-list-item-cover {
        margin-left: 0;
        left: 0;
    }
    .works-item.done .page-name {
        margin-left: 55px;
    }
    .hamburger .menu-name {
        display: none;
    }
    .one-item-main-image h1 {
        font-size: 32px;
    }
    .one-item .one-item-number {
        padding: 30px;
    }
    .one-item .one-item-number .number {
        font-size: 32px;
        margin-right: 0;
        margin-bottom: 5px;
    }
    .one-item .one-item-number .number-desc {
        font-size: 16px;
        text-align: center;
    }
    .one-item-desc {
        padding: 50px 30px;
    }
    .one-item-desc h2 {
        font-size: 20px;
        text-align: left;
    }
    .one-item-desc span {
        font-size: 16px;
        line-height: 23px;
        text-align: left;
    }
    .one-item-quest {
        padding: 0;
    }
    .one-item-quest .one-item-task {
        padding: 0 30px 40px 30px;
        width: calc(100% - 60px);
    }
    .one-item-quest h2 {
        font-size: 32px;
        margin-top: 10px;
    }
    .one-item-quest span {
        margin-top: 10px;
        font-size: 16px;
        line-height: 23px;
    }
    .one-item-quest .one-item-idea {
        padding: 0 30px 40px 30px;
        width: calc(100% - 60px);
    }
    .one-item-studio .studio-avatar {
        margin-right: 25px;
        width: 100px;
        height: 100px;
    }
    .one-item-studio {
        padding: 40px 30px;
    }
    .one-item-studio .studio-text {
        font-size: 16px;
        line-height: 23px;
        max-width: 100%;
        margin-top: 10px;
    }
    .one-item-link a {
        font-size: 26px;
    }
    .wow-portfolio-ajax-block {
        display: none;
    }
    .wow-portfolio-ajax-block.load, .wow-portfolio-ajax-block.done {
        display: block;
    }
    .works-list-item.active:nth-child(odd) .works-list-item-cover {
        animation: none;
    }
    .one-item-ajax {
        overflow-y: scroll;
        position: fixed;
        z-index: 5;
    }
    html.overflow {
        overflow: hidden !important;
    }
    #form-brief h1 {
        font-size: 28px;
    }
    .article-page-container {
        padding-left: 20px;
        width: calc(100vw - 20px);
    }
    .article-page.open .article-page-list {
        padding: 35px 20px 20px 20px;
        width: calc(100vw - 40px);
        margin-left: 0;
        position: relative;
    }
    .article-page-list .article-page-header.active:after,
    .article-page-list .article-page-header.active:before,
    .article-page-list .article-page-header .article-page-date {
        display: none;
    }
    .article-page-list .article-page-header {
        padding: 10px 0;
    }
    .article-page-list .article-page-header {
        visibility: hidden;
        opacity: 0;
        height: 0;
        overflow: hidden;
        padding: 0;
    }
    .article-page-list .article-page-header.active:after {
        width: 15px;
        height: 15px;
        background: transparent;
        display: block;
        right: 10px;
        z-index: 2;
        top: 7px;
        left: auto;
        content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='8652.415 995 23.213 28.629'> <path id='arrowDown' class='cls-1' d='M-6801.979,28.629a.992.992,0,0,1-.706-.294l-10.607-10.605a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l8.878,8.878V1a1,1,0,0,1,1-1,1,1,0,0,1,1,1V25.235l8.919-8.919a1,1,0,0,1,1.414,0,1,1,0,0,1,0,1.414l-10.605,10.605a1,1,0,0,1-.708.294Z' transform='translate(15466 995)'></path></svg>");
    }
    .article-page-list .article-page-header.active {
        display: block;
        visibility: visible;
        opacity: 1;
        height: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
        overflow: visible;
    }
    .article-page-list .article-page-header.active span {
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 20px;
        overflow: hidden;
        display: block;
    }
    .article-page-right {
        padding-top: 120px;
    }
    .article-page-list.show {
        margin-top: 35px;
        transition: margin-top 0s !important;
    }
    .article-page-list {
        transition: margin-top 0s !important;
    }
    .article-page.open .article-page-container {
        padding-top: 50px;
    }
    .article-page-list .article-page-header.active span {
        border: 1px solid #d6d6d6;
        background: #ececec;
        padding: 5px 30px 5px 10px;
    }
    .article-page-list.show .article-page-header {
        visibility: visible;
        opacity: 1;
        height: 34px;
        padding: 10px;
        text-overflow: ellipsis;
        background: #ececec;
        border-right: 1px solid #d6d6d6;
        border-left: 1px solid #d6d6d6;
    }
    .article-page-list.show .article-page-header.active span {
        border-bottom: none;
        border-left: none;
        border-right: none;
        padding-bottom: 20px;
    }
    .article-page-list.show .article-page-header:nth-last-child(1) {
        border-bottom: 1px solid #d6d6d6;
    }
    .article-page-list.show .article-page-header.active {
        padding: 0;
        position: absolute;
        top: 0;
        width: calc(100% - 42px);
    }
    footer .pencil.show .close-button {
        transition: all .3s .2s !important;
    }
    .loader .percentage {
        position: relative;
        margin-top: 40vh;
        right: auto;
        bottom: auto;
    }
    .one-item-mobile-img .one-item-mobile-header {
        margin-top: -60px;
    }
    .one-item-mobile .one-item-mobile-img {
        border: 0;
        margin: 170px auto 300px;
    }
    .one-item-mobile .one-item-mobile-screen {
        margin-top: -150px;
    }
    .works-list-item {
        margin-bottom: 200px;
    }
}

/* 15.08 ru version */
footer .eng a:active {
    transform: scale(0.98);
}
footer .eng a:hover {
    color: #D52B1E;
    transition: all .2s;
}
footer .eng a {
    color: #878787;
    text-decoration: none;
    transition: all .2s;
    display: block;
}
body.open footer .eng {
    opacity: 1;
    left: 50px;
    transition: all .3s .6s;
}
footer .eng, body.main-page-open footer .eng, body.page-open footer .eng {
    position: absolute;
    z-index: 3;
    bottom: 50px;
    left: 50px;
    opacity: 0;
    transition: all .2s;
}

/* personal css */

body {
    background-color: #87CEEB;
    color: #650000;
}

.main .main-text h1 {
    font-family: 'nastaliq';
    margin-left: 14%;
    line-height: 2em;
}

.live-short, .article-short, .like-short {
    direction: rtl;
}

.menu-right .live h2, .menu-right .article h2, .menu-right .like h2 {
    direction: rtl;
}

.menu-right .live h2, .menu-right .article h2, .menu-right .like h2 {
    margin-right: 6em;
    font-family: 'nastaliq';
}

.hamburger {
    display: none;
}

.main-text h2.no-mobile {
    display: block !important;
}

.main .news-block {
    display: none !important;
}

.main .main-nav {
    display: inline-table !important;
    left: 50px;
    right: auto;
    margin-top: 20em;
    height: auto;
}

.logo-a {
    padding: 0.1em 14.5em;
}

.main .main-text {
    left: 14%;
    top: 45%;
}

.main .main-text h2 {
    font-weight: inherit;
    font-size: 3em;
}

.main .main-nav ul {
    list-style: outside;
}

footer .pencil {
    left: 50px;
    right: auto;
    top: 15em;
    bottom: auto;
}

.subtitle {
    position: absolute;
    z-index: 5;
}

.subtitle-a {
    padding-bottom: 10px;
    margin-left: -10px;
    margin-top: -5px;
    width: 18px;
    display: inline-block;
}

@media only screen and (max-width: 720px) {
    .logo-a {
        padding: 0em 0em;
    }
    .main .main-text h1 {
        margin-left: 4%;
    }