@charset "UTF-8";

/*=================================== Custom fonts ===================================*/

/*=================================== Initialization & General ===================================*/
* { margin:0; padding:0; border:none; box-sizing:border-box; list-style:none; }
html { font-size:1vw; }
/*body, a { cursor:url("../images/cursor.png"), pointer !important; }*/
body { cursor:url("/assets/images/cursor-black.png"), pointer !important; }
body > * { position:relative; width:100%; }
a { cursor:url("/assets/images/cursor-black-active.png"), pointer !important; }
h1, h2, h3, h4, h5, h6, p { border:0; font-size:inherit; font-weight:inherit; }
button { background-color:transparent; background-repeat:no-repeat; cursor:pointer; overflow: hidden; outline:none; }
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p, span p { margin-bottom:1.5rem; }

/*=================================== Style snippets ===================================*/
.opaque { opacity:0.4; }
.clickable { cursor:url("/assets/images/cursor-black-active.png"), pointer !important; }
.details .clickable { cursor:url("/assets/images/cursor-white-active.png"), pointer !important; }

/*=================================== Templates ===================================*/

header { width:30%; padding:3rem; left:0; top:0; position:absolute; z-index:10; }
header .logo { width:6rem; position:fixed; transition:width 0.2s linear; -webkit-transition:width 0.2s linear; }
header .logo.active { width:3rem; }
header .toggle { display:none; }
header nav { margin:25rem 0 0 6rem; }
header li a, footer a { display:inline-block; }
header li a:hover, header li.active a { padding-left:1.5rem; }
header .blog:hover { padding-right:2rem; display:inline-block; background:url("/assets/images/link.png") no-repeat; background-size:1.5rem; background-position:right 45%; }

footer { padding:4rem 6rem; display:inline-block; background-color:#ededeb; }
footer .logo { width:16rem; }
footer > div { width:40%; float:right; }
footer > div > * { margin-bottom:2rem; }
footer .social a { width:3.5rem; height:3.5rem; margin-right:1rem; display:inline-block; }
footer .social .pinterest { background:url("/assets/images/pinterest.png") no-repeat; background-size:contain; }
footer .social .pinterest:hover { background:url("/assets/images/pinterest-active.png") no-repeat; background-size:contain; }
footer .social .instagram { background:url("/assets/images/instagram.png") no-repeat; background-size:contain; }
footer .social .instagram:hover { background:url("/assets/images/instagram-active.png") no-repeat; background-size:contain; }
footer .social .linkedIn { background:url("/assets/images/linkedIn.png") no-repeat; background-size:contain; }
footer .social .linkedIn:hover { background:url("/assets/images/linkedIn-active.png") no-repeat; background-size:contain; }
footer .social .spotify { background:url("/assets/images/spotify.png") no-repeat; background-size:contain; }
footer .social .spotify:hover { background:url("/assets/images/spotify-active.png") no-repeat; background-size:contain; }
footer .legal { margin-top:6rem; }
footer .legal div { float:left; margin-right:2rem; }

.home main { width:100%; background-color:#f7f7f6; }
.home main a { width:29%; margin:12rem 3% 3rem 0; float:right; }
.home main a img { width:100%; }

.gallery h3 { padding-right:1rem; }
.gallery h3, .gallery h4 { display:inline-block; }
.gallery .caption { width:100%; padding-top:1rem; }
.gallery .details { width:100vw; height:100vh; padding:3rem; left:0; top:0; position:fixed; z-index:100; display:none; background-color:#000000; cursor:url("/assets/images/cursor-white.png"), pointer !important; }
.gallery .details.active { display:block; }
.gallery .details img { width:auto; height:auto; max-width:75vw !important; max-height:80vh !important; }
.gallery .details > div { width:100%; padding-bottom:3rem; display:inline-block; }
.gallery .details > div > div { float:right; }
.gallery .details .title { padding-right:10%; }
.gallery .details .copyright { width:18%; }
.gallery .details .close { width:2rem; height:2rem; background:url("/assets/images/close.png") no-repeat; background-size:contain; }
.gallery .goToTop { width:auto; bottom:8rem; right:-3.3rem; position:fixed; z-index:10; transform:rotate(270deg); }
.gallery .goToTop.active { display:block; }
.gallery .goToTop img { width:4rem; margin:0 1rem 0.3rem 0; }
.gallery .single { float:left; }
.gallery .single:nth-of-type(1) { margin:0 12rem 16rem 40rem !important; float:right !important; }
.gallery .single, .gallery .single img { width:auto; height:auto; max-width:45rem; max-height:45rem; }
.gallery .portrait:nth-of-type(odd) { margin:16rem 0 10rem 9rem; float:left; }
.gallery .portrait:nth-of-type(even) { margin:0 3rem 16rem 0; float:right; }
.gallery .landscape:nth-of-type(odd) { margin:22rem 0 6rem 9rem; float:left; }
.gallery .landscape:nth-of-type(even) { margin:6rem 3rem 16rem 0; float:right; }
.gallery .double { margin:0 12rem 16rem 0; float:right; }
.gallery .double, .gallery .double > img { width:66rem; }

.article main { padding:6rem 3rem 12rem 35rem; }
.article main, .article main > div > img { width:100%; }
.article main h1 { margin-top:2rem; }
.article main h2 { margin-top:12rem; }
.article main span { margin-top:3rem; display:inline-block; }
.article main .single  { width:70%;}
.article main .double span { column-count:2; column-gap:6rem; }
.article main .callToAction { margin-top:6rem; }
.article .instafeed { width:89rem; margin-bottom:6rem; float:right; overflow:hidden; }
.article .instafeed .wrapper { width:297rem; margin-top:2.5rem; display:inline-block; position:relative; }
.article .instafeed .wrapper div { width:33rem; float:left; }
.article .instafeed .wrapper img { width:19rem; height:19rem; object-fit:cover; }
.article .instafeed .next { height:1rem; width:4rem; margin-top:1.5rem; background:url("/assets/images/next.png") no-repeat; background-size:contain; background-position:bottom; }

/*=================================== Texts ===================================*/

h2, h3, h4, .legal, .copyright, .goToTop { font:300 1.1rem/1.8rem "Josefin Sans", Sans-serif; }
header li { font:400 1.2rem/3.0rem "Josefin Sans", Sans-serif; letter-spacing:0.1rem; }
footer .contact { font:300 1.8rem/2.4rem "Josefin Sans", Sans-serif; }
h1, .callToAction { font:300 3.0rem/3.9rem "Josefin Sans", Sans-serif; }


span { font:400 1.8rem/2.4rem "Josefin Sans", Sans-serif; }

h2, header, .contact, .legal, .goToTop { color:#000; }
h2, h3, header { text-transform:uppercase; }
h1, h2, h3, .callToAction { font-weight:400; }
header li.active { font-weight:700; }
.details { color:#fff !important; }

header a:link, header a:visited, footer .contact a:link, footer .contact a:visited, .legal a:link, .legal a:visited { text-decoration:none; color:#000; }
footer .contact a:hover, footer .contact a:visited, .legal a:hover, .legal a:active { text-decoration:none; color:#000; font-weight:400; }
header a:hover, header a:active { text-decoration:none; color:#000; font-weight:700; }
span a:link, span a:visited, .callToAction a:link, .callToAction a:visited { padding-left:2.5rem; text-decoration:none; border-bottom:0.05rem solid #000; color:#000; background:url("/assets/images/link.png") no-repeat; background-size:1rem; background-position:0 45%; }
span a:hover, span a:active, .callToAction a:hover, .callToAction a:active { background:url("/assets/images/link-active.png") no-repeat; background-size:2rem; background-position:0 45%; }

/*=================================== Mobile Styles ===================================*/

@media all and (max-width:600px) {
	html { font-size:3vw; }

	header { width:100%; }
	header .logo { width:6rem; z-index:30; position:absolute; }
	header .logo.active { width:6rem; }
	header .toggle { width:4rem; height:4rem; right:3rem; top:3rem; z-index:30; position:absolute; background:url("/assets/images/navigation.png") no-repeat; background-size:contain; display:block; }
	header .toggle.active { background:url("/assets/images/navigation-active.png") no-repeat; background-size:contain; display:block; }
	header nav { width:100vw; height:100vh; padding-top:20rem; left:0; top:0; margin:0; position:absolute; background-color:#fff; display:none; }
	header nav.active { display:block; }
	header ul { width:100%; text-align:center; }
	header li a:hover, header li.active a { padding-left:0; }

	footer { padding:4rem 6rem; display:inline-block; background-color:#ededeb; }
	footer .logo { margin-bottom:6rem; }
	footer > div { width:100%; float:left; }
	footer > div > * { margin-bottom:2rem; }
	footer .social a { width:3.5rem; height:3.5rem; margin-right:1rem; display:inline-block; }
	footer .legal { margin-top:6rem; }
	footer .legal div { float:left; margin-right:2rem; }

	.home main a { width:50%; margin:12rem 0 0 0; overflow:hidden; }
	.home main a img { width:200%; margin-left:-50%; }

	.gallery .details { padding:0; }
	.gallery .details img { width:100%; max-width:unset !important; max-height:unset !important; }
	.gallery .details > div > div { float:left; }
	.gallery .details h3, .gallery .details h4 { padding:0 !important; }
	.gallery .details .title, .gallery .details .copyright { width:80%; padding-right:0; }
	.gallery .details .title { padding:0 0 0 3rem; }
	.gallery .details .copyright { padding:3rem 0 4rem 3rem;  }
	.gallery .details .close { float:right; margin:3rem 3rem 0 0; }
	.gallery .goToTop { display:none; }
	.gallery .single:nth-of-type(1) { margin:12rem 3rem 10rem 0 !important; float:right !important; }
	.gallery .single, .gallery .single img { width:100%; max-width:unset; max-height:unset; }
	.gallery .portrait { width:60%; }
	.gallery .portrait:nth-of-type(odd) { margin:0 0 10rem 3rem; }
	.gallery .portrait:nth-of-type(even) { margin:0 3rem 10rem 0; }
	.gallery .landscape { width:100%; }
	.gallery .landscape:nth-of-type(odd) { margin:0 0 10rem 0; }
	.gallery .landscape:nth-of-type(even) { margin:0 0 10rem 0; }
	.gallery .landscape h3, .gallery .landscape h4, .gallery .double h3, .gallery .double h4 { padding-left:1rem; padding-right:0 !important; }
	.gallery .double { margin:0 0 10rem 0; }
	.gallery .double, .gallery .double > img { width:100%; }

	.article main { padding:12rem 0 6rem 0; }
	.article main h1, .article main h2, .article main span { padding-left:3rem; padding-right:3rem; }
	.article main h2 { margin-top:3rem; }
	.article main span { margin-top:3rem; display:inline-block; }
	.article main .single  { width:100%;}
	.article main .double span { width:100%; column-count:unset; column-gap:unset; }
	.article main .callToAction { margin-left:3rem; }
	.article .instafeed { width:91%; }

	/* Texts */
	header li { font:400 2.0rem/7.0rem "Josefin Sans", Sans-serif; letter-spacing:0.1rem; }
}