/*@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); * { margin: 1px; padding: 1px; box-sizing: border-box; font-family: 'Poppins', sans-serif; } */
/*body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } */
/*ul { position: relative; } ul li { list-style: none; text-align: center; } 
ul li a {color: #717171;text-decoration: none;font-size: 1.5em;padding: 5px 20px;display: inline-flex;font-weight: 700;transition: 0.5s;align-content: stretch;} 
ul:hover li a { color: #0002; } 
ul li:hover a { color: #000; background: rgba(255,255,255,1); } 
ul li a:before { content: ''; position: absolute; top: 50%; left: 40%; transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center; font-size: 5em; color: rgba(0,0,0,.1); border-radius: 50%; z-index: -1; opacity: 0; font-weight: 900; text-transform: uppercase; letter-spacing: 500px; transition: letter-spacing 0.5s,left 0.5s; } 
ul li a:hover:before { content: attr(data-text); opacity: 1; left: 50%; letter-spacing: 10px; width: 1800px; height: 1800px; } 
ul li:nth-child(6n+1) a:before { background: #81ecec; } 
ul li:nth-child(6n+2) a:before { background: #ff7675; } 
ul li:nth-child(6n+3) a:before { background: #55efc4; } 
ul li:nth-child(6n+4) a:before { background: #a29bfe; }
ul li:nth-child(6n+5) a:before { background: #fd79a8; } 
ul li:nth-child(6n+6) a:before { background: #ffeaa7; }*/


.angry{
      display: grid; 
/*
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;*/
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   
   gap: 0px;
   height: 75vh;
   width:100%
   
   
}

.nt-0 {

 
   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 3;
   grid-column-end: 3;
   
}
.nt-1 {


   grid-row-start: 1;
   grid-column-start: 3;

   grid-row-end: 2;
   grid-column-end: 4;
   
}
.nt-2 {

 
   grid-row-start: 1;
   grid-column-start: 4;

   grid-row-end: 2;
   grid-column-end: 5;
   
}
.nt-3 {

    
   grid-row-start: 2;
   grid-column-start: 4;

   grid-row-end: 3;
   grid-column-end: 5;
   
}
.nt-4 {

  
   grid-row-start: 2;
   grid-column-start: 3;

   grid-row-end: 3;
   grid-column-end: 4;
   
}
.nt-5 {

 
   grid-row-start: 3;
   grid-column-start: 1;

   grid-row-end: 4;
   grid-column-end: 2;
   
}
.nt-6 {

    
   grid-row-start: 3;
   grid-column-start: 2;

   grid-row-end: 4;
   grid-column-end: 3;
   
}
.nt-7 {

 
   grid-row-start: 3;
   grid-column-start: 3;

   grid-row-end: 5;
   grid-column-end: 5;
   
}
.nt-8 {

 
   grid-row-start: 4;
   grid-column-start: 1;

   grid-row-end: 5;
   grid-column-end: 2;
   
}
.nt-9 {

  
   grid-row-start: 4;
   grid-column-start: 2;

   grid-row-end: 5;
   grid-column-end: 3;
   
}
.nt-10 {

   
   grid-row-start: 5;
   grid-column-start: 1;

   grid-row-end: 7;
   grid-column-end: 3;
   
}
.nt-11 {

  
   grid-row-start: 5;
   grid-column-start: 3;

   grid-row-end: 6;
   grid-column-end: 4;
   
}
.nt-12 {

  
   grid-row-start: 5;
   grid-column-start: 4;

   grid-row-end: 6;
   grid-column-end: 5;
   
}
.nt-13 {

    
   grid-row-start: 6;
   grid-column-start: 3;

   grid-row-end: 7;
   grid-column-end: 4;
   
}
.nt-14 {

   
   grid-row-start: 6;
   grid-column-start: 4;

   grid-row-end: 7;
   grid-column-end: 5;
   
}
.nt-15 {

  
   grid-row-start: 7;
   grid-column-start: 1;

   grid-row-end: 8;
   grid-column-end: 2;
   
}
.nt-16 {

 
   grid-row-start: 7;
   grid-column-start: 2;

   grid-row-end: 8;
   grid-column-end: 3;
   
}
.nt-17 {

  
   grid-row-start: 7;
   grid-column-start: 3;

   grid-row-end: 8;
   grid-column-end: 4;
   
}
.nt-18 {

  
   grid-row-start: 8;
   grid-column-start: 1;

   grid-row-end: 9;
   grid-column-end: 5;
   
}
  



h55{
	
	visibility:hidden;
	text-align:center;
	background:#f90;
	position:relative;
	width:100%;
}
#img: hover p {
	opacity: 1;
	transform: translate3d(0,0,0);
	   
}



 

.zoom{
	transition:transform 0.2s;
	
}
	

.zoom:hover{
	
}
.zoom:hover h55{

	
	visibility:visible;

}


figure {
  border-radius: 0%;
  display: block;
  height: 96%;
  position: relative;
  width: 100%;
  transition:transform 0.2s;
  font-family: 'Chakra Petch';
  padding-top:  0px;
  padding-bottom:0px;
  margin-left: -3px;
 

}
figure#photo:hover{
	transform: scale(1.1);
}
img {
  border-radius: inherit;
  height: inherit;
  width: inherit;
  border-radius: 6px;
  
     
    
}

figure:after {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 5px;
  color: #fff;
  content: attr(title);
  opacity: 0;
  padding: 6px 12px;
  position: absolute;
  left: 110%;
  top: 30px;
  transition: all .25s ease;
  visibility: hidden;
  white-space: nowrap;
}

figure[tooltip-dir="left"]:after {
  left: auto;
  right: 110%;
}

figure[tooltip-dir="bottom"]:after,
figure[tooltip-dir="top"]:after {
  left: -130%;
    right: auto;

  transform: translateX(-50%);
}

figure[tooltip-dir="bottom"]:after {
  bottom: auto;
  top: 110%;
}

figure[tooltip-dir="top"]:after {
  bottom: 110%;
  top: auto;
}

figure:hover:after {
  opacity: 1;
  visibility: visible;
}

select {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0px 0px;
}


/*

.Mfade {position:relative;width:180px;height: 160px;max-width: 99%;max-height: 99%;transition:transform 0.2s;}
.Mfade img { position:absolute; left:0; top:0;margin-left:3px; }
 
.Mfade1{ position:relative;width:100px;height:99%; max-width: 99%;max-height: 99% transition:transform 0.2s;}
.Mfade1 img { position:absolute; left:0; top:0; margin-left:3px;}*/
/*
.Mfade0 {position:relative;transition:transform 0.2s;}
.Mfade0 img { position:absolute; left:0; top:0;margin-left:3px; }*/

.Mfade1 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade1 img { position:absolute; left:0; top:0; margin-left:3px;}

.Mfade2 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade2 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade3 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade3 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade4 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade4 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade5 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade5 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade6 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade6 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade7 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade7 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade8 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade8 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade9 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade9 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade10 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade10 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade11 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade11 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade12 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade12 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade13  { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade13 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade14 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade14 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade15 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade15 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade16 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade16 img { position:absolute; left:0; top:0; margin-left:3px;}



.Mfade17 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade17 img { position:absolute; left:0; top:0; margin-left:3px;}


.Mfade18 { position:relative; width:99%; height:99%; transition:transform 0.2s;padding-top: 100%;}
.Mfade18 img { position:absolute; left:0; top:0; margin-left:3px;}

