@font-face { font-family: 'robotoregular'; src: url("//hapticmedia.fr/_server/_system/media/fonts/roboto-regular-webfont.eot"); src: url("//hapticmedia.fr/_server/_system/media/fonts/roboto-regular-webfont.eot?#iefix") format("embedded-opentype"), url("//hapticmedia.fr/_server/_system/media/fonts/roboto-regular-webfont.woff2") format("woff2"), url("//hapticmedia.fr/_server/_system/media/fonts/roboto-regular-webfont.woff") format("woff"), url("//hapticmedia.fr/_server/_system/media/fonts/roboto-regular-webfont.ttf") format("truetype"), url("//hapticmedia.fr/_server/_system/media/fonts/roboto-regular-webfont.svg#robotoregular") format("svg"); font-weight: normal; font-style: normal; }

body { background: #F8F8F8; }
a {text-decoration: none;}

.hapticmedia {
    display: block; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid #EEE;
    font-family: 'robotoregular'; font-size: 18px; letter-spacing: 3px; color: #111; text-align: center;
}
.hapticmedia span { color: #FFC300; }


/*---- VIEWER ----*/

.hapviz_3DViewer { position: fixed; top: 0; left: 0; width: 70%; width: -webkit-calc(100% - 212px); width: -moz-calc(100% - 212px); width: calc(100% - 212px); border-right: 1px solid #EEE; background: #F8F8F8; }

.hv_gui_basicButton { font-weight: normal; color: #111; }

/*---- MENU ----*/

.hv_menu_global {
    position: fixed; top: 0; right: 0; min-width: 212px; height: 100%; padding: 20px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.hv_menu_content { position: absolute; top: 105px; right: 20px; }

.hv_gui_configMenu { margin: 0; color: #111; }

.hv_gui_configMenu + .hv_gui_configMenu { margin-top: 30px; }

.hv_gui_configMenu > span { font-size: 14px; font-weight: normal; letter-spacing: 1px; }

.hv_gui_configMenu > ul > li > span { font-size: 12px; letter-spacing: 1px; }

.hv_gui_configMenu > ul > li > ul > li > span { font-size: 10px; letter-spacing: 1px; line-height: 1; }

.hv_gui_configMenu > ul > li > ul > li.current > span,
.hv_gui_configMenu > ul > li > ul > li:hover { color: #111; }

.hv_gui_configMenu > ul > li:before,
.hv_gui_configMenu > ul > li > ul { border-color: rgba(17,17,17,0.5); }

.hv_gui_configMenu > ul > li.selected:before,
.hv_gui_configMenu > ul > .checkbox.active:before { border-color: #111; }

.hv_gui_configMenu > ul > li > span:before,
.hv_gui_configMenu > ul > li > ul:before { background: rgba(17,17,17,0.5); }

.hv_gui_configMenu > ul > li.selected > span:before,
.hv_gui_configMenu > ul > .checkbox.active > span:before {background: #111; }

.hv_gui_goFullscreenButton { bottom: 20px; right: 20px; }


/*---- MENU ----*/

@media (max-width: 459px) {
    .hapviz_3DViewer { width: 100%; border: none; }
    .hapticmedia { margin: 0; padding: 0; border: none; }
    .hv_menu_global { min-width: inherit; height: 45px; padding: 10px; }
    .hv_menu_content { display: none; }
    .hv_gui_goFullscreenButton { bottom: 10px; right: 10px; }
}