/* --------------- NEW STYLE --------------*/
    /* Tipografía */
    @font-face {
        font-family: 'Alexander-Lettering';
        src: url("https://thebeecard.app/_assets/font/Alexander-Lettering.ttf");
    }

    body {font-family: 'Louis-George-Cafe', helvetica;}
    .bee-font {font-family: 'Alexander-Lettering'; font-size: 30pt;}
    .text-share {font-size: 60pt;}
    @media only screen and (max-width: 980px) and (min-width: 300px) {
        .text-share {font-size: 30pt;}
    }

    @media only screen and (max-width: 560px) and (min-width: 280px) {
        header a.logo img {
            max-height: 30px;
        }
    }
    /* Visible Mobile vs PC */
    .mobile {display: none;}
    .desktop {display: inline;}
    @media screen and (max-width: 980px) {
        .mobile {display: inline;}
        .desktop {display: none;}
    }

    /* Tools Bottom Fixed */
    .tools{
        position:fixed;
        bottom: 0;
        height: 1.2em;
        padding: 0.1em;
        color: whitesmoke;
        width: 100%;
        background-color: rgba(0,0,0,0.9);
        z-index: 2000;
        font-size: 5em;
    }

    .tools a, .tools a:active, .tools a:focus {color: #FFF;text-decoration: none;}
    .tools a:hover, .tools a:active{color: #232323;text-decoration: none;}

    .toollogin {left: 1em;position:absolute;}
    .toolshare {right: 1em;position:absolute;}
    @media screen and (max-width: 980px) { .tools{font-size: 3em;} }

/* HEADER CARD */
    .container{padding: 0;}

    header .boxperfil{
        width: 400px;
        height: 400px;
        overflow: hidden;
        border-radius: 50%;
    }

    header #boxbanner{
        width: 100%;
        height: 380px;
        overflow: hidden;
    }

    header #imgbanner{
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% auto;
    }

    .boxperfillist{
        width: 120px;
        height: 120px;
        overflow: hidden;
        border-radius: 50%;
    }

    #imgperfil{width: 100%;height: auto;}
    #shadowbanner {height: 380px;}

    @supports(object-fit: cover){
        #imgperfil{height: 100%;object-fit: cover;object-position: center center;}
        header #imgbanner{height: 100%;object-fit: cover;object-position: center center;}
    }

    .info {text-align: left; vertical-align: top; padding-left: 1em;}
    .cardname {font-size: 5em; line-height: 1em; padding-top: 0.5em;}
    .carddesc {font-size: 2em; line-height: 1.2em; font-weight: lighter; padding-top: 1em;}
    .cardpto {font-size: 3em; line-height: 1.5em; font-weight: lighter;}
    .cardemp {font-size: 4em; line-height: 2.5em; font-weight: lighter;}

    @media only screen and (max-width: 560px) and (min-width: 280px) {
        .info {padding-left: 0;}
        header #boxbanner, #shadowbanner{height: 100px;}
        header .boxperfil{width: 100px; height: 100px ;}
        .cardname {font-size: 1.5em; line-height: 1em; padding-top: 0.2em;}
        .carddesc {font-size: 1em; line-height: 0.9em; font-weight: lighter; padding-top: 0.8em;}
        .cardpto {font-size: 1em; line-height: 1.5em; font-weight: lighter;}
        .cardemp {font-size: 1.5em; line-height: 1em; font-weight: lighter;}
    }
    @media only screen and (max-width: 980px) and (min-width: 560px) {
        header #boxbanner, #shadowbanner{height: 250px;}
        header .boxperfil{width: 280px; height: 280px ;}
        .cardname {font-size: 3em; line-height: 1em; padding-top: 0.2em;}
        .carddesc {font-size: 1.8em; line-height: 1em; font-weight: lighter; padding-top: 0.8em;}
        .cardpto {font-size: 2em; line-height: 1em; font-weight: lighter;}
        .cardemp {font-size: 3em; line-height: 2em; font-weight: lighter;}
    }

/* ICONOS */
    .iconcard, .iconcardsm, .iconcardsh {
        text-decoration: none;
        border-bottom: none;
        width: 10em;
    }
    .iconcard{ padding: 0.5em 1em 0.4em 1em; }
    .iconcardsm, .iconcardsh {padding: 0.5em 1.2em 0.4em 1.2em;}
    .iconadd {opacity: 0.5;}
    .iconcard:hover, .iconcardsm:hover, .iconcardsh:hover {opacity: 0.3; transform: scale(1.4, 1.4); transition: all 0.3s ease 0s;}

    @media only screen and (max-width: 560px) and (min-width: 280px) {
        .iconcard { width: 8em; padding: 1em 2.2em 0.8em 2.2em;}
        .iconcardsm { width: 9em; padding: 1em 2.2em 0.8em 2.2em;}
        .iconcardsh { width: 6em; padding: 0.5em 1em 0.4em 1em;}
        .iconcard:hover, .iconcardsm:hover, .iconcardsh:hover {opacity: 0.9; transform: none; transition: none;}
    }

    .oculto{ display: none;}

    /* Mensajes */
    .modalmsj {
        display: inline-block;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 100000;
        background-color: rgb(39, 39, 51, 0.4);
    }

    .containermsj {
        position: relative;
        top: 40%;
        width:60%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
        vertical-align: middle;
        padding: 0.5em;
        max-width: 600px;
        min-height: 200px;
        max-height: 400px;
        border-radius: 1em;
    }

    .button-close {
        color: #707070;
        float: right;
    }

    .button-close:hover, .button-close:focus {
        color: #f0f0f0;
        text-decoration: none;
        cursor: pointer;
    }

    .txt_success {
        padding: 0.5em 1.5em 1em 1em;
        color: #4F8A10;
        background-color: #DFF2BF;
        text-align: center;
    }

    .txt_error {
        padding: 0.5em 1.5em 1em 1em;
        color: #D8000C;
        background-color: #FFBABA;
        text-align: center;
    }

    .txt_comment {
        padding: 0.5em 1.5em 1em 1em;
        color: gray;
        background-color: #e5e7e9;
        text-align: center;
    }

    .txtCenter{ text-align: center;}
    .txtRight{ text-align: right; padding-right: 1em;}
    .txtLeft{ text-align: left;}

    @media screen and (max-width: 980px) {
        .txtCenter, .txtRight, .txtLeft{ text-align: center; padding-right: 0;}
    }

    /* Mapa Google */
    #map-canvas{height: 400px; width: 100%;}
    @media screen and (max-width: 980px) {
        #map-canvas{height: 200px;}
    }

/* Tables */
    table {
        width:100%;
        margin: 0 auto;
        text-align: center;
        vertical-align: middle;
    }

    tbody td {
        padding: 0.4em 0.3em 0.2em 0.3em;
        vertical-align: middle;
    }

    tbody th {padding: 1em;}

    .tblRelations {width:70%;}
    @media screen and (max-width: 980px) {
        .padding-100px-lr{padding: 0;}
        .tblRelations {width:80%;}
        .tblResponsive { width:100%; text-align: center;}
        .tblResponsive thead {display: none;}
        .tblResponsive tr:nth-of-type(2n) {background-color: inherit;}
        .tblResponsive td {
            padding: 0.2em 0 0 0;
            display: block;
            text-align:center;
            width:100%;
        }
        .tblResponsive td:before {
            content: attr(data-th);
            display: block;
            text-align:center;
        }
        .tblResponsive th {padding: 0;}
    }

    /* Input´s de Texto */
    input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
        font-size: 16px;
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: border-color 0.2s ease-in-out;
        -webkit-transition: border-color 0.2s ease-in-out;
        -ms-transition: border-color 0.2s ease-in-out;
        transition: border-color 0.2s ease-in-out;
        border-radius: 4px;
        border: solid 1px #393939;
        outline: 0;
        padding: 0.8em 1em 0.6em 1em;
        text-decoration: none;
        color: #2B2B2B;
    }
    .xl{ width: 90%;}
    .ch{ width: 5em;}

    @media screen and (max-width: 980px) {
        input-med, input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
            max-width: 16em;
        }
        .xl{ width: 16em;}
    }

    input[type="text"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, select:disabled, textarea:disabled {
        box-shadow: none;
        background-color: dimgray;
        color: #d3d4d4;
    }

    input[type="radio"]:disabled + label{
        background-color: dimgray;
        color: #d3d4d4;
        cursor: not-allowed;
    }

    input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
        border-color: #fea520;
    }

    input[type="checkbox"] + label, input[type="radio"] + label {
        text-decoration: none;
        color: #2B2B2B;
        cursor: pointer;
        display: inline-block;
        font-weight: 100;
        padding-left: 10px;
        position: relative;
    }

    input[type="checkbox"]:checked, input[type="radio"]:checked {
        color: #2B2B2B;
    }

    /* Pop Up */
    .cerrar {float: right; cursor: pointer; color: #202326;}
    .cerrar:hover, .icon:hover, .iconrs:hover, .iconsh:hover {
        color: #555555 !important;
        border-bottom-color: transparent;
    }
    .modalGral {
        display: none;
        position: fixed;
        text-align: center;
        z-index: 50000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.6);
    }
    .contentSmall, .contentMedium, .contentLarge {
        margin: auto;
        overflow-y: scroll;
        max-height: 100%;
        max-width: 100%;
        text-align: center;
        background-color: whitesmoke;
        padding-bottom: 2em;
    }
    .contentSmall {margin-top: 6em; width: 50%;}
    .contentMedium {margin-top: 4em; width: 60%;}
    .contentLarge {margin-top: 1em; width: 80%;}
    #imgqr {width: 40%;}

    @media screen and (max-width: 980px) {
        #imgqr {width: 70%;}
        .contentSmall, .contentMedium, .contentLarge {width: 96%; max-width: 98%;}
    }

/* RADIO CHECK-BOX */
    .common {
        position: relative;
        vertical-align: middle;
        text-align: left;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        font-size: 1.2em;
    }

    .common input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkmark, .radiomark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    .radiomark {border-radius: 50%;}
    .common input:checked ~ .checkmark, .common input:checked ~ .radiomark {background-color: #fea520;}
    .common input:checked ~ .radiomark:checkmark, .common input:checked ~ .radiomark:after {display: block;}
    .checkmark:after, .radiomark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .common .checkmark:after, .common .radiomark:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }


    /* Publicidad */
    .slideshow {width: 100%; text-align: center;}

    .boxSlide{
        width: 980px;
        height: 200px;
        overflow: hidden;
        position: relative;
        padding: 1em 0 2em 0;
    }

    .boxSlideDet{
        width: 700px;
        height: 143px;
        overflow: hidden;
        position: relative;
    }

    .mySlides {display: none;}

    @media screen and (max-width: 980px) {
        .boxSlide {width: 280px; height: 67px;}
    }

    .imgpub{
        text-align: center;
        vertical-align: middle;
        width: 100%;
        height: auto;
    }

    .fadeotro {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
    }

    @keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
    }