@font-face{
    font-family: "Eurostile";
    src: local('Eurostile'), url('eurostile.otf') format('OpenType');
}

*{    
    font-family: "Eurostile","Roboto-Light", Arial;
}

body{
    background-color: #212930;
    /*background-color: #2a2e39;*/
    overflow-x: hidden !important;
}

.main{   
    width: 75%;
    height: auto;
    /*padding-top: 5% !important;*/
}

.section{
    /*padding-bottom:5em;*/
    color: #e6eefa;
    /*height: 35em;*/
    /*height: auto;*/
    /*border-bottom: 3px solid lightgray;*/
}

#animation{/*cuadro imagen*/
    height: 30em;
    /*border: 1px solid red;*/
    /*background: linear-gradient(45deg, rgba(36,41,50,1) 0%, rgba(106,122,147,1) 20%, rgba(106,122,147,1) 80%, rgba(36,41,50,1) 100%);*/
    /*background: linear-gradient(65deg, rgba(36,41,50,1) 0%, rgba(106,122,147,1) 20%, rgba(106,122,147,1) 60%, rgba(36,41,50,1) 100%);*/
    /*background: linear-gradient(20deg, rgba(36,41,50,1) 0%, rgba(106,122,147,1) 15%, rgba(106,122,147,1) 55%, rgba(36,41,50,1) 100%);*/
    /*background: linear-gradient(60deg, rgba(106,122,147,1) 0%, rgba(106,122,147,1) 30%, rgba(36,41,50,1) 90%, rgba(36,41,50,1) 100%);*/
    background: radial-gradient(ellipse, rgba(106,122,147,1) 0%, rgba(106,122,147,1) 10%, rgba(36,41,50,1) 90%, rgba(36,41,50,1) 100%);
}

#animation2{/*cuadro imagen*/
    height: 20em;
    /*border: 1px solid red;*/
    background-color:#212930; 
    display:flex;
}

#animationM{/*cuadro imagen*/
    /*height: 20em;*/
    /*border: 1px solid red;*/
    background-color:#212930; 
    display:flex;
    align-content: center;
}

#animation img{
    width: auto;
    height: 90%;
    /*height:80%;*/
    /*height:85%;*/
}

.section{
    /*height: 15em;*/
    height: auto;
    display: none;
    /*border: 1px solid white;*/
}

.s-active{
    display: block;
}

.section h1{
    width: 100%;
    height: auto;
    padding: 1% 0 !important;
    text-align: center;
    font-size: 200%;
    font-weight: bold;
    
    text-shadow: 2px 2px 20px #00a3de;
}

.section div h3{
    width: 100%;
    height: auto;
    padding: 2.5% 0 !important;
    text-align: center;
    font-size: 125%;
    font-weight: bold;
    overflow-wrap: break-word;
    text-shadow: 2px 2px 20px #00a3de;
}

.section p,
.section div p,
.section div ol{
    width: 100%;
    height: auto;
    padding: 0.5% 10% !important;
    text-align: justify;
    font-size: 16px;
}

.section div ol li{
    padding: 1% 0 !important;
}

#animation{
    display: flex;
}




#galeria{
    /*height: 30em;*/
    height: auto;
    padding: 2% 5% !important;
    
    /*border: 2px solid white;*/
}

/*Agregados estilos del Photoslide para que cargue al inicio y se muestre correctamente*/
.gallery{
    
    width: 100%;
    height: 85%;
    margin-top: 2% !important;
    /*border: 1px solid red;*/ 
    overflow: hidden;
}

.gallery .container{
    width: 100%;
    height: 100%;    
}

.gallery .container:target{
    width: 100%
}

.slide {
    display:none;
    width: 60%;
    height: auto;
    /*border: 1px solid yellow;*/
    overflow: hidden;
    /*box-shadow:
0 0 0.1vw 0.4vw #e1e6ee,
0 0 0.4vw 0.6vw #a3b8d4,
0 0   4vw 0.4vw #5581ba,

inset 0 0 1.5vw 0.4vw #5581ba,
inset 0 0 0.4vw 0.2vw #a3b8d4,
inset 0 0 0.5vw 0.2vw #e1e6ee;*/
transition: 0.2s;
}

.slide:hover{
    box-shadow: 5px 5px 5px #265ab2, -5px 5px 5px #265ab2;
    transition-delay: 5s;
}

/*.slide span{
    position: absolute;
    display: block;
}

.slide span:nth-child(1){
    top:0;
    left:-100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #265ab2);

}

.slide:hover span:nth-child(1){
    left:100%;
    transition:1s;
}


.slide span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #265ab2);

}

.slide:hover span:nth-child(2){
    top:100%;
    transition:1s;
}
*/



.slide label{
    position: absolute;
    top: 3%;
    right: 1.5%;
    padding: 1% 3% !important; 
    color:black;
    font-size: 150%;   
    border-radius: 30px;
}

.slide label:hover{ 
    background-color: gray;
    text-shadow: -1px 0 white, 0 1px white,
    1px 0 white, 0 -1px white;
}


.slide img{
    width: 100%;
    height: auto;
    /*margin-top: -25% !important;*/
}

.slide span{
    position: absolute;
    left: 0%;
    bottom: 0%;
    width: 100%; 
    height: auto;
    padding: 0 !important;    
    text-align: center;
    color: black;
    font-size: 210%;
    font-weight: bold;
}

.slide span:hover{
    background-color: grey;
    border-radius: 30px;
    text-shadow: -1px 0 white, 0 1px white,
    1px 0 white, 0 -1px white;
}



.next, .prev {
    position: absolute;
    cursor: pointer; 
    width: auto;
    left: 0;
    top: 40%;
    padding: 2% !important;
    color: black;
    text-shadow: -1px 0 white, 0 1px white,
    1px 0 white, 0 -1px white;
    font-weight: bold;
    font-size: 250%;
    /*border-radius: 3% !important;*/
    text-decoration: none;
}

.next{
    border-radius: 3px 0 0 3px;
    left: auto;
    right: 0;
}

.prev:hover, .next:hover{
    color: rgba(41,178,218,1);
    background-color: rgba(36,41,50,0.7);
    user-select: none;
    text-decoration:none;
    /*-webkit-text-stroke: rgba(41,178,218,1);*/
    /*text-shadow: -1px 0 white, 0 1px white,
    1px 0 white, 0 -1px white;*/
}

.punto {
    cursor:pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: rgba(41,178,218,0.7);
    border: 1px solid #fff;
    border-radius: 40%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active:hover {
    background-color: rgb(36,41,50);
}

.active{
    
    background-color: rgb(36,41,50);
}


/*formulario*/
#mainF{
    /*margin-top: 152px;*/
    position: relative;
	width: 90%;
    float: right;
    align-content: center;
    padding: 30px 30px 30px 30px;
    /*background: #242932;
    -webkit-box-shadow: inset 0px -10px 51px -12px rgba(41,178,218,1);
    -moz-box-shadow: inset 0px -10px 51px -12px rgba(41,178,218,1);
    box-shadow: inset 0px -10px 51px -12px rgba(41,178,218,1);*/
}

table{
    width: 100%;
    /* border: 1px solid #fff;*/
   /*-webkit-box-shadow: 0px 0px 89px -18px rgba(41,178,218,1);
-moz-box-shadow: 0px 0px 89px -18px rgba(41,178,218,1);
box-shadow: 0px 0px 89px -18px rgba(41,178,218,1);*/
padding-bottom: 25px;

}



tr{
    /*border: 2px solid #fff;*/
    padding: 10px;
}



td{

    /*border: 0px solid #fff;*/   

    padding: 20px 20px 20px 20px;

}



#tdCol2{width: 60%;}



#name{width: 85%; /*color:azure !important; background-color: cadetblue !important;*/}   

#lname{padding-right: 19px;}



#surname{width: 70%;}



#company{width: 85%;}   

#lcompany{padding-right: 10px;}



#department{width: 70%}



#phone{width: 85%;}

#lphone{ padding-right: 27px;}



#mail{width: 70%;}



#tdcomment{width: 82%; padding-top: 50px; padding-bottom: 0px}

#lcomment{ padding-bottom: 50px;}

#comment{

    padding-right: 10%;

    width: 85%;

    height: 180px;

}

/*#boton{
    padding: .5rem 1rem !important;
    font-size: 1.25rem !important;
}*/


.pie{
    /*margin-top: 5em;*/
    clear: both;
    float: left;
    display: block;
    /*position: fixed;*/
    /*position: relative*/
    position: static;
    bottom: 0;
    width: 100%;
    height: auto;
    /*width: auto;*/
    /*background: red;
    border: 1px solid yellowgreen;*/
    background: #242932;
    font-family: "Eurostile";
    font-size: 14px;
    color: #FFFFFF;
    /*z-index: -1;*/
}

.contenedorPie{
    float: left;
    /*position: relative*/
    /*width: 25%;*/
    height: auto;
    color: white;
    overflow-wrap: break-word;
}

#telfPie{
    /*border: dashed crimson 1px;*/
    padding-left: 20px !important;
}

/*#mailPie{
    padding-left: 20px !important;
}*/

.compania{
    content: url("menu/company.png");

}

.compania:hover{
    content: url("menu/company.gif");
}

.servicio{
    content: url("menu/services.png");

}

.servicio:hover{
    content: url("menu/services.gif");
}

.galeri{
    content: url("menu/gallery.png");

}

.galeri:hover{
    content: url("menu/gallery.gif");
}

.solucion{
    content: url("menu/solutions.png");

}

.solucion:hover{
    content: url("menu/solutions.gif");
}

.contacto{
    content: url("menu/contact.png");

}

.contacto:hover{
    content: url("menu/contact.gif");
}

.indiceG{
    align-content: center;
}

a{
    color:white;
}

a:hover {
    color: #cbced2;
}

.h-navbar-toggle-btn{
    display:none;

}

.menuM{
    /*position: fixed;*/
    width: 26%;
    /*height: 30em;*/ /*Los botones son más grandes que la caja*/ 
    height:30em;
    /*padding-top: 1%!important;*/
    right: 0;
    /*top: 270px;*/
    margin-top: 0.1% !important; 
    background-color: #242932;
    border: none !important;  
    z-index: 10000;
}

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

}

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

}

@media screen and (max-width: 3701px){
  
}
@media screen and (max-width: 3651px){
  
}
@media screen and (max-width: 3601px){
   
}
@media screen and (max-width: 3551px){
  

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

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

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

}
@media screen and (max-width: 3351px){
 
}
@media screen and (max-width: 3301px){
   
}
@media screen and (max-width: 3251px){
   
}
@media screen and (max-width: 3201px){
  

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

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

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

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

}

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

    
}

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

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

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

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

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

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

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

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

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





/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------CSS MOBILE PORTRAIT------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/



@media screen and (max-width: 991px) and (orientation:portrait){
      
    
}

@media screen and (max-width: 941px) and (orientation:portrait){
    
}

@media screen and (max-width: 891px) and (orientation:portrait){
   
    

}

@media screen and (max-width: 841px) and (orientation:portrait){
   
    
}

@media screen and (max-width: 801px) and (orientation:portrait){
    

}

@media screen and (max-width: 768px) and (orientation:portrait){
  
}

@media screen and (max-width: 711px) and (orientation:portrait){
  
    
}

@media screen and (max-width: 661px) and (orientation:portrait){
    
    
    
}

@media screen and (max-width: 601px) and (orientation:portrait){
    
    
}

@media screen and (max-width: 551px) and (orientation:portrait){
      
    

}

@media screen and (max-width: 501px) and (orientation:portrait){
   
    
    
}

@media screen and (max-width: 451px) and (orientation:portrait){
    
    

}

@media screen and (max-width: 421px) and (orientation:portrait){
    
    
}

@media screen and (max-width: 391px) and (orientation:portrait){
  
    

}

@media screen and (max-width: 351px) and (orientation:portrait){
   
    
}

@media screen and (max-width: 331px) and (orientation:portrait){
    
}

@media screen and (max-width: 301px) and (orientation:portrait){
   
}

@media screen and (max-width: 251px) and (orientation:portrait){
    
}




/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------CSS MOBILE LANDSCAPE-----------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/



@media screen and (max-width: 991px) and (orientation:landscape){
    
    
}

@media screen and (max-width: 941px) and (orientation:landscape){
    
}

@media screen and (max-width: 891px) and (orientation:landscape){
 
}

@media screen and (max-width: 841px) and (orientation:landscape){
  
}

@media screen and (max-width: 801px) and (orientation:landscape){
  
}

@media screen and (max-width: 768px) and (orientation:landscape){
  
}

@media screen and (max-width: 711px) and (orientation:landscape){
    
}

@media screen and (max-width: 661px) and (orientation:landscape){
    
}

@media screen and (max-width: 601px) and (orientation:landscape){
  
}

@media screen and (max-width: 551px) and (orientation:landscape){
  
}

@media screen and (max-width: 501px) and (orientation:landscape){
  
}

@media screen and (max-width: 451px) and (orientation:landscape){
 
}

@media screen and (max-width: 421px) and (orientation:landscape){
  
}

@media screen and (max-width: 391px) and (orientation:landscape){
  
}

@media screen and (max-width: 351px) and (orientation:landscape){
   
}

@media screen and (max-width: 331px) and (orientation:landscape){
   
}

@media screen and (max-width: 301px) and (orientation:landscape){
  

}

@media screen and (max-width: 251px) and (orientation:landscape){

}