/*********************************** SEARCH ************************************************************/
#searchForm dt{
	display:none;
}
#searchForm .bt_submit{
	position: absolute;
	top:0px;
	right: 0px;
	background: #fff;
	border:none;
	color:#818183;
	z-index: 100;
	display:none;
}
.portfolio_result{
	text-align:left;
	padding-top: 150px;
}
.portfolio_result .client{
	border-bottom: 1px solid #e6e6e6;
	display:block;
	width: 100%;
	padding: 10px;
}
.portfolio_result .client .name{
	display:inline-block;
	font-size: 18px;
	padding: 0px 20px;
	font-weight: 700;	
}
.portfolio_result .client .client_name{
	display:inline-block;
	font-size: 18px;
	font-weight: 300;	
}
.projet_title {
	margin-top: 70px;
	padding-bottom: 30px;
}

.portfolio .description a{
	color: #f71949;
	
}.portfolio .description a:hover{
	color:#24dda6;
}
.portfolio_result h2{
	text-align:center;
	
	
}
/*********************************** liste client **************************************************/
.index_customers{

	background: #009fe3; /* Old browsers */
	text-align: center;
	padding: 0px 0px 120px 0px;
	
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
#tpl_1col .index_customers h2{
	padding: 0px;
	margin-top: 77px;
	margin-bottom: 77px;
}
.index_customers h2{
	display: block;
	text-align:center;
	font-size: 38px;
	color: #ffffff;	
	padding: 100px 0 50px 0;
	text-transform: uppercase;
}

#color-tourisme,
#color-btob,
#color-culture {
	margin-top: 200px;
}

.index_customers .customers a.logo_customer{
	display: block;
	float:left;
	background: url(../../../../../images/felix/portfolio/hexagone.svg) no-repeat center center;
	width: 170px;
	height: 186px;
	text-align:center;
	padding-top: 30px;
	margin-bottom: -20px;
}
div.flip-container {
	margin-right: 70px;
	display: block;
	float:left;
}
div.flip-container.retour_ligne{
	margin-left: 120px;	
}
div.flip-container.last{
	margin-right: 0;	
}
.index_customers .customers a img{
	width: 70%;
	opacity: 0.7;	
}

.index_customers .big_hexa{
	width: 319px;
	height: 408px;
	background: url(../../../../../images/felix/portfolio/big_hexa.png) no-repeat 0px 0px;
	margin: 50px auto -350px auto;
	font-weight: 700;
	font-size: 20px;
	padding-top: 151px;
	text-transform:uppercase;
	color:#000000;
}.index_customers .big_hexa span{
	color:#eb0030;	
}
#index_customers{
	margin-bottom: 200px;
}
/*********************************** teaser client **************************************************/
.teaser.index_customers{
	background: #fbfbfb;
}
.teaser.index_customers h2{
	color: #000000;
	font-size: 48px;
}.teaser.index_customers h2 span{
	font-weight: 700;	
}
.teaser.index_customers .customers{
	margin: 0 auto;
}
.teaser.index_customers .customers a.logo_customer{
	background: url(../../../../../images/felix/portfolio/hexagone.png) no-repeat center center;
	
}
.teaser.index_customers .customers a.logo_customer.last{
	margin-right: 0px;
}
.index_customers .customers a img{
	width: 70%;
	opacity: 0.8;	
}
.teaser.index_customers .customers{
	width: 920px;
	margin: 0 auto;
	
}
.teaser.index_customers .icon-plus{
	margin-top: 110px;
	margin-bottom: -30px;
}
.bt_all_customer:hover .icon-plus{
	color:#F71949;
}
/*********************************** Vue client **************************************************/

.customer_nav{
	float:right;
	font-size: 14px;
	color:#000000;
	font-weight: 400;
	text-transform: none;
	text-align: right;
	padding-top: 25px;
	display: inline-block;
}
.customer_nav img{
	margin: 0px 10px;	
}
.customer_nav span.icon-next{
	margin: 12px 5px;
	float:right;
}
.customer_nav span.icon-previous{
	margin: 12px 5px;
	float:left;
}

.view_customer .visuel_panoramique{
	width: 100%;
}
.view_customer .zone_logo{
	float:left;
	width: 457px;
	background: url(../../../../../images/felix/portfolio/logo_left_separateur.jpg) no-repeat top right;
	min-height: 254px;
	padding-top: 40px;
}
.view_customer .description{
	float:left;
	width: 470px;
	padding-top: 63px;
	text-align: justify;
	font-size: 14px;
	line-height: 18px;
}

.view_customer .tags{
	position: relative;
	margin-top:120px;
	float:right;
	width: 180px;
	color: #a7a7a6;
	font-style: italic;
	font-size: 12px;
	padding-left: 35px;
}
.view_customer .tags .icon{
	position: absolute;
	top: 0px;
	left: 0px;
}
.view_customer .zone_realisations{
	background: #f2f2f2;
	padding: 30px 0px;
}
.view_customer .title_realisation{
	text-align:center;
	color:#000000;
	font-size: 58px;
	font-weight: 700;
	text-transform: uppercase;
}.view_customer .title_realisation span{
	font-weight: 300;	
}
.view_customer .col{
	padding: 0px;
}
.view_customer .portfolio_gallery .hover img{
	height: 35%;
	max-height: 200px;
	
}
/*********************************** Vue projet **************************************************/
.view_project{
	background: url(../../../../../images/felix/portfolio/project_bg.png) repeat-x top left #f2f2f2;
}
.view_project .tags{
	color: #a7a7a6;
	font-style: italic;
	font-size: 12px;
	padding-left: 35px;
	padding-top: 15px;
	margin-top: 30px;
	margin-bottom: 30px;
	position:relative;
}
.view_project .tags .icon{
	position: absolute;
	top: 8px;
	left: 0px;
}
.view_project .zone_logo{
	float:right;
	width: 457px;
	background: url(../../../../../images/felix/portfolio/logo_right_separateur.jpg) no-repeat top left;
	min-height: 254px;
	padding-top: 30px;
	position: relative;
}
.view_project .zone_logo img{
	float: right;
	margin-right: 50px;
}
.view_project .zone_description{
	min-height: 300px;
	
}
.view_project .description{
	float:left;
	width: 720px;
	text-align: justify;
	font-size: 14px;
	line-height: 18px;
}
.view_project .description h1{
	text-align: left;
	padding: 25px 0px;	
}
.view_project .bt_etude{
	display:block;
	border: 1px solid #e4e4e4;
	background: #ffffff;
	font-weight: 300;
	text-transform: uppercase;
	color: #000000;
	font-size: 16px;
	padding: 15px 25px 15px 25px;
	width: 235px;
	float:left;
	margin-top: 10px;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;

}.view_project .bt_etude:hover{
	color: #f71949;
	border: 1px solid #f71949;
}
.view_project .bt_etude span{
	float:left;
	margin-top:-2px;
}
.view_project .bt_all_projects{
	display:block;
	
	font-weight: 300;
	text-transform: uppercase;
	color: #ffffff;
	font-size: 16px;
	position: absolute;
	right: 30px;
	bottom: -30px;
	padding: 15px 25px 5px 25px;
	
	background: #22dda7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMjJkZGE3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRhZTQ2ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg,  #22dda7 0%, #4ae46f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#22dda7), color-stop(100%,#4ae46f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #22dda7 0%,#4ae46f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #22dda7 0%,#4ae46f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #22dda7 0%,#4ae46f 100%); /* IE10+ */
background: linear-gradient(135deg,  #22dda7 0%,#4ae46f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22dda7', endColorstr='#4ae46f',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	
	
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;

}.view_project .bt_all_projects:hover{

	background: #87e0fd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjODdlMGZkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyZGRhOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg,  #87e0fd 0%, #22dda8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#87e0fd), color-stop(100%,#22dda8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #87e0fd 0%,#22dda8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #87e0fd 0%,#22dda8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #87e0fd 0%,#22dda8 100%); /* IE10+ */
background: linear-gradient(135deg,  #87e0fd 0%,#22dda8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#22dda8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	
}
.view_project .bt_all_projects span{
	float:left;
	margin-top:-2px;
}
.view_project .panoramique{
	margin-top: 30px;
}
.view_project .panoramique img{
	width: 100%;	
}
.view_project .col{
	padding: 0px;
}
.view_project .col_right{
	padding-left: 15px;	
}
.view_project .col_left{
	padding-right: 15px;	
}
.view_project .col img.thumb{
	width: 100%;
}
/****************************************** liste Portfolio **********************************************/

.index_portfolio h1.bandeau_title{
	display:block;
	background: url(../../../../../images/felix/portfolio/portfolio_title.jpg) no-repeat top center #ee013a;
	color:#ffffff;
	font-size: 80px;
	text-transform: uppercase;
	font-weight: 300;
	height: 277px;
	padding-top: 100px;
	padding-left: 150px;
	margin: 0;
}

.index_portfolio img {
	width: 100%;
	height: 100%;
}
.index_portfolio .hover img {
	width: 200px;
	height: 200px;	
}
#grid.portfolio_gallery{
	padding-top:0px;
}
#grid.portfolio_gallery .slogan{
	background: #ffffff;
	color:#000000;	
	font-size: 32px;
	line-height: 40px;
	text-align:center;
}
#grid.portfolio_gallery .slogan div:first-child{
	padding-top: 120px;
	position: relative;
	display:inline-block;
}
#grid.portfolio_gallery .hover .caption{
	font-size: 14px;
	padding: 5px 20px;
}
/*********************************** News **************************************************/
.news.portfolio_gallery{
	
	padding: 44px 0px;
} 
.news.portfolio_gallery .hover img{
	width: 100px;
}
/*********************************** Teaser Projets **************************************************/
.teaser_project{
	
}
.teaser_project .project{
	overflow:hidden;
}
.teaser_project .left{
	float: left;
	width: 50% !important;
	text-align: right;
	height: 681px;
	position:relative;
}
.teaser_project .right{
	float: left;
	width: 50% !important;
	text-align: left;
	height: 681px;
	position:relative;
}

.project_1 .right.description,
.project_3 .right.description{
	display: none;
}

.teaser_project .project_1 .zone_visuel{
	height: 746px !important;
}
.teaser_project .project_1 img{
	position: absolute;	
	bottom: 0px;
	left: 0px;
}
.teaser_project .project_1 .zone_visuel span.masque{
	display:block;
	height: 100%;
	width: 375px;
	position: absolute;
	top: 0px;
	left: -75px;
	background: url(../../../../../images/felix/portfolio/ombre01.png) no-repeat top right;
}
.teaser_project .project_1 .zone_visuel span.masque span{
	left: 53px;
    position: absolute;
    top: 373px;
}

.teaser_project .project_2 img{
	position: absolute;	
	top: 0px;
	right: -180px;
}
.teaser_project .project_2 .zone_visuel{
	height: 681px !important;
}.teaser_project .project_2 .zone_visuel span.masque{
	display:block;
	height: 100%;
	width: 375px;
	position: absolute;
	top: 0px;
	right: -300px;
	background: url(../../../../../images/felix/portfolio/ombre02.png) no-repeat top right;
}
.teaser_project .project_2 .zone_visuel span.masque span{
	left: 53px;
    position: absolute;
    top: 303px;
}
.teaser_project .project_3 img{
	position: absolute;	
	top: 0px;
	left: 0px;
}
.teaser_project .project_3 .zone_visuel{
	height: 784px;
}.teaser_project .project_3 .zone_visuel span.masque{
	display:block;
	height: 100%;
	width: 375px;
	position: absolute;
	top: 0px;
	left:-75px;
	background: url(../../../../../images/felix/portfolio/ombre03.png) no-repeat top right;
}
.teaser_project .project_3 .zone_visuel span.masque span{
	left: 53px;
    position: absolute;
    top: 303px;
}
.teaser_project .description{
	padding-top: 250px;
	color: #1a1a18;
	font-size: 16px;
	padding-left: 250px;
}

.teaser_project .left.description{
	padding-right: 250px;
	padding-left: 0px;
}
.teaser_project .description h4{
	font-size: 48px;
	color: #1a1a18;
	text-transform: uppercase;
	font-weight: 700;
}
.teaser_project .description h5{
	font-size: 22px;
	color: #1a1a18;
	text-transform: uppercase;
	font-weight: 300;
}


/*********************************** Partie gallerie **************************************************/
.portfolio_gallery {
	padding-top: 30px;
}
.portfolio_gallery a{
	display:block;
	position: relative;	
	margin-bottom: 30px;
}
.portfolio_gallery a .hover{
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-align:center;
	padding-top: 25px;	
	background: url(../../../../../images/felix/portfolio/hover.png);
	color:#fff;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}.portfolio_gallery a .hover.green{
	background: url(../../../../../images/felix/portfolio/hover_vert.png);
}
.portfolio_gallery a:hover .hover{
	opacity: 1;	
}
.portfolio_gallery a .hover .caption{
	display:block;
	width: 100%;
	text-align:center;
	font-size: 16px;
	padding-left: 20px;
    padding-right: 20px;
}
.portfolio_gallery a .hover .icon{
	font-size: 35px;
}
.portfolio_gallery a .thumb{
	width: 100%;	
}
.portfolio_gallery .col_left{
	padding-left:0px;
}
.portfolio_gallery .col_right{
	padding-right:0px;
}

@media screen and (max-width:1200px){
	.view_customer .zone_logo {
		width: 50%;
		margin: 0;
		min-height: 0px;
		padding-top: 0px;
	}
	.view_customer .description {
		width: 50%;
		margin: 0;
		padding-right: 30px;
	}	
	.view_customer object,
	.view_project object{
		width: 100%;
	}
	.view_project .zone_logo {
		width: 50%;
	}
	.view_project .description {
		width: 50%;
		padding: 0px 30px;
	}
	
	/* Teaser */
	.teaser_project .left {
	    width: 40% !important;
	}
	.teaser_project .left.description {
	   	padding-right: 100px;
	}
	
}
@media screen and (max-width:920px){
	/* Teaser */
	.teaser_project .left {
	    width: 40% !important;
	}
	.teaser_project .left.description {
	   	padding-right: 100px;
	}
	
	.teaser_project .description {
		padding-top: 50px;
	}
	
	.teaser_project .project_1 .zone_visuel,
	.teaser_project .project_2 .zone_visuel,
	.teaser_project .project_3 .zone_visuel {
	    height: auto !important;
	}
	
	.teaser_project .zone_visuel img{
	    width: 100%;
	    position: static;
	}
	
	.teaser_project .right, 
	.teaser_project .left {
	    float: none;
	    width: 100% !important;
	    height: 250px;
	}
	
	.teaser_project .description.right, 
	.teaser_project .description.left {
	    width: 100%;
	    margin-left: auto;
	    margin-right: auto;
	    padding: 0 30px;
	    margin-top: 20px;
	}
	
	.project_1 .left.description,
	.project_3 .left.description {
		display: none;
	}
	
	.project_1 .right.description,
	.project_2 .right.description,
	.project_3 .right.description{
		display: block;
		padding-top: 30px;
	}
	
	.right.description p{
		display: inline-block;
		vertical-align: bottom;
		width: 49%;
		padding-left: 25px;
		margin: 0;
	}
	
	.teaser_project .description h4{
		display: inline-block;
		vertical-align: bottom;
		width: 50%;
		margin: 0;
		text-align: right;
		padding-right: 25px;
	}
	
	.teaser_project .description h5{
		display: inline-block;
		vertical-align: bottom;
		width: 50%;
		margin: 0;
		text-align: right;
		padding-right: 25px;
	}
	
	.teaser_project .project_1 .zone_visuel span.masque,
	.teaser_project .project_2 .zone_visuel span.masque,
	.teaser_project .project_3 .zone_visuel span.masque{
		background: none;
		right: 0;
	    top: 0;
	    left: 50%;
	    width: 50%;
	}
	
	.teaser_project .project_1 .zone_visuel span.masque span,
	.teaser_project .project_2 .zone_visuel span.masque span,
	.teaser_project .project_3 .zone_visuel span.masque span {
	    bottom: -36px;
	    left: -22px;
	    position: absolute;
	    top: auto;
	}
	
}
@media screen and (max-width:920px){
	#grid.portfolio_gallery .slogan{
		font-size: 30px;
	}
	#grid.portfolio_gallery .slogan div:first-child {
		padding-top: 50px;
	}
}
@media screen and (max-width:800px){
	.view_customer .zone_logo {
		width: 100%;
	}
	
	.view_customer .description {
		width: 100%;
		margin: 0;
		padding-right: 30px;
		padding-left: 30px;
		padding-top: 20px;
	}	
	.customer_nav {
		position: absolute;
		top:0px;
		right: 0px;
	}
	.customer_nav a{
		font-size: 0px;
	}
	.view_project .zone_logo {
		width: 100%;
	}
	.view_project .bt_all_projects{
		bottom: inherit;
		top: 50%;
		left: 150px;
		margin-top: -30px;
		width: 285px;
	}
	.view_project .description {
		width: 100%;
		padding: 0px 30px;
	}
	.view_project .description .tags{
		display:none;
	}
	
}
@media screen and (max-width:770px){
	.view_project .col {
		padding: 0px 15px;
	}
	#grid.portfolio_gallery .slogan{
		font-size: 30px;
	}
	.index_portfolio h1.bandeau_title{
		background: #EE013A;
		height: auto;
		padding: 30px;
		font-size: 40px;
	}
	.portfolio_result .client{
		text-align:center;
	}
	.portfolio_result .client .name{
		padding-top: 25px;
	}
	.portfolio_result .client .name, .portfolio_result .client .client_name{
		display:block;
	}
	
}
@media screen and (max-width:662px){
	#grid.portfolio_gallery .slogan{
		display:none;
	}
}
@media screen and (max-width:660px){
	.view_project .zone_logo {
	    background: none;
	    padding: 0px;
	    text-align: left;
	}	
	.view_project .bt_all_projects{
		bottom: inherit;
		top: 50%;
		left: inherit;
		right: 30px;
		font-size: 12px;
		width: 230px; 
		margin-top: -45px;
	}
	.view_project .zone_logo img {
		float:left;
	}
	.teaser_project .description h4{
		font-size: 30px;
	}
}
@media screen and (max-width:600px){
	.customer_nav a.bt_prev{
		display:none;
	}
	.view_customer .title_realisation{
		font-size: 32px;
	}
	
	.teaser_project .description h4,
	.teaser_project .description h5,
	.right.description p {
	  display: block;
	  margin: 0;
	  width: 100%;
	  text-align: center;
	  padding: 0;
	}

}



/* Grille hexagonale */
div.flip-container.last {
    margin-right: 70px;
}
div.flip-container.retour_ligne {
	margin-left: 0px;
}

#tpl_1col .index_customers .customers {
	padding-bottom: 100px;
}

.index_customers .customers {
	width: 1130px;
	margin-left: auto;
	margin-right: auto;
}

.teaser.index_customers .customers {
	width: 890px;
	margin-left: auto;
	margin-right: auto;
}
	
@media (min-width: 1201px) {
	
	.listing div.flip-container:nth-child(9n+5) {
		margin-right: 0px;
	}
	
	.listing div.flip-container:nth-child(9n+6) {
		margin-left: 120px;
	}
	
	.teaser div.flip-container:nth-child(7n+4) {
		margin-right: 0px;
	}
	
	.teaser div.flip-container:nth-child(7n+5) {
		margin-left: 120px;
	}
}
@media (max-width: 1201px) {
	
	.teaser.index_customers .customers,
	.index_customers .customers {
		width: 890px;
	}
	
	div.flip-container:nth-child(9n+5) {
		margin-right: 70px;
	}
	
	div.flip-container:nth-child(9n+6) {
		margin-left: 0px;
	}

	div.flip-container:nth-child(7n+4) {
		margin-right: 0px;
	}
	
	div.flip-container:nth-child(7n+5) {
		margin-left: 120px;
	}

}

@media (max-width: 921px) {
	
	.teaser.index_customers .customers,
	.index_customers .customers {
		width: 650px;
	}
	
	div.flip-container:nth-child(7n+4) {
		margin-right: 70px;
	}
	
	div.flip-container:nth-child(7n+5) {
		margin-left: 0px;
	}
	
	div.flip-container:nth-child(5n+3) {
		margin-right: 0px;
	}

	div.flip-container:nth-child(5n+4) {
		margin-left: 120px;
	}

}

@media (max-width: 651px) {
	
	.teaser.index_customers .customers,
	.index_customers .customers {
		width: 410px;
	}
	
	div.flip-container:nth-child(5n+3) {
		margin-right: 70px;
	}

	div.flip-container:nth-child(5n+4) {
		margin-left: 0px;
	}
	
	div.flip-container:nth-child(3n+2) {
		margin-right: 0px;
	}
	
	div.flip-container:nth-child(3n) {
		margin-left: 120px;
	}

}
@media (max-width: 480px) {
	.view_project .zone_logo{
		padding: 0px 30px;
	}
	.view_project .zone_logo img{
		float:none;
		text-align:center;
		display:block;
		margin: 0 auto;
	}
	.view_project .bt_all_projects{
		position: relative;
		margin:0px auto;
		top: inherit;
		right: inherit;
		width: 100%;
		height: 50px;
	}
	
}
@media (max-width: 411px) {
	
	.teaser.index_customers .customers,	
	.index_customers .customers {
		width: 290px;
	}
	
	div.flip-container:nth-child(3n+2) {
		margin-right: 70px;
	}
	
	div.flip-container:nth-child(3n) {
		margin-left: 0px;
	}
	
	div.flip-container:nth-child(2n+1) {
		margin-right: 0px;
	}
	
	div.flip-container:nth-child(2n) {
		margin-left: 120px;
	}
	#grid.portfolio_gallery .slogan:first-child div{
		margin-top: 5px;
	}
	#grid.portfolio_gallery .slogan{
		font-size: 24px;
	}
}
	



/* Flip effect */
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
.flip-container:hover .back {
	transform: rotateY(0deg);
}
.flip-container:hover .front {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 170px;
	height: 186px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
}