/*! 
Theme Name: Studio Veh Theme URI: http://webiz.team 
Author: Webiz Team Author URI: https://webiz.team/ 
Description: Studio Veh Theme Version: 1.0.0 
License: GNU General Public License v2 or later License 
URI: LICENSE Text Domain: studioveh */

	/* grid */
	.site-content { padding-top: 3.5em;}
	.error404 .site-content { padding-top: 5.5em;}
	.home .site-content {padding-top: .5em;}
	/*.home .site-header {display: none;}*/
	
	body.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .wrapper {
	   position: relative;
	}
	
	/* a */
	a { text-decoration: none; }
	a, 
	a:visited { color: #000;}
	
	a:hover, 
	a:focus, 
	a:active {
		 color: #001EFF;
		 text-decoration: none;
		 outline: 0; 
		 opacity: 1 !important;
	}
	a.brands-link:after {content: " →";}

	/*underline*/
	.underline,
	.projects .block-brands h2,
	.projects .block-clients a h2 { 
		position: relative; 
		display: inline-block; 
	}
	.underline:after,
	/*.projects .block-brands h2:after,*/
	.projects .block-clients a h2:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 2px;
		bottom: 0px;
		left: 0;
		background: #7080FE;
	}
	
	.projects .block-brands h2:hover,
	.projects .block-clients a h2:hover,
	.accordion_header h1:hover, 
	.accordion_item.active .accordion_header h1 {
		color: #001EFF;
	}
	
	/* ----- Sections ----- */
	.section-margin-bottom, 
	.section-margin-bottom-small-mobile {
	   margin-bottom: 110px;
	}
	.section-margin-top-desktop {
	   margin-top: 110px;
	}
	.row-margin-bottom-desktop {
	   margin-bottom: 70px;
	}
	.section.block-brands div:not(.section-images-only) img, 
	.section.block-brands div:not(.section-images-only) video {
	   margin-bottom: 35px;
	}
	.section img, .section video, 
	.block-content img, 
	.block-content video {
	   width: 100%;
	   height: auto;
	}
	
	
	/* ----- WHITE FADE ----- */
	.white-fade {
		height: 80px;
		position: fixed;
		top: 40px;
		width: calc(100% + 24px);
  		margin-left: -12px;
		z-index: 1; 
		background: linear-gradient(180deg, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100%);
		background-position: 50% 50%;
		display: none;
	}
	
	body.contact .white-fade {
		background: linear-gradient(180deg, rgba(196,251,117,1) 0, rgba(196,251,117,0) 100%);
	}
	body.fade .white-fade {
		display: block;
	}
	
	
	
	/* --------------------------
	 HOME
	 -------------------------- */
	.home, .home .block-quote a {
	   background: black;
	   color: white;
	   -webkit-transition: 1s ease-in-out;
	   transition: 1s ease-in-out;
	}
	
	.home .block-quote a { position: relative; }
	.home .block-quote a:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 2px;
		bottom: 0px;
		left: 0;
		background: #fff;
	}
	.home.scrolled .block-quote a:after { 
		background: #7080FE;
		/*background: #000;*/
	}
	
	/*scrolled*/
	.home.scrolled,
	.home.scrolled .block-quote a {
	   background: white;
	   color: black;
	}
	.home.scrolled .block-quote a:hover { 
		color: #001EFF; 
		-webkit-transition: .3s ease-in-out;
	    transition: .3s ease-in-out; 
	}
	.home.scrolled .logo-home svg path {
	   fill: black;
	}
	
	/*.data-snap-point { 
		height: 100vh;
		width: 100%;
		position: relative;
		text-align: left;
	
	}*/
	
	/* --------------------------
	INFO / TEAM 
	 -------------------------- */
	.team-member {
	   margin-bottom: 50px;
	}
	.team-member img, 
	.team-member video {
	   margin-bottom: 0px;
	   width: 100%;
	   height: auto;
	}
	.team-member.col-md-12 img, 
	.team-member.col-md-12 video {
	   margin-bottom: 0;
	}
	.team-member h3 {
	   margin: 0;
	}
	.team-member:last-child {
	   margin-bottom: 0;
	}

	
	/* --------------------------
	INFO
	 -------------------------- */
	.service .page-title .headline,
	.rectangle { 
		display: inline-block; 
		vertical-align: top;
	}
	
	.service p.copy {
		padding-left: 3.9rem;
	}
	
	
	/* ------ INFO / SERVICE / ACCORDION ------- */	
	.accordion_item .accordion_body {
		display: none;
	}
	
	.accordion { margin-top: 50px; }
	.accordion h1.page-title { 
		margin-bottom: 20px; 
	}
	
	.accordion_header,
	.rectangle,
	.rectangle:hover { cursor: pointer; }
	
	.accordion_header { 
		position: relative;
		caret-color: transparent;
	}
	
	/*rectangle*/
	.rectangle-icon {
		width: 3rem;
		height: 3rem;
		display: inline-block;
		position: relative;
		top: .2em; 
	}
	.rectangle span {
	  position: absolute;
	  width: 1.75rem;
	  height: .3rem;
	  background: black;
	  display: inline-block;
	  transition: all .2s ease;
	}

   .rectangle span:first-of-type {
	  left: 2px;
	  transform: rotate(45deg);
   }
   .rectangle span:last-of-type {
	  right: 0;
	  transform: rotate(-45deg);
   }
   
	/* hover / active */	
	.rectangle:hover span:first-of-type,
    .accordion_item.active .rectangle span:first-of-type {transform: rotate(-45deg);}
	.rectangle:hover span:last-of-type,
    .accordion_item.active .rectangle span:last-of-type {transform: rotate(45deg);}
	
	
	/* --------------------------
	CONTACT 
	 -------------------------- */
	body.contact,
	body.contact .site-header { background-color: #c4fb75; }
	
	body.contact .block-content .col-md-4 { 
		-ms-flex-preferred-size: 50%;
         flex-basis: 50%;
         max-width: 50%;
	}
	body.contact .block-content .col-md-8 { 
		-ms-flex-preferred-size: 50%;
         flex-basis: 50%;
         max-width: 50%;
	}
	
	/*social*/
	body.contact a.social { 
		margin-bottom: 10px;
		display: inline-block;
	}
	
	/*cookie*/
	body.contact #cookie-alert { background-color: #fff; }
	
	
	/* --------------------------
	SINGLE
	-------------------------- */
	.project-client {
		margin-bottom: .66em;
	}

	/* Logo */
	.site-branding.topleft svg {
		width: 280px;
		height: auto;
		margin: 60px 0 0 12px;
		position: absolute; 
		z-index: 2;
	}
	.home .site-branding.topleft svg {
		display: none; 
	}
	
	.page .site-branding.topleft svg {
		position: absolute
	}
	.page .site-main,
	.single .site-main { margin-top: 130px; }
	.page.home .site-main { margin-top: 0px; }
	
	
	/* --------------------------
	LANDINGPAGE
	-------------------------- */
	/*viewport*/
	/*.landingpage #viewport { display: block !important; }*/
	
	/*max-width*/
	/*.lp-top .col-md-8,
	.lp-textbox .col-md-8,
	.lp-service .col-md-8 { max-width: 1000px; }*/
	
	/*inactive*/
	body.landingpage #newsticker,
	body.landingpage .top-nav,
	body.landingpage .entry-header,
	body.landingpage footer { display: none !important; }
	
	/*max-width*/
	body.landingpage #page { 
		max-width: 1600px; 
		margin: auto;
	}
	
	/*logo*/
	body.landingpage .site-branding { margin-top: -30px }
	
	/*cookie*/
	body.landingpage #cookie-alert {background: #DBFECE;}
	
	
	.trans-2 {
		transition: .2s ease all;
		-moz-transition: .2s ease all;
		-webkit-transition: .2s ease all;
	}
	
	/*button*/
	body.landingpage a.button {
		border-radius: 10px;
		background: #000;
		display: inline-block;
	}
	
	body.landingpage a.button p {
		padding: 6px 15px 4px; 
		margin: 0px; 
		color: #fff;
		text-transform: uppercase;
	}
	body.landingpage.firefox a.button p {
		padding: 6px 15px 2px; 
	}
	
	body.landingpage a.button:hover {
		background: #666;
	}
	
	/*border*/
	body.landingpage .round { border-radius: 15px; }
	
	/*lp-top*/
	.lp-top p.page-title { margin-bottom: 30px; }
	
	/*lp-textbox*/
	.lp-textbox h2 {
		padding: 15px 20px; 
		margin-bottom: 1.3em;
	}	
	.lp-textbox h2.left {padding: 0px 20px 0 0;}
	
	.lp-textbox h2.lightgreen {
		background: #DBFECE;
	}
	.lp-textbox h2.brown {
		background: #5F4013;
		color: #C0FA74;
	}
	
	/*lp-service*/
	.lp-service p.copy {
		padding-left: 3.9rem;
	}
	
	/*lp-bottom*/
	.lp-bottom {margin: 0 0 60px; }
	.lp-bottom .col-md-12 {
		background: #C0FA74;
		padding: 15px 20px;  
	}
	.lp-bottom .button { margin-top: 3em; }
	
	/*lp-footer*/
	.lp-footer .impressum { text-align: right; }
	.lp-footer .impressum a { position: relative; }
	.lp-footer .impressum a:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 2px;
		bottom: 0px;
		left: 0;
		background: #000;
	}
	
	@media (min-width: 1023px) {
	  /*RESP-LP*/
	  .lp-footer .col-xs-12 {
		   -ms-flex-preferred-size: 50%;
		   flex-basis: 50% !important;
		   max-width: 50% !important;
	  }
	}
	
	@media (max-width: 1023px) {
	  /*RESP-LP*/
	  .landingpage h2.left br { display: none;}
	  .landingpage h2.left {margin-bottom: .5em;}

	  .landingpage .lp-service h2.left,
	  .landingpage .lp-textbox h2.left {margin: .5em 0;}
	}
	
	@media only screen and (max-width: 839px) { 
	  /*font*/
	  .landingpage h2 {font-size: 1.2em;}
	  .landingpage h2 br,
	  .lp-logoslider br {display: none;}
	  
	  /*RESP-LP*/
	  .lp-footer .impressum {margin-top: -5px;}
   }
   
   @media (max-width: 600px) {
	  /*font*/
	  .landingpage p.page-title { font-size: 1.25em;}
	  .landingpage p.page-title br { display: none;}
	   
	  .landingpage h2 { font-size: 1.05em;}
	  .landingpage .accordion_header h1.page-title { font-size: 1.05em;}
	  
	  /*RESP-LP*/
	  body.landingpage .site-branding {
		  margin-top: 10px;
	  }

	  .lp-textbox.section-margin-bottom,
	  .lp-service.section-margin-bottom {
		  margin-bottom: 40px;
	  }
	  
	 .lp-service .rectangle-icon {
		top: .6em;
		width: 2rem;
		height: 2rem;
	 }
	 .lp-service .rectangle span { width: 1.15rem;}
	  
	  .lp-bottom .button {margin-top: 2em;}
	  .lp-bottom.section-margin-bottom {
			margin-bottom: 30px;
		}
	  
	}
	
	@media (max-width: 480px) {
	  /*font*/
	  .lp-footer p,
	  .lp-footer .impressum a {
		  font-size: .75em;
	  }
	  
	  /*RESP-LP*/
	  .lp-service p.copy { padding-left: 2.5rem;}

	}
	
	
	
	/* --------------------------
	COOKIE
	-------------------------- */
	#cookie-alert {
	   position: fixed;
	   color: black;
	   bottom: 0;
	   left: 0;
	   background: #96E19F;
	   padding: 10px 0;
	   width: 100%;
	   display: none;
	   z-index: 2;
	}
	#cookie-alert .cookie-accept-button {
	   cursor: pointer;
	}
	#cookie-alert .cookie-close-button {
	   position: absolute;
	   right: 0;
	   top: 3px;
	   margin-left: 5px;
	   cursor: pointer;
	   width: 27px;
	}
	#cookie-alert .privacy {
	   float: right;
	   margin-right: 30px;
	}
	#cookie-alert .row,
	#cookie-alert a { position: relative;}
	#cookie-alert a:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 2px;
		bottom: 0px;
		left: 0;
		background: #000;
	}
	
	#cookie-alert a.privacy:after {
	   bottom: 3px;
	}
	
	/* RESP VIEW */
	 @media only screen and (max-width: 1599px) { 
	    /* service*/
	  	.rectangle-icon { top: .3em; }
	    .rectangle span { height: .2rem; }
	 }
	 
	 @media only screen and (max-width: 1439px) { 
	    /* service*/
	   .rectangle-icon { top: .4em;}
	 }
	 
	 @media only screen and (max-width: 1023px) { 
	 	/*info / team*/
		.team-member.col-md-6:nth-child(even) {
			padding-left: 8px;
		}
		.team-member.col-md-6:nth-child(odd) {
			padding-right: 8px;
		}
		
		/*contact*/
		body.contact .block-content .col-md-4,
		body.contact .block-content .col-md-8 {
		  -ms-flex-preferred-size: 100%;
		  flex-basis: 100%;
		  max-width: 100%;
		}
		
		body.contact .block-content p.page-title {
		  margin-bottom: 30px;
		}
		
		/* single Logo*/
		.site-branding.topleft svg {
			width: 156px;
			margin: 55px 0 0 12px;
			position: absolute;
		}
		.page .site-main, 
		.single .site-main {
			margin-top: 80px;
		}
		
		/*footer*/
		.site-footer .site-branding {
			padding: 0px;
		}
	}
	
    @media only screen and (max-width: 839px) { 
	   /* service */
	   .rectangle-icon { top: .4em; }
	   .rectangle span { height: 2px; }
	}
	 
	 @media only screen and (max-width: 766px) { 
		/*cookie*/
		#cookie-alert a.privacy:after {
		   bottom: 7px;
		}
	 }
	 
	 @media only screen and (max-width: 599px) { 
		
		/* home */
		body.home .block-quote h1.page-title-big {
			margin-bottom: 30px;
		}
	
		/*info / team*/
		.team-member {
		   margin-bottom: 30px;
		}
		 
		/* service */
		.accordion h1.page-title { 
			margin-bottom: 0px; 
		 }
		 
		/* ------ chance navigation to burger ------ */
		 
		/*white-fade*/
		.white-fade {top: 0px;}
	
		/* single Logo*/
		.site-branding.topleft svg {
			margin-top: 10px;
		}
		
		.page.news { margin-top: 50px; }
		.home.news { margin-top: 0px; }
		
		.page .site-main,
		.single .site-main { margin-top: 30px; }

		/*cookie*/
		#cookie-alert a:after {
			height: 1px;
		}
	  	#cookie-alert a.privacy:after {
		   bottom: 7px;
		}
		
	 }
	 
	 @media only screen and (max-width: 479px) { 
	 	 /* service */
		 .rectangle-icon {
			top: .6em;
			width: 2rem;
			height: 2rem;
		 }
		 .rectangle span { width: 1.15rem;}
		 .service p.copy {
			padding-left: 2.5rem;
		 }
		
	 }