*{              margin: 0; padding: 0;}
html, body{     width: 100%; height: 100%; overflow: hidden; background-color: #202020; -webkit-overflow-scrolling: touch; font-family: 'Roboto', sans-serif; font-weight: 200; font-size: 13px; line-height: 30px; color: #CABA9F;}
a img{          border: none;} a{text-decoration: none; color: inherit;} p, div{cursor: default; text-align: justify;} ul{list-style: none;margin:0px;padding:0px;}

#home{          position: absolute; top: 50%; left: 50%; display: none; height: 150px; width: 519px; margin: -82px -259.5px; cursor: pointer;}
#line{          position: absolute; left: 50%; top: 50%; width: 0%; height: 0px; border-bottom: 1px solid #CABA9F; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s;}
.line{          position: absolute; top: 50%; width: 100%; height: 0px; border-bottom: 1px solid #CABA9F;}
#credits{       position: absolute; bottom: 50%; right: 10%; margin-bottom: -5px; color: #B17F49;}

/* SLIDER PAGE */

#page{          position: absolute; display: none; background: #202020;
                width: 100%; height: 100%;
		overflow: hidden;}
#page>li{	position: relative; float: left;
		width: 20%; height: 100%;
                transition: all 0.6s;-webkit-transition: all 0.6s;-moz-transition: all 0.6s;-o-transition: all 0.6s;}
#page:hover>li{ width: 9%;}
#page>li:hover{ width: 64%;}
#page>li:hover .index{width: 15%;}

/* PANELS */
 
.panel{		height: 100%; overflow: hidden;}
.index{         z-index: 2; position: relative; height: 100%; width: 100%; float: left; background: #202020;
                transition: all 0.7s ;-webkit-transition: all 0.7s;-moz-transition: all 0.7s;-o-transition: all 0.7s;}
.content{       z-index: 1; position: relative; height: 100%; background: #202020;}
.square{        position: absolute; top: 10%; left: 15%; overflow-x: scroll; background: #202020;
                width: 75%; height: 80%; border: 1px solid #CABA9F;}

.link{          width: 35%; position: absolute; bottom: 50%; left: 4px; visibility: visible;}
.link-h{        width: 35%; position: absolute; bottom: 50%; left: 4px; visibility: hidden;}
.links{         width: 25%; position: absolute; bottom: 50.3%; left: 4px; visibility: hidden;}
.links-h{       width: 25%; position: absolute; bottom: 50.3%; left: 4px; visibility: hidden;}

#page>li:hover .link{width: 64%; visibility: hidden;}
#page>li:hover .link-h{width: 64%; visibility: visible;}
#page:hover .link{width: 70%;}
#page>li:hover .links-h{width: 54%;}
#page:hover .links{width: 60%;}

/* BIO */

#formazione{    padding: 20px; text-align: right;}
#formazione span{margin-right: 5px;}
#discografia{   padding: 20px; color: #B17F49;  border-bottom: 1px solid #CABA9F; border-top: 1px solid #CABA9F;
                background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2019.jpg);}
#discografia span{color: #CABA9F;margin-left: 5px;}
#biografia{     padding: 20px;}

/* GALLERIA */

#back{          background: white; background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(foto/cafeX.jpg);}
#slideshow{     overflow: scroll;}
#slideshow li{  display: inline; float: left; padding: 5px 20px;
                cursor: pointer; color: transparent;
                transition: all 0.1s;-webkit-transition: all 0.1s;-moz-transition: all 0.1s;-o-transition: all 0.1s;}
#slideshow:hover li{color: #CABA9F;}
#slideshow:hover{background-color: rgba(32,32,32,0.8); border-bottom: 1px solid #CABA9F;}
#slideshow li:hover, #slideshow:hover li.current{color: #B17F49;}

/* CAFE */

.outlink{       position: absolute; bottom: 50%; width: 30px; margin-right: -15px; margin-bottom: 4px;}
#fb{            right: 65%;}
#in{            right: 55%;}
#yt{            right: 45%;}
#at{            right: 35%;}

/* MUSICA */

.musicslider{   width: 100%; height: 100%; overflow: auto; overflow-x: hidden; line-height: normal;}
.musicslider li{   border-bottom: 1px solid #CABA9F;}
.musicslider>li>ul>li{padding: 10px; padding-left: 15px; border: none; color: #B17F49;}
.musicslider>li>ul>li:first-of-type{margin-top: 5px;}
.musicslider>li>ul{ padding-bottom: 5px;}
.musicslider>li>ul>li span{color: #CABA9F; padding-right: 15px;}
.musicslider>li>ul>li:hover{color: #CABA9F;}
.musicslider>li:last-of-type{border-bottom: none;}
.musicslider>li:first-of-type div {color: #B17F49;}
.musicslider>li div {display: block; width: 100%; padding: 15px; border-bottom: 1px solid #CABA9F; background: #202020; z-index: 999;}
.musicslider>li div a{position: relative; top: 15px; margin: 25px;}
.musicslider>li div a img {width: 30px;}
.musicslider>li.sticky div {position: absolute; top:0px; color: #B17F49;}
.sm2_button{margin-left:15px;}

.musicslider>li:first-of-type{background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2019.jpg);}
.musicslider>li:nth-of-type(2){background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2016.jpg);}
.musicslider>li:nth-of-type(3){background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2015.jpg);}
.musicslider>li:nth-of-type(4){background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2013.jpg);}
.musicslider>li:nth-of-type(5){background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2011.jpg);}

/* CONCERTI */

#concerti{      width: 100%; height: 100%; overflow: auto; overflow-x: hidden; line-height: normal; color: #CABA9F;}
#concerti li{   border-bottom: 1px solid #CABA9F;}
#concerti>li>ul>li{padding: 10px; padding-left: 15px; border: none;}
#concerti>li>ul>li:first-of-type{margin-top: 5px;}
#concerti>li>ul>li:last-of-type{margin-bottom: 5px;}
#concerti>li>ul>li:hover{color: #B17F49;}
#concerti>li:last-of-type{border-bottom: none;}
#concerti>li:first-of-type div {color: #B17F49;}
#concerti>li div {display: block; padding: 15px; border-bottom: 1px solid #CABA9F; background: #202020;}
#concerti>li.sticky div {position: absolute; top:0px; color: #B17F49;}
   

/* ------------------------------------------------------------------- MOBILE VERSION ----------------------------------------------------------------- */

#mobile{        width: 100%; height: 100%; overflow: hidden; display: none;}
#mobile>li{     position: relative; height: 20%; width: 100%; border-top: 1px solid #CABA9F;
                transition: all 0.5s ;-webkit-transition: all 0.5s ;-moz-transition: all 0.5s ;-o-transition: all 0.5s ;}
#mobile>li:first-child{border: none;}
#mobile:hover li{height: 10%;}
#mobile>li:hover{height: 60%;}
#mobile>li:hover .linkmobile{visibility: hidden;}
#mobile>li:hover .linkmobile-h{visibility: visible;}
#mobile>li:hover .content-s{visibility: visible;}

.index-s{       height: 15%; width: 100%; background-color: #202020;
                transition: all 1s ;-webkit-transition: all 1s ;-moz-transition: all 1s ;-o-transition: all 1s ;}
.content-s{     height: 85%; width: 100%; position: relative; overflow: scroll; background-color: #202020; visibility: hidden;}
.linkmobile{    position: absolute; top: 4px; left: 4%; height: 25px; visibility: visible; z-index: 3;}
.linkmobile-h{  position: absolute; top: 4px; left: 4%; height: 25px; visibility: hidden; z-index: 3;}

/* CAFE */

.index-home{    height: 100%; width: 100%;}
.index-home:hover{background-image: url('foto/cafeX.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
img.social{     position: absolute; top: 5px; height: 20px; visibility: hidden;}
#fb-s{          right: 42%;}
#in-s{          right: 30%;}
#yt-s, #prev{   right: 16%;}
#at-s, #next{   right: 4%;}
#mobile>li:hover .social {visibility: visible;}

/* MUSICA / CONCERTI / BIO */

.content-s div{ position: relative; left: 4%; right: 4%; width: 92%; text-align: justify;}
.content-s div p:first-child{padding-bottom: 20px;}
.content-s div p:first-child span {margin-right: 5px;}
.content-s div p:nth-child(2){color: #B17F49; padding-bottom: 20px; padding-top: 20px; margin-left: -4%; padding-left: 4%; width: 104%; border-bottom: 1px solid #CABA9F;
                border-top: 1px solid #CABA9F; background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2019.jpg);}
.content-s div p:nth-child(2) span {color: #CABA9F; margin-left: 5px;}
.content-s div p:last-child{padding-top: 20px; margin-bottom: 10px;}
.content-s ul>li>ul>li{position: relative; left: 4%; right: 4%; width: 92%;}
.content-s li>div{border-top: 1px solid #CABA9F; margin-left: -4%; padding-left: 4%; width: 96%; border-bottom: 1px solid #CABA9F; background: #202020; color: #B17F49;}

#musica-s>li>ul>li {color: #B17F49;}
#musica-s>li>ul>li span{color: #CABA9F; padding-right: 15px;}
#musica-s>li div a{position: relative; top: 15px; margin: 25px;}
#musica-s>li div a img {width: 30px;}
#musica-s>li:first-of-type{background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2019.jpg);}
#musica-s>li:nth-of-type(2){background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2016.jpg);}
#musica-s>li:nth-of-type(3){background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2015.jpg);}
#musica-s>li:nth-of-type(4){background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2013.jpg);}
#musica-s>li:nth-of-type(5){background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(link/back2011.jpg);}

/* GALLERIA */

.index-full{    height: 100%; width: 100%;background-color: #202020;}
.index-full:hover #slideshow-s{display: block;}
#slideshow-s{   width: 100%; height: 100%; overflow: hidden; display: none;}

/* ------------------------------------------------------------------- RESPONSIVE ----------------------------------------------------------------- */

@media screen and (max-width: 900px){
#home{          height: 100px; width: 346px; margin: -54.6px -173px; }
.link{          visibility: hidden;}
.link-h{        visibility: hidden !important;}
.links{         visibility: visible;}
#page>li:hover .links{visibility: hidden;}
#page>li:hover .links-h{visibility: visible;}
}

@media screen and (max-width: 600px){
#home, #line, #credits, #page{display: none !important;}
#mobile{        display: block;}
}