/* CSS */

/*--------- BASE -------------*/

/*--------- CLASES -------------*/



@font-face {
font-family: gotham-bold;
src: url(../img/tipografias/gotham-bold.otf) format("truetype");
}

@font-face {
font-family: gotham-light;
src: url(../img/tipografias/gotham-light.ttf) format("truetype");
}

@font-face {
font-family: gotham-italic;
src: url(../img/tipografias/gotham-mediumitalic.ttf) format("truetype");
}

@font-face {
font-family: bodoni-italic;
src: url(../img/tipografias/bodoni-italic.ttf) format("truetype");
}



/*--------- recursos rápido de clases genéricas------*/


.v-hidden {visibility: hidden; pointer-events: none;}
.p-none {pointer-events: none;}
img {margin: 0 auto; max-width: 100%}
strong {font-family: gotham-bold}
a {font-family: gotham-light; color: black; font-weight: 600; cursor: pointer;}
p {font-size: 1em}
h2 {font-family: gotham-light; margin-bottom: 30px; text-transform: uppercase; font-size: 1.2em}
span {font-family: gotham-light; font-weight: 600}

:root {
	--main-inv-dackcolor: #19322F;
}

:root {
	--main-inv-lightcolor: #5E7775;
}

.content {
		font-family: gotham-light;
		font-weight: 600;

}
/*----- página principal ------*/

/* header */

.header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
	padding: 2% 15%
}

.header-logo {
	flex: 0 25%;
}

.header-logo > img {
	cursor: pointer;
}

.header-menu {
	flex: 0 10%;
	display: flex;
	justify-content: center;
}

.header-menu > .header-menu-burguer {
	width: 30px;
}

.header-menu-content > ul {
	display: flex;
}

.header-menu-content > ul a {
	font-size: 1.2em;
	text-transform: uppercase;
}

.header-menu-content > ul li {
	margin: 0 10px
} 

.header-menu-content > ul a:hover {
	border-bottom: 1px solid black
}

/* _____________________ CONTENT ________________________________*/

/* sección videos */

.content-videos {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

.box-video {
	flex: 0 50%;
}

video {max-width: 100%}

/* sección noticias */

.content-news {
	background: url(../img/background-news.jpg) no-repeat;
	background-color: rgba(0, 0, 0, .5);
	background-size: cover;
	min-height: 60vh;
	padding: 3% 15%;
	display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.content-news::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: #ffffff8f;
	width: 100%;
	height: 100%;
	z-index: 50
}

.content-news > * {
	z-index: 100
}

.content-news > h2 {
	text-align: center;
	font-family: gotham-light;
	color: #19322f6b;
	margin-bottom: 50px;
	text-transform: uppercase;
	font-size: 1.2em
}

.content-news-gallery > .news-gallery-item > p {
	font-family: gotham-light;
	font-size: 1.7em;
	line-height: 1em;
	color: #5E7775;
	margin-bottom: 20px;
	text-align: center;
}

.content-news-gallery > .news-gallery-item > p:last-child {
	margin-bottom: 50px
}

.content-news-gallery > .news-gallery-item > h3 {
	font-family: bodoni-italic;
	font-size: 2.5em;
	text-align: center;
	color: #5E7775;
	margin-bottom: 20px
}


.content-news-controls {
	display: flex;
	align-items: center;
	justify-content: center;
}

.content-news-controls > div {
	width: 20px;
	height: 20px;
	border-radius: 100%;
	background: white;
	margin: 3px;
	border: 2px solid #5E7775;
	cursor: pointer;
}

.content-news-controls > div:hover {
	transform: scale(1.1);
}

/* sección cursos */

.content-courses {
	padding: 3% 15%
}

.courses-menu-buttons {
	display: flex;
}

.courses-menu-buttons > .course-btn {
	font-size: 1.2em;
	font-family: gotham-light;
	color: black;
	text-transform: uppercase;;
	margin-right: 30px;
	cursor: pointer;
	margin-bottom: 30px
}

.courses-menu-buttons > .course-btn:hover {
	border-bottom: 1px solid black;
	margin-bottom: 29px
}

.current-courses {
	display: flex;
	flex-wrap: wrap;
}

.current-course {
	flex: 0 31%;
	margin-bottom: 20px;
	margin-right: 20px;
	border: 1px solid #142623;
	position: relative;
}


.current-course > a {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--main-inv-dackcolor)
} 

.current-course > a::after {
	content: "Saber más";
    top: 27%;
    left: 0;
    text-align: center;
    position: absolute;
    color: white;
    width: 100%;
    font-family: gotham-bold;
    background: url(../img/next-page.png) no-repeat;
    background-size: cover;
    opacity: 0;
    background-size: 28px;
    padding: 20px 0;
    background-position: 59% 42px;
}

.current-course > a:hover::after {
	opacity: 1
}

.current-course > a:hover > .current-course-img {
	opacity: 0.3
}

.current-course > a:hover .current-course-date {
	background: #23786E
}


.current-course:nth-of-type(3) {
	padding-right: 0
}

.current-course:nth-of-type(6) {
	padding-right: 0
}

.current-course:nth-of-type(9) {
	padding-right: 0
}

.current-course:nth-of-type(12) {
	padding-right: 0
}

.current-course:nth-of-type(15) {
	padding-right: 0
}

.current-course-place {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	border: 1px solid black;
	background: white;
	padding: 5px 10px;
	border-top: 0;
    border-left: 0;
}

.current-course-place > img {
	width: 10px
}

.current-course-place > h4 {
	font-family: gotham-bold;
	color: #142623;
	font-size: 1em;
	padding: 0 5px
}

.current-course-title {
	background: white;
	height: 100%
}

.current-course-title h3 {
	padding: 10px;
	color: #142623;
	font-family: bodoni-italic;
	font-weight: 100;
	line-height: 1.1em;
	font-size: 1.2em;
}

.current-course-date {
	background: #142623;
	display: flex;
}

.current-course-date h4:first-child {
	color: white;
	font-family: gotham-light;
	font-size: 0.9em;
	padding: 5px 10px;
	font-weight: 600;
	flex: 2;
}
.current-course-date h4:last-child {
	color: white;
	font-family: gotham-bold;
	font-size: 0.9em;
	padding: 5px 10px;
	font-weight: 100;
	flex: 1;
}

.current-course-none {
	font-family: gotham-bold;
}
/* previous-course-table */

.previous-course-table {
	width: 100%
}

.previous-course-table {
	border-top: 2px solid #142623;
	border-left: 2px solid #142623;
	border-right: 2px solid #142623;
	border-bottom: 1px solid #142623;
	border-spacing: 0
}

.previous-course-table thead {
	
	padding: 10px
}

.previous-course-table thead th {
	border-bottom: 1px solid #142623;
	font-family: gotham-bold;
	padding: 10px 15px;
	white-space: nowrap;
}

.previous-course-table tbody th {
	border-bottom: 1px solid #142623;
	font-family: gotham-light;
	white-space: nowrap;
	padding: 5px 15px
}

.previous-course-table tbody td {
	border-bottom: 1px solid #142623;
	font-family: gotham-light;
	padding: 20px 15px;
	font-weight: 600
}

.previous-course-table tbody tr {
	border-bottom: 1px solid #142623;
	background: #5e77752e
}

.link-previous-course {
	padding: 7px;
}

.link-previous-course a {
	padding: 10px;
	border-radius: 10px;
	margin: 5px 0;
	background: #142623;
	color: white
}

.link-previous-course a:hover {
	background: #009688;
	box-shadow: 2px 2px #142623
}

.paginador ul {
	display: flex;
	padding: 10px;
	justify-content: flex-end;
}

.paginador ul li {
	padding: 7px 15px;
	border-radius: 10px;
	border: 1px solid #142623;
	margin-left: 7px;
}

.paginador ul li span {
	font-family: gotham-bold
}

.paginador ul li:hover {
	background: #009688;
	border: 1px solid white
}

.btn-active {
	background: #142623;
}
.btn-active  span {
	color: white
}

.paginador ul li:hover span {
	color: white
}

/* comentarios */

.content-comments {
	position: relative;
	padding: 3% 15%;
	background: #5E7775
}

.content-comments * {
	z-index: 100
}

.content-comments::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../img/shadow.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	opacity: 0.2
}

.content-comments h2 {
	color: white;
	font-weight: 100;
	z-index: 90
}

.content-comments-container {
	display: flex;
	align-items: center;
}

.content-comments-btn {
	cursor: pointer;
}
.content-comments-btn:hover {
	transform: scale(1.1);
	opacity: 0.8
}

.content-comments-btn > img {
	max-width: 18px
}

.content-comments-container > ul {
	display: flex;
	margin: 0px 20px 0px 20px;
}

.content-comments-container > ul > li {
	background: white;
	border-radius: 15px;
	padding: 15px 30px;
}


.content-comments-container > ul > li h3 {
	font-family: gotham-italic;
	font-weight: 100;
	margin-bottom: 15px 
}

.content-comments-container > ul > li p {
	font-family: gotham-light;
	font-weight: 600;
	margin-bottom: 15px
}

/* poner a funcionar el carrousel */
.c-position1 {
	cursor: pointer;
	transition: 1.2s ease all;
	transform: scale(0.6);
	order: 1
}

.c-position1:hover {
	transform: scale(0.65);
}

.c-position3 {
	cursor: pointer;
	transition: 0.8s ease all;
	transform: scale(0.6);
	order: 3
}

.c-position3:hover {
	transform: scale(0.65);
}

.c-position2 {
	transform: scale(1);
	box-shadow: 2px 2px 10px black;
	order: 2
}

.c-position4 {
	display: none
}

.c-position5 {
	display: none
}



/* footer */


.footer {
	background: var(--main-inv-dackcolor);
}

.footer-content {
	padding: 10% 15%;
	position: relative;
}

.footer-content::after {
	content: "";
    background: url(../img/fondo-footer.png) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 76% 48%;
    background-size: 22%;
    z-index: 50
}

.footer-content * {
	position: relative;
	z-index: 100
}

.footer-logo img {
	margin: 0
}

.footer-logo {
	margin-bottom: 50px
}

.footer-menu ul li {
	margin-bottom: 7px;
	text-transform: uppercase;
}

.footer-menu ul li a {
	color: white;
	font-weight: 300
}

.footer-menu ul li a:hover {
	border-bottom: 1px solid white
}


/*___________________________________________ pag curso _____________________________________________*/

.course-file-title {
	padding: 1% 15%;
	border-top: 2px solid var(--main-inv-dackcolor); 
	border-bottom: 1px solid var(--main-inv-dackcolor);
}
.course-file-title h2 {
	margin-top: 3%;
	margin-bottom: 0;
	font-family: bodoni-italic;
	text-transform: inherit;
	font-size: 2.3em;
	color: var(--main-inv-dackcolor);
}

.course-file-container {
	padding: 3% 15%;
	display: flex;
	flex-wrap: wrap;
} 

.course-file-container h3 {
	font-family: gotham-bold;
	font-size: 1.3em;
	margin-bottom: 30px;
	color: var(--main-inv-dackcolor);
}

.course-file-container p {
	font-family: gotham-light;
	font-weight: 600;
	margin-bottom: 30px
}

.course-file-container img {
	margin-bottom: 30px
}

.course-file-goals {
	flex: 0 50%
}

.course-file-inscription {
	flex: 0 50%;
	padding: 0 3%
}

.course-file-data {
	display: flex;
	margin-bottom: 10px;
	justify-content: space-between;
}

.course-file-data > div {
	border: 1px solid var(--main-inv-dackcolor);
	margin-left: 7px;
	flex: 1
}

.course-file-data > div > div {
	padding: 5px
}

.course-file-data > div > div:first-child {
	border-bottom: 1px solid var(--main-inv-dackcolor)
}

.course-file-data > div:first-child {
	margin-left: 0
}

.course-file-data > div h4 {
	font-family: gotham-bold;
	font-size: 0.8em;
}

.course-file-data > div img {
	margin: 0;
	height: 18px;
}

.course-file-data > div p {
	margin-bottom: 0
}

.date-box {
	display: flex;
}

.date-box > div:first-child {
	margin-right: 10px;
	flex: 0 30%
}

.date-box > div:last-child {
	width: 100%;
	flex: 0 30%
}

.date-box > div:last-child p {
	text-align: end;
}

.course-file-data-place > div:last-child {
	display: flex;
}

.modality {
	font-size: 0.8em
}

.place {
	padding: 0 5px;
}

.course-file-form {
	border:1px solid var(--main-inv-dackcolor);
	border-radius: 15px;
	padding: 10% 0;
}

.course-file-form h3 {
	text-align: center;
	color: white;
	width: 100%;
	padding: 7px 0;
	background: var(--main-inv-dackcolor)
}

.course-file-form h4 {
	width: 100%;
	text-align: center;
	font-family: gotham-light;
	margin-bottom: 30px
}

.limit-date-inscription {
	font-family: gotham-bold;
	color: #f44336
}

.no-available {
	font-family: gotham-bold;
	color: #f44336
}

input {
	font-family: gotham-light;
	font-weight: 600;
}
.course-file-form input {
	width: 100%;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid var(--main-inv-dackcolor);
	padding: 7px 25px;
	background: #E8F2F1;
	outline: none;
}

.course-file-form input:active {
	/*border: none;*/
}

.course-file-form input:nth-of-type(1) {
	border-top: 1px solid var(--main-inv-dackcolor)
}

.no-available {
	padding: 0 20px
}

.btn-submit {
	margin: 10% 0 0% 0;
	display: flex;
	width: 100%;
	justify-content: center;
}

.btn-submit > button {
	display: flex;
	padding: 15px;
	font-family: gotham-bold;
	background: white;
	border: 1px solid var(--main-inv-dackcolor);
	border-radius: 15px;
	align-items: center;
	cursor: pointer;
}

.btn-submit > button:hover {
	box-shadow: 5px 5px var(--main-inv-dackcolor)
}

.btn-submit > button img {
	margin-bottom: 0;
	margin: 0 5px
}

.btn-submit > button:hover img {
	margin: 0 5px 0 10px
}

.submit-succesfully {
	margin: 15px 0;
	color: #8bc34a;
	font-size: 1.1em;
}

.submit-error {
	margin: 15px 0;
	color: #f44336;
	font-size: 1.1em;
}

.submit-mensaje {
	font-family: gotham-bold !important;
	padding: 15px;
	color: #19322f;
	background-color: #ffff63;
	font-size: 1.3em;
	margin-bottom: 15px !important;
}
.course-file-summary-learning {
	flex: 0 80%
}

.course-file-summary-learning ul li {
	font-family: gotham-light;
	font-weight: 600;
	margin-bottom: 15px;
	padding-left: 15px;
	position: relative;
}

.course-file-summary-learning ul li::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 100%;
	background: var(--main-inv-dackcolor);
	top: 7px;
	left: 0
}

.course-file-summary-learning p {
	font-family: gotham-light;
	font-weight: 600;
	margin-bottom: 30px;
}

.course-file-goals ul li {
	font-family: gotham-light;
	font-weight: 600;
	margin-bottom: 15px;
	padding-left: 15px;
	position: relative;
}
.course-file-goals ul li::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 100%;
	background: var(--main-inv-dackcolor);
	top: 7px;
	left: 0
}
/*______________________________________ CURSO ANTERIORES ____________________________*/

.old-course .course-file-container {
	flex-direction: column;
}

/*______________________________________ ACCESS ____________________________*/

.access {
	height: 100vh;
	background: var(--main-inv-dackcolor);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	padding: 0 30% 0 15%;
	position: relative;
	z-index: 100
}

.access::after {
	content: "";
    background: url(../img/fondo-footer.png) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 76% 48%;
    background-size: 22%;
    z-index: 50;
}

.access-logo {
	margin-bottom: 60px;
	position: relative;
	z-index: 150
}

.access h1 {
	font-family: gotham-light;
	color: white;
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: 100;
	margin-bottom: 10px
}

.access div .error-acceso {
	font-family: gotham-light;
	color: #f44336;
	font-size: 1em;
	font-weight: 100;
	margin-bottom: 10px
}

.access-password {
	position: relative;
	z-index: 160
}

.access-password form input {
	width: 100%;
	height: 40px;
	font-family: 'gotham-bold';
    font-size: 0.6em;
    padding: 0 10px;
    /*text-transform: uppercase;*/ 
    color: var(--main-inv-dackcolor);
}

.access-enter {
	justify-content: flex-end;
}

.access-enter button {
	margin-right: 3px
}

.access-enter:hover button{
	box-shadow: 2px 2px black;
	margin-right: 0
}

/*______________________________________ ERROR ____________________________*/

.error {
	height: 100vh;
	background: var(--main-inv-dackcolor);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	padding: 0 30% 0 15%;
	position: relative;
	z-index: 100
}

.error::after {
	content: "";
    background: url(../img/fondo-error.png) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 76% 48%;
    background-size: 22%;
    z-index: 50;
}

.error-texto {
	position: relative;
	z-index: 160
}

.error h1 {
	font-family: gotham-bold;
	color: white;
	/*text-transform: uppercase;*/
	font-size: 1.4em;
	font-weight: 100;
	margin-bottom: 10px
}

.error h2 {
	font-family: gotham-light;
	color: white;
	text-transform: none;
	font-size: 1em;
	font-weight: 300;
	margin-bottom: 10px
}




.error-volver {
	justify-content: flex-end;
}

.error-volver button {
	margin-right: 3px
}

.error-volver:hover button{
	box-shadow: 2px 2px black;
	margin-right: 0
}

.error-volver > button:hover {
	box-shadow: 5px 5px var(--main-inv-dackcolor)
}

.error-volver > button img {
	margin-bottom: 0;
	margin: 0 5px
}

.error-volver > button:hover img {
	margin: 0 5px 0 10px
}

/* corte responsive */

@media screen and (max-width:1250px) {

	.header-content {
		padding: 2% 3%
	}

	.content-news {
		padding: 3% 3%;
		min-height: auto;
	}

	.content-courses {
		padding: 5% 3%
	}

	.content-comments {
		padding: 5% 3%
	}

	.footer-content {
		padding: 10%
	}

	.course-file-title {
		padding: 2% 3%
	}

	.course-file-container {
		padding: 3% 3%
	}

	.course-file-inscription {
		padding-right: 0
	}

}


/*RESPONSIVE*/

@media screen and (max-width:900px) {

	.current-course {
		flex: 0 47%;
	}

	.current-course:nth-child(even) {
		margin-right: 0
	}

	.content-comments-container > ul {
		padding: 0 30px 30px 30px
	}

	.c-position1 {
		display: none
	}

	.c-position3 {
		display: none
	}
	
	.header-menu-content > ul a {
		font-size: 1em
	}

	.courses-menu-buttons > .course-btn {
		font-size: 1em
	}

	.header-logo {
		flex: 0 40%
	}

	.course-file-goals {
		flex: 0 100%
	}

	.course-file-inscription {
		flex: 0 100%;
		padding: 0
	}

	.course-file-data {
		margin-bottom: 30px
	}

	.course-file-form {
		padding: 3% 0;
		margin-bottom: 30px
	}

	.btn-submit {
		margin-top: 3%
	}

	.course-file-summary-learning {
		flex: 0 100%
	}

	.access::after {
		background-position: 89% 50%;
	}

	.error::after {
		background-position: 89% 50%;
	}

}

@media screen and (max-width:450px) {

		.content-videos {
			flex-direction: column;
		}

		.current-course {
			flex: 0 100%;
			margin-right: 0
		}

		.content-news-controls > div {
			width: 15px;
			height: 15px
		}

		.footer-content::after {
			background-position: 127% 76%;
    		background-size: 44%;
		}

		.access {
			padding: 5%
		}

		.access::after {
		background-position: 10% 90%;
		width: 200%
		}

		.error {
			padding: 5%
		}

		.error::after {
		background-position: 10% 90%;
		width: 200%
		}

}


/* animaciones */

.content-news-gallery > .news-gallery-item > p {
	animation: TitleAnimation 1s ease
}

.current-courses {
	animation: TextAnimation 1s ease
}

.previous-courses {
	animation: TextAnimation 1s ease
}

.c-position2 {
	animation: TitleAnimation 0.8s ease;
	animation-play-state: running;
}

.c-position3 {
	animation: TarjetaCarrousel 1.2s ease 
}

.c-position1 {
	animation: TarjetaCarrousel 0.4s ease-in;
	animation-play-state: running;
}

@keyframes TitleAnimation {
  0% {
  	opacity: 0;
  }
  33% {
  	opacity: 0;
  	transform: translateX(50px);
  }
  66%{
  	opacity: 1;}
}

@keyframes TarjetaCarrousel {
  0% {
  	opacity: 0;
  }
  33% {
  	opacity: 0;
  	transform: translateX(50px);
  }
  66%{
  	opacity: 1;
  }
}

@keyframes TextAnimation {
  0% {
  	opacity: 0;
  }
  33% {
  	opacity: 0;
  	transform: translateY(50px);
  }
  66%{
  	opacity: 1;}
}


/* clases para utilizar en funciones */

.d-none {display: none}
.d-flex {display: flex}
.b-rellena {background: #5E7775 !important}








/*______________________________________ captcha ____________________________*/

.cuadro-seguridad{
	margin: 20px 50px;
    padding: 10px;
    border: 3px groove;
    text-align-last: center;
}
.cuadro-seguridad img{
	margin-bottom: 0px;
}

.cuadro-seguridad a{
    padding-left: 10px;
    padding-right: 5px;

}

.cuadro-seguridad input{
	border: 1px solid var(--main-inv-dackcolor);
}
.text-warning{
	color: #f44336;
    font-family: gotham-light;

}
.recarga-codigo{
	display: inline-flex;
	align-items: center;
	padding-top: 10px;
}
span.texto-recargar {
    text-align: center;
}

a#reloadCaptcha img:hover {

animation: rotation 1s infinite linear;
}

#captcha{
    border: 1px solid #D3D0D0;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/*______________________________________ modal validacion formulario ____________________________*/
/* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  font-family: gotham-light; font-weight: 600

}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}