
@font-face {
    font-family: SandboxVR;
    src: url('/events/assets/sandboxvr/sandboxvr-regular.woff2') format("woff2"),
        url('/events/assets/sandboxvr/sandboxvr-regular.woff') format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: SandboxVR;
    src: url('/events/assets/sandboxvr/sandboxvr-medium.woff2') format("woff2"),
        url('/events/assets/sandboxvr/sandboxvr-medium.woff') format("woff");
    font-weight: 500;
    font-style: normal 
}

@font-face {
    font-family: SandboxVR;
    src: url('/events/assets/sandboxvr/sandboxvr-bold.woff2') format("woff2"),
        url('/events/assets/sandboxvr/sandboxvr-bold.woff') format("woff");
    font-weight: 700;
    font-style: normal
}
		

		 
 .intro {	    width: 100%;    position: relative;    overflow: hidden;     }		
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
	background: rgba(0, 0, 0, .4);
}		
		
.modal-dialog {
      max-width: 1500px;
      margin: 0px auto;
	

    /*background: rgba(0, 0, 0, .8);*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100vh;
    width: 100vw;

	 
	
  }



.modal-body {
  position:relative;
  padding:0px;
}
.close {
  position:absolute;
  right:-30px;
  top:0;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
}
		
		
		
		.embed-responsive-16by9 {width:100%; overflow:hidden;aspect-ratio: 16/9; pointer-events:auto}
		.embed-responsive-16by9 iframe {width:300% !important; height:100% !important; margin-left: -100%}
		
		.embed-responsive-9by16 {height:70vh; overflow:hidden;aspect-ratio: 9/16; pointer-events:auto;    width: auto;    margin: auto;}
		.embed-responsive-9by16 iframe {width:300% !important; height:100% !important; margin-left: -100%}
		
		.ratio9by16 .modal-content {    width: auto;}

		
		/*SECTION ANFRAGE */

#anfrage-senden {background-color: rgb(239, 243, 247);padding: 35px 5%;}
#anfrage-senden .content {margin:0px auto;width:100%;max-width:800px;padding:20px;background-color:rgba(0,0,0,0.5);}
#anfrage-senden header  { max-width: 1440px; margin:0px;}
#anfrage-senden header .header-content {display: flex;color:#fff}	
#anfrage-senden header .header-content h2 { display: inline-block;color: currentcolor;font-weight: normal;letter-spacing: 2.77px;font-size: 13px;text-transform: uppercase;margin: 0px;color:#fff}
#anfrage-senden header .header-content span {height: 1px;width: 100%;margin-left: 10px;max-width: 430px;background-color: #313539;position: relative;align-self: center;flex: 1 1 0%;}
#anfrage-senden h4 {font-size:20px;}
#anfrage-senden .content {font-size:0.9em;}

#anfrage-senden .row { max-width: 1440px; margin:0px;}
#anfrage-senden .message { background-color:#0076ff;padding:20px;margin:20px 0px;color:white; }
		
		
@media (max-width: 600px) {
    #anfrage-senden {background-color: rgb(239, 243, 247);padding: 35px 0px;}
}
		

		
 #threeColumn {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10vh 5% !important;
    padding: 10vh 5% !important;
    align-items: center;
    background: #fff;
}
	






.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}

#wrapper-navbar .navbar .navbar-brand {height: 43px;flex-direction: column;}		

img.wp-smiley, img.emoji {display: inline !important;border: none !important;box-shadow: none !important;height: 1em !important;width: 1em !important;margin: 0 0.07em !important;vertical-align: -0.1em !important;background: none !important;padding: 0 !important;}





 .intro .content {
    display: flex;
    align-items: flex-end;
    min-height: 100vh;
    width: 100%;
    position: relative;
    max-width: 1440px;
    margin: 0px auto; flex-direction:row; padding:0px;
}

.intro .content p {line-height: 1.8em;}


@media only screen and (max-width: 992px) {
    .intro .content .column {         margin: 0px 0px !important;    }
}



h1 {font-size: 80px;color: rgb(21, 24, 30);letter-spacing: -4.27px;display: inline-block;font-family: SandboxVR;font-weight: bold;line-height: 63px;margin: 4vh 0;}
h2 {font-size: 50px;color: rgb(21, 24, 30);letter-spacing: -4.27px;display: inline-block;font-family: SandboxVR;font-weight: bold;line-height: 60px;/*margin: 2vh 0;*/}


#wrapper-footer .container-footer .content-footer .column-footer ul {display: flex;flex-direction: column;flex-wrap: wrap;height: auto;list-style: none;padding: 0px;margin: 0px 0px 80px;}
		


/*Experience Slider*/
	
				
.swiper {width: 100%;height: 100%;}
.swiper-slide {text-align: center;font-size: 18px;display: flex;justify-content: center;align-items: center;height: 100%; /* Wichtig */}
.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;border-radius: 16px;border-color: rgb(32, 41, 54);    border-style: solid;}
		
		
#expSlider .content {display: flex;flex-direction: column;width: 100vw;max-width: 100%;gap: 16px;background-color: rgb(17, 22, 29);padding: 8px 0px;overflow: hidden;}
		
.poster-responsive {transform: rotate3d(0,0,0,0deg) rotate(0deg); box-shadow: 2em 4em 6em -2em rgba(0,0,0,.5), 1em 2em 3.5em -2.5em rgba(0,0,0,.5);transition: transform .4s ease,  box-shadow .4s ease;  border-radius: .5em;}
.poster-responsive:hover {transform:  rotate3d(.5,-.866,0,15deg) rotate(1deg);}


/*Experience Slider EOF*/



header {margin-bottom: 2em;}
header h2 {    display: inline-block;color: currentcolor;font-family: SandboxVR;font-weight: normal;text-transform: uppercase;margin-left: 5px; font-size: 13px; letter-spacing: 6.29px; line-height: 2; }
		
		




	
header  .line {height: 1px;width: 100%;margin-left: 10px;max-width: 430px;background-color: #313539;position: relative;align-self: center;flex: 1 1 0%;}
header .header-content { display: flex;color: #313542;}
		
.poster-responsive {overflow:hidden;position:relative;}
span.expVariant {background-color:red;padding:2px 5px;font-weight:bold;font-size:0.8em;position:absolute;top:0px;left:0px}

h2.suptitle {margin-left: 5px; font-size: 13px; letter-spacing: 6.29px;font-weight:normal}

.darkSection { width: 100%;    position: relative;    overflow: hidden;    display: flex;    flex-direction: column;    padding: 10vh 0;    background: rgb(17, 22, 29);}
.darkSection .content {display: flex;    flex-direction: column;    padding: 0 5%;    align-items: center;}
.darkSection h2 {color: #fff;}
.darkSection h2.suptitle {color: #fff;}

.darkSection .content {max-width: 1440px;    margin: 0px auto;    display: flex;    flex-direction: column;    padding: 0 5%; }
.darkSection .content .text-container {    max-width: 1440px;    flex-direction: column;}
.darkSection .content .text-container p {    color: #15181e;    font-size: 16px;    letter-spacing: 0px;    line-height: 1.8em;    white-space: pre-line;    margin: 0 0 30px;    color: #fff;font-weight: 400;}


.darkSection .content .text-container header {    display: flex;    color: #fff;}
.darkSection .content .text-container header h2 {    display: inline-block;    color: currentcolor;    font-family: SandboxVR;    font-weight: normal;    text-transform: uppercase;margin-bottom:0px;}
.darkSection .content .text-container header span {    height: 1px;    width: 100%;    margin-left: 10px;    max-width: unset;    background-color: #fff;    position: relative;    align-self: center;    flex: 1 1 0%;    max-width: 430px;}



.lightSection {margin: 10vh 0;} 
		


/*SECTION HELL*/

.section 					{width: 100%;position: relative;display: flex;	padding: 0;}
.section .content 			{display: flex;flex-direction: row;width: 100%;max-width: 1440px;    margin: 0px auto; padding: 0 5%; }
.section .content .flex 	{flex: 0.5; }
.section .content .video-container {align-items: center;justify-content: center;background-size: cover;background-repeat: no-repeat;background-position: center;position: relative;	margin: 100px 0 100px 100px;}
.section .content .video-container:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;/*background: rgba(0, 0, 0, 0.3);*/}
.section .content .video-container svg {width: 80px;height: 80px;position: relative;}
.section .content .text-container {align-self: flex-start;flex-direction: column;	padding: 10vh 5%;}
.section .content .text-container header {display: flex;color: rgb(123, 131, 146);}
.section .content .text-container header h2 {display: inline-block;color: currentcolor;font-family: SandboxVR;font-weight: normal;text-transform: uppercase;margin: 0px;}
.section .content .text-container header h2 span {height: 1px;width: 100%;margin-left: 10px;max-width: unset;/*background-color: currentcolor;*/position: relative;align-self: center;flex: 1 1 0%;}
.section .content .text-container .text-content h1 {font-size: 80px;color: rgb(21, 24, 30);letter-spacing: -4.27px;display: inline-block;font-family: SandboxVR;font-weight: bold;line-height: 63px;margin: 4vh 0;}
.section .content .text-container .text-content h2 {font-size: 50px;color: rgb(21, 24, 30);letter-spacing: -4.27px;display: inline-block;font-family: SandboxVR;font-weight: bold;line-height: 1.4em;/* margin: 2vh 0; */}
.section .content .text-container .text-content p {color: rgb(21, 24, 30);font-size: 16px;letter-spacing: 0px;line-height: 1.8em;white-space: pre-line;margin: 0em 0em 1.5em;}
.section .content .btn-group {margin-top: 40px;}


@media only screen and (max-width: 992px) {    
    .section .content  {        width: 100%;        flex-direction: column;        display: flex;        flex: 1;    }
    .section .content .flex.video-container {        margin: 50px 0 0 0;        min-height: 500px;    }
    .section .content .flex.text-container {        padding: 50px 00px 50px 00px;        flex: 1;        display: block;           width: 100%;} 
	.section .content p, .section .content ul {font-size:0.9rem !important;line-height:1.5rem !important;}

}


@media only screen and (max-width: 600px) {    
	.text-content .btn-group {display:flex; flex-direction: column;}
	.text-content .btn-group .sb-blue {margin:10px auto;}
	.text-content .btn-group .sb-blue-clear {margin:10px auto;}
}




#threeColumn .column .d-flex {width:100%}





sup {font-size:0.6em;    top: -0.8em;font-weight:100;}



/*SECTION REZENSIONEN*/



.googleStars {
    color: #fbbc04;
    clip-path: polygon(6px 0, 4.31px 3.98px, 0 4.34px, 3.28px 7.18px, 2.29px 11.4px, 6px 9.16px, 9.71px 11.4px, 8.72px 7.18px, 12px 4.34px, 7.69px 3.98px, 6px 0, 20px 0, 18.31px 3.98px, 14px 4.34px, 17.28px 7.18px, 16.29px 11.4px, 20px 9.16px, 23.71px 11.4px, 22.72px 7.18px, 26px 4.34px, 21.69px 3.98px, 20px 0, 34px 0, 32.31px 3.98px, 28px 4.34px, 31.28px 7.18px, 30.29px 11.4px, 34px 9.16px, 37.71px 11.4px, 36.72px 7.18px, 40px 4.34px, 35.69px 3.98px, 34px 0, 48px 0, 46.31px 3.98px, 42px 4.34px, 45.28px 7.18px, 44.29px 11.4px, 48px 9.16px, 51.71px 11.4px, 50.72px 7.18px, 54px 4.34px, 49.69px 3.98px, 48px 0, 62px 0, 60.31px 3.98px, 56px 4.34px, 59.28px 7.18px, 58.29px 11.4px, 62px 9.16px, 65.71px 11.4px, 64.72px 7.18px, 68px 4.34px, 63.69px 3.98px, 62px 0);
    display: inline-block;
    width: 70px;
    height: 11.4px; 
}




/*SECTION LOCATIONS */


		    
#locations {background-color: rgb(239, 243, 247);padding: 35px 5%;}
#locations header  { max-width: 1440px; margin:0px;}
#locations header .header-content {display: flex;color: #313542;}	
#locations header .header-content h2 { display: inline-block;color: currentcolor;font-weight: normal;letter-spacing: 2.77px;font-size: 13px;text-transform: uppercase;margin: 0px;}
#locations header .header-content span {height: 1px;width: 100%;margin-left: 10px;max-width: 430px;background-color: #313539;position: relative;align-self: center;flex: 1 1 0%;}
#locations h4 {font-size:20px;}
#locations > .content {font-size:0.9em;padding:10vh 0;    max-width: 1440px;margin:0px auto}

#locations .row { max-width: 1440px; margin:0px -10px;}
#locations .row .col-lg-3 {padding:10px; }
#locations .row .col-lg-3 .store {display: flex;flex-direction: column;background-color:#fff; padding:20px; border-radius:5px;color:#171a29;box-shadow:rgba(0, 0, 0, 0.08) 0px 19px 24px 10px;}
#locations .row .col-lg-3 .store * {color:#171a29;;}

#locations .store .btn-group .sb-btn-blue {padding: 16px 24px;border-radius:24px;margin:0px auto;max-width:100%}
#locations .store .btn-group {    display: inline-block;}		


.storeImage {    position: relative;
    padding-bottom: 60%;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15px;}

.storeImage div {margin-bottom:10px;    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url(//images.ctfassets.net/y6wgxqr5qe46/197qL5MB2OxoE9SOsuGd5R/78baaa895e3483590d55b40369bb35fa/S2-Image.jpg?fm=webp);
    background-size: cover;
    background-position: center center;}


@media (min-width: 900px) {
    #locations .col-lg-3 {flex: 0 0 33%;max-width: 33%; }
}
@media (min-width: 1150px) {
    #locations .col-lg-3 {flex: 0 0 25%;max-width: 25%; }
}



.sb-link .sb-btn-blue {    display: flex;    -webkit-box-pack: center;    justify-content: center;    -webkit-box-align: center;    align-items: center;    height: auto;    width: 231px;    font-family: SandboxVR;    font-size: 15px;    font-weight: 500;    letter-spacing: -0.5px;    margin-right: 0px;    color: #fff !important;    background: #0076ff;    border-radius: 3px;    text-decoration: none;
}




/*SECTION ANFRAGE */

#anfrage-senden {background-color: rgb(239, 243, 247);padding: 35px 5%;}
#anfrage-senden header  { max-width: 1440px; margin:0px;}
#anfrage-senden header .header-content h2 { display: inline-block;color: currentcolor;font-weight: normal;letter-spacing: 2.77px;font-size: 13px;text-transform: uppercase;margin: 0px;}
#anfrage-senden header .header-content span {height: 1px;width: 100%;margin-left: 10px;max-width: 430px;background-color: #313539;position: relative;align-self: center;flex: 1 1 0%;}
#anfrage-senden h4 {font-size:20px;}
#anfrage-senden .content {font-size:0.9em;}


	



/*Testamonials */

.googleRatings {background-color:#fff;float:right;padding:10px;width:auto;text-align:center;display:inline;position:absolute;right:0px;top:0px;zoom:70%}
.googleRatings h4 {font-size:1.2em;text-decoration:underline;margin:0px;}
.googleRatings p.rating {font-size:3em;margin:0;font-weight:bold}
.googleRatings .googleStars {background: linear-gradient(to right, currentcolor 70px, #dadce0 0%); zoom: 180%;}
.googleRatings p.small {margin:0px;}

@media only screen and (max-width: 600px) {
    #testimonial-sb .content .text-container { padding: 20px !important; }
	#testimonial-sb .content .testimonial-wrapper #carouselTestimonial article {  height: 700px !important;}
	#testimonial-sb .content .text-container .googleRatings {display:none;}
	#testimonial-sb .content .text-container .carousel { height: auto;}
}



/*FORMULAr*/
/* Mobile-first & homogenes Design */


.jga-container {
	width:100%; 
	margin:auto;
}




.jga-form label {
  display: block;
  margin-top: 15px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #ccc;
}

.jga-form input,
.jga-form select,
.jga-form textarea {
  width: 100%;
  padding: 14px 12px;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s, background-color 0.3s;
  appearance: none;
}

.jga-form input::placeholder,
.jga-form textarea::placeholder {
  color: #ccc;
}

.jga-form input:focus,
.jga-form select:focus,
.jga-form textarea:focus {
  border-color: #0076ff;
  outline: none;
  background-color: #262626;
}

.jga-button {
  margin-top: 30px;
  padding: 14px 20px;
  background-color: #0076ff;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  transition: background-color 0.3s ease;
}

.jga-button:hover {
  background-color: #00cfa2;
}

.jga-feedback {
  padding: 10px 15px;
  background-color: #222;
  border: 1px solid #00ffc2;
  border-radius: 8px;
  margin-bottom: 20px;
  color: #00ffc2;
  text-align: center;
}

/* Fehler-Markierung */
.jga-error {
  border-color: #ff3c3c !important;
  background-color: #2a1a1a !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
  cursor: pointer;
}

/* Responsive */
@media (max-width: 480px) {
  .jga-heading {
    font-size: 22px;
  }

  .jga-container {
    padding: 25px 15px;
  }

  .jga-button {
    font-size: 15px;
    padding: 12px;
  }
}
