@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@font-face {
    font-family: 'sciflysans';
    src: url('../fonts/scifly-sans-webfont.eot');
    src: url('../fonts/scifly-sans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/scifly-sans-webfont.woff2') format('woff2'),
         url('../fonts/scifly-sans-webfont.woff') format('woff'),
         url('../fonts/scifly-sans-webfont.ttf') format('truetype'),
         url('../fonts/scifly-sans-webfont.svg#sciflysans') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    line-height: inherit;
}
body, body * {
    -khtml-user-select : none !important;
    -webkit-user-select : none !important;
    -moz-user-select : -moz-none !important;
    -ms-user-select : none !important;
    user-select : none !important;
}
.clear {
	clear: both;
	height: 0
}
#main, #footer {
    font-family: 'sciflysans';
}
#main.page {
    margin-top: 8vh;
    padding: 4.5vw;
}
#main {
    animation-duration: 1s;
    animation-name: mainIn;
}
@keyframes mainIn {
	0% {
		opacity:0
	}
	100% {
		opacity:1
	}
}
#main.mainItineraire {
    animation-duration: 2s;
    animation-name: mainInItin;
}
@keyframes mainInItin {
	0% {
		opacity:0
	}
	50% {
		opacity:0
	}
	100% {
		opacity:1
	}
}
#loader {
    width: 80px;
    height: 80px;
    position: fixed;
    top: 45vh;
    left: 50vw;
    opacity:0;
    transform: translateX(-45px);
    animation-duration: 2s;
    animation-name: loaderOut;
}
@keyframes loaderOut {
	0% {
		opacity:1
	}
	50% {
		opacity:1
	}
	100% {
		opacity:0
	}
}
.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #329d77;
    border-color: #329d77 transparent #329d77 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*##### MENU - Début ############################################# */
#menuPrincipal {
    padding: 0;
    box-sizing: border-box;
}
#menuPrincipal .navbar-toggler {
    height: 6vh;
    margin: 1vh;
    padding: 0 2vw;
    background: #f5f5dc38;
}
#menuPrincipal .navbar-brand {
    margin-left: 3vw;
}
#menuPrincipal .navbar-brand img {
    height: 5vh;
    margin-right: 1vh;
    margin-top: -0.7rem;
}
#menuPrincipal ul.btBMul {
    padding: 0;
    margin: 0;
}
#menuPrincipal .btBM {
    height: 5vh;
    padding: 0 0.5vh;
    width: auto;
    list-style-type: none;
    display: inline-block;
    -webkit-appearance: inherit;
    box-shadow: 0px 1px #db4300;
    
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
    background: beige;
}
#menuPrincipal .btBMhover {
    background: #db4300;
    box-shadow: 0px 2px #6f2302;
}
#menuPrincipal ul li.btBM:first-child {
    border-radius: 2vh 0 0 2vh;
}
#menuPrincipal ul li.btBM:last-child {
    border-radius: 0 2vh 2vh 0;
}
#menuPrincipal .btBM img {
    height: 100%
}
#menuPrincipal .navbar-collapse ul.navbar-nav {
    padding: 4vh 8vw 2vh 8vw;
}
#menuPrincipal .navbar-collapse ul.navbar-nav li {
    background: #22272b;
    padding-left: 5vw;
    border-radius: 3px;
    margin-bottom: 3px;
    font-size: 1.2rem;
    font-weight: 300;
}
#menuPrincipal .navbar-collapse ul.navbar-nav li.active {
    background: #f5f5dc8f;
}
#menuPrincipal .navbar-collapse ul.navbar-nav li.active a {
    color: #22272b;
}
#menuPrincipal .navbar-collapse form {
    width: 84vw;
    margin-left: 8vw;
}
#menuPrincipal .navbar-collapse form .form-control {
    width: 55vw;
}
#menuPrincipal .navbar-collapse form .btn {
    width: 27vw;
    margin-left: 2vw;
    font-size: 4.3vw;
}
#menuPrincipal .navbar-collapse ul.navbar-nav li a.nav-link {
    padding: 1rem 1rem;
}
#menuPrincipal .copyright {
    color: white;
    padding: 7px;
    display: block;
    text-align: center;
}
/*##### MENU - Fin ############################################### */

/*##### RANGE BAR - Début ######################################## */
.rangebar {
    position: fixed;
    top: 6vh;
    width: 0;
    right: 20px;
}
.range-max, .range-min {
    font-family: FontAwesome;
    background: rgba(255, 255, 254, 0.64);
    border-radius: 50%;
    width: 3.5vh;
    height: 3.5vh;
    line-height: 3vh;
}
.range-max::after {
    font-size: 15px;
    content: '\f00e';
}
.range-min::after {
    font-size: 15px;
    content: '\f010';
}

.vertical-wrapper {
    height: 33vh;
    width: auto;
    z-index: 9;
}
/*##### RANGE BAR - Fin ########################################## */

/*##### MAP - Début ############################################## */

.zoneMaps {
    position: fixed;
    top: 8vh;
    left: 0;
    width: 100vw;
    height: 44vh;
    font-size: 3.33333vw;
    line-height: 3.33333vw;
}
.zoneMap {
    width: 100vw;
    height: 100%;
    overflow: scroll;
}/**/
.zoneMap > table {
    width: 100%;
    /*height: 100%;*/
}/**/
.zoneRoadbook {
    position: fixed;
    top: 52vh;
    left: 0;
    width: 100vw;
    height: 48vh;
    overflow-y: scroll;
    /*border-top: solid 1vh;*/
}/**/
/*.zoneMap2 {
    display: none;
}*/
.zoomap {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 6vh;
}/**/
.tab {
    z-index: 1;
    position: relative;
    background: #db4300;
    border: solid 0.2vh;
    color: white;
    margin-right: 1px;
    height: 6vh;
    width: 6vh;
    font-size: 5vh;
    line-height: 5.8vh;
    text-align: center;
    box-sizing: border-box;
}
.zoneMap .block {
    display: block;
}

.zoneMap .map input, .zoneMap .map button, .zoneMap .map .wall span {
    display: block;
    font-size: 0px;
    color: transparent;
    border: none;
    background: transparent;
    padding: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.zoneMap input:hover, .zoneMap button:hover, .zoneMap .wall span:hover {
    color: grey;
}
.wallbutton {
    cursor: default;
    -khtml-user-select : none;
    -webkit-user-select : none;
    -moz-user-select : -moz-none;
    -ms-user-select : none;
    user-select : none;
}
.wall input, .accesroad input, .road input {
    color: transparent;
}
.wall input:hover, .accesroad input:hover, .road input:hover {
    color: white;
}
.acces input {
    color: transparent;
}
.acces input:hover {
    color: black;
}
table {
    border-collapse: collapse;
}
table.map {
    /*border:none;*/
    float: left;
    margin-right: 10px
}
table.map td {
    /*padding: 0;*/
    /*border:solid 1px #f9f9f9;*/
    position: relative;
}
table.map td.wall {
    /*border:solid 1px #f9f9f9;*/
}
table.map td.road {
    z-index: -1;
}
table.map td.indoor {
    z-index: -1;
}
.none {
    display: none;
}
.iconstart {
    width: 70%;
    height: 70%;
    margin-top: -31%;
    margin-left: 9%;
    position: absolute;
    display: block;
}
.iconend {
    width: 70%;
    height: 70%;
    margin-top: -31%;
    margin-left: 9%;
    position: absolute;
}
.roadbook td, .roadbook th {
    padding: 3px 6px 0px 6px;
}
.roadbook th {
    color: white;
}
.pieceName {
    position: absolute;
    top: 3px;
    width: 200%;
    z-index: 0;
    /*text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;*/
    text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;
    cursor: default;
    -khtml-user-select : none;
    -webkit-user-select : none;
    -moz-user-select : -moz-none;
    -ms-user-select : none;
    user-select : none;

    /*font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: 700;*/
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: 100;
    font-style: normal;
    font-variant: normal;
    /*line-height: 14px;*/
}
.pieceName.escalier {
    top: 0px;
    left: 0px;
    width: 100%;
}
.pieceName.escalier img {
    width: 100%;
}
.menupiece {
    padding: 0;
}
.menupiece li {
    list-style-type: none;
    display: inline-block;
    margin: 0rem 0.5rem;
    margin-bottom: 4px;
}
.menupiece .btpiece, .reinitstart {
    background: #5cb85c;
    box-shadow: 1px 1px grey;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-size: 1rem;
    color: white;
}
.menupiece .btpiece:hover {
    background: #bef3be;
    color: black;
}
.reinitstart {
    background: grey;
}
.reinitstart:hover {

}
/*img {
    display: none;
}/**/

/* RANGE BAR */
.rangeslider {
    /*width: 50%;*/
}
.myslider {
    -webkit-appearance: none;
    background: #FCF3CF;
    /*width: 50%;
    height: 20px;*/
    opacity: 2;
}
.myslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    background: #34495E;
    width: 5%;
    height: 20px;
}
.myslider:hover {
    opacity: 1;
}
#demo {
    background: orange;
    display: inline-block;
}
/*##### MAP - Fin ################################################ */

/* Mon Service - Début ###############################################*/
nav .navbar-brand {
    font-family: 'Pacifico', cursive;
    line-height: 2rem;
}
h1 {
    text-align: center;
    background: -webkit-linear-gradient(#58a958, #0c9196);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.qrcode {
    max-height: 50vh;
    max-width: 90vw;
}
.tuiles select {
    max-width: 90%;
}
.tuiles50 > div {
    /*width: 44.8vw;
    display: inline-block;
    margin-bottom: 0.3rem;
    background-size: 50%;*/
    width: 49%;
    float: left;
    margin-bottom: 2vw;
    background-size: 50%;
}
.tuiles50 > div:first-child {
    /*margin-right: 2vw;*/
    float: left;
}
.tuiles50 > div:last-child {
    float: right;
}
.tuiles100 > div {
    width: 100%;
    display: inline-block;
    margin-bottom: 0.3rem;
    background-size: 25%;
}
.tuiles50 > div > a,
.tuiles50 > div > div {
    background-size: 50%;
}
.tuiles100 > div > div {
    background-size: 25%;
}
.tuilefonce > div {
    
    background: #58a958;
    background: -moz-linear-gradient(top,  #58a958 0%, #0c9196 100%);
    background: -webkit-linear-gradient(top,  #58a958 0%,#0c9196 100%);
    background: linear-gradient(to bottom,  #58a958 0%,#0c9196 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58a958', endColorstr='#0c9196',GradientType=0 );/**/
}
.tuileclaire > div {
    background: -moz-linear-gradient(top,  rgba(88,169,88,0.4) 0%, rgba(88,169,88,0.2) 49%, rgba(88,169,88,0.4) 100%);
    background: -webkit-linear-gradient(top,  rgba(88,169,88,0.4) 0%,rgba(88,169,88,0.2) 49%,rgba(88,169,88,0.4) 100%);
    background: linear-gradient(to bottom,  rgba(88,169,88,0.4) 0%,rgba(88,169,88,0.2) 49%,rgba(88,169,88,0.4) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6658a958', endColorstr='#6658a958',GradientType=0 );
}
.tuiles > div a, .tuiles > div > div {
    background-position: center 1rem;
    background-repeat: no-repeat;
    
    color: white;
    text-align: center;
    font-size: 1.3rem;
    display: inline-block;
    width: 100%;
    font-weight: normal;
}
.tuiles > div.tuil-1 a {
    background-image:url("../images/itineraire.png");
    padding-top: 7rem;
    padding-bottom: 0.5rem;
}
.tuiles > div.tuil-2 a {
    background-image:url("../images/scan.png");
    padding-top: 7rem;
    padding-bottom: 0.5rem;
}
.tuiles > div a span,
.tuiles > div .withspan span {
    font-weight: bold;
    font-size: 1.6rem;
}
.tuiles > div.tuil-3 {
    padding: 1rem;
}
.tuiles > div h2 {
    background: -webkit-linear-gradient(#58a958, #0c9196);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    text-align: center;
}
.tuiles > div h3 {
    text-align: center;
    font-size: 2.6rem;
    
    background: -webkit-linear-gradient(#58a958, #0c9196);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tuiles > div hp {
    text-align: justify;
}
.tuiles > div.tuil-4 > div {
    background-image:url("../images/start.png");
    padding-top: 7rem;
    padding-bottom: 0.5rem;
}
.tuiles > div.tuil-5 > div {
    background-image:url("../images/end.png");
    padding-top: 7rem;
    padding-bottom: 0.5rem;
}
.btstart {
    background: #f1f1ef;
    padding: 0.8rem 3rem;
    border-radius: 2rem;
    font-size: 1.6rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: solid 0.2rem #309c79;
    color: #339d76;
}
.roadbook {
    width: 100%;
    background: #58a958;
    background: -moz-linear-gradient(top,  #58a958 0%, #0c9196 100%);
    background: -webkit-linear-gradient(top,  #58a958 0%,#0c9196 100%);
    background: linear-gradient(to bottom,  #58a958 0%,#0c9196 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58a958', endColorstr='#0c9196',GradientType=0 );/**/
}
.roadbook td {
    background: #ffffff;
    
}
.checkboxZoom {
    transform: scale(2.5);
}
.cubedisable {
	background-image: url(../images/icon-produit-delete.svg);
    background-color: #b36565;
    background-size: 62%;
    background-position: center;
    background-repeat: no-repeat;
}
/*.cubedisable::after {
    content: "+";
    color: white;
    position: absolute;
    top: 0.2rem;
    left: -0.15rem;
    font-size: 2.5rem;
    transform: rotate(45deg);
}*/
.nowayout {
    position: absolute;
    background: rgb(255, 255, 255);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.nowayout .msgnowayout {
    position: absolute;
    top: 50vh;
    font-size: 2rem;
    text-align: center;
    width: 100%;
}
/* Mon Service - Fin #################################################*/

/*##### Boutons - Début ########################################## */
.changeStage {
    width: 5vh;
    position: fixed;
    top: 10vh;
}
/*##### Boutons - Fin ############################################ */

@media (max-width: 1025px) {
    

}

@media (max-width: 1350px) {
    
    
}
@media (max-width: 915px) {
    body {
        margin:0;
    }
    table.map {
        min-width: 100vw;
        min-height: 100vw;
    }
    .iconstart {
        width: 70%;
        height: 70%;
        margin-top: -31%;
        margin-left: 9%;
        position: absolute;
        display: block;
    }
    .iconend {
        width: 70%;
        height: 70%;
        margin-top: -31%;
        margin-left: 9%;
        position: absolute;
    }
    .center {
        text-align: center;
    }
    .centerTable {
        margin-left: auto;
        margin-right: auto;
    }

}

@media print {
   
}