@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 { background:#ffdcd7; }
body > *, main > * { position:relative; width:100%; }
/*body, a { cursor:url("../images/cursor.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:1rem; }

/*=================================== Style snippets ===================================*/
.double { column-count:2; column-gap:3rem; }
.single { width:30% !important; }
.hidden { display:none; }
.collapsed { max-height:8.5rem; }
.past { opacity:0.4; }

/*=================================== Templates ===================================*/
header { padding:3rem; display:inline-block; }
header h1, header h3, header span { width:40%; margin:0 20% 3rem 40%; float:left; }
header .logo, header h2, header h1 { float:left; }
header .logo { width:15rem; height:6.6rem; background:url("/assets/images/logo.png") no-repeat; background-size:contain; }
header .logo:hover { background:none; }
header .logo img { width:100%; display:none; }
header .logo:hover img { display:unset; }
header .menu  { display:none; }
header .language { border:0.1rem solid #fff; border-radius:1.1rem; text-align:center; float:right; }
header .language a { width:1.6rem; height:1.6rem; margin:0.3rem; padding-top:0.5rem; border-radius:0.8rem; float:left; }
header .language .active { background-color:#fff; }
header .continue { padding-left:3rem; left:3rem; bottom:3rem; position:absolute; background:url("/assets/images/continue.png") no-repeat; background-size:2rem; background-position:center left; }
header .social { padding-right:2.5rem; right:0; top:50%; position:absolute; transform:rotate(-90deg); display:inline-block; background:url("/assets/images/link-flipped.png") no-repeat right; background-size:1rem; }

section { padding:2rem 3rem; background-size:100%; border-top:0.05rem solid #2e31da; /* max-height:300vh; transition:all 1s linear;*/ }
section > h2 { padding-left:40%; cursor:pointer; background-size:2rem !important; background:url("/assets/images/close.png") no-repeat center right; }
section.collapsed > h2 { background:unset; }
section.collapsed > h2:hover { background:url("/assets/images/continue.png") no-repeat center right; }
section.contact > h2 { cursor:default; background:none !important; }
section h3, section .links { float:left; }
section, section .icon { background-repeat:no-repeat; position:relative; }
section .mobileImage { display:none; }
section .icon { left:5rem; top:5rem; width:30rem; height:30rem; position:absolute; background-size:contain; }
section .icon img { width:100%; display:none; }
section .icon:hover { background-image:none !important; }
section .icon:hover img { display:unset; }
section .links { height:4rem; margin-bottom:1rem; }
section .links .link { padding-left:5rem; text-align:left; background:url("/assets/images/link.png") no-repeat left 0.4rem; background-size:3rem; }
section .close { width:2rem; height:2rem; background:url("/assets/images/close.png") no-repeat; background-size:contain; }
section { overflow:hidden; }
section > div { width:100%; display:inline-block; }
section .main, section .links, section .slideshow, section .media, section .list, .contact h3 { width:60%; margin-left:40%; }
section .main, section .links, footer .main { margin-top:5rem; }
section .main { margin-bottom:8rem; }
section .media { width:35rem; margin-top:4rem; }
section .media.mobile { display:none; }
section .media * { width:100%; margin-bottom:1rem; }
section .media iframe { height:19.7rem; }

footer { width:100%; padding:3rem; background-color:#2e31da; }
footer, footer * { float:left; }
footer > div { width:60%; margin-left:30%; }
footer .logo { width:10%; }
footer .goodbye { width:30rem; margin-right:5rem; }
footer .goodbye a { padding-right:2rem; background:url("/assets/images/link-white.png") no-repeat top right; background-size:1.2rem; }
footer .social img { width:4rem; margin-left:1rem; }
footer .legal { margin-top:3rem; }
footer .legal div { width:17.5rem; }
footer .legal div a { float:unset; }

.contact .main { margin-bottom:5rem; }
.contact > a { margin:2rem 0 4rem 30%; padding-left:10%; display:inline-block; background:url("/assets/images/link.png") no-repeat; background-size:2.5rem; }

.list { margin-bottom:4rem; display:inline-block; position:relative; }
.list ul, section .list li { width:100%; position:relative; }
.list li:first-of-type {  border:none; }
.list li { padding:1.5rem 0; border-top:0.07rem solid #fff; display:inline-block; }
.list li div:first-of-type { margin:0 !important; }
.list div { float:left; }
.list > .wrapper { overflow:hidden; }
.list.deals li > div { margin-left:7rem; }
.list.deals .description { width:28rem; }
.list.deals h5 { padding-bottom:1rem; }
.list.events li > div { margin-left:5rem; }
.list.events .description { width:21rem; }
.list .date { width:9rem; }
.list .info { width:15rem; }
.list .info a { padding-left:3rem; background-size:2rem !important; float:left; }
.list .info .location { min-height:2rem; background:url("/assets/images/location.png") no-repeat; }
.list .info .tickets { margin-top:1.5rem; background:url("/assets/images/visit-active.png") no-repeat left center; }
.list .number { width:3rem; }
.list .price { padding:0.6rem 0.6rem 0.5rem 0.6rem; border-radius:1.15rem; border:0.1rem solid #fff; }
.list .status, .list .year { padding-top:0.3rem; }
.list .year { float:right; }
.list .status { width:18rem; padding-left:6rem; background-size:2rem !important; }
.list .name { width:25rem; margin-right:4rem; }
.list .status.awarded { background:url("/assets/images/awarded.png") no-repeat; }

.list .status.milestone { background:url("/assets/images/awarded.png") no-repeat; }
.list .status.nominated { background:url("/assets/images/nominated.png") no-repeat; }
.list .status.published { background:url("/assets/images/published.png") no-repeat; }
.list .link { width:5rem; }
.list .link img { width:2rem; }
.list .link img:hover { content:url("/assets/images/visit-active.png"); }
.list .up, .list .down { width:2.5rem; height:3rem; left:-9rem; position:absolute; cursor:pointer; }
.list .up { top:4rem; background:url("/assets/images/up.png") no-repeat; background-size:100%; }
.list .down { bottom:0; background:url("/assets/images/down.png") no-repeat; background-size:100%; }

.slideshow { overflow:hidden; }
.slideshow .radio, .slideshow .radio div, .slideshow .clients, .slideshow .logo { float:left; }
.slideshow .radio { padding:0.2rem 0 0 2rem; }
.slideshow .radio div { width:0.8rem; height:0.8rem; margin-right:0.3rem; border-radius:0.4rem; border:0.1rem solid #fff; cursor:pointer; }
.slideshow .radio .active { background-color:#fff;  }
.slideshow .clients { display:flex; margin-top:3rem; position:relative; }
.slideshow .logo { width:12rem; height:11rem; margin-right:8rem; }
.slideshow .logo img { width:100%; }
.slideshow .logo button { margin:1.5rem 2rem; padding:1rem 1rem 0.6em 1rem; border:0.05rem solid #2e31da; display:none; cursor:pointer; }
.slideshow .logo:hover button { display:unset; }
.slideshow .detail { width:50vw; height:100vh; right:0; top:0; padding:2rem; z-index:100; position:fixed; background-color:#fff; display:none; }
.slideshow .detail.active { display:unset; }
.slideshow .detail img, .slideshow .detail video, .slideshow .detail .caption, .slideshow .detail h4, .slideshow .detail span { width:60%; }
.slideshow .detail img, .slideshow .detail video { margin-bottom:1rem; }
.slideshow .detail .caption { margin-bottom:5rem; }
.slideshow .detail .close { float:right; }

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

/*Josefin cuts*/
.language { font:400 0.8rem "Josefin Sans", Sans-serif; }
.price, .legal { font:400 1rem "Josefin Sans", Sans-serif; }
h3, span, .status, .year, .info { font:400 1.1rem/1.5rem "Josefin Sans", Sans-serif; }

/*Vesper cuts*/
.social, .caption, .description div, .logo button { font:400 1.1rem/1.4rem "Vesper Libre", serif; }
h5 { font:500 1.3rem/2rem "Vesper Libre", serif; }
h4, .continue, .links .link, .goodbye { font:400 1.6rem/2rem "Vesper Libre", serif; }
.contact > a, .date, .number { font:500 3rem/3rem "Vesper Libre", serif; }
h1, h2 { font:500 4.4rem/5.5rem "Vesper Libre", serif; }

/*Text colors & decorations*/
h3 { letter-spacing:0.15rem; }
.language, h3, .status, .info { text-transform:uppercase; }
.continue, h3, .link, .price, .year, .goodbye, .legal, .info { color:#fff; }
h1, .collapsed h2, span, h4, .logo button, .caption, .number, .description, .status, .contact > a, .date, .name { color:#2e31da; -webkit-text-fill-color:#2e31da; -webkit-text-stroke-width:0; }
.active h2 {}
h2 { color:#ffdcd7; -webkit-text-fill-color: #ffdcd7; -webkit-text-stroke-width: 0.08rem; -webkit-text-stroke-color: #2e31da; }
/*Link colors & decorations*/
.language a:link, .language a:visited, .language a:hover, .language a:active, .continue:link, .continue:visited, .link a:link, .link a:visited, .goodbye a:link, .goodbye a:visited, .legal a:link, .legal a:visited, .info a:link, .info a:visited { text-decoration:none; color:#fff; }
.language a.active:link, .language a.active:visited, .language a.active:hover, .language a.active:active, .goodbye a:hover, .goodbye a:active, .legal a:hover, .legal a:active { text-decoration:none; color:#ffdcd7; }
h1 a:link, h1 a:visited, h4 a:link, h4 a:visited, span a:link, span a:visited, .continue:hover, .continue:active, .social:link, .social:visited, .link a:hover, .link a:active, h5 a:link, h5 a:visited, .contact > a:link, .contact > a:visited, .contact > a:hover, .contact > a:active, .info a:hover, .info a:active { text-decoration:none; color:#2e31da; }
.social:hover, .social:active, h5 a:hover, h5 a:active { text-decoration:none; color:#fff; }
h1 a:link, h1 a:visited, h4 a:link, h4 a:visited, span a:link, span a:visited, .contact > a div { border-bottom:0.1rem solid transparent; display:inline-block; }
h4 a:hover, h4 a:active, span a:hover, span a:active, .contact > a:hover div, .contact > a:active div { border-bottom:0.1rem solid #2e31da; }
h1 a:hover, h1 a:active { -webkit-text-fill-color: #ffdcd7; -webkit-text-stroke-width: 0.08rem; -webkit-text-stroke-color: #2e31da; }

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

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

	.double { column-count:1; column-gap:0; }
	.single { width:100% !important; }
	.collapsed { max-height:9rem; }
	.past { display:none !important; }

	header { padding:3rem 3rem 6rem 3rem; }
	header h1, header h3, header span { width:100%; margin:0 0 3rem 0; }
	header .logo { width:10rem; height:4.4rem; margin-bottom:5rem; }

	section { background:none !important; }
	section > h2 { width:100%; padding-left:0; background:unset; }
	section.collapsed > h2:hover { background:unset; }
	section .icon { display:none; }
	section .main, section .links, section .slideshow, section .media, section .list, .contact h3 { width:100%; margin-left:0; }
	section .main { margin-bottom:6rem; }
	section .links { height:unset; }
	section .links button { width:100%; }
	section .links button:first-of-type { margin-bottom:2rem; }
	section .media * { margin-bottom:2rem; }
	section .media.mobile { display:unset; }

	footer > div { width:60%; margin-left:20%; }
	footer .logo { width:20%; }
	footer .goodbye { width:100%; margin-right:unset; }
	footer .goodbye a { margin-top:1rem; }
	footer .social { margin-top:2rem; }
	footer .social img { margin-right:1rem; margin-left:unset; }
	footer .legal div { width:100%; margin-bottom:1rem; }

	.list.deals li > div { margin-left:unset; }
	.list.deals .description { width:75%; }
	.list.events ul { position:0 !important; }
	.list.events li > div { margin-left:unset; }
	.list.events .description { width:60%; }
	.list .date { width:40%; }
	.list .info { width:60%; margin:2rem 0 0 40% !important; }
	.list .number { width:25%; }
	.list .price { margin:2rem 0 0 25% !important; }
	.list .status { width:45%; padding-left:2rem; background-size:1.7rem !important; }
	.list .status, .list .year { padding-top:0.4rem; }
	.list .name { width:55%; margin-right:0; }
	.list .link { width:12%; margin:2rem 0 0 45%; }
	.list .year { float:left; margin-top:2rem; }
	.list .up, .list .down { display:none; }

	.slideshow .radio { display:none; }
	.slideshow .clients { width:100%; display:unset; }
	.slideshow .logo { width:40%; height:11rem; margin:0 5% 3rem 5%; }
	.slideshow .logo button { border:0.05rem solid #fff; display:unset; }
	.slideshow .detail { width:100vw; /*position:absolute;*/ }
	.slideshow .detail.active { display:unset; }
	.slideshow .detail img, .slideshow .detail video, .slideshow .detail .caption, .slideshow .detail h4, .slideshow .detail span { width:100%; }
	.slideshow .detail .close { margin-bottom:3rem; }

	.contact > a { margin:2rem 0 4rem 0; padding-left:15%; background-size:1.5rem; background-position:0 0.4rem; }

	h2 { font:500 3.1rem/5.5rem "Vesper Libre", serif; }
	.contact > a { font:500 2.3rem/3rem "Vesper Libre", serif; }

	.logo button { color:#fff; -webkit-text-fill-color:#fff; }
}