/*formulaires*/
#requestAccount .job div,
#requestAccount .name div{
	display: inline-block;
	width: 46%;
	margin-bottom:0;
}

#requestAccount .job div:first-child,
#requestAccount .name div:first-child{
    text-align: right;
    margin-right: 2%;
}
#requestAccount .job div:last-child,
#requestAccount .name div:last-child{
    text-align: left;
}

#routemap{
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	counter-reset: section;
	margin:30px auto;
    padding: 0;
}

#routemap li{
	counter-increment: section; 
	position: relative;
	display: inline-block;
	list-style: none;
	color: #c1c1c1;
	font-size: 1.4rem;
    width: 14%;
  	-webkit-box-flex: 1;
  	    -ms-flex: auto;
  	        flex: auto;
}
#routemap li::before{
	content: counter(section);
	display: block;
	height: 18px;
	width: 18px;
	padding: 8px;
	background: #fafafa;
	margin: auto;
	border: 3px solid #c1c1c1;
	color: #c1c1c1;
	border-radius: 50%;
	margin-bottom: 5px;
}
#routemap li.prevSteps{
	cursor: pointer;
}
#routemap li.prevSteps:nth-of-type(n)::before{
	content: "";
	background-color: #004b93;
	background-image : url(/images/checkRoute.png);
	background-repeat: no-repeat;
	background-position: center;
	color: #fff;
	border: 3px solid #004b93;
}
#routemap li:nth-of-type(2)::before,
#routemap li:nth-of-type(6)::before{
	background: #f1f1f1;
}
#routemap li:nth-of-type(1)::before,
#routemap li:nth-of-type(7)::before{
	background: #e3e3e3;
}

#routemap li:last-child::after{
	display: none;
}
#routemap li::after{
	position: absolute;
    content: "";
    height: 1px;
    width: 90%;
    top: 20px;
    background: #c1c1c1;
    left: 56%;
	z-index: -1;
}
#routemap li.prevSteps,
#routemap li.active{
	color: #004b93;
}
#routemap li.active::before{
	color: #fff;
	border: 3px solid #004b93;
	background: #004b93;
}
#routemap li.prevSteps::after{
	background: #004b93;
}


.nextStep,.printViewBtn{
	padding: 25px 30px;
	background: #004b93;
	color:#fff;
	border-radius: 5px;
	text-transform: uppercase;
	font-size: 1.25rem;
	font-weight: bold;
    display: inline-block;
    margin-left: 20px;
	cursor: pointer;
}

#gamutForm{
	top: 25%;
	-webkit-transform: translateY(-25%);
	        transform: translateY(-25%);
}

/* Choix de gamme */
.gamut #gamutChoice{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    z-index: 5;
}
#gamutChoice{
	display: none;
	padding: 0;
}

#gamutChoice li{
  	-webkit-box-flex: 1;
  	    -ms-flex: auto;
  	        flex: auto;
  	list-style: none;
  	text-align: center;
}

#gamutChoice li#City span{
	background-image: url(/images/cityIveco.png); 
	background-position: 50% 30%;
	background-repeat: no-repeat;
}
#gamutChoice li#Intercity span{
	background-image: url(/images/intercityIveco.png); 
	background-position: 50% 30%;
	background-repeat: no-repeat;
}
#gamutChoice li#Coach span{
	background-image: url(/images/coachIveco.png); 
	background-position: 50% 30%;
	background-repeat: no-repeat;
}

#gamutChoice li#City span:hover{
	background-image: url(/images/cityIvecoHover.png); 
}

#gamutChoice li#Intercity span:hover{
	background-image: url(/images/intercityIvecoHover.png);
}

#gamutChoice li#Coach span:hover{
	background-image: url(/images/coachIvecoHover.png); 
}


#gamutChoice li span{
	display: block;
  	border : 1px solid #004b93;
  	height:100px;
  	width: 240px;
  	padding: 140px 0 0 0;
  	border-radius: 50%;
  	margin:0 auto;
  	color: #004b93;
  	text-transform: uppercase;
  	font-size: 2.8rem;
  	font-weight: 700;
  	cursor: pointer;
  	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#gamutChoice li span:hover{
  	background-color: #004b93;
  	color: #fff;
}

#configurator {
	height: 100%;
}
#configurator form{
/*#viewConfig{*/
	position: relative;
	height: 87%;
	display: block;
    text-align: right;
	overflow: hidden;
}
#viewConfig{
	height: 100%;
}

/* Choix de l'énergie */
.energy #energyChoice{
	display: block;
    text-align: center;
}

#energyChoice{
	display: none;
	padding: 0;
    margin: 42px 0 22px 0;
    z-index: 5;
}

#energyChoice li{
	display: inline-block;
	list-style: none;
	width: 24%;
	height: 185px;
	cursor: pointer;
	/*padding: 20px 0;*/
}

#energyChoice li img{
	display: block;
    margin: 0 auto 20px auto;
}

#energyChoice li .energyName{
	display: block;
	font-weight: 600;
	text-transform: uppercase;
	padding: 19px 0;
    font-size: 2rem;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    color: #486370;
}
#energyChoice li:nth-of-type(2) .energyName{
	color:#00529c;
}
#energyChoice li:nth-of-type(3) .energyName{
	color:#00b9f2;
}
#energyChoice li.active img{
	 background: #ebeaeb;
    border-radius: 50%;
}

.descEnergy,
.descModel{
	display: none;
    border-top: 1px solid #ebeaeb;
    padding-top: 20px;
    text-align: center;
}

#modelChoice .model.active .modelTitle,
#energyChoice li.active .energyName{
    border-top: 1px solid #ebeaeb;
    border-left: 1px solid #ebeaeb;
    border-right: 1px solid #ebeaeb;
    border-bottom: 1px solid #f0f0f0;
}


/* Choix de bus */
.model #modelChoice{
	display: block;
    text-align: center;
    margin: 0 auto;
    position: relative;
}

#modelChoice{
	display: none;
	padding: 0;
	width: 90%;
    z-index: 5;
}

#modelChoice .slick-list{
	overflow: hidden;
	margin: 0 auto;
}

#modelChoice .modelTitle{
	display: block;
	font-weight: 600;
	text-transform: uppercase;
	padding: 18px;
    font-size: 2rem;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    /*margin: 22px 0 0 0;*/
}


#modelChoice .model {
	display: inline-block;
	list-style: none;
    width: 24%;
    /*margin: 0 3%;*/
	/* height: 209px; */
	padding: 22px 0;
	cursor: pointer;
	vertical-align: top;
}

#modelChoice .model.slick-slide{
    float: left;
}

#modelChoice img{
	display: block;
    margin: 0 0 19px 0;
}

#modelChoice span{
	display: block;
	text-transform: uppercase;
}

#modelChoice .shortName{
	font-weight: 600;
	font-size: 2rem;
}

#modelChoice .model.active{
	background: url(/images/bulleFondBus.png) top right no-repeat;
}


/* choix extérieur */
.outside #viewOut{
	display: block;
}

#viewOut, #seatView, #viewIn, #viewMailForm{
	display: none;
	position: relative;
	text-align: center;
	height: 100%;
}
#viewMenuRecap{
	display: none;
}
#viewMenuRecapSee{
	display: none;
    position: absolute;
    width: 100%;
	text-align: center;
    height: 70%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    padding: 15% 0%;
}
#viewMenuRecapSee  .RecapBtn{
	padding: 25px 30px;
    background: #004b93;
    color: #fff;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: bold;
    width: 300px;
    margin: 20px auto;
    cursor: pointer;
}

#viewMenuRecapSee  .errorMailMsg{
	padding: 25px 30px;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: bold;
    margin: 20px auto;
}

#viewMenuRecapSee div span{
	display: inline-block;
	margin: 20px;
}

#viewMenuRecapSee p#returnBtn{
    background: transparent;
    border: 1px solid #004b93;
    cursor: pointer;
}

#modelViewWithA, #modelViewWithCR, .seatProp{
	display: none;
}

.interfaceLeft{
	display: inline-block;
	position: absolute;
	left: 0;
    z-index: 1;
}


.interfaceLeft ul{
	display: inline-block;
	padding:5px;
	margin: 0;
}
.interfaceLeft .conf{
    text-align: left;
}

#seatView .interfaceLeft .prop{
    width: 140px;
    padding: 5px 0;
    clear: both;
}

.interfaceLeft .conf ul,
.interfaceLeft .label{
    text-align: center;
    width: 90px;
}

#seatView .interfaceLeft .conf ul{
	width: 150px;
}

#seatView .interfaceLeft .conf ul li{
    display: inline-block;
    height: 65px;
    width: 65px;
    float: left;
    background-size: contain;
}

.interfaceLeft li{
	position: relative;
	display: block;
	list-style: none;
	margin: 5px;
	background: url(../images/pictos/bouton_sur_fond.png) center center no-repeat;
	height: 89px;
    width: 89px;
    margin: 5px 0;
}

.interfaceLeft li svg{
    max-height: 45%;
    max-width: 45%;
    top: 50%;
    position: relative;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
	pointer-events: none;
}
.interfaceLeft ul.custom li.active svg{
	background: url(../images/close.png) center center no-repeat;
}

.interfaceLeft li svg g{
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.interfaceLeft ul.custom li.active svg g{
	opacity: 0;
}

.interfaceLeft li img{
	padding: 26.5px;
}

.interfaceLeft .label{
	color: #004b93;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 10px 0 0 0;
}

.interfaceLeft li span{
	display: none;
    padding: 5px;
    background: #004b93;
    border-radius: 5px;
    color: #fff;
    font-size: 1.2rem;
    position: absolute;
  	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
    min-width: 70px;
}

.interfaceLeft li span::after{
	content:"";
	height: 10px;
	width: 10px;
    background: #004b93;
    -webkit-transform: translateY(38%) rotate(45deg) ;
            transform: translateY(38%) rotate(45deg) ;
    bottom: 43%;
    left: -5px;
    position: absolute;
}

.interfaceLeft li:hover span{
	display: block;
    top: 50%;
    left: 100%;
    width: auto;
    z-index: 10;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

#seatView .interfaceLeft li:hover span,
.interfaceLeft .prop li:hover span{
    top: -10px;
    left: 0;
}
#seatView .interfaceLeft li span::after,
.interfaceLeft .prop li span::after{
    bottom: 0;
    left: 25%;
}

.busSelected,
.seatSelected{
	display: block;
    text-align: left;
    text-transform: uppercase;
    margin: 0;	
}

.busSelected .nameBus,
.seatSelected .nameSeat{
    font-weight: 600;
    max-width: 100%;
    font-size: 2rem;
    margin: 0;
}

.busSelected .energyBus{
	margin: 5px 0;
}

.interfaceLeft .preference li,
.interfaceLeft .prop li{
	height: 60px;
    width: 60px;
    background-size: cover;
    margin: 0 auto;
    clear: both;
}

.interfaceLeft .prop li{
	float: left;
	clear: initial;
    margin: 3px;
}

.interfaceLeft .preference li.active::after,
.interfaceLeft .prop li.active::after{
	content: "";
	position: absolute;
	display: block;
	height: 18px;
	width: 18px;
	background: url(../images/check.png) center center no-repeat;
    top: 40%;
    right: 0;
    z-index: 45;
}

.lowInterface{
	background:rgba(0,0,0,0.8);
	border-radius: 10px 10px 0 0;
	display: inline-block;
	position: absolute;
	width: 70%;
	left: 50%;
	bottom: 0;
	margin: 0;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
}

.lowInterface ul{
	padding:10px 15px;
	margin: 0;
}

.lowInterface li{
	position: relative;
	display: inline-block;
	list-style: none;
	margin: 5px;
	cursor: pointer;
}

.lowInterface li.active{
	cursor: default;
}

.lowInterface .fullScreen svg:nth-of-type(2){
	display: none;
}

.lowInterface .fullScreen.active svg:nth-of-type(1){
	display: none;
}
.lowInterface .fullScreen.active svg:nth-of-type(2){
	display: inline;
}

.lowInterface li span{
	display: none;
    padding: 5px;
    background: #004b93;
    border-radius: 5px;
    color: #fff;
    font-size: 1.2rem;
    position: absolute;
  	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
    min-width: 70px;
}

.lowInterface li span::after{
	content:"";
	height: 10px;
	width: 10px;
    background: #004b93;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    bottom: -5px;
    left: 43%;
    position: absolute;
}

.lowInterface li:not(.busString):hover span{
	display: block;
    top: -40px;
    left: -50%;
}

.lowInterface li.busString li:hover span{
	display: block;
    top: -40px;
    left: 0%;
}

.lowInterface li svg{
    height: 40px;
    width: 37px;;
	pointer-events: none;
}

.lowInterface li:hover svg polygon,
.lowInterface li:hover svg path,
.lowInterface li:hover svg rect,
.lowInterface li.active svg polygon,
.lowInterface li.active svg path,
.lowInterface li.active svg rect{
	fill: #004b93;
}



.front13 path:first-child,
.back13 path:first-child{
	-webkit-transform: translateX(10px);
	        transform: translateX(10px);
}
.front13 path:last-child,
.back13 path:last-child{
	display: none;
}

.front33 path:last-child,
.back33 path:last-child{
	-webkit-transform: translateX(-10px);
	        transform: translateX(-10px);
}
.front33 path:first-child,
.back33 path:first-child{
	display: none;
}

.rightside svg,
.left svg{
	-webkit-transform:scale(-1,1);
	        transform:scale(-1,1);
}

.previewModel{
	display: block;
    position: relative;
    clear: both;
    height: calc(100% - 50px);
    margin: 0;
    top: 50px;
    overflow: hidden;
}
.previewModel.nigthBg img#modelView{
	background: #000;
}

#configurator .previewSeat.zoom img{
	width: 100%;
	height: auto;
    max-height: none;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%)
}
#configurator .previewModel.zoom img{
    max-height: none;
	height: auto;
	width: 100%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%)
}

.previewModel img{
    height: auto;
}

#paletteChoice,
#biToneChoice,
#fabricChoice{
    display: none;
    position: absolute;
    top: 25%;
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
    width: 140px;
    height: 370px;
	background: #ededed;
    border-radius: 7px;
    border: 1px solid #fff;
    overflow: hidden;
    z-index: 6;
}

#paletteChoice .paletteBtn,
#biToneChoice .biToneBtn{
	height: 35px;
    width: 48%;
    display: inline-block;
    margin: 0 1%;
    cursor: pointer;
}


.price{
    border-bottom: 1px solid #fff;
    height: 30px;
    padding: 0;
    margin: 0;
}
.price li{
    display: inline-block;
    height: 30px;
    width: 31%;
    border-right: 1px solid #fff;
    cursor: pointer;
}

.price svg{
	height: 10px;
    top: 3px;
    position: relative;
}

.price .active svg polygon{
	fill: #fff;
}

.price .active{
    background: rgb(0,77,151);
	background: -webkit-linear-gradient(left, rgba(0,77,151,1) 0%, rgba(5,101,193,1) 100%);
	background: linear-gradient(90deg, rgba(0,77,151,1) 0%, rgba(5,101,193,1) 100%);
}

.price2, .price3, .price4{
	display: none;
}


#paletteChoice .colorPreview,
#fabricChoice .fabricPreview,
#groundChoice .groundPreview,
#panelChoice .panelPreview,
#handrailChoice .handrailPreview,
#biToneChoice .biTonePreview,
#pipingChoice .pipingPreview,
#antimacassarChoice .antimacassarPreview,
#lateralArea .lateralAreaPreview,
.curtainChoice .curtainPreview{
    margin: 5px;
    padding: 0;
    text-align: left;
    background-size: cover;
}

   
#groundChoice .groundPreview,
#panelChoice .panelPreview,
#handrailChoice .handrailPreview,
#pipingChoice .pipingPreview,
#antimacassarChoice .antimacassarPreview,
#lateralAreaChoice .lateralAreaPreview,
.curtainChoice .curtainPreview{
	margin: 5px 0;
}

#paletteChoice .colorPreview .zoneColor,
#fabricChoice .fabricPreview .zoneFabric,
#groundChoice .groundPreview .zoneGround,
#panelChoice .panelPreview .zonePanel,
#handrailChoice .handrailPreview .zoneHandrail,
#biToneChoice .biTonePreview .zoneBiTone,
#pipingChoice .pipingPreview .zonePiping,
#antimacassarChoice .antimacassarPreview .zoneAntimacassar,
#lateralAreaChoice .lateralAreaPreview .zoneLateralArea,
.curtainChoice .curtainPreview .zoneCurtain{
    height: 40px;
    text-align: left;
    margin: 0 0 5px 0;
}

#paletteChoice .colorPreview .nameColor,
#fabricChoice .fabricPreview .nameFabric,
#groundChoice .groundPreview .nameGround,
#panelChoice .panelPreview .namePanel,
#handrailChoice .handrailPreview .nameHandrail,
#biToneChoice .biTonePreview .nameBiTone,
#pipingChoice .pipingPreview .namePiping,
#antimacassarChoice .antimacassarPreview .nameAntimacassar,
#lateralAreaChoice .lateralAreaPreview .nameLateralArea,
.curtainChoice .curtainPreview .nameCurtain{
    margin: 5px;
    font-size: 1rem;
}

#paletteChoice .price li:last-child,
#fabricChoice .price li:last-child,
#groundChoice .price li:last-child,
#panelChoice .price li:last-child,
#handrailChoice .price li:last-child,
#biToneChoice .price li:last-child,
.curtainChoice .price li:last-child{
	border:none;
}

.selectColor,
.selectBiTone,
.selectFabric{
	padding: 5px;
    text-align: left;
    height: 250px;
    overflow-y: scroll;
	scrollbar-color: #000 rgba(0,0,0,.15);
	scrollbar-width: thin;
}

.previewSeat{
	width: 70%;
    margin: 0 auto;
    height: 100%;
}

.previewSeat div{
    height: 100%;
    overflow: hidden;
}
.previewSeat div,
.previewSeat div img{
	width: 100%;
}
.previewSeat .divSeatView{
	position: relative;
	display: inline-block;
    height: 100%;
}

.previewSeat .divSeatView img{
	position: absolute;
    left: 50%;
    top: -25%;
    max-height: 150%;
    width: auto;
    transform: translateX(-50%);
}

.previewSeat .slick-arrow.slick-next{
	right: 100px;
}

.previewSeat .slick-arrow.slick-prev {
    left: 100px;
}
.previewSeat .slick-arrow.limitSlide{
	opacity: 0.5;
	cursor: default;
}

.previewSeat .slick-dots {  
	position: absolute;
    top: 0;
    margin: 0;
    width: 100%;
}
.previewSeat .slick-dots li{
	display: inline-block;
    width: 10%;
    margin: 0 5px;
}  
.previewSeat .slick-dots li button{
	text-indent: -9999px;
    height: 8px;
    padding: 0;
    width: 100%;
}
.previewSeat .slick-dots li button:hover{
    background: #004b93;
}
.previewSeat .slick-dots li:not(.slick-active) button{
    opacity: 0.5;
    cursor: pointer;
}
.previewSeat .slick-dots li:not(.slick-active) button:hover{
    opacity: 1;
}

#fabricColor{
	cursor: pointer;
}
#fabricColor span{
	height: 15px;
    width: 80%;
    background: #fff;
    display: inline-block;
}

#fabricColor svg{
    width: 12%;
    height: 14px;
    margin-right: 8%
}

.colorFabric{
	display: none;
	margin: 0 auto;
}

.colorFabric li{
	display: inline-block;
    height: 30px;
    width: 30px;
    text-indent: -9999px;
    border-radius: 50%;
    margin: 6.5px;
}

.colorFabric li#noColor{
	display:block;
	margin: 5px auto;
    height: 30px;
    width: 30px;
	background: url(/images/pictos/sans.svg) center center no-repeat;
}
.colorFabric li#Red{background: red;}
.colorFabric li#Blue{background: blue;}
.colorFabric li#Yellow{background: yellow;}
.colorFabric li#Green{background: green;}
.colorFabric li#Grey{background: grey;}
.colorFabric li#Black{background: black;}

/* scrollbar styling non-standard version */
.selectColor::-webkit-scrollbar {
  width: 0.5rem;
  background-color: rgba(0,0,0,.15); 
}
.selectColor::-webkit-scrollbar-thumb {
    background: #969696; 
}

#P01{background:#fffdf1;}
#P02{background:#fbffff;}
#P03{background:#f9fdfe;}
#P04{background:#ffffff;}
#P05{background:#d0c5ab;}
#P06{background:#c6bc96;}
#P07{background:#dcc952;}
#P08{background:#deab49;}
#P09{background:#b44a4a;}
#P10{background:#2a4076;}
#P11{background:#5794b7;}
#P12{background:#639fcb;}
#P13{background:#5880ab;}
#P14{background:#7bc563;}
#P15{background:#589f68;}
#P16{background:#a7a8aa;}
#P17{background:#c6cacd;}
#P18{background:#c5c6c8;}
#P19{background:#aaadb2;}
#P20{background:#42537e;}
#P21{background:#63313a;}
#P22{background:#225864;}
#P23{background:#25201d;}
#P24{background:#546b7d;}
#P25{background:#1e1f19;}
#P26{background:#9c7f5f;}

#decorChoice {
    display: none;
    position: absolute;
    top: 25%;
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
    width: 140px;
    height: auto;
	background: #ededed;
    border-radius: 7px;
    border: 1px solid #fff;
    padding: 10px;
    text-align: left;
    z-index: 5;
}

#decorChoice .selectDecor{
	margin: 0;
}

#decorChoice .selectDecor .decorBtn{
	height: 35px;
    width: 47%;
    display: inline-block;
    margin: 10px 1%;
    text-align: center;
    cursor: pointer;
}

#decorChoice svg{
	height: 100%;
}

#decorChoice .active svg rect,
#decorChoice .active svg polygon,
#decorChoice .active svg path{
	fill: #004b93;
}

.bottomBtn{
	display: none;
}

.viewModelConfig .bottomBtn {
	position: absolute;
	bottom: 100px;
	right: 0;
    cursor: pointer;
    display: block;
}

#groundChoice,
#panelChoice,
#handrailChoice,
#pipingChoice,
#antimacassarChoice,
#lateralAreaChoice,
.curtainChoice {
    display: none;
    position: absolute;
    z-index: 5;
    top: 25%;
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
    width: 140px;
    height: auto;
	background: #ededed;
    border-radius: 7px;
    border: 1px solid #fff;
    padding: 10px;
    text-align: left;
}

#groundChoice .groundBtn,
#panelChoice .panelBtn,
#handrailChoice .handrailBtn,
#pipingChoice .pipingBtn,
#antimacassarChoice .antimacassarBtn,
#lateralAreaChoice .lateralAreaBtn,
.curtainChoice .curtainBtn,
#fabricChoice .fabricBtn{
	height: 35px;
    width: 48%;
    display: inline-block;
    margin: 0 1%;
    background-size: cover;
    cursor: pointer;
}

#TS03,#CC03{background:url(/images/patterns/pattern2.png) center center no-repeat;}
#TS04,#CC04{background:url(/images/patterns/pattern3.png) center center no-repeat;}
#TS05,#CC05{background:url(/images/patterns/pattern4.png) center center no-repeat;}
#TS06,#CC06{background:url(/images/patterns/pattern5.png) center center no-repeat;}
#TS07,#CC07{background:url(/images/patterns/pattern6.png) center center no-repeat;}
#TS09,#CC09{background:url(/images/patterns/pattern8.png) center center no-repeat;}
#TS10,#CC10{background:url(/images/patterns/pattern9.png) center center no-repeat;}
#TS11,#CC11{background:url(/images/patterns/pattern10.png) center center no-repeat;}
#TS12,#CC12{background:url(/images/patterns/pattern11.png) center center no-repeat;}
#TS13,#CC13{background:url(/images/patterns/pattern12.png) center center no-repeat;}
#TS14,#CC14{background:url(/images/patterns/pattern13.png) center center no-repeat;}
#TS15,#CC15{background:url(/images/patterns/pattern14.png) center center no-repeat;}
#TS16,#CC16{background:url(/images/patterns/pattern15.png) center center no-repeat;}
#TS17,#CC17{background:url(/images/patterns/pattern16.png) center center no-repeat;}
#TS18,#CC18{background:url(/images/patterns/pattern17.png) center center no-repeat;}
#TS19,#CC19{background:url(/images/patterns/pattern18.png) center center no-repeat;}
#TS20,#CC20{background:url(/images/patterns/pattern19.png) center center no-repeat;}
#TS21,#CC21{background:url(/images/patterns/pattern20.png) center center no-repeat;}
#TS22,#CC22{background:url(/images/patterns/pattern21.png) center center no-repeat;}
#TS23,#CC23{background:url(/images/patterns/pattern22.png) center center no-repeat;}
#TS24,#CC24{background:url(/images/patterns/pattern23.png) center center no-repeat;}
#TS25,#CC25{background:url(/images/patterns/pattern24.png) center center no-repeat;}
#TS26,#CC26{background:url(/images/patterns/pattern25.png) center center no-repeat;}
#TS27,#CC27{background:url(/images/patterns/pattern26.png) center center no-repeat;}
#TS28,#CC28{background:url(/images/patterns/pattern27.png) center center no-repeat;}
#TS29,#CC29{background:url(/images/patterns/pattern28.png) center center no-repeat;}
#TS30,#CC30{background:url(/images/patterns/pattern29.png) center center no-repeat;}
#TS31,#CC31{background:url(/images/patterns/pattern30.png) center center no-repeat;}
#TS32,#CC32{background:url(/images/patterns/pattern31.png) center center no-repeat;}
#TS33,#CC33{background:url(/images/patterns/pattern32.png) center center no-repeat;}
#TS34,#CC34{background:url(/images/patterns/pattern33.png) center center no-repeat;}
#TS35,#CC35{background:url(/images/patterns/pattern34.png) center center no-repeat;}
#TS36,#CC36{background:url(/images/patterns/pattern35.png) center center no-repeat;}
#TS37,#CC37{background:url(/images/patterns/pattern36.png) center center no-repeat;}
#TS38,#CC38{background:url(/images/patterns/pattern37.png) center center no-repeat;}
#TS39,#CC39{background:url(/images/patterns/pattern38.png) center center no-repeat;}
#TS40,#CC40{background:url(/images/patterns/pattern39.png) center center no-repeat;}
#TS41,#CC41{background:url(/images/patterns/pattern40.png) center center no-repeat;}
#TS42,#CC42{background:url(/images/patterns/pattern41.png) center center no-repeat;}
#TS43,#CC43{background:url(/images/patterns/pattern42.png) center center no-repeat;}
#TS44,#CC44{background:url(/images/patterns/pattern43.png) center center no-repeat;}
#TS45,#CC45{background:url(/images/patterns/pattern44.png) center center no-repeat;}
#TS46,#CC46{background:url(/images/patterns/pattern45.png) center center no-repeat;}
#TS47,#CC47{background:url(/images/patterns/pattern46.png) center center no-repeat;}
#TS48,#CC48{background:url(/images/patterns/pattern47.png) center center no-repeat;}
#TS49,#CC49{background:url(/images/patterns/pattern48.png) center center no-repeat;}
#TS50,#CC50{background:url(/images/patterns/pattern49.png) center center no-repeat;}
#TS51,#CC51{background:url(/images/patterns/pattern50.png) center center no-repeat;}
#TS52,#CC52{background:url(/images/patterns/pattern51.png) center center no-repeat;}
#TS53,#CC53{background:url(/images/patterns/pattern52.png) center center no-repeat;}
#TS54,#CC54{background:url(/images/patterns/pattern53.png) center center no-repeat;}
#TS55,#CC55{background:url(/images/patterns/pattern54.png) center center no-repeat;}
#TS56,#CC56{background:url(/images/patterns/pattern55.png) center center no-repeat;}
#TS57,#CC57{background:url(/images/patterns/pattern56.png) center center no-repeat;}
#TS58,#CC58{background:url(/images/patterns/pattern57.png) center center no-repeat;}
#TS59,#CC59{background:url(/images/patterns/pattern58.png) center center no-repeat;}
#TS60,#CC60{background:url(/images/patterns/pattern59.png) center center no-repeat;}
#TS61,#CC61{background:url(/images/patterns/pattern60.png) center center no-repeat;}
#TS62,#CC62{background:url(/images/patterns/pattern61.png) center center no-repeat;}
#TS63,#CC63{background:url(/images/patterns/pattern62.png) center center no-repeat;}

/*ground*/
#CS01{background:url(/images/grounds/ground1.png) center center no-repeat;}
#CS02{background:url(/images/grounds/ground2.png) center center no-repeat;}
#CS03{background:url(/images/grounds/ground3.png) center center no-repeat;}
#CS04{background:url(/images/grounds/ground4.png) center center no-repeat;}
#CS05{background:url(/images/grounds/ground5.png) center center no-repeat;}
#CS06{background:url(/images/grounds/ground6.png) center center no-repeat;}
#CS07{background:url(/images/grounds/ground7.png) center center no-repeat;}
#CS08{background:url(/images/grounds/ground8.png) center center no-repeat;}
#CS09{background:url(/images/grounds/ground9.png) center center no-repeat;}
#CS10{background:url(/images/grounds/ground10.png) center center no-repeat;}
#CS11{background:url(/images/grounds/ground11.png) center center no-repeat;}
#CS12{background:url(/images/grounds/ground12.png) center center no-repeat;}
#CS13{background:url(/images/grounds/ground13.png) center center no-repeat;}
#CS14{background:url(/images/grounds/ground14.png) center center no-repeat;}


/*panels*/

#CPSB01{background:#74848f;}
#CPSB02{background:#577aa2;}
#CPSB03{background:#639c5a;}
#CPSB04{background:#bc7257;}
#CPSB05{background:#e7e3dc;}
#CPSB06{background:#e1e4e4;}
#CPSB07{background:#5e5e5f;}

/*handrail*/

#PMC01{background:url(/images/barres/pmc1.png) center center no-repeat;}
#PMC02{background:url(/images/barres/pmc2.png) center center no-repeat;}
#PMC03{background:url(/images/barres/pmc3.png) center center no-repeat;}
#PMC04{background:url(/images/barres/pmc4.png) center center no-repeat;}
#PMC05{background:url(/images/barres/pmc5.png) center center no-repeat;}
#PMC06{background:url(/images/barres/pmc6.png) center center no-repeat;}
#PMC07{background:url(/images/barres/pmc7.png) center center no-repeat;}
#PMC08{background:url(/images/barres/pmc8.png) center center no-repeat;}
#PMC09{background:url(/images/barres/pmc9.png) center center no-repeat;}
#PMC10{background:url(/images/barres/pmc10.png) center center no-repeat;}
#PMC11{background:url(/images/barres/pmc11.png) center center no-repeat;}
#PMC12{background:url(/images/barres/pmc12.png) center center no-repeat;}
#PMC13{background:url(/images/barres/pmc13.png) center center no-repeat;}
#PMC14{background:url(/images/barres/pmc14.png) center center no-repeat;}
#PMC15{background:url(/images/barres/pmc15.png) center center no-repeat;}
#PMC16{background:url(/images/barres/pmc16.png) center center no-repeat;}

/* curtain */
#CRi01{background:#23304b;}
#CRi02{background:#161b32;}
#CRi03{background:#2c1a3a;}
#CRi04{background:#4a1c20;}
#CRi05{background:#603620;}
#CRi06{background:#6b604a;}
#CRi07{background:#5f291a;}
#CRi08{background:#333336;}
#CRi09{background:#294e5e;}
#CRi10{background:#8a9cad;}
#CRi11{background:#2f4f82;}
#CRi12{background:#15213f;}
#CRi13{background:#441e1f;}
#CRi14{background:#762d26;}
#CRi15{background:#b4472b;}
#CRi16{background:#cc8936;}
#CRi17{background:#675738;}
#CRi18{background:#7b716a;}
#CRi19{background:#233a28;}
#CRi20{background:#828886;}

#biToneChoice .selectBiTone .biToneBtn,
#pipingChoice .selectPiping .pipingBtn{
	margin: 1%;
	float: left;
    cursor: pointer;
}

#fabricChoice .price li,
#biToneChoice .price li{
	width: 22%;
}

#fabricChoice .price li svg,
#biToneChoice .price li svg{
    top: 50%;
    left: 50%;
    height: 7px;
    display: block;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

#fabricChoice .price li:nth-of-type(4) svg,
#biToneChoice .price li:nth-of-type(4) svg{
    top: 25%;
    -webkit-transform: translate(-50%,-25%);
            transform: translate(-50%,-25%);

}


#noPiping,
#noAntimacassar,
#noLateralArea{
	background: url(/images/pictos/sans.svg) center center no-repeat;
	background-size: contain;
}


#TS64,#CC64,#PP01,#TT01,#LT01{background:#474646;}
#TS65,#CC65,#PP02,#TT02,#LT02{background:#5d5c59;}
#TS66,#CC66,#PP03,#TT03,#LT03{background:#9da3af;}
#TS67,#CC67,#PP04,#TT04,#LT04{background:#b35946;}
#TS68,#CC68,#PP05,#TT05,#LT05{background:#936245;}
#TS69,#CC69,#PP06,#TT06,#LT06{background:#817a66;}
#TS70,#CC70,#PP07,#TT07,#LT07{background:#5b564d;}
#TS71,#CC71,#PP08,#TT08,#LT08{background:#6c4444;}
#TS72,#CC72,#PP09,#TT09,#LT09{background:#484957;}
#TS73,#CC73,#PP10,#TT10,#LT10{background:#a59d82;}
#TS74,#CC74,#PP11,#TT11,#LT11{background:#4f4744;}
#TS75,#CC75,#PP12,#TT12,#LT12{background:#544a42;}

/*curtain*/

.busString{
	height: 40px;
	width: 150px;
    /*background:url(/images/pictos/bus_ligne.svg) center center no-repeat;*/
}
.busString ul{
	padding: 0;
    clear: both;
    height: 40px;
}

.busString li{
    width: 49.33px;
    margin: 0;
    float: left;
    padding: 5px 0 0 0;
}
.busString li svg{
    width: 260%;
}
.busString li.little svg{
    width: 200%;
}
.busString li div.overflow{
	height: 100%;
	width: 100%;
    overflow: hidden;
}
.busString li.changeInView  svg path{
	fill: rgba(255,255,255,0.6);
}

.busString li.changeInView:hover svg path{
	fill: rgba(255,255,255,1);
}

.busString li.changeInView.active{
	border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
.busString li.changeInView.active svg path{
	fill: rgba(255,255,255,1);
}



.busString li:nth-of-type(2) svg{
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
}
.busString li:nth-of-type(3) svg{
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
}

.busString li.little{
    width: 70px;
    margin: 0;
    float: left;
    padding: 5px 0 0 0;
}

.busString li.little:nth-of-type(2) svg{
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

#viewOut .previewModel img ,
#viewIn .previewModel img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%)
}
#viewOut .previewModel img{
    top: 33%;
}

@media only screen and (min-width: 1024px) {
	#routemap {
        margin: 20px auto 30px auto;
	}
	#routemap li{
		font-size: 1.4vh;
		width: 1.4vh;
        height: 10%;
	}
	#routemap li::before{
		height: 1.8vh;
		width: 1.8vh;
		padding: 0.8vh;
		border-width: 0.3vh;
	}
	#routemap li::after{
		height: 0.2vh;
		width: 90%;
		top: 2vh;
	}
    #routemap li.prevSteps:nth-of-type(n)::before{
        background-size:50%;
    }
	/* gamut */
	#gamutChoice li span{
		height: 10vh;
		width: 24vh;
		padding: 14vh 0 0 0;
		background-size: 70%;
		font-size: 2.8vh;
		border-width: 0.1vh;
	}
    /* energy */
    #energyChoice{
        margin: 4.2vh 0 2.2vh 0;
    }
	#energyChoice li{
		height: 18.5vh;
	}
	#energyChoice li img{
		height: 100%;
		width: auto;
        margin: 0 auto 2vh auto;
	}
	#energyChoice li .energyName{
		padding: 1.9vh 0;
		font-size: 2vh;
    }
    .nextStep,.printViewBtn{
        padding: 2.5vh 3vh;
        border-radius: 0.5vh;
        font-size: 1.25vh;
    }

    /* Model */
    #modelChoice .model{
        height: auto;
        padding: 2.2vh 0 0 0;
    }
    #modelChoice img{
        width: 90%;
        margin: 0 0 1.9vh 0;
    }
    #modelChoice .model.active{
        background-size: 70%;
    }
    #modelChoice .modelTitle{
        padding: 1.8vh;
        font-size: 2vh;
    }
    #modelChoice .shortName{
        font-size: 2vh;
    }
    #modelChoice .model.active .modelTitle, #energyChoice li.active .energyName {
		border-width: 0.1vh;
    }
    .descEnergy, .descModel {
		border-width: 0.1vh;
        padding-top: 2vh;
        margin-top: 0;
    }
    .busSelected .nameBus, 
    .seatSelected .nameSeat {
        max-width: 100%;
        font-size: 2vh;
    }
    .busSelected .energyBus {
        margin: 0.5vh 0;
    }
    /* ext view */
    .interfaceLeft .conf ul, .interfaceLeft .label {
        width: 9vh;
    }
    .interfaceLeft ul{
        padding: 0.5vh;
    }
    .interfaceLeft li{
        height: 8.9vh;
        width: 8.9vh;
        margin: 0.5vh 0;
        background-size: contain;
    }
    .interfaceLeft ul.custom li.active svg {
        background-size: 50%;
    }
    .interfaceLeft li svg {
        width: 45%;
        height: auto;
    }
    .interfaceLeft .label{
        font-size: 1.2vh;
    }
    .interfaceLeft .preference li, 
    .interfaceLeft .prop li{
        height: 6vh;
        width: 6vh;
    
    }
    #seatView .interfaceLeft .conf ul{
        width: 15vh;
        padding: 0.5vh;
    }
    .interfaceLeft li span{
        padding: 0.5vh;
        border-radius: 0.5vh;
        font-size: 1.2vh;
    }
    .interfaceLeft li span::after{
        height: 1vh;
        width: 1vh;
        left: -0.5vh;
    }
    #seatView .interfaceLeft .conf ul li{
        height: 6.5vh;
        width: 6.5vh;
    }
    #decorChoice{
        width: 14vh;
        border-radius: 0.7vh;
        padding: 1vh;
    }
    #decorChoice .selectDecor .decorBtn{
        height: 3.5vh;
        margin: 1vh 0;
    }
    #configurator form{
        height: calc(100% - 98px);
    }
    #paletteChoice, #biToneChoice, #fabricChoice{
        width: 14vh;
        height: 37vh;
		border-width: 0.1vh;
        border-radius: 0.7vh;
    }
    #fabricColor span{
        height: 1.5vh;
    }
    .price{
        height: 3vh;
    }
    .price li{
        height: 3vh;
		border-width: 0.1vh;
    }
    .price svg {
        height: 1vh;
        top: 0.3vh;
    }
    #paletteChoice .colorPreview .zoneColor, 
    #fabricChoice .fabricPreview .zoneFabric, 
    #groundChoice .groundPreview .zoneGround, 
    #panelChoice .panelPreview .zonePanel, 
    #handrailChoice .handrailPreview .zoneHandrail, 
    #biToneChoice .biTonePreview .zoneBiTone, #pipingChoice .pipingPreview .zonePiping, 
    #antimacassarChoice .antimacassarPreview .zoneAntimacassar,
    #lateralAreaChoice .lateralAreaPreview .zoneLateralArea, 
    .curtainChoice .curtainPreview .zoneCurtain{
        height: 4vh;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    #paletteChoice .colorPreview .nameColor, 
    #fabricChoice .fabricPreview .nameFabric, 
    #groundChoice .groundPreview .nameGround, 
    #panelChoice .panelPreview .namePanel, 
    #handrailChoice .handrailPreview .nameHandrail, 
    #biToneChoice .biTonePreview .nameBiTone, 
    #pipingChoice .pipingPreview .namePiping, 
    #antimacassarChoice .antimacassarPreview .nameAntimacassar, 
    #lateralAreaChoice .lateralAreaPreview .nameLateralArea, 
    .curtainChoice .curtainPreview .nameCurtain{
        margin: 0.5vh;
        font-size: 1vh
    }
    #groundChoice .groundBtn, 
    #panelChoice .panelBtn, 
    #handrailChoice .handrailBtn, 
    #pipingChoice .pipingBtn, 
    #antimacassarChoice .antimacassarBtn, 
    #lateralAreaChoice .lateralAreaBtn, 
    .curtainChoice .curtainBtn, 
    #fabricChoice .fabricBtn{
        height: 3.5vh;
    }
    #paletteChoice .paletteBtn, 
    #biToneChoice .biToneBtn{
        height: 3.5vh;
    }
    .selectColor, .selectBiTone, .selectFabric{
        padding: 0.5vh;
        height: 25vh;
    }
    .selectFabric{
        height: 21vh;
    }
    #viewOut, #seatView, #viewIn, #viewMailForm{
        width: 100%;
    }
    .previewModel img{
        width: 100%;
    }
    #viewIn .previewModel img{
        width: auto;
        height: 100%;
    }
    .lowInterface{
        border-radius: 1vh 1vh 0 0;
    }
    .lowInterface ul{
        padding: 1vh 1.5vh;
    }
    .lowInterface li{
        margin: 0.5vh;
    }
    .lowInterface li svg {
        height: 3.3vh;
    }
    .lowInterface li span{
        font-size: 1.2vh;
        padding: 0.5vh;
        border-radius: 0.5vh;
        min-width: 7vh;
    }
    .lowInterface li span::after{
        height: 1vh;
        width: 1vh;
        bottom: -0.5vh;
    }
    .lowInterface li:not(.busString):hover span{
        top: -4vh;
    }

    /* seat view */
    .slick-arrow{
        height: 4.4vh;
        width: 4.4vh;
        background-size: 100%;
    }
    .slick-arrow.slick-next
    .previewSeat .slick-arrow.slick-next {
        right: 10vh;
    }
    .previewSeat .slick-dots li button{
        height: 0.88vh;
        border-radius: 1vh;
    }
    .interfaceLeft .storage svg {
        height: 90%;
        width: auto;
    }
    #biToneChoice .price li svg{
        height: 0.7vh;
    }
    #groundChoice, 
    #panelChoice, 
    #handrailChoice, 
    #pipingChoice, 
    #antimacassarChoice, 
    #lateralAreaChoice, 
    .curtainChoice{
        width: 14vh;
        border-radius: 0.7vh;
        padding: 1vh;
        border-width: 0.1vh;
    }
    #noPiping, #noAntimacassar, #noLateralArea {
        background-size: contain!important;
    }

    /* view extern */
    .busString {
        height: 4vh;
        width: 15vh;
    }
    .busString ul{
        height: 4vh;
        padding: 0;
    }
    .busString li {
        width: 4.7vh;
        padding: 0.5vh 0 0 0;
        
        margin: 0;
    }
    .busString li:nth-of-type(2) svg {
        -webkit-transform: translateX(-4vh);
        transform: translateX(-4vh);
    }
    .busString li:nth-of-type(3) svg {
        -webkit-transform: translateX(-8vh);
        transform: translateX(-8vh);
    }
    .busString li.little {
        width: 7vh;
        margin: 0;
        float: left;
        padding: 0.5vh 0 0 0;
    }
    .interfaceLeft .preference li.active::after, 
    .interfaceLeft .prop li.active::after{
        height: 1.8vh;
        width: 1.8vh;
        background-size: contain;
    }
    .busString li.changeInView.active {
        border-width: 0.1vh;
    }
    /* menu recap */
    #viewMenuRecapSee .RecapBtn{
        padding: 2.5vh 3vh;
        border-radius: 0.5vh;
        font-size: 1.25vh;
        width: 30vh;
        margin: 2vh auto;
    }
    #viewMenuRecapSee p#returnBtn{
        border-width: 0.1vh;
    }
}