/*
Theme Name: Go Online
Theme URI: http://www.goonline.nl
Description: Go Online 
Author: Go Online
Author URI: http://www.goonline.nl
Version: 1.0
*/

/** MAIN **/
/** #231210 #FFFFFF #6F6352 #4B4B4B **/


*{
	box-sizing: border-box;
}

#loadOverlay{display: none;}

html, body {
	scroll-behavior: smooth;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	font-family: 'Josefin Sans', sans-serif;
	font-weight:300;  
	font-size:16px;
}
.scroll {
	position: fixed;
	width: 100vw;
	z-index: 999;
}
.menu-balk-placeholder{
	height: 64px;

}

.menu-balk .icon {
	display: none;
}

.container-fluid {
	width: 90%;
 }
*:focus {
	outline: 0!important;
}
 
h1, h2, h3, h4, h5, h6 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700; 
}

a:hover, a {
	text-decoration: none; 
}
  
figure {
	margin: 0; 
}
ul {
	padding-left: 0px;
}

.site-naam {
	color: #fff;
	font-size: 20px;
}

.page {
	margin-top: 50px;
	margin-bottom: 50px;
}
.page aside {
	border-left: 1px solid rgba(29, 29, 29, 0.2);
}

.no-padding-left {
	padding-left: 0px!important;
}   

.no-padding-right {
	padding-right: 0px!important;
}

.bottom-bar, .menu-responsive, .orientation-notice { 
	display: none; 
}

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.uppercase {
	text-transform: uppercase;
}
/* BREADCRUMBS */ 


/* == MENU RESPONSIVE == */
.menu-balk-mobile{
	display: none;
}
.navbar input[type="checkbox"],
.navbar .hamburger-lines {
  display: none;
}

.navbar {
	top: 0;
	left: 0;
  position: fixed;
 	width: 100%;
	background: #fff;
	color: #000;
	opacity: 0.85;
	z-index: 12;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  height: 64px;
  align-items: center;
}

.menu-items {
  order: 2;
  display: flex;
}

.menu-items li {
  list-style: none;
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.menu-items a {
  text-decoration: none;
  color: #FFF;
  font-weight: 500;
}

.logo {
  order: 1;
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
  height: 100px;
}

.logo img {
  filter: brightness(0) invert(1);
  object-fit: contain;
  object-position: center left;
  height: 100%;
  width: 100%;
}
/* == MENU == */
 
.menu-balk {
	padding: 20px 0px 20px 0px;
}

.menu-n a{
	color: #FFFFFF;
	opacity: 0.65;
	text-decoration: none;
	transition: opacity 0.7s;

}
.menu-n a:hover{
	opacity: 1;
}

.menu-balk ul{
	list-style-type: none;
	margin-bottom: 0;
}

.menu-balk li {
	display: inline-block;
	margin: 0px 20px;
}

.hamburger-icon {
	display: none;
}
/* == HEADER PAGE IMAGE == */
.page-header figure  {
	position: relative;
	width: 100%;
	height: 30vh;
}
.page-header figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* == HEADER == */
  

.header {
	position: relative;
}
.header figure {
	position: relative;
	height: 60vh;
	width: 100%;
}
.header figure img {
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 110%;
	object-fit: cover;
	object-position: center center;
}

.header-links-tekst {
	width: 90%;
	margin: 0 auto;
}

.header-links-tekst h1 {   
	color: #FFFFFF;         
}
.header-links-tekst p {   
	color: #FFFFFF;         
} 

.header-links-knop {
	margin-top: 20px; 
}

.header-links-knop a{ 
	border-radius: 20px; 
	margin: 0 auto auto auto;
	text-transform: uppercase;
	padding: 10px 30px;   
	color: #fff;   
} 
.header-links-knop a:hover {
	text-decoration: underline;
}
/* == SNELKOPPELINGEN == */

.snelkoppelingen {
	margin-top: -200px;
	transition: margin-top 3s;
}
 
.snelkoppelingen-transition {
	margin-top: 200px;
}
.snelkoppelingen-transition-fail {
	margin-top: 400px;
}

.snelkoppeling-out h3 {
	text-transform: uppercase;
}
.snelkoppeling-out a{
	border-radius: 20px; 
	margin: 0 auto auto auto;
	text-transform: uppercase;
	padding: 5px 30px;   
	color: #FFF;
}
.snelkoppeling-out a:hover{
	text-decoration: underline;
}
.snelkoppeling-tekst {
	width: 70%;
	margin-bottom: 30px;
}

/* == CONTENT == */

.content {
	margin-top: 200px;
}

.content-tekst { 
	color: #FFFFFF;
	margin-top: 50px;
	margin-bottom: 150px;
}
.content-tekst h2 {
		font-size: 1.75rem;
}
.content-afbeelding {
	position: relative;
	width: 100%;
	height: 100%;
}
.content-afbeelding img {
	left: 0;
	top: -60px;
	position: absolute;
	width: 100%;
	height: 130%;
	object-fit: contain;
	object-position: top center;
}

/* == BLOGS == */

.section-blog-overzicht-title {
	margin-bottom: 20px;
}

.section-blogs-title {
	margin: auto  auto 30px auto;
	width: auto;
}
.button-section-blogs {
	margin: 50px auto auto auto;
	width: auto;
}
.button-section-blogs a {
	border-radius: 20px; 
	margin: 0 auto auto auto;
	text-transform: uppercase;
	padding: 10px 30px;   
	color: #FFF;
}

.button-section-blogs a:hover {
	text-decoration: underline;
}


.blogs {
	margin-top: 200px;
	margin-bottom: 100px;
}

.blogs .container-fluid {
	width: 75%;
 }

.blog-afbeelding img {
	width: 100%;
	height: auto; 
}

.blog-out {
	border: 1px solid rgba(29, 29, 29, 0.2);
	margin-bottom: 50px;
	transition: transform 1s;
}
.blog-out:hover {
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
  transform: scale(1.05);
}
.blog-out a:not(:first-child) {
	text-decoration: underline;
	opacity: 0.5;
}

.blog-in {
	margin: 35px;
}

/* == BLOG OVERZICHT == */

.blog-overzicht h2{
	margin-bottom: 50px;
}


/* == FOOTER == */
footer {
	color: #FFF;
	padding-top: 50px;
	padding-bottom: 50px;
}
footer a{
	color: #FFF;
	opacity: 0.65;
	transition: opacity 0.7s;
}
footer a:hover{
	color: #fff;
	opacity: 1;
}

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

footer h3 {
	font-size: 2rem;
}
footer h4 {
	font-size: 18px;
}
footer img {
	width: 100%;
}


.footer-content {
	padding: 40px 0px 40px 0px;
}

.menu-footer {
	text-align: left;
}

/* == SIDEBAR RECHTS == */
.bottom-title-sidebar a{
	color: #000;
}
.top-sidebar {
	color: #FFFFFF;
	padding: 30px;
}
.top-sidebar h3 {
	font-size: 2rem;
}
.top-sidebar a {
  	border-radius: 20px;
	margin: 0 auto auto auto;
	text-transform: uppercase;
	padding: 10px 30px;
	color: #FFFFFF;
}
.top-sidebar a:hover {
	text-decoration: underline;
}
.bottom-sidebar{
	/*padding: 30px;*/
	margin-top: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.bottom-sidebar p {
	font-size: 15px;
}

.bottom-sidebar h3 {
	margin-bottom: 20px;
}
.bottom-sidebar h4 {
	font-size: 1.25rem;
}
.bottom-sidebar p:first-child {
	font-weight: bold;
	font-size: 25px;
}
.bottom-sidebar figure {
	height: 100%;
}
.bottom-sidebar figure img {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
}
.bottom-sidebar a:not(:first-child) {
	text-decoration: underline;
	opacity: 0.5;
}
.blog-rij {
	margin-bottom: 25px;
}

/* == FORM == */

form input[type="text"], form input[type="email"], form input[type="phone"], textarea {
	border: 1px solid rgba(0, 0, 0, 0.3)!important;
	padding: 10px!important;
}
input[type="submit"] {
  	border-radius: 10px;
	padding: 10px 30px;
	text-transform: uppercase;
	display: block!important;
	border: none;
	margin: auto 0 auto auto!important;
}
#gform_1 input[type="submit"] {
  	background-color: #000000;
	color: #FFFFFF;
}

.formulier-container {
	padding: 10px 30px;
	border: 1px solid rgba(0,0,0, 0.2);
	margin-bottom: 50px;
}
.formulier-container h3 {
	margin-top: 20px;
}

.formulier aside .container-fluid {
	width: 95%;
}

.formulier h1 {
	margin-bottom: 20px;
}

.formulier .container-fluid {
	width: 100%;
}


/* == PARTNERS == */

.partner-links-col a {
	color: rgba(29, 29, 29, 0.3);
}

/* == CONTENTPAGE */ 
.contentpage figure img {
	object-fit: cover; 
	object-position: center; 
	width: 95%;
}

/* == BLOG DETAIL PAGINA == */

.blog-detail-afbeelding figure{
	height: 400px;
	width: 100%;
}
.blog-detail-afbeelding figure img{
	object-fit: cover;
	object-position: center center;
	height: 100%;
	width: 100%;
}
.blog-tekstvak-met-afbeelding-rechts figure{
	width: 100%;
}
.blog-tekstvak-met-afbeelding-rechts figure img{
	height: 100%;
	width: 100%;

}
.blog-meer-lezen {
	color: #FFFFFF;
	padding-top: 25px;
	padding-bottom: 30px;
}

.txt-meer-lezen{
	font-size: 20px!important;
	margin-bottom: 10px;
}
.blog-meer-lezen a{
  border-radius: 20px;
  background-color: #000; 
	margin: 20px auto auto auto;
	padding: 5px 30px;
	color: #FFF;
}
.blog-meer-lezen a:hover {
	text-decoration: underline;
}
.align-meer-lezen{
	margin: auto;
}
.published {
	color: rgba(0,0,0, 0.2);
}

/* == PAGINATION == */

.pagination {
	margin-top: 10px;
}

.pagination a {
	color: #000;
	padding: 0px 5px;
}

.pagination .current {
	color: #000;
	font-weight: 800;
	text-decoration: underline;
}