/* make font smaller on mobile */

.vc_mobile .wpb_text_column p{
  font-size: 1.2em;
  color: #1a1d24;
}


.portfolio-item-page-bottom,
.single-thegem_pf_item .block-navigation{
display:none;
}

/*  --------------------- START orange corners ------------------*/
/* default orange */
.corner{
  fill:#ec5728;
}

/* the three orange colors*/
.orange1,
.orange1 h2,
.orange1 h3{
  fill:#ec5728;
  color: #ec5728;
}

.orange2,
.orange2 h2,
.orange2 h3{
  fill:#f47922;
  color: #f47922;
}

.orange3,
.orange3 h2,
.orange3 h3{
  color: #f7bc2f;
fill:#f7bc2f;
}

/* corner in the header of every subpage */
.header-corner{
  margin-top: -197px;
  height: 95px;
  position: relative;
  z-index:3;
  width:13%;
}
.header-corner2{
  z-index: 8;
  position: absolute;
  right: -223px;
  top: 235px;
  height: 50px;
}
/*  --------------------- END orange corners ------------------*/


/*  --------------------- START general settings   ------------------*/

/* set the general background color of the website */
.block-content,
#page,
.spacer {
background-color:#e2e6fc;
}

.single-product .block-content{  padding-bottom: 50px;}

/* set the background color of the left menu */
#site-header-wrapper,
#site-header > .container{
 background-color: #21252a
}

.page .block-content{
 padding-top:0;
}
#page.vertical-header .vertical-toggle{
  display: block;
}
/*  ------------
#page-title {
padding-top: 120px !important;
padding-bottom: 150px !important;
clip-path: polygon(0% 0%, 100% 0, 100% 100%, 20% 68%, 0% 37.5%);
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 20% 68%, 0% 37.5%);

z-index:4;
} 

@supports (-ms-ime-align:auto) {
 #page-title  {
      padding-bottom: 120px !important;
  }
}     
------------------*/

.wpb_text_column p{
  font-size: 1.37em;
  font-weight: 300;
  text-align: justify;
  line-height: 1.2em;
}
.contact .gem-button{
 margin:0;
}
.contact{
border-left: solid 2px #ddd5c5;
  background-color: #f5f5f5;
}
.post-meta.date-color{
display:none;
}
.vc_row[data-vc-full-width]{
padding: 0 20px;
}
.block-content{
 padding-top:130px;
}
.gem-button{
 background-color: #f6bc2f;
}

.gem-button:hover{
 background-color: #f47922;
}

.spacer{
 height:20px;
  margin-top: -7px;
}

.vc_row[data-vc-full-width].top-slider{
  padding:0;
}

.vc_row[data-vc-full-width].top-slider.clipped{
  clip-path: polygon(0% 0%, 0% 60%, 21% 81%, 100% 100%, 100% 0%);
 z-index:5;
}


/*  --------------------- END general settings   ------------------*/

/*  --------------------- START main menu   ------------------*/
@media (min-width: 978px) {
#main{
transition: all ease 1s;
}
.openmenu{
   padding-left: 215px;

}
#page.vertical-header {
  padding-left: 45px;
}

#page.vertical-header #site-header-wrapper .header-main{
   visibility: visible;
}

#page.vertical-header #site-header-wrapper.vertical-active{
   width: 260px;
    padding-left: 20px;
    padding-right: 0;
      margin-left: 0;
/* padding-top:25px;*/
}

#page.vertical-header .vertical-toggle{display:block;}

#footer-socials{
  display:none;
}
#page.vertical-header #primary-menu.no-responsive > li{
  margin-right:-21px;
}
.vertical-menu-item-widgets{
  width: 220px;
}
.menu-item-cart {
    display: none !important;
}
}
/*  --------------------- END main menu   ------------------*/

/*  --------------------- START home page settings   ------------------*/
.home .block-content,
#footer-nav
{
  background:#212331;
}

#page.vertical-header #site-header .site-title {
     margin-bottom: 10px;
}

.threebuttons .wpb_content_element{
  margin-bottom:0;
}
.home .wpb_text_column p{
  color:#ccffff;
}
.home .wpb_text_column p,
.home .wpb_text_column h2,
.home .wpb_text_column h3{
  text-align:justify;
}

.home .wpb_row {
 margin-bottom:0;
 margin-top:0;
}
.home #newsbox{
  padding-top: 0;
  -moz-box-shadow: inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow: inset 0 0 10px #000000;
 padding: 1em 10em;
}

.home #newsbox .post-footer,
.home #newsbox .post-meta{
 display:none;
}
.home #newsbox h3,
.home .block-content,
.home .vc_row-has-fill>.vc_column_container>.vc_column-inner,
body.home .blog,
.home .blog-style-default article,
.vc_column_container > .vc_column-inner,
.vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner {
margin:0;
padding:0;
}
.home .features .vc_column_container {
  padding: 0.8em 20px;
}

#front-slider{
  overflow:hidden;
}

#front-slider .wpb_text_column.wpb_content_element {
  margin-bottom:0;
}

.page .gradient{
     background: linear-gradient(to bottom, #e2e6fc 0%,rgb(175, 172, 192) 43%,rgba(33, 35, 49, 0) 100%);
  height: 150px;
  position: absolute;
  width: 100%;
 left:0;
}

.home .gradient{
  background: linear-gradient(to bottom, #212331 0%,rgba(33, 35, 49, 0.69) 43%,rgba(33, 35, 49, 0) 100%);
}

.threebuttons{
  overflow:hidden;
}

.threebuttons .banner{
  width:100%;
  height: 460px;
  color:white;
  text-align:center;
  transition: all .3s ease-in-out;
  padding: 0 20px;
}

.threebuttons h3{
  color:white;
  margin-top:0;
  padding-top: 4em;
}

.threebuttons .text{
  font-size:1.25em;
}

.threebuttons .exponate .banner 
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(68,138,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/erlebnisse01.jpg);
}

.threebuttons .anfahrt .banner
{
  background:linear-gradient(rgba(216,74,98, 0.5), rgba(68,138,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/map02-1.jpg);
}

.threebuttons .tickets .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(68,138,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/ticket05-1.jpg);
}



.threebuttons .events1 .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(68,138,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/event02.jpg);
}

.threebuttons .events2 .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(68,138,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/vermietung01.jpg);
}

.threebuttons .events3 .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(108,100,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/vermietung02.jpg);
}


.threebuttons .ver1 .banner 
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(38,138,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/erlebnisse01.jpg);
}

.threebuttons .ver2 .banner
{
  background:linear-gradient(rgba(216,74,98, 0.5), rgba(108,138,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/map02-1.jpg);
}

.threebuttons .ver3 .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(68,188,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/ticket05-1.jpg);
}



.threebuttons .pro1 .banner 
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(68,38,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/erlebnisse01.jpg);
}

.threebuttons .pro2 .banner
{
  background:linear-gradient(rgba(216,74,98, 0.5), rgba(68,11,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/map02-1.jpg);
}

.threebuttons .pro3 .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(68,123,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/ticket05-1.jpg);
}



.threebuttons .events .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(68,138,255, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/07/event04.jpg);
}

.threebuttons .vermietung .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(100,100,205, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/06/erlebnisse02.jpg);
}
.threebuttons .vrevents .banner
{
  background:linear-gradient(rgba(47,64,71, 0.5), rgba(228,0,230, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/07/VRevents.jpg);
}
.threebuttons .teamb .banner
{
  background:linear-gradient(rgba(47,64,71, 0.5), rgba(228,0,230, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/2017/10/teambuilding.jpg);
}
.threebuttons .gutscheine .banner
{
  background:linear-gradient(rgba(147,64,71, 0.5), rgba(100,100,205, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/gutscheine01.png);
}
.threebuttons .onlineshop .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(100,120,205, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/onlineshop01.png);
}
.threebuttons .schulklasse .banner
{
  background:linear-gradient(rgba(247,64,71, 0.5), rgba(100,120,205, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/schulklassen01.png);
}


/*  --------------------- SandboxAR Buttons   ------------------*/


.threebuttons .sandboxar-bildergalerie .banner
{
  background:linear-gradient(rgba(147,64,71, 0.5), rgba(100,100,205, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/gutscheine01.png);
}

.threebuttons .sandboxar-spezifikationen.banner
{
  background:linear-gradient(rgba(17,64,71, 0.5), rgba(100,100,205, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/gutscheine01.png);
}

.threebuttons .sandboxar-anfragen.banner
{
  background:linear-gradient(rgba(147,154,71, 0.5), rgba(100,100,205, 0.85)),
  url(https://www.gamesciencecenter.de/-/wp-content/uploads/gutscheine01.png);
}
.threebuttons .banner:hover{
 transform: scale(1.1);
}
#features .usp-text p{
  font-size: 30px; 
  color: #d2d2d2; 
  line-height: 1.8em;
}

#starred{ 
  background: #3e4051;
}
#starred .vc_column-inner {
  padding-bottom: 80px;
}

#starred .gem-client-set-title{
  display:none;
}

#starred .gem_client-carousel{
  margin-top:0;
}

#starred h3{
  margin-top:70px;
}
/*
#video{ margin-top:-169px; background: #ec5728;}
#video .wpb_column
{
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 92% 33%, 80% 21%);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 92% 33%, 80% 21%);
  background: white;
  margin-top:2px;
}

#video .container  {
  position:absolute;
  padding:0;
  width:100%;
}
*/
/*  --------------------- END home page settings   ------------------*/



/*  --------------------- START map and openenig times    ------------------*/
.map-times .wpb_text_column.wpb_content_element {
 color:white;
}
#map .gem-map-with-text {
  margin-bottom:-217px;
}
#map .wpb_text_column p {
  font-size: 1em;
  text-align: left;
}

#map{
 margin-top: -60px;
}

#map .gem-map-with-text-content{
     padding-top: 120px;
}


/*  --------------------- END map and openenig times    ------------------*/

/*  --------------------- START contact forms    ------------------*/
#contact-form .left{
 float:left;
 width:46%;
}
#contact-form .right{
 float:right;
  width: 50%;
}

#contact-form label{
  color: #282f42;
  font-weight: 400;
}

.wpcf7-form-control-wrap,
textarea, input{
 width:100%
}

span.wpcf7-not-valid-tip{
 font-size:0.7em;
}
select.wpcf7-form-control.wpcf7-select{
 height:50px;
}
.contact{
  /* width: 400px; */
  float: right;
  padding: 10px 20px 20px;
}
.wpcf7-form-control-wrap textarea {
 height:353px;
}
.equal-height{
display:flex;
}
.contact.margin-left{
  margin-left: 20px;
}
/*  --------------------- END contact forms    ------------------*/

/*  --------------------- START GSC Team    ------------------*/
.founders {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 30px;
  padding-top: 20px;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
}
.founders img {
  width:80%;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
}

.founders .wpb_single_image.vc_align_left {
  text-align: right;
}
#headsof .wpb_column {padding:20px;}
#headsof .n1,
#headsof .n3 {
  background-color: #f0f3f2;
}
#headsof .n2{
  background-color: #cbd4dc;
}
/*  --------------------- START GSC Team    ------------------*/


/*  --------------------- START Tickets   ------------------*/
#prices .gem-icon-with-text .gem-icon-with-text-content .wpb_text_column {
  width:50%;
  float:left;
}

#prices{
  width:80%;
  margin:0 auto;
}
/*  --------------------- START Tickets    ------------------*/


/*  --------------------- START diagonals    ------------------*/
.home .diagonal-up svg .fullwidth,
.home .diagonal-down svg .fullwidth,
.footer.diagonal-up svg .fullwidth,
.wc-footer svg .fullwidth{
  fill:#212331;
}

.wc-footer{  height:200px;}
.wc-footer svg {  height:100%;}

.home .diagonal-up svg{
margin-top:-217px;
-webkit-clip-path: polygon(0 0, 20% 48%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 20% 48%, 100% 100%, 0 100%);
}

.home .diagonal-down svg {
  margin: -1px;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 74% 34%);
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 74% 34%);
}

.home .diagonal-up .wpb_wrapper svg, 
.home .diagonal-down .wpb_wrapper svg {
  width: 100%;
  position: absolute;
  z-index: 1;
}

.diagonal-up svg,
.diagonal-down svg{
  height:200px;
}
.subpage.diagonal-down svg .fullwidth,
.subpage.diagonal-up svg .fullwidth,
.wc-header svg .fullwidth{
 fill:#e2e6fc;
}

.subpage.diagonal-up.header{
  margin-top: -218px;
z-index:3;
}
.subpage.diagonal-up{
  margin-top: -235px;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 83%, 35% 49%);
}
.subpage.diagonal-down{
  margin-bottom: -223px;
  z-index:1;
}
#footer-nav{ border-top:none;}
/*  --------------------- END diagonals    ------------------*/


.vc_row[data-vc-full-width].no-padding
{
  padding:0;
}
.vc_row[data-vc-full-width].footer{ margin-bottom: -135px;}

#page.vertical-header #primary-menu.no-responsive > li{
  padding-right: 36px;
}
#page.vertical-header #primary-menu.no-responsive > li > a{
      padding: 7px 0;
}

#primary-menu.no-responsive > li ul {
transform: none;
  -o-transform: none;
  -ms-transform: none;
  -moz-transform: none;
  -webkit-transform: none;
  position: static;
  visibility: visible !important;
  opacity: 1 !important;
 display:none;
     max-width: 190px;
  margin-left: 10px;
border-color: #52514C;
}

#primary-menu.no-responsive ul > li {
 border-color: #52514C;
}

#primary-menu.no-responsive > li > ul > li > a{
  padding: 6px;
  color: #a09d8e;
 /* Hintergrundfarbe subnav */
  background-color: #42413C;
}
#primary-menu.no-responsive > li.menu-item-has-children > a:after{
  font-family: 'thegem-icons';
  content: "\e602";
  float:right;
}

#primary-menu.no-responsive > li.menu-item-has-children.opened > a:after{
  content: "";
}


.wc-header {
    position: relative;
}

.wc-header img {
    max-height: 500px;
  object-fit: cover;
  width: 100%;
}

.wc-header svg{
  bottom: 0;
  position: absolute;
  height: 200px;
}

@media (min-width: 981px){

#page.vertical-header .vertical-toggle{
  height: 140px;
}

.menu-letters > div{
 font-size: 24px;
  height: 24px;
  font-weight: 600;
  text-indent: initial;
}
.menu-letters{
  margin-top:45px;
transition: opacity 0.5s ease-in-out;
}
.vertical-active .menu-letters{
  opacity: 0;
}

}
@media (max-width: 1199px){
 .wpb_row > * {
     margin-top: 0;
 }
 .wpb_row {
     margin-top: 0;
 }


 #map .gem-map-with-text {
   margin-bottom:-200px;
 }
}

@media (max-width: 1118px){
.header-corner {
    margin-top: -227px;
    height: 108px;
}
}


@media (max-width: 980px){



#page.vertical-header #site-header-wrapper .site-title{
  display: inline-block;
  width: 90%;
}

  .home .diagonal-up svg{
    margin-top:-215px;
 }
.vc_row[data-vc-full-width].footer{ margin-bottom: -133px;}
.header-corner {
    margin-top: -195px;
    height: 94px;
}

body {
   font-size:14px;
}
.no-tablet{
   display:none;
}
.subpage.diagonal-up svg {
    margin-bottom:-3px;
}
}

@media (min-width: 1600px) {
#page.vertical-header #site-header-wrapper {
  margin-left: -315px;
}
}


@media (max-width: 767px) {
  .gradient{
      display:none;
  }
  #page.vertical-header #site-header-wrapper{
    top: 0 !important;
    min-height: 0;
    width: 100%;	
    padding-top: 10px;
  }
  #site-header .primary-navigation{
    width: 10% !important;
    display: inline-block !important; 
  }
  #main{
    padding-top: 137px;
  }
  #page.vertical-header .vertical-toggle{
    display: none;
  }

  #contact-form .right,
  #contact-form .left {
    width:100%;
  }
  #contact-form .right {
    padding-top:20px;
  }
  .equal-height{
    display:block;
  }
  .contact{
    width: auto;
    float: none;
    margin-left:0px;
  }

  .contact.margin-left{
    margin-left:0px;
  }
  .diagonal-up svg,
  .diagonal-down svg,
  .wc-footer{
    height:120px;
  }
  .subpage.diagonal-up.no-padding{
    margin-top:-146px;
  }
  .subpage.diagonal-up{
    margin-top: -155px;
    clip-path: none;
  }
  .subpage.diagonal-down{
    margin-bottom:-141px;
  }


  .home .diagonal-up svg,
  .home .diagonal-down .svg{
    margin-top: -132px;
  }
  #map .gem-map-with-text {
    margin-bottom:-115px;
  }
  .threebuttons .banner{
      height:260px;
  }

  .threebuttons .tickets .banner,
  .threebuttons .beratung .banner{
      height:340px;
  }
  #secondarybtn .btn{
      padding-bottom:50px;
      padding-top:0; 
      padding-top:70px;
  }
  #secondarybtn .sec4{
      padding-bottom:90px;
  }
  #map .gem-map-with-text-content .container .vc_row > .wpb_column {
      padding-bottom:30px;
  }

  #page.vertical-header #site-header-wrapper{
    top: 0 !important;
    min-height: 0;
    width: 100%;	
    padding-top: 10px;
  }

}



@media (max-width: 480px){
.header-corner {
    margin-top: -179px;
    height: 87px;
}

body {
   font-size:12px;  
}

.vc_row[data-vc-full-width].top-slider.clipped{
  clip-path: polygon(0% 0%, 0% 73%, 22% 86%, 100% 100%, 100% 0%);
}

#prices{
  width:100%;
  margin:0 auto;
}
#prices .gem-icon-with-text .gem-icon-with-text-content .wpb_text_column {
    float:left;
 }
#prices .gem-icon-with-text .gem-icon-with-text-content .wpb_text_column:nth-child(2)  {
    text-align:right;
 }
 #map .wpb_text_column p {
    font-size: 1.5em;
    text-align: center;
 }

.vc_row[data-vc-full-width].footer{
  margin-bottom: -132px;
}
}


@media (min-width: 1212px) {
 .home .container {
     width: 100%;
 }
}

@media (min-width: 767px) {
 #services{
  display:flex;
}
#services .vc_column-inner,
#services .wpb_wrapper,
#services .gem-textbox,
#services .gem-textbox-inner,
#services .gem-textbox-content{
    height:100%;
}
.threebuttons .wpb_column.vc_col-sm-4{
  padding-right:6px;
}

.threebuttons .wpb_column.vc_col-sm-4:last-child {
  padding-right:0;
}
}