@charset "UTF-8";


/* Home intro: content and background image */

 .hero {
     background-color: #000;
	 display: flex;
	 align-items: stretch;
	 flex-direction: column;
	 justify-content: space-between;
	 padding: 0;
	 position: relative;
	 
}

    @media screen and (max-width: 1023px) {
        .hero {
            flex-direction:column;
            flex-wrap:nowrap;
        }
    }

 .hero-body {
	 background-color: #000;
	 background-attachment: scroll;
	 background-clip: border-box;
	 box-sizing: border-box;
	 display: flex;
	 flex: 1 0;
	 align-items: center; 
	 padding: 7rem 4rem; /* 5rem 3.25rem */
	 position: relative;
	 z-index: 2;
}

    @media screen and (max-width: 576px)  {
        .hero-body {
            padding: 1.5rem 2rem;
        }
    }

    @media screen and (max-width: 767px) {
        .hero-body {
            order: 2;
            padding: 2rem 3.5rem;
        }
    } 

    @media screen and (max-width: 1023px) {
        .hero-body {
            order: 2;
            padding: 2rem;
        }
    }
    
    
 .hero-bg-cover {
	 height: 100%;
	 width: 100%;
	 object-fit: cover;
}

    @media screen and (max-width: 1023px) {
    
        .hero-bg-cover {
            object-fit: scale-down;
        }    
        
    }
    

 .hero-container {
     box-sizing: inherit;
	 -webkit-box-flex: 1;
	 flex-grow: 1;
	 margin: 0 auto;
	 position: relative;
	 width: auto;
}

 .hero-container .content {
     box-sizing: inherit;
	 color: #fff;
	 width: calc(50% - 24px);
	 max-width: 35rem; 
	 text-wrap: balance;
}

    @media screen and (max-width: 1023px) {
        .hero-container .content {
            max-width: 100%;
            width: 100%
        }
    }

 .hero .hero-body .content h1 {
     box-sizing: inherit;
	 color: #fff;
	 font-family: "United Sans Condensed",Impact,"Arial Black","sans serif";
	 font-size: 1.875rem;
	 font-weight: 700;
	 line-height: 2.1875rem;
	 overflow-wrap: break-word;
	 padding: 0;
}
    
    @media screen and (min-width: 768px), print {
        .hero .hero-body .content h1 {
            font-size:4rem !important;
            line-height:1;
         }
    }

 .hero .hero-container .content p {
     box-sizing: inherit;
     color: #fff;
	 font-size: 1.325rem;
	 line-height: 1.5;
	 max-width: 100%;
	 overflow-wrap: break-word;
}

 .hero-image {
     box-sizing: inherit;
     color: #000;
     height: 100%;
	 position: absolute;
	 right: 0;
	 top: 0;
	 width: 54%;
	 z-index: 4;
}

    @media screen and (max-width: 767px) {
        .hero .hero-image {
            height: auto;
        }
    }

    @media screen and (max-width: 1023px) {
        .hero-image {
            flex-basis: auto;
            order: 1;
            height: auto;
            position: relative;
            width: 100%;
        }
    }


 .hero .hero-image::before {
	 background: #000;
	 content: "";
	 -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
	 clip-path: polygon(0 0, 0% 100%, 100% 0);
	 height: 100%;
	 width: 10rem;
	 position: absolute;
	 left: 0;
}

    @media screen and (max-width: 1023px) {
        .hero .hero-image:before {
            clip-path:none;
            height: 0;
            width: 100%;
         }
    }


/* Home page sections */

.content-area-section {
    padding: 3rem;
}
    

    @media screen and (max-width: 576px) {
        
        .content-area-section {
            padding: 1.5rem;
        }
    }

    @media screen and (max-width: 1023px) {
    
        .columns {
            flex-direction: column;
            flex-wrap: nowrap;
        }    
        
    }   
    
 
.has-gold-background {
    background: #cfb991;
}
   
.has-gray-background {
    background: #ededed;
}    
 