html{scroll-behavior: smooth;}
body{
/* SURPLACE COLORS */
--white: rgba(255,255,255,1);
--lightest: rgba(255,255,255,.1);
--copper: rgba(199,125,89, 1);
--darker: rgba(35,43,38,1);
--darker90: rgba(35,43,38,.9);
--dark: rgba(45,54,48,1);

background: var(--darker);
color: var(--white);
font-family: "Gotham-Book", sans-serif;
position: relative;
}

body.menu-open {
  height: 100vh;
  overflow-y: hidden;
}


#hero{position: relative; display: flex; flex-direction: column; justify-content: space-between; order: 1;}

#hero{background: url(../img/hero-bg.jpg) top left; background-size: cover; height: 100vh; letter-spacing: 0.05em; font-size: 0.8125rem; text-transform: uppercase; position: relative;}
#hero i{margin-right: .75rem;}
#hero #hero--contactdata a{margin-right: 1.5rem;}
#hero #hero--contactdata a span{display: none;}
#hero #hero--contactdata{display: none;}
#hero #hero--top{/*padding-top: 2rem;*/ top: 50%; left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);}
#hero #hero--top a.button:first-child{margin-right: 10px;}
#hero #hero--language{margin-bottom: 40px; display: none;}
#hero #hero--socialmedia p, #hero #hero--socialmedia ul{display: inline-block; margin: 0;}
#hero--bottom{bottom: 0;}
#hero #hero--bottom .row{display: none;}
#hero #hero--bottom p{margin: 0;}
#hero #hero--bottom{/*margin-bottom: 135px;* /*position: relative;*/ position: absolute; bottom: 20%; left: 15px; right: 15px; width: calc(100% - 30px)}
#hero #hero--bottom #scrolldown{width: 23px; height: auto; position: absolute; left: 50%; transform: translateX(-50%);}
#hero #hero--socialmedia i{margin: 0; margin-left: 20px;}
#hero #hero--cta{text-align: center !important; margin-top: -2rem;}
#hero #hero--cta a.button{max-width: 50%; display: block; margin: 0 auto !important; margin-bottom: 1rem !important; }
#hero #hero--cta #logo-mobile{width: 50%; height: auto; display: block; position: relative; margin: 0 auto; margin-bottom: 1rem;}

#corps{background:var(--dark); padding: 2rem 0 140px 0;}
#corps p a,#corps li a, #hero a{color: var(--white);}
#hero a:hover{color: var(--copper);}

.navbar-nav .nav-item:last-child{display: none;}
.navbar-nav .nav-item a{font-family: "Gotham-Medium", sans-serif; text-transform: uppercase; font-size: 1.0625rem;}

.navbar{ padding: 0; transition:0.75s ease; padding-top: 2rem; padding-bottom: 1.5rem;}
.navbar.scrolled{background: var(--darker) !important; margin-top: 0 !important;}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

#nav-item-langselect ul{border-top: 1px solid var(--lightest); display: inline-block; padding-right: 3rem;  padding-top: 1.5rem; margin-top: 1.5rem;}
#nav-item-langselect a{font-size: 0.8125rem;}

.show{
  /*animation-delay: 0s !important;*/
}

.collapsing {
  -webkit-transition: none;
  transition: none;
}

.navbar-dark .navbar-toggler-icon{background-image: url(../img/hamburger.svg); width: 1em; height: 1em; display: block; right: 2rem; top: 2rem; position: absolute;  z-index: 999;}
.navbar-collapse{background: var(--darker); padding-left: 2rem; padding-right: 2rem; margin-top: -4rem; padding-top: 8rem; padding-bottom: 3rem; z-index: 600; height: calc(100vh + 2px);}
.nav-item.active .nav-link, .nav-link.active{background-image: none;}
.navbar-dark .navbar-toggler{border: none; padding: 0;}
.navbar-contactdata{color: var(--white); font-size: 0.8125rem; text-align: left; left: 0; position: absolute; left: 2rem; top: 1rem; z-index: 999;}
.navbar-contactdata a{color: var(--white); margin-right: 1.5rem;}
.navbar-brand-mobile{display: block; background: url(../img/hero-logo.png) no-repeat top left; background-size: cover; text-indent: -9999px; width: 77px; height: 64px; position: absolute; top: 1rem;}


#nav--socialmedia{position: absolute; bottom: 20%;}
#nav--socialmedia p, #nav--socialmedia ul{display: inline-block; margin: 0;}
#nav--socialmedia p{letter-spacing: 0.05em; font-size: 0.8125rem; text-transform: uppercase; font-family: "Gotham-Medium", sans-serif; margin-right: 25px;}
#nav--socialmedia a{color:var(--white);}
#nav--socialmedia li{margin-right: 25px;}

#logo{width: 50%; height: auto; position: relative; margin: 0 auto; display: none;}

#corps{padding: 4rem 0 140px 0;}

#corps p a:hover, #corps li a:hover{color: var(--copper);}

.devider hr, hr{border-top-color: var(--lightest); margin: 0; padding: 0;}

a.button{padding: 0.8125rem 2.25rem; text-align: center; letter-spacing: 0.05em; border-radius: .375rem; width: 100%; display: block; background: var(--white); color: var(--darker) !important; font-size: 	0.8125rem; text-transform: uppercase; font-family: "Gotham-Medium", sans-serif; line-height: 1em; text-decoration: none; transition: all ease-in 0.2s; }
a.button:hover{background: var(--copper); color: var(--white) !important; text-decoration: none;}

section#menu{background: var(--darker); padding-bottom: 3rem; margin-bottom: 3rem;}
section#menu p, section#zaal p, section#concept p{font-size: 0.8125rem; line-height: 1.375rem; margin-bottom: 2.0625rem; letter-spacing: 0.06em;}
section#menu hr{margin-top: 53px; margin-bottom: 36px;}
section h2{font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.75rem; margin-bottom: 1.5rem; margin-top: 2.0625rem;}
section#zaal h2{line-height: 1.6rem; margin-top: 0;}
section h2 span{color: var(--copper); display: block; font-size: 0.8125rem;}
section h2 em{display: block;}
section#zaal{padding-bottom: 165px;}

.zaalinfo{display: flex; flex-direction: row; justify-content: flex-start; align-items:center; margin-top: 2rem; border-top: 1px solid var(--lightest); padding-top: 2rem;}
.zaalinfo img{width: 2.5rem; height: auto;}
#zaal .zaalinfo p{text-transform: uppercase; border-left: 1px solid var(--lightest); font-size: 0.75rem; padding-left: 1.5rem; margin-left: 1.5rem; margin-bottom: 0; padding-bottom: 0;}
.zaalinfo p span{display: block; font-family: "Gotham-Book"; font-size: .5rem;}
#zaal--info--dekstop{display: none; margin-top: 0; border-top: 0; padding-top: 0; position: absolute;}
.zaal--image-wrapper{margin-bottom: 2rem;}

section#concept ul#concept--nav{display: none;}

section#concept{padding-bottom: 5rem;}
section#concept #concept--images{position: relative; width: 100%; padding-bottom: 210%; display: block;}
section#concept img#concept--pattern2{display: none;}
section#concept img#concept--pattern1{width: 90%; height: auto; top:0; z-index: 9;}
section#concept img#concept--zaal{width: 100%; z-index: 10; top: 2rem;}
section#concept img#concept--coureur{width: calc(100% - 6rem); z-index: 11; left: 50%; bottom: 0; transform: translateX(-50%);}
section#concept #concept--images img{position: absolute;}


section.quote{margin-bottom: 3rem;}
section.quote h3, h3{font-family: "Thistails-Regular", sans-serif; font-size: 1.5625rem; font-weight: normal; width: 100%; line-height: 2.5rem;}
h3 span{font-family: "Gotham-Medium", sans-serif; display: block; color: var(--copper); text-transform: uppercase; font-size: 0.8125rem;}
section.quote p, section#concept .quote h3 span{font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2rem; margin-bottom: 0;}
section#concept .quote h3 span{color:var(--white); margin-top: 0; display: inline-block;}
section.quote p:before, section#concept .quote h3 span:before{content: '— ';}
section.quote p:after{content: ' —'}
section.quote p:before, section.quote p:after{font-family: "Gotham-Medium", sans-serif;}





  .masonry {
    -webkit-column-count: 1;
  -moz-column-count:1;
  column-count: 1;

    padding: 0 15px;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    flex-direction: row;
    flex-flow: column wrap;
    
}

.item {
    display: inline-block;
    margin: 0 0 1.5em;
    width: 100%;
	transition:1s ease all;

}
.item img{max-width:100%; height: auto;}



section#contact{padding-top: 5.125rem;}
#contact--data{font-size: 0.8125rem; text-transform: uppercase; font-family: "Gotham-Medium", sans-serif;}
#contact--data li{border-bottom: 1px solid var(--lightest); padding: 1.4375rem 0; letter-spacing: 0.05em; display: flex; flex-direction: row;}
#contact--data li span{width: 100%; display: block;}
#contact--data li:last-child{border-bottom: none;}
#contact--data li i{margin-right: 1rem; line-height: 1.21875rem}
#contactPicture{margin-top: 3rem;}

#contact--logo{max-width: 120px; height: auto; display: block; margin: 0 auto; margin-bottom: 2rem;}
#contact a.button{width: 100%; display: block;}
.navbar-brand{background: url(../img/surplace-logo-wit.svg) no-repeat 0 0; background-size: cover; display: block; text-indent: -9999px; padding-top: 0; padding-bottom: 0;}
.nav-link{color: var(--white) !important; text-transform: uppercase; font-size: 0.8125rem;}
.nav-link:hover, .nav-item.active .nav-link, .nav-link.active{color:var(--copper) !important;}


#footer{padding: 42px 0;}
#footer #footer--left{font-size: 0.625rem; letter-spacing: 0.06em;}
#footer #footer--left span{display: block; margin-top: .75rem;}
#footer #footer--right{text-transform: uppercase; font-family: "Gotham-Medium", sans-serif; letter-spacing: 0.05em;}
#footer #footer--right p{font-size: 0.8125rem; display: inline-block;margin-right: 25px;}
#footer ul.socialmedia{display: inline-block;}
#footer ul.socialmedia span{display: none;}
#footer ul.socialmedia .list-inline-item{margin-right: 25px;}
#footer ul.socialmedia .list-inline-item:last-child{margin-right: 0;}
#footer a{color: var(--white); text-decoration: none;}
#footer a:hover{color: var(--copper);}

.removepadding-mobile{padding-left: 0; padding-right: 0;}
.mobilewrapper{padding-left: 3rem; padding-right: 3rem;}

@media (min-width: 320px){
  #hero #hero--cta #logo-mobile, #hero #hero--cta a.button{max-width: 75%; width: 75%;}

}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	#hero #hero--cta #logo-mobile, #hero #hero--cta a.button{max-width: 50%; width: 50%;}
    .masonry {
        -webkit-column-count: 2;
      -moz-column-count:2;
      column-count: 2;
    
    }

    #hero #hero--cta a.button{width: auto; max-width: auto; margin-bottom: 0 !important; display: inline-block !important; margin-top: -1rem !important;}
    #hero #hero--cta a.button{margin-right: 1rem !important;}
    #hero #hero--cta a.button:last-child{margin-right: 0 !important;}
    .removepadding-mobile{padding-left: 15px; padding-right: 15px;}
    .mobilewrapper{padding-left: 0; padding-right: 0;}

    .navbar-collapse{height: auto; background: none;  padding: 0; margin-top: 0;}
    #contact a.button{margin-left: 0;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /*#contact #contactPicture{width: 100%; max-width: 496px !important;}*/
   

    #corps{padding: 0px 0 140px 0; /*top 117*/}
    #header{flex-direction: column;}
    #logo{width: 400px; height: auto; position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    #hero #hero--cta #logo-mobile{display: none;}
    

    #hero #hero--top{padding-top: 2rem; position: relative; top: 0; left: 0; transform: translate(0);}
    #hero #hero--bottom{margin-bottom: 85px; position: relative; left: 0; right: 0; bottom: 0;}

    #hero #hero--cta{text-align: right !important; margin-top: 0;}

    #hero #hero--contactdata{display: block;}
    #hero #hero--bottom .row{display: flex;}
    #hero #hero--language{display: flex;}
    .navbar{background: var(--darker); position: -webkit-sticky; position: sticky; top: 0; z-index: 999; margin-top: 0;}
    .navbar-brand{width: 77px; height: 64px;}
    .navbar{padding-top: 0; padding-bottom: 0; height: 115px;}
    .navbar-dark .navbar-nav .nav-link{padding-left: 0.8125rem !important; padding-right: 0.8125rem !important; font-size: 0.8125rem;}
    .navbar .nav-link.button{margin-left: 1rem; padding-left: 2.25rem !important; padding-right: 2.25rem !important;}
    .navbar-contactdata{display: none;}
    #nav-item-langselect{display: none;}
    .navbar-brand-mobile{display: none;}
    #nav--socialmedia{display: none;}
    .nav-item.active .nav-link, .nav-link.active{background: url(../img/arrow.svg) no-repeat left center; background-size: 8px 7px; padding-left: .75rem !important;}
    .navbar.scrolled {padding-bottom: 0;}

    .navbar-nav .nav-item a{text-align: left;}
.navbar-nav .nav-item{border-bottom: none;}
.navbar-nav .nav-item:last-child{display: flex;}
    
    #contact--logo{margin: 0; margin-top: -3.1rem;}
    #contact--data{margin-left: 3.75rem; max-width: 287px;}
    #contact a.button{width: auto; display: inline-block; margin-left: -95px;}
    #contactPicture{margin-top: 0;}

    section#menu{background: none; padding-bottom: 0; margin-bottom: 0;}
    section#menu .content{max-width: 480px; padding-left: 100px;}
    section#zaal .content{max-width: 300px;}
    .zaal--image-wrapper{width: calc(100% - 60px); position: relative; margin-bottom: 0;}

    
    section#concept, section#zaal{padding-bottom: 0;}
    section#concept::before, section#zaal::before{    height: 120px;
      content: "";
      display:block;}

      section#menu::before{height: 170px; content:""; display: block;}
      section#gallery::before{height: 7rem; content:""; display: block; }

    section#concept img#concept--zaal{width: 86%; z-index: 10;}
    section#concept img#concept--coureur{width:31.75%; right: 0; top: 182px; z-index: 11; transform: translateX(0); left:auto;}
    section#concept img#concept--pattern1, section#concept img#concept--pattern2{width:  63.43%; z-index: 9;}
    section#concept img#concept--pattern1{right: 50px; top: 65px;}
    section#concept img#concept--pattern2{left: 104px; top: 170px; display: block;}
    section#concept #concept--images img{position: absolute;}
    section#concept #concept--images{padding-bottom: 0;}
    
    section#concept ul#concept--nav{position: absolute; left: 120px; top: 530px; margin: 0; padding: 0; font-size: 0.8125rem; text-transform: uppercase; display: block;}
    section#concept ul#concept--nav li a{line-height: 70px; width: 220px; display: block; background: url(../img/arrow-down-white.svg) no-repeat right center; background-size: 10px 9px;}
    section#concept ul#concept--nav li a:hover{text-decoration: none; background: url(../img/arrow-down-copper.svg) no-repeat right center !important; background-size: 10px 9px !important;}
    section#concept ul#concept--nav li{border-bottom: 1px solid var(--lightest);}
    section#concept .content{padding-left: 50px; padding-right: 10px;}
    section#concept .quote{padding-bottom: 40px;}
    section#concept .content h3{width: 85%; display: inline-block;}

    .masonry {
        -webkit-column-count: 3;
      -moz-column-count:3;
      column-count: 3;
    }

    #gallery{padding-bottom: 7rem;}
    section#contact{padding-top: 8.25rem;}

    section.quote{margin-bottom: 0; margin-top: 6.5rem;}
    .quote--container:before {
        content: '';
        border-bottom: 1px solid var(--lightest);
        position: absolute;
        width: 13%;
        left: 15px;
        bottom: 50%;
      }
      .quote--container:after {
        content: '';
        border-bottom: 1px solid var(--lightest);
        position: absolute;
        width: 13%;
        right: 15px;
        bottom: 50%;
      }
      section.quote h3{width: 48.5%; margin: 0 auto;}

      .button{display: block !important; width: fit-content !important;}
      #zaal--info--mobile{display: none;}
      #zaal--info--dekstop{display: flex; position: absolute; bottom: 2rem; left: 2rem; width: calc(100% - 60px);}
      #zaal--info--dekstop img:last-child{margin-left: auto; width: 1.5625rem; height: auto; margin-right: 1rem;}
      

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #hero #hero--contactdata a span{display: inline-block;}

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

}