article{
  justify-self: center;
  max-width: 85%;
  text-align: justify;
}
h1{
  text-align: center;
  color: var(--cor);
}
.sidepic{
  background-color: rgb(39, 159, 163);
  width: 100%;
  overflow: hidden;
  margin-top: 0.5%;
  display: grid;
  grid-template-rows: 5fr 1fr;
  box-shadow:  0px 0px 5px 0.5px rgb(29, 60, 71);
  text-shadow: 3px 4px 5px rgb(79, 52, 43);
}
.sidepic .sd1{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr ;  
  
   
 
  }
#dekor1,#dekor2{
  width: 100%;
  opacity: 0.8;
  position: relative;
  z-index: 1;
  
}
#dekor1:hover,#dekor2:hover{
  animation: blesk 5s ease-out 3;
 
  z-index: 6;
}

.tetx_list{
  width: 100%;
  border-radius: 125px;
  
  text-align: center;
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  

}

.tetx_list h1{
  color: rgb(210, 70, 10);
  font-size: 295%;
  
}
.sidepic p{
  color: rgb(210, 70, 10);
  font-size: 95%;
  text-align: center;
}
#dekor1{
  
  justify-self: start;
}
#dekor2{
  
  justify-self:end;
}




#upinf{
  background-color: rgb(179, 80, 27);
  display: grid;
  grid-template-columns: 2fr 3fr;
  box-shadow:  0.5px 5px 5px 0px rgb(82, 53, 25);
}
.navif p:last-child{
  display: none;
}
 .infap{
  display: flex;
  padding-left: 5%;
 }
.about,.infap a{
  color: blanchedalmond;
  font-size: 8px;
  text-decoration: none;
}
.niz{
  display: flex;
  position:static;  
  bottom: 0;
  width: 100%;
  text-decoration: none;
  
 
}

.blag{
   margin-bottom: 40%;
  text-align: center;
  align-self: center;
  
}
#dninf{
  background-color: rgb(92, 51, 28);
  width: 100%;  
  display: grid;
  grid-template-columns: 2fr 3fr;
  box-shadow:  0px 0px 5px 0.5px rgb(82, 53, 25);
}
#upinf a{
  text-decoration: none;
  color: rgb(79, 214, 193);
  font-size: medium;
  
}
#upinf a:hover{
   color: rgb(139, 159, 156); 
  
}
.baseinfc{
  display: grid;
  grid-template-columns: 1fr 3fr;
  height:auto;
  margin-top: 1px;

}
.leftinf{
  background-color: rgb(178, 108, 70);
  color: aliceblue;
 
}

.leftinf h4{
   text-align: center;
}
.leftinf a{
  color: wheat;
  text-decoration: none;

}
.leftinf a:hover{
  color: brown;
}
.ritinf{
  color: rgb(52, 42, 31);
  box-shadow: -5px 0.5px 5px 0px rgb(78, 64, 56);
  display: grid;
  grid-template-columns: 1fr; 
}

#frm{
  padding-top: 15%; 
  margin-bottom: 50%;
}
.ritinf p{
  display: flex;
  justify-self: center;
  width: 85%;
  text-indent: 15px;
}
.navif{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

article{
  max-width: 95%;
  text-align: justify;
  
}
h2,h4,h5,h3{
  text-align: center;
}
.heros{
  display:flex;  
  min-width: fit-content;  
  margin-top: 1% ;
  justify-content:space-around;
  justify-items:space-around;
  margin-bottom: 2%;
}
.heros button{
  width: 95px;
  box-shadow:   3px 3px rgb(55, 59, 53),
  -1em 0 0.4em rgb(98, 98, 87);
  border-radius: 15px;
  border-color: rgb(70, 87, 70);
  background-color: rgb(58, 69, 58);
  color: aliceblue;
  font-size: x-small;
  display: flex;
  justify-content: space-around;
}
@keyframes disapr{
  from{opacity: 1; }
  to{opacity: 0; }
}
@keyframes apir{
  from{opacity: 0;}
  to{opacity: 1;}
}
@keyframes opa1 {
  from {opacity: 0;}
  to {opacity: 1;}
  75%{opacity: 0.8;}
  50%{ opacity: 0.5;}

}
@keyframes rost{
    from{transform: scale(1);}
    to{transform: scale(3) translateY(5%);}
}
@keyframes rost2{
    from{transform: scale(1);}
    to{transform: scale(3) translateY(35%);}
}
.zarstva{
  width: 650px;
 
  display: grid;
  grid-template-columns: 1fr;
  justify-self: center;
  
}
.left_flo_cont{
    float: left;
    width: 330px;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
     
   
}
.right_flo_cont{
    float: right;
    width: 330px;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
       
    
}

article h1 {
  animation: apir 1s ease-in-out forwards;
}
@keyframes stupm{
    from{transform: translate(0%,0%) ;}
    to {transform: translate(-10%,395%) scale(15) rotate(-3deg); filter: brightness(1);}
}
 @keyframes playbg{
  from{margin-bottom: -50%;opacity: 0; margin-left: 50%;}
  to{opacity: 1; margin-bottom: 0;margin-left: 0;}
 }
 @keyframes blesk{
  from{filter: brightness(1);}
  to{filter: brightness(1);}
  50%{filter: brightness(3);}
}
@keyframes ukmove {
    from{transform: rotate(5deg);}
    to{transform: rotate(-5deg);}
}
@keyframes letu{
  from{background-position: left;}
  to{background-position:right;}
}
@keyframes letunaz{
  from{background-position: right;}
  to{background-position:left;}
}

@keyframes letus{
  from{background-position: left;}
  to{background-position:center;}
}
@keyframes letu1{
  from{background-position: bottom;}
  to{background-position:top;}
}
.smallpic{
   height: 300px;
    width: 310px;
    background-color:white;
    display: flex;    
    align-items: end;
    justify-content: center;  
    justify-self: center;    
    background-size: cover;
    border-radius: 8px;
    overflow: hidden;
    
    
}
.largepic{
  height: 330px;
  width: 600px;
  display: flex;
  justify-self: center;
  align-items: end;
  overflow: hidden;  
  border-radius: 8px;
  background-color:white;
}
@keyframes dfli{
  from{transform: translate(0px,-2px) rotate(2deg);}
  to{transform: translate(8px,-1px)rotate(2deg);}
  50%{transform: translate(-8px,6px) rotate(-1deg);}
}
@keyframes dflip{
  from{transform: translate(0px,0px) rotate(15deg);}
  to{transform: translate(8px,-1px) rotate(15deg);}
  50%{transform: translate(-8px,2px)rotate(12deg);}
}
@keyframes orlmove{
  from{transform:  translate(0,0);opacity: 1; }
  to{transform:  translate(-95%,450%);opacity: 0;filter:blur(1px)}
  99%{transform:  translate(-95%,400%) scale(4); opacity: 0.9;}
}
@keyframes zdmove {
    from{transform: translateX(0%);}
    to{transform: translateX(25%);}
}
@keyframes vetmuv{
  from{transform: rotate();}
  to{transform: rotate(-36deg) scale(0.8) translate(-125%,45%);filter: blur(0.1);}
}
@keyframes zoom {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 130% 130%;
  }
  100% {
   background-position: top ;
   background-size: 160% 160% ;
  }
}
@keyframes zoom1 {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 130% 130%;
  }
  100% {
   background-position: center ;
   background-size: 160% 160% ;
  }
}
@keyframes zoom2 {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 130% 130%;
  }
  100% {
   background-position: bottom ;
   background-size: 160% 160% ;
  }
}
@keyframes jumpup {
    from{transform: translateY();opacity: 1;}
    to{transform: translateY(-45%) rotate(3deg);opacity: 1;}
    95%{transform: translateY(-55%) rotate(-3deg);opacity: 1;}
    90%{transform: translateY(-65%);opacity: 1;}
}

@keyframes movk{
  from{transform: scale(1); filter: brightness(0.6);}
  to{transform: scale(1.2) rotate(-3deg) translateY(-3%);filter: brightness(0.7);}
  50%{transform: scale(1.5) rotate(3deg)translateY(3%);filter:brightness(1);}
}
@keyframes jumpup3 {
    from{transform: translateY();opacity: 1;}
    to{transform: translateY(-200%) rotate(3deg);opacity: 1;}
    75%{transform: translateY(-185%) rotate(8deg) scale(3);opacity: 1; }
}
@keyframes skk{
  from{transform: translateY(0);}
  to{transform: translateY(-1%);}
  50%{transform: translateY(10%) ; filter: brightness(0.8);}
}
@keyframes darke{
  from{filter: brightness(1);}
  to{filter: brightness(0.6);}
}
.pol h4{
  color: black;
}
.tetx_list1{
   
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    height: auto;
    justify-content: space-between;
    justify-items:center;
    justify-self: center;
    
}

.sidepic1 h1,h4{
  text-decoration:none;
  color: rgb(183, 87, 18);
}

.sidepic1 h4{
  text-align: end;
}

.sidepic1,.starta,.otform{
   min-height: 100vh;
}

.bod1{
  height: 185px;
  width:155px ;
  border-radius: 20px 20px 20px 20px;
  background-color: rgb(168, 150, 61);  
  display: grid;
  
  grid-template-rows: 4fr 2fr;
  justify-content: center;
  align-items: end;
  text-shadow: 5px;
  margin-bottom: 5%;
  color: aliceblue;
  font-family: 'Times New Roman', Times, serif;
   box-shadow: 0.5px 5px 5px 0px rgb(84, 67, 7);
}
.bod1 a{
  text-decoration: none;
  color: aliceblue;
  text-align: center;
  
   
}

.bod1:hover{
 
  transform: translate(0.2%,0.2%);
  
}
.bod1 a:hover{
  color: rgb(183, 87, 18);
}
.pictus{
  border-radius: 12px;
  
  background-size: cover;
  background-color: aliceblue;
  justify-self: center;
  align-self: center;
   width: 145px;
   height: 90px;
  box-shadow: 0.5px -5px -0.5px 0px rgb(70, 64, 42);
}
.sttext{
  width: 145px;
  height: 90px;
  justify-self: center;
  justify-content: center;
  text-align: center;
}

@keyframes dfli20{
  from{transform: translate(0px,-2px) rotate(-2deg);}
  to{transform: translate(-28px,166px)rotate(-2deg)}
 
}
@keyframes muvhe{
    from{transform: rotate(1deg);}
    to{transform: rotate(0deg);}
    50%{transform: rotate(-5deg);}
}
.mats{
  height: 500px;
  width: 150px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}

.gol{
  height: 110px;
  width:145px ;
  border-radius: 50px 50px 20px 20px;
  background-color: aquamarine;
  margin-bottom: -25%;
}
.bod{
  height: 210px;
  width:185px ;
  border-radius: 60px 60px 40px 40px;
  background-color: aquamarine;
  margin-bottom: 150%;
  
}
.bod,.gol{
  box-shadow: 5px 5px 0px 0px blue;
}
.bod:hover{
  box-shadow: 0.5px 5px 0px 0px rgb(255, 0, 106);
  transform: translate(0.2%,0.2%);
}
.gol:hover{
  box-shadow: 0.5px 0px 0px 0px rgb(255, 0, 106);
  
}
.ukaz{
  height: 45px;
  width: 80px;
  bottom: 20px;
  right: 20px;
  position: fixed;
  text-decoration: none;
 
  border-radius: 15px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 2%;
  

}
.ukaz button{
  opacity: 0.5;
  background-color: chocolate;
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(70, 33, 33, 0.3);
  text-align: center;
}
.ukaz button:hover{
  opacity: 0.9;
}
.ukaz a{
  text-decoration: none;
  color: azure;
 
  align-self: center;
  
}
.tags-list{
  display: flex;
  justify-content:space-evenly;
  flex-wrap: wrap;
  
  
}
.tgcon{
  border-radius: 2px;
  background-color: bisque;  
  text-align: center;  
  height: 20px;
  width: 55px;
  line-height: 8px;
  margin-bottom: 1%;
 
  
}
.tgcon a{
  color: chocolate;
  line-height:8%;
  font-size: xx-small;
  text-decoration: none;
}
.tgcon a:hover{
  color: rgb(243, 57, 10); 
  
}
.tgcon:hover{
  background-color: antiquewhite;
  transform: translate(0.5%,0.5%);
}
.starta{
  height: 100%;
}
.fbcont{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 3%;
  max-width: 90%;
  
}
.fbbox{
  
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(109, 69, 28);
  text-align: center;
  text-underline-offset: initial;
  font-size: smaller;
  min-width: 125px;
  
}
.fbbox:hover{
   box-shadow: 2px 2px 5px rgb(180, 153, 65);
}
.fbtext{
  margin: 3%;
}
.fbtext p:first-child{
    text-align: end;
    font-size: smaller;
    font-weight: bold;
}
.otform{
  max-width: 85%;
 
}
.otform label{
  justify-content: center;
  align-self: start;
} 
 

#mesw{
     max-width: 95%;
      align-self: center;
  }

body.with-cookie-bar {

  padding-top: 35px;

}

.cookie-bar {

  position: fixed;
  z-index: 9999;
  width: 100%;
  font-size: x-small;
  top:0;
  color: black;
  text-align:center;

  height:115px;

  line-height: 12px;

  background: #eee;

}
.cookies_exp{
  margin-top: 12%;
  width: 85%;
  display: grid;
  justify-self: center;
  
}
.cookie-group-form{
  display: grid;
  grid-template-rows: 1fr 1fr;
}
@media screen and (width<470px){
   .baseinfc{
    display: grid;
    grid-template-columns: 1fr;
   }
   .sidepic{
    max-height: 200px;
   }
   .tetx_list h1{
    font-size:large;
   }
    .right_flo_cont,.left_flo_cont,.zarstva{
        justify-self: center;
       
        float: none;
       

    }
    .right_flo_cont img,.left_flo_cont img{
       justify-items: center;
    }
    .zarstva{
      
      width: 330px;
      display: grid;
      grid-template-columns: 1fr;
       justify-content: center;    
      justify-self: center;
      
  }
  .zarstva .largepic{
       justify-items: center;
    }
  .largepic{
      height: 300px;
      width: 310px;
      display: grid;
      grid-template-columns: 1fr;
      justify-content: center;
      justify-self: center;
      background-color:white;
}
.tetx_list1{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  justify-content: space-around;
  justify-self: center;
 
}
  .otform {
    max-width: 95%;
    align-items: center;
    margin-bottom:100% ;
    margin-left: 10%;
  }
  
  
  

    .navif a,p{
      font-size: xx-small;
    }

    .navif p:nth-child(even){
    display: none;
 }
    .navif p:last-child{
    display:block;
 }

  .infap{
  display: block;
  padding-left: 5%;
 }
}


@media screen and (width<680px) and (width>470px){
  .zarstva{
        float: left;
      
      
  }
  .zarstva{
      
      width: 330px;
      display: grid;
      grid-template-columns: 1fr;
       justify-content: center;    
      justify-self: center;
      
  }
  .zarstva .largepic{
       justify-items: center;
    }
  .largepic{
      height: 300px;
      width: 310px;
      display: grid;
      grid-template-columns: 1fr;
      justify-content: center;
      justify-self: center;
      background-color:white;
}
}



@media screen and (width>780px) {
  .zarstva{
        float: left;
      
      
  }
  
}
@media screen and (width>1100px) {
 article{
  width: 75%;
 }
  
  
}