:root{
    --main-bg-color: #490B2B; 
    --main-bg-color-transparent:rgba(73, 11, 43, 0.75); 
    --button-bg-color: #ffffff;
    --button-color: #490B2B; 
    --highlight-color: #962660; 
}

*{
    padding: 0px;
    margin: 0px;
}

body{
    background-color: #303030;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
}

h1{
    font-family: 'Open Sans', sans-serif;
    font-size: 80px;
    font-weight: 500; 
    text-align: center;
}

h2{
    font-size: 30px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}

h3{
    font-size: 20px;
    font-weight: 100;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px; 
}

h4{
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin-bottom: 8px; 
}

/* Wie bei - "DAS ORIGINAL!" - am Anfang der Seite von der MusicalDinnerShow */
h5{
    font-family: 'Open Sans', sans-serif;
    font-size: 35px; 
    font-weight: 200;
    font-style: italic; 
    text-align: center; 
    color: rgb(222, 222, 222);
    padding-top: 0px; 
    margin-top: 0px;
    transform: translateY(-20px);
}

p{
    font-size: 16px;
    font-weight: 100; 
}

a{
    color:#FFFFFF;
}

a:hover{
    color:var(--highlight-color); 
}


/*TOOL CLASSES*/
.main-bg-color{
    background-color: var(--main-bg-color); 
}

.main-bg-color-gradient{
    background-image: radial-gradient(circle, #490B2B,#000000);
}

.material-icons{
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr; 

    -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
     font-feature-settings: 'liga';

  }

  .right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  
  .left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
  
  .up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }
  
  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .grid-2-1{
    position: relative;
    display: grid; 
    grid-gap: 0px; 
    grid-template-columns:  1fr 1fr; 
    height: 100%;
    width: 100%; 
  }

  .spacer-50{
    background-color: #000000; 
    display: block;
    grid-column: 2;
    width: 100%;
    height: 50px;
    margin: 0px;
    padding:0px; 
  }
/*END TOOL CLASSES*/

/* MAIN GRID */

.site-content-grid{
    display: grid; 
    grid-gap: 0px; 
    grid-template-columns: auto minmax(320px, 1900px) auto;  
    grid-auto-rows: minmax(50px, auto);
}

.content-row{
    overflow: hidden;
    background-color: #000000;
    grid-column: 2;
    padding-top: 65px;
    padding-bottom: 65px;
    padding-left: 15%;
    padding-right: 15%; 
}

/* END MAIN GRID */

/* MAIN CONTAINER FOR THE NAVIGATION HEADER (is <header> -Tag and class="header-bar")*/
header{
    display: block; 
    position: fixed;
    z-index: 11000;
    top: 0px;
    left: 0px;
    right: 0px;
    overflow: visible;
    margin: 0px;
    width: 100%;
    height: 60px; 
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    padding-right: 60px;
    border-bottom: 1px solid var(--main-bg-color); 
}

.header-bar{
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    color: #ffffff;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
.header-bar .logo-text:hover {
    color: var(--highlight-color);
  }


.logo-container {
    display: block; 
    position: absolute; 
    z-index: 10000;
    width: 250px;
    height: 60px; 
    padding-right: 10px; 
    background-color: rgb(51, 51, 51); 
    text-align: center;
}

.logo-container:after{
    content: '';
    position: absolute;
    display: block;
    width: 20px;
    height: 60px; 
    background: rgb(51, 51, 51);
    right: -10px; 
    top:0px; 
    -ms-transform: skewX(-10deg);
    /* IE 9 */
    -webkit-transform: skewX(-10deg);
    /* Safari */
    -moz-transform: skewX(-10deg);
    -o-transform: skewX(-10deg);
    transform: skewX(-10deg); 
}

.logo-text{
    display: inline-block;
    font-family: 'Fjalla One', sans-serif; 
    text-decoration: none;
    color: #ffffff;
    font-size: 25px; 
    line-height: 30px;
    padding: 15px 0px; 
}

nav{
    display: block; 
    position: relative;
    background-color: rgba(0,0,0,0.85); 
    padding: 0px 15px 0px 15px;
    height: 60px; 
}

.main-nav{
    display: block; 
    width: 100%;
    padding: 15px 0px; 
    text-align: center; 
    transition: all 0.2s linear; 
    box-sizing: border-box; 
}

.main-nav ul{
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px; 

    list-style-type: none;
    list-style: none; 
}

.main-nav li{
    display: inline-block;
    position: relative;
    padding: 5px 25px;
    border-right: 1px solid #3b3b3b;
    -ms-transform: skewX(-10deg);
    /* IE 9 */
    -webkit-transform: skewX(-10deg);
    /* Safari */
    -moz-transform: skewX(-10deg);
    -o-transform: skewX(-10deg);
    transform: skewX(-10deg); 
}

.main-nav li:last-child{
    border: none;
}

.main-nav > li a{
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #f0f0f0;
    text-decoration: none;
    text-transform: uppercase;
}

.main-nav >li:hover a{
    color: var(--highlight-color);
}


.shopping-cart-nav {
    color: #FFFFFF;
    display: block;
    position: absolute;
    z-index: 7000;
    right: 0;
    top: 0;
    width: 100px;
    height: 60px;
    padding-right: 15px;
    background: #333333;
    transition: all 0.8s ease; 
  }

  .shopping-cart-nav:hover{
      width: 120px; 
  }

  

  .shopping-cart-nav::before{
      content: '';
      display: block;
      width: 12px;
      height: 60px;
      background: #333333;
      position: absolute;
      left: -6px;
      top: 0px;
      transform: skewX(-10deg); 
  }

  .nav-cart{
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 75px; 
    color: #FFFFFF;
    text-decoration: none;
    line-height: 30px;
  }

  .nav-cart:hover{
      color: var(--highlight-color);
  }

  

  .shopping-cart-nav-content{
    display: block;
    position: fixed;
    z-index: 7000;
    top: 60px; 
    right:0px; 
    width: 200px;
    min-height: 30px;
    color: #FFFFFF;
    padding: 15px;
    background:#333333;
    opacity: 0;
    overflow: visible; 
    transition: opacity 0.8s ease;
    visibility: hidden; 
  }

  .shopping-cart-nav:hover > div{
    display: block;
    visibility: visible;
    opacity: 0.8;
    transition: all 0.8s ease;
  }
  .shopping-cart-nav-content:hover{
      opacity: 0.8;
      visibility: visible;
  }

  

/* END MAIN CONTAINER FOR THE NAVIGATION HEADER (is <header> -Tag and class="header-bar")*/

/* Slider Itegration*/
.slider img{
    display: block; 
    width: 100%; 
    height: auto; 
    margin: 0px; 
    padding: 0px; 
}

.slider{
    margin: 0px; 
    padding: 0px; 
}
/* END Slider Itegration*/

/* BUTTON */
.button-container{
    display: block; 
    width: 100%;
    text-align: center;
    padding-top: 30px;
    font-weight: 800;
    font-size: 18px;
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none; 

}


.button-container .button::before{
    content: '';
    display: block;
    position: absolute;
    left: -7px;
    top: 0;
    width: 14px;
    height: 40px;
    background: var(--button-bg-color);
    -ms-transform: skewX(-10deg);
    /* IE 9 */
    -webkit-transform: skewX(-10deg);
    /* Safari */
    -moz-transform: skewX(-10deg);
    -o-transform: skewX(-10deg);
    transform: skewX(-10deg);
    transition: .1s ease all;
}

.button-container .button::after{
  content: '';
  display: block;
  position: absolute;
  right: -7px;
  top: 0;
  width: 14px;
  height: 40px;
  background: var(--button-bg-color);
  -ms-transform: skewX(-10deg);
  /* IE 9 */
  -webkit-transform: skewX(-10deg);
  /* Safari */
  -moz-transform: skewX(-10deg);
  -o-transform: skewX(-10deg);
  transform: skewX(-10deg);
  transition: .1s ease all;
}

.button:hover:before {
    top:0;
    left:0; 
    height:2px;
    width:0;
    background: var(--button-bg-color); 
    width:100%;
    transition:800ms ease all;
}

.button:hover:after{
    top: inherit;
    left: inherit; 
    bottom:0;
    right:0; 
    height:2px;
    width:0;
    background: var(--button-bg-color); 
    width:100%;
    transition:800ms ease all;
}


.button{
    display: inline-block;
    position: relative;
    background-color: var(--button-bg-color); 
    border: none;
    height: 40px;
    padding: 0px 30px; 
    transition: all 0.1s linear;
    
}

.button:hover{
    background-color: rgba(255, 255, 255, 0);
    transition: all 0.2s linear; 
    
}

.button a{
    font-family: 'Open Sans', sans-serif;
    display: inline-block; 
    color: var(--button-color); 
    text-align: center;
    text-decoration: none;
    font-weight: 900;  
    font-size: 18px;
    line-height: 40px;
    text-transform: uppercase;
    padding: 0 30px; 
}

.button:hover a{
    color: var(--button-bg-color);
}
/*END BUTTON*/

#show-title-container{
    padding-top: 40px;
    padding-bottom: 40px;
    -webkit-box-shadow: 0px -8px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -8px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -8px 15px 0px rgba(0,0,0,0.75);
}


/*Photo-Gallery*/
.photo-gallery-vertical
{
   width: 100%;
   display: flex;
   align-items: center;
   padding: 0px; 
}

.gallery-item{
  flex-grow: 1;
  background-color: darkred;
  position: relative;
  border: 1px solid lighten(black, 10);
}


.gallery-item img{
    display: block; 
    width: 100%;
    height: auto;
    transition: all .5s ease-in-out; 
    overflow: hidden;
}

.gallery-item::after{
    content: ''; 
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px; 
    bottom: 0px;
    background-color: var(--main-bg-color);
    background-blend-mode: difference;
    opacity: .3;
    transition: all .5s ease-in-out; 
}

.gallery-item:hover img{
   transform: scale(1.1);
}

.gallery-item:hover::after{
    transform: scale(1.1);
    opacity: 0;
}
/*Photo-Gallery*/

/* Show Info Box */

.show-info-container{
    padding-left: 0px;
    padding-right: 0px; 
}

.info-grid{
    position: relative;
    display: grid; 
    grid-gap: 1em; 
    grid-template-columns: 1fr 1fr 1fr; 
    width: 80%;
    margin-left: auto;
    margin-right: auto; 
}

.info-box{
    display: block;
    position: relative; 
}

.info-image{
    margin-bottom: 20px;
}

.info-image img{
    display: block; 
    width: 100%;
}

.callout{
    position: absolute;
    left: -30px;
    top: 20px;
    background: rgb(255, 255, 255);
    opacity: 0.8;
    color: var(--main-bg-color); 
    font-size: 17px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px 15px 5px 25px;
    -webkit-box-shadow: 7px 2px 19px 0px rgba(0,0,0,0.24);
    -moz-box-shadow: 7px 2px 19px 0px rgba(0,0,0,0.24);
    box-shadow: 7px 2px 19px 0px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;

}

.callout::after{
  content: '';
  display: block;
  position: absolute;
  right: -7px;
  top: 0;
  width: 14px;
  height: 34px;
  background: var(--main-bg-color);
  -ms-transform: skewX(-10deg);
  /* IE 9 */
  -webkit-transform: skewX(-10deg);
  /* Safari */
  -moz-transform: skewX(-10deg);
  -o-transform: skewX(-10deg);
  transform: skewX(-10deg);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.info-image:hover > .callout{
    opacity: 0.5;
    left: -50px;
}

/* END Show Info Box */
/* Info Box Spielorte*/
.info-box-spielorte{
    display: block;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px; 
    padding-top: 45px;
   
}

.info-box-spielorte h2{
    font-size: 35px; 
    font-weight: 100;
    margin-top: 10px; 
    margin-bottom: 30px;  
}
.info-box-spielorte p{
    font-size: 20px; 
    line-height: 40px; 
}

.info-box-spielorte-inside-box{
    display: block;
    height: 690px;
    width: 95%;
    background-image: radial-gradient(circle, #490B2B,#000000, #000000);
    margin-top: 25px; 
    margin-left: auto;
    margin-right: auto; 
    -webkit-box-shadow: 0px 0px 25px 0px rgba(201,105,156,0.4);
    -moz-box-shadow: 0px 0px 25px 0px rgba(201,105,156,0.4);
    box-shadow: 0px 0px 25px 0px rgba(201,105,156,0.4);
}

.info-box-spielorte-inside-grid{
    display: grid; 
    grid-gap: 5px; 
    grid-template-columns:  5fr 45fr 45fr 5fr; 
    grid-template-rows: auto 90px; 
    height: 100%; 
}

.info-box-spielorte-nav-colum-left{
    grid-row: 1 / span 2; 
    background-color: #000000;
    transition: background-color 0.8s ease; 
}

.info-box-spielorte-nav-colum-right{
    grid-column: 4; 
    grid-row: 1 / span 2; 
    background-color: #000000;
    transition: background-color 0.8s ease; 
}

.info-box-spielorte-nav-colum-left i{
    position: relative;
    border: solid #505050;
    border-width: 0 15px 15px 0;
    display: inline-block;
    padding: 15px; 
    top: calc(50% - 15px);
    left: 50%;
    transition: left 0.5s ease;
  }

.info-box-spielorte-nav-colum-right i{
    position: relative;
    border: solid #505050;
    border-width: 0 15px 15px 0;
    display: inline-block;
    padding: 15px; 
    top: calc(50% + 15px);
    left: calc(50% - 45px);
    transition: left 0.5s ease;
}

.info-box-spielorte-nav-colum-left:hover{
    background-color: rgba(40, 40, 40, 0.2); 
    -webkit-box-shadow: inset -10px 0px 17px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: inset -10px 0px 17px -6px rgba(0,0,0,0.75);
    box-shadow: inset -10px 0px 17px -6px rgba(0,0,0,0.75);
}

.info-box-spielorte-nav-colum-right:hover{
    background-color: rgba(40, 40, 40, 0.2); 
    -webkit-box-shadow: inset 10px 0px 17px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 10px 0px 17px -6px rgba(0,0,0,0.75);
    box-shadow: inset 10px 0px 17px -6px rgba(0,0,0,0.75);
}

.info-box-spielorte-nav-colum-left:hover i{
    border: solid #808080;
    border-width: 0 15px 15px 0;
    left: calc(50% - 15px);
    transition: all 0.5s ease; 
}

.info-box-spielorte-nav-colum-right:hover i{
    border: solid #808080;
    border-width: 0 15px 15px 0;
    left: calc(50% - 30px);
    transition: all 0.5s ease; 
}

.info-box-spielorte-content-colum{
    position: relative;
    text-align: left; 
    vertical-align: left;
}

.info-box-spielorte-content-image-container{
    display: block; 
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.info-box-spielorte-content-image-container img{
    border: 5px solid rgba(41, 41, 41, 0.705); 
    width: 300px;
    height: 300px; 
}

.info-box-spielorte-content-image-1{
    position: absolute;
    left: 15%;
    top: 60px;
    transform: rotate(-5deg);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.44);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.44);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.44);
}

.info-box-spielorte-content-image-2{
    position: absolute;
    left: calc(50% - 10%); 
    top: 235px;
    transform: rotate(6deg);
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.44);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.44);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.44);

}

.info-box-spielorte-content-top{
    position: relative;
    letter-spacing: 0.05em;
    color: #ececec;
    padding-top: 20%;
    padding-left: 15%;
    padding-right: auto; 
}
.info-box-spielorte-content-colum h2{
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left; 
    color: #FFFFFF;
}

.info-box-spielorte-content-bottom{
    position: absolute;
    left: 10%;
    bottom: 25%;
    transform: rotate(-15deg);
    color: #808080;
    
}


.info-box-spielorte-content-quote p{
    font-size: 28px;
    font-style: italic;
    padding-right: 15px; 
    color: #aaaaaa; 
}

.info-box-spielorte-content-quote::before{
    position: absolute;
    top: -110px; 
    left: -40px; 
    content: '"';
    font-size: 200px;
    color: #606060;
}

.info-box-spielorte-inside-grid .button-container{
    grid-column: 2 / span 2;
    margin-top: 0px;
    padding-top: 15px; 
}

/* END Info Box Spielorte*/

/* Info Box Gutscheine */
.info-box-gutscheine{
    
    height: 800px; 
    padding: 0px;
}


.info-box-gutschein-content{
    width: 100%;
    height: 100%; 
}

.info-box-gutschein-content-left{
   
}

.info-box-gutschein-content-left img{
  position: absolute;
  top: 250px;
  left: 80px; 
  height: auto; 
  width: 33%; 
  opacity: 1;
  transform: rotate(-10deg); 
}

.info-box-gutschein-content-right{
   
    margin-top: 260px; 
}

.info-box-gutschein-content-right h2{
    font-size: 45px;
    padding-right: 100px;
    font-weight: 300; 
}

.info-box-gutschein-content-right .button-container{
   
    margin-top: 80px; 
}
/*END Info Box Gutschein */

/* FOOTER AREA*/

.footer-area{
    padding: 0px; 
}
/* Info Footer */
.info-footer{
    display: block;
    margin: 0px; 
    padding: 60px 33vw;  
    background-color: #444444; 
    color: #ffffff;
    text-align: center; 
}

.tel-number{
    padding-top: 30px; 
    font-size: 22px;
    font-weight: bold; 
}

.tel-avaiable{
    font-size: 20px; 
}


.footer-menu{
    padding-top:40px; 
}

.footer-menu a{
    color: #dddddd;
    text-decoration: none;
    margin: 10px; 
}

.footer-menu a:hover{
    color: var(--highlight-color); 
}
/* END Info Footer */

/* Company Footer */
.company-footer{
    background-color: #333333; 
    padding-top: 20px;
    padding-bottom: 20px; 
    text-align: center; 
    
}

.company-footer p{
    font-size: 25px; 
}
/* END Company Footer */
/* END FOOTER AREA*/

/* -------------------- */
/* MOBILE MEDIA QUERIES */
/* -------------------- */

@media (max-width: 1200px) {

    h3{
        padding-left: 15%;
        padding-right: 15%; 
    }

    .main-nav{
        text-align: right; 
    }

    .slider{
        margin-top: 60px;
    }
    .button{
        padding: 0px 5px; 
    }
    .button a{
        padding: 0px 5px; 
        font-size: 14px;
    }

    .info-grid{
        grid-template-columns: 1fr; 
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .info-box{
        margin-bottom: 60px;
    }

    .info-box p {
        font-size: 22px; 
    }

    .info-box h4{
        font-size: 30px; 
    }

    .callout{
        font-size: 25px; 
        top: 45px; 
    }

    .callout::after{
        height: 44px;
         
    }

    .info-footer{
        padding: 60px 5vw; 
    }
} /* END MEDIA QUERY 1200px */

@media (max-width:500px ){
    .main-nav{
        display: none; 
        text-align: right; 
    }
}