body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
/*    font-family: 'Wix Madefor Display', sans-serif;*/
/*    font-family: 'Rubik', sans-serif;*/
    font-size: 14px;
    letter-spacing: -.5px;
    background: #fff;
/*    background-color: #f1f1f1;*/

/*
        background: url("../images/bg.jpg") center no-repeat fixed;
    background-size: cover;
*/

}

*,
*:before,
*:after {
    box-sizing: border-box;
}

p {
/*    margin: 0;*/
}


/* CONTAINER
==================== */

.container {
    width: 100%;
    max-width: 1200px;
    /*    max-width: 1420px;*/
    margin: 0px auto;
    padding: 0;
}

.container__main {
    width: 100%;
    max-width: 1920px;
    margin: 0px auto;
    padding: 0;
}

.about-container {
    width: 100%;
/*    max-width: 1400px;*/
    margin: 0px auto;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

p {
    margin 0 0 10px;
}


/* HEADER
==================== */

.header {
    width: 100%;
    position: fixed;
    margin: 0 auto;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: opacity 1s linear;
    background-color: #f1f1f1;
    border-bottom: 1px solid #e1e1e1;
}

.header__logo {
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    transform: scale(.9)
}


/* HEADER FOR PAGE
==================== */

.header__page {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding-right: 20px;
/*    background-color: #fff;*/
    /*    background-image: linear-gradient(to top, #2a2a34, #242027, #1c181c, #120e10, #000000);*/
    border-bottom: 2px solid #ffd200;
    box-shadow: inset 0px -12px 9px -13px rgba(0, 0, 0, 0.19);
}


/* HEADER FIXED
==================== */

.main__slide {
    width: 100%;
    height: 500px;
    margin-top: 80px;

}

.slide__wrapper {
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.slide-image {
    width: auto;
    height: 500px;
}

.header__fix {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding-right: 20px;
/*    background-color: #fff;*/
    /*    box-shadow: inset 0px -12px 9px -13px rgba(0,0,0,0.19);*/
    transition: opacity 1s linear;
}

.header__inner {
    height: 80px;
    display: flex;
    padding-right: 20px;
/*    border-radius: 80px;*/
/*    margin-top: 20px;*/
    justify-content: space-between;
    align-items: center;
    color: #fff;
    transition: all .3s ease;
/*    background-color: #fff;*/
/*    border: 1px solid #e1e1e1;*/
/*    border: 1px solid #f1f1f1;*/

}

.header__inner:hover {
}

.header.fixed {
    display: block;
    opacity: 1;
    background-color: #fff;
    color: #fff;
}

.header.fixed .header__inner {
    height: 60px;
}


.header__logo__fix {
    transform: scale(.8);
}

.header__social {
    display: flex;
    flex-direction: row;
    margin: auto;
    margin-left: 20px;
    text-align: right;
}

.header__social-item {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px 0;
    filter: grayscale(1);
    opacity: 1;
    transition: all .2s linear;
}

.header__social-item:hover {
    filter: grayscale(0);
    opacity: 1;
}

.header__phone {
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-left: 40px;
    text-align: right;
}

.header__phone-title {
    color: #999;
    font-size: 10px;
    font-weight: 500;
    text-transform: capitalize;
}

.header__phone-number {
    font-family: Lato, Tahoma;
    text-decoration: none;
    color: #000;
    font-size: 17px;
    font-weight: 600;
}


/* SERV
==================== */

.serv__menu {
    position: absolute;
/*    top: 100px;*/
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 1400px;
    opacity: 0;
    pointer-events: none;
    transition: .2s ease;
}

.nav__serv {
    cursor: pointer;
}

.nav__serv:hover .serv__menu {
    pointer-events: visible;
    opacity: 1;
    padding-top: 20px;
}

.serv__menu-items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(0, 0, 0, .98);
    box-shadow: 0 0 40px 0 rgba(0,0,0, .2);
    padding: 40px;
}

.serv__menu-item {
    width: 25%;
    display: flex;
    padding: 10px;
}

.serv__menu-item-inner {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
/*    background-color: #ccc;*/
}

.serv__title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    margin-bottom: 20px;
    transition: all .1s ease;
}

.serv__link {
    display:inline-block;
    width: 100%;
    padding: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #ccc;
    text-decoration: none;
    margin-bottom: 6px;
    transition: all .1s ease;
}

.serv__link:hover, .serv__title:hover {
    color: darkorange;
    transform: translateX(2px);
}


.serv__link:hover::before {
    content: "| ";

}



/* NAV
==================== */

.nav {
    display: flex;
    font-size: 14px;
    font-weight: 400;
}

.nav__link {
    padding: 8px 10px;
    margin-left: 10px;
    color: #222;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    /*    border-radius: 20px;*/
    opacity: 1;
    transition: all .2s ease;
}

.nav__link_fix {
    color: #222;
    font-weight: 600;
}

.nav__link.blk {
    color: #000;
}

.nav__link:hover {
    opacity: 1;
    border-bottom: 3px solid #ffd200;
    color: orange;
}


/* Section
============================*/

.section {
    padding: 0 0 60px;

    background-color: #100e17;
}

.section__header {
    width: 100%;
    max-width: 950px;
    margin: 0 auto 40px;
    text-align: center;
}

.section__title {
    font-size: 24px;
    color: #fff;
    text-transform: uppercase;
}

.section-404 {
    width: 100%;
    height: 45vh;
    margin: 200px auto;
    text-align: center;
    font-size: 32px;
    line-height: 2;
}


/* SLIDER
==================== */

#slider {
    background: #fff;
    /*   border: 5px solid #eaeaea;*/
    /*   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);*/
    height: 500px;
    width: 100%;
    margin: 80px auto 0;
    overflow: visible;
    position: relative;
}

#mask {
    width: 100%;
    overflow: hidden;
/*    height: 100%;*/
}


/* Список изображений */

#slider ul {
    margin: 0 auto;
    padding: 0;
    position: relative;
}

#slider li {
    width: 100%;
    /* Ширина изображения */
    height: 200px;
    /* Высота изображения */
    position: absolute;
    top: 0px;
    /* Исходное положение  (за пределами слайдера) */
    margin: 0 auto;
    list-style: none;
    /*    transform: translate3d(0%, 0%, 0) scale(1);*/
}

.sld__img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*    min-height: 100%;*/
    width: auto;
}

#slider li.firstanimation {
    animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
    animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
    animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
    animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
    animation: cyclefive 25s linear infinite;
}


/* Анимация */

@keyframes cycle {
    0% {
        top: 0px;
    }
    /* При запуске слайдера, первое изображение уже видимо */
    4% {
        top: 0px;
    }
    /* Стартовая позиция */
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    /* С 4% до 16 % (3 секунды) изображение видимо */
    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    /* с 16% до 20% (1 секунды)выход изображения*/
    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    /* Возвращение на исходную позицию за пределами маски */
    92% {
        top: -325px;
        opacity: 0;
        z-index: 0;
    }
    96% {
        top: -325px;
        opacity: 0;
    }
    /* С 96% до 100% (1 секунда) – вход */
    100% {
        top: 0px;
        opacity: 1;
    }
}

@keyframes cycletwo {
    0% {
        top: -325px;
        opacity: 0;
    }
    /* Исходная позиция за пределами маски */
    16% {
        top: -325px;
        opacity: 0;
    }
    /* Начало движения с 16% */
    20% {
        top: 0px;
        opacity: 1;
    }
    24% {
        top: 0px;
        opacity: 1;
    }
    /* С 20% до 24% (в течении 1 секунды) — вход*/
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    /* С 24% до 36 % (3 секунды) изображение видимо */
    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    /* С 36% до 40% (1 секунда)— выход */
    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    /* Возврат на исходную позицию */
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cyclethree {
    0% {
        top: -325px;
        opacity: 0;
    }
    36% {
        top: -325px;
        opacity: 0;
    }
    40% {
        top: 0px;
        opacity: 1;
    }
    44% {
        top: 0px;
        opacity: 1;
    }
    56% {
        top: 0px;
        opacity: 1;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cyclefour {
    0% {
        top: -325px;
        opacity: 0;
    }
    56% {
        top: -325px;
        opacity: 0;
    }
    60% {
        top: 0px;
        opacity: 1;
    }
    64% {
        top: 0px;
        opacity: 1;
    }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cyclefive {
    0% {
        top: -325px;
        opacity: 0;
    }
    76% {
        top: -325px;
        opacity: 0;
    }
    80% {
        top: 0px;
        opacity: 1;
    }
    84% {
        top: 0px;
        opacity: 1;
    }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
}


/* Индикатор выполнения */

.progress-bar {
    position: relative;
    top: -5px;
    width: 680px;
    height: 5px;
    background: #ffd200;
    animation: fullexpand 25s ease-out infinite;
}


/* Строка состояния анимации */

@keyframes fullexpand {
    /* В этих ключевых кадрах анимация стационарна */
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        width: 0%;
        opacity: 0;
    }
    /* В этих — оживает */
    4%,
    24%,
    44%,
    64%,
    84% {
        width: 0%;
        opacity: 0.3;
    }
    /* В этих — плавно заполняется */
    16%,
    36%,
    56%,
    76%,
    96% {
        width: 100%;
        opacity: 0.7;
    }
    /* В этих ключевых кадрах индикатор выполнения завершил свой путь */
    17%,
    37%,
    57%,
    77%,
    97% {
        width: 100%;
        opacity: 0.3;
    }
    /* В этих ключевых кадрах индикатор выполнения исчезнет, а затем возобновит цикл */
    18%,
    38%,
    58%,
    78%,
    98% {
        width: 100%;
        opacity: 0;
    }
}

#slider .tooltip {
    background: rgba(0, 0, 0, 0.7);
    width: 300px;
    height: 60px;
    position: relative;
    bottom: 75px;
    left: -320px;
}

#slider .tooltip h1 {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 10px;
}

#slider .tooltip {
    … transition: all 0.3s ease-in-out;
}

#slider li#first: hover .tooltip,
#slider li#second: hover .tooltip,
#slider li#third: hover .tooltip,
#slider li#fourth: hover .tooltip,
#slider li#fifth: hover .tooltip {
    left: 0px;
}

#slider: hover li,
#slider: hover .progress-bar {
    animation-play-state: paused;
}


/* ABOUT
==================== */

.about {
    padding-top: 80px;
/*    padding-bottom: 140px;*/
    background-color: #222;
    position: relative;
/*    padding-bottom: 80px;*/
}

.video-header {
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(50px);
    z-index: 0;
}

.about__text {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    margin-bottom: 60px;
    color: #fff;

}

.about__video {
    width: 100%;
/*    border-radius: 20px;*/
    position: relative;
    overflow: hidden;
}

#video_tag {
    width: 100%;
    height: auto;
}

.video-mask {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, .3);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all .2s linear;
}

.showreel__wrapper:hover .video-mask {
    background: rgba(0,0,0,.8);
}

.video-text {
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    margin: 40px;
    text-align: right;
    transition: all .3s linear;
}

.showreel__wrapper:hover .video-text {
    color: gold;
}


.about__block_title {
    font-size: 40px;
    text-transform: uppercase;
    color: #000;
    font-weight: 700;
    margin: 50px auto 30px 50px;
}

.btn__showreel {
    margin: 0 auto;
    padding: 18px;
    background-color: #fff;
    width: 100%;
    text-align: center;
    border-radius: 50px;
    font-size: 28px;
    /*    text-transform: uppercase;*/
    color: #000;
    font-weight: 500;
    border: 3px solid gold;
    transition: all .2s linear;
}

.btn__showreel:hover {
    background-color: gold;
    border: 3px solid transparent;
    box-shadow: 0px 20px 20px -10px rgba(255, 155, 0, .4);
}

.showreel__wrapper {
    width: 100%;
    height: 0px;
    padding-bottom: 35.8%;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    /*    overflow: hidden;*/
    cursor: pointer;
}

.showreel__wrapper:hover .pulse {
    background-color: #fff;
    width: 110px;
    height: 110px;
}

.showreel__wrapper:hover .showreel__image {
    width: 100%;
    /*    filter: contrast(0);*/
    filter: grayscale(0%);
}

.showreel__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    transform: translate(-50%, -50%);
}

.showreel__image {
    width: 100%;
    position: absolute;
    z-index: 10;
    margin: 0 auto;
    transition: all .3s linear;
}

.arrow-right {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #333;
}

.tg-pulse {
    position: fixed;
    bottom: 50px;
    left: 60px;
    z-index: 2000;
    background-color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: pulse 3s linear infinite;
    transition: all .2s linear;
}

.tg__item {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 216, 0, .7), 0 0 0 0 rgba(255, 216, 0, .7);
    }
    50% {
        box-shadow: 0 0 0 40px rgba(255, 216, 0, 0), 0 0 0 0 rgba(255, 216, 0, .7);
    }
    /*
    80%
    {
        box-shadow: 0 0 0 40px rgba(255,216,0, 0), 0 0 0 60px rgba(255,216,0, 0);
    }
    100%
    {
        box-shadow: 0 0 0 0 rgba(255,216,0, 0), 0 0 0 40px rgba(255,216,0, 0);
    }
*/
}

.pulse {
    background-color: #ffd800;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: animate 3s linear infinite;
    transition: all .1s linear;
}

@keyframes animate {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 216, 0, .7), 0 0 0 0 rgba(255, 216, 0, .7);
    }
    40% {
        box-shadow: 0 0 0 60px rgba(255, 216, 0, 0), 0 0 0 0 rgba(255, 216, 0, .7);
    }
    80% {
        box-shadow: 0 0 0 60px rgba(255, 216, 0, 0), 0 0 0 60px rgba(255, 216, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 216, 0, 0), 0 0 0 60px rgba(255, 216, 0, 0);
    }
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 0;
    outline-width: 0;
}


.video-block {
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    position: relative;
}

.video-block video {
    width: 100%;
    position: absolute;
    top: -50%;
    left: -50%;
    transform: translate(50%, 50%);
}


/* INTRO
==================== */

.intro {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 500px;
    max-height: 500px;
    padding-top: 300px;
}

.intro__block__text {
    display: inline-block;
    width: 810px;
    height: 400px;
    z-index: 1;
    background-color: #ffd200;
    background-image: linear-gradient(to right bottom, #ffde00, #ffcd00, #ffbc00, #ffac00, #ff9b00);
    transition: box-shadow .5s linear;
}

.intro__block__text:hover {
    box-shadow: 0 0 20px rgba(255, 90, 0, 1);
    /* Параметры тени */
}

.intro__block__title {
    font-size: 40px;
    text-transform: uppercase;
    color: #000;
    font-weight: 700;
    margin: 50px auto 30px 50px;
}

.about__text-items {
    width: 100%;
    display: flex;
/*    justify-content: space-between;*/
}

.main__text {
    width: 50%;
    max-width: 900px;
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
/*    color: #333;*/
}

.h1__text {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    padding-left: 20px;
/*    color: #333;*/
}

.h1__text::before {
    content: "";
    width: 4px;
    height: 80px;
    background-color: gold;

    position: absolute;
    top: 0;
    left: 0;

}


.block__text2 {
    width: 100%;
/*    max-width: 600px;*/
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: #333;
    padding-bottom: 20px;
    text-align: right;
}

.intro__block__info {
    position: relative;
    top: -350px;
    left: 390px;
    display: inline-block;
    background-color: #000;
    width: 810px;
    height: 400px;
    z-index: 2;
    transition: box-shadow .5s linear;
}

.intro__block__info:hover {
    box-shadow: 0 0 20px rgba(255, 90, 0, 1);
    /* Параметры тени */
}


/* TITLES
==================== */

.title__section {
    margin: 124px auto 60px;
    width: 100%;
    font-size: 53px;
    max-width: 1200px;
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
}

.title__section-s {
    font-size: 53px;
    font-weight: 400;
    font-size: 40px;
    text-transform: uppercase;
}

.main__title-s {
    font-weight: 400;
    color: #ccc;
}


.title {
    width: 100%;
    max-width: 950px;
    margin: 0px auto 40px;
    text-align: center;
    padding-top: 130px;
}

.title__text {
    font-size: 40px;
    font-weight: 800;
/*    text-transform: uppercase;*/
    color: #fff;
    margin: 0 auto;
}

.title__text_black {
    font-size: 40px;
    font-weight: 800;
    /*    text-transform: uppercase;*/
    color: #000;
    margin: 0 auto;
}


/* BUTTON
==================== */

.btn {
    position: absolute;
    vertical-align: top;
    padding: 10px 15px;
    border: 3px solid #000;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 80px;
    margin-left: 50px;
    transition: background .2s linear, color .1s linear;
}

.btn:hover {
    background-color: #fff;
    color: #333;
    border: 3px solid #fff;
}


/* SERVICES
==================== */

.services {
    display: flex;
    flex-direction: column;
    width: 100%;
/*    overflow: hidden;*/
}


.serv__image {
    position: absolute;

}

.image-right {
    right: 60px;
}

.image-left {
    left: 30px;
}

.serv__image img {
    filter: brightness(.8);
    transition: all .2s ease;
}

.serv__image:hover img{
    filter: brightness(1);
}




/* Start ITEM
==================== */

.start__items {
    display: flex;
    align-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
}
.start__item {
    width: 50%;
    padding: 10px;
    text-decoration: none;
    color: #111;
}
.start__item-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 280px;
    border-radius: 25px;
/*    background-color: #fff;*/
    transition: all .2s ease;
    padding: 30px;
}

.start__item-inner:hover {
    background-color: gold;
}

.start__item-inner:hover .start__icon {
    transform: translateY(-25px) rotate(-5deg) scale(1.2);
}

.start__title {
    font-size: 18px;
    font-weight: 700;
}

.start__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease;
}

.serv__icon {
    width: 250px;
    height: 250px;
}


/* CONTENT
==================== */

.serv__content-block {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    position: relative;
}

.content__pad-left {
    padding-left: 60px;
}

.content__pad-right {
    padding-right: 60px;
}

.serv__content-b1 {
    width: 100%;
    height: 60%;
    padding: 10px;
}

.serv__content-b2 {
    width: 60%;
    height: 40%;
    padding: 10px;
}

.serv__content-b3 {
    width: 40%;
    height: 40%;
    padding: 10px;
}

.serv__content-b4 {
    width: 50%;
    height: 50%;
    padding: 10px;
}

.serv__content__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    padding: 24px;
/*    background-color: #333;*/

    position: relative;

    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: all .2s ease;
}

.serv__content__inner p {
    margin: 0;
    transition: all .2s ease;
}
.serv__content__inner:hover {
    transform: translateY(-5px);
}

.serv__content__inner:hover .serv__content__icon {
    transform: rotate(0deg);
    background-color: #000;
}

.serv__content__icon {
    position: absolute;
    bottom: 25px;
    right: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 14px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.2);
    transform: rotate(45deg);
    z-index: 1;
    transition: all .2s ease;
}

.serv__content__title {
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    z-index: 1;
    padding: 14px 20px;
    background-color: #181818;
    border-radius: 30px;
}

.serv__content__txt {
    display: inline-flex;
    font-size: 20px;
    font-weight: 600;
    z-index: 1;
    border-radius: 30px;
}

.serv__content__img {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    top: -50%;
    left: -50%;
    transform: translate(50%, 50%);
}






/* SERVICES ITEM
==================== */


.serv__items {
    display: flex;
    flex-wrap: wrap;

}

.serv__item-section-1 {
    position: relative;
    display: flex;
    min-width: 50%;
    min-height: 100vh;
    transition: all .2s ease;
}

.serv__content-img {
    min-width: 50%;
    background-color: #222;
}


.serv__item-section-2 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
/*    min-height: 100vh;*/
}

.serv__item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0px 130px 140px;
    align-content: center;
}

@keyframes gradient {
    0% {
        background-position: 50% 50%;
    }
    /*
    50% {
        background-position: 100% 50%;
    }
*/
    100% {
        background-position: 0% 50%;
    }
}



.serv-color-gray {
    background: #eaeced url("../images/serv_image_brand_.jpg") center no-repeat;
/*    background-size: cover;*/
    color: #2e3045;
}

.serv-color-gold {
    background: #ddd6c9 url("../images/serv_image_design-.jpg") center no-repeat;
/*    background-size: cover;*/
    color: #2e3045;


}

.serv-color-black {
    background: #111 url("../images/big-bg-.jpg") center no-repeat;
    background-size: cover;
/*    color: #ffd200;*/
    color: #f4f4f4;
}

.serv-color-blue {
    background: #41ccff url("../images/serv_image_web.jpg") center no-repeat;
    color: #2e3045;
}

.serv-color-green {
    background: #41ffd5 url("../images/serv_image_smm.jpg") center no-repeat;
    color: #2e3045;
}

.serv-color-red {
/*    background: #f12121 url("../images/serv_image_smm.jpg") center no-repeat;*/
    background: #fc4242 url("../images/serv_image_smm_.jpg") center no-repeat;
/*    background-size: cover;*/
    color: #fff;
}

.pos__image {
    background: url("../images/pos.png") center no-repeat;
    display: block;
    padding: 0;
    width: 400px;
    height: 260px;
    position: absolute;
    top: -40px;
    right: -80px;
}

.serv__item:hover .pos__image {
    animation: gradient 2s ease infinite alternate;
    transform: translateY(-4px);
}

.serv__item:hover .serv-color-black {
    color: yellow;
}

.serv__item:hover .serv__item_icon {
    padding-top: 0px;
    /*    fill: #ffd200;*/
    fill: #fff;
}

.serv__item:hover .icon__box {
    top: 20px;
    transform: rotateZ(45deg);
}



.serv__item:hover .serv-title-black {
    color: #000;
}

.serv__item:hover .text__item-1 {
    display: block;
}




.serv__content-50 {
/*    display: flex;*/
    flex-direction: column;
    width: 50%;
}

.serv__content-70 {
/*    display: flex;*/
    flex-direction: column;
    min-width: 70%;
}


.serv__item-title {
/*    padding: 45px 40px 40px 50px;*/
    margin-bottom: 60px;
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    transition: opacity .2s linear;
}

.serv__list-title::after {
    content: "";
    display: block;
    background-color: #fff;
    width: 10%;
    height: 2px;
    position: relative;
    top: 10px
}

.serv-title-black {
    color: #2e3045;
}

.serv__item-subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;

}

.serv__list-title {
    font-size: 20px;
/*    color: #4f4e45;*/
    font-weight: 600;
    opacity: 1;
    transition: opacity .2s linear;
}

.serv__list {
/*    position: absolute;*/
    bottom: 0;
    width: 100%;
/*    padding: 10px 40px;*/
    margin-top: 30px;
    border-radius: 0;
    color: #222;
    transform: translateY(0), scale(1);
    transition: all .3s linear;
}

.list-black {
    color: #fff;
}

.serv__item:hover .serv__list {

}

.serv__item:hover .list-black {
    color: #fff;
}

.serv__item_icon {
    padding-top: 4px;
    width: 40px;
    height: 40px;
    margin: 20px auto;
    fill: #333;
    transition: all .2s linear;
}

.icon__box {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 4px;
    transition: all .5s linear;
    transform: rotateZ(0deg);
    background-color: black;
}

.icon__size_1 {
    width: 70px;
}

.btn__serv {
    display: inline-flex;
    margin: 30px 0;
    padding: 18px 30px;
/*    border: 3px solid #000;*/
    border-radius: 50px;
    background-color: #000;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
/*        text-transform: uppercase;*/
    text-decoration: none;
    transition: background .2s linear, color .1s linear;
}

.btn__serv:hover {
    color: #111;
    background-color: gold;
}


/* LIST ========== */

.list {
    padding: 0 0 0 16px;
    font-size: 18px;
    line-height: 1.6;
    text-align: left;
    font-weight: 600;
    transition: all .2s linear;
}

/* AD
==================== */

.ad__banner {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 40px;
    transition: all .1s linear;
}

.ad__image {
    width: 100%;
}

.ad__banner:hover {
    filter: brightness(1.1);
}


/* WORKS
==================== */

.works__nav {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.works__nav-link {
    margin: 2px 2px;
    font-size: 16px;
    font-weight: 700;
    color: #888;
    text-decoration: none;
    background-color: #111;
/*    border: 1px solid #222;*/
    padding: 16px 20px;
    border-radius: 50px;
/*    text-transform: uppercase;*/
/*    opacity: .7;*/
/*    border-bottom: 2px solid #333;*/
    transition: all .2s ease;
}

.works__nav-link:hover ,.works__nav-link.active{
    font-weight: 700;
    color: #222;
    opacity: 1;
    background-color: gold;
/*    border-bottom: 2px solid gold;*/
    background-color: gold;
}


/* PORTFOLIO
==================== */

.work {
    max-width: 90%;
/*    max-width: 1200px;*/
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
/*    margin-top: 50px;*/
}

.work__item {
/*    width: 25%;*/
    width: calc(33.3% - 20px);
    height: 0px;
    padding-bottom: 18%;
    margin: 10px;
    position: relative;
    overflow: hidden;
}

.work__item:hover .work__content {
    opacity: 1;
}

.work__image {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: transform .3s ease-in;
}

.work__item:hover .work__image {
    transform: translate3d(-50%, -50%, 0) scale(1.1);
}

.work__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(255, 216, 0, .95);
    padding: 30px;
    opacity: 0;
    transition: opacity .2s linear;
}

.work__cat {
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: 800;
    color: #333;
    text-transform: uppercase;
}

.work__title {
    display: block;
    /*    background-color: #333;*/
    padding: 6px;
    /*    margin-bottom: 10px;*/
    font-size: 12px;
    font-weight: 700;
    border-left: 2px solid #333;
    /*    text-transform: uppercase;*/
    color: #333;
}

.hide {
    display: none;
}

.all__works {
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 60px 0 0 0;
}

.btn__white {
    display: inline-flex;
    margin: 30px 0;
    padding: 18px 30px;
/*    border: 3px solid #000;*/
    border-radius: 50px;
    background-color: #fff;
    font-size: 18px;
    font-weight: 600;
    color: #111;
/*        text-transform: uppercase;*/
    text-decoration: none;
    transition: background .2s linear, color .1s linear;
}

.btn__white:hover {
    color: #111;
    background-color: gold;

}


.btn__black {
    display: inline-block;
    padding: 20px 20px;
    border: 3px solid #333;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 20px;
    transition: all .2s ease;
}

.btn__black:hover {
    background-color: orange;
    color: #fff;
    border: 3px solid #333;
    box-shadow: 4px 4px 0 0 orange;
    transform: translate(-4px, -4px);

}

/* ADVANTAGE
==================== */

.advantage {
    display: flex;
    width: 100%;
    max-height: 100%;
    padding-bottom: 100px;
/*        background-color: #ffd200;*/
        background-color: #f1f1f1;
}

.advantage__items {
    display: flex;
    flex-wrap: wrap;

}

.advantage__item {
    width: 50%;
    padding: 10px;
}

.advantage__item-inner {
    display: flex;
    height: 220px;
    padding: 30px;
/*    background-color: #fff;*/
    border: 1px solid #e1e1e1;
    overflow: hidden;
    position: relative;
}

.advantage__item-inner:hover {
    box-shadow: 0 0 40px 0 rgba(0,0,0, .05)
}

.advantage__icon {
    width: 30%;
    position: relative;
}

.avd-icon {
    position: absolute;
    top: 0;
    left: -100px;
    width: 150px;
    height: 150px;
    fill: gray;
    opacity: .2;
    transition: all .2s ease;
}

.advantage__item-inner:hover .avd-icon {
    left: -50px;
    fill: orange;
    opacity: 1;
}

.advantage__content {
    width: 70%;
    position: relative;

}

/*
.advantage__item-inner::before {
    display:block;
    content: "";
    width: 100px;
    height: 0px;
    background-color: orange;

    position: absolute;
    top: 0;
    left: 0;

    transition: all .3s linear;
}
*/

.advantage__item-inner:hover::before{
    width: 100px;
    height: 100%;
}

.advantage__item-inner h3 {
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: 800;
}

.advantage__item-inner p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    opacity: 0.5;
    pointer-events: none;
    transition: all .2s linear;
}

.advantage__item-inner:hover p{
    opacity: 1;
/*    pointer-events: visible;*/
}



/* STAGE
==================== */

.stage {
    display: flex;
    width: 100%;
    max-height: 100%;
    padding-bottom: 100px;
/*        background-color: #ffd200;*/
    background-color: #222;
    background: #222 url("../images/bg.jpg") center no-repeat fixed;
    background-size: cover;
}

.stage__items {
    display: flex;
    flex-wrap: wrap;

}

.stage__item {
    width: 25%;
    padding: 10px;
}

.stage__item-inner {
    display: flex;
    height: 260px;
    padding: 30px;
/*    background-color: #fff;*/
/*    border: 1px solid #333;*/
/*    overflow: hidden;*/
    position: relative;
    color: #fff;
}

.stage__item-inner:hover {
    box-shadow: 0 0 40px 0 rgba(0,0,0, .05)
}

.stage__icon {
    position: absolute;
    width: 30%;
}

.stg-icon {
    position: absolute;
    top: 0;
    left: -100px;
    width: 150px;
    height: 150px;
    fill: gray;
    opacity: .2;
    transition: all .2s ease;
}

.stage__item-inner:hover .stg-icon {
    left: -80px;
    fill: orange;
    opacity: 1;
}

.stage__content {
    width: 100%;
    position: relative;

}

.stage__item-inner:hover::before{
    width: 100px;
    height: 100%;
}

.stage__item-inner h3 {
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: 800;
}

.stage__item-inner p {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    opacity: 0.5;
    pointer-events: none;
    transition: all .2s linear;
}

.stage__item-inner:hover p{
    opacity: 1;
/*    pointer-events: visible;*/
}



/* BUTTON PRICE
==================== */

.btn_price {
    position: absolute;
    vertical-align: top;
    padding: 10px 15px;
    border: 3px solid #fff;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    margin: 20px 30px;
    transition: background .2s linear, color .1s linear;
}

.btn_price:hover {
    background-color: #ffd200;
    color: #000;
    border: 3px solid #fff;
}


/* ABOUT
==================== */


/*
.about {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    max-height: 100%;
    height: auto;

}

*/


/* CLIENTS
==================== */

.clients {
    background-color: #fff;
    padding-bottom: 100px;
}

.client {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.client__item {
    width: 12.5%;
    height: 80px;
    position: relative;
    overflow: hidden;
}

.client__image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate3d(-50%, -50%, 0) scale(.5);
    filter: grayscale(.5) opacity(.9);
    transition: filter 0.2s linear;
}

.client__image:hover {
    filter: grayscale(0);
}


/* ABOUT US
==================== */

.about-us {
    background: url("../images/bg.jpg") center no-repeat fixed;
    background-size: cover;
}

.about-us__block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    color: #ccc;
    margin: 0px auto;
    padding-bottom: 60px;
}

.about-us__intro {
    width: 45%;
    padding-right: 30px;
}

.about-us__main {
    width: 55%;
    padding-left: 30px;
}

.about-us__text {
    margin: 10px 0 20px;
}

.about-us__textbig {
    font-size: 20px;
    margin: 20px 0;
}

.about-us__link {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 100;
}

.about-us__link:hover {
    color: gold;
}


/* CONTACTS
==================== */

.contacts {
    width: 100%;
    max-height: 100%;
    padding-bottom: 90px;
    /*    background-color: rgba(240, 240, 240, 1);*/
    background-color: #f1f1f1;
}

.contacts__block {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    height: 450px;
    margin: 0 auto 40px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
    /* Параметры тени */
    transition: box-shadow 0.3s ease-in-out;
    /*    border-radius: 20px;*/
}

.contacts__block:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    /* Параметры тени */
}

.contacts__block_item {
    width: 100%;
    height: 100%;
}

.contact {
    width: 50%;
}

.contact__item {
    display: inline-flex;
    flex-direction: column;
    margin-left: 40px;
    margin-right: 60px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.contact__text {
    font-weight: 500;
    line-height: 1.6;
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 10px;
    color: #000;
}

.contact__phone {
    font-weight: 500;
    font-size: 16px;
    color: #000;
    line-height: 0;
    text-decoration: none;
}

.contact__phone:hover {
    color: #333;
}

.phone__item {
    margin: 10px 0;
}

.email__link {
    font-weight: 600;
    font-size: 16px;
    color: #000;
    line-height: 0;
    text-decoration: none;
}

.email__link:hover {
    color: #333;
}

.contact__block__title {
    font-size: 30px;
    font-weight: 700;
    color: #000;
/*    margin-bottom: 30px;*/
}


.link {
    display: inline-flex;
    min-width: 200px;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 8px;
    margin: 2px 0;
/*    background-color: #f1f1f1;*/
/*    border-radius: 50px;*/
    border-bottom: 1px solid gold;
    text-decoration: none;
    transition: all .2s ease;
}

.link:hover {
    background-color: gold;
}

.link:hover svg{
    fill: #333;
}

.link svg {
    width: 36px;
    height: 36px;
    padding: 4px;
/*    background-color: #ccc;*/
    fill: orange;
}

.link-tg, .link-phone {
    margin: 0 10px;
    color: #222;
    font-size: 16px;
    font-weight: 600;

}

.link-phone {
/*    font-family: lato, sans-serif;*/
    font-size: 16px;
    font-weight: 600;
}

.contact__link {
    display: inline-block;
    padding: 10px 15px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    border-radius: 50px;
    background-color: dodgerblue;
    text-decoration: none;
    transition: all .2s ease;
}

.contact__link:hover {
    color: #fff;
    background-color: deepskyblue;
}

.social {
    display: flex;
}

.social__item {
/*    width: 50px;*/
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    filter: grayscale(1);
    opacity: .8;
    transition: all .2s ease;
}

.social__item:hover {
    filter: grayscale(0);
    opacity: 1;
}

.map {
    width: 50%;
    height: 100%;
    border: 0px;
}

.form__text {
    font-size: 20px;
    font-weight: 700px;
}

.btn__send {
    padding: 10px 15px;
    border: 3px solid #000;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 80px;
    transition: background .2s linear, color .1s linear;
}

.btn__send:hover {
    background-color: #fff;
    color: #333;
    border: 3px solid #fff;
}


/* FOOTER */

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-height: 100%;
    background-color: #fff;
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    margin: 40px 0;
}

.footer__title {
    font-size: 20px;
    font-weight: 200;
    color: #000;
    line-height: 1.4;
    text-align: center;
    padding: 20px 0;
}

.footer__col:before {
    display: block;
    content: "";
    width: 80%;
    height: 2px;
    margin: 0 auto;
    background-color: #f1f1f1;
}

.footer__link {
    vertical-align: bottom;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    transition: background .2s linear, color .1s linear;
}

.footer__link:hover {
    background-color: #ffd200;
    color: #333;
}

.footer__col {
    display: block;
    max-width: 100%;
    height: auto;
    width: 25%;
    text-align: center;
    line-height: 1.6;
    padding: 10px;
    /*    background-color: #fff;*/
    /*    margin: 10px;*/
}

.copyright {
    padding: 20px 0;
    background-color: #111;
    font-size: 12px;
    color: #aaa;
    /*    text-align: center;*/
}

.copyright__link {
    vertical-align: bottom;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 600;
    color: #ccc;
    text-decoration: none;
}

.notice {
    margin: 12px 12px;
    font-size: 9px
}


/* BURGER ========== */

.burger {
    display: none;
    position: absolute;
    background: none;
    border: 0;
    padding: 20px 20px;
    cursor: pointer;
    outline: none;
}

.burger__item {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #000;
    font-size: 0;
    color: transparent;
    position: relative;
}

.burger__item:before,
.burger__item:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    left: 0;
    z-index: 1;
}

.burger__item:before {
    top: -6px;
    width: 80%;
}

.burger__item:after {
    bottom: -6px;
    width: 90%;
}


/* DETAILS
==================== */

.pages__details {
    padding: 40px 0;
    padding-top: 0;
    background: #222;
/*    background: linear-gradient(180deg, rgba(230, 230, 230, 1) 0%, rgba(220, 220, 220, 1) 48%, rgba(230, 230, 230, 1) 100%);*/
}

.pages__details-title {
    margin: 10px 0 10px 20px;
    padding-top: 20px;
    color: #fff;
}

.pages__details-block {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.details-item {
    width: 25%;
    padding: 6px;
}

.image__wrapper {
    width: 100%;
    height: 0px;
    padding-bottom: 60%;
    margin: 0px;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
}

.details-item:hover .image__wrapper {
    box-shadow: 0px 0px 50px 5px rgba(0, 0, 0, 1);
}

.details-image {
    position: absolute;
    width: 110%;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: transform .3s ease-in;
}

.details-item-info {
    font-size: 12px;
    color: #f1f1f1;
    margin: 10px 0;
    line-height: 1.4;
}

.details-item {
    cursor: pointer;
}

.details-item:hover .details-image {
    transform: translate3d(-50%, -50%, 0) scale(1.1);
}


/* увеличенная картинка */

#magnify {
    display: none;
    /* position: absolute; upd: 24.10.2016 */
    position: fixed;
    max-width: 1000px;
    height: auto;
    z-index: 9999;
    padding: 10px;
    background-color: #fff;
}

#magnify-video {
    display: none;
    position: fixed;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 9999;
/*    padding: 10px;*/
    background-color: #000;
}

#magnify img {
    width: 100%;
}

#magnify-video iframe {
/*        max-width: 100%;*/
    width: 1200px;
    height: 675px;
    border: 0;
    padding: 0px;
}


/* затемняющий фон */

#overlay {
    display: none;
    background: #333;
    position: fixed;
    top: 0;
    left: 0;

    height: 100%;
    width: 100%;
    opacity: 0.98;
    z-index: 9990;
}

/* кнопка закрытия */

#close-popup {
    position: absolute;
    top: 20px;
    right: 20px;

    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 0px;
    cursor: pointer;
/*    top: -50px;*/
/*    right: 5px;*/
}

#close-popup i {
    width: 60px;
    height: 60px;
    background: url(/images/close.svg) no-repeat center center;
    background-size: 26px 26px;
    display: block;
}

@keyframes rota {
    25% {
/*        transform: rotate(360deg);*/
        transform: scale(1.2);
    }
}

#close-popup:hover {
    animation: rota 2s infinite normal;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}


/* ====  */











/* MEDIA */

@media (max-width: 1199px) {
    .header {
        padding-right: 0px;
    }
    .header__inner__fix {
        height: 50px;
    }
    .header__logo__fix {
        margin: 0 auto;
        transform: scale(.7);
    }
    .intro__block__text {
        width: 100%;
    }
    .intro__block__info {
        top: -100px;
        left: 0px;
        width: 100%;
    }


    .services__block__text {
        width: 100%;
    }
    .services__block__info {
        top: 100px;
        left: 0px;
        width: 100%;
    }
    .work__item {
        width: calc(50% - 40px);
        padding-bottom: 30%;
    }
    .work {
        max-width: auto;
    }
    .price__tab {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 991px) {

    .main__slide {
    height: 250px;
}


.slide-image {
    width: auto;
    height: 250px;
}


    .nav {
        display: none;
        width: 100%;
        flex-direction: column;
        background-color: #000;
        text-align: right;
        position: absolute;
        top: 100%;
        right: 0;
    }
    .nav.show {
        display: flex;
    }
    .nav__link {
        padding: 10px 15px;
    }
    .burger {
        display: block;
    }




    /* ABOUT
==================== */
    .about__block {
        flex-wrap: wrap;
        margin: 50px 0 0;
    }
    .about__text {
        width: 100%;
        margin: 0;
    }
    .about__video {
        width: 100%;
    }
    .intro {
        height: auto;
    }
    .footer__col {
        width: 50%;
    }
    .header__logo__fix {
        padding: 0px 20px;
    }
    .client__item {
        width: 25%;
        height: 100px;
    }
    .client__image {
        transform: translate3d(-50%, -50%, 0) scale(.5);
    }
    .map {
        width: 100%;
        height: 400px;
    }




.serv__content {
    width: 100%;
}


}



@media (max-width: 576px) {
    .nav {
        display: none;
        width: 100%;
        flex-direction: column;
        background-color: #fff;
        text-align: left;
        position: absolute;
        top: 100%;
        box-shadow: 0 30px 25px 0px rgba(0, 0, 0, .2);
    }
    .nav.show {
        display: flex;
    }
    .header__social {
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .header__social-item {
        margin-left: 25px
    }
    .header__phone {
        margin-bottom: 30px;
    }




    .serv__menu {
    left: 100px;
    top: -30px;
    z-index: 1000;
    transform: translate(0, 0);
    width: calc(100% - 100px);
    max-width: auto;
    opacity: 0;
    pointer-events: none;
    transition: .2s ease;
}
    .serv__menu-items {
        height: 80vh;
        padding: 10px;
        overflow-y: scroll;
    }

    .serv__menu-item {
    width: 100%;
    }

    .serv__link {
        font-size: 14px;
    }





    .intro {
        padding-top: 150px;
    }
    /*     Slider*/
    #slider {
        height: 300px;
    }
    #slider li {
        height: 300px;
    }
    .sld__img {
        width: 300%;
    }

    .slider-image {
        width: 200%;
        text-align: center;
    }

    .intro__block__title {
        font-size: 36px;
        text-transform: uppercase;
        color: #fff;
        font-weight: 700;
        text-align: center;
        margin: 30px auto;
    }
    .intro__block__text {
        display: block;
        width: 100%;
        height: 150px;
        border-radius: 10px;
        background: none;
    }
    .about {
        padding-bottom: 0;
    }

    .showreel__wrapper {
        padding-bottom: 380px;
    }

    .showreel__btn {
        top:40%;
    }

    .btn__showreel {
        font-size: 16px;
        padding: 10px 10px;
        background-color: gold;
        box-shadow: 0px 15px 20px -10px rgba(255, 150, 0, 1);
    }
    .pulse {
        width: 100px;
        height: 100px;
    }
    .main__text {
        width: auto;
        max-width: 100%;
        font-size: 20px;
        margin: 0 auto;
        padding: 0 40px;
        text-align: center;
        font-weight: 700;
    }
    .block__text2 {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        padding: 0 10px;
        font-size: 16px;
        font-weight: 400;
        /*    text-align: center;*/
    }

    .about__video {
        padding: 0px;

    }

    .about__text-items {
        flex-direction: column;
    }

    .btn__white, .btn__black {
        font-size: 14px;
    }


    .h1__text {
        font-size: 15px;
        padding: 20px;
        text-align: center;
    }

    .h1__text::before {
        display: none;
    }

    .video {
    }

    .video-text {
        margin: 20px;
        font-size: 16px;
    }
    .intro__block__info {
        display: block;
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 220px;
        z-index: 2;
    }

.serv__item {
    padding: 20px 20px;

}

    .serv__content-50 {
    width: 100%;
}
    .serv__content-block {
    width: 100%;
}

.content__pad-left {
    padding-left: 0px;
}

.content__pad-right {
    padding-right: 0px;
}

.serv__content-b1 {
    width: 100%;
    height: 300px;
}

.serv__content-b2 {
    width: 100%;
    height: 250px;
}

.serv__content-b3 {
    width: 100%;
    height: 250px;
}

.serv__content-b4 {
    width: 100%;
    padding: 2px;
    height: 120px;
    }

    .start__inner {
        padding: 30px;
}

    .revers {
    flex-direction:
column-reverse
    }


    .title__section {
    font-size: 22px;
    margin: 60px auto 0px;
}

    .title__section-s {
    font-size: 19px;
}



    .serv__items {
        display: flex;
/*        flex-direction: row;*/
/*        flex-wrap: nowrap;*/
/*        padding-top: 20px;*/
/*        overflow-x: scroll;*/
/*        -webkit-overflow-scrolling: touch;*/
    }
    .serv__items::-webkit-scrollbar {
/*        display: none;*/
    }
    .serv__item-title {
        font-size: 30px;
        padding-left: 0px;
        padding-right: 0;
/*        position: absolute;*/
        z-index: 100;
    }
    .serv__item-section-1,
    .serv__item-section-2 {
        min-width: 100%;
/*        border-radius: 30px;*/
    }
    .serv__item_icon {
        opacity: 1;
    }
    .services__block__info {
        height: auto;
    }

    .serv__list {
        padding-left: 0px;
    }


    .serv-color-blue::before {
        content: "";
        background: #41ccff;
        opacity: .8;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
/*        z-index: -1;  */
        border-radius: 15px;
    }
    .serv-color-green::before {
        content: "";
        background: #41ffd5;
        opacity: .8;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
/*        z-index: -1;  */
        border-radius: 15px;
    }

    .pos__image {
        transform: scale(.55);
        top: -20px;
        left:0;
    }

    .work__item {
        margin: 10px auto;
        width: calc(50% - 15px);
        height: 0px;
        padding-bottom: 40%;
        margin: 6px 6px 75px 6px;
        /*         padding: 20px;*/
        overflow: visible;
    }

    .works__nav {
        flex-wrap: wrap;
    }

    .all__works {
        padding-top: 0;
    }


    .advantage__item {
        width: 100%;
    }

    .advantage__item-inner {
    height: 180px;
    }

    .advantage__item-inner h3 {
    font-size: 20px;
    opacity: 0.8;
    }

    .advantage__item-inner p {
    font-size: 13px;
    opacity: 0.8;
    }



    .pages__details-title {
        font-size: 14px;
        margin-bottom: 20px;
    }



    .contact {
        width: 100%;
    }
    .contact__item {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        margin-bottom: 40px;
    }
    .contact__link {
        width: 100%;
        font-size: 18px;
    }
    .contacts__block {
        height: auto;
    }
    .contacts__block_item {
        width: 100%;
    }
    .contact__block__title {
        font-size: 26px;
    }
    .title {
        max-width: 400px;
        margin: 0px auto;
        padding-top: 40px;
    }
    .title__text {
        font-size: 26px;
        font-weight: 700;
        padding-bottom: 20px;
    }
    .title__text_black {
        font-size: 26px;
        font-weight: 700;
        padding: 0 40px 20px;
        padding-bottom: 0;
    }
    .work__content {
        position: absolute;
        width: 100%;
        height: auto;
        bottom: -65px;
        background-color: rgba(0, 0, 0, 0);
        padding: 10px 0px;
        opacity: 1;
    }
    .work__image {
        border-radius: 10px;
    }
    .work__cat {
        color: #fff;
        margin-bottom: 2px;
        font-size: 12px;
    }
    .work__title {
        height: 20px;
        color: #ccc;
        margin-bottom: 5px;
        font-size: 10px;
        font-weight: 700;
        padding: 0;
    }
    .list {
        font-size: 16px;
    }
    .price {
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .price__tab {
        padding: 20px;
    }
    .price__tab-item_1 {
        margin-bottom: 20px;
        border-radius: 30px;
    }
    .price__tab-item_2 {
        margin-bottom: 20px;
        border-radius: 30px;
    }
    .price__tab-item_3 {
        border-radius: 30px;
    }
    .about-us__block {
        flex-wrap: wrap;
        margin: 20px auto;
    }
    .about-us__intro {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }
    .about-us__textbig {
        font-size: 14px;
    }

    .about-us__main {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .details-item {
        width: 50%;
    }
    #magnify-video iframe {
        width: 100%;
    height: 220px;
    border: 0;
    padding: 0;

    }


    #magnify-video {
        padding: 0px;
    }

    #video_tag {
/*    margin-top: 80px;*/
    width: 130%;
    height: auto;
}



}