/*
Theme Name: HetKan! Jenaplan
Theme URI: https://hetkanvoorhetkind.nl
Author: Nick van de Groes
Description: HetKan! Jenaplan
Version: 1.0
*/
* {
margin: 0;
padding: 0;
font-family: 'Helvetica LT W01 Light', "Helvetica Neue", "Helvetica", sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
header {
position: relative;
}
#alert {
float: left;
color: rgba(0,0,0,0.6);
font-size: 10pt;
line-height: 38px;
font-weight: bold;
letter-spacing: 0.06em;
}
.alert.maintenance {
background: #ff7f00;
color: #fff;
padding: 30px;
font-size: 11pt;
line-height: 20px;
font-weight: 500;
}
header #top {
background: #E0DAD3;
width: 100%;
height: 40px;
border-bottom: 1px solid #FE8107;
text-align: center;
}
header #search {
float: left;
}
header #top #account {
float: right;
font-size: 11pt;
}
header #top #search {
margin: auto;
float: none;
display: inline-block;
}
header #top a,
header #top input[type='submit']{
color: #8D9A92;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 40px;
}
header #top input[type='submit']{
background: none;
border: none;
font-size: 12pt;
cursor: pointer;
margin-right: 20px;
}
header #top input[type='text']{
margin-right: 80px;
border: none;
padding: 5px 5px;
box-sizing: border-box;
width: 200px;
}
header #line {
height: 2px;
width: 100%;
border-bottom: 1px solid #FFB57B;
}
header #header-main {
height: 90px;
text-align: center;
}
header #header-main .container {
/*position: relative;*/
}
header #top .container {
position: relative;
}
header .container .bln-jij-doet-ertoe {
position: absolute;
right: -50px;
bottom: -200px;
z-index: 100;
}
header #header-main .logo {
height: 60px;
margin: 15px 15px 0 0;
float: left;
}
header #header-main nav {
width: auto;
height: 100%;
display: inline-block;
margin-left: -150px;
}
header #header-main nav.picker {
margin-left: 0;
}
header #header-main nav > ul {
padding: 0;
margin: 0;
}
header #header-main nav > ul > li {
float: left;
height: 40px;
line-height: 20px;
font-size: 11pt;
color: #007696;
letter-spacing: 0.1em;
cursor: pointer;
list-style: none;
padding: 30px 20px;
max-width: 110px;
text-align: left;
margin: 0 0px;
}
header #header-main nav ul li .dropdown {
width: 100%;
background: #EAEDEB;
padding: 30px 0 0 0;
border-top: 2px solid #007696;
top: 134px;
position: absolute;
z-index: 1000;
display: none;
left: 0;
color: rgba(0, 0, 0, 0.60);
box-shadow: 0px 20px 30px -10px rgba(0,0,0,0.5);
}
header #header-main nav ul li:hover .dropdown {
display: block;
}
header #header-main nav ul li:hover .dropdown li:hover {
color: #FF7F00;
}
header #header-main nav ul li .dropdown .section h4 {
color: #FF7F00;
letter-spacing: 0.2em;
font-weight: normal;
margin-bottom: 5px;
font-size: 10pt;
margin-top: 0;
}
header #header-main nav ul li .dropdown .section h4:hover {
/*color: #de6f00;*/
color:#096c97;
}
header #header-main nav ul li .dropdown .section h4:hover polygon {
/*color: #de6f00;*/
stroke:#096c97;
}
header #header-main nav ul li .dropdown .section h4 .arrow-right {
margin-top: 0;
height: 18px;
margin-right: 10px;
transform: rotate(180deg);
display: inline-block;
float: left;
}
#site-regulier header #header-main nav ul li .dropdown .section h4 .arrow-right {
margin-top: 7px;
height: 18px;
}
#site-regulier #social-bar {
background: #B0D5D5;
border-color: #CBE4E3;
}
header #header-main nav ul li .dropdown .container {
position: relative;
}
header #header-main nav ul li .pointer {
width: 40px;
margin-left: 20px;
display: none;
position: absolute;
z-index: 1010;
bottom: 31px;
}
header #header-main nav ul li .pointer img {
width: 100%;
}
header #header-main nav ul li:hover .pointer {
display: block;
}
header #header-main nav ul li .dropdown ul {
padding-left: 20px;
}
header #header-main nav ul li .dropdown ul li {
list-style-type: disc;
line-height: 25px;
font-size: 9pt;
}
header #header-main nav ul li .dropdown .section {
float: left;
margin-right: 50px;
max-width: 650px;
}
header #header-main nav ul li .dropdown .section.align-1 {
margin-left: 625px;
}
header #header-main nav ul li .dropdown .section.align-2 {
margin-left: 735px;
}
header #header-main nav ul li .dropdown .section.last {
margin-right: 0;
}
header #header-main nav ul li .dropdown .section .list {
float: left;
max-width: 300px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 20px;
}
header #header-main nav ul li .dropdown .section .list h5 {
color: #555;
letter-spacing: 0.06em;
margin-bottom: 5px;
margin-top: 0;
}
header #header-main nav ul li .dropdown .section .list h5:hover {
color: #FF7F00;
}
header #header-main nav ul li .dropdown .bottom {
border-top: 2px solid #BBD9D4;
height: 2px;
width: 100%;
border-bottom: 2px solid #BBD9D4;
margin-top: 10px;
}
header #header-main nav ul li .dropdown .bottom .menu-triangle {
width: 100px;
margin: auto;
display: block;
margin-top: 4px;
}
header #header-main nav.picker ul li {
margin: 0;
padding: 0;
height: 100%;
max-width: 100%;
line-height: 100px;
text-align: center;
}
header #header-main nav.picker ul li:first-child {
margin-right: 30px;
}
header #social-bar {
height: 30px;
width: 100%;
background: #8D9A92;
border-bottom: 8px solid #B5BDB8;
text-align: center;
color: #fff;
}
header #social-bar .icons {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 15pt;
}
header #social-bar .icons a {
margin: 10px;
}
/* Long Tekst */
.page-head {
background: #8D9A92;
height: 140px;
}
.page-head .picture {
float: left;
/*height: 100%;*/
/*width: 200px;*/
height: 180px;
width: 150px;
}
.page-head .picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-head .title {
/*width: calc(100% - 200px);*/
width: calc(100% - 150px);
height: 100%;
line-height: 140px;
color: #fff;
box-sizing: border-box;
padding-left: 20px;
float: right;
}
.page-head .title h1 {
font-family: "Caveat", cursive;
font-size: 35pt;
letter-spacing: 0.2em;
font-weight: lighter;
margin-left: 20px;
text-rendering: optimizeLegibility;
}
.text.long {
}
.page.content .text.long h1 {
/*color: #8D9A92;*/
font-size: 16pt;
/*letter-spacing: 0.2em;*/
/*font-weight: normal;*/
}
.page.content .text.long h1 b {
font-weight: 600;
}
.page.content h2 {
color: #FF7F00;
margin-top: 40px;
margin-bottom: 10px;
font-size: 13pt;
font-weight: normal;
letter-spacing: 0.2em;
}
.page.content > .container > h2 {
line-height: 30px;
}
.page.content .text.long ul {
margin: 0;
padding: 0;
font-size: 12pt;
/*letter-spacing: 2px;*/
line-height: 30px;
color: rgba(0, 0, 0, 0.60);
}
.page.content .text.long ul li {
list-style: disc outside;
margin-left: 20px;
}
.page-slogan {
color: #FF7F00;
background: #B5BDB8;
text-align: center;
height: 40px;
line-height: 40px;
}
.page-slogan h2 {
/*margin: 0;*/
font-family: "Impact W01 Regular", sans-serif;
letter-spacing: 0.06em;
width: 300px;
margin: auto;
}
.page.content a {
color: #FF7F00;
}
.page.content p a {
color: inherit;
font-style: italic;
}
/* End: Long Text */
.gallery-landing {
width: 100%;
height: 475px;
position: relative;
overflow: hidden;
}
.gallery-landing .button-inspire {
/*width: 200px;*/
/*height: 80px;*/
width: 15%;
height: auto;
position: absolute;
/*bottom: 0;*/
left: 42.5%;
bottom: -10px;
/*margin-left: -100px;*/
z-index: 100;
}
.gallery-landing .button-inspire img {
width: 100%;
height: auto;
object-fit: cover;
}
.gallery-landing .gallery-frame {
width: auto;
height: 100%;
overflow: hidden;
}
.gallery-landing .slide {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
position: relative;
}
.gallery-landing .slide img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.gallery-landing .slide .overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
left: 0;
top: 0;
color: #fff;
text-align: center;
}
.gallery-landing .slide .overlay .border {
width: 100%;
height: 8px;
background: rgba(255,255,255,0.35);
}
.gallery-landing .slide .overlay .border:last-child {
height: 16px;
}
.gallery-landing .slide .overlay .content {
height: calc(100% - 24px);
width: 100%;
}
.gallery-landing .slide .overlay .content h1 {
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: lighter;
width: 500px;
margin-top: 100px; /* 120px */
display: inline-block;
/*font-size: 20pt;*/
font-size: 1.8vw;
font-family: 'AvenirNextLTW01-Regular', sans-serif;
}
.gallery-landing .slide .overlay .content h3 {
letter-spacing: 0.2em;
font-weight: normal;
width: 350px;
display: inline-block;
/*font-size: 13pt;*/
font-size: 1.3vw;
}
.gallery-landing .slide .overlay .content .title-divider {
width: 300px;
margin: 20px auto 20px auto;
background: #fff;
display: block;
height: 1px;
}
.gallery-landing.page-detail {
}
.gallery-landing.page-detail .slide .overlay {
height: calc(100% - 24px);
}
.gallery-landing.page-detail .slide .overlay .content {
background: rgba(176, 213, 213, 0.65);
color: #fff;
float: left;
height: calc(100% + 24px);
width: 400px;
margin-top: -8px;
vertical-align: bottom;
display: flex;
box-sizing: border-box;
padding: 60px 30px 40px 30px;
text-align: left;
}
.gallery-landing.page-detail .slide .overlay .content h1 {
width: auto;
margin-top: 0;
line-height: 50px;
font-weight: 200;
font-size: 22pt;
}
.gallery-landing.page-detail .slide .overlay .content i {
letter-spacing: 0.1em;
font-weight: lighter;
margin-top: 30px;
display: inline-block;
}
.gallery-landing.page-detail .slide .overlay .content .content-align {
display: inline-block;
align-self: flex-end;
}
.page.content {
padding: 5px 0 60px 0;
color: rgba(0, 0, 0, 0.60);
font-size: 12pt;
letter-spacing: 2px;
line-height: 30px;
}
.page.content h1 {
color: #007696;
font-weight: normal;
font-size: 13pt;
letter-spacing: 0.1em;
margin: 25px 0 5px 0;
font-family: "AvenirNextLTW01-Regular", sans-serif;
}
.page.content p {
font-size: 13pt;
}
.page.content p {
color: rgba(0, 0, 0, 0.60);
margin-bottom: 0px;
}
.page.content .text.long ul {
margin-top: 10px;
}
.page.content .streamer-bar {
text-align: center;
}
.page.content .streamer-bar .streamer {
color: #FF7F00;
width: auto;
height: auto;
display: inline-block;
text-align: center;
padding: 25px 0 30px 0;
}
.page.content .streamer-bar .streamer-bottom {
width: 220px;
border-top: 1px solid #ff7f01;
}
.page.content .streamer-bar .streamer h3 {
font-weight: lighter;
letter-spacing: 0.1em;
font-size: 18pt;
margin: 10px;
}
.page.content .streamer-bar .streamer h2 {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 16pt;
margin: 0;
}
.page.content .site-picker {
width: 100%;
margin-top: 60px;
}
.site-picker .main {
height: 300px;
background: #E0DAD3;
}
.page.content .site-picker .container {
background: #fff;
}
.page.content .site-picker .divider {
background: #E0DAD3;
color: #FF7F00;
text-align: center;
line-height: 300px;
float: left;
width: 280px;
margin: 0 40px;
position: relative;
}
.page.content .site-picker .divider h2 {
letter-spacing: 0.2em;
margin: 0;
font-weight: bold;
font-size: 18pt;
}
.page.content .site-picker .divider .arrow-left,
.page.content .site-picker .divider .arrow-right {
position: absolute;
left: -24px;
top: 50%;
margin-top: -35px;
height: 70px;
width: 45px;
}
.page.content .site-picker .divider .arrow-right {
right: -24px;
left: auto;
transform: rotate(180deg);
}
.page.content .site-picker a {
display: block;
width: 280px;
height: 300px;
float: left;
margin: 0 20px 0 20px;
}
.page.content .site-picker a img {
width: 100%;
height: 100%;
object-fit: cover;
}
.jij-doet-er-toe {
width: 100%;
height: 40px;
background-image: url(img/landing/jij-doet-ertoe.png);
background-repeat: repeat-x;
background-size: auto 100%;
margin-top: 20px;
margin-bottom: 30px;
}
.tekst-jenaplan {
width: 100%;
height: 40px;
background-image: url(img/landing/jenaplan.png);
background-repeat: repeat-x;
background-size: auto 100%;
margin-top: 20px;
margin-bottom: 30px;
}
.jij-doet-er-toe.close-dist {
margin-top: 0;
}
.page.content .scroll-door-ons-aanbod {
width: 100%;
height: 80px;
background-image: url(img/landing/scroll-door-ons-aanbod.png);
background-repeat: repeat-x;
margin-top: 20px;
margin-bottom: 30px;
}
.page.content.aanbod ul.aanbod-list {
padding: 0;
margin: 0;
}
.page.content.aanbod ul.aanbod-list > li {
width: 100%;
list-style: none;
box-shadow: 0 0 20px -5px #555;
margin-top: 40px;
position: relative;
}
.page.content.aanbod ul.aanbod-list > li h2 {
margin-top: 10px;
}
.page.content.aanbod ul.aanbod-list li .picture {
float: left;
height: 100%;
width: 350px;
position: absolute;
box-sizing: border-box;
border-right: 1px solid #dfdfdf;
}
.page.content.aanbod ul.aanbod-list li .picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page.content.aanbod ul.aanbod-list li .content {
width: calc(100% - 350px);
height: auto;
box-sizing: border-box;
padding: 30px 40px;
color: #8D9A92;
float: left;
font-size: 13pt;
margin-left: 350px;
}
.page.content.aanbod ul.aanbod-list li .content h3 {
margin-bottom: 10px;
}
.page.content.aanbod ul.aanbod-list li .content p {
letter-spacing: 1px;
font-size: 11pt;
box-sizing: border-box;
line-height: 25px;
padding-right: 20px;
color: #8D9A92;
}
.page.content.aanbod ul.aanbod-list li .content ul {
}
.page.content.aanbod ul.aanbod-list li .content li {
font-size: 11pt;
line-height: 25px;
letter-spacing: 1px;
list-style: disc outside;
margin-left: 20px;
}
.page.content.aanbod ul.aanbod-list li .content a.read-more {
float: right;
padding: 10px 15px;
background: #8D9A92;
color: #fff;
font-weight: bold;
text-transform: uppercase;
margin: 40px 0 0 0;
font-style: normal;
}
.hetkan-inspireert {
width: 200px;
margin: auto;
display: block;
padding-top: 50px;
/*float: left;*/
}
.banner-style {
width: 300px;
}
.banner-style img {
width: 100%;
}
.page.content.vorm-overzicht {
}
.page.content.vorm-overzicht .vorm {
width: 480px;
height: 260px;
margin: 10px 20px 10px 0;
background: #FF7F00;
color: #FF7F00;
cursor: pointer;
float: left;
}
.page.content.vorm-overzicht .vorm:nth-child(even){
margin-right: 0;
}
.page.content.vorm-overzicht .vorm .title {
text-align: center;
}
.page.content.vorm-overzicht .vorm .title .top {
width: 0;
height: 0;
border-left: 240px solid transparent;
border-right: 240px solid transparent;
border-bottom: 100px solid #FFD7B8;
margin-top: 30px;
}
.page.content.vorm-overzicht .vorm .content {
background: #FFD7B8;
}
.page.content.vorm-overzicht .vorm .title h1 {
height: 80px;
color: #FF7F00;
margin-top: 20px;
font-size: 22pt;
text-transform: uppercase;
}
.page.content.vorm-overzicht .vorm .title h1 .sub {
text-transform: none;
font-size: 17pt;
letter-spacing: 0.2em;
}
.page.content.vormen {
padding-bottom: 100px;
}
.page.content .popup {
width: 100%;
height: auto;
background: #B0D5D5;
color: #fff;
margin-top: 50px;
box-sizing: border-box;
}
.page.content .popup .content {
color: #fff;
padding: 100px 100px 50px 100px;
}
.page.content .popup .content > h1 {
color: #fff;
margin-top: 0;
font-weight: 600;
}
.page.content .popup .content p {
color: #fff;
}
.page.content .popup .title {
margin-top: 50px;
text-align: center;
}
.page.content .popup .title .top {
width: 0;
height: 0;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 70px solid #E7F2F1;
}
.page.content .popup .title h1 {
background: #E7F2F1;
color: #B0D5D5;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 500;
font-size: 22pt;
height: 70px;
margin-top: 0;
}
.page.content.team {
padding: 0;
}
.page.content.team .content-main {
padding-bottom: 30px;
}
.page.content.team .teamlid {
background: #EAEDEB;
}
.page.content.team .teamlid > .container {
display: flex;
}
.page.content.team .teamlid .left {
float: left;
width: 750px;
box-sizing: border-box;
padding: 0 30px 30px 0;
flex: 2.5;
}
.page.content.team .teamlid .linkedin {
text-align: right;
}
.page.content.team .teamlid .linkedin i {
font-size: 22pt;
}
.page.content.team .teamlid .right {
/* float: right; */
width: 250px;
/* height: 100%; */
flex-direction: column;
/* flex-grow: 1; */
/* flex-shrink: 1; */
/* flex-basis: 0; */
}
.page.content.team .teamlid .right img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page.content.team .teamlid .quote {
background :#fff;
height: 90px;
color: #FF7F00;
padding-top: 30px;
box-sizing: border-box;
text-align: center;
}
.page.content.team .teamlid .quote .arrow-holder {
width: 200px;
height: auto;
border-top: 1px solid #FF7F00;
margin: auto;
text-align: center;
padding-top: 10px;
}
.page.content.team .teamlid .quote h4 {
letter-spacing: 0.2em;
}
.container.h-auto {
height: auto;
}
footer {
height: 180px;
width: 100%;
background: #8D9A92;
margin-top: 150px;
}
footer .main {
height: 130px;
width: 100%;
color: #fff;
}
footer .main .container {
position:relative;
}
footer .main .container .enveloppe {
position: absolute;
right: 60px;
margin-top: -90px;
}
footer .main .container .enveloppe img {
width: 60px;
height: auto;
}
footer .main .social {
width: auto;
height: 100%;
float: left;
line-height: 140px;
}
footer .main .social i {
font-size: 23pt;
display: inline-block;
width: 45px;
height: 45px;
color: #8D9A92;
background: #fff;
border-radius: 50%;
line-height: 45px;
text-align: center;
margin: 10px;
}
footer .main .social i:first-child {
margin-left: 0;
}
/* TODO: Implement classes below. */
footer .main .quick-contact {
float: left;
padding: 40px;
line-height: 25px;
}
footer .main .quick-contact .icon {
}
footer .main .quick-contact .details {
}
footer .main .contact {
float: right;
}
footer .main .contact .label {
width: 180px;
}
footer .copyright {
height: 50px;
width: 100%;
background: #B0D5D5;
color: #8D9A92;
line-height: 50px;
font-size: 10pt;
letter-spacing: 0.1em;
}
.bottom-nav {
width: 100%;
}
.bottom-nav ul {
width: 100%;
height: 235px;
padding: 0;
margin: 20px 0 40px 0;
}
.bottom-nav ul li a {
width: 100%;
height: 100%;
}
.bottom-nav ul li {
float: left;
width: 235px;
height: 235px;
margin-right: 20px;
list-style: none;
position: relative;
cursor: pointer;
}
.bottom-nav ul li:last-child {
margin-right: 0;
}
.bottom-nav ul li .overlay {
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
background: rgba(255, 255, 255, 0.7);
color: #007696;
font-family: "Caveat", cursive;
text-align: center;
font-size: 25pt;
line-height: 235px;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0;
transition: 0.3s ease all;
}
.bottom-nav ul li:hover .overlay {
opacity: 1;
}
.bottom-nav ul li .background {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 1;
}
.container {
width: 1000px;
height: 100%;
margin: auto;
letter-spacing: 0.06em;
}
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.over-ons .left {
width: 650px;
}
.over-ons .right {
float: right;
}
.over-ons .right {
margin-top: 60px;
width: 250px;
height: auto;
}
.single-aanbod .page-head, .single-aanbod-opvang .page-head {
position: relative;
}
.single-aanbod #social-bar, .single-aanbod-opvang #social-bar {
border-bottom: 0;
}
.single-aanbod .transparent-bar, .single-aanbod-opvang .transparent-bar {
height: 10px;
width: 100%;
position: absolute;
background: rgba(255,255,255,0.6);
}
.inspire-slider {
width: 100%;
height: 105px;
}
.inspire-slider .slider {
text-align: center;
width: 235px;
}
.page.vorm-overzicht .grid {
margin-top: 50px;
}
.streamer-big {
overflow: hidden;
text-align: center;
padding-top: 20px;
max-height: 80px;
height: 55px;
line-height: 55px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.streamer-big span {
text-transform: uppercase;
color: #F6F5F3;
font-family: "Impact W01 Regular", sans-serif;
font-size: 35pt;
letter-spacing: 0.04em;
}
.streamer-big.referenties span {
color: #FFEDDF;
font-size: 32pt;
}
.streamer-bar.referenties h2 {
margin-top: 0;
font-weight: 600
}
.netwerk-grid {
margin-bottom: 40px;
}
.netwerk-grid .row {
transition: 0.2s ease all;
}
.no-objectfit .netwerk-grid .relatie .background {
background-size: cover;
background-position: center center;
}
.no-objectfit .team .teamlid .right {
background-size: cover;
background-position: center center;
}
.netwerk-grid .relatie {
width: 230px;
height: 230px;
float: left;
cursor: pointer;
position: relative;
margin: 10px calc((100% - (230px * 4)) / 3) 10px 0;
transition: 0.2s ease all;
}
.netwerk-grid .relatie .bio {
display: none;
background: #EAEDEB;
width: 940px;
padding: 0 30px 0 30px;
position: absolute;
right: 0;
margin-top: 20px;
max-height: 0;
overflow: hidden;
}
.netwerk-grid .relatie .bio h1 {
font-family: "AvenirNextLTPro-Medium", sans-serif;
text-transform: uppercase;
font-weight: 500;
margin-top: 0;
}
.netwerk-grid .relatie.expanded {
}
.netwerk-grid .relatie.expanded .bio {
display: block;
}
.netwerk-grid .relatie:nth-child(4n+4){
margin-right: 0;
}
.netwerk-grid .relatie .content {
position: relative;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 101;
}
.netwerk-grid .relatie .content .name {
width: 100%;
/*height: 50px;*/
line-height: 50px;
text-align: center;
color: #8A8B8A;
bottom: 0;
position: absolute;
text-transform: uppercase;
font-family: "Helvetica LT W01 Roman", sans-serif;
font-weight: bold;
}
.netwerk-grid .relatie .background {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 100;
}
.netwerk-grid .relatie.expanded .background .overlay,
.netwerk-grid .relatie:hover .background .overlay {
opacity: 0;
}
.netwerk-grid .relatie.expanded .content .name,
.netwerk-grid .relatie:hover .content .name {
opacity: 0;
}
.netwerk-grid .relatie .background .overlay {
background: rgba(255,255,255,0.7);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transition: 0.2s ease all;
z-index: 100;
}
.netwerk-grid .relatie .background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog {
width: 100%;
}
.blog .scroller {
height: 100%;
width: 650px;
float: left;
overflow-y: auto;
}
.blog .scroller article .date {
width: 100%;
height: 80px;
}
.blog .scroller article .date .space {
/*width: 155px;*/
width: 100%;
height: 1px;
background: #007696;
margin-top: 39px;
float: left;
}
.blog .scroller article .date .date {
line-height: 80px;
width: 240px;
margin: 0 50px;
float: left;
text-align: center;
font-size: 12pt;
/*font-family: "Avenir Next LT W01 Demi", sans-serif;*/
/*font-weight: bold;*/
color: #007696;
}
.blog .scroller article .heading {
width: 100%;
text-align: center;
}
.blog .scroller article .heading h1 {
font-family: "Impact W01 Regular", sans-serif;
color: #007696;
font-weight: bold;
text-transform: uppercase;
font-size: 28pt;
letter-spacing: 0.1em;
line-height:30pt;
}
.blog .scroller article .heading h2 {
color: #007696;
font-family: "AvenirNextLTW01-Regular", sans-serif;
font-weight: lighter;
}
.blog .scroller article .image {
margin-top: 30px;
width: 100%;
}
.blog .scroller article .image img {
width: 100%;
max-height: 400px;
object-fit: cover;
}
.blog .sidebar {
width: 300px;
float: right;
height: 100%;
padding-top: 40px;
}
.blog .sidebar .sharing {
width: 100%;
height: 50px;
padding-left: 20px;
}
.blog .sidebar .sharing i {
background: #8D9A92;
color: #FFFFFE;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
display: inline-block;
margin-right: 5px;
}
.blog .sidebar img {
width: 100%;
margin-bottom: 30px;
}
.blog .sidebar .search input {
border-radius: 5px;
margin-top: 50px;
margin-bottom: 50px;
width: 100%;
font-size: 12pt;
height: 40px;
border: 1px solid #dfdfdf;
outline: none;
box-sizing: border-box;
padding: 0 15px;
}
.blog .sidebar .widget-instagram, .blog .sidebar .widget {
border-top: 1px solid #007696;
border-bottom: 1px solid #007696;
padding-top: 10px;
text-align: center;
width: 300px;
}
.widget.newsletter {
border-bottom: none !important;
padding-bottom: 30px;
}
.widget.newsletter .picker {
margin-top: 30px;
max-height: 0;
transition: 0.2s ease all;
overflow: hidden;
}
.widget.newsletter ul {
text-align: left;
padding: 0 30px;
}
.widget.newsletter ul a {
font-size: 10pt;
color: #FF7F00;
}
.blog .sidebar .widget-instagram h2, .blog .sidebar .widget h2 {
font-family: "AvenirNextLTW01-Regular", sans-serif;
font-weight: lighter;
font-size: 14pt;
color: #007696;
margin-bottom: 10px;
}
.blog .sidebar .widget-instagram .image {
width: 140px;
height: 140px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.blog .sidebar .widget-instagram .image:nth-child(2),
.blog .sidebar .widget-instagram .image:nth-child(4) {
margin-right: 0;
}
.blog .sidebar .widget-instagram .image img {
width :100%;
height: 100%;
object-fit: cover;
}
.blog .content {
padding: 20px 0 20px 0;
}
.blog .content p {
color: rgba(0, 0, 0, 0.60);
}
.blog article .meta {
width: 100%;
color: #007696;
margin-top: 30px;
margin-bottom: 60px;
font-size: 11pt;
}
.hetkan-inspireert-frame img.hetkan-inspireert {
padding-top: 20px;
width: 200px;
}
.np-top {
padding-top: 0;
}
.producten,
.agenda {
width: 100%;
height: auto;
background: #F6F5F3;
margin-top: 20px;
}
.door-ons .header,
.producten .overzicht .header,
.agenda .maand .header {
background: #8D9A92;
height: 60px;
width: 100%;
line-height: 60px;
color: #fff;
box-sizing: border-box;
font-size: 15pt;
padding: 0 30px;
font-family: "AvenirNextLTW01-Regular", sans-serif;
letter-spacing: 0.1em;
}
.producten .overzicht .header{
background: #B0D5D5;
}
.producten .overzicht .pointer {
width: 100%;
text-align: right;
box-sizing: border-box;
padding: 10px 140px 10px 0;
}
.agenda .maand .pointer {
margin-left: 170px;
}
.producten .product,
.agenda .event {
height: 200px;
width: 100%;
position: relative;
}
.agenda .event {
height: 250px;
}
.agenda .event a {
font-size: 11pt;
}
.producten .product {
height: auto;
margin-bottom: 50px;
}
.producten .product .main {
border: 1px solid #dfdfdf;
min-height: 300px;
height: auto !important;
position: relative;
color: #4C4D4C;
}
.producten .product .main .thumbnail {
position: absolute;
height: 100%;
width: 250px;
z-index: 5;
box-sizing: border-box;
padding: 5px;
}
.producten .product .main .data {
margin-left: 250px;
}
.producten .product .main .data .details {
height: auto !important;
}
.producten .prijs {
color: #8F9A9E;
}
.producten .product .data p {
font-size: 11pt;
font-family: "Helvetica LT W01 Regular", sans-serif;
}
.producten .product .data b,
.producten .product .data strong {
font-family: "Helvetica LT W01 Bold", sans-serif;
font-weight: bold;
}
.producten .product .type,
.agenda .event .date {
z-index: 10;
height: 40px;
width: auto;
padding: 0 40px 0 15px;
border-radius: 5px;
background: #FF7F00;
line-height: 40px;
margin-left: 140px;
color: #fff;
top: -20px;
position: absolute;
}
.producten .product .type {
background: #B0D5D5;
color: #95A098;
text-transform: uppercase;
width: auto;
padding: 0 15px 0 15px;
}
.agenda .event .type {
height: 35px;
width: auto;
padding: 0 15px;
background: rgba(193, 187, 179, 0.70);
line-height: 35px;
text-transform: uppercase;
right: 0;
color: #8D9A92;
z-index: 100;
top: -17.5px;
position: absolute;
}
.producten .product .main,
.agenda .event .main {
margin-top: 20px;
clear: both;
height: calc(100% - 20px);
background: #fff;
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
box-sizing: border-box;
}
.producten .product .main .data {
width: calc(100% - 250px) !important;
}
.producten .product .main .data,
.agenda .event .main .data {
width: calc(100% - 200px);
float: left;
}
.producten .product .main .data .title,
.agenda .event .main .data .title {
height: 90px;
border-bottom: 1px solid #dfdfdf;
box-sizing: border-box;
line-height: 90px;
padding: 0 30px;
}
.producten .product .main .data .title h1,
.agenda .event .main .data .title h1 {
color: #FF7F00;
font-weight: bold;
margin: 0;
}
.producten .product .main .data .details,
.agenda .event .main .data .details {
height: 90px;
box-sizing: border-box;
padding: 20px 30px;
font-size: 11pt;
line-height: 25px;
}
.agenda .event .main .data .details h3 {
font-family: 'AvenirNextLTW01-Roman', sans-serif;
font-weight: bold;
font-size:12pt;
}
.agenda .event .main .data .details b,
.agenda .event .main .data .details .right b {
font-family: 'AvenirNextLTW01-Roman', sans-serif;
margin-top: 20px;
display: block;
color: #8D9A92;
}
.producten .product .thumbnail,
.agenda .event .thumbnail {
width: 200px;
height: 100%;
float: left;
}
.producten .product .thumbnail img,
.agenda .event .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.aanbod-list .content .bottom .register-leraar {
line-height: 50px;
font-size: 10pt;
}
.aanbod-list .content .bottom .register-leraar img {
height: 35px;
margin: 10px 15px 5px 5px;
float: left;
}
.aanbod-list .content .bottom {
margin-top: 40px;
}
.aanbod-list .content .bottom a.read-more {
margin-top: 0 !important;
}
.content.page ol,
.content.page ul {
margin: 0 20px;
}
.door-ons {
margin-top: 30px;
}
.door-ons .header {
margin-bottom: 10px;
}
.door-ons .pointer {
margin-left: 30px;
}
.door-ons .content {
width: 100%;
background: #F6F5F3;
padding: 30px 0;
margin-top: 10px;
}
.door-ons .content .item {
width: 100%;
height: 230px;
cursor: pointer;
margin-bottom: 20px;
}
.door-ons .content a:last-child .item {
margin-bottom: 0;
}
.door-ons .content .item:hover .text {
color: #8D9A92;
}
.door-ons .content .item:hover .link-pointer polygon {
fill: #8D9A92;
stroke: #8D9A92;
}
.door-ons .content .item .thumbnail {
float: left;
width: 230px;
height: 230px;
position: relative;
box-sizing: border-box;
border: 2px solid #fff;
}
.door-ons .content .item:hover .thumbnail .overlay {
opacity: 1;
}
.door-ons .content .item .thumbnail .overlay {
background: rgba(255, 255, 255, 0.8);
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
transition: 0.2s ease all;
font-family: "Caveat", cursive;
color: #8D9A92;
text-align: center;
font-size: 28pt;
display: table;
vertical-align: middle;
}
.door-ons .content .item .thumbnail .overlay span {
font-family: "Caveat", cursive;
text-transform: uppercase;
display: table-cell;
vertical-align: middle;
}
.door-ons .content .item .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.door-ons .content .item .text {
float: left;
height: 230px;
line-height: 230px;
color: #FF7F00;
text-transform: uppercase;
font-size: 15pt;
font-weight: 600;
letter-spacing: 0.2em;
}
.door-ons .content .item .text .link-pointer {
transform: rotate(-270deg);
margin-right: 10px;
height: 35px;
margin-bottom: -10px;
margin-left: 30px;
}
.product.publicatie .main .data .details a {
width: auto;
border-radius: 5px;
color: #fff;
background: #8D9A92;
cursor: pointer;
padding: 0 15px;
display: block;
float: right;
margin-top: -50px;
font-style: normal;
height: 35px;
line-height: 35px;
}
.producten .product.publicatie .type {
text-transform: none;
margin-left: 210px;
}
#site-regulier header #header-main nav > ul > li {
line-height: 35px;
}
.page.content.contact .container .content-left {
float: left;
width: 50%;
}
.page.content.contact .container .content-form {
float: right;
width: 50%;
margin-top: 20px;
}
.page.content.contact .content-form fieldset {
width: 100%;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #dfdfdf;
}
.page.content.contact .content-form fieldset legend {
font-size: 13pt;
color: #027595;
}
.page.content.contact .content-form table {
width: 100%;
}
.page.content.contact .content-form table tr td:first-child {
width: 40%;
}
.page.content.contact .content-form table tr td {
width: 60%;
font-size: 13pt;
}
.page.content.contact .content-form table tr td.required {
}
.page.content.contact .content-form table tr td select,
.page.content.contact .content-form table tr td input {
padding: 10px;
box-sizing: border-box;
width: 100%;
font-size: 13pt;
}
.page.content.contact .content-form table tr td select{
height: 40px;
}
.page.content.contact .content-form table tr td textarea {
resize: none;
width: 100%;
height: 130px;
padding: 10px;
font-size: 13pt;
box-sizing: border-box;
}
.page.content.contact .content-form table tr td textarea,
.page.content.contact .content-form table tr td input {
border: 1px solid #dfdfdf;
outline: none;
}
.page.content.contact .content-form table tr td textarea:focus,
.page.content.contact .content-form table tr td input:focus {
border: 1px solid #FF7F00;
}
.page.content.contact .content-form table tr td input[type='submit'] {
font-size: 13pt;
cursor: pointer;
color: #FF7F00;
border-color: #FF7F00;
transition: 0.2s ease all;
background: #fff;
}
.page.content.contact .content-form table tr td input[type='submit']:hover {
background: #FF7F00;
color: #fff;
}
.registerleraar {
width: 200px;
}
#site-regulier header #header-main nav ul li .pointer {
bottom: 23px;
}
.agenda .event {
height: auto;
margin-bottom: 50px;
}
.agenda .event .main .thumbnail {
left: 0;
width: 250px;
position: absolute;
}
.agenda .event .main .data {
width: 100%;
}
.agenda .event .main {
padding-left: 250px;
position: relative;
width: 100%;
}
.agenda .event .main .data .details {
height: auto;
}
.page.content.contact h2 {
margin-top: 20px;
margin-bottom: 25px;
}
footer .top {
height: 90px;
overflow: hidden;
}
footer .newsletter {
height: 50px;
line-height: 40px;
font-size: 11pt;
font-style: italic;
}
footer .newsletter a {
font-style: normal;
}
.modal.visible {
opacity: 1;
display: block;
}
.modal {
position: fixed;
background: #fff;
width: 450px;
height: 300px;
z-index: 1000;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -225px;
border: 1px solid #dfdfdf;
box-shadow: 0 0 20px 5px #efefef;
opacity: 0;
display: none;
}
.modal .header {
height: 50px;
line-height: 50px;
color: #FF7F00;
box-sizing: border-box;
padding: 0 0 0 25px;
font-size: 10pt;
font-weight: bolder;
letter-spacing: 0.1em;
}
.modal .header .button {
float: right;
width: 50px;
text-align: center;
cursor: pointer;
transition: 0.2s ease all;
}
.modal .header .button:hover {
background: #FF7F00;
color: #fff;
}
.modal .content {
padding: 15px 25px;
color: rgba(0, 0, 0, 0.60);
}
.modal form {
}
.modal input {
height: 35px;
font-size: 11pt;
padding: 0 10px;
outline: none;
border: 2px solid #dfdfdf;
border-right: none;
width: calc(100% - 144px);
float:left;
transition: 0.2s ease all;
}
.modal input[type="submit"] {
background:#fff;
color: #00A8EF;
height: 39px;
cursor: pointer;
width: 120px;
border: 2px solid #00A8EF;
}
.modal input[type="submit"]:hover {
background: #00A8EF;
color: #fff;
}
.modal-overlay {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
display: none;
opacity: 0;
}
body.modal-visible .modal-overlay {
display: block;
opacity: 1;
}
.modal.visible {
opacity: 1;
display: block;
}
.mobile {
display: none;
}
body.modal-visible {
overflow: hidden;
}
.hidden {
display: none;
}
.pretty {
display: block !important;
margin: 10px 5px;
}
.modal .error {
font-size: 11pt;
margin-top: 20px;
color: #cc0808;
}
.modal .thankyou {
font-size: 11pt;
margin-top: 20px;
color: #FF7F00;
}
.mobile.menu-toggle {
display: none;
color: #FF7F00;
font-size: 30px;
margin: 25px -5px 0 0;
float: right;
}
.webFrame {
width: 100%;
transition: 0.4s ease all;
z-index: 1;
position: relative;
background: #fff;
overflow: hidden;
height: 100%;
}
body.mobile-menu-open .webFrame {
margin-left: -80%;
box-shadow: 0 0 40px -15px #282828;
position: fixed;
/* margin-left -20% / max-margin-left = 350px */
}
body.mobile-menu-open .mobile-nav {
display:block;
}
.mobile-nav {
width: 80%;
max-width: 350px;
position: fixed;
right: 0;
top: 0;
height: 100%;
z-index: 1;
display: none;
}
.mobile-nav .head {
height: 90px;
line-height: 90px;
font-family: "Avenir Next LT W01 Demi", sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 30px 0 30px;
font-size: 15pt;
background: #efefef;
color: #FF7F00;
border-bottom: 1px solid #dfdfdf;
width: 100%;
}
.mobile-nav .content .pointer {
display: none;
}
.mobile-nav .content {
padding-top: 10px;
overflow: auto;
height: calc(100% - 90px);
}
.mobile-nav nav ul {
padding: 0 20px;
}
.mobile-nav nav {
line-height: 40px;
}
.mobile-nav nav > ul > li {
text-transform: capitalize;
/*color: #00A8EF;*/
}
.mobile-nav nav .section {
padding: 5px;
}
.mobile-nav nav .section.active {
}
.mobile-nav nav .section h4 {
color: #FF7F00;
text-transform: none;
}
.mobile-nav nav .section ul li {
text-transform: none;
}
.mobile-nav nav .section h4 .arrow-right {
transform: rotate(180deg);
margin-top: 0px;
margin-bottom: -3px;
}
.mobile-nav nav .dropdown > .container {
padding: 0;
}
.mobile-nav .dropdown .bottom {
display: none;
}
.mobile-nav nav ul li {
list-style: none;
border-bottom: 1px solid #dfdfdf;
}
/* Responsive CHANGE TO 1100 */
@media only screen and (max-width: 500px){
.mobile.menu-toggle {
display: block;
}
.mobile-menu-open .webFrame {
border-right: 1px solid #dfdfdf;
filter: grayscale(100);
box-sizing: border-box;
}
.container {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
.slide .overlay {
display: none;
}
header #header-main nav {
display: none;
}
header .container .bln-jij-doet-ertoe {
right: 45px;
bottom: -155px;
}
.page.content .site-picker a {
width: auto;
float: none;
height: auto;
}
.page.content .site-picker .divider {
float: none;
margin: 40px 20px;
width: auto;
}
.page.content .site-picker .divider .arrow-left {
position: absolute;
left: 50%;
top: 0;
margin-top: -35px;
margin-left: -22.5px;
height: 70px;
width: 45px;
transform: rotate(90deg);
}
.page.content .site-picker .divider .arrow-right {
position: absolute;
top: auto;
left: 50%;
bottom: 0;
margin-bottom: -35px;
margin-left: -22.5px;
height: 70px;
width: 45px;
transform: rotate(270deg);
}
.page.content .site-picker .main {
height: auto;
}
.page.content {
padding-bottom: 20px;
}
footer .main .container .enveloppe {
position: absolute;
left: 50%;
margin-top: -110px;
margin-left: -45px;
}
footer .main .container .enveloppe img {
width: 90px;
}
footer .main .contact {
display: none;
}
footer .main {
padding-bottom: 20px;
}
footer .main .quick-contact {
padding: 0 0 20px 0;
}
footer .newsletter {
height: auto;
}
footer, footer .top, footer .main {
height: auto;
}
footer .copyright {
height: auto;
}
.inspire-slider .slider {
width: auto;
}
.inspire-slider {
width: 100%;
height: auto;
}
.bottom-nav ul {
height: auto;
text-align: center;
}
.bottom-nav ul li img {
left:0;
}
.bottom-nav ul li {
float: none;
margin: 20px auto;
}
.bottom-nav ul li:last-child {
margin-right: auto;
}
.page.content.contact .container .content-left {
float: none;
width: 100%;
}
.page.content.contact .container .content-form {
float: none;
margin: 40px auto 20px auto;
width: 100%;
}
.blog .scroller {
width: 100%;
float: none;
}
.blog .scroller article .heading h1 {
letter-spacing: normal;
max-width: 100%;
word-break: normal;
font-size:22pt;
}
.blog .sidebar {
width: 100%;
float:none;
}
.blog .sidebar .widget-instagram, .blog .sidebar .widget {
width: 100%;
}
.agenda .event {
}
.agenda .event .main {
padding-left: 0;
}
.producten .product .main, .agenda .event .main {
border-left: 1px solid #dfdfdf;
}
.producten .product .type, .agenda .event .date {
margin-left: 20px;
}
.agenda .event .main .thumbnail {
display: none;
}
.producten .product .main .data .title, .agenda .event .main .data .title {
line-height: 30px;
padding: 30px 30px;
height: auto;
}
.producten .product .main .data .title h1, .agenda .event .main .data .title h1 {
}
.producten .product.publicatie .type {
margin-left: 20px;
}
.producten .publicatie .main .thumbnail {
display: none;
}
.producten .publicatie .main {
padding-left: 0;
}
.producten .publicatie .main .data {
width: 100% !important;
margin-left: 0;
float: none;
padding-bottom: 20px;
}
.product.publicatie .main .data .details a {
margin-top: 20px;
float: none;
}
.producten .product .main .data .title .left {
float: none;
}
.producten .product .main .thumbnail {
height: 220px;
width: 100%;
position: relative;
float: none;
}
.producten .product .main .data .title .left {
border-bottom: 1px solid #dfdfdf;
}
.producten .prijs.right {
float: none;
}
.producten .product .main .data .title {
height: auto;
}
.producten .product .main .data {
width: 100% !important;
float: none;
margin-left: 0;
}
.modal {
width: 100%;
left: auto;
margin-left: 0;
margin-top: -250px;
height: auto;
padding-bottom: 30px;
}
.aanbod .banner-style {
width: auto;
}
.page.content.aanbod ul.aanbod-list li .picture {
position: relative;
float: none;
height: 220px;
width: 100%;
}
.page.content.aanbod ul.aanbod-list li .picture img {
object-position: top;
}
.page.content.aanbod ul.aanbod-list li .content {
width: 100%;
float: none;
margin-left: 0;
}
.page-head .title {
line-height: 28px;
padding: 25px 20px 25px 0;
}
.text.long.rl-enabled {
width: 100% !important;
float: none !important;
}
.page.content .registerleraar {
margin: 60px auto;
float: none;
}
.page.content.vorm-overzicht .vorm {
width: 100%;
}
.page.content.vorm-overzicht .vorm .top {
border-bottom-width: 85px;
margin-top: 15px;
}
.page.content .popup.vorm-popup .content {
padding: 30px;
}
.page.content.team .teamlid > .container {
display: block;
}
.page.content.team .teamlid .left {
float: right;
width: 100%;
}
.page.content.team .teamlid .right {
margin: 30px 10px;
}
.netwerk-grid .relatie {
float: none;
margin: 20px auto;
}
.netwerk-grid .relatie .bio {
left: -30px;
max-height: unset;
width: 100%;
}
.netwerk-grid .relatie:nth-child(4n+4) {
margin-right: auto;
}
.mobile {
display: block;
}
.page-slogan h2 {
display: none;
}
.bln-jij-doet-ertoe {
display: none;
}
.home .bln-jij-doet-ertoe {
display: block;
}
.mobile-nav ul li .dropdown {
overflow: hidden;
max-height: 0;
}
.mobile-nav ul li.active {
font-weight: bold;
}
.mobile-nav ul li.active .dropdown {
border-top: 1px solid #dfdfdf;
max-height: unset;
}
.mobile-nav ul li.active .dropdown .list {
overflow: hidden;
max-height: 0;
}
.mobile-nav ul li.active .section.active .list {
max-height: unset;
}
.mobile-nav nav ul li ul {
padding: 0 10px;
}
.mobile-nav li .arrow {
float: right;
margin-right: 10px;
transition: 0.2s ease all;
}
.mobile-nav li.active > .arrow {
transform: rotate(180deg);
}
.mobile-nav li h4 .arrow {
margin-right: 0;
}
.mobile-nav li .section.active .arrow {
transform: rotate(180deg);
}
.mobile-nav nav ul li {
line-height: 50px;
padding-left: 5px;
}
.mobile-nav > .content > nav > ul > li {
color: #FF7F00;
}
.mobile-nav > .content > nav > ul > li > * {
color: #4C4D4C;
}
.door-ons .content .item {
height: 130px;
}
.door-ons .content .item .thumbnail {
width: 130px;
height: 130px;
display: none;
}
.door-ons .content .item .link-pointer {
transform: rotate(270deg) !important;
}
.door-ons .content .item .text {
height: 130px;
line-height: 130px;
margin-left: -25px;
}
.over-ons .left {
width: 100%;
}
}
.page.content .popup.vorm-popup .content a {
color: #fff;
font-style: italic;
}
.container .grid {
position: relative;
}
.page.content .popup.vorm-popup {
position: absolute;
width: 0;
height: 0;
left: 0;
top: 0;
transition: 0.5s ease all;
overflow: hidden;
margin-top: 0;
}
.page.content .popup.vorm-popup .head {
font-size: 25pt;
text-align: right;
height: 40px;
padding: 40px 30px 20px;
color: #fff;
}
.page.content .popup.vorm-popup .head a {
color: #fff;
}
.page.content .popup.vorm-popup .content {
padding-top: 30px;
}
.page.content .popup.vorm-popup .title {
position: absolute;
bottom: -5px;
}
.page.content .popup.vorm-popup.visible {
width: 100%;
height: 100%;
}
.vorm .popup-content {
display: none;
}
.form-inloggen {
width: 800px;
height: auto;
margin: 50px auto;
background: #B0D5D5;
color: #096D97;
min-height: 100px;
box-sizing: border-box;
}
.form-inloggen .content {
padding: 30px 40px 0 40px;
}
.form-inloggen .form-entry {
height: 50px;
width: 100%;
line-height: 50px;
margin-bottom: 10px;
}
.form-inloggen .form-entry .label {
width: 40%;
float: left;
}
.form-inloggen .form-entry .field {
width: 60%;
float: right;
}
.form-inloggen .form-entry .field input {
height: 40px;
width: 100%;
padding: 10px;
box-sizing: border-box;
outline: none;
border: 1px solid #dfdfdf;
}
.form-inloggen .form-entry .field input:focus {
border-color: #096D97;
}
.form-inloggen .form-entry .field button {
float: right;
height: 40px;
padding: 0 25px;
cursor: pointer;
background: none;
border: 1px solid #096D97;
color: #096D97;
font-size: 10pt;
transition: 0.2s ease all;
}
.form-inloggen .form-entry .field button:hover {
background: #E7F2F1;
}
.form-inloggen .title .top {
width: 0;
height: 0;
border-left: 400px solid transparent;
border-right: 400px solid transparent;
border-bottom: 80px solid #E7F2F1;
margin-top: 30px;
}
.form-inloggen .title h1 {
height: 100px;
font-size: 22pt;
line-height: 40px;
background: #E7F2F1;
text-align: center;
letter-spacing: 0.1em;
}
.portal-content {
padding: 50px;
}
.producten.apps .main {
min-height: unset !important;
}
.producten.apps .product .thumbnail {
text-align: center;
}
.producten.apps .product .thumbnail img {
object-fit: contain;
width: auto;
max-width: 100%;
}
.producten.apps .product .main .data .title h1 {
font-size: 16pt;
line-height: 70px;
padding-top: 15px;
}
.producten.apps .product.embedded {
margin-bottom: 0;
height: 100px;
}
.producten.apps .product.embedded .main {
margin-top: 0;
height: 100% !important;
}
.producten.apps .product.embedded .main .data {
margin-left: 30px;
width: 100% !important;
box-sizing: border-box;
padding-right: 30px;
}
.producten.apps .product.embedded .main .data .title {
border-bottom: none;
}
.producten.apps .product.embedded .main .data .right .button {
height: 70px;
line-height: 70px;
padding-top: 15px;
}
.producten.apps .product.embedded .main .data .right .button a {
width: 100%;
text-align: right;
box-sizing: border-box;
height: 70px;
color: #FF7F00;
}
.producten.apps .product.embedded .main .data .right .button a:hover {
color: #FE8107;
}
.producten.apps .product .main .data .title {
height: 70px;
}
.producten.apps .product .main .bottom a {
color: #FF7F00;
}
.producten.apps .product.embedded .thumbnail {
width: 150px;
padding: 15px;
}
.producten.apps .product.embedded .data {
padding-left: 100px;
}
.bottom-nav ul li .overlay {
background: none;
color: #fff;
opacity: 1;
}
.bottom-nav ul li:hover .overlay {
background: rgba(255, 255, 255, 0.7);
color: #007696;
}
.product .product-description {
width: 80%;
max-width: 650px;
float: left;
}
.product .product-details {
width: 20%;
float: right;
min-width: 300px;
padding-top: 30px;
}
.product .product-details img {
width: 100%;
height: auto;
}
.product .product-details .price {
text-align: center;
color: #8F9A9E;
font-family: "Helvetica LT W01 Bold", sans-serif;
font-weight: bold;
}
.product .product-details a.button {
display: block;
height: 45px;
line-height: 25px;
text-align: center;
font-size: 12pt;
cursor: pointer;
color: #FF7F00;
border: 1px solid #FF7F00;
transition: 0.2s ease all;
background: #fff;
padding: 10px;
box-sizing: border-box;
width: 100%;
margin-top: 10px;
outline: none;
}
.product .product-details a.button:hover {
background: #FF7F00;
color: #fff;
}
.geluksvogels_logo {
width: 220px;
margin: 15px 15px 0 15px;
float: right;
}
.geluksvogels_opl {
margin-top: 30px !important;
}
button.course-registration-form {
display: inline-block;
padding: 10px 15px;
background: #ff7f00;
border: 2px solid #ff7f00;
color: #fff;
font-weight: 800 !important;
margin-left: 20px;
cursor: pointer;
transition: 0.3s ease all;
}
button.course-registration-form:hover {
background: #fed7ba;
}
.input-error {
color: #ff7f00;
font-weight: 600;
font-size: 11pt;
}