@font-face {
  font-family: 'letterRickandMorty'; /*a name to be used later*/
  src: url('assets/fonts/get_schwifty.ttf'); /*URL to font*/
}


.background{
  /* para que el footer y el nav ocupen el 100% */
  margin: auto; 
  background-color: black;
  background-image: url("images/background.jpg");
  background-size: 500px;
}
/*Home   *******************************************************   747*/

#homeSection{
  display: flex; 
  /* background-color: red; */
  width: 100%;
  height: 100%;
  justify-content: center;
  align-content: center;
}


.home{
  display: flex;
  background-image: url("images/spaceHome.jpg");
  background-repeat: no-repeat;
  background-size:  auto;
  background-position: center;
  width: 730px;
  height: 630px;
  margin: auto;
  justify-content: center;
  align-content: center;
}

#homeButton{
  cursor: pointer;
}

.btnFirst{
  transform: rotate(1deg);
  margin: 42.5% 3.7% 0 0;
  cursor: pointer;
  width: 164.1px;
  height: 41.9px;
  font-size: 30px;
  background-color: greenyellow;
  border: grove turquoise  2px;
  font-family: roboto;
}
.btnFirst:hover{
 box-shadow: 0 0 40px 8px greenyellow ;
 color:rgba(0, 0, 0, 0.945);
}
/* ****************************************************************************** */
/* header flex :D******************************* */
/* header******************************* */
header.logoHeader{
  display: flex;
  justify-content: center;
  align-content: center;
  /* background-color: red; */
  width: 100%;
  height: 35.30%;
  margin-top: 20px;
/* align-self: center; */
}

header .logotipe{
  width: 467px;
  height: 149px;
}

header .icon{
/* 151*130 */
  width: 151px;
  height: 130px;
  margin-top: 10px;
}
/* ************************************************************************************************** */
/* ************search box and order ******************* */

.nameOrder{
  display: flex;
  /* background-color: #ff0000; */
  justify-content: center;
  /* align-items: center; */
  /* justify-content: space-around; */
  width: 100%;
  margin: 45px 0px 45px 0px;
}


#searchByName{
  background-color:  #C7FA6C;
  border: 2.5px groove #89cf10;
  border-radius: 5px; 
  margin:0px 10px 0px 0px;
  font-size: 16px;
  color:black;
  
}

#searchByName::-webkit-search-cancel-button {
	display: none; 
}

#searchByName::placeholder{
  color:rgb(196, 177, 177);
}
#searchByName:placeholder-shown{
  background-color: black;
  border: 2px outset #C7FA6C;
  border-radius: 5px; 
  color: white;
  padding: 4px 0px 4px 10px;
  width: 250px;
  /* text-align: center; */
}

#order{
  background-color: white;
  border-radius: 5px ;
  font-weight: 560;
  color: black;
  font-size: 16px;
  padding: 0px 0px 0px 5px;
  text-align: center;
}

/*************button clean filter************/
#buttonCleanFilter{
  color: white;
  background-color: rgb(214, 13, 13);
  width: 100px;
  height: 40px;
  padding: 0px;
  font-size: 18px;
  border-radius: 20%;
  margin-top: 25px;
  border: 1px solid black;
  margin-left: 35%;
  outline: none ;
  cursor: pointer;
}
#buttonCleanFilter:hover{
  box-shadow: 0 0 5px 5px rgb(214, 13, 13) ;
  background-color: rgb(214, 13, 13) ;
}
/************statistics************************/
table{
  margin-top: 50px;
  margin-left: 5%;
  margin-right: 5%;
  color: white;
  border-collapse: collapse;
}

th{
background-color: rgb(26, 100, 26);
color: black;
font-size: 20px;
}

td{
  background-color: rgba(43, 198, 17, 0.5);
}

td,th{
  border: 2px solid greenyellow;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#stadisticsStatus{
  display: flex;
  justify-content: center;
  margin: 80px 0px;
}

#statisticsGender{
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

.chart-container{
  position: relative; 
  height:300px; 
  width:600px;
  border: 2px solid greenyellow;
  border-radius: 25px;
  margin: 20px;
}
/* *******************************************************nav ** */

.barNavegation{
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
  margin: 40px 0px 0px 0px;
  padding: 8px 0px;
  background-color: #28232393;
}
.IconBars{

  margin-left: 30px;
  width: 55px;
  z-index: 50;
  position: relative;

}
.fa-bars{
  display: flex;
  z-index: 10;
   color: white;
   font-size: 35px;
   align-self: center;
   justify-content: center;
   margin-left: 20px;
   padding-top: 15px;
   cursor: pointer;
  
   
}
.fa-bars:hover{
  color:#89cf10;
 }

 .fa-bars:active{
  color:#89cf10;
  text-shadow: 1.9px 1.9px #52663ab0;
  font-size: 35px;
  text-shadow: 
  1px  0px 0px black,
  0px  2px 0px black,
 -1px  0px 0px black,
  0px -1px 0px black;
 }
.iconBars1{
  width: 100%;
  font-size: 45px;
  height: 50px;
  margin: 25px 0px 0px 20px;
}
.li{
  color:rgba(214, 13, 13, 0.829);
  text-shadow: 
  1px  0px 0px black,
  0px  1px 0px black,
 -1px  0px 0px black,
  0px -2px 0px black;
}

.li:hover{
  color:rgb(255, 7, 7);
}
 #advancedFilter{
  background-color: #ffffffe5;
  box-shadow: 2px 0px 5px 2px rgb(66, 66, 66);
  width: 400px;
  height: 100vh;
  display: flex;
  position:fixed;
  flex-direction: column;
  /* position: absolute; */
  top: 0;
  left: 0;
  transition: all .5s ease;
  z-index: 10;
}
span.active{
  transform: translate(-600px);
}
.opacity{
  background-color: rgba(0, 0, 0, 0.5);
  transition: all .5s ease;
}
.filterSelects{
 font-size: 20px;
 /* display: flex;
 flex-direction: column; */
 margin:25px 0px 0px 30px;
}

.filterId {
  margin:0px 0px 0px 25px;
}
.filterSelects select{
  margin:5px 0px 20px 25px;
  border-radius: 5px ;
  font-size: 15px;
}
.filterSelects select:hover{
  background-color: #89cf1086;

  
}
/* ul */
.buttonsNavegation {
  display: inline-flex;
  /* margin-right: 30px; */
  /* para eliminar los puntos de las etiquetas ul y li  */
  list-style:none;
  width: 550px;
  justify-content: center;

 }
 /* li */
.barNavegation1 {
  color:white;
  text-decoration:none;
  font-size: 25px;
  padding: 0px 20px 0px 20px;
 }
 .barNavegation1:hover{
  color:#89cf10;
 }

 .barNavegation1:active{
  color:#89cf10;
  text-shadow: 1.9px 1.9px #52663ab0;
  
 }

 .lineSpace{
   color:white;
   font-size: 20px;
   font-weight:900;
 }

/* ****************************************** */

/* **************************************** */
main{
  width: 100%;
  height: 100%;
}
.cards{
  display: flex;
  flex-wrap:wrap;
  color: white;
  width: 100%;
  justify-content: center;
  align-items: center;
}

div{
  margin: 20px;
  width:280px ;
  height: 550px ;
  border: 2px solid greenyellow;
  border-radius: 25px;
}
div:hover{
  color:#89cf10;
  box-shadow: 0 0 10px 5px greenyellow ;
  background-color:rgba(172, 255, 47, 0.03) ;
  width:281px ;
  height: 521px ;
}
div:active{
  color:#fdfdfd;
  box-shadow: 0 0 10px 5px rgb(255, 255, 255) ;
  /* transform: rotate(-0.5deg); */
 
}
.h3List{
  text-align: center;
  border-bottom: 2px solid greenyellow;
  /* align-content: center; */
  font-size: 26px;
  width: 280px;
  margin-bottom: 20px;
  height: 65px;
  /* margin: 20px 0px 0px;
  padding-top: 0px;
  padding-bottom: 5px; */
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  text-shadow: 
  3px  0px 0px black,
  0px  1px 0px black,
 -3px  0px 0px black,
  0px -3px 0px black;
  
}


.imageList{
  /* justify-self: center; */
  align-content: center;
  border-radius: 24px;
  margin: 0px 0px 0px 16px;
  width: 250px;

}

.dataCard p{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgba(43, 198, 17, 1);
  text-shadow: 
  3px  0px 0px rgb(0, 0, 0),
  0px  1px 0px black,
 -3px  0px 0px black,
  0px -3px 0px black;
}

.dataCard span{
  color: rgba(255, 255, 255, 1);
}


/****************************** modal */

  .modal{
  background-color: rgba(51, 255, 0, 0.432);
  display: flex;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0; 
  opacity:1;
  visibility: hidden;
  pointer-events: auto;
  z-index: 20;
  /* width: 100%;
  height: 100%; */
  }
  

  .modalContent{
    background-color:white;
    align-self: center;
    /* display: flex;
    justify-content: center; */
    width:620px;
    height: auto;
    margin: 10% auto;
    position: relative;
    border: 9px solid #FFE606;
    border-radius: 40px;
    box-shadow: -10px 10px #17171fef;
    }
    
  /* #myModal:target{
  opacity:1;
  pointer-events:auto;
  } */
  

  
  #photoModal{
  height: 269px;
  width: 250px;
  /* display: inline-block; */
  margin: 45px 20px 8px 15px;
  border:1px ridge black;
  border-radius: 15%;
  }

  #informationModal{
    display: flex;
    align-items: center;
    margin:-5px 0px 0px 0px;
    flex-wrap: wrap;
    }

  .titleId{
    display: flex;
    justify-content: center;
  }

  h2{
    /* display: flex; */
    font-size: 24px;
    font-family: 'Roboto', sans-serif;
    margin: 20px 0px 0px 0px;
    width: 320px;
    text-align: center;
    border: 1px solid #2A2C6C;
    box-shadow: 6px 6px #2A2C6C; 
  }
  .modalInfo{
    font-size:17px ;
    border-bottom: 1px solid black;
    border-width: 1.7px;
    padding: 6px;
    line-height: 21px;
    margin: 0;
    
  }
  
  p#episodeModal{
    border: none;
  }
  #paragraphModal{
    position: absolute;
    margin: -139px 0px 0px 280px;
  /* display: inline-block; */
   width: 300px;
  }
  .nameModalBottom{
    text-align: center;
    width: 100%;
    justify-self: center;
    align-items: center;
    align-content: center;
  }


  #nameModal{
    /*background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 45px;
    letter-spacing: 2px;
    word-spacing: 15px;
    /* padding: 0px 0px 0px 0px; */
    font-family: 'letterRickandMorty';
    color: green;
    width: 608px;
    text-shadow: 2px 2px black;
    height: 128px;
    margin: 10px 0px 0px 0px;
    background-image: url('images/backgroundModal.png');
    border: 7px solid #2A2C6C;
    border-radius: 0px 0px 28px 28px;
  }

.close{
  position: absolute;
  top: 1px;
  left: 5px;
  display:flex;
  width: 35px;
  height: 35px;
  background: rgb(214, 13, 13);
  color: white;
  line-height: 25px;
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  margin: 8px;
}

/**********************aviso: No encontrado*/
#notFound{
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
  width: 100%;
  justify-content: center;
  font-family: roboto;
}

.messageNotFound {
    color: #96be25;
    width: 100%;
    text-shadow: 2px 2px black;
    justify-content: center;
    font-size: 45px;
    display: flex;
}
.imageNotFound{
  width: 300px;
  border: none;
  background-image: radial-gradient(#2595be21 5%, transparent 80%);
}

/* paginacion */
#buttonsContainer{

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    padding: 50px 0px;
    /* justify-content: space-around; */
    /* background-color: red; */
    width: 100%;
    height: 35.30%;
}
#buttonsContainer button{
  color: white;
  background-color:#2596be;
  width: 50px;
  height: 50px;
  padding: 0px;
  font-size: 20px;
  border-radius: 20%;
  margin: 0px 10px 10px 10px;
  border: 3px groove #96be25;
  align-self: center;
  outline: none ;
}

#buttonsContainer button:hover{
  box-shadow: 0 0 10px 4px greenyellow ;
}
#buttonsContainer button:active{
  border: 3px inset #96be25;
  box-shadow: 0 0 15px 4px greenyellow ;
  color: greenyellow;
}

body .navegation{
  display: flex;
  align-content: center;
  justify-content: flex-end;
  background-color: rgba(37, 34, 34, 0.85);
  color: white; 
  width: 100%;
  
}

#aboutSection{
  color: white;
}

/* ******************************* */
/* nav footer :D******************************* */

footer{
  display: flex;
  flex-wrap: wrap;
  background: #282323;
  justify-content: center;
  width:100%;
}
.socialBars{
 /* background-color:green; */
 width: 400px;
 margin: 30px 0px 0px 0px;
 padding: 0px;
 display: flex;
 justify-content: center;
 justify-content: space-around;
 list-style:none;
 font-size: 45px;
}
a {
  text-decoration: none;
  color:white;
}
footer .allRightsReserved{
 display: flex;
 /* background-color: red; */
 width: 100%;

}
/* footer img{
  width: 100px;
  height: 100px;
} */
.lineFooterDecoration{
  color: white;
  font-size: 80px;
  padding: 0px;
  margin: 0px 10px;

}

.footerText p {
  margin: 15px 0px 0px 0px;
}
.footerText{
  /* background-color: #2596be; */
  width: 200px;
  color: white;
  margin: 0px 0px 25px 5px;
  line-height: 1.5em;
}
/* ********************************************* */

/* #aboutSection{
  display: flex;
  width: 80%;
  justify-content: center;
  margin: 40px 10%;
  flex-wrap: wrap;
  background-color: rgba(255, 255, 255, 0.863);
} */


.imgFamilyAbout{
  width: 400px;
  height: 260px;
  margin: 0px 20px;
}
/* .firstPart{
  width: 100%;
  display: flex;
  background-color: #89cf10;
} */

/* button go top */
.goTopContainer{
  position: fixed;
  bottom: -3rem;
  right: -50px;
  width: 6.6rem;
  height: 6.6rem;
  z-index: -1;
}
.goTopButton{
  /* display: none; */
  width: 0rem;
  height: 0rem;
  background:black;
  border-color: black ;
  border-radius: 50%;
  cursor: pointer;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: .2s;
  outline: none;
}
.goTopButton i{
  position: absolute;
  font-size: 1.7rem;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  color: wheat;
  
  transition: .2s;
}
.show{
  z-index: 10;
 
  
}

.show .goTopButton{
  animation: popup .3s ease-in-out;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 11;

  background: #2596be;
  
}
.show i{
  transform: translate(-50%, -50%) scale(1);
}

@keyframes popup{
  0%{
    width: 0rem;
    height: 0rem;
  }
  50%{
    width: 4.5rem;
    height: 4.5rem;
  }
  100%{
    width: 3.5rem;
    height: 3.5rem;
  }
}








/*hide everithing  
!important agregar cuando se trabaje con flex*/
.hide{
  display: none !important; 
}
@media screen and (max-width:1038px){

  #stadisticsStatus{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 50px 0px;
  }
  .chart-container {
    position: relative;
    margin-top: 60px;
}
  #statisticsGender{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 80px;
  }
}

 @media screen and (max-width:768px){

  .btnFirst {
    position: absolute;
    width: 164.1px;
    height: 41.9px;
    margin: 309.5px 29px 0px 0px ;
  }
  header .logotipe{
    width: 350px;
    height: 100px;
  }
  
  header .icon{
    width: 90px;
    height: 80px;
  }
  .nameOrder{
    margin: 45px 0px 10px 0px;
  }
  #searchByName{
    font-size: 14px;
  }
  #searchByName:placeholder-shown{
    width: 200px;
  }
  #order{
    font-size: 14px;
  }
  #advancedFilter{
    width: 320px;
  }
  .filterSelects{
    font-size: 17px;
    margin:0px 0px 0px 15px;
   }
   .filterId {
    margin:0px;
  }
   .filterSelects select{
    margin:5px 0px 20px 0px;
    border-radius: 5px ;
    font-size: 14px;
  }
  .barNavegation {
    font-size: 22px;
    margin-top: 15px;
   }
  .barNavegation1 {
    font-size: 22px;
   }
   div{
    margin: 15px;
    width:220px ;
    height: 410px ;
  }
  div:hover{
    box-shadow: 0 0 10px 5px greenyellow ;
    width:221px ;
    height: 400px ;
  }
  div:active{
    box-shadow: 0 0 10px 5px rgb(255, 255, 255) ;
  }
  .h3List{
    font-size: 20px;
    width: 220px;
    margin-bottom: 20px;
    height: 50px;    
  }
  .imageList{
    margin: 0px 0px 0px 20px;
    width: 180px;
  
  }
  .dataCard p{
    font-size: 18px;
  }
  .modalContent{
    width:550px;
    height: auto;
    }
  #photoModal{
    height: 200px;
    width: 200px;
    margin-top: 95px;
    }
    #paragraphModal{
      position: absolute;
      margin: -30px 0px 0px 230px;
    /* display: inline-block; */
     width: 300px;
    }
  
    h2 {
      /* display: flex; */
      font-size: 23px;
      width: 250px;
      margin: 12px 0px 25px 20px;
    }
    .modalInfo{
      font-size:16px ;      
    }
    #nameModal{
      width: 538px;
      margin: 25px 0px 0px 0px;
      font-size: 36px;
      height: 80px;
    }
    .messageNotFound {
      font-size: 30px;
  }
  .imageNotFound{
    width: 200px;
  }
  #buttonsContainer button{
    width: 42px;
    height: 42px;
    font-size: 18px;
    border-radius: 20%;
    margin: 0px 8px 8px 8px;
  }
  .socialBars{
    width: 200px;
    margin: 30px 0px 0px 0px;
    font-size: 35px;
   }
   .lineFooterDecoration{
    font-size: 80px;
  }
  .footerText p {
    font-size: 14px;
  }
  a {
    font-size: 14px;
  }
  #informationModal{
    margin:-80px 0px 0px 0px;
    }
  .chart-container {
    /* position: relative; */
    margin-top: 60px;
    height:250px; 
    width:460px;

}

}
@media screen and (max-width:602px){
  .modalContent{
    width:320px;
    height: 435px;
    }
    .close{
      position: absolute;
      z-index: 300;
    }
    #photoModal{
      position: absolute;
      height: 90px;
      width: 100px;
      margin: -80px 0px 110px 180px;
      z-index: 200;
      }
     #informationModal{
      height: 380px;
      z-index: 100;
      margin: -60px 0px 0px 25px;
      }
      #paragraphModal {
        font-size: 20px;
        margin:0px 0px 0px 0px;
    }
    
     
    h2 {
          font-size: 20px;
          margin: 15px 0px 25px 31px;

      }
      .modalInfo{
        font-size:16px ;
        border-bottom: none;      
      }
      #nameModal{
        font-size: 34px;
        height: 88px;
        width: 315px;
        margin: 330px 0px 0px -30px;
      }
}


@media screen and (max-width:568px){
  .home{
    background-size: 550px;
  }
  
  .btnFirst {
    width: 110px;
    height: 31px;
    margin: 310.5px 19px 0px 0px ;
    font-size: 25px;
  }
  header .logotipe{
    width: 260px;
    height: 95px;
  }

  .barNavegation {
    font-size: 18px;
   }
  .barNavegation1 {
    font-size: 21px;
    padding: 0px 10px;
   }
   .fa-bars{
     font-size: 32px;
    margin-left: 20px;
    margin-top: 0px;
     
  }
  .fa-bars:active{
    font-size: 25px;
   }
   
  .buttonsNavegation {
   padding-left: 0px;
  display: flex;
  justify-content: flex-end;
   }

  .li{
    font-size: 50px;

  }
  .iconBars1 {
    margin: 25px 0px 0px 14px;
}
 .chart-container {
   display: none;
 }

}
@media screen and (max-width:473px){
  /* .chart-container {
    height:200px; 
    width:350px;
 } */
 /* #myChart{
  height:185px; 
  width:350px;
 } */

}
@media screen and (max-width:435px){
  .homeNavegation{
    display: none;
  }
}
@media screen and (max-width:360px){
  .home{
    background-size: 500px;
  }
  .btnFirst {
    width: 97px;
    height: 25px;
    margin: 310.5px 19px 0px 0px ;
    font-size: 20px;
  }
  header .logotipe{
    width: 255px;
    height: 99px;
  }
  header .icon{
      width: 60px;
      height: 60px;
      padding-bottom: 20px;
    }
    
}
@media screen and (max-width:359px){
  
  header .logotipe{
    width: 270px;
    height: 95px;
  }
  header .icon{
      display: none;
    }
    .barNavegation {
      font-size: 18px;
      padding: 0px;
     }
    .barNavegation1 {
      font-size: 21px;
      padding: 0px 5px;
     }
   
   #searchByName{
    font-size: 14px;
    width: 155px;
  }
  #searchByName:placeholder-shown{
    width: 155px;
  }
  .modalContent{
    width:288px;
    }
    #photoModal{
      margin: -250px 0px 110px 150px;
      }
    #paragraphModal {
  
      font-size: 20px;
      width: 299px;
      margin:25px 0px 200px -28px;
  }

 #informationModal{
  height: 380px;
  z-index: 100;
  margin: 25px 0px 0px 25px;
  } 
h2 {
      font-size: 20px;
      margin: 15px 0px 25px 31px;
      width: 220px;

  }
  #nameModal{
    font-size: 29px;
    height: 88px;
    width: 280px;
    margin: 210px 0px 0px -30px;
  }
.watch{
  text-overflow: ellipsis;
  white-space:nowrap;
  overflow: hidden;
  width: 78px;
}
}
@media screen and (min-width:455px) and (max-width:600px) and (orientation: landscape){
  #advancedFilter {
    width: 479px;
    height: 319px;
    display: flex;
    position: fixed;
    flex-direction: row;
}

  .filterSelects {
    font-size: 17px;
    margin: 0px 0px 0px 15px;
}
.filterSelects select {
  margin: 0px 0px 10px 0px;
  font-size: 14px;
}
#buttonCleanFilter{
  margin-left: 0px;
  margin-top: 250px;
 
}
.iconBars1 {
  width: 45px;
}
.modalContent {
  width: 445px;
  height: 270px;
}

#episodeModal{
  display: none;
}
#informationModal{
  margin: -110px 0px 0px 20px;
  }
  #photoModal{
    width: 120px;
    height: 120px;
    margin: -50px 0px 0px 290px;
  }
  .dataCard p {
    display: none;
  }
  div {
   
    margin: 25px 9px 0px 0px;
    width: 205px;
    height: 270px;
}
.h3List {
  width: 205px;
  margin: 15px 0px 10px 0px;
  
}
div:hover {
   
  margin: 25px 9px 0px 0px;
  width: 205px;
  height: 270px;
}
.imageList {
  margin: 0px 0px 0px 11px;
  width: 180px;
}
#nameModal{
  display: none;
}
}
@media screen  and (min-width:601px) and (max-width:768px)  and (orientation: landscape){
  .modalContent {
    width: 445px;
    height: 270px;
    
  }
  
  #episodeModal{
    display: none;
  }
  #informationModal{
    margin: 90px 0px 0px -210px;
    
    }
    #photoModal{
      width: 120px;
      height: 120px;
      margin: -90px 0px 0px 500px;
    }
    .dataCard p {
      display: none;
    }
    div {
     
      margin: 25px 20px 0px 0px;
      width: 185px;
      height: 270px;
  }
  .h3List {
    width: 185px;
    margin: 15px 0px 10px 0px;
    
  }
  div:hover {
     
    margin: 25px 9px 0px 0px;
    width: 185px;
    height: 270px;
  }
  .imageList {
    margin: 0px 0px 0px 8px;
    width: 170px;
  }
  #nameModal{
    display: none;
  }
  .modalInfo{
    border: none;  
  }


}