@charset "utf-8";
/* CSS Document */

/*  
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  letter-spacing: 3px;
  color: #102b7a;
}


section{
  
  
	display: block;
  justify-content: center;
  align-items: center;
}

section:nth-child(1){
  color: #fff;
}

section:nth-child(2){
  color: #E8E8E8;
  background: #fff;
}

section:nth-child(3){
  color: #fff;
}

section:nth-child(4){
  color: #0c324c;
  background: #fff;
}

section .container{
  margin: 0px;
	top:5px;
}

section h1{
  font-size: 60px;
}

section h2{
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}

section .cards{
  display: flex;
}

section .cards .text-card{
   background : #FFFFFF;
  background : rgba(255, 255, 255, .7);
  border-style : Solid;
  border-color : #fff;
  border-color : rgba(255, 255, 255, .9);
  border-width : 1px;
  margin: 20px;
  padding: 20px;
  font-size: 26px; width: 50%;
}

section .cards .text-card h3{
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

*/

.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: #102b7a;  width: 100%; height: 6%; position: fixed; z-index: 100; opacity: 100%; top: 0px;
}

nav {
  float: right; 
}
 
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: #FFFFFF;
    text-decoration: none;
}

nav ul li b {
    background-image: url("img/logo-blanco.svg");
    background-repeat: no-repeat;
    position: absolute;
    left: 0%;
    top: 2px;
    width: 14%;
    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^="text"]{
  font-family:Montserrat, sans-serif;  letter-spacing: 1px; color: #102b7a; font-size: 26px; width: 50%; text-align: justify; position: absolute;
}

.text1
{font-size: 42px; top: 40px; width: 80%; left: 10%; text-align: center; }

.text2
{font-size: 28px; top: 160px !important; width: 40%; left: 15%;  }

.text3
{font-size: 28px; top: 165px !important; width: 23%; left: 10%; text-align: center; }

.text4
{font-size: 28px; top: 165px !important; width: 24%; left: 38%; text-align: center; }

.text5
{font-size: 28px; top: 165px !important; width: 23%; left: 67%; text-align: center; }

@media (max-width: 1800px)
{.text1 {font-size: 40px;} .text2 {font-size: 26px;} .text3 {font-size: 26px;} .text4 {font-size: 26px;} .text5 {font-size: 26px;}}
@media (max-width: 1600px)
{.text1 {font-size: 40px;} .text2 {font-size: 26px;} .text3 {font-size: 26px;} .text4 {font-size: 26px;} .text5 {font-size: 26px;}}
@media (max-width: 1440px)
{.text1 {font-size: 34px;} .text2 {font-size: 21px;} .text3 {font-size: 18px;} .text4 {font-size: 18px;} .text5 {font-size: 18px;}}
@media (max-width: 1240px)
{.text1 {font-size: 28px;} .text2 {font-size: 16px;} .text3 {font-size: 16px;} .text4 {font-size: 16px;} .text5 {font-size: 16px;}}
@media (max-width: 1080px)
{.text1 {font-size: 28px;} .text2 {font-size: 14px;} .text3 {font-size: 14px;} .text4 {font-size: 14px;} .text5 {font-size: 14px;}}
@media (max-width: 900px) and (orientation: portrait)
{text1 {font-size: 28px;} .text2 {font-size: 21px; width: 70%; left: 15%;}
	.text3 {font-size: 18px; top: 200px !important; width: 90%; left: 5%; }
	.text4 {font-size: 18px; top: 300px !important; width: 90%; left: 5%; }
	.text5 {font-size: 18px; top: 400px !important; width: 90%; left: 5%; }}

@media (max-width: 600px) and (orientation: portrait)
{text1 {font-size: 28px;} .text1 {font-size: 24px;}.text2 {font-size: 14px; width: 90%; left: 5%;}
	.text3 {font-size: 18px; top: 200px !important; width: 90%; left: 5%; }
	.text4 {font-size: 18px; top: 300px !important; width: 90%; left: 5%; }
	.text5 {font-size: 18px; top: 400px !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 */
.canvas
{}
@media (max-width: 1600px) { .canvas{ width:1690px !important; height:980px !important;} }

.lista
{background-image : url(img/img-lista-01.png); right: 0px; top: 70px; width : 1781px; height : 1014px; position: absolute; background-repeat: no-repeat;}
@media (max-width: 1800px)
{.lista {background-image : url(img/img-lista-02.png); width : 1601px; height : 910px;}}
@media (max-width: 1600px)
{.lista {background-image : url(img/img-lista-03.png); width : 1441px; height : 819px;}}
@media (max-width: 1440px)
{.lista {background-image : url(img/img-lista-04.png); width : 1241px; height : 705px;}}
@media (max-width: 1240px)
{.lista {background-image : url(img/img-lista-05.png); width : 1081px; height : 614px;}}
@media (max-width: 1080px)
{.lista {background-image : url(img/img-lista-1024.svg); width : 100%; height : 1025px; left: 0px; top:10px;}}

[class^="btn_lista"]{
  background-image: url("img/btn_lista.svg"); position: absolute; width: 170px; height: 32px; background-repeat: no-repeat; top: 980px;
}

.btn_lista1
{  right: 733px; }

.btn_lista2
{ right: 551px; }

.btn_lista3
{ right: 369px; }

.btn_lista4
{ right: 187px;}

.btn_lista5
{ right: 2px;}

@media (max-width: 1800px)
{
	
 [class^="btn_lista"]{
  top: 890px; width: 150px; height: 36px; background-repeat: no-repeat;
}
	
.btn_lista1
{  right: 663px;  }

.btn_lista2
{  right: 500px; }

.btn_lista3
{  right: 334px; }

.btn_lista4
{  right: 167px;}

.btn_lista5
{  right: 2px;}}

@media (max-width: 1600px)
{
	
 [class^="btn_lista"]{
  top: 810px; width: 136px; height: 28px; background-repeat: no-repeat;
}
	
.btn_lista1
{  right: 598px;  }

.btn_lista2
{  right: 450px; }

.btn_lista3
{  right: 300px; }

.btn_lista4
{  right: 151px;}

.btn_lista5
{  right: 2px;}}

@media (max-width: 1440px)
{
	
 [class^="btn_lista"]{
  top: 707px; width: 116px; height: 24px; background-repeat: no-repeat;
}
	
.btn_lista1
{  right: 513px;  }

.btn_lista2
{  right: 386px; }

.btn_lista3
{  right: 260px; }

.btn_lista4
{  right: 132px;}

.btn_lista5
{  right: 2px;}}

@media (max-width: 1240px)
{
	
 [class^="btn_lista"]{
  top: 623px; width: 105px; height: 21px; background-repeat: no-repeat;
}
	
.btn_lista1
{  right: 445px;  }

.btn_lista2
{  right: 333px; }

.btn_lista3
{  right: 224px; }

.btn_lista4
{  right: 113px;}

.btn_lista5
{  right: 2px;}}

@media (max-width: 1080px)
{
	
	header { display: none; }
	
 [class^="btn_lista"]{
   width: 215px; height: 41px; background-repeat: no-repeat; left: 8px;
}
	
.btn_lista1
{ top: 283px;   }

.btn_lista2
{  top: 443px; }

.btn_lista3
{  top: 611px; }

.btn_lista4
{  top: 777px;}

.btn_lista5
{  top: 948px;}}

@media (max-width: 880px) 
{
	
	header { display: none; }
	
 [class^="btn_lista"]{
   width: 100%; height: 300px; background-repeat: no-repeat; left: 0px ;
}
	
.btn_lista1
{ top: 650px;  background-image : url(img/img-lista-900-04.svg);  }

.btn_lista2
{  top: 880px; background-image : url(img/img-lista-900-05.svg);}

.btn_lista3
{  top: 1110px; background-image : url(img/img-lista-900-06.svg);}

.btn_lista4
{  top: 1350px; background-image : url(img/img-lista-900-07.svg); height: 400px;}

.btn_lista5
{  top: 1750px; background-image : url(img/img-lista-900-08.svg); height: 400px;}}

@media (max-width: 600px)
{
	
	header { display: none; }
	
 [class^="btn_lista"]{
   width: 100%; height: 150px; background-repeat: no-repeat; left: 0px ;
}
	
.btn_lista1
{ top: 470px;  background-image : url(img/img-lista-900-04.svg);  }

.btn_lista2
{  top: 620px; background-image : url(img/img-lista-900-05.svg);}

.btn_lista3
{  top: 770px; background-image : url(img/img-lista-900-06.svg);}

.btn_lista4
{  top: 927px; background-image : url(img/img-lista-900-07.svg); height: 270px;}

.btn_lista5
{  top: 1187px; background-image : url(img/img-lista-900-08.svg); height: 180px;}}

/* 
.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: #FFFFFF; top: 0px; width: 100%; height: 1080px;  left: 0px;}

.container1
{background : -moz-linear-gradient(50% 100% 90deg,rgba(255, 255, 255, 1) 95%,rgba(255, 255, 255, 0) 98%);
  background : -webkit-linear-gradient(90deg, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 0) 98%);
  background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0.95,rgba(255, 255, 255, 1) ),color-stop(0.98,rgba(255, 255, 255, 0) ));
  background : -o-linear-gradient(90deg, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 0) 98%);
  background : -ms-linear-gradient(90deg, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 0) 98%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF' ,GradientType=0)";
  background : linear-gradient(0deg, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 0) 98%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#FFFFFF' , GradientType=0); top: 925px; width: 100%; height: 1080px; position: absolute; left: 0px;}

.container2
{background-color: #F3F3F3; top: 2004px; width: 100%; height: 1080px; position: absolute; left: 0px;}

.container3
{background-color: #FFFFFF; top: 3083px; width: 100%; height: 1080px; position: absolute; left: 0px;}

.container4
{background-color: #FFFFFF; top: 4052px; width: 100%; height: 16px; position: absolute; left: 0px;}

.container5
{background-color: #FFFFFF; top: 5159px; width: 100%; height: 100px; position: absolute; left: 0px;}

@media (max-width: 1080px) and (orientation: portraid)
{
.container0
{ height: 1200px; }

.container1
{ height: 1200px; }

.container2
{ height: 1200px; }

.container3
{ height: 1200px; }

.container4
{ height: 1200px; }
	
}

@media (max-width: 880px) 
{
.container1
{ height: 2000px; }
	
.container2
{ height: 1200px; top: 3004px !important;}

.container3
{ height: 1000px; top: 4083px !important;}

.container4
{ height: 20px; top: 5162px !important;}

	.container5
{ height: 20px; top: 6160px !important; }
		
}

@media (max-width: 800px) 
{
.container0
{ height: 1100px; }

.container1
{ height: 800px; }

.container2
{ height: 1200px; top: 2304px !important;}

.container3
{ height: 570px; top: 3383px !important; }

.container4
{ height: 20px; top: 3930px !important;}

.container5
{ height: 20px; top: 5230px !important; }
	
}

/* botones */

.img-sistema
{right: 10%; top: 180px; width: 30%; height: 800px; background-image: url("img/img-sistemas.svg"); background-repeat: no-repeat; position: absolute; display: block;
  margin: auto;}

.banner_soporte
{left: 0%; top: -90px; width: 100%; height: 90px; background-image: url("img/img_soporte.svg"); background-repeat: no-repeat; position: absolute}

.banner2
{right: 0%; top: 230px; width: 666px; height: 962px; background-image: url("img/banner-2.png"); background-repeat: no-repeat; position: absolute; }

@media (max-width: 1440px)
{
.banner2
{right: 0%; top: 250px; width: 500px; height: 722px; background-image: url("img/banner-2-500px.png");}
}

.logo2
{position: absolute; left: 10%; top: 400px; width: 800px; height: 500px; background-image: url("img/texto-bottom.svg"); background-repeat: no-repeat;}

.contacto
{left: 0%; top: 0px; width: 100%; height: 307.813px; background-image: url("img/back_contacto-01.svg"); background-repeat: no-repeat; position: absolute;}
.btn-contacto1
{left: 0%; top: 303px; width: 100%; height: 170.902px; background-image: url("img/back_contacto-02.svg"); background-repeat: no-repeat; position: absolute;}
.btn-contacto2
{left: 0%; top: 470px; width: 100%; height: 164.126px; background-image: url("img/back_contacto-03.svg"); background-repeat: no-repeat; position: absolute;}
.contacto2
{left: 0%; top: 630px; width: 100%; height: 388.034px; background-image: url("img/back_contacto-04.svg"); background-repeat: no-repeat; position: absolute;}


.footer_legales
{
  background : #ff7900; 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 */




/* CSS */
.button-1 {
  appearance: button;
  background : -moz-linear-gradient(50% 0% -90deg,rgba(255, 156, 0, 1) 0%,rgba(255, 121, 0, 1) 65.59%,rgba(236, 91, 30, 1) 93.01%,rgba(255, 121, 0, 1) 100%);
  background : -webkit-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(255, 156, 0, 1) ),color-stop(0.6559,rgba(255, 121, 0, 1) ),color-stop(0.9301,rgba(236, 91, 30, 1) ),color-stop(1,rgba(255, 121, 0, 1) ));
  background : -o-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  background : -ms-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9C00', endColorstr='#FF7900' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  border-radius : 20px;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9C00',endColorstr='#FF7900' , GradientType=0);
	
  border: solid transparent; border-radius: 16px; border-width: 0 0 4px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; display: inline-block;
	
  font-family: din-round,sans-serif; font-size: 32px; font-weight: 100;  text-align: center; text-transform: uppercase;
	
  letter-spacing: 3px; line-height: 50px; margin: 0; outline: none; overflow: visible; padding: 13px 16px;
 
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 40%;
	top: 660px;
	left:5%;
	position: absolute;
}

@media (max-width: 1440px)
{.button-1 {width: 30%; top: 500px; font-size: 21px;}}

@media (max-width: 1080px) 
{.button-1 {width: 40%; top: 500px; font-size: 21px; left:7%}}

@media (max-width: 600px) and (orientation: portrait)
{.button-1 {width: 90%; height: 80px; top: 600px; font-size: 18px; left:5%}}

.button-1:after {
  background-clip: padding-box;
  background : -moz-linear-gradient(50% 0% -90deg,rgba(255, 156, 0, 1) 0%,rgba(255, 121, 0, 1) 65.59%,rgba(236, 91, 30, 1) 93.01%,rgba(255, 121, 0, 1) 100%);
  background : -webkit-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(255, 156, 0, 1) ),color-stop(0.6559,rgba(255, 121, 0, 1) ),color-stop(0.9301,rgba(236, 91, 30, 1) ),color-stop(1,rgba(255, 121, 0, 1) ));
  background : -o-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  background : -ms-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9C00', endColorstr='#FF7900' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  border-radius : 20px;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9C00',endColorstr='#FF7900' , GradientType=0);
	
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.button-1:main,
.button-1:focus {
  user-select: auto;
}

.button-1:hover:not(:disabled) {
  filter: brightness(1.1);
}

.button-1:disabled {
  cursor: auto;
}

.button-2 {
  background : -moz-linear-gradient(50% 0% -90deg,rgba(21, 114, 255, 1) 0%,rgba(0, 86, 233, 1) 65.59%,rgba(0, 68, 127, 1) 93.01%,rgba(0, 76, 148, 1) 100%);
  background : -webkit-linear-gradient(-90deg, rgba(21, 114, 255, 1) 0%, rgba(0, 86, 233, 1) 65.59%, rgba(0, 68, 127, 1) 93.01%, rgba(0, 76, 148, 1) 100%);
  background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(21, 114, 255, 1) ),color-stop(0.6559,rgba(0, 86, 233, 1) ),color-stop(0.9301,rgba(0, 68, 127, 1) ),color-stop(1,rgba(0, 76, 148, 1) ));
  background : -o-linear-gradient(-90deg, rgba(21, 114, 255, 1) 0%, rgba(0, 86, 233, 1) 65.59%, rgba(0, 68, 127, 1) 93.01%, rgba(0, 76, 148, 1) 100%);
  background : -ms-linear-gradient(-90deg, rgba(21, 114, 255, 1) 0%, rgba(0, 86, 233, 1) 65.59%, rgba(0, 68, 127, 1) 93.01%, rgba(0, 76, 148, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1572FF', endColorstr='#004C94' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(21, 114, 255, 1) 0%, rgba(0, 86, 233, 1) 65.59%, rgba(0, 68, 127, 1) 93.01%, rgba(0, 76, 148, 1) 100%);
  border-radius : 20px;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1572FF',endColorstr='#004C94' , GradientType=0);
	
  border: solid transparent; border-radius: 16px; border-width: 0 0 4px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; display: inline-block;
	
  font-family: din-round,sans-serif; font-size: 32px; font-weight: 100;  text-align: center; text-transform: uppercase;
	
  letter-spacing: 3px; line-height: 50px; margin: 0; outline: none; overflow: visible; padding: 13px 16px;
 
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 40%;
	top: 760px;
	left: 5%;
	position: absolute;
}

@media (max-width: 1440px)
{.button-2 {width: 30%; top: 600px; font-size: 21px;}}

@media (max-width: 1080px) 
{.button-2 {width: 40%; top: 610px; font-size: 21px; left:7%}}

@media (max-width: 600px) and (orientation: portrait)
{.button-2 {width: 90%; height: 80px; top: 700px; font-size: 18px; left:5%}}

.button-2:after {
  background : -moz-linear-gradient(50% 0% -90deg,rgba(21, 114, 255, 1) 0%,rgba(0, 86, 233, 1) 65.59%,rgba(0, 68, 127, 1) 93.01%,rgba(0, 76, 148, 1) 100%);
  background : -webkit-linear-gradient(-90deg, rgba(21, 114, 255, 1) 0%, rgba(0, 86, 233, 1) 65.59%, rgba(0, 68, 127, 1) 93.01%, rgba(0, 76, 148, 1) 100%);
  background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(21, 114, 255, 1) ),color-stop(0.6559,rgba(0, 86, 233, 1) ),color-stop(0.9301,rgba(0, 68, 127, 1) ),color-stop(1,rgba(0, 76, 148, 1) ));
  background : -o-linear-gradient(-90deg, rgba(21, 114, 255, 1) 0%, rgba(0, 86, 233, 1) 65.59%, rgba(0, 68, 127, 1) 93.01%, rgba(0, 76, 148, 1) 100%);
  background : -ms-linear-gradient(-90deg, rgba(21, 114, 255, 1) 0%, rgba(0, 86, 233, 1) 65.59%, rgba(0, 68, 127, 1) 93.01%, rgba(0, 76, 148, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1572FF', endColorstr='#004C94' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(21, 114, 255, 1) 0%, rgba(0, 86, 233, 1) 65.59%, rgba(0, 68, 127, 1) 93.01%, rgba(0, 76, 148, 1) 100%);
  border-radius : 20px;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1572FF',endColorstr='#004C94' , GradientType=0);
	
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.button-2:main,
.button-2:focus {
  user-select: auto;
}

.button-2:hover:not(:disabled) {
  filter: brightness(1.1);
}

.button-1:disabled {
  cursor: auto;
}



.button-3 {
  appearance: button;
  background : -moz-linear-gradient(50% 0% -90deg,rgba(255, 156, 0, 1) 0%,rgba(255, 121, 0, 1) 65.59%,rgba(236, 91, 30, 1) 93.01%,rgba(255, 121, 0, 1) 100%);
  background : -webkit-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(255, 156, 0, 1) ),color-stop(0.6559,rgba(255, 121, 0, 1) ),color-stop(0.9301,rgba(236, 91, 30, 1) ),color-stop(1,rgba(255, 121, 0, 1) ));
  background : -o-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  background : -ms-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9C00', endColorstr='#FF7900' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  border-radius : 20px;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9C00',endColorstr='#FF7900' , GradientType=0);
	
  border: solid transparent;  border-width: 0 0 4px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; display: inline-block;
	
  font-family: din-round,sans-serif; font-size: 32px; font-weight: 100;  text-align: center; text-transform: uppercase;
	
  letter-spacing: 3px; line-height: 50px; margin: 0; outline: none; overflow: visible; padding: 13px 16px;
 
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 51%;
	top: 80%;
	right:0px;
	position: absolute;
}

.button-3:after {
  background-clip: padding-box;
  background : -moz-linear-gradient(50% 0% -90deg,rgba(255, 156, 0, 1) 0%,rgba(255, 121, 0, 1) 65.59%,rgba(236, 91, 30, 1) 93.01%,rgba(255, 121, 0, 1) 100%);
  background : -webkit-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(255, 156, 0, 1) ),color-stop(0.6559,rgba(255, 121, 0, 1) ),color-stop(0.9301,rgba(236, 91, 30, 1) ),color-stop(1,rgba(255, 121, 0, 1) ));
  background : -o-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  background : -ms-linear-gradient(-90deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9C00', endColorstr='#FF7900' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(255, 156, 0, 1) 0%, rgba(255, 121, 0, 1) 65.59%, rgba(236, 91, 30, 1) 93.01%, rgba(255, 121, 0, 1) 100%);
  border-radius : 20px;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9C00',endColorstr='#FF7900' , GradientType=0);
	
  border: solid transparent;
  
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.button-3:main,
.button-3:focus {
  user-select: auto;
}

.button-3:hover:not(:disabled) {
  filter: brightness(1.1);
}

.button-3:disabled {
  cursor: auto;
}


	
@media (max-width: 900px) and (orientation: portrait)
{
	
.logo
{position: absolute; left: 10%; top: 50px; 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: 340px; right: 0px; position: absolute;
}

.lista {background-image : url(img/img-lista-1024.svg); width : 100%; height : 1025px; left: 0px; top:10px;
	}
	
.img-sistema
{right: 6%; top: 770px; width: 90%; height: 280px; background-image : url(img/img-sistemas-responsive.svg);
	}
	
.banner2
{background-image:  url(img/img-sistemas-responsive1.svg);
	}
	
.logo2
{left: 10%; top: 500px; width: 80%; height: 500px;
	}
}

	
@media (max-width: 880px) and (orientation: portrait)
{
	

.lista {background-image : url(img/img-lista-900-03.svg); width : 100%; height : 1025px; left: 0px; top:10px;
	}
		
}
	 
		
	
@media (max-width: 600px) and (orientation: portrait)
{
	
.logo
{position: absolute; left: 5%; top: 370px; width: 90%; height: 220px; 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: 0px; 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);
	}
		
	
.logo2
{left: 10%; top: 500px; width: 80%; height: 500px;
	}
	
.banner2
{rigth: 0%; top: 780px; width: 300px; height: 300px; background-image:  url(img/banner-2-300px.png);
	}
	
.contacto
{left: 0%; top: 0px; width: 100%; height: 600px; background-image: url("img/back_contacto-01-responsive.svg"); background-repeat: no-repeat; position: absolute;}
.btn-contacto1
{left: 0%; top: 150px; width: 100%; height: 130px; background-image: url("img/back_contacto-02-responsive.svg"); background-repeat: no-repeat; position: absolute;}
.btn-contacto2
{left: 0%; top: 250px; width: 100%; height: 130px; background-image: url("img/back_contacto-03-responsive.svg"); background-repeat: no-repeat; position: absolute;}
.contacto2
{left: 0%; top: 400px; width: 100%; height: 250px; background-image: url("img/back_contacto-04-responsive.svg"); background-repeat: no-repeat; position: absolute;}
	
}
	 
		