/*** CSS 3.0 ***/


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* E-direct
/* Agenzia di comunicazione Avellino
web developer Antonio Gaglianone
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */


/*
 OMBRA TESTI
   (orizzontale verticale blur colore)
   text-shadow:1px 1px 0 #333; filter:dropshadow(color=#333,offx=1,offy=1); 

 OMBRA ELEMENTI GENERALE
   (orizzonale verticale blur spread colore)
   box-shadow:(inset) 2px 2px 5px 0px #333; -webkit-box-shadow.....; -mox-box-shadow........;

 OMBRA DIREZIONALE
   (orizzonale verticale blur spread colore)
   TOP: box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4); -webkit-box-shadow.....; -mox-box-shadow........;
   RIGHT: box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); -webkit-box-shadow.....; -mox-box-shadow........;
   BOTTOM: box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); -webkit-box-shadow.....; -mox-box-shadow........;
   LEFT: box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4); -webkit-box-shadow.....; -mox-box-shadow........;

 GLOW
   (orizzonale verticale blur spread colore)
   ESTERNO SFUMATO: box-shadow:0 0 10px 2px #333; -webkit-box-shadow.....; -mox-box-shadow........;
   ESTERNO NETTO: box-shadow:0 0 0 10px #333; -webkit-box-shadow.....; -mox-box-shadow........;
   INTERNO SFUMATO: box-shadow:inset 0 0 10px 2px #333; -webkit-box-shadow.....; -mox-box-shadow........;
   INTERNO NETTO: box-shadow:inset 0 0 0 10px #333; -webkit-box-shadow.....; -mox-box-shadow........; 
   
 GRADIENTS
   (proprietà di background: colore 1 -> colore 2)
   LINEARE: background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   RADIALE: background: linear-gradient(45deg, #f06, #CCC);
   RADIALE: background: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));

 STONDATURA GENERALE: border-radius:5px; -webkit-border-radius:.....; -moz-border-radius:.....;
 STONDATURA SINGOLA: border-radius:5px 5px 5px 5px; -webkit-border-radius:.....; -moz-border-radius:.....;
 CERCHIO: border-radius:50%; -webkit-border-radius:.....; -moz-border-radius:.....;
 OVALI: border-radius:20px/60px; -webkit-border-radius:.....; -moz-border-radius:.....;
 TRANSIZIONI: transition:all 0.3s ease-out;
 ELEMENTI A:HOVER .q{background:url(../img/ico/social.png) 0 0 no-repeat;} .q a:hover{background-position:0px -40px;}
 AGGIUNGERE behavior:url(../pie.htc); nelle classi o id con proprietà stondatura e/o ombra*/


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */


/*** CSS Document ***/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300,600,700italic,600italic,700);
@import url(https://fonts.googleapis.com/css?family=Candal);
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: #353535;
    margin: 0;
    height: auto;
    width: auto;
    font-weight: 400;
}

a img {
    border: none;
}

hr {
    border: #CCC 1px solid;
}

dt,
dd {
    margin: 0;
    padding: 0;
}

a {
    color: #fff;
}

a:hover {
    color: #0f718c
}

zh2 {
    font-size: 100px;
    font-weight: normal;
    margin: 0;
    font-weight: 300;
    padding: 60px;
}

#top {
    display: none;
}

#nav {
    display: none;
}

.spazio {
    width: 100%;
    height: 190px;
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 720px) and (min-width: 0px) {
    .c1a {
        margin-top: 0px !important;
    }
}


/*** animazione scoll elementi ***/

#text-1 {
    float: left;
    width: 100%;
    height: 500px;
    margin-top: 0px;
    margin-left: 0px;
    z-index: 99999;
    position: relative
}

#text-2 {
    float: left;
    width: 100%;
    height: 900px;
    background: #ebebeb;
    margin-top: 34px
}

#text-3 {
    float: left;
    width: 100%;
    position: relative;
    z-index: 999999;
    margin-top: 0px;
    margin-left: 0px;
    overflow: hidden;
    display: table
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */


/*** classi principali ***/

.main {
    margin: 0 auto;
    width: 1024px;
}

.clear {
    clear: both;
}

header {
    width: 100%;
    position: fixed;
    z-index: 9999999999999999999999999999999999999999;
    background-color: rgb(255, 255, 255);
    top: 0;
}

.top_header {
    width: 100%;
    background: #232323;
    border-bottom: 3px solid #c9c9c9;
    overflow: hidden;
}

.fl_sx {
    float: right;
    padding: 5px;
    margin-left: 20px;
}

.i_sx {
    float: left;
    margin-right: 5px;
}

.testo_top_header {
    color: #fff;
    font-size: 14px;
    float: left;
}

.testo_top_header a {
    color: #fff;
    text-decoration: none;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.testo_top_header a:hover {
    opacity: 0.8;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.logo {
    float: left;
}

nav {
    float: left;
    width: 700px;
    padding-top: 70px;
    padding-left: 30px;
}

nav ul {
    float: left;
}

nav ul li {
    float: left;
    padding: 0px 20px;
    background: url(../img/ico/menu.png) right no-repeat;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

nav ul li a {
    color: #333;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

nav ul li:hover {
    background: url(../img/ico/menu2.png) right bottom no-repeat;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

nav ul li a:hover {
    color: #F00;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.social {
    float: left;
    padding-top: 60px;
}

.separatore {
    width: 1px;
    height: 40px;
    background: #666;
    float: left;
    margin: 0 20px;
}

.m1 {
    float: left;
    margin: 0 5px;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.m1:hover {
    opacity: 0.7;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.menu_bottom {
    width: 65%;
    right: 0;
    background: #232323;
    overflow: hidden;
    position: absolute;
}

.m2b {
    float: left;
    padding: 5px 20px;
    background: url(../img/ico/menu3.png) right no-repeat;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.m2b:hover {
    background: url(../img/ico/menu2.png) right no-repeat;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.m2b a {
    color: #fff;
    text-decoration: none;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.m2b a:hover {
    color: #F00;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.prenotazione {
    position: absolute;
    width: 200px;
    text-align: center;
    height: 70px;
    background: url(../img/ico/prenotazione.png) no-repeat;
    z-index: 999;
    left: 50%;
    margin-left: 300px;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.prenotazione:hover {
    background: url(../img/ico/prenotazione2.png) no-repeat;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.f_t_12 {
    font-size: 12px;
    color: #666
}

.c1a {
    width: 310px;
    float: left;
    margin-left: 202px;
    background: rgba(31, 31, 31, 0.83);
    padding: 12px 20px;
    text-align: right;
}

.titolo_c1a {
    font-family: 'Candal', sans-serif;
    font-size: 30px;
    color: #fff;
}

.c1a2 {
    width: 310px;
    float: left;
    margin-left: 202px;
    background: rgba(31, 31, 31, 0.83);
    padding: 12px 20px;
    text-align: right;
}

.titolo_c1a {
    font-family: 'Candal', sans-serif;
    font-size: 30px;
    color: #fff;
    margin-top: 70px;
}

.sotto_titolo_c1a {
    font-size: 30px;
    font-weight: 200;
    color: #db0a05
}

.c1 {
    float: left;
    width: 512px;
}

.c1_img2 {
    float: left;
    width: 512px;
    margin-top: 0px;
}

.c1_img {
    float: left;
    width: 512px;
    margin-top: 90px;
}

.testo_c1 {
    font-size: 14px;
    color: #333;
    padding: 30px;
    background: #fff;
}

.logo_cont {
    position: absolute;
    left: 50%;
    z-index: 9999;
    margin-left: -131px;
    margin-top: 296px;
}

.box_servizi {
    padding-top: 130px;
}

.m2 {
    float: left;
    text-align: center;
    padding: 50px 10px;
    color: #9f9b86;
    font-size: 14px;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    min-width: 168px;
}

.m2:hover {
    background: #292929;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.sotto_titolo_c1ab {
    font-size: 13px;
    color: #fff;
}

.sotto_titolo_c1ab2 {
    font-size: 20px;
    font-family: 'Candal', sans-serif;
    color: #fff;
}

.c1a_label {
    width: 210px;
    float: left;
    margin-left: 302px;
    margin-top: -244px;
    background: #9b9150;
    padding: 12px 20px;
    text-align: right;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.c1b {
    float: left;
    background: #fff;
    width: 300px;
}

.prezzo {
    font-size: 18px;
    color: #971512;
    font-weight: 900
}

.c1a_label:hover {
    background: #e1c301;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.c1a_label a {
    color: #000;
}

.logo_cont2 {
    position: absolute;
    left: 50%;
    z-index: 9999;
    margin-left: -131px;
    margin-top: 157px;
}

.dintoni {
    float: left;
    width: 322px;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.dintoni:hover {
    box-shadow: 1px 1px 10px #ccc;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.cd {
    width: 20px;
    float: left;
    height: 1px;
}

.label_dintorni {
    float: left;
    padding: 7px 0px;
    color: #fff;
    background: #b70b07;
    text-align: center;
    width: 200px;
}

.label {
    float: right;
    background: #9b9150;
    color: #000;
    padding: 10px 20px;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.label a {
    color: #000;
    font-size: 13px;
}

.img {
    float: left;
    margin: 0px;
}

.label:hover {
    background: #e1c301;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.box {
    background: #efefef;
    border: 1px solid #ccc;
    overflow: hidden;
    display: table;
    width: 100%
}

.testo {
    padding: 20px;
    font-size: 14px;
}

.red {
    color: #b70b07;
    font-style: italic;
    text-decoration: underline;
}

.neutro {
    text-decoration: underline;
    color: #737373
}

.box_slider {
    width: 100%;
    height: 700px;
    background: url(../img/bg/slider.jpg) no-repeat;
}

.logo_cont3 {
    position: absolute;
    margin-top: -134px;
    margin-left: 150px;
}

footer {
    width: 100%;
    overflow: hidden;
    background: #292929;
    display: table;
    height: 600px;
    color: #E5E5E5;
}

.logo_cont4 {
    position: absolute;
    left: 50%;
    margin-top: -134px;
    margin-left: -130px;
}

.divisore_footer {
    width: 100%;
    height: 200px;
}

.footer1 {
    float: left;
    width: 250px;
    margin-right: 30px;
}

.titolo_footer {
    font-size: 20px;
    color: #8f7602;
    margin-bottom: 30px;
}

.contatti_title {
    font-size: 14px;
    margin-bottom: 40px;
}

.contatti_title a {
    text-decoration: underline;
    color: #E81312;
}

.h_title {
    font-size: 20px;
    margin-bottom: 20px;
}

.box_footer2 {
    float: left;
    width: 150px;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    padding: 10px;
    margin-right: 30px;
    text-align: center;
}

.min_title {
    font-size: 10px;
    margin-bottom: 20px;
}

.m1_social {
    padding: 5px;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.m1_social:hover {
    opacity: 0.7;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.plus {
    padding: 10px;
    width: 100%;
    text-align: center;
    background: #938543;
    margin-top: 30px;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    margin-bottom: 10px;
}

.plus:hover {
    background: #e1c301;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.plus a {
    color: #000;
    font-size: 12px;
}

.box_footer3 {
    float: left;
    width: 560px;
    color: #000;
}

.hr2 {
    width: 40%;
    height: 1px;
    background: #666;
    float: left;
    margin-top: 50px;
}

.logo_footer {
    width: 20%;
    float: left;
    text-align: center;
}

.link_footer {
    width: 100%
}

.link_footer ul {
    list-style-type: none;
    padding: 10px;
}

.link_footer ul li {
    padding: 10px 27px;
    background: url(../img/ico/menu3.png) no-repeat right;
    float: left;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.link_footer ul li a {
    color: #CCC;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.link_footer ul li a:hover {
    color: #F00;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.link_footer ul li:hover {
    background: url(../img/ico/menu2.png) no-repeat right;
    webkit-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.bottom_footer2 {
    border-top: 1px solid #666;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    font-size: 12px;
    text-align: center;
}

.bottom_footer2 a {
    color: #999
}

.bottom_footer2 a:hover {
    color: #F00
}

.clear2 {
    margin-bottom: 200px;
    clear: both;
}

.clear3 {
    clear: both;
    margin-bottom: 150px;
}

@media screen and (max-width: 1124px) and (min-width: 720px) {
    .main {
        width: 100%
    }
    .separatore {
        display: none;
    }
    .social {
        float: none;
        padding-top: 90px;
        padding-left: 160px;
    }
    nav {
        float: left;
        width: 82%;
        padding-top: 30px;
        padding-left: 30px;
    }
    .menu_bottom {
        width: 100%
    }
    .prenotazione {
        margin-left: 190px;
    }
    .bottom_header {
        padding: 0px 20px;
    }
    .m2b {
        margin-left: 15px;
    }
    nav ul li {
        background: none;
        padding: 0px 8px;
    }
    .c1a {
        width: 50%;
        margin-left: 0;
        margin-top: 88px;
    }
    .c1a2 {
        width: 50%;
        margin-left: 0;
        margin-top: 88px;
    }
    .c1 {
        width: 50%
    }
    .m2 {
        width: 33%;
        padding: 0px;
    }
    .box_servizi {
        padding-top: 230px;
    }
    .c1b {
        width: 50%
    }
    .c1a_label {
        width: 50%;
        margin-left: 0px;
        margin-top: -230px;
    }
    .logo_cont2 {
        margin-top: 190px;
    }
    .dintoni {
        width: 31%
    }
    .label_dintorni {
        width: 100%
    }
    .label {
        width: 100%
    }
    .logo_cont3 {
        display: none;
    }
    .footer1 {
        float: left;
        width: 60%;
        margin-right: 30px;
        margin-left: 20px;
    }
    .box_footer3 {
        float: none;
        width: 95%;
        margin: 0 auto;
        color: #000;
        margin-top: 20px;
    }
    .box_footer2 {
        width: 27%
    }
    .titolo_footer {
        display: none
    }
}

@media screen and (max-width: 720px) and (min-width: 0px) {
    #top {
        display: block;
    }
    .c1a2 {
        width: 100%;
        float: left;
        margin-left: 0;
        background: rgba(31, 31, 31, 0.83);
        padding: 12px 20px;
        text-align: right;
    }
    .main {
        width: 100%
    }
    #nav {
        display: block;
    }
    header {
        display: none;
    }
    .spazio {
        display: none;
    }
    .demo-2 .sl-slider-wrapper {
        margin-top: 0px;
    }
    .c1a {
        width: 100%;
        float: none;
        margin-left: 0px;
        background: rgba(31, 31, 31, 0.83);
        padding: 12px 10px;
        text-align: left;
        margin-top: 193px;
    }
    .c1 {
        width: 100%
    }
    .logo_cont {
        display: none;
    }
    .c1_img {
        width: 100%;
        margin-top: 0px;
    }
    #text-2 {
        margin-top: 280px;
    }
    .m2 {
        width: 50%
    }
    .c1b {
        width: 100%
    }
    .c1a_label {
        width: 100%;
        float: left;
        margin-left: 0px;
        margin-top: 0px;
        background: #9b9150;
        padding: 12px 20px;
        text-align: right;
        webkit-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
    }
    .logo_cont2 {
        display: none;
    }
    .clear2 {
        margin-bottom: 10px;
    }
    .dintoni {
        float: none;
        width: 90%;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .label_dintorni {
        width: 100%
    }
    .label {
        width: 100%
    }
    .logo_cont3 {
        display: none;
    }
    .logo_cont4 {
        display: none;
    }
    .box_slider {
        display: table;
        overflow: hidden;
        height: auto;
    }
    .footer1 {
        float: left;
        width: 90%;
        padding-left: 40px;
        /* margin-right: 30px; */
    }
    .clear3 {
        display: none;
    }
    .divisore_footer {
        height: 20px;
    }
}