@charset "utf-8";

/*=====================================
top common
=====================================*/

#toppage {
  height: 33400px;
  background: #b9e1fb;
  z-index: -2;
}
#toppage #wrapper {
  background: url(../images/top_bg.png) no-repeat left bottom;
  height: 33400px;
  width: 6000px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 0;
}
#mare_box {
	position: fixed;
	bottom: 350px;
	left: 0;
	height: 70px;
	width: 1100px;
}
#terre {
	background: url(../images/lontano.png) no-repeat;
	position: absolute;
	width: 317px;
	height: 48px;
	top: 0;
	right: 0;
}
#mare {
	background: url(../images/mare.png) no-repeat;
	width: 1230px;
	height: 38px;
	position: absolute;
	bottom: 0;
	animation: mare 4s alternate infinite ease;
	-webkit-animation: mare 4s alternate infinite ease;
}
@keyframes mare {
	0%{left: 0;}
	100%{left: 20px;}
}
@-webkit-keyframes mare {
	0%{left: 0;}
	100%{left: 20px;}
}
h1, .menu, #mappa, #casa, .about, .title {
  font-family: 'Patrick Hand', cursive;
}
h1 {
  position: fixed;
  top: 0;
  left: -300px;
  z-index: 4;
  background: url(../images/h1.png) no-repeat;
  width: 300px;
  height: 120px;
  text-indent: -100%;
  overflow: hidden;
  animation: title .8s forwards .3s;
  -webkit-animation: title .8s forwards .3s;
}
@keyframes title {
	0%{left: -300px;}
	30%{left: 0;}
	40%{left: -50px;}
	60%{left: 0;}
	80%{left: -20px;}
	100%{left: 0;}
}
@-webkit-keyframes title {
	0%{left: -300px;}
	30%{left: 0;}
	40%{left: -50px;}
	60%{left: 0;}
	80%{left: -20px;}
	100%{left: 0;}
}
p {
  margin-bottom: 1em;
}
ul.menu {
  background: url(../images/bucato_bg.png) no-repeat;
  position: fixed;
  top: -10px;
  right: 10px;
  width: 400px;
  height: 29px;
  z-index: 4;
  animation: bucato 1s forwards;
  -webkit-animation: bucato 1s forwards;
}
@keyframes bucato {
  0% {top: -10px;}
  30% {top: 0px;}
  40% {top: -10px;}
  60% {top: -2;}
  80% {top: -8px;}
  100% {top: -5px;}
}
@-webkit-keyframes bucato {
  0% {top: -10px;}
  30% {top: 0px;}
  40% {top: -10px;}
  60% {top: -2}
  80% {top: -8px;}
  100% {top: -5px;}
}
ul.menu li {
  width: 120px;
  height: 80px;
  display: inline-block;
  background: url(../images/bucato.png) no-repeat;
  cursor: pointer;
  text-align: center;
  padding-top: 30px;
  font-size: 22px;
  margin-top: 10px;
}
ul.menu li + li {
  margin-left: 10px;
}
ul.menu li#via {
  transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  transform-origin: right;
  -webkit-transform-origin: right;
}
ul.menu li#chi {
  transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  transform-origin: left;
  -webkit-transform-origin: left;
}
.cloud {
  z-index: 0;
  background: url(../images/cloud.png) no-repeat;
  width: 400px;
  height: 100px;
  position: fixed;
  top: 0;
  left: 30%;
  opacity: 1;
  transition: all .3s;
  -webkit-transition: all .3s;
  animation: cloudMove 30s infinite alternate;
  -webkit-animation: cloudMove 30s infinite alternate;
}
@keyframes cloudMove{
  from{left: 30%;}
  to{left: 40%;}
}
@-webkit-keyframes cloudMove{
  from{left: 30%;}
  to{left: 40%;}
}
.cloud_off {
  opacity: 0;
}
.ombra {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color:  rgba(19,29,66,.0);
  transition: all 2s;
  -webkit-transition: all 2s;
}
.ombra_on {
  background-color:  rgba(19,29,66,.6);
}
.luna {
  z-index: -1;
  background: url(../images/luna.gif) no-repeat;
  width: 150px;
  height: 150px;
  position: fixed;
  bottom: -100px;
  left: 30%;
  opacity: 0;
  transition: all 3s;
  -webkit-transition: all 3s;
}
.luna_on {
  bottom: 80%;
  left: 70%;
  opacity: 1;
}
.box {
  position: fixed;
  bottom: 10px;
  z-index: 2;
  right: -1000px;
}
#inner {
	width: 100%;
	height: 100%;
	position: relative;
}
#inner #tavola {
	position: absolute;
	bottom: 50px;
	left: 100px;
}
#inner #nave {
	position: absolute;
	bottom: 300px;
	left: 500px;
}
#inner #mul {
	position: absolute;
	bottom: 200px;
	left: 2800px;
}

/*=====================================
top viaggio
=====================================*/

#via_bg {
  background: url(../images/via_bg.png) no-repeat;
  width: 1220px;
  height: 450px;
  position: fixed;
  z-index: 1;
  bottom: 80px;
  right: -1300px;
}
#via_box {
  background: url(../images/viamenu.png) no-repeat;
  width: 647px;
  height: 592px;
  padding: 100px 0 0 100px;
}
#via_box #lenna {
  height: 80px;
  width: 450px;
}
#via_box #lenna li {
  display: none;
  background: url(../images/lenna.png) no-repeat;
  height: 100%;
  padding: 15px 0 0 25px;
}
#via_box #lenna li span {
  font-size: 12px;
}
#via_box #via_menu {
  width: 480px;
  padding: 90px 0 0 50px;;
}
#via_box #via_menu li {
  display: inline-block;
  transition: transform .5s;
  -webkit-transition: transform .5s;
  position: relative;
}

/*=====================================
top citta
=====================================*/

#citta_box {
  bottom: 0;
}

#citta_box ul#mappa {
  position: relative;
  background: url(../images/mappa.png) no-repeat;
  width: 604px;
  height: 747px;
}
#citta_box ul#mappa li {
  position: absolute;
  font-size: 14px;
}
#citta_box ul#mappa li a::before {
  content: "●";
  color: lightcoral;
}
#citta_box ul#mappa li.aft a::after {
  content: "●";
  color: lightcoral;
}
#citta_box ul#mappa li.aft a::before {
  content: "";
}

#citta_box ul#mappa li img {
  border-radius: 50%;
  display: none;
  z-index: 3;
  position: relative;
  top: -40px;
  left: -80px;
  border: 2px solid #58c2d5;
}
#citta_box ul#mappa li a:hover + img {
  display: block;
}

/*
#citta_box ul#mappa li a  {
	position: relative;
}
*/


/*---------- citta position start ----------*/

/*alassio*/
#citta_box ul#mappa li#c01 {
  top: 24%;
  left: 12%;
}
/*alba*/
#citta_box ul#mappa li#c02 {
  top: 16%;
  left: 17%;
}
/*arezzo*/
#citta_box ul#mappa li#c03 {
  top: 31%;
  left: 49%;
}
/*bari*/
#citta_box ul#mappa li#c04 {
  top: 60%;
  left: 85%;
}
/*bassano*/
#citta_box ul#mappa li#c05 {
  top: 15%;
  left: 60%;
}
/*bologna*/
#citta_box ul#mappa li#c06 {
  top: 23%;
  left: 54%;
}
/*catania*/
#citta_box ul#mappa li#c07 {
  top: 82%;
  left: 56%;
}
/*firenze*/
#citta_box ul#mappa li#c08 {
  top: 27%;
  left: 48%;
}
/*genova*/
#citta_box ul#mappa li#c09 {
  top: 20.5%;
  left: 23%;
}
/*laspezia*/
#citta_box ul#mappa li#c10 {
  top: 26%;
  left: 30%;
}
/*milano*/
#citta_box ul#mappa li#c11 {
  top: 13%;
  left: 32%;
}
/*montepulciano*/
#citta_box ul#mappa li#c12 {
  top: 35%;
  left: 38%;
}
/*napoli*/
#citta_box ul#mappa li#c13 {
  top: 57%;
  left: 63%;
}
/*orvieto*/
#citta_box ul#mappa li#c14 {
  top: 38%;
  left: 54%;
}
/*padova*/
#citta_box ul#mappa li#c15 {
  top: 20%;
  left: 61%;
}
/*palazzo adriano*/
#citta_box ul#mappa li#c16 {
  top: 83.5%;
  left: 35%;
}
/*palermo*/
#citta_box ul#mappa li#c17 {
  top: 81%;
  left: 47%;
}
/*parma*/
#citta_box ul#mappa li#c18 {
  top: 18.5%;
  left: 43%;
}
/*perugia*/
#citta_box ul#mappa li#c19 {
  top: 35%;
  left: 56%;
}
/*pisa*/
#citta_box ul#mappa li#c20 {
  top: 28%;
  left: 36%;
}
/*portovenere*/
#citta_box ul#mappa li#c21 {
  top: 24.5%;
  left: 26%;
}
/*rapallo*/
#citta_box ul#mappa li#c22 {
  top: 23%;
  left: 34%;
}
/*roma*/
#citta_box ul#mappa li#c23 {
  top: 48%;
  left: 52%;
}
/*sangimignano*/
#citta_box ul#mappa li#c24 {
  top: 30%;
  left: 33%;
}
/*siena*/
#citta_box ul#mappa li#c25 {
  top: 32%;
  left: 46%;
}
/*torino*/
#citta_box ul#mappa li#c26 {
  top: 14%;
  left: 15%;
}
/*varazze*/
#citta_box ul#mappa li#c27 {
  top: 22%;
  left: 18%;
}
/*venezia*/
#citta_box ul#mappa li#c28 {
  top: 18%;
  left: 67%;
}
/*verona*/
#citta_box ul#mappa li#c29 {
  top: 16%;
  left: 57%;
}
/*viterbo*/
#citta_box ul#mappa li#c30 {
  top: 41%;
  left: 53%;
}
/*---------- citta position end ----------*/


/*=====================================
top chi simamo
=====================================*/

#chi_box {
	background: url(../images/fb_bg.png) no-repeat 0 80px;
	width: 440px;
	height: 70%;
	/*height: 620px;*/
	padding-left: 100px;
}
#chi_box .title {
	text-align: center;
}
#chi_box #fb {
	width: 100% !important;
	height: 100% !important;
}


/*=====================================
top altri
=====================================*/

#cinq {
  background: url(../images/cinq.png) no-repeat right;
  width: 320px;
  height: 65px;
  position: fixed;
  bottom: 170px;
  z-index: 0;
  left: -500px;
  cursor: pointer;
}
#cinq span {
	opacity: 0;
	background: white;
	display: inline-block;
	border-radius: 50px;
	padding: 10px 20px;
	text-align: center;
	transition: .5s;
	position: relative;
	width: 190px;
}
#cinq span::after {
	content: "";
	width: 0;
	height: 0;
	display: block;
	border-left: 20px solid white;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	position: absolute;
	top: 50%;
	left: 98%;
}
#cinq:hover > span {
	opacity: 1;
}
#vino {
  background: url(../images/vino.png) no-repeat right;
  width: 550px;
  height: 140px;
  position: fixed;
  bottom: 30px;
  z-index: 2;
  right: -300px;
  cursor: pointer;
}
#vino span {
	opacity: 0;
	background: white;
	display: inline-block;
	border-radius: 50px;
	padding: 10px 20px;
	text-align: center;
	transition: .5s;
	position: relative;
}
#vino span::after {
	content: "";
	width: 0;
	height: 0;
	display: block;
	border-left: 20px solid white;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	position: absolute;
	top: 50%;
	left: 98%;
}
#vino:hover > span {
	opacity: 1;
}
#arrow {
  background: url(../images/dwn_btn.png) no-repeat right;
  width: 56px;
  height: 52px;
  position: fixed;
  bottom: 30px;
  right: 10px;
  opacity: 1;
  animation: arrow 8s forwards;
  -webkit-animation: arrow 8s forwards;
}
@keyframes arrow {
  to {opacity: 0;}
}
@-webkit-keyframes arrow {
  to {opacity: 0;}
}



/*==========================================================================
                      for ipad (max-width: 1023px)
==========================================================================*/

@media (max-width: 1023px) {


}


/*==========================================================================
                      for SP (max-width: 739px)
==========================================================================*/

@media (max-width: 739px) {

/*=====================================
top menu
=====================================*/

#toppage {
	height: 32000px;
}
#toppage #wrapper {
	height: 32000px;
	background-size: 60%;
	left: -100px;
	bottom: -20px;
}
#toppage #wrapper > div:not(#via_box, #citta_box, #chi_box) {
	background-size: auto 70%;
}
header {
	height: 50px;
	background: #000;
	overflow: hidden;
	width: 100%;
	z-index: 10;
	padding: 0 10px;
}
#toppage header {
	position: fixed;
}
h1 {
  font-size: 26px;
  text-indent: 0;
  background: none;
  float: left;
	color: white;
}
h1, ul.menu {
	position: static;
	width: 50%;
}
ul.menu {
  background: none;
  animation: none;
  -webkit-animation: none;
  float: right;
  height: 50px;
}
ul.menu li {
  background: none;
  font-size: 11px;
  padding: 0;
	color: white;
	width: 30%;
	white-space: nowrap;
}
ul.menu li + li {
	margin: 0;
}
ul.menu li#via,
ul.menu li#chi {
  transform: rotate(0);
  -webkit-transform: rotate(0);
}
#mare_box {
	bottom: 220px;
}
#terre {
	left: 420px;
}

/*=====================================
top viaggio
=====================================*/

#via_bg {
	width: 800px;
	height: 280px;
  background-size: 100%;
  bottom: 0;
}
#via_box {
	background-size: 100%;
	width: 400px;
	height: 370px;
	padding: 80px 0 0 50px;
}
#via_box #lenna {
	width: 350px;
}
#via_box #lenna li {
	background-size: 84%;
	font-size: 11px;
	padding: 10px 0 0 20px;;
}
#via_box #lenna li span {
	font-size: 10px;
}
#via_box #via_menu {
	width: 350px;
	padding: 0;
}
#via_box #via_menu li img {
	width: 60px;
	height: 60px;
}

/*=====================================
top citta
=====================================*/

#citta_box {
  height: 100%;
  width: 136%;
}
#citta_box ul#mappa {
  background-size: cover;
  width: 100%;
  height: 100%;
}
/*
#citta_box ul#mappa {
	margin: 20px;
	padding: 20px;
	background: rgba(255, 255, 255, .7);
	overflow: hidden;
}
#citta_box ul#mappa li {
	position: static;
	float: left;
	width: 33.3%;
	font-size: 12px;
	margin-bottom: 10px;
}
#citta_box ul#mappa li.aft a::before {
  content: "●";
  color: lightcoral;
}
#citta_box ul#mappa li.aft a::after {
  content: "";
}
#citta_box ul#mappa li a:hover + img {
	display: none;
}*/


/*=====================================
top chi shiamo
=====================================*/

#chi_box {
	width: 340px;
	height: 80%;
	/*height: 400px;*/
	background-size: 20%;
	padding-left: 60px;
	overflow: hidden;
}
#chi_box #fb {
	width: 100%;
	height: 100% !important;
}

/*=====================================
top altri
=====================================*/

#vino {
  bottom: 10px;
}
#cinq {
	bottom: 10%;
}



}