﻿body{
    background: #b10a0a;
    font-family: 'Montserrat';
    color: white;
}


.whatsapp{
    position: fixed;
    bottom: 0;
    left: 35%;
    z-index: 1000;
    background: #1a9f0f;
    color: white;
    font-size: 22px;
    font-weight: bold;
    padding: 6px 12px;

    box-shadow: 5px -5px 10px white;

    border-radius: 10px 10px 0 0;
}
.whatsapp img{
    width: 30px;
}

.llamada{
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 1000;
    background: blue;
    color: white;
    font-size: 22px;
    font-weight: bold;
    padding: 6px 12px;

    border-radius: 10px 10px 0 0;

    box-shadow: 5px -5px 10px white;
}


.pagina{
    border: 7px solid white;
    background: #230107;
    margin-top: 20px;
}

.logotipo img{
    width: 100%;
}


.leyenda{
    font-family: 'Abril Fatface', cursive;
    font-size: 48px;
    line-height: 58px;
}


.arriba{
    font-family: 'Montserrat';
    text-align: center;
    font-size: 27px;
    line-height: 27px;
    font-weight: bold;
    margin-bottom: 20px;
}

.datos{
    font-family: 'Montserrat';
    font-size: 24px;
}
.datos span{
    background: orange;
    width: 45%;
    text-align: center;
    margin: 0 2%;
    display: inline-block;
}
.datos img{
    width: 25px;
}


#menu{
    background: #c2b19f;
    width: 100%;
    padding: 0;
    display: inline-block;
}
#menu a{
    text-decoration: none;
}
#menu ul{
    list-style: none;
    padding: 0;
}
#menu ul li{
    width: 25%;
    text-align: center;
    float: left;
}
.menu-r{
    cursor: pointer;
    display: NONE;
}
.menu, .menu-r{
    width: 100%;
    color: white;
    font-family: 'Caveat', cursive;
    text-align: center;
    font-size: 22px;
}
.menu:hover, .menu-r:hover{
    font-weight: bold;
}


.efecto{
    width: 100%;
    display: inline-block;
}
.efecto .row{
    margin-right: 0;
}

.cotizacion{
    background: black;
    padding: 20px;

    box-sizing: border-box;
}
.cotizacion strong{
    font-size: 23px;
}

.form-group{
    margin-bottom: 10px;
}


.contenido{
    background: url(../images/fondo-contenido.jpg) no-repeat center center;
    background-size: cover;
    padding: 20px;
}

.titulo{
    font-family: 'Caveat', cursive;
    text-align: center;
    font-size: 47px;
    margin-bottom: 40px;
}

.seccion{
    background: black;
    text-align: justify;
    font-size: 20px;
    padding: 20px;
}

.imagen-seccion img, .imagen-seccion video{
    position: relative;
    z-index: 2;
    width: 120%;

    border-radius: 20px;
}

.derecha{
    margin-left: -18%;
}
.izquierda{
    width: 115% !important;
}


.videos{
    padding-top: 30px;
    padding-bottom: 30px;
}

video{
    width: 100%;
}


.precios{
    font-size: 20px;
    line-height: 32px;
}
.precios strong{
    text-shadow: 2px 2px 2px black;
    padding-right: 10px;
}

.imagen img{
    width: 100%;

    border-radius: 20px;
}


.tarjeta{
    color: white;
    text-align: center;
    font-size: 27px;
    padding: 12px 0;
}
.tarjeta span{
    font-size: 23px;
}
.tarjeta img{
    width: 100%;
}


footer{
    background: black;
    font-size: 18px;
    line-height: 23px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    margin-top: 30px;
}
footer a{
    color: white;
}
footer img{
    width: 30px;
}
.tres{
    width: 30.33%;
    float:left;
}
footer strong{
    width: 100%;
    font-size: 23px;
    display: inline-block;
    margin-bottom: 20px;
}


@media screen and (max-width:1400px){

}

@media screen and (max-width:1200px){
    .pagina{
        border: 0;
        padding: 5px;
    }
}

@media screen and (max-width:992px){
    .tres{
        width: 50%;
    }
    .izquierda, .derecha{
        width: 100% !important;
        margin: 0;
    }
    .whatsapp{
        left: 10%;
    }
    .llamada{
        left: auto;
        right: 10%;
    }
}

@media screen and (max-width:768px){
    .menu-r{
        display: block;
    }
    #menu ul{
        display: none;
    }
    #menu ul li{
        width: 100%;
    }
    .leyenda{
        text-align: center;
        font-size: 35px;
        line-height: 40px;
        padding: 0;
    }
}

@media screen and (max-width:576px){
    .tres{
        width: 100%;
    }
    .datos span{
        width: 80%;
    }
}