@charset "utf-8";
/* CSS Document */
@import url(normalize.css);
/*@import url(http://fonts.googleapis.com/css?family=Montserrat:700,900);
@import url(http://fonts.googleapis.com/css?family=Lobster:400,700,800);*/


@font-face {
    font-family: 'antoniolight';
    src: url('fonts/antonio-light-webfont.woff2') format('woff2'),
         url('fonts/antonio-light-webfont.woff') format('woff');
    font-display:swap;
}
@font-face {
font-family: "Bebas Neue", sans-serif;

    src: url('fonts/BebasNeue-Regular.woff2') format('woff2'),
    font-display:swap;
}

/* Used Colors 
Hellgelb					#fff6a4
Dunkelgrün   				#6b8700 / #80b114
Hellgrün					#9fdc17

*/
/* ######################################## */


html{font-size:16px;font-size:1rem;}
body{margin:0 auto;padding:0;overflow-x:hidden}
body {-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif;color: #000;}
*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box;  box-sizing:border-box;}

*::-moz-selection, *::selection{background-color: #9fdc17;color:#25640f;text-shadow:none}
h1::-moz-selection, h2::-moz-selection,  p::-moz-selection, figcaption::-moz-selection,li::-moz-selection,strong::-moz-selection,span::-moz-selection,em::-moz-selection{background-color: #9fdc17; color:#25640f;opacity:0.5}
h1::selection, h2::selection,  p::selection , figcaption::selection,li::selection,strong::selection,span::selection,em::selection {background-color: #9fdc17; color:#25640f;opacity:0.5}
h3::-moz-selection, footer p::-moz-selection {background-color: #d18514; color:#25640f;}
h3::selection{background-color: #9fdc17; color:#25640f;}
ul {list-style-type:disc;margin:0;padding:0;}
img{vertical-align: top;}

h1{font-family: 'Bebas Neue', sans-serif;font-weight:normal;text-transform:uppercase;font-size:72px;font-size:4.5rem;letter-spacing:3px;letter-spacing:0.2rem;margin:0 0 1rem 0;line-height:75px;position:relative;z-index:10;text-align: center;}
h2{font-family: 'antoniolight', sans-serif;font-weight:normal;text-transform:uppercase;font-size:50px;font-size:3.125rem;letter-spacing:3px;letter-spacing:0.2rem;margin:0;font-size:2.125rem;}
h3{font-family: 'antoniolight', sans-serif;font-weight:normal;text-transform:none;letter-spacing: 0.1rem;
    margin: 50px 0;
    font-size: 2.125rem;font-size: 34px;
    color: #444;
    border-bottom: dashed 1px #444;
    padding-bottom: 10px;
    line-height: 2.2rem;}

p, a, article ul li{font-size:1rem;line-height:1.5rem;word-wrap: break-word;text-decoration:none}
/*p:first-letter{font-size:1.5rem;}*/

a{color:#e94d21;text-decoration:none;}
a:focus{outline:none}
strong, .text a {color: #d18514;letter-spacing: 0.5px;font-weight:bold;text-transform:uppercase}
strong, .text a {
color: #25640f;
  letter-spacing: 0.5px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #9fdc17;
  padding: 0 10px;
  border-radius: 40px;
  }
.nobr{white-space:nowrap;}


header{height:55px; width:100%;background:#FFF;border-bottom: 1px solid #6b8700;position:fixed;top:0;z-index:100;}
/*header::after {
  content:'';
  position:absolute;
  width:100%;
  height:70px;
  background-image:url(../pics/weinreben-girlande.png);
  background-repeat: repeat-x;
  top: 55px;
}
*/
#btn-menue{display:none;height:64px;height:4rem;text-align:left;padding:1.25rem}
#btn-menue a{color: #333;display: block;font-family: 'Montserrat',sans-serif;font-size: 0.95rem;height: 100%;padding: 15px 30px;text-transform: uppercase;letter-spacing:1.5px}
.wrap{max-width:1012px;margin: 80px auto 0;}
main{margin-bottom:48px;margin-bottom:3rem;}
/* Navigation */

nav{display: block;height: 55px;margin: 0 auto;max-width: 1112px;text-align:center}
nav ul{display:inline-block;list-style-type:none}
nav li{float:left;height:55px;border-left:1px solid #d8d8d8;text-align:center;}
nav li a{color: #333;display: block;font-family: 'Montserrat',sans-serif;font-size: 0.95rem;height: 100%;padding: 15px 30px;text-transform: uppercase;letter-spacing:1.5px}
nav li:first-child{border-left:none;}
nav li a:hover{background: #bed925;color: #fff;}
.highlight{background: #6b8700;color: #fff;}

.startbild {
    height: 100vh;
    width: 100%;
    background: url(../pics/Weinbotschafter-im-Wingert.jpg) no-repeat;
	background-position: left 0px top 20px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* background-position-y: -25px; 
    margin-top: 55px; */
 }
 .greeting{
  color: #FFF;
  position: absolute;
  border: 1px solid #FFF;
  border-radius: 40px;
  padding: 2%;
/*  background-color: rgba(118, 210, 255, 0.15);*/
  background-color: rgba(0, 0, 0, 0.05);
  right: 6%;
  top: 40%;
 }
 
.greeting p{font-family: 'Bebas Neue', sans-serif;font-weight:normal;font-size: 2.5rem; line-height: 3rem; letter-spacing: 0.3rem;  text-align: center;margin: 5px 0;}

.seite{position:relative;background:none;clear:both}
.clear:after {content:"";display:table;clear:both;}
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
.half{width: 50%;float: left;}
.full{width:100%;}
.videocontainer{ padding-right:1rem;}
.audioplayer{border:1px solid #333; padding: 2% 5% 0; margin-bottom: 5%; float: left;
    background-color: #d18514;}
	
.audioplayer:nth-child(odd) {width:45%;margin-right: 5%;}
.audioplayer:nth-child(even) {width:45%;margin-left: 5%;background: #CCC}	

	
.caption{font-family: 'antoniolight', font-size: 16px;
    font-size: 1rem;
    margin: 0 0 15px 25px;
    color: #FFF;
    letter-spacing: 2px;
    text-transform: uppercase;}
audio {margin-bottom: 8%;width:100%}

.round{ -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*ios 7 border-radius-bug */
-webkit-transform: rotate(0.000001deg); /*mac os 10.6 safari 5 border-radius-bug */
-webkit-border-radius: 20px; 
-moz-border-radius: 20px;
border-radius: 20px; 
overflow: hidden;
}

.player .vp-title .vp-title-header h1 	{font-size: 1.5em!important;}

.vp-styles{
background:#006600 !important;
background:rgba(23,35,34,.0)!important;
}
.test{width:20rem}

/* ############  Textseiten Styles     ###################### */
.anker{width:100%;height:50px}
.akkordeon{width:222px;height:211px;background:url(../pics/Weinblatt.png) 0 0 no-repeat;position:absolute;z-index:-1;right: -70px}
article ul {list-style:outside disc none;margin-left:20px;margin-left:1,25rem;}
article ul li{margin-bottom: 5px;padding-left: 10px;}
article ul li::marker { color: #80b114;}
.home {padding-left: 35px;}
.weinbotschafter::before, .instrumental::before, .gesang::before, .buchen::before, .vita::before, .kontakt::before {
    content: '';
    position: absolute;
    width: 222px;
    height: 165px;
    background-image: url(../pics/Weinblatt.png);
    background-repeat: no-repeat;
    right: -70px;
	top: -100px;
}
.gesang::before, .kontakt::before {
	left: -70px;
    background-image: url(../pics/Weinblatt.png);
}
.vita::before {
    width: 427px;
    height: 385px;
	background-image: url(../pics/Akkordeon-klein-Vita.png);
	right: -105px;
    top: -250px;
    rotate: 15deg;
}

.weinbotschafter, .instrumental, .gesang, .buchen, .kontakt{margin-top: 20px;}
.text, .bild{position:relative;width:100%;background: none repeat scroll 0 0 rgba(255, 255, 255, 1);border:1px solid #b1b0b0;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;}
.home .text {position:relative;width:50%;}
.buchen {margin-bottom: 90px;}
.bild{margin:50px 0 80px;}
.breitbild-view {
	position: absolute;
    width: 100%;
}
.schlussbild{margin-top: -160px;padding-bottom: 2rem;width: inherit;position: relative;left: auto;z-index: 50;}
.home .text{border:0;background:none;margin:0;padding:0;float:left}
img{width:100%}
.instrumental{margin-bottom: 4.5%;}
.text{margin-top: -40px;padding: 4.5%;}
.instrumental .bild, .interesse .bild {margin-left: -6%;padding-top: 50px;}
.instrumental .bild img, .interesse .bild img{background:#FFF;padding:15px;border:1px solid #AAA;-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);}
.exklusiv{width:276px;height:276px;position:absolute;background:url(../pics/exklusiv.png) 0 0 no-repeat;margin-top:-125px;right:-60px}
.btn-soundcloud{width:344px;position:absolute;background:#4d4d4d no-repeat left center; bottom: -27px;left: 40%;border: 3px solid #FFF; outline: 4px solid #4d4d4d;text-align:center}
.btn-soundcloud a{color:#FFF;}
.btn-soundcloud img{vertical-align:baseline;}
.interesse .text {width:65%;padding-right:100px}
.interesse .bild {width:35%}

.kontakt .text{width:100%;}
.kontakt .akkordeon{margin-left:50%;}
.balken{   
	padding: 1rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: #80b114;
	border-top: double;
    border-bottom: double;
    border-color: #FFF;text-align: center;}
.balken p {
    display: initial;
    font-size: 0.9rem;
    color: #FFF;
	letter-spacing: 0.1rem;	
}	

/* ###########    TABLE STYLES    ################# */
#songliste p{line-height:20px; margin:0;word-wrap: break-word;}
td{padding:10px}
.td1{padding-right:30px;}
.td1 , .td2, .td3{vertical-align:text-top;}
.td1, .td4{text-transform:uppercase;font-weight:700}
.td3 a{display:inline-block;width:40px;height:18px;background-image:url(../pics/play-song.gif);background-position:top}
.td3 a:hover{background-image:url(../pics/play-song-mouseover.gif);}
tr{border-bottom:1px #b0b0b0 solid}
tr:last-of-type{border:none}
.changerow{display:none;border:none}

/*------------------------------------------------------------------*/
.col1{width:33.3333333333333%; padding:0 20px; float:left;}
.col2{width:66.6666%; padding:0 20px 0;float:left;}
.col3 {width: 100%; float: left;}

.col-flexible{width:auto; padding: 0 10px 50px ;float:left}
.col-flexible:first-child{padding:0 40px 50px ;}
.col-flexible:last-child{padding:0 40px 50px;margin-left:50px;border-left:#0199b8 1px solid}
.col-flexible p, .col-flexible a{color:#4f9bc3;text-shadow:none;line-height:1.5rem;margin:0;display:block;}


/* ######################################## */

}

#btn-totop{background: url("../pics/design/btn-to-top.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);bottom: 20px;float:right;height:57px;margin-right:5%;margin-top:50px;right:50px;width:76px;}
/*.anker{background-color:#FF6699}
header{opacity:0.5}*/









/* Media Query Styles ---------------------------------------------------------------- */

@media only screen and (max-width: 1650px) {

 .greeting{
  background-color: rgba(26, 97, 47, 0.3);
  right: 2%;
  top: 33%;

 }

}

@media screen and (max-width: 1246px) {
.vita::before {background-image: url(../pics/Weinblatt.png);left: -70px; top: -100px;width: 222px;   height: 165px;}
}

@media only screen and (max-width: 1080px) {

 .greeting{
    width:100%;
    color: #FFF;
    border: 1px solid #FFF;
    padding: 2%;
	background-color: rgba(248, 203, 23, .8);
    right: unset;
    top: unset;
    bottom: 0;
    border-radius: 0px;
 }
 .greeting H1{	font-size: 4.0rem;margin: 0}
 .greeting p{	display:none}
}

@media only screen and (max-width: 1100px) {
.instrumental::before, .gesang::before, .buchen::before, .kontakt::before {background-image:none;}
.home{padding:0 2rem}
.bild {margin-bottom:0}
.wrap{overflow:hidden}
.header{background-color:#CC3399}
}
@media only screen and (max-width: 1065px) {

nav{border-top: 1px solid #d9d9d9;}
.instrumental .bild, .interesse .bild {margin-left: -2%;}
.instrumental::before, .gesang::before, .buchen::before, .kontakt::before {background-image:none;}
.weinbotschafter{margin-top:40px}
.weinbotschafter::before{right:-40px}
}


@media screen and (max-width: 1010px) {
nav li a{font-size: 0.8rem;padding: 15px 15px;}


.audioplayer{border:1px solid #333; padding: 5% 0; float: none;
    background-color: #d18514; width:100% !important;text-align:center}
.audioplayer:nth-child(even), .audioplayer:nth-child(odd) {margin:0 0 1% 0;}	
audio{width:80%; margin:0}
}

@media only screen and (max-width: 959px) {
h1{line-height:60px;font-size:64px;font-size:4rem;}
h2{font-size:40px;font-size:2.5rem;}
.text{margin-top:-40px}
.schlussbild {margin-top: -100px;}
}
@media screen and (max-width: 740px) {
html, body{background-image:none}
h1{line-height:70px;font-size:64px;font-size:4rem;}
h2{font-size:40px;font-size:2.5rem;}
.home .text, .interesse .text {width:100%;}
.home .bild, .instrumental .bild, .interesse .bild {width:100%;margin:0;text-align:center}
.home .text img {width: 70%;margin: 0 15%;}
.startbild {background-position: left -130px top 20px;}
	

}
@media screen and (max-width: 625px) {
h2{font-size:24px;font-size:1.5rem;}
nav li a{font-size:0.75rem}
.text{margin-top:-25px}
.videocontainer{padding-right: 0; margin-bottom: 1rem;}
.half{width: 100%}
}
@media screen and (max-width: 550px) {
nav li a{padding: 15px 10px;}
}

@media screen and (max-width: 738px)
{
nav{display:none;margin: 0 0 20px;border:none}
nav ul{float:left;width:100%;background: none repeat scroll 0 0 #FFF;display:block}
nav li{float:none;width:100%;height:78px;border-top:1px solid #d8d8d8;border-bottom: none;border-left:none;border-right:none;}
nav li a{display: block;font-size: 1rem;height:78px;line-height: 48px;}
nav li a:hover{color:#FFF}
nav li:hover{background-color:#000}

header{background-color:#FFF;height:auto;margin-bottom:10px}
#btn-menue{display:block;}
#btn-menue img{width:30%}
.akkordeon{background-size: 50% auto;margin: -10% 0 0 5%;width:100%}
.kontakt .akkordeon{background-size: 50% auto;margin: -10% 0 0 0;width:100%}
}

@media screen and (max-width: 479px) {
.instrumental .bild, .interesse .bild{padding-top:5px}
h2{font-size:0.9rem;margin-left:0.3rem;}
.interesse .text{padding:4.5%;}
article ul li {padding-left: 0;}
.anker{height:25px;}
.buchen{margin-bottom: 55px;}

}


@media screen and (max-width: 350px) {
.td1{display:none}
.changerow{display: table-row}
}


/* Smartphones (portrait and landscape) ----------- */
@media  only screen 
and (min-width : 320px) 
and (max-width : 480px) {

}

@media screen and (max-width: 345px) {

}
@media screen and (max-width: 319px) {

}
  
/*@media print {
*{background:#FFF;background-image:none;color:#000}
header, .kontaktlinks, aside, footer{display:none}
article, .col2{width:100%}
#logo {width: 40%;float:right}
footer{background-image:none;background:#FFF;}
h1, h2, p{color:#000 !important}
h1 {top-margin:0 !important}
main{width:100%}
 }*/