@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&family=Montserrat:wght@200;400;500;600;700;800&display=swap');
/*
font-family: 'Gideon Roman', serif;
font-family: 'Montserrat', sans-serif;
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
html {
    line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
    width: 100%;
    min-height: 100vh;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    background-color: #212121;
}
.container {
    max-width: 1500px;
    margin: 0;
    
}

.menubar {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #000;
    padding: 0px 30px;

    & .logo img {
        height: 45px;
    }
    & label {
        cursor:pointer;
        display:none;
    }
    & .menu-icono {
        width: 25px;
    }
    & #menu {
        display: none;
    }
    & .navbar {
        float: left;
    }
        &  ul li {
        float: left;
        }
             & a {
                font-size: 14px;
                padding: 2px 15px;
                color: #fff;
                display: inline-block;
                font-weight: 500;

                &:hover {
                    color: #dbe00e;
                    text-shadow: 3px 3px 10px #000;
                }
             }
}
.img-back {
    display: none;
}
video {
    position: absolute;
    top: 45;
    left: 0;
    width: 100vw;
    background-color: #2C2C2C;

}
.call-btn {
    position: fixed;
    top: 80vh;
    left: 10vh;
    display: block;
    padding: 15px 15px;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 15px;
    background-color: #db2e13;
    border-radius: 50px;
    box-shadow: 5px 5px 5px #bcbabe;

    &:hover { 
        background-color: #ecf39e;
        box-shadow: 5px 5px 10px #69686a
    }
    & img {
        max-height: 40px;
        animation-name: change-size;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}

.inicio-content {
    
    display: flex;
    justify-content:center;
    height: 100vh;
    background-color: #212121
}
    & .header-logo {
        flex-basis: 75%;
        align-items: right;
        text-align: center;
        position: relative;
        z-index: 2;
        right: 0;
        
        
    }
        & #logotipo-riviera {
            max-width: 750px;
            width: auto;
            padding-top: 70px;
            filter: drop-shadow(-2px 2px 100px rgba(255, 255, 255, 0.9));
        }
        & h1 { 
            padding: 30px 0;
            font-size: 5px;
            font-weight: 800;
            font-size: 20px;
            color: #fff;
        }
    & .header-img {
        flex-basis: 100%;
        right: 0;
        padding-right: 0px;
    }
        & img {
            width: auto;
            max-width: 100%;
        }
.btn-1 {
    display: inline-block;
    padding: 13px 35px;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 15px;
    background-color: #db2e13;
    border-radius: 25px;
    box-shadow: 5px 5px 10px #3f3f3f;


    &:hover { 
        background-color: #f08171;
        box-shadow: 5px 5px 10px #fff
    }
    & img {
        max-height: 25px;
    }
}


.about {
    display: flex;
    padding: 45px 0 50px 0;
    background-color: #212121;

    & .about-maping {
    flex-basis: 50%;
    display: flex;
        & img {
            border-radius: 10%;
            padding-left: 5%;
            padding-right: 5%;
        max-width: 100%;
        max-height: 75%;
        }
    }
}
.about .about-content {
    flex-basis: 50%;
    padding-top: 45px;



    & h2 {
    line-height: 1;
    margin-bottom: 30px;
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    }
    & p {
    text-align: justify;
    font-size: 16px;
    color: #ffffff;
    padding: 15px 40px;
        & span{
         font-weight: 700;
        }
     }
    & .btn-1 {
    display: inherit;
    text-align: center;
    margin-top: 10%;
    margin-left: 35%;
    margin-right: 35%;
    margin-bottom: 20%;
    }
}
.video-youtube {
    height: 70vh;
    display: block;
    align-content: center;
    & iframe {
        width: 75vw;
        height: 65vh;
        margin-left: 12.5vw;
        margin-right: 12.5vw;
    }
}
.pcar {
    padding: 10px 70px;
    display: flex;
}
.pcar-content {
    display: inline;
    justify-content: space-between;
    align-items: center;
    & h1 {
        font-family: 'Montserrat';
        font-size: 40px;
        font-weight: 600;   
    }
}
.card-1 {
    display: inline-block;
    text-align: center;
    & img {
        width: 20vw;
        margin-top: -70px;
        border-radius: 20%;
        margin: auto;
        opacity: 10%;

        &:hover {
            width: 290px; 
            border-radius: 5%;
            box-shadow: 4px 4px 8px #69686a;
            opacity: 100%;       
        }
    }
    & h3 {
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 800;
        color: #ffffff;
    }
    
}


.pcardes-container {
    padding: 40px 40px 0px 0px;
    display: inlne-flex;
    text-align: justify;
    align-items: center;
    color: #fff;
    & span {
    font-weight: 700;
    }
    & a {
        margin-top: 40px;
        display: inline-block;
        align-items: center;
        margin-left: 35vw;
        justify-content: center;
    }
}
.disponibilidad {
    display: flex;
    padding-top: 90px;

    & .disponinilad-content {
    flex-basis: 50%;
    display:inline;
    align-items: center;

        & h2 {
            padding: 10px 0px;
            font-size: 32px;
            font-weight: 600;
            color: #FFF;
            padding: 0 30px;
        }
        & p {
            text-align: justify;
            color: #FFF;
            padding: 15px 70px;
                & span {
                    font-weight: 700;
                }

        }
        & ul {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30px 130px;
        }


    }


    & .disponibilidad-img {
        flex-basis: 50%;
        
        & img {
            padding: 0px;
            width: 700px;  
        }
    }

}

.cotiza {
    display: flex;
    padding: 90px 0 0 0;
    text-align: center;

    & .cotiza-img {
        flex-basis: 42%;

        & img {
            padding-left: 0px;
            padding-right: 70px;
            height: 100%;
            padding-top: -80px;
            filter: drop-shadow(-2px 12px 40px rgba(0, 0, 0, 0.8));
        }

    }
    & .cotiza-container {
        flex-basis: 50%;
        display:inline;
        justify-content: space-between;
        align-items: center;

        & h2 {
            margin-bottom: 30px;
            font-size: 35px;
            font-weight: 600;
            color: #FFF;
            padding: 0 50px 0 0;

        }
        & p {
            padding: 20px 40px;
            color: #fff;
            text-align: justify;
            & span {
                font-weight: 700;
            }
        }
        & #btn-coti {
            margin-top: 30px;
            
        }
    }
}
.avance { 
    display: flex;
    padding: 50px 0 0 0;

    & .avance-container {
        padding: 30px;
        flex-basis: 50%;
        & h2 {
            margin-bottom: 30px;
            font-size: 35px;
            font-weight: 600;
            color: #FFF;
            padding: 0 50px 0 0;

        }
        & p {
            padding: 20px 40px;
            color: #fff;
            text-align: justify;
            & span {
                font-weight: 700;
            }
        }
        & #btn-coti {
            margin-top: 30px;
            
        }
        & ul {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30px 130px;
        }
    }
    & .avance-img {
        flex-basis: 50%;
        width: 100%;
        & img {
            max-width: 100%;
            padding-left: 10%;
            padding-right: 10%;
        }
    }
}
.visita {
    display: flex;
    padding: 90px 0 0 0;
    text-align: center;

    & .visita-img {
        flex-basis: 50%;
        

        & img {
            border-radius: 45px;
            max-width: 90%;
      
            
        }

    }
    & .visita-container {
        flex-basis: 50%;
        display:inline;
        justify-content: space-between;
        align-items: center;

        & h2 {
            margin-bottom: 30px;
            font-size: 35px;
            font-weight: 600;
            color: #FFF;
            padding: 0 50px 0 0;

        }
        & p {
            padding: 20px 40px;
            color: #fff;
            text-align: justify;
            & span {
                font-weight: 700;
            }
        }
        & #btn-coti {
            margin-top: 30px;
            
        }
    }
}



.contacto {
    display: flex;
    padding: 50px 0 0 0;

    & .contacto-content {
        padding: 30px;
        flex-basis: 50%;

        & h2 {
            line-height: 1;
            margin-bottom: 30px;
            font-size: 35px;
            font-weight: 600;
            color: #FFF;
            padding: 0 30px;
        }
        & p {
            padding: 0 50px;
            color: #FFF;
            text-align: justify;
        }
        & ul {
            display: flex;
            justify-content: space-between;
            padding: 30px 50px;
        }
    }
    & .contacto-img {
        flex-basis: 50%;
        width: 100%;
        & img {
            max-width: 80%;
        }
    }
}

.footer {
    background-color: #000;
    
    padding: 15px 0;
    text-align: center;

    & h4 {
        font-weight: 100;
        color: #ffffff;
        font-size: 15px;
    }
}
div.row{
    margin-right: 0px;
 }
 
 div.container-fluid{
    padding-right: 0px;
 }


/* Responsive Tamaño TELEFONO */
@media (width <= 415px) {
/*     *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    } 

    body{
        width: 100%;
        min-height: 100vh;
        border: 5px dashed black;
    } */
    .menubar {
        padding: 5px;
        
        & label {
            padding-right: 15px;
            display: initial;
        }
        & .navbar {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #565557;
            display: none;
            & ul {
                align-items: center;
                text-align: center;

                & li {
                    width: 100%;
                }
            }
        }
    }
    #menu:checked~.navbar {
        display: initial;
    }
    video {
        display: none;
    }
    .img-back {
        display: inline;
        height: 100%;
    
    }
    .call-btn {
        position: fixed;
        top: 85vh;
        left: 4vh;
        display: block;
        padding: 9px 9px;
        color: #ffffff;
        text-transform: uppercase;
        font-size: 15px;
        background-color: #db2e13;
        border-radius: 50px;
        box-shadow: 5px 5px 5px #bcbabe;
    
        &:hover { 
            background-color: #ecf39e;
            box-shadow: 5px 5px 10px #69686a
        }
        & img {
            max-height: 35px;
            animation-name: change-size-mini;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
    }

    .inicio-content {
        display: block;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        z-index: 2;
        background-image: url(IMAGENES/fondoplaya.png);
        background-attachment: fixed;
        background-size: cover;

        & .header-logo {
            max-width: 100%;
            align-items: center;
            text-align: center;
            z-index: 2;
            & #logotipo-riviera {
                max-width: 90%;
                margin-top: -40px;
            }
            & h1 {
                padding: 25px, 10px;
                font-size: 15px;
                color: #000000;
            }          
        }
        & .header-img {
            max-width: 40%;
            & img {
                height: 20%;
            }
        }  
    }
    .video-youtube {
        height: 25vh;
        display: block;
        align-content: center;
        & iframe {
            width: 90vw;
            height: 25vh;
            margin-left: 5vw;
            margin-right: 5vw;
        }
    }
    .about {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        padding-top: 0;

        & .about-content {
            max-width: 100%;
            display: inline;
            align-items: center;
            text-align: center;

            & h2 {
                font-size: 22px;
            }
            & p {
                font-size: 10px;
            }
            & a {
                margin-bottom: 15px;
                height: auto;
            }
            & .btn-1 {
                margin-left: 20%;
                width: 60%;
                margin-right: 20%;
            }
        }
        & .about-maping {
            max-width: 100%;
            padding-top: 0;

            & img {
                width: 100%;
                border-radius: 0%;
            }
        }
    }
    .pcar {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 5px 5px;

        & .pcar-content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            & h1 {
                display: inline;
                font-size: 22px;
                align-items: center;
                text-align: center;
            }
            & .card-1 {
                border-radius: 5px;
                margin-right: 5px;
                text-align: center;
                padding: 15px 10px;
                width: 45vw;
                margin-top: 45px;
                
                & img {
                    width: 45vw;
                    border-radius: 25px;
                    opacity: 100%;

                }
                & h3 {
                    font-size: 12px;
                    font-weight: 300;
                }
            }
        }
        & .pcardes-container {
            padding: 35px 35px;
            
            & p {
                font-size: 12px;
            }
            & .btn-1 {
                margin-left: 20%;
                width: 60%;
                margin-right: 20%;
            }
        }
    }
    .disponibilidad {
        padding: 20px 5px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

        & .disponinilad-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            & h2 {
                font-size: 25px;
            }
            & p {
                padding: 20px 50px;
                font-size: 12px;
            }
            & ul {
                display: flex;
                flex-direction: column;
                margin-top: -20px;

                & li {
                    margin: 12px;
                }
            }
        }
        & .disponibilidad-img {
            width: 100vw;
            align-items: center;
            text-align: center;
            & img {
                width: 100vw;
            }
        }
    }
    .cotiza {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;

        & .cotiza-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0px 5px;

            & h2 {
                font-size: 25px;
                padding: 15px 30px;
                margin-bottom: 0px;
            }
            & p {
                padding: 0px 50px;
                font-size: 12px;
            }   
        }
        & .cotiza-img {
            width: 100%;
            margin-left: 0px;
            padding-left: 0px;

            & img {
                margin-top: 40px;
                padding-left: 0px;
                width: 100vw;
                max-width: 100%;
                margin-left: 0px;
            }
        }
    }
    .avance {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;

        & .avance-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0px 5px;

            & h2 {
                font-size: 25px;
                padding: 15px 30px;
                margin-bottom: 0px;
            }
            & p {
                padding: 0px 50px;
                font-size: 12px;
            }   
            & ul {
                display: flex;
                flex-direction: column;
                margin-top: -20px;

                & li {
                    margin: 12px;
                }
            }
        }
        
        & .avance-img {
            width: 100%;
            margin-left: 0px;
            padding-left: 0px;

            & img {
                margin-top: 40px;
                padding-left: 0px;
                width: 100vw;
                max-width: 100%;
                margin-left: 0px;
            }
        }
    }
    .visita {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        padding-top: 0;

        & .visita-container {
            max-width: 100%;
            display: inline;
            align-items: center;
            text-align: center;

            & h2 {
                font-size: 22px;
            }
            & p {
                font-size: 10px;
            }
            & a {
                margin-bottom: 15px;
                height: auto;
            }
            & .btn-1 {
                margin-left: 20%;
                width: 60%;
                margin-right: 20%;
                margin-bottom: 10%;
            }
        }
        & .visita-img {
            max-width: 100%;
            padding-top: 0;

            & img {
                width: 100%;
                border-radius: 0%;
            }
        }
    }
    
    .contacto {
        padding: 20px 5px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

        & .contacto-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            & h2 {
                font-size: 25px;
                padding: 15px 30px;
                margin-bottom: 0px;
            }
            & p {
                padding: 0px 20px;
                font-size: 12px;
            }  
            & a {
                padding: 10px 15px;
                margin: 12px;       
                & img {
                    width: 25px;
                }
            } 
        }
        & .contacto-img {
            width: 100%;
            align-items: center;
            text-align: center;
            & img {
                margin-top: -20px;
                width: 100%;
            }
        }
    }
    .footer h4 {
        font-size: 8px;
    }
  }







/* Responsive Tamaño TABLETS */
  @media (415px <= width <= 825px) {
    .menubar {
        padding: 5px;
        
        & label {
            padding-right: 20px;
            display: initial;
        }
        & .navbar {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #565557;
            display: none;
            & ul {
                align-items: center;
                text-align: center;

                & li {
                    width: 100%;
                }
            }
        }
    }
    #menu:checked~.navbar {
        display: initial;
    }
    .inicio-content {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 100%;
        height: 45vh;
        & .header-logo {
            align-items: center;
            text-align: center;
            padding: 0 40px;
            order: initial;
            & #logotipo-riviera {
                align-items: center;
                max-width: 70vw;
                margin-top: -40px;
            }
            & h1 {
                padding: 15px 5px;
                font-size: 15px;
                text-shadow: 2px 1px 5px #212121;
            }          
        }
                
    }

    .btn-1 {
        display: inline-block;
        padding: 6px 22px;
        color: #ffffff;
        text-transform: uppercase;
        font-size: 13px;
        background-color: #006280;
        border-radius: 20px;
        box-shadow: 5px 5px 5px #bcbabe;
    
        &:hover { 
            background-color: #dbe00e;
            box-shadow: 5px 5px 10px #fff
        }
        & img {
            max-height: 25px;
        }
    }

    .about {
        display: flex;
        flex-wrap: wrap;
        padding: 0;

        & .about-content {
            max-width: 40%;
            display: inline;
            align-items: center;
            text-align: center;

            & h2 {
                font-size: 18px;
            }
            & p {
                font-size: 10px;
            }
            & .btn-1 {
                margin-left: 20%;
                width: 60%;
                margin-right: 20%;
            }
        }
        & .about-maping {
            flex-basis: 60%;
            width: 60%;

            & img {
                width: 100%;
                height: min-content;
            }
        }
    }

    .video-youtube {
        height: 45vh;
        display: flex;
        align-content: center;
        & iframe {
            width: 90vw;
            height: 40vh;
            margin-left: 5vw;
            margin-right: 5vw;
        }
    }
    .pcar {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 0vh 2vw;

        & .pcar-content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            & .card-1 {
                border-radius: 5px;
                margin-right: 5px;
                text-align: center;
                padding: 15px 10px;
                width: 45vw;
                margin-top: 45px;
                
                & img {
                    width: 45vw;
                    border-radius: 25px;
                    opacity: 100%;
                }
                & h3 {
                    padding-top: 10px;
                    font-size: 12px;
                }
            }
        }
        & .pcardes-container {
            padding: 20px 8%;
            
            & p {
                font-size: 12px;
            }
            
            & .btn-1 {
                margin-left: 30%;
                width: 40%;
                margin-right: 30%;
                align-items: center;
                text-align: center;
            }
        }
    }
    .disponibilidad {
        padding: 20px 5px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        & .disponinilad-content {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            & h2 {
                font-size: 25px;
            }
            & p {
                padding: 20px 50px;
                font-size: 12px;
            }
            & ul {
                display: flex;
                flex-direction: row;
                margin-top: -20px;

                & li {
                    margin: 12px;
                }
            }
        }
        & .disponibilidad-img {
            width: 50%;
            align-items: center;
            text-align: center;
            & img {
                width: 100vw;
            }
        }
    }
    .cotiza {
        padding: 20px 5px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        & .cotiza-container {
            flex-basis: 50%;
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            & h2 {
                font-size: 25px;
                padding: 15px 20px;
                margin-bottom: 0px;
            }
            & p {
                padding: 0px 40px;
                font-size: 12px;
            }   
        }
        & .cotiza-img {
            flex-basis: 50%;
            width: 50%;
            height: 100%;
            align-items: center;
            text-align: center;
            & img {
                height: min-content;
                width: fit-content;
            }
        }
    }
    .contacto {
        padding: 20px 5px 0 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        & .contacto-content {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            & h2 {
                font-size: 25px;
                padding: 15px 30px;
                margin-bottom: 0px;
            }
            & p {
                padding: 0px 20px;
                font-size: 12px;
            }  
            & a {
                padding: 10px 15px;
                margin: 12px;       
                & img {
                    width: 25px;
                }
            } 
        }
        & .contacto-img {
            width: 50%;
            align-items: center;
            text-align: center;
            & img {
                margin-top: 0px;
                width: 100%;
            }
        }
    }
    .footer h4 {
        font-size: 12px;
    }
    
  }