@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');     /*MENSAJE INICIO*/
@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Viaoda+Libre&display=swap');/*NUEVO MENU*/

#banner{
 margin-top: 90px;
 margin: auto;
 position: relative;
}

#banner img{
 width: 100%;
 height: 90%;
 margin: auto;
}

#video .contenedorVideo{        
 width: 90%;
 height: 90%;
 position: absolute;
 top: 180%;
 left: 50%;
 color: #efb810;	
 transform: translateX(-50%) translateY(-50%);
 text-align: center;
 /*font-family: 'Cinzel', serif;*/
 border: 2px solid;
}

#video .contenedorVideo .cuadros{ /*iframe*/
 margin-top: 20px;
 width: 80%;
 height: 80%;
}

#video h3{
 font-size: 25px;
 margin-top: 20px;
}

#video h1{
 font-size: 50px;
}

#resenas{
 background: #a5763d; /*#a8926c;*/
 color:white;
 text-align: center;
 padding: 20px;
 margin-top: 46%;
}

#resenas .contenedorRes{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 margin-top: 10px;  /*espacio con TESTIMONIOS*/
}

.info-pet{
 margin: 20px;
}

.info-pet h2{
 color: #161f16;
}

.info-pet h4{
 font-size: 25px;
 letter-spacing: 2px;
 font-family: "Playfair", serif;   /*nombres parejas*/
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.info-pet p{
 font-size: 22px;
}

.info-pet img{
 width: 200px;
 height: 200px;
}


/**************************RESPONSIVE*********************/

@media(min-width:480px){
 .info-pet{ width: 40%; }
 #banner img{ margin-top: 10%; } 
 #resenas{ margin-top: 90%; }
 footer{ margin-top: 3%; }
 #video .contenedorVideo{ top: 65%; width: 100%; height: 35%; }
}/*480*/


@media(min-width:768px){    
 #banner .contenedor{ top: 120%; }
 footer{ margin-top: 3%; }
 #resenas{ margin-top: 75%;}
 #video .contenedorVideo{ top: 125%; height: 75%; }  
}/*768*/


@media(min-width:1024px){
 .info-pet{ width: auto; }
 #banner img{ margin:  auto; }
 #resenas{ margin-top: 60%;}
}/*1024*/


@media(min-width:1280px){
 #banner .contenedor{ top: 115%; }
 #resenas{ margin-top: 50%; }
 #video .contenedorVideo{ width: 90%; height: 90%; position: absolute; top: 170%; } 
}/*1280*/


@media(min-width:1680px){
 #banner .contenedor{ top: 110%; }
 #resenas{ margin-top: 46%; }
 #video .contenedorVideo{ top: 180%; }
}/*1680*/