/************************************************
Forms
************************************************/
.formrow {margin-top: 10px;}
.formrow  ul{padding:0; list-style:none; text-align: left;}
.formrow ul li{display: flex; justify-content: space-between; margin-left: 0px;}

/************************************************
Text Fields
************************************************/

.formrow ul li .field-style {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 12px;
  outline: none;
  border: 1.5px solid var(--beneblue);
  border-radius: 12px;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  font: 1.6vw sans-serif;
  background: #fff;
}

.formrow ul li .field-split {width: calc(50% - 10px);}
.formrow ul li .field-full {width: calc(100% - 0px);}
.formrow ul li textarea {width: 100%; height: 150px; background: #fff;}


.formrow ul li  .field-style:focus {box-shadow: 0 0 5px var(--beneblue); border: 1.5px solid var(--beneblue); background: rgba(255, 255, 255, 1);}

.formrow ul li  .field-style:hover {box-shadow: 0 0 5px var(--beneblue); border: 1.5px solid var(--beneblue); background: rgba(255, 255, 255, 1);}




/************************************************
Button
************************************************/

.formrow ul li input[type="button"],
.formrow ul li input[type="submit"] {
  background-color: var(--beneblue);
  border: 1px solid var(--beneblue);
  border-radius: 3em;
  display: inline-block;
  cursor: pointer;
  color: #FFFFFF;
  padding: 6px 1em 6px 1em;
  text-decoration: none;
  font: 1.8vw "Avenir Next", sans-serif;
  min-width: 16vw;
  justify-content: center;
}

.formrow ul li input[type="button"]:hover,
.formrow ul li input[type="submit"]:hover {
  box-shadow: 0 0 5px var(--beneblue);
  background-color: var(--beneblueextralight);
  transition: all .2s ease-in-out;
  border: 1px solid #000;
  color: #000;
}


.benebutton {
  border: 2px solid #fff;
  border-radius: 3em;
  display: inline-block;
  cursor: pointer;
  padding: 6px 1em 6px 1em;
  text-decoration: none;
  font: 1.6vw "Avenir Next", sans-serif;
  font-weight: bold;
  font-style: italic;
  justify-content: center;
  color: #fff;
  width: 100%;
  text-align: center;
  margin-bottom: 5px;
}

.benebutton.mini {width: 50%;}

.benebutton:hover {transition: all .2s ease-in-out; border: 2px solid #000; color: #000;}

.extralightbeneblueBG .benebutton {background-color: var(--benebluemultiply);}
.extralightleguppinkBG .benebutton {background-color: var(--leguppinkmultiply);}
.extralightlegupgreenBG .benebutton {background-color: var(--legupgreenmultiply);}
.lightorangeBG .benebutton {background-color: var(--beneorangemultiply);}
.extralightpurpleBG .benebutton {background-color: var(--benepurplemultiply);}

.extralightbeneblueBG .benebutton:hover {box-shadow: 0 0 5px var(--beneblue); background-color: var(--benebluelight);}
.extralightleguppinkBG .benebutton:hover {box-shadow: 0 0 5px var(--leguppink); background-color: var(--leguppinklight);}
.extralightlegupgreenBG .benebutton:hover {box-shadow: 0 0 5px var(--legupgreen); background-color: var(--legupgreenlight);}
.lightorangeBG .benebutton:hover {box-shadow: 0 0 5px var(--beneorange); background-color: var(--beneorangelight);}
.extralightpurpleBG .benebutton:hover {box-shadow: 0 0 5px var(--benepurple); background-color: var(--benepurplelight);}

.multiplyorangeBG.benebutton:hover, .multiplyorangeBG .benebutton:hover {box-shadow: 0 0 5px var(--beneorange); background-color: var(--beneorangemild);}






/************************************************
Checkbox
************************************************/

input[type="checkbox"].switch_1 {
  font-size: 1.8vw;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 7.0vw;
  height: 3.5vw;
  background: var(--beneblueextralight);
  border-radius: 1.75vw;
  border: 1.5px solid var(--beneblue);
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  display: flex;
}

input[type="checkbox"].switch_1:checked {background: var(--beneblue); border: 1.5px solid var(--beneblue);}

input[type="checkbox"].switch_1:hover {box-shadow: 0 0 5px var(--beneblue); background: var(--benebluelight); border: 1.5px solid #000;}

input[type="checkbox"].switch_1:after {
  position: absolute;
  content: "";
  width: 3.25vw;
  height: 3.25vw;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
  box-shadow: 0 0 .25em rgba(0,0,0,.3);
  -webkit-transform: scale(.8);
  transform: scale(.8);
  left: 0;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

input[type="checkbox"].switch_1:checked:after {left: calc(100% - 3.25vw); background: #fff;}


/************************************************
Dropdown Menu
************************************************/

.center-on-page {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

/* Reset Select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  transition: all .2s ease-in-out;
  font-family: "Avenir Next", sans-serif;
}

select {
  padding: 4px 1em 4px 1em;
  cursor: pointer;
  font-size: 1.8vw;
  text-align: center;
  color: #fff;
  border-radius: 3em;
  background-color: var(--benebluemild);
  border: 1px solid var(--benebluemild);
}

select::-ms-expand {display: none;}
select:hover {box-shadow: 0 0 5px var(--benebluemild); color: #000; background-color: var(--beneblueextralight); border: 1px solid #000;}

.dropdown::after {
  content: '\25BC';
  position: relative;
  top: 0;
  padding-right: 7px;
  bottom: 0;
  padding: 0 0 0 0;
  color: #fff;
  background: var(--beneblue);
  pointer-events: none;
  border-radius: 3em;
  font-size: 12px;
}

/* Custom Select */
.dropdown {
  width: 450px;
  position: relative;
  overflow: hidden;
  border-radius: 3em;
  margin-right: 0.3em;
  margin-left: 0.2em;
  border-radius: 3em;
  background-color: var(--beneblue);
  border: 2px solid #fff;
}

.dropdown:hover {
  box-shadow: 0 0 5px var(--beneblue);
  color: var(--beneblue);
  background-color: #fff;
  border: 2px solid var(--beneblue);
}

.dropdown:hover::after {color: var(--beneblue);}


/************************************************
Form Styles for Mobile or small Windows
************************************************/

@media (min-width: 1200px) {
  select {font-size: 21.6px;}
  .formrow ul li input[type="button"], .formrow ul li input[type="submit"] {font-size: 21.6px; min-width: 192px;}

  input[type="checkbox"].switch_1 {font-size: 21.6px;	width: 84px; height: 42px; border-radius: 21px;}
  input[type="checkbox"].switch_1:after {width: 39px;	height: 39px;}
  input[type="checkbox"].switch_1:checked:after {left: calc(100% - 39px); background: #fff;}
  .formrow ul li .field-style {font-size: 19.2px;}

  .benebutton {font-size: 19.2px; min-width: 120px; min-height: 72px;}

}


@media (max-width: 850px), (hover: none) {

  select {font-size: 2.5vw;}
  .formrow ul li input[type="button"], .formrow ul li input[type="submit"] {font-size: 2.5vw;}

  input[type="checkbox"].switch_1{width: 8vw;	height: 4vw; border-radius: 2vw;}
  input[type="checkbox"].switch_1:after{width: 3.5vw; height: 3.5vw;}
  input[type="checkbox"].switch_1:checked:after{left: calc(100% - 3.75vw);}
  .formrow ul li  .field-style{font-size: 2.4vw;}
  .benebutton {font-size: 2.2vw; min-width: 10vw; max-width: 70%; min-height: 8vw;}



}


@media (max-width: 667px), (hover: none) {
  select {font-size: 2.7vw;}
  .formrow ul li input[type="button"], .formrow ul li input[type="submit"] {font-size: 2.7vw;}

  input[type="checkbox"].switch_1{width: 10vw;	height: 5vw; border-radius: 2.5vw;}
  input[type="checkbox"].switch_1:after{width: 4.5vw; height: 4.5vw;}
  input[type="checkbox"].switch_1:checked:after{left: calc(100% - 4.5vw);}
  .formrow ul li  .field-style{font-size: 2.4vw;}

  .benebutton {font-size: 3.6vw; min-width: 10vw; max-width: 70%; }
.whybene .benebutton, .FB421 .FBunit .benebutton {max-width: 100%;}

}