/* CUSTOMSTYLES LUCKYS */

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

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

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

}

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

/* STYLESOLD */

@-webkit-viewport {
  width:device-width;
}

@-moz-viewport {
  width:device-width;
}

@-ms-viewport {
  width:device-width;
}

@-o-viewport {
  width:device-width;
}

@viewport {
  width:device-width;
}

@media screen and (max-width: 25em) {
  @-ms-viewport {
    width:320px;
  }
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
main,
section,
summary {
  display:block;
}

audio,
canvas,
video {
  display:inline-block;
}

audio:not([controls]) {
  display:none;
  height:0;
}

input[hidden] {
  display:none;
}

input,
textarea {
  border: none;
}

html {
  height:100%;
}

@media only screen and (orientation: landscape), (orientation: portrait) {
  html {
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
  }
}

body {
  background-image: url('../Images/bkgrd-blue.png');
  background-repeat: repeat;
  display: block;    
  font-family: 'sansitaregular', Georgia, sans-serif;
  font-size: 20px;
  color: #335;
  width: 320px;
  margin: 0 auto;
}

#t3onepage{
    width: 100%;
}

a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

a:visited {
  color:#000;
}

a:focus,
a:hover,
a:active {
  -webkit-transform: scale(1.1) rotateZ(4deg);
  transform: scale(1.1) rotateZ(4deg);
}

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

img {
  border:0;
  vertical-align:bottom;
  -ms-interpolation-mode:bicubic;
  max-width:100%;
  height:auto;
}

svg:not(:root) {
  overflow:hidden;
}

/* CUSTOMSTYLES LUCKYS */

#t3onepage {
    display: flex;
    flex-flow: column;
    margin: 0px auto;
    padding: 0px 9%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'sansitaextrabolditalic';
  font-weight: normal;
}

h1.csc-firstHeader {
    color: #ff4500;
    font-size: 50px;
    text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white;
}

header {
    display: flex;
    flex-flow: row;
    margin-bottom: 25px;
}

section {
  padding: 1em;
}

form {
  margin: -1em;
  padding: 1em;
}

.logo {
    height: 75px;
}

/* NAVIGATION */

#header .wrapper {
    display: flex;
    flex-flow: row;
    flex: 1;
}

nav a.nav-toggle {
  color: red;
  font-size: 25px;
  margin-left: auto;
}

.nav-toggle {
    color: #cc0066;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
  position:absolute;
  top:0.75em;
  right:0.5em;
  z-index:111;
  background-color:#fff;
  border-radius:5px;
  font-size:1em;
  padding:0.25em 1em;
  text-decoration:none;
  -webkit-transition:background-color,0.4s;
  -moz-transition:background-color,0.4s;
  -o-transition:background-color,0.4s;
  transition:background-color,0.4s
}
.nav-toggle:hover,.nav-toggle:focus {
  background-color:#31373a;
  color:#fff;
  outline:none;
}
ul.navigation.nav-collapse.opened {
    margin-top: 75px;
}

ul.navigation.nav-collapse.closed {
    display:none;
}

ul.navigation.nav-collapse.closed li {
    min-width: 60px;
}

.nav-collapse>li>a {
  text-decoration: none;
}

#musik .wrapper {
    display: flex;
    flex-flow: column;
}

#musik .wrapper .tx-html5mediaelements {
    display: flex;
    flex-flow: column;
    padding-left: 60px;
}

#musik .wrapper p a.download {
    color: red;
    text-decoration: none;
}

#musik .wrapper p a.download:hover {
    color: #009ddc;
}

.tx-html5mediaelements a {
    background-color: #E1001A;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 1em;
    padding: 0.75em 0.8em 0.2em;
    text-decoration: none;
    margin-top: 1em;
    position: relative;
}

.tx-html5mediaelements a::before {
    content: "e";
    font-family: 'hibiscusregular';
    font-size: 3em;
    background-color: #009DDC;
    border: 2px solid #fff;
    border-radius: 2em;
    padding: 0.3em;
    line-height: 0;
    left: -1.5em;
    margin-right: -1.5em;
    position: relative;
    top: 0.2em;
}


section#konzerte {
  background: rgba(225,0,26,0.3);
  -webkit-transform: rotateZ(1deg);transform: rotateZ(1deg);
}

section#kontakt form {
    background: rgba(26,225,0,0.3);
    -webkit-transform: rotateZ(-3deg);transform: rotateZ(-3deg);
    border-radius: 60% 100% 50% 90% / 90% 70% 90% 60%;
}

.highlight-section {
  background-color: transparent;
}

.navigation li a {
  font-family: 'sansitaregular';
  color: red;
  padding: 0.5em 0.75em;
}

.navigation>li>a:hover,
.navigation>li>a:focus,
.navigation>li.is-active a {
  color: #00008b;
}

@keyframes palme {
  from {-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg);}
  50% {-webkit-transform:rotateZ(-15deg);transform:rotateZ(-15deg);}
  to: {-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg);}
}



nav ul{
    position: relative;
    overflow: visible;
    z-index: 500;
    margin-top: 60px;
}

nav ul:after{
    display: none;
}

.navigation li a {
    background: crimson;
    color: #fff;
    display: block;
    margin-top: 10px;
    border-radius: 50px 20px 50px 20px;
    width: 70px;
}

#header nav {
  margin-left: auto;
}

main {
    display: flex;
    flex-flow: column;
}

#aloha,
#musik,
#konzerte,
#kontakt {
    display:flex;
    flex-flow: column;
}

#aloha figure>span img,
#musik figure>span img, 
#kontakt figure>span img{
    border: 10px solid #fff;
    box-shadow: 1px 1px 1px #999;
    display: block;
    width: 200px;
}

figure.csc-textpic-image.csc-textpic-last {
    padding: 0;
    margin: 0;
    width: 100%;
}


/*////ALOHA///////////*/

#aloha .wrapper {
    display: flex;
    flex-flow: column;
}

#aloha .wrapper:first-child .csc-textpic .csc-textpic-text {
    display: none;
}

#aloha figure>span img {
    transform: rotateZ(-6deg);
}

#aloha .wrapper:nth-child(2) {
  margin-left: auto;
  background: rgba(255,255,255,0.8);
  padding: 7%;
  border-radius: 42% 44% 56% 37%;
  -webkit-transform: rotate(2deg);transform: rotate(2deg);
}

.csc-textpic-image.csc-textpic-last {
    padding: 0px; 
}

/*////MUSIK///////////*/

#musik {
    background: rgba(255,241,171,0.5);
    -webkit-transform: rotateZ(-1.5deg);transform: rotateZ(-1.5deg);
    border-radius: 60% 100% 50% 90% / 90% 70% 90% 60%;
    padding-bottom: 10%;
}

#musik {
  flex-flow: row wrap;
}

#musik .wrapper {
    flex: 1 350px;
    padding: 50px 0;
    min-width: 50%;
}

#musik .wrapper:nth-child(1) {
  margin-bottom: 100px;
}

#musik .wrapper:nth-child(odd) {
    -webkit-transform: rotateZ(-3deg);transform: rotateZ(-3deg);
}

#musik .wrapper:nth-child(even) {
    -webkit-transform: rotateZ(6deg);transform: rotateZ(6deg);
}

#musik .wrapper:nth-child(4){
  flex-flow: column;
}

#musik .wrapper .csc-mailform form ol{
  display: flex;
  flex-direction: column;
}

#musik .wrapper .csc-mailform form ol li{
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;  
  margin-bottom: 1em;
}

#musik .csc-mailform form ol li input,
#musik .csc-mailform form ol li textarea,
#musik .csc-mailform form ol li .btn {
    font-size: 1em;
}

#musik .csc-mailform form ol li input {
  height: 50px;
}

#musik .wrapper:nth-child(3) {
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg);
  margin-top: 5%;
}

#musik .csc-header-n3:after {
  content: 'Sie ist da - unsere erste CD! \A (15,- €/Stk., zzgl. Versand)';
  font-family: 'sansitaregular';
  font-size: 20px;
  white-space: pre;

}

#musik input#field-9 {
  font-family: 'sansitaregular';
  font-size: 20px;
}

/*////MUSIKER///////////*/

#musiker {
  display: flex;
  flex-flow: column;
}

#musiker figure>span {
  border: none;
  box-shadow: none;
}

#musiker img {
  position: relative;
}

#musiker img:nth-child(2) {
  margin-top: 2em;
}

#musiker img:nth-child(4) {
  margin-top: -1em;
}

.csc-textpic.csc-textpic-responsive.csc-textpic-center.csc-textpic-above {
    margin-left: 0;
}

.csc-textpic-imagewrap {
    width: 100%;
}

#musiker .wrapper:first-child {
  flex-flow: column;
}

#musiker .wrapper:first-child .csc-textpic-text {
  background: #fff;
  line-height: 1.25;
  padding: 0 2%;
}

#musiker .wrapper:nth-child(2) {
    display:flex;
    flex-flow: column;
}

#musiker .wrapper:nth-child(2) .csc-textpic {
  display: flex;
  flex-flow: row;
}

#musiker .csc-textpic-imagecolumn {
  flex: 1 350px;
}

#musiker .csc-textpic-imagerow {
  display: flex;
  flex-flow: column;
}

figcaption.csc-textpic-caption {
    font-size: 40px;
    color: #ff4500;
    text-align: center;
    text-shadow: 1px  1px 1px white, 1px -1px 1px white, -1px  1px 1px white, -1px -1px 1px white;
}

/*////KONZERTE///////////*/

#konzerte {
  border-radius: 60% 100% 80% 90% / 90% 70% 90% 60%;
  padding: 10%;
}

#konzerte .wrapper:first-child {
  display: flex;
  flex-flow: column;
}

#konzerte .panel,
#konzerte .panel .event-description .bodytext a,
a.accordion-toggle.collapsed {
    color: #00008b;
    text-decoration: none;
}

#konzerte .panel-default:after{
    background: #00008b;  
    border-radius: 2px;
    content: '';
    display: block;
    height: 2px;
    margin-top: 25px;
    margin-left: 33.3333%;
    width: 25%;
}

.tx-gbevents-pi1 {
  color: #fff;
  padding: 0 1em;
}

/*////KONTAKT///////////*/

#kontakt {
    background-color: rgba(135,206,235,0.5);
    -webkit-transform: rotateZ(-1.5deg);transform: rotateZ(-1.5deg);
    border-radius: 60% 100% 50% 90% / 90% 70% 90% 60%;
    flex-flow: column;
}

#kontakt .wrapper:nth-child(3){
  flex-flow: column;
}

#kontakt .csc-mailform form ol{
  display: flex;
  flex-direction: column;
 }

#kontakt .csc-mailform form ol li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

#musik input#field-9,
form ol li .btn {
  background-color: red;
  border: 2px solid #fff;
  border-radius: 1em;
  padding: 0.4em 0.8em 0.4em;
  color: #fff;
  font-family: 'sansitaregular';
  font-size: 20px;
  text-transform: uppercase;
}

#musik input#field-9:hover,
form ol li .btn:hover{
    background-color: #009ddc;
}

#kontakt .csc-mailform form ol li input,
#kontakt .csc-mailform form ol li textarea,
#kontakt .csc-mailform form ol li .btn {
  flex: 1 20rem;
}

#kontakt .wrapper figure:first-child {
    margin-bottom: 30px;
    transform: rotateZ(-3deg);
}

#kontakt .infos .wrapper {
    flex-flow: column;
}

#kontakt .infos {
    background-color: rgba(251,152,224,0.5);  
    border-radius: 60% 100% 50% 90% / 90% 70% 90% 60%;
    margin-top: 5em;
    padding: 1em 2em;
}

#kontakt .wrapper:last-child {
    display: flex;
    flex-flow: column;
}

#kontakt .wrapper
div.csc-mailform li label {
    float: none;
    margin-right: 0;
    vertical-align: initial;
}

#kontakt {
    color: #00008b;
}

#kontakt p.bodytext a {
    color: #fff;
    margin-left: 5px;
    text-decoration: none;
}

#kontakt p.bodytext a:focus,
#kontakt p.bodytext a:hover,
#kontakt p.bodytext a:active {
    color: #ff4500;
    
}

.csc-textpic-imagerow {
    display: flex;
    flex-flow: column;
    margin-top: 1em;
}

.csc-textpic-imagecolumn {
    flex: 1;
}

@media (min-width: 425px){

    body {
        width: 425px;
    }
        
    .nav-toggle {
        display:none;
    }
    
    ul.navigation.nav-collapse.nav-collapse {
        display:flex;
        flex-flow: row;
    }
    
    .navigation li a {
        background: none;
        border-radius: 0px;
        color: red;
        display: block;
        font-size: 16px;
        width: 100%;
    }
    
        ul.navigation.nav-collapse.nav-collapse {
        margin-top: 0;
    }
    
}


@media (min-width: 551px){
    
    body {
        width: 551px;   
    }
    
    #aloha figure>span img,
    #musik figure>span img, 
    #kontakt figure>span img{
        border: 25px solid #fff;
        width: 85%;
    }
    
    .csc-textpic-image.csc-textpic-last {
        width: 75%
    }
    
}
    
    


@media (min-width: 768px) {
    
    body {
        width: 768px;
    }
    
    #t3onepage {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .logo {
        height: 100px;
    }

    nav ul:after{
      content: '123';
      color: transparent;
      font-size: 75px;
      background-image: url(/././fileadmin/Inhaltsbilder/palmwedel.png);
      background-size: contain;
      background-repeat: no-repeat;
      margin-top: -20px;
      margin-left: -150px;
      width: 150px;
      height: 150px;
      position: relative;
      animation: palme 15s ease-in-out infinite;
      z-index: -1;
      -moz-transform-origin: 100% 0;
      -ms-transform-origin: 100% 0;
      -o-transform-origin: 100% 0;
      -webkit-transform-origin: 100% 0;
      transform-origin: 100% 0;
    }
    
    .navigation li a {
        font-size: 25px;
        padding: 0.5em 0.5em;
        -webkit-transform: rotateZ(-20deg);transform: rotateZ(-20deg);
        text-shadow: 1px  1px 0px #fff,
                      1px -1px 0px #fff,
                     -1px  1px 0px #fff,
                     -1px -1px 0px #fff;
    }
    
    nav ul:after{
    display: inline-block;  
    }
    
    #aloha,
    #konzerte {
        display:flex;
        flex-flow: row;
    }
    
    #aloha .wrapper {
        max-width: 50%;
    }
    
    #aloha .wrapper:nth-child(2) {
      -webkit-transform: rotate(5deg);transform: rotate(5deg);
    }
    
    #musik {
        -webkit-transform: rotateZ(-3deg);transform: rotateZ(-3deg);
    }
    
    #musik .wrapper:nth-child(2,4) {
        margin-top: 100px;
        -webkit-transform: rotate(5deg);transform: rotate(5deg);
    }
    
/*    
    #musik .wrapper .tx-html5mediaelements {
        padding-left: 120px;
    }
    

    #musik .wrapper:nth-child(3) {
        margin-left: 10%;
    }
*/
    
    section#konzerte {
    -webkit-transform: rotateZ(3deg);transform: rotateZ(3deg);
    }
    
    #kontakt .wrapper:nth-child(2) {
        margin-top: 30freipx;
    }
    
    form {
        padding: 1em 2em;
    }
    
    #musiker .csc-textpic-imagerow {
        flex-flow: row;
    }
    
    .csc-textpic-imagerow {
        flex-flow: row;

    }
    
    .csc-textpic-imagecolumn img{
        margin-left: 50%;
    }

}

@media (min-width: 991px) {

    body {
        width: 991px;
    }    
    .logo {
        height: 150px;
    }
    .navigation {
        width: 80%;
    }

    .navigation li a {
        font-size: 30px;
        padding: 0.5em 1em;
    }

    .navigation>li>a:hover,
    .navigation>li>a:focus,
    .navigation>li.is-active a {
        -webkit-transform: scale(1.1) rotateZ(4deg);
        transform: scale(1.1) rotateZ(4deg);
    }                  
}

@media (min-width: 1280px) {

    body {
        max-width: 1280px;
    } 
}

#huladoll img {
    position: fixed;
    bottom: 60%;
    z-index: 10000;
    right: 0;
    height: 25%;
}

@media (min-width: 990px) {
  #huladoll img {
    bottom: 0px;
    right: 2%
    }
}