/*
Theme Name: Shop & Win
Theme URI: https://shop-win.nl
Description: Wordpress thema voor Shop & Win
Author: Comceptum
Author URI: http://comceptum.nl
Version: 1.0
License: GNU General Public License
License URI: licence/GPL.txt
Text Domain: shop-win
*/


@import url("https://p.typekit.net/p.css?s=1&k=dso1cgw&ht=tk&f=24597.24598.24601.24602.24649.24650.24653.24654&a=2665702&app=typekit&e=css");

@font-face {
  font-family:"metronic-slab";
  src: url("https://use.typekit.net/af/ae9187/0000000000000000000157e3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
      url("https://use.typekit.net/af/ae9187/0000000000000000000157e3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
      url("https://use.typekit.net/af/ae9187/0000000000000000000157e3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-style:normal;
  font-weight:700;
}

@font-face {
  font-family:"metronic-slab";
  src: url("https://use.typekit.net/af/7d5c63/0000000000000000000157e4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),
      url("https://use.typekit.net/af/7d5c63/0000000000000000000157e4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),
      url("https://use.typekit.net/af/7d5c63/0000000000000000000157e4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
  font-style:italic;
  font-weight:700;
}

@font-face {
  font-family:"metronic-slab";
  src: url("https://use.typekit.net/af/10d365/0000000000000000000157e7/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
      url("https://use.typekit.net/af/10d365/0000000000000000000157e7/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
      url("https://use.typekit.net/af/10d365/0000000000000000000157e7/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-style:normal;
  font-weight:400;
}

@font-face {
  font-family:"metronic-slab";
  src: url("https://use.typekit.net/af/1e4f4c/0000000000000000000157e8/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),
      url("https://use.typekit.net/af/1e4f4c/0000000000000000000157e8/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),
      url("https://use.typekit.net/af/1e4f4c/0000000000000000000157e8/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
  font-style:italic;
  font-weight:400;
}

@font-face {
    font-family: 'Kefa';
    src: url('fonts/Kefa-Bold.eot');
    src: url('fonts/Kefa-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Kefa-Bold.woff2') format('woff2'),
        url('fonts/Kefa-Bold.woff') format('woff'),
        url('fonts/Kefa-Bold.ttf') format('truetype'),
        url('fonts/Kefa-Bold.svg#Kefa-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Kefa';
    src: url('fonts/Kefa-Regular.eot');
    src: url('fonts/Kefa-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Kefa-Regular.woff2') format('woff2'),
        url('fonts/Kefa-Regular.woff') format('woff'),
        url('fonts/Kefa-Regular.ttf') format('truetype'),
        url('fonts/Kefa-Regular.svg#Kefa-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Spot Normal';
    src: url('fonts/Spot-Normal.eot');
    src: url('fonts/Spot-Normal.eot?#iefix') format('embedded-opentype'),
        url('fonts/Spot-Normal.woff2') format('woff2'),
        url('fonts/Spot-Normal.woff') format('woff'),
        url('fonts/Spot-Normal.ttf') format('truetype'),
        url('fonts/Spot-Normal.svg#Spot-Normal') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3,
.h1, .h2, .h3 {
 font-family: 'Spot Normal';
  font-weight: normal;
  margin-bottom: 15px;
}

h4, h5, h6,
.h4, .h5, .h6 {
  font-family: metronic-slab, serif;
  font-weight: bold;
  margin-bottom: 15px;
}

.kefa {
  font-family: 'Kefa';
  font-weight: normal;
}

.spot {
  font-family: 'Spot Normal';
  font-weight: normal;
  font-size: 1.25rem;
      line-height: 1.5;
}

.display-1 {
  font-size: 4rem;
  line-height: 1;
}

.display-2 {
  font-size: 3.5rem;
  line-height: 1;
}

.display-3 {
  font-size: 3rem;
  line-height: 1;
}

.display-4 {
  font-size: 2rem;
  line-height: 1;
}

body {
  font-size: 1.125rem;
  color: #333333;
  font-family: metronic-slab, serif;
  font-weight: 400;
  overflow-x: hidden;
  line-height: 1.75;
}

p {
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 15px;
}

a {
  color: #333333;
  font-weight: normal;
  -webkit-transition: ease-in-out .3s;
  transition: ease-in-out .3s;
}

a:hover {
  text-decoration: none;
  color: #333333;
}

ul {
  padding-left: 0;
  margin-bottom: 15px;
}

li {
  list-style: none;
}


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

label {
  font-weight: 700;
}


:focus {
  outline: 0px !important;
  box-shadow: unset !important;
}

input[type="e-mail"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] {
-moz-appearance: none;
    -webkit-appearance: none;
    border: 0px;
    outline: 0;
    padding: 10px 15px;
    line-height: 1.5;
    width: 100%;
    max-width: 300px;
    border-radius: 5px;
}


table {
  margin-bottom: 15px;
  width: 100%
}

b,
strong,
strong p {
  font-weight: 700;
}

::-webkit-input-placeholder {
  color: #333333;
}

::-moz-placeholder {
  color: #333333;
}

:-ms-input-placeholder {
  color: #333333;
}

::-moz-selection {
  background-color: #333333;
  color: #ffffff
}

::selection {
  background-color: #333333;
  color: #ffffff
}

::-moz-selection {
  background-color: #333333;
  color: #ffffff
}

.container,
.container-fluid {
    padding-right: 30px;
    padding-left: 30px;
}

.container > .row:not(.no-gutters),
.container-fluid > .row:not(.no-gutters) {
    margin-right: -30px;
    margin-left: -30px;
}

.container > .row:not(.no-gutters)>[class*=col],
.container-fluid > .row:not(.no-gutters)>[class*=col] {
    padding-right: 30px;
    padding-left: 30px;
}

.btn,
input[type="submit"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: relative;
  background: #333333;
  color: #ffffff;
  border: 0px;
  background: #333333;
  line-height: 1;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 1.5rem;
  font-family: 'Kefa';
}

.btn:hover {
  color: #ffffff;
  background: #1E1E1E;
  /*background: rgb(253,195,0);
  background: -moz-linear-gradient(90deg, rgba(253,195,0,1) 0%, rgba(228,0,59,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(253,195,0,1) 0%, rgba(228,0,59,1) 100%);
  background: linear-gradient(90deg, rgba(253,195,0,1) 0%, rgba(228,0,59,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdc300",endColorstr="#e4003b",GradientType=1);*/
}

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: unset;
}


/* Navigation */

.navbar {
  background-color: #ffffff;
      position: relative;
    z-index: 9999;
    padding: 15px 0;
}
.navbar .navbar-brand {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    top: calc(100% - 45px);
        width: 100%;
    max-width: 750px;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
}

.navbar .navbar-brand__tagline {
  position: absolute;
    bottom: -50px;
    background: #333333;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-family: 'Spot Normal';
    font-weight: normal;
    font-size: 3rem;
    line-height: 1;
    padding: 15px 30px;
    border-radius: 50px;
    color: #ffffff;
}

.navbar .navbar-brand__logo {
 position: absolute;
    top: calc(100% - 15px);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 250px;
    z-index: -1;
}

.navbar .navbar-collapse {
  border-bottom: 2px solid #333333; 
  margin-bottom: 45px;
	max-width: 50%;
}

.navbar.navbar-expand-lg .navbar-nav .nav-link{
    display: block;
    padding: 15px;
    padding-right: 7.5px;
    padding-left: 7.5px;
}

.navbar.navbar-expand-lg .navbar-nav .nav-link p {
  margin-bottom: 0;
}

.navbar-toggler{
    display: block;
    position: relative;
    padding: 15px;
    border: 0px;
    border-radius: 0px;
        background: #333333;
    border-radius: 0px;
    height: 48px;
    color: #ffffff;
    line-height: 1;
  }


  .navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
  }

  .navbar-toggler.collapsed .icon-bar {
    background-color: #ffffff;
  }

  .navbar-toggler .icon-bar+.icon-bar {
    margin-top: 4px;
  }
  .navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    top: 0;
  }
  .navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
    opacity: 1;
    width: 100%;
    margin-left: 0;
  }
  .navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    bottom: 0;
  }
  .navbar-toggler .icon-bar {
    position: relative;
    transition: all 500ms ease-in-out;
    background-color: #ffffff;
  }
  .navbar-toggler .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 6px;
  }
  .navbar-toggler .icon-bar:nth-of-type(2) {
    opacity: 0;
    width: 0;
    margin-left: 50%;
  }
  .navbar-toggler .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 6px;
  }

/* Main styles */

main {
  position: relative;
  padding: 60px 0;
}

aside.banners .banner-item:not(:last-child) {
  margin-bottom: 30px;
}


main .participants .participant {
  border: 2px solid #333333;
  padding: 30px;
     height: calc(100% - 30px);
    margin-bottom: 30px;
    border-radius: 5px;
}

main .participants .participant .participant-link {
display: block;
    position: relative;
    width: 100%;
	text-align: center;
	 margin-bottom: 15px;
  }
main .participants .participant-logo {
	
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
}

main .participants .participant img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
	left:0;
	right: 0;
}

main .participants .participant ul {
	margin-bottom: 0;
}


/* Header */

section.header {
  height: 750px;
  position: relative;
  overflow: hidden;
}

body.not-home section.header {
  height: 350px;
}


section.header .header-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(253,195,0);
  background: -moz-linear-gradient(90deg, rgba(253,195,0,0.75) 0%, rgba(228,0,59,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(253,195,0,0.75) 0%, rgba(228,0,59,1) 100%);
  background: linear-gradient(90deg, rgba(253,195,0,0.75) 0%, rgba(228,0,59,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdc300",endColorstr="#e4003b",GradientType=1);
}

section.header .header-image:after {
  content: '';
  background-image: url(images/background.jpg);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
   width: 100%;
  height: 100%;
  opacity: 0.25;
  background-size: cover;
  background-position: center center;
}


body.voorjaar-thema section.header .header-image {
  background: rgb(207,215,105);
  background: -moz-linear-gradient(90deg, rgba(207,215,105,1) 0%, rgba(207,215,105,1) 17%, rgba(255,213,97,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(207,215,105,1) 0%, rgba(207,215,105,1) 17%, rgba(255,213,97,1) 100%);
  background: linear-gradient(90deg, rgba(207,215,105,1) 0%, rgba(207,215,105,1) 17%, rgba(255,213,97,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cfd769",endColorstr="#ffd561",GradientType=1);
}

body.voorjaar-thema section.header .header-image:after {
  background-image: url(images/background-voorjaar.jpg);
}


body.pasen-thema section.header .header-image {
  background: rgb(250,217,216);
  background: -moz-linear-gradient(90deg, rgba(250,217,216,1) 0%, rgba(244,209,119,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(250,217,216,1) 0%, rgba(244,209,119,1) 100%);
  background: linear-gradient(90deg, rgba(250,217,216,1) 0%, rgba(244,209,119,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fad9d8",endColorstr="#f4d177",GradientType=1);
}

body.pasen-thema section.header .header-image:after {
  background-image: url(images/background-pasen.jpg);
}

body.herfst-thema section.header .header-image {
  background: rgb(191,88,40);
  background: -moz-linear-gradient(90deg, rgba(191,88,40,1) 0%, rgba(244,209,119,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(191,88,40,1) 0%, rgba(244,209,119,1) 100%);
  background: linear-gradient(90deg, rgba(191,88,40,1) 0%, rgba(244,209,119,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bf5828",endColorstr="#f4d177",GradientType=1);
}

body.herfst-thema section.header .header-image:after {
  background-image: url(images/background-herfst.jpg);
}

body.sinterklaas-thema section.header .header-image {
  background: rgb(255,213,97);
  background: -moz-linear-gradient(90deg, rgba(255,213,97,1) 0%, rgba(229,24,61,1) 97%, rgba(228,0,59,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(255,213,97,1) 0%, rgba(229,24,61,1) 97%, rgba(228,0,59,1) 100%);
  background: linear-gradient(90deg, rgba(255,213,97,1) 0%, rgba(229,24,61,1) 97%, rgba(228,0,59,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd561",endColorstr="#e4003b",GradientType=1);
}

body.sinterklaas-thema section.header .header-image:after {
  background-image: url(images/background-sinterklaas.jpg);
}

body.december-thema section.header .header-image {
  background: rgb(228,0,59);
background: -moz-linear-gradient(90deg, rgba(228,0,59,1) 0%, rgba(84,52,82,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(228,0,59,1) 0%, rgba(84,52,82,1) 100%);
background: linear-gradient(90deg, rgba(228,0,59,1) 0%, rgba(84,52,82,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e4003b",endColorstr="#543452",GradientType=1);
}

body.december-thema section.header .header-image:after {
  background-image: url(images/background-december.jpg);
}



body.ek-thema section.header .header-image {
  background: rgb(239,125,0);
  background: -moz-linear-gradient(90deg, rgba(239,125,0,1) 0%, rgba(232,78,15,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(239,125,0,1) 0%, rgba(232,78,15,1) 100%);
  background: linear-gradient(90deg, rgba(239,125,0,1) 0%, rgba(232,78,15,1) 100%);
}


body.ek-thema section.header .header-image:after {
  background-image: url(images/background-ek.jpg);
}





section.header .header-content {
    position: absolute;
    z-index: 1;
    width: 100%;
    color: #ffffff;
    top: calc(50% + 75px);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
        -webkit-filter: drop-shadow(0px 0px 25px rgba(0,0,0,.25));
    filter: drop-shadow(0px 0px 25px rgba(0,0,0,.25));
     text-align: center;
}

body.not-home section.header .header-content {
  -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset;
    top: unset;
    bottom: 30px;
}

section.header .header-content .header-content__title  {
  margin-bottom: 30px;
}

body.not-home section.header .header-content .header-content__title {
      font-family: metronic-slab, serif;
    font-weight: bold;
  margin-bottom: 0;
}

body.not-home section.header .header-content .header-logo {
	width: 275px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    display: block;
}
section.header .header-content .header-content__background {
  background-color: #ffffff;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .25);
    padding: 45px 30px 75px 30px;
    color: #333333;
   
    border-radius: 15px;
}




section.header .header-content .header-content__background input[type="text"] {
    height: 75px;
    border: none;
    color: #333333;
    border: 3px solid #333333;
    background-image: -webkit-linear-gradient(left,#ccc 1px,#ccc 0),-webkit-linear-gradient(left,#ccc 1px,#ccc 0),-webkit-linear-gradient(left,#ccc 1px,#ccc 0),-webkit-linear-gradient(left,#ccc 1px,#ccc 0),-webkit-linear-gradient(left,#ccc 1px,#ccc 0),-webkit-linear-gradient(left,#ccc 1px,#ccc 0),linear-gradient(90deg,#ccc 1px,#ccc 0),linear-gradient(90deg,#ccc 1px,#ccc 0);
    background-image: 
      linear-gradient(90deg,#333333 1px,#333333 0),
      linear-gradient(90deg,#333333 1px,#333333 0),
      linear-gradient(90deg,#333333 1px,#333333 0),
      linear-gradient(90deg,#333333 1px,#333333 0),
      linear-gradient(90deg,#333333 1px,#333333 0),
      linear-gradient(90deg,#333333 1px,#333333 0),
      linear-gradient(90deg,#333333 1px,#333333 0),
	 linear-gradient(90deg,#333333 1px,#333333 0);
    background-size: 3px 100%;
    /*background-position: 37px 0, 74px 0, 111px 0, 148px 0, 185px 0, 222px 0, 259px 0;*/
   /* background-position: 12.5% 0, calc(25% + 2px) 0, calc(37.5% + 3px) 0, calc(50% + 4px) 0, calc(62.5% + 5px) 0, calc(75% + 6px) 0,calc(87.5% + 7px) 0; */
	/*background-position: 11.5% 0, calc(23% + 2px) 0, calc(34.5% + 3px) 0, calc(46% + 5px) 0, calc(57.5% + 7px) 0, calc(69% + 10px) 0,calc(80.5% + 12px) 0,calc(91.5% + 12px) 0; */
	        /* background-position: 50px, 103px, 154px, 208px, 260px, 312px, 364px, 417px; */
	       background-position: 11%, 22%, 33%, 44%, 55%, 67%, 78%, 89%;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 455px;
    font-size: 2rem;

        letter-spacing: 2.125rem;
    text-transform: uppercase;
    padding-right: 0;
    padding-left: 20px;
    box-sizing: content-box;
    -webkit-user-modify: read-write-plaintext-only;
  }

section.header .header-content .header-content__background .input-wrapper {
	position: relative;
    max-width: 455px;
    margin-left: auto;
    margin-right: auto;
}
section.header .header-content .header-content__background .input-wrapper:after {
        content: 'X';
    position: absolute;
    right: -5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 0;
    opacity: 0.5;
    font-size: 2rem;
}
section.header .header-content .header-content__background button {
    position: absolute;
    bottom: 0;
    -webkit-transform: translate(-50%,50%);
    -ms-transform: translate(-50%,50%);
    transform: translate(-50%,50%);
    left: 50%;
}

section.header .header-images {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
}

section.header .header-images .container {
  position: relative;
}

section.header .header-images .header-image_1{
  position: absolute;
  left: 15px;
   bottom: -50px;
}

section.header .header-images .header-image_2{
  position: absolute;
  right: 15px;
  bottom: -50px;
}

section.header .header-images .header-image_1 img,
section.header .header-images .header-image_2 img {
  width: 100%;
  max-width: 250px;
  -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: bounce;
    animation-name: bounce;

}


body.ek-thema section.header .header-images .header-image_1 img {
	display: none;
}


body.ek-thema section.header .header-images .header-image_2 {
	    bottom: 100px;
}

body.ek-thema section.header .header-images .header-image_2 img {
	 animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}

  
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-50px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
}


.page-content .page-content__text {
}

.page-content .page-content__text ul{
	padding-left: 20px;
}


.page-content .page-content__text ul li{
	list-style: disc;
}
/* Contentblock */

section.contentblocks {
  position: relative;
}

section.contentblocks .row{
  border-top: 5px solid #333333
}

.contentblock {
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
      height: 100%;
      width: 100%;
}

.contentblock:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

[class*="col-"]:nth-child(2) .contentblock {
  background: rgb(243,209,120);
   background: -moz-linear-gradient(90deg, rgba(234,87,54,1) 0%, rgba(243,209,120,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(234,87,54,1) 0%, rgba(243,209,120,1) 100%);
  background: linear-gradient(90deg, rgba(234,87,54,1) 0%, rgba(243,209,120,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3d178",endColorstr="#ea5736",GradientType=1);
}

[class*="col-"]:nth-child(3) .contentblock,
[class*="col-"]:nth-child(8) .contentblock {
  background: rgb(243,209,120);
  background: -moz-linear-gradient(90deg, rgba(243,209,120,1) 0%, rgba(234,87,54,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(243,209,120,1) 0%, rgba(234,87,54,1) 100%);
  background: linear-gradient(90deg, rgba(243,209,120,1) 0%, rgba(234,87,54,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3d178",endColorstr="#ea5736",GradientType=1);
}

[class*="col-"]:nth-child(3) .contentblock:before,
[class*="col-"]:nth-child(8) .contentblock:before {
  content: '';
    background-image: url(images/background.jpg);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
     width: 100%;
    height: 100%;
    opacity: 0.25;
    background-size: cover;
    background-position: center center;
}

[class*="col-"]:nth-child(4) .contentblock,
[class*="col-"]:nth-child(9) .contentblock {
  background: #ffd561;
}

/* Voorjaar */
body.voorjaar-thema [class*="col-"]:nth-child(4) .contentblock, 
body.voorjaar-thema [class*="col-"]:nth-child(9) .contentblock {
   background: rgb(207,215,105);
}

body.voorjaar-thema [class*="col-"]:nth-child(2) .contentblock,
body.voorjaar-thema [class*="col-"]:nth-child(3) .contentblock,
body.voorjaar-thema [class*="col-"]:nth-child(8) .contentblock {
  background: rgb(207,215,105);
  background: -moz-linear-gradient(90deg, rgba(207,215,105,1) 0%, rgba(207,215,105,1) 17%, rgba(255,213,97,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(207,215,105,1) 0%, rgba(207,215,105,1) 17%, rgba(255,213,97,1) 100%);
  background: linear-gradient(90deg, rgba(207,215,105,1) 0%, rgba(207,215,105,1) 17%, rgba(255,213,97,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cfd769",endColorstr="#ffd561",GradientType=1);
}

body.voorjaar-thema [class*="col-"]:nth-child(3) .contentblock:before, 
body.voorjaar-thema [class*="col-"]:nth-child(8) .contentblock:before {
  background-image: url(images/background-voorjaar.jpg);
}

/* Pasen */
body.pasen-thema [class*="col-"]:nth-child(4) .contentblock, 
body.pasen-thema [class*="col-"]:nth-child(9) .contentblock {
  background: rgb(250,217,216);
}

body.pasen-thema [class*="col-"]:nth-child(2) .contentblock,
body.pasen-thema [class*="col-"]:nth-child(3) .contentblock,
body.pasen-thema [class*="col-"]:nth-child(8) .contentblock {
  background: rgb(250,217,216);
  background: -moz-linear-gradient(90deg, rgba(250,217,216,1) 0%, rgba(244,209,119,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(250,217,216,1) 0%, rgba(244,209,119,1) 100%);
  background: linear-gradient(90deg, rgba(250,217,216,1) 0%, rgba(244,209,119,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fad9d8",endColorstr="#f4d177",GradientType=1);
}

body.pasen-thema [class*="col-"]:nth-child(3) .contentblock:before, 
body.pasen-thema [class*="col-"]:nth-child(8) .contentblock:before {
  background-image: url(images/background-pasen.jpg);
}

/* Herfst */
body.herfst-thema [class*="col-"]:nth-child(4) .contentblock, 
body.herfst-thema [class*="col-"]:nth-child(9) .contentblock {
  background: rgb(191,88,40);
}

body.herfst-thema [class*="col-"]:nth-child(2) .contentblock,
body.herfst-thema [class*="col-"]:nth-child(3) .contentblock,
body.herfst-thema [class*="col-"]:nth-child(8) .contentblock {
  background: rgb(191,88,40);
  background: -moz-linear-gradient(90deg, rgba(191,88,40,1) 0%, rgba(244,209,119,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(191,88,40,1) 0%, rgba(244,209,119,1) 100%);
  background: linear-gradient(90deg, rgba(191,88,40,1) 0%, rgba(244,209,119,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bf5828",endColorstr="#f4d177",GradientType=1);
}

body.herfst-thema [class*="col-"]:nth-child(3) .contentblock:before, 
body.herfst-thema [class*="col-"]:nth-child(8) .contentblock:before {
  background-image: url(images/background-herfst.jpg);
}

/* Sinterklaas */
body.sinterklaas-thema [class*="col-"]:nth-child(4) .contentblock, 
body.sinterklaas-thema [class*="col-"]:nth-child(9) .contentblock {
  background: rgb(255,213,97);
}

body.sinterklaas-thema [class*="col-"]:nth-child(2) .contentblock,
body.sinterklaas-thema [class*="col-"]:nth-child(3) .contentblock,
body.sinterklaas-thema [class*="col-"]:nth-child(8) .contentblock {
  background: rgb(255,213,97);
  background: -moz-linear-gradient(90deg, rgba(255,213,97,1) 0%, rgba(229,24,61,1) 97%, rgba(228,0,59,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(255,213,97,1) 0%, rgba(229,24,61,1) 97%, rgba(228,0,59,1) 100%);
  background: linear-gradient(90deg, rgba(255,213,97,1) 0%, rgba(229,24,61,1) 97%, rgba(228,0,59,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd561",endColorstr="#e4003b",GradientType=1);
}

body.sinterklaas-thema [class*="col-"]:nth-child(3) .contentblock:before, 
body.sinterklaas-thema [class*="col-"]:nth-child(8) .contentblock:before {
  background-image: url(images/background-sinterklaas.jpg);
}

/* December */
body.december-thema [class*="col-"]:nth-child(4) .contentblock, 
body.december-thema [class*="col-"]:nth-child(9) .contentblock {
  background: rgb(228,0,59);
}

body.december-thema [class*="col-"]:nth-child(2) .contentblock,
body.december-thema [class*="col-"]:nth-child(3) .contentblock,
body.december-thema [class*="col-"]:nth-child(8) .contentblock {
  background: rgb(228,0,59);
  background: -moz-linear-gradient(90deg, rgba(228,0,59,1) 0%, rgba(84,52,82,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(228,0,59,1) 0%, rgba(84,52,82,1) 100%);
  background: linear-gradient(90deg, rgba(228,0,59,1) 0%, rgba(84,52,82,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e4003b",endColorstr="#543452",GradientType=1);
}

body.december-thema [class*="col-"]:nth-child(3) .contentblock:before, 
body.december-thema [class*="col-"]:nth-child(8) .contentblock:before {
  background-image: url(images/background-december.jpg);
}

/* Ek */



body.ek-thema [class*="col-"]:nth-child(4) .contentblock, 
body.ek-thema [class*="col-"]:nth-child(9) .contentblock {
  background: rgb(239,125,0);
   color: #ffffff;
}

body.ek-thema [class*="col-"]:nth-child(2) .contentblock,
body.ek-thema [class*="col-"]:nth-child(3) .contentblock,
body.ek-thema [class*="col-"]:nth-child(8) .contentblock {
  background: rgb(239,125,0);
   color: #ffffff;
  background: -moz-linear-gradient(90deg, rgba(239,125,0,1) 0%, rgba(232,78,15,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(239,125,0,1) 0%, rgba(232,78,15,1) 100%);
  background: linear-gradient(90deg, rgba(239,125,0,1) 0%, rgba(232,78,15,1) 100%);
}

body.ek-thema [class*="col-"]:nth-child(3) .contentblock:before, 
body.ek-thema [class*="col-"]:nth-child(8) .contentblock:before {
  background-image: url(images/background-ek.jpg);
}


.contentblock .contentblock__inner {
 position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 100%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  padding: 15px 30px;
  /*max-width: 500px;*/
}


.contentblock .contentblock__inner h4 {
    font-family: 'Kefa';
    font-weight: normal
}

.contentblock .contentblock__inner .contentblock-title {
  margin-bottom: 30px;
}
.contentblock .contentblock__inner .contentblock-title h3,
.contentblock .contentblock__inner .contentblock-title h4 {
  margin-bottom: 7.5px;
}

.contentblock .contentblock__inner .contentblock-image img {
     max-height: 300px;
    width: auto;
    max-width: 100%;
}


section.contentblocks .banners{
  padding: 30px 0;
}

/* Modal */

.modal-dialog {
    margin: 125px auto 30px auto;
}

.modal .modal-content {
  background-color: rgba(255, 213, 97, 0.95);
      border: 0;
    border-radius: 0;
    z-index: 3
}

.modal .modal-content .modal-header {
      padding: 0;
    height: 275px;
    border-radius: 0;
    border-bottom: 0;
}

.modal .modal-content .modal-body {
     text-align: center;
      -webkit-animation-duration: 0.75s;
  animation-duration: 1.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}


.modal .modal-content .modal-body .code-respons {
  margin-bottom: 30px;
}

.modal .modal-content .modal-body .code-respons p {
  margin-bottom: 0;
}

.modal .modal-content .modal-body .code-close {
  margin-bottom: 30px;
}

.modal .modal-content .modal-body .code-form input[type="text"],
.modal .modal-content .modal-body .code-form input[type="e-mail"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7.5px;
}

.modal .modal-content .modal-body .code-form p,
.modal .modal-content .modal-body .code-form .form-row {
	    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.modal .modal-content .modal-body .code-form .acf-fields {
  margin-bottom: 15px;
}

.modal .modal-content .modal-body .code-form .acf-fields label{
  display: none;
}





.modal-backdrop.show {
    opacity: 0.3;
    z-index: 2;
}


/* Footer */

footer {
  position: relative;
 
}

footer .footer-disclaimer {
  border-top: 3px solid #333333; 
   padding: 30px 0;
   text-align: center;
}


/* Smaller than 1600px*/
@media (max-width: 1599.98px) {
  .display-1 {
    font-size: 3.5rem;
    line-height: 1;
  }

  .display-2 {
    font-size: 3rem;
    line-height: 1;
  }

  .display-3 {
    font-size: 2.75rem;
    line-height: 1;
  }

  .container,
  .container-fluid {
      max-width: 100%;
  }

  section.contentblocks .container {
    padding-left: 0;
    padding-right: 0;
  }
  .contentblock .contentblock__inner .contentblock-title {
      margin-bottom: 15px;
  }
  .contentblock .contentblock__inner .contentblock-image img {
    max-height: 250px;
  }

}


/* Smaller than 992px*/
@media (max-width: 991.98px) {

  .display-1 {
    font-size: 2.5rem;
    line-height: 1;
  }

  .display-2 {
    font-size: 2.25rem;
    line-height: 1;
  }

  .display-3 {
    font-size: 2rem;
    line-height: 1;
  }


  .container,
  .container-fluid {
      padding-right: 15px;
      padding-left: 15px;
      max-width: 100%;
  }


  .container > .row:not(.no-gutters),
  .container-fluid > .row:not(.no-gutters) {
      margin-right: -15px;
      margin-left: -15px;
  }

  .container > .row:not(.no-gutters)>[class*=col],
  .container-fluid > .row:not(.no-gutters)>[class*=col],
  .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid {
      padding-right: 15px;
      padding-left: 15px;
  }

  .navbar .navbar-brand {
        top: 15px;
    width: calc(100% - 150px);
  }

  .navbar .navbar-brand__tagline {
        font-size: 2rem;
        padding: 7.5px 15px;
            bottom: -35px;
  }

  .navbar .navbar-collapse {
        border-bottom: 0;
    margin-bottom: 0;
	  max-width: 100%;
  }

  .navbar .navbar-collapse.navbar-left {
    margin-top: 60px;
  }

  .navbar.navbar-expand-lg .navbar-nav .nav-link {
    padding: 7.5px;
  }

 section.header {
    height: 550px;
  }

  section.header .header-content {
    top: 50%;
  }

  section.header .header-images .header-image_1 img, 
  section.header .header-images .header-image_2 img {
    width: 200px;
  }

  main .participants .participant {
        padding: 15px;
  }

  .contentblock .contentblock__inner {
        padding: 15px 15px;
  }

  

  .contentblock .contentblock__inner .contentblock-image img {
    max-height: 175px;
  }

  .modal-dialog {
    max-width: 100%;
    margin: 1.75rem auto;
    padding: 0 15px;
  }
	
section.header .header-content .header-content__background input[type="text"] {
	    height: 60px;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 1.5rem;
    letter-spacing: 17px;
    padding-left: 10px;
	}

	
	section.header .header-content .header-content__background .input-wrapper:after {
	right: 10px;
	}

 
}


@media (max-width: 576px) {
  .modal .modal-content .modal-header {
    padding: 0;
    height: 125px;
  }

   body.not-home section.header {
    height: 200px;
  }

  section.header .header-images .header-image_1 img, 
  section.header .header-images .header-image_2 img {
    width: 100px;
  }
}




  

  @-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}