/*CSS for www.sansclaire.ch BY www.theonefive.com | 2012 */

/* colors sansclaire.ch */
/*
SANS CLAIRE PREMIUM GREEN: #76E30C / rgba(118, 227, 12, 1)
SANS CLAIRE LIGHT GREEN LINK COLOR: #C7F798 / rgba(199, 247, 152, 1)
SANS CLAIRE DARK GREEN: #5DA914 / rgba (93, 169, 30, 1)
SANS CLAIRE DARK PURPLE: #BF3B81 / rgba(191, 59, 129, 1)
*/

/**************** RESET STYLES IS A GOOD THANG *************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0;}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {display: block;}

a img {border: 0;}

figure {position: relative;}
figure img {width: 100%;}
/**********************************************************************************************************************/
@font-face {
    font-family: 'LektonBold';
    src: url('/fonts/lekton-bold-webfont.eot');
    src: url('/fonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lekton-bold-webfont.woff') format('woff'),
         url('/fonts/lekton-bold-webfont.ttf') format('truetype'),
         url('/fonts/lekton-bold-webfont.svg#LektonBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LektonItalic';
    src: url('/fonts/lekton-italic-webfont.eot');
    src: url('/fonts/lekton-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lekton-italic-webfont.woff') format('woff'),
         url('/fonts/lekton-italic-webfont.ttf') format('truetype'),
         url('/fonts/lekton-italic-webfont.svg#LektonItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LektonRegular';
    src: url('/fonts/lekton-regular-webfont.eot');
    src: url('/fonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lekton-regular-webfont.woff') format('woff'),
         url('/fonts/lekton-regular-webfont.ttf') format('truetype'),
         url('/fonts/lekton-regular-webfont.svg#LektonRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'jrhandRegular';
    src: url('/fonts/jrha___-webfont.eot');
    src: url('/fonts/jrha___-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/jrha___-webfont.woff') format('woff'),
         url('/fonts/jrha___-webfont.ttf') format('truetype'),
         url('/fonts/jrha___-webfont.svg#jrhandRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*** DEFAULT 1024 PX WIDTH LAYOUT FOR DESKTOP, ALL OTHER LAYOUTS INHERIT STYLES FROM THIS LAYOUT **********************/
/**********************************************************************************************************************/
html, body {height: 100%; margin: 0; padding: 0; background-color: #FFFFFF;background: url(/images/background.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
body {text-align: center; font-family: 'LektonRegular', Courier, monospace; font-size: 90%; color: #ffffff; font-style: normal; letter-spacing: 0em; line-height: 1.5em; -webkit-tap-highlight-color: rgb(94, 197, 237);}

::selection 	 	{background: rgb(199, 247, 152);}
::-moz-selection 	{background: rgb(199, 247, 152);}
img::selection 		{background: transparent;}
img::-moz-selection {background: transparent;}

#background {margin: 0 auto;}

main {position: relative; margin: auto; /* Div zentrieren */ width:90%; min-height: 100%; text-align: left; }

#header {position : relative; height : 240px; width: 100%;}
#header img {display: block; max-width: 100%;}
#cloud1 {position: absolute; margin-left: 2%; top: 2%; width: 31%; z-index: 1;}
#cloud2 {position: absolute; margin-left: 30%; top: 30%; width: 31%; z-index: 3;}
#cloud3 {position: absolute; right: 0px; margin-right: 3%; top: 8%; width: 31%; z-index: 2;}
#cloud4 {position: absolute; right: 0px; margin-right: 0; top: 55%; width: 27%; z-index: 4;}

#cont {padding: 40px 60px 180px 60px; position: relative; overflow: auto;}
#intro {padding: 0px 0px 160px 60px; margin-top: -60px; position: relative; overflow: auto;}
img.intro {width: 55%;}
img.bird {width:25%; float: left;}

.song {width: 40%; float: left; margin-bottom: 1em;}
.song:nth-child(2n+2) {float: right;}

li.gallery {position: relative; float: left; display: inline; width: 15%; margin: 1.5%; padding: 5px; text-align: center; box-shadow: 0 0 0 5px #FFFFFF, 5px 5px 10px #000; border-radius: 2px; background-color: #EEEEEE; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(238, 238, 238)), color-stop(0.7, rgb(255, 255, 255))); background-image: -moz-linear-gradient(center bottom, rgb(238, 238, 238) 0%, rgb(255, 255, 255) 70%); background-image: -ms-linear-gradient(bottom, #EEEEEE, #FFFFFF); /* IE10 */ background-image: -o-linear-gradient(rgb(255, 255, 255),rgb(238, 238, 238)); background-image: linear-gradient(top, #EEEEEE, #FFFFFF); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#EEEEEE'); /* IE6–IE9 */ zoom: 1;}
li.gallery:nth-child(5n+1) { margin-left: 0; clear:left;}
li.gallery:nth-child(3n+1) {-webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg);}
li.gallery:nth-child(3n+2) {-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg);}
li.gallery img {max-width: 100%;}

.videoplayer {/* width: 480px; height: 385px; */position: relative; float: left; display: inline; margin-right: 3%; margin-bottom: 30px; padding: 5px; text-align: center; box-shadow: 0 0 0 5px #FFFFFF, 5px 5px 10px #000; border-radius: 2px; background-color: #FFFFFF;}
.videoplayer h1 {color: black;}

/* .videoplayer iframe {width: 480px; height: 385px;} */
/* .videoplayer object {width: 480px !important; height: 385px !important;} */

.event {margin-bottom: 40px; height: 80px; clear: left;}
.event h2 {margin-left: 12%;}
.event p {width: 80%; margin-left: 12%;}
img.agendaEven {position: relative; float: left; width: 8%; margin: 0 3% 0 0; padding: 5px; box-shadow: 0 0 0 3px #FFFFFF, 3px 3px 5px #000; border-radius: 2px; background-color: #FFFFFF; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg);}
img.agendaOdd {position: relative; float: left; width: 8%; margin: 0 3% 0 0; padding: 5px; box-shadow: 0 0 0 3px #FFFFFF, 3px 3px 5px #000; border-radius: 2px; background-color: #FFFFFF; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg);}

.agenda-listing:after{content: " "; font-size: 0; line-height: 0; display: block; width: 0; height: 0; clear: both;}
.agenda-listing{transition: .5s; display: block; float: left; padding: 5px; box-shadow: 0 0 0 5px #FFFFFF, 5px 5px 10px #000; border-radius: 2px; background-color: #FFFFFF; color: black; margin: 0 40px 40px 0; /*  clear: both; */}

.agenda-listing img{border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin: -10px 0 -10px -10px; width: 200px; float: left; margin-right: 10px;}
.agenda-listing .text{float: left;    max-width: calc(100% - 200px);}
.agenda-listing:hover{transform: scale(1.03); z-index: 2; position: relative;}

.pagination{display: block; clear: both;}

/* .view {overflow: hidden;} */
.view p {margin-left: 25%;}
.view h2 {margin-left: 25%;}
img.view {position: relative; float: left; width: 20%; margin: 0 3% 0 0; padding: 5px; box-shadow: 0 0 0 3px #FFFFFF, 3px 3px 5px #000; border-radius: 2px; background-color: #FFFFFF; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg);}
img.contact {position: relative; float: left; width: 20%; margin: 0 3% 0 0; padding: 5px; box-shadow: 0 0 0 3px #FFFFFF, 3px 3px 5px #000; border-radius: 2px; background-color: #FFFFFF; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg);}

#share {margin-left: 25%; margin-top: 30px;}
#share li {display: inline; float: left; margin-right: 10px;}
#share p {clear: left; margin-left: 0; padding-top: 15px;}

#contact {text-align: center; color: #000; width: 35%; margin: 40px 0 0 30%; background: white url(/images/airmail_stamp.png) no-repeat 90% 10%; box-shadow: 1px 1px 2px #000; padding: 70px 10px 30px 10px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); transform: rotate(-8deg);}
#contact a {color: #000; text-decoration: none;}
#contact a:hover, a:focus {color: #898989;}

#footer {position: absolute; bottom: 0; height: 180px; width: 100%; background: url(/images/footer/hill_ie.png) no-repeat 0 0; background: url(/images/footer/hill_01.png) no-repeat 0 100%, url(/images/footer/hill_02.png) no-repeat 40% 100%, url(/images/footer/hill_03.png) no-repeat 62% 100%, url(/images/footer/hill_04.png) no-repeat 85% 100%, url(/images/footer/hill_05.png) no-repeat 100% 100%;}

#fourfour {text-align: left; color: #000; width: 45%; margin: 30px 0 0 25%; background: white; box-shadow: 1px 1px 2px #000; padding: 20px 20px 10px 20px; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg);}
#fourfour a {color: #898989; text-decoration: none;}
#fourfour a:hover, a:focus {color: #000000;}

/* Background Image full Screen */
img.bg {min-height: 100%; min-width: 1600px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}
@media screen and (max-width: 1400px) { /* Specific to this particular image */
        img.bg {left: 50%; margin-left: -700px;   /* 50% */}
}

/***** LIGHTBOX ******/
.lightbox, .lightbox *{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.lightbox{position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 10; padding: 20px 78px; animation: fadein 1s; opacity: 1;}
.gradient{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,000000+100 */
background: rgba(0,0,0,0.8); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, transparent 5%, #000000 80%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, transparent 5%,#000000 80%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, transparent 5%,#000000 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#000000',GradientType=1 ); */ /* IE6-9 fallback on horizontal gradient */}
.gradient{position: absolute; width: 100%; height: 100%; top: 0; left: 0; animation: bg 2s; background-position: center center;}

.lightbox .wrap{background: rgba(255,255,255,0.9); overflow: visible!important; position: absolute; width: 200px; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 10px; color: white;}
.lightbox .wrap .prev,
.lightbox .wrap .next{position: absolute; top: 50%; z-index: -1; font-size: 50px; cursor: pointer; background: white; width: 30px; height: 100px; opacity: 0.8; color: black;}
.lightbox .wrap .prev{left: 0; transform: translate(-100%, -50%); border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.lightbox .wrap .next{right: 0; transform: translate(100%, -50%); border-top-right-radius: 5px; border-bottom-right-radius: 5px;}

.lightbox .wrap .prev:before{content: "<"}
.lightbox .wrap .next:before{content: ">"}
.lightbox .wrap .prev:before, .lightbox .wrap .next:before{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scaleY(1.5); font-size: 0.6em;}


.lightbox .wrap .loader{height: 20px; top: 0; right: 0; bottom:0; left: 0; position: absolute; margin: auto; text-align: center; color: black;}
.lightbox .wrap img{position: absolute; width: 100%; height: 100%; top: 0; left:0; border-radius: inherit; border: 2px solid;}

@keyframes bg{
	0%{background-size: 500% 500%;}
	100%{background-size: 100% 100%;}
}

@keyframes fadein{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

/******************** Typography presets ******************************************************************************/
/**********************************************************************************************************************/
h1 {margin-bottom: 1em;}
h2 {margin-bottom: 0.5em;}
h3 {font-family: 'jrhandRegular', Courier, monospace; color: #000; font-size: 70%;}

p {margin-bottom: 0.5em;}

a {text-decoration: underline; color: rgba(199, 247, 152, 1); color: #C7F798; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a:hover, a:focus {color: #FFF;}
a.activeState {background: #5DA914 !important; color: #ffffff !important;}

a.agendaTitle {text-decoration: none; /* color: rgba(255, 255, 255, 1); color: #FFFFFF; */; color: black;}
a.agendaTitle:hover, a.agendaTitle:focus {text-decoration: underline;}

a.shop {position: absolute; text-decoration: none; color: #000; bottom: 25%; left: 15%; background: white; font-size: 1.5em; box-shadow: 1px 1px 2px #999; padding: 5px 15px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); transform: rotate(-8deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.shop:hover, a.shop:focus {background: #BF3B81; color: #ffffff;}
a.contact {position: absolute; text-decoration: none; color: #000; bottom: 35%; left: 69%; background: white; font-size: 1.5em; box-shadow: 1px 1px 2px #999; padding: 5px 15px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.contact:hover, a.contact:focus {background: #BF3B81; color: #ffffff;}
a.sound {position: absolute; text-decoration: none; color: #000; top: 21.857923%; left: 15%; background: white; font-size: 1.5em; box-shadow: 1px 1px 2px #999; padding: 5px 15px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.sound:hover, a.sound:focus {background: #BF3B81; color: #ffffff;}
a.pictures {position: absolute; text-decoration: none; color: #000; top: 58.82352%; left: 35%; background: white; font-size: 1.5em; box-shadow: 1px 1px 2px #999; padding: 5px 15px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.pictures:hover, a.pictures:focus {background: #BF3B81; color: #ffffff;}
a.video {position: absolute; text-decoration: none; color: #000; top: 28%; left: 18%; background: white; font-size: 1.5em; box-shadow: 1px 1px 2px #000; padding: 5px 15px; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); transform: rotate(4deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.video:hover, a.video:focus {background: #BF3B81; color: #ffffff;}
a.agenda {position: absolute; text-decoration: none; color: #000; top: 60%; left: 36%; background: white; font-size: 1.5em; box-shadow: 1px 1px 2px #000; padding: 5px 15px; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.agenda:hover, a.agenda:focus {background: #BF3B81; color: #ffffff;}
a.sansClaire {position: absolute; text-decoration: none; color: #000; top: 28%; left: 18%; background: white; font-size: 1.25em; font-weight: bold; box-shadow: 1px 1px 2px #999; padding: 5px 15px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.sansClaire:hover, a.sansClaire:focus {background: #BF3B81; color: #ffffff;}
a.sansClaireDe {position: absolute; text-decoration: none; color: #000; top: 56%; left: 15%; background: white; font-size: 0.9em; box-shadow: 1px 1px 1px #999; padding: 1px 5px; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg); transform: rotate(1deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.sansClaireDe:hover, a.sansClaireDe:focus {background: #BF3B81; color: #ffffff;}
a.sansClaireFr {position: absolute; text-decoration: none; color: #000; top: 58%; left: 28%; background: white; font-size: 0.9em; box-shadow: 1px 1px 1px #999; padding: 1px 5px; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.sansClaireFr:hover, a.sansClaireFr:focus {background: #BF3B81; color: #ffffff;}
a.sansClaireEn {position: absolute; text-decoration: none; color: #000; top: 62%; left: 42%; background: white; font-size: 0.9em; box-shadow: 1px 1px 1px #999; padding: 1px 5px; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.sansClaireEn:hover, a.sansClaireEn:focus {background: #BF3B81; color: #ffffff;}
a.group2:hover {opacity: 0.7;}

a.content_edit {float: left; clear: both; text-transform: uppercase; text-decoration: none; padding: 6px 10px 6px 10px; margin-top: 20px; line-height: 1; color: #000; border: none; background-color: #C7F798; box-shadow: 1px 1px 2px #696969;  -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
a.content_edit:hover, a.content_edit:focus {background-color: #e9fad9;}

ul {list-style-type: none; margin-bottom: 1em; }
/**********************************************************************************************************************/

/******************** CONTACT FORM ************************************************************************************/
/**********************************************************************************************************************/
#kontakt input[type="text"] {font-family: 'LektonRegular', Courier, monospace; font-size: 0.9em; width: 280px; padding: 5px 5px; margin-bottom: 10px; color: #3E3D40; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: #FFFFFF;}
#kontakt input[type="email"] {font-family: 'LektonRegular', Courier, monospace; font-size: 0.9em; width: 280px; padding: 5px 5px; margin-bottom: 10px; color: #3E3D40; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: #FFFFFF;}
#kontakt input[type="text"]:focus {-webkit-box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }
#kontakt input[type="email"]:focus {-webkit-box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }
#kontakt input[type="submit"] {font-family: 'LektonRegular', Courier, monospace; color: rgba(93, 169, 30, 1); color: #5DA914; font-size: 1em; text-transform: uppercase; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); padding: 6px 10px 5px 10px; margin: 5px 0 20px 22%; /* margin-bottom: 20px; */ line-height: 1; -webkit-border-radius: 25px; -moz-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); background-color: rgba(222, 222, 222, 1); background-color: #DEDEDE; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(222, 222, 222)), color-stop(0.7, rgb(255, 255, 255))); background-image: -moz-linear-gradient(center bottom, rgb(222, 222, 222) 0%, rgb(255, 255, 255) 70%); background-image: -ms-linear-gradient(bottom, #DEDEDE, #FFFFFF); /* IE10 */ background-image: -o-linear-gradient(rgb(255, 255, 255),rgb(222, 222, 222)); background-image: linear-gradient(top, #DEDEDE, #FFFFFF); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#DEDEDE'); /* IE6–IE9 */ zoom: 1; border: 1px solid #DEDEDE;  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#kontakt input[type="submit"]:hover {color: rgba(191, 59, 129, 1); color: #BF3B81; background-color: rgba(238, 238, 238, 1); background-color: #EEEEEE;}
#kontakt textarea {font-family: 'LektonRegular', Courier, monospace; font-size: 0.9em; width: 280px; height: 70px; padding: 5px 5px; margin-bottom: 5px; color: #3E3D40; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: #FFFFFF; resize: none;}
#kontakt textarea:focus {-webkit-box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }
#kontakt label {font-family: 'LektonRegular', Courier, monospace; /* display: block; */ margin-bottom: 5px; float: left; width: 80px; padding-top: 4px; /* background-color: blue; */}
#kontakt {width: 370px; margin: 20px 0 0 25%;}
/**********************************************************************************************************************/

/******************** JPLAYER (FIRST LINE) AND COLORBOY ***************************************************************/
/**********************************************************************************************************************/
a.jp-shuffle, .jp-shuffle-off, .jp-repeat, .jp-repeat-off, .jp-previous, .jp-play, .jp-pause, .jp-next, .jp-stop, .jp-mute, .jp-unmute, .jp-volume-max {-webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;}

/* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered.*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML.*/
#cboxOverlay{/* background:#BF3B81; */ background: url(/images/colorbox_bg.png) repeat;}
#colorbox{}
#cboxContent{margin:20px;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{background: #fff; box-shadow: 0 0 0 10px #FFFFFF, 8px 8px 10px #000; border-radius: 5px;}

#cboxTitle{position: absolute; bottom: 0; left: 0; width: 100%; font-family: 'jrhandRegular', Courier, monospace; color: #000; font-size: 130%; padding: 10px 0 0 0; background-color: #fff; /* -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); */}
/* #cboxCurrent{position:absolute; top:-20px; right:0px;} */
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}

#cboxPrevious{position:absolute; top:50%; left:0; margin-top:-32px; background:url(/images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:0; margin-top:-32px; background:url(/images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}
#cboxLoadingOverlay{background:#000;}
#cboxLoadingGraphic{background:url(/images/loading.gif) no-repeat center center;}

#cboxClose{position:absolute; top: 10px; right: 10px; display:block; background:url(/images/cBox_close.png) no-repeat top center; width:30px; height:30px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}









/***************************** 768 PX WIDTH LAYOUT FOR TABLET *********************************************************/
/**********************************************************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 1023px) {

body {font-size: 85%;}

#cloud4 {top: 60%; width: 28%;}

li.gallery {width: 15%; margin: 2%; padding: 3px; border-radius: 2px;}

.event {margin-bottom: 40px; height: 90px;}
.event p {margin-left: 16%;}
.event h2 {margin-left: 16%;}
img.agendaEven {width: 10%;}
img.agendaOdd {width: 10%;}

#cont {padding: 40px 50px 130px 50px;}
#intro {padding: 0px 0px 120px 60px; margin-top: -80px; position: relative; overflow: auto;}
img.intro {width: 55%;}

.song {width: 45.5%; float: left; margin-bottom: 1em;}
.song:nth-child(2n+2) {float: right;}

#contact {width: 45%; margin: 40px 0 0 25%; padding: 70px 10px 30px 10px;}

#footer { height : 130px; background: url(/images/footer/hill_01_m.png) no-repeat 0 100%, url(/images/footer/hill_02_m.png) no-repeat 40% 100%, url(/images/footer/hill_03_m.png) no-repeat 62% 100%, url(/images/footer/hill_04_m.png) no-repeat 85% 100%, url(/images/footer/hill_05_m.png) no-repeat 100% 100%;}

#fourfour {width: 48%; margin: 30px 0 0 25%; padding: 20px 20px 10px 20px;}

/* h1 {font-size: 1.3em;} */
h3 {font-size: 50%;}

a.shop { bottom: 20%; left: 10%; font-size: 1.3em;}
a.contact { bottom: 30%; left: 69%; font-size: 1.3em;}
a.sound {font-size: 1.3em;}
a.pictures {font-size: 1.3em;}
a.video {font-size: 1.3em;}
a.agenda {font-size: 1.3em;}
a.sansClaire {font-size: 1.1em;}

}









/*************** 320 PX LAYOUT FOR 320px MOBILES, IPHONES AND IPOD TOUCH **********************************************/
/**********************************************************************************************************************/
@media only screen and (max-width: 767px) {
.lightbox{padding: 10px;}
	.lightbox .wrap .prev,.lightbox .wrap .next{z-index: 1; transform: translate(0, -50%);}

.agenda-listing{text-align: center; float: none; display: block; margin: 0 auto 40px; width: 280px;}
.agenda-listing .text{float: none; max-width: 100%;}
.agenda-listing img{float: none; display:  block; margin: -10px -10px 10px; border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; width: 300px;}

#header {height: 120px;}

#cloud1 {width: 35%}
#cloud2 {width: 35%}
#cloud4 {top: 45%; width: 33%;}

li.gallery {width: 40%; margin: 4%; padding: 5px;}
li.gallery:nth-child(5n+1) { margin-left: 4%; clear: none;}
li.gallery:nth-child(2n+1) { margin-left: 0; clear:left;}
li.gallery:nth-child(3n+1) {-webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg);}
li.gallery:nth-child(3n+2) {-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg);}

.event {margin-bottom: 40px; height: auto;}
.event:last-child {margin-bottom: 20px;}
.event p {margin-left: 30%; width: 70%;}
.event h2 {margin-left: 30%;}
img.agendaEven {width: 20%;}
img.agendaOdd {width: 20%;}

.view p {margin-left: 0;}
.view h2 {margin-left: 0;}
img.view {display: none;}
img.contact {float: none; width: 40%; margin-bottom: 1em;}
#intro {padding: 0px 0px 60px 20px; margin-top: -30px;}
img.intro {width: 65%;}
img.bird {display: none;}

#cont {padding: 20px 40px 100px 40px;}

.song {width: 100%; float: left; clear: left; margin-bottom: 1em;}
.song:nth-child(2n+2) {float: left;}

#share {margin-left: 0%; margin-top: 20px;}
#share li {margin-right: 5px;}

#contact {width: 80%; margin: 40px 0 0 5%; padding: 70px 8px 30px 8px;}

#footer { height : 100px; background: url(/images/footer/hill_01_s.png) no-repeat 0 100%, url(/images/footer/hill_02_s.png) no-repeat 40% 100%, url(/images/footer/hill_03_s.png) no-repeat 62% 100%, url(/images/footer/hill_04_s.png) no-repeat 85% 100%, url(/images/footer/hill_05_s.png) no-repeat 100% 100%;}

#fourfour {width: 80%; margin: 30px 0 0 5%; padding: 20px 20px 10px 20px;}

h1 {font-size: 1em;}
h2 {font-size: 1em;}
h3 {font-size: 70%;}

a.shop { bottom: 20%; left: 10%; font-size: 1em; padding: 1px 3px;}
a.contact { bottom: 30%; left: 69%; font-size: 1em; padding: 1px 3px;}
a.sound {font-size: 1em; padding: 1px 3px;}
a.pictures {font-size: 1em; padding: 1px 3px;}
a.video {font-size: 1em; padding: 1px 3px;}
a.agenda {font-size: 1em; padding: 1px 3px; top: 60%;}
a.sansClaire {left: 10%; top: 15%;font-size: 0.9em; padding: 1px 3px;}
a.sansClaireDe {top: 56%; left: 13%; font-size: 0.65em; padding: 0px 3px;}
a.sansClaireFr {top: 58%; left: 28%; font-size: 0.65em; padding: 0px 3px;}
a.sansClaireEn {top: 63%; left: 43%; font-size: 0.65em; padding: 0px 3px;}

/******************** CONTACT FORM ************************************************************************************/
/**********************************************************************************************************************/
#kontakt input[type="text"] {width: 180px;}
#kontakt input[type="email"] {width: 180px;}
#kontakt textarea {width: 180px;}
#kontakt input[type="submit"] {margin-top: 0; margin-left: 28%;}
#kontakt {width: 280px; margin: 1em 0 0 0;}
/**********************************************************************************************************************/

}






/************* 480 PX LAYOUT FOR 480px MOBILES, LANDSCAPE IPHONES AND NARROW BROWSERS *********************************/
/**********************************************************************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {

#header {height: 190px;}

#cloud4 {top: 50%; width: 30%;}

li.gallery {width: 30%; margin: 4%; padding: 5px;}
li.gallery:nth-child(5n+1) { margin-left: 4%; clear: none;}
li.gallery:nth-child(2n+1) { margin-left: 0; clear:left;}
li.gallery:nth-child(3n+1) {-webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg);}
li.gallery:nth-child(3n+2) {-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg);}

.event {margin-bottom: 40px; height: auto;}
.event p {margin-left: 20%;}
.event h2 {margin-left: 20%;}
img.agendaEven {width: 14%;}
img.agendaOdd {width: 14%;}

.view p {margin-left: 0;}
.view h2 {margin-left: 0;}
img.view {display: none;}
img.contact {float: none; width: 40%; margin-bottom: 1em;}

#intro {padding: 0px 0px 100px 20px; margin-top: -50px;}
img.intro {width: 60%;}
img.bird {width:15%; float: left; display: inline;}

#cont {padding: 20px 40px 140px 40px;}

.song {width: 100%; float: left; clear: left; margin-bottom: 1em;}
.song:nth-child(2n+2) {float: left;}

#contact {width: 55%; margin: 30px 0 0 20%; padding: 70px 8px 30px 8px;}

#footer { height : 140px; background: url(/images/footer/hill_01_m.png) no-repeat 0 100%, url(/images/footer/hill_02_m.png) no-repeat 40% 100%, url(/images/footer/hill_03_m.png) no-repeat 62% 100%, url(/images/footer/hill_04_m.png) no-repeat 85% 100%, url(/images/footer/hill_05_m.png) no-repeat 100% 100%;}

#fourfour {width: 60%; margin: 30px 0 0 15%; padding: 20px 20px 10px 20px;}

h1 {font-size: 1.1em;}
h2 {font-size: 1.1em;}
h3 {font-size: 70%;}

a.shop { bottom: 20%; left: 13%; font-size: 1.1em; padding: 1px 3px;}
a.contact { bottom: 30%; left: 72%; font-size: 1.1em; padding: 1px 3px;}
a.sound {font-size: 1.1em; padding: 1px 3px;}
a.pictures {font-size: 1.1em; padding: 1px 3px;}
a.video {font-size: 1.1em; padding: 1px 3px;}
a.agenda {font-size: 1.1em; padding: 1px 3px;}
a.sansClaire {font-size: 0.9em; padding: 1px 3px;}
a.sansClaireDe {top: 56%; left: 13%; font-size: 0.65em; padding: 0px 3px;}
a.sansClaireFr {top: 58%; left: 28%; font-size: 0.65em; padding: 0px 3px;}
a.sansClaireEn {top: 63%; left: 43%; font-size: 0.65em; padding: 0px 3px;}

/******************** CONTACT FORM ************************************************************************************/
/**********************************************************************************************************************/
#kontakt input[type="text"] {width: 220px;}
#kontakt input[type="email"] {width: 220px;}
#kontakt textarea {width: 220px;}
#kontakt {width: 370px; margin: 1em 0 0 0;}
/**********************************************************************************************************************/

}






/************* XL LAYOUT FOR BIG SCREENS ******************************************************************************/
/**********************************************************************************************************************/
@media only screen and (min-width : 1380px) {

body {font-size: 110%;}

#header {height: 350px;}

li.gallery {width: 16%; margin: 1.5%; padding: 5px; box-shadow: 0 0 0 5px #FFFFFF, 5px 5px 15px #000; border-radius: 3px;}

.event {margin-bottom: 60px; height: 105px;}
.event p {margin-left: 12%;}
.event h2 {margin-left: 12%;}
img.agendaEven {width: 8%;}
img.agendaOdd {width: 8%;}

#cont {padding: 40px 85px 240px 85px;}

.song {width: 30%; float: left; clear: none; margin-bottom: 1.5em; margin-right: 1.5em;}
.song:nth-child(2n+2) {float: left;}

#intro {padding: 0px 0px 160px 60px; margin-top: -80px;}
img.intro {width: 58%;}
img.bird {width:18%; float: left;}

#contact {width: 35%; margin: 40px 0 0 30%; padding: 90px 10px 40px 10px;}

#footer {height: 240px; background: url(/images/footer/hill_01_l.png) no-repeat 0 100%, url(/images/footer/hill_02_l.png) no-repeat 30% 100%, url(/images/footer/hill_03_l.png) no-repeat 62% 100%, url(/images/footer/hill_04_l.png) no-repeat 85% 100%, url(/images/footer/hill_05_l.png) no-repeat 100% 100%;}

#fourfour {width: 35%; margin: 40px 0 0 30%; padding: 30px 30px 20px 30px;}

/* h1 {font-size: 1.8em;} */
h3 {font-size: 85%;}

a.shop { bottom: 20%; left: 10%; font-size: 1.8em; padding: 10px 20px;}
a.contact { bottom: 30%; left: 71%; font-size: 1.8em; padding: 10px 20px;}
a.sound {font-size: 1.8em; padding: 10px 20px;}
a.pictures {font-size: 1.8em; padding: 10px 20px;}
a.video {font-size: 1.8em; padding: 10px 20px;}
a.agenda {font-size: 1.8em; padding: 10px 20px;}
a.sansClaire {top: 32%; left: 14%; font-size: 1.8em; padding: 10px 20px;}
a.sansClaireDe {top: 60%; left: 15%; font-size: 1em;}
a.sansClaireFr {top: 62%; left: 28%; font-size: 1em;}
a.sansClaireEn {top: 65%; left: 42%; font-size: 1em;}
/******************** CONTACT FORM ************************************************************************************/
/**********************************************************************************************************************/
#kontakt input[type="submit"] {margin-left: 28%;}
#kontakt label {width: 120px; }
#kontakt {width: 420px; margin: 20px 0 0 25%;}
/**********************************************************************************************************************/

}




/************* XXL LAYOUT FOR BIG SCREENS ******************************************************************************/
/**********************************************************************************************************************/
@media only screen and (min-width : 1824px) {

#header {height: 400px;}

li.gallery {width: 16%; margin: 1.5%; padding: 5px; box-shadow: 0 0 0 5px #FFFFFF, 5px 5px 15px #000; border-radius: 3px;}

.event {margin-bottom: 80px; height: 120px;}
.event p {margin-left: 12%; width: 60%;}
.event h2 {margin-left: 12%;}
img.agendaEven {width: 8%;}
img.agendaOdd {width: 8%;}

.view p {margin-left: 20%}
.view h2 {margin-left: 20%;}
img.view {width: 15%;}

#intro {padding: 0px 0px 160px 80px; margin-top: -60px;}
img.intro {width: 52%;}

#cont {padding: 100px 85px 330px 85px;}

#share {margin-left: 20%; margin-top: 30px;}

#contact {width: 30%; margin: 60px 0 0 35%; padding: 100px 10px 60px 10px;}

#footer {height: 330px; background: url(/images/footer/hill_01_xl.png) no-repeat 0 100%, url(/images/footer/hill_02_xl.png) no-repeat 30% 100%, url(/images/footer/hill_03_xl.png) no-repeat 62% 100%, url(/images/footer/hill_04_xl.png) no-repeat 85% 100%, url(/images/footer/hill_05_xl.png) no-repeat 100% 100%;}

#fourfour {width: 32%; margin: 40px 0 0 30%; padding: 30px 30px 20px 30px;}

h1 {font-size: 2.3em; line-height: 1em;}
h3 {font-size: 100%;}

a.shop { bottom: 30%; left: 12%; font-size:2.3em; padding: 15px 25px;}
a.contact { bottom: 30%; left: 71%; font-size: 2.3em; padding: 15px 25px;}
a.sound {font-size: 2.3em; padding: 15px 25px;}
a.pictures {font-size: 2.3em; padding: 15px 25px;}
a.video {font-size: 2.3em; padding: 15px 25px;}
a.agenda {font-size: 2.3em; padding: 15px 25px;}
a.sansClaire {left: 10%; font-size: 2.1em; padding: 15px 25px;}
a.sansClaireDe {top: 65%; left: 15%; font-size: 1em;}
a.sansClaireFr {top: 68%; left: 24%; font-size: 1em;}
a.sansClaireEn {top: 70%; left: 33%; font-size: 1em;}

#kontakt {margin: 20px 0 0 23.5%;}

}