/************************************************
Flexbox Containers
************************************************/
/* Flexbox mother containers */
.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;}

/* 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;}

/* 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;}

.FB20 {display: flex; width: calc(20% - 5%);}
.FB40 {display: flex; width: calc(40% - 5%);}
.FB50 {display: flex; width: calc(45% + 5%);}
.FB80 {display: flex; width: calc(80% + 5%);}
.FB30 {display: flex; width: calc(25% + 5%);}
.FBhalfinv, .FBthirdinv {width: 100%;}

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


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

/* 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;}
.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;}
.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.8; margin: -1vw 0px -1vw 0px;}
.mlr {margin: 0px 10px 0px 10px;}
.FBmr {margin-right: 20px;}
.marginB20 {margin-bottom: 20px;}

/* special container styles */
.formwrap {border: 5px solid var(--beneorange); border-radius: 24px;}
.FBroundcornerbox {border: 5px solid #fff; 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 - 120px) / 3); text-align: center; padding: 10px 0px 10px 0px;}
.fkcontainer.double {width: calc((100vw - 120px) / 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: 360px;}
  .fkcontainer.double {width: 740px;}

  .xsmallimg {scale: 0.65; margin: -21px 0px -21px 0px;}

}

/************************************************
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;}

  .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;}

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

  .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;}

  .xsmallimg {scale: 1; margin: -0vw 0px 1vw 0px;}


}


/************************************************
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;}

  /* 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;}

  .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;}

}


/*********************************
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%;}
*/


}