@font-face {
    font-family : 'Asgalt-Regular';
    src         : url('../fonts/asgalt-regular-webfont.woff2') format('woff2'),
    url('../fonts/asgalt-regular-webfont.woff') format('woff'),
    url('../fonts/asgalt-regular-webfont.ttf') format('ttf');
    font-weight : normal;
    font-style  : normal;
}

* {
    padding    : 0;
    margin     : 0;
    box-sizing : border-box;
}

html {
}

body {
    font-family      : 'Montserrat', sans-serif;
    font-size        : 1.2vmax;
    background-color : #cccccc;
}

h1, h2, h3, h4, h5, h6 {
    font-family    : 'Asgalt-Regular', sans-serif;
    font-weight    : normal;
    text-transform : uppercase;
}

h1 {
    font-size : 6em;
}

h2 {
    font-size : 2.5em;
}

a {
    text-decoration : none;
}

.p-l-1vw {
    padding-left : 1vw;
}

.p-l-2vw {
    padding-left : 2vw;
}

.bold {
    font-weight : bold;
}

.bolder {
    font-weight : bolder;
}

.no_decoration {
    text-decoration : none;
}

.black-text {
    color : black !important;
}

/* ---- SECTIONS ---- */

#spectacle {
    background            : #efefef url("../images/spectacle-2000.jpg") center;
    background-size       : cover;
    background-position-y : 30%;
}

#spectacle .content {
    position    : absolute;
    top         : 3vmax;
    width       : 55vmax;
    font-size   : 1.5vmax;
    padding-top : .3vmax;
}

#equipe {
    background      : #dedede url("../images/equipe-2000.jpg") center;
    background-size : cover;
}

#equipe .content {
    color    : white;
    width    : 40%;
    position : relative;
    left     : 1vw
}

#equipe .content2 {
    color    : white;
    width    : 28%;
    position : relative;
    bottom   : -30%;
    left     : 30%;
}

#equipe .dist {
    font-weight : 500;
    font-size   : 85%;
    display     : block;
    margin-top  : 3vmin;
    text-shadow : 1px 1px 5px #060606ad;

}

#dates {
    background      : #cecece url("../images/dates-2000.jpg") center;
    background-size : cover;
}

#dates .content {
    width      : 80vmax;
    margin     : 0 0 0 1vw;
    text-align : left;
    color      : white;
    font-size  : 72%;
}

#dates h3 {
    font-size      : 200%;
    color          : #daa520;
    text-transform : uppercase;
    margin-top     : 5vmin;
    text-shadow    : 1px 1px 5px #060606ad;
}

#mediation {
    background      : #cecece url("../images/mediation-2000.jpg") center;
    background-size : cover;
}

#mediation .content, #mediation .content2, #mediation .content3 {
    color     : white;
    font-size : 93%;
}

#mediation .content {
    top        : 3vh;
    position   : absolute;
    width      : 43vw;
    left       : 55vw;
    text-align : right;
}

#mediation .content2 {
    position    : absolute;
    width       : 33vw;
    left        : 2vw;
    padding-top : 10vmin;
}

#intention {
    background      : #cecece url(../images/intention-20002.jpg);
    background-size : cover;
}

#intention .content {
    color      : white;
    width      : 40vmax;
    position   : absolute;
    top        : 45vh;
    text-align : justify;
    left       : 53vmax;
    font-size  : 0.93vmax;
}

#compagnie {
    background-color : #ffffff;
}

#compagnie .content, #compagnie .content2 {
    width      : 40vw;
    text-align : justify;
    left       : 10vw;
}

#compagnie .content {
    position  : relative;
    font-size : 90%;

}

#compagnie .content2 {
    position  : relative;
    top       : 0;
    font-size : 70%;
}

#compagnie h3 {
    font-size   : 225%;
    font-weight : bold;
}

#compagnie h4 {
    font-size   : 150%;
    margin-top  : 3vmin;
    font-weight : bolder;
}

#compagnie .smaller {
    color : #999999;
}

#compagnie .link {
    color               : #daa520 !important;
    border-bottom-color : #daa520 !important;
}

#compagnie h1.goToHome {
    position       : absolute;
    bottom         : 3vh;
    left           : 3vw;
    color          : #daa520 !important;
    font-weight    : bold;
    top            : inherit;
    text-transform : uppercase;
    font-size      : 3vh;
    cursor         : pointer;
    width          : 100vw;
    z-index        : 9999;
}

#compagnie .goToHomeTexte {
    margin-left : 100px;
}

#compagnie .arrows {
    transform : rotate(180deg);
    float     : left;
    position  : initial;
}

#ressources {
    background      : #cecece url("../images/ressources-2000.jpg") center;
    background-size : cover;
}

#lectures {
    background      : #cecece url("../images/lectures-2000.jpg") center;
    background-size : cover;
}

#lectures .content {
    color      : white;
    width      : 55%;
    position   : relative;
    top        : 20vh;
    text-align : justify;
    right      : -40vh;
}

#livre {
    background            : #ffffff url("../images/livre-2000.jpg") no-repeat;
    background-size       : cover;
    background-position-y : center;
}

#partenariats {
    padding-top : 5vmax;
    background  : #000000;
    color       : white;
}

#partenariats .content {
    width  : 85%;
    margin : 2vmax auto 0 auto;
}

#partenariats .soutien {
    text-align : center;
}

#partenariats .soutien .soutien_item {
    display : inline-block;
    margin  : 2vmax 2vmax;
}

#partenariats .soutien .soutien_item img {
    max-width  : 7vmax;
    max-height : 7vmax;
}

#livre .content {
    color            : white;
    width            : 21vw;
    position         : relative;
    /* bottom: -30%; */
    text-align       : justify;
    background-color : #5d8683;
    left             : 65vw;
    padding          : 3vh;
}

#titre {
    font-size        : 12vmax;
    text-transform   : uppercase;
    position         : absolute;
    bottom           : 14vmin;
    color            : #333333;
    left             : 0;
    background-color : white;
    font-family      : Asgalt-Regular, Asgalt, sans-serif;
    line-height      : 13vmin;
    margin-bottom    : 0;
    padding          : 5vmin 2vmax 0vmin 12vmin;
}

.right {
    float : right;
}

.icn {
    vertical-align : middle;
}

.scroll_down {
    position : fixed;
    width    : 65px;
    opacity  : .5;
    bottom   : 1vh;
    left     : 50px;
    z-index  : 20;
    cursor   : pointer;
}

.shadowed {
    text-shadow : 1px 1px 5px #060606ad;
}

.link {
    text-decoration     : none !important;
    border-bottom-width : 1px;
    border-bottom-color : white;
    border-bottom-style : dotted;
    color               : white;
}

.link:hover {
    text-decoration : inherit !important;
    color           : #daa520 !important;
}

.smaller {
    font-size : 80%;
}

.larger {
    font-size : larger;
}

.scroll_down:hover {
    opacity : 1;
}

.titre_section {
    position         : fixed;
    background-color : white;
    z-index          : 1;
    font-family      : 'Asgalt-Regular', sans-serif;
    font-size        : 4em;
    text-transform   : uppercase;
    padding          : 3vh 3.5vh 1vh 10vh;
    line-height      : .6;
    top              : 6vmin;
}

.lettrine {
    font-size      : 50px;
    vertical-align : bottom;
}

/* ---- COMMUN ---- */

@media (orientation : landscape) {
    .viewport-section {
        -webkit-box-align : center;
        -ms-flex-align    : center;
        align-items       : center;
    }
}

.viewport-section {
    position : relative;
    display  : -webkit-box;
    display  : -ms-flexbox;
    display  : flex;
    overflow : hidden;
}

.viewport-section {
    width               : 100%;
    height              : 100vh;
    background-position : center;
    background-size     : cover;
}

.viewport-section > h1, .viewport-section > h2, .viewport-section > h3, .viewport-section > h4, .viewport-section > h5, .viewport-section > h6 {
    position : absolute;
    top      : 20px;
    left     : 35px;
}

.content, .content2, .content3 {
    /* text-shadow: 0.05em 0.3em 0.3em rgba(0, 0, 0, .3); */
    padding : 50px;
    z-index : 10;
}

.accent-color-text {
    color : #daa520 !important;
}

.accent-color-bg {
    background-color : #daa520;
}

/* ---- DOTS ---- */

.dot_text {
    font-size   : 50px;
    font-family : Asgalt-Regular, Asgalt, sans-serif;
}

.dots {
    position          : fixed;
    top               : 50%;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    right             : 0.1vmax;
    width             : 300px;
}

.dots .glow {
    fill              : transparent;
    -webkit-animation : dot-glow 3.5s cubic-bezier(0, .81, .46, 1) infinite;
    animation         : dot-glow 3.5s cubic-bezier(0, .81, .46, 1) infinite
}

.dots .dot {
    cursor  : pointer;
    outline : 0
}

.dots .point {
    stroke             : #0000;
    stroke-width       : 3px;
    -webkit-transition : stroke-width .3s linear;
    transition         : stroke-width .3s linear;
    opacity            : 1;
    fill               : #ffffff;
}

.dots:hover .point {
    opacity : 1;
}

.dots .outline {
    fill               : transparent;
    -webkit-transition : fill .2s linear;
    transition         : fill .2s linear
}

.dots .dot:focus .point, .dots .dot:hover .point {
    stroke-width : .5
}

.dots .dot:focus .outline, .dots .dot:hover .outline {
    fill : rgba(0, 0, 0, .2)
}

.dots .dot.active .point {
    stroke-width : 10px;
    stroke       : #daa520;
}

.dots .dot.active .glow, .dots.end .glow {
    -webkit-animation : none;
    animation         : none
}

.dots .dots-outline {
    fill              : none;
    stroke            : #ffffff;
    stroke-width      : .702;
    stroke-linecap    : round;
    stroke-linejoin   : round;
    stroke-dasharray  : 15, 200;
    stroke-dashoffset : -165
}

.dots .dot text {
    opacity    : 0;
    fill       : white;
    transition : all .5s ease-in-out;
}

.dots .dot:hover text {
    opacity    : 1;
    transition : all .5s ease-in-out;
}

.dots .dot text:hover {
    transition : all .5s ease-in-out;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.representation .event_title {
    color : #daa520;
}

.residence .event_title {
    color : #1e88e5;
}

.soiree .event_title {
    color : #7b1fa2;
}

.lecture .event_title {
    color : #e91e63;
}

/* POLA
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.polaroids {
    width    : 100%;
    margin   : 0 auto;
    overflow : hidden;
    padding  : 80px;
}

.polaroids a {
    background         : white;
    padding            : 10px 10px 15px;
    margin             : 10px;
    float              : left;
    width              : 245px;
    text-decoration    : none;
    color              : black;
    text-align         : center;
    font-family        : Asgalt-Regular, Asgalt, sans-serif;
    font-size          : 25px;
    text-transform     : uppercase;
    font-weight        : bolder;
    transform          : rotate(-2deg);
    -webkit-transform  : rotate(-2deg);
    -moz-transform     : rotate(-2deg);
    box-shadow         : 0 3px 6px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow : 0 3px 6px rgba(0, 0, 0, 0.25);
    -moz-box-shadow    : 0 3px 6px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    height: 27vh
}

.polaroids a:after {
    content : attr(title);
}

.polaroids a:nth-child(even) {
    transform         : none;
    -webkit-transform : none;
    -moz-transform    : none;
}

.polaroids a:nth-child(4n) {
    transform         : rotate(5deg);
    -webkit-transform : rotate(5deg);
    -moz-transform    : rotate(5deg);
}

.polaroids a:hover {
    transform          : scale(1.25);
    -webkit-transform  : scale(1.25);
    -moz-transform     : scale(1.25);
    position           : relative;
    z-index            : 5;
    transition         : transform .15s linear;
    -webkit-transition : -webkit-transform .15s linear;
    -moz-transition    : -moz-transform .15s linear;
}

.polaroids a img {
    margin-bottom : 10px;
    width         : 19vh;
    height        : 19vh;
}

/* style the elements with CSS */
#pleaserotate-graphic {
    fill : #ffffff;
}

#pleaserotate-backdrop {
    color            : #ffffff;
    background-color : #daa520;
}

div.arrows {
    position : fixed;
    bottom   : 35px;
    left     : 5%;
    width    : 50px;
    height   : 50px;
    z-index  : 999;
    cursor   : pointer;
}

div.arrows div {
    width             : 34px;
    height            : 34px;
    margin-left       : -12px;
    border-left       : 5px solid #000000;
    border-bottom     : 5px solid #000000;
    -webkit-transform : rotate(-45deg);
    transform         : rotate(-45deg);
    -webkit-animation : sdb05 3s infinite;
    animation         : sdb05 3s infinite;
    box-sizing        : border-box;
}

div.arrows.white div {
    border-color : white;
}

div.arrows.black div {
    border-color : black;
}

div.arrows.gris div {
    border-color : #404848cc;
}

div.arrows.jaune div {
    border-color : #daa520 !important;
}

div.arrows.hidden {
    display : none !important;
}

@-webkit-keyframes sdb05 {
    0% {
        -webkit-transform : rotate(-45deg) translate(0, 0);
        opacity           : 0;
    }
    50% {
        opacity : .8;
    }
    100% {
        -webkit-transform : rotate(-45deg) translate(-20px, 20px);
        opacity           : 0;
    }
}

@keyframes sdb05 {
    0% {
        transform : rotate(-45deg) translate(0, 0);
        opacity   : 0;
    }
    50% {
        opacity : .8;
    }
    100% {
        transform : rotate(-45deg) translate(-20px, 20px);
        opacity   : 0;
    }
}

.malvoyant section {
    background-image : none !important;
    background-color : white !important;
    color            : black !important;
}

.malvoyant .titre_section {
    background-color : black !important;
    color            : white !important;
}

.malvoyant section .content, .malvoyant section .content2, .malvoyant section .content3, .malvoyant .link {
    color     : black !important;
    font-size : 2.5vh;
}

.malvoyant section .content, .malvoyant section .content2, .malvoyant section .content3 {
    position : initial !important;
    background-color: transparent; !important;
    opacity: 1;
}

.malvoyant .link {
    border-bottom-color : #000000 !important;
}

.malvoyant .shadowed, .malvoyant .dist, .malvoyant #dates h3 {
    text-shadow : none !important;
}

.malvoyant #intention .content, .malvoyant #dates .content, .malvoyant #livre .content, .malvoyant #lectures .content {
    width : 80% !important;
}

.malvoyant #dates .content {
    width      : 80vmax;
    margin     : 1vw 0 0 1vw;
    text-align : left;
    color      : white;
    font-size  : 90%;
}

.malvoyant #intention .content {
    left        : 0 !important;
    font-size   : 1.5vmax !important;
    width       : 85% !important;
    padding-top : 20vmin !important;
    top         : 0 !important;
}

.malvoyant #spectacle .content {
    margin-top: -10vmin;
}

.malvoyant #intention img, .malvoyant #compagnie .content2 {
    display : none !important;
}

.malvoyant #equipe .content2 {
    width  : 40%;
    bottom : -30%;
    left   : 15%;
}

.malvoyant #mediation .content2 {
    top   : 20vh;
    width : 50vw;
}

.malvoyant #mediation .content {
    top   : 3vh;
    width : 45vw;
    left  : 53vw;
}

.malvoyant #livre .content {
    width            : 70vw;
    left             : 5vw;
    background-color : transparent;
}

.malvoyant #compagnie .content {
    position : inherit;
    width    : 90%;
}

.malvoyant .dots .dot text {
    fill : black !important;
}

.malvoyant .dots .point {
    stroke : #000000;
}

.malvoyant_toggle {
    position  : absolute;
    top       : 2vh;
    right     : 3vh;
    font-size : .8vmax;
    padding   : 3px 5px;
    cursor    : pointer;
}

.malvoyant div.arrows.white div {
    border-color : black !important;
}

.fullscreen_toggle {
    position  : absolute;
    top       : 6vh;
    right     : 3vh;
    font-size : .8vmax;
    padding   : 3px 5px;
    cursor    : pointer;
}

@media screen and (max-device-width : 900px) {
    #titre {
    }

    .content, .content2, .content3 {
    }

    #spectacle .content {
        font-size : 2vmax;
        width     : 75vmax;
    }

    #intention {
        background            : #cecece url(../images/intention-20002-mobile.jpg);
        background-size       : cover;
        background-position-y : center
    }

    #intention .content {
        width            : 40vmax;
        left             : 50vw;
        top              : inherit !important;
        font-size        : 100%;
        background-color : #ffffffcf;
        color            : black;
        padding          : 6vmin;
    }

    #intention .content .shadowed {
        text-shadow : none;
    }

    #equipe .content2 {
        width : 40%;
        left  : 20%;
    }

    #equipe .content {
        top : 5vh;
    }

    #dates .content {
        width       : 100%;
        font-size   : 75%;
        padding-top : 15vmin;
        margin      : 0 0 0 5vmax;
    }

    #lectures .content {
        font-size : 1vmax;
        top       : 20vmin;
        width     : 66vmax;
        right     : -16vmax;
    }

    #livre .content {
        color            : white;
        width            : 29vmax;
        position         : relative;
        /* bottom: -30%; */
        text-align       : justify;
        background-color : #5d8683;
        left             : 65vw;
        font-size        : 1.5vmax;
        padding          : 3vh;
    }

    #mediation .content, #mediation .content2 {
        font-size : 2.2vmin;
    }

    #mediation .content {
        top : 0;
    }

    #mediation .content2 {
        top   : 9vh;
        width : 38vw;
        left  : 0;
    }

    #compagnie .content2 {
        font-size : 62%;
    }

    #compagnie .content {
        font-size : 75%;
    }

    .polaroids {
        margin-top : 20vh;
    }

    .polaroids a {
        width     : 11.5vmax;
        font-size : 140% !important;
    }

    .polaroids a img {
        width  : 80%;
        height : initial;
    }

    .hide_on_small {
        display : none !important;
    }

    .hide_on_big {
        display : block !important;
    }

    .content, .content2, .content3 {
        padding : 3vmax;
    }

    .malvoyant_toggle {
        font-size : 1.35vmax !important;
    }

    .fullscreen_toggle {
        font-size : 1.35vmax !important;
        top       : 9vh;
    }

}

.hide_on_big {
    display : none;
}

.hide_on_small {
    display : block;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

.modal-content img {
    max-height: 50vh;
    max-width: 20vw;
}

.modal-content p {
    float: left;
    padding: 2vh;
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 15px 25px 5px;
    background-color: #daa520;
    color: white;
}

.modal-body {padding: 5vh 5vw;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
    display: none;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}