@font-face {
	font-family: 'Titilium Web';
	src:
		url('/bundles/EmersyaWebsitePro/fonts/apps/Enko/TitilliumWeb-Bold.ttf');
}
@font-face {
	font-family: 'Iconia Light';
	src:
		url('/bundles/EmersyaWebsitePro/fonts/apps/Enko/IconiaLight.ttf');
}
html,
body {
	margin: 0px;
	height: 100%;
	width: 100%;
	overflow: hidden;
	font-family: Titilium Web;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	moz-user-select: none;
	-ms-user-select: none;
    user-select: none;

	background-color: white;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
iframe {
	width: 100%;
	border: none;
	height:100%;
}

.embeddedIframe {
	position: absolute;
	width: 100%;
	height: calc(100% - 55px);
	right: 0;
	top:0;
}
#blocMenuCustom{
	bottom:5px;
	left:calc(50% - 220px);
	height:50px;
	position:absolute;
	z-index:10;
}
#menuDeroulant{
	display:flex;
	list-style:none;
}
.materialChoice{
	display:inline-block;
	width:28px;
	height:28px;
	margin:0px 5px 3px 5px;
	border:solid 2px black ;
	border-radius: 50%;
	cursor:pointer;
}
.subContainer{
	position:relative;
    top: -92px;
    left: 50%;
    max-width: 300%;
    transform: translate(-50%,0%)  translate(19px,0%);
	display:inline-block;
}
ul{
	margin:0px;
	padding:0px;

}
.MaterialSelected{
	margin-top: 4px;
	left:3px;
	position:relative;
	margin-left:10px;
	width: 28px;
	height:28px;
	border:solid #c8c8c8 2px;
	border-radius: 50%;
	cursor:pointer;
}
.menuOne{
	display:flex;
	align-content: center;
	font-size:1.2em;
}

#menuDeroulant .menuOneTitle .subContainer{
	border-bottom:solid #c8c8c8 2px;
	opacity:0;
	transition : all 0.1s ease-out;
	pointer-events: none;
}
.menuOneTitle{
	width:110px;
}
.menu{
	text-align: center;
	display: block;
}
.containerLiMenuOne{
	width:100%;
	height:100%;
}
#menuDeroulant#menuDeroulant .menuOneTitle.ActiveMenu .subContainer{
	opacity:1;
	margin-top:0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#menuDeroulant .menuOneTitle.ActiveMenu .menuOne .MaterialSelected{
	border-color:#c8c8c8 !important;
}
.barre{
	position:absolute;
	right:calc(50% - 1px);
	height:16px;
	bottom:-20px;
	border:solid #c8c8c8 1px;
}
.sousMenu{
	padding-top : 5px;
	width       : 45px;
	text-align  : right;
	cursor      : pointer;
}
div .half {
	width:100%;
	height:100%;
}
.shoe .voile{
	left:0px;
	width: 108px;
}
.voile{
	height: 30px;
	width: 100%;
	position:absolute;
	top:30px;
	background-color:transparent;
}
#otheraction{
	position: absolute;
    left: 5px;
    top: 5px;
    z-index: 10;
}
#SideMenu li {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
    width: 35px;
    height: 35px;
    background-color: #f3f3f3;
    text-align: center;
}
#SideMenu li img{
	height:18px;
	padding-top:8.5px;
}
#SideMenu li#fullScreen img{
	height:24px;
	padding-top:5.5px;
}
#menuDeroulant#menuDeroulant .menuOneTitle.ActiveMenu .subContainer:before {
    content: "";
    background: white;
    left: 0;
    height: 2px;
    width: 6px;
    bottom: -2px;
    position: absolute;
}
#menuDeroulant#menuDeroulant .menuOneTitle.ActiveMenu .subContainer:after {
    content: "";
    background: white;
    right: 0;
    height: 2px;
    width: 6px;
    position: absolute;
}
#menuDeroulant#menuDeroulant .menuOneTitle.ActiveMenu .subContainer{
	pointer-events: all;
}

#zoomIn{
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	display: none;
}
#zoomOut{
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	display: none;
}
#fullScreen {
	border-radius: 3px;
	margin-top: 5px;
}
@media screen and (max-width: 500px){


	#menuDeroulant#menuDeroulant .menuOneTitle.ActiveMenuMobile{
		pointer-events: all;
		height: 30px;
		border-bottom: 2px solid #e63323
	}

	.embeddedIframe {
	    height: calc(100% - 80px);
	}

	#blocMenuCustom{
		bottom     : 0px;
		height     : 80px;
		left       : 0px;
		width      : 100%;
		overflow-x : auto;
		overflow-y : hidden;
	}

	#menuDeroulant{
		flex-wrap     : wrap;
		border-top    : 1px solid #e9e9e9;
		border-bottom : 1px solid #e9e9e9;
		padding       : 2px 0px;
		box-sizing    : border-box;
		min-width     : 300px;
		height        : 35px;
	}
	.menuOneTitle{
		width        : 25%;
		border-right : 0px;
		border-bottom: 2px solid transparent;
	}
	.containerLiMenuOne {
	    height: unset;
	}

	#menuDeroulant li:nth-child(2) .menuOne,#menuDeroulant li:last-child .menuOne,
	#menuDeroulant li:nth-child(3) .menuOne,#menuDeroulant li:first-child .menuOne{
		justify-content:flex-end;
		padding:0px 5px;
	}
	.sousMenu{
		width         : calc(100% - 19px);
		line-height   : 26px;
		text-align    : center;
		box-sizing    : border-box;
		padding-top   : 0px;
	}
	.menuOne {
	    font-size: 1em;
	}
	.MaterialSelected{
		left:0;
		position:unset;
		width: 15px;
    	height: 15px;
    	margin-left:0px;
	}

	#menuDeroulant#menuDeroulant .menuOneTitle.ActiveMenuMobile .subContainer{
		opacity: 1;
		pointer-events: all;
	}

	#menuDeroulant .menuOneTitle .subContainer{
		left             : 0px !important;
		transform        : translate(0%, 0%) !important;
		position         : fixed;
		bottom           : 0px;
		width            : 100% !important;
		border-bottom    : 0px;
		top              : unset;
		padding          : 4px 0px !important;
		box-sizing       : border-box;
		height           : 40px;
		overflow-x       : auto;
		overflow-y       : hidden;
		pointer-events   : none;
	}


	#menuDeroulant .menuOneTitle.ActiveMenuMobile .subContainer .materialChoice {
		pointer-events: all;
	}
	#menuDeroulant .menuOneTitle .subContainer .materialChoice {
		pointer-events: none;
	}

	.shoe .barre,
	#menuDeroulant li:last-child .barre,
	.laces .barre,
	.spring .barre{
		display: none;
		opacity: 0;
	}
	.voile{
		opacity: 0;
	}
	#menuDeroulant .menuOneTitle .shoe .subContainer{
		left:50% ;
		transform:translate(-50%, 0%);
	}
}