/*
Theme Name:   Tref Child
Template:     tref
*/

/* -----------------------------------------------------------------------default */



body {
	font-size:18px;
	line-height:170%;

}

:root {
	--headingfont:'pcap', sans-serif;
	--hoofdkleur1:#009fe3;
	--hoverkleur:#4bc3f6;
	--hoofdkleur2:#072a62;
	--hoofdkleur3soft:rgba(7, 42, 98, 0.8);
	--container:90%;
	--containermax:1200px;	
	--wide:90%;	/* value tussen full width en container */
	--margin-top:60px;
	--margin-bottom:60px;
}

.no-mobile {
	display:none
}

@media only screen and (min-width: 782px) {

	.no-mobile {
		display:block
	}


	
}
@media only screen and (min-width: 1201px) {
	
		:root {
			--container:70%;
			--wide:85%;
	}
}

a {
    color: var(--hoofdkleur2);
}
a:hover {
    color: var(--hoverkleur) !important
}
h1,
h2 {
	font-family: var(--headingfont);
	color:var(--hoofdkleur2)
}
h3,
.wp-block-cover-image.is-light .wp-block-cover__inner-container h3, 
.wp-block-cover.is-light .wp-block-cover__inner-container h3 {
	color:var(--hoofdkleur1)
}

.wp-block-search__button,
.wp-block-file .wp-block-file__button,
.wp-block-button .wp-block-button__link,
.wpcf7-submit {
    background-color: var(--hoofdkleur1);
	color:inherit !important;
	transition:background-color ease .4s
}
.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button .wp-block-button__link:hover,
.wpcf7-submit:hover {
    background-color: var(--hoverkleur);

}

.wp-block-cover-image.is-light .wp-block-cover__inner-container, 
.wp-block-cover.is-light .wp-block-cover__inner-container {
    color:var(--hoofdkleur2)
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 36px;
}

h3 {
	font-size:29px;
}
h4 {
	font-size:24px
}
h5 {
	font-size:20px
}

@media only screen and (min-width: 782px) {
	h1 {
		font-size: 42px;
	}
	
	h2 {
		font-size: 42px;
	}	
	
}

h1,h2,h3 {
	margin-bottom:20px;
	line-height:1.2em;
	font-weight:400;
	text-transform:none
}
h4,h5,h6{
	margin-bottom:20px
}

/* editor font sizes */

/* S M L XL */

.has-large-font-size {
	
}


/* editor font sizes */


p,
.entry-content ul {
	margin-top:20px;
	margin-bottom:20px
}

/* container breedtes */

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), 
*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignffull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block),
/* .wp-block-columns.alignfull > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block):not(.has-background),   misschien onnodig als je group gebruikt */
.default-max-width,
.wrapper {
	width: var(--container);
    max-width: var(--containermax);
    margin-left: auto;
    margin-right: auto;
}


.alignwide {
    max-width: var(--wide);
    margin-left: auto;
    margin-right: auto;	
}

/* container breedtes */

.entry-content > *:not(p):not(.lightweight-accordion),
[class*=inner-container] > *:not(p):not(.lightweight-accordion), 
.wp-block-template-part > *, 
.wp-block-post-template :where(li > *) {
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);

}

.is-vertically-aligned-center {
/*
	display: flex;
    justify-content: center;
    align-items: center;
*/
}
.has-background {

}

/* footer */

#footer .kolom {

}

#footer #kolom1 {
	
}

#footer #kolom2 {
	
}

#footer #kolom2 p {
	margin:0px
	
}

#footer #kolom3 {
	
}

#footer #kolom4 {
	
}

	#footer .kolom {
  		flex: 100%;
  		padding: 20px;
		
	}	

@media only screen and (min-width: 782px) {
	#footer .kolom {
  		flex: 50%;
  		padding: 40px;
		max-width:50%
		
	}	
}
@media only screen and (min-width: 1001px) {
	#footer .kolom {
  		flex: 25%;
		max-width:25%
		
	}	
}


/* footer */

/* contactformulier */

.wpcf7-form .wpcf7-submit {
		color:#fff;
    letter-spacing: 1px;
    padding-left: 54px;
    padding-right: 54px;
	padding-top:14px;
	padding-bottom:14px;

    border-radius: 0px;
	cursor:pointer;
	
	    width: 100%;
    max-width: 250px;	

	margin-top:0px;
	transition: box-shadow 0.2s ease;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
	width:100%;
	padding:10px !important;
	padding-left:18px !important;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) inset;
	-webkit-appearance: none;
		
    box-sizing:border-box;
		color:inherit
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
/*	border:none */
border-color:transparent
	
}

.wpcf7-form input:not(.wpcf7-submit),
.wpcf7-form select,
.wpcf7-form textarea {
	border:none;
	background-color:transparent;
}
.wpcf7-form .wpcf7-submit {
	border:none;
	color:#fff !important
}
.wpcf7-form input[type="checkbox"]{
    border: none !important;
    box-shadow: none !important;
}

/* contactformulier */

/* -----------------------------------------------------------------------default */









/* --------------------- custom ------------------------------- */

/* backend */

:where(.wp-block-group.has-background) {
    padding: 0 !important
}

/* backend */



@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@font-face {
    font-family: 'pcap';
    src: url('pcap_terminal-webfont.woff2') format('woff2'),
         url('pcap_terminal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
	font-family: 'Roboto', sans-serif;
}

.herovideo {
	position:relative;
	max-width:1000px !important;
	margin-left:auto;
	margin-right:auto;
	pointer-events:none;
	width: 100%;
 	display: block;	
}



.wp-block-button .wp-block-button__link {

    border-radius: 0;
}

.wasprogrammas .wp-block-column {
	    box-shadow: 0 10px 40px 0px rgb(0,0,0,0.1);
}


/*
.wasprogrammas > .wp-block-column p {
	padding:20px
}
*/
.herovideo:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg, rgba(7,41,92,1) 0%, rgba(7,41,92,0) 5%, rgba(7,41,92,0) 95%, rgba(7,41,92,1) 100%);

}

@media only screen and (min-width: 782px) {
	
	
	
		.wasprogrammas .wp-block-column:nth-child(1) {
			margin-top:-4.8%;
		margin-bottom:-5%
		
	}
	
	.wasprogrammas .wp-block-column:nth-child(2) {
			margin-top:-2%;
		margin-bottom:-2%;
	}
	.wasprogrammas .wp-block-column:nth-child(3) {
			margin-top:0.5%;

	}	
}



#header {
	background-color:rgba(255, 255, 255, 0);
    -webkit-transition: background-color 0.8s ease;
    transition: background-color 0.8s ease;	
}

#header #logo {
	display:inline-block
}

#header .menu {
	display:none
	
	
}

#header .menu li {
	    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
	
}
#header .menu li a {
	text-decoration:none;

}


body.home #header .menu li a {
	color:#fff
}

.home.sticky2 #header .menu li a {
	color:var(--hoofdkleur2);
}
.home.sticky2 #header {

	position:fixed  


}


#header #headercontent {
	display:none;


    vertical-align: top;

    float: right;
	padding:20px
}

#header .menu li a:hover {
	color:var(--hoofdkleur1);
}

.home.sticky2 #header {

	background-color:rgba(255, 255, 255, 1);
	 -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.22);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.22);



}

#logo {
	visibility:visible !important;
	
}

#logo1 {
	display:none
}	
#logo2 {
	display:block;

}	

#logo {
		max-width:100px
}

.home #logo {
	max-width:200px;
    -webkit-transition: max-width 0.4s ease;
    transition: max-width 0.4s ease;		
}


@media only screen and (max-width: 781px) {

	.home #logo {
		max-width:100px
	}

	#kolom1 img,
	#kolom4 img {
		max-width:150px
	
	}
	
}

@media only screen and (min-width: 782px) {

	#header #headercontent {
	
			display: inline-block;
	}

	.home #logo1,
	#header .menu {
		display:block
	}
	.home #logo2 {
		display:none
	}
	
	.home.sticky2 #logo1 {
		display:none
	}
	.home.sticky2 #logo2 {
		display:block
	}
	
	.home.sticky2 #logo {
		max-width:100px
	}
	
}

.lightweight-accordion {
 
	margin-top: 1em;
}
.lightweight-accordion-body {
	color:var(--hoofdkleur3soft);

}
.lightweight-accordion .lightweight-accordion-title p, .lightweight-accordion .lightweight-accordion-title span, .lightweight-accordion .lightweight-accordion-title h1, .lightweight-accordion .lightweight-accordion-title h2, .lightweight-accordion .lightweight-accordion-title h3 {
 
    font-size: 100% !important
 }
 
 
 

@media only screen and (min-width: 782px) {
	.lightweight-accordion .lightweight-accordion-title p, .lightweight-accordion .lightweight-accordion-title span, .lightweight-accordion .lightweight-accordion-title h1, .lightweight-accordion .lightweight-accordion-title h2, .lightweight-accordion .lightweight-accordion-title h3 {
	 
		font-size: 110% !important
	 }	
}
 
 .lightweight-accordion .lightweight-accordion-body {
	padding-left: 20px;
	padding-right: 20px;
/*	    border: solid 2px #eaf7e5; */
		border-top:0;
}


.lightweight-accordion summary::marker {
    content: "\f107";
    font-family: "Font Awesome" !important;

}

.lightweight-accordion details[open] summary::marker {
    content: "\f106";
    font-family: "Font Awesome" !important;
}
/*
.lightweight-accordion .lightweight-accordion-title h3,
.lightweight-accordion .lightweight-accordion-title span {
	font-size:20px 
}
*/
.lightweight-accordion .lightweight-accordion-title span,
.lightweight-accordion .lightweight-accordion-title h2,
.lightweight-accordion .lightweight-accordion-title h3,
.lightweight-accordion .lightweight-accordion-title h4 {
	padding-left:20px
}



#footer {
	background: linear-gradient(120deg, rgba(181,225,250,1) 3%, rgba(0,153,221,1) 12%, rgba(28,46,82,1) 21%);
	padding-top:60px;
	padding-bottom:60px;
	min-height:400px;
	color:#fff
}


#footer a {
	color:#fff
}

/* responsive menu */
/*
.rmp-slide-left.rmp-menu-open {
	min-width:unset !important;
	min-width:initial !important
}

*/

/*
body:not(.home) .sticky {

		position:relative
}
body:not(.home)#header #headercontent {
    display: inline-block;
}
*/

@media only screen and (min-width: 782px) {

	.home .sticky {
	  position: absolute;
	  top: 0;
	  width: 100%;
	  z-index:999;
	  display:flex
	  
	}

}


body:not(.home) .entry-content {
	padding-bottom:60px
}
/*
.home #paginatitel {
	display:none
}
*/