/*** General, Typo ***/

body {
	font-family: 'Roboto', sans-serif;
	margin:0;
	padding:0;
	color:#5c5c5c;
	font-size:1.2rem;
	font-weight: 300;
	line-height:1.7rem;
}

h1, h2 {
	font-weight:300;
	color:#8bb0b9;	
	margin:0 0 2rem 0;
	text-align:center;
    font-size: 36px;
    font-size: 2.25rem;
	line-height:2.25rem;
}

h3 {
	font-weight:500;
    font-size: 1.95rem;
	line-height:1.95rem;
}

p { 
	margin:0; 
	padding:0 0 1rem 0; 
}

strong {
	font-weight:500;
}

ul { 
	margin:0 0 0 1.1rem; 
	padding:0 0 1rem 0; 
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid transparent;
  margin-bottom:2rem;
}

a, a:link, a:visited, a:active {
	text-decoration:none;
	color:#8bb0b9;
}

figure {
	margin:0 auto;
	padding:0;
}

figcaption hr {
  margin-top:2rem;
  margin-bottom:2rem;
  width:60%;
}


.subline {
	font-size:1.15rem;
	font-style:italic;
	line-height:1.45rem;
}


/*** header ***/
.header {
	height:50px;
}

/*** navigation ***/

.site-navigation {
	position:fixed;
	top:calc(-100% + 50px);
	top:-moz-calc(-100% + 50px);
	top:-webkit-calc(-100% + 50px);
	top:-o-calc(-100% + 50px);
	left:0;
	width:100%;
	height:50px;
	background:rgba(255,255,255,0.85);
	height:100%;
	width:100%;
	z-index:1000;
	transition: top 0.3s;
}

.site-navigation.isOpen {
	top:0;
}

.site-navigation ul {
	list-style:none;
	text-align:center;
	margin-top:20px;
}

.site-navigation ul li a {
	display:block;
	font-size:1.5rem;
	font-weight:300;
	color:#8bb0b9;
	font-size:500;
	text-decoration:none;
	padding:0.5rem 0;
	text-transform:uppercase;
}

.hamburger {
	width:28px;
	height:28px;
	display:block;
	border:none;
	position:fixed;
	top:10px;
	left:20px;
	z-index:1001;
	display: inline-block;
	cursor: pointer;
	background:url("../images/boehme-nav-select.svg") center center no-repeat;
	background-size: 100% auto;
}

.hamburger.is-active {
	background:url("../images/boehme-nav-close.svg") center center no-repeat;
	width:24px;
	height:24px;
}

/*** site elements ***/

section {
	position:relative;
}

.site-hero {
    width:100%;
	padding-bottom:62.5%;
    height:0;
    background:#f4f4f4 url('../images/boehme-image1.jpg') center center no-repeat;   
	background-size:100% auto;
	position:relative;
}

.site-logo {
	width:80px;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto 25px;
}

.section-scroll {
	display:block;
	width:30px;
	height:30px;
	background:url("../images/boehme-nav-down.svg") center center no-repeat; 
	position:absolute;
	bottom:25px;
	left:calc(50% - 18px);
	left:-moz-calc(50% - 18px);
	left:-webkit-calc(50% - 18px);
	left:-o-calc(50% - 18px);
}

.content-section {
	box-sizing:border-box;
	padding:0 20px;
}

.content-section-image {
	background:#f4f4f4;
	width:100%;
	padding-bottom:50% !important;
	height:0;
	
}
.section-image-2 { background:url('../images/boehme-image2.jpg') center center no-repeat; background-size:100% auto;}
.section-image-3 { background:url('../images/boehme-image3.jpg') center center no-repeat; background-size:100% auto;}
.section-image-4 { background:url('../images/boehme-image4.jpg') center center no-repeat; background-size:100% auto;}
.section-image-5 { background:url('../images/boehme-image5.jpg') center center no-repeat; background-size:100% auto;}	

.container {
	margin:0 auto;
	padding:36px 0;
	max-width:280px;
}

.container img {
	display:block;
	margin:0 auto;
	padding:0 0 2rem 0;
	width:100%;
}

.container .half-image {
	max-width:320px;
}

.container .cnt-toggle-button {
	display:inline-block;
	background:url("../images/boehme-nav-plus.svg") center left no-repeat;
	margin-bottom:1.2rem;
	padding-left:35px;

	cursor:pointer;
}

.container .cnt-toggle-button.isOpen {
	background:url("../images/boehme-nav-minus.svg") left center no-repeat;
	
}
.container .cnt-toggle-button.isOpen span {
	display:none;
}

.container .cnt-toggle-link {
	cursor:pointer;
}

.container .cnt-toggle-link.isOpen {
	display:none;
}

.container .cnt-toggle {
	display:none;
}

.container .cnt-toggle.isOpen {
	display:block;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	margin-bottom:40px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.image-quote { 
	font-style:italic;
	text-align:center;
}

/*** footer ***/

.footer {
	background:#8bb0b9;
	color:#fff;
}

.footer .container-left,
.footer .container-right {
	min-height: 7rem;
}

.footer a {
	color:#fff;
	text-decoration:none;
}

.footer a:hover {
	text-decoration:underline;
}

.footer a.social-icon {
	display:inline-block;
	width:60px;
	height:60px;
	font-size:0;
	background-image:url("../images/social-icons.jpg");
	background-repeat: no-repeat;
}

.footer a.facebook { 
	margin-top:15px;
	margin-right:15px;
	background-position:0 0;
}

.footer a.youtube { 
	margin-top:15px;
	margin-right:50px;
	background-position:-60px 0;
}


/*** helper, clearings, fixes ***/

.relative {
	position:relative;
}

.small-gap {
	margin-bottom:0;
	padding-bottom:0.2rem;
}

button:focus {
  text-decoration: none;
  outline:none;
  border: none;
  box-shadow: none;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	clear: both;
	display:block;
	zoom: 1; /* ie 6/7 */
}

/* iOS: remove link background/highlight grey */
a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/*** media queries ***/

/** from 320px */
@media only screen and (min-width: 320px) {

	.site-logo {
		width:96px;
		margin: auto 40px;
	}

	.content-section {
		box-sizing:border-box;
		padding:0 25px;
	}
	
	.container {
		max-width:430px;
	}
	
}

/** from 480px */
@media only screen and (min-width: 480px) {
	
	.site-logo {
		width:120px;
		margin: auto 50px;
	}
	
	.content-section {
		box-sizing:border-box;
		padding:0 50px;
	}
	
	.container {
		max-width:540px;
	}
	
}

/* from 640px */
@media only screen and (min-width: 640px) {

	.site-logo {
		width:160px;
	}

	.section-scroll {
		bottom:50px;
	}
	
	.container {
		max-width:540px;
	}

}

/* from 800px */
@media only screen and (min-width: 800px) {
	
	
	body {
		font-size:1.3rem;
		line-height:1.8rem;
	}

	.hamburger {
		display:none !important;
	}

	.site-navigation {
		height:50px;
		top:0;
	}
	
	.site-navigation ul {
		margin:12px 0;
		padding:0;
	}
	
	.site-navigation ul li {
		display:inline-block;
	}
	
	.site-navigation ul li a {
		padding:0 0.3rem;
		font-size:1.3rem;
	}
	
	.site-hero {
		height:500px;
		background:#f4f4f4 url('../images/boehme-image1b.jpg') right top no-repeat;  
		padding-bottom:0;
	}
	

	.site-logo {
		width:200px;
		margin: auto 10%;
	}
	
	.content-section-image {
		height:400px !important;
		padding-bottom:0 !important;
	}
	
	.section-image-2 { background:url('../images/boehme-image2b.jpg') right center no-repeat; }
	.section-image-3 { background:url('../images/boehme-image3b.jpg') center center no-repeat; }
	.section-image-4 { background:url('../images/boehme-image4b.jpg') center center no-repeat; }
	.section-image-5 { background:url('../images/boehme-image5b.jpg') center center no-repeat; }	
	
	.container {
		max-width:700px;
	}
	
	.container-left {
		width:50%;
		float:left;
	}
	
	.container-right {
		width:50%;
		float:right;
	}	
	
	.image-left { float:left; padding: 0 2rem 2rem 0 !important; }
	.image-right { float:right; padding: 0 0 2rem 2rem !important; }	

	.footer .container-left {
		text-align:right;
	}
		
}

/* from 1200px */
@media only screen and (min-width: 1200px) {
	
	.site-navigation ul li a {
		padding:0 0.5rem;
		font-size:1.5rem;
	}
	
	.site-logo {
		width:200px;
		margin: auto 15%;
	}
}

/* from 1600px */
@media only screen and (min-width: 1600px) {

	.site-hero {
		padding-bottom:31.25%;
		height:0;
		background-size:100% auto;
	}	
	
	.site-logo {
		width:200px;
		margin: auto 20%;
	}
	
	.content-section-image {
		padding-bottom:25% !important;
		height:0;
		background-size:100% auto;
	}
}