/*****************************************************************************

   basic

*****************************************************************************/

/* Tahoma.ttf */
@font-face
{
   font-family: 'Tahoma';
   src: url('tahoma.ttf');
}

/* ITC Avant Garde Gothic Bold.otf */
@font-face
{
   font-family: 'ITC_Avant_Garde_Gothic_Bold';
   src: url('ITC Avant Garde Gothic Bold.otf');
}

body
{
   font-family: Tahoma;
   background-color: #D0D0D0;
   margin: 0 0;
}

body, th, td
{
   font-size: 1.1em;
   line-height: 1.8;
   color: #303030;
   padding: 0;
}

b
{
   color: #000000;
}

a, a:link, a:visited, a:active
{
   outline: none;
   text-decoration: underline;
   text-decoration-color: transparent;
   -webkit-text-decoration-color: transparent;
   -moz-text-decoration-color: transparent;
   transition: 0.1s;
}

a:hover, a:focus
{
   outline: none;
   text-decoration-color: #0C71D7;
   -webkit-text-decoration-color: #0C71D7;
   -moz-text-decoration-color: #0C71D7;
}

.reverse
{
   font-size: 0.9em;
   color: #FFFFFF;
   background-color: #0C71D7;
}

.nota
{
   font-size: 0.8em;
}

.underscore_title
{
   font-family: Tahoma;
   font-size: 1.1rem;
   font-weight: bold;
   background-color: #FFFFFF;
   text-align: center;
}


/*****************************************************************************

   contenitori testo

*****************************************************************************/

.text_container_1
{
   text-align: center;
   margin: 0 auto;
   padding: 50px 32px;
}

.text_container_1_gray
{
   text-align: center;
   margin: 0 auto;
   padding: 50px 32px;
   background: #E2DFDE;
   border-bottom: 8px solid #4F4A4A;
}

.text_container_1_cyan
{
   text-align: center;
   margin: 0 auto;
   padding: 50px 32px;
   background: #C9DEFF;
   border-bottom: 8px solid #0C71D7;
}

.text_container_2
{
   position: relative;
   text-align: justify;
   margin: 0 auto;
   max-width: 1120px;
}

.text_container_2_box
{
   text-align: justify;
   margin: 0 auto;
   max-width: 1184px;
}

.text_container_2_center
{
   text-align: center;
   margin: 0 auto;
   max-width: 1120px;
   padding: 0 32px;
}

.light_blue_colored_box
{
   background: #C9DEFF;
   padding: 32px 32px;
   border-radius: 15px;
}

/*****************************************************************************

link

*****************************************************************************/

.link
{
   color: #0C71D7;
   text-decoration: none;
   text-align: left;
}

.link_bold
{
   color: #0C71D7;
   font-weight: bold;
   text-decoration: none;
   text-align: left;
}

/*****************************************************************************

   controlli

****************************************************************************/

input, textarea
{
   padding: 12px;
}

select
{
   padding: 12px 50px 12px 12px;
   background: #FFFFFF;
   background-image: url('img_prog/arrow_down.png');
   background-position: 100%;
   background-repeat: no-repeat;
   background-size: 40px 40px;

   -webkit-appearance: none; /* remove corners */
   -moz-appearance: none;
}

input, textarea, select
{
   font-family: Tahoma;
   font-size: 1em;
   border: 2px solid #CCCCCC;
   border-radius: 5px;
   width: 100%;
   color: #000000;
   outline: none;
   transition: 0.1s;

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

input:focus, textarea:focus, select:focus
{
   border-color: #888888;
}

input:hover, textarea:hover, select:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, .button_link:hover
{
   border-color: #888888;
}

input[type=button], input[type=submit], input[type=reset]
{
   font-size: 1.1em;
   padding: 6px 32px;
   margin: 0;
   text-decoration: none;
   cursor: pointer;
   min-width: 153px; /* same width as compact reCaptcha */
   max-width: 350px;
   color: #FFFFFF;
   background-color: #0C71D7;
   border: 2px solid #BBBBBB;
}

input[type=button]:active, input[type=submit]:active, input[type=reset]:active, .button_link:active
{
   background-color: #0C71D7;
   transform: translate(3px, 3px);
}

input[type=submit]::-moz-focus-inner
{
   border: none;
}

input[type=checkbox], input[type=radio]
{
   display: none;
}

input[type=checkbox] + label span, input[type=radio] + label span
{
   width: 24px;
   height: 24px;
   background: url('img_prog/checks.png') 0 0 no-repeat;
   position: absolute;
   top: 2px;
   left: -3px;
}

input[type=checkbox]:not(:checked):hover + label span, input[type=radio]:not(:checked):hover + label span
{
   background: url('img_prog/checks.png') 0 -24px no-repeat;
}

input[type=checkbox]:checked + label span
{
   background: url('img_prog/checks.png') 0 -48px no-repeat;
}

input[type=checkbox]:checked:hover + label span
{
   background: url('img_prog/checks.png') 0 -72px no-repeat;
}

input[type=radio]:checked + label span
{
   background: url('img_prog/checks.png') 0 -96px no-repeat;
}

input[type=radio]:checked:hover + label span
{
   background: url('img_prog/checks.png') 0 -120px no-repeat;
}

label
{
   position: relative;
   padding-left: 32px;
   padding-bottom: 12px;
   display: block;
}

.button_link
{
   display: inline-block;
   padding: 6px 32px;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   color: #FFFFFF;
   background-color: #0C71D7;
   border: 0.1em solid #BBBBBB;
   border-radius: 5px;
   transition: 0.1s;
}

.button_link_pale
{
   display: block;
   max-width: 200px;
   padding: 3px 6px;
   margin: 5px auto;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   color #303030;
   background-color: #F4EEED;
   border: 2px solid #D0D0D0;
   border-radius: 5px;
   font-size: 0.85em;
   transition: 0.1s;
}

.button_link_pale:link
{
   color: #303030;
   text-decoration: none;
}

.button_link_pale:visited
{
   color: #303030;
   text-decoration: none;
}

.button_link_pale:hover
{
   border: 2px solid #B0B0B0;
   text-decoration: none;
}

.button_link_pale:focus
{
   text-decoration: none;
}

.button_link_pale:active
{
   transform: translate(3px, 3px);
   background-color: #F4EEED;
   text-decoration: none;
}

/*****************************************************************************

   GS logo in alto a sx

*****************************************************************************/

#gs_logo, #gs_logo_resp
{
   display: inline-block;
   vertical-align: middle;
}

#gs_logo
{
   width: 235px;
}

#gs_logo_resp
{
   width: 170px;
   float: left;
   padding-left: 20px;
}


/*****************************************************************************

   GDPR_box() 24/03/24 - attualmente non utilizzato, sostituito da Iubenda

*****************************************************************************/

/*
#gdpr_box
{
   display: none;
   position: fixed;
   font-size: 0.8em;
   bottom: 0px;
   z-index: 1000;
   background: #242729;
   border-top: 5px solid orange;
   width: 100%;
   color: #BBC0C4;
   text-align: center;
}
*/

/*****************************************************************************

   overlay per dialog box

*****************************************************************************/

#dim_screen
{
   position: fixed;
   display: none;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0,0,0,0.5);
   z-index: 500;
}

.no_select, .button_link
{
   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
         -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/*****************************************************************************

   form di ricerca

*****************************************************************************/

#search_box
{
   display: none;
   position: absolute;
   width: 200px;
   left: -155px;
   top: 80px;
   box-shadow: 0 0 10px rgba(0,0,0,0.3);
   z-index: 1000;
}

#search_box_resp
{
   display: none;
   position: absolute;
   width: 200px;
   left: -105px;
   top: 86px;
   box-shadow: 0 0 10px rgba(0,0,0,0.3);
   z-index: 1000;
}

.search_input
{
   width: 200px;
   font-size: 0.8em;
}

.search_icon
{
   vertical-align: middle;
   width: 35px;
   margin: 0 10px;
   border-radius: 5px;
   transition: 0.1s;
}

.search_icon:active
{
   transform: translate(2px, 2px);
}

.search_icon:hover
{
   background: #F4EEED;
}

.search_form_mi
{
   display: block;
   margin-left: 0;
   margin-right: auto;
}

.search_icon .search_icon_mi 
{
}

.search_icon_mi:hover
{
   background: #07539E;
}

/*****************************************************************************

   tabelle

*****************************************************************************/

table
{
   border-spacing: 0;
}

table td, th, table td *
{
   vertical-align: top;
}

.table_data
{
   border-collapse: collapse;
   border-spacing: 0;
   border: 3px solid #BBB;
   background-color: #EEEDEA;
}

/* Firefox hack for collapse bug; set cell border to 2px, for all other browsers is 1px */
@-moz-document url-prefix()
{
   .table_data
   {
      border-collapse: separate;
   }
}

.table_data th, .table_data td
{
   font-size: 1em;
   border: 1px solid #BBB;
   vertical-align: middle;
   padding: 8px 8px;
}

.table_default th, .table_default td
{
   border-style: none;
   border-collapse: collapse;
   border-spacing: 0;
   padding: 0;
}

/*****************************************************************************

   liste puntate e numerate

*****************************************************************************/

.bullet_point
{
   font-size: 0.9em;
   vertical-align: top;
   padding-top: 11px;
   padding-right: 8px;
}

.bullet_ordered
{
   font-size: 0.9em;
   vertical-align: top;
   padding-right: 8px;
}

.bullet_link
{
   font-size: 1em;
   vertical-align: top;
   padding-bottom: 8px;
   text-decoration: none;
   text-align: left;
}

.bullet_normal
{
   font-size: 0.9em;
   vertical-align: top;
   padding-bottom: 11px;
   text-align: left;
}

/*****************************************************************************

   titoli h1, h2, h3, h4

*****************************************************************************/

h1
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   padding: 0;
   margin: 0;
   font-size: 2.25em;
   font-weight: bold;
   line-height: 1.25;
   display: inline;
   color: #000000;
}

h2
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   padding: 0;
   margin: 0;
   font-size: 2.0em;
   font-weight: bold;
   line-height: 1.25;
   display: inline;
   color: #000000;
   text-align: left;
}

h2.bullet::before 
{
    content: "■"; /* "●"; */
    color: #0C71D7;
    font-size: 2rem;
    margin-right: 12px;
    position: relative;
    top: -2px;
    left: -3px;
 }

h3
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   padding: 0;
   margin: 0;
   font-size: 1.5em;
   font-weight: bold;
   line-height: 1.25;
   color: #000000;
   text-align: left;
}

h4
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   padding: 0;
   margin: 0;
   font-size: 1em;
   font-weight: bold;
   line-height: 1.25;
   color: #000000;
   text-align: left;
}

/*****************************************************************************

   ridefinizioni speciali titoli h1, h2, h3, h4

*****************************************************************************/

.h1_center
{
   vertical-align: middle;
   text-align: center;
   padding-top: 60px;
   padding-bottom: 40px;
}

.h2_art_title
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   font-size: 1.75em;
   font-weight: bold;
   line-height: 1.25;
   color: #000000;
   display: block;
   text-align: left;
}

.h2_contact_cta
{
   font-style: italic;
   font-size: 1em;
   color: #FFFFFF;
   text-align: left;
   display: block;
   padding: 1em 1em 1.5em 1em;
}

.h2_contact_title
{
   font-size: 1.5em;
   color: #FFFFFF;
}

.contact_occhiello
{
   font-size: 0.8em;
   text-align: center;
   font-style: italic;
   padding-bottom: 6px;
   margin-left: -20px;
   margin-right: -20px;
}

.trust_badge 
{
   display: block;
   position: absolute;
   bottom: -30px;
   width: 180px;
   height: auto;
   left: 50%;
   transform: translateX(-30%);
   z-index: 10;
   border: 1px solid #A0A0A0;
   border-radius: 10px;
   box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.4);
}

.h2_point
{
   padding-top: 8px;
   padding-right: 32px;
   vertical-align:top;
}

.h2_ordered
{
   padding-right: 32px;
   vertical-align: top;
}

.h2_reverse_risposte_mi
{
   color: #FFFFFF;
   font-size: 1em;
   font-weight: bold;
}

.h3_link
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   font-size: 1.1em;
   font-weight: bold;
   text-decoration: none;
}

.h3_link a:link,
.h3_link a:visited,
.h3_link a:hover,
.h3_link a:active
{
   font-size: 1.1em;
   color: #000000;
}

.h3_ordered
{
   font-size: 1em;
   padding-right: 32px;
   vertical-align: top;
}

.h3_style
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   padding: 0;
   margin: 0;
   font-size: 1.5em;
   font-weight: bold;
   line-height: 1.25;
   color: #000000;
   text-align: left;
}

.h4_style
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   padding: 0;
   margin: 0;
   font-size: 1em;
   font-weight: bold;
   line-height: 1.25;
   color: #000000;
   text-align:left;
}

.h4_rosso
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   padding: 0;
   margin: 0;
   font-size: 1em;
   font-weight: bold;
   line-height: 1.25;
   color: #DD0000;
}

.resource_link
{
   font-size: 1em;
   padding: 12px;
   vertical-align: middle;
   text-decoration: none;
}

/*****************************************************************************

   immagini

*****************************************************************************/

img, object
{
   width: 100%;
   height: auto;
}

.img_fixed, .img_bullet
{
   width: auto;
   max-width: 100%;
}

.img_bullet
{
   width: auto;
   vertical-align: top;
   padding-right: 19px;
}

.img_h2
{
   width: auto;
   vertical-align: top;
   padding-top: 16px;
}

.img_mi
{
   max-width: 350px;
}

.img_telinfo
{
   max-width: 240px;
   display: block;
   margin: 0 auto;
}

.img_text
{
   vertical-align: top;
   border-radius: 10px;
   display: block;
   margin: 0 auto;
   max-width: 100%;
   height: auto;
   width: auto;
}

.img_text_2
{
   max-width: 1000px;
   vertical-align: top;
}

.img_banner_1
{
   background-image: url('img_prog/banner.jpg');
   width: 100%;
   min-height: 75vh;
   background-position: 90% 15%;
   background-size: cover;
}

.img_flag
{
   width: 150px;
   margin: 16px 20px;
   border-radius: 10px;
}

/*****************************************************************************

   banner home page

*****************************************************************************/

.text_over_banner_container
{
   position: relative;
   text-align: left;
}

.text_over_banner
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   font-size: 9vmin;
   font-weight: bold;
   line-height: 2;
   color: #FFFFFF; /* #C0C0C0; */
   position: absolute;
   bottom: 0;
   left: 10%;
   transform: translate(-5%, -30%);
   padding: 0;
}

.video_home_page
{
   float: right;
   width: 400px;
   height: 224px;
   margin: 5px 0 32px 32px;
   border-radius: 10px;
}

/*****************************************************************************

   nav bar (non responsive)

*****************************************************************************/

.nav_elem
{
   font-size: 0.8em;
   color: #303030;
   text-align: center;
   cursor: pointer;
   padding: 8px 12px;
   display: inline-block;
   vertical-align: middle;
   transition: 0.1s;

   position: relative;
   top: -0.2px; /* compensiamo un leggero disallineamento y rispetto a .dropbtn */
}

.nav_elem:hover
{
   color: #FFFFFF;
   background-color: #0C71D7;
   cursor: pointer;
   border-radius: 5px;
}

.nav_elem:active
{
   color: #FFFFFF;
   background-color: #0C71D7;
   transform: translate(3px, 3px);
}

/*****************************************************************************

   icone telefono e email

*****************************************************************************/

.phone_icon
{
   cursor: pointer;
   padding: 21px 24px;
   top: 40px;
   display: inline-block;
   vertical-align: middle;
   background-image: url('img_prog/phone_icon.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 30px 30px;
   transition: 0.1s;
}

.phone_icon:hover
{
   filter: brightness(80%);
}

.phone_icon:active
{
   transform: translate(3px, 3px);
}

.email_icon
{
   cursor: pointer;
   padding: 21px 24px;
   top: 40px;
   display: inline-block;
   vertical-align: middle;
   background-image: url('img_prog/email_icon.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 30px 20px;
   transition: 0.1s;
}

.email_icon:hover
{
   filter: brightness(80%);
}

.email_icon:active
{
   transform: translate(3px, 3px);
}

.whatsapp_icon
{
   cursor: pointer;
   padding: 21px 24px;
   top: 40px;
   display: inline-block;
   vertical-align: middle;
   background-image: url('img_prog/whatsapp_icon.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 30px 30px;
   transition: 0.1s;
}

.whatsapp_icon:hover
{
   filter: brightness(80%);
}

.whatsapp_icon:active
{
   transform: translate(3px, 3px);
}

.darken_icon
{
   transition: 0.1s;
}

.darken_icon:hover
{
   filter: brightness(80%);
}

.lighten_icon
{
   transition: 0.1s;
}

.lighten_icon:hover
{
   filter: contrast(60%);
}

/*****************************************************************************

   icone Modifica/Elimina

*****************************************************************************/

.mod_del_icon
{
   height: 30px;
   width: auto;
   vertical-align: middle;
   transition: 0.1s;
}

.mod_del_icon:active
{
   transform: translate(3px, 3px);
}

/*****************************************************************************

   pulsanti per FB, Twitter, LinkedIn

*****************************************************************************/

.share_button
{
   padding-top: 18px;
   padding-left: 15px;
   padding-right: 15px;
   width: 30px;
   display: inline-block;
}

.share_button:active
{
   transform: translate(3px, 3px);
}

.share_button_menu_resp
{
   width: 65px;
   display: inline-block;
}

/*****************************************************************************

   diagrammi a torta disturbi ("Risultati")

*****************************************************************************/

.disorder_donut
{
   max-width: 120px;
   padding: 0 29px 0 29px;
   display: inline-block;
   text-align: center;
   vertical-align: top;
}

/*****************************************************************************

   banner responsive per titolo articolo + primo paragrafo + img

*****************************************************************************/

.art_banner_container
{
   display: flex;
   flex-direction: row;
}

.art_banner_left, .art_banner_right
{
   flex: 1;
   box-sizing: border-box;
}

.art_banner_left
{
   width: 100%;
}

.art_banner_right
{
   flex: 0 0 auto; /* non cresce né si restringe, solo quanto serve */
   padding: 0;
}

.art_banner_right img 
{
  width: 100%;              /* se vuoi che si adatti al contenitore */
}

/*****************************************************************************

   riquadri ultimi articoli in home page

*****************************************************************************/

.art_home_page
{
   background: #F4EEED;
   vertical-align: top;
   width: 310px;
   height: 580px;
   display: inline-block;
   padding: 0 0 25px 0;
   margin: 0 24px 32px 24px;
   border-radius: 30px;
   overflow: hidden;
}

.art_home_page_img
{
   width: 310px;
   height: 168px;
   object-fit: cover;
   object-position: top;
   display: block;
   margin: 0 auto;
}

/*****************************************************************************

   riquadri articoli - video

*****************************************************************************/

.art_home_page_video
{
   width: 309px;
   height: 168px;
   object-fit: cover;
   transition: 0.1s;
   margin-bottom: 32px;
}

.art_home_page_video:hover
{
   filter: grayscale(0);
   /* transform: scale(1.025); */
}

/*************************************************************************

   img lista articoli
   
**************************************************************************/

.art_list_img
{
   float: left;
   width: 200px;
   height: 112px;
   object-fit: cover;
   object-position: top;
   transition: 0.1s;
   border-radius: 10px;
}

/*
.art_list_img:hover
{
   transform: scale(1.025);
}
*/

/*****************************************************************************

   video full size in articolo

*****************************************************************************/

.video_text
{
   width: 500px;
   height: 281px;
   border-radius: 10px;
   display: block;
   margin: 0 auto;
}

/*****************************************************************************

   immagine full size in articolo

*****************************************************************************/

.art_main_img
{
   float: left;
   width: 50%;
   max-width: 370px;
   margin: 4px 48px 16px 0;
}

.art_main_img_right
{
   float: right;
   width: 50%;
   max-width: 370px;
   margin: 4px 0 24px 48px;
   border-radius: 10px;
}

/*****************************************************************************

   immagine in circolo d'inizio paragrafo
   
*****************************************************************************/

.div_art_main_img_circle
{
   margin-bottom: 50px;
}

.art_main_img_circle
{
   position: relative;
   object-fit: cover;
   border-radius: 50%;
   width: 250px;
   height: 250px;
   filter: grayscale(100%) contrast(80%);   
   margin-bottom: 40px;
   transition: 0.1s;
}

.h1_for_circle
{
   position: absolute;
   top: 125px;
   left: 190px;
   z-index: 99;
   font-family: 'ITC_Avant_Garde_Gothic_Bold';
   font-size: 2.0em;
   text-align: left;
   color: black;
   line-height: 1.25;
   padding: 0 5px;
}

.blue_shade_circle
{
   position: absolute;
   left: 0;
   top: 0;
   object-fit: cover;
   border-radius: 50%;
   width: 250px;
   height: 250px;
   background: rgba(12,113,215,0.5);
   margin-bottom: 48px;
   filter: brightness(100%);
   clip-path: polygon(
      150% 0,
      100% 100%,
      -30% 100%
   );
   transition: 0.1s;
}

.art_main_img_circle:hover
{
   border-radius: 0;
   width: 250px;
   height: 250px;
   filter: grayscale(0);
}

.art_main_img_circle:hover ~ .h1_for_circle
{
   background: rgba(255,2555,255,0.5);
   border-radius: 10px;
}

.art_main_img_circle:hover ~ .blue_shade_circle
{
   display: none;
}

.blue_shade_circle:hover
{
   display: none;
}

/*****************************************************************************

   immagine in circolo a destra nel paragrafo
   
*****************************************************************************/

.div_art_main_img_circle_right
{
   position: relative;
   float: right;
   margin: 48px 0 48px 48px;
}

.art_main_img_circle_right
{
   float: right;
   object-fit: cover;
   border-radius: 50%;
   width: 250px;
   height: 250px;
   filter: grayscale(100%) contrast(80%);   
   transition: 0.1s;
}

.blue_shade_circle_right
{
   position: absolute;
   left: 0;
   top: 0;
   object-fit: cover;
   border-radius: 50%;
   width: 250px;
   height: 250px;
   background: rgba(12,113,215,0.5);
   margin-bottom: 48px;
   filter: brightness(100%);
   clip-path: polygon(
      150% 0,
      100% 100%,
      -30% 100%
   );
   transition: 0.1s;
}

.art_main_img_circle_right:hover
{
   border-radius: 0;
   width: 250px;
   height: 250px;
   filter: grayscale(0);
}

.art_main_img_circle_right:hover ~ .blue_shade_circle_right
{
   display: none;
}

.blue_shade_circle_right:hover
{
   display: none;
}

/*************************************************************************

   grandi parentesi quadre in ombra
   
**************************************************************************/

.big_square_open
{
   position: absolute;
   top: -120px;
   left: -90px;
   z-index: 99;
   font-family: 'Tahoma';
   font-size: 10em;
   color: #F4EEED;
}

.big_square_close
{
   position: absolute;
   top: 77%;
   left: 102%;
   z-index: 99;
   font-family: 'Tahoma';
   font-size: 10em;
   color: #F4EEED;
}

.medium_square
{
   font-family: 'Tahoma';
   font-size: 6em;
   line-height: 1em;
   color: #F4EEED;
}

/*****************************************************************************

   contenitori colonne sx/dx per blog

*****************************************************************************/

.art_list_table
{
   display: table;
   width: 100%;
}

.art_list_left_column
{
   display: table-cell;
}

.art_list_right_column
{
   display: table-cell;
   vertical-align: top;
   padding-left: 32px;
   width: 100%;
}

/*****************************************************************************

   contenitori colonne sx/dx per brevi liste con immagini

*****************************************************************************/

.list_table_img
{
   display: flex;
   padding-bottom: 10px;
}

.list_left_column_img
{
   flex-shrink: 0;
   position: relative;
}

.list_left_column_img img
{
   height: auto;
}

.list_left_column_img_style
{
   width: 100px;
   border-radius: 15px;
}

.list_right_column_img
{
   vertical-align: top;
   text-align: left;
   padding-left: 32px;
   width: 100%;
   position: relative;
   top: -5px;
}

/*****************************************************************************

   colonna dx in modalità blog

*****************************************************************************/

.art_row
{
   display: table-row;
}

.art_left_column
{
   display: table-cell;
   max-width: 800px;
   padding: 0 64px 0 0;
   width: 70%;
}

.art_right_column
{
   max-width: 320px;
   padding-left: 32px;
   margin: 0 auto;
}

.art_right_gray_box
{
   max-width: 500px;
   margin: 0 auto;
   text-align: center;
   background: #F4EEED;
   border-radius: 10px;
   padding: 16px;
   box-shadow: 0 6px 6px 3px rgba(0, 0, 0, 0.4);
}

.art_right_dark_gray_box
{
   position: relative;
   max-width: 500px;
   margin: 0 auto 20px auto;
   text-align: center;
   background: #4F4A4A;
   padding: 16px 16px 32px 16px;
   border-radius: 10px;
   box-shadow: 0 6px 6px 3px rgba(0, 0, 0, 0.4);
}

/*****************************************************************************

   frecce per bottoni

*****************************************************************************/

.arrow_template
{
  border: solid #FFFFFF;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px;
}

.arrow_right
{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arrow_left
{
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.arrow_up
{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

/*****************************************************************************

   bottone con freccia per tornare in cima alla pag.

*****************************************************************************/

#go_top_button
{
  display: none;
  position: fixed;
  bottom: 90px;
  right: 19px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: rgba(0,0,0,0.4);
  color: white;
  cursor: pointer;
  padding-top: 12px;
  padding-left: 7px;
  border-radius: 5px;
}

#go_top_button:hover
{
  background-color: #555;
}

/*****************************************************************************

   google map

*****************************************************************************/

.google_map
{
   width: 500px;
   height: 280px;
   overflow: hidden;
}

/*****************************************************************************

   contatti

*****************************************************************************/

.div_home_cell
{
   display: table-cell;
   padding-left: 48px;
}

.div_home_contatti
{
   display: table-cell;
   vertical-align: top;
   text-align: left;
   padding-right: 48px;
   border-right: 1px solid #BBBBBB;
}

.campo_contatti
{
   height: 96px;
   width: 100%;
}

/*****************************************************************************

   modulo consenso informato

*****************************************************************************/

.modulo_consenso_div
{
   display: table-cell;
   vertical-align: top;
   text-align: left;
}

.modulo_consenso_div_2
{
   padding-left: 20px;
   line-height: 1.25;
}

.modulo_consenso_capt
{
   vertical-align: middle;
   line-height: 1.25;
   font-size: 1em;
}

.modulo_consenso_td_1
{
   line-height: 1.25;
   padding-right: 10px;
}

.modulo_consenso_td_2
{
   line-height: 1.25;
   padding-bottom: 1em;
}

/*****************************************************************************

   menu normale e responsive

*****************************************************************************/

#nav_menu, #nav_menu_resp
{
   position: sticky;
   z-index: 250;
   top: 0;
   left: 0;
   width: 100%;
   text-align: center;
   background: white;
   box-sizing: border-box; /* importante, altrimenti mette scrollbar horiz */
   border-bottom: 1px solid #0000005E;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

#nav_menu_resp
{
   display: none;
   align-items: center;
   justify-content: space-between;
}

#nav_bar
{
   display: inline-block;
   min-width: 850px;
}

#nav_bar_resp
{
   display: inline-block;
   position: absolute;
   left: 0;
 }

/*****************************************************************************

   security code e captcha

*****************************************************************************/

#sec_code_container
{
   text-align: center;
   width: 380px;
/*
   min-height: 140px;
*/
   margin: 0 auto;
}

.sec_code_row
{
   display: table-row;
}

.sec_code_cell
{
   display: table-cell;
}

#sec_code_submit
{
   float: right;
   vertical-align: middle;
   line-height: 140px;
   margin:0 auto;
}

#grecaptcha
{
   float: left;
   vertical-align: middle;
   line-height: 140px;
   width: 160px;
   margin:0 auto;
}

/*****************************************************************************

   footer

*****************************************************************************/

.footer_main_box
{
   width: 100%;
   text-align: center;
   padding: 64px 0 0 0;
   background-color: #0A0909;
   font-size: 0.75em;
}

.footer_row
{
   display: inline-block;
   text-align: left;
}

.footer_col
{
   display: inline-block;
   vertical-align: top;
   text-align: left;
   padding:0 64px 48px 64px;
   width: 200px;
}

.footer_title_text
{
   font-family: ITC_Avant_Garde_Gothic_Bold;
   font-size: 1.5em;
   font-weight: bold;
   line-height: 1.25;
   color: #908D95;
   border-bottom: 2px solid #2C2C2C;
   margin-bottom: 0.25em;
   padding-bottom: 5px;
   height: 2.5em;
   display: flex;
   align-items: flex-end;
}

.footer_text
{
   padding-top: 1em;
   padding-bottom: 1em;
   color: #908D95;
}

.footer_share_button
{
   padding-top: 8px;
}

/*****************************************************************************

   effetto cursore lampeggiante

*****************************************************************************/

#blinking_cursor
{
   position: relative;
   left: 3px;
   font-size: 1.0em;
   font-weight: bold;
}

/*****************************************************************************

   bottoni contatto nav

*****************************************************************************/

.nav_contact_button
{
   margin: 0 10px 0 30px;
   vertical-align: middle;
   font-size: 0.8em;
   display: inline-block;
   z-index: 9999;
}

.nav_contact_button:active
{
   transform: translate(3px, 3px);
}

.nav_contact_button_box
{
   padding: 6px 16px;
   border-radius: 5px;
   color: white;
   text-decoration: none;
   transition: background 0.3s ease;
}

.nav_contact_button_box.whatsapp
{
   background-color: #0DBF41;
}

.nav_contact_button_box.phone 
{
   background-color: #0C71D7;
}

.nav_contact_button_box:hover 
{
   filter: brightness(1.1);
}

.nav_contact_button_icon
{
   display: inline-block;
   vertical-align: middle;
   padding-right: 10px;
   padding-bottom: 3px;
   width: 15px;
}

.contact_button_lower, #contact_button_email, #contact_button_form
{
   background-color: #252529;
   position: fixed;
   bottom: 5px;
   padding: 3px 0;
   border-radius: 5px;
   text-decoration: none;
}

#contact_button_lower_container 
{
  position: fixed;
  bottom: 5px;
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
}

#contact_button_email
{
   position: absolute;
   left: 20%;
   pointer-events: auto;
}

#contact_button_form
{
   position: absolute;
   right: 20%;
   pointer-events: auto;
}

#contact_button_email:hover 
{
   filter: brightness(1.5);
}

#contact_button_form:hover 
{
   filter: brightness(1.5);
}

/*****************************************************************************

   riquadri testo colorati con bordo inferiore grosso e angoli tondi

*****************************************************************************/

.text_colored_pane
{
   padding: 2em 3em 2em 3em;
   border-radius: 20px;
   border: 1px solid #A0A0A0;
}

.tcp_light_blue
{
   background-color:#C9DEFF;
   border-bottom: 8px solid #0C71D7;
}

.tcp_light_beige
{
   background-color:#C6C3C2;
   border-bottom: 8px solid #4F4A4A;
}

/*****************************************************************************

   media query

*****************************************************************************/

@media only screen and (min-width: 3000px)
{
   .text_over_banner
   {
      font-size: 5vmin;
      bottom: -1em;
   }
   .img_banner_1
   {
      min-height: 25vh;
   }
}

@media only screen and (min-width: 1900px)
{
   #nav_menu
   {
      border-left: 1px solid #0000005E;
      border-right: 1px solid #0000005E;
   }
   #contact_button_email
   {
      left: 25%;
   }
   #contact_button_form
   {
      right: 25%;
   }
}

@media only screen and (max-width: 1400px)
{
   .div_art_main_img_circle
   {
      left: 100px;
   }   
   .big_square_open
   {
      left: -16px;
   }
   .big_square_close
   {
      display: none;
   }
   .art_main_img_circle
   {
      left: 64px;
   }
   .blue_shade_circle
   {
      left: 64px;
   }
   .h1_for_circle
   {
      left: 254px;
   }
}

@media only screen and (max-width: 1300px)
{
   .footer_row
   {
      display: block;
      margin-left: 25%;
   }
   .footer_col
   {
      display: table-cell;
   }
}

@media only screen and (max-width: 1170px)
{
   #nav_bar
   {
      min-width: 650px;
   }
   .google_map
   {
      width: 400px;
      height: 300px;
   }
}

@media only screen and (max-width: 1000px)
{
   #nav_menu
   {
      display: none;
   }
   #nav_menu_resp
   {
      display: flex;
   }
   .div_home_cell
   {
      display: table-row;
      padding: 0;
   }
   .div_home_contatti
   {
      display: table-row;
      padding: 0;
      border-right: 0;
   }
   .sec_code_row
   {
      display: table-cell;
   }
   .sec_code_cell
   {
      display: table-row;
   }
   .art_row
   {
      display: block;
   }
   .art_left_column
   {
      display: block;
      padding: 0;
      border-right: none;
      max-width: 100%;
      width: auto;
   }
   .art_right_column
   {
      padding-top: 64px;
      padding-left: 0;
      max-width: 100%;
   }
   .footer_row
   {
      display: block;
      margin-left: 10%;
   }
   .google_map
   {
      margin-top: 4em;
   }
}

/* MAX WIDTH: 800 */
@media only screen and (max-width: 800px)
{
   .disorder_donut
   {
      padding: 0;
   }
   .art_home_page
   {
      margin: 0 0 40px 0;
   }
   .h1_for_circle
   {
      position: relative;
      top: -10px;
      left: -6px;
      display: block;
      margin-bottom: 16px;
   }
   .video_home_page
   {
      width: 500px;
      height: 280px;
      float: none;
      margin: 0 auto 16px auto;
      display: block;
   }
   .footer_col
   {
      display: block;
      padding:0 64px 64px 16px;
   }
   .art_banner_container 
   {
      flex-direction: column-reverse;
   }
   .art_banner_right
   {
      /* margin-bottom: 38px; */
      align-self: flex-start;
   }
   .art_main_img_right
   {
      max-width: none;
      float: none;
      width: 100%;
      display: block;
      margin: 4px auto 24px auto;
   }
}

/* MIN WIDTH: 801 */
@media only screen and (min-width: 801px)
{
   #img_perc_interv
   {
      max-width: 500px;
   }
}

@media only screen and (max-width: 700px)
{
   .video_home_page
   {
      width: 299px;
      height: 169px;
      float: none;
      margin: 0 auto 16px auto;
      display: block;
   }
   .div_art_main_img_circle
   {
      margin: 0;
      left: 30px;
   }   
   .art_main_img_circle_right
   {
      float: none;
   }
   .div_art_main_img_circle_right
   {
      float: none;
      margin: 48px 0 48px 48px;
      left: 20px;
   }
   .medium_square
   {
      display: none;
   }
   .video_text
   {
      width: 500px;
      height: 281px;
   }
}

@media only screen and (max-width: 630px)
{
   #contact_button_whatsapp_resp
   {
      /* per nascondere questo elemento non si può usare display:none, perché crea una fascia spuria sotto al banner 
      width: 0;
      height: 0;
      overflow: hidden;
      pointer-events: none;
      */
      position: absolute;
      margin-left: 0;
      left: 5px;
      top: 55px;
   }
   #contact_button_phone_resp
   {
      /* per nascondere questo elemento non si può usare display:none, perché crea una fascia spuria sotto al banner 
      width: 0;
      height: 0;
      overflow: hidden;
      pointer-events: none;
      */
      position: absolute;
      margin-right: 0;
      right: 5px;
      top: 55px;
   }
   #contact_button_email
   {
      margin-left: 0;
      left: 5px;
   }
   #contact_button_form
   {
      margin-right: 0;
      right: 5px;
   }
}

@media only screen and (max-width: 600px)
{
   .video_text
   {
      width: 400px;
      height: 225px;
   }
   .art_main_img
   {
      float: none;
      margin-right: 0;
      width: 100%;
      max-width: none;
   }
   .text_colored_pane
   {
      padding-left: 1.75em;
      padding-right: 1.75em;
      border-radius: 10px;
      text-align: left;
   }
   .art_banner_right
   {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
   }
   .art_list_img
   {
      max-width: none;
      float: none;
      width: 100%;
      height: auto;
      margin-bottom: 16px;
   }
   .art_list_left_column
   {
      display: table-row;
   }
   .art_list_right_column
   {
      display: table-row;
      padding-left: 0;
   }
}

@media only screen and (max-width: 550px)
{
   .img_banner_1
   {
      min-height: 55vh;
      background-position: 90% 50%;
   }
   .img_banner_2
   {
      min-height: 45vh;
      background-position: 0;
   }
   .google_map
   {
      width: 300px;
      height: 200px;
   }
   .video_text
   {
      width: 300px;
      height: 169px;
   }
   .art_right_gray_box
   {
      max-width: 400px;
   }
   .div_art_main_img_circle_right
   {
      float: none;
      margin: 48px 0 48px 10px;
      left: -16px;
   }
   #sec_code_container
   {
      width: 200px;
   }
   #grecaptcha
   {
      float: none;
   }
   #sec_code_submit
   {
      float: none;
      line-height: 0;
      padding-top: 32px;
   }
}

@media only screen and (max-width: 500px)
{
   .list_table_img 
   {
      display: block;
   }

   .list_left_column_img
   {
      float: none;
      margin-bottom: 10px;
   }

   .list_right_column_img {
      padding-left: 0;
      top: 0;
      width: 100%;
   }
   .button_link
   {
      padding: 6px 15px;
   }
 }

@media only screen and (max-width: 440px)
{
   .video_home_page
   {
      width: 250px;
      height: 140px;
      float: none;
      margin: 0 auto 16px auto;
      display: block;
   }
}

@media only screen and (max-width: 400px)
{
   h2
   {
      font-size: 1.75em;
   }
   h2.bullet::before 
   {
      font-size: 1em;
   }
   .google_map
   {
      width: 200px;
      height: 200px;
   }
}