/************************************************
Flexbox Containers
************************************************/
/* Flexbox mother containers */
.FBflex {display: flex; justify-content: space-evenly; flex-wrap: wrap;}

.FBbtncontent {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center;}

.FBbtnsubcontent {width: 100%;}

.FBrow {display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row;}

.FBgroup {display: flex; justify-content: space-evenly; flex-wrap: wrap; flex-direction: row;}
.FBcol {display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: column;;}


.FBunit {border-radius: 20px;}
/* Flexbox layout containers */
.FB111 > .FBunit {width: calc(100vw - 40px)}
.FB221 > .FBunit {width: calc((100vw - 60px) / 2);}
.FB321 > .FBunit {width: calc((100vw - 80px) / 3);}
.FB421 > .FBunit {width: calc((100vw - 100px) / 4);}

.FB122 {display: flex; flex-direction: column;}
.FB122 > .FBunit:first-child {width: 100%;}
.FB122 > .FBunit:nth-child(2) {width: 100%;}

.FB2to1 > .FBunit:first-child {width: calc(66.67% - 10px); margin-top: 0px;}
.FB2to1 > .FBunit:nth-child(2) {width: calc(33.33% - 10px); margin-top: 0px;}


.FBgolden > .FBunit:first-child {width: calc(66.67% - 10px); margin-top: 0px;}
.FBgolden > .FBunit:nth-child(2) {width: calc(33.33% - 10px); margin-top: 0px;}

.FBsilver > .FBunit:first-child {width: calc(100% - 10px); margin-top: 0px;}
.FBsilver > .FBunit:nth-child(2) {width: calc(100% - 10px); margin-top: 10px;}
.FBsilver > .FBunit:nth-child(3) {width: calc(100% - 10px); margin-top: 10px;}

.FBfullheight {height: 100%;}
.FBhigh {height: 800px;}
.FBhigh .FBunit {height: 20%;}



/* old flexbox layout containers, still in use */
.FBfull {width: 100%;}
.FBhalf {width: calc(50% - 10px);}
.FBthird, .FBthirdplus {width: calc(33.33% - 10px); margin-top: 0px;}
.FBtwothirds {width: calc(66.67% - 10px); margin-top: 0px;}

/* Flexbox subunit layout containers */
.FBsubunit1 {width: 67%;}
.FBsubunit2 {width: 30%;}

.FB221 .FBsubunit1 {width: 65%;}
.FB221 .FBsubunit2 {width: 33%;}

.FB321 .FBsubunit1 {width: 65%;}
.FB321 .FBsubunit2 {width: 33%;}

.FB421 .FBsubunit1 {width: 100%; order: 2;}
.FB421 .FBsubunit2 {width: 100%; order: 1;}

.FB67 {display: flex; width: calc(67%); margin-bottom: -20px;}
.FB6750 {display: flex; width: calc(67%);}
.FB5067 {display: flex; width: calc(50%);}


.FB50 {display: flex; width: calc(50%); margin-bottom: -20px;}
.FB60 {display: flex; width: calc(60%); margin-bottom: 0px;}


.FB20 {display: flex; width: calc(20% - 5%); margin-bottom: -20px;}
.FB80 {display: flex; width: calc(80% + 5%); margin-bottom: -20px;}
.FBhalfinv, .FBthirdinv {width: 100%;}

/* FB321 switcheroo */
.FB321.switcheroo .FBunit:nth-child(2) {order: 3;}
.FB321.switcheroo .FBunit:nth-child(3) {order: 2;}

/* FB333 subunit */
.FB333 .FBsubunit1 {width: 33%;}
.FB333 .FBsubunit2 {width: 33%;}
.FB333 .FBsubunit3 {width: 33%;}



/************************************************
Flexbox detailed styling
************************************************/
/* Flexbox align, justify and other tweaks*/
.FBaflexstart {display: flex; align-items: flex-start;}
.FBaflexend {align-items: flex-end;}
.FBaflexcenter {align-items: center;}
.FBjustifyleft {justify-content: flex-start;}
.FBjustifycenter {display: flex; justify-content: center;}
.FBjustifyright {display: flex; justify-content: flex-end;}
.FBac_center {display: flex; align-content: center;}
.FBac_start {display: flex; align-content: flex-start;;}
.FBstretchalign {display: flex; align-items: stretch;}
.FBspread {display: flex; justify-content: space-between;}
.noflex {display: block;}
.FBwrap {flex-wrap: wrap;}
.FBwrapXSvw {flex-wrap: nowrap;}

/* Flexbox direction styles */
.ccc {display: flex; flex-direction: column; flex-wrap: wrap;}
.ccr {display: flex; flex-direction: column; flex-wrap: wrap;}
.crr {display: flex; flex-direction: column; flex-wrap: wrap;}
.rcc {display: flex; flex-direction: row; flex-wrap: wrap;}
.rrc {display: flex; flex-direction: row; flex-wrap: wrap;}
.rrr {display: flex; flex-direction: row; flex-wrap: wrap;}

/* Flexbox padding styles */
.FBpadcell {padding: 25px 20px 25px 20px; margin-top: 20px; word-wrap: break-word;}
.FBpadcell.nomt {padding: 25px 20px 25px 20px; margin-top: 0px; word-wrap: break-word;}


.FBminipad {padding: 10px;}
.FBminipadLR {padding: 0px 20px 0px 20px;}
.FBlesspadcell {padding: 25px 20px 10px 20px; margin-top: 20px; word-wrap: break-word;}
.FBpadtopbot {margin: 20px 0px 0px 0px; padding: 0px;}

/* on the fly code */
.smallimg {scale: 0.95;}
.xsmallimg {scale: 0.65; margin: -3vw 0px -3vw 0px;}
.mlr {margin: 0px 10px 0px 10px;}
.mlr.left {margin: 0px 10px 0px 0px;}
.mlr.right {margin: 0px 0px 0px 10px;}
.FBmr {margin-right: 20px;}



/* special container styles */
.formwrap {border: 5px solid var(--beneorange); border-radius: 24px;}
.FBroundcornerbox {border: 5px solid #fff; border-radius: 18px;}
.roundcornerborder {border: 5px solid; border-radius: 18px;}

/* meet the team and firmenkunden containers */
.FBteam {width: calc((100% - 40px) / 3); margin-top: 20px; transition: background-color 0.35s ease-in-out;}
.FBteam:hover img {transform: scale(1.1); transition: transform 0.25s ease-in-out;}
.FBteam:hover {background-color: var(--extralightbeneblueBG);}

.fkcontainer {width: calc((100vw - 160px) / 3); text-align: center; padding: 10px 0px 10px 0px;}
.fkcontainer.double {width: calc((100vw - 160px) / 3 * 2 + 20px); text-align: center; padding: 10px 0px 10px 0px;}
.fkcontainer img {width: 85%;}
.fkcontainer:hover {background-color: #fff; transition: background-color 0.5s;}


/************************************************
Screens wider than 1200px
************************************************/

@media (min-width: 1200px) {
  .FBtwothirds {width: 727px;}
  .FBthird {width: 373px;}

  .FB111 > .FBunit {width: 1160px;}
  .FB221 > .FBunit {width: 570px;}
  .FB321 > .FBunit {width: 373.33px;}
  .FB421 > .FBunit {width: 275px;}

  .fkcontainer {width: 346px;}
  .fkcontainer.double {width: 712px;}

}

/************************************************
Screens up to 850px wide
************************************************/

@media (max-width: 850px) {
  .FB421 .FBunit {width: calc((100vw - 60px) / 2);}
  .FB321 .FBunit {width: calc((100vw - 60px) / 2);}
  .FB221 .FBunit {width: calc((100vw - 60px) / 2);}

  .FB421 .FBunit:nth-child(1), .FB421 .FBunit:nth-child(3) {margin-right: 20px;}
  .FB321 .FBunit:nth-child(1) {margin-right: 20px;}
  .FB321 .FBunit:nth-child(3) {width: calc(100vw - 40px);}
  .FB221 .FBunit:nth-child(1) {margin-right: 20px;}

  .FB2to1 > .FBunit:first-child {width: calc(50% - 10px); margin-top: 0px;}
  .FB2to1 > .FBunit:nth-child(2) {width: calc(50% - 10px); margin-top: 0px;}

  .FBgolden > .FBunit:first-child {width: 100%; margin-top: 0px;}
  .FBgolden > .FBunit:nth-child(2) {width: 100%; margin-top: 20px;}


  .FBsilver > .FBunit:first-child {width: calc(100% - 10px); margin-top: 0px;}
  .FBsilver > .FBunit:nth-child(2) {width: calc(50% - 10px); margin-top: 10px;}
  .FBsilver > .FBunit:nth-child(3) {width: calc(50% - 10px); margin-top: 10px;}



  .FB67 {width: 80%;}
  .FB6750 {display: flex; width: calc(66%);}
  .FB5067 {display: flex; width: calc(100%);}

  .FB20 {display: flex; width: calc(19%); margin-top: 0px;}
  .FB80 {display: flex; width: calc(81%); margin-top: 0px;}

  .FB421 .FBsubunit1 {width: 65%; order: 1;}
  .FB421 .FBsubunit2 {width: 33%; order: 2;}

  /* other subunit */
  .FBsubunit1 {width: 100%; order: 2;}
  .FBsubunit2 {width: 50%; order: 1;}



    /* FB333 subunit */
  .FB333 .FBsubunit1 {width: 27%; order: 1;}
  .FB333 .FBsubunit2 {width: 46%; order: 2;}
  .FB333 .FBsubunit3 {width: 27%; order: 3;}


  .reviewphoto {width: 50%; margin-left: 25%;}

  .FBfull {align-items: flex-start;}

  /* FB321 switcheroo */
  .FB321.switcheroo .FBunit:nth-child(2) {order: 2;}
  .FB321.switcheroo .FBunit:nth-child(3) {order: 3;}
  .crr {display: flex; flex-direction: row; flex-wrap: wrap;}

  .FBwrapXSvw {flex-wrap: wrap;}

  .crr {display: flex; flex-direction: row; flex-wrap: wrap;}
  .rcc {display: flex; flex-direction: column; flex-wrap: wrap;}

}


/************************************************
Screens up to 667px wide
************************************************/

@media (max-width: 667px) {

  .FBgroup {flex-direction: column;}
  .FB111 .FBunit {min-width: 100%; margin-right: 0px;}
  .FB221 .FBunit {min-width: 100%; margin-right: 0px;}
  .FB321 .FBunit {min-width: 100%; margin-right: 0px;}
  .FB421 .FBunit {min-width: 100%; margin-right: 0px;}

  .FB2to1 > .FBunit:first-child {width: 100%;}
  .FB2to1 > .FBunit:nth-child(2) {width: 100%;}

  .ccr {flex-direction: row; flex-wrap: wrap; justify-content: center;}
  .rrc {flex-direction: column; flex-wrap: wrap; justify-content: center;}
  .rrr {flex-direction: row; flex-wrap: wrap;}



  /* not needed anymore? */
  .FBhalf, .FBtwothirds {width: 100%; margin-top: 0px;}
  .FBhalf, .FBthird, .FBquarter {width: 100%; margin-top: 20px;}
  .halfsize {width: 60%; margin-left: 20%;}
  .reviewphoto {width: 50%; margin-left: 25%;}
  .FBhalfnospace, .FBthirdnospace, .FBquarternospace {width: 100%;}
  .FBfooterpad {padding: 0px 0px 0px 0px;}
  .partnerbox {height: 24vw;}

  .FBpadcell {padding: 20px;}

  .fkcontainer, .fkcontainer.double {width: 100%; padding: 20px 0px 20px 0px;}

  .FBteam {width: calc((100% - 20px) / 2); margin-top: 20px;}

  .FB67 .FB50 {width: 100%;}
  .FB6750 {display: flex; width: calc(77%);}


  .FB20 {display: flex; width: calc(15%); margin-top: 0px;}
  .FB80 {display: flex; width: calc(85%); margin-top: 0px;}

  .FBthirdinv {width: calc((100% - 40px)/3); margin-right: 20px;}
  .FBthirdinv:last-child {width: calc((100% - 60px)/3); margin-right: 0px;}

  .FBhalfinv {width: calc((100% - 20px)/2); margin-right: 20px;}
  .FBhalfinv:last-child {width: calc((100% - 20px)/2); margin-right: 0px;}

  .FBwrapXSvw {flex-wrap: wrap;}

  .FBsilver > .FBunit:first-child {width: calc(100% - 10px); margin-top: 0px;}
  .FBsilver > .FBunit:nth-child(2) {width: calc(100% - 10px); margin-top: 0px;}
  .FBsilver > .FBunit:nth-child(3) {width: calc(100% - 10px); margin-top: 0px;}

  .FBbtncontent {display: flex; flex-direction: row; flex-wrap: nowrap;}

  .FBbtnsubcontent {width: 50%;}


}


/*********************************
iPad queries
**********************************/

@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),

/* 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)

{
/*
  .FBrow {flex-wrap: wrap;}
  .FBhalf, .FBtwothirds {width: 100%;}
  .FBthird, .FBquarter {width: 49%;}
*/


}