/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

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

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

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

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

/*
 * A better looking default horizontal rule
 */

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

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

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

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* algemene styles eerst */

html {
	height: 100%;	
	background-color: #4D4D4D; 
}

body {	
	min-height: 100%;
}

body {
	color: #060606; 
	background-color: #4D4D4D; 
	text-align: center;
	margin: 0;
}
a { 
	text-decoration:none;
	color: #d68505;
}
a:hover {
	text-decoration:underline;
	color: #d68505;
}
h1 {
	padding:0;
	margin:0;
	color:#d68505;
}
h2 {
	padding:0;
	margin:0;
	color:#d68505;
}
#wrapper {
	padding: 0px; 
	margin: 0px auto; 
	text-align: left;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
#header {
	clear:both;
}

#menu {
	color: #d68505;
	text-align:center;
}
#menu ul {
	padding:0;
	margin: 0;
}
#menu li {
	list-style: none;
	display: inline-block;
	white-space: nowrap;	
}

#menu a {
	color: #fff;
	text-decoration:none;
	text-transform:uppercase;
}
#menu a:hover, #menu a.selected {
	color: #d68505;
}

#menu a.selected {
	font-weight: bold;
}

#onder {
	background-image:url(../images/bg_onder.png);
	background-repeat:repeat-y;	
}
#links, rechts {
	float: left;
}


#credits a { font-size:9px; color:#999;}
.decredits {line-height:15px; text-align:left; background-color:#f0ede8; padding:10px; border:#999 1px dotted; font-size:10px;}
.decredits a  {
	text-decoration:none;
	color:#d68505;
	font-size:10px;
}
.decredits a:hover {
	text-decoration:underline;
}
.palatino { font-family:"Palatino Linotype", Palatino, "Book Antiqua",  serif; font-style:italic; font-size: 13px }

#box {
	display:none;
}

#wrapper nav#menu a#menu-icon {
    display: none;
    width: 100%	;
    height: 40px;
    background: transparent url(../images/menu-icon.png) left top;
    background-repeat: no-repeat;
    text-align: left;
}

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}

#links .textwidget {
	max-width: 75%;
}

caption {
    caption-side: bottom;
    font-size: small;
} 

/****************/
/* mobile first */
/****************/

@media only screen and (max-width: 770px) { 
	
	body, p, td {
		font-size : small;
		-webkit-text-size-adjust: none;
		line-height: 1.5;
	}
	
	h1 {
		margin-top: 12px;
		font-size: medium;
	}
	
	#wrapper, #header, #onder, #links, #rechts {
		float: left;
		width: 100%;
		padding:0;
		margin: 0;
	}
	
	#header {
		background-size: cover;
		margin-top:  42px;
	}
	
	#header.home {
		background-image:url(../images/bgm_home.png);
	}
	#header.publicaties {
			background-image:url(../images/bgm_publicaties.png);
	}
	#header.audio {
			background-image:url(../images/bgm_audio.png);
	}
	#header.vogelwater {
			background-image:url(../images/bgm_vogelwater.png);
	}
	#header.annabijnsstichting{
			background-image:url(../images/bgm_annabijnsstichting.png);
	}
	#header.chrjvangeel{
			background-image:url(../images/bgm_chrjvangeel.png);
	}
	#header.amyclampitt{
			background-image:url(../images/bgm_amyclampitt.png);
	}
	#header.emmens{
			background-image:url(../images/bgm_emmens.png);
	}
	#header.bibeb{
			background-image:url(../images/bgm_bibeb.png);
	}
	#header.levenenwerk{
			background-image:url(../images/bgm_levenenwerk.png);
	}
	#header.blog{
			background-image:url(../images/bgm_blog.png);
	}
	#header.contact{
			background-image:url(../images/bgm_contact.png);
	}
	#header.anderling{
			background-image:url(../images/bgm_anderling.png);
	}
	#header.rock{
			background-image:url(../images/bgm_rock.png);
	}

	#menu {
		position: fixed;
		background: #ccc;
		width: 100%;
		height: 40px;
		top: 0;
		left: 0;
		border-bottom: 2px solid #888;
		z-index: 100;
	}
	
	#wrapper nav#menu a#menu-icon {
        display:inline-block;
		float:left;
		color: #fff;
    }
    
    #wrapper nav#menu a:hover#menu-icon {
		color: #fff;
    }
    
    #wrapper nav#menu a#menu-icon span.wit {
	    display: inline-block;
        margin-left: 60px;
        font-size: 18px;
        font-weight: bold;
        margin-top: 6px;
    }
	
	nav ul, nav:active ul { 
        display: none;
        position: absolute;
        padding: 10px;
        background: #fff;
        border: 1px solid #ccc;
        left: 0px;
        top: 40px;
        width: 60%;
        border-radius: 4px 0 4px 4px;
    }

    nav li {
        text-align: left;
        width: 100%;
        padding: 10px;
		font-size:medium;
        margin: 0;
        border: none;
    }
	
	nav li a {
		text-decoration:none;
		color: #333;
	}

    nav:hover ul {
        display: block;
    }
    
    #menu li {
		border-left: none;
		padding: 0 0 0 7px;
		line-height: 1.6;
		letter-spacing: 1.7px;	
	}
	
	#menu li.last {
		border-right: none;
	}
	
	#menu li.nieuws{
		margin-top: auto;
	} 
	
	#menu a {
		color: #333;
		font-size: 11px;
	}
	   
	img {
		width:100%;
		height: auto;
	} 
	
	img.noscale {
		width: auto;
		height: auto;
	}  
	
	.caption {
		padding: 0 2%;
		width: 96%;
	}
	
	#rechts {
		background-color: #efede8
	}
	
	#rechts p,
	#rechts h1 {
		width: 96%;
		padding: 0 2%;
	}
	.onlymob {
		display: inline-block;
	}
	.nomobile {
		display: none;
	}
	
	/* mob WP pagina's */
	links ul {
		margin-left: 2%;
		padding-left: 0;
	}
	li {
		list-style: none;
		margin-left: 2%;
		overflow: hidden;
	}
		
	li  ul 
	{
		margin-left: 0;
		padding-left: 0;
	}  
}


/****************/
/* desktop + iPad 3 & 4 portrait en iPhone 6 landscape last */
/****************/

@media only screen and (min-width: 771px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2),only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)

 { 
	 
	body {
		font:11px/16px  Arial, Helvetica, sans-serif;
	}

	h1 {
		font-size: 12px;
	}
	h2 {
		font-size: 11px;
	}
	#wrapper { 
		width: 964px;
		min-height: 640px;
		padding-bottom: 10px;
		margin-bottom: 20px;
		clear: both;
		display: block;
	}
	#header {
		height: 210px;
		padding-top: 154px;
		padding-left: 54px;
		padding-left: 38px;
		width:910px;
		width:926px;
	}
	#header.home {
			background-image:url(../images/bg_home.png);
	}
	#header.publicaties {
			background-image:url(../images/bg_publicaties.png);
	}
	#header.audio {
			background-image:url(../images/bg_audio.png);
	}
	#header.vogelwater {
			background-image:url(../images/bg_vogelwater.png);
	}
	#header.annabijnsstichting{
			background-image:url(../images/bg_annabijnsstichting.png);
	}
	#header.chrjvangeel{
			background-image:url(../images/bg_chrjvangeel.png);
	}
	#header.amyclampitt{
			background-image:url(../images/bg_amyclampitt.png);
	}
	#header.emmens{
			background-image:url(../images/bg_emmens.png);
	}
	#header.bibeb{
			background-image:url(../images/bg_bibeb.png);
	}
	#header.levenenwerk{
			background-image:url(../images/bg_levenenwerk.png);
	}
	#header.blog{
			background-image:url(../images/bg_blog.png);
	}
	#header.contact{
			background-image:url(../images/bg_contact.png);
	}
	#header.anderling{
			background-image:url(../images/bg_anderling.png);
	}
	#header.rock{
			background-image:url(../images/bg_rock.png);
	}
	#menu {
		width: 315px;
		width: 345px;
	}
	#menu ul {
		padding:0;
		margin: 0;
	}
	#menu li {
		border-left: #d68505 1px solid;
		padding: 0 7px;
		line-height: 1.1;
		letter-spacing: 2.7px;	
	}
	
	#menu li.last {
		border-right: #d68505 1px solid;
	}
	
	#menu li.nieuws{
		margin-top: 16px;
	} 
	
	#menu a {
		font-size: 9px;
	}

	#onder {
		width: 964px;
		min-height: 300px;
		background-image:url(../images/bg_onder.png);
		background-repeat:repeat-y;	
	}
	#links {
		width: 395px;
		padding-left: 25px;
		padding-top:12px;
	}
	#links p { font-size:9px;}
	#links em { font-size:9px;}
	#links p em { font-size:9px;}
	#rechts {
		width: 395px;
		padding-top:18px;
		float: left;
		padding-bottom: 20px;
	}
	.onlymob {
		display: none;
	}
	.nomobile {
		display: inline-block;
	}
	
	/* voor blog */
	
	h3.widget-title { font-size:11px; font-weight:normal; color: #d68505;}
	#primary,
	#secondary {
		width: 380px;
		padding-left:35px;
	}
	
	#content, #container {padding:0; margin:0; width: 515px;float:left;}
	#content { 	padding-top:18px; }
	#content.archive { width: 380px; }
	#content.category { width: 380px; }
	div#wrapper div#onder div#container div#content div.entry-content, div#wrapper div#onder div#container div#content div.entry-content p {line-height:18px;}
	div#wrapper div#onder div#container div#content div.entry-content div.wp-caption { background-color:transparent;}
	div#wrapper div#onder div#container div#content div.entry-content p.wp-caption-text { text-align:left;font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif; font-size:11px;} 
	ul, li, ul li, ul li ul li {
		list-style-type: none;
		list-style-image: none;
		margin-bottom: 15px;
		padding: 0;
		margin: 0;
		}
	
	/* primary sidebar */
	div#primary ul.xoxo li ul{
		padding: 0;
		margin: 0;
	}
	div#primary #searchform {
		margin: 10px auto;
		padding: 5px 0px 5px 0px;
		text-align: left;
		}
	div#primary #searchform #s {
		width: 100px;
		border: #ccc 1px solid;
		padding: 2px;
		background-color:#FFF;
		}
	div#primary #searchsubmit {
		padding: 1px;
		border:#999 1px solid;
		background-color:#CCC;
		font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px;	
	}
	div#primary a, div#primary a:visited, #content a,  #content a:visited {
		color: #4e728b;
		text-decoration:none;
	}
	div#primary a:hover, #content a:hover {
		color:#4e728b;
		text-decoration:underline;
	}
	
	/* secondary sidebar */
	div#secondary {
		padding-top: 5px;
	}
	div#secondary ul.xoxo li ul {
		padding: 0;
		margin: 0;
	}
	
	div#onder div#container.vogelwater div#links div#secondary.widget-area ul.xoxo li h3.widget-title {
		font-size:12px;
	}
	div#secondary a, div#secondary a:visited {
		color: #4e728b;
		text-decoration:none;
	}
	div#secondary a:hover {
		color:#4e728b;
		text-decoration:underline;
	}
	
	/* link kleuren linker kolom blog type pagina's */
	
	/* van geel */
	div#links div.widget-area ul.xoxo.vangeel div li.widget-container ul li.page_item a, 
	div#links div.widget-area ul.xoxo.vangeel div li.widget-container ul li.page_item a:visited {
		color: #4d200e;	
	}
	/* vogelwater */
	div#links div.widget-area ul.xoxo.vogelwater div li.widget-container ul li.page_item a, 
	div#links div.widget-area ul.xoxo.vogelwater div li.widget-container ul li.page_item a:visited {	
		color: #384126;
	}
	/* leven en werk */
	div#links div.widget-area ul.xoxo.levenenwerk div li.widget-container ul li.page_item a, 
	div#links div.widget-area ul.xoxo.levenenwerk div li.widget-container ul li.page_item a:visited {	
		color: #6c5b51;
	}
	/* nieuws */
	div#links div.widget-area ul.xoxo.nieuws div li.widget-container div.textwidget a, 
	div#links div.widget-area ul.xoxo.nieuws div li.widget-container div.textwidget a:visited {	
		color: #625d52;
		text-decoration:underline;
	}
	
	div#links div.widget-area ul.xoxo.vangeel div li.widget-container ul li.page_item a:hover,
	div#links div.widget-area ul.xoxo.vogelwater div li.widget-container ul li.page_item a:hover,
	div#links div.widget-area ul.xoxo.levenenwerk div li.widget-container ul li.page_item a:hover,
	div#links div.widget-area ul.xoxo.nieuws div li.widget-container div.textwidget a:hover  {
		color: #d68505;	
	}
	
	
	
	
	/* respond form */
	div#onder div#container div#content div#comments div#respond h3#reply-title { font-size:12px; font-weight:bold; color: #666;}
	div#onder div#container div#content div#comments div#respond form#commentform  label {display:block; float:left; width: 70px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px; font-weight:normal;  }
	div#onder div#container div#content div#comments div#respond form#commentform span.required {float:right; }
	div#onder div#container div#content div#comments div#respond input#submit { border:#333 1px solid; background-color:#CCC; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px; margin-left: 70px;}
	div#onder div#container div#content div#comments div#respond input#author { width: 300px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px; margin-bottom:3px; }
	div#onder div#container div#content div#comments div#respond input#email { width: 300px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px; margin-bottom:3px; }
	div#onder div#container div#content div#comments div#respond input#url { width: 300px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px; margin-bottom:3px; } 
	div#onder div#container div#content div#comments div#respond form#commentform textarea#comment { width: 300px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px; }
	
	div#onder div#container div#content div#comments div#waci-comment-form-156.waci-comment-form div#respond form#commentform textarea.waci_comment { width: 300px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px; margin-left: 70px; }
	#respond textarea { width: 300px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px; margin-left: 70px; }
	
	
	div#onder div#container div#content div#comments div#respond form#commentform p.comment-form-comment textarea#comment {  margin-left: 0px; }
	
	div#onder div#container div#content h1.entry-title { font-size:12px; font-weight:bold; color: #666;}
	div#onder div#container div#content div#comments h3#comments-title { font-size:11px; font-weight:normal; color: #666; padding-bottom: 4px; margin-bottom:0;}
	div#onder div#container div#content div#comments h3#comments-title em { font-size:11px; font-weight:normal; color: #666; font-style:normal;}
	div#onder div#container div#content.archive h1.page-title span {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px; font-weight:normal;  }
	div#onder div#container div#content div#comments ol.commentlist li div.comment-meta {padding-bottom:0; margin-bottom:0;}
	div#onder div#container div#content div#comments ol.commentlist li div.comment-author img.avatar { display:none }
	
	div#onder div#container div#content div#comments ol.commentlist li{
		padding: 0;
		margin: 0;
	}
	div#onder div#container div#content div#comments ol.commentlist{
		padding: 0;
		margin: 0;
	}
	
	/* archief */
	div#onder div#container div#content.archive div.entry-summary p,
	div#onder div#container div#content.category div.entry-summary p {line-height: 16px; }
	div#onder div#container div#content.archive h1.page-title,
	div#onder div#container div#content.category h1.page-title { font-size:12px; margin-bottom: 8px; color:#D68505 }
	div#onder div#container div#content.archive h1.page-title span,
	div#onder div#container div#content.category h1.page-title span {font-size:11px; color:#D68505}
	div#onder div#container div#content.archive div,
	div#onder div#container div#content.category div {margin-bottom:16px;}
	div#onder div#container div#content.archive div.entry-meta,
	div#onder div#container div#content.category div.entry-meta {margin-bottom:0px;}
	div#onder div#container div#content.archive div.entry-summary,
	div#onder div#container div#content.category div.entry-summary {padding-top: 2px;margin-bottom:0px;}
	div#onder div#container div#content.archive div.entry-summary p,
	div#onder div#container div#content.category div.entry-summary p {margin-bottom:0px;}
	div#onder div#container div#content.archive div.entry-summary p a,
	div#onder div#container div#content.category div.entry-summary p a {display:block; clear:both; margin-top: 4px;}
	div#onder div#container div#content.archive div h2.entry-title,
	div#onder div#container div#content.category div h2.entry-title {margin-bottom:0px; line-height: 16px;}
	div#onder div#container div#content.archive div.entry-utility,
	div#onder div#container div#content.category div.entry-utility {padding-bottom: 10px; }
	
	/* comments */
	div#onder div#container div#content div#comments div.ajax-comments-wrapper div.ajax-comment div.ajax-comment-header {padding-top:5px; padding-bottom:5px;}
	div#onder div#container div#content div#comments div.ajax-comments-wrapper div.ajax-comment div.ajax-comment-header span.ajax-comment-author a.url { padding-top:3px; padding-bottom:3px;}
	
	/* vogelwater pagina blog */
	
	div#onder div#container.vogelwater {width:964px;}
	div#onder div#container div#rechts.vogelwater { width:450px;  } 
	div#onder div#container div#rechts div#post-2.post-2 div.entry-content img { width: 450px;}
	
	div#onder div#container.vogelwater div#rechts div.entry-content div.shareinpost {display: none;}
	
	/* twitter */
	div#onder div#primary.widget-area ul.xoxo li.widget_twitter { width: 200px; }
	div#onder div#primary.widget-area ul.xoxo li ul.tweets li {padding-bottom: 8px;}
	div#onder div#primary.widget-area ul.xoxo li.widget_twitter h3.widget-title a { color:#D68505; font-size:11px;}
	
	/* standaard navigatie */
	div#onder div#container div#content div#nav-below {display: none;}
	
	/* alle cursief in de postings in de Palatino */
	div#onder div#container div#content div div.entry-content em { font-family:"Palatino Linotype", Palatino, "Book Antiqua",  serif; font-style:italic; font-size: 12px }
	
	div#onder div#container div#content div h1.entry-title {font-style:normal; font-weight:normal; color: #D68505; font-size:12px; }
	
	.vvqbox {
	    display: inline;
	    margin-bottom: 20px;
	    margin-left: 0;
	    margin-right: 0;
	    margin-top: 20px;
	    max-width: 100%;
	    visibility: visible !important;
	}
	
	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}
	
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	div#onder.blog div#container.video { width:940px;}
	html body.page div#wrapper div#onder.blog div#container.video div#rechts.cvg div#post-849.post-849 div.entry-content div.shareinpost {display:none;} 
	
	div#tertiary.widget-area ul.xoxo li#pages-5.widget-container ul {padding-left:0; margin-left:0;}
	
	div#fourth.widget-area ul.xoxo li#pages-6.widget-container ul {padding-left:0; margin-left:0;}
	
	div#fourth.widget-area ul.xoxo li#pages-6.widget-container h3.widget-title { display:none;} 
	
	div#secondary.widget-area ul.xoxo div li.widget-container ul li.page_item a {
		color: #a2261a;
	}
	
	div#links div.widget-area ul.xoxo.vangeel div li.widget-container ul li.current_page_item a, 
	div#links div.widget-area ul.xoxo.rock div li.widget-container ul li.current_page_item a {
		color: #D68505 !important;
	}
	div#links div.widget-area ul.xoxo.vangeel div li.widget-container ul li.current_page_item ul.children li.page_item a {
		color: #4D200E !important;
	}
	div#links div.widget-area ul.xoxo.rock div li.widget-container ul li.current_page_item ul.children li.page_item a {
		color: #A2261A !important;
	}


}


/* iPhone 6 landscpae */

@media only screen  and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { 

	#links {
		position: absolute;
			
	}
}

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

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

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

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

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

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

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

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}