/*
**************************************************************
ESAT SYSTEM
Especialistas en Sistemas y Aplicaciones Tecnológicas

http://www.esatsystem.net
Facebook and Twitter >> @esatsystem
YouTube >> esat system

By: Rashta Vidal Miguel Angel
**************************************************************
*/

/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:400i&display=swap');*/

body{
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #ECECEC;
	font-family:Arial, Helvetica, sans-serif;
}

@font-face {
	font-family: 'mfont-1';
	src: url("../fonts/OpenSans-RegularItalic.ttf");
}
@font-face {
	font-family: 'mfont-2';
	src: url("../fonts/Signika-Regular.ttf");
}
@font-face {
	font-family: 'mfont-3';
	src: url("../fonts/Roboto-Regular.ttf");
}

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none; color: #74C059;}
a:active {text-decoration: none;}
a{color: #85D45E;}

#mask {
	display: none;
	background: #000000; 
	position: fixed; left: 0; top: 0; 
	width: 100%; height: 100%;
	opacity: 0.8;
	z-index: 2;
}

#carga{
	display: none;
	background-color: #fff;
	border-radius: 20px;
	border: 1px solid #000;
	text-align:center;
	position: fixed; left: 50%; top: 50%;
	margin-left:-75px; margin-top:-40px;
	width: 150px; height: 80px;
	padding:10px;
	z-index: 1;
}

.spaceh-lg{width: 100%; height: 130px; clear: left;}
.spaceh-mld{width: 100%; height: 100px; clear: left;}
.spaceh-msd{width: 100%; height: 80px; clear: left;}
.spaceh-md{width: 100%; height: 60px; clear: left;}
.spaceh-ms{width: 100%; height: 30px; clear: left;}
.spaceh-nh{width: 100%; height: 20px; clear: left;}
.spaceh-ns{width: 100%; height: 10px; clear: left;}
.spaceh-mx{width: 100%; height: 5px; clear: left;}
.ocult{display: none;}
.visible{display: block;}

.container-fluid #headpage{background-color: #2d4059; overflow: hidden; padding: 20px 10px; border-bottom: 4px solid #ea5455; display: flex; justify-content: center; align-items: center;}
	.container-fluid #headpage img{width: 150px; height: 80px;}
	.container-fluid #headpage img#imgenvivo{width: 300px; height: 80px;}
	.container-fluid #headpage #titlehead{font-size: 20pt; font-weight: bold; text-align: center; color: #3282b8;}

#bodypage{min-height: 800px;}
	#bodypage #portalvideo{overflow: hidden;}
		#bodypage #portalvideo #title{text-align: center; font-size: 20px; font-weight: bold; color: #2d4059; padding-bottom: 20px; font-family: 'mfont-2';}
		#bodypage #portalvideo #marcovideo{height: 460px; padding-top: 15px; background-image: url('../../Images/pantallavid.png'); background-repeat: no-repeat; background-size: 100% 100%;}
			#bodypage #portalvideo #marcovideo img{width: 504px; height: 282px;}
		#bodypage #portalvideo .canal a{font-size: 18px; font-weight: bold; color: #c4302b;}
	#bodypage #info{overflow: hidden;}
		#bodypage #info #title{text-align: center; font-size: 18pt; font-weight: bold; margin-bottom: 10px; font-family: 'mfont-3';}
		#bodypage #info .group{border-bottom: 1px solid #decdc3; padding: 10px;}
			#bodypage #info .group .fech{font-size: 13px; font-family: 'mfont-3';}
			#bodypage #info .group .descrip{font-size: 14px; text-align: justify; font-weight: bold; font-family: 'mfont-3';}
			#bodypage #info .group .descriptitle{font-size: 13px; text-align: justify; font-family: 'mfont-3';}
		/*#bodypage #info .group:hover{background-color: #fff;}*/
		
footer{background-color: #F8F8F8; color: #fff; text-align: center; padding: 15px 0; box-shadow: 0px -1px 6px #454545;}
	footer .footlat1{text-align: center; border-right: 1px solid #7E7E7E; line-height: 100px;}
		footer .footlat1 img{width: 320px; height: 100px;}
	footer .footlat2{color: #343434; text-align: center; display: flex; justify-content: center; align-items: center; font-size: 9pt;}
		footer .footlat2 a{color: #377A23;}
		footer .footlat2 img{width: 150px; height: 30px;}

@media(max-width: 576px){
	.ocult{display: block;}
	.visible{display: none;}
	#bodypage .infoindex img{height: 250px;}

	#WinFloat{
		width: 320px; left: 50%; top: 50px; margin-left:-160px;
	}

	#headpage img{width: 230px; height: 125px;}
	#headpage #titlehead{font-size: 15px;}
	#headpage #subtitlehead{font-size: 18px;}

	#bodypage .present-mat .title{font-size: 15pt;}
	#bodypage .present-mat .subtitle{font-size: 14pt;}
	#bodypage .present-mat img{width: 60%; height: 100px;}

	footer{padding: 40px 0;}
		footer .footlat1 img{width: 320px; height: 100px;}
}

@media(min-width: 1500px){
	#bodypage #portalvideo #marcovideo{height: 520px;}
		#bodypage #portalvideo #marcovideo img{width: 588px; height: 320px;}
		#bodypage #portalvideo #marcovideo iframe{width: 588px; height: 320px;}
}