@charset "utf-8";
/* CSS Document 
 COLORES
#22446c = sxul
#008039 = verde osc
#1da35a = verde
/*Header icon box*/

.header-image [class^="ico"]{height: 40px;margin-bottom: 12px;}
.header-image p.txt-header{color: #22446c;padding: 37px 0px;font-size: 20px;}
.header-image a{text-decoration: none; font-weight: bold;color: #ccc;}
.header-image a:hover{color: #fff;}
.header-image .box-cont{background-color: #00803900;padding: 20px;}
.header-image img{filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(73deg) brightness(99%) contrast(94%);}
.header-image .boxi {padding: 60px 30px;position: relative;overflow: hidden;background: #9c8311;box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.08);transition: all 0.3s ease-in-out;border-radius: 8px;z-index: 1;height: 100%;width: 100%;text-align: center;}
.header-image .boxi:hover {background: #009786;}
.header-image {width: 100%; position: relative;background-image: url(/sites/default/files/images/home/parallax1.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;}
.header-image .mask-header-image{background: linear-gradient(to right, #22446c 3%, #cccccc00);}

.header-image .box-content {padding-bottom: 60px;}
.box-content{position: relative;}
.header-image:before {content: "";position: absolute;bottom: 0;top: 0;left: 0;right: 0;}
.header-image .container{width: 100%;padding-right: calc(1.5rem * .5);padding-left: calc(1.5rem * .5);margin-right: auto;margin-left: auto;}
.header-image,
.header-image .container,
.mask-header-image{min-height: 50vh}
.head-sub-title{font-size: 1.3rem; color:#274193; font-weight: 700;text-align: start}
.header-image-box{background-color: #22446c;}
.header-txt{padding: 35px 36px 28px 50px;}
.header-image-txt h2,.header-image-txt p{color:#FFF;}
.svgico{width: 100px;height: 100%; filter: invert(100%) sepia(2%) saturate(1%) hue-rotate(65deg) brightness(104%) contrast(100%);}
.box-context span {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 300;
    color: #fff;
    margin-bottom: 20px;
    display: inline-block;
    background: #fff;
    padding: 6px 17px;
    border-radius: 17px
}
.header-box .box-context h1 {
    font-size: 60px;
    font-weight: 500;
    margin-bottom: 50px;
    color: #fff!important;
    line-height: 1.1;
    letter-spacing: -2.5px;
    position: relative
}

.header-box .box-context h1::before {
    position: absolute;
    content: "";
    width: 110px;
    height: 4px;
    bottom: -26px;
    left: 0;
    background: #fff
}
@media (max-width: 425px) {
.header-box .box-context h1::before {left: 36%;}
p.head-sub-title{font-size: 20px;text-align: center;}
	.header-image p.txt-header {padding: 10px 0px;}
	.header-image-box{display: none;}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .header-txt {
        padding:35px 0px 28px 0px
    }
}

@media (max-width: 575px) {
    .header-txt {
        padding:35px 0px 28px 0px
    }
}

@media (max-width: 1440px) {

.header-image{background-size: cover;background-repeat: no-repeat;}
}
@media (max-width: 575px) {
    .header-box .box-context span {
        margin-bottom:30px
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-box .box-context h1 {
        font-size:60px
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-box .box-context h1 {
        font-size:50px
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .header-box .box-context h1 {
        font-size:48px
    }
}

@media (max-width: 575px) {
    .header-box .box-context h1 {
        font-size:35px
    }
}

.header-box .box-context p {
    color: #fff;
    margin-bottom: 41px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .header-box .box-context p br {
        display:none
    }
}

@media (max-width: 575px) {
    .header-box .box-context p br {
        display:none
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-box .box-context p {
        margin-bottom:43px;
        font-size: 21px
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .header-box .box-context p {
        margin-bottom:43px;
        font-size: 18px
    }
}

@media (max-width: 575px) {
    .header-box .box-context p {
        margin-bottom:43px;
        font-size: 18px
    }
}