/*
Nocobot Free Website Template - Free-CSS.com
https://www.free-css.com/free-css-templates/page267/nocobot
*/
.wrapper{display:block; position:relative; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word;}

.one_third {display:inline-block; float:left; margin:0 0 0% 1%; list-style:none;}
.one_third{width:24%;}
.nospace{margin:0; padding:0; list-style:none;}

.one_third #subslide4{
    content:url(../img/slides/leisures.png);
}
.one_third #subslide3{
    content:url(../img/slides/movie-theater-reopening-checklist-featured.jpg);
}
/*https://wsdg.com/projects-items/musical-theater-basel/
https://www.european-traveler.com/switzerland/visit-the-swiss-national-museum-of-history-and-culture-in-zurich/
*/
.one_third #subslide2{
    content:url(../img/slides/MusicalTheaterBasel-4-800x533.jpg);
}
.one_third #subslide1{
    content:url(../img/slides/Swiss-National-Museum-in-Zurich2.jpg);
}
.clear, .group{display:block;}
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
.clear, .clear::after, .group, .group::after{clear:both;}

.btmspace-10{margin-bottom:10px;}
.btmspace-15{margin-bottom:15px;}
.btmspace-20{margin-bottom:20px;}
.btmspace-30{margin-bottom:30px;}
.btmspace-50{margin-bottom:50px;}


.imgover{display:inline-block; position:relative; max-width:100%;}
.imgover::before, .imgover::after{display:block; position:absolute; content:""; text-align:center; opacity:0;}
.imgover::before{top:0; right:0; bottom:0; left:0;}
.imgover::after{top:50%; left:50%; width:50px; height:50px; line-height:50px; margin:-25px 0 0 -25px; font-family:"Font Awesome\ 5 Free"; font-weight:900; content:"\f067";/* fa-plus */ font-size:28px;}
.imgover:hover::before, .imgover:hover::after{opacity:1;}

.imgover:hover::before{background-color:rgba(185,70,173,.5);/* #B946AD */}
.imgover, .imgover:hover::after{color:#FFFFFF;}


/* Introblocks - x3 */
#introblocks{display:block; position:relative; margin:-0% 0 0 0; z-index:1; text-align:center}/* 280px => 200px + container padding */
#introblocks figure{display:block; position:relative; text-align:center;}
#introblocks figure figcaption{display:block; position:absolute; bottom:0; width:100%; padding:0 20px;}
#introblocks figure figcaption *{margin:0; padding:0;}
#introblocks figure figcaption div{max-height:0; overflow:hidden; transition:max-height .6s cubic-bezier(0, 1, 0, 1) -.1s;}
#introblocks figure:hover figcaption div{max-height:1200px; transition-timing-function:cubic-bezier(0.5, 0, 1, 0); transition-delay:0s;}
#introblocks figure figcaption .heading{padding:20px 0; font-size:1.9rem; font-weight:700; line-height:1;}
#introblocks figure figcaption .heading a { color:white;}
#introblocks figure figcaption .heading a:hover{color:yellow;}
#introblocks figure figcaption div p{padding:0 0 20px 0; color:white;}

/* Content Area */
#introblocks figure figcaption{color:#FFFFFF; background-color:rgba(0,0,0,.55);}



/* https://cssanimation.rocks/fr/spheres/*/

.ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
    background: radial-gradient(circle at bottom, #81e8f6, #76deef 10%, #055194 80%, #062745 100%); 
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 100%;
  background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  filter: blur(5px);
  z-index: 2; }
.ball:after {
  content: "";
  position: absolute;
  display: none;
  top: 5%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 100%;
  -webkit-filter: blur(1px);
  filter: blur(1px);
  z-index: 2;
  -webkit-transform: rotateZ(-30deg);
  transform: rotateZ(-30deg); }
.ball .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  -webkit-transform: rotateX(90deg) translateZ(-160px);
  transform: rotateX(90deg) translateZ(-160px);
  z-index: 1; }
.ball.plain {
  background: black; }
  .ball.plain:before, .ball.plain:after {
    display: none; }
.ball.bubble {
  background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
  -webkit-animation: bubble-anim 2s ease-out infinite;
  animation: bubble-anim 2s ease-out infinite; }
  .ball.bubble:before {
    -webkit-filter: blur(0);
    filter: blur(0);
    height: 80%;
    width: 40%;
    background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
    -webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
    transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); }
  .ball.bubble:after {
    display: block;
    background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%); 
  }
    
  .carousel-inner > .item {
    height: 350px;
  }
  
  .carousel-inner > .item > img {
    min-height: 350px;
    width: 100%;
  }  


.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -50px;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
  font-size: 60px;
}
.carousel-control .icon-next:before {
  content: '\203a';
  font-size: 60px;
}


  #none_style_link {
    text-decoration: None;
  }

  .stage {
    width: 200px;
    height: 200px;
    position:relative; margin:0% 0 0 -10%; z-index:1; text-align:center;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
  }

  .stage2 {
    width: 200px;
    height: 200px;
    position:relative; margin:0% 0 0 -10%; z-index:1; text-align:center;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
  }
  
  .stage h5, .stage2 h5{
      color: red;
      font-weight: 900;
      font-size: small;
  }
  .header_bulle{
    text-align: left;
  }
  .header_bulle .div1, .header_bulle .div2{
    border: None;

  }
    
  @media (max-width: 767px){
    #introblocks figure figcaption .heading{padding:20px 0; font-size:1.5rem; font-weight:700; line-height:1;}
    #introblocks figure figcaption div p{line-height: normal; font-size:70%; color:white;}

    .stage{
      padding: 30%;
      margin-top: -3em;
    }
    .stage2{
      padding: 15%;
      margin-top: -3em;
    }
    .stage h5, .stage2 h5{
      font-weight: 900;
      margin-top: -0.2em;
      font-size: xx-small;
  }

  .carousel-inner > .item {
    height: 200px;
  }
  
  .carousel-inner > .item > img {
    min-height: 200px;
    width: 100%;
  }
}

  @-webkit-keyframes bubble-anim {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1); }
  
    20% {
      -webkit-transform: scaleY(0.95) scaleX(1.05);
      transform: scaleY(0.95) scaleX(1.05); }
  
    48% {
      -webkit-transform: scaleY(1.1) scaleX(0.9);
      transform: scaleY(1.1) scaleX(0.9); }
  
    68% {
      -webkit-transform: scaleY(0.98) scaleX(1.02);
      transform: scaleY(0.98) scaleX(1.02); }
  
    80% {
      -webkit-transform: scaleY(1.02) scaleX(0.98);
      transform: scaleY(1.02) scaleX(0.98); }
  
    97%, 100% {
      -webkit-transform: scale(1);
      transform: scale(1); } }
  
  @keyframes bubble-anim {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1); }
  
    20% {
      -webkit-transform: scaleY(0.95) scaleX(1.05);
      transform: scaleY(0.95) scaleX(1.05); }
  
    48% {
      -webkit-transform: scaleY(1.1) scaleX(0.9);
      transform: scaleY(1.1) scaleX(0.9); }
  
    68% {
      -webkit-transform: scaleY(0.98) scaleX(1.02);
      transform: scaleY(0.98) scaleX(1.02); }
  
    80% {
      -webkit-transform: scaleY(1.02) scaleX(0.98);
      transform: scaleY(1.02) scaleX(0.98); }
  
    97%, 100% {
      -webkit-transform: scale(1);
      transform: scale(1); } }








/* banniere promotion */





.background-wrap{
  text-align: center;
  border: 20px solid #ddd;
  height: 155px;
  margin-bottom: 20px;
  background-color: #EC407A;
  
}

.background-wrap img{ 
  filter: invert(100%); 
  -webkit-filter:invert(100%); 
} 


/* KEYFRAMES */

@-webkit-keyframes sideWays { 
  0% { 
      margin-left:0px;
  }
  25% { 
      margin-top:10px;
  }
  50% { 
      margin-bottom:20px;
  }
  75% { 
      margin-top:-10px;
  }
  100% { 
      margin-left:50px;
  }
}

@-moz-keyframes sideWays { 
  0% { 
    margin-left:0px;
  }
  25% { 
      margin-top:10px;
  }
  50% { 
      margin-bottom:20px;
  }
  75% { 
      margin-top:-10px;
  }
  100% { 
      margin-left:50px;
  }
}

@keyframes  sideWays { 
  0% { 
    margin-left:0px;
  }
  25% { 
      margin-top:10px;
  }
  50% { 
      margin-bottom:20px;
  }
  75% { 
      margin-top:-10px;
  }
  100% { 
      margin-left:50px;
  }
}

/* ANIMATIONS */

.x1 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: -7%;
top: -50%;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}

.x2 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;

left:3%;
top: -9%;

-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}

.x3 {
  -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 10%;
top: -29%;

-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}

.x4 {
  -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 20%;
top: 0;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}

.x5 {
  -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 30%;
top: -15%;

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}

.x6 {
  -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 50%;
top: -20%;

-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}

.x7 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 62%;
top: 0%;

-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}

.x8 {
  -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 70%;
top: 0%;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}

.x9 {
  -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 85%;
top: -28%;

-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}

.x10 {
  -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 80%;
top: 00%;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}

/* OBJECTS */

.bubble2 {
  -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
  opacity: 25%;
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);

  height: 200px;
  position: absolute;
  width: 200px;
  background-color: transparent;
  
}