@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap');

body {
  font-family: 'Lato', sans-serif;
  background:#DCDCDC;
}
a {
    color:#212529;
}
.bg-orange {
  background-color:rgb(255, 98, 0);
}
.bg-gradient {
  background: -moz-linear-gradient(90deg, rgba(92,119,171,1) 0%, rgba(55,137,179,1) 35%, rgba(57,154,199,1) 100%);
  background: linear-gradient(90deg, rgba(92,119,171,1) 0%, rgba(55,137,179,1) 35%, rgba(57,154,199,1) 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c77ab",endColorstr="#399ac7",GradientType=1);
}
.bg-white-transparent {
  background:rgba(255, 255, 255, 0.6);
  border:none;
}
.bg-light-blue {
  background:rgba(163,200,225,1);
}
.bg-dark-blue {
  background:rgba(37,80,114,1);
}
.btn-primary {
  background-color: rgba(92,119,171,1);
  letter-spacing: 0.2em;
  font-size: 0.8em;
  text-transform:uppercase;
  font-weight:bold;
  border:none;
  border-radius:0;
  padding: 0.5rem 1rem;
}
.btn-primary:hover {
  color:rgba(92,119,171,1);
  background-color:#fff;
}
#logo {
  background:url(../img/logo-wit.png) center center no-repeat;
  background-size:65%;
  text-indent: -9999px;                 /* sends the text off-screen */
  white-space: nowrap;            /* because only the first line is indented */
  width:190px;
  height:100px;
  margin-top:-25px;
}
.header {
    position:relative;
    width:100%;
    height:650px;
    margin-bottom:-55px;
}
#menu {
    background-color:rgba(51, 51, 51, 0.7);
    z-index:5;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.contact {
    background: -moz-linear-gradient(90deg, rgba(92,119,171,0.8) 0%, rgba(55,137,179,0.8) 35%, rgba(57,154,199,0.8) 100%);
    background: linear-gradient(90deg, rgba(92,119,171,0.8) 0%, rgba(55,137,179,0.8) 35%, rgba(57,154,199,0.8) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c77ab",endColorstr="#399ac7",GradientType=1);
    background-color:rgba(51, 51, 51, 0.7) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position:relative;
}
.prijslijst {
  background-image: url(../img/45-degree-fabric-light.png);
}
#nieuws {
  background-image: url(../img/crossword.png);
}
h2 {
  letter-spacing:0.04em;
}
.text-shadow {
  text-shadow:#333 0.1em 0.1em 0.2em;
}
.nav-item a {
  color:#fff;
  letter-spacing:0.2em;
  font-size:0.8em;
}

.nav-pills .nav-link {
  border-radius:0;
    padding: 0.5rem 1rem !important;
}
.nav-pills .nav-link.active, .nav-link:hover, .nav-link:focus {
  background-color:rgba(92,119,171,1);
  color:#fff;
}
.icon-col:hover > .rounded-circle {
  animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
.object-fit-cover {
    object-fit:cover;
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.navbar-dark .navbar-toggler {
    background:rgba(37,80,114,1);
}
#google-maps-view {
    width:100%;
}
.eigenschappen {
    margin-top:-55px;
    z-index:1;
}
.eigenschap-icon {
    width:130px;
    height:130px;
}
.contact-icon {
    width:50px;
    height:50px;
}
.teamlid-name {
    background-color:rgba(255, 255, 255, 0.75);
}
.fb-icon {
  background:url(../img/fb.svg) center center no-repeat;
  background-size:contain;
  width:30px;
  height:30px;
}
.social-button {
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
  opacity:0.95;
}
.social-button-container {
  z-index:6;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(1px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}

@media (max-width:992px) {
    #logo {
        height: 100px;
    }

    .header {
        height: auto;
        padding-top: 175px;
        padding-bottom: 105px;
    }

    .header h1 {
        font-size: 1.4em;
    }

    .btn-primary {
        color: rgba(92, 119, 171, 1);
        background-color: #fff;
    }

    .btn-primary:hover {
        background-color: rgba(92, 119, 171, 1);
        color: #fff;
    }
}