@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap');
* {
  box-sizing: border-box;
}






.container {
  width: 100%;
  max-width: 1000px;
  border-radius: 4px;
  margin: 0 auto;
  padding: 25px 35px ;
}

.content {
  display: flex;
  flex-wrap: wrap;
  width:1000px;
  align-items: center;
  padding: 0 40px;
  font-family: Parkavenue, cursive;

}

.wrapper {
  width: 170px;
  height: 50%;
  margin-top: 10px;
  float:left;

}

.size9 {margin-top: 5px;font-size: 9px;
margin-bottom: 1px;clear: fix;}
.size6 {margin-top: 1px;font-size: 6px;}

img {border-radius: 10px;}



.box {
 
   height:max-content;
   width:160px;
 
  border-radius: 18px;

  background-color: white ;
  cursor: pointer;


/*
  box-shadow:
  0 1.4px 1.7px rgba(0, 0, 0, 0.017),
  0 3.3px 4px rgba(0, 0, 0, 0.024),
  0 6.3px 7.5px rgba(0, 0, 0, 0.03),
  0 11.2px 13.4px rgba(0, 0, 0, 0.036),
  0 20.9px 25.1px rgba(0, 0, 0, 0.043),
  0 50px 60px rgba(0, 0, 0, 0.06);
*/

  padding:9px;}
 

h6 {height: auto;margin-top: 10px;position: relative;
}
 

  .modalVisual{


    
                        display:none;
                        position:fixed;
                        z-index:9999;
                        padding-top:50px;
                        left:0;
                        top:0;
                        width:100%;
                        height:100%;
                        overflow:auto;
                        background-color:rgba(0,0,0,0.8);
                        transition: .64s ease-in-out;
                        border-radius: 10px;
                        
                  



                        
                  }

                  .modalConteudo{
                        margin:auto;
                        display:block;
                        width:80%;
                        max-width:700px;
                        transition: .64s ease-in-out;
                        border: 30px solid #dbdbdb;



                  }

                  #txtImg{
                        margin-bottom: 10px;
                        margin:auto;
                        display:block;
                        width:100%;
                        max-width:700px;
                        text-align:center;
                        color:#ccc;
                        padding:10px 30px;
                        font-size: 9px;
                        border: 10px solid #dbdbdb;
                        border-radius: 20px;
                        background-color:rgba(22, 6, 82, 0.8);
                  }

                  .fechar{
                        position:relative;
                      
                        margin-left:75%;
                        color:#fff;
                        font-size:30px;
                        font-weight:bold;
                        cursor:pointer;
                        transition: .64s ease-in-out;
                  }




/* Add Animation */

.modalConteudo, #txtImg, .fechar, h6, .size9, .size6{  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}