@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
html, body{
  height: 100%;
  width:100%;
  font-family: 'Raleway', sans-serif;
  color: #222;
  scroll-behavior: smooth;    /* <----- THE SECRET ---- */
}

/*navbar*/
    .navbar{
      padding: 1rem;
      padding-left: 2rem;
    }
    .navbar.nav li{
      padding-right: .5rem;
    }
    .nav-link{
      font-size: 1.1em !important;
    }
    .navbar-brand{
      font-family: 'Raleway', sans-serif;
    }

@media (min-width: 576px) {
.container,
.container-fluid{
  padding-left: 2rem;
  padding-right: 2rem;
}
}
@media (max-width: 424.98px) {
.container,
.container-fluid{
  padding-left: 1rem;
  padding-right: 1rem;
}
}


/*fonts*/

    h1{
    font-size:1.7rem;
    font-weight: lighter;
    margin:0;
    }

    h2{
    font-size:1.5rem;
    /* font-weight: normal; */
    padding-bottom: 1rem;
    text-transform: uppercase;
    }

    .missie h2{
      color: tomato;
      font-weight: lighter;
    text-transform: none;
    }

    .card h2{
      font-weight: 600;
      letter-spacing: 2px;
      font-size: 0.9rem;
    }

@media (min-width: 576px) {
    .card h2{
      font-weight: 600;
      letter-spacing: 3px;
      font-size: 1.4rem;
    }
}
@media (max-width: 424.98px) {
    .projecten .card-img-overlay h3,
    .skills .card-img-overlay h3{
      font-size: 1rem;
    }
    .projecten .card-img-overlay p,
    .skills .card-img-overlay p{
      font-size: 0.7rem;
    }
}

.titel-wit h2{
  font-weight: 600;
  letter-spacing: 4px;
  text-shadow: 3px 3px 8px black;
  font-size:1.7rem;
}
  .titel-rood h2{
    font-weight: 600;
    letter-spacing: 4px;
    /* text-shadow: 3px 3px 8px black; */
    font-size:1.7rem;
    color:tomato;
  }
@media (min-width: 576px) {
    .titel-wit h2{
      font-weight: 600;
      letter-spacing: 7px;
      text-shadow: 3px 3px 8px black;
      font-size:2.4rem;
    }
    .titel-rood h2{
      font-weight: 600;
      letter-spacing: 7px;
      /* text-shadow: 3px 3px 8px black; */
      font-size:2.4rem;
      color:tomato;
    }
  }


    h3{
    font-size: 1.3rem;
    }

    .factoren h3{
      color:tomato;
    }

    h4{
      color:lightgray;
    }
    h5{
      color:lightgray;
      font-size: 1rem;
      margin: 0;
      font-weight: lighter;
    }

    a{
      color:gray;
    }

    a:hover{
      color:tomato;
      text-decoration: none;
    }

    .figure-caption{
      padding-top: 0.7rem;
      font-size: 0.8rem;
      padding-bottom: 1rem;
    }

    .projecten .card-img-overlay{
      background-color: rgba(0,0,0,0.5);
    }

    @media (max-width: 575.98px) {
      .projecten .card-img-overlay,
      .skills .card-img-overlay{
      padding: 0.3rem;
      }
    }

    .titel-wit, .titel-rood{
  position: relative;
  text-align: center;
  color: white;
}
    .centered {
  margin-top:300px;
}

  @media (max-width: 575.98px) {
    .fotomobiel {
  padding-left: 0rem;
  padding-right: 0rem;
    }
  }

/*hover projecten*/
    .hovereffect {
    overflow:hidden;
    /* align-self: flex-end; */
    }
    .card-img-overlay .hide-on-hover {
      opacity: 1;
    }
    .card:hover .card-img-overlay .hide-on-hover {
      opacity: 0;
    }
    .hovereffect a{
      opacity: 0;
      color: rgba(255,255,255, 1);
    }
    .card:hover .hovereffect a{
      opacity: 1;
    }
    .card .hovereffect a {
      pointer-events: none;
    }
    .card:hover .hovereffect a.enable-after-hover {
      pointer-events: auto;
    }
    .hovereffect a {
      transition: opacity .4s ease-in-out;
    }
    .card img, .card-img-overlay .hide-on-hover, .hovereffect .overlay  {
    transition:all .4s ease-in-out;
    }
    .card:hover img {
    transform:scale(1.05);
    }
    .card {
      overflow: hidden;
    }
    .card:hover .hovereffect .overlay {
    opacity:1;
    background-color:rgba(255,99,71,0.6);
    }


/*--- Bootstrap Padding Fix --*/
    div.padding > [class*="col-"] {
        padding: 0.2rem;
    }

/*about me*/
    .Eveline-portret{
      object-fit: cover;
      max-width: 100%;
    }
    .img-scale-height{
      object-fit: cover;
      max-height: 300px;
    }
    .img-scale-down{
      object-fit: scale-down;
      max-height: 300px;
    }
    .img-scale-down-400{
      object-fit: scale-down;
      max-height: 400px;
    }
    .img-scale-down-large{
      object-fit: scale-down;
      max-height: 700px;
    }

    .d-block{
      object-fit: cover;
      max-height: 500px;
    }

    .d-block-large{
      object-fit: cover;
      max-height: 700px;
    }
/*carousel*/
    .carousel-caption {
      background-color: rgba(255,99,71,0.9);
      position: sticky;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 10px 40px 30px 40px;
      text-align: left;
    }

/*footer*/
    .social a{
      font-size: 2.5em;
      padding: 1rem;
      color: gray;
    }
    .fa-facebook:hover,
    .fa-instagram:hover,
    .fa-linkedin:hover{
      color: tomato;
    }
    footer {
      background-color: dark;
      color:dark;
      position: relative;
    }

    footer p{
      margin-bottom:0rem;
      text-align: right;
      color: #222;
    }

    footer .col-12{
      padding-right: .5rem;
      padding-top: 1.5rem;
    }

    hr.light{
      border-top: 1px solid:d5d5d5;
      width: 75%;
    }

.parallax{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;

}

/*--- Fixed Background Image --*/
    /* figure {
      position: relative;
      width: 100%;
      height: 60%;
      margin: 0!important;
    }
    .fixed-wrap {
      clip: rect(0, auto, auto, 0);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #fixed {
      background-image: url('img/mac.png');
      position: fixed;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center;
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      will-change: transform;
    } */


/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/