/* Estilos generales */


:root{
    --maincolor: rgb(233, 227, 181);
    --secondarycolor: #136A38;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
body{
    background-image: url("../images/fondocesped.jpg");
}
    body > *{
        width: 80%;
        margin: 0 auto;
    }
a:visited{ 
        outline: none;
        outline-style: none;
    }
b{
    color: rgb(4,106,56);
    font-weight: bold;
}
/*header styles*/

header{
    border-top: 5px solid var(--secondarycolor);
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--maincolor);
}
.header_side_left, .header_side_right{
    width: 15%;
    text-align: center;
}
    .header_side_left img{
        width: 50%;
    }
.hidden{
   display: none;
}
.header{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
}
    .header > h1{
        text-transform: uppercase;
        font-weight: bold;
        font-size: 2.5em;
        text-align: center;
    }
    .header > h1 > a{
        text-decoration: none;  
        color: var(--secondarycolor);
    }
.islandflag{
    display: flex;
    justify-content: center;
    align-items: center;
}
    .islandflag > div:nth-child(1){
        flex: 4;
    }
    .islandflag > div:nth-child(2){
        flex: 4;
    }
    .islandflag > div:nth-child(3){
        flex: 1;
        background-color: beige;
        margin-right: 20px;
    }
        .islandflag > div:nth-child(3) img{
            width: 70%;
            padding-top: 3px;
        }
        .islandflag > div:nth-child(3) > a{
            color: #072357;
            text-decoration: none;
            transition: opacity .2s;
        }
        .islandflag > div:nth-child(3) > a:hover{
            opacity: .6;
        }
#tenerifeflag{
    display: flex;
    justify-content: right;
    padding-right: 5px;
    min-height: 60px;
}
    #tenerifeflag > img{
        text-align: right;
        width: 75%;
    }

/*nav styles*/

nav{
    min-height: 40px;
    background-color: var(--secondarycolor);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
    nav > ul{
        list-style: none;
        display: flex;
    }
        nav > ul > a{
            text-decoration: none;
            display: block;  
            color: var(--maincolor);
            transition: color .3s;
        }
        nav > ul > a:hover{
            color: rgba(233, 227, 181, .7);
        }
            nav > ul > a > li{
            min-width: 12%;
            text-transform: uppercase;
            font-size: 1.2em;
            padding: 0 0.6em;
            }
.thispage{
    color: white;
} 

/* Menu mobile */

#menu_mobile{
    display: none;
}

/* main styles */

main#home{
    min-height: 800px;
    background-color: var(--maincolor);
    position: relative;
}
    main p{
        padding: 1.2em 5em;
        font-size: 1.2em;
        line-height: 1.5em;
    }
.main_photo{
    height: 350px;
    background-image: url(../images/mainphoto.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 30px;
}
div#buttons{
    display: flex;
    padding: 5em;
}
.button{
    width: 50%;
}
    .button a{
        display: block;
        color: var(--secondarycolor);
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1.2em;
        font-weight: bold;
    }
    .button p{
        padding: 1em;
    }
#enlace_campos, #enlace_alojamiento{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 2em 0;
}

/* footer styles */

footer{
    background-color: rgb(46, 46, 46);
}
    footer > div:first-child{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    footer > div > div > div{
    padding: 6px;
}
.footer_sideleft, .footer_sideright{
    width: 25%;
    color: var(--maincolor);
    margin-top: 2em;
}
.footer_sideright{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-transform: uppercase;
    text-align: right;
}
    .footer_sideright a{
        font-size: .8em;
        color: var(--maincolor);
        transition: color .3s;
    }
    .footer_sideright a:hover{
       color: white;
    }
#footer_social > a{
        display: inline-block;
        text-decoration: none;
        transition: opacity .3s;
    }
    #footer_social > a:hover{
        opacity: .5;
    }    
    #footer_social > a > img{
        width: 40%;
    }
#footer_logo{
    text-align: center;
    padding: 1.5em 0;
}

/* ADS */
.ads{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}
    .ads > div{
        text-align: center;
        margin: 40px auto;
    }
    .ads img{
        width: 86%;
    }


/* RESPONSIVE */

@media only screen and (max-width: 1168px) {
    body > *{
        width: 100%;
        margin: 0 auto;
    }
    .header > h1{
        font-size: 2em;
    }
  }
  @media only screen and (max-width: 924px) {
    .header > h1{
        font-size: 1.4em;
    }
    header{
        border-bottom: 5px solid var(--secondarycolor);
        max-height: 50px;
    }
    .show_menu{
        cursor: pointer;
        width: 70%;
        margin-right: 25%;
    }
    #menu_side{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        background-color: var(--secondarycolor);
        text-transform: uppercase;
        position: absolute;
        width: 90%;
        height: 100vh;
        opacity: .9;
        text-align: left;
        transform: translate(-924px);
        transition: transform .8s;
    }
    #menu_side.show{
        transform: translate(0px);
    }
    #menu_side ul{
    list-style: none;
    }
    #menu_side a{
        border-bottom: 1px solid var(--maincolor);
        display: block;
        width: auto;
        text-decoration: none;
        color: var(--maincolor);
        padding: 5px;
        margin-left: 15px;
        font-weight: bold;
        font-size: 1.5em;
    }
    #menu_side a:hover{
        opacity: .8;
        color: white;
    }
    div#buttons{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1em;
    }
    .hidden{
        display: block;
    }
    #tenerifeflag{
        display: none;
    }
    nav{
        display: none;
    }
     main p{
        width:95%;
        padding: 1em 2em;
        font-size: 1em;
        line-height: 1.3em;
    }
    .islandflag > div:nth-child(3){
        flex: 1;
        background-color: beige;
        margin-right: 5px;
    }
    .footer_sideleft, .footer_sideright{
    width: 45%;
    font-size: .7em;
    }
    .button{
        width: 90%;
        margin: auto;
    }
        .button a{
            font-size: 1em; 
            width: 70%;
        }
        .button p{
            padding: 1em 0;
        }
    .main_photo{
        max-height: 200px;
        margin-bottom: 10px;
    }
    .ads img{
        width: 98%;
    }
}