@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap');
#myVideo {
position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: #000;
background-size: cover;
}
html,body{height: 100%;}
p{font-family: 'Barlow', sans-serif;font-size: 15px;}
strong p {font-weight: 700;}
a{text-decoration: none!important;color: #000;font-family: 'Barlow', sans-serif;}
a:hover{color: #45ac33}
table p{margin-bottom: 0;}
#wrapper{overflow: hidden;}
.overlay{background-color: rgba(0,0,0,.7);position: fixed;z-index: 1051}
td,th,tr {
  vertical-align: middle!important;
}
#menu  li a,#navigation li a {
  -webkit-transition: all .3s  ease-in-out ;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  color:#fff;
  font-weight: 700;
  font-family: 'Barlow', sans-serif;
}
#menu li a:hover,a.active {color: #ffffffde!important}
a.active {opacity: .7}

.over2{
  clip-path: polygon(59% 0, 60% 0, 100% 100%, 99% 100%);
  -webkit-clip-path: polygon(59% 0, 60% 0, 100% 100%, 99% 100%);
  background-color: rgba(255,255,255,1);top: 0;left: 0;z-index: 3;}
#menu a:hover > .social {transform: translateX(0)!important;opacity: .7}
.retino{
    position: relative;
    bvackground-color:rgba(69,172,51,.4);
    bvackdrop-filter: blur(10px);
}
.retino h1,.retino h2{color: #fff!important;}

.mark, mark {
    padding: .2em;
    background-color: #45ac33db;
    color: #fff!important;
    line-height: 1.5!important;
    font-size: 40px;
    font-weight: 700;
    font-family: 'Barlow', sans-serif;
}
img.w-100{height: auto;}
.grey{filter: grayscale(100%);}
.bg-black{font-weight: 400!important;font-size: 34px!important;background-color: #4CA633!important;color: #000!important}
.bg-green{
background: rgb(69,172,51);
background: linear-gradient(45deg, rgba(69,172,51,1) 0%, rgba(45,111,34,1) 100%);
}
.bg-green-light{background-color: #DBF2D5; color: #000!important}
.bg-dark{background-color: #0D0D0D!important;}
.text-green{color: #45ac33}
#scroll{cursor: pointer;}
.gradiente{
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../img/bg.png);background-repeat:no-repeat , linear-gradient(180deg, rgba(0,0,0,0.19511554621848737) 0%, rgba(255,255,255,0) 100%); /* W3C */
}
.fade{
  transform: translateX(-30%)!important;
  opacity: 0!important;
}
.tit{
  -webkit-transition: all 1s  ease-in-out ;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all 1s ease-in-out;
  transform: translateX(0);
  opacity: 1;
}
.sposta{transform: translateX(-40%)!important;opacity: 0!important}
.over,.over2{
  -webkit-transition: all 1s  ease-in-out ;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all 1s ease-in-out;
  transform: translateX(0);
  opacity: 1;
}
.logo_top{ width:230px!important;height:auto }
select,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="email"],
textarea {
     -webkit-appearance: none;
     border-radius: 0!important;
}
.no-scroll{overflow: hidden}
*:focus {outline:0!important;}
button:focus { outline:0 !important; }
.social{width: 24px}
.social_desktop{width: 16px;}
#menu{z-index: 1052;background: #45ac33 }
.arrow {
    box-sizing: border-box;
    height: 2vw;
    width: 2vw;
    border-style: solid;
    border-color: black;
    border-width: 0px 1px 1px 0px;
    transform: rotate(45deg);
    margin: 4px auto;
}
.alert{font-size: 13px!important;font-weight: 700;}
.carousel-caption:before{
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 4px;
    content: '';
    display: block;
    background-color: #fff;
  -webkit-transition: width .5s  ease-in-out ;
  -moz-transition: width .5s ease-in-out;
  -o-transition: width .5s ease-in-out;
  transition: width .5s ease-in-out;
  }
.carousel-caption {
    position: absolute;
    left: 0!important;
    right: inherit!important;
    width: 100%;
    bottom: 0!important;
    z-index: 10;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    text-align: left;
    background-color: rgba(0, 0, 0, .3);
}
.carousel-caption:hover
.carousel-caption:before {
    width: 300px!important;
}


.date{z-index: 2;line-height: 20px;text-transform: uppercase;text-align: justify;}
h1,h2,h3,h4,h5,h6,a,p{-webkit-font-smoothing: antialiased;}
h1,h2,h3,h4,h5,h6{font-family: 'Barlow', sans-serif;}
.icone_sm{height: 24px;}
.icone{height: 40px;}
.carousel-caption h3,.date {font-weight: 700;font-size: 28px;color:#fff}
.carousel-caption h4 {margin-bottom: 0;font-weight: 700;font-size: 18px;color:#fff;}

.news-item:hover img {transform: scale(1.1);}
.news-item img {
  -webkit-transition: all .5s  ease-in-out ;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.news-item >div,.news-item{overflow: hidden;}
.carousel-caption p{margin-bottom: 0;}
.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 40%!important;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto!important;
    color: #fff;
    text-align: center;
    opacity: 1!important;
    background-color: #000;
    padding: 10px;
    height: 40px!important;
}
.bg-success {
background: rgb(69,172,51);
background: linear-gradient(45deg, rgba(69,172,51,1) 0%, rgba(45,111,34,1) 100%);
}
body,#menu{
  -webkit-transition: all .5s  ease-in-out ;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
#blog_title,#hamb{
  -webkit-transition: padding .2s  ease-in-out ;
  -moz-transition: padding .2s ease-in-out;
  -o-transition: padding .2s ease-in-out;
  transition: padding .2s ease-in-out;
}

#navigation p {
    font-size: 12px;
    margin-bottom: 0;
    margin-top:8px;
    letter-spacing: 0;
    line-height: 12px;
    font-style:italic;
    color:#000;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem!important;
    padding-left: 1rem!important;
}
.opacity li a{color: #fff!important}
#navigation{background-color: rgba(0,0,0,1);min-height: 80px}
.opacity{background-color: rgba(0,0,0,0)!important;}
.opacity > #logo{ display: none; }
#navigation{
  -webkit-transition: background-color .4s  ease-in-out ;
  -moz-transition: background-color .4s ease-in-out;
  -o-transition: background-color .4s ease-in-out;
  transition: background-color .4s ease-in-out;

  }


#navigation span{font-weight: bolder;color:#666;}
#nav-icon3 {
  width: 25px;
  height: 25px;
  position: relative;
  -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;
  z-index:1;
  float:right;
}


#nav-icon3 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 0px;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}


.box{
    background-image: url(../img/dotW.png);background-repeat: repeat;top: 0;right: 0;z-index: 0;
}

/* Icon 3 */

#nav-icon3 span:nth-child(1) {
  top: 6px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 14px;
}

#nav-icon3 span:nth-child(4) {
  top: 22px;
}

#nav-icon3.open span:nth-child(1) {
  top: 10px;
  width: 0%;
  right: 50%;
  background: #fff;

}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #fff;
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #fff;
}

#nav-icon3.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  right: 50%;
  background: #fff;
}

.btn-success{background-color: #45ac33!important}
.bg-news{background-image: url(../img/bg_news.png);background-size: cover;background-position: center;}
.btn{text-transform: uppercase;}
#logo>img{height: 120px}

#scroll2:hover{cursor: pointer;}
#scroll2 img{filter: invert(100%);}
  #scroll>div{
    height: 100px;
    display: block;
    width: 100%;
 }

@media screen and (max-width: 991px){
  #menu li a{font-size: 20px;}
  #logo>img{height: 100px}

  .over{background-image: url(../img/dot.png);background-repeat: repeat;background-color: rgba(0,0,0,.3);top: 0;left: 0;z-index: 1;
  backdrop-filter:blur(4px) brightness(80%) }
  .sposta{transform: translateX(0)!important;}
  h1{font-weight: 700;font-size: 40px;color:#999;letter-spacing: 1px;margin-bottom: 0;}
  h2{font-weight: 700;font-size: 28px;color:#45ac33}
  h3{font-weight: 400;font-size: 24px;color:#45ac33}
  h4{font-weight: 400;font-size: 24px;color:#45ac33}
  .retino h1{font-size: 40px;line-height: 40px;}
  .retino h2{font-size: 25px }
  #bivio h1, #header_image h1, #last_news h1 {
      font-size: 50px!important;
      line-height: 36px!important;
      margin-left: -4px;
      letter-spacing: 1px;
  }
  #bivio a {height: 300px}
  #logo{top: 10px;left: 50%;transform: translateX(-50%);}
  #menu {
      top: 0;
      width: 80%;
      right: -80%;
      z-index: 999999;
  }
  .reveal{transform:translateX(-100%);}
  .carousel-caption { padding: 1em!important; }
}

@media screen and (max-width: 1199px){
  .bg_trasv{
    background-image: url(../img/dotW.png);background-repeat: repeat;background-color: rgba(69,172,51,1);top: 0;right: 0;z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%)!important;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%)!important;
  }
  .bg_trasv2{
    background-image: url(../img/dotW.png);background-repeat: repeat;background-color: rgba(69,172,51,1);top: 0;right: 0;z-index: 0;
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%)!important;
    -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%)!important;
  }
}


@media screen and (min-width: 992px){
  .bg_trasv{
    background-image: url(../img/dotW.png);background-repeat: repeat;background-color: rgba(69,172,51,1);top: 0;right: 0;z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%);
  }
  .bg_trasv2{
    background-image: url(../img/dotW.png);background-repeat: repeat;background-color: rgba(69,172,51,1);top: 0;right: 0;z-index: 0;
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
  }
  .over{
    background-image: url(../img/dot.png);
    background-repeat: repeat;
    background-color: rgba(0,0,0,.3);
    top: 0;
    left: 0;
    z-index: 1;
    clip-path: polygon(0 0, 60% 0, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 60% 0, 100% 100%, 0% 100%);
    backdrop-filter:blur(12px) brightness(80%)
  }
  .retino h1{font-size: 60px;line-height: 50px;}
  .retino h2{font-size: 40px }
  h1{font-weight: 700;font-size: 50px;color:#999;letter-spacing: 2px;margin-bottom: 0;}
  h2{font-weight: 700;font-size: 28px;color:#45ac33}
  h3{font-weight: 400;font-size: 24px;color:#45ac33}
  h4{font-weight: 400;font-size: 24px;color:#45ac33}
  #bivio h1, #header_image h1, #last_news h1 {
      font-size: 70px!important;
      line-height: 56px!important;
      margin-left: -4px;
      letter-spacing: 2px;
  }
  #bivio a {height: 480px}
  #logo{top: 0;left: 0; transform: translateY(10%);}
  #menu {
      top: 0;
      width: 400px;
      right: -400px;
      z-index: 999999;
  }
  .reveal{transform:translateX(-400px);}
  .carousel-caption { padding: 1.5em!important; }
}

#head_logo{width: 300px}

#header_image{height:380px;background-position:center;background-size: cover;}


@media screen and (min-width: 1920px){
  #head_logo{width: 500px}
  #bivio a {height: 680px; }
  #header_image{height:500px;}
}


.titolo_gara{background-color: rgba(65,78,34,1)!important;color: #fff!important}
.tabella p{margin-bottom:0;}
.chiudi {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
}
.chiudi:hover {
  opacity: .6;
}
.chiudi:before, .chiudi:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 25px;
  width: 2px;
  background-color: #333;
}
.chiudi:before {
  transform: rotate(45deg);
}
.chiudi:after {
  transform: rotate(-45deg);
}

#servizi a:hover {color: inherit!important;}
@media screen and (max-width: 767px){
  #servizi .row .col-xl-3 {border-right: 0px solid #ccc!important}
}

#vheader_image {filter: grayscale(1);}
.grigio{filter: grayscale(1);
  background-size: cover;
  -webkit-transition: all .3s  ease-in-out ;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.grigio:hover{filter: grayscale(0);}
footer p{font-family: 'Barlow', sans-serif;margin-bottom: 0;font-size: 14px;}
footer h5{text-transform: uppercase;font-weight: 700;font-size: 14px;color:#000;letter-spacing: 1px;}
footer ul li a {font-weight: 400;font-size: 14px;color:#000;padding: 0!important}
footer ul li a:hover{color: #000!important;opacity: .8!important;}