/************************************************************************Body*******************************************************************************/        
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");     


* {
    box-sizing: border-box;
    
     margin: 0;
  }
  
html {
        
 /* box-sizing: border-box; 
 overflow-y: scroll;*/
 scroll-behavior: smooth;

     
        }

a:link, a:visited {
            
 text-decoration: none!important;
 cursor: pointer;
 color: #FFFFF0;/*rgb(236, 161, 166);*/
}
                
 
 a:hover {
    color: #009775;              
 }

 a:active {
    opacity: 0.5 ;
 }

        
            
body {
    
 background-color: #2A2C2D;
    color: #FFFFF0;/*#eca1a6 ;*/
              
    font-family: 'Staatliches', sans-serif;
              font-variant:small-caps; 
              /*  text-transform: uppercase;
                 line-height: 1.5em; */
               letter-spacing: 0.15em;
                /*padding: 0;*/
                margin: 0;
               text-align: center;
              /* height: 200vh;*/
              
            overflow-y: scroll;
                               }

h1 {
    font-size: 5em;
}

h3 {
    padding: 1rem;
    padding-bottom: 0;
}

            p {
                text-align: center;
                margin: 0;
                font-size: 2em;
                padding: 10% 10% 0% 10%;
                
            }

            ul {
                text-align: center; 
                 list-style-type: none; 
                padding: 0; 
                 margin: 0;
            }
                         
            li {
                
              display: inline;
              
                          
            } 
            
            .giglist {
               display: block!important;
            }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++Barra laterale*************************************************************************/

.sidepanel  {
    width: 0;
    position: fixed;
    z-index: 2;
    height: 100vh;
    top: 0;
    left: 0;
    background-color:#009775;
    overflow: scroll;
    transition: 0.5s;
    /*padding-top: 30px;*/
   
  }
  
  .sidepanel a {
    padding: 20px 8px 20px 8px;
    text-decoration: none;
    margin: auto;
   height: 25%; 
    color: #FFFFF0;
    display: block;
    transition: 0.3s;
  /*line-height: 0.9em;*/
    border-style: solid;
    border-width: 0 0 2px 0;
    
      
  }
  
  .sidepanel a:hover {
    color: #2A2C2D;
  }

/*****************************************************************************Header******************************************************************************/         

header {
    width: 100%;
    height: auto;
    position: fixed;
    font-size: xx-large;
    padding-top: 0;
    padding-bottom: 0.5em;
   z-index: 1;
}

.background-header {
    background-color: rgba(42,44,45,1);
    border-bottom: #FFFFF0 solid 3px;
    transition: 1s;
}
            
#logo {
    display: block;
    float:left;
    text-align: left;
    color: #009775;
    background-image: url("../logos/screaman-2.png"); 
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
    position: absolute;
    top: 0;
    font-size: 2em;
    padding-top: 5vh;
    margin-left: 2vh;
    line-height: 0.8em!important;
}

#logo a {
    color: #009775;
}

#logo-mobile {
    display: none;
    float: right;
    width: 150px;
    color: #009775;
    background-image: url("../logos/screaman-2.png"); 
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
    top: 0;
    font-size: 1em;
    padding-top: 10vh;
    margin-right: 2vw;
    line-height: 0.8em!important;
    cursor: pointer;
    transition: 0.5s;

}

#logo-mobile:hover {
        color: #009775;
}


#links {
    float: right; 
    margin-top: 3vh;
}

#links ul{
     padding: 3vh 1vh 3vh 3vh;
   
    }

    #links li{
        padding: 3vh 2vh 3vh 4vh;
      
       }


#about-link > span,
#contact-link-2 > span,
#gigs-link-3 > span {
  /* Styles for the child span element */
  display: inline-block;
  padding: 10px;
  transition: background-color 0.3s ease;
}

.link-active > span {
  /* Styles to apply after scrolling 100vh */
  color: #009775;
}

.link-inactive > span {
    /* Styles to apply after scrolling 100vh */
    color: #FFFFF0;
  }

/*
#contact-link-2 > span {
  /* Styles to apply after scrolling 200vh 
  color: #009775;;
}

#gigs-link-3 > span {
  /* Styles to apply after scrolling 300vh 
  color: #009775;;
}  */

.link-active {
    color: #009775;
}

.link-inactive {
    color: #FFFFF0;
}

/*****************************************************************************Main******************************************************************************/
#main {
    
}


.section {
    min-height: 100vh;
    max-width: 100vw;
    align-content: center;
    margin: auto;
    padding-top: 20vh;

}

.section h1 {
    color: #009775;
}

#home {
    background-image: url("../img/home_pic_birds.jpg"); 
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    font-size: xx-large;
    width: 100vw;
    height: 100vh;
    position: fixed;
  /* top: 0; 
    z-index: 1;*/
}

#sub-main {
    position: relative;
    top: 100vh;
    background-color: rgba(42, 44, 45, 0.7);
   /* background-color: transparent; */
    transition: 0.5s;

}

#about {

}

#social {
    position: absolute;
    bottom: 5%;
    max-width: 80%;
    height: auto;
    /*background-color: rgba(155, 155, 155, 0.5);*/
    text-align: center;
    position: absolute;
   /* top: 50%; */
    left: 50%;
    transform: translate(-50%, -50%);
    }

#social li {
    padding: 1ch;
    font-size: 0.7em;
}

#contact {
    height: 100vh;
}
    #contact p {
        font-size: 3em;
    }

    #contact li {
        padding: 0 0.5em 0 0.5em;

    }

    #gigs ul {
        padding: 0.5em 10% 0 10%;
       /* padding-top: 0.5em;
        padding-bottom: 0; */
    }

#gigs li {
     padding: 0.5em 0 0 0;
    /* padding-top: 0.5em;
     padding-bottom: 0; */
}


/********************************************************************Footer*****************************************************************************/

footer {
    padding-top: 10vh;

    width: 100%;
}
                                                                    

     
 /************************* ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** /           

/********************************************************************Smartphone version*****************************************************************************/
                                                                    

          
@media only screen and (max-height: 700px) {

}

@media only screen and (min-width: 801px) {

        .sidepanel {
            visibility: hidden;
        }
}

@media only screen and (min-width: 1000px) {

    .sidepanel {
        visibility: hidden;
    }
}





@media only screen and (max-width: 800px) {
                
    #logo, #links {
        display: none;
    }

    #logo-mobile {
        display: block;
        margin: auto;
        float: none;
        
    }

    
    
    
    


    .section {
        padding-top: 25vh;
    }

    #social{
        font-size: 0.5em;
        bottom: 5%;
        width: 100%;
    }

    #social li {
        padding: 1ch;
    }

    #contact  p {
        font-size: 1.5em;
    }


      
    
            }



@media only screen and (max-width: 600px) {
     
               
            } 

@media only screen and (max-width: 426px) {
                
                
        

}


@media only screen and (max-width: 400x) {
                
                
    
               
            }