/* 
    Theme Name: Instituto Columbia
    Theme URI: 
    Author: Ludik 
    Author URI: 
    Description: Theme Diseñado para Columbia
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    Tags: cursos
    Text Domain: columbia

*/
body,
html {
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
}
/* FONTS ----------------------------------- */
/* HELVETICA ----------------------------------- */
@font-face {
  font-family: 'helvetica';
  src: url('./assets/fonts/helvetica/HelveticaNeueCyr-Bold.woff')
      format('woff2'),
    url('./assets/fonts//helvetica/HelveticaNeueCyr-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* CAMPTON ------------- */
@font-face {
  font-family: 'camptonbold';
  src: url('./assets/fonts/campton/campton-bold_0-webfont.woff2')
      format('woff2'),
    url('./assets/fonts/campton/campton-bold_0-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'camptonextrabold';
  src: url('./assets/fonts/campton/campton-extrabold_0-webfont.woff2')
      format('woff2'),
    url('./assets/fonts/campton/campton-extrabold_0-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'camptonmedium';
  src: url('./assets/fonts/campton/campton-medium_0-webfont.woff2')
      format('woff2'),
    url('./assets/fonts/campton/campton-medium_0-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ROBOTO ------------  */
@font-face {
  font-family: 'robotolight';
  src: url('./assets/fonts/roboto/roboto-light_1-webfont.woff2') format('woff2'),
    url('./assets/fonts/roboto/roboto-light_1-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotomedium';
  src: url('./assets/fonts/roboto/roboto-medium_0-webfont.woff2')
      format('woff2'),
    url('./assets/fonts/roboto/roboto-medium_0-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* HANSON ---------------- */
@font-face {
  font-family: 'hansonbold';
  src: url('./assets/fonts/hanson/hanson-bold-webfont.woff2') format('woff2'),
    url('./assets/fonts/hanson/hanson-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* VARIABLES -------------------------------------- */
:root {
  --blue--800: #0b2e79;
  --blue--700: #0b2679;
  --blue--600: #060046;
  --blue--500: #0b2679;
  --blue--400: #314da0;
  --blue--300: #056bfe;
  --blue--250:#4B86DC;
  --blue--200: #92b7e0;
  --blue--100: #e5f0ff;
  --light--blue: #e3efff;
  --light--blue--200: #75adff;
  --green--500: #12ea6d;
  --light--gray--100: #fafafa;
  --light--gray--200: #fafbfb;
  --gray--500: #58595b;
  --gray--200: #a8a9ad;
  --gray--400: #828282;
  --gray--300: #a4a7a7;
  --gray--100: #bdbdbd;
  --light--gray: #f6f8fb;
  --light--gray-2: #f8f9f9;
  --white: #fff;

  --font--camptonBold: 'camptonbold';
  --font--camptonExtraBold: 'camptonextrabold';
  --font--camptonMedium: 'camptonmedium';
  --font--robotoLight: 'robotolight';
  --font--robotoMedium: 'robotomedium';
  --font--handsonBold: 'hansonbold';
}

/* SCROLL ------------ */
body::-webkit-scrollbar,
.diplomados__categorias__desktop__container::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track,
.desktop__container::-webkit-scrollbar-track {
  background-color: #e7e7e7;
}

body::-webkit-scrollbar-thumb,
.desktop__container::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background: var(--blue--500);
}

body::-webkit-scrollbar-thumb:hover,
.desktop__container::-webkit-scrollbar-thumb:hover {
  background-color: var(--blue--400);
}

/* GLOBAL CLASSES --------------------------------- */
/* Backgrounds ------------ */
.bg__blue__800 {
  background-color: var(--blue--800);
}
.bg__blue__700 {
  background-color: var(--blue--700);
}
.bg__blue__600 {
  background-color: var(--blue--600);
}
.bg__blue__500 {
  background-color: var(--blue--500);
}
.bg__blue__400 {
  background-color: var(--blue--400);
}
.bg__blue__300 {
  background-color: var(--blue--300) !important;
}
.bg__blue__100 {
  background-color: var(--blue--100);
}
.bg__blue__200 {
  background-color: var(--blue--200) !important;
}
.bg__green__500 {
  background-color: var(--green--500) !important;
}
.bg__light__blue {
  background-color: var(--light--blue);
}
.bg__light__gray__100 {
  background-color: var(--light--gray--100);
}
.bg__light__gray__200 {
  background-color: var(--light--gray--200);
}
.bg__gray__500 {
  background-color: var(--gray--500);
}
.bg__gray__100 {
  background-color: var(--light--gray) !important;
}
.bg__gray__200 {
  background-color: var(--gray--200);
}

.bg__blue__250{
  background-color:var(--blue--250);
}

.bg__mostaza {
  background-color: #ffa933;
}

.bg__white {
  background-color: var(--white);
}
.bg__gray__200 {
  background-color: var(--light--gray-2);
}

/* Text colors ----------- */
.text__blue__700 {
  color: var(--blue--700);
}
.text__blue__600 {
  color: var(--blue--600);
}
.text__blue__500 {
  color: var(--blue--500) !important;
}
.text__blue__400 {
  color: var(--blue--400) !important;
}
.text__blue__300 {
  color: var(--blue--300) !important;
}
.text__blue__200 {
  color: var(--blue--200);
}
.text__blue__100 {
  color: var(--blue--100);
}
.text__light__blue__200 {
  color: var(--light--blue--200);
}
.text__green__500 {
  color: var(--green--500) !important;
}
.text__gray__400 {
  color: var(--gray--400);
}
.text__gray__500 {
  color: var(--gray--500);
}
.text__gray__100 {
  color: var(--gray--100);
}
.text__gray__200 {
  color: var(--gray--200);
}

.text__white {
  color: var(--white) !important;
}

.text__initial {
  color: #e7e7e7 !important;
}

/*BORDER*/
.border__green__500 {
  border: solid 2px var(--green--500) !important;
}
.border__gray__300 {
  border: solid 1px var(--gray--300);
}
.border__gray__400 {
  border: 1px solid #bbbbbb !important;
}
.border__blue__700 {
  border: 2px solid var(--blue--700);
}
.border__blue__300 {
  border: 2px solid #056bfe !important;
}
.border__blue__200 {
  border: 2px solid var(--blue--200) !important;
}
.border__blue__400 {
  border: var(--blue--400) !important;
}

.border__white {
  border: 2px solid white !important;
}

.border__blue__600 {
  border: 2px solid var(--blue--600) !important;
}
/* BUTTONS ----------- */
.btn__radius {
  border-radius: 13px !important;
}
.btn {
  -webkit-box-shadow: initial !important;
  box-shadow: initial !important;
}
.btn {
  text-transform: inherit !important;
}

/* FONTS -------------- */
.font__camptonMedium {
  font-family: var(--font--camptonMedium);
}

.font__camptonBold {
  font-family: var(--font--camptonBold);
}

.font__hansonBold {
  font-family: var(--font--handsonBold);
}

/* FONT SIZE --- */
.fs__7 {
  font-size: small;
}
.fs__1 {
  font-size: 2.5rem;
}
.fs__2 {
  font-size: 2rem;
}
.fs__3 {
  font-size: 1.75rem;
}
.fs__4 {
  font-size: 1.5rem;
}
.fs__5 {
  font-size: 1.25rem;
}
.fs__6 {
  font-size: 1rem !important;
}

.fs__9 {
  font-size: 0.6rem;
}
.fs__1_1 {
  font-size: 1.1rem;
}
.fs__1__1 {
  font-size: 1.1rem;
}

.fs__0__6 {
  font-size: 0.6rem !important;
}
.fs__8 {
  font-size: 0.7rem !important;
  position: absolute;
  right: 0px !important;
  top: 0px !important;
}
.fs__0_8 {
  font-size: 0.8rem !important;
  right: 0px !important;
  top: 0px !important;
}
.fs__0_7 {
  font-size: 0.7rem !important;
}
@media screen and (max-width: 500px) {
  .fs__m__small {
    font-size: 0.7rem;
  }
  .fs__m__1 {
    font-size: 1rem;
  }
  .fs__m__1_5 {
    font-size: 1.5rem;
  }
  .fs__m__1_25 {
    font-size: 1.25rem;
  }
  .fs__m__2 {
    font-size: 2rem;
  }
  .fs__m__2_5 {
    font-size: 2.5rem;
  }
  .fs__m__2_25 {
    font-size: 2.25rem;
  }
  .fs__m__3 {
    font-size: 3rem;
  }
  .fs__m__3_5 {
    font-size: 3.5rem;
  }
  .fs__m__3_25 {
    font-size: 3.25rem;
  }
  .fs__m__4 {
    font-size: 4rem;
  }
  .fs__m__4_5 {
    font-size: 4.5rem;
  }
  .fs__m__4_25 {
    font-size: 4.25rem;
  }
  .fs__m__5 {
    font-size: 5rem;
  }
  .fs__m__5_5 {
    font-size: 5.5rem;
  }
  .fs__m__5_25 {
    font-size: 5.25rem;
  }
  .fs__m__6 {
    font-size: 6rem;
  }
  .fs__m__6_5 {
    font-size: 6.5rem;
  }
  .fs__m__6_25 {
    font-size: 6.25rem;
  }
}

/* MARGIN LEFT ----  */
.ml-1-2 {
  margin-left: 0.5rem !important;
}
.ml-1 {
  margin-left: 1rem !important;
}
.ml-2 {
  margin-left: 2rem !important;
}

.ml-3 {
  margin-left: 3rem !important;
}
.ml-4 {
  margin-left: 4rem !important;
}
.ml-5 {
  margin-left: 5rem !important;
}

.ml__6 {
  margin-left: 6rem !important;
}

.ml__7 {
  margin-left: 6rem !important;
}

.ml__8 {
  margin-left: 8rem !important;
}
/* .ml__10 {
  margin-left: 10rem;
} */

/* MARGIN RIGHT */

.mr-0_5 {
  margin-right: 0.5rem !important;
}
.mr-1 {
  margin-right: 1rem !important;
}

.mr-2 {
  margin-right: 2rem !important;
}

.mr-3 {
  margin-right: 3rem !important;
}

.mr-4 {
  margin-right: 4rem !important;
}

.mr-5 {
  margin-right: 5rem !important;
}

.mr-6 {
  margin-right: 6rem !important;
}

.mr-7 {
  margin-right: 7rem !important;
}

.mr-25 {
  margin-right: 25% !important;
}

.mr-35 {
  margin-right: 35% !important;
}
.mr__sm__4 {
  margin-right: 4px;
}

/* Maring bottom */
.mb__2 {
  margin-bottom: 2rem !important;
}

/* MARGIN TOP ---- */
.mt__2 {
  margin-top: 2rem !important;
}
.mt__3 {
  margin-top: 3rem !important;
}
.mt__4 {
  margin-top: 4.5rem !important;
}
.mt__9 {
  margin-top: 9rem !important;
}
.mt__10 {
  margin-top: 10rem !important;
}
.mt__11 {
  margin-top: 11rem !important;
}

/* PADDING LEFT --- */
.pl__0 {
  padding-left: 0 !important;
}
.pl__2 {
  padding-left: 2rem !important;
}
.pl__8 {
  padding-left: 9rem !important;
}
/* PADDING RIGHT --- */
.pr__0 {
  padding-right: 0 !important;
}
.pr__1 {
  padding-right: 0.5rem !important;
}
.pr__2 {
  padding-right: 1rem !important;
}
.pr-5 {
  padding: 5rem !important;
}

/* PADDING LEFT Y RIGHT */
.px-7 {
  padding-left: 7rem !important;
  padding-right: 7rem !important;
}
.px-lg-6 {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (max-width: 1210px) {
  .px-lg-6 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.p__2 {
  padding: 2rem !important;
}

.p__3 {
  padding: 3rem !important;
}

/* BORDER RADIUS --- */
.b__radius__0 {
  border-radius: 0 !important;
}
.b__radius__20 {
  border-radius: 20px !important;
}

.b__radius__10 {
  border-radius: 10px !important;
}

/* BORDER ---------- */
.border__blue__200 {
  border: 2px solid var(--blue--300) !important;
}

.border__blue__200 {
  border: 2px solid var(--blue--200) !important;
}

/* WIDTH ----------- */
.w__2 {
  width: 2rem;
}

.w__15 {
  width: 15rem;
}

.w__60 {
  width: 60px;
}
.w-65 {
  width: 65%;
}
.w__auto {
  width: auto;
}
.w__content {
  width: fit-content;
}

/* HEIGHT --- */
.h__2 {
  height: 2rem;
}
.h__7 {
  height: 7rem !important;
}

.h-55 {
  height: 55% !important;
}
.h-60 {
  height: 60% !important;
}
.h-65 {
  height: 65% !important;
}
.h-70 {
  height: 70% !important;
}

.h-12 {
  height: 12% !important;
}
.h-13 {
  height: 13% !important;
}
.h-14 {
  height: 14% !important;
}
.h-15 {
  height: 15% !important;
}
.h-17 {
  height: 17% !important;
}
/* TEXT ALIGN --- */
.text-right {
  text-align: right !important;
}

/* Setear la altura como al del elemento padre */
.h-inherit {
  height: inherit !important;
}

/* Obtener color por herencia del padre */
.c-inherit {
  color: inherit !important;
}

/* Obtener width por herencia del padre */
.w-inherit {
  width: inherit !important;
}

/* abarca la iamgen al tamaño sin perder calidad haciendole zoom */
.cover {
  object-fit: cover;
}
.contain {
  object-fit: contain;
}

.text-inherit {
  text-transform: inherit !important;
}

.line-1 {
  line-height: 1.3 !important;
}

/* FORMS  ---------- */
.form-notch-leading {
  border-radius: 0 !important;
}

.form-notch-middle {
  border-radius: 0 !important;
}

.form-notch-trailing {
  border-radius: 0 !important;
}

.pointer {
  cursor: pointer;
}

textarea {
  resize: none !important;
}

/* Background que color rosa que se usa en varias imagenes */
/* .banner__background__fix {
  position: absolute;
  width: 100%;
  height: inherit;
  background: linear-gradient(
    180deg,
    rgba(98, 43, 255, 0.1) 0%,
    rgba(98, 43, 255, 0.4) 91.07%
  );
} */

.img__banner {
  object-fit: cover;
  background-size: cover;
  background-position: center;
}
/*Z-INDEX*/
.z-5 {
  z-index: 5 !important;
}

.z__index__3 {
  z-index: 3;
}

.border__none {
  border: none !important;
}

.outline__none {
  outline: none !important;
}

.hr__green {
  border: 1px solid var(--green--500);
}

/* LINE --------------------- */
.line__blue__300 {
  height: 3px;
  background-color: var(--blue--300);
}
.woocommerce-result-count {
  padding-right: 1rem !important;
}

/* LOEADER ---------------- */
.donutSpinner {
  display: inline-block;
  border: 8px solid hsl(222 100% 95%);
  border-left-color: #0b2679;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  animation: donut-spin 1.2s linear infinite;
}

@keyframes donut-spin {
  to {
    transform: rotate(1turn);
  }
}

.btn__deposito:hover,
.btn__tarjetas:hover {
  background: var(--blue--300) !important;
  color: white !important;
  transition: all 300ms;
}

.btn__payment__checkout {
  background: var(--blue--300) !important;
  color: white !important;
}

@media screen and (max-width: 768px) {
  .cuenta {
    padding: 0;
    border-radius: 15px;
  }
}
.text-tached{
    text-decoration:line-through
  }
  
.play__trailer{
    bottom: calc(50% - 15px);
    right: calc(50% - 21px);
    color: white;
}

.play__trailer__live{
    bottom: calc(50% - 21px)!important;

}

@media screen and (min-width:1400px){
  #video__course__card{
    height:650x!important;
  }
  #modal__course__dialog {
    max-width:650px;
  }
  #modal__course__content{
    height:650px!important
  }
}


.icon__play{
      box-shadow: 1px 7px 11px 5px #0004;
    font-size: 50px!important;
    opacity: 1;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

@media screen and (min-width:576px) and (max-width:1399px){
  #video__course__card{
    height:250px;
  }

  #modal__course__content{
    height:500px!important
  }
}

.through{
  color:#f00;
  text-decoration:line-through;
}  
.through b{
  color:var(--gray--100);
}




.section__course__free_desktop__container{
  max-width:1413px
}

.list__courses__sessions{
  max-height: 342px;
  height: auto;
  overflow-x: auto;
  padding-bottom: 1rem
}

.item__session{
  border-radius:15px;
  background:#f0f8ff5c;
  transition: all 500ms;
}

.state__video{
  width:16px!important;
  height:16px;
  top:26px;
  right:15px;
  border:1px solid #f0f8ff5c;
  background:transparent;
  transition: all 300ms;
  border-radius:50%;
}


.item__session:hover{
  background:#4B86DC
}

.active__item__session{
  background:#4B86DC;
}

.active__item__session .state__video{
  border:none;
  background:transparent url(assets/images/icons/view_session.png);
}

.finish__item__session{
  border:none!important;
  background:#f0f8ff5c!important
 }

.finish__item__session .state__video{
  border:none!important;
  background: var(--green--500)!important;
}


.text__product{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.download__pdf{
  width:85px;
  position:absolute;
  height:85px;
  background:transparent url(assets/images/icons/download_pdf.png);
  transition:all 500ms;
  left:1.5%;
  top:45%;
  z-index:1;
}

.tooltip__body{
  position:relative;
  top:10px!important
}

.tooltip__arrow{
  display:block!important;
  top:-7px!important
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--green--500) !important;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, 
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color:  var(--green--500)  !important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, 
.bs-tooltip-left .tooltip-arrow::before {
    border-left-color:  var(--green--500)  !important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
    border-right-color:  var(--green--500)  !important;
}


.download__pdf__mobile{
  width: 85px;
  position: absolute;
  right: 3rem;
  top: 1.1rem;
  height: 85px;
  background:transparent url(assets/images/icons/download_pdf.png);
  transition:all 500ms;
}

.tooltip__desktop{
  z-index: 1;
  width: 198px;
  text-align: center;
  top: 31%;
  left: 1.5%;
}

.tooltip__mobile{
  text-align: center;
  width: 250px;
  right: 26px!important;
  top: -57px!Important;
}


.current-menu-item{
  border-bottom: 5px solid var(--green--500);
    /* padding: 0 0.5rem; */
}


.right__fixed{
  opacity: 1;
  transition:all 750ms;
  top:100px;
}

.fixed{
  opacity:0;
}