@charset "utf-8";
/* CSS Document */

#fondo { position: fixed; z-index:-3; animation: fadein 4s; -moz-animation: fadein 4s; /* Firefox */ -webkit-animation: fadein 4s; /* Safari and Chrome */-o-animation: fadein 4s; /* Opera */}
@keyframes fadein { from { opacity:0;} to { opacity:2; }}
@-moz-keyframes fadein { from { opacity:0;} to { opacity:2; }}
@-webkit-keyframes fadein { from { opacity:0;} to { opacity:2; }}
@-o-keyframes fadein { from { opacity:0;} to { opacity:2; }}


@font-face {
font-family:avenirlt;
src: url(../fonts/avenirlt.otf) format("opentype");
}


@font-face {font-family:montse;
src: url(../fonts/monste.otf) format("opentype");
}

/*--------*/

* {outline:0; padding:0; margin:0;}

body {outline:0; padding:0; margin:0; font-family: "avenirlt"; overflow-x:hidden; color: #58595b;  }
a {color:#58595b; text-decoration:none;} a i {color:#087EBD !important; }
a:hover {color:#f48b19; }
strong {color:#000;}
b {color:#cb2128; font-weight:bold;  }

.telefono {font-size: 1.2em; line-height:30px;}
.nota { font-size:.9em; color:#666; font-style: italic; }

.btn { background:#4B86C5; padding:.8em 1em; color:#fff !important; font-size:1.2em; border-radius:.5em; box-shadow:0 3px 3px rgba(0,0,0,.5); } .btn:hover { background-color:#1C3461;  }

ul { padding:1em;}
#contenido ul li  { list-style: none; color:#087EBD; list-style-position: inside; text-indent: -1.5em; line-height: 1.6em; }
#contenido ul li span  { list-style: none; color:#58595b; }
#contenido ul li i { margin-left:-26px; font-size:.8em;} #form ul { padding-left:0;} #form ul li { margin:0; }

i { color:#087EBD; }
p i {margin-left:-.5em;} 
p {text-align: justify;}

#arriba { display: none; position: fixed; bottom:0; right: 30px; z-index:3000; background:#37A7DF; color:#fff; cursor: pointer; padding: 10px; border-top-right-radius:10px; border-top-left-radius:10px; border:none; border:1px solid #fff; border-bottom:0; line-height:18px;}
#arriba:hover { background-color:#58595b; color:#fff;  }



/*--------------------- clientes banner -----*/

.columna-cliente { width:100%; min-height:80px; overflow:hidden;  margin-top:-1px; padding:1em; max-height:240px;}
.cliente { width:220px !important;  margin-left:-.3em;  }


/*-------------------------Slider---------------*/

#slider { text-align:center; height:400px; z-index:0; position:relative; overflow:hidden;   }
#slider img {width:100%; min-height:400px; max-height:400px; min-width:1400px; z-index:0;}


.btn-floating1, .btn-floating2  {width:35px; height:35px; line-height:40px; color:#37A7DF; background-color:#FFF;  padding:0; border-radius:50%; font-size:20px; z-index:20; cursor:pointer !important;  box-shadow:0 3px 3px rgba(0,0,0,0.5); position: absolute; bottom:1em;   }

.btn-floating1:hover, .btn-floating2:hover {color:#37A7DF; cursor:pointer;}
.btn-floating1 { margin-left:-50px; margin-right:50px;  }

#slider h7 { color:#FFF; font-weight:normal; z-index:10;  position:absolute; font-size:1.2em;  }
#slider h7 b { color:#df912e; font-weight:bold; font-size:1.6em; }
#slider h7 strong { background:#df912e; padding:.8em 1em; color:#fff; font-size:.8em; border-radius: 1.5em; } 
#slider h7 strong:hover {background-color:#37A7DF;  text-shadow:none; }


@media screen and (min-width: 1200px){ #slider h7,  #slider h8{ font-size:1.3em;}}
@media screen and (max-width: 1200px){ #slider h7,  #slider h8{ font-size:1.1em;}}


/*------------------header-------------*/

#header { width:100%; height:auto;}  


#top { border-bottom: solid #58595b 1px; text-align:right; height:38px; margin-top: 18px; } 
#top i {color:#37A7DF !important; } 
#top a { padding:.6em 1em; color:#fff; } 
#top a i { color:#FFFFFF !important;  } 
#top a:hover i { color:#FFB000 !important;  }
#top a:hover {  color:#37A7DF; }

.menu-fixed {position:fixed; z-index:1000; width:100%; top:0; }

nav {height:120px; font-size:1em; text-transform:uppercase; width:100%; background:#fff; }
nav ul { text-align:right; color:#fff; width:auto; background:#fff;  border:solid 1px #58595b; border-left:0; border-right:0;}
nav li { display:inline; border-right:1px solid #ccc; }
nav a {  color:#df912e; text-decoration:none; font-size:.8em; margin-left:-.4em; } nav i { color:#37A7DF; font-size:1em;}
nav a:hover { color:#37A7DF;  } 


/*--------------------------------------------Dropdown Button */

.dropbtn { color:#df912e; cursor:pointer; }
.dropdown {  display:inline-block;  }

/*--------*/

#contenido { width:100%; clear:both;  } 


.fotos, .titulos, .derecha, .fondo  { opacity:0; }
.foto { max-width: 100%;
  height: auto; }

#videon { display:none;}
video { width:100%; }

h1 { font-size:1.8em;  color:#58595b; padding:.5em 0; font-weight:bold; text-align:center !important; border-bottom:1px solid #58595b; } 
h2 {font-size:1.4em;  color:#df912e; padding:.4em 0 ; text-align:center; } h2 span {font-size:.7em !important; color:#087EBD; }
h3 {font-size: 1.1em;  text-align:left; color:#37A7DF; padding: .3em; } 
h4 {font-size: 1.1em;  color:#fff; text-align: left; padding: .3em; }
h5 {font-size: 1em;  color:#fff; font-weight:bold; padding:0 .8em;  } h5 i { color:#37A7DF; }
h6 {font-size: 1.1em;  color:#fff; padding:1em 0; text-align:center !important; background:#A00505;  }  h6 i { color:#FFF; }

.vd {color:#9dc44c;}
.az {color:#37A7DF;}
.nj {color:#df912e;}
.btn-guidari-vd {background: #9dc44c; font-size: 1em; color: #fff; border-radius: 1.5em; margin-top: 10px; margin-right:12px; }
.btn-guidari-vd a:hover {background: #df912e !important;}
.btn-guidari-az {background: #37A7DF; font-size: 1em; color: #fff; border-radius: 1.5em; top: 8px;  margin-right:12px; }
.btn-guidari-az i {color: #fff !important; }
.btn-guidari-nj {background: #df912e; font-size: 1em; color: #fff; border-radius: 1.5em; top: 8px;  margin-right:12px; }
.btn-guidari-nj i {color: #fff !important; }

#block { padding:1em; color:#fff; width:100%; text-align:center; align-content: center; font-size:1em; font-weight:normal; background-size:100%; }
#block p { margin: 0 auto; color:#fff;  }
#block a {color:#fff; border-radius: 1.5em;}
#block a:hover { color:#004372 ;}
#block h1 { font-size:1.3em;  color:#fff; padding:.5em 0; font-weight:bold; text-align:center !important; border-bottom:1px solid #37A7DF; } 
#block h2 {font-size:1em;  color:#fff; padding:.5em 0 ; text-align:center; } h2 span {font-size:.5em !important; color:#087EBD; }


.btn_imp { color:#fff !important; padding:.6em 1.5em; text-transform: uppercase; border: none; font-size:1em; background:#37A7DF; border-radius: 1.5em; } .btn_imp i { color:#fff !important; }
.btn_imp:hover { color:#fff !important; border:none; background:#02489B; box-shadow:0 0 6px #fff; } .btn_imp:hover i, .btn_head i {color: #fff !important;}

.btn-imp-nj { color:#fff !important;  padding:.6em 1.5em; text-transform: uppercase; border: none; font-size:1em; background:#df912e; border-radius: 1.5em;  } .btn_imp i { color:#fff !important; }
.btn-imp-nj:hover { color:#fff !important; border:none; background:#e27600; box-shadow:0 0 6px #fff; } .btn_imp:hover i, .btn_head i {color: #fff !important;}

.btn-imp-az { color:#fff !important;  padding:.6em 1.5em; text-transform: uppercase; border: none; font-size:1em; background:#37A7DF; border-radius: 1.5em;  } .btn_imp i { color:#fff !important; }
.btn-imp-az:hover { color:#fff !important; border:none; background:#02489B; box-shadow:0 0 6px #fff; } .btn_imp:hover i, .btn_head i {color: #fff !important;}

.btn_head { margin-top:3.5em; color:#fff !important;  font-size:1.3em; background:#3BCC3B; padding:.5em 1em; position: absolute; z-index:500; right:0; text-align: center; width: auto; display: none;} .btn_head:hover { color:#000 !important;}
.columna { margin:0 auto; min-height:50px; }
.columna-2 {min-height:50px;  padding:1em; }
.columna-3 {min-height:50px;  padding:1em 0; } 
.columna-4 {min-height:50px;  padding:1em 0; text-align:left !important; align-content: center;}
.columna-5 {min-height:50px;  padding:1em 0; text-align:center !important; align-content: center;}
.columna-6 {min-height:50px;  padding:1em 0; text-align:center !important; align-content: center;} 


.caja-contacto {display: block; background: #98c0e0 ;border-radius: 1em; padding: 1em;}
.servicio { width:80%; margin-left:5%;  background:#000 ; color:#fff; text-align: center; padding:3em 1em; } .servicio i { color:#fff; font-size:4em; }

#form { width:100%;  }
.formulario { padding:0 1em; }

.logos { max-width:150px; margin:0 .5em;}

.cita { width:100%; background:#37A7DF; padding:.8em 0; margin-bottom:2em;  } .cita a, .cita a i {color:#fff !important; } .cita:hover {background:#37A7DF !important; cursor: pointer;}

.icono {font-size:4em; color:#02489B; padding:.7em .6em ;  line-height:80px;   }

.centrado {text-align:center;}	

.active2 { color:#000 !important; }	

/*-------------------------------------- WEB--*/
	

@media screen and (min-width: 600px){
	
#header {min-height:180px; position: relative; z-index:1000; }

.logo { height:130px;  } 	

nav a {padding:1.4em 1em;}	
nav ul { width:100%; clear: both; text-align: center; }	
	
.dropdown-content { display:none; position:absolute;  text-align:left; z-index:10000;  width:auto;  height:3.9em; margin-top:.4em; margin-left:.8em; }
.dropdown-content ul { padding:0; }
.dropdown-content ul li { border-left:0;  list-style: none; float:left;  }
.dropdown-content a span, .dropbtn span {font-size:.9em !important;  }
.dropdown-content a {color:#58595b; background:#fff; text-decoration:none; font-size:.7em; display:block;  text-align:left; border-top:0; padding:1.3em 4em 1.3em .8em; border-bottom:1px solid #58595b;  }
.dropdown-content a:hover, .dropdown-content a:hover span { background: #df912e; color:#fff;}
.dropdown-content span {color:#df912e;}
	
.active { color:#37A7DF !important; }	


#slider { clear: both; margin-top:47px; }
#slider h7 { z-index:900; width:auto; max-width:400px; top:0px; text-align:left; padding:5em; right: 4em; }
#slider h7 span {display: block; background: rgba(0,0,0,0.70); padding: 0.5em;}

	
.dropdown:hover .dropdown-content { display: block;}
	
.columna   {width:1020px; padding-left:16px;}
.columna-2 {width:460px; float:left; margin-right:18px;} .columna-2 p {text-align: justify;}
.columna-3 {width:318px; float:left; margin-right:16px;}
.columna-4 {width:235px; float:left; margin-right:16px;}
.columna-5 {width:184px; float:left; margin-right:16px;}
.columna-6 {width:151px; float:left; margin-right:16px;}

	
.slogan {font-size:1.3em; font-weight: bold; padding: 0.2em; }
	
.formulario {max-width:500px; margin:0 auto;}	

.art img {width:50% !important; float:right; padding-left: .5em;}	
	
.mapa { border:solid 2px #37A7DF;}	
	
.botonverde {
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	background-color:#89c403;
	border-radius:6px;
	border:1px solid #74b807;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:12px 17px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
}
.botonverde:hover {
	background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	background-color:#77a809;
}
.botonverde:active {
	position:relative;
	top:1px;
}
	
}
.linea-div {
    width: 100%;
    height: 10px;
    background-color: #f6c6ad;
}

/*-------------------------------------- movil--*/ 

@media screen and (max-width:599px){
	

#header { min-height:200px; border-bottom:2px solid #ccc !important; position:relative; z-index:1000;  }	
	
.logo { max-width:270px; z-index:11; margin-top:75px;  } 

.btn_head {margin-top:10em; font-size: 1.5em; position:fixed;}
	
.menu_movil {top:0; left:0; width:100%; height:auto; background:#fff; position:fixed; z-index:100000; padding:0 !important; margin:0 !important; display:block; color:#58595b; cursor:pointer; border-bottom:1px solid #58595b;  }
.btn_menu { display:block; padding:12px;  color:#58595b; text-decoration:none; font-weight:normal; font-size:17px; }	

nav { border:0;}
nav ul { width:100%; left:-100%;  border:none; position:fixed; z-index:2000; padding:0; top:46px; overflow:hidden; }
nav li {display:block; float:none; text-align:left; border-bottom:1px solid #58595b; width:100%; padding:1em !important ; border-right:none; background:#fff;}
nav a { font-size:1em; width:100%; margin-left:1em;  color:#58595b !important; padding:1em;   }
nav i { margin-left:-4px; color:#9dc44c; } 
	
.dropdown-content { display: block;}
.dropdown-content a { clear: both; margin:1.5em 0 !important; line-height: 2em !important; text-transform:inherit;  }	
.dropdown-content span {color:#58595b; padding-left:1.5em !important;  }	
	

#slider {clear:both; z-index:0; margin-top: 0px; max-width: 100%; height: auto; }
#slider img {max-width: 100%; height: auto; left: 100%;}	
#slider h7 { width:90%; padding:1em 0 2em 0; font-size:1.2em; text-align:center !important; margin: 0 auto; background:rgba(255,255,255,.8); bottom:4em; color:#000; right:5%;  } 
#slider h7 strong {text-shadow:none;}
.btn-floating1, .btn-floating2  { left:53% !important; }

	
.columna { width:92%; margin-left:2%; }	
.columna-2, .columna-3, .columna-4, .columna-5, .columna-6 {width:92%; margin:2% !important;  }	
	
.slogan {font-size:1em; line-height:20px; font-weight: bold; }	
	
.cliente { width:160px !important;  margin-left:-.3em !important;  }	
.columna-cliente { width:100%; min-height:80px; overflow:hidden;  margin-top:-1px; padding:1em; max-height:240px;}
	

.left {margin-left:-800px;  position:relative;}	
.right {margin-left:-700px;  position:relative;}	
.centro {left:-200px !important; position:relative; }
	
	
.social {top:210px !important;}	
.social ul li a {font-size:1.5em !important; border-radius: 3em;}
	
.active { color:#35A911 !important; }	
	
}


.bg-a {width:100%; min-height:auto; background: url("../images/fondo_textutra_bco.svg") repeat; background-size:400px; padding-top:2em; } 
.bg-b {width:100%; min-height:600px; background: url("../images/fondo_textutra.svg") repeat; background-size:800px; padding-top:2em; } 



/*---------- transformaciones escala hover -----*/


.icono:hover{ 
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
	cursor: pointer;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}


/*---------*/



/*---------------------contacto-----------*/


#contacto table {border:none; color:#FFF; margin:0; margin-bottom:3em;}
#contacto table td {border:none; margin-top:1em; }
.text-form { width:100%; padding:1em 0; font-size:1em;  border:solid #ccc 1px; padding-left:.5em; margin-top:-1px; font-family: "avenirlt"; }
.text-form2 { width:50%; padding:1em 0; font-size:1em;  border:solid #ccc 1px; padding-left:.5em; font-family: "avenirlt";}
.link_extra {background-color:#4e74b9; padding:.5em; margin-top:1em;}


#map { border-top: solid 2px #087EBD;}

.caja {	border:solid #ccc 1px;  height:19px;  overflow:hidden; width:88.8%; position:relative; padding:.5em .5em; background:#fff; margin-left:1.6em; margin-top:-1px;}
select { border: none; font-size:16px; width:100%; color:#9E9E9E; background:rgba(0,0,0,0); height:19px;}
select:focus{ outline:none; color:#000;}
.caja::after{content:"\025be"; display:table-cell; text-align:center; width:35px; height:30px; background-color:#fff; position:absolute; top:0; right:0px;	pointer-events:none; cursor: pointer; padding-top:.5em; color:#000;}

.enviar { padding:0.5em 2em; cursor:pointer; color:#fff; font-size:1em; background-color:#02489B; text-align:center; }
.enviar:hover { background-color:#087EBD;  }
#cenviar { width:20%;  float:left; text-align: left;  }

.verifica { font-size:.9em; color:#22A44B; }



/*---------------------footer-----------*/



#footer { background:#58595b; width:100%; min-height:100px; clear:both; text-align:center !important;  font-size:1em;  line-height:20px; padding:0 0 2em 0; }
#footer p { text-align:left; color:#fff;} 
#footer a {color:#fff;  }
#footer a:hover {color:#37A7DF; }
#footer i {color:#37A7DF; } 
#footer span {font-size:.8em; color:#37A7DF; }


/* ---------Social Footer -----*/

.icon-button {background:#37A7DF; border-radius: 3em; cursor: pointer; display:inline-block; font-size:1em; width:3em; height:3em; line-height:3em; margin:0 5px; position: relative; text-align: center !important; 
-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;  }

/* Circle */

.icon-button span {border-radius:0; display: block; height: 0; left: 50%; margin: 0; position: absolute; top: 50%;
-webkit-transition: all 0.3s; -moz-transition: all 0.3s;  -o-transition: all 0.3s; transition: all 0.3s; width: 0; background-color:#fff;  }
	
.icon-button:hover span { width: 3em; height: 3em; border-radius: 3em; margin: -1.5em; }

/* Icons */
.icon-button i { background: none; color:#fff !important; width: 3em;  height: 3em; left: 0; line-height: 3em; position: absolute; top: 0; z-index: 10; padding-left:.5em;
-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.icon-button i:hover {  color:#02489B !important; }



/*------------------Social Menu--------*/

.social { position: fixed; right:0px; top:280px; z-index:3005;  }
.social ul {list-style:none; display: block; text-align:right; padding:0; border-radius: 3em;}
.social ul li a {display: block; border-radius: 3em; color:#fff; background:#37A7DF; padding: 18px 15px; margin: 7px; text-decoration: none; animation-direction: normal; -webkit-transition:400ms ease;-o-transition:400ms ease; transition:400ms ease;
border-bottom:solid 1px #D7D7D7;  font-size:1em;}
.social ul li a:hover {background:#9dc44c; padding: 21px 18px; font-size:large; color:#fff;}
	
	
/*Contenido movil*/


/*-------------*/


@media (max-width:600px){.hide-small{display:none!important}}
@media (max-width:992px) and (min-width:601px){.hide-medium{display:none!important}}
@media (min-width:993px){.hide-large{display:none!important}}
.animate-fading{-webkit-animation:fading 4s infinite;animation:fading 4s infinite}
@-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-opacity{-webkit-animation:opac 1.5s;animation:opac 1.5s}
@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}
@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}
@-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.animate-left{position:relative;-webkit-animation:animateleft 0.4s; animation:animateleft 0.4s}
@-webkit-keyframes animateleft{from{left:-1000px;opacity:0} to{left:0;opacity:1}}
@keyframes animateleft{from{left:-1000px;opacity:0} to{left:0;opacity:1}}

.animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s}
@-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}
@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s}
@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}.animate-input:focus{width:100%!important}

.btn-cotizar {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, #007bff, #00c6ff);
      color: white;
      font-weight: bold;
      padding: 12px 20px;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      font-size: 16px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-cotizar i {
      font-size: 18px;
    }

    .btn-cotizar:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    }
    
table {
      width: 100%;
      border-collapse: collapse;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      border-radius: 8px;
      overflow: hidden;
    }
    thead {
      background-color: #0077b6;
      color: #fff;
    }
    th, td {
      padding: 16px;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f9fbfc;
    }
    tr:hover {
      background-color: #e6f2f9;
    }
    th {
      font-size: 18px;
    }
    td {
      font-size: 16px;
      color: #333;
    }
    
    
.botonamarillo {
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:linear-gradient(to bottom, #ffff00 5%, #ffff00 100%);
	background-color:#ffff00;
	border-radius:6px;
	border:1px solid #74b807;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:12px 17px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
}
.botonamarillo:hover {
	background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	background-color:#ffff00;
}
.botonamarillo:active {
	position:relative;
	top:1px;
}

