body {
  font-family: "Open Sans",Arial,Helvetica,sans-serif;
  /* background-image: url('../img/soapbox-z.png');
  background-position: right 50vh;
  background-size: 75%;
  background-repeat: no-repeat; */
}

a:hover {
  text-decoration: none;
}

/* Mouse */
.pointer-events-none {
  pointer-events:none;
}
.cursor-pointer {
  cursor: pointer;
}
/* Text Colors */
.text-soapboxblue {
  color: #096378!important;
}
.text-soapboxred {
  color: #FD4A6F;
}
.text-soapboxgrey {
  color: #777;
}
.text-inspire-green {
  color: #017a4e;
}
/* fit-content */
.w-fit-content {
  width: fit-content;
}
.h-fit-content {
  height: fit-content;
}
.fit-content {
  width: fit-content;
  height: fit-content;
}

/* Background-Colors */
.bg-grey {
  background-color:#F4F4F4;
}
.bg-grey-trans {
  background-color:rgba(0, 0, 0, 0.1)
}
.bg-footerblack {
  background-color: #202020;
}

.bg-soapboxblue {
  background-color: #096378;
}
/* Border Color */
.border-color-soapboxblue {
  border-color: #2abce9!important;
}

/* Border Width */
.border-2 {
  border-width: 2px!important;
}

.border-4 {
  border-width: 4px!important;
}
/* Buttons */
.btn {
  border-width: 2px;
  letter-spacing: 2px;
}
.btn-soapboxred {
  color: #fff!important;
  background-color: #0d9a58;
  border-color: #0d9a58;
}
.btn-soapboxred:hover {
  color: #0d9a58!important;
  border-color: #0d9a58;
  background-color: white;
}
.btn-outline-soapboxred {
  color: #0d9a58!important;
  border-color: #0d9a58;
}
.btn-outline-soapboxred:hover {
  color: #fff!important;
  background-color: #0d9a58;
  border-color: #0d9a58;
}

.btn-soapboxblue {
  color: #fff!important;
  background-color: #096378;
  border-color: #096378;
}
.btn-soapboxblue:hover {
  color: #096378!important;
  border-color: #096378;
  background-color: white;
}

.absolutecenter {
  width:fit-content;
  height:fit-content;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/* headers */
#header {
  display: flex;
  align-items: center;
}

.headers {
  background-size: cover!important;
  background-position: center!important;
  background-color: transparent!important;
}

.headers::after {
  content: "";
  display:block;
  padding-bottom: 40%;
}

.headertekst {
  font-size: 3.5vmin;
  width: fit-content;
  left: 0;
  right: 0;
  margin: auto;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 2px 2px #00000091;
}
.headers .headertekst {
  top: 30%;
}
#projectheader .headertekst {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.headertekst > span {
  border-bottom: solid white 0.7vmin;
  width: 45%;
  display: block;
  margin: 0 auto;
  box-shadow: 2px 2px #00000091;
}

.default-ul-style {
  color: #706f6f;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 1.5px;
  line-height: 32px;
}

/* Video Wrapper */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  width: 100%;
}

.videoWrapper iframe, .videoWrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Owl Carousel Restyle */
.owl-theme .owl-dots .owl-dot span {
  background-color: #4B4C4D;
}
.owl-theme .owl-dots .owl-dot.active span {
  background-color: #00C0E9!important;
}
.owl-next, .owl-prev {
  width: 15px;
  height: 100px;
  position: absolute;
  top: 25%;
  display: block !important;
  color: #E84C6B!important;
}
.owl-prev {
  left: -25px;
}
.owl-next {
  right: -25px;
}
.owl-next > i, .owl-prev > i {
  font-size: 25px;
}
.owl-next:focus, .owl-prev:focus {
  outline: none;
}
.owl-theme .owl-nav [class*='owl-']:hover{
  background: inherit;
  color: inherit;
  text-decoration: none;
}
.owl-theme .owl-nav [class*='owl-']:hover i {
  font-size: 35px;
}

.font-size-smaller {
  font-size:smaller;
}

.p-square {
  padding-bottom: 100%;
}
.p-half-square {
  padding-bottom: 50%;
}
.py-150px {
  padding-top: 150px;
  padding-bottom: 150px;
}
.pt-150px {
  padding-top: 150px;
}

.py-15vmin {
  padding-top: 15vmin;
  padding-bottom: 15vmin;
}
.pb-15vmin {
  padding-bottom: 15vmin;
}
.pt-15vmin {
  padding-top: 15vmin;
}
.corner-clip-bottom {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15vmin), 50% 100%, 0 calc(100% - 15vmin));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15vmin), 50% 100%, 0 calc(100% - 15vmin));
}
.corner-clip-top {
  /* -webkit-clip-path: polygon(0 0, 50% calc(100% - 15vmin), 100% 0, 100% 100%, 0 100%); */
  clip-path: polygon(0 0, 50% 15vmin, 100% 0, 100% 100%, 0 100%);
}

.corner-clip-top-bottom {
  -webkit-clip-path: polygon(0 0, 50% 15vmin, 100% 0, 100% calc(100% - 15vmin), 50% 100%, 0 calc(100% - 15vmin));
  clip-path: polygon(0 0, 50% 15vmin, 100% 0, 100% calc(100% - 15vmin), 50% 100%, 0 calc(100% - 15vmin));
  margin-top: -15vmin;
}

@supports ( clip-path: polygon(0 0) ) or ( -webkit-clip-path: circle(50% at 50% 50%) ) {
  #svgMask {
    display: none;
  }
}

/*Navigation*/
.navbar-brand > div {
  font-size: 14px;
}
.navbar-brand > span:hover {
  opacity: .6;
  text-decoration: none;
}

#mainnavigation .nav-link {
  text-transform: uppercase;
  line-height: 13px;
  letter-spacing: 1px;
  font-weight: normal;
  font-style: normal;
  font-size: 13px;
}

#mainnavigation .nav-link:hover {
  color: #017a4e!important;
}

#mainnavigation .nav-link.active {
  color: #017a4e!important;
}
.langswitcher, .langswitcher > a {
  color: #19BEEB!important;
}
.langswitcher > .notactivelang {
  color: #A2F2E2!important;
}

/* Welcome */

.titleblock {
  position: relative;
}
.titleblock > h3 {
  margin: 0;
  padding:0;
  color: #706f6f;
  letter-spacing: 1.5px;
  font-size: 16pt !important;
  font-weight: 300;
}

.titleblock > h1 {
  margin: 0;
  padding: 0;
  font-size: 45px;
  font-weight: 700;
  margin-bottom: 30px;
  word-break: break-word;
}
.titleblock > h1 > img {
  position: absolute;
  top: 5px;
}

.titleblock  p {
  color: #706f6f;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 1.5px;
  line-height: 32px;
}
/* Welcome: Youngsterblock */
#youngsters .active.center {
  margin-top: 100px;
}

.youngsterblock > .name {
  text-transform: uppercase;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}
.youngsterblock > .title {
  text-transform: uppercase !important;
  letter-spacing: 1.2px;
  font-size: 8.5pt;
  line-height: 1.5;
}
.youngsterblock > .quote {
  letter-spacing: .4px !important;
  font-size: 10pt !important;
  line-height: 2 !important;
  font-style: italic;
  color: #777;
}

#Counter_icons i {
  font-size: 40px;
  color: #096378;
}

#Counter_icons span {
  font-size: 35px;
  color: rgb(112, 111, 111);
}

#Counter_icons .icon_title {
  color: #706f6f;
  font-size: 14px;
}

/* Projects */
.project-tile-inside-overlay {
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  background-color: rgba(1,123,79,.8);
  transition: all 0.5s;
}
.project-tile-inside:hover .project-tile-inside-overlay {
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  transition: all 0.5s;
}

.inner-txt {
  display: none;
}

.inner-txt .title {
  font-size: 1.3rem;
}

.inner-txt .categorie {
  font-size: 0.9rem;
}

.inner-txt .line {
  border-top: solid 2px white;
  width: 30%;
  margin: 5px auto;
}

.project-tile-inside:hover .inner-txt {
  animation: slide-left .5s;
  display: block;
}

@keyframes slide-left {
  from {
    margin-left: 500px;
    width: 500%;
  } to {
    margin-left: 0%;
    width: 100%;
  }
}
.project-row {
  margin-left: -30px;
  margin-right: -30px;
}

/* Project View */
#projectview p {
  color: #706f6f;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 1.5px;
  line-height: 32px;
}

#projectview h6 {
  font-size: 16px;
  letter-spacing: 1.5px;
}

.project-block {
  padding: 0 5%;
}

.project-block:first-child {
  clip-path: polygon(0 0, 50% 13.5vmin, 100% 0, 100% 100%, 0 100%);
}
.project-block:first-child > div {
  padding-top: 13.5vmin!important;
}

@media (min-width: 768px) {
  .project-block:first-child {
    clip-path: polygon(0 0, 100% 13.5vmin, 100% 100%, 0 100%);
  }
  .project-block {
    clip-path: polygon(0 13.5vmin, 100% 0, 100% 100%, 0 100%);
  }

  .project-block > div {
    padding-top: 13.5vmin!important;
  }
}

.social_pj_page a {
  color: white;
  background-color: #4B4C4D;
  text-decoration: none;
  border-radius: 5px;
  font-size: 23px;
}

span[id^="more-"] {
  display: none;
}
/* Programme */
.programme-titel {
  color: rgb(112, 112, 111);
}

/* About: Teamblock */

#team .active.center {
  margin-top: 100px;
}
#team .owl-dot:nth-child(3n + 2),
#team .owl-dot:nth-child(3n + 3) {
  display:none;
}

#team .owl-dots .active:nth-of-type(1) > span {
  background-color: #FD4A6F;
}

.teamblock > .name {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 4px;
}

.teamblock > .name > .lastname {
  border-top: 4px solid #2ABCE9;
  border-bottom: 4px solid #2ABCE9;
  padding: 3px 0;
}
.teamblock > .title {
  text-transform: uppercase !important;
  letter-spacing: 2px;
  font-size: 10pt;
  line-height: 22pt;
  font-weight: 300;
}
.teamblock > .social_icons > a > i {
  color: black;
  font-size: 30px;
}

/* About: Vacatureblock */
#vacatures .active.center {
  margin-top: 100px;
}

.vacatureblock > .title {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 4px;
}
.vacatureblock > .description {
  letter-spacing: .4px !important;
  font-size: 10pt !important;
  line-height: 2 !important;
  font-style: italic;
  color: #777;
  min-height: 132px;
}

/* About: Media & Memories*/
.media-header-item {
	color: #096378!important;
	letter-spacing: 1.5px;
	font-size: 16pt !important;
	font-weight: 700;
	padding: 5px;
	padding-right: 15px;
	width: fit-content;
	cursor: pointer;
}
.media-header-item:hover, .media-header-item-active {
	background-color: #096378!important;
	color: white!important;
	border-radius: 30px;
	letter-spacing: 1.5px;
	font-size: 16pt !important;
	font-weight: 700;
	width: fit-content;
	padding: 5px;
	padding-right: 15px;
}
.split-line {
	background-color: #096378;
	height: 5px;
}
.square:before{
	content: "";
	display: block;
	padding-top: 100%;  /* initial ratio of 1:1*/
}
.square h3 {
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	margin-left: 15px;
	margin-bottom: 15px;
	color: white;
}
.square .topimg {
	position: absolute;
	z-index: 10;
	top: 0;
	margin-left: 15px;
	margin-top: 15px;
}
.hoverimg {
	position: absolute;
	top: 50%;
	margin-top: -50px;
	left: 50%;
	margin-left: -50px;
	z-index: 50;
	display: none;
}

.overlay {
	position: relative;
}
.overlay:after {
	position: absolute;
	content:"";
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	background-color: #096378;
}
.overlay:hover:after  {
	opacity: .5;
}
.overlay:hover .hoverimg {
	display: block;
}

/*Footer */
footer h4 {
  font-size: 18pt;
  letter-spacing: 2px;
}
footer #copyrightline {
  color: #706f6f;
  letter-spacing: 1.2px;
  font-size: 7pt;
}
footer .addressblock h5 {
  font-size: 9pt;
  letter-spacing: 1.2px;
}

footer .addressblock > p {
  font-size: 9pt;
  letter-spacing: 1.2px;
  margin: 0 0 10px 0;
  padding: 0;
}

footer .social_icons i {
  font-size: 24px;
  color: white;
}
footer .social_icons i:hover, footer .social_icons a  {
  color: #0d9a58;
  text-decoration: none;
}

/* Vacature */
.social_share {
  font-size: 30px;
}
.soacial_share .fb {
  color: #4267B2;
}
.soacial_share .li {
  color: #0077B5;
}
.shareto {
  letter-spacing: 1.5px;
}
.vacature *  {
  background-color: transparent!important;
  font-family: "Open Sans",Arial,Helvetica,sans-serif!important;
  color: #706f6f;
  letter-spacing: 1.5px;
}
.vacature a {
  color: #2abce9;
  text-decoration: none;
}

.vacature h1 {
  font-size: 45px;
  font-weight: 700;
  margin-bottom: 30px;
}
.dienstenfontsize {
  font-size: 5vmin;
}
@media screen and (min-width: 425px) {
  .dienstenfontsize {
    font-size: 20px;
  }
}
.searchlabel {
  border: solid 2px #096378!important;
  border-radius: 5px;
}
.searchbox {
  border: solid 2px #096378!important;
  border-radius: 5px;
  padding: 5px;
}
.searchbox:focus {
  outline: none;
}

.greyscale-hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.greyscale-hover:hover {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}