:root{
  --azul_marin:#1a3763;
  --naranja : #d97b10;
  --gris:#EEE;
}

body { font-size: 16px;}

h1,h2,h3,h4,h5,h6{ font-family: 'Varela', sans-serif;}
h2 {  color: #313338; font-size: 30px; font-weight: 700;  line-height: 40px;  margin: 0;  padding-bottom: 10px;  }

img{ border:none;}
section{ margin:50px 0}

.menu_area{  float: left;  display: inline;  width: 100%;}
.navbar-default .navbar-brand {  color: #fff;  font-size: 25px;  font-weight: bold;  margin-top: 15px; }
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {  background-color: transparent;  color: #fff;}
.navbar-default {  background-color: white;  border-color: transparent;}
.navbar-default .navbar-nav > li > a {  color: var(--azul_marin);  padding: 20px 15px;  text-transform: uppercase; transition: all 0.5s;}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { background-color: transparent;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {  background-color: transparent;}
.navbar-nav > li > .dropdown-menu {  background-color: #48575a; }
.navbar-nav > li > .dropdown-menu:before {  border-bottom: 15px solid #48575a; border-left: 15px solid transparent; border-right: 15px solid transparent;  content: "";  height: 0; position: absolute;  right: 25px;  top: -15px;  width: 0;}
.navbar-nav > li > .dropdown-menu li a {  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);  color: #fff;  display: block;    opacity: 0.8;  padding: 10px;  transition: all 0.5s;}
.navbar-nav > li > .dropdown-menu > li:last-child a {  border-bottom: medium none;}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {  background-color:transparent;  text-decoration: none;}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover { background-color: transparent;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {  background-color: transparent;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {  background-color: transparent;}

#top-menu { width:100%; display: flex; justify-content:space-around}
#top-menu li { list-style:disclosure-closed; padding: 8px 0; position: relative;}
#top-menu a { display: block; padding: 8px 20px;}

#top-menu ul li:hover a, 
#top-menu li:hover li a { border: none; color: #333; box-shadow: none;}
#top-menu ul li:hover { color:var(--naranja)}
#top-menu ul li:hover a{ color:var(--naranja)}
#top-menu li:hover > ul { display: block;}

#top-menu ul { background: #FFF; border-radius:0 0 10px 10px; display: none; left:-20%; position: absolute;  width: 140%; box-shadow: 0 1px 3px rgba(0,0,0, .3); z-index:1}
#top-menu ul li { float: none; margin: 0; padding: 0;}
#top-menu ul a { font-weight: normal;}
#top-menu ul ul { left: 90%; top: -3px; position:absolute;}

#modal{border-radius:0 !important; z-index: 1044 !important;}
#modal, 
#modal2{ width: 90%; left: 5%; top: 5%; max-height: 90%; overflow: auto; z-index: 103; position:absolute; border-radius:10px;}

#modal:before, 
#modal:after, 
#modal2:before, 
#modal2:after{ content: ''; position: absolute; z-index: -2; }
#modal .contenido2{  padding: 7px 0px 40px 0px; background-size:cover; }

#menu{  background:var(--azul_marin) no-repeat right; position: relative; background-size:contain; padding:20px; box-sizing: border-box;}
#menu .control_menu a{ border:1px solid #FFF; color:#FFF; font-size: 10px;}

#curricula table{ border-collapse: separate;}
#curricula table td{ border:1px solid #DDD} 

#fondo{ width:100%; height:100%; top:0; left:0; position: fixed; background: rgba(0,0,0,0.5); z-index: 1040;}
#fondo:hover{ cursor:pointer;}

#inscripcion{ position:fixed; bottom:20px; left:20px; background: var(--naranja); box-shadow:-5px 5px 10px rgba(0,0,0,0.5); }
#inscripcion h2{ padding:10px 40px;}
#inscripcion h2 a{ text-shadow: -1px 1px #666; color:white}

/*#inscripcion a{ width:80px; height:80px; color:white;  display:block; text-align:center; box-shadow:0 0 10px #333}
#inscripcion a i{ font-size:5rem !important; color:white; }
*/

#acceso_mides{ position:fixed; top:20px; right:20px; z-index:1100; text-align: center;  }
#acceso_mides .circular{ box-shadow: 0 0 5px rgba(0,0,0,0.43); margin-bottom:15px}

#div_contacto{ font-size: 1.3rem;}

footer{  width: 100%; background:var(--azul_marin); padding:40px 0; color:var(--gris)}

.logo{ height: 120px; width: auto;}
.banner{ margin-top:150px; height:400px; color:white; text-align: center;}
.banner h3{ font-size: 5rem;}
.foco{border:1px solid var(--naranja) !important; background:var(--naranja) !important }

.control_menu{display:grid; grid-template-columns: repeat(10, 1fr)}
.titile{  text-transform: uppercase;  position: relative;  margin-bottom: 20px;}
.titile:after{  content: "";  position: absolute;  left: 0;    bottom: 0px;  width:50%;  height: 1px; }
.title_area{   width: 100%;   text-align: center;  margin: 50px 0;  }
.title_area span{  display: inline-block;    text-align: center;   height: 5px;    width: 50px;}
.title_two {  padding-bottom: 0;  position: relative;  text-align: center;  text-transform: uppercase;}

.fieldset2{background:white; border-radius:10px; padding:2%;  }
.legend{ border-bottom:1px solid var(--naranja);}
.legend h2{ text-align: left; color:var(--naranja); }
.info2{ color:#333}

.full img{ width: 90%; height: auto;}
.full iframe{ width: 100%;}

.pie_carrera{ margin:40px 0}
.pie_carrera h5{ margin:20px 0; font-weight: bold;}

.scrollToTop { background: url("../img/bootom-top-arrow.png") no-repeat scroll 13px 12px #ffffff; border: 3px solid #f0f1f3;  border-radius: 5px;  bottom: 20px;  display: inline-block;  height: 54px;  opacity: 0;  position: fixed;  right: 20px;  text-align: center;  width: 54px;  z-index: 100;  transition: all 0.5s;}
.scrollToTop:hover{  background-position: 13px -50px;    text-decoration: none;  outline: none;}
.container{ width:70%;}

.listas{ margin:30px 0}
.listas li{ margin:15px 0}

.nolist{ padding:0; width:100%; display:flex; justify-content: space-around;}
.nolist li{ list-style: none;}
.nolist li a{ font-size: 3rem; color: white;}
.footer_bottom{ margin-top: 50px;}
.justify{ text-align: justify;}
.circular{ object-fit: contain; background: white;}

@media screen and (min-width:100px) and (max-width:280px){
	h2{ font-size:2.2rem !important}	
	h3{ font-size:2rem !important}
	section{ margin:20px 0}

	.navbar-default .navbar-nav > li > a { padding:8px 0}
	
	.logo{ width:100px; height:auto; margin:5px 10px}
	.container{ width:90%}
	.banner{ margin-top: 60px;}
	.div_row{ flex-direction: column; }
	.title_area{ margin:10px 0;}
	.control_menu{grid-template-columns: repeat(2, 1fr)}
	.w20, .w60, .w80, .w50{ width: 100%;}

	#top-menu{ display: block ;}
	#top-menu ul{ position: unset; width: 100%;}
	#imgBanner {height: 100px;padding: 12px 0;}
	#curricula{ overflow: auto;}
	
	#acceso_mides{ top:5px}
	#acceso_mides img{ height:50px; width: 50px;}

	#inscripcion a{ width:50px; height:50px;}
	#inscripcion a i{ font-size:2em !important; color:white; margin-top: 10px; }
}
@media screen and (min-width:281px) and (max-width:539px){
	h2{ font-size:2.2rem !important}	
	h3{ font-size:2rem !important}
	section{ margin:20px 0}

	.navbar-default .navbar-nav > li > a { padding:8px 0}
	
	.logo{ width:100px; height:auto; margin:5px 10px}
	.container{ width:90%}
	.banner{ margin-top: 60px;}
	.div_row{ flex-direction: column; }
	.title_area{ margin:20px 0;}
	.control_menu{grid-template-columns: repeat(2, 1fr)}
	.w20, .w60, .w80, .w50{ width: 100%;}

	#top-menu{ display: block ;}
	#top-menu ul{ position: unset; width: 100%;}
	#imgBanner {height: 100px;padding: 12px 0;}
	#curricula{ overflow: auto;}

	#acceso_mides{ top:5px}
	#acceso_mides img{ height:50px; width: 50px;}

	#inscripcion a{ width:50px; height:50px;}
	#inscripcion a i{ font-size:2em !important; color:white; margin-top: 10px; }
}

@media screen and (min-width:540px) and (max-width:769px){
	h2{ font-size:2.2rem !important}	
	h3{ font-size:2rem !important}
	section{ margin:20px 0}

	.navbar-default .navbar-nav > li > a { padding:8px 0}
	
	.logo{ width:100px; height:auto; margin:5px 10px}
	.container{ width:90%}
	.banner{ margin-top: 60px;}
	.div_row{ flex-direction: column; }
	.title_area{ margin:30px 0;}
	.control_menu{grid-template-columns: repeat(4, 1fr)}
	.w20, .w60, .w80, .w50{ width: 100%;}

	#top-menu{ display: block ;}
	#top-menu ul{ position: unset; width: 100%;}
	#imgBanner {height: 100px;padding: 12px 0;}
	#curricula{ overflow: auto;}

	#acceso_mides{ top:5px}
	#acceso_mides img{ height:50px; width: 50px;}
}

@media screen and (min-width:770px) and (max-width:1280px){
	.navbar-header{ width: 100%; text-align: center;}
	.navbar-default .navbar-nav > li > a { padding:0px auto}

	#imgBanner {margin-top: 145px !important;}	
}