*{box-sizing: border-box;}
/* headerrrrrrrrrrrrrrrrrr */
header { width: 100%;
		 position: fixed;
		 top: 0;
		 padding: 20px 0px 0px 0px;
		 z-index:5;
		 transition: 0.5s;}


/* contenedorr de menussssss*/
.menu{ width: 100% }


/*logooooooooooooooooooooooo*/
.menu-logo{ width: 20%;
			float: left;
		    padding: 0px 0px 0px 0px;}

.menu-logo a img{ text-decoration: none; }

.menu-logo img{ width: 100%;
				max-width: 140px }

#logo-original{ display: none; }



/*btn menuuuuu*/
#btn-menu{display: none;}



header label{  width: 50px;
			   height:50px;
			   float: right;
			   display: none;
			   cursor: pointer;
			   background-color: #fff;
			   flex-direction: row;
			   align-items: center;
			   justify-content: center;
			   position: relative;
			   padding: 23px 0px 0px 10px;
			   margin: 0px 0px 0px 10px}


.lazo{ width: 30px!important;height: 5px;
       background: #007ded;transition: 0.5s }

.lazo:before , .lazo:after , .lazo{content: ""; position: absolute;width: 100%;
       background: #007ded;transition: 0.5s}

.lazo:after{ height: 100%;top: 12px }

.lazo:before{ height: 100%;top: -12px }

.cruza{ transition: 0.5s;
 transform: rotateZ(45deg); }

 .cruza:before{ transition: 0.5s;top: 0;
 transform: rotateZ(90deg); }

 .cruza:after{ transition: 0.5s;top: 0;
 transform: rotateZ(0deg); }





/*menuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu 111111*/
.menu-nav{ width: 80%;
		   float: left;
		   padding: 20px 0px 0px 0px}

.menu-nav-ul{ padding: 0;
			  margin: 0;
			  display: flex;
			  float: right; }

.menu-nav-ul li{ list-style: none;position: relative;}

.menu-nav-ul li a{ display: block;
				   padding: 12px 20px 12px 20px;
				   text-decoration: none;
				   font-family: Raleway;
				   font-weight: 600;
				   color: #fff;
				   font-size: 16px;
				   cursor: pointer;
				   position: relative;
				   transition: 0.2s}

/*guiaaa menuuu*/



.menu-nav-ul li a:hover{color: #6a00b5!important}



/* submenuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu */
.menu-nav-ul ul{  background-color: #0060ff;
			      position: absolute;
			      width:260px;
			      top: 40px;
			      left: 50%;
			      opacity: 0;
			      visibility: hidden;
			      transform: translateX(-50%);
			      transition: all 0.3s ease;
			      padding: 10px 0px 10px 0px;
			      border-radius: 5px}

.menu-nav-ul ul:before{ content: "";
						   position: absolute;
						   top: -8px;
						   left: 50%;
						   transform: translateX(-50%);
						   border-left: 10px solid transparent;
						   border-right: 10px solid transparent;
						   border-bottom:10px solid#0060ff }


.menu-nav-ul ul li { list-style: none; }

.menu-nav-ul ul li a{ display: block;
					  padding:20px 0px 20px 0px;
					  font-family: Raleway;
					  font-size: 14px;
				      font-weight: 700;
					  color: #fff!important;
					  text-align: center;
					  text-decoration: none}

.menu-nav-ul ul li a:hover{ color: #00c9ff!important }

.menu-nav-ul li:hover ul{ transition: all 0.3s ease;
	                      visibility: visible;
	                      opacity: 1;
	                      top: 50px}


/*iconoooo masssssssss y menosssssssssssss*/
.menu-nav-ul li a span{ width: 20px;
						height: 20px;
						
						position: absolute;
						top: 50%;
						right: 0px;
						transform: translateY(-50%);
						 }

.menu-nav-ul li a span:before{ content: "";
							   width: 10px;
							   height: 2px;
							   background-color: #0057bf;
							   position: absolute;
							   top: 50%;
							   left: 50%;
							   transform: translateX(-50%)
							   translateY(-50%); }

.menu-nav-ul li a span:after{ content: "";
							   width: 2px;
							   height: 10px;
							   background-color: #0057bf;
							   position: absolute;
							   top: 50%;
							   left: 50%;
							   transform: translateX(-50%)
							   translateY(-50%);
							   transition: 0.3s }

.menu-nav-ul li a:hover span:after{ opacity: 0 }





/*menuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu 222222222*/
.menu-nav2{ width: 300px;
	        height: 100vh;
	        margin: 0px 0px 0px 0px;
	        position: absolute;
	        left: -300px;
	        display: none;
	        top: 0;
	        background: #222;
            transition: 0.5s}

/* logoo dentro de submenuuu */		   
.menu-nav2-ul-logo{ width: 100%;
					position: absolute;
					top:0;
					left: 0;
					text-align: center;
					padding: 20px 0px 0px 0px}

.menu-nav2-ul-logo img{ width: 100%;
						max-width: 100px}



.menu-nav2-ul{ position: absolute;
			   top: 50%;
			   transform: translateY(-50%);
			   padding: 0;
			   width: 100%;}

.menu-nav2-ul li{ list-style: none;}


.menu-nav2-ul li a{ display: block;
				   padding: 5px 10px 5px 10px;
				   text-decoration: none;
				   font-family: Raleway;
				   color: #fff;
				   font-size: 12px;
				   font-weight: 700;
				   line-height: 35px;
				   cursor: pointer;
				   position: relative;
				   text-align: center;
				   border-top: 1px solid#777}


/*iconooo chevron*/
.menu-nav2-ul li a span{ font-size: 20px;
						 position: absolute;
						 right: 10px;
						 top: 50%;
						 transform: translateY(-50%); }


.menu-nav2-ul li a:hover{ color: #00a4ff }

/* submenuuuu */
.menu-nav2-submenu{ width: 100%;
					background-color:#007ded;
				    position: relative;}


.menu-nav2-submenu:before{ content: "";
						   position: absolute;
						   top: -8px;
						   left: 50%;
						   transform: translateX(-50%);
						   border-left: 10px solid transparent;
						   border-right: 10px solid transparent;
						   border-bottom:10px solid#007ded }


.menu-nav2-submenu a{ text-decoration: none;
					  padding: 0px 0px 0px 0px;
					  color:#222!important;
					  font-size: 14px!important;
					  border-top: 1px solid#004870!important;}

.menu-nav2-submenu a:hover{ color: #fff!important }					  

#btn-menu:checked~ .menu-nav2{left: 0}








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

	 header { padding: 10px 0px 10px 0px!important}

	.menu-nav{ display: none; }

	/*logooooooooooooooooooooooooooooooooooooo*/
    
    
    .menu-logo{ padding: 0px 0px 5px 10px}
    .menu-logo img{ width: 100%;
				    max-width: 90px }

	header label{ display: block;
				  margin-right: 10px }

					

	.menu-nav2{ display: block; }

}