@media (max-width: 950px) {


	#references.marginTop130{
		margin-top: 65px;
	}

	#dynavap{
		margin-right: 10px;
	}
	#icewater{
		margin-right: 0;
	}


	#content #drillq.reference img.background,
	#content #qenergy.reference img.background,
	#content #michael.reference img.background{
		width: 150%;
	}
	#content #qenergy.reference img.background{
		width: 175%;
	}
	#content #dynavap.reference img.background{
		width: 190%;
	}

	#dynavap.reference img.logo{
		width: 60%;
	}
	#icewater.reference img.logo{
		width: 45%;
	}
	#michael.reference img.logo{
		width: 57%;
	}
	#kuehl.reference img.logo{
		width: 45%;
	}
	#drillq.reference img.logo{
		width: 45%;
	}
	#qenergy.reference img.logo{
		width: 65%;
	}

	div.reference{
		width: calc(50% - 5px) !important;
		float:left;
		height: 250px;
		overflow: hidden;
	}

	div.reference img.background {
		width: 100%;
		transition: all 1s;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	#eblokk{
		margin-right:10px;
		width: 100% !important;
	}


	#muuska img.background{
		transform: translate(-50%, -30%);
	}
	#muuska:hover img.background{
		transform: translate(-50%, -30%) scale(1.2);
	}

	#young{
		margin-right: 0;
	}

	#orange{
	}

	#hillside{
		margin-right:10px;
	}

	#orange img.background{
		width:170% !important;
	}

	.column-block{
		float:none;
		width:auto !important;
	}
	.column-block .column{
		float:none;
		margin:0;
		width:auto !important;
	}

	#diegel{
		margin-right:10px;
	}

	#diegel img.background{
		width: 110% !important;
	}


	#typo img.background{
		width: 110% !important;
	}

	#villa-stephen{
		float: left;
		width: calc(50% - 5px) !important;
	}

	#ge{
		margin-right: 10px;
	}

	#vagd-zsebre{
		margin-right:0px !important;
	}

	#rapcity{
		margin-right:10px;
	}

	#real img.background{
		width: 190% !important;
	}

	.column-block:after{
		display: none;
	}


	#content{
		padding-bottom: 0px;
	}

	#abonett .logo{
		width: 22%;
	}

	#vagd-zsebre .logo{
		width: 32%;
	}

	#ge .logo{
		width: 22%;
	}
	#young .logo {
		width: 36%;
	}

	#muuska .logo {
		width: 36%;
	}

	#orange .logo{
		width:30%
	}

	#diegel .logo{
		width: 44%;
	}
	#real .logo{
		width: 32%;
	}

	.reference .hover p{
		padding-bottom: 10px;
	}

	.reference .content p{
		font-size: 16px;
		line-height: 1.3;
	}
	#rapcity .content img{
		width: 20%;
	}

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

	#left-menu{
		width:45% !important;
	}

	#villa-stephen{
		margin-right:10px;
	}

	body.hover .reference:hover 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);
	}
	#boltinfo {
		margin-right: 0
	}
	#boltinfo img.background,#karoracentrum img.background{
		width: 140% !important;
	}
	#karoracentrum {
		margin-left: 10px;
	}
	#forexhunter {
		margin-left: 0px
	}

}



@media (max-width: 750px) {
	div.reference{
		height: 200px;
	}

	.reference .hover p{
		padding-bottom: 0px;
	}


	#eblokk .logo{
		width: 20%;
	}
	#young .logo{
		width:40%;
	}


	#left-menu{
		width:60% !important;
	}
}

@media (max-width: 600px) {

	#left-menu{
		width:100% !important;
	}

	div.reference{
		height: 180px;
	}

	.reference .hover h2{
		padding-bottom:8px;
		margin-bottom:8px;
		font-size:22px;
	}

	.reference .hover p, .reference .hover p span{
		 padding-bottom: 8px;
		 font-size:12px;
	 }

	.reference .hover .show-button{
		padding:6px 15px 1px 15px;
		font-size:13px;
	}
/*
	.header div#back a img{
		height:54%;
		margin: 6% 0;
	}
*/


}


@media (max-width: 600px), (max-height: 600px) {

	#left-menu ul{
		width: 230px;
		margin: auto;
	}
	#left-menu ul li{
		height: 30px;
		margin-bottom:10px;
	}

	#left-menu ul li:before{
		height: 30px;
		width: 30px;
	}
}

@media (max-height: 450px) {

	#left-menu > div{
		top: 0;
		padding:20px 0;
		overflow-y: scroll;
		bottom :0;
		left:0;
		right:0;
		top:0;
		transform:translate(0%, 0);
	}
}


@media (max-width: 500px) {
	div.reference{
		width: 100% !important;
		margin-right:0 !important;
	}
	#references_body #footer{
		margin-top: 30px;
	}

	#villa-stephen {
		width: 100% !important;;
	}

	.reference img.logo{
		width: 30% !important;
	}

	#dynavap.reference img.logo{
		width: 40% !important;
	}
	#icewater.reference img.logo{
		width: 35% !important;
	}
	#michael.reference img.logo{
		width: 50% !important;
	}
	#kuehl.reference img.logo{
		width: 40% !important;
	}
	#drillq.reference img.logo{
		width: 35% !important;
	}
	#qenergy.reference img.logo{
		width: 50% !important;
	}


	#eblokk .background{
		width: 140% !important;
	}

	#typo .logo{
		width: 14% !important;
	}
	#villa-stephen .logo{
		width: 28% !important;
	}
	#abonett .logo{
		width: 19% !important;
	}
	#ge .logo{
		width: 19% !important;
	}
	#rapcity .logo{
		width: 19% !important;
	}

	.header #menu #icon{
		margin: 3px 0 0 0;
	}

	.header-bg{
		height: 50px;
	}
	.header{
		padding: 15px 0;

	}
	#boltinfo {
		margin-left: 0px;

	}
	#karoracentrum {
		margin-left: 0px;
	}
	#karoracentrum .logo, #greensys .logo, #forexhunter .logo {
		width: 40% !important;
	}

}



@media (max-width: 1210px) {

	.header{
		width: auto;
		margin: 0;
		left: 0px;
		right: 0px;

	}
	#footer .padding{
		width: 100%;
	}
	.header .padding{
		width: auto;
		padding-top:0;
		padding-bottom:0;
	}
	#references{
		width: 100%;
	}

	.padding{
		padding: 0 10px;
	}

	#left-menu{
		width:35%
	}
}

@media (max-width: 1020px) {
	#left-menu{
		width:40%
	}
}

@media (min-width: 950px) {


	.header{
		padding:20px 0;
	}

	#content{
		margin-top:71px

	}

}