/*
        Main css style

        Colors: 
        - blue: #0d0a17; 
*/

/* 0. GLOBAL */

/* Font import moved to instance.css for per-customer customization */

/*Fuentes de articles*/
h4.article-title { font-family: 'Newsreader', serif; font-weight: 600;   font-display: auto;}
h5.article-title { font-family: 'Newsreader', serif; font-weight: 400;   font-display: auto;}

.wall { position: fixed; height: 0%; width: 100%; opacity: 0; bottom: 0px; left: 0px; background: rgba(0,0,0,0.7); color: white; padding: 3em 1em 1em; }
.white { color: white !important; }

body {    background: #000; font-family: var(--instance-font-family, 'Montserrat', sans-serif) !important; font-display: auto; font-weight: 300; color: #fff; margin: 0; padding-top: var(--instance-header-height, 74px); }

body.overflow { overflow: hidden; }
.text-justify { text-align: justify}

.w-100 {
  height: auto;
  width: 100%;
}

/* width */
 ::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0,0,0,.2);
}

/* Handle */
 ::-webkit-scrollbar-thumb {
  background: #777
}

/* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
  background: #777
}
 ::-webkit-scrollbar-track:hover {
  background: rgba(0,0,0,0.3);
}

.home .row .cell { flex-shrink: unset !important;}

.closePlayer, .videoTitle { text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
.closePlayer { position: absolute; top: 20px; right: 20px; font-size: 2em; color: white; cursor: pointer}
.videoTitle { position: absolute; top: 20px; left: 20px; color: white; cursor: pointer; font-size: 2em;  }

.navbar .iconsvg { margin-top: -4px !important;  }
.iconsvg { filter: invert(1); }

/* Instance-specific header background - color defined in instance.css */
.header-background-color {
    background-color: var(--instance-header-bg, rgba(34,28,38,0.95));
}
/*.iconsvg:hover { filter: invert(13%) sepia(80%) saturate(7199%) hue-rotate(329deg) brightness(101%) contrast(110%);  }*/
.iconsvgblack { filter:invert(0)  }
.iconsvgblack:hover { filter:invert(0)  }

.iconsvgpink { filter: invert(82%) sepia(58%) saturate(4921%) hue-rotate(108deg) brightness(110%) contrast(103%); }
.iconsvgpink:hover { filter: invert(1); }

.iconsvggreen {filter: invert(29%) sepia(70%) saturate(927%) hue-rotate(71deg) brightness(100%) contrast(104%);  }
.iconsvggreen:hover { filter: invert(1);}

.iconsvgwhite { filter:invert(1)  }
.iconsvgwhite:hover { filter:invert(0.5)  }

* { box-sizing: border-box; }


.fa-step-backward {
  order: -101; /* to the left of the play/pause-button */
  cursor: pointer;
}
.fa-step-forward {
  order: -100; /* to the right of the play/pause-button */
  cursor: pointer;
}

canvas { display: block; }

.clear { clear: both; }
.float-left { float: left; }

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #202020;
  z-index: -3; 
  top: 0px; left: 0px; 
}

.bg-dark { background-color: rgba(34,28,38,0.8) !important; }
.bg-dark:hover { background-color: rgba(34,28,38,1) !important; }

strong, b, .strong { font-weight: 600; }
h1, h2, h3, h4 { font-weight: 300; }

main { min-height: 800px;}
main.home { min-height: 600px; background:none; }

a { color: var(--instance-link-color, #00ff9d); text-decoration: none;}
a:hover { color: var(--instance-link-color, #00ff9d); text-decoration: underline; }
.fixed-top a:hover { text-decoration-color: var(--instance-menu-underline-color, #00ff9d); text-underline-offset: 6px; }

.logo { 
  width: 150px;
  /*margin-bottom: 11px;*/
  margin-top: 0px; margin-right:20px }
.logosmall { width: 100px; }

.logo_flags{
  width: 18px;
}

.success { color: #157200; }

/* Home animation */
.swiper-wrapper { padding: 0; }

.bigIconsMenu i { font-size: 1.3em; } 

.primarycolor { color: #0d0a17; } 
.secondarycolor { color: #0d0a17; } 

a.lang { color: var(--instance-link-color, #00ff9d) !important;}
a.lang.active { background: #0d0a17 !important; color: white !important;}


.article.videothumb{ padding: 5px; border-radius: 5px; }
.article.videothumb:hover{ background: rgba(255,255,255,0.7); color: black; border: 1px solid #F3F5F7; }

.articlethumb { text-decoration: none !important; color: inherit; }
a .videothumb, .videothumb a, .categthumb a { color: white; text-decoration: none;  }
a.articlethumb .videothumb  { color: inherit; text-decoration: none !important;  }
a.articlethumb h5 { font-size: 1em; margin-top: 5px;  }
a.articlethumb .articleDescription { text-align: justify; font-size: 0.9em; }
a.articlethumb .overinfo { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; color: white; background: rgba(0,0,0,.7); border-radius: 10px; }
a.articlethumb .overinfo .btn-primary {  margin-top: 10px; }
a.articlethumb .overinfo:hover { background: rgba(0,0,0,.9); }
.articleThumb small { font-size: 0.8em; }
.articleThumb h5 { margin-bottom: 0px; padding-bottom: 0px; }

a.articlethumb .overinfo .content {
   border: 5px solid white; 
   padding: 20px; 
   position: absolute; height: 90%; width: 90%;
   top: 5%; left: 5%; 
 }
a.articlethumb .overinfo  h5 { font-size: 1.4em; margin-top: 10%;  text-align: center; }

.article .main-article { width: 100%; height: 360px; background-position: center center; background-size: 100% auto; background-repeat: no-repeat;   }

.navbar .nav-link { font-weight: 400;}
.navbar { padding-top: 0px; }
.navbar.fixed-top { z-index: 10000; }

.fixed-top .menu-top {  padding: 12px; text-align: center; width: 100%;  background: #00ff9d; font-size: 0.9em; }
.fixed-top .menu-top .close {  float: right; margin-top: -5px; }

.fixed-top .menu-top a { color: white; }
.fixed-top .menu-top a:hover { text-decoration: underline }
#menu_horizontal { background: rgba(0,0,0,0.2); border-top: 1px solid darkgray; border-bottom: 1px solid darkgray; max-width: 100%;  margin-top: 30px;  }
.menu-articles { font-size: 2em; text-transform: uppercase;}
.menu-articles .nav-link { color: white; }
.menu-articles .nav-link:hover { color: #202020; }

.menu-articles .nav-link:after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #202020;
    transition: width .3s;
}

.menu-articles .nav-link:hover::after {
  width: 100%;
}

.round-gray {
  background: #F3F5F7;
   border-radius: 90px 90px 90px 90px;
  -moz-border-radius: 90px 90px 90px 90px;
  -webkit-border-radius: 90px 90px 90px 90px;
  border: 0px solid #000000;
  padding: 35px 0;
  width: 110px; margin: 0px auto; text-align: center;
  margin-bottom: 30px;
}

.article .image-text { float: right; max-width: 40%; margin: 0px 0px 10px 20px; }

.btn-purple, .btn-primarycolor, .btn-primary {font-family: var(--instance-font-family, 'Montserrat', sans-serif); background-color: var(--instance-btn-primary-bg, #00ff9d) ; color: var(--instance-btn-primary-color, black) !important; border-color: var(--instance-btn-primary-border, #00ff9d); border-radius: 20px; padding: 8px 12px;}
.btn-secondary { background: white; color: #000; border-color: #000; border-radius: 20px !important;}
.btn-secondary:hover { background: var(--instance-btn-primary-bg, #00ff9d); color: white; border-color: var(--instance-btn-primary-border, #00ff9d); border-radius: 20px !important;}

.btn-dark { background: black; border-color: black; color: white; }
.btn-dark:hover { background: rgba(0,0,0,0.7); border-color: black; color: white; }
.btn-primary:hover {background: var(--instance-btn-primary-hover-bg, white); }
/*.btn-primary:hover .iconsvg { filter: invert(13%) sepia(80%) saturate(7199%) hue-rotate(329deg) brightness(101%) contrast(110%);  }*/


.btn-primary.disabled, .btn-primary:disabled { background: rgba(0,0,0,0.3) !important; border-color: silver !important; }

.btn-border { background: transparent; border-color: black; color: black !Important; font-family: var(--instance-font-family, 'Montserrat', sans-serif); border-radius: 20px; }
.btn-border-white { background: transparent; border-color: white; color: white !Important; font-family: var(--instance-font-family, 'Montserrat', sans-serif); border-radius: 20px; }
.btn-border:hover { background: transparent; border-color: black; color: white !important; background: black; font-family: var(--instance-font-family, 'Montserrat', sans-serif); border-radius: 20px; text-decoration: none; }
.btn-border-white:hover { background: transparent; border-color: white; color: black !important; background: white; font-family: var(--instance-font-family, 'Montserrat', sans-serif); border-radius: 20px; text-decoration: none; }

.btn.btn-link { color: var(--instance-link-color, #00ff9d); }
.btn.btn-link:hover { color: white !important; }
.bgregister .btn-link { color: black; }
.bgregister .btn.btn-link:hover { color: black !important; }
.bgregister a { color: black; text-decoration: underline; }
.bgregister a:hover { color: var(--instance-link-color, #00ff9d); }


.videothumb .overshadow { 
  position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; 
 }

.videothumb .overlayplay { position: absolute; top: 0px; left: 0px; width: 100%;  height: 100%;}
.videothumb img.w-100 { border-radius: 10px;}

/* Ensure all swiper cards use a consistent aspect ratio */
.thumb-frame { position: relative; width: 100%; overflow: hidden; border-radius: 10px; }
/* aspect-ratio plus robust padding-top fallback */
.thumb-frame::before { content: ""; display: block; padding-top: var(--thumb-ratio, 56.25%); }
.thumb-frame.thumb-vertical { aspect-ratio: 213 / 303; --thumb-ratio: 142.25%; }
.thumb-frame.thumb-horizontal { aspect-ratio: 16 / 9; --thumb-ratio: 56.25%; }
.thumb-frame.thumb-square { aspect-ratio: 1 / 1; --thumb-ratio: 100%; }
.thumb-frame .thumb-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Native scroll-snap row (Swiper alternative) */
.rowsnap-container {
  --card-w: 290px; /* default for horizontal rows (overridden below) */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
}
.rowsnap-container::-webkit-scrollbar{ display:none; }
.rowsnap-track { display: flex; gap: var(--gap, 10px); align-items: stretch; }
.rowsnap-slide { flex: 0 0 var(--card-w); scroll-snap-align: start; box-sizing: border-box; overflow: hidden; }
.rowsnap-slide .videothumb { width: 100% !important; max-width: 100% !important; display: block; }
.rowsnap-slide .videothumb > a { display: block; width: 100%; }
.rowsnap-slide .thumb-frame { width: 100%; }

/* Teachers Circle (custom=teacherscircle) */
.teacherscircle-row .thumb-frame { border-radius: 50%; overflow: hidden; }
.teacherscircle-row .overlayplay,
.teacherscircle-row .overshadow { border-radius: 50%; }
.teacherscircle-row img.w-100 { border-radius: 0 !important; }
.teacherscircle-row .thumb-img { filter: grayscale(100%); -webkit-filter: grayscale(100%); }
.teacherscircle-row .thumb-img { clip-path: none; }
.teacherscircle-row .iconfav,
.teacherscircle-row .iconLock,
.teacherscircle-row .currentwatched { display: none !important; }
.rowsnap-container.swipperpadding { margin-left: 20px; }

.rowsnap-container[data-orientation="horizontal"] { --card-w: 200px; }
.rowsnap-container[data-orientation="vertical"] { --card-w: 150px; }
/* Dynamic sizing for vertical rows: 2/5/9 cards visible per breakpoint */
.rowsnap-container[data-orientation="vertical"] {
  --gap: 10px;               /* sync with .rowsnap-track gap */
  --cards-per-view: 2;        /* default small screens */
  /* compute width so exactly N cards fit */
  --card-w: calc((100% - (var(--gap) * (var(--cards-per-view) - 1))) / var(--cards-per-view));
}
@media (min-width: 768px){
  .rowsnap-container[data-orientation="vertical"] { --cards-per-view: 5; }
}
@media (min-width: 1200px){
  .rowsnap-container[data-orientation="vertical"] { --cards-per-view: 9; }
}

@media (max-width: 1200px){
  .rowsnap-container[data-orientation="horizontal"] { --card-w: 170px; }
  /* vertical rows keep dynamic width via --cards-per-view */
}
@media (max-width: 768px){
  .rowsnap-container[data-orientation="horizontal"] { --card-w: 130px; }
  /* vertical rows keep dynamic width via --cards-per-view */

/* Align rows with section title */
.rowsnap-container.swipperpadding { padding-left: 17px; }
}

/* Dynamic sizing for horizontal rows: 2/5/7 cards visible per breakpoint. */
.rowsnap-container[data-orientation="horizontal"] {
  --gap: 10px;               /* sync with .rowsnap-track gap */
  --cards-per-view: 2;        /* default small screens */
  --card-w: calc((100% - (var(--gap) * (var(--cards-per-view) - 1))) / var(--cards-per-view));
}
@media (min-width: 768px){
  .rowsnap-container[data-orientation="horizontal"] { --cards-per-view: 5; }
}
@media (min-width: 1200px){
  .rowsnap-container[data-orientation="horizontal"] { --cards-per-view: 7; }
}

.btn-primary.hvr-bubble-top:before { border-color: transparent transparent #00ff9d; }
.btn-border.hvr-bubble-top:before { border-color: transparent transparent #fff; }
.btn-border-white.hvr-bubble-top:before { border-color: transparent transparent #000; }
.btn-border.hvr-bubble-top:hover:before { border-color: transparent transparent #000; }
.btn-border-white.hvr-bubble-top:hover:before { border-color: transparent transparent #fff; }

.imggradient {
  position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; 
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#504680+71,504680+100&0+64,1+100 */
background: -moz-linear-gradient(top,  rgba(13,10,23,0) 0%, rgba(13,10,23,0.49) 85%, rgba(13,10,23,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(13,10,23,0) 0%,rgba(13,10,23,0.49) 85%,rgba(13,10,23,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(13,10,23,0) 0%,rgba(13,10,23,0.49) 85%,rgba(13,10,23,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#504680', endColorstr='#504680',GradientType=0 ); /* IE6-9 */
}   

.imggradient-horizontal {
  position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; 

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+55,000000+55&0.65+0,0+62 */
background: -moz-linear-gradient(left,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.07) 55%, rgba(0,0,0,0) 62%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.07) 55%,rgba(0,0,0,0) 62%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.07) 55%,rgba(0,0,0,0) 62%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */

}   


.cabecera { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; color: white; padding-top: 2em; }

.btn-transparent { background: rgba(0,0,0,0); padding: 10px; color: white; }
.btn-opacity { background: rgba(0,0,0,.6); padding: 10px; color: white; }
.btn-opacity:hover { background: rgba(0,0,0,1); padding: 10px; color: white; }

.btn.btn-transparent:focus, .btn, button {
  outline: none !important;
  box-shadow: none;
}

.asset-stream .course-socialmedia .btn-group { float: right; }

.course-socialmedia .dropdown-menu[style] {
  background: transparent; 
  border: 0px;
  width: 30px; 
  font-size: 1em; 
  transform: translate3d(-100px, 8px, 0px) !important;
}

.event .imageCover { position: relative; height: 450px; width: 100%; background-position: center center;
  background-size: 150%; background-repeat: no-repeat; left: 0px; top: 0px; }
.festival .date { background: rgba(0,0,0,.5); padding: 20px; bottom: 0px; right: 30px; font-size: 2em; color: white; font-weight: 900;  }
.festival .name { background: rgba(0,0,0,.5); padding: 20px; bottom: 0px; left: 0px; font-size: 2em; color: white; font-weight: 900; text-align: center; width: 100%; }
.festival .festivalInfo { background: rgba(0,0,0,0.5); padding: 1em 1em; border-radius: 20px; list-style-type: none; font-size: 14pt;}

.event .countdownWrap { z-index: 999;  width: 100%; position: relative; text-align: center; font-size: 38px; }
.event .countdownWrap #cuontdown{  font-size: 38px; }
.event .gradient { position: absolute; top: 0px; left: 0px; width: 100%;  height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.6) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  }
.event .countdownWrap p{ font-size: 23px; text-align: center }

.event .claim { width: 100%; text-align: center; font-size: 40pt; }
.event #contdown { position: absolute; bottom: 0px; left: 0; right: 0; width: 280px; margin: 0px auto;  }
.event #contdown .contdown { float: left; width: 70px; padding: 10px; background: #202020; text-align: center}
.event #contdown .contdown span { display: block; font-size: 0.8em}
.event #contdown .contdown span:first-child { font-size: 2em; font-weight: bold;}
.event #contdown .contdown.days { color: #46c8e9}
.event #contdown .contdown.hours { color: #ecca00}
.event #contdown .contdown.minutes { color: #ed8b91}
.event #contdown .contdown.seconds { color: #b646e9}

.background-video { position: relative; height: 600px; overflow:hidden;margin-left: -12px; margin-right: -12px; }
.background-video .bgvideo { width: 100%; background: black; margin: 0px auto; }
.background-video .bgvideo video{  width: 100% !important; height: auto !important; }
.background-video .hover-content {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; padding-top: 10%; background: rgba(0,0,0,.6); color: white !important;   }

.morevideoscourse { text-align: center; background: white; padding: 1em; }

.moreinfoSec { background: url('../img/cursosbg.png'); background-size: cover; background-repeat: no-repeat; background-position: center center; }
.moreinfoSec  ul {list-style-type: none; font-size: 1.1em; }
.moreinfoSec ul li { margin-top: 10px; }

.course-rel a { color: black; }

.arrowcurse { float: right;}; 
.arrowcurse .iconsvg { filter: invert(1); }
.arrowcurse.swiper-button-disabled .iconsvg { filter: invert(13%) sepia(80%) saturate(7199%) hue-rotate(329deg) brightness(101%) contrast(110%);  }

.relatedcourses .swiper-button-prev, .relatedcourses .swiper-button-next, #nav-lessons .swiper-button-next, #nav-lessons .swiper-button-prev {border: 0px;  }

.section.course { background: #202020; }
.course .trailer-container {height: 620px; width: 100%; overflow: hidden;background: black; }


.vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.63332em;
  width: 3em  !important;
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #00ff9d !important;
  border-radius: 0.3em;
  transition: all 0.4s;
  border-radius: 40px;
}

.contened { overflow:  hidden; overflow-y: auto; height: 200px; }

.descButton { cursor: pointer;}
.descButton:hover { text-decoration: underline}

.course button:focus {
  box-shadow: none !important;
  outline: none !important; 
}

.course .dropcourse { background: black; }
.course .video-js .vjs-big-play-button {
  left: 40% !important;
  top: 40% !important;
  width: 20%;
  height: 20%;
}

.course .video-js .vjs-control-bar { background: rgba(0,0,0,.7)}

.course .thumbvideotrailer { width: 100%; position: relative; }
.course .thumbvideotrailer .bgplay,  .festival .thumbvideotrailer .bgplay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.7); top: 0px; left: 0px; }

.course .thumbvideotrailer .playIcon, .festival .thumbvideotrailer .playIcon { position: absolute; top: 30%; left: 0; right: 0; margin: 0px auto; width: 100%; text-align: center; cursor: pointer;  }

.course .thumbvideotrailer .playIcon img , .festival .thumbvideotrailer .playIcon img { filter: invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%); width: 100px;  }

.course .thumbvideotrailer .playIcon:hover img, .festival .thumbvideotrailer .playIcon:hover img { filter: invert(24%) sepia(100%) saturate(7067%) hue-rotate(329deg) brightness(102%) contrast(108%); }

.routine .trailer-container {height: 540px; width: 100%; overflow: hidden;background: black; }
.routineItem {color: black; }
.routineItem a{color: inherit; }
.routineItem .row {--bs-gutter-x: 0rem; }
.routineItem .iconRoutine i { font-size: 1.8em; }

.playiconstream { position: absolute; width: 100%; height: 100%; text-align: center; padding-top: 20%; top: 0px; background: rgba(0,0,0,0.8); }

.course .trailerVideo { width: 100%; height: 100%; position: relative; background: black; margin-top: 69px; }
.serie .trailerVideo {  height: 100%; position: absolute; right: 0px; background: black; width: auto; margin-top: 0px;  }

.relatedcourses p { color:white; }

.course .pauseTrailer { display: none}
.serie.course .pauseTrailer { display: block}

.serie .trailerVideo video{ width: auto !important;   }
.course .infoTrailer { position: absolute; bottom: 20px; text-align: center; color: white; width: 70%; left: 15%; z-index: 88; text-shadow: 0px 0px 8px rgba(28, 28, 28, 1); }
.serie .infoTrailer { position: absolute; bottom: 20px; text-align: left; color: white; 
  width: 47%; top: 0px; left: 0px; padding-top: 12%; padding-left: 3%; z-index: 88; text-shadow: 0px 0px 8px rgba(28, 28, 28, 1);
  padding-right: 5%;
  background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,1) 38%, rgba(0,0,0,0) 74%);
}
.course .imageCover { position: absolute; height: 100%; width: 100%; background-position: center top; background-size: cover; left: 0px; top: 0px; }
.course .buttons {margin-top: 40px; text-transform: uppercase; }
.course .buttons i { font-size: 1.8em; }
.course .lessonsWrapper.closed { max-height: 420px; overflow: hidden; }

.course .coursebuttons a, .course .coursebuttons a button{ color: black};
#chapters-button-next:focus, #relaccionados-button-next:focus, #chapters-button-prev:focus, #relaccionados-button-prev:focus { outline: none}

.course .teacherFloat { margin-top :-150px; background: white; width: 180px; z-index: 100; position: relative; overflow: none;  }
.course .teacherFloat .name { margin-top: -30px; font-size: 1.2em; color: white; background: black; width: 100%; padding: 5px; }
.course .courseInfo { margin-left: 200px; margin-top: -50px; }

.teacherbg { background: #202020; }
.teacherbg p { color: white !important; }
.teacherrounded { border-radius:  20px;}
.teacher .name { position: absolute;
  bottom: 0px;
  padding: 5px;
  text-align: center;
  width: 100%;
  background: rgba(0,0,0,0.5);}

.teacher.teacherscircle .name {
  background: none;
}

/* Legacy pageBuilder2 teacher circle support */
.teacher.teacherscircle .position-relative { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
.teacher.teacherscircle img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; clip-path: none; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
.teacher.teacherscircle .overlayplay, .teacher.teacherscircle .overshadow { border-radius: 50%; }

.courseTitle { border-bottom: 1px solid silver; margin-bottom: 30px; margin-top: 10px; line-height: 1.5em; }

.course .coursebuttons:hover a, .course .coursebuttons:hover a button { color: white};
.fix-padding { padding-top: 42px; }

.articles .submenu { background: rgba(0,0,0,.7) } 
.articles .submenu .nav-tabs { border-bottom: 0px; }

.course .videolesson a{ color: black}
.course .videolesson .overasset{ position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  color: white;
}
.articles .submenu .nav-tabs .nav-link {
   margin-bottom: 0px; 
   border: 0px solid transparent;  
   color: white; 
}

.course .onPlaying { position: absolute; bottom: 0px; text-align: right; padding: 15px 15px 0px; background: rgba(0,0,0,0.3); display: none; color: white; width: 100%;  }
.course .onPlaying.fixed {position: fixed; background: rgba(0,0,0,0.8); z-index: 9999; }

.weekTitle { background: black; color: white; padding: .8em; }

.fix-search { position: fixed; width: 100%; z-index: 1000; top: 76px; }

.submenu .nav-item { padding: 0px; }
.submenu .nav-item .nav-link { padding: 15px 20px; }
.submenu .nav-item .nav-link.active{ border-bottom: 4px solid white; background: transparent;  }

.modal { color: black; }

.Aligner { display: flex; align-items: center; justify-content: center; }
.Aligner-item { max-width: 50%; }

.iconfav { position: absolute; top: 10px; right: 15px; font-size: 1.2em; color: var(--instance-fav-icon-color, #00ff9d);}
.iconLock { position: absolute; bottom: 0px; left: 0px; padding:14px 14px 0px 3px; font-size: 0.9em; }
.iconLock.success { background: url('../img/candadosuccess.png') no-repeat bottom left; color: white; }
.iconLock.danger { background: url('../img/candadored.png') no-repeat bottom left; }

.icon-player { display: none; position: absolute; bottom: 10px; left: 15px; font-size: 0.9em; }
.overlayplay:hover .icon-player { display: block; }

.videolesson .iconfav { position: relative; float: right; }

.iconfav {
  width: 18px; height: 18px; background: url('../img/icons/heart-empty.svg');
  filter: var(--instance-fav-icon-filter, invert(75%) sepia(46%) saturate(1949%) hue-rotate(98deg) brightness(104%) contrast(101%));  margin-top: -4px;
  background-size: cover;
}
.check { list-style-type:circle; }
.iconfav.selected { width: 18px; height: 18px; background: url('../img/icons/heart-fill.svg'); background-size: cover; filter: var(--instance-fav-icon-filter, invert(75%) sepia(46%) saturate(1949%) hue-rotate(98deg) brightness(104%) contrast(101%)); }

.videothumb:hover .overlayplay { display: block;  }

.bgregister {background-color: rgba(255,255,255,0.8); border-radius: 10px; color: #0d0a17;}

.payment .bgregister { overflow: hidden;}

.articles { color: black; }
.articles .carousel { margin-left: -15px; margin-right: -15px;}
main.articles { padding-top: 100px; }
main.articles.top-act { padding-top: 130px; }

.articlebg {background: #353535; padding-top: 30px; margin-top: -40px; color: white; border: 1px solid #353535; border-radius: 20px;}
.articlesbg {background: white; padding: 30px 20px; border-radius: 10px;}


.blacksection#calendar { background: rgba(0,0,0,0.5); color: white; border-radius: 20px; padding: 20px;  }
.blacksection#calendar a:hover{  color: white !important; }
.fc-theme-standard td, .fc-theme-standard th { border: 1px solid var(--fc-border-color,rgba(255,255,255,0.13))!important; }

#calendar .fc-button-primary { background: #595959; color: white; border: 1px solid black; }
#calendar .fc-timegrid-axis{ background: #000; }
#calendar .fc-button-primary.fc-button-active { background: var(--instance-btn-primary-bg, #00ff9d); color: var(--instance-btn-primary-color, black); }
#calendar .fc-button-primary:hover{ background: var(--instance-btn-primary-bg, #00ff9d); color: var(--instance-btn-primary-color, black); }
#calendar .fc-scrollgrid-sync-inner, #calendar .fc-cell-shaded { background: #595959 !important}

#calendar .fc-toolbar-title { margin-bottom: -10px;}
#calendar .fc-timegrid-event{
  border: 0px !important;
}

#calendar .fc-event-title-container {display: flex; align-items: center; justify-content: center;}
#calendar .fc-scrollgrid-sync-inner a{ color: white !important; font-weight: normal; }
#calendar .fc-sticky { text-align: center !important; font-size: 15px; }

#calendar .fc-list-event:hover { color: black !important; }
#calendar .fc-list-event:hover a { color: black !important; text-decoration: none !important; }

.fc-list-table .fc-list-event:hover td {
  background-color: lightgray !important;
}
#calendar .fc-theme-standard.fc-list-day-cushion { background: #595959 !important; }
#calendar .fc-list-day-cushion a {  color: white !important;  }

#calendar .fc-day-today {
  background-color: rgba(255,255,255,.15);
  background-color: var(--fc-today-bg-color,rgba(255,255,255,.15));
}

.graysection { background: rgba(255,255,255,0.95); padding: 1em; color: black; border-radius: 10px;}
.carousel .info { padding: 10px; position: absolute; bottom: 30%; left: 0; right: 0; margin: 0px auto; width: 50%; max-width: 500px; color: white; }
.carousel .btn-info { border: 0px !important; outline: 0px !important; }

#homeCarousel { margin-left: -12px; margin-right: -12px; }

 .carousel-indicators {
  bottom: 0px;
  /*background: #d8d8d8;*/
  width: 120px;
  margin: 0px auto;
  padding: 6px 12px;
  border-radius: 20px 20px 0px 0px;
 -moz-border-radius: 20px 20px 0px 0px;
 -webkit-border-radius: 20px 20px 0px 0px; text-align: center; 
}


a.dropdown-item:active, a.dropdown-item:hover { background: #00ff9d; }
 .carousel-indicators button {
  background: #00ff9d;
  height: 15px;
  width: 15px; 
  border-radius: 20px 20px 20px 20px;
 -moz-border-radius: 20px 20px 20px 20px;
 -webkit-border-radius: 20px 20px 20px 20px;
}

 .carousel-indicators button{
  border: 2px solid #00ff9d;
  background: white;
  height: 15px;
  margin: auto 3px; 
  width: 15px; 
  border-radius: 20px 20px 20px 20px;
 -moz-border-radius: 20px 20px 20px 20px;
 -webkit-border-radius: 20px 20px 20px 20px;
}

 .carousel-indicators button.active {
  background: #00ff9d;
  height: 15px;
  width: 15px; 
  border-radius: 20px 20px 20px 20px;
 -moz-border-radius: 20px 20px 20px 20px;
 -webkit-border-radius: 20px 20px 20px 20px;
}


.card { background: transparent }
.card-body { background-color: rgba(3, 8, 7, 0.74); color: white; }

.bgblack {   background:rgba(0,0,0,0.6); color: white;  }
.bgblur {   
  background:rgba(0,0,0,0.6);
  
  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
  
} 
.mainmenu { padding-top: 3rem; padding-bottom: 3rem; }

.navbar a i, .navbar a.active{ color: #fff; }
.navbar .langs a { display: inline-block; padding: .5rem 1rem;}

.bg-pink { background-color: #00ff9d; }
.pink { color: #00ff9d; }
.gray { color: #595959; }

.tabcontentcourse { border: 0px solid silver; border-top: 0px; padding: 20px; }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #00ff9d;
  background-color: transparent;
  border-color: transparent;
  font-weight: bold;
}
.nav-tabs .nav-item.show .nav-link:focus, .nav-tabs .nav-link.active:focus, .nav-tabs .nav-item.show .nav-link:hover, .nav-tabs .nav-link.active:hover {
  border-color: transparent;
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075), 0 0 0px rgba(255, 0, 0, 0.6);outline: none !important;
}
.nav-tabs  .nav-link{
  color: #fff;
  background-color: transparent;
  border-color: transparent;
  font-weight: bold;
}

button.nav-link.active:focus, button.nav-link.active:hover, button.nav-link:focus, button.nav-link:hover {
  border-color: transparent !important;
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px rgba(255, 0, 0, 0.6);
  outline: none !important;
}

.course #teacherarea .btn-dark { font-size: 0.8em; }

.loader { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; display: flex;  text-align: center; padding-top: 10%; background: rgba(0,0,0,0.7); z-index: 10000; align-items: center;justify-content: center; display: none; }
.loader img { width: 100px; height: 100px; }

.filmtitle { width: 100%; padding: 5px 5px 0px; margin-bottom: -0px; text-align: center;   min-height: 58px; display: flex; align-items: center; justify-content: center; font-size: 0.9em; }
.categtitle { font-family: var(--instance-font-family, 'Montserrat', sans-serif); padding-left: 17px; color: white; }
.section .categtitle:first-child { color: white; }

.keepwatchingbar { position: absolute; bottom: 0px; width: 100%; height: 15px; }
.keepwatchingbar .currentwatched { width: 0px; background: red; height: 15px; }

.videothumb .currentwatched { width: 100%; height: 10px;  margin-top: -10px; position: relative; display: flex;} 
.videothumb .currentwatched  .watched{  width: 30px; background: red; height: 10px; } 

.langs a {  border-right: 1px solid black; margin: 0px 10px; padding-right: 20px !important; }
.langs a:last-child{ border-right: 0px; padding-right: 0px !important; margin-right: 0px;} 

.searchfield { display: none; padding: 4px 6px;}
.searchfield:focus { outline: none; } 

.alertContainer {
position: fixed; top: 0px; right: 0px; width: 400px; height: 100%;
padding-top: 80px; padding-right: 10px; padding-left: 100px;z-index: 9999;
display: none;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
}

.filterby.textend { text-align: right !important; }

.alertContainer .close { color: white; }
.alertContainer .toast {background-color:transparent}

.alertContainer .toast.success .toast-header {color: white; background: rgba(0,173,4,0.8)}
.alertContainer .toast.success .toast-body {color: white; background: rgba(0,173,4,0.8)}

.alertContainer .toast.info .toast-header {color: white; background: #00ff9d;}
.alertContainer .toast.info .toast-body {color: white; background: #00ff9d;}

.alertContainer .toast.warning .toast-header {color: white; background: rgba(173,0,0,0.8)}
.alertContainer .toast.warning .toast-body {color: white; background: rgba(173,0,0,0.8)}

.round-circle-indicator {  background: var(--instance-scroll-btn-bg, #00ff9d);  color: black; margin-left: 5px; }
.round-circle-indicator.swiper-button-disabled { background: transparent; color: #ccc; opacity: 0; pointer-events: none; visibility: hidden; display: none; }
.round-circle-indicator:hover { background: var(--instance-scroll-btn-hover-bg, white); }
.round-circle-indicator.iz i {margin-left: -4px; } 
.round-circle-indicator.dr i {margin-right: -4px; } 

.round-circle-indicator:focus { outline: none !important; box-shadow: none; }

.indicators { text-align: right; position: relative; z-index: 100; margin-top: -56px;  padding-bottom: 10px; }
/* Hide row arrows by default; show on hover like old site */
.rowcategory_content .indicators { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.rowcategory_content:hover .indicators { opacity: 1; pointer-events: auto; }
/* Ensure arrow buttons remain clickable even if container uses pointer-events none */
.indicators .arrownav { pointer-events: auto; }

.indicators2 { float: right;
  padding-right: 13px;
  margin-top: 0px;
  padding-bottom: 0px; }

#error-message {font-size:1em; color:red; margin-bottom:0.5em; display:none;}

.err404 h1 { font-size: 4em; }

footer  { padding-top: 30px; background: #222222; }
footer a  { padding: 10px 20px; color: #fff } 
footer a:hover  { color: white; text-decoration: underline; } 

footer .rrssfooter {text-align: right;  } 
footer .rrssfooter a i { color: #fff; font-size: 1.7em; padding: 5px; } 

.alert-border { background-color:transparent !important; color: white; border-color: #fff;  }

.account .title { font-weight: 700; }
.account .username { font-weight: 700; font-size: 20px;  word-wrap: break-word;}

.card.faq { border: 0px; }

.card.faq .btn.btn-link.collapsed .fas.fa-angle-down::before {
  content: "\f107";
}
.card.faq .btn.btn-link .fas.fa-angle-down::before {
  content: "\f106";
}

.card.faq .btn-link { color: inherit; text-align: left; }
.card.faq .btn-link i { float: right; }

/* 1. commonUi.js */
.darkHeader { background-color: #0d0a17 !important;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(240,240,240,0.7);
-moz-box-shadow: 0px 0px 3px 0px rgba(240,240,240,0.7);
box-shadow: 0px 0px 3px 0px rgba(240,240,240,0.7);
}

.cookieAdvice {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 540px;
  padding: 10px;
  background: rgba(0,0,0,.7);
  color: white;
  display: none;
  z-index: 999; 
  border-radius: 10px ;
  border: 1px solid white;
  font-size: 0.8em;
}

.cookieAdvice .cerrar {
  cursor: pointer;
  text-align: right;
  color: #fff;
}

/* 2. menu.php */
a .flagicon { width: 20px; }

.iconsmenu i:hover{ color: var(--instance-link-color, #00ff9d)} 

.dropleft .dropdown-toggle::before { display: none; }

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,.85);
}

.gradientbg { 
  color: white !important; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#504680+1,504680+79,e5e5e5+100&1+0,0+100 */
background: -moz-linear-gradient(top,  rgba(13,10,23,1) 0%, rgba(13,10,23,0.99) 1%, rgba(13,10,23,0.51) 69%, rgba(229,229,229,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(13,10,23,1) 0%,rgba(13,10,23,0.99) 1%,rgba(13,10,23,0.51) 69%,rgba(229,229,229,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(13,10,23,1) 0%,rgba(13,10,23,0.99) 1%,rgba(13,10,23,0.51) 69%,rgba(229,229,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#504680', endColorstr='#00e5e5e5',GradientType=0 ); /* IE6-9 */
}

.degbar {
  height: 10px; width: 100%; 
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9855c9+0,2c42eb+91,2c42eb+100 */
  background: #00ff9d; /* Old browsers */
}

/*
.mainitem.nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #00ff9d;
  transition: width .3s;
}

.mainitem.nav-link:hover::after , .mainitem.nav-link.active::after  { width: 100%; }
*/

/* 3. asset.php */ 

.playbutton { font-size: 4em; color: white;}
.playbutton:hover { color: var(--instance-link-color, #00ff9d);}

.asset .btn-link { color: inherit;  }
.asset .btn-link:hover i { color: #fff }
.asset .dropdown-menu.show { width: 100%; border-top: 0px; border-radius: 0px; border-color: #f0f3f7; margin-top: -2px; }
.asset .btn.dropdown-toggle:focus { outline: none !important; box-shadow: none; }
.asset .thumbvideo { 
  position: relative; 
  width: 150%; height: 400px;
  overflow: hidden; 
  margin-left: -15px; 
  margin-right: -15px;
} 

.asset .tab-pane {height: 350px; }

.asset .thumbvideo .overlay {
  position: absolute; 
  width: 100%; height: 100%; top: 0px; left: 0px; 
  padding-top: 230px; color: white; 
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,485158+100&0.22+0,0.65+100 */
  background: -moz-linear-gradient(top, rgba(0,0,0,0.72) 0%, rgba(72,81,88,0.85) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.72) 0%,rgba(72,81,88,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%,rgba(72,81,88,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38000000', endColorstr='#a6485158',GradientType=0 ); /* IE6-9 */
  }
.asset .thumbvideo .overlay h1 { color: white;  font-size: 3.5em; }
.asset .thumbvideo img { width: 100%; position: absolute; top: -50%; left: 0px; }
.assetthumb {cursor: pointer;}
.assetthumb .overasset { text-align: center;position: absolute; width: 100%; height: 100%;  font-size: 3em; color: #fff; top: 0px; width: 100%;}
.assetthumb .overasset span.icon-container { display: inline-block; }
.assetthumb .overasset span.icon-player { color: #fff; background-color: rgba(0,0,0,.7); 
    border-radius: 50%; padding: 30px; 
    box-shadow: 0 1px 1px rgba(0,0,0,.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color .1s ease,border .1s ease;
    border: 2px solid white; 
  }

.assetthumb .overasset span i { color: #fff; transition: 0.5s;}
.assetthumb .overasset span.icon-player:hover {background-color: var(--instance-link-color, #00ff9d); }
.assetthumb:hover .overasset { text-align: center; position: absolute; margin: 0px auto;  top: 0px; width: 100%;}
.contenidoocultable.cortada { 
    position: absolute; 
    top: 0px; left: 0px; width: 100%; height: 100%; 
    overflow: hidden; 
}

.contenidoocultable .loadmorecontent { display: none;}

.contenidoocultable.cortada .loadmorecontent { 
display: block; height: 80px; position: absolute; bottom: -5px; left: 0px; border-bottom: 1px solid rgba(255,255,255,0.3); width: 100%; 
background: -moz-linear-gradient(top,  rgba(253,208,152,0) 31%, rgba(253,208,152,0.9) 95%, rgba(253,208,152,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(253,208,152,0) 34%,rgba(253,208,152,0.9) 95%,rgba(253,208,152,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(253,208,152,0) 34%,rgba(253,208,152,0.9) 95%,rgba(253,208,152,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#504680', endColorstr='#504680',GradientType=0 ); /* IE6-9 */
}

.related-content { background-size: 100%; background-repeat: no-repeat; background-position: top center; padding-bottom: 3rem; margin-top: 1rem; margin-bottom: 3rem;   }
.related-content .row { margin-right: 0px !important; margin-left: 0px !important; }

ul.share-buttons{ list-style: none; padding: 0; }
ul.share-buttons li{ display: inline; }
ul.share-buttons li a{ font-size: 28px; margin-right: 7px;  }

ul.share-buttons li a:hover{
  color: #000; 
}

ul.share-buttons .sr-only{
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.btnThmb {color: white; border-color: white;line-height: 18px; }

.btnThmb:hover {color: white; border-color: white; background-color: #4026e8 ; }

.textCambioDivisa{color: white; text-decoration:underline;font-size: 13px;}

.darkfilter{ position: absolute; height:100%; width: 100%; top: 0px; left: 0px; min-height: auto; background: rgba(0,0,0,0.5); }
.darkfilter .deg {   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
  background: -moz-linear-gradient(left,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
  position: absolute; width: 100%; height: 100%;
}

.rowbghorizontal {
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.assetHeader { position: relative; background-color: black; background-position: center top; background-size: 100%; background-repeat: no-repeat;color: white; padding-top: 80px;  }
.assetHeader .texts {position: relative; margin-top: 100px; }
.assetHeader .gradient { width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  background: linear-gradient(0deg, rgba(32,32,32,1) 41%, rgba(32,32,32,0.335171568627451) 74%);
}

  .asset  .course-socialmedia { position: absolute; top: 100px; right: 50px; font-size: 1.5em; }
 .asset .course-socialmedia .dropdown-menu[style] {
  background: transparent;
  border: 0px;
  width: 30px;
  font-size: 1em;
  transform: translate3d(-110px, -2px, 0px) !important;
}

/* 4. footer.php */
.search-layer { opacity: 0; display: none; position: fixed; top: 120%; left: 0px; z-index: 100; width: 100%; height: 0%; background: rgba(34,28,38,0.92); padding: 100px 30px; border-top: 3px solid #00ff9d; }
.search-layer .closesearch { position: absolute; top: 30px; right: 20px; font-size: 2em; color: white; cursor: pointer}

/* 5. confirm-payment.php */
#card-errors { display: none; }

.logoPayment{ width: 10%; }

/* 6. faq.php */

.card-header { background-color: rgba(147, 68, 192,0.8); }

/* 7. section.php */
.bgsection {position: relative; width: 100%; max-height: 400px; overflow: hidden;}

.covercategory { margin-top: -80px; padding: 0 30px; }
.section .categtitle { margin-bottom: -30px; padding-left: 0px; }
.section .videothumb { padding: 6px; width: 100%}

.loadmorecontent .btn { position: absolute;  bottom: 5px; right: 10px; }


/* 8. pageBuilder.php */
.rowcategory_content .categtitle { padding-left: 5px; }

.category-image {margin-bottom: 1em;}
.category-image img {max-width: 100%;}
.category-name {margin-bottom: 1em;}
.category-description {margin-bottom: 2em;}
.seasson-button-list{margin-bottom: 2em;}
.viewmorecontent { display: none; padding-top: 24px; }
.rowTitleind { min-height: 70px; }

.rowcategory_content:hover .viewmorecontent { display: block; }

.viewmore .btn-link { color: var(--instance-link-color, #00ff9d)}
.viewmore .btn-link:hover { color: #0d0a17;}

.swipperpadding { padding-left: 20px;  }

/* 9. login.php */

main.login { background: url(../img/fondotvc.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

.btn-facebook { 
  color: white; background: #1977f3; border-color: #0057c9; 
}


ul.select-plan-checks { list-style-type: none; }
.highlighted { background: var(--instance-btn-primary-bg, #00ff9d); border-radius: 10px; color: white; padding: 10px; }
.promoted { border-color: var(--instance-btn-primary-border, #00ff9d) !important; color: var(--instance-btn-primary-bg, #00ff9d);  }
.promoted .btn-secondary { background-color: var(--instance-btn-primary-bg, #00ff9d) !important; color: #fff; border-color: var(--instance-btn-primary-border, #00ff9d) !Important;   }
.mostpopular { position: absolute; width: 90px; top: -45px; right: -45px; z-index: 999; }
#rowcoupon { display: none; }

#checkCupon.form-check-input:checked {
  background-color: var(--instance-btn-primary-bg, #00ff9d);
    border-color: var(--instance-btn-primary-border, #00ff9d);
}
/* 10. my.account.php */ 
ul.opciones-perfil, ul.phones { list-style-type: none; }
ul.opciones-perfil li { margin-top: 20px;  }
ul.invoice-history li { margin-top: 3px;  }

.opciones-perfil a:hover { color: white !important; }

.carousel-inner h1 { color: white; }


/* Articles.php */

.articles .articleThumb { position: relative; z-index: 1; background: white;  }
.articles .articleThumb a { color: inherit; }
.articles .articleThumb.hvr-grow-shadow:hover { position: relative; z-index: 999;  }
.articles .articleThumb .info { position: absolute; width: 100%; bottom: 0px; left: 0px; padding: 10px; color: white; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

.articles .sectionTitle {
  font-size: 20px;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 18px;
  line-height: 29px;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.articles .sectionTitle span {position: relative;  padding-right: 20px; text-transform: uppercase; }

.articles .sectionTitle span:before { left: 100%;}
.articles .sectionTitle span:after { right: 100%;}

.articles .sectionTitle span:before, .articles .sectionTitle span:after {content: '';
  display: block;
  height: 4px;
  position: absolute;
  top: 50%;
  margin-top: -2px;
  width: 2000px; background-color: #85a1b2; }

  .articles .sectionTitle .more {  position: absolute; bottom: 0; right: 0; top: 0; padding: 8px 0px 5px 5px;  margin: auto 0; z-index: 2; background-color: #fff; font-size: 13px; line-height: 1; color: #777 !important; text-align: right; }
  .articles .sectionTitle .more a { color: inherit; text-transform: uppercase; }


  /* PODCAST */

.podcast { margin: 10px; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.6); color: white; }
.podcast:hover {  background: rgba(0,0,0,.8)}
.podcast .btn-play-podcast { font-size: 2em; color: white;}
.podcast .btn-play-podcast:hover i, .podcast.playing, .podcast.playing .btn-play-podcast{ color: var(--instance-link-color, #00ff9d); }
.podcast .addtofavs { color: var(--instance-link-color, #00ff9d); font-size: 1.5em; margin-top: 5px; } 

#changeSeasion { width: 200px; background: transparent; border-color: black; background: #161b27; float: right; margin-top: -10px; }

/* LIVE*/

.livetv .categtitle { color: inherit}
.epg { max-height: 540px; overflow-y: scroll; }

/* CALENDAR */

.calendario-semanal {
  background: #fcfcfb;
  border: 3px solid #f3f3f3;
  margin: 1em; 
  margin-bottom: 50px;
  margin-top: 30px; 
}

.fc-timegrid-event .fc-event-time { /* hora en las cajitas */
  white-space: nowrap;
  font-size: .85em;
  font-size: var(--fc-small-font-size,.85em);
  margin-bottom: 1px;
  display: none;
}
#mainCarousel h1 { font-size: 3.6em; }
#mainCarousel h2 { font-size: 2.6em; color: #fff !important;  }

#mainCarousel { border-bottom: 10px solid #fff3e4; margin-bottom: 40px; }

.calendario-semanal .semana {padding: 30px 0; text-align: center; }
.calendario-semanal .semana .contenido-semana {position: relative; height: 700px; /* FIXME 600 si es completo */ }

.calendario-semanal .semana .contenido-semana .clase  {position: absolute; width: 90%; border-color: #f3ece8;  }
.calendario-semanal .semana .contenido-semana .clase:hover  { background: #fff;   }
.calendario-semanal .semana h4 { font-weight: bold; }
.calendario-semanal .diasemana { font-weight: bold; text-transform: uppercase; font-weight: 700; font-size: 0.9em; color: #828385; letter-spacing: 2px; }

.contenido-semana .clase .estilo { font-weight: 700; color: #d5c6b8; text-transform: uppercase; font-size: 1.1em; margin-bottom: 0px; }
.contenido-semana .clase .hora { font-weight: 400; }

.section.event { background: #202020; }

.calendario-mensual { width: 100%; padding: 2em; }
.calendario-mensual .thismonth { width: 78%; background: #FDD098; color: white; border-color: #FDD098;  }
.calendario-mensual .controles { font-size: 1.5em; margin-bottom: 1em;  }
.calendario-mensual .controles .btn-link { width: 10%; color: #FDD098 }


.calendario-mensual .accordion-header .btn-link { color: #000; }
.calendario-mensual .text-secondary {color: #857b73 !important; }
.calendario-mensual .accordion { border: 0px; }
.calendario-mensual .accordion-header { background: white; border: 1px solid silver;  margin-bottom: 2px !important; }
.calendario-mensual .accordion-body { background: #f9f8f8; border: 1px solid #f9f8f8; color: black;  margin-bottom: 20px;}
.calendario-mensual .accordion-header .btn-link.btninfo {  float: right; color: #FDD098 !important;  }

.pagination .page-link { background: transparent; border-color:#fff; color: #fff }
.pagination .page-link:hover, .pagination .page-item.active .page-link { background-color:#fff; border-color: #fff; color: black;   }

#tabsPrem  button{ background: transparent !important; color: white !important; outline: 0px; border: 0px solid transparent !important; }
#tabsPrem  button.active, #tabsPrem button:hover{ background: transparent !important; color: var(--instance-link-color, #00ff9d) !important; border-bottom: 0px;}
#tabsPrem  button img { width: 60px;}

.tab-content.gray { background: transparent !important; margin-top: -2px; color: white; border: 1px solid white; border-top: 0px;}

.premium .cabecera { background-image: url('/img/486-2021-05-24.jpg'); background-size: 100% auto; background-repeat: no-repeat; }
.premium .caja h3:first-child { text-align:  center;  margin-top: 10px; margin-bottom: 10px; }
.premium .caja .cent { text-align:  center;  margin-bottom: 10px; }

.cabeceraNosotros { background-image: url('../img/cabecera_nosotros.jpg'); background-size: cover; background-position: center top;}
.cabeceraNosotrosEnd { background-image: url('../img/About_Us_04.jpg'); background-size: cover; background-position: center top;}
.bannernosotros {background-image: url('../img/meditation-in-nature.jpg'); background-size: cover; background-position: center top; font-size: 19pt; text-align: center; }

@media (max-width:1920px){

  /* 0. GLOBAL */
  .article .main-article { width: 100%; height: 371px; background-position: center bottom; background-size: auto 315px; background-repeat: no-repeat;   }

}
@media (max-width:1720px){


  .background-video { position: relative; height: 600px; overflow:hidden;margin-left: -12px; margin-right: -12px; }
  .background-video .bgvideo {  height: 100%; background: black; margin: 0px auto;     }
/*  .background-video .bgvideo video{  height: 100% !important; width: auto !important; } */
  .background-video .hover-content {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; padding-top: 15%; background: rgba(0,0,0,.6); color: white !important;   }
  .background-video .bgvideo video{  width: 150% !important; height: auto !important; }

}

@media (max-width:1280px){

  h4.article-title { font-size: 1.1em; font-weight: 300; }

.background-video { position: relative; height: 600px; overflow:hidden;margin-left: -12px; margin-right: -12px; }
.background-video .bgvideo {  height: 100%; background: black; margin: 0px auto;     }
/* .background-video .bgvideo video{  height: 100% !important; width: auto !important; } */
.background-video .hover-content {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; padding-top: 20%; background: rgba(0,0,0,.6); color: white !important;   }
.background-video .bgvideo video{  width: 150% !important; height: auto !important; }


  /* 0. GLOBAL */
  .carousel .info { bottom: 15%; left: 5%; width: 60%; max-width: 500px;}
  .article .main-article { width: 100%; height: 301px; background-position: center bottom; background-size: auto 245px; background-repeat: no-repeat;   }
  .articlebg {padding-top: 20px; margin-top: -25px; }


}
@media (max-width:1024px){
  .fc .fc-toolbar-title {
    font-size: 1em !important;
    margin: 0;
}
.background-video { position: relative; height: 430px; overflow:hidden;margin-left: -12px; margin-right: -12px; }

  #icpug { display: none; }
  .bigIconsMenu { flex-direction: row !important; }
  .bigIconsMenu .nav-item { margin-right: 20px; margin-top: 10px; }
  h4.article-title { font-size: 1em; font-weight: 300; }

  ul.select-plan-checks { padding: 0px 10px;  }
  .select-plan .whitesection.rounded { margin: 0px;  }
  .select-plan .plan{ margin-bottom: 20px;  }

  /* 0. GLOBAL */

  .carousel .info { bottom: 20%; left: 5%; width: 60%; max-width: 500px;}
  .article .main-article { width: 100%; height: 256px; background-position: center bottom; background-size: auto 200px; background-repeat: no-repeat;   }
  .articlebg {padding-top: 20px; margin-top: -25px; }

  .navbar .langs a {
    display: inline-block;
    padding: .5rem .3rem;
    margin: 0px; 
  }
  .navbar .langs a:last-child {
    padding-right: 0rem !important;
    padding-left: 1.5rem !important;
  }

  /* 3. asset.php */ 
  .related-content { background-size: 300%; }


  /* No aparecen en mas sitios */
  .menu-right li { padding: 0px 15px; }
  .asset .thumbvideo {  height: 380px; } 
  .asset .thumbvideo .overlay { padding-top: 220px; padding-left: 7px; }
  .asset .thumbvideo .overlay h1 { color: white;  font-size: 2.5em; }
  .asset .thumbvideo img { width: 100%; position: absolute; top: 0; left: 0%; }

}


@media (max-width:768px){

  .event .imageCover { position: relative; height: 450px; width: 100%; background-position: center top; background-size: auto 100%; left: 0px; top: 0px; background-repeat: no-repeat;  }


  /* 0. GLOBAL */
  .apps h1{ font-size: 2em; }
  .apps h3 { font-size: 1.3em; font-weight: 300; }

  h4.article-title { font-size: 1em; font-weight: 300; }
  .articles .articleThumb .info { padding: 5px; }
  .article .main-article { width: 100%; height: 232px; background-position: center bottom; background-size: auto 176px; background-repeat: no-repeat;   }
  
  /* 1. commonUi.js */

  .cookieAdvice {position: fixed; bottom: 0px; right: 0px; width: 100%; padding: 10px;  display: none; z-index: 999;  border-radius: 0;}
.cookieAdvice .text-end { text-align: center; }
  /* 3. asset.php */ 
  .contenidoocultable, .contenidoocultable.cortada { position: relative; }
  .imggradient { height: 102%; }
  
  /* 4. footer.php */
  footer .rrssfooter {text-align: center; margin-top: 30px;  } 
  footer .rrssfooter a { color: var(--instance-link-color, #00ff9d); font-size: 1.7em; } 

  /* 8. pageBuilder.php */
  .category-name h1 { font-size: 1.4em; }
  .category-description h2 { font-size: 1em; }

  /* No aparecen en mas sitios */
  .loadmorecontent { display: none !important; }

  .asset .thumbvideo {  height: 350px; } 
  .asset .thumbvideo .overlay { padding-top: 190px; padding-left: 7px; }
  .asset .thumbvideo .overlay h1 { color: white;  font-size: 2.5em; }
  .asset .thumbvideo img { width: 120%; position: absolute; top: 0; left: -10%; }

  footer .sec-2 a { line-height: 60px; border-right: 0px; }
}

@media (max-width:540px){
 /* .imagetvmob { width: 150px !important; margin-top: 20px; }*/
  main.home { padding-top: 56px; }
  .filterby { text-align: center; }
  .section.course { background: #202020; padding-top: 0px; }
  #nav-more { font-size: 1.1em; }
  .event .countdownWrap p{ font-size: 20px; text-align: center }
  .event .countdownWrap {
    position: absolute;
    width: 100%;
    top: 10%;
    text-align: center;
    font-size: 38px;
}


.assetHeader { position: relative; background-color: black; background-position: top center !important; background-size: 150%; background-repeat: no-repeat; color: white; padding-top: 80px;  }
.assetHeader .gradient { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, rgba(32,32,32,1) 32%, rgba(32,32,32,0.8) 74%); }
.event .name { font-size: 1.5em; }

  .assetHeader { background-position: top left; padding-top: 80px;   }
  .assetHeader .texts { margin-top: 0px; }
  .submenu .nav-item .nav-link {
      padding: 15px 10px;
      font-size: 0.9em; 
  }
  .submenu .nav-item li:first-child .nav-link{
     padding-left: 0px; 
  }
  .submenu .nav-item li:last-child .nav-link{
     padding-right: 0px; 
  }

  .fc .fc-toolbar-title {
    font-size: 0.7em !important;
    margin: 0;
}

  .premium .cabecera { background-size: auto 100%; }

  main.articles { padding-top: 5px; }
  main.articles.top-act { padding-top: 90px; }
  .fix-search.top-act {top: 136px; }
  .background-video { position: relative; height: 410px;  overflow:hidden;margin-left: -12px; margin-right: -12px; background-image: url('../img/cursosbg.jpg'); background-size: cover; background-position: center top;  }
  .background-video .bgvideo { display: none; }
  .background-video .hover-content {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;padding: 50px 10px 20px; background: rgba(0,0,0,.6); color: white !important;   }
  

  .articlebg {padding-top: 20px; margin-top: 0px; }

  .article .image-text { float: none; max-width: 100%; margin: 10px 0px 10px; }
  .article .main-article { width: 100%; height: 150px; background-position: center bottom; background-size: auto 150px; background-repeat: no-repeat;   }
  .bgsection img { width: 270% !important; margin-left: -60%;  }
  .playtrailert { margin-top: 0px !important; }
  .playTrailer { padding-top: 10px; }
  /* Ensure slider arrows are clickable within article-related rows */
  .article .rowcategory_content .indicators { pointer-events: auto; }

  .firstcolumn  {padding-top: 14px !important;
    text-align: center !important;
    padding-left: 16px !important; }
    .columnaMob { padding-top: 5px !important; }
    .descButton { font-size: 18px; margin-bottom: 20px; }
  .carousel-item img { width: 200% !important; margin-left: -50%;}

  #eventCarousel .carousel-item img { width: 100% !important; margin-left: 0px; }
  .festival .name { font-size: 1.4em; }
  #eventCarousel { margin-top: 20px; }

  /* 0. GLOBAL */
  .bg-pink { padding-top: 0px; padding-bottom: 0px; }

  h1 { font-size: 1.7em; }
  h3 { font-size: 1.20em; }

  .account .username { font-size: 1em; }

  .categtitle { font-size: 1.2em; padding-left: 20px; margin-top: 20px !important;   }
  .indicators, .indicators2, .viewmorecontent, .arrowcurse, .arrownav { display: none !important; }
  .rowTitleind .col-8{ width: 100%; padding-top: 6px; }
  .filmtitle { display: none !important; }
  .teacherscircle-row .filmtitle { display: flex !important; }
  .assetthumb .overasset { text-align: center; position: absolute; margin: 0px auto; font-size: 3em; color: #00ff9d; top: 0px; width: 100%; padding-top: 0%}
  .assetthumb .overasset span.icon-player { padding: 20px; }

  .contened { max-height: 200px; height: auto; }

  .carousel { margin-bottom: 20px !important;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 5px solid rgba(255,255,255,0.8); 
   }

  #eventCarousel  { border-bottom: 0px solid rgba(255,255,255,0.8); }
  .festival h4.title { margin-top: 20px; }
 
  .carousel .info { bottom: 0%; left: 0%; width: 100%; font-size: 0.9em; z-index: 100 }
  .carousel h1 { font-size: 1.5rem;  }
  .carousel .btn-lg { font-size: 0.9em; }

  .search { padding: 0px 10px !important; }
  .search .nav-link { border-bottom: 1px solid silver;}
  .search input { width: 82%; }
  .search input:focus { outline: none; } 

  /* 3. asset.php */ 
  .related-content h2 { font-size: 1.5em; }

  .assetthumb { cursor: pointer; margin-bottom: 30px; }

  .containerDatos {
    margin-top: -300px; 
  }

  .verticalThumb { min-height: 350px; width: 100%;}

  .overthumbVertical {
    position: absolute; width: 100%;height: 100%; top: 0px; left: 0px; 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+34,000000+99&0.1+0,0.86+78 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.43) 34%, rgba(0,0,0,0.86) 78%, rgba(0,0,0,0.86) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.43) 34%,rgba(0,0,0,0.86) 78%,rgba(0,0,0,0.86) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.43) 34%,rgba(0,0,0,0.86) 78%,rgba(0,0,0,0.86) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#db000000',GradientType=0 ); /* IE6-9 */
  }
 
  .nobackgroundmob { background-image: none !important;}

  /* 7. section.php */
  .covercategory { margin-top: -50px;  }
  .covercategory .categtitle { padding-left: 0px; }
  .covercategory { padding-left: 20px; }

   /* 8. pageBuilder.php */
  .rowcategory_content .viewmorecontent .btn-link { float: left; display: block; padding-top: 0px !important; margin-top: -1px !important; padding: 0px; font-size: 0.8em}
  .rowcategory_content .viewmorecontent .indicators2 { display: block;padding-top: 0px !important; margin-top: -6px; }
  .rowcategory_content .categtitle { padding-left: 0px;}
  .carousel-indicators { bottom: 0px; }



  /* No aparecen en mas sitios */
  .asset .thumbvideo {  height: 240px; } 
  .asset .thumbvideo .overlay { padding-top: 90px;}
  .asset .thumbvideo .overlay h1 { color: white;  font-size: 2.5em; }
  .asset .thumbvideo img { width: 120%; position: absolute; top: 0; left: -10%; }
 
  body .articles{ margin-top :90px; }
/* No aparecen en mas sitios */
  .asset .thumbvideo {  height: 250px; } 
  .asset .thumbvideo .overlay { padding-top: 100px; padding-left: 7px; }
  .asset .thumbvideo .overlay h1 { color: white;  font-size: 2.5em; }
  .asset .thumbvideo img { width: 120%; position: absolute; top: 0; left: -10%; }

}
/* Centrado carga del test de velocidad*/
.speed{
  margin:10px auto;
  display:block;
}
/* Boton cerrar modal test velocidad internet mi cuenta*/
.modal-header button{
 background-color: #fff;
 border: none;
outline: none; 
}

/* __pageBuilder.php SWIPER */
.swiper-container {
  padding-bottom:0px;
}
.link_area {
  display:inline-block;
  width:100%;
  text-shadow: 1px 1px #fff;
  border-bottom: 1px ridge #0d0a17;
  margin-bottom: 1em;
  margin-top: 1em;
  font-size: 1.5em;
  font-weight: bolder;
  
}
.single-element {float:left; width:320px; padding: 10px; text-align:center;}

.swiper-button-next {
  top:0;
  height:100%;
  width:48px;
}
.swiper-button-prev {
  top:0;
  height:100%;
  width:48px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  left:0
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right:0
}

.swiper-button-next, .swiper-button-prev {
  color:#0d0a17
}
.button_full_area {
  width:100%;
  height: 100%;
  text-align:center;
}
.link_full_area {
  display:inline-block;
  width:100%;
  height:100%;
  text-align: center;
  line-height: 480px;
  text-shadow: 1px 1px #fff;
  font-weight:bold;
}

#paywall { z-index: 99999; }

.paywallreg { position: relative; z-index: 999; margin-top: -180px; padding-top: 80px; }
.paywallreg .deg { position: relative; 
  width: 100%; height: 90px; border-bottom: 30px solid white; 
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }

  @media (max-width:360px){
    h1 {
      font-size: 1.4em;
    }
  }

  .gridContainer {
    display: grid !important;
    /* legacy default values kept for backward compatibility */
    grid-template-columns: repeat(auto-fit, 250px);
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    list-style: none;
}

.gridContainer>.item {
    padding: 5px;   
}

/* Fixed-size grid cards mirroring rowsnap */
.gridsnap-container {
  --card-w: 250px; /* default overridden by orientation */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, var(--card-w));
  gap: 10px;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
}
.gridsnap-container[data-orientation="horizontal"] { --card-w: 250px; }
.gridsnap-container[data-orientation="vertical"] { --card-w: 190px; }

@media (max-width: 1200px){
  .gridsnap-container[data-orientation="horizontal"] { --card-w: 210px; }
  .gridsnap-container[data-orientation="vertical"] { --card-w: 160px; }
}
@media (max-width: 768px){
  .gridsnap-container[data-orientation="horizontal"] { --card-w: 160px; }
  .gridsnap-container[data-orientation="vertical"] { --card-w: 120px; }
}

.gridsnap-item .videothumb { width: 100% !important; max-width: 100% !important; display: block; }
.gridsnap-item .thumb-frame { width: 100%; }

/* Responsive column counts for vertical grids (CSS-only)
   Show 2 on small, 5 on medium, 9 on large screens. */
.gridsnap-container[data-orientation="vertical"] {
  /* default: small screens */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .gridsnap-container[data-orientation="vertical"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .gridsnap-container[data-orientation="vertical"] {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

/* Responsive column counts for horizontal grids (CSS-only)
   Show 2 on small, 5 on medium, 7 on large screens. */
.gridsnap-container[data-orientation="horizontal"] {
  /* default: small screens */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .gridsnap-container[data-orientation="horizontal"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .gridsnap-container[data-orientation="horizontal"] {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/*.container_static_custom {
  width: 100%;
}*/

.btn-chromecast {
  padding: 8px 20px;
}

.btn-chromecast img {
  filter: invert(1);
}

.btn-chromecast img {
  width: 18px;
}

.chromecast-progressbar {
  width: 100%;
}

.chromecast-progressbar .time,
.chromecast-progressbar .range,
.chromecast-progressbar .duration {
  display: inline;
}

.chromecast-progressbar .time,
.chromecast-progressbar .duration {
  font-size: 0.6em;
}

.chromecast-progressbar .range {
  width: 60%;
}

.logo_conscious_register{
  width: 40%;
  height: auto;
  margin-bottom: 5%;
}

.register_new{
  background-color: var(--instance-register-bg, #fff);
  display: flex;
  margin-top: calc(-1 * var(--instance-header-height, 87px)); /* menu not included in register page */
} 

.bolder{
  font-weight: bolder;
}

.register_container{
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

.register_arrow_icon_preview_img{
  font-size: 35px;
  color: var(--instance-register-back-button-color, #00ff9d);
  cursor: pointer;
}

.register_form_container {
  background-color: var(--instance-register-form-bg, rgba(255,255,255,0.8));
  color: #0d0a17;
  display: flex;
  flex-direction: column;
  margin-top:4%;
}

.register_form_container input { 
  border: 3px solid #00ff9d !important;
  background-color: white !important;
  width: 100%;
}

.btn-mangeta {
  background: var(--instance-register-btn-bg, #00ff9d);
  color: var(--instance-register-btn-color, black);
  font-size: medium;
  width: 60%;
}

.btn-mangeta:hover {
  background: var(--instance-register-btn-hover-bg, white);
  color: var(--instance-register-btn-color, black);
}

.form-group-login {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  align-items: center;
}

.font-size-10 { font-size: 10px }

.bold{
  font-weight: bold;
}

#icon_preview{
 cursor : pointer;
}

.plan-button{
  cursor:pointer;
}

.register_arrow_icon_preview{  
  float: left;
}

.w-responsive{
  width: 70%;
}

.w-arrows{
  width: 10%;
  margin-top: 20px;
}

.arrows-div{
  position: absolute;
  width: 100%;
  z-index : 10
}

.arrow-preview{
  float: right;
  margin-top: 20px;
  margin-right: 25px;
}

.arrow-next{
  float: left;
  margin-top: 20px;
  margin-left: 25px;
}

p.subtitle {
  font-size: 16px;
  color: #666;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 0;
}

.plans-container {
  display: flex;
  justify-content: center;
  gap: 50px;
  padding-bottom: 35px;
}

.plan-card {
  background: #7bebc5;  
  border-radius: 10px;
  width: 300px;
  text-align: left;
  position: relative;
  height: 70%;
}

.plan-card.featured {
  border-color: #d4af37;
}
.badge_container{
  display: flex;
  justify-content: center;
}

.badge_div{
  width: 300px;
}


 .badge {
  background: rgb(133,116,11);
  background: linear-gradient(90deg, rgba(133,116,11,1) 9%, rgba(212,170,6,1) 17%, rgba(255,240,56,1) 74%, rgba(212,170,6,1) 92%, rgba(133,116,11,1) 99%);
  color: #000;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 20px; 
  margin-bottom: 5px;
  height: 35px;
  padding: 10px;
  font-weight: 800;
}

.plan-title {
  font-size: 21px;
  color: black;
  margin-top: 5px;
  font-weight: bold;
}

.plan-price {
  font-size: 20px; 
  color: #333;
  margin-bottom: 5px;
  font-weight: bold;
}

.plan-subtext {
  font-size: 14px;
  color: #666;  
  font-weight: bolder;
}

.features {
  font-size: 12px;
  color: #333;
  list-style-type: none;
  padding-left: 10px;
  padding-top: 2px;
  padding-right: 10px;
}

.features li {
  margin: 10px 0;
}

.features li strong {
  color: black;
}

.features li.green {
  color: #189735;
  font-weight: bold;
}

.button {
  display: block;
  text-align: center;
  background-color: var(--instance-register-btn-bg, #00ff9d);
  color: var(--instance-register-btn-color, #fff);
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 10px;
  width: 70%;
  position: relative;
  left: 15%;
  font-weight: 100;
  font-weight: bold;
  text-transform: uppercase;
}

.button:hover {
  background-color: var(--instance-register-btn-hover-bg, #d00070);
}

.plan-card-payment{
  border: 3px solid #00ff9d;
  border-radius: 10px;
  position: relative;
  width: 300px;
  text-align: center;
  height: fit-content;
  margin-bottom: 20px;
}

.check_color{
  color: black;
}

.align-items-center{
  align-items: center;
}

.more_info_div{
  background-color: whitesmoke;
  color: black;
}

.more_info_div_button{
  display: flex; justify-content: center; align-items: center; height: 100px;
}

.button_close_more_info{
  width: 100%;
}

.register-from-label{
  float: left;
}

.plan-card-responsive{
  background-color: #7bebc5;  
  border-radius: 10px;
  text-align: left;
}
.plans-info-containers-responsive{ 
  width: 100%;
  padding: 20px;
}

/*login responsive*/

@media (max-width:900px){

  .register_form_container{
    margin-top: 15%;   
  }
  .w-responsive{
    width: 100%;
  }
  .logo_conscious_register{
    width: 55%;
  }
  .w-arrows{
    width: 20%;
  }

  .plans-container{
    display: none;
  }

  .plans-container-responsive{
    display: flex;
    gap: 10px;  
    justify-content: center;
  }

  .plan-title{
    font-size: 13px;
  }

  .plan-price{
    font-size: 16px;
  }

  .plan-subtext{
    font-size: 14px;
    margin-bottom: 5px;
  }

  .plan-card-payment{
    width: 30%;
  }

  main{
    min-height: unset;
  }

  .badge_div{
    width: 30%;
  }

  .badge_container{
    gap: 10px;
   
  }

}

@media (min-width:900px){

  .plans-container{
    display: flex;
  }

  .container-responsive{
    display: none;
  }

  .badge_container{
    gap: 50px;
  }

}

.register_premium{
  color: #fff;
  background-color: #343a40;
  .row {
    padding: 10px;
  }
}

.btn-facebook_register{
  color: white; 
  background: #1977f3; 
  border-color: #0057c9;
  font-size: medium;
}

.btn-custom_wantmore {
	background-color: #222222;
	border-color: #151515;
	color:#ffffff;
}
.btn-custom_wantmore:hover,
.btn-custom_wantmore:focus,
.btn-custom_wantmore:active,
.btn-custom_wantmore.active {
	background-color: #121212;
	border-color: #000000;
	color:#ffffff;
}
.btn-custom_wantmore.disabled:hover,
.btn-custom_wantmore.disabled:focus,
.btn-custom_wantmore.disabled:active,
.btn-custom_wantmore.disabled.active,
.btn-custom_wantmore[disabled]:hover,
.btn-custom_wantmore[disabled]:focus,
.btn-custom_wantmore[disabled]:active,
.btn-custom_wantmore[disabled].active,
fieldset[disabled] .btn-custom_wantmore:hover,
fieldset[disabled] .btn-custom_wantmore:focus,
fieldset[disabled] .btn-custom_wantmore:active,
fieldset[disabled] .btn-custom_wantmore.active {
	background-color: #222222;
	border-color: #151515;
	color:#ffffff;
}


.tab-content.noBorder { 
  border:0;
  border-top: 0;
}

.nav-tabs-register {
  border-bottom: unset;
}

.field-icon {
  float: right;
  margin-right: 10px;
  margin-top: -27px;
  position: relative;
  z-index: 2;
}

@media (min-width: 1400px) {
  .container.register_custom {
      max-width: 850px !important;
  }
.container.social_buttons_container{
  max-width: 300px !important;    
  }
}

@media (min-width: 576px) {
  .container.social_buttons_container{
    max-width: 300px !important;    
  }
}

/* General Styles */
.payment-selection {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 20px auto;
  padding: 10px;
}
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.payment-option:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.payment-text {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
}

.payment-text-cards {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
}

.payment-icons img {
  height: 20px;
  margin-left: 8px;
}

.payment-arrow {
  font-size: 1.5rem;
  color: #aaa;
  font-weight: bold;
}

/* PayPal Specific Styling */
.payment-option img[alt="PayPal"] {
  height: 25px;
}

/* OXXO Pay Styling */
.payment-icons img[alt="OXXO"] {
  height: 25px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .payment-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .payment-icons img {
    height: 18px;
    margin-left: 0px;
  }

  .payment-arrow {
    align-self: flex-end;
  }

  .payment-text {
    font-size: 0.9rem;
    position: relative;
    top: 18px;
  }

}

@media (max-width: 480px) {
  .step-info strong {
    font-size: 1rem;
  }

  .payment-option {
    padding: 8px 10px;
  }

  .payment-text {
    font-size: 0.9rem;
    position: relative;
    top: 18px;
  }

  .payment-icons img {
    height: 16px;
    margin-left: 0px;
  }
}

add-to-calendar-button#add-calendar::part(atcb-button),
  #atcb-btn-add-calendar-modal-host::part(atcb-button) {
    background-color: var(--instance-btn-primary-bg, #00ff9d);
    color: var(--instance-btn-primary-color, black);
    font-family: var(--instance-font-family, 'Montserrat', sans-serif);
    font-weight: 400;
 }


 
 .asset-socialmedia .dropdown-menu[style] {
  background: transparent; 
  border: 0px;
  width: 30px; 
  font-size: 1em; 
  transform: translate3d(55px, 3px, 0px) !important;
}