/*
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 **/

*{
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	font-family: '', sans-serif;
	font-weight:300;
	font-size:16px;
}

.container-fluid{
	width: 70%;
	position: relative;
}

h1, h2, h3, h4, h5, h6 {
	font-family: '', sans-serif;
	font-weight:700;
}

figure {
	margin:0;
	padding:0;
}

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

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

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

/* == HEADER == */

header {
	padding-top:30px;
	padding-bottom:30px;
}

/* == NAV == */

nav {
	padding-top:10px;
	padding-bottom:10px;
}

nav ul li {
	position: relative;
	display: inline-block;
	margin:0px 10px;
}

nav ul li a {
	color:#fff;
}

nav ul li a:hover {
	color:#fff;
}

nav ul.sub-menu {
	display: none;
	overflow: hidden;
	background:#000;
}

nav ul li:hover .sub-menu {
	display: block;
	position: absolute;
	margin-top:0;
	left:0;
  padding:10px;
  padding-top:15px;
}

nav ul.sub-menu li {
  margin-bottom:5px;
}

nav.topbalk.scroll {
  width:100vw;
  position: fixed;
  top:0;
  z-index:99;
}

/* == CONTACT == */

.contact {
	padding-top:100px;
	padding-bottom:100px;
}

.contact h3 {
	margin-bottom:30px;
}

.sidebar-container {
  border-left:1px solid rgba(170, 170, 170, 0.4);
}

.contact .sidebar {
  padding-left:50px;
}

.sidebar h4 {
  text-transform: uppercase;
  font-size:18px;
  margin-bottom:20px;
}

/* == SINGLE CATEGORY == */

.single-category {
  padding-top:100px;
  padding-bottom:100px;
}

.single-category .artikelen-row {
  margin-top:30px;
}

/* == FORM == */

form input, form textarea {
	width:100%!important;
}

form textarea {
	border:1px solid rgba(183, 183, 183, 0.7)!important;
}

form input {
	border:1px solid rgba(183, 183, 183, 0.7)!important;
	padding:15px;
}

/* === BLOG === */

.recente-artikelen {
  padding-bottom:100px;
  padding-top:100px;
}

.recente-artikelen .container-fluid {
  width:70%;
}

.blog-box {
  position: relative;
  height:350px;
}

.blog-box .blog-info {
  position: absolute;
  z-index:2;
  bottom:0;
  width:100%;
  padding:10px 20px;
}

.blog-box .blog-info h3 {
  color:#fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.recente-artikelen .blog-datum-en-tags {
  display: block;
  clear: both;
  overflow: hidden;
}

.blog-datum-en-tags .blog-tags {
  float:right;
}

.blog-datum-en-tags .blog-datum {
  float:left;
  line-height:50px;
  color:#fff;
}

.blog-box .datum {
  float:right;
}

.recente-artikelen .blog-box .blog-tags {
  margin-top:10px;
  margin-bottom:10px;
}

.blog-tag a {
  color:#fff;
}

.blog-box:hover {
  transform:scale(1.02);
  transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -webkit-transition: all 150ms ease-in-out;
}

.blog-box a:hover {
  text-decoration: none;
}

.blog-box .content p, .blog-box .content{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.blog-tag {
  display:inline-block;
  color:#fff;
  border-radius:10px;
  padding:5px 10px;
  font-size:14px;
  font-weight:300;
  margin-right:5px;
}

.overlay {
  z-index:1;
  position: absolute;
  width:100%;
  height:100%;
  bottom:0;
  right:0;
  background: -webkit-linear-gradient(0deg,rgba(0,0,0,0.7),rgba(0,0,0,0) 60%,rgba(0,0,0,0));
  background: linear-gradient(0deg,rgba(0,0,0,0.7),rgba(0,0,0,0) 60%,rgba(0,0,0,0));
}

.blog-box-klein h3 {
  font-size:20px;
}

/* == TEKSTVAK MET ARTIKELEN == */

.tekstvak-met-artikelen {
  padding-top:100px;
  padding-bottom:100px;
}

.tekstvak-met-artikelen figure {
  height:100%;
}

.tekstvak-met-artikelen h3 {
  margin-bottom:10px;
  font-size:18px;
}

.tekstvak-met-artikelen .content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height:70px;
}

.tekstvak-met-artikelen .artikel-row {
  margin-bottom:30px;
}

.tekstvak-met-artikelen .artikel-row a {
  color:#000;
}

.tekstvak-met-artikelen .artikel-row a:hover {
  text-decoration: none;
}

.tekstvak-met-artikelen .datum {
  margin-bottom:10px;
  color:#aaaaaa;
  opacity:0.7;
  text-transform: uppercase;
  font-size:12px;
}

.tekstvak-met-artikelen .content-box {
  padding:30px;
  width:95%;
  height:100%;
}

.divider {
  background:#aaaaaa;
  opacity:0.3;
  height:1px;
  margin-top:15px;
  margin-bottom:15px;
}

/* == BLOG CATEGORIEEN == */

.blog-cat {
  margin-bottom:100px;
  padding-top:100px;
  border-top:1px solid rgba(170, 170, 170, 0.4);
}

.blog-cat .cat-content {
  margin-bottom:30px;
}

.blog-cat .blog-box {
  height:350px;
}

.blog-box figure {
  position: relative;
  height:100%;
}

.blog-cat .blog-box .blog-info {
  position: absolute;
  bottom:0;
  width:100%;
  padding:10px 20px;
}

.blog-cat .blog-datum-auteur {
  display: block;
  clear: both;
  overflow: hidden;
}

.blog-cat .blog-box .auteur {
  float:left;
}

.blog-cat .blog-box .datum {
  float:right;
}

.blog-cat .blog-box .blog-tags {
  margin-top:10px;
  margin-bottom:10px;
}

/* == SINGLE BLOG == */

.single-blog {
  background:#f7f7f7;
  padding-top:100px;
  padding-bottom:100px;
}

.single-blog .sidebar-sectie {
  padding-left:50px;
}

.single-blog article {
  background:#fff;
  padding:30px 20px;
}

.single-blog aside {
  position: relative;
}

.single-blog .container-fluid {
  width:70%;
}

.single-blog h3 {
  font-size:25px;
}

.single-blog figure {
  width:100%;
  /*height:250px;*/
}

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

.single-blog .blog-info {
  clear:both;
  overflow:hidden;
  margin-top:20px;
  margin-bottom:20px;
}

.single-blog .terug-naar-overzicht a:hover {
  color:#ea5c28;
}

.single-blog h1 {
  margin-top:50px;
  margin-bottom:20px;
  font-weight:700;
}

.single-blog h2 {
  font-size:30px;
}

.single-blog h4 {
  font-size:18px;
  font-weight:600;
}

.single-blog .sidebar-sectie {
  margin-bottom:30px;
}

.single-blog .blog-sectie-titel {
  display: block;
  font-weight:800;
  color:#9c9c9c;
  font-size:18px;
  margin-bottom:15px;
  text-transform: uppercase;
}

.single-blog ul li a, .single-blog p a {
  text-decoration: underline;
}

.single-blog .auteur {
  margin-top:15px;
  margin-bottom:15px;
  font-weight:600;
}

.single-blog .auteur-naam {
  display: inline-block;
  font-size:15px;
}

.blog-tekstvak strong {
  font-weight:600;
}

.single-blog form input, .single-blog form textarea{
  border:1px solid rgba(0, 0, 0, 0.2);
  padding:15px!important;
  border-radius:10px;
  font-size:12px!important;
}

.single-blog .leestijd strong, .single-blog .blog-datum strong {
  font-weight:600;
}

.single-blog .blog-thumbnail {
  margin-top:20px;
  margin-bottom:35px;
}

.single-blog .blog-datum {
  float:left;
}

.single-blog .breadcrumbs_p {
  float:left;
}

.single-blog .blog-tekstvak ul {
  list-style-type:square;
  padding-left:30px;

}

    /* The progress container  */
.progress-container {
  position:fixed;
  top:0;
  width: 100%;
  height: 8px;
  background: #fff;
  z-index:99999999999;
}

/* The progress bar */
.progress-bar {
  height: 8px;
  width: 0%;
  position:relative;
}

/* == FOOTER == */

footer {
  color:#fff;
  padding-top:100px;
  padding-bottom:100px;
  font-size:16px;
}

footer h3 {
  border-bottom:1px solid rgba(183, 183, 183, 0.7);
  padding-bottom:10px;
  margin-bottom:20px;
  font-size:18px;
  text-transform: uppercase;
}

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

footer a {
  color:#fff;
}

footer a:hover {
  color:#fff;
  text-decoration: underline;
}

.laatste-berichten-box {
  height:50px;
  width:100%;
  clear: both;
  overflow: hidden;
  margin-bottom:15px;
}

.laatste-berichten-box figure {
  float:left;
  margin:0;
  height:50px;
  width:50px;
  margin-right:15px;
}

.laatste-berichten-box figure img {
  width:100%;
  height:auto;
}

.laatste-berichten-box .blog-titel {
  line-height: 50px;
}

.footer-box {
  width:90%;
}

/* PARTNERS */

.partners {
  padding-top:100px;
  padding-bottom:100px;
}

.partners h2 {
  margin-bottom:20px;
}

.partners .divider {
  margin-top:30px;
  margin-bottom:50px;
}