html { overflow-x: hidden !important; }
a:hover, .uk-link:hover {
color: #1d5665 !important;
text-decoration: none !important;
}
a:hover, a:focus {
color: #1d5665 !important;
text-decoration: none !important;
}
#jp-content {
top: 0px !important;
height: 100vh !important;
}
@media only screen and (min-width: 768px) {
#jp-content {height: 100vh !important; }
}
body {
/*background-color: #01090e !important ;*/
background-color : none !important ;
}
#video video {
width: 100% !important ;
max-height: 100vh !important ;
/* margin-top: 500px !important ;*/
}
#video2 video {
width: 100% !important ;
max-height: 100vh !important ;
margin-top: 500px !important ;
}
.uk-panel-box {
padding: 0px !important ;
background-color : #01090e !important ;
font-size : 18px !important ;
color : #85e2f9 !important ;
}
#top{
height : 6.3vh !important ;
}
#bottom{
height : 4vh !important ;
margin-bottom: -11px;
position: fixed;
bottom: 1px;
}
.background {
width:100%;
height:100%;
}
#wrapper{
}
#boxes{
/* content: "";
display: table;
clear: both;
top: 30px;
position: fixed;*/
width: 100% ;
}
div{
/* float:left;*/
}
#cote1{
/* position: fixed;
z-index: -1;
width: 16%;
display: inline-block;*/
width: 5%;
float: left;
}
#centre{
/* margin-top: 0.8%;
width: 100%;
position: fixed;
display: inline-block;
padding-right: 13%;
margin-right: 5%;
float: left;
width: 90%;
margin-left: auto;
margin-right: auto;
width: 80%;
margin-left: 10%;*/
position: relative;
width: 75%;
margin-left: 12.5%;
height: 87vh;
}
#cote2{
/*
right: 1px;*/
width: 5%;
position: fixed;
display: inline-block;
}
#imgcote1{
height: 10px !important ;
min-height: 95vh !important ;
margin-left: 16%;
}
#imgcote2{
height: 10px !important ;
min-height: 95vh !important ;
margin-right: 16%;
}
.top-c {
}
.uk-cover-background {
background-position: 0% 0% !important ;
}
.enter {
width: 100px;
height: 100px;
background: url('/images/acc/dbut_du_jeu.jpg');
}
#ecran{
/* background-color : #1fc2ff45 !important ;
background-color : #030424b0 !important ;
border: 4px solid #0f2434;
background-position: center !important ;
*/
width: 100% !important ;
min-height: 100vh !important ;
position: fixed !important ;
margin-top: 2px !important ;
}
#conseil{
width: 100% !important ;
min-height: 100vh !important ;
position: fixed !important ;
background-size: contain !important ;
background-repeat: no-repeat !important ;
background-position-x: 50% !important ;
background-position-y: 50% !important ;
height: 100vh !important ;
color: #0f2435 !important ;
}
#conseil-texte{
width: 55vw !important ;
margin-top: 12vw !important ;
margin-left: 12%;
}
#conseil-texte2{
/*height: 65vh;*/
overflow-y: auto;
scrollbar-width: thin;
margin-left: auto;
}
/* Hide scrollbar for Chrome, Safari and Opera */
#conseil-texte2::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#conseil-texte2 {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#conseil-texte2 h1{
font-size: 1em !important ;
}
#conseil-texte2 h4{
font-size: 2vw !important ;
line-height: 35px !important ;
}
@media (max-width : 1300px) {
#conseil-texte2 h4{
font-size: 1.5vw !important ;
line-height: 30px !important ;
}
#conseil-texte {
width: 60vw !important ;
margin-top: 12vw !important;
margin-left: 8% !important;
}
}
@media (max-width : 900px) and (max-height : 900px) {
#conseil-texte2 h4{
font-size: 1.5vw !important ;
line-height: 25px !important ;
}
#conseil-texte {
width: 60vw !important ;
margin-top: 15vw !important;
margin-left: 8% !important;
}
}
@media (max-width : 900px) {
#conseil-texte2 h4{
font-size: 1.5vw ;
line-height: 25px ;
}
#conseil-texte {
width: 60vw ;
margin-top: 21vw ;
margin-left: 8% ;
}
}
@media (max-height : 500px) {
* + p, * + hr, * + ul, * + ol, * + dl, * + blockquote, * + pre, * + address, * + fieldset, * + figure, h1, h2, h3, h4, h5, h6 {
margin: 0px 0 4px 0 !important ;
}
#contentDiv h4{
font-size: 1.2vw !important ;
line-height: 17px !important ;
}
#contentDivm h4{
font-size: 1.2vw !important ;
line-height: 14px !important ;
}
#contentDivm li{
line-height: 2px !important ;
}
#conseil-texte2 h4{
font-size: 1.5vw !important ;
line-height: 20px !important ;
}
#conseil-texte {
width: 50vw !important;
margin-left: 10vw !important;
margin-top: 5vw !important;
}
}
@media (max-height : 300px) {
* + p, * + hr, * + ul, * + ol, * + dl, * + blockquote, * + pre, * + address, * + fieldset, * + figure, h1, h2, h3, h4, h5, h6 {
margin: 0px 0 4px 0 !important ;
}
#contentDiv h4{
font-size: 1.5vw !important ;
line-height: 17px !important ;
}
#contentDivm h4{
font-size: 1.2vw !important ;
line-height: 8px !important ;
}
#contentDivm li{
line-height: 1px !important ;
}
#conseil-texte2 h4{
font-size: 1.5vw !important ;
line-height: 12px !important ;
}
#conseil-texte {
width: 53vw !important;
margin-left: 10vw !important;
margin-top: 1.5vw !important;
}
}
#contentDiv h4{
font-size: 1.2vw !important ;
line-height: 25px ;
}
#contentDivm h4{
font-size: 1.2vw !important ;
line-height: 17px ;
}
#contentDivm li{
line-height: 2px !important ;
}
#contentDiv li{
line-height: 1px !important ;
}
#ecranmodule{
background-color : #09576ae3 !important ;
/* bleu clair background-color : #85e2f99c !important ;
background-color : #030424b0 !important ;
border: 4px solid #0f2434;*/
width: 100% !important ;
min-height:87vh !important ;
border: solid 3px #85e2f9 !important ;
border-radius: 10px !important ;
border-collapse: unset !important ;
}
.uk-container {
padding: 0px 0px !important ;
max-width: 100% !important ;
}
#top-c {
/* background-size: 1200px !important ;
background-repeat: repeat !important ;
width: 100% !important ;
height:100vh;
background-size: cover !important ;*/
position: fixed ;
height: 100vh;
background-size: 100% 100% !important;
width: 100% !important ;
}
#enter:hover {
background: url('/images/acc/dbut_du_jeu_hover.jpg');
z-index: 7777777777777777;
content: url('/images/acc/dbut_du_jeu_hover.jpg');
}
#big-video-vid_html5_api {
opacity: 0.5 !important ;
}
#border-menu {
border-right: dotted 1px #0f2434 ;
}
#border-menu-enqu-haut {
border-right: dotted 1px #0f2434 ;
border-bottom: dotted 1px #0f2434 ;
}
#border-menu-enqu-bas {
border-left: dotted 1px #0f2434 ;
border-top: dotted 1px #0f2434 ;
}
html {
background: url(/images/graph/fond.jpg) no-repeat center center fixed;
background-size: cover;
overflow-y: hidden !important ;
background: none !important ;
}
.main-outer{
background: none !important ;
}
.tm-content{
background: none !important ;
padding: 0px !important ;
}
/* .retour {
display: block;
left: 100%;
margin-left: -456px;
position: fixed;
top: 0px !important ;
width: 456px;
height: 279px;
background-image: url(/images/graph/boutonC.png);
background-position: 0 0;
background-repeat: no-repeat;
z-index: 6666664;
background-size: 300px;
}
.aide {
display: block;
margin-left: -456px;
position: fixed;
bottom: -69px !important ;
width: 90px;
height: 379px;
background-image: url(/images/graph/bouton2.png);
background-position: 0 0;
background-repeat: no-repeat;
z-index: 6666664;
background-size: 70px;
}
.boutonC {
}*/
#imgcadre {
width: 100%;
position: fixed;
top: 10px;
left: -6%;
right: -6%;
overflow: auto;
float: left;
height: 100vh;
bottom: -5%;
}
#imgcontour {
width: 90%;
height: 95%;
object-fit: fill;
position: absolute;
margin-left: 5%;
bottom: 1.5vh;
height: 97vh;
top: 0vh;
}
/*
#imgcadre {
width: 100%;
position: fixed;
top: 1%;
margin-left: 1%;
padding-right: 2%;
height: 98%;
}
width: 100%;
height: 95vh;
width: 100%;
height: 97%;
position: absolute;
left: 0px;
top: 2%;
z-index: 0;
background-size: auto auto;
background-image: /images/graph/contour.svg;
background-image: url(https://vs.cluebox.ch/images/graph/contour.svg);
background-repeat: no-repeat;
background-image: url(https://vs.cluebox.ch/images/graph/background.svg);
*/
#imgboutonC {
/* height: 10px !important;
min-height: 35.5vh !important;
position: absolute;
left: 1%;
width: 8%;*/
position: absolute;
left: -6.9%;
width: 7%;
top: 2%;
z-index: 99999999999 !important;
}
#imgboutonAgent {
/* height: 10px !important;
min-height: 35.5vh !important;*/
position: absolute;
left: -6.9%;
width: 7%;
bottom: 2%;
z-index: 99999999999 !important;
}
#imgboutonMess {
/* height: 10px !important;
min-height: 35vh !important;
position: fixed;
right: 0%;
width: 86%;
top: 0.5%; */
/*height: 10px !important;
min-height: 35vh !important;
position: fixed;
right: 0%;
width: 86%;
top: 0.5%; */
position: absolute;
right:-6.9%;
width: 7%;
top: 2%;
z-index: 99999999999 !important;
}
#imgaide {
/*height: 10px !important;
min-height: 35.5vh !important;*/
position: absolute;
right: -6.9%;
width: 7%;
bottom: 2%;
z-index: 99999999999 !important;
}
#imgindice1 {
width: 2%;
position: absolute;
left: 15%;
top: 3%;
}
#imgindice2 {
width: 2%;
position: absolute;
left: 20%;
top: 3%;
}
#imgindice3 {
width: 2%;
position: absolute;
left: 25%;
top: 3%;
}
#imgindice4 {
width: 2%;
position: absolute;
left: 30%;
top: 3%;
}
#imgindice1on {
width: 3%;
position: absolute;
left: 15%;
top: 1%;
}
#imgindice2on {
width: 3%;
position: absolute;
left: 20%;
top: 1%;
}
#imgindice3on {
width: 3%;
position: absolute;
left: 25%;
top: 1%;
}
#imgindice4on {
width: 3%;
position: absolute;
left: 30%;
top: 1%;
}
#imgsignaler {
width: 12%;
position: fixed;
right: 7%;
bottom: 25%;
}
#loginsnap {
background-size: 46vh 100%;
background-image: url(/images/graph/spidchat-connexion-sanslogo.png);
background-repeat: no-repeat;
background-position: 50%;
height: 97vh;
}
#bfPage1{
width: 75% !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ..android chrome paysage ordi portrait.
#bfPage1{
background-color: blue !important ;
}
*/
#bfLabel1 {
color: #979696 !important;
font-size: 0.8em !important;
text-align: left !important;
}
#bfLabel303 {
color: #979696 !important;
font-size: 0.7em !important;
text-align: left !important;
margin-top: 10px !important;
}
#bfLabel2 {
color: #979696 !important;
font-size: 0.8em !important;
text-align: left !important;
}
#bfLabel304 {
color: #979696 !important;
font-size: 0.7em !important;
text-align: left !important;
}
#ff_elem1 {
color: black !important;
font-size : 1.3em !important;
background-color: #fff !important;
border-bottom : 1px solid #dddddd !important;
/* float: left !important; */
height: auto !important;
border-left: none !important;
border-top : none !important;
border-right : none !important;
min-width: 100% !important;
}
#ff_elem303 {
color: black !important;
font-size : 1.3em !important;
background-color: #fff !important;
border-bottom : 1px solid #dddddd !important;
/* float: left !important; */
height: auto !important;
border-left: none !important;
border-top : none !important;
border-right : none !important;
min-width: 100% !important;
}
#ff_elem2 {
color: black !important;
font-size : 1.3em !important;
background-color: #fff !important;
border-bottom : 1px solid #dddddd !important;
height: auto !important;
border-left: none !important;
border-top : none !important;
border-right : none !important;
float: left !important;
width: 100% !important;
}
#ff_elem304 {
color: black !important;
font-size : 1.3em !important;
background-color: #fff !important;
border-bottom : 1px solid #dddddd !important;
height: auto !important;
border-left: none !important;
border-top : none !important;
border-right : none !important;
float: left !important;
width: 100% !important;
}
#ff_elem3{
font-size: 1em !important;
background-color: #fffc00 !important;
color: #000 !important;
margin-top: 8% !important;
border-radius: 8px !important;
cursor: pointer !important;
}
#ff_elem305{
font-size: 1em !important;
background-color: #fffc00 !important;
color: #000 !important;
margin-top: 8% !important;
border-radius: 8px !important;
cursor: pointer !important;
}
#ff_formdiv1{
width: 42vh !important ;
}
#ff_formdiv5{
width: 42vh !important ;
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* ..android chrome portrait.
#bfPage1{
background-color: red !important ;
}*/
}
@media (hover: none) and (pointer: coarse) and (orientation:landscape) {
/* ..iphone safari. android firefox
#bfPage1{
background-color: black !important ;
}
#ff_formdiv1{
width: 42vh !important ;
margin-top: -20vh !important ;
}*/
}
@media all and (min-width : 700px) {
/*
#bfPage1{
background-color: yellow !important ;
}
#ff_formdiv1{
width: 42vh !important ;
margin-top: none !important ;
}*/
}
@media (min-width : 700px) {
/* ordi paysage
#bfPage1{
background-color: green !important ;
}
#ff_formdiv1{
width: 42vh !important ;
margin-left: 6vh !important ;
margin-top: none !important ;
}
#ff_elem3{
font-size: 1.5em !important;
background-color: #fffc00 !important;
color: #000 !important;
margin-top: 20% !important;
border-radius: 10px !important;
height: 40px !important;
cursor: pointer !important;
margin-right: 35px !important;
}*/
}
.bfQuickMode .controls .control-label {
vertical-align: middle !important;
}
#imgFullSOpen {
position: fixed;
right: 15%;
width: 3.4vh ;
bottom: 2.4%;
z-index: 333333333;
}
#FullSOpen {
z-index: 333333333;
}
#imgFullSClose {
position: fixed;
right: 15%;
width: 2.5vh ;
bottom: 2.4%;
z-index: 333333333;
}
#imgProfil {
position: fixed;
right: 23%;
width: 2.7vh ;
bottom: 2.4%;
z-index: 333333333;
}
#imgRelance {
position: fixed;
/* right: 1%; */
width: 3.3vh ;
bottom: 2.4%;
z-index: 333333333;
right: 31%;
}
#heure {
position: fixed;
right: 84%;
width: 1.2%;
bottom: 0.5vw;
z-index: 333333333;
font-size: 2vw ;
}
#FullSClose {
z-index: 333333333;
}
#imgShare{
width: 37vh;
}
#ind1 {
height: 10px !important;
min-height: 35vh !important;
position: fixed;
left: 15px;
top: 32px;
}
#ind2 {
height: 10px !important;
min-height: 35vh !important;
position: fixed;
left: 45px;
top: 32px;
}
#logo {
position: fixed;
top: 0px !important;
width: 12%;
/* height: 79px;
right: 16vh;*/
margin-left: 44%;
margin-right: 50%;
z-index: 6666664;
}
#videos {
position: relative;
z-index: 5;
width:100%;
height: 100%;
}
#video {
z-index: 5;
/* width: 100%; */
text-align: center;
/*margin-top: -3%;
margin-bottom: -3%;*/
}
#myvideotok1 {
height: 86.6vh;
z-index: -99999;
}
#myvideotok2 {
height: 86.6vh;
z-index: -99999;
}
video::-internal-media-controls-download-button {
display:none !important;
}
video::-webkit-media-controls-enclosure {
overflow:hidden !important;
}
#video360 {
z-index: 5;
/* width: 100%; */
text-align: center;
/*margin-top: -15%;*/
/* margin-bottom: -3%; */
}
#myvideo {
height: 80vh;
width: 100%;
}
#iframe-enq iframe {
position: relative;
z-index: 5;
width:100%;
height: 85vh;
}
#sousVideo {
position: absolute;
z-index: 1;
}
.contentpane {
background-color: #1fddff !important ;
}
article {
background-color: none !important ;
}
.wf-mediabox-nav {
background-color: #1fddff !important ;
}
.wf-mediabox-body {
box-shadow: 0 0 30px rgba(11, 203, 213, 0.87) !important ;
}
.wf-mediabox-container {
background-color: #1fddff !important ;
}
/*
#boutonC{
position: fixed;
}
#bCenq2-2{
position: fixed;
}
#bCenq2-3{
position: fixed;
}
@media (max-height : 600px) {
#imgboutonC {
height: 10px !important;
min-height: 35vh !important;
position: fixed;
left: -10px;
width: 56px;
}
*/
#myvideo {
height: 75vh;
}
.resp-container {
width: 100%;
height: 100h;
}
.resp-iframe {
width: 100%;
height: 100vh;
}
#ff_elem191{
height : auto !important ;
background-color: black !important ;
}
#bfLabel191{
width: 100% !important ;
min-width: none !important ;
height : auto !important ;
}
#ff_elem145
{
height : auto !important ;
}
#bfLabel191{
width: 100% !important ;
min-width: none !important ;
height : auto !important ;
}
#ff_elem192{
height : auto !important ;
background-color: #2683f4 !important ;
}
.image-clignote {
animation-duration: .8s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
}
@keyframes clignoter {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }
}
.bouton-clignote {
animation-duration: 2.3s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
}
.fleche-phenix-clignote {
animation-duration: 2.3s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
}
.fleche-youtube-clignote {
animation-duration: 2.3s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
}
.suivant-clignote {
animation-duration: 2.3s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
}
a img
{
border: none !important ;
}
a
{
border: none !important ;
}
button {
background-color: #0f2434 ;
color: #85e2f9 ;
}
button:hover {
background-color: #85e2f9 ;
color: #0f2434 ;
}
#ff_elem btn btn-primary button bfCustomSubmitButton
{
margin-top: 30px !important;
}
#float
{
width: 45vh !important;
}
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
@media (max-width : 700px) {
#myvideo {
height: 75vh;
}
.resp-container {
height: 75vh;
}
.resp-iframe {
height: 80vh;
}
#imgboutonC {
width: 7vh;
top: 4vh;
left: -7vh;
}
#imgboutonAgent {
width: 7vh;
left: -7vh;
}
#imgboutonMess {
width: 7vh;
top: 4vh;
right: -7vh;
}
#imgaide {
width: 7vh;
right: -7vh;
}
}
/*@media (max-width : 1200px) {
#cote1{
width: 8%;
}
#cote2{
width: 8%;
}
}*/
@media (max-height : 600px) {
#imgindice1 {
top: 1%;
}
#imgindice2 {
top: 1%;
}
#imgindice3 {
top: 1%;
}
#imgindice4 {
top: 1%;
}
#top {
height: 5.2vh !important;
}
#centre {
/* bottom: 2.5vh !important;*/
}
#heure {
font-size: 2.3vw !important;
}
#logo {
width: 8% !important;
margin-left: 46% !important;
}
#ecranmodule{
border: solid 1px #85e2f9 !important ;
}
#heure {
bottom: -0.1% !important;
}
}
.bfQuickMode input[type=text], .bfQuickMode textarea, .bfQuickMode select, .bfQuickMode .uneditable-input {
margin-bottom: 5% !important ;
}
img {
-khtml-user-select: none !important ;
-o-user-select: none !important ;
-moz-user-select: none !important ;
-webkit-user-select: none !important ;
user-select: none !important ;
}
@supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
}
@media (-moz-touch-enabled){
//style for FF with touch
.fleche-phenix-clignote {
animation-duration: 2.3s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
margin-left: 45%;
}
}
@supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
}
.tableuser {
border: 1px solid blue;
}
table.tableuser td {
border: 1px solid blue;
}
#esmais:hover {
background-color: #85e2f9;
color: #0f2435;
}
#esclas:hover {
background-color: #85e2f9;
color: #0f2435;
}
@media screen and (min-width: 200px) and (max-width: 940px) {
#mob {
display: block;
}
#nomob {
display: none;
}
}
@media only screen {
#mob {
display: none;
}
#nomob {
display: block;
}
}