@charset "utf-8"; /* // Unicode */
/*@charset 'iso-8859-15'; // Latin-9 (idiomas de Europa Occidental, con símbolo de euro)*/ 

/* * * * * * * * * * * * * * * * * */
/* * * * * * * FUENTES * * * * * * */
/* * * * * * * * * * * * * * * * * */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* FONT LOCAL */
@font-face {
    font-family: 'Lato';
    src: url(/public/fonts/Lato/Lato-Regular.ttf);
}

@font-face {
    font-family: 'Edwardian-Script-ITC';
    src: url(/public/fonts/Edwardian-Script-ITC.ttf);
}
 
/* * * * * * * * * * * * * * * * * * */
/* * * * * * * VARIABLES * * * * * * */
/* * * * * * * * * * * * * * * * * * */

:root {
    --color-body: #222222;


    /* colors */	
    --color-body: #222222;
    /*--bg-color-body: #F8F8F8;*/
	/*--bg-color-body: #f7f7f7;*/
    --bg-color-body: #fafafc;
    

	--color-mark: #000000;
	--bg-mark: #ff0;
	
	/* COLOR OK */
	--color-scroll-track: #dddee0;
	--color-scroll-thumb: rgba(0, 0, 0, 0.5);
	/* COLOR SOLICITADO */
	/*--color-scroll-track: #dddee0;*/
	/*--color-scroll-thumb: #bcbdc0;*/

	/* - - - colors - - - */
    --white-color: #FFFFFF;

	--primary-500: #691C32;
	--secondary-500: rgba(247, 247, 247, 0.8);
	--success-500: #00b090;
	--warning-500: #F6C108;
	--danger-500: #DA2810;
	--info-500: #0084FF;

	--primary-400: #27368f;
	--secondary-400: #dddee0;
	--success-400: #88ed94;
	--warning-400: #ede888;
	--danger-400: #ed9488;
	--info-400: #88bfed;

	--text-input: #5F5F5F;
	--text-placeholder1: #bcbdc0;
	--text-placeholder: #707070;
	--text-muted: #6c757d;
	--text-dark: #222222;
	--text-white: #ffffff;
    --text-success: #00b090;

	--bg-black-100:rgba(53, 53, 53, .9);
	--bg-ficha: #444242;

	--cl-primary: #ffffff;
	--cl-secondary: #222222;
	--cl-success: #ffffff;
	--cl-warning: #222222;
	--cl-danger: #ffffff;
	--cl-info: #ffffff;

    /* - - - FontSize - - - */

    --fs-1: clamp(1.00rem, calc(0.98rem + 0.13vw), 1.13rem);
    --fs-2: clamp(1.25rem, calc(1.20rem + 0.25vw), 1.50rem);
    --fs-3: clamp(1.56rem, calc(1.48rem + 0.44vw), 2.00rem);
    --fs-4: clamp(1.95rem, calc(1.81rem + 0.71vw), 2.66rem);
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * SCROLL BAR  * * * * * */
/* * * * * * * * * * * * * * * * * */

::-webkit-scrollbar{
    width: 11px;
    background-color: var(--scroll-bar-color);
}
::-webkit-scrollbar-thumb{
    width: 100%;
    background-color: var(--scroll-thumb-color);
    border-radius: 2em;
}
::-webkit-scrollbar-thumb:hover{
    background-color: var(--scroll-thumb-hover-color);
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * CORE * * * * * *  */
/* * * * * * * * * * * * * * * * * */

*, *:before, *:after {
    outline: none;
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box;
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;

    /* list-style: none; */
    /* list-style-type: none;*/
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Scroll FireFox */
    scrollbar-width: thin;
    /*scrollbar-color: rgba(0, 0, 0, 0.5) rgb(0, 0, 0, 0.1);*/
    scrollbar-color: rgba(0, 0, 0, 0.1) rgb(234, 234, 234);
}
html {
    height: 100%;
    font-size: 100%;
    box-sizing: inherit;
    scroll-behavior: smooth;
}
body {
    /* padding: var(--fs-3); */
    
    margin: 0;
    padding: 0;
    /*font-family: 'Lato';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: normal; 
    font-style: normal;
    opacity: 1;

    background-color: var(--bg-color-body);	
    color: var(--color-body); 
    
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 

    position: relative;
}

/* - - - Responsve Fonts - - - */

h1{
    font-size: var(--fs-4);
    line-height: 1.2;
}
h2{
    font-size: var(--fs-3);
    line-height: 1.3;
}
h3{
    font-size: var(--fs-2);
    line-height: 1.4;
}
p{
    font-size: var(--fs-1);
    line-height: 1.5;
    text-align: justify;
}

a {
	color: inherit; 
	outline:none; 
	text-decoration:none; 
	line-height:inherit
}
a:hover { 
	text-decoration:none;
	cursor:pointer
}

main{
    /* width: 100%; */
    margin: 0 auto;
}
.io{
    display: block;
}
.ea {
    margin: 0;
    padding: 0 15%;
    width: 100%;
    position: relative;
    z-index: 1;
}
.ea_ {
    margin: 0;
    padding: 0 25%;
    width: 100%;
    position: relative;
    z-index: 1;
}
.ae{
    margin: 0;
    padding: 0 20%;
    width: 100%;
    position: relative;
    z-index: 1;
}
@media (max-width: 1200px) { .ae { padding: 0 7%;} }
@media (max-width: 992px) { .ae { padding: 0 7%; } }
@media (max-width: 768px) { .ae { padding: 0 7%; } }
@media (max-width: 576px) { .ae { padding: 0 7%; } }

.stick-filter { position: sticky; top: 60px; z-index: 3; margin: 0 auto; }
@media only screen and (max-width:567px) {
    main { padding: 0; }
    .ea, .ea_ { padding: 0 7%; }
}

/* --- Progress Bar --- */

#progoverlay{
	position:fixed;
	z-index:99999;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background: rgba(95, 27, 45, 0.9);
	transition: 1s 0.4s;
}
#progress{
	height: 0.2rem;
	border: 0.01rem solid var(--warning-500);
	background: var(--warning-500);
	position:absolute;
	width:0;
	top:50%;
}
#progstat{
	font-size:1em;
	letter-spacing: 3px;
	position:absolute;
	top:50%;
	margin-top:-250px;
	width:100%;
	text-align:center;
	font-weight: 700;
	color:#fff;
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * COLORES * * * * * */
/* * * * * * * * * * * * * * * * * */

.bg-primary { background-color: var(--primary-500) !important; }
.bg-secondary { background-color: var(--secondary-500) !important; }
.bg-success { background-color: var(--success-500) !important; }
.bg-warning { background-color: var(--warning-500) !important; }
.bg-danger { background-color: var(--danger-500) !important; }
.bg-info { background-color: var(--info-500) !important; }
.bg-white { background-color: var(--white-color) !important;}
.bg-body { background-color: var(--bg-color-body) !important;}

.bg-primary-400 { background-color: var(--primary-400) !important; }
.bg-secondary-400 { background-color: var(--secondary-400) !important; }
.bg-success-400 { background-color: var(--success-400) !important; }
.bg-warning-400 { background-color: var(--warning-400) !important; }
.bg-danger-400 { background-color: var(--danger-400) !important; }
.bg-info-400 { background-color: var(--info-400) !important; }

.bg-primary, .bg-primary > a, .bg-primary-400 > a { color: var(--cl-primary) !important; }
.bg-secondary, .bg-secondary > a, .bg-secondary-400 > a { color: var(--cl-secondary) !important; }
.bg-success, .bg-success > a, .bg-success-400 > a { color: var(--cl-success) !important; }
.bg-warning, .bg-warning > a, .bg-warning-400 > a { color: var(--cl-warning) !important; }
.bg-danger, .bg-danger > a, .bg-danger-400 > a { color: var(--cl-danger) !important; }
.bg-info, .bg-info > a, .bg-info-400 > a { color: var(--cl-info) !important; }

.text-primary { color: var(--primary-500) !important;}
.text-secondary { color: var(--secondary-500) !important;}
.text-success { color: var(--success-500) !important;}
.text-warning { color: var(--warning-500) !important;}
.text-danger { color: var(--danger-500) !important;}
.text-info { color: var(--info-500) !important;}

.text-white{ color: var(--white-color) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-muted { color: var(--text-muted) !important;}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * HELPERS * * * * * * */
/* * * * * * * * * * * * * * * * * */

.hidden { display: none !important; }
.flex { display: flex !important;}
.sticky { position: sticky !important; }
.fixed { position: fixed !important; }

.float-right { float: right !important; }
.float-left { float: left !important; }

.inline-block *{ display: inline-block !important;}

.font-200 {font-weight: 200 !important; }
.font-300 {font-weight: 300 !important; }
.font-400 {font-weight: 400 !important; }
.font-600 {font-weight: 600 !important; }
.font-800 {font-weight: 800 !important; }

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; text-align-last: center !important; }

.mb-0 { margin-bottom: 0px !important; }
.mt-0 { margin-top: 0px !important; }
.ml-0 { margin-left: 0px !important; }
.mr-0 { margin-right: 0px !important; }
.mx-0 { margin-right: 0px !important; margin-left: 0px !important; }
.my-0 { margin-top: 0px !important; margin-bottom: 0px !important; }

.mb-1 { margin-bottom: 10px !important; }
.mt-1 { margin-top: 10px !important; }
.ml-1 { margin-left: 10px !important; }
.mr-1 { margin-right: 10px !important; }
.mx-1 { margin-right: 10px !important; margin-left: 10px !important; }
.my-1 { margin-top: 10px !important; margin-bottom: 10px !important; }

.mb-2 { margin-bottom: 20px !important; }
.mt-2 { margin-top: 20px !important; }
.ml-2 { margin-left: 20px !important; }
.mr-2 { margin-right: 20px !important; }
.mx-2 { margin-right: 20px !important; margin-left: 20px !important; }
.my-2 { margin-top: 20px !important; margin-bottom: 20px !important; }

.mb-3 { margin-bottom: 3rem !important; }
.mt-3 { margin-top: 3rem !important; }
.ml-3 { margin-left: 3rem !important; }
.mr-3 { margin-right: 3rem !important; }
.mx-3 { margin-right: 3rem !important; margin-left: 3rem !important; }
.my-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.mb-4 { margin-bottom: 4rem !important; }
.mt-4 { margin-top: 4rem !important; }
.ml-4 { margin-left: 4rem !important; }
.mr-4 { margin-right: 4rem !important; }
.mx-4 { margin-right: 4rem !important; margin-left: 4rem !important; }
.my-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

.mb-5 { margin-bottom: 5rem !important; }
.mt-5 { margin-top: 5rem !important; }
.ml-5 { margin-left: 5rem !important; }
.mr-5 { margin-right: 5rem !important; }
.mx-5 { margin-right: 5rem !important; margin-left: 5rem !important; }
.my-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; }

.ma{ margin: auto !important; }

.pr-5 { padding-right: 50px !important; }

.pb-0 { padding-bottom: 0px !important; }
.pt-0 { padding-top: 0px !important; }
.pl-0 { padding-left: 0px !important; }
.pr-0 { padding-right: 0px !important; }
.px-0 { padding-right: 0px !important; padding-left: 0px !important; }
.py-0 { padding-top: 0px !important; padding-bottom: 0px !important; }

.pb-1 { padding-bottom: 1rem !important; }
.pt-1 { padding-top: 1rem !important; }
.pl-1 { padding-left: 1rem !important; }
.pr-1 { padding-right: 1rem !important; }
.px-1 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.pb-2 { padding-bottom: 2rem !important; }
.pt-2 { padding-top: 2rem !important; }
.pl-2 { padding-left: 2rem !important; }
.pr-2 { padding-right: 2rem !important; }
.px-2 { padding-right: 2rem !important; padding-left: 2rem !important; }
.py-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

.pb-3 { padding-bottom: 3rem !important; }
.pt-3 { padding-top: 3rem !important; }
.pl-3 { padding-left: 3rem !important; }
.pr-3 { padding-right: 3rem !important; }
.px-3 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.p80 { padding: 0px 80px !important; }
.mx40 { margin: 40px 0 !important; } 

/* - - - HR - - -  */
hr.titulo {
    margin: 1rem;
    color: rgba(236, 236, 241, 0.3);
}
/* - - - HR - - -  */

.hrtext {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15px 0px;
}
.hrtext p {
    font-size: 1rem;
    color: #1d76e8;
    font-family: 'Roboto Condensed', sans-serif;
    flex-grow: 0;
    font-weight: 900;
    text-transform: uppercase;
}
.hrtext h2 {
    font-size: 2rem;
    color: var(--primary-500);
    font-family: 'Roboto Condensed', sans-serif;
    flex-grow: 0;
    font-weight: 600;
}
.headerhr {
    flex-grow: 1;
    height: 2px;
    margin: 0 0 0 0.8rem;
    background-color: rgba(236, 236, 241, 0.6);
}

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

.text-sub{
    font-size: 4rem;
    font-weight: 700;
    /* opacity: 0.1; */
    color: #F6C108;
    /* margin-bottom: -1.5rem; */
}
@media only screen and (max-width:567px) { .text-sub{ font-size: 2.3rem; } }

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

/* * * * * * * * * * * * * * * * * */
/* * * * * * * PASSWORD  * * * * * */
/* * * * * * * * * * * * * * * * * */

.password-field {
    position: relative;
}
.password-field #toggler {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.confirm-password-field {
    position: relative;
}
.confirm-password-field #toggler-2 {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.eye::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.eye-slash::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22'/%3E%3C/svg%3E"); }

.eye-2::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.eye-2-slash::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22'/%3E%3C/svg%3E"); }

.extra-password-field {
    position: relative;
}
.extra-password-field #toggler-3{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.eye-3::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.eye-3-slash::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22'/%3E%3C/svg%3E"); }

/* * * * * * * * * * * * * * * * * */
/* * * * * * BACK TO TOP * * * * * */
/* * * * * * * * * * * * * * * * * */
.backToTop-wrapper {
    width: 3em;
    position: absolute;
    top: 100vh;
    right: 87px;
    bottom: 0px;
    pointer-events: none;
    z-index: 5;
}
.backToTop-link {
    position: sticky;
    pointer-events: all;
    top: calc(100vh - 3.5rem);
    display: inline-block;
    text-decoration: none;
    font-size: 30px;
    text-align: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgba(38, 49, 111, 0.1);
    background-color: rgba(38, 49, 111, 1);
    backdrop-filter: blur(5px);
    transition: transform 80ms ease-in;
}
.backToTop-link:hover, .backToTop-link:focus {
    transform: scale(1.05);
    background-color: #26316F;
    border: 1px solid #26316F;
    color: #fff;
}
.backToTop-link:hover svg, .backToTop-link:focus svg { color: #fff; }
.backToTop-link:focus { outline: none; }
.backToTop-link svg{ transform: rotate(-90deg); color: #FFF; }
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
@media only screen and (max-width:567px) {
    .backToTop-wrapper {
        right: 17px;
    }
    .backToTop-link{
        top: calc(100vh - 7rem);
    }
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * COPY TEXT * * * * * */
/* * * * * * * * * * * * * * * * * */
.copy-text {
    position: relative;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    display: flex;
}
.copy-text input.text {
    padding: 0px;
    font-size: 32px;
    color: #364fd8;
    border: none;
    outline: none;
    font-weight: bold;
    text-align: center;
}
.copy-text svg {
    width: 50px;
    height: 50px;
    padding: 10px;
    color: #364fd8;
    margin: auto;
}
#copy_alert {
    visibility: hidden;
    height: 50px;
    width: 200px;
    margin: auto;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    color: white;
    border-radius: 7px;
    position: fixed;
    z-index: 1;
    bottom: 70px;
    font-size: 12px;
    left: 0;
    right: 0;
}
#copy_alert p{
    text-align: center;
    margin: 10px;
}
#copy_alert.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
    from {
        bottom: 50px;
        opacity: 0;
    }
    to {
        bottom: 70px;
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        bottom: 70px;
        opacity: 1;
    }
    to {
        bottom: 50px;
        opacity: 0;
    }
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * NAV BAR * * * * * * */
/* * * * * * * * * * * * * * * * * */

.amcp-puebla img{ height: 75px; }
.amcp-puebla h1{ color: #F6C108; line-height: 1.1rem; }
.amcp-puebla h1 small{ font-size: 50%;}

.navbar{
    /*background: rgba(255, 255, 255, 0.5);*/
    /*background-color: #26316F;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    height: 75px; /**/
    margin: 0 auto;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 10px;
}
.navbar.secondary{
    position: sticky !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    height: auto !important;
    top: -1px;
    overflow-x: scroll;
    scrollbar-width: none;
    z-index: 4;

}
.navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar-nav.right { margin-left: auto; }
.navbar-nav.left { margin-right: auto; }
.nav-link{
    display: flex;
    align-items: center;
    position: relative;
    color: rgba(255,255,255,.8);
    padding: .875rem 1rem;
    transition: all ease-in-out .15s;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
}
.nav-link svg{ margin-right: .625rem !important; }

@media only screen and (max-width:567px) {
    .navbar{
        padding-left: 2%;
        padding-right: 2%;
    }
    .navbar.secondary{
        padding-left: 10%;
        padding-right: 10%;
    }
    .nav-link { padding: .875rem 0.7rem; }
    .nav-link span { display: none; }
    /* - - - - */
    .nav-icon img.logo-small{
        display: block;
    }
    .nav-icon img.logo-big{
        display: none;
    }
    a.login-big{ display: none; }
    a.login-small{ display: flex; }
}

/* - - - */
.nav-sticky{
    position: sticky !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    top: -1px;
    /*overflow-x: scroll;*/
    scrollbar-width: none;
    z-index: 4;
    background-color: rgba(38, 49, 110, 0.95);
    backdrop-filter: blur(10px);
}
.nav-sticky .nav-link svg{ color: #FFF;}
.btn-login-sm{ display: none; }
@media only screen and (max-width:567px) {
    .btn-login-sm{ display: none !important; }
    /* .btn-login{ display: block !important; } */
}

/* - - - */

/* * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * *  MENU SECONDARY * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * */
.brand { display: flex; margin-right: 50px; }
.menu {
    position: fixed;
    left: 0;
    bottom: 0;
    display: grid;
    align-content: center;
    width: 100%;
    height: 3.5rem;
    border-top: 1px solid #ccc;
    background: #FFF;
}
.menu ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style-type: none;
}
.menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    color: rgba(0,0,0,0.5);
}
.menu-link.is-active {
    position: relative;
    color: rgba(0,0,0,0.7);
    transition: all 0.35s ease;
}
.menu-link.is-active .menu-name {
    font-weight: bold;
}
.menu-name {
    display: none;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    visibility: hidden;
    text-transform: capitalize;
}
.menu-icon {
    font-size: 1.35rem;
    line-height: 1;
    color: inherit;
}
.header{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 6;
    background: #fff;
}
/* - - - MEDIA - - - */
@media only screen and (min-width: 360px) {
    .menu-name {
        display: block;
        visibility: visible;
    }
}
@media only screen and (min-width: 576px) {
    .menu ul {
        justify-content: center;
        -moz-column-gap: 3rem;
            column-gap: 3rem;
    }
}
@media only screen and (min-width: 768px) {
    /* .brand{ display: none; } */
    .header {
        background: #fff;
        box-shadow: var(--shadow-medium);
        transition: all 0.35s ease-in-out;
        z-index: 2;
    }
    .menu {
        position: relative;
        top: 0;
        right: 0;
        width: auto;
        height: auto;
        background: none;
        box-shadow: none;
        border: none;
    }
    .menu-link{
        flex-direction: unset;
        align-items: unset;
        justify-content: unset;
    }
    .menu-link.is-active::before {
        position: absolute;
        content: "";
        left: 0;
        bottom: -9px;
        width: 110%;
        height: 2px;
        border: none;
        outline: none;
        background: var(--primary-500);
    }
    .menu-link:hover {
        color: var(--primary-500);
        transition: all 0.35s ease;
    }
    .menu-link svg{
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .menu-icon {
        display: none;
        visibility: hidden;
    }
    .menu-name {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 0.2rem;
    }
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * * FORM  * * * * * */
/* * * * * * * * * * * * * * * * * */
label {
    color: #464646;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0;
    padding-left: 0.2rem;
    padding-bottom: .2rem;
    display: flex;
    text-align: left;
}



.form-control {
    display: block;
    width: 100%;
    font-size: 0.96rem;
    font-weight: 400;
    line-height: 1.25;
    background-clip: padding-box;
    
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -moz-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    color: #5F5F5F;
    /*
    border: 0px solid #ececf1ff;
    background-color: rgba(236, 236, 241, 0.7);
    */
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #fff;
    /*background-color: #fafafa;*/
    border-radius: 5px;
    -webkit-appearance: none;
    outline: none;    
    padding: 0.7rem;
    pointer-events: auto;

}
.form-control.s{
    border: 1px solid rgba(121, 121, 121, 0.1);
    background-color: rgba(121, 121, 121, 0.1);
}
 /*
.form-control:focus{
   
    border: 1px solid rgb(221, 221, 221);
    background-color: #fafafa;
    
    -webkit-box-shadow: 0 10px 15px -8px rgba(23, 110, 241, 0.2);
    box-shadow: 0 10px 15px -8px rgba(23, 110, 241, 0.2);
}*/

/* - - - - - - - */

input:disabled { background: #bcbdc0; }
/*.form-control.regular:disabled { background: #ccc; }*/

/* input group */
.input-group {
    display: flex;
    align-content: stretch;
    border: 1px solid rgba(0,0,0,0.2);
}
.input-group > input { flex: 1 0 auto; }
/* para etiquetas o elementos antes del input */
.input-group input{ width: 40%; padding: 0; border-radius: 0px; font-weight: bold; background-color: rgba(236, 236, 241, 0.7);}
.input-group-addon {
    background: #eee;
    color: rgba(0,0,0,0.9);
    border: 0px solid #ececf1ff;
    background-color: rgba(236, 236, 241, 0.7);
    padding: 10px;
}
.input-group .btn{ height: 36px;   min-width: auto;}
                                
/* * * * * * * * * * * * * * * * * */
/* * * * * * * * * GRID  * * * * * */
/* * * * * * * * * * * * * * * * * */

.container { 
	/*max-width:1190px;*/
	width:100%;
	margin:0 auto;
	/*padding: 0px 10px;*/

	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkicol-sm-box-sizing:border-box
}

.row {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkicol-sm-box-sizing:border-box; 
}
.row > div {
	/* separación entre col*/
    /*
	margin: 5px 0px;
	padding: 2px 10px;
    */
    margin: 15px 0px;
	padding: 2px 15px;
}
.row::after, .row::before { 
	content:''; 
	display:table; 
}
.row:after {
	clear: both;
}

[class*="col-md-"],[class*="col-sm-"],[class*="col-xs-"] {
	float:left;
	padding: 0 10px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkicol-sm-box-sizing:border-box;
	/* background:#FF7F50; */
	background-color: transparent;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 
	padding:5px 10px;
}
/*Large Desktop Screen*/
.col-lg-1 {width:8.3333%} 
.col-lg-2 {width:16.6667%}
.col-lg-3 {width:25%}
.col-lg-4 {width:33.3333%}
.col-lg-5 {width:41.6667%}
.col-lg-6 {width:50%}
.col-lg-7 {width:58.3333%}
.col-lg-8 {width:66.6667%}
.col-lg-9 {width:75%}
.col-lg-10 {width:83.3333%}
.col-lg-11 {width:91.6667%}
.col-lg-12 {width:100%}
/*Desktop Screen*/
.col-md-1 {width:8.3333%} 
.col-md-2 {width:16.6667%}
.col-md-3 {width:25%}
.col-md-4 {width:33.3333%}
.col-md-5 {width:41.6667%}
.col-md-6 {width:50%}
.col-md-7 {width:58.3333%}
.col-md-8 {width:66.6667%}
.col-md-9 {width:75%}
.col-md-10 {width:83.3333%}
.col-md-11 {width:91.6667%}
.col-md-12 {width:100%}
/* Mobile and Tablet Screen */
/*.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { width:100%;}*/
.col-xs-1 {width:8.3333%}
.col-xs-2 {width:16.6667%}
.col-xs-3 {width:25%}
.col-xs-4 {width:33.3333%}
.col-xs-5 {width:41.6667%}
.col-xs-6 {width:50%}
.col-xs-7 {width:58.3333%}
.col-xs-8 {width:66.6667%}
.col-xs-9 {width:75%}
.col-xs-10 {width:83.3333%}
.col-xs-11 {width:91.6667%}
.col-xs-12 {width:100%}

/* --- Media Query Responsive Grid  --- */
/*Mobile Version*/
@media only screen and (min-width:567px) {

}

/*Tablet Verion*/
@media only screen and (min-width:767px) {	
.col-sm-1 {width:8.3333%}
.col-sm-2 {width:16.6667%}
.col-sm-3 {width:25%}
.col-sm-4 {width:33.3333%}
.col-sm-5 {width:41.6667%}
.col-sm-6 {width:50%}
.col-sm-7 {width:58.3333%}
.col-sm-8 {width:66.6667%}
.col-sm-9 {width:75%}
.col-sm-10 {width:83.3333%}
.col-sm-11 {width:91.6667%}
.col-sm-12 {width:100%}
}

/*Desktop Version */
@media only screen and (min-width:1023px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { padding:15px;}
.col-md-1 {width:8.3333%} 
.col-md-2 {width:16.6667%}
.col-md-3 {width:25%}
.col-md-4 {width:33.3333%}
.col-md-5 {width:41.6667%}
.col-md-6 {width:50%}
.col-md-7 {width:58.3333%}
.col-md-8 {width:66.6667%}
.col-md-9 {width:75%}
.col-md-10 {width:83.3333%}
.col-md-11 {width:91.6667%}
.col-md-12 {width:100%}	
}
/*Extra Desktop*/
@media only screen and (min-width:1170px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {padding:20px;}
.col-lg-1 {width:8.3333%} 
.col-lg-2 {width:16.6667%}
.col-lg-3 {width:25%}
.col-lg-4 {width:33.3333%}
.col-lg-5 {width:41.6667%}
.col-lg-6 {width:50%}
.col-lg-7 {width:58.3333%}
.col-lg-8 {width:66.6667%}
.col-lg-9 {width:75%}
.col-lg-10 {width:83.3333%}
.col-lg-11 {width:91.6667%}
.col-lg-12 {width:100%}	
}

/* --- IMAGEN --- */
.rounded-lg {
	border-radius: 0.6rem !important;
  width: 100%;
}
.img-fluid {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border-style: none;
}
.img-rounded{
	box-shadow: 1px 3px 5px rgba(133, 133, 133, 0.5);
	width: 60px;
	height: 60px;
	border-radius: 50%;
}


/* * * * * * * * * * * * * * * * * */
/* * * * * * * TOOLTIP * * * * * * */
/* * * * * * * * * * * * * * * * * */

/* --- Tooltip Help --- */
.nav-links .profile-details .tooltipHelp {
	position: absolute;
	width: 10rem;
	height: 8rem;
	opacity: 0;
	pointer-events: none;
	bottom: 70px;
	left: 2.5rem;
	transition: 0.3s ease;
	transform: scale(0);
	transform-origin: bottom left;
}
.nav-links .profile-details .tooltipHelp .content {
	position: relative;
	width: 100%;
	height: calc(100% - 20px);
	box-shadow: 0px 0px 40px rgba(0,0,0,0.3);
	background-color: var(--bg-black-100);
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;
}
.nav-links .profile-details .tooltipHelp svg
{
	color: #ffffff;
	font-size: 80px;
	width: 80px;
	height: 80px;
}
.nav-links .profile-details .tooltipHelp p
{
	color: #ffffff;
	font-size: 15px;
}
.nav-links .profile-details .tooltipHelp .content::before
{
	content: '';
	position: absolute;
	bottom: -20px;
	left: -2px;
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-right: 15px solid var(--bg-black-100);
	transform: rotate(45deg);
}
.nav-links .profile-details:hover .tooltipHelp
{
	pointer-events: all;
	opacity: 1;
	transform: scale(1);
}

/* * * * * * * * * * * */
em {
    color: #959595;
    font-style: italic;
    }
    .tooltip {
    display: inline;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    perspective: 500px;
    }
    .tooltip:hover {
    cursor: pointer;
    }
    .tooltip:hover .tooltip__content {
    -webkit-transform: translate3d(-50%, -10%, 0);
    -moz-transform: translate3d(-50%, -10%, 0);
    -ms-transform: translate3d(-50%, -10%, 0);
    -o-transform: translate3d(-50%, -10%, 0);
    transform: translate3d(-50%, -10%, 0);
    opacity: 1;
    pointer-events: auto;
    }
    .tooltip__content {
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    transition: all 200ms ease;
    -webkit-transform: translate3d(-50%, 0%, 0);
    -moz-transform: translate3d(-50%, 0%, 0);
    -ms-transform: translate3d(-50%, 0%, 0);
    -o-transform: translate3d(-50%, 0%, 0);
    transform: translate3d(-50%, 0%, 0);
    -webkit-transform-origin: 0 10px;
    -moz-transform-origin: 0 10px;
    -ms-transform-origin: 0 10px;
    -o-transform-origin: 0 10px;
    transform-origin: 0 10px;
    background-color: #fff;
    box-shadow: 0px 0px 205px #253786;
    border-radius: 4px;
    color: #2f2f2f;
    display: block;
    font-size: 14px;
    font-weight: normal;
    opacity: 0;
    padding: 10px 20px;
    pointer-events: none;
    position: absolute;
    text-align: left;

    }
    .tooltip__content:before {
    border-color: transparent;
    border-top-color: #fff;
    border-style: solid;
    border-width: 10px;
    content: " ";
    display: block;
    height: 0;
    margin-left: -10px;
    position: absolute;
    width: 0;
    }

    /* left */
    .tooltip__content.left { left: -146px; width: 250px; top: -100px;}
    .tooltip__content.left:before { left: 104%; transform: rotate(-90deg);top: 150px; }
    /* top */
    .tooltip__content.top { width: 250px; bottom: 100%; left: 50%; }
    .tooltip__content.top:before { left: 50%; bottom: -20px; }

    .tooltip__content:after {
    content: " ";
    display: block;
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    }
    .tooltip__content:hover {
    -webkit-transform: rotateX(0deg) translate3d(-50%, -10%, 0);
    -moz-transform: rotateX(0deg) translate3d(-50%, -10%, 0);
    -ms-transform: rotateX(0deg) translate3d(-50%, -10%, 0);
    -o-transform: rotateX(0deg) translate3d(-50%, -10%, 0);
    transform: rotateX(0deg) translate3d(-50%, -10%, 0);
    opacity: 1;
    pointer-events: auto;
    }

    /* --- ToolTip General --- */
    .tooltip {
        position: relative;
        display: inline-block;
    }

    .tooltip-container::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
    }

    /* Tooltip arrow */
    .tooltip-container.on-left {
    top: -5px;
    bottom: auto;
    right: 128%;
    }
    .tooltip-container.on-left::after {
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
    }

    .tooltip-container.on-right {
    top: -5px;
    bottom: auto;
    left: 128%;
    }
    .tooltip-container.on-right::after {
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
    }

    .tooltip-container.on-down {
    top: 28px;
    left: 50%;
    margin-left: -60px;
    }
    .tooltip-container.on-down::after {
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: transparent  transparent rgba(0, 0, 0, 0.7) transparent;
    }

    .tooltip-container.on-top {
    bottom: 125%;
    left: 50%;
    margin-left: -76px;
    }
    .tooltip-container.on-top::after {
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
    }

    /* Tooltip text */
    .tooltip-container {
    visibility: hidden;
    width: 150px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    padding: 9px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    }

    .tooltip-label {
        color: #fff !important;
        font-size: 12px !important;
        padding: 0 5px;
    }

    .tooltip:hover .tooltip-container {
        visibility: visible;
        opacity: 1;
    }

/* * * * * * * * * * * * * * * * * */
/* * * * * NOTIFICACIONES* * * * * */
/* * * * * * * * * * * * * * * * * */

.notification-box{
	box-sizing: border-box;
	position: fixed;
	z-index: 10;
	padding: 0;
	display: flex;
	flex-direction: column-reverse;
	overflow: hidden;
    /*
    top: 0;
	right: 0;
    align-items: flex-end;
    */
    bottom: 0;
	right: 0;
    left: 0;
    align-items: center;
}
.notification-box .Message {
	display: table;
    text-align: center;
	position: relative;
	margin: 5px auto;
	width: 70%;
	color: #fff;
	transition: all 0.2s ease;
    border-radius: 7px;
}
.notification-box .Message.is-hidden {
	opacity: 0;
	height: 0;
	font-size: 0;
	padding: 0;
	margin: 0 auto;
	display: block;
}
.notification-box .Message .Message-icon {
	display: table-cell;
	vertical-align: middle;
	width: 20px;
	padding: 10px 20px;
	text-align: center;
	/**/
	background-color: rgba(0, 0, 0, 0);
    opacity: 0.7;
}
.notification-box .Message .Message-body {
	display: table-cell;
	vertical-align: middle;
	padding: 10px 20px 10px 10px;
}
.notification-box .Message .Message-body > p {
	line-height: 1;
	font-size: 17px;
	color: #ffffff;
	font-weight: 600;
}
.notification-box .Message.bg-warning .Message-icon > svg,
.notification-box .Message.bg-secondary .Message-icon > svg {
	color: var(--cl-warning);
}
.notification-box .Message.bg-warning .Message-body > p,
.notification-box .Message.bg-secondary .Message-body > p {
	color: var(--cl-warning);
}
.notification-box .Message .Message-close {
	position: absolute;
	background-color: rgba(0, 0, 0, 0);
	color: #fff;
	border: none;
	outline: none;
	font-size: 10px;
	right: 5px;
	top: 5px;
	opacity: .8;
	cursor: pointer;
}
.notification-box .Message .Message:hover .Message-close {
	opacity: 1;
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * ALERTS  * * * * * */
/* * * * * * * * * * * * * * * * * */


.alert {
    padding: 0.71rem !important;
    background: transparent;
    font-weight: 500;
    border: 1px solid var(--primary-500) !important;
    border-radius: 14px;
    display: flex;
}

.alert-white {
    background-color: #FFFFFF !important;
    border: 1px solid rgb(236, 236, 241) !important;
    color: #222222 !important;
}
.alert-primary {
    background-color: var(--primary-500) !important;
    border: 1px solid var(--primary-500) !important;
    color: rgba(255,255,255,0.8) !important;
}
.alert-outline-primary {
    border: 1px solid var(--primary-500) !important;
    color: var(--primary-500) !important;
}
.alert-warning {
    background-color: var(--warning-500) !important;
    border: 1px solid var(--warning-500) !important;
    color: #222 !important;
}
.alert .alert-title{ font-size: 17px;margin: auto; display: flex; }
.alert .enlace{ margin: auto; text-align: right; }
.alert .enlace small{ font-size: 12px; }
@media (max-width: 576px) {
    .alert{ display: block; }
    .alert .enlace{ margin: auto; text-align: center; }
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * DROPDOWN  * * * * * */
/* * * * * * * * * * * * * * * * * */

/* - - - User Navbar - - - */
.user-dropdown .user {
    display: -webkit-box;
    display: flex;
    margin-top: auto;
    font-size: 1rem;
}
.user-dropdown .user img {
    width: 35px;
    height: 35px;
    margin: auto;
    border: 1px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}
.user-dropdown .user .online{
    position: relative;
    top: 25px;
    right: 10px;
    display: block;
    height: 12px;
    width: 12px;
    background: #50D030;
    border: 2px solid #26316F;
    border-radius: 50%;
}
.user-dropdown .user .asociado {
    position: relative;
    top: 22px;
    right: 14px;
    display: block;
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .bt0 %7B fill: %230084FF; %7D .bt1 %7B fill: none; stroke: %230084FF; stroke-miterlimit: 10; %7D .bt2 %7B fill: %23FFFFFF; stroke: %23FFFFFF; stroke-width: 0.25; stroke-miterlimit: 10; %7D %3C/style%3E%3Cg%3E%3Cpath class='bt0' d='M81.2,50c0,1.8-2.5,3.3-2.8,5c-0.3,1.7,1.5,4,1,5.7c-0.6,1.7-3.5,2.2-4.4,3.7c-0.9,1.5,0.1,4.3-1,5.7c-1.1,1.3-4.1,0.9-5.4,2c-1.3,1.1-1.4,4.1-2.9,5c-1.5,0.9-4.1-0.6-5.7,0c-1.6,0.6-2.7,3.4-4.4,3.7c-1.7,0.3-3.6-1.9-5.4-1.9c-1.8,0-3.7,2.2-5.4,1.9c-1.7-0.3-2.8-3.1-4.4-3.7c-1.7-0.6-4.2,0.8-5.8,0c-1.5-0.9-1.6-3.8-2.9-5c-1.3-1.1-4.3-0.7-5.4-2c-1.1-1.3-0.2-4.1-1-5.7c-0.9-1.5-3.8-2.1-4.4-3.7c-0.6-1.6,1.3-3.9,1-5.7c-0.3-1.7-2.8-3.2-2.8-5c0-1.8,2.5-3.3,2.8-5c0.3-1.7-1.5-4-1-5.7c0.6-1.7,3.5-2.2,4.4-3.7c0.9-1.5-0.1-4.3,1-5.7c1.1-1.3,4.1-0.9,5.4-2c1.3-1.1,1.4-4.1,2.9-5c1.5-0.9,4.1,0.6,5.7,0c1.6-0.6,2.7-3.4,4.4-3.7c1.7-0.3,3.6,1.9,5.4,1.9c1.8,0,3.7-2.2,5.4-1.9c1.7,0.3,2.8,3.1,4.4,3.7c1.7,0.6,4.2-0.8,5.8,0c1.5,0.9,1.6,3.8,2.9,5c1.3,1.1,4.3,0.7,5.4,2c1.1,1.3,0.2,4.1,1,5.7c0.9,1.5,3.8,2.1,4.4,3.7c0.6,1.6-1.3,3.9-1,5.7C78.7,46.7,81.2,48.2,81.2,50z'%3E%3C/path%3E%3Cpath class='bt1' d='M81.2,50c0,1.8-2.5,3.3-2.8,5c-0.3,1.7,1.5,4,1,5.7c-0.6,1.7-3.5,2.2-4.4,3.7c-0.9,1.5,0.1,4.3-1,5.7c-1.1,1.3-4.1,0.9-5.4,2c-1.3,1.1-1.4,4.1-2.9,5c-1.5,0.9-4.1-0.6-5.7,0c-1.6,0.6-2.7,3.4-4.4,3.7c-1.7,0.3-3.6-1.9-5.4-1.9c-1.8,0-3.7,2.2-5.4,1.9c-1.7-0.3-2.8-3.1-4.4-3.7c-1.7-0.6-4.2,0.8-5.8,0c-1.5-0.9-1.6-3.8-2.9-5c-1.3-1.1-4.3-0.7-5.4-2c-1.1-1.3-0.2-4.1-1-5.7c-0.9-1.5-3.8-2.1-4.4-3.7c-0.6-1.6,1.3-3.9,1-5.7c-0.3-1.7-2.8-3.2-2.8-5c0-1.8,2.5-3.3,2.8-5c0.3-1.7-1.5-4-1-5.7c0.6-1.7,3.5-2.2,4.4-3.7c0.9-1.5-0.1-4.3,1-5.7c1.1-1.3,4.1-0.9,5.4-2c1.3-1.1,1.4-4.1,2.9-5c1.5-0.9,4.1,0.6,5.7,0c1.6-0.6,2.7-3.4,4.4-3.7c1.7-0.3,3.6,1.9,5.4,1.9c1.8,0,3.7-2.2,5.4-1.9c1.7,0.3,2.8,3.1,4.4,3.7c1.7,0.6,4.2-0.8,5.8,0c1.5,0.9,1.6,3.8,2.9,5c1.3,1.1,4.3,0.7,5.4,2c1.1,1.3,0.2,4.1,1,5.7c0.9,1.5,3.8,2.1,4.4,3.7c0.6,1.6-1.3,3.9-1,5.7C78.7,46.7,81.2,48.2,81.2,50z'%3E%3C/path%3E%3C/g%3E%3Cg%3E%3Crect x='50.7' y='33.5' transform='matrix(0.659 0.7521 -0.7521 0.659 55.6719 -23.4983)' class='bt2' width='6.1' height='32.3'%3E%3C/rect%3E%3Crect x='36.7' y='47' transform='matrix(0.7521 -0.659 0.659 0.7521 -26.4924 39.8687)' class='bt2' width='6.1' height='16.3'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
}
.user-dropdown .user .user-info {
    /*width: 90px;*/
    margin: 0 10px;
    text-align: right;
    display: block;
}
.user-dropdown .user .user-info h5 {
    margin: 4px 0 0 0;
    color: #fff;
    font-weight: bold;
}
.user-dropdown .user .user-info small { color: #F6C108; }

/* - - - DROPDOWN - - - */
.user-dropdown {
    margin: 0px;
    position: relative;            
}
.dropdown-menu-container {
    position: absolute;
    left: 0;
    right: 0;
    display: none;
    z-index: 6;
}
.user-dropdown:focus-within .dropdown-menu-container { display: block; }
.user-dropdown .dropdown-menu-container { margin-right: 0px;}
.user-dropdown .dropdown-menu {
    width: 230px;
    display: flex;
    position: absolute;
    flex-direction: column;
    right: 0;
    top: 40px;
    padding: 10px;
    background-color: #ffffff;
    color: #000;
    border: 1px solid #fafafa;
    border-radius: 10px;
    box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
}
.user-dropdown .user-details{
    position: relative;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #434343
}
.user-dropdown .user-details img{
    height: 30px;
    width: 30px;
    object-fit: cover;
    border-radius: 50%;
    user-select: none;
    margin: 5px;
}
.user-dropdown .user-details .details{
    width: 165px;
    text-align: left;
    display: block;
    margin: auto;
}
.user-dropdown .user-details .details h4{
    font-size: 15px;
    font-weight: bold;
}
.user-dropdown .user-details .details p{
    font-size: 12px;
    font-weight: normal;
    color: #5f5f5f;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.user-dropdown .user-details .details small{
    font-style: italic;
}
.user-dropdown .menu-list + .menu-list {
    border-top: 1px solid #cecece;
}
.user-dropdown .menu-list { display: block; }
.menu-button {
    border: 0;
    padding: 8px;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #ffffff !important;
    color: #222 !important;
    font-size: 1rem !important;
    cursor: pointer;
    margin: auto !important;
}
.menu-button:hover {
    background-color: #fafafa;
    font-weight: bold;
}
.menu-button.red{ color: #d92027 !important; }
.menu-button svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: inline !important;
}
.clo{
    display: none;
}
@media only screen and (max-width:567px) {
    .user-info { display: none; }

    .user-dropdown .dropdown-menu {
        width: 100vw;
        display: flex;
        position: fixed;
        flex-direction: column;
        overflow: auto;
        right: 0;
        top: 0;
        padding: 5% 15%;
        background-color: #ffffff;
        color: #000;
        border: 1px solid #fafafa;
        box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
        height: 100vh;
    }
    .clo{
        display: flex;
        position: fixed;
        top: 40px;
        left: 10px;
        cursor: pointer;
        z-index: 4;

        width: 34px;
        height: 34px;
        border-radius: 50px;
        
        transition-duration: 0.2s;

        align-items: center;
        justify-content: center;

    }
    
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * FAB MENU  * * * * * */
/* * * * * * * * * * * * * * * * * */

.fab-menu {
    right: 90px;
    float: right;    
    display: flex;
    position: sticky;
    top: 15px;
    width: 50px;
    margin: -2rem 0;
    z-index: 4;
}
.btn-opt {
    height: 50px;
    width: 50px;
    background-color: #EF5093;
    border-radius: 50%;
    display: block;
    color: #FFF;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: auto 0;
    padding: 12px 0;
}
.btn-opt svg {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    transition: all ease-in-out .3s;
}
.menu-opt {
    position: absolute;
    width: 100%;
    top: 120%;
    text-align: center;
    visibility: hidden;
}
.btn-menu:checked ~ .menu-opt a {
    opacity: 1;
    visibility: visible;
}
.menu-opt a {
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-decoration: none;
    margin: 10px auto 0;
    padding: 10px 0;
    line-height: 1.15;
    color: #222;
    opacity: 0;
    visibility: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    border: 1px solid #FAFAFA;
    background-color: #FFFFFF;
    transition:all ease-in-out .1s
}
.menu-opt a:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23) !important;
}
.fab-menu a i {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.menu-opt a label {
    color: #f18917;
    display: block;
    cursor: pointer;
}
.btn-menu {
    -webkit-appearance: none;
    position: absolute;
    border-radius: 50%;
    top: 0; left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    z-index: 2;
    box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
}
.btn-menu:hover {
box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
}
.btn-menu:checked ~ .btn-opt svg {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition: all ease-in-out .3s;
}

/* - - - */

.menu-opt a.del { color: red; }
.menu-opt a.add { color: #03a9f4; }
.menu-opt a.edt label { color: #222; }

.menu-opt>a:nth-child(1) { transition-delay: .25s }
.menu-opt>a:nth-child(2) { transition-delay: .2s }
.menu-opt>a:nth-child(3) { transition-delay: .15s }
.menu-opt>a:nth-child(4) { transition-delay: .1s }
.menu-opt>a:nth-child(5) { transition-delay: 50ms }   

.btn-menu:checked ~ .menu-opt a { opacity: 1; visibility: visible; }
.btn-menu:checked ~ .menu-opt>a:nth-child(1) { transition-delay:50ms }
.btn-menu:checked ~ .menu-opt>a:nth-child(2) { transition-delay:.1s }
.btn-menu:checked ~ .menu-opt>a:nth-child(3) { transition-delay:.15s }
.btn-menu:checked ~ .menu-opt>a:nth-child(4) { transition-delay:.2s }
.btn-menu:checked ~ .menu-opt>a:nth-child(5) { transition-delay:.25s }            

@media only screen and (max-width:567px) {
    .fab-menu {
        right: 4%;
        top: 6rem;
        margin: 1rem 0;
    }
    .btn-opt {
        background-color: rgba(239, 80, 147,0.9);
    }
}




/* CHECKBOX */
.md-checkbox {
	position: relative;
	margin: 0.5em;
	text-align: left;
}
.md-checkbox label {
	cursor: pointer;
	display: inline;
	line-height: 1.25em;
	vertical-align: top;
	clear: both;
	padding-left: 1px;
}
.md-checkbox label:not(:empty) {
	padding-left: 0.75em;
}
.md-checkbox label:before, .md-checkbox label:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
}
.md-checkbox label:before {
	width: 1.25em;
	height: 1.25em;
	background: #fff;
	border: 2px solid var(--secondary-500);
	cursor: pointer;
	transition: background 0.3s;
}
.md-checkbox input[type=checkbox] {
	outline: 0;
	visibility: hidden;
	width: 1.25em;
	margin: 0;
	display: block;
	float: left;
	font-size: inherit;
}
.md-checkbox input[type=checkbox]:checked + label:before {
	background: var(--primary-500);
	border: none;
}
.md-checkbox input[type=checkbox]:checked + label:after {
	transform: translate(0.25em, 0.3365384615em) rotate(-45deg);
	width: 0.75em;
	height: 0.375em;
	border: 0.125em solid #fff;
	border-top-style: none;
	border-right-style: none;
}
/* disabled */
.md-checkbox input[type=checkbox]:disabled:checked + label:before {
	border: 2px solid var(--primary-400);
	background: var(--primary-400);
}
.md-checkbox input[type=checkbox]:disabled + label:before,
.md-checkbox.primary input[type=checkbox]:disabled + label:before,
.md-checkbox.info input[type=checkbox]:disabled + label:before,
.md-checkbox.success input[type=checkbox]:disabled + label:before,
.md-checkbox.warning input[type=checkbox]:disabled + label:before,
.md-checkbox.danger input[type=checkbox]:disabled + label:before,
.md-checkbox.secondary input[type=checkbox]:disabled + label:before {
	border: 2px solid var(--secondary-500);
	background: var(--secondary-500);
}

/* Radiobutton Colors */
.md-checkbox.primary input[type=checkbox] + label:before { border: 2px solid var(--primary-500); }
.md-checkbox.primary input[type=checkbox]:checked + label:before { border: 2px solid var(--primary-500); background: var(--primary-500); }
.md-checkbox.primary input[type=checkbox]:disabled:checked + label:before { border: 2px solid var(--primary-400); background: var(--primary-400); }
.md-checkbox.info input[type=checkbox] + label:before { border: 2px solid var(--info-500); }
.md-checkbox.info input[type=checkbox]:checked + label:before { border: 2px solid var(--info-500); background: var(--info-500); }
.md-checkbox.info input[type=checkbox]:disabled:checked + label:before { border: 2px solid var(--info-400); background: var(--info-400); }
.md-checkbox.success input[type=checkbox] + label:before { border: 2px solid var(--success-500); }
.md-checkbox.success input[type=checkbox]:checked + label:before { border: 2px solid var(--success-500); background: var(--success-500); }
.md-checkbox.success input[type=checkbox]:disabled:checked + label:before { border: 2px solid var(--success-400); background: var(--success-400); }
.md-checkbox.warning input[type=checkbox] + label:before { border: 2px solid var(--warning-500); }
.md-checkbox.warning input[type=checkbox]:checked + label:before { border: 2px solid var(--warning-500); background: var(--warning-500); }
.md-checkbox.warning input[type=checkbox]:disabled:checked + label:before { border: 2px solid var(--warning-400); background: var(--warning-400); }
.md-checkbox.danger input[type=checkbox] + label:before { border: 2px solid var(--danger-500); }
.md-checkbox.danger input[type=checkbox]:checked + label:before { border: 2px solid var(--danger-500); background: var(--danger-500); }
.md-checkbox.danger input[type=checkbox]:disabled:checked + label:before { border: 2px solid var(--danger-400); background: var(--danger-400); }
.md-checkbox.secondary input[type=checkbox] + label:before { border: 2px solid var(--secondary-500); }
.md-checkbox.secondary input[type=checkbox]:checked + label:before { border: 2px solid var(--secondary-500); background: var(--secondary-500); }
.md-checkbox.secondary input[type=checkbox]:disabled:checked + label:before { border: 2px solid var(--secondary-400); background: var(--secondary-400); }

/* RADIO-BUTTON */
label.btn-radio {
	margin: .5rem;
	position: relative;
	padding-left: 30px;
	cursor: pointer;
}
input.radio-inline {
	height: 1px;
	width: 1px;
	opacity: 0;
}
.outside {
	display: inline-block;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	background: none;
}
.inside {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	display: inline-block;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	left: 3px;
	top: 3px;
	-webkit-transform: scale(0, 0);
			transform: scale(0, 0);
}
input.radio-inline + .outside { 
	border: 2px solid var(--secondary-500); 
}
input.radio-inline:checked + .outside { 
	border: 2px solid var(--primary-500); 
}
input.radio-inline:checked + .outside .inside { 
	background: var(--primary-500); 
}
/* disabled */
input.radio-inline:disabled + .outside,
input.radio-inline.primary:disabled + .outside,
input.radio-inline.info:disabled + .outside,
input.radio-inline.success:disabled + .outside,
input.radio-inline.warning:disabled + .outside,
input.radio-inline.danger:disabled + .outside,
input.radio-inline.secondary:disabled + .outside { 
	border: 2px solid var(--secondary-500);
	background: var(--secondary-500); 
}
input.radio-inline:checked:disabled + .outside { border: 2px solid var(--primary-400); background: transparent; }
input.radio-inline:checked:disabled + .outside .inside { background: var(--primary-400); }
/* colors */
input.radio-inline.primary + .outside { border: 2px solid var(--primary-500); }
input.radio-inline.primary:checked + .outside { border: 2px solid var(--primary-500); }
input.radio-inline.primary:checked + .outside .inside { background: var(--primary-500); }
input.radio-inline.primary:checked:disabled + .outside { border: 2px solid var(--primary-400); background: transparent; }
input.radio-inline.primary:checked:disabled + .outside .inside { background: var(--primary-400); }
input.radio-inline.info + .outside { border: 2px solid var(--info-500); }
input.radio-inline.info:checked + .outside { border: 2px solid var(--info-500); }
input.radio-inline.info:checked + .outside .inside { background: var(--info-500); }
input.radio-inline.info:checked:disabled + .outside { border: 2px solid var(--info-400); background: transparent; }
input.radio-inline.info:checked:disabled + .outside .inside { background: var(--info-400); }
input.radio-inline.success + .outside { border: 2px solid var(--success-500); }
input.radio-inline.success:checked + .outside { border: 2px solid var(--success-500); }
input.radio-inline.success:checked + .outside .inside { background: var(--success-500); }
input.radio-inline.success:checked:disabled + .outside { border: 2px solid var(--success-400); background: transparent; }
input.radio-inline.success:checked:disabled + .outside .inside { background: var(--success-400); }
input.radio-inline.warning + .outside { border: 2px solid var(--warning-500); }
input.radio-inline.warning:checked + .outside { border: 2px solid var(--warning-500); }
input.radio-inline.warning:checked + .outside .inside { background: var(--warning-500); }
input.radio-inline.warning:checked:disabled + .outside { border: 2px solid var(--warning-400); background: transparent; }
input.radio-inline.warning:checked:disabled + .outside .inside { background: var(--warning-400); }
input.radio-inline.danger + .outside { border: 2px solid var(--danger-500); }
input.radio-inline.danger:checked + .outside { border: 2px solid var(--danger-500); }
input.radio-inline.danger:checked + .outside .inside { background: var(--danger-500); }
input.radio-inline.danger:checked:disabled + .outside { border: 2px solid var(--danger-400); background: transparent; }
input.radio-inline.danger:checked:disabled + .outside .inside { background: var(--danger-400); }
input.radio-inline.secondary + .outside { border: 2px solid var(--secondary-500); }
input.radio-inline.secondary:checked + .outside { border: 2px solid var(--secondary-500); }
input.radio-inline.secondary:checked + .outside .inside { background: var(--secondary-500); }
input.radio-inline.secondary:checked:disabled + .outside { border: 2px solid var(--secondary-400); background: transparent; }
input.radio-inline.secondary:checked:disabled + .outside .inside { background: var(--secondary-400); }

.no-transforms .inside {
	left: auto;
	top: auto;
	width: 0;
	height: 0;
}
input.radio-inline:checked + .outside .inside {
	-webkit-animation: radio-select 0.1s linear;
			animation: radio-select 0.1s linear;
	-webkit-transform: scale(1, 1);
			transform: scale(1, 1);
}
.no-transforms input.radio-inline:checked + .outside .inside {
	width: 10px;
	height: 10px;
}

/* NUMBER INPUT 1 (Hacer JS Dinamico) */
.number-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D5DCE6;
    background-color: #fff;
    border-radius: 5px;
    font-size: 40px;
    font-weight: bold;
    }
    .number {
    position: relative;
    width: 150px;
    height: 100px;
    color: #333C48;
    text-align: center;
    overflow: hidden;
    }
    .number.is-input .contador-number {
    visibility: hidden;
    opacity: 0;
    transition: opacity 100ms ease-in;
    }
    .number.is-input .input-number {
    visibility: visible;
    opacity: 1;
    transition: opacity 100ms ease-in;
    }
    .input-number {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
    box-shadow: none;
    outline: none;
    border: none;
    color: #333C48;
    font-size: 40px;
    font-weight: bold;
    line-height: 100px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 100ms ease-in;
    }
    .contador-number {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 100px;
    visibility: visible;
    opacity: 1;
    transition: opacity 1000ms ease-in;
    }
    .contador-number.mas-hide {
    opacity: 0;
    transform: translateY(-50px);
    -webkit-animation: increment-prev 100ms ease-in;
            animation: increment-prev 100ms ease-in;
    }
    .contador-number.mas-visible {
    opacity: 1;
    transform: translateY(0);
    -webkit-animation: increment-next 100ms ease-out;
            animation: increment-next 100ms ease-out;
    }
    .contador-number.menos-hide {
    opacity: 0;
    transform: translateY(50px);
    -webkit-animation: decrement-prev 100ms ease-in;
            animation: decrement-prev 100ms ease-in;
    }
    .contador-number.menos-visible {
    opacity: 1;
    transform: translateY(0);
    -webkit-animation: decrement-next 100ms ease-out;
            animation: decrement-next 100ms ease-out;
    }
    .btn-number {
        width: 40px;
        height: 40px;
        text-align: center;
        color: rgba(0,0,0,0.3);
        cursor: pointer;
        border: 3px solid rgba(0,0,0,0.3);
        transition: background-color 100ms ease-in;
        display: flex;
    }
    .btn-number svg { margin: auto;}
    .btn-number:hover, .btn-number:active {
        border: 3px solid rgba(0,0,0,0.7);
        transition: background-color 100ms ease-in;
    }
    .btn-number:hover svg, .btn-number:active svg{ color: rgba(0,0,0,0.7);}
    .btn-menos, .btn-mas { border-radius: 50%; }

    @-webkit-keyframes decrement-prev {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    }

    @keyframes decrement-prev {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    }
    @-webkit-keyframes decrement-next {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    }
    @keyframes decrement-next {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    }
    @-webkit-keyframes increment-prev {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    }
    @keyframes increment-prev {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    }
    @-webkit-keyframes increment-next {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    }
    @keyframes increment-next {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
}

/* TOGGLE CHECKBOX */

div.ck input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
    display: none;
    }

    div.ck label {
    cursor: pointer;
    text-indent: -9999px;
    width: 60px;
    height: 30px;
    background: grey;
    display: block;
    border-radius: 30px;
    position: relative;
    }

    div.ck label:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 24px;
    transition: 0.3s;
    }

    div.ck input:checked + label {
    background: #3ea868;
    }

    div.ck input:checked + label:after {
    left: calc(100% - 3px);
    transform: translateX(-100%);
    }

    div.ck label:active:after {
    width: 35px;
    }
    
/* LIKE CHECKBOX */

.like{
    display: flex;
    justify-content: center;
    margin: 0;
    height: 30px;
    width: 30px;
    /*background: linear-gradient(135deg, #121721, #000);*/
    font: 1em verdana, sans-serif;

    position: relative;
    
}

input[type='checkbox'].toggle-heart {
    position: absolute;
    visibility: hidden;
    left: -100vw;
  }
  input[type='checkbox'].toggle-heart:checked + label {
    color: #e2264d;
    filter: none;
    will-change: font-size;
    -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
            animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
  }
  input[type='checkbox'].toggle-heart:checked + label:before, input[type='checkbox'].toggle-heart:checked + label:after {
    -webkit-animation: inherit;
            animation: inherit;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  input[type='checkbox'].toggle-heart:checked + label:before {
    will-change: transform, border-width, border-color;
    -webkit-animation-name: bubble;
            animation-name: bubble;
  }
  input[type='checkbox'].toggle-heart:checked + label:after {
    will-change: opacity, box-shadow;
    -webkit-animation-name: sparkles;
            animation-name: sparkles;
  }
  input[type='checkbox'].toggle-heart:focus + label {
    text-shadow: 0 0 3px white,  0 1px 1px white, 0 -1px 1px white,  1px 0 1px white, -1px 0 1px white;
  }
  
  label.toggle-heart-label {
    align-self: center;
    position: relative;
    color: rgba(0,0,0,0.3);
    font-size: 1.5em;
    padding-left: 0px;
    filter: grayscale(1);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
  }
  label.toggle-heart-label:before, label.toggle-heart-label:after {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    content: '';
  }
  label.toggle-heart-label:before {
    box-sizing: border-box;
    margin: -2.25rem;
    border: solid 2.25rem #e2264d;
    width: 4.5rem;
    height: 4.5rem;
    transform: scale(0);
  }
  label.toggle-heart-label:after {
    margin: -0.1875rem;
    width: 0.375rem;
    height: 0.375rem;
    box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
  }
  
  @-webkit-keyframes heart {
    0%, 17.5% {
      font-size: 0;
    }
  }
  
  @keyframes heart {
    0%, 17.5% {
      font-size: 0;
    }
  }
  @-webkit-keyframes bubble {
    15% {
      transform: scale(1);
      border-color: #cc8ef5;
      border-width: 2.25rem;
    }
    30%, 100% {
      transform: scale(1);
      border-color: #cc8ef5;
      border-width: 0;
    }
  }
  @keyframes bubble {
    15% {
      transform: scale(1);
      border-color: #cc8ef5;
      border-width: 2.25rem;
    }
    30%, 100% {
      transform: scale(1);
      border-color: #cc8ef5;
      border-width: 0;
    }
  }
  @-webkit-keyframes sparkles {
    0%, 20% {
      opacity: 0;
    }
    25% {
      opacity: 1;
      box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
    }
  }
  @keyframes sparkles {
    0%, 20% {
      opacity: 0;
    }
    25% {
      opacity: 1;
      box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
    }
  }


  /* Estilos RadioBtn tipo usuario */
  input[type=radio].radoption{
    display:none;
}

.userBox{
    height: 100%;
    width: 100%;
    /*border: 2px solid #bdbdbd; */
    
    color: rgba(0,0,0,0.8);
    border-radius: 4px;
    background-color: #fff;
    border: 2px solid #eee;
    padding: 10px 30px;
    cursor: pointer;
    /**/
    justify-content: center;
    display: flex;
    
}
.RadioBtnUser .styleLabel{
    position:relative;
    text-align: center;
}

.method{
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.RadioBtnUser input[type=radio].radoption:checked + .styleLabel:before{
    content: "✓";
    background-color: #249af3;
    color: #fff;
    border-radius: 50%;
    border: 1px solid #249af3;
    position: absolute;
    top: -15px;
    padding: 6px;
    line-height: 1;
    right: -15px;
    width: 30px;
    height: 30px;
    font-size: 15px;
    z-index: 1;
}
.RadioBtnUser input[type=radio].radoption:checked + label .userBox {
    border: solid 1px #249af3;
    background-color: #f6fbff;
}
.metodo-textarea{
    width: 100%;
    padding: 5px 10px;
    border: solid 1px #c7c7c7;
}

.userBox h2 {
    font-weight: 800;
    font-size: 30px;
}
.discount-text{
color: #727586; text-decoration: line-through; font-size: 16px; font-weight: 400;
}
.userBox .offer-text{
    font-size: 16px;
}
.userBox .plan-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}
.userBox .userBox#productTangible:before {
    content: url("");
}

.cardacepted{
width: 40px !important;
}


/* - - - - - - SELECT PAY Revisar*/


/* - - - RADIOS - - - */
/* Opciones RadioBtn Opt */
.RadioGroup {
    background-color: #FFF;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
    margin: 10px 0;
    position: relative;
    }
    .RadioGroup label {
        font-size: 15px;
        padding: 10px 20px 10px 60px;
        width: 100%;
        display: block;
        text-align: left;
        color: #3C454C;
        cursor: pointer;
        position: relative;
        z-index: 2;
        transition: color 300ms ease-in;
        overflow: hidden;
    }
    .RadioGroup label:before {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    content: "";
    background-color: #5562eb;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: -1;
    }
    .RadioGroup label:after {
    width: 32px;
    height: 32px;
    content: "";
    border: 2px solid #D1D7DC;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: 2px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 200ms ease-in;
    }
    .RadioGroup label img{
        float: right;
    }
    .RadioGroup input:checked ~ label {
    color: #fff;
    }
    .RadioGroup input:checked ~ label:before {
    transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
    }
    .RadioGroup input:checked ~ label:after {
    background-color: #54E0C7;
    border-color: #54E0C7;
    }
    .RadioGroup input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
    }

    /* display contents */
    .hide {
        display: none;
    }
                        
            .resumen {
                margin-top: 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 24px;
            }
    
            .resumen-title {
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
                display: flex;
                align-items: center;
            }
            .resumen-price {
                margin: 0;
                font-weight: 700;
                white-space: nowrap;
            }
    
            @media (max-width: 576px) { .resumen {display: block;} }

  
/* * * * * * * * * * * * * * * * * */
/* * * * * * * * BADGE * * * * * * */
/* * * * * * * * * * * * * * * * * */
  
/* ====================== PAGINADOR ====================== */
.pagination-container{
    position: relative;
    width: 100%;
}
ul.pagination{
    /* max-width: 360px; */
    /* max-width: 385px; */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    margin-bottom: 10px;
    /*box-shadow: 0px 10px 15px rgba(0,0,0,0.1);*/
    /*border: 1px solid var(--primary-500);*/
    justify-content: center;
}
ul.pagination li{
    color: #222;
    list-style: none;
    /*line-height: 40px;*/
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    border-radius: 5px;
}
ul.pagination li.page-item{
    list-style: none;
    height: 35px;
    width: 35px;
    /*margin: 0 3px;*/
    line-height: 35px;
    /*border-radius: 50%;*/
}
ul.pagination li.page-item .page-link{
    display: block;
}
ul.pagination li.page-item.disabled{
    font-size: 22px;
    cursor: default;
    padding: 0 5px;
}
ul.pagination li.btn{
    /* padding: 7px 15px; */
    height: 36px; /**/
    padding: 0 5px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid rgba(38, 49, 111, 0.3);
}


ul.pagination li.active{ color: #fff !important; background: #26316F !important; }
ul.pagination li.page-item:hover{
    color: #26316F;
    background-color: rgba(236, 236, 241, 0.7);
}
ul.pagination li:first-child:hover,
ul.pagination li:last-child:hover{
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}


.btn.prev{
    min-width: 10px !important;
    height: 35px !important;
    margin-right: 15px;
}
.btn.next{
    min-width: 10px !important;
    height: 35px !important;
    margin-left: 15px;
}

@media screen and ( max-width: 475px ) {
    li.page-item {
        display: none;
    }

    .page-item:first-child,
    .page-item:nth-child( 2 ),
    .page-item:nth-last-child( 2 ),
    .page-item:last-child,
    .page-item.active,
    .page-item.disabled {
        display: block;
    }
}

.input-page{
    font-size: 17px;
    font-weight: 400 !important;
    width: 65px !important;
    border: 1px solid transparent;
    text-align: center;
    color: #222;
    background-color: transparent;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -moz-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.input-page:focus {
    border: 1px solid #222;
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * BADGE * * * * * * */
/* * * * * * * * * * * * * * * * * */

.badge {
    display: inline-block;
    padding: 0.35em 0.4em;
    font-size: 80%;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.25rem;
    color: #FFFFFF;
    font-weight: 700;
    
}
.badge-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 10rem;
}


.badge-primary {
    color: #FFFFFF;
    background-color: #140059;
    border: 1px solid #140059;
}
.badge-outline-primary {
    color: #140059;
    border: 1px solid #140059;
}
.badge-success {
    color: #222222;
    /*background-color: #f8fec3;*/
    background-color: #d0f2e0;
    border: 1px solid #222222;
}
.badge-warning {
    color: #222222;
    background-color: #F6C108B0;
    /*background-color: #ffe1e1;*/
    border: 1px solid #222222;
}
.badge-danger {
    color: #f60808;
    background-color: rgba(246, 8, 8, 0.07);
    border: 1px solid rgb(246, 8, 8);
}
.badge-info {
    color: #FFFFFF;
    /*background-color: #faeefd;*/
    background-color: #0084FF;
    border: 1px solid #222222;
}
.badge-secondary {
    color: #222222;
    background-color: rgba(34, 34, 34, 0.1);
    border: 1px solid #222222;
}
.badge-dark {
    color: #FFFFFF;
    background-color: #222222;
    border: 1px solid #222222;
}
.badge-outline-dark {
    color: #222222;
    border: 1px solid #222222;
}
/* - - - */

.seccion-title {
    line-height: 1.25;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2.25rem;
    margin-top: 1.25rem;
}
.total-resultado {
    margin-left: .25rem;
    font-size: 0.7rem;
    font-weight: 700;
    position: absolute;
    top: 0;
}

/* - - - */

.count{
    background-color: #F6C108;
    position: absolute;
    top: 5px;
    right: 1px;
    color: #222222;


    display: inline-block !important;
    padding: 3px 5px;
    
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 25%;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * FILE UPLOAD * * * * */
/* * * * * * * * * * * * * * * * * */

/* ===================== FILE UPLOAD ===================== */
.file-area {
    width: 100%;
    position: relative;
    /*padding: 2%;*/
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    text-align: center;
}
.file-area input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.file-area .file-dummy {
    width: 100%;
    
    /*height: 100%;*/
    background: rgba(255, 255, 255, 0.2);
    border: 2px dashed rgba(0,0,0,0.3);
    border-radius: 7px;
    padding: 0.5rem 2rem;
    
    text-align: center;
    font-size: 15px;
    transition: all 1s;

    display: flex;
    /*
    justify-content: center;
    align-items: center;
    */
}

/* - - - */

.file-area .file-dummy .avatar-img{display: inline-block;}
.file-area .file-dummy .avatar-img img{
    /*
    object-fit: cover;
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    */
    object-fit: cover;
    width: 200px;
    height: 200px;
    padding: 10px;
}
.file-area .file-dummy .success {
display: none;
}
.file-area .file-dummy .default {
display: inline-block;
}

/* - - - */

.file-area:hover .file-dummy {
background: rgba(220, 220, 220, 0.2);
}
.file-area input[type=file]:valid + .file-dummy {
border: 1px solid rgba(0,0,0,0.3);
background-color: #fff;
box-shadow: 1 4px 10px rgba(0,0,0,0) !important;
}
.file-area input[type=file]:valid + .file-dummy .success {
/* display: inline-block; */
display: none;
}
.file-area input[type=file]:valid + .file-dummy .default {
/* display: none; */
display: inline-block;
}

/* - - - */

.file-area .avatar-edit {
    position: absolute;
    right: 70px;
    z-index: 1;
    top: 0;
}
.file-area .avatar-edit label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 5px;
    padding: 6px;
    border-radius: 100%;
    background: #FFFFFF;
    color:var(--primary-500);
    border: 1px solid;
    border-color: var(--primary-500);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.file-area:hover .avatar-edit label {
    color: #222;
    background-color: #fff;
}
@media (max-width: 576px) { .file-area .avatar-edit { right: 20px; } .file-area .file-dummy{padding: 1rem 0;}}
.file-area .file-dummy.avatar { 
    width: 220px !important;
    height: 220px !important;
    border-radius: 100%;
    background-color: #FFFFFF;
    margin: auto;
    justify-content: center;
}
.file-area:hover .file-dummy.avatar{
    border: 2px dashed #ececf1;
    background: #ececf1;
}

.opt{
    z-index: 1;
    position: absolute;
    right: 15px;
    top: 15px;
    font-weight: 700;
    color: rgba(0,0,0,0.3);
    transition: all 1s ease;
}
.opt:hover{ color: var(--danger-500); }

/* --- IMAGEN --- */
.img-fluid {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
}
.img-rounded{
    border-radius: 50%;
    width: 45px;
    height: 45px;
    box-shadow: 1px 2px 10px #ccc;
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * *  BUTTONS  * * * * * */
/* * * * * * * * * * * * * * * * * */

.btn {
	display: inline-block;
	font-weight: bold;
	color: #222222;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 0 solid transparent;
    border-radius: 2px;
	padding: 5px 20px;
	margin: 2px 1px;
	height: auto;
	min-width: 120px;
	font-size: 1rem !important;
	-webkit-transition: color 0.5s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
	transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out, border-color 0.5s ease-in-out, -webkit-box-shadow 0.5s ease-in-out;
	-o-transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out, border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
	-moz-transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out, border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
	transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out, border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
	transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out, border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out, -webkit-box-shadow 0.5s ease-in-out;
}

.btn:disabled {
	cursor: default;
	opacity: 0.20;
}
.btn.btn-icon {
	padding: 4px 0;
	width: auto;
	height: auto;
	min-width: 33px;
    /**/ margin: auto;
}
.btn.btn-categorys {
	padding: 2px 0;
	width: auto;
	height: auto;
	min-width: 30px;
}
.btn.btn-clear {
	padding: 0.4rem 0.9rem;
	width: auto;
	height: auto;
	margin: 10px 15px;
	color: var(--cl-danger); background-color: var(--danger-500);
}
.btn.btn-ficha { 
	width: 10px !important;
	height: 30px !important;
	padding: 3px 3px !important;
	min-width: 30px;
}

.btn svg{ margin-left: 3px; }
.btn:hover svg{ transform: translateX(5px); }

/* btn-normal */
.btn-primary { color: var(--cl-primary); background-color: var(--primary-500); border-color: var(--primary-500); }
.btn-primary:hover { color: var(--cl-primary) !important; }
.btn-primary:disabled { color: #000000 !important; }
.btn-secondary { color: var(--cl-secondary); background-color: var(--secondary-400); border-color: var(--secondary-500); }
.btn-secondary:hover { color: var(--cl-secondary) !important; }
.btn-success { color: var(--cl-success); background-color: var(--success-500); border-color: var(--success-500); }
.btn-success:hover { color: var(--cl-success) !important; }
.btn-warning { color: var(--cl-warning) !important; background-color: var(--warning-500) !important; border-color: var(--warning-500) !important; }
.btn-warning:hover { color: var(--cl-warning) !important; }
.btn-danger { color: var(--cl-danger); background-color: var(--danger-500); border-color: var(--danger-500); }
.btn-danger:hover { color: var(--cl-danger) !important; }
.btn-info { color: var(--cl-info); background-color: var(--info-500); border-color: var(--info-500); }
.btn-info:hover { color: var(--cl-info) !important; }
/* btn-outline */
.btn-outline-primary { border: 1px solid var(--primary-500); background-color: transparent; color: var(--primary-500); }
.btn-outline-primary:hover { color: var(--cl-primary); border: 1px solid var(--primary-500); background-color: var(--primary-500); }
.btn-outline-secondary { border: 1px solid var(--secondary-500); background-color: transparent; color: var(--secondary-500); }
.btn-outline-secondary:hover { color: var(--cl-secondary); border: 1px solid var(--secondary-500); background-color: var(--secondary-500); }
.btn-outline-success { border: 1px solid var(--success-500); background-color: transparent; color: var(--secondary-500); }
.btn-outline-success:hover { color: var(--cl-success); border: 1px solid var(--success-500); background-color: var(--success-500); }
.btn-outline-warning { border: 1px solid var(--warning-500); background-color: transparent; color: var(--secondary-500); }
.btn-outline-warning:hover { color: var(--cl-warning); border: 1px solid var(--warning-500); background-color: var(--warning-500); }
.btn-outline-danger { border: 1px solid var(--danger-500); background-color: transparent; color: var(--secondary-500); }
.btn-outline-danger:hover { color: var(--cl-danger); border: 1px solid var(--danger-500); background-color: var(--danger-500); }
.btn-outline-info { border: 1px solid var(--info-500); background-color: transparent; color: var(--info-500); }
.btn-outline-info:hover { color: var(--cl-info); border: 1px solid var(--info-500); background-color: var(--info-500); }

.btn-overlay { color: var(--cl-primary); background-color: var(--bg-ficha); border-color: var(--bg-ficha); }
.btn-overlay:hover { color: var(--cl-primary) !important; }

.btn-dark { color: rgba(255,255,255,0.9); background-color: #222; border-color: #222; }

.btn-flat-share {
	background-color: transparent;
	color: var(--text-dark);
}
.btn-flat-share:hover {
	background-color: #F0F5FF;
	
}
.btn-flat-wysiwyg {
	background-color: transparent;
	color: #333333;
}
.btn-flat-wysiwyg:hover{
	color: #333333;
	background-color: rgba(184, 194, 204, .1);
}

.btn-flat-primary { background-color: transparent; color: var(--primary-500); }
.btn-flat-primary:hover { color: var(--text-white); background-color: var(--primary-500); }

.btn-flat-danger { background-color: transparent; color: var(--danger-500); }
.btn-flat-danger:hover { color: var(--text-white); background-color: var(--danger-500); }

.btn-flat-warning { background-color: transparent; color: var(--text-dark); }
.btn-flat-warning:hover { color: var(--text-white); background-color: var(--warning-500); }

.btn-flat-info { background-color: transparent; color: var(--info-500); }
.btn-flat-info:hover { color: var(--text-white); background-color: var(--info-500); }

.btn-flat-success { background-color: transparent; color: var(--success-500); }
.btn-flat-success:hover { color: var(--text-white); background-color: var(--success-500); }


.btn-full{ width: 100% !important;}

/* -Social btn- */
.btn-social{
	padding-left: 2.5rem;
	margin: 10px 5px;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
}
.btn-social.facebook{
	background:#1877F2 url('../img/media/social/facebook0.svg') no-repeat scroll 10px 0px / 20px 24px padding-box border-box;
	border: 1px solid #1877F2;
	color: #FFFFFF;
}
.btn-social.twitter{
	background:#00acee url('../img/media/social/twitterw.svg') no-repeat scroll 10px 0px / 20px 24px padding-box border-box;
	border: 1px solid #00acee;
	color: #FFFFFF;
}
.btn-social.whatsapp{
	background:#25D366 url('../img/media/social/whatsapp.svg') no-repeat scroll 10px 0px / 20px 24px padding-box border-box;
	border: 1px solid #25D366;
	color: #FFFFFF;
}
.btn-social.google {
	background: rgb(255, 255, 255) url('../img/media/social/google.svg') no-repeat scroll 10px 0px / 19px 24px padding-box border-box;
	border: 1px solid #cccccc;
	color: #757575;
}
.btn-social.apple {
	background: #0e0e0e url('../img/media/social/apple.svg') no-repeat scroll 10px 1px / 18px 37px padding-box border-box;
	border: 1px solid #111111;
}
.btn-social.facebook:hover {background-color: #176ddd;}
.btn-social.google:hover {border-color: #757575;}
.btn-social.apple:hover {border-color: #000000;}
.btn-social.twitter:hover {background-color: #02a0df;}
.btn-social.whatsapp:hover {background-color: #26ca62;}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * CARD  * * * * * * */
/* * * * * * * * * * * * * * * * * */

.card{
    border: none;
    border-radius: 0rem;
    -webkit-box-shadow: 3px 4px 2px rgb(0, 0, 0, 0.1);
    
/*box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);*/

box-shadow: 3px 4px 2px rgb(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    /*position: relative;*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #FFFFFF;
    background-clip: border-box;
    color: var(--color-body);
}

.card-body {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.5rem;
}

.registro{
    width: 100%;
    height: auto;
    border-radius: 7px;
    padding: 0;
    display: flex;
    /*border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    */
}
.registro img { width: 100px; height: 100px; object-fit: cover; margin: auto 0; }
.registro img.xs{ width: 75px; height: 75px; margin-right: 20px; border-radius: 50px;}
.registro img.sm{ width: 100%; height: 100%; border-radius: 7px;} /* Curso = SM*/

.registro img.cc{ width: 100%; height: 100%;   max-width: 100px;} /* QR = cc*/
@media only screen and (max-width:567px) { .registro img.cc{   max-width: none !important;} /* QR = cc*/ }

.registro img.md{ width: 175px; height: 175px; }
.registro img.xl{ width: 100%; height: 150px; border-radius: 0; }

.registro img.qr{ width: 150px; height: 150px; border: 15px solid #fff; margin-top: 15px;}
.registro img.qr.sm{ width: 120px; height: 120px;}

.registro .contenido{
    display: flex;
    align-items: start;
    text-align: left;
    width: 100%;
    max-width: 680px;
    /* margin: auto; */
    padding: 20px 40px;
    margin: 0 auto 0 0;
}

.registro .contenido .card-info{ width: 100%; margin: 10px; }
.registro .contenido h1{ font-size: 25px; font-weight: 800; line-height: 1.1; }
.registro .contenido h2{ font-size: 19px; font-weight: 700; line-height: 1.1; }
.registro .contenido h3{ font-size: 17px; font-weight: 700; line-height: 1.1; }
.registro .contenido h4{ font-size: 12px; font-weight: 500; line-height: 1.1; }

.registro .contenido span{
    font-size: 55% !important;
    /*margin-left: 5px;*/
    font-weight: 400;
}
.registro .contenido .intro {
    white-space: normal;
    text-overflow: ellipsis;
    height: 100px;
    overflow: auto;
    font-weight: normal;
    font-size: 1rem;
}

.info {
    display: flex;
    align-items: center;
    margin: 10px 0px;
    font-size: 10px;
}
.info span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    font-weight: 500;
    color: #222222;
    cursor: pointer;
}
.info img {
    height: 40px !important;
    width: 40px !important;
    border-radius: 50% !important;
    margin: 0 7px 0 0 !important;
    border: 2px solid #fff;
}
.card-a{
    max-width: 100%;
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    position: relative;
}
@media only screen and (max-width:567px) {
    .card-a .contenido { padding: 0 15px !important; }
}

.card-b{
    /*
    max-width: 100%;
    margin-bottom: 21px;
    */
    max-width: 70%;
    margin: 3rem auto;
    background-color: #fff;
    /*border: 1px solid #ececf1ff;*/
    border: 1px solid rgba(0,0,0,0.9);
    /*box-shadow: 0 0.25rem 0.6rem rgba(0,0,0,0.15);*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
}
.card-b:hover { top: -2px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.card-b.w { border: 0px solid rgba(255, 255, 255, 0); box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.05); }
.card-b.r {flex-direction: row-reverse; }

.card-b img.sm{
    height: 100%;
    max-width: 300px;
    object-fit: cover;
    margin: auto 0;
}

/* - - - */
.registro.h{
    border: 1px solid rgba(255,255,255,0);
    box-shadow: none;
    margin: 0 auto;
    flex-direction: row-reverse;
}
.registro.h img.sm{
    max-width: 300px;
    max-height: 250px;
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 0px 30px rgba(0,0,0,0.4);
}
.registro.h .contenido{
    padding: 0;
}
.registro.h .contenido .card-info{ width: 100%; margin: auto 20px auto 0; width: 100%; padding: 10px; color: #FFF; }
.card-h{
    max-width: 70%;
}


/* - - - */

.registro.new_direccion {
    box-shadow: 0 0 0 rgba(0,0,0,0);
    border: 2px dashed rgba(0,0,0,0.2);
    height: 100%;
    max-height: 170px;
    
    justify-content: center;
    align-items: center;
    
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    color: rgba(0,0,0,0.7);

    padding: 40px;
}
.registro.direccion {
    background-color: rgba(236, 236, 241, 0.7);
    border: 0px solid #ececf1ff;
    height: 100%;
    min-height: 170px;
    color: rgba(0,0,0,0.8);
}
.registro.direccion .contenido h2 {
    font-size: 17px;
    font-weight: 500;
}
.registro.direccion .contenido .card-info{ margin: 0; }

/* - - - */

/* Media Query Responsive MOBILE */
@media only screen and (max-width:567px) {
    .registro{
        display: block;
    }
    .card-b{
        padding: 0px;
        max-width: 90% !important;
        margin: 50px auto !important;
    }
    .card-b img.sm{
        margin-right: 0;
        border-radius: 7px 7px 0 0;
        max-width: 100%;
    }
    .card-b .contenido { padding: 0 15px !important; }
    .registro .contenido .card-info{ width: 100%; margin: 10px; }

    .registro.h{
        margin: 0 auto;
        text-align: center;
    }
    .registro.h .contenido h1{
        font-size: 23px;
        font-weight: 700;
        line-height: 1.2;
        text-align: left;
        letter-spacing: 0.03rem;
    }

    .registro.h .contenido .card-info {
    width: 100%;
    color: #FFF;
    margin: auto 0 auto 0;
    }

    .registro.h img.sm{  
        width: 70px;
        height: 70px;
        border-radius: 100%;
        /* display: none;*/
    }
    

}

/* - - - */

.datiles{
    border-left: 1px solid #ccc;
    padding: 0 20px;
    width: 30%;
    position: relative;
    margin: auto;
}
.datiles small{
    font-size: 12px;
}
.datiles p{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

@media only screen and (max-width:567px) {
    .card-b .datiles {
        width: 100%;
        position: relative;
        margin: 0 auto;
        padding: 15px;
        text-align: center;
        border-left: 0px solid #ccc;
    }
}

/* Cuota Renovación */


.cuota-card
{
    box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.05);
    border-radius: 0.7rem;
    display: flex;
    min-width: 0;
    word-wrap: break-word;
    background-color: #FFFFFF;
    background-clip: border-box;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 810px) {
.cuota-card { display: table; }
}
.cuota-info{
    padding: 2rem;
}

.cuota-info .incluye{
    margin: auto;
    display: flex;
    margin: 0;
    padding: 5px 0;
}
.cuota-info .incluye svg{
    width: 25px;
    height: 25px;
    color: #1d76e8;
    margin-right: 15px;
}
.cuota-price{
    background-color: #f5f5f5;
    color: #323232;
    text-align: center;
    padding: 20px;
    border-radius: 0 0.7rem 0.7rem 0;
}

.cuota-price a.cuota-link{
    text-align: center;
    font-size: 15px;
    margin: 10px 0;
    display: block;
    transition: all ease 1s;
    border-bottom: 2px solid rgba(255,255,255,0);                
}
.cuota-price a.cuota-link:hover{
    border-bottom: 2px solid rgba(0,0,0,0.9);       
}
/* - - - SLIDER VERTICAL / Actualizar - - - */

.card-x{
    width: 300px;
    margin: auto;
    /* height: 400px; */
    background-color: #ffffff;
    border: 1px solid #222;
    display: block;
    padding: 0;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.registro.card-x .contenido { padding: 15px !important; }

.registro img.full{ width: 100%; height: 100%; /*height: 295px;*/ object-fit: contain; border-radius: 7px; }

.acceso-rapido{
    left: 0;
    right: 0;
    top: calc(100% - 1.25rem);
    text-align: right;
    padding: 0 1rem;
    position: absolute !important;
}
.acceso-rapido .opt-acceso{
    -ms-flex-pack: center !important;
    justify-content: center !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 50% !important;
    background-color: #FFFFFF;
    width: 2.5rem;
    height: 2.5rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    text-decoration: none !important;
}
.acceso-rapido .opt-acceso svg{
    margin: auto;
    width: 1.2rem;
    height: 1.2rem;
}

.cursos_btn_next, .cursos_btn_prev, .eventos_btn_next, .eventos_btn_prev {
    /* 
    background-color: rgba(255, 255, 255, 0.7) !important;
    width: 45px !important;
    height: 45px !important;
    color: var(--primary-500) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(3px) !important;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.17); 
    */
    width: 40px;
    height: 40px;
    top: 150px;
    position: absolute;
    transform: translateY(-50%);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #FFFFFF !important;
    border: 1px solid var(--primary-500);
    border-radius: 50% !important;
    box-shadow: 1px 2px 4px rgba(38, 49, 111, .5);;
    transition: ease 200ms all;
    font-family: inherit;
    color: var(--primary-500) !important;
    font-size: 20px !important;
    margin: auto;

}
.cursos_btn_next svg, .cursos_btn_prev svg, .eventos_btn_next svg, .eventos_btn_prev svg { display: flex; margin: auto; }
.cursos_btn_next, .eventos_btn_nex {
    right: -25px !important;
}
.cursos_btn_prev, .eventos_btn_prev {
    left: -25px !important;
}

.publicacion-titulo{
    font-size: 19px !important;
    font-weight: 600!important;
    color: var(--primary-500);
    line-height: 1.1!important;
    text-transform: uppercase!important;
    overflow-y: auto!important;
    height: 80px!important;
    text-align: justify!important;
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * HERO  * * * * * * */
/* * * * * * * * * * * * * * * * * */

/* - - - Hero - - - */
.welcome { height: 65vh; }
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
}
/* HERO CUSTOM PRO $ */
/*
    .hero section{
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hero section::before{
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #0a2a43, transparent);
        z-index:  3;
    }
    .hero section::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0a2a43;
        z-index:  3;
        mix-blend-mode: color;
    }
    .hero section img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }
    #text{
        position: relative;
        color: #FFFFFF !important;
        font-size: 10em;
        z-index: 1;
    }
    #road{
        z-index: 2;
    }
*/

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * SWIPER  * * * * * */
/* * * * * * * * * * * * * * * * * */

/* ------------- Background slider ------------- */
.bg-slider{
    z-index: 4;
    position: relative;
    width: 100%;
    height: 91vh;
}
.bg-slider .swiper-slide img{
    width: 100%;
    height: 91vh;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}
.swiper-slide .text-content{
    position: absolute;
    top: 0;
    margin: 0;
    transition: 0.3s ease;
    width: 100%;
    height: 100%;
}
.swiper-slide .text-content.prim{
    background-color: rgba(38, 49, 111, 0.3);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 0 0 25px 25px;
}

/* -------------------- Titulos -------------------- */

.swiper-slide .text-content p{
    backdrop-filter: blur(3px);
    text-shadow: var(--text-shadown);
    transform: translateX(-80px);
    opacity: 0;
    overflow: auto;
}
.swiper-slide-active .text-content p{
    transform: translateX(0);
    opacity: 1;
    transition: 1s ease;
    transition-delay: 0.3s;
    transition-property: transform, opacity;
}

.swiper-slide-active .post-content p{
    transform: translateX(0);
    opacity: 1;
    transition: 1s ease;
    transition-delay: 0.3s;
    transition-property: transform, opacity;
}

/**/
.read-btn{
    max-width: 150px;
    text-decoration: none;
    outline: none;
    border: 1px solid var(--white-color);
    color: var(--white-color);
    backdrop-filter: blur(6px);
    font-size: 0.8em;
    font-weight: 700;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0px 30px rgba(0,0,0,0.4);
    transition: 1s ease;
    transform: translateX(50px);
    opacity: 0;
}
.read-btn:hover{
    background-color: #FFFFFF;
    color: #222222;
    transition: 0.5s ease;
}
.read-btn i{
    transition: 0.3s ease;
    padding-top: 6px;
}
.read-btn:hover i{
    transform: translateX(5px);
}
.read-btn{
    transform: translateX(0);
    opacity: 1;
    transition: 1s ease;
    transition-delay: 0.3s;
    transition-property: transform, opacity;
}
.read-btn.reserva{
    background-color: #FFFFFF;
    color: #222222;
    transition: 0.5s ease;
}
.view-all {
    line-height: 1.5rem;
    font-weight: 700;
    /* color: rgba(57, 188, 139, 0.7); */
    color: var(--primary-500);
    transition: 0.3s ease;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
}
/* - - - Pagination Buttons - - - */
.swiper-button-next{ right: 50px !important; left: auto !important; }
.swiper-button-prev{ left: 50px !important; right: auto !important; }

.swiper-button-next, .swiper-button-prev{
    background-color: rgba(255, 255, 255, 0.1) !important;
    width: 45px !important;
    height: 45px !important;
    color: #CCC !important;
    border-radius: 50% !important;
    backdrop-filter: blur(3px) !important;

}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 25px !important;
}
.swiper-pagination-progressbar-fill{
    background-color: #FFFFFF !important;
}

/* - - - Thumbails - - - */
.bg-slider-thumbs{
    z-index: 4;
    position: fixed;
    bottom: 3vh;
    transition: 0.3s ease;
    right: 2em;
    width: 40%;
    margin: 0 auto;
    overflow-x: auto;
}

.thumbs-container{
    padding: 30px 0px 30px 0px;
    justify-content: space-between;
}
.thumbs-container img{
    /* width: 170px;
    height: 140px; */
    width: 80px;
    height: 80px;
    margin: 0 10px;
    /* border-radius: 8px; */
    border-radius: 50px;
    object-fit: cover;
    cursor: pointer;
    /* box-shadow: inset 0 0 100vw 100vw rgba(0, 0, 0, 0.3), 0 16px 8px -8px rgba(0, 0, 0, 0.4); */
    box-shadow: inset 0 0 100vw 100vw rgba(255,255,255, 0.7), 0 16px 8px -8px rgba(38, 49, 111, 0.4);
    transition: 0.3s ease;
}
.thumbs-container .thumb-destino{
    text-shadow: -8px 5px 15px rgb(0, 0, 0);
    transition: 0.3s ease;
}
.thumbs-container .thumb-destino:hover:not(.thumbs-container .swiper-slide-thumb-active){
    transform: translateY(-10px);
}
.thumbs-container .swiper-slide-thumb-active{
    transform: scale(1.2);
}
.swiper-slide-thumb-active img{
    border: 1px solid rgba(255,255,255,0.7);
}

.thumbs-container .swiper-slide{
    width: auto !important;
}

/* - - - Thumbs Cards - - - */
.thumbs-container .swiper-slide .thumbs-info{
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: var(--warning-500);
    width: 88px;
    height: 130px;
    padding: 20px 10px;
    background: linear-gradient(to right, rgba(38, 49, 110, 0.95), rgba(61, 82, 199, 0.90));
}
.thumbs-container .swiper-slide .thumbs-info p{
    opacity: 0.8;
    font-size: 12px;
}
.thumbs-container .swiper-slide .thumbs-info h1{
    font-size: 15px;
}

/* - - - Progress Bar Thumbs Cards - - - */
.swiper-pagination {
    position: relative;
    width: 100px;
    bottom: auto;
    color: var(--primary-500);
    font-size: 10px;
    font-weight: 600;
    /* color: var(--warning-500); */
}
.swiper-pagination2 {
    position: relative;
    width: calc(100% - 150px);
    height: 2px !important;
    bottom: auto;
    opacity: 0.5;
}
.pagination_container {
    display: flex;
    align-items: center;
    position: relative;
    top: 20px;
}

/* - - - Pagination Buttons - - - */
.swiper-button-next, .swiper-button-prev{
    background-color: rgba(255, 255, 255, 0.4) !important;
    width: 45px !important;
    height: 45px !important;
    color: var(--primary-500) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(3px) !important;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.17);
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 20px !important;
}
.swiper-pagination-progressbar-fill{
    background: var(--warning-500) !important;
}

/* - - - -  */

.informacion{
    width: 50vw;
    right: 0;
    padding: 50px 100px;
    position: absolute;
    background: #fff;
    height: 100%;

    background-attachment: fixed;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(255, 255, 255);
    background-image: linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)), url('/img/amcp/logo-amcp-b-sm.png');

    overflow-y: scroll;
    height: 100vh;
    padding-bottom: 40vh;

}

.informacion.izquierda{ left: 0; border-radius: 0 0 0  25px;}
.informacion.derecha{ right: 0; border-radius: 0 0 25px 0;   height: 100vh; padding-bottom: 40vh; }

.featured-x{
    width: 100%;
    max-width: 45vw;
    /* height: 70vh; */
    height: fit-content;
    text-align: center;
    margin: auto;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    bottom: 0;
    
}
.featured-x.izquierda{ left: 7vw; }
.featured-x.izquierda.default{ background: linear-gradient(to right, rgba(38, 49, 110, 0.7), rgba(5, 10, 50, 0.9)); border-radius: 20px; }

.featured-x.derecha{ right: 7vw; }
.featured-x img{
    object-fit: contain !important;
    border-radius: 20px !important;
    width: 100% !important;
    height: 100% !important;
    box-shadow: 1px 2px 0px rgba(0, 0, 0, 0.5);
}

/* - - - */

.img-visor{
        height: 100px !important;
        width: 100px !important;
        border-radius: 50px !important;
        display: none;
        margin: auto;
    }

    .titulo-publicacion-hero{
        width: 100% !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        
        color: #26316F;
        width: 70%;

        font-size: var(--fs-3);
        line-height: 1.3;
    }
    .subtitulo-publicacion-hero{
        font-weight: 600;
        color: tomato;
        text-align: center;
        max-height: 25vh;
        margin: 10px 0 5px 0;
        padding: 0px !important;

        font-size: var(--fs-2);
        line-height: 1.4;
    }
    .enlaces-hero { margin: auto 0 auto auto; display: flex; }
    @media (max-width: 572px) {
        .titulo-publicacion-hero {
            font-size: 135%;
            width: 100%;
        }
        .img-visor{
            display: block;
        }
        .subtitulo-publicacion-hero{
            font-size: 1rem;
        }
        .enlaces-hero { margin: auto; display: flex; }
    }

/*======= Media queries (max-width: 1100px) =======*/
@media screen and (max-width: 1100px) {
        
    .media-icons{
        right: 0;
        margin-right: 50px;
    }
    .swiper-slide .text-content{
        margin: 0;
    }
    .bg-slider-thumbs{
        bottom: 10vh;
    }
}

/*======= Media queries (max-width: 785px) =======*/
@media screen and (max-width: 785px) {



    /* . . . */
    .informacion{
        width: 100vw !important;
        padding: 20px !important;
    }
    .featured-x{
        display: none !important;
    }
    .text-content p{
        padding: 0 20px;
        font-size: 19px;
        max-height: 15vh;
        overflow: auto;
    }

    /* . . . */




    .media-icons{
        right: 0;
        margin-right: 20px;
    }
    .swiper-slide .text-content{
        margin: 0;
        /*top: 15%;*/
        height: 100vh;
    }
    .swiper-slide .text-content .title{
        font-size: 3em;
    }
    .swiper-slide .text-content .title span{
        font-size: 0.35em;
    }
    .swiper-slide .text-content .title p{
        font-size: 0.9em;
    }
    .bg-slider-thumbs{
        bottom: 2em;
        backdrop-filter: blur(3px);
        overflow: hidden;
        padding: 0 10px;
        /*
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: var(--box-shadow);
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.1);
        */
        width: 80%;
        height: 60px;
        bottom: 10vh;
        right: 0;
        left: 0;
        overflow-x: auto;
        display: none !important;
    }
    .pagination_container{
        top: -5px !important;
    }
    .thumbs-container .swiper-slide{
        top: -25px;
    }

    .thumbs-container{
        padding: 0;
    }
    .thumbs-container img{
        width: 50px;
        height: 30px;
        margin: 0 10px;
        border-radius: 8px;
        object-fit: cover;
        cursor: pointer;
        box-shadow: inset 0 0 100vw 100vw rgba(0, 0, 0, 0.3), 0 16px 8px -8px rgba(0, 0, 0, 0.4);
        transition: 0.3s ease;
    }
    .thumbs-container img:hover, .thumbs-container img.swiper-slide-thumb-active {
        transform: translateY(-10px);
    }
    .thumbs-container img.swiper-slide-thumb-active{
        transform: scale(1.2);
        margin: 0 20px;
    }
    .thumbs-container .swiper-slide .thumbs-info{
        width: 100%;
        height: 100%;
        padding: 0;
        display: none;
    }
    .swiper-wrapper{
        height: 0px;
    }

    .navigation-article{
        width: 90%;
        padding-top: 0px;
    }
    .navigation-article li {
        padding: 0 5px;
    }


    /* - - - Pagination Buttons - - - */
    .swiper-button-next{ right: 10px !important; left: auto !important; }
    .swiper-button-prev{ left: 10px !important; right: auto !important; }

    .swiper-button-next, .swiper-button-prev{
        width: 30px;
        height: 30px;
        backdrop-filter: blur(3px);
    }
    .swiper-button-next::after, .swiper-button-prev::after {
        font-size: 14px;
    }
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * PARALLAX  * * * * * */
/* * * * * * * * * * * * * * * * * */


/* - - - Parallax - - - */
.parallax {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 45vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
}
.parallax .infox{
    padding: 0px 10%;
}


/* * * * * * * * * * * * * * * * * * * */
/* * * * * * * * FAB Share * * * * * * */
/* * * * * * * * * * * * * * * * * * * */
.options-btn {
    position: fixed;
    top: 5%; left: 50px;
    z-index: 3;
}
@media screen and (max-width: 768px) {
    .options-btn {
        position: fixed;
        bottom: 14px; left: 10px; top: unset !important;
        z-index: 3;
    }
    .menu-options {
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 120%;
        top: unset !important;
    }
}
.button-opt {
    height: 45px;
    width: 45px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 50%;
    display: block;
    color: #000;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: auto 0;
    padding: 12px 0;
}
.menu-options {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 120%;
}
.menu-options a {
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-decoration: none;
    margin: 10px auto 0;
    padding: 10px 0;
    line-height: 1.15;
    color: #222;
    opacity: 0;
    visibility: hidden;
    position: relative;
    box-shadow: 0 2px 2px 0px rgba(51, 51, 51, .3);
    background-color: #fff;
    transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;
}
.menu-options a:hover {
    transform: scale(1.05);
}
.options-btn a svg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}
.menu-options a label {
    color: #f18917;
    display: block;
}
.btn-menu {
    -webkit-appearance: none;
    position: absolute;
    border-radius: 50%;
    top: 0; left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    z-index: 2;
    transition: box-shadow .2s ease-in-out;
    box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
}
.btn-menu:hover {
    box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
}
.btn-menu:checked ~ .menu-options a {
    opacity: 1;
    visibility: visible;
}
.menu-options a.fb {fill: #FFFFFF; background: rgba(61, 90, 150, 0.9); transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out; }
.menu-options a.tx {color: #FFFFFF; background: rgba(0, 0, 0, 0.9); transition: opacity .2s ease-in-out .20s, transform .15s ease-in-out;}
.menu-options a.wp {color: #FFFFFF; background: rgba(136, 203, 44, 0.9); transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;}
.menu-options a.ln {color: #FFFFFF; background: rgba(14, 118, 168, 0.9); transition: opacity .2s ease-in-out .30s, transform .15s ease-in-out;}
.menu-options a.mail {color: #FFFFFF; background: rgba(245, 41, 41, 0.9); transition: opacity .2s ease-in-out .35s, transform .15s ease-in-out;}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * MODAL * * * * * * */
/* * * * * * * * * * * * * * * * * */

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.4);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: -moz-scrollbars-none;
    overflow-y: scroll;
    align-items: center;
    justify-content: center;
    transition: all 400ms ease-in;
    z-index: 6;
}
.modal::-webkit-scrollbar{
    display: none;
    width: 0 !important;
    visibility: hidden;
}
.modal:target {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    z-index: 6;
    margin: 0;
    padding: 0;
    transform:translate3d(0px,0px,0px);
    pointer-events: all;
}
.modal__inner{
    width: 100%;
    /*height: 97%; */   /* 1 */
    height: calc(100% - 60px);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    /* - - - scroll <3 FIX for IO - - - */
    /* margin: 200px auto; */
    margin: 60px auto; 
    text-align: left;
    overflow-x: hidden;
    overflow-y: hidden;
    align-items: center;
    position: fixed;
    transform:translate3d(0px, 100%, 0px);
    transition: ease-in-out .6s;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px 10px 0px 0px;
}
.modal:target .modal__inner {
    display: flex;
    opacity: 1;
    z-index: 1;
    padding: 0;
    transform: translate3d(0px,0px,0px);
    transition: ease-in-out .6s;
    animation: scale-up-ver-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    pointer-events: all;    
}

.modal:target>.closeoverlay {
    display: block;
}
.closeoverlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    display: block;
    z-index: -1;
    position: fixed;
    cursor: pointer;
}

.modal__x {
    position: absolute;
    right: 21px;
    top: 21px;
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
    z-index: 1;
}
.modal__x svg { fill: rgba(0,0,0,0.3); transition: all ease-in-out 0.3s; }
.modal__x:hover svg { fill: rgba(0,0,0,0.7); }

.modal_header{
    width: 100%;
    height: 55px;
    background-color: #FFF;
    position: fixed;
    z-index: 1;
    top: 0;
    text-align: center;
}
.modal_header h1{
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 700;
    overflow-wrap: break-word;
    padding: 27px 17px 0px 17px;
    text-align: center;

}
.modal_header::before{
    content: "";
    font-size: 20px;
    position: absolute;
    text-align: center;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    width: 45px;
    background: rgba(0,0,0,0.1);
    height: 3px;
    top: 15px;
    right: 0;
    left: 0;
    border-radius: 10px;
}

.modal_body {
    margin: auto 0;
    /* padding: 0 10%; */
    padding: 0 5%;
    overflow-x: hidden;
    overflow-y: auto;
    height: 70%;
    width: 100%;
}

.modal_footer {
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0;
    text-align: center;
    padding: 10px;
}

@media screen and (min-width: 768px) {
    .modal__inner{
        min-width: 600px;
        max-height: 90vh;
        max-width: 60vw;
        width: 80% !important;
        height: 80% !important;
        box-sizing: border-box;
        display: flex;
        margin: auto !important;
        border-radius: 16px !important;
    }
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * Widget  * * * * * */
/* * * * * * * * * * * * * * * * * */
/* --------------- Widget Help --------------- */
.wa-icon {
    /*
    
    display: flex;
    z-index: 98;
    bottom: 25px;
    right: 30px;
    border-radius: 50%;
    box-shadow: 0 1px 15px rgb(32 33 36 / 28%);
    */
    
    display: inline-flex;
    /*margin-left: auto;
    margin-right: auto;*/
    justify-content: center;
    align-items: center;
    font-weight: 600;
    padding: 0.75em 3em 0.75em 1.25em;
    border-radius: 99em;
    color: #fff;
    background-color: rgba(24, 90, 219, 1);
    backdrop-filter: blur(6px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    list-style: none;
    text-align: center;
    cursor: pointer;
    transition: 0.15s ease;
    /*position: relative;*/
    
    position: absolute;
    bottom: 0;
    right: 0;
    
    float: right;
    z-index: 4;
  
    text-decoration: none;
}
.wa-single{
    position: fixed;
    bottom: 17px;
    right: 140px;
}
.wa-info {
display: inline-flex;
justify-content: center;
align-items: center;
font-weight: 600;
padding: 0.75em 3em 0.75em 1.25em;
border-radius: 3px;
color: #fff;
background-color: #185adb;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
list-style: none;
text-align: center;
cursor: pointer;
transition: 0.15s ease;
position: absolute;
bottom: 0;
right: 0;
float: right;
z-index: 2;
text-decoration: none;
margin: 10px;
}

.wa-icon svg, .wa-info svg{
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%);
width: 1.2em;
height: 1.2em;
fill: #ffffff;
}

#wa-chat-widget_ {
display: none;
position: fixed;
border-radius: 10px;
box-shadow: 0 1px 15px rgb(32 33 36 / 28%);
bottom: 90px;
right: 30px;
overflow: hidden;
z-index: 5;
animation-name: wa-chat-animation;
animation-duration: 1s;
/* width: 20%; */
opacity: 100;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

#wa-chat-widget_:target {
display: block;
}

.wa-chat-widget-header {
display: flex;
color: #222222;
padding: 1.5rem 1rem;
background-color: rgba(255, 255, 255, 1);
/*backdrop-filter: blur(6px);*/
}

.wa-chat-widget-header img{
width: 3.2rem;
height: 3.2rem;
border-radius: 50%;
}

.wa-chat-widget-header .img-online{
content: "";
width: 13px;
height: 13px;
box-sizing: border-box;
background-color: rgb(74, 213, 4);
position: relative;
top: 35px;
right: 12px;
border-radius: 50%;
border: 3px solid #fff;
}

.wa-chat-widget-header a.close {
position: absolute;
top: 5px;
right: 15px;
color: #222222;
font-size: 30px;
text-decoration: none;
/*filter: drop-shadow(-1px 1px 0px rgba(0, 0, 0, 0.4));*/
}

.wa-chat-widget-profile {
padding: 0.5rem 1rem 0 1rem;
/*text-shadow: -1px 1px 0px rgba(0, 0, 0, 0.4);*/
}

.wa-chat-widget-profile .for{
font-weight: bold;
}
.wa-chat-widget-profile small{
font-weight: lighter;
font-size: .8rem;
}

.wa-chat-widget-body {
    padding: 30px 37px 30px 21px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(26px);
background-color: rgb(230, 221, 212);
background-image: url('../img//media/bg-wp.png');
background-repeat: no-repeat;
background-size: cover;
}

.wa-chat-widget-body .message {
padding: 1rem;
background-color: rgb(255, 255, 255);
border-radius: 0px 8px 8px;
box-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
}

.wa-chat-widget-body .message .profile-name {
color: #787878;
font-weight: bold;
}

.wa-chat-widget-body .message .wcw-message {
margin-top: 0.5rem;
width: 250px;
}

.wa-chat-widget-send form {
display: flex;
margin: 0;
background-color: rgb(230, 221, 212);
background-image: url('assets/img/wpbg.png');
background-repeat: no-repeat;
background-size: cover;
}

.wa-chat-widget-send input {
border: none;
padding: 0.5rem 1rem;
font-size: 1rem;
letter-spacing: 1px;
width: 100%;
}

.wa-chat-widget-send button {
background-color: #00abff;
padding: 10px;
border: none;
fill: #ffffff;
cursor: pointer;
}
.wa-chat-widget-send button svg{
    filter: drop-shadow(-1px 1px 0px rgba(0, 0, 0, 0.4));
}

@keyframes wa-chat-animation {
from {
opacity: 0;
}
}



/* * * * * * * * * * * * * * * * * */
/* * * * * * * PROGRAMA  * * * * * */
/* * * * * * * * * * * * * * * * * */

.programa {
    width: 90%;
    margin: 0 auto;
    position: relative;
    padding: 35px;
    }
    
    ul.actividades .actividad-title {
    font-size: var(--fs-1);
    line-height: 1.5;
    display: inline-block;
    font-weight: 600;
    }
    ul.actividades .actividad-time {
    float: right;
    font-size: 17px;
    color: #888;
    }
    ul.actividades .actividad-cat {
    font-size: 15px;
    display: block;
    color: #888;
    }

    ul.actividades li {
    margin-bottom: 25px;
    margin-top: 25px;
    position: relative;
    z-index: 8;
    list-style-type: none;
    }
    ul.actividades li:after {
    content: '';
    position: absolute;
    left: -18px;
    top: 8px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    }

    ul.actividades li.red:after { background: #FF3163; }
    ul.actividades li.green:after { background: #54D6C7; }
    ul.actividades li.yellow:after { background: #EAB429; }

    ul.actividades::after {
        content: '';
        position: absolute;
        height: 100%;
        width: 1px;
        background: #eee;
        left: 20px;
        top: 0;
    }

    ul li.exp {
    margin-bottom: 48px;
    }
    ul li.exp img {
        float: left;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        margin-right: 8px;
        object-fit: cover;
        box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
    }


/* * * * * * * * * * * * * * * * * */
/* * * * * * * * FECHAS  * * * * * */
/* * * * * * * * * * * * * * * * * */

.fecha-calendario{
    display: flex;
}
.fecha-calendario svg.cal{
    width: 50px;
    height: 50px;
    color: var(--warning-500);
}
.fecha-calendario svg.cal1{
    width: 35px;
    height: 35px;
    color: var(--warning-500);
}
@media (max-width: 572px) {
    .fecha-calendario h2 { font-size: 1.15rem; }
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * CUOTAS  * * * * * */
/* * * * * * * * * * * * * * * * * */

.cuotas{
    display: flex;
    text-align: center; 
    /*
    justify-content: center;
    margin-left: auto; 
    margin-right: auto; 
    padding: 20px;
    */
    z-index: 1;
    margin-top: 20px;
}
.cuotas-home{
    bottom: 14%;
    left: auto;
}
.cuota-left{ justify-content: end; }
@media (max-width: 572px) {
    .fecha-calendario h2 { font-size: 1.15rem; }
    .cuota-left{ justify-content: normal; }

    /* OK */
    .cuotas-home {
        scale: 0.8;
        position: absolute;
        bottom: 30VH;
        margin: auto 0;
        left: 0;
        right: 0;
    }
    /*  */
    
    .cuotas-ticket {
        scale: 0.8;
        position: absolute;
        top: -18%;
        margin: auto 0;
        right: -20%;
        z-index: 5;
    }
}
.cuotas-ticket {
    scale: 0.8;
    position: absolute;
    top: -18%;
    margin: auto 0;
    right: -30%;
    z-index: 5;
}
.cuota{
    width: 120px;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    margin-left: 20px;
    padding: 17px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-weight: bold;
    transition: 1s ease;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;

}
.cuota:hover{
    transform: scale(1.5);
    margin-top: -2px;
    z-index: 1;
}

/* .cr-preventa{
    background-color: var(--warning-500);
}
.cr-preventa *{
    color: #222;}
.cr-promocion{
    background-color: #01c3cd;
}
.cr-normal{
    background-color: #01b7ff;
}
.cr-asociado{
    background-color: var(--primary-500);
} */

.cr-info{
    color: #222;
    font-weight: 600;
    font-size: 11px;
    line-height: 14px;
}
.cr-price{
    color: #222;
    font-weight: 800;
    font-size: 28px;
    line-height: 38px;
    letter-spacing: 1px;
}
.cr-date{
    color: #222;
    font-weight: 600;
    font-size: 8px;
    line-height: 11px;
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * * FILTRO  * * * * * */
/* * * * * * * * * * * * * * * * * */

.filter {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    flex-shrink: 0;
    overflow-x: auto;

    /* scrollbar-width: none; */
    
    /*
    flex-wrap: wrap;
    flex-direction: column;
    */

    width: 100%;
    max-width: 71%;
    margin: 0 auto;
    position: sticky;
    top: 46px;

    z-index: 3;

    /* background-color: var(--bg-color-body); */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.filter.admin{
    max-width: 100% !important;
}
.filter label {
    align-items: center;
    justify-content: center;
    transition: all ease-in-out .15s;
    cursor: pointer;
    display: flex;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    padding: 15px 10px 10px 10px;

    /* Accessible outline */
    /* Remove comment to use */
    /*
        &:focus-within {
                outline: .125em solid $primary-color;
        }
    */
}
.filter label input {
    position: absolute;
    left: 0;
    z-index: -1;
    opacity: 0;
}
.filter label input:checked + span {
    background-image: linear-gradient(to right, #26316F, #3E53C6);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    color: #FFF;
}
.filter label span {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    margin-right: 10px;
    border-radius: 7px;
    transition: 0.3s ease;
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,0);
    color: rgba(0,0,0,0.6);
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.filter label input + span svg{ margin-right: 10px; }
.filter label input:checked + span svg{
    color: #FFF;
    
}
.filter label span:hover {
    /*box-shadow: 0 4px 10px rgba(0,0,0,0.1);*/
    color: rgba(0,0,0,1);
    border: 1px solid rgba(0,0,0,0);
    transition: 0.3s all ease;
}

/* Radio style */
/*
.filter label input:checked + span:before {
    box-shadow: inset 0 0 0 0.4375em #00005c;
}
 */
/*
.filter label span:before {
display: flex;
flex-shrink: 0;
content: "";
background-color: #fff;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
margin-right: 0.375em;
transition: 0.25s ease;
box-shadow: inset 0 0 0 0.125em #00005c;
}
*/

@media only screen and (max-width:567px) {
    .filter {
        max-width: 100%;
        padding: 3px;
    }
    .filter label{
        padding: 0px 10px;
    }
}

/* * * * * * * * * * * * * * * * * */
/* * * * * * * TIME LINE * * * * * */
/* * * * * * * * * * * * * * * * * */

.timexline {
    position: relative;
    padding: 0;
    width: 100%;
    margin-top: 0;
    list-style-type: none;
}

.timexline:before {
    position: absolute;
    left: 0;
    top: 6rem;
    content: ' ';
    display: block;
    width: 2px;
    height: 100%;
    margin-left: -1px;
    background-image: radial-gradient(rgba(0, 0, 0, 1) 1.5px, rgba(0, 0, 0, 0) 1.5px);
    background-position: calc(16px / 2 + 1.5px) calc(16px / 2 + 1.5px);
    background-size: 16px 16px;
    z-index: -1;
}
.timexline li {
    padding: 2em 0;
}

.timex-wrapper{
    position: sticky;
    top: 100px;
}
.timex {
    position: absolute;
    display: grid;
    grid-template-areas:
    "line start" 
    "line end";
    gap: .75em .5em;
    color: #222;
    left: 0;
    /* background: var(--bg-color-body); */
    background: #FFF;
    padding-top: 15px;
}
.timex::before {
    content: "";
    width: 14px;
    height: 3px;
    margin-top: 7px;
    border-radius: 1px;
    background-color: #222;
}
.timex-start{
    grid-area: start;
    font-weight: 600;
}
.timex-end{
    grid-area: end;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}
.mes {
    position: -webkit-sticky;
    position: sticky;
    top: 6rem;
    padding: 1rem .5rem;
    margin: 0;
    font-weight: 400;
    font-size: .875rem;
    text-align: center;

    color: rgba(0, 0, 0, 0.56);
    z-index: 2;

}
.mes time {
    display: inline-block;
    padding: .25em .5em;
    border-radius: 1em;
    background-color: var(--bg-color-body);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

@media only screen and (max-width:567px) {
    .timexline:before{
        left: 50%;
    }
    .timex-wrapper{
        position: relative;
        top: 0;
        z-index: -1;
    }
    .timex:before{
        height: 2px;
        margin: 30px auto;
    }
    .timex{
        gap: normal;
        position: relative;
        display: flex;
        left: 0;
        text-align: center;
        flex-direction: column;
        background-color: var(--bg-color-body);
    }
}


/* * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * LANDING PAGE  * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * */

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

.login {
    display: flex;
    height: 100vh;
    padding: 0px;
}
.login .left {
    flex: 1;
    transition: 1s;
    background-image: url('/img/PALACIO-MUNICIPAL-PUEBLA.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.login .left .authoverlay {
    /*padding: 10px;*/
    width: 100%;
    height: 100%;
    background: rgba(105, 28, 50, 0.3);
    /*background-color: rgba(246, 193, 8, 0.1);*/
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}
.login .left .authoverlay .logo{
    width: 190px;
    height: auto;
    margin-top: 10px;
    margin-left: 10px;
}
@media (max-width: 980px) {
    .login .left {
        width: 0%;
        display: none;
    }
    .login .right{
        width: 100% !important;
        padding: 20px 0px !important;
        display: contents;
    }
}

.login .right {
    padding: 50px;
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: center;
    
    -webkit-animation-name: left;
            animation-name: left;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}

/* center table */
.login .left.public{
    position: fixed;
    height: 100vh;
}
.login .right.public{
    min-height:100%;
    display: table;
    width: 80%; 
    position: absolute;
    right: 0;
}
.login .public.der{ right: 0 !important; }
.login .public.izq{ left: 0 !important; }


.login .auth-nav {
    display: block;
    padding: 21px 0px 0px 0px;
}


@media screen and (max-width: 500px) {
    .login .auth-nav {
        padding: 10% 0 0 21px;
    }
    .login .auth-link{ display: block !important;}
    .login .auth-link-top{ display: none; }
}


.login .back-link {text-align: left; float: left; color: #222;}
.login .back-link:hover { color: var(--primary-500); }
.login .auth-link{ display: none;}
.login .auth-link-top{
    margin: 0;
    text-align: right;
    float: right;
    font-size: 15px;
}   

.auth-content {
    width: 100%;
    max-width: 650px;
    margin: auto;
    padding: 10%;
}

.recaptcha-terms {
    margin-top: 20px;
    max-width: 300px;
    color: #9e9ea7;
    font: normal 11px/16px "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: left;
}


.cliente{
display: flex;
justify-content: center;
}
.cliente .logo{
margin: auto 0;
}
.cliente img{
width: 90px;
}
.cliente .nombre{
margin: auto 0;
padding-left: 15px;
}
.cliente .nombre h1{ color: #F6C108; line-height: 1.5rem; font-size: 3.5rem; }
.cliente .nombre h1 small{ font-size: 50%;}
/* Animación */
.animation {
    -webkit-animation-name: move;
            animation-name: move;
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}

.a1 {
-webkit-animation-delay: 2s;
        animation-delay: 2s;
}

.a2 {
-webkit-animation-delay: 2.1s;
        animation-delay: 2.1s;
}

.a3 {
-webkit-animation-delay: 2.2s;
        animation-delay: 2.2s;
}

.a4 {
-webkit-animation-delay: 2.3s;
        animation-delay: 2.3s;
}

.a5 {
-webkit-animation-delay: 2.4s;
        animation-delay: 2.4s;
}

.a6 {
-webkit-animation-delay: 2.5s;
        animation-delay: 2.5s;
}

@-webkit-keyframes move {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
@keyframes move {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
@-webkit-keyframes left {
    0% {
        opacity: 0;
        width: 0;
    }
    100% {
        opacity: 1;
        padding: 20px 40px;
        width: 43%;
    }
}
@keyframes left {
    0% {
        opacity: 0;
        width: 0;
    }
    100% {
        opacity: 1;
        padding: 20px 40px;
        width: 43%;
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * LANDING PAGE  * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * */

.container-title h1{
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: var(--fs-4);
    line-height: 1.2;
    color: #F6C108;
}
.container-title h2{
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: var(--fs-3);
    line-height: 1.3;
    color: #26316F;
    text-align: left;
}
.container-title.auto h2{ margin: auto; }


@media (max-width: 572px) { .link-carpeta-servicios{ display: block !important; }}
.link-carpeta-servicios{
    color: #222;
    text-decoration: none;
    text-align:center;
    cursor: pointer;
    width: auto !important;
}

.img-carpeta{ height: 300px; }
.img-carpeta img{ object-fit: contain; border: 20px solid #ffff; border-radius: 7px;}


/* * * * * * * MENSAJE INTRODUCTORIO * * * * * * */

.info-section{
    display: flex;
    margin: 0;
}
.info-section.rev{ flex-direction: row-reverse;}
.img-section{
    width: 50%;
    padding: 0 40px;
    text-align: center;
    margin: auto;
}
.img-section img{
    width: 70%;
    max-width: 100%;
    height: auto;
    
}
.text-section{
    flex-direction: column;
    padding: 50px;
    width: 50%;
    display: flex;
    justify-content: center;
}

.text-section.izq{
    text-align: left !important;
    align-items: start !important;
}

.text-section p{
    margin: 20px 0px 0px 0px;
    line-height: 1.5;
    font-size: 1.2rem;
    color: #6D6D6D;
    text-align: justify;
}


@media screen and (max-width: 785px) {
    .info-section {
        display: grid;
        margin: 0px auto;
    }
    .img-section{
        width: 100%;
        padding: 10px;
    }
    .text-section{
        width: 100%;
        padding: 10px;
    }
}

/* * * * * * * * ORGANIZACIÓN / H. AYUNTAMIENTO * * * * * * * */

.organizacion {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin: 15px 0px 0px;
color: #222;
text-align: left;
}

.organizacion-body{ padding-left: 100px !important; }
@media (max-width: 572px) { .organizacion-body{ padding-left: 0px !important; } }

.organizacion h5 {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
word-break: break-word;
overflow: hidden;
margin: 10px 0;
padding-left: 28px;
border-left: 10px solid #253786;
color: #0E0D0D !important;
font-weight: 600 !important;
font-size: 1.7rem !important;

}
.organizacion h5 a{ color: #253786; font-weight: 700; }
.organizacion h5 span {
padding-top: 5px;
color: #3d3b3b !important;
font-weight: 400;
font-size: 1.3rem;
}

.contenido-organizacion, .organizacion-enlaces, .organizacion-numeros{ margin-top: 10px; }

.contenido-organizacion h4, .organizacion-enlaces h4 {
    color: #0E0D0D !important;
    padding-top: 10px;
    margin-bottom: 27px;
}
.organizacion-numeros {
font-weight: bold;
font-size: 5em;
color: #253786;
padding-bottom: 0;
text-align: center !important;
}
.organizacion-text{
    color: #606060;
    line-height: 1.8;
    margin: 0 0 10px;
    text-align: center !important;
    font-size: 1.3rem;
}

.organizacion-enlaces div ul li a{
    text-align: left;
    color: #222;
    font-size: 1.3rem;
    text-decoration: none;
}
.organizacion-enlaces div ul li a:hover{
    text-decoration: underline;
}
.organizacion-enlaces div ul li a:hover svg{
    transform: translateX(5px);
}
.organizacion-enlaces div ul li a svg{
    width: 15px;
    height: 15px;
    margin-right: 7px;
    transition: 0.3s ease;
}
    
            
            /*
            CONTACTO  
            */
    
            .card-contacto {
            padding: 15px 20px 20px 20px;
            background: #FFFFFF;
            color: #999999;
            box-shadow: 0 0 0 rgb(0 0 0 / 0%);
            transition: all 0.3s ease-in-out;
            height: 150px !important;
            text-align: center;
            }
            .card-contacto:hover {
            box-shadow: 0 5px 20px 0 rgb(0 0 0 / 25%);
            cursor: pointer;
            }
            .card-contacto p{
            text-align: center !important;
            font-size: 17px;
            font-weight: bold;
            }

/* * * * * * * *  PERSONAS CABILDO * * * * * * * */

/* - - - - - Escudo & Nombre completo  - - - - - */
.org{ text-align: center; background-color: var(--bg-color-body); color: var(--primary-500); }

/* * * * * * * *  RELEVANTE CURSO / EVENTO * * * * * * * */
.relevante{
    color: #FFF;
    text-align: center;
    height: 200px;
    position: relative;
    padding: 12px !important;
    margin: 10px !important;
}
.relevante h1{ font-size: 17px !important; }
.relevante p{ font-size: 16px !important; position: absolute; bottom: 10px; margin: auto; left: 0; right: 0; text-align: center; }
.relevante.blue{ background-image: linear-gradient(to right, #26316F, #3E53C6); } 
.relevante.cian{ background-image: linear-gradient(to right, #439DE9, #7CBDF3); }


/* Carousel */
/* * * * * * * * * * * * * * * * * */
/* * * * * *  CAROUSEL * * * * * * */
/* * SNAP/CONTROLS/SCROLL/TOUCH  * */
/* * * * * * * * * * * * * * * * * */
.profile{
    width: 250px;
    text-align: center;
    display: block;
}

.carousel {
    position: relative;
    width: 100%;
    padding-bottom: 60px;
    /*padding: 10px 45px;*/
}
.carousel_scroller {
    /* snap mandatory en horizontal  */
    scroll-snap-type: x mandatory;

    overflow-x: scroll;
    overflow-y: hidden;

    display: flex;
    align-items: center;

    /*height: 100%;*/
    
    /* Safari touch scrolling snap */
    -webkit-overflow-scrolling: touch;

    padding: 0 15px;
}

/* Touch ready */
.active { scroll-snap-type: unset; }

.carousel_scroller div.carousel_card {
    scroll-snap-align: center;
    position: relative;
    /* - - - - Tamaño del card dentro del carousel por defetcto - - - - */
    min-height: 20px;
    /* - - - - - - - - */
    margin: 10px 25px;
}

/* btn */
.carousel .btn-carousel {
    width: 40px;
    height: 40px;
    top: 50%;
    position: absolute;
    
    transform: translateY(-50%);
    background-position: 50% 50%;
    background-repeat: no-repeat;        

    background-color: #F1F1F1;
    transition: ease 200ms all;
    font-family: inherit;
    color: #222;
}
.carousel .btn-carousel.next {
    padding: 8px;
    /*right: 0px;*/
    right: -20px;
}
.carousel .btn-carousel.prev {
    padding: 8px;
    left: 0px;
    /*
    color: #FFFFFF;
    left: 15px;
    */
    left: -20px;
}
.carousel .btn-carousel.next:hover { background-color: #222; border: 2px solid #222; color: #fff; }
.carousel .btn-carousel.prev:hover { background-color: #222; border: 2px solid #222; color: #fff; }

/* Contenido *//* Contenido *//* Contenido */
.carousel_scroller div.carousel_card .puesto{
    font-size: 17px;
}
.carousel_scroller div.carousel_card .name{
    font-size: 18px;
    color: #253786;
}
.carousel_scroller div.carousel_card .name small{
    font-size: 70%;
    color: rgba(0,0,0,0.7);
}

.carousel_scroller div.carousel_card:hover a p{
    font-weight: bold;
}

/* Slider Alianzas */
.alianzas {
    height: 120px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.alianzas .alianzas-track {
    animation: scroll 60s linear infinite;
    display: flex;
    width: calc(550px * 60);
    transition: all 2s ease;
}
.alianzas .alianzas-track:hover {
    animation-play-state: paused;
}
.alianzas .alianza-slide {
    height: 120px;
    width: auto;
}
.alianzas .alianza-slide img{
    width: auto;
    height: 50px;
    margin: 25px;
}
/* - - - */
.alianzas::before, .alianzas::after {
    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100%;
    position: absolute;
    width: 100px;
    z-index: 2;
}
.alianzas::after {
    right: 0;
    top: 0;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}
.alianzas::before {
    left: 0;
    top: 0;
}
/* - - - */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-550px * 7));
    }
}

/* - - - EXPOSITORES - - - */

/* * * * * * * * * * * * * * * * * */
/* * * * *  VISOR GALERY OK * * * * * */
/* * * * * * * * * * * * * * * * * */

.garelly{
    text-align: center;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 680px;
}

.featured {
    white-space : nowrap;
    border-radius : 50%;
    position : relative;
    cursor : pointer;
    display : -webkit-inline-box;
    display : -webkit-inline-flex;
    display :    -moz-inline-box;
    display : -ms-inline-flexbox;
    display :         inline-flex;
    font-size : 0.75rem;
    text-align : center;
    vertical-align : middle;
    margin : 5px;


    border: .5px dashed #222;
    -webkit-box-shadow: 0 2px 10px 0 rgba(184, 194, 204, 0.3);
    box-shadow: 0 2px 10px 0 rgba(184, 194, 204, 0.3);
    width: 60px;
    height: 60px;
    background: #fff;
    content: "+";
    color: #222;
}

.featured svg{
    margin: auto;
    height: 20px;
    width: 20px;
}

.gallery-list li + li {
    margin-left : -1rem;
}

.gallery-list li img {
    border : .5px solid #FFFFFF;
    width: 60px;
    height: 60px;
}

.pull-up {
    -webkit-transition : all 0.25s ease;
    -o-transition : all 0.25s ease;
    -moz-transition : all 0.25s ease;
    transition : all 0.25s ease;
}
.pull-up:hover {
    -webkit-transform : translateY(-4px) scale(1.02);
    -moz-transform : translateY(-4px) scale(1.02);
    -ms-transform : translateY(-4px) scale(1.02);
    -o-transform : translateY(-4px) scale(1.02);
    transform : translateY(-4px) scale(1.02);
    -webkit-box-shadow : 0 14px 24px rgba(62, 57, 107, 0.2);
    box-shadow : 0 14px 24px rgba(62, 57, 107, 0.2);
    z-index : 30;
}
.rounded-circle {
    border-radius: 50% !important;
}



.featured p{
    position: absolute;
    bottom: 30px;
    right: -9px;
    font-size: 9px;
}
.btn-photos{
    padding: 5px 20px;
    margin-left: 15px;
    color: #222;
    font-size: 13px;
    background-color: rgba(255,255,255,1);
}
.btn-photos:hover {
    color: #FFFFFF !important;
    background-color: #222; 
}
.btn-fotos{
    margin: 0px !important;
    display: inline;
}

/* * * * * * * * * * * * * * * * * * * * * * * * */
        /* * * * * * * *  PERSONAS CABILDO * * * * * * * */
        /* * * * * * * * * * * * * * * * * * * * * * * * */

        .person {
            align-items: center;
            display: flex;
            flex-direction: column;
            }
            .person.presidente{
                margin: 40px auto;
            }
            .picture-inner.presi{ transform: scale(2); top: -315px; }
            .picture {
            border-radius: 50%;
            height: 312px;
            -webkit-tap-highlight-color: transparent;
            transform: scale(0.48);
            transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
            width: 400px;
            }
            .picture:hover {
            transform: scale(0.54);
            }
            .picture-inner {
                clip-path: path( "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z" );
                position: relative;
                transform-origin: 50%;
                top: -200px;
                text-align: center;
            }
            .circle {
            background-color: rgb(247, 195, 8, 0.1);
            border: 3px solid #F6C108;
            border-radius: 50%;
            cursor: pointer;
            height: 380px;
            left: 10px;
            pointer-events: none;
            position: absolute;
            top: 210px;
            width: 380px;
            }
            .img-person {
                pointer-events: none;
                position: relative;
                transform: translateY(20px) scale(1.15);
                transform-origin: 50% bottom;
                transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
                margin: 0 auto;
                top: 220px;
                width: 300px;
            }
            .picture:hover .img-person {
            transform: translateY(0) scale(1.2);
            }
            /*
            .img1 {
            left: 22px;
            top: 164px;
            width: 340px;
            }
            .img2 {
            left: -46px;
            top: 174px;
            width: 444px;
            }
            .img3 {
            left: -16px;
            top: 144px;
            width: 466px;
            }
            */
            .divider {
            background-color: #ccc;
            height: 1px;
            width: 160px;
            }
            .name {
            color: #404245;
            font-size: 20px;
            font-weight: 600;
            margin-top: 16px;
            text-align: center;
            }
            .puesto {
                color: #6e6e6e;
                font-size: 15px;
                margin-top: 4px;
                height: 70px;
                overflow-y: auto;
                padding: 0 3px;
            }


            @media only screen and (max-width: 567px) { .person.presidente{ transform: scale(1.1); margin: 0 auto; } .picture-inner.presi{ transform: scale(1.1); } }
/* * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * FAQS  * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * */
.question {
    position: relative;
    color: #222222;
    /*background: #F7F7F7;*/
    margin: 0;
    padding: 10px 10px 10px 0px;
    display: block;
    width:100%;
    font-size: 1.3rem;
    cursor: pointer;
}
/*Answer*/
.answers {
    padding: 0px 15px;
    margin: 5px 0;
    width:100%!important;
    height: 0;
    overflow: hidden;
    z-index: -1;
    position: relative;
    opacity: 0;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    color: rgba(0,0,0,0.7);
}
.qbox { display: none; }
.qbox:checked ~ .answers{
    height: auto;
    opacity: 1;
    padding: 15px;
    z-index: 1;
}
/*FAQ Toggle*/
.plus {
    position: absolute;
    color: rgba(38, 49, 111, 0.3);
    /*margin-left: 15px;*/
    margin-top: 19px;
    z-index: 1;
    font-size: 2em;
    line-height: 100%;
    -webkit-user-select: none;    
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}
.qbox:checked ~ .plus {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.section-secondary{
    background-color: var(--secondary-400);
    padding: 20px;
    margin: 20px 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * COUNTDOWN * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * */
.countdown {
    color: #222;
    opacity: 0.2;
    text-align: center;
}
.countdown h1 {
    font-weight: normal;
}
.countdown li {
    display: inline-block;
    font-size: 1em;
    list-style-type: none;
    padding: 1em;
    text-transform: uppercase;
}
.countdown li span {
    display: block;
    font-size: 4.5rem;
    font-weight: 600;
}

/* * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * *  FOOTER * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * */

footer {
    padding: 50px 0;
    margin: 0px auto;
    width: 100%;
    border-radius: var(--border-radius) var(--border-radius) 0px 0px;
    position: relative;
    color:#fff;
}
footer .logo{
    text-align: center;
}
footer .logo img{
    width: 200px;
}
footer .avisos{
    text-align: center;
    display: block;
    padding: 30px 10px;
}
footer .avisos a{
    text-decoration: none;
    color: var(--white-color);
    margin: 0px 10px;
    transition: 0.1s ease;
}
footer .avisos a:hover{
    border-bottom: 2px solid var(--white-color);
}

.form-control.contact{
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.1);
}
.text-contact{
    color: rgba(255,255,255,0.7);
}

/* =============== Footer =============== */

    /* Animation */
    body.active .wrapper {
        transform: translateY(-100px) scale(0.9);
        cursor: pointer;
        border-radius: 25px;
    }
    body.active .wrapper .bg-slider{
        border-radius: 25px;
    }
    .wrapper {
        transform-origin: center bottom 0px;
        transition: all 0.5s ease 0s;
        box-shadow: 0px 22px 54px rgba(0, 0, 0, 0.5);
        background-color: var(--white-color);
        /*height: 100vh;*/
    }


/* ....TABS......................................................................... */

.tab_container {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.tab_container input[id^="tab"],.tab_container section {
    clear: both;
    padding-top: 10px;
    display: none;
}
.tab_container label.radio {
    display: block;
    float: left;
    width: 33.3333%;
    
    color: #757575;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    background: #FFFFFF;
    position: sticky;
    top: 0px;

    margin-bottom: 50px;
    padding: 10px;
    z-index: 1;
}
/*
.tab_container [id^="tab"]:checked ~ section[id^="content"] {
    display: grid;
    padding: 20px;
    background: #fff;
    color: #999;
    border-bottom: 2px solid #f0f0f0;
}
*/
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: grid;
padding: 0px;
/*border-bottom: 2px solid #f0f0f0;*/
}


/*
.tab_container .tab-content p,
.tab_container .tab-content h3 {
-webkit-animation: fadeInScale 0.3s ease-in-out;
-moz-animation: fadeInScale 0.3s ease-in-out;
animation: fadeInScale 0.3s ease-in-out;
}
*/

/* *** */
.tab_container [id^="tab"]:checked + label.radio {
    background-image: linear-gradient(to right, #26316F, #3E53C6);
    color: #FFF;
    border-bottom: 2px solid #f7f7f7;
    border-radius: 2px;
    
}

.tab_container [id^="tab"]:checked + label.radio svg {
    margin-right: 7px;
}
.tab_container [id^="tab"] + label.radio svg {
    margin-right: 7px;
}

label.radio .fa {
font-size: 1.3em;
margin: 0 0.4em 0 0;
}

/*Media query*/
@media only screen and (max-width: 900px) {
label.radio span {
    display: none;
}

.tab_container {
    width: 98%;
}
}

/*Content Animation*/
@keyframes fadeInScale {
0% {
    transform: scale(1);
    opacity: 0;
}

100% {
    transform: scale(1);
    opacity: 1;
}
}

.no_wrap {
text-align:center;
color: #0ce;
}
.link {
text-align:center;
}
/* ............................................................................. */


/* Dahboard cliente REVISAR */
.contadores{ margin-top: 30px; text-align: left; }
        .invitados{ text-align: left; }
        .contadores div{ border-left: 1px solid rgba(0,0,0,0.1); color: #FFFFFF;}
        .contadores strong{ font-size: 25px; display: block; }

        @media only screen and (max-width: 567px){
            .contadores{ margin-top: 30px; text-align: center; }
            .contadores div{ border-left: 1px solid rgba(0,0,0,0); }
            .contadores>div:nth-child(2){ border-left: 1px solid rgba(0,0,0,0.1); border-right: 1px solid rgba(0,0,0,0.1); }

            .invitados{ text-align: center; }

            .user-perfil{ text-align: center !important; }

            .user-registros{ justify-content: center  ;}
        }

        .user-foto{
            border-radius: 100%; width: 150px; height: 150px; object-fit: cover; display: block; margin: auto; border: 5px solid #fff; box-shadow: 0 3px 30px rgba(0,0,0,0.1);
        }
        .user-perfil{ text-align: left; }
        .user-titulos{ font-size:70%; font-weight: 500; }
        .user-registros{ display: flex;  overflow-x: auto; text-align: left;}

        /* - - - FILTRO - - - */
        #stacked-chart {
            background-color: #ececf1;
            border: 1px solid #ececf1;
            border-radius: 5px;
            overflow: hidden;
            display: grid;
        }
        #stacked-chart a {
            color: white;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 12px;
            line-height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .category-total{
            margin-top: 20px;
        }
        .category-cir{
            color: #222;
            display: inline-flex;
            /*margin-left: 10px;*/
            font-size: 12px;
            font-weight: bold;
        }
        .category-cir.filter{
            margin: 10px 20px;
        }
        .category-cir span{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }

        /* ********************** */
        hr.bien {
            margin-top: 0.5rem;
            margin-bottom: 1rem;
            border: 0;
            border-top-color: currentcolor;
            border-top-style: none;
            border-top-width: 0px;
            border-top: 1px solid rgba(0,0,0,.2);
        }



        .bar_element{
            opacity: 0.9;
            transform: ease 1s all;
        }
        .bar_element:hover{
            opacity: 1;
        }
        
        .list-registros{
            margin-top: 15px;
            display: flex;
        }
        .list-registros li{ padding: 0 10px; border-left: 1px solid #eee; }
        @media only screen and (max-width:567px) {
            .list-registros {
                display: block;
            }
            .list-registros li{ padding: 0 7px; border-bottom: 1px solid #eee; border-left: 0px }
            .list-registros li strong{
                float: right;
            }    
        }

        .nav-link{
            color: #222;
            /*color: #FFF;*/
        }
        .nav-link.active{
            border-bottom: 3px solid rgba(38, 49, 111,0.9);
            /* border-bottom: 3px solid rgba(255,255,255,0.9); */
        }



    
    
/* Revisar , Style from constancias */
.img-course{ display: flex; width: 560px; }
        @media only screen and (max-width:567px) {.img-course{ display: flex; width: 100%; }}
    
        /* --- Loader --- */
        /* .loader-container {
            position: relative;
            height: 200px;
            width: 100%;
        } */

        .loader {
            position: relative;
            margin: auto;
            margin-top: 40px;
            height: 100px;
            width: 320px;
        }
        .loader .dot {
            position: absolute;
            transform: translate(-50%, -50%);
            top: 52.5%;
            left: 150px;
            height: 5px;
            width: 5px;
            background-color: #909090;
            border-radius: 0rem;
        }
        .loader .dot:nth-child(1) {
            left: 80px;
            animation: waveUp 2s, smallExtend 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }
        .loader .dot:nth-child(2) {
            left: 115px;
            animation: waveUp 2s, largeExtend 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-delay: 0.15s;
        }
        .loader .dot:nth-child(3) {
            animation: waveUp 2s, smallExtend 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-delay: 0.3s;
        }
        .loader .dot:nth-child(4) {
            left: 185px;
            animation: waveUp 2s, largeExtend 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-delay: 0.45s;
        }
        .loader .dot:nth-child(5) {
            left: 220px;
            animation: waveUp 2s, smallExtend 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-delay: 0.6s;
        }
        @keyframes waveUp {
            0%, 15% {
                top: 50%;
            }
            45%, 65% {
                top: 42.5%;
            }
            85%, 100% {
                top: 50%;
            }
        }
        @keyframes smallExtend {
            0%, 8% {
                background-color: #ccc;
                height: 10px;
            }
            14%,34% {
                background-color: #26316F;
                height: 30px;
            }
            46%,100% {
                background-color: #ccc;
                height: 10px;
            }
        }
        @keyframes largeExtend {
            0%,8% {
                background-color: #ccc;
                height: 10px;
            }
            14%,34% {
                background-color: #26316F;
                height: 70px;
            }
            46%,100% {
                background-color: #ccc;
                height: 10px;
            }
        }


        /* - - - FILTRO - - - */
        #stacked-chart {
            background-color: #ececf1;
            border: 2px solid #ececf1;
            border-radius: 5px;
            overflow: hidden;
            display: grid;
        }
        #stacked-chart a {
            color: white;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 12px;
            line-height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .category-total{
            margin-top: 20px;
        }
        .category-cir{
            color: #222;
            display: inline-flex;
            /*margin-left: 10px;*/
            font-size: 12px;
            font-weight: bold;
        }
        .category-cir.filter{
            margin: 10px 20px;
        }
        .category-cir span{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }

        /* ********************** */
        hr.bien {
            margin-top: 0.5rem;
            margin-bottom: 1rem;
            border: 0;
            border-top-color: currentcolor;
            border-top-style: none;
            border-top-width: 0px;
            border-top: 1px solid rgba(0,0,0,.2);
        }
        
        /* ********************** */
        .bar_element{
            opacity: 0.9;
            transform: ease 1s all;
        }
        .bar_element:hover{
            opacity: 1;
        }

/* =================== SHARE Y NAVIGATION BTNS REVISAR ==========================*/
/* * * * * * * * * * * * * * * * * * * * * * * * */
            /* * * * * * * * * SHARE ARTICLE * * * * * * * * */
            /* * * * * * * * * * * * * * * * * * * * * * * * */

    
                /* * * * * * * * * * * * * * * * * * * * * * * * */
                /* * * * * * * * NAVIGATION ARTICLE  * * * * * * */
                /* * * * * * * * * * * * * * * * * * * * * * * * */
    
                .navigation-article{
                width: 100%;
                display: block;
                overflow: hidden;
                text-align: center;
                position: relative;
                padding-top: 50px;
                }
                .navigation-article ul{
                display: block;
                list-style: none;
                overflow: hidden;
                }
                .navigation-article li {
                width: 50%;
                float: left;
                padding: 0 5px;
                min-height: 24px;
                position: relative;
                margin: 0 auto 30px;
                }
    
                .navigation-article ul li.previus{
                text-align: left;
                }
                .navigation-article ul li.next{
                text-align: right;
                }
    
                .navigation-article ul li a{
                padding: 20px;
                display: block;
                border-radius: 2px;
                border: 1px solid #999999;
                }
    
                .navigation-article ul li a:hover{
                background-color: rgba(86, 113, 255, 0.1);
                }
    
                .navigation-article ul li a h4{
                text-overflow: ellipsis;
                overflow: hidden;
                height: 25px;
                white-space: nowrap;
                color: #253786;
                }
    
                .navigation-article ul li a svg {
                width: 15px;
                height: 15px;
                }
    
                .navigation-article ul li a .nav-title span{
                font-weight: 600;
                font-size: 17px;
                }
    
                .navigation-article ul li.previus a .nav-title{
                padding-left: 10px;
                }
                .navigation-article ul li.next a .nav-title{
                padding-right: 10px;
                }


/* ====================== ANIMACIONES ====================== */

.pulse-primary { box-shadow: 0 10px 44px rgba(67, 134, 252, 0.49); animation: pulso 3s infinite; transition: transform 0.3s ease; }
@keyframes pulso {
    0% { box-shadow: 0 10px 44px rgba(67, 134, 252, 0.49), 0 0 0 0 rgba(67, 134, 252, 0.9); }
    100% { box-shadow: 0 10px 44px rgba(67, 134, 252, 0.49), 0 0 0 8px rgba(67, 134, 252, 0); }
}

.pulse-warning { box-shadow: 0 10px 44px rgba(246, 193, 8, .1); animation: pulse-animation-warning 2s infinite; transition: transform 0.3s ease; border: 1px solid rgba(0,0,0,0.3)!important;}
.pulse-success { box-shadow: 0 10px 44px rgba(40,199,111, .8); animation: pulse-animation-success 2s infinite; transition: transform 0.3s ease; border: 1px solid rgba(0,0,0,0.3)!important;}
.pulse-danger { box-shadow: 0 10px 44px rgba(218, 40, 16, .8); animation: pulse-animation-danger 2s infinite; transition: transform 0.3s ease; border: 1px solid rgba(0,0,0,0.7)!important;}

@keyframes pulse-animation-success {
    0% { box-shadow: 0 5px 44px rgba(40,199,111, .3), 0 0 0 0 rgba(42, 235, 128, 0.5); }
    100% { box-shadow: 0 5px 44px rgba(40,199,111, .3), 0 0 0 8px rgba(442, 235, 128, 0); }
}
@keyframes pulse-animation-warning {
    0% { box-shadow: 0 10px 44px rgba(246, 193, 8, .5), 0 0 0 0 rgba(214, 171, 17, .7); }
    100% { box-shadow: 0 10px 44px rgba(246, 193, 8, .5), 0 0 0 8px rgba(214, 171, 17, 0); }
}
@keyframes pulse-animation-danger {
    0% { box-shadow: 0 5px 44px rgba(218, 40, 16, .6), 0 0 0 0 rgba(218, 40, 16, .7); }
    100% { box-shadow: 0 5px 44px rgba(218, 40, 16, .6), 0 0 0 8px rgba(218, 40, 16, 0); }
}