#logo { width: 100%;
        text-align: center;
        margin-top: 5%;
        margin-bottom: 5%; }

#logo img { width: 100%;
            transform: rotate(-3deg);
            -ms-transform: rotate(-3deg); } 

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: whitesmoke ;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {  font-family: 'Raleway', cursive;
              text-decoration: none;
              font-weight: bold;
              color: black;
              font-size: 13pt;
              line-height: 50px;
              text-align: center;
              padding-left: 20px;
              padding-right: 20px; 
              border-bottom: dotted 1px;
              border-color: rgb(205, 205, 205);
              transition: opacity .2s ease-in-out;
              -moz-transition: opacity .2s ease-in-out;
              -webkit-transition: opacity .2s ease-in-out; 
              z-index: 2; 
              display: block;
              transition: 0.3s; } 

.sidebar a:hover {
  color: white;
  text-shadow: 0px 0px 10px #FFF;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(162,0,255,1) 0%, rgba(218,0,255,1) 0%, rgba(122,8,141,1) 100%); }

.sidebar .closeMenu {
  position: absolute;
  top: 0;
  height: 60px;
  width: 210px;
  font-size: 36px;
}

.openMenu {
  position: fixed;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  background-color: white;
  color: black;
  top: 10px;
  padding: 10px 15px;
  border: none;
  z-index: 1;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

.content { position: absolute;
           margin-left: 5%;
           margin-right: 5%; }

#quote { position: absolute; }  
         
.content h1 { font-family: 'Raleway', cursive; 
              font-size: 15pt;
              font-variant: small-caps; }

.content a { text-decoration: none;
             color: grey; }

.content a:hover { color: black;
                   text-shadow: 0px 0px 10px purple; }

.content p { font-family: 'Montserrat', cursive; 
             font-size: 13pt; 
             color: black; }

h2 { font-family: 'Montserrat', cursive; 
     font-size: 15pt;
     font-weight: lighter; }

blockquote { margin-bottom: 10%; }

.content_Select { position: fixed;
                  margin-left: 5%;
                  margin-right: 5%;
                  background-color: whitesmoke;
                  display: inline;
                  font-family: 'Raleway', cursive; 
                  font-size: 13pt;
                  padding: 2%;
                  border-radius: 20px; }

#select1 { left: 270px; 
           right: 15px; 
           display: inline-block;}

#select2 { left: 270px; 
           right: 15px;
           display: inline-block; }

#select1 select { background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(162,0,255,1) 0%, rgba(218,0,255,1) 0%, rgba(122,8,141,1) 100%); 
                  font-family: 'Montserrat', cursive;
                  border-radius: 10px;
                  padding: 0.5%;
                  color: white; 
                  font-weight: bold;
                  font-size: 10pt; }

#select2 select { background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(162,0,255,1) 0%, rgba(218,0,255,1) 0%, rgba(122,8,141,1) 100%);
                  font-family: 'Montserrat', cursive;
                  border-radius: 10px;
                  padding: 0.5%;
                  color: white;
                  font-weight: bold;
                  font-size: 10pt; }

#allResults { position: absolute;
              top: 11px;
              width: 47%;
              margin-left: 47%;
              margin-right: 5%;
              display: inline;
              font-size: 12pt;
              font-family: 'Raleway', cursive;
              color: black; 
              z-index: -1; }

p#Song { font-family: 'Raleway', cursive;
         font-variant: small-caps;
         font-size: 13pt; }

iframe#Link { width: 99%; 
              height: 300px; }

p#Song { text-align: center; }

div[id^="result"] { padding: 2%;
                 background-color: whitesmoke;
                 margin-top: 2%;
                 margin-bottom: 2%;
                 border-radius: 20px; }

input#search { margin-left: 330px;
               font-size: 13pt;
               font-family: 'Raleway', cursive;
               font-variant: small-caps;
               font-weight: bold;
               color: white;
               border-radius: 20px;
               border-color: white;
               background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(162,0,255,1) 0%, rgba(218,0,255,1) 0%, rgba(122,8,141,1) 100%); }

input#search:hover { text-shadow: 0px 0px 10px #FFF; }

div#graphic, div#graphics { margin: 5%;
                            width: 1100px;
                            height: 600px; }

form { background-color: whitesmoke;
       padding: 2%;
       border-radius: 20px; }

input[name=song], input[name=nome], input[name=mail] { width: 50%;
                                                       padding: 0.5%;
                                                       font-family: 'Montserrat', cursive;
                                                       border-radius: 10px;
                                                       color: black; 
                                                       font-weight: bold;
                                                       font-size: 10pt; }

input[name=song] { font-family: 'Montserrat', cursive;
                   border-radius: 10px;
                   color: black; 
                   font-weight: bold;
                   font-size: 10pt; }

textarea[name=message] { width: 97%;
                         padding: 1%;
                         font-family: 'Montserrat', cursive;
                         border-radius: 10px;
                         color: white; 
                         font-weight: bold;
                         font-size: 10pt; }

input[name=submit], input[name=reset] { font-size: 13pt;
                                        font-family: 'Raleway', cursive;
                                        font-variant: small-caps;
                                        font-weight: bold;
                                        color: white;
                                        border-radius: 20px;
                                        border-color: white;
                                        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(162,0,255,1) 0%, rgba(218,0,255,1) 0%, rgba(122,8,141,1) 100%); }

input[name=submit]:hover, input[name=reset]:hover { text-shadow: 0px 0px 10px #FFF; }

textarea { width: 98%;
           height: 150px;
           color: white;
           font-family: 'Montserrat', cursive;
           font-size: 9pt;
           border-radius: 10px;
           color: white;
           font-weight: bold;
           line-height: 18px;
           background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(162,0,255,1) 0%, rgba(218,0,255,1) 0%, rgba(122,8,141,1) 100%);}                                    

/* - - - R E S P O N S I V E - - - */

/* FLESSIBILE 1024px */
@media screen and (max-width: 1024px) {

  #main { margin-top: 50px; }

  .sidebar {padding-top: 250px;}

  .sidebar a { font-family: 'Raleway', cursive;
                text-decoration: none;
                font-size: 15pt;
                line-height: 50px;
                padding-left: 2px;
                padding-right: 2px; 
                border-bottom: dotted 1px;
                border-color: #d0d0d0;
                transition: opacity .2s ease-in-out;
                -moz-transition: opacity .2s ease-in-out;
                -webkit-transition: opacity .2s ease-in-out; 
                z-index: 2; }

  .openMenu { position: fixed;
              font-size: 20px;
              font-weight: bold;
              cursor: pointer;
              background-color: whitesmoke;
              color: black;
              top:20px;
              padding: 5px 10px;
              border: none;
              border-radius: 10px;
              z-index: 1; }

  .sidebar .closeMenu { position: absolute;
                      top: 200px;
                      height: 50px;
                      width: 100%;
                      font-size: 36px; }

  .content { position: absolute; }

  .content p { font-family: 'Raleway', cursive; 
               font-size: 12pt; 
               color: black; }

  .content img { height: 100%;
                 width: 100%; }

  .content_Select { position: absolute;
                    margin-left: 5%;
                    margin-right: 5%;
                    background-color: whitesmoke;
                    display: inline;
                    font-family: 'Raleway', cursive;
                    font-size: 11pt;
                    border-radius: 20px;
                    width: 82%; }

  #select1 select { width: 200%; }

  #select2 select { width: 200%; }

  input#search { margin-left: 90%; }

  #allResults { top: 400px;
                margin-left: 7%;
                margin-right: 7%;
                width: 86%;
                font-size: 11pt; }


}

/* iPAD MINI */
@media screen and (max-width: 768px) {

  #main { margin-top: 50px; }

  .sidebar {padding-top: 250px;}

  .sidebar a { font-family: 'Raleway', cursive;
                text-decoration: none;
                font-size: 15pt;
                line-height: 50px;
                padding-left: 2px;
                padding-right: 2px; 
                border-bottom: dotted 1px;
                border-color: #d0d0d0;
                transition: opacity .2s ease-in-out;
                -moz-transition: opacity .2s ease-in-out;
                -webkit-transition: opacity .2s ease-in-out; 
                z-index: 2; }

  .openMenu { position: fixed;
              font-size: 20px;
              font-weight: bold;
              cursor: pointer;
              background-color: whitesmoke;
              color: black;
              top:20px;
              padding: 5px 10px;
              border: none;
              border-radius: 10px;
              z-index: 1; }

  .sidebar .closeMenu { position: absolute;
                      top: 200px;
                      height: 50px;
                      width: 100%;
                      font-size: 36px; }

  .content { position: absolute; }

  .content p { font-family: 'Raleway', cursive; 
               font-size: 12pt; 
               color: black; }

  .content img { height: 100%;
                 width: 100%; }

  .content_Select { position: absolute;
                    margin-left: 5%;
                    margin-right: 5%;
                    background-color: whitesmoke;
                    display: inline;
                    font-family: 'Raleway', cursive;
                    font-size: 11pt;
                    border-radius: 20px;
                    width: 82%; }

  #select1 select { width: 100%; }

  #select2 select { width: 100%; }

  input#search { margin-left: 540px; }

  #allResults { top: 400px;
                margin-left: 7%;
                margin-right: 7%;
                width: 86%;
                font-size: 11pt; }

  div#graphic, div#graphics { margin: 0;
                              width: 650px;
                              height: 650px; }


}

/* FLESSIBILE 568px */
@media screen and (max-width: 568px) {

  #main { margin-top: 50px; }

  .sidebar {padding-top: 250px;}

  .sidebar a { font-family: 'Raleway', cursive;
                text-decoration: none;
                font-size: 15pt;
                line-height: 50px;
                padding-left: 2px;
                padding-right: 2px; 
                border-bottom: dotted 1px;
                border-color: #d0d0d0;
                transition: opacity .2s ease-in-out;
                -moz-transition: opacity .2s ease-in-out;
                -webkit-transition: opacity .2s ease-in-out; 
                z-index: 2; }

  .openMenu { position: fixed;
              font-size: 20px;
              font-weight: bold;
              cursor: pointer;
              background-color: whitesmoke;
              color: black;
              top:20px;
              padding: 5px 10px;
              border: none;
              border-radius: 10px;
              z-index: 1; }

  .sidebar .closeMenu { position: absolute;
                      top: 200px;
                      height: 50px;
                      width: 100%;
                      font-size: 36px; }

  .content { position: absolute; }

  .content p { font-family: 'Raleway', cursive; 
               font-size: 12pt; 
               color: black; }

  .content img { height: 100%;
                 width: 100%; }


    .content_Select { position: absolute;
                    margin-left: 8%;
                    background-color: whitesmoke;
                    display: inline;
                    font-family: 'Raleway', cursive;
                    font-size: 11pt;
                    border-radius: 20px;
                    width: 82%; }
  
  input#search { margin-left: 82%;}
  
    #allResults { top: 330px;
                margin-left: 10.5%;
                width: 86%;
                font-size: 11pt; }
  

}

/* iPHONE 6/7/8 iOS 11 */
@media screen and (max-width: 375px) {

  #main { margin-top: 50px; }

  .sidebar { padding-top: 200px; }

  .sidebar a { font-family: 'Raleway', cursive;
                text-decoration: none;
                font-size: 15pt;
                line-height: 50px;
                padding-left: 5px;
                padding-right: 5px; 
                border-bottom: dotted 1px;
                border-color: #d0d0d0;
                transition: opacity .2s ease-in-out;
                -moz-transition: opacity .2s ease-in-out;
                -webkit-transition: opacity .2s ease-in-out; 
                z-index: 2; }

  .openMenu { position: fixed;
              font-size: 20px;
              font-weight: bold;
              cursor: pointer;
              background-color: whitesmoke;
              color: black;
              top:20px;
              padding: 5px 10px;
              border: none;
              border-radius: 10px;
              z-index: 1; }

  .sidebar .closeMenu { position: absolute;
                      top: 150px;
                      height: 50px;
                      width: 100%;
                      font-size: 36px; }

  .content { position: absolute; }

  .content p { font-family: 'Raleway', cursive; 
               font-size: 12pt; 
               color: black; }

  .content img { height: 100%;
                 width: 100%; }

  .content_Select { position: absolute;
                    margin-left: 1%;
                    margin-right: 1%;
                    background-color: whitesmoke;
                    display: inline;
                    font-family: 'Raleway', cursive;
                    font-size: 11pt;
                    border-radius: 20px;
                    width: 82%; }

  #select1 select { width: 100%; }

  #select2 select { width: 100%; }

  input#search { margin-left: 230px; }

  #allResults { top: 314px;
                margin-left: 5%;
                margin-right: 5%;
                width: 86%;
                font-size: 11pt; }
 
 div#graphic, div#graphics { margin: 0;
                             width: 290px;
                             height: 350px; }

 svg.highcharts-root { font-family: 'Raleway', cursive;
                       font-size: 12pt; }
 
}

/* iPHONE 5/SE */
@media screen and (max-width: 320px) {

  #main { margin-top: 50px; }

  .sidebar { padding-top: 200px; }

  .sidebar a { font-family: 'Raleway', cursive;
                text-decoration: none;
                font-size: 15pt;
                line-height: 50px;
                padding-left: 5px;
                padding-right: 5px; 
                border-bottom: dotted 1px;
                border-color: #d0d0d0;
                transition: opacity .2s ease-in-out;
                -moz-transition: opacity .2s ease-in-out;
                -webkit-transition: opacity .2s ease-in-out; 
                z-index: 2; }

  .openMenu { position: fixed;
              font-size: 20px;
              font-weight: bold;
              cursor: pointer;
              background-color: whitesmoke;
              color: black;
              top:20px;
              padding: 5px 10px;
              border: none;
              border-radius: 10px;
              z-index: 1; }

  .sidebar .closeMenu { position: absolute;
                      top: 150px;
                      height: 50px;
                      width: 100%;
                      font-size: 36px; }

  .content { position: absolute; }

  .content p { font-family: 'Raleway', cursive; 
               font-size: 12pt; 
               color: black; }

  .content img { height: 100%;
                 width: 100%; }

  .content_Select { position: absolute;
                    margin-left: 1%;
                    margin-right: 1%;
                    background-color: whitesmoke;
                    display: inline;
                    font-family: 'Raleway', cursive;
                    font-size: 11pt;
                    border-radius: 20px;
                    width: 82%; }

  #select1 select { width: 100%; }

  #select2 select { width: 100%; }

  input#search { margin-left: 190px; }

  #allResults { top: 314px;
                margin-left: 5%;
                margin-right: 5%;
                width: 86%;
                font-size: 11pt; }
 

}