#google-map-screenshot img {
	
	width: 100%;
	transition: transform .2s;
	
}

#google-map-screenshot img:hover {
	
	transform: scale(1.05);
	
}

.contact-additional {

	float: left;
	clear: both;

}

.site-title, .site-subtitle { height: auto; }
h1.page-title { line-height: 65px; }
h2 { font-size: 26px; }
h4 { font-size: 20px; margin-bottom: 20px; }
footer h5 { font-size: 20px; }
footer ul li { font-size: 18px; line-height: 24px; padding-bottom: 10px; }
ul.menu-lang li { font-size: 16px; }
ul.menu-main li { font-size: 20px; }
ul.menu-main li a { display: inline-block; }
p, p.contact-info { font-size: 18px; }

.teaser p, .teaser li { font-size: 16px; line-height: 22px; } 
p.contact-info span.right { line-height: 26px; }

.facebook-link { margin-top: 30px; }

#logos ul li {
	width: 16.66%;
}

#logos ul li.first img {
	height: 40px;
	opacity: 50%;
}

/* Trying to get this to work on mobile. */

body {
	
	min-width: 100%;
	
}

.col-12,
.col-wrapper {
	width: 100%;
	max-width: 1100px;
}

header .col-4,
footer .col-4 {
	width: 340px;
}

header .col-8 {
	float: right;
	width: 440px;
}

footer .col-8 {
	float: right;
	width: 380px;
}

footer .col-8 {
	text-align: right;
}

.image-carousel-wrapper .col-4 {
	padding-top: 20px;
}

@media screen and (max-width: 1100px) {

	#logo {
		margin-top: 20px;
		margin-right: 0;
	}

	.frontpage header.col-12 {
		margin-bottom: 0;
	}

	header.col-12 {
		padding-bottom: 0;
	}

	header .col-4 img {
		margin-left: 20px;
	}

	header .col-8 ul {
		margin-right: 20px;
	}

	header .col-8 ul.menu-lang {
		margin-right: 30px;
	}

	footer .col-8 h5 {
		margin-right: 20px;
		padding-right: 20px;
	}

	ul.menu-lang {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	ul.menu-main {
	  margin-top: 0;
	}

	ul.menu-main li {
	  font-size: 16px;
	}

	.image-carousel-wrapper {
		padding: 0;
	}

	.image-carousel-wrapper .col-4 {
		margin-left: 20px;
	}

}

@media screen and (max-width: 1000px) {

	#logos {
		padding: 0;
	}

	#logos ul li {
		width: 33%;
		margin-bottom: 20px;
	}

	#wrapper-front-page {
		/* Show some of the background just as a cool effect */
		margin-bottom: 440px;
	}

}

@media screen and (min-width: 840px) and (max-width: 1000px) {

	.col-6 {
		
		width: 48%;
		margin-right: 2%;
		
	}

	#teaser-last {
		padding-left: 30px;
	}

}

@media screen and (max-width: 840px) {

	.col-6 {
		
		width: 90%;
		margin-left: 0;
		margin-right: 0;
		
	}

	.teaser {
		width: 40%;
		min-height: auto;
		margin-left: 20px;
		padding-right: 0;
	}

	.teaser.margin-grid-right {
		margin-right: 0;
	}

	#teaser-first {
		width: 90%;
		min-height: auto;
		margin-left: 0;
	}

	#teaser-first.margin-grid-right {
		margin-right: 0;
	}

}

@media screen and (min-width: 500px) and (max-width: 1000px) {

	#logos ul li.fourth {
		clear: both;
		background: none;
	}

}

@media screen and (max-width: 760px) {

	.site-subtitle {
		font-size: 35px;
	}

	header .col-8,
	header .col-4,
	footer .col-8,
	footer .col-4 {
		width: 100%;
		max-width: 100%;
	}

	footer .col-8 {
		text-align: left;
	}

	.image-carousel-wrapper .col-4 {
		width: 90%;
		margin-right: 0;
	}

	.teaser {
		width: 90%;
	}

	#teaser-last {
		padding-right: 0;
		padding-left: 15px;
	}

}

@media screen and (max-width: 500px) {

	#logos ul li {
		width: 50%;
		min-height: 40px;
		background: none;
	}

	#logos ul li.fourth {
		float: left;
	}

	#logos ul li.third,
	#logos ul li.fifth {
		float: left;
	}

}