/* importamos los estilos para la cabecera */
@import './template.css';
/* importamos los estilos para la cabecera */
@import './menu_select_category.css';
/* declaramos la variables usar en el documento */
:root {
  --color-primary: #1A3051;
  --color-primary-dark: #001D33;
  --color-secundary: #D4BC66;
  --color-secundary-dark: #9c873a;
  --color-orange: #C85426;
  --color-orange-dark: #A03B20;
  --color-blue: #314280;
  --color-blue-dark: #1C295A;
  --color-green: #1D6F42;
  --color-green-dark: #0F522D;
}
/* estilos para setear el color ded fondo azul */
.bg-primary{ background-color: var(--color-primary) !important; }
/* estilos para setear el color ded fondo azul */
.bg-primary-dark{ background-color: var(--color-primary-dark); }
/* estilos para setear el color ded fondo azul */
.bg-secundary{ background-color: var(--color-secundary) !important; }
/* estilos para setear el color ded fondo azul */
.bg-secundary-dark{ background-color: var(--color-secundary-dark); }
/* estilos para setear el color ded fondo azul */
.bg-blue{ background-color: var(--color-blue); }
/* estilos para setear el color ded fondo azul */
.bg-blue-dark{ background-color: var(--color-blue-dark); }
/* estilos para setear el color ded fondo naranga */
.bg-orange{ background-color: var(--color-orange); }
/* estilos para setear el color ded fondo naranga */
.bg-orange-dark{ background-color: var(--color-orange-dark); }
/* estilos para setear el color ded fondo naranga */
.bg-green{ background-color: var(--color-green); }
/* estilos para setear el color ded fondo naranga */
.bg-green-dark{ background-color: var(--color-green-dark); }
/* estilos para setear el color ded texto azul */
.c-secundary{ color: var(--color-secundary); }
/* estilos para setear el color ded texto azul */
.c-primary{ color: var(--color-primary); }
/* estilos para setear el color ded texto azul */
.c-blue{ color: var(--color-blue); }
/* estilos para setear el color ded texto naranga */
.c-orange{ color: var(--color-orange); }
/* estilos para setear el color ded texto verde */
.c-green{ color: var(--color-green); }
/* estilos para el contenedor principal */
main{ min-height: calc( 100vh - 80px ); }
/* estilos para el contenedor principal */
main.min_height{ min-height: 150vh; }

body{ background-color: #fff; color: var(--color-primary-dark); overflow-x: hidden; }

body.skin-black{ background-color: #151515; color: #fff; }

.button, .button-blue{ align-items: center; background-color: var(--color-blue); border: 1px solid var(--color-blue); box-shadow: 0px 2px 3px #bbb; border-radius: 5px; color: white !important; cursor: pointer; min-height: 40px; font-size: 14px; justify-content: center;  padding: .8rem 1.6rem; }

body.skin-black .button, body.skin-black .button-blue{ box-shadow: 0px 2px 3px #333; }
.button:hover, .button-blue:hover{ background-color: var(--color-blue-dark); border: 1px solid var(--color-blue-dark); }
.button.button-outline{ background-color: white; color: var(--color-blue) !important; }
.button.button-outline:hover{ background-color: var(--color-blue); color: white !important; }

body.skin-black .button.button-outline{ background-color: #151515; }

.button.button{ background-color: var(--color-primary); border: 1px solid var(--color-primary); }
.button.button:hover{ background-color: var(--color-primary-dark); border: 1px solid var(--color-primary-dark); }
.button.button-dark{ background-color: var(--color-primary-dark); border: 1px solid var(--color-primary-dark); }
.button.button.button-outline{ background-color: white; color: var(--color-primary) !important; }
.button.button.button-outline:hover{ background-color: var(--color-primary); border: 1px solid var(--color-primary); color: white !important; }

.button.button-secundary{ background-color: var(--color-secundary); border: 1px solid var(--color-secundary); }
.button.button-secundary:hover{ background-color: var(--color-secundary-dark); border: 1px solid var(--color-secundary-dark); }
.button.button-secundary-dark{ background-color: var(--color-secundary-dark); border: 1px solid var(--color-secundary-dark); }
.button.button-secundary-dark:hover{ background-color: var(--color-secundary); border: 1px solid var(--color-secundary); }
.button.button-secundary.button-outline{ background-color: white; color: var(--color-secundary) !important; }
.button.button-secundary.button-outline:hover{ background-color: var(--color-secundary); border: 1px solid var(--color-secundary); color: white !important; }

.button.button-orange{ background-color: var(--color-orange); border: 1px solid var(--color-orange); }
.button.button-orange:hover{ background-color: var(--color-orange-dark); border: 1px solid var(--color-orange-dark); }
.button.button-orange-dark{ background-color: var(--color-orange-dark); border: 1px solid var(--color-orange-dark); }
.button.button-orange.button-outline{ background-color: white; color: var(--color-orange) !important; }
.button.button-orange.button-outline:hover{ background-color: var(--color-orange); border: 1px solid var(--color-orange); color: white !important; }

.button.button-green{ background-color: var(--color-green); border: 1px solid var(--color-green); }
.button.button-green:hover{ background-color: var(--color-green-dark); border: 1px solid var(--color-green-dark); }
.button.button-green-dark{ background-color: var(--color-green-dark); border: 1px solid var(--color-green-dark); }
.button.button-green.button-outline{ background-color: white; color: var(--color-green) !important; }
.button.button-green.button-outline:hover{ background-color: var(--color-green); border: 1px solid var(--color-green); color: white !important; }

.button.button-white{ background-color: #EFEBEB; border-color: #DEDEDE; box-shadow: 0px 2px 4px #555; color: var(--color-blue) !important; }
.button.button-white:hover{ background-color: white; border-color: white; color: var(--color-blue) !important; }
.button.button-white.button-outline{ background-color: transparent; color: #EFEBEB !important; }
.button.button-white.button-outline:hover{ background-color: var(--color-secundary-dark); border: 1px solid var(--color-secundary-dark); color: white !important; }

#select_order_by{ align-items: center; border: 1px solid #666; box-shadow: 0px 2px 3px #bbb; border-radius: 5px; color: #444; cursor: pointer; height: 40px; font-size: 14px; justify-content: center; outline: none; padding: .2rem 1.2rem; }
body.skin-black #select_order_by{ background-color: #151515; color: #fff; box-shadow: 0px 2px 3px #333; }



/* estilos para el contenedor dedl item */
.content-course{ background-color: white; border: 1px solid #eee; overflow: hidden; padding: 0 !important; position: relative; }
/* estilos para el contenedor el tumblr */
.content-course .content-tumblr{ align-items: center; background-color: #000; display: flex; height: 180px; justify-content: center; overflow: hidden; position: relative; width: 100%; }
/* estilos para la imagen el contenedor el tumblr */
.content-course .content-tumblr img{ height: 100%; width: 100%; }
/* estilos para el contenedor del previe el trailer el contenedor el tumblr */
.content-course .content-tumblr a.content-preview-trailer{ align-items: center; background-color: rgba(220, 84, 38, .8); color: white; display: flex; left: 0; height: 100%; justify-content: center; opacity: 0; position: absolute; top: 0; transition-duration: .3s; width: 100%; }
/* estilos para el contenedor del previe el trailer el contenedor el tumblr cuando le hagab hover */
.content-course .content-tumblr a:hover{ opacity: 1; transition-duration: .5s; }
/* estilos para el body del item */
.content-course .body-course{ padding: 10px; padding-bottom: 120px; }
/* estilos para el body del item */
.content-course .body-course a{ color: #000; }
/* estilos para el body del item */
.skin-blue .content-course .body-course a:hover .course-title, .skin-blue #modalShowTrailer a:hover .course-title{ color: var(--color-blue-dark); }
.skin-orange .content-course .body-course a:hover .course-title, .skin-orange #modalShowTrailer a:hover .course-title{ color: var(--color-orange-dark); }
.skin-green .content-course .body-course a:hover .course-title, .skin-green #modalShowTrailer a:hover .course-title{ color: var(--color-green-dark); }


.content-course .body-course .content-buttons{ position: absolute; bottom: 0px; left: 0; width: 100%; }
/* estilos para los botones del curso*/
.content-course .body-course a.button{ border-radius: 0; font-size: 19px; height: 60px; width: 100%; }

.content-course .body-course a.button-outline{ border: none; border-top: 1px solid #eee; color: #555 !important; }

.content-course .body-course a.button-outline:hover{ background-color: #F1F1F1; color: #000 !important; }
/* estilos para la fecha del curso */
.content-course .body-course .course-date, .content-course .body-course .course-data, .content-coachs .card-coach .coach-data, .content-categories .card-category .category-data, #modalShowTrailer .course-data, #modalShowTrailer .course-date{ font-size: 13px; }
/* estilos para la titulo del curso */
.content-course .body-course .course-title, #modalShowTrailer .course-title{ font-size: 20px; line-height: 20px; margin-top: 3px; }
.skin-blue .content-course .body-course .course-title, .skin-blue #modalShowTrailer .course-title{ color: var(--color-blue); }
.skin-orange .content-course .body-course .course-title, .skin-orange #modalShowTrailer .course-title{ color: var(--color-orange); }
.skin-green .content-course .body-course .course-title, .skin-green #modalShowTrailer .course-title{ color: var(--color-green); }
/* estilos para la autor del curso */
.content-course .body-course .course-author{ font-size: 14px; margin-bottom: 10px !important; }
/* estilos para la descripcion del curso */
.content-course .body-course .course-description, #modalShowTrailer .course-description{ font-size: 15px; line-height: 22px; }

.content-course .body-course .course-description{ color: #fff; opacity: 0; left: 0; height: 0; padding: 10px; position: absolute; top: 180px; transition-duration: .2s; overflow-y: auto; width: 100%; }
.content-course .body-course .course-description{ background-color: var(--color-primary); }
.skin-blue .content-course .body-course .course-description{ background-color: var(--color-blue); }
.skin-orange .content-course .body-course .course-description{ background-color: var(--color-orange); }
.skin-green .content-course .body-course .course-description{ background-color: var(--color-green); }
/* estilos para el contenedor dedl item cuano le hagan hover */
.content-course .body-course:hover .course-description{ height: calc(100% - 300px); opacity: 1; z-index: 10; transition-duration: .3s; }

.content-course-more-recommend .body-course .course-description{ top: 0 !important; }

.content-course-more-recommend .body-course:hover .course-description{ height: calc(100% - 0px) !important; }
/* estilos para las imagenes de los datos del curso */
.content-course .body-course .course-data img, .content-coachs .card-coach .coach-data img, .content-categories .card-category .category-data img, #modalShowTrailer .course-data img{ width: 14px; margin-right: 3px; }


.content-data-course{ border-radius: 10px; padding-top: 40px !important; }
body .content-data-course{ border: 3px solid var(--color-primary); border-radius: 10px; padding-top: 40px !important; }
body.skin-blue .content-data-course{ border: 3px solid var(--color-blue); border-radius: 10px; padding-top: 40px !important; }
body.skin-orange .content-data-course{ border: 3px solid var(--color-orange); border-radius: 10px; padding-top: 40px !important; }
body.skin-green .content-data-course{ border: 3px solid var(--color-green); border-radius: 10px; padding-top: 40px !important; }


.content-data-course h3{ border-radius: 5px; color: #fff; left: 25px; padding: 10px 15px; position: absolute; top: -65px; }
body .content-data-course h3{ background-color: var(--color-primary); }
body.skin-blue .content-data-course h3{ background-color: var(--color-blue); }
body.skin-orange .content-data-course h3{ background-color: var(--color-orange); }
body.skin-green .content-data-course h3{ background-color: var(--color-green); }


/* estilos para el contenedor dedl item */
.content-event{ background-color: #fff; padding: 0 !important; position: relative; }
/* estilos para el contenedor dedl item cuano le hagan hover */
.content-event:hover{ box-shadow: 0 0 8px #aaa; transition-duration: .3s;  }
/* estilos para el contenedor el tumblr */
.content-event .content-tumblr{ align-items: center; background-color: #000; display: flex; height: auto; justify-content: center; overflow: hidden; position: relative; width: 100%; }
/* estilos para la imagen el contenedor el tumblr */
.content-event .content-tumblr img{ height: 100%; width: 100%; }
/* estilos para el contenedor del previe el trailer el contenedor el tumblr */
.content-event .content-tumblr a.content-preview-trailer{ align-items: center; background-color: rgba(220, 84, 38, .8); color: #000; display: flex; left: 0; height: 100%; justify-content: center; opacity: 0; position: absolute; top: 0; transition-duration: .3s; width: 100%; }
/* estilos para el contenedor del previe el trailer el contenedor el tumblr cuando le hagab hover */
.content-event .content-tumblr a:hover{ opacity: 1; transition-duration: .5s; }
/* estilos para el body del item */
.content-event .body-event{ padding: 10px; padding-bottom: 80px; padding-top: 40px; }
.content-event .body-event .button-price{ display: flex; font-size: 14px !important; left: 50%; height: 40px !important; padding: 5px !important; position: absolute; margin-top: -60px; transform: translateX(-50%); min-width: 80px; width: auto; max-width: 200px; }
/* estilos para el body del item */
.content-event .body-event a{ color: #000; }
/* estilos para el body del item */
.content-event .body-event a:hover .event-title, #modalShowTrailer a:hover .event-title{ color: var(--color-blue); }

.content-event .body-event .content-buttons{ position: absolute; bottom: 0px; left: 0; width: 100%; }
/* estilos para los botones del curso*/
.content-event .body-event a.button{ border-radius: 0; display: flex; font-size: 19px; line-height: 20px; height: 60px; width: 100%; }
/* estilos para los botones del curso*/
.content-event .body-event a.button small{ font-size: 10px; }

.content-event .body-event a.button-outline{ border: none; border-top: 1px solid #eee; color: #555 !important; }

.content-event .body-event a.button-outline:hover{ background-color: #F1F1F1; color: #000 !important; }
/* estilos para la fecha del curso */
.content-event .body-event .event-date, .content-event .body-event .event-data, .content-coachs .card-coach .coach-data, .content-categories .card-category .category-data, #modalShowTrailer .event-data, #modalShowTrailer .event-date{ font-size: 13px; }
/* estilos para la titulo del curso */
.content-event .body-event .event-title, #modalShowTrailer .event-title{ font-size: 20px; line-height: 20px; margin-top: 3px; }
/* estilos para la autor del curso */
.content-event .body-event .event-author{ font-size: 14px; margin-bottom: 10px !important; }
/* estilos para la descripcion del curso */
.content-event .body-event .event-description, #modalShowTrailer .event-description{ font-size: 15px; line-height: 22px; }

.profile-coach .course-data img{ width: 16px; margin-right: 3px; }
/* estilos para el botón de compra*/
.content-course .body-course .button{ font-size: 18px; display: flex; }

/* estilos para el contenedor dedl item */
.content-document{ background-color: white; border: 1px solid #eee; padding: 0 !important; transition-duration: .3s; }
/* estilos para el contenedor dedl item cuano le hagan hover */
.content-document:hover{ box-shadow: 0 0 8px #aaa; transition-duration: .3s;  }
.content-document .content-tumblr{ align-items: center; background-color: #000; display: flex; height: 180px; justify-content: center; overflow: hidden; position: relative; width: 100%; }
/* estilos para la imagen el contenedor el tumblr */
.content-document .content-tumblr img{ height: 100%; width: 100%; }
.content-document .file{ align-items: center; display: flex; height: 180px; justify-content: center; overflow: hidden; position: relative; width: 100%; }
/* estilos para el body del item */
.content-document .body-document{ padding: 10px 10px 15px 10px; position: relative; }

.content-document .body-document .button-price{ display: flex; margin-top: 5px; min-width: 200px; }
/* estilos para el body del item */
.content-document .body-document a{ color: #000; }
/* estilos para el body del item */
.content-document .body-document a:hover .document-title{ color: var(--color-blue); }
/* estilos para la fecha del curso */
.content-document .body-document .document-date, .content-document .body-document .document-data{ color: #666; font-size: 14px !important; margin-bottom: 10px; }
/* estilos para la titulo del curso */
.content-document .body-document .document-title{ font-size: 20px; line-height: 20px; margin-top: 3px; margin-bottom: 15px; }
/* estilos para la descripcion del curso */
.content-document .body-document .document-description{ font-size: 15px; line-height: 22px; }

/* estilos para la tarjeta de instructor */
.card-coach, .card-category{ background-color: #fff; border: 1px solid #bbb; border-radius: 5px; color: #333; display: block; padding: 20px 15px; }
/* estilos para la tarjeta de instructor cuano le hagan hover */
.card-coach.active, .card-coach:hover, .card-category:hover{ background-color: #eee; color: #000; }
/* estilos para la imagen de la tarjeta de instructor */
.card-coach img.profile{ height: 70px; width: 70px; }
/* estilos para la especialidad del intructor */
.card-coach small{ font-size: 10px; }

/* estilos contenedor de iamgen eventos */
.content-img-events{ align-items: center; display: flex; height: 550px; justify-content: center; overflow: hidden; width: 100%; }
/* estilos contenedor de iamgen eventos */
.img-events{ height: auto; width: 100%; }

/* estilos para el contenedor del banner del evento*/
.content-banner{ border-radius: 10px; box-shadow: 2px 4px 6px #ccc; height: auto; overflow: hidden; width: 100%; }
/* esitlos para la imagen del evento */
.content-banner img{ height: auto; width: 100%; }
/* estilo para el contenedor de botones */
.content-banner .content-buttons{ align-items: center; background-color: white; border-radius: 10px; box-shadow: 2px 8px 16px #ddd; bottom: -31px; display: flex; left: 50%; justify-content: center; flex-wrap: wrap; min-width: 350px; padding: 10px; position: absolute; transform: translateX(-50%); }
/* estilos para el separador*/
.content-banner .content-buttons .separator{ border: 1px solid #ddd; margin: 0 20px; width: 1px; height: 40px; }
/* estilos para el boton de comprar la entrada al evento */
.content-banner .content-buttons .btn-buy{ align-items: center; border-radius: 5px; color: #fff; display: flex; height: 53px; flex-wrap: wrap; justify-content: center; margin-bottom: 5px; padding: 5px 15px; width: 100%; text-align: center; }
body.skin-blue .content-banner .content-buttons .btn-buy{ background-color: var(--color-blue); }
body.skin-orange .content-banner .content-buttons .btn-buy{ background-color: var(--color-orange); }
body.skin-green .content-banner .content-buttons .btn-buy{ background-color: var(--color-green); }
/* estilos para el boton de comprar la entrada al evento */
.content-banner .content-buttons .btn-buy:hover{ box-shadow: 2px 4px 6px #999; }
body.skin-blue .content-banner .content-buttons .btn-buy:hover{ background-color: var(--color-blue-dark); }
body.skin-orange .content-banner .content-buttons .btn-buy:hover{ background-color: var(--color-orange-dark); }
body.skin-green .content-banner .content-buttons .btn-buy:hover{ background-color: var(--color-green-dark); }
/* estilos para el boton de whatsapp */
.content-banner .content-buttons .btn-whatsapp{ height: 53px; width: 100%; }
/* estilos para el boton de cerrar el contenedor de filtros */
.btn-close-filter{ color: #333; position: absolute; right: 25px; top: 22px; z-index: 999; }
/* estilos para el boton de cerrar el contenedor de filtros */
body.skin-black .btn-close-filter{ color: #fff; }
/* estilos para el contenedor de filtros */
.content-filters{ left: -415px; overflow: hidden; padding-right: 0; position: fixed; z-index: 99; top: 50px; transition-duration: .3s; width: 400px; }
/* estilos para el contenedor de filtros */
.content-filters.show{ left: -15px; transition-duration: .3s; }
/* estilos para la tarjeta de filtros*/
.content-filters .card{ overflow-y: auto; height: calc( 100vh - 50px ); }

body.skin-black .content-filters .card{ background-color: #151515; color: #fff; }



body.skin-black .content-course, body.skin-black .content-event, body.skin-black .content-document{ background-color: #151515; }

body.skin-black .content-course .body-course, body.skin-black .content-course .body-course a, body.skin-black .content-event .body-event, body.skin-black .content-event .body-event a, body.skin-black .content-event .body-event .event-date, body.skin-black .content-event .body-event .event-data, body.skin-black .content-document .body-document, body.skin-black .content-document .body-document a{ color: #fff !important; }

/* estilos para los iconos de la card de detalles de curso */
.icon-details-course{ height: 16px; width: 18px; }
/* esitlos para el porcentaje de calificaci+on de un curso en detalles de curso */
.porcent-star{ background-color: #E0DFDF; border-radius: 5px; height: 10px; position: relative; width: 130px; }
/* estilos para el tamaño del porcentaje de calificación de un curso en detalles de curso*/
.width-porcent-star{ background-color: var(--color-blue); border-radius: 5px; height: 10px; left: 0; position: absolute; top: 0; width: 0%; }
/* estilos para acortar los textos de detalles de curso */
.content-text.short{ height: 150px; overflow: hidden; transition-duration: .3s;  }
/* estilos para expandir los textos de detalles de curso */
.content-text.expanded{ height: auto; transition: height 0.25s ease-in; }
/* estilos para los items de comentarios */
.item-comments{ border-bottom: 1px solid #eee; margin-bottom: 30px; padding-bottom: 10px; }
/* estilos para el ultimo item de comentarios */
.item-comments:last-child{ border-bottom: none; margin-bottom: 0; }


/* estilos para la imagen edl perfil */
.content-image-profile{ height: 120px; margin-bottom: 50px; }
/* estilos para el contenedor de la imagen */
.content-image-profile .content-image{ background: #eee; border: 4px solid #fff; border-radius: 50%; box-shadow: 0px 3px 10px #666; overflow: hidden; height: 120px; width: 120px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
/* esitlos para la imagen del usuario */
.content-image-profile .content-image img{ height: 100%; width: 100%; }
/* estilos para el label de abrir modal */
.content-image-profile .content-image label{ background: rgba(0, 0, 0, .4); bottom: -50px; color: #ddd; cursor: pointer; left: 0%; padding: 7px; position: absolute; text-align: center; transition-duration: .3s; width: 100%; }
/* estilos para el label de abrir modal cuando le hagan hover al contenedor de la imagen */
.content-image-profile .content-image:hover label{ bottom: -10px; transition-duration: .5s; }
/* estilos para el label de abrir modal cuando le hagan hover */
.content-image-profile .content-image label:hover{ background: rgba(0, 0, 0, .7); }

/* estilos para el banner de promociones */
.banner-promotions{ background-image: url(../../img/banner-promotions.jpg); background-position: center; background-size: cover; height: 400px; }

.img-caso-exito{ height: 90px; filter: grayscale(100); width: auto; }

.img-caso-exito:hover{ filter: grayscale(0); transition-duration: .3s; }

/* estilos para el tiempo de promociones */
.content-countdown-promotions-time{ top: 33px; }

.card-plan{ background-color: #fff; border: 1px solid #e9e9e9; border-radius: 7px; padding: 1.5rem; }

.card-plan .col-lg-6:first-child{ border-bottom: 1px solid #e9e9e9;  }


#content-certificate{ min-height: 200px; }

.overliew-card-school{ background-color: rgba(0, 0, 0, .5); height: 100%; left: 0; position: absolute; top: 0; z-index: 1; width: 100%; }
.text-card-school{ bottom: 20px; color: #fff; left: 0; padding: 10px 20px; position: absolute; z-index: 2; width: 100%; }

.banner-promotion, .banner-promotion-ite{ box-shadow: 0 2px 4px rgba(0, 0, 0, .2); position: fixed; left: 0; top: 50px; width: 100%; z-index: 990; }
.banner-promotion a, .banner-promotion-item a{ background-color: var(--color-blue); }
.banner-promotion .price, .banner-promotion-item .price{ color: #fff; font-size: 30px; padding-top: 5px; position: relative; }
.banner-promotion .subprice, .banner-promotion-item .subprice{ color: #fff; font-size: 12px; margin-left: 18px; position: relative; }
.banner-promotion .subprice::before, .banner-promotion-item .subprice::before{ content: ''; background-color: #eee; height: 50%; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 1px; }


/* estilos para el contenedor del precio */
.text_value{ float: left; overflow: hidden; padding-right: 14px; white-space: nowrap; width: 100%; }
/* estilos para el precio */
.text_value span:last-child{ background-color: #efefef; position: absolute; right: 14px; }
/* estilos para los puntos separadores del precio */
.text_value .label-dots::after{ content: '.........................................................................................'; color: #999; letter-spacing: 3px; }

/* estilos para los archivos de los posts */
.file{ background-color: #fff; color: white; width: 100%; }
/* estilos para color de archivos tipo word */
.file.word{ background-color: #02549E; }
/* estilos para color de archivos tipo pdf */
.file.pdf{ background-color: #F72D1F; }
/* estilos para color de archivos tipo excel */
.file.excel{ background-color: #1D6F42; }
/* estilos para color de archivos tipo power point */
.file.power_point{ background-color: #D04423; }
/* estilos para color de archivos zip o rar */
.file.zip_rar{ background-color: #271C42; }
/* estilos para los iconos */
.file .icon{ font-size: 48px; padding: 10px; text-align: center; }
/* estilos para los nomnbres */
.file .name{ font-weight: bold; padding: 10px; text-align: center; }
/* estilos para los vinculos */
.file .price a{ border-top: 1px dashed #aaa; color: white; display: block; opacity: .7; padding: 5px; text-align: center; }
/* estilos para el precio de los vinculos */
.file .price a p{ font-weight: bold; }
/* estilos para los vinculos cuando hagan hover */
.file .price a:hover{ opacity: 1; }

/* estilos para el boton de retornar al listado de categorias anterior */
.list-categories .item-category-return{ cursor: pointer; display: block; font-size: 12px; padding: 10px; position: relative; width: 100%; }
/* estilos para el item de listado de categoria */
.list-categories .item-category{ border-bottom: 1px solid #c7c7c6; cursor: pointer; display: block; padding: 10px; padding-right: 45px; position: relative; width: 100%; }
/* estilos para el item de listado de categoria cuando sea el ultimo */
.list-categories .item-category:last-child{ border-bottom: none; }
/* estilos para el boton de ir a las categorias hijas */
.list-categories .item-category a{ background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20fill%3D%27%23151211%27%20d%3D%27M13.25%2010l-7.141-7.42c-0.268-0.27-0.268-0.707%200-0.979%200.268-0.27%200.701-0.27%200.969%200l7.83%207.908c0.268%200.271%200.268%200.709%200%200.979l-7.83%207.908c-0.268%200.271-0.701%200.27-0.969%200s-0.268-0.707%200-0.979l7.141-7.417z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E); background-repeat: no-repeat; background-position: center right; background-size: 20px; display: block; right: 0; position: absolute; top: 0px; min-height: 45px; height: 100%; width: 45px; }

/* estilos para el contenedor de botones flotantes*/
.floating-contact{ z-index: 1000; transition: all ease .4s; transform-origin: center; width: 55px; height: 55px; border-radius: 50%; position: fixed; right: 25px; bottom: 80px; background: #f9f9f9; box-shadow: 0 3px 4px 0 rgb(94 94 94 / 70%); overflow: hidden; }

.floating-contact.active{ bottom: -100px; height: 400px; right: -100px; width: 400px; z-index: 9999; }
/* estilos para el boton principal de botones flotantes */
.floating-contact > .btn-main-floating-contact{ align-items: center; background-color: #fff; border: 3px solid var(--color-blue); border-radius: 50%; box-shadow: 0px 0px 10px #999; color: #333; display: flex; font-size: 20px; left: 0; height: 55px; justify-content: center; padding: 15px; position: relative; top: 0; transition: all ease .4s; width: 55px; }
/* estilos para el boton principal de botones flotantes cuando le hagan hover */
.btn-main-floating-contact:hover{ background-color: var(--color-blue); color: #fff; border-color: var(--color-blue); }
/* función para cuano este activo el contenedor de botones flotantes */
.floating-contact.active > .btn-main-floating-contact{ position: absolute; left: 220px; top: 150px; transition: all ease .4s; }
/* estilos para los botones de contacto */
.btn-floating-contact{ align-items: center; color: #333; display: flex; justify-content: center; flex-wrap: wrap; font-size: 14px; position: absolute; text-align: center; width: 190px; transition: all ease .6s; }
/* estilos para los botones de contacto cuando les hagan hover */
.btn-floating-contact:hover{ color: var(--color-blue); }
/* estilos para el icono de los botones de contacto */
.btn-floating-contact .icon{ align-items: center; background-color: #fff; border-radius: 50%; box-shadow: 0px 0px 10px #999; color: var(--color-blue); display: flex; font-size: 20px; height: 40px; justify-content: center; margin-left: 10px; position: relative; width: 40px; }
/* estilos para el de contacto de donde estamos */
.btn-floating-contact.where-we-are{ right: 130px; top: 40px; }
/* estilos para el de contacto de donde estamos */
.btn-floating-contact.we-call-you{ right: 205px; top: 130px; }
{ align-items: center; display: flex; justify-content: center; flex-wrap: wrap; right: 200px; text-align: center; top: 120px; width: 190px; }
/* estilos para el de contacto de donde estamos */
.btn-floating-contact.write-to-whatsapp{ right: 190px; top: 230px; }

/* estilos para la ventana de correos */
.window_mail{ background-color: #fff; bottom: 0; border-radius: 5px 5px 0 0; box-shadow: 3px 3px 16px #999; height: 0; overflow: hidden; position: fixed; right: 20px; max-width: 500px; z-index: 99999; transition-duration: .2s; }
.window_mail.show{ height: 490px; transition-duration: .3s; }
.window_mail_header{ align-items: center; background-color: var(--color-blue); border-radius: 5px 5px 0 0; color: white; display: flex; height: 50px; justify-content: space-between; padding: 10px 20px; width: 100%; }
.window_mail_header a{ color: #ccc; }
.window_mail_header a:hover{ color: #fff; }
.window_mail_body{ height: 440px; overflow: auto; padding: 20px 0px; }



.btn-list-options-board{ color: #000; display: flex; font-size: 20px; position: absolute; top: 0px; right: 40px; }
/* estilos para el div que permitira cerrar dinamicamente el contenedor de la lista de opciones del tablero */
.overview_list_options_board{ background-color: rgba(0, 0, 0, .1); left: 0; height: 100%; position: fixed; top: 0; width: 100%; z-index: 99; }
/* estilos para las opciones de neuvas columnas */
.list-options-board{ background-color: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0px 0px 9px #ccc; position: absolute; top: -20px; z-index: 1; background: #fff; position: absolute; top: 30px; width: 0px; z-index: 999; }
.list-options-board.position-left{ left: 0px; }
.list-options-board.position-right{ right: 40px; }
/* estilos para las opciones  */
.list-options-board{ display: none; width: 250px; }
.list-options-board.active{ align-items: center; display: flex; flex-wrap: wrap; }
/* estilosp ara el ul de neuva columna */
.list-options-board ul{ width: 100%; }
/* estilos para los items de nueva columna */
.list-options-board ul li{ align-items: center; border-bottom: 1px solid #EFEFEF; display: flex; min-height: 35px; padding: 10px 15px; width: 100%; }
/* estilos para los links de nueva columna */
.list-options-board ul li a{ align-items: center; color: #666; display: flex; font-size: 15px; width: 100%; }
/* estilos para los links de nueva columna caundo le hagan hover */
.list-options-board ul li a:hover{ color: #000; }
/* estilos para los iconos de los  links de nueva columna */
.list-options-board ul li a .icon{ display: inline; margin-right: 5px; text-align: center; width: 30px; }

/* estilos para el padding top de un espacio */
.padding-top{ padding-top: 50px; }
/* contenedor para mostrar las opciones con precarga */
.content_options{ background-color: #fff; box-shadow: 0px 1px 3px #333; height: 130px; overflow-y: auto; position: absolute; width: calc( 100% - 30px ); z-index: 1; }
/* listado de los objetos del contenedor de opciones con precarga */
.list_content_options{ display: block; height: 100%; position: relative; width: 100%; }
/* listado de los vinculos de objetos del contenedor de opciones con precarga */
.list_content_options a{ align-items: center; border-bottom: 1px dashed #aaa; color: #666; display: flex; padding: 5px 10px; width: 100%; }
/* listado de los vinculos de objetos del contenedor de opciones con precarga cuando le hagan hover */
.list_content_options a:hover{ background: #efefef; color: #000; }
/* esitlos para la imagen de la empresa en el listado de opciones */
.photo-company-option{ border-radius: 50%; box-shadow: 0 1px 4px #666; height: 25px; margin-right: 7px; width: 25px; }
/* estilos para el icono del preload de opciones con precarga */
.fa-spinner{ -webkit-animation:spin 1.8s linear infinite; -moz-animation:spin 1.8s linear infinite; animation:spin 1.8s linear infinite; }
/* estilos para las animaciones */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


@media ( min-width: 400px )
{
	/* estilos para el contenedor el tumblr de cursos y eventos */
	.content-course .content-tumblr, .content-event .content-tumblr{ height: auto; }

	.content-course .body-course .course-description{ top: 250px; }
	.content-course .body-course:hover .course-description{ height: calc(100% - 370px); }
}


@media ( min-width: 450px )
{
	/* esitlos para el porcentaje de calificaci+on de un curso en detalles de curso */
	.porcent-star{ width: 150px; }
}

@media ( min-width: 576px )
{
	.content-course .body-course{ padding-bottom: 60px; }
	/*.content-list-courses .body-course{ padding-bottom: 60px; }*/
  /*.content-course-more-recommend .body-course{ padding-bottom: 60px; }*/
	/* estilos para el contenedor el tumblr de cursos en el listado de cursos */
	.content-list-courses .content-course .content-tumblr{ height: 350px; }
	.content-list-courses .body-course .course-description{ top: 350px; }
	.content-list-courses .body-course:hover .course-description{ height: calc(100% - 410px); }
	/* estilos para la imagen el contenedor el tumblr */
	.content-course .content-tumblr img, .content-event .content-tumblr img{ height: 100%; width: 100%; }
	/* esitlos para el porcentaje de calificaci+on de un curso en detalles de curso */
	.porcent-star{ width: 250px; }
}


@media ( min-width: 768px )
{
	/* estilos para el padding top de un espacio */
	.padding-top{ padding-top: 60px; }
	/* estilos para el contenedor el tumblr de cursos y eventos */
	.content-course .content-tumblr, .content-event .content-tumblr{ height: auto; }

	.content-course .body-course .course-description{ top: 220px; }
	.content-course .body-course:hover .course-description{ height: calc(100% - 280px); }
	.content-course .content-tumblr, .content-event .content-tumblr, .content-document .content-tumblr, .content-document .file{ height: 220px; }

	.content-document .content-tumblr.history{ height: 350px; }
	/* estilos para el contenedor el tumblr de cursos en el listado de cursos */
	.content-list-courses .content-course .content-tumblr{ height: 250px; }
	.content-list-courses .body-course .course-description{ top: 250px; }
	.content-list-courses .body-course:hover .course-description{ height: calc(100% - 310px); }
	/* estilos para la imagen el contenedor el tumblr */
	.content-course .content-tumblr img{ height: 100%; width: 100%; }
	/* estilos para el cuerpo del curso */
	.content-course .body-course{ padding-bottom: 60px; width: 100%; }
	/* estilos para el contenedor de promociones de cursos*/
	.content-promotions-courses .content-course .body-course{ padding-bottom: 15px; }
	/* estilos para los datos del cuerpo del contenedor de promociones del curso */
	.content-promotions-courses .content-course .body-course .content-course-data{ bottom: 0px; }
	/* estilos para los datos del cuerpo del curso */
	.content-course .body-course .content-course-data{ width: calc( 100% - 50px ); }
	/* estilos para los botones del curso*/
	.content-course .body-course a.button{ font-size: 16px; width: 50%; }
	/* estilos para el contenedor el tumblr de los eventos de un usuario */
	.my-events .content-event .content-tumblr{ height: auto; }
	/* estilos contenedor de iamgen eventos */
	.content-img-events{ align-self: flex-start; position: absolute; height: 450px; top: -80px; width: 100%; }
	/* estilos contenedor de iamgen eventos */
	.img-events{ height: 100%; width: auto; }
	/* esitlos para el porcentaje de calificaci+on de un curso en detalles de curso */
	.porcent-star{ width: 200px; }
	/* estilos para el contedor botones del evento en la descripción */
	.content-banner .content-buttons{ min-width: 450px; }
	/* estilos para el titulo del evento en la descripción */
	.content-banner .title-event{ background-color: rgba(0, 0, 0, .3); bottom: 80px; color: #fff; left: 15px; padding-left: 50px; padding-right: 20px; position: absolute; }
	/* estilos para los botones del evento en la descripción */
	.content-banner .content-buttons .btn-buy, .content-banner .content-buttons .btn-whatsapp{ margin-bottom: 0px; margin-top: 0px; width: auto; }

  .banner-promotion .content-countdown-p, .banner-promotion-item .content-countdown-p{ width: 100% }
  .banner-promotion .content-countdown, .banner-promotion-item .content-countdown{ margin-top: -15px; width: 100% }

  .banner-promotion{ top: 60px; }

  .window_mail.show{ height: 410px; }
	.window_mail_body{ height: 360px; }

  #content-certificate{ min-height: 400px; }
}


@media ( min-width: 992px )
{
	/* estilos para el contenedor el tumblr de cursos y eventos */
	.content-course .content-tumblr, .content-event .content-tumblr{ height: auto; }
	.content-course .body-course .course-description{ top: 180px; }
	.content-course .body-course:hover .course-description{ height: calc(100% - 240px); }
	.content-course .content-tumblr, .content-event .content-tumblr, .content-document .content-tumblr, .content-document .file{ height: auto; }
	/* estilos para el contenedor el tumblr de cursos en el listado de cursos */
	.content-list-courses .content-course .content-tumblr{ height: 180px; }
	.content-list-courses .body-course .course-description{ top: 180px; }
	.content-list-courses .body-course:hover .course-description{ height: calc(100% - 240px); }
	/* estilos para los botones del curso*/
	.content-course .body-course a.button{ font-size: 14px; }
	/* estilos para los datos del instructor */
	.content-coachs .card-coach .coach-data p:first-child{ width: 30%; }
	/* estilos contenedor de iamgen eventos */
	.content-img-events{ top: -90px; }
	/* estilos para el contenedor de la card de detalles de curso */
	.content-card-details-course{ position: absolute; right: 0px; width: 90%; z-index: 99; }
	/* estilos para el contenedor de la card de detalles de curso cuando le hagan scroll */
	.content-card-details-course.active{ position: fixed; right: 5%; width: 35%; }
	/* estilos para la lista de la card de detalles de curso */
	.list-details-course{ font-size: 14px; }
	/* esitlos para el porcentaje de calificaci+on de un curso en detalles de curso */
	.porcent-star{ width: 90px; }
  	/* estilos para el tiempo de promociones */
  	.content-countdown-promotions-time{ top: 45px; }

  .card-plan .col-lg-6:first-child{ border-bottom: none; border-right: 1px solid #e9e9e9;  }
}


@media ( min-width: 1200px )
{
	/* estilos para el padding top de un espacio */
	.padding-top{ padding-top: 72px; }
  .banner-promotion{ top: 72px; }
	/* estilos para los datos del instructor */
	.content-coachs .card-coach .coach-data p:first-child{ width: 20%; }
	/* estilos contenedor de iamgen eventos */
	.content-img-events{ top: -110px; }
	/* estilos para el contenedor de filtros */
	.content-filters{ left: 0px; overflow-y: visible; height: auto; position: absolute; z-index: 9; top: 70px; width: auto; }
	/* estilos para el contenedor de filtros */
	.content-filters.show{ left: -25%; transition-duration: .3s; }

  .content-filters .card{ height: 100%; overflow: hidden }
	/* estilos para el contenedor de filtros */
	.content-courses, .content-events, .content-documents{ left: 25%; top: 0px; transition-duration: .3s; }
	/* estilos para el contenedor de filtros */
	.content-courses.show, .content-events.show, .content-documents.show{ left: 0; top: 0; transition-duration: .3s; }
	/* estilos para el contenedor de la imagen del evento */
	.content-event .content-tumblr{ height: auto; }
	/* estilos para el contenedor de la card de detalles de curso cuando le hagan scroll */
	.content-card-details-course.active{ right: 7%; width: 32%; }
	/* esitlos para el porcentaje de calificaci+on de un curso en detalles de curso */
	.porcent-star{ width: 150px; }
	/* estilos para los botones del curso*/
	.content-course .body-course a.button{ font-size: 16px; }
}


@media ( min-width: 1400px )
{
	/* estilos para el contenedor el tumblr */
	.content-course .content-tumblr, .content-event .content-tumblr{ height: auto; }


	.content-course .body-course .course-description{ top: 190px; }
	.content-course .body-course:hover .course-description{ height: calc(100% - 250px); }
	.content-course .content-tumblr, .content-event .content-tumblr, .content-document .content-tumblr, .content-document .file{ height: auto; }
	/* estilos para el contenedor el tumblr de cursos en el listado de cursos */
	.content-list-courses .content-course .content-tumblr{ height: 220px; }
	.content-list-courses .body-course .course-description{ top: 220px; }
	.content-list-courses .body-course:hover .course-description{ height: calc(100% - 280px); }
	/* estilos para el contenedor de la card de detalles de curso cuando le hagan scroll */
	.content-card-details-course.active{ right: 11%; width: 30%; }
}


@media ( min-width: 1700px )
{
	/* estilos para el contenedor el tumblr */
	.content-courses.show .content-course .content-tumblr, .content-events.show .content-event .content-tumblr{ height: auto; }
	.content-courses.show .body-course .course-description{ top: 260px; }
	.content-courses.show .body-course:hover .course-description{ height: calc(100% - 320px); }
	.content-courses.show .content-course .content-tumblr, .content-events.show .content-event .content-tumblr, .content-document.show .content-tumblr, .content-document .file{ height: auto; }
	/* estilos para el contenedor el tumblr de cursos en el listado de cursos */
	.content-list-courses .content-course .content-tumblr{ height: 240px; }
	.content-list-courses .body-course .course-description{ top: 240px; }
	.content-list-courses .body-course:hover .course-description{ height: calc(100% - 300px); }
	/* estilos para el contenedor de la card de detalles de curso cuando le hagan scroll */
	.content-card-details-course.active{ right: 19%; width: 457px; }
}