/*
Theme Name: granitheme2
*/

@font-face {
    font-family: "Supera";
    font-weight: 100;
    src: url("../fonts/Supera/100.woff");
}

@font-face {
    font-family: "Supera";
    font-weight: 200;
    src: url("../fonts/Supera/200.woff");
}

@font-face {
    font-family: "Supera";
    font-weight: 300;
    src: url("../fonts/Supera/300.woff");
}

@font-face {
    font-family: "Supera";
    font-weight: 400;
    src: url("../fonts/Supera/400.woff");
}

@font-face {
    font-family: "Supera";
    font-weight: 500;
    src: url("../fonts/Supera/500.woff");
}

@font-face {
    font-family: "Supera";
    font-weight: 600;
    src: url("../fonts/Supera/600.woff");
}

@font-face {
    font-family: "Supera";
    font-weight: 700;
    src: url("../fonts/Supera/700.woff");
}

@font-face {
    font-family: "Supera";
    font-weight: 800;
    src: url("../fonts/Supera/800.woff");
}

body {
    margin: 0;
    font-family: "Supera";
    overflow-x: hidden;
}

.main {
    overflow: hidden;
}

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.grecaptcha-badge {
    visibility: hidden;
}

.message_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    position: fixed;
    top: 90vh;
    left: 50%;
    z-index: 1002;
    margin-left: -150px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.50);
    width: 300px;
    height: 70px;
    padding: 0 25px;
    background-color: #fff;
}

.error {
    color: #ff4040;
}
.success {
    color: #6eb24f;
}
.captcha_message {
    margin-top: 20px;
    font-size: 10px;
    text-align: center;
    color: #fff;
}
.captcha_message a {
    color: #fff;
}
/* Header */

.header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px;
    background-color: #fff;
    position: static;

}

.header.fixed {
    width: 100%;
    max-width: inherit;
    position: fixed;
    top: 0;
    z-index: 1000;
    opacity: 1;

    transition: 0.2s linear;

}

.header__logo img {
    width: 300px;
}

.header a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
}

.header__contacts {
    text-align: right;
}

.header__tel a {
    font-weight: 700;
}

.header__btn {
    font-weight: 600;
    cursor: pointer;
}

.header__btn a:hover {
    color: #ff4040;
    transition: 0.1s linear;
}

.header__media {
    display: block;
    margin-top: 7px;
}

.header__btn {
    margin-top: 7px;
}

.header__media i {
    cursor: pointer;
    font-size: 27px;
    margin-right: 10px;
}

.header__media i:last-child {
    margin-right: 0;
}

.header__media i:last-child:hover {
    color: #4caf50;
    transition: 0.1s linear;
}

.header__media i:first-child:hover {
    color: #039ae4;
    transition: 0.1s linear;
}

/* Navigation */

.nav {
    display: block;
}

.nav.active {
    display: block;
    width: 350px;
    height: 100%;
    padding-top: 170px;
    padding-left: 30px;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;

    box-shadow: 0 0 50px rgba(0,0,0,0.5);

}

.nav.active a {
    font-size: 25px;
}

.nav__item {
    display: flex;
    list-style-type: none;
    margin-top: 10px;
    justify-content: space-between;
}

.nav__item li {
    margin-right: 50px;
}

.nav__item:first-child {
    margin-top: 0;
}

.nav__link {
    text-decoration: none;
    margin-right: 65px;
    color: #000;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
}

.nav__link:last-child {
    margin-right: 0;
}

.nav__link:hover {
    color: #ff4040;
    transition: 0.1s linear;
}

.nav__link2 {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    margin-right: 74px;
    cursor: pointer;
}

.nav__link2:last-child {
    margin-right: 0;
}

.nav__link2:hover {
    color: #ff4040;
    transition: 0.2s linear;
}

.nav__link.active {
    color: #ff4040;
}

/* Nav toggle */

.nav-toggle {
    width: 62px;
    padding: 10px 0;
    display: none;

    font-size: 0;
    color: #000;

    border: 0;
    background: none;
    cursor: pointer;

    position: absolute;
    top: 60px;
    right: 24px;
    z-index: 1005;
}

.nav-toggle:focus {
    outline: 0;
}

.nav-toggle__item {
    display: block;
    width: 100%;
    height: 5px;

    background-color: #000;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

    transition: background .2s linear;
}

.nav-toggle.active .nav-toggle__item {
    background: none;
}

.nav-toggle__item:before,
.nav-toggle__item:after {
    content: "";
    width: 100%;
    height: 5px;

    background-color: #000;

    position: absolute;
    left: 0;
    z-index: 1;

    transition: transform .2s linear;
}

.nav-toggle__item:before {
    top: -20px;
}

.nav-toggle__item:after {
    bottom: -20px;
}

.nav-toggle.active .nav-toggle__item:before {
    transform-origin: left top;
    transform: rotate(45deg) translate3d(0px, -2px, 0)
}

.nav-toggle.active .nav-toggle__item:after {
    transform-origin: left bottom;
    transform: rotate(-45deg) translate3d(0px, 2px, 0);
}

/* Container */

.container {
    width: 100%;
    margin: 0px auto;
    max-width: 1600px;
}

/* Intro */

.intro {
    margin: 0 auto;
    width: 100%;
    max-width: 1600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro__content {
    width: 40%;
    margin-left: 50px;
}

.intro__img {
    width: 60%;
    position: relative;
}

.intro__img img {
    width: 100%;
}

.intro__title {
    width: 100%;
    max-width: 450px;
    font-size: 70px;
    font-weight: 800;
    line-height: 0.85;
    text-transform: uppercase;
}

.intro__subtitle {
    margin-top: 50px;
    font-size: 35px;
    font-weight: 500;
    color: #ff4040;
}

.intro__subsubtitle {
    font-size: 20px;
}

.intro__list {
    font-weight: 300;
    margin-left: -18px;
}

.intro__slider {
    width: 100%;
    position: absolute;
    bottom: 3%;
    right: 30px;
}

.intro__quote {
    color: #fff;
    text-transform: uppercase;
    text-align: right;
    font-weight: 600;
    font-size: 25px;
    text-shadow: #000 1px 0 8px;
}


/* Your */

.your {
    margin-top: 170px;
    margin-bottom: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.your__title {
    font-size: 65px;
    font-weight: 700;
}

.your__subtitle {
    margin-top: 40px;
    margin-bottom: 60px;
    font-size: 25px;
    font-weight: 500;
}

.your__text {
    font-size: 22px;
    max-width: 400px;
    margin: 0 auto;
}

.your__subtitle span {
    color: #ff4040;
}

/* Me */

.me {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.me__content {
    max-width: 450px;
    margin-right: 90px;
}

.me__img img {
    width: 650px;
    /*transform: translate3d(-10px, -10px, 0);*/
}

.me__title {
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 40px;
    font-weight: 800;
    max-width: 350px;
    line-height: 1;
}

.me__subtitle {
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: 500;
    color: #ff4040;
}

.me__text {
    text-align: justify;
    font-size: 20px;
}


/* Section */

.section {
    width: 100%;
}


/* Why */

.why {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.why__content {
    margin-right: 200px;
    max-width: 500px;
}

.why__img img {
    width: 650px;
}

.why__suptitle {
    line-height: 1;
    font-size: 45px;
    margin-bottom: 20px;
    color: #ff4040;
}

.why__title {
    margin-bottom: 50px;
    font-size: 60px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}

.why__subtitle {
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;
}

.why__text {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 400;
    text-align: justify;
}

.why__subtitle2 {
    margin-top: 30px;
    text-transform: uppercase;
    font-size: 25px;
    font-weight: 700;
    color: #ff4040;
}

.why__bot {
    width: 100%;
    margin: 120px auto;
    display: flex;
    max-width: 1350px;
    justify-content: space-between;
    align-items: center;
}

.why_bottext {
    width: 50%;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 700;
    margin-right: 170px;
}

.why_bottext span {
    color: #727272;
}

.why_bottext2 {
    width: 50%;
    font-size: 18px;
    font-weight: 400;
}


/* Mistakes */

.mistakes__container {
    width: 100%;
    padding: 0 100px;
}

.mistakes {
    background-color: #d9d9d9;
    width: 100%;
    margin: 0 auto;
    padding-top: 120px;
    padding-bottom: 220px;
}

.mistakes__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
}

.mistakes__box {
    width: 980px;
    background-color: #fff;
}

.mistakes__content {
    padding: 50px 15px;
}

.mistakes__title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
}

.mistakes__text {
    margin: 50px 0;
    margin-left: 225px;
    line-height: 1;
    text-align: right;
    max-width: 650px;
    font-size: 30px;
    font-weight: 700;
}

.mistakes__box2 {
    background-color: #5e5e5e;
    display: flex;
    padding: 90px 65px;
    width: 980px;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);

    position: absolute;
    bottom: -360px;
    z-index: 1;
}

/* Box */

.box__text {
    width: 50%;
    line-height: 1;
    max-width: 320px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    margin-right: 100px;
}

.box__form {
    max-width: 345px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box__title {
    margin-bottom: 20px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
}

.box__input {
    width: 100%;
    padding-left: 20px;
    margin-bottom: 20px;
    height: 40px;
    font-family: "Supera";
    font-size: 12px;
}
.wpcf7 {
    width: 100%;
}

.box__btn {
    font-family: 'Supera';
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    width: 100%;
    padding: 10px 0;
    border: 2px solid #fff;
    background-color: #ff4040;
    color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.box__btn:hover {
    background-color: #000;
    border-color: #000;
    transition: 0.2s linear;
}


/* Brief */

.brief {
    margin-top: 300px;
    margin-bottom: 150px;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.brief__inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.brief__content {
    width: 40%;
    max-width: 600px;
}

.brief__title {
    margin-bottom: 40px;
    line-height: 1.2;
    max-width: 550px;
    font-size: 30px;
    font-weight: 700;
}

.brief__title span {
    color: #ff4040;
    font-weight: 800;
}

.brief__list {
    margin-bottom: 40px;
    font-size: 15px;
}

.brief__text {
    max-width: 540px;
    text-align: left;
    margin-bottom: 40px;
    font-weight: 500;
    font-size: 15px;
}

.brief__text span {
    color: #ff4040;
}

.brief__btn {
    font-family: 'Supera';
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #000;
    padding: 15px 160px;
    background-color: transparent;
    cursor: pointer;
}

.brief__btn:hover {
    color: #fff;
    background-color: #000;
    transition: 0.2s linear;
}

.brief__img {
    width: 60%;
    margin-left: 100px;
}


/* Dream */

.dream {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dream__inner {
    background-color: #5e5e5e;
    width: 50%;
    padding: 190px 200px;
    color: #fff;
    position: relative;
}

.dream__content {
    max-width: 400px;
    margin: 0 auto;
}

.dream__title {
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
}

.dream__title span {
    text-transform: uppercase;
    color: #ff4040;
    font-weight: 800;
}

.dream__subtitle {
    font-size: 75px;
    text-transform: uppercase;
    font-weight: 800;
    color: #ff4040;
}

.dream__text {
    font-size: 17px;
    font-weight: 300;
}

.dream__text span {
    text-transform: uppercase;
    color: #ff4040;
    font-weight: 500;
}

.dream__text p {
    margin-bottom: 20px;
}

.dream__img {
    position: absolute;
    left: 0;
    width: 60%;
    max-height: 650px;
}


/* Project */

.project {
    margin-top: 100px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.project__inner {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project__header {
    text-transform: uppercase;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
}

.project__header span {
    color: #b2b2b2;
}

.project__item {
    border: 1px solid #000;
    width: 50%;
    background: url("images/project/1/bg/2.jpg");
}

.project__item:first-child {
    margin-right: 60px;
}

.project__item2 {
    border: 1px solid #000;
    width: 50%;
    background: url("images/project/2/bg.jpg");
}

.project__item3 {
    border: 1px solid #000;
    width: 50%;
    background: url("images/project/3/bg.jpg");
}

.project__item4 {
    border: 1px solid #000;
    width: 50%;
    background: url("images/project/4/bg.jpg");
}

.project__item2:first-child {
    margin-right: 60px;
}

.project__item3:first-child {
    margin-right: 60px;
}

.project__item4:first-child {
    margin-right: 60px;
}

.project__content {
    height: 600px;
    padding: 40px 40px;
    max-width: 450px;
    background-color: #000;
    opacity: 0.85;
    color: #fff;
    position: relative;
}

.project__title {
    line-height: 1;
    opacity: 1;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
}

.project__title span {
    color: #ff1111;
}

.project__list {
    margin-top: 35px;
    font-size: 13px;
    font-weight: 300;
}

.project__list span {
    font-weight: 500;
}

.project__text {
    font-size: 13px;
    font-weight: 500;
    margin-top: 20px;
}

.project__subtitle {
    color: #ff4040;
    font-size: 15px;
    font-weight: 700;
}

.project__text span {
    color: #ff4040;
    text-transform: uppercase;
    font-weight: 700;
}

.project__button {
    width: 370px;
    padding: 10px 0px;
    text-align: center;
    position: absolute;
    bottom: 40px;
    border: 2px solid #fff;
    background-color: transparent;
    cursor: pointer;
}

.project__btn {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
}

.project__button:hover {
    background-color: #ff1111;
    transition: 0.2s linear;
}

.span2 {
    font-size: 20px;
}

/* Examples */

.examples {
    width: 100%;
    max-width: 1650px;
    margin: 100px auto;
}

.examples__title {
    text-align: center;
    font-size: 50px;
    font-weight: 800;
}

.examples__btn {
    display: flex;
    margin: 80px 0;
    justify-content: center;
    align-items: center;
}

.examples__btn a {
    padding: 10px 55px;
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #000;
}

.examples__btn a:hover {
    background-color: #000;
    color: #fff;
    transition: 0.2s linear;
}

.examples__inner {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.examples__item {
    width: 100%;
    opacity: 1;

}

.examples__item:hover {
    transform: scale(105%);
    transition: 0.3s linear;
    cursor: pointer;
}

.examples__wrap {
    overflow: hidden;
    width: 50%;
    max-width: 800px;
}


/* Design */

.design {
    margin: 70px auto;
    width: 100%;
}

.design__inner {
    width: 100%;
    display: block;
    margin: 0 auto;
    vertical-align: middle;
    max-width: 1600px;
    align-content: center;
}

.design__content {
    margin-right: 120px;
    margin: 0 auto;
}

.design__title {
    margin-bottom: 20px;
    line-height: 1;
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 800;
    text-align: center;
}

.design__text {
    margin-bottom: 40px;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.design__btn {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.design__btn a {
    width: 415px;
    text-align: center;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border: 2px solid #fff;
    background-color: #ff4040;
}

.design__btn a:hover {
    background-color: #000;
    transition: 0.2s linear;
}

.desing__img1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
}

.desing__img3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.desing__img2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
}

.design__items {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 971px;
}

.desing__img1 img {
    width: 268px;
    height: 180px;
    margin-bottom: 6px;
    cursor: pointer;
}

.desing__img1 img:hover {
    filter: brightness(0.6);
    transition: 0.1s linear;
}

.desing__img1 img:last-child {
    margin-bottom: 0px;
}

.desing__img2 img {
    height: 304px;
    width: 230px;
    margin-right: 6px;
    cursor: pointer;
}

.desing__img2 img:hover {
    filter: brightness(0.6);
    transition: 0.1s linear;
}

.desing__img2 img:last-child {
    margin-right: 0;
}

.desing__img3 img {
    width: 230px;
    height: 242px;
    margin-right: 6px;
    cursor: pointer;
}

.desing__img3 img:hover {
    filter: brightness(0.6);
    transition: 0.1s linear;
}

.desing__img3 img:last-child {
    margin-right: 0px;
}

.design__wrap {
    width: 100%;
}


/* Reviews */

.reviews {
    padding-top: 400px;
    padding-left: 380px;
    padding-right: 380px;
    padding-bottom: 50px;
    background-color: #d9d9d9;
}

.reviews__inner {
    padding: 65px 80px;
    background-color: #fff;
}

.reviews__title {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 35px;
    text-align: right;
}

.reviews__author {
    max-width: 890px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.reviews__author img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.reviews__name {
    margin-left: 20px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}

.reviews__text {
    max-width: 890px;
    margin: 40px auto;
    font-size: 15px;
    font-weight: 300;
}

.reviews__img {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reviews__img img {
    margin-right: 15px;
}


/* Slider */

.slick-arrow {
    display: block;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    border: 0;
    background: none;
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
}

.slick-arrow:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
}

.slick-prev {
    left: 0;
    transform: rotate(-45deg);
}

.slick-next {
    right: 0;
    transform: rotate(135deg);
}


/* Footer */

.footer {
    padding: 40px 50px;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__logo {
    width: 210px;
}

.footer__menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer__topmenu {
    margin-right: 100px;
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    font-size: 15px;
}

.footer__topmenu a {
    text-decoration: none;
    margin-bottom: 7px;
    color: #fff;
}

.footer__topmenu a:last-child {
    margin-bottom: 0;
}

.footer__topmenu a:hover {
    color: #ff4040;
    transition: 0.1s linear;
}

.footer__submenu {
    display: flex;
    flex-direction: column;
    font-size: 15px;
}

.footer__submenu a {
    text-decoration: none;
    margin-bottom: 15px;
    color: #fff;
}

.footer__submenu a:last-child {
    margin-bottom: 0;
}

.footer__submenu a:hover {
    color: #ff4040;
    transition: 0.1s linear;
}

.footer__title {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
}

.footer__contacts a {
    text-decoration: none;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
}

.footer__contacts a:hover {
    color: #ff4040;
    transition: 0.1s linear;
}

.footer__icons {
    margin: 10px 0;
    font-size: 20px;
}

.footer__icons i {
    margin-right: 15px;
    cursor: pointer;
}

.footer__icons i:last-child {
    margin-right: 0;
}


/* Copy right */

.copyright:before {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background-color: #fff;
}

.copyright {
    font-size: 15px;
    text-align: center;
    color: #fff;
    background-color: #000;
    width: 100%;
}


/* What */

.what {
    padding: 70px 0;
    background-color: #d9d9d9;
    width: 100%;
    height: 100%;
}

.what__inner {
    padding: 0px 30px;
    background-color: #fff;
    width: 70%;
    margin: 0 auto;
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.what__title {
    margin-top: 15px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 30px;
}

.what__subtitle {
    width: 50%;
    font-size: 25px;
    font-weight: 600;
}

.what__steps {
    margin-top: 50px;
    margin-bottom: 70px;
    width: 100%;
    position: relative;
}

.what__content {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.what__content:first-child {
    margin-top: 0;
    margin-bottom: 50px;
}

.what__1 {
    background-color: #000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.what__4 {
    margin-left: 100px;
    background-color: #000;
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
}

.what__1num {
    font-weight: 600;
    padding-top: 5px;
    color: #fff;
    text-align: center;
    font-size: 28px;
}

.what__1text {
    width: 300px;
    color: #000;
    margin-left: 30px;
}

.what__3 {
    margin-left: 80px;
    background-color: #000;
    width: 70px;
    height: 70px;
    position: relative;
    border-radius: 50%;
}

.what__3num {
    font-weight: 600;
    padding-top: 10px;
    color: #fff;
    text-align: center;
    font-size: 35px;
}

.what__2 {
    margin-left: 100px;
    background-color: #000;
    width: 90px;
    height: 90px;
    position: relative;
    border-radius: 50%;
}

.what__2num {
    font-weight: 600;
    padding-top: 13px;
    color: #fff;
    text-align: center;
    font-size: 45px;
}

.what__line {
    border: 1px dashed #000;
    width: 100%;
}

.what__line1 {
    border: 1px dashed #000;
    width: 1px;
    height: 60px;
    position: relative;
    position: absolute;
    top: -10px;
    left: 105px;
}

.what__line3 {
    border: 1px dashed #000;
    width: 1px;
    height: 50px;
    position: relative;

    position: absolute;
    top: 2px;
    right: 540px;
}

.what__line2 {
    border: 1px dashed #000;
    width: 1px;
    height: 80px;
    position: relative;

    position: absolute;
    bottom: 17px;
    left: 260px;
}

.what__line4 {
    border: 1px dashed #000;
    width: 1px;
    height: 80px;
    position: relative;

    position: absolute;
    bottom: 19px;
    right: 365px;
}

.what__1:hover {
    background-color: #ff4040;
    transition: 0.1s linear;
}

.what__2:hover {
    background-color: #ff4040;
    transition: 0.1s linear;
}

.what__3:hover {
    background-color: #ff4040;
    transition: 0.1s linear;
}
.what__4:hover {
    background-color: #ff4040;
    transition: 0.1s linear;
}
.what__item1, .what__item2, .what__item3, .what__item4 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.what__item1 {
    position: absolute;
    top: -32px;
    left: -24px;
}
.what__item2 {
    position: absolute;
    top: 54px;
    left: -144px;
}
.what__item3 {
    position: absolute;
    top: -65px;
    left: -115px;
}
.what__item4 {
    position: absolute;
    top: 53px;
    left: -125px;
}

/* Allsteps */

.allsteps {
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
}

.allsteps__inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
    max-width: 1100px;
}

.allsteps__item {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.allsteps__title {
    margin-top: 100px;
    margin-bottom: 0;
    align-content: center;
    line-height: 1;
    text-align: left;
    font-size: 70px;
    font-weight: 800;
    max-width: 750px;
}

.allsteps__text {
    width: 450px;
}

.allsteps__textleft {
    text-align: right;
    width: 450px;
}

.allsteps__circle {
    display: block;
    background-color: #000;
    width: 50px;
    height: 50px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    padding-top: 5px;
    font-size: 28px;
    font-weight: 600;
}

.allsteps__circle2 {
    display: block;
    background-color: #000;
    width: 90px;
    height: 90px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    padding-top: 13px;
    font-size: 45px;
    font-weight: 600;
}

.allsteps__circle3 {
    display: block;
    background-color: #000;
    width: 70px;
    height: 70px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    padding-top: 10px;
    font-size: 35px;
    font-weight: 600;
}

.allsteps__circle:hover {
    background-color: #ff4040;
    transition: 0.1s linear;
}

.allsteps__circle2:hover {
    background-color: #ff4040;
    transition: 0.1s linear;
}

.allsteps__circle3:hover {
    background-color: #ff4040;
    transition: 0.1s linear;
}

.allsteps__line {
    border: 1px dashed #000;
    width: 1px;
    height: 580px;

    position: absolute;
    right: 50%;
    bottom: 10px;
    z-index: -1;
}

.allsteps__line1 {
    border: 1px dashed #000;
    width: 160px;
    height: 1px;
    margin-right: -80px;

    position: absolute;
    top: 32px;
    right: 50%;
    z-index: -1;

}

.allsteps__line2 {
    border: 1px dashed #000;
    width: 160px;
    height: 1px;
    margin-right: -80px;

    position: absolute;
    top: 140px;
    right: 50%;
    z-index: -1;

}

.allsteps__line3 {
    border: 1px dashed #000;
    width: 160px;
    height: 1px;
    margin-right: -80px;

    position: absolute;
    top: 250px;
    right: 50%;
    z-index: -1;

}

.allsteps__line4 {
    border: 1px dashed #000;
    width: 160px;
    height: 1px;
    margin-right: -80px;

    position: absolute;
    top: 340px;
    right: 50%;
    z-index: -1;

}

.allsteps__line5 {
    border: 1px dashed #000;
    width: 160px;
    height: 1px;
    margin-right: -80px;

    position: absolute;
    top: 440px;
    right: 50%;
    z-index: -1;

}

.allsteps__line6 {
    border: 1px dashed #000;
    width: 160px;
    height: 1px;
    margin-right: -80px;

    position: absolute;
    top: 560px;
    right: 50%;
    z-index: -1;

}

/* Questions */

.questions {
    width: 100%;
    margin-top: 130px;
    margin-bottom: 350px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.questions__content {
    width: 50%;
    max-width: 700px;
    margin-right: 100px;
}

.questions__title {
    line-height: 0.9;
    font-size: 60px;
    font-weight: 700;
    max-width: 485px;
}

.questions__text {
    text-align: right;
    font-size: 18px;
    line-height: 0.2;
    font-weight: 400;
    color: #333;
    margin-bottom: 50px;
}

.questions__list {
    font-size: 18px;
    font-weight: 500;
}

.questions__image {
    width: 50%;
    max-width: 560px;
    position: relative;
}

.questions__img {
    width: 560px;
}

.questions__contacts {
    color: #fff;
    font-size: 24px;
    position: absolute;
    font-weight: 500;
    top: 15px;
    left: 15px;
}

.questions__contacts i {
    font-size: 18px;
    cursor: pointer;
}

.questions_icon i {
    font-size: 25px;
    margin-left: 10px;
}

.questions_icon i:first-child {
    margin-left: 0;
}

.questions_icon {
    margin-top: 5px;
}

.questions__tel {
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    color: #fff;
}

.questions__line {
    content: "";
    display: block;
    height: 3px;
    width: 30px;
    background-color: #ff4040;
    margin-right: 10px;
}

/* Quesbox */

.quesbox {
    background-color: #5e5e5e;
    display: flex;
    padding: 90px 65px;
    width: 980px;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);

    position: absolute;
    bottom: -540px;
    z-index: 1;
}

.quesbox__text {
    width: 50%;
    line-height: 1;
    max-width: 320px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    margin-right: 100px;
}

.quesbox__form {
    max-width: 345px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quesbox__title {
    margin-bottom: 20px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
}

.quesbox__input {
    width: 100%;
    padding-left: 20px;
    margin-bottom: 20px;
    height: 40px;
    font-family: "Supera";
    font-size: 12px;
}

.quesbox__btn {
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    width: 100%;
    padding: 10px 0;
    border: 2px solid #fff;
    background-color: #ff4040;
    color: #fff;
}

.quesbox__btn:hover {
    background-color: #000;
    border-color: #000;
    transition: 0.2s linear;
}

/* Modal */

.hidden {
    overflow: hidden;
}

.modal__content3 {
    width: 100%;
    max-width: 500px;
    height: 500px;
    padding: 30px;
    background: #fff;
    -webkit-box-shadow: 0 5px 15px black;
    box-shadow: 0 5px 15px black;
    border-radius: 3px;
    position: relative;
}

.modal__close-button {
    height: 30px;
    width: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background: none;
    outline: none;
}

/* Modal 2 */

.modal2 {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
    top: -1000px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    overflow-y: scroll;
    padding: 60px 15px;
}

.modal2_active {
    position: fixed;
    top: 0;
    visibility: visible;
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 1001;
}

/* Modal 3 */

.modal3 {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
    top: -1000px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    overflow-y: scroll;
    padding: 60px 15px;
}

.modal3_active {
    position: fixed;
    top: 0;
    visibility: visible;
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 1001;
}

.modal3__btn {
    font-family: 'Supera';
    cursor: pointer;
    border: 1px solid #000;
    background-color: #000;
    padding: 10px 0;
    width: 100%;
    margin: 45px auto;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.modal3__btn:hover {
    background-color: #ff4040;
    border: 1px solid #ff4040;
    transition: 0.2s linear;
}

.modal3__input {
    padding: 8px 20px;
    font-size: 17px;
    width: 100%;
}

.modal3__title {
    margin: 40px 0;
}

.modal3__label {
    font-size: 17px;
    margin-top: 15px;
    display: block;
    text-align: left;
}

.modal3__item {
    text-align: center;
}

/* Modal 4*/

.modal4 {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
    top: -1000px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    overflow-y: scroll;
    padding: 60px 15px;
}

.modal4_active {
    position: fixed;
    top: 0;
    visibility: visible;
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 1001;
}

/* Portfolio */

.portfolio {
    padding-bottom: 50px;
    width: 95%;
    max-width: 1650px;
    margin: 0 auto;
}

.porfolio__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
}

.portfolio__item {
    width: 800px;
    height: 600px;
    -webkit-object-fit: cover;
    object-fit: cover;
    
}

.portfolio__wrap {
    margin-top: 40px;
    overflow: hidden;
    height: 600px;
    width: 800px;
    min-width: 630px;
}

.portfolio__content {
    position: relative;
    width: 100%;
    height: 600px;
}

.portfolio__content span {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    padding-top: 480px;
    padding-right: 30px;
    text-align: end;
    opacity: 0;
    transition: all 0.4s;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 600;
}

.portfolio__wrap:hover .portfolio__content span {
    opacity: 1;
    top: 0;
}

/* Price */

.price {
    padding-top: 80px;
    padding-bottom: 170px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.price__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.price__item {
    margin-top: 40px;
    width: 300px;
    border: 5px solid #000;
    background-color: #000;
}

.price__item:first-child {
    margin-left: 0;
}

.price__item img {
    width: 100%;
    height: 225px;
}

.price__content {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    width: 300px;
}

.price__name {
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    max-width: 160px;
}

.price__price {
    color: #ff4040;
}


/* Save */

.save {
    background-color: #d9d9d9;
    padding: 100px 0px;
    margin: 80px;
}

.save__inner {
    width: 100%;
    max-width: 1145px;
    background-color: #fff;
    margin: 0 auto;
    padding: 50px 100px;
}

.save__title {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    text-align: right;
}

.save__subtitle {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-top: 40px;
}

.save__subtitle span {
    color: #ff4040;
}

.save__text {
    margin-top: 30px;
}


/* Clients */

.clients {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 100px;
}

.clients__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.clients__title {
    font-size: 70px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.clients__text {
    font-size: 20px;
    margin-top: 80px;
    max-width: 650px;
}

.clients__subtitle {
    text-transform: uppercase;
    line-height: 1.2;
    margin-top: 60px;
    margin-bottom: 80px;
    text-align: right;
    font-size: 36px;
    font-weight: 900;
}

.clients__list {
    margin-left: 100px;
    font-size: 20px;
}

.clients__text3 {
    margin-top: 50px;
    margin-left: 100px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 24px;
}

.clients__box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.clients__img {
    width: 650px;
}


/* Before */

.before {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 100px;
}

.before__box {
    background-color: #5e5e5e;
    padding: 220px 100px;
}

.before__title {
    font-size: 70px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    max-width: 580px;
    margin-bottom: 50px;
}

.before__btn {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #fff;
    padding: 10px 100px;
}

.before__btn:hover {
    background-color: #ff4040;
    transition: 0.2s linear;
}

.before__inner {
    margin-left: 50px;
}

.before__subtitle {
    margin-top: 30px;
    font-size: 60px;
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
    max-width: 750px;
}

.before__list {
    font-size: 20px;
    max-width: 750px;
}

.before__list li {
    margin-bottom: 5px;
}

.before__list li:last-child {
    margin-bottom: 0px;
}

/* Styles Page */
.styles__header {
    font-size: 55px;
    font-weight: 600;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
}
.styles__title {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
}
.styles__title:after {
    margin-top: 5px;
    display: block;
    content: "";
    background-color: #ff4040;
    height: 3px;
    width: 50px;
}
.styles__item {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    margin-top: 30px;
    width: 400px;
    height: 300px;
}
.styles__inner {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.styles__content {
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 10px;
    width: 100%;
    height: 100px;
    background-color: #000;
    opacity: 0.85;
    transition: all 0.4s;
}
.styles__item:hover .styles__content {
    top: 60%;
    opacity: 1;
}
.styles__img {
    width: 400px;
    height: 300px;
}

/* Styles item page */
.stylesitem__item {
    width: 100%;
    margin: 40px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stylesitem__img {
    width: 55%;
}
.stylesitem__img2 {
    width: 49%;
    height: 500px;
}
.styleitem__text {
    width: 40%;
    font-size: 20px;
}

/* Contacts Page */
.contacts {
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 100px;
    width: 80%;
    background-color: #d9d9d9;
}
.contacts__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 100px ;
}
.contacts__inner a{
    text-decoration: none;
    color: #000;
    line-height: 2;
    cursor: pointer;
    font-size: 25px;
    font-weight: 500;
}
.contacts__title {
    font-size: 60px;
    font-weight: 600;
}
.contacts__icons {
    margin-top: 50px;
    text-align: center;
}
.contacts__icons i {
    font-size: 40px;
    cursor: pointer;
}
.contacts__icons i:last-child {
    margin-left: 30px;
}

.contacts__icons i:hover {
    color: #ff4040;
}
.contacts__inner a:hover {
    color: #ff4040;
}

.contacts__icons i:first-child {
    margin-right: 30px;
}

/* Partners Page*/
.partners {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 100px;
    margin-right: 30px;
    margin-left: 30px;
}
.partners__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 70px;
    width: 33.33333%;
}
.partners__text {
    margin-top: 20px;
    max-width: 400px;
    text-align: center;
    text-transform: uppercase;
}
.partners__img {
    max-width: 250px;
    width: 100%;
}

/* Portfolio Gallery */
.a_gallery {
    z-index: 5;
}
.grid {
    width: 100%;
    max-width: 100%;
    margin-left: 11.5%;
    margin-bottom: 50px;
}
.sizer4 {
    width: 25%;
}
.sizer1 {
    width: 50%;
}
.gallery__item {
    position: relative;
    margin-top: 10px;
}

.gallery__item img {
    width: 100%;
    height: auto;
    display: block;
}

.cover-item-gallary {
    background-color: #000;
    opacity: 0.7;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    display: none;
}

.cover-item-gallary a {
    display: block;
    color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 5%;
    max-width: 250px;
    font-weight: 600;
}

/* Adaptive width */

@media (max-width: 1680px) {
    
    /* Portfolio */
    .portfolio__item {
        width: 750px;
        height: 562.5px;
    }
    .portfolio__wrap {
        margin-top: 40px;
        overflow: hidden;
        height: 562.5px;
        width: 750px;
        min-width: 630px;
    }
    .portfolio__content {
        height: 562.5px;
    }
}

@media (max-width: 1600px) {

    /* Portfolio */
    .portfolio__item {
        width: 712px;
        height: 534px;
    }
    .portfolio__wrap {
        margin-top: 40px;
        overflow: hidden;
        height: 534px;
        width: 712px;
        min-width: 630px;
    }
    .portfolio__content {
        height: 534px;
    }
    .portfolio__content span {
        padding-top: 400px;
    }

    /* What */
    .what__line3 {
        right: 390px;
    }
    .what__line1 {
        left: 66px;
    }
    .what__line2 {
        left: 106px;
    }

    /* Your */
    .your__title {
        font-size: 60px;
    }

    /* Brief */
    .brief {
        max-width: 1400px;
    }
    .brief__btn {
        padding: 10px 100px;
    }

    /* Examples */
    .examples {
        max-width: 1500px;
    }
    .examples__wrap {
        max-width: 725px;
    }

    /* Design */
    .design__inner {
        max-width: 1400px;
    }

    /* Allsteps */
    .allsteps__title {
        font-size: 60px;
        margin-top: 70px;
        margin-bottom: 20px;

    }

    /* Questions */
    .questions {
        max-width: 1500px;
    }

    /* Reviews */
    .reviews {
        padding-left: 260px;
        padding-right: 260px;
    }
    .reviews__inner {
        padding: 45px 40px;
    }

}

@media (max-width: 1500px) {

    /* Portfolio */
    .portfolio__item {
        width: 665px;
        height: 498.75px;
    }
    .portfolio__wrap {
        margin-top: 40px;
        overflow: hidden;
        height: 498.75px;
        width: 665px;
    }
    .portfolio__content {
        height: 498.75px;
    }
    .portfolio__content span {
        padding-top: 400px;
    }
}

@media (max-width: 1400px) {

    /* Portfolio */
    .portfolio__item {
        width: 640px;
        height: 480px;
    }
    .portfolio__wrap {
        margin-top: 40px;
        overflow: hidden;
        height: 480px;
        width: 640px;
    }
    .portfolio__content {
        height: 480px;
    }
    .portfolio__content span {
        padding-top: 400px;
    }
}

@media (max-width: 1360px) {

    /* Dream */
    .dream__inner {
        padding: 110px 165px;
    }

    /* Brief */
    .brief__btn {
        padding: 10px 85px;
    }

    /* Container */
    .container {
        max-width: 1280px;
    }

    /* Portfolio */
    .porfolio__inner {
        justify-content: center;
    }
    .portfolio__item {
        width: 1000px;
        height: 750px;
    }
    .portfolio__wrap {
        margin-top: 40px;
        overflow: hidden;
        height: 750px;
        width: 1000px;
    }
    .portfolio__content {
        height: 750px;
    }
    .portfolio__content span {
        padding-top: 550px;
    }
    
    /* Styles */
    .styles__item {
        width: 380px;
        height: 300px;
    }
    .styles__img {
        width: 380px;
        height: 300px;
    }
    .stylesitem__item {
        display: block;
        margin-top: 40px;
        margin-bottom: 0;
    }
    .stylesitem__item:last-child {
        margin-top: 40px;
        margin-bottom: 0;
    }
    .stylesitem__img {
        width: 100%;
    }
    .stylesitem__img2 {
        display: block;
        margin-bottom: 50px;
        width: 100%;
        height: auto;
    }
    .stylesitem__img2:last-child {
        margin-bottom: 0;
    }
    .styleitem__text {
        width: 100%;
        font-size: 25px;
    }
}

@media (max-width: 1280px) {

    /* Container */
    .container {
        max-width: 1100px;
    }

    /* Styles */
    .styles__item {
        width: 480px;
        height: 330px;
    }
    .styles__img {
        width: 480px;
        height: 330px;
    }

    /* Nav */
    .nav__item li {
        margin-right: 30px;
    }

    /* Intro */
    .intro {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .intro__title {
        font-size: 65px;
    }
    .intro__content {
        margin-left: 25px;
    }
    .intro__subtitle {
        font-size: 32px;
    }

    /* Your */

    .your__title {
        font-size: 39px;
    }
    .your__subtitle {
        font-size: 20px;
        margin-top: 30px;
        margin-bottom: 50px;
    }
    .your__text {
        font-size: 18px;
    }

    /* Dream */
    .dream__content {
        max-width: 500px;
    }
    .dream__inner {
        padding: 120px 180px;
    }
    .dream__title {
        font-size: 33px;
    }
    .dream__text {
        font-size: 15px;
    }

    /* Why */
    .why__content {
        margin-right: 100px;
    }

    .why__title {
        font-size: 54px;
    }

    /* Mistakes */
    .mistakes__container {
        padding: 0px 50px;
    }

    /* Brief */
    .brief {
        max-width: 1200px;
    }
    .brief__title {
        font-size: 28px;
        margin-bottom: 20px;
    }
    .brief__list {
        margin-bottom: 20px;
    }
    .brief__text {
        margin-bottom: 20px;
    }
    .brief__img {
        margin-left: 20px;
    }

    /* Project */
    .project__header {
        font-size: 28px;
    }

    /* Examples */
    .examples {
        max-width: 1200px;
    }
    .examples__wrap {
        max-width: 580px;
    }

    /* Save */
    .save {
        margin: 80px 30px;
    }

    /* Before */
    .before__box {
        padding: 170px 85px
    }
    .before__title {
        font-size: 65px;
    }
    .before__subtitle {
        font-size: 50px;
    }
    .before__list {
        font-size: 18px;
    }

    /* Design */
    .design__inner {
        max-width: 1200px;
    }

    /* What */
    .what__inner {
        width: 90%;
    }
    .what__title {
        margin-bottom: 50px;
    }

    /* Questions */
    .questions {
        max-width: 1200px;
    }

    /* Reviews */
    .reviews {
        padding-left: 120px;
        padding-right: 120px;
    }
    .reviews__inner {
        padding: 45px 40px;
    }

}

@media (max-width: 1100px) {

    /* Questions */
    .questions__title {
        font-size: 45px;
    }

    /* Allsteps */
    .allsteps__line {
        height: 625px;
    }
    .allsteps__line1 {
        top: 32px;
    }
    .allsteps__line2 {
        top: 139px;
    }
    .allsteps__line3 {
        top: 250px;
    }
    .allsteps__line4 {
        top: 340px;
    }.allsteps__line5 {
        top: 440px;
    }
    .allsteps__line6 {
        top: 560px;
    }

    /* Brief */
    .brief__btn {
        padding: 10px 77px;
    }

    /* Why */
    .why__title {
        font-size: 45px;
        margin-bottom: 20px;
    }
    .why__subtitle2 {
        font-size: 16px;
    }
    .why__suptitle {
        font-size: 40px;
    }
    .why__content {
        margin-right: 50px;
    }
    .why__text {
        text-align: left;
        letter-spacing: 2px;
    }

    /* Me */
    .me__content {
        margin-right: 35px;
    }

    /* Container */
    .container {
        max-width: 1030px;
    }

    /* Dream */
    .dream__inner {
        padding: 120px 130px;
    }

    /* Intro */
    .intro__title {
        font-size: 60px;
    }
    
    /* Styles */
    .styles__item {
        width: 460px;
        height: 330px;
    }
    .styles__img {
        width: 460px;
        height: 330px;
    }

    /* Nav */
    .nav__item li {
        margin-right: 20px;
    }

    /* Project */
    .project {
        max-width: 100%;
    }
    .project__header {
        font-size: 2em;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.2;
    }
    .project__inner {
        display: block;
    }
    .project__content {
        max-width: 70%;
    }
    .project__title {
        font-size: 25px;
    }
    .project__item {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }
    .project__item:first-child {
        margin-right: auto;
    }
    .project__item2 {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .project__item3 {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }
    .project__item3:first-child {
        margin-right: auto;
    }
    .project__item4 {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .project__list {
        margin-top: 25px;
        font-size: 16px;
    }
    .project__text {
        font-size: 14px;
    }
    .project__btn {
        width: 100%;
    }
    .project__button {
        width: 85%;
    }
}

@media (max-width: 1024px) {

    /* Partners */
    .partners {
        margin-left: 10px;
        margin-right: 10px;
    }
    .partners__item {
        width: 50%;
    }

    /* Contacts */
    .contacts {
        padding: 50px 80px;
    }
    .contacts__title {
        font-size: 55px;
    }
    .contacts__inner a {
        font-size: 22px;
    }

    /* Portfolio */
    .porfolio__inner {
        justify-content: center;
    }
    .portfolio__item {
        width: 900px;
        height: 675px;
    }
    .portfolio__wrap {
        margin-top: 40px;
        overflow: hidden;
        height: 675px;
        width: 900px;
    }
    .portfolio__content {
        height: 675px;
    }
    .portfolio__content span {
        padding-top: 550px;
    }

    /* Styles */
    .styles__item {
        width: 800px;
        height: 600px;
    }
    .styles__img {
        width: 800px;
        height: 600px;
    }
    .styles__inner {
        justify-content: center;
    }
    .styles__content {
        height: 200px;
    }

    /* Nav */
    .nav {
        display: none;
    }
    .nav-toggle {
        display: block;
    }
    .nav__link {
        display: block;
        font-size: 25px;
    }
    .nav__link2 {
        display: block;
    }

    /* Header */
    .header__media {
        display: none;
    }
    .header__contacts {
        margin-right: 75px;
    }
    .header__logo img {
        width: 350px;
    }
    .header.fixed {
        max-width: 1024px;
    }
    .header a {
        font-size: 25px;
    }

    /* Intro */
    .intro {
        margin: 0 auto;
        max-width: 100%;
        display: block;
    }
    .intro__content {
        margin-top: 100px;
        margin-bottom: 40px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .intro__title {
        font-size: 80px;
        margin: 0px auto 0px auto;
        max-width: 700px; 
    }
    .intro__subtitle, .intro__subsubtitle, .intro__list {
        margin-left: auto;
        margin-right: auto;
        max-width: fit-content;
    }
    .intro__subtitle {
        font-size: 60px;
    }
    .intro__subsubtitle {
        letter-spacing: 10px;
    }
    .intro__list {
        font-size: 25px;
        line-height: 1.5;
    }
    .intro__img {
        width: 100%;
    }

    /* Questions */
    .questions__img {
        width: 510px;
    }
    
    /* Your */
    .your {
        margin-top: -7px;
        display: block;
    }
    .your__title {
        font-size: 80px;
    }
    .your__subtitle, .your__text{
        font-size: 25px;
    }
    .your__text {
        max-width: 100%;
    }

    /* Dream */
    .dream {
        display: block;
    }
    .dream__inner {
        width: 100%;
        padding: 125px 130px;
    }
    .dream__content {
        max-width: 100%;
    }
    .dream__img {
        position: static;
        width: 100%;
    }
    .dream__text {
        font-size: 25px;
    }
    .dream__title {
        font-size: 55px;
    }

    /* Container */
    .container {
        max-width: 90%;
    }

    /* Me */
    .me__title {
        font-size: 32px;
    }
    .me__text {
        font-size: 16px;
        text-align: left;
    }
    .me__img img {
        width: 600px;
    }
    .me__content {
        margin-right: 50px;
    }

    /* Why */
    .why {
        display: block;
    }
    .why__content {
        margin: 0 auto;
        max-width: 100%;
    }
    .why__suptitle {
        font-size: 60px;
    }
    .why__title {
        font-size: 70px;
    }
    .why__subtitle, .why__subtitle2 {
        font-size: 30px;
    }
    .why__text {
        font-size: 25px;   
    }
    .why__img img{
        width: 90%;
        margin: 0 auto;
    }
    .why__img p {
        text-align: center;
    }
    .why__bot {
        max-width: 90%;
        display: block;
        margin: 100px auto;
    }
    .why_bottext {
        width: 100%;
        margin: 0 auto;
    }
    .why_bottext2 {
        width: 100%;
        font-size: 25px;
    }

    /* Mistakes */
    .mistakes__container {
        padding: 0;
    }
    .mistakes__box {
        width: 90%;
    }
    .mistakes__title {
        font-size: 50px;
        line-height: 0.8;
    }
    .mistakes__list {
        font-size: 25px;
        line-height: 1.5;
    }
    .mistakes__content {
        padding: 50px 45px;
    }

    /* Box */
    .box__title {
        font-size: 25px;
    }

    /* Brief */
    .brief {
        margin-top: 250px;
        margin-bottom: 80px;
    }
    .brief__inner {
        display: block;
    }
    .brief__content {
        width: 100%;
        max-width: 100%;
    }
    .brief__img {
        width: 100%;
        margin: 30px auto;
    }
    .brief__title {
        max-width: 100%;
        font-size: 55px;
    }
    .brief__text {
        width: 100%;
        max-width: 100%;
        font-size: 25px;
        margin-left: 0;
        margin-right: 0;
    }
    .brief__list {
        max-width: 100%;
        font-size: 25px;
    }
    .brief__btn {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Examples */
    .examples__inner {
        display: block;
        margin-top: 0;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .examples__wrap {
        max-width: 100%;
        width: 100%;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
    }
    .examples__item:last-child {
        margin-top: 40px;
    }
    
    /* Save */
    .save {
        margin: 80px 0;
        padding: 120px 50px;
    }
    .save__text {
        font-size: 20px;
    }
    .save__list {
        font-size: 20px;
    }

    /* Clients */
    .clients__inner {
        max-width: 90%;
    }
    .clients__text {
        margin-top: 40px;
    }
    .clients__title {
        font-size: 60px;
    }
    .clients__img {
        width: 50%;
    }

    /* Before */
    .before {
        display: block;
    }
    .before__inner {
        margin-top: 20px;
        margin-left: 130px;
    }

    /* What */
    .what {
        height: 900px;
    }
    .what__inner {
        height: 100%;
        justify-content: flex-start;
    }
    .what__title {
        margin-top: 20px;
        margin-bottom: 100px;
    }
    .what__steps {
        transform:rotate(90deg) scaleY(-1);
        margin-top: 250px;
    }
    .what__item1, .what__item2, .what__item3, .what__item4{
        flex-direction: column;
        transform:rotate(-90deg) scaleX(-1);
        z-index: 5;
    }
    .what__1text {
        margin-top: 20px;
        max-width: 220px;
        font-size: 20px;
        margin-left: 70px;
    }
    .what__1, .what__4 {
        width: 60px; /* Все на 10px увеличиваем*/
        height: 60px;
    }
    .what__1num {
        padding-top: 9px;
    }
    .what__item2 {
        top: -323px;
        left: 43px;
    }
    .what__2 {
        margin-left: 0;
        width: 100px;
        height: 100px;
    }
    .what__2num {
        padding-top: 19px;
    }
    .what__3 {
        width: 80px;
        height: 80px;
    }
    .what__3num {
        padding-top: 15px;
    }
    .what__line {
        width: 55%;
    }
    .what__line1 {
        height: 120px;
        top: -70px;
    }
    .what__line2 {
        height: 160px;
        top: 50px;
        left: 146px;
    }
    .what__line3 {
        height: 140px;
        top: -90px;
        right: 560px;
    }
    .what__line4 {
        height: 120px;
        bottom: -19px;
        right: 515px;
    }
    .what__item1 {
        top: -126px;
        left: -81px;
    }
    .what__item2 {
        top: 122px;
        left: -107px;
    }
    .what__item3 {
        top: -169px;
        left: -95px;
    }
    .what__item4 {
        top: -50px;
        left: -28px;
    }
    

    /* Questions */
    .questions {
        width: 90%;
        display: block;
    }
    .questions__content {
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
    .questions__title {
        max-width: 100%;
        font-size: 58px;
    }
    .questions__list {
        font-size: 20px;
    }
    .questions__text {
        margin-top: 30px;
        font-size: 18px;
    }
    .questions__image {
        width: 100%;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
    }
    .questions__img {
        width: 100%;
    }
    
    /* Quesbox */
    .quesbox {
        width: 100%;
    }

    /* Reviews */
    .reviews {
        padding-left: 5%;
        padding-right: 5%;
    }
    .reviews__inner {
        padding: 3%;
    }
    .reviews__text {
        max-width: 93%;
    }
    /* Me */
    .me {
        display: block;
    }
    .me__title {
        font-size: 70px;
        max-width: 100%;
        width: 100%;
    }
    .me__content {
        width: 100%;
        max-width: 100%;
    }
    .me__subtitle {
        font-size: 60px;
    }
    .me__text {
        font-size: 25px;
    }
    .me__img {
        margin-top: 30px;
        width: 100%;
    }
    .me__img p {
        text-align: center;
    }
    .me__img img {
        width: 90%;
    }

    /* Design */
    .design__items {
        flex-direction: column;
    }
    .desing__img1 {
        flex-direction: row;
        margin-bottom: 6px;
    }
    .desing__img1 img {
        margin-right: 6px;
        margin-bottom: 0px;
        width: 230px;
        height: 170px;
    }
    .desing__img1 img:last-child {
        margin-right: 0px;
    }
}

@media (max-width: 1000px) {

    /* What */
    .what {
        height: 1000px;
    }
    .what__line {
        width: 70%;
    }
    .what__line1 {
        left: 75px;
    }
    .what__line2 {
        left: 130px;
    }
    .what__line3 {
        right: 416px;
    }
    .what__line4 {
        right: 400px;
    }

    /* Modal 1 */
    .modal1__item {
        width: 100%;
        height: 500px;
    }

    .modal_img_type1 {
        margin: 0 auto;
        height: 500px;
        width: 850px;
    }

    .modal_img_type2 {
        margin: 0 auto;
        height: 500px;
        width: 500px;
    }

    .modal_img_type3 {
        margin: 0 auto;
        height: 500px;
        width: 360px;
    }

    /* Allsteps */
    .allsteps__text {
        width: 350px;
    }
    .allsteps__textleft {
        width: 350px;
    }
    .allsteps__line1, .allsteps__line2, .allsteps__line3, .allsteps__line4, .allsteps__line5, .allsteps__line6 {
        width: 140px;
        margin-right: -70px;
    }

    /* Project */
    .project__title {
        font-size: 20px;
    }
    .project__list {
        margin-top: 0px;
    }
    .project__text {
        margin-top: 0px;
    }
    .project__content {
        padding: 20px;
    }
}

@media (max-width: 850px) {

    /* Partners */
    .partners__text {
        max-width: 315px;
    }

    /* What */
    .what__line3 {
        right: 335px;
    }
    .what__line4 {
        right: 295px;
    }
    
    /* Reviews */
    .reviews__title {
        margin-bottom: 50px;
    }

    /* Allsteps */
    .allsteps__text {
        width: 300px;
    }
    .allsteps__textleft {
        width: 300px;
    }
    .allsteps__line1, .allsteps__line2, .allsteps__line3, .allsteps__line4, .allsteps__line5, .allsteps__line6 {
        width: 140px;
        margin-right: -70px;
    }
    .allsteps__line1 {
        top: 42px;
    }
    .allsteps__line2 {
        top: 163px;
    }
    .allsteps__line3 {
        top: 272px;
    }
    .allsteps__line4 {
        top: 362px;
    }
    .allsteps__line5 {
        top: 463px;
    }
    .allsteps__line6 {
        top: 593px;
    }

    /* Project */
    .project__content {
        padding: 10px;
    }

    /* Contacts */
    .contacts__inner {
        padding: 68px;
    }

    /* Portfolio */
    .porfolio__inner {
        justify-content: center;
    }
    .portfolio__item {
        width: 700px;
        height: 525px;
    }
    .portfolio__wrap {
        margin-top: 40px;
        overflow: hidden;
        height: 525px;
        width: 700px;
    }
    .portfolio__content {
        height: 525px;
    }
    .portfolio__content span {
        padding-top: 450px;
    }

    /* Styles */
    .styles__item {
        width: 700px;
        height: 550px;
    }
    .styles__img {
        width: 700px;
        height: 550px;
    }
    .styles__content {
        height: 200px;
    }
}

@media (max-width: 770px) {

    /* Partners */
    .partners {
        margin-left: 10px;
        margin-right: 10px;
    }
    .partners__item {
        width: 100%;
    }

    /* Modal 1 */
    .modal1__item {
        width: 100%;
        height: 350px;
    }

    .modal_img_type1 {
        margin: 0 auto;
        height: 350px;
        width: 600px;
    }

    .modal_img_type2 {
        margin: 0 auto;
        height: 350px;
        width: 350px;
    }

    .modal_img_type3 {
        margin: 0 auto;
        height: 350px;
        width: 250px;
    }

    /* Project */
    .project__button {
        width: 92%;
    }

    /* Why */
    .why__title {
        font-size: 60px;
    }

    /* Contacts */
    .contacts {
        padding: 30px 60px;
    }
    .contacts__title {
        font-size: 50px;
    }
    .contacts__inner a {
        font-size: 20px;
    }
    .contacts__inner {
        padding: 100px 35px;
    }

    /* Portfolio */
    .porfolio__inner {
        justify-content: center;
    }
    .portfolio__item {
        width: 650px;
        height: 487.5px;
    }
    .portfolio__wrap {
        height: 487.5px;
        width: 650px;
    }
    .portfolio__content {
        height: 487.5px;
    }
    .portfolio__content span {
        padding-top: 360px;
    }

    /* Styles */
    .styles__header {
        font-size: 45px;
    }
    .styles__item {
        width: 600px;
        height: 450px;
    }
    .styles__img {
        width: 600px;
        height: 450px;
    }
    .styles__content {
        height: 150px;
    }

    /* Intro */
    .intro__content {
        width: 90%;
        margin-top: 65px;
    }

    /* Nav */
    .nav-toggle {
        top: 54px;
    }

    /* Mistakes */
    .mistakes__title {
        font-size: 40px;
    }
    .mistakes__box2 {
        padding: 70px 25px;
    }
    .box__text {
        font-size: 23px;
        margin-right: 60px;
    }
    .box__title {
        font-size: 23px;
    }

    /* Questions */
    .quesbox {
        padding: 70px 25px;
    }
    .quesbox__text {
        font-size: 27px;
    }

    /* Header */
    .header {
        height: 130px;
    }
    .header.fixed {
        max-width: 770px
    }
    .header__logo {
        width: 50%;
    }
    .header__logo img {
        width: 100%;
    }
    .header a {
        font-size: 18px;
    }
    /* Mistakes */
    .mistakes__box2 {
        width: 100%;
    }
    .box__text {
        font-size: 25px;
    }
    .box__title {
        line-height: 1;
    }

    /* Project */
    .project__item, .project__item2, .project__item3, .project__item4 {
        width: 90%;
    }
    .project__list {
        font-size: 16px;
    }
    .project__text {
        margin-top: 8px;
        font-size: 16px;
    }
    .project__content {
        padding: 15px;
        max-width: 85%;
    }
    .project__title {
        font-size: 20px;
    }
    /* What */
    .what__title {
        margin-bottom: 10px;
    }
    .what__line {
        width: 95%;
    }
    .what__line1 {
        height: 105px;
        top: -55px;
    }
    .what__line2 {
        height: 115px;
    }
    .what__item2 {
        top: 40px;
    }
    .what__line3 {
        height: 65px;
        right: 200px;
        top: -15px;
    }
    .what__line4 {
        right: 175px;
    }

    /* Clients */
    .clients__box {
        display: block;
    }
    .clients__img {
        width: 100%;
    }
    .clients__list {
        margin-top: 30px;
    }

    /* Brief */
    .brief__btn {
        font-size: 20px;
    }

    /* Before */
    .before__inner {
        margin-left: 10px;
    }
    .before__title {
        font-size: 64px;
    }

    /* Examples*/
    .examples__title {
        line-height: 1.2;
    }

    /* Allsteps */
    .allsteps__line {
        height: 760px;
    }
    .allsteps__text {
        width: 210px;
    }
    .allsteps__textleft {
        width: 210px;
    }
    .allsteps__line1, .allsteps__line2, .allsteps__line3, .allsteps__line4, .allsteps__line5, .allsteps__line6 {
        width: 140px;
        margin-right: -70px;
    }
    .allsteps__line1 {
        top: 54px;
    }
    .allsteps__line2 {
        top: 195px;
    }
    .allsteps__line3 {
        top: 315px;
    }
    .allsteps__line4 {
        top: 404px;
    }
    .allsteps__line5 {
        top: 515px;
    }
    .allsteps__line6 {
        top: 688px;
    }

    /* Footer */
    .footer__menu {
        width: 70%;
    }
    .footer__contacts {
        width: 30%;
    }
    .footer__logo {
        width: 0;
        opacity: 0;
    }
    .footer__submenu a {
        margin-bottom: 10px;
    }

}

@media (max-width: 600px) {

    .grid {
        margin-left: 10%;
    }
    .sizer4 {
        width: 80%;
    }
    
    /* Prices */
    .price {
        padding-top: 20px;
    }
    .price__inner {
        justify-content: center;
    }

    /* Contacts */
    .contacts {
        padding: 30px 35px;
    }
    .contacts__inner a {
        font-size: 18px;
    }
    .contacts__inner {
        padding: 100px 35px;
    }

    /* Portfolio */
    .porfolio__inner {
        justify-content: center;
    }
    .portfolio__item {
        width: 100%;
        height: 413px;
    }
    .portfolio__wrap {
        height: 413px;
        width: 100%;
    }
    .portfolio__content {
        height: 413px;
    }
    .portfolio__content span {
        padding-top: 300px;
        padding-right: 80px;
        font-size: 20px;
    }

    /* Styles */
    .styles__header {
        font-size: 35px;
    }
    .styles__item {
        width: 500px;
        height: 400px;
    }
    .styles__img {
        width: 500px;
        height: 400px;
    }
    .styles__content {
        height: 130px;
    }
    .styleitem__text {
        font-size: 23px;
    }

    /* Header */
    .header__contacts {
        opacity: 0;
        visibility: hidden;
    }
    .header__logo img {
        width: 350px;
    }

    /* Intro */
    .intro__title {
        font-size: 55px;
    }
    .intro__content {
        margin-top: 30px;
    }
    .intro__subtitle {
        font-size: 40px;
    }
    .intro__list {
        font-size: 20px;
    }
    .intro__quote {
        font-size: 20px;
    }

    /* Your */
    .your__title {
        font-size: 65px;
    }
    .your__subtitle {
        font-size: 20px;
    }

    /* Dream */
    .dream__inner {
        padding: 125px 65px;
    }
    .dream__text {
        font-size: 20px;
    }

    /* Me */
    .me__title {
        font-size: 50px;
    }
    .me__subtitle {
        font-size: 48px;
    }
    .me__text {
        font-size: 20px;
    }

    /* Why */
    .why__suptitle {
        font-size: 55px;
    }
    .why__title {
        font-size: 55px;
    }
    .why__subtitle {
        font-size: 25px;
    }
    .why__text {
        font-size: 20px;
        text-align: left;
    }
    .why__bot {
        margin: 50px auto;
    }
    .why_bottext {
        font-size: 25px;
    }
    .why_bottext2 {
        font-size: 20px;
    }

    /* Mistakes */
    .mistakes__title {
        text-align: left;
        font-size: 35px;
    }
    .mistakes__list {
        font-size: 20px;
        line-height: 1.3;
    }
    .mistakes__text {
        font-size: 25px;
        margin-left: 90px;
    }

    /* Mistakes Box */
    .mistakes__box2 {
        display: block;
        bottom: -440px;
    }
    .box__text {
        width: 100%;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }
    .box__form {
        margin-top: 40px;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    .box__title {
        font-size: 15px;
    }

    /* Brief */
    .brief__title {
        font-size: 40px;
    }
    .brief__list {
        font-size: 20px;
    }
    .brief__text {
        font-size: 20px;
    }
    .brief__btn {
        font-size: 15px;
        padding: 10px 55px;
    }

    /* Project */
    .project__header {
        font-size: 1.8em;
    }
    .project__list {
        font-size: 16px;
        margin-top: 0;
    }
    .project__title {
        font-size: 20px;
    }
    .project__content {
        max-width: 100%;
    }
    .project__text {
        font-size: 16px;
    }
    .project__button {
        bottom: 10px;
    }

    /* Examples */
    .examples__title {
        font-size: 45px;
    }
    .examples__btn a {
        padding: 10px 30px;
    }
    .examples__btn {
        margin: 40px 0;
    }

    /* Save */
    .save {
        padding: 60px 30px;
    }
    .save__inner {
        padding: 20px 10px;
    }

    /* Clients */
    .clients__title {
        font-size: 40px;
    }
    .clients__subtitle {
        font-size: 28px;
        margin-top: 40px;
        margin-bottom: 50px;
    }
    .clients__list {
        margin-left: 0;
    }
    .clients__text3 {
        margin-left: 0;
    }

    /* Before */
    .before__title {
        font-size: 50px;
    }
    .before__box {
        padding: 100px 30px;
    }
    .before__btn {
        padding: 10px 80px;
    }
    .before__list {
        font-size: 20px;
    }

    /* Design */
    .design__title {
        font-size: 40px;
    }
    .design__text {
        font-size: 25px;
    }
    .desing__img1 img {
        width: 120px;
    }
    .desing__img2 img {
        width: 120px;
    }
    .desing__img3 img {
        width: 120px;
    }
    .design__btn a {
        width: 360px;
    }

    /* What */
    .what {
        height: 1110px;
    }
    .what__title {
        margin-bottom: -85px;
    }
    .what__line {
        width: 110%;
    }
    .what__line1 {
        height: 120px;
        top: -70px;
    }
    .what__1text {
        max-width: 150px;
    }
    .what__item1 {
        left: -7px;
    }
    .what__item2 {
        left: -60px;
    }
    .what__item3 {
        left: -50px;
    }
    .what__line3 {
        right: 19px;
    }
    .what__line4 {
        right: -15px;
    }
    .what__item4 {
        top: -95px;
        left: 50px;
    }

    /* Allsteps */
    .allsteps__title {
        font-size: 44px;
    }
    .allsteps__line {
        height: 1040px;
    }
    .allsteps__line1, .allsteps__line2, .allsteps__line3, .allsteps__line4, .allsteps__line5, .allsteps__line6 {
        opacity: 0;
    }
    .allsteps__line {
        height: 770px;
    }

    /* Quesbox */
    .quesbox {
        display: block;
    }
    .quesbox__text {
        width: 100%;
        text-align: center;
        margin-right: 0;
        max-width: 100%;
    }
    .quesbox__form {
        margin-top: 30px;
        width: 100%;
        max-width: 100%;
    }

    /* Footer */
    .footer__menu {
        opacity: 0;
        visibility: hidden;
        width: 0;
    }
    .footer__contacts {
        width: 100%;
    }



}

@media (max-width: 500px) {

    /* What */
    .what__title {
        margin-bottom: -145px;
    }
    .what__line {
        width: 200%;
    }
    .what__line1 {
        height: 100px;
        top: -52px;
        left: 14px;
    }
    .what__line2 {
        height: 50px;
        left: 60px;
    }
    .what__item2 {
        top: -10px;
    }
    .what__item3 {
        top: -136px;
    }
    .what__line4 {
        height: 80px;
        bottom: 18px;
    }
    .what__item4 {
        top: -130px;
    }
    .what__line3 {
        right: -55px;
    }

    /* Modal 1 */
    .modal1__item {
        width: 100%;
        height: 263px;
    }

    .modal_img_type1 {
        margin: 0 auto;
        height: 263px;
        width: 450px;
    }

    .modal_img_type2 {
        margin: 0 auto;
        height: 263px;
        width: 263px;
    }

    .modal_img_type3 {
        margin: 0 auto;
        height: 263px;
        width: 190px;
    }

    .allsteps__text {
        font-size: 14px;
        width: 150px;
    }
    .allsteps__textleft {
        font-size: 14px;
        width: 150px;
    }

    /* Project */
    .project__text {
        margin-top: 0;
        font-size: 14px;
    }
    .project__list {
        font-size: 14px;
    }

    /* Dream */
    .dream__title {
        font-size: 50px;
    }

    /* Why */
    .why__suptitle {
        font-size: 50px;
    }
    .why__title {
        font-size: 43px;
    }

    /* Contacts */
    .contacts {
        padding: 30px 35px;
    }
    .contacts__title {
        font-size: 45px;
    }
    .contacts__inner a {
        font-size: 18px;
    }
    .contacts__inner {
        padding: 100px 20px;
    }

    /* Header */
    .header__logo img {
        width: 265px;
    }

    /* Portfolio */

    .portfolio__content span {
        padding-top: 350px;
        padding-left: 190px;
        font-size: 18px;
    }
    .portfolio__content span p {
        max-width: 350px;
        text-align: right;
        margin-top: 0;
        margin-right: 0;
    }

    /* Styles */
    .styles__header {
        font-size: 30px;
    }
    .styles__item {
        width: 400px;
        height: 300px;
    }
    .styles__img {
        width: 400px;
        height: 300px;
    }
    .styles__content {
        height: 100px;
    }
}

@media (max-width: 400px) {
    
    /* Partners */
    .partners {
        margin-top: 0;
    }

    /* Dream */
    .before__title {
        font-size: 45px;
    }
    .before__btn {
        padding: 10px 60px;
    }

    /* Dream */
    .dream__title {
        font-size: 40px;
    }

    /* Brief */
    .brief__btn {
        padding: 10px 50px;
    }

    /* Why */
    .why__suptitle {
        font-size: 45px;
    }
    .why__title {
        font-size: 40px;
    }
    .why__subtitle {
        font-size: 23px;
    }
    .why__subtitle2 {
        font-size: 25px;
    }

    /* Your */
    .your__title {
        font-size: 60px;
    }

    /* Intro */
    .intro__title {
        font-size: 50px;
    }
    .intro__subsubtitle {
        letter-spacing: 6px;
    }
    .intro__subtitle {
        font-size: 38px;
    }

    /* Header */
    .header__logo img {
        width: 200px;
    }
    /* Portfolio */
    .portfolio__content span {
        padding-top: 300px;
        padding-left: 225px;
        font-size: 18px;
    }
    .portfolio__content span p {
        max-width: 250px;
        text-align: right;
        margin-top: 0;
        margin-right: 0;
    }

    /* Styles */
    .styles__header {
        font-size: 30px;
    }
    .styles__item {
        width: 350px;
        height: 280px;
    }
    .styles__img {
        width: 350px;
        height: 280px;
    }
    .styles__inner {
        justify-content: center;
    }
    .styles__content {
        height: 100px;
    }
}