@import url('spacegrotesk/stylesheet.css');

a::after{
background-color: #3b3b3b;
font-size: 12px;
padding: 8px 1px;
margin: 15px 0 0 0px;
position: absolute;
width: 20px;
height: 20px;
line-height: 6px;
color: RGBA(256,256,256,.5);
text-align: center;
border-radius: 50%;
}

.ff::after{content: "ff";}
.fd::after{content: "fd";}
.fn::after{content: "fn";}

.br::after{content: "br";}
.bb::after{content: "bb";}

.me::after{content: "me";}

.oo::after{content: "oo";}
.gx::after{content: "gx";}
.wf::after{content: "wf";}
.lh::after{content: "lh";}

/**/

.msg_header{
	width: calc(100% - 9px); height:21px; display: flex; padding: 9px; position: fixed; z-index: 999; background-color: #393939; 	border: 1px solid RGBA(0,0,0,0.2);
}
.msg_logo{
	width: 60px; height: auto;
}
	.msg_logo img{
	width: 60px;
}
.msg_titulo{
	font-size: 15px; margin: 0 auto 0 9px; color: RGBA(256,256,256,1);
}
.msg_texto{
	font-size: 12px; margin: 0 9px 9px auto; color: RGBA(256,256,256,.6);
}
	.msg_texto a{
	color: RGBA(256,256,256,.6);
}
.msg_iframe{
	width:1440px; height: 720px; margin: 3% auto 0;
}

/**/




a i{
	font-size: 24px;
}
body{
	background-color:#393939;
	/*font-family: 'space_groteskbold', sans-serif;
	font-family: 'space_grotesklight', sans-serif;*/
	font-family: 'space_groteskmedium', sans-serif;
	/*font-family: 'space_groteskregular', sans-serif;*/
}

p
{
	font-size: 18px;
	color: #fff;
	margin: 0;
}
p spam
{
	font-size: 10px;
	color: #fff;
	text-transform: lowercase;
	font-weight: normal;

}
h2
{
	font-size: 40px;
	font-weight: bolder;
	text-shadow: 2px 2px 5px #000;
}
h3
{
	font-size: 28px;
	font-weight: bolder;
	text-shadow: 2px 2px 5px #000;
}
h4
{
font-size: 16px;
font-weight: bolder;
color: #999;
line-height: 12px;
}
h5
{
	font-size: 16px;
	font-weight: normal;
	color: #ffffff;
}

h6
{
    font-size: 14px;
    color: #fff;
    opacity: .6;
    font-weight: normal;
    margin: 0;
    width: 70%;
}
h6 a
{
    color: #fff;
    opacity: 1;

}
h6 i
{
    margin: 0 0 0 10px;
}
/*---*/
.btn-primary{
	background-color: #ffffff;
	color:#007bff;
	padding: 5px;
	font-size: 12px;
	margin: 10px 0px 0px 0px;
	border-radius: 0;
	border-color: transparent;
	float: right;
	margin: -30px 0 0 0;
	opacity: .6;
	box-shadow: 0 0 0 RGB(255, 255, 255);
	border: none;	
	transition: 2s;

}
.btn-primary:hover{
	opacity: 1;
	background-color: #ffffff;
	color:#007bff;
	box-shadow: 0 0 20px RGB(255, 255, 255);	
	border: none;
	transition: .5s;
}
.apagado:hover{
	opacity: .6;
	background-color: #ffffff;
	color:#007bff;
	box-shadow: none;	
	border: none;
}
#banner_back
{
width:100%; 
height:500px; 
overflow:hidden; 
background-image:url("../_img/back-02.jpg");
background-repeat: repeat-x;
}
#banner_back_diplomado
{
width:100%; 
height:350px; 
overflow:hidden; 
background-image:url("../_img/back-02.jpg");
background-repeat: repeat-x;
}
#banner_diplomado
{
text-align: center;
width:100%; 
height:auto; 
position: absolute;
padding: 50px;
}
#banner_diplomado h2
{
	font-size: 40px;
	font-weight: bolder;
	color: #fff;
	text-shadow: 2px 2px 5px #000;
}
#banner_diplomado h3
{
	font-size: 28px;
	font-weight: bolder;
	color: #fff;
	text-shadow: 2px 2px 5px #000;
}
#banner_foto
{
float:right; 
width:700px; 
height:500px;
background-repeat: no-repeat;
}
#banner_text
{
float:left; 
min-width:500px; 
width:100%; 
height:500px; 
position: absolute;
padding: 50px 60% 0 40px;
}
#botones
{
	float:right; 
	width:550px; 
	height:auto;
    text-align: center;
 }
.card
{
	margin: 6px 0px;
	background-color: rgba(0, 0, 0, 0.6);
	border: none;
	border-radius: 15px !important;
	overflow: hidden;	
	box-shadow: 0px 3px 5px RGBA(0,0,0,.8);
}
.card-body h5{
padding: 5px 0 10px 10px;
margin: 15px 0 0;
color: #999;
opacity: 1;
background-color: #262626;
height: 30px;
}
.card-body h5 span{
font-size: 12px;
}
.card-body h5 img{
filter:grayscale(100%);
}
.card_min
{
	margin: 0px;
	background-color: rgba(0, 0, 0, 0.9);
}
.card-body{
	padding:1rem;
}
.cont{
	width: 250px;
	height: 80px;
	background-color: #002F3B;
	border-radius: 40px;
    font-size: 30px;
    font-weight: bolder;
    margin: 10px;
    text-decoration: none;
    padding: 15px;
	display: inline-block;
	text-align: center;
    vertical-align: middle;
}
.cont_iframe{
	width: 100%;
	height: 100%;
}
.carousel-caption{
	right:0;
	left:0;
	bottom:-20px;
}
.carousel-caption span{
	font-size:11px;
line-height: 15px;
display: inline-table;	
}
.carousel-caption i{
	font-size:15px;
}
.carousel-caption img{
	margin-top:-5px;
	filter: grayscale(100%);
}
.carousel-item{
	background-color: transparent;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    background-color: black;
    opacity: 1;
    width: 50px;
    height: 35px;
    background-size: 25px;
}
.carousel-control-prev-icon {
	background-image: url('../_img/_root/flecha-03.png');
	opacity:.7;
}
.carousel-control-next-icon{
  background-image: url('../_img/_root/flecha-02.png');
  opacity: .7;
}
.carousel-control-next, .carousel-control-prev {
    opacity: 1;
    width: 35px !important;
}
.carousel-indicators{
	bottom: 0px;
}
.carousel-inner p{
	color: #6b6b6b;
	font-size: 15px;
	background-color: #ccc;
}
.col-sm-3, .col-sm-4, .col-sm-6, .col-sm-12{
	padding: 0 6px;
}

.col-sm-12a{
	padding:0;
}

#contenidos
{
	width:100%; 
	height:auto; 
	overflow:hidden;
	padding: 38px 6px 0;
}
#contenidos p
{
    margin: 0;
	padding: 0px;
}
.imgZoom_a{
background-size: 100%;
transition: 1s ease;
background-position: center 0px;
}
.imgZoom_a:hover{
background-size: 130%;
transition: 1s ease;
background-position: center -85px;
}
.imgZoom_b{
background-size: 100%;
transition: 1s ease;
background-position: center;
}
.imgZoom_b:hover{
background-size: 130%;
transition: 1s ease;
}
.imgZoom_c{
background-size: 100%;
transition: 1s ease-in-out;
background-position: center 0px;
opacity: .75;
}
.imgZoom_c:hover{
background-size: 130%;
transition: 1s ease-in-out;
background-position: -15px -70px;
opacity: 1;
}


#myTab
{
	width: 480px;
}

.pie{
text-align:center; 
font-size:12px;
width:100%;  
height: auto;
color: RGBA(256,256,256,.5);
margin:50px 0 0 0;
}
.pie div
{
  margin: 20px auto 10px;
  border: solid 1px #fff;
  padding: 5px 20px;
  width: auto;
  display: table;

}
.pie a
{
color: #999;
text-decoration: none;
transition: .5s;
}
.pie i{
	font-size: inherit;
}

.pie a:hover
{
color:#fff; 
text-decoration: none;
	transition: .5s;
	text-shadow: 0 0 20px RGB(255, 255, 255);
}
#preguntas
{
	width:100%; 
	height:1300px; 
	position:absolute;
}

#presentacion
{
	margin: auto;
    max-width: 100%;
    margin-top: -43px;
}
#presentacion .nav a
{
	font-size: 20px;
}
#profesor
{
	float:left; 
	min-width:400px;
	max-width:600px; 
	height:auto; 
	padding:20px 40px; 
}
.proyectos-d{
	position: absolute;
	width: 100%;
	background-color: transparent;
	margin: 0px;
	border-radius: 0;
}

.seccion{
	width: 100%;
	height: auto;
	padding: 42px 0 12px 0;
	font-size: 22px;
	color: #000;
	text-align: center;
	text-transform: uppercase;
}


/*---*/
.boton-d{
	float:left;
	margin:10px 10px 10px 0;
}
.boton-c{
float: right;
margin: -30px 0px 10px 10px;
}
.boton-c i{
font-size: 15px !important;
}
.boton-d i{
	font-size: 14px;
}
#soporte
{
width:100%; 
height:2000px; 
position:absolute; 
margin-top:1190px;
}



.logotipos{
	width: 100%; 
	min-width: 300px; 
	height: 38px;
	font-size: 12px;
	color: #fff;
position: fixed;
z-index: 1040;
background-color: #393939;
}
.logo_3{
float: right;
height: auto;
width: auto;
text-align: right;
padding: 3px 35px;
background-color: #fff;
opacity: .6;
transition: .5s;
box-shadow: 0 0 0 RGB(255, 255, 255);
border-radius: 10px 0 0 10px;
margin: 7px 0px;
}
.logo_3 i{
	  font-size: 12px;
}
.logo_3 a{

	text-decoration: none;
	font-weight: bolder;
}
.logo_3:hover{
	color: #fff;
	text-decoration: none;
		transition: .5s;
		opacity: 1;
	box-shadow: 0 0 20px RGB(255, 255, 255);		
}

.logo_5{
    float: left;
    height: auto;
    width: auto;
    margin: 9px 20px 0 0;
    text-align: right;
    padding: 2px 15px;
	color: #fff;
}
.modal-backdrop.show {
  opacity: .9;
}
.modal-content{
    border: none;
}

.nav a{
	font-size: 10px;
	color: #666;
	padding: .3em .5em;
}
.resumen{
	position: absolute;
	padding: 35px 65px;
	background-color: #111;
	color: #fff;
	height: 100%;
}
.resumen a{
	font-weight:bolder;
	text-decoration: underline;
	color: #fff;
}
.row{
	position: relative;
margin: 0px;
z-index: 1000;
	width:100%;
}
.soporte{
	width: 250px;
    height: 80px;
    border-radius: 40px;
    font-size: 30px;
    font-weight: bolder;
    color: #002F3B;
    margin: 10px;
    text-decoration: none;
    padding: 15px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;

}
.ver_tit{
	font-weight: bold; 
	font-size:21px;
	background-color: black;
	padding:5px;
	color: #fff;

}
.ver_mas, .ver_mas img{
	width:100%;
}
.ver_mas img{
	margin:25px 0;
}
.ver_mas p{
font-size: 16px;
font-weight: normal; 
color: #999;
padding: 10px 10px 20px 10px;
line-height: 24px;
border-top: #999999 1px solid;
}

/*---*/
#headerOMTO{
	display: inline;
	width: 100%;
	height: auto;
}
#headerOMTO a i{
font-size: 12px;
color: RGBA(256,256,256,.5);
background-color: transparent;
		transition: .5s;
}
#headerOMTO a i:hover{
color: RGBA(256,256,256,1);
		transition: .5s;
}
#headerOMTO i{
font-size: 12px;
color: #000;
padding: 8px 10px;
background-color: RGBA(256,256,256,.5);
border-radius: 20px;
}
#headerOMTO .accesos{
width: auto;
height: auto;
border-radius: 20px;
background-color: transparent;
float: right;
border: 1px solid RGBA(256,256,256,.5);
margin: 3px 0 0 0;
}
#bodyOMTO{
	width: 100%; 
	height: auto; 
	color:#fff; 
	text-align: center;
}
#bodyOMTO a i{
font-size: 16px;
color: #000;
padding: 10px;
background-color: #fff;
border-radius: 20px;
		transition: .5s;
}
#bodyOMTO a i:hover{
color: RGBA(0,0,0,.5);
		transition: .5s;
}
#bodyOMTO .gravatar{
width: 300px;
height: 300px;
margin: 0 auto;

}
#bodyOMTO .gravatar img{
width: 100%;
}
#bodyOMTO .logo_4{
	width: 200px;
	height: auto;
	margin: 20px auto;
}
#bodyOMTO .logo_4 img{
	width: 100%;
	height: auto;
}
#bodyOMTO .contacto{
	width: 100%;
	height: auto;
	padding: 0 0 20px 0;
	margin: 0 auto;
	display: flex;
}
#bodyOMTO .boton{
	width: 35px;
	height: 35px;
	overflow: hidden;
	padding: 0 0 20px 0;
		transition: 1s;
	border: 1px solid #fff;
	border-radius: 15px;
	display:flex;
}
#bodyOMTO .botontexto{
width: 200px;
text-align: center;
margin: 3px 50px 0;
}
#bodyOMTO .half{
	width: 50%;
	margin: 10px;
}
#bodyOMTO .boton:hover{
	width: 240px;
		transition: 1s;	
}
#bodyOMTO .texto{
font-family: 'space_grotesklight', sans-serif;
}
#bodyOMTO p{
font-weight: 100;
font-size: 15px;
margin: 15px auto 20px;	
}
#bodyOMTO .titulo{
	font-weight:bolder; 
	font-size:22px;	
}
#bodyOMTO .ingreso{
	display: ruby-base;
padding: 10px 20px;
border-radius: 30px;
margin: 10px 0 10px;
background-color: #fff;
transition: .5s;
font-size: 16px;
}
#bodyOMTO a .ingreso {
	color: #000;
}	
#bodyOMTO a .ingreso:hover {
color: RGBA(0,0,0,.5);
transition: .5s;
padding: 15px 25px;
}
#bodyOMTO a:hover {
	text-decoration: none;
}
#bodyOMTO a {
	text-decoration: underline;
	color: #fff;
	font-size: 12px;
	font-family: 'space_grotesklight', sans-serif;
}


#footerOMTO .herramientas{
width: 100%;
height: auto;
padding: 30px 0;
text-align: center;
}
#footerOMTO .herramientas img{
	width: 30px;
	margin: 0; 
}
#footerOMTO .herramientas i{
	width: 30px;
	margin: 0 10px 0 30px; 
}	
#footerOMTO .herramientas a{
padding: 13px 9px 15px 6px;
margin: 2px 10px;
line-height: 80px;
}
#footerOMTO .herramientas h3{
	font-size: 20px;
	font-family: 'space_grotesklight', sans-serif;
	
	color: #fff;
}
#footerOMTO span{
	display: ruby;
}
#footerOMTO .herramientas .a{font-size:24px; border: 1px solid RGBA(256,256,256,.2); color: RGBA(256,256,256,1)}
#footerOMTO .herramientas .b{font-size:18px; border: 1px solid RGBA(256,256,256,.2); color: RGBA(256,256,256,.5)}
#footerOMTO .herramientas .b img{width: 25px; opacity:.7;}
#footerOMTO .herramientas .c{font-size:12px; border: 1px solid RGBA(256,256,256,.2); color: RGBA(256,256,256,.2)}
#footerOMTO .herramientas .c img{width: 20px; opacity:.5;}
.localhost{
	display: none;
}
.footerfixed{
	position: fixed;
	z-index: 9999;
	bottom: 10px;
	right: 10px;
}
.footerfixed a{
	margin: 0 0 0 6px;
}

@media screen and (max-width:1280px){
p
{
font-size: 17px;
}
#banner_foto
{
width:450px; 
}
#banner_text
{
padding: 50px 50% 0 40px;
}
h6{
	font-size:12px;
}
.col-sm-3 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
}

@media screen and (max-width:860px){
#banner_foto
{
width:0px; 
}
#botones
{
width:100%; 
}
#banner_text
{
min-width: 400px;
padding: 50px 50px 0 40px;
}
.col-sm-4 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.col-sm-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
h6{
	font-size:14px;
}
.d-none {
    display: block!important;
}

}
@media screen and (max-width:640px){
h2
{
	font-size: 35px;
}
h3
{
	font-size: 20px;
}
p
{
	font-size: 16px;
}
.pie{ 
font-size:10px;
}
#banner_text
{
padding: 50px 50px 0 40px;
}
.col-sm-4 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.col-sm-3 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.final_region{
	display:block !important;
}

#banner_diplomado h2
{
	font-size: 30px;
}
#banner_diplomado h3
{
	font-size: 20px;
}

#presentacion .nav a
{
	font-size: 16px;
}
.logo_4{
	width:160px;
	margin: 5px 0;
}
#myTab
{
	width: 400px;
}
#presentacion
{
    margin-top: -35px;
}
}