body{
	margin: auto;
    overflow: hidden;
	height: 100%;
}

.logo-droite {
    position: fixed;
    z-index: 4;
    right: 15px;
    top: 15px;
}

.logo-gauche {
    position: fixed;
    z-index: 4;
    left: 15px;
    top: 15px;
}

.logo-gauche img {
    width: clamp(75px, calc(39.3px + 11.16vw), 200px);
    height: auto;
}

.logo-droite img {
    width: clamp(75px, calc(39.3px + 11.16vw), 200px);
    height: auto;
}

.maquette{
    position: fixed;
    overflow: hidden;
    display: block;
    height: 100%;
    width: 100%;
    background-color: white;
}

.div-show-Maq{
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 100px;
    height: 100px;
    max-width: 100%;
    background: url(../images/thumb.jpg) no-repeat;
    border: 4px solid;
    border-color: rgb(255,255,255);
    border-radius: 100px;
    cursor: pointer;
    -webkit-transition-duration: 0.3s;
    	-moz-transition-duration: 0.3s;
    		-o-transition-duration: 0.3s;
    			transition-duration: 0.3s;
}

.div-show-Maq:hover{
    -webkit-transition-duration: 0.3s;
    	-moz-transition-duration: 0.3s;
    		-o-transition-duration: 0.3s;
    			transition-duration: 0.3s;
    transform: scale(0.75);
    border-color: #90d3cf;
}

.div-show-Maq-activ{
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 100px;
    height: 100px;
    opacity: 0.5;
    max-width: 100%;
    background: url(../images/thumb.jpg) no-repeat;
    opacity: 0.5;
    cursor: pointer;
    border: 4px solid;
    border-color: rgb(128,128,128);
    border-radius: 100px;
    transform: scale(0.75);
}

.div-show-Maq-activ:hover{
    -webkit-transition-duration: 0.3s;
    	-moz-transition-duration: 0.3s;
    		-o-transition-duration: 0.3s;
    			transition-duration: 0.3s;
    opacity: 1.0;
    border-color: rgb(255,255,255);
}

.text-show{
    white-space: nowrap;
    background-color: #90d3cf;
    border-radius: 40px;
    padding: 5px;
    position: absolute;
    top: -25%;
    left: 50%;
    color: rgb(255,255,255);
    transform: translate(-50%,-50%);
    -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   		-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  		  -webkit-user-select: none; /* Chrome, Safari, and Opera */
			-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

svg{
    position: absolute !important;
	-moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   		-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  		  -webkit-user-select: none; /* Chrome, Safari, and Opera */
			-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

p{
    margin-top: auto;
    font-family:  Helvetica Neue, Helvetica, Arial, sans-serif;
}

.navigate {
    display: none;
    top: 60vh;
    left: 2vw;
    position: absolute;
    z-index: 5;
}

a {
	text-decoration: none;
    color:black;
}

.menu-mob{
    display: none;
}

.menu-pc{
    list-style-type: none;
	padding: 0px;
}

.menu-pc li{
    background: rgba(0,0,0,0.4);
    border-radius: 4px 4px 4px 4px;
    margin-top: 2px;
}

.menu-pc a{
    display: block;
    color: white;
    text-align: center;
    padding: 1vh 1vw;
    text-decoration: none;
	font-family:  Helvetica Neue, Helvetica, Arial, sans-serif;
	-moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   		-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  		  -webkit-user-select: none; /* Chrome, Safari, and Opera */
			-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

/* Change the link color to #111 (black) on hover */
.menu-pc a:hover {
    background-color: #A8BED5;
	cursor: pointer;
	border-radius: 4px 4px 4px 4px;
}

.type {
    z-index: 4;
    color: white;
    list-style-type: none;
    font-family:  Helvetica Neue, Helvetica, Arial, sans-serif;
    padding-left: 2px;
        -webkit-margin-before: 0em;
        -webkit-margin-after: 0em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        -webkit-padding-start: 2px;
}

.type li{
    display: inline-block;
}

.type a {
    display: block;
    padding: 1vh;
    color: white;
    text-align: center;
    -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   		-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  		  -webkit-user-select: none; /* Chrome, Safari, and Opera */
			-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

.T1 {
    background-color: #90d3cf;
    border-radius: 4px 4px 4px 4px;
}

.T2 {
    background-color: #2f4657;
    border-radius: 4px 4px 4px 4px;
}

.T3 {
    background-color: #008493;
    border-radius: 4px 4px 4px 4px;
}

.T4 {
    background-color: #999d3e;
    border-radius: 4px 4px 4px 4px;
}

.T1 a:hover{
    background-color: #A8BED5;
	cursor: pointer;
    border-radius: 4px 4px 4px 4px;
}

.T2 a:hover{
    background-color: #A8BED5;
	cursor: pointer;
    border-radius: 4px 4px 4px 4px;
}

.T3 a:hover{
    background-color: #A8BED5;
	cursor: pointer;
    border-radius: 4px 4px 4px 4px;
}

.T4 a:hover{
    background-color: #A8BED5;
	cursor: pointer;
    border-radius: 4px 4px 4px 4px;
}

#img-viewer{
    z-index: 0;
    height: auto !important;
	max-height: 1080px !important;
	width: 1920px;
	max-width: 100%;
}

#copyright{
    position: absolute;
    top: 95%;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 15px;
}

.active {
    background-color: #777;
}

.center{
	position: absolute;
	max-width: 100%;
	height: auto;
	display: block;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.ie7 .div-viewer{
	z-index: 1;
	background-size: 100% 100%;
	height: auto !important;
	max-height: 1080px !important;
	width: 1920px;
	max-width: 100%;
	-webkit-transition-duration: 1s;
    	-moz-transition-duration: 1s;
    		-o-transition-duration: 1s;
    			transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    	-moz-transition-property: -moz-transform;
    		-o-transition-property: -o-transform;
    			transition-property: transform;
}

.div-viewer{
	z-index: 1;
	background-size: 100% 100%;
	height: auto !important;
	max-height: 1080px !important;
	width: 1920px;
	max-width: 100%;
	-webkit-transition-duration: 1s;
    	-moz-transition-duration: 1s;
    		-o-transition-duration: 1s;
    			transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    	-moz-transition-property: -moz-transform;
    		-o-transition-property: -o-transform;
    			transition-property: transform;
}

.media-poz{
	position: relative;
    z-index: 5;
	float: right;
	visibility: hidden;
	margin: 10px;
	top: 50vh;
	transform: translate(110%,-50%);
	-webkit-transition-duration: 1s;
    	-moz-transition-duration: 1s;
    		-o-transition-duration: 1s;
    			transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    	-moz-transition-property: -moz-transform;
    		-o-transition-property: -o-transform;
    			transition-property: transform;
	
}

.div-hs-img{
	text-align: center;
	padding: 10px;
	color: white;
	background-color: rgba(0,0,0,0.4);
	border-radius: 8px 8px 8px 8px;
}

.div-hs-img:hover{
	cursor: pointer;
}

.path-img {
	width: 70vw;
    max-width: 100%;
	height: auto;
}

.loading{
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: black;
	position: fixed;
	font-family:  Helvetica Neue, Helvetica, Arial, sans-serif;
}

.progress{
    position: absolute;
    width: 0vw;
    padding: 2px;
    background-color: rgba(0,0,0,0.4);
    top: 52vh;
	left: 25vw;
}

.endP{
    position: absolute;
    width: 0px;
    padding: 2px;
    background-color: rgba(0,0,0,0.4);
    top: 52vh;
    left: 75vw;
    transform: translate(50%,0%);
}

.hs-T1{
    fill: #90d3cf;
    stroke: #aaa;
    stroke-width: 2;
    stroke-linejoin: round;
    cursor: pointer;
    opacity : 0.5;
    -webkit-transition-duration: 0.5s;
    	-moz-transition-duration: 0.5s;
    		-o-transition-duration: 0.5s;
    			transition-duration: 0.5s;
}

.hs-T2{
    fill: #2f4657;
    stroke: #aaa;
    stroke-width: 2;
    stroke-linejoin: round;
    cursor: pointer;
    opacity : 0.5;
    -webkit-transition-duration: 0.5s;
    	-moz-transition-duration: 0.5s;
    		-o-transition-duration: 0.5s;
    			transition-duration: 0.5s;
}

.hs-T3{
    fill: #008493;
    stroke: #aaa;
    stroke-width: 2;
    stroke-linejoin: round;
    cursor: pointer;
    opacity : 0.5;
    -webkit-transition-duration: 0.5s;
    	-moz-transition-duration: 0.5s;
    		-o-transition-duration: 0.5s;
    			transition-duration: 0.5s;
}

.hs-T4{
    fill: #999d3e;
    stroke: #aaa;
    stroke-width: 2;
    stroke-linejoin: round;
    cursor: pointer;
    opacity : 0.5;
    -webkit-transition-duration: 0.5s;
    	-moz-transition-duration: 0.5s;
    		-o-transition-duration: 0.5s;
    			transition-duration: 0.5s;
}

.hide-hT1{
    display: none
}

.hide-hT2{
    display: none
}

.hide-hT3{
    display: none
}

.hide-hT4{
    display: none
}

path:hover{
    fill: #A8BED5;
    -webkit-transition-duration: 0.5s;
    	-moz-transition-duration: 0.5s;
    		-o-transition-duration: 0.5s;
    			transition-duration: 0.5s;
    
}

@media screen and (max-width: 1830px){
    
    .navigate{
        top: 0vh;
    }
    
    .menu-pc a{
        padding: 0vh 0vw;
    }
    
	.media-poz{
        position: relative;
		max-width: 100%;
        float: none;
        margin: auto;
		transform: translate(0%,-50%);
	}
    
	.div-hs-img{
		background-color: rgba(0,0,0,0.4);
		color: white;
	}
    
    .path-img {
        width: 135vh;
        height: auto !important;
    }
    
    .type{
        position: relative;
        top:10px;
    }
    
    li {
        display: block;
        padding: 3px 0vw;
    }
    
    li a{
        color: white;
        text-align: center;
        text-decoration: none;
        font-family:  Helvetica Neue, Helvetica, Arial, sans-serif;
    }
    
    .menu-mob li:hover {
        background-color: #A8BED5;
        cursor: pointer;
        border-radius: 4px 4px 4px 4px;
    }
}

@media screen and (max-height: 1000px){
    
    .navigate{
        position: relative;
        top: 0vh;
        width: 100px;
    }
    
    .menu-pc a{
        padding: 0vh 0vw;
        margin-top: 2px;
    }
    
	.media-poz{
        position: fixed;
        width: 100%;
        height: 100%;
		max-width: 100%;
        float: none;
        margin: auto;
		transform: translate(0%,-50%);
	}
    
	.div-hs-img{
		background-color: rgba(0,0,0,0.4);
		color: white;
	}
    
    .path-img {
        width: 135vh;
        height: auto !important;
    }
    
    .type{
        position: relative;
        top:1px;
    }
    
    li {
        display: block;
        padding: 3px 0vw;
    }
    
    li a{
        color: white;
        text-align: center;
        text-decoration: none;
        font-family:  Helvetica Neue, Helvetica, Arial, sans-serif;
    }
    
    .menu-mob li:hover {
        background-color: #A8BED5;
        cursor: pointer;
        border-radius: 4px 4px 4px 4px;
    }
    
    .div-show-Maq{
        width: 50px;
        height: 50px;
    }
    
    .div-show-Maq-activ{
        width: 50px;
        height: 50px;
    }
}