/*
Theme Name: aquila
Theme URI: http://www.aquilaservice.net
Author: Lisa Deboni e Pietro Girardi
Author URI: https://settanta7.studio
Description: Sito presentazione azienadale e dei servizi offerti, con un design minimal per acquila service srl
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: aquila service, smaltimento amianto, coperture, rifaccimento tetti, coperture civili e industriali, impianti fotolvtaici, facciate e rivestimenti camini, lattonerie, strutture metalliche. 
Text Domain: aquila service

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@charset "utf-8";
@font-face {
  font-family: 'DrukWideBold';
  src: url("http://remedello.netsons.org/wp-content/themes/aquila/font/DrukWideBold.woff") format("woff");
}


.arimo {
  font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

*{
  margin: 0;
  padding:0;
  font-family: 'DrukWideBold', sans-serif;
}
:root{
  --brand-color:#0d6efd;
  --brand-color-verde:#a1c517;
  --bs-border-radius:2rem;
  --bs-offcanvas-height: 90vh;
  --sfondo-testo: #fff;
  --colore-testo:#222;
}
.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.animated-icon1 span {
    background: #0d6efd !important;
}
a.contatti {
  text-decoration: none;
  color:var(--colore-testo);
  font-weight:600;
  text-transform: uppercase;
  font-size: 20px;
}
a,
button {
  text-decoration: none;
  color:var(--brand-color);
  font-weight:600;
  text-transform: uppercase;
  font-size: 20px;
}
a:hover,
.btn.btn-lg:hover{
  color:var(--brand-color)
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  border-color: rgba(255, 255, 255, 0);
}
.btn-group-lg>.btn, .btn-lg {
  --bs-btn-border-radius: 2rem;
  text-decoration: none;
  color:var(--brand-color);
  font-weight:600;
  text-transform: uppercase;
  font-size: 20px;
}
.row{
  margin: 0!important;
}
h1{
  font-size: 60px;
  color: #fff;
  mix-blend-mode: difference;
}
.titolo-servizi{
  font-size: 12rem;
}
.p-grande{
  font-size: 40px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 40px;
}
.p-piccolo{
  font-size: 20px;
  font-weight: lighter;
}
/*-------------------------------custom scroolbar----------------------------------------------*/
/* width */
::-webkit-scrollbar {
  width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
  background: trasparent; 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: trasparent; 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: trasparent; 
}
/*---------------------------- sidebar  navigation---------------------------------------------*/
/* Icon 1 */
.navbar-toggler{
  border:none;
}
.animated-icon1, .animated-icon2, .animated-icon3 {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;  
}
.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.animated-icon1 span {
  background: #000;
}
.animated-icon2 span {
  background: #000;
}
.animated-icon3 span {
  background: #000;
}
.animated-icon1 span:nth-child(1) {
 top: 0px;
}
.animated-icon1 span:nth-child(2) {
  top: 10px;
}
.animated-icon1 span:nth-child(3) {
  top: 20px;
}
.animated-icon1.open span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.animated-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
.animated-icon1.open span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none;
}
.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background-color: #83839c;;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 150px;
}
.navbar-nav {
  align-items: center;
  font-size: 1.5rem;
}
.menu-open{
 display: block!important;
}
.bgblack{
  background-color: #222!important ;
}
.nav-link:hover {
  border-bottom: 1px solid #222!important;
  text-decoration: none;
}
.navbar.scrolled {
  background-color: #222 !important;
  -webkit-transition: background-color 900ms linear;
  -ms-transition: background-color 900ms linear;
  transition: background-color 900ms linear;
}
.navbar{
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}
/*------------------------------------------end sidebar  navigation----------------------------*/
/*------------------------------------------contatti----------------------------*/
.offcanvas-title{
font-size: 60px;
text-transform: uppercase;
padding: 2rem;
z-index: 999;
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 85vh;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-color: ;
  --bs-offcanvas-bg: #fff;
  --bs-offcanvas-border-width: 1px;
  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
  --bs-offcanvas-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.075);
}
.box-contatti a,
.box-contatti p {
  font-size: 35px;
  font-weight: 300;
  padding: 0rem 2rem 2rem 2rem;
  text-transform: none;
}

hr{
  margin: 1rem 0rem 2rem 0rem ;
  color: inherit;
  border: 0;
  border-top: 3px solid;
  opacity: 1;
}
.offcanvas-header .btn-close {
  margin: 2rem;
}
/*------------------------------------------ fine contatti----------------------------*/
/********************************* PAGINA HOME ****************************************************/
/*---------------------------------- Loader -----------------------------------------*/
#loader {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: #fff;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
} 
#loader img{
  width: 100vw;
  height: auto;

}
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
/*---------------------------------- end Loader -----------------------------------------*/
.contenitore-text {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
}
.contenitore-foto-1,
.contenitore-foto-3 {
  width: 100%;
  position: sticky;
  top: 0;
}
.foto-prodotto {
  height: 100vh;
  overflow: hidden;
}
.foto {
  width: 100vw;
  height: 100vh;
  background-image: url("img/training-center-1.jpg");  /* caricamento video */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#training-center {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}  
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 0; 
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}
.foto-prodotto img {
  height: 100%;
  width: auto;
}
.text-scroll {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--sfondo-testo);
  background-image: url("img/back-home.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0px 40px 50px -18px rgba(0, 0, 0, 0.4);
  mix-blend-mode: difference;
}
.text-scroll-vertical{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--sfondo-testo);
  box-shadow: 0px 40px 50px -18px rgba(0, 0, 0, 0.4);
}
.text-content {
  width: 80%;
}
.vuoto {
  width: 100%;
  height: 100vh;
}
.last {
  box-shadow: none;
}
.text-plus{
  display: flex;
  margin:4rem
}  

#myVideo {
  width: 100vw; 
  height: auto;
}
#myVideomobile{
  width: 100%;
  height: auto; 
}

.slogan{
  position: absolute;
  bottom: 0;
  left: 0;
}
/*********************************PAGINA SERVIZI*****************************************************/
.accordion{
  --bs-accordion-btn-icon-width: 2.5rem;
}
.accordion-button{
  font-size: 40px;
  padding:1%;
  text-transform: uppercase;
  border-top: solid 1px;
  border-radius: 0;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("img/men.png");
  transform: rotate(360deg);
  background-size: contain;
  background-position: center;
}  
.accordion-button.collapsed::after {
  background-image: ("img/plus.png");
}
.accordion-button:not(.collapsed) {
  color: #333;
  background-color: var(--brand-color);
  box-shadow: none;
}
.accordion-button:focus {
  z-index: 3;
  border-color: var(--brand-color);
  outline: 0;
  box-shadow: none;
}
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cover-servizi{
  min-height: 350px;
  margin-top: 100px;
  color:#333;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.box-servizi-n{
  color: #333;
  padding: 30px;
}
.box-servizi-b{
  color: #333;
  padding: 30px;
  width: 80%;
}
.box-servizi h2{
  font-size: 50px;
}
/*----------------------------------------galleria--------------------------------------*/
/* Stile del carosello e degli indicatori */
.carousel-container {
  position: relative;
  width: 100%;
  max-width: 100vw; /* Imposta la larghezza massima del carosello */
  margin: 0 auto;
  overflow: hidden; /* Nasconde le foto fuori dalla vista */
}

.carousel-slide {
  display: flex; /* Le foto verranno posizionate orizzontalmente */
  transition: transform 0.4s ease-in-out; /* Effetto di scorrimento */
}

.carousel-image {
  flex: 0 0 25%; /* Assicura che 3 foto vengano visualizzate in una riga */
  max-width: 25%; /* Imposta la larghezza massima delle singole foto */
  margin: 40px 10px;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 35%;
  transform: translateX(-50%);
}

.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  background-color: #888;
  border: none;
  cursor: pointer;
}

.carousel-indicators button.active {
  background-color: #333;
}

.carousel-image img{
  width: 100%;
  border-radius: 15px;
}
/*---------------------------------- fine galleria--------------------------------------*/

/*-----------------------------------------tooltip--------------------------------------*/
.tooltip-area {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 12px;
  display: flex;
  align-items: center;
  background-color: white;
}
#tooltip-a, #tooltip-b, #tooltip-c, #tooltip-d, #tooltip-e, #tooltip-f, #tooltip-g {
  position: absolute;
  height: fit-content;
  max-width: 250px;
  padding: 12px;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
}
.tooltip-area:hover #tooltip-a,
.tooltip-area:hover #tooltip-b,
.tooltip-area:hover #tooltip-c,
.tooltip-area:hover #tooltip-d,
.tooltip-area:hover #tooltip-e,
.tooltip-area:hover #tooltip-f,
.tooltip-area:hover #tooltip-g
{
  opacity: 1;
}
.accordion-body img{
  border-radius: 15px;
}
/*------------------------------------fine-tooltip--------------------------------------*/
/*******************************************FOOTER***************************************/
footer{
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.testo-footer p{
  color:#fff;
  padding: 0;
  margin:30px;
  font-size: 18px;
  font-weight: 400;
}
.footer-a{
  color: #fff;
  font-size: 12px;
  align-content: center;
}

/*******************************************CHI SIAMO***************************************/

.chisiamo-titile{
  font-size: 90px;
}
.servizi {
  display: flex;
  justify-content: center;
  padding: 15px 45px;
  background-color: #fff;
  border-radius: 40px;
  margin: 2%;
  border: 1px solid #000;
}
.servizi:hover{
  background-color: #000;
  color: #fff;
}
.chisiamohr hr{
  width: 100vw;
}
/******************************mailchimp******************************************/
#mc_embed_signup{ clear:left; font:14px Helvetica,Arial,sans-serif; width: 600px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

/****************************** blog ******************************************/
.pagination .page-numbers{
  padding:5px;
}
.sidebar-aquila{
  display: flex;
}

/*********************************************************************************/
/***************************responsive*********************************************/
@media only screen and (max-width: 1600px) {
  .titolo-servizi {
    font-size: 9rem;
  }
}
@media only screen and (max-width: 1300px) {
  .titolo-servizi {
    font-size: 7rem;
  }
  .p-grande {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 30px;
  }
}


@media only screen and (max-width: 1024px) {
  .text-plus {
    display: flex;
    margin: 2rem;
  }
  .p-grande {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 40px;
  }
  .p-piccolo {
    font-size: 17px;
    font-weight: lighter;
  }
}
@media only screen and (max-width: 900px) {
  .titolo-servizi {
    font-size: 4rem;
  }
  .chisiamo-titile {
    font-size: 45px;
  }
}
@media only screen and (max-width: 800px) {
  .titolo-servizi {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 700px) {
  .titolo-servizi {
    font-size: 4rem;
  }
}

@media only screen and (min-width: 600px) {
  .mobile{
    display: none;
  }
  .desk{
    display: inherit;
    padding-right: 15px;
  }
}
@media only screen and (max-width: 600px) {
  .mobile{
    display: inherit;
  }
  .desk{
    display: none;
  }
  .carousel-image {
    flex: 0 0 75%; /* Assicura che 3 foto vengano visualizzate in una riga */
    max-width: 100%; /* Imposta la larghezza massima delle singole foto */
    margin: 40px 10px;
  }
}
@media only screen and (max-width: 500px) {
  .titolo-servizi{
    font-size: 4.5rem;
  }
  .servizi {
    padding: 10px 25px;
}
  .cover-servizi {
    display:block;  
  }
  -vertical {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--sfondo-testo);
    box-shadow: 0px 40px 50px -18px rgba(0, 0, 0, 0.4);
  }
  .text-scroll {
    height: 100%;
    padding: 30px;
  }
  .offcanvas-title {
    font-size: 30px;
  }
  .box-contatti a, .box-contatti p {
  font-size: 15px;
  font-weight: 400;
  padding: 2rem;
  text-transform: none;
  }
  hr {
    margin: 1rem;
  }
  .offcanvas-body.big {
    margin:2rem;
  }
  .offcanvas-body.big p,
  .offcanvas-body.big a {
    margin:0rem;
  }
  #mc_embed_signup {
    clear: left;
    font: 14px Helvetica,Arial,sans-serif;
    width: 100%!important;
  }
  .p-grande {
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 30px;
  }
  .p-piccolo {
    font-size: 18px;
    font-weight: lighter;
  }
  .titolo-servizi {
    font-size: 2rem;
  }
  .chisiamo-titile {
    font-size: 30px;
  }
  .box-servizi-n {
    color: #000;
    padding: 0px;
  }
  footer {
    margin-top: 100px;
    height: 70vh;
  }
}