@charset "utf-8";

/*
    ESTILOS CFG Ficha de producto
    ---------------
    1. Generales
    2. Header
    3. Footer
    4. Main
        4.1 General
        4.2 Cuando tenemos franja vertical en la parte izquierda de la pagina
        4.3 Cuando tenemos recuadro transparente en el index de la home
    5. Componentes
    6. Pagina 
*/

/* 1. Generales */

.main-wrapper {
    background: #d72f00 url('../images/site/bkg_index.jpg') no-repeat fixed bottom right;
    -webkit-background-size: 400px;
    -moz-background-size: 400px;
    background-size: 400px;
}

.main-wrapper::before {
    background-color: rgba(80,35,20,.8);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.main-wrapper {
    min-height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 2;
}

@media only screen and (min-width : 768px){
    .main-wrapper {
        -webkit-background-size: 600px;
        -moz-background-size: 600px;
        background-size: 600px;
    }
}

@media only screen and (min-width : 991px){

    .main-wrapper {
        -webkit-background-size: 720px;
        -moz-background-size: 720px;
        background-size: 720px;
    }
}

@media only screen and (min-width : 1300px){
    .main-wrapper::before {
        display: none;
    }
}

/* ++++++++++++++++++++++++++++++++++++++++++++ */

/* 2. Header */

header::before {
    background-color: #6A250F;
    bottom: 0;
    content: '';
    height: 1rem;
    left: 0;
    position: absolute;
    width: 100%;
}

.logo .logo-img {
    margin: 0;
}

h1 {
    color: #F5EBDC;
    font-family: 'Flame', arial;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    margin: 0 auto 2rem;
    width: 100%;
}

h1 span {
    font-size: 2.5rem;
}
h1 strong {
    display: block;
    font-size: 5rem;
    font-family: 'Flame', arial, serif;
}
@media only screen and (min-width : 768px){
    h1 span {
        font-size: 3.5rem;
    }
    h1 strong {
        font-size: 7rem;
    }
}
@media only screen and (min-width : 991px){
    h1 {font-size: 4rem;margin-bottom: 2.5rem;}
    h1 span {
        font-size: 4.5rem;
    }
    h1 strong {
        font-size: 9rem;
    }
}

@media only screen and (min-width : 1300px){
    header::before {
        background-color: #d72f00;
    }
}

/* ++++++++++++++++++++++++++++++++++++++++++++ */

/* 4. Main */

/* 4.1. General */

.main-wrapper {
    position: relative;
}

/* ------------------ */

/* 4.2. Cuando tenemos recuadro transparente en el index de la home */

.page_wrapper {
    margin: 0;
    padding: 1.5rem;
    max-width: 780px;
    text-align: left;
    width: 100%;
}

.content {
    max-width: 1100px;
}

@media only screen and (min-width : 769px){
    .page_wrapper {
        padding: 5rem 0;
    }
}

/* ++++++++++++++++++++++++++++++++++++++++++++ */

/* 5. Componentes */

.error {
    color: #FFF;
    padding: 1.5rem 0;
}

/* 5.1 Modal */

.c-modal {
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.c-modal--close {
    display: none;
}

.c-modal__content {
    background-color: #F5EBDC;
    -webkit-border-radius: 2.5rem;
    -moz-border-radius: 2.5rem;
    border-radius: 2.5rem;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.4);
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    margin: 3%;
    max-height: 94%;
    max-width: 80rem;
    overflow: auto;
    padding: 2rem;
    position: absolute;
    top: 0;
    width: 94%;
}
.c-modal__close {
    overflow: hidden;
    width: 100%;
    text-align: center;
}
.c-modal__close a {
    background-color: #FFF;
    color: #003a63;
    display: inline-block;
    max-width: 30rem;
}
.c-modal__close a i {}
.c-modal__description {
    overflow: hidden;
    width: 100%;
}

.c-modal__title {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    overflow: hidden;
    padding-right: 3rem;
    position: relative;
    width: 100%;
}

.c-modal__title span {
    color: #502314;
    cursor: pointer;
    font-family: 'Flame', arial, sans-serif;
    font-size: 2rem;
    position: absolute;
    right: 0;
    top: -.3rem;
}

.c-modal__title span:hover {
    color: #D62300;
}

.c-modal__description h2 {
    color: #502314;
    font-family: 'Flame', arial, sans-serif;
    font-size: 2rem;
    margin-bottom: 0;
    text-align: center;
}
.c-modal__section {
    overflow: hidden;
    width: 100%;
    border-bottom: .1rem solid #D4C8B7;
    padding: .8rem 0;
}
.c-modal__section--noBorder {border-bottom: 0;}
.c-modal__section h3 {
    color: #D62300;
    box-sizing: border-box;
    font-family: 'Flame', arial, sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    margin-bottom: 0;
    padding: .5rem 0 0 0;
    position: relative;
    width: 100%;
}
.c-modal__section p {
    color: #502314;
    margin: 1.2rem 0 0;
    font-size: 1.4rem;
}
.c-modal__info {
    overflow: hidden;
    width: 100%;
    padding: 2rem 0;
}
.c-modal__info p {
    font-size: 1.6rem;
    margin: 0 0 0.5rem;
    text-align: center;
}

.c-modal__info a {
    color: #D62300;
    font-family: 'Flame', arial, sans-serif;
    font-size: 1.8rem;
    text-decoration: underline;
}

.c-modal__info a:hover {
    color: #502314;
}

@media only screen and (min-width : 768px){

    .c-modal__content {max-height: none;}

    .c-modal__section p {
        margin: 1.2rem 0 0;
    }

}
@media only screen and (min-width : 991px){

    .c-modal__content {
        left: 50%;
        top: 50%;
        margin: -32.1rem 0 0 -27rem;
        max-width: 54rem;
        padding: 3rem 6rem;
    }
    .c-modal__section {
        padding: 1.5rem 0;
    }

    .c-modal__section p {
        margin: .5rem 0 0;
    }
}

/* ++++++++++++++++++++++++++++++++++++++++++++ */

/* 6. Pagina */

.logo-img {
    margin: 2.5rem 0;
}

.page_wrapper .logo-img {
    max-width: 160px;
    width: 100%;
}

.l-page__logo {
    display: block;
    margin: 0 0 2rem;
    max-width: 144px;
    width: 100%;
}

@media only screen and (min-width : 769px){
    .l-page__logo {
        max-width: 192px;
    }

}

.titleBlock {}
.form_container {
    margin: 0;
    max-width: 54rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.form_container form {}
.form_container fieldset {}
.form_container input[type="text"] {
    background-color: #FFF;
    border: .1rem solid #6C6C6C;
    border-radius: 1rem;
    color: #333;
    margin-bottom: 0;
    text-transform: uppercase;
    width: 100%;
}
.form_container input[type="submit"] {
    background-color: #F5EBDC;
    color: #D62300;
    display: block;
    margin: 1.5rem 0 0;
    max-width: 20rem;
    padding: 1.2rem;
}

@media only screen and (min-width : 769px){
    .form_container {
        padding-right: 20rem;
    }
    .form_container input[type="text"] {width: 96%;}
    .form_container input[type="submit"] {
        margin: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
}

.form_container input[type="submit"]:hover,
.form_container input[type="submit"]:focus {
    background-color: #502314;
    color: #FFF;
}
.explicacion {
    margin-top: 4.5rem;
    max-width: 690px;
    overflow: hidden;
    width: 100%;
}
.explicacion p {
    font-size: 2rem;
    color: #FFF;
    width: 100%;
    max-width: 80rem;
}
.explicacion p:last-child {margin-bottom: 0;}
.explicacion p a {text-decoration: underline;}
.explicacion p a:hover {color: #f5ebdc;}

@media only screen and (min-width : 480px){}
@media only screen and (min-width : 769px){
    .logo-img {
        margin: 2rem 0;
    }
    .l-page__logo {
        margin-bottom: 9rem;
    }
}
@media only screen and (min-width : 992px){}
@media only screen and (min-width : 1280px){}
footer li::before {
    background-color: #FFF;
}
footer li a {color: #FFF;}

/*** Cookies **/

#privacy-police {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
}
#privacy-police h2 {
    margin-bottom: 10px;
}
#privacy-police p, #privacy-police h2 {
    display: block;
    float: none;
    text-align: center;
    width: 100%;
}

.privacy-police-buttons {
    margin-top: 20px;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

.privacy-police-buttons button {
    float: none;
    height: auto;
    margin: 0 7px;
    padding: 12px 20px 12px;
    line-height: 1;
    width: max-content;
}

.privacy-police-buttons button.cancel {
    background-color: #777;
    display: inline-block;
}
.privacy-police-buttons button.accept {
    background-color: #003a63;
    display: inline-block;
    color: #FFF;
}

.cookiebar {
    background-color: rgba(0, 0, 0,.9);
    bottom: 0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), -3px -4px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
    display: none;
    height: 100%;
    max-width: 320px;
    overflow: auto;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 100;
}

.cookiebar .card {
    margin: 0;
    position: relative;
    width: 100%;
}
.cookiebar p {font-size: 13px;}
.cookiebar .button {
    display: block;
    font-size: 15px;
    margin: 10px auto;
}
.cookiebar .card h2, p {color: #FFF;}

.card-info {
    border-top: 1px solid #CCC;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}
.card-check {
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
}
.card-check label {
    color: #FFF;
    float: left;
    font-size: 1.3rem;
    font-weight: bold;
}
.card-check input {
    float: right;
    width: auto;
}
.card-info p {
    font-size: 13px;
    margin: 0;
}

.cookiebar .card-inner {
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    justify-content: center;
    max-width: 48em;
}

.cookiebar .card-content {
    padding: 24px;
    border-radius: 0 0 2px 2px;
}

.cookiebar .card-title {
    margin-bottom: 8px;
    display: block;
    line-height: 32px;
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(8, 125, 196, 1);
}

.cookiebar .card-action {
    position: relative;
    padding: 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: inherit;
    border-top: 1px solid rgba(160, 160, 160, .2);
}

.cookiebar .card-action #basic_chkbx,
.cookiebar .card-action label[for="basic_chkbx"] {
opacity: .5;
}

.button {
    position:relative;
    padding: 7.5px 15px;
    overflow: hidden;
    margin-bottom: 0;
    border: none;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    background: #D62300;
    font-weight: 500;
    font-size: 14.4px;
    font-size: 14.4px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 1);
    line-height: 1.5;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
}

.button:hover {
    background-color: #502314;
}

.button--blue {
    bottom: 10px;
    display: none;
    left: 10px;
    position: fixed;
    z-index: 10;
}

.block {
    display: block;
}