/* --------------------------------------------------------

	Author:      click solutions GmbH  
	
	Project:     www.konzept3d.de



   -------------------------------------------
	TABLE OF CONTENT :: STYLE SECTIONS
		
	  GENERAL
		Typography
		Icons
		Colors
		Backgrounds
	
	  Layout
		Basic Layout
		Startpage Layout
		Topbar
		Footer

	  COMPONENTS
		Navigation
		Text & Content
		Buttons
		Quicksearch
		Social
		Slick Carousel
		blueimp Gallery
		Logos-Index
		

	  MODULES
		News
		Project
		Service
		...
		[…and some additional custom modules]
		

   ------------------------------------------- */
@charset 'UTF-8';








/* ========================================================
    Typography
   ======================================================== */

/* webfonts loaded by script in 'meta_head' template */
.font-family-sans {
	/* Corporate S Regular */
	font-family: 'Corporate S Regular', sans-serif;
	font-weight: 400;
}
.font-family-serif {
	/* Corporate A Regular */
	font-family: 'Corporate A Regular', serif;
	font-weight: 400;
}


html {
  font-size: 100%; 
  color: #333; }

body {
	font: 400 normal 100% 'Corporate S Regular', Avenir, Corbel, sans-serif;
	-webkit-font-smoothing: antialiased; 
	/*-webkit-font-smoothing: subpixel-antialiased; */
}
	
	/* Fallback font - Adjust font-size, line-height, letter-spacing to avoid jumpiness */
	.wf-inactive body,
	.mti-inactive body {
		font: 100 normal 100%/.93 Avenir, Corbel, sans-serif; }


h1, .h1 {
	font-size: 2em; /*32px*/
	line-height: 1.17;
	margin: 0 0 .3em; 
	font-weight: 400;
	color: #9f003b;
	color: inherit;
}

h2, .h2 {
	font-size: 1.5em; /*24px*/
	line-height: 1.25;
	margin: .5em 0; 
	font-weight: 400;
	color: #181f27;
	color: inherit;
}

h3, .h3 {
	font-size: 1.125em; /*18px*/
	line-height: 1.19em;
	margin: 1em 0;
	font-weight: 400;
	color: #353533;
	color: inherit;
}

h4, .h4 {
	font-size: 1em;
	line-height: 1.294em;
	margin: 1.5em 0;
	font-weight: 400;
}

p {
	font-size: 1rem;
}
	
	p.text--intro {
		font-size: 1.1875em;
	}

	p.text--author {}

a {
	color: #9f003b;
}
	a:hover, a:focus, a:active {
		border-color: #9f003b;
	}
	.bg-dark a:not(.button),
	.color-white a:not(.button) {
		color: white;
		border-color: transparent;
	}
		.bg-dark a:hover:not(.button),
		.bg-dark a:focus:not(.button),
		.bg-dark a:active:not(.button),
		.color-white a:hover:not(.button),
		.color-white a:focus:not(.button),
		.color-white a:active:not(.button) {
			color: white;
			border-color: white;
		}


ul, ol {}
	ul>li, 
	ol>li {} 


::-moz-selection {
	background: #9f003b; 
	color: white; }

::selection {
	background: #9f003b; 
	color: white; }




.bare-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bare-link {
	text-decoration: none;
	border-bottom: none;
	color: inherit;
	display: inline-block;
}







/* ========================================================
   Icons
   ======================================================== */
 

 /* in development external file icons/styles.css */



@font-face {
  font-family: "icons";
  src:url("../icons/fonts/icons.eot");
  src:url("../icons/fonts/icons.eot?#iefix") format("embedded-opentype"),
    url("../icons/fonts/icons.woff") format("woff"),
    url("../icons/fonts/icons.ttf") format("truetype"),
    url("../icons/fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "icons" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
  content: "\e000";
}
.icon-search:before {
  content: "\e001";
}
.icon-googleplus:before {
  content: "\e008";
}
.icon-locator:before {
  content: "\e009";
}
.icon-big-right:before {
  content: "\276d";
}
.icon-big-left:before {
  content: "\276c";
}
.icon-right:before {
  content: "\203a";
}
.icon-left:before {
  content: "\e011";
}
.icon-circle:before {
  content: "\25cf";
}
.icon-circle-line:before {
  content: "\25cb";
}
.icon-menu:before {
  content: "\2630";
}


/* ========================================================
    Colors
   ======================================================== */


.color-text {
	color: #333; }

.color-red {
	color: #9f003b; }

.color-altred { /* for anchors on dark background */
	color: #9f003b; }

.color-medium {
	color: rgb(179,188,181);
	color: rgb(139,148,141); }

.color-dark {
	color: rgb(79,88,88); }

.color-white {
	color: white;}

.color-black {
	color: black;}


/* ========================================================
   Backgrounds
   ======================================================== */

/* specify background colors from style document */
/*.bg-blue {
	background: #9f003b; }*/

.bg-white {
	background: white;
	/*background: rgba(255,255,255,0.95);*/ }

.bg-glass {
	background: rgba(255,255,255,0.75); }

.bg-light {
	background: #f2f2f2; }

.bg-medium {
	background: rgb(179,188,181);
	background: rgba(79,88,88,.66);
	color: white; }

.bg-dark {
	background: rgb(79,88,88);
	color: white; }

.bg-black {
	background: black;
	color: white; }

.image-as-background {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.image-as-background-contain {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}
.image-as-background img,
.image-as-background-contain img {
	visibility: hidden;
}



/* ========================================================
    Buttons
   ======================================================== */



.button {
	border-radius: 5px;
	padding: .5em 1em; 
	border: none;
	color: white;
	background-color: #3a4051;
}

	.button:hover, .button:focus {
		background-color: #181f27;
		color: white;
		border: none;
	}

	.button:disabled {}

.button--primary {
	background-color: #9f003b;
}
.button--secondary {
	background-color: #3a4051;
}


.button--small,
.button.-small {}

.button--large,
.button.-large {}

.button--dropdown {}
	.button--dropdown:after {}
	.button--dropdown {}
	.button--dropdown.is-closed {}





/* ========================================================
    Basic Layout
   ======================================================== */

body {
	background: white url(../../img/body_bg_4.png) repeat-y center top;
	/*background-attachment: fixed;*/
}

iframe {
	max-width: 100%;
}


/* ========================================================
    Startpage Layout
   ======================================================== */



/* ========================================================
	Topbar
   ======================================================== */

.topbar {
	position: fixed;
	top: 0;
	z-index: 8200;
	min-height: 3.2rem;
	/*padding-bottom: .7rem;*/
}

body::before {
	padding-top: 3.2rem; /* pushes content below fixed topbar */
	content:"";
	display: block;
	position: relative;
	background: inherit;
}

.topbar__body {
	position: relative;
}

.topbar__logo {
	position: absolute;
	z-index: 8800;
	margin: 0 auto;
	width: auto;
	top: .8rem;
	width: 120px;
}
.topbar__navigation {
}

@media only screen and (min-width: 40.063em) {
	
	body::before {
		padding-top: 6.5rem; /* pushes content below fixed topbar */
	}
	.topbar {
		min-height: 6.5rem;
	}
	.topbar__logo {
		position: absolute;
		left: 1rem;
		top: 1.5rem;
		width: 183px;
	}
	.is-slight.topbar {
		
	}
	.is-slight .topbar__logo {
		
	}

	.topbar__navigation {
		margin-top: 4em;
		margin-left: 1.7em;
		margin-left: -.5em;
	}

}
@media only screen and (min-width: 64.063em) {

	body::before {
		padding-top: 5rem; /* pushes content below fixed topbar */
	}
	.topbar {
		min-height: 5rem;
	}

	.topbar__navigation {
		margin-top: 1.55em;
		float: right;
	}

}



/* ========================================================
    Footer
   ======================================================== */

.footer {}
	.footer__rim {
		padding-top: 1.25rem;
		padding-bottom: 0;
	}
		.footer__rim form {
			margin-bottom: 0;
		}
	.footer__bottomend {
		margin-top: 3em;
	}





/* ========================================================
	Quicksearch
   ======================================================== */

/*.quicksearch {}
	.quicksearch-input {}
		.quicksearch-input:focus {}
	.quicksearch-submit {}
		.quicksearch-submit:focus,
		.quicksearch-submit:hover {}
		.quicksearch-icon {}

.quicksearch.is-slight  {}
.quicksearch.is-expanded {}*/







/* ========================================================
	Navigation
   ======================================================== */

/* BURGER */

.nav__burger {
	/*position: absolute;*/
	margin: .2rem 0 0 -.7rem;
	padding-bottom: 0;
	background: none;
	font-size: 1.5rem;
}
.nav__burger:hover,
.nav__burger:focus,
.nav__burger:active {
	background: none;
	color: #4c4c4c;
}


.nav {
	font-size: 1rem;
}
	.nav .nav__item {}
	.nav .nav__link {
		color: #4c4c4c;
		border-bottom: none;
	}
	.nav .nav__link.is-current {
		color: #9f003b;
		border-bottom: none;
	}
	.nav .nav__link:hover {
		color: #9f003b;
	}

	
/* HORIZONTAL | main navigation for categories */

.nav--horizontal {
	width: 100%;
	font-size: 1rem;
}

.nav--horizontal .nav__list {}

.nav--horizontal .nav__item {}
.nav--horizontal .nav__link {
	color: #4c4c4c;
	border-bottom: none;
	border-top: 4px solid transparent;
}

.nav--horizontal .nav__link.is-current {
	color: #9f003b;
	border-bottom: none;
	border-top: 4px solid transparent;
}

.nav--horizontal .nav__link:hover {
	color: #9f003b;
}

@media only screen and (max-width: 40.063em) {
	.nav--horizontal .nav__list {
		display: none;
		float: none;
		padding-top: 3.3em;
		padding-bottom: 1em;
	}
	.nav--horizontal.is-expanded .nav__list {
		display: block;
	}
	.nav--horizontal .nav__item {
		width: 100%;
	}
	.nav--horizontal .nav__link {
		color: #4c4c4c;
		border: none;
		padding: 1em 0;
	}
	.nav--horizontal .nav__link.is-current {
		color: #9f003b;
		border: none;
	}
	.nav--horizontal .nav__link:hover {
		background: white;
	}
}


@media only screen and (min-width: 40.063em) {
	.nav--horizontal {
		/*margin-top: 1.9em;*/
	}
	.nav--horizontal .nav__item {
		max-width: 19vw;
		overflow: visible;
		position: relative;
	}
}

@media only screen and (min-width: 64.063em) {
	.nav--horizontal {
		width: auto;
		float: right;	
	}
}




/* ========================================================
   Text & Content
   ======================================================== */

.text--static {
	padding-top: 3em;
	padding-bottom: 2em;
}

@media only screen and (min-width: 64.063em) {
	.text--2columns {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-moz-column-gap: 3em;
		-webkit-column-gap: 3em;
		column-gap: 3em;
		orphans: 2;
		widows: 2;
		column-width: 430px; /* IE wants to have this */
	}
}



/* ========================================================
    Form Inputs
   ======================================================== */

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
  border-radius: 4px;
  background-color: white;
  border-color: #b1b4b9;
  /*box-shadow: none;*/
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
}

.form__error {
	font-weight: bold;
	background: #f2f2f2;
	color: red;
	padding: 1em;
}
.form__error.-success {
	color: #333;
}


/* ========================================================
    Listing
   ======================================================== */

/* Set project icon font name here */
.listing__item:after {
	font: normal normal 26px "icon-font";
	color: #9f003b;
	right: 1rem;
	opacity: .5;
}
.listing {
	margin-bottom: 1.25rem;
}

/* ========================================================
    Social
   ======================================================== */

.social {
	margin-bottom: 1.681em;
	}
	.social__list {}
		.social__item {
			margin-right: 1.5rem;
			margin-left: 0;
			font-size: 30px;
		}
		
		.social__item a {
			color: #000;
			border-bottom: none; }
			
			.social__link,
			.social__link:hover {}
		.social__icon {
			position: relative;
			bottom: -0.15em;
		}

@media only screen and (min-width: 40.063em) {
	.social {
		position: absolute;
		right: 0;
		bottom: 0;
	}
		.social__heading {
		    position: absolute;
    		right: 105%;
    		bottom: 0;
		}
		.social__item:last-child {
			margin-right: 0.9375rem;
		}
}





/* ========================================================
    Slick Carousel
   ======================================================== */

.slick-prev:before,
.slick-next:before,
.slick-dots li button:before
{
	font-family: 'icons';
}

.slick-prev,
.slick-next
{
    width: auto;
    height: auto;
    padding: .5rem;
    overflow: hidden;
    border-radius: 100px;
    background: rgba(0,0,0,.3)!important;
}

.slick-prev {
	left: 1rem;
}
	.slick-prev {
		transition: transform .3s, opacity .3s;
		transform: translate(-1rem,0);
		opacity: 0;
	}
	.slick-slider:hover .slick-prev {
		transform: translate(0,0);
		opacity: .75;
	}
	.slick-prev:before {
		content: '\276c';
		font-size: 1.5rem;
		margin-left: -.1em;
		margin-right: .1em;
	}

.slick-next {
	right: 1rem;
}
	.slick-next {
		transition: transform .3s, opacity .3s;
		transform: translate(1rem,0);
		opacity: 0;
	}
	.slick-slider:hover .slick-next {
		transform: translate(0,0);
		opacity: .75;
	}
	.slick-next:before {
		content: '\276d';
		font-size: 1.5rem;
		margin-left: .1em;
		margin-right: -.1em;
	}

.slick-slider {
	margin-bottom: 0;
}

.slick-dots {
	bottom: -20px;
}

	.slick-dots li button:before,
	.slick-dots li.slick-active button:before {
		color: white;
		content: '\25cf';
	}





/* ========================================================
    blueimp Gallery
   ======================================================== */

/* –––– blueimp defaults but for nested indicator ––––– */
.blueimp-gallery .thumbnail-scroller {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
	.blueimp-gallery .thumbnail-scroller {
	    position: absolute;
	    top: auto;
	    right: 15px;
	    bottom: 15px;
	    left: 15px;
	    margin: 0 40px;
	    padding: 0;
	    list-style: none;
	    text-align: center;
	    line-height: 10px;
	    display: none;
	}
	.blueimp-gallery-controls .thumbnail-scroller {
	    display: block;
	    -webkit-transform: translateZ(0);
	    -moz-transform: translateZ(0);
	    -ms-transform: translateZ(0);
	    -o-transform: translateZ(0);
	    transform: translateZ(0);
	}
	.blueimp-gallery .indicator>li {
		display: inline-block;
		width: 9px;
		height: 9px;
		margin: 6px 3px 0;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		border: 1px solid transparent;
		background: #ccc;
		background: rgba(255,255,255,.25)center no-repeat;
		border-radius: 5px;
		box-shadow: 0 0 2px #000;
		opacity: .6;
		cursor: pointer;
	}
	.blueimp-gallery .indicator > li:hover {
		/*background-color: #fff;
		border-color: #fff;*/
		opacity: .8;
	} 
	.blueimp-gallery .indicator > li.active {
		background-color: #fff;
		border-color: #fff;
		opacity: 1;
	}

/* –––– end of blueimp defaults ––––– */





.blueimp-gallery {
	background: rgba(0,0,0,1);
}
.blueimp-gallery a {
	border-bottom: none;
}
.blueimp-gallery .logo {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-box-sizing: content-box;
	   -moz-box-sizing: content-box;
	        box-sizing: content-box;
	padding-top: .8rem; /* same as topbar__logo on small */
	padding-left: 0.9375em; /* column padding */
	padding-bottom: .8rem;
	padding-right: .8rem;
	width: 120px;
	background: rgba(0,0,0,.1);
	pointer-events: none;
}

.blueimp-gallery > .slides {
	bottom: 93px; /* translates slides up, without scaling smaller */
	/*height: 90%;*/
	/*padding-top: 2%;*/
}
.blueimp-gallery > .close {
	padding: .3em .5em; /* same as nav__burger */
	right: 0.9375em; /* column padding */
	left: auto;
	margin: -15px;
	font-size: 2rem;
	text-decoration: none;
	cursor: pointer;
	background: rgba(0,0,0,.15);
}
.blueimp-gallery > .play-pause {
	display: none;
}
.blueimp-gallery > .title {
    top: auto;
    bottom: 100px; /* above the thumbnails */
    left: 10%;
    width: 80%;
    margin: 0 40px 0 0;
    font-size: 1.125em;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 0 2px #000;
    opacity: 1;
    text-align: center;
}





.blueimp-gallery .thumbnail-scroller {
	/*position: relative;*/
	width: 100%;
	margin: 0;
	overflow: auto;
	bottom: 0;
	left: 0;
	z-index: -1; /* behind the hiding edges */
	padding-bottom: 15px;
}
	.blueimp-gallery .thumbnail-scroller::-webkit-scrollbar { 
		display: none;
	}
	
	/* hiding edges */
	.blueimp-gallery > .hiding-edges::before {
		content: " ";
		position: fixed;
		top: auto;
		bottom: 15px;
		left: 0;
		width: 15px;
		height: 78px;
		background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	}
	.blueimp-gallery > .hiding-edges::after {
		content: " ";
		position: fixed;
		top: auto;
		bottom: 15px;
		right: 0;
		width: 15px;
		height: 78px;
		background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	}
.blueimp-gallery .indicator {
	/*white-space: nowrap;
	overflow: scroll;*/
	display: table;
	table-layout: fixed;
	width: 100%;
	margin: 0;
	padding: 0 15px;
	background: rgba(0,0,0,1);
}
	.blueimp-gallery .indicator > li {
		display: table-cell;
		width: 80px;
		height: 60px;
		background-size: 160px;
		border-radius: 0;
		box-shadow: none;
	}



/* navigators are same styles as slick carousel with icon from custom icon font */

.blueimp-gallery > .prev:before,
.blueimp-gallery > .next:before,
.blueimp-gallery > .dots li button:before {
	font-family: 'icons';
}

.blueimp-gallery > .prev,
.blueimp-gallery > .next {
	top: 40%;
    width: auto;
    height: auto;
    padding: 0 .7rem .5rem;
    overflow: hidden;
    border-radius: 100px;
    background: rgba(0,0,0,.3)!important;
    border-width: 2px;

    text-shadow: none;
    border-width: 0;
}
.blueimp-gallery > .prev:focus,
.blueimp-gallery > .next:focus {
	outline: none;
}

.blueimp-gallery > .prev {
	/*left: 1rem;*/
}
	.blueimp-gallery > .prev:before {
		content: '\276c';
		font-size: 1.5rem;
		margin-left: -.1em;
		margin-right: .1em;
	}

.blueimp-gallery > .next {
	/*right: 1rem;*/
}
	.blueimp-gallery > .next:before {
		content: '\276d';
		font-size: 1.5rem;
		margin-left: .1em;
		margin-right: -.1em;
	}




/* ========================================================
    News
   ======================================================== */

/*.news { }
	.news-list {}
		.news-item {}
			.news-link {}
			.news-date {}
			.news-title {}
			.news-more {}


.news--full {}
.news--headlines {}
.news-text--intro {}*/









/* ========================================================
    Project
   ======================================================== */

.project {
	/*margin-bottom: 2em;*/ /* low specificity */
}

figure {
  margin: 0;
}
.project img {
	width: 100%; /* for small imgsrc before lazyload */
}


body[data-page="projektansicht"]::before {
	/*background: black;*/
}

.project--detail .project__img {
	/*margin-bottom: 2em;*/
}

.project--detail .project__title {
	margin-top: 2rem;
}

/* ---------------------------------------------- */

.project--overview .project__item {
	margin-bottom: 3em;
}

.project--overview .project__link {
	position: relative; 
	display: block;
	overflow: hidden;
	text-decoration: none;
	border-bottom: none;
}


.project--overview .project__caption {
	overflow: hidden;
	padding: 0;
	width: 100%;
	/*background: rgba(255,255,255,0.5);*/
	text-align: center;
}

	.project--overview .project__text {
		display: none;
	}

/* ---------------------------------------------- */

.project--index .project__list {
	/*margin: 4rem -2px;*/
	margin-top: 0;
}
body[data-template="page_start"] .project--index {
	padding-top: 5rem;
}
.project--index .project__item {
	/*padding: 0 1px 2px;
	margin: 0 0 -2px;*/
	overflow: hidden;
}

.project--index .project__image {
	background-size: 110%;
	background-position: 50% 50%;
	-webkit-transition: background-size .2s linear;
	        transition: background-size .2s linear;
}
	.project--index .project__link:focus .project__image,
	.project--index .project__link:hover .project__image {
		background-size: 100%;
	}
	.project--index .project__img {
		visibility: hidden;
	}

	.project--index .project__caption {
		position: absolute;
		top: 0;
		width: 100%;
		padding: 0 .8em;
		background: rgba(255,255,255,0.75); /* .bg-glass */
		text-align: left;
		font-size: 85%;
		opacity: 0;
		-webkit-transition: -webkit-transform .35s, opacity .2s ease-in;
		        transition: transform .35s, opacity .2s ease-in;
		-webkit-transform: translate(0,-20%);
		        transform: translate(0,-20%);
	}
		.project--index .project__link:focus .project__caption,
		.project--index .project__link:hover .project__caption {
			opacity: 1;
			-webkit-transform: translate(0,0);
			        transform: translate(0,0);
		}

[data-cat="3d-animationen"] .project--index .project__caption {
	display: none;
}
	



.project--centered-caption .project__item {
	position: relative;
}
.project--centered-caption .project__caption {
	position: absolute;
	top: 40%;
	left: 50%;
	min-width: 20%;
	max-width: 70%;
	text-align: center;
	overflow: hidden;
	opacity: 0;
	padding: 2em;
	/*left: 0;*/
	/*width: 100%;*/
	/*bottom: 0;*/
	/*height: 4em;*/
	/*background: rgba(255,255,255,0.85);*/
	-webkit-transition: -webkit-transform .35s, opacity .2s ease-out;
	        transition: transform .35s, opacity .2s ease-out;
	-webkit-transform: translate(-50%,-50%) scale(0);
	        transform: translate(-50%,-50%) scale(0);
}

		.project--centered-caption .project__link:hover .project__caption {
			opacity: 1;
			-webkit-transition: -webkit-transform .35s, opacity .5s ease-in;
			        transition: transform .35s, opacity .5s ease-in;
			-webkit-transform: translate(-50%,-50%) scale(1);
			        transform: translate(-50%,-50%) scale(1);
		}

	.project--centered-caption .project__title {
		-webkit-transition: -webkit-transform 0.35s;
		        transition: transform 0.35s;
		-webkit-transform: translate(0,200%);
		        transform: translate(0,200%);
	}

		.project--centered-caption .project__link:hover .project__title {
			-webkit-transform: translate(0,0);
			        transform: translate(0,0);
			-webkit-transition-delay: 0.2s;
			        transition-delay: 0.2s;	
		}


	.project--centered-caption .project__text {
		-webkit-transition: -webkit-transform 0.35s;
		        transition: transform 0.35s;
		-webkit-transform: translate(0,200%);
		        transform: translate(0,200%);
	}

		.project--centered-caption .project__link:hover .project__text {
			-webkit-transform: translate(0,0);
			        transform: translate(0,0);
			-webkit-transition-delay: 0.23s;
			        transition-delay: 0.23s;	
		}



.project--banner {
	/*margin-top: -3.2rem;*/
}

@media only screen and (min-width: 40.063em) {	
	.project--banner {
		/*margin-top: -5rem;*/ /* pulls content behind fixed topbar */
	}
}
.project--banner .project__item {
	position: relative;
}
	.project--banner .project__item:nth-child(n+2):not(.slick-slide) {
		display: none;
	}

.project--banner .project__caption {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 500px;
	max-width: 90%;
	overflow: hidden;
	opacity: 0;
	padding: 1em 0;
	/*background-color: rgba(0,0,0,.3); */
	text-shadow: 0px 0px 3px rgba(0,0,0,.4);
	/*text-shadow: 1px 1px 1px rgba(0,0,0,.3), 0 0 60px black, 0 0 120px white, 0 0 200px black;*/
	
	-webkit-transition: -webkit-transform .35s .5s, opacity .2s .5s ease-out;
	        transition: transform .35s .5s, opacity .2s .5s ease-out;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}

		.project--banner .project__item.slick-active .project__caption {
			opacity: 1;
			-webkit-transition: opacity .5s .5s ease-in;
			        transition: opacity .5s .5s ease-in;
		}

	.project--banner .project__title {
		font-size: 2.9em;
		line-height: 1;
		font-family: 'Corporate A Regular', Baskerville, Georgia, serif;
		margin: 0;
		-webkit-transition: -webkit-transform 0.35s .5s;
		        transition: transform 0.35s .5s;
		-webkit-transform: translate(5rem,0);
		        transform: translate(5rem,0);
	}

		.project--banner .project__item.slick-active .project__title {
			-webkit-transform: translate(0,0);
			        transform: translate(0,0);
			-webkit-transition-delay: 0.5s;
			        transition-delay: 0.5s;
		}


	.project--banner .project__text {
		font-size: 1.4em;
		margin: 0;
		-webkit-transition: -webkit-transform 0.35s;
		        transition: transform 0.35s;
		-webkit-transform: translate(5rem,0);
		        transform: translate(5rem,0);
	}

		.project--banner .project__item.slick-active .project__text {
			-webkit-transform: translate(0,0);
			        transform: translate(0,0);
			-webkit-transition-delay: 0.6s;
			        transition-delay: 0.6s;	
		}






/* ========================================================
    Logos-Index
   ======================================================== */

.logos--index {}
.logos--index .logos__item {
	padding: 1em 2em;
}
.logos--index .logos__image {
	height: 150px;
}
.logos--index .logos__img {
	
}





/* ========================================================
    Grid Masonry
   ======================================================== */

.row {
	 max-width: 717px; /* 3x grid__item width + column padding - negative margin */
}
@media only screen and (min-width: 64.063em) {
	.row {
		max-width: 948px; /* 4x grid__item width + column padding - negative margin */
	}
}

.grid__item { 
	width: 231px; /* 225+padding */
}
.grid__item--size2 {
	width: 462px; /* double incl. padding */
}

.grid {
	margin: 4rem -3px;
}
.grid__item {
	padding: 0 3px;
	margin-bottom: 6px;
}


@media only screen and (max-width: 45.75em) {
	.grid__item { 
		width: 231px; /* 225+padding */
	}
	.grid__item--size2 {
		width: 231px; /* double incl. padding */
	}
}
@media only screen and (max-width: 31.25em) {
	.grid__item {
		width: 100% !important;
	}
}


/* ========================================================
    Service
   ======================================================== */

.service {
	padding: 1em 0;
}
.service__item {
	margin: 1rem 0;
}
.service__link {
	/*font-size: 1.3em!important;*/
}
.service__icon {
	font-size: 4rem;

}
.service__icon {
	display: block;
	float: left;
	margin: 0 auto;
	width: 4rem;
	height: 4rem;
	background: url(../../img/logo_symbol.png) no-repeat 50% 50%;
	background-size: 100%;
	/*background-color: magenta;*/
	/*border-radius: 4rem;*/
	opacity: .8;
	transition: opacity .3s, letter-spacing ease-out .4s;
}
	.service__link:hover .service__icon {
		opacity: 1;
	}
.service__title {
	transition: opacity .3s, letter-spacing ease-out .4s;
	opacity: .8;
}
	.service__link:hover .service__title {
		/*color: #9f003b;*/
		letter-spacing: .1em;
		opacity: 1;
		color: white;
	}

@media only screen and (min-width: 40.063em) {
	.service__item {
		margin: 2.5rem 0;
	}
	.service__link {
		/*font-size: 2em!important;*/
	}
	.service__icon {
		font-size: 7rem;
	}
}





/* ========================================================
    Media Object
   ======================================================== */

.media,
.media__body {
  overflow: hidden;
  _overflow: visible;
  zoom: 1;
}

.media__img {
  float: left;
  margin-right: 1em;
}

.media__img img {
  display: block;
}

.media__imgExt {
  float: right;
  margin-left: 1em;
}





/* ========================================================
    Flag Object
   ======================================================== */

/* URL: http://csswizardry.com/2013/05/the-flag-object/ */
.flag {
  display: table;
  width: auto;
  margin: 10px;
}

.flag__image, .flag__body {
  display: table-cell;
  vertical-align: middle;
}
.flag--top .flag__image, .flag--top .flag__body {
  vertical-align: top;
}
.flag--bottom .flag__image, .flag--bottom .flag__body {
  vertical-align: bottom;
}

.flag__image {
  padding-right: 1em;
}
.flag__image > img {
  display: block;
}
.flag--rev .flag__image {
  padding-right: 0;
  padding-left: 1em;
}

.flag__body {
  width: 100%;
}

/* http://philipwalton.github.io/solved-by-flexbox/demos/media-object/ */
/*
.media {
	display: flex;
	align-items: flex-start;
}
	.media__img {
		margin-right: 1em;
	}
	.media__body {
		flex: 1;
	}*/