/* CSS */
/* PAGE: COLLEGIUM */
/* AUTHOR: hyperstud.io */


@font-face {
    font-family: 'TeX Gyre Heros';
    src: url('../fonts/TeXGyreHeros-BoldItalic.eot');
    src: url('../fonts/TeXGyreHeros-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TeXGyreHeros-BoldItalic.woff2') format('woff2'),
        url('../fonts/TeXGyreHeros-BoldItalic.woff') format('woff'),
        url('../fonts/TeXGyreHeros-BoldItalic.ttf') format('truetype'),
        url('../fonts/TeXGyreHeros-BoldItalic.svg#TeXGyreHeros-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'TeX Gyre Heros';
    src: url('../fonts/TeXGyreHeros-Bold.eot');
    src: url('../fonts/TeXGyreHeros-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TeXGyreHeros-Bold.woff2') format('woff2'),
        url('../fonts/TeXGyreHeros-Bold.woff') format('woff'),
        url('../fonts/TeXGyreHeros-Bold.ttf') format('truetype'),
        url('../fonts/TeXGyreHeros-Bold.svg#TeXGyreHeros-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}



html, body{
	margin:0;
	padding:0;
	font-family: 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	color:#111;
	font-size:16px;
    font-weight:500;
	width:100%;
	height:100%;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-touch-callout: none;
    background:#fff;
}



a, a:focus, a:visited, img{
    outline:none;
    border:none;
}

a{
	position: relative;
	display:inline-block;
}

a, a:visited{
	text-decoration: none;
	color:#111;
}


a, h1, h2, h3, h4, h5, p, span{

}




.italic, em{
	font-style:italic;
}

strong{
	
}



input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    outline-width: 0;
}



/* Table */

.table{
	display:table;
	width:100%;
	height:100%;
}

.table-row{
	display:table-row;
}

.table-cell{
	display:table-cell;
	width:100%;
	height:100%;	
	vertical-align: middle;
	text-align:center;
}

.table-cell-default{
    display: table-cell;
    vertical-align: top;
    text-align: left;
}



*{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}


.onehalf, .onethird, .twothird{
    display: inline-block;
    vertical-align: top;
}

.onehalf{
    width:50%;
}

.onethird{
    width:33.33%;
}

.twothird{
    width:66.67%;
}

.zfs{
    font-size:0px;
}

/* Display Inline Block */

.inlineblock{
    display: inline-block;
    vertical-align: top;
}

.div-2{
    width:50%;
}

.div-3{
    width:33.33%;
}

.div-4{
    width:25%;
}

.div-5{
    width:20%;
}

.div-6{
    width:16.66%;
}

.div-7{
    width:14.28%;
}

.div-8{
    width:12.5%;
}










.grid{
    display: inline-block;
    vertical-align: top;
}

.grid-0{
    padding-left: 30px;
}

.grid-1{
    width:20%;
    padding-left:30px;
}

.grid-2{
    width:10%;
}

.grid-3{
    width:16%;
}

.grid-4{
    width:12%;
}

.grid-5{
    width:10%;
}

.grid-6{
    width: 10%;
}




/* Template */

#wrapper{
    position: relative;
    display:block;
    width:100%;
    height:100%;
    margin:0 auto;
}

.wrapper{
    position: relative;
    display: block;
    width:100%;
    max-width:1920px;
    margin:0 auto;
    padding:0 40px;

}

main{
    min-height:100%;
    -webkit-overflow-scrolling: touch;

    opacity:1;


    -webkit-transition:opacity 100ms ease-in-out;
    -moz-transition:opacity 100ms ease-in-out;
    -o-transition:opacity 100ms ease-in-out;
    transition:opacity 100ms ease-in-out;

}

main.fadeout{
    opacity:0.8;
}


header{
    position: fixed;
    top:0px;
    left:0px;
    right:0px;
    z-index: 100;

    -webkit-transition:top 200ms ease-out;
    -moz-transition:top 200ms ease-out;
    -o-transition:top 200ms ease-out;
    transition:top 200ms ease-out;

}

header .wrapper{
    position: relative;
    padding-bottom:40px;
}

body:not(#home) header{
    background:#fff;
}


header.invisible{
    top:-100px;
}


header #menu{
    display: block;
    text-align: left;
}

header #menu a{
    margin:0;
    padding-bottom:4px;
    border-color:transparent;
}


/* Header Grid */

header #menu .grid-1 a{
    margin-top:20px;
}

header #menu .grid-2 a{
    margin-top:40px;
}

header #menu .grid-3 a{
    margin-top:40px;
}

header #menu .grid-4 a{
    margin-top:20px;
}

header #menu .grid-5 a{
    margin-top:40px;
}

header #menu .grid-6 a{
    margin-top:40px;
}



header #menu a.selected,
header #menu a:hover{
    padding-bottom:2px;
    border-bottom:2px solid #111;
}


/* Text Color:; */


body:not(#home) header #menu a,
body:not(#home) header #menu div,
body:not(#home) header #languages a,
body:not(#home) section#backgrounds .bottom .image-credit,
body:not(#home) section#backgrounds .bottom .date,
body:not(#home) section#backgrounds .bottom .title{
    color:#fff;
}



body:not(#home) header #menu a,
body:not(#home) header #menu div,
body:not(#home) header #languages a,
body:not(#home) section#backgrounds .bottom .image-credit,
body:not(#home) section#backgrounds .bottom .date,
body:not(#home) section#backgrounds .bottom .title,
body:not(#home) #submenu a{
    color:#111 !important;
}

body:not(#home) header #menu a.selected,
body:not(#home) header #menu a:hover{
    border-color:#111 !important;
}


header #logo svg path{
    -webkit-transition: fill 400ms ease;
    -moz-transition: fill 400ms ease;
    -o-transition: fill 400ms ease;
    -ms-transition: fill 400ms ease;
    transition: fill 400ms ease;    
}

body:not(#home) header #logo svg path{
    fill:#111 !important;
}


body#home footer{
    display: none !important;
}


header #languages{
    display: inline-block;
    vertical-align: top;
    position: absolute;
    bottom:100px;
    left:10px;
}

header .logo-wrapper{
    display: block;
    text-align: right;
    margin-bottom:20px;
}

header #logo{
    margin-top:10px;
}

header #logo svg{
    width:auto;
    height:130px;
    max-height:130px;
    /*min-height:45px;*/
    min-height: 50px;
    max-width:738px;
}


#mobilemenu{
    display: none;
}



section{

}


/* Backgrounds */

#backgrounds{
    position: relative;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    height:100vh;

    opacity: 1;
    -webkit-transition: opacity 800ms ease;
    -moz-transition: opacity 800ms ease;
    -o-transition: opacity 800ms ease;
    -ms-transition: opacity 800ms ease;
    transition: opacity 800ms ease;
}

#backgrounds.invisible{
    opacity:0;
}

#backgrounds #dummy{
    position: absolute;
    top:0px;
    top:0px;
    width:50px;
    height:50px;
    opacity: 0;
    pointer-events:none;
}


#backgrounds:not(.contain){
    background-size:cover !important;    
}

#backgrounds.contain{
    background-size:50% auto !important;
}




#backgrounds .bottom{
    position: absolute;
    right:0px;
    left:0px;
    bottom:20px;
}

#backgrounds .bottom .onehalf.first{
    max-width:520px;
}

#backgrounds .bottom .onehalf.second{
    position: absolute;
    right:40px;
    bottom:0px;
    text-align: right;
}






















/* Page */

body:not(#home) main{
    padding-top:276px;
    min-height: 100vh;
}


section.module{
    margin-bottom:40px;
}


/* Module 1 Text */

section.module.style-1{

}




/* Module 2 Image */

section.module.style-2{

}

section.module.style-2 .image,
section.module.style-2 .photo{
    display: block;
    width: auto;
}



/* Module 3 Product */

section.module.style-3{
    display: block;
}

.products{
    display: block;
    margin-left:-20px;
}

.products .product{
    display: inline-block;
    vertical-align: top;
    padding-left:20px;
    margin-bottom:50px;
}

.products .product .image{
    position: relative;
    padding-top:122%;
}

.products .product .image img{
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    width:100%;
    height:100%;
    margin:auto;
    object-fit:contain;
}

.products .product .title{
    display: block;
    margin-top:10px;
}


.preload-img{
    position: absolute;
    top:0px;
    left:0px;
    width:30px;
    height:30px;
    pointer-events:none;
    opacity:0;
}


/* Program */

#submenu{
    white-space: nowrap;
}


#submenu a{
    display: inline-block;
    vertical-align: top;
    position: relative;
    cursor: pointer;
}


body #submenu > div{
    display: none;
}

body#about #submenu > div[data-type="about"],
body#program #submenu > div[data-type="program"],
body#event #submenu > div[data-type="program"]{
    display: inline-block;
}


#submenu .btn-sub.selected{
    padding-bottom:2px;
    border-bottom:2px solid #111;    
}    








/* News */

#news .news{
    position: relative;
    display: block;
    margin-bottom:40px;
    max-width: 520px;
}

#news .news .title{
    display: block;
}
/*
#news .news img{
    position: absolute;
    top: 0px;
    left: 100%;
    height: 100%;
    width: auto;
}*/

#news .news img{
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-top: 20px;
}


#event-detail .modules,
#news-detail .modules{
    display: block;
    margin-top: 20px;
}



/* Events */

#events{
    min-height:55px;
}

#events .event{
    display: block;
    margin-bottom:40px;
}

#events .event .title{
    display: block;
}

#events .event .img-wrapper{
    display: block;
    width: 50%;
}

#events .event .subtitle,
#event #event-detail .subtitle{
    display: block;
    margin-top:5px;
    margin-bottom:5px;
}




/* Event */

.img-wrapper{
    overflow: hidden;
}

.img{
    display: inline-block;
    vertical-align: top;
    width:100%;
    height:auto;
}

.img-wrapper .img{
    margin:-5px 0px -10px -5px;
    width: calc(100% + 10px);
}

.img-credit{
    display: block;
    margin-top:10px;
}


#event-detail .wyiswyg,
#news-detail .wyiswyg{
    display: block;
    margin-top:40px;
}




/* Gallery */

.gallery{
    display: block;
    margin-top:40px;
    margin-left:-10px;
}

.gallery .exhibitionviews{
    display: none;
    margin-bottom:20px;
    margin-left:10px;
    position: relative;
    cursor: pointer;
}

.gallery .exhibitionviews:after{
    content:"";
    position: absolute;
    top:-5px;
    right:0px;
    width:30px;
    height:30px;
    background:url(../img/gallery.svg);
    background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.gallery .photo{
    position: relative;
    margin-bottom:10px;
    padding-top: 21%;
}

.gallery .photo .img-wrapper{
    position: absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:10px;
    margin:auto;
    overflow: hidden;
}

.gallery .photo img{
    position: absolute;
    top:-5px;
    right:-5px;
    bottom:-5px;
    left:-5px;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;    
    min-width:100%;
    max-width:100%;
    margin:auto;
    object-fit:contain;
}





body#program .img-wrapper,
body#event #event-detail > .img-wrapper,
body#news-entry #news-detail > .img-wrapper{
    margin-top:20px;
}



ul{
    margin:0;
    padding:0;
}

ul li{
    position:relative;
    margin:0 0 0 0;
    padding:0;
}

.image{
    width:100%;
    height:auto;
}



/* Video */


.background-video, .responsive-video{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility:hidden;    

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);    

    -webkit-transform-style: preserve-3d;
}



/* Video */

.background-video{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

.background-video video{
    position: absolute;
    top: 50%; 
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto;
}


/*
.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    cursor: pointer;
}

.responsive-video.paused:after{
    content:"";
    position: absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    width:160px;
    height:160px;
    margin:auto;
    background:url(../img/icon-play.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    
}

.responsive-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}*/





/* Youtube */

.video{
    position: relative;
    cursor: pointer;
}

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
    overflow: hidden;

    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center !important;

}

.responsive-video video,
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ondemand:before{
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(0,0,0,0.1);
    z-index: 1;
}



.ondemand:after{
    content:" ";
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width: 100px;
    height: 100px;    
    margin:auto;

    background: url(../img/icon-play.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;

    opacity:0.9;
    z-index: 2;
}

.ondemand:hover:after{
    opacity:1;
}

.guideline{
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;

    color:#fff;
    text-align: center;
    z-index:1000;
    line-height:1.3em;
    font-size:12px;

    padding:10px;
    background:rgba(0,0,0,0.2);

}

.guideline a{
    color:#fff;
    text-decoration: underline;
}





/* Footer */

footer{
    margin-top:150px;
    padding:0 0 20px 0;
}

footer .content{
    display: inline-block;
    vertical-align: top;
    width:75%;
}

footer .logos{
    display: inline-block;
    vertical-align: top;
    width: 25%;
}

footer .logos .logo{
    display: inline-block;
    vertical-align: top;
    width: 50px;
}

footer .logos .logo img{
    width: 100%;
    height: 42px;
    object-fit: contain;
}


footer .logos .distribution{
    display: flex;
    width: 100%;
    justify-content: space-between;
}




footer .pages{
    display: block;
    margin-top:100px;
    padding-bottom:100px;
}

footer .pages .parent{
    display: inline-block;
    vertical-align: top;
    margin-bottom:10px;
}

footer .pages .child{
    display: inline-block;
    vertical-align: top;
    margin-bottom:10px;
}







#blender{
    position: fixed;
    top:82px;
    right:0px;
    left:0px;
    bottom:0px;
    margin:auto;
    background:#fff;
    z-index: 1000;

    display: none;
}

#blender .wrapper{
    position: relative;
    height:100%;
}

#blender .image{
    position: absolute;
    top:100px;
    right:20px;
    bottom:100px;
    left:20px;
    margin:auto;
    width:auto;
    background-size:contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

#blender .top{
    position: absolute;
    top: 30px;
    right: 20px;
    left: 50px;
    margin:0 auto;
    text-align: center;
}

#blender .paginator{
    position: absolute;
    top: 60px;
    right: 87px;
    text-align: right;
    cursor: default;
}


#blender .bottom{
    position: absolute;
    right:0px;
    bottom:20px;
    left:0px;
    height: 75px;
    margin:auto;
}

#blender .bottom .title{
    display: block;
    margin: 0 120px;
    text-align: center;
    min-height: 18px;
}

#blender .bottom .shopify{
    display: block;
    margin:0 auto;
    text-align: center;
}

#blender .bottom .previous{
    position: absolute;
    top:0px;
    bottom:0px;
    left:80px;
    width:30px;
    height:30px;
    margin:auto;
    background-image:url(../img/arrow-black.svg);
    background-size:29px auto;
    background-repeat: no-repeat;
    background-position: center center;
}

#blender .bottom .next{
    position: absolute;
    top:0px;
    bottom:0px;
    right:80px;
    width:30px;
    height:30px;
    margin:auto;
    background-image:url(../img/arrow-black.svg);
    background-size:29px auto;
    background-repeat: no-repeat;
    background-position: center center;

    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);

}


#blender .bottom .previous.disabled,
#blender .bottom .next.disabled{
    display: none !important;
}



#blender .close{
    position: absolute;
    top:20px;
    right:82px;
    width:40px;
    height:40px;
    background-image:url(../img/x-black.svg);
    background-size:29px 29px;
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}


/* Product */

#blender .image .slideshow{
    position: absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    width:100%;
    height:100%;
    margin:auto;
    overflow: hidden;
}

#blender .image .slideshow .flickity-viewport{
    height:100% !important;
}

#blender .image .slideshow .flickity-slider{
    height:100% !important;
}

#blender .image .slideshow .slide{
    position: relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-size:0px;
    padding:0 20px;
    overflow: hidden;
}

#blender .image .slideshow .slide img{
    position: absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    width:100%;
    height:100%;
    margin:auto;
    object-fit:contain;
}

#blender .image .slideshow .slide.text_only .wysiwyg{
    display: inline-block;
    text-align: left;
    max-width:660px;
}




/* Video JS */
.video-js{
    background-color:transparent;
}

.video-js .vjs-poster{
    background-color: transparent;
    background-size: cover;
}

.video-js .vjs-big-play-button{
    font-size: 20px;
    line-height: 1em;
    position: absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    width:100px;
    height:100px;
    margin:auto;
    background-color:transparent !important;
    background:url(../img/icon-play.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0;
    opacity: 0.9;
    border: none;

    -webkit-transition: none;
    transition: none;

}

.video-js.vjs-waiting .vjs-big-play-button{
    display: none !important;
}

.video-js:hover .vjs-big-play-button{

    opacity: 1;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder{
    display: none !important;
}

.video-js .vjs-big-play-button .vjs-control-text{
    display: none !important;
}

.video-js .vjs-control-bar {
    background-color:rgba(55,50,65,0);
    height:40px;
    width:auto;
    left:10px;
    right:10px;

}

.video-js .vjs-progress-control .vjs-progress-holder {

    margin: 14px 10px 0 10px;

}

.video-js .vjs-progress-control {
    display: block;
}



.video-js.vjs-ended .vjs-big-play-button,
.video-js.vjs-ended .vjs-poster{
    display: inline-block !important;
}







/* Animations */


.trans{
    -webkit-transition: all 800ms ease;
    -moz-transition: all 800ms ease;
    -o-transition: all 800ms ease;
    -ms-transition: all 800ms ease;
    transition: all 800ms ease;

    position: relative;
}



/* from invisible to opaque */

.trans-fadein-from-zero{
    opacity:0;
}

.trans-fadein-from-zero.animated{
    opacity:1;
}


/* from slightly visible to opaque */

.trans-fadein{
    opacity:0.75;
}

.trans-fadein.animated.animated{
    opacity:1;
}

/* from bottom to top */

.trans-up{
    top:20px;
}

.trans-up.animated{
    top:0px;
}

/* from left to right */

.trans-right{
    left:-100px;
}

.trans-right.animated{
    left:0px;
}

/* Misc Parameters */

.trans.trans-fadein-from-zero{
    transition-duration:1200ms;
}

.trans.trans-delay{
    transition-delay:200ms;
}









/* LazyLoad */
/*
.blur-up {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
    -webkit-filter: blur(0);
    filter: blur(0);
}*/







/* Shopify */

.btn-shopify{

}

.btn-shopify{
    position: relative;
    width: 140px;
    display: inline-block;
    vertical-align: top;
}

.btn-shopify .shopify-buy-frame--product{
    position: absolute;
    top:0px;
    left:0px;
}

.btn-shopify .shopify-buy-frame--product,
.btn-shopify .shopify-buy__product,
.btn-shopify .shopify-buy__btn-wrapper{
    width:100%;
    height:100%;
}

.btn-shopify button{
    display: block;
    width:100%;
    height:100%;
    background:none;
    border:none;
    padding:0;
    margin:0;
    font-size:0px;
    cursor: pointer;
}



/* Basket */

.shopify-buy-frame--toggle.is-active.is-sticky{
    position: fixed;
    top:auto;
    right:0px;
    bottom:0px;
    height:64px;
    margin-top:-32px;
    color: #fff;
    border-radius: 3px 0 0 3px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    min-width:40px;
    background:#333333;
    padding-right:0px;
    z-index: 1000;
    transition:padding-right 400ms ease-in-out;
}

.shopify-buy-frame--toggle.is-active.is-sticky .shopify-buy__cart-toggle{
    padding: 8px 13px 8px 7px;
}

.shopify-buy-frame--toggle.is-active.is-sticky:hover{
    padding-right:10px;
    background:#3a3a3a;
}

.shopify-buy-frame--toggle.is-active.is-sticky .shopify-buy__cart-toggle__count {
    font-size: 16px;
    margin-bottom: 10px;
}

.shopify-buy-frame--toggle.is-active.is-sticky .shopify-buy--visually-hidden{
    display: none;
}

.shopify-buy-frame--toggle.is-active.is-sticky .shopify-buy__icon-cart--side {
    height: 20px;
    width: 20px;
}

.shopify-buy-frame--toggle.is-active.is-sticky .shopify-buy__icon-cart--side .shopify-buy__icon-cart__group {
    fill: #fff;
}





.btn-gdpr{
    cursor:pointer;
}

body#page main .btn-gdpr{
    border-bottom:2px solid #555;
}





/* General */

.hidden{
    display:none !important;
}

.selected{
    
}

.overflowhidden{
    overflow: hidden !important;
}

.no-select{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Fonts */


h1, h2, h3{
    display: block;
    line-height: 1em;
    font-weight: 500;
}

h1, .h1{
    font-size:48px;
    line-height:1em;
}

h2, .h2{
    font-size:38px;
    line-height:1.3em;
}

.subtitle h2{
    line-height: 1em !important;
}

h3, .h3{
    font-size:22px;
}


.p0, .p1, .p15, .p2, .p3, .p4, .p5{
    line-height:1em;
}

.p0{
    font-size: 12px;
    line-height:1.2em;
}

.p1{
    font-size:15px;
    letter-spacing: 0.01em;
}

.p2{
    font-size:15px;
    letter-spacing: 0.01em;
    line-height:1.2em;
}

.p3{
    font-size:36px;
}


.wysiwyg h2{
    margin-top:20px;
    margin-bottom:20px;
}

.wysiwyg h2:first-child{
    margin-top: 0px;
}

.wysiwyg a,
.wysiwyg a:visited{
    /*text-decoration: underline;*/
    border-bottom:2px solid #111;
}


.centered{
    text-align: center;
}

strong, .bold{
    font-weight: 700;
}

em, .italic{
    font-style:italic;
}

.underline{
    /*text-decoration: underline;*/
    border-bottom:2px solid #111;
}

.uppercase{
    text-transform: uppercase;
}

.white, a.white:visited, a.white:focus{
    color:#fff;
}


.mobile-only{
    display:none;
}





#mobile{
    position: fixed;
    top:20px;
    left:20px;
    width:30px;
    height:25px;
    cursor:pointer;
    z-index: 101;
    display: none;

    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    transition: all 400ms ease;
}

#mobile .line{ 
   position: absolute; 
   left:0px;
   height:3px;
   width:30px; 
   background: #fff;
   display: block; 
   transition: 400ms; 
   transform-origin: center; 
}

body:not(#home) #mobile .line{
    background:#111;
}

#mobile .line:nth-child(1) { top: 0px; }
#mobile .line:nth-child(2) { top: 9px; }
#mobile .line:nth-child(3) { top: 19px; }

#mobile.active .line:nth-child(1){
   transform: translateY(10px) rotate(45deg);
}

#mobile.active .line:nth-child(2){
   opacity:0;
   width:0px;
   left:17px;
}

#mobile.active .line:nth-child(3){
   transform: translateY(-9px) rotate(-45deg);
}





/* flicker-fixing */

/*
#backgrounds{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility:hidden;    

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);    

    -webkit-transform-style: preserve-3d;
}*/



/* RESPONSIVE */

@media (min-width:961px) and (max-height:776px){

    #blender .image .slideshow .slide.text_only .wysiwyg{
        height: calc(100vh - 290px);
        overflow: scroll;
    }

}

@media (min-width:1280px) { /* big landscape tablets, laptops, and desktops */

    #blender .bottom{
        right:120px;
        left:120px;
    }

}


@media (min-width:961px) { /* hi-res laptops and desktops */


    .grid-1-1{
        margin-left:30px;
        max-width:50%;
    }

    .grid-1-2{
        margin-left:20%;
        width:60%;
    }

    .grid-1-3{
        margin-left:30%;
        max-width:60%;
    }

    .grid-1-4{
        margin-left:46%;
        width:auto;
    }    

    .grid-1-5{
        margin-left:58%;
        width:auto;
    }

    .grid-1-6{
        margin-left: 68%;
        width: auto;
    }


    /*
    body:not(#event):not(#news-entry) .photo{
        display: block;
    }*/

    .photo:not(.gallery-photo){
        display: block;
    }





    header #menu a,
    header #menu div,
    header #languages a,
    section#backgrounds .bottom .image-credit,
    section#backgrounds .bottom .date,
    section#backgrounds .bottom .title,
    #submenu a{

        -webkit-transition: color 400ms ease, border-color 400ms ease;
        -moz-transition: color 400ms ease, border-color 400ms ease;
        -o-transition: color 400ms ease, border-color 400ms ease;
        -ms-transition: color 400ms ease, border-color 400ms ease;
        transition: color 400ms ease, border-color 400ms ease;

    }



    /* Header Force Shrinking */

    header.shrink #logo svg{
        height:50px !important;
    }

    header.shrink #menu{
        margin-top:-70px !important;
    }


    #submenu{
        margin-top:0px;
        margin-left:20%;
        margin-bottom:-36px;

        position: relative;
        left: 0px;   
        top:15px; 

        display: inline-block;
        vertical-align: top;
        opacity:0;
        pointer-events:none;

    }

    #submenu.animated{
        -webkit-transition: left 400ms ease, opacity 400ms ease;
        -moz-transition: left 400ms ease, opacity 400ms ease;
        -o-transition: left 400ms ease, opacity 400ms ease;
        -ms-transition: left 400ms ease, opacity 400ms ease;
        transition: left 400ms ease, opacity 400ms ease;        
    }

    body#about #submenu{
        margin-left:30%;
    }

    #submenu a{
        cursor: pointer;
        padding-bottom:4px;
    }

    body#about #submenu,
    body#program #submenu,
    body#event #submenu{
        opacity: 1;
        pointer-events:all;
    }

    #submenu .btn-sub{
        margin:0 12px 0 0;
    }

    #blender .wrapper{
        max-width:1280px;
    }

    #blender .bottom{
        right:200px;
        left:200px;
    }


    #blender .image{
        right:80px;
        left:80px;
    }

    #blender .bottom .previous,
    #blender .bottom .next{
        width:25px;
        height:25px;
    }

    #blender .close{
        width:35px;
        height:35px;  
    }

}


@media (max-width: 1280px){

    header #logo svg{
        height: 100px;
        max-height: 100px;
    }

}



@media (max-width:961px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones 681px */

    .desktop-only{
        display:none;
    }

    .mobile-only{
        display:inline-block;
    }



    .wrapper{
        padding:0 20px;
    }


    #mobile{
        display: inline-block;
    }

    #mobile.active .line{
        background:#111 !important;
    }




    header{
        overflow: hidden;
        height:60px;   
    }
    
    header.open{
        overflow-y:scroll;
        -webkit-overflow-scrolling: touch;
    }

    header .wrapper{
        height:100%;
        padding:0;
        overflow: hidden;
    }

    header #logo{
        right:20px;
        margin-top:20px;
    }

    header #logo svg{
        height:30px !important;
        min-height:0px;
        max-height:100%;        
    }

    header .logo-wrapper{
        margin-bottom:0px;
    }

    header.open #logo svg path{
        fill:#111 !important;
    }

    header #menu{
        position: absolute;
        top: 60px;
        left: 0px;
        width: 100%;        
        height:100%;
        height:calc(100vh - 60px);
        padding-top:0px;
        margin-top:0px !important;
        opacity: 0;

        -webkit-transition:opacity 200ms ease-out;
        -moz-transition:opacity 200ms ease-out;
        -o-transition:opacity 200ms ease-out;
        transition:opacity 200ms ease-out;         
    }

    header.open #menu{
        opacity: 1;
        min-height:320px;
    }

    header #menu a{
        display: inline-block;
        vertical-align: top;
        margin-left:0px;
        color:#111 !important;
        border-color:#111 !important;
        font-size:20px;
    }

    header #menu div{
        font-size:20px;
        color:#111 !important;
    }


    header #menu .grid{
        position: absolute;
        width:auto !important;
    }


    header #menu .grid-1{
        left: 67%;
        top: 5%;
    }

    header #menu .grid-2{
        left: 23%;
        top: 20%;
    }

    header #menu .grid-3{
        left: 19%;
        top: 33%;
        padding-left:0px;
        margin-left:-28px;
    }

    header #menu .grid-4{
        left:auto;
        left: 38%;
        top: 42%;
    }

    header #menu .grid-5{
        left: 56%;
        top: 54%;
    }

    header #menu .grid-6{
        left:17%;
        top:68%;
    }









    header #languages{
        position: absolute;
        left: 17%;
        top: 85px;
        right: auto;
        bottom: auto;
        padding-bottom: 0px;
        opacity: 0;

        -webkit-transition:opacity 200ms ease-out;
        -moz-transition:opacity 200ms ease-out;
        -o-transition:opacity 200ms ease-out;
        transition:opacity 200ms ease-out;             
    }

    header.open #languages{
        opacity: 1;
    }

    header #languages a{
        color:#111 !important;
        font-size:20px;
    }



    body:not(#home) main {
        padding-top:130px;
        min-height: 320px;
    }

    body#about main,
    body#program main,
    body#event main,
    body#news-entry main{
        padding-top:150px;
    }


    /* home */

    #backgrounds.contain{
        background-size:100% auto !important;
        background-size:calc(100% - 40px) auto !important;
    }

    #backgrounds .bottom .onehalf{
        width:100% !important;
        max-width:100% !important;
    }

    #backgrounds .bottom .onehalf.second {
        position: relative;
        right: auto;
        bottom: auto;
        text-align: left;
        margin-top:10px;
    }

    #mobilemenu{
        position: fixed;
        top:0px;
        left:0px;
        width:100%;
        height:auto;
        padding:72px 20px 15px 20px;
        background:#fff;
        z-index: 99;
        display: inline-block;
        vertical-align: top;
    }

    body#home #mobilemenu{
        display: none;
    }


    #submenu{
        display: none;
        margin-top:5px;
    }

    #submenu a{
        font-size:15px;
        font-weight:600;
        /*margin:0 15px 0 0 !important;*/
        margin:0 8px 0 0 !important;
    }

    body#about #submenu,
    body#program #submenu,
    body#event #submenu{
        display: block;
    }

    #submenu a span{
        position: relative;
    }

    #submenu .btn-current{
        text-align: center;
    }

    #submenu .btn-archive{
        text-align:right;
    }


    #events .event .img-wrapper{
        width: auto;
    }


    #events .event .title,
    #event #event-detail h2,
    #news .news .title,
    #news-entry #news-detail h2{
        margin-top: 2px;
    }
    /*
    #news .news img{
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        margin-top: 20px;
    }*/



    #blender{
        top:0px;
        background: #111;
    }

    #blender .close{
        top: 20px;
        right:auto;
        left:20px;
        background-image: url(../img/x-white.svg);
        background-position: left -5px center;
    }


    #blender .bottom .previous{
        left:20px;
        background-image:url(../img/arrow-white.svg);
        background-position: left -5px center;
    }

    #blender .bottom .next{
        right:20px;
        background-image:url(../img/arrow-white.svg);
        background-position: right 5px center;
    }

    #blender .top,
    #blender .bottom .title,
    #blender .bottom .shopify{
        color:#fff;
    }

    #blender .bottom .title{
        margin:0 80px;
    }

    #blender .top {
        right: 50px;
    }

    #blender .paginator{
        top:30px;
        right:20px;
        color:#fff;
    }


    #blender .image .slideshow .slide.text_only .wysiwyg{
        color:#fff;
        height: calc(100vh - 230px);
        overflow: scroll;
    }



    .gallery .exhibitionviews{
        display: block;
    }

    /*
    body:not(#event):not(#news-entry) .photo{
        pointer-events:none;
        width:100%;
    }*/

    
    .photo:not(.gallery-photo){
        display: block;
        
    }

    .photo:not(.gallery-photo):not(.video){
        pointer-events:none;
    }


    body main{
        min-height:0px;
    }

    body#event main,
    body#news-entry main{
        padding-bottom:30px;
    }

    footer{
        position: relative;
        margin-top:0px;
    }

    footer:before{
        content:"";
        position: absolute;
        top:-20px;
        left:20px;
        right:20px;
        height:1px;
        background:#111;
        margin:0 auto;
    }

    footer .content {
        display: block;
        width: auto;
    }

    footer .content .inlineblock{
        width: 50% !important;
        margin-bottom:20px;
        padding-right:5px;
    }

    footer .p0{
        font-size:15px;
        letter-spacing: 0.01em;
        line-height: 1.2em;        
    }

    footer .logos{
        display: block;
        width: auto;
    }


    .shopify-buy-frame--toggle.is-active.is-sticky{
        top:0px;
        bottom:0px;
        margin:auto 0;
    }

    .shopify-buy-frame--toggle.is-active.is-sticky{
        top:85px;
        height:35px;
        bottom:auto;
    }

    .shopify-buy-frame--toggle.is-active.is-sticky .shopify-buy__cart-toggle__count{
        display: none;
    }


    .ondemand::after{
        width: 50px;
        height: 50px;
    }

    .video-js .vjs-big-play-button{
        width: 50px;
        height: 50px;
    }


    h2, .h2{
        font-size:22px;
        line-height:1.3em;
    }


}

@media (max-width:520px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. 481px */

    .products .product{
        width:100%;
    }

}


@media (max-width:481px) { /* tablet, landscape iPad, lo-res laptops ands desktops 961px 681px */


    #submenu .btn-upcoming,
    #submenu .btn-current,
    #submenu .btn-archive{
        width:auto;
        text-align: left;
    }

    #submenu .btn-upcoming,
    #submenu .btn-current{
        margin-right:15px;
    }


    footer .p0{
        font-size:12px;      
    }


}


@media (max-width:321px) { /* smartphones, iPhone, portrait 480x320 phones 321px */


}






.pace {
    -webkit-pointer-events: none;
    pointer-events: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress{
    background: #111;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px;

    -webkit-transition: background 400ms ease;
    -moz-transition: background 400ms ease;
    -o-transition: background 400ms ease;
    -ms-transition: background 400ms ease;
    transition: background 400ms ease;

}

body.has-gallery .pace{
    display: none !important;
}


body:not(#home) .pace .pace-progress{
    background:#111 !important;
}






/*
section#events.loading:after{
    content:"";
    display: block;
    vertical-align: top;
    width:40px;
    height:40px;
    margin:0 auto;
    border: 5px solid #111;
    border-radius: 100%;
    border-color: rgba(15,15,15,1) transparent transparent;

    animation: cssload-spin 1s infinite linear;
        -o-animation: cssload-spin 1s infinite linear;
        -ms-animation: cssload-spin 1s infinite linear;
        -webkit-animation: cssload-spin 1s infinite linear;
        -moz-animation: cssload-spin 1s infinite linear;
}






@keyframes cssload-spin {
    100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes cssload-spin {
    100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes cssload-spin {
    100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin {
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes cssload-spin {
    100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}*/