html, body {margin: 0px; padding: 0px; overflow-x: hidden;}
body { font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 34px; background-color: #e4e4e4;}


h1 { font-weight: 100; text-transform: uppercase; letter-spacing: 10px; line-height: 2em;}
h2 { font-weight: 100; text-transform: uppercase; letter-spacing: 4px; line-height: 2em;}

p { font-weight: 200; }

a { color: #e4e4e4; text-decoration: none; }
a:hover { color: #ccc; text-decoration: underline; }

/* Buttons */ 
.btn { margin-top: 20px; border-radius: 0px; padding: 10px 40px; font-weight: 200; font-size: 18px; transform: ease-in-out .4s; margin-right: 10px;  } 
.btn.btn-white { border: 1px solid #e4e4e4; color: #e4e4e4; background: #333333; }
.btn.btn-white:hover { background: #e4e4e4; color: #333333; }
.btn.btn-dark { border: 1px solid #333333; color: #333333; background: #e4e4e4; }
.btn.btn-dark:hover { background: #333333; color: #e4e4e4; }
.btn.btn-fill { border: 1px solid #333333; color: #e4e4e4; background: #333333; }
.btn.btn-fill:hover { border: 1px solid #333; background: #e4e4e4; color: #333; }

/* Other elements */
.written { display: block; margin-top: 10px; font-family: 'Dancing Script', cursive; font-style: normal; font-size: 26px;}

/* Layout */
.container-fluid { padding: 0px;}

/* Preloader */
.js div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333; }
.preload-container {
  width: 80px;
  height: 100px;
  margin: 100px auto;
  margin-top: calc(100vh / 2 - 50px);
}

.preload-block {
  position: relative;
  box-sizing: border-box;
  float: left;
  margin: 0 10px 10px 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #1d1d1d;
}

.preload-block:nth-child(4n+1) { animation: wave 2s ease .0s infinite; }
.preload-block:nth-child(4n+2) { animation: wave 2s ease .2s infinite; }
.preload-block:nth-child(4n+3) { animation: wave 2s ease .4s infinite; }
.preload-block:nth-child(4n+4) { animation: wave 2s ease .6s infinite; margin-right: 0; }

@keyframes wave {
  0%   { top: 0;     opacity: 1; }
  50%  { top: 30px;  opacity: .2; }
  100% { top: 0;     opacity: 1; }
}

/* Menu */

#nav-icon1 {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon1 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #333333;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
  top: 0px;
}
#nav-icon1 span:nth-child(2) {
  top: 18px;
}
#nav-icon1 span:nth-child(3) {
  top: 36px;
}
#nav-icon1.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
#nav-icon1.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}



header { position: absolute; z-index: 9999; left: 0; right: 0; }
header .logo img { width: 220px;}
header .menu { float: right;}

.menu-overlay { visibility: hidden; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: #444; opacity: 0; transition: opacity .60s, visibility .60s, height .60s; z-index: 5000; }
.menu-overlay.active {  opacity: 1; visibility: visible; height: 100%;}
.menu-overlay ul { text-align: center; list-style: none; padding: 10% 0 0 0; margin: 0; }
.menu-overlay ul li a { color: #e4e4e4; font-weight: 200; text-transform: uppercase; padding: 20px 0px; display: block; font-size: 30px; letter-spacing: 4px;}
.menu-overlay ul li a:hover { color: #aaa; text-decoration: none;}

#slider { overflow: hidden; display: block;}
#slider .flexslider { margin: 0px; padding: 0px; border: 0px;}
#slider .flexslider li { height: 101vh; background-size: cover; background-repeat: no-repeat; background-position: center;}
#slider .flexslider .flex-control-nav { display: none;}
#slider .flexslider .flex-direction-nav { display: none;}

#intro { background-color: #333333; color: #e4e4e4; padding: 80px 0px 100px 0px; overflow: hidden; }

#services .service-row { padding: 80px 0px; }

#review { background-color: #333333; color: #e4e4e4; padding: 80px 0px 100px 0px; }
#review ul.owl-carousel { padding: 50px 0px; margin: 0; list-style: none; }
#review ul.owl-carousel li { font-weight: 200; padding: 0; margin: 0;}
#review ul.owl-carousel li span { display: block; margin-top: 10px; font-family: 'Dancing Script', cursive; font-style: normal; font-size: 26px; }
#review ul.owl-carousel .owl-prev { position: absolute; left: -120px; top: 40%; }
#review ul.owl-carousel .owl-prev img { width: 60px;}
#review ul.owl-carousel .owl-next { position: absolute; right: -120px; top: 40%; }
#review ul.owl-carousel .owl-next img { width: 60px;}

#gallery ul { list-style: none; margin: 0; padding: 0; }
#gallery ul li { width: 33.333333%; float: left; }
#gallery ul li img { width: 100%;}

#pricing { padding: 80px 0px 100px 0px; overflow: hidden; }
#pricing .pricing-box { background: #333333; color: #e4e4e4; padding: 50px 100px; margin: 30px 0px; overflow: hidden; }
#pricing .pricing-box .top { width: 100%; }
#pricing .pricing-box .top h2 { float: left; padding-top: 15px;}
#pricing .pricing-box .top a { float: right; }
#pricing .pricing-box .bottom {width: 100%; float: left; padding-top: 20px;}
#pricing .pricing-box .bottom ul { list-style: none; padding: 0px; font-weight: 200; }
#pricing .pricing-box .bottom ul li { border-bottom: 1px solid #000; padding: 10px 0px;}
#pricing .pricing-box .bottom ul li em { float: right; margin-right: 10px;}
#pricing .pricing-box .bottom ul li span { display: block; max-width: 90%; }

#cadeau { padding: 0px 0px 80px 0px; overflow: hidden;}

#brand { padding: 0px 0px 80px 0px; overflow: hidden;}

#about { background-color: #333333; color: #e4e4e4; padding: 100px 0px 100px 0px; overflow: hidden;}

#contact { background-color: #333333; color: #e4e4e4; padding: 80px 0px 100px 0px; overflow: hidden;}

@media screen and (max-width: 768px) {
    
    body { font-size: 16px; line-height: 28px;}
    
    h1 { line-height: 1.1em; font-size: 25px; }
    h2 { font-size: 22px;}
    
    .btn { padding: 10px 20px; }
    
    .container-fluid { padding: 0px 20px; }
    
    header .logo img { width: 140px; }
    
    .menu-overlay ul { padding-top: 160px}
    .menu-overlay ul li a { padding: 7px 0px; display: block; font-size: 20px; }
    
    #intro h1 { padding-bottom: 20px;}
    
    .service-row img { margin-top: 40px; }
    
    #gallery ul li { width: 100%; }
    
    #gallery .container-fluid { padding: 0px; }
    
    #pricing .pricing-box { padding: 30px 10px;}
    #pricing .pricing-box .top h2 { font-size: 22px;}
    #pricing .pricing-box .top a { display: none;}
    
    #contact h2, #brand h2, #deel { padding-top: 30px}
    
}