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



.reveal{
  position: relative;
  transform: translateY(350px);
  opacity: 0;
  transition: all 3s ease;
	width: 100%;
}

.reveal.active{
  transform: translateY(0px);
  opacity: 1;
}

/*MENU Eliminamos los margenes y paddings que agrega el navegador por defecto*/
* {
  padding: 0;
  margin: 0;
}
 
/*Agregamos margenes inferiores a los parrafos*/
p {
  margin-bottom: 20px;
}

header {
  background-color: #1f2833;  width: 100%; height: 6%; position: fixed; z-index: 100; opacity: 100%; top: 0px;
}

nav {
  float: left; 
}
 
nav ul {
  list-style: none;
  overflow: hidden; /* Limpiamos errores de float */
}
 
nav ul li {
  float: right; font-family:"Roboto", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 16px; letter-spacing : 1px;
}


/* Convertimos los elementos a en elementos bloque para manipular el padding */ 
nav ul li a {
  display: block; 
      padding: 18px;
    color: #c5c6c7;
    text-decoration: none;
}

nav ul li b {
    background-image: url("img/logo-blanco.svg");
    background-repeat: no-repeat;
    position: absolute;
    right: 0%;
    top: 2px;
    width: 24%;
    height: 100%;
}

nav ul li c {
  display: block;
  padding: 24px;
  color: #FFFFFF;
  text-decoration: none;
}
 
nav ul li:hover {
   background : -moz-linear-gradient(50% 100% 90deg,rgba(255, 255, 255, 0) 38.17%,rgba(188, 188, 188, 0.3) 100%);
  background : -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 38.17%, rgba(188, 188, 188, 0.3) 100%);
  background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0.3817,rgba(255, 255, 255, 0) ),color-stop(1,rgba(188, 188, 188, 0.3) ));
  background : -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 38.17%, rgba(188, 188, 188, 0.3) 100%);
  background : -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 38.17%, rgba(188, 188, 188, 0.3) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#BCBCBC' ,GradientType=0)";
  background : linear-gradient(0deg, rgba(255, 255, 255, 0) 38.17%, rgba(188, 188, 188, 0.3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BCBCBC',endColorstr='#FFFFFF' , GradientType=0);
  opacity: 1.8;
}

.contenido {
  padding-top: 80px;
}

.wrapper {
  width: 80%;
  margin: auto;
  overflow:hidden;
}


    	ul{
			list-style: none outside none;
		    padding-left: 0;
            margin: 0;
		}
		
        .demo .item{
			
            margin-bottom: 15%;
		}
			
		.content-slider li{
		    background: #F2F2F2;
		    text-align: justify;
			font-family: calibri;
            font-size: 14px;
			font-weight:normal;
			color: #003F5E;
			width: 4.5% !important;	
			margin-right: 10px	    
			
		}
		
		.content-slider h3 {
		    margin: 0;
		    padding: 20px 0;
			
            width: 70%;
            height: 100px;			
		}
		
		.demo{
			width: 90%;
			margin:auto;
		}




/* texto */

[class^="texto_titulo"]
{position:absolute}

.texto_titulo2{font-size: 45px;left: 0%; top: 350px; width: 40%;font-family:Quicksand, Roboto, Calibri, Helvetica, Arial, sans-serif; color: #ff9e1d; font-weight: bolder; letter-spacing: 5px; text-align: center;}

.texto_titulo3{font-size: 45px;left: 55%; top: 450px; width: 40%;font-family:Quicksand, Roboto, Calibri, Helvetica, Arial, sans-serif; color: #ff9e1d; font-weight: bolder; letter-spacing: 5px; text-align: center; line-height: 10px}


[class^="texto"]
{position:absolute}

.texto2{font-size: 21px; color: #ffca7c; text-align: justify; top: 450px; width:30%;  left: 13%; position:absolute; font-family:Quicksand, Roboto, Calibri, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 30px}

.texto3{font-size: 21px; color: #ffca7c; text-align: justify; top: 550px; width:30%;  left: 50%; position:absolute;    font-family:Quicksand, Roboto, Calibri, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 30px}




@media (max-width: 1800px)
{.texto_titulo2 {font-size: 40px;} .texto_titulo3 {font-size: 40px;} .texto2 {font-size: 26px;} .texto3 {font-size: 26px;}}
@media (max-width: 1600px)
{.texto_titulo2 {font-size: 40px;} .texto_titulo3 {font-size: 40px;} .texto2 {font-size: 26px;} .texto3 {font-size: 26px;}}
@media (max-width: 1440px)
{.texto_titulo2 {font-size: 34px;} .texto_titulo3 {font-size: 34px;} .texto2 {font-size: 21px;} .texto3 {font-size: 18px;}}
@media (max-width: 1240px)
{.texto_titulo2 {font-size: 28px;} .texto_titulo3 {font-size: 28px;} .texto2 {font-size: 16px;} .texto3 {font-size: 16px;}}
@media (max-width: 1080px)
{.texto_titulo2 {font-size: 28px;} .texto_titulo3 {font-size: 28px;}.texto2 {font-size: 14px;} .texto3 {font-size: 14px;}}
@media (max-width: 900px) 
{.texto_titulo2 {font-size: 28px; top: 650px;} .texto_titulo3 {font-size: 28px;  top: 720px !important;} .texto2 {font-size: 21px; width: 70%; top: 710px ; left: 15%;}
	.texto3 {font-size: 21px; top: 200px !important; width: 70%; left: 15%; top: 810px !important}}

@media (max-width: 600px) 
{.texto_titulo2 {font-size: 28px; top: 470px;} .texto_titulo3 {font-size: 28px; top: 490px !important;}.texto2 {font-size: 18px; width: 90%; left: 5%; top: 550px;}
	.texto3 {font-size: 18px; top: 560px !important; width: 90%; left: 5%; }}

/* primera parte */


.logo
{position: absolute; left: 5%; top: 90px; width: 800px; height: 500px; background-image: url("img/texto-top.svg"); background-repeat: no-repeat
}

@media (max-width: 1440px)
{.logo {width: 600px; height: 325px;}}

.img1
{  background-image : url(img/banner-top-alfa.jpg); background-repeat:no-repeat; position : fixed; width : 1240px; height : 1080px; top: 0px; right: 0px;
}
@media (max-width: 1800px)
{.img1 {  background-image : url(img/banner-top-2.jpg); right: 0px !important; width : 1080px; height : 941px;}}
@media (max-width: 1600px)
{.img1 {  background-image : url(img/banner-top-3.jpg); right: 0px !important; width : 959px; height : 836px;}}
@media (max-width: 1440px)
{.img1 {  background-image : url(img/banner-top-4.jpg); right: 0px !important; width : 863px; height : 752px;}}
@media (max-width: 1240px)
{.img1 {  background-image : url(img/banner-top-5.jpg); right: 0px !important; width : 744px; height : 648px;}}
@media (max-width: 1080px)
{.img1 {  background-image : url(img/banner-top-4.jpg); right: 0px !important; width : 863px; height : 752px;}}

/* segunda parte lista */

.fondo1_container1
{ background-image: url(img/fondo_container1.svg); background-position-x: left; /*background-repeat:no-repeat;*/ position: absolute; width: 100%; height: 1000px; top: 0px; left: 0%;}

.img-servicios
{ right: 10%; top: 180px; width: 40%; height: 700px; background-image: url("img/img_servicios-01.svg"); background-repeat: no-repeat; position: absolute; display: block;
  margin: auto;}


/* 
.tabla {background-image: url("img/img-lista.svg"); background-repeat: no-repeat; width: 95%; height: 930px; left: 0px; top: 100px; position: absolute;}

@media (min-width: 768px) { .tabla{ margin-bottom:32px; margin-bottom:2rem; } }  */

.container0
{background-color: #000000; top: 0px; width: 100%; height: 1080px;  left: 0px;}

.container1
{background : -moz-linear-gradient(50% 100% 90deg,rgba(31, 40, 51, 1) 40%,rgba(28, 36, 45, 0.74) 52.8%,rgba(18, 23, 30, 0.41) 69.12%,rgba(2, 3, 4, 0.04) 87.28%,rgba(0, 0, 0, 0) 89.47%);
  background : -webkit-linear-gradient(90deg, rgba(31, 40, 51, 1) 40%, rgba(28, 36, 45, 0.74) 52.8%, rgba(18, 23, 30, 0.41) 69.12%, rgba(2, 3, 4, 0.04) 87.28%, rgba(0, 0, 0, 0) 89.47%);
  background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0.4,rgba(31, 40, 51, 1) ),color-stop(0.528,rgba(28, 36, 45, 0.74) ),color-stop(0.6912,rgba(18, 23, 30, 0.41) ),color-stop(0.8728,rgba(2, 3, 4, 0.04) ),color-stop(0.8947,rgba(0, 0, 0, 0) ));
  background : -o-linear-gradient(90deg, rgba(31, 40, 51, 1) 40%, rgba(28, 36, 45, 0.74) 52.8%, rgba(18, 23, 30, 0.41) 69.12%, rgba(2, 3, 4, 0.04) 87.28%, rgba(0, 0, 0, 0) 89.47%);
  background : -ms-linear-gradient(90deg, rgba(31, 40, 51, 1) 40%, rgba(28, 36, 45, 0.74) 52.8%, rgba(18, 23, 30, 0.41) 69.12%, rgba(2, 3, 4, 0.04) 87.28%, rgba(0, 0, 0, 0) 89.47%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1F2833', endColorstr='#000000' ,GradientType=0)";
  background : linear-gradient(0deg, rgba(31, 40, 51, 1) 40%, rgba(28, 36, 45, 0.74) 52.8%, rgba(18, 23, 30, 0.41) 69.12%, rgba(2, 3, 4, 0.04) 87.28%, rgba(0, 0, 0, 0) 89.47%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#1F2833' , GradientType=0);
	
  top: 925px; width: 100%; height: 1080px; position: absolute; left: 0px;}

.container2
{background-color: #0B0C10; top: 2004px; width: 100%; height: 1080px; position: absolute; left: 0px;}

.container3
{background-color: #ffca7c; top: 3083px; width: 100%; height: 700px; position: absolute; left: 0px;}

.container4
{background-color: #000000; top: 3782px; width: 100%; height: 600px; position: absolute; left: 0px; background-image: url("img/back_mapa.svg"); background-repeat: no-repeat;}

.container5
{background-color: #040e19; top: 4382px;  width: 100%; height: 880px; position: absolute; left: 0px;}


.container6
{background-color: #1f2833; bottom: 0px; width: 100%; height: 20px; position: fixed; left: 0px;}


@media (max-width: 1080px) and (orientation: portraid)
{
.container0
{ height: 1200px; }

.container1
{ height: 1200px; }

.container2
{ height: 1200px; }

.container3
{ height: 1200px; }

.container5
{ height: 880px; }
		
}




/* botones */

.fondo1_container2
{ background-image: url(img/fondo_container2.svg); background-position-x: left; /*background-repeat:no-repeat;*/ position: absolute; width: 100%; height: 500px; top: 0px; left: 0%;}

.img-historia
{left: 0%; top: 240px; width: 50%; height: 770px; background-image: url("img/img-historia.svg"); background-repeat: no-repeat; position: absolute; display: block;
  margin: auto;}



.banner2
{right: 0%; top: 0px; width: 1920px; height: 700px; background-image: url("img/banner-2.png"); background-repeat: no-repeat; position: absolute; }

.logo2
{position: absolute; left: 0px; top: 0px; width: 100%; height: 700px; background-image: url("img/texto-bottom.svg"); background-repeat: no-repeat;}

.contacto1
{left: 30%; top: 50px; width: 40%; height: 70px; background-image: url("img/contacto/back-01.svg"); background-repeat: no-repeat; position: absolute;}

.contacto_mail
{left: 30%; top: 50px; width: 40%; height: 70px;  position: absolute;}

.contacto2
{left: 30%; top: 120px; width: 40%; height: 350px; background-image: url("img/contacto/back-02.svg"); background-repeat: no-repeat; position: absolute;}

.contacto3
{left: 30%; top: 470px; width: 40%; height: 70px; background-image: url("img/contacto/back-03.svg"); background-repeat: no-repeat; position: absolute;}

.contacto_instagram
{left: 30%; top: 470px; width: 40%; height: 70px; position: absolute;}

.contacto4
{left: 30%; top: 540px; width: 40%; height: 120px; background-image: url("img/contacto/back-04.svg"); background-repeat: no-repeat; position: absolute; }

.contacto_face
{left: 30%; top: 540px; width: 40%; height: 120px; position: absolute;}

.contacto5
{left: 0%; top: 660px; width: 100%; height: 260px; background-image: url("img/contacto/back-05.svg"); background-repeat: no-repeat; position: absolute;background-color: #000000;}

@media (max-width: 1440px)
{
.banner2
{right: 0%; top: 0px; width: 100%; height: 700px; background-image: url("img/banner-2-500px.png");}
}

.logo2
{position: absolute; left: 0px; top: 0px; width: 100%; height: 700px; background-image: url("img/texto-bottom.svg"); background-repeat: no-repeat;}



.mapa
{ top: 100px; width: 80%;  overflow:hidden; padding-bottom:23%;  position:relative; height:0; padding-left: 10%; 
}

.map iframe
{ left:0; top:0; height:100%; width:100%; position:absolute;
} 

.footer_legales
{
  background : #45A29E; opacity:1;  color: #FFFFFF; font-family : Calibri; font-size : 14px; font-weight: light;
  letter-spacing : 1px; position: absolute; left: 0; bottom: 0;  width: 100%; text-align: center;
}



/* botones */




	
@media (max-width: 900px) 
{
	header { display: none; }
	
.img-servicios
	{ right: 20%; top: 130px; width: 55%;
  }
	
.logo
{position: absolute; left: 10%; top: 0px; width: 80%; height: 500px; background-image: url("img/texto-top.svg"); background-repeat: no-repeat
}

.img1
{  background-image : url(img/banner-top-5.jpg); background-repeat:no-repeat; position : fixed; width : 744px; height : 648px; top: 420px !important; right: 0px; position: absolute;
}

.img-historia
{left: 10%; top: 50px; width: 80%; height: 770px; background-image: url("img/img-historia.svg"); background-repeat: no-repeat; position: absolute; display: block;
  margin: auto;}
	
.banner2
{background-image:  url(img/img_van.jpg); width: 100%; height: 900px; position: absolute;
	}
	
.logo2
{left: 10%; top: 42px; width: 80%; height: 700px;  background-image: url("img/texto-bottom.svg");
	}
	
	.contacto1
{left:10%; top: 50px; width: 80%; height: 70px; background-image: url("img/contacto/back-01.svg"); background-repeat: no-repeat; position: absolute;}

.contacto_mail
{left: 10%; top: 50px; width: 80%; height: 70px;  position: absolute;}

.contacto2
{left: 10%; top: 120px; width: 80%; height: 350px; background-image: url("img/contacto/back-02.svg"); background-repeat: no-repeat; position: absolute;}

.contacto3
{left: 10%; top: 470px; width: 80%; height: 70px; background-image: url("img/contacto/back-03.svg"); background-repeat: no-repeat; position: absolute;}

.contacto_instagram
{left: 10%; top: 470px; width: 80%; height: 70px; position: absolute;}

.contacto4
{left: 10%; top: 540px; width: 80%; height: 120px; background-image: url("img/contacto/back-04.svg"); background-repeat: no-repeat; position: absolute; }

.contacto_face
{left: 10%; top: 540px; width: 80%; height: 120px; position: absolute;}

.contacto5
{left: 0%; top: 660px; width: 100%; height: 300px; background-image: url("img/contacto/back-05.svg"); background-repeat: no-repeat; position: absolute;background-color: #000000;}


.mapa {
    padding-bottom: 50%;
  }

.contacto
{background:  url(img/back_contacto_chico.svg); height: 1920px; width: 100%; background-repeat: no-repeat;  display: block; margin-left: auto;  margin-right: auto;
}

.container5
{top: 4330px;  height: 900px; 
}
	}
	 
		
	
@media (max-width: 600px) 
{
.container0 {
    height: 730px;
}
	
.logo
{position: absolute; left: 5%; top: 0px; width: 90%; height: 400px; background-image: url("img/texto-top.svg"); background-repeat: no-repeat
}

.img1
{  background-image : url(img/banner-top-6.jpg); background-repeat:no-repeat; position : fixed; width : 540px; height : 470px; top: 270px !important; right: 0px; position: absolute;
}

.lista {background-image : url(img/img-lista-900-03.svg); width : 100%; height : 1025px; left: 0px; top:10px;
	}
	
.img-sistema
{right: 6%; top: 770px; width: 90%; height: 300px; background-image : url(img/img-sistemas-responsive2.svg);
	}

.container1 {
    height: 1000px; top: 650px;
}
	

	
.banner2
{rigth: 0%; top: 780px; width: 300px; height: 300px; background-image:  url(img/banner-2-300px.png);
	}
	
.container2 {
    height: 780px; top: 1650px !important; background: #000000;
}
	
.fondo1_container2 {
background-repeat: no-repeat;
}
	
.img-historia {
height: 400px;
}
	
.container3 {
    height: 500px;
    top: 2430px !important;
}
	
	.logo2 { left: 0%; top: 28px; width: 100%; height: 700px;
}
	
	.banner2 { rigth: 0%; top: 0px;  width: 100%; height: 500px;
    background-image: url(img/img_van_600px.jpg);}
	
	.container4 {
    top: 2962px;
		}

	.mapa {
    padding-bottom: 100%;
}
	
.container5 {
    height: 600px; top: 3500px;
}
	
.contacto1
{left:5%; top: 50px; width: 90%; height: 70px; background-image: url("img/contacto/back-01.svg"); background-repeat: no-repeat; position: absolute;}

.contacto_mail
{left: 5%; top: 50px; width: 90%; height: 70px;  position: absolute;}

.contacto2
{left: 5%; top: 120px; width: 90%; height: 350px; background-image: url("img/contacto/back-02.svg"); background-repeat: no-repeat; position: absolute;}

.contacto3
{left: 5%; top: 470px; width: 90%; height: 70px; background-image: url("img/contacto/back-03.svg"); background-repeat: no-repeat; position: absolute;}

.contacto_instagram
{left: 5%; top: 470px; width: 90%; height: 70px; position: absolute;}

.contacto4
{left: 5%; top: 540px; width: 90%; height: 120px; background-image: url("img/contacto/back-04.svg"); background-repeat: no-repeat; position: absolute; }

.contacto_face
{left: 5%; top: 540px; width: 90%; height: 120px; position: absolute;}

.contacto5
{left: 0%; top: 660px; width: 100%; height: 300px; background-image: url("img/contacto/back-05.svg"); background-repeat: no-repeat; position: absolute;background-color: #000000;}
	
}