/*
 Theme Name:  Samen Duurzamer
 Description: Powered by Robert Bakker
 Requires at  least: WordPress 5.1.1
 Version:     1.0
 Author:      Robert Bakker
 Author URI:  https://www.vrhl.nl
 Text Domain: custom_theme
 */
/* - - - - - F O N T S - - - - - */


:root {
    --green: #8EAF42;
    --darkgreen: #19575A;
    --midgreen: #819aa6;
    --black: #000000;
    --white: #000000;
    --body: #D6E3BA;
    --lime: #F7FFE5;

}

*, *::before, *::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
    background-color:var(--body);
}

  /* 
Lenis recomended css 
*/

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* 
Lenis recomended css ends 
*/

#intro {
    z-index:2;
}

.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-color: #000000;
    z-index: 99999999999999999999;
    animation-name: preloader;
    animation-duration: 0.4s;
    animation-delay: 1s;
    display: flex;
    align-items: center;
    justify-content: center;
    animation-fill-mode: forwards;
}

.preloaderlogo {
    animation-name: preloaderlogo;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}

@keyframes preloader {
  0% {opacity: 1; filter: blur(0px);}
  99% {opacity: 0; height: 100%;
    width: 100%;}
    100%{width: 0px; height: 0px;}
    height: 100%;
}

@keyframes preloaderlogo {
  0% {opacity: 0; margin-top: 30px; transform: scale(1);}
  50% {opacity: 1; transform: scale(1);}
  100% {opacity: 0; margin-top: -30px; transform: scale(3);}
}

.overflow-x-hidden {overflow-x:hidden !important;}

.container-horizontal {
    position: relative;
    width: 100%;
    min-height: 30vh;
    background-color:var(--grey);
}

.space-holder {
    position: relative;
    width: 100%;
}

.sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

.horizontal {
    position: absolute;
    height: 100%;
    will-change: transform;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
}

.cards {
    position: relative;
    height: 100%;
    padding: 0 0 0 150px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    scroll-snap-type: mandatory;
    scroll-snap-points-X: repeat(100vh);
    scroll-snap-type: x mandatory;
}

.portfolio-card:first-child {
    margin-left:15vw;
    background-color:var(--grey);
    background-image:url('assets/images/map.svg');
    background-size:contain;
    background-position: center center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    opacity:1;
}

.portfolio-card:first-child:hover {
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  background-size:contain !important;
}

.portfolio-card:last-child:hover {
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  background-size:contain !important;
}


.linky {
    position: absolute;
    left:0px;
    top:0px;
    height:100%;
    width:100%;
}

.portfolio-card {
    position: relative;
    height: 40vw;
    width: 40vw;
    max-height:750px;
    max-width:750px;
    margin-right: 60px;
    flex-shrink: 0;
    background-size:100%;
    background-position: center center;
    overflow:hidden;
    border-radius: 0px 0px 50px 0px;
    transition:1s;
    opacity:0.80;
}

.portfolio-card-mobile {
    position: relative;
    height: 80vw;
    width: 100vw;
    margin-right: 60px;
    flex-shrink: 0;
    background-size:100%;
    background-position: center center;
    overflow:hidden;
    border-radius: 0px 0px 50px 0px;
    transition:1s;
    opacity:1;
    margin-bottom:10vw;
}

.overlay-blur {
    position: absolute;
    width:100%;
    height:60px;
    border-radius:500px;
    background-color:#000000;
    top:-30px;
    left:0px;
    filter: blur(80px);
}

.portfolio-card:hover {
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    opacity:1;
    background-size:110%;
}

.portfolio-card h2 {color:#ffffff;}

.portfolio-card span {
    color:#ffffff;
    opacity:0.5;

}

.arrow {
    position: absolute;
    right:50px;
    bottom:50px;
    width:60px;
    transition:0.3s;
}

.arrow:hover {
    right:40px;

}

.max-w-1400 {max-width:1400px !important;}

@media (max-width: 767px) {

    .portfolio-card {
      height: 100vw;
      width: 100vw;

  }
}

.white {color:var(--white);}
.orange {color:var(--orange);}

[data-aos=rrraw] {
    filter: blur(30px);
    opacity:0;
}
[data-aos=rrraw].aos-animate {
    filter: blur(0px);
    opacity: 1;
}

[data-aos=overlay] {
    width:0%;
}
[data-aos=overlay].aos-animate {
    width:100%;
}

[data-aos=loading] {
    transform:scale(1.2);
    opacity:0;

}

[data-aos=loading].aos-animate {
    transform:scale(1);
    opacity:1;


}

.transition-settings {
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000) !important;
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000) !important;
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000) !important;
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000) !important;
    -webkit-transition: all cubic-bezier(0.860, 0.000, 0.070, 1.000) !important;
    -moz-transition: all cubic-bezier(0.860, 0.000, 0.070, 1.000) !important;
    -o-transition: all ubic-bezier(0.860, 0.000, 0.070, 1.000) !important;
    transition: all cubic-bezier(0.860, 0.000, 0.070, 1.000) !important;
}


@media (min-width:500px) {

    .min-h-10 {min-height:10vh !important;}
    .min-h-20 {min-height:20vh !important;}
    .min-h-30 {min-height:30vh !important;}
    .min-h-40 {min-height:40vh !important;}
    .min-h-50 {min-height:50vh !important;}
    .min-h-60 {min-height:60vh !important;}
    .min-h-70 {min-height:75vh !important;}
    .min-h-80 {min-height:80vh !important;}
    .min-h-90 {min-height:90vh !important;}
    .min-h-100 {min-height:100vh !important;}
    .min-h-200 {min-height:140vh !important;}

}


h1, h2, h3 {
    font-family: 'DM Serif Display', serif;
    color:var(--darkgreen);
}

h1 {
    color:var(--darkgreen);
    font-size:42px;
    line-height:42px;
    letter-spacing:-1px;
    margin-bottom:20px;
    margin-top:20px;
}

h2 {
    color:var(--darkgreen)
}

h3 {
    font-size:20px;
    margin-top:20px;
    color:var(--darkgreen)
}

body {
    background-color: var(--body);
    color: var(--black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-family: 'Poppins', sans-serif;

}

p {line-height:23px; font-size:15px; font-weight:400 !important; color:var(--darkgreen);
}


#home span {
    color:var(--green);
    font-weight:600;
    font-size: 17px;
}

.timeline-block {
    background-color:var(--lime);
    padding:30px;
    border-bottom:4px solid var(--green);
    border-right:1px solid rgba(0,0,0,0.1);
    text-align:center;
}



.timeline-block p {margin-bottom:0px !important;}

.number {display:inline-block;
    font-weight:500;
    font-size:30px;
    color:var(--darkgreen);
    width:70px;
    height:70px;
    line-height:70px;
    border-radius:500px;
    border: 2px solid var(--darkgreen);
    margin-right:20px;
}

.wp-block-image {
    overflow:hidden; border: 15px solid rgba(255,255,255,0); border-radius:15px;
        box-shadow: 97px 52px 178px -55px rgba(25,87,90,0);
    -webkit-box-shadow: 97px 52px 178px -55px rgba(25,87,90,0);
    -moz-box-shadow: 97px 52px 178px -55px rgba(25,87,90,0);
    transition:0.3s;


}
.wp-block-image:hover {border: 15px solid rgba(255,255,255,1);     box-shadow: 97px 52px 178px -55px rgba(25,87,90,0.5);
    -webkit-box-shadow: 97px 52px 178px -55px rgba(25,87,90,0.5);
    -moz-box-shadow: 97px 52px 178px -55px rgba(25,87,90,0.5);
    transform:rotate(1deg);
}

.wp-block-image img {
    transform:scale(1);
    transition:0.3s;
}

.wp-block-image img:hover {
    transform:scale(1.02);
}


footer {
    background-color: var(--grey);
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
    justify-content: center;
}

footer h4 {
    font-family: 'Poppins', serif;
    font-size:16px;
}

.navbar-brand img {max-width:320px;}

.nav-link {
    background-color: rgba(0,0,0,0) !important;
    border:none !important;
    color:var(--darkgreen) !important;
}

.nav-link.active {
    font-weight:600;
    background-color: rgba(0,0,0,0) !important;
    border:none !important;
    color:var(--darkgreen) !important;
}

.nav-link:hover {
    font-weight:600;
    background-color: rgba(0,0,0,0) !important;
    border:none !important;
}

.nav-tabs {
    border: none !important;
}

.spm_file_upload img {

    transform:scale(0.97);
    box-shadow: 60px 12px 178px -55px rgba(25,87,90,0.5);
    -webkit-box-shadow: 60px 12px 178px -55px rgba(25,87,90,0.5);
    -moz-box-shadow: 60px 12px 178px -55px rgba(25,87,90,0.5);
    transition:0.3s;
}

.spm_file_upload img:hover {
    transform:scale(1);
    box-shadow: 97px 52px 178px -55px rgba(25,87,90,0.5);
    -webkit-box-shadow: 97px 52px 178px -55px rgba(25,87,90,0.5);
    -moz-box-shadow: 97px 52px 178px -55px rgba(25,87,90,0.5);
}


.btn {
    background-color:var(--darkgreen);
    padding:15px 30px;
    border-radius:80px;
    color:#B5CC78;
    font-weight:600;
    border-color:var(--darkgreen);
    text-transform:uppercase;
    font-size:14px;
}

.btn:active {
    background-color:var(--darkgreen);
    padding:10px 30px;
    border-radius:80px;
    color:var(--green);
    font-weight:bold;
    border-color:var(--darkgreen);
}

.btn:hover {
    background-color:var(--green);
    padding:15px 30px;
    border-radius:80px;
    color:var(--darkgreen);
    font-weight:600;
    border-color:var(--green);
}


.profielfoto {
    border-radius:20px;
    background-position: center center;
    background-size:cover;
    aspect-ratio: 1 / 1;
    width:100%;
    max-height:400px;
    position: relative;
    background-color:var(--orange);
    overflow:hidden;
    transition:0.3s;
}

.profielfoto-rond {
    border-radius:50%;
    aspect-ratio: 1 / 1;
    background-size:cover;
    background-position: center center;
    background-repeat:no-repeat;
    width:100px;
    height:100px;
    display:block;
    background-color:#000000;
}



.nav-item a {
    color:#ffffff;
    font-family: 'Poppins', serif;
    font-size:22px;
    letter-spacing:1px;
}

.nav-item a:hover, .nav-item a:visited, .nav-item a:active {
    color:#ffffff;
}

/* Style the track */
.form-range {
  width: 100%;
  height: 0.5rem;
  background-color: #ddd;
  border-radius: 1rem;
  appearance: none;
}

/* Webkit (Chrome, Safari, Edge) */
.form-range::-webkit-slider-thumb {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--darkgreen); /* your brand color */
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-range::-webkit-slider-thumb:hover {
  background-color: #4aa2c2;
}

/* Firefox */
.form-range::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--darkgreen);
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-range::-moz-range-track {
  background-color: #c8d9b3;
  height: 1.5rem;
  border-radius: 1,5rem;
}

/* IE and Edge (legacy) */
.form-range::-ms-thumb {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--darkgreen);
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-range::-ms-track {
  background-color: transparent;
  border-color: transparent;
  color: transparent;
  height: 0.5rem;
  box-shadow:none;
}

.form-range::-ms-fill-lower {
  background-color: #ddd;
  border-radius: 1rem;
  box-shadow:none;
}

.form-range::-ms-fill-upper {
  background-color: #ddd;
  border-radius: 1rem;
  box-shadow:none;
}

/* Webkit (Chrome, Safari, Edge) */
.form-range::-webkit-slider-thumb:active {
  background-color: var(--green); /* Darker shade when dragging */
  box-shadow:none;
}

/* Firefox */
.form-range::-moz-range-thumb:active {
  background-color: var(--green);
  box-shadow:none;
}

/* IE and Edge (legacy) */
.form-range::-ms-thumb:active {
  background-color: var(--green);
  box-shadow:none;
}

/* Webkit */
.form-range:focus::-webkit-slider-thumb {
    box-shadow:none;
}

/* Firefox */
.form-range:focus::-moz-range-thumb {
    box-shadow:none;
}

/* IE and Edge */
.form-range:focus::-ms-thumb {
    box-shadow:none;
}



.hamburger {
 position: absolute;
 top: 20px;
 right: 0;
 cursor: pointer;
 z-index: 999999;
 padding: 10px 15px 5px;
}
.hamburger span {
 vertical-align: middle;
}
.hamburger .bars {
 display: block;
 position: relative;
 width: 35px;
 height: 3px;
 background-color: rgba(255, 255, 255, 1);
 -webkit-transition: all 0.2s ease;
 -moz-transition: all 0.2s ease;
 -ms-transition: all 0.2s ease;
 transition: all 0.2s ease;
 z-index:999999;
 mix-blend-mode:difference !important;
}
.hamburger .bars:before, .hamburger .bars:after {
 position: absolute;
 content: " ";
 width: 100%;
 height: 3px;
 background-color: rgba(255, 255, 255, 1);
 -webkit-transition: all 0.2s ease;
 -moz-transition: all 0.2s ease;
 -ms-transition: all 0.2s ease;
 transition: all 0.2s ease;
}
.hamburger .bars:before {
 top: 8px;
}
.hamburger .bars:after {
 bottom: 8px;
}
.open .hamburger .bars {
 background-color: transparent;
 -webkit-transition: all 0.2s ease;
 -moz-transition: all 0.2s ease;
 -ms-transition: all 0.2s ease;
 transition: all 0.2s ease;
}
.open .hamburger .bars::before {
 top: 0;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
.open .hamburger .bars::after {
 bottom: 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}

.content-box {
    filter: blur(0px);
    transition: all 1s cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */
    transition-timing-function: cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */

}

.content-box-blur {
  filter: blur(2px);
  margin-left:0vw;
  transition: all 1s cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */
  transition-timing-function: cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */
  transition-delay:0.1s;
}

.backdrop {
    height:100%;
    width:100%;
    position: absolute;
    backdrop-filter: blur(30px);
    padding:0px;
    margin:0px;
    z-index:-2;
}

.menu {
 width: 50vw;
 height: 100%;
 padding: 0px 0px 0px 0px;
 background-color: rgba(0,0,0,0.95);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0);
 position: fixed;
 display:flex;
 right: -50vw;
 top: 0;
 opacity: 1;
 z-index: 999;
 margin-top: 0;
 transition: all 1s cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */
 transition-timing-function: cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */
}

.menu a:hover {color:var(--orange);}

.link {
 color:#ffffff;
 font-size:calc(30px + 0.5vw);
 font-weight:bold;
 text-decoration:none;
 display:block;
 width:100%;
 margin-top:0px;
 padding-bottom:2px;
 font-family: 'Poppins', serif;
}

.sub-link {
 color:#ffffff;
 font-size:2vw;
 font-size:calc(22px + 0.5vw);
 font-weight:normal;
 text-decoration:none;
 display:block;
 width:100%;
 margin-top:10px;
 padding-bottom:2px;
 display:block;
}

.open .menu {
 right: 0;
 opacity: 1;
 transition: all 1s cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */
 transition-timing-function: cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */
}
.menu:hover {
 overflow-y: auto;
}






#intro {
    display: flex;
    justify-content: center;    
    object-fit: cover;
    overflow:hidden;
    background-image:url('assets/images/header-home.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;
    background-color:var(--black);
    font-weight:700 !important;
    color:var(--white);
}

.video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100%;
}

.vimeo-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -6;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#video {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index:-5;
}

.orange-overlay {
    background-color: var(--orange);
    position: absolute;
    left: 0;
    top: 0;
    height:100%;
    width:100%;
    z-index: 1;
    mix-blend-mode: multiply;
}

.h-100 {
    height:50vh !important;
}





.orange-btn {
    border:2px solid var(--orange);
    color:#ffffff;
    padding:10px 50px 10px 20px;
    display:inline-block;
    text-decoration:none;
    border-radius:10px;
    z-index:999;
    background-color:var(--orange);
    transition:0.3s;
    position: relative;
    overflow:hidden;
    font-weight:700 !important;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.orange-btn::after{
    position: absolute;
    height:100%;
    right:10px;
    top:0px;
    width:20px;
    content:'';
    background-image:url('assets/images/arrow-white.svg');
    background-position: right center;
    background-repeat:no-repeat;
    transition:0.3s;
}

.orange-btn:hover::after{
    right:-10px;
    padding:10px 40px 10px 30px;

}

.white-btn:hover::after{
    right:-10px;
}



.orange-btn:hover {
   transition:0.3s;
   color:var(--orange);
   background-color:var(--white);
   border:2px solid var(--white); 
   box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.white-btn {
    border:2px solid var(--white);
    color:var(--orange);
    padding:10px 50px 10px 20px;
    display:inline-block;
    text-decoration:none;
    border-radius:10px;
    z-index:999;
    background-color:var(--white);
    transition:0.3s;
    position: relative;
    overflow:hidden;
    transition:0.3s;
    font-weight:700 !important;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.white-btn::after{
    position: absolute;
    height:100%;
    right:10px;
    top:0px;
    width:20px;
    content:'';
    background-image:url('assets/images/arrow-orange.svg');
    background-position: right center;
    background-repeat:no-repeat;
    transition:0.3s;

}
.white-btn:hover {
   transition:0.3s;
   color:var(--white);
   background-color:var(--orange);
   border:2px solid var(--orange); 
   padding:10px 40px 10px 30px;
   box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;

}




#profile {
    min-height:100vh;
    position: relative;
}

.profile-background {
    position: fixed;
    display: flex;
    align-items: center; 
    top: 0;
    left: 0;
    background-size: cover;
    flex: 1;
    height: 100%;
    width:50vw;
    background-color:#ccc;
}




@keyframes picture {
  0% {transform: scale(1.1);}
  100%{transform: scale(1);}
}
.profile-content {
    min-height:100vh;
    width:50vw;
    position: relative;
    background-color:var(--grey);
    padding-left:5vw;
    padding-right:5vw;
    padding-top:20vh;
    padding-bottom:20vh;
}

.max-width-600 {
    max-width:600px;
}

.profile-content p {
    color:#ffffff;
}

#section {
    background-color:var(--grey);
}

#section h1 {
    color:var(--white);
}


#samenwerking {
    background-color:var(--grey);
    color:var(--white);
    background-image: url('assets/images/bg.jpg');
    background-size:cover;
}


#samenwerking h1 {
    color:var(--white);
}

#samenwerking p {
    color:var(--white);
}

#sterker{
    background-color:var(--grey);
    color:#ffffff;
}


#sterker h1 {color:#ffffff;} 

#sterker p {color:#ffffff;}

#footer{
    background-color:var(--grey);
    color:#ffffff;
}

#footer h1 {color:#ffffff;} 

#footer p {color:#ffffff;}


#header-small {
    min-height:10vh;
    background-color:var(--orange);
    padding-bottom:5vh;
}

#header-small h1 {color:var(--white);}



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

 .link {
     color:#ffffff;
     font-size:30px;
     font-weight:bold;
     text-decoration:none;
     display:block;
     width:100%;
     margin-top:0px;
     padding-bottom:2px;
     font-family:. 'Poppins', serif;
 }

 .sub-link {
     color:#ffffff;
     font-size:22px;
     margin-left:20px;
     font-weight:normal;
     text-decoration:none;
     display:block;
     width:100%;
     margin-top:10px;
     padding-bottom:2px;
     display:block;
 }


 .menu {
     width: 100vw;
     right: -100vw;
     padding-left:30px;
 }

 .open .menu {
     right: 0;
     opacity: 1;
     transition: all 1s cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */
     transition-timing-function: cubic-bezier(0.445, 0.760, 0.000, 0.995); /* custom */
 }

 #profile {
    min-height:100vh;
    position: relative;
}

.profile-background {
    min-height:50vh;
    width:50vw;
    position: relative;
}

.alert-info {display:none !important;}

.profile-background div {
    background-size:cover;
    background-repeat:no-repeat;
    position: relative;
    width:50vw;
    height:50vh;
}
.profile-content {
    min-height:50vh;
    width:100vw;
    display:inline-block;
    position: relative;
    padding-top:5vh;
    background-color:var(--black);
}

input[type=file] {display:none;}
input[type=file]::before {content:'hello'}


header h1 {
    font-weight:800;
    font-size:30px;
    color:var(--white);
}

header {
    min-height:400px;
}

.fixed {
    min-height:50vh;
    background-position: bottom center;
}

}