@font-face {
		font-family: 'Primavera';
    src: url('/assets/fonts/primaver-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: sans-serif;
	font-size:16px;
	color:#333;
	background:#fff url(/assets/images/primbg.gif) no-repeat fixed 95% 95%;
	margin:12px;
}

.backtotop {
	padding-left: 26px;
	color: #333;
	text-decoration: none;
	font-size:1.3em;
	font-weight:normal;
	font-family: 'Primavera';
	-webkit-font-smoothing: antialiased !important;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	background-image: url(/assets/images/piaggio-uparrow.svg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;

}

h1,
h2,
h3,
nav a, .modelsnav li {
	margin-top:1.65em;
	font-size:1.3em;
	font-weight:normal;
	font-family: 'Primavera';
	-webkit-font-smoothing: antialiased !important;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
h1 {font-size: 1.85em;}
h2 {font-size:1.35em;}
h3 {font-size:0.95em;}
p,
li,
td {font-size: 0.95em;}

.m h1 {font-size: 1.65em;}
.m h2 {font-size: 1.15em;}

.modelsnav {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	list-style-type: none;
	padding: 0;
	margin: 2em 0;
}

.modelsnav li  {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 1 auto;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	-webkit-align-self: auto;
	-ms-flex-item-align: auto;
	align-self: auto;
	padding: 12px;
	text-align: center;
	margin-bottom: 24px;
	font-size: 0.85em;
}

.modelsnav li:empty  {
	height:0;
	width: 150px;
	padding: 0;
	margin-bottom: 0;
}

.modelsnav img {display: block;}

.fhp p {min-height:77px;}

strong { text-shadow:1px 1px 0 #333, -1px 1px 0 #333, -1px -1px 0 #333, 1px -1px 0 #333; color:#fff; margin-right:6px;}

main, #header, #cover, nav ul {
	max-width: 1020px;
	margin:5px auto 50px auto;
	display:block;
}

.m #cover, .t #cover {
		width: 100%;
}

#logo {
	width:194px;
	height:56px;
	float:right;
}

#homelink {
	width:185px;
	height:11px;
	float:none;
	clear:both;
	margin-top:45px;
}


main p { text-align:justify; }

main a {color:#000; text-decoration:none;}
main a:hover { color:#000; text-shadow:1px 1px 1px rgba(0,0,0,0.2) }
main a:visited  {color:#999;}

main p a { font-weight:bold; }

#header{text-decoration:none; display:block; min-height:56px;}

main img,
figure, 
main iframe {
	display:block;
	margin: 6px 0 36px 0;
	padding:9px;
	border:1px solid #e5e5e5;
	border-radius:2px;
	box-shadow:0 2px 6px rgba(0,0,0,0.1);
  background-color: #fff;
  position:relative;
  left: 50%;
  transform: translateX(-50%);
	max-width: 90%;
}

main figure img {
	padding:0;
	margin:0;
	border-width:0;
	border-radius:0;
  box-shadow:none;
  position: static;
  transform: none;
}

main figure img + img {
  margin-top: 9px;
}

main iframe { max-width:530px; }

figure {font-size:0.85em; max-width:500px; width: -webkit-fill-available; width: fit-content}
figure.portrait {max-width:400px;}

figcaption {display:block; margin-top:9px; text-align: center;}
h3.caption {margin:9px 0 0 0; text-align:center;}

/* Internet bloody explorer */
@media screen and (-ms-high-contrast: none) {
	main { text-align: center; }
	figure { display: inline-block; }
}

/* Microsoft bloody Edge */
@supports (-ms-ime-align:auto) {
	main { text-align: center; }
	figure { display: inline-block; }
}

nav ul {list-style-type:none; padding:0; margin-top:12px;}

nav li { width:24%; height:14px; margin:0; padding:0; text-align:center; display:inline-block; }

nav a {
	height:14px;
	font-size:1.25em;
	color:#444;
	text-decoration:none;
	display:block;
	margin-top:0;
}

nav a:hover { color:#000; text-shadow:0 0 6px rgba(0,0,0,0.6) }

.tech main::before,
.narikawa main::before {
	content: url('/assets/images/serviziostamp.png');
	float:right;
	margin-left:12px;
	margin-bottom:12px;
}

.narikawa main::before {
	content: url('/assets/images/vespaplate.jpg');
	transform: rotateZ(12deg);
}

.tech .nav-tech, .models .nav-models, .gallery .nav-gallery, .stuff .nav-stuff {color: #c64400}


main .rightimage { float:right; margin: 0 0 24px 18px; position: static;
  transform: none;}
main .leftimage { float:left; margin: 0 18px 24px 0; position: static;
  transform: none;}

table {border-spacing:0; border-collapse:separate; margin:5px auto; border:1px solid #e5e5e5; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);}
th, td {padding:8px 12px;}
thead { border-top:1px solid #e8e8e8;}
thead th {background-color:#f5f5f5; }
tbody th {background-color:#fbfbfb; text-align:left; border-top:1px dashed #e8e8e8;}
tbody tr:nth-child(2n) th{background-color:#f5f5f5;}
td {background-color:#fff; border-top:1px dashed #e8e8e8; border-left:1px dashed #e8e8e8;  text-align:center;}
tr:nth-child(2n) td{background-color:#f9f9f9;}
tbody tr:first-child td, tbody tr:first-child th  {border-top:1px solid #e8e8e8;}

img.enlargeable {
	cursor:pointer;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	position:relative;
}

img.enlargeable:hover {
	box-shadow:0 2px 6px rgba(0,0,0,0.3);
	transform: scale(1.1);
	-webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: zoom-in;
  transform-origin: center;
}

img.expanded {
  cursor: zoom-out;
}

main img.enlargeable:hover {
	box-shadow:0 2px 6px rgba(0,0,0,0.4);
	transform: scale(1.1) translateX(-50%);
}

main img.expanded:hover {
  transform: translateX(-50%);
}

a[href="#footnote"] {position:relative; top:-0.15em; font-size:1.35em;}

/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
	body {
		margin: 24px;
	}

	main img { height: auto; width: auto; max-width: calc(100vw - 48px); }
}

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
	body {
		margin:18px;	
	}
	#header { min-height:38px; margin-bottom:24px; margin-top:24px; }
	#homelink { margin-top: 28px; }
	#logo { width: 130px; height: 37.52px; }
	nav, nav ul {margin-top:0;}

	nav a {
		height:24px;
	}
	nav li { width:auto; height:auto; text-align:left; display:block; }
	main img.leftimage, main img.rightimage { max-width: calc(50vw - 48px); }
}
#footnote {font-size:0.75em; margin: 2em 0;}

iframe {
	aspect-ratio: 16 / 9;
	max-width:530px;
	width: 100%;
}