/* RESET */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  font-weight: normal;
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

a:focus {
  outline: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
}

del {
  color: #333;
}

ins {
  background: #fff9c0;
  text-decoration: none;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin: 24px;
  margin-bottom: 1.714285714rem;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

small {
  font-size: smaller;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

/* Clearing floats */
.clear:after,
.wrapper:after,
.format-status .entry-header:after {
  clear: both;
}

.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
  display: table;
  content: "";
}


/* Form fields, general styles first */
button,
input,
textarea {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: inherit;
  padding: 6px;
}

button,
input {
  line-height: normal;
}

textarea {
  font-size: 100%;
  overflow: auto;
  vertical-align: top;
}

label.form-required:after {
  content: ' *';
}

/* Reset non-text input types */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Buttons */
.menu-toggle,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
li.bypostauthor cite span {
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.428571429;
  font-weight: normal;
  color: #7c7c7c;
  background-color: #e6e6e6;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
  background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
  background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
  background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
  background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
  border: 1px solid #d2d2d2;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}

.menu-toggle,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

.menu-toggle:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  color: #5e5e5e;
  background-color: #ebebeb;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
  background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
  background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
  background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
  background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}

.menu-toggle:active,
.menu-toggle.toggled-on,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  color: #757575;
  background-color: #e1e1e1;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
  background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
  background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
  background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
  background-image: linear-gradient(top, #ebebeb, #e1e1e1);
  box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
  border: none;
}

/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
  max-width: 100%;
}

.show-mobile {
  display: none;
}

/* elements */
.breadcrumb>li+li::before {
  content: '» ';
  vertical-align: middle;
  color: #aaa;
}

body {
  font-family: 'Hind', sans-serif;
  font-size: 15px;
  color: #7a7a7a;
}

body .dialog-off-canvas-main-canvas {
  background-color: #FFF;
}

#toolbar-administration+.dialog-off-canvas-main-canvas {
  margin-top: 40px;
}

body.page-user .dialog-off-canvas-main-canvas {
  background-color: #EEE;
}

body.page-user-main .dialog-off-canvas-main-canvas {
  background-color: #FFF;
}

#wrap1 {
  position: relative;
  float: left;
  width: 100%;
  z-index: 2;
}

#hleft {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

#hright {
  display: none;
  position: absolute;
  right: 0;
  top: 70px;
  width: 50%;
  height: 100%;
  background: transparent url('../images/orange-bg.png') right top repeat-x;
}

body.front #hright {
  height: 502px;
}

body.not-front #hright {
  height: 521px;
}

body.not-front #hright2 {
  position: absolute;
  right: 0;
  top: 70px;
  width: 50%;
  height: 485px;
  background: transparent url('../images/orange-bg.png') right top repeat-x;
  z-index: 1;
}

#head-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

img#logoc {
  height: 400px;
  width: auto;
  margin-left: calc(50% - 200px);
  -webkit-box-shadow: 0px 2px 10px 2px rgba(52,52,52,0.5); 
  box-shadow: 0px 2px 10px 2px rgba(52,52,52,0.5);
}

#hhero {
  height: 387px;
  width: 100%;
  position: relative;
  margin-top: 0px;
  background-color: #ef974d;
  float: right;
}

#logoc {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 20;
}

#logoc a {
  float: left;
}

#logoc img {
  width: 245px;
  height: 245px;
  -webkit-box-shadow: 0px 2px 10px 2px rgba(52,52,52,0.5); 
  box-shadow: 0px 2px 10px 2px rgba(52,52,52,0.5);
}

#ihero {
  position: relative;
  height: 441px;
  width: 100%;
}

#ihero:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  bottom: 0;
}

#idatetext {
  position: absolute;
  bottom: 0;
  color: #FFF;
  background-color: #ff8400;
  font-size: 30px;
  line-height: 55px;
  padding: 5px 30px 0 60px;
}

/* footer */
footer.footer {
  position: relative;
  width: 100%;
  margin: 0px auto 0 auto;
  padding: 0;
  border: 0;
  z-index: 1;
  background-color: #FFF;
}

footer.footer .footer-orange {
  width: 100%;
  height: 30px;
  background-color: #ff8400;
}

footer.footer .footer-color {
  color: #FFF;
  background: transparent url('../images/00_banner-3.png') left bottom no-repeat;
  background-size: cover;
}

footer.footer .footer-text {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  line-height: 150%;
  font-size: 16px;
}

footer.footer .footer-text a {
  font-weight: bold;
  text-decoration: none;
  color: #FFF;
}

footer.footer #footer-logo {
  position: absolute;
  right: 15%;
  top: -15px;
  height: calc(100% + 30px);
  width: auto;
  z-index: 999999;
  -webkit-box-shadow: 0px 2px 10px 2px rgba(52,52,52,0.5); 
  box-shadow: 0px 2px 10px 2px rgba(52,52,52,0.5);
}

footer.footer .footer-logos {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px 0;
  line-height: 150%;
  font-size: 20px;
  color: #001559;
  display: flex;
  justify-content: space-between;
}

footer.footer .footer-logos .f1 {
  flex: 1;
}

footer.footer .footer-logos .f2 {
  flex: 4;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

footer.footer .footer-logos .f2 img {
  height: 100px;
  width: auto;
  margin-right: 25px;
}

footer.footer .footer-logos .f3 {
  flex: 2;

}

footer.footer .footer-logos .f3 img {
  max-height: 125px;
}

footer.footer .all-rights {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 10px auto;
  padding: 0 20px;
}
footer.footer .all-rights .ar1 {
  font-size: 16px;
  color: #9b9b9b;
}
footer.footer .all-rights .ar2 a {
  font-size: 16px;
  color: #241b5c;
  margin-left: 20px;
}

/* cookie banner */
body #sliding-popup {
  width: 100%;
  text-align: center;
}

body #sliding-popup .popup-content {
  box-shadow: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.15);
  background: rgba(60, 60, 59, 0.80);
  max-width: unset;
  width: unset;
}

body #sliding-popup .popup-content #popup-text {
  padding: 1.5rem;
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  margin: 0;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1.75;
}

body #sliding-popup .popup-content #popup-text a {
  color: #ff8400
}

body #sliding-popup button {
  transition: color .15s ease-in-out;
  background: none;
  font-weight: normal;
  border: none;
  border-left-color: currentcolor;
  border-left-style: none;
  border-left-width: medium;
  box-shadow: none;
  border-left: 1px solid #e7eaec;
  text-transform: uppercase;
  margin: 0;
  border-radius: 0;
  padding: 1.5rem;
  color: #fff;
  text-shadow: none;
  cursor: pointer;
}

/* header internal */
#ihdate {
  position: absolute;
  top: 444px;
  left: 0px;
  z-index: 9999;
}

#ihfb {
  position: absolute;
  top: 185px;
  right: 10px;
  z-index: 9999;
  text-align: right;
  width: 149px;
}

#ihfb a {
  text-decoration: none;
}

#ihfb img {
  /* width: 100%;
	height: auto; */
}

#ihfb img.logofb {
  margin-right: 26px;
}

#ihfb img.logoig {
  margin-top: 40px;
  margin-right: 60px;
}

#ihfb p {
  margin: 10px 20px 0 20px;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: #FFF;
}

#isubw {
  position: relative;
  width: 100%;
  margin: 0 auto;
  clear: both;
  z-index: 1;
}

#isubw.full-grey {
  background-color: #eee;
}

#isubw #payoff-head {
  position: absolute;
  right: 25px;
  top: 60px;
  width: 15%;
  height: auto;
  z-index: 999;
}

#isubww {
  position: relative;
  width: 100%;
  float: left;
  z-index: 1;
  background-color: #eee;
}

#isubww #breadcrumbs {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* background: transparent url('../images/grey-orange-skew.png') right top no-repeat; */
}

#isubww ol.breadcrumb {
  background-color: transparent;
  font-size: 14px;
  color: #767676;
  padding: 15px 0;
  margin: 0;
}

#isubww ol.breadcrumb li a {
  color: #767676;
}

#isubww ol.breadcrumb>.active {
  color: #767676;
  font-weight: 600;
}

#isubw .backlink {
  position: absolute;
  right: 220px;
  top: 22px;
  color: #241b5c;
  font-weight: 700;
  text-transform: uppercase;
}

#isubw .backlink span {
  color: #fc7100;
}

#isub {
  display: none;
  position: absolute;
  height: 55px;
  /* top: 0; */
  width: 82%;
  margin: 0 9%;
  background-color: #eee;
  transform: skewy(-1.5deg);
  transform-origin: right bottom;
  z-index: -29;
}

#fform #isub,
#fform #isub {
  height: 100%;
  /* bottom: 0; */
  width: 100%;
  margin: 0;
}

#isub1 {
  position: absolute;
  transform-origin: right bottom;
  height: 100%;
  width: 20000px;
  right: 0;
  bottom: 0;
  background-color: #eee;
  z-index: -2;
}

#isub2 {
  position: absolute;
  transform-origin: right bottom;
  width: 20000px;
  height: 54px;
  right: 0;
  bottom: 0;
  background-color: #eee;
  z-index: -2;
  transform: skew(-19deg, 1.5deg);
}

#fform #isub2,
#fform #isub2 {
  height: 113.5%;
}

#isub:after {
  position: relative;
}

#iisub {
  display: none;
  position: absolute;
  right: 180px;
  top: 72px;
  text-align: right;
  color: #272727;
}

#isubw a.sublink {
  color: #241b5c;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding-left: 20px;
  background: transparent url('orange-dot-sm.png') 8px 8px no-repeat;
}

#isubw a.sublink.first {
  background: none;
  padding-left: 10px;
}

/* homepage */
#hhdate {
  position: absolute;
  top: 300px;
  left: 0px;
  z-index: 9999;
  width: 155px;
}

#hhdate img {
  width: 100%;
  height: auto;
}

#hh_hero {
  position: absolute;
  top: 20px;
  transform-origin: top right;
  right: calc(50% + 200px + 70px);
  height: 90%;
  transform: rotate(-6deg);
  border: 4px solid #FFF;
  box-shadow: 10px 10px 20px rgba(52,52,52,0.5);
  z-index: 1;
}

#hhslogan {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: calc(50% - 200px - 4%);
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-size: 40px;
  font-weight: 700;
  color: #FFF;
  line-height: 56px;
  text-shadow: 2px 2px 4px rgb(0 0 0 / 70%);
  z-index: 1;
}

#hhdatetext {
  position: absolute;
  right: 2%;
  bottom: 20px;
  width: calc(50% - 200px - 4%);
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-size: 36px;
  font-weight: 400;
  color: #FFF;
  line-height: 56px;
  text-shadow: 2px 2px 4px rgb(0 0 0 / 70%);
  z-index: 1;
}

#hhdatetext span {
  font-weight: 700;
}

#hhdatetext span.hhdateyear {
  font-weight: 700;
}

#hhfb {
  display: none;
  position: absolute;
  top: 185px;
  right: 10px;
  z-index: 9999;
  text-align: right;
  width: 149px;
}

#hhfb a {
  text-decoration: none;
}

#hhfb img {}

#hhfb img.logofb {
  margin-right: 26px;
}

#hhfb img.logoig {
  margin-top: 40px;
  margin-right: 60px;
}

#hhfb p {
  margin: 10px 20px 0 20px;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: #FFF;
}

#dmsearch {
  position: absolute;
  right: 100px;
  margin-top: 8px;
}

#msearch {}

#msearch #msearchinput {
  float: left;
  height: 40px;
  width: 200px;
  border: 0;
  background-color: transparent;
  border-radius: 0;
  z-index: 1;
  position: relative;
  -webkit-box-shadow: unset;
  box-shadow: unset;
  outline: none;
  padding-left: 20px;
  color: #001559;
  font-size: 13px;
  margin-top: 0 !important;
}

#msearch input[type="text"]+label {
  font-weight: normal;
  position: absolute;
  top: 0px;
  left: 0;
  height: 40px;
  width: 200px;
  background-color: #fff2d6;
  padding: 15px 0 0 20px;
  z-index: 0;
  color: #001559;
  font-size: 13px;
}

#msearch #msearchinput:valid,
#msearch #msearchinput:focus {
  background-color: #fff2d6;
}

#msearch input[type="text"]:valid+label,
#msearch input[type="text"]:focus+label {
  display: none;
}

#msearch input[type="submit"] {
  float: left;
  background: #FFF url(../images/search.png) center center no-repeat;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  outline: none;
  -webkit-box-shadow: unset;
  box-shadow: unset;
  background-size: 50%;
  background-color: #fff2d6;
}

/* thank you homepage */
.thankyou {
  width: 100%;
  clear: both;
  /* padding-top: 80px; */
}

.thankyou2 {
  position: relative;
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
}

.thankyou_img {
  position: relative;
  width: 100%;
}

.thankyou_img img {
  width: 100%;
  height: auto;
}

.thankyou_text {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 20px;
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  font-size: 70px;
  font-weight: 800;
  font-family: 'Roboto Slab', serif;
  text-shadow: 2px 2px 4px rgb(0 0 0 / 70%);
}

.thankyou_text_long {
  clear: both;
  width: 90%;
  margin: 0 auto;
  padding: 20px 0 30px 0;
  text-align: center;
  color: #7a7a7a;
  font-size: 16px;
}

/* second thank you block homepage */
.thankyou.two {
  position: relative;
  background-color: #EEE;
  padding: 0 0 80px 0;
}

.thankyou_button {
  clear: both;
  width: 90%;
  padding: 30px 0;
  text-align: center;
  margin: 0 auto;
}

.thankyou_photos {
  position: relative;
  width: 100%;
}

.thankyou_photos_back {
  display: grid;
  grid-template-columns: 40% 20% 40%;
  padding: 30px 0;
}

.thankyou_photos_back img {
  width: 100%;
  height: auto;
  border: 6px solid #FFF;
}

.thankyou_photos_front {
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.thankyou_photos_front img {
  height: 100%;
  width: auto;
  border: 6px solid #FFF;
}

.thankyou_photos_front iframe {
  height: 100%;
}

/* end thank you homepage */
#message-banner {
  position: relative;
  float: left;
  width: 100%;
  padding: 80px 0 0 0;
}

#message-body {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#message-body .drupal-message {
  margin-bottom: 20px;
}


#hwcontent {
  position: relative;
  float: left;
  width: 100%;
  line-height: 25px;
}

#hwcontent #hwslogan {
  position: absolute;
  right: 1%;
  top: 35%;
  width: 20%;
  z-index: 999;
}

#hwcontent #hwslogan img {
  width: 100%;
  height: auto;
}

#hwcontent2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #eeeeee;
}

#hcontent {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#hcontent2 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 100px;
  width: 100%;
  margin: 0 auto;
  /* background: #eeeeee url('../images/grey-orange-skew.png') right top no-repeat; */
}

.home__content-wrapper {
  position: relative;
  width: 100%;
  clear: both;
}
.home__content-wrapper.-pattern {
  /* background: #eeeeee url('../images/00_banner_2.png') left bottom no-repeat;
  background-size: cover; */
}
#background__banner-1,
#background__banner-2,
#background__banner-3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom left;
  z-index: 0;
}

.home__content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 0;
  z-index: 1;
}
.home__content.haction-blocks {
  padding-top: 30px;
}

.haction {
  position: relative;
  max-width: 560px;
}

.haction img {
  width: 100%;
  height: auto;
}

.haction div.haction__links {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 60%;
}

.haction a.haction__links-button {
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
  color: #FFF;
  text-align: center;
  border-radius: 10px;
  padding: 5px 40px;
  color: #FFF;
  text-decoration: none;
}

.haction a.haction__links-info {
  position: absolute;
  right: -17px;
  bottom: 50%;
  transform: translateY(50%);
  height: 40px;
  width: 40px;
  padding: 6px;
  border-radius: 50%;
  border: 3px solid #FFF;
  display: flex;
  justify-content: center;
}

.haction a.haction__links-info img {
  height: 100%;
  width: auto;
}

.-volunteer-focus .haction {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.-volunteer-focus .haction div.haction__links {
  position: relative;
  bottom: unset;
  left: unset;
  transform: unset;
}

/*
#hcontent2 .haction a:after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 25px;
  background-image: url('../images/icon-i.png');
  background-size: cover;
}
  */

.modalMessages .modal-content {
  padding: 10px;
}

.modalMessages .modal-header {
  border-bottom: 0;
  padding: 0;
}

.modalMessages .modal-header button.close {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 30px;
  opacity: 1;
}

.modalMessages .modal-body {
  padding-top: 0;
  line-height: 140%;
}

.modalMessages .modal-body h2 {
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  font-size: 30px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  color: #241b5c;
  max-width: 90%;
}

.modalMessages .modal-body h3 {
  font-weight: 400;
  font-size: 18px;
  color: #241b5c;
}

.modalMessages .modal-body p {
  margin: 0 0 18px 0;
}

.modalMessages .modal-body p.modalMessagesLinks {
  display: flex;
  justify-content: space-between;
}

.modalMessages .modal-body a.modalMessagesLink {
  max-width: 40%;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
  color: #FFF;
  text-align: center;
  border-radius: 10px;
  padding: 5px 40px;
  color: #FFF;
  text-decoration: none;
}

#hcontent2 #hhsearch {
  position: relative;
  width: 50%;
  margin: 0 0 20px 17%;
  float: left;
}

#hcontent2 #hhsearch form {
  float: left;
  width: 100%;
  background-color: #FFF;
}

#hhsearch input[type="text"] {
  height: 58px;
  width: 100%;
  float: left;
  border: 0;
  border-radius: 0;
  padding-left: 30px;
  font-size: 28px;
  font-weight: 400;
  color: #ff8400;
  outline: none;
  text-align: center;
}

#hhsearch input[type="submit"] {
  float: right;
  background: #FFF url(../images/search.png) center center no-repeat;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 0;
  outline: none;
  position: absolute;
  right: 0;
}

#hcskew1 {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: skewx(-10deg);
  background-color: #eeeeee;
  z-index: -1;
  transform-origin: left bottom;
}

#hcskew2 {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  left: -20000px;
  height: 100%;
  transform: skewy(-1.5deg);
  background-color: #eeeeee;
  z-index: -1;
  transform-origin: right bottom;
}

#hbright .open-jobs {
  position: absolute;
  right: 15px;
  top: 15px;
  text-align: center;
}

#hbright .open-jobs .ojobs {
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  font-size: 40px;
  color: #616161;
}

#hbright .open-jobs .oj {
  font-size: 12px;
  line-height: 24px;
  color: #1e1e1e;
}

#hparticipants {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0 auto;
  line-height: 25px;
  z-index: 1;
}

#hparticipants2 {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0 0 0;
}

#hparticipants article {
  max-width: 750px;
}

#hparticipants h2 {
  margin-bottom: 25px;
  font-family: 'Roboto Slab', serif;
  font-size: 36px;
  font-weight: 400;
  color: #241b5c;
}

#hparticipants p {
  font-size: 16px;
  font-weight: 400;
  color: #7f7f7f;
}

#hparticipants #hislands {
  position: relative;
  padding: 20px 0 55px 0;
}

#hparticipants #hislands #hiskew1 {
  position: absolute;
  width: 100%;
  top: -4%;
  left: 10px;
  height: 104%;
  background-color: #FFFFFF;
  z-index: -1;
  transform: skewx(12deg);
  transform-origin: left top;
}

#hparticipants #hislands #hiskew2 {
  position: absolute;
  width: 100%;
  top: -4%;
  left: -10px;
  height: 104%;
  background-color: #FFFFFF;
  z-index: -1;
  transform: skewx(-12deg);
  transform-origin: left top;
}

#hparticipants #hislands #hiskew1 .shadow1 {
  position: absolute;
  right: 0;
  top: 0;
  width: 450px;
  height: 200px;
  background-color: #FFF;
  -webkit-box-shadow: 5px -5px 25px -8px rgba(56, 56, 56, 0.5);
  -moz-box-shadow: 5px -5px 25px -8px rgba(56, 56, 56, 0.5);
  box-shadow: 5px -5px 25px -8px rgba(56, 56, 56, 0.5);
  z-index: -2;

}

#hparticipants #hislands #hiskew1 .shadow2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 470px;
  height: 220px;
  background-color: #FFF;
  z-index: -1;
}

#hparticipants #hislands #hiskew2 .shadow1 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 360px;
  height: 200px;
  background-color: #FFF;
  -webkit-box-shadow: -5px 5px 25px -8px rgba(56, 56, 56, 0.5);
  -moz-box-shadow: -5px 5px 25px -8px rgba(56, 56, 56, 0.5);
  box-shadow: -5px 5px 25px -8px rgba(56, 56, 56, 0.5);
  z-index: -2;

}

#hparticipants #hislands #hiskew2 .shadow2 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 380px;
  height: 220px;
  background-color: #FFF;
  z-index: -1;
}


#hparticipants #islwrap2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
#hparticipants div.hpb-island {
  float: left;
  /* width: 14.28%; 
  width: 16.6%;*/
  text-align: center;
  color: #4c4c4c;
  line-height: 20px;
}
#hparticipants div.hpb-island div.hpb-island-img {
  padding: 0 20px;
}
#hparticipants div.hpb-island div.hpb-island-img img {
  width: 100%;
  height: auto;
}

#hparticipants div.hpb-island p {
  color: #4c4c4c;
  line-height: 24px;
  font-size: 14px;
}

#hparticipants .hpb-island .hpb-islh1 {
  margin-top: 0px;
  font-size: 18px;
  font-weight: 600;
  color: #241b5c;
}

#hparticipants div.hpb-island .link-button {
  font-size: 13px;  
  padding: 12px 0px 12px 12px;
}

body.front #about {
  position: relative;
  width: 82%;
  margin: 0 auto;
  padding-bottom: 75px;
}

body.front #about .shadow1 {
  position: absolute;
  background-color: #eeeeee;
  left: -50px;
  top: 0;
  height: 113%;
  width: 105%;
  z-index: -1;
  transform: skewx(4deg) rotate(-2.5deg);
  transform-origin: left bottom;
}

body.front #about .shadow1 .svg1 {
  background-color: transparent;
  width: 112%;
  height: 100%;
  transform: skew(-18deg, -2deg);
  transform-origin: left top;

}

body.front #about .shadow2 {
  background-color: #eeeeee;
}

body.front #hhvideo {}

body.front #hhvideo iframe {
  max-width: 100%;
}

body.front #hhtext {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 18px;
  color: #FFF;
  line-height: 25px;
}

body.front #hhtext .hidethis {
  display: none;
}

body.front #hhtext h2 {
  display: none;
}

body.front #hhtext p {
  margin-bottom: 20px;
}

body.front #hhtext .orange-button {}

body.front #hvoltext article {
  font-size: 18px;
  line-height: 25px;
}
body.front #hvoltext article p {
  margin-bottom: 20px;
}
body.front #hvoltext article h2 {
  display: none;
}

/* navigation */
header .nav>li>a {
  display: initial;
}

header#navbar .menu>.is-active>a,
header#navbar .menu a:hover {
  /* font-weight: bold; */
  background: none;
  color: #fc7100;
}

header#navbar .menu>.open>a,
header#navbar .menu>.open ul li a:hover {
  /* background-color: #fff2d6; */
}

header#navbar {
  margin: 0;
  padding: 0;
  /* background: #FFFFFF url('../images/red-skew.png') left top no-repeat;
    background-size: 88% 100%; */
  border: 0;
  background-color: #FFF;
  border-radius: 0;
}

header#navbar nav {
  position: relative;
  width: 100%;
  float: left;
}

header#navbar nav #nav-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

header #menu-top {
  float: left;
  width: 100%;
}

header #menu-main {
  width: 100%;
  float: right;
}

header#navbar .navbar-collapse {
  border: none;
}

header#navbar #logoc {
  margin: 35px 0 35px 25px;
}

header#navbar .caret {
  display: none;
}

header#navbar #menu-main ul.menu {
  float: right;
  padding-right: 30px;
}

header#navbar ul.menu li {
  padding-left: 5px;
  background: transparent url('orange-dot.png') left center no-repeat;
}

header#navbar ul.menu li:first-child {
  background: none;
}

header#navbar ul.menu li a {
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  font-size: 21px;
  color: #241b5c;
  text-transform: uppercase;
  padding: 15px 20px;
  display: block;
}

header#navbar #menu-main ul.menu li.last a {
  font-weight: normal;
}

header#navbar nav ul.tertiary {
  margin-top: 8px;
}

header#navbar nav ul.tertiary li.expanded {
  z-index: 999999999;
}

header#navbar nav ul.tertiary li a {
  font-size: 12px;
  font-weight: 500;
  padding: 9px;
  border: 1px solid rgb(243, 144, 29);
  border: 1px solid rgba(243, 144, 29, .2);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

header#navbar nav ul.tertiary li a img {
  height: 12px;
  width: auto;
  float: left;
  margin: 3px 5px 0 0;
}

header#navbar nav ul.tertiary li a .caret {
  display: inline-block;
  color: #f3901d;
  margin-left: 10px;
}

header#navbar .dropdown-menu {
  min-width: initial;
  padding: 0;
  border: 0;
  -webkit-box-shadow: initial;
  box-shadow: initial;
  margin-left: 0 !important;
  min-width: 100% !important;
}

header#navbar nav ul.secondary {
  margin-top: 8px;
}

header#navbar nav ul.secondary li:first-child {
  background: none;
}

header#navbar nav ul.secondary li {
  padding-left: 5px;
  background: transparent url('separator.png') left center no-repeat;
}

header#navbar nav ul.secondary li a {
  font-size: 14px;
  font-weight: 400;
  padding: 12px;
  text-transform: unset;
  font-family: 'Hind', sans-serif;
  letter-spacing: 0.1px;
  color: #001559;
}

#wrap1 .ident-wrap1 {
  position: absolute;
  bottom: 0px;
  width: 100%;
  float: left;
  z-index: 9999;
}

#wrap1 .ident-wrap2 {
  position: relative;
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  transform: translateY(42px);
}

.page-all-jobs #wrap1 .ident-wrap2,
.page-event-search #wrap1 .ident-wrap2 {
  /* bottom: -40px; */
  transform: translateY(20px);
}

.front #wrap1 .ident-wrap2 {
  /* bottom: -40px; */
  transform: translateY(20px);
}

#wrap1 #ident {
  position: relative;
  float: right;
  border-radius: 10px;
  box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
}

#wrap1 #ident a {
  color: #FFF;
  text-decoration: none;
}

#wrap1 #ident>span {}

#wrap1 #ident div.regionnavmenu {
  position: absolute;
  background: transparent url(../images/arrow-down-white.png) center center no-repeat;
  background-size: 60%;
  height: 100%;
  width: 30px;
  left: 5px;
  transition: transform 0.1s linear;
}

#wrap1 #ident div.regionnavmenu.show {
  transform: rotate(180deg);
}

/*
#wrap1 #ident > span:before {
    content: '';
    width: 22px;
    height: 34px;
    display: block;
    position: absolute;
    left: 30px;
    top: 12px;
    transform: skewx(15deg);
    transform-origin: right bottom;
}
*/
#wrap1 #ident>span>span {
  font-size: 18px;
  color: #FFF;
  display: block;
  font-weight: bold;
  font-family: 'Roboto Slab', serif;
  line-height: 37px;
  white-space: nowrap;
  width: 300px;
  padding: 0 0 3px 70px;
  overflow-x: hidden;
}

#wrap1 #ident>span>span:before {
  content: '';
  width: 25px;
  height: 25px;
  background: transparent url('../images/icons/naam-white.svg') center center no-repeat;
  display: block;
  position: absolute;
  left: 40px;
  top: 6px;
}

.nav-onlymobile div.region-navigation {
  display: none;
}

#wrap1 #ident div.region-navigation div.region-navigation {
  display: none;
  position: absolute;
  left: 0px;
  top: 47px;
  padding: 0;
  z-index: 9;
  box-shadow: 2px 2px 6px rgb(0 0 0 / 50%);
  /* transform: skewx(-15deg);
    transform-origin: right bottom; */
}

#wrap1 #ident div.region-navigation {
  top: 22px;
  width: 100%;
  background-color: #FFF;
  border-radius: 10px;
}

#wrap1 #ident div.region-navigation.show {
  display: block;
}

#wrap1 #ident div.region-navigation section.block {
  /* transform: skewx(15deg); */
}

div.region-navigation h2 {
  display: none;
}

#wrap1 #ident div.region-navigation ul {
  list-style: none;
  padding: 20px 30px;
  float: none;
}

#wrap1 #ident div.region-navigation ul li {
  list-style: none;
  background: none;
  padding: 0;
  float: none;
  /* float: left;
  background: transparent url('separator2.png') left center no-repeat; */
}

#wrap1 #ident div.region-navigation ul li:first-child a {
  border: none;
}

#wrap1 #ident div.region-navigation ul li a {
  border-top: 1px solid #6f6f6f;
  color: #6f6f6f;
  font-size: 17px;
  text-transform: unset;
  letter-spacing: 1px;
  background-image: none !important;
  padding: 20px 10px;
  white-space: nowrap;
  text-align: right;
  font-weight: bold;
}

#wrap1 #ident div.region-navigation ul li a:hover {
  background: none;
}

/* standard internal */
.main-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 60px auto;
  padding: 0;
  z-index: 0;
}

.main-container.fa-node-teaser {
  margin: 0;
  padding: 0;
}

.main-container.fa-node-teaser article {
  padding: 20px 0;
}

header#page-header {
  padding-top: 40px;
}

.drupal-message div.alert {
  margin-bottom: 3px;
}

.drupal-message div.alert a {
  color: #FFF;
}

.drupal-message div.alert .close {
  opacity: 0.6;
}

.drupal-message div.alert.error {
  background-color: #d91511;
  color: #FFF;
}

.drupal-message div.alert.status {
  background: #3c763d;
  color: #FFF;
}

.drupal-message div.alert.warning {
  background-color: #f99926;
  color: #FFF;
}

.main-container a,
.reg-inner a {
  color: #fc7100;
}

.main-container ol,
.main-container ul {
  padding-left: 20px;
  margin-bottom: 30px;
  margin-left: 20px;
}

.main-container ol {
  list-style: decimal;
}

.main-container ul {
  list-style: disc;
}

.main-container p {
  margin-bottom: 20px;
}

.main-container p:last-child,
.main-container ul:last-child {
  margin-bottom: 5px;
}

.main-container footer {
  display: none;
}

.main-container .row {
  position: relative;
  width: 100%;
  margin: 0px auto 0 auto;
}

.main-container .nav-tabs {
  margin-top: 30px;
}

.page-node.node-type-event .main-container .row {
  /* width: 100%; */
  padding-top: 20px;
}

.node-type-page section#maincol {
  display: grid;
  grid-template-columns: calc(50% - 25px) calc(50% - 25px);
  column-gap: 50px;
  row-gap: 50px;
  margin-top: 30px;
}

.node-type-page section#maincol.full-width {
  display: block;
}

.main-container .leftcol {
  font-size: 18px;
  line-height: 24px;
}

.main-container .leftcol img.field-field_image {
  max-width: 100%;
}

.main-container .rightcol {
  padding: 70px 0 0 0;
  font-size: 18px;
  line-height: 24px;
}

.main-container.add-event-fa .leftcol,
.main-container.add-event-fa .rightcol {
  width: 45%;
  float: left;
  margin: 0;
  padding: 0 0 0px 0;
}

.main-container.add-event-fa .rightcol {
  margin: 70px 0 0px 10%;
}

.main-container.add-event-fa #maincol>a.link-button {
  display: none;
}

.main-container .rightcol.subs {
  /* padding-top: 25px; */
}

.main-container .leftcol h1,
.main-container .rightcol h1 {
  margin: 0 0 30px 0;
  padding: 0;
  border: 0;
  font-family: 'Roboto Slab', serif;
  font-size: 38px;
  font-weight: bold;
  color: #241b5c;
}

.main-container .rightcol.has-header,
.main-container .rightcol.has-downloads {
  padding: 0;
}

.main-container .rightcol.has-downloads h2 {
  font-size: 24px;
}

.main-container .grey-block {
  padding: 50px 40px;
  color: #272727;
  background-color: #eeeeee;
}

.main-container .grey-block h2 {
  margin-bottom: 16px;
}

.main-container .grey-block header {
  display: none;
}

.main-container h2 {
  margin-bottom: 27px;
  font-family: 'Roboto Slab', serif;
  font-size: 28px;
  font-weight: bold;
  color: #001559;
}

.main-container h2 a {
  text-decoration: none;
  color: #001559;
  margin-bottom: 5px;
}

.main-container h3 {
  font-size: 18px;
  font-weight: 600;
  color: #001559;
  margin-bottom: 5px;
}

/* downloads */
.downloads {
  display: grid;
  grid-template-columns: 65% 35%;
  grid-row-gap: 1rem;
  justify-content: space-evenly;
}

.downloads .dltext {
  background-color: #ecebeb;
  padding: 5px 10px;
  color: #575757;
}

.downloads .dltext>div {
  font-weight: 800;
}

.downloads .dllink {
  background-color: #ecebeb;
}

.downloads .dllink a {
  float: right;
  line-height: 2em;
}

.downloads .dllink img {
  width: calc(100% - 5px);
  height: auto;
  float: left;
  margin-left: 5px;
}

.articles {
  font-size: 18px;
  margin-bottom: 40px;
  float: left;
  width: 100%;
}

.articles .article {
  clear: both;
  float: left;
  width: 100%;
  cursor: hand;
  cursor: pointer;
}

.articles .article:first {
  margin-top: 0;
}

.articles .article h2 {
  font-size: 24px;
}

.articles .article .accordion {
  clear: both;
  position: relative;
  margin-left: 15px;
}

.articles .article-row-odd .article-img {
  float: left;
  width: 338px;
  height: 152px;
  transform: skewx(-4deg);
  transform-origin: right top;
  position: relative;
}

.articles .article-row-odd .article-img span {
  transform: skewx(-35deg);
  transform-origin: right top;
  display: block;
  float: left;
  height: 152px;
  width: 156px;
  clip: rect(0px 156px 160px -178px);
  position: absolute;
  right: 0;
  top: 0;
}

.articles .article-row-odd .article-img img {
  transform: skewx(35deg);
  transform-origin: right top;
  display: block;
  float: right;
}

.articles .article-row-odd .article-border {
  float: left;
  width: 30px;
  transform: skewx(-37.6deg);
  transform-origin: right top;
  height: 152px;
  border-right: 4px solid #fc6504;
  border-left: 4px solid #fc6504;
}

.articles .article-row-odd .article-txt {
  float: left;
  width: 100%;
}

.articles .article-row-odd .article-txt>span {
  transform: skewx(-35deg);
  transform-origin: right top;
  display: block;
  background-color: #eee;
  height: 100%;
}

.articles .article-row-odd .article-txt>span>span {
  transform: skewx(38deg);
  transform-origin: right top;
  display: block;
  padding: 20px 40px 0 20px;
}

.articles .article-full {
  display: none;
  clear: both;
  padding: 20px 40px;
}

.articles .article-full .article-intro {
  display: none;
}

.articles .article-full-odd {
  margin: 0 11px 0 6px;
}

.articles .article-full-even {
  margin: 0 0 0 21px;
}

.articles .article-full img {
  max-width: 100%;
  height: auto;
}



.articles .article-row-even .article-img {
  float: right;
  width: 338px;
  height: 152px;
  transform: skewx(14deg);
  transform-origin: right bottom;
  overflow-x: hidden;
}

.articles .article-row-even .article-img span {
  transform: skewx(-45deg);
  transform-origin: right top;
  display: block;
  float: right;
  height: 152px;
  width: 200px;
  clip: rect(0px 317px 160px 0px);
  position: absolute;
  right: -34px;
  top: 0;
}

.articles .article-row-even .article-img img {
  transform: skewx(38deg);
  transform-origin: right top;
  display: block;
  float: right;
}

.articles .article-row-even .article-border {
  float: right;
  width: 30px;
  transform: translateX(21px) skewx(-36.5deg);
  transform-origin: right bottom;
  height: 152px;
  border-right: 4px solid #fc6504;
  border-left: 4px solid #fc6504;
}

.articles .article-row-even .article-txt {
  float: left;
  width: 100%;
}

.articles .article-row-even .article-txt>span {
  transform: skewx(-41deg);
  transform-origin: left bottom;
  display: block;
  background-color: #eee;
  height: 100%;
}

.articles .article-row-even .article-txt>span>span {
  transform: skewx(37deg);
  transform-origin: right bottom;
  display: block;
  padding: 20px 60px 0 0;
}

/* latest jobs */
body.page-all-jobs div.row h1,
body.page-event-search div.row h1 {
  display: none
}

#latest-wrap {
  position: relative;
  float: left;
  width: 100%;
  padding: 40px 0 20px 0;
  background-color: #EEE;
  margin-bottom: 20px;
}

..view-all-jobs {
  width: 100%;
  margin: 0px auto 0 auto;
}

.view-event-search>.view-content,
.view-all-jobs>.view-content {
  display: grid;
  grid-template-columns: calc(100% / 3 - 30px) calc(100% / 3 - 30px) calc(100% / 3 - 30px);
  column-gap: 45px;
  row-gap: 20px;
}

#latest-wrap #latest-all {
  position: absolute;
  top: 27px;
  right: 100px;
}

#latest-wrap #latest-img {
  position: absolute;
  right: 84%;
  top: 65px;
}

#latest-jobs {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  clear: both;
}

#latest-jobs .view-latest-events>.view-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 40px;
}

#latest-jobs .region-sidebar-second {}

#latest-jobs .views-row,
.main-container .view-all-jobs .views-row {
  font-size: 15px;
  color: #272727;
  line-height: 23px;
}

#latest-jobs .views-row .views-field a,
.main-container .view-all-jobs .views-row .views-field a {
  color: #fc7100;
  text-decoration: none;
}

#latest-jobs .views-field-title,
.main-container .view-all-jobs .views-field-title {
  float: left;
  height: 47px;
  width: 100%;
  font-size: 19px;
  font-weight: 600;
  overflow: hidden;
}

#latest-jobs .views-field-field-picture {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 178;
}

#latest-jobs .views-field-title {
  height: auto;
  padding-bottom: 5px;
}

#latest-jobs .views-field.views-field-title a,
.main-container .view-all-jobs h3.views-field-title a {
  color: #001559;
  text-decoration: none;
  font-family: 'Roboto Slab', serif;
}

#latest-jobs .views-field-field-cp-organization {
  color: #9b9b9b;
  padding: 5px 0 0 0;
}

#latest-jobs .views-field-field-finish-time {
  clear: both;
  color: #9b9b9b;
  padding: 0px 0 2px 35px;
  background: transparent url(../images/icon-time.png) left center no-repeat;
}

#latest-jobs .views-field-field-job-adress {
  clear: both;
  color: #9b9b9b;
  padding: 0px 0 2px 35px;
  background: transparent url(../images/icon-location.png) left center no-repeat;
}

.main-container .ev-image {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 178;
}

.main-container .ev-image .early-doeti-sticker {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 70px;
  background-color: #FFF;
  padding: 10px;
  border-radius: 50%;
  border: 2px solid #ff8400;
}

.main-container .ev-image .early-doeti-sticker img {
  width: 100%;
  height: auto;
}

.main-container.fa-node-teaser .ev-image {
  max-width: 375px;
}

.main-container .fa-node-teaser .ev-image img {
  float: left;
}

.main-container .ev-image>a>img {
  max-width: 100%;
  height: auto;
}

.main-container .ev-image .social-links {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 5px 0 0;
}

.main-container .ev-image .social-links a {
  display: block;
  float: right;
  font-size: 20px;
  line-height: 16px;
  padding: 2px 5px;
}

.main-container .ev-image .social-links a img {
  height: 30px;
  width: auto;
  margin-left: 10px;
}

.main-container .views-field-field-description-dutch-,
.main-container .views-field-field-description-papiamentu-,
.main-container .views-field-field-description-english-,
.main-container .decriptionlang {
  clear: both;
  height: 70px;
  font-size: 14px;
  margin: 18px 0 0 0;
  overflow: hidden;
}

.main-container .views-field-field-finish-time {
  clear: both;
  padding: 0px 0 2px 35px;
  background: transparent url('../images/icon-time.png') left center no-repeat;
}

.main-container .views-field-field-cp-organization {
  padding: 10px 0 0 0;
  font-size: 16px;
  color: #7a7a7a;
  white-space: nowrap;
  overflow: hidden;
  /* background: transparent url('../images/icon-ppl.png') left center no-repeat; */
}

.main-container .view-latest-events .views-field-field-cp-organization,
.main-container #leftcol .views-field-field-cp-organization {
  padding: 4px 0 2px 35px;
  background: transparent url('../images/icon-ppl.png') left center no-repeat;
  font-size: inherit;
  color: inherit;
  white-space: inherit;
  overflow: visible;
  text-align: inherit;
  font-weight: inherit;
}

.main-container .views-field-field-jobs-address {
  padding: 4px 0 2px 35px;
  background: transparent url('../images/icon-location.png') left 4px no-repeat;
}

.main-container .views-field-field-job-adress {
  padding: 4px 0 2px 35px;
  background: transparent url('../images/icon-location.png') left 4px no-repeat;
  /* white-space: nowrap; */
  overflow-x: hidden;
}

.main-container .views-field-field-job-category {
  padding: 4px 0 2px 35px;
  background: transparent url('../images/icon-tags.png') left 4px no-repeat;
  font-size: 13px;
  min-height: 29px;
  margin-top: 10px;
}

.main-container .views-field-field-job-category a {
  color: #fc7100;
  text-decoration: underline;
}

.main-container .views-field-field-situation {
  padding: 4px 0 2px 35px;
  background: transparent url('../images/icon-situation.png') 3px center no-repeat;
}

.main-container .views-field-nid {
  padding: 5px 0 15px 0;
  background: none;
  text-align: center;
  color: #241b5c;
  font-size: 18px;
  font-weight: 500;
  text-align: inherit;
  font-weight: inherit;
}

.main-container .view-latest-events .views-field-nid,
.main-container #leftcol .views-field-nid {
  padding: 4px 0 2px 35px;
  background: transparent url('../images/icon-vol.png') left center no-repeat;
  font-size: inherit;
  color: inherit;
  white-space: inherit;
  overflow: visible;
}

.main-container .views-field-links {
  clear: both;
  width: 100%;
  display: block;
  text-align: left;
}

.main-container #latest-jobs .views-field-links a.orange-button,
.main-container .view-all-jobs .views-field-links a.orange-button {
  width: 100%;
  text-align: center;
  padding: 5px;
  line-height: initial;
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  font-weight: bold;
  text-transform: none;
  color: #FFF;
  text-decoration: none;
}

.main-container #latest-jobs .views-field-links a.link-button,
.main-container .view-all-jobs .views-field-links a.link-button {
  font-size: 14px;
  padding: 10px 0 10px 5px;
  text-decoration: none;
  font-weight: 700;
  text-align: left;
  display: block;
}

/* the pie */
.pie {
  position: absolute;
  right: 5px;
  bottom: -15px;
  float: none;
  margin: 10px auto 0 auto;
  font-size: 120px;
  height: 1em;
  width: 1em;
  background-color: #d7d7d6;
  border-radius: 50%;
  clear: both;
}

body.node-type-event #leftcol2 .pie {
  font-size: 180px;
}

.pie:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: #FFF;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.pie:hover:after {
  top: 0.04em;
  left: 0.04em;
  width: 0.92em;
  height: 0.92em;
}

.pie *,
pie:before,
pie:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.pie span {
  font-size: 0.2em;
}

.pie .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}

.pie .percs {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  height: 100%;
  line-height: 5em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.pie:hover .percs {
  width: 3.33em;
  line-height: 3.33em;
  font-size: 0.3em;
}

.pie .percs .percs-reg {
  color: #808080;
  font-size: 20px;
  line-height: initial;
  font-family: 'Roboto Slab', serif;
  position: absolute;
  right: 55%;
  bottom: 47%;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.pie:hover .percs .percs-reg {
  font-size: 22px;
}

.pie .percs .percs-cap {
  color: #241b5c;
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  line-height: initial;
  position: absolute;
  left: 50%;
  top: 47%;
  font-weight: bold;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.pie:hover .percs .percs-cap {
  font-size: 22px;
}

.pie .percs .percs-line {
  border-right: 2px solid #808080;
  position: absolute;
  height: 30%;
  width: 50%;
  top: 19%;
  transform: rotate(35deg);
  left: 2%;
}

.pie .slice.fill-right {
  clip: rect(auto, auto, auto, auto);
}

.pie .bar {
  position: absolute;
  border: 0.08em solid #ff8400;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.pie .fill {
  position: absolute;
  border: 0.08em solid #ff8400;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* load more stuff */
ul.pagination,
nav.pager {
  display: none;
}

.main-container div#ajloader {
  height: 5px;
  display: none;
}

.main-container div.load-more-jobs {
  clear: both;
  width: 100%;
  text-align: center;
  border-top: 2px #ff8400 solid;
  position: relative;
  margin: 40px auto 80px auto;
}

.main-container div.load-more-jobs #loadMoreBut {
  position: absolute;
  top: -22px;
}

/* project detail */
body.node-type-event #leftcol {
  position: relative;
  float: left;
  width: 40%;
  margin: 0;
  padding: 0 0px 100px 0;
  color: #272727;
}

body.node-type-event #leftcol #back-jobs {
  position: relative;
  width: 100%;
  line-height: 56px;
  padding: 18px 10px 0 0;
  font-size: 18px;
  text-align: right;
  font-weight: 700;
  text-transform: uppercase;
}

body.node-type-event #leftcol .shadow1 {
  background-color: #eeeeee;
  transform-origin: left top;
  transform: skewy(-2.5deg);
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  display: none;
}

body.node-type-event #leftcol .grey-holder {
  padding: 18px 20px 44px 10%;
  background-color: #eeeeee;
  line-height: 25px;
}

body.node-type-event #leftcol .grey-holder .views-field a {
  color: #fc7100;
  text-decoration: underline;
}

body.node-type-event #leftcol .views-field-field-jobs-address {
  line-height: 20px;
}

body.node-type-event #leftcol h3 {
  font-size: 18px;
  font-weight: 700;
  color: #241b5c;
  margin-top: 30px;
  margin-bottom: 15px;
}

body.node-type-event #leftcol div.ev-contact {
  line-height: 22px;
}

body.node-type-event #leftcol .views-field-field-cp-first-name,
body.node-type-event #leftcol .views-field-field-cp-middle-name,
body.node-type-event #leftcol .views-field-field-cp-last-name,
body.node-type-event #leftcol .views-field-field-cp2-first-name,
body.node-type-event #leftcol .views-field-field-cp2-first-name-1,
body.node-type-event #leftcol .views-field-field-cp2-middle-name,
body.node-type-event #leftcol .views-field-field-cp2-last-name {
  display: inline;
  padding-top: 4px;
  padding-bottom: 2px;
}

body.node-type-event #leftcol .views-field-field-cp-first-name,
body.node-type-event #leftcol .views-field-field-cp-phone-number,
body.node-type-event #leftcol .views-field-field-cp-email-address,
body.node-type-event #leftcol .views-field-field-cp2-first-name,
body.node-type-event #leftcol .views-field-field-cp2-first-name-1,
body.node-type-event #leftcol .views-field-field-cp2-phone-number,
body.node-type-event #leftcol .views-field-field-cp2-email-address {
  padding-left: 35px;
}

body.node-type-event #leftcol .views-field-field-org_socialmedia img {
  margin: 10px 5px 0 0;
}

body.node-type-event #leftcol2 {
  position: relative;
  float: left;
  width: 20%;
  margin: 0 1.5% 0 0;
}

body.node-type-event #leftcol2 #ip-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

body.node-type-event #leftcol2 #ip-slider .ip-slide {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

body.node-type-event #leftcol2 #ip-slider div#slide2 {
  opacity: 1;
  z-index: 100000;
  height: 100%;
  text-align: center;
  width: 100%;
}

body.node-type-event #leftcol2 #ip-slider div#slide2.go-away {
  opacity: 0;
}

body.node-type-event #leftcol2 #ip-slider div#slide2 img {
  height: 100%;
  width: auto;
  max-width: none;
  margin: 0 -100%;
  display: unset;
}

body.node-type-event #leftcol2 #ip-slider #slide1 {
  position: relative;
  background-color: #EEE;
  padding: 20px;
}

body.node-type-event #leftcol2 #slide1 .pie .percs .percs-reg,
body.node-type-event #leftcol2 #slide1 .pie .percs .percs-cap {
  font-size: 26px;
}

body.node-type-event #leftcol2 #slide1 .views-field-nid {
  text-align: center;
  font-weight: 500;
  margin: 10px 0 0 0;
  font-size: 26px;
}

body.node-type-event #logoslider {
  position: relative;
  height: 80px;
  padding: 5px 0;
  overflow: hidden;
}

body.node-type-event #logoslider #logowrapper {
  height: 100%;
  position: absolute;
  width: 1000px;
}

body.node-type-event #logoslider #logowrapper .logoslide {
  float: left;
  padding: 0 5px 0 0;
  height: 75px;
}

body.node-type-event #logoslider #logowrapper .logoslide img {
  height: 94%;
  width: auto;
}

body.node-type-event #maincol {
  float: left;
  width: 60%;
  padding: 20px 5% 20px 0;
}

body.node-type-event.page-node-registrations #maincol {
  float: unset;
  width: 100%;
  padding: 20px 5% 20px 0;
}

body.node-type-event #maincol.editing {
  float: unset;
  width: 100%;
  padding: 0;
}

body.node-type-event #maincol h1.page-header {
  font-family: 'Roboto Slab', serif;
  font-size: 30px;
  font-weight: bold;
  color: #241b5c;
  margin: 0 0 20px 0;
  padding: 0;
  border: 0;
}

body.node-type-event #maincol #event-image {
  position: relative;
}

body.node-type-event #maincol #event-image img.event-image-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

body.node-type-event #maincol #event-image .early-doeti-sticker {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  background-color: #ff8400;
  padding: 20px 30px;
  border-radius: 50%;
  border: 3px solid #FFF;
  color: #FFF;
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
}

body.node-type-event #maincol #event-image .early-doeti-sticker img {
  width: 100%;
  height: auto;
}

body.node-type-event #maincol .event-date-notice {
  background-color: #f99926;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

body.node-type-event #maincol .field-name-field-description-dutch-,
body.node-type-event #maincol .field-name-field-description-english-,
body.node-type-event #maincol .field-name-field-description-papiamentu- {
  font-size: 18px;
  line-height: 24px;
  color: #001559;
  font-weight: 500;
  margin-bottom: 20px;
}

body.node-type-event #maincol .ev-register-block {
  display: none;
}

body.node-type-event #maincol .ev-register-block span {
  font-weight: 700;
}

body.node-type-event #maincol .orange-button {
  font-size: 24px;
}

body.node-type-event #maincol .node-event-register {
  float: right;
  margin: 20px 0 0 0;
}

body.node-type-event #maincol #ev-pic {
  float: right;
  width: 36%;
  margin-left: 7%;
}

body.node-type-event #maincol #ev-pic img {
  width: 100%;
  height: auto;
  margin-bottom: 7%;
}

body.node-type-event #maincol .field-name-field-desired-result-dutch-,
body.node-type-event #maincol .field-name-field-desired-result-english-,
body.node-type-event #maincol .field-name-field-desired-result-papiamentu- {
  font-size: 18px;
  line-height: 24px;
  color: #001559;
  font-weight: 500;
}

body.node-type-event #maincol .social-links {
  margin: 2px 0 0 10px;
  float: right;
}

body.node-type-event #maincol .social-links a {
  padding: 0 5px;
}

body.node-type-event #maincol .social-links a img {
  height: 20px;
  width: auto;
}

/* event registrations overview */
.views--event-registrations .custom-row {
  margin-top: 20px;
}

.views--event-registrations .custom-col {
  cursor: pointer;
  position: relative;
  padding: 7px 12px;
  box-sizing: border-box;
  border: 1px solid #efefef;
}

.views--event-registrations .custom-col.-even {
  background-color: #f3f3f3;
}

.views--event-registrations .custom-col.-has-more:before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  z-index: 999;
  background: transparent url('../images/icon-filter-down.png') center center no-repeat;
}

.views--event-registrations .custom-col.-open.-has-more:before {
  background: transparent url('../images/icon-filter-up.png') center center no-repeat;
}

.views--event-registrations .views-field>span.views-label {
  font-weight: bold;
}

.views--event-registrations .views-field>span.views-label+div.field-content {
  display: inline;
}

.views--event-registrations .views-field-field-re-last-name,
.views--event-registrations .views-field-field-re2-last-name {
  margin: 10px 0;
}

.views--event-registrations .views-field-field-re-last-name>span.views-label+div.field-content,
.views--event-registrations .views-field-field-re2-last-name>span.views-label+div.field-content {
  display: block;
}

.views--event-registrations .views-field-field-re2-last-name,
.views--event-registrations .views-field-field-re-additional-info {
  max-height: 0;
  overflow: hidden;
}

.views--event-registrations .custom-col.-open .views-field-field-re2-last-name,
.views--event-registrations .custom-col.-open .views-field-field-re-additional-info {
  overflow: visible;
  max-height: unset;
}

/* my events */
div.view-my-events .rightcol {
  padding: 20px 0 0 0px;
  width: 100%;
  display: grid;
  grid-template-columns: 25% 1fr 20%;
  column-gap: 30px;
  row-gap: 0px;
  justify-content: space-evenly;
}

div.view-my-events .rightcol .my-events-col {
  /* display: inline-grid; */
  padding: 10px;
}

div.view-my-events div.views-field-title {
  grid-column: auto / span 3;
  font-size: 19px;
  font-weight: 600;
  overflow: hidden;
  padding: 20px 10px 0 10px;
}

div.view-my-events div.views-field-field-picture {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 178;
}

div.view-my-events div.views-field-title a {
  color: #001559;
  text-decoration: none;
  font-family: 'Roboto Slab', serif;
}

div.view-my-events div.my-events-col .pie {
  bottom: unset;
  transform: translateY(-50%) scale(0.8);
  margin-top: 0;
  top: 50%;
}

div.view-my-events div.my-events-col2 {
  position: relative;
}

div.view-my-events div.my-events-col3 {
  grid-row: auto / span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

div.view-my-events div.my-events-col3>div {
  height: 40%;
}

div.view-my-events div.my-events-col3>div a {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 40%;
  line-height: 1;
  font-weight: 500;
}

div.view-my-events div.my-events-col3>div a:before {
  content: '';
  position: absolute;
  left: 5%;
  top: 20%;
  height: 60%;
  width: 35%;
}

div.view-my-events div.my-events-col3>div.views-field-volunteers-button a:before {
  background: url('../images/icons/vrijwilligers-white.svg') center center no-repeat;
}

div.view-my-events div.my-events-col3>div.views-field-financial-assistance a:before {
  background: url('../images/icons/geld%20aanvraag-white.svg') center center no-repeat;
}

div.view-my-events .rightcol2 {
  padding: 0 0 20px 0;
  border-bottom: 1px #000 solid;
}

div.view-my-events .rightcol a.orange-button {
  font-size: 14px;
}

div.view-my-events .rightcol .my-events-col21 a.orange-button,
div.view-my-events .rightcol .my-events-col22 a.orange-button {
  width: 100%;
  text-align: center;
  padding: 0 14px;
  font-weight: 500;
}

/*
div.view-my-events .views-row {
	position: relative;
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
div.view-my-events .views-field {
	padding: 0 10px;
    float: left;
}
div.view-my-events .views-field.views-field-title {
    float: left;
    width: 100%;
	padding-bottom: 5px;
}
div.view-my-events .views-field.views-field-title a {
    font-size: 22px;
    font-weight: 600;
    color: #001559;
    text-decoration: none;
}
div.view-my-events .views-field.views-field-field-job-day { width: 17%; font-weight: bold; font-size: 16px; }
div.view-my-events .views-field.views-field-field-finish-time { width: 28%; background: none; }
div.view-my-events .views-field-field-cp-organization,
div.view-my-events .views-field-nid {
	display: none;
}
*/

/* accordion */
.rightcol #accordion h3.ui-accordion-header {
  position: relative;
  font-weight: 600;
  font-size: 18px;
  color: #001559;
  padding-bottom: 15px;
  padding-right: 50px;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #d1d1d1;
  outline: none;
  margin-bottom: 15px;
  cursor: pointer;
}

.rightcol #accordion h3 span.ui-icon-triangle-1-s {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background: transparent url('../images/select-arrow.png') center center no-repeat;
  z-index: -1;
}

.rightcol #accordion h3 span.ui-icon-triangle-1-e {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background: transparent url('../images/select-arrow.png') center center no-repeat;
  transform: rotate(90deg);
  z-index: -1;
}

.rightcol #accordion .ui-accordion-content {
  margin: 40px 70px 40px 30px;
  color: #272727;
  border: none;
}

/* accordion in articles */
.articles .accordion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
}

.articles .accordion-grid img {
  width: 100%;
  height: auto;
}

.articles .accordion h3.ui-accordion-header {
  position: relative;
  font-weight: 500;
  font-size: 18px;
  color: #001559;
  padding-bottom: 15px;
  padding-left: 20px;
  background: unset;
  border: 0;
  border-bottom: 1px solid #d1d1d1;
  outline: none;
  margin-bottom: 15px;
  cursor: hand;
  cursor: pointer;
  font-family: 'Hind', sans-serif;
}

.articles .accordion h3.ui-accordion-header strong {
  font-weight: 500;
}

.articles .accordion h3 span.ui-icon-triangle-1-s {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: transparent url(../images/select-arrow.png) center center no-repeat;
  z-index: -1;
  transform: translate(4px, -9px);
}

.articles .accordion h3 span.ui-icon-triangle-1-e {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: transparent url(../images/select-arrow.png) center center no-repeat;
  transform: rotate(270deg) translateX(9px) translateY(4px);
  /* transform: translateY(-7px); */
  z-index: -1;
}

.articles .accordion .ui-accordion-content {
  margin: 40px 70px 40px 30px;
  color: #272727;
  border: 0;
  line-height: 1;
  background: unset;
  font-size: 18px;
  font-family: 'Hind', sans-serif;
}

/* submenu events for owner */
div#user-tab-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  max-width: 1200px;
  z-index: 0;
  padding-right: 0px;
  margin: 0 auto;
  display: block;
  clear: both;
}

div.user-tabs {
  float: right;
  padding: 0 40px 0 10px;
  margin-right: 260px;
  border-radius: 10px;
}

div.user-tabs div {
  float: left;
}

div.user-tabs div a {
  color: #FFF;
  font-size: 14px;
  display: block;
  padding: 11px 10px;
  font-weight: bold;
  letter-spacing: 1px;
}

div.user-tabs div a {
  text-decoration: none;
}

/* project register */
#signup-links {
  text-align: right;
  color: #272727;
  position: absolute;
  top: 20px;
  right: 220px;
}

#signup-choice,
#reg-form {
  position: relative;
  width: 82%;
  margin: 0 auto;
  /* text-align: center; */
  background-color: #eeeeee;
  padding-bottom: 30px;
}

#signup-choice #isub,
#reg-form #isub {
  height: 100%;
  width: 100%;
  margin: 0;
}

#signup-choice #isub2,
#reg-form #isub2 {
  height: 118%;
  transform: skew(-10deg, 1.5deg);
}

#signup-choice h1,
#reg-form h1 {
  margin: 0px 0 40px 0;
  text-align: center;
  font-family: 'Roboto Slab', sans-serif;
  font-size: 38px;
  font-weight: normal;
  color: #241b5c;
}

#signup-choice .su-choice {
  width: 37%;
  display: inline-block;
  background-color: #FFF;
  padding: 45px;
  line-height: 25px;
  color: #1e1e1e;
  margin: 0 20px;
  text-align: left;
}

#signup-choice .su-choice header,
#want-more header {
  display: none;
}

#signup-choice .su-choice h2 {
  font-family: 'Roboto Slab', sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #241b5c;
  margin-bottom: 25px;
}

#signup-choice .su-choice article {
  margin-bottom: 45px;
}

#signup-choice .su-choice .orange-button {
  font-size: 16px;
}

#want-more {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0 auto !important;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  padding-bottom: 50px;
}

#want-more article {
  max-width: 810px;
  margin: 0 auto;
}

#want-more a {
  color: #fc7100;
  text-decoration: underline;
}

#want-more h2 {
  font-family: 'Roboto Slab', serif;
  font-weight: normal;
  color: #001559;
  font-size: 28px;
  margin-bottom: 25px;
}

/* helpful modal */
#helpful-modal {
  display: block;
  top: 50%;
  transform: translateY(-50%);
  bottom: unset;
  color: #241b5c;
}

#helpful-modal h4 {
  font-family: 'Roboto Slab', serif;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: inherit;
}

#helpful-modal .orange-button {
  margin-top: 18px;
}

/* login modal */
.modal-content:after {
  content: "";
  display: block;
  clear: both;
}

#login-modal .modal-content .orange-alert,
#request-modal .modal-content .orange-alert {
  display: block;
  margin: 50px 45px 30px 0;
  padding: 20px 20px 15px 75px;
  background: #ff8400 url('../images/orange-alert.png') 15px 20px no-repeat;
  color: #FFF;
  line-height: 135%;
}

#login-modal .modal-content .orange-alert a,
#request-modal .modal-content .orange-alert a {
  color: #FFF;
  text-decoration: underline;
  font-weight: bold;
}

#login-modal .modal-content .orange-alert .oa-new-account,
#request-modal .modal-content .orange-alert .oa-new-account {
  text-align: right;
  display: none;
}

#login-modal .modal-content .orange-alert .oa-new-account a,
#request-modal .modal-content .orange-alert .oa-new-account a {
  color: #FFF;
  text-decoration: underline;
  font-weight: 500;
  font-size: 16px;
}

#login-modal .modal-content,
#request-modal .modal-content {
  padding: 0 15px 50px 60px;
  border-radius: 0;
}

#login-modal .modal-header,
#request-modal .modal-header {
  padding: 15px 0 10px 0;
  border: 0;
}

#login-modal .modal-header h4,
#request-modal .modal-header h4 {
  font-family: 'Roboto Slab', serif;
  font-size: 30px;
  font-weight: bold;
  color: #241b5c;
  text-align: left;
}

#login-modal .modal-header button.close,
#request-modal .modal-header button.close {
  font-family: 'Roboto Slab', serif;
  font-size: 40px;
  font-weight: bold;
  color: #ff8400;
  opacity: 1;
}

#login-modal .modal-body {
  padding: 0px 45px 0 0;
}

#request-modal .modal-body {
  padding: 0px 45px 0 0;
}

#login-modal .modal-body .form-item,
#request-modal .modal-body .form-item {
  position: relative;
  background-color: #eeeeee;
  margin-bottom: 15px !important;
}

#login-modal .modal-body input[type="text"]+label,
#login-modal .modal-body input[type="password"]+label,
#request-modal .modal-body input[type="text"]+label,
#request-modal .modal-body input[type="password"]+label {
  position: absolute;
  top: 20px;
  left: 10px;
  font-weight: normal;
  color: #434343;
}

#login-modal .modal-body input[type="text"]:valid+label,
#login-modal .modal-body input[type="password"]:valid+label,
#login-modal .modal-body input[type="text"]:focus+label,
#login-modal .modal-body input[type="password"]:focus+label,
#request-modal .modal-body input[type="text"]:valid+label,
#request-modal .modal-body input[type="password"]:valid+label,
#request-modal .modal-body input[type="text"]:focus+label,
#request-modal .modal-body input[type="password"]:focus+label {
  display: none;
}

#login-modal .modal-body input[type="text"],
#login-modal .modal-body input[type="password"],
#request-modal .modal-body input[type="text"],
#request-modal .modal-body input[type="password"] {
  background-color: transparent;
  height: 50px;
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: unset;
  box-shadow: unset;
  margin-top: 0 !important;
}

#login-modal .modal-body #form-right,
#request-modal .modal-body #form-right {
  float: left;
  width: 100%;
  margin-bottom: 20px;
}

#login-modal .modal-body .captcha img,
#request-modal .modal-body .captcha img {
  float: left;
  width: 48%;
  margin-right: 2%;
}

#login-modal .modal-body .captcha .form-item-captcha-response,
#request-modal .modal-body .captcha .form-item-captcha-response {
  float: right;
  width: 48%;
  margin-top: 10px;
}

.user-login-form .login-forgot a,
#request-modal .modal-body .login-forgot a {
  text-align: right;
  color: #ff8400;
  text-decoration: underline;
  float: right;
  margin-top: -5px;
  margin-bottom: 10px;
}

.user-login-form input.form-submit,
#request-modal .modal-body input.form-submit {
  display: inline-block;
  padding: 12px 18px;
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFF;
  background: #ff8400;
  border: 2px solid #FFF;
  border-radius: 0;
  height: unset;
}

#request-modal .modal-body input.form-submit {
  font-size: 17px;
}

.user-login-form input.form-submit:hover,
#request-modal .modal-body input.form-submit:hover {
  color: #ff8400;
  background-color: #FFF;
  border: 2px solid #ff8400;
}

.user-login-form .form-actions,
#request-modal .modal-body .form-actions {
  float: left;
  display: inline-block;
}

#request-modal .modal-body .form-actions {
  margin-top: 20px;
}

.user-login-form .link-button,
#request-modal .modal-body .link-button {
  margin-top: 10px;
  margin-left: 18px;
}

.user-login-form .link-button span,
#request-modal .modal-body .link-button span {
  font-size: inherit;
}

#login-modal .modal-footer,
#request-modal .modal-footer {
  display: none;
}

.user-login-form .extra_div,
#reg-form #rform .extra_div {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 45px);
}

body.page-user #reg-form #rform {
  /* padding-top: 81px; */
}

body.page-user.page-user-register #reg-form #rform {
  padding-top: 0;
}

#reg-form #rform .extra_div {
  padding-left: 5%;
  width: auto;
}

#login-modal .modal-body .extra_div input.form-submit,
#reg-form #rform .extra_div input.form-submit {
  background-image: url('../images/google-signin-blue.png');
  border: 0;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  float: left;
  background-size: 175px;
  width: 175px;
  height: 40px;
}

#login-modal .modal-body .extra_div span,
#reg-form #rform .extra_div span {
  font-weight: bold;
  font-size: 22px;
  float: left;
  line-height: 42px;
  padding: 0 0 0 3px;
  text-transform: uppercase;
  clear: both;
}

/* the registration form */
body.page-registration- .nav-tabs {
  display: none;
}

#reg-form {
  /* display: none; */
  padding: 0px 0 120px 0;
}

#reg-form.dodisplay {
  display: block;
}

#reg-form #rform {
  position: relative;
  max-width: 650px;
  margin: 0 auto;
  padding-bottom: 80px;
}

#reg-form #rform>div {
  width: 90%;
  margin: 0 auto;
}

#reg-form .reg-inner {
  position: relative;
  text-align: left;
}

#reg-form .help-block {
  /*
    background-color: #eee;
    padding: 5px 5px 0px 0;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
	*/
}

#reg-form div.form-type-password {
  width: 100%;
  padding: 0;
}

#reg-form .form-type-password-confirm .form-control-feedback {
  right: 5px;
}

#reg-form .help-block.password-help {
  margin-left: 10px;
  position: absolute;
  padding: 15px;
  left: unset;
  right: 100%;
  top: 50%;
  width: 200px;
  transform: translate(-12px, -50%);
  background-color: #ff8400;
  color: #FFF;
  font-size: 16px;
  margin: 0;
}

#reg-form div.alert {
  width: 100%;
  margin: 00px auto 20px auto;
  text-align: left;
  border: none;
}

#reg-form #form-left,
#reg-form #form-right {
  width: 100%;
  float: left;
}

#reg-form .fieldsreq {
  margin-bottom: 25px;
  color: #413e3a;
}

#reg-form .field-name-field-re-gender .form-group>label {
  color: #413e3a;
  font-weight: 700;
}

#reg-form .form-group {
  margin-bottom: 5px;
}

#reg-form .form-control {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: initial;
  -o-transition: initial;
  transition: initial;
}

#reg-form #more-ppl {
  display: none;
  clear: both;
  margin: 20px 0;
  float: left;
}
#reg-form #large-group {
  display: none;
  color: #FFF;
  background-color: #ff8400;
  padding: 10px 20px;
  margin-bottom: 5px;
  border-radius: 6px;
  font-weight: 500;
  line-height: 120%;
}

#reg-form #add-org {
  margin-top: 24px;
}

#reg-form #addmore,
#reg-form .switches {
  position: relative;
  float: right;
  margin: 15px 8% 0 0;
  font-weight: 700;
  font-size: 16px;
  color: #413e3a;
}

#reg-form .switches {
  margin-top: 18px;
}

#reg-form #addmore:after {
  content: '';
  position: absolute;
  right: -35px;
  top: -5px;
  background: transparent url(../images/icon-add.png) center center no-repeat;
  z-index: 999;
  width: 25px;
  height: 25px;
}

#reg-form #switchOrg:after,
#reg-form #switchInd:after {
  content: '';
  position: absolute;
  right: -35px;
  top: -5px;
  background: transparent url(../images/switch.png) center center no-repeat;
  z-index: 999;
  width: 25px;
  height: 25px;
}

#reg-form .field-widget-options-buttons label,
#reg-form .field-widget-options-buttons div,
#reg-form .field-widget-options-buttons input {
  display: inline-block;
}

#reg-form input.form-radio {
  margin: 0 0 0 -20px;
}

#reg-form div.radio {
  margin: 0 0 0 25px;
}

#reg-form div.field-type-text,
/* #reg-form div.field-widget-textfield, */
#reg-form div.field-widget-number,
/* #reg-form div.form-item-anon-mail, */
#reg-form div.field-type-email {
  width: 48%;
  float: left;
  margin-right: 2%;
}

#reg-form label[for="edit-anon-mail"]:after {
  /* content: ' *';
	display: inline; */
}

#reg-form div.form-type-text,
#reg-form div.form-type-textfield,
#reg-form div.form-type-number,
#reg-form div.form-type-email,
#reg-form div.form-type-password,
#reg-form div.form-type-textarea {
  position: relative;
  background-color: #FFF;
}

#reg-form input[type="text"],
#reg-form input[type="number"],
#reg-form input[type="email"],
#reg-form input[type="password"] {
  height: 50px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  padding: 6px 20px;
}

#reg-form input[type="text"]+label,
#reg-form input[type="number"]+label,
#reg-form input[type="email"]+label,
#reg-form input[type="password"]+label,
#reg-form textarea+label {
  position: absolute;
  top: 20px;
  left: 20px;
  font-weight: normal;
}

#reg-form input[type="text"]:valid+label,
#reg-form input[type="text"]:focus+label,
#reg-form input[type="number"]:valid+label,
#reg-form input[type="number"]:focus+label,
#reg-form input[type="number"]:invalid+label,
#reg-form input[type="email"]:valid+label,
#reg-form input[type="email"]:focus+label,
#reg-form input[type="password"]:valid+label,
#reg-form input[type="password"]:focus+label,
#reg-form textarea:valid+label,
#reg-form textarea:focus+label {
  left: unset;
  right: 10px;
  top: 5px;
  font-size: 14px;
}

#reg-form .field-name-field-gdpr-value {
  margin-top: 20px;
}

#reg-form .checkbox input[type="checkbox"] {
  margin-left: 0;
}

#reg-form div.password-confirm-message,
#reg-form div.password-strength {
  background-color: #EEE;
}

#reg-form div.field-type-list-boolean label {
  padding-top: 5px;
}

#reg-form div.field-type-list-boolean label input {
  top: 0;
}

#reg-form div.row {
  margin: 0;
}

#reg-form #form-right div.field-widget-textfield {
  width: 100%;
}

#reg-form #form-right .form-item-count {
  background-color: #FFF;
  margin-bottom: 10px;
  width: 100%;
}

#reg-form #form-right .jointxt {
  color: #413e3a;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 12px;
}

#reg-form textarea {
  height: 110px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

#reg-form #form-right .form-wrapper {
  clear: left;
}

#reg-form #form-right .field-widget-options-onoff {
  margin-top: 20px;
  float: left;
}

#reg-form #form-right .field-widget-options-buttons,
#reg-form #form-right .field-type-list-boolean,
#reg-form #form-right fieldset.form-type-radios {
  margin: 18px 0 17px 0;
  float: left;
  width: 100%;
  clear: both;
}

#reg-form #form-right fieldset.form-type-radios label,
#reg-form #form-right fieldset.form-type-radios div {
  display: inline-block;
}

#reg-form #form-right fieldset.form-type-radios label {
  padding: 0 10px 0 0;
}

#reg-form #form-right input[type="checkbox"] {
  margin: 0 10px 0 0;
}

#reg-form #submit-registration {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  text-align: center;
}

#reg-form #submit-registration a.orange-button {
  font-size: 24px;
}

/* hide some annoying fields */
#reg-form .field-name-field-re-middle-name,
#reg-form .field-name-field-re2-middle-name,
#reg-form .field-name-field-re-logo,
#reg-form .form-item-who-is-registering,
#reg-form fieldset#edit-locale,
#reg-form .form-actions {
  display: none;
}

/* some annoying fields we want to keep */
#reg-form form#user-pass-reset .form-actions,
#reg-form form#registration-delete-confirm .form-actions {
  display: block;
}

/* user forms */
.toboggan-unified.login #ajax-user-register-form-wrapper {
  display: none;
}

.toboggan-unified.register #login-form {
  display: none;
}

.toboggan-unified.login #login-form .login-forgot {
  text-align: right;
}

.toboggan-unified .login-form-actions {
  clear: both;
  text-align: center;
  padding-top: 30px;
}

#reg-form .toboggan-unified .user-login-form .form-actions {
  display: inline-block;
  float: unset;
}

.toboggan-unified .login-form-actions input.form-submit {
  border: 0px;
}

.toboggan-unified.login #login-form div.form-actions {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  text-align: center;
  display: block;
  z-index: 99999;
}

.toboggan-unified.login #login-form div.form-actions input.form-submit {
  display: inline-block;
  padding: 12px 14px;
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFF;
  background-color: #ff8400;
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.toboggan-unified.login #login-form div.form-actions input.form-submit:hover {
  color: #FFF;
  background-color: #ff8400;
  background-image: none;
}

#reg-form .toboggan-unified .form-group {
  margin-bottom: 20px;
}

#reg-form .toboggan-unified .form-type-password-confirm.form-group {
  margin-bottom: 0px;
}

#reg-form .toboggan-unified .row {
  margin: 0;
}

#reg-form .toboggan-unified div.form-type-password {
  background-color: #FFF;
}

#reg-form .toboggan-unified div.form-type-password label div.label {
  display: none;
}

#reg-form .toboggan-unified div.captcha {
  margin-top: 18px;
}

#reg-form .toboggan-unified div.captcha div.g-recaptcha>div {
  margin: 0 auto;
}

#reg-form .toboggan-unified div.captcha img,
#reg-form .toboggan-unified div.captcha div.form-item {
  float: left;
  width: 45%;
  height: auto;
}

#reg-form .toboggan-unified div.captcha div.form-item {
  margin-left: 2%;
}

/* user data forms */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #FFF url('../images/select-arrow.png') center right no-repeat !important;
}

select::-ms-expand {
  display: none;
  /* for ie10 & ie11 */
}

#page-form {
  position: relative;
  width: 100%;
  background-color: #eeeeee;
}

#page-form select {
  float: right;
  /* width: 48%; */
  height: 50px;
  outline: none;
  border: 0;
  border-radius: 0;
  outline: none;
}

body.page-user-main #page-form select {
  width: 48%;
}

#page-form select option {
  outline: none;
}

#page-form .pf-inner .region-content {
  position: relative;
}

#page-form .pf-inner {
  position: relative;
  width: 100%;
  margin: 0 auto 0px auto;
  max-width: 1200px;
  padding-top: 40px;
}

#page-form .pf-inner .shadow1,
#page-form .pf-inner .shadow2,
#page-form .pf-inner .shadow3 {
  display: none;
}

#page-form .reg-inner {
  position: relative;
  padding: 0 0 80px 0;
  max-width: 800px;
  margin: 0 auto;
}

#page-form #form2018 {
  padding: 0 10px 120px 10px;
  max-width: 800px;
  margin: 0 auto;
}

#page-form .form-header {
  position: relative;
  padding: 0;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

#page-form .form-header h1 {
  display: none;
  margin: 0 0 10px 0;
  padding: 0;
  border: 0;
  font-family: 'Roboto Slab', serif;
  font-size: 32px;
  font-weight: bold;
  color: #241b5c;
}

/* add event and add financial form icons */
#form-add-event-fa>div,
#form-add-event-fa>fieldset {
  position: relative;
  padding-left: 45px;
  clear: both;
}

/* exceptions because alternative layout */
#form-add-event-fa>div.form-item-title {
  background-color: transparent !important;
}

#form-add-event-fa>div.form-item-title input {
  background-color: #FFF !important;
}

#form-add-event-fa>div.form-item-title label {
  /* left: 60px!important; */
}

#form-add-event-fa>div input[type="checkbox"] {
  margin: 0;
}

#form-add-event-fa>div.smaller {
  padding-left: 0;
}

#form-add-event-fa>div.smaller>div {
  position: relative;
  padding-left: 45px;
}

#form-add-event-fa>div#more-ppl {
  padding-left: 0;
}

#form-add-event-fa>div#more-ppl>div {
  position: relative;
  padding-left: 45px;
}

#form-add-event-fa>div#more-ppl>div.smaller {
  padding-left: 0;
}

#form-add-event-fa>div#more-ppl>div.smaller>div {
  position: relative;
  padding-left: 45px;
}

#form-add-event-fa>div:before,
#form-add-event-fa>fieldset:before,
#form-add-event-fa>div.smaller>div:before,
#form-add-event-fa>div#more-ppl>div:before,
#form-add-event-fa>div#more-ppl>div.smaller>div:before {
  position: absolute;
  left: 0;
  top: 10px;
  width: 25px;
  height: 25px;
}

/* add event */
#form-add-event-fa>div.form-item-title:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/projectnaam.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-cp-organization:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/vereniging.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-job-area:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/locatie.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-job-address:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/vereniging.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-job-day:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/datum.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-start-time:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/tijd.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-finish-time:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/tijd.svg') center center no-repeat;
}

#form-add-event-fa>div.descriptions:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/klusbeschrijving.svg') center center no-repeat;
}

#form-add-event-fa>fieldset.field-name-field-child-friendly {
  margin-top: 0;
}

#form-add-event-fa>fieldset.field-name-field-child-friendly:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/geschikt%20kinderen.svg') center center no-repeat;
  top: -5px;
}

#form-add-event-fa>fieldset.field-name-field-child-friendly div {
  display: inline-block;
}

#form-add-event-fa>fieldset.field-name-field-child-friendly div label {
  padding-left: 0;
}

#form-add-event-fa>div.field-name-field-situation:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/activiteiten.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-organization-volunteers:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/vrijwilligers%20organisatie.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-volunteers-needed:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/vrijwilligers.svg') center center no-repeat;
}

#form-add-event-fa>div#job_cat:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/soort%20project.svg') center center no-repeat;
  top: 72px;
}

#form-add-event-fa>div.field-name-field-cp-first-name:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/naam.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-cp-email-address:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/email.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-cp-phone-number:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/telefoon.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-cp-phone-number2:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/telefoon.svg') center center no-repeat;
}

#form-add-event-fa>div#more-ppl>div.field-name-field-cp2-first-name:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/naam.svg') center center no-repeat;
}

#form-add-event-fa>div#more-ppl>div.field-name-field-cp2-email-address:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/email.svg') center center no-repeat;
}

#form-add-event-fa div#more-ppl div.field-name-field-cp2-phone-number:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/telefoon.svg') center center no-repeat;
}

#form-add-event-fa div#more-ppl div.field-name-field-cp2-phone-number2:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/telefoon.svg') center center no-repeat;
}

/* add financial assistance */
#form-add-event-fa>div.field-name-field-fb-jobtitle {
  display: none;
}

#form-add-event-fa .main-container.fa-node-teaser article.teaser-hidden {
  display: none;
}

/*
	#form-add-event-fa > div.field-name-field-fb-jobtitle:before {
		content: '';
		background: transparent url('/sites/all/themes/doet9/images/icons/projectnaam.svg') center center no-repeat;
	}*/
#form-add-event-fa>div.field-name-jobtitle-select:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/projectnaam.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-fb-project-date:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/datum.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-fb-start-time:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/tijd.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-fb-finish-time:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/tijd.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-fb-organization-volunteers:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/vrijwilligers%20organisatie.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-fb-volunteers-needed:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/vrijwilligers.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-fb-activities:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/activiteiten.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-fb-how-to-spend .form-item-field-fb-how-to-spend-0-value {
  background-color: transparent;
  margin: 20px 0;
}

#form-add-event-fa>div.field-name-field-fb-how-to-spend:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/besteding.svg') center center no-repeat;
  top: 70px;
}

#form-add-event-fa>div.field-name-field-fb-organization-name:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/naam%20organisatie.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-fb-address:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/locatie.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-fb-phone:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/telefoon.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-fb-email:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/email.svg') center center no-repeat;
}

#form-add-event-fa div.field-name-field-fb-bank-name:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/bank.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-fb-bank-acct-name:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/naam%20organisatie%20bij%20bank.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-fb-chamber-of-commerce:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/kvk.svg') center center no-repeat;
}

#form-add-event-fa>div.field-name-field-fb-how-much:before {
  content: '';
  background: transparent url('/sites/all/themes/doet9/images/icons/geld%20aanvraag.svg') center center no-repeat;
}

#form-add-event-fa>fieldset.field-name-field-fb-please-confirm {
  padding-top: 15px;
  margin-bottom: 0;
}

#form-add-event-fa>fieldset.field-name-field-fb-please-confirm+.description {
  font-size: 13px;
}

/* end add event and add financial form icons */

/* user profile form */
body.page-user-main #page-form {
  background-color: #FFF;
}

body.page-user-main #page-form .pf-inner {
  padding-top: 0;
  background-color: #FFF;
}

#page-form .reg-inner.columns {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
  margin-bottom: 50px;
}

#page-form .columns .columns-left {
  grid-row-start: 1;
  grid-row-end: span 2;
  background-color: #eee;
  padding: 0 0 40px 0;
}

#page-form .columns .columns-left>div {
  padding: 0 40px;
}

#page-form .columns .columns-right1,
#page-form .columns .columns-right2,
#page-form .columns .columns-social,
#page-form .columns .columns-descriptions {
  background-color: #eee;
}

#page-form .columns .columns-right1>div,
#page-form .columns .columns-right2>div,
#page-form .columns .columns-social>div,
#page-form .columns .columns-descriptions>div,
#page-form .columns .columns-right1>fieldset,
#page-form .columns .columns-right2>fieldset,
#page-form .columns .columns-social>fieldset,
#page-form .columns .columns-descriptions>fieldset {
  padding: 0 40px;
}

#page-form .columns .columns-right2 {
  padding-top: 30px;
}

#page-form .columns .columns-header {
  background-color: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 0 10px 0;
  margin-bottom: 40px;
}

#page-form .columns .columns-header h3.fieldsreq {
  font-size: 22px;
  margin: 0;
  padding: 0 0 0 20px;
  float: unset;
  line-height: 16px;
}

#page-form .columns .columns-header div.fieldsreq {
  margin: 0;
  padding: 0 0 0 20px;
  float: unset;
  font-weight: 400;
  line-height: 16px;
}

/* end user profile form */

#page-form #form-slider {
  position: relative;
  padding: 0;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}

#page-form #form-slider #form-slider-wrapper {
  position: absolute;
  left: 0;
  top: 0;
}

#page-form #form-slider .form-slide {
  position: relative;
  float: left;
}

#page-form #form-slider-controls {
  position: relative;
  padding: 0;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}

#page-form #form-slider-controls .fsprevnext {
  display: block;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
  font-weight: bold;
  color: #ff8400;
}

#page-form #form-slider-controls .fsprev {
  float: left;
  display: none;
}

#page-form #form-slider-controls .fsprev:before {
  content: '<';
  margin-right: 5px;
}

#page-form #form-slider-controls .fsnext {
  float: right;
  margin-right: 2%;
}

#page-form #form-slider-controls .fsnext:after {
  content: '>';
  margin-left: 5px;
}

#page-form #form-slider-screennrs {
  clear: both;
  text-align: center;
  padding-top: 20px;
}

#page-form #form-slider-screennrs .screennrs {
  display: inline-block;
  font-family: 'Roboto Slab', serif;
  font-size: 30px;
  background-color: #FFF;
  border-radius: 25px;
  width: 50px;
  line-height: 50px;
  color: #000;
  position: relative;
}

#page-form #form-slider-screennrs .screennrs.snractive {
  line-height: 66px;
  width: 66px;
  border-radius: 33px;
  background-color: #ff8400;
  color: #FFF;
}

#page-form #form-slider-screennrs #screennr2 {
  margin: 0 50px;
}

#page-form #form-slider-screennrs #screennr2:before {
  border-bottom: 2px solid #fff;
  content: "";
  display: table;
  height: 25px;
  right: 52px;
  position: absolute;
  top: 0;
  width: 50px;
}

#page-form #form-slider-screennrs #screennr2:after {
  border-bottom: 2px solid #fff;
  content: "";
  display: table;
  height: 25px;
  left: 52px;
  position: absolute;
  top: 0;
  width: 50px;
}

#page-form .only-2 #form-slider-screennrs #screennr2:after {
  display: none;
}

#page-form #form-slider-screennrs #screennr2.snractive:before {
  right: 68px;
  height: 32px;
}

#page-form #form-slider-screennrs #screennr2.snractive:after {
  left: 68px;
  height: 32px;
}

#page-form #form-slider input.form-checkbox {
  margin: 0;
}

/* financial assistance 2019 */
#page-form textarea#edit-field-fb-how-to-spend-0-value {
  display: none;
}

#page-form textarea#edit-field-fb-how-to-spend-0-value:valid+label,
#page-form textarea#edit-field-fb-how-to-spend-0-value:focus+label,
#page-form textarea#edit-field-fb-how-to-spend-0-value+label {
  position: relative;
  top: unset;
  right: unset;
  left: unset;
  font-size: 15px;
  color: #7a7a7a;
  margin: 10px 1%;
}

#page-form #faMatrix {
  /* background-color: #eee; */
  padding-top: 10px;
  width: 100%;
  float: left;
}

#page-form #faMatrix div.form-type-textfield {
  margin: 0;
  margin-bottom: 10px;
  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

#page-form #faMatrix div.form-type-textfield.form-type-left {
  float: left;
  width: 74%;
  margin-left: 1%;
}

#page-form #faMatrix div.form-type-textfield.form-type-right {
  float: left;
  width: 15%;
  margin-left: 2%;
}

#page-form .matrix-field {
  background-color: #FFF !important;
  margin-top: 10px;
  height: 30px !important;
  outline: none;
}

#page-form .matrix-field.matrix-left {
  width: 100%;
}

#page-form .matrix-field.matrix-right {
  width: 100%;
}

#page-form #faMatrix input[type="text"]+label {
  top: 15px;
}

#page-form #faMatrix input[type="text"]:valid+label,
#page-form #faMatrix input[type="text"]:focus+label {
  top: 5px;
}

#page-form #faMatrix #spend-plus,
#page-form #faMatrix .spend-min {
  float: left;
  width: 6%;
  margin-left: 1%;
  margin-top: 0px;
  padding-top: 6px;
  line-height: 34px;
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  cursor: hand;
}

#page-form #faMatrix #spend-plus div {}

/* start 2022 */
#page-form #faMatrix #matrix-total {
  float: left;
  width: 74%;
  margin-left: 1%;
  text-align: right;
  font-weight: 800;
  padding: 10px 10px 10px 0;
  text-transform: uppercase;
  font-size: 18px;
}

#page-form #faMatrix #matrix-total-nr {
  float: left;
  width: 15%;
  margin-left: 2%;
  font-weight: 800;
  padding: 10px 10px 10px 5px;
  font-size: 18px;
}

#page-form #faMatrix #matrix-error {
  float: right;
  margin-top: 5px;
  margin-right: 8%;
  text-align: right;
  font-weight: bold;
}

#page-form #faMatrix #matrix-error span {
  padding: 13px;
  float: right;
}

/* end 2022 */
/* end financial assistance 2019 */

/* bank cards */
#page-form #bankCards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px 15px;
  padding-bottom: 20px;
}

#page-form #bankCards .bank-card {
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background-color: #FAFAFA;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(153, 153, 153, 1);
  -moz-box-shadow: 2px 2px 2px 0px rgba(153, 153, 153, 1);
  box-shadow: 2px 2px 2px 0px rgba(153, 153, 153, 1);
  font-family: monospace, monospace;
  font-size: 14px;
  cursor: pointer;
}

#page-form #bankCards .bank-card .bank-card-name {
  font-weight: bold;
}

body.node-type-financial-assistance article.node-financial-assistance div.field-name-field-fb-how-to-spend {
  white-space: pre;
}

body.node-type-financial-assistance article .field {
  margin-bottom: 10px;
}

body.node-type-financial-assistance article .field .field-label {
  font-weight: bold;
}

/* project add success */
#page-form .addsuccess .form-slide {
  text-align: center;
}

#page-form .addsuccess #addsuccessimg {
  margin: 50px auto 40px auto;
}

#page-form .addsuccess h3 {
  color: #241b5c;
  font-family: 'Roboto Slab', serif;
  font-size: 26px;
  text-align: center;
  float: unset;
  margin: 0 0 30px 0;
}

#page-form .addsuccess a {
  color: #ff8400;
  text-decoration: underline;
}

#page-form #view-added-job {
  position: absolute;
  bottom: -120px;
  width: 100%;
  text-align: center;
}

#page-form .fieldsreq {
  clear: none;
  font-weight: 700;
  font-size: 16px;
  float: left;
  margin: 0 0 30px 45px;
}

#page-form #form-left,
#page-form #form-right {
  width: 45%;
  float: left;
  margin: 0 2.5%;
}

#page-form h3 {
  padding: 20px 0 20px 45px;
  font-weight: 700;
  font-size: 22px;
  color: #332a67;
}

#page-form #form-right h3.squeeze {
  margin: 0 0 2px 0;
}

#page-form .form-group {
  margin-bottom: 15px;
}

#page-form .form-control {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: initial;
  -o-transition: initial;
  transition: initial;
}

#page-form .form-type-radios label,
#page-form .form-type-radios div,
#page-form .form-type-radios input {
  display: inline-block;
}

#page-form .field-type-list-boolean label,
#page-form .field-type-list-boolean div,
#page-form .field-type-list-boolean input {
  display: inline;
}

#page-form .field-type-list-boolean label {
  padding-left: 10px;
  line-height: 120%;
}

#page-form input.form-radio {
  margin: 0 0 0 -17px;
}

#page-form div.radio {
  margin: 0 0 0 25px;
}

#page-form .field-widget-options-buttons {
  margin: 18px 0 7px 0;
  float: left !important;
  width: 100% !important;
}

#page-form div.smaller .field-widget-options-buttons {}

#page-form #edit-field-job-day label,
#page-form #edit-field-job-area label,
#page-form #edit-field-situation label,
#page-form #edit-field-fb-project-date label,
#page-form #edit-field-fb-jobtitle label {
  display: none;
}

#page-form #edit-field-job-day select,
#page-form #edit-field-job-area select,
#page-form #edit-field-situation select,
#page-form #edit-field-fb-project-date select,
#page-form #edit-field-fb-jobtitle select {
  width: 100%;
}

#page-form #form-right .field-name-field-contact-gender,
#page-form #form-right .field-name-field-contact2-gender {
  margin: 6px 0 12px 0;
}

#page-form div.field-widget-textfield,
#page-form div.field-widget-options-select,
#page-form div.field-widget-image-image,
#page-form div.field-widget-location,
#page-form div.field-type-list-boolean,
#page-form fieldset.field-type-list-boolean {
  clear: both;
  float: left;
  width: 100%;
  margin-bottom: 15px;
  clear: both;
}

#page-form div.field-widget-location div.form-type-textfield {
  width: 100%;
  margin-right: 0;
}

#page-form div.field-widget-location .form-item-field-jobs-address-0-locpick-user-latitude,
#page-form div.field-widget-location .form-item-field-jobs-address-0-locpick-user-longitude {
  display: none;
}

#page-form div.field-widget-location fieldset {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
}

#page-form div.field-widget-location fieldset div.panel-body {
  padding: 0;
}

#page-form div.field-widget-location fieldset legend {
  display: none;
}

#page-form div.field-widget-options-select label {
  float: left;
  width: 48%;
  margin-right: 2%;
  font-weight: 400;
  padding: 17px 0 0 0;
}

#page-form div.field-widget-options-select label span {
  font-weight: 700;
}

#page-form div.field-type-text {
  float: left;
  width: 100%;
}

#page-form div.form-type-textfield,
#page-form div.form-type-url,
#page-form div.form-type-textarea {
  float: left;
  width: 100%;
  margin-right: 2%;
}

#page-form div.form-type-textfield {
  margin-bottom: 0;
}

#page-form div.smaller {
  clear: both;
  display: flex;
  justify-content: space-between;
}

#page-form div.smaller div.field-type-text,
#page-form div.smaller div.field-widget-textfield,
#page-form div.smaller .field-widget-options-select,
#page-form div.smaller .field-widget-options-buttons,
#page-form div.smaller .field-widget-image-image,
#page-form div.smaller .field-type-number-integer,
#page-form div.smaller .field-widget-number {
  position: relative;
  width: 48%;
}

#page-form div.smaller div.field-type-text div.form-type-textfield {
  width: 100%;
  margin-right: 0;
}

#page-form div.smaller .field-widget-options-select label {
  display: none;
}

#page-form div.smaller .field-widget-options-select select {
  width: 100%;
  margin: 0;
}

#page-form div.smaller div.even-smaller {
  float: left;
  width: 50%;
  margin-right: 0;
}

#page-form div.smaller div.even-smaller .field-widget-options-select {
  clear: none;
  width: 46%;
  margin-right: 4%;
}

#page-form div.form-type-textfield,
#page-form div.form-type-url,
#page-form div.form-type-number,
#page-form div.form-type-select,
#page-form div.form-type-textarea {
  position: relative;
  background-color: #FFFFFF;
}

#page-form textarea {
  border: 0;
  border-radius: 0;
  padding-top: 20px;
  height: 80px;
}

#page-form #edit-field-org-description-pp-0-value,
#page-form #edit-field-description-papiamentu-0-value,
#page-form #edit-field-desired-result-papiamentu-0-value {
  background: transparent url('/sites/all/themes/doet9/images/flag-cw.png') 99% 96% no-repeat;
  background-size: 40px 30px;
}

#page-form #edit-field-org-description-nl-0-value,
#page-form #edit-field-description-dutch-0-value,
#page-form #edit-field-desired-result-dutch-0-value {
  background: transparent url('/sites/all/themes/doet9/images/flag-nl.png') 99% 96% no-repeat;
  background-size: 40px 30px;
}

#page-form #edit-field-org-description-en-0-value,
#page-form #edit-field-description-english-0-value,
#page-form #edit-field-desired-result-english-0-value {
  background: transparent url('/sites/all/themes/doet9/images/flag-en.png') 99% 96% no-repeat;
  background-size: 40px 30px;
}

#page-form div.descriptions textarea {
  height: 80px;
}

#page-form div.descriptions div.even textarea {
  height: 100px;
}

#page-form div.descriptions div.even {
  margin: 0px 0 10px 0;
  float: left;
  width: 100%;
}

#page-form div.descriptions div.even:last-child {
  margin: 0;
}

#page-form input[type="text"],
#page-form input[type="url"],
#page-form input[type="password"],
#page-form input[type="number"] {
  height: 50px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

#page-form input[type="text"]+label,
#page-form input[type="text"]+div.counter+label,
#page-form input[type="url"]+label,
#page-form input[type="url"]+div.counter+label,
#page-form input[type="number"]+label,
#page-form input[type="number"]+div.counter+label,
#page-form input[type="password"]+label,
#page-form textarea+label {
  position: absolute;
  top: 20px;
  left: 10px;
  font-weight: normal;
}

#page-form input[type="text"]:valid+label,
#page-form input[type="text"]:focus+label,
#page-form input[type="text"]:valid+div.counter+label,
#page-form input[type="text"]:focus+div.counter+label,
#page-form input[type="url"]:valid+label,
#page-form input[type="url"]:focus+label,
#page-form input[type="url"]:valid+div.counter+label,
#page-form input[type="url"]:focus+div.counter+label,
#page-form input[type="number"]:valid+label,
#page-form input[type="number"]:focus+label,
#page-form input[type="number"]:valid+div.counter+label,
#page-form input[type="number"]:focus+div.counter+label,
#page-form input[type="password"]:valid+label,
#page-form input[type="password"]:focus+label,
#page-form textarea:valid+label,
#page-form textarea:focus+label {
  /* display: none; */
  top: 5px;
  right: 7px;
  left: unset;
  font-size: 13px;
  color: #aaa;
}

#page-form .form-item div.counter {
  background-color: #eee;
  padding: 6px 5px 15px 0;
  font-size: 14px;
}

/* errors */
#page-form .inline-error {
  background-color: #eee;
  padding: 5px;
}

#page-form .form-group.error .uneditable-input,
#page-form .form-group.error input,
#page-form .form-group.error select,
#page-form .form-group.error textarea,
#page-form .form-group.has-error .uneditable-input,
#page-form .form-group.has-error input,
#page-form .form-group.has-error select,
#page-form .form-group.has-error textarea,
#reg-form .form-group.error .uneditable-input,
#reg-form .form-group.error input,
#reg-form .form-group.error select,
#reg-form .form-group.error textarea,
#reg-form .form-group.has-error .uneditable-input,
#reg-form .form-group.has-error input,
#reg-form .form-group.has-error select,
#reg-form .form-group.has-error textarea {
  border: 2px solid red;
  color: #999;
}

#reg-form .form-group.error input:valid,
#reg-form .form-group.error textarea:valid,
#reg-form .form-group.has-error input:valid,
#reg-form .form-group.has-error textarea:valid {
  border: 2px solid #fc7100;
}

.form-item input[type="text"]+label+div.help-block,
.form-item input[type="number"]+label+div.help-block,
.form-item input[type="email"]+label+div.help-block,
.form-item input[type="password"]+label+div.help-block,
.form-item textarea+label+div.help-block,
.form-select:focus+div.help-block,
.form-item.form-type-checkboxes label+div+div.help-block {
  display: none;
  transform: translate(0, 0);
  z-index: 999;
}

.form-item input[type="text"]:focus+label+div.help-block,
.form-item input[type="number"]:focus+label+div.help-block,
.form-item input[type="email"]:focus+label+div.help-block,
.form-item input[type="password"]:focus+label+div.help-block,
.form-item textarea:focus+label+div.help-block,
.form-select:focus+div.help-block,
.form-item.form-type-checkboxes label+div:hover+div.help-block {
  display: block;
  position: absolute;
  padding: 15px;
  right: 100%;
  top: 50%;
  width: 200px;
  transform: translate(-12px, -50%);
  background-color: #ff8400;
  color: #FFF;
  font-size: 16px;
  margin: 0;
}

.form-item input[type="text"]:focus+label+div.help-block:before,
.form-item input[type="number"]:focus+label+div.help-block:before,
.form-item input[type="email"]:focus+label+div.help-block:before,
.form-item input[type="password"]:focus+label+div.help-block:before,
.form-item textarea:focus+label+div.help-block:before,
.form-select:focus+div.help-block:before,
.form-item.form-type-checkboxes label+div:hover+div.help-block:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-left-color: #ff8400;
  border-right: 0;
  margin-top: -20px;
  margin-right: -12px;
  transform: scale(1, 0.6);
}

div.help-block {
  display: none;
  z-index: 999;
}

div.form-type-managed-file div.help-block {
  display: block;
  z-index: 998;
  width: auto;
  max-width: calc(100% - 120px);
}

div.form-type-managed-file div.help-block:before {
  display: none;
}

div.help-block.active {
  display: block;
  position: absolute;
  padding: 15px;
  width: 200px;
  transform: translate(-12px, -50%);
  background-color: #ff8400;
  color: #FFF;
  font-size: 16px;
  margin: 0;
}

div.help-block:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-left-color: #ff8400;
  border-right: 0;
  margin-top: -20px;
  margin-right: -12px;
  transform: scale(1, 0.6);
}

.popover div.help-block {
  display: block;
}

.popover div.help-block:before {
  display: none;
}

/*
#page-form div.field-type-number-integer div.form-item-field-organization-volunteers-und-0-value,
#page-form div.field-type-number-integer div.form-item-field-volunteers-needed-und-0-value {
    background-color: #eee;
}
#page-form div.field-type-number-integer div.form-item-field-organization-volunteers-und-0-value input,
#page-form div.field-type-number-integer div.form-item-field-volunteers-needed-und-0-value input {
    width: 49%;
    float: right;
    background-color: #FFF;
}
#page-form div.field-type-number-integer div.form-item-field-organization-volunteers-und-0-value label,
#page-form div.field-type-number-integer div.form-item-field-organization-volunteers-und-0-value input:valid + label,
#page-form div.field-type-number-integer div.form-item-field-organization-volunteers-und-0-value input:focus + label,
#page-form div.field-type-number-integer div.form-item-field-volunteers-needed-und-0-value label,
#page-form div.field-type-number-integer div.form-item-field-volunteers-needed-und-0-value input:valid + label,
#page-form div.field-type-number-integer div.form-item-field-volunteers-needed-und-0-value input:focus + label {
	font-size: 15px;
	color: #7a7a7a;
    top: 20px;
    left: 00px;
	
}
*/
div.field-type-image .btn-file,
div.field-widget-managed-file .btn-file {
  position: relative;
  overflow: hidden;
}

div.field-type-image .btn-file input[type=file],
div.field-widget-managed-file .btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

div.field-type-image .image-widget-data,
div.field-widget-managed-file .image-widget-data {
  position: relative;
  background-color: #FFF;
}

div.field-type-image .image-widget-data div.form-group,
div.field-widget-managed-file .image-widget-data div.form-group {
  margin-bottom: 0;
}

div.field-type-image .image-widget-data div.form-group,
div.field-widget-managed-file .image-widget-data div.form-group {
  height: 50px;
  margin: 0;
  padding: 15px 0 0 10px;
}

div.field-type-image .image-widget-data .btn-danger,
div.field-widget-managed-file .image-widget-data .btn-danger {
  position: absolute;
  right: 5px;
  top: 5px;
  height: 40px;
  border: 0;
  border-radius: 0;
}

div.field-type-image label,
div.field-widget-managed-file label {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  padding: 20px 0 0 10px;
  font-weight: 400;
  z-index: 1;
}

div.field-type-image label.control-label,
div.field-type-image div.form-group+label,
div.field-widget-managed-file label.control-label,
div.field-widget-managed-file div.form-group+label {
  display: none;
}

div.field-type-image span.btn-file,
div.field-widget-managed-file span.btn-file {
  float: right;
  height: 40px;
  margin: 5px !important;
  font-weight: 600;
  padding-top: 9px;
  font-size: 15px;
  border-radius: 0;
  background-color: #332a67;
}

div.field-type-image div.input-group span.input-group-btn:last-child,
div.field-widget-managed-file div.input-group span.input-group-btn:last-child {
  display: none;
}

div.field-widget-managed-file>div>label {
  display: none;
}

div.field-widget-managed-file .image-widget-data.uploaded div.input-group {
  display: none;
}

div.field-widget-managed-file .image-widget-data.uploaded div.form-rest {
  height: 60px;
}

div.field-widget-managed-file .image-widget-data.uploaded div.form-rest span.file--image {
  margin-top: 20px;
  margin-left: 10px;
  display: inline-block;
}

div.field-widget-managed-file .image-widget-data.uploaded div.form-rest input.button {
  width: unset;
  float: right;
  margin-top: 10px;
  color: #fff;
  background: #d9534f;
}

#image-chosen {
  height: 0px;
  width: 90px;
  aspect-ratio: 800 / 533;
  padding: 0px !important;
  float: right;
  position: absolute !important;
  right: 15px;
  margin-top: -72px;
}

#image-chosen.active {
  height: unset;
}

#image-chosen img {
  float: right;
  width: 100%;
  height: auto;
  outline: 2px #ff8400 solid;
  border-radius: 2px;
}

#choose-image-wrapper {
  background-color: #E1E1E1;
  /* padding: 15px!important; */
  padding: 0px 15px;
  margin-left: 45px;
  overflow-y: hidden;
  height: 0px;
}

#choose-image-button {
  display: inline-block;
  float: right;
  padding: 0 22px;
  line-height: 2.5em;
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFF;
  background-color: #ff8400;
  border-radius: 8px;
  padding-left: 22px !important;
  transform: translateY(-10px);
  margin-bottom: 20px;
  cursor: pointer;
}

#choose-image-button.inactive {
  display: none;
}

#choose-image-wrapper.active {
  height: unset;
  overflow-y: scroll;
  padding: 15px !important;
}

#choose-image {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
}

#choose-image .image-choice {
  cursor: pointer;
}

#choose-image .image-choice.active {
  outline: 4px #ff8400 solid;
  border-radius: 4px;
}

#choose-image .image-choice img {
  float: left;
  width: 100%;
  height: auto;
}

#page-form div#job_cat {
  width: 98%;
  clear: both;
  float: left;
}

#page-form div#job_cat div.form-type-checkboxes>label,
#page-form div#job_cat fieldset.form-type-checkboxes>label {
  margin: 20px 0;
  font-weight: 700;
  font-size: 22px;
  color: #332a67;
}

#page-form div#job_cat .form-checkboxes>div {
  width: 100%;
  display: block
}

#page-form div#job_cat .form-checkboxes>div>div {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  background-color: #f3af88;
  color: #FFF;
  text-align: center;
}

#page-form div#job_cat .form-wrapper {
  margin: 0;
}

#page-form div.field-name-field-situation div.checkbox {
  margin-bottom: 0;
}

#page-form div#job_cat .form-checkboxes {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

#page-form div#job_cat input[type="checkbox"],
#page-form div.field-name-field-situation input[type="checkbox"] {
  display: none;
}

#page-form div#job_cat div.checkbox label {
  /*
	display: table-cell;
	width: 100%;
	vertical-align: middle;
    padding: 10px 5px;
	background-color: #f3af88;
	color: #FFF;
	text-align: center;
	*/
  padding: 0;
  min-height: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* background: transparent url('../images/checkbox-2.png') left top no-repeat; */
}

#page-form div#job_cat input:checked+div,
#page-form div#job_cat input:checked+label {
  /* background: transparent url('../images/checkbox-2.png') left bottom no-repeat; */
  background-color: #ff8400;
}

#page-form #more-ppl {
  /* display: none; */
}

#page-form #addmore {
  display: none;
  position: relative;
  float: right;
  margin: 15px 8% 0 0;
  font-weight: 700;
  font-size: 16px;
  color: #413e3a;
}

#page-form #addmore:after {
  content: '';
  position: absolute;
  right: -35px;
  top: -5px;
  background: transparent url(../images/icon-add.png) center center no-repeat;
  z-index: 999;
  width: 25px;
  height: 25px;
}

#page-form .group-job-profile {
  display: none;
}

#page-form #submit-registration {
  /* position: absolute;
	bottom: 70px;
	text-align: center;
	left: 55px; */
  margin-top: 20px;
  float: left;
}

#page-form #submit-registration.user-profile-form {
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
}

#page-form #submit-registration a {
  font-size: 24px;
}

.node-event-form #submit-registration a,
.node-financial_assistance-form #submit-registration a {
  background-color: #ff8400;
  /* display: none; */
}

/* hide some annoying fields */
#page-form div.group-act-details {
  display: none;
}

/* 2019 */
#page-form #profile-main-add-form #edit-actions,
#page-form #profile-main-edit-form #edit-actions,
#page-form .node-event-form #edit-actions,
#page-form .node-event-edit-form #edit-actions,
#page-form .node-financial-assistance-form #edit-actions,
#page-form .node-financial-assistance-edit-form #edit-actions {
  display: none;
}

#page-form #user-profile-form fieldset,
#page-form .node-event-form fieldset {}

/* end 2019 */

/* financial assistance pop */
#faPop {
  position: fixed;
  bottom: 0;
  left: 50px;
  width: 500px;
  -webkit-box-shadow: 0px 7px 26px -7px rgba(51, 51, 51, 0.75);
  -moz-box-shadow: 0px 7px 26px -7px rgba(51, 51, 51, 0.75);
  box-shadow: 0px 7px 26px -7px rgba(51, 51, 51, 0.75);
  z-index: 99999999;
}

#faPop .fa-header {
  position: relative;
  background-color: #ff8400;
  color: #FFF;
  font-family: 'Roboto Slab', serif;
  padding: 10px 20px;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  cursor: hand;
}

#faPop .fa-header:before {
  content: '+';
  position: absolute;
  right: 15px;
  top: 0px;
  color: #FFF;
  font-size: 40px;
}

#faPop .fa-header.active:before {
  content: '-';
}

#faPop .fa-body {
  display: none;
  padding: 15px 20px 30px 20px;
  background-color: #FFF;
  color: #241b5c;
}

#faPop .fa-body h4 {
  font-family: 'Roboto Slab', serif;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

#faPop .fa-body p {
  margin-bottom: 15px;
}

#faPop .fa-body a {
  color: #241b5c;
  text-decoration: underline;
  font-weight: bold;
}

#faPop .fa-body a.orange-button {
  font-size: 20px;
  color: #FFF;
  text-decoration: none;
  font-family: 'Roboto Slab', serif;
  width: 100%;
  text-align: center;
}

#faPop .fa-body .notnow {
  text-align: right;
}

/* search / filter */
#fform {
  position: relative;
  width: 82%;
  margin: 10px auto 0 auto;
  background-color: #eeeeee;
  padding-right: 10%;
  padding-left: 10px;
  padding-bottom: 30px;
}

#fform label {
  font-weight: 400;
  color: #413e3a;
}

#fform #sbutton {
  position: absolute;
  bottom: -28px;
  right: 50px;
}

#showSearch {
  display: none;
  position: absolute;
  font-size: 14px;
  right: 387px;
  top: 7px;
  padding: 12px 18px;
}

#showSearch:before {
  content: '';
  position: absolute;
  left: -8px;
  top: 9px;
  width: 18px;
  height: 18px;
  background: transparent url('../images/icon-filter-down.png') center center no-repeat;
}

#fform #hideSearch {
  font-size: 14px;
  padding: 20px 18px;
  float: left;
}

#fform #sbutton #hideSearch:before {
  content: '';
  position: absolute;
  left: -7px;
  top: 16px;
  width: 18px;
  height: 18px;
  background: transparent url('../images/icon-filter-up.png') center center no-repeat;
}

#fform .checkies input[type="checkbox"] {
  display: none;
}

#fform .checkies div label {
  display: inline-block;
  padding: 5px 0 0 27px;
  margin-bottom: 10px;
  height: 22px;
  background: transparent url('../images/checkbox-2.png') left top no-repeat;
}

#fform .checkies>div input:checked+label {
  background: transparent url('../images/checkbox-2.png') left bottom no-repeat;
}

#fform #ff1 {
  float: left;
  width: 37%;
}

#fform #ff2 {
  float: left;
  width: 37%;
}

#fform #ff3 {
  float: left;
  width: 26%;
}

#fform #ff4 {
  float: left;
  width: 63%;
}

#fform h4 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 15px;
  color: #413e3a;
}

#fform #ff1 #combine {
  height: 50px;
  width: 65%;
  float: left;
  border: 0;
  border-radius: 0;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 400;
  color: #7a7a7a;
  outline: none;
}

#fform #ff1 input[type="submit"] {
  float: left;
  background: #FFF url('../images/search.png') center center no-repeat;
  background-size: 40%;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

#fform #ff1 h4.daytime {
  margin-top: 35px;
}

#fform #ff1 .daytime-fields div {
  float: left;
  width: 25%;
}

#fform #ff2 div {
  float: left;
  width: 45%;
}

#fform #ff3 .situation-fields div {
  float: left;
  width: 30%;
}

#fform #ff3 select {
  height: 48px;
  width: 90%;
  display: inline-block;
  float: left;
  border: 0;
  border-radius: 0;
  padding-left: 30px;
  outline: none;
}

#fform #ff3 .wanted {
  clear: both;
  margin-top: 10px;
}

#fform #ff3 .wanted strong {
  display: inline;
  padding: 10px 20px 10px 0;
}

#fform #ff3 .wanted input[type="text"] {
  display: inline;
  width: 55px;
  height: 38px;
  border: 0;
  border-radius: 0;
  padding-left: 10px;
  margin-left: 5px;
  outline: none;
  font-size: 15px;
  font-weight: 400;
  color: #7a7a7a;
}

#fform #ff4 {
  margin-top: 18px;
}

#fform #ff4 div {
  display: inline;
  margin-left: 20px;
}

#fform #ff4 label {
  margin-left: 5px;
}


/* buttons */

a[rel="tag"] {
  display: none;
}

a.orange-button {
  display: inline-block;
  padding: 0 22px;
  line-height: 2.5em;
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFF;
  background-color: #ff8400;
  border-radius: 8px;
}

a.orange-button span {
  font-weight: 700;
}

a.orange-button+a.link-button {
  padding-left: 13px;
}

a.link-button {
  display: inline-block;
  padding: 12px 13px 12px 0;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fc7100;
}

a.link-button span {
  font-size: 20px;
}

/* miscellaneous */
.clr {
  clear: both;
}