@import url(https://fonts.googleapis.com/css?family=Poppins:400,700,900|Roboto+Condensed:400,700);

html,
body,
#content {
    cursor: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Poppins', arial, sans-serif;
    background-color: #000;
    overflow:hidden;
}

.owl-item {
    overflow: hidden;
}

* {
    box-sizing: border-box
}

.owl-item .infos {
    /*transform: translateX(-100%);*/
    z-index: 99;
    position: relative;
    height: 100%;
    color: #fff;
    box-sizing: border-box;
    transition: all 1s ease;
}

.owl-item.active .infos {
    /*transform: translateX(0);*/
}

h1,
h2 {
    font-family: 'Poppins', 'Roboto Condensed', arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 10px;
}

h1 {
    font-size: 100px;
    line-height: 1em;
    margin-top: 20px;
}

h2 {
    font-size: 60px;
    line-height: 1em;
    font-weight: 400;
}

.date {
    margin: 40px;
}

.date h1 {
    font-family: 'Poppins', arial, sans-serif;
    line-height: 120px;
    font-size: 120px;
    font-weight: 700;
}

.date h3 {
    line-height: 20px;
    font-size: 70px;
    font-weight: 400;
    display: block;
    margin: 30px;
    padding: 0;
}

.date_dbt,
.date_fin {
    color: #000;
    background: #fff;
    padding: 20px 10px;
    border-radius: 40px;
    display: inline-block;
    text-align: center;
    float: left;
    overflow: hidden;
}
.date_fin{margin-left: -1px;}

.date-jusque,
.date-et {
    position: relative;
    display: inline-block;
    float: left;
    font-size: 80px;
    line-height: 1em;
    padding-left: 10px;
    margin: 120px -35px 0 -30px;
    color: #000;
    z-index: 99;
}

.clear {
    clear: both;
}

.heure {
    display: inline-block;
    font-size: 50px;
    padding: 20px 30px;
    line-height: 1em;
    border-radius: 20px;
    background: #000;
    margin: 40px;
}

.titre {
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding: 80px 40px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.75+21,1+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.location {
    font-size: 40px;
}


/* ------ ACTIVE ------- */
/*.active .titre{
    transform:rotate(0deg);
    bottom:0px;
    opacity:1;
}
.active .heure{
    height:85px;
    padding:20px;
}
.active .date h1{
transform:translateX(0%);
opacity:1;
}
.active .date h3{
transform:translateX(0%);
opacity:1;
}
.active .date_dbt{
    opacity: 1;
    transform:translateY(0%);
}
.active .date_fin{
    opacity: 1;
    transform:translateY(0%);
}
.active .date-jusque,
.active .date-et{ 
    opacity:1;
    transform:rotate(0deg);
}
*/

.label {
    position: absolute;
    right: 35px;
    top: 35px;
    z-index: 9;
    width: 200px;
    color: #fff;
    font-weight: 700;
    text-align: right;
    font-size: 30px;
}

.fadeOut {
    -webkit-animation-name: fadeOut 1s ease;
    animation: fadeOut 1s ease;
}

.organisateur {
    font-size: 35px;
    margin-top: 30px;
}

.img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    background-position: top right;
    background-repeat: no-repeat;

    background-size: cover;
    /*background-position: center center;
    background-repeat: no-repeat;*/
}

.insta {
    padding: 20px;
    color: #fff;
}

.insta h1 {
    font-size: 80px;
    text-align: center;
}

.insta ul {
    padding: 0;
    margin: 0;
}

ul li {
    float: left;
    width: 282px;
    list-style: none;
    height: 295px;
    margin: 10px 38px;
    line-height: 0.5em;
}

/* ----------------------------------------- VERTICAL ------------------------ */

.vertical .infos {
    width: 60%;
}

.vertical .img {
    background-size: contain;
}

.vertical .titre {
    position: relative;
    padding: 0 40px;
    background: none;
    margin-top: 60px;
}
.vertical:after{
    content:'';
    position: absolute;
    width:60%;
    height:100%;
    top: 0;
    left: 0;
    z-index:1;
    background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
/* ----------------------------------------- */

.owl-carousel,
.owl-stage-outer,
.owl-stage,
.owl-item,
.item {
    height: 100%;
    overflow:hidden;
}

.owl-animated-out {
    z-index: 1;
}

/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */
.owl-animated-in {
    z-index: 0;
}

/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css:  */
.fadeIn {
    -webkit-animation-name: fadeIn 1s ease;
    animation: fadeIn 1s ease;
}

.fadeOut {
    -webkit-animation-name: fadeOut 1s ease;
    animation: fadeOut 1s ease;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}