.text-center
{
text-align: center;
}

.text-uppercase
{
text-transform: uppercase;
}

.text-end
{
text-align: right;
}

.d-block
{
display: block;
}

.justify
{
 text-align:justify;
}

.responsive
{
width: 100%;
height: auto;
}


.font-bold-xl,h1,h2,h3
{
font-family: 'Roboto Condensed';
font-size: 48px;
font-weight: 500;
letter-spacing: -1px;
word-spacing: -3px;
line-height: 1.3;
text-transform: uppercase;
}

.font-standard, p, #footer, #footer p, .fslightbox-container * 
{
font-family: 'Roboto'!important;
font-size: 18px;
font-weight:400;
letter-spacing: 1px;
line-height: 1;
font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

#footer p
{
line-height: 2;
}

.font-standard-uppercase
{
font-family: 'Roboto Condensed';
font-size: 21px;
letter-spacing: 0px;
line-height: 1.5;
font-weight:400;
word-spacing: 1px;
text-transform: uppercase;
}






.font-sm
{
font-family: 'Roboto';
font-size: 11px;
font-weight:400;
letter-spacing: 1px;
line-height: 1.2;
}


#footer ul
{
list-style: none;
}



a,
a:visited {
	color: #000000;
	text-decoration: underline;
	outline: 0;
}

/* Colors */


.bg-white{ background-color: #fff;}
.bg-black{ background-color: #000;}
.cl-white, a.cl-white, .cl-white a { color: #fff !important ;}
.cl-black, a.cl-black, .cl-black a { color: #000 !important ;}


 a {
  opacity: 1;
  transition: opacity 500ms;
}

a:hover {
   opacity: 0.7;
}


/* Fonts */


/* Images */

img
{
max-width: 100%;
height: auto;
}


/* Navigation */

	#head {
        width: 100%;
		height: 40px;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 30;
	}






#menu-toggle
{
  /* padding: 5px; */
  /* background-color: #fbee4d; */
  width: 30px;
  height: 22px;
  display: block;
  position: absolute;
  top: 0px;
  padding-top: 10px;
  right: 10px;
  z-index: 40;
  -webkit-user-select: none;
  user-select: none;
}

#menu-toggle input
{
left: -5px;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 20px;
    cursor: pointer;
    opacity: 0;
    z-index: 45;
}

#menu-toggle span
{
  display: block;
  width: 31px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #fff;
  z-index: 40;
  transform-origin: 1px 5px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menu-toggle span:first-child
{
  transform-origin: 0% 0%;
}

#menu-toggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menu-toggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(0px, 1px);
  /* background: #22a6b3; */
}


#menu-toggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menu-toggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(-1px, 5px);
}

#menu
{
  top: 0px;
  z-index: 30;
  text-align: left;
  height: 100vh;
  position: absolute;
  width: 330px;
  margin: 0px 0 0 0;
  /* padding: 0px; */
  padding-top: 35px;
  right: -100px;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  /*overflow-x:scroll;*/
  }

li.mobile-spc
{
	display: block;
	height: 100px; 
}

#brand 
{
	height: 36px;
	left: 50%;
	top: 0px;
	display: block;
	position: absolute;
	margin-left: -66px;
	
}

#brand img
{
	height: 36px;
}


#menu a
{display: block;text-decoration: none;padding: 5px 20px;}

#menu ul a
{
margin-left: 40px;
}


#menu ul a::before
{
content: "_";	
}

@media (max-width: 768px) {
#tpl27 #headfont-standard-uppercase
{height: auto;display: flex;flex-direction: column;justify-content: flex-start;}

#tpl27 #brand
{padding: 4px;height: 68px;position: static;}

#tpl27 #brand img {
    /* margin: 4px; */
    height: 60px;
}		

#tpl27 #head h1
{font-size: 18px;padding: 5px 5px;position: static;}	

#tpl27 #menu-toggle
{/* position: static; *//* top: 77px; */}		

#tpl27 #site
{
	margin-top: 108px;
}	

	
}	

@media (min-width: 350px) {

#tpl27 #site
{
	margin-top: 140px;
}	

}

@media (min-width: 390px) {

#tpl27 #site
{
	margin-top: 122px;
}	

}

@media (min-width: 670px) {

#tpl27 #site
{
	margin-top: 104px;
}	

}

@media (min-width: 770px) {

#tpl27 #site
{
	margin-top: 40px;
}	

}

@media (min-width: 960px) {

#tpl27 #site
{
	margin-top: 72px;
}	

}

#menu-toggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}

@media (max-width: 350px) {
#tpl27 #head h1
{font-size: 11px;} 

#tpl27 #head {
	height: auto;
	}		
}	

@media (min-width: 580px) and  (max-width: 767px){

#tpl27 #head {
	height: auto;
	}	
}	

@media (min-width: 768px) {
#menu
{
	padding-top: 50px;
	width: 350px;
}	
	
}	

@media (min-width: 960px) {

#brand 
{
	margin-top: 40px;
	height: 124px;
	margin-left: -227px;
}

.fixed-top #brand 
{
    margin-top: 20px;
	height: 84px;
	margin-left: -154px;
}

#brand img
{
	height: 124px;
}

.fixed-top #brand img
{
	height: 84px;
}		

#menu-toggle
{
  padding-top: 28px;
  right: 40px;
}

#head {
	height: 72px;
	}	

#head h1 {
	padding-right: 220px;
	padding-left: 220px;
	font-size: 14px;
	bottom: 15px;
}	


#menu
{
 width: 500px;
 padding: 45px;
}


#menu a
{
	display: block;text-decoration: none; padding: 10px 20px;
}
	
}

@media (min-width: 1380px) {

#head h1 {
		font-size: 18px;
}	

}
	
/* Navigation Ending */


#video-wrapper {
    height: 100vh;
    width: 100%;
    background-color: red;
 position: relative;
 
}

#video-wrapper video
{
height: 100vh;
width: 100%;
overflow: hidden;
}


.parent-container {
  /* any width or height */
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100%;
}
.video-container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0px;
  /* center vertically */
  top: 50%;
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  z-index: 15;
}
.video-container::before {
  content: "";
  display: block;
  height: 0px;
  padding-bottom: 56.25%; /* 100% * 9 / 16 */
}

.video-pattern { 
    top: 0px;
    left: 0px;
    position: absolute;
    background: transparent url(../images/pattern.png) repeat top left;
    z-index: 25;
    height: 100%;
    width: 100%;
}

.video-container video {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0px;
  /* center horizontally */
  left: 50%;
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}


 



   /* centre the content in the parallax layers */
 #title {
  height: 100vh;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  z-index: 45;
  }
  
  
 #title .font-bold-xl
 {
 font-size: 50px;
 }
  
/*  
 .lazyloaded {
  animation: owd-fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry;
}

@keyframes owd-fade-in {
  0% {
    transform: translateY(400px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

*/


.logos
{
    display: flex !important;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.logo
{
display: flex !important;
    align-items: center;
    width: 10%;
    max-height: 100px;
    flex-direction: row;
    justify-content: center;
}

.logo img
{
max-width: 90%;
max-height: 100px;
}

#home-buttons
{
position: absolute;
    left: 20px;
    bottom: 20px;
    display: flex;
    z-index: 50;
    flex-direction: column;
    flex-wrap: wrap;
}

#footer-buttons
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}



#home-buttons .social img, #footer-buttons .social img
{
width: 25px;
}

a.button
{
font-family: 'Roboto';
font-size: 20px;
font-weight: 500;
letter-spacing: 1.5px;
word-spacing: 1px;
text-transform: uppercase;
border-radius: 5px;
}


a.button.white
{
background: transparent;
border-color: #fff;
color: #fff;
}

a.button.black
{
border-color: #000;
color: #000;
background: transparent;
}


a.button.white:hover
{
border-color: #fff;
color: #fff;
opacity: 0.7;
}

a.button.black:hover
{
border-color: #000;

color: #000;
opacity: 0.7;
}

/*
#title
{
position: absolute;
left: 0;
top: 0;
z-index: 50;
}
*/


.row-gap
{
row-gap: 2rem;
}

.locations-gallery
{
   /* display: flex !important;
    flex-wrap: wrap;
    */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    display: grid !important;
    
}

.locations-gallery a
{
display: block;
/*width: 16.666666667%;*/
line-height: 0;
overflow: hidden;
}

.locations-gallery a img
{
width: 100%;
height: auto;
transition: all 200ms ease-in-out;
}



ul.navi-locations 
{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    margin: 0px;
}

.navi-locations li
{
width: calc(50% - 5px);
margin: 0px;
}



.navi-locations a.button
{
width: 100%;
margin: 0px;
}



 


.locations-overview
{
    /*display: flex !important;
    flex-wrap: wrap;*/
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    display: grid !important;
}

.locations-overview a
{
display: block;
/*width: 25%;*/
line-height: 0px; 
text-decoration: none;
position: relative;
overflow: hidden;
}

.locations-overview a img
{
width: 100%;
height: auto;
transition: all 200ms ease-in-out;
}

.locations-overview div
{
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: transparent url(../images/pattern.png) repeat top left;
opacity: 1;
}

.locations-overview h3
{
position: absolute;
left: 10px;
margin-top: -15px; 
top: 70%;
transition: all 200ms ease-in-out;
}

.locations-overview h3::after {
    content: " ";
    position: absolute;
    top: 15px;
    right: -30px;
    --s: 5px;
    height: 30px;
    aspect-ratio: 3 / 5;
    clip-path: polygon(0 0, var(--s) 0, 100% 50%, var(--s) 100%, 0 100%, calc(100% - var(--s)) 50%);
    background: #fff;
}

.locations-overview a:hover img, .locations-gallery a:hover img  {
  transform: scale(1.2);
}

.locations-overview a:hover div  {
  background: transparent;
}

.locations-overview a:hover h3 {
color: #11c5ce;
}

.locations-overview a:hover h3:after {
background: #11c5ce;
}

    .fslightbox-svg,.fslightbox-toolbar
    {
    display: none!important;
    }
    
    .fslightbox-slide-btn-container  button
    {
    width: 40px;
    
    }
    
    
    .fslightbox-slide-btn-container-next button:after,  .fslightbox-slide-btn-container-previous button:after
    {
    content: " ";
    position: absolute;
    top: 45px;
    right: 15px;
    --s: 5px;
    height: 30px;
    aspect-ratio: 3 / 5;
    clip-path: polygon(0 0, var(--s) 0, 100% 50%, var(--s) 100%, 0 100%, calc(100% - var(--s)) 50%);
    background: #fff;
    }
    
      .fslightbox-slide-btn-container-previous button:after
    { 
  transform: scaleX(-1) !important;
  right: auto;
  left: 15px;
    }
    
    button:hover {
    background-color: #000;
    border-color: transparent;
    color: #fff;
    outline: 0;
    }
    
    .fslightboxb {
    border: 0;
    background: #11c5ce!important;
    cursor: pointer;
}