* {
   box-sizing: border-box;
}

body {
   font-family: Arial, Helvetica, sans-serif;
   margin: 10px;
   
   
}

/* Style the header */
.header {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: 15px;
   background: #1abc9c;
   color: white;
   font-size: 25px;
   font-weight: 500;
   }

.col1 {margin-top: 30px;  }

.col2 {margin: 12px; 
      line-height: 10px;
      text-shadow: 2px 2px 0px rgba(0,0,0,2);
}

/*Вставил - липкое меню*/
.nav {position: -webkit-sticky;  
      position: sticky;
      top:0;
      padding: 1px;

}

/*Вставил*/
.nav { display: flex;
       flex-wrap: wrap;
       background-color: #333;
      

 }

.dropbtn {
   background-color: #333;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
}

.dropup {
   position: relative;
   display: inline-block;
   float: left;
}

.dropup-content {
   display: none;
   position: absolute;
   background-color: #e5b6b6;
   min-width: 160px;
   top: 50px;
   z-index: 1;
}

.dropup-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}

.dropup-content a:hover {background-color: #fff}

.dropup:hover .dropup-content {
   display: block;
}

.dropup:hover .dropbtn {
   background-color: red;
}

.drop a {color: #fff;
   text-decoration: none;

}
.drop:hover .dropbtn {background-color: red;}




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

}

.flex-container > div {  
   margin: 10px;
   padding: 20px; 
   text-align: center;
   line-height: 20px;


}


.button {
   text-decoration: none;
   display: inline-block;
   padding: 0 12px;
   background: #cccccc;
   color: white;
   text-transform: uppercase;
   font-size: 12px;
   line-height: 28px;
   transition: .3s ease-in;
}


.fakeimg {
   background-color: rgb(55, 159, 180);
   width: 100%;
   padding: 20px 20px 20px 20px;
   border-radius: 10px;
   margin-top: 10px;
   box-shadow: 10px 5px 5px rgb(50, 56, 34);
   color:white;
}
.fakeimg a {color:white;}
.fakeimg img {border-radius: 10px;}

.fakeimg1 {
   background-color: rgb(55, 159, 180);
   width: 100%;
   padding: 20px 20px 20px 20px;
   border-radius: 10px;
   margin-top: 10px;
   box-shadow: 10px 5px 5px rgb(50, 56, 34);
   color:white;
}
.fakeimg1 a {color:white;}
.fakeimg1 img {border-radius: 10px;}

.block3 {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: 10px;
   margin-top: 15px;
   border-radius: 20px;
   box-shadow: 10px 5px 5px rgb(50, 56, 34);
   background-color: aqua;
   margin-bottom: 15px;
}

.content-right a {margin: 10px;}

p {text-align: justify;}



h1 {color: white;}

h2 {color: white;}

@media(max-width:240px){
   header {margin-left: 40px;}
  .joy {font-size: 16px;}
.col2 {font-size: 16px;}
.col1 {height: 60%;margin-top: 15px;}
h2 {font-size: 20px;line-height: 15px;}
.content-right a {margin: 10px;}
.main {margin-left: 10 px;}
.andry {font-size: 12px;}
.adr {margin-bottom: 10px;}
footer {height: 80%;width: 80%;line-height: 10px;margin-left: 40px;}
.foot1 adry {font-size: 10px;padding: 0px; margin-top: 5px;}
.foot2 {font-size: 16px;}
.foot2 .inf {margin-top: 5px;}
.foot3 p {font-size: 16px;margin-top: 5px;}

.fakeimg img {height: 50%;width: 50%;}
.fakeimg1 {display: none;}
.fox {display: none;}
.info {display: none;}
.block1_img6 {display: none;}
.block3_img2 {display: none;}
.block5 {margin-right: 60px;}
.content-right a {margin: 12px;}
}


@media(max-width:380px){
   header {margin-left: 40px;}
  .joy {font-size: 16px;}
.col2 {font-size: 16px;}
.col1 {height: 60%;margin-top: 15px;}
h2 {font-size: 20px;line-height: 15px;}
.content-right a {margin: 12px;}
.main {margin-left: 10 px;}
.andry {font-size: 12px;}
.adr {margin-bottom: 10px;}
footer {height: 80%;width: 80%;line-height: 10px;margin-left: 40px;}
.foot1 adry {font-size: 10px;padding: 0px; margin-top: 5px;}
.foot2 {font-size: 16px;}
.foot2 .inf {margin-top: 5px;}
.foot3 p {font-size: 16px;margin-top: 5px;}
.fakeimg img {height: 50%;width: 50%;}
.fakeimg1 {display: none;}
.fox {display: none;}
.info {display: none;}
.block1_img6 {display: none;}
.block3_img2 {display: none;}
.block5 {margin-right: 60px;}
}


@media(max-width:773px){
.header {height: 150px;padding:5px;}
.block3_img2 {display: none;}
.fakeimg1 {display: none;}
.fakeimg img {height: 70%;width: 70%;}
.block1_img6 {display: none;}
.fox{display: none;}
.block3 {height: 70%;width: 70%;}
.block3_img1 img {height: 80%;width: 80%;}
.fakeimg a {font-size: 18px;}
.skyp {display: none;}
}
































.content-right { 
                margin: 6px 6px 6px 6px ;
                padding: 8px 6px 6px 8px;
                     }


.content-right a {text-decoration: none;
                  font-size: 10px;
                   height: 35px;
                   width: 35px;
                   border-radius: 50%;
                   padding: 8px 6px 6px 6px;
                   text-align: center;
                   border: 2px solid red;
                   font-weight: 800;
                   color: #fff;
}


.content-right a:active {
   background-color: rgb(51, 17, 188);
   transform: translateY(4px);
}

.row {  
   display: flex;
   flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
   flex: 25%;
   background-color: #f1f1f1;
   padding: 15px;
   
}
.link_side { text-decoration: none; /*Убираем подчеркивание у ссылки*/

}

.side a:hover {color: red;

}

.sky { color: yellow;}

.skyp { text-align: justify;
        font-size: 14px;
}



/* Main column */
.main {   
   flex: 70%;
   background-color: white;
   padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
   background-color: rgb(55, 159, 180);
   width: 100%;
   padding: 20px 20px 20px 20px;
   border-radius: 10px;
   margin-top: 10px;
   box-shadow: 10px 5px 5px rgb(50, 56, 34);
   color:white;
}

.fakeimg a {color:white;}

.fakeimg img {border-radius: 10px;}








/* Fake image, just for this example */
.block {
   background-color: rgb(38, 11, 168);
   width: 100%;
   color:white;
   padding: 10px 26px;
   border-radius: 20px;
   box-shadow: 10px 5px 5px rgb(50, 56, 34);
   
}
.comp {color: red;}

.block1 {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   background-color: rgb(15, 180, 70);
   padding: 10px;
   margin-top: 15px;
   border-radius: 20px;
   box-shadow: 10px 5px 5px rgb(50, 56, 34);
   
}

 #loft{ color: white;
   margin-top: 15px;
   margin-left: 15px; }

.block1_img1 {margin: 10px;}

.block1_img2 {margin: 10px;}
      
.block1_img3 {margin: 10px; }

.block1_img4 {margin: 10px; }

.block1_img5 {margin: 10px; }

.block1_img6 {margin: 10px; }

.block1 a:hover , .block3 a:hover ,.block5 a:hover { color: red;                }
.block1 a , .block3 a ,.block5 a { color: #f1f1f1;                }

 


figure {padding: 5px;}
figure img {border-radius:5px;}

figcaption a { text-decoration: none;}
               

figcaption {font-weight: bold;
      text-align:center;
      font-size: 15px;
      padding: 5px;}

      .block2 {
         background-color: rgb(15, 180, 70);
         width: 100%;
         color:white;
         padding: 10px 26px;
         border-radius: 20px;
         box-shadow: 10px 5px 5px rgb(50, 56, 34);
         margin-top: 15px;
         margin-bottom: 15px;
         
      }



      .block3 {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         background-color:rgb(113, 183, 235);
         padding: 10px;
         margin-top: 15px;
         border-radius: 20px;
         box-shadow: 10px 5px 5px rgb(50, 56, 34);
         margin-bottom: 15px;
      }

     #fig1 { font-size: 14px;}
     #fig2 { font-size: 14px;}
     #fig3 { font-size: 14px;}
     #fig4 { font-size: 14px;}
     #fig5 { font-size: 14px;}
     #fig6 { font-size: 14px;}


      .block4 {
         background-color: rgb(38, 11, 168);
         width: 100%;
         color:white;
         padding: 10px 26px;
         border-radius: 20px;
         box-shadow: 10px 5px 5px rgb(50, 56, 34);
         
      }

      .block5 { background-color: rgb(180, 15, 153);
         width: 100%;
         color:white;
         padding: 10px 26px;
         border-radius: 20px;
         box-shadow: 10px 5px 5px rgb(50, 56, 34);
         margin-top: 15px;
         margin-bottom: 15px;
         margin-left: 15px;
         margin-right: 15px;
       }

      #up1 { font-size: 14px;}
     #up2 { font-size: 14px;}
     #up3 { font-size: 14px;}






/*Добавил классы блока скользит*/   
.sticky {
          position: fixed;
          top:0;
          width: 100%;
}

.sticky + .content {
          padding-top: 72px;
}

.navbar a.right1 {
   float: right;
   margin: 6px 18px 6px 6px ;
}

.navbar a:nth-child(7) 
{
   font-size: 10px;
   height: 35px;
   width: 35px;
   border-radius: 50%;
   padding: 8px 6px 6px 6px;
   text-align: center;
   border: 2px solid red;
   font-weight: 800;
}

.navbar a:nth-child(7):active {
   background-color: green;
   transform: translateY(4px);
}

.navbar a.right2 {
   float: right;
   margin: 6px 6px 6px 6px ;
}

.navbar a:nth-child(8) 
{
   font-size: 10px;
   height: 35px;
   width: 35px;
   border-radius: 50%;
   padding: 8px 6px 6px 4px;
   text-align: center;
   border: 2px solid red;
   font-weight: 800;
}

.navbar a:nth-child(8):active {
   background-color: green;
   transform: translateY(4px);
}



footer { display: flex;
   flex-wrap: wrap;
   justify-content: space-around ;
   padding: 10px;
   background: #1abc9c;
   color: white;
   font-size: 20px;
   font-weight: 500;


}

.adry {line-height: 20px;font-size: 22px;font-weight: 700;}
.adr {line-height: 20px;font-size: 16px;font-style: italic;}
.foot2 {margin-top: 20px; line-height: 10px;}

.foot3 {margin-top: 20px;}        


.inf {text-indent: 15px;font-weight: 600;}
.info {font-size: 15px; line-height: 5px; font-style: italic;}

/*Форма*/ 

input[type=text], select, textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   margin-top: 6px;
   margin-bottom: 16px;
   resize: vertical;
}

input[type=submit] {
   background-color: #4CAF50;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

input[type=submit]:hover {
   background-color: #45a049;
}

.container {
   border-radius: 5px;
   padding: 20px;
   background-color: rgb(55, 159, 180);
   margin-bottom: 20px;
}


#blink {color: red;font-weight: 700;}

.yol {color: blue;font-weight: 700;}

.bopp ul li {line-height:25рх;}