/* 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                                       ADDITIONAL 3 STYLE --- MAIN CSS START

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/









/* journeyBnr */
.journeyBnr .videoBox {
	display: inline-block; 
	position: relative;
	max-width: 1000px;   
    margin-left: auto;
    margin-right: auto;    
    transform: scale(1);
    opacity: 0;
	transition: all .5s; 
} 
.journeyBnr .videoBox:hover { 
	transform: scale(.98);     
}
   
.journeyBnr .videoBox .videobutton,
.journeyBnr .videoBox .dbtn {   
	width: 100%;
    height: 100%;
    margin-top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;  
    font-size: 0px !important;
    border-radius: 0px !important;            
}
.bannerWrap.journeyBnr h3 {   
	margin-bottom: 5px;  
} 
/* journeyBnr */

/* navigationWrap */
.navigationWrap h3.elementor-heading-title {
	font-size: 30px; 
	line-height: 40px;      
}
.navigationWrap .buttonBox {
	display: inline-block;
	vertical-align: middle;
	text-align: center;   
}
.navigationWrap .buttonBox .elementor-widget-button {
	display: inline-block;
	vertical-align: middle; 
	margin-right: 12px;
	margin-bottom: 20px !important;
}
.navigationWrap .buttonBox .elementor-widget-button:last-child {
	margin-right: 0px;  
}
.navigationWrap .buttonBox .dbtn {
    color: #4F6342 !important;
    font-size: 20px !important;       
    line-height: 24px !important;    
    background: transparent !important;
    border: 2px solid #4f6342 !important;   
    padding: 12px 18px 13px !important;   
} 
.navigationWrap .buttonBox .dbtn:before {
    opacity: 0;   
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    left: -10px;
    top: -10px;       
    border-width: 2px;
} 
.navigationWrap .buttonBox .dbtn:hover:before {
	opacity: 1;
	width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: -5px;
    top: -5px;     
}
/* navigationWrap */ 


/* greatWrap */
.greatWrap .mainBox .elementor-cta__title {
	font-size: 16px;   
    line-height: 22px;
    position: absolute;
    background: rgba(141,103,84,.76);
    padding: 10px 15px;
    bottom: 0;
    left: 0;
    font-family: 'Muli';
    font-weight: 600;
    min-height: 65px;
    display: flex;
    justify-content: center;
    flex-direction: column; 
    overflow-y: auto;      
    max-height: 40%;   
}
/* greatWrap */



.mordenhallBox p:last-child {
	padding-bottom: 0px;    
}


.journeyBnr .videoBox .dbtn:before,      
.bannerWrap.journeyBnr h3:after {
	display: none;
}
.page-loaded .journeyBnr .videoBox {
	opacity: 1;
	transition-delay: 1.5s;   
}   
.greatWrap .box:not(.in-viewport-once) {
	transform: rotate(-5deg);
}   
.greatWrap .box {
	transform: rotate(0deg);
	transition: all 1s;
	transition-delay: .8s;      
}
.showcaseWrap .imageBox:not(.in-viewport-once) {
	opacity: 0;
}
.showcaseWrap .imageBox {
	opacity: 1;
	transition: all 1s;        
}
.scrolling-moment .showcaseWrap .imageBox {
	box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0) !important;
}


/* 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                                   ADDITIONAL 3 STYLE --- RESPONSIVE CSS START

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

/* Laptop screen */
@media (min-width: 1200px) and (max-width: 1440px) { 

	.journeyBnr .videoBox {
		max-width: 880px;
	}
	.greatWrap .mainBox .elementor-cta__title {
		padding: 10px;    
	}

}
@media (min-width: 1025px) and (max-width: 1199px) {
	.journeyBnr .videoBox {  
		max-width: 800px;
	}
	.navigationWrap .buttonBox .dbtn {
	    font-size: 19px !important;  
	    padding: 10px 18px 10px !important;
	}
	.greatWrap .mainBox .elementor-cta__title {
	    font-size: 14px;
	    line-height: 22px;
	    min-height: 82px;
	}   
}

/* Large desktop */
@media (max-width: 1024px) {
	
	.journeyBnr .videoBox {
		max-width: 780px;          
	}
	.navigationWrap .buttonBox .elementor-widget-button {    
	    margin-right: 8px;
	    margin-bottom: 15px !important;
	}
	.navigationWrap h3.elementor-heading-title {
	    font-size: 25px;
	    line-height: 35px;  
	} 
	.greatWrap .mainBox {
		display: grid;  
	    grid-template-columns: repeat(3, minmax(0, 1fr));
	    grid-column-gap: 20px;
	    grid-row-gap: 20px;
	}
	.greatWrap .mainBox .box {
		width: 100%;    
		padding: 0;
	}  
	.greatWrap .mainBox .elementor-cta__title {
	    font-size: 14px;
	    line-height: 22px;     
	}     
}

   
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1024px) { 
	.navigationWrap .buttonBox .dbtn {
	    font-size: 18px !important;  
	    padding: 10px 18px 10px !important;
	}
	.greatWrap .mainBox .box4,
	.greatWrap .mainBox .box5 {      
	}  
	
}

     
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
	
	@media screen and (orientation: landscape) {

	}

	.navigationWrap .buttonBox .dbtn {
	    font-size: 16px !important;
	    line-height: 24px !important;    
	}
	.greatWrap .mainBox {
	    grid-template-columns: repeat(2, minmax(0, 1fr)); 
	    max-width: 550px; 
	    margin: auto;  
	}   
	.greatWrap .mainBox .box5 {    
		grid-column: span 2;
		width: 50%;
		margin: 0 auto;
	} 

	
	
}

     
/* Landscape phones and down */
@media (max-width: 575px) {      

	.journeyBnr .videoBox .elementor-widget-spacer>.elementor-widget-container {
		max-height: 230px;  
	}   
}

@media (max-width: 480px) {
	.greatWrap .mainBox {
	    grid-template-columns: repeat(1, minmax(0, 1fr)); 
	    max-width: 280px; 
	}  
	.greatWrap .mainBox .box5 {
	    grid-column: span 1;
	    width: 100%;  
	}  
	.showcaseWrap .imageBox .box {
		width: 100%;
	}      
}