/*Unused colors
    color: #222fe2;
*/

/*General Styles*/
h1,h2,h3,h4, h5{
    /* font-family: 'Mukta', sans-serif; */
    font-family: "myriad-pro-semi-condensed",sans-serif;
}

p, a, ul li, li a, address{
    /* font-family: 'Noto Sans', sans-serif; */
    font-family: "myriad-pro",sans-serif;
}

p {line-height:1.5;}

/* Navigation bar styles*/ 
.burger{
    cursor: pointer;
    font-size: 2rem;
    color: #fffdfd;
    /* margin-left: 1rem;
    margin-right: 1rem; */
}

.main-nav{display: none;}

picture img.main-logo{
    display:block;
    margin:auto;
    /* width: 6rem; */
    width:70%;
}

/*Navegador naranja*/
header div{
    display:flex;
    align-items: center;
    background-color:#000000;
    padding: 2px;
    margin: 0;
    justify-content:space-around;
}

header div div a{text-decoration: none; color: #fffdfd;}

nav{
    display: flex;
    flex-direction:row;
    justify-content:space-around;
    align-items: center;
    align-content: center;
    padding:10px;
    /* gap: 15px; */
    background-color:#d10000;
}

nav ul {
    display: flex;
    position: relative;
    top: 7rem;
    gap:1em;
    text-align: center;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.side-nav {
    height: 100%;
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0;
    background-color:#000000;
    overflow-x: hidden;
    transition: 0.5s;
    /*box-shadow: 10px 1px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 1px 5px 0px rgba(0,0,0,0.75); */
}

.side-nav ul li a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 5.5vw;
    color: #f1f1f1;
    display: flex;
    justify-content: center;
    transition: 0.3s;
    padding: 4vh;
}

.side-nav a:hover, .side-nav .closebtn:hover{
    color: #b1b1b1;
}

.side-nav .closebtn {
    position: absolute;
    top: 1em;
    right: 30px;
    font-size: 34px;
    padding: 10px;
    color: #fffdfd;
    /* margin-left: 50px; */
    cursor: pointer;
}

.main {transition: margin-left .5s;background-color:#fffdfd;}

div.social-media{display: flex; gap:15px;}

div.social-media a img{width: 40px; padding:0; transition: all .5s;}

div.contacto{transition: all .5s;}

div.contacto:hover,div.social-media a img:nth-child(1):hover{transform: translateY(-5px);transition:  all .5s; }

div.social-media a img:nth-child(2):hover{transform: translateY(-5px);transition: all .5s;}

#space{margin-bottom:4.5rem;}

/*Footer styles*/
footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /* background-color:#255C99; */
    /* background-color:#B9BAA3; */
    /* background-color:#000000; */
    /* background-color:#f7d101; */
    background-color:#c5a80e ;
    text-align: center;
    padding:20px;
    /* color: #fffdfd; */
    /* color: #000000; */
    color: #fffdfd;
}

footer div.social-media-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.social-media-footer a img{width:70%; padding:0; transition:  all .5s;}

div.social-media-footer a img:nth-child(1):hover{transform: translateY(-8px);transition:  all .5s;}
div.social-media-footer a img:nth-child(2):hover{transform: translateY(-8px);transition:  all .5s;}

/* footer h5{margin-top:0;} */

/* Medium size */
@media only screen and (min-width: 38.5em) {

picture img.main-logo{
    display:block;
    margin:auto;
    /* width: 6rem; */
    width:80%;
}

div.social-media{
    flex-direction: row;
    gap: 20px;
    margin-left: 1rem;
    margin-right: 1rem;
}

.burger{font-size: 2.5rem;}

.side-nav {max-width: 40%; transition: all 1s; opacity:0.95;}

.side-nav ul li a {
    font-size: 1.5em;
}

div.social-media img{display: block; width: 2.5rem;}

}

/* Large size */
@media only screen and (min-width: 60rem ){
    .burger{display: none;}
    .closebtn {display: none;}
    header nav{justify-content: space-evenly; }
    .main-nav{display: flex; flex-direction: row; position: static; gap:2.5rem;} 
    picture img.main-logo{width:50%;}
    .main-nav li a{color: #f1f1f1; 
        text-decoration: none; /*padding: 20px; padding-bottom: 15px;*/  
        border-bottom:1px #f03612 solid; font-size:1.3rem;
        padding: 1.5rem/*25px*/;
    }
    .main-nav li a:hover{border-bottom: #fffdfd solid 1px;}

    #side-menu{display: none;}

    header div{justify-content: end; gap:1rem;}
}