/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 30-nov-2015, 10.48.47
    Author     : Andrea
    CSS for Mobile
*/

#header-2{ position: fixed; width: 100%; height: 65px; background-color: #FFF; z-index: 1001; top: 0px; }

/*//#header-2{ width: 100%; height: 65px; background-color: #FFF; z-index: 100; }*/

#header-categ{ position: fixed; margin-top: 65px; width: 100%; height: 50px; background-color: #dcd8ca; z-index: 100; }

#cycle-slideshow { width: 100%; max-width: 100%; height: 100%; margin: 0; padding: 0; }

#logo-header-1{ position: absolute; height: auto; width: auto; left: 30px; top: 40px; z-index: 99999; padding: 0px; }
#logo-header-1 a img{ width: 150px; }

#logo-header-2{ position: absolute; height: auto; width: auto; left: 30px; top: 50%; margin-top: -22px; z-index: 99999; padding: 0px; margin-top: -22px; }
#logo-header-2 a img{ width: 90px; }

#menu-header-1{ position: absolute; top: 50px; right: 30px; z-index: 9999; }

#menu-header-2{ position: absolute; top: 50%; margin-top: -10.5px; right: 30px; z-index: 9999; }

#menu-lang-2{ position: absolute; top: 50%; margin-top: -9.5px; left: 50%; z-index: 9999; transform: translateX(-50%); }

.menu-text-lang { padding-top: 0px; }
.menu-text-lang span{ color: #5F5F5F; font-family: 'Roboto Condensed'; font-size: 18px; letter-spacing: 2px; }
.menu-text-lang span a{ color: #5F5F5F; }
.menu-text-lang span a:hover{ color: #dcd8ca; }
.menu-text-lang span a.active{ color: #dcd8ca; }

#chiudi-dettaglio{ position: absolute; top: 21px; right: 30px; z-index: 9999; }

#menu-img-1{ width: 50px; }

#menu-img-2{ width: 60px; }

#menu-img-3{ width: 42px; }

#language{ list-style-type: none; list-style: none; padding: 0px; height: 100%; margin-bottom: 0px !important; }
#language li{ float: left; min-height: 25px; opacity: 1; margin-bottom: 0px !important; }
#language li a{ font-family: 'Roboto Condensed'; font-size: 14px; color: #FFF; padding-left: 5px; padding-right: 5px;}
#language li span{ font-family: 'Roboto Condensed'; font-size: 14px; color: #FFF; padding-left: 5px; padding-right: 5px;}
/*//#language li a:hover{ color: #FFF; }*/
#language li a.active{ color: #5f5f5f; }

.titolo_hp{ font-family: 'Roboto Condensed'; font-size: 32px; font-weight: 400; color: #FFF; letter-spacing: 1px; text-align: center; width: auto; text-shadow: 1px 1px 10px #2d2a32; }

.sottotitolo_hp{ font-family: "Plus Jakarta Sans", sans-serif; font-size: 32px; font-weight: 400; opacity: 1; text-align: center; padding: 10px; width: auto; text-shadow: 1px 1px 10px #dcd8ca; }

/* pager */
.cycle-pager { 
     position: absolute; height: auto; width: 5px; right: 35px; top: 50%; z-index: 9999; margin-top: -25px;
}
.cycle-pager span {
    padding: 7px;
    width: 5px; height: 5px; 
    display: inline-block; color: transparent; cursor: pointer; 
    background-image: url('https://www.studioerredesign.com/img/pallino_vuoto.png'); background-repeat: no-repeat;
}
.cycle-pager span.cycle-pager-active { 
    background-image: url('https://www.studioerredesign.com/img/pallino_pieno_a6a198.png'); 
    background-repeat: no-repeat;
}
.cycle-pager > * { cursor: pointer;}

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    
    #header-2{ position: fixed; width: 100%; height: 60px; background-color: #FFF; z-index: 1001; }
    
    #header-categ{ position: fixed; margin-top: 60px; width: 100%; height: 75px; background-color: #dcd8ca; z-index: 100; }
    
    #logo-header-1{ position: absolute; height: auto; width: auto; left: 45px; top: 60px; z-index: 99999; padding: 0px; }
    #logo-header-1 a img{ width: 210px; }
    
    #logo-header-2{ position: absolute; height: auto; width: auto; left: 40px; top: 50%; margin-top: -21px; z-index: 99999; padding: 0px; }
    #logo-header-2 a img{ width: 42px; }

    #menu-header-1{ position: absolute; top: 74px; right: 40px; z-index: 9999; }
    
    #menu-header-2{ position: absolute; top: 50%; margin-top: -12.72px; right: 40px; z-index: 9999; }
    
    #chiudi-dettaglio{ position: absolute; top: 50%; margin-top: -16.5px; right: 40px; z-index: 9999; }

    #menu-img-1{ 
/*        //width: 50px;*/
    }
    
    #menu-img-2{ width: 70px; }
    
    #menu-img-3{ width: 49px; }
    
    .titolo_hp{ font-family: 'Roboto Condensed'; font-size: 42px; font-weight: 400; color: #FFF; letter-spacing: 1px; text-align: center }

    .sottotitolo_hp{ font-family: 'Roboto Condensed'; font-size: 42px; font-weight: 400; color: #dcd8ca; opacity: 1; text-align: center; padding: 10px; }
    
    .cycle-pager { right: 50px; }
    
    #language li a{ font-size: 18px; }
    #language li span{ font-size: 18px; }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    
    .titolo_hp{ font-family: 'Roboto Condensed'; font-size: 30px; font-weight: 400; color: #FFF; letter-spacing: 1px; text-align: center }

    .sottotitolo_hp{ font-family: 'Roboto Condensed'; font-size: 28px; font-weight: 400; color: #dcd8ca; opacity: 1; text-align: center; padding: 10px; }
    
    .cycle-pager { right: 30px; width: 5px; }
      
}