* {
   box-sizing: border-box;
}

body {
   font-family: Arial, Helvetica, sans-serif;
   margin: 10px;
   background-image: url("img/bg.gif");
   
}

/* 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;


}

.product-item {
   width: 220px;
   text-align: center;
   margin: 0 auto;
   border-bottom: 2px solid #F5F5F5;
   background: white;
   font-family: "Open Sans";
   transition: .3s ease-in;
}
.product-item:hover {
   border-bottom: 2px solid #fc5a5a;
}
.product-item img {
   display: block;
   width: 100%;
}
.product-list {
   background: #fafafa;
   padding: 15px 0;
}
.product-list h3 {
   font-size: 18px;
   font-weight: 400;
   color: blue;
   margin: 0 0 10px 0;
}
.price {
   font-size: 18px;
   color: #fc5a5a;
   font-weight: 600;
   display: block;
   margin-bottom: 12px;
}

.size {color: #000;
   margin-left: 12px;


}

.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;
}
.product-item:hover .button {
   background: #fc5a5a;
}


p {text-align: justify;}

.list {color: red;font-weight: 600;}

.list1 {color: blue; font-weight: 600;}
.list2 {color: blue; font-weight: 600;}

li {color:rgb(67, 142, 26);font-weight: 600;}
.urn li{color: black;font-weight: 400;}


h1 {color: blue;}

h2 {color: blue;}





.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;
                   margin: 10px;
}


.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рх;}

@media(max-width:380px){
   body {font-size: 14px;}
  .joy {font-size: 16px;}
.col2 {font-size: 16px;}
.col1 {height: 60%;margin-top: 15px;}
h2 {font-size: 20px;}
.content-right a {margin: 13px;}
.header {padding: 5px;}
.col1 img {height: 80%;width: 80%;padding-left: 65px;}
.list1{display: none;}
.list3 {display:none;}
.foot1 .adry{font-size: 16px;}
.foot1 .adr{font-size: 14px;}
.foot1 .info{font-size: 14px;margin-bottom: 5px;}
.foot2 .inf {font-size: 14px;line-height: 14px;}
.foot3 p {font-size: 16px;line-height: 14px;}
.flex-container .foot1 {padding: 0px;}
.flex-container .foot3 {padding:0px;}
.flex-container .foot2 {padding: 0px;margin-top: 5px;}
}

@media(max-width:773px){
   .list3 {display:none;}

}