/************************************************************************Body*******************************************************************************/        
            html {
                scroll-behavior: smooth;
            }

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


             a, a:visited {
                
                color: rgb(156,156,156);
                text-decoration: none;
                font-weight: 500;
                
            }
     
            
            
           body {
                
               
                background-color: rgb(99,96,92);        
               /* background-image: url(../Background/Phonograph%20needle%20slow-motion%20microscopy_1.gif);*/
                color: rgb(156,156,156);
                
                font-family: 'Roboto Condensed', sans-serif;
              /* font-variant:small-caps; 
               text-transform: uppercase; */
               letter-spacing: 0.15em;
                /*padding: 0;*/
                margin: 0;
               text-align: center;
              /* height: 200vh;*/
              
            overflow-y: scroll;
                              
            }

            p {
                text-align: center;
            }

            #p-it, #BioButton,  #catalogo, #ItaMix {
                display: block;
            }

             

            #p-en, #AboutButton, #catalog, #salesnote1, #salesnote2, #salesnote3,#salesnote4, #salesnote5, #announcement1, #announcement2, #announcement3,#announcement4, #announcement5, #action1, #action2, #action3, #action4, #action5, #EngMix {
                display: none;
            }

  

            #Services{
                display: none;
            }

            #it-btn {
                font-weight: bold;
            }

/************************************************************************Loader***************************************************************************/        

.progress 
{
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background-color:  rgb(99,96,92);
}
.bar 
{ 
  background-color:rgb(156,156,156); 
  width:0%; 
  top: 50%;
  height:5px; 
  border-radius: 3px; 
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}



      /*  #loader {

               border: 12px solid rgb(156,156,156);;
                border-radius: 50%;
                border-top: 12px solid rgb(99,96,92);;
                width: 70px;
                height: 70px;
                animation: spin 1s linear infinite;
            }
     
           
     
            @keyframes spin {
                100% {
                    transform: rotate(360deg);
                }
            }
            

             .center {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }

       /*         #loading1 {
                
                color: rgb(128,128,128);
                display: inline-block;
              /*  opacity: 0; 
                animation: loadside 2s infinite;
                -webkit-animation-name: loadside;
                -webkit-animation-duration: 2s;
                /*animation-delay: 2s; 
                -webkit-animation: fadein 5s;
                -webkit-animation-delay: 2s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                box-sizing: border-box;
                                
                }

           @-webkit-keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            }
            
            @keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            } 
                
            #loading2 {
                
                color: rgb(128,128,128);
                display: inline-block;
               /*  opacity: 0; 
                animation: loadside 2s infinite;
                -webkit-animation-name: loadside;
                -webkit-animation-duration: 2s;
                animation-delay: .2s; 
                -webkit-animation-delay: .2s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                box-sizing: border-box;
                                
                }

           @-webkit-keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            }
            
            @keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            } 
            
            #loading3 {
                
                color: rgb(128,128,128);
                display: inline-block;
               /*  opacity: 0; 
                animation: loadside 2s infinite;
                -webkit-animation-name: loadside;
                -webkit-animation-duration: 2s;
                animation-delay: .4s;                 
                -webkit-animation-delay: .4s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                                
                }

           @-webkit-keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            }
            
            @keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            } 
            
            */

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

        
            #wrap {
                background-color: rgba(53,58,64,0);
                height: 100vh;
                
            }
            

            #openNav {
                display: flex;
                position: fixed;
                float: left;
                z-index: 2;
                 padding-top: 2vh;
                padding-left: 2%;
                opacity: 0;
                z-index: 2;
                animation: fadein 1s;
                -webkit-animation-name: fadein;
                -webkit-animation-duration: 1s;
                animation-delay: .2s; 
                /*-webkit-animation: fadein 1s;*/
                -webkit-animation-delay: .2s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
            
            }
                @keyframes fadein {
                    from { opacity: 0; }
                    to   { opacity: 1; }
                }
            
            @-webkit-keyframes fadein {
                    0% { opacity: 0; }
                    100% { opacity: 1; }
                
            
            }
                
            

            .menu-open-button {
               
                border: none;
                border-color: rgba(53,58,64,0);                
                /*margin-right: 80%;
               /* float: left;
                margin-left:0; 
                top: 2px;
                vertical-align:middle;
                overflow:hidden;
                /*text-decoration:none;*/              
                cursor:pointer;
                background-color: rgba(53,58,64,0);
	            outline: none !important;
                display:-webkit-box;
                display:block;
                color:rgb(156,156,156);
                text-decoration:none;               
                
                  }
            
            
                #menu-open-button-img {
                     width: 35px;

                } */

            .text-appear-button {
                border: none;
                border-color: rgba(53,58,64,0);
                
                /*position: fixed;*/
                margin-left:0; 
                /*top: 2px;
                vertical-align:middle;
                overflow:hidden;
                /*text-decoration:none;*/              
                cursor:pointer;
                background-color: rgba(53,58,64,0);
	            outline: none !important;
                display:-webkit-box;
                display:block;
                color:rgb(156,156,156);
                /*padding-top: 2%;
                padding-left: 5%; */
                text-decoration:none;               
                opacity: 0;
                animation: fadein 1s;
                -webkit-animation-name: fadein;
                -webkit-animation-duration: 1s;
                animation-delay: .2s; 
                /*-webkit-animation: fadein 1s;*/
                -webkit-animation-delay: .2s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                }

                @keyframes fadein {
                    from { opacity: 0; }
                    to   { opacity: 1; }
                }

            @-webkit-keyframes fadein {
                    0% { opacity: 0; }
                    100% { opacity: 1; }
            }


            #languages {
                position: fixed;
                float: right;
            
               margin-top: 2vh  ;
               /* padding-right: 2%;*/
                margin-left: 92%; 
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                color:rgb(156,156,156);
                font-size:1em;
                letter-spacing: 0.15em;
                box-sizing: border-box;
                z-index: 2;
                
            }

        .lang-btn {
                padding: 0;
                background-color:rgba(58,58,58,0);
                font-family: 'Roboto Condensed', sans-serif;
                font-size : 1em;
                letter-spacing: 0.15em;
                color: rgba(156,156,156,1);
                text-align: center;
                text-align:-webkit-center;
                cursor: pointer;
                white-space: nowrap;
                 outline: none !important;
                display:-webkit-box;
                border: none;
}

            #home-btn, #home-btn-side {
                
                padding-top: 1em;
                padding-bottom: 1em;
                background-color:rgba(58,58,58,0);
                color: rgba(156,156,156,1);
                text-decoration: none;
                text-align: center;
                text-align:-webkit-center;
                cursor: pointer;
                white-space: nowrap;
                 outline: none !important;
                display:-webkit-box;
                border: none;

            } 

            #up-btn {
                
                
                padding-top: 5px;
                padding-left: 0;
                padding-right: 0;
                background-color:rgba(58,58,58,0);
                color: rgba(156,156,156,1);
                text-decoration: none;
                text-align: center;
                text-align:-webkit-center;
                cursor: pointer;
                white-space: nowrap;
                 outline: none !important;
                display:-webkit-box;
                border: none;
                border-top: 5px double  rgba(156,156,156);
                /*outline:1px solid rgba(156,156,156);
                outline-offset: 119px;*/
                position: fixed;
                    z-index: 3;
                   bottom: 50%;
                    right: 10%;
                    transition: right 0.8s;
                    animation: fadein2 4s;
                    animation-delay: 0s;
                 /*   transition: opacity 2s;
                 -webkit-transition: opacity 2s; */
                 animation-fill-mode: forwards;
                 -webkit-animation-fill-mode: forwards;
                 display: none; 
                 
             }

                            
                 
                    @-webkit-keyframes fadein2 {
                        0% { opacity: 0; }
                        100%   { opacity: 0.7; }
                    }

                    @keyframes fadein2 {
                        from { opacity: 0; }
                        to   { opacity: 0.7; }
                    }

                   
            

            #home-icon, #home-icon-side {
                font-size: 1.1em;
            }

             
            
            
            #header {
                
                height: 4vh;
                width: 100%;
                display: -webkit-flex;
                display: flex;
                background-color: rgba(99,96,92,1);
                justify-content: center;
                justify-content: -webkit-center;
                padding-top:0;
                padding-bottom: 3%;
                align-content: center;
                align-content: -webkit-center;
                padding-left: auto ;
                box-sizing: border-box; 
                z-index: 1;
            }
            

            #logo {
                width: 100%;
                position: fixed;
                background-color: rgba(99,96,92);
                z-index: 1;
                transition: margin-left 0.8s;
               
            }

         
            
            
            #logoleft {
                
                
                padding-top: 7vh;
                padding-bottom:2em ;  
                height: 3em;
                margin: auto;                
               
                cursor:pointer;
                display: -webkit-inline-box;
                display: block;
               
                margin-top: 30vh;                
                opacity: 0;          
                animation: fadein 2s;
                animation-delay: 0s; 
                -webkit-animation: fadein 2s;
                -webkit-animation-delay: 0s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                
                /*margin-top: 20%;*/
                 transition: margin-top 0.8s;
                                
                }

            #logoleft-fixed {
                
                opacity: 1;      
                
                }

            
            @keyframes fadein {
                
                from { opacity: 0; }
                to   { opacity: 1; }
                
                }
            
          /* @keyframes comein {
                    from { height: 0.2em; }
                    to   { height: 5em; } 
                } */


/************************************************************************Main***************************************************************************/        
    
        
                #main {
               
                transition: margin-left 0.8s;
                         
           /*  overflow-y: scroll; */
                
            }

               .section {

               padding-top: 19vh;
               /* min-height: 100vh;*/
                animation: fadein 3s;
                -webkit-animation-name: fadein;
                -webkit-animation-duration: 3s;
                /*animation-delay: 2s; 
                
                -webkit-animation-delay: 2s;*/
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
        }


             @-webkit-keyframes fadein {
                    0% { opacity: 0; }
                    100%   { opacity: 1; }
                }

                @keyframes fadein {
                    from { opacity: 0; }
                    to   { opacity: 1; }
                }


           .headline{
                 
              /* margin-top: 25%; */
               margin-left: 20%;
               margin-right: 20%;
               margin-bottom: 0;
               padding-top: 10.5em;
               color: rgb(156,156,156); 
                
}
        


           #manifesto, #mixing {
              /* opacity: 0;*/
               transition: opacity 4s;
                 -webkit-transition: opacity 4s;
}


            #mixing {
                opacity: 0;
               transition: opacity 4s;
                 -webkit-transition: opacity 4s;
                width: 50%;
            }

            #mixing, #EngMix, #ItaMix {
                overflow: hidden;
               -ms-overflow-style: none; 
                 scrollbar-width: none;
            }

            .content {
                
                width: 50%;
             /*     height: 100%;
                
                /*margin-bottom: 10%;
                 margin-top: 150px;*/
                 
               margin-left: auto;
                margin-right: auto;
                 
                align-content: -webkit-center;
                align-content: center;
               /* overflow-y: scroll;
                overflow-x: scroll; */
               -ms-overflow-style: none;
                color: rgb(156,156,156);         
               transition: opacity 2s;
                 -webkit-transition: opacity 2s;
                
                
}

            .uscita {
                margin-top: 10vh;
            }
                
     
            
                        
            p {
                
             
                
                line-height: 1.3;
                letter-spacing: 0.05em;
              /*  font-variant-caps:titling-caps;/*
                
                color: rgb(156,156,156);
                scrollbar-width: none;
                /*font-size: .8em;
                text-shadow: 1px 0 0 rgb(53,58,64), -1px 0 0 rgb(53,58,64), 0 1px 0 rgb(53,58,64), 0 -1px 0 rgb(53,58,64), 1px 1px rgb(53,58,64), -1px -1px 0 rgb(53,58,64), 1px -1px 0 rgb(53,58,64), -1px 1px 0 rgb(53,58,64);
                -webkit-text-fill-color: rgb(53,58,64); /* Will override color (regardless of order) 
                -webkit-text-stroke-width: 1px;
                -webkit-text-stroke-color: rgb(179,184,188); 
                margin-left: auto;
                margin-right: auto;
                margin-top: 150px;
                margin-bottom: 10px;   
                /*margin-bottom: 100px;
                scrollbar-width: none;*/
                -webkit-scrollbar: display none; 
             /*   overflow-y: scroll;
                overflow-x: scroll;
               /* -ms-overflow-style: none; */
                transition: opacity 2s;
                 -webkit-transition: opacity 2s;   
                z-index: 0;
                
                
                
            }

            
            p::-webkit-scrollbar { 
                display: none;
                }
            
              

            .HighlightText {
                font-size: 1.18em;
            }
                 

            

            

            #001-001, #001-002, #002-001, #002-002, #003-001 {
                justify-content: center;
                width: 100%; 
                
              /*margin-bottom: 500px;
              bottom: 200px;
               position: relative;
              opacity: 0;
                display: inline-block; 
                top: 20vh;
               bottom: 20vh;
                overflow-y: scroll;
                height: 140vh;
                top: 20vh;*/
                
                
                /*height: 1200px; position: absolute; */
               
                
                
                
                transition: opacity 4s;
                 -webkit-transition: opacity 4s;
                -webkit-scrollbar: display none; 
                
             }      

                #001-001::-webkit-scrollbar, #001-002::-webkit-scrollbar, #002-001::-webkit-scrollbar, #002-002::-webkit-scrollbar, #003-001::-webkit-scrollbar {

                    display: none;
                }
            
         
            

            #lentamente, #lentamente2, #lentamente3, #lentamente4, #lentamente5 {
    
                width:20vh;                  
                display: inline-block;
                -webkit-box-shadow: 0px 1px 9px 0px rgba(30,30,30,0.62);
                -moz-box-shadow: 0px 1px 9px 0px rgba(30,30,30,0.62);
                box-shadow: 0px 1px 9px 0px rgba(30,30,30,0.62);
                bottom: 0;
                align-content: -webkit-center;
                align-content: center;          
                animation: fadein 4s;
                animation-delay: 0s; 
                -webkit-animation: fadein 4s;
                -webkit-animation-delay: 0s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                transition: opacity 4s;
                 -webkit-transition: opacity 4s; 
                
}
  
            
                audio {

                  display: block;
                    margin: auto;
                   width: 50%;
                    overflow: visible;
                }
            
           
                #ArrowDown {
                     /*
                   margin-top: 50%;
                   color:rgb(156,156,156);*/
                    position: fixed;
                    z-index: 3;
                    bottom: 300px;
                    transition: left 0.8s;
                    animation: fadein 4s;
                    animation-delay: 0s;
                 /*   transition: opacity 2s;
                 -webkit-transition: opacity 2s; */
}
                 
                      @-webkit-keyframes fadein {
                                0% { opacity: 0; }
                                100%   { opacity: 1; }
                            }

                            @keyframes fadein {
                                from { opacity: 0; }
                                to   { opacity: 1; }
                            }

                

                .arrow,
                .arrow:before {
                  position: absolute;
                    left: 50%;
                    transition: op
                    
                    
                }

                .arrow {
                    content: '';
                  width: 30px;
                  height: 30px;
                 top: 90%;
                  margin: -15px 0 0 -15px;
                  -webkit-transform: rotate(45deg);
                  border-left: none;
                  border-top: none;
                  border-right: 1.5px  rgb(156,156,156) solid;
                  border-bottom: 1.5px rgb(156,156,156) solid;
                animation-name: arrow;
                 animation-duration: 2s;
                animation-iteration-count: infinite;
                 animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;   
                  
                }

                .arrow:before {
                  content: '';
                  width: 34px;
                  height: 34px;
                 top: 51%; 
                  margin: -29px 0 0 -29px;
                  border-left: none;
                  border-top: none;
                  border-right: 1.5px rgb(156,156,156) solid;
                  border-bottom: 1.5px rgb(156,156,156) solid;
                  animation-name: arrow;
                    
                    animation-duration: 2s;
                    
                  animation-iteration-count: infinite;
                  animation-fill-mode: forwards;
                  -webkit-animation-fill-mode: forwards;   
                }  

                @keyframes arrow {
                    0% {opacity: 0; }
                    50% {opacity: 1; }
                    100% {opacity: 0;}
                    transform: translate(-10px, -10px);
                    }


                 @-webkit-keyframes fadein {
                                0% { opacity: 0; }
                                100%   { opacity: 1; }
                            }

                            @keyframes fadein {
                                from { opacity: 0; }
                                to   { opacity: 1; }
                            }


  


/*********************************Player**+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++************/
                .TagTitle {
                    display:flex;
                    align-items: center;
                    margin: auto;
                    font-size: 2em;
                    
                    margin-bottom: 5vh;
                    
                }

                .TagTrack {
                    display:flex;
                    align-items: center;
                    margin: auto;
                    margin-top: 3vh;
                    

                    

                    /*font-size: 0.8em;padding-top: 25px;
                    padding-bottom: 10px;
                    
                    
                    font-weight:500; */
                }

                .TagTrackLeft {
                    margin-left: auto;
                    /*text-transform: uppercase;*/
}              
                .TagTrackRight {
                    margin-right: auto;
                
                    
}               

                .logoseparator-hor {
                    
                    width : 50px;

                }

                .logoseparator-ver {
                    margin-left: 7px;
                    margin-right: 8px;
                    width : 5px;

                }

                .slidecontainer {
                    /*width: 450px;*/
                    border-radius: 0%; /*mettere a 0 per quadrato*/
                    width: 250px;
                    margin: auto;
                }
                
               

                .slidecontainerVol {
                    /*width: 450px;
                    margin-top: 50px;*/
                    margin-left: auto;
                    margin-right: auto;
                    z-index: 3;                     
                    width: 100px;
                    
                    
                }

                .slidecontainer, .slidecontainerVol  { 
                    height: 30px;
                    display:flex;
                    align-items: center;
                    background-color:rgba(58,58,58,0);
                   margin-top: 1vh;
                   margin-bottom: 1vh;
                   /*  margin-bottom: 1vh; */



                }

                #main-vol {
                
                    position: fixed;
                    z-index: 1;
                    transition:margin-left 0.8s;
                    animation: fadein 4s;
                    animation-delay: 0s;
                    
                 /*   transition: opacity 2s;
                 -webkit-transition: opacity 2s; */
                 animation-fill-mode: forwards;
                 -webkit-animation-fill-mode: forwards;
               display: none;
                 
             }

                            
                 
                    @-webkit-keyframes fadein {
                        0% { opacity: 0; }
                        100%   { opacity: 0.5; }
                    }

                    @keyframes fadein {
                        from { opacity: 0; }
                        to   { opacity: 0.5; }
                    }

                .slider {
                    -webkit-appearance: none;
                   /* width: 200px;*/
                    width: 70%;
                    height: 1px;
                    background-color: rgb(156,156,156);
                    outline: none;
                }

                .slider:hover {
                background: #6E6E6E;
                }

                .slider::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    appearance: none;
                    width: 9px;
                  /*  width: 25px; */
                    height: 9px;
                    border-radius: 50%;
                    border: 0px #000 solid;
                    background-color:rgb(156,156,156);
                    cursor: pointer;
                }

                .slider::-moz-range-thumb {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    border: 0px #000 solid;
                    background-color:rgb(156,156,156);
                    cursor: pointer;
                }

                .myVol 

                    {width: 50px;
                    height: 1px}


                .goButton {
                    cursor: pointer;
                    color: rgb(156,156,156);
                    background-color:rgba(156,156,156,0);
                    border: none;
                    outline: none !important;
                    font-size: 1em;
                    } 

                .fas-play  {
                    cursor: pointer;   

                    } 

                .PlayerIcon {
                    font-size: 0.8em;
                }

                .salesnote {
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 5vh;
                    margin-bottom: 5vh;
                    width: 40%;
                    max-width: 300px;
                    float: center;
                }

                span {
                    height: 150px;
                    position: relative;
                    display: block;
                }

                .timer {
                    /*margin-bottom: 5vh;*/
                    font-size: .9em;
                    margin-top: 1vh;
                    margin-bottom: 2vh;

                }

/*******************************************************************Footer *******************************************************************/
            
            #footer {
                
                background-color: rgba(99,96,92,1);
                position: fixed;
                width: 100%;
                text-align: center;
                justify-content: center;
                justify-content: -webkit-center;
        /*        padding-bottom: 2%;
                padding-top: 0%;
                margin-bottom: 15%;
                height: 60px;*/
                border-bottom: 25px;
                bottom: 30vh;               
                margin-left: auto;
                overflow: hidden;
                display:-webkit-box;
                display: flex;
                 z-index: 1;  
                
                
              
                 animation: fadein 2s;
                animation-delay: 0s; 
                -webkit-animation: fadein 2s;
                -webkit-animation-delay: 0s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                background-color: rgba(99,96,92);
                /*margin-top: 20%;*/
                 transition: bottom 0.8s;
                
             
                                                        
            }      
                        
            #contacts {
               
                list-style: none; 
                align-content: center;
                align-content: -webkit-center;
                margin-left: auto;
                padding-left: 0;
                margin-right: auto;
                
                border-left:0;
                /*padding-inline-start: 0px;
                margin-top:0%;*/
                opacity: 0;
                animation: fadein 2s;
                -webkit-animation-name: fadein;
                -webkit-animation-duration: 2s;
                animation-delay: 0s; 
                /*-webkit-animation: fadein 5s;*/
                -webkit-animation-delay: 0s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                 background-color: rgba(99,96,92,1);
                
                
                }


            #contacts-fixed {
               
                list-style: none; 
                align-content: center;
                align-content: -webkit-center;
                margin-left: auto;
                margin-right: auto;
                margin-top:0%;
                
                padding-inline-start: 0px;         
                
                
                }


            #triple-icon {
                width: 1.2em;
            }


           @-webkit-keyframes fadein {
                0% { opacity: 0; }
                100%   { opacity: 1; }
            }
            
            @keyframes fadein {
                from { opacity: 0; }
                to   { opacity: 1; }
            }
            
            ul {
                background-color: rgba(99,96,92,1);
                 text-align: center;
            }
                         
            li {
                
                float:left;
                -webkit-transition: font-size 1s;
                transition: font-size 1s;
                 
                                
            }            

           i {
                font-size: 1.5em;
                float: left;
                margin-right: 12px; 
                margin-left: 12px;
              
                font-weight: 400;                
               
            }
            
            li:hover {
                
                font-size: 2em;
            }
            
           

    /*******************************************************************Sidebar *******************************************************************/


            .animate-left {
                
                    position:relative;
                    animation:animateleft 0.8s;
            
                }
            

            .animate-right {
                
                    position:relative;
                    animation:animateright 0.8s;
            
                }

            @keyframes animateleft {
                
                from {left:-300px;opacity:0} 
                to {left:0;opacity:1}
                
            }      
            
            
             
            
            #sidebar {
                
                height: 100%;
                background-color:rgba(58,58,58,0.3);
                position: fixed;
                width: 0;
                top:0;
                z-index: 2;              
                
            }

                #sidebar {
                    
                -webkit-transition: display .4s;
                transition: display .4s;
                                  
                }
            
            .sidebar-block {
                
                width: auto;
                min-width: 100px;
               /* padding-right: 1%;*/
                color: rgba(156,156,156,1);
                box-shadow:0 5px 10px rgba(0,0,0,0.2);
            }
            
            .sidebar-first-item {
                
                width:100%;
                background-color:rgba(58,58,58,0);
                color: rgba(156,156,156,1);
                display:inline-flex;
                height:30px;/*as distancer*/
                padding-top: 8%;
                padding-left: 10%;
                padding-bottom: 20%;
                text-align:left;
                text-align:-webkit-left;
                border:none;
               /* cursor: pointer;               
                white-space:normal;
                float:none;*/
                outline:0; 

            }

            #home-btn-side {
                padding: 0;
            }

            #catalog-arrow {
                margin: 0;
                font-size: 0.8em;
               float: none; 
               opacity:1;
            }

            #catalog-arrow-up {
                margin: 0;
                font-size: 0.8em;
               float: none; 
               opacity: 0;
            }

            .menu-close-button {            
                width : 25px;
                 font-size: 1.7em;
                padding: 0;
                border:none;
                cursor: pointer;               
                white-space:normal;
                outline: none !important;
                float:none;                           
            }


            .menu-close-button:focus {
                outline: 0;
                
}
                
                
                
            
            .sidebar-item-hide {
                
                display:none!important; 
                
                }

            .sidebar-item {
                
                
                width:100%;
                display:block;
                /*margin-top:5%;
                height:50px;
                padding-left: 5%;*/
                padding: 1vh 0 1vh 0;
                text-align:center;
                text-align:-webkit-center;
                font-size: 1em;
                border:none;
                cursor: pointer;
                white-space:normal;
                float:none;
                outline:0;
                font-family: inherit;
                letter-spacing: 0.1em;
                font-variant:inherit;
               
                
                }

                .sidebar-item-nohover, .sidebar-item-nohover-2, .sidebar-item-nohover-3,.sidebar-item-nohover-4,.sidebar-item-nohover-5,.sidebar-item-nohover-mix  {
                    
               
                display:block;
                /* width:100%;
                margin-top:5%;
                padding-top: 2.2%;
                padding-left: 5%;
                padding-bottom: 3%;*/
                padding: 10px;
                text-align:center;
                text-align:-webkit-center;
                font-size: 1em;
               /* border:none; */
                cursor: pointer;
                white-space:normal;
                float:none;
                outline:0;
                    font-family: inherit;
                letter-spacing: inherit;
                    font-variant:inherit;
                    background-color: rgba(156,156,156,0);
                    color: rgb(156,156,156);
               
               
}
    
             

                .sidebar-item:hover, .sidebar-item:focus, .sidebar-item:active   {
                        background-color: rgba(156,156,156,0.3);
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                    /*color: rgb(76,76,76)*/
                     
                    
                }

                .sidebar-item-hide:focus,  {
                                    background-color: rgba(156,156,156,0.3);
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                                    /*color: rgb(76,76,76)*/

                                }

                .sidebar-item-nohover:hover, /*.sidebar-item-nohover:active*/ {
                    background-color: rgba(156,156,156,0.3);
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                    background-image: url(../Logos/fascia_page_2.webp);
                     background-size: 200px 300px;
                    background-position: center;
                color: rgba(156,156,156,1);
                    
                }

               .sidebar-item-nohover:focus {
                    background-color: rgba(156,156,156,0.3);;
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                        background-image: url(../Logos/fascia_page_2.webp)!important;
                    background-position: center;
                    background-size: 200px 300px;
                color: rgba(156,156,156,1);
                }

                .sidebar-item-nohover-2:hover, /*.sidebar-item-nohover:active*/ {
                    background-color: rgba(156,156,156,0.3);
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                    background-image: url(../Logos/uscita_due_fascia_page_2.webp)!important;
                     background-size: 200px 300px;
                    background-position: center;
                color: rgba(156,156,156,1);
                    
                }

               .sidebar-item-nohover-2:focus {
                    background-color: rgba(156,156,156,0.3);;
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                        background-image: url(../Logos/uscita_due_fascia_page_2.webp)!important;
                    background-position: center;
                    background-size: 200px 300px;
                color: rgba(156,156,156,1);
                }  

                .sidebar-item-nohover-3:hover, /*.sidebar-item-nohover:active*/ {
                    background-color: rgba(156,156,156,0.3);
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                    background-image: url(../Logos/fascia_uscita_tre.webp)!important;
                     background-size: 200px 300px;
                    background-position: center;
                color: rgba(156,156,156,1);
                    
                }

               .sidebar-item-nohover-3:focus {
                    background-color: rgba(156,156,156,0.3);;
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                        background-image: url(../Logos/fascia_uscita_tre.webp)!important;
                    background-position: center;
                    background-size: 200px 300px;
                color: rgba(156,156,156,1);
                }

                .sidebar-item-nohover-4:hover, /*.sidebar-item-nohover:active*/ {
                    background-color: rgba(156,156,156,0.3);
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                    background-image: url(../Logos/fascia_uscita_quattro.webp)!important;
                     background-size: 200px 300px;
                    background-position: center;
                color: rgba(156,156,156,1);
                    
                }

               .sidebar-item-nohover-4:focus {
                    background-color: rgba(156,156,156,0.3);;
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                        background-image: url(../Logos/fascia_uscita_quattro.webp)!important;
                    background-position: center;
                    background-size: 200px 300px;
                color: rgba(156,156,156,1);
                }

                .sidebar-item-nohover-5:hover, /*.sidebar-item-nohover:active*/ {
                    background-color: rgba(156,156,156,0.3);
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                    background-image: url(../Logos/fascia_uscita_quattro.webp)!important;
                     background-size: 200px 300px;
                    background-position: center;
                color: rgba(156,156,156,1);
                    
                }

               .sidebar-item-nohover-5:focus {
                    background-color: rgba(156,156,156,0.3);;
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                        background-image: url(../Logos/fascia_uscita_quattro.webp)!important;
                    background-position: center;
                    background-size: 200px 300px;
                color: rgba(156,156,156,1);
                }

                .sidebar-item-nohover-mix:hover, /*.sidebar-item-nohover:active*/ {
                    background-color: rgba(156,156,156,0.3);
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
              /*      background-image: url(../Logos/uscita_due_fascia_page_2.webp)!important;
                     background-size: 200px 300px;
                    background-position: center; */
                color: rgba(156,156,156,1);
                    
                }

               .sidebar-item-nohover-mix:focus {
                    background-color: rgba(156,156,156,0.3);;
                    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                     /*   background-image: url(../Logos/uscita_due_fascia_page_2.webp)!important;
                    background-position: center;
                    background-size: 200px 300px; */
                color: rgba(156,156,156,1);
                }

                .sidebar-item-nohover, .sidebar-item-nohover-2, .sidebar-item-nohover-3, .sidebar-item-nohover-4, .sidebar-item-nohover-5, .sidebar-item-nohover-mix {
                    height: 80%;
                    padding: 5px;


                }
            
            .dropdown-button, .dropdown-button-nohover {
                
                display: block;
                
                background-color:rgba(58,58,58,0);
                color: rgba(156,156,156,1);
                
                text-decoration: none;
                text-align: center;
                text-align:-webkit-center;
                cursor: pointer;
                white-space: nowrap;
                /*font-family: inherit;
                font-weight: 1000;
                width: 100%;
                padding-left: 5%;*/
                }

            .dropdown-button-nohover:hover {
                                    background-image: url(../Logos/fascia_page_2.webp);
                    background-position: center;
                    background-size: 600px 300px;
                color: rgba(156,156,156,1);
                                }

            .w3-show {display:block!important}

            

            .sidebar-item-load {
                
                width:100%;
                display:block;
                float: right;
                color: rgb(156,156,156);
                /*padding-top: 2.2%;
                padding-left: 5%;*/
                padding-bottom: 3%;
                text-align:center;
                text-align:-webkit-center;
                align-content: center;                
                font-size: 1em;
                border:none;
                cursor: pointer;
                white-space:normal;
                float:none;
                outline:0

            }


           
                #lentamentemenu {

                    width: 90%;
                    padding-top: 10%;
                    padding-bottom: 10%;
                }
           
           /******************************************************************** suspension points **********************************************************/
            
            #loading1 {
                
                color: rgb(156,156,156);
                display: inline-block;
                opacity: 0;
                animation: loadside 2s infinite;
                -webkit-animation-name: loadside;
                -webkit-animation-duration: 2s;
                /*animation-delay: 2s; 
                -webkit-animation: fadein 5s;
                -webkit-animation-delay: 2s;*/
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                box-sizing: border-box;
                                
                }

           @-webkit-keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            }
            
            @keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            } 
                
            #loading2 {
                
                color: rgb(156,156,156);
                display: inline-block;
                opacity: 0;
                animation: loadside 2s infinite;
                -webkit-animation-name: loadside;
                -webkit-animation-duration: 2s;
                animation-delay: .2s; 
                -webkit-animation-delay: .2s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                box-sizing: border-box;
                                
                }

           @-webkit-keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            }
            
            @keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            } 
            
            #loading3 {
                
                color: rgb(156,156,156);
                display: inline-block;
                opacity: 0;
                animation: loadside 2s infinite;
                -webkit-animation-name: loadside;
                -webkit-animation-duration: 2s;
                animation-delay: .4s;                 
                -webkit-animation-delay: .4s;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                                
                }

           @-webkit-keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            }
            
            @keyframes loadside {
                0% { opacity: .2; }
                20% {opacity: 1; }
                100%   { opacity: .2; }
            } 
            

/********************************************************************Smartphone version                 **********************************************************/
                                                                    
/********************************************************************                 **********************************************************/
          
@media only screen and (max-height: 700px) {

.arrow {
    top: 83%;
}

}




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


                        
    .content {
        width: 100%;
    } 
                p {
                
               /* font-size: .8em;*/
                }
                
               #languages {
                    
                margin-left: 89%;
                } 
    
    #home-btn {
        display: block;
     
        
    }
                
    
                .slidecontainer {
                   
                    width: 150px;
                    height: 30px;
                   
                }
                
                .slider {
                   
                    width: 50%;
                   
                   
                }
    
    .contact-icon {
        font-size: 1.2em;
    }
    
    
    
    .dropdown-button {
        font-weight: 100;
    }
    
    .sidebar-item {
        font-size: 1em;
    }
    
    
    
    
    
            }



@media only screen and (max-width: 600px) {
                
    a {
    font-weight: 400;
    }
    
    a:visited {
    font-weight: 1000;
    }
    
       
                #languages {
                    
                margin-left: 84%;
                    margin-top: .8em;
                }
                
     
    
               
            } 

@media only screen and (max-width: 426px) {
                
                
                
              
                
                #languages {
                    
                margin-left: 77%;
                margin-top: .7em;
                }
                
     
        

}


@media only screen and (max-width: 400x) {
                
                
                
              
                
                #languages {
                    
                margin-left: 77%;
                margin-top: .8em;
                }
                
     
    
               
            } 

  /*  #main {
        height: 2000px; 
    } */


    
    
/*
@media only screen and (min-height: 1000px) {
    
    #001-001 {
        height: 1400px;
    }
    
@media only screen and (min-height: 1200px) {
    
    #001-001 {
        height: 1800px;
    }

      
@media only screen and (min-height: 1500px) {
    
    #001-001 {
        height: 5000px;
    }

            
               
            
            */