@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:futura;
src: url("../fonts/futura-medium-bt.ttf") ;
}

/*--------*/

* {outline:0; padding:0; margin:0;}

body {outline:0; padding:0; margin:0; font-family:futura; overflow-x:hidden !important;  }
a {color:#000; text-decoration:none;}
strong {color:#000;  }
b {color:#FFB600; font-weight:bold;  }
p {padding:.5em 0; line-height:20px !important; color:#222222; text-align: justify; font-size: 1em; } 


.btn { background-color:#000; color:#FFB000; margin-right:1.3em; margin-left: 0.5em; top:0em; } 
.btn:hover { background-color:#FFDD00; color: #222222;  }
.btn:hover i { color: #222222;  }

#contenido ul li  { list-style: none; padding-left:25px; line-height:20px; text-align: justify; font-size: 1em; } 
#contenido ul li i {margin-left:-27px;}

table td {height: 30px; vertical-align: middle; font-size: 1.2em; border-bottom: 1px solid #ddd; padding: .5em;}
th {text-align: center; font-weight: bold; background: #000; color: #fff; padding: .5em; height: 20px; vertical-align: middle; font-size: 1.2em; }

i { color:#A7641A; }
p i {margin-left:-.5em;} 


#arriba { display: none; position:fixed; bottom:2em; right:100px; z-index:3000; background:#666; color:#fff; cursor: pointer; padding:10px 15px; border-radius:50px; border:none; box-shadow:0 3px 3px 0 rgba(0,0,0,0.5); line-height:18px;}
#arriba:hover {  background:#FFDD00;  }


/*--------------------- clientes banner -----*/

.columna-cliente { width:100%; min-height:50px; overflow:hidden;  margin-top:-1px; padding:1em 0 0 0; background:#fff; }
.cliente { width:160px;  margin-left:-.3em; }


/*--------*/

#contenido { width:100%; clear:both; position: relative; z-index:40; border-top:3px solid #FFB600 ;background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 49%, rgba(216,252,255,1) 100%);} 

.fotos, .titulos, .derecha, .fondo  { opacity:0; }


#videon { display:none;}
video { width:100%; }

h1 { font-size:2em;  color:#FFB600; font-weight:normal; text-align:center !important; padding:.5em 0; font-family:futura;  } 
h2 {font-size:1.4em; color:#A7641A; border-radius:1em;   padding:.5em 0; text-align: center; line-height:25px; font-family:futura; font-weight:normal;}
h3 {font-size:1.2em; color:#222222; font-weight:normal; padding:.5em 0; line-height:20px;} 
h4 {font-style:normal;  color:#FFB600; font-size:1em; text-align: center; padding:.5em 0; }
h5 {font-size: 1em;  color:#DA8824; font-weight:bold; padding:0 .8em;  }
h6 { padding:.8em 0; width:100%; text-align: center; font-size:1em; color:#222222;
background:#FFB600;}
h6 i { color:#fff !important; } h6 a:hover { background: #000; color:#fff !important;} h6 a {color:#000 !important;}

#block { width:100%; height:450px; text-align:center; overflow:hidden;}

.btn_imp {color:#fff !important; padding:.8em 1.5em .6em 1.5em; text-transform:uppercase; font-size:1em; border:solid 1px #666; background: rgb(19,5,125); background:linear-gradient(90deg, rgba(19,5,125,1) 0%, rgba(33,9,211,1) 50%, rgba(19,5,125,1) 100%); font-family:helv; } 
.btn_imp i { color:#FFF !important;}
.btn_imp:hover {  color:#fff !important; border:solid 1px #fff;} .btn_imp:hover i, .btn_head i {color: #fff !important;}

.btn-menu {color:#222222; display: block; width: 80%; background: #FFB600; border-radius: 1em; font-size: 1.2em; line-height:20px; margin: auto; margin-top: 10px; padding: 1em; }
.btn-menu i { color:#A7641A !important;} .btn-ninja:hover i { color:#222222 !important;}
.btn-menu:hover {background: #222222; color: #fff;}

.btn-menu-sub {color:#222222; display: block; width: 80%; background: #B8D8EB; border-radius: 1em; font-size: 1.2em; line-height:20px; margin: auto; margin-top: 10px; padding: 0.8em; }
.btn-menu-sub i { color:#A7641A !important;} .btn-ninja:hover i { color:#222222 !important;}
.btn-menu-sub:hover {background: #222222; color: #fff;}

.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;} .btn_head:hover { color:#000 !important; }

.btn-contacto {color:#222222; display: block; width: 350px; background: #FFB600; border-radius: 1em; font-size: 1.2em; line-height:20px; margin: auto; margin-top: 10px; padding: 1em; }
.btn-contacto i { color:#A7641A !important;} .btn-ninja:hover i { color:#222222 !important;}
.btn-contacto:hover {background: #222222; color: #fff;}


.columna { margin:0 auto; min-height:50px; }
.columna-2 {min-height:50px;  padding:1em 0; }
.columna-3 {min-height:50px;  padding:1em 0; } 
.columna-4 {min-height:50px;  padding:1em 0; }
.columna-5 {min-height:50px;  padding:1em 0; }
.columna-6 {min-height:50px;  padding:1em 0; } 

.fade {position:relative; z-index:-1; width:100%; top:0; left:0;  min-height:400px; min-width:1280px; }

.servicio { width:80%; margin-left:5%;  background:#1C3461 ; color:#fff; text-align: center; padding:3em 1em; } .servicio i { color:#fff; font-size:4em; }

#form { width:100%; margin-top:1em;  } #form ul li {padding-left:0;} form ul {padding-right:1em;}

.icono {max-width:180px; padding:.7em .6em ;  }
.icono2 {max-width:100%; padding:.7em .6em ;  }

.centrado { text-align:center; } .centrado a {padding:0 !important;}


/*-------------------------Slider---------------*/

#slider { text-align:center; background:#FFB600; height:450px; max-height:450px !important; z-index:0; }
#slider img {width:100%; min-height:450px; min-width:1400px; max-height:450px;   }

.btn-floating1, .btn-floating2  {color:#FFB600; padding:0; font-size:30px; z-index:11; cursor:pointer !important; position:absolute; bottom:.5em;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}

.btn-floating1:hover, .btn-floating2:hover {color:#222222; cursor:pointer;}
.btn-floating1 { margin-left:-50px; margin-right:50px;}

#slider h7 { color:#B8D8EB; font-weight:normal; z-index:10; position:absolute; text-align:left; }
#slider h7 b { color:#DA8824; font-family:futura;  font-weight:normal;}
#slider h7 strong {background:#FFDD00; padding:.8em 1em; color:#222222; font-size:1em;  text-shadow:none; border:solid 1px rgba(255,255,255,0); border-radius:1em;} 
#slider h7 strong:hover {border:solid 1px #fff; color:#FFF; }
#slider h7 span { color:#222222; }

#noslider { text-align:center; background:#fff; height:40px; max-height:30px !important; z-index:0;}

/*------------------Header-------------*/


#top { background:#6D6D6D; color:#fff; text-align:right; width:100%; padding:1em 2em;  z-index:2099; height:26px; font-size:1em; display:flex; justify-content: space-between; align-items:center;}  
#top i {color:#FFB600 !important;} 
#top p {margin-right:2em; }

.menu-fixed {position:fixed; z-index:1000; width:100%; top:0; }


/*-------------------------------------- WEB--*/
	

@media screen and (min-width: 600px){

#inicio { background:#000 url("../images/inicio.jpg") no-repeat top right; width:100%; min-height:800px; }	
.index {position:absolute; top:50%; height:500px; margin-top:-250px; width:800px; left:50%; margin-left:-400px;}	
	
#header { width:100%; height:auto;  background:#fff; background-size: cover;   }  
	
.logo { height:150px; margin:1em 0; } 	

#slider {margin-top:77px; position:relative; width:100%;  }
#slider h7 { z-index:22; width:100%; padding-left:3.5em; bottom:0; margin-bottom:5em; left:0;  }	
#slider h7 b { font-size:2.5em;  }	

nav { text-transform:uppercase; width:100%; }
nav ul { width:100%; text-align:center; height:auto; padding:.6em 0 ; position: absolute; z-index:20; border-top:1px solid #222222; border-bottom:1px solid #222222; background: #FFB600;}
nav li { display:inline;  }
nav a { padding:1.1em 1.1em .9em .9em; color:#222222; text-decoration:none; font-size:.75em;  margin-left:-.4em; } #top i, nav i { color:#000; font-size:1em;}
.header_nav a:hover { background:#FFDD00; } nav a:hover i { color:#222222;  } 	

.dropdown:hover .dropdown-content { display: block;}
.dropbtn { color:#fff; cursor:pointer;  }
.dropdown {  display: inline-block;  }
	
.dropbtn:hover {color: #000;}
	
.dropdown-content { display:none; position:absolute; text-align:left; z-index:50;  width:auto;  height:3.9em; margin-top:.7em; }	
.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:#fff; background:#096fd3;   text-decoration:none;  font-size:.7em; display:block;  text-align:left; border-top:0; padding:1em 6.9em 1em 1.6em; border-bottom:1px solid #E1E1E1;  }
.dropdown-content a:hover, .dropdown-content a:hover span  { color:#FFB600; border-top:0; border-left:1px solid rgba(0,0,0,0); border-right:1px solid rgba(0,0,0,0);}
.dropdown-content span {color:#FFB600;}	
	
	
.columna   {width:1020px; padding-left:16px;}
.columna-2 {width:478px; float:left; margin-right:16px;} .columna-2-full {width:713px; float:left; margin-right:16px;}
.columna-3 {width:318px; float:left; margin-right:16px; text-align: center;}
.columna-4 {width:235px; float:left; margin-right:16px;} .columna-4-full {width:800px; float:left; margin-right:16px;}
.columna-5 {width:188px; float:left; margin-right:16px;}
.columna-6 {width:151px; float:left; margin-right:16px;}

.slogan {font-size:1.5em; line-height:20px; color:#FFB600; text-align: center; font-style: italic; }
	
.formulario {max-width:500px; margin:0 auto;}	
	
#block p { padding:5em 0; max-width:800px; color:#fff; position:absolute; left:50%; margin-left:-400px; font-size:2em; line-height:45px !important; font-family:helv; }	

.active { background:#000; color:#fff; } .active i {color:#FFB600;}

.foto-m { max-width: 400px; height: auto; }	
	
.social { position:fixed; right: 0px; top:280px; z-index:3005; }	
.social ul li a {display: inline-block; background:#FFB600; }
.social ul li a:hover {background:#FFDD00; padding: 16px; font-size:large; color:#222222;}	
}

/*-------------------------------------- movil--*/ 

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

#inicio { background:#fff;  width:100%; min-height:800px; }	
.index {position:absolute; top:50%; height:550px; margin-top:-275px; width:100%; }		
	
.whats {position:fixed; top:8px; right:20px; z-index:1000; background:#659b58; border-radius:2em; padding:.7em .5em; box-shadow:3px 3px 3px rgba(0,0,0,.5); }	.whats a {color:#fff; font-size:1.3rem;}
.mess {position:fixed; top:8px; right:80px; z-index:1000; background:#669fdc; border-radius:2em; padding:.7em .5em; box-shadow:3px 3px 3px rgba(0,0,0,.5); }	.mess a {color:#fff; font-size:1.3rem;}
	
#header {width:100%; min-height:180px; border-bottom:2px solid #FFB600; background:#fff; background-size:cover; padding-top:2.5em;   }
.logo { margin-top:1em; padding:0 !important; height:160px; } 
	
.menu_movil {top:0; left:0; width:100%; height:auto; background:#FFB600; position:fixed; z-index:100000; padding:0 !important; margin:0 !important; display:block; cursor:pointer; }
.btn_menu { display:block; padding:12px; color:#fff; text-decoration:none; font-weight:normal; font-size:20px; }	
	
nav {position:absolute; z-index:3000; width:100%;}		
nav ul { width:100%; left:-100%;  border:none; position:fixed;  padding:.8em 0; top:2em;  background:#FFB600;} 
nav li {display:block; float:none; text-align:left; border-bottom:1px solid #333; width:100%; padding:.6em 0 !important ; border-right:none; }
nav a { font-size:.8em; width:100%; margin-left:1em; padding:.8em 8em .8em 0; color:#fff !important;  }
nav i { margin-left:-4px; color:#000; } 
	
.dropdown-content { display: block;}
.dropdown-content a {width:100%;}
.dropdown-content span {margin-left:24px; color:#FFB600;}
	
.mobile { position:fixed; z-index:200; width:100%; background:#000; bottom:0; border-top:1px solid #ccc;}		
.mobile a { padding:.5em 0; width:20%; float:left; margin-left:-1px; border-right:1px solid #ccc;  }

#slider {margin-top:0px; width:100%; position:relative; overflow:hidden;}	
#slider h7 {padding:1.5em 0 2em 0; font-size:1em;  margin-top:190px; text-align:center !important;  background:rgba(0,0,0,.5); width:100%; left:0; }
.btn-floating1, .btn-floating2  { left:55% !important; margin-top:3em; }
#slider h7 b { font-size:1.7em; }
#slider img { margin-left:-120px !important; width:100%;}
	
.columna { width:92%; margin-left:6%; }	
.columna-2, .columna-3, .columna-4, .columna-5, .columna-6 {width:100%; margin:0 !important; padding-right:1em; padding-left:0;  }
.columna-3 {text-align: center;}
	
.right {left:-700px; position:relative;}	
.centro {left:-400px !important; position:relative; }	
	
	
.active {color:#000!important;}	
.active2 { background:#565656;}	
	
.foto { width:80%; max-width: 360px; height: auto; padding:0 !important;border:2px solid #FFB600;  }
.promos { max-width: 360px; height: auto; }

.social {top:15px; position:fixed; z-index:3001; right:20px; }
.social ul li a { color:#222222; background:#DA8824; padding:15px 10px; text-decoration: none; border-bottom:none !important; font-size:1em !important;}	
.social ul {text-align:right; }	
.social ul li {display: inline; margin-left:-3px; }	
	
}


/*---------- transformaciones escala hover -----*/
a:hover .icono { 
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	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;
}
a:hover .icono2{ 
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	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-----------*/

.text-form { width:100%; padding:1em 0; font-size:1em;  border:solid #ccc 1px; padding-left:.5em; margin-top:-1px; font-family:avenir; }
.text-form2 { width:50%; padding:1em 0; font-size:1em;  border:solid #ccc 1px; padding-left:.5em; font-family:avenir;}
.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:50%; padding:.5em .5em; background:#fff;  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;  text-align:center; border:solid 1px #fff; background:#FFB600;  }
.enviar:hover { color: #000;  }
#cenviar { width:20%;  float:left; text-align: left;  }

.verifica { font-size:.9em; color:#22A44B; }


/*---------------------footer-----------*/



#footer { background:#6D6D6D;  width:100%; min-height:100px; clear:both; text-align:center !important;  font-size:1em;  line-height:20px;  }
#footer p { text-align:left; color:#fff;} 
#footer a {color:#FFB600;  }
#footer a:hover {color:#FFDD00; }
#footer i {color:#FFB600;} 



/* ---------Social Footer -----*/

.icon-button {background-color:#FFB600; 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;
-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:#FFDD00; }
	
.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:#000 !important;  }



/*------------------Social Menu--------*/


.social ul {list-style:none; padding:0; margin:0; text-align: right;}
.social ul li a { color:#fff; background:#FFB600; padding: 12px 10px; text-decoration: none; animation-direction: normal; -webkit-transition:400ms ease;-o-transition:400ms ease; transition:400ms ease; font-size:1em; border-bottom:solid 1px #FFF;}

	
	


/*-------------*/


@media (max-width:599px){.hide-small{display:none!important}}
@media (max-width:992px) and (min-width:601px){.hide-medium{display:none!important}}
@media (min-width:600px){.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}

.columna-1 {
}
.icon2 {
}