/*----------- Reglas Globales ------------*/

	*{
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
		font-family: 'PT Sans', sans-serif;
	}

	:root {
	  --main-bg-color: #349DEE;
	  --main2-bg-color: #1B74B8;
	  --main-back-botton: #E4F0FF;
	  --main-hover-botton: #3186C7;
	}


	a{
		text-decoration: none;
		color: var(--main-bg-color);
	}

	a:hover{
		color: var(--main2-bg-color);
		text-decoration: none;
	}

	b{
		float: left;
		color: var(--main2-bg-color);
	}

	h1, h2, h3{
		padding: 10px;
		color: var(--main2-bg-color);
	}

	hr{
		border-color: var(--main-bg-color);
		margin: 10px 0px;
	}

	input, input[type=date], input[type=file], select{
		float: left;
		padding: 10px;

	}

	.full{
		width: 100%;
		margin: 10px 0px;
		overflow: hidden;
	}
	

	input[type=submit]{
		float: inherit;
		display: block;
		outline: none;
		margin: 20px auto;
		padding: 15px;
		width: 100%;
		max-width: 400px;
		cursor: pointer;
		border: 0px;
		background-color: var(--main2-bg-color);
		color: white;
		font-weight: bold;
		font-size: 14px;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
	}

	input[type=submit]:hover{
		background-color: var(--main-hover-botton);
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
	}

	/*----------- Tablas ------------*/

		table {
		  font-family: arial, sans-serif;
		  border-collapse: collapse;
		  width: 100%;
		}

		td, th {
		  border: 1px solid #dddddd;
		  text-align: left;
		  padding: 8px;
		}

		th{
			background-color: #00232A;
			color: #FFFFFF;
		}

		tr:nth-child(even) {
		  background-color: #dddddd;
		}


		tr:hover{
			background-color: #B5D7DE;
		}

	/*----------- Tablas ------------*/

/*----------- Reglas Globales ------------*/




/*----------- Login------------*/

	.ind{
		background-image: url(../img/fondo.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-attachment: fixed;
		background-size: cover;
	}

	.login {
		display: block;
		width: 100%;
	}

	.login form{
		display: block;
		border: 3px solid var(--main-bg-color);
		border-radius: 10px;
		margin: 150px auto;
		padding: 15px;
		width: 100%;
		max-width: 350px;
		background: rgba(255,255,255,.6);

	}

	.login form label{
		display: block;
		text-align: center;
		padding: 5px;
		font-weight: bold;
		color: var(--main2-bg-color);
	}

	.login form a{
		display: block;
		text-align: center;
		font-size: 14px;
	}

	.login form ul{
		display: block;
		width: 100%;
		padding: 10px;
	}

	.login form ul li{
		display: block;
		width: 100%;
		padding: 10px;
		background-color: rgba(255, 255, 86, 0.4);
		background: rgba(255, 255, 86, 0.4);
		color: rgba(255, 255, 86, 0.4);
		text-align: center;
		color: red;
	}

/*----------- Login------------*/




/*----------- Menú superior ------------*/
	.top_menu{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 60px;
	}

	.top_menu > .nom{
		float: left;
		width: 250px;
		height: 60px;
		text-align: center;
		padding: 15px;
		background-color: #000000;
		color: #FFFFFF;
		font-weight: bold;
		font-style: italic;
		font-size: 20px;
	}

	.top_menu > .menu_top{
		float: left;
		width: calc(100% - 250px);
		height: 60px;
		padding: 10px;
		border-bottom: 1px solid #B7B7B7;
		text-align: right;
	}

	.top_menu > .menu_top > div{
		display: inline-block;
		width: auto;
		height: 40px;
		overflow: hidden;
		border: 0px solid grey;
		text-align: left;
		padding: 2px;
		margin: 0px 15px;
	}

	.top_menu > .menu_top > div:nth-child(1){
		border:0px solid green;
		float: left;
		text-align: left;
	}

	.top_menu > .menu_top > div a{
		color: var(--main-bg-color);
		font-weight: bold;
	}

	.top_menu > .menu_top > div i{
		margin: 0px 0px;
		font-size: 20px;
		cursor: pointer;
		color: var(--main2-bg-color);
	}

	.top_menu > .menu_top > div > .not{
		float: left;
		border: 0px solid red;
		margin: 0px 15px;
	}

	.top_menu > .menu_top > div > .not .fa-exclamation-circle{
		font-size: 10px;
		color: red;
		margin: -5px;
		padding: 0px;
	}

/*----------- Menú superior ------------*/

/*----------- Menú izquierdo ------------*/
	.left_menu{
		position: absolute;
		top: 60px;
		left: 0px;
		width: 250px;
		min-height: calc(100vh - 60px);
		background-color: #09064C;
		color: #FFFFFF;
	}

	.left_menu img{
		display: block;
		width: 100%;
	}

	.left_menu .menu_left ul{
		display: block;
		width: 100%;
	}

	.left_menu .menu_left ul li{
		display: block;
		width: 100%;
		padding: 20px 0px 20px 20px;
		border: 0px solid grey;
		cursor: pointer;
		font-weight: bold;
	}

	.left_menu .menu_left ul li:hover{
		background-color: #D4DB2C;
		color: #3B3B3B;
		border-left: 8px solid #0B5766;
	}


	.left_menu .menu_left ul a{
		color: #FFFFFF;
		text-decoration: none;
	}


	.left_menu .menu_left ul li i{
		display: inline-block;
		width: 10px;
		margin-right: 15px;
	}

/*----------- Menú izquierdo ------------*/


/*----------- contenido ------------*/


	.contenido {
		display: block;
		width: calc(100% - 250px);
		height: calc(100vh - 60px);
		overflow: scroll;
		overflow-x: hidden;
		position: absolute;
		top: 60px;
		left: 250px;
		padding: 0px;
		border: 0px solid red;
		padding: 20px;
	}


	.contenido .forms{
		display: block;
		width: 100%;
		max-width: 800px;
		margin: 0px;
		text-align: justify;
		border: 0px solid blue;
	}

	.errores{
		display: block;
		width: 100%;
		border: 1px solid var(--main-bg-color);
		padding: 10px;
		margin: 10px 0px;
		background-color: #E0F9FF;
	}

	.errores li{
		list-style: none;
		color: var(--main-bg-color);
		font-weight: bold;
	}

	.contenido .forms form {
		display: block;
		width: 100%;
		text-align: left;
	}

	.contenido .forms form pre {
		white-space: pre-wrap;       /* css-3 */
		white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
		white-space: -pre-wrap;      /* Opera 4-6 */
		white-space: -o-pre-wrap;    /* Opera 7 */
		word-wrap: break-word;       /* Internet Explorer 5.5+ */
	}

	.contenido .forms form>label{
		display: block;
		width: 100%;
		padding: 10px;
		margin: 20px 0px;
		font-weight: bold;
		font-style: italic;
		color: white;
		background-color: #00232A;
	}

	.contenido .forms form>label a{
		float: right;
		color: white;
		font-weight: normal;
		font-style: normal;
	}


	.contenido .forms form div {
		overflow: hidden;
		border: 0px solid blue;
	}

	.contenido .forms form div label{
		float: left;
		padding: 5px;
		font-weight: bold;
		border: 0px solid red;
		color: #00232A;
		margin:5px;
	}


	.videos{
		width: calc(50% - 4px);
		padding: 10px;
		margin: 1px;

	}

	.contenido .forms form div a{
		display: inherit;
		width: auto;
		border: 1px solid transparent;
		margin: 10px;
		padding: 5px;
	}

	.contenido .forms form div a:hover{
		border: 1px solid blue;
		font-weight: bold;
	}


	.contenido .box{
		float: left;
		width: calc(33% - 20px);
		cursor: pointer;
		border: 1px solid #DEE0E1;

		margin: 10px;
		padding: 15px;
		color: var(--main-bg-color);
		font-weight: bold;
		font-size: 22px;
		-webkit-transition: all 1000ms ease;
		-moz-transition: all 1000ms ease;
		-ms-transition: all 1000ms ease;
		-o-transition: all 1000ms ease;
		transition: all 1000ms ease;
		-webkit-box-shadow: 0 0 10px 1px rgba(255,255,255,.75);
		box-shadow: 0 0 10px 1px rgba(255,255,255,.75);
	}

	.contenido .box:hover{
		background-color: var(--main-back-botton);
		color: var(--main2-bg-color);
		-webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
		-webkit-transition: all 1000ms ease;
		-moz-transition: all 1000ms ease;
		-ms-transition: all 1000ms ease;
		-o-transition: all 1000ms ease;
		transition: all 1000ms ease;
	}

	.contenido .box i{
		display: block;
		font-size: 26px;
		color: var(--main2-bg-color);
		border: 0px solid red;
		margin-bottom: 10px;

	}

	.contenido .box .fa-exclamation-circle{
		float: right;
		color: red;
		font-size: 16px;
	}

	.contenido .box span{
		display: block;
		border: 0px solid red;
	}


	.contenido .cont_left {
		float: left;
		border: 0px solid red;
		width: 40%;
		min-width: 500px;
		overflow: hidden;
		box-sizing: border-box;
		margin: 10px 0px;
	}

	.cont_left>.msg {
		padding: 10px;
	}


	.contenido form iframe{
		display: block;
		width: 100%;
		height: 300px;

	}

	.contenido .forms form #urll{
		color: #4A9CDB;
	}

	.cont_left .videos li a{
		display: block;
		margin: 5px;
		padding: 5px;
		border: 1px solid transparent;
	}

	.cont_left .videos li a:hover{
		display: block;
		font-weight: bold;
		margin: 5px;
		padding: 5px;
		border: 1px solid var(--main-bg-color);
	}

	.cont_left video{
		display: block;
		width: 90%;
		margin: 0px auto;
	}

	.cont_left h2{
		color: #157DB8;
		display: block;
		padding: 10px;
	}

	.contenido .clear{
		clear: left;
	}


	.contenido .cont_int{
		float: left;
		width: 100%;
		border: 0px solid red;
		padding: 10px;
		margin-top: 20px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.contenido .box2{
		display: block;
		width: calc(100% - 20px);
		cursor: pointer;
		border: 1px solid #DEE0E1;
		margin: 10px;
		padding: 10px;
		color: var(--main-bg-color);
		font-weight: bold;
		font-size: 16px;
		overflow: hidden;
		-webkit-transition: all 1000ms ease;
		-moz-transition: all 1000ms ease;
		-ms-transition: all 1000ms ease;
		-o-transition: all 1000ms ease;
		transition: all 1000ms ease;
		-webkit-box-shadow: 0 0 10px 1px rgba(255,255,255,.75);
		box-shadow: 0 0 10px 1px rgba(255,255,255,.75);
	}

	.contenido .box2:hover{
		color: var(--main2-bg-color);
		background-color: var(--main-back-botton);
		-webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
		-webkit-transition: all 1000ms ease;
		-moz-transition: all 1000ms ease;
		-ms-transition: all 1000ms ease;
		-o-transition: all 1000ms ease;
		transition: all 1000ms ease;
	}

	.contenido .box2 span{
		float: right;
	}

	.contenido .box2 h2{
		padding: 0px;
	}


	.contenido .box3{
		float: left;
		width: calc(50% - 20px);
		cursor: pointer;
		border: 1px solid #DEE0E1;
		margin: 10px;
		padding: 0px;
		color: var(--main-bg-color);
		font-weight: bold;
		font-size: 16px;
		overflow: hidden;
		-webkit-transition: all 1000ms ease;
		-moz-transition: all 1000ms ease;
		-ms-transition: all 1000ms ease;
		-o-transition: all 1000ms ease;
		transition: all 1000ms ease;
		-webkit-box-shadow: 0 0 10px 1px rgba(255,255,255,.75);
		box-shadow: 0 0 10px 1px rgba(255,255,255,.75);
	}

	.contenido .box3:hover{
		color: var(--main2-bg-color);
		background-color: var(--main-back-botton);
		-webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
		-webkit-transition: all 1000ms ease;
		-moz-transition: all 1000ms ease;
		-ms-transition: all 1000ms ease;
		-o-transition: all 1000ms ease;
		transition: all 1000ms ease;
	}

	.contenido .box3 a{
		float: left;
		overflow: hidden;
		border: 0px solid red;
		padding: 10px;
		width: calc(100% - 35px);
	}
	
	.contenido .box3 a:nth-child(2){
		width: 35px;
		border-left: 1px solid #DEE0E1;
	}

	.contenido .box3 span{
		float: right;
		padding-left:3px ;
	}

	.contenido .box3 h2{
		padding: 0px;
	}


	/* ---------- Tabs ------------ */

		/* Style the tab */
		.tab {
		  overflow: hidden;
		  border-bottom: 1px solid #ccc;
		  background-color: transparent;
		}

		/* Style the buttons inside the tab */
		.tab button {
		  background-color: inherit;
		  float: left;
		  border: none;
		  outline: none;
		  cursor: pointer;
		  padding: 14px 16px;
		  transition: 0.3s;
		  font-size: 17px;
		  font-weight: bold;
		  width: 25%;
		  border: 1px solid transparent;
		  border-radius: 10px 10px 0px 0px;
		  border-bottom: 3px solid transparent;
		}

		/* Change background color of buttons on hover */
		.tab button:hover {
		  border: 1px solid #ccc;
		  border-bottom: 3px solid #B4F0FF;
		  border-radius: 10px 10px 0px 0px;
		}

		/* Create an active/current tablink class */
		.tab button.active {
		  border: 1px solid #ccc;
		  border-bottom: 3px solid #00CCFF;
		  border-radius: 10px 10px 0px 0px;
		}

		/* Style the tab content */
		.contenido .forms .tabcontent {
		  display: none;
		  padding: 6px 12px;
		  border: 1px solid #ccc;
		  border-top: none;
		}

		.contenido .forms .tabactive {
			display: block;
		}
	/* ---------- Tabs ------------ */


/*----------- contenido ------------*/

/*----------- Media Query ------------*/

@media screen and (max-width:1300px ){
	.contenido .cont_left {
		float: left;
		width: 100%;
		min-width: 250px;
	}
}

@media screen and (max-width:900px ){
	.top_menu > .menu_top{
		width: calc(100% - 60px);
	}
	.top_menu > .menu_top > div, .top_menu > .menu_top > div i{
		font-size: 14px;
		margin: 0px 5px;
	}

	.top_menu > .menu_top > div > .not{
		margin: 0px 10px;
	}

	.top_menu > .nom{
		width: 60px;
	}
	.left_menu{
		width: 60px;
	}
	
	.left_menu .menu_left ul a li span {
		display: none;
	}

	.contenido {
		width: calc(100% - 60px);
		left: 60px;
		padding: 10px;
	}

}


@media screen and (max-width:750px ){
	.contenido .box, .contenido .box2, .contenido .box3{
		box-sizing: border-box;
		width: calc(100% - 10px);
		padding: 5px 10px;
		margin: 5px;
	}

	.contenido .box i{
		display: inline-block;
		font-size: 16px;
	}

	.contenido .box span{
		display: inline-block;
		font-size: 16px;
	}

	.contenido .cont_int h1{
		font-size: 20px;
	}

}

@media screen and (max-width:700px ){
	.contenido .forms form div label{
		display: block;
		width: 100%;
	}

}

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

	.top_menu .menu_top .perfil{
		display: none;
	}
	.top_menu > .menu_top > div:nth-child(1){
		border:0px solid green;
		float: right;
	}
	.top_menu .menu_top div{
		height: auto;
	}
	.tab button {
		padding: 5px;
		font-size: 12px;
	}
	.contenido .forms form>label{
		font-size: 12px;
	}
	.top_menu > .menu_top > div > .not{
		margin: 0px 5px;
	}


	.contenido .forms form iframe{
		height: 200px;
	}
	.videos{
		width: calc(100% - 2px);
	}

}	

/*----------- Media Query ------------*/