html,
body {
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body{font-family: 'Ubuntu', sans-serif;}
h1,h2,h3,h4{font-family: 'Grand Hotel', cursive;}
h2{font-size: 80px;}
h2 span{color: #1fa37d;}
.afstand{padding: 1em 0;}
.img_hide{display: none;}
/*------ navbar ----*/

.navbar-brand span{display: inline-block; color: #1fa37d;}
.navbar-brand img{float: left; }
.navbar-container {padding: 15px 0 15px 0;}
.navbar.navbar-fixed-top.fixed-theme {
    background-color: #fff;
    
}
.navbar-default .navbar-brand img{
  width: 150px;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -moz-transition: 0.5s all;
  margin-top: -20px;
}
.navbar-default .navbar-brand a{
  color: #000;
  display: block;
}
.navbar-default .navbar-brand a:hover{
  color: #1fa37d;
  text-decoration: none;
}
.navbar-brand.fixed-theme {font-size: 18px;}
.navbar-brand.fixed-theme img {
     transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -moz-transition: 0.5s all;
    width: 80px;
}
.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, 1);
  padding: 5px;
  border: none;
  -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-default .navbar-nav > li > a{ letter-spacing: 2px; text-align: center; text-transform: uppercase; border-bottom: 2px solid #fff; font-weight: 700; }
.navbar-default .navbar-nav > li > a:hover{
    color: #1fa37d;
     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: #1fa37d; 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: #1fa37d; border: none;}
.navbar-default .navbar-nav > li > a:focus{color: #777;}
.dropdown-menu > li > a{color: #1fa37d; background: #fff; }
.dropdown-menu > li > a:hover{color: #1fa37d; background: none;}
/*------ /navbar END ----*/
/*------ header ----*/
.img-header{
     background: rgba(26,26,26,0.2);
    height: 100vh;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.bg_demp {
    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;
    

}
.img-header .left_side{
  background: #fff;
  background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
}
.img-header .right_side{background: rgba(255,255,255,0.3)}
.img-header .right_side{padding: 9% 2px;}
.img-header .left_side .side_text{padding: 6% 2px;}
/*.img-header .container-fluid{width: 100%;}*/
.img-header{text-align: center;}
/*.img-header .col-md-6{max-height: 500px;}*/
.img-header h1{text-align: center; font-size: 100px; text-transform: capitalize; letter-spacing: 3px;}
.img-header .left_side h1{color: #333;}
.img-header .right_side h1{color: #fff; font-size: 70px;}
.img-header img{width: 100px;}
.img-header span{font-weight: 300; color: #1fa37d;}
.img-header p{color: #1fa37d; font-size: 19px; font-weight: 700; }
.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: #1fa37d;
  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{}
.about .text_padding{padding: 1% 2%;}
.about p, .about li{font-size: 16px; color: #4d4d4d;}
.about .img_bg{padding-left: 0; padding-right: 0;
   background: #1a1a1a url("../img/about_bg.jpg") no-repeat scroll 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; 
}
.row.is-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
/*----- /about END ----*/
/*----- tussen_bg ----*/
.tussen_bg {
    background: #1a1a1a url("../img/tussen_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: 4% 0;
    color: #fff;
}
.tussen_bg p{font-size: 20px;}
.tussen_bg h2{color: #e3a302;}
/*----- /tussen_bg END ----*/
/*--- prijs ---*/
.prijslijst{padding: 2% 0 3%;}
.prijslijst h2, .prijslijst h4{text-align: center; }
.prijslijst img{display: block; margin: 0 auto;}
.prijslijst .btn {
  text-transform: uppercase;
  text-align: center;
  padding: 20px 65px;
  border: 1px #e3a302  solid;
  color: #e3a302;
  font-weight: 700;
  letter-spacing: 2px;  
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -moz-transition: 0.5s all;
}
.prijslijst .btn:hover {color: #fff; background: #e3a302; text-decoration: none;}

/*---- /prijs END ----*/
/*---- balk ----*/
.balk{background: #e3a302; padding: 10px;}
.balk h3{ font-size: 70px;}
.balk a{color: #fff;}
.balk a:hover{color: #1fa37d; text-decoration: none;}
/*--- /balk END -----*/
/*---- facebook_icon ----*/
.facebook_icon{background: #e3a302; padding: 5px;}
.facebook_icon .ico{font-size: 60px; text-align: center; margin: 0 auto; color: #fff;}
.facebook_icon .ico:hover{
    color: #1fa37d;
    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 -----*/
/*---- gallery ----*/
.gallery .hovereffect:before  {
  background: rgba(26, 26, 26, 0.6) url("../img/body_bg.png.html") repeat scroll center top;
   content: "";
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
.gallery .hovereffect:hover:before{
  z-index: -1;
}
.gallery .col-lg-3{padding-left: 0; padding-right: 0;}
.gallery .hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.gallery .hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.gallery .hovereffect img {

display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.gallery .hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:15px;
}
.gallery .hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
font-size: 20px;
font-weight: 700;
border: none;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
/*margin:50px 0 0;
padding:17px 14px;*/
/*padding-top: 16%;*/
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.gallery .hovereffect a.info:hover {box-shadow:none;}
.gallery .hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.gallery .hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}
.gallery .hovereffect:hover h2,.gallery .hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}
.gallery .hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
/*---- /gallery END -----------*/
/*------- map ------*/
#map{height: 550px;}
.map{height: 550px;}
.map p{color: #000;}
/*------- /map END ------*/
/*--- tussen_naam ---*/
.tussen_naam{padding: 5% 0; text-align: center;}
.tussen_naam h2 span{color: #1fa37d;}
.tussen_naam .geg h5{font-size: 22px; text-transform: uppercase;}
.tussen_naam .geg p{}
.tussen_naam .geg a{ color: #1fa37d;}
.tussen_naam .geg a:hover{color: #000; text-decoration: none;}
.tussen_naam .geg .fa{color: #1fa37d;}
/*--- /tussen_naam END ---*/
footer{    
    border: none;
    padding-top: 20px;
}
footer p{  
    padding: 15px 0;
    text-align: center;
  }
footer p span{color: #1fa37d;}
/*----- Back-to-top ---*/
.scrollToTop{
    display: none;
    position: fixed;
    bottom: 100px;
    right: 40px;
}
.scrollToTop .ico{
    font-size: 48px;
    color: #1fa37d;
    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{color: #e3a302;}
/*----- /Back-to-top END ---*/
/*------- @media's ------*/
@media (max-width: 1100px){
    .bg_demp, .tussen_bg {background-attachment: scroll;}
}
@media (max-width: 960px){
    .img-header h1{font-size: 74px;}
    .prijslijst .btn2{margin-top: 20px;}
}
@media (max-width: 768px){
  body{margin-top: 60px;}
  .img-header{height: auto;}
  .img-header img{display: inline-block; margin-top: 25px}
    .img-header h1{font-size: 64px;}
    .img-header p{font-size: 16px;}
    .img-header .right_side h1{font-size: 40px;}
    h2{font-size: 41px; text-align: center;}
    .btn_top{left: 45vw; bottom: 15px;}
    .balk h3{ font-size: 50px;}
    .scrollToTop{
        bottom: 15px;
        right: 15px;
    }
    .scrollToTop .ico{font-size: 36px;}
}
@media (max-width: 670px){
    .img-header h1{font-size: 54px;}
    .img-header{background: rgba(26,26,26,0.7);}
    .img-header .right_side{background: rgba(26,26,26,0)}
    .btn_top{left: 40vw; bottom: 15px;}
    .balk h3{ font-size: 30px;}
}