[class*=contacts-container] {
    max-width: 1400px;
    margin: 0px auto;
}

.contacts-page{
    padding: 0px 20px;
}

.contacts-headline{
    display: flex;
    flex-direction: row;
    width: max-content;
    margin-top: 158px;
}

.contacts-headline-text{
    width: 760px;
}

.contacts-headline-text a{
    text-decoration: none;
    color: #333333;
}

.contacts-headline-text .col-1{
    display: flex;
    flex-direction: row;
}

.contacts-headline-text h1{
    font-family: 'Gilroy-Bold';
    font-size: 96px;
    line-height: 119px;
    margin-top: 62px;
    margin-bottom: 39px;
}

.contacts-headline-img{
    position: relative;
    top: -20px;
    left: 55px;
    width: 730px;
}

/* ------------------- */

.contacts-page .map-block{
    display: flex;
    flex-direction: row;
    width: max-content;
    margin-top: 174px;
}

.contacts-page .map-block .row-1{
    margin-right: 40px;
    color: #333333;
}

.contacts-page .map-block .row-2{
    width: 660px;
    height: 615px;
    border-radius: 30px;
    filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.08));
}

.ymaps-2-1-79-inner-panes{
    border-radius: 30px;
}

.contacts-page .map-block .col-2{
    background: #FFFFFF;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    padding: 40px 152px 80px 40px;
}

.contacts-page .map-block .col-2 a{
    text-decoration: none;
    color: #333333;
    transition: 0.3s;
}

.contacts-page .map-block .flex-col{
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
}

.contacts-page .map-block .flex-col:hover, .contacts-page .map-block .col-2 a:hover{
    color: #916BEF;
    transition: 0.3s;
}

.contacts-page .map-block .margin-top-20{
    margin-top: 20px;
}

.contacts-page .map-block .margin-top-40{
    margin-top: 40px;
}

.contacts-page .map-block .col-1{
    margin-bottom: 40px;
}

.contacts-page .map-block .col-2 img{
    margin-right: 20px;
}


.contacts-page .map-block .soc-net-col{
    display: grid;
    grid-template-columns: 60px
    60px
    60px
    60px
    40px;

    grid-template-rows: 60px 
    40px;
}

.contacts-page .map-block .soc-net-col img{
    width: 40px;
    height: 40px;
    background: #333333;
    border-radius: 12px;
    padding: 7px;
    transition: 0.3s;
    cursor: pointer;
}

.contacts-page .map-block .soc-net-col img:hover{
    transition: 0.3s;
}

#contacts-instagram:hover{
    background: linear-gradient(43.94deg, #EEA054 16.16%, #D64763 50.11%, #B62A99 83.68%);
}

#contacts-dribbble:hover{
    background: #EA4C89;
}

#contacts-youtube:hover{
    background: #F40000;
}

#contacts-vk:hover{
    background: #0077FF;
}

#contacts-behance:hover{
    background: #1C66FB;
}

#contacts-telegram:hover{
    background: linear-gradient(180deg, #2AABEE 0%, #229ED9 99.26%), #419FD9;
}

#contacts-whatsapp:hover{
    background: #0DC143;
}

#contacts-skype:hover{
    background: #00AFF0;
}

#contacts-viber:hover{
    background: #7C509A;
}

#contacts-facebook:hover{
    background: #4E6297;
}

.contacts-page .map-block .row-2 .ymaps-2-1-79-ground-pane{
	filter: grayscale(1);
	-ms-filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
}

.contacts-page .map-block .row-2 iframe{
    border-radius: 30px;
}

/* ----------------------- */

.contacts-page .popular-services{
    margin-top: 192px;
    width: max-content;
}

/* ----------------------- */

.contacts-page .request-block{
    margin-top: 193px;
}

/* ------------------------ */

.contacts-page .articles-block{
    max-width: 1366px;
    margin-top: 200px;
    margin-bottom: 200px;
}

/* ------------------------- */

@media(max-width: 1919px){
    .contacts-headline{
        margin-top: calc(113px + (158 - 113) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .contacts-headline-text{
        width: calc(492px + (760 - 492) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .contacts-headline-text h1{
        font-size: calc(68px + (96 - 68) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(85px + (119 - 85) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(42px + (62 - 42) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(28px + (39 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .contacts-headline-img{
        top: calc(-16px + (-20 - -16) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        left: calc(40px + (55 - 40) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        width: calc(475px + (730 - 475) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ------------------- */
    
    .contacts-page .map-block{
        margin-top: calc(120px + (174 - 120) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .contacts-page .map-block .row-1{
        margin-right: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .contacts-page .map-block .row-2{
        width: calc(470px + (660 - 470) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(438px + (615 - 438) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .contacts-page .map-block .row-2 iframe{
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .ymaps-2-1-79-inner-panes{
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .contacts-page .map-block .col-2{
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(108px + (152 - 108) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(56px + (80 - 56) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .contacts-page .map-block .margin-top-20{
        margin-top: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .contacts-page .map-block .margin-top-40{
        margin-top: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .contacts-page .map-block .col-1{
        margin-bottom: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .contacts-page .map-block .col-2 img{
        margin-right: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .contacts-page .map-block .flex-col img{
        width: calc(18px + (25 - 18) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(18px + (25 - 18) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    
    .contacts-page .map-block .soc-net-col{
        grid-template-columns: calc(42px + (60 - 42) * ( (100vw - 1366px) / ( 1920 - 1366) ))
        calc(42px + (60 - 42) * ( (100vw - 1366px) / ( 1920 - 1366) ))
        calc(42px + (60 - 42) * ( (100vw - 1366px) / ( 1920 - 1366) ))
        calc(42px + (60 - 42) * ( (100vw - 1366px) / ( 1920 - 1366) ))
        calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    
        grid-template-rows: calc(42px + (60 - 42) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .contacts-page .map-block .soc-net-col img{
        width: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        border-radius: calc(8px + (12 - 8) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(5px + (7 - 5) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ----------------------- */
    
    .contacts-page .popular-services{
        margin-top: calc(134px + (192 - 134) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ----------------------- */
    
    .contacts-page .request-block{
        margin-top: calc(137px + (193 - 137) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ------------------------ */
    
    .contacts-page .articles-block{
        margin-top: calc(154px + (200 - 153) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(126px + (200 - 126) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        max-width: calc(967px + (1366 - 967) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
}