@charset "utf-8";
/* CSS Document */

/**********versión movíl**********/

.primary-nav{
    transform: translateX(-120%);
    transition: transform 0.33s ease-in;
    position:fixed;
    background: rgba(222, 207, 167, 0.3);
    padding: 0.5em;
    width: 90%;
}

body{
  font-family: 'EB Garamond', serif;
}


body nav h1{
    display: flex;
    justify-content: center;
    font-family: 'Libre Baskerville', serif;
}

h3{
   font-family: 'Cormorant Garamond', serif;
    justify-content: center;
}

.primary-nav:target{
   transform: translateX(0);
 }

.primary-nav ul{
    display: flex;
    flex-direction:column;
    /*justify-content:flex-end;*/
    list-style: none;
    padding: 0;
    margin: 0;
}

.primary-nav ul a{
    text-decoration: none;
    color: black;
}

.hamburguesa-menu img{
	width: 25px;
}

.primary-nav ul li{
	padding: .4em;
    margin: .2em;
    background: rgba(222, 207, 167, 0.7);	
}

.primary-nav ul li a:hover {
    color: #999;
}

.primary-nav ul li .submenu{
	display: none;
}

.show:hover .submenu{
	display: flex;
	flex-direction: column;
}

.submenu li a{
       flex-direction:row;
}

.close{
    text-decoration: none;
    color: rgba(37, 35, 29, 0.7);
}

.imgportada{
	width: 100%;
	height: auto;
	
}

img{
    width: 99%;
    height:auto;
}

.imgsola{
    width: 50%;
    height: auto;
    align-items: center;
}

seccion{
    display: flex;  
    flex-direction: column;
}

.seccion article{
    padding: .5em;
    margin: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: center;
    box-sizing: border-box;
    }

main section {
     background: rgba(222, 207, 167, 0.2);
}

main section h4, h3{
    text-align: center;
    background: rgba(222, 207, 167, 0.3);
    justify-content: center;
}

main section{
    text-align: center;
    justify-content: center;
}


footer nav{
    display: flex;
    flex-direction: row;
    list-style: none;
    justify-content: center; 
    align-content: center; 
    background:rgba(222, 207, 167, 0.7); 
    width: 70%;
    margin: 1em auto;
    
}

footer nav li{
    text-align: center;
}

footer nav li:first-child{
    text-align: left;
}
footer nav li:last-child{
    text-align: right;
}



footer nav li a{
    text-decoration: none;
    color: black;

}

footer li img{
    width: 15%;
    padding-top: 0.3em;
}

.flecha {
    width: 2%;
   
}

/*
footer nav li a:nth-child(3){
    flex-grow: 3;
}
*/
footer article a{
    color: black;
    margin: .3em;

   }

/**********versión tablet**********/

@media (min-width: 767px)
/* El submenú al abrir está mal, las cajas (fotos) */
{
    .primary-nav{
		transform: translateX(0);
		width: 100%;
		padding: 0;
        margin: 0;
        position: static;
	}
	.primary-nav ul{
		flex-direction: row;
		justify-content:flex-end;
		align-items: flex-start;   
	}
    
    .primary-nav ul li a{
        justify-content: flex-start;
    }
	
    .hamburguesa-menu, .close{
		display: none;
	}
    
    .submenu{
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    footer li img{
        width: 15%;
        padding-top: 0.3em;
        padding-left:.5em;
    }
    
    footer nav{
    justify-content: center;
    align-content: center;
    width: 50%;
  
    /*border-radius: 10px*/
    }
        
    .seccion{
        display: flex;
		flex-direction: row;
        /*align-items:center;*/
		flex-wrap: wrap;
	}
    
    .seccion article {
        width: 50%;
        /*float:left;*/
        padding:1em;
        margin: 0;
        /*border: thin solid #2A2A2A;*/
		display: flex;
		flex-direction: column;
		align-items: center;
    }
    
    .seccion article img{
        width: 100%;
    }
	
}

/**********versión ordenador**********/

@media (min-width: 1023px)
{
    .primary-nav{
        position:fixed;
        width: 20%;
        height: 100%;
        overflow: auto;
      
	}
	
	.primary-nav ul{
		align-items: stretch;   
	}
	.primary-nav ul{
		flex-direction: column;
        width: 98%;
        margin: .1em;
	}
    
    .primary-nav ul li a{
        justify-content: flex-start;
        display: block;
       /* width: 60px;*/
        padding: 8px 16px;
    }
	
    .hamburguesa-menu, .close{
		display: none;
	}
    
    .submenu{
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .section, main, footer{
        margin-left:20%;
        padding:1px 14px;
    }
    
    .nav, h1{
        margin-left:20%;
        padding:1px 14px;
    }
    
	
	
    .imgportada{
        width: 78%;
        margin-top: 0;
		margin-left: 21%;
    }
    
    
     .seccion article img, h4{
        width: 80%;
    }
	
	.seccion{
		flex-wrap: nowrap;
	}
    
        
}