* {margin:0;padding: 0;}

body{
	font-family: 'Roboto', sans-serif;
	background: #abd1e3;
   /* margin-top: 110px;*/
}


.contenido {
	margin-bottom: 1em;
	min-height: 800px;
	margin-top: 120px;
	
}
.dropdown-menu{
	background-color: black;
	
}
.dropdown-item{color: white;}
.img-fluid1{
	width: 300px;
	height: 300px;
}
.margin-top{
	margin-top:250px
}

.carousel-item img{
	max-height: 450px;	
}

/*.header2 {
	display:flex;
	
	position: fixed;
	height:150px;
	z-index: 9999;
}*/

/*.header2 .logo {
	margin-top: 10px;
	line-height:100px;
	
}

.header2 .nav {
	line-height:30px;
}*/

.wrapper {
	width:100%; /* Establecemos que el ancho sera del 90% */
	max-width:1000; /* Aqui le decimos que el ancho máximo sera de 1000px */
	margin:auto; /* Centramos los elementos */
	overflow:hidden;
	
	/* Eliminamos errores de float */
}

/*header .logo {
	color:#f2f2f2;
	font-size:80px;
	line-height:150px;
	float:left;
}*/


/*header nav {
	float:right;
	line-height:150px;
}*/

header nav a {
	
	padding:10px 20px;
	
}



h1 {
    font-family: 'Charm', Dayrom, serif;
    font-size: 3em;
    text-align: center;
    margin: 0;
    padding: 0;
}
h2 {
    font-family: 'Charm', Dayrom, serif;
    font-size: 2em;
    text-align: center;
    margin: 0;
    padding: 0;
}
.item-tot h2 {
    font-family: 'Charm', Dayrom, serif;
    font-size: 2em;
    text-align: center;
    margin: 0;
    padding: 0;
}

.box-1{
	width: 30%;
	height: 350px;
	background-color: skyblue;
	border: 2px solid black;
	margin:0 auto;
		
 }
.item-tot {
   
   /* grid-column: 1/4;
    display: grid;*/
    row-gap: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 7px;
}

.opcion {    
	display: flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom: 10px;
	
}

.item-1-1 {
    position: relative;    
    height: 100%;
    width: 100%;
    
}
.item-1-1 img{
	width: 100%;
	height: 350px;
   
}
#uno {
  position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}


#dos {
   position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}

#dos:hover{
	opacity: 0;
	transition: 2s;
}
#dos:not(:hover){   
   transition: 2s;
}
#tres{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#cuatro{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#cuatro:hover{
	opacity: 0;
	transition: 2s;
}
#cuatro:not(:hover){   
   transition: 2s;
}
#cinco{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#seis{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#seis:hover{
	opacity: 0;
	transition: 2s;
}
#seis:not(:hover){   
   transition: 2s;
}
#siete{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#ocho{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#ocho:hover{
	opacity: 0;
	transition: 2s;
}
#ocho:not(:hover){   
   transition: 2s;
}
#nueve{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#diez{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#diez:hover{
	opacity: 0;
	transition: 2s;
}
#diez:not(:hover){   
   transition: 2s;
}
#once{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#doce{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#doce:hover{
	opacity: 0;
	transition: 2s;
}
#doce:not(:hover){   
   transition: 2s;
}
#trece{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#catorce{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#catorce:hover{
	opacity: 0;
	transition: 2s;
}
#catorce:not(:hover){   
   transition: 2s;
}
#quince{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#dieciseis{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#dieciseis:hover{
	opacity: 0;
	transition: 2s;
}
#dieciseis:not(:hover){   
   transition: 2s;
}
#diecisiete{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#dieciocho{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#dieciocho:hover{
	opacity: 0;
	transition: 2s;
}
#diciocho:not(:hover){   
   transition: 2s;
}
#diecinueve{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#veinte{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#veinte:hover{
	opacity: 0;
	transition: 2s;
}
#veinte:not(:hover){   
   transition: 2s;
}
#ventiuno{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#ventidos{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#ventidos:hover{
	opacity: 0;
	transition: 2s;
}
#ventidos:not(:hover){   
   transition: 2s;
}
#ventitres{
	position:absolute;
   left:0;
   top:0 ;
   z-index: 1
}
#venticuatro{
	 position:relative;
   left: 0;
   top: 0;
   z-index: 2;
}
#venticuatro:hover{
	opacity: 0;
	transition: 2s;
}
#venticuatro:not(:hover){   
   transition: 2s;
}






.g img{
	width:100%;
	margin: 0 auto; 
 }
.g {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
   gap:10px;
}
/*.carousel-inner{
	width: 45%;
	margin: auto;
}*/

@media screen and (max-width: 800px) {
	body{
		margin-top: 145px;
	}
	
	/*header .logo,
	header nav {
		position: fixed;
		width:100%;
		text-align:center;
		line-height:100px;
	}*/

	/*header nav a {
		display:inline-block;
		color:#fff;
		text-decoration:none;
		padding:5px 10px;
		line-height:normal;
		font-size:15px;
		font-weight:bold;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease;
	}*/
	
	/*.header2 {
		height:auto;
	}*/

	/*.header2 .logo,
	.header2 nav {
		line-height:150px;
	}*/
	.box-1{
		width: 340px;
		height: 350px;
		margin:0 auto;
		row-gap: 10px;
		margin-bottom: 10px;

	}
	
	/*span {
		display: block;
		width: 60%;
		margin: 4px auto;
		height: 4px;
		background: #fff
	}*/	
	.opcion {    
		display: grid;
		margin-bottom: 5px;
		grid-template-columns: repeat(1, 1fr);
		
			
		
	 }
	 .g img{
		width:100%;
		margin: 0 auto; 
		margin-bottom: 10px;
	 }
	.g {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	 
	}
}