/*
 * Globals
 */

@font-face {
    font-family: 'VAG Rundschrift D';
    src: url('/fonts/subset-VAGRundschriftD.woff2') format('woff2'),
        url('/fonts/subset-VAGRundschriftD.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #fff;
}
body {
  color: #fff;
  text-align: center;
}

.greybg {background-color:#333; color:#fff;}
.whitebg {background-color:#fff; color:#333;}
.nopad {padding:0;}

.anchor{
  display: block;
  height: 100px; /*same height as header*/
  margin-top: -100px; /*same height as header*/
  visibility: hidden;
  z-index:-1;
  position:relative;
}

.hero {
	height:40vw;
	min-height:220px;	
	max-height:320px;
	position: fixed;
	width:100%;
	top:80px;
	padding-top:20px;
}

.hero:before {
	content: '';
	display: inline-block;
	height: 100%; 
	vertical-align: middle;
	margin-right: -0.25em; /* Adjusts for spacing */  
}

.scrollingContent {
	position:relative;
	z-index:2;
}

.hero h1 {
	display:inline-block;	
	max-width:95%;
	margin:0;
	vertical-align:middle;
	font-size:50px;
	text-shadow:2px 2px 3px rgba(51,51,51,0.2);
}


@media (max-width:500px) {
	.hero h1 {font-size:40px;}
	}

.testimGreen {background-color:#04f0d0;}
.testimBlue {background-color:#4fa3d6;}
.testimYellow {background-color:#fede2f;}



/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}


/*
 * Cover
 */

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}


/*
 * Footer
 */

.mastfoot {
  color: #999; /* IE8 proofing */
  color: rgba(255,255,255,.5);
}


html, body {
	height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom:-51px;
}

.push {
	height:51px;	
}

@media (max-width: 950px) {
	.wrapper {
		margin-bottom:-126px;
	}
	.push {
		height:126px;	
	}

}

/*
 * Affix and center
 */



  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }




/* ------------ nav ------------ */


.masthead {
    top: 0;
	background:#333;
	position:fixed;
	padding-top:15px;
	z-index:10;
}

.masthead.home {
	z-index:10;
	background-color: rgba(51, 51, 51, 0.5);
	position:fixed;
}

.navbar {
	text-align: right;
	margin-bottom:15px;
}
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}

.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}

.navbar.home .navbar-nav {
    margin: 14.5px -15px 7.5px;
}

.navbar-nav>li:first-child {
	border:none;	
}

.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-collapse.collapse.in {display: block !important; }

ul.nav li a {
	color:#fff !important;	
}

.navbar {
	background:none;
	border:none;	
}

.masthead img {
	float:left;
	height:70px;
	transition: height 150ms;
}

.navbar-nav>li:hover {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.2);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	
}

#contactCTA {
	position:fixed;
	text-align:right;
	z-index:30;
	right:80px;
	top:32px;
	transition:150ms;
	overflow:hidden;
	height:36px;
}

#contactCTA button.cta {
	color: rgb(51, 51, 51);
	border: none;
	background: rgba(255, 255, 255, 1) none repeat scroll 0% 0%;
	margin:0 !important;
}

#contactCTA a:hover button {
	background: rgba(255, 255, 255, 0.7) none repeat scroll 0% 0% !important;
	border:none !important;
	padding:8px 25px;
	margin:0 !important;
}


@media (max-width: 580px) {
	#contactCTA {
		display:none !important;	
	}
}


@media (min-width: 768px) {
#navbar {
	border:0 !important;
	box-shadow:none;
}

.navbar-header {
    float:right;
}
.navbar-toggle {
    display: inline-block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-nav {
    float:right;
    margin: 14.5px -5px 7.5px -15px;
	transition:margin 150ms;
}
.navbar-nav>li {
    float:right;
	font-size:18px;
    border-right:solid 2px #fff;
	margin-top:4px;
}


.navbar-nav>li>a {
    padding-top: 5px;
    padding-bottom: 5px;
}

.navbar-collapse.collapse.in {display: inline-block !important; }

li.navend {
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

}
/* ---------- nav end ---------- */



/* ---- swiper custom styles ---- */

.slide-title {
	z-index:10; 
	position:relative; 
	width:100%; 
	color:#fff;	
	padding:0 40px;
	/*text-shadow: 0 0 3px #888;*/
	display:inline-block;
	vertical-align:middle;
}

.slide-title h1 {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:700;
	font-size:50px;
}

.slide-title h3 {
	margin-top:5px;
	font-weight:400;
}

.swiper-slide video {	
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

.swiper-slide {
	overflow:hidden;	
}

.swiper-slide:before {
	content: '';
	display: inline-block;
	height: 100%; 
	vertical-align: middle;
	margin-right: -0.25em; /* Adjusts for spacing */  
}

.swiper-wrapper, .swiper-button-white {
	position:fixed !important;
}

.swiper-button-white {
  z-index: 1 !important;
}


.moreArrow {
    background-image: url("../img/moreArrow.svg");
	background-size:cover;
	position:fixed;
	bottom:55px;
	height:30px;
	width:44px;
	z-index:2;
	left:calc(50% - 22px);
	transition:height 150ms;
}

.moreArrow:hover {
	cursor:pointer;
	height:35px;
}


@media (max-width: 425px) {
	.slide-title h1 {
		font-size:10vw;
	}
}

@media (max-width: 950px) {.moreArrow {bottom:130px;}}
@media (max-width: 500px) {.moreArrow {bottom:10px;}}





/* -- swiper custom styles end -- */


/* --------- intro text --------- */

div.introText {
	width:100%;
	padding:15px 15px 25px;
	text-align:center;
	background-color:#333;
	color:#eaeaea;
}

div.introText a {
	color:#138688;
	font-weight:400;
}

div.introText p {
	font-size:18px;
	font-weight:100;
}

div.introText h1 {
	font-size:38px;
	color:#fff;
	margin-bottom:20px;
	text-shadow:0px 0px 15px #232323;
	font-family:'Roboto';
	font-weight:500;
}

div.introText h1 span {
	font-weight:400;
}

@media (max-width: 580px) {
	div.introText h1 span {
		display:none !important;	
	}
}


/* ------- intro text end ------- */




/* ------- portfolio grid ------- */

#reel1, #reel2, #reel3 {
	height:auto;	
}


.taphover {
	display:contents;
}

.portfolioWrapper {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-grid-container {
	position:relative;
	z-index:2;	
}

.containerFlex {
	
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: stretch;
    flex-direction: row;
    align-items: center;
	margin-bottom: 70px;
    margin-top: 20px;

}

.portfolio-grid-container, .portfolio-grid-frame {
	padding:0;
	
}

.portfolio-grid-frame {
	height:28vw;
	width:45%;
	overflow:hidden;
	display:block;
 	text-align: center;
	background-color:#fff;
	position:relative;
}

.portfolio-grid-frame img {
	transition:500ms;
}
 
.portfolio-grid-frame:before {
	content: '';
	display: inline-block;
	height: 100%; 
	vertical-align: middle;
	margin-right: -0.25em; /* Adjusts for spacing */  
}


.portfolio-grid-container img {
	width:100%;
	height:auto;
	position:absolute;
	left:0;
}

.portfolio-grid-hover {
	z-index:10;
	color:#FFF;
	display:inline-block;
	vertical-align:middle;
	position:relative;
	max-width:95%;
	opacity:0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
	transition:     	opacity 0.5s;
	
}

.portfolio-grid-hover h2, .portfolio-grid-hover h3 {
	margin-top:0;
}

.portfolio-grid-frame:hover img {
	filter: brightness(0.5);
}

.portfolio-grid-frame:hover .portfolio-grid-hover {
	opacity:1;
}


.showreel-grid-container {
	position:fixed;
	top:100px;
	background:rgba(255,255,255,1);
	opacity:1;
	padding-top:15px;
	color:#333;
	width:100%;
}

.showreel-grid-container h3 {
	margin: 10px 0 25px;
}

.showreel {
	background-size:cover;
	background-position:center;
	height:17.5vw;
	color:#fff;
	min-height: 250px;
}

.showreel.Ani {background-image:url(../img/portfolio/universe-musical/universe-musical-hero.png)}
/*.showreel.Mot {background-image:url(../img/portfolio/motion-reel.jpg)}*/
.showreel.Int {background-image:url(../img/portfolio/interactive-reel.jpg)}

.prtflio {
	padding-top:40px;
}

.prtflio h4 a {
	color:#138688;
}


@media (min-width: 1200px) {
	.portfolio-grid-hover {
	}
	
	.portfolio-grid-frame {
		height:18.8vw;
		overflow:hidden;
		width:30%;
		
	}
	
}

@media (max-width: 767px) {
	
	.portfolio-grid-container{
	    
	}
	.portfolio-grid-frame {
		height:18vw;
		transition:height 500ms;
		width:100%;
		border: 5px solid white;
	}
	
	#heroheight, .portfolio-grid-hover {
		opacity: 1;
	}
	.portfolio-grid-hover h2 {
		margin-bottom:0;
		font-size:25px;
	}
	.portfolio-grid-hover h3 {
		display:none;
	}
	.portfolio-grid-container img {
		position:absolute;
		left:0;
		top:-50%;
		filter: brightness(0.5);
	}
	.portfolio-grid-container a:hover img,
	.portfolio-grid-container a.hover img {
		opacity:1;
		top:-20%;
	}
	
	.portfolio-grid-container a:hover .portfolio-grid-frame, 
	.portfolio-grid-container a.hover .portfolio-grid-frame  {
		height:35vw;
		
	}

	.showreel-grid-container {
		position:relative;
	}
	.showreel-grid-container h3 {
		margin:10px 0 15px;
		padding-bottom:15px;
		border-bottom:1px dashed #999;
	}
	

	
}

@media (max-width: 430px) {
	.portfolio-grid-frame {
		height:23vw;
	}
}
/* ----- portfolio grid end ----- */


/* ----- individual project ----- */

	.prj-info {
		text-align:left;
		font-size:18px;
	}

	.prj-info p {
		margin-bottom:25px;
		line-height:30px;
	}
	
	.prj-hero {
		padding:0;
		overflow:hidden;
		height: calc(100vh - 240px);
	}

	.prj-video {
		height: 100%;
		max-width: 100% !important;
		background:#444;
	}

	.prj-title {
		padding-bottom:20px;	
	}
	
	.prj-title h2 {
		margin-top:15px;
		margin-bottom:15px;
	}
	
	.prj-title h4 {
		line-height: 26px;
	}
	
	.prj-title h4 a {
		color:#138688;
	}
	
	.prj-thumbs {
		padding:0;	
	}
	
	.prj-thumbs img {
		width:100%;
		height:auto;
		margin:0;
		box-shadow:0 0 0 #888;
		transition:250ms;

	}

	.prj-thumbs img:hover {
		box-shadow:0 2px 2px #888;
		margin-top:-2px;
		margin-bottom:2px;
		cursor:pointer;
		
	}

	
	.prj-thumbs div {
		padding-bottom:15px;
	}
	
	.prj-credits {
		background: #333;
		color:#fff;
		padding:5px 15px 20px;
	}
	
	.prj-credits ul {
		list-style:none;
		padding:0;
	}
	
	.prj-credits > ul > li {
		width:33.33333333%;
		display:inline;
		float:left;
	}
	
	.prj-credits p {
	 	font-size:20px;
	}
	.prj-credits h3 {	
		font-style: oblique;
		font-weight: bold;
		margin-bottom: 2px;
	}	
	
	.prj-credits h1 {	
		margin:15px 20px 0;
		padding-bottom:12px;
		border-bottom: 1px solid #fff;
	}
	
	.close.vid {
		color:#999;
		position:relative;
		right:0;
		margin:0 15px -60px -45px;	
		font-size:60px !important;
	}
	
	button.playVid {
		background:none;
		border:none;
		font-size:142px;
		top: calc(50% - 72px);
		margin:0 auto;
		opacity:0.7;
		transition:250ms; 
		 -webkit-filter: drop-shadow( 0 0 0 #888 );
      	  filter: drop-shadow( 0 0 0 #888 );
	}	
	.prj-hero:hover button.playVid {
		opacity:0.9;
		margin:-2px auto 2px;
		-webkit-filter: drop-shadow( 0 3px 2px #444 );
      	filter: drop-shadow( 0 3px 2px #444 );
	}
	
	
	.showreel button.playVid {
		font-size:11vw;
		top: calc(50% - 5.5vw);
		outline:none;
		transition:150ms; 
	}
	
	.showreel button.playVid:hover {
		opacity:0.9;
		font-size:11.2vw;
		top: calc(50% - 5.6vw);
	}
	
	.modal-content video {
		margin-bottom:-5px;
		border-radius:5px;
	}
	
	.prj-hero:hover {
		cursor:pointer;
	}
	
	.cta-btn {
		padding:25px;	
		font-size:18px;
	}
	
	.cta-btn p {
		line-height:30px;
	}
	
	button.cta {
		background:#333;
		color:#fff;
		border: 1px solid #333;
		border-radius:5px;
		padding:8px 25px;
		font-weight:bold;
		transition:150ms;
		margin:8px;
	}
	
	button.cta:hover {
		background:#444;
		border: 1px solid #444;
		padding:10px 27px;
		margin:6px;
	}
	

@media (min-width: 900px) {
	.prj-credits {
		padding:5px 0 20px;
	}
}

@media (max-width: 900px) {
	.showreel button.playVid {
		font-size:20vw;
		top: calc(50% - 10.5vw);
	}
	.showreel button.playVid:hover {
		font-size:20.2vw;
		top: calc(50% - 10.6vw);
	}
}

@media (max-width: 767px) {
	.prj-credits > ul > li {
		width:50%;
	}
	
	.prj-hero {
		height: calc(100vh - 300px);
	}
	
}

@media (max-width: 520px) {
	.prj-credits > ul > li {
		width:100%;
	}
	.showreel button.playVid {
		font-size:36vw;
		top: calc(50% - 18.5vw);
	}
	.showreel button.playVid:hover {
		font-size:36.2vw;
		top: calc(50% - 18.6vw);
	}
}
	
.makingofsection {
	padding-top:35px;
}

.makingofimg img {
	max-width:100%;
	border-radius:5px;
}

.makingofimg {
	padding:0 35px 35px 15px;
}

@media (max-width: 767px) {
	.makingofimg {
		padding:0 15px 35px;
	}
}

/* --- individual project end --- */

/* ---------- join us ----------- */

.jobsList ul {
	display:inline-block;
	list-style-type:none;
	padding:0;
}

.jobsList li {
	float:left;
	width:50%;
	font-size:18px;
	font-weight:100;
	font-family:"Roboto"
}

@media (max-width:500px) {
	.jobsList li {
		width:100%;
	}
}
	
select#role:required:invalid, select#location:required:invalid   {
	color:#999;
}

select#role option, select#location option {
  color: black;
}


.panel-default .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-heading, .panel-body {
	padding:0;	
}

.panel-group {
	text-align:left;	
}

.job-title, .job-title-info, .job-desc, .job-info  {
	padding:10px 15px;
}

.job-info {
padding-bottom:0;	
}

.job-title, .job-desc  {
	border-right: 1px solid #ddd;
}
.job-title-info, .job-info  {
	border-left: 1px solid #ddd;
	margin-left:-1px;
}

.job-title h4 {
	font-weight:bold;
}
.jobShare .social, .apply-form .jobShare p {
	float:left;
	margin-bottom: 10px;
}

.apply-form .jobShare p {
	margin-right:10px;	
}

.job-info button.cta {
	margin:8px 0;
}

.job-info button.cta:hover {
	margin:6px 0 6px -2px;
}

.job-info ul {
	padding-left:14px;
	margin-top:5px;
}

.job-info ul li span {
	white-space:nowrap;
}

.apply-form {
	text-align:left;
}

.apply-form label, .apply-form h2, .apply-form .jobShare {
	color:#333;	
}

.apply-form label {
	margin-top:6px;	
}

.apply-form h2 {
	margin:0 25px 15px 0; 	
}


@media (min-width:992px) {
.job-info button.cta {
	padding:10px 0px;
	width:100%;
}
.job-info button.cta:hover {
	width:101%;
	margin:7px -0.5%;
	padding:11px 0px;
}
}

@media (max-width:991px) {
	.job-title, .job-desc  {
	border-right: none;
}
.job-title-info, .job-info  {
	border-left:none;
	margin-left:0;
	padding-top:0px;
}
}




/* -------- join us end --------- */

/* ---------- about us ---------- */

.prj-title.aboutUs {
	padding-bottom:0;	
}

.history h4 {
	margin:0 15px 20px 0;
}

.history, .services {
	text-align:left;	
}

.services {
}

.services > div {
	display:inline-block;
	padding:15px;	
}

.services h3 {
	margin:0 0 8px 0;
	text-align-last:center;
}

.services ul {
	padding-left: 15px;
}

.services ul li {
	width:50%;	
	display:inline-block;
	float:left;
	font-size:15px;
	padding:5px 20px 5px 0;

	margin-left:-5px;
	list-style:none;
}

.oneofus {
	border:15px solid #fff;
	height:auto;
	color:#333;
	padding:0;
	min-height:100px;
}



.portfolio-grid-frame.oneofus:before {
	content: '';
	display: none;
	height: 0; 
	vertical-align: middle;
	margin-right: 0 /* Adjusts for spacing */  
}
 
.oneofus img {
	width:100%;
	/* position:relative;	
	
	height:auto;
	left:0;*/
}

.oneofus span.fadeContainer {
	position: relative;
	margin:0;
	width:100%;
}

img.fade {
  opacity: 1;
  -webkit-transition: opacity 0.5s linear;
  position: absolute; 
  left: 0px; 
  width:100%;
}

img.fade:hover {
  opacity: 0;
}


.oneofus h3 {
	margin:10px 0 20px;	
}

.nameBox {
	width: 100%;
	display: inline-block;
	background:#ececec;
	padding:0 10px;
}

@media (min-width: 1481px) /*and (max-width: 1750px)*/ {
	.oneofus {
		width: 20%;
	}
}

@media (min-width: 1190px) and (max-width: 1480px) {
	.oneofus {
		width: 25%;
	}
}

@media (min-width: 921px) and (max-width: 1189px) {
	.oneofus {
		width: 33.333%;
	}
}

@media (min-width: 768px) and (max-width: 920px) {
	.oneofus {
		width: 50%;
	}
}
@media (max-width: 767px){
	.oneofus {
		height:40vw;
		transition:500ms;
		overflow:hidden;	
	}

	.oneofus:hover {
		height:calc((1.5*(100vw - 60px)) + 140px);
	}
	
	.oneofus.extraLine:hover {
		height:calc((1.5*(100vw - 60px)) + 160px);
	}
	
	.oneofus.extraLinePlus:hover {
		height:calc((1.5*(100vw - 60px)) + 170px);
	}
	
	.oneofus img {
		margin-top:-25%;
		transition:500ms;
	}
	
	.oneofus.up5pc img {
		margin-top:-30%;
		transition:500ms;
	}
	
	.oneofus.up10pc img {
		margin-top:-35%;
		transition:500ms;
	}
	
	.oneofus.up15pc img {
		margin-top:-40%;
		transition:500ms;
	}
	
	.oneofus:hover img {
		margin-top:0%;
	}
}


@media (max-width: 1620px) {
	div.swiper-slide h2 {font-size:22px; line-height:3rem !important;}
	p.testimName {font-size:18px;}
}
@media (max-width: 720px) {div.swiper-slide h2 {font-size:16px; line-height:2rem;}}

@media (max-width:540px) {.testimProject,.testimRole{display:none;}}
@media (max-width:540px) {p.testimName{padding-bottom:20px !important;}}


/* ---------- about end --------- */

/* ----------- contact ---------- */

.contactInfo {
	background:#f3f3f3;
}


.cntct-container {
	padding:15px 30px;
	border-radius:5px;
	margin-top:12px;
}
.cntct-container label {
	text-align:left;
	padding-top:6px;
	
}

.cntct-container textarea {
	max-width:100%;
	min-width:100%;	
	min-height:91px;
}

.animated {
	-webkit-transition: height 0.2s;
	-moz-transition: height 0.2s;
	transition: height 0.2s;
}

@media (max-width: 767px) {
	#lastName {
		margin-top:5px;	
	}
	
	.cntct-container label {
		float:left;	
	}
}

@media (max-width: 520px) {
	.cntct-container {
		width:100% !important;
		left:0 !important;
	}
}


.form-group > .form-group {margin-bottom:0;}
.form-group {
	text-align: left;
	-webkit-transition: height 1s;
	-moz-transition: height 1s;
	transition: height 1s;
}
.form-group i {width:62px;}
.form-group .help-block {
	margin-bottom:0;
	
}

@media (max-width: 767px) {
	.form-group i {
		height:96px;
		line-height:96px;
	}
	.form-group.no-title i {
	   height: 34px;
	   line-height: 34px;
	}
}

/* --------- contact end -------- */



/* ------------ footer ---------- */
footer {
	background-color: #333;	
	padding:13px 5px 13px 15px;
	color:#fff;
	display:inline-block;
	width:100%;
	margin-bottom:-5px;
	position:relative;
	z-index:2;	
}


footer p.contact {
	text-align: left;
	margin:0;
	display:inline-block;
	float:left;
}

footer p span {
	margin:0 8px;
}

.social, .social:after {
	background-size:cover !important;
}

.social {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 30px;
	height: 30px;
	float:right;
	margin:-5px 10px 0 0;
}

.social:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}
.social:hover:after {
	opacity: 1;
}

.social.fb:after, .social.fb {background: url(../img/Facebook.png) no-repeat;}
.social.tw:after, .social.tw {background: url(../img/Twitter.png) no-repeat;}
.social.lin:after, .social.lin {background: url(../img/Linkedin.png) no-repeat;}
.social.gpl:after, .social.gpl {background: url(../img/Google+.png) no-repeat;}
.social.eml:after, .social.eml {background: url(../img/Email.png) no-repeat;}


.social.fb:after, .social.tw:after, .social.lin:after, .social.gpl:after, .social.eml:after {background-position: bottom;}

.homeGrid {
	margin-bottom:45px;
	background-color:#fff;

}

.footerCTA {
	padding: 0 25px;
	margin: 0;
	font-size: 12px;
	color: #333;
	border-radius: 3px;
	border: none;
	font-weight: bold;
  	background: rgba(255,255,255,1);
	transition:150ms;
}

.footerCTA:hover {
  	background: rgba(255,255,255,0.75);
}


@media (max-width: 950px) {
	footer p span {

		height:25px;
	}
	
	footer p span.title {
		font-size:18px;
	}
	
	.homeGrid {margin-bottom:118px;}
}

@media (min-width: 501px) {
	footer.fixedFoot {
		position:fixed;
		bottom:0;
		left:0;	
	}
	
	.ctaHidden {
	height:0;
	padding-top:36px;
	z-index:0 !important;
}
	
}

	
@media (max-width: 500px) {
	footer p span {
		margin: 0 0 5px;
		display:block;
		clear:both;
		width:100%;
	}
	footer .social {
		margin-top:0;
		margin-bottom:10px;
	}
	.homeGrid {margin-bottom:0}
	
	#contactCTA {
		display:block !important;
		top:auto;
		bottom:50px;
		width:100%;
		text-align:center;
		left:0;
		right:0;
		z-index:2;
	}
}




/* --------- footer end --------- */


.modal-dialog {}


.thumbnail {
	padding:0;
	border:none;	
}

.prj-modal-body {
	padding:0;
}

.item img.thumbnail {
	margin:0;
	width:100%
		
}

.carousel-control.left,.carousel-control.right{
  background-image:none;
}

.close {
	position:absolute;
	z-index:999;	
	font-size:40px !important;
	right:15px;
	top:5px;
}


/* 404 */



.err404wrap {
	height:calc(100vh - 130px);
	margin-top:100px;
}

.err404wrap:before {
	content: '';
	display: inline-block;
	height: 100%; 
	vertical-align: middle;
	margin-right: -0.25em;
	width:0.1%;
}

.err404 {
	margin:0 15px;
	display:inline-block;
	vertical-align:middle;
}

.err404 img {
	max-width:800px;	
}

.err404 {
	max-width:85%;	
}


/* Landing Page Selector */

.pageHold {
	display: flex;
}

.pageHold, .kfiMain, .kfsMain, .kfsInt, .kfiInt,.kfiBg,.kfsBg {
	height: 100%;
}

.kfiMain, .kfsMain {
	overflow: hidden;
	z-index: 10;
}
.kfsMain {
	background-image: url("/img/kfsbg.webp");
}

.kfiBg {
	width: 100vw;
	position: absolute;
	z-index: 0;
	background-image: url("/img/kfibg.webp");
}

.kfsBg {
	width: 100vw;
	position: relative;
	z-index: 0;
	background-image: url("/img/kfsbg.webp");
	
}

.kfsContent, .kfiContent {
	width: 100%;
}

.kfsMain,.kfiBg {
	background-size:cover;
}

.panel h1,.panel h2 {
	width: 100%;
	position: relative;
	color: white;
	text-shadow: 2px 1px 4px #363636;
}

.panel h1 {
	font-family: 'VAG Rundschrift D'; 
	font-weight: normal; 
	font-style: normal;
	top: 65vh;
	font-size: 3.5vw;
	white-space: nowrap;
}

.panel h2 {
	top:65vh;
	font-size: 2vw;
	font-weight:normal;

}

.panel h2 span {
display:inline-block;
line-height:0.7vw;
}

.panel h2 span::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform: scaleX(0);
  transition: transform 1s ease;
}

.panel:hover h2 span:after {
  transform: scaleX(1);
  transition: transform 3s ease;
}


.panel svg {
 	height: 45vh;
	margin: 15px;
	max-width: 80%;
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}

.panel {
	width: 50vw;
	transition: 0.2s;
	border-radius: 0;
	border: 0;
	
}

.panel:hover {
	width: 100vw;
	transition: 1s;
}

.kfiMain {
 	background: none;
}


@media (max-width: 500px) {
	.pageHold {flex-direction: column;}
	.panel {height: 50vh; width:100vw; align-items: center; display: flex; margin: 0;}
	.panel:hover {height: 100vh; width:100vw;}
	.panel svg {height:30vh; position: static; margin-top: -25vh;}
	.panel h1 {top:22vh; font-size: 10vw;}
	.panel h2 {top:20vh; font-size: 6vw;}
	.kfsMain,.kfiBg {background-size: cover; background-position: center}
	.kfsBg{clip-path: none;}
}





/* directors */

.adirector {
	border:15px solid #fff;
	height:auto;
	color:#333;
	padding:0;
	min-height:160px;
	
}



.portfolio-grid-frame.adirector:before {
	content: '';
	display: none;
	height: 0; 
	vertical-align: middle;
	margin-right: 0 /* Adjusts for spacing */  
}
 
.adirector img {
	width:100%;
	/* position:relative;	
	
	height:auto;
	left:0;*/
}

.adirector span.fadeContainer {
	position: relative;
	margin:0;
	width:100%;
}

img.fade {
  opacity: 1;
  -webkit-transition: opacity 0.2s linear;
  position: absolute; 
  left: 0px; 
  width:100%;
}

img.fade:hover {
  opacity: 0;
}


.adirector h2 {
	margin:20px 0;
	font-size:2.75vw;
	color:#fefefe;
		
}

.adirector .nameBox {
	width: 100%;
	display: block;
	padding:0 10px;
	position: absolute;
    top: 40%;
}

.nameBox.testimGreen {background-color:#04f0d0;}
.nameBox.testimBlue {background-color:#4fa3d6;}
.nameBox.testimYellow {background-color:#fede2f;}

@media (min-width: 1481px) /*and (max-width: 1750px)*/ {
	.adirector {
		width: 33.3333%;
	}
}

@media (min-width: 1190px) and (max-width: 1480px) {
	.adirector {
		width: 33.333%;
	}
}

@media (min-width: 921px) and (max-width: 1189px) {
	.adirector {
		width: 33.333%;
	}
}

@media (min-width: 768px) and (max-width: 920px) {
	.adirector {width: 50%;}
	.adirector h2 {font-size:3.75vw;}
}

@media (max-width: 767px){
	.adirector {
		height:40vw;
		transition:500ms;
		overflow:hidden;	
	}

	.adirector:hover {
		height:100vw;
	}
	
	.adirector img {
		margin-top:-25%;
		transition:500ms;
	}
	
	.adirector.up5pc img {
		margin-top:-30%;
		transition:500ms;
	}
	
	.adirector.up10pc img {
		margin-top:-35%;
		transition:500ms;
	}
	
	.adirector.up15pc img {
		margin-top:-40%;
		transition:500ms;
	}
	
	.adirector:hover img {
		margin-top:0%;
	}
	
	.adirector h2 {
		font-size:6.75vw;
	}
	
	.adirector .nameBox {
		top: 9vw;
		transition:0.5s;
	}
	
	.adirector:hover .nameBox {
		top: 35vw;
		transition:0.65s;
	}
}