/* BANNER */
.clarvista-banner {background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover;}
    .clarvista-banner-flex {display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;}
        .clarvista-banner-text {width: 55%; padding: 60px 12% 60px 10%; box-sizing: border-box; display: inline-flex; justify-content: flex-start; align-items: center;}
            .clarvista-banner-text-inner {display: inline-block; width: 100%;}
                .clarvista-banner h1 {color: #fff !important; font-size: 30px; line-height: 1.1em; font-weight: 300; margin: 0 0 20px 0;}
                .clarvista-banner h2 {color: #fff !important; font-size: 95px; line-height: 1.1em; font-weight: 300; margin: 0 0 20px 0;}
                .clarvista-banner p, 
                .clarvista-banner ul, 
                .clarvista-banner ol {color: #fff; font-size: 26px; line-height: 1.5em; font-weight: 300; margin: 0 0 50px 0;}
                    .clarvista-banner-text :last-child {margin-bottom: 0;}
                .clarvista-banner a {color: #fff; font-size: 26px; line-height: 1.5em; font-weight: 300; text-decoration: underline;}
                    .clarvista-banner a:hover, 
                    .clarvista-banner a:focus {color: #fff; text-decoration: none;}
                .clarvista-banner a.white-button {
                    color: #fff; background-color: transparent; font-weight: bold; font-size: 16px; line-height: 1em; text-transform: uppercase; text-align: center; 
                	display: inline-block; padding: 15px 30px; border: 1px solid #fff; margin: 0; text-decoration: none;
                	-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; 
                }
                    .clarvista-banner a.white-button:hover, 
                    .clarvista-banner a.white-button:focus {color: #fff; background-color: #005776; text-decoration: none;}
        .clarvista-banner-image {width: 45%; padding: 80px 4% 80px 0; box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; text-align: center;}
            .clarvista-banner-image img {display: inline-block; max-width: 100%; height: auto;}
            
@media (max-width: 1700px) {
    .clarvista-banner h2 {font-size: 84px;}
}
@media (max-width: 1500px) {
    .clarvista-banner h2 {font-size: 78px;}
    .clarvista-banner-text {padding: 60px 10% 60px 8%;}
    .clarvista-banner-image {padding: 75px 4% 75px 0;}
}
@media (max-width: 1400px) {
    .clarvista-banner h2 {font-size: 76px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 25px;}
    .clarvista-banner-text {padding: 60px 10% 60px 7%;}
    .clarvista-banner-image {padding: 70px 3% 70px 0;}
}
@media (max-width: 1300px) {
    .clarvista-banner h1 {font-size: 29px;}
    .clarvista-banner h2 {font-size: 74px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 25px;}
    .clarvista-banner-text {padding: 60px 10% 60px 6%;}
    .clarvista-banner-image {padding: 70px 3% 70px 0;}
}
@media (max-width: 1200px) {
    .clarvista-banner h2 {font-size: 70px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 24px;}
    .clarvista-banner-text {padding: 60px 10% 60px 5%;}
    .clarvista-banner-image {padding: 65px 3% 65px 0;}
}
@media (max-width: 1100px) {
    .clarvista-banner h1 {font-size: 28px;}
    .clarvista-banner h2 {font-size: 66px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 24px;}
    .clarvista-banner-text {padding: 60px 10% 60px 4%;}
    .clarvista-banner-image {padding: 65px 3% 65px 0;}
}
@media (max-width: 1000px) {
    .clarvista-banner h1 {font-size: 26px;}
    .clarvista-banner h2 {font-size: 60px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 22px;}
    .clarvista-banner-text {padding: 60px 10% 60px 4%;}
    .clarvista-banner-image {padding: 65px 4% 65px 0;}
}
@media (max-width: 900px) {
    .clarvista-banner h1 {font-size: 24px;}
    .clarvista-banner h2 {font-size: 56px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 21px;}
    .clarvista-banner-text {padding: 60px 9% 60px 4%;}
    .clarvista-banner-image {padding: 65px 4% 65px 0;}
}
@media (max-width: 800px) {
    .clarvista-banner h1 {font-size: 21px; margin: 0 0 17px 0;}
    .clarvista-banner h2 {font-size: 50px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 20px;}
    .clarvista-banner-text {padding: 60px 6% 60px 4%;}
    .clarvista-banner-image {padding: 65px 4% 65px 0;}
}
@media (max-width: 700px) {
    .clarvista-banner h1 {font-size: 20px; margin: 0 0 15px 0;}
    .clarvista-banner h2 {font-size: 44px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 18px;}
    .clarvista-banner-text {padding: 50px 5% 50px 3%;}
    .clarvista-banner-image {padding: 50px 3% 50px 0;}
}
@media (max-width: 600px) {
    .clarvista-banner h1 {font-size: 18px; margin: 0 0 15px 0;}
    .clarvista-banner h2 {font-size: 36px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 17px;}
    .clarvista-banner-text {padding: 50px 5% 50px 3%;}
    .clarvista-banner-image {padding: 50px 3% 50px 0;}
}
@media (max-width: 500px) {
    .clarvista-banner-flex {flex-wrap: wrap;}
    .clarvista-banner-text {width: 100%; padding: 40px 3% 40px 3%;}
    .clarvista-banner-image {width: 100%; padding: 0px 3% 40px 3%;}
    .clarvista-banner h2 {font-size: 38px;}
    .clarvista-banner p, 
    .clarvista-banner ul, 
    .clarvista-banner ol {font-size: 18px;}
}

/* BOX OVER IMAGE */
.clarvista-box-over-image {padding: 60px 0; background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center;}
.clarvista-box-over-image-text {
    width: 100%; display: inline-block; max-width: 1260px; padding: 100px; box-sizing: border-box; text-align: center; margin: 0 auto;
    background-color: rgba(0, 87, 118, 0.5);
}
.clarvista-box-over-image-text p {color: #fff; font-size: 45px; line-height: 1.4em; font-weight: 300; margin: 0; text-align: center;}