/************************************************
Layout Containers
************************************************/
#wrapper {max-width: 1200px; margin: 0 auto; background-color: #fff; overflow: hidden; min-height: 100vh;}
body {background-color: #000};
.header {background-color: rgba(255, 255, 255, 1); padding: 0px 20px 20px 20px;}
.leftheader {width: 30%; height:auto; padding:0px; background-color: rgba(200, 200, 0, 1);}
.rightheader {width: 60%; height:auto; padding:0px; background-color: rgba(153, 51, 0, 1);}
.content {padding: 0px 0px 0px 0px; margin-bottom: 20px;}

.FBheader {height:15vw; max-height: 180px;}
.FBheaderlogo {width: 30%; height: 100%; object-fit: contain; align-content:center;}
.FBheaderslideshow {width: 70%; height: 100%;}
.FBheaderimages {object-fit: cover;}

.apple-mobile-web-app-status-bar-style {content:var(--beneblue);}
.theme-color {content:var(--beneblue);}
.msapplication-navbutton-color {content:var(--beneblue);}



/************************************************
Image Containers
************************************************/


/***** New Icon Image Containers Nov 2025 ******/
.WAicnimg {display: inline; margin-left: auto; margin-right: auto; height: 3vw;} /* used on other pages */

.benebutton .WAicnimg {margin: -3px 3px -6px 10px;}


/***** Icon Image Containers ******/

.iconimage {display: block; margin-left: auto; margin-right: auto;} /* used for homepage */
.icnimg {display: block; margin-left: auto; margin-right: auto;} /* used on other pages */
.studentimage {width: 100%;}
.bigiconimage {display: block; margin-left: auto; margin-right: auto; width: 70%;}


/* one size to rule them all */
.FBunit .iconimage {width: calc((100vw - 260px) / 4);}
.FBunit .teamimage {width: calc(100vw / 5);}
.FBunit .partnerimage {width: calc(100vw / 4);}
/*.FBteam:hover .partnerimage {background-color: #fff;}*/

/* different sizes according to mother container */
.FB221 .FBunit .iconimage {width: calc((80vw - 140px) / 2);}
.FB321 .FBunit .iconimage {width: calc((100vw - 200px) / 3);}
/*.FB421 .FBunit .iconimage {width: calc((100vw - 260px) / 4);}*/


/************************************************
Header Containers
************************************************/

.topster {
  min-height: 20px;
  padding: 0px 20px 10px 0px;
  margin: 0px 0px 10px 0px;
  justify-content: flex-end;
  display: flex;
}

.FBchoosebox .imgbox {
  display: inline-block;
  width: 12vw;
  height: 12vw;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 1.5vw 0px 1vw 0px;
}

.FBchoosebox .imgbox.largeicon {
  display: inline-block;
  width: 20vw;
  height: 16vw;
  transition: 0s;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 2vw 0px 0vw 0px;
}

.FBchoosebox .imgbox, .FBchoosebox .imgbox.largeicon {background-position: 100% 0%; transition: all 0.3s ease-in-out;}
.FBchoosebox:hover .imgbox {transform: scale(1.1); }


/************************************************
Footer and Header Button Containers
************************************************/
.FBfooter {
  background-color: var(--beneblue);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: wrap;
  padding: 20px 20px 0px 20px;
}

.FBfooterpad {padding: 10px 0px 10px 0px;}



/* Footer Buttons */
.footerbutton {
  font-family: "Avenir Next", sans-serif;
  font-size: 16px;
  padding: 3px 0px 3px 0px;
  text-align: left;
  vertical-align: middle;
  min-height: 35px;
  color: #fff;
}

.footerbutton a .imgbox {
  display: inline-block;
  width: 18px;
  height: 18px;
  transition: 0s;
  background-repeat: no-repeat;
  background-size: 300%;
  background-position: 100% 0%;
}

.footerbutton a {color: #fff;}
.footerbutton:hover a {color: #000;}
.footerbutton:hover a .imgbox {background-position: 0% 0%;}

/* Topster Buttons */
.topsterbutton {
  min-height: 20px;
  display: inline-block;
  font-family: "Avenir Next", sans-serif;
  font-size: 1.6vw;
  padding: 3px 0px 3px 0px;
  text-align: right;
  vertical-align: middle;
  margin-left: 30px;
  padding-top: 10px;
}

.topsterbutton a .imgbox {
  display: inline-block;
  width: 18px;
  height: 18px;
  transition: 0s;
  background-repeat: no-repeat;
  background-size: 300%;
}

.topsterbutton:hover a {color: var(--beneblue); text-decoration: none;}
.topsterbutton:hover a .imgbox {background-position: 50% 0%;}


/************************************************
Icon Containers
************************************************/

/* Header Icon Containers */
.phoneicon {background-image: url("../Images/Icons/PhoneIcon.svg");}
.mailicon {background-image: url("../Images/Icons/MailIcon.svg");}
.whatsappicon {background-image: url("../Images/Icons/WhatsAppIcon.svg");}
.languageDEicon {background-image: url("../Images/Icons/DeutschIcon.svg");}
.languageENicon {background-image: url("../Images/Icons/EnglishIcon.svg");}
.languageSPicon {background-image: url("../Images/Icons/SpanishIcon.svg");}
.facebookicon {background-image: url("../Images/Icons/FacebookIcon.svg");}
.linkedinicon {background-image: url("../Images/Icons/LinkedInIcon.svg");}
.instaicon {background-image: url("../Images/Icons/InstaIconBU.svg");}


/* LegUp Courses Icon Containers  */
.primaricon {background-image: url("../Images/Icons/Stufen_Primarstufe.svg");}
.sekundaricon {background-image: url("../Images/Icons/Stufen_Sekundarstufe.svg");}
.gymiicon {background-image: url("../Images/Icons/Stufen_Gymi und Mittelschulen.svg");}

.langgymi {background-image: url("../Images/Icons/MSV_Langgymi.svg");}
.kurzgymi {background-image: url("../Images/Icons/MSV_Kurzgymi.svg");}
.BMS {background-image: url("../Images/Icons/MSV_BMS.svg");}

/* misc Background images */
.whybene {background-image: url("../Images/BackgroundImages/ClassInProgress.png");}

.microgasturbine {background-image: url("../Images/BackgroundImages/microgasturbine.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}

.bedouincat {background-image: url("../Images/BackgroundImages/bedouincat.jpg"); background-position: center; background-repeat: no-repeat; background-size: 250%;}

.birdlanding {background-image: url("../Images/BackgroundImages/birdlanding.png"); background-position: center; background-repeat: no-repeat; background-size: cover;}

.chaquetas {background-image: url("../Images/BackgroundImages/chaquetas.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}

.tropicalflower {background-image: url("../Images/BackgroundImages/tropicalflower.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}


.trees {background-image: url("../Images/BackgroundImages/trees.jpg"); background-position: right; background-repeat: no-repeat; background-size: cover;}

.sinaipanorama {background-image: url("../Images/BackgroundImages/sinaipanorama.jpg"); background-position: top; background-repeat: no-repeat; background-size: 250%;}

.mountainmeadow {background-image: url("../Images/BackgroundImages/mountainmeadow.jpg"); background-position: left; background-repeat: no-repeat; background-size: cover;}


.industry {background-image: url("../Images/BackgroundImages/industry.png"); background-position: left; background-repeat: no-repeat; background-size: cover;}

.starrynightsky {background-image: url("../Images/BackgroundImages/starrynightsky.png"); background-position: left; background-repeat: no-repeat; background-size: cover;}

.studentD {background-image: url("../Images/BackgroundImages/StudentD.png"); background-position: right; background-repeat: no-repeat; background-size: cover;}

.alpinepanorama {background-image: url("../Images/BackgroundImages/alpinepanorama.png"); background-position: left; background-repeat: no-repeat; background-size: cover;}

.junglepanorama {background-image: url("../Images/BackgroundImages/junglepanorama.png"); background-position: left; background-repeat: no-repeat; background-size: cover;}

.islandpanorama {background-image: url("../Images/BackgroundImages/islandpanorama.png"); background-position: left; background-repeat: no-repeat; background-size: cover;}

.aitbenhaddoucat {background-image: url("../Images/BackgroundImages/aitbenhaddoucat.jpg"); background-position: right; background-repeat: no-repeat; background-size: cover;}
.dragonfly {background-image: url("../Images/BackgroundImages/dragonfly.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
.meknescat {background-image: url("../Images/BackgroundImages/meknescat.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
.sinaibeach {background-image: url("../Images/BackgroundImages/sinaibeach.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
.treesatsunset {background-image: url("../Images/BackgroundImages/treesatsunset.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
.wadirumdesert {background-image: url("../Images/BackgroundImages/wadirumdesert.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}

.fezartistsalley {background-image: url("../Images/BackgroundImages/fezartistsalley.jpg"); background-position: top; background-repeat: no-repeat; background-size: cover;}
.stufencat {background-image: url("../Images/BackgroundImages/stufencat.jpg"); background-position: top; background-repeat: no-repeat; background-size: cover;}
.turningacorner {background-image: url("../Images/BackgroundImages/turningacorner.jpg"); background-position: top; background-repeat: no-repeat; background-size: cover;}
.utilabeach {background-image: url("../Images/BackgroundImages/utilabeach.jpg"); background-position: top; background-repeat: no-repeat; background-size: cover;}




/* Bene Course Type Icon Containers */
.nivelicon {background-image: url("../Images/Icons/Nivel.svg");}
.levelicon {background-image: url("../Images/Icons/LevelCourse.svg");}
.businessicon {background-image: url("../Images/Icons/Business.svg");}
.conversationicon {background-image: url("../Images/Icons/Conversation.svg");}
.examprepicon {background-image: url("../Images/Icons/ExamPreparation.svg");}
.grammarrefreshicon {background-image: url("../Images/Icons/GrammarRefresh.svg");}

.einzelicon {background-image: url("../Images/Icons/einzel.svg");}
.halbprivaticon {background-image: url("../Images/Icons/halbprivat.svg");}
.mgkicon {background-image: url("../Images/Icons/mgk.svg");}
.kgkicon {background-image: url("../Images/Icons/kgk.svg");}



/************************************************
Slideshow
************************************************/

.w3-animate-fading{animation:fading 8s infinite;}

@keyframes fading{
  0%{opacity:0}
  33%{opacity:1}
  66%{opacity:1}
  100%{opacity:0}
}



/************************************************
Google Maps Container
************************************************/

iframe {width: 100%; min-height: 500px;}
.mapouter{text-align:left; min-height:500px; margin: 0px 0px 0px 0px;}
.gmap_canvas {overflow:hidden; background:none!important; min-height:300px;}
* {box-sizing: border-box;}


/*Use a media query to add a break point at 800px:*/
@media (min-width: 1200px) {
  .FBunit .iconimage {width: 235px;}
  .FB221 .FBunit .iconimage {width: 410px;}
  .FB321 .FBunit .iconimage {width: 333.33px;}
  .FBunit .teamimage {width: 240px;}

  .FBchoosebox .imgbox {
    width: 144px;
    height: 144px;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 18px 0px 12px 0px;
  }

  .FBchoosebox .imgbox.largeicon {
    width: 240px;
    height: 192px;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 24px 0px 0vw 0px;
  }

  .topsterbutton {font-size: 19.2px}


}



@media (max-width: 850px), (hover: none) {
  .FB421 .FBunit .iconimage {width: 33vw;}
  .FB321 .FBunit .iconimage {width: 33vw;}

  .content {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
  }

  .FBchoosebox .imgbox.largeicon {
    width: 28vw;
    height: 21vw;
  }

  .topsterbutton {font-size: 1.5vw;}

.bedouincat {background-size: cover;}
.sinaipanorama {background-size: cover;}

}

@media only screen and (max-width:667px) {
  .content {padding-left: 0px; padding-right: 0px;}
}

@media (max-width: 667px), (hover: none) {
  .FBunit .iconimage, .FB421 .FBunit .iconimage, .FB321 .FBunit .iconimage, .FB221 .FBunit .iconimage {width: 40vw;}
  .icnimg {width: 30vw;}


  .imgflip div:first-child {order: 2;}
  .imgflip div:nth-child(2) {order: 1; margin-bottom: 10px;}
  .imgflip div:nth-child(3) {order: 3;}

  .buttonlabel {display: none;}

  .topster {justify-content: flex-end;}
  .topsterbutton a .imgbox {
    width: 8.5vw;
    height: 8.5vw;
    margin-left: 0px;
background-position: 50% 0%;  }

  .FBchoosebox .imgbox.largeicon {width: 28vw; height: 21vw;}
  .FBunit .teamimage {width: calc(100vw / 4);}

  .benebutton .WAicnimg {height: 4.5vw; margin: -3px 3px -6px 10px;}

  .studentD, .alpinepanorama, .islandpanorama, .jackets {background-size: 200%;}

.starrynightsky {background-size: cover;}

.junglepanorama {background-size: 200%;}
.whybene {background-size: 200%; background-position-x: 18%;}



}



@media
/* iPad 1, 2, Mini and Air */
only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1)
and (hover: none)
and (orientation:landscape),

/* iPad 3, 4 and Pro 9.7" */
only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (hover: none)
and (orientation:landscape)

{
  .FB221 .FBunit .iconimage {width: calc((80vw - 140px) / 2);}
  .FB321 .FBunit .iconimage {width: calc((100vw - 200px) / 3);}
  .FB421 .FBunit .iconimage {width: calc((100vw - 260px) / 4);}
}