@font-face {
  font-family: 'Open Sans';
  src: url('/themes/club-assist/assets/font/OpenSans-Light.eot'); /* IE9 Compat Modes */
  src: url('/themes/club-assist/assets/font/OpenSans-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('/themes/club-assist/assets/font/OpenSans-Light.woff') format('woff'), /* Pretty Modern Browsers */
       url('/themes/club-assist/assets/font/OpenSans-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
	   font-weight: 300;   
}

@font-face {
  font-family: 'Open Sans';
  src: url('/themes/club-assist/assets/font/OpenSans-Regular.eot'); /* IE9 Compat Modes */
  src: url('/themes/club-assist/assets/font/OpenSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/themes/club-assist/assets/font/OpenSans-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('/themes/club-assist/assets/font/OpenSans-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
	   font-weight: 400;   
}

@font-face {
  font-family: 'Work Sans';
  src: url('/themes/club-assist/assets/font/WorkSans-Regular.eot'); /* IE9 Compat Modes */
  src: url('/themes/club-assist/assets/font/WorkSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/themes/club-assist/assets/font/WorkSans-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('/themes/club-assist/assets/font/WorkSans-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
	   font-weight: 400;   
}

@font-face {
  font-family: 'Work Sans';
  src: url('/themes/club-assist/assets/font/WorkSans-ExtraBold.eot'); /* IE9 Compat Modes */
  src: url('/themes/club-assist/assets/font/WorkSans-ExtraBold.woff2') format('woff2'), /* Super Modern Browsers */
       url('/themes/club-assist/assets/font/WorkSans-ExtraBold.woff') format('woff'), /* Pretty Modern Browsers */
       url('/themes/club-assist/assets/font/WorkSans-ExtraBold.ttf')  format('truetype'); /* Safari, Android, iOS */
	   font-weight: 800;   
}

html{
	font-family:sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	overflow-y:scroll;
	box-sizing:border-box
}

body{
	margin:0;
	position:relative;
	background-color:#fff;
	font-family:'Open Sans',sans-serif;
	font-weight:300;
	transition-property:all;
	transition-duration:.35s;
	right:0
}

p,ul,ol{
	font-size:16px;
	font-weight:300;
	color:#1f1f1f;
	line-height:normal;
	padding:0;
	margin:0
}

h1,h2,h4,h5{
	color:#1f1f1f;
}

h1{
	font-size:54px;
	font-weight:800;
	font-family: 'Work Sans', sans-serif;
	margin:0!important
}

h2{
	font-size:48px;
	font-weight:800;
	font-family: 'Work Sans', sans-serif;
	text-transform:uppercase;
	padding:60px 0px;
	text-align:center;
	margin:0!important
}

h3{
	font-size:42px;
	font-weight:800;
	font-family: 'Work Sans', sans-serif;
	text-transform:uppercase;
	padding-bottom:30px;
	color:white;
	margin:0!important
}

h4{
	font-size:18px;
	font-weight:400;
	font-family: 'Work Sans', sans-serif;
	margin:0!important
}

h5{
	font-size:16px;
	font-weight:400;
	font-family: 'Work Sans', sans-serif;
	margin:0!important
}

h6{
	font-size:14px;
	font-weight:400;
	font-family: 'Work Sans', sans-serif;
	text-transform:uppercase;
	color:white;
	margin:0!important
}

img{
	border:0
}

ul{
	list-style-type:none;
	padding:0;
	margin:0
}

ol li {
    padding:0px 0px 30px 30px;
}

ul li{
    text-align: left;
    padding-left: 30px;
    list-style: inside;
}   

button{
	font-size:15px!important;
	border:1px #fff solid;
	background:none;
	cursor:pointer;
	transition:background-color .35s;
	padding:15px 20px;
	border-radius: 10px;
	color:white;
}

button:hover{
	color:#f08c01;
	background:white;
}

button.oranje {
    text-transform: uppercase;
    background: #f08c01;
    color: white;
    border: 1px #f08c01 solid;
    margin: 0 auto
}

button.oranje:hover {
    text-transform: uppercase;
    background: white;
    color: #f08c01;
    border: 1px #f08c01 solid;
    margin: 0 auto;
}

a{
	font-family:'Open Sans',sans-serif;
	font-weight:400;
	text-decoration:none;
	color:#323232
}

a:active,a:hover{
	outline:0;
	color: #f08c00;
	transition-duration:.35s
}

b,strong{
	font-weight:400
}

span.oranje{
    color: #f08c00; 
}

span.blauw{
    color: #181f9a;    
}

.col-1{
	flex-basis:8.33%
}

.col-2{
	flex-basis:16.66%
}

.col-3{
	flex-basis:23%
}

.col-4{
	flex-basis:30%
}

.col-5{
	flex-basis:41.66%
}

.col-6{
	flex-basis:48%
}

.col-7{
	flex-basis:58.33%
}

.col-8{
	flex-basis:66.66%
}

.col-9{
	flex-basis:73%
}

.col-10{
	flex-basis:83.33%
}

.col-11{
	flex-basis:91.66%
}

.col-12{
	flex-basis:100%
}

.container{
	display:flex;
	flex-wrap:wrap;
	width:75%;
	margin:auto;
	justify-content:space-between
}

#bel-icoon, #mail-icoon {
    position:fixed;
    bottom:25px;
    right:30px;
    background:#f08c01;
    padding:20px;
    border-radius:50%;
}

#bel-icoon i, #mail-icoon i{
    font-size:22px;
    color:white;
    text-align:center!important
}

#bel-icoon:hover, #mail-icoon:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition-duration:.35s
}

a.telnummer{
    color:#f08c01;
}

@media screen and (max-width: 1550px) {
.container{
	width:90%;
}
}

@media screen and (min-width: 900px) and (max-width: 1300px) {
#nav-menu ul{
	font-size: 15px;
}

#nav-menu ul li {
    margin-left: 50px!important;
}

#nav-menu button {
    font-size: 14px!important;
}

#nav-logo {
    padding: 30px 20px!important;
}

button.oranje {
    padding: 15px 15px;
}
}

@media screen and (min-width: 900px) and (max-width: 1050px) {
.container{
	width:93%;
}

#nav-logo {
    padding: 30px 15px!important;
}

#nav-menu ul li {
    margin-left: 40px!important;
}

#nav-logo img {
    width: 110px!important;
}
}

@media screen and (min-width: 900px) {
#bel-icoon{
    display:none
}
}

@media screen and (max-width: 900px) {
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8, .col-9, .col-10, .col-11, .col-12{
	flex-basis:100%
}
	
#bel-icoon {
    bottom:12px;
    right:12px
}

#bel-icoon i{
    font-size:20px
}

#mail-icoon {
    display:none
}
}

@media screen and (min-width: 700px) and (max-width: 900px) {
h1, h2{ 
    font-size:42px;
}
}

@media screen and (max-width: 700px) {
h1, h2{
	font-size:36px;
}
}

/*------------------------~HEADER---------------------*/

#header-groot{
    position:static;
    background: rgba(0,0,0,0.45);
    background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	flex-wrap:wrap;
    height:100vh
}

#navigatie-vol {
    height: 20vh
}

/*top-balk*/
#top-balk {
    padding: 10px 0px;
    background:#f08c01
}

#top-balk a:hover{
    text-decoration:underline
}

#top-usp {
    justify-content: flex-end;
}

#top-usp p, #top-usp a{
    font-size:14.5px;
    color:white;
    font-weight:400;
}

#top-usp .fas{
    font-size:13px;
    padding-right:5px
}

#top-usp .fas:nth-child(1) {
    padding-left: 5px;
}

#nav-logo {
    background: white;
    padding: 20px 0px;
}

#nav-logo img{
	width:150px
}

#top-nav{
	justify-content:space-between;
	align-items:center;
}

#top-nav a{
    line-height: 0px;
    font-weight:400;
    color:#1D1D1B
}

#nav-balk{
    background:white;    
}

#nav-menu {
	z-index:10;
}

#nav-menu ul li {
    text-transform: uppercase;
    margin-left: 80px;
    list-style: none;
    padding-left: 0px;
}

#nav-menu ul a {
    color:#1d1d1b; 
}

#nav-menu ul a:hover {
    color: #f08c01; 
}

.fullscreen-video {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    width:100%;
}

.header-video{
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#cta-tekst-button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#mid-cta{
	height:70vh;
	align-items:center;
	justify-content:center
}

#mid-cta h1{
	color:#fff;
	text-transform:uppercase;
	width: 100%;
	line-height: 1;
	font-size:60px;
	line-height:65px;
	text-align:center
}

#laag-scroll {
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bounce-top {
    justify-content: center;
    display: flex;
}

.bounce-top .fas {
   font-size:36px;
}

#laag-scroll a{
    color:white;
}

i.fas.fa-chevron-down:hover {
    color: #f08c00;
}

i.fas.fa-briefcase {
    padding-right: 5px;
}

@media screen and (min-width: 900px) {
#nav-menu ul{
	display:flex!important;
	align-items: center
}
}

@media screen and (min-width: 900px) and (max-width: 1000px) {
#nav-menu ul li{
	margin-left:38px
}
}

@media screen and (max-width: 900px) {
#header-groot{
    background: linear-gradient(
         -45deg, 
         rgba(0, 0, 0, 0.5), 
         rgba(0, 0, 0, 0.5)), 
         url(/storage/app/media/mobiele-header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#mid-cta h1 {
    font-size: 42px;
    line-height: 50px;
}

#top-usp {
    justify-content: center;
}

.fullscreen-video, .header-video {
    display:none;
}

#nav-balk {
    background: white;
    position: absolute;
    width: 100%;
}    

#nav-logo {
    padding: 20px 0px;
}

#nav-balk button.oranje {
    padding: 0px;
    text-transform: uppercase;
    background: none;
    color: white;
    border-radius: 10px;
}
    
#menu-hamburger{
    display:flex;
    justify-content:flex-end;
    cursor:pointer;
    font-size: 24px
}

#menu-kruis{
    display:flex;
    justify-content:flex-end;
    display:none;
    cursor:pointer;
    font-size:26px
}

#nav-menu ul{
    display:none;
}

#top-usp p:nth-child(2) {
    display: none;
}
}

@media screen and (min-width: 900px) {
#menu-hamburger, #menu-kruis{
		display:none!important;
	}
}


/*------------------------INTROTEKST----------------------*/

#club-assist{
	padding-bottom:70px;
	background: white;
	flex-wrap:wrap;
	height:auto
}

#club-assist .contentrij a{
    margin:0 auto;
}

#club-assist a.navitem {
    text-align: center;
    width:100%;
}

.contentrij-midden{
    justify-content: center!important;
}

.contentrij-links{
    justify-content: flex-start;
}

.contentrij-between{
    justify-content: space-between;
}

.contentrij-links .titel-rij p, .contentrij-between .titel-rij p{
    padding:0!important;
}

.titel-rij{
	width:100%;
}

.titel-rij p{
	padding-left:5%;
	padding-right:5%;
}

.titel-rij #call-to-action {
    text-align:center;    
}

#call-to-action{
    background:#191090;
    border-radius:10px;
    padding:40px 0px;
    margin-top:5px;
}

#call-to-action:hover {
    background: #f08c00;
}

#call-to-action h3 {
    padding: 0px 40px 20px 40px;
}

#call-to-action p {
    color: white;
    padding: 20px 60px 40px 60px!important;
    text-align: center;
}

img.handshake{
    width: 10%;  
}

@media screen and (max-width: 900px) {
#call-to-action{
    margin-top:40px;
}   
}


/*------------------------QUOTE----------------------*/

#vacature{
    display:flex;
    flex-wrap: wrap;
    background:#1f1f1f    
}

#quote {
    padding: 110px 0px;
}

#quote-foto{
    background: url(/storage/app/media/club-assist-belavond.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

#quote h3, #quote p {
    padding-left: 22%;
    padding-right: 5%
}

#quote h3 {
    padding-bottom:20px;
}

#quote p {
    color:white;    
}

.button-center{
    margin-left:22%;
    margin-right:5%;
    margin-top:30px;
}

@media screen and (max-width: 1550px) {
#quote h3, #quote p{
    padding-left: 5%;
}

.button-center{
    margin-left:5%;    
}
}

@media screen and (min-width: 900px) and (max-width: 1050px) {
#quote h3, #quote p{
    padding-left: 3.5%;
}

.button-center{
    margin-left: 3.5%;    
}
}

@media screen and (max-width: 900px) {
#quote h3, #quote p {
    text-align: center;
    padding-right: 5%;
    width:100%
}

.button-center{
    display:flex;
    justify-content:center;
    width: 100%;
    margin-left:5%;
}
}


/*------------------------WERKWIJZE----------------------*/

#werkwijze{
	background:white;
}

#werkwijze .container{
    justify-content:space-between;
}

#stappenplan {
    padding-bottom:60px;
}

#stappenplan a {
    padding-left:30px;
}

#stappenplan-foto {
    text-align: center;
}

img.logo-full {
    width: 90%;
}

@media screen and (max-width: 900px) {
#stappenplan-foto iframe {
    margin-bottom:60px;
}
}

/*------------------------TELLERS----------------------*/

#tellers{
	padding:60px 0 70px;
	justify-content:center;
	background:#1f1f1f;
	flex-wrap:wrap;
	border-bottom: 8px #f08c01 solid;
	border-top: 8px #f08c01 solid;
	height:auto
}

.tellers-logo .fas{
    display:flex;
    justify-content:center;
    font-size:62px;
    color:white;
}

.counter{
    color:white;
    padding:15px 0px;
    text-align:center;
    font-size:48px;
	font-weight:800;
	font-family: 'Work Sans', sans-serif;
	text-transform:uppercase;
}

.tellers-logo p{
    color:white;
    text-align: center;
    text-transform:uppercase;
    font-weight:400;
}

@media screen and (max-width: 900px) {
.tellers-logo{
    padding-bottom:80px;
}

.tellers-logo:nth-child(4) {
    padding-bottom:0px;
}
}


/*------------------------CONTACT----------------------*/

#contact{
	padding-bottom:70px;
	background: #fff;
	justify-content:center;
	flex-wrap:wrap;
	height:auto
}

#contact h2{
    color:#1f1f1f
}

#contact p{
    padding-bottom:30px;
    color:green;
}
 
#contact-info{
    padding-top: 25px
}

#contact-info a{
    color: #1f1f1f
}

#contact-info a:hover{
    text-decoration:underline
}

#contact-info .fas{
    color: #1f1f1f;
    width:65px;
    font-size: 40px 
}

#contact-info li {
    list-style: none;
    padding-bottom: 40px;
    padding-left: 60px;
    color: #1f1f1f;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

span.adres {
    padding-left: 67px;
    line-height: 1;
    width: 100%
}

i.fas.fa-phone {
    transform: rotate(0deg) scaleX(-1);
    text-align: right;
}

select {
    margin-left: 20px;
    background:white;
}

@media screen and (max-width: 900px) {
#contact-info{
    padding-left: 0px;
}

select {
    margin-top: 20px;
    margin-left: 0px!important;
}

#icoon-watermerk{
    right:20px;
    opacity:0.02;
}

#contact-info li {
    padding-left: 0px;
}

#contact-form{
    margin-bottom:80px;    
}
}



/*contactform*/
.form-group {
    padding-bottom: 25px;
}

input{
    line-height: initial;
    font-family: 'Open Sans';
    font-weight: 100;
}

#genericForm_forms_flash button {
    display: none!important;
}


.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px 0px 10px 12px;
    border: 1px #ddd solid;
    margin-top: 5px;
}

.g-recaptcha {
    margin: 20px 0px;
}


/*------------------------FOOTER----------------------*/

#footer-credits{
	background: #1f1f1f;
	padding:20px 0;
	border-top:1px #eee solid
}

#footer-credits p,#footer-credits a{
	text-align:center;
	color:#fff;
	font-size:15px
}

#footer-credits a:hover{
	color:#f08c00;
	transition-duration:.35s
}

/*--------------IE-----------------*/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fullscreen-video {
    display:none;
}

.header-video{
    display:none;
}


#header-groot{
    position:static;
    background: linear-gradient( 0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%), url(/storage/app/media/mobiele-header.jpg);
    background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	flex-wrap:wrap;
    height:100vh;
    width:100% 
}
}