/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */
   
   /* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
	font-family: 'Hind', sans-serif;
	font-size: 16px;
	width: 100%; 
}

hr {
	border-top:2px solid #6B3DE4;
	width: 140px;
}


.main-wrapper {
    width: 1440px;
	margin: 0 auto;
	position: relative;
}
@media only screen and (max-width: 1024px) {
	.main-wrapper {
		width: 100%;
		
	}
}

/* ===============
     Schriften
   =============== */
h1 {
	font-family: 'Crimson', sans-serif;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 108px;
	margin-top: 60px;
	margin-bottom: 60px;
	line-height: 120px;
	letter-spacing: -5px;
}
@media only screen and (max-width: 1024px) {
	h1  {
		width: 100%;
		margin-bottom:5px;
		letter-spacing: 0;	
		font-size: 9vw;
		line-height: 10vw;
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}
}
@media only screen and (max-width: 768px) {
	h1  {
		margin-top: 40px;
		margin-bottom: 40px;
	}
}
@media only screen and (max-width: 599px) {
	h1  {
		font-size: 30px;
		line-height: 36px;	
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

h2.lila {
	font-family: 'Crimson', sans-serif;
	font-size: 48px;
	line-height: 60px;
	font-weight: normal;
	color: #6B3DE4;
	margin-top:0;
	padding-bottom:20px;
	width: 800px;
}
@media only screen and (max-width: 1024px) {
	h2.lila {
		width: 95%;
		margin-bottom:5px;
		padding-left: 10px;
		font-size: 8vw;
		line-height: 9vw;		
		
	}
}
@media only screen and (max-width: 599px) {
	h2.lila {
		font-size: 26px;
		line-height: 32px;			
	}
}
h2.grau {
	font-family: 'Crimson', sans-serif;
	color: #3C3D41;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 56px;
	line-height: 66px;
	width:800px;
	margin: 0 auto;
	padding:60px 0 30px 0;
	text-align: center;
}
@media only screen and (max-width: 1024px) {
	h2.grau {
		width: 95%;
		padding:20px 0 20px 0;
		font-size: 8vw;
		line-height: 9vw;		
		
	}
}
@media only screen and (max-width: 599px) {
	h2.grau {
		width: 95%;
		padding:20px 0 20px 0;
		font-size: 20px
		line-height: 26px		
		
	}
}
section p {
    padding-left: 80px;
    font-family: 'Crimson Text', serif;
    font-size: 22px;
    line-height: 32px;
    width: 800px;
}
@media only screen and (max-width: 1024px) {
	section p  {
		width: 95%;
		padding-left: 5px;

	}
}

p.bildbeschreibung{
	color: #6C6C70;
	font-family: 'Crimson Text', serif;
	font-size: 16px;
	line-height: 20px;
	padding-top:0;	
	margin-top:0;	
}
p.foto-copyright {
	color: #838D8F;
	font-size: 13px;	
	line-height: 16px;	
	padding-bottom:0;	
	margin-bottom:0;	
}
@media only screen and (max-width: 599px) {
	p.bildbeschreibung, p.foto-copyright {
		margin:0;
		padding: 0;
		line-height: 18px;

	}
}
.sidenote span  {
	color: #6C6C70;
	font-size: 15px;
	line-height: 20px;
	display: inline-block;	
	padding-top: 10px;
}

.fa {
	color:#fff;
}
.fa-comment {
	margin-left:10px;
}
.fa-share-square-o, 
.teilen{
	color: #6B3DE4;
}
em {
	font-size: 38px;	
	line-height: 56px;	
	width: 600px;
	color: #6B3DE4;
	display: block;	
}
.teilen {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;
}
@media only screen and (max-width: 1024px) {
	em , .teilen  {
		margin-left: 10px;
		width: 95%;
	}
	em {
		font-size: 5vw;
		line-height: 8vw;
	}
}

.socials-wrapper {
	margin: 0 auto;
	width: 500px;
	color: #fff;
}
.socials-wrapper  .fa-share-square-o {
	color: #fff;
}
.likes {
	color:#fff;
	margin: 0 20px 0 20px;
}
.time {
	color:#fff;
	float: left;
	margin-right: 10px;
}
.shared {
	color:#fff;
	border: 1px solid #fff;
	border-radius: 17px;
	display: inline;
	margin: 0 auto;
	padding: 10px;
}
@media only screen and (max-width: 599px) {
	.shared, .likes, .time   {
		display: block;
		float: none;
		
	}
	.shared {
		width: 150px;
		padding: 0px 8px;
	}
	.socials-wrapper  {
		width: 100%;
	}
}

/* ===============
    Positionierung
   =============== */
   
.kanu-header {
	position: relative;
	margin-bottom: 60px;
}  
@media only screen and (max-width: 599px) {
	.kanu-header {
		margin-bottom: 5px;
	} 
} 
.bg-overlay {
	background-color: #3C3D41;

}
.bg-overlay  img#headerbild {
	opacity: 0.6;
}

.txt-overlay {
	position: absolute;	
	top:334px;
    width: 1440px;
	height: 400px;
    margin: 0 auto;		
	text-align: center;
}
@media only screen and (max-width: 1024px) {
	.txt-overlay   {
		top:122px;
		width: 100%;
		
	}
}
@media only screen and (max-width: 786px) {
	.txt-overlay   {
		top:20px;
		width: 100%;
		height: auto;
		
	}
}
@media only screen and (max-width: 599px) {
	.txt-overlay   {
		top:10px;
		width: 100%;
		
	}
}
.bildbeschreibung-container {
    position: absolute;
    border-radius: 3px;
    background: #fff;
    width: 150px;
    left: 220px;
    padding: 20px;
    margin-top: -985px;
}
@media only screen and (max-width: 1024px) {
	.bildbeschreibung-container   {
		margin-top: -162px;
		left: 10px;
		position: absolute;
		
	}
}
@media only screen and (max-width: 599px) {
	.bildbeschreibung-container   {
		margin-top: 0;
		left: 0px;
		position: relative;
		width: 90%;
		
	}
}

section {
	padding-left: 200px;
}
@media only screen and (max-width: 1024px) {
	section   {
		width: 97%;
		padding-left: 5px;
		
	}
}

.sidenote {
	position:absolute;
	margin-left:-160px;
	width: 175px;
}
@media only screen and (max-width: 1024px) {
	.sidenote {
		position:relative;
		width: 100%;		
		margin-left: 0px;
		margin-top: 10px;

	}
	.sidenote img {
		width: auto;
		float: left;
		margin-right: 10px;
	}
	.sidenote span {
		display: inline;
	}
}

/* ===============
     Buttons
   =============== */


.kanu-header .btn-mein-projekt {	
	border-radius: 3px;	
	background-color: #6B3DE4;
	padding: 4px 12px;
	text-transform: uppercase;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	}
	


/* ==========================================================================
   additional media queries
   ========================================================================== */	
	
	
@media only screen and (max-width: 1024px) {
	img  {
		width: 100%;
		
	}
}
	

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}