@font-face {
    font-family: 'adieu';
    src: url('font/adieu-bold.otf');
}
@font-face {
    font-family: 'credible';
    src: url('font/credible.otf');
}

body {
    margin: 0;
}

#container {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
img {
    display: block;
    position: absolute;
}

.o1 {
    margin-left: -00px;
}

.o2 {
    margin-left: -400px;
}

.o3 {
    margin-left: 400px;
}

.o4 {
    margin-left: 200px;
}

.o5 {
    margin-left: -200px;
}

.videograf {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
}

.global {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-self: center;
    height: 100vh;
    width: 100%;
}

.global span {
    -webkit-animation: NAME-YOUR-ANIMATION 1s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 1s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 1s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 1s infinite; /* IE 10+, Fx 29+ */
}

.oui {
    transition: opacity ease-in-out 1s;
}

.non {
    transition: opacity ease-in-out 1s;
}

.dispoflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
    0%   { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
  }
  @-moz-keyframes NAME-YOUR-ANIMATION {
    0%   { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
  }
  @-o-keyframes NAME-YOUR-ANIMATION {
    0%   { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes NAME-YOUR-ANIMATION {
    0%   { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
  }

.g1,
.g2 {
    transition: ease-in-out 0.5s opacity;
    font-family: adieu, sans-serif;
    font-size: 3.5rem;
    padding: 0 4rem;
}

.g1 .tag1 {
margin-top: -10%;
}

.g1 .tag2 {
    margin-left: 70%;
    margin-top: -13%;
}

.g1 .tag3 {
    margin-top: -14%;
    margin-left: 3%;
}

.g1 .tag4 {
    margin-top: -13%;
    margin-left: 21%;
}

.g1 .tag5 {
    margin-left: 30%;
    margin-top: -10%;
}

.g1 .tag6 {
    margin-top: -11%;
    margin-left: 45%;
}

.g2 img {
    margin-top: -330px;
    margin-left: 70px;
}

.g2 {
    color: white;
}

.imgg2 {
    background-image: url('img/graff2.gif');
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
}

.choisi {
    font-family: credible, sans-serif;
    font-size: 2.6rem;
    padding: 1.5rem;
}

.blockflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.bimg {
    width: 33.33%;
    height: 300px;
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.bimg span {
    display: block;
    height: 100%;
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
}

.bimg span:hover {
    background-image: url('img/hover_cool.png');
}

.b1-img {
    background-image: url('img/page_spot/camionette_0.png');
}

.b2-img {
    background-image: url('img/page_spot/ecal_0.jpg');
}

.b3-img {
    background-image: url('img/page_spot/ecalcom_0.jpg');
}

.b4-img {
    background-image: url('img/page_spot/murblanc_0.jpg');
}

.b5-img {
    background-image: url('img/page_spot/musée_0.jpg');
}

.b6-img {
    background-image: url('img/page_spot/muséelaus_0.jpg');
}

.b7-img {
    background-image: url('img/page_spot/police_0.jpg');
}

.b8-img {
    background-image: url('img/page_spot/squatt.jpg');
}

.b9-img {
    background-image: url('img/page_spot/train_0.jpg');
}

canvas {
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.can1 {
    background-image: url('img/page_spot/camionette_0.png');
}

.can2 {
    background-image: url('img/page_spot/ecal_0.jpg');
}

.can3 {
    background-image: url('img/page_spot/ecalcom_0.jpg');
}

.can4 {
    background-image: url('img/page_spot/murblanc_0.jpg');
}

.can5 {
    background-image: url('img/page_spot/musée_0.jpg');
}

.can6 {
    background-image: url('img/page_spot/muséelaus_0.jpg');
}

.can7 {
    background-image: url('img/page_spot/police_0.jpg');
}

.can8 {
    background-image: url('img/page_spot/squatt.jpg');
}

.can9 {
    background-image: url('img/page_spot/train_0.jpg');
}

.okbtn {
    position: absolute;
    top: 5%;
    left: 5%;
    background: white;
    border: 2px solid black !important;
    color: black;
    padding: 0.8rem 1.2rem;
    text-transform: uppercase;
    box-shadow: 0;
    border: 0;
}

.content-flex a {
    font-family: credible, sans-serif;
    color: black;
    font-size: 5rem;
    text-decoration: none;
    margin: 1rem 0;
}

.content-flex a:hover {
    color: lime;
    
  
}

.oo1 {
    margin-left: 1px;
}

.oo2 {
    margin-left: -200px;
}

.oo3 {
    margin-left: 200px;
}

.oo4 {
    margin-left: 100px;
}

.oo5 {
    margin-left: -100px;
}

.canfull {
    width: 100%;
    height: 100vh;
}

label {
    font-family: adieu, sans-serif;
}

textarea::placeholder {
    font-family: adieu, sans-serif;
    opacity: 0.3;
}

.sendoff {
    font-family: adieu, sans-serif;
}

textarea {
    resize: none;
}

.artiii .choisi span {
font-size: 1rem;
}

.artiii a {
    margin-bottom: 3rem;
    width: 31.3%;
}

.artiii a span {
   background-size: 60%;
}

.artiii a span:hover {
    background-image: url('img/smile_gallery.png');
}


.b11-img {
    background-image: url('img/art/11.png');
}

.b22-img {
    background-image: url('img/art/22.png');
}

.b33-img {
    background-image: url('img/art/33.png');
}

.b44-img {
    background-image: url('img/art/44.png');
}

.b55-img {
    background-image: url('img/art/55.png');
}

.b66-img {
    background-image: url('img/art/66.png');
}

.b77-img {
    background-image: url('img/art/77.png');
}

.b88-img {
    background-image: url('img/art/88.png');
}

.b99-img {
    background-image: url('img/art/99.png');
}

.b1010-img {
    background-image: url('img/art/1010.png');
}

.b1111-img {
    background-image: url('img/art/1111.png');
}

.b1212-img {
    background-image: url('img/art/1212.png');
}

.noborder {
    border: 0 !important;
}