html {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	scroll-behavior: smooth;
	-webkit-transition-timing-function: ease;
	     -o-transition-timing-function: ease;
	        transition-timing-function: ease;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
}

a, button {
	text-decoration: none;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
	padding: 0px;
	/*border: none;
	background: none;*/
}

img {
	max-width: 100%;
}

span {
	display:inline-block;
}

p {
  font-family: 'Lato', sans-serif;
	font-size: 19px;
  line-height: 22px;
  font-weight: 400;
	text-align: center;
}

textarea {
  font-family: 'Lato', sans-serif;
	font-size: 19px;
  line-height: 22px;
  font-weight: 400;
}


h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
	font-size: 60px;
  text-align: center;
}

h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 45px;
    text-align: center;
}

::placeholder{
    color: #ffffff;
    font-size: 19px;
}

section {
	overflow: hidden;
}

/* ***** ***** ***** ***** ***** */
/* H E A D E R */
/* ***** ***** ***** ***** ***** */
.bg-inverse{
    background: #213a85 !important;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}

.grid-header{
    background: none;
    margin:0;
    height: 12%;
    width: 100%;
    z-index: 1001;
    position: fixed;
    display: grid;
        grid-template-areas:
        "logo null1 boton1 boton2 boton3 icon1 icon2  icon3";
        grid-template-columns: 334px 1fr 160px 160px 160px 50px 50px 50px;
    padding: 0% 5% 0% 0%;
}

.logo{
    position: relative;
    padding: 10%;
    top: 20%;
    grid-area: logo;
    background: url("../images/logo-ch.png") no-repeat center/contain;
}

.boton1{
    position: relative;
    grid-area: boton1;
    align-self: center;
    justify-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.boton2{
    position: relative;
    grid-area: boton2;
    align-self: center;
    justify-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.boton3{
    position: relative;
    grid-area: boton3;
    align-self: center;
    justify-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
		margin-left: -4px;
}

.icon1{
    position: relative;
    grid-area: icon1;
    align-self: center;
    justify-self: center;
}

.icon1 img{
    width: 25px;
}

.icon2{
    position: relative;
    grid-area: icon2;
    align-self: center;
    justify-self: center;
}

.icon2 img{
    width: 25px;
}

.icon3{
    position: relative;
    grid-area: icon3;
    align-self: center;
    justify-self: center;
}

.icon3img{
    width: 25px;
}

.btn1{
    width: 150px;
    height: 40px;
    background: none;
    color: #ffffff;
    font-size: 19px;
    border-width: 0;
    text-align: center;
}

.btn2{
    width: 150px;
    height: 40px;
    background: linear-gradient(to right, #fec92d , #e39800);
    color: #ffffff;
    font-size: 19px;
    border-width: 0;
    position: relative;
    left: 50%;
    margin-left: -77.5px;
    border: none;
    cursor: pointer;
}

.btn2:hover{
    background: linear-gradient(to right, #e39800 , #fec92d);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
/* ***** ***** ***** ***** ***** */
/* H E A D E R */
/* ***** ***** ***** ***** ***** */


/* ***** ***** ***** ***** ***** */
/* S L I D E R S  P R I N C I P A L */
/* ***** ***** ***** ***** ***** */
.sliders2{
    position: relative;
    display: grid;
        grid-template-areas:
        "sl-slide2";
        grid-template-columns: 100%;
}

.dots2{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-self: flex-start;
    margin-left: 2%;
}

.sl-slide2{
    position: relative;
    grid-area: sl-slide2;
}

.mySlides2{
    display: none;
}

.dot2 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #565656;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
		margin: 5px;
}

.active2, .dot2:hover {
    background-color: #ffffff;
}

.fade2 {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade2 {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade2 {
    from {opacity: .4}
    to {opacity: 1}
}.fade2 {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade2 {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade2 {
    from {opacity: .4}
    to {opacity: 1}
}
/* ***** ***** ***** ***** ***** */
/* S L I D E R S  P R I N C I P A L */
/* ***** ***** ***** ***** ***** */

/* SLIDE 1 */
.mysl-slide12{
    position: relative;
    display: grid;
        grid-template-areas:
        "slide1";
        grid-template-columns: 100%;
    background: url("../images/bg0.png") no-repeat center/cover;
}

.slide1{
    position: relative;
    grid-area: slide1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15% 0% 15% 0%;
}

.slide1 h1{
    color: #ffffff;
    z-index: 10;
}

.slide1 p{
    color: #ffffff;
    z-index: 10;
}

.slide1 img{
    position: absolute;
    width: 300px;
    right: 18%;
}
/* SLIDE 1 */

/* SLIDE 2 */
.mysl-slide22{
    position: relative;
    display: grid;
        grid-template-areas:
        "slide2";
        grid-template-columns: 100%;
    background: url("../images/bg2.png") no-repeat center/cover;
}

.slide2{
    position: relative;
    grid-area: slide2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15% 0% 15% 0%;
}

.slide2 h1{
    color: #ffffff;
    z-index: 10;
    margin-top: 7%;
}

.slide2 p{
    color: #ffffff;
    z-index: 10;
}

.slide2 img{
    position: absolute;
    width: 300px;
    top: 14%;
}
/* SLIDE 2 */

/* SLIDE 3 */
.mysl-slide32{
    position: relative;
    display: grid;
        grid-template-areas:
        "slide3";
        grid-template-columns: 100%;
    background: url("../images/bg1.png") no-repeat center/cover;
}

.slide3{
    position: relative;
    grid-area: slide3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15% 0% 15% 0%;
}

.slide3 h1{
    color: #ffffff;
    z-index: 10;
    margin-top: 7%;
}

.slide3 p{
    color: #ffffff;
    z-index: 10;
}

.slide3 img{
    position: absolute;
    width: 300px;
    top: 18%;
}
/* SLIDE 3 */


/* ***** ***** ***** ***** ***** */
/* N O S O T R O S */
/* ***** ***** ***** ***** ***** */
.nosotros{
    position: relative;
    display: grid;
        grid-template-areas:
        "nos-fab nos-var nos-rep";
        grid-template-columns: 1fr 1fr 1fr;
    background: #f3f3f3;
    padding: 4% 5%;
}

.nos-fab{
    position: relative;
    grid-area: nos-fab;
    background: #031526;
    margin-right: 10%;
    padding: 0% 0% 35% 0%;
}

.nos-fab img{
    width: 50%;
    position: absolute;
    right: -3%;
    bottom: 0%;
}

.nos-var{
    position: relative;
    grid-area: nos-var;
    background-image: linear-gradient(to right, #031526 , #351816, #AF0111);
    margin-right: 5%;
    margin-left: 5%;
    padding: 0% 0% 35% 0%;
}

.img-man{
    width: 32%;
    position: absolute;
    right: -6%;
    bottom: 0%;
}

.img-caja{
    width: 52%;
    position: absolute;
    left: 50%;
    margin-left: -26%;
    top: 50%;
    margin-top: -30%;
}

.nos-rep{
    position: relative;
    grid-area: nos-rep;
    background-image: linear-gradient(to right, #031526 , #182b63);
    margin-left: 10%;
    padding: 0% 0% 35% 0%;
}

.nos-rep img{
    width: 38%;
    position: absolute;
    right: -10%;
    bottom: 0%;
}

.nos-p{
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding-top: 2%;
}

.nos-h2{
    color: #ffffff;
    text-align: center;
    margin: 0;
}

.linea2{
    width: 80%;
    color: #565656;
    border-style: solid;
    border-bottom-width: 2px;
    border-top-width: 0px;
    left: 50%;
    position: relative;
    margin-left: -40%;
    margin-top: 2%;
}
/* ***** ***** ***** ***** ***** */
/* N O S O T R O S */
/* ***** ***** ***** ***** ***** */


/* ***** ***** ***** ***** ***** */
/* S E G U R I D A D  Y  S E R V */
/* ***** ***** ***** ***** ***** */
.seguridad{
    position: relative;
    display: grid;
        grid-template-areas:
        "seg-title"
        "seg-baner";
        grid-template-columns: 100%;
    background: #ffffff;
}

.seg-title{
    position: relative;
    grid-area: seg-title;
    padding: 3% 0% 0% 0%;
}

.seg-title p{
    text-align: center;
    margin:0;
    color: #182b63;
}

.seg-title h2{
    text-align: center;
    margin:0;
    color: #182b63;

}

.seg-baner{
    position: relative;
    grid-area: seg-baner;
    background-image: linear-gradient(to right, #182b63 , #213a85);
    margin: 3% 5%;
}

.seg-ban-int{
    position: relative;
    display: grid;
        grid-template-areas:
        "seg-text seg-logo";
        grid-template-columns: 50% 50%;
}

.seg-text{
    position: relative;
    grid-area: seg-text;
    padding: 5% 25% 10% 25%;
    display: flex;
    justify-content: center;
}

.seg-text p{
    text-align: justify;
    color: #ffffff;
}

.seg-text img{
    position: absolute;
    width: 22%;
    bottom: 3%;
}

.seg-logo{
    position: relative;
    grid-area: seg-logo;
    display: flex;
    justify-content: center;
    align-items: center;
}

.seg-logo img{
    width: 80%;
}

.seg-sec{
    position: absolute;
    top:0;
    right: 5%;
    z-index: 100;
    background: #031526;
    padding: 0% 3% 0% 3%;
}

.seg-sec p{
    color: #ffffff;
    margin: 10px;
}
/* ***** ***** ***** ***** ***** */
/* S E G U R I D A D  Y  S E R V */
/* ***** ***** ***** ***** ***** */


/* ***** ***** ***** ***** ***** */
/* M I S I O N */
/* ***** ***** ***** ***** ***** */
.sliders{
    position: relative;
    display: grid;
        grid-template-areas:
        "sl-slide";
        grid-template-columns: 100%;
}

.dots{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-self: flex-start;
    margin-left: 2%;
}

.sl-slide{
    position: relative;
    grid-area: sl-slide;
}

.mySlides{
    display: none;
}

.mysl-slide1{
    position: relative;
    display: grid;
        grid-template-areas:
        "mis-img mis-text";
        grid-template-columns: 50% 50%;
    background: url("../images/mis.png") no-repeat center/cover;
    width: 100%;
    padding: 10% 0% 10% 0%;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #565656;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
		margin: 5px;
}

.active, .dot:hover {
    background-color: #ffffff;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.mis-img{
    position: relative;
    grid-area: mis-img;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mis-text{
    position: relative;
    grid-area: mis-text;
    padding: 0% 25% 0% 25%;
}

.mis-text p{
    color: #ffffff;
    text-align: justify;
}

.mis-text h2{
    color: #ffffff;
}

/* ***** ***** ***** ***** ***** */
/* M I S I O N */
/* ***** ***** ***** ***** ***** */


/* ***** ***** ***** ***** ***** */
/* V I S I O N */
/* ***** ***** ***** ***** ***** */
.mysl-slide2{
    position: relative;
    display: grid;
        grid-template-areas:
        "vis-img vis-text";
        grid-template-columns: 50% 50%;
    background: url("../images/vis.png") no-repeat center/cover;
    width: 100%;
    padding: 10% 0% 10% 0%;
}

.vis-img{
    position: relative;
    grid-area: vis-img;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vis-text{
    position: relative;
    grid-area: vis-text;
    padding: 0% 25% 0% 25%;
}

.vis-text p{
    color: #ffffff;
    text-align: justify;
}

.vis-text h2{
    color: #ffffff;
}
/* ***** ***** ***** ***** ***** */
/* V I S I O N */
/* ***** ***** ***** ***** ***** */


/* ***** ***** ***** ***** ***** */
/* V A L O R E S */
/* ***** ***** ***** ***** ***** */
.mysl-slide3{
    position: relative;
    display: grid;
        grid-template-areas:
        "val-img val-text";
        grid-template-columns: 50% 50%;
    background: url("../images/val.png") no-repeat center/cover;
    width: 100%;
    padding: 10% 0% 10% 0%;
}

.val-img{
    position: relative;
    grid-area: val-img;
    display: flex;
    justify-content: center;
    align-items: center;
}

.val-text{
    position: relative;
    grid-area: val-text;
    padding: 0% 25% 0% 25%;
}

.val-text p{
    color: #ffffff;
    text-align: justify;
}

.val-text h2{
    color: #ffffff;
}
/* ***** ***** ***** ***** ***** */
/* V A L O R E S */
/* ***** ***** ***** ***** ***** */


/* ***** ***** ***** ***** ***** */
/* P R O D U C T O S */
/* ***** ***** ***** ***** ***** */
.productos{
    position: relative;
    display: grid;
        grid-template-areas:
        "pro-title pro-title pro-title"
        "pro-fuer pro-segu pro-arch"
        "pro-espe pro-espe pro-espe";
        grid-template-columns: 1fr 1fr 1fr;
    padding: 3% 5% 1% 5%;
    background: #FBFBFB;
}

.pro-title{
    position: relative;
    grid-area: pro-title;
    padding: 0% 0% 1% 0%;
}

.pro-title p, .pro-title h2{
    text-align: center;
    margin: 5px;
}

.pro-fuer{
    position: relative;
    grid-area: pro-fuer;
    background: #ffffff;
    margin: 0% 5% 0% 0%
}

.caja-fuerte{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    position: relative;
    display: grid;
        grid-template-areas:
        "caja-title"
        "caja-div"
        "caja-desc"
        "caja-img"
        "caja-tabla"
        "caja-boton";
}

.caja-title{
    position: relative;
    grid-area: caja-title;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.caja-div{
    position: relative;
    grid-area: caja-div;
}

.caja-desc{
    position: relative;
    grid-area: caja-desc;
    text-align: center;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0% 2% 0% 2%;
}

.caja-desc p{
    text-align: justify;
}

.caja-img{
    position: relative;
    grid-area: caja-img;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caja-tabla{
    position: relative;
    grid-area: caja-tabla;
    height: 350px;
}

.caja-tab{
    width: 100%;
    text-align: center;
    padding: 0px 5px;
    font-size: 16px;
}

.backColorCelda{
    background: #E7E7E7;
}

.caja-boton{
    position: relative;
    grid-area: caja-boton;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3% 0% 3% 0%;
}

.pro-fuer img{
    max-width: 100%;
    width: 330px;
    height: 330px;
}

.botonProd{
    z-index: 1000;
    width: 150px;
    height: 40px;
    background: none;
    color: #e39800;
    font-size: 19px;
    border: #e39800 2px solid;
    cursor: pointer;
}

.botonProd:hover{
    color: #ffffff;
    border-color: #e39800;
    background: #e39800;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}

.linea{
    width: 80%;
    color: #000;
    border-style: solid;
    border-bottom-width: 1px;
    border-top-width: 0px;
    left: 50%;
    position: relative;
    margin-left: -40%;
}

.pro-segu{
    position: relative;
    grid-area: pro-segu;
    background: #ffffff;
    margin: 0% 5% 0% 5%
}

.pro-segu img{
    max-width: 100%;
    width: 330px;
    height: 330px;
}

.pro-arch{
    position: relative;
    grid-area: pro-arch;
    background: #ffffff;
    margin: 0% 0% 0% 5%
}

.pro-arch img{
    max-width: 100%;
    width: 330px;
    height: 330px;
}

.pro-espe{
    position: relative;
    grid-area: pro-espe;
}

.caja-espe{
    margin: 3% 0% 3% 0%;
    padding: 2% 0% 2% 0%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}

.caja-espe img{
    position: absolute;
    width: 300px;
}

.caja-espe p{
    margin: 5px 0px 2% 0px;
}

.caja-espe h2{
    margin-top: 3.5%;
    margin-bottom: 0%;
}

.pro-sec{
    position: absolute;
    top:0;
    left: 5%;
    z-index: 100;
    background-image: linear-gradient(to right, #182b63 , #213a85);
    padding: 0% 3% 0% 3%;
}

.pro-sec p{
 color: #ffffff;
 margin: 10px;
}
/* ***** ***** ***** ***** ***** */
/* P R O D U C T O S */
/* ***** ***** ***** ***** ***** */


/* ***** ***** ***** ***** ***** */
/* C O N T A C T O */
/* ***** ***** ***** ***** ***** */
.contacto{
    position: relative;
    display: grid;
        grid-template-areas:
        "cont-title cont-title cont-title"
        "cont-form cont-form cont-form"
        "cont-tel cont-email cont-whats";
        grid-template-columns: 1fr 1fr 1fr;
    padding: 2% 25% 2% 25%;
    background: #031526;
}

.contacto p{
    color: #ffffff;
    text-align: center;
}

.contacto h2{
    color: #ffffff;
}

.cont-title{
    position: relative;
    grid-area: cont-title;
    margin-bottom: 5%;
}

.cont-title img {
    position: absolute;
    left: 31%;
    width: 130px;
}

.cont-form{
    position: relative;
    grid-area: cont-form;
}

.cont-form2{
    position: relative;
    display: grid;
        grid-template-areas:
        "form-nombre form-tel"
        "form-mens form-mens"
        "form-env form-env";
        grid-template-columns: 1fr 1fr;
    padding: 0% 0% 0% 0%;
}

.form-nombre{
    position: relative;
    grid-area: form-nombre;
    border: none;
    color: #ffffff;
    font-size: 19px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ffffff;
    background: none;
    margin-right: 6%;
}

.form-tel{
    position: relative;
    grid-area: form-tel;
    border: none;
    color: #ffffff;
    font-size: 19px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ffffff;
    background: none;
    margin-left: 6%;
}

.form-mens{
    position: relative;
    grid-area: form-mens;
    margin-top: 3%;
    height: 75px;
    max-width: 100%;
    border: none;
    color: #ffffff;
    font-size: 19px;
    border-bottom: 1px solid #ffffff;
    background: none;
}

.form-env{
    position: relative;
    grid-area: form-env;
    margin-bottom: 5%;
}

.form-env p{
    font-size: 14px;
}

.btn-cont{
    color: #ffffff;
    font-size: 19px;
    width: 150px;
    padding: 10px;
    position: relative;
    left: 50%;
    margin-left: -77.5px;
    background: #e39800;
    border: none;
    cursor: pointer;
}

.cont-tel{
    position: relative;
    grid-area: cont-tel;
}

.cont-email{
    position: relative;
    grid-area: cont-email;
}

.cont-whats{
    position: relative;
    grid-area: cont-whats;
}
/* ***** ***** ***** ***** ***** */
/* C O N T A C T O */
/* ***** ***** ***** ***** ***** */


/* ***** ***** ***** ***** ***** */
/* U B I C A C I O N */
/* ***** ***** ***** ***** ***** */
.ubicacion{
    position: relative;
    display: grid;
        grid-template-areas:
        "ubi1-text ubi1-maps"
        "ubi2-maps ubi2-text"
        "ubi3-text ubi3-maps";
        grid-template-columns: 1fr 1fr;
    padding: 0% 0% 0% 0%;
}

.ubicacion h2{
    color: #213a85;
}

.ubicacion p{
    text-align: center;
}

.sinMarginTop{
    margin-top: 3px;
}

.ubi-icon{
    position: relative;
    width: 26px;
    left: 50%;
    margin-left: -13px;
}

.ubi1-text{
    position: relative;
    grid-area: ubi1-text;
}

.ubi1-text a{
    color: #000;
}

.ubi1-maps{
    position: relative;
    grid-area: ubi1-maps;
}

.ubi1-title{
    position: absolute;
    top:0;
    right: 7.5%;
    z-index: 100;
    background-image: linear-gradient(to right, #182b63 , #213a85);
    padding: 0% 2% 0% 2%;
}

.ubi1-title p{
    margin: 10px;
    color: #ffffff;
}

.ubi2-text{
    position: relative;
    grid-area: ubi2-text;
}

.ubi2-text a{
    color: #000;
}

.ubi2-maps{
    position: relative;
    grid-area: ubi2-maps;
}

.ubi2-title{
    position: absolute;
    top:0;
    right: 7.5%;
    z-index: 100;
    background-image: linear-gradient(to right, #182b63 , #213a85);
    padding: 0% 2% 0% 2%;
}

.ubi2-title p{
    margin: 10px;
    color: #ffffff;
}

.ubi3-text{
    position: relative;
    grid-area: ubi3-text;
}

.ubi3-text a{
    color: #000;
}

.ubi3-maps{
    position: relative;
    grid-area: ubi3-maps;
}

.ubi3-title{
    position: absolute;
    top:0;
    right: 7.5%;
    z-index: 100;
    background-image: linear-gradient(to right, #182b63 , #213a85);
    padding: 0% 2% 0% 2%;
}

.ubi3-title p{
    margin: 10px;
    color: #ffffff;
}
/* ***** ***** ***** ***** ***** */
/* U B I C A C I O N */
/* ***** ***** ***** ***** ***** */


/* ***** ***** ***** ***** ***** */
/* F O O T E R */
/* ***** ***** ***** ***** ***** */
.footer{
    position: relative;
    display: grid;
        grid-template-areas:
        "foo-logo foo-tel foo-direc"
        "foo-logo foo-email foo-hora"
        "foo-desc foo-whats foo-null";
        grid-template-columns: 2fr 1fr 2fr;
    padding: 2% 0% 2% 0%;
    background: #213a85;
}

.footer span{
    font-weight: bold;
}

.footer p{
    color: #ffffff;
    text-align: center;
    margin-top: 3px;
}

.foo-logo{
    position: relative;
    grid-area: foo-logo;
    justify-self: center;
}

.foo-logo-img{
    width: 300px;
}

.foo-desc{
    position: relative;
    grid-area: foo-desc;
}

.foo-tel{
    position: relative;
    grid-area: foo-tel;
    justify-self: center;
    align-self: center;
}

.foo-email{
    position: relative;
    grid-area: foo-email;
    align-self: center;
}

.foo-direc{
    position: relative;
    grid-area: foo-direc;
    align-self: center;

}

.foo-hora{
    position: relative;
    grid-area: foo-hora;
    align-self: center;
}

.foo-whats{
    position: relative;
    grid-area: foo-whats;
    align-self: center;
}

.foo-icon{
    position: relative;
    width: 26px;
    left: 50%;
    margin-left: -13px;
}

.copyright{
    position: relative;
    display: grid;
        grid-template-areas:
        "foo-copy";
        grid-template-columns: 1fr;
    padding: 0% 0% 0% 0%;
    background: #182b63;
}

.copyright p{
    color: #ffffff;
    text-align: center;
}

.copyright span{
    font-weight: bold;
}
/* ***** ***** ***** ***** ***** */
/* F O O T E R */
/* ***** ***** ***** ***** ***** */

@media only screen and (max-width:1440px) {
    h1{
        font-size: 50px;
    }

    h2{
        font-size: 35px;
    }

    p{
        font-size: 17px;
    }

    .grid-header{
        height: 10%;
    }

    .logo{
        padding: 8%;
    }

    .botonProd{
        font-size: 16px;
        margin-top: 15%;
    }

    .slide1 img{
        width: 250px;
        right: 18%;
    }

    .slide2 img{
        width: 250px;
        top: 14%;
    }

    .slide3 img{
        width: 280px;
        top: 15%;
    }

    .pro-fuer img{
        max-width: 100%;
        width: 280px;
        height: 280px;
    }

    .pro-segu img{
        max-width: 100%;
        width: 280px;
        height: 280px;
    }

    .pro-arch img{
        max-width: 100%;
        width: 280px;
        height: 280px;
    }

    .caja-tab{
        font-size: 13px;
    }

    .btn1{
        width: 120px;
        height: 40px;
        font-size: 17px;
    }

    .btn2{
        width: 120px;
        height: 40px;
        font-size: 17px;
        margin-left: -60px;
    }
		.cont-title img {
			left: 25%;
			top: -7px;
		}
}

@media only screen and (max-width:1024px) {
    h1{
        font-size: 40px;
    }

    h2{
        font-size: 30px;
    }

    p{
        font-size: 16px;
    }

    .grid-header{
        grid-template-areas:
            "logo null1 icon1 icon2  icon3 boton3 ";
            grid-template-columns: 250px 1fr 50px 50px 50px 160px ;
        padding: 1% 5% 0% 0%;
        height: 7%;
    }

    .logo{
        position: relative;
        margin-top: -3%;
        padding: 8%;
        background: url("../images/iso-ch.png") no-repeat center/contain;
				margin-left: -135px;
    }

    .botonProd{
        font-size: 14px;
    }

    .slide1 {
        padding: 120px 0% 15% 0%;
    }

    .slide1 img{
        position: relative;
        width: 180px;
        right: 0;
        margin-right: 0;
    }

    .slide2 {
        padding: 120px 0% 15% 0%;
    }

    .slide2 img{
        position: relative;
        width: 180px;
        top: 20%;
    }

    .slide3 {
        padding: 120px 0% 15% 0%;
    }

    .slide3 img{
        position: relative;
        width: 250px;
        top: 10%;
    }

    .nosotros{
        grid-template-areas:
            "nos-fab nos-var"
            "nos-rep nos-rep";
            grid-template-columns: 1fr 1fr;
        background: #f3f3f3;
    }

    .nos-fab{
        margin: 5%;
        padding: 0% 0% 35% 0%;
    }

    .nos-var{
        margin: 5%;
        margin-left: 5%;
        padding: 0% 0% 35% 0%;
    }

    .nos-rep{
        margin-left: 0%;
        margin: 2%;
        padding: 0% 5% 5% 5%;
    }

    .nos-rep img{
        width: 20%;
        right: 10%;
    }

    .seg-ban-int{
        position: relative;
        display: grid;
            grid-template-areas:
            "seg-logo"
            "seg-text";
            grid-template-columns: 100%;
        padding: 3% 0% 0% 0%;
    }

    .seg-logo img{
        width: 50%;
    }

    .seg-text{
        padding: 5% 20% 5% 20%;
    }

    .mysl-slide1{
        grid-template-areas:
            "mis-text"
            "mis-img";
        grid-template-columns: 100%;
    }

    .mysl-slide2{
        grid-template-areas:
            "vis-text"
            "vis-img";
        grid-template-columns: 100%;
    }

    .mysl-slide3{
        grid-template-areas:
            "val-text"
            "val-img";
        grid-template-columns: 100%;
    }

    .ubicacion{
        position: relative;
        display: grid;
            grid-template-areas:
            "ubi1-text"
            "ubi1-maps"
            "ubi2-text"
            "ubi2-maps"
            "ubi3-text"
            "ubi3-maps";
            grid-template-columns: 1fr;
        padding: 0% 0% 0% 0%;
    }

    .footer{
        position: relative;
        display: grid;
            grid-template-areas:
            "foo-logo"
            "foo-desc"
            "foo-tel"
            "foo-email"
            "foo-whats"
            "foo-direc"
            "foo-hora";
            grid-template-columns: 1fr;
        padding: 2% 0% 2% 0%;
        background: #213a85;
    }

    .productos{
        grid-template-areas:
            "pro-title"
            "pro-fuer"
            "pro-segu"
            "pro-arch"
            "pro-espe";
        grid-template-columns: 1fr;
        padding: 5% 5% 1% 5%;
    }

    .pro-fuer{
        margin: 5%
    }

    .pro-segu{
        margin: 5%;
    }

    .pro-arch{
        margin: 5%;
    }

    .pro-espe{
        margin: 5%;
    }

    .caja-espe{
        margin: 0%;
        padding: 10% 5% 10% 5%;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    }

    .caja-espe p{
        text-align: justify;
    }

    .btn1{
        display: none;
    }
		.cont-title {
			padding: 5%;
		}
		.cont-title img {
			left: 17%;
			top: 4px;
		}
		.caja-espe img {
			position: relative;
			margin: 50px;
		}

}

@media only screen and (max-width:700px) {
    h1{
        font-size: 30px;
    }

    h2{
        font-size: 25px;
    }

    p, button{
        font-size: 14px !important;
    }

    .botonProd{
        font-size: 12px;
        width: 120px;
    }

    .slide2 img{
        width: 150px;
    }

    .nosotros{
        grid-template-areas:
            "nos-fab"
            "nos-var"
            "nos-rep";
            grid-template-columns: 1fr;
        background: #f3f3f3;
    }

    .nos-rep{
        margin-left: 0%;
        margin: 5%;
        padding: 0% 0% 35% 0%;
    }

    .nos-rep img{
        width: 40%;
        right: -10%;
    }

    .contacto{
        grid-template-areas:
            "cont-title"
            "cont-form"
            "cont-tel"
            "cont-email"
            "cont-whats";
        grid-template-columns: 1fr;
        padding: 2% 15% 2% 15%;
    }

    .cont-form2{
        position: relative;
        display: grid;
            grid-template-areas:
            "form-nombre"
            "form-tel"
            "form-mens"
            "form-env";
            grid-template-columns: 1fr;
        padding: 0% 0% 0% 0%;
    }

    .form-nombre{
        font-size: 14px;
        margin-right: 0%;
    }

    .form-tel{
        font-size: 14px;
        padding-bottom: 15px;
        margin-left: 0%;
        margin-top: 5%;
    }

    .form-mens{
        margin-top: 5%;
        font-size: 14px;
    }

    .productos{
        padding: 10% 5% 1% 5%;
    }

    .grid-header{
        grid-template-areas:
            "logo null1 icon1 icon2  icon3 boton3 ";
            grid-template-columns: 100px 1fr 30px 30px 30px 100px ;
            padding: 1.5% 0% 0% 0%;
    }

    .btn2{
        width: 90px;
        margin-left: -45px;
    }

    .logo{
        position: relative;
        padding: 17%;
        margin-top: -5%;
				margin-left: -35px;
    }
		.icon1, .icon2, .icon3, .boton3 {
			right: 20px;
		}
		.seg-title {
			padding: 16% 0% 0% 0%;
		}
		.pro-title {
			padding: 10% 0% 1% 0%;
		}
		.cont-title {
			padding: 11% 0% 0% 0%;
		}
		.cont-title img {
			left: 7%;
			top: 2px;
		}
}
