@import url('reset.css');
@import url(//fonts.googleapis.com/css?family=Ubuntu:400);

html {
    overflow-x: hidden;
    overflow-y: scroll;
}

html, body {
    width: 100%; /*height: 100%;*/
}

body {
    background: #000000;
    font-family: 'ubuntu', Arial, sans-serif;
    font-size: 1em;
    color: #eeeeec;
}

#whole_page {
    width: 100%;
    height: 100%;
}

#hm-header-yellowline {
    line-height: 8px;
    width: 100%;
    background: #ffc300;
    z-index: 100;
    position: fixed;
}

#hm-logo img {
    position:fixed;
    width: 30%;
    min-width: 200px; max-width: 250px;
    top: 20px; left: 20px;
    z-index: 80;
}

#logo-custom img {
    position:fixed;
    top: 20px; right: 20px;
    z-index: 80;
    min-width: 125px; max-width: 331px;
}

p.titre {
    position: relative;
    font-size: 2.5em;
    text-shadow: 0px 2px 2px rgb(0,0,0);
    text-transform: uppercase;
    text-align: right;
    padding: 20px 20px 20px 20px;
    z-index:70;
    pointer-events: none;
}
@media screen and (max-width: 600px)
{
    p.titre {
        font-size: 1.2em;
    }
}

#ico_hm {
    margin: 0px 3px; margin-bottom: -1px;
}
#ico_at {
    margin: 0px 2px; margin-bottom: -2px;
}

#touch_compatible img {
    position: fixed;
    width: 20%;
    min-width: 100px; max-width: 250px;
    bottom: 12%; left: 4%;
    z-index: 50;
}

#touch_me {
    width: 100%;
    position: absolute;
    z-index: 100;
}

#touch_me img {
    width: 12%;
    min-width: 80px; max-width: 209px;
}

#footer {
    opacity: 0.9;
    background: #2e3436;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 98;
    pointer-events: none;
}
p.footer-text {
    line-height: 40px;
    font-size: 1.6em;
    text-align:center;
    z-index: 99;
}
@media screen and (max-width: 500px)
{
    p.footer-text {
        line-height: 30px;
        font-size: 1.4em;
        text-align:center;
        z-index: 99;
    }
}

/* ---- bouton retour ----- */

#btn_back {
    position: absolute;
    left: 6%; bottom: 20%;
    z-index: 150;
}
#btn_back img {
    height: 50px;
    float: left;
}
#btn_back span {
    background: #2e3436;
    color: #ffc300;
    float: left;
    font-size: 2em; line-height: 50px;
    text-align: center; text-transform: uppercase;
    padding: 0 20px; padding-right: 25px;
    cursor: pointer;
}
#btn_back a, #btn_back a:active, #btn_back a:visited, #btn_back a:hover {
    text-decoration: none;
}
@media screen and (max-width: 800px)
{
   #btn_back {
        left: 5%; bottom: 10%;
    }
    #btn_back img {
        height: 30px;
    }
    #btn_back span {
        font-size: 1.5em; line-height: 30px;
        padding: 0 10px; padding-right: 15px;
    }
}

/* ---- Menu ----- */

.hv_menu {
    position: absolute;
    z-index: 9999;
    /*border: 1px solid red;*/
    top: 12%; left: 8px;
    color: #000;
    word-wrap: normal;
}
    .hv_menu ul {
        list-style-type:none;
    }
    .hv_menu li {

        float:left;
        margin: 2px;
    }

.hv_menu_categV {
    text-align: center;
    text-transform: uppercase;

    /*border: 1px solid yellow;*/
}
    .hv_menu_categV ul {
        text-transform: none;
        list-style-type:none;
    }
    .hv_menu_categV li {
        float:none;
        margin: 3px 0px;
    }
    .hv_menu_categV > span {
        color: #fff;
    }

.hv_menu_groupV1 {
    -webkit-transition: -webkit-transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out;
    color: #000;
    padding: 2px 1px;
    display: none;
}
    .hv_menu_groupV1 .hv_menu_btn {
        background: seashell;
    }

.hv_menu_groupV2 {
    -webkit-transition: -webkit-transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out;
    color: #000;
    padding: 6px 0px 3px 0px;
    display: none;
}
    .hv_menu_groupV2 li {
        margin: -1px 0px;
    }
    .hv_menu_groupV2 .hv_menu_btn {
        background: #C9EAF4;
    }

.hv_menu_choixV  {
    margin: 5px 0px 2px 0px;
    display: none;
}
    .hv_menu_choixV ul {
    }
    .hv_menu_choixV li {
        margin: 0px 0px;
    }
    .hv_menu_choixV .hv_menu_btn {
        background: aliceblue;
        border-radius: 2px;
        border-top: none;
        padding: 4px 5px;
    }
    .hv_menu_choixV .hv_menu_btn:first-of-type {
        border-top: 1px solid black;
    }

.hv_menu_btn, .hv_menu_btn2 {
    -webkit-transition: -webkit-transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out;
    background: #fcfcfc;
    cursor: pointer;
    border: 1px solid black;
    color: #000;
    border-radius: 4px;
    padding: 5px 4px;
    text-align: center;
    max-width: 80px;
    word-wrap:normal;
    /*word-break:break-all;*/
}
    .hv_menu_btn img{
        width: 25px;
        user-select: none;
    }
    .hv_menu_btn2 img{
        width: 25px;
    }
    .hv_menu_btn2:hover {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

.hv_menu_input {
    background: #fff;
    color: #000;
    max-width: 60px;
}

.hv_menu_separ {
    background: lightsteelblue;
    border: 1px solid black;
    border-radius: 4px;
    padding: 1px 0px;
}

/* ----- 3D ------ */

.hapviz_3DViewer {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

#my3DViewer_menu {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    border: none;
}

#my3DViewer_mini {
    position: absolute;
    width: 50%;
    top: 10%; left: 20%;
    border: 1px dashed gray;
}

.hv_fallback_text {
    font-size: 1em;
    line-height: 1.1em;
}

/* ----- RESPONSIVE ------*/

@media screen and (max-width: 500px)
{
    html {
        overflow-y: scroll;
    }

    p.titre {
        display:none;
    }

    #hm-logo img {
        left: unset;
        right: 8px;
    }

    #logo-custom {
        display:none;
    }

    #footer {
        display: none;
    }

    .hv_menu {
        position: relative;
        max-width: 70px;
        top: 8px; left: 3px;
    }
        .hv_menu li {
            float: none;
            display: inline;
        }

    .hv_menu_categV {
    }
        .hv_menu_categV li {
            display: block;
        }
        .hv_menu_categV > span {
            font-weight: bold;
        }

    #my3DViewer_menu {
        position: relative;
        width: 75%; height: 400px;
        margin: auto;
        /*border: 1px dashed red;*/
    }

    .hv_fallback_text {
        font-size: 1.2em;
        line-height: 1.2em;
    }
}