﻿.c2c-fancy.fancybox-opened .fancybox-skin {
    border-left: 15px solid #cb0000;
    border-right: 15px solid #cb0000;
    border-radius: 15px;
}

.fancybox-inner {
    overflow: hidden !important;
}

#frmTeLlamamos {
    clear: left;
    font: 0.8em Kanit,Helvetica,Verdana,sans-serif;
}

    #frmTeLlamamos .horarios 
    {
        display:flex;
        flex-direction:row;
        width:60%;
        justify-content:space-between;
    }

    #frmTeLlamamos .separador{
        display:none;
    }

    #frmTeLlamamos .horarios .bloqueHorario 
    {
        display:flex;
        flex-direction:column;
    }

    #frmTeLlamamos .horarios>.bloqueHorario p:first-child 
    {
        margin-top:15px;
        margin-bottom:6px;
        color: #e40000;
        font-size: 14px;
        line-height:0px;
        font-weight:bold;
    }

    #frmTeLlamamos .horarios > .bloqueHorario p:last-child {
        color: black;
        font-size: 13px;
        line-height: 0px;
    }
    
    #frmTeLlamamos.popup {
        display: block;
        max-width: 630px;
        margin: auto;
        padding: 0 20px;
    }

    #frmTeLlamamos .title-tl {
        font-size: 22px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.17;
        letter-spacing: 0.02px;
        color: #000;
        margin-top:5%;
    }

        #frmTeLlamamos .title-tl b {
            font-size: 26px;
            font-weight: 800;
            letter-spacing: 0.03px;
            color: #cb0000;
        }

    #frmTeLlamamos.popup .title-tl {
        text-align: center;
        margin-top: 35px;
    }

    #frmTeLlamamos .tlfno {
        display: flex;
        flex-direction: row;
        /*justify-content: center;*/
        margin: 0px auto;
    }

        #frmTeLlamamos .tlfno img {
            transform: scale(0.6);
            margin-right: 10px;
        }

        #frmTeLlamamos .tlfno a {
            width: fit-content;
            font-size: 40px;
        }

    #frmTeLlamamos.popup .tlfno a {
        color: #cb0000;
        text-decoration: none;
    }

        #frmTeLlamamos.popup .tlfno a:hover {
            color: #000;
        }

    #frmTeLlamamos .datos-tl {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 10px auto;
    }

        #frmTeLlamamos .datos-tl label {
            font-size: 15px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.79;
            letter-spacing: 0.01px;
            color: #000;
        }

        #frmTeLlamamos .datos-tl input {
            width: 284px;
            height: 41px;
            background-color: #fff;
            border: 1px solid #D1D1D1;
            border-radius: 2px;
            color: #333;
            font-size: 14px;
            box-shadow: inset 0px 3px 3px rgba(0,0,0,0.1);
            -moz-box-shadow: inset 0px 3px 3px rgba(0,0,0,0.1);
            -webkit-box-shadow: inset 0px 3px 3px rgba(0,0,0,0.1);
            outline: 0;
            padding: 10px 4px;
        }

            #frmTeLlamamos .datos-tl input.valido {
                box-shadow: #79fb1e 0 0 0px 1px;
            }

            #frmTeLlamamos .datos-tl input.invalido {
                box-shadow: #cb0000 0 0 0px 1px;
            }

    #frmTeLlamamos.popup .datos-tl {
        flex-direction: column;
        width: min-content;
    }

        #frmTeLlamamos.popup .datos-tl input {
            height: 25px;
            margin-bottom: 30px;
        }

    #frmTeLlamamos #diaTeLlamamos .flatpickr-calendar {
        margin: 20px auto auto auto;
    }

        #frmTeLlamamos #diaTeLlamamos .flatpickr-calendar .flatpickr-day.selected {
            background: #79fb1e;
            color: #000;
            border-color: #79fb1e;
        }

    #frmTeLlamamos #botonesHoras {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        margin: 20px auto;
    }

        #frmTeLlamamos #botonesHoras a {
            width: 21%;
            background-color: #ebebeb;
            color: #cb0000;
            font-size: 17px;
            text-align: center;
            border: 1px solid #6e0000;
            padding: 3px 6px;
            margin: 10px 2%;
            border-radius: 6px;
            text-decoration: none;
        }

            #frmTeLlamamos #botonesHoras a:hover,
            #frmTeLlamamos #botonesHoras a.activo {
                transform: scale(1.05);
                box-shadow: #79fb1e 0 0 2px 2px;
            }

            #frmTeLlamamos #botonesHoras a:active {
                transform: scale(0.95);
                box-shadow: #79fb1e 0 0 6px 3px;
            }

    #frmTeLlamamos.popup #botonesHoras {
        justify-content: space-evenly;
    }

    #frmTeLlamamos .checks-tl {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 20px auto;
    }

    #frmTeLlamamos.popup .checks-tl {
        flex-direction: column;
        align-items: center;
        font-size: 20px;
    }

    #frmTeLlamamos .btn-tl {
        text-align: center;
        margin-top: 20px;
    }

    #frmTeLlamamos .condiciones {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 13px auto;
    }

        #frmTeLlamamos .condiciones small {
            padding-top: 3px;
        }

    #frmTeLlamamos.popup .condiciones {
        align-items: flex-start;
    }

        #frmTeLlamamos.popup .condiciones a {
            color: #cb0000;
        }

            #frmTeLlamamos.popup .condiciones a:hover {
                color: #000;
            }

    #frmTeLlamamos:not(.popup) input[type=checkbox],
    #frmTeLlamamos:not(.popup) input[type=radio] {
        cursor: pointer;
        left: -9999px;
        margin: 0;
        padding: 0;
        padding-top: 1px;
        position: absolute;
    }

    #frmTeLlamamos.popup input[type=checkbox],
    #frmTeLlamamos.popup input[type=radio] {
        transform: scale(1.5);
        margin-right: 18px;
        accent-color: #cb0000;
    }

    #frmTeLlamamos label {
        color: #333;
        cursor: pointer;
        margin-bottom: 11px;
        position: relative;
        text-transform: uppercase;
    }

        #frmTeLlamamos label .query {
            background: #ca3e2f;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            height: 15px;
            padding-left: 4px;
            padding-top: 1px;
            position: absolute;
            right: 0px;
            top: 3px;
            width: 15px;
        }

        #frmTeLlamamos label.fk-radio,
        #frmTeLlamamos label.fk-check {
            margin-bottom: 0px;
            text-transform: none;
        }

            #frmTeLlamamos label.fk-radio.checked:before,
            #frmTeLlamamos label.fk-radio:before,
            #frmTeLlamamos label.fk-check.checked:before,
            #frmTeLlamamos label.fk-check:before {
                background: url("../images/formikation-sprite.png") no-repeat -1px 0;
                content: ' ';
                display: inline-block;
                float: left;
                height: 22px;
                margin: 2px 4px 0 0;
                width: 21px;
            }

            #frmTeLlamamos label.fk-radio:before {
                background-position: 0 -22px;
            }

            #frmTeLlamamos label.fk-check:before {
                background-position: 0 0;
            }

            #frmTeLlamamos label.fk-radio.checked:before,
            #frmTeLlamamos label.fk-check.checked:before {
                background-position: -22px -22px;
            }

        #frmTeLlamamos label.check {
            padding: 13px 5px;
        }

        #frmTeLlamamos label.checked.fk-check:before {
            background-position: -23px 0;
            content: '';
        }

        #frmTeLlamamos label input[type=radio]:before,
        #frmTeLlamamos label input[type=checkbox]:before {
            background-position: -21px -20px;
        }

    #frmTeLlamamos .resumen-cita {
        display: flex;
        flex-direction: column;
    }

        #frmTeLlamamos .resumen-cita div {
            display: flex;
            flex-direction: row;
        }

            #frmTeLlamamos .resumen-cita div span:first-child {
                font-size: 22px;
                font-weight: 600;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.17;
                letter-spacing: 0.02px;
                color: #000;
            }

            #frmTeLlamamos .resumen-cita div span:not(:first-child) {
                font-size: 22px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.17;
                letter-spacing: 0.02px;
                color: #cb0000;
                padding-left: 10px;
            }

    #frmTeLlamamos.popup .resumen-cita {
        align-items: center;
    }

    #frmTeLlamamos .btn-atras {
        min-height: 30px;
        font-size: 20px;
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.13px;
        color: #520000;
        pointer-events: auto;
        cursor: pointer;
    }

        #frmTeLlamamos .btn-atras:hover {
            color: #52000094;
        }

        #frmTeLlamamos .btn-atras:active {
            font-size: 18px;
        }

    #frmTeLlamamos .pie-tl {
        font-size: 19px;
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.12px;
        color: #df0000;
        width: max-content;
        margin: 10px 0 0 auto;
    }

    #frmTeLlamamos.popup .pie-tl a {
        text-decoration: none;
        color: #df0000;
    }

        #frmTeLlamamos.popup .pie-tl a:hover {
            color: #000;
        }

#divConfirmacion #divTellamamosOK,
#divConfirmacion #divTellamamosKO {
    font-size: 26px;
    text-align: center;
}

#divConfirmacion .btn-tl {
    text-align: center;
    margin: 18px auto 10px auto;
}

#divConfirmacion.popup {
    max-width: 630px;
    margin: auto;
    padding: 0 20px;
    clear: left;
    font: 0.8em Kanit,Helvetica,Verdana,sans-serif;
}

    #divConfirmacion.popup #divTellamamosOK,
    #divConfirmacion.popup #divTellamamosKO {
        text-align: center;
        font-size: 26px;
        margin-top: 67px;
    }

/*.c2c-fancy .optional {
    display: none;
    margin-top: 20px;
}

.c2c-fancy .checked + .optional {
    display: block;
}

.c2c-fancy .formikation {
    overflow: hidden;
}

.c2c-head {
    font-size: 13px;
}

    .c2c-head:after {
        clear: both;
        content: "";
        display: table;
    }

    .c2c-head img {
        float: left;
        margin: -65px 15px 0 0;
    }

    .c2c-head b {
        color: #ca3e2f;
    }

    .c2c-head .txt_center {
        clear: left;
    }*/
/*POPUP TELLAMAMOS DESDE EMAIL*/
/*.c2c-head-popup {
    font-size: 13px;
}

    .c2c-head-popup:after {
        clear: both;
        content: "";
        display: table;
    }

    .c2c-head-popup img {
        float: left;
    }

    .c2c-head-popup b {
        color: #ca3e2f;
    }

    .c2c-head-popup .txt_center {
        clear: left;
    }*/
@media only screen and (max-width: 850px) {
    #frmTeLlamamos #botonesHoras {
        margin: 0 auto;
    }

        #frmTeLlamamos #botonesHoras a {
            font-size: 16px;
            padding: 3px 2px;
        }
}

@media only screen and (max-width: 767px) {

    #frmTeLlamamos .title-tl b {
        font-size: 25px !important;
        font-weight: bold;
        letter-spacing: 0.03px;
        color: #cb0000;
    }

    #frmTeLlamamos .title-tl {
        font-size: 22.8px !important;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.17;
        letter-spacing: 0.02px;
        color: #000;
        margin-top: 5%;
        text-align:center
    }

    .separador {
        display: block !important;
        height:1px;
        margin-top:20px;
        width:85%;
    }

    #frmTeLlamamos .tlfno {
        justify-content: center;
    }

        #frmTeLlamamos .tlfno b {
            font-weight: 800 !important;
            color: #df0000;
        }

    #frmTeLlamamos .horarios {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items:center;
    }

    #frmTeLlamamos .horarios > .bloqueHorario p:first-child {
        
        font-size: 16.8px;
    }

    #frmTeLlamamos .horarios > .bloqueHorario p:last-child {
        font-size: 15.6px;
        text-align: center;
    }


    .c2c-fancy.fancybox-wrap.fancybox-desktop.fancybox-type-inline.c2c-fancy.fancybox-opened {
        width: 95% !important;
        left: 2.5% !important;
    }

    .c2c-fancy.fancybox-opened .fancybox-skin {
        padding: 30px 4% !important;
    }

    .c2c-fancy .fancybox-inner {
        width: 100% !important;
        overflow: auto !important;
    }

    #frmTeLlamamos .datos-tl {
        flex-direction: column;
    }

        #frmTeLlamamos .datos-tl label {
            margin-bottom: 0;
            margin-top: 12px;
        }

    #frmTeLlamamos:not(.popup) .datos-tl input {
        width: 100%;
    }

    #frmTeLlamamos .checks-tl {
        flex-direction: column;
        margin: 15px 0;
    }

        #frmTeLlamamos .checks-tl div:first-child {
            margin-bottom: 5px;
        }

        #frmTeLlamamos .checks-tl div:not(:first-child) {
            margin-top: 5px;
        }

    #frmTeLlamamos #botonesHoras a {
        width: 29%;
        font-size: 17px;
    }
}

@media only screen and (max-width: 630px) {
    #frmTeLlamamos #botonesHoras a {
        width: 45%;
    }
}

@media only screen and (max-width: 580px) {
    /*.c2c-fancy .ul-green-bullet li {
        display: none;
    }

        .c2c-fancy .ul-green-bullet li:last-child {
            display: block;
            margin-bottom: 18px;
        }*/

    #frmTeLlamamos:not(.popup) .title-tl {
        font-size: 17px;
    }

        #frmTeLlamamos:not(.popup) .title-tl b {
            font-size: 22px;
        }
}

@media only screen and (max-width: 450px) {
    #frmTeLlamamos.popup {
        padding: 0 5px;
    }

    #frmTeLlamamos #botonesHoras a {
        margin: 10px auto;
        font-size: 16px;
    }

    #frmTeLlamamos .pie-tl {
        font-size: 15px;
    }
}

@media only screen and (max-width: 425px) {
    #frmTeLlamamos .tlfno img {
        display: none;
    }

    #frmTeLlamamos .tlfno a {
        font-size: 12vw;
    }
}

@media only screen and (max-width: 375px) {
    #frmTeLlamamos.popup .datos-tl {
        margin: 80px auto 30px auto;
    }

    #frmTeLlamamos:not(.popup) #diaTeLlamamos .flatpickr-calendar {
        width: 100%;
    }

        #frmTeLlamamos:not(.popup) #diaTeLlamamos .flatpickr-calendar .flatpickr-rContainer {
            width: 100%;
        }

            #frmTeLlamamos:not(.popup) #diaTeLlamamos .flatpickr-calendar .flatpickr-rContainer .flatpickr-days {
                width: 100%;
            }

                #frmTeLlamamos:not(.popup) #diaTeLlamamos .flatpickr-calendar .flatpickr-rContainer .flatpickr-days .dayContainer {
                    width: 100%;
                    max-width: 100%;
                    min-width: 100%;
                }

    #frmTeLlamamos #botonesHoras a {
        font-size: 13px;
    }
}

@media only screen and (max-width: 320px) {
    #frmTeLlamamos #botonesHoras a {
        width: 90%;
        font-size: 19px;
    }
}
