@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@GAP:15px;
@WHITE:#FBFBFB;
@BACKGROUND:#45494E;
@COLOR1:#FDA085;@COLOR1g:#F6D365;
@COLOR2:#BFF098;@COLOR2g:#6FD6FF;
@COLOR3:#EA8D8D;@COLOR3g:#A890FE;
@COLOR4:#D8B5FF;@COLOR4g:#1EAE98;
@COLOR5:#C6EA8D;@COLOR5g:#FE90AF;

*{
  box-sizing:border-box;
}

:root{
  --accent-color:@BACKGROUND;
  --gradient-color:@WHITE;
}

a:focus{
  outline:none;
  position:relative;
  &:after{
    width:50px;
  }
}

a:after{
  content:"";
  background:@WHITE;
  position:absolute;
  bottom:5px;
  left:@GAP;
  height:3px;
  width:0;
  transition:.5s;
  transition-delay:.2s;
}

body{
  background:@BACKGROUND;
  font-family:"Varela Round",Nunito,Montserrat,sans-serif;
  margin:0;padding:0;
  text-transform:capitalize;
}

.menu{
  margin:@GAP;
  > ol{
    list-style:none;
    margin:@GAP * 2 0;
    padding:0;
    
    > li{
      background:darken(@WHITE,75%);
      border-left:5px solid var(--gradient-color);
      margin-bottom:1px;
      position:relative;
      transition:.5s;
      &:nth-child(1){
        --accent-color:@COLOR1;
        --gradient-color:@COLOR1g;
      }
      &:nth-child(2){
        --accent-color:@COLOR2;
        --gradient-color:@COLOR2g;
      }
      &:nth-child(3){
        --accent-color:@COLOR3;
        --gradient-color:@COLOR3g;
      }
      &:nth-child(4){
        --accent-color:@COLOR4;
        --gradient-color:@COLOR4g;
      }
      &:nth-child(5){
        --accent-color:@COLOR5;
        --gradient-color:@COLOR5g;
      }
      a{
        color:@WHITE;
        display:block;
        padding:@GAP;
        position:relative;
        text-decoration:none;
        z-index:1;
        &:not(:last-child){
          &:before{
            content:"\f078";
            font-family:fontAwesome;
            font-size:.75em;
            line-height:50px;
            position:absolute;
            right:25px;
            top:0;
            bottom:0;
            margin:auto;
            transition:.5s;
          }
        }
      }
      &:focus,&:focus-within,&:hover{
        z-index:100;
        
        &:after{
          background:linear-gradient(to left, var(--accent-color), var(--gradient-color));
          max-width:800px;
        }
      }
      &:focus,&:focus-within{
        .sub-menu{
          max-height:500px;
        }
        a:before{
          transform:rotate(-180deg);
        }
      }
      &:after{
        background:darken(@WHITE,75%);
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        transition:.5s;
        max-width:0;
        overflow:hidden;
      }
    }
    .sub-menu{
      border-left:1px solid @WHITE;
      margin-left:@GAP*1.5;
      list-style:none;
      max-height:0px;
      overflow:hidden;
      padding-left:@GAP/2;
      position:relative;
      transition:.5s;
      z-index:1;
      li{
        font-size:.9em;
        &:hover,a:focus{
          background:fade(darken(@WHITE,75%),30%);
        }
        a:after{
          bottom:5px;
          height:1px;
        }
        a:hover,a:focus{
          &:after{
            width:15px;
          }
        }
      }
    }
  }
}

@media (min-width:600px){  
  a:focus,a:hover{
    position:relative;
    &:after{
      width:50px;
    }
  }
  
  a:after{
    left:0;
    right:0;
    margin:auto;
  }

  .menu{
    margin:0;
    margin-top:40vh;
  }
  .menu > ol{
    display:block;
    max-width:none;
    text-align:center;
    > li{
      border-top:5px solid var(--accent-color);
      border-left:0;
      display:inline-block;
      margin-left:-5px;
      vertical-align:top;
      width:120px;
      &:hover,&:focus,&:focus-within{
        &:after{
          background:linear-gradient(to bottom, var(--accent-color), var(--gradient-color));
          border-radius:3px;
          top:-@GAP;
          bottom:-@GAP;
          left:-@GAP;
          right:-@GAP;
        }
        
        .sub-menu{
          max-height:750px;
        }
      }
      
      a:not(:last-child){
        &:before{
          right:12.5px;
        }
      }
      
      &:hover{
        a:before{
          transform:rotate(-180deg);
        }
      }
    }
    .sub-menu{
      border-left:0;
      margin:@GAP -@GAP -@GAP;
      padding-left:0;
    }
  }
}


@media (min-width:775px){
  .menu > ol{
    > li{
      width:150px; 
      
      a:not(:last-child){
        &:before{
          right:25px;
        }
      }
    }
  }
}


/* Elementi di base */
html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {color: #ce3018;}
a:hover {color: #C60;}

body {
	padding: 0
	background-image: url(.jpg);
	border-top: 3px solid #4B0082;
	color: #444;
	font: 75%/1.5em "Myriad Pro","Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
}



li {list-style: none;}

h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
}




h1,h2,h3 {padding-top: 6px;}

/* Elementi personalizzati
   Questi elementi servono a collocare correttamente 
   gli elementi principali all'interno della gabbia strutturale */

.clearer {clear: both;}

.left {float: left;}

.right {float: right;}

img.floatleft {
	float: left;
	margin: 5px 14px 3px 1px;
}

img.floatright {
	float: right;
	margin: 5px 1px 3px 14px;
}

/* Elementi della gabbia strutturale */
.container {
	background: ;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 10px 4px;
	width: 880px;
}

/* Elemento che incorpora l'intestazione e serve per distanziare  
   la gabbia strutturale dal bordo superiore della finestra */
.top {
	padding: 15px 10px 0;
	
}

/* Intestazione
   L'intestazione e' divisa in 2 colonne col_left e col_right */
.header {
	background: #FFF;
	font-size: 1.2em;
	height: 120px;
	margin: 0 auto;
	padding: 10px 10px 10px;
	width: 780px;
}

.header .col_left { float: left; }
.header .col_right { float: right; }

.header .col_left, .header .col_right {
	
	color: #000;
	height: 120px;	
}
.header .col_left {
	background: url(img/header-left-bg.jpg) no-repeat;
	width: 210px;
}
.header .col_right {
	overflow: auto;
	background: #FFF;
	width: 564px;
}
.header .col_left h1 {
	font: normal 2.8em "Trebuchet MS",sans-serif;
	line-height: 50px;
	text-align: left;	
	padding: 0 16px;
}
.header .col_right p,.header .col_right h2 {padding: 0 16px;}
.header .col_right h2 {padding-top: 20px; font: normal 1.6em "Trebuchet MS",sans-serif;}





/* Corpo Principale */
.main {
	border-top: 4px solid #4B0082;
	;
}


/* Contenuti - Colonna a destra della pagina */
.content {
	float: right;
	margin: 10px 0;
	padding: 0 16px;
	width: 600px;
}
.content .descr {
	color: #664;
	font-size: 0.9em;
	margin-bottom: 6px;
}
.content li {
	list-style: circle;
	line-height: 1.3em;
	margin-left: 18px;
}

.content h3 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
}

.content p {
	font-size: 1em;
	line-height: 1.5em;
}

.content .box {
	
	border: 1px solid #EEE;
	border-left: 6px solid #4B0082;
	color: #666;
	display: block;
	font: normal 1em Tahoma,sans-serif;
	line-height: 1.6em;
	margin-bottom: 12px;
	padding: 8px 10px;
	white-space: pre;
}


/* Elemento che incorpora l'intestazione e serve per distanziare  
   la gabbia strutturale dal bordo superiore della finestra */
.bottom {
	padding: 0 10px 50px;
}

/* Pie' di Pagina, chiusura pagina */
.footer {
	background:#FFF;
        border: 1px solid #EEE;
	margin: 0 auto;
	padding: 10px 10px 5px;
	width: 531px;
	color: #4B0082;
	font-size: 0.9em;
	font-weight: normal;
	line-height: 35px;
	text-align: center;
}


.footer a,.footer a:hover {color: #444;}


/* Menu Navigazione */


#menu {
    width: 700px;
    margin: 15px auto;
    padding: 0;
}
 
#menu ul {
    padding: 0;
    margin: 0;
}
 
#menu li {
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0 5px;
     
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}
 
#menu li a {
    width: 120px;
    line-height: 50px;
    padding: 5px 13px;
    display: block;
    text-decoration: none;
    text-align: center;
    background-color: #FFFFFF;
    color: purple;
}
 
#home { background: url("img/home.png") no-repeat no-repeat 10px 7px; }
#chisiamo { background: url("img/rss.png") no-repeat no-repeat 10px 7px; }
#photo { background: url("img/sezioni.png") no-repeat 10px 7px; }
 
 
#home:hover { 
    border-bottom: 3px solid #800080;  
}
 
#chisiamo:hover { 
    border-bottom: 3px solid #800080; 
}
 
#photo:hover { 
    border-bottom: 3px solid #800080; 
}
 
#menu li a:hover{
    text-shadow: 0px 0px 1px #FFF;
    background-color: white;
}
 
#menu ul li:hover {
    transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1); /* IE 9 */
    -webkit-transform: scale(1.1, 1.1); /* Safari and Chrome */
}
 
#menu ul li ul li:first-child {
    margin-top: 3px;
}
 
#menu ul li ul li:last-child:after, ul li ul li:last-child:before {
    display: none;
}
 
#menu ul ul {
    position: absolute;
    top: 50px;
    right: -1px;
    visibility: hidden;
}
 
#menu ul li:hover ul{
    visibility: visible;
}
 
#menu ul li ul li:before {
    content: "";
    border-color: transparent #000000 transparent transparent;
    border-style: solid;
    border-width: 13px;
    height: 0px;
    width: 0px;
    position: absolute;
    left: -8px;
    top: 38px;
    z-index: -1;
}
 
#menu ul li ul li:after {
    content: "";
    border-color: transparent  transparent transparent #000000;
    border-style: solid;
    border-width: 13px;
    height: 0px;
    width: 0px;
    position: absolute;
    right: -8px;
    top: 38px;
    z-index: -1;
}



/* MENU MARCHI

 
#home2 { background: url("img/home.png") no-repeat no-repeat 10px 7px; }

 
 
#home2:hover { 
    border-bottom: 3px solid #32CD32;  
}