@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. */






	.grid-Container{
		width: 100vw;
		height: auto;
	}
	
    
.hero{
	width: 100%;
	height: auto;
	background-color: #3a4047;
	border-radius: 0 0 1em 1em;
	display: block;
	float: left;
	clear: both;
	margin: 0 auto 0vh auto;
}



.hero .swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 2em 2em;
    }


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

}



.hero .swiper-button-prev,
.hero .swiper-container-rtl .swiper-button-next {
   bottom: 5em;
   left: 7.5%;

}
.hero .swiper-button-prev:after,
.hero .swiper-container-rtl .swiper-button-next:after {

}
.hero .swiper-button-next,
.hero .swiper-container-rtl .swiper-button-prev {
  bottom: 5em;
   left: calc(7.5% + 3.5em);
}



.hero .slide{
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slidetext{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
		background: #3A4047;
background: linear-gradient(135deg, rgba(58, 64, 71, 1) 10%, rgba(58, 64, 71, 0.7) 60%, rgba(58, 64, 71, 0) 100%);
}

.slidetext-inner{
	width: 90%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 20vh 5vw auto 5vw;
	color: #fff;
}

.slidetext-inner h2{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner h3{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner h6{
	line-height: 1em;
	margin: auto auto 10px auto;
	font-family: 'GeneralSans-Medium';
	font-weight: 500;
}

.slidetext-inner p{
	margin: 10px auto 2em;
	width: 90%;
	float: left;
	clear: both;
}

.slidetext-inner span{
	color: #8a98aa;
	font-family: 'GeneralSans-Medium';
	letter-spacing: 1px;
	font-size: .9em;
}


.hero-down{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	margin: 5em 0% 0 0%;
	position: relative;
	z-index: 100;

}



.hd-left{
	width: 45%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 0 0em;
	color: #fff;
	font-family: "Aptos-Light";
	position: relative;
	z-index: 10;

}

.hd-left h3{
	font-family: "Aptos-Light";
}


.hd-right{
	width: calc(90% - 0em);
	height: 80vh;
	display: block;
	float: right;
	clear: none;
	margin: 2em 0;
	position: relative;
	top: -30vh;
	right: 5%;
	bottom: 0;
	margin-bottom: -20vh;
	position: relative;
	z-index: 10;
	background-color: #00a8e1;
	backdrop-filter: blur(10px); /* Adjust blur radius as needed */
	border-radius: 1.5em;
	background-size: 150%;
	background-position: bottom left;
	background-repeat: no-repeat;
	overflow: hidden;
}


.hdr-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background: #3A4047;
	background: linear-gradient(135deg, rgba(58, 64, 71, 0) 0%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0.5) 100%);
}


.hdri{
	 display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 1em 1em; 
  grid-template-areas: 
    "."
    "."
    "."; 
	width: 90%;
	margin: 2em 5%;
	height: auto;
	float: left;
	clear: both;
}

.hdri-point{
	width: calc(100% - 2em);
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 1em 1em;
	color: #fff;x
}

.hdri-point h1{
	font-family: 'GeneralSans-Semibold';
}

.hdri-point h5{
	font-family: 'GeneralSans-Regular';
}


.hdri-play{
	position: absolute;
	bottom: 1.5em;
	right: 1em;
	background-color: white;
	color: #3A4047;
	padding: .5em .5em .5em 1.5em;
	border-radius: 2em;
	cursor: pointer;
	display: block;
	float: right;
	clear: none;
	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;
	  font-family: 'GeneralSans-Regular';
	  font-size: .9em;
}

.hdri-play span{
	margin: auto 1em auto auto;
}

.hd-marquee{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	margin: 0em auto 0em;
	overflow: visible;
	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;
	  position: absolute;
	  top: 0;
	  right: 0;
	 
}

.marquee {
  width: 100%;
  height: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee p {
  display: inline-block;
  padding-right: 0;
  -webkit-animation: slide-left 120s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	animation: slide-left 120s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	width: auto;
	height: 100%;
	font-family: 'GeneralSans-Bold';
	color: #50565e;
	font-size: 15em;
	margin: 0;
	line-height: .8em;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}











.about-home{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh auto ;

}

.ah-top{
	width: 90%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto 5% 3em;
}


.aht-left{
	width: calc(100% - 2em);
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: -8vh 0 auto;
	background-color: white;
	position: relative;
	z-index: 0vh;
	border-radius: 2em;
	padding: 2em 1em;
}

.aht-left h6, .sh-top h6{
	margin: 1em 0;
	display: block;
	clear: both;
	float: left;
	width: 100%;
	color: #727272;
	text-align: left;
	font-family: 'GeneralSans-Regular';
	padding: 0em 1em;
}

.aht-left h3{
	padding: 0em .5em;
	color: #373d44;
	display: block;
	line-height: 1.2em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-align: left;
	font-family: 'GeneralSans-Medium';
}


.aht-left p{
	padding: 0em 1em;
	color: #373d44;
	display: block;
	line-height: 1.4em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-align: left;
	font-family: 'GeneralSans-Regular';
}

.aht-left button{
	right: 0;
	float: right;
	margin: auto 2em;
}









.aht-right{
	width: 100%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	margin: 5vh 0 auto;
}

.atr-title{
	width: 90%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: relative;
	top: auto;
	margin: auto 5%;
}

.aht-right h2{
	color: #373d44;
}


.aht-right .corevalues{
	width: 100%;
	height: auto;
	border-radius: 2em;
	float: right;
	clear: none;
	display: block;
	 display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 1em 1em; 
  grid-template-areas: 
    "."
    "."
    "."
    "."; 
	margin: 5vh 0;
}

 
.cv{
	width: calc(100% - 5em);
	height: calc(50vh - 5em);
	float: left;
	clear: none;
	display: block;
	padding: 2.5em;
	background-repeat: no-repeat;
	border-radius: 2em;
}


.cv-ico{
	width: 2em;
	height: 2em;
	font-size: 2em;
	color: #00a8e1;
	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;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: 70%;
	margin: 0em 0 .2em;
	border-radius: 2.5em;
}


.cv-text{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
}


.cv-text h3 {
	margin: auto auto .5em;
}


.cv-quality {
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-up.svg);
	background-position: top right;
	color: #373d44;
}

.cv-localcontent{
	background-color: #373d44;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-up.svg);
	background-position: top right;
	color: #fff;
}


.cv-safety{
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-down.svg);
	background-position: bottom right;
	color: #373d44;
}

.cv-sustainability{
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-down.svg);
	background-position: bottom right;
	color: #373d44;
}


.cvsusp{
	background-color: #f7f7f7;
	color: #373d44;
}













.ah-pause-img{
	width: 100%;
	height: 120vh;
	display: block;
	float: left;
	clear: none;
	margin: 0vh auto;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	border-radius: 0 0 2em 2em;
}


.api-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	background: #F3FDFF;
background: linear-gradient(180deg, rgb(243, 253, 255) 0%, rgba(243, 253, 255, 0.3) 35%, rgba(243, 253, 255, 0) 70%);
}


.apii-top{
	width: 80%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 10%;
	text-align: center;
}

.apii-top h3{
	color: #373d44;
	margin: auto auto 1em;
	text-align: center;
}

.apii-top p{
	color: #373d44;
}

.apii-top button{
	text-align: center;
	float: none;
	clear: both;
	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;
	  background-position: center;
	  width: 70%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 1em 15%;

}













.ah-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 2em 0% 2em;
	position: relative;

}



.ah-bottom h2{
	color: #3a4047;
	margin-left: 7.5%;
	margin-top: 5vh;
}

.ah-bottom h5{
	color: #3a4047;
	margin-left: 7.5%;
	font-family: 'GeneralSans-Light';
	letter-spacing: .5px;
}



.ah-bottom .swiper-container {
      width: calc(100% - 2em);
      height: 80vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	overflow-y: visible;
	border-radius: 2.5em 2.5em;
	margin: 5vh 1em;
    }


.ah-bottom .swiper-wrapper{
	overflow-y: visible;
}












.ab-lists{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	list-style-type: none;
	margin: 0;
	margin: 0vh 0 0vh;
	padding-left: 0;
}

.ab-lists li{
	width: calc(90% - 2.5%);
	padding: .5em 5%;
	font-size: 2em;
	color: #373d446d;
	border: 0 0 0 .2px;
	font-family: 'GeneralSans-Semibold';
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: center;
      align-items: center;
	  background-position: center;
	  position: relative;
	  transition: all .3s;
}


.ab-lists li:hover{
	color: #373d44;
}



.ab-lists li i{
	font-size: .6em;
	float: right;
	position: absolute;
	right: 10%;
	color: #00a8e1;
	opacity: 0;
	transition: all .3s;
}


.ab-lists li:hover i{
	opacity: 1;
	right: 0%;
}










.clientelle-show{
	width: 90%;
	height: auto;
	display: block;
	float: left;
margin: auto 5%;

}

.cs-inner{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
}


.cs-left{
	width: 100%;
	height: auto;
	float: left;
	clear: none;
	position: relative;
	background-color: white;
	border-radius: 2em;
	box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
-webkit-box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
-moz-box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
	display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    ". ."; 
	overflow: hidden;
}


.cs-client{
	background-size: 70%;
	background-position: center;
	background-color: white;
	background-repeat: no-repeat;
	float: left;
	clear: none;
	height: 20vh;
	width: 100%;
}



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

.cs-right h2{
	color: #373d44;
}


.cs-right p{
	line-height: 1.4em;
	width: 90%;
	margin: 2em 0;
}






.media-at-home{
	background-color: #373d44;
	height: auto;
	width: 100%;
	float: left;
	clear: none;
	margin: 0vh 0 0;
}



.mah-inner{
	width: 90%;
	height: auto;
	margin: 2em 5%;
	display: block;
	float: left;
	clear: none;
}


  .mah-inner .swiper-container {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

   .mah-inner .swiper-slide {
      background-size: cover;
      background-position: center;

    }

    .mah-inner .gallery-top {
      height: 140vh;
      width: 100%;
	  float: right;
	  clear: none;
	  display: block;
	  margin: 5vh auto;
    }

   .mah-inner .gallery-thumbs {
      height:25vh;
	  width: 100%;
      box-sizing: border-box;
      padding: 10px 0;
	  float: left;
	  clear: none;
	  display: block;
	  transition: all .3s;
	  

    }

	.mah-inner .gallery-thumbs .swiper-wrapper{
		margin: 3vh 0 0;
		display: grid; 
		grid-auto-flow: row dense; 
		grid-template-columns: 1fr 1fr 1fr 1fr; 
		grid-template-rows: 1fr; 
		gap: 1em 1em; 
		grid-template-areas: 
			"auto auto auto auto"; 
	}

	.mah-inner .gallery-thumbs h2{
		color: #fff;
		transition: all .3s;
	}

	.mah-inner .gallery-thumbs h5{
		color: #fff;
		line-height: .9em;
		margin: 0;
		padding: 0;
		font-family: 'GeneralSans-Regular';
		transition: all .3s;
	}

   .mah-inner .gallery-thumbs .swiper-slide {
      height: auto;
      opacity: 0.4;
	  cursor: pointer;
	  padding: 0em 0;
	  margin: 0;
	  transition: all .3s;
    }

    .mah-inner .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
	  height: auto;
	  transition: all .3s;
    }

	.mah-inner .gallery-thumbs .swiper-slide-thumb-active h5{
		color: #00a8e1;
		font-size: 1.2em;
		transition: all .3s;
		font-family: 'GeneralSans-Semibold';
	}



	.gallery-thumbs .swiper-button-prev,
.gallery-thumbs .swiper-button-next {
  width: calc(var(--swiper-navigation-size) / 33 * 20);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 100;
  position: absolute;
     font-size: 1em;
  width: 1em;
  height: 1em;
  border-radius: 5em;
  border: 2px solid rgba(255, 255, 255, 1);
  padding: .5em;
  transition: all .3s;
}


.gallery-thumbs .swiper-button-prev:hover,
.gallery-thumbs .swiper-button-next:hover {
  background-color: white;
  color: #000000;
}


.gallery-thumbs .swiper-button-prev,
.gallery-thumbs .swiper-container-rtl .swiper-button-next {
   bottom: 0em;
   left: 0%;
}

.gallery-thumbs .swiper-button-next,
.gallery-thumbs .swiper-container-rtl .swiper-button-prev {
  bottom: 0em;
   left: calc(5% + 2em);
}
















	.medialist-pane{
		width: 100%;
		height: auto;
		display: block;
		float: left;
		clear: none;
	}


	.medialist-pane h3{
		color: #00a8e1;
		font-family: 'GeneralSans-Medium';
	}

	.mp-list{
		 display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr; 
  gap: 1em 1em; 
  grid-template-areas: 
    "."; 
	width: 100%;
	height: auto;
	}






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

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

	.grid-Container{
		width: 100vw;
		height: auto;
	}
	
    
.hero{
	width: 100%;
	height: auto;
	background-color: #3a4047;
	border-radius: 0 0 5em 5em;
	display: block;
	float: left;
	clear: both;
	margin: 0 auto 0vh auto;
}



.hero .swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 5em 5em;
    }


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

}



.hero .swiper-button-prev,
.hero .swiper-container-rtl .swiper-button-next {
   bottom: 5em;
   left: 7.5%;

}
.hero .swiper-button-prev:after,
.hero .swiper-container-rtl .swiper-button-next:after {

}
.hero .swiper-button-next,
.hero .swiper-container-rtl .swiper-button-prev {
  bottom: 5em;
   left: calc(7.5% + 3.5em);
}



.hero .slide{
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slidetext{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
		background: #3A4047;
background: linear-gradient(135deg, rgba(58, 64, 71, 1) 10%, rgba(58, 64, 71, 0.5) 60%, rgba(58, 64, 71, 0) 100%);
}

.slidetext-inner{
	width: 60%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 25vh 7.5vw auto 7.5vw;
	color: #fff;
}

.slidetext-inner h2{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner h3{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner h6{
	line-height: 1em;
	margin: auto auto 10px auto;
	font-family: 'GeneralSans-Medium';
	font-weight: 500;
}

.slidetext-inner p{
	margin: 10px auto 2em;
	width: 70%;
	float: left;
	clear: both;
}

.slidetext-inner span{
	color: #8a98aa;
	font-family: 'GeneralSans-Medium';
	letter-spacing: 1px;
	font-size: .9em;
}


.hero-down{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	margin: 5em 0% 0 0%;
	position: relative;
	z-index: 100;

}



.hd-left{
	width: 45%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 0 0em;
	color: #fff;
	font-family: "Aptos-Light";
	position: relative;
	z-index: 10;

}

.hd-left h3{
	font-family: "Aptos-Light";
}


.hd-right{
	width: calc(75% - 4em);
	height: 50vh;
	display: block;
	float: right;
	clear: none;
	margin: 2em 0;
	position: relative;
	top: -35vh;
	right: 10%;
	bottom: 0;
	margin-bottom: -20vh;
	position: relative;
	z-index: 10;
	background-color: #00a8e1;
	backdrop-filter: blur(10px); /* Adjust blur radius as needed */
	border-radius: 1.5em;
	background-size: 80%;
	background-position: top right;
	background-repeat: no-repeat;
	overflow: hidden;
}


.hdr-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background: #3A4047;
	background: linear-gradient(135deg, rgba(58, 64, 71, 0) 0%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0.5) 100%);
}


.hdri{
	 display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr;
  gap: 2em 2em;
  grid-auto-flow: row dense;
  grid-template-areas:
    ". . .";
	width: 90%;
	margin: 3% 5%;
	height: auto;
	float: left;
	clear: both;
}

.hdri-point{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 1em;
	color: #fff;
}

.hdri-point h1{
	font-family: 'GeneralSans-Semibold';
}

.hdri-point h5{
	font-family: 'GeneralSans-Regular';
}


.hdri-play{
	position: absolute;
	bottom: 1.5em;
	right: 1.5em;
	background-color: white;
	color: #3A4047;
	padding: .5em .5em .5em 1.5em;
	border-radius: 2em;
	cursor: pointer;
	display: block;
	float: right;
	clear: none;
	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;
	  font-family: 'GeneralSans-Regular';
	  font-size: .95em;
}

.hdri-play span{
	margin: auto 1em auto auto;
}

.hd-marquee{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	margin: 0em auto 0em;
	overflow: visible;
	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;
	  position: absolute;
	  top: 0;
	  right: 0;
	 
}

.marquee {
  width: 100%;
  height: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee p {
  display: inline-block;
  padding-right: 0;
  -webkit-animation: slide-left 120s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	animation: slide-left 120s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	width: auto;
	height: 100%;
	font-family: 'GeneralSans-Bold';
	color: #50565e;
	font-size: 15em;
	margin: 0;
	line-height: .8em;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}











.about-home{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh auto ;

}

.ah-top{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto 7.5% 3em;
}


.aht-left{
	width: 60%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: -8vh 0 auto;
	background-color: white;
	position: relative;
	z-index: 0vh;
	border-radius: 2em;
	padding: 2em 3em;
}

.aht-left h6, .sh-top h6{
	margin: 1em 0;
	display: block;
	clear: both;
	float: left;
	width: 100%;
	color: #727272;
	text-align: left;
	font-family: 'GeneralSans-Regular';
	padding: 0em 1em;
}

.aht-left h3{
	padding: 0em .5em;
	color: #373d44;
	display: block;
	line-height: 1.2em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-align: left;
	font-family: 'GeneralSans-Medium';
}


.aht-left p{
	padding: 0em 1em;
	color: #373d44;
	display: block;
	line-height: 1.4em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-align: left;
	font-family: 'GeneralSans-Regular';
}

.aht-left button{
	right: 0;
	float: right;
	margin: auto 2em;
}









.aht-right{
	width: 100%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	margin: 10vh 0 auto;
}

.atr-title{
	width: 30%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: sticky;
	top: 8em;
	margin: auto;
}

.aht-right h2{
	color: #373d44;
}


.aht-right .corevalues{
	width: 70%;
	height: 100vh;
	border-radius: 2em;
	float: right;
	clear: none;
	display: block;
	  display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". ."
    ". ."; 
	margin: auto 0;
}

 
.cv{
	width: calc(100% - 5em);
	height: calc(100% - 5em);
	float: left;
	clear: none;
	display: block;
	padding: 2.5em;
	background-repeat: no-repeat;
	border-radius: 2em;
}


.cv-ico{
	width: 2em;
	height: 2em;
	font-size: 3em;
	color: #00a8e1;
	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;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: 70%;
	margin: 0em 0 .2em;
	border-radius: 2.5em;
}


.cv-text{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
}


.cv-text h3 {
	margin: auto auto .5em;
}


.cv-quality {
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-up.svg);
	background-position: top right;
	color: #373d44;
}

.cv-localcontent{
	background-color: #373d44;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-up.svg);
	background-position: top right;
	color: #fff;
}


.cv-safety{
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-down.svg);
	background-position: bottom right;
	color: #373d44;
}

.cv-sustainability{
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-down.svg);
	background-position: bottom right;
	color: #373d44;
}


.cvsusp{
	background-color: #f7f7f7;
	color: #373d44;
}













.ah-pause-img{
	width: 100%;
	height: 120vh;
	display: block;
	float: left;
	clear: none;
	margin: 10vh auto;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	border-radius: 0 0 2em 2em;
}


.api-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	background: #F3FDFF;
background: linear-gradient(180deg, rgb(243, 253, 255) 0%, rgba(243, 253, 255, 0.3) 35%, rgba(243, 253, 255, 0) 70%);
}


.apii-top{
	width: 40%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 5em 30%;
	text-align: center;
}

.apii-top h3{
	color: #373d44;
	margin: auto auto 1em;
}

.apii-top p{
	color: #373d44;
}

.apii-top button{
	text-align: center;
	float: none;
	clear: both;
	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;
	  background-position: center;
	  width: 40%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 1em 30%;

}













.ah-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 2em 0% 2em;
	position: relative;

}



.ah-bottom h2{
	color: #3a4047;
	margin-left: 7.5%;
	margin-top: 5vh;
}

.ah-bottom h5{
	color: #3a4047;
	margin-left: 7.5%;
	font-family: 'GeneralSans-Light';
	letter-spacing: .5px;
}



.ah-bottom .swiper-container {
      width: calc(100% - 5em);
      height: 80vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	overflow-y: visible;
	border-radius: 2.5em 2.5em;
	margin: 10vh 2.5em;
    }


.ah-bottom .swiper-wrapper{
	overflow-y: visible;
}












.ab-lists{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	list-style-type: none;
	margin: 0;
	margin: 0vh 0 15vh;
}

.ab-lists li{
	width: calc(90% - 15%);
	padding: .5em 7.5%;
	font-size: 5em;
	color: #373d446d;
	border: 0 0 0 .2px;
	font-family: 'GeneralSans-Semibold';
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: center;
      align-items: center;
	  background-position: center;
	  position: relative;
	  transition: all .3s;
}


.ab-lists li:hover{
	color: #373d44;
}



.ab-lists li i{
	font-size: .6em;
	float: right;
	position: absolute;
	right: 10%;
	color: #00a8e1;
	opacity: 0;
	transition: all .3s;
}


.ab-lists li:hover i{
	opacity: 1;
	right: 0%;
}










.clientelle-show{
	width: 85%;
	height: auto;
	display: block;
	float: left;
margin: auto 7.5%;

}

.cs-inner{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
}


.cs-left{
	width: 65%;
	height: auto;
	float: left;
	clear: none;
	position: relative;
	background-color: white;
	border-radius: 2em;
	box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
-webkit-box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
-moz-box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
	display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    ". . ."; 
	overflow: hidden;
}


.cs-client{
	background-size: 60%;
	background-position: center;
	background-color: white;
	background-repeat: no-repeat;
	float: left;
	clear: none;
	height: 30vh;
	width: 100%;
}



.cs-right{
	width: 30%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	position: sticky;
	top: 8em;
	margin: auto;
}

.cs-right h2{
	color: #373d44;
}


.cs-right p{
	line-height: 1.4em;
	width: 90%;
	margin: 2em 0;
}






.media-at-home{
	background-color: #373d44;
	height: 100vh;
	width: 100%;
	float: left;
	clear: none;
	margin: 20vh 0 0;
}



.mah-inner{
	width: 85%;
	height: auto;
	margin: 5em 7.5%;
	display: block;
	float: left;
	clear: none;
}


  .mah-inner .swiper-container {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

   .mah-inner .swiper-slide {
      background-size: cover;
      background-position: center;

    }

    .mah-inner .gallery-top {
      height: 80vh;
      width: 65%;
	  float: right;
	  clear: none;
	  display: block;
	  margin: auto;
    }

   .mah-inner .gallery-thumbs {
      height:55vh;
	  width: 30%;
      box-sizing: border-box;
      padding: 10px 0;
	  float: left;
	  clear: none;
	  display: block;
	  transition: all .3s;

    }

	.mah-inner .gallery-thumbs .swiper-wrapper{
		margin: 5vh 0 0;
		display: block;
	}

	.mah-inner .gallery-thumbs h2{
		color: #fff;
		transition: all .3s;
	}

	.mah-inner .gallery-thumbs h5{
		color: #fff;
		line-height: .9em;
		margin: 0;
		padding: 0;
		font-family: 'GeneralSans-Regular';
		transition: all .3s;
	}

   .mah-inner .gallery-thumbs .swiper-slide {
      height: 2em;
      opacity: 0.4;
	  cursor: pointer;
	  padding: 0em 0;
	  margin: 0;
	  transition: all .3s;
    }

    .mah-inner .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
	  height: 2.5em;
	  transition: all .3s;
    }

	.mah-inner .gallery-thumbs .swiper-slide-thumb-active h5{
		color: #00a8e1;
		font-size: 2em;
		transition: all .3s;
		font-family: 'GeneralSans-Semibold';
	}



	.gallery-thumbs .swiper-button-prev,
.gallery-thumbs .swiper-button-next {
  width: calc(var(--swiper-navigation-size) / 33 * 20);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 100;
  position: absolute;
     font-size: 1.2em;
  width: 1em;
  height: 1em;
  border-radius: 5em;
  border: 2px solid rgba(255, 255, 255, 1);
  padding: 1em;
  transition: all .3s;
}


.gallery-thumbs .swiper-button-prev:hover,
.gallery-thumbs .swiper-button-next:hover {
  background-color: white;
  color: #000000;
}


.gallery-thumbs .swiper-button-prev,
.gallery-thumbs .swiper-container-rtl .swiper-button-next {
   bottom: 0em;
   left: 0%;
}

.gallery-thumbs .swiper-button-next,
.gallery-thumbs .swiper-container-rtl .swiper-button-prev {
  bottom: 0em;
   left: calc(7.5% + 2.5em);
}
















	.medialist-pane{
		width: 100%;
		height: auto;
		display: block;
		float: left;
		clear: none;
	}


	.medialist-pane h3{
		color: #00a8e1;
		font-family: 'GeneralSans-Medium';
	}

	.mp-list{
		display: grid; 
	grid-auto-flow: row dense; 
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 1fr; 
	gap: 2em 2em; 
	grid-template-areas: 
		". ."; 
	width: 100%;
	height: auto;
	}







	
	

}



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

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




	
	.grid-Container{
		width: 100vw;
		height: auto;
	}
	
    
.hero{
	width: 100%;
	height: auto;
	background-color: #3a4047;
	border-radius: 0 0 5em 5em;
	display: block;
	float: left;
	clear: both;
	margin: 0 auto 0vh auto;
}



.hero .swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 2em 2em;
    }


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

}



.hero .swiper-button-prev,
.hero .swiper-container-rtl .swiper-button-next {
   bottom: 5em;
   left: 7.5%;

}
.hero .swiper-button-prev:after,
.hero .swiper-container-rtl .swiper-button-next:after {

}
.hero .swiper-button-next,
.hero .swiper-container-rtl .swiper-button-prev {
  bottom: 5em;
   left: calc(7.5% + 3.5em);
}



.hero .slide{
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slidetext{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
		background: #3A4047;
background: linear-gradient(135deg, rgba(58, 64, 71, 1) 10%, rgba(58, 64, 71, 0.5) 60%, rgba(58, 64, 71, 0) 100%);
}

.slidetext-inner{
	width: 60%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 25vh 7.5vw auto 7.5vw;
	color: #fff;
}

.slidetext-inner h2{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner h3{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner h6{
	line-height: 1em;
	margin: auto auto 10px auto;
	font-family: 'GeneralSans-Medium';
	font-weight: 500;
}

.slidetext-inner p{
	margin: 10px auto 2em;
	width: 70%;
	float: left;
	clear: both;
}

.slidetext-inner span{
	color: #8a98aa;
	font-family: 'GeneralSans-Medium';
	letter-spacing: 1px;
	font-size: .9em;
}


.hero-down{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	margin: 5em 0% 0 0%;
	position: relative;
	z-index: 100;

}



.hd-left{
	width: 45%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 0 0em;
	color: #fff;
	font-family: "Aptos-Light";
	position: relative;
	z-index: 10;
}

.hd-left h3{
	font-family: "Aptos-Light";
}


.hd-right{
	width: calc(70% - 4em);
	height: 45vh;
	display: block;
	float: right;
	clear: none;
	margin: 2em 0;
	position: relative;
	top: -35vh;
	right: 7.5%;
	bottom: 0;
	margin-bottom: -20vh;
	position: relative;
	z-index: 10;
	background-color: #00a8e1;
	backdrop-filter: blur(10px); /* Adjust blur radius as needed */
	border-radius: 1.5em;
	background-size: 80%;
	background-position: top right;
	background-repeat: no-repeat;
	overflow: hidden;
}


.hdr-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background: #3A4047;
	background: linear-gradient(135deg, rgba(58, 64, 71, 0) 0%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0.5) 100%);
}


.hdri{
	 display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr;
  gap: 2em 2em;
  grid-auto-flow: row dense;
  grid-template-areas:
    ". . .";
	width: 90%;
	margin: 3% 5%;
	height: auto;
	float: left;
	clear: both;
}

.hdri-point{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 1em;
	color: #fff;
}

.hdri-point h1{
	font-family: 'GeneralSans-Semibold';
}

.hdri-point h5{
	font-family: 'GeneralSans-Regular';
}


.hdri-play{
	position: absolute;
	bottom: 1.5em;
	right: 1.5em;
	background-color: white;
	color: #3A4047;
	padding: .5em .5em .5em 1.5em;
	border-radius: 2em;
	cursor: pointer;
	display: block;
	float: right;
	clear: none;
	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;
	  font-family: 'GeneralSans-Regular';
	  font-size: .95em;
}

.hdri-play span{
	margin: auto 1em auto auto;
}

.hd-marquee{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	margin: 0em auto 0em;
	overflow: visible;
	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;
	  position: absolute;
	  top: 0;
	  right: 0;
	 
}

.marquee {
  width: 100%;
  height: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee p {
  display: inline-block;
  padding-right: 0;
  -webkit-animation: slide-left 120s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	animation: slide-left 120s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	width: auto;
	height: 100%;
	font-family: 'GeneralSans-Bold';
	color: #50565e;
	font-size: 15em;
	margin: 0;
	line-height: .8em;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}











.about-home{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh auto ;

}

.ah-top{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto 7.5% 3em;
}


.aht-left{
	width: 60%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: -8vh 0 auto;
	background-color: white;
	position: relative;
	z-index: 0vh;
	border-radius: 2em;
	padding: 2em 3em;
}

.aht-left h6, .sh-top h6{
	margin: 1em 0;
	display: block;
	clear: both;
	float: left;
	width: 100%;
	color: #727272;
	text-align: left;
	font-family: 'GeneralSans-Regular';
	padding: 0em 1em;
}

.aht-left h3{
	padding: 0em .5em;
	color: #373d44;
	display: block;
	line-height: 1.2em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-align: left;
	font-family: 'GeneralSans-Medium';
}


.aht-left p{
	padding: 0em 1em;
	color: #373d44;
	display: block;
	line-height: 1.4em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-align: left;
	font-family: 'GeneralSans-Regular';
}

.aht-left button{
	right: 0;
	float: right;
	margin: auto 2em;
}









.aht-right{
	width: 100%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	margin: 10vh 0 auto;
}

.atr-title{
	width: 30%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: sticky;
	top: 8em;
	margin: auto;
}

.aht-right h2{
	color: #373d44;
}


.aht-right .corevalues{
	width: 70%;
	height: 100vh;
	border-radius: 2em;
	float: right;
	clear: none;
	display: block;
	  display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". ."
    ". ."; 
	margin: auto 0;
}

 
.cv{
	width: calc(100% - 5em);
	height: calc(100% - 5em);
	float: left;
	clear: none;
	display: block;
	padding: 2.5em;
	background-repeat: no-repeat;
	border-radius: 2em;
}


.cv-ico{
	width: 2em;
	height: 2em;
	font-size: 3em;
	color: #00a8e1;
	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;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: 70%;
	margin: 0em 0 .2em;
	border-radius: 2.5em;
}


.cv-text{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
}


.cv-text h3 {
	margin: auto auto .5em;
}


.cv-quality {
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-up.svg);
	background-position: top right;
	color: #373d44;
}

.cv-localcontent{
	background-color: #373d44;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-up.svg);
	background-position: top right;
	color: #fff;
}


.cv-safety{
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-down.svg);
	background-position: bottom right;
	color: #373d44;
}

.cv-sustainability{
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-down.svg);
	background-position: bottom right;
	color: #373d44;
}


.cvsusp{
	background-color: #f7f7f7;
	color: #373d44;
}













.ah-pause-img{
	width: 100%;
	height: 120vh;
	display: block;
	float: left;
	clear: none;
	margin: 10vh auto;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	border-radius: 0 0 2em 2em;
}


.api-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	background: #F3FDFF;
background: linear-gradient(180deg, rgb(243, 253, 255) 0%, rgba(243, 253, 255, 0.3) 35%, rgba(243, 253, 255, 0) 70%);
}


.apii-top{
	width: 40%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 5em 30%;
	text-align: center;
}

.apii-top h3{
	color: #373d44;
	margin: auto auto 1em;
}

.apii-top p{
	color: #373d44;
}

.apii-top button{
	text-align: center;
	float: none;
	clear: both;
	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;
	  background-position: center;
	  width: 40%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 1em 30%;

}













.ah-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 2em 0% 2em;
	position: relative;

}



.ah-bottom h2{
	color: #3a4047;
	margin-left: 7.5%;
	margin-top: 5vh;
}

.ah-bottom h5{
	color: #3a4047;
	margin-left: 7.5%;
	font-family: 'GeneralSans-Light';
	letter-spacing: .5px;
}



.ah-bottom .swiper-container {
      width: calc(100% - 5em);
      height: 80vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	overflow-y: visible;
	border-radius: 2.5em 2.5em;
	margin: 10vh 2.5em;
    }


.ah-bottom .swiper-wrapper{
	overflow-y: visible;
}












.ab-lists{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	list-style-type: none;
	margin: 0;
	margin: 0vh 0 15vh;
}

.ab-lists li{
	width: calc(90% - 15%);
	padding: .5em 7.5%;
	font-size: 5em;
	color: #373d446d;
	border: 0 0 0 .2px;
	font-family: 'GeneralSans-Semibold';
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: center;
      align-items: center;
	  background-position: center;
	  position: relative;
	  transition: all .3s;
}


.ab-lists li:hover{
	color: #373d44;
}



.ab-lists li i{
	font-size: .6em;
	float: right;
	position: absolute;
	right: 10%;
	color: #00a8e1;
	opacity: 0;
	transition: all .3s;
}


.ab-lists li:hover i{
	opacity: 1;
	right: 0%;
}










.clientelle-show{
	width: 85%;
	height: auto;
	display: block;
	float: left;
margin: auto 7.5%;

}

.cs-inner{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
}


.cs-left{
	width: 65%;
	height: auto;
	float: left;
	clear: none;
	position: relative;
	background-color: white;
	border-radius: 2em;
	box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
-webkit-box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
-moz-box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
	display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    ". . ."; 
	overflow: hidden;
}


.cs-client{
	background-size: 60%;
	background-position: center;
	background-color: white;
	background-repeat: no-repeat;
	float: left;
	clear: none;
	height: 30vh;
	width: 100%;
}



.cs-right{
	width: 30%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	position: sticky;
	top: 8em;
	margin: auto;
}

.cs-right h2{
	color: #373d44;
}


.cs-right p{
	line-height: 1.4em;
	width: 90%;
	margin: 2em 0;
}






.media-at-home{
	background-color: #373d44;
	height: 100vh;
	width: 100%;
	float: left;
	clear: none;
	margin: 20vh 0 0;
}



.mah-inner{
	width: 85%;
	height: auto;
	margin: 5em 7.5%;
	display: block;
	float: left;
	clear: none;
}


  .mah-inner .swiper-container {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

   .mah-inner .swiper-slide {
      background-size: cover;
      background-position: center;

    }

    .mah-inner .gallery-top {
      height: 80vh;
      width: 65%;
	  float: right;
	  clear: none;
	  display: block;
	  margin: auto;
    }

   .mah-inner .gallery-thumbs {
      height:55vh;
	  width: 30%;
      box-sizing: border-box;
      padding: 10px 0;
	  float: left;
	  clear: none;
	  display: block;
	  transition: all .3s;

    }

	.mah-inner .gallery-thumbs .swiper-wrapper{
		margin: 5vh 0 0;
		display: block;
	}

	.mah-inner .gallery-thumbs h2{
		color: #fff;
		transition: all .3s;
	}

	.mah-inner .gallery-thumbs h5{
		color: #fff;
		line-height: .9em;
		margin: 0;
		padding: 0;
		font-family: 'GeneralSans-Regular';
		transition: all .3s;
	}

   .mah-inner .gallery-thumbs .swiper-slide {
      height: 2em;
      opacity: 0.4;
	  cursor: pointer;
	  padding: 0em 0;
	  margin: 0;
	  transition: all .3s;
    }

    .mah-inner .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
	  height: 2.5em;
	  transition: all .3s;
    }

	.mah-inner .gallery-thumbs .swiper-slide-thumb-active h5{
		color: #00a8e1;
		font-size: 2em;
		transition: all .3s;
		font-family: 'GeneralSans-Semibold';
	}



	.gallery-thumbs .swiper-button-prev,
.gallery-thumbs .swiper-button-next {
  width: calc(var(--swiper-navigation-size) / 33 * 20);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 100;
  position: absolute;
     font-size: 1.2em;
  width: 1em;
  height: 1em;
  border-radius: 5em;
  border: 2px solid rgba(255, 255, 255, 1);
  padding: 1em;
  transition: all .3s;
}


.gallery-thumbs .swiper-button-prev:hover,
.gallery-thumbs .swiper-button-next:hover {
  background-color: white;
  color: #000000;
}


.gallery-thumbs .swiper-button-prev,
.gallery-thumbs .swiper-container-rtl .swiper-button-next {
   bottom: 0em;
   left: 0%;
}

.gallery-thumbs .swiper-button-next,
.gallery-thumbs .swiper-container-rtl .swiper-button-prev {
  bottom: 0em;
   left: calc(7.5% + 2.5em);
}
















	.medialist-pane{
		width: 100%;
		height: auto;
		display: block;
		float: left;
		clear: none;
	}


	.medialist-pane h3{
		color: #00a8e1;
		font-family: 'GeneralSans-Medium';
	}

	.mp-list{
		display: grid; 
	grid-auto-flow: row dense; 
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 1fr; 
	gap: 2em 2em; 
	grid-template-areas: 
		". ."; 
	width: 100%;
	height: auto;
	}














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

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


	.grid-Container{
		width: 100vw;
		height: auto;
	}
	
    
.hero{
	width: 100%;
	height: auto;
	background-color: #3a4047;
	border-radius: 0 0 5em 5em;
	display: block;
	float: left;
	clear: both;
	margin: 0 auto 0vh auto;
}



.hero .swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 5em 5em;
    }


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

}



.hero .swiper-button-prev,
.hero .swiper-container-rtl .swiper-button-next {
   bottom: 5em;
   left: 7.5%;

}
.hero .swiper-button-prev:after,
.hero .swiper-container-rtl .swiper-button-next:after {

}
.hero .swiper-button-next,
.hero .swiper-container-rtl .swiper-button-prev {
  bottom: 5em;
   left: calc(7.5% + 3.5em);
}



.hero .slide{
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slidetext{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
		background: #3A4047;
background: linear-gradient(135deg, rgba(58, 64, 71, 1) 10%, rgba(58, 64, 71, 0.5) 60%, rgba(58, 64, 71, 0) 100%);
}

.slidetext-inner{
	width: 60%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 25vh 7.5vw auto 7.5vw;
	color: #fff;
}

.slidetext-inner h2{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner h3{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner h6{
	line-height: 1em;
	margin: auto auto 10px auto;
	font-family: 'GeneralSans-Medium';
	font-weight: 500;
}

.slidetext-inner p{
	margin: 10px auto 2em;
	width: 70%;
	float: left;
	clear: both;
}

.slidetext-inner span{
	color: #8a98aa;
	font-family: 'GeneralSans-Medium';
	letter-spacing: 1px;
	font-size: .9em;
}


.hero-down{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	margin: 5em 0% 0 0%;
	position: relative;
	z-index: 100;

}



.hd-left{
	width: 45%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 0 0em;
	color: #fff;
	font-family: "Aptos-Light";
	position: relative;
	z-index: 10;

}

.hd-left h3{
	font-family: "Aptos-Light";
}


.hd-right{
	width: calc(65% - 4em);
	height: 45vh;
	display: block;
	float: right;
	clear: none;
	margin: 2em 0;
	position: relative;
	top: -35vh;
	right: 7.5%;
	bottom: 0;
	margin-bottom: -20vh;
	position: relative;
	z-index: 10;
	background-color: #00a8e1;
	backdrop-filter: blur(10px); /* Adjust blur radius as needed */
	border-radius: 1.5em;
	background-size: 80%;
	background-position: top right;
	background-repeat: no-repeat;
	overflow: hidden;
}


.hdr-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background: #3A4047;
	background: linear-gradient(135deg, rgba(58, 64, 71, 0) 0%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0.5) 100%);
}


.hdri{
	 display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr;
  gap: 2em 2em;
  grid-auto-flow: row dense;
  grid-template-areas:
    ". . .";
	width: 90%;
	margin: 3% 5%;
	height: auto;
	float: left;
	clear: both;
}

.hdri-point{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 1em;
	color: #fff;
}

.hdri-point h1{
	font-family: 'GeneralSans-Semibold';
}

.hdri-point h5{
	font-family: 'GeneralSans-Regular';
}


.hdri-play{
	position: absolute;
	bottom: 1.5em;
	right: 1.5em;
	background-color: white;
	color: #3A4047;
	padding: .5em .5em .5em 1.5em;
	border-radius: 2em;
	cursor: pointer;
	display: block;
	float: right;
	clear: none;
	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;
	  font-family: 'GeneralSans-Regular';
	  font-size: .95em;
}

.hdri-play span{
	margin: auto 1em auto auto;
}

.hd-marquee{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	margin: 0em auto 0em;
	overflow: visible;
	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;
	  position: absolute;
	  top: 0;
	  right: 0;
	 
}

.marquee {
  width: 100%;
  height: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee p {
  display: inline-block;
  padding-right: 0;
  -webkit-animation: slide-left 120s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	animation: slide-left 120s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	width: auto;
	height: 100%;
	font-family: 'GeneralSans-Bold';
	color: #50565e;
	font-size: 15em;
	margin: 0;
	line-height: .8em;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}











.about-home{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh auto ;

}

.ah-top{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto 7.5% 3em;
}


.aht-left{
	width: 60%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: -8vh 0 auto;
	background-color: white;
	position: relative;
	z-index: 0vh;
	border-radius: 2em;
	padding: 2em 3em;
}

.aht-left h6, .sh-top h6{
	margin: 1em 0;
	display: block;
	clear: both;
	float: left;
	width: 100%;
	color: #727272;
	text-align: left;
	font-family: 'GeneralSans-Regular';
	padding: 0em 1em;
}

.aht-left h3{
	padding: 0em .5em;
	color: #373d44;
	display: block;
	line-height: 1.2em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-align: left;
	font-family: 'GeneralSans-Medium';
}


.aht-left p{
	padding: 0em 1em;
	color: #373d44;
	display: block;
	line-height: 1.4em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-align: left;
	font-family: 'GeneralSans-Regular';
}

.aht-left button{
	right: 0;
	float: right;
	margin: auto 2em;
}









.aht-right{
	width: 100%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	margin: 10vh 0 auto;
}

.atr-title{
	width: 30%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	position: sticky;
	top: 8em;
	margin: auto;
}

.aht-right h2{
	color: #373d44;
}


.aht-right .corevalues{
	width: 70%;
	height: 100vh;
	border-radius: 2em;
	float: right;
	clear: none;
	display: block;
	  display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". ."
    ". ."; 
	margin: auto 0;
}

 
.cv{
	width: calc(100% - 5em);
	height: calc(100% - 5em);
	float: left;
	clear: none;
	display: block;
	padding: 2.5em;
	background-repeat: no-repeat;
	border-radius: 2em;
}


.cv-ico{
	width: 2em;
	height: 2em;
	font-size: 3em;
	color: #00a8e1;
	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;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: 70%;
	margin: 0em 0 .2em;
	border-radius: 2.5em;
}


.cv-text{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
}


.cv-text h3 {
	margin: auto auto .5em;
}


.cv-quality {
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-up.svg);
	background-position: top right;
	color: #373d44;
}

.cv-localcontent{
	background-color: #373d44;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-up.svg);
	background-position: top right;
	color: #fff;
}


.cv-safety{
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-down.svg);
	background-position: bottom right;
	color: #373d44;
}

.cv-sustainability{
	background-color: #e6faff;
	background-image: url(../img/svgs/Hasman-Graphic-Icon_gi-down.svg);
	background-position: bottom right;
	color: #373d44;
}


.cvsusp{
	background-color: #f7f7f7;
	color: #373d44;
}













.ah-pause-img{
	width: 100%;
	height: 120vh;
	display: block;
	float: left;
	clear: none;
	margin: 10vh auto;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	border-radius: 0 0 2em 2em;
}


.api-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	background: #F3FDFF;
background: linear-gradient(180deg, rgb(243, 253, 255) 0%, rgba(243, 253, 255, 0.3) 35%, rgba(243, 253, 255, 0) 70%);
}


.apii-top{
	width: 40%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 5em 30%;
	text-align: center;
}

.apii-top h3{
	color: #373d44;
	margin: auto auto 1em;
}

.apii-top p{
	color: #373d44;
}

.apii-top button{
	text-align: center;
	float: none;
	clear: both;
	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;
	  background-position: center;
	  width: 40%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 1em 30%;

}













.ah-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 2em 0% 2em;
	position: relative;

}



.ah-bottom h2{
	color: #3a4047;
	margin-left: 7.5%;
	margin-top: 5vh;
}

.ah-bottom h5{
	color: #3a4047;
	margin-left: 7.5%;
	font-family: 'GeneralSans-Light';
	letter-spacing: .5px;
}



.ah-bottom .swiper-container {
      width: calc(100% - 5em);
      height: 80vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	overflow-y: visible;
	border-radius: 2.5em 2.5em;
	margin: 10vh 2.5em;
    }


.ah-bottom .swiper-wrapper{
	overflow-y: visible;
}












.ab-lists{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	list-style-type: none;
	margin: 0;
	margin: 0vh 0 15vh;
}

.ab-lists li{
	width: calc(90% - 15%);
	padding: .5em 7.5%;
	font-size: 5em;
	color: #373d446d;
	border: 0 0 0 .2px;
	font-family: 'GeneralSans-Semibold';
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: center;
      align-items: center;
	  background-position: center;
	  position: relative;
	  transition: all .3s;
}


.ab-lists li:hover{
	color: #373d44;
}



.ab-lists li i{
	font-size: .6em;
	float: right;
	position: absolute;
	right: 10%;
	color: #00a8e1;
	opacity: 0;
	transition: all .3s;
}


.ab-lists li:hover i{
	opacity: 1;
	right: 0%;
}










.clientelle-show{
	width: 85%;
	height: auto;
	display: block;
	float: left;
margin: auto 7.5%;

}

.cs-inner{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
}


.cs-left{
	width: 65%;
	height: auto;
	float: left;
	clear: none;
	position: relative;
	background-color: white;
	border-radius: 2em;
	box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
-webkit-box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
-moz-box-shadow: 1px 11px 21px -9px rgba(55,61,68,0.2);
	display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    ". . ."; 
	overflow: hidden;
}


.cs-client{
	background-size: 60%;
	background-position: center;
	background-color: white;
	background-repeat: no-repeat;
	float: left;
	clear: none;
	height: 30vh;
	width: 100%;
}



.cs-right{
	width: 30%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	position: sticky;
	top: 8em;
	margin: auto;
}

.cs-right h2{
	color: #373d44;
}


.cs-right p{
	line-height: 1.4em;
	width: 90%;
	margin: 2em 0;
}






.media-at-home{
	background-color: #373d44;
	height: 100vh;
	width: 100%;
	float: left;
	clear: none;
	margin: 20vh 0 0;
}



.mah-inner{
	width: 85%;
	height: auto;
	margin: 5em 7.5%;
	display: block;
	float: left;
	clear: none;
}


  .mah-inner .swiper-container {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

   .mah-inner .swiper-slide {
      background-size: cover;
      background-position: center;

    }

    .mah-inner .gallery-top {
      height: 80vh;
      width: 65%;
	  float: right;
	  clear: none;
	  display: block;
	  margin: auto;
    }

   .mah-inner .gallery-thumbs {
      height:55vh;
	  width: 30%;
      box-sizing: border-box;
      padding: 10px 0;
	  float: left;
	  clear: none;
	  display: block;
	  transition: all .3s;

    }

	.mah-inner .gallery-thumbs .swiper-wrapper{
		margin: 5vh 0 0;
		display: block;
	}

	.mah-inner .gallery-thumbs h2{
		color: #fff;
		transition: all .3s;
	}

	.mah-inner .gallery-thumbs h5{
		color: #fff;
		line-height: .9em;
		margin: 0;
		padding: 0;
		font-family: 'GeneralSans-Regular';
		transition: all .3s;
	}

   .mah-inner .gallery-thumbs .swiper-slide {
      height: 2em;
      opacity: 0.4;
	  cursor: pointer;
	  padding: 0em 0;
	  margin: 0;
	  transition: all .3s;
    }

    .mah-inner .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
	  height: 2.5em;
	  transition: all .3s;
    }

	.mah-inner .gallery-thumbs .swiper-slide-thumb-active h5{
		color: #00a8e1;
		font-size: 2em;
		transition: all .3s;
		font-family: 'GeneralSans-Semibold';
	}



	.gallery-thumbs .swiper-button-prev,
.gallery-thumbs .swiper-button-next {
  width: calc(var(--swiper-navigation-size) / 33 * 20);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 100;
  position: absolute;
     font-size: 1.2em;
  width: 1em;
  height: 1em;
  border-radius: 5em;
  border: 2px solid rgba(255, 255, 255, 1);
  padding: 1em;
  transition: all .3s;
}


.gallery-thumbs .swiper-button-prev:hover,
.gallery-thumbs .swiper-button-next:hover {
  background-color: white;
  color: #000000;
}


.gallery-thumbs .swiper-button-prev,
.gallery-thumbs .swiper-container-rtl .swiper-button-next {
   bottom: 0em;
   left: 0%;
}

.gallery-thumbs .swiper-button-next,
.gallery-thumbs .swiper-container-rtl .swiper-button-prev {
  bottom: 0em;
   left: calc(7.5% + 2.5em);
}
















	.medialist-pane{
		width: 100%;
		height: auto;
		display: block;
		float: left;
		clear: none;
	}


	.medialist-pane h3{
		color: #00a8e1;
		font-family: 'GeneralSans-Medium';
	}

	.mp-list{
		display: grid; 
	grid-auto-flow: row dense; 
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 1fr; 
	gap: 2em 2em; 
	grid-template-areas: 
		". ."; 
	width: 100%;
	height: auto;
	}










}
    /* 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) {
	

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
		
}