body {
	background: #fff;
	color: #151515;
	font: 100%/1.5em "Lato", sans-serif;
	margin: 5px;
}

h4 {
	font: 900 0.9em "Lato", sans-serif;
	color: #414141;
	text-align: center;
	margin: 5px 0 0 0;
	padding: 0;
	max-width: 1000px;
}

/* ---------- MENU ---------- */

.menu {
	padding: 1px;
	margin: 0 0 10px 0;
	width: 1000px; 
	max-width: 100%;
	background: #4a4a4a url("pics/wort.png") no-repeat top 10px right 20px;
}

.menu h1 {
	font: 300 24px "Lato", sans-serif;
	color: white;
	padding: 0;
	margin: 5px 0 0 5px;
	font-variant: small-caps;
}

.btools {
	float: left;
	position: relative;
	display: block;
	margin: 13px 0 0 20px;
	width: 18px;
	height: 18px;
}

.btools a {
	background: url("pics/home_off.png") no-repeat;
	cursor: pointer;
	width: 18px;
	height: 18px;
}

.btools a:hover {
	background: url("pics/home_on.png") no-repeat;
}

.btools a img {
	visibility: hidden;
}

input {
    font-family: "Lato", sans-serif;
    font-size: 12px;
    line-height: normal;
    margin: 0;
}

input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/* ----------SECTION ---------- */

.section {
	background: #4a4a4a;
	padding: 1px;
	margin: 15px 0 10px 0;
	width: 1000px; 
	max-width: 100%;
}

.section h2 {
	font: 600 22px "Lato", sans-serif;
	color: white;
	padding: 0;
	margin: 5px 0 0 5px;
	font-variant: small-caps;
}

/* ---------- SWITCH ---------- */

.container {
	display: block;
	height: 16px;
	left: 120px;
	margin: 15px;
	position: relative;
	width: 40px;
}

.switch, .switchb {
	background: #fff;
	border-radius: 8px;
	display: block;
	height: 16px;
	position: relative;
	width: 40px;
}

.switch label, .switchb label {
	color: #fff;
	font-family: "Lato", sans-serif;
    font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-transform: uppercase;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
	width: 100px;
}

.switch label:nth-of-type(1) {
	left: -75%;
	position: absolute;
	text-align: right;
}

.switch label:nth-of-type(2) {
	position: absolute;
    right: -75%;
	text-align: left;
}

.switchb label:nth-of-type(1) {
	left: 0%;
	position: absolute;
	text-align: right;
}

.switchb label:nth-of-type(2) {
	position: absolute;
    right: 30%;
	text-align: left;
}

.switch input, .switchb input {
	height: 16px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 160px;
	z-index: 2;
}

.switch input:checked~label:nth-of-type(1), .switchb input:checked~label:nth-of-type(1) { color: #808080; }
.switch input:checked~label:nth-of-type(2), .switchb input:checked~label:nth-of-type(2) { color: #fff; }

.switch input~:checked~label:nth-of-type(1), .switchb input~:checked~label:nth-of-type(1) { color: #fff; }
.switch input~:checked~label:nth-of-type(2), .switchb input~:checked~label:nth-of-type(2) { color: #808080; }

.switch input:checked~.toggle, .switchb input:checked~.toggle {
	left: 4px;
}

.switch input~:checked~.toggle, .switchb input~:checked~.toggle {
	left: 22px;
}

.switch input:checked, .switchb input:checked {
	z-index: 0;
}

.toggle {
	background: #4a4a4a;
	border-radius: 50%;
	height: 14px;
	left: 0;
	position: absolute;
	top: 1px;
	-webkit-transition: left .2s ease;
	-moz-transition: left .2s ease;
	-ms-transition: left .2s ease;
	-o-transition: left .2s ease;
	transition: left .2s ease;
	width: 14px;
	z-index: 1;
}

/* OPENSEADRAGONS */

#openseadragon1 {
	width: 1000px; 
	height: 595px; 
	border: 1px solid #4a4a4a; 
	max-width: 100%; 
	position: relative; 
	display: block;
}

#openseadragon2 {
	width: 1000px; 
	height: 595px; 
	border: 1px solid #4a4a4a; 
	max-width: 100%; 
	position: relative; 
	display: none;
}

@media screen and (max-width: 420px) {
#openseadragon1 {
	width: 1000px; 
	height: 350px; 
	border: 1px solid #4a4a4a; 
	max-width: 100%; 
	position: relative; 
	display: block;
}

#openseadragon2 {
	width: 1000px; 
	height: 350px; 
	border: 1px solid #4a4a4a; 
	max-width: 100%; 
	position: relative; 
	display: none;
}
}

/* ---------- DESC ---------- */

#bloc1, #bloc1-1, #bloc2, #bloc2-1, #bloc3, #bloc3-1, #bloc4, #bloc4-1, #bloc5, #bloc5-1, 
#bloc6, #bloc6-1, #bloc7, #bloc7-1, #bloc8, #bloc8-1, #bloc9, #bloc9-1, #bloc10, #bloc10-1,
#bloc11, #bloc11-1, #bloc12, #bloc12-1, #bloc13, #bloc13-1, #bloc14, #bloc14-1, #bloc15, #bloc15-1, #bloc16, #bloc16-1 {
	display: none;
}

.desc {
	width: 1000px;
	max-width: 100%;
}

.desc p, #intro p {
	text-align: justify;
	font: normal 1em "Lato", sans-serif;
}

.desc h3, #intro h3 {
	font: 600 24px "Lato", sans-serif;
	color: #4a4a4a;
}

.desc h4 {
	font: italic 0.9em "Lato", sans-serif;
	color: #4a4a4a;
	text-align: center;
	margin: 0;
	padding: 0;
}

/* ---------- GALLERY ---------- */

.gallery-wrapper{
	max-width:850px;
	height:475px;
	display:block;
	margin: 20px auto;
	border-radius:7px;
	overflow: hidden;
	border: solid black;
	border-width:1px 1px 1px 0px;
}

.gallery-item{
	display:table-cell;
	border:solid black;
	width:1%;
	height:475px;
	border-width: 0px 0px 0px 1px;
	transition: width 0.15s linear 0s, filter 0.25s linear 0.1s, -webkit-filter 0.25s linear 0.1s, -moz-filter 0.25s linear 0.1s;
	font-size: 40px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	filter: grayscale(80%);
	-webkit-filter: grayscale(80%);
}

.gallery-item:hover{
	width:18%;
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
}

@media screen and (max-width: 420px) {
.gallery-wrapper{
	max-width:850px;
	height:350px;
	display:block;
	margin: 20px auto;
	border-radius:7px;
	overflow: hidden;
	border: solid black;
	border-width:1px 1px 1px 0px;
}
}

/* ---------- TOOLTIP ---------- */

#tooltip {
	position: absolute;
	display: none;
	text-decoration: none;  
	top: 0;  
	left: 0;  
	z-index: 999;
	min-width: 20px;	
	width: auto;    
	padding: 3px 5px;  
	opacity: .85;  
	background-color: #4a4a4a;  
	border-radius: 3px;  
	color: white; 
	font: 200 0.9em "Lato", sans-serif;
	line-height: 1.4em;
	text-align: center;
}

/* ---------- INTRO ---------- */

#bloc0 {
	border: 1px dotted #4a4a4a;
	width: 1000px;
	max-width: 100%;
	margin: 40px 0 0 0;
}

#bloc0 h5 {
	padding: 0 0 0 5px;
	background: #4a4a4a;
	font: 300 24px "Lato", sans-serif;
	color: white;
	font-variant: small-caps;
	margin: 0;
}

#intro {
	padding: 20px;
	display: block;
}