@font-face { font-family: '900book'; src: url("../fonts/novecentowide-book-webfont.woff2") format("woff2"), url("http://4genergia.it/guida-bolletta/fontsnovecentowide-book-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: '900bold'; src: url("../fonts/novecentowide-bold-webfont.eot"); src: url("../fonts/novecentowide-bold-webfont.eot?") format("embedded-opentype"), url("../fonts/novecentowide-bold-webfont.woff2") format("woff2"), url("../fonts/novecentowide-bold-webfont.woff") format("woff"), url("../fonts/novecentowide-bold-webfont.ttf") format("truetype"), url("../fonts/novecentowide-bold-webfont.svg") format("svg"); font-weight: normal; font-style: normal; }

::-moz-selection { color: #484848; background: #b0dec1; }

::selection { color: #fff; background: #004077; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { height: 100vh; -webkit-font-smoothing: antialiased; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }

main { display: block; }

body { line-height: 1; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

a:focus { outline: none; }

img { border: 0; -ms-interpolation-mode: bicubic; }

body { font-size: 16px; line-height: 24px; color: #484848; font-family: 'lorarg', serif; overflow: hidden; }

a { color: inherit; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; text-decoration: none; }

h1 { color: #4e4e4e; }

h2, h3 { color: #e84e0f; }

.container { width: 1140px; padding: 30px; margin: 0px auto; margin-right: auto; margin-left: auto; position: relative; height: 100%; }

.container-full { width: 100% !important; margin: 0px auto; margin-right: auto; margin-left: auto; position: relative; height: 100%; }

.container:before, .container-full:before { display: table; content: " "; }

.box-wrapper { width: 100%; height: 100%; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

img.mail {
    width: auto!important;
    padding-top: 0!important;
    margin: 0px!important;
}


.no-scroll{overflow: hidden !important;}

.active-dx, .active-sx { width: 200px; height: 50px; position: relative; z-index : 1;}

/*.active-sx:before {
    content: "";
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    height: 100%;
    width: 170px;
    border-radius: 100%;
    background: rgba(113,113,116,0.9);
}

.active-dx:before {    
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    background: rgba(113,113,116,0.9);
    height: 100%;
    width: 170px;
    border-radius: 100%;
}*/



/********* CUSTOM SCROLLBAR */

::-webkit-scrollbar { width: 5px; }

::-webkit-scrollbar-track { background-color: #ccc; }

::-webkit-scrollbar-thumb { background-color: #e84e0f; }

::-webkit-scrollbar-thumb:window-inactive { background-color: #e84e0f; }



#invoice { z-index: 99; text-align: center; }

#get-pdf { position: relative; top: 0px; left: 0px; height: 100vh; z-index: 99; text-align: center; background-image:linear-gradient(to bottom left, #dcdcdc, #bfbfbf); display: none; }

#invoice .intro { width: 35%; height: 100%; text-align: center; position: fixed; left:0; }

#invoice .intro .avatar { position: relative; margin: 10% auto; margin-bottom: 7%; }

#invoice .intro .avatar img {width: 50% !important; padding-top: 0px !important;}

#invoice .intro img { width: 15%; padding-top: 35px; margin: 0px 30px;}

#invoice .intro h1 { font-family: '900book', sans-serif;  font-size: 80%; line-height: 2em; padding: 0px 30px; text-align: center; white-space: pre-wrap;}



.change-fornitura{width: 100%; height: 20%; position: relative; text-align: center; margin: 0 auto;}

#show-gas{position: relative; float:right; width:45%; height: 100%; cursor: pointer; background-image: url('../images/flame-icon-off.svg'); background-repeat: no-repeat; background-position: top left;background-size: 150px;}
#show-gas.active-dx {
    background-image: url(../images/flame-icon.svg);
}

/*#show-gas:hover{background-image: url('../images/flame-icon.svg');}*/

#show-luce{position: relative; float:left; width:45%; height: 100%; cursor: pointer; background-image: url('../images/bulb-icon-off.svg'); background-repeat: no-repeat; background-position: top right;background-size: 150px;}
#show-luce.active-sx {
    background-image: url(../images/bulb-icon.svg);
}

#show-gas:hover, #show-luce:hover{

    opacity: 0.6;

    -webkit-transition: all 150ms linear;

    -moz-transition: all 150ms linear;

    -ms-transition: all 150ms linear;

    -o-transition: all 150ms linear;

    transition: all 150ms linear;

}

/*#show-luce:hover{background-image: url('../images/bulb-icon-hover.svg'); height: 125%; top:-47px;}*/



#invoice .intro .col-12 {font-family: '900bold', sans-serif;width: 100%; font-size: 1em; line-height: 1.5em; padding: 0px 60px; text-align: center; position: absolute; bottom: 60px;}

#invoice .intro .col-12 i { color: #e84e0f; font-size: 35px; margin: 10px 30px 30px 30px; }
a.btn-mail {
    background: #fe6e3f;
    color: #fff;
    font-family: "Maven Pro", Arial, Helvetica, sans-serif !important;
    border-radius: 40px;
    padding: 15px 30px;
    line-height: 40px;
    font-size: 20px;
    position: relative;
    top: 15px;
}

#invoice .bolletta { background-color: #fff; width:65%; height: 100vh; position: absolute; right:0; overflow-y: scroll;}

#invoice .bolletta .body-luce-r{display: none;}

#invoice .bolletta .body-f, #invoice .bolletta .body-r {display: none; position: relative;  height: auto; top: 7%; text-align: left;}

#invoice .bolletta .body-f .content, #invoice .bolletta .body-r .content {margin: auto; overflow: visible; border: 1px solid #eaeaea; max-width: 652px; min-height: 815px; max-height: 815px; width: 100%; height: 100%; position: relative; z-index: 20; box-shadow: 5px 5px 25px rgba(204, 204, 204, 0.44);}

#invoice .bolletta .body-f .content{background-image: url('../images/bolletta-gas-f.png'); background-repeat: no-repeat; background-position: top center;}

#invoice .bolletta .body-r .content{background-image: url('../images/bolletta-gas-r.png'); background-repeat: no-repeat; background-position: top center;}



#invoice .bolletta .body-luce-f, #invoice .bolletta .body-luce-r{ position: relative;  height: auto; top: 7%; text-align: left;}



#invoice .bolletta .body-luce-f .content, #invoice .bolletta .body-luce-r .content {margin: auto; overflow: visible; border: 1px solid #eaeaea; max-width: 652px; min-height: 815px; max-height: 815px; width: 100%; height: 100%; position: relative; z-index: 20; box-shadow: 5px 5px 25px rgba(204, 204, 204, 0.44);}

#invoice .bolletta .body-luce-f .content{background-image: url('../images/bolletta-luce-f.png'); background-repeat: no-repeat; background-position: top center;}

#invoice .bolletta .body-luce-r .content{background-image: url('../images/bolletta-luce-r.png'); background-repeat: no-repeat; background-position: top center;}



#ss, #ss-luce, #ss-b, #ss-luce-b{

    display: block !important;

    text-align: center;

    margin: auto;

    top: 0;

    right: 5px;

    width: 130px;

    height: 150px;

    position: fixed;

    background-color: #fff;

    box-shadow: 0px 0px 10px #969696;

    z-index: 99;

    cursor: pointer;

    background-repeat: no-repeat;

    background-position: center 9px;

    background-size: 66%;

}

#ss{background-image: url('../images/switch-icon.svg');}

#ss-b{background-image: url('../images/switch-icon-back.svg');}

#ss-luce{background-image: url('../images/switch-icon-luce.svg');}

#ss-luce-b{background-image: url('../images/switch-icon-back-luce.svg');}





#ss .info, #ss-b .info, #ss-luce .info, #ss-luce-b .info{

    font-family: '900book', sans-serif;

    font-size: 0.8em;

    line-height: 0.1em;

    text-align: center;

    position: relative;

    top: 118px;

    display: inline;

}



#area-f1, #area-f2, #area-f3, #area-f4, #area-f5, #area-f6, #area-f7, #area-f8, #area-f9, #area-r1, #area-r2, #area-r3, #area-r4, #area-r5, #area-r6, #area-luce-f1, #area-luce-f2, #area-luce-f3, #area-luce-f4, #area-luce-f5, #area-luce-f6, #area-luce-f7, #area-luce-f8, #area-luce-f9, #area-luce-r1, #area-luce-r2, #area-luce-r3, #area-luce-r4, #area-luce-r5, #area-luce-r6{position: absolute; border: 2px solid red; background-color: rgba(255,0,0,0.01); cursor: pointer; z-index: 1000;}

#area-f1:hover, #area-f2:hover, #area-f3:hover, #area-f4:hover, #area-f5:hover, #area-f6:hover, #area-f7:hover, #area-f8:hover, #area-f9:hover, #area-r1:hover, #area-r2:hover, #area-r3:hover, #area-r4:hover, #area-r5:hover, #area-r6:hover, #area-luce-f1:hover, #area-luce-f2:hover, #area-luce-f3:hover, #area-luce-f4:hover, #area-luce-f5:hover, #area-luce-f6:hover, #area-luce-f7:hover, #area-luce-f8:hover, #area-luce-f9:hover, #area-luce-r1:hover, #area-luce-r2:hover, #area-luce-r3:hover, #area-luce-r4:hover, #area-luce-r5:hover, #area-luce-r6:hover{border: 2px inset red; background-color: rgba(255,0,0,0.3);-webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -ms-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; text-decoration: none;}



/** AREE FRONTE BOLLETTA **/

#area-f1, #area-luce-f1{

    width: 265px;

    height: 120px;

    top: 3%;

    right: 5%;

}

#area-f2, #area-luce-f2{

    width: 225px;

    height: 115px;

    top: 16%;

    left: 8%

}

#area-f3 {

    width: 613px;
    height: 136px;
    top: 75%;
    right: 2.5%;

}
#area-luce-f3 {
    width: 613px;
    height: 114px;
    top: 79%;
    right: 2.5%;
}
#area-f4, #area-luce-f4{

    width: 307px;

    height: 103px;

    top: 38%;

    left: 3.2%;

}

#area-f5, #area-luce-f5{

    width: 270px;

    height: 120px;

    top: 68.5%;

    right: 1.5%;

}

#area-f6{

    width: 308px;

    height: 246px;

    top: 38%;

    right: 2.5%;

}
#area-luce-f6{
    width: 308px;
    height: 255px;
    top: 37%;
    right: 2.5%;
}


#area-f7, #area-luce-f7{

	width: 307px;
    height: 120px;
    top: 53.5%;
    left: 3.2%;

}

#area-f8 {

    width: 613px;
    height: 31px;
    top: 91.5%;
    left: 3.2%;

}
#area-luce-f8 {
    width: 613px;
    height: 31px;
    top: 93%;
    left: 3.2%;
}
#area-f9, #area-luce-f9{

    width: 613px;
    height: 35px;
    top: 34%;
    left: 3.2%;

}

/** AREE RETRO BOLLETTA **/

#area-r1{

    width: 610px;
    height: 217px;
    top: 8%;
    left: 3.2%;

}
#area-luce-r1 {
    width: 610px;
    height: 325px;
    top: 5%;
    left: 3.2%;
}
#area-r2, #area-luce-r2{

    width: 260px;

    height: 135px;

    top: 2%;

    right: 3.5%;

}

#area-r3 {

    width: 610px;
    height: 289px;
    top: 54%;
    left: 3.2%;

}
#area-luce-r3 {
    width: 610px;
    height: 132px;
    top: 44.5%;
    left: 3.2%;
}
#area-r4 {

    width: 610px;
    height: 152px;
    top: 35.5%;
    left: 3.2%;

}
#area-luce-r4 {
    width: 610px;
    height: 321px;
    top: 60.5%;
    left: 3.2%;
}
#area-r5, #area-luce-r5{

    width: 555px;

    height: 77px;

    top: 45%;

    right: 1.5%;

}

#area-r6, #area-luce-r6{

    width: 539px;

    height: 190px;

    top: 75%;

    right: 3.5%;

}



/*** MODAL STYLE ***/

.modal.open .modal-overlay { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); z-index: 11000; }

.modal .modal-box { opacity: 0; position: absolute; top: 0; left: 0; right:0; bottom:0; width: 100vw; height: 100vh; background-color: #f9f9f9; z-index: 11001; -moz-transform: scale(0.1); -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); -moz-transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); }

.modal-box h3 { font-family: '900bold', sans-serif; font-size: 24px; text-align: justify; color: #004077; padding: 5% 5% 1% 5%; }

.modal-content{font-family: '900book', sans-serif; font-size: 1.2em; text-align: justify; color: #009ee3; padding: 0% 1% 2% 5%; line-height: 1.5em; white-space: pre-wrap;}

.modal.open .modal-box { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); }

.modal.open .modal-box.close {opacity: 0; -moz-transform: scale(0.1); -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); -moz-transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); }

.modal .modal-close {font-family: '900bold', sans-serif; position: absolute; background-color: #e00808; color: #fff; text-decoration: none; padding: 15px 25px; right: 20px; top: 20px; z-index: 11002; }

.modal .modal-close:hover { background-color: #c70707; color: #fff; }



.modal-content .modal-text{height: 75vh; overflow-y: scroll; padding-right: 70px;}





@media (max-width: 1000px){

    body{overflow-y: scroll;}

    #invoice .intro {width: 100%; position: relative;  padding-bottom: 30px;}

    #invoice .intro .avatar { position: relative; margin: auto; }

    #invoice .intro .avatar img {width: 25% !important; padding-top: 30px !important;}

    #invoice .intro h1{position: relative; text-align: center; font-size: 0.85em; width: 100%; top: 25px; padding-bottom: 20px;}

    .change-fornitura{position: relative; padding: 10px; height: 150px; margin-bottom: 65px;}

    #invoice .intro .col-12{position: relative;}

    #invoice .bolletta {width: 100%; position: relative; height: auto; overflow: hidden;}

    #invoice .bolletta .body-f, #invoice .bolletta .body-r, #invoice .bolletta .body-luce-f, #invoice .bolletta .body-luce-r{ text-align: center; padding: 30px 0px;}

    #invoice .bolletta .body-f .content, #invoice .bolletta .body-r .content{margin: auto;}

    

    #ss, #ss-luce, #ss-b, #ss-luce-b{position: relative; background-color: transparent; box-shadow: none;  margin: auto; left: -60px;}

    #ss .info, #ss-b .info, #ss-luce .info, #ss-luce-b .info{position: relative; top: 65px; left: 115px; float: right; font-size: 1.5em;}

    

    /*.active-sx:before {content: ""; position: absolute; left: -2%; bottom: -20px; height: 1px; width : 29%; border-bottom:5px solid #ffed00;}

    .active-dx:before {content: ""; position: absolute; right: -2%; bottom: -20px; height: 1px; width: 29%; border-bottom:5px solid #00acfd;}    */

    

    .modal-box h3 {text-align: left; font-size: 1.5em; padding: 5% 5% 1% 5%; line-height: 1em; width: 85%;}

    .modal-content{font-size: 0.7em; padding: 0% 5% 2% 5%; line-height: 2em;}

    .modal-content .modal-text{height: 75vh; overflow-y: scroll; padding-right: 20px;}

}



@media (max-width: 1799px) and (min-width: 1200px){

/*    .active-sx:before {content: ""; position: absolute; left: -2%; bottom: -20px; height: 1px; width: 50%; border-bottom:5px solid #ffed00;}

    .active-dx:before {content: ""; position: absolute; right: -2%; bottom: -20px; height: 1px; width: 50%; border-bottom:5px solid #00acfd;}    
*/
}



@media (max-width: 1199px) and (min-width: 1000px){

/*    .active-sx:before {content: ""; position: absolute; left: -2%; bottom: -20px; height: 1px; width: 80%; border-bottom:5px solid #ffed00;}

    .active-dx:before {content: ""; position: absolute; right: -2%; bottom: -20px; height: 1px; width: 80%; border-bottom:5px solid #00acfd;}    
*/
}



@media (max-width: 999px) and (min-width: 900px){

/*    .active-sx:before {content: ""; position: absolute; left: -2%; bottom: -20px; height: 1px; width: 32%; border-bottom:5px solid #ffed00;}

    .active-dx:before {content: ""; position: absolute; right: -2%; bottom: -20px; height: 1px; width: 32%; border-bottom:5px solid #00acfd;}    
*/
}



@media (max-width: 899px) and (min-width: 800px){

/*    .active-sx:before {content: ""; position: absolute; left: -2%; bottom: -20px; height: 1px; width : 29%; border-bottom:5px solid #ffed00;}

    .active-dx:before {content: ""; position: absolute; right: -2%; bottom: -20px; height: 1px; width: 29%; border-bottom:5px solid #00acfd;}    
*/
}



@media (max-width: 799px) and (min-width: 700px){

/*    .active-sx:before {content: ""; position: absolute; left: -2%; bottom: -20px; height: 1px; width : 35%; border-bottom:5px solid #ffed00;}

    .active-dx:before {content: ""; position: absolute; right: -2%; bottom: -20px; height: 1px; width: 35%; border-bottom:5px solid #00acfd;}    
*/
}



@media (max-width: 699px) and (min-width: 585px){

/*    .active-sx:before {content: ""; position: absolute; left: -2%; bottom: -20px; height: 1px; width : 43%; border-bottom:5px solid #ffed00;}

    .active-dx:before {content: ""; position: absolute; right: -2%; bottom: -20px; height: 1px; width: 43%; border-bottom:5px solid #00acfd;}    
*/
}
@media (max-width: 1000px){
#show-luce {
    background-size: auto;
}
#show-gas {
    background-size: auto;
}
}

@media (max-width: 579px){

    .box-wrapper{height: 100%;}

    #invoice{display: none;}

    #get-pdf{display: block; height: 100%}

    #get-pdf .intro {width: 100%; position: relative; height: 100%; padding-bottom: 15%;}

    #get-pdf .intro .avatar { position: relative; margin: auto; }

    #get-pdf .intro .avatar img {width: 75% !important; padding-top: 75px !important;}

    #get-pdf .intro h1{white-space: pre-wrap; position: relative; text-align: center; font-size: 1em; line-height: 1.3em; width: 85%; margin: auto; top: 50px; font-family: '900book', sans-serif;}

    #get-pdf a.download-gas{background-color: #32b3ea; display: block; position: relative; margin: 35px auto; margin-top: 100px; width: 85%; padding: 20px; color: #ffffff; font-family: '900bold', sans-serif; font-size: 20px;}

    #get-pdf a.download-luce{background-color: #ffed00; display: block; position: relative; margin: 35px auto; width: 85%; padding: 20px; color: #004077; font-family: '900bold', sans-serif; font-size: 20px;}

    #get-pdf a:hover{opacity: 0.7;}

}