@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}


.tiggernavandbooking{
	display: none;
}



/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		6;
	dw-num-cols-tablet:		10;
	dw-num-cols-desktop:	14;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */



    
	.gridContainer {
		width: 100vw;
		float: left;
		clear: both;
		position: relative;
		z-index: 20;
		border-radius: 0 0 2em 2em;
		height: auto;
		background-color: #FFFDFC;
		padding: 0 0 5em 0;
		margin-bottom: 85vh;
	}
    

	.hero{
		height: 130vh;
		width: 100vw;
		display: block;
		float: left;
		clear: none;
		position: relative;
		z-index: 0;
	}
	
	
	.circular{ 
		width: 100vw;
		height: 100vw;
		display: block;
		float: left;
		clear: none;
		position: absolute;
		top: -25vw;
		left: 00vw;
		
	}
    
	.circular svg{
		width: 100%;
		height: 100%;
		display: block;
		float: left;
		clear: both;
		position: absolute;
		z-index: 0;
			-webkit-animation: rotate-center 20s linear infinite both;
	        animation: rotate-center 20s linear infinite both;
		filter: blur(3px);
	}
	
	
	.circular #c-logo{
		background-image: url("../img/logo/mo-whitegb-cirular.svg");
		position: absolute;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-position: center;
		background-size: 3.5em;
		background-repeat: no-repeat;

	}
    




@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}







    
    
    
.heroslider{
	width: 100%;
	height: 100%;
	float: left;
	clear: both;
	position: absolute;
	z-index: 10;
	top: auto;
	left: auto;
	overflow: hidden;
}


.topslide.swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
    }


.swiper-slide.topslide {
      text-align: center;
      background: #fff;

}






.topslide h1{
	
}
    

.tophamid{
display: block;
	text-align: center;
	width: 150%;
	height: 70%;
	padding: 10vh 0 0;
	margin-left: -25vw;

}

.tophamid h1{
		color: #D6B58C;
}

.tophamid p{
		color: #000;
}



.ti-down{
	width: 100%;
	clear: both;
	margin: 1em 0;
	    display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 1em 1em; 
  grid-template-areas: 
    "."
    "."; 
}






.top-quotes{
	width: 90%;
	height: 70vh;
	display: block;
	float: left;
	clear: none;
  display: block; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 1em 1em; 
  grid-template-areas: 
    "."
    "."; 
	margin: 17.5vh 5% auto;
	position: relative;

}


.quote{
	height: auto;
	display: block;
	width: 100%;
	height: auto;
	float: left;
	clear: none;
	position: relative;
}

#quote1{
	width:100%;
	height: auto;
	float: left;
	clear: none;
	display: block;
	position: relative;
	bottom: 0;
	left: 0;
	margin: auto auto 10em;
}

#quote2{
	width: 5100%;
	height: auto;
	float: right;
	text-align: right;
	clear: none;
	display: none;
	position: relative;
	top: auto;
	right: auto;
	margin: auto auto ;
}

.quote h5 i{
	font-style: normal;
	font-family: "Aptos-Light";
	color: aqua;
	font-weight: 100;
	color: #606060;
	letter-spacing: -0.005em;
	font-size: 1em;
	margin: 0;
}

.quote h5{
	font-weight: 300;
}

.quote h3{
	color: #116982;
	
	font-family: "Aptos-Black";
}













.mo-img{
	width: 100vw;
	height: 110vh;

	display: block;
	float: left;
	clear: none;
	position: absolute;
	z-index: 20;
	left: 0%;
	bottom: -3em;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-image: url("../img/mo-top-1.png");
	background-size: contain;

}




.hero-gradient{
	width: 100%;
	height: 30vh;
	display: block;
	float: left; 
	clear: none;
	z-index: 40;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #FFFDFC;
background: linear-gradient(360deg,rgba(255, 253, 252, 1) 0%, rgba(255, 253, 252, 0) 100%);
}
















.media-slide{
	width: 100%;
	margin: -8vh 0% auto;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: relative;
}

.ms-left{
	width: 20%;
	height: 50vh;
	display: block;
	float: left;
	clear: none;
	display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;

}


.ms-left h2{
	transform-origin: center;
	transform: rotate(90deg);
	color: #D6B58C;
	text-align: center;
	width: 100%;
	height: 100%;
	display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}


.ms-right{
	width: 80%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	border-radius: 1em;
	overflow: hidden;
}










.abdulhamid{
	width: 80%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 20vh 10%;
	text-align: center;
}

.ah2 i{
	font-size: 4em;
	width: 80%;
	margin: 25vh 10%;
	text-align: center;
}


.experience{
	width: 95%;
	height: auto;
	display: block;
	float: right;
	background-color: #116982;
	border-radius: 1.5em 0 0 1.5em;
	position: relative;
	z-index: 10;
}


.experience-top{
	width: 90vw;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 5vw;
	letter-spacing: -0.008em;
	position: relative;
}

.experience-top h2{
	color: #fff;
	font-size: 3em;
}

.experience-top h2 span{
	color: #D6B58C;
}

.et-left{
	width: 90%;
	display: block;
	float: left;
	clear: none;
	height: auto;
	position: relative;
}


.et-right{
	width: calc(95% - 3em);
	height: auto;
	padding: 1.5em;
	display: block;
	float: right;
	clear: both;
	background-color: #167E9B;
	border-radius: 1em;
	color: #fff;
	position: relative;
	bottom: auto;
	right: 5%;
}



.experience-down{
	width: 100%;
	height: 100vh;
	display: block;
	float: left;
	clear: none;
	background-image: url("../img/MO-11.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.experience-down svg{
	margin: 10vh 10vw auto;
	height: 2.5em;
	width: auto;
}








.engagements{
	width: 90%;
	margin: 0vh 5%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: relative;
	z-index: 100;
	border: 0x solid #D1D1D1;
	border-top-width: .5px;
	padding:1em auto;
	box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
-webkit-box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
-moz-box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
	border-radius: 2em;
	background-color: white;
}



.engagements-bottom{
	width: 95%;
	margin: auto 2.5%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". ."
    ". ."; 
}


.eb-post{
	height: 30vh;
	width: 100%;
	display:block;
	float: left;
	clear: none;
	text-align: center;
	margin: 5vh auto;
}


.eb-post span{
	width: 100%;
	height: 20vh;
	clear: both;
	float: left;
	display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}


.eb-post img{
	height: 5em;
	width: auto;
	display: block;
	float: left;
	clear: none;
	margin: 1em auto 1.5em;

}









.pauseimage{
	position: relative;
z-index: 0;
margin: -10vh 0 0vh 0 ;
height: 70vh;
width: 100%;
display: block;
float: left;
clear: none;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
z-index: 0;
}






.events{
	width: 90%;
	margin: -10vh 5% auto;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: relative;
	z-index: 100;
	border: 0x solid #D1D1D1;
	border-top-width: .5px;
	padding:1em auto;
	box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
-webkit-box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
-moz-box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
	border-radius: 2em;
	background-color: white;
	
}


.event-slide{
	height: 60vh;
	width: 90%;
	display: block;
	float: left;
	clear: none;
	
}


.eventswiper{
	width: 95%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 2em 2.5%;
}


.swiper-pagination-eventswiper{
	left: 50%;
	position: absolute;
	bottom: 0;
}


.event{
	width: 100%;
	margin: 1em 0%;
	height: 90vh;
	display: block;
	float: left;
	clear: none;
	background-color: white;
	border: .5px solid #B8B8B8;
	border-radius: 1em;
	overflow: hidden;
	position: relative;
}


.event:hover .event-img{
	height: 55%;
}


.event:hover .et-details{
	opacity: 0;
	transform: scale(90%);
	transform-origin: top left;
	height: 0;
}


.event:hover .et-title h2{
	transform: scale(90%) translateX(-.5em);
	float: left;
	text-align: left;
}


.event:hover .eventbutton{
	bottom: 1em;
	opacity: 1;
}

.event-img{
	background-color: #BFD2D7;
	height: 50%;
	width: 100%;
	border: 1em;
	display: block;
	float: left;
	clear: none;
	background-position: center;
	background-size: cover;
	transition: .3s all;
	border-radius: 1em;
}

.event-text{
	width: 90%;
	height: auto;
	display: block;
	float: left;
	margin: 1em 5%;
	transition: .3s all;
	clear: both;
}

.et-title h4{
	margin: 0;
	transition: .3s all;
	font-weight: 700;
	letter-spacing: 0;
	font-family: "Aptos-Bold";
	font-size: 2em;
}

.et-title p{
	color: #167E9B;
	margin: 0;
	transition: .3s all;
}


.et-details{
	margin: 1em auto;
	display: block;
	height: auto;
	overflow: hidden;
	transition: .3s all;
	clear: both;
	opacity: 1;
}


.et-contact{
	border-radius: 3em;
	background-color: rgba(180,216,226,.45);
	padding: .8em 1em;
	display: block;
	float: left;
	clear: none;
		display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	clear: both;
	margin: .25em 0;
}

.et-contact i{
	color: #116982;
	font-size: 1.2em;
	margin: auto .5em auto auto;
}

.et-contact p{
	color: #000;
}


.eventbutton{
	position: absolute;
	bottom: .5em;
	right: 1em;
	opacity: 0;
}









.borderedec{
		border-radius: 1em; 
		border: .5px solid #B8B8B8;
		background-color: white;
		padding: 2em;
		width: calc(100% - 4em);
		height: calc(100% - 4em);
		display: block;
		float: left;
		clear: none;
		position: relative;
	}
	














/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
	
	
	
	
	
	
    
    
    
    
    
    
    
    
    
	

	
	
	

	
	.circular{ 
		width: 100vw;
		height: 100vw;
		display: block;
		float: left;
		clear: none;
		position: absolute;
		top: -40vw;
		left: 00vw;
		
	}
	
	
		
	.ti-down{
	width: 80%;
	clear: both;
	margin: 1em 10%;
	  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0em 2em; 
  grid-template-areas: 
    ". ."; 
}

	
	
	
	

}



/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
















	.hero{
		height: 100vh;
		width: 100vw;
		display: block;
		float: left;
		clear: none;
		position: relative;
		z-index: 0;
	}
	
	.circular{ 
		width: 100vw;
		height: 100vw;
		display: block;
		float: left;
		clear: none;
		position: absolute;
		top: -40vw;
		left: 00vw;
		
	}
	
	
	.ti-down{
	width: 80%;
	clear: both;
	margin: 1em 10%;
	  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0em 2em; 
  grid-template-areas: 
    ". ."; 
}


	
	
	
.top-quotes{
	width: 90%;
	height: 80%;
	display: block;
	float: left;
	clear: none;
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0em 2em; 
  grid-template-areas: 
    ". .";
	margin: 10% 5% auto;
	position: relative;
	
}


	
	.quote{
	height: auto;
	display: block;
	width: 100%;
	height: 100%;
	float: left;
	clear: none;
	position: relative;
}

#quote1{
	width:65%;
	height: auto;
	float: left;
	clear: none;
	display: block;
	position: absolute;
	bottom: 2em;
	left: 0;
	margin: auto auto 10em;
}

#quote2{
	width: 60%;
	height: auto;
	float: right;
	text-align: right;
	clear: none;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	margin: auto auto ;
}

	
	
	
	
.mo-img{
	width: 60%;
	height: 85vh;
	display: block;
	float: left;
	clear: none;
	position: absolute;
	z-index: 20;
	left: 20%;
	bottom: -3em;
	background-position: top;
	background-repeat: no-repeat;
	background-image: url("../img/mo-top-1.png");
	background-size: contain;
}

	



.media-slide{
	width: 90%;
	margin: -15vh 5% auto;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: relative;
}

	
	
	.experience-top h2{
	color: #fff;
	font-size: 5em;
}

	
	
	
	.engagements-bottom{
	width: 95%;
	margin: auto 2.5%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". . ."
   ; 
		padding-bottom: 1em;
}
	
	
.eb-post img{
	height: 5em;
	width: auto;
	display: block;
	float: left;
	clear: none;
	margin: 1em auto .5em;

}

	
	
	
	
	
	
}





    /* Desktop Layout: 769px to a max of 1080px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1080px) {
	
    
    
	.gridContainer {
		width: 100vw;
		float: left;
		clear: both;
		position: relative;
		z-index: 20;
		border-radius: 0 0 2em 2em;
		height: auto;
		background-color: #FFFDFC;
		padding: 0 0 5em 0;
		margin-bottom: 80vh;
	}
    
	
	
	
	.hero{
		height: 100vh;
		width: 100vw;
		display: block;
		float: left;
		clear: none;
		position: relative;
		z-index: 0;
	}
	
	
	.circular{ 
		width: 80vw;
		height: 80vw;
		display: block;
		float: left;
		clear: none;
		position: absolute;
		top: -35vw;
		left: 10vw;
	}
    
	.circular svg{
		width: 100%;
		height: 100%;
		display: block;
		float: left;
		clear: both;
		position: absolute;
		z-index: 0;
			-webkit-animation: rotate-center 20s linear infinite both;
	        animation: rotate-center 20s linear infinite both;
		filter: blur(5px);
	}
	
	
	.circular #c-logo{
		background-image: url("../img/logo/mo-whitegb-cirular.svg");
		position: absolute;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-position: center;
		background-size: 4em;
		background-repeat: no-repeat;

	}
    


@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}







    
    
    
.heroslider{
	width: 100%;
	height: 100%;
	float: left;
	clear: both;
	position: absolute;
	z-index: 10;
	top: auto;
	left: auto;
	overflow: hidden;
}


.topslide.swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
    }


.swiper-slide.topslide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;


}






.topslide h1{
	
}
    

.tophamid{
padding: 0vh 0 0;
	text-align: center;
	width: 100%;
	height: 100%;
	 display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	margin-left: 0vw;
}

.tophamid h1{
		color: #D6B58C;
}

.tophamid p{
		color: #000;
}



.ti-down{
	width: 100%;
	clear: both;
	margin: 1em 0;
	  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0em 2em; 
  grid-template-areas: 
    ". ."; 
}






.top-quotes{
	width: 90%;
	height: 80%;
	display: block;
	float: left;
	clear: none;
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0em 2em; 
  grid-template-areas: 
    ". .";
	margin: 10% 5% auto;
	position: relative;
	
}


.quote{
	height: auto;
	display: block;
	width: 100%;
	height: 100%;
	float: left;
	clear: none;
	position: relative;
}

#quote1{
	width:55%;
	height: auto;
	float: left;
	clear: none;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: auto auto 10em;
}

#quote2{
	width: 50%;
	height: auto;
	float: right;
	text-align: right;
	clear: none;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	margin: auto auto ;
}

.quote h5 i{
	font-style: normal;
	font-family: "Aptos-Light";
	color: aqua;
	font-weight: 100;
	color: #606060;
	letter-spacing: -0.005em;
	font-size: 1em;
	margin: 0;
}

.quote h5{
	font-weight: 300;
}

.quote h3{
	color: #116982;
	
	font-family: "Aptos-Black";
}













.mo-img{
	width: 40%;
	height: 90vh;
	display: block;
	float: left;
	clear: none;
	position: absolute;
	z-index: 20;
	left: 30%;
	bottom: -3em;
	background-position: top;
	background-repeat: no-repeat;
	background-image: url("../img/mo-top-1.png");
	background-size: contain;
}




.hero-gradient{
	width: 100%;
	height: 30vh;
	display: block;
	float: left; 
	clear: none;
	z-index: 40;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #FFFDFC;
background: linear-gradient(360deg,rgba(255, 253, 252, 1) 0%, rgba(255, 253, 252, 0) 100%);
}
















.media-slide{
	width: 90%;
	margin: -5vh 5% auto;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: relative;
}

.ms-left{
	width: 20%;
	height: 50vh;
	display: block;
	float: left;
	clear: none;
	display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;

}


.ms-left h2{
	transform-origin: center;
	transform: rotate(90deg);
	color: #D6B58C;
	text-align: center;
	width: 100%;
	height: 100%;
	display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}


.ms-right{
	width: 80%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	border-radius: 0em;
	
}










.abdulhamid{
	width: 60%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 20vh 20%;
	text-align: center;
}

.ah2 i{
	font-size: 7em;
	width: 70%;
	margin: 25vh 15%;
	text-align: center;
}


.experience{
	width: 95%;
	height: auto;
	display: block;
	float: right;
	background-color: #116982;
	border-radius: 2em 0 0 2em;
	position: relative;
	z-index: 10;
}


.experience-top{
	width: 80vw;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 4em 5vw;
	letter-spacing: -0.008em;
	position: relative;
}

.experience-top h2{
	color: #fff;
	font-size: 8em;
}

.experience-top h2 span{
	color: #D6B58C;
}

.et-left{
	width: 70%;
	display: block;
	float: left;
	clear: none;
	height: auto;
	position: relative;
}


.et-right{
	width: 15%;
	height: auto;
	padding: 1.5em;
	display: block;
	float: right;
	clear: none;
	background-color: #167E9B;
	border-radius: 1em;
	color: #fff;
	position: absolute;
	bottom: 2em;
	right: 0;
}



.experience-down{
	width: 100%;
	height: 100vh;
	display: block;
	float: left;
	clear: none;
	background-image: url("../img/MO-11.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.experience-down svg{
	margin: 10vh 5vw auto;
	height: 4em;
	width: auto;
}








.engagements{
	width: 70%;
	margin: 0vh 15%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: relative;
	z-index: 100;
	border: 0x solid #D1D1D1;
	border-top-width: .5px;
	padding:1em auto;
	box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
-webkit-box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
-moz-box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
	border-radius: 2em;
	background-color: white;
}



.engagements-bottom{
	width: 95%;
	margin: auto 2.5%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 2em 3em; 
  grid-template-areas: 
    ". . ."; 
}


.eb-post{
	height: 30vh;
	width: 100%;
	display:block;
	float: left;
	clear: none;
	text-align: center;
	margin: 5vh auto;
}


.eb-post span{
	width: 100%;
	height: 20vh;
	clear: both;
	float: left;
	display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}


.eb-post img{
	height: 5em;
	width: auto;
	display: block;
	float: left;
	clear: none;
	margin: 1em auto 1.5em;

}









.pauseimage{
	position: relative;
z-index: 0;
margin: -10vh 0 0vh 0 ;
height: 100vh;
width: 100%;
display: block;
float: left;
clear: none;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
z-index: 0;
}






.events{
	width: 90%;
	margin: -10vh 5% auto;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: relative;
	z-index: 100;
	border: 0x solid #D1D1D1;
	border-top-width: .5px;
	padding:1em auto;
	box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
-webkit-box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
-moz-box-shadow: 1px 7px 71px -4px rgba(214,181,140,0.36);
	border-radius: 2em;
	background-color: white;
	
}


.event-slide{
	height: 60vh;
	width: 90%;
	display: block;
	float: left;
	clear: none;
	
}


.eventswiper{
	width: 95%;
	height: 100vh;
	display: block;
	float: left;
	clear: both;
	margin: 2em 2.5%;
}


.swiper-pagination-eventswiper{
	left: 50%;
	position: absolute;
	bottom: 0;
}


.event{
	width: 100%;
	margin: auto 0%;
	height: 90vh;
	display: block;
	float: left;
	clear: none;
	background-color: white;
	border: .5px solid #B8B8B8;
	border-radius: 1em;
	overflow: hidden;
	position: relative;
}


.event:hover .event-img{
	height: 65%;
}


.event:hover .et-details{
	opacity: 0;
	transform: scale(90%);
	transform-origin: top left;
	height: 0;
}


.event:hover .et-title h2{
	transform: scale(90%) translateX(-.5em);
	float: left;
	text-align: left;
}


.event:hover .eventbutton{
	bottom: 1em;
	opacity: 1;
}

.event-img{
	background-color: #BFD2D7;
	height: 55%;
	width: 100%;
	border: 1em;
	display: block;
	float: left;
	clear: none;
	background-position: center;
	background-size: cover;
	transition: .3s all;
	border-radius: 1em;
}

.event-text{
	width: 90%;
	height: auto;
	display: block;
	float: left;
	margin: 1em 5%;
	transition: .3s all;
	clear: both;
}

.et-title h4{
	margin: 0;
	transition: .3s all;
	font-weight: 700;
	letter-spacing: 0;
	font-family: "Aptos-Bold";
	font-size: 2em;
}

.et-title p{
	color: #167E9B;
	margin: 0;
	transition: .3s all;
}


.et-details{
	margin: 1em auto;
	display: block;
	height: auto;
	overflow: hidden;
	transition: .3s all;
	clear: both;
	opacity: 1;
}


.et-contact{
	border-radius: 3em;
	background-color: rgba(180,216,226,.45);
	padding: .8em 1em;
	display: block;
	float: left;
	clear: none;
		display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	clear: both;
	margin: .25em 0;
}

.et-contact i{
	color: #116982;
	font-size: 1.2em;
	margin: auto .5em auto auto;
}

.et-contact p{
	color: #000;
}


.eventbutton{
	position: absolute;
	bottom: .5em;
	right: 1em;
	opacity: 0;
}









.borderedec{
		border-radius: 1em; 
		border: .5px solid #B8B8B8;
		background-color: white;
		padding: 2em;
		width: calc(100% - 4em);
		height: calc(100% - 4em);
		display: block;
		float: left;
		clear: none;
		position: relative;
	}
	









    
    /* Desktop Layout:1080px to a max of 1440px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1440px) {
	
	
	
	
	
	
	
	
	
	
	
}
    
        /* Desktop Layout: 1440px to a max of 1920px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1920px) {
	
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
    
    
    
}
            /* Desktop Layout: 1920px to a max of 2400px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 2400px) {
	

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
		
}