* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
}

body {
    margin: 0;
    min-width: 320px;
}

/* Тут стили для карусели */
div.carousel-inner {
    height: 630px;
}

div.carousel-inner div.first {
    max-width: 40%;
    height: 250px;
    left: auto;
    right: 5%;
    margin: auto;
    background-color: rgba(48, 47, 47, 0.363);
    z-index: 1;
}

div.carousel-inner div.first h5,
div.carousel-inner div.second h5 {
    font-size: 60px;
}

div.carousel-inner div.first h5 {
    color: white;
}

div.carousel-inner div.first p {
    color: white;
    font-weight: 500;
}

div.carousel-inner div.second {
    padding-bottom: 30%;
    margin: auto;
    z-index: 1;
}

div.carousel-inner div.second h5 {
    color: dimgray;
}

div.carousel-inner div.second p {
    color: grey;
}


div.carousel-inner div.third {
    padding-bottom: 30%;
    left: 180px;
    right: auto;
    z-index: 1;
    margin: auto;
}

div.carousel-inner div.third h5 {
    font-size: 60px;
}

div.carousel-inner div.third button.light {
    border: white solid 1px;
    color: white;
}

div.carousel-inner div.third button.light:hover {
    background-color: white;
    color: grey;
}

div.main-mobile {
    display: none;
}

/* Тут стили для плюшек */
.features {
    background-color: rgba(237, 237, 237, 1);
    padding: 1px;
    padding-bottom: 50px;
}

.features h3 {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.features div.items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 50px;
    text-align: center;
    margin-right: 50px;
}

.features div.items div.feature1,
.features div.items div.feature2,
.features div.items div.feature3,
.features div.items div.feature4 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
}

.features div.items div.feature1,
.features div.items div.feature2,
.features div.items div.feature3 {
    margin-right: 20px;
}

.features .items p {
    color: slategray;
}

/* Grid */
div.grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
    -ms-grid-rows: 268px 268px 250px;
    grid-template-rows: 268px 268px 250px;
}

div.grid>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

div.grid>*:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

div.grid>*:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

div.grid>*:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
}

div.grid>*:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

div.grid>*:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

div.grid>*:nth-child(7) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
}

div.grid>*:nth-child(8) {
    -ms-grid-row: 2;
    -ms-grid-column: 4;
}

div.grid>*:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

div.grid>*:nth-child(10) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}

div.grid>*:nth-child(11) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

div.grid>*:nth-child(12) {
    -ms-grid-row: 3;
    -ms-grid-column: 4;
}

div.grid div.block1 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / span 2;
    overflow: hidden;
}

div.grid div.block1 img,
div.grid div.block3 img,
div.grid div.block4 img,
div.grid div.block6 img,
div.grid div.block8 img {
    max-width: 100%;
}

div.grid div.block2 {
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 1;
    grid-row: 1;
}

div.grid div.block3 {
    -ms-grid-column: 4;
    grid-column: 4;
    -ms-grid-row: 1;
    grid-row: 1;
    overflow: hidden;
}

div.grid div.block3 img {
    margin-top: -40px;
}

div.grid div.block4 {
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 2;
    grid-row: 2;
    overflow: hidden;
}

div.grid div.block5 {
    -ms-grid-column: 4;
    grid-column: 4;
    -ms-grid-row: 2;
    grid-row: 2;
}

div.grid div.block6 {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    overflow: hidden;
}

div.grid div.block7 {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 3;
    grid-row: 3;
}

div.grid div.block8 {
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
    grid-column: 3 / span 2;
    -ms-grid-row: 3;
    grid-row: 3;
    overflow: hidden;
}

div.grid div.block9 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1 / span 4;
    -ms-grid-row: 4;
    grid-row: 4;
}

div.grid div.block2,
div.grid div.block5,
div.grid div.block7 {
    padding: 30px;
}

div.grid button {
    border-radius: 0;
}

h2.partners {
    padding: 50px;
    text-align: center;
    margin-bottom: 0;
    background-color: rgba(237, 237, 237, 1);
    font-weight: 400;
    color: grey;
}

/* Partners */
div.partners div.items {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 20% 20% 20% 20%;
    grid-template-columns: 20% 20% 20% 20%;
    -ms-grid-rows: 50% 50%;
    grid-template-rows: 50% 50%;
    padding-top: 30px;
    padding-bottom: 30px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

div.partners div.items>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

div.partners div.items>*:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

div.partners div.items>*:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

div.partners div.items>*:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
}

div.partners div.items>*:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

div.partners div.items>*:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

div.partners div.items>*:nth-child(7) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
}

div.partners div.items>*:nth-child(8) {
    -ms-grid-row: 2;
    -ms-grid-column: 4;
}

div.partners div {
    margin-bottom: 10px;
}

div.partners div img {
    max-width: 100%;
}

div.partners div img:hover {
    -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

@media only all and (min-width: 1400px) {
    div.carousel div.carousel-inner div.first {
        margin-bottom: 20%;
    }
}

@media only all and (min-width: 1196px) {
    div.carousel-inner div.first {
        margin-bottom: 10%;
    }
}

@media only all and (max-width: 1024px) {
    div.carousel-inner {
        height: auto;
    }

    div.carousel-inner div.carousel-item:nth-of-type(2) img {
        margin: auto;
    }

    div.carousel-inner div.first {
        margin: auto;
        height: 200px;
    }

    div.carousel-inner div.first h5,
    div.carousel-inner div.second h5,
    div.carousel-inner div.third h5 {
        font-size: 40px;
    }

    div.carousel-inner div.second {
        padding-bottom: 25%;
        margin: auto;
    }

    div.carousel-inner div.third {
        padding-bottom: 25%;
        left: 100px;
    }

    div.grid {
        -ms-grid-columns: 33.3% 33.3% 33.3%;
        grid-template-columns: 33.3% 33.3% 33.3%;
        -ms-grid-rows: 250px 250px 250px 250px;
        grid-template-rows: 250px 250px 250px 250px;
    }

    div.grid>*:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    div.grid>*:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    div.grid>*:nth-child(3) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }

    div.grid>*:nth-child(4) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }

    div.grid>*:nth-child(5) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }

    div.grid>*:nth-child(6) {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
    }

    div.grid>*:nth-child(7) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    div.grid>*:nth-child(8) {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }

    div.grid>*:nth-child(9) {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
    }

    div.grid>*:nth-child(10) {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }

    div.grid>*:nth-child(11) {
        -ms-grid-row: 4;
        -ms-grid-column: 2;
    }

    div.grid>*:nth-child(12) {
        -ms-grid-row: 4;
        -ms-grid-column: 3;
    }

    div.grid div h3 {
        font-size: 22px;
    }

    div.grid div.block2 {
        padding: 10px;
        text-align: center;
        padding-top: 40px;
        -ms-grid-column: 3;
        grid-column: 3;
        -ms-grid-row: 1;
        grid-row: 1;
    }

    div.grid div.block3 {
        -ms-grid-column: 3;
        grid-column: 3;
        -ms-grid-row: 2;
        grid-row: 2;
    }

    div.grid div.block3 img {
        margin-top: 0;
    }

    div.grid div.block4 {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 3;
        grid-row: 3;
    }

    div.grid div.block5 {
        padding: 10px;
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 3;
        grid-row: 3;
        text-align: center;
        padding-top: 40px;
    }

    div.grid div.block6 {
        -ms-grid-row: 3;
        grid-row: 3;
        -ms-grid-column: 3;
        grid-column: 3;
    }

    div.grid div.block7 {
        -ms-grid-row: 4;
        grid-row: 4;
        padding: 10px;
        -ms-grid-column: 3;
        grid-column: 3;
        text-align: center;
        padding-top: 40px;
    }

    div.grid div.block8 {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / span 2;
        -ms-grid-row: 4;
        grid-row: 4;
    }

    div.partners div {
        padding: 0;
    }
}

@media only all and (max-width: 768px) {

    div.features div.items {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
    }

    div.grid {
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        -ms-grid-rows: auto;
        grid-template-rows: auto;
    }

    div.grid>*:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    div.grid>*:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    div.grid div h3 {
        font-size: 30px;
    }

    div.grid div p,
    div.grid div button {
        font-size: 20px;
    }

    div.grid div.block2 {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 3;
        grid-row: 3;
    }

    div.grid div.block3 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 3;
        grid-row: 3;
    }

    div.grid div.block4 {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 4;
        grid-row: 4;
    }

    div.grid div.block5 {
        -ms-grid-row: 4;
        grid-row: 4;
        -ms-grid-column: 2;
        grid-column: 2;
    }

    div.grid div.block6 {
        -ms-grid-row: 5;
        grid-row: 5;
        -ms-grid-column: 2;
        grid-column: 2;
    }

    div.grid div.block7 {
        -ms-grid-row: 5;
        grid-row: 5;
        -ms-grid-column: 1;
        grid-column: 1;
    }

    div.grid div.block8 {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / span 2;
        -ms-grid-row: 6;
        grid-row: 6;
    }
    
    div.partners {
        padding: 0;
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        -ms-grid-rows: auto;
        grid-template-rows: auto;
    }

    div.partners>*:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    div.partners>*:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
}

@media only all and (max-width: 576px) {
    .main .header {
        display: none;
    }

    .main .hamburger-menu {
        display: block;
    }

    .main div.carousel {
        display: none;
    }

    div.main-mobile {
        display: block;
    }

    div.main-mobile div.block1,
    div.main-mobile div.block2 {
        position: relative;
    }

    div.main-mobile div.block1 div.text {
        position: absolute;
        background-color: black;
        bottom: 0;
        right: 0;
        opacity: 0.8;
    }

    div.main-mobile div.block1 div.text h4 {
        color: white;
        padding: 5px;
        margin: 0;
    }

    div.main-mobile div.block2 div.text {
        position: absolute;
        background-color: wheat;
        right: 0;
        opacity: 0.8;
    }

    div.main-mobile div.block2 div.text h4 {
        padding: 5px;
        margin: 0;
    }

    div.features div.items {
        display: block;
    }

    div.grid {
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        -ms-grid-rows: auto;
        grid-template-rows: auto;
        margin-bottom: -90px;
    }

    div.grid>*:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    div.grid>*:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    div.grid div.block2 {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 3;
        grid-row: 3;
        padding: 5px;
    }

    div.grid div h3 {
        text-align: center;
        font-size: 20px;
    }

    div.grid div p {
        text-align: center;
        line-height: 1.3;
        font-size: 16px;
    }

    div.grid div button {
        margin: 0 auto;
        display: block;
        font-size: 16px;
    }

    div.grid div.block3 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 3;
        grid-row: 3;
    }

    div.grid div.block4 {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 4;
        grid-row: 4;
    }

    div.grid div.block5 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 4;
        grid-row: 4;
        padding: 5px;
    }

    div.grid div.block6 {
        -ms-grid-row: 5;
        grid-row: 5;
        -ms-grid-column: 2;
        grid-column: 2;
    }

    div.grid div.block7 {
        -ms-grid-row: 5;
        grid-row: 5;
        padding: 5px;
        -ms-grid-column: 1;
        grid-column: 1;
    }


    div.grid div.block7 p {
        text-align: center;
        padding: 0;
        margin: 0;
        line-height: 1.3;
    }

    div.grid div.block7 button {
        margin-top: 10px;
    }

    div.grid div.block8 {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / span 2;
        -ms-grid-row: 6;
        grid-row: 6;
        margin-top: 25px;
    }

    div.partners {
        margin-top: 90px;
    }
}

@media only all and (max-width: 400px) {

    div.grid div.block2 p,
    div.grid div.block5 p,
    div.grid div.block7 p {
        font-size: 14px;
    }

    div.grid div.block2 button,
    div.grid div.block5 button,
    div.grid div.block7 button {
        font-size: 14px;
        padding: 5px;
    }
}