﻿#page_music { margin-top:5vh; }

#page_music h1 { position:relative;  text-align:center; font-size:2em; margin-bottom:0px; color:#ffffff; }
#page_music h2 { position:relative;  text-align:center; font-size:1.6em; margin-top:10px; margin-bottom:40px; color:#d4009b;}
#page_music h2 span { display:inline-block; text-align:center; background-color:#e6c700; padding:0px 15px 0px 15px; }

#page_music h3 { position:relative;  text-align:center; font-size:1.2em;  margin-top:20px; margin-bottom:30px; cursor:pointer; }
#page_music h3 span { display:inline-block; text-align:center; color:#fff; padding:8px 15px 10px 15px; margin:0px 15px 5px 0px; border:solid 1px #ffffff; line-height:20px; }
#page_music h3 span:hover { background-color:#000; }
#page_music h3 span.selected { background-color:#fff; color:#000; }


#page_music h1 a { font-size:1em; color:#ffffff; }
#page_music h1 a:hover { font-size:1em; color:#e6c700; }

#play_demo { display:inline-block; position:relative; left:50%; margin-left:-50px; }
#logo_lmiv { display:inline-block; position:relative; width:400px; left:50%; margin-left:-200px; }

.play_demo_play { 
    -webkit-transition:fill 0.4s ease-out;
    -moz-transition:fill 0.4s ease-out;
    -o-transition:fill 0.4s ease-out;
    transition:fill 0.4s ease-out;
    fill:#c8be00;
    cursor:pointer; }

.play_demo_play:hover { fill:#ffffff; }


 
 #logo_lmiv .lmiv_rosso {
    -webkit-transition:height 0.4s ease-out, y 0.4s ease-out;
    -moz-transition:height 0.4s ease-out, y 0.4s ease-out;
    -o-transition:fill 0.4s ease-out, y 0.4s ease-out;
    transition:height 0.4s ease-out, y 0.4s ease-out;
 }

 #logo_lmiv .lmiv_giallo {
    -webkit-transition:height 0.2s ease-out, y 0.2s ease-out;
    -moz-transition:height 0.2s ease-out, y 0.2s ease-out;
    -o-transition:fill 0.2s ease-out, y 0.2s ease-out;
    transition:height 0.2s ease-out, y 0.2s ease-out;
 }

 #logo_lmiv .lmiv_verde {
    -webkit-transition:height 0.4s ease-out, y 0.3s ease-out;
    -moz-transition:height 0.4s ease-out, y 0.3s ease-out;
    -o-transition:fill 0.4s ease-out, y 0.3s ease-out;
    transition:height 0.4s ease-out, y 0.3s ease-out;
 }

 #logo_lmiv:hover .lmiv_rosso { y:48; height:120px; }
 #logo_lmiv:hover .lmiv_giallo { y:48; height:120px; }
 #logo_lmiv:hover .lmiv_verde { y:48; height:120px; }

 .audioplayer { max-width:600px; margin: 0px auto; }
.audioplayer-bar { line-height:9px; text-align:center; }
        

/* MEDIA QUERY */
        
@media screen and (min-width: 850px) and (max-width: 1000px) , screen and (min-height: 850px) and (max-height: 1000px) {

}

@media screen and (min-width: 0px) and (max-width: 849px) , screen and (min-height: 0px) and (max-height: 849px) {

}


@media screen and (min-width: 0px) and (max-width:500px) {

    #page_music h1 { font-size:1.7em; }
    #page_music h2 { font-size:1.2em; margin-bottom:20px; }
    #page_music h2 span { padding:0px 10px 0px 10px; }

    #page_music h3 { font-size:1.0em;  margin-bottom:10px; }
    #page_music h3 span { padding:0px 10px 0px 10px; margin:0px 5px 5px 0px;}

    #logo_lmiv {
        width:300px;
        margin-left: -150px;
    }
}