body{
  margin: 0;
}

.font-en{
  font-family: amazone bt, 'Great Vibes', cursive;
}

.font-ru{
  font-family: 'Great Vibes', system-ui;
  font-weight: 400;
  font-style: normal;
}

/*For All*/

/*ANIMATIONS*/
@keyframes grayScaleAnim{
	from{
	 filter: grayscale(0%);
	}
	to{
	 filter: grayscale(40%);
	}
}

@keyframes Opacity{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes rainbowAnim{
  from {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}


/*offline*/
a{
  text-decoration: none;
}



/*For Something*/

/*lang-div*/

.lang-div {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  position: absolute;
  top: 80%;
  left: 5px;
  z-index: 1000;
  grid-gap: 5px;
}
.lang-div .langs{
  padding: 5px;
  border: 1px darkgoldenrod double;
  border-radius: 5px;
  cursor: pointer;
  color: rgb(205, 147, 0);
  background:rgb(44, 18, 0);
}
.lang-div .langs:hover{
  border: gold;
  color: gold;
  background:rgb(112, 47, 0);
}


/*instructions div*/

.instructions-panel{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  position: fixed;
  left: 5px;
  top: 40%;
  z-index: 1000;
  align-items: center;
  box-shadow:0 0 1px 2px rgb(110, 255, 70);
  
}

.instructions-panel .links{
 display: flex;
 flex-direction: column;
 -webkit-flex-direction: column;
 position: absolute;
 padding: 0 0 0 20px;
 grid-gap: 10px;

}
.instructions-panel .links span{
  display:flex;
  display: -webkit-flex;
  transition: 0.5s;
  cursor: pointer;
  background: linear-gradient(60deg, rgb(9, 95, 0),rgb(0, 3, 89),rgb(93, 0, 0),
  rgb(9, 95, 0),rgb(0, 3, 89),rgb(93, 0, 0),rgb(9, 95, 0),rgb(0, 3, 89),rgb(93, 0, 0));
  background-size: 300%;
  animation: rainbowAnim 12s linear infinite;
  color: gold;
  font-size: 0;
  white-space: nowrap;
  text-align:center;
  width:0%;
  height:0%;
  transition: 0.5s;
  justify-content: center;
  margin: 0 0 -50px 0;
}
.instructions-panel:hover .links span{
    width:100%;
    height:100%;
    margin: 0;
    padding: 6px;
    font-size:20px;
}

.instructions-panel .links-bar-btn{
  writing-mode: vertical-lr;
  font-size:12px;
  font-weight: 900;
  color:gold;
  background: linear-gradient(90deg, blue,green,rgb(255, 87, 40));
  background-size: 500%;
  animation: rainbowAnim 9s linear infinite;
  z-index: 2;
  height: 142px;
  text-align: center;
  cursor:default;
 
 }


/*instructions section*/
.instructions-section{
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2;
  flex-direction: column;
  animation: animClickedImg 2s alternate infinite,rainbowAnim 12s linear infinite;
  background:linear-gradient(90deg,rgba(133, 98, 0, 0.970),rgba(202, 148, 0, 0.970),rgba(133, 98, 0, 0.970),
  rgba(202, 148, 0, 0.970),rgba(133, 98, 0, 0.970));
 
}
.instructions-section .none-obj{
  text-align: center;
  padding: 10px 5px;
  background: linear-gradient(60deg, rgb(9, 95, 0),rgb(0, 3, 89),rgb(93, 0, 0),
  rgb(9, 95, 0),rgb(0, 3, 89),rgb(93, 0, 0),rgb(9, 95, 0),rgb(0, 3, 89),rgb(93, 0, 0));
  background-size: 300%;
  animation: rainbowAnim 12s linear infinite;
  color: yellow;
  font-size: 20px;
  letter-spacing: 10px;
  box-shadow: rgb(87, 225, 80) 10px 0 20px, rgb(87, 225, 80) 0 10px 20px, rgb(87, 225, 80) -10px 0 20px, rgb(87, 225, 80) 0 10px 20px;
  cursor: pointer;
  position: relative;
  top: -10px;
}
.instructions-section .information-section-instructions{
  display: none;
  font-size: 20px;
  color: gold;
  border-radius: 5px;
  border: double gold 10px;
  padding: 20px;
  max-width: 50%;
  flex-direction: column;
  -webkit-flex-direction: column;
  grid-gap: 15px;
  text-align: center;
  animation: rainbowAnim 30s linear infinite;
  background: linear-gradient(10deg, rgb(9, 95, 0),rgb(0, 3, 89),rgb(93, 0, 0),
  rgb(9, 95, 0),rgb(0, 3, 89),rgb(93, 0, 0),rgb(9, 95, 0),rgb(0, 3, 89),rgb(93, 0, 0));
  background-size: 500%;
  
  
}
.instructions-section .information-section-instructions p{
word-wrap:break-word;

}


/*video*/
video::-internal-media-controls-overlay-cast-button {
  display: none;
}


/*links*/

.messenger-links-panel{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  position: fixed;
  right: 5px;
  top: 40%;
  z-index: 1000;
  align-items: center;
  box-shadow:0 0 1px 2px rgb(110, 255, 70);
}

.messenger-links-panel .links-bar-btn{
 writing-mode: vertical-lr;
 font-size:12px;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-weight: 900;
 color:gold;
 background: linear-gradient(90deg, blue,green,rgb(255, 87, 40));
 background-size: 500%;
 animation: rainbowAnim 9s linear infinite;
 z-index: 2;
 height: 142px;
 text-align: center;
 cursor:default;

}

.messenger-links-panel .links{
 display: flex;
 display: -webkit-flex;
 flex-direction: column;
 -webkit-flex-direction: column;
 position: absolute;
 left:-50px;
 padding: 0px 40px 0px 0px;

}

.messenger-links-panel .links a{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
 
 }

 .messenger-links-panel .links .fb img{
  border-radius: 10%;
}
.messenger-links-panel .links .wtsp img{
  border-radius: 90%;
}
.messenger-links-panel .links .yt img{
  border-radius: 10%;
}

.messenger-links-panel .links a img{
 width:0px;
 height:0px;
 cursor: pointer;
 transition: 0.5s;
 background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
 #0000ff, #00ff00,#ffff00, #ff0000);
 background-size: 300%;
 animation: rainbowAnim 12s linear infinite;
 
}

/*BACKGROUND ANIMATIONS*/
.first-view-anim-background{
  width:100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  background:
  linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  animation:grayScaleAnim 2s infinite alternate,Opacity 1s 1 forwards;
}

.paintings-anim-background{
  display: none;
  width:100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  background:
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) gray;
  animation:grayScaleAnim 2s infinite alternate,Opacity 1s 1 forwards;
}

.photo-clips-anim-background{
  display: none;
  width:100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  background:
  radial-gradient(circle at 50% 0,
  rgba(255,0,0,.5),
  rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%,
  rgba(0,0,255,.5),
  rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%,
  rgba(0,255,0,.5),
  rgba(0,255,0,0) 70.71%) beige;
  animation:grayScaleAnim 2s infinite alternate,Opacity 1s 1 forwards;
}

.gallery-anim-background{
  display: none;
  width:100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  animation:grayScaleAnim 2s infinite alternate,Opacity 1s 1 forwards;
  background:
  repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
  rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
  rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
  rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
  rgba(255, 0, 0, 0.5) 300px),
repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
  rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
  rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
  rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
  rgba(255, 0, 0, 0.5) 230px),
repeating-linear-gradient(23deg, red 50px, orange 100px,
  yellow 150px, green 200px, blue 250px,
  indigo 300px, violet 350px, red 370px);
}

/*WINDOW OF CLICKED IMG*/

/*brushes window*/

.field-clicked-brushes-img{
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  width:100%;
  height: 100%;
  background:
  linear-gradient(0deg, rgba(255, 32, 32, 0.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(90deg, rgba(0, 170, 255, 0.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(180deg, rgba(157, 0, 255, 0.8), rgba(0,0,255,0) 70.71%),
  linear-gradient(360deg, rgba(0, 183, 255, 0.8), rgba(0,0,255,0) 70.71%);
  z-index: 2;
  flex-direction: column;
  animation:animClickedImg 2s alternate infinite, Opacity 1s 1;


  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
}

.field-clicked-brushes-img span{
  text-align: center;
  padding:10px 5px;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  color: yellow;
  font-size: 24px;
  letter-spacing: 10px;
  box-shadow: rgb(87, 225, 80) 10px 0 20px, rgb(87, 225, 80) 0 10px 20px,rgb(87, 225, 80) -10px 0 20px, rgb(87, 225, 80) 0  10px 20px;
  cursor: pointer;
  position: relative;
  top: -60px;
  
}

.field-clicked-brushes-img .anim-back{
  display: flex;
  background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
  #0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 300%;
  padding:15px;
  animation: brushesPicPresentationAnim 12s linear infinite;
  flex-direction: row;
  -webkit-flex-direction: row;
}
@keyframes brushesPicPresentationAnim{
  from {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

.field-clicked-brushes-img .clicked-img{
  width: 900px;
  height: 600px;
  background-size: 100% 100%;

  
}

.field-clicked-brushes-img .anim-back .slideshow-box{
 display: flex;
 overflow-y: scroll;
 width:30px;
 
}

.field-clicked-brushes-img .anim-back .slideshow-box::-webkit-scrollbar-thumb{
  width: 3px;
  color:gold;
 }

/*gallery window*/

.field-clicked-img{
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  width:100%;
  height: 100%;
  background:
  linear-gradient(0deg, rgba(255, 32, 32, 0.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(90deg, rgba(0, 170, 255, 0.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(180deg, rgba(157, 0, 255, 0.8), rgba(0,0,255,0) 70.71%),
  linear-gradient(360deg, rgba(0, 183, 255, 0.8), rgba(0,0,255,0) 70.71%);
  z-index: 2;
  flex-direction: column;
  animation: animClickedImg 2s alternate infinite;
  
}

.field-clicked-img span{
  text-align: center;
  padding:10px 5px;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  color: yellow;
  font-size: 24px;
  letter-spacing: 10px;
  box-shadow: rgb(87, 225, 80) 10px 0 20px, rgb(87, 225, 80) 0 10px 20px,rgb(87, 225, 80) -10px 0 20px, rgb(87, 225, 80) 0  10px 20px;
  cursor: pointer;
  position: relative;
  top: -60px;
  
}

.field-clicked-img .clicked-img{
  width: 845px;
  height: 620.1px;
  background-size: 100% 100%;
  box-shadow:rgb(87, 225, 80) 50px 0 100px, rgb(87, 225, 80) 0 50px 100px,rgb(87, 225, 80) -50px 0 100px, rgb(87, 225, 80) 0  -50px 100px;
  animation: galleryGreenBackLight 2s alternate infinite;
  
}


@keyframes galleryGreenBackLight{
  from{
  box-shadow: 
 rgba(87, 225, 80, 0.55) 50px 0 100px, rgba(87, 225, 80, 0.55) 0 50px 100px,rgba(87, 225, 80, 0.55) -50px 0 100px, rgba(87, 225, 80, 0.55) 0  -50px 100px;
 }
  to{
  box-shadow: 
  rgba(87, 225, 80, 1) 50px 0 100px, rgba(87, 225, 80, 1) 0 50px 100px,rgba(87, 225, 80, 1) -50px 0 100px, rgba(87, 225, 80, 1) 0  -50px 100px;
 }
}
 

/*FIRST-VIEW DIVISION*/


.first-view{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  align-items: center;

}

.first-view .row{
 display: flex;
 display: -webkit-flex;
 flex-direction: column;
 -webkit-flex-direction: column;
 align-items: center;
 position:relative;
 top: 15px;
}


.first-view .link-div{
  display: flex;
  display: -webkit-flex;
}

.first-view .links{
  display: flex;
  display: -webkit-flex;
 
  font-size: 30px;
  font-weight:900;
  color: rgb(78, 32, 0);
  transition: 0.5s;
  background: linear-gradient(darkgoldenrod 20%,gold,darkgoldenrod 80%);
  box-shadow: 0 0 1.5px 3px rgb(71, 0, 0);
  letter-spacing: 5px;
  padding:6px;
  margin: 0 6px;
  cursor: pointer;
  text-align:center;
  align-items: center;
}

.first-view .row .io2003-tag{
  font-size: 60px;
  font-weight: 900;
  letter-spacing: 30px;
  color: gold;
  text-shadow: 4px 4px 16px green;
  position: relative;
  top:12px;
  }

 /*videos*/

 .first-view .video-content{
  display: flex;
  display: -webkit-flex;
  justify-content:center;
  align-items:center;
  cursor: pointer;
 }

 .first-view .video-content .txt{
  display: flex;
  display: -webkit-flex;
  font-size: 40px;
  position: absolute;
  color:gold;
  background: rgba(92, 92, 92, 0.681);
  box-shadow: 0 0 1px 2px gold;
  border-radius: 3px;
  padding:6px;
  animation: firstViewVideoCont 1.3s infinite alternate;
  z-index: 1;
  text-align: center;
 }
 @keyframes firstViewVideoCont{
  from{
   color: gold;
   box-shadow: 0 0 1px 2px gold;
  }
  to{
    color: rgb(204, 146, 0);
    box-shadow: 0 0 1px 2px rgb(204, 146, 0);
  }

 }

  .first-view .main-presentation{
    width:960px;
    height:540px;
    position: relative;
    top:30px;
    background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
    #0000ff, #00ff00,#ffff00, #ff0000);
    background-size: 300%;
    animation: rainbowAnim 12s linear infinite;
    padding: 15px;
  }
 
  .first-view .main-presentation-full-screen{
   display: none;
   justify-content: center;
   align-items: center;
   position: fixed;
   width:100%;
   height:100%;
   background:
   linear-gradient(0deg, rgba(88, 44, 0, 0.8), rgba(255,0,0,0) 70.71%),
   linear-gradient(45deg, rgba(255, 191, 0, 0.8), rgba(255,0,0,0) 70.71%),
   linear-gradient(90deg, rgba(120, 124, 0, 0.8), rgba(0,255,0,0) 70.71%),

   linear-gradient(135deg, rgba(88, 44, 0, 0.8), rgba(0,255,0,0) 70.71%),
   linear-gradient(180deg, rgba(255, 191, 0, 0.8), rgba(0,255,0,0) 70.71%),
   linear-gradient(225deg, rgba(120, 124, 0, 0.8), rgba(0,255,0,0) 70.71%),

   linear-gradient(270deg, rgba(88, 44, 0, 0.8), rgba(0,0,255,0) 70.71%),
   linear-gradient(315deg, rgba(255, 191, 0, 0.8), rgba(0,0,255,0) 70.71%),
   linear-gradient(360deg, rgba(120, 124, 0, 0.8), rgba(0,0,255,0) 70.71%);
   z-index: 2;
   flex-direction: column;
   animation: animClickedImg 2s alternate infinite;
   
  }

  .first-view .main-presentation-full-screen .none-obj{
    text-align: center;
    padding:10px 5px;
    background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
    color: yellow;
    font-size: 24px;
    letter-spacing: 10px;
    box-shadow: rgb(87, 225, 80) 10px 0 20px, rgb(87, 225, 80) 0 10px 20px,rgb(87, 225, 80) -10px 0 20px, rgb(87, 225, 80) 0  10px 20px;
    cursor: pointer;
    position: relative;
    top: -60px;

  }
  .first-view .main-presentation-full-screen video{
    background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
    #0000ff, #00ff00,#ffff00, #ff0000);
    background-size: 300%;
    animation: rainbowAnim 12s linear infinite;
    padding: 15px;
  }
  
  .first-view .main-presentation-full-screen video{
  width: 960px;
  height: 540px;
  }


/*BRUSHES DIV*/

.brushes-div{
  display:none;
  display:-webkit-none;
  flex-direction: column;
  -webkit-flex-direction: column;
  position:relative;
  top:10px;
  animation:Opacity 1s 1;
}

.brushes-div .switches{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  
  
}

.brushes-div .switches .pre-row{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: center;
}

.brushes-div .switches .row{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items:center;
  justify-content: center;
 
}

.brushes-div .switches .io-btn{
  display: flex;
  display: -webkit-flex;
  box-shadow: 0 0 1.5px 3px rgb(71, 0, 0);
  margin: 0 4px 0 4px;
  align-items: center;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  color:goldenrod;
  transition: 0.5s;
  font-size: 30px;
  font-weight:900;
  cursor: pointer;
  padding: 0 16px;
  height: 100%;
}

.brushes-div .switches .brushes-reback-btn{
  display: flex;
  display: -webkit-flex;
  box-shadow: 0 0 1.5px 3px rgb(71, 0, 0);
  text-shadow: 1px 1px 2px rgb(87, 225, 80),-1px -1px 2px rgb(87, 225, 80);
  margin: 0 4px 0 4px;
  align-items: center;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  color:goldenrod;
  transition: 0.5s;
  font-size: 30px;
  font-weight:900;
  cursor: pointer;
  padding: 0 16px;
  height: 100%;
}


.brushes-div .switches .field{
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  box-shadow: 0 0 1.5px 3px rgb(71, 0, 0);
  margin: 0 4px 0 4px;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.brushes-div .switches .field span{
  display: flex;
  display: -webkit-flex;
  margin: 0 0 5px 0;
  font-size: 150%;
  font-weight:900;
  color:goldenrod;
  transition: 0.5s;
  white-space: nowrap;
}


.brushes-div .switches .field .field-btns{
  display: flex;
  display: -webkit-flex;
  margin: 0 4px 0 4px;
  justify-content: center;
 
}


.brushes-div .switches .field .field-btns .btns{
  margin: 0 3px 0 3px;
  padding: 0px 15px;
  cursor: pointer;
  position: relative;
  bottom:3px;
  font-family: stencil;
  color: gold;
  background: linear-gradient(90deg,rgb(222, 196, 0) 20%,rgb(54, 48, 0),rgb(222, 196, 0) 80%);
  transition: 0.5s;
}


.brushes-tag{
  display: flex;
  display: -webkit-flex;
  font-size: 70px;
  text-shadow:5px 5px 8px rgb(87, 225, 80), -5px -5px 8px rgb(87, 225, 80);
  letter-spacing: 10px;
  color: gold;
  position: relative;
  
}

/*brushes first view*/

.brushes-first-view{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  width:100%;
  align-items: center;
  justify-content: center;
  position: relative;
  top:30px;
  grid-gap: 30px;
  transition: 0.5s;
  animation: Opacity 0.5s 1;
}
.brushes-first-view .pre-field{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
  #0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 300%;
  animation: rainbowAnim 12s linear infinite;
  padding: 5px;
  align-items: center;

}
.brushes-first-view .fields{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  width: 390px;
  height: 260px;
  background-size:100% 100%;
  background-repeat: no-repeat;
  

}
.brushes-first-view .txt{
  display: flex;
  display: -webkit-flex;
  text-align: center;
  justify-content: center;
  font-size: 22px;
  color: gold;
  font-weight: 900;
  padding:0 0 3px 0;
  text-shadow: 4px 0px 4px rgb(60, 25, 0), 0px 4px 4px rgb(60, 25, 0), -4px 0px 4px rgb(60, 25, 0), 0px -4px 4px rgb(60, 25, 0);
  
}
.brushes-first-view .fields .shrinking-container{
  display: flex;
  display: -webkit-flex;
  width:100%;
  height: 100%;
  background-size:100% 100%;
  background-repeat: no-repeat;
  transition: 0.5s;
  
}


/*brushes field*/

.brushes-div .brushes-field{
  display:flex;
  display:-webkit-flex;
  
}

.brushes-div .brushes-field .pages{
  display:none;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  animation:Opacity 1s 1;
}

.brushes-div .brushes-field .pictures{
  width: 240px;
  height: 160px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  margin: 24px 12px 0px 12px;
  animation: brushesPicColor 1.5s alternate infinite;
    
}
@keyframes brushesPicColor{
  from{box-shadow: rgba(222, 224, 225, 0.5) 4px 0 12px, rgba(222, 224, 225, 0.5) 0 4px 12px,rgba(222, 224, 225, 0.5) -4px 0 12px, rgba(222, 224, 225, 0.5) 0 -4px 12px;}
  to{box-shadow: rgba(222, 224, 225, 1) 4px 0 12px, rgba(222, 224, 225, 1) 0 4px 12px,rgba(222, 224, 225, 1) -4px 0 12px, rgba(222, 224, 225, 1) 0 -4px 12px;}
}

.brushes-div .brushes-field .pages .pictures:hover{
  animation: brushesPicturesAnim 2s infinite alternate;
}

@keyframes brushesPicturesAnim{
  from{box-shadow: 0 0 4px 16px rgba(253, 255, 134, 0.5);}
  to{box-shadow: 0 0 4px 16px rgba(253, 255, 134, 1);}
}

.brushes-div .brushes-field .pictures div{
 color:rgb(52, 22, 0);
 background: linear-gradient(135deg,darkgoldenrod 20%,yellow,darkgoldenrod,yellow,darkgoldenrod 80%);
 font-size: 25px;
 text-align:center;
 animation: brushesPicsDivAnim 10s infinite alternate;
 font-weight: 900;
 text-shadow:2px 2px 1px lightgray,-2px -2px 1px lightgray;

}

@keyframes brushesPicsDivAnim{
	from{
	 filter: hue-rotate(0deg);
	}
	to{
	 filter: hue-rotate(360deg);
	}
}


/*PHOTO-CLIPS-DIVISION*/

.photo-clips-div{
  display: none;
  display: -webkit-none;
  flex-direction: column;
  -webkit-flex-direction: column;
  position: relative;
  top:10px;

}

.photo-clips-div .switches{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  
}

.photo-clips-div .switches .pre-row{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: center;
}

.photo-clips-div .switches .row{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items:center;
  justify-content: center;
 
}

.photo-clips-div .switches .io-btn{
  display: flex;
  display: -webkit-flex;
  box-shadow: 0 0 1.5px 3px rgb(71, 0, 0);
  margin: 0 4px 0 4px;
  align-items: center;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  color:goldenrod;
  transition: 0.5s;
  font-size: 30px;
  font-weight:900;
  cursor: pointer;
  padding: 0 16px;
  height: 100%;
}

.photo-clips-div .switches .clips-reback-btn{
  display: flex;
  display: -webkit-flex;
  box-shadow: 0 0 1.5px 3px rgb(71, 0, 0);
  text-shadow: 1px 1px 2px rgb(87, 225, 80),-1px -1px 2px rgb(87, 225, 80);
  margin: 0 4px 0 4px;
  align-items: center;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  color:goldenrod;
  transition: 0.5s;
  font-size: 50px;
  font-weight:900;
  cursor: pointer;
  padding: 0 16px;
  height: 100%;
}
.photo-clips-div .switches .clips-reback-btn .over-layer{
position:absolute;
width:100%;
height: 100%;
}


.photo-clips-div .switches .field{
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  box-shadow: 0 0 1.5px 3px rgb(71, 0, 0);
  margin: 0 4px 0 4px;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.photo-clips-div .switches .field span{
  display: flex;
  display: -webkit-flex;
  margin: 0 0 5px 0;
  font-size: 150%;
  font-weight:900;
  color:goldenrod;
  transition: 0.5s;
  white-space: nowrap;
}



.photo-clips-div .switches .field .field-btns{
  display: flex;
  display: -webkit-flex;
  margin: 0 4px 0 4px;
  justify-content: center;
 
}


.photo-clips-div .switches .field .field-btns .btns{
  margin: 0 3px 0 3px;
  padding: 0px 15px;
  cursor: pointer;
  position: relative;
  bottom:3px;
  font-family: stencil;
  color: gold;
  background: linear-gradient(90deg,rgb(222, 196, 0) 20%,rgb(54, 48, 0),rgb(222, 196, 0) 80%);
  transition: 0.5s;
}

.slideshow-tag{
  display: flex;
  display: -webkit-flex;
  font-size: 70px;
  text-shadow:5px 5px 8px rgb(87, 225, 80), -5px -5px 8px rgb(87, 225, 80);
  letter-spacing: 10px;
  color: gold;
  margin: 10px 0 20px 0;
  text-align: center;
  white-space: nowrap;
}


/*clips first view*/

.clips-first-view{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  width:100%;
  align-items: center;
  justify-content: center;
  position: relative;
  top:30px;
  transition: 0.5s;
  animation: Opacity 0.5s 1;
  grid-gap:20px;
}
.clips-first-view .pre-field{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
  #0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 300%;
  animation: rainbowAnim 12s linear infinite;
  padding: 5px;
}

.clips-first-view .txt{
  display: flex;
  display: -webkit-flex;
  text-align: center;
  justify-content: center;
  font-size: 30px;
  color: gold;
  font-weight: 900;
  padding:0 0 3px 0;
  text-shadow: 4px 0px 4px rgb(60, 25, 0), 0px 4px 4px rgb(60, 25, 0), -4px 0px 4px rgb(60, 25, 0), 0px -4px 4px rgb(60, 25, 0);

}

.clips-first-view .pre-field .field{
 display: flex;
 display: -webkit-flex;
 justify-content: center;
 align-items: center;
 

}

.clips-first-view video{
  width: 700px;
  height: 393.75px;
  max-width: 700px;
  max-height: 393.75px;
}
.clips-first-view .foldable-container{
  position: absolute;
  transition: 0.5s;
 
}


/*photo-clips-field*/

.photo-clips-div .clips-field{
  display:flex;
  display:-webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;

}

.photo-clips-div .clips-field .pages{
  display:none;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  -webkit-justify-content: center;
  animation:Opacity 1s 1;
  grid-gap:30px;
}

.photo-clips-div .clips-field .row{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  grid-gap: 30px;
}

.photo-clips-div .clips-field .pages .video-content{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  cursor: pointer;
  animation: clipsVideoColor 1.5s alternate infinite;
}
@keyframes clipsVideoColor{
  from{box-shadow: rgba(222, 224, 225, 0.5) 4px 0 12px, rgba(222, 224, 225, 0.5) 0 4px 12px,rgba(222, 224, 225, 0.5) -4px 0 12px, rgba(222, 224, 225, 0.5) 0 -4px 12px;}
  to{box-shadow: rgba(222, 224, 225, 1) 4px 0 12px, rgba(222, 224, 225, 1) 0 4px 12px,rgba(222, 224, 225, 1) -4px 0 12px, rgba(222, 224, 225, 1) 0 -4px 12px;}
}

.photo-clips-div .clips-field .pages .video-content:hover{
  animation: clipsVideoAnim 2s infinite alternate;
}

@keyframes clipsVideoAnim{
  from{box-shadow: 0 0 4px 16px rgba(253, 255, 134, 0.5);}
  to{box-shadow: 0 0 4px 16px rgba(253, 255, 134, 1);}
}

.photo-clips-div .clips-field .top-txt{
 color:rgb(52, 22, 0);
 background: linear-gradient(135deg,darkgoldenrod 20%,yellow,darkgoldenrod,yellow,darkgoldenrod 80%);
 font-size: 25px;
 text-align:center;
 animation: clipsVideoDivAnim 10s infinite alternate;
 font-weight: 900;
 text-shadow:2px 2px 1px lightgray,-2px -2px 1px lightgray;
 white-space: nowrap;
 width:100%;
 position: relative;
 padding:0 0 3px 0;
 
}

.photo-clips-div .clips-field video{
  width:352px;
  height:198px;

}

@keyframes clipsVideoDivAnim{
	from{
	 filter: hue-rotate(0deg);
	}
	to{
	 filter: hue-rotate(360deg);
	}
}

/*full screen videos*/
/*DO NOT DELETE
.field-clicked-photo-clips-video{
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  width:100%;
  height:100%;
  background:
  linear-gradient(0deg, rgba(88, 44, 0, 0.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(45deg, rgba(255, 191, 0, 0.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(90deg, rgba(120, 124, 0, 0.8), rgba(0,255,0,0) 70.71%),

  linear-gradient(135deg, rgba(88, 44, 0, 0.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(180deg, rgba(255, 191, 0, 0.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(225deg, rgba(120, 124, 0, 0.8), rgba(0,255,0,0) 70.71%),

  linear-gradient(270deg, rgba(88, 44, 0, 0.8), rgba(0,0,255,0) 70.71%),
  linear-gradient(315deg, rgba(255, 191, 0, 0.8), rgba(0,0,255,0) 70.71%),
  linear-gradient(360deg, rgba(120, 124, 0, 0.8), rgba(0,0,255,0) 70.71%);
  z-index: 2;
  flex-direction: column;
  -webkit-flex-direction: column;

}

.field-clicked-photo-clips-video .none-obj{
  text-align: center;
  padding:10px 5px;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  color: yellow;
  font-size: 24px;
  letter-spacing: 10px;
  box-shadow: rgb(87, 225, 80) 10px 0 20px, rgb(87, 225, 80) 0 10px 20px,rgb(87, 225, 80) -10px 0 20px, rgb(87, 225, 80) 0  10px 20px;
  cursor: pointer;
  position: relative;
  top: -60px;

}
*/

.photo-clips-full-screen-videos{
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  width:100%;
  height:100%;
  background:
  linear-gradient(0deg, rgba(88, 44, 0, 0.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(45deg, rgba(255, 191, 0, 0.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(90deg, rgba(120, 124, 0, 0.8), rgba(0,255,0,0) 70.71%),

  linear-gradient(135deg, rgba(88, 44, 0, 0.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(180deg, rgba(255, 191, 0, 0.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(225deg, rgba(120, 124, 0, 0.8), rgba(0,255,0,0) 70.71%),

  linear-gradient(270deg, rgba(88, 44, 0, 0.8), rgba(0,0,255,0) 70.71%),
  linear-gradient(315deg, rgba(255, 191, 0, 0.8), rgba(0,0,255,0) 70.71%),
  linear-gradient(360deg, rgba(120, 124, 0, 0.8), rgba(0,0,255,0) 70.71%);
  z-index: 2;
  
}
.photo-clips-full-screen-videos .row{
  display: none;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
}

.photo-clips-full-screen-videos video{
    background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
    #0000ff, #00ff00,#ffff00, #ff0000);
    background-size: 300%;
    animation: photoClipsVideoPresentationAnim 12s linear infinite;
    padding: 15px;
    width:900px;
    height: 506px;

}
  @keyframes photoClipsVideoPresentationAnim{
    from {
      background-position: 0 0;
    }
    50% {
      background-position: 100% 0;
    }
    to {
      background-position: 0 0;
    }
  }


.photo-clips-full-screen-videos .row .none-obj{
  text-align: center;
  padding:10px 5px;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  color: yellow;
  font-size: 24px;
  letter-spacing: 10px;
  box-shadow: rgb(87, 225, 80) 10px 0 20px, rgb(87, 225, 80) 0 10px 20px,rgb(87, 225, 80) -10px 0 20px, rgb(87, 225, 80) 0  10px 20px;
  cursor: pointer;
  position: relative;
  top: -60px;

}

/*GALLERY DIV*/

.pictures-div{
    display: none;
    display: -webkit-none;
    flex-direction: column;
    -webkit-flex-direction: column;
    position: relative;
    top:10px;
}


/*switches*/

.pictures-div .pictures-selectors-categories{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: center;
}

.pictures-div .pictures-selectors-categories .pre-row{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: center;
}

/*EXPERIMENTAL #1 DO NOT DELETE
.pictures-div .pictures-selectors-categories .pre-row .double-row{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  
}
*/

.pictures-div .pictures-selectors-categories .row{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: center;
}

.pictures-div .pictures-selectors-categories .io-btn{
  display: flex;
  display: -webkit-flex;
  box-shadow: 0 0 1.5px 3px rgb(71, 0, 0);
  margin: 0 4px 0 4px;
  align-items: center;
  background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
  color:goldenrod;
  transition: 0.5s;
  font-size: 30px;
  font-weight:900;
  cursor: pointer;
  padding: 0 16px;
}
.pictures-div .pictures-selectors-categories .gallery-reback-btn{
 text-shadow: 1px 1px 2px rgb(87, 225, 80),-1px -1px 2px rgb(87, 225, 80);
}
.pictures-div .pictures-selectors-categories .field-btns{
 display: flex;
 display: -webkit-flex;
 flex-direction: column;
 -webkit-flex-direction: column;
 box-shadow: 0 0 1.5px 3px rgb(71, 0, 0);
 margin: 0 4px 0 4px;
 align-items: center;
 justify-content: center;
 background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
 grid-gap:3px;
}

.pictures-div .pictures-selectors-categories span{
  display: flex;
  display: -webkit-flex;
  margin: 0 0 5px 0;
  justify-content: center;
  font-size: 100%;
  font-weight:900;
  color:goldenrod;
  transition: 0.5s;
}

.pictures-div .pictures-selectors-categories .pages-field{
  display:flex;
  display: -webkit-flex;
  flex-direction:row;
  -webkit-flex-direction: row;
  justify-content: center;
}
.pictures-div .pictures-selectors-categories .pages-field .pages{
  margin: 0 3px 0 3px;
  padding: 0px 15px;
  cursor: pointer;
  position: relative;
  bottom:3px;
  font-family: stencil;
  color: gold;
  background: linear-gradient(90deg,rgb(222, 196, 0) 20%,rgb(54, 48, 0),rgb(222, 196, 0) 80%);
  transition: 0.5s;
}

.pictures-div .pictures-selectors-categories .gallery-tag{
  display: flex;
  display: -webkit-flex;
  font-size: 70px;
  text-shadow:5px 5px 8px rgb(87, 225, 80), -5px -5px 8px rgb(87, 225, 80);
  letter-spacing: 10px;
  position: relative;
  top:15px;
}

/*gallery first view*/

.gallery-first-view{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  width: 100%;
  position: relative;
  align-items: center;


}

.gallery-first-view .video-content{
  display: flex;
  display: -webkit-flex;
  justify-content:center;
  align-items:center;
  cursor: pointer;
 }
 .gallery-first-view .video-content .txt{
  display: flex;
  display: -webkit-flex;
  font-size: 40px;
  position: absolute;
  color:gold;
  background: rgba(92, 92, 92, 0.681);
  box-shadow: 0 0 1px 2px gold;
  border-radius: 3px;
  padding:6px;
  animation: galleryFirstViewVideoCont 1.3s infinite alternate;
  z-index: 1;
  text-align: center;
 }
 @keyframes galleryFirstViewVideoCont{
  from{
   color: gold;
   box-shadow: 0 0 1px 2px gold;
  }
  to{
    color: rgb(204, 146, 0);
    box-shadow: 0 0 1px 2px rgb(204, 146, 0);
  }

 }

  .gallery-first-view .main-presentation{
    width:960px;
    height:540px;
    position: relative;
    top:30px;
    background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
    #0000ff, #00ff00,#ffff00, #ff0000);
    background-size: 300%;
    animation: rainbowAnim 12s linear infinite;
    padding: 15px;
  }
 

.gallery-main-presentation-full-screen .none-obj{
    text-align: center;
    padding:10px 5px;
    background: linear-gradient(rgb(52, 22, 0) 20%,rgb(102, 42, 0),rgb(52, 22, 0) 80%);
    color: yellow;
    font-size: 24px;
    letter-spacing: 10px;
    box-shadow: rgb(87, 225, 80) 10px 0 20px, rgb(87, 225, 80) 0 10px 20px,rgb(87, 225, 80) -10px 0 20px, rgb(87, 225, 80) 0  10px 20px;
    cursor: pointer;
    position: relative;
    top: -60px;

  }

  .gallery-main-presentation-full-screen{
   display: none;
   justify-content: center;
   align-items: center;
   position:fixed;
   width:100%;
   height:100%;
   background:
   linear-gradient(0deg, rgba(88, 44, 0, 0.8), rgba(255,0,0,0) 70.71%),
   linear-gradient(45deg, rgba(255, 191, 0, 0.8), rgba(255,0,0,0) 70.71%),
   linear-gradient(90deg, rgba(120, 124, 0, 0.8), rgba(0,255,0,0) 70.71%),

   linear-gradient(135deg, rgba(88, 44, 0, 0.8), rgba(0,255,0,0) 70.71%),
   linear-gradient(180deg, rgba(255, 191, 0, 0.8), rgba(0,255,0,0) 70.71%),
   linear-gradient(225deg, rgba(120, 124, 0, 0.8), rgba(0,255,0,0) 70.71%),

   linear-gradient(270deg, rgba(88, 44, 0, 0.8), rgba(0,0,255,0) 70.71%),
   linear-gradient(315deg, rgba(255, 191, 0, 0.8), rgba(0,0,255,0) 70.71%),
   linear-gradient(360deg, rgba(120, 124, 0, 0.8), rgba(0,0,255,0) 70.71%);
   z-index: 2;
   flex-direction: column;
   animation: animClickedImg 2s alternate infinite;
   
  }
  .gallery-main-presentation-full-screen video{
    background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
    #0000ff, #00ff00,#ffff00, #ff0000);
    background-size: 300%;
    animation: rainbowAnim 12s linear infinite;
    padding: 15px;
  }

.gallery-main-presentation-full-screen video{
  width: 960px;
  height: 540px;
}


/*DO NOT DELETE
.gallery-first-view{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  width:100%;
  justify-content: center;
  position: relative;
  top:100px;
  grid-gap: 30px;
  transition: 0.5s;
  animation: Opacity 0.5s 1;
}

.gallery-first-view .pre-field{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  background: linear-gradient(60deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
  #0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 300%;
  animation: rainbowAnim 12s linear infinite;
  padding: 5px;
  
}
.gallery-first-view .fields{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  width: 450px;
  height: 300px;
  background-size:100% 100%;
  background-repeat: no-repeat;
}

.gallery-first-view .txt{
  display: flex;
  display: -webkit-flex;
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 22px;
  letter-spacing: 4px;
  color: gold;
  font-weight: 900;
  padding:5px 0;
  text-shadow: 4px 0px 4px rgb(60, 25, 0), 0px 4px 4px rgb(60, 25, 0), -4px 0px 4px rgb(60, 25, 0), 0px -4px 4px rgb(60, 25, 0);
 
}

.gallery-first-view .fields .shrinking-container{
  display: flex;
  display: -webkit-flex;
  width:100%;
  height: 100%;
  background-size:100% 100%;
  background-repeat: no-repeat;
  transition: 0.5s;

}
*/

/*pictures field*/

.field-clicked-img, .pictures-div .pictures-selectors-categories, .pictures-div .pictures-field, .cities, .canadian-mountains, 
.color-stones, .cocktails .page1, .page2, .coffee .page1, .tea .page1, .page2, .page3, .fishes .page1, .page2, .cheese-cakes, .croissants,
.flowers .page1, .page2, .page3, .desserts, .fruits .page1, .page2, .vegetables, .sushi .page1, .page2{
  animation: Opacity 1s 1;
}

.pictures-div .pictures-field .cities, .canadian-mountains, .color-stones, .cocktails, .coffee, .tea, 
.fishes, .cheese-cakes, .croissants, .flowers, .desserts, .fruits, .vegetables, .sushi{
  display:none;
  flex-direction: column;
  -webkit-flex-direction: column;
  
}

.pictures-div .pictures-field{
  position: relative;
  top: 10px;
}

.pictures-div .pictures-field .pages{
  display:none;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
}

.pictures-div .pictures-field .pictures{
  width: 216.6px;
  height: 158.9px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  margin: 24px 0px 0px 24px;
 
}

.pictures-div .pictures-field .pictures:hover{
  animation: colorChange 1.5s infinite alternate;
}

@keyframes colorChange{
  from{box-shadow:0 0 2px 8px saddlebrown, 0 0 4px 16px rgba(0, 255, 17, 0.5);}
  to{box-shadow:0 0 2px 8px saddlebrown, 0 0 4px 16px rgba(0, 255, 17, 1);}
}

.pictures-div .pictures-field .pictures div{
  color:rgb(52, 22, 0);
  background: linear-gradient(135deg,darkgoldenrod 20%,yellow,darkgoldenrod,yellow,darkgoldenrod 80%);
  font-size: 25px;
  text-align:center;
  animation: picturesPicsDivAnim 10s infinite alternate;
  font-weight: 900;
  text-shadow:2px 2px 1px lightgray,-2px -2px 1px lightgray;
 
 }
 
 @keyframes picturesPicsDivAnim{
   from{
    filter: hue-rotate(0deg);
   }
   to{
    filter: hue-rotate(360deg);
   }
 }