/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * 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 {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * 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 audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

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

/*
 * Remove default fieldset styles.
 */

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

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

textarea {
  resize: vertical;
}

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


html
{
	box-sizing: border-box;
	height: 100%;
	font-size: 120%;
}

*, *:before, *:after
{
	box-sizing: inherit;
}

/*
#ECECEC
#878585
#666666
*/

:root {
  --red: #d31b4d;
  --textgrey: #444444;
}

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

p.alert
{
	border: 10px solid hsla(120,100%,50%,1.00);
	padding: 2rem;
	border-radius: 0.25rem;
	background: hsla(120,100%,90%,1.00);
	color: rgba(0,138,35,1.00);
	box-shadow: 3px 3px 5px 0px hsla(120,100%,10%,1.00);
	font-weight: 600;
	text-transform: uppercase;
	transform: rotate(-3deg);
	margin: 3rem 0;
}


body
{
	margin: 0;
	padding: 0;
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	background-color: #fff;
	color: #444;
	line-height: 1.7;
	/*
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
	*/
}

a:link {color: #2071AC;}
a:visited {color: #288DD7;}

h1:first-child {margin-top: 0;}
p:last-child {margin-bottom: 0;}

.inner
{
	max-width: 55rem;
	margin: 0 auto;
}


header
{
	border-bottom: 1px solid #ececec;
}

main
{
	background-image: url("../img/background.jpg");
	background-color: #ececec;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	margin-top: 70px;
	padding: 2rem 5% 0;
}

@media only screen and (max-width: 800px)
{
	main
	{
		background-image: none;
		padding: 2rem 0 0;
	}
}




/* -------------------------------------------------------------------------*/
/* Business cards on page "Über uns"	*/
/* -------------------------------------------------------------------------*/
/*
.bcard
{
	display: flex;
	flex-direction: row;
	margin-top: 2rem;
	margin-bottom: 4rem;
	width: 100%;
	border-top: 1px solid #ccc;
	padding-top: 2rem;
}

.bcard:first-of-type
{
	margin-top: 2rem;
}

.bcard:nth-of-type(even)
{
	flex-direction: row-reverse;
}

.bcard figure
{
	margin: 0;
	width: 250px;
	padding-top: 0.5rem;
	padding-right: 1rem;
}

.bcard:nth-of-type(even) figure
{
	padding-right: 0; padding-left: 1rem;
}

.bcard div
{
	width: 75%;
}

.bcard h3 {margin-top: 0; margin-bottom: 0;}
.bcard p {margin-top: 0; margin-bottom: 0;}
.bcard .largeline {line-height: 2.4rem;}
*/


@media only screen and (max-width: 480px)
{
	.bcard
	{
		flex-direction: column;
		border: none;
	}
	.bcard:nth-of-type(even)
	{
		flex-direction: column;
	}
	.bcard figure
	{
		margin-bottom: 1rem;
		width: auto;
		padding: 0!important;
	}
}
/* -------------------------------------------------------------------------*/





.container { position: relative; width: 960px; margin: 0 auto; padding: 0; margin-top: 100px; }
@media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } }
@media only screen and (max-width: 767px) { .container { width: 300px; } }
@media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } }

h1 {color: #D31B4D; font-weight: 600; line-height: 1.3;}
h2 {color: #D31B4D; font-weight: 500; line-height: 1.3;}
h3 {font-weight: 500; margin-bottom: 0.5rem;}
h4 {}

.collapse-bottom {margin-bottom: 0;}
.collapse-top {margin-top: 0;}

	section
	{
		background-color: rgba(255,255,255,0.8);
		padding: 3rem 3rem 2rem 3rem;
		border: 1px solid rgba(0,0,0,0.2);
		margin-bottom: 2rem!important;
		max-width: 1200px;
	}

@media only screen and (max-width: 640px)
{
	section
	{
		padding: 2rem 1rem;
	}
	
}

@media screen and (min-width:320px) and (max-width:480px)
{
	/*Style Declarations For This Width Range */
}



.anschrift {display: flex; margin-bottom: 3rem;}
.anschrift div {flex-grow: 2;}
.anschrift figure {width: 40%; flex-grow: 1; margin-right: 0; max-width: 200px;}

@media only screen and (max-width: 480px)
{
	.anschrift
	{
		flex-direction: column;
		border: none;
	}
	.anschrift figure
	{
		margin-left: 0;
	}
}

	
	
	

	
	.flexcontainer-header
	{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: flex-start;
	align-content: stretch;
}
	
	footer {background-color: #D31B4D; color: #fff;}
	footer nav {padding: 0 1rem; display: flex; justify-content: space-between;}
	footer ul {margin: 0; padding: 1rem 0; list-style: none;}
	footer li {display: inline-block; margin-right: 1rem;}
	
	footer a {color: #fff !important; text-decoration: none;}
	footer a:hover {text-decoration: underline;}
	footer a:visited {color: #fff; text-decoration: none;}
	
	.copyright {padding: 1rem; font-weight: 200; text-align: right;}
	
	
	@media only screen and (max-width: 320px)
{
	footer li {display: block; margin-right: 0rem;}
	footer ul {padding-left: 2rem;}
	main {background-image: none;}
	section {border: none; padding-top: 1rem;}
	
}



a.button
{
	margin: 2rem auto 0 auto;
	display: block;
	width: 220px;
	line-height: 50px;
	text-align: center;
	height: 50px;
	border: none;
	outline: none;
	color: #fff;
	background: #D31B4D;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 0.25rem;
	text-decoration: none;
	transition: box-shadow .3s;
	/*
	transition: font-weight 0.3s;
	*/
}

a.button.align-to-left {display: inline-block; width: auto; padding: 0 1rem; margin: 0.5rem auto 2rem auto;}
a.button.align-to-left.small {padding: 0.4rem 0.8rem; line-height: 1; height: auto;}


a.button:hover
{
	  box-shadow: 2px 2px 10px rgba(146,27,77,.8);
	  font-weight: 400;
}

a.button.long {width: 18rem;}


a.word
{
	padding-left: 1.7rem;
	background-image: url("../img/icon-word.svg");
	background-repeat: no-repeat;
}

/* -------------------------------------------------------------------------*/
/* css list with number circle background -------------- */
/* -------------------------------------------------------------------------*/
.numberlist
{
	width: 80%;
	margin: 3rem auto 4rem auto;
	display: block;
	counter-reset: li;
	list-style: none;
	padding: 0;
}

.numberlist li
{
	position: relative;
	display: block;
	padding: .8em .4em .8em 1.8rem;
	*padding: .4em;
	margin: .5em 0;
	border: 2px solid #D31B4D;
	color: #444;
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	margin-bottom: 1rem;
}

.numberlist li:before
{
	content: counter(li);
	counter-increment: li;
	position: absolute;	
	left: -1.3em;
	top: 50%;
	margin-top: -1.3em;
	background: #D31B4D;
	height: 2.5rem;
	width: 2.5rem;
	line-height: 2em;
	border: .3em solid #fff;
	text-align: center;
	font-weight: bold;
	-moz-border-radius: 2em;
	-webkit-border-radius: 2em;
	border-radius: 2em;
	color:#FFF;
}

/* End css list with numeber circle background -------------- */



/* -------------------------------------------------------------------------*/
/* Accordion "offene Stellen"	*/
/* -------------------------------------------------------------------------*/

/* Styling */
.bezeichnung {font-weight: 500;}
.frist {font-size: 90%;}

.accordion
{
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 0.75rem;
	width: 100%;
	text-align: left;
	outline: none;
	transition: 0.4s;
	margin: 0.25rem 0;
	border: 1px solid #ccc;
	line-height: 1.4;
}

.panel {
  padding: 0 1rem;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-bottom: 0rem;
}

.panel h4
{
	margin: 0.5rem 0;
}

.panel ul
{
	margin: 0;
}

.panel ul {padding-left: 1.3rem;}

.panel-end {height: 3rem;}

.accordion-active, .accordion:hover
{
	border: 1px solid #D31B4D;
}

.accordion-active
{
	background-color: #D31B4D;
	color: white;
}

.accordion:after
{
	content: '\002B';
	color: #ffffff;
	background-color: #D31B4D;
	font-weight: normal;
	float: right;
	margin-left: 5px;
	line-height: 1;
	padding: 0 0.3rem 0.1rem;
	border-radius: 0.3rem;
}

.accordion-active:after
{
	content: "\2212";
	color: white;
}

/* -------------------------------------------------------------------------*/
/* Glow on hover */
/* -------------------------------------------------------------------------*/
.glow-on-hover {
margin: 2rem auto 0 auto;;
display: block;
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #D31B4D;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #D31B4D;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* -------------------------------------------------------------------------*/
/*	JavaScript warning	*/
/* -------------------------------------------------------------------------*/
/*
div.no-js, div.js {display: none; line-height: 1.2; font-weight: normal;}
html.no-js div.no-js {display: block;}
html.js div.js {display: block;}
*/

div.no-js, div.js {visibility: hidden; line-height: 1.2; font-weight: normal;}
html.no-js div.no-js {visibility: visible}
html.js div.js {visibility: visible;}



.attention {height: 20px; max-height: 20px; display: inline-block; margin: 0 10px;}

.noscript
{
	background-color: rgba(191,0,0,1.00);
	color: white;
	text-align: center;
	padding: 0.25rem 1rem;
	margin: 0 auto;
}

.noscript a,
.noscript a:visited
{
	color: white;
}

	
/* -------------------------------------------------------------------------*/
/* Footer push */
/* -------------------------------------------------------------------------*/
header,
footer	{-webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none;}
body 
{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	height:100%;
}

main
{
	-webkit-box-flex:1;
	-webkit-flex:1 0 auto;
	-ms-flex:1 0 auto;
	flex:1 0 auto;
	width:100%;
}
/* -------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------*/

#cookiebanner
{
	/*
	background-color: rgba(255,206,0,0.3);
	color: black;
	border-bottom: 1px solid rgba(255,206,0,1);
	*/

	/*
	position: fixed;
	z-index: 100;
	*/

	width: 100%;
	background-color: rgba(130,130,130,1.00);
	color: white;
	
	
	font-size: 14px;
	font-weight: 200;
	padding: 0.25rem 1rem;
	text-align: center;
}

#cookiebanner a,
#cookiebanner a:visited {color: white;}

/* Hide "Mehr" link on the page, that the link is leading to */
.datenschutz #cookiebanner a:first-of-type
{
	display: none;
}

@media only screen and (max-width: 480px)
{
	#cookiebanner span {display: block;}
}


/* -------------------------------------------------------------------------*/
/* Forms	*/
/* -------------------------------------------------------------------------*/

form ul {margin: 0; padding: 0; list-style: none;}
form li {margin-bottom: 1rem;}
label {display: block;}
input[type=text],
input[type=email],
textarea
{
	border: 1px solid #ccc; width: 100%;
	padding: 0.4rem 0.5rem;
	border-radius: 0.25rem;
}

textarea {height: 10rem;}

input:read-only
{
	pointer-events: none;
	background-color: rgba(200,200,200,0.1);
	border-style: solid;
	background-image: url("../img/lock-locked.svg");
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: right center;
}

input:readonly svg {fill: red;}

.newsletter-subscribe form
{
	display: inline-block;
	border: 1px solid #D31B4D;
	border-radius: 0.25rem;
	padding: 1rem 1rem;
	margin-bottom: 2rem;
}

.newsletter-subscribe label {margin-right: 0.5rem;}
.newsletter-subscribe input[type=email] {border: 1px solid #ccc; width: 14rem; padding: 0.15rem; border-radius: 0.25rem;}
.newsletter-subscribe button {}
	
button {
  border: 0;
  border-radius: 0.25rem;
  background: #D31B4D;
  color: white;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  margin: 0.25rem;
  cursor: pointer;
}

.hp {display: none;}


@media only screen and (max-width: 768px)
{
	.newsletter-subscribe label {display: block;}
	.newsletter-subscribe input[type=email] {display: block;}
	.newsletter-subscribe button {display: block; margin-left: 0;}
}

/* -------------------------------------------------------------------------*/
/* confirmation messages */
/* -------------------------------------------------------------------------*/
.message	{border: 2px solid #666; padding: 0.5rem 1em 1em 100px; margin: 1em auto; min-height: 85px; font-weight: bold; border-radius: 0.3rem; font-size: 100%; display: flex; align-items: center;}
.ok		{border-color: #6DB800; color: #6DB800; background: rgba(109,184,0,0.1) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzYgMzYiPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBmaWxsPSIjMjY4ZTA1IiBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Im0xMSAyMGw1LjMgNS4zIDkuOS0xNSIvPjwvZz48L3N2Zz4=') 10px 10px no-repeat; background-size: 60px 60px;}
.error	{border-color: #cc0000; color: #cc0000; background: #ffdcdc url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzYgMzYiPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBmaWxsPSIjYzAwIiBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiPjxwYXRoIGQ9Ik0gMjUuOCwxMC4yIDkuNSwyNi41Ii8+PHBhdGggZD0ibTEwLjEgMTAuMWwxNi40IDE2LjQiLz48L2c+PC9nPjwvc3ZnPg==') 10px 10px  no-repeat; background-size: 60px 60px;}
.warning	{border-color: #ff9900; color: #ff9900; background: #ffedd2 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzYgMzYiPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBmaWxsPSIjZjkwIiBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Im0xOCA0LjV2MTkiLz48Y2lyY2xlIGZpbGw9IiNmZmYiIGN4PSIxOCIgY3k9IjI5IiByPSIyIi8+PC9nPjwvc3ZnPg==') 10px 10px no-repeat; background-size: 60px 60px;}
.comment	{border-color: #00d1ff; color: #00d1ff; background: #d4f7ff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzYgMzYiPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZmlsbD0iIzAwZDFmZiIgZD0iTTAsMThDMCw4LjEsOC4xLDAsMTgsMHMxOCw4LjEsMTgsMThzLTguMSwxOC0xOCwxOFMwLDI3LjksMCwxOHoiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Im04LjggMTcuN2gxOCIvPjwvZz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiPjxwYXRoIGQ9Im0xOC44IDkuN2w4IDgiLz48cGF0aCBkPSJtMjYuOCAxNy43bC04IDgiLz48L2c+PC9zdmc+') 10px center no-repeat; background-size: 60px 60px;}

.message p {margin-top: 0;}
.message div {}
 

/* -------------------------------------------------------------------------*/
/* Mail protection */
/* -------------------------------------------------------------------------*/
.codedirection { unicode-bidi:bidi-override; direction: rtl; }




/* -------------------------------------------------------------------------*/
/* Twitter Feed Integration */
/* -------------------------------------------------------------------------*/

/*
.twitter-timeline {display:none;}

body.home section
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	
	padding: 1rem;
}
body.home section div:first-child {margin-right: 2rem;}
*/

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

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, 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: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   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,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    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 that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

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

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

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

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

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