/* Estilos de sitios de interés */
.construction{
    width: 80%;
    margin: auto;
}
    .construction > img{
        width: 70%;
        display: block;
        margin: 50px auto;
    }
.main_photo_interest{
    height: 350px;
    background-image: url(../images/main2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 30px;
}
#interest{
    min-height: 800px;
    background-color: var(--maincolor);
}
#interestmap{
    width: 90%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
} 
#interestmap img{
    width: 80%;
}
h2{
    color: var(--secondarycolor);
    text-transform: uppercase;
    font-size: 1.9em;
    margin: 50px auto;
    width: 90%;
    text-align: center;
    line-height: 2em;
}
.placeinterest{
    width: 90%;
    min-height: 50px;
    background-color: rgb(255, 239, 216);
    margin: 15px auto 50px;
}
    .placeinterest > h3{
        text-transform: uppercase;
        color: var(--secondarycolor);
        font-size: 1.5em;
        text-align: center;
        padding: 30px 0;
    }
    .placeinterest > p{
        padding: 2em 5em;
        line-height: 1.8em;
    }
#separadorinterest{
    height: 100px;
}



/* Slider de imágenes */

.slider{
    width: 80%;
    margin: auto;
    overflow: hidden;
}
    .slider ul{
        display: flex;
        padding: 0;
        width: 400%;
        animation: cambio 24s infinite alternate ease-in;
    }
    .slider li{
        width: 100%;
        list-style: none;
    }
    .slider img{
        width: 100%;
    }
@keyframes cambio{
    0% { margin-left: 0;}
    20% { margin-left: 0;}

    25% { margin-left: -100%;}
    45% { margin-left: -100%;}

    50% { margin-left: -200%;}
    70% { margin-left: -200%;}

    75% { margin-left: -300%;}
    100% { margin-left: -300%;}
}
@media only screen and (max-width: 756px){
    .main_photo_interest{
        height: 200px;
        margin-bottom: 10px;
    }
    header{
        border-bottom: 5px solid var(--secondarycolor);
        max-height: 50px;
    }
    #interestmap img{
        width: 95%;
    }
    .placeinterest{
        width: 96%;
        margin: 12px auto;
    }
    .placeinterest > h3{
        font-size: 1.3em;
        text-align: center;
        padding: 20px 0;
    }
    .placeinterest > p{
        padding: 1.5em 2.2em;
        line-height: 1.5em;
    }
    h2{
        font-size: 1.6em;
        margin: 30px auto;
        width: 95%;
        text-align: center;
        line-height: 1.6em;
    }
}