/* webdeexito */

/* start css */

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #1F1A17;
    padding: 0;
    margin: 0;
}

body.scrollable {
    overflow: visible;
}

* {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

section {
    position: relative;
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: 1170px;
    margin: auto;
    display: flex;
}

.no-transition {
    transition: none !important;
}

.hidden {
    display: none;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-600 {
    animation-delay: 0.6s;
}

.delay-800 {
    animation-delay: 0.8s;
}

.delay-1000 {
    animation-delay: 1s;
}

.delay-1200 {
    animation-delay: 1.2s;
}

.main {
    height: 100vh;
    padding: 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main .pp-tableCell {
    display: flex;
    flex-direction: column;
}

header {
    font-size: 14px;
    color: #ccc;
    font-weight: 600;
    display: flex;
    margin: -18px 0 0 0;
}

.header-content {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
}

.sticky-header {
    width: 100%;
    color: #1a1a1a;
    padding: 30px 40px 10px 40px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    transform: translateY(-100px);
    transition: 0.8s;
}

.sticky-header.blue {
    background: #F0F5FB;
}

.sticky-header.blue .menu.active {
    transform: translateY(100px);
}

.sticky-header.active {
    transform: translateY(0);
}

.sticky-header.dark .header-btn:hover {
    color: #1a1a1a;
}

.sticky-header.dark header {
    color: #1a1a1a;
}

.sticky-header.dark .phone span {
    color: #1a1a1a;
}

.sticky-header.dark .place {
    background: url(img/place-dark-icon.svg) no-repeat;
}

.sticky-header.dark .menu-btn-item {
    background: #1a1a1a;
}

.sticky-header.dark .menu-btn-content:not(.active):hover {
    color: #1a1a1a;
}

.place {
    line-height: 24px;
    background: url(img/place-icon.svg) no-repeat;
    padding: 2px 0 0 32px;
    margin: 0 32px 0 0;
    transition: 0.4s;
}

.place:hover {
    color: #fff;
    transition: 0.4s;
}

.phone {
    line-height: 24px;
    ;
    background: url(img/phone-icon.svg) no-repeat;
    display: flex;
    flex-direction: column;
    padding: 0 0 0 34px;
    margin: 0 24px 0 0;
    transition: 0.4s;
}

.phone:hover {
    color: #fff;
    transition: 0.4s;
}

.phone span {
    font-size: 22px;
    color: #fff;
}

.header-btn {
    height: 50px;
    font-size: 12.8px;
    font-weight: 600;
    line-height: 46px;
    text-transform: uppercase;
    border: 2px solid #1C93F9;
    border-radius: 4px;
    padding: 0 20px;
    margin: 0 32px 0 0;
    position: relative;
    transition: 0.6s;
    cursor: pointer;
}

.header-btn:hover {
    color: #fff;
    border: 2px solid #ffffff00;
}

.new {
    font-size: 10px;
    color: #fff;
    font-weight: 600;
    line-height: 16px;
    text-transform: uppercase;
    background: #00cc7e;
    border-radius: 4px;
    padding: 0 6px;
    position: absolute;
    top: -10px;
    right: 10px;
}

.header-btn::before, .header-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.draw {
    transition: color 0.25s;
}

.draw::before, .draw::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
}

.draw::before {
    top: -2px;
    left: -2px;
}

.draw:hover::before, .draw:hover::after {
    width: 100%;
    height: 100%;
}

.meet::after {
    top: -2px;
    left: -2px;
}

.meet:hover::before {
    border-top-color: #1C93F9;
    border-right-color: #1C93F9;
    transition: width 0.4s ease-in-out, height 0.4s ease-in-out 0.4s;
}

.meet:hover::after {
    border-bottom-color: #1C93F9;
    border-left-color: #1C93F9;
    transition: height 0.4s ease-in-out, width 0.4s ease-in-out 0.4s;
}

.menu-btn-content {
    display: flex;
    padding: 20px 0;
    cursor: pointer;
    position: relative;
    z-index: 9;
    transition: 0.4s;
}

.menu-btn-content.active {
    color: #171412;
}

.menu-btn-content:not(.active):hover {
    color: #fff;
    text-shadow: 0 0 4px #ffffff80;
}

.menu-btn-content:hover .menu-btn-item:first-child {
    width: 50%;
    transform: translateY(4.8px) rotate(45deg);
}

.menu-btn-content:hover .menu-btn-item:nth-child(2) {
    width: 0;
    opacity: 0;
}

.menu-btn-content:hover .menu-btn-item:last-child {
    width: 50%;
    transform: translateY(-4px) rotate(-45deg);
}

.menu-btn {
    width: 24px;
    height: 20px;
    position: relative;
}

.menu-btn-text {
    font-size: 12.8px;
    line-height: 20px;
    text-transform: uppercase;
    margin: 0 10px 0 0;
}

.menu-btn-item {
    width: 100%;
    height: 3px;
    background: #fff;
    position: absolute;
    transition: 0.6s;
}

.menu-btn-content.active .menu-btn-item {
    background: #171412;
}

.menu-btn-item:first-child {
    top: 0;
}

.menu-btn-item:nth-child(2) {
    top: 8px;
}

.menu-btn-item:last-child {
    top: 16px;
}

.menu-btn-content.active .menu-btn-item:first-child {
    transform: translateY(8px) rotate(45deg);
}

.menu-btn-content.active .menu-btn-item:nth-child(2) {
    opacity: 0;
}

.menu-btn-content.active .menu-btn-item:last-child {
    transform: translateY(-8px) rotate(-45deg);
}

.menu .menu-btn-content {
    position: absolute;
    top: 12px;
    right: 40px;
}

.page-section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 40px 0 0 0;
}

.page-section .ysr-item {
    width: 33%;
    height: 180px;
    margin: 0 0 20px 0;
}

.page-section .ysr-item-img img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    opacity: 0.8;
}

.page-section .ysr-item-header {
    padding: 0 40px 0 0;
}

.tac {
    text-align: center;
}

.main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    perspective: 100vw;
}

.main-content h1 {
    max-width: 1080px;
    font-size: 52px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(-75deg, #ffffff 0%, #ffffff 40%, #808080 50%, #ffffff 60%, #ffffff 100%);
    background-position: 0;
    background-size: 180%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 4vh 0 0 0;
    clip-path: polygon(0 0%, 0 0, 10% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0%, 0 0, 10% 100%, 0% 100%);
    animation: headerBg 10s linear;
}

.main-content h1.active {
    clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%);
    transition: 1.4s;
}

@keyframes headerBg {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 400%;
    }
}

.main-sep {
    width: 100px;
    height: 2px;
    background: #D8D8D8;
    margin: 4vh 0;
    opacity: 0.4;
    transform: translateY(-10px);
}

.main-sep.active {
    transform: translateX(0);
    transition: 0.8s;
}

.main-text {
    font-size: 28px;
    color: #00CC7E;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-20px);
}

.main-text.active {
    opacity: 1;
    transform: translateY(0);
    transition: 0.8s;
}

.main-calc-btn-content {
    padding: 80px;
    opacity: 0;
    transform: translateY(-20px);
    transform-style: preserve-3d;
    cursor: pointer;
}

.main-calc-btn-content.active {
    opacity: 1;
    transform: translateY(0);
    transition: 0.8s;
}

.main-calc-btn {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    line-height: 58px;
    text-transform: uppercase;
    background: url(img/check-icon.svg) no-repeat 24px 50% #1C93F9;
    border-radius: 4px;
    padding: 0 24px 0 62px;
    transform-style: preserve-3d;
    transition: 0.6s;
    cursor: pointer;
}

.main-calc-btn-content:hover .main-calc-btn {
    box-shadow: 0 8px 8px -4px #1C93F9bf;
    transform: scale(1.1);
    transition: 0.6s;
}

.main-calc-btn-text {
    display: block;
    transform: translateZ(0);
    transition: 0.4s;
}

.main-calc-btn-content:hover .main-calc-btn-text {
    text-shadow: 2px 2px 8px #00000033;
    transform: translateZ(20px);
    transition: 0.4s;
}

.main-offer {
    width: 934px;
    height: 130px;
    background: url(img/offer-bg.png) no-repeat;
}

.scroll-icon {
    position: absolute;
    bottom: 0;
    cursor: pointer;
    animation: upDown 2s infinite;
}

@keyframes upDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.video-cover-blur-content {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px #000000bf inset;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -8;
    overflow: hidden;
}

.video-cover-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: brightness(0.4);
    z-index: -9;
}

.video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#footer-form {
    color: #fff;
}

.preloader {
    width: 100%;
    height: 100%;
    background: url(img/preloader.svg) no-repeat 50% #333;
    background-size: 200px;
    clip-path: polygon(-40% 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(-40% 0, 100% 0, 100% 100%, 0 100%);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
}

.preloader.active {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transition: 0.8s ease-out;
}

@media (max-width: 1440px) {
    .header-btn {
        margin: 0 20px 0 0;
    }
    .main-calc-btn-content {
        padding: 40px;
    }
}

/* start css */

.your-site {
    height: 100vh;
    display: flex;
    background: #fff;
    padding: 140px 0 80px 0;
}
.your-site .container {
    max-width: 1200px;
}

.your-site-left {
    width: 50%;
}
.your-site-center {
    width: 50%;
}

.ysl-header {
    max-width: 470px;
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.ysl-text {
    max-width: 470px;
    font-size: 18px;
    color: #4d4d4d;
    font-weight: 400;
    line-height: 28px;
}

.your-site-right {
    width: 50%;
}

.ysr-header {
    font-size: 14px;
    color: #73849A;
    font-weight: 400;
    line-height: 24px;
    text-transform: uppercase;
    padding: 0 0 0 60px;
    margin: 0 0 20px 0;
}

.ysr-item {
    display: flex;
    margin: 0 0 4.4vh 0;
}
.ysr-item:hover .ysr-item-header {
    color: #1c93f9;
}

.ysr-item-img {
    padding: 0 18px 0 0;
}
.ysr-item-img img {
    width: 42px;
    height: auto;
}

.ysr-item-header {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 4px 0;
    transition: 0.4s;
}
.ysr-item-text {
    max-width: 470px;
    font-size: 14px;
    color: #5a7087;
    line-height: 24px;
}
.your-site-img {
    width: 50vw;
    opacity: 0.5 !important;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.discuss {
    height: 100vh;
    background: #F0F5FB;
    padding: 40px 0 0 0;
}

.discuss-left {
    width: 50%;
    max-width: 420px;
}

.dl-header {
    width: 130%;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.dl-bubble-content {
    display: flex;
    flex-direction: column;
    margin: 100px 0;
}

.bubble-gray {
    width: 226px;
    height: 72px;
    font-weight: 600;
    text-align: center;
    background: url(img/graybubble-2.svg) no-repeat;
    display: flex;
    align-items: center;
    padding: 0 30px 10px 34px;
    margin: 0 0 32px 0;
}

.bubble-green {
    width: 276px;
    height: 72px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 21px;
    background: url(img/greenbubble.svg) no-repeat;
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin: 0 0 0 auto;
}

.input-content {
    background: url(img/ic-phone-icon.svg) no-repeat 4px 0;
    border-bottom: 2px solid #1F1A17;
    display: flex;
    padding: 0 0 10px 38px;
}

.input-content input {
    width: 80%;
    font-size: 16px;
    line-height: 21px;
    background: none;
    border: none;
    -webkit-appearance: none;
}

.input-content input:focus {
    outline: none;
}

.input-content input[type="submit"] {
    width: 20%;
    font-size: 14px;
    color: #0062E8;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

.dl-order-call-text {
    font-size: 12.8px;
    color: #808080;
    margin: 20px 0 0 0;
}

.discuss-right {
    width: 560px;
    height: 560px;
    background: #DFE4E9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    position: relative;
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
    transition: 0.8s;
}

.discuss-right.active {
    clip-path: circle(75% at 50% 50%);
    -webkit-clip-path: circle(75% at 50% 50%);
    transition: 1s ease-in-out;
}

.dr-img {
    width: 70%;
}

.dr-img img {
    width: 100%;
}

.dr-contact {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.dr-wa {
    color: #00CC7E;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.dr-wa img {
    margin: 0 8px 0 0;
}

.how-we-do {
    background: #fff;
}

.how-we-do .container {
    flex-wrap: wrap;
}

.hwd-header {
    width: 100%;
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 100px 0;
}

.hwd-left {
    width: 50%;
    display: flex;
    overflow: hidden;
}

.hwd-icon {
    width: 92%;
    text-align: center;
    position: absolute;
    left: 0;
    transition: 0.8s;
}

.hwd-icon.active {
    left: -100%;
}

.hwd-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 0 0 20px;
    overflow: hidden;
}

.hwd-numbers {
    width: 100%;
    max-width: 400px;
    color: #808080;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 9;
    pointer-events: none;
}

.hwd-number-item:nth-child(2) {
    padding: 0 0 0 4px;
}

.hwd-number-item:last-child {
    padding: 0 4px 0 0;
}

.hwd-number-item.active {
    color: #333;
}

.hwd-input-range {
    width: 100%;
    max-width: 400px;
    margin: -24px 0 0 0;
    -webkit-appearance: none;
    cursor: pointer;
}

.hwd-input-range:focus {
    outline: none;
}

.hwd-input-range::-webkit-slider-runnable-track {
    height: 2px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEElEQVR42mN89J+BgRFEAAAWiAPF/gjhtAAAAABJRU5ErkJggg==);
    background-repeat: repeat-x;
    background-position: 0 50%;
    padding: 80px 0 10px 0;
}

.hwd-input-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    background: #fff;
    border: 8px solid #223448;
    border-radius: 50%;
    box-shadow: 0 0 4px #00000033;
    margin: -46px 0 0 -2px;
    -webkit-appearance: none;
}

.hwd-info-content {
    width: 500%;
    display: flex;
    align-self: flex-start;
    transition: 0.8s;
}

.hwd-info-item {
    flex: 1 1 0;
    padding: 0 20px 0 0;
}

.hwd-right-header {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 42px 0 0 0;
}

.hwd-right-text {
    line-height: 24px;
    margin: 24px 0 20px 0;
}

.ask-btn {
    font-size: 12.8px;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 46px;
    text-transform: uppercase;
    border: 2px solid #1C93F9;
    border-radius: 4px;
    align-self: flex-start;
    padding: 0 24px 0;
    transform-style: preserve-3d;
    transition: 0.6s;
    cursor: pointer;
}

.ic-left {
    width: 24px;
    height: 24px;
    background: url(img/ic-left.svg) no-repeat;
    margin: 0 20px 0 auto;
    cursor: pointer;
}

.ic-right {
    width: 24px;
    height: 24px;
    background: url(img/ic-right.svg) no-repeat;
    cursor: pointer;
}

.ask-btn-nav-content {
    width: 100%;
    display: flex;
    align-items: center;
    align-self: flex-start;
    margin: 64px 0 0 0;
}

.ask-btn-nav-content .header-btn:hover {
    color: #1a1a1a;
}

.our-projects {
    color: #fff;
    background: #1B1D29;
    padding: 80px 0 0 0;
}

.our-projects .container {
    flex-direction: column;
}

.our-projects-header {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px 0;
}

.our-projects-text {
    max-width: 600px;
    color: #fff;
}

.our-projects .pp-tableCell {
    flex-wrap: wrap;
}

.op-slider-content {
    width: 100vw;
}

.op-slider-container {
    width: 120vw;
    height: 320px;
    margin: 0 0 40px -10vw;
}

.slider-item {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}

.slider-item.slick-current {
    opacity: 1;
}

.slider-item.slick-current img {
    box-shadow: 0 12px 32px #000;
}

.slider-item:focus {
    outline: none;
}

.slider-item a:focus {
    outline: none;
}

.op-slider-container img {
    width: 320px;
    height: 320px;
    object-fit: cover;
    border-radius: 50%;
}

.op-slider-item {
    width: 320px;
    height: 320px;
}

.op-slider-item.active {
    opacity: 1;
}

.op-slider-item-info {
    width: 380px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.op-slider-item-header {
    font-size: 18px;
    font-weight: 700;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: 0.4s;
}

.op-slider-item-header.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: 0.4s;
}

.op-slider-item-text {
    min-height: 36px;
    font-size: 14px;
    color: #808080;
    margin: 8px 0 52px 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: 0.4s;
}

.op-slider-item-text.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: 0.6s;
}

.op-slider-item-info .header-btn {
    margin: 0;
}

.slick-arrow {
    cursor: pointer;
}

.slick-arrow:focus {
    outline: none;
}

.slick-prev {
    width: 42%;
    height: 100%;
    font-size: 0;
    color: #fff;
    background: url(img/slick-left.svg) no-repeat 100% 50%;
    border: none;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    z-index: 9;
    background-size: 40px;
}

.slick-next {
    width: 42%;
    height: 100%;
    font-size: 0;
    color: #fff;
    background: url(img/slick-right.svg) no-repeat 0 50%;
    border: none;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-appearance: none;
    z-index: 9;
    background-size: 40px;
}

.calc {
    background: #F0F5FB;
}

.calc .pp-tableCell {
    width: 100%;
    max-width: 1170px;
    height: 92vh !important;
    box-shadow: 0 0 8px #0000002e;
    overflow: scroll;
    margin: 4vh auto 0 auto;
}

.calc-content {
    width: 100%;
    box-shadow: 0 0 8px #0000002e;
    display: flex;
    margin: 20px 0 80px 0;
}

.calc-left {
    width: 70%;
    background: #fff;
    padding: 48px 30px 30px 70px;
}

.calc-header {
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.calc-text {
    max-width: 540px;
}

.calc-sep {
    height: 1px;
    background: #ebebeb;
    margin: 40px 0;
}

.calc-item {
    display: flex;
}

.calc-item-header {
    width: 20%;
    font-size: 12px;
    color: #808080;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 52px 0 0;
    position: relative;
}

.calc-item-header.ptn {
    padding: 4px 52px 0 0;
}

.calc-item-header .calc-item-radio-tip {
    top: 6px;
}

.calc-item-switches {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 0 20px;
}

.calc-subitems {
    width: 100%;
    max-height: 0;
    display: flex;
    padding: 0;
    overflow: hidden;
    transition: 0.4s;
}

.calc-subitems.active {
    max-height: 60px;
    padding: 20px 0 0 0;
}

.calc-item-btn {
    line-height: 40px;
    text-align: center;
    background: #F0F5FB;
    border-radius: 21px;
    padding: 0 15px;
    margin: 0 10px 0 0;
    cursor: pointer;
}

.calc-item-tab {
    line-height: 40px;
    background: #F0F5FB;
    border-radius: 21px;
    padding: 0 15px;
    margin: 0 10px 0 0;
    cursor: pointer;
}

.calc-item-btn.active {
    color: #fff;
    background: #223448;
}

.calc-item-switches-info {
    font-size: 12.8px;
    color: #808080;
    line-height: 20px;
    margin: 24px 0 0 0;
}

.calc-input-range {
    width: 68%;
    max-width: 400px;
    margin: 24px 0 0 10px;
    -webkit-appearance: none;
    cursor: pointer;
}

.calc-input-range:focus {
    outline: none;
}

.calc-input-range::-webkit-slider-runnable-track {
    height: 2px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEElEQVR42mN89J+BgRFEAAAWiAPF/gjhtAAAAABJRU5ErkJggg==);
    background-repeat: repeat-x;
    background-position: 0 50%;
    padding: 10px 0;
}

.calc-input-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    background: #fff;
    border: 8px solid #223448;
    border-radius: 50%;
    box-shadow: 0 0 4px #00000033;
    margin: -10px 0 0 -2px;
    -webkit-appearance: none;
}

.calc-item-radio-btn-content {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 30px 0;
    position: relative;
    cursor: pointer;
}

.calc-item-radio-btn-content:hover .calc-item-radio-btn {
    border: 2px solid #999;
    transition: 0.4s;
}

.calc-item-radio-btn {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 3px;
    margin: 0 14px 0 0;
    transition: 0.4s;
}

.calc-item-radio-btn-content.active .calc-item-radio-btn {
    background: url(img/checkbox-icon.svg) no-repeat 50% #223448;
    border: 2px solid #223448;
}

.calc-item-radio-header {
    width: calc(100% - 80px);
    font-weight: 600;
}

.calc-item-radio-header img {
    margin: 0 4px 0 0;
}

.calc-item-radio-text {
    width: 100%;
    font-size: 12.8px;
    color: #808080;
    margin: 6px 0 0 34px;
}

.calc-item-radio-tip {
    width: 24px;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    line-height: 22px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    right: 20px;
    cursor: pointer;
}

.calc-input-range.ten-range {
    width: 100%;
    max-width: 408px;
    margin: 24px 0 0 -6px;
}

.calc-item-switches.five-range {
    flex-direction: column;
}

.calc-item-switches.hosting .calc-item-btn {
    margin: 0 10px 10px 0;
}

.hwd-numbers.five-range {
    max-width: 188px;
}

.calc-input-range.five-range {
    width: 100%;
    max-width: 200px;
    margin: 24px 0 0 -6px;
}

.options-btn {
    width: fit-content;
    font-weight: 600;
    line-height: 20px;
    display: flex;
    align-items: center;
    margin: -10px auto 0 auto;
    cursor: pointer;
}

.options-btn img {
    margin: 0 10px 0 0;
}

.calc-right {
    width: 30%;
    padding: 30px;
}

.calc-right-content {
    position: sticky;
    position: -webkit-sticky;
    top: calc(50% - 240px);
}

.cr-header {
    font-size: 12px;
    font-weight: 600;
}

.cr-price {
    font-size: 28px;
    font-weight: 700;
    margin: 10px 0 20px 0;
    animation-duration: 0.4s;
}

.cr-price.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: 0.4s;
}

.cr-text {
    font-size: 12.8px;
    color: #808080;
}

.cr-text>div {
    display: flex;
    justify-content: space-between;
}

.cr-details {
    margin: 0 0 20px 0;
}

.cr-details>div {
    margin: 4px 0;
}

.cr-btn {
    width: 100%;
    font-size: 12.8px;
    font-weight: 600;
    line-height: 58px;
    text-align: center;
    text-transform: uppercase;
    background: url(img/mail-icon.svg) no-repeat 18% 50% #45E5A8;
    border-radius: 4px;
    padding: 0 0 0 24px;
    margin: 30px 0 60px 0;
    cursor: pointer;
}

.not-included-btn {
    font-size: 12px;
    text-decoration: underline;
    text-underline-position: under;
    margin: 20px 0 0 0;
    cursor: pointer;
}

.our-partners {
    background: #1B1D29;
    display: flex;
    flex-wrap: wrap;
}

.our-partners .container {
    flex-wrap: wrap;
}

.op-header {
    width: 100%;
    font-size: 34px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    margin: 0 0 90px 0;
}

.op-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.op-sep {
    width: 100%;
    height: 1px;
    background: #ffffff1e;
    margin: 90px 0;
}

.op-form-content {
    display: flex;
}

.op-form-left {
    width: 50%;
    padding: 0 40px 0 0;
}

.op-form-header {
    font-size: 32px;
    color: #fff;
    font-weight: 700;
    margin: 0 0 32px 0;
}

.op-form-text {
    font-size: 18px;
    color: #ccc;
    line-height: 28px;
}

.op-form-right {
    width: 50%;
}

.op-form-right form {
    display: flex;
    flex-wrap: wrap;
}

.op-form-right form input {
    width: 42%;
    font-size: 16px;
    color: #96979D;
    font-weight: 600;
    line-height: 42px;
    background: none;
    border: none;
    border-bottom: 2px solid #96979D;
    -webkit-appearance: none;
    margin: 0 8% 0 0;
}

.op-form-right form input.form-message {
    width: 92%;
    margin: 42px 0 0 0;
}

.op-form-right form input[type="submit"] {
    font-size: 12.8px;
    color: #fff;
    font-weight: 600;
    line-height: 52px;
    text-transform: uppercase;
    background: url(img/form-submit-icon.svg) no-repeat 70% 50% #1C93F9;
    border: none;
    border-radius: 4px;
    padding: 0;
    margin: 32px 0 0 0;
    cursor: pointer;
    transition: 0.4s;
    -webkit-appearance: none;
}

.op-form-right form input[type="submit"]:hover {
    background: url(img/form-submit-icon.svg) no-repeat 72% 50% #1C93F9;
}

footer {
    width: 100%;
    font-size: 14px;
    color: #949599;
    background: #161821;
    display: flex;
}

.footer-row {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: 0 20px 0 0;
}

.footer-row a:hover {
    color: #00CC7E;
}

.fb-footer-link {
    color: #00CC7E;
}

.footer-row.justify-normal {
    justify-content: flex-start;
}

.footer-logo {
    line-height: 24px;
    display: flex;
}

.footer-logo img {
    margin: 0 24px 0 0;
}

.footer-phone {
    font-size: 28px;
    color: #fff;
    background: url(img/phone-icon.svg) no-repeat 0 50%;
    padding: 0 0 0 34px;
    margin: 20px 0 10px 0;
}

.footer-wa {
    max-width: 230px;
    font-size: 15px;
    color: #151721;
    font-weight: 600;
    text-align: center;
    line-height: 52px;
    background: #00cc7e;
    border-radius: 4px;
    padding: 0;
    margin: 10px 0;
}

.footer-wa:hover {
    color: #151721;
}

.footer-wa:hover a {
    color: #151721;
}

.footer-wa a {
    display: block;
}

.footer-link {
    line-height: 32px;
    display: block;
}

.footer-text {
    line-height: 24px;
}

.footer-text {
    margin: 36px 0 0 0;
}

.footer-btn {
    width: 80%;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border: 2px solid #1C93F9;
    border-radius: 3px;
    margin: 15px 0 0 0;
    position: relative;
    cursor: pointer;
}

.footer-btn:hover {
    color: #fff;
    border: 2px solid #ffffff00;
}

.footer-btn::before, .footer-btn::after {
    content: '';
    position: absolute;
    border-radius: 4px;
}

.footer-row-header {
    color: #fff;
    font-weight: 600;
    line-height: 28px;
}

.footer-stars {
    display: flex;
    margin: 28px 0 0 0;
}

.footer-stars img {
    margin: 0 18px 0 0;
}

.menu {
    width: 980px;
    height: 100vh;
    font-size: 14px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 20px 30px 48px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    transform: translateX(980px);
    transition: 0.8s;
}

.menu.active {
    box-shadow: -8px 0 42px #0000001a;
    transform: translateX(0);
    transition: 0.8s;
}

.menu-link {
    color: #1F1A17;
    text-transform: uppercase;
    align-self: flex-start;
    margin: 0 0 10px 0;
    position: relative;
    opacity: 1;
    transition: 0.8s;
}

.menu-link:hover .menu-link-header {
    color: #1c93f9;
}

.menu-link:nth-child(3) {
    animation-delay: 0.1s;
}

.menu-link:nth-child(4) {
    animation-delay: 0.2s;
}

.menu-link:nth-child(5) {
    animation-delay: 0.3s;
}

.menu-link:nth-child(6) {
    animation-delay: 0.4s;
}

.menu-link:nth-child(7) {
    animation-delay: 0.5s;
}

.menu.active .menu-link {
    opacity: 0;
    transition: 0s;
    animation-name: menuIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes menuIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-link:after {
    content: '';
    width: 0;
    height: 1px;
    background: #1a1a1a;
    position: absolute;
    top: 110%;
    left: 0;
    transition: 0.4s;
}

.menu-link:hover:after {
    /* width: 100%; */
    transition: 0.4s;
}

.menu-link.with-sub {
    position: relative;
    cursor: pointer;
}

.menu-link.with-sub:before {
    content: '';
    width: 8px;
    height: 1px;
    background: #1a1a1a;
    position: absolute;
    top: 8px;
    left: -20px;
}

.menu-link.with-sub:after {
    content: '';
    width: 8px;
    height: 1px;
    background: #1a1a1a;
    position: absolute;
    top: 8px;
    left: -20px;
    transform: rotate(90deg);
    transition: 0.4s;
}

.menu-link.with-sub.active:after {
    transform: rotate(0);
    transition: 0.4s;
}

.menu-link.with-sub.active .sub-menu {
    max-height: 100px;
    padding: 10px 0 0 15px;
    transition: 0.4s;
}

.sub-menu {
    max-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0 0 15px;
    overflow: hidden;
    transition: 0.4s;
}

.sub-menu .menu-link {
    align-self: flex-start;
    position: relative;
}

.lang-link {
    color: #808080;
    font-weight: 600;
    text-transform: uppercase;
    margin: 20px 0 40px 0;
}

.phone-link {
    font-size: 28px;
    color: #1F1A17;
    background: url(img/phone-icon.svg) no-repeat 0 50%;
    padding: 0 0 0 34px;
}

.mail-link {
    color: #808080;
    padding: 0 0 0 34px;
}

.wa-link {
    max-width: 230px;
    font-size: 15px;
    color: #151721;
    font-weight: 600;
    text-align: center;
    line-height: 52px;
    background: #00cc7e;
    border-radius: 4px;
    padding: 0;
    margin: 0 0 20px 0;
    display: block;
}

.wa-link:hover {
    filter: brightness(1.1);
}

.fb-link {
    font-size: 21px;
    color: #00CC7E;
    line-height: 32px;
}

.main-link {
    color: #808080;
    margin: 0 0 16px 0;
}

.menu-text {
    font-size: 12.8px;
    color: #808080;
    line-height: 20px;
}

.menu-row {
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    margin: 0 0 30px 0;
}

.menu-row.portfolio {
    flex-grow: 1;
}

.menu-row.last {
    border: none;
    margin: 0;
}

.menu-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
}

.menu-col-header {
    font-size: 12.8px;
    color: #73849A;
    font-weight: 400;
    line-height: 24px;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

.menu-link-header {
    transition: 0.4s;
}

.menu-link-subheader {
    font-size: 12px;
    color: #73849A;
    font-weight: 500;
    line-height: 20px;
    text-transform: none;
    margin: 0 0 20px 0;
}

.menu-row .portfolio-item {
    width: auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    margin: 0 0 20px 0;
    overflow: visible;
}

.menu-row .pi-img {
    height: 12vh;
    max-height: 16.8vh;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    overflow: visible;
}

.menu-row .pi-img img {
    width: auto;
    height: 100%;
    border-radius: 50%;
}

.menu-row .portfolio-item:last-child .pi-img img {
    border-radius: 0;
}

.menu-row .portfolio-item:last-child .pi-header {
    color: #1c93f9;
}

.menu-row .pi-header {
    font-size: 14px;
    color: #1F1A17;
    font-weight: 600;
    text-align: center;
    margin: 15px 0 0 0;
}

.portfolio-item .pi-img img {
    filter: brightness(1);
    transform: scale(1) rotate(0deg);
    transition: 0.4s;
}

.portfolio-item:hover .pi-img img {
    filter: brightness(0.75);
    transform: scale(1.1) rotate(8deg);
}

.menu-project-header {
    color: #1F1A17;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

@media (max-height: 800px) {
    .menu-row {
        margin: 0 0 20px 0;
    }
    .menu-link-subheader {
        margin: 0 0 10px 0;
    }
    .menu-row .pi-header {
        height: 18px;
        overflow: hidden;
    }
}

.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.lang-item {
    width: 24%;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 18px -2px #0000001a;
    padding: 20px;
    margin: 20px 1% 0 0;
}

.lang-item-img {
    height: 32px;
}

.lang-item-img img {
    max-height: 32px;
}

.lang-item-header {
    font-size: 14px;
    margin: 10px 0 0 0;
}

.cirt-html {
    width: 240px;
    color: #808080;
    text-align: left;
    text-transform: none;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px #0000001a;
    padding: 10px 20px;
    position: absolute;
    top: 0;
    left: 140%;
    opacity: 0;
    z-index: 99;
    transform: translateY(-20%);
    transition: 0.4s;
    pointer-events: none;
}

.calc-item-radio-tip:hover .cirt-html {
    transform: translateY(-40%);
    opacity: 1;
}

.popup-content {
    width: 100%;
    height: 100%;
    background: #000000e6;
    box-shadow: 0 0 10px 10px #00000080 inset;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    transform: translateY(-100vh);
    transition: 0.4s;
    opacity: 0;
}

.popup-content.active {
    transform: translateY(0);
    transition: 0.8s;
    opacity: 1;
}

.popup-content.not-included {
    background: none;
    box-shadow: none;
}

.popup-content.not-included .popup-container {
    height: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 8px #0000001a;
    padding: 40px;
    position: relative;
}

.popup-content.not-included h2 {
    font-size: 18px;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 20px 0;
}

.popup-content.not-included ul {
    padding: 0 0 0 20px;
}

.popup-content.not-included .popup-close {
    color: #1a1a1a;
    font-weight: 600;
    text-align: center;
    text-decoration: underline;
    padding: 0;
    position: absolute;
    top: 20px;
    right: 20px;
}

.popup-container {
    max-width: 532px;
    height: 100%;
}

.popup-content form {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.popup-content h2 {
    font-size: 34px;
    color: #fff;
    font-weight: 700;
    margin: 200px 0 20px 0;
}

.popup-content h2.done {
    color: #00CC7E;
}

.popup-content h2 span {
    font-size: 14px;
    line-height: 20px;
    display: block;
    margin: 10px 0 0 0;
}

.form-text {
    font-size: 18px;
    color: #fff;
    margin: 0 0 40px 0;
}

.popup-content form input {
    width: 100%;
    max-width: 360px;
    font-size: 16px;
    color: #fff;
    line-height: 40px;
    border: none;
    background: none;
    border-bottom: 1px solid #ffffff80;
    padding: 0;
    margin: 20px 0;
    -webkit-appearance: none;
}

.popup-content form input[type="submit"] {
    font-size: 14px;
    line-height: 58px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: url(img/submit-icon.svg) no-repeat 80% 50% #1C93F9;
    border: 2px solid #1C93F9;
    border-radius: 4px;
    box-shadow: 0 10px 10px -4px #1C93FA80;
    cursor: pointer;
    transition: 0.4s;
}

.popup-content form input[type="submit"]:hover {
    background: url(img/submit-icon.svg) no-repeat 82% 50% #1C93F9;
    box-shadow: 0 15px 20px #1C93FA80;
}

.popup-content form input:focus {
    outline: none;
}

.placeholder {
    height: 0px;
    font-size: 16px;
    color: #ffffffbf;
    transform: translateY(-52px);
    transition: 0.4s;
    pointer-events: none;
}

.popup-content form input:focus+.placeholder {
    font-size: 12.8px;
    transform: translateY(-80px);
    transition: 0.4s;
}

.popup-content form input:not(:focus):valid+.placeholder {
    font-size: 12.8px;
    transform: translateY(-80px);
    transition: 0.4s;
}

.form-agreement {
    font-size: 12.8px;
    color: #ffffff80;
    margin: auto 0 40px 0;
}

.form-agreement a {
    text-decoration: underline;
}

.popup-close {
    font-size: 14px;
    color: #ffffffbf;
    text-transform: uppercase;
    background: url(img/popup-close.svg) no-repeat 0 50%;
    padding: 20px 20px 20px 28px;
    position: absolute;
    top: 40px;
    right: 30px;
    cursor: pointer;
    transition: 0.4s;
}

.popup-close:hover {
    color: #fff;
    background: url(img/popup-close.svg) no-repeat 100% 50%;
    padding: 20px 28px 20px 20px;
}

.single-page .pp-section {
    height: auto;
}

.single-page-container {
    flex-wrap: wrap;
    padding: 80px 0 100px 0;
    transition: 0.6s;
}

.single-page-container.scale {
    transform: scale(0.94);
    transform-origin: top left;
}

.brief-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0 0 0;
}

.form-row {
    width: 50%;
    padding: 0 58px 0 0;
    margin: 20px 0;
}

.btn-row {
    width: 100%;
}

.full-row {
    margin: 20px 50% 0 0;
}

.brief-form .row {
    width: 50%;
    padding: 0 58px 0 0;
    margin: 20px 0;
}

.form-header {
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 20px 0;
}

.form-header:first-child {
    margin: 0 0 20px 0;
    ;
}

.form-header ul {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    padding: 0;
    list-style-position: inside;
}

.form-header-text {
    font-size: 15px;
    color: #808080;
    font-weight: 400;
    margin: 10px 0 0 0;
}

.form-dop-text {
    width: 100%;
    color: #4d4d4d;
}

.form-row.green-text {
    width: 70%;
    margin: 0;
}

.form-row.form-textarea {
    width: 100%;
}

.form-row.form-textarea label {
    width: 19%;
    height: auto;
}

.form-row.form-textarea textarea {
    width: 81%;
}

.row-header {
    width: 100%;
    margin: 20px 0 0 0;
}

.form-checkbox-item-content {
    display: flex;
    flex-wrap: wrap;
}

.form-checkbox-item {
    color: #1F1A17cc;
    font-weight: 600;
    line-height: 40px;
    background: #F0F5FB;
    border-radius: 21px;
    align-self: flex-end;
    padding: 0 20px;
    margin: 0 10px 20px 0;
    cursor: pointer;
}

.form-checkbox-item-content {
    margin: 0;
}

.form-checkbox-item.active {
    color: #fff;
    background: #223448;
}

.form-checkbox-row {
    width: 100%;
    margin: 30px 0 0 0;
}

.form-checkbox-row .vl-mtd-item {
    flex-direction: column;
}

.form-checkbox-row .vl-mtd-item label {
    margin: 0 0 30px 0;
}

.form-checkbox-many-item {
    width: calc(50% - 20px);
    font-size: 15px;
    display: flex;
    margin: 0 20px 20px 0;
    cursor: pointer;
}

.fcmi-radio-btn {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 3px;
    margin: 0 14px 0 0;
    transition: 0.4s;
}

.form-checkbox-many-item.active .fcmi-radio-btn {
    background: url(img/checkbox-icon.svg) no-repeat 50% #223448;
    border: 2px solid #223448;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.li-header {
    width: 100%;
    font-size: 21px;
    font-weight: 600;
    line-height: 24px;
    display: inline-block;
    margin: 20px 0 10px 0;
}

.folio-link {
    color: #1c93f9;
    font-weight: 600;
    display: inline-block;
    margin: 4px 0 0 0;
}

.folio-link:hover {
    text-decoration: underline;
}

.vl-mtd-item {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

.vl-mtd-item label {
    width: 40%;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding: 0 20px 0 0;
}

.vl-mtd-item input {
    width: 60%;
    font-size: 16px;
    line-height: 42px;
    border: none;
    border-bottom: 1px solid #1F1A17;
    align-self: flex-end;
    padding: 0;
}

.vl-mtd-item textarea {
    width: 75%;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #1F1A17;
    padding: 10px 0 0 0;
}

.vl-mtd-item input[type="file"] {
    line-height: normal;
    padding: 0 0 10px 0;
}

.vl-mtd-item input:focus, .vl-mtd-item textarea:focus {
    outline: none;
}

.text-muted {
    width: 60%;
    font-size: 12.8px;
    color: #808080;
    margin: 10px 0 0 auto;
}

.form-row button {
    width: 60%;
    font-size: 14px;
    color: #fff;
    line-height: 52px;
    text-transform: uppercase;
    background: #1C93F9;
    border: none;
    border-radius: 4px;
    margin: 10px 0 0 40%;
    cursor: pointer;
    transition: 0.4s;
}

.form-row button:hover {
    background: #0682ef;
    box-shadow: 0 8px 8px -4px #1C93F980;
}

.tarif-table-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 80px 0 40px 0;
}

.tarif-column {
    display: flex;
    flex-direction: column;
}

.tarif-column {
    text-align: center;
    border: 2px solid #ffffff00;
    border-radius: 8px;
    flex-grow: 1;
}

.tarif-column:hover {
    background: #1EB5E114;
    border: 2px solid #1EB5E1;
    transition: 0.4s;
}

.tarif-column:first-child {
    text-align: left;
}

.tarif-column:first-child:hover {
    background: none;
    border: 2px solid #ffffff00;
}

.tc-item {
    font-size: 15px;
    line-height: 58px;
    border-bottom: 1px solid #e2e2e2;
    margin: 0 -2px;
    position: relative;
    z-index: -9;
}

.tc-item:last-child {
    border: none;
}

.tarif-column:first-child .tc-item {
    color: #1F1A1780;
}

.tc-item.tc-header {
    color: #1F1A17;
    line-height: 80px;
    border: none;
}

.tarif-column:first-child .tc-item.tc-header {
    color: #1F1A17;
}

.tc-item.tc-tarif {
    font-size: 18px;
    color: #00CC7E;
    font-weight: 700;
}

.tc-item.tc-cost {
    font-size: 28px;
    color: #1F1A17;
    font-weight: 700;
}

.tc-item.yes-icon {
    min-height: 59px;
    background: url(img/tc-yes-icon.svg) no-repeat 50%;
}

.tc-item.no-icon {
    min-height: 59px;
    background: url(img/tc-no-icon.svg) no-repeat 50%;
}

.velocidad-content {
    display: flex;
    margin: 40px 0;
}

.velocidad-item {
    text-align: center;
    flex: 1 1 0;
    padding: 0 40px 0 0;
}

.velocidad-header {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 40px 0;
}

.velocidad-img {
    height: 180px;
    text-align: center;
    margin: 0 0 40px 0;
}

.velocidad-img img {
    height: 100%;
}

.velocidad-text {
    min-height: 240px;
    font-size: 14px;
    line-height: 24px;
    margin: 0 0 20px 0;
}

.velocidad-price {
    color: #28a745;
    font-weight: 700;
    margin: 0 0 40px 0;
}

.velocidad-btn {
    height: 58px;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    background: #1C93F9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    cursor: pointer;
    transition: 0.4s;
}

.velocidad-btn:hover {
    background: #0677db;
    box-shadow: 0 10px 10px -4px #1C93F980;
    transform: translateY(-4px);
}

.training-text {
    min-height: auto;
}

.page-preloader {
    width: 0px;
    height: 2px;
    background: #00CC7E;
    position: fixed;
    top: 0;
    left: 0;
    transition: 0.4s ease-out;
}

.page-preloader.active {
    width: 100%;
}

#pp-nav.dark .pp-tooltip {
    color: #1a1a1a;
}

.webdex-container {
    display: block;
}

.cookies {
    width: 100%;
    font-size: 14px;
    color: #fff;
    line-height: 42px;
    background: #161821bf;
    padding: 0 40px;
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
}

.cookies.active {
    display: flex;
}

.cookies-link {
    text-decoration: underline;
    margin: 0 0 0 20px;
    cursor: pointer;
}

.go-top {
    width: 42px;
    height: 42px;
    background: url(img/arrow-up.svg) no-repeat 50% #00000033;
    border-radius: 50%;
    position: fixed;
    right: 32px;
    bottom: 100px;
    opacity: 0;
    cursor: pointer;
    z-index: 9;
    transition: 0.8s;
}

.go-top.active {
    opacity: 1;
}

.for-mobile {
    display: none;
}

.circle__box {
    width: 50px;
    height: 50px;
    top: calc(50% - 24.8px);
    position: absolute;
}

.slick-prev .circle__box {
    right: -6px;
}

.slick-next .circle__box {
    left: -6px;
}

.circle__wrapper {
    width: 25px;
    height: 50px;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.circle__wrapper--right {
    right: 0;
}

.circle__wrapper--left {
    left: 0;
}

.circle__whole {
    width: 50px;
    height: 50px;
    border: 2px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    transform: rotate(-135deg);
}

.slick-prev:hover .circle__right, .slick-next:hover .circle__right {
    border-top: 2px solid #00cc7e;
    border-right: 2px solid #00cc7e;
    right: 1px;
    animation: circleRight 0.4s linear forwards;
}

.slick-prev:hover .circle__left, .slick-next:hover .circle__left {
    border-bottom: 2px solid #00cc7e;
    border-left: 2px solid #00cc7e;
    left: 1px;
    animation: circleLeft 0.4s linear forwards;
}

@keyframes circleRight {
    0% {
        transform: rotate(-135deg);
    }
    50%, 100% {
        transform: rotate(45deg);
    }
}

@keyframes circleLeft {
    0%, 50% {
        transform: rotate(-135deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@media (max-width: 1440px) {
    .main-content h1 {
        max-width: 800px;
        font-size: 42px;
    }
    .main-text {
        font-size: 24px;
    }
    .lang-link {
        margin: 10px 0 20px 0;
    }
    .dl-bubble-content {
        margin: 32px 0;
    }
    .discuss-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .discuss-right {
        width: 480px;
        height: 480px;
        margin: 0 80px 0 auto;
    }
    .dr-contact {
        font-size: 17px;
    }
    .hwd-header {
        margin: 40px 0;
    }
    .hwd-right-header, .ask-btn-nav-content {
        margin: 0 0 20px 0;
    }
    .ask-btn-nav-content {
        padding: 0 40px 0 0;
    }
    .op-slider-container {
        width: 140vw;
        height: 200px;
        margin: 0 0 20px -20vw;
    }
    .op-slider-container img {
        width: 200px;
        height: 200px;
    }
    .op-slider-item-text {
        margin: 8px 0 10px 0;
    }
    .our-projects-header {
        font-size: 24px;
        margin: 10px 0;
    }
    .op-slider-item-info .header-btn {
        height: 46px;
        line-height: 42px;
    }
    .single-page-container.scale {
        transform: scale(0.7);
    }
}

@media (max-width: 1280px) {
    header {
        font-size: 12.8px;
    }
    .place {
        margin: 0 24px 0 0;
    }
    .header-btn {
        font-size: 11px;
        margin: 0 24px 0 0;
    }
}

@media (max-height: 700px) {
    .popup-content h2 {
        margin: 40px 0 20px 0;
    }
    .form-text {
        margin: 0 0 10px 0;
    }
}

.main-offer {
    width: 934px;
    height: 130px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    background: url(img/offer-bg.png) no-repeat;
    padding: 36px 20px 0 164px;
    position: relative;
}

.main-offer-subtext {
    font-size: 14px;
    position: absolute;
    right: 8px;
    bottom: 10px;
}

.for-mobile {
    display: none;
}

@media (max-width: 768px) {
    html, body {
        width: 100vw;
        overflow-x: hidden !important;
    }
    .for-pc {
        display: none;
    }
    .for-mobile {
        display: block;
    }
    .cookies, .cookies.active {
        display: none;
    }
    .sticky-header {
        padding: 30px;
        position: fixed;
    }
    section {
        height: auto !important;
        padding: 40px 0;
    }
    .main {
        height: 100vh !important;
    }
    .container {
        flex-wrap: wrap;
        padding: 20px;
    }
    .video-cover-blur-content {
        background: url(img/mobile-bg.jpg) 50%;
        background-size: cover;
    }
    .video-cover-content {
        background: #00000080;
    }
    #pp-nav {
        display: none !important;
    }
    .main {
        padding: 20px;
    }
    header>img {
        height: 42px;
    }
    .place {
        display: none;
    }
    .phone {
        display: none;
    }
    .header-btn {
        display: none;
    }
    .menu-btn-content {
        padding: 10px 0;
    }
    .menu {
        width: 100vw;
        overflow: auto;
        transform: translateX(100vw);
        transition: 0.8s;
    }
    .menu.active {
        transform: translateX(0);
    }
    .menu-row {
        flex-direction: column;
    }
    .menu-row.portfolio {
        display: none;
    }
    .mail-link {
        margin: 0 0 20px 0;
    }
    .main-content {
        align-items: flex-start;
    }
    .main-content h1 {
        font-size: 32px;
        text-align: left;
        margin: 0;
    }
    .main-calc-btn {
        width: 100%;
    }
    .main-calc-btn-content {
        padding: 30px 0;
    }
    .scroll-icon {
        display: none;
    }
    .your-site-left, .your-site-right, .discuss-left, .discuss-right, .hwd-left, .hwd-right {
        width: 100%;
    }
    .your-site {
        padding: 20px 0;
    }
    .main-offer {
        width: 100%;
        font-size: 12px;
        background: url(img/mobile-offer-bg.png) no-repeat;
        padding: 20px 80px 20px 20px;
    }
    .main-offer-subtext {
        width: fit-content;
        font-size: 11px;
        border-bottom: 2px solid #00cc7e;
        margin: 6px 0 0 0;
        position: relative;
        right: auto;
        bottom: auto;
    }
    .cirt-html {
        left: auto;
        right: 158%;
    }
    /* all headers */
    .ysl-header, .dl-header, .hwd-header, .op-header {
        font-size: 24px;
    }
    .page-section .ysr-item {
        width: 50%;
    }
    .ysl-text {
        font-size: 15px;
    }
    .ysr-item {
        margin: 20px 0;
    }
    .ysr-item-img {
        padding: 0 20px 0 0;
    }
    .ysr-item-img img {
        width: 40px;
    }
    .ysr-item-text {
        font-size: 12.8px;
    }
    .your-site-img {
        width: 100vw;
        opacity: 0.5;
        animation-fill-mode: none !important;
        z-index: -9;
    }
    .dl-header {
        width: 100%;
    }
    .input-content input[type="submit"] {
        width: 40%;
    }
    .discuss-right {
        width: 180px;
        height: 180px;
        margin: 20px 0 0 0;
    }
    .dl-bubble-content {
        margin: 40px 0;
    }
    .dr-contact {
        top: 20%;
        right: -158px;
    }
    .discuss-right.active {
        clip-path: circle(200% at 50% 50%);
        -webkit-clip-path: circle(200% at 50% 50%);
    }
    .hwd-right {
        padding: 0;
    }
    .hwd-header {
        margin: 20px 0;
    }
    .hwd-left {
        text-align: center;
        justify-content: center;
        margin: 40px 0 0 0;
    }
    .hwd-left img {
        max-width: 50%;
    }
    .hwd-icon {
        width: 100%;
    }
    .hwd-icon img {
        height: 58px;
        margin: -20px 0 0 0;
    }
    .hwd-right-header {
        font-size: 15px;
    }
    .hwd-right-text {
        margin: 0 0 20px 0;
    }
    .hwd-numbers {
        padding: 0 10px;
        margin: 20px 0 -20px 0;
    }
    .how-we-do .hwd-numbers {
        margin: 40px 0 -20px 0;
    }
    .hwd-input-range {
        padding: 10px;
        margin: 0;
    }
    .op-slider-container {
        width: 100vw;
        margin: 0 0 30px 0;
    }
    .op-form-right form input[type="submit"] {
        width: 92%;
        margin: 30px 0 0 0;
    }
    .our-projects-text {
        margin: 0 0 20px 0;
    }
    .slick-next {
        width: 15%;
        background: url(img/slick-right.svg) no-repeat 100% 50%;
        background-size: 64px;
    }
    .slick-prev {
        width: 15%;
        background: url(img/slick-left.svg) no-repeat 0 50%;
        background-size: 64px;
    }
    .op-slider-content .header-btn {
        display: block;
    }
    .calc-content {
        flex-wrap: wrap;
        margin: 0;
    }
    .calc-left {
        width: 100%;
        padding: 40px 20px;
    }
    .calc-right {
        width: 100%;
    }
    .calc-item {
        flex-wrap: wrap;
    }
    .calc-item-header {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .calc-item-switches {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }
    .calc-item-btn {
        width: 100%;
        text-align: center;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }
    .calc-item-switches.hosting .calc-item-btn {
        margin: 0 2% 10px 0;
    }
    .calc-sep {
        margin: 20px 0;
    }
    .calc-item.logotype .calc-item-btn {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .calc-input-range {
        width: 100%;
        padding: 0 20px;
    }
    .calc-item-radio-btn-content {
        width: 100%;
    }
    .op-content {
        flex-wrap: wrap;
    }
    .op-content img {
        width: 60%;
        margin: 10px 20%;
    }
    .our-partners {
        padding: 40px 0;
    }
    .op-header {
        margin: 0 0 40px 0;
    }
    .op-form-content {
        flex-wrap: wrap;
    }
    .op-sep {
        margin: 40px 0;
    }
    .op-form-left {
        width: 100%;
        padding: 0;
    }
    .op-form-right {
        width: 100%;
    }
    .footer-row {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .footer-row:first-child {
        width: 100%;
    }
    .popup-container {
        width: 100%;
        padding: 0 30px;
    }
    .popup-content h2 {
        font-size: 24px;
        margin: 80px 0 20px 0;
    }
    .popup-content form input {
        margin: 10px 0;
    }
    .popup-content form input[type="submit"] {
        background: url(img/submit-icon.svg) no-repeat 84% 50% #1C93F9;
    }
    .placeholder {
        margin: 10px 0 0 0;
    }
    .popup-close {
        top: 10px;
        left: 30px;
    }
    .for-mobile {
        display: block;
    }
    .tarif-table-content {
        flex-wrap: wrap;
        margin: 40px 0 0 0;
    }
    .tarif-column {
        width: 50%;
        margin: 0 0 20px 0;
    }
    .tc-item {
        height: 80px;
        text-align: center;
        line-height: normal;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tc-item:last-child {
        border-bottom: 2px solid #ccc;
        padding: 0 0 20px 0;
    }
    .tc-item.tc-header {
        height: 80px;
        line-height: normal;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tarif-column:first-child .tc-item.tc-header {
        line-height: 18px;
    }
    .velocidad-content {
        flex-wrap: wrap;
    }
    .velocidad-item {
        width: 100%;
        padding: 0;
        margin: 0 0 40px 0;
    }
    .velocidad-text {
        min-height: auto;
    }
    .popup-content {
        height: 100vh;
        transform: translateY(-200vh);
    }
    .popup-content.not-included .popup-container {
        max-height: 100vh;
    }
    .cookies {
        line-height: 24px;
        flex-wrap: wrap;
        padding: 20px;
    }
    .cookies-link {
        margin: 0 20px 0 0;
    }
}

@media (max-width: 520px) {    
    .page-section .ysr-item {
        width: 100%;
    }
}
@media (max-width: 320px) {
    .dr-contact {
        width: 100%;
        margin: 0 20px 0 0;
    }
    .main-offer {
        padding: 20px 32px 20px 20px;
    }
}

.separator.item {
    padding: 0 3px;
}

.page-nav {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}

.video-cover-content {
    background: #00000080;
}

.blog-single-header * {
    pointer-events: auto;
}