@import url("magic-bootstrap.css?24072025");
/*@import url("superslides.css");*/
@import url("owl.carousel.min.css");
@import url("owl.transitions.css");
@import url("owl.theme.css");
@import url("animate.css");
@import url("jquery.fancybox.css");
@import url("animate.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");
@import url("school-icons.css");
@import url("fonts.css");
@import url("global-fonts.css");

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

[Master Stylesheet]

Project:			Smartway - Learning & Courses HTML Template
Version:			1.0
 change:		20/10/2014
Author:				Coffeecream Themes
Assigned to:		Marcin Banaszek

------------------------------------------------------------------

[Color codes]

Body background:		#fff (white)
Brand color:			#8fb488 (green)
Text:					#888 (gray)
Header h1-h6:			#222 (dark gray)
Top tools background:	#323438 (darker graphite)
Main nav background:	#373a3e (graphite)
Footer background 1:	#373a3e (graphite)
Footer background 2:	#323438 (darker graphite)
Footer background 3:	#2c2f33 (dark graphite)
Course search:			#726253 (brown)
Reviews:				#8fb488 (green)
Newsletter background:	#89909a (blue)

a (standard):			#8fb488 (green)
a (visited):			#8fb488 (green)
a (active):				#8fb488 (green)
a (hover):				#81a27b (darker green)

------------------------------------------------------------------

[Table of contents]

1. Global Styles
2. Header
	2.1. Tools
	2.2. Navigation
3. Title
4. Home Page Banner
	4.1. Slider Offers
5. Content
	5.1. Sidebar
	5.2. Blog
	5.3. Carousels
	5.4. Masonry
	5.5. Courses
	5.6. Gallery
	5.7. Map
	5.8. Teachers
	5.9. Progress Bars
	5.10. Reviews
	5.11. Search Box
	5.12. Newsletter
	5.13. Services
	5.14. Responsive Video Wrapper
6. Links
7. Prefooter
8. Footer
9. Mobile Styles
	9.1. Regular Tablets
	9.2. Small Tablets
	9.3. Smartphones

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

/* 1. GLOBAL STYLES
-------------------------------------------------------------------*/

body {
	overflow-x: hidden;
	padding-top: 118px;
   	background-color:#F6F6F6;
}

.logo {
	padding-top:20px;
	height:60px;
}

.fundacion-bg, #featured-posts, #teachers, #novedades, .fundacion-bg-header {
	background: transparent linear-gradient(90deg, #753BB7 0%, var(--secondary-lightblue-700-00c2ff) 100%, #F6F6F600 100%) 0% 0% no-repeat padding-box;
	background: transparent linear-gradient(90deg, #753BB7 0%, #00C2FF 100%, #F6F6F600 100%) 0% 0% no-repeat padding-box;
}
/*
h1,h2,h3,h4,h5,h6 {
	text-transform: uppercase;
}
*/
/*
h2 {
	font-size: 1.6153em;
}
*/
/*
h1,h2 {
	font-weight: 900;
	margin: 0 0 30px 0;
}
*/
/*
h3 {
	margin: 30px 0;
}
#welcome h3 {
	margin: 5px 0px !important;
}
#welcome p {
	padding:0px !important;
}
*/

h2,h3,h4,h5,h6 {
	line-height: 1.74em;
}

b, strong {
	font-weight: 900;
}

a:hover {
	text-decoration: none;
}

section {
	padding: 80px 0;
}

blockquote {
	border: 0;
	color: #bbb;
	font-size: 1.3846em;
	font-style: italic;
	padding-left: 70px;
	position: relative;
}

label {
	font-weight: normal;
	margin-left: 1px;
}

iframe {
	border: 0;
}

.quote {
	font-size: 3em;
	left: 0;
	line-height: 1.5em;
	position: absolute;
	top: 0;
}

.btn,
.pagination > li > a {
	border-width: 2px;
	font-weight: 900;
	text-transform: uppercase;
}

.pagination > li > a {
	border-radius: 3px;
	color: #fff;
	font-weight: 900;
	margin: 0 2px;
	text-transform: uppercase;
}

.alt-background {
	background: #f7f6f2;
}

.no-margin {
	margin: 0;
}

.icon {
	position: relative;
	top: 2px;
}

.lead .icon {
	display: inline-block;
	font-size: 1.5em;
	margin: 0 30px 30px 0;
}

.primary-color {
	color: #FF0098;
}

.caret {
	position: relative;
	top: -2px;
}

/* 2. HEADER
-------------------------------------------------------------------*/

header {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1000;
}

	header .nav .open > a,
	header .nav .open > a:hover,
	header .nav .open > a:focus {
		background: none;
		border: 0;
	}

	.fixed {
		position: fixed;
		top: -35px;
	}

	/* 2.1. TOOLS
	-------------------------------------------------------------------*/

	.tools {
		padding: 5px 0;
		background: transparent linear-gradient(270deg, #753BB7 0%, #753BB7 39%, var(--secondary-green-700-00cfb4) 100%) 0% 0% no-repeat padding-box;
		background: transparent linear-gradient(270deg, #753BB7 0%, #753BB7 39%, #00CFB4 100%) 0% 0% no-repeat padding-box;
		opacity: 1;		
	}

		/*
		#homepage .tools {
			background: rgba(60,75,168,1);
		}
		*/
		
		.tools ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.tools li {
			display: inline;
		}

		.tools a {
			color: #fff;
		}

		.tools a:hover {
			color: #fff;
			text-decoration: underline;
		}

		.tools .pull-left a {
			margin-right: 20px;
		}

		.tools .pull-right a {
			margin-left: 20px;
		}

		.tools i {
			margin-right: 10px;
		}

	/* 2.2. NAVIGATION
	-------------------------------------------------------------------*/

	.navbar-brand {
		padding: 0 30px;
	}

	.nav > li > a {
		font-weight: bold;
		padding-left: 30px;
		padding-right: 30px;
		/*text-transform: uppercase;*/
	}

	.navbar-default {
		
		/*background: #FFFFFF 0% 0% no-repeat padding-box;*/
		box-shadow: 0px 3px 6px #00000029;
		border-radius: 0px 0px 50px 50px;
		
	}

	#homepage .fixed .navbar-default {
		min-height: 80px;
	}

	.navbar-nav .dropdown-menu {
		border: 0;
		top: 75%;
	}

		.navbar-nav .dropdown-menu:before {
			content: "";
			display: block;
			height: 10px;
			position: absolute;
			right: 30px;
			top: -5px;
			width: 10px;
			-ms-transform: rotate(45deg); /* IE 9 */
			-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
			transform: rotate(45deg);
		}

		.navbar-nav .dropdown-menu a {
			color: #999;
		}

			.navbar-nav .dropdown-menu a:hover,
			.navbar-nav .dropdown-menu > .active > a,
			.navbar-nav .dropdown-menu > .active > a:hover,
			.navbar-nav .dropdown-menu > .active > a:focus {
				background: none;
				color: #999;
			}

		.navbar-nav .dropdown-menu .divider {
			background-color: #999;
		}
		
	.header-separator {
		background: #006EC3;
		padding: 1px 0;
		/*margin-bottom:22px;*/
	}		

/* 3. TITLE
-------------------------------------------------------------------*/

.title {
	color: #734292;
	font-size: 280%;
	font-family:din-bold;
	font-weight: 900;
	position: relative;
	text-transform: uppercase;
	width: 100%;
	/* background: rgba(0,110,195,1); */	
}

.title-alt {
	background: rgba(255,0,152,0.98);
}

	/*
	.title .title-image {
		background: url(../images/icons.gif) center top;
		height: 100%;
		left: 0;
		opacity: 0.03;
		overflow: hidden;
		position: absolute;
		top: 0;
		width: 100%;
	}
	*/

	.title .title-image {
		background: url(../images/trama-fondo.jpg) center top;
		backgrund-repeat: no-repeat;
		height: 100%;
		left: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.title .container {
		padding: 10px 0;
	}

/* 4. HOME PAGE BANNER
-------------------------------------------------------------------*/

#main-slider {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#main-slider .item {
  height: 558px;
  background-color: #f6f6f6;
  position: relative;
  overflow: hidden;
}

#main-slider .no-bg {
	background:none;
	bacground-image:none;	
}

	#main-slider .no-bg a:hover {
		  background: #753BBD;
		  color: #fff;  
		  border: 2px solid #fff;
	}

#main-slider .col-sm-6 {
	padding:60px 20px;
}

#main-slider .slider-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}

#main-slider .slider-inner .pretitulo {
	background: #ACECE2;
	border-radius: 15px;
	text-align: left;
	padding: 5px 10px;
	font: normal normal normal 12px/12px 'din-regular';
	color: #000000;
	display: inline-block;
	text-transform: uppercase;
}

#main-slider .slider-inner h2 {
	text-align: left;
	font: normal normal normal 40px/40px 'din-bold';
	color: #000;
}
#main-slider .slider-inner .subtitulo {
	text-align: left;
	font: normal normal bold 18px/24px 'din-regular';
	color: #000000;
}

#main-slider .slider-inner a {
  padding:8px 20px;
  background: #FFFFFF;
  font: normal normal bold 16px/18px 'din-regular';
  color: #753BBD;  
  border: 2px solid #753BBD;
  border-radius: 24px;
}
#main-slider .slider-inner a:hover {
  background: #753BBD;
  color: #fff;  
}

#main-slider .owl-controls {
	margin: 0 !important;
	padding: 0;
	position: absolute;
	top: 50%;
	width: 100%;
}

#main-slider .owl-prev,
#main-slider .owl-next {
  position: absolute;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 30px;
  display: inline-block;
  margin-top: -35px;
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 100px;
  z-index: 500;
  -webkit-transition: background-color 400ms;
  transition: background-color 400ms;
}
#main-slider .owl-prev:hover,
#main-slider .owl-next:hover {
  background-color: #45aed6;
}
#main-slider .owl-prev {
  left: -35px;
  text-indent: 14px;
}
#main-slider .owl-next {
  right: -35px;
  text-indent: -14px;
}

#main-slider .row-equal > .col-md-6 {
    display: flex;
    flex-direction: column;
}

#main-slider .imagen-slide-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-right: 15px;
  position: relative;
}

#main-slider .imagen-slide-wrapper::before,
#main-slider .imagen-slide-wrapper::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

#main-slider .imagen-slide-wrapper::after {
  content: "";
  position: absolute;
  width: 136px;
  height: 426px;
  bottom: -100px;
  right: -110px;
  z-index: 0;
  background-image:
    linear-gradient(to bottom, rgba(246, 246, 246, 0) 60%, rgba(246, 246, 246, 1) 100%),
    url('../images/tramas/banner-hero-secondary-A.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  opacity: 1;
}

#main-slider .no-bg .imagen-slide-wrapper::after {
  content: "";
  position: absolute;
  width: 136px;
  height: 426px;
  bottom: -100px;
  right: -110px;
  z-index: 0;
  background-image:
    linear-gradient(to bottom, rgba(246, 246, 246, 0) 60%, rgba(0, 194, 255, 1) 100%),
    url('../images/tramas/banner-hero-secondary-A.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  opacity: 1;
}


#main-slider .imagen-slide-wrapper::before {
  width: 294px;
  height: 303px;
  background-image: url('../images/tramas/banner-hero-secondary-BASE.svg');
  bottom: -35px;
  right: -70px;  
  opacity: 0.5;
  z-index: 3;
}

#main-slider .no-bg .imagen-slide-wrapper::before {
  width: 294px;
  height: 303px;
  background-image: url('../images/tramas/banner-hero-secondary-B.svg');
  bottom: -35px;
  right: -70px;  
  opacity: 0.5;
  z-index: 3;
}


#main-slider .imagen-slide {
  /*
  width: 100%;
  max-width: 100%;
  height: 100%;
  border-radius: 20px;
  display: block;
  */
  width: 600px;
  max-width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  z-index:2;
}





/* 5. CONTENT
-------------------------------------------------------------------*/

	/* 5.1. SIDEBAR WIDGETS
	-------------------------------------------------------------------*/
/*
	.widget {
		margin-bottom: 30px;
		padding: 30px;
	}

		.widget h3 {
			margin: 0 0 30px;
		}

		.widget ul {
			list-style: none;
			margin: 0 0 30px;
			padding: 0;
		}

		.widget li {
			border-bottom: 1px solid #fff;
		}
		
		.curso-view .widget li {
			border-bottom: 1px solid #A57FD4;
		}

		.widget li a {
			display: block;
			padding: 5px 0;
			font-family:din-bold;
		}

		.curso-view .widget li a {
			display: inline;
			padding: 0px;
			color:#734292;
			font-weight:700;
		}

		.widget li a:hover {
			background: rgba(0,0,0,0.015);
		}

		.curso-view .widget li a:hover {
			text-decoration:underline;
		}

		.widget li a span {
			color: #000;
			margin-left: 10px;
		}

		.widget .tag {
			background: #222;
			border-radius: 3px;
			color: #fff;
			display: inline-block;
			margin: 0 5px 7px 0;
			padding: 2px 10px;
			text-transform: uppercase;
		}

		.widget .post {
			border: 0;
			margin-bottom: 15px;
			padding: 0;
		}

		.widget .post h5 {
			margin: 0;
		}

		.widget .post h5 a {
			color: #222;
			display: block;
		}

		.widget .post h5 a:hover {
			text-decoration: underline;
		}

		.widget .price {
			color: #7f7f7f;
			font-size: 1.5em;
			font-weight: 900;
		}

		.widget .icon {
			color: #fff;
		}

		.widget .fa-star {
			color: #fbcd53;
		}

		.widget .course-data {
			padding: 5px 0;
		}
		
		.widget .share a {
			margin: 0 7px;
		}

		.widget .take-course {
			padding: 15px 0;
			text-align: center;
			width: 100%;
		}
		
		.curso-view .widget .price {
			color: #734292;
			font-size: 1.5em;
			font-weight: 900;
		}
		
		.curso-view .btn-primary {
			background-color:none;
			border:1px solid #ff0098;
			color:#ff0098;
			border-radius: 0px;
		}
		
*/

#faq-home {
	background-color: #f6f6f6;
	position: relative;
	overflow: hidden;
}

.faq-container {
	position: relative;
	z-index: 1;
}

#faq-home .faq-container::after {
	content: "";
	position: absolute;
	width: 226px;
	height: 404px;
	right: 0;
	z-index: 0;
	background-image: url('../images/tramas/banner-text-primary.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
	opacity: 1;
}

#faq-home h2 {
	text-align: left;
	font: normal normal bold 30px/34px 'din-bold';
	letter-spacing: 0px;
	color: #000;
	opacity: 1;
  	margin: 20px;
}

#faq-home .subtitulo {
	text-align: left;
	font: normal normal bold 16px/18px 'din-regular';
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
	margin:20px;
}

#faq-home p {
	text-align: left;
	font: normal normal bold 12px/14px 'din-regular';
	letter-spacing: 0px;
	color: #3B3B3B;
	opacity: 1;
	margin:20px;
}

#faq-home a {
  margin:30px 20px;
  padding:10px 20px;
  background: #FFFFFF;
  font: normal normal bold 14px/16px 'din-regular';
  color: #753BBD;  
  border: 2px solid #753BBD;
  border-radius: 24px;
  opacity: 1;
  text-transform:none;
  text-align:left;
}

#faq-home a:hover {
  background: #753BBD;
  color: #fff;  
}

	/* 5.2. BLOG
	-------------------------------------------------------------------*/

	.post h1 {
		margin-bottom: 5px;
	}

	.post h3 {
		margin: 0;
	}

		.post h3 a {
			color: #222;
		}

		.post h3 a:hover {
			text-decoration: underline;
		}

		.post-cover {
			margin-bottom: 30px;
		}

		.meta {
			color: #bbb;
			margin-bottom: 20px;
		}

		.meta span {
			margin-right: 15px;
		}

		.meta i {
			margin-right: 5px;
		}

		.post-date {
			background: #222;
			color: #fff;
			font-weight: 900;
			left: 30px;
			line-height: 1.74em;
			padding: 15px 0;
			position: absolute;
			text-align: center;
			text-transform: uppercase;
			top: 0;
			width: 50px;
		}

		.post-day {
			font-size: 200%;
		}

		.post-month {
			color: #8fb488;
		}

	.media, .media .media {
		border-top: 1px solid #e8e8e8;
		margin-top: 30px;
		padding-top: 30px;
	}

	.fa-reply {
		margin-right: 5px;
	}

	#recent-posts .item h3 {
		margin: 0;		
	}
	#novedades .item h3 {
		margin: 0;
	}

	#recent-posts .item .meta {
		padding: 0;
	}
	#novedades .item .meta {
		padding: 0;
	}


	/* 5.3. CAROUSELS
	-------------------------------------------------------------------*/

	.carousel-title {
		margin-left: 15px;
		margin-right: 15px;
		position: relative;
		z-index: 100;
		margin-bottom:20px;
	}

	.carousel-title .titulo {
		font: normal normal normal 40px/44px 'din-bold';
		color: #FFFFFF;
	}
	
	.carousel-title .pretitulo {
		background: #ACECE2;
		border-radius: 15px;
		text-align: left;
		padding:5px 10px;
		font: normal normal normal 12px/16px 'din-regular';
		letter-spacing: 0px;
		color: #000000;
		display: inline-block;
		text-transform: uppercase;
		margin-bottom:10px;
	}

	.carousel-title .subtitulo {
		font: normal normal normal 18px/24px 'din-bold';
		color: #FFFFFF;
	}
	
	.carousel-title a {
		  padding:10px 25px;
		  background: #FFFFFF;
		  font: normal normal bold 16px/18px 'din-regular';
		  color: #753BBD;  
		  border: 2px solid #753BBD;
		  border-radius: 24px;
		  opacity: 1;
	}

	.carousel-title a:hover {
		  background: #753BBD;
		  color: #fff;  
		  border: 2px solid #fff;
	}


	#featured-posts .owl-carousel .item {
		background: #f6f6f6;
		height:300px;
		background: #F6F6F6 0% 0% no-repeat padding-box;
		box-shadow: 0px 3px 6px #0000001A;
		border-radius: 15px;
		padding:25px;
		opacity: 1;
	}

/* 		.owl-carousel .item h3 { */
/* 			margin: 10px; */
/* 			padding-top:20px; */
/* 		} */

		.owl-carousel .item .icono-con-texto {
		    display: flex;
		    align-items: center;  /* Alinea verticalmente */
		    gap: 10px;            /* Espacio entre ícono y texto */
		}
		
		.owl-carousel .item .icono i {
		    font-size: 30px;      /* Ajusta el tamaño del ícono */
		    color: #000;          /* Opcional: color del ícono */
		    flex-shrink: 0;       /* Evita que el ícono se achique */
		}
		
		.owl-carousel .item .texto h3 {
		    margin: 0;            /* Elimina margen extra del h3 */
		}
		
		.owl-carousel .item hr {
			border: none; 
			height: 3px;  
			border-radius: 2px;
			background: linear-gradient(
			    90deg,
			    #753BB7 0%,
			    #00C2FF 60%,
			    rgba(246, 246, 246, 0) 100%
			);
			opacity: 1;
			margin-top:0px;
		}

		.owl-carousel .item h3 a {
			font: normal normal bold 20px/30px 'din-regular';
			color: #000000;
		}

		.owl-carousel .item h3 a:hover {
			text-decoration: none;
		}

		.owl-carousel .item .meta {
			display: block;
			padding: 0;
		}

			.owl-carousel .item .meta p {
				color: #000;
				font: normal normal normal 16px/22px 'din-regular';
				letter-spacing: 0px;
				margin:10px 0px;
			}

			.owl-carousel .item .meta .duracion {
				font: normal normal normal 20px/22px 'din-bold';
			}

			.owl-carousel .item .meta p a {
				color: #753BBD;
				font: normal normal bold 16px/22px 'din-regular';
				border-bottom: 1px solid #753BBD;
			}

			.owl-carousel .item .meta .fa-star {
				color: #A57FD4;
			}

		.owl-carousel .item .price {
			background: #00C2FF;
			font-family:din-bold;
			border-radius: 4px 0px 0px 4px;
			color: #fff;
			display: block;
			font-size: 1.2em;
			padding: 5px 10px;
			position: absolute;
			right: 0px;
			top: 0px;
		}

	.owl-theme .owl-controls {
		margin: 0 !important;
		padding: 0;
		position: absolute;
		top: -80px;
		width: 100%;
	}

		.owl-theme .owl-controls .owl-nav [class*=owl-] {
			font-size: 14px !important;
			margin: 0 !important;
		}

		.owl-theme .owl-controls .owl-nav .owl-prev {
			float: left;
		}

		.owl-theme .owl-controls .owl-nav .owl-next {
			float: right;
		}

	/* 5.4. MASONRY
	-------------------------------------------------------------------*/

	.masonry .item {
		padding: 0 15px;
	}

		.masonry .item .masonry-container {
			background: #f7f6f2;
			margin-bottom: 30px;
			position: relative;
			width: 100%;
		}

		.masonry .item img {
			width: 100%;
		}

		.masonry .item h3 {
			margin: 30px 30px 0;
		}

		.masonry .item h3 a {
			color: #222;
		}

		.masonry .item h3 a:hover {
			text-decoration: underline;
		}

		.masonry .item .meta {
			color: #bbb;
			display: block;
			margin: 0;
			padding: 0 30px 30px;
		}

		.masonry .item .meta span {
			margin-right: 20px;
		}

		.masonry .item .meta i {
			margin-right: 5px;
		}

		.masonry .item p {
			margin: 0;
			overflow: hidden;
			padding: 0 30px 30px;
		}

	#masonry-2-columns .item {
		width: 50%;
	}

	#masonry-3-columns .item {
		width: 33.333333%;
	}

	#masonry-4-columns .item {
		width: 25%;
	}

	/* 5.5. COURSES
	-------------------------------------------------------------------*/

	.course img {
		width: 100%;
	}

	.course h3 {
		margin: 0;
	}

	.course h3 a {
		color: #000;
		font-size:22px;
		font-weight:bold;
	}
	
	.meta {
		color: #000;
		font-size:16px;
		font-weight:bold;
	}
	
	.meta .fecha {
		font-size:22px;
	}

	.course .price {
		color: #000;
		font-size: 1.5em;
		font-weight: 900;
		padding-bottom: 15px;
		text-align: right;
	}

	.course-title {
		margin: 0 0 5px;
	}

	.lesson-title {
		margin: 0;
	}

	li.checkbox label {
		display: block;
		padding: 3px 0;
	}

	/* 5.6. GALLERY
	-------------------------------------------------------------------*/

	.gallery {
		list-style: none;
		margin: 0 -15px;
		padding: 0;
	}

		.gallery li {
			padding: 15px;
		}

	/* 5.7. MAP
	-------------------------------------------------------------------*/

	#map-canvas {
		height: 500px;
	}

		.map-address {
			white-space: nowrap;
		}

		.gm-style .gm-style-iw {
			white-space: nowrap;
			width: auto !important;
			height: auto !important;
		}

	/* 5.8. TEACHERS
	-------------------------------------------------------------------*/

	.teachers {
		list-style: none;
		margin: 0 -15px;
		padding: 0;
	}

		.teachers .description,
		#featured-teachers .description {
			background-color: #5959ff;
			margin-bottom: 30px;
			padding: 1px 30px 30px;
		}

		.teachers .description h3, 
		#featured-teachers .description h3 {
			margin: 30px 0;
			font-weight:600 !important;
		}

		.teachers .description p,
		#featured-teachers .description p {
			height: 5em;
			overflow: hidden;
		}

	.teacher img {
		margin: 0 15px 15px 0;
	}

	.teacher h5,
	.teacher p {
		margin: 0;
	}

	/* 5.9. PROGRESS BARS
	-------------------------------------------------------------------*/

	.progress {
		height: 30px;
		margin-bottom: 10px;
	}

	.progress-bar {
		line-height: 30px;
		text-align: left;
		text-transform: uppercase;
	}

	.progress-bar span {
		padding: 0 10px;
	}

	.progress-bar .pull-right {
		background: #222;
		border-radius: 3px;
		color: #fff;
	}

	/* 5.10. REVIEWS
	-------------------------------------------------------------------*/

	#teachers-reviews {
		background: url(../images/icons.gif) center top;
		background-size: cover;
		position: relative;
	}

		#teachers-reviews .tint {
			background: rgba(247,246,242,0.9);
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#teachers-reviews .item {
			background: none;
		}

		#teachers-reviews blockquote {
			color: #222;
			margin: 0;
		}

			#teachers-reviews blockquote .fa-quote-right {
				color: #fbcd53;
			}

	#about-reviews {
		background: url(../images/icons.gif) center top;
		position: relative;
	}

		#about-reviews .tint {
			background: rgba(143,180,136,0.97);
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#about-reviews .item {
			background: none;
		}

		#about-reviews h2,
		#about-reviews small {
			color: #fff;
		}

		#about-reviews blockquote {
			color: #fff;
			margin: 0;
		}

			#about-reviews blockquote .fa-quote-right {
				color: #fbcd53;
			}

	/* 5.11. SEARCH
	-------------------------------------------------------------------*/

	#search {
		/* background: url(../images/icons.gif) center top; */
		position: relative;
		background-color:#fff;
	}
	
		#search input {
			
		}

		#search .tint {
			background: rgba(255,0,152,0.98);
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#search h2 {
			color: #00C3FF;
		}

		#search a {
			color: #00C3FF;
		}

			#search a:hover {
				color: #00C3FF;
			}


		#search #input-keywords {
			width: 400px;
			border-radius: 0px;
			border:1px solid #00cfb4;
		}
		
		#search .btn-primary {
			background-color:#fff;
			border:1px solid #00cfb4;
			border-radius: 0px;
			color:#00cfb4;
		}

	/* 5.12. NEWSLETTER
	-------------------------------------------------------------------*/

	#newsletter {
		background: url(../images/icons.gif) center top;
		position: relative;
	}

		#newsletter .tint {
			background: rgba(137,144,154,0.97);
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#newsletter h2 {
			color: #fff;
		}

		#newsletter .btn {
			text-align: center;
			width: 100%;
		}

		#newsletter-name-group,
		#newsletter-email-group,
		#newsletter .input-group {
			width: 100%;
		}

	/* 5.13. SERVICES
	-------------------------------------------------------------------*/

	.service {
		margin: 15px 0;
	}

	/* 5.14. RESPONSIVE VIDEO WRAPPER
	-------------------------------------------------------------------*/

	.video-wrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}

		.video-wrapper iframe,
		.video-wrapper object,
		.video-wrapper embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

/* 6. LINKS
-------------------------------------------------------------------*/

#links {
	background: #373a3e;
	color: #767c84;
}

	#links .col-sm-3 {
		margin: 80px 0;
	}

	#links h3 {
		color: #8fb488;
		margin: 0 0 30px;
	}

	#links h5 {
		margin: 0;
		text-transform: none;
	}

	#links p {
		margin: 0;
	}

	#links a {
		color: #fff;
	}

		#links a:hover {
			color: #fbcd53;
		}

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

		#links ul li {
			border-bottom: 1px solid #4b4e52;
			display: table;
			padding: 5px 0;
			width: 100%;
		}

			#links ul li a i {
				color: #8fb488;
				margin-right: 10px;
			}

	#links img {
		margin: 0 15px 5px 0;
	}

	#links .author a {
		color: #767c84;
	}

/* 7. PREFOOTER
-------------------------------------------------------------------*/

#prefooter {
	background: #1d1d1d;
	color: #767c84;
}

	#prefooter .col-sm-3,
	#prefooter .col-sm-6 {
		margin: 80px 0;
	}

	#prefooter h3 {
		color: #fff;
		font-weight: 500;
		margin: 0 0 30px;
	}

	#prefooter a {
		color: #fff;
	}

		#prefooter a:hover {
			color: #fbcd53;
		}

/* 8. FOOTER
-------------------------------------------------------------------*/

footer {
	background: #1d1d1d;
	color: #fff;
	padding: 20px 0;
}

	footer a {
		margin-left: 10px;
		color:#fff;
	}

/* 9. RESPONSIVE STYLES
-------------------------------------------------------------------*/

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

	/* 9.1. Regular Tablets
	-------------------------------------------------------------------*/
	@media (max-width: 1023px) {

		.post h3,
		.widget .post h5 {
			margin-top: 15px;
		}

		.sorting {
			margin-top: 30px;
			text-align: left;
		}
		
		/* main-slider */
	  
	  #main-slider .item {
	    height: auto;
	    padding-bottom: 30px;
	    position: relative;
	  }
	
	  #main-slider .slider-inner {
	    position: static;
	    height: auto;
	  }
	
	  #main-slider .col-sm-6 {
	    padding: 20px 15px;
	  }
	
	  #main-slider .imagen-slide {
	    width: 100%;
	    height: auto;
	    max-width: 100%;
	    display: block;
	    margin-top: 20px;
	    border-radius: 20px;
	    z-index: 2;
	    position: relative;
	  }
	
	  #main-slider .imagen-slide-wrapper {
	    justify-content: center;
	    padding-right: 0;
	    height: auto;
	    position: relative;
	  }
	
	  #main-slider .imagen-slide-wrapper::after,
	  #main-slider .no-bg .imagen-slide-wrapper::after {
	    content: "";
	    position: absolute;
	    width: 227px;
	    height: 76px;
	    bottom: -30px;
	    right: 0;
	    background-image: url('../images/tramas/banner-hero-secondary-mobile-BASE.svg');
	    background-repeat: no-repeat;
	    background-size: contain;
	    background-position: right bottom;
	    z-index: 0;
	    opacity: 1;
	  }
	  
	  #main-slider .imagen-slide-wrapper::before {
	    content: "";
	    position: absolute;
	    width: 192px; 
	    height: 163px;
	    bottom: -10px;
	    right: -20px;
	    background-image: url('../images/tramas/banner-hero-secondary-mobile-A.svg');
	    background-repeat: no-repeat;
	    background-size: contain;
	    background-position: right bottom;
	    z-index: 3;
	    opacity: 1;
	  }
	  
	  #main-slider .no-bg .imagen-slide-wrapper::before {
	    content: "";
	    position: absolute;
	    width: 192px; 
	    height: 163px;
	    bottom: -10px;
	    right: -20px;
	    background-image: url('../images/tramas/banner-hero-secondary-mobile-B.svg');
	    background-repeat: no-repeat;
	    background-size: contain;
	    background-position: right bottom;
	    z-index: 3;
	    opacity: 1;
	  }		
		
		
	}

	/* 9.2. Small Tablets
	-------------------------------------------------------------------*/
	@media (max-width: 767px) {

		section {
			padding: 30px 0;
		}

		/*
		h1,h2 {
			margin-top: 30px;
		}
		*/
		
		blockquote {
			font-size: 1em;
			padding-left: 40px;
		}

		.quote {
			font-size: 2em;
			line-height: 2em;
		}

		.tools span {
			display: none;
		}

		.navbar-nav .dropdown-menu:before {
			display: none;
		}

		#masonry-2-columns .item,
		#masonry-3-columns .item,
		#masonry-4-columns .item {
			padding: 0;
			width: 100%;
		}

		.media img, .media .media img {
			width: 30px;
		}

		.course h3 {
			margin-top: 30px;
		}

		.course .price {
			text-align: left;
		}

		.course-title {
			margin: 30px 0 5px;
		}

		.lesson-title {
			margin: 30px 0 0;
		}

		.lesson-prev,
		.lesson-next {
			display: block;
			margin-bottom: 10px;
			text-align: center;
		}

		.lesson-next {
			margin-bottom: 30px;
		}

		.service {
			text-align: center;
		}

		.service h3 {
			margin-top: 15px;
		}

		#recent-posts .item h3 {
			margin-top: 30px;
		}
		#novedades .item h3 {
			margin-top: 30px;
		}

		#search #input-keywords {
			width: auto;
		}
		

		.fundacion-bg, #featured-posts {
		 	background: transparent linear-gradient(180deg, #753BB7 0%, #00C2FF 100%, #F6F6F600 100%) 0% 0% no-repeat padding-box;
		}
	  
	  	#main-slider .slider-inner a {
	  		display:block;
	  		width:auto;
	  		text-align:center !important;
		}
	  
	  
	  #faq-home .faq-container {
	  	padding-bottom:80px;
	  }
	  
	  #faq-home .faq-container::after {
		content: "";
		position: absolute;
		width: 73px;
		height: 180px;
		right: 20px;
		bottom:-30px;
		z-index: 0;
		background-image: url('../images/tramas/banner-text-primary-mobile.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: bottom right;
		opacity: 1;
	  }
		  
  		h2 {
			font: normal normal normal 30px/30px 'din-bold';
			text-transform: none;
		  	color: #000;
		}
		
		p {
			text-align: left;
			font: normal normal bold 14px/18px 'din-regular';
			color: #3B3B3B;
		}
		
		/*
		#featured-posts {
			margin-top:40px;
		}
		*/

	}

	/* 9.3. Smartphones
	-------------------------------------------------------------------*/
	@media (max-width: 480px) {

		.slider-offers h3 {
			font-size: 24px;
		}

		.slider-offers h4 {
			font-size: 14px;
		}
		
		.navbar-brand {
			padding: 0 30px;
		}
		
		.carousel-title .subtitulo {
			font: normal normal normal 18px/22px 'din-bold';
			color: #FFFFFF;
		}
		
		.carousel-title a {
			display:block;
			text-align:center;
			color: #753BBD;
			font: normal normal bold 16px/18px 'din-regular';
			border-bottom: 1px solid #753BBD;
			width:auto;
		}
		
			a.boton {
			  padding:10px 20px;
			  background: #FFFFFF;
			  font: normal normal bold 14px/16px 'din-regular';
			  color: #753BBD;  
			  border: 2px solid #753BBD;
			  border-radius: 24px;
			  text-transform:none;
			  text-align:center;
			  display:block;
			  width:auto;
			}
		
	}
	
	
.programa-asociado {
	text-align:justify;
	border: 0;
	color: #fff;
	font-size: 1.2em;
	font-style: italic;	
	position: relative;
}

/* .required { */
/* 	border: 2px solid red !important; */
/* } */

.error {
	color: #ff6666;
}

#messagebox-alert{	
	width:100%;
	display:inline-block;
	padding:10px;
	color: #3B3B3B;
	background: #FF9A57 0% 0% no-repeat padding-box;
	border-radius: 20px;
	font: normal normal bold 14px/20px 'din-regular';
	margin-bottom:20px;
}

#messagebox-alert a {
	color: #3B3B3B;
	text-decoration:underline;
}

#messagebox-info{	
	width:100%;
	display:inline-block;
	padding:10px;
	color: #3B3B3B;
	background: #F4E06C 0% 0% no-repeat padding-box;
	border-radius: 20px;
	font: normal normal bold 14px/20px 'din-regular';
	margin-bottom:20px;
}

#messagebox-info a {
	color: #3B3B3B;
	text-decoration:underline;
}



#camera a {
	color:#01aef0 !important;
}
#camera a:hover {
	color: #d3e169 !important;
}
#camera h2 {
	color: #fff !important;
	margin:0px 0px 10px 0px;
	font-weight:normal;
}

#novedades .btn-primary {
	background-color:#ccc;
}

#featured-posts .item {
	margin-left:10px;
}
#novedades .item {
	margin-left:10px;
}

.btn-cancel {
	background-color:red;
	color:#fff !important;
}
.btn-cancel:hover {
	background-color:#a40000;
}

.btn-confirm {
	background-color:#00cfb4;
	color:#fff !important;
	border-color:#fff !important;
}
.btn-confirm:hover {
	background-color:#00c3ff;
}


.bg_videos {
	background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/bg_videos.jpg);
    padding: 45px 0;	
}

.bg_sedes {
	background-color: #00cfb4;
}

.bg_faq {
	/*background-color: #b2edff !important;*/
		background: url(../images/trama-fondo.jpg) center top;
		backgrund-repeat: no-repeat;
	
}

#bienvenida h1 {
  font-family: 'DINNextLTPro';
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
  text-transform: none;
  color: #fff;
  margin: 80px 0px 0px 0px;
}
#bienvenida span {
  color: #A57FD4;
}
#bienvenida p, #bienvenida li {
    font-family: 'DINNextLTPro';
    font-weight: 200;
    font-size: 24px;
    line-height: 30px;
    color: #fff;
    margin: 0px;
}
#bienvenida ul {
	margin:20px 0px;
}

.bg_banner {
	background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/bg_banner.jpg);
    padding: 45px 0;	
}

.bg_banner2 {
	background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/bg_banner2.jpg);
    padding: 45px 0;	
}

.bg_ejes {
	background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/ejes/1.jpg);
    padding: 45px 0;	
}

.sponsors-curso {
	background-color:#fff; 
	border:2px solid #ff0098fa;
	padding:10px;
	text-align:center;
	margin-bottom:10px;
}

.sponsors-curso-dark {
	background-color:#00C3FF; 
	border:2px solid #ff0098fa;
	padding:10px;
	text-align:center;
	margin-bottom:10px;
}

.sponsors-curso img {
	margin-left:10px;
	margin-right:10px;
}

.fondo-blanco {
	background-color: #fff;
}
.p5 {
	padding:5px;
}

#header-nav ul li a {
	text-align: left;
	font: normal normal bold 14px/16px 'din-regular';
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
}

#header-nav ul li a:hover {
	color:#00cfb4;
}
    
	.text-white {
	color:#fff !important;
	}    

	.text-black {
	color:#000 !important;
	}    
	

	input[type="text"] {
      width: 100%;
	  font-family: 'din-regular';
      font-size: 14px;
      color: #3B3B3B;
      padding: 10px;
      text-align: left;
		border: 1px solid #D0BEE5;
		border-radius: 10px;
      outline: none;
      margin-bottom: 10px;
      box-sizing: border-box;
    }
    
    select {
      width: 100%;
	  font-family: 'din-regular';
      font-size: 14px;
      color: #3B3B3B;
      text-align: left;
      background-color: #fff;
	  border: 1px solid #D0BEE5;
	  border-radius: 10px;
      outline: none;
      margin-bottom: 10px;
      box-sizing: border-box;
    }
    
    button {
	  padding:7px 20px;
	  background: #FFFFFF;
	  font: normal normal bold 16px/18px 'din-regular';
	  color: #753BBD;  
	  border: 2px solid #753BBD;
	  border-radius: 24px;
	  text-transform:none;
    }

    button:disabled  {
      background-color: #fff;
      color:#ccc;
      border: 2px solid #ccc;
      cursor: not-allowed;
    }

    button:hover:enabled {
      background-color: #753BBD;
      color: #fff;
      border: 2px solid #734292;
    }
    
    
	label {
		display: block;
		font: normal normal bold 14px/18px 'din-regular';
  		margin: 12px 0px;
  	}
  	
    label.error {
      color: red;
      font-size: 14px;
      margin-top: 5px;
      display: block;
    }
    
    
	
	hr {
		border: none; 
		height: 3px;  
		border-radius: 2px;
		background: linear-gradient(
		    90deg,
		    #753BB7 0%,
		    #00C2FF 60%,
		    rgba(246, 246, 246, 0) 100%
		);
		opacity: 1;
		margin-top:0px;
	}