@charset "UTF-8";
/* CSS Document */

:root {
    --black: #413D3C;
    --white: #F6F6F6;
    --bgcolor: #E9E3DB;
    --housecolor: #2A3976;
    --musiccolor: #EAD5AB;
    --ventrilcolor: #D7E9DE;
    --cpaintingcolor: #ECE9C9;
    --coffeecolor: #DECEC3;
    --winecolor: #DAC4DA;
    --cheesecolor: #EDD2CE;
    --calendarcolor: #868175;
  --green: #3f692e;
  --orange: #3f692e;
  --lightgrey: #abb1b6;
  --grey: #57636d;
  --darkgrey: #2e3d49;
  --yellow: #fec000;
  --blue: #42682b;
  --brown: #efe3bc;
}

body {
    font-family: studiallGothic;   
}

h2 {
    font-family: studiallGothicB;
}

.b_hidden {
    display: none;
}

.hideInMobile {
    display: none;
}
.hideInTablet {
    display: none;    
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 8px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #413D3C;
}

nav#layout-nav .navbar-nav > li.active > a {
    color: white;    
}

/* Fading animation */
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 3s;
}

@keyframes fadeIn {
  from {opacity: .4}
  to {opacity: 1}
}

.form-control {
    background-color: #ffffff00 !important;
    border: 0px !important;
}

.homeContainer {
    width: 80vw;
    max-width: 960px;
    margin: 0 auto;
}

.homeMenuOverwrite {
    font-family: studiallGothicBI;
    font-size: 36px;
    margin: 24px 0;
}

.homeMenuOverwrite > li > a {
    color: #413D3C;
    line-height: 60px;
}

#img_homeHL {
    width: 80vw;
    margin-top: 30px;
}

.div_homeWA {
    position: fixed;
    bottom: 36px;
    right: 24px;
}

#btn_WA {
    width: 15vw;
    max-width: 72px;
}

.pageTitle {
    font-family: studiallElephI;
    font-size: 42px;
}

.div_about_container {
    background-image: url('../themes/rainlab-bonjour/assets/images/bg_about.svg');
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    width: 80vw;
    max-width: 920px;
    margin: 0 auto;
}

.div_about_contentcontainer, .div_thankyou_contentcontainer {
    font-size: 16px;
    line-height: 26px;
}

.div_contact_map_container {
    width: 80vw;
    max-width: 920px;
    height: 67.5vw;
    max-height: 776.25px;
    margin: 0 auto;
    padding: 4px;
    background-image: url('../themes/rainlab-bonjour/assets/images/mapBorder.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.div_contact_info_container {
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    margin: 20px auto;
}

.div_contact_info_container a {
    color: var(--black);    
}


#iframe_CU_map {
    width: 100%;
    height: 100%;
}

.div_contact_form_container {
    width: 80vw;
    max-width: 920px;
    margin: 0 auto;
    font-size: 16px;
}

.div_contact_form_container h2 {
    text-align: center;
}

.cuTextField {
    width: 100%;
    background-color: transparent;
    border-radius: 5px;
}

#btnCUSubmit {
    background-image: url('../themes/rainlab-bonjour/assets/images/btn_submit.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    width: 80vw;
    max-width: 920px;
    height: 9.6vw;
    max-height: 110.4px;
    margin: 10px auto;
}

.div_contact_btn_container {
    width: 80vw;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

#btn_FB, #btn_IG {
    width: 15vw;
    max-width: 72px;
    margin: 0px 6px 36px;
}

.div_contact_thankyou_container {
    width: 80vw;
    max-width: 920px;
    height: 119.73vw;
    max-height: 1376.895px;
    margin: 0 auto;
    background-image: url('../themes/rainlab-bonjour/assets/images/cuTYBorder.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}

#imgCUThankYouDoor {
    width: 30vw;  
    margin: 84px auto 10px;
}

#imagCUThankyouHB {
    width: 30vw;    
}

.div_thankyou_contentcontainer {
    width: 60vw;
    margin: 24px auto;
}

.wsd_container {
    padding: 0px;    
    height: auto; /*calc( 100vh - 95px);*/
    padding-bottom: 48px;
    background-color: var(--musiccolor);
}

.div_workshops_menu_container {
    width: 80vw;
    margin: 0 auto;
    max-width: 920px
}

.div_workshops_menu_container img {
    margin: 0 0 24px;    
}

.div_wsd_containter1 {
    width: 100vw;
    max-width: calc( 480px + 20vw);
    padding: 0 10vw 24px;
    margin: 0 auto 20px;
    background-color: var(--bgcolor);
}

#wsd_title {
    text-align: center;    
}

#wsd_photo {
    width: 80vw;
    max-width: 480px;
}

.div_wsd_containter2 {
    width: 100vw;
    max-width: calc( 480px + 20vw);
    margin: 0 auto;
}
.div_wsd_innercontainter2 {
    width: 90vw;
    max-width: calc( 480px + 20vw);
    margin: 0 auto;
}

.div_wsd_innercontainter2 a {
    color: var(--black);
}

.div_wsd_details_half {
    width: calc( 37.5vw - 4px);
    max-width: 220px;
    margin: 10px 0 20px;
    padding: 8px 10px;
    border: 2px solid var(--black);
    display: inline-block;
    text-align: center;
}

.div_wsd_details_full {
    width: 80vw;
    max-width: 480px;
    margin: 4px auto;
    padding: 8px 10px;
    border: 2px solid var(--black);
    text-align: center;
}

.div_wsd_details_space {
    width: 5vw;
    max-width: 30px;
    display: inline-block;
}
.div_wsd_details_row {
    padding: 0 5vw;
    margin: 0 auto;
    width: fit-content;
}
.div_wsd_details_row a:hover {
    text-decoration: none;
}

.musicBGColor {
    background-color: var(--musiccolor);
}
.ventrilBGColor {
    background-color: var(--ventrilcolor);
}
.cpaintingBGColor {
    background-color: var(--cpaintingcolor);
}
.coffeeBGColor {
    background-color: var(--coffeecolor);
}
.wineBGColor {
    background-color: var(--winecolor);
}
.cheeseBGColor {
    background-color: var(--cheesecolor);
}
.cheeseBGColor {
    background-color: var(--cheesecolor);
}
.calendarBGColor {
    background-color: var(--calendarcolor) !important;
}

.div_wsd_containter0 {
    background-color: var(--bgcolor);
}

.div_rupload_container {
    width: 80vw;
    max-width: 450px;
    margin: 0 auto;
    text-align: center;
}
.text_rupload_title {
}
.img_rupload_icon {
    width: 60vw;
    max-width: 240px;
    margin: 18px 0;
}
#btnRUploadSubmit {
    background-image: url('../themes/rainlab-bonjour/assets/images/btn_submit.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    width: 60vw;
    height: 7.2vw;
    margin: 10px auto;
    max-width: 420px;
    max-height: 50.4px;
}

@media screen and (min-width: 600px) {
    
}

@media screen and (min-width: 768px) {
    .hideInMobile {
        display: inherit;    
    }
    .menubar_bg {
        background-image: url('../themes/rainlab-bonjour/assets/images/menu_lines.svg');
        background-size: 150%;
        background-repeat: no-repeat;
        background-position: left 90%;
    }
    .homeMenuOverwrite {
        float: none;
    }
    .homeMenuOverwrite > li {
        float: none;
    }
    .nav > li.active {
        background-color: #00000000;
    }
    .nav > li.active > a {
        color: var(--housecolor) !important;
    }
    .nav > li > a:hover {
        background-color: #00000000;
    }
    .container {
        width: 80vw;
        min-width: 750px;
    }
    nav#layout-nav .navbar-brand {
        width: 80vw;
        min-width: 750px;
        margin: 0 auto;
    }
    .div_contact_thankyou_container { 
        background-image: url('../themes/rainlab-bonjour/assets/images/cuTYBorderD.svg');
        height: 52.63vw;
        max-height: 506px;
        max-width: 700px;
    }
    #imgCUThankYouDoor {
        margin: 63px auto 10px;
    }
}

@media screen and (min-width: 992px) {
    .hideInTablet {
        display: inherit;    
    }
    .hideInDesktop {
        display: none;
    }
    .menubar_bg {
        background-position: left 95%;
    }
    .container {
        width: 970px;
    }
    nav#layout-nav .navbar-brand {
        width: 970px;
    }
    .homeContainer {
        max-width: 480px;
        margin: 0 auto 0 32px;
        float: left;
    }
    .div_home_welcome {
        width: 320px;
        margin: 0 32px 0 auto;
        float: right;
    }
    .div_about_container {
        max-width: 320px;
        float: right;
        margin: 0 32px 64px auto;
    }
    .div_about_adj_homeContainer {
        width: 100%;
        height: 72px;
    }
    
    .div_contact_container {
        width: 480px;
        margin: 0 auto 0 32px;
        float: left;
    }
    
    .div_contact_map_container {
        max-width: 480px;
        max-height: 405px;
    }
    
    .div_contact_form_container {
        max-width: 360px;
        margin: 0 32px 10px auto;
        float: right;
        background-color: white;
        padding: 0 20px;
    }
    .div_contact_btn_container {
        max-width: 360px;
        margin: 0 32px 0 auto;
    }
    .div_contact_form_container > h2 {
        margin-top: 10px;
    }
    #btnCUSubmit {
        max-width: 320px;
        max-height: 38.4px;
        margin: 10px auto;
    }
    
    .div_workshops_menu_item {
        width: 31%;
        float: left;
        margin: 0 1%;
    }
    .div_workshops_menu_row_separator {
        content: "";
        display: table;
        clear: both;
    }
    .div_workshops_menu_textcontent {
        background-color: white;
        text-align: center;
    }
    
    .div_contact_thankyou_container { 
        height: 52.63vw;
        max-height: 683.66px;
        max-width: 920px;
    }
    
    #imgCUThankYouDoor {
        margin: 84px auto 10px;
    }
    
    .wsd_container {
        background-color: none;   
    }
    .div_wsd_containter0 {
        background-color: white;
    }
    .div_wsd_containter1 {
        padding: 12px 10vw 24px;
        margin: 0 auto;
        background-color: white;
    }
    .div_wsd_containter2 {
       /* background-color: var(--musiccolor);    */
    }
    .div_wsd_innercontainter2 {
        padding: 30px 0;
    }
}

@media screen and (min-width: 1300px) {
    .container {
        width: 1280px;
    }
    nav#layout-nav .navbar-brand {
        width: 1280px;
    }
    .homeContainer {
        max-width: 640px;
    }
    .div_home_welcome {
        width: 480px;
    }
    
    .div_homeWA {
        right: calc( ( 100vw - 1280px) /2 + 24px);
    }
    
    .div_about_container {
        max-width: 480px;
    }
    .div_about_adj_homeContainer {
        width: 100%;
        height: 0px;
    }
    
    .div_contact_container {
        width: 640px;
    }
    
    .div_contact_map_container {
        max-width: 640px;
    }
    .div_contact_form_container {
        max-width: 480px;
    }
    .div_contact_btn_container {
        max-width: 480px;
    }
    #btnCUSubmit {
        max-width: 440px;
    }
    
    .div_workshops_menu_container {
        width: 90vw;
        max-width: 1240px
    }
    
    #imgCUThankYouDoor {
        width: 420px;
    }
    
    #imagCUThankyouHB {
        width: 420px;  
    }
    
    .div_thankyou_contentcontainer {
        max-width: 852px;
    }
    
    .div_workshops_menu_item {
        width: 31%;
        float: left;
        margin: 0 1%;
    }
    .div_workshops_menu_row_separator {
        content: "";
        display: table;
        clear: both;
    }
    .div_workshops_menu_textcontent {
        background-color: white;
        text-align: center;
    }
    .div_contact_thankyou_container { 
        background-image: url('../themes/rainlab-bonjour/assets/images/cuTYBorderD.svg');
        max-height: 605.26px;
    }
}

.loading-spinner{
  width:30px;
  height:30px;
  border:2px solid indigo;
  border-radius:50%;
  border-top-color:#0001;
  display:inline-block;
  animation:loadingspinner .7s linear infinite;
}
@keyframes loadingspinner{
  0%{
    transform:rotate(0deg)
  }
  100%{
    transform:rotate(360deg)
  }
}

@font-face {
    font-family: studiallElephI;
    src: url(../themes/rainlab-bonjour/assets/fonts/ELEPHNTI.TTF);
}
@font-face {
    font-family: studiallGothic;
    src: url(../themes/rainlab-bonjour/assets/fonts/GOTHIC.TTF);
}
@font-face {
    font-family: studiallGothicB;
    src: url(../themes/rainlab-bonjour/assets/fonts/GOTHICB.TTF);
}
@font-face {
    font-family: studiallGothicBI;
    src: url(../themes/rainlab-bonjour/assets/fonts/GOTHICBI.TTF);
}