/*!
 * Start Bootstrap - Agency Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    overflow-x: hidden;
    font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    color: rgba(117, 117, 117, 1);
}

a.navbar-brand {
    font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
    font-size: 20px;
    margin: 0px;
}

img.rounded-circle {
  padding: 3px;
  width: 40px;
  height: 35px;
}

.navbar-custom {
  background-color: #af7385;
}

.anchor{
  margin-top: -54px; /* height of nav, in this case 54px */
  display: block;
  height: 54px; /* height of nav, in this case 54px */
  visibility: hidden;
  position: relative;
}

.container_foto {
  background-color: rgba(57, 62, 93, 0.7);
  padding: 0;
  overflow: hidden;
  margin: 5px;
}

.foto_big {
  max-width: 350px;
  max-height: 350px;
}

.foto_small {
  max-width: 230px;
  max-height: 230px;
  margin:0px;
}


.container_foto article {
  padding: 5%;
  position: absolute;
  bottom: 0;
  z-index: 1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.container_foto img {
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transition: all 4s ease;
  -moz-transition: all 4s ease;
  -o-transition: all 4s ease;
  -ms-transition: all 4s ease;
  transition: all 4s ease;
  opacity: 0.6;
}

.tiles {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  width: 100%;
  height: 70px;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  transform: translate(0px, 70px);
  -webkit-transform: translate(0px, 70px);
  -moz-transform: translate(0px, 70px);
  -o-transform: translate(0px, 70px);
  -ms-transform: translate(0px, 70px);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/*hovers*/

.container_foto:hover {
  cursor: pointer;
}

.container_foto:hover img {
  opacity: 0.1;
  transform: scale(1.5);
}

.container_foto:hover article {
  transform: translate(2px, -69px);
  -webkit-transform: translate(2px, -69px);
  -moz-transform: translate(2px, -69px);
  -o-transform: translate(2px, -69px);
  -ms-transform: translate(2px, -69px);
}

.container_foto:hover .tiles {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  opacity: 1;
}

.masthead {
  height: 100vh;
  min-height: 500px;
  background-image: url('../img/achtergrond-voorkant.JPG');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.masthead-text {
    text-transform: none;
}

.masthead-mask {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
}

.timeline {
   position: relative;
   max-width: 1200px; /* Restrict the width on large screens */
   margin: 0 auto; /* Center the content */
   padding: 20px;
}

.timeline::after {
   content: '';
   position: absolute;
   width: 6px;
   background-color: white;
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -3px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   z-index: 1;
}

.timeline-container {
   position: relative;
   width: 50%;
}

.container-left {
   left: 0;
   padding-right: 120px;
}

.container-right {
   left: 50%;
   padding-left: 120px;
}

.timeline-content {
   padding: 20px;
   background-color: white;
   position: relative;
   border-radius: 6px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.timeline-container .timeline-content::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 100px;
   width: 0;
   z-index: 1;
   border: medium solid white;
   right: -100px;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent white;
}

.container-left .timeline-content::before {
   right: -10px;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent white;
}

.container-right .timeline-content::before {
   left: -10px;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
}

.timeline-image {
   width:200px;
   height:250px;
   background-size:cover;
   background-position:center;
   border:solid 5px #ffffff;
   border-radius:50px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   z-index: 2;
}
.timeline-image {
   position: absolute;
}
.container-left .timeline-image {
   right: 0;
   margin-right: -100px;
}
.container-right .timeline-image {
   left: 0;
   margin-left: -100px;
}

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.portfolio {
  column-count: 3;
  column-gap: 0px;
  width: 690px;
  padding: 0px;
  margin: 0px;
  display: block;
}

@media screen 
  and (min-width: 800px){ 
  .topic-section {
    height: 100vh;
  }

  .carousel-item {
    padding-left: 20%;
    padding-right: 20%;
  }
}

@media screen and (max-width: 767px) {
   /* Add styles to change the behaviour for screens smaller than 767px width */
  .timeline::after {
    left: 65px;
  }
  .timeline-container {
    width: 100%;
    padding-left: 100px;
    padding-right: 0px;
    margin-top: 30px;
  }
  .container-right {
    left: 0%;
  }

  .timeline-image {
    width:90px;
    height:90px;
  }

  .timeline-container:first-of-type {
    margin-top: 0px;
  }
  .timeline-container .timeline-image {
    left:-10px;
    top: 0px;
    margin-left: 0;
    margin-right: 0;
  }
  .container-left .timeline-content::before {
    left: -10px;
    right: auto;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  .timeline-container .timeline-content::before {
    top:40px;
  }

  .display-2 {
    font-size: 2.75rem;
    font-weight: 300;
    line-height: 1.0;
  }

  .display-4 {
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.0;
  }
  .portfolio {
    /*column-count: 2;*/
    column-gap: 0px;
    width: 100%;
    padding: 0px;
    margin: 0px;
  }

  .foto_big {
    width: 50vh;
  }

  .foto_small {
    width: 100%;
  }

  .portfolio h5{
    font-size:  2.2vh;
  }

  .carousel-item p{
    font-size:  2vh;
  }
}

.carousel{
  height: 100vh;
  margin-top: 20px;
}

.carousel-inner {
  height: 100%;
  flex-grow: 1;
}

.carousel-item{
  .transition(1s ease-in-out left);
}

.carousel-caption {
  color: #000000;
}

#mijnFoto {
  background-image: url('../img/Jose-Velthuis-Willems.jpeg');
}

#hetPraktijk {
  background-image: url('../img/praktijk.jpg');
}

#voorWieSection {
  background-color: #e0dfe1;
}

#therapieSection {
  background-color: #ffffff;
}

#overMijSection {
  min-height: 100vh;
  background-image: url('../img/achtergrond-voorkant.JPG');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
}

#reactiesSection {
  background-color: #e0dfe1;
}

#contactSection {
  background-color: #ffffff;
}

.custom-text p {
  padding-bottom: 5px!important;
}

#myFooter {
  background-color: #af7385;
}

#doelgroepModalHeader {
  background-image: url('../img/portfolio/mindful.jpg');
}

#stressModalHeader {
  background-image: url('../img/portfolio/balans.jpg');
}

#ademModalHeader {  
  background-image: url('../img/portfolio/ruimte.jpg');
}

#werkwijzeModalHeader {
  background-image: url('../img/portfolio/werkwijzeModal.jpg'); 
}

#bedrijvenModalHeader {
  background-image: url('../img/portfolio/bedrijven.jpg');
}

#vergoedingenModalHeader {
  background-image: url('../img/portfolio/vergoedingen.jpg');
}

#ervaringenModalHeader {
  background-image: url('../img/portfolio/ervaringen.png');
  background-position: bottom;
}

#logoModalHeader {
  background-image: url('../img/logo.png');
  background-position: center;
}

.modalHeader {
  min-height: 350px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.modalHeaderMask {
  background-color: rgba(0, 0, 0, 0.35);
  width: 100%;
  height: 100%;
  min-height: 350px;
}