.grid-container {
    display: grid;
    grid-template-columns: 10% 1fr 1fr 1fr 10%;
    grid-template-rows: 80px 630px 80px 1fr 120px;
}

.header { 
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-column-end: 6;
    background: white;
    min-height: 80px;
    max-height: 80px;
    display: flex;
    justify-content: center;
    box-shadow: 0 0 10px #F2BF93;
}

.logo{
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-column-end: 5;
    background-image: url(img/logocut.png);
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    height: 80px;
    width: 80px;
    transition: opacity 0.6s ease-out;
}

.logo:hover{
    opacity: 0.5;
}

.navigacia{
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-column-end: 5;
    display: flex;
    font-size: 24px;
    font-family: 'Roboto', sans-serif;
    margin: auto 0 auto 0;
}

.navigacia_knopki{
    color: lightslategrey;
    text-decoration: none;
    margin: 0 40px;
    position: relative;
    transition: color 0.5s linear;
}

.navigacia_knopki:hover{
    color: orange;
}

.navigacia_knopki:after{
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    opacity: 0;
    
    
    top: 100%;
    left: 0;
    z-index: 1;
    
    background-color: orange;
    position: absolute;
    
    transition: opacity .5s linear;
}

.navigacia_knopki:hover:after{
    opacity: 1;
}

body { margin: 0; padding: 0; }

.m1{
    background: radial-gradient(circle, rgba(224,229,235,1) 0%, rgba(212,218,226,1) 100%);
}


.c1{
    grid-row-start: 2;
    grid-column-start: 2;
    grid-row-end: 3;
    grid-column-end: 4;
    margin: 7% 0 0 20%;
    width: 78%;
}

/* Сверху | Справа | Снизу | Слева */
/*padding: 2px 1em 0 1em; */

.c2{
    grid-row-start: 2;
    grid-column-start: 4;
    grid-row-end: 3;
    grid-column-end: 5;
    margin: auto;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
/*    background-color: #CE3D1D;*/
}

.c3{
    grid-row-start: 2;
    grid-column-start: 4;
    grid-row-end: 3;
    grid-column-end: 6;
    padding: 4% 0 15% 0;
    font-size: 2rem;
    color: orange;
    font-weight: 400;
    font-family: 'Francois One', sans-serif;
}

.b{ 
    grid-row-start: 3;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 6;
    margin: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 0 10px #F2BF93;
    
}

.d1, .d2, .d3{
    margin: 15% 15% 15% 15%;
    min-height: 150px;
    max-width: 330px;
    max-height: 200px;
    border: 1px solid lightslategrey;
    border-radius: 15px;
    transition: border 1.5s ease-out;
    transition: background 0.7s linear;
}

.d1:hover{ border: 1px solid black; background: white;}
.d2:hover{ border: 1px solid black; background: white;}
.d3:hover{ border: 1px solid black; background: white;}

.d1text, .d2text, .d3text{
    color: lightslategrey;
    font-size: 1.5rem;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    max-width: 330px;
    max-height: 200px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    
    transition: color 0.5s linear;
}

.d1text{ margin: 13% auto 0 auto; }
.d2text{ margin: 13% auto 0 auto; }
.d3text{ margin: 10% auto 0 auto; }


.d1text:hover{ color:orange; }
.d2text:hover{ color:orange; }
.d3text:hover{ color:orange; }

.d1{
    grid-row-start: 4;
    grid-column-start: 2;
    grid-row-end: 5;
    grid-column-end: 3;
    box-shadow: 0 0 3px black;
}

.d2{
    grid-row-start: 4;
    grid-column-start: 3;
    grid-row-end: 5;
    grid-column-end: 4;
    box-shadow: 0 0 3px black;
}

.d3{
    grid-row-start: 4;
    grid-column-start: 4;
    grid-row-end: ;
    grid-column-end: 5;
    box-shadow: 0 0 3px black;
}

.b2{
    grid-row-start: 5;
    grid-column-start: 1;
    grid-row-end: 6;
    grid-column-end: 6;
    width: 100%;
    margin: 0;
    background-color: white;
    box-shadow: 0 0 10px #F2BF93;
}

@media (max-width: 1500px) {
    .grid-container{
        grid-template-rows: 80px 500px 80px 1fr 120px;
    }
    .c3{
        font-size: 1.5rem;
    }
}

@media (max-width: 1200px) {
    .grid-container{
        grid-template-columns: 3% 1fr 1fr 1fr 3%;
        grid-template-rows: 80px 500px 80px 1fr 1fr 1fr 120px;
    }
    .c1{
        display:none;
    }
    .c2{
        grid-row-start: 2;
        grid-column-start: 2;
        grid-row-end: 3;
        grid-column-end: 5;
    }
    .c3{
        grid-row-start: 2;
        grid-column-start: 2;
        grid-row-end: 3;
        grid-column-end: 5;
        font-size: 2.3rem;
    }
    .b{
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: 4;
        grid-column-end: 6;
    }
    .d1{
        grid-row-start: 4;
        grid-column-start: 2;
        grid-row-end: 5;
        grid-column-end: 5;
    }
    .d2{
        grid-row-start: 5;
        grid-column-start: 2;
        grid-row-end: 6;
        grid-column-end: 5;
    }
    .d3{
        grid-row-start: 6;
        grid-column-start: 2;
        grid-row-end: 7;
        grid-column-end: 5;
    }
    .b2{
        grid-row-start: 7;
        grid-column-start: 1;
        grid-row-end: 8;
        grid-column-end: 6;
    }
    .d1, .d2, .d3{ 
        margin: 3% auto 3% auto; 
        min-width: 400px;
    }
    .d1text, .d2text, .d3text{ font-size: 1rem; margin-left: auto; margin-right: auto; }
    .navigacia{ font-size: 1,4rem;}
}

@media (max-width: 1024px) {
    .grid-container{
        grid-template-rows: 80px 450px 80px 1fr 1fr 1fr 120px;
    }
}

@media (max-width: 880px) { .navigacia{ font-size: 1.2rem; } }

@media (max-width: 780px) { .navigacia{ font-size: 1.2rem;}}

@media (max-width: 680px) {
    .c2{ font-size: 0.8rem; }
    .c3{ font-size: 1.8rem; }
    .grid-container{ grid-template-columns: 1% 1fr 1fr 1fr 1%; }
    .d1, .d2, .d3{ 
        margin: 3% auto 3% auto; 
        min-width: 300px;
        max-height: 180px;
    }
}
    
@media (max-width: 580px) { 
    .navigacia{ font-size: 1.1rem; }  
    .navigacia_knopki{ margin: 0 10px; } 
    .d1, .d2, .d3{ 
        margin: 3% auto 3% auto; 
        min-width: 250px;
        max-height: 150px;
    }
}    

@media (max-width: 480px) {
    .c2{ font-size: 0.6rem; }
    .c3{ font-size: 1.5rem; }
    .grid-container{ grid-template-columns: 5px 1fr 1fr 1fr 5px; }
    .d1, .d2, .d3{ 
        margin: 3% auto 3% auto; 
        min-width: 200px;
        min-height: 130px;
    }
}

@media (max-width: 380px) {
    .c2{ font-size: 0.5rem; }
    .c3{ font-size: 1.4rem; }
    .d1, .d2, .d3{ 
        margin: 3% auto 3% auto; 
        min-width: 155px;
        min-height: 100px;
    }
}

@media (min-width: 2000px) {
    .grid-container{ grid-template-rows: 80px 1fr 120px 500px 180px; }
    .c1{
        max-width: 80%;
        max-height: 100%;
        margin: 5% 0 0 20%;
    }
    .c2{ font-size: 1.5rem; }
    .c3{ font-size: 2.5rem; }
    .d1, .d2, .d3{ margin-left: auto; margin-right: auto; min-width: 500px; min-height: 250px; }
    .d1text, .d2text, .d3text{ font-size: 2rem; }
    .navigacia{ font-size: 2.2rem; padding: 16px 0 0 0;}
    .navigacia_knopki{ margin: 0 90px;}
}

@font-face {
    font-family: 'Roboto', sans-serif;
    src: url(fonts/Roboto-Medium.ttf);
}

@font-face {
    font-family: 'Open Sans', sans-serif;
    src: url(fonts/OpenSans-Light.ttf);
}
@font-face {
    font-family: 'Francois One', sans-serif;
    src: url(fonts/FrancoisOne-Regular.ttf);
}

.m1::-webkit-scrollbar {
  width: 10px;
}

.m1::-webkit-scrollbar-track {
  -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
  background-color: #f9f9fd;
}

.m1::-webkit-scrollbar-thumb {
  background-color: #f2bf93;
  background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .25) 50%,
                    rgba(255, 255, 255, .25) 75%,
                    transparent 75%,
                    transparent);
}