@charset "UTF-8";
@media screen{ 
	/* Basic */
	html, body{
		background: #fff;
		font-family: Sans-serif;
		font-size: 16px;
		line-height: 1.2em;
		color: #000;
		margin: 0;
		padding: 0;
		min-width: 320px;
		background: #ddd;
	}
	body{
		overflow-x:hidden;
	}
	.wrap{
		max-width: 1200px;
		margin: 0 auto;
		padding: 16px 32px;
		background: #fff;
	}
	main .wrap{border-top: 1px solid red; border-bottom: 1px solid red}
	.hide, .hide-xs{visibility: hidden}
	.show, .show-xs, .hide.active{visibility: visible}
	
	/* Navigation */
	header nav ul{list-style: none; margin: 0; padding: 0; display: flex}
	header nav li{display: block; position: relative}
	header nav a{display: inline-block; padding: 16px 8px; background: MediumVioletRed; color: darkRed}
	header nav li:hover > a, header nav li.active> a, header nav a.active{background: darkRed; color: MediumVioletRed}
	header nav ul ul{position: absolute; display: none; width: 300px; z-index: 2}
	header nav ul ul a{display: block}
	header nav li:hover > ul{display: block}
	header nav ul ul ul{margin-left: 300px; top: 0}
	header .nav-shortcut{width: 50px; height: 50px; cursor: pointer; position: fixed; z-index: 3; text-align: center;  background: red; color: #fff}
	header .nav-shortcut::before{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; content: "\f0c9"; font-size: 32px; line-height: 50px;}
	
	/* Search */
	.search-wrap{display: flex; justify-content: center}
	form[role="search"]{display: flex; width: 60%;}
	form[role="search"] input[type="search"]{
		flex-grow: 1;
		-webkit-border-top-right-radius: 0px;
		-webkit-border-bottom-right-radius: 0px;
		-moz-border-radius-topright: 0px;
		-moz-border-radius-bottomright: 0px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		border-right: 0;
	}
	form[role="search"] input[type="submit"], form[role="search"] button[type="submit"]{
		-webkit-border-top-left-radius: 0px;
		-webkit-border-bottom-left-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-moz-border-radius-bottomleft: 0px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	/* Breadcrumb */
	.breadcrumb{margin: 16px 0; padding: 0; text-align: left}
	.breadcrumb ul{display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0}
	.breadcrumb li{padding: 0}
	.breadcrumb li::after{content: ">"; padding-left: 4px; padding-right: 1px}
	.breadcrumb li:last-child::after{content: ""}
	.breadcrumb a{display: inline-block; padding: 4px; color: #000;}
	.breadcrumb a:hover, .breadcrumb li:last-child a{color: red}
	
	/* Pagination */	
	.pagination{margin: 16px 0; padding: 0}
	.pagination ul{display: flex; justify-content: center; list-style: none}
	.pagination li{padding: 4px 2px}
	.pagination a{display: inline-block; padding: 8px; color: #000; font-size: 1.4em; line-height: 1.05em;}
	.pagination .fa{line-height: 1em}
	.pagination a:hover, .pagination li.active > a, .pagination a.active{color: red; text-decoration: none}
	
	/* Cookies */
	#cookies{
		position: fixed;
		z-index: 4;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		background: #666;
		color: #fff;
		-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
		padding: 10px;
	}
	#cookies a{color: #fff}
	#cookies .button{padding: 8px; font-size: 16px; background: #999; color: #fff; border: 1px solid #fff}
	#cookies .button:hover{color: #000; background: #fff}	
	
	/* Go Up */
	#go-up{position: fixed; width: 50px; height: 50px; right: 32px; bottom: 32px; cursor: pointer; z-index: 3; text-align: center;  background: red; color: #fff;}
	#go-up::before{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; content: "\f106"; font-size: 32px; line-height: 50px;}
	
}

/* Responsive */
@media screen and (max-width: 1600px){
	
}
@media screen and (max-width: 1200px){
	
}
@media screen and (max-width: 1000px){
	
}
@media screen and (max-width: 800px){
	
}
@media screen and (max-width: 600px){
	
}
@media screen and (max-width: 400px){
	
}

@media screen and (min-width: 48em) { 
	.hide-sm{visibility: hidden}
	.show-sm{visibility: visible}
}
@media screen and (min-width: 64em) {
	.hide-md{visibility: hidden}
	.show-md{visibility: visible}
}
@media screen and (min-width: 75em) {
	.hide-lg{visibility: hidden}
	.show-lg{visibility: visible}
}