@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
* {
	font-family:'Open Sans',sans-serif;
}

html,body{
	padding: 0;
	margin: 0;
}

.clickable{
	cursor: pointer;
}

#svgMap {
	font-family:'Open Sans';
	width:100%;
	height:600px;
	background-color:#69b6de;
	overflow:hidden;
	position: relative;
}
#svgMap .level1 {
	fill:transparent;
	stroke-width:40px;
	stroke:#77bce1;
	top:-95px;
	transform:scale(1.5,1.5);
}
#svgMap .level2 {
	fill:transparent;
	stroke-width:20px;
	stroke:#97cde8;
	top:-95px;
	transform:scale(1.5,1.5);
}
#svgMap .level3 {
	fill:#183d71;
	top:-95px;
	transform:scale(1.5,1.5);
}
#svgMap .level4 {
	top:-100px;
	transform:scale(1.5,1.5);
	fill:#f6e8de;
}
#boxMap{
	max-width: 1282px;
	margin: 0px auto;
}
.mobyMap-detail .route-box{
	width: 100%;
}
.mobyMap-detail .route-box input[type="submit"]{
	width: 100%;
}
#svgMapResource {
	display:none;
}

.mobyMap-c2 {
	/*
    max-width: 1282px;
    margin: 0 auto;
    height: 100%;
  */
}

.mobyMap-legend {
	width: 140px;
	float: right;
	background: #FFFFFF;
	position: relative;
	top: 32px;
	right: 32px;
	/*z-index: 9999;*/
}

.mobyMap-legend-header {
	font-size: 16px;
	color: #FFFFFF;
	letter-spacing: 0.4px;
	line-height: 1.25;
	background-color: #19457C;
	padding: 8px;
	font-weight: bold;
}

.mobyMap-legend-item {
	overflow: hidden;
	padding: 2px 0;
}

.mobyMap-legend-item-title{
	float: left;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 10px;
	color: #6B889F;
	letter-spacing: 0.4px;
}

.mobyMap-legend-item-icon {
    float: right;
}

.mobyMap-legend-list {
    list-style: none;
    margin: 0;
    padding: 8px;
}

.mobyMap-routes {
	width: 320px;
	position: relative;
	top: 32px;
	left: 32px;
	float: left;
	/*z-index: 9999;*/
}

.mobyMap-routes-header {
	color: #FFFFFF;
	background-color: #19457C;
	padding: 16px 0 0 32px;
	height: 115px;
	letter-spacing: 0.4px;
	text-align: left;
}

.mobyMap-routes-header-title {
	font-size: 32px;
	line-height: 1.25;
}

.mobyMap-routes-box {
	background-color: #E9ECF1;
	padding: 16px;
	overflow: hidden;
}

.mobyMap-routes-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobyMap-routes-item {
	background-color: #FFFFFF;
	padding: 0;
	height: 56px;
	cursor: pointer;
	-webkit-transition: background-color 0.25s;
	transition: background-color 0.25s;
}

.mobyMap-routes-item+* {
    margin-top: 8px;
}

.mobyMap-routes-item-icon {
	background-color: #1DAEEC;
	height: 56px;
	width: 56px;
	text-align: center;
	line-height: 56px;
	float: left;
	overflow: hidden;
}

.mobyMap-routes-item-icon img {
	height: 56px;
	width: 56px;
}

.mobyMap-routes-item-content {
	padding: 8px 0 0 16px;
	float: left;
}

.mobyMap-routes-item:hover {
	background-color: #1DAEEC;
}

.mobyMap-routes-item-title {
	font-size: 16px;
	color: #19457C;
	font-weight: bold;
	-webkit-transition: color 0.25s;
	transition: color 0.25s;
}

.mobyMap-routes-item-subtitle {
	font-size: 12px;
	color: #6B889F;
	-webkit-transition: color 0.25s;
	transition: color 0.25s;
	text-align: left;
	line-height: 18px;
}

.mobyMap-routes-item:hover .mobyMap-routes-item-title, 
.mobyMap-routes-item:hover .mobyMap-routes-item-subtitle {
	color: #FFFFFF;
}

.mobyMap-routes-subitem--link {
    height: auto;
}

.mobyMap-routes-subitem--link a {
    display: block;
    height: 56px;
    -webkit-transition: background .25s;
    transition: background .25s;
}

.mobyMap-routes-subitem-icon {
    height: 56px;
    width: 56px;
    text-align: center;
    line-height: 56px;
    float: left;
    overflow: hidden;
}

.mobyMap-routes-subitem-content {
    padding: 16px 0 0 2px;
    float: left;
}

.mobyMap-routes-subitem-title {
    font-size: 16px;
    color: #6B889F;
    line-height: 24px;
    font-weight: bold;
}

.mobyMap-routes-subitem {
    background-color: #FFF;
    padding: 0;
    height: 56px;
}

.mobyMap-routes-subitem--link a:hover {
	background-color: #1DAEEC;
}

.mobyMap-routes-subitem--link a:hover .mobyMap-routes-subitem-title {
	color: #FFF;
}

.mobyMap-routes-subitem{display: none}

.mobyMap-routes-header-back{display:none}

.mobyMap-routes-header-back {
    font-size: 12px;
    text-transform: uppercase;
    margin: 12px 0 8px 0;
    cursor: pointer;
}

#livelli{
	/* z-index: 9990; */
	z-index: 0;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	width: 100%;
}

#italia{
	z-index: 9991;
    position: absolute;
    top: -36px;
    left: 50%;
    margin-left: -88px;
}

#italia img{
	 width: 557px;
}

#rosa-dei-venti{
		z-index: 9991;
    position: absolute;
    top: 454px;
    left: 50%;
    margin-left: 405px;
    /*width: 557px;*/
    transform: scale(0.9);
}

/********************************************/
/* POSIZIONI                                */
/********************************************/
#posizioni-container{
	position: absolute;
  width: 587px;
  height: 600px;
  z-index: 9999;
  top: 0;
  left: 50%;
  overflow: hidden;
  margin-left: -110px;
}

#posizioni{
	position: relative;	
}

.porto{
	position: absolute;
	z-index: 9998;
	left: 0%;
	top: 0%;
}

.porto .nome{
		color: #fff;
    background: #1C467A;
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 8px;
    padding: 4px 5px;
    position: absolute;
    white-space: nowrap;
    font-weight: bold;
    bottom: 0px;
    left: 19px;
    line-height: 8px;
}

.porto img{
	display: block;	
}

.porto .no-active{display: block}
.porto .active{display: none}

.porto.active .no-active{display: none}
.porto.active .active{display: block}

.porto-elba{display: none}

.porto-scaled{
	transform: scale(0.3);
	transform-origin: center;	
}

.rotta{
	display: block;
	position: absolute;
	top: 0;
	left: 0%;
	z-index: 9997;
	overflow: hidden;
}

/* Posizione porti */
#porto-arbatax{top: 373px; left: 155px;}
#porto-bastia{top: 219px;left: 134px;}
#porto-bonifacio{top: 283px; left: 118px;}
#porto-cagliari{top: 430px;left: 119px;}
#porto-cavo{top: 212px; left: 184px;}
#porto-civitavecchia{top: 261px; left: 262px;}
#porto-elba{top: 220px;left: 173px;}
#porto-genova{top: 105px; left: 118px;}
#porto-livorno{top: 152px; left: 172px;}
#porto-napoli{top: 325px; left: 367px;}
#porto-nizza{top: 156px; left: 24px;}
#porto-olbia{top: 332px;left: 155px;}
#porto-golfo_aranci{top: 310px;left: 143px;}
#porto-palermo{top: 484px;left: 338px;}
#porto-piombino{top: 204px;left: 196px;}
#porto-portoferraio{top: 217px; left: 167px;}
#porto-porto_torres{top: 327px;left: 96px;}
#porto-rio_marina{top: 222px; left: 182px;}
#porto-santa_teresa_di_gallura{top: 304px; left: 124px;}
#porto-termoli{top: 245px;left: 387px;}
#porto-tremiti{top: 232px; left: 421px;}
#porto-ajaccio{top: 245px; left: 105px;}


/* Posizione rotte */
#bastia-piombino{top: 193px; left: 148px;width: 55px;}
#bonifacio-santa_teresa_di_gallura{top: 294px;left: 114px}
#santa_teresa_di_gallura-bonifacio{top: 294px;left: 114px}
#cagliari-palermo{top: 441px;left: 121px;}
#palermo-cagliari{top: 441px;left: 121px;}
#palermo-napoli{ top: 338px; left: 349px; }
#cagliari-civitavecchia{top: 260px; left: 125px;}
#cagliari-napoli{top: 331px; left: 118px; width: 267px;}
#civitavecchia-arbatax{top: 258px; left: 155px; height: 131px;}
#genova-arbatax{top: 122px; left: 128px; height: 264px;}
#genova-olbia{top: 121px; left: 126px; height: 213px;}
#genova-golfo_aranci{top: 121px; left: 124px; height: 203px;}
#genova-olbia-tirrenia{top: 118px; left: 122px; height: 213px;}
#olbia-civitavecchia{top: 259px; left: 167px; width: 102px;}
#olbia-livorno{top: 161px; left: 164px; height: 178px;}
#olbia-piombino{top: 211px; left: 166px}
#porto_torres-genova{top: 114px; left: 80px;}

#genova-bastia{top: 119px; left: 122px;}
#livorno-bastia{top: 153px; width: 40px; left: 137px;}
#nizza-bastia{top: 169px; left: 33px; height: 57px;}
#piombino-cavo{top: 203px; left: 190px; transform: rotate(-42deg);}
#piombino-cavo-toremar{top: 202px; left: 190px; transform: rotate(-42deg);}
#piombino-portoferraio{top: 204px; left: 170px; transform: rotate(-23deg);}
#piombino-portoferraio-toremar{top: 202px; left: 170px; transform: rotate(-23deg); height: 17px;}
#piombino-rio_marina{top: 211px; left: 192px;}
#termoli-tremiti{top: 243px; left: 404px}
#genova-ajaccio{top: 115px; left: 97px;}
#ajaccio-genova{top: 115px; left: 97px;}
#ajaccio-porto_torres{top: 250px; left: 90px;}
#porto_torres-ajaccio{top: 250px; left: 90px;}

/* posizioni nome porto */
#porto-portoferraio .nome,
#porto-porto_torres .nome,
#porto-santa_teresa_di_gallura .nome,
#porto-termoli .nome,
#porto-arbatax .nome,
/*#porto-olbia .nome,*/
#porto-bastia .nome,
#porto-cavo .nome,
#porto-ajaccio .nome,
#porto-rio_marina .nome{
	left: auto;
	right: 19px;
}

#porto-olbia .nome{
	left: 19px;
	bottom: -15px;
}

/* zoom elba */
#piombino-cavo path{stroke-width: 3}
#piombino-cavo-toremar path{stroke-width: 3}
#piombino-portoferraio path{stroke-width: 3}
#piombino-portoferraio-toremar path{stroke-width: 3}
#piombino-rio_marina path{stroke-width: 3}


.zoom #piombino-cavo.force-visible path{stroke-width: 1}
.zoom #piombino-cavo-toremar.force-visible path{stroke-width: 1}
.zoom #piombino-portoferraio.force-visible path{stroke-width: 1}
.zoom #piombino-portoferraio-toremar.force-visible path{stroke-width: 1}
.zoom #piombino-rio_marina.force-visible path{stroke-width: 1}


/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
	#livelli>svg{
		width: 1280px;
	}
	
	#italia{
		top: -28px !important;
		bottom: 0px !important;
		left: 341px !important;
		right: 0px !important;
		margin: 0px !important;
		padding: 0px !important;
	}	
	
	#italia img{
		height: 625px !important;
		width: 100% !important;
	}	

	#posizioni-container{
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		margin: 0px;
		padding: 0px;
		width: 100%;
	}
	
	#posizioni-container #posizioni{
		position: absolute;
		width:100%;
	}
	
	#posizioni-container #porti{
		position: relative;
		left: -120px;
	}
	
	#posizioni-container .porto{
		width: 100%;
	}
	
	#posizioni-container .rotta{
		position: absolute;
		width: 100%;
	}
	
	#posizioni-container .porto img{
		width: 100%;
		height: 17px;
	}
	
	#posizioni-container .porto .nome{
		width: 100%;
		background: none;
	}
	
	#posizioni-container .porto .nome span{
		background-color: #1C467A;
		padding: 2px 5px;
		position: relative;
	}
	
	#porto-genova span,
	#porto-livorno span,
	#porto-nizza span,
	#porto-piombino span,
	#porto-elba span,
	#porto-tremiti span,
	#porto-napoli span,
	#porto-palermo span,
	#porto-bonifacio span,
	#porto-cagliari span{
		left: 13px;
	}
	
	#porto-civitavecchia span{
		left: 25px;
	}

	#porto-porto-torres span,
	#porto-bastia span,
	#porto-olbia span,
	#porto-arbatax span,
	#porto-termoli span{
		right: 13px;
	}
	
	#porto-porto_torres span{
		right: 25px;
	}
	
	#porto-santa_teresa_di_gallura span{
		right: 89px;
	}
	/* FINE Correzione nomi porti */
	
	#posizioni-container .rotta>div{
		position: relative;
		width: 100%;
	}
	
	#posizioni-container .rotta svg{
		width: 100%;
	}
	
	/* Posizionamento rotte per IE */
	/* TREMITI */
	#termoli-tremiti{
		left: 290px; 
		top: 237px;
	}
	
	/* SICILIA */
	#palermo-napoli{
		left: 236px;
	}
	
	#palermo-cagliari{
		left: 112px; 
		top: 443px; 
	}
	
	#palermo-cagliari svg{
		width: 220px;
	}
	
	/* ELBA */
	#piombino-cavo,
	#piombino-cavo-toremar,
	#piombino-portoferraio,
	#piombino-portoferraio-toremar,
	#piombino-rio_marina{
		left: 61px;
	}
	
	/* CORSICA */
	#bastia-piombino{
		left: 45px; 
		top: 187px; 
	}
	
	#bonifacio-santa_teresa_di_gallura{
		left: -12px;
	}
	
	#genova-bastia{
		left: 19px; 
		top: 113px; 
	}
	
	#livorno-bastia{
		left: 32px;
	}
	
	#nizza-bastia{
		left: -30px;
	}
	
	/* SARDEGNA */
	#cagliari-civitavecchia{
		left: 75px;
	}
	
	#cagliari-napoli{
		left: 120px;
	}
	
	#cagliari-palermo{
		left: 112px; 
		top: 443px; 
	}
	
	#cagliari-palermo svg{
		width: 220px;
	}
	
	#civitavecchia-arbatax{
		left: 87px;
	}
	
	#genova-arbatax{
		left: 33px; 
		top: 119px;
	}
	
	#genova-olbia,
	#genova-olbia-tirrenia{
		left: 22px;
	}
	
	#olbia-civitavecchia{
		left: 90px;
	}
	
	#olbia-livorno{
		left: 38px;
	}
	
	#olbia-piombino{
		left: 62px;
	}
	
	#porto_torres-genova{
		left: -24px;
	}
	
	#bonifacio-santa_teresa_di_gallura{
		left: -11px;
	}
	
	/* FINE Posizionamento rotte per IE */

	
	#porto-cavo{
		left: 184px;
	}
	
	#porto-piombino{
		left: 197px;
	}
	
	#piombino-portoferraio{
		top: 203px;
	}
}

#menu-mobile{
	display: none;
}

@media only screen and (max-width: 768px) {

	#menu{
		display: none;	
	}
	
	#legenda{
		display: none;
	}
	
	#menu-mobile{
		display: block;	
	}
	
	#livelli{
		margin-left: -100px;
		transform: scale(0.7);
	}
	
	#svgMap{
		height: 455px !important;
	}
	
	#menu-mobile{
		background: #fff;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 99998;
	}
	
	#menu-mobile .swiper-map-container {
		width: 100%;
		height: 56px;
	}
	
	#menu-mobile .swiper-map-slide .swiper-map-slide-content{
		width: 100%;
		overflow: hidden;
	}
	
	#menu-mobile .mobyMap-routes-item-icon{
		margin-left: 56px;
	}
	
	.swiper-map-button-prev{
		background-image: url('/system/modules/it.moby.sito/resources/mappaSVG/ico/swiper-left.svg');
	}
	.swiper-map-button-next{
		background-image: url('/system/modules/it.moby.sito/resources/mappaSVG/ico/swiper-right.svg');
	}
	
	.menu-mobile-back{
		background: #fff;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 99998;
		height: 60px;
		color: #fff;
		background: #1DAEEC;
		text-align: center;
		padding-top: 15px;
		display: none;
	}

}