/*HTML main elements*/
html {
  position: relative;
  min-height: 100%;
  height: 100%
}

body {
    background-color: #FBFBFB;
    margin-bottom: 80px;
}


h4 {
    color: #002c53;
}


p {
    font-size: 1.2rem;
    font-weight: 400;
}

b {
    color: #002c53;
}
a:hover {
    cursor: pointer;
}


/*Brand Colors*/
.blue {
    color: #002c53;
}
.gold {
    color: #d5b177;
}
.white {
    color: white;
}
.bgblue {
    background-color: #002c53;
}
.bggold {
     background-color: #d5b177;;
}

.bgwhite {
    color: white;
}


.hero {
  height: 50vh;
  background-size: cover;
  border-bottom-color: #d5b177;
  border-bottom-style: solid;
  border-bottom-width: 3px;
}
.navbar-nav {
    z-index: 9999;
}

.main {
        top: -5vh;
        position: relative;
    }
.mainw {
    display: block;
    z-index: 200;
    position: relative;
    /*margin: 0px 5vw;*/
}
.mainc {
            
        padding-top: 2em;
        /*padding-left: 2em;
        padding-right: 2em;*/
        padding-bottom: 2em;
}
.whiteb {
    background-color: #fff;
}


/*Custom cards*/
.card {
    border-radius: 0;
   
}
.card a:link{
   text-decoration: none;
   
}
.card-img-top {
    border-radius: 0;
}
.card > .list-group > .list-group-item {
    border-left: 0;
    border-right: 0;
    background-color: white;
}
.card span {
    color:  #212529;
    text-decoration: none;
}
.card .contact-info {
   color:  #212529;
   text-decoration: none;
}
.card .item-title {
   text-decoration: none;
}



/*Custom hover on cards*/
.hvr:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #002c53  ;
    color: white;
    cursor: pointer;
}
.hvr:hover h3 {
    color: white;
}
.hvr:hover h4 {
    color: white;
}

.hvr:hover span {
    color: #d5b177;
}
.hvr:hover .contact-info {
    color: #d5b177;
}
.hvr2:hover {
    color: white;
    cursor: pointer;
}
.hvr2:hover {   
    color: white;
    cursor: pointer;
}
.hvr2:hover h3 {
    color: white;
}
.hvr2:hover h4 {
    color: white;
}

.hvr2:hover span {
    color: #d5b177;
}
.hvr2:hover .contact-info {
    color: #d5b177;
}

.hvr2 h3 {
    color: white;
}
.hvr2 h4 {
    color: white;
}

.hvr2 span {
    color: #d5b177;
}
.hvr2 .contact-info {
    color: #d5b177;
}

.hvr:hover .btn-ksg-blue {
    background-color: #d5b177;
    color: #002c53;
}
.hvr:hover {
     text-decoration: none;
}

.item-title {
    min-height: 100px;
}

/*Custom buttons*/
.btn-ksg {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-ksg:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
    background-color: #002c53  ;
    color: white;
}
.btn-ksg-blue {
    color: white;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
     background-color: #002c53  ;
}
.btn-ksg-blue:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
    background-color: #002c53  ;
    color: white;
}
.btn-ksg-outline-gold {
    color:  #002c53;
    background-color: transparent;
    background-image: none;
    border-color:  #d5b177;
    border-radius: 0;
}


.btn-ksg-outline-gold:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
    background-color: #d5b177  ;
    color: white;
}





#secondItems {
    margin-top: 1.5em;
}

.nav-link {
    color: white;
    font-size: 1.6rem;
}
.navbar-text > a {
    color:  #002c53;
    font-size: 1.6rem;
}

.nav-link:hover {
    color:  #002c53;

}

.navbar-text a:hover {
  color:  #002c53;
  text-decoration-line: none;
}
 .navbar-text a:hover > i {
  color:  white;

}
.hvr:hover .btn-nieuws {
   background-color: #d5b177;
}

@media (min-width: 992px){
    .navbar li {
        margin-left : 1em;
        margin-right : 1em;
    }
}
.list-group-item:hover {
    background-color: #002c53;
    color: white;
}
.ksgbb {
    background-color: #002c53;
    color: white;
}
.grow-img {    
    overflow: hidden;
}
.grow-img img {
    max-width: 100%;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.grow-img:hover img {   
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
} 

/* highlight a little */

.portal {
    color: #002c53;
}

.unl {
  display: inline;
  position: relative;
  overflow: hidden;
}
.unl:after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  width: 0;
  bottom: -5px;
  background: #002c53;
  height: 3px;
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease-in;

}
.unl:hover:after,
.unl:focus:after,
.unl:active:after {
  left: 0;
  right: auto;
  width: 100%;
    color: #019fb6;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-family: "Open Sans", Verdana, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.4;
}


#overlay {
    width: 90%;
   margin-top: 7em;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
     transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
    
}
#overlay h1 {
     margin: 0;
    padding: 0;
    /*font-weight: bold;*/
}
#overlay h3 {
     margin: 0;
    padding: 0;
    /*font-weight: bold;*/
}
@media (max-width: 640px){
    /*#overlay h3 { font-size: 2em; }    
    #overlay h1 { font-size: 1.5em;}*/
}
@media (min-width: 640px){
   #overlay h1 {
    font-size: 2.5em;   
    }
}
@media (max-device-width: 480px){
  #overlay h1{
    
    -webkit-text-size-adjust: none;
  }
}


/*Footer*/
.footer{ 
    /*margin-top: 2em;  
    margin-bottom: -8em; */
   background-color: #002c53;
       border-top-style: solid;
    border-top-color: #d5b177;
    /*z-index: 200;*/
    position: absolute;
    width: 100%;
}
.footer .container {    
    padding-top: 2em;
    padding-bottom: 2em;
}
.footer h3 {
    font-size:  20px;    color: #d5b177; 
    font-weight: 400; 
}
.footer a {
    color: white; 
}
.footer a:hover { 
    text-decoration-line: none;
    font-weight: bold;
}
.footer-menu a {
    padding-right: 15px;
    margin-right: 10px;
    position: relative;
}
.foot li {
        line-height: 1.5em;
}

.follow-buttons a:hover{
    opacity:.8;
}
.copyright {
    border-top-color: #d5b177;
    border-top-style: solid;
    border-top-width: 1px;
    padding-top: 1em;
    margin-top: 1em;
    color:  white;
    line-height: 4rem;
    /*bottom: -100;
    background-color: #002c53;
    height: 60px;
    line-height: 60px; 
    position: absolute;
    width: 100%;*/
}
.copyright img {
    max-height: 60px;
}
.copyright span {
    margin-right: 1em;
}
.thItems {
    border-top-style: solid;
    border-top-color: #d5b177;
    border-top-width: 3px;
    margin-top: 2em;
}
.thitems .row {
    padding-left: 1em;
    padding-right: 1em;

}
.list-group-horizontal {
    display: contents;
}
.list-group-horizontal .list-group-item {
    display: inline-block;
    text-align: center;
    background-color: #002c53;
}
.list-group-horizontal .list-group-item {
	margin-bottom: 0;
	margin-left:-4px;
	margin-right: 0;
    color: white;
    border-top: none;
    border-bottom: none;
    border-right:  1px solid rgba(213, 177, 119,0.5);
   
}
.list-group-horizontal .list-group-item:first-child {
	border-radius:0;
    border-left:  1px solid rgba(213, 177, 119,0.5);
}
.list-group-horizontal .list-group-item:last-child {
	border-radius:0;
}

.list-group-horizontal .list-group-item:hover {
    background-color: #d5b177;
}
.list-group-item {
    border: 1px solid rgba(213, 177, 119,0.5);
}

.customFile .custom-file-input::after {
  content: "Selecteer";
}

.sct {
    margin-top: 2em;
}

.share .title {
        padding-left: 0.2rem;
        color: #d5b177; 
}
.cmsContent {
    font-size: 1.2em;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.cmsContent h4 {
    color: #002c53;
}
.cmsContent h2 {
    color: #002c53;
}
.contactBar .inner {
    padding: 20px 20px 10px 20px;
    color: #FFF;
}
.contactBar a {
    color: white;
    font-size: larger;
}
.contactBar a {
    color: white;
    text-decoration: none;
}
.contactBar i {
     font-size: larger;
}


.bodyend {
/*    bottom: 0;
    position: fixed;
    background-color: #002c53;
    height: 2em;
    width: 100%;*/
   /*border-top-style: solid;
    border-top-color: #d5b177;
    border-top-width: 3px;*/
}

.span4
{
    width: 30px;
    float: left;
   margin-right: 0.5em;
}
.num
{
    border: 1px solid #9e9e9e;
    -webkit-border-radius: 999px;
    border-radius: 999px;
    -moz-border-radius: 999px;
       height: 30px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
}
.num:hover
{
    background-color: #9e9e9e;
    color: #fff;
    transition-property: background-color .2s linear 0s;
    -moz-transition: background-color .2s linear 0s;
    -webkit-transition: background-color .2s linear 0s;
    -o-transition: background-color .2s linear 0s;
}
.txt
{
    font-size: 17px;
    text-align: center;
    margin-top: 0px;
    font-family: 'Lato' , sans-serif;
    line-height: 30px;
    min-width: 30px;
    color: #333;
}
.fa-angle-right {
    margin-right: 0.5em;
}
.blur Image {  
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

/* XS styling */
@media (max-width: @screen-xs-max) {
   .body{
    width: 100%;
    }
  .container {
    width: inherit;
  }
  .mainw {
        margin: 0px 0vw;
    }
}
/* XS styling */
@media (max-width: @screen-sm-max) {
   .center-mobile {
        text-align: center;
    }
}
/* SM styling */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .body {
        width: 100%;
    }
    .container {
        width: inherit;
    }
    .mainw {
        margin: 0px 0vw;
    }
}

.tags a {
    margin-top: 0.25em;
}
.services-nav a {
    font-size: 1.2rem;
    font-weight: 400;
    background-color: #002c53;
    color: white;
    border-radius: 0;
    margin-bottom: 0.25rem;
}

.card-header-acordian{
    font-size: 1.2rem;
    font-weight: 400;
    background-color: #002c53;
    color: white;
    border-radius: 0;
    margin-bottom: 0.25rem;
}
.services-nav .btn-link:hover {
    color: white !important;
}

.card-acordian.active > .card-header-acordian{
    color: #002c53;
    background-color: #d5b177;
}

.card-acordian.active > .card-header-acordian i{
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari 3-8 */
    transform: rotate(180deg);
}

.card-header-acordian i {
    float: right;
    margin-top: 6px;
}

.card-acordian.active > .card-header-acordian button{
    color: #002c53 !important;
}

.services-nav .nav-link.active {
    color: #002c53;
    background-color: #d5b177;
   
}
.services-nav .nav-link {
    border-radius: 0;
}
.services-nav .nav-link:hover {
    color: #d5b177;
}
.services-nav .nav-link.active:hover {
    color: white;
}

.services-nav .card-acordian:hover {
    transform: translateY(0) !important;
}

.services-nav button {
    font-size: 1.2rem;
    font-weight: 400;
    white-space: normal; 
    text-align: left;
    width: 100%;
}




/*Mobile menu*/
    .animate {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.navbar-fixed-right {
		position: fixed;
		top: 0px;
		right: 0px;
		border-radius: 0px;
	}

	.navbar-minimal {
		width: 60px;		
		min-height: 60px;
		max-height: 100%;
		background-color:#002c53;
		background-color: rgba(0, 4, 83, 0.9);
		border-width: 0px;
		z-index: 9999;
	}

	.navbar-minimal > .navbar-toggler {
		position: relative;
		/*min-height: 60px;*/
		border-bottom: 1px solid rgb(81, 81, 81);
		z-index: 100;
		cursor: pointer;
	}

	

	.navbar-minimal > .navbar-toggler > span {
		position: absolute;
		top: 50%;
		right: 50%;
		margin: -8px -8px 0 0;
		width: 16px;
		height: 16px;
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9IjAgMCAxNiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsN2gxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDksMCw4LjU1MiwwLDgKCVMwLjQ0OCw3LDEsN3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLDEyaDE0YzAuNTUyLDAsMSwwLjQ0OCwxLDFzLTAuNDQ4LDEtMSwxSDFjLTAuNTUyLDAtMS0wLjQ0OC0xLTEKCVMwLjQ0OCwxMiwxLDEyeiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsMmgxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDQsMCwzLjU1MiwwLDMKCVMwLjQ0OCwyLDEsMnoiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjMzLDI4Ljk3bDExLjY0LTExLjY0YzAuNDU5LTAuNDU5LDEuMjA0LTAuNDU5LDEuNjYzLDAKCWMwLjQ1OSwwLjQ1OSwwLjQ1OSwxLjIwNCwwLDEuNjYzTDIuOTkzLDMwLjYzM2MtMC40NTksMC40NTktMS4yMDQsMC40NTktMS42NjMsMEMwLjg3MSwzMC4xNzQsMC44NzEsMjkuNDMsMS4zMywyOC45N3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLjk5MywxNy4zM2wxMS42NDEsMTEuNjRjMC40NTksMC40NTksMC40NTksMS4yMDQsMCwxLjY2MwoJcy0xLjIwNCwwLjQ1OS0xLjY2MywwTDEuMzMsMTguOTkzYy0wLjQ1OS0wLjQ1OS0wLjQ1OS0xLjIwNCwwLTEuNjYzQzEuNzg5LDE2Ljg3MSwyLjUzNCwxNi44NzEsMi45OTMsMTcuMzN6Ii8+Cjwvc3ZnPgo=);
		background-repeat: no-repeat;
		background-position: 0 0;
		-webkit-transition: -webkit-transform .3s ease-out 0s;
		-moz-transition: -moz-transform .3s ease-out 0s;
		-o-transition: -moz-transform .3s ease-out 0s;
		-ms-transition: -ms-transform .3s ease-out 0s;
		transition: transform .3s ease-out 0s;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
         /* IE10+ CSS styles go here */
        .navbar-minimal > .navbar-toggler > span {
        	    top: 20px;
        }
        body {
            overflow-x:hidden;
        }
    }
	.navbar-minimal > .navbar-menu {
		position: absolute;
		top: -1000px;
		left: 0px;
		margin: 0px;
		padding: 0px;
		list-style: none;
		z-index: 50;
		background-color: rgb(	213, 177, 119);
		background-color: rgba(	213, 177, 119, 0.9);
	}
	.navbar-minimal > .navbar-menu > li {
		margin: 0px;
		padding: 0px;
		border-width: 0px;
		height: 55px;
	}
	.navbar-minimal > .navbar-menu > li > a {
		position: relative;
		display: inline-block;
		color: rgb(255, 255, 255);
		padding: 20px 23px;
		text-align: left;
		cursor: pointer;
		/*border-bottom: 1px solid rgb(81, 81, 81);*/
		width: 100%;
		text-decoration: none;
		margin: 0px;
	}

	.navbar-minimal > .navbar-menu > li > a:last-child {
		border-bottom-width: 0px;
	}
	.navbar-minimal > .navbar-menu > li > a:hover {
		background-color: rgb(158, 202, 59);
        height:55px
	}
	.navbar-minimal > .navbar-menu > li > a > .glyphicon {
		float: right;
	}

	.navbar-minimal.open {
		width: 50%;
	}

	.navbar-minimal.open > .navbar-toggler > span {
		background-position: 0 -16px;
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	.navbar-minimal.open > .navbar-menu {
		top: 60px;
		width: 100%;
		min-height: 100%;
	}

	@media (min-width: 768px) {
		.navbar-minimal.open {
			width: 60px;
		}
		.navbar-minimal.open > .navbar-menu {
			overflow: visible;
		}
		.navbar-minimal > .navbar-menu > li > a > .desc {
			position: absolute;
			display: inline-block;
			top: 0px;
            right: 60px;
			text-align: left;
			white-space: nowrap;
		padding-right:20px;
			padding-left:20px;
			
			height:55px;
			line-height:50px;
			border-width: 0px !important;
			background-color: rgba(	213, 177, 119, 0.9);
            opacity: 0;
			
		}
	
		.navbar-minimal > .navbar-menu > li > a:hover > .desc {
			/*left: 60px;;*/
			opacity: 1;
		}
	}
    .logo-mobile {
        position: fixed;
    top: 0;
    left: 0;
}

@media (max-width: 576px) {
    .sticky-top {
        background-color: rgba(255,255,255,0.7);
        height: 60px;
         position: fixed;
    top: 0;
    left: 0;
    width: 100%
    }
    .sctm {
    margin-top: 2em
}
}

/* XS styling */
@media (max-width: 576px) {
   .center-mobile {
        text-align: center;
    }
}

.swal2-popup {
    border-radius: 0
}
.swal2-confirm .swal2-styled, .swal2-cancel .swal2-styled {
     border-radius: 0
}


