html,
body {
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body{font-family: 'Droid Serif', serif;}
h1, h2, h3, h4{font-family: 'Judson', serif;}
h2{font-size: 61px; line-height: 114px; color: #6f5499;}
hr{max-width: 150px; border-color: #000;}
p{ font-size: 15px; line-height: 18px; color: #8c8c8c;}
ul p{text-transform: uppercase; color: #000;}
.afstand{padding: 1em 0;}
.img_hide{display: none;}
/*------ nav ----*/
.navbar-default .navbar-brand { height: 60px; color: #6f5499; text-transform: uppercase;}
.navbar-default .navbar-brand span{ color: #000; font-weight: 300;}
.navbar-default .navbar-brand img{float: left; width: 190px;}
.navbar-container {padding: 30px 0 30px 0;}
.navbar.navbar-fixed-top.fixed-theme {
  background-color: #210833;
   -webkit-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.75);
  -ms-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.75);
  -o-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.75);
}
.navbar-brand.fixed-theme img{
    width: 135px;
    transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -moz-transition: 0.5s all;
}
.navbar-container.fixed-theme {padding: 0;}
.navbar-brand.fixed-theme,
.navbar-container.fixed-theme,
.navbar.navbar-fixed-top.fixed-theme,
.navbar-brand,
.navbar-container{
    transition: 0.8s;
    -webkit-transition:  0.8s;
}
.navbar-default{
  background: rgba(255, 255, 255, 0);
  padding: 5px;
  border: none;
  
}
.navbar-default .navbar-nav > li > a{ letter-spacing: 1px; text-align: center; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.5); }
.navbar-default .navbar-nav > li > a:hover{
    color: #fff;
     transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -moz-transition: 0.5s all;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover{background: none; color: #fff; border: none;}
.navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .active > a:hover{background: none; color: #fff; border: none;}
.navbar-default .navbar-nav > li > a:focus{color: #777;}
.dropdown-menu > li > a{color: #6f5499; background: #fff; }
.dropdown-menu > li > a:hover{color: #6f5499; background: none;}
/*------ /nav END ----*/
/*------ header ----*/
.img-header {
    background: #1a1a1a url("../img/header.jpg") no-repeat fixed center top;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;

    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
    align-items: center;
    text-align: center;

}
.text-cap{text-align: center;}
/*.text-cap h1{text-align: center; font-size: 94px; color: #fff; text-transform: capitalize; letter-spacing: 3px; }
.text-cap span{font-weight: 300; color: #6f5499; text-transform: uppercase;}*/
.text-cap img{display: block; margin: 0 auto;}
.btn_top{position: absolute; left: 48vw; bottom: 15px;}
@-webkit-keyframes chevron-pulse {
  0% {
    opacity: 0; }
  40% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes chevron-pulse {
  0% {
    opacity: 0; }
  40% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

.tcon-svgchevron {
  height: 60px;
  width: 60px; }

.tcon-svgchevron path {
  -webkit-animation: chevron-pulse 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation: chevron-pulse 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
  fill: transparent;
  stroke: #fff;
  stroke-width: 3px; }

.tcon-svgchevron path.a1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }

.tcon-svgchevron path.a2 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s; }

.tcon-svgchevron path.a3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s; }
/*------ /header END ----*/
/*---- about ---*/
.about{padding: 2% 0 4%;}
.about .text_about p{font-size: 16px; line-height: 21px;}
.about ul{font-family: 'Judson', serif;}
.about li{list-style-type: none; line-height: 27px; font-size: 19px; text-transform: uppercase;}
.about .text_about a{color: #6f5499;}
.about .text_about a:hover{color: #081b33; text-decoration: none;}
/*---- /about END -------*/
/*---- diensten -----*/
.diensten{
    background: #f2f2f2 url("../img/diensten_bg.jpg") no-repeat fixed center top;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-repeat: no-repeat;
    padding: 5% 0;
  }
  .diensten p{color: #fff;}
  .diensten .hr2{
    border: 2px solid #fff;
    border-image: none;
    border-style: solid none none;
    border-width: 1px 0 0;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 150px;
    display: inline-block;
  }
/*---- /diensten END ----*/
/*--- kosten ---*/
.kosten{padding: 5% 0;}
/*---- /kosten END ---*/
/*---- hour ---*/
.hour {
    background: #f2f2f2 url("../img/team_bg.jpg") no-repeat fixed center top;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-repeat: no-repeat;
    padding: 8% 0;
}
.hour h4{font-weight: 700; font-size: 30px; text-align: center; font-family: 'Special Elite', cursive;}
.hour .borderlg{border-top: 2px solid #423f38; border-bottom: 2px solid #423f38;}
.hour .paddingtop{padding-top: 6%; color: #000;}
.hour a{color: #666;}
.hour a:hover{color: #6f5499; text-decoration: none;}
.hour ul{padding-top: 10px; padding-left: 0;}
.hour li{list-style-type: none; text-align: center;}
.white {color: white;}
.hour .btn-lg {
    font-size: 38px;
    line-height: 1.33;
    border-radius: 6px;
}
.hour .box > .icon {
    text-align: center;
    position: relative;
}
.hour .box > .icon > .image {
    position: relative;
    z-index: 2;
    margin: auto;
    width: 88px;
    height: 88px;
    border: 7px solid white;
    line-height: 88px;
    border-radius: 50%;
    background: #423f38;
    vertical-align: middle;
    transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -moz-transition: 0.5s all;
}
.hour .box > .icon:hover > .image {border: 4px solid #6f5499;}
.hour .box > .icon > .image > i {
    font-size: 40px !important;
    color: #fff !important;
}
.hour .box > .icon:hover > .image > i {color: white !important;}
.hour .box > .icon > .info {
    margin-top: -24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 15px 0 10px 0;
    /*width: 350px;*/
    height: 250px;
}
.hour .box > .icon > .info > h3.title {
    color: #423f38;
    font-weight: 500;
    text-transform: uppercase;
}
.hour .box > .icon > .info > p {
    color: #666;
    line-height: 1.5em;
    margin: 20px;
}
.hour .box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222;}
.hour .box > .icon:hover > .info > h3.title {color: #6f5499;}
.hour .box > .icon > .info > .more a {
    color: #222;
    line-height: 12px;
    text-transform: uppercase;
    text-decoration: none;
}
.hour .box > .icon:hover > .info > .more > a {
    color: #000;
    padding: 6px 8px;
    border-bottom: 4px solid black;
}
.hour .box .space {height: 30px;}
/*---- /hour END --*/
/*----- team ----*/

.team {
    background: #f2f2f2 url("../img/team_bg.jpg") no-repeat fixed center top;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-repeat: no-repeat;
    padding: 8% 0;
}
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.7" /><feFuncG type="linear" slope="0.7" /><feFuncB type="linear" slope="0.7" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.7);
  -webkit-filter: brightness(0.7);
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  width: 100%;
}

.hovereffect:hover h2 {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
  transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  margin: 50px 0 0 0;
  background-color: transparent;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect .rotate {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 100%;
  height: 100%;
  position: absolute;
}

.hovereffect hr {
  width: 50%;
  opacity: 0;
  filter: alpha(opacity=0);
}

.hovereffect  hr:nth-child(2) {
  -webkit-transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(0,0,1);
  transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(0,0,1);
}

.hovereffect  hr:nth-child(3) {
  -webkit-transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(0,0,1);
  transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(0,0,1);
}

.hovereffect h2, .hovereffect hr {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  background-color: transparent;
  margin: 0px;
}

.group1, .group2 {
  left: 50%;
  position: absolute;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  background-color: transparent;
  margin: 0px;
  padding: 0px;
}

.group1 {
  top: 40%;
}

.group2 {
  top: 60%;
}

.hovereffect p {
  width: 30%;
  text-transform: none;
  font-size: 15px;
  line-height: 2;
}

.hovereffect p a {
  color: #fff;
}

.hovereffect p a:hover,
.hovereffect p a:focus {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

.hovereffect  a i {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  padding: 10px;
  font-size: 20px;
}

.group1 a:first-child i {
  -webkit-transform: translate3d(-60px,-60px,0) rotate(45deg) scale(2);
  transform: translate3d(-60px,-60px,0) rotate(45deg) scale(2);
}

.group1 a:nth-child(2) i {
  -webkit-transform: translate3d(60px,-60px,0) rotate(45deg) scale(2);
  transform: translate3d(60px,-60px,0)  rotate(45deg) scale(2);
}

.group2 a:first-child i {
  -webkit-transform: translate3d(-60px,60px,0) rotate(45deg) scale(2);
  transform: translate3d(-60px,60px,0) rotate(45deg) scale(2);
}

.group2 a:nth-child(2) i {
  -webkit-transform: translate3d(60px,60px,0)  rotate(45deg) scale(2);
  transform: translate3d(60px,60px,0)  rotate(45deg) scale(2);
}

.hovereffect:hover hr:nth-child(2) {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(1,1,1);
  transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(1,1,1);
}

.hovereffect:hover hr:nth-child(3) {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(1,1,1);
  transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(1,1,1);
}

.hovereffect:hover .group1 i:empty, .hovereffect:hover .group2 i:empty {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0) rotate(45deg) scale(1);
  opacity: 1;
  filter: alpha(opacity=100);
}
/*----- /team END ----*/
/*---- facebook_icon ----*/
.facebook_icon{background: #081b33; padding: 5px;}
.facebook_icon .ico{font-size: 60px; text-align: center; margin: 0 auto; color: #fff;}
.facebook_icon .ico:hover{
    color: #6f5499;
    transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -moz-transition: 0.5s all;
}
/*--- /facebook_icon END -----*/
/*--- text_map ----*/
.text_map{background: #081b33; padding: 15px;}
.text_map p{color: #000}
/*---- / text_map END ----*/
/*------- map ------*/
#map{height: 500px;}
.map{height: 500px;}
.map p{color: #000;}
/*------- /map END ------*/
/*------- contact ------*/
.contact{
    background: #1a1a1a url("../img/body_bg.png") repeat fixed center top;
    padding: 1% 0 4%;
    color: #fff;
}
.contact h2{text-align: center; font-weight: 700;}
.geg h3{text-align: center;}
.geg .row{padding: 20px 0; text-align: center;}
.geg .brd{border-bottom: 1px solid #999; border-top: 1px solid #999;}
.geg h5{font-size: 22px; text-transform: uppercase;}
.geg p{}
.geg a{ color: #6f5499;}
.geg a:hover{color: #fff; text-decoration: none;}
.geg .fa{color: #6f5499;}
.contact-form{text-align: center;}
.more-btn{padding: 10px 45px; background: #6f5499; color: #fff; border: 1px #6f5499 solid; text-transform: uppercase; letter-spacing: 2px;}
.more-btn:hover{
    background: none;
    color: #6f5499;
    transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -moz-transition: 0.5s all;
}
/*------- /contact END ------*/
footer{    
    background: #210833;   
    border: none;
}
footer p{
    padding: 15px 0;
    text-align: center;
    text-transform:  uppercase;
  }
footer p span{color: #fff;}
/*----- Back-to-top ---*/
.scrollToTop{
    display: none;
    position: fixed;
    bottom: 100px;
    right: 40px;
}
.scrollToTop .ico{
  font-size: 48px;
  color: #6f5499; 
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -moz-transition: 0.5s all;
}
.scrollToTop .ico:hover{font-size: 50px; color: #000;}
/*----- /Back-to-top END ---*/
/*------- @media's ------*/
@media (max-width: 1100px){
    .img-header, .contact, .diensten, .hour {background-attachment: scroll;}
}
@media (max-width: 960px){
    .text-cap h1{font-size: 44px;}
}
@media (max-width: 768px){
    body{}
    .img-header {padding: 30% 0;}
    .text-cap h1{font-size: 34px;}
    h2{font-size: 41px; text-align: center;}
    .about li{ font-size: 17px;}
    .btn_top{left: 45vw; bottom: 15px;}
    .scrollToTop{
        bottom: 15px;
        right: 15px;
    }
    .scrollToTop .ico{font-size: 36px;}
}
@media (max-width: 670px){
    .navbar-default{background: rgba(255, 255, 255, 1);}
    .navbar-default .navbar-nav > li > a{color: #6f5499;}
    .navbar-container{padding: 0 15px;}
    .img-header {padding: 40% 0;}
    .text-cap h1{font-size: 24px;}
    .btn_top{left: 40vw; bottom: 15px;}
}