/*  
Theme Name: ZWANZIGEINS
Theme URI: http://www.olivergast.de/zwanzigeins/
Description: A modern stylish WordPress-Theme
Version: 1.0
Author: Oliver Gast
Author URI: http://www.olivergast.de
License:
License URI:
Tags: blue, white, three-columns, fixed-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: og-zwanzigeins
*/


/*---------------- Index of this style.css ------------------

    I. Google Webfont for italic styles
   II. Basics 
  III. Headings 
   IV. Layout 
    V. Content
   VI. Navigation
       1. Top-(Main-)Navigation
       2. Footer navigation
  VII. Featured-posts
 VIII. Post & Pages content
       1. Declarations for all type of posts and pages
       2. Single-posts or pages
       3. Blog-posts
       4. Sticky-posts
       5. 404-Page
       6. Search-result-page
       7. Post-images and gallery
   IX. Sidebar
    X. Comments
   XI. Side-Navigation
  XII. Comment-navigation
 XIII. Shortcodes
  XIV. Special styles for plugins
   XV. Fixes for browsers or devices
       1. Fix for the Internet Explorer
       2. Fix for the checkbox hack on old Android-devices
       3. Fix for fixed-elements on iOS-devices
  XVI. Media Queries for the responsive layout
       1. Generell parameters
       2. for devices with less than 1400 pixel maximum-width
       3. for devices with less than 1024 pixel maximum-width
       4. for devices with less than 800 pixel maximum-width
       5. for devices with less than 600 pixel maximum-width
       6. for devices with less than 400 pixel maximum-width

-----------------------------------------------------------*/



/*---------- I. Google Webfont for italic styles ----------*/

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic);

address,
blockquote,
.gallery .gallery-caption,
.wp-caption-text,
input#s,
input.search-field {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.2em;
	font-style: italic;
}


/*---------- II. Basics ----------*/

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.6em;
	background-size: cover;
	text-rendering:  optimizeLegibility;
	-webkit-font-smoothing: antialiased !important;
	-moz-font-smoothing: antialiased !important;
}

html {
	overflow-x: hidden;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

::selection {
	background: #333;
	color: #fff;
}

::-moz-selection {
	background: #333;
	color: #fff;
}

a {
	text-decoration: none;
	-webkit-transition: color 0.5s linear;
	-moz-transition: color 0.5s linear;
	-o-transition: color 0.5s linear;
	-ms-transition: color 0.5s linear;
	transition: color 0.5s linear;
}

a:hover {
	text-decoration: none;
}

ul li {
	list-style-type: square;
}

ol,
ul {
	padding: 0;
	margin: 20px 0 20px 30px;
}

ol ol,
ul ul {
	margin: 0 0 0 10px;
}

iframe,
embed,
object {
	max-width: 100% !important;
}

img {
	max-width: 100%;
	height: auto;
}

code {
	padding: 2px 4px;
	font-family: Consolas, monospace;
}

form {
	width: 100%;
	margin: 20px 0;
	padding: 30px;
}

textarea,
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]),
select {
 	margin: 0;
	padding: 7px 10px;
	background: #fff;
	font-style: none;
	border: 1px solid #ccc;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
	-webkit-appearance: none;
	-moz-appearance: window;
	appearance: none;
}

select {
	padding-right: 40px;
	background: #fff url(images/down-arrow.png) right center no-repeat;
}

input[type="submit"] {
	width: auto;
	margin: 10px 0 10px 0;
	padding: 10px 15px;
	font-size: 1.1em;
	text-transform: uppercase;
	border: none;
	background: none;
	cursor: pointer;
	color: #fff;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
	-webkit-appearance: none;
}

input[type="submit"]::-moz-focus-inner {
	border: 0;
}

input[type="submit"]:hover {
	color: #fff;
	text-decoration: none;
}

.screen-reader-text {
	display: none;
}


/*---------- III. Headings ----------*/

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	font-weight: 700;
	line-height: 1.3em;
}

h1 {
	margin: 5px 0 20px 0;
	font-size: 2.3em;
}

h2 {
	margin: 0 0 5px 0;
	color: #210D10;
	font-size: 1.9em;
}

h3 {
	margin: 20px 0 5px 0;
	font-size: 1.7em;
}

h4 {
	margin: 15px 0 5px 0;
	color: #777;
	font-size: 1.6em;
}

h5 {
	margin: 10px 0;
	font-size: 1.5em;
}

h6 {
	margin: 20px 0 10px 0;
	font-size: 1.3em;
	text-transform: uppercase;
}


/*---------- IV. Layout ----------*/

#container {
	position: relative;
	right: 0;
	width: 1400px;
	margin: 0 auto;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}

#wrapper {
	float: left;
	width: 100%;
	background: #fff;
}

header.side-header {
	position: relative;
	float: left;
	width: 100%;
}

#content {
	float: left;
	width: 100%;
	padding: 100px 60px 20px 60px;
	overflow: hidden;
}

footer.side-footer {
	position: relative;
	float: left;
	width: 100%;
	color: #ccc;
	border-top: 5px solid;
}


/*---------- V. Content ----------*/

.top-bar {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	transition: 0.4s;
	z-index: 2;
}

.top-bar:hover {
	top: 0 !important;
}

.top-bar-content {
	position: relative;
	width: 1400px;
	margin: 0 auto;
}

.top-bar-social {
	float: right;
	margin: 15px 0 15px 20px;
}

.top-bar-social ul {
	float: left;
	margin: 0 20px 0 0;
	text-align: right;
}

.top-bar-social li {
	float: left;
	list-style: none;
}

.top-bar-social li a span {
	width: 30px;
	height: 30px;
	font-size: 18px;
	color: #fff;
	line-height: 30px;
	border-radius: 50%;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

label.responsive-navigation-label {
	position: fixed;
	right: 20px;
	top: 15px;
	cursor: pointer;
	display: none;
	z-index: 3;
}

label.responsive-navigation-label .genericon {
	width: 30px;
	height: 30px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	line-height: 30px;
	border-radius: 50%;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	transition: 0.4s;
}

input#responsive-navigation[type=checkbox] {
	display: none;
}

nav.responsive-nav {
	display: none;
}

label.header-search {
	float: right;
	cursor: pointer;
}

label.header-search .genericon {
	width: 30px;
	height: 30px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	line-height: 30px;
	border-radius: 50%;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	transition: 0.4s;
}

input#header-search[type=checkbox] {
	display: none;
}
 
input#header-search[type=checkbox]:checked ~ #top-search {
	width: 500px;
}

#top-search {
	position: absolute;
	top: 0;
	right: 40px;
	width: 0;
	height: 60px;
	-webkit-transition: width 0.4s;
	-moz-transition: width 0.4s;
	-o-transition: width 0.4s;
	-ms-transition: width 0.4s;
	transition: width 0.4s;
	overflow: hidden;
	z-index: 9;
}

#top-search .search-form {
	position: relative;
	width: 100%;
	margin: 10px auto;
}

#top-search .search-form form {
	margin: 0;
	padding: 0;
}

#top-search .search-form #s {
	width: 100%;
	height: 40px;
	background: #fff;
	margin: 0;
	padding: 0 10px;
	font-size: 1.1em;
	line-height: 40px;
	color: #b5b5b5;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	transition: 0.4s;
}

#top-search .search-form #sb {
	position: absolute;
	right: 0;
	top: -10px;
	height: 100%;
	padding: 0 20px;
}

input#top-bar[type=checkbox] {
	display: none;
}
 
input#top-bar[type=checkbox]:checked ~ #top {
	left: 0;
}

label.top-bar {
	position: absolute;
	width: 100%;
	height: 40px;
	padding-left: 20px;
	display: none;
	cursor: pointer;
	color: #fff;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	transition: 0.4s;
	z-index: 4;
}

.logo-header {
	float: left;
	margin: 10px 20px 10px 0;
}

.logo-header img {
	height: 40px;
	width: auto;
}

.blog-info {
	width: 100%;
	display: inline-block;
	margin: 0 0 40px 0;
	padding-bottom: 30px;
	border-bottom: 1px solid #ccc;
}

.blog-info h2 {
	margin: 0;
	font-size: 2.2em;
	line-height: 1em;
}

.blog-info h6 {
	margin: 10px 0 0 0;
	font-size: 1em;
	line-height: 1em;
}


.blog-info a:hover {
	text-decoration: none;
}

li.blog-description {
	margin: 0 0 30px 0;
	list-style: none;
}

h6.blog-description-title {
	margin-top: 0;
}

.blog-description-logo {
	float: right;
	margin: 0 0 10px 10px;
}

.blog-description-logo img {
	max-width: 100px !important;
	box-shadow: 0 5px 10px #888;
	border: 3px solid #fff;
	border-radius: 3px;
	transform: rotate(4deg);
	transition: transform 0.2s ease-out, box-shadow 0.5s;
}

.blog-description-logo:hover img {
	box-shadow: 0 5px 15px #666;
	transform: scale(1.2);
}

.page .content-left,
.blog .content-left,
.archive .content-left,
.search-results .content-left {
	float: left;
	width: 70%;
}

.archive .content-left,
.search-results .content-left {
	width: 100%;
}

.page .content-right,
.blog .content-right {
	float: right;
	width: 25%;
}

.entry {
	float: left;
	width: 100%;
	margin: 0 0 40px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.entry h2 {
	margin: 0;
	font-size: 2em;
}

.entry span {
	margin-left: 5px;
	text-transform: uppercase;
}

.footer-content {
	width: 100%;
	margin: 0 auto;
	font-size: 0.9em;
}

.footer-content a {
	color: #fff;
}

.site-info {
	float: left;
	width: 100%;
	padding: 30px 60px;
	background: #222;
}

.logo-footer {
	float: left;
	margin-right: 30px;
}

.credits {
	float: left;
}

a.scroll-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	text-align: center;
	border-radius: 50%;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

a.scroll-top .genericon {
	font-size: 30px;
	line-height: 40px;
	color: #fff;
}


/*---------- VI. Navigation ----------*/

/*---------- Top-(Main-)Navigation ----------*/

nav.top-nav {
	position: relative;
	z-index: 2;
}

nav.top-nav ul {
	margin: 0;
}

nav.top-nav li {
	position: relative;
	float: left;
	list-style: none;
}

nav.top-nav li a {
	display: inline-block;
	text-transform: uppercase;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

nav.top-nav li:hover a {
        text-decoration: none;
}


/* first level navigation */

nav.top-nav > ul > li > a {
	margin: 0;
	padding: 0 30px 0 15px;
	color: #fff;
	font-size: 14px;
	line-height: 60px;
}

nav.top-nav > ul > li > a:only-child {
	padding: 0 15px;
}

nav.top-nav > ul li > a:after {
	position: absolute;
	right: 10px;
	content: '\f431';
	color: #fff;
        font: normal 16px 'Genericons';
	line-height: 60px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

nav.top-nav > ul li > a:only-child:after {
	content: '';
}

nav.top-nav > ul > li:hover a {
	color: #fff;
}


/* sub menu navigation */

nav.top-nav li ul {	
	position: absolute;
	top: -9999px;
	left: 0;
	padding: 0 5px;
	background: #fff;
	opacity: 0;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
	z-index: 1;
}

nav.top-nav li ul ul:before {
	display: none;
}

nav.top-nav li:hover ul {
	top: 60px;
	opacity: 1;
}

nav.top-nav li:hover li a {
	position: relative;
	float: left;
	width: 250px;
	padding: 10px;
	margin: 0;
	font-size: 1em;
	text-transform: none;
}

nav.top-nav li:hover li {
	margin-right: 0;
	border-bottom: 1px solid #eee;
}

nav.top-nav li:hover li:last-child {
	border-bottom: none;
}

nav.top-nav li li:hover > a {
	color: #fff;
}

nav.top-nav li li > a:after {
	position: absolute;
	right: 0;
	top: 50%;
	content: '\f501';
        font: normal .7em 'Genericons';
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

nav.top-nav li ul li ul,
nav.top-nav li:hover ul ul,
nav.top-nav li ul li:hover ul ul,
nav.top-nav li ul ul li:hover ul ul,
nav.top-nav li ul ul ul li:hover ul ul {
	top: -9999px;
	left: 250px;
	margin: 0;
	opacity: 0;
}

nav.top-nav li ul li:hover ul,
nav.top-nav li ul ul li:hover ul,
nav.top-nav li ul ul ul li:hover ul,
nav.top-nav li ul ul ul ul li:hover ul {
	top: 0;
	opacity: 1;
}



/* Footer navigation (only first level) */

nav.footer-nav {
	margin-bottom: 5px;
	font-weight: 700;
}

nav.footer-nav ul.navigation {
	width: auto;
}

nav.footer-nav ul {
	margin: 0;
}

nav.footer-nav li {
	position: relative;
	display: inline;
	list-style: none;
	text-transform: uppercase;
}

nav.footer-nav li a {
	display: inline;
	margin: 0 10px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

nav.footer-nav li:first-child a {
	margin-left: 0;
}

nav.footer-nav li:last-child span.menu-divider {
	display: none;
}


/*---------- VII. Featured-posts ----------*/

.featured {
	position: relative;
	float: left;
	width: 100%;
	margin: -40px 0 40px 0;
}

.featured.static {
	width: auto;
	margin: -40px -60px 40px -60px;
}

.featured input {
	position: relative;
}

.featured-inputs {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
}

.featured input#slider-0,
.featured input#slider-6 {
	display: none;
}

.featured-content {
	position: relative;
	left: 50%;
	float: left;
	width: 4520px;
	margin-left: -2260px;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}

.featured.static .featured-content {
	width: 100%;
	left: 0;
	margin-left: 0;
}

.featured-post {
	position: relative;
	float: left;
	width: 896px;
	margin-right: 10px;
	line-height: 0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}

.featured-post:last-child {
	margin-right: 0;
}

.featured.static .featured-content:hover .featured-post {
	opacity: 0.5;
}

.featured.static .featured-content .featured-post:hover {
	opacity: 1;
}

.featured.static .featured-post {
	width: auto;
	max-width: 25%;
	height: 150px;
	margin-right: 0;
	overflow: hidden;
}

.featured.static .featured-post#slider-nmb-1 {
	width: auto;
	max-width: 50%;
	height: 300px;
	border-right: 2px solid #fff;
}

.featured.static .featured-post#slider-nmb-2,
.featured.static .featured-post#slider-nmb-4 {
	border-right: 2px solid #fff;
}

.featured.static .featured-post#slider-nmb-2,
.featured.static .featured-post#slider-nmb-3 {
	border-bottom: 2px solid #fff;
}

.featured.static .featured-post .featured-thumbnail img {
	height: 100%;
	width: auto;
	max-width: none;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-ms-transition: 1s;
	transition: 1s;
}

.featured.static .featured-post:hover .featured-thumbnail img {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}

.featured-nav {
	display: none;
}

.featured-nav-left .genericon,
.featured-nav-right .genericon {
	position: absolute;
	top: 50%;
	left: -232px;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	font-size: 28px;
	text-align: left;
	line-height: 50px;
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
	z-index: 9;
}

.featured-nav-right .genericon {
	left: auto;
	right: -232px;
	text-align: right;
}

.featured-title {
	position: absolute;
	width: 100%;
	display: none;
	bottom: 0;
	left: 0;
	padding: 50px 20px 10px 20px;
	background: rgba(0,0,0,1);
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	line-height: 1.3em;
}

.featured.static .featured-post .featured-title {
	display: block !important;
}

.featured-title p {
	margin: 0;
	font-size: 0.8em;
	color: #fff;
}

.featured-title p a {
	color: #fff;
} 

.featured-title h5 {
	margin: 0;
	color: #fff;
}

.featured.static .featured-post .featured-title h5 {
	font-size: 18px;
}

input#slider-0:checked ~ .featured-content {
	-webkit-transform: translateX(-1812px);
	-moz-transform: translateX(-1812px);
	-o-transform: translateX(-1812px);
	-ms-transform: translateX(-1812px);
	transform: translateX(-1812px);
}

.featured-inputs input#slider-1:checked .featured-content {
	-webkit-transform: translateX(1812px);
	-moz-transform: translateX(1812px);
	-o-transform: translateX(1812px);
	-ms-transform: translateX(1812px);
	transform: translateX(1812px);
}

input#slider-2:checked ~ .featured-content {
	-webkit-transform: translateX(906px);
	-moz-transform: translateX(906px);
	-o-transform: translateX(906px);
	-ms-transform: translateX(906px);
	transform: translateX(906px);
}

input#slider-3:checked ~ .featured-content {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

input#slider-4:checked ~ .featured-content {
	-webkit-transform: translateX(-906px);
	-moz-transform: translateX(-906px);
	-o-transform: translateX(-906px);
	-ms-transform: translateX(-906px);
	transform: translateX(-906px);
}

input#slider-5:checked ~ .featured-content {
	-webkit-transform: translateX(-1812px);
	-moz-transform: translateX(-1812px);
	-o-transform: translateX(-1812px);
	-ms-transform: translateX(-1812px);
	transform: translateX(-1812px);
}

input#slider-6:checked ~ .featured-content {
	-webkit-transform: translateX(1812px);
	-moz-transform: translateX(1812px);
	-o-transform: translateX(1812px);
	-ms-transform: translateX(1812px);
	transform: translateX(1812px);
}

.featured-post#slider-nmb-3 .featured-nav,
.featured-post#slider-nmb-3 .featured-title {
	display: block;
}

input#slider-1:checked ~ .featured-content .featured-post#slider-nmb-2 .featured-nav,
input#slider-2:checked ~ .featured-content .featured-post#slider-nmb-3 .featured-nav,
input#slider-3:checked ~ .featured-content .featured-post#slider-nmb-4 .featured-nav,
input#slider-4:checked ~ .featured-content .featured-post#slider-nmb-3 .featured-nav,
input#slider-5:checked ~ .featured-content .featured-post#slider-nmb-6 .featured-nav,
input#slider-1:checked ~ .featured-content .featured-post#slider-nmb-2 .featured-title,
input#slider-2:checked ~ .featured-content .featured-post#slider-nmb-3 .featured-title,
input#slider-3:checked ~ .featured-content .featured-post#slider-nmb-4 .featured-title,
input#slider-4:checked ~ .featured-content .featured-post#slider-nmb-3 .featured-title,
input#slider-5:checked ~ .featured-content .featured-post#slider-nmb-6 .featured-title {
	display: none;
}

input#slider-6:checked ~ .featured-content .featured-post#slider-nmb-1 .featured-nav,
input#slider-0:checked ~ .featured-content .featured-post#slider-nmb-5 .featured-nav, 
input#slider-1:checked ~ .featured-content .featured-post#slider-nmb-1 .featured-nav, 
input#slider-2:checked ~ .featured-content .featured-post#slider-nmb-2 .featured-nav,
input#slider-3:checked ~ .featured-content .featured-post#slider-nmb-3 .featured-nav,
input#slider-4:checked ~ .featured-content .featured-post#slider-nmb-4 .featured-nav,
input#slider-5:checked ~ .featured-content .featured-post#slider-nmb-5 .featured-nav,
input#slider-6:checked ~ .featured-content .featured-post#slider-nmb-1 .featured-title,
input#slider-0:checked ~ .featured-content .featured-post#slider-nmb-5 .featured-title, 
input#slider-1:checked ~ .featured-content .featured-post#slider-nmb-1 .featured-title, 
input#slider-2:checked ~ .featured-content .featured-post#slider-nmb-2 .featured-title,
input#slider-3:checked ~ .featured-content .featured-post#slider-nmb-3 .featured-title,
input#slider-4:checked ~ .featured-content .featured-post#slider-nmb-4 .featured-title,
input#slider-5:checked ~ .featured-content .featured-post#slider-nmb-5 .featured-title {
	display: block;
}



/*---------- VIII. Post & Pages content ----------*/

/*---------- Declarations for all type of posts and pages ----------*/

.post {
	position: relative;
	float: left;
	width: 100%;
	margin: 0 0 20px 0;
}

.post-thumbnail {
	float: left;
	width: 100%;
	margin: 0 0 10px 0;
	background: #f7f7f7;
	text-align: center;
}

.post-entry {
	font-size: 0.9em;
}

.page-title,
.post-title {
	margin: 0 0 10px 0;
}

.post-meta {
	margin: 10px 0;
}

.post-body p, 
.post-body > img {
	margin: 10px 0;
}

pre,
blockquote {
	position: relative;
	width: 100%;
	margin: 20px auto;
	padding: 20px 80px 20px 40px;
}

pre:before,
blockquote:before {
	position: absolute;
	bottom: 20px;
	right: 20px;
	content: '\f106';
	font-family: 'Genericons';
	font-size: 42px;
	opacity: 0.3;
}

pre {
	font-family: Consolas, monospace;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap !important; 
        white-space: -pre-wrap;
        white-space: -o-pre-wrap; 
        word-wrap: break-word;
}

pre:before {
	content: '\f462';
}

a.more-link {
	float: left;
	margin-top: 10px;
	padding: 5px 15px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

a.more-link .genericon {
	font-size: 20px;
	vertical-align: middle;
}

a.more-link:hover {
	color: #fff;
	text-decoration: none;
}


/*---------- Single-posts or pages ----------*/

body.single .content-left,
body.page .content-left {
	margin-bottom: 40px;
}

.post-meta .genericon {
	margin: 0 5px 0 10px;
	font-size: 24px;
	vertical-align: middle;
}

.post-meta .genericon:first-child {
	margin-left: 0;
}

.post-share ul {
	margin: 0;
}

li.facebook,
li.twitter,
li.google,
li.pinterest {
	float: left;
	width: auto !important;
	margin-right: 10px !important;
}

body.single .post-thumbnail {
	margin: 20px 0 40px 0;
}

body.single .post-title {
	font-size: 2.1em;
}

body.single .post-body {
	margin-top: 40px;
}

.post-left {
	float: left;
	width: 70%;
}

.post-right {
	float: right;
	width: 25%;
}

.author-info {
	float: left;
	margin-top: 20px;
	padding: 30px;
}

.author-info h6 {
	margin: 0 0 10px 0;
}

.author-avatar {
	float: right;
	margin: 0 0 20px 20px;
}

.author-avatar img {
	border-radius: 50%;
}

.post-recommendation {
	float: left;
	width: 100%;
	margin: 20px 0 0 0;
	padding: 20px 60px;
	background: #efefef;
}

.post-recommendation h6 {
	margin-bottom: 20px;
}

.post-recommendation ul {
	margin: 0;
}

.post-recommendation li {
	float: left;
	width: 23.5%;
	margin: 0 2% 20px 0;
	list-style: none;
}

.post-recommendation li:nth-child(4) {
	margin-right: 0;
}

.post-recommendation h2.post-title {
	margin: 0;
	font-size: 1.4em;
}

.post-recommendation .recommendation-thumbnail {
	width: 100%;
	margin: 0 0 10px 0;
}

.post-recommendation .recommendation-thumbnail img {
	width: 100%;
	height: auto;
}

.post-recommendation a.more-link {
	display: none;
}


/*---------- Blog-posts ----------*/

.archive .post,
.search-results .post,
.blog .post {
	float: left;
	width: 48%;
	margin-right: 4%;
	height: 500px;
	display: inline-block;
}

.blog .post:nth-child(2n) {
	margin-right: 0;
}

.archive .post,
.search-results .post {
	width: 32%;
	margin-right: 2%;
}

.search-results .post:nth-child(3n),
.archive .post:nth-child(3n) {
	margin-right: 0;
}


/*---------- Sticky-posts ----------*/

.sticky h6.post-title-sticky {
	display: inline-block;
	margin: 0 0 10px 0;
	font-size: 1em;
}


/*---------- 404-Page ----------*/

.error404 .post-body:before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 0 0 -350px;
	content: '\f423';
	font-family: 'Genericons';
	font-size: 700px;
	color: #efefef;
	z-index: -1;
}

.error404 .post-body {
	position: relative;
	padding: 100px 0;
	background: #fff;
	z-index: 1;
}

.error404 .post-body form {
	position: relative;
	width: 50%;
	margin: 30px auto;
	padding: 0;
}

.error404 .post-body input.search-field {
	width: 100%;
	font-size: 1.2em;
}

.error404 .post-body input.search-submit {
	position: absolute;
	right: 0;
	top: -10px;
	height: 100%;
}


/*---------- Search-result-page ----------*/

.search-no-results .entry {
	margin-bottom: 60px;
}

.search-no-results .post-body {
	position: relative;
	padding: 100px 0 40px 0;
}

.search-no-results .post-body form {
	position: relative;
	width: 50%;
	margin: 40px auto;
	padding: 0;
}

.search-no-results .post-body input.search-field {
	width: 100%;
	font-size: 1.2em;
}

.search-no-results .post-body input.search-submit {
	position: absolute;
	right: 0;
	top: -10px;
	height: 100%;
}

.search-archive {
	float: left;
	width: 100%;
	margin: 30px 0;
}

.search-archive input[type=checkbox] {
	display: none;
}

.search-archive label {
	position: relative;
	float: left;
	width: 100%;
	cursor: pointer;
	padding: 20px 70px;
	border-bottom: 1px solid #fff;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

.search-archive label h6 {
	margin: 0;
	color: #fff;
}

.search-archive label span.genericon,
.search-archive label:before {
	position: absolute;
	content: '\f405';
	top: 50%;
	right: 20px;
	margin-top: -14px;
	font-size: 28px;
	font-family: 'Genericons';
	text-decoration: inherit;
	font-weight: normal;
	font-style: normal;
	color: #fff;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

.search-archive label:before {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.search-archive label span.genericon {
	right: auto;
	left: 20px;
	margin-top: -18px;
	padding: 4px;
	background: rgba(255,255,255,0.4);
	border-radius: 50%;
}

.search-archive ul {
	float: left;
	width: 100%;
	display: none;
	padding: 20px;
	margin: 0;
	background: #f7f7f7;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
	overflow: hidden;
}

.search-archive input[type=checkbox]:checked ~ ul {
	display: block;
}

.search-archive input[type=checkbox]:checked ~ label:before {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}
 
.search-archive li {
	float: left;
	list-style: none;
}

.search-archive a {
	display: inline-block;
	margin: 0 3px 3px 0;
	padding: 10px;
	color: #fff;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

.search-archive a:hover {
	color: #fff;
}


/*---------- Post-images and gallery ----------*/	

.post-body img,
.wp-post-image {
	max-width: 100%;
	height: auto;
}

.post-content iframe,
.post-content embed {
	margin: 20px 0;
}

img.alignnone {
	margin: 10px 20px 20px 0;
}

img.alignleft {
	float: left;
	margin: 10px 20px 20px 0;
}

img.alignright {
	float: right;
	margin: 10px 0 20px 20px;
}

img.aligncenter {
	display: block; 
	margin: 20px auto;
}

.wp-caption {
	position: relative;
	max-width: 100%;
	line-height: 0;
}

.wp-caption.aligncenter {
	display: block;
	margin: 20px auto;
}

.wp-caption.alignnone {
	margin: 10px 20px 20px 0;
}

.wp-caption.alignleft {
	float: left;
	margin: 10px 20px 20px 0;
}

.wp-caption.alignright {
	float: right;
	margin: 10px 0 20px 20px;
}

.wp-caption img {
	width: auto;
	height: auto;
	margin: 0;
	border: 0 none;
}

.wp-caption-text {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 5px 10px;
	background: rgba(255,255,255,.6);
	font-size: 0.9em;
	line-height: 1.2em;
}

.gallery {
	float: left;
	margin: 40px auto !important;
	padding: 20px 20px 0 20px;
}

.gallery .gallery-item {
	position: relative;
	float: left;
	width: 33%;
	margin: 0 0 20px 0;
}

.gallery-columns-2 .gallery-item { 
	width: 50%; 
}

.gallery-columns-3 .gallery-item { 
	width: 33.33333%; 
}

.gallery-columns-4 .gallery-item { 
	width: 25%; 
}

.gallery-columns-5 .gallery-item { 
	width: 20%; 
}

.gallery-columns-6 .gallery-item { 
	width: 16.66666%; 
}

.gallery-columns-7 .gallery-item { 
	width: 14.285714%; 
}

.gallery-columns-8 .gallery-item { 
	width: 12.5%; 
}

.gallery-columns-9 .gallery-item { 
	width: 11.11111%; 
}

.gallery-icon.landscape {
	text-align: center;
}

.gallery img {
	border: none !important;
}

.gallery img:hover {
	background: white;
}

.gallery-columns-2 .attachment-thumbnail {
	max-width: 98%;
	height: auto;
}

.gallery-columns-3 .attachment-thumbnail {
	max-width: 97%;
	height: auto;
}

.gallery-columns-4 .attachment-thumbnail {
	max-width: 96%;
	height: auto;
}

.gallery-columns-5 .attachment-thumbnail {
	max-width: 95%;
	height: auto;
}

.gallery-columns-6 .attachment-thumbnail {
	max-width: 94%;
	height: auto;
}

.gallery-columns-7 .attachment-thumbnail {
	max-width: 93%;
	height: auto;
}

.gallery-columns-8 .attachment-thumbnail {
	max-width: 92%;
	height: auto;
}

.gallery-columns-9 .attachment-thumbnail {
	max-width: 91%;
	height: auto;
}

.gallery dl, .gallery dt { 
	margin: 0; 
}

.gallery br+br { 
	display: none; 
}


/*---------- IX. Sidebar ----------*/

aside > ul,
.sidebar-area > ul {
	margin: 0;
}

.sidebar-footer {
	float: left;
	width: 100%;
	padding: 30px 60px;
	background: #333;
}

.sidebar-area {
	float: left;
	width: 22.75%;
	margin-right: 3%;
}

.sidebar-area:nth-child(4) {
	margin-right: 0;
}

h2.widgettitle {
	margin: 0 0 15px 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	font-size: 1.1em;
	text-transform: uppercase;
}

.sidebar-footer h2.widgettitle {
	color: #fff;
	border-bottom-color: #555;
}

li.widget {
	float: left;
	width: 100%;
	margin: 0 0 30px 0;
	list-style: none;
}

li.widget select {
	width: 100%;
}

li.widget:last-child {
	margin: 0;
	padding: 0;
	border: none;
}

li.widget ul {
	margin-left: 0;
}

li.widget ul li {
	position: relative;
	float: left;
	width: 100%;
	margin: 0 0 5px 0;
	padding-bottom: 5px;
	padding-left: 15px;
	list-style: none;
}

li.widget ul li:before {
	position: absolute;
	content: '\f431';
	left: -3px;
	top: -1px;
	font-family: 'Genericons';
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

li.widget.post-share ul li {
	padding-left: 0;
}

li.widget.post-share ul li:before {
	display: none;
}

li.widget ul li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

li.widget ul.children {
	width: 100%;
	margin-left: 0;
}

li.widget li > ul.children {
	padding-bottom: 5px;
}

li.widget ul.children li:last-child {
	padding: 0;
}

li.widget ul.children li:first-child {
	margin-top: 10px;
}

table#wp-calendar {
	width: 100%;
	text-align: center;
}

table#wp-calendar thead {
	background: #222;
	color: #fff;
}

table#wp-calendar tbody tr:nth-child(2n) {
	background: #efefef;
}

li.widget_search form {
	position: relative;
	padding: 0;
	margin: 0;
}

li.widget_search input.search-field {
	width: 100%;
	height: 40px;
	padding: 0 100px 0 10px;
	line-height: 40px;
	font-size: 1.2em;
}

li.widget_search input.search-submit {
	position: absolute;
	top: 0;
	right: 0;
	height: 40px;
	margin: 0;
	padding: 0 20px;
	line-height: 40px;
}


/*---------- X. Comments ----------*/

#comments {
	float: left;
	width: 100%;
	margin-top: 40px;
}

.page-template-guestbook-php #comments {
	margin-top: 30px;
}

#comments ul,
#comments ol {
	margin: 0;
}

h6.notice {
	position: relative;
	margin: 0 0 40px 0;
	padding: 20px 20px 20px 60px;
	font-size: 1.3em;
	color: #fff;
}

h6.notice:before {
	position: absolute;
	content: '\f455';
	top: 0;
	left: 0;
	height: 100%;
	padding: 20px 5px 0 5px;
	background: rgba(0,0,0,0.2);
	font-family: 'Genericons';
	font-size: 28px;
	vertical-align: middle;
}

.page-template-guestbook-php h6.notice {
	margin: 30px 0 10px 0;
}

#comments .error  { 
	color: #f00; 
}

.comment-awaiting-moderation {
	position: relative;
	margin: 10px 0 0 0 !important;
	padding: 15px 20px 15px 50px;
	font-style: normal;
	color: #fff;
	text-transform: uppercase;
}

.comment-awaiting-moderation:before {
	position: absolute;
	content: '\f455';
	top: 0;
	left: 0;
	height: 100%;
	padding: 15px 5px 0 5px;
	background: rgba(0,0,0,0.2);
	font-family: 'Genericons';
	font-size: 24px;
	vertical-align: middle;
}

.comment_approved {
	font-weight: 700;
}

.commentlist li {
	position: relative;
	float: left;
	width: 100%;
	list-style: none;
	margin-top: 30px;
}

.commentlist li:before {
	position: absolute;
	width: 0;
	height: 0;
	top: 20px;
	left: 80px;
	display: block;
	content: '';
	border-width: 10px 10px 10px 0;
	border-style: solid;
	border-color: transparent;
}

.commentlist > ul > li:first-child {
	margin-top: 20px;
}

.commentlist ul.children li > article {
	padding-left: 20px;
}

.commentlist ul.children li:before {
	left: 100px;
}

.commentlist ul.children li {
	margin-top: 10px;
}

.commentlist li .avatar {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	border: 3px solid;
}

.commentlist ul.children li .avatar {
	left: 20px;
}

.commentlist li .comment-author {
	font-size: 1.2em;
	text-transform: uppercase;
}

.commentlist li .comment-author.vcard {
	float: left;
}

li.pingback:before {
	display: none;
}

.commentlist li .comment-author cite {
	font-style: normal;
}

.commentlist li div.comment-author .says {
	display: none;
}

.commentlist li .comment-meta {
	padding: 20px 40px 0 40px;
	margin-left: 90px;
	z-index: 1;
}

li.bypostauthor > article .comment-meta {
	border-top: 5px solid;
}

li.pingback .comment-meta {
	margin-left: 0;
}

.commentlist li .comment-metadata {
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
	font-size: 0.9em;
	text-align: right;
}

span.edit-link {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid #ccc;
}

.commentlist li div.comment-meta a {
	font-size: 0.85em;
}

.comment-content {
	margin-left: 90px;
	padding: 25px 40px 30px 40px;
}

li.pingback .comment-content {
	margin-left: 0;
}

.commentlist li p {
	margin: 0 0 10px 0;
}

.pingback .reply {
	display: none;
}

.reply {
	position: relative;
}

.commentlist li #comment-respond {
	margin: 0;
}

#comments > #comment-respond {
	float: left;
	width: 100%;
	margin: 0 0 20px 0;
}

a.comment-reply-link,
a#cancel-comment-reply-link {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

a#cancel-comment-reply-link {
	bottom: auto;
	top: 0;
}

a#cancel-comment-reply-link:after,
a.comment-reply-link:after {
	position: relative;
	content: '\f467';
	font-family: 'Genericons';
	font-size: 20px;
	font-weight: 400;
	vertical-align: middle;
}

a#cancel-comment-reply-link:after {
	content: '\f405';
}

a.comment-reply-link:hover,
a#cancel-comment-reply-link:hover {
	text-decoration: none;
	color: #fff;
}

#respond {
	position: relative;
	float: left;
	width: 100%;
	margin-top: 20px;
	padding: 30px;
}

#respond h3 {
	margin: 0;
}

#respond form {
	padding: 0;
}

.page-template-guestbook-php #respond {
	margin-bottom: 40px;
}

#commentform {
	margin: 0;
}

.comment-form p {
	position: relative;
	float: left;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0;
}

.comment-form p.comment-form-author,
.comment-form p.comment-form-email,
.comment-form p.comment-form-url {
	width: 32%;
	margin-right: 2%;
}

.comment-form p.comment-form-url {
	margin-right: 0;
}

.comment-form p label {
	float: left;
	margin: 5px 0;
	text-transform: uppercase;
}

.comment-form p label small {
	margin-left: 3px;
	font-size: 0.85em;
}

.comment-form textarea,
.comment-form input {
	width: 100%;
}

.comment-form textarea {
	height: 200px;
	overflow: auto;
} 

.comment-form #submit {
	position: relative;
	float: left;
	width: auto;
	padding: 10px 15px;
}


/*---------- XI. Side-navigation ----------*/

.side-navigation {
	position: relative;
	float: left;
	width: 100%;
}

.side-navigation.post-navi {
	padding: 0 60px;
	font-size: 1.3em;
	text-align: center;
	font-weight: 700;
}

.side-navigation a p {
	margin: 0;
	font-size: 0.7em;
	text-transform: uppercase;
}

.side-navigation .nav-left a,
.side-navigation .nav-right a {
	position: relative;
	float: left;
	width: 48%;
	margin: 20px 0;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

.side-navigation .nav-left a:before,
.side-navigation .nav-right a:before {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -13px;
	content: '\f503';
        font: normal 26px 'Genericons';
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

.side-navigation .nav-right a:before {
	right: 0;
	content: '\f501';
	text-align: right;
}

.side-navigation .nav-left a:hover:before {
	left: -10px;
}

.side-navigation .nav-right a:hover:before {
	right: -10px;
}

.side-navigation .nav-right a {
	float: right;
	padding-right: 60px;
	text-align: left;
}

.side-navigation .nav-left a {
	padding-left: 60px;
	text-align: right;
}

.side-navigation a:hover {
	text-decoration: none;
}

.side-navigation .nav-links {
	margin-top: 20px;
	padding: 20px 0;
	border-top: 1px solid #ccc;
}

.side-navigation .nav-links span,
.side-navigation .nav-links a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 10px 15px;
	text-transform: uppercase;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

.side-navigation .nav-links a:hover,
.side-navigation .nav-links span.current {
	color: #fff;
}

.side-navigation .nav-links span.current {
	font-weight: 700;
}

.side-navigation .nav-links a.prev,
.side-navigation .nav-links a.next {
	position: relative;
}

.side-navigation .nav-links a.prev:before,
.side-navigation .nav-links a.next:before {
	position: absolute;
	left: 5px;
	top: 50%;
	margin-top: -8px;
	content: '\f503';
        font: normal 16px 'Genericons';
}

.side-navigation .nav-links a.next:before {
	left: auto;
	right: 5px;
	content: '\f501';
}

.side-navigation .nav-links a.prev {
	margin-right: 10px;
	padding-left: 35px;
}

.side-navigation .nav-links a.next {
	margin-left: 10px;
	padding-right: 35px;
}



/*---------- XII. Comment-navigation ----------*/

.comment-navigation {
	float: left;
	width: 100%;
	margin: 40px 0 60px 0;
	line-height: 1.3em;
}

.page-template-guestbook-php .comment-navigation {
	margin-bottom: 0;
}

.comment-navigation a {
	position: relative;
	padding: 10px 30px 10px 20px;
	color: #fff;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: all 0.2s;
}	

.comment-navigation a:hover {
	color: #fff;
	text-decoration: none;
}

.comment-navigation a:before {
	position: absolute;
	left: 5px;
	top: 50%;
	margin-top: -7px;
	content: '\f503';
        font: normal 14px 'Genericons';
}

.comment-navigation .nav-right a:before {
	left: auto;
	right: 5px;
	content: '\f501';
}

.comment-navigation .nav-left {
	float: left;
	width: 50%;
}

.comment-navigation .nav-right {
	float: right;
	width: 50%;
	text-align: right;
}

.comment-navigation .nav-left a {
	padding: 10px 20px 10px 30px;
}


/*---------- XIII. Shortcodes ----------*/

/*---------- Multiple columns ----------*/

.two-columns {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	-o-column-count: 2;
	-ms-column-count: 2;
	column-count: 2;
}

.three-columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	-o-column-count: 3;
	-ms-column-count: 3;
	column-count: 3;
}

.four-columns {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	-o-column-count: 4;
	-ms-column-count: 4;
	column-count: 4;
}

.five-columns {
	-webkit-column-count: 5;
	-moz-column-count: 5;
	-o-column-count: 5;
	-ms-column-count: 5;
	column-count: 5;
}

/*---------- Infoboxes ----------*/

.infobox {
	position: relative;
	float: left;
	width: 100%;
	margin: 20px 0;
	padding: 30px;
}

.infobox .infobox-title {
	margin-top: 0;
}

.infobox:before {
	float: right;
	margin: -10px -10px 20px 20px;
	font-family: 'Genericons';
	font-size: 64px;
	line-height: 1em;
	opacity: 0.3;
}

.infobox.yellow {
	background: #FCF6BD;
}

.infobox.orange {
	background: orange;
	color: #fff;
}

.infobox.red {
	background: #990000;
	color: #fff;
}

.infobox.blue {
	background: #1e5799;
	color: #fff;
}

.infobox.lightgray {
	background: #eee;
}

.infobox.darkgray {
	background: #444;
	color: #fff;
}

.infobox.olive {
	background: #556B2F;
	color: #fff;
}

.infobox.white {
	background: #fff;
	border: 5px solid #ccc;
}

.infobox.transparent {
	background: rgba(0,0,0,.2);
}

/*---------- Buttons ----------*/

.button a {
	display: inline-block;
	margin: 10px auto;
	padding: 10px 15px;
	font-size: 0.9em;
	color: #fff;
	line-height: 1em;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.button a:before {
	margin-right: 10px;
	-webkit-font-smoothing: antialiased;
	font: normal 1.8em 'Genericons';
	vertical-align: middle;
}

.button.big a:before {
	margin-right: 15px;
}

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

.button.left {
	float: left;
	margin-right: 10px!important;
}

.button.center {
	margin: 20px auto;
	text-align: center;
}

.button.right {
	float: right;
	margin-left: 10px!important;
}

.button.medium a {
	font-size: 1.2em;
	padding: 12px 20px;
}

.button.big a {
	font-size: 1.4em;
	padding: 15px 25px;
}

.button.yellow a {
	background: #FCF6BD;
	color: #222;
}

.button.orange a {
	background: orange;
	color: #fff;
}

.button.red a {
	background: #990000;
	color: #fff;
}

.button.blue a {
	background: #1e5799;
	color: #fff;
}

.button.lightgray a {
	background: #eee;
	color: #222;
}

.button.darkgray a {
	background: #444;
	color: #fff;
}

.button.olive a {
	background: #556B2F;
	color: #fff;
}

.button.transparent a {
	background: rgba(0,0,0,.2);
	color: #fff;
}

.button.yellow a:hover {
	background: #F9EC72;
}

.button.orange a:hover {
	background: #c79810;
}

.button.red a:hover {
	background: #cc0000;
}

.button.blue a:hover {
	background: #7270E0;
}

.button.lightgray a:hover {
	background: #ccc;
}

.button.darkgray a:hover {
	background: #666;
}

.button.olive a:hover {
	background: #627d4d;
}

.button.transparent a:hover {
	background: rgba(0,0,0,.5);
}


/*---------- XIV. Special styles for plugins ----------*/

.wpcf7 p,
.wpcf7 input[type="text"],
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100% !important;
}



/*---------- XV. Fixes for browsers or devices ----------*/

/*---------- Fix for the Internet Explorer ----------*/

a img {
	border: none;
}


/*---------- Fix for the checkbox hack on old Android-devices ----------*/

body { 
	-webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
	from { padding: 0; } 
	to { padding: 0; } 
}


/*---------- Fix for fixed-elements on iOS-devices ----------*/

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

.top-bar {
	outline: 10px solid transparent;
}

}



/*---------- XVI. Media Queries for the responsive layout ----------*/

/*---------- Generell parameters ----------*/

@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}


/*---------- for devices with less than 1400 pixel maximum-width ----------*/

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

#container,
header.side-header,
.top-bar-content {
	width: auto;
}

.top-bar {
	top: 0 !important;
}

.top-bar-content {
	padding: 0 20px;
}

#top-search {
	right: 100px;
}

.top-bar-social {
	margin-right: 40px;
}

nav.top-nav {
	display: none;
}

nav.responsive-nav {
	position: absolute;
	top: 60px;
	right: -400px;
	width: 400px;
	padding: 20px;
	display: block;
	overflow: hidden;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
	z-index: 2;
}

nav.responsive-nav h6 {
	margin-top: 0;
}

nav.responsive-nav ul {
	float: left;
	width: 100%;
	margin: 0;
}

nav.responsive-nav li {
	list-style: none;
	text-align: left;
}

nav.responsive-nav li a {
	position: relative;
	float: left;
	width: 100%;
	padding: 10px 15px;
	margin-bottom: 5px;
	color: #fff;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

nav.responsive-nav ul.sub-menu li a {
	padding-left: 30px;
}

nav.responsive-nav ul.sub-menu li a:before {
	position: absolute;
	left: 20px;
	top: 50%;
	content: '\f501';
        font: normal 10px 'Genericons';
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

label.responsive-navigation-label {
	display: block;
}

input#responsive-navigation[type=checkbox]:checked ~ nav.responsive-nav {
	right: 0;
}

input#responsive-navigation[type=checkbox]:checked ~ #container {
	right: 400px;
}


}


/*---------- for devices with less than 1024 pixel maximum-width ----------*/

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

#content {
	padding-left: 20px;
	padding-right: 20px;
}

.post-recommendation {
	padding: 20px 20px;
}

.sidebar-footer {
	padding-left: 20px;
	padding-right: 20px;
}

.sidebar-area {
	width: 100%;
	margin-right: 0;
	margin-bottom: 30px;
}

.comment-form p.comment-form-author,
.comment-form p.comment-form-email,
.comment-form p.comment-form-url {
	width: 100%;
	margin-right: 0;
}

.site-info {
	padding-left: 20px;
	padding-right: 20px;
}

.logo-footer {
	width: 100%;
	margin: 0 0 30px 0;
}

.side-navigation.post-navi {
	padding: 0 20px;
}

.side-navigation .nav-links {
	margin-top: 40px;
	text-align: center;
}


}


/*---------- for devices with less than 800 pixel maximum-width ----------*/

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

input#header-search[type=checkbox]:checked ~ #top-search {
	width: 80%;
}

.page .content-left, 
.blog .content-left, 
.archive .content-left, 
.search-results .content-left,
.page .content-right, 
.blog .content-right, 
.archive .content-right, 
.search-results .content-right,
.post-left,
.post-right {
	width: 100%;
}

.content-right {
	padding-top: 40px;
	border-top: 5px solid;
}

.archive .post,
.search-results .post {
	width: 49%;
	margin-right: 2%;
}

.search-results .post:nth-child(3n),
.archive .post:nth-child(3n) {
	margin-right: 2%;
}

.post-right {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 5px solid;
}

.search-results .post:nth-child(2n),
.archive .post:nth-child(2n) {
	margin-right: 0;
}

.post-recommendation li {
	float: left;
	width: 49%;
	margin: 0 2% 20px 0;
	list-style: none;
}

.post-recommendation li:nth-child(2n) {
	margin-right: 0;
}

.error404 .post-body form,
.search-no-results .post-body form {
	width: 100%;
}

}


/*---------- for devices with less than 700 pixel maximum-width ----------*/

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


}


/*---------- for devices with less than 600 pixel maximum-width ----------*/

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

.featured {
	display: none;
}

.top-bar-social {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 15px 10px;
}

#top-search {
	right: 60px;
}

.archive .post, 
.search-results .post, 
.blog .post {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #ccc;
}

.archive .post:last-child, 
.search-results .post:last-child, 
.blog .post:last-child {
	border-bottom: none;
}

.post-thumbnail,
.post-thumbnail img {
	width: 100%;
}

.commentlist li:before {
	display: none;
}

.commentlist li .comment-meta,
.comment-content {
	margin-left: 0;
	padding-left: 60px;
}

.commentlist ul.children li .avatar {
	left: 0;
}

.commentlist img.avatar {
	left: -10px;
	top: -5px;
	width: 60px;
	height: 60px;
	border: 5px solid #fff !important;
	box-shadow: none;
}

.side-navigation .nav-left a,
.side-navigation .nav-right a {
	width: 100%;
}

.site-info {
	padding-bottom: 80px;
	text-align: center;
}

.credits {
	max-width: 100%;
}

a.scroll-top {
	bottom: 80px;
}


}


/*---------- for devices with less than 400 pixel maximum-width ----------*/

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

nav.responsive-nav {
	width: 100%;
}

.top-bar-social ul {
	float: none;
	text-align: center;
	margin: 0;
}

.top-bar-social li {
	float: none;
	display: inline-block;
	margin-right: 10px;
}

.top-bar-social li:last-child {
	margin-right: 0;
}

#top-search {
	width: 100%;
	height: auto;
	top: 60px;
	right: 0;
	padding: 0 10px 5px 10px;
	-webkit-transition: top 0.4s;
	-moz-transition: top 0.4s;
	-o-transition: top 0.4s;
	-ms-transition: top 0.4s;
	transition: top 0.4s;
}

input#header-search[type=checkbox]:checked ~ #top-search {
	width: 100%;
	top: 0;
}

label.header-search {
	position: fixed;
	top: 15px;
	right: 20px;
}

label.responsive-navigation-label {
	top: 15px;
	left: 20px;
	right: auto;
}

.logo-header {
	float: none;
	margin: 10px 0;
	text-align: center;
}

.post-recommendation li {
	width: 100%;
	margin: 0 0 20px 0;
	padding-bottom: 20px;
	border-bottom: 1px solid #ccc;
}

.post-recommendation li:last-child {
	width: 100%;
	margin: 0;
	border-bottom: none;
}

}


/*---------- Iconlist for the shortcode-page ----------*/
/*---------- The following declarations should be deleted in the final release ----------*/


#iconlist {
	float: left;
	margin: 20px 0;
}

#iconlist div {
	position: relative;
	padding: 20px 20px 50px 20px;
	overflow: hidden;
	white-space: nowrap;
	font-size: 42px;
	line-height: 1;
	width: 42px;
	height: 42px;
	margin-right: 10px;
	margin-bottom: 10px;
	background: #333;
	color: #fff;
}

#iconlist .genericon:before {
	margin-right: 20px;
}

#iconlist .genericon:after {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 10px 5px;
	background: #3a3a3a;
	content: attr(title);
	display: block;
	font-size: 10px;
	color: #ccc;
	font-family: Consolas, monospace;
	text-align: center;
	white-space: normal;
}

#iconlist *,
#iconlist *:before,
#iconlist *:after {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
}


/*---------- End of style.css ----------*/