@charset "utf-8";
/* menuform CSS Document */




body{background:white;
	font-family:Raleway,Arial,Helvetica,sans-serif;}
  


#too1{
	display:none;
}

#logo{padding-top:px;

 -webkit-justify-content: center; /* Safari */
             justify-content: center;
	 
		   display: -webkit-flex; /* Safari */
          

	   display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
   

	  width; 
	height: 65px;
	  background:darkblue;
    
	
	  }

#logo img{ 
            
		height:50px;
		width:286px;
		
		  }	

#telephone{margin-top:0px;
          text-align: center;
	       height:39px;
		   width:100%;
		   background-color:blue;
		    -webkit-justify-content: center; /* Safari */
             justify-content: center;
	 
		   display: -webkit-flex; /* Safari */
        
}
#tel1{
	margin-top:px;
	display:table;
	
    width:10%;
     height:36px;
 } 

		 		   	          
#tel2{
	  width:10%;
      margin-top:-2px;
	   }

		 		   	          
#tel2 img{margin-left:-20px;
	   
       }

#telcenter{ padding-top:7px;
	
	text-align: center;
	font-size:20px;

	       color:#BBB; 
           width:70%;
		
	   } 	

#nav-toggle {/*position: fixed;*/
	        
 display:inline-table;
 width:px;
}

#nav-toggle { }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 4px;
  width: 36px;
  background:white;
  position: absolute;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -10px; 
}
#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;

}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
                                 transform: rotate(45deg);
                                -webkit-transform: rotate(45deg);
                                }

#nav-toggle.active span:after {
           transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
}

.menu{ display:none;
	
	 
	  -webkit-justify-content: center; /* Safari */
       justify-content: center;
	   background:black;
       width:100% !important;
       list-style:none;	  
}   

.menu2{ display:none;}

	  	  	   	
.menu ul{position:;/* controla slicedown */
 
 text-align:center;
 width:100%!important;
 -webkit-justify-content: center; /* Safari */
             justify-content: center;
	 
		   display: -webkit-flex; /* Safari */
           display: flex; 			  

-webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
 list-style:none !important;

}  			  

.menu ul li{/* no absolute */
width:100%;
background:SpringGreen ; padding:7px;

}
.menu li  ul{display:none;/* esconder services */
 width:100%;
 }



.menu ul li:hover{
background:turquoise;

}

.menu ul li ul {/* que hace */

border:;

}

.menu ul li ul li{
width:auto;/* medio centrar services */
	margin-top:0px;
	 margin-right:30px;
	 margin-left:30px;
background:;
text-align:center;} 
 
.menu ul li ul li:hover{
 background:#EEE;
 }

.menu ul li ul li a:hover{
 color:blue; 
 }

.menu ul li:hover ul{    
display:block;
position:;/* absolute para bloque en services */
}
	

.menu  a:hover{
color:#fff;
}

 	              
.menu li a{
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:grey;
font-size:18px;
}
	
 /* 320 */


@media (min-width: 320px){



#logo{
-webkit-justify-content: center; /* Safari */
             justify-content: center;
	 
		   display: -webkit-flex; /* Safari */
          

	   display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height:px;

	  width:100%; 
	
	  
   }

#logo img{ height:50px;
          width:294px;
		
       
         
-webkit-transition-property: width, height; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
    transition-property: width, height;
    transition-duration: 2s;   

}



#tel2 img{margin-left:-20px;
	  margin-top:4px;
       }

.menu ul li ul li{
width: auto;
	
}
}

@media (min-width: 480px){

#logo img{ height:52px;
          width:300px;}
		

#tel2 img{margin-left:8px;
	  
       }
.menu ul li ul li{

	 margin-right:100px;
	 margin-left:100px;
} 

}

@media (min-width: 780px){  /* green zeleini */
 #panel2{margin-top:-200px}
 
}
@media (min-width: 960px){
#header{
	 width:100%;
	 height: 65px;
	 background:darkblue;
	 opacity: .5;

}


#logo{position: absolute;/*works index*/
	margin-top: -65px;
	 width:41%;/* brings logo left*/

background:transparent;
	 z-index: 999;
}

#logo img:hover{ width: 330px;
 height:60px;

-webkit-transition-property: width, height; /* Safari */
    -webkit-transition-duration: 5s; /* Safari */
    transition-property: width, height;
    transition-duration: 5s;   

}

#too1{
	   display:block !important;
	  position:relative; 
	
	  width:264px;
      height:32px;
	  background:orange;
	   float:right;
	   margin-top:-53px;
	   margin-right:157px;
	 background:orange;
	    border-radius:3px;
	 
	   } 
 
  
#too1 img{
	       margin-top:-1px;
	       margin-left:2px;}
 
  
#too1 p{
	margin-top: 2px;
	margin-right: 20px;
 float:right;
	color:black;
	font-weight: bold;
    font-size: 18px;
} 

 

.login{ 

	
	transition: 1s;
  margin-left: -235px;
  
  width: 235px;
  height:40px;
    background-image: url("images1/logo30.svg");
    background-position: center; 
     background-size:233px 41px;
    background-repeat:no-repeat;

  }



.menu{display:none!important;}


.menu2{background:rgba(0, 0, 255, 0.5);
	display: inline-block;

 height: 25px;
	width:100%;
  position:absolute;
	    
	      
}   


.fixed{top:0px;/* no margin top or paddin */
	padding-top:2px;/* centers ul in menu2 */
     right:0px;
	height: 44px; 
opacity:1;
background:darkblue ;
  width: 100% !important;
  position:fixed;
  z-index:1000;
    
}

			  	  	   	
.menu2 ul{
 width:130% ;
 
display: -webkit-flex;
 
  display:flex;
  justify-content: center;

	position:absolute;/* absolute desplegable */
 
margin-top:2px;/* controla el texto del menu */
padding-right: 50px;
 		  
}  		  

.menu2 ul  li  ul{/* width no */
	display:none;/* esconder services */
 opacity: 1;

 }
				  
.menu2 ul li:hover ul {/* width no */
	 
	display: block;
	
	margin-top:0px;/* menu desplegable */

}

.menu2 ul li a{/* width no */
    text-decoration:none;
	
	color: white;
}


.menu2 ul li a:hover{ color:silver;
}

 .menu2 ul li{opacity: 1;
 position: relative;
	        width:140px;/* le da el ancho a el ul li ul */
			
padding-top:0px; /* centrar line-height:3ms; las letras */
 display:inline-block;
background:;	     
           	                 
text-align:center;	 
margin-top:0px;

}  	
			               	
.menu2 ul li .active{
	display:block;
     
	   padding:1px;
	   border:none;
	  
       cursor:default;           
 color:turquoise;
 }
	

.menu2 ul li ul li{
	background:#ffffff;
	width: 220px;
	

    text-align: center;
}
.menu2 ul li ul li:hover{background:blue;
 /* witdth not works */
text-align: center;
}
	              
.menu2 li a{/* witdth not works */

font-size:14px;
}
	
.menu2 ul li ul li a{font-size: 14px;
 /* witdth not works */
color:darkblue;
}


#telephone{display:none;}	

 


.textcontainer{width: 80%;

}


}

@media(min-width: 1024px){

body{width: 100%;}

#logo{
	 width:40%;
	}


}
@media(min-width: 1280px){

body{width: 100%;
}
	
#media{  margin-right:1px;}	

#panel{  margin-right:21px;}		

#too1{margin-right:200px;}
	}