/**
Custom CSS for BvW Boomverzorging - Tuinaanleg
Author: TwoRedDots
Date: 26-5-2019
Version: 1.0 
**/

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.navbar {
    padding-bottom: 0;
}
.navbar-light .navbar-nav .nav-link {
    color: #000;
    font-family: arial;
    font-weight: bold;
}
.navbar-light .navbar-nav .active > .nav-link {
    color: #ef7d18;
}
.navbar-light .navbar-nav .nav-link:hover {
    color: #999;
}
/** Contact Desktop **/
.contact-desk {
    padding-right: 1em;
}
.contact-desk a {
    margin-left: 0.5em;
}
.contact-desk i {
    font-size: 2em;
}
.contact-desk span {
    font-size: 1em;
    font-weight: bold;
}
.contact-desk span, .contact-desk .mailen {
    color: #ef7d18;
}
.contact-desk .fb {
    color: #628fea;
}
/** Contact Mob **/
.contact-mob a {
    margin-left: 0.5em;
}
.contact-mob i {
    font-size: 2em;
}
.contact-mob span {
    font-size: 1em;
}
.contact-mob span, .contact-mob .mailen {
    color: #ef7d18;
}
.contact-mob .fb {
    color: #628fea;
}
/** Call to action **/
/**
.slideout-1, .slideout-2, .slideout-3 {
	z-index: 500;
}
.slideout-1, .slideout-2, .slideout-3 {
    position: fixed;
    top: 300px;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background: #333;
}
.slideout-2 {
    top: 355px;
}
.slideout-3 {
    top: 410px;
}
.slide-tab {
	width: 65px;
	height: 55px;
	background: #333;
}
.slide-tab i {
	color: #ef7d18;
	font-size: 45px;
	line-height: 55px;
}
.text-slideout-1 {
    padding-left: 19px;
}
.text-slideout-2 {
    padding-left: 15px;
}
.text-slideout-3 {
    padding-left: 22px;
}
.slideout-3 .slide-tab i {
    color: #628fea;
}
.contact-mail:link, .contact-mail:visited, .contact-fb:link, .contact-fb:visited {
    color: #FFF;
    font-weight: bold;
    
}.contact-mail:hover, .contact-fb:hover {
    color: #CCC;
    font-weight: bold;
    text-decoration: none;
}
.slideout_inner-1, .slideout_inner-2, .slideout_inner-3 {
  position: fixed;
  top: 300px;
  left: -150px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
	color: #fff;
	background: #333;
	width: 150px;
	height: 55px;
}
.slideout_inner-2 {
  top: 355px;
}
.slideout_inner-3 {
  top: 410px;
}
.slideout_inner-1 p, .slideout_inner-2 a, .slideout_inner-3 a {
	line-height: 55px;
	padding-left: 15px;
	font-size: 0.9em;
	font-weight: bold;
}
.slideout-1:hover, .slideout-2:hover, .slideout-3:hover {
  left: 150px;
}
.slideout-1:hover .slideout_inner-1, .slideout-2:hover .slideout_inner-2, .slideout-3:hover .slideout_inner-3 {
  left: 0;
}
**/
/** Default top border radius images **/
.img-border-radius-top {
        border-radius: 0.25em 0 0 0;
}
/** Default top bottom border radius images **/
.img-border-radius-top-bottom {
        border-radius: 0.25em;
}
/** Default bottom borders images Green and Orange **/
.img-border-green {
    border-bottom: #93C01F solid 0.8em;
    border-radius: 0.25em;
}
.img-border-orange {
    border-bottom: #ef7d18 solid 0.8em;
    border-radius: 0.25em;
}
/** Carousel **/
.carousel-wrap {
    background-color: #93C01F;
    border-bottom: #EF7D18 0.3em solid;
}
#carousel {
    margin-top: 195px;
}
/*
Removes white gap between slides - change to base color of slide images
*/
.carousel {
  background:#007aeb;
}
/*
Forces image to be 100% width and not max width of 100%
*/
.carousel-item .img-fluid {
  width:100%;
}

/* 
anchors are inline so you need ot make them block to go full width
*/
.carousel-item a {
  display: block;
  width:100%;
}
.carousel-caption h2 {
    color: #FFF;
    text-shadow: 3px 3px 4px #000;
}
/** Animated flip cards **/
.btn-primary:hover,
.btn-primary:focus {
    background-color: #93C01F;
    border-color: #93C01F;
    box-shadow: none;
    outline: none;
}

.btn-primary {
    color: #fff;
    background-color: #93C01F;
    border-color: #93C01F;
    padding: 0.5em 0.6em;
}

.card {
    border: none;
    border-radius: 0.25em;
    background: #ffffff;
}

.image-flip:hover .backside,
.image-flip.hover .backside {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: 0.25em;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    border-bottom: #93C01F solid 0.9em;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.frontside,
.backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

.frontside .card,
.backside .card {
    min-height: 312px;
}

.backside .card a {
    font-size: 18px;
    color: #007b5e !important;
}

.frontside .card .card-title,
.backside .card .card-title {
    color: #93C01F !important;
    text-shadow: 1px 1px 0px #000;
}
.card-body a i.fa {
     font-size: 2em;
}

.card-body {
    padding: 0;
}
.card-body img {
    border-bottom: #ef7d18 solid 0.8em;
    border-radius: 0.25em;
}
.btn-wrap {
    position: absolute;
    bottom: 1em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)

}
/*.card-btn {
    position: absolute;
    bottom: 1em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}*/
.card-btn-info {
    text-align: center;
}
/** Haardhout **/
#haardhout {
    background-image: url("../images/haardhout/haardhout.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    padding: 10em 0 5em 0;
}
.haardhout-text {
    background-color: #FFF;
    border-radius: 0.5em 0.5em 0.25em 0.25em;
    border-bottom: #93C01F solid 0.9em;
}
.haardhout-text h2 {
    background-color: #ef7d18;
    padding: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
}
.haardhout-text p {
    margin-left: 1em;
    margin-right: 1em;
}
.haardhout-text p:first-of-type {
    margin-top: 2.5em;
}
.haardhout-text p:last-of-type {
    margin-bottom: 2.5em;
}
/** Projecten **/
#projecten {
    background-color: #93C01F;
    height: 10em;
}
.gallery-block.cards-gallery .card{transition: 0.4s easy;}
.gallery-block.cards-gallery a:hover{text-decoration: none;}
/** fb-video **/
#fb-video {
    background-image: url("../images/fb-video/boom-kruin.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    padding: 2em 0 2em 0;
}
.fb-video-balk{
    background-color: #EF7D18;
    margin-bottom: 2em;
    padding: 2em;
}
/** Footer **/
.footer-top, footer {
    background-color: #ef7d18;
    color: #FFF;
}
footer {
    background-color: #333;
    padding-top: 1em;
}
.footer-top a, .footer-top a:visited, footer a, footer a:visited {
    color: #FFF;
}
.footer-top a:hover, footer a:hover {
    color: #333;
}
.copyright a:hover {
    color: #777;
}

/** responsive media queries **/
@media screen and (min-width: 576px) {
	.gallery-block .transform-on-hover:hover {
	    transform: translateY(-2px) scale(1.02);
	}
}
@media screen and (min-width: 992px) {
    .card-body .card-text {
        font-size: 0.9em;
    }
    .contact-mob {
        display: none;
    }
}
@media screen and (min-width: 1200px) {
    .card-body .card-text {
        font-size: 1em;
    }
}
@media screen and (max-width: 992px) {
        .contact-desk {
        display: none;
        }
}

@media screen and (max-width: 576px) {
        .carousel-caption h2 {
        display: none;
    }
}