/*
Theme Name: Greta la Rocca
Description: Template su misura per il sito
Author: Davide Inzaghi
Author URI: http://www.davideinzaghi.it
Version: 1.0
*/

@font-face {
  font-family: 'JMH';
  src: url('fonts/JMH Typewriter.eot'); /* IE9 Compat Modes */
  src: url('fonts/JMH Typewriter.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('fonts/JMH Typewriter.woff2') format('woff2'), /* Super Modern Browsers */
  url('fonts/JMH Typewriter.woff') format('woff'), /* Pretty Modern Browsers */
  url('fonts/JMH Typewriter.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('fonts/JMH Typewriter.svg#svgFontName') format('svg'); /* Legacy iOS */
}



html{
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', sans-serif;
  word-wrap: break-word;
  font-size: 1.1rem;
  color:#262626;
}

img{
  max-width: 100%;
  max-height: 100%;
}

strong, bold{
  font-weight: 700;

}


#navbarNav ul{
  list-style: none;
}


a{
  text-decoration: none;
  color: inherit;
}

.single_servizi a{
  text-decoration: underline;
}


a:hover{
  text-decoration: none;
  color: #c6e8ed;
  transition: 0.3s;
}

.hidden_a:hover{
  cursor: inherit;
  color: inherit;
}

.pointer{
  cursor: pointer;
}

.Play_Fair{
  font-family: Play Fair,sans-serif;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5{
  font-family: 'JMH', sans-serif;
  color:#545454;
}

h1{
  font-size: 1.5rem;

  margin-bottom: 1rem;


}

h2, .h2{
  font-size: 1.3rem;
}



h3,.h3{
  font-size: 1rem;


}


h4,.h4{
  font-size: 1.1rem;

}


#pagina_clienti h4.rass{
  margin-top: 50px;
    padding:0px;
    background-color: #fff;
    color: #03b8d3;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 1px;
}
.p{
  font-size: 1.1rem;
  font-weight: 400;
}


.height_max_400{
  max-height: 400px;
}

.height_max_100{
  max-height: 100%;
}



.hover-white:hover{
  color: #ffffff;
}

.hover-black:hover{
  color: #000000;
  transition: 0.3s;
}

.hover_p_bg_azzurro:hover p, .hover_h2_bg_azzurro:hover h2{
  background-color: #c6e8ed;
  border-color: #c6e8ed;
}

.hover_p_white:hover p,.hover_h2_white:hover h2{
  color:#ffffff;

}

.color_white{
  color: #ffffff;
  transition: 0.3s;
}

.color_azzurro_bg{
  background-color: #d8edf5;
}

.color-inherit-hover:hover{
  color: inherit
}

.color_azzurro{
  color: #c6e8ed;
}
.color_azzurro_hover:hover{
  color: #c6e8ed;
}
.color_azzurro_bg{
  background-color: #c6e8ed;
}

.color_azzurro_opa_bg{

  background-color: #c6e8edb3;
}

.color_azzurro_scuro{
  color: #025663;
}

.color_azzurro_semi_scuro{
  color: #007b8e;
}

.font_600{
  font-weight: 600;
}

.color_grey_bg{
  background-color: #cbcbcb;
}


.color_verde_acqua_bg{
  background-color: #e0f2f1;
}

.color_rosso_bg{
  background-color: #cb4141;
}

.font_1_3{
  font-size: 1.1rem;
}


.border_radius_2{
  border-radius: 2rem;
}



.banner_cookies{
  background: rgba(0, 0, 0, 0.7);
  display: none;

}

.custom-toolge .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(256, 256, 256, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.custom-toolge  .navbar-toggler{
  border-color:#ffffff;
}

.nav-link:hover{
  background-color: #ffffff;
  border-radius: 10px;
  border-color: #000;
}

.nav-link{
background-color: #c6e8ed;
border-radius: 10px;
color:#262626;
border: 2px solid #c6e8ed;
  }

#menu_fix .nav-link:hover{
  background-color: transparent;
}





.nav-item{
  font-size: 0.9rem;


}
.nav-item .active{
  border-color: #000;

}

#menu_fix .nav-item .active{
  background-color: transparent;
  color:#000;
  font-weight: 700;

}
#menu_fix .nav-item a,#menu_fix  a,#menu_fix{
  color:#000;

}


.border_nero{
  border: 1px solid #000000;
}


.border_bottom_grey{

  border-bottom: 3px solid #cbcbcb;
}

.border_top_grey{

  border-top: 3px solid #cbcbcb;
}

.border_y_grey{
  border-top: 3px solid #cbcbcb;
  border-bottom: 3px solid #cbcbcb;
}

.border_azzurro{
  border: 3px solid #c6e8ed;
}
.border_bottom_azzurro{
  border-bottom: 1px solid #c6e8ed;
}



#menu_fix{
  background: #dcdcdceb;
  display: none;


}

#myBtn{
  display: none;
  left: auto;
  right: 0;
}

#header_container{
  position: relative;
}

.hedaer_text{
  visibility: hidden;
  position: absolute;
  display: flex;
  align-items: center;



}

.img_banner_header{
  padding: 150px 0px;
}


.img_header{
  height: 100px;
}
.tit_header{

  font-family: 'JMH', sans-serif;
font-weight: 700;

font-size: 1.3rem;
letter-spacing: 1px;

}

.tit_header:hover{
  color: #000
}


.header_small_top a:hover{
  transition: all .2s ease-in-out;

font-weight: bold;
}


/***********************************  CLIENTI PAGE ************************************************/


img.clienti_img_car{
  object-fit: contain;
}

.attivita_clienti_container{
  margin-top: 50px;
      padding: 20px 74px;
      background-color: #c6e8ed;
      font-size: 1.4rem;
      border-radius: 10px;
      margin-bottom: 20px;
}
.attivita_clienti{
  text-align: center;
  text-transform: uppercase;
  background-color: #fff;
  padding: 5px 20px;
  font-family: 'JMH', sans-serif;

}

.loghi_container{
  background-position: center;
  background-size: cover;

}

.h_w_clienti_pag{
  HEIGHT: 46vw;
  padding:12px;
}
.logo_inquadrato_container{
  width: 100%;
  height: 100%;
  background: #fff;
}

.logo_inquadrato_container:hover .logo_inquadrato{
  border-color: #c6e8ed;
  transition: all .2s ease-in-out;

}

.logo_inquadrato{
  width: 100%;
  height: 100%;
  border: 2px solid #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  flex-flow: row wrap;
  position: relative;
}


.logo_inquadrato img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.settore_cliente{
  position: absolute;
  bottom: 10px;
  text-transform: uppercase;
  background-color: #c6e8ed;
  text-align: center;
  border-radius: 5px;
  padding: 0px 10px;
  border: 1px solid #c6e8ed;
  font-size: 12px;
}
.logo_inquadrato_container:hover .settore_cliente{
  color: #262626;
  border-color:#000;
  transition: all .2s ease-in-out;

}

.logo_inquadrato_container:hover img{
  transition: all .2s ease-in-out;
  transform: scale(0.9);
}



/***********************************  SINGLE CLIENTI ************************************************/


#pagina_clienti h1, #pagina_clienti .h1, #pagina_clienti h2, #pagina_clienti .h2,#pagina_clienti h3, #pagina_clienti .h3,#pagina_clienti h4, #pagina_clienti .h4{
  margin-top: 50px;
padding: 20px 74px;
background-color: #c6e8ed;
border-radius: 10px;
margin-bottom: 20px;
}

#pagina_clienti h1, #pagina_clienti .h1{
  display: table;
  background-color:#f2f2f2;
  border: 2px solid #c6e8ed;
  margin-left:auto;
  margin-right: auto;
}

#pagina_clienti figcaption{
  font-style: italic;
  font-size: 0.8rem;
}




/***********************************  PAGINA GENERICA ************************************************/
#pagina_generica a{
  text-decoration: underline;
}


#pagina_generica H2{
  background-color: #c6e8ed;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}


#home a.serv_home{
text-decoration:none;
padding: 10px 20px;
background-color: #c6e8ed;
display: table;
border-radius: 10px;
}

#home a.serv_home h3{
margin-bottom: 0px;
}

.recensione_container .nome{
  font-family: 'JMH', sans-serif;
color: #545454;
text-align: right;
margin-top: 10px;
}
#home .recensione{
background-color: #c6e8ed;
padding: 20px;
border-radius: 20px;
}


/***********************************  CAROSELLO CLIENTI  ************************************************/
.owl-clienti .item{
  margin: 10px;
  border: 2px solid #c6e8ed;
  padding: 10px;
}

.owl-clienti .item img{
  height: 32vw;
}

/***********************************  FOOTER   ************************************************/
#footer{
  margin-top: 40px;
}
#footer svg{
  height: 35px;
}
#footer a:hover{
  font-weight: bold;
  color: #000;
}

#footer a{
  text-decoration: none;
}

.img_footer{
  height: 100px;
}
/*********************************** RESPONSIVE   ************************************************/


@media (min-width:576px){
  .nav-item{
    font-size: 1.1rem;
  }

  h1{
    font-size: 2rem;
  }


  .font_1_3{
    font-size: 1.3rem;
  }

  .h_w_clienti_pag{
    height: 270px;
  }

  .logo_inquadrato_container{
    padding: 20px;
  }
  .logo_inquadrato{
    padding: 40px;
  }
  .settore_cliente{
    font-size: 14px;
      padding: 0px 20px;
  }

  .tit_header{
  font-size: 1.5rem;

  }

  .owl-clienti .item img {
    height: 128px;
}



}
@media (min-width:768px){

  h1{
    font-size: 2.3rem;
  }

  h2, .h2{
    font-size: 1.5rem;
  }

  h3,.h3{
    font-size: 1.3rem;
  }

  h4{
    font-size: 1.5rem;
  }


  .h_w_clienti_pag{
    height: 240px;
  }

}

@media (min-width:992px){
  .nav-item{
    font-size: 1.3rem;
  }

  .owl-clienti .item img {
    height: 143px;
}

}

@media (min-width:1200px){
  .h_w_clienti_pag {
    height: 285px;
  }

  .settore_cliente{
    font-size: 16px;
  }



}

@media (min-width:1400px){
  .h_w_clienti_pag {
    height: 320px;
  }

  .owl-clienti .item img {
    height: 172px;
}

}








/************************************* ANIMATION *****************************************/

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation: fadeInDown 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeInDown 1s; /* Firefox < 16 */
  -ms-animation: fadeInDown 1s; /* Internet Explorer */
  -o-animation: fadeInDown 1s; /* Opera < 12.1 */
  animation: fadeInDown 1s;
}


@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}





.bounceInLeft{
  -webkit-animation: bounceInLeft 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: bounceInLeft 2s; /* Firefox < 16 */
  -ms-animation: bounceInLeft 2s; /* Internet Explorer */
  -o-animation: bounceInLeft 2s; /* Opera < 12.1 */
  animation: bounceInLeft 2s;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

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





@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;

  -webkit-animation: fadeIn 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeIn 1s; /* Firefox < 16 */
  -ms-animation: fadeIn 1s; /* Internet Explorer */
  -o-animation: fadeIn 1s; /* Opera < 12.1 */
  animation: fadeIn 1s;

}

.fadeIn_slow{
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;

  -webkit-animation: fadeIn 2s; /* Safari, Chrome and Opera > 22.2 */
  -moz-animation: fadeIn 2s; /* Firefox < 26 */
  -ms-animation: fadeIn 2s; /* Internet Explorer */
  -o-animation: fadeIn 2s; /* Opera < 22.2 */
  animation: fadeIn 2s;

}







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




@-webkit-keyframes fadeOut {
  0% {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;


  -webkit-animation: fadeOut 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeOut 1s; /* Firefox < 16 */
  -ms-animation: fadeOut 1s; /* Internet Explorer */
  -o-animation: fadeOut 1s; /* Opera < 12.1 */
  animation: fadeOut 1s;
}

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


@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);

  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible
  }
  to {
    -webkit-transform: translateZ(0);

  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;

  -webkit-animation: slideInDown 1s; /* Safari, Chrome and Opera > 11.1 */
  -moz-animation: slideInDown 1s; /* Firefox < 16 */
  -ms-animation: slideInDown 1s; /* Internet Explorer */
  -o-animation: slideInDown 1s; /* Opera < 11.1 */
  animation: slideInDown 1s;

}

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

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;


  -webkit-animation: slideInUp 1s; /* Safari, Chrome and Opera > 11.1 */
  -moz-animation: slideInUp 1s; /* Internet Explorer */
  -o-animation: slideInUp 1s; /* Opera < 11.1 */
  animation: slideInUp 1s;
}