a:link img, a:visited img, a:hover img, a:active img {
    border: 0px;
}

@font-face {
    font-family: HelveticaNeueLight;
    src: url("HelveticaNeueLight.otf") format("opentype");
}

body, html {

    margin: 0px;

    padding: 0px;

    height: 100%;

    font-family: HelveticaNeueLight, Arial, Helvetica, sans-serif;
    font-size: 8px;


}

body.home {

}
a, a:visited {
    text-decoration: none;
    color:black;
}
a:hover {
    text-decoration: underline;
}
#is_responsive {

    visibility: hidden;
}

#h1 {
    top: 5%;
    margin-top: 0;
    position: fixed;
    padding-left: 20px;
    z-index: 999;
}
#info {
    top: 5%;
    transform: translateX(-20px);
    position: fixed;
    font-size: 14px;
    width: 100%;
    text-align: right;
    cursor:pointer;
    z-index: 2;
}
#h1.fade {
    animation: fadeinout 1.4s;
}
#info.fade {
    animation: fadeinout 1.4s;
}

@keyframes fadeinout{
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#h1.fade2 {
    animation: fadeinout2 1.4s;
}
#info.fade2 {
    animation: fadeinout2 1.4s;
}

@keyframes fadeinout2{
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#info.dpn {
   display: none;
}



body.home.static {
height:99%;
    overflow:hidden;
}
.home #container {

    width: 810px;
    margin-left: calc(calc(100% - 810px) / 2);
    transition: all 1200ms ease-out;

}

.home #container.mosaique {

    width: 240px;
    margin-left: 200px;
    transition: none;


}

.home #container.reduced {
   margin-left: -840px;
}
.home-image {
    opacity: 1;
    transition: all 500ms ease-out;
    cursor: pointer;
    z-index: 9999;
}
.home-image.inactive {

    opacity: 0.5;
    cursor: none;
}
.home #container img {
    max-width: 100%;
}


#preview {
    position: fixed;
    /*width: calc(100vw - 840px);*/
    height: 80%;
    top: 10%;
    z-index:0;
    overflow: hidden;
   /* left: calc(calc(100vw - 840px) / 2);*/
    left : 0px;
    /*background-color: aliceblue;*/
}
#preview.inactive {

    display: none;
}
#preview.active {

    animation: prevactive 1.4s;
}

@keyframes prevactive{
    0% {
        opacity: 0;
        left: 100%;
    }
    50% {
        opacity: 1;

    }

    100% {
        opacity: 1;
        /*left: calc(calc(100vw - 840px) / 2);*/
        left : 0px;
    }
}
#container-preview-top {
   margin-top: 2%;
    height: 3%;
    text-align: right;
    padding-right: 40px;
    font-size: 1.5em;
}
#container-previewinfo-bottom {
    top: calc(100vh - 40px);
    /*left: 0;*/
    /* height: 3%; */
    text-align: right;
    /* padding-right: 40px; */
   font-size: 14px;
    position: fixed;
    /*width: 100%;*/
    right: 0;
}
 #button-back,#button-back-info{
    cursor: pointer;
     padding-right: 40px;
}
#super-container {
    /*height: 90%;*/
    height: 100%;
    /*background-color: aqua;*/
    position: relative;

}
#container-preview {
    /*height: 90%;*/
    height: 100%;
    width: 15000px;
    /* left: -113px; */
    left:0;
    position: relative;
    transition: all 500ms ease-out;
}


#container-preview-bottom {
    top: calc(100vh - 50px);
    left: 0;
    /* height: 3%; */
    text-align: right;
    /* padding-right: 40px; */
    font-size: 14px;
    position: fixed;
    width: 100%;
}

#button-preview-bottom {
    text-align: center;
    /*padding-top: 5px;*/
    /*width: calc(100vw - 200px);*/
}
#button-preview-bottom img{
    cursor: pointer;
}

.preview-image {
    height: 100%;
    /* width: calc(100vw - 840px); */
    text-align: center;
    float: left;
    /* max-width: 840px; */
    margin-right: 20px;
    margin-left: 20px;

}
.preview-image img{

    /* height: auto; */
    /* max-width: calc(100vw - 840px); */
    cursor: zoom-in;
    max-height: 100%;
}


#previewinfo {
    position: fixed;
    /*width: calc(100vw - 840px);*/
    width: 900px;
    height: 100%;
    z-index:0;
    overflow: hidden;
    /*left: calc(100vw - 940px) ;*/
    left: 0px;
    height: 406px;
    top: calc(100vh - 460px);
    font-size: 12px;
}
#previewinfo.inactive {

    display: none;
}
#previewinfo.active {

    animation: prevactiveinfo 1.4s;
}

@keyframes prevactiveinfo{
    0% {
        opacity: 0;
        left: 100%;
    }

    50% {
        opacity: 1;

    }

    100% {
        opacity: 1;
        left: 0px ;
    }
}
#previewinfo1 {
    float: left;
    width: 200px;
    margin-left: 20px;
}
#previewinfo2 {
    float: left;
    width: 100px;
    margin-left: 20px;
}
#previewinfo3 {
    float: left;
    width: 100px;
    margin-left: 20px;
}
#previewinfo4 {
    float: left;
    width: 200px;
    margin-left: 20px;
}
.home #gauche {
    /*max-width: 50%;*/
    float: left;
    width: 405px;
}

.home #droite {
    /*max-width: 50%;*/
    float: right;
    width: 405px;
}

.home .container_image_gauche{
    padding-bottom: 2px;
    padding-right: 2px
;

}

.home .container_image_droite {
    padding-bottom: 2px;
    padding-left: 2px;
}

h1 {
    font-size: 14px;


}

h2 {

    font-size: 12px;
    line-height: 0;
    margin: 0;
    padding: 0;
    text-indent: -999px;


}

.ovh {
    overflow: hidden;
}
.fl {
    float: left;
}
.clr {
    float: none;
}
.zindex999 {
    z-index: 999;
}
#previewbid {
    /* position: fixed; */
    width: 100%;
    height: 100%;
    left: 100%;
    /* opacity: 0; */
    transition: all 1000ms ease-out;
    z-index: 0;
    overflow: hidden;
}
.mt0i {
    margin-top: 0px !important;
}


/***********************************/
/*  mosaique     */
/**********************************/

#chutier {
    width: 600px;
    height: 2000px;
    border: 3px solid #666;
    position: fixed;
    top: 40px;
    right: 40px;
    background-color: #eee;
    z-index: -1;
}
.zindex999 {
    z-index: 999;
}
.zindex9999 {
    z-index: 9999;
}


#chutier .container_image_gauche {
    position: static !important;
    width: 140px;
    float: left;
}

#chutier .container_image_gauche img {
    width: 90%;
}
#chutier .container_image_droite {
    position: static !important;
    width: 140px;
    float: left;
}

#chutier .container_image_droite img {
    width: 90%;
}

#purement {
    position: absolute;

    top: -10px;
    right: 0px;
    font-size: 10px;
    padding-bottom: 4px;
}
.mtm {
    margin-top: 20px;
}
.title_background {
    background: #EEE;
    padding: 3px 3px;
    border-bottom: 1px solid #f08f09;
    margin-bottom: 8px;
}
.title_background h3 {
    color: #0b0b0b;
    display: inline;
}
h3 {
    font-size: 14px;
    font-weight: bold;
    font-family: roboto, Arial, sans-serif;
    color: #0b0b0b;
}

textarea {
    margin-right: 20px;
    margin-left: 10px;
    height: calc(100vh - 180px);
    width: calc(100vw / 5);
}


/***********************************/
/*  ECRAN     -> 1024   */
/**********************************/
@media (max-width: 1024px) {
    .home #container {
        width: 610px;
        margin-left: calc(calc(100% - 610px) / 2);
        transition: all 1200ms ease-out;
    }

    .home #gauche {

        width: 305px;
    }

    .home #droite {

        width: 305px;
    }
}


/***********************************/
/*  ECRAN     -> 820    */
/**********************************/



/** https://stackoverflow.com/questions/42671616/css-media-query-iphone-max-width **/


@media (max-width: 820px) {
    .home #container {
        width: calc(100vw);
        margin-left: auto;
        margin-right: auto;

    }

    .home #gauche {

        width: calc(100vw / 2);
    }

    .home #droite {

        width: calc(100vw / 2);
    }

    #is_responsive {
        visibility: visible;
    }
    #menu {
        height: 24px;
        position: fixed;
        background-color: white;
        width: 100%;

        z-index: 9999;
        top: 0;
    }
    #h1 {
        top: 5px;
    }
    #info {
        top: 5px;
    }
    #button-preview-bottom {
        display: none;
    }
    h2 {
        text-indent: -9999px;
    }




    #container-previewinfo-bottom {
        top: calc(100vh - 44px);
        /* left: 0; */
        /* height: 3%; */
        text-align: right;
        /* padding-right: 40px; */
        font-size: 14px;
        position: fixed;
        width: 100%;
        right: 0;
        background-color: white;
        height: 44px;
        padding-top: 4px;
    }


    #button-back, #button-back-info

    {
        cursor: pointer;
        padding-right: 10px;
    }


    .preview-image img {

        width: 100% !important;
    }

    #preview {
        position: relative !important;
        overflow: inherit !important;
        top: 40px !important;
        height: auto;
        padding-bottom: 64px;
    }

    .preview-image {
        float: none !important;
        height: auto !important;
        margin-bottom: 20px !important;
    }

    #container-preview {

        width: 100% !important;

    }

    #super-container {
        left: 0 !important;
    }

    #previewinfo {
        position: relative !important;
        overflow: inherit !important;
        top: calc(100vh / 10) !important;
        width: 100% !important;
        height: auto;
    }
    #previewinfo1 {
        float: none !important;
        width: calc(100vw - 40px) !important;
    }
    #previewinfo2 {

    }
    #previewinfo3 {

    }
    #previewinfo4 {
        float: none !important;
        width: calc(100vw - 40px) !important;
        clear: both;
        padding-top: 20px;
    }
}	
 