@charset "utf-8";
/* CSS Document */
body{background-color:#424242;}

.container {
		margin:0%;
	  padding:0;
	  width:100%;
	  float:left;
}
.box-xs-6, .box-xs-12, .box-sm-6, .box-sm-12, .box-md-6, .box-md-12, .pub-xs-6, .pub-sm-6, .pub-md-6,  .pub-xs-12, .pub-sm-12, .pub-md-12{
  	border-radius: 6px;
 	text-align: center;
 	margin:1vw;
 	padding:0;
	-webkit-box-shadow:  0 3px 2px 0 rgba(0, 0, 0, 0.3);
	box-shadow:  0 3px 2px 0 rgba(0, 0, 0, 0.3);
}
.box-xs-6 h2, .box-xs-12 h2, .box-sm-6 h2, .box-sm-12 h2, .box-md-6 h2, .box-md-12 h2{
	vertical-align:central;
	text-align: center;
	text-decoration: none;
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-weight:500;
	margin:0;
	padding:2vw 1vw 0 1vw;
	}

.box-xs-6 img, .box-xs-12 img, .box-sm-6 img, .box-sm-12 img, .box-md-6 img, .box-md-12 img{
	width:100%;
	height:66%;
	background-size:contain;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	}
.boxImg{
	width:100%;
	height:66%;
	background-size:cover;
	background-position:center;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	}
.material-icons{
	background-color:rgba(255,255,255,0.4); 
	width:100%;
	height:66%; 
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	}
.logo{
	margin:0 auto;
	}
.page-header{
	height:7vh;
	width: 100%;
	border:none;
	margin:0;
	padding-top:1vw;
	padding-bottom:1vw;
	-webkit-box-shadow:  0 3px 2px 0 rgba(0, 0, 0, 0.3);
	box-shadow:  0 3px 2px 0 rgba(0, 0, 0, 0.3);
	margin-bottom:.5vw;
	position: fixed;
	z-index:2;
	}
.page-header h1{
	text-align:center;
	font-family: 'Roboto+Condenced', sans-serif;
	font-weight:700;
	color:#FFFFFF;
	}
	a:active, a:hover, a:focus{
		text-decoration:none;
	}
.back{
	float:left;
	margin-left:1vh;
	width:6vw;
	position:absolute;
	background-image:url(img/back.svg);
	}
.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: rgba(255,255,255,0.3);

}
.table > thead > tr > th {
	border:none;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-top: none;
}
.number{width: 2%;}
.rouge800{text-transform: uppercase;}
table.maps{
/*	margin-top:50vw;
	overflow:scroll;*/
	 margin-bottom:0;
	}
.plan{
	width:100%;
	display:block;
	overflow: scroll;
	height:50vw;
	position:fixed;
	z-index:1;
	background-color:#FFFFFF;
	-webkit-box-shadow:  0 3px 2px 0 rgba(0, 0, 0, 0.3);
	box-shadow:  0 3px 2px 0 rgba(0, 0, 0, 0.3);
	background:no-repeat center #FFFFFF;
	background-image:url(img/plan.svg);
	background-size: 90% 90%;
	}
.scrolllist{
	position:absolute;
	left:0;
	bottom:0;
	right:0;
	overflow:scroll;
	}	

.resto h2{color:#000000;}
.padding{padding:0;}
.margin{margin:0;}
/*-------------------------------------------------Tab Design------------------------------------------------------*/

ul.transport{border:none; position: fixed; width:100%;}
ul.transport > li{ width:50%; text-align:center; background-color:#01579B;}
ul.transport > li.active{background-color:#2980b9;}
ul.transport > li > a{border-radius: 0;	background-color: transparent;	border: none;	color:#2980b9;font-family: 'Roboto+Condenced', sans-serif;font-weight: 700; text-transform: uppercase; }
ul.transport > li.active > a{border-radius:0; background-color: transparent; border:none; color:white;}
ul.transport > li.active > a:active{ border:none; border-radius:none; background-color:#2980b9; color:white;}
ul.transport > li.active > a:focus{ border:none; border-radius:none; background-color:#2980b9;  color:white;}
ul.transport > li.active > a:hover{ border:none; border-radius:none; background-color:#2980b9;  color:white;}
table .type{ width:14%;	text-align:center;}
table .destination{ /*width:52%;*/ width:68%;	text-align:left;}
table .sector{width:16%; text-align:center;}
table .start{ width:14%;text-align:center;}

#planetab table .type{ width:24%;	text-align:center;}
#planetab table .destination{ width:40%; text-align:left;}
#planetab table .sector{ width:18%; text-align:center;}
#planetab table .start{ width:18%;text-align:center;}

#Commerces table .name{ width:95%; text-align:left;}
#Commerces table .number{ width:5%; text-align:center;}

/*--------------------------------------------------Page-------------------------------------------------------*/

.titleBox-xs, .titleBox-sm, .titleBox-md{ padding:0; display:block;}
.titleBox-xs h1, .titleBox-sm h1, .titleBox-md h1{font-family: 'Roboto+Condenced', sans-serif;font-weight: 700; padding: 1.5vh; color:white; margin:0;}
.imgBox-xs, .imgBox-sm, .imgBox-md{	-webkit-box-shadow:  0 3px 2px 0 rgba(0, 0, 0, 0.3); box-shadow:  0 3px 2px 0 rgba(0, 0, 0, 0.3); height:30vh; background-size: cover; background-repeat:no-repeat; padding:0; background-position:center;  display:block; z-index:1;}
.contantBox-xs, .contantBox-sm, .contantBox-md{ padding: 1.5vh; height:100%; clear:both; display:block;}
.contantBox-xs h2, .contantBox-sm h2, .contantBox-md h2{font-family: 'Roboto+Condenced', sans-serif;font-weight: 700; color:white; margin:0 0 1vw 0;}
.contantBox-xs p, .contantBox-sm p, .contantBox-md p{font-family: 'Roboto', sans-serif;font-weight: 200; color:white; margin:0 0 5vw 0; text-transform: none;}
.imgBox-xs img, .imgBox-sm img, .imgBox-md img{ height:30vh; background-size:cover;}

/*------------------------------------------------Publicité-----------------------------------------------------*/

.pub-xs-6, .pub-sm-6, .pub-md-6 {font-family: 'Roboto+Condenced', sans-serif;font-weight: 700; color:white; text-align:center;}
.pub-xs-6:hover, .pub-sm-6:hover, .pub-md-6:hover {color:#7b7b7b; background-color:white;}
.pub-xs-6 span, .pub-sm-6 span, .pub-md-6 span{vertical-align: middle; display:inline-block; line-height: normal;}


/*-------------------------------------------------commerces------------------------------------------------------*/
table .commerce{ width:90%;}
table .forward{ width:6%; background-image:url(img/back.svg); background-repeat:no-repeat; background-position:center; transform:rotate(180deg); height:100;}

/*-------------------------------------------------carousel------------------------------------------------------*/

	.carousel-inner > .item > img, .carousel-inner > .item > a > img{background-position:center; max-width:none;}

/*-------------------------------------------------Screen------------------------------------------------------*/
@media all and (orientation:portrait) {
	.material-icons{padding-top: 8%;}
	.container{	margin-top:7vh;}
	}
	
@media all and (orientation:landscape){	
	.page-header{ display:none;}
	.container{	margin-top:none;}
	}
/*-------------------------------------------------290px------------------------------------------------------*/	
@media all and (min-width: 290px) and (orientation:portrait){
	.box-xs-6{ height: 29.8vh; width: 48vw;}
	.box-xs-6 h2{font-size:4vw;}
	.box-xs-12{ width: 98vw; height: 29.5vh;}
	.box-xs-12 h2 {font-size:3vh;}
	.pub-xs-6{ height: 20vh; width: 45vw; font-size:5vw; line-height:20vh;}
	.pub-xs-12{ height: 20vh; width: 90vw; font-size:5vw; line-height:20vh;}
	
	.contantBox-xs{ min-height:92.5vw; height:100%;}
	.contantBox-xs h2{ font-size:4vw;}
	.contantBox-md p{ font-size:4vw;}
	.titleBox-xs{ height:7vh;}
	.titleBox-xs h1{ font-size:6vw;}
	
	.scrolllist{top:35vh;}
	.plan{ height:28vh;}
	.material-icons{ font-size: 16vh;}
	ul.transport > li{ height:7vh;}
	table.topbar{ margin-top:7vh;}
	table .forward{ background-size: 75% 75%;}
	
	.carousel-inner > .item > img, .carousel-inner > .item > a > img{ height:30vh; width: auto;}
	}
	
@media all and (min-width: 290px) and (orientation:landscape){
	.box-xs-6{ width: 31vw; height: 46vh;}
	.box-xs-6 h2{font-size:3vw;}
	.box-xs-12{ width: 48vw; height: 46.5vh;}
	.box-xs-12 h2 {font-size:4vh;}
	.pub-xs-6{ height: 46vh; width: 47vw; font-size:5vw; line-height:46vh;}
	.pub-xs-12{ height: 46vh; width: 99vw; font-size:5vw; line-height:46vh;}
	
	.contantBox-xs{min-height:100%;}
	.contantBox-xs h2{ font-size:4vw;}
	.contantBox-xs p{ font-size:3vw;}
	.titleBox-xs{ height:14vh;}
	.titleBox-xs h1{ font-size:6vw;}
	
	.scrolllist{top:50vh;}
	.plan{ height:50vh;}
	.material-icons{padding-top: 12%; font-size: 18vh;}
	ul.transport > li{ height:17vh;}
	table.topbar{ margin-top:16vh;}
	table .forward{ background-size: 50% 50%;}
	
	.carousel-inner > .item > img, .carousel-inner > .item > a > img{ height:30vh; width: auto;}
	}
/*-------------------------------------------------340px------------------------------------------------------*/
@media all and (min-width: 340px) and (orientation:portrait){
	.box-sm-6 {  height: 29.8vh; width: 48vw;}
	.box-sm-6 h2 {font-size:4.5vw;}
	.box-sm-12{ width: 98vw; height: 29.5vh;}
	.box-sm-12 h2 {font-size:3vh;}
	.pub-sm-6{ height: 20vh; width: 45vw;  font-size:5vw; line-height:20vh;}
	.pub-sm-12{ height: 20vh; width: 90vw;  font-size:5vw; line-height:20vh;}
	
	.contantBox-sm{ min-height:99.5vw;}
	.contantBox-sm h2{ font-size:5vw;}
	.contantBox-sm p{ font-size:3.5vw;}
	.titleBox-sm{ height:7vh;}
	.titleBox-sm h1{ font-size:7vw;}
	
	.scrolllist{top:35vh;}
	.plan{ height:28vh;}
	.material-icons{font-size: 15vh;}
	ul.transport > li{ height:7vh;}
	table.topbar{ margin-top:7vh;}
	table .forward{ background-size: 60% 60%;}
	
	.carousel-inner > .item > img, .carousel-inner > .item > a > img{ height:30vh; width: auto;}
	}
	
@media all and (min-width: 340px) and (orientation:landscape){
	.box-sm-6{ width: 31vw; height: 46vh;}
	.box-sm-6 h2{font-size:2.5vw;}
	.box-sm-12{ width: 48vw; height: 46.5vh;}
	.box-sm-12 h2 {font-size:4vh;}
	.pub-sm-6{ height: 46vh; width: 47vw; font-size:5vw; line-height:46vh;}
	.pub-sm-12{ height: 46vh; width: 99vw; font-size:5vw; line-height:46vh;}
	
	.contantBox-sm{ min-height:100%;}
	.contantBox-sm h2{ font-size:4vw;}
	.contantBox-sm p{ font-size:2.5vw;}
	.titleBox-sm{ height:15vh;}
	.titleBox-sm h1{ font-size:6vw;}
	
	.scrolllist{top:50vh;}
	.plan{ height:50vh;}
	.material-icons{padding-top: 12%; font-size: 18vh;}
	ul.transport > li{ height:17vh;}
	table.topbar{ margin-top:16vh;}
	table .forward{ background-size: 50% 50%;}
	
		.carousel-inner > .item > img, .carousel-inner > .item > a > img{ height:30vh; width: auto;}
	}
/*-------------------------------------------------768px------------------------------------------------------*/
@media all and (min-width: 768px) and (orientation:portrait) {
	.box-md-6{ width: 48vw; height: 29.5vh;}
	.box-md-6 h2 {font-size:3vh;}
	.box-md-12{ width: 98vw; height: 29.5vh;}
	.box-md-12 h2 {font-size:3vh;}
	.pub-md-6{ height: 20vh; width: 46vw;  font-size:5vw; line-height:20vh;}
	.pub-md-12{ height: 20vh; width: 92vw;  font-size:5vw; line-height:20vh;}
	
	.contantBox-md{min-height:74.5vw; height:100%;}
	.contantBox-md h2{ font-size:4vw;}
	.contantBox-md p{ font-size:2.5vw;}
	.titleBox-md h1{ font-size:5vw;}
	
	.scrolllist{top:44vh;}
	.plan{ height:37vh;}
	.material-icons{padding-top: 8%; font-size: 12vh;}
	ul.transport > li, ul.transport > li.active{ height:7vh;}
	table.topbar{ margin-top:7vh;}
	table .forward{ background-size: 60% 60%;}
	
	.carousel-inner > .item > img, .carousel-inner > .item > a > img{ height:30vh; width: auto;}
	}	

@media all and (min-width: 768px) and (orientation:landscape) {
	.box-md-6{ width: 31.3vw; height: 46.6vh;}
	.box-md-6 h2 {font-size:3vw;}
	.box-md-12{ width: 48vw; height: 46.5vh;}
	.box-md-12 h2 {font-size:4vh;}
	.pub-sm-6{ height: 46vh; width: 46.5vw; font-size:5vw; line-height:46vh;}
	.pub-sm-12{ height: 46vh; width: 93vw; font-size:5vw; line-height:46vh;}
	
	.contantBox-sm{ min-height:100%;}
	.contantBox-sm h2{ font-size:3vw;}
	.contantBox-sm p{ font-size:2vw;}
	.titleBox-sm{ height:10vh;}
	.titleBox-sm h1{ font-size:4vw;}
	
	.scrolllist{top:50vh;}
	.plan{ height:50vh;}
	.material-icons{padding-top: 12%; font-size: 18vh;}
	ul.transport > li, ul.transport > li.active{ height:10vh;}
	table.topbar{ margin-top:10vh;}
	table .forward{ background-size: 50% 50%;}
	
	.carousel-inner > .item > img, .carousel-inner > .item > a > img{ height:30vh; width: auto;}
	}
/*-------------------------------------------------------------------------------------------------------*/	
@media screen and (min-width: 290px) {
	.page-header h1{font-size:4vw; margin: 2.5vw 0;}
	.back{height:6vw; margin-top:2vw;}
	.logo{width:20%;}
	ul.transport > li > a { font-size:4vw;}
	}
		
@media screen and (min-width: 340px) { 
	.page-header h1{font-size:4vw; margin: 2vw 0;}
	.back{height:6vw; margin-top:2vw;}
	.logo{width:15%;}
	ul.transport > li > a { font-size:4vw;}
 	}

@media screen and (min-width: 768px) { 
	.page-header h1{font-size:3vw; margin: 2vw 0;}
	.back{height:6vw; margin-top:0.5vw;}
	.logo{width:15%;}
	ul.transport > li > a { font-size:4vw;}
	}

/*-------------------------------------------------Color------------------------------------------------------*/
.turquoise{ background-color:#1abc9c;}
.rouge{ background-color:#e74c3c;}
.rouge700{ background-color:#D32F2F;}
.rouge800{ background-color:#C62828;}
.orange{ background-color:#d35400;}
.orange700{ background-color:#F57C00;}
.orange800{ background-color:#EF6C00;}
.orange900{ background-color:#E65100;}
.jaune{ background-color:#f1c40f;}
.jaune500{ background-color:#FFEB3B;}
.jaune600{ background-color:#FDD835;}
.jaune700{ background-color:#FBC02D;}
.jaune800{ background-color:#F9A825;}
.bleu{ background-color:#2980b9;}
.bleu600{ background-color:#039BE5;}
.bleu700{ background-color:#0288D1;}
.bleu800{ background-color:#0277BD;}
.bleu900{ background-color:#01579B;}
.vert{ background-color:#27ae60;}
.vert600{ background-color:#43A047;}
.vert700{ background-color:#388E3C;}
.vert800{ background-color:#2E7D32;}
.vertclair700{ background-color:#689F38}
.vertclair800{ background-color:#558B2F}
.brun{ background-color:#795548;}
.brun700{ background-color:#5D4037;}
.gris{ background-color:#7b7b7b;}
.dark{ background-color: rgba(0,0,0,0.3);}
.light{ background-color: rgba(255,255,255,0.2);}

.turquoiseFont{ color:#1abc9c;}
.rougeFont{ color:#e74c3c;}
.orangeFont{ color:#d35400;}
.orangeFont700{ color:#F57C00;}
.orangeFont800{ color:#EF6C00;}
.orangeFont900{ color:#E65100;}
.jauneFont{ color:#f1c40f;}
.bleuFont{ color:#2980b9;}
.vertFont{ color:#27ae60;}
.blancFont{ color:#FFFFFF;}
.grisFont{ color:#7b7b7b;}

/*-------------------------------------------------Images------------------------------------------------------*/

.train{	background-image:url(img/maxresdefault.jpg);}
.bus{background-image: url(img/tpg-gratis-zubringerbus-mit-112818.jpg);}
.avion{	background-image: url(img/avion.jpg);}
.gare{ background-image:url(img/genf-flughafen.jpg);}
.gare2{ background-image:url(img/genf_Dienstl_SBB_Services_BB_8856.jpg);}
.pcff{ background-image:url(img/logo_sbb_treffpunkt.gif); background-position:center;}
.icone-transport{ background-image:url(img/icones_transport.svg); background-position: center center; background-repeat: no-repeat; background-size: 70% 70%;}
.icone-cadi{ background-image:url(img/icone_cadi.svg); background-position: center center; background-repeat: no-repeat; background-size: 70% 70%;}

.migros-title{ background-image:url(img/migrostitle.png);}
.migros-logo{ background-image:url(img/migros.svg); padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.canonica-title{ background-image:url(img/title-canonica.png);}
.canonica-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.petitecave-title{ background-image:url(img/title-petitecave.png);}
.petitecave-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}
.petitecave-color{ background-color:#711C3D;}

.manor-title{ background-image:url(img/title-manor.png);}
.manor-logo{ background-image:url(img/logo_manor.svg); padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.bagel-title{ background-image:url(img/title-bagel.png);}
.bagel-logo{ background-image:url(img/logo_bagel.svg);  padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.bongenie-title{ background-image:url(img/title-bonjenie.png);}
.bongenie-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.insideafrica-title{ background-image:url(img/title-insideafrica.png);}
.insideafrica-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.minelli-title{ background-image: url(img/title-minelli.png);}
.minelli-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.relay-title{ background-image: url(img/title-relay.png);}
.relay-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.marionnaud-title{ background-image: url(img/title-marionnaud.png);}
.marionnaud-logo{ background-image:url(img/logo_marionnaud.svg); padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}
.marionnaud-color{ background-color:#732183;}

.sunstore-title{ background-image: url(img/title-pharmacie.png);}
.sunstore-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.asec-title{ background-image: url(img/title-5asec.png);}
.asec-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.coiffure19-title{ background-image: url(img/title-coiffureavenue.png);}
.coiffure19-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.cleminute-title{ background-image:url(img/title-clesminute.png)}
.cleminute-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.solarium-title{ background-image:url(img/genf_Dienstl_Les_Bronzes_BB_8827.jpg);}
.solarium-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.chicoree-title{ background-image:url(img/title-chicoree.png);}
.chicoree-logo{ padding-top:2vw; background-repeat: no-repeat; height: 100%; margin: 1.5vh auto;}

.rotisserie-title{ background-image:url(img/title-rotisserie.png);}
.rotisserie-color{ background-color:#616161;}
.rotisserie-color100{ background-color:#424242;}

.alvolo-title{ background-image:url(img/title-alvolo.png);}

.snack-title{ background-image:url(img/title-snack.png);}

.Brocante{ background-image:url(events/visueBrocante.jpg);}
.autoretro{ background-image: url(events/visuelAutoRetro.jpg);}
.transexpo{ background-image:url(events/visuelTransexpo.jpg);}

/*-------------------------------------------------Promotions------------------------------------------------------*/
.boxpromo{ background-position:center; background-size: cover; }
.manor-promo{ background-image:url(Promo/manorpromo.jpg);}
.asec-promo{ background-image:url(Promo/5asec.jpg);}
.canonica-promo{ background-image:url(Promo/Canonica_juillet.png);}