@import url("header.css");
@import url("nav.css");
@import url("main.css");
@import url("footer.css");
@import url("form.css");
@import url("media.css");

@font-face{font-family: 'bebasneuecyrillic'; src:url('../FONTS/bebasneuecyrillic.ttf');}
@font-face{font-family: 'Montserrat-Black';src:url('../FONTS/Montserrat-Light.ttf');}


:root {/*переменные*/
  --cvet_fon_el: #91A79E;
  --cvet_fon: #eceef7/*#7f9a9a*/;
  --dark-grey: #6c6c75;
  --accent-color: rgb(185, 52, 134);
  /*#313d48 - хор серосиний*/
  /*#2b313f - хор темносерый*/
}


*{/*очистка стилей браузера*/
    margin: 0;
    padding: 0;
    box-sizing: border-box /*border-box  content-box*/;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: Verdana, sans-serif;
}

body{
    font-size:16px;
    background-color: #dbdbdb/*#2b313f*/;
    min-width: 700px;
    max-width: 1400px; /* равно =200+1200*/
    /*выравнивание по центру*/
    height: 100%;
    margin: 0 auto;
    border-radius: 4px;
    position:relative;
}

h2{
    padding: 2px;
    background-color: #494d55/*#91A79E*/;
    margin: 0px;
    color:#a3e6e2;
    /*border: 2px solid #a3e6e2;*/
    font-family: "bebasneuecyrillic"/*""*/;
}

#stranica{
   position: relative;
   /*z-index: 0;  */
   top:-270px;
  
}

main img{
    max-width: 600px;
    /*width: 600px;*/
    height: 100%;

}    


/*article img{*/
    /*display: block;*/
   /*display: inline-block;*/
   /*min-height: 100%;*/
    /*float: left;*/
    /*max-width: 300px;*/
    /*height: auto;*/
    /*padding: 10px;*/
    /*margin: 10px 10px 10px 10px;*/
    /*background-color: #EEF1EF;*/
    /*box-shadow: 4px -4px 7px -1px rgba(31, 54, 71, 0.2);*/
    /*box-sizing: border-box;*/
    /*overflow-clip-margin: content-box;}*/



#shapka{
   
   position: sticky;
   display: grid;
   grid-template-columns: 160px auto;
   grid-template-rows: auto auto;
   top: 0;
   z-index: 20; 
   /*gap: 10px;*/
   padding:10px;
   padding-top:0;
   backdrop-filter: blur(9px);
   background-color: rgba(9, 9, 9, 0.5);
   margin:10px;
   margin-top:0;
   border-radius: 4px;
   border-bottom: 1px solid #494d55;
}

#logotip{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
#logotip img{
height: 157.5px;
height: 110px;
display:block;
}

#kontakty{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    color:#ffffff;
    white-space: nowrap;
}
#kontakty a{
    font-size: 20px;
    text-decoration: none;
    white-space: nowrap;
    color:	#a3e6e2;
    font-weight: bold;

}
        
#kontakty a:hover{
    transition: color 0.3s linear;
    text-shadow: 0 0 4px #a3e6e2;
}

p{
    font-family: "Montserrat-Light", Helvetica, Arial, sans-serif;
    font-size: 18px;
    padding: 5px;
    padding-left: 10px;
            
}
        
li {
    font-family: "Montserrat-Light", Helvetica, Arial, sans-serif;
    font-size: 16px;
    padding-left: 10px;
    margin-left: 25px;
}
        

       



nav{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-items: start;
    justify-content: start;
    
    /*background-color: rgba(9, 9, 9, 0.5);*/
}


#glavy{
    color:#ffffff;
    font-weight: 900;
    z-index:2;
    /*padding: 10px;*/
    margin-bottom: 0;
    
}




#glavy a{
    display: inline-block;
    color:#ffffff;
    font-size: 22px;
    font-weight: 900;
    padding: 5px;
    border-radius: 4px;
    
    /* background-color: #36407699; 00 - полностью прозрачный ff - непрозрачный*/
    margin:0px;
    text-decoration: none;
    
}
#glavy a:hover{
    color:#30ada7;
    text-shadow: 0 0 2px #30ada7;
}

#glavy span{
    display: inline-block;
    font-size: 20px;
    /*border: 1px solid white;*/
    border-radius: 4px;
    padding: 5px;
    /*margin:3px;*/
    color:#30ada7;
    margin-bottom:0px;
    /*background-color: rgba(9, 9, 9, 0.1)*/
}


#menyu{
    /*padding: 10px;*/
    /*background-color: rgba(9, 9, 9, 0.1);*/
    border: 1px #30ada7;
}

#menyu a{
    display: inline-block;
    color:#ffffff;
    font-size: 18px;
    font-weight: 800;
    padding: 5px;
    /*border: 1px solid white;*/
    border-radius: 4px;
    /*background-color: #36407699;  00 - полностью прозрачный ff - непрозрачный*/
    margin:3px;
    text-decoration: none;
}

#menyu span{
    display: inline-block;
    font-size: 20px;
    border: 1px solid white;
    border-radius: 4px;
    padding: 10px;
    margin:3px;
    color:#30ada7;
    /*background-color: rgba(9, 9, 9, 0.9)*/
}
#menyu a:hover{
    color:#30ada7;
    text-shadow: 0 0 1px red;

}

#menyu_fon img{
    display: block;
    /*width: 100%;*/
    height: 800px;
    width:100%;
    max-width:3000px;
    object-fit: cover;
    
}



#poloska{
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background-color: #2b313f33;
    z-index:1;
}


#plashka{
   display: grid;
   grid-template-columns: 1fr 1.618fr;
   grid-template-rows: auto auto;
   /*gap: 10px;*/
   padding:0;
   margin:10px 0 10px 0;
   border-radius: 4px;
   background-color: #ffffff;
   /*overflow-clip-margin: content-box;*/
   overflow: hidden;
 }
 #plashka h2{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: #2b313f33;
    z-index:5;
 }
 
#plashka #img1{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

#img1 img{
    display:block;
    object-fit: cover;
    width:100%;
    height:600px;
    overflow-clip-margin: content-box;
}

#plashka #text{
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

#plashka #text p{
}



#plashka3{
    box-sizing: content-box;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: auto 0.5fr auto;
   gap: 10px;
   padding:10px;
   margin:20px 0 20px 0;
   border-radius: 4px;
   overflow: hidden;
   background-color: #ffffff;
   border:4px solid #a3e6e2;
   border:1px solid #3d4047;
 }
 
#plashka3 h2{
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    background-color: #494d55;
    /*display: inline;*/
    z-index:5;
    font-size: 30px;
    border:1px solid #3d4047;
 }
 
#plashka3 #img1{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

#plashka3 #img2{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

#plashka3 #img3{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}


#plashka3 #img1,
#plashka3 #img2,
#plashka3 #img3{
    border-radius: 4px;
    border:1px solid #494d55;
}




#plashka3 #img1 img, #plashka3 #img2 img, #plashka3 #img3 img{
    display:block;
    object-fit: cover;
    width:100%;
    height:400px;
    overflow-clip-margin: content-box;
    

    /*
        width: 450px;
    min-width: 300px;display:block;
    object-fit: cover;
    overflow-clip-margin: content-box;*/
}

#plashka3 #text{
    grid-column: 1 / 4;
    grid-row: 3 / 4;
}

#plashka3 #text p{
    font-size: 22px;
}





/*@import url("form.css"); добавляет другие файлы в основной*/

/*@import "form.css";*/
/* #494d55  -красивый серый хорошо к бирюзовому*/
/*#a9a9a9*/
/*темносиний бежевый и голубой #2d303f  #f9f6e3   #537e8e*/


        

        




section{
    padding: 10px;
    margin: 10px 10px 10px 10px;
    background-color: #EEF1EF;
    box-shadow: 4px -4px 7px -1px rgba(31, 54, 71, 0.2);
    min-height:100%;
}



.leftimg{ /*карточка с флекс, когда не нужно обтекание*/
    display: flex;
    gap: 5px;
    padding: 5px;
    background-color: var(--cvet_fon);
    font-size: 14px;
}

.divimg400{
   

}

.divimg400 div{
    display:inline-block;
    padding: 5px;
    border: 1px solid #2d303f;
    margin:10px;
    height: 100%;
    position: relative;
    background-color: #2d303f;
}

.divimg400 img{
    max-width: 500px;
    height: 100%;
}


.divimg400 h3{
    font-size: 20px;
    color:#a3e6e2;
    top: 0%;
    left: 0%;
    padding: 10px;
    object-position: left top;
    position: absolute;
    /*background-color: #2d303f;*/
    backdrop-filter: blur(7px);
    opacity:0.9;
}


.divimg400 p{ /*карточка с флекс, когда не нужно обтекание*/
    color: #a3e6e2;
    position: absolute;
    bottom: 0%;
    right: 0%;
    background-color: #2d303f;
    font-size: 16px;

}




.blok3img_text{
    background-color: #2d303f;
    border: 1px solid #2d303f;
    display: inline-block;
    margin: 10px;
}

.blok3img_text h3{
    color: #a3e6e2;
    padding: 10px;
}

.blok3img_text>div{
    display: inline-flex;
    gap: 5px;
    padding: 5px;
    background-color: #2d303f;
}


.blok3img_text>div>img{
    max-width: 300px;
    height: 100%;
}


.blok3img_text p{
    color: #a3e6e2;
    background-color: #2d303f;
    font-size: 16px;
    display: inline-block;
    padding: 5px;
    max-width: 650px;
}


.leftimg img{
    max-width: 500px;
    height: 100%;
    
}


.leftimgfloat img{
    float:left;
    max-width: 500px;
    height: 100%;
    border: 1px;
}


.leftimgfloat700 img{
    float:left;
    max-width: 700px;
    height: 100%;
    border: 1px;
}


.leftimgfloat600{
    display: flow-root;
    
}
     
.leftimgfloat600 img{
    float:left;
    margin:10px;
    max-width: 400px;
    height: 100%;
    border: 1px;
}

.leftimgfloat600 p{
    margin:10px;
    font-size: 14px;
  }


.stolbec{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stolbec img{
    max-width: 400px;
    height: 100%;
}



/*display: flow-root;*/


.leftimgfloat br{ /*восстановление потока после float*/
    clear:both;
}

/*article{
    display: inline;
    padding: 10px;
    margin: 10px;
    box-sizing: content-box;
    font-size: 14px;
    margin: 10px 10px 10px 10px;
    background-color: #EEF1EF;
    box-shadow: 4px -4px 7px -1px rgba(31, 54, 71, 0.2);
    box-sizing: border-box;
}*/





.rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
    
}
        


table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-size: 1.2rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
  text-align: left;
}


tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}        
  
        

        
        
        
        
/*nav, header, main, footer{
    margin: 10px;
} */