h1{ margin-bottom: 40px}

.container.fixed-bg{ position: fixed; height: 100vh; z-index: -1; background-size: cover; background-color: transparent}
.container.main{ padding: 0; background-color: transparent }
.container.header{ padding: 0; height: 100vh; background-color: transparent;}


#arrow_down{ cursor:pointer}


nav.PageNav ul.menu{ text-align: left; margin: 0 }
nav.PageNav ul.menu li{ display: inline-block; padding: 0 5px; margin: 0 5px; height:calc( ( var(--main-topnavigation-height) - 25px )/2 );}
nav.PageNav ul.menu li a{ text-decoration: none; display: block}
nav.PageNav ul.menu li img{ height: 40px; display: block; margin: auto}
nav.PageNav ul.menu li span{ display: block; margin: auto; font-size: 100%; margin: 5px auto auto;}
nav.PageNav.service ul.menu li { font-size: 80% }

header{ position: relative; z-index: 1}


.container.header #claim { text-align: center; bottom: 20vh; position: absolute; background-color: transparent;}

.container.header #claim p{ font-size: 120px; text-transform: uppercase; display: inline-block; border-bottom: white solid 7px; text-shadow: 2px 2px 5px #000;  }


.container.header #arrow_down{ background-color: transparent; bottom: 5vh; position: absolute; text-align: center; }


#topnavigation .logo.holder{height: 130px;width: 260px;background-size: cover;}
#topnavigation .side-navigation.right{ text-align: right; line-height: 80px; }
#topnavigation .side-navigation.right .separator-vertial-line{height: 68px;}
#topnavigation ul.menu.social { padding-right: 20px;  }
#topnavigation ul.menu.social li{ display: inline-block; }
#topnavigation ul.menu.social img{ height: 42px }
#topnavigation .side-navigation.right .row{ display: flex; }
#topnavigation .side-navigation.right .sign img{ height: 68px; }
#topnavigation .side-navigation.right .text-box{ height: 80px; display: table; }
#topnavigation .side-navigation.right p{ font-size: 90%; line-height: 18px; vertical-align: middle;  display: table-cell;}
#topnavigation .side-navigation.right p span{ font-size: 140% }

/*#topnavigation minified behaviour */
#topnavigation.minified{ position: fixed; height: 60px; z-index: 2}
#topnavigation.minified .logo.holder{height: 80px;width: 160px; }
#topnavigation.minified ul.menu.social img{ height: 28px }
#topnavigation.minified .side-navigation.right .sign img{ height: 48px; }
#topnavigation.minified .side-navigation.right .text-box{ height: 60px;}
#topnavigation.minified .side-navigation.right{ line-height: 60px; }
#topnavigation.minified nav.onePageNav ul.menu li{ padding: 18px 5px;}

/*sidebar navigation*/
#sidebar-wrapper{ width: 150px; display: none; overflow: hidden;}
#sidebar-wrapper nav.onePageNav.vertical{ margin-left: -60px;  top: 40px; left: calc((100vw - 1136px)/2 - 150px); width: 150px;position: fixed; height: 100%; overflow-y: auto; z-index: 1000; display: flex}
#sidebar-wrapper nav.onePageNav.vertical ul.menu{ width: 143px;}
#sidebar-wrapper nav.onePageNav.vertical ul.menu li{ display: block; width: 100%; padding: 15px 0; overflow: hidden}
#sidebar-wrapper nav.onePageNav.vertical ul.menu li img{ filter: invert(100%);}
#sidebar-wrapper nav.onePageNav.vertical #barwrapper{ width:7px;}
#sidebar-wrapper nav.onePageNav.vertical #barwrapper .bar{ width: 100%; height: 75px; position: relative;  transition: top ease 0.2s;}

/**/
#pagesholder{ width: 100%; min-height: 10vh;}
#pagesholder .autoloader.loaded{ width: 100%; margin: auto; padding: 0 }

/* blocks */
div.section_block{ padding-bottom: 30px }

/*contacts*/
.selectableFormContainer{ border: 7px solid black; width: 65%; font-family: 'Roboto', sans-serif; padding: 20px 150px 20px 60px}
.genericForm.selectableFormContainer label{ font-size: 25px; text-transform: uppercase; line-height: 0;}
.genericForm.selectableForm { display: none}
.genericForm.selectableFormContainer h3{ font-size: 18px; margin-bottom: 30px;}
.genericForm.selectableFormContainer .stepnum{ font-size: 38px; }
.genericForm.selectableFormContainer .dropdown button{ width: 90%}
.genericForm.selectableFormContainer .dropdown button .dropdown-menu{width: 90%; font-size: 120%; border-radius: 0; border: none;text-align: center; }
.genericForm.selectableFormContainer select, .genericForm.selectableFormContainer button{ font-size: 22px; color: black; }
.genericForm.selectableFormContainer #subject{ display: none; }

/* Facebook Events Customization */

.citrino.business.facebookevents{font-family: 'Roboto'; text-transform: uppercase;}
.citrino.business.facebookevents .infoText{ font-weight: bold; width: 20%; vertical-align: middle; font-size: 18px; height: 100%; padding-top: 5px;}
.citrino.business.facebookevents .infoText span{ display: block; }
.citrino.business.facebookevents .infoText span.mounth{ font-size: 21px; }
.citrino.business.facebookevents .infoText span.day{ font-size: 28px; color: #FF39AF; line-height: 15px }
.citrino.business.facebookevents .infoText span.hours{ font-size: 15px; line-height: 25px;}


.citrino.business.facebookevents .info{ display: flex;}
.citrino.business.facebookevents .info .eventtitle { display: table; height: 100%; width: 80%; padding: 0 10px; }
.citrino.business.facebookevents .info .eventtitle span{  display: table-cell; vertical-align: middle; line-height: 17px;}
.citrino.business.facebookevents .info .attending{ font-size: 14px }

/* slices */
#mobileNav{display: none; width: 100%; background-color: rgba(0,0,0,0.8); text-align: right;  position: fixed; z-index: 1}
#mobileNav nav{ display: inline-block; }
#mobileNav nav #modal-open{ filter: invert(100%);  height: 24px; margin: 15px 30px;}

/* modal */

.modal{ background-color: rgba(255,255,255, 0.8); }
.modal .description { font-family: 'Roboto'; text-transform: none; }

/*modal nav */
.modal nav.onePageNav{ margin: auto; width: 50vw; margin-top: 10vh; }
.modal nav.onePageNav ul.menu { text-align: left; }
.modal nav.onePageNav ul.menu li{ display: block; width: 100%; padding: 15px 0; overflow: hidden; font-size: 300%;}
.modal nav.onePageNav ul.menu li a img{ display: inline-block;}
.modal nav.onePageNav ul.menu li span{ display: inline-block;}

/* form and fields */

input, .form-control, .btn{ border-radius: 0; border: 0; box-shadow: none; }
#cinquepermilleform input{ font-size: 130%; padding: 20px; font-weight: 200 }
#simpleContactSubmitButton{ padding: 20px 40px; line-height: 0px; }

/*google maps local*/
#google-maps{ position: relative; padding-bottom: 35%; oheight: 0; overflow: hidden; margin: auto; width: 75%;}
#google-maps iframe { position: absolute; top: 0; left: 0;  width: 100% !important; height: 100% !important;}

/*logos grid container*/
div.logo-container:nth-of-type(19) { justify-content: space-around;}

div.logo-container.container {
    display: flex;
    padding: 6px 0;
    background-color: yellow;
    border: 1px solid #ccc;
    width: 90%;
}

div.logo-container.box {
    width: 200px;
    background-color: lightgreen;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.logo-container.box1 {}
div.logo-container.box2 {}
div.logo-container.box3 {}
div.logo-container.box4 {}
div.logo-container.box5 {}
div.logo-container.box6 {}
div.logo-container.box7 {}
div.logo-container.box8 {}
div.logo-container.box9 {}
div.logo-container.box10 {}
div.logo-container.box11 {}
div.logo-container.box12 {}
div.logo-container.box13 {}
div.logo-container.box14 {}
div.logo-container.box15 {}
div.logo-container.box16 {}
div.logo-container.box17 {}
div.logo-container.box18 {}
div.logo-container.box19 {}



/*special*/
h3.senderclaim{ font-size: 300% }
#calculator_container,
#firma-ora_container{ padding: 0; }
.section_block > .container { width: 1136px; padding: 30px 20px; background: transparent; }
.section_block.separator {height: 300px;}
#whatappsender img.logo{ height: 150px  }
#whatappsender{ font-size: 150% }
#whatappsender input{ padding-left: 20px; }
#whatappsender button{ padding: 13px 80px; vertical-align: top;}
#codicefiscale{ font-size: 300% }
#codicefiscale span{border: 2px solid white; border-right: none; border-top: none; display: inline-block; width: 36px; text-align: center; }
#codicefiscale span:last-of-type{border: 2px solid white; border-top: right; border-top: none; }
#mobilenav a{ padding: 10px 20px; border-left: 2px solid #000 }
#form_riepilogo{padding-top: 40px; padding-bottom: 0}
#cosa-facciamo .section_block{ padding-bottom: 10px}

.oc-citrino-box.oc-citrino-three-inline-box.socialshare .oc-citrino-box{ font-size: 200%; display: table} 
.oc-citrino-box.oc-citrino-three-inline-box.socialshare .oc-citrino-box .sharingtext{display: table-row; height: 80%;} 
.oc-citrino-box.oc-citrino-three-inline-box.socialshare .oc-citrino-box .sharingbutton-box{display: table-row; height: 20%;}
.oc-citrino-box.oc-citrino-three-inline-box.socialshare .oc-citrino-box .sharingbutton-box a{ padding: 10px 40px; font-size: 22px;}
.oc-citrino-box.oc-citrino-three-inline-box.socialshare .oc-citrino-box span.quote { font-size: 214%; position: relative; line-height: 20px; top: 20px;}
.oc-citrino-box.oc-citrino-three-inline-box.socialshare .oc-citrino-box .sharingbutton-box img{ height: 32px; padding: 0 10px } 


#cinquepermilleExplain .oc-citrino-box{ height: 320px;}
#cinquepermilleExplain .oc-citrino-text-custom-text{font-weight:200; text-align:left; padding: 10px 20px;}
#cinquepermilleExplain .oc-citrino-text-count {font-size: 250%}


/* footer */
#footer{ height: 300px; background-color: #000; }
#footer .container{ background-color: #000; color: #fff; width: 1170px; margin: auto; display: flex; padding: 40px 20px;}
#footer .container .logo.holder{ width: 260px; height: 120px; margin-right: 20px; background-size: cover; background-position: center center; background-repeat: no-repeat; }
#footer .container .text{ margin-left: 20px; width: 70%; border-left: 1px solid #fff; padding-left: 40px;}
#footer .container .text .cit{ display: block; text-align: right; text-transform: uppercase;  }

.cc-grower{ position: fixed !important; z-index: 9999 !important; bottom: 0;}
.cc-window.cc-banner.cc-type-opt-out{ width: 100% }
.cc-revoke{ display: block !important; height: 75px !important}


/* manutenzione */
.maintenance .container.central .logo{ height: 200px; background-position: center; background-repeat: no-repeat; }

/*mobile settings*/
@media screen and (max-width: 1280px) {
	
}

@media screen and (max-width: 1136px) {
	.section_block > .container {    width: 100%; }
	
    #pagesholder .autoloader.loaded, #footer  .container{ width: 100%;}

	#mobilenav{ display: block;  width: 20%; font-size: 95% }
    #mainAsyncMent{ display: none }
    #sidebar-wrapper{ display: none }
    #topnavigation .side-navigation { width: calc(100% - 320px);}
    #topnavigation .side-navigation .innercontainer{ width: 40%; }


    .oc-citrino-three-inline-box .oc-citrino-image-box{ height: 150px; }

	.container.header #claim p{ width: 80%; font-size: 100px }

     

}

@media screen and (max-width: 960px) {
	
	#topnavigation .side-navigation.right p span {    font-size: 130%; }

	.container.header #claim p{ font-size: 80px }

	.citrino.business.facebookevents .event{ width: 49%; }
	#google-maps{  width: 100%;}

	div.section_block{ padding-bottom: 30px }
	.oc-citrino-three-inline-box .oc-citrino-image-upper-text{ height: 50px; }
	.oc-citrino-three-inline-box .oc-citrino-image-box{ height: 130px; }
	.oc-citrino-three-inline-box .oc-citrino-box { height: 200px; }
	#cinquepermilleExplain .oc-citrino-box{    height: auto;}
	
	
	#codicefiscale{ font-size: 200% }
	#codicefiscale span{ width: 26px; }

   

}

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

	.container.header #claim p{ font-size: 70px }

	.container.header{ height:calc(100vh);}
	#pagesholder {    margin-top: -60px; }
    .oc-citrino-inline-box{ display: block; }
    .oc-citrino-inline-box .oc-citrino-box{ width: 100%; text-align: left; }

	.oc-citrino-three-inline-box { display: block; flex-direction: row; overflow: hidden;}
	.oc-citrino-three-inline-box .oc-citrino-box{ width: 100%; margin: 5px 0; height: 280px;}
	#cinquepermilleExplain .oc-citrino-box{    height: 240px;}
	
	.oc-citrino-three-inline-box .oc-citrino-image-box{ height: 200px; }
	.oc-citrino-three-inline-box .oc-citrino-image-box .oc-citrino-image{ height: auto; width: 100%; }

	.oc-citrino-inline-title-highlight { flex-direction: column; }
	.oc-citrino-inline-title-highlight .oc-citrino-box.text-holder{ width: 100%; }
	.oc-citrino-inline-title-highlight .oc-citrino-box.image-holder{ padding-top: 10px; width: 100%;}

    .oc-citrino-inline-box { display: flex; }
    .oc-citrino-inline-box .oc-citrino-box:first-of-type{ margin-left: 0; order:2}
    .oc-citrino-inline-box {    display: flex;    flex-wrap: wrap; }

	.container.header .container.central{ margin-top: 25vh; }
	
	#topnavigation .side-navigation .innercontainer{ width: 70%; }
	#mobilenav{ width: 30%; }
	#topnavigation .side-navigation .codicefiscale{ display: none }

	#google-maps{  padding-bottom: 100%;}

    h3.senderclaim{font-size: 250%; }


	#footer .container .text{ width: 50%; }

	#codicefiscale{ font-size: 300% }
	#codicefiscale span{ width: 36px; }
    #cinquepermilleExplain .oc-citrino-text-custom-text{text-align:center; }
    
    
	.oc-citrino-box.oc-citrino-three-inline-box.socialshare .oc-citrino-box .sharingtext {  height: 40%; }
	.oc-citrino-box.oc-citrino-three-inline-box.socialshare .oc-citrino-box .sharingbutton-box {  height: auto; }

}

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

	#codicefiscale{ font-size: 200% }
	#codicefiscale span{ width: 26px; }
	
    #cinquepermilleExplain .oc-citrino-box{    height: 260px;}
    #whatappsender button { margin-top: 10px}
    .modal nav.onePageNav ul.menu li{ display: block; width: 100%; padding: 15px 0; overflow: hidden; font-size: 260%;}
    
    #topnavigation .side-navigation .innercontainer {  width: 60%; }
    #topnavigation .side-navigation .innercontainer a img{  width: 26px ; height: 26px }
}