@font-face { font-family: "spinnaker_regular"; src: url('../font/spinnaker_regular.ttf'); }

@font-face { font-family: "oldstandard_italic"; src: url('../font/oldstandard_italic.ttf'); }

body, a { cursor: default; }

img { border: 0; }

.logo {position: absolute; left: 50%; margin-left: -260px; top:515px;}

.sfondo {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 50px;
left: -360px;
right: 0;
width: 287px;
z-index: -1;
}

/* Overlay menu */            
.overlay{
position:absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background:rgba(0,0,0,0);
z-index:-1;
}

ul#main-list{
top: 538px;
left: 50%;
margin: 0 0 0 -95px;
position: absolute;
font-family: "spinnaker_regular"; font-size: 11px; text-transform: uppercase;
letter-spacing: 2px;
opacity: 5;
-moz-opacity: 0.5;
filter: "alpha(opacity=50)";
}

li.brandidentity, li.websites, li.art, li.giornalismo, li.autore{
display: inline;}

ul#main-list li {
padding-left: 5px;
}

ul#main-list li a.main-list-item {
width:90px;
height:20px;
padding:8px 5px 6px 5px;
color:#FFF;
text-decoration: none;
background-color: rgba(0,0,0,1);
border-radius: 2pt;
-moz-border-radius: 2pt;
-ms-border-radius: 2pt;
-o-border-radius: 2pt;
-webkit-border-radius: 2pt;
}

ul.sublist,.overlay,ul#main-list li,ul#main-list li a{
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}

ul#main-list:hover + .overlay{
background:rgba(0,0,0,0.5);
}

ul#main-list li:hover ul.sub-list{
visibility:visible;
opacity:1;
-moz-opacity: 0.1;
filter: "alpha(opacity=10)";
padding:16px 10px 10px 10px;
}

ul#main-list li.art:hover ul.sub-list{
padding: 0;
}

ul#main-list li:hover a.main-list-item{
background:rgba(255,255,255,1);
color:#000;
border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
-ms-border-top-right-radius: 0;
-o-border-top-right-radius: 0;
-webkit-border-top-right-radius: 0;
border-top-left-radius: 0;
-moz-border-top-left-radius: 0;
-ms-border-top-left-radius: 0;
-o-border-top-left-radius: 0;
-webkit-border-top-left-radius: 0;
}

li.sub-head{
text-indent: -10px;
margin-top:4px;
display: block;
color: #666;
font-family: "oldstandard_italic";
font-weight:normal;
font-style: italic;
font-size: 13pt;
letter-spacing: 2px;
text-transform: none;
}

.sub-div{
overflow:hidden;
width: 417px;
height: 200px;
-webkit-transition: all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out ;
transition: all .5s ease-out ;
}

.art .sub-div{
overflow:hidden;
width: 935px;
height: 490px;
}

ul.sub-list{
border-top-right-radius: 2pt;
-moz-border-top-right-radius: 2pt;
-ms-border-top-right-radius: 2pt;
-o-border-top-right-radius: 2pt;
-webkit-border-top-right-radius: 2pt;
border-top-left-radius: 2pt;
-moz-border-top-left-radius: 2pt;
-ms-border-top-left-radius: 2pt;
-o-border-top-left-radius: 2pt;
-webkit-border-top-left-radius: 2pt;
position:absolute;
top:-234px;
left:45px;
z-index:3;
visibility:hidden;
background:rgba(255,255,255,1);
margin:0 0 0 0;
opacity:0;
-moz-opacity: 0;
filter: "alpha(opacity=0)";
}

.art ul.sub-list{
position:absolute;
top:-498px;
left:-453px;
overflow:hidden;
}

ul.sub-list li a{
padding:0;
background:none;
color:#000;
height:auto;
width:auto;
}

ul.sub-list ul{
float:left;
overflow:hidden;
list-style: none;
}

ul.sub-list ul li a{
color: #222222;
display: block;
font-size: 11px;
margin: 0;
padding: 2px 4px 2px 4px;
text-decoration: none;
height:auto;
clear:both;
}

ul.sub-list ul li a:hover{
color: #fff;
background:#000;
border-radius: 2pt;
-moz-border-radius: 2pt;
-ms-border-radius: 2pt;
-o-border-radius: 2pt;
-webkit-border-radius: 2pt;
}

.timeline {position: absolute; top: 40px; left: 50px;}

.brandidentity .scheda1_par {width: 200px; position: absolute; top: 60px; left: 30px; z-index: -1; line-height: 1.6em;}

.brandidentity .scheda2_par {width: 200px; position: absolute; top: 60px; left: 30px; z-index: -1; line-height: 1.6em;}

.brandidentity .scheda3_par {width: 200px; position: absolute; top: 65px; left: 13px; z-index: -1; line-height: 1.6em;}

.brandidentity .scheda4_par {width: 200px; position: absolute; top: 65px; left: 30px; z-index: -1; line-height: 1.6em;}

.brandidentity .scheda5_par {width: 200px; position: absolute; top: 60px; left: 30px; z-index: -1; line-height: 1.6em;}

.brandidentity .scheda1_img {position: absolute; top: 60px; left: 290px;}

.brandidentity .scheda2_img {position: absolute; top: 60px; left: 270px;}

.brandidentity .scheda3_img {position: absolute; top: 20px; left: 213px;}

.brandidentity .scheda4_img {position: absolute; top: 60px; left: 270px;}

.brandidentity .scheda5_img {position: absolute; top: 55px; left: 250px;}

.art #scheda1 figure {position: absolute; bottom: -8px;}

.pubblicazioni {position: absolute; top: 30px; left: 90px;}

.personalquote {position: absolute; top: 70px; left: -10px;}

.sociallinks {position: absolute; top: 120px; left:135px;}

.sociallinks a { margin: 5px; opacity: 1;}

.sociallinks a:hover { opacity: 0.5;
filter: "alpha(opacity=0.5)";
-moz-transition: opacity 1s ease-out 1s;
-webkit-transition: opacity 1s ease-out 1s;
-o-transition: opacity 1s ease-out 1s;
-ms-transition: opacity 1s ease-out 1s;
transition: opacity 1s ease-out 1s;
}



/* Didascalie */

/* Style the figures */
figure {
  width: 935px;
  height: 510px;
  position: relative;
  display: block;
  margin: 0 auto;
  z-index: 3;
}

/* Style the figure captions, hiding them by default */

figcaption {
  border-radius: 2pt;
  -moz-border-radius: 2pt;
  width: auto;
  color: #fff;
  opacity: 0;
   -moz-opacity: 0;
filter: "alpha(opacity=0)";
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  text-transform: none;
}

figcaption.sfondo_caption {
  position: absolute;
  left: 390px;
  bottom: 30px;
}

.art figcaption {
  position: absolute;
  left: 490px;
  bottom: 50px;
  background-color: rgba(0,0,0,.5);
}
.art #scheda1 figcaption {
left: 640px;
width: 260px;
}

.art #scheda2 figcaption {
}

.art #scheda3 figcaption {
left: 520px;
width: 350px;
}

.art #scheda4 figcaption {
left: 560px;
}

/* Display the captions on hover */
figure:hover figcaption {
 opacity: 1;
-moz-opacity: 0.1;
filter: "alpha(opacity=10)";
}

/* Add padding and margin to the caption contents */
figcaption * {
  padding: 0 15px;
  margin: 0;
}

figcaption *:first-child {
  padding-top: 10px;
}
figcaption *:last-child {
  padding-bottom: 10px;
}

/* Give captions and headings their own font */
figcaption h1 {
font-family: "oldstandard_italic"; font-style: italic; font-weight: normal; font-size: 14pt; text-shadow:1px 1px 1px #666; }

figcaption p {
font-family: "spinnaker_regular"; font-size: 9pt; letter-spacing: 2px; margin-top: 5px; line-height: 1.5em; font-weight: normal; text-shadow:1px 1px 1px #666; }

/* Mini slideshow */

/* Basic Style/Positioning for all Pages */
.sub-list { overflow-x: hidden; } /* Hide the other pages }*/

.pages, .page, .page .backbutton, .page .nextbutton  { position: absolute; top: 0; left: 0; width: 100%;height:100%;}

.nextbutton { cursor: url('../img/right.png'), e-resize; right: 0;}

.backbutton { cursor: url('../img/left.png'), w-resize; left: 0;}

.page .backbutton, .page .nextbutton { width: 50%; height: 100%; z-index: 4; }

.page .nextbutton { left: auto; right: 0; }

/* Pages */
#scheda2 { left: 100%; }

#scheda3 { left: 200%; }

#scheda4 { left: 300%; }

#scheda5 { left: 400%; }

/* Slide Effect */
.pages {
-webkit-transition: left .8s;
-moz-transition: left .8s;
-o-transition: left .8s;
-ms-transition: left .8s;
transition: left .8s;
}

#brandidentity1:target .pages, #art1:target .pages { left: 0%; }

#brandidentity2:target .pages, #art2:target .pages { left: -100%; }

#brandidentity3:target .pages, #art3:target .pages { left: -200%; }

#brandidentity4:target .pages, #art4:target .pages { left: -300%; }

#brandidentity5:target .pages { left: -400%; }