/* 
 Theme Name:   gsc
 Theme URI:    
 Description:  Website of Game Science Center Berlin
 Author:       Georg
 Author URI:   makeitepic.de
 Template:     thegem
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/
/* 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;
}

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

.page .block-content{
   padding-top:0;
}

/*  ------------
#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;
  }
}
/*  --------------------- 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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://www.gamesciencecenter.de/-/wp-content/uploads/2017/10/teambuilding.jpg);
}



.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{
    fill:#212331;
}

.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{
   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: "";
}


.woocommerce .woo-header{	position: relative;}
.woocommerce .woo-header > img{	
	object-fit: cover;
    max-height: 500px;
    width: 100%;
}

.woocommerce .woo-header {
	position: absolute;
    bottom: 0;
    z-index: 25;
    height: 200px;
}

@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{
		top: 0;
		min-height: 0;
		width: 100%;	
		padding-top: 10px;
	}
	#page.vertical-header #site-header-wrapper .site-title{
		display: inline-block;
		width: 90%;
	}
	#primary-navigation{
		display: inline-block;
	}
    .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;
    }

  #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{
    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;
  }

}



@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;
}
}