@font-face {
    font-family: 'gt_haptik_medium';
    src: url('/Font/GT-Haptik-Medium.eot');
    src: url('/Font/GT-Haptik-Medium.eot?#iefix') format('embedded-opentype'),
         url('/Font/GT-Haptik-Medium.woff') format('woff'),
         url('/Font/GT-Haptik-Medium.ttf') format('truetype'),
         url('/Font/GT-Haptik-Medium.svg#gt_haptik_medium') format('svg');
    font-weight: normal;
    font-style: normal;
}


/**************** RESET STYLES IS A GOOD THING *************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, 
menu, footer, header, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0;}

main, article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {display: block;}

a{text-decoration: none; transition: .5s;}
a img {border: 0;}

.main-header a:hover,
.repertoire ul a:hover,
.main-footer a:hover,
.archive h3 a:hover,
a[href]{color: #aaaaaa;}

.main-header a,
.repertoire ul a,
.main-footer a,
.archive h3 a,
a:hover{color: black;}
 
figure {position: relative;}
figure img {width: 100%;}

p{margin-bottom: 1.5rem;}
p:last-child{margin-bottom: 0;}

mark {
    background-color: yellow;
    color: black;
}

img{user-drag: none; -moz-user-select: none; -webkit-user-drag: none;}

label{cursor: pointer;}
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; margin: 0; padding: 0; outline: none;}

nav ul{list-style: none;}

strong.uppercase{font-weight: normal; text-transform: uppercase;}

html, body{height: 100%;}

.max-width{width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 3rem;}

h1,h2,h3,h4,h5,h6{font-weight: normal; font-size: inherit;}
h2,h3{font-size: 2.5rem; line-height: 1;}
h2{margin-bottom: 3rem;}

table{border-spacing: 0; width: 100%;margin-bottom: 1.5rem;}
table td{vertical-align: top;}
table td:first-child{padding-right: 1rem; white-space: nowrap;}

html{font-family: 'gt_haptik_medium', Helvetica, sans-serif; font-size: 20px; line-height: 1.25;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body{padding-top: 85px; overflow-x: hidden;}

main{min-height: 100%; position: relative;}
main.max-width{padding: 2.5rem 3rem 11.25rem;}

main .section{margin-bottom: 5rem;}

.hidden{width: 0; height: 0; overflow: hidden; opacity: 0;}

.square{margin-bottom: 1.5rem; cursor: pointer; pointer-events: none;}
.square img{width: 275px; height: 275px; pointer-events: all;}
.square figcaption{font-size:0.7rem; line-height: 1.25rem; padding-top: 0.5rem; pointer-events: all;}
.square figcaption.more-images:after{content: url(/images/more-images.svg); height: 1em; width: 1em; display: inline-block; vertical-align: sub; margin-left: 5px;}

.archived{position: absolute; bottom: 0; width: 100%; padding: 1rem; background: #FF6600; z-index: 10;}

/******* HEADER *****/

.main-header {padding-top: 35px; padding-bottom: 1.25rem; position: fixed; top: 0; width: 100%; left: 0; right: 0; margin: auto; background: white; z-index: 11; box-shadow: 0px 3px 4px rgba(0,0,0,0.1);}
.main-header nav .left{float: left;}
.main-header nav .right{float: right;}

.main-header nav li{float: left; margin-left: 20px;}
.active>a, a.active{border-bottom: 1px solid black;}

.main-nav{margin-left: 45px;}

nav .sub-nav{position: absolute; top: 100%; margin-top: -1.25rem; left: 0; background: white; width: 100%; font-size: 2.5rem; line-height: 1; display: none; overflow: hidden; box-shadow: 0px 3px 4px rgba(0,0,0,0.1);}
nav .sub-nav ul{padding: 4.125rem 3rem 1rem;}
nav .sub-nav li{margin: 0; display: block; float: none; margin-bottom: -1rem; padding-bottom: 1rem; overflow: hidden;}
nav .sub-nav li a{line-height: 1;}

/* .main-header nav li:hover .sub-nav{opacity: 1; pointer-events: all;} */

/******** NEWS ********/

body.has-news{padding-top: 0;}

.news{color: #aaaaaa; padding-top: 35px;}
.news + .main-header{position: relative;}

/****** DOWNLOADS ****/

.downloads {margin-top: 1rem;}
.downloads ul{list-style: none;}

/******* INTRO ******/

.intro{min-height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center bottom;}
.intro .max-width{padding: 3rem;}

.intro + main{min-height: 0;}

/******* GRID ******/

.grid {list-style: none; font-size: 0;}
.grid li{width: 33%; width: calc(100% / 3 - (2rem / 3)); display: inline-block; vertical-align: top; margin-bottom: 1rem; font-size: 1rem;}
.grid li:not(:nth-child(3n)){margin-right: 1rem;}
/****** REPERTOIR *******/
.repertoire ul{list-style: none; counter-reset: repertoire; margin-top: 1rem;}
.repertoire ul li{padding-left: 50px; position: relative; counter-increment: repertoire;}
.repertoire ul li:before{content: counter(repertoire, upper-roman); position: absolute; top: 1.33rem; left: 0;}
.repertoire article{margin-bottom: 2rem;}
.repertoire article:last-child{margin-bottom: 0;}

/******* ARCHIVE *******/

.archive h3{margin-bottom: 1rem;}

/********* SEARCH *******/

.search ul{list-style: none; counter-reset: search;}
.search ul li{margin-top: 1rem; counter-increment: search; position: relative; padding-left: 50px;}
.search ul li:before{content: counter(search, upper-roman); position: absolute; left: 0;}

.fallback-search{margin-bottom: 1.5rem;}
.fallback-search input{width: calc(100% - 1.1rem); max-width: 350px; border: none; border-bottom: 1px solid; color: black; font: inherit; -webkit-appearance: none;}
.fallback-search input::placeholder{color: black;}
.fallback-search button{width: 0.8rem; height: 0.8rem; background: none; border: none; cursor: pointer; position: relative;}
.fallback-search button:before{content: "."; font-size: 0; line-height: 0; display: block; width: 50%; height: 50%; border-radius: 100%; border: 2px solid black; position: absolute; top: 0; left: 0;}
.fallback-search button:after{content: "."; font-size: 0; line-height: 0; display: block; width: 50%; height: 2px; position: absolute; bottom: 1%; right: 14%; background: black; transform-origin: bottom right; transform: rotate(45deg);}


/******* GALLERY ********/

.gallery{position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 3rem; z-index: 12;}
.gallery .background{background: rgba(255,255,255,0.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.gallery .background:before, .gallery .background:after{content: "."; font-size: 0; line-height: 0; display: block; width: 30px; height: 2px; position: absolute; background: black; top: 1.5rem; right: 0.8rem; transform-origin: center center; cursor: pointer;}
.gallery .background:before{transform: rotate(-45deg);}
.gallery .background:after{transform: rotate(45deg);}

.gallery figure{position: absolute; background: rgba(255,255,255,0.6); overflow: hidden;}
.gallery figure img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 100%; max-height: 100%;}

.gallery figure .arrow{width: 50%; height: 100%; position: absolute; top: 0; background: none; border: none; cursor: pointer; font: inherit;}
.gallery figure .arrow:before{content: attr(data-text); border-width: 2px; position: absolute; bottom: 0; opacity: 0; transition: .5s; font-size: 0.7rem; background: white; padding: 0.5rem 1rem; text-transform: uppercase;}
.gallery figure .arrow-left{left: 0;}
.gallery figure .arrow-left:before{left: 0;}
.gallery figure .arrow-right{right: 0;}
.gallery figure .arrow-right:before{right: 0;}
.gallery figure .arrow:hover:before{opacity: 1;}

.loader{width: 50px; height: 50px; border: 1px solid white; border-top-color: black; border-top-width: 2px; border-radius: 100%; position: absolute; top: 50%; left: 50%; margin: -25px; -webkit-animation: rotate 1s infinite; animation: rotate 1s infinite;}

@-webkit-keyframes rotate{
	from{transform: rotate(0);}
	to{transform: rotate(360deg);}
}

@keyframes rotate{
	from{transform: rotate(0);}
	to{transform: rotate(360deg);}
}

/******* FOOTER *******/

/* .intro + main .main-footer:only-child{position: relative; margin: -2.5rem 0 -11.25rem} */

.main-footer{position: absolute; padding: inherit; padding-bottom: 2.5rem; left: 0; bottom: 0; width: 100%;}
.main-footer nav{float: left;}
.main-footer nav a{margin-right: 1rem;}
.main-footer form{float: right;}
.main-footer form input{width: 175px; border: none; border-bottom: 1px solid; color: black; font: inherit; -webkit-appearance: none;}
.main-footer form input::placeholder{color: black;}
.main-footer form button{width: 0.8rem; height: 0.8rem; background: none; border: none; cursor: pointer; position: relative;}
.main-footer form button:before{content: "."; font-size: 0; line-height: 0; display: block; width: 50%; height: 50%; border-radius: 100%; border: 2px solid black; position: absolute; top: 0; left: 0;}
.main-footer form button:after{content: "."; font-size: 0; line-height: 0; display: block; width: 50%; height: 2px; position: absolute; bottom: 1%; right: 14%; background: black; transform-origin: bottom right; transform: rotate(45deg);}

/******* 404 ******/

.thumbleweed{width: 150px; height: 162px; position: absolute; bottom: 126px; left: 0;  animation: jumping 3s infinite, rolling 8s linear infinite, rotating 3s linear infinite;}

@keyframes thumbleweed{
	100%{left: 100%; transform: translate(100%, 0) rotate(360deg);}
}

@keyframes jumping {
    0%, 100%{
        bottom: 186px;
        animation-timing-function: ease-in;
    }
    25%, 75%{
        bottom: 126px;
        animation-timing-function: ease-out;
    }
    
    50% {
		bottom: 166px;
		animation-timing-function: ease-in;
	}
}

@keyframes rolling {
    0% {
        left: -150px;
    }
    100% {
        left: 100%;
    }
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/******* Misc *******/

.cf:after{content: "."; font-size: 0; line-height: 0; clear: both; display: block; visibility: hidden; opacity: 0;}

.burger, #triggerNav{display: none;}

@media all and (max-width: 800px){
	html{font-size: 16px;}
	.intro .max-width, .gallery{padding: 1rem;}
	.max-width, main.max-width{padding-left: 1rem; padding-right: 1rem;}
	
	h1, h2,h3, .main-header .main-nav>li,nav .sub-nav{font-size: 2rem;}
	
	/******* HEADER ******/
	.main-header{padding: 1rem 0;}
	.main-header nav>a:first-child{display: none;}
	.main-header .main-nav>li{font-size: 1rem;}
	.main-header nav li:first-child{margin-left: 0;}
	.main-nav{margin: 0;}
	nav .sub-nav{margin: 0;}
	nav .sub-nav ul { padding: 0.825rem 1rem 1rem; }
	/*
	.main-header nav{left: 100%; height: calc(100vh - 100%); position: absolute; background: white; z-index: 1; top: 100%; width: 100%; padding: 0 1rem; transition: .5s;}
	
	.main-header nav .left, 
	.main-header nav .right, 
	.main-header .main-nav>li{float: none; margin: 0;}
	
	nav .sub-nav{opacity: 1; pointer-events: all; position: static; margin: 0; padding: 1rem; font-size: 1rem;}
	nav .sub-nav li{margin: 0.5rem 0;}
	
	.lang-nav{position: absolute; top: -37px; right: 1rem;}
	
	.burger{display: block; background: none; -webkit-appearance: none; border: none; float: right; clear: both; font: inherit; position: relative; transition: .5s; right: 0; line-height: 1;}
	.burger .icon{display: inline-block; vertical-align: top; height: 1rem; width: 20px;position: relative; margin-right: 5px;}
	.burger .icon .bar{height: 2px; width: 20px; background: black; display: block; position: absolute; right: 0; transition: .5s; transform-origin: center;}
	.burger .icon .bar:first-child{top: 0;}
	.burger .icon .bar:nth-child(2){top: 50%; margin-top: -1px;}
	.burger .icon .bar:last-child{bottom: 0;}
	.burger .text{vertical-align: top; position: relative; top: -3px;}
	
	#triggerNav:checked + .burger{right: calc(100% - 62px);}
	
	#triggerNav:checked + .burger .icon .bar:first-child{transform: translateY(3px) rotate(30deg); width: 15px;}
	#triggerNav:checked + .burger .icon .bar:nth-child(2){opacity: 0;}
	#triggerNav:checked + .burger .icon .bar:last-child{transform: translateY(-4px) rotate(-30deg); width: 15px;}

	#triggerNav:checked ~ nav{left: 0;}
	
	*/
	
/* 	.gallery figure img{width: 100%;} */
	
	/******* GRID *******/
	
	.grid li{width: 100%; margin-right: 0!important;}
	
	/***** repertoir ******/
	
	.repertoire ul li:before{top: 0.85rem;}
	
	/******* FOOOTER *****/
	.main-footer nav, .main-footer form{float: none;}
	.main-footer nav a{display: block;}
	.main-footer form{margin-top: 1rem;}
	.main-footer form input{width: calc(100% - 1.1rem);}
	
	.thumbleweed{width: 60px; height: 64px; }
}