/*************************************************
                          CSS GENERALE
**********************************************/

@font-face {
  font-family: 'Montserrat';

  src:  url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'Montserrat Bold';

  src:  url("fonts/Montserrat-ExtraBold.ttf") format('truetype'); /* Open Type Font */
  font-weight: 800;
  font-style: normal;

}



/*
body{
  display:flex;
  min-height:100vh;
  flex-direction:column;
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  padding-top:0;
  background-color: #f6f6f6;
  color:#454545;
}
*/



.main-content {
  flex:1 0 auto;
  font-family: 'Montserrat', sans-serif;
}
.footer_red, .modal-content{
    font-family: 'Montserrat', sans-serif;
}
.header-icons-mobile .strip-mobile{
    padding-left: 4px!important;
    padding-bottom: 4px!important;
    padding-top: 0px!important;
}

*{min-height:0.01px}



/*************************************************
                          UTILITIES
**********************************************/

.header a:hover{color:#ffffff!important;}
.main-content a:hover{text-decoration: none}
.bold{font-family: 'Montserrat Bold', sans-serif!important;}

/*************************************************
                          HEADER
**********************************************/

.navbar{ background: transparent!important;     position: absolute; top: 0px; left: 0px; right: 0; z-index: 10;}
.navbar-brand img {width: 50%;}
.container_header {padding-top: 1.5rem; padding-bottom: 4.7rem}

/*************************************************
                      Slider
******************************************************/
.jumbotron-header{padding: 150px 0 250px}
.jumbotron-header h1{font-size:50px; font-family: 'Montserrat Bold', sans-serif!important;max-width:550px; line-height: 52px; color:#24366D}



/*************************************************
            COSA PUò FARE SICURITALI
******************************************************/
.cosa_puo_fare h2{font-size: 40px; font-family: 'Montserrat Bold', sans-serif!important;}
.cosa_puo_fare h2 span{color:#F04342}
.cosa_puo_fare .testo{font-size: 20px; line-height: 30px}
.cosa_puo_fare .testo span{box-shadow: inset 0 -3px 0 #F04342; font-family: 'Montserrat Bold', sans-serif!important;}

.box-servizi { float: left;width: 100%; margin-top: 10px; box-shadow: 0px 0px 22px rgb(0 0 0 / 10%); border-radius: 10px; background:#fff;}
.btn-servizi { width: 100%;float: left;  box-shadow: 0 0 10px rgb(0 0 0 / 40%); margin: 10px 0;border-radius: 10px; padding: 15px;
              text-align: left;  display: inline-flex;   flex-wrap: wrap; align-items:center;background:#fff;  color:#000;font-size:14px !important;}
/*.btn-servizi:hover {background-color: #C73837;  color:#fff; cursor: pointer;}*/

.btn-servizi .white{display: none; transition: transform 0.1s;}
/*
.btn-servizi:hover .white{display: inline; -ms-transform: scale(1.2); -webkit-transform: scale(1.2);  transform: scale(1.2); }
.btn-servizi:hover .colored{display: none;}
 */
.btn-servizi .scopri_white {display: none; transition: transform 0.1s;}
/*
.btn-servizi:hover .scopri_white{display: inline; -ms-transform: scale(1.2); -webkit-transform: scale(1.2);  transform: scale(1.2); }
.btn-servizi:hover .scopri_colored{display: none;}
 */
.chiudi{cursor: pointer;}
.accordion-container {width: 100%; color:#fff;display: flex;align-items: center;background-color: #C73837;margin:0px;border-radius: 10px;
                      padding: 10px 5px;}
.accordion-title { color:#fff !important;font-size:20px !important;   font-family: 'Montserrat Bold', sans-serif!important;
                  margin-top: auto !important;   margin-bottom: auto !important;}
.descrizione-specializzazioni { width:100%; float:left; font-size:14px; }
.btn-servizi .title{font-size: 14px; line-height: 1.1; font-family: 'Montserrat Bold', sans-serif!important;}

.btn-close-accordion{background-color: transparent; border: none;}
#testo-servizi{font-size: 14px!important; padding: 15px;}

/*************************************************
                    PUNTI DI FORZA
******************************************************/

.punti_forza h2 {font-size: 40px; font-family: 'Montserrat Bold', sans-serif!important;}
.punti_forza h2 span{color:#F04342}
.punti_forza h4{font-family: 'Montserrat Bold', sans-serif!important; font-size: 23px;/* padding: 0 3rem*/}
.punti_forza .card{border: none!important; border-radius:10px!important;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);}
.punti_forza .card_security {height: 296px; width: 90%}
.punti_forza .card_security .card_text{font-size:14.5px;  color:#454545}
.punti_forza .card_punti .card{height: 140px}
.punti_forza .card_punti .card-text{font-size:14px;  color:#909090; width:140px}

/****************************************************************
        MAGGIORNI INFO
****************************************************************/
/*.container_info{margin-bottom: 7rem;}*/
.container_info .card{border: 0px!important; }
.container_info .card .contenuto{ position: absolute;   right: 62px; top: 318px; width: 450px; font-size: 15px; background-color: #fff; padding: 1.6rem 1.6rem 0.5rem;
  border-radius: 1rem;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); }
.container_info .card span{font-family: 'Montserrat Bold', sans-serif!important; border-bottom: 3px solid #F04342}
.container_info .card .contenuto h2{font-size:45px; font-family: 'Montserrat Bold', sans-serif!important;}
.container_info .card .card-title-red{color:#F04342}

.numero_verde_text{color:#212529;font-weight:bold;font-size: 28px;/*padding-left: 25px;*/}
.numero_verde_text_mobile{color:#FFF;font-weight:bold;font-size: 16px;/*padding-left: 10px;*/}

/*************************************************
                      TESTO + CONTATTI
******************************************************/

.testo_contatti{font-size: 20px; line-height: 30px}
.testo_contatti span{box-shadow: inset 0 -3px 0 #F04342; font-family: 'Montserrat Bold', sans-serif!important;}
.testo_contatti .text{font-size: 16px}
.bottone .btn{	position: relative;  background: #f04342;color:#fff;  text-transform: uppercase; font-size: 18px;font-family: 'Montserrat Bold', sans-serif;
    border:none;  min-width: auto;  max-width: 350px; padding:16px 30px 16px 165px!important; border-radius:10px; transition: max-width 1s;}
.bottone .btn:hover {background:#24366d;  max-width: 500px; cursor:pointer}
.bottone .chiocciola {font-family: 'Montserrat', sans-serif!important; background: #fff; font-size: 90px; position: absolute;left: 25px; bottom: -40px; z-index: 2;  color: #909090;  transition: max-width 1s;
    padding: 0 15px 10px; border-radius: 14px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);}
.bottone .btn:hover .chiocciola { left: 25px;}
i{font-style:normal!important}
/****************************************************************
    CI HANNO SCELTO
****************************************************************/
.ci_hanno_scelto{margin-bottom: 200px }
.ci_hanno_scelto h2 {font-size: 40px; font-family: 'Montserrat Bold', sans-serif!important;}
.ci_hanno_scelto h2 span{color:#F04342}

/*************************************************
              FOOTER  BOTTOM FIXED
**********************************************/
.footer_red{background-color:#C73837; font-size: 19px}
.footer_red .btn{border:2px solid #fff; color: #fff; font-family: 'Montserrat Bold', sans-serif!important;  border-radius: 32px;  background-color: #C73837; font-size: 20px}
.fixed_bottom_new{    position: fixed;    right: 0;    bottom: 200px!important;    left: 0;    z-index: 10;}

/****************************************************************
              CONFIGURATORE / MODAL
****************************************************************/

.modal {  background-color: rgba(255, 255, 255, 0.8); }
.colonna_modal{border-radius: 15px!important;  }
.modal .modal-content { background-color: rgba(240,67,66, 0.95); border: 1px solid #fff;  border-radius: 15px;}
.modal-content-pallini{ border: 0px; background-color: transparent;}
.modal button.close { top: -12px; right: -13px; position: absolute; padding: 0;  background: #fff; border: 2px; width: 30px; height: 30px;  -webkit-appearance: none;	opacity:1}
.modal.show .modal-dialog { -webkit-transform: translate(0,-50%);  -o-transform: translate(0,-50%);  transform: translate(0,-50%);   top: 50%;   margin: 0 auto;}
.modal-header{border-bottom:0px; padding: 8px!important}
.modal-body{padding: 0 10px 10px!important;}
/*.modal-footer{border-top:0px; justify-content: center;}*/
.modal .btn{background-color: transparent;cursor: pointer;     box-shadow: none!important; outline: 0!important;}
.titolo_slide{font-size: 30px}
.form-group.sottotitolo_slide{margin-bottom: 0px!important}
.sottotitolo_slide p{font-size: 14px!important}
.form-control{border-radius:2.25rem; padding: 0.5rem 0.75rem; }
.form-group {margin-bottom: 9px!important}
.form-group ::placeholder, .option_selected{color:#ddd!important}
.form-group p, .form-row p, .form-group label, .form-group .form-check-label {font-size: 12px}
.form-group.privacy label {font-size: 8px!important;}
.form-check-label {padding-left: 1.8rem!important}
.form-check-input{margin-top: 1rem!important; margin-left: 0px!important}
textarea{height: 100px; border-radius: 1rem!important}
#btn_submit_contatti, #btn_submit_file{ font-size: 14px; background-color:#FFD446; color:#000; border-radius: 28px;text-transform: uppercase; cursor:pointer; padding: 10px 25px}
#btn_submit_file{ padding: 10px 25px}
#btn_submit_contatti{  padding: 10px 45px}
.thank_you_contatti{display: none}
.thank_you_contatti h1{font-size: 35px}
.thank_you_contatti p{font-size: 18px}


.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-primary:active:focus:not(:disabled):not(.disabled),
.btn:focus, .btn:active, .btn:hover{
    box-shadow: none!important;
    outline: 0;
}







/*************************************************
            FOOTER
******************************************************/
.footer{background-color: #818181}
.footer .text{font-size: 11px}
.footer a{color:#fff}
.footer a:hover{color:#F04342}



/*************************************************
          MAC
*************************************************/
@media (min-width:1400px){


/*****************SEZIONE COTATTI**********************/
 .testo_contatti{background-size: 35%!important; background-position: 109% 135%!important;}

}



/*************************************************
          TABLET
*************************************************/
@media (max-width:998px){


/****************
  Slider
******************/
.container_header {padding-left: 10px!important;     background-size: 47%!important; background-position: -27% 105%!important;}
/*******************
  COSA PUò FARE
******************/
.colored img, .scopri_colored img, .white img, .scopri_white img{width: 36%}
/*******************
    PUNTI DI FORZA
******************/
.punti_forza .card_security{width: 100%!important}
.punti_forza .card_punti .card, .punti_forza .card_security  {    height: auto;}

/*******************
    FOOTER RED
******************/

.fixed_bottom_new{    position: fixed;    right: 0;    bottom: 250px!important;    left: 0;    z-index: 10;}
/*******************
    FOOTER
******************/
/*.footer .text{display: none}*/

}




/*************************************************
          CELLULARE
*************************************************/

@media (max-width:767px){

/*****************NAVBAR**********************/

.container_header {padding-top: 0.5rem; padding-left: 10px!important; background-size: 84%!important; background-position: -119% 111%!important;}
/****************
  Slider
******************/
.jumbotron-header h1{font-size:30px; line-height: 34px}

/*******************
  COSA PUò FARE
******************/
.cosa_puo_fare{background-size: 80%!important;  background-position: -115% 2%!important;}
.colored img, .scopri_colored img, .white img, .scopri_white img{width: 100%}
.accordion-title { font-size: 17px !important;}
/*******************
    CONFIGURATORE RICHIEDI UN modalcontatti
*******************/
.modalcontatti {padding-top: 0px!important; padding-bottom: 0px!important}
.modalcontatti .titolo_slide{font-size: 18px!important}
.modalcontatti .form-group img{width:100%!important}
.modalcontatti p i{font-size: 10px}
.modalcontatti p{font-size: 12px!important; line-height: 1.3}
.modalcontatti .form, .modalcontatti .form{padding: 0px!important}
#btn_submit_contatti {    padding: 8px 45px;}
#btn_submit_file {    padding: 8.5px 25px;}
.form-control {    padding: 0.4rem 0.75rem;}
textarea{height: 90px}
.form-check-label {    padding-left: 1.1rem!important;}
.thank_you_contatti{margin-top: 0.3rem!important}
.thank_you_contatti h1{font-size: 1.2rem!important}
.thank_you_contatti p{margin-top: 5px; font-size: 13px!important}


/*******************
    PUNTI DI FORZA
********************/
.punti_forza h2{font-size: 34px}
.punti_forza {padding-left: 3rem; padding-right: 3rem}


/********************************
      MAGGIORNI INFO
*********************************/
.container_info{ height: 600px!important;   background-position: 40% 100%!important; transform: scaleX(-1);}
.container_info .card .contenuto{ position: absolute; right: 0px; top: 450px; width: 335px; font-size: 15px;padding: 1rem; transform: scaleX(-1)}
.container_info .card .contenuto h2{font-size: 38px;}
.container_info .card p{font-size: 13px}

/*******************
    SEZIONE DEI CONTATTI
*******************/
.testo_contatti{background-size: 75%!important; background-position: 140% 0%!important;}
.testo_contatti .text-mobile{padding-bottom:80px}
/*******************
  CI HANNO SCELTO
*******************/
.ci_hanno_scelto h2{font-size: 34px}
.ci_hanno_scelto{margin-bottom: 170px }
/*******************
    FOOTER
******************/
.footer{margin-top: 1rem!important}
/*.footer .text{display: none}*/
/******************
  BOTTOM FIXED RED
****************/
.footer_red {padding-top: 0!important; padding-bottom: 0!important}
.footer_red .col_text, .footer_red .col_btn{text-align: center!important}
.footer_red .col_text{font-size: 13px; margin-bottom: 10px}
.footer_red .col_btn{margin-bottom: 10px}
.footer_red .btn{font-size: 13px}

    .thank_you_appuntamento h4,
    .thank_you_appuntamento_ko h4{
        font-size: 1.5rem;
    }

}
.privacy {
    font-size: 14px;
    text-align: left;
    margin: 0;
}

.privacy > div {
    display: flex;
    margin-bottom: 5px;
    align-items: flex-start;
}

.privacy > div:last-child {
    margin-bottom: 0;
}

.privacy > div input {
    margin-right: 10px;
}
.privacy a {
    color: #fff;
    text-decoration: underline;
}
/***CONFIGURATORE APPUNTAMENTO**/
#btn_submit_appuntamento{ background-color: transparent; border-color: transparent; background-image: url("img/freccia_gialla.png"); background-repeat: no-repeat;background-position: center center; background-size: contain; width:70px;height: 42px; box-shadow: none!important;   outline: 0!important; cursor:pointer;}
.thank_you_appuntamento{display: none}

.thank_you_appuntamento h4,
.thank_you_appuntamento_ko h4{
    font-size: 2.5rem;
}

.punti_forza .card_punti .card-text:hover{
    color:#454545;
}
#frm-appuntamento-privacy_base,
#frm-appuntamento-privacy_marketing,
#frm-appuntamento-privacy_profilazione{
    min-width: 16px!important;
}