/*
Theme Name: momentvisuals
Theme URI: https://momentvisuals.de/
Author: momentvisuals
Author URI: http://momentvisuals.de/
Text Domain: momentvisuals
Version: 1.0.0
*/

::selection{background:#fa2742;}
::-moz-selection{background:#fa2742;}



@keyframes fadeInNavPoints {
	0%{opacity:0;transform:translateX(400px);}
	100%{opacity:1;transform:translateX(0%);}
}

@keyframes fadeOutNavPoints {
	0%{opacity:1;transform:translateX(0%);}
	100%{opacity:0;transform:translateX(500px);}
}

html{font-size:20px;background-color:#f1f1f1;}
body{font-family:'Catamaran';}

h1, h2, h3, h4, h5{font-weight:normal;font-style:normal;color:#232323;}
h2{margin-bottom:1rem;}

a:hover{text-decoration:none;}

button:focus{outline:none;}

.box-shadow{box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.02),0 6.7px 5.3px rgba(0, 0, 0, 0.028),0 12.5px 10px rgba(0, 0, 0, 0.035),0 22.3px 17.9px rgba(0, 0, 0, 0.042),0 41.8px 33.4px rgba(0, 0, 0, 0.05),0 100px 80px rgba(0, 0, 0, 0.07);}

.btn{border-radius:0;text-transform:uppercase;letter-spacing:0.15em;font-size:0.7rem;padding:1em 2em;margin-top:1rem;}
.btn-dark{background-color:#232323;}

.navbar{padding:1rem 2rem;transition:all 0.4s cubic-bezier(.3,0,.5,1) 0s;background: #fff; height: 5rem;}
.navbar-brand{width:3rem;color:#fff;padding:0;z-index:2000;transition:all 0.4s cubic-bezier(.3,0,.5,1) 0s;}

.navbar-brand svg > *{fill:#232323;}
.navbar-brand:hover{color:inherit;}
.navbar-brand.open{color:#fff;}

.toggle-nav{padding:0;display:flex;flex-direction:column;-webkit-appearance:none;appearance:none;background:none;border:none;position:relative;width:50px;height:50px;z-index:2000;}

.toggle-nav span{width:50px;height:3px;background-color:#232323;display:block;transition:all 0.4s cubic-bezier(.3,0,.5,1) 0s;align-self:end;top:15px;position:absolute;transform-origin:center;}
.toggle-nav span + span{width:30px;top:30px;}
.toggle-nav:hover{}
.toggle-nav:hover span{width:30px;}
.toggle-nav:hover span + span{width:50px;}

.toggle-nav.open span{width:50px;background-color:#232323;transform:rotate(225deg);top:23px;}
.toggle-nav.open span + span{transform:rotate(315deg);top:23px;}

#nav{width:100vw;height:100vh;background-color:rgba(35,35,35,.9);position:fixed;top:0;left:0;z-index:1031;display:flex;align-items:center;opacity:1;}
#nav ul{list-style:none;margin:0;padding:0;}
#nav a{color:#fff;font-size:4.2rem;position:relative;font-family:linotype-sabon,sans-serif;}
/*#nav a::after{content:"";display:block;width:0;height:5px;background-color:#fff;transition:all 0.25s ease-out 0s;position:absolute;left:0;bottom:6px;}
#nav a:hover::after{width:100%;}*/

#nav a::after{content:"";display:block;background-color:#fa2742;transition:all 0.25s ease-out 0s;position:absolute;left:-15px;top:-15px;bottom:-15px;right:calc(100% + 15px);z-index:-1;}
#nav a:hover::after{right:-75px;}

#nav.site-nav--open{transform:translateX(0);transition:all 500ms ease-out 0s;}
#nav.site-nav--open li{animation: fadeInNavPoints cubic-bezier(.3,0,.5,1) 750ms forwards;opacity:0;}
#nav.site-nav--open li:nth-child(1){animation-delay:350ms;}
#nav.site-nav--open li:nth-child(2){animation-delay:450ms;}
#nav.site-nav--open li:nth-child(3){animation-delay:550ms;}
#nav.site-nav--open li:nth-child(4){animation-delay:650ms;}
#nav.site-nav--open li:nth-child(5){animation-delay:750ms;}

#nav.site-nav--closed{transform:translateX(100%);transition:all 0.4s cubic-bezier(.3,0,.5,1) 0s;}
#nav.site-nav--closed li{animation: fadeOutNavPoints ease-out 750ms forwards;opacity:1;}
#nav.site-nav--closed li:nth-child(1){animation-delay:400ms;}
#nav.site-nav--closed li:nth-child(2){animation-delay:300ms;}
#nav.site-nav--closed li:nth-child(3){animation-delay:200ms;}
#nav.site-nav--closed li:nth-child(4){animation-delay:100ms;}
#nav.site-nav--closed li:nth-child(5){animation-delay:0ms;}

section{padding:5rem 0 0;height:calc(100vh);}
section img{/*max-height:60vh;*/-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);transition:all 1s ease-in-out 0.5s;object-fit: cover;}
section.snap-scroll-visible img{-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}

#hero{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;color:#fff;padding:0;transition:all 0.6s ease-in-out 0s;background:#232323;}
#hero .fake-inline-box{z-index: 1;}
#hero h2, #hero h3{color:#fff;text-align:right;margin:0;opacity: .85;}
#hero h2{font-size:14rem;font-weight:900;line-height:.75em;}
#hero h3{font-family:linotype-sabon,sans-serif;}
#hero .explore{bottom:30px;left:50%;transform:translateX(-50%);text-align:center;font-size:0.8rem;letter-spacing:0.15em;color:#fff;transition:all 0.6s ease-in-out 0s;z-index: 1;text-decoration:none;}
#hero .explore::after{content:"";width:1px;height:40px;background-color:#fff;display:block;margin:0 auto;transition:all 0.6s ease-in-out 0s;}
#hero .explore span{transform:rotate(-90deg);display:block;text-indent:85px;}

#heroimg{position: absolute;top: 0;left: 0;width: 100%;height: 100vh;overflow: hidden;}
#heroimg img{max-height: none;width: 100%;height: 100vh;object-fit: cover;opacity: .6}

#content{background-color:#fff;margin-bottom:60vh;}

#footer{position:fixed;background-color:#232323;right:0;bottom:0;left:0;height:60vh;z-index:-1;padding:200px 0;color:#fff;font-size:0.875em;}
#footer h2{color:#fff;}

.socials a{color:#232323;}

.content:nth-of-type(2n){background: #232323;}
.content .paragraph{padding: 3rem;}
.content .paragraph h2{font-weight: 900;font-family:linotype-sabon,sans-serif;font-size: 4rem;}
.content:nth-of-type(2n) .paragraph h2{color: #fff;}




.button--bestia {
	font-family: freight-display-pro, serif;
	font-size: 1.15rem;
	color: #fff;
	background: none;
	padding: 0;
}

.button--bestia .button__bg {
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #e7e7e7;
	border-radius: 0.85rem;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--bestia:hover .button__bg {
	transform: scale3d(1.2,1.2,1);
}

.button--bestia .button__bg::before,
.button--bestia .button__bg::after {
	content: '';
	position: absolute;
	background: #000;
}

.button--bestia .button__bg::before {
	width: 110%;
	height: 0;
	padding-bottom: 110%;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transform: translate3d(-50%,-50%,0) scale3d(0,0,1);
}

.button--bestia:hover .button__bg::before {
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
	transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
}

.button--bestia .button__bg::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.3s;
}

.button--bestia:hover .button__bg::after {
	opacity: 1;
	transition-duration: 0.01s;
	transition-delay: 0.3s;
}

.button--bestia span {
	display: block;
	position: relative;
	padding: 1.5rem 3rem;
	mix-blend-mode: difference;
}