@charset "UTF-8";
/*----------------------variables-------------*/
:root {
	--colorbkheader01:#FBFBFB;
	--colorbkheader02:red;
	--colornav-desktop:#FFFFFF;
	--colorhoveractive:#7ba5f0;
	--colornav-l2:#474747;
    --colornav-cel-l1:#6e6e6e;

    --dropdown-color:#37ACFF;

	--colorbkprefooter:#FBFBFB;
	--colorbkfooter:#FAFAFA;
	--colorbkcopyright:#37ACFF;
	
	--colorbkcard01:#F2F2F2;
	--colorbordercard01:#000000;
	--colorbkcardhover01:#E6E6E6;
	
	--colorbkcard02:#F1F5FD;
	--colorbordercard02:#000000;
	--colorbkcardhover02:#CDDDF9;
	
	--colorbksection01:#6495ED;
	--colortextsection01:#FFFFFF;

    --menufont:'Roboto', sans-serif;
    --colorfontmenu: #1F1F1F;
}

/**{
    margin:0; padding:0;
    box-sizing: border-box;
    font-family: 'Roboto Condensed', sans-serif;
     text-transform: capitalize; 
    text-decoration: none;
    image {
        border:none;
    }
}*/

/* font-family: 'Oswald', sans-serif; */

h1, h2, h3, h4, h5, h6, strong, b {
    font-weight:bolder;
  }

em {
    font-style: italic;
  }

body{
    min-height: 100vh;
    /* background:url(../images/FONDO01.jpg) no-repeat; */
    background-size: cover;
    background-position: center;
}

/*------------------ HEADER & MENU -----------------*/
/*estilo desde style-menu.css*/

/*---------------CONTENIDO-------------------------------*/
.sangria-lista{
    margin-left: 2em;
}
/*----------------GRID CONTENIDO-------------------------*/

.ultra-grid-2cols-80-20X100{
	display: grid;
	/*gap: 1rem;*/
	grid-template-columns: 80% 20%;
	/*padding: 4rem;*/
}
.main-grid-1col-ceropadding{
	/*background-color: var(--colorbksection01);
	 color: var(--colortextsection01); */
	display: grid;
	padding: 0rem;
}
.quehacemos-hero-01 {
    font-size: 1.5rem;
	top: 34%;
	left: 5%;
	/* margin-left:-240px;
	margin-top:-20px; */
	position: absolute;
    width:35%;
	z-index:20;
}
.comoteayudamos-hero-02 {
	top: 48%;
	left: 5%;
	/* margin-left:-240px;
	margin-top:-20px; */
	position: absolute;
    width:35%;
	z-index:20;
}
.ctabtn-hero{
    top: 60%;
	left: 5%;
	/* margin-left:-240px;
	margin-top:-20px; */
	position: absolute;
    width:35%;
	z-index:20;
}
.btn{
    display: inline-block;
    padding: .5rem 1.3rem;
    font-size: 1.1rem;
    border: 3px solid #fff;
    border-radius: 1rem;
    line-height: 1;
    /* margin: 0 .2rem; */
    transition: .3s;
    /* text-transform: uppercase; */
}

.btn.solid, .btn.transparent:hover{
    background-color: #fbfbfb;
    border-color: #37acff;
    color: #37acff;
}

.btn.transparent, .btn.solid:hover{
    background-color: #37ACFF;
    border-color: #ffffff;
    color: #fbfbfb;
}
.main-grid-1col-padding-1rem{
/*	background-color: #fff;*/
	display: grid;
	padding: 1rem;
}
.main-grid-titulo-partners{
	color: #37acff;
	display: grid;
	padding: 2rem 0rem 0rem 2rem;
}
.main-grid-titulo-productos{
	color: #999999;
	display: grid;
	padding: 2rem 0rem 0rem 2rem;
}
.main-grid-2cols{
	/* background-color: #e3a02b; */
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
	padding: 2rem 8rem;
}
.main-grid-2cols-home{
	background-color: #e3a02b;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
	padding: 2rem;
}
.main-grid-2cols-02{
	background-color: #e6aa42;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
	padding: 2rem 8rem;
}
.main-grid-2cols-03{
	background-color: #51b7ff;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
	padding: 2rem 8rem;
}
.main-grid-2cols-04{
	background-color: #29c341;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
	padding: 2rem 8rem;
}
.main-grid-3cols{
/*	background-color: #fff;*/
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, 1fr);
	padding: 2rem;
}
.main-grid-4cols{
/*	align-items: center;
	background-color: #fff;*/
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
	padding: 4rem;
}
.main-grid-3cols-works{
	display: grid;
/*	gap: 0.1rem;*/
	grid-template-columns: repeat(3, 1fr);
	padding: 4rem;
}

/*----------------- TARJETAS CONTENIDO ----------*/
.tarjeta-servicios{
	/* background-color: #eeeeee; */
	border-color: #d5d5d5;
	border-radius: 10px;
	border-style: solid;
	border-width: 2px;
	/* font-size: 1.2rem; */
	padding:1.5rem;
	text-align: inherit;
}
.tarjeta-servicios:hover{
	background-color: #fbfbfb;
	box-shadow: 5px 5px 10px #666666;
	-webkit-box-shadow: 5px 5px 10px #666666;
/*	color:#fff;*/
	cursor:default;
}
.tarjeta-quien-eres{
    color:#fbfbfb;
	font-size: 1.2rem;
	padding:1.5rem;
	text-align:inherit;
}
.tarjeta-partners{
	/* background-color: #eeeeee; */
	border-color: #84ccff;
	border-radius: 10px;
	border-style: solid;
	border-width: 2px;
	/* font-size: 1.2rem; */
	padding:1.5rem;
	text-align: inherit;
}
.tarjeta-partners:hover{
	background-color: #e8f5ff;
	box-shadow: 5px 5px 10px #666666;
	-webkit-box-shadow: 5px 5px 10px #666666;
/*	color:#fff;*/
	cursor:default;
}
.tarjeta01-sin-borde{
	font-size: 1.2rem;
	padding:1.5rem;
	text-align: inherit;
}
.tarjeta01-contactenos{
	font-size: 1.2rem;
    background-color:#fbfbfb;
	border-color: #3e3d3d;
	border-radius: 10px;
	border-style: solid;
	border-width: 2px;
	padding:1.5rem;
	text-align: inherit;
}
.tarjeta01-curvaesq-borde{
	background-color: var(--colorbkcard01);
	border-color: var(--colorbordercard01);
	border-radius: 10px;
	border-style: solid;
	border-width: 2px;
	/* font-size: 1.2rem; */
	padding:1.5rem;
	text-align: inherit;
}
.tarjeta01-curvaesq-borde:hover{
/*	background-color: var(--colorbkcardhover01);*/
	box-shadow: 5px 5px 10px #666666;
	-webkit-box-shadow: 5px 5px 10px #666666;
/*	color:#fff;*/
	cursor:default;
}

.tarjeta02-curvaesq-borde{
	background-color: var(--colorbkcard02);
	border-color: var(--colorbordercard02);
	border-radius: 20px;
	border-style: solid;
	border-width: 2px;
	font-size: 1.2rem;
	padding:1.5rem;
	text-align: justify;
}
.tarjeta02-curvaesq-borde:hover{
	background-color: var(--colorbkcardhover02);
	box-shadow: 5px 5px 10px #666666;
	-webkit-box-shadow: 5px 5px 10px #666666;
/*	color:#fff;*/
	cursor:default;
}

/*-------------- TABLAS -----------------------*/
.tabla-responsive{
    overflow-x:auto;
}
#tablakolor {
    /* font-family: Arial, Helvetica, sans-serif; */
    background-color: #efefff;
    border-collapse: collapse;
    width: 80%;
  }
  
  #tablakolor td, #tablakolor th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #tablakolor tr:nth-child(even){background-color: #ffffff;}
  
  #tablakolor tr:hover {background-color: #ddd;}
  
  #tablakolor th {
    padding-top: 12px;
    padding-bottom: 12px;
    /* text-align: left; */
    background-color: #0000b3;
    color: white;
  }
  
/* table, th, td {
    background-color:#FFFFFF;
    border: solid #333333;
    border-width: thin;
    padding: 0.5rem;
    border-collapse: collapse;
  }
 */
/* --------------- FOOTER ---------------------*/

.pre-footer {
	width:100%;
	height:auto;	
	margin:auto;
	padding-bottom:10px;
	padding-top:10px;
	background-color:var(--colorbkprefooter);
	text-align:center;
}

footer {
	background:var(--colorbkfooter);
	background:-webkit-linear-gradient(bottom, #4A4A4A, #222);
	background: -moz-linear-gradient(bottom, #4A4A4A, #222);
	background: -ms-linear-gradient(bottom, #4A4A4A, #222);
	background: -o-linear-gradient(bottom, #4A4A4A, #222);
	background: linear-gradient(to top, #4A4A4A, #222);
	font-family:'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
/*	text-align:center;*/
}

footer a {
	color: #fff;
	text-decoration:none;
}
footer a:hover {
	color:var(--colorbkheader01);
/*	text-decoration:underline;*/
}
.footer-grid-3cols{
/*	background-color: #ccff00;*/
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, 1fr);
	padding: 2rem 0rem 3rem 0rem;
}
.footer-grid-4cols{
/*	background-color: #ccff00;*/
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
	padding: 2rem 0rem 3rem 0rem;
}
.tarjeta-footer{
/*	background-color:#CD6C2B;*/
	color:#fff;
	padding:1rem;
}

.footer-copyright {
	background: var(--colorbkcopyright);
/*
    background: -webkit-linear-gradient(left, #083d42, #3c878e);
    background: -moz-linear-gradient(left, #083d42, #3c878e);
    background: -ms-linear-gradient(left, #083d42, #3c878e);
    background: -o-linear-gradient(left, #083d42, #3c878e);
    background: linear-gradient(to right, #083d42, #3c878e);
*/
	color:#ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size:12px;
	font-weight: 400;
	height:40px;
	padding: 1rem;
	width:auto;
/*	grid-column:span 4;*/
}

/*-----TEXTOS Y PARRAFOS--------*/

h1 {
    font-size: 1.8rem;
    font-style: normal;
}
h2 {
    font-size: 1.6rem;
    font-style: normal;
}
h3 {
    font-size: 1.2rem;
    font-style: normal;
}
.texto-destacado1 {
    font-size: 1.6rem;
    font-style:normal;
    font-weight: bold;
}
.texto-destacado2 {
    font-size: 1.3rem;
    font-style:normal;
    font-weight: bold;
}
.texto-destacado3 {
    font-size: 1.1rem;
    font-style:normal;
    font-weight: bold;
}
.texto-destacado-hero{
    font-size: 1.7rem;
    font-weight: bold;
}
.parrafo-justificado{
    text-align: justify;
}
.color-blanco{
    color: #ffffff;
}

/*-----CONTACTENOS-----*/
.contactenos-titulo {
    color:#ffffff;
    font-size: 1.5rem;
	top: 38%;
	left: 5%;
	position: absolute;
    width:35%;
	z-index:20;
}

.contact-form input, .contact-form textarea{
    background:rgba(255, 255, 255,0.8);
    border:0; font-size:16px;
    color:#141414;
    font-family:'Open Sans', sans-serif;
    padding:5px 8px;
    resize:none
}

.contact-form input{
    border-width:1px;
    border-color:#cccccc;
    border-radius:5px;
    border-style:solid;
    height:2rem;
    width:95%;
}

.contact-form textarea{
    border-width:1px;
    border-color:#cccccc;
    border-radius:5px;
    border-style:solid;
    height:6rem;
    width:95%;
}

.btnSubmit{
    background-color: #37acff;
    border:0;
    color:#ffffff;
    cursor:default;
    font-size:16px;
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
    height:2rem;
    padding:0 20px 0 20px;
    text-transform:none;
    width:90%;
}

.btnReset{
    background-color: #00000d;
    border:0;
    color:#fff;
    cursor:default;
    font-size:16px;
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
    height:31px;
    padding:0 20px 0 20px;
    text-transform:none;
    width:auto;
}

.texto-enviado-OK {
    color: #37acff;
    font-size: 1.1rem;
    font-style:normal;
    font-weight: bold;
}
.texto-enviado-ERROR {
    color: #c33d38;
    font-size: 1.1rem;
    font-style:normal;
    font-weight: bold;
}
    
/*----- IMAGENES VIDEOS  -----*/

.img-curvaesq-borde{
    border: solid;
    border-color: #fff;
    border-width:1px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
     box-shadow: 1px 1px 2px #666666;
    -webkit-box-shadow: 1px 1px 2px #666666;
    -moz-box-shadow: 1px 1px 2px #666666;
/*	height:100%;*/
    width:95%;
}

.img-content {
    /*	border: solid;
    border-color: #fff;
    border-width:0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    height:100%;*/
    width:100%;
}

.img-precios {
    border: solid;
    border-color: #fff;
    border-width:0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
     box-shadow: 5px 5px 10px #666666;
    -webkit-box-shadow: 5px 5px 10px #666666;
    -moz-box-shadow: 5px 5px 10px #666666;
    width:100%;
    max-width: 700px;
}

.img-firma {
/*     border: solid;
    border-color: #fff;
    border-width:3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; */
    width:90%;
    max-width: 430px;
}

.img-banner {
    border: solid;
    border-color: #fff;
    border-width:3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:90%;
    max-width: 900px;
}

.img-banner:hover {
     box-shadow: 5px 5px 10px #111111;
    -webkit-box-shadow: 5px 5px 10px #111111;
    -moz-box-shadow: 5px 5px 10px #111111;
}

.video-responsive {
    /*	max-width:560px;*/
        min-height:315px;
        height:100%;
        width:100%;
    }



/*---------------------------RESPONSIVE ----------------------------*/

/*----------------GRID CONTENIDO-------------------------*/

@media(max-width:920px){


    /*----------------GRID CONTENIDO-------------------------*/

	.ultra-grid-2cols-80-20X100{
		grid-template-columns: auto;
	}
	.main-grid-1col{
		padding: 1rem;
	}
    .quehacemos-hero-01{
        background-color: #fbfbfb;
        color:#1F1F1F;
        font-size: 1.3rem;
        top: 0%;
        left: 0%;
        padding: 1rem;
        position:relative;
        width:100%;
    }
    .comoteayudamos-hero-02{
        background-color: #fbfbfb;
        color: #1F1F1F;
        top: 0%;
        left: 0%;
        padding: 1rem;
        position:relative;
        width:100%;
    }
    .ctabtn-hero{
        background-color: #fbfbfb;
        top: 0%;
        left: 0%;
        padding: 0rem 0rem 1rem 3rem;
        position: relative;
        width:100%;
    }
    .main-grid-2cols{
		grid-template-columns:auto;
		padding: 0.5rem;
	}
	.main-grid-2cols-home{
		grid-template-columns:auto;
		padding: 0.5rem;
	}
    .main-grid-2cols-02{
		grid-template-columns:auto;
		padding: 0.5rem;
	}
    .main-grid-2cols-03{
		grid-template-columns:auto;
		padding: 0.5rem;
	}
    .main-grid-2cols-04{
		grid-template-columns:auto;
		padding: 0.5rem;
	}
	.main-grid-3cols{
		grid-template-columns:auto;
		padding: 1rem;
	}
	.main-grid-4cols{
/*		grid-template-columns:auto;*/
        grid-template-columns: repeat(2, 1fr);
		padding: 1rem;
	}
	.main-grid-3cols-works{
		grid-template-columns:auto;
		padding: 1rem;
	}

    /*----------------- TARJETAS CONTENIDO ----------*/
	
	.tarjeta01-curvaesq-inicio{
        width: 100%;
	}
	.tarjeta01-curvaesq-borde{
        padding: 1rem;
	}
	.img-90x100-width {
        width: 90%;
	}

    /*---------------- TABLAS ---------------------*/
    #tablakolor{
        width: 100%;
    }

    /* --------------- FOOTER ---------------------*/
    
    .footer-grid-4cols{
        grid-template-columns:auto;
    }
    .footer-copyright{
        grid-column: auto;
    }

    /*-----TEXTOS Y PARRAFOS--------*/

    h1 {
        font-size: 1.6rem;
    }
	h2 {
		font-size: 1.4rem;
	}
	h3 {
		font-size: 1rem;
	}

    /*-----CONTACTENOS-----*/
    .contactenos-titulo{
        background-color: #fbfbfb;
        color:#1F1F1F;
        font-size: 1.3rem;
        top: 0%;
        left: 0%;
        padding: 1rem;
        position:relative;
        width:100%;
    }

    /*----- IMAGENES VIDEOS RESPONSIVE  -----*/

    .img-90x100-width {
        width: 90%;
        }

    .img-content{
        width: 100%;
    }
}