/* grid styles -------------- */


@media (min-width: 600px) {
	
  main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	padding:0px;
	width:95%;
	max-width:1600px;
	margin:0px auto;
  }
   .main_2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	padding:0px;
	width:95%;
	max-width:1680px;
	margin:0 auto;
	} 
  
	.figure1, .figure2, .figure3, .figure4, .figure5, .info1  {
		margin:0px;
	} 

	.margen {
		margin:20px;
	} 

  .figure1 {
    grid-column: span 1;
    grid-row: span 1;
  }
  .figure2 {
    grid-column: span 2;
	grid-row: span 1;
  }
  .figure3 {
    grid-column: span 3;
	grid-row: span 1;
  }
	.figure4 {
    grid-column: span 4;
	grid-row: span 1;
  }
 	.figure5 {
    grid-column: span 5;
	grid-row: span 1;
  }
  
  .info1 {
     grid-column: span 2;
     grid-row: span 2;
	padding: 40px;
  }
  
  .figure12 {
    grid-column: span 1;
    grid-row: span 2;
  }
  .figure22 {
    grid-column: span 2;
	grid-row: span 2;
  }
  .figure32 {
    grid-column: span 3;
	grid-row: span 2;
  }     
}

.figure-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}

@media (max-width: 1024px) {
	.figure1, .figure2, .figure3, .figure4, .figure4,.figure5,.info1  {
	  margin:0px;
  }  
}

@media screen and (max-width: 640px) {	
	main {
		width:100%;
	}
	main-2 {
		width:100%;
	}
	.figure1, .figure2, .figure3, .figure4, .figure4, .figure5, .info1  {
		margin:0px;
	} 
}

/*----------------------------------------------HOVER IMAGE-------------*/


.placa-img {
	text-align: center;
	box-sizing:border-box;
	padding:30px 40px;
	
	}
.container {
    position: relative;
}

.middle { /*info*/
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  /*width:70%;*/
    }

.container:hover .figure-img {
	opacity: 0.1;
	}

.container:hover .middle {
	opacity: 1;
	}
.fondo {
	background-color:#5552;
	color: white;
	}	
	@media screen and (max-width: 640px) {
	.middle  {
		transition:none;
		opacity: 0;
		Xposition:static;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%)	
		}
	.container:hover .figure-img {
		opacity: 1;
		}
	.container:hover .middle {
		opacity: 0;
		}			
	}
	
	@media only screen and (min-width: 641px) and (max-width: 1100px) {
	.middle  {
		  transition: .5s ease;
		  opacity: 0;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  -ms-transform: translate(-50%, -50%)		
		}
	.container:hover .figure-img {
	  opacity: 0;
		}
	}