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

@font-face {
    font-family: "Social Media Circled";
    src: url(../fonts/SocialMediaCircled.eot); /* IE */
    src: local("Social Media Circled"), url(../fonts/SocialMediaCircled.ttf) format("truetype"), url(../fonts/SocialMediaCircled.woff) format("woff"), url(../fonts/SocialMediaCircled.otf) format("opentype"); /* resto de navegadores */
}

/*barras*/
::-webkit-scrollbar-track {background-color:#606060} /*color del fondo*/
::-webkit-scrollbar {width:10px; height:10px}
::-webkit-scrollbar-thumb {border-radius: 10px; background-color:rgba(0,0,69,1)} /*color del scroll*/

/*contenido*/
.cabecera {height:auto; background-color:#606060; padding-top:5px}
.cabeceratxt {height:auto; background-color:#003; padding-top:10px; font-family: 'Anton', sans-serif; font-size:300%; color:#FFF; padding-bottom:10px}
.menufondo {background-color:#FFF}
.hrcab{height:10px}
.border {border-radius:10%}
.barrapie {background-color:#606060; z-index:20; width:100%; height:55px; position:fixed; bottom:0}
.hr2 {height:20px; clear:both; border:none}
.fondo {background-color:rgba(254,254,254,0.8); border-radius:10px; height:auto; margin-bottom:2%}
.hidden {opacity:0.01}
.esp {margin-left:5%; padding-bottom:5%}
.whats {font-family: "Social Media Circled"; display:inline; font-size:100%}
.logo-fortino img {margin-left:auto; margin-right:auto; width:10%; display:block}
.final-txt {display:none; visibility:hidden}


/*menú*/
nav {width:100%; text-align:center; background-color:#606060; font-size:100%}
ul li {list-style:none; display:inline-block; font-family: 'Anton', sans-serif;}
ul li a {height:15px; display:block; text-decoration:none; padding-top:8px; padding-bottom:15px; color:#FFF}
ul li a:hover {color:#FFFFFF}
ul li ul {display:none}
ul li:hover ul {display:block; width:80px; position:fixed; padding-top:65px; position:absolute}
ul li ul li a {color:#000; font-family: 'Anton', sans-serif}
ul li ul li a:hover {color:#FFF; transition:all ease-in 200ms; font-family: 'Anton', sans-serif;}

/*HOVER menu*/
.hvr-shutter-out-horizontal {
  width:100%;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  background:#606060;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  width:100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000099;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
  color:#FFF;
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*botón up*/
.ir-arriba {
	font-family: 'Anton', sans-serif;
	text-align:center;
	display:none;
	padding:30px;
	color:#000099;
	cursor:pointer;
	position: fixed;
	bottom:60px;
	right:20px;
}
.ir-arriba:hover {color:#606060}

/*Formulario*/
.form {font-family: 'Anton', sans-serif; color:#000099; background-color:#FFF; padding-top:30px; padding-bottom:30px}
input, textarea, select, button {border-radius:5px; border:none; margin:0;
  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
          box-sizing: border-box}
textarea {vertical-align: top;}
button {background-color:#000099; color:#FFF; width:20%}
button:hover {background-color:#606060; color:#FFF; cursor:pointer}
.text-form {text-align:right}
#movil {display:none}
#in {background-color:#BCB9B9; border-radius:10px; height:20px; width:100%}
#in2 {background-color:#BCB9B9; border-radius:10px; height:20px; width:100%}
#in3 {background-color:#BCB9B9; border-radius:10px; width:100%}
#enviar { background-color:#000; color:#FFFFFF; margin-left:230px; width:100px; height:30px; font-size:14px; border-radius:10px}

/*botón flotante*/

.whatsapp-button {display:block; position:fixed; bottom:10px; right:0px; float:right; z-index:100}
.whatsapp-button img {width:70%}
.whatsapp-button:hover {right:20px; transition:all ease-in 200ms}
.cotiza {font-family: 'Anton', sans-serif; color:#000099; margin-left:15%}





.invisible {width:100%; opacity:0}
.scaled {transform: scale(0.6)}
.scaled2 {transform: scale(0.8)}
.piesocial img:hover {width:100%; transition:all ease 100ms; filter: opacity(.5)}
.hr2 {height:20px; clear:both; border:none}
.caja {width:100%; overflow:hidden}
.desktop {display:none; visibility:hidden}
.none {display:none}




.divScroll {overflow:scroll; overflow-x:hidden; width:100%; font-size:130%}
.scroll {height:83%; margin-bottom:5px}


.cont img{
-webkit-transition:all .5s ease; /* Safari y Chrome */
-moz-transition:all .5s ease; /* Firefox */
-o-transition:all .5s ease; /* IE 9 */
-ms-transition:all .5s ease; /* Opera */
width:100%;
}
.cont:hover img {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
.cont {
overflow:hidden;
}

#center {alignment-adjust:central}
hr {height: 10px; clear: both; border: none}




/*hover imagenes*/
.contenedor-img {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
}
.contenedor-img .mascara,.contenedor-img .contenido {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
display: block;
position: relative;

}
.contenedor-img h2 { /*título*/
font-family: 'Berkshire Swash', cursive;
color: #fff;
text-align: center;
position: relative;
font-size: 100%;
padding: 10px;
background: #333;
margin: 20px 0 0 0
}
.contenedor-img p { /*descripción*/
position: relative;
color: #fff;
padding: 10px 20px 10px;
text-align: center
}

.ejemplo-1 img {
transition: all 0.2s linear;
}
.ejemplo-1 .mascara { /*fondo texto*/
opacity: 0;
background-color: rgba(32,178,170, 0.7);
transition: all 0.3s ease-in-out;
}
.ejemplo-1 h2 {
transform: translateX(-200px);/*Desplazamos a la izquierda*/
opacity: 0;
transition: all 0.7s ease-in-out;
}
.ejemplo-1 p {
transform: translateX(200px);/*Desplazamos a la derecha*/
opacity: 0;
transition: all 0.4s linear;
}

.ejemplo-1:hover img {
transform: scale(1.1);/*Damos un ligero zoom a la imagen*/
}
.ejemplo-1:hover .mascara {
opacity: 1;
}
.ejemplo-1:hover h2,
.ejemplo-1:hover p,
.ejemplo-1:hover a.link {
opacity: 1;
transform: translateX(0px);/*Regresamos a las posiciones originales*/
}
.ejemplo-1:hover p {
transition-delay: 0.1s;
}
.ejemplo-1:hover a.link {
transition-delay: 0.2s; /*Aplicamos un pequeño retardo para que se muestre al final*/
transform: translateY(0px);
}



.contenedor {float:left}
.right { padding-right:3px}
.left { margin-left:3%}
.label {vertical-align:top}


/*BOTON SUBIR*/

/*botón up*/
.boton-subir{
  z-index: 999999999;
}
/*evento hover*/
.boton-subir:hover{
  box-shadow:   0px 2px 10px 0px rgba(255, 255, 255, 0.75);
}
/*estilos para el tag i*/
.boton-subir i{
  color: #fff;
  font-size: 1.5em;
  padding: 10px 10px 10px 7px;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
}

@media all and (max-width:768px) {

.cabecera {height:110px; background-color:#606060}
.barrapie {background-color:#606060; width:100%; height:200px; position:relative; bottom:0; margin-top:2px}
.form-movil {text-align:center}
.button {margin-left:40%}
.social {position:static; margin-top:0}
.esp {margin-left:1%; width:90%; margin-left:auto; margin-right:auto}
.logo-fortino img {margin-left:auto; margin-right:auto; width:40%; display:block}
.ir-arriba {display:none; visibility:hidden}
.final-txt { visibility:visible; display:block; font-family: 'Anton', sans-serif; font-size:180%; color:#000099; line-height:5px; margin-left:auto; margin-right:auto; text-align:center}
.cel {display:none}



.hr2 {height:10px; clear:both; border:none}
.scaled2 {transform: scale(1)}
.desktop {display:block; visibility:visible}
.text-form {text-align:center}
.input-form {margin:0 auto}

.whatsapp-button {display:block; position:fixed; bottom:100px; right:0px; float:right}
.whatsapp-button img {width:15%}
.whatsapp-button:hover {left:20px; transition:all ease-in 200ms}
.cotiza {font-family: 'Anton', sans-serif; color:#000000; margin-left:3%; text-shadow:0 0 2px #FFFFFF}


@media all and (max-width:680px) {
.cabecera {height:90px; background-color:#606060; position:relative; bottom:0}
.barrapie {background-color:#606060; width:100%; height:140px; position:relative; bottom:0}
.desktop {display:block; visibility:visible}
.whatsapp-button {display:block; position:fixed; bottom:100px; right:0px; float:right}
.whatsapp-button img {width:15%}
.whatsapp-button:hover {left:20px; transition:all ease-in 200ms}
.cotiza {font-family: 'Anton', sans-serif; color:#000000; margin-left:3%; text-shadow:0 0 2px #FFFFFF}	

}

@media all and (max-width:580px) {
.cabecera {height:70px; background-color:#606060; position:relative; bottom:0}	
.barrapie {background-color:#606060; width:100%; height:120px; position:relative; bottom:0}
.desktop {display:block; visibility:visible}
.final-txt { visibility:visible; display:block; font-family: 'Anton', sans-serif; font-size:150%; color:#000099; line-height:5px; margin-left:auto; margin-right:auto}

.whatsapp-button {display:block; position:fixed; bottom:80px; right:0px; float:right}
.whatsapp-button img {width:15%}
.whatsapp-button:hover {left:20px; transition:all ease-in 200ms}
.cotiza {font-family: 'Anton', sans-serif; color:#000000; margin-left:3%; text-shadow:0 0 2px #FFFFFF}
}

@media all and (max-width:480px) {
.cabecera {height:70px; background-color:#606060; position:relative; bottom:0}	
.barrapie {background-color:#606060; width:100%; height:100px; position:relative; bottom:0}
.desktop {display:block; visibility:visible}

.whatsapp-button {display:block; position:fixed; bottom:60px; right:0; float:right}
.whatsapp-button img {width:15%}
.whatsapp-button:hover {left:20px; transition:all ease-in 200ms}
.cotiza {font-family: 'Anton', sans-serif; color:#000000; margin-left:3%; text-shadow:0 0 2px #FFFFFF}
}

@media all and (max-width:360px) {
.whatsapp-button {display:block; position:fixed; bottom:60px; right:0px; float:right}
.whatsapp-button img {width:15%}
.whatsapp-button:hover {left:20px; transition:all ease-in 200ms}
.cotiza {font-family: 'Anton', sans-serif; color:#000000; margin-left:3%; text-shadow:0 0 2px #FFFFFF}

	
}