@font-face {
	font-family: sansProRegular;
	src: url("../fonts/source-sans-pro-light.e8cc61f0.woff");
}
@font-face {
	font-family: sansProSemibold;
	src: url("../fonts/source-sans-pro-semibold.f18d3108.woff");
}

:root {
  --sideNavWidth: 16vw;
}

html,body{
	margin:0px;
	padding: 0px;
	overflow:hidden;
	font-family: sansProRegular;
	font-size: 1vw;
	max-height:100%;
	height:100%;
}

.replacementImage{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}

video{
	width:100%;
	height:100%;
	object-fit:cover;
	position:absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	/* border: 2px solid red; */
	
}

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

#app{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	max-height: 100%;
	width:100%;
	/* border: 2px dotted blue; */
	height: 100%;
}

#portraitContainer{ 
	display: none;
	position: fixed; 
	z-index: 100; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%; 
	overflow: auto; 
	flex-direction: column;
	align-items: center;
	justify-content: center; 
	background-color: #ab377a;
	transition: 0.3s ease-in-out;
}

#portraitImage{
	width: 40vw;
	height: 40vw;
	background: none;
	position: relative;
	outline: 1px solid transparent;
}

@keyframes rotate {
	0%  {opacity:0; transform: rotate(0deg) scale(0.6);}
	5%  {opacity:0; transform: rotate(0deg) scale(0.6);}
	30% {opacity:1; transform: rotate(0deg) scale(1);}
	70% {opacity:1; transform: rotate(-90deg) scale(1);}
	95%	{opacity:0; transform: rotate(-90deg) scale(0.6);}
	100%{opacity:0; transform: rotate(-90deg) scale(0.6);}
}

@keyframes load {
	0%  {transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}

#portraitMessage{
	color: white;
	font-family: sansProRegular;
}

#loadingContainer{
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: none;
	display: none;
	justify-content: center;
	align-items: center;
	background-color: rgba(255,255,255,.75);
	pointer-events:none;
	/* transition: 0.3s ease-in-out; */
}


#loadingImage{
	width: 40%;
	height: 40%;
	background: none;
	position: relative;
	outline: 1px solid transparent;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#videoContainer{
	z-index: -1;
}
#controlContainer{
	position: relative;
	white-space: nowrap;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background: rgba(255,0,0,0.0);
	max-width: 100vh;
	max-height: 100%;
	/* border: 2px solid green; */
}

.textField{
	padding: 1.5rem;
	background-color: #f4f2f3;
	color: black;
	border: none;
	border-radius: 1px;
	position: absolute;
	transform: translate(-50%,-50%);
	overflow: hidden; 
	display: flex;
	flex-direction: column;
	max-width: 27.5vw;
	width: 27.5vw;
}

.textField h1{
	white-space: normal;
	padding:none;
	margin: 0px;
	/* padding-right: 2rem; */
}

.textField p {
	white-space: normal;
	overflow-y: auto;
	scrollbar-color: #644f54 rgba(0,0,0,0);
	scrollbar-width: thin;
	scroll-behavior: smooth;
	margin: 0px;
	padding-right: 1rem;
}

.mainNavButton{
	padding: .75rem .9rem;
	/* font-weight:600; */
	background-color: #ab377a;
	color:white;
	border:none;
	border-radius: 1px;
	font-size: 1.5rem;
	transition: 0.3s;
	position: absolute;
	transform: translate(-50%,-50%);
	font-family: sansProSemibold;
}

.mainNavButton:hover{
	background-color: #c0699b;
	cursor: pointer;
	border-radius: 2px;
}

.mainTitle{
	color: #644f54;
	position: absolute;
	transform: translate(-50%,-50%);
	font-family: sansProSemibold;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 98%;
   background: none;
   color: white;
   text-align: left;
   display: flex;
   padding: 1rem 0 1rem 0;
   justify-content: flex-end;
   pointer-events: none;
}

#footerRight{
	display: flex;
	pointer-events: auto;
}


#returnButton{
	color: #1d1d1d;
	background: #d7d7d7;
	border:none;
	border-radius: 1px;
	font-size: 1.5rem;
	/* font-weight: 600; */
	padding: .75rem .9rem;
	margin-left: 4rem;
	transition: .15s;
	display: none;
	pointer-events: auto;
	font-family: sansProSemibold;
}

#returnButton:hover{
	background-color: #e1e1e1;
	color: #404040;
	cursor: pointer;
	border-radius: 2px;
}

#fullscreenButton{
	background: none;
	border:none;
	cursor:pointer;
}

#fullscreenButton svg{
	width:64px;
	fill: white;
	transition: .25s ease-in-out;
}

#fullscreenButton:hover svg{
	opacity: .5;
}

#languageSelector{
	-o-appearance: none;
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:none;
	padding: .5rem 1rem;
	font-size: 1rem;
	/* font-weight:700; */
	text-transform: uppercase;
	border-radius: 1px;
	color: #928285;
	cursor: pointer;
	text-align:center;
	display:none;
	margin-left: 1rem;
	font-family: sansProSemibold;
	background-color: white;
}

.touchpointContainer{
	display:flex;
	flex-direction:column;
}

.touchpointParent{
	display:flex;
	flex-direction:column;
	align-items: center;
	position:absolute;
	transform: translate(-50%,-50%)
}

.touchpoint{
	border:2pt solid white;
	background-color:#928285;
	width: 3.25rem;
	height: 3.25rem;
	max-width: 3.25rem;
	max-height: 3.25rem;
	min-width: 3.25rem;
	min-height: 3.25rem;
	border-radius: 3.25rem;
	transition: .25s ease;
	box-shadow: 0 0 1vw rgba(0,0,0,.25);
	animation: ripple 2s linear 1s infinite;
	background-position: center; 
	background-repeat: no-repeat;
	background-size: auto;
}


@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0rem rgba(255,255,255, 1);
  }
  100% {
    box-shadow: 0 0 0 1rem rgba(255,255,255, 0);
  }
}

.touchpoint:hover{
	width: 4.875rem;
	height: 4.875rem;
	max-width: 4.875rem;
	max-height: 4.875rem;
	min-width: 4.875rem;
	min-height: 4.875rem;
	background-color:#644f54;
	cursor: pointer;
	animation: none;
}

.touchpointTitle{
	background: white;
	color: #1d1d1d;
	padding: 10px 20px;
	text-align: center;
	border-radius: 3rem;
	/* font-weight: 600; */
	font-size: 1.15rem;
	opacity: 0;
	margin-top: 0.75rem;
	transition: 0.25s ease-in-out;
	pointer-events: none;
	font-family: sansProSemibold;
}

.touchpoint:hover + .touchpointTitle{
	opacity:1;
	transform:scale(1.3);
	z-index: 100;
}

.modal {
	display: flex; 
	position: fixed; 
	z-index: 1; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%; 
	overflow: hidden; 
	padding: 0;
	margin: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgb(100,79,84); 
	background-color: rgba(100,79,84,.5); 
	pointer-events: none;
	opacity:0;
	transition: .3s ease-in-out;
}

#modal-content {
	display: flex;
	flex-direction:row;
	align-items:stretch;
	position: absolute;
	width: 60%;
	max-width: 60%;
	height: 90%;
	max-height:90%;
	background: #f4f2f3;
	overflow: hidden;
}

.close {
	position: relative;
	top: -45vh;
	left: 30%;
	font-size: 2.5rem;
	max-height: 2.5rem;
	max-width: 2.5rem;
	height: 2.5rem;
	width: 2.5rem;
	transition: .25s ease-in-out;
	z-index: 100;
	color: white;
	background-color: #928285;
	text-align: center;
	line-height: 2.5rem;
	border-radius: 50%;
}

.close:hover{
	transform: rotate(90deg);
	text-decoration: none;
	cursor: pointer;
}


#modalSidebar{
	display:flex;
	flex-direction: column;
	align-items:center;
	background: #dad8d9;
	/*box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.2);*/
	max-width: 100%;
	padding-bottom: 1vw;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
}

#modalSidebarToggle{
	transition: .25s ease-in-out;
	z-index: 100;
	color: white;
	text-align: center;
	line-height: 2.5rem;
	font-weight: bold;
	font-size: 1.5rem;
	position: absolute;
	display: none;
	cursor: pointer;
	background: #ab377a;
	width: 2.5rem;
	line-height: 2.5rem;
	border-radius: 50%;
}

#modalMain{
	display:flex;
	flex-direction: column;
	padding: 20px;
	overflow: auto;
	scrollbar-color: #ab377a rgba(0,0,0,0);
	scrollbar-width: thin;
	scroll-behavior: smooth;
	position: relative;
	transition: .5s;
	width: 100%;
}

#modalMainTitleContainer{
	display:flex;
	flex-direction:row;
	align-items: flex-start;
}

#modalMainImage{
	min-width: 33%;
	height:auto;
	padding-right: 1vw;
	object-fit:contain;
}

#modalMainTitleText{
	min-width:66%;
}

#modalMainTitle{
	font-size:2rem;
	/* font-weight:600; */
	color:#1d1d1d;
	padding-bottom: 3rem;
}

#modalMainInfo{
	color: #1d1d1d;
	line-height:1.375rem;
	font-weight:normal;
	font-size: 1.1rem;
	line-height: 1.5;
	padding-bottom: 1rem;
}

#modalMainLink{
	padding: 0px;
	margin: 0px;
	padding-bottom: 1rem;
}

.linkButtonContainer{
	display:flex;
	flex-direction: row;
	align-items:center;
	cursor: pointer;
	padding: 0px 10px 0px 10px;
	
}

.linkButtonContainer button{
	border:none;
	background:none;
	color: #ab377a;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	padding-left: 0px;
}

.linkButtonContainer :hover .linkButton{
	background-color: #812161;
}

.linkButton{
	max-height: 2rem;
	max-width: 2rem;
	min-height: 2em;
	min-width: 2rem;
	height: 2rem;
	width: 2rem;
	/* background-color: #ab377a; */
	border-radius: 50%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.linkButton svg{
	fill: none;
	stroke-width: 1pt;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke: #ab377a;
	max-height: .75rem;
	max-width: 1.5rem;
	height: .75rem;
	width: 1.5rem;
	/* transform: rotate(180deg) translateX(-10%); */
}

#modalSlidesTabs{
	padding: 20px 0px 0px 0px;
	border-bottom: 1px solid #5ea290;
}

.modalTabButton{
	border:none;
	font-size: 1.1rem;
	background-color: white;
	color: #644f54;
	padding: 0.6rem 1.5rem;
	transition: 0.3s;
	margin-right: 8px;
	margin-left: 0px;
	margin-bottom: 0px;
}

.modalTabButton:hover{
	background: #5ea290;
	color: white;
}

.modalSidebarButton{
	max-height: 4.25rem;
	max-width: 4.25rem;
	min-height: 4.25rem;
	min-width: 4.25rem;
	height: 4.25rem;
	width: 4.25rem;
	background-color: #ab377a;
	border-radius: 50%;
	margin: 1vw 1vw 0 1vw;
	cursor: pointer;
	border: 2pt solid #fff;
}

.modalSidebarButton:hover{
	background-color: #812161;
}

.modalSidebarGreyButton{
	background-color: #928285;
}

.modalSidebarGreyButton:hover{
	background-color: #644f54;
}

.spacer {
  flex-grow: 1;
}

#modalSlideHeader{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}

#modalSlideTitle{
	margin: 40px 0px 32px;
	font-size: 1.5rem;
	/* font-weight: 600; */
	color: #1d1d1d;
	font-family: sansProSemibold;
}

#dropDownContainer{
	display: none;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

#dropDownContainer h3{
	font-family: sansProRegular;
	color: #644f54;
}

#modalSlideDropDown{
	display:none;
	margin: 1rem 0;
	background-color: rgb(94, 162, 144);
	border: 0;
	border-radius: 1px;
	color: white;
	cursor: pointer;
	font-size: 1rem;
	font-weight: normal;
	height: 2.7rem;
	line-height: 1.45;
	padding: .5rem 1rem;
	text-overflow: ellipsis;
}

#modalSlideDropDown:focus{
    outline: none;
}

#modalSlidesContent{
	padding-bottom: 20px;
}

.tabContainer{
	display:none;
	overflow:hidden;
	position:relative;
	scroll-behavior: smooth;
	flex-direction:row;
	align-items:center;
	justify-content: space-between;
}

.tabs{
	display:flex;
	width: 100%;
	/*flex-wrap: wrap;
	align-items:stretch;
	justify-content: center;
	list-style: none;
	overflow-x: hidden;*/
    overflow-y: hidden;
	position:relative;
	scroll-behavior: smooth;
	gap: 5%;
	padding-right: 1%;
	pointer-events: none;
	
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none; 
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabScrollButton{
	height:100%;
	font-weight:bold;
	z-index:2;
	background: none;
	border:none;
	cursor: pointer;
	transition: .25s ease-in-out;
	display:block;
}

.tabScrollButton:disabled{
	opacity: 0;
	pointer-events: none;
}

.tabScrollButton svg {
  width: 25px;
  height: 40px;
  stroke: #644f54;
  fill: none;
  stroke-width: 3pt;
}

.tabScrollButton:hover svg{
	stroke: #928285;
}

.card {
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
	min-width: 30%; 
	max-width: 14vw;
	margin: auto;
	text-align: left;
	background-color: white;
	color: #1d1d1d;
	/* border: 1pt solid #c5c5c5; */
	margin: 0;
	padding: 0px 0px 2rem 0px;
	position:relative;
	font-weight: 400;
	word-wrap: break-word;
	pointer-events: all;
	align-self: flex-start;
}	

.card img{
	width:100%;
	height:10rem;
	object-fit: contain;
	padding-bottom:2rem;
	max-height:10rem;
	background-color:white;
	/*clip-path: polygon(0 0,100% 0,100% 84%,0 100%);*/
	
	-khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.cardImageContainer{
	background: white;
	clip-path: polygon(0 0,100% 0,100% 84%,0 100%);
	padding: 2rem;
	max-height: 10rem;
}

.card h3{
	padding: 0px 15px;
	font-weight: 300;
	font-family: sansProSemibold;
	word-wrap: break-word;
}

.card p{
	padding: 0px 15px 0px 15px;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.4;
}

.card > .linkButtonContainer{
	padding: 0px 15px;
	font-size: 1rem;
}

.sectionCard{
	margin: 0;
	padding: 0px 0px 2rem 0px;
	position: relative;
	font-weight: 400;
	word-wrap: break-word;
	min-width: 29.15%;
	max-width: 14vw;
	text-align: left;
	color: #1d1d1d;
	border: none;
	background: none;
	text-align: center;
	pointer-events: all;
	
}

.sectionCard img{
	object-fit: cover;
	padding: 0px;
	clip-path: none;
	width:100%;
}

.sectionCard p{
	padding: 0px 10px 0px 10px;
	font-size: 1.1rem;
	line-height: 1.5;
	text-align: left;
}

.sectionCard > .linkButtonContainer{
	font-size: 1rem;
}


/*.card button {
	border: none;
	outline: 0;
	padding: 8px;
	color: white;
	background-color: #ab377a;
	text-align: center;
	cursor: pointer;
	width: 100%;
	font-size: 1.3rem;
	position:absolute;
	bottom: 0px;
	left: 0px;
}

.card button:hover{
	background: #812161;
}*/



.sidenav {
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: none;
  overflow-x: hidden;
  transition: 0.5s;
  display:none;
  flex-direction:row;
  padding: 0;
  margin: 0;
  transform: translateX(calc(0px - 100% + 45px));
}

#sidenavTitle{
	padding: 0.9rem 1.2rem;
	font-size: 0.95rem;
	font-family: sansProSemibold;
}

.sidenavButton{
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: #818181;
  display: flex;
  flex-direction: row;
  transition: 0.3s;
  align-items: center;
  padding: 0.9rem 0rem;
  margin: 0 1.7rem;
  border-top: 1pt solid rgba(146,130,133,.25);
  transition: .25s ease-in-out;
}

.sidenavButton:hover {
  color: #644f54;
  cursor: pointer;
}

.sidenavTpIcon{
	border:2pt solid white;
	background-color:#928285;
	width: 2.5rem;
	min-width: 2.5rem;
	max-width: 2.5rem;
	height: 2.5rem;
	min-height: 2.5rem;
	max-height: 2.5em;
	border-radius: 50%;
	transition: .25s ease-in-out;
}


.sidenavButton:hover .sidenavTpIcon{
	background-color: #644f54;
}

.sidenavButtonTitle{
	padding-left: 1.25rem;
}

#sidenavContent{
    background-color: white;
    transition: .25s ease-in-out;
    color: #928285;
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
}

@media screen and (max-width: 1000px) {
	/* .modalSidebarButton{
		max-height: 3.25rem;
		max-width: 3.25rem;
		min-height: 3.25rem;
		min-width: 3.25rem;
		height: 3.25rem;
		width: 3.25rem;
		border: 1.5pt solid #fff;
	}*/
	
	html,body{
		font-size: 1.5vw;
	}
	
	#modal-content {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height:100%;
	    /* border:2px solid red; */

	} 
	
	.close{
		top: 2%;
		right: 0;
		position: absolute;
		left: 95%;
	}
.textField{
	max-height: 55%;
}
}

@media (-webkit-touch-callout: none) {
	#languageSelector{
		display:none;
	}
}

@media (orientation: portrait) {
	html,body{
		font-size: 16px;
	}
	
	
	
	#portraitContainer{
		display: flex;
	}
	
	#portraitImage{
	animation-name: rotate;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}
	
	#sidenavContent{
		width: calc(100vw - 45px);
	}
	
	#sidenav{
		transform: translateX(calc(0px - 100% + 45px));
		min-width:100vw;
		display:flex;
	}
	
	#controlContainer{
		white-space: normal;
	}
	
	.touchpointTitle{
		display:none;
	}
	
	#modal-content {
		width: 100%;
		max-width: 100%;
		height: 100vh;
		max-height: 100vh;
	}
	
	.close {
		position: relative;
		top: -45vh;
		left: 44%;
	}
	
	#modalSidebar {
		box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
		position: absolute;
		height: 100%;
		z-index: 3;
		max-width: 0px;
		overflow-x: hidden;
		transition: .25s ease-in-out;
		justify-content: flex-end;
	}
		
	#modalMain{
		padding: 5px;
	}
	
	#modalMainTitleContainer{
		flex-direction:column;
		align-items:center;
	}
	
	#modalMainTitle {
		padding-bottom: 1.5rem;
		padding-top: 1rem;
	}
	
	.tabs{
		gap: 5%;
	}
	
	.card {
		min-width: 94.37%;
	}
	
	#modalSidebarToggle{
		display:block;
		left: 1vw;
		top: 2.25vh;
	}
	#modalSlideHeader{
	flex-direction: column;
	}
	
}

#sidenavToggle{
	border:none;
    margin: 0;
    padding: 10px;
    background-color: rgba(255,255,255,0.75);
    color: #928285;
    font-size: 2rem;
	transition: .2s ease-in-out;
}

#sidenavToggleSvg{
	width: 25px;
	height: 40px;
	fill: none;
	stroke-width: 3pt;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke: #1d1d1d;
	transition: .25s ease-in-out;
}

#sidenavToggle:hover{
	background-color: white;
}

.firstPoint{
	background-color: #ab377a;
}

.firstPoint:hover{
	background-color: #812161;
}