@import "../assets/fonts/helvetica/stylesheet.css";

:root {
    --dark: #000;
    --dark_ligth: #ccc;
    --red: #F95359;
    --blue: #63a2dd;
    --bg: #fff;
    --footerbg: #000
}

HTML {
}

BODY {
    line-height: 1.3;
    font-size: 16px;
    font-family: 'HelveticaNeueCyr', sans-serif;
    color: var(--dark);
    background: var(--bg)
}

BODY._inner {
}

.__wrapper {
    max-width: 1920px;
    padding-top: 80px !important
}

.__container {
    max-width: 1600px;
    margin: 0 auto;
}

/***/
h1 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3em;
    margin: 0;
    color: var(--dark)
}

h2 {
    font-size: 22px;
    line-height: 1.2em;
    font-weight: 600;
    color: var(--dark);
    margin:0
}

h3 {
    font-size: 18px;
    line-height: 1.4em;
    font-weight: 600;
    color: var(--dark);
    margin:0
}

a {
    color: inherit
}

p{
    margin: 0;
}

.button {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    background-color: var(--red);
    width: 210px;
    line-height: 48px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(13, 38, 79, 0.3);
    display: block;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 100%
}

.button:hover {
    box-shadow: 3px 5px 13px rgba(13, 38, 79, 0.4);
    background-color: var(--red)
}


/***/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 40px 0;
}

._inner header{border-bottom: 1px solid #aaa;}

header .header-menu-item {
    display: none
}




/***/
.menu-button {
    display: block;
    width: 22px;
    height: 22px;
    z-index: 7100;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    right: 0;
}

.menu-button .menu-icon {
    display: block;
    width: 22px;
    position: absolute;
    height: 2px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #63A2DD;
    border-radius: 2px;
}

.menu-button .menu-icon:before,
.menu-button .menu-icon:after {
    display: block;
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    left: 0;
    margin: auto;
    background: #63A2DD;
    -webkit-transition: all .3s ease;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.menu-button .menu-icon:before {
    top: 7px;
}

.menu-button .menu-icon:after {
    bottom: 7px;
}

.menu-button.is_open .menu-icon, .menu-button.is_open .menu-icon:before, .menu-button.is_open .menu-icon:after {
    background: var(--red);
}

.menu-button.is_open {
    -webkit-transform: rotate(-180deg)
}

.menu-button.is_open .menu-icon {
    height: 0;
}

.menu-button.is_open .menu-icon:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 100%;
    top: 0;
    bottom: 0;
}

.menu-button.is_open .menu-icon:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100%;
    top: 0;
    bottom: 0;
}

._inner .header__flex-wrapper .header-items .menu-icon,
._inner .header__flex-wrapper .header-items .menu-icon:before,
._inner  .header__flex-wrapper .header-items .menu-icon:after{ background: #000 }

.over-content nav:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(288.4deg, rgba(161, 163, 187, 0.3) 5.41%, rgba(234, 234, 234, 0.111) 93.94%)
}

.over-content nav {
    padding: 80px 30px;
    padding-left: 80px;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    position: relative;
    -webkit-align-items: flex-start !important;
    align-items: flex-start !important;
    box-sizing: border-box;
    min-height: 100%
}

.over-content nav a {
    display: block;
    padding: 5px 0;
    margin: 5px 0;
    font-size: 16px;
    color: #000;
    text-transform: uppercase;
}
.contacts__phone p{ margin: 10px 0}
.contacts__phone a{ font-size: 1.2em; font-weight: bold; display: block }

.section-map{ width: 100%; background: #f0f0f0; box-sizing: border-box; height: 300px; filter: grayscale(0.5)}


._inner header .header__flex-wrapper .header-items .menu-icon:after {background: #000;}
._inner header .header__menu a {color: #000;}
._inner header .header-item__logo a svg path {fill: #000; }


section.page{padding-top: 120px;padding-bottom: 40px;}
section.page article{ max-width: 1300px;margin: auto;}
section.page h3, section.page h4, section.page h5 {font-size: 18px;line-height: 1.8em;font-weight: 600;color: var(--dark);margin:10px 0}


@media only screen and (min-width: 768px) {
    BODY {
        line-height: 1.4;
        font-size: 16px;
    }
    .contacts__phone a{display: inline-block }


}

@media only screen and (min-width: 769px) {



}

@media only screen and (min-width: 1025px) {
    .__wrapper {
        padding-top: 130px !important;
    }

    .__side-padding {
        padding: 0 20px;
    }


    section.page{
        padding-top: 220px;
    }




    header .header-menu-item {
        display: block;
        z-index: 100
    }

    header .menu-items {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center
    }




}

@media only screen and (min-width: 1280px) {

    .section-map{ height: 400px;}

}