/*
Theme Name: Fiber Festival 2017
Author: Kris Borgerink
Author URI: http://www.krisborgerink.nl/
Description: Custom build theme for Fiber Festival 2017
Version: 1.0
*/

/* general
--------------------------------------------------*/
html { overflow-y: scroll; }

body {
    /*font: 20px/1.5 "TiemposText-Regular", "Times New Roman", Times, serif;*/
    font: 18px/1.5 "TiemposText-Regular", "Times New Roman", Times, serif;
    line-height: 25px;
    text-align: left;
	color: #fff;
	background-color: transparent;
    /*background-image: url(assets/images/bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;*/ /* maximage used because Safari iOS doesn't work well with fixed bg */
}

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(assets/images/bg.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
	background-color: #000;
}

@media screen and (max-width: 1280px) {
    body {
        font-size: 16px;
        line-height: 23px;
    }
}
/*body.home {
	background-color: #edecea;
}*/
#preloader {
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #000;
	position:fixed;
	z-index: 90000000;
}

#maximage {
    position: fixed;
    z-index: -1;
}

#maximage img {
	width: inherit;
}

a {
  	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #fff;
}
a:hover {
  	color: #fff;
	text-decoration: none;
}


.left {
	float: left;
}
.right {
	float: right;
}
.hidden {
    display: none !important;
}
.white-bg {
    background: #fff;
}

img {
width: auto;
}

#header img, #content img, #footer img {
width: 100%;
}

/* vertical align */
/* This parent can be any width and height */
.v-center-block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost, nudged to maintain perfect centering */
.v-center-block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.v-centered {
  display: inline-block;
  vertical-align: middle;
}

/**/

/*div, ul {
     -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;    
}*/

/**/

.grid-container {
  /*background-color: blue;*/
}

/*div {
  zoom: 1;	
  min-height: 0;
}*/

.row, .element {
    margin-bottom: 30px;
}
.row .row {
    margin-bottom: 0px;
}

/* some css generated icons */

.css-icon-container {
    display: block;
    position: absolute;
}

/* hamburger menu */
.bars, .bars:before, .bars:after {
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 33px;
    height: 3px;
    background-color: #000;
    /*-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;*/
}
.bars:after {
    top: 10px;
}
.bars:before {
    top: 20px;
}

/**/

/* cross */
.cross-container {
    width: 33px;
    height: 20px;
}

.cross-container:before, .cross-container:after{
    content: "";
    position: absolute;
    width: 31px;
    height: 3px;
    background-color: #000;
    top: 10px;
    left: 1px;
}

.cross-container:before{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}
.cross-container:after{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

/* social icons */
.social_icon_holder {
    display: inline-block;
    font-size: 22px
}
.social_icon_holder a, .social_icon_holder a:hover {
    display: block;
    text-decoration: none;
    border: none;
    padding: 5px 10px 5px 0;
}
/*.social_icon_holder a:hover {
    opacity: 0.50;
    filter: alpha(opacity=50);
}*/
.social_icon_holder span {
    font-family: Helvetica, "Arial Nova", Arial, sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    padding-left: 5px;
}


/* header
--------------------------------------------------*/

#header {
    width: 100%;
    height: 0;
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30000;
}

#header .logo, #header .navigation {
    display: block;
    position: fixed;
}

/**/
#header .logo {
    /*bottom: 40px;*/
    top: 40px;
    left: 40px;
}

#header .navigation {
    /*right: 50px;
    bottom: 35px;*/
    right: 35px;
    /*bottom: 25px;*/
    top: 30px;
}
/**/

#header .logo h1 {
    font-size: 36px;
    line-height: 36px;
    text-transform: uppercase;
    letter-spacing: 1px;
    /*height: 60px;*/
    padding: 0;
    margin: 0 0 0 0;
    width: 175px;
}
#header .logo h1:hover {
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);        
}
#header .logo h1 a {
    /*width: 132px;*/
    width: 175px;
    /*height: 31px;*/
    display: block;
}

#header, #header a {
	color: #ffffff;
	border: none;
  	/*letter-spacing: 0.7px;*/
}

/*@media screen and (min-width: 768px) and (max-width: 1024px) {*/
@media screen and (min-width: 768px) and (max-width: 1200px) {
    #header .logo {
        top: 20px;
        left: 20px;
    }

    #header .navigation {
        /*right: 30px;*/
        top: 10px;
        right: 15px;
    }
}

@media screen and (min-width: 768px) {
    #header .logo, #header .navigation {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media screen and (max-width: 767px) {
    #header {
        position: relative;
        display: table;
    }
    #header .logo, #header .navigation {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }
    #header .navigation {
        background-color: #000;
        /*background-image: url(assets/images/bg.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        background-attachment: fixed;*/
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100000000000000;
        display: none;
    }
    #header .logo h1 {
        padding: 20px 10px;
        font-size: 30px;
        line-height: 30px;
    }

}

/* footer
--------------------------------------------------*/

#footer {
    background-color: rgba(0, 0, 0, 0.65);
    padding: 60px 0 0 0;
}
#footer .grid-container {
    padding-bottom: 0 !important;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    font-size: 16px !important;
    /*font-weight: 400 !important;*/
    display: block !important;
}



/* nav
--------------------------------------------------*/


/*@media screen and (min-width: 768px) {*/
    /* main-nav */


/**/
    .nav-wrapper {
        text-align: right;
    }

    .main-nav, .main-nav li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .main-nav {
        position: relative;
        /*display: block;*/
        display: inline-block;
        text-align: left;
        height: auto;
        max-width: 250px;
        padding: 10px;
    }
    
    .main-nav li {
        font-family: "brutal_typeextrabold", Helvetica, "Arial Nova", Arial, sans-serif;
        line-height: 25px;
        font-size: 18px;
        text-transform: uppercase;
        /*list-style: none;*/
        display: block;
        margin: 1px 0 1px 0;
        /*padding: 0 0 0 77px;*/
        padding: 0;
        text-align: right;
        color: #fff;
    }
    .main-nav li .sub-menu {
        margin: 0;
    }
    .main-nav li .sub-menu li {
        font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
        font-size: 16px;
    }
    /* mouse over */
    /*.main-nav li .sub-menu {
        display: none;
    }
    .main-nav li:hover > .sub-menu {
        display: block;
    }*/
    


    /* main level link */
    .main-nav li a, .main-nav li:hover li a {
        margin: 0;
        padding: 0;
        /*display: inline-block;*/
        color: #fff !important;
        position: relative;
        border: none;
        /**/
        display: inline-block;
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    .main-nav li:hover a {
        -moz-transform: scale(1, -1);
        -webkit-transform: scale(1, -1);
        -o-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
        transform: scale(1, -1);        
   }
    /* main level link hover */
    /*.main-nav li a:hover, .main-nav li.active > a {
        color: #ff3f00 !important;
    }*/
    .main-nav li li a span {
        padding-bottom: 1px;
    }
    .main-nav li li a:hover span {
        padding: 0;
        border-bottom: 1px solid #fff !important;
        margin-bottom: -1px;
    }

    .main-nav li.spacer {
        margin-top: 10px;
    }

/*}*/


/********************************/

/*@media screen and (min-width: 768px) {*/

    

/*}*/
    /* main-nav */
    



@media screen and (max-width: 767px) {
    
    .btn_mobile_menu {
        display: block;
        height: 20px;
        width: 33px;
        padding: 15px 10px;
        font-size: 30px !important;
        line-height: 0;
        color: #fff;
        border: none !important;
        text-decoration: none;
        margin: 10px 15px 0 0;
        position: absolute;
        right: 0px;
    }

    .btn_mobile_menu_cross {
        position: fixed;
        z-index: 100000000000000000;
    }

    /**/

    .btn_mobile_menu .bars, .btn_mobile_menu .bars:before, .btn_mobile_menu .bars:after {
        background-color: #fff;
    }

    /**/

    .btn_mobile_menu .cross-container:before, .btn_mobile_menu .cross-container:after{
        background-color: #fff;
    }
    
    /**/

    .main-nav, .main-nav li {
        font-size: 20px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .main-nav {
        font-family: inherit;
        background-color: transparent;
        max-width: 100%;
        width: 100%;
        margin: 72px 0 !important;
        /*display: none;*/
        border-bottom: none;
    }
    
    .main-nav li {
        text-align: center;
        display: block;
        /*border-top: 1px solid #000;*/
    }
    
    .main-nav li:first-child {
    }    
    .main-nav li:last-child {
        /*border-bottom: 1px solid #000;*/
    }    
    
    /* main level link */
    .main-nav li a, .main-nav li a:hover, .main-nav li li a, .main-nav li li a:hover {
        display: block;
        margin: 0px;
        padding: 8px 0 !important;
        position: relative;
        border: none !important;
    }
    .main-nav li:hover a/*, .main-nav li li a:hover*/ {
        -moz-transform: scale(1, -1);
        -webkit-transform: scale(1, -1);
        -o-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
        transform: scale(1, -1);        
    }
    .main-nav li .sub-menu, .main-nav li a:hover .sub-menu {
        font-size: 18px;
        /*display: block !important;*/
    }

    /*.main-nav li:last-child a:after {
        display: none;
    }*/

    
    
}


/* headers and paragraphs
--------------------------------------------------*/
p {
	margin: 0 0 10px 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "brutal_typeextrabold", Helvetica, "Arial Nova", Arial, sans-serif;
	margin: 0 0 5px 0;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.8px;
}
h1 {
	font-size: 48px;	
	line-height: 50px;
}
h2 {
	font-size: 48px;	
	line-height: 50px;
}
h2.news-title {
	font-size: 35px;	
	line-height: 37px;
    text-transform: none;
}
h3 {
	font-size: 25px;
	line-height: 27px;
}
h4 {
	font-size: 18px;
	line-height: 20px;	
}
h5 {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
	font-size: 16px;
	line-height: 18px;	
    font-weight: normal;
}
h6 {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
	font-size: 14px;
	line-height: 16px;	
    font-weight: normal;
}

strong {
    /*font-family: "brutal_typeextrabold", Helvetica, "Arial Nova", Arial, sans-serif;*/
    font-weight: bold;
}

small {
    /*font-size: 0.8em;*/
    font-size: 12px;
    display: block;
    line-height: normal !important;
}

hr {
    border: 0;
    height: 1px;
    background: #fff;
    /*margin: 40px 0;*/
}

mark {
    background-color: #fff;
}

.caption, .wp-caption-text {
    padding-top: 3px;
    font-size: 75%;
    line-height: normal;
}

.button {
    font-family: "brutal_typeextrabold", Helvetica, "Arial Nova", Arial, sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    border: 1px solid #fff;
    padding: 12px 35px;
    margin: 5px 10px 5px 0;
    white-space: normal;
    font-weight: normal;
    display: inline-block;
    background-color: transparent;
    text-align: center;
    box-sizing: border-box;
    color: #fff;
}
.button:hover {
    background-color: #fff !important;
    color: #000 !important;
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.button-normal {
    font-size: 20px;
    line-height: 22px;
}

.button-small {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    font-size: 16px;
    line-height: 18px;
    padding: 10px 25px;
    font-weight: normal;
}

.button.invert {
    color: #000;
    border-color: #000;
}
.button.invert:hover {
    color: #fff !important;
    background-color: #000 !important;
}


span[style*="text-decoration: underline;"] {
    text-decoration: none !important;
    border-bottom: 1px solid #fff;
}

@media screen and (max-width: 767px) {
    h1, h2 {
        font-size: 34px;	
        line-height: 36px;
    }
    h3 {
        font-size: 23px;
        line-height: 25px;
    }
    h4 {
        font-size: 16px;
        line-height: 18px;	
    }
    h5 {
        font-size: 14px;
        line-height: 16px;	
    }
    h6 {
        font-size: 12px;
        line-height: 14px;	
    }
    .button {
        width: 100%;
    }
}

/* #content global
--------------------------------------------------*/

#content {
    min-height: 100%;
    /* These are technically the same, but use both */
    /*overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;*/
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    /*word-break: break-all;*/
    /* Instead use this non-standard one: */
    /*word-break: break-word;*/

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    /*-ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;*/
}

#content a, #footer a, .block-overlay-link-container {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease; 
}
#content a:hover, #footer a:hover {
    opacity: 0.50;
    filter: alpha(opacity=50);
}

#content .content-main-grid-container {
    padding-top: 65px;
}
#content h2.page-title {
    padding-bottom: 40px;
    margin-bottom: 0;
    display: inline-block;
    width: 100%;
}
.page #content h2.page-title:last-child {
    padding-bottom: 10px;
}
#content h2.page-title span {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    font-size: 26px;
    font-weight: normal;
    display: inline-block;
}
#content h4.section-header {
    margin: 0 0 15px 0;
}
#content p {
	margin-bottom: 30px;
    /*-webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    -webkit-locale: 'nl_NL';
    -moz-locale: 'nl_NL';
    locale: 'nl_NL';
    -webkit-hyphenate-locale: 'nl_NL';
    -moz-hyphenate-locale: 'nl_NL';
    hyphenate-locale: 'nl_NL';*/
}
/*#content p:first-child {
	font-size: 18px;
    line-height: normal;
}*/
/*#content span.content_collapse p:last-child {
    margin: 0;
}*/
#content img {
	margin-bottom: 30px;	
}
#content img.tight {
	margin-bottom: 0px;
}

#content .two-column-content {
    -moz-column-count: 2;
    -moz-column-gap: 30px;
}
#content ul, #content ol {
    margin-bottom: 30px;
}
#content ul ul, #content ol ol, #content ul ol, #content ol ul {
    margin-bottom: 0px;
}
#content ul {
    list-style:none;
}
#content ul li {
    margin: 0px 30px;
    padding: 5px 0;
}
#content ul li:before {    
    font-family: 'FontAwesome';
    content: '\f105';
    margin: 0 10px 0 -16px;
}
#content ul li.toggle-open:before {    
    content: '\f107';
    margin: 0 10px 0 -21px;
}
#content li h1, #content li h2, #content li h3, #content li h4, #content li h5, #content li h6 {
	display: inline-block;
}

#content .tags {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: -20px;
    margin-bottom: 15px;
}

#content .content-block.separator-block.title-block {
    margin-bottom: 20px;
}

/* news + featured */

.home #content .category-index, .page-news #content .category-index, .page-featured #content .category-index {
    padding-top: 0 !important;
}
#content .category-index .news-item-header {
    display: block;
    font-weight: normal;
    text-transform: none !important;
    background-color: #E6E7E8;
    padding: 15px;
    color: #000 !important;
}
#content .category-index .news-item-header h3 {
    padding-top: 0 !important;
    height: 70px;
    overflow: hidden;
    text-transform: none !important;
    letter-spacing: 0;   
}
#content .category-index .news-item-header h3 a {
    font-size: 22px;
    line-height: 24px;
    font-weight: normal;
    color: #000 !important;
}

#content .category-index .news-item-header .btn, .home #content #bottom .btn {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: normal;
    font-weight: normal;
    background-color: transparent;
    font-size: 16px;
    line-height: 18px;
    color: #fff;
    display: inline-block;
    margin-bottom: 20px;
}

#content .category-index .news-item-header .btn {
    border: none;
    color: #000 !important;
    display: block !important;
    margin-bottom: 0!important;
}

#content .category-index .news-item-header .btn {
    text-align: right;
}
#content .category-index .news-item-header .btn span {
    /*display: block;*/
    padding: 5px 5px;
}
#content .category-index .news-item-header .btn span .fa {
    font-size: 18px;
}

/**/

#content .block-overlay-link-container {
    display: block;
    position: relative;
}
#content .block-overlay-link-container:hover  {
    opacity: 0.50;
    filter: alpha(opacity=50);
}
#content .block-overlay-link-container:hover .button  {
    color: #fff;
    background-color: transparent;
}
#content .block-overlay-link-container .overlay-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}


@media screen and (min-width: 768px) and (max-width: 1200px) {
    #content .content-main-grid-container {
        padding-top: 45px;
    }
}

@media screen and (max-width: 767px) {
    #content {
        min-height: calc(100% - 100px);
    }
    #content .content-main-grid-container {
        padding-top: 25px;
    }
}

/* content blocks
--------------------------------------------------*/

/* title block */

/* text block */

/* image block */

/* embed block */

/* seperator block */

/* external links block */

/* sponsors block */
.block-sponsors h5 {
    margin-bottom: 10px;
}

.block-sponsors a {
    border: none !important;
    display: block;
}


/* */

/*@media screen and (max-width: 767px) {
}*/
@media screen and (min-width: 768px) {
}

@media screen and (orientation:portrait) and (min-width: 768px) {
}

/* home / front page
--------------------------------------------------*/

.home #content {
    position: relative;
    overflow: hidden;
}
.home #content h2.page-title {
    display: none;
}

.home #content #front-page #top {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 100%;
    position: relative;
    display: block;
    /*margin: 0 auto;
    background-color: rgba(255, 192, 203, 0.4);
    width: 100%;
    height: 100%;*/
}

/*.home #content #front-page .col {
}

.home #content #front-page .row {
    margin-bottom: 0;
}*/

.home #content .campaign h3.date, 
.home #content .btn-home-tickets {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    text-align: center;
    margin: 0 auto 40px auto;
}


.home #content .campaign h3.date {
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0;
    width: 100%;
}

.home #content .btn-home-tickets {
    position: fixed;
    bottom: 40px;
    right: 40px;
    margin-bottom: 0;
}
.home #content .btn-home-attend {
    position: fixed;
    bottom: 40px;
    left: 40px;
    font-family: "brutal_typeextrabold", Helvetica, "Arial Nova", Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 22px;
    border: none;
}

.home #content .intro-text p {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;	
	margin: 0 0 36px 0;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.3px;
}

/* home / front page animation
--------------------------------------------------*/

.home #content #bottom {
    visibility: hidden;
}

.home #content .campaign {
    display: block;
    position: absolute;
    left: 0;
    /**/
    background: none;
    /*height: 70%;
    margin: 12% 35% 8% 40%;*/
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
    /*width: 21%;
    margin: 40px 37% 40px 42%;*/
    width: 350px;
    margin: 40px 38% 40px 42%;
    /*top: 15%;*/
    text-align: center;
}

/*.home #content .campaign .ani-wrapper {
    position: relative;
}*/

.home #content .campaign .ani-container {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 16%;
    overflow: hidden;
    /*opacity: 0.50;*/
}
.home #content .campaign .ani-container:nth-of-type(2) {
    margin-bottom: 7%;
}

.home * :not(.button) {
    /* fix shaking and pixel offset on change in chrome */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;    
}
.home #content .campaign .ani-element, .home #content .campaign .ani-element-down {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -moz-transition: all 1.8s ease-in-out;
    -webkit-transition: all 1.8s ease-in-out;
    -o-transition: all 1.8s ease-in-out;
    -ms-transition: all 1.8s ease-in-out;
    transition: all 1.8s ease-in-out;
    /* fix shaking and pixel offset on change in chrome */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translateZ(0) scale(1.0, 1.0);
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    -o-transform: translateZ(0) scale(1.0, 1.0);
    -ms-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0) scale(1.0, 1.0);
}

.home #content .campaign .ani-element {
    bottom: -101%;
}
.home #content.play .campaign .ani-container .ani-element {
    bottom: -2px;
}

.home #content .campaign .ani-element-down {
    top: -101%;
    /*-moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);*/ 
}
.home #content.play .campaign .ani-container .ani-element-down {
    top: -2px;
}


.home #content .campaign .ani-element-under {
    margin-top: 22%;
    padding-bottom: 22%; 
    /*opacity: 0;*/
}

.home #content .campaign .ani-element-under {
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity 1.8s ease-out;
    -moz-transition: opacity 1.8s ease-out;
    -webkit-transition: opacity 1.8s ease-out;
    -o-transition: opacity 1.8s ease-out;
    -ms-transition: opacity 1.8s ease-out;
}

.home #content.play .campaign .ani-container .ani-element-under {
    opacity: 1;
    filter: alpha(opacity=100);
}


/* */
.home #content .campaign .btn-scroll {
    display: block;
    width: 44px;
    height: 24px;
    padding: 10px;
    overflow: hidden;
    border: none;
    margin: 0 auto;
    position: relative;
    /**/
	transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); /* IE 9 */
	-webkit-transform: rotate(-180deg); /* Safari and Chrome */
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
}

.home #content .campaign .btn-scroll, 
.home #content .campaign h3.date
/*.home #content .btn-home-tickets*/ {
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity 1.8s ease-out;
    -moz-transition: opacity 1.8s ease-out;
    -webkit-transition: opacity 1.8s ease-out;
    -o-transition: opacity 1.8s ease-out;
    -ms-transition: opacity 1.8s ease-out;
}

.home #content.play .campaign .btn-scroll, 
.home #content.play .campaign h3.date 
/*.home #content.play .btn-home-tickets*/ {
    opacity: 1;
    filter: alpha(opacity=100);
}

.home #content .campaign .btn-scroll span {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease; 
}
.home #content .campaign .btn-scroll:hover span {
    opacity: 0.5 !important;
    filter: alpha(opacity=50) !important;
}


.home #content .btn-scroll span {
    display: block;
    text-align: center;
}

.home #content .btn-scroll .icon.icon-arrow {
    background: url(assets/images/arrow@2x.png);
    background: url(assets/images/arrow.svg),
        linear-gradient(transparent, transparent); /* fallback hack */    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    width: 100%;
    height: 24px;
    margin-bottom: 8px;
}

/* delays */

.home #content .campaign .delay-one {
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.home #content .campaign .delay-two, .home #content .campaign h3.date.delay-two {
    -moz-transition-delay: 2.2s;
    -webkit-transition-delay: 2.2s;
    -o-transition-delay: 2.2s;
    -ms-transition-delay: 2.2s;
    transition-delay: 2.2s;
}

.home #content .campaign .delay-three {
    -moz-transition-delay: 2.6s;
    -webkit-transition-delay: 2.6s;
    -o-transition-delay: 2.6s;
    -ms-transition-delay: 2.6s;
    transition-delay: 2.6s;
}

/* backgrounds */

.home #content .campaign .ani-element, .home #content .campaign .ani-element-down, .home #content .campaign .ani-element-under {
	background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.home #content .campaign .ani-element-first {
    background-image: url(assets/images/prima@2x.png);
    background-image: url(assets/images/prima.svg),
        linear-gradient(transparent, transparent); /* fallback hack */    
}

.home #content .campaign .ani-element-first-down {
    background-image: url(assets/images/prima_reflect@2x.png);
    background-image: url(assets/images/prima_reflect.svg),
        linear-gradient(transparent, transparent); /* fallback hack */    
}

.home #content .campaign .ani-element-second {
    background-image: url(assets/images/materia@2x.png);
    background-image: url(assets/images/materia.svg),
        linear-gradient(transparent, transparent); /* fallback hack */    
}

.home #content .campaign .ani-element-second-down {
    background-image: url(assets/images/materia_reflect@2x.png);
    background-image: url(assets/images/materia_reflect.svg),
        linear-gradient(transparent, transparent); /* fallback hack */    
}

.home #content .campaign .ani-element-under {
    background-image: url(assets/images/under@2x.png);
    background-image: url(assets/images/under.svg),
        linear-gradient(transparent, transparent); /* fallback hack */    
}

/**/

/*@media screen and (min-width: 768px) and (max-width: 1024px) {*/
@media screen and (min-width: 768px) and (max-width: 1200px) {
    .home #content .campaign {
        width: 300px;
        margin: 40px 40% 40px 40%;
    }
    .home #content .campaign h3.date {
        font-size: 20px;
        line-height: 22px;
    }

    .home #content .btn-home-tickets {
        bottom: 25px;
        right: 25px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .home #content .btn-home-attend {
        bottom: 25px;
        left: 25px;
    }
    /*.home #content .campaign {
        width: 35%;
        margin: 0 30% 0 35%;
        top: 25%;
    }*/
}


@media screen and (max-width: 767px) {
    .home #content .campaign h3.date, 
    .home #content .btn-home-tickets {
        margin-bottom: 20px;
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
    }
    .home #content .campaign .btn-scroll {
        width: 24px;
        margin-top: -10px;
    }
    .home #content .campaign {
        /*width: 100%;*/
        width: 308px;
        height: auto;
        margin-bottom: 20px;
        position: relative;
        margin: 0 auto;
    }
    
    .home #content .campaign .ani-wrapper {
        width: 60%;
        margin: 20px 20%;
    }
    .home #content .campaign .ani-container:last-child {
        padding-bottom: 10%;
    }
    .home #content .campaign .ani-container .ani-element, .home #content .campaign .ani-container .ani-element-down {
        opacity: 0;
        filter: alpha(opacity=0);
        transition: opacity 1.8s ease-out;
        -moz-transition: opacity 1.8s ease-out;
        -webkit-transition: opacity 1.8s ease-out;
        -o-transition: opacity 1.8s ease-out;
        -ms-transition: opacity 1.8s ease-out;
        /*-moz-transition-delay: 0.6s;
        -webkit-transition-delay: 0.6s;
        -o-transition-delay: 0.6s;
        -ms-transition-delay: 0.6s;
        transition-delay: 0.6s;*/
    }
    .home #content .campaign .ani-container .ani-element {
        bottom: -2px;
    }
    .home #content .campaign .ani-container .ani-element-down {
        top: -2px;
    }

    .home #content.play .campaign .ani-container .ani-element, .home #content.play .campaign .ani-container .ani-element-down {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    
    .home #content .campaign .btn-home-tickets {
        opacity: 0;
        filter: alpha(opacity=0);
        transition: opacity 1.8s ease-out;
        -moz-transition: opacity 1.8s ease-out;
        -webkit-transition: opacity 1.8s ease-out;
        -o-transition: opacity 1.8s ease-out;
        -ms-transition: opacity 1.8s ease-out;
        /*-moz-transition-delay: 1.2s;
        -webkit-transition-delay: 1.2s;
        -o-transition-delay: 1.2s;
        -ms-transition-delay: 1.2s;
        transition-delay: 1.2s;*/
   }
    .home #content.play .campaign .btn-home-tickets {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    
    /* delays */
    
    .home #content .campaign .delay-one {
        -moz-transition-delay: 0.4s;
        -webkit-transition-delay: 0.4s;
        -o-transition-delay: 0.4s;
        -ms-transition-delay: 0.4s;
        transition-delay: 0.4s;
    }
    
    .home #content .campaign .delay-two, .home #content .campaign h3.date.delay-two {
        -moz-transition-delay: 0.6s;
        -webkit-transition-delay: 0.6s;
        -o-transition-delay: 0.6s;
        -ms-transition-delay: 0.6s;
        transition-delay: 0.6s;
    }
    
    .home #content .campaign .delay-three {
        -moz-transition-delay: 1.0s;
        -webkit-transition-delay: 1.0s;
        -o-transition-delay: 1.0s;
        -ms-transition-delay: 1.0s;
        transition-delay: 1.0s;
    }
    
    
   
}
@media screen and (min-width: 768px) {
}
@media screen and (orientation:portrait) and (min-width: 768px) {
}







/* page
--------------------------------------------------*/

/* category
--------------------------*/
.page #content .category-filters {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    text-transform: uppercase;
    padding: 15px 0;
    margin-top: 30px;
    margin-bottom: 20px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.page #content .category-filters span {
    margin: 0 7px;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease; 
}
.page #content .category-filters span.active {
    border-bottom: 1px solid #fff;
}
.page #content .category-filters span:hover {
    opacity: 0.50;
    filter: alpha(opacity=50);
}

.page #content .category-index {
    padding-top: 20px;
}

#content .category-index .element h3 {
    padding: 15px 0;
}

#content .category-index .element h3 a {
    border: none;
}

#content .category-index .element h3 span {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
}

#content .img-container {
    display: block;
    height: 0;
    overflow: hidden;
    padding-bottom: 65%;
    position: relative;
    background-color: rgba(0, 0, 0, 0.1);
}
#content .img-container .img {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.page #content .category-sub-info {
    margin-top: -30px;
    margin-bottom: 0;
}
.page #content .category-sub-info .the-button .button {
    width: 100%;
    margin-bottom: 30px;
}
.page #content .category-sub-info .extra-info {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
	font-size: 16px;
	line-height: 18px;	
    font-weight: normal;
    text-transform: uppercase;
}


/*@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) {
}*/



/* tickets
--------------------------*/

.page-tickets #content .block-tickets .block-tickets-header, .page-tickets #content .block-tickets .block-tickets-body {
    padding: 15px;
    display: block;
    color: #000 !important;
}
.page-tickets #content .block-tickets .block-tickets-header {
    background-color: #fff;
}
.page-tickets #content .block-tickets .block-tickets-body {
    background-color: #F1F2F2;
}

.page-tickets #content .block-tickets .block-tickets-header h3 {
    height: 104px;
    overflow: hidden;
    margin-bottom: 10px;
}

.page-tickets #content .block-tickets .block-tickets-header h3 span.ticket-subtitle {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    font-weight: normal;
    display: block;
}

.page-tickets #content .block-tickets .block-tickets-header h4, .page-tickets #content .block-tickets .block-tickets-header h6 {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    font-weight: normal;
    display: inline-block;
    margin-right: 5px;
}
.page-tickets #content .block-tickets .block-tickets-header span.ticket-prices {
    display: block;
    height: 45px;
    overflow: hidden;
}

.page-tickets #content .block-tickets p {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
	font-size: 16px;
	line-height: 18px;	
    font-weight: normal;
    margin-bottom: 45px;
}

.page-tickets #content .block-tickets p.events {
    font-weight: 700;
    text-align: center;
    margin: 30px 20px;
	line-height: 22px;	
}



.page-tickets #content .block-tickets .button {
    margin: 0;
    width: 100%;
}

.page-tickets #content .block-overlay-link-container a.overlay-link {
    border: none;
}



@media screen and (max-width: 767px) {

    .page-tickets #content .block-tickets .block-tickets-header h3 {
        height: 100px;
    }

}

/* team
--------------------------*/

.page-team #content h3 {
    margin-bottom: 20px;
}


@media screen and (max-width: 767px) {
}

/* sponsors
--------------------------*/



/*@media screen and (min-width: 768px) {*/
    .page-sponsors #content .element {
        padding-left: 2px;
        padding-right: 2px;
        margin-bottom: 4px;
    }
/*}*/

/* programme main
--------------------------*/

/*.page-programme #content .category-block:last-child .separator-block {
    display: none;
}*/
.page-programme #content .category-block h3.category-subtitle {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    font-weight: normal;
}


/* single
--------------------------------------------------*/

.single #content .event-image-container {
    position: relative;
    display: block;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}
.single #content .event-image-container span {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    position: absolute;
    top: 25px;
    left: 0;
    padding: 5px 25px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.65);
    letter-spacing: 0.8px;
}
.single #content .event-info {
    font-family: "brutal_typeextrabold", Helvetica, "Arial Nova", Arial, sans-serif;
    font-size: 22px;
    font-weight: normal;
    text-transform: uppercase;
    background-color: #fff;
    padding: 25px 10px 0 10px;
    color: #000;
}
.single #content .event-info .grid-33 {
    padding-bottom: 25px;
}
.single #content .event-info .button {
    width: 100%;
    margin: 0;
}
.single #content .event-info h6 {
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif !important;
    font-weight: normal;
}

.single #content .tags {
    margin-top: -45px;
    margin-bottom: 40px;
}



@media screen and (max-width: 767px) {
    .single #content .event-image-container span {
        font-size: 12px;
        top: 10px;
        padding: 5px 15px;
    }
}

/* pagination
--------------------------------------------------*/

#pagination .btn, #pagination-fixed .btn {
    border: none;
    font-family: "brutal_typeregular", Helvetica, "Arial Nova", Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: normal;
    font-weight: normal;
    background-color: transparent;
    font-size: 16px;
    line-height: 18px;
}


/**/

#pagination .btn-container {
    text-align: center;
}
#pagination .btn-container:first-child {
    text-align: left;
}
#pagination .btn-container:last-child {
    text-align: right;
}
#pagination .btn {
    display: inline-block;
    padding: 15px 0 15px 0;
}
#pagination .btn.btn-prev {
    text-align: left;
}
#pagination .btn.btn-back {
    text-align: center;
}
#pagination .btn.btn-next {
    text-align: right;
}
#pagination .btn.btn-inactive {
    opacity: 0.20;
    filter: alpha(opacity=20);
}
#pagination .btn span {
    /*display: block;*/
    padding: 5px 5px;
}
#pagination .btn span.hide-on-mobile {
    /*display: block;*/
    padding: 0;
}
#pagination .btn span .fa {
    font-size: 18px;
}
hr.pagination {
    margin: 20px 0;
}

/* */
#pagination-fixed .pagination-fixed-wrapper {
    display: block;
    position: fixed;
    width: 0px;
    height: 100%;
    /*top: 35%;*/
    top: 50%;
    
}
#pagination-fixed .btn {
    display: block;
    width: 200px;
    height: 104px;
    padding: 0px;
    overflow: hidden;
}
#pagination-fixed .btn.btn-prev {
	transform: rotate(-90deg);
	-ms-transform: rotate(-90deg); /* IE 9 */
	-webkit-transform: rotate(-90deg); /* Safari and Chrome */
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
}
#pagination-fixed .btn.btn-next {
	transform: rotate(90deg);
	-ms-transform: rotate(90deg); /* IE 9 */
	-webkit-transform: rotate(90deg); /* Safari and Chrome */
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
    margin-left: -200px;
}

#pagination-fixed .btn span {
    display: block;
    text-align: center;
}

#pagination-fixed .btn .icon.icon-arrow {
    background: url(assets/images/arrow@2x.png);
    background: url(assets/images/arrow.svg),
        linear-gradient(transparent, transparent); /* fallback hack */    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    width: 100%;
    height: 24px;
    margin-bottom: 8px;
}


/* extra breakpoints
--------------------------------------------------*/

/*@media screen and (min-width: 768px) and (max-width: 1200px) {
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
}*/




/* iframed
--------------------------------------------------*/

.iframed #header, .iframed h2.page-title {
    display: none !important;
}
.iframed #content {
    padding-top: 20px !important;
}

/* other
--------------------------------------------------*/

.hidden {
    display: none !important;
}



/* testing */
/*
.ani-container:nth-of-type(1) {
    background-color: pink;
        /*margin-top: 115px;*/
/*
}
.ani-container:nth-of-type(2) {
    background-color: lightyellow;
}
.ani-container:nth-of-type(3) {
    background-color: palegreen;
}
.ani-container:nth-of-type(4) {
    background-color: mediumpurple;
}
.ani-element, .ani-element-down {
    background-color: blue;
}
.ani-element-down {
    background-color: red;
}

.ani-element-under {
    background-color: green;
}
*/