
/* HOME */

.grid-12 {
    display: grid;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    grid-template-columns: repeat(12, 1fr); 
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    margin-bottom: 32px;
    grid-auto-rows: minmax(100px, auto); /* Set a minimum row height of 100px */
    grid-auto-flow: dense; /* Allow items to fill in empty spaces */
}

@media only screen and (max-width: 767px) {
    .grid-12 {
        grid-template-columns: repeat(12, 1fr); 
        grid-column-gap: 16px;
        grid-row-gap: 18px;
		margin-bottom: 18px;
    	    grid-auto-rows: minmax(50px, auto);
    }
}

.row-gap-12 { grid-row-gap: 12px;}


.col-1-m { grid-column: span 1; }
.col-2-m { grid-column: span 2; }
.col-3-m { grid-column: span 3; }
.col-4-m { grid-column: span 4; }
.col-5-m { grid-column: span 5; }
.col-6-m { grid-column: span 6; }
.col-7-m { grid-column: span 7; }
.col-8-m { grid-column: span 8; }
.col-9-m { grid-column: span 9; }
.col-10-m { grid-column: span 10; }
.col-11-m { grid-column: span 11; }
.col-12-m { grid-column: span 12; }


@media only screen and (min-width: 768px) {
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
}

.height-100-m { height: 100px; }
.height-200-m { height: 200px; }
.height-250-m { height: 250px; }
.height-300-m { height: 300px; }
.height-400-m { height: 400px; }
.height-500-m { height: 500px; }
.height-600-m { height: 600px; }
.height-700-m { height: 700px; }
.height-800-m { height: 800px; }
.height-900-m { height: 900px; }

@media only screen and (min-width: 768px) {
.height-100 { height: 100px; }
.height-200 { height: 200px; }
.height-250 { height: 250px; }
.height-300 { height: 300px; }
.height-400 { height: 400px; }
.height-500 { height: 500px; }
.height-600 { height: 600px; }
.height-700 { height: 700px; }
.height-800 { height: 800px; }
.height-900 { height: 900px; }
}

@media only screen and (max-width: 767px) {
.hero-height-m-500 { min-height: 500px;}
.hero-height-m-550 { min-height: 550px;}
.hero-height-m-600 { min-height: 600px;}
.hero-height-m-650 { min-height: 650px;}
.hero-height-m-700 { min-height: 700px;}
.hero-height-m-750 { min-height: 750px;}
.hero-height-m-800 { min-height: 800px;}
}

.width-5-m { width: 5%; }
.width-10-m { width: 10%; }
.width-15-m { width: 15%; }
.width-20-m { width: 20%; }
.width-25-m { width: 25%; }
.width-30-m { width: 30%; }
.width-35-m { width: 35%; }
.width-40-m { width: 40%; }
.width-45-m { width: 45%; }
.width-50-m { width: 50%; }
.width-65-m { width: 65%; }
.width-75-m { width: 75%; }

@media only screen and (min-width: 768px) {
.width-5 { width: 5%; }
.width-10 { width: 10%; }
.width-15 { width: 15%; }
.width-20 { width: 20%; }
.width-25 { width: 25%; }
.width-30 { width: 30%; }
.width-35 { width: 35%; }
.width-40 { width: 40%; }
.width-45 { width: 45%; }
.width-50 { width: 50%; }
.width-65 { width: 65%; }
.width-75 { width: 75%; }
}


@media only screen and (max-width: 767px) {
.as-1-1-m { aspect-ratio: 1/1 !important; height: auto;}
.as-2-3-m { aspect-ratio: 2/3 !important; height: auto;}
.as-3-4-m { aspect-ratio: 3/4 !important; height: auto;}
.as-4-3-m { aspect-ratio: 4/3 !important; height: auto;}
}

@media only screen and (min-width: 768px) {
.as-1-1 { aspect-ratio: 1/1 !important; height: auto;}
.as-2-3 { aspect-ratio: 2/3 !important; height: auto;}
.as-3-4 { aspect-ratio: 3/4 !important; height: auto;}
.as-4-3 { aspect-ratio: 4/3 !important; height: auto;}
}


.hide { display: none;}

@media(max-width:767px){
.hide-mobile { display: none;}
}

@media(min-width:768px){
.hide-desktop { display: none;}
}

.bk-light-green { background: #82b062; }
.bk-light-beige { background: #f7f6f2; }
.bk-dark-beige { background: #f1eee9; }

.display-flex {
    display: flex;
}

.display-flex-cent-cent {
    display: flex;
}

.jus-cont-cent { justify-content: center; }
.align-items-cent { align-items: center; }

.p-12 {padding: 12px;}
.p-16 {padding: 16px;}
.p-20 {padding: 20px;}
.p-32 {padding: 32px;}
.p-40 {padding: 40px;}

.media-text {
    display: flex;
    flex-direction: row;
    background: #82b062 ;
}

@media(max-width:767px){
.media-text {
    flex-direction: column;
}
}


.row-reverse {
    flex-direction: row-reverse;
}

.media-text .info-box-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.cover .info-box-bottom {
    display: none;
}

.cover .info-box-top-text {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    margin: inherit;
    bottom: inherit;
}

.center-center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}



.info-box {
    padding: 0px;
    text-align: left;
    border-radius: 0px;
    margin: 0px;
}

.info-box-bottom {
    padding-top: 16px;
}

.info-box-bottom-content a {
    text-decoration: none;
	color: inherit;
}

.info-box-bottom-content a:hover {
    text-decoration: none;
}

@media(max-width:767px){
.info-box-bottom {
    padding-top: 16px;
}
}

.info-box-bottom-header h2 {
    margin-bottom: 8px;
}

@media(max-width:767px){
.info-box-bottom-header h2 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
}
}

@media(max-width:767px){
.info-box-bottom-sub-header p {
    font-size: 14px;
    line-height: 1.4;
    color: #3d3d3d;
    margin-bottom: 0px;
}
}

.info-box-top-content {
    position: relative;
}
.info-box-top, .info-box-bottom {
    margin-top: 0px;
}

.info-box-top-content, .info-box-bottom-content {
    padding: 0px;
}

.info-box-top-header, .info-box-top-sub-header {
    color: #fff;
}

.info-box-bottom-header, .info-box-bottom-sub-header {
    color: #333;
}



.info-box-top-text {
    background: #82b063;
    padding: 28px;
    position: absolute;
    bottom: 0px;
    margin: 40px;
    pointer-events: none;
	border-radius: 2px;
}

@media(max-width:767px){
.info-box-top-text {
   bottom: 0px;
   margin: 20px;
    padding: 16px;
    border-radius: 12px;
    width: calc(100% - 40px);
}
}

@media(max-width:374px){
.info-box-top-text {
   padding: 16px;
}
}


.info-box-top-text.hero {
    padding: 40px;
}

@media(max-width:767px){
.info-box-top-text.hero {
    padding: 16px;
	border-radius: 12px;
	width: calc(100% - 40px);
}
}


@media(max-width:767px){
.hero .info-box-top-content {
    min-height: 600px;
}
}


.info-box-img {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    Xheight: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
    display: block;
}

@media(max-width:767px){
.info-box-img {
    border-radius: 20px;
}
}



.grid-12 h2 {margin: 0;}

.info-box-top-text.hero {
    min-width: 220px;
    max-width: 530px;
    Xmargin-bottom: -60px;
}

@media(max-width:767px){
.info-box-top-text.hero {
    max-width: inherit;
}
}



.info-box-top-header h1 {
    margin-bottom: 12px;
    font-size: 40px;
}

@media(max-width:767px){
.info-box-top-header h1, .info-box-top-header h2 {
	font-size: 24px;
    font-weight: 500;
	margin-bottom: 4px;
}
}

@media(max-width:374px){
.info-box-top-header h1 {
	font-size: 24px;
    font-weight: 500;
}
}

.info-box-top-sub-header p {
    font-size: 18px;
    line-height: 1.35;
	margin-bottom: 20px;
}


@media(max-width:767px){
.info-box-top-sub-header p {
    font-size: 14px;
	line-height: 1.35;
	margin-bottom: 12px;
}
}

@media(max-width:374px){
.info-box-top-sub-header p  {
    font-size: 14px;
}
}

img.promotion {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 72px;
}

@media(max-width:767px){
img.promotion {
    width: 44px;
}
}


@media (min-width: 768px){
.cms-index-index .head-trust-newcontainer {
    height: 12px;
}
}

