/* ============================================================

	Author:	Svend Richter <svend.richter@factorial-seven.com>
	Date:	14.11.2012
	File:	css-layout.css


	*** Table of contents ***

	1. General styles and helper classes
		1.1 Buttons
		1.1.1 Read on
		1.1.2 Social Links
		1.2 Thumbnails
	2. Layout
		2.1 Header navigation
		2.2 Blog
		2.3 Content
		2.4 Slider
		2.5 Gallery
		2.6 Comments
		2.7 Sidebar
		2.8 Widgets
		2.9 Formulars
	X. Clearfix


	*** Color Palette ***

	#4c4c4c - Text grey
	#eeeeee - Footer background

	#e41a96	- Corporate color
	#ac006a	- Corporate color dark

   ============================================================ */


/* ============================================================
	1. General styles and helper classes
   ============================================================ */

hr {
	border: 0;
	height: 1px;
	background: #000;
}

.button:hover,
#header .nav a:hover {
	transition:			all 0.5s ease;
	-moz-transition:	all 0.5s ease;
	-webkit-transition:	all 0.5s ease;
	-o-transition:		all 0.5s ease;
	-ms-transition:		all 0.5s ease;
}

.breadcrumbs {
	margin: 0 0 3em 0;
}


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

.button {
	border: 1px solid #000;
	padding: 0.5em 1em;
	margin: 0.5em 0;
	display: block;
	color: #e41a96;
	background: #fff;
}

.button:hover {
	background: #e41a96;
	color: #fff;
}

.button:active {
	background: #ac006a;
}

/*	1.1.1 Read on
   ============================================================ */

.readon {
	position: absolute;
	right: 0;
}


/*	1.1.2 Social-Links
   ============================================================ */

/*	1.2 Thumbnails
   ============================================================ */

.thumb {
	margin: 0;
	padding: 5px;
	background: #fff;
	display: block;
	border: 1px solid #000;
}

.thumb img {
	display: block;
}

.thumb:hover {
	background: #e41a96;
}

.thumb.small,
.thumb.small img {
	width: 50px;
	height: 50px;
}

.thumb.big,
.thumb.big img {
	width: 150px;
	height: 150px;
}

.content-main img,
.content-main iframe {
    max-width: 100%;
}

.article .article-content .thumb.big {
	float: left;
	margin: 0 20px 20px 0;
	height: auto;
}

.article .article-content .thumb.big img {
	height: auto;
}

.article .article-content .thumblist .thumb {
	float: left;
	margin: 0 1em 1em 0;
}


/* ============================================================
	2. Layout
   ============================================================ */

body {
	background: url(images/filmband.png) no-repeat top right;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1em;
}

#header {
    margin: 0;
    padding: 0;
    background: #fff;
    grid-column: 1 / 2;
    grid-row: 1;
}

#content {
    padding: 3em 2.5% 0;
    background: rgba(255, 255, 255, 0.75);
    grid-column: 1 / 2;
    grid-row: 2;
}

#footer {
    grid-column: 1 / 2;
    grid-row: 3;
}

.header-content h1 {
    text-align: center;
}

@media (min-width: 655px) {
    .grid-container {
        grid-template-columns: 1fr 3fr;
    }
    #header {
        grid-column: 1 / 2;
        grid-row: 1;
    }
    #content {
        grid-column: 2 / 3;
        grid-row: 1;
    }
    #footer {
        grid-column: 1 / 3;
        grid-row: 2;
    }
}


/*	2.1 Navigation
   ============================================================ */

#header .nav {
	list-style: none;
	padding: 0 1em;
}

#header .nav a {
	border: 1px solid #000;
	padding: 0.5em 1em;
	margin: 0.5em 0;
	display: block;
	font-size: 1.25em;
}

#header .nav a:hover {
	background: #e41a96;
	color: #fff;
}

#header .nav a:active {
	background: #ac006a;
}

#header .nav .selected a {
    background: #e41a96;
    color: #fff;
}

#footer {
	text-align: center;
	margin: 2em 0 1em;
}

#footer .nav {
    padding: 0;
}

#footer .nav li {
	display: inline;
}

#footer .nav li a {
	padding: 0.5em 1em;
}


@media (max-width: 655px) {
    .nav li,
    .nav.responsive .burger{
        display: none;
    }
    .nav .burger,
    .nav.responsive li {
        display: block;
    }
}

@media (min-width: 655px) {
    .nav .burger {
        display: none;
    }
}


/*	2.2 Blog
   ============================================================ */

.article {
	margin: 0 0 2em 0;
	position: relative;
}

.article .postinfo {
	list-style: none;
	padding: 0;
}

.article .postinfo li {
	display: inline;
}

.article .postinfo li.date {
	padding: 0 1em 0 0;
	margin: 0 1em 0 0;
	/*border-right: 1px solid #000;*/
}


/*	2.3 Content
   ============================================================ */


/*	2.4 Slider
   ============================================================ */


/*	2.5 Gallery
   ============================================================ */


/*	2.6 Comments
   ============================================================ */

/*	2.7 Sidebar
   ============================================================ */

/*	2.8 Widgets
   ============================================================ */


/*	2.9 Formulars
   ============================================================ */

form {
	padding: 1em;
	margin: 0;
}

form label,
form input,
form textarea {
	width: 100%;
	margin: 0 0 1em 0;

	box-sizing: 		border-box;
	-moz-box-sizing: 	border-box;
	-webkit-box-sizing:	border-box;
}

form span.email {
	display: none;
}

form textarea {
	min-width: 100%;
	max-width: 100%;
	height: 10em;
}

form .button {
	width: auto;
	float: right;
}


/*	2.10 Datepicker
   ============================================================ */



/* ============================================================
	X. Clearfix
   ============================================================ */

/* For modern browsers */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom: 1; }