@import url(//fonts.googleapis.com/css?family=Gochi+Hand);
@font-face {
	font-family: 'humanista';
	src: url('humanista.ttf');
}
:root{
  --amarillo:#f9ef00;
  --negro:#222;
  --azul:#0527A4;
  --azul_claro:#2480e5;
  --azul_marin:#124996;
  --naranja : #ff510d;
  --gris:#EEE;

  --kinder:#61bfd8;
  --primaria:#DF4C4A;
  --secundaria:#00FE9C;
  --prepa:#E6E501;
  --universidad:#122135;
}

body,html{ overflow-x:hidden;}
body { overflow-x: hidden !important;}

ul{ padding: 0; margin: 0; list-style: none;}

a{ text-decoration: none; color: #2f2f2f;}
a:hover{ text-decoration:none;}
a:focus{ outline: none; text-decoration: none;}
b{ font-size:12px; color:#555 !important; display:block}
span > b{ color:red !important; font-weight:bold ; margin-right:2px; display:inline-block;}

h1,h2,h3,h4,h5,h6{ font-family: 'Varela', sans-serif;}

h2 {  color: #313338;    font-size: 30px;  font-weight: 700;  line-height: 40px;  margin: 0;  padding-bottom: 10px;  }

img{ border:none;}


input[type=submit]{ background: #222 !important; color:#F0CE00 !important; font-weight:bolder !important}
input[type=submit]:hover{ box-shadow:0 0 5px #000 !important}

.scrollToTop { background: url("../img/bootom-top-arrow.png") no-repeat scroll 13px 12px #ffffff; border: 3px solid #f0f1f3;  border-radius: 5px;  bottom: 20px;  display: inline-block;  height: 54px;  opacity: 0;  position: fixed;  right: 20px;  text-align: center;  width: 54px;  z-index: 100;  transition: all 0.5s;}
.scrollToTop:hover{  background-position: 13px -50px;    text-decoration: none;  outline: none;}
.container{ width:85%;}

#header{	width: 100%;  background-color: var(--azul_marin);}

.menu_area{  float: left;  display: inline;  width: 100%;}
#navbar{overflow-x: hidden;}
.navbar-default .navbar-brand {  color: #fff;  font-size: 25px;  font-weight: bold;  margin-top: 15px; }
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {  background-color: transparent;  color: #fff;}
.navbar-default {  background-color: white;  border-color: transparent;}
.navbar-default .navbar-nav > li > a {  color: var(--azul_marin);  padding: 20px 15px;  text-transform: uppercase; transition: all 0.5s;}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { background-color: transparent;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {  background-color: transparent;}
.navbar-nav > li > .dropdown-menu {  background-color: #48575a; }
.navbar-nav > li > .dropdown-menu:before {  border-bottom: 15px solid #48575a; border-left: 15px solid transparent; border-right: 15px solid transparent;  content: "";  height: 0; position: absolute;  right: 25px;  top: -15px;  width: 0;}
.navbar-nav > li > .dropdown-menu li a {  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);  color: #fff;  display: block;    opacity: 0.8;  padding: 10px;  transition: all 0.5s;}
.navbar-nav > li > .dropdown-menu > li:last-child a {  border-bottom: medium none;}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {  background-color:transparent;  text-decoration: none;}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover { background-color: transparent;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {  background-color: transparent;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {  background-color: transparent;}


#slider{ width: 100%;}
.slider_area {  background-color: #ccc;  display: inline;  float: left;  margin-top: 80px;  width: 100%;}
.slider_caption {  left: 5%;  position: absolute;  top: 5%;  width: 20%;}
.slider_right_caption{  left: 38%;}
.slider_caption h2 {  color: #fff;  font-size: 14px;  background-color: rgba(0, 0, 0, 0.7);  padding: 5px;  text-align:center;}
.slider_caption p { background-color: rgba(231, 183, 24, 0.7);  color: #333;  font-family: "Varela",sans-serif;  font-size: 15px;  font-weight: 600;  padding: 10px;  text-align:center;  text-transform: uppercase;  height:150px}
.slider_btn { background: rgba(49, 59, 61, 0.6);  border: 2px solid #fff;  border-radius: 5px;  color: #fff;  font-size: 16px;  display: inline-block;  font-family: "Varela",sans-serif; margin-top: 10px;  padding: 9px 15px;  text-decoration: none;  transition: all 0.5s; }
.slider_btn:hover,.slider_btn:focus{     text-decoration: none;  outline: none;}
.next,.prev{  display: none !important; }
.slider_area:hover .next{  display: block !important;}
.slider_area:hover .prev{  display: block !important;}

#aboutUs {  padding: 60px 0;  width: 100%;  background: url(../img/fondos/back.jpg) #FFF;  background-repeat: no-repeat;  position: relative;  background-size: contain; }
.aboutus_area {  display: inline;  width: 100%;}
.aboutus_area p {  line-height: 22px;}
.titile{  text-transform: uppercase;  position: relative;  margin-bottom: 20px;}
.titile:after{  content: "";  position: absolute;  left: 0;    bottom: 0px;  width: 50px;  height: 5px; }

.single_whyus_top{  width: 100%;  text-align: center;}
.title_area{   width: 100%;   text-align: center;  margin: 50px 0;  }
.title_area span{  display: inline-block;    text-align: center;   height: 5px;    width: 50px;}
.title_two {  padding-bottom: 0;  position: relative;  text-align: center;  text-transform: uppercase;}
.whyus_icon{  border-radius: 150px;  color: #ffffff;  display: inline-block;  height: 150px;    text-align: center;  width: 150px;}
.whyus_icon span{  display: inline-block;  font-size: 70px;  height: 100%;  line-height: 137px;  width: 100%;  transition:   all 0.5s;}

#ourCourses{  background-color: #f6f6f6;  width: 100%;  padding: 60px 0 0px 0px;}
.course_nav li {  display: block;  float: left;  margin-right: 30px;  width: 31%;}
.course_nav li:last-child{  margin-right: 0px;}
.single_course { background-color: #ffffff; border: 1px solid #efefef; display: inline; float: left;  min-height: 150px; width: 100%;}
.course_more:hover,.course_more:focus {  background-color: #fff; text-decoration: none;  outline: none;  border-radius: 4px;}
.singCourse_content{  float: left;  display: inline;  width: 100%;  padding: 10px;}
.singCourse_title {  border-bottom: 1px solid #efefef;  font-size: 20px;  margin-top: 10px;  padding-bottom: 10px;  }
.singCourse_title a{ transition: all 0.5s;}
.singCourse_title a:hover{  text-decoration: none;  outline: none;}
.singCourse_price{  border-bottom: 1px solid #efefef;  padding-bottom: 10px;}
.singCourse_price > span {  font-weight: bold;  font-size: 18px;}
.singCourse_author {  border-top: 1px solid #efefef;  display: inline;  float: left;  padding: 20px 10px 0;  width: 100%;}
.singCourse_author > img {  float: left;  border-radius: 50%;  height: 40px;  margin-bottom: 25px;  margin-right: 15px;  width: 40px;}
.singCourse_author>p{ float: left; color: #c0c1c1; font-size: 18px; margin-top: 10px; transition: all 0.5s; }
.singCourse_author>p:hover{ color: #000;}
.singCourse_imgarea img { display: block; position: relative; width: 100%; height: 300px; object-fit: cover; transition: all 0.3s ease-in-out;}
.course_nav .slick-prev { left: -37px;  background-image: url("../img/course-nav-prev.png");   background-color: transparent;  background-position: center center; background-repeat: no-repeat;  height: 121px; width: 36px; box-shadow: none;}
.course_nav .slick-next { background-image: url("../img/course-nav-next.png");  background-color: transparent;  background-position: center center;   background-repeat: no-repeat;  height: 121px; width: 36px;  right: -6px; box-shadow: none;}
.course_nav .slick-prev, .course_nav .slick-next { top: 40%;}



.h_servicios{ margin:50px 0}
.h_servicios__img{ width:100%;}

#resumen div{ text-align:center}
#resumen span{ color:var(--amarillo); font-size:8rem; transition: all 0.2s ease-out;}
#resumen span:hover{ transform: scale(1.3); transition: all 0.2s ease-in; }

#resumen h5{ color:#EEE; text-align:center; font-size:2.5rem}
#resumen button{ background:#222; color:#D3B057; font-size:1.5em; padding:20px 40px; font-weight:bolder}
#resumen button i{ margin-right:10px}

.bolder{ background:none !important}
.bolder li{ font-weight:bolder; background:none !important}
.circular { border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%; border-bottom-right-radius: 50% 50%; border-bottom-left-radius: 50% 50%; object-fit:cover}
.legend2{ color:#F4F4F4; background:#111111; width:50%; transform: rotate(-2deg); padding:10px 30px; font-size:2em; display:inline-block; text-transform:uppercase; font-weight:bolder; margin: 25px 0 -15px 0;}
.legend3{ color:var(--negro); background:var(--amarillo); width:50%; padding:10px 30px;  font-size:1.4em; display:inline-block; text-transform:uppercase; font-weight:bolder;}
.legend4{ color:var(--negro); background:var(--amarillo); width:90%; transform: rotate(-2deg); padding:5px 20px; font-size:10px; text-transform:uppercase; text-align:center; display:block}

.contenido2 p, 
.contenido2 .info{background:var(--azul_claro); padding:50px; font-size:1.2em; color: var(--gris);}
.contenido2 .info2{background:var(--azul_claro); padding:50px; font-size:1.2em; color: var(--gris); }

.menu_resultados{ color:var(--gris); padding-bottom:50px}
.div_deporte{background:var(--azul_marin); margin:10px 0; transition: all 0.2s ease-in;}
.div_deporte:hover{background:white; color: #333; transform: scale(1.05); transition: all 0.2s ease-out}
.div_deporte .w80{ text-align: justify;}

.red { background: var(--amarillo); color: var(--negro); padding:10px} 
.img_modal{width:100%; height:350px; object-fit: cover;}
.transparente tr{ border-bottom:1px solid rgba(0,0,0,0.5);}
.transparente td{ padding:20px !important;}

.contenido2 p{ background: var(--azul_marin);}
.logros li{ margin:10px 0; font-size:2rem;}
.info{ width: 100%; height: auto;}

.menu_resultados{ background: var(--azul_claro);}
.menu_resultados .legend2{ background: none; transform: rotate(0); }

.focus{ background:var(--naranja) !important; color:white; transform: scale(1.08); transition: all 0.3s ease-out; box-shadow:0 5px 5px rgba(0,0,0,0.34);}
.focus a{ color:#FFF}

.logo{ height:120px; width:auto}
.convenios{ list-style-type: square; text-align: justify;}
.single_footer_widget strong{ color:var(--amarillo) !important }

.whyus_icon2{ border:5px solid #333; border-radius: 100px; color: #333; display: inline-block; height: 100px; text-align: center; width: 100px; font-size: 50px; line-height: 88px;}
.whyus_icon2 h5{ color:#333; }
.whyus_top{ width: 100%; min-height: 350px; padding: 85px 0px; background: url(../img/fondos/skills_bg.jpg) var(--azul_claro) no-repeat right; background-size:contain;}
.whyus_bottom{ width: 100%;  padding: 85px 0px;}


#modal{ background:url(../img/fondos/fondo_modal.jpg) #FFF no-repeat center !important; border-radius:0 !important; z-index: 1044 !important;}
#modal, 
#modal2{ width: 90%; left: 5%; top: 5%; max-height: 90%; overflow: auto; z-index: 103; position:absolute; background:#333; border-radius:10px;}

#modal:before, 
#modal:after, 
#modal2:before, 
#modal2:after{ content: ''; position: absolute; z-index: -2; }
#modal .contenido2{  padding: 7px 0px 40px 0px; background-size:cover; }

#menu{  background: url(../img/fondos/skills_bg.jpg) var(--azul_claro) no-repeat right; position: relative; background-size:contain; padding:0 0 40px 0;  color:var(--gris)}

#menu_nivel span{ font-size:3em; margin:0}
#menu_nivel > div { text-align:center; box-sizing:border-box; padding:20px; border-radius:5px; background: white; transition: all 0.3s ease-in}
#menu_nivel > div:hover{ background:var(--naranja); color:white; transform: scale(1.08); transition: all 0.3s ease-out; box-shadow:0 5px 5px rgba(0,0,0,0.34);}
#menu_nivel > div:hover a{ color:#FFF}
#menu_nivel > div a{ width:100%; display:flex; align-items: center; }
#menu_nivel > div h3{ font-size:1.5em !important; font-weight:bolder; width: 80%; margin:0}

#fondo{ width:100%; height:100%; top:0; left:0; position: fixed; background: rgba(0,0,0,0.5); z-index: 1003;}
#fondo:hover{ cursor:pointer;}

#niveles{ position: absolute; z-index: 2; bottom: 10px; width: 100%;}
#niveles .legend2{ background:var(--azul_marin)}

#imgBanner{ background-image: url("img/fondos/banner.jpg");  background-repeat: no-repeat;  background-size: contain;  background-position: right;  height: 150px;  margin-top: 77px;  text-align: center; width: 100%;}
#imagen_buf{ position:absolute; top:20%; left:10%; z-index:2}
#imagen_buf img{ width:200px; height:200px}

#inscripcion{ position:fixed; bottom:10px; left:50px}
#inscripcion a{ width:80px; height:80px; background: var(--naranja); display:block; text-align:center; box-shadow:0 0 10px #333}
#inscripcion a i{ font-size:4em !important; color:white; margin-top: 10px; }
#inscripcion h2{  color: var(--naranja); text-shadow: -1px 1px #666; margin-bottom:-20px}

#acceso_mides{ position:fixed; top:20px; right:20px; z-index:1100; text-align: center;  }
#acceso_mides .circular{ box-shadow: 0 0 5px rgba(0,0,0,0.43); margin-bottom:15px}

#tabla_convenios{ text-align: center; margin-top: 33px; margin-bottom: 25px; font-size: 14px; }
#tabla_convenios th{ color: #000; text-align: center;}

footer{  width: 100%; background:var(--azul_marin); padding:40px 0; color:var(--gris)}
.footer_bottom{ padding:20px 0; text-align: center;}
.footer_social li i{ color:var(--gris); font-size: 3rem;}

.l_niveles{ font-family: "humanista"; width: 80% !important;}
.banner{ margin-top: 200px; background: var(--gris);}
.nivel{ font-size: 10em; font-weight: bold; text-align: center; text-transform: uppercase; font-family: "humanista"; color:#FFF}
.video iframe{ width: 100%; height: 250px;}
.titulo_nivel{background: url("../img/fondos/fondo_2023.png") no-repeat; background-size:15%; background-position:left }

#top-menu{ display: flex; justify-content:space-around}
.soc_tooltip{ font-size: 2.5rem;}

.control_menu_2{ width:100%; padding:10px 0; display: flex; gap:10px}
.control_menu_2 a{ color:#333; padding:10px 20px; display:block; border:1px solid #333; font-weight:bold; border-radius:10px}

@media screen and (min-width:100px) and (max-width:280px){
	h3{ font-size:2.4rem !important}

	#top-menu{ display: block ;}
	#buf{ display: none;}
	#imgBanner {height: 100px;padding: 12px 0;}
	
	#niveles{ top:10%; bottom:0;}
	#niveles img{ height:50px !important; width:50px !important; display:block}
	#niveles h3{ font-size:10px !important;}
	
	#acceso_mides{ top:20px}
	#acceso_mides img{ height:50px; width: 50px;}

	.navbar-default .navbar-nav > li > a { padding:8px 0}
	.logo{ width:100px; height:auto; margin:5px 10px}
	.div_row{ flex-direction: column; }
	.w20, .w60, .w80{ width: 100%;}
	.h_servicios__img{ width: 90%; margin:0 5%;}
	.titile, .title_two{ font-size:1.5em !important;}
	.singCourse_title a{ font-size: 1.8rem !important;}

	.title_area{margin:20px 0}
}
@media screen and (min-width:281px) and (max-width:539px){
	h3{ font-size:2.4rem !important}

	#top-menu{ display: block;}
	#imgBanner {height: 100px;padding: 12px 0;}
	
	#niveles{ top:10%; bottom:0;}
	#niveles img{ height:60px !important; width:60px !important; display:block}
	#niveles h3{ font-size:10px !important;}

	#acceso_mides{ top:80px}
	#acceso_mides img{ height:60px; width: 60px; top:60px}

	.navbar-default .navbar-nav > li > a { padding:8px 0}
	.logo{ width:100px; height:auto; margin:5px 10px}
	.div_row{ flex-direction: column; }
	.w20, .w60, .w80{ width: 100%;}
	.h_servicios__img{ width: 90%; margin:0 5%;}
	.titile, .title_two{ font-size:1.5em !important;}
	.singCourse_title a{ font-size: 1.8rem !important;}	

	.title_area{margin:20px 0}
}

@media screen and (min-width:540px) and (max-width:769px){
	h3{ font-size:2.8rem !important} 

	#top-menu{ display: block ;}
	.navbar-header{ width: 100%; text-align: center;}
	.navbar-default .navbar-nav > li > a { padding:5px 25px}

	#imgBanner {height: 100px;padding: 12px 0;}
	
	#niveles{ top:25%; bottom:0;}
	#niveles img{ height:100px !important; width:100px !important; display:block}
	#niveles h3{ font-size:10px !important;}

	#acceso_mides{ top:10px}
	#acceso_mides img{ height:60px; width: 60px;}

	.logo{ width:100px; height:auto; margin:5px 10px}
	.div_row{ flex-direction: column; }
	.w20, .w60, .w80{ width: 100%;}
	.h_servicios__img{ width: 90%; margin:0 5%;}
	.titile, .title_two{ font-size:1.5em !important;}
	.singCourse_title a{ font-size: 1.8rem !important;}

	.title_area{margin:30px 0}
	
}

@media screen and (min-width:770px) and (max-width:1280px){
	.navbar-header{ width: 100%; text-align: center;}
	.navbar-default .navbar-nav > li > a { padding:0px auto}

	#imgBanner {margin-top: 145px !important;}
	
	.imagen_slider{ width: 40% !important; height: auto;}
}


@media screen and (min-width:1281px) {
	
	.imagen_slider{ width: 40% !important; height: auto;}
}