/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * 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
   ========================================================================== */

@font-face {
	font-family: "Light";
	src: url(../fonts/FuturaStd-Light.otf);
}

@font-face {
	font-family: "Bold";
	src: url(../fonts/FuturaLT-Bold.ttf);
}

@font-face {
	font-family: "Queen";
	src: url(../fonts/Dala-Floda-Fat.otf);
}


@font-face {
	font-family: "RosegardenFeature";
	src: url(../fonts/Bell-Italic.ttf);
}

@font-face {
	font-family: "HolyshowFeature";
	src: url(../fonts/Voltaire-Regular.ttf);
}

html {
    color: #666;
    font-size: 1em;
    line-height: 1.4;
	box-sizing: border-box;
	height:100%;
	overflow-y:scroll;
}

/*
 * 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
   ========================================================================== */

body {
	font-family: "Light", Arial, Helvetica, sans-serif;
	letter-spacing:0.075em;
	width:100%;
	min-height: 100%;
	position:relative;
	padding-bottom:7.25em;
	background-color:#fffffd;
}

* {
	box-sizing: inherit;
}

h1,h2,h3,h4 {	font-weight:normal; }

a {
	text-decoration:none;
	color:inherit;
}


p {
	margin:0;
}

ul {
	margin:0;
	padding:0;
	list-style:none;	
}

p.center {text-align:center !important; }

#menu {
	_background-image:url(../img/menu_bg.png);
	background-position:center bottom;
	background-repeat:repeat-x;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:#888;
	text-align:right;
	padding:20px 0 25px 0;
	overflow:hidden;
	display:none;
	margin-bottom:1%;
}

#menu ul {
	text-align:right;
	width:20%;
	display:inline-block;
	margin-right:2%;
}


#menu ul li {
	padding:3px 0;
}

#menu ul li a {
	display:block;
	height:100%;
	width:100%;
}

#menu ul li a:hover {
	color:#000;
}




#header-wrapper {
	background-color:#fffffd;
	width:100%;
	overflow:hidden;
	z-index:999;
}

#header {
	max-width:960px;
	margin:1em auto;
	position:relative;
	overflow:hidden;
	padding:0 1%;
	z-index:20;
	background-color:#fffffd;
}

.is-sticky #_logo{
	width:270px !important;
	background-image:url(../img/logo_encore_s.png) !important;
}

#header #logo {
	width:200px;
	height:80px;
	overflow:hidden;
	float:left;
	font-size:0;
	background-image:url(../img/logo_encore.png);
	margin-left:1%;
	background-size:contain;
}

#header #logo a {
	display:block;
	width:100%;
	height:100%;
}

#header #nav {
	text-transform:uppercase;
	position:absolute;
	right:0;
	bottom:0;
	margin-right:3%;
	width:100%;
	text-align:right;
	z-index:-1;
}

#header ul#nav li {
	display:inline;
	margin-left:1%;
	font-weight:300;
	font-size:0.75em;
	line-height:0;
	letter-spacing:0.1em;
	color:#444;
}



#header ul#nav li a {
	transition: color 0.25s linear,  background-color 0.25s linear;	
	display:inline;
	width:100%;
	height:100%;
	padding:0.2em 0.3em;

}

#header ul#nav li a:hover {
	color:#FFF;
	background-color:#333;
}


#content {
	overflow:hidden;
	margin-bottom:5em;
}


.wrapper {
	margin:0 auto;
	padding:0 1%;
	max-width:960px; 

}


.flexbox {
  display: flex;	
  flex-wrap: wrap; 
}


.path {
	padding:0 2%;
	margin-bottom:1em;
	font-size:0.75em;
	text-transform:uppercase;
	color:#AAA;
}

.path a:hover {
	color:#333;
}


#feature {
	margin:0 1% 2% 1%;
	height:500px;
	position:relative;
	overflow:hidden;
	background-position:center top;
	background-size:cover;
}

#feature.small {
	height:200px;
	font-size:0.75em;
	display:table;
	width:98%;
	max-width:960px;
}

#feature.small #info{
	position:relative;
	display:table-cell;
	vertical-align:middle;
}

#feature.small #info h2{
	width:90%;
	margin:0 auto;
	margin-top:-0.2em;
}



#feature #info {
	position:absolute;
	text-align:center;
	max-width:960px;
	width:80%;
	margin:0 auto 4% auto;
	left:0;
	right:0;
	bottom:0;
	pointer-events:none;
	z-index:2;
}


#feature #info h1 {
	font-size:2.5em;
	line-height:1.1em;
	margin-bottom:0.25em;
	text-transform:capitalize;
}

#feature #info p {
	max-width:600px;
	margin:0 auto;
	font-size:1.15em;
}


.wrapper .item.itsokay,
.wrapper .item.insta {
	height:140px;
	line-height:180px;
	border:5px solid #444;		

}

.wrapper .item.insta a {
	text-align:center;
	margin:0;
	padding:0;
	line-height:1.5em;
	font-size:1.5em;
}



.showme {
	opacity:0;
}



.info-text {
	margin:1em 1% 2% 1%;
	padding:1em;
}

.info-text h1 {
	font-size:2em;
	text-align:center;
	text-transform:capitalize;
	margin-top:0.5em;
	margin-bottom:0.5em;
}

.info-text p {
	margin-bottom:0.75em;
	line-height:1.5em;
	text-align:justify;
}


p.pre-columns {
	text-align:center;
	font-size:1.25em;
	margin-bottom:1.5em;
}

.columns {
	column-count:2;
	column-gap:2.5em;
}

.wrapper .item {
	height:240px;
	width:31.333%;
	margin:0 1% 2% 1%;
	float:left;
	position:relative;
	overflow:hidden;
}

.wrapper .item.quad {
	width:23%;
}

.wrapper .item.triple {
	width:31.333%;
}

.wrapper .item.double {
	width:64.666%;
}

.wrapper .item.single {
	width:97.999%;
}


.wrapper .item.blank {
	background:none !important;
}

.wrapper .item p {
	position:absolute;
	z-index:3;
}


.wrapper .item img {
	height:110% !important;
	width:auto !important;
	position:absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
}


.wrapper .item.text {
	position:relative;
	overflow:visible;
	background:none !important;
}
.wrapper .item.text.desc {
	font-family: "Light", Arial, Helvetica, sans-serif;
	color:#444;
}

.item.text.statement {
	font-family: "Bold", Arial, Helvetica, sans-serif;
	color:#444;
	text-transform:uppercase;
	
}

.wrapper .item .bg {
	position:absolute;
	display:block;
}

.wrapper .item p {
	position:absolute;
	text-align:center;
	width:80%;
	margin:0 auto 5% auto;
	left:0;
	right:0;
	bottom:0;
	pointer-events:none;
}

.wrapper .item a {
	position:absolute;
	width:100%;
	height:100%;
	margin:0 auto;
	left:0;
	right:0;
}

.wrapper .item:hover {
}

.wrapper .item img {
	
	
}

.wrapper .item img,
#feature img {
	width:100%;
	height:auto;
	margin:auto;
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	z-index:0;
	
	object-fit: cover;
	object-position: center center;
	height: 100%;
	
	
}




.wrapper.detail .galerie {
	padding:0 0 0 1%;
	width:73%;
	float:left;
	margin-bottom:1em;
	overflow:hidden;
 }

.wrapper.detail .galerie .thumb {
	width:24%;
	float:left;
	transition:opacity 0.5s;
	cursor:pointer;
	margin-right:1%;
}

.wrapper.detail .galerie .thumb:hover {
	opacity:0.5;
}


.wrapper.detail .galerie .thumb.active {
	opacity:0.5;
	cursor:default;
	
}

.wrapper.detail .galerie .image {
	padding-right:1%;
	padding-bottom:1%;
}

.wrapper.detail .galerie img {
	width:100%;
	height:auto;
}

.wrapper.detail .info {
	padding:5% 1% 0 1%;
	width:25%;
	float:right;
	margin-bottom:1em;
	text-align:right;
}

.wrapper.detail .info h1 {
	margin-top:0;
	margin-bottom:0;
	text-transform:uppercase;
	font-size:1.5em;
}

.wrapper.detail .info h1 span {
	margin-top:0;
	margin-bottom:2em;
	text-transform:uppercase;
	font-weight:normal;
	font-size:0.66666em;
	color:#999;
	display:block;
}

.wrapper.detail .info h3 {
	margin-top:1em;
	margin-bottom:0.5em;
	text-transform:uppercase;
	font-weight:normal;
	font-size:0.9em;
	color:#999;
}

.wrapper.detail .info a.button {
	color:#333;
	background-color:#F2F1EC;
	padding:0.75em;
	font-size:0.85em;
	margin-top:3em;
	display:inline-block;
	transition:color 0.5s, background-color 0.5s;
}

.wrapper.detail .info a.button:hover {
	color:#F2F1EC;
	background-color:#333;
}


.about h1,
.imprint h1 {
	font-size:2em;
	text-align:center;
	margin-top:1em;
	padding:0 1em;
}

.imprint h2 {
	text-align:center;
}

.imprint.datenschutz p {
	text-align:justify;
}


.wrapper p a {border-bottom:1px solid #BBB;}
.wrapper p a:hover {border-bottom:1px solid #555;color:#111 !important;}

.imprint p a:hover {text-decoration:underline;}

.about p {
	line-height:1.75em;
	margin-bottom:2em;
	padding:0 2%;
}


.about p.mb {
	margin-bottom:5em;
}

.imprint p {
	line-height:1.75em;
	margin-bottom:2em;
	padding:0 2%;
	text-align:center;
}



.about p.quote {
	font-family:"Light", Arial, Helvetica, sans-serif;
	font-size:1.5em;
	text-align:center;
	max-width:100%;
	padding:2.5%;
	padding-bottom:0;
}

.clear {clear:both;}

.about p span {
	font-size:0.6em;
}


.about img {
	width:40%;
	margin-left:2%;
	margin-right:2%;
	margin-bottom:1.75em;
}

.about img.landscape {
	width:50%;
}

.about img.logo {
	width:7%;
	margin-bottom:0;
}

.about img.right {
	float:right;
	margin-left:3em;
}

.about img.left {
	float:left;
	margin-right:3em;
}


.contact h1, .contact p {text-align:center;}

.contact form {text-align:center;margin-bottom:4em;}

.contact  label {
	width:92%;
	display:block;
	margin:0.5em auto;
	text-align:left;
	border:none !important;
}

.contact input, .contact textarea {
	margin-bottom:1em;
	width:96%;
	padding:0.75em;
	font-size:1.25em;
	font-family: "Light", Arial, Helvetica, sans-serif;
	border:3px solid #444;
	color:inherit !important;
	background-color:#fffffd;
}

.contact textarea {
	resize:none;
	height:10em;
}


p.warning,
p.success {
	margin:2em auto;
	border:3px solid #ed7190;
	width:96%;
	padding:1em;
	color:#ed7190;
	background-color:#ffe8e8;
}

p.success {
	border:3px solid #3bbf7d;
	color:#3bbf7d;
	background-color:#defced;
}

.warning {
	border:3px solid #ed7190 !important;
	color:#ed7190;
}


#submit {
	background:#444;
	color:#FFF !important;
	cursor:pointer;
}


/* KOLLEKTIONEN */


/* ROSEGARDEN */

.rosegarden p.pre-columns,
.rosegarden .info-text h1 {
	color:#e4585b;
}

.rosegarden .info-text  {
	border:5px solid #f5b8ba;
}

#feature.rosegarden {
	background-color:#FEE0E2;
	color:#e4585b;
}

#feature.rosegarden h1,
.rosegarden .info-text h1 {
	font-family: "RosegardenFeature", Arial, Helvetica, sans-serif;
	font-size:3em !important;
}





.rosegarden.item {
	background-color:#FEE0E2;
	color:#e4585b;
}
.rosegarden .item.text.statement {
	font-family: "Cormorant Garamond", Arial, Helvetica, sans-serif;
	text-transform:none;
	font-size:0.8em;
	color:#e4585b;
	font-style:italic;

}

.rosegarden .item.text.statement p {
	line-height:1.5em;

}




.rosegarden .item.ameise .bg {
	bottom:30%;
	left:30%;
	width:51px;
	height:54px;
	background-image:url(../img/rosegarden/ameise.png);
}

.rosegarden .item.schneider .bg {
	bottom:0;
	left:-90px;
	width:130px;
	height:130px;
	background-image:url(../img/rosegarden/schneider.png);
}

.rosegarden .item.schneider {
	overflow:visible;
}


.rosegarden .item.bg1 .bg {
	background-image:url(../img/rosegarden/bg1.jpg);
}

.rosegarden .item.bg2 .bg {
	background-image:url(../img/rosegarden/bg2.jpg);
}

.rosegarden .item.bg3 .bg {
	background-image:url(../img/rosegarden/bg3.jpg);
}




/* KIOSQUE */


#feature.kiosque{
	background-color:#3EC4EA;
	color:#FFFFFD;
}

#feature.kiosque h1 {
	font-family: "Bold", Arial, Helvetica, sans-serif;
	text-transform:uppercase !important;
	font-size:6em !important;
	margin-bottom:0.15em !important;
	letter-spacing:0.25em;
}

.item.kiosque {
	background-color:#3EC4EA;
	color:#FFFFFD;
}

.kiosque .info-text  {
	border:5px solid #3EC4EA;
	color:#12a9d4;

}


.kiosque .info-text h1 {
	text-transform:uppercase;
	font-size:3em;
	font-family: "Bold", Arial, Helvetica, sans-serif;
	color:#3EC4EA;
}


.kiosque .item.statement p {
	font-family: "Bold", Arial, Helvetica, sans-serif;
	font-size:1em;
	line-height:1.5em;
	color:#3EC4EA;
}




/* HOLY SHOW */


#feature.the-holy-show {
	background-color:#292728;
	color:#FFFFFD;
}

#feature.the-holy-show h1 {
	font-family: "HolyshowFeature", Arial, Helvetica, sans-serif;
	text-transform:uppercase !important;
	font-size:4em !important;
	color:#FFFFFD;
}


.the-holy-show .info-text h1 {
	font-family: "HolyshowFeature", Arial, Helvetica, sans-serif;
	text-transform:uppercase !important;
	font-size:4em !important;
	color:#2E2C2F;
}



.the-holy-show .info-text  {
	border:5px solid #2E2C2F;
}

.item.holyshow {
	background-color:#393434;
	color:#FFF;
}

.the-holy-show .item.statement{
	border:5px solid #2E2C2F;
}

.the-holy-show .item.statement p {
	font-family: "HolyshowFeature", Arial, Helvetica, sans-serif;
	text-transform:uppercase !important;
	text-decoration:underline;
	font-size:2em;
}


.item .bg {
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:auto;
	background-size:cover;
	background-position:center center;
}

.the-holy-show .item.bg1 .bg {
	background-image:url(../img/the-holy-show/bg1.jpg);
}

.the-holy-show .item.bg2 .bg {
	background-image:url(../img/the-holy-show/bg2.jpg);
}

.the-holy-show .item.bg3 .bg {
	background-image:url(../img/the-holy-show/bg3.jpg);
}

.the-holy-show .item.bg4 .bg {
	background-image:url(../img/the-holy-show/bg4.jpg);
}

.the-holy-show .item.bg5 .bg {
	background-image:url(../img/the-holy-show/bg5.jpg);
}

.the-holy-show .item.bg6 .bg {
	background-image:url(../img/the-holy-show/bg6.jpg);
}




/* QUEEN */

.queen .info-text  {
	border:5px solid #ABABAB;
}


#feature.queen {
	background-color:#DFDBD8;
	color:#FFF;
}

#feature.queen h1 {
	font-family: "Queen", Arial, Helvetica, sans-serif;
	text-transform:uppercase !important;
	font-size:3em !important;
	color:#FFF;
}

#feature.queen h1,
#feature.queen p {}

.queen .info-text h1 {
	font-family: "Queen", Arial, Helvetica, sans-serif;
	text-transform:uppercase !important;
	font-size:3em !important;
	line-height:1.1em;
	color:#6C6C6C;
}


.queen #feature.small {
	font-family: "RosegardenFeature", Arial, Helvetica, sans-serif;
	color:#ff9e95;
	border:1px solid #ffe5e8;
}

.queen.item {
	background-color:#a7a7a7;
	color:#FFF;
}
.queen .item.text.desc {
	border:5px solid #ABABAB;

}




.queen .item.bg1 .bg {
	background-image:url(../img/queen/bg1.jpg);
}

.queen .item.bg2 .bg {
	background-image:url(../img/queen/bg2.jpg);
}

.queen .item.bg3 .bg {
	background-image:url(../img/queen/bg3.jpg);
}














.item.submenu {
	
	background-color:#FFFFFD;
	border:5px solid #444;
	line-height:240px;


}


.item.submenu a p {
	position:relative;
}

.item.submenu a:hover p {
	text-decoration:underline !important;
}

.item.text {
	line-height:240px;
}


.item.text p,
.item.submenu p {
	position:relative;
 	width:100%;
	text-align:center;
    display: inline-block;
    vertical-align: middle;
	font-size:1.5em;
	line-height:1.2;
}

.item.desc p {
	text-transform:none;
	font-weight:normal;
	font-size:1em;
	line-height:1.5;
}




#footer {
	background-color:#f2f1ec;
	margin:3% auto 0 auto;
	text-align:center;
	padding:1.75% 0 2% 0;
	font-size:0.8em;
	width:100%;
	right: 0;
	bottom: 0;
	left: 0;	
	position:absolute;
}

#footer ul  {
	margin-top:0.5em;
}


#footer ul li {
	display:inline-block;
	margin:0 0.5em;
	text-transform:uppercase;
	vertical-align:middle;
}


#footer ul li a:hover {
	text-decoration:underline;
}


#footer .insta {
	font-size:0.01%;
	overflow:hidden;
	color:transparent;
	background-image:url(../img/icon_insta.png);
	width:13px;
	height:16px;
	display:block;
	background-repeat:no-repeat;
	opacity:0.5;
}

#footer .insta:hover {
	opacity:1;
}




@media (max-width: 1050px) {
	.wrapper .item .bg {
		left:0 !important;
		right:0 !important;		
	}
	
	.about img {
		margin-bottom:2em;
	}
	
	.about img.right {
		margin-right:0%;
	}
	
	.about img.left {
		margin-left:0%;
	}
	
	
}


@media (max-width: 700px) {
	
	#content {
			margin-bottom:0;
	}
	
	.wrapper .item,
	.wrapper .item.submenu  {
		width:48%;
		height:200px;

	}

	.wrapper .item.submenu  {
		line-height:200px;

	}


	.wrapper .item.itsokay {
		width:48% !important;
		height:200px;
		line-height:200px;
		border:5px solid #444;		
	}



	#header #logo {
		float:none;
		margin:0 auto 5px auto;
		width:270px;
		height:22px;
		background-image:url(../img/logo_encore_s.png) !important;
		background-position:center bottom;background-size:cover;
		
	}
	
	#header #nav {
		position:relative;
		margin:0 auto;
		text-align:center;
	}
	
	#menu {
		text-align:center;
	}
	
	#menu ul {
		width:33%;
	}
	
	#feature {
		height:350px;
	}
	
	#feature #info h1 {
		font-size:2em !important;
	}

	#feature #info p {display:none;}
	
	#feature img {
	}
	
	.wrapper .item.blank,
	.wrapper .item.deko {
		display:none;
	}
	
	.wrapper .item.text {
		width:100%;
		line-height:200px;
	}
	
	
	.wrapper.detail .galerie,
	.wrapper.detail .info {
		width:100%;
		float:none;
	}
	
	.wrapper.detail .info {
		text-align:center;
	}
	
	.wrapper .info-text  {
		padding:0.5em 1em;
	}
	
	.wrapper .info-text h1 {
		font-size:2em !important;
		line-height:1.15em;
	}
	
	.wrapper .info-text p {
		font-size:1em !important;
	}
	
	p.mb {
		margin-bottom:2em !important;		
	}
	
	.about img {
		float:none !important;
		width:100% !important;
		margin-top:0em;
		margin-bottom:2em;
		margin-left:0em !important;
		margin-right:0em !important;
	}
	
	
	.about img.logo {
		width:20% !important;
		margin-bottom:2em;
		float:right !important;
		margin-left:2em !important;
}

	
	
		.path {
		display:none;
	}



	.rosegarden .rg001 {order:	1;}
	.rosegarden .rg002 {order:	2;}
	.rosegarden .st1 {order:	3;}
	.rosegarden .rg003 {order:	4;}
	.rosegarden .rg004 {order:	5;}
	.rosegarden .rg005 {order:	6;}
	.rosegarden .rg006 {order:	7;}
	.rosegarden .rg007 {order:	8;}
	.rosegarden .rg008 {order:	9;}
	.rosegarden .rg009 {order:	10;}
	.rosegarden .rg010 {order:	11;}
	.rosegarden .rg011 {order:	12;}
	.rosegarden .rg012 {order:	13;}
	.rosegarden .st2 {order:	14;}
	.rosegarden .rg013 {order:	15;}
	.rosegarden .rg014 {order:	16;}
	.rosegarden .rg015 {order:	17;}
	.rosegarden .rg017 {order:	18;}
	.rosegarden .rg018 {order:	19;}
	.rosegarden .rg019 {order:	20;}
	.rosegarden .rg020 {order:	21;}
	.rosegarden .rg021 {order:	22;}
	.rosegarden .st3 {order:	23;}
	.rosegarden .rg016 {order:	24;}
	.rosegarden .rg022 {order:	25;}



	.queen .qu001 {order:	1;}
	.queen .qu002 {order:	2;}
	.queen .qu003 {order:	3;}
	.queen .qu004 {order:	4;}
	.queen .st1 {order:	5;}
	.queen .qu005 {order:	6;}
	.queen .qu006 {order:	7;}
	.queen .qu007 {order:	8;}
	.queen .qu008 {order:	9;}

	.the-holy-show .hs001 {order:	1;}
	.the-holy-show .hs002 {order:	2;}
	.the-holy-show .st1 {order:		3; width:48% !important;}
	.the-holy-show .hs003 {order:	4;}
	.the-holy-show .st2 {order:		5;}
	.the-holy-show .hs007 {order:	6;}
	.the-holy-show .hs008 {order:	7;}
	.the-holy-show .hs005 {order:	8;}
	.the-holy-show .st3 {order:		9;width:48% !important;}
	.the-holy-show .hs006 {order:	10;}
	.the-holy-show .hs004 {order:	11;}
	.the-holy-show .st4 {order:		12;}
	.the-holy-show .hs009 {order:	13;}
	.the-holy-show .st5 {order:		14;width:48% !important;}


	.kiosque .ki001 {order:	1;}
	.kiosque .ki002 {order:	2;}
	.kiosque .ki003 {order:	3;}
	.kiosque .ki004 {order:	4;}
	.kiosque .st1 {order:	5;}
	.kiosque .ki005 {order:	6;}
	.kiosque .ki006 {order:	7;}
	.kiosque .ki007 {order:	8;}
	.kiosque .ki008 {order:	9;}
	.kiosque .ki009 {order:	10;}
	.kiosque .ki010 {order:	11;}
	.kiosque .st2 {order:	12;}
	.kiosque .ki011 {order:	13;}
	.kiosque .ki012 {order:	14;}
	.kiosque .ki013 {order:	15;}
	.kiosque .ki014 {order:	16;}
	.kiosque .ki015 {order:	17;}
	.kiosque .ki016 {order:	18;}
	.kiosque .ki017 {order:	19;}


}

@media (max-width: 200px) {
	
	
	.wrapper .item {
		width:98%;
	}
	
	#menu ul {
		text-align:center;
		width:100%;
		display:block;
	}

	#menu ul:first-child {
		margin-bottom:1em;
	}

	.path {
		display:none;
	}

	.columns {
		column-count:1;
	}

}


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

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none;
}

/*
 * 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
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

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

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * 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: " "; /* 1 */
    display: table; /* 2 */
}

.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:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        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:
     * 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;
    }
}