#eblokk img.background{
	width: 100%;
	position: relative;
}

.reference img.logo{
	position: absolute;
	left: 50%;
	top:50%;
	width:30%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}

.reference{
	overflow:hidden;
}

.row:after{
	display: block;
	content: '';
	clear: both;
	float: none;
}

#muuska{
	float: left;
	width: calc(41.6% - 10px);
	margin-right: 10px;
	margin-top: 10px;
}
#eblokk .logo{
	width: 15%;
}

#icewater{
	width: calc(25.6% - 5px);
	float: left;
	margin-right: 10px;
	background: black;
}
#reference-overlay .scrollable .imgContent .logoGifBg,
#icewater .imgContent .logoGifBg{
	width: 100%;
	padding: 50px 0;
	background: url('/img/references/full/icewater/icewaterLogoGifBg.png') top left repeat;
	align-content: center;
	vertical-align: middle;
}
#reference-overlay .scrollable .imgContent .logoGifBg img,
#icewater .imgContent .logoGifBg img{
	width: 50%;
	height: auto;
	margin: 0 auto;
}

#dynavapFirstImage,
#icewaterFirstImage{
	margin-top: -10px;
}

#content #drillq.reference img.background{
	width: 101%;
}
#content #icewater.reference img.background,
#content #kuehl.reference img.background{
	width: 103.25%;
}

#michael{
	width: calc(48.8% - 10px);
	float: left;
	margin-right: 10px;
	background: black;
}
#kuehl{
	width: calc(25.6% - 5px);
	float: left;
}

#qenergy img.background{
	opacity: .6;
}
#icewater img.background{
	opacity: .8;
}

#drillq{
	width: calc(41.6% - 10px);
	float: left;
	margin-right: 10px;
	background: black;
}
#qenergy{
	width: 58.4%;
	float: left;
	background: black;
}

.reference .imgContent{
	display: none;
}


#dynavap.reference img.logo{
	width: 24%;
}
#icewater.reference img.logo{
	width: 60%;
}
#michael.reference img.logo{
	width: 57%;
}
#kuehl.reference img.logo{
	width: 64%;
}
#drillq.reference img.logo{
	width: 40%;
}
#qenergy.reference img.logo{
	width: 50%;
}


#young{
	float: left;
	width: calc(29.2% - 5px);
	margin-right: 10px;
	margin-top: 10px;
}
#young .logo{
	width: 51%;
}

#hillside{
	float: left;
	width: calc(29.2% - 5px);
	margin-top: 10px;
}
#hillside .logo{
	width: 60%;
}


#orange{
	float: left;
	width: 58.4%;
	margin-top: 10px;
}
#orange .logo{
	width: 22%;
}
#diegel .logo{
	width: 34%;
}
#villa-stephen {
	margin-right:10px;
}
#villa-stephen .logo{
	width: 39%;
}
#abonett .logo{
	width: 26%;
}
#ge .logo{
	width: 26%;
}
#typo .logo{
	width: 18%;
}
#vagd-zsebre .logo{
	width: 47%;
}
#rapcity .logo{
	width: 24%;
}
.reference .content a{
	color:white;
	text-decoration: none;
	font-family: bold;
	cursor: pointer;
}
#real .logo{
	width: 22%;
}
#hunza .logo{
	width: 29%;
}



.reference .logo{
	opacity: 1;
	transition: opacity 0.8s;
}
.reference .hover{
	transition: opacity 0.8s;
	opacity:0;
	position: absolute;
	top: 50%;
	left: 0%;
	right:0;
	-webkit-transform: translate(0%, -50%);
	-moz-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	-o-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

.reference .hover h2{
	color: white;
	font-size: 30px;
	font-family: 'bold';
	white-space: nowrap;
	text-align: center;
	padding-bottom: 15px;
	margin-bottom: 15px;
	background: url('/img/separator-green.svg') center bottom no-repeat;
	background-size: 42px;
}
.reference .hover p, .reference .hover p span{
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: 'regular';
	text-align: center;
	font-size: 14px;
	padding-bottom: 20px;
}
.reference .hover p{
	padding-left: 15px;
	padding-right: 15px;
}
.reference .hover p span{
	white-space: nowrap;
}

.reference .hover .show-button{
	cursor:pointer;
	padding: 12px 25px 8px 25px;
	letter-spacing: 1px;
	width: 100px;
	margin: 10px auto 0 auto;
	text-align: center;
	border: 2px solid #29b6bf;
	font-size: 15px;
	font-family: 'semibold';
	text-transform: uppercase;
	color: #29b6bf;
}

#content:after{
	display: block;
	clear: both;
	content: '';
}

#content .reference img.background {
	width: 100%;
	transition: all 1s;
}

#content .reference{
	margin-top:10px;
	position: relative;
}

.column-block{
	width: 100%;
	float: left;
}

.column-block:after{
	display: block;
	clear: both;
	content: '';
}

.column-block .column{
	float: left;
	margin-right:10px;
}

.column-block .column:last-child{
	margin: 0;
}


.column-block.first .column:first-child{
	width: calc(41.6% - 10px);
}
.column-block.first .column:nth-child(2){
	width: calc(31.9% - 5px);
}
.column-block.first .column:last-child{
	width: calc(26.4% - 5px);
}


.column-block.second .column:first-child{
	width: 58.4%;
}
.column-block.second .column:last-child{
	width: calc(41.6% - 10px);
}

#vagd-zsebre{
	width: calc(50% - 5px);
	float: left;
	margin-right: 10px;
}

#rapcity{
	width: calc(50% - 5px);
	float: left;
}

#real{
	margin-top:10px;
	float: left;
	width: 100%;
}


.reference.open .logo{
	opacity: 0;
}

.reference.open .hover{
	opacity: 1;
	transition-delay: 0.4s;
}
.reference.open img.background{
	-webkit-transform: translate(-50%, -50%) scale(1.2);
	-moz-transform: translate(-50%, -50%) scale(1.2);
	-ms-transform: translate(-50%, -50%) scale(1.2);
	-o-transform: translate(-50%, -50%) scale(1.2);
	transform: translate(-50%, -50%) scale(1.2);
}



.reference .content{
	position: absolute;
	left:0;
	right: 0;
	bottom: 0;
	top:0;
	display: none;
	background:#25cbd3;

}
.reference .content p{
	position: absolute;
	top:50%;
	text-align: center;
	transform: translate(0,-50%);
	color:white;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 1px;
	white-space: normal;
	left:0;
	right:0;
	padding: 0 20px;
}
.reference .content p img {
	width:20%;
	margin: 0 auto;
	margin-bottom: 20px;

}

#ge .content img{
	width: 26%;
}

#ge .content p {
	font-size: 16px;
}

#rapcity .content img{
	width: 26%;
}

#rapcity .content p {
	font-size: 16px;

}




body.hover .reference:hover .hover{
	opacity: 1;
	transition-delay: 0.4s;
}
body.hover .reference:hover .logo{
	opacity: 0;
}


body.hover .reference .hover .show-button:hover{
	background: #29b6bf;
	color:white;
}

body.hover .reference:hover img.background{

	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}
#rosenberg{
	width: calc(28% - 5px);
	float: left;
	}
#rosenberg .logo{
	width: 65%;
}
#rosenberg .content img {
	width: 65%;
}
#boltinfo{
	width: calc(43.2% - 5px);
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	}
#boltinfo .logo{
	width: 25%;
}
#boltinfo .content img {
	width: 25%;
}
#auchan{
	width: calc(28.2% - 5px);
	float: left;
	}
#auchan .logo{
	width: 55%;
}
#auchan .content img {
	width: 55%;
}
#karoracentrum{
	width: calc(39.2% - 5px);
	float: left;
	}
#karoracentrum .logo{
	width: 60%;
}
#karoracentrum .content img {
	width: 60%;
}
#forexhunter{
	width: calc(32% - 5px);
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	}
#forexhunter .logo{
	width: 70%;
}
#forexhunter .content img {
	width: 70%;
}
#greensys{
	width: calc(28.2% - 5px);
	float: left;
	}
#greensys .logo{
	width: 70%;
}
#greensys .content img {
	width: 70%;
}