﻿
.titulo {
    color: #4d4d4d;
    padding-bottom: 15px;
    text-align: center !important;
    font-size: 25px !important;
}


.aviso-cookies {
    display: none;
    background: #fff;
    padding: 20px;
    width: calc(100% - 40px);
    max-width: 400px;
    line-height: 150%;
    border-radius: 3px;
    position: fixed;
    z-index: 100;
    box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
    text-align: center;
    opacity: 0;
    bottom: 205px;
    left: 496px;
    ;
}

    .aviso-cookies .parrafo,
    .aviso-cookies .titulo {
        margin-bottom: 15px;
        font-size: 1em;
        font-weight: 300;
        margin-bottom: 10px;
        opacity: 0;
        text-align: left;
    }

    .aviso-cookies .boton {
        background: #008866;
        border: none;
        color: #fff;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
        padding: 15px 20px;
        font-weight: 700;
        cursor: pointer;
        transition: .3s ease all;
        border-radius: 3px;
        margin-bottom: 0px;
        font-size: 14px;
        transition: .3s ease all;
    }

    .aviso-cookies.activo {
        display: block;
    }

    .aviso-cookies .cookies {
        max-width: 100px;
        position: absolute;
        top: -50px;
        left: calc(50% - 50px);
    }



    .aviso-cookies .contenedor-inputs {
        opacity: 0;
    }

    .aviso-cookies .boton:hover {
        background-color: #33BA75;
        cursor: pointer;
    }

    .aviso-cookies .enlace {
        color: #008866;
        text-decoration: none;
        font-size: 1em;
        opacity: 0;
        transition: .3s ease all;
    }

        .aviso-cookies .enlace:hover {
            text-decoration: underline;
            color: #33BA75;
        }

.fondocookies {
    display: none;
    background: rgba(18 18 18 / 55%);
    position: fixed;
    z-index: 99;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

    .fondocookies.activo {
        display: block;
    }

@media only screen and (max-device-width: 375px) and (max-device-width: 480px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 255px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media (max-width:481px) and (max-width: 767px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 255px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media (max-width:481px) and (max-width: 767px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 255px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media (min-width: 481px) and (max-width: 767px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 255px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}


/* Smartphones (landscape) */

@media only screen and (min-width: 321px)and (max-width: 322px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 255px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}


/* Smartphones (portrait) */

@media only screen and (max-width: 320px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 74px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}


/* iPads (portrait & landscape) */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 255px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}


/* iPads (landscape) 
#Dispositivo = Tablets, Ipads (horizontal) 
#ResoluciÃ³n = B/w 768px to 1024px */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 255px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 15px;
            font-size: 14px;
            transition: .3s ease all;
        }
}


/* iPads (portrait) 
#Dispositivo = Tablets, Ipads (vertical) 
#Resolucion = B/w 768px to 1024px */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 370px;
        /* left: -17px; */
        left: 186px
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}


/* Ordenadores de sobremesa y portÃ¡tiles */

@media only screen and (min-width: 1224px)and (max-width: 1225px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 255px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}


/* Pantallas grandes */

@media only screen and (min-width: 1824px) and (max-width: 1825px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 255px;
        left: 20px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media only screen and (min-width: 1024px)and (max-width: 1025px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 534px;
        left: 308px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media only screen and (min-width: 1024px)and (max-height: 600px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 204px;
        left: 317px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media only screen and (min-width: 2000px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 300px;
        left: 1090px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media only screen and (min-width: 1600px)and (max-width: 1900px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 320px;
        left: 660px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media only screen and (min-width: 1920px)and (max-width: 2000px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 409px;
        left: 793px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media only screen and (min-width: 1208px)and (max-width: 1209px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 529px;
        left: 308px;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

@media only screen and (min-width: 1280px)and (max-width: 1289px) {
    .aviso-cookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 400px;
        line-height: 150%;
        border-radius: 3px;
        position: fixed;
        z-index: 100;
        box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
        text-align: center;
        opacity: 0;
        bottom: 205px;
        left: 496px;
        ;
    }

        .aviso-cookies .parrafo,
        .aviso-cookies .titulo {
            margin-bottom: 15px;
            font-size: 1em;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0;
            text-align: left;
        }

        .aviso-cookies .boton {
            background: #008866;
            border: none;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 15px 20px;
            font-weight: 700;
            cursor: pointer;
            transition: .3s ease all;
            border-radius: 3px;
            margin-bottom: 0px;
            font-size: 14px;
            transition: .3s ease all;
        }
}

.aviso-cookies.active {
    transform: scale(1);
    opacity: 1;
}

    .aviso-cookies.active .titulo,
    .parrafo,
    .titulo,
    .contenedor-inputs,
    .enlace,
    .aviso-cookies {
        animation: entrada .8s ease .5s forwards;
    }

@keyframes entrada {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
