@import 'reset.css';

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 62.5%;
  font-family: 'Soleil';
  /* scroll-behavior: smooth; */
  position: relative;
  z-index: 0;
  background: #fff;
}

.mobile-nav {
  position: fixed;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 999;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.mobile-nav-hide {
  animation: fadeOut 500ms ease-in-out forwards;
}

.mobile-nav-show {
  animation: fadeIn 500ms ease-in-out forwards;
}

.mobile-nav .arrowDown {
  width: 1rem;
  margin-bottom: -.5rem;
  margin-left: 1rem;
  display: inline-block;
}

.mobile-nav .close {
  position: absolute;
  top: 8rem;
  right: 120px; /* 5%; */
  width: auto;
}

.mobile-nav .spacer {
  height: 9.4rem
}

.mobile-nav .social-links {
  margin: 3rem auto;
  width: 5.5rem;
}

.mobile-nav .social-links a {
  text-decoration: none;
}

.mobile-nav .footer {
  width: 100%;
}

.mobile-nav svg,
.mobile-nav img {
  height: 2rem;
}

.mobile-nav .facebook {
  padding-right: 2rem;
}

.mobile-nav .icon {
  width: 2rem;
  height: auto;
  display: block;
  margin: 0 auto;
}

.mobile-nav .links {
  text-align: center;
}

.mobile-nav .links a,
.mobile-nav .links a:link,
.mobile-nav .links a:visited {
  padding: 2rem 0;
  font-size: 1.8rem;
  font-weight: 300;
  text-decoration: none;
  color: #86A1AF;
  letter-spacing: .2rem;
  display: block;
}

.mobile-nav .subnav {
  width: 80%;
  margin: 0 10%;
  height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.mobile-nav .subnav a,
.mobile-nav .subnav a:link,
.mobile-nav .subnav a:visited {
  font-size: 1.4rem;
  padding: 0;
  margin: 1rem;
  opacity: .64;
  display: inline-block;
}


.messageSent {
  width: 100%;
  text-align: center;
  background: #FAFAFA;
  color: #86A1AF;
  letter-spacing: .1rem;
  padding: 10rem 0;
  position: fixed;
  z-index: 99;
  animation: messageSlideIn 500ms ease-in-out,
    messageSlideOut 500ms ease-in-out 3s forwards;
}

@keyframes messageSlideIn {
  from {
    top: -26rem;
  }

  to {
    top: 0;
  }
}

@keyframes messageSlideOut {
  from {
    top: 0;
  }

  to {
    top: -26rem;
  }
}

.messageSent .title {
  font-size: 1.8rem;
  font-weight: 400;
}

.messageSent .subtitle {
  font-size: 1.6rem;
  font-weight: 300;
  margin-top: 2rem;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

.wrapper {
  width: calc(100% - 240px);
  margin: 0 auto;
}

.transition {
  position: fixed;
  top: 0;
  left: 100%;
  height: 100%;
  width: 120%;
  z-index: 999;
  display: flex;
  animation: pageTransition 500ms ease-in-out forwards;
}

.transition .slant {
  width: 20%;
}

.in-transition {
  position: fixed;
  top: 0;
  width: 120%;
  height: 100%;
  z-index: 999;
  display: flex;
  animation: inPageTransition 500ms ease-in-out forwards;
}

.in-transition .slant {
  transform: scale(-1);
  width: 20%;
}

@keyframes pageTransition {
  0% {
    left: 100%
  }

  100% {
    left: -20%;
  }
}

@keyframes inPageTransition {
  0% {
    left: 0
  }

  100% {
    left: -120%;
  }
}

.transition .fill {
  height: 100%;
  width: 100%;
  background: #FAFAFA;
  display: flex;
}

.in-transition .fill {
  height: 100%;
  width: 100%;
  background: #FAFAFA;
  display: flex;
}

.transition .fill img,
.in-transition .fill img {
  width: 5rem;
  align-self: center;
}

main {
  position: relative;
  z-index: 1;
  background: #ffffff;
}

.pre-header {
  padding: 12rem 0 0;
}

.pre-header .wrapper {
  display: flex;
  justify-content: space-between;
}

.pre-header p svg {
  width: 8rem;
  margin-right: 1rem;
  animation: fadeIn 250ms ease-in-out forwards;
}

.pre-header p {
  font-size: 2.5rem;
  width: 60%;
  color: #7C7C7C;
  font-weight: lighter;
  letter-spacing: .2rem;
  line-height: 3rem;
  font-weight: 300;
  display: inline-block;
  animation: fadeIn 500ms ease-in-out forwards;
}

.menu-icon {
  width: 26px;
  height: 18px;
  display: none;
}

.intro-images {
  margin-top: 12rem;
  background: #FAFAFA;
  display: flex;
  z-index: 5;
}

.intro-image-1 {
  width: 57%;
  align-self: center;
  animation: IntroImage1In 500ms ease-in-out;
}

@keyframes IntroImage1In {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.intro-image-2 {
  width: 35%;
  margin-left: -3%;
  height: auto;
  align-self: center;
  animation: IntroImage2In 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes IntroImage2In {
  from {
    margin-left: 0;
    opacity: 0;
  }

  to {
    margin-left: -3%;
    opacity: 1;
  }
}

.home-header {
  background: #DEEFE5;
  padding: 7rem 0 2.4rem;
  z-index: 10;
  position: relative;
}

.home-nav-slide-up {
  animation: homeNavSlideUp 250ms ease-in-out forwards;
}

@keyframes homeNavSlideUp {
  from {
    top: 0;
  }

  to {
    top: -17.8rem;
  }
}

.home-nav-slide-down {
  animation: homeNavSlideDown 100ms ease-in-out forwards;
}

.home-nav-force-show {
  animation-duration: 1ms;
}

@keyframes homeNavSlideDown {
  from {
    top: -17.8rem;
  }

  to {
    top: 0;
  }
}

.home-header .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-header svg {
  width: 8rem;
  align-self: center;
}

.home-header .menu-icon {
  width: 2.6rem;
  display: none;
}

.home-header nav {
  font-size: 1.4rem;
  letter-spacing: .4rem;
}

.home-header nav a,
.home-header nav a:link,
.home-header nav a:visited {
  color: #86A1AF;
  text-decoration: none;
  margin: 0 2rem;
}

.hello {
  background: #DEEFE5;
  z-index: 10;
  position: relative;
  padding-top: 12rem;
}

.hello .flex {
  margin-top: 12rem;
}

.hello .flex .intro-text {
  width: 25%;
  margin-right: 7.5%;
}

.hello .flex .intro-text-fadeIn {
  animation: fadeInIntroText 500ms ease-in-out forwards;
}

@keyframes fadeInIntroText {
  from {
    margin-top: 5rem;
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

.hello .flex .spacer {
  width: 32.5%;
}

.hello .flex img {
  align-self: center;
  width: 35%;
  position: relative;
  z-index: 5;
}

.hello .flex .img-show {
  animation: fadeIn 500ms ease-in-out forwards;
}

.hello h1 {
  font-size: 12rem;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  letter-spacing: 1rem;
  position: relative;
  z-index: 10;
}

.hello .title-fadeUp {
  animation: helloFadeUp 500ms ease-in-out forwards;
}

@keyframes helloFadeUp {
  from {
    opacity: 0;
    padding-top: 5rem;
  }

  to {
    opacity: 1;
    margin-top: 0;
  }
}

.hello .intro-text {
  align-self: center;
  color: #86A1AF;
}

.hello .intro-text h2 {
  letter-spacing: .4rem;
  font-size: 2rem;
}

.hello .intro-text p {
  font-size: 1.4rem;
  letter-spacing: .1rem;
  line-height: 2rem;
  margin-top: 4rem;
  margin-bottom: 5.2rem;
  font-weight: 300;
}

.hello .intro-text a,
.hello .intro-text a:link,
.hello .intro-text a:visited {
  color: #7C7C7C;
  background: #fff;
  font-size: 1.4rem;
  padding: 1.2rem 5rem;
  text-decoration: none;
  letter-spacing: 2px;
  -webkit-transition: color 250ms ease-out, background 250ms ease-out;
  -moz-transition: color 250ms ease-out, background 250ms ease-out;
  -o-transition: color 250ms ease-out, background 250ms ease-out;
  transition: color 250ms ease-out, background 250ms ease-out;
}

.hello .intro-text a:hover,
.hello .intro-text a:active {
  background: #86A1AF;
  color: #fff;
}

.hello .hello-image-2 {
  width: 40%;
  margin-left: 60%;
  margin-top: -14rem;
  z-index: 10;
  position: relative;
}

.collection {
  /* padding-top: 12rem; */
  padding-bottom: 8rem;
  background: #ffffff;
}

.collection .wrapper {
  max-width: 150rem;
}

.collection h1 {
  font-size: 12rem;
  text-transform: uppercase;
  color: #DEDEDE;
  text-align: center;
  letter-spacing: 1rem;

  padding-bottom: 12rem;
  padding-top: 12rem;
}

.collections-title-fadeUp {
  animation: collections-fadeUp 500ms ease-in-out forwards;
}

@keyframes collections-fadeUp {
  from {
    opacity: 0;
    padding-top: 17rem;
  }

  to {
    opacity: 1;
    padding-top: 12rem;
  }
}

.collection .links {
  width: 60%;
  margin: 0 auto;
  text-align: center;
  line-height: 4rem;
  margin-bottom: 14rem;
}

.collections-links-fadeIn {
  opacity: 1;
  animation: fadeIn 500ms ease-in-out forwards;
}

.collection .links a,
.collection .links a:link,
.collection .links a:visited {
  color: #86A1AF;
  text-decoration: none;
  font-size: 1.6rem;
  letter-spacing: .2rem;
  font-weight: 300;
  margin: 1rem;
}

.collectionGrid {
  display: flex;
  flex-wrap: wrap;
}

.outlet-stamp {
  position: absolute;
  background-color: #707070;
  color: #FFFFFF;
  font-family: 'Soleil';
  font-weight: 400;
  font-size: 1.5rem;
  padding: 1.2rem 1.6rem;
  text-transform: uppercase;
  right: 0;
  top: 0;
  letter-spacing: 0.1em;
}

.collection-article-fadeUp {
  animation: collectionArticleFadeUp 500ms ease-in-out forwards;
}

@keyframes collectionArticleFadeUp {
  from {
    opacity: 0;
    transform: translateY(30%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.collectionGrid article {
  width: 45%;
}

.collectionGrid article img {
  width: 100%;
}

.collectionGrid.outlet article .naam,
.collectionGrid article .title {
  color: #86A1AF;
  font-size: 2rem;
  margin: 2rem 0 1rem;
  font-weight: 400;
  letter-spacing: 1px;
}

.collectionGrid:not(.outlet) article .info {
  margin-left: 4rem;
}

.collectionGrid article .description {
  color: #86A1AF;
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 2.7rem;
  letter-spacing: .1px;
  font-weight: 300;
  width: 100%;
}

.collectionGrid article a.btn:not(.link-overlay),
.collectionGrid article a.btn:not(.link-overlay):link,
.collectionGrid article a.btn:not(.link-overlay):visited {
  padding: 1.2rem 5rem;
  background: #EFEFEF;
  color: #AFAFAF;
  text-decoration: none;
  font-size: 1.4rem;
  -webkit-transition: color 250ms ease-out, background 250ms ease-out;
  -moz-transition: color 250ms ease-out, background 250ms ease-out;
  -o-transition: color 250ms ease-out, background 250ms ease-out;
  transition: color 250ms ease-out, background 250ms ease-out;
}

.collectionGrid article a.btn:not(.link-overlay):hover {
  background: #FDE1E0;
  color: #CC9594;
}

.collectionGrid article .info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
}

.collectionGrid .grid-block-1,
.collectionGrid .grid-block-3,
.collectionGrid .grid-block-5 {
  margin-right: 10%;
  margin-top: 8rem;
}

.collectionGrid .grid-block-2 {
  width: 35%;
  margin-left: 10%;
  margin-top: 27rem;
}

.collectionGrid .grid-block-3 {
  width: 35%;
  margin-left: 10%;
  margin-top: -2rem;
  margin-top: 8rem;
}

.collectionGrid .grid-block-4 {
  width: 35%;
  margin-top: 20rem;
}

.collectionGrid .grid-block-6 {
  width: 35%;
  margin-left: 10%;
  margin-top: 30rem;
}

.big-image {
  width: 100%;
  height: 43rem;
  background-size: cover;
}

.getintouch {
  background: #FAFAFA;
  color: #86A1AF;
  padding: 15rem 0 13rem;
}

.getintouch .flex {
  display: flex;
}

.getintouch-animation {
  animation: getInTouchFadeUp 500ms ease-in-out forwards;
}

@keyframes getInTouchFadeUp {
  from {
    /* margin-top: 5rem; */
    transform: translateY(5rem);
    opacity: 0;
  }

  to {
    /* margin-top: 0; */
    transform: none;
    opacity: 1;
  }
}

.getintouch .h1-fake {
  font-size: 4rem;
  display: block;
  width: 100%;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: .4rem;
  margin-bottom: 100px;
}

.getintouch .leftside {
  width: 50%;
}

.getintouch .openingsuren {
  max-width: 470px;
  padding-right: 50px;
}

.getintouch .leftside h2 {
    font-size: 1.8rem;
    letter-spacing: .2rem;
    margin-bottom: 2rem;
}

.getintouch .leftside ul {
  display: block;
  list-style-type: '- ';
  padding: 0;
  padding-left: 1rem;
  margin-bottom: 20px;
}

.getintouch .leftside strong {
  font-weight: 600;
}

.getintouch .leftside i {
  font-style: italic;
}

.getintouch .leftside li,
.getintouch .leftside p {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: .1rem;
  margin-bottom: 20px;
}

.getintouch .leftside li,
.getintouch .leftside li p {
  margin: 0;
}

.getintouch .rightside {
  width: 50%;
}

.getintouch .rightside .info {
  display: flex;
}

.getintouch .rightside .info .openingsuren {
  width: 47%;
  margin-right: 2%;
}

.getintouch .rightside .info .contact {
  width: 50%;
}

.getintouch .rightside .info h2 {
  font-size: 1.8rem;
  letter-spacing: .2rem;
  margin-bottom: 2rem;
}

.getintouch .rightside .info p {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: .1rem;
}

.getintouch form {
  margin-top: 1rem;
}

.getintouch form input:-webkit-autofill,
.getintouch form input:-webkit-autofill:hover,
.getintouch form input:-webkit-autofill:focus,
.getintouch form input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #FAFAFA inset !important;
}

footer .left-side .form-container input[type="text"],
footer .left-side .form-container input[type="email"] {
  font-family: 'Soleil';
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #CC9594;
  color: #CC9594;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  font-weight: 300;
  width: 100%;
  margin-top: 3rem;
  padding: 1rem 0rem;
  letter-spacing: .1rem;
  box-sizing: border-box;
  outline: none;
}

footer .left-side .form-container input:-webkit-autofill,
footer .left-side .form-container input:-webkit-autofill:hover,
footer .left-side .form-container input:-webkit-autofill:focus,
footer .left-side .form-container input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #FDE1E0 inset !important;
}

.getintouch form .caption,
.getintouch form .caption a,
footer .left-side .form-container .caption,
footer .left-side .form-container .caption a {
  color:#8e8e8e;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: .05rem;
  margin-top: 10px;
}

.error-message,
.success-message {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: .1rem;
  margin-top: 20px;
  font-style: italic;
}

.success-message {
  color: #CC9594;
}

.grecaptcha-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.getintouch form input[type="text"],
.getintouch form input[type="email"] {
  font-family: 'Soleil';
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #DEDEDE;
  color: #86A1AF;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  font-weight: 300;
  width: 48%;
  margin-top: 3rem;
  padding: 1rem 0rem;
  letter-spacing: .1rem;
  box-sizing: border-box;
}

.getintouch .custom-select-container {
  width: 48%;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
}

.getintouch .custom-select {
  font-family: 'Soleil';
  background: url('/assets/img/selectArrow.svg') no-repeat right 14px center;
  border-radius: 0;
  border: 0px;
  border-bottom: 1px solid #DEDEDE;
  color: #86A1AF;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  font-weight: 300;
  margin-top: 3rem;
  padding: 1rem 0rem;
  letter-spacing: .1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.getintouch .custom-select-options {
  background: #EFEFEF;
  border: .1rem solid #DEDEDE;
  font-size: 1.4rem;
  padding: .7rem;
  box-sizing: border-box;
}

.getintouch .custom-select-options-container {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 999;
}

.getintouch .custom-select-option {
  padding: .4rem;
  transition: background 500ms ease-out;
  margin: .3rem 0;
}

.getintouch .custom-select-option:hover {
  background: #DEDEDE;

}

.getintouch #naam,
.getintouch #mail,
.getintouch #wens {
  width: 48%;
  margin-right: 2%;
}

.getintouch form input[type="text"]::placeholder,
.getintouch form input[type="email"]::placeholder,
.getintouch form textarea::placeholder {
  color: #86A1AF;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  font-weight: 300;
  outline: none;
}

.getintouch form input[type="text"]:focus,
.getintouch form input[type="email"]:focus,
.getintouch form select:focus,
.getintouch form textarea:focus {
  outline: none;
}

.getintouch form textarea {
  font-family: 'Soleil';
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #DEDEDE;
  color: #86A1AF;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  font-weight: 300;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 1rem;
  margin-top: 3rem;
  resize: none;
  padding: 1rem 0rem;
  box-sizing: border-box;
}

fieldset.gdpr {
  margin-top: 3rem;
}

.getintouch input[type="checkbox"] {
  border: .1rem solid #C9C9C9;
  background: #FAFAFA;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
}

.getintouch input[type="checkbox"]:checked {
  outline: none;
  background: #C9C9C9;
}

.getintouch input[type="checkbox"]:not(:checked) {
  outline: none;
  background: #fAFAFA;
  outline: none;
}

.getintouch input[type="checkbox"] + label {
  color: #C9C9C9;
  font-weight: 300;
  font-size: 1.4rem;
  margin-left: 1.2rem;
  display: inline-block;
  vertical-align: middle;
}

footer .left-side .form-container input[type="submit"] {
  border: none;
  display: block;
  background: #E5AEAD;
  color: #fff;
  padding: 1.2rem 5rem;
  font-family: 'Soleil';
  letter-spacing: .2rem;
  font-weight: 300;
  font-size: 1.2rem;
  margin-top: 4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.getintouch form input[type="submit"] {
  border: none;
  background: #86A1AF;
  color: #fff;
  padding: 1.2rem 5rem;
  font-family: 'Soleil';
  letter-spacing: .2rem;
  font-weight: 300;
  font-size: 1.2rem;
  margin-top: 5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

footer {
  background: #FDE1E0;
  position: relative;
}

footer .flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

footer .menu-item a {
  display: block;
  font-family: 'Soleil';
  font-size: 2rem;
  letter-spacing: 0.15em;
  line-height: 1.7;
  color: #CC9594;
  text-decoration: none;
}

footer .social-icons a {
  display: inline-block;
  margin-left: 1.4rem;
}

footer .inner {
  padding-top: 14rem;
  width: 100%;
}

footer img {
  display: block;
}

footer .logo {
  width: 13.8rem;
}

footer .left-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


footer .left-side .form-container {
  font-family: 'Soleil';
  font-size: 2rem;
  letter-spacing: 0.15em;
  line-height: 1.5;
  color: #CC9594;
  max-width: 42rem;
  margin-top: 4rem;
  margin-bottom: 20rem;
}

footer .right-side {
  width: 50%;
  padding-bottom: 20rem;
}

footer .right-side .collections {
  margin-top: 5rem;
  columns: 3;
}

footer .right-side .collections .row {
  width: 33.3%;
  box-sizing: border-box;
  padding-right: 2rem;
}

footer .right-side .collections a,
footer .right-side .collections a:link,
footer .right-side .collections a:visited {
  font-size: 1.6rem;
  line-height: 2.2rem;
  display: block;
  margin-bottom: .7rem;
  color: #CC9594;
  text-decoration: none;
  font-weight: 300;
  letter-spacing: .2rem;
  -webkit-transition: color 100ms ease-out;
  -moz-transition: color 100ms ease-out;
  -o-transition: color 100ms ease-out;
  transition: color 100ms ease-out;
}

footer .right-side .collections a:hover,
footer .right-side .collections a:active {
  color: #86A1AF;
}

footer .right-side .secondary-nav {
  display: flex;
}

footer .right-side .secondary-nav .with-social-links {
  display: flex;
  justify-content: space-between;
  width: 33.3%;
}

footer .right-side .secondary-nav a.link,
footer .right-side .secondary-nav a.link:link,
footer .right-side .secondary-nav a.link:visited {
  font-size: 1.6rem;
  margin-bottom: 2rem;
  color: #CC9594;
  text-decoration: none;
  font-weight: 400;
  letter-spacing: .2rem;
  width: 33.3%;
  -webkit-transition: color 100ms ease-out;
  -moz-transition: color 100ms ease-out;
  -o-transition: color 100ms ease-out;
  transition: color 100ms ease-out;
}

footer .right-side .secondary-nav a.link:hover,
footer .right-side .secondary-nav a.link:active {
  color: #86A1AF;
}
footer .social-media-links {
  position: relative;
}

footer .social-media-links svg {
  height: 2.2rem;
}

footer .social-media-links svg path {
  fill: #E5AEAD;
  -webkit-transition: fill 100ms ease-out;
  -moz-transition: fill 100ms ease-out;
  -o-transition: fill 100ms ease-out;
  transition: fill 100ms ease-out;
}

footer .social-media-links svg:hover path {
  fill: #86A1AF;
}

footer .social-media-links a,
footer .social-media-links a:link,
footer .social-media-links a:visited {
  display: inline-block;
}

footer .facebook {
  margin-right: 2rem;
}

footer .instagram {
  margin-right: 1.8rem;
}

footer .pinterest {
  margin-right: 1.4rem;
}

footer .lower {
  background: #E5AEAD;
  font-size: 1.2rem;
  color: white;
  font-weight: 300;
  padding: 4rem 0;
  /* margin-top: 12rem; */
}

footer .lower .flex {
  display: flex;
  justify-content: space-between;
}

footer .lower a,
footer .lower a:link,
footer .lower a:visited {
  color: #fff;
  text-decoration: none;
  padding-bottom: 0;
  border-bottom: .1rem solid transparent;
  -webkit-transition: padding 100ms ease-out;
  -moz-transition: padding 100ms ease-out;
  -o-transition: padding 100ms ease-out;
  transition: padding 100ms ease-out;
}

footer .lower a:hover,
footer .lower a:active {
  border-bottom: .1rem solid #fff;
  padding-bottom: .3rem;
}

footer .lower .maister-link {
  /* margin-left: 11.1rem; */ /* When privacy policy is visible */
  margin-left: 3.6rem; /* When privacy policy is invisible */
}

footer .lower .maister-logo {
  width: 1.4rem;
}

.repeated-header {
  background: #fff;
}

.repeated-nav-slide-up {
  animation: repeatedNavSlideUp 250ms ease-in-out forwards;
}

@keyframes repeatedNavSlideUp {
  from {
    transform: none;
  }

  to {
    transform: translateY(-18.4rem)
  }
}

.repeated-nav-slide-down {
  animation: repeatedNavSlideDown 100ms ease-in-out forwards;
}

@keyframes repeatedNavSlideDown {
  from {
    transform: translateY(-18.4rem);
  }

  to {
    transform: none;
  }
}

.repeated-header .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-for-repeated-header {
  height: 16.7rem;
  width: 100%;
}

.repeated-header {
  padding: 7rem 0 2.4rem;
  width: 100%;
}

.repeated-header nav {
  font-size: 1.4rem;
  letter-spacing: .4rem;
  text-align: center;
}

.repeated-header nav a,
.repeated-header nav a:link,
.repeated-header nav a:visited {
  color: #86A1AF;
  text-decoration: none;
  margin: 0 2rem;
  cursor: pointer;
}


.repeated-header .btns,
.home-header .btns,
.mobile-nav .btns {
  white-space: nowrap;
}

.mobile-nav .btns {
  width: 30rem;
  margin: 5rem auto 0;
}


.repeated-header .btns a,
.home-header .btns a,
.mobile-nav .btns a {
  padding: 1rem 2.7rem;
  background: #86A1AF;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  color: #FAFAFA !important;
  transition: background 500ms ease-out;
}

.repeated-header .btns a:hover,
.home-header .btns a:hover {
  background: #6F8895;
}

.repeated-header .btns a:first-child,
.home-header .btns a:first-child {
  margin-right: 1.6rem;
}

.mobile-nav .btns a:first-child {
  margin-bottom: 2rem;
}

.repeated-header nav a.active,
.repeated-header nav a.active:link,
.repeated-header nav a.active:visited,
.home-header nav a.active,
.home-header nav a.active:link,
.home-header nav a.active:visited,
.mobile-nav .links a.active,
.mobile-nav .links a.active:link,
.mobile-nav .links a.active:visited {
  font-weight: bold;
  cursor: pointer;
}

.repeated-header nav a svg,
.home-header nav a svg {
  width: .8rem;
}

.repeated-header nav a svg.up,
.home-header nav a svg.up,
.mobile-nav a svg.up {
  animation: rotateUp 500ms ease-in-out forwards;
}

.repeated-header nav a svg.down,
.home-header nav a svg.down,
.mobile-nav a svg.down {
  animation: rotateDown 500ms ease-in-out forwards;
}

@keyframes rotateUp {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-180deg);
  }
}

@keyframes rotateDown {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0);
  }
}

.repeated-header .logo,
.home-header .logo {
  width: 24.3rem;
}

.repeated-header .logo svg,
.home-header .logo svg {
  width: 8rem;
}

.repeated-header svg * {
  fill: #86A1AF;
}

.repeated-header .menu-icon {
  width: 2.6rem;
  margin-left: 4.1rem;
  display: none;
}

.repeated-header .subnav,
.home-header .subnav {
  text-align: center;
  height: 0;
  overflow: hidden;
  width: 70%;
  margin: 0 15% 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.repeated-header .subnav a,
.repeated-header .subnav a:link,
.repeated-header .subnav a:visited,
.home-header .subnav a,
.home-header .subnav a:link,
.home-header .subnav a:visited {
  font-size: 1.4rem;
  word-break: keep-all;
  color: #86A1AF;
  opacity: 0.64;
  text-decoration: none;
  letter-spacing: 1px;
  margin: 0 1rem;
  line-height: 2rem;
  -webkit-transition: opacity 250ms ease-out;
  -moz-transition: opacity 250ms ease-out;
  -o-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
}

.repeated-header .subnav a:hover,
.repeated-header .subnav a:active,
.home-header .subnav a:hover,
.home-header .subnav a:active {
  opacity: 1;
}

.repeated-header .hidesubnav,
.home-header .hidesubnav {
  animation: fadeOutandHide 250ms ease-in forwards;
}

.repeated-header .showsubnav,
.home-header .showsubnav {
  animation: showAndFadeIn 250ms ease-in forwards;
}

.mobile-nav .hidesubnav {
  animation: subnavHeightHide 500ms ease-in forwards;
}

.mobile-nav .showsubnav {
  animation: subnavHeightShow 500ms ease-in forwards;
}

@keyframes subnavHeightShow {
  0% {
    height: 0;
    opacity: 0;
  }
  50% {
    height: auto;
    opacity: 0;
  }
  100% {
    height: auto;
    opacity: 1;
  }
}

@keyframes subnavHeightHide {
  0% {
    opacity: 1;
    height: auto;
  }
  50% {
    opacity: 0;
    height: auto;
  }
  100% {
    height: 0;
    opacity: 0;
  }
}

@keyframes fadeOutandHide {
  0% {
    opacity: 1;
    margin-bottom: 4rem;
    margin-top: 1.2rem;
    height: 4rem;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    height: 0;
    margin-bottom: 0;
    transform: translateY(-2rem);
  }
}

@keyframes showAndFadeIn {
  0% {
    opacity: 0;
    height: 0;
    margin-bottom: 0;
    transform: translateY(-2rem);
  }

  100% {
    opacity: 1;
    height: 8rem;
    margin-bottom: 4rem;
    margin-top: 1.2rem;
    transform: translateY(0);
  }
}

.wie {
  background: #FAFAFA;
}

.wie .first .image-container {
  width: 50%;
  align-self: center;
}

.wie .first img {
  width: 100%;
  animation: fadeIn 500ms ease-in-out forwards;
}

.wie .first {
  display: flex;
  color: #86A1AF;
}

.wie .first h1 {
  font-size: 5.5rem;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: .4rem;
}

.wie .first p {
  font-size: 1.4rem;
  line-height: 2.3rem;
  letter-spacing: .1rem;
  font-weight: 300;
  margin-top: 5rem;
}

.wie .first .text {
  width: 25%;
  margin: 0 auto;
  align-self: center;
  animation: wieTekstFade 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes wieTekstFade {
  from {
    opacity: 0;
    transform: translateX(10%);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.wie .second .flex {
  display: flex;
  flex-wrap: wrap;
}

.wie .second .text {
  width: 33.32%;
  margin-left: 8.33%;
  align-self: center;
  margin-top: -10rem;
  padding: 10rem 0;
}

.wie .second .text-show {
  animation: wieSecondTekstFade 500ms ease-in-out forwards;
}

@keyframes wieSecondTekstFade {
  from {
    opacity: 0;
    transform: translateY(5rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.wie .second .image1 {
  width: 41.65%;
  margin-left: 16.66%;
  align-self: center;
}

.wie .second p {
  font-size: 1.4rem;
  line-height: 2.3rem;
  letter-spacing: .1rem;
  font-weight: 300;
  color: #86A1AF;
  margin: 2.5rem 0;
}

.wie .image3 {
  width: 66.64%;
  align-self: center;
  margin-top: -10rem;
  z-index: 1;
}

.wat {
  background: #DEEFE5;
  color: #86A1AF;
  padding: 15rem 0;
}

.wat h1 {
  font-size: 5.5rem;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: .4rem;
  margin-left: 5%;
  margin-bottom: 2.5rem;
}

.wat p {
  font-size: 1.4rem;
  line-height: 2.3rem;
  letter-spacing: .1rem;
  font-weight: 300;
  margin: 2.5rem 0;
}

.wat .left-side {
  margin-right: 10%;
}

.wat .text {
  display: flex;
  margin-top: 5rem;
  width: 90%;
  margin: 0 auto;
}

.wat-fadeUp {
  animation: watFadeUp 500ms ease-in-out forwards;
}

@keyframes watFadeUp {
  from {
    opacity: 0;
    transform: translateY(5rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.over-collections {
  height: 43rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.over-collections h1 {
  font-size: 5.5rem;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  margin-top: 8rem;
}

.over-collections .title-fade {
  animation: overCollectionsTitleFade 500ms ease-in-out forwards;
}

@keyframes overCollectionsTitleFade {
  from {
    transform: translateY(5rem);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.collectie-collecties .title-fade {
  animation: collectionsTitleFade 500ms ease-in-out forwards;
}

@keyframes collectionsTitleFade {
  from {
    transform: translateY(5rem);
    /* margin-top: 5rem; */
    opacity: 0;
  }

  to {
    /* margin-top: 0; */
    transform: none;
    opacity: 1;
  }
}

.over-collections a,
.over-collections a:link,
.over-collections a:visited {
  background: #EFEFEF;
  padding: 1.2rem 5rem;
  color: #7C7C7C;
  text-decoration: none;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  margin-top: 5rem;
  -webkit-transition: color 250ms ease-out, background 250ms ease-out;
  -moz-transition: color 250ms ease-out, background 250ms ease-out;
  -o-transition: color 250ms ease-out, background 250ms ease-out;
  transition: color 250ms ease-out, background 250ms ease-out;
}

.over-collections a:hover,
.over-collections a:active {
  color: #EFEFEF;
  background: #7C7C7C;
}

.over-collections .linkFadeIn,
.collectie-collecties .linkFadeIn {
  animation: fadeIn 500ms ease-in-out forwards;
}

.collectie .intro-image {
  width: 100%;
  height: 65rem;
  overflow: hidden;
  position: relative;
}

.collectie .intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collectie .intro-image .title {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.collectie .intro-image .title h1 {
  font-size: 5.2rem;
  color: #fff;
  text-transform: uppercase;
  background: rgba(253, 225, 224, .56);
  padding: 1.7rem 2.1rem;
  letter-spacing: .4rem;
  animation: fadeIn 500ms ease-in-out forwards;
  text-align: center;
}

.collectie-info {
  padding: 12rem 0;
  background: #ffffff;
}

.fadeUpCollectieInfo {
  animation: fadeUpCollectionInfo 500ms ease-in-out forwards;
}

@keyframes fadeUpCollectionInfo {
  from {
    opacity: 0;
    transform: translateY(5rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.collectie-info .flex {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.collectie-info .inner {
  padding: 0 5.35%;
}

.collectie-info .logo {
  max-width: 35rem;
  width: auto;
  align-self: flex-start;
}

.collectie-info .logo img {
  max-width: 100%;
  max-height: 10rem;
  width: auto;
}

.collectie-info .logo p {
  margin-top: 2rem;
  font-size: 1.4rem;
  color: #7C7C7C;
  font-weight: 300;
  letter-spacing: .1rem;
  line-height: 1.8rem;
  width: 80%;
}

.collectie-info .text {
  font-size: 1.4rem;
  color: #7C7C7C;
  width: 33.32%;
  font-weight: 300;
  letter-spacing: .1rem;
  line-height: 2rem;
}

.collectie-info .text p {
  margin-bottom: 4rem;
}

.collectie-picture-grid {
/*  padding-bottom: 15rem;*/
  padding-left: 2.35%;
  display: flex;
  flex-wrap: wrap;
  background: #ffffff;
}

.collectie-picture-grid-show {
  animation: pictureGridShow 500ms ease-in-out forwards;
}

@keyframes pictureGridShow {
  from {
    opacity: 0;
    margin-top: 5rem;
  }

  to {
    opacity: 1;
    margin-top: 0;
  }
}

.collectie-picture-grid article {
  width: 41.65%;
  margin: 1rem 3% 8rem 3%;
  transition: all 500ms ease-in-out;
}

.collectie-picture-grid article:nth-child(2){
  margin-top: 21rem;
}

.collectie-picture-grid article .naam {
  color: #86A1AF;
  font-size: 1.8rem;
  letter-spacing: .2rem;
}

.collectie-picture-grid article img {
  width: 100%;
}

.collectie-picture-grid article .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4rem;
}

.collectie-picture-grid article .btn:not(.link-overlay) {
  cursor: pointer;
  font-size: 1.4rem;
  padding: 1.2rem 5rem;
  background: #EFEFEF;
  color: #7C7C7C;
  display: inline-block;
  -webkit-transition: color 250ms ease-out, background 250ms ease-out;
  -moz-transition: color 250ms ease-out, background 250ms ease-out;
  -o-transition: color 250ms ease-out, background 250ms ease-out;
  transition: color 250ms ease-out, background 250ms ease-out;
}

.collectie-picture-grid article a:hover + div .btn:not(.link-overlay),
.collectie-picture-grid article .btn:not(.link-overlay):hover {
  background: #FDE1E0;
  color: #CC9594;
}

.collectie-collecties {
  max-width: 100%;
  height: 43rem;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.collectie-collecties img {
  min-height: 100%;
  /* width: 100%; */
  vertical-align: bottom;
  align-self: center;
}

.collectie-collecties .text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.collectie-collecties .text .h1-fake {
  font-size: 5.5rem;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

.collectie-collecties .text a,
.collectie-collecties .text a:link,
.collectie-collecties .text a:visited {
  background: #EFEFEF;
  padding: 1.2rem 5rem;
  color: #7C7C7C;
  text-decoration: none;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  margin-top: 5rem;
  -webkit-transition: color 250ms ease-out, background 250ms ease-out;
  -moz-transition: color 250ms ease-out, background 250ms ease-out;
  -o-transition: color 250ms ease-out, background 250ms ease-out;
  transition: color 250ms ease-out, background 250ms ease-out;
}

.collectie-collecties .text a:hover,
.collectie-collecties .text a:active {
  color: #EFEFEF;
  background: #7C7C7C;
}

.relative {
  position: relative;
}

a.link-overlay {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.overlay {
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #DEDEDE;
  z-index: 9999999999999;
  letter-spacing: 0.1em;
}

body.outlet .overlay {
  background-color: #F4F1F1;
}

body.outlet .overlay p.h1-fake {
  color: #575756;
}

body.outlet .overlay p.caption {
  color: #7C7C7C;
}

body.outlet .overlay a,
body.outlet .overlay a:link,
body.outlet .overlay a:visited {
  background-color: #86A1AF;
  color: #fff;
}

.overlay .wrapper.flex {
  display: flex;
  align-items: center;
  min-height: 100%;

}

.overlay .wrapper.flex .flex {
  width: 100%;
}

.overlay .left-side,
.overlay .right-side {
  width: 50%;
}

.overlay p.h1-fake {
  font-size: 8.6rem;
  color: #fff;
  text-transform: uppercase;
  margin-top: 5rem;
  margin-right: 5rem;
  font-weight: 400;
}

.overlay p.caption {
  font-family: 'Soleil';
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 300;
  margin: 5px 0px;
}

.overlay p.caption strong {
  font-weight: 400;
}

.overlay .designer,
.overlay .description {
  font-size: 1.6rem;
  color: #7C7C7C;
  letter-spacing: 0.1rem;
  line-height: 1.75;
  font-weight: 300;
  margin-left: 16.66%;
  margin-top: 6rem;
  margin-right: 16.66%;
  margin-left: 0;
  max-width: 57rem;
}

.overlay .description p {
  margin-bottom: 2rem;
}

.overlay .description .original-price {
  font-weight: 400;
  font-size: 2.6rem;
  color:#86A1AF;
  line-height: 1;
  position: relative;
  display: inline-block;
  margin-bottom: 0;
}

.overlay .description .original-price:after {
  content: "\A";
  height: 1px;
  background-color: #86A1AF;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
}

.overlay .description .outlet-price {
  font-weight: 300;
  font-size: 3.2rem;
  line-height: 1.2;
  color: #575756;
}

.overlay .description .price-change {
  margin-bottom: 3rem;
}

.overlay .designer {
  margin-top: 3rem;
}

.overlay .designer span {
  font-weight: 500;
}

.overlay .like {
  font-size: 3.2rem;
  font-weight: 300;
  color: #86A1AF;
  text-transform: uppercase;
  margin-top: 9rem;
  letter-spacing: 0.1em;
}

body.outlet .overlay .interesse {
  color: #575756;
}

.overlay .interesse {
  font-size: 2.4rem;
  color: #fff;
  letter-spacing: .2rem;
  margin-top: 2rem;
  font-weight: 400;
  margin-bottom: 3.3rem;
}

.overlay a,
.overlay a:link,
.overlay a:visited {
  font-size: 1.4rem;
  padding: 1.5rem 2.8rem;
  background: #EFEFEF;
  color: #7C7C7C;
  font-weight: 300;
  text-decoration: none;
  letter-spacing: .1rem;
  margin-bottom: 5rem;
  display: inline-block;
  -webkit-transition: color 250ms ease-out, background 250ms ease-out;
  -moz-transition: color 250ms ease-out, background 250ms ease-out;
  -o-transition: color 250ms ease-out, background 250ms ease-out;
  transition: color 250ms ease-out, background 250ms ease-out;
}

.overlay a:hover,
.overlay a:active {
  color: #EFEFEF;
  background: #7C7C7C;
}

.overlay .close {
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  top: 5rem;
  right: 5%;
  cursor: pointer;
}

.overlay .slider .thumbnails {
  overflow: hidden;
  margin-top: 2rem;
  align-items: center;
  position: relative;
  height: 7.5rem;
}

.overlay .slider .thumbnails .inner {
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  flex: auto;
  flex-grow: 0;
  flex-shrink: 0;
}

.overlay .slider .thumbnails .container {
  width: 10rem;
  margin-right: .5rem;
  overflow: hidden;
  height: 7.5rem;
}

.overlay .slider .thumbnails .arrow-left {
  background: rgba(255, 255, 255, .45);
  width: 3rem;
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
}

.overlay .slider .thumbnails .arrow-left img {
  width: 1rem;
}

.overlay .slider .thumbnails .arrow-right {
  background: rgba(255, 255, 255, .45);
  width: 3rem;
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
}

.overlay .slider .thumbnails .arrow-right img {
  width: 1rem;
}

.overlay .slider .thumbnails img {
  width: 100%;
}

.overlay .slider .caption {
  color: #86A1AF;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: .2rem;
  background: #EFEFEF;
  padding: 5rem 3rem;
  display: none;
  line-height: 2rem;
}

.overlay .slider .show-caption {
  display: block;
  animation: fadeIn 500ms ease-in-out forwards;
}

.hidden-overlay {
  display: none;
}

.show-overlay {
  display: block;
  animation: fadeIn 500ms forwards;
}

.hide-overlay {
  animation: fadeOut 500ms forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.overlay .slider .viewer {
  position: relative;
  padding-bottom: 70%;
  overflow: hidden;
}

.overlay .slider .viewer img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.overlay .hiddenImageInViewer {
  display: none;
}

.overlay .visibleImageInViewer {
  animation: fadeIn 500ms forwards;
}

.pagination {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rem;
}

.pagination .prev {
  width: 20%;
  text-align: right;
}

.pagination .next {
  width: 20%;
}

.pagination .next,
.pagination .prev {
  border-bottom: .1rem solid #86A1AF;
  padding-bottom: 2rem;
}

/* .pagination .line {
  width: 10%;
  border-bottom: .1rem solid #86A1AF;
} */

.pagination a,
.pagination a:link,
.pagination a:visited {
  color: #86A1AF;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  text-decoration: none;
  font-weight: 300;
  padding: .5rem 0 0;
  -webkit-transition: padding 250ms ease-in-out;
    -moz-transition: padding 250ms ease-in-out;
    -o-transition: padding 250ms ease-in-out;
    transition: padding 250ms ease-in-out;
}

.pagination .prev a {
  transform: translateX(50%);
  display: inline-block;
  width: 100%;
  text-align: center;
}

.pagination .next a {
  transform: translateX(-50%);
  display: inline-block;
  width: 100%;
  text-align: center;
}

.pagination .next svg {
  width: .8rem;
  padding-left: 1rem;
  display: inline-block;
  -webkit-transition: transform 100ms ease-in-out;
    -moz-transition: transform 100ms ease-in-out;
    -o-transition: transform 100ms ease-in-out;
    transition: transform 100ms ease-in-out;
}

.pagination .prev svg {
  padding-right: 1rem;
  width: .8rem;
  display: inline-block;
  -webkit-transition: transform 100ms ease-in-out;
    -moz-transition: transform 100ms ease-in-out;
    -o-transition: transform 100ms ease-in-out;
    transition: transform 100ms ease-in-out;
}

.pagination .next a:hover svg {
  transform: translateX(1rem);
}

.pagination .prev a:hover svg {
  transform: translateX(-1rem);
}

.pop-up {
  padding: 6rem;
  background: #E5AEAD;
  font-family: 'Soleil';
  width: 40%;
  position: fixed;
  top: 10%;
  right: 0;
  z-index: 9999;
  overflow-y: scroll;
  max-height: 90%;
}

.pop-up .close {
  position: relative;
  height: 1.7rem;
  cursor: pointer;
}

.pop-up .close img {
  position: absolute;
  right: 0;
}

.pop-up .inner {
  margin: 7rem;
}

.pop-up h1 {
  font-size: 2.2rem;
  line-height: 3.2rem;
  letter-spacing: 0.256rem;
  color: white;
}

.pop-up .tekst {
  font-size: 1.6rem;
  letter-spacing: 0.16rem;
  font-weight: 300;
  line-height: 2.6rem;
  margin-top: 4rem;
  color: white;
}

.pop-up .btn {
  color: #7C7C7C;
  background: white;
  padding: 1.5rem 3rem;
  display: inline-block;
  margin-top: 6rem;
  cursor: pointer;
}

.pop-up .btn p {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.16rem;
}

.hide-pop-up {
  animation: fadeOut 500ms forwards;
}

input#captcha {
  display: none;
}


.projecten-container {
  padding: 12rem 0 0;
}

header + .projecten-container {
  padding-top: 0;
}

.projecten-container .items-wrapper {
  padding: 11rem 0;
}

.projecten-container .items-wrapper:first-child {
  padding-top: 0;
}

.projecten-container .flex.align-middle {
  flex-wrap: wrap;
  align-items: center;
}

.projecten-container .project-item {
  padding: 0 0 3rem 0;
}

.projecten-container .project-item figcaption {
  display: block;
  font-family: 'Soleil';
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 2.3;
  color: #7C7C7C;
}

.projecten-container .project-item figure {
  position: relative;
}

.projecten-container .project-item figure .overlay-arrow {
  width: 0px;
  height: 0px;
  background-color: #ffffff;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: width 0.3s ease, height 0.3s ease;
}

.projecten-container .project-item figure .overlay-arrow svg {
  transform: translate(-43px, -43px);
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: block;
  transition: transform 0.3s ease 0.15s;
}

.projecten-container .items-wrapper:nth-child(4n-2){
  background-color: #DEEFE5;
}

.projecten-container .items-wrapper:nth-child(4n){
  background-color: #F4F1F1;
}

/* HOVER EFFECT */

@media (hover: hover){
  .projecten-container .project-item a:hover + div .overlay-arrow {
    width: 43px;
    height: 43px;
  }

  .projecten-container .project-item a:hover + div .overlay-arrow svg {
    transform: translate(0,0);
  }
}

@media (hover: none){
  .projecten-container .project-item a + div .overlay-arrow {
    width: 43px;
    height: 43px;
  }

  .projecten-container .project-item a + div .overlay-arrow svg {
    transform: translate(0,0);
  }
}

/* GRID ALIGNMENT */

.projecten-container .project-1 {
  width: 30%;
  margin-right: -5%;
  overflow: visible;
  z-index: 1;
  position: relative;
}

.projecten-container .project-2 {
  width: 75%;
  z-index: 0;
}

.projecten-container .project-3 {
  width: 50%;
}

.projecten-container .project-4 {
  width: 42%;
  margin-left: 8%;
}


/* PROJECT DETAIL */

.project.collectie .intro-image .title h1 {
  font-size: 7rem;
  letter-spacing: 0.1em;
  padding: 1.7rem 2.1rem;
}

.project.collectie .intro-image {
  height: 65rem;
}

.project.collectie .intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-picture-grid .wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.project-picture-grid-show {
  animation: pictureGridShow 500ms ease-in-out forwards;
}

@keyframes pictureGridShow {
  from {
    opacity: 0;
    margin-top: 5rem;
  }

  to {
    opacity: 1;
    margin-top: 0;
  }
}

.project-picture-grid .pictures-wrapper {
  padding: 0 0 14rem 0;
}

.project-picture-grid .pictures-wrapper.green-bg {
  background-color: #DEEFE5;
  margin-bottom: 14rem;
}

.project-picture-grid .pictures-wrapper.green-bg:last-child {
  margin-bottom: 0;
}

.project-picture-grid .picture-1 {
  width: calc(50% - 10px);
  margin-right: 20px;
}

.project-picture-grid .picture-1:last-child {
  margin-left: auto;
  margin-right: 0;
}

.project-picture-grid .picture-2 {
  width: calc(50% - 10px);
  margin-top: 50%;
}

.project-picture-grid .picture-3 {
  width: 37.5%;
  margin-left: calc(17.5% - 10px);
  margin-top: -6rem;
}

.project-picture-grid .picture-4 {
  width: calc(67% - 10px);
  margin-left: auto;
}

.project-picture-grid .picture-5 {
  width: 37.5%;
  margin-left: 0;
  margin-top: -6rem;
}


.project-picture-grid .picture-6 {
  width: calc(50% - 10px);
  margin-left: auto;
}

.project-picture-grid article .btn.link-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.project-picture-grid article .btn.link-overlay span {
  cursor: pointer;
  font-size: 1.4rem;
  padding: 1.2rem 5rem;
  background: #EFEFEF;
  color: #7C7C7C;
  display: inline-block;
  opacity: 0;
  -webkit-transition: opacity 250ms ease-out;
  -moz-transition: opacity 250ms ease-out;
  -o-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
}

.project-picture-grid article a:hover + div .btn.link-overlay span,
.project-picture-grid article .btn.link-overlay:hover span {
  opacity: 1;
}

@media only screen and (max-width: 1800px) {

  .repeated-header .cta-btn,
  .home-header .cta-btn {
    display: block;
  }

  .repeated-header .btns a
  .home-header .btns a {
    font-size: 1.2rem;
  }

  .repeated-header .btns a:first-child,
  .home-header .btns a:first-child {
    margin-right: 0;
    margin-bottom: 0;
  }

  .repeated-header .logo,
  .home-header .logo {
    width: 24.3rem;
  }

}

@media only screen and (max-width: 1400px) {
  .repeated-header .btns a {
    padding: 1rem 1.7rem;
  }

  .home-header {
    padding: 5.3rem 0;
  }

  .home-header .spacer,
  .repeated-header .spacer {
    display: none;
  }

  .menu-icon {
    display: block;
  }

  .home-header .menu-icon,
  .repeated-header .menu-icon {
    display: block;
  }

  .repeated-header .btns,
  .home-header .btns {
    display: none;
  }

  .repeated-header .logo,
  .home-header .logo {
    width: 6.7rem;
  }

  .repeated-header .logo svg,
  .home-header .logo svg {
    width: 6.7rem;
  }

  .repeated-header nav,
  .home-header nav {
    display: none;
  }
}

@media only screen and (max-width: 1300px) {
  footer .inner {
    padding-top: 6rem;
  }

  footer .right-side {
    width: 70%;
    padding-bottom: 6rem;
  }

  footer .left-side .form-container {
    margin-bottom: 12rem;
  }
}

@media only screen and (max-width: 1100px) {

  .wrapper {
    width: 90%;
  }

  .mobile-nav .close {
    right: 5%;
  }

  .pre-header p {
    width: 70%;
  }

  .wie .first .text {
    width: 45%;
    margin-left: 5%;
  }

  .wie .first .image-container {
    width: 40%;
  }

  .wie .first p {
    margin-top: 2rem;
  }

  .wie .second .text {
    width: 50%;
    margin: 0;
    padding: 0;
  }

  .wie .second .image1 {
    width: 45%;
    margin: 0;
    margin-left: 5%;
  }

  .wie .image3 {
    margin-top: -5rem;
  }

  .collectie-info .text {
    width: 50%;
  }

  .pop-up {
    width: 50%;
  }

  footer .right-side {
    width: 90%;
  }

  .projecten-container {
    padding-top: 0;
  }
}

@media only screen and (max-width: 1000px) {

  .wie .first .text {
    width: 50%;
  }

  .getintouch .h1-fake {
    width: 100%;
  }

  .getintouch .flex {
    display: block;
  }

  .getintouch .leftside,
  .getintouch .rightside {
    width: 100%;
    margin-top: 10rem;
  }

  .collection h1 {
    margin-top: 8rem;
  }

  .collectie-info .text {
    width: 60%;
  }

  .collectie-info .logo {
    max-width: 25rem;
  }

  .overlay .right-side {
    width: 45%;
  }

  .overlay .close {
    right: 3%;
  }

}

@media only screen and (max-width: 850px) {

  .hello .hello-image-2 {
    display: none;
  }

  .hello .flex .intro-text {
    width: 58%;
  }

  .hello .flex .spacer {
    display: none;
  }

  .hello {
    padding-bottom: 10rem;
  }

  .pre-header p {
    width: 80%;
  }

  .collection h1 {
    font-size: 8rem;
  }

  .collectionGrid {
    display: block;
  }

  .collectionGrid:not(.outlet) article .info {
    margin-left: 0;
  }

  .collectionGrid .grid-block-1,
  .collectionGrid .grid-block-2,
  .collectionGrid .grid-block-3,
  .collectionGrid .grid-block-4,
  .collectionGrid .grid-block-5,
  .collectionGrid .grid-block-6 {
    width: 80%;
    margin: 5rem auto;
  }


  .wie .first .text {
    padding: 10rem 0;
    width: 45%;
  }

  .wie .first .image-container {
    margin-left: 5%;
  }

  .wie .image3 {
    margin-top: -2.5rem;
  }

  .wat {
    padding: 10rem 0;
  }

  .wat .text {
    display: block;
  }

  .wat .left-side {
    margin-right: 0;
  }

  .collectie-picture-grid {
    display: block;
    padding-left: 0;
    height: auto !important;
  }

  .collectie-picture-grid article {
    width: 95.3%;
    padding-left: 2.35%;
    padding-right: 2.35%;
    margin: 0 auto 5rem;
    position: static !important;
  }

  .collectie-picture-grid article:nth-child(2){
    margin-top: 0rem;
  }

  .collectie-collecties {
    height: 43rem;
    background-size: cover;
  }

  .overlay .flex {
    flex-direction: column-reverse;
  }

  .overlay .left-side,
  .overlay .right-side {
    width: 100%;
  }

  .overlay .slider {
    margin-top: 5rem;
  }

  .overlay .description {
    margin-right: 0;
  }

  .overlay .like {
    margin-top: 7rem;
  }

  .overlay a,
  .overlay a:link,
  .overlay a:visited {
    margin-bottom: 7.5rem;
  }

  .overlay .close {
    top: 3rem;
    right: 30px;
  }
}

@media only screen and (max-width: 700px) {

  .repeated-header nav a,
  .repeated-header nav a:link,
  .repeated-header nav a:visited,
  .home-header nav a,
  .home-header nav a:link,
  .home-header nav a:visited  {
    margin: 0 1.6rem;
  }

  .repeated-header .subnav,
  .home-header .subnav {
    width: 90%;
    margin: 0 5% 4rem;
  }

  .intro-image-1 {
    width: 62%;
  }

  .big-image {
    height: 33rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .collection {
    padding-bottom: 12rem;
  }

  .wie .first {
    display: block;
  }

  .wie .first .text {
    width: 90%;
  }

  .wie .first .image-container {
    margin: 0;
    width: 100%;
    max-height: 80vh;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }

  .wie .first .text {
    padding: 5rem 0;
  }

  .wie .image3 {
    display: none;
  }

  .wie .second {
    padding-bottom: 5rem;
  }

  .getintouch .rightside .info {
    display: block;
  }

  .getintouch .rightside .info .openingsuren {
    margin: 0;
    width: 100%;
  }

  .getintouch .rightside .info .contact {
    margin-top: 2rem;
    width: 100%;
  }

  .getintouch .rightside {
    margin-top: 5rem;
  }

  .collectie-info .logo {
    max-width: 20rem;
  }

  footer .right-side {
    width: 80%;
  }

  .overlay .h1-fake {
    font-size: 7rem;
  }

  .overlay .like {
    font-size: 4.5rem;
  }

  .overlay .interesse {
    font-size: 2rem;
  }

  .overlay .close {
    width: 2rem;
    height: 2rem;
  }

  .pagination .next,
  .pagination .prev {
    width: 25%;
  }

  .pop-up {
    padding: 3rem;
  }

  .pop-up .inner {
    margin: 2rem;
  }
}

@media only screen and (max-width: 700px) {
  footer .left-side .icon {
    width: 2.6rem;
  }

  footer .left-side .form-container {
    margin-bottom: 6rem;
  }

  footer .right-side {
    width: 100%;
    padding-bottom: 2rem;
  }

  footer .right-side .social-icons {
    margin-top: 6rem;
  }

  footer .social-icons a {
    margin-left: 0.7rem;
    margin-right: 0.7rem;
  }

  footer .right-side .secondary-nav {
    display: block;
  }

  footer .right-side .collections {
    display: block;
  }

  footer .right-side .secondary-nav a.link,
  footer .right-side .secondary-nav a.link:link,
  footer .right-side .secondary-nav a.link:visited {
    display: block;
    width: 100%;
  }

  footer .right-side .secondary-nav .with-social-links {
    display: block;
    width: 100%;
  }

  footer .social-media-links {
    margin-top: 5rem;
  }

  footer .right-side .collections {
    display: none;
  }

}

@media only screen and (max-width: 600px) {
  .wrapper {
    width: calc(100% - 60px);
  }

  .pre-header{
    padding-top: 8rem;
  }

  .hello .flex img {
    display: none;
  }

  .hello .flex .intro-text {
    width: 100%;
    margin-right: 0;
  }

  .hello h1 {
    text-align: left;
    font-size: 8rem;
  }

  .hello .flex {
    margin-top: 5rem;
  }

  .hello {
    padding-top: 5rem;
  }

  .intro-images {
    margin-top: 8rem;
  }

  .collection h1 {
    font-size: 6rem;
    margin-bottom: 8rem;
  }

  .collection .links {
    margin-bottom: 10rem;
  }

  .collection .links {
    width: 90%;
  }

  .home-header nav {
    display: none;
  }

  .intro-image-1 {
    width: 100%;
  }

  .intro-image-2 {
    display: none;
  }

  .collectionGrid .grid-block-1,
  .collectionGrid .grid-block-2,
  .collectionGrid .grid-block-3,
  .collectionGrid .grid-block-4,
  .collectionGrid .grid-block-5,
  .collectionGrid .grid-block-6 {
    width: 100%;
  }

  .repeated-header {
    padding: 5.5rem 0;
  }

  .repeated-header nav {
    margin-top: 2rem;
    display: none;
    margin: 5.5rem 0 3.5rem;
  }

  .repeated-header .subnav,
  .home-header .subnav {
    display: none;
    height: 0;
    margin: 0 auto;
  }

  .collectie-info .flex {
    display: block;
  }

  .collectie-info .text {
    width: 100%;
  }

  .collectie-info .logo {
    margin-bottom: 5rem;
  }

  .collectie-info {
    padding: 5rem 0;
  }

  .mobile-nav .close {
    right: 30px;
    top: 6.5rem;
  }

  @keyframes repeatedNavSlideUp {
    from {
      /* top: 0; */
      transform: none;
    }

    to {
      /* top: -17.2rem; */
      transform: translateY(-17.2rem);
    }
  }

  @keyframes repeatedNavSlideDown {
    from {
      /* top: -17.2rem; */
      transform: translateY(-17.2rem);
    }

    to {
      /* top: 0; */
      transform: none
    }
  }

  .wie .first .text {
    width: 80%;
    margin: 0 auto;
  }

  .wie .second .flex {
    flex-direction: column-reverse;
  }

  .wie .second .text {
    width: 100%;
    margin-top: 2.5rem;
  }

  .wie .second .image1 {
    margin: 0;
    width: 50%;
  }

  .over-collections {
    height: 43rem;
  }

  .collectie-picture-grid article {
    width: 90%;
  }

  .getintouch {
    padding: 7.5rem 0;
  }

  .collectie-collecties {
    height: 43rem;
  }

  .overlay .description,
  .overlay .like,
  .overlay .interesse,
  .overlay a,
  .overlay a:link,
  .overlay a:visited,
  .overlay .designer {
    margin-left: 0;
  }
  .pagination .next,
  .pagination .prev {
    width: 40%;
  }

  .pagination .next a,
  .pagination .prev a {
    transform: none;
  }

  .pagination .next {
    text-align: right;
    /* margin-top: 4rem; */
    padding-right: 5%;
  }

  .pagination .next a {
    padding-right: 5%;
    text-align: right;
  }

  .pagination .prev {
    text-align: left;
    padding-left: 5%;
  }

  .pagination .prev a {
    text-align: left;
  }

  .projecten-container {
    padding: 0;
  }

  .projecten-container .items-wrapper {
    padding: 4rem 0;
  }

  .projecten-container .project-1,
  .projecten-container .project-2,
  .projecten-container .project-3,
  .projecten-container .project-4 {
    width: 100%;
    margin-right: 0%;
    margin-left: 0%;
  }

  .project-picture-grid .pictures-wrapper {
    padding: 0 0 4rem 0;
  }

  .project-picture-grid .pictures-wrapper.green-bg {
    margin-bottom: 4rem;
  }

  .project-picture-grid .picture-2,
  .project-picture-grid .picture-3,
  .project-picture-grid .picture-5 {
    margin-top: 4rem;
  }

  .project-picture-grid .picture-1,
  .project-picture-grid .picture-2,
  .project-picture-grid .picture-3,
  .project-picture-grid .picture-4,
  .project-picture-grid .picture-5 {
    width: 100%;
    margin-right: 0%;
    margin-left: 0%;
  }
}

@media only screen and (max-width: 500px) {

  .repeated-header nav a,
  .repeated-header nav a:link,
  .repeated-header nav a:visited {
    margin: 0 1.5rem;
  }

  .collection h1 {
    font-size: 4rem;
  }

  .big-image {
    height: 23rem;
  }

  .collection .links {
    width: 100%;
  }

  .wat .text {
    width: 100%;
  }

  .wat h1 {
    margin-left: 0;
  }

  .getintouch #naam,
  .getintouch #mail,
  .getintouch #wens {
    width: 100%;
    margin-right: 0;
  }

  .getintouch form input[type="text"],
  .getintouch form input[type="email"],
  .getintouch form .custom-select-container {
    width: 100%;
  }

  .overlay .left-side,
  .overlay .right-side {
    width: 100%;
  }

  .overlay .h1-fake {
    font-size: 5rem;
  }

  /* footer .right-side .collections .row {
    width: 100%;
  } */

  footer .lower .flex {
    display: block;
  }

  footer .lower .flex .ppc {
    margin-bottom: 1rem;
  }

  footer .lower .maister-logo {
    display: block;
    margin: 0 auto;
  }

  footer .lower .maister-link {
    margin: 0;
  }

  footer .lower p {
    margin-bottom: 2rem;
  }

  .pop-up {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-height: 90%;
    box-shadow: 0 0 100px rgba(0, 0, 0, .3);
  }

  .mobile-nav .btns {
    width: 25rem;
    margin: 2rem auto 0;
  }

  .mobile-nav .btns a {
    font-size: 1.4rem !important;
    padding: 1rem 1.7rem !important;
  }
}

@media only screen and (max-width: 450px) {

  .pre-header .menu-icon {
    display: none;
  }

  .pre-header p {
    width: 100%;
  }

  .repeated-header {
    padding: 3.5rem 0;
  }

  .repeated-header nav {
    text-align: center;
  }

  .repeated-header nav a,
  .repeated-header nav a:link,
  .repeated-header nav a:visited {
    display: block;
    width: 100%;
    margin: 1rem 0;
  }

  .collectionGrid article .info {
    flex-direction: column;
    align-items: flex-start;
  }

  .collectionGrid article a:not(.link-overlay),
  .collectionGrid article a:not(.link-overlay):link,
  .collectionGrid article a:not(.link-overlay):visited {
    margin-top: 2rem;
  }

  .hello h1 {
    font-size: 6rem;
  }

  .collection h1 {
    font-size: 3rem;
  }

  .wie .second .image1 {
    width: 100%;
  }

  .over-collections {
    height: 33rem;
  }

  .project.collectie .intro-image .title h1 {
    font-size: 4rem;
  }

  .project.collectie .intro-image {
    height: auto;
  }

  .collectie .intro-image .title h1 {
    font-size: 4rem;
    padding: 1.7rem 2.1rem;
  }

  .getintouch .h1-fake {
    font-size: 3rem;
  }

  .over-collections h1 {
    font-size: 4.5rem;
  }

  .collectie-collecties {
    height: 33rem;
  }

  .collectie-collecties .text .h1-fake {
    font-size: 4.5rem;
  }

  .overlay .close {
    right: 5%;
    top: 2.5rem;
  }

  .overlay .slider .caption {
    padding: 3rem 3rem;
  }

  .collectie-picture-grid article .info {
    flex-direction: column;
  }

  .collectie-picture-grid article .info .btn {
    margin-top: 2rem;
  }

  .mobile-nav .close {
    top: 4.5rem;
  }
}