@charset "utf-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

body {
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
margin-top: 59px;
}

a {
color: #000;
}

a:hover {
text-decoration: none;
color: #000;
}


/********** navbar *************/

.navbar-light .navbar-nav .nav-link {
    color:#000;
}

.navbar {
padding-left: 100px;
padding-right: 100px;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 1);
}

.navbar .active {
color: #ff0000;
}

/*********** end navbar *********/
.banner {
background-image: url("images/auto-poetsen.jpg");
background-size:cover;
min-height: 500px;
position: relative;
}

.banner .intro {
color: #fff;
font-size: 30px;
width: 500px;
  margin: 0;
  position: absolute;
  top: 50%;
  right: 250px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  line-height:50px;
}

.banner .intro span {
font-size: 60px;
}

.btn-primary {
    color: #fff;
    background-color: #b30000;
    border-color: #b30000;
}

.btn-primary:hover {
    color: #fff;
    background-color: #b30000;
    border-color: #b30000;
}

.btn-outline-primary {
    color: #fff;
    border-color: #ff0000;
	font-weight: 500;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #b30000;
    border-color: #b30000;
}

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #b30000;
    border-color: #b30000;
}

.marge {
padding: 75px 0px;
}

.margebottom {
padding: 0px 0px 75px 0px;
}

.grey {
background-color: #000;
}

.album .row .col-sm-3 {
margin: 0px;
padding: 0px;
}

.album img {
  opacity: 0.4;
}

.album img:hover {
opacity: inherit;
    -moz-transition: all 0.4s ease-out;  /* FF4+ */
    -o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.4s ease-out;  /* IE10? */
    transition: all 0.4s ease-out;  
}

.album {
background-color: #000;
}

h1 {
line-height: normal;
}

h1 span, h2 span, h3 span, h4 span, b span {
border-bottom: solid 3px #ff0000;
}

h1 {
margin-bottom: 40px;
font-weight:500;
}

.linkhover {
padding: 25px;
border: solid 1px #ff0000;
margin-bottom: 25px;
}

.linkhover img {
margin-bottom: 25px;
}

.linkhover:hover {
padding: 25px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 1);
border: solid 1px #ff0000;
}

.kadergrijs {
background-color: #f0f0f0;
border: solid 1px #ff0000;
padding: 25px;
overflow: auto;
}

video {
  width: 100%;
  max-height: 100%;
  margin-bottom: 25px;
}

iframe {
overflow:hidden;
}

.profielfoto {
margin-right: 15px;
}

.footer {
background-color: #000;
min-height: 500px;
color: #fff;
padding: 75px 0px;
font-size: 16px;
}

.footer b {
font-size: 20px;
}

.footer a {
color: #fff;
}



@media (max-width: 1730px) {  

.banner .intro {
color: #fff;
font-size: 35px;
width: 500px;
  margin: 0;
  position: absolute;
  top: 50%;
  right: 50px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.album img {
  opacity: 0.6;
}
}

@media (max-width: 1350px) {  

.banner {
background-image: url("images/poetsen-auto.jpg");
background-size:cover;
min-height: 500px;
position: relative;
}
}
 
 
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) { 
.navbar {
padding-left: 20px;
padding-right: 20px;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 1);
} 



.marge {
padding: 35px 0px;
}

.album img {
  opacity: 1.0;
}

.img-width {
width: 300px;
padding-left: 25px;
padding-bottom: 25px;
}

} 


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 768px) {  
.banner {
background-image: url("images/behandeling-auto.jpg");
background-size:cover;
min-height: 350px;
position: relative;
}

.banner .intro {
color: #fff;
font-size: 35px;
width: 65%;
padding: 3px 30px;
  margin: 0;
  position: absolute;
  top: 50%;
  right: 0px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.img-width {
width: 100%;
padding-left: 0px;
padding-bottom: 25px;
}

.profielfoto {
width: 90px;
height: 90px;
margin-right: 15px;
}

}


/* Small devices (landscape phones, 576px and up) */
@media (max-width: 476px) {  
.banner .intro {
color: #fff;
font-size: 35px;
width: 100%;
padding: 3px 30px;
  margin: 0;
  position: absolute;
  top: 50%;
  right: 0px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
}