* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
 
body {background:#FEFEFE;}
 
.inscribete_Aqui{
  -webkit-transition: width 3s;/*Safari */
  -webkit-transition-delay: 1s; /*Safari */
transition: width 3s;
  transition-delay: 1s;

   background-color: red;
 /* -webkit-animation-name: example;  Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example2;
 animation-iteration-count: infinite;
}
.inscribete_Aqui:hover{
 width: 200px;
 /* font-size: 16px;*/
color:rgba(245,242,242,1.00);
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example2 {
  from {background-color:rgba(9,151,231,1.00);}
  to {background-color: rgba(12,199,229,0.92);  }
   
}

/* Standard syntax */
@keyframes example2 {
 from {background-color: rgba(9,151,231,1.00);}
  to {background-color:  rgba(12,199,229,0.92);   }
}

 /*BARRA DE MENU*/
 
 .btn_menu_bar {
	display:none;
		
}

.btn_menu_bar:hover {
	background: rgba(255,255,255,.5);
		
}
/*.nav_barraMenu-fixed ul{
	top:0;
	position: fixed;
	background-color:#a70000;
	/*z-index: 1;
	width: 100%;
	padding-left: 30%;
z-index:2;
	}*/
.class_menu-fixed {/*contenedor de la barra de menu*/
background-color:#a70000;
position: fixed;
top:0;
width: 100%;
 font-size: 12px;
} 

.class_menu-fixed nav  {/*contenedor de la barra de menu*/
 display: flex;
  justify-content: flex-end;
  padding-right: 2%;
 z-index:2;
 width: 100%;
	}

.class_menu {/*contenedor de la barra de menu*/
	/*width: 100%;*/
	/*background-color:#a70000;*/
	z-index: 2;
	 font-size: 14px;
}
 


 
.class_menu nav {/*barra de menu*/
	background-color: yellow;
	background-color:#a70000; /*!important; color de la barra de menu*/
	z-index:1000;
	line-height: 1.7em; /* 60 (24) tambien sirve para definit la altura de la barra de menu*/
	

}
 
.class_menu nav ul {
	justify-content: center; /*flex end o center para centrar el menu*/
	display: flex;
	list-style:none;
}
.class_menu nav ul ul  a:hover{
	color:#0B10E7;/*cambia el texto a color azul cuando se pasa el mouse sobre el boton*/

}
.class_menu nav li a:hover{
	/*color:#000;cambia el texto a color azul cuando se pasa el mouse sobre el boton*/

}

nav > ul > li:hover > a,
nav > ul:not( :hover ) > li.active > a{
/*background-color: #ffff;*/
background-color: blue;
color:#0B10E7;/*cambia el texto a color azul cuando se pasa el mouse sobre el boton*/
border-bottom: 1px solid #a70000;
border-top: 1px solid #a70000;
}
.class_menu nav ul li {
	display:inline-block;
	position: relative;
}
.class_menu nav ul li:hover {
	background:#ffffff;
	border-bottom:2px solid #a70000;
		border-top:2px solid #a70000;
		
}
.class_menu nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding: 10px;/*ayuda a definir la altura de la barra de menu*/
}
header nav ul li a span {
	margin-right:10px;
}
.class_menu nav ul li:hover .children {
	display:block;
}
.class_menu nav ul li .children {
	display: none;
	background:#a70000;
	position: absolute;
	width: 150%;
	z-index:1000;
}
.class_menu nav ul li .children li {
	display:block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
}
.class_menu nav ul li .children li a {
	display: block;
}
 
.class_menu nav ul li .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right:0;
	margin-left:10px;
}
 
.class_menu nav ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;
}
 

  
/*INICIO SCREEN ENTRE 800 Y 999 AZUL*/
@media screen and (min-width:872px) and (max-width: 999px)  {

.class_menu{

 font-size: 12px;
}
.class_menu-fixed {
/*background-color: yellow;
probando si hay efecto con color de fondo


width: 100%;*/
/*height: 80px;
position: fixed;
top:0;*/
/*padding-top: 40px;
padding-left: 0;
display: flex;
justify-content: end;
 z-index:2;*/

	} 
	

	}
	
	/*SCREEN ENTRE 601 Y 800 VERDE*/	
@media screen and (min-width:601px) and (max-width: 871px) {



	
	}
	
/*SCREEN MOVIL 300 a 600 AMARILLO*/
@media screen  and (min-width: 300px) and (max-width: 871px) {
	body {
	margin-top:50px;
	}
 
	.btn_menu_bar {
		margin:0;padding:0;
		display:block;
		width:100%;
		height:42px;
		position: fixed;
		top:0;
		background:rgba(208,174,174,1.00);
		z-index:2;
text-align:left;		
	}
 
	.btn_menu_bar .bt-menu {
		color: #000;
		overflow: hidden;
position: relative;
		/*font-size: 12px;*/
		text-decoration: none;
	}
	 .bt-menu  .nombre_icon {
		 margin:0;
		padding:0;position:relative;
 		font-size:100%;
		top:1px;	
		float:right;/**/ 
		padding-right: 5px;		
	 }
	.bt-menu span {
		position:absolute;
		display:block;
	 top:5px;
		
		font-size: 35px;
/*		position: relative;
*/		
	}
.class_menu-fixed {
	padding-left: 0;
	}
	.class_menu nav{
		width: 70%;
		height: calc(100% - 80px);
		position: fixed;
		right:100%;
		margin: 0;
	/*	overflow: scroll;*/
		top:50px;
			z-index:5;
			display:block;
			
	}
 .class_menu nav ul {
	justify-content:flex-start; /*flex end o center para centrar el menu*/
	display:block;
	
}
	.class_menu nav ul li {
		display: block;
		border-bottom:1px solid rgba(255,255,255,.5);
	}
 
	.class_menu nav ul li a {
		display: block;
		padding:20px;/*se cambia el padin para tener mas espacio en moviles*/
	}
 
	.class_menu nav ul li:hover .children {
		display: none;
	}
 
	.class_menu nav ul li .children {
		width: 100%;
		position: relative;
		background:#0743A0;
	}
 
	.class_menu nav ul li .children li a {
		margin-left:20px;
	}
 
	.class_menu nav ul li .caret {
		float: right;
	}
}