:root {
  --red: #e33c4e; 
  --white: #FFFFFF;
  --first: #163276;
  --grey1: #464849;
  /* --grey2: #BCB8B1; */
  --second: #F1D302;
  --lightgrey: #fafafb;

}

body {
    font-family: 'Montserrat', sans-serif;
    left: 0!important;
}


#Top_bar {
    background-color: rgba(0,0,0,0.5);
}


#Header_wrapper {
    background-image: none!important;
}


 /*
#Top_bar #logo {
    height: 80px!important;
}*/

#logo-lemao img {
  height: 30px!important;
  margin-top: 40px;
}

.is-sticky #logo-lemao img {
  margin-top: 20px;
  height: 25px!important;
}


h1, h2, h3, h4, h5, h6 {
    color: #163276!important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400!important;
}

p {
    font-family: 'Muli', sans-serif!important;
}

.themecolor, .opening_hours .opening_hours_wrapper li span, .fancy_heading_icon .icon_top, .fancy_heading_arrows .icon-right-dir, .fancy_heading_arrows .icon-left-dir, .fancy_heading_line .title, .button-love a.mfn-love, .format-link .post-title .icon-link, .pager-single > span, .pager-single a:hover, .widget_meta ul, .widget_pages ul, .widget_rss ul, .widget_mfn_recent_comments ul li::after, .widget_archive ul, .widget_recent_comments ul li::after, .widget_nav_menu ul, .woocommerce ul.products li.product .price, .shop_slider .shop_slider_ul li .item_wrapper .price, .woocommerce-page ul.products li.product .price, .widget_price_filter .price_label .from, .widget_price_filter .price_label .to, .woocommerce ul.product_list_widget li .quantity .amount, .woocommerce .product div.entry-summary .price, .woocommerce .star-rating span, #Error_404 .error_pic i, .style-simple #Filters .filters_wrapper ul li a:hover, .style-simple #Filters .filters_wrapper ul li.current-cat a, .style-simple .quick_fact .title {
  color: #e33c4e!important; 
}

.servizi h2 {
    color: #FFFFFF!important;
}

#Header .top_bar_left, .header-classic #Top_bar, .header-plain #Top_bar, .header-stack #Top_bar, .header-split #Top_bar, .header-fixed #Top_bar, .header-below #Top_bar, #Header_creative, #Top_bar #menu, .sticky-tb-color #Top_bar.is-sticky {
    background-color: #163276;
}


#animazione {
  display: block;
  width: 70%;
  margin-left: 15%;
}

h2.titolo-slider {
     font-size: 4.5em!important;
     letter-spacing: 0.2em!important;
     margin-top: 25px!important;
     background-color: rgba(255,255,255,0.7);
     padding-top: 12px;
     padding-bottom: 12px;
     padding-left: 15px;
     padding-right: 15px;
     font-weight: 400!important;

}


/* servizi */

.box-servizi {
    background-color: #163276!important;
    text-align: center!important;
}


.image_frame .image_wrapper {
  overflow: visible!important;
}


.box-servizi h4 {
    color: #FFFFFF!important;
    height: 60px;
    font-size: 22px;
}

.servizi-icona {
  display: block!important;
  width: 100%!important;
}



.button_label, .button_icon {
    background-color: #E33C4E!important;
}


#gallery-mezzi {
  display: block;
  position: absolute;
  bottom: 40px;
  /* margin-top: 30px; */
}


#tratte {
    display: block;
    width: 100%;
    height: 50px;
    clear: both;
    margin-top: 50px;
}

img.logo-footer {
  width: 200px;
}

.chisiamo img {
    width: 400px;
}


#map {
    display: block;
    width: 100%;
    height: 500px!important;
}

.leaflet-tile-pane {
    -webkit-filter: grayscale(100%)!important;
    filter: grayscale(100%)!important;
}


footer, #Footer {
    background-color: #163276!important;
    color: #FFFFFF;
}


Footer h4 {
    color: #FFFFFF!important;
}

#Footer a {
   color: #E33C4E!important;  
}


/* animazioen camion */


.loop-wrapper {
    margin: 0 auto;
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-bottom: 3px solid #fff;
    color: #fff;
    clear: both!important;
  
  }

  .mountain {
    position: absolute;
    right: -900px;
    bottom: -20px;
    width: 2px;
    height: 2px;
    box-shadow: 
      0 0 0 50px #163276,
      60px 50px 0 70px #163276,
      90px 90px 0 50px #163276,
      250px 250px 0 50px #163276,
      290px 320px 0 50px #163276,
      320px 400px 0 50px #163276
      ;
    transform: rotate(130deg);
    animation: mtn 20s linear infinite;
  }
  .hill {
    position: absolute;
    right: -900px;
    bottom: -50px;
    width: 400px;
    border-radius: 50%;
    height: 20px;
    box-shadow: 
      0 0 0 50px #163276,
      -20px 0 0 20px #163276,
      -90px 0 0 50px #163276,
      250px 0 0 50px #163276,
      290px 0 0 50px #163276,
      620px 0 0 50px #163276;
    animation: hill 4s 2s linear infinite;
  }


  .tree, .tree:nth-child(2), .tree:nth-child(3) {
    position: absolute;
    height: 100px; 
    width: 35px;
    bottom: 0;
    background: url(../images/animazioni/tree.svg) no-repeat;
  }
  .rock {
    margin-top: -17%;
    height: 2%; 
    width: 2%;
    bottom: -2px;
    border-radius: 20px;
    position: absolute;
    background: #163276;
  }
  .truck, .wheels {
    transition: all ease;
    width: 85px;
    margin-right: -140px;
    bottom: 0px;
    right: 50%;
    position: absolute;
    background: #163276;
  }
  .truck {
    width: 400px;
    background: url(../images/animazioni/truck.svg) no-repeat;
    background-size: cover;
    height: 120px;
  }
  .truck:before {
    content: " ";
    position: absolute;
    width: 25px;
    box-shadow:
      -30px 28px 0 1.5px #E33C4E,
       -35px 18px 0 1.5px #E33C4E;
  }
  .wheels {
    background: url(../images/animazioni/wheels.svg) no-repeat; 
    height: 1px;
    margin-bottom: 0;
  }
  
  .tree  { animation: tree 3s 0.000s linear infinite; }
  .tree:nth-child(2)  { animation: tree2 2s 0.150s linear infinite; }
  .tree:nth-child(3)  { animation: tree3 8s 0.050s linear infinite; }
  .rock  { animation: rock 4s   -0.530s linear infinite; }
  .truck  { animation: truck 4s   0.080s ease infinite; }
  .wheels  { animation: truck 4s   0.001s ease infinite; }
  .truck:before { animation: wind 1.5s   0.000s ease infinite; }
  
  
  @keyframes tree {
    0%   { transform: translate(1350px); }
    50% {}
    100% { transform: translate(-50px); }
  }
  @keyframes tree2 {
    0%   { transform: translate(650px); }
    50% {}
    100% { transform: translate(-50px); }
  }
  @keyframes tree3 {
    0%   { transform: translate(2750px); }
    50% {}
    100% { transform: translate(-50px); }
  }
  
  @keyframes rock {
    0%   { right: -200px; }
    100% { right: 2000px; }
  }
  @keyframes truck {
    0%   { }
    6%   { transform: translateY(0px); }
    7%   { transform: translateY(-6px); }
    9%   { transform: translateY(0px); }
    10%   { transform: translateY(-1px); }
    11%   { transform: translateY(0px); }
    100%   { }
  }
  @keyframes wind {
    0%   {  }
    50%   { transform: translateY(3px) }
    100%   { }
  }
  @keyframes mtn {
    100% {
      transform: translateX(-2000px) rotate(130deg);
    }
  }
  @keyframes hill {
    100% {
      transform: translateX(-2000px);
    }
  }
  
  
#header-contatti {
  position: relative;
  z-index: 100;
  display: block;
  background-color: rgba(239, 239, 239, 1);
}

#header-contatti .section_wrapper {
  /*background-color: #fafafb!important; */

}

@media screen AND (min-width: 1280px) {
  #header-contatti {
    margin-top: 0px!important;
    background-color: var(--first);
  }

 #header-contatti .column {
   margin-bottom: 0px!important;
 }


}


.box-header-contatti {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
  margin-top: 15px;
}


.box-header-contatti svg {
  width: 40px;
  height: 40px;
  fill: var(--white);
}

.box-header-contatti p {
  font-size: 18px!important;
  margin-top: 20px;
  color: var(--white);
}

.box-header-contatti:hover svg {
  fill: var(--second)!important;
}

.box-header-contatti:hover p {
  color: var(--second)!important;
  text-decoration: none!important;
}

.box-header-contatti a:hover {
  
}


.slider-cta {
  display: block;
  background-color: var(--first);
  width: 100px;
  padding: 10px;
  padding-left: 25px;
  padding-right: 25px;
  color: #FFFFFF!important;
  font-size: 25px;
  font-weight: 700;
  margin-top: 50px!important;
  text-decoration: none!important;
}

.slider-cta:hover {
  background-color: var(--red);
}


#contatti {
  background: var(--lightgrey);
}



.box-contatti {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
}


.box-contatti svg {
  width: 30px;
  height: 30px;
  fill: var(--first);
}

.box-contatti p {
  font-size: 15px!important;
  margin-top: 20px;
}

#contatti h2 {
  text-align: center;
}


#contatti .box-contatti p {
  margin-top: 10px!important;
}


#contatti form {
  margin-top: 50px;
}


#contactform .column input[type="text"], #contactform .column input[type="email"], #contactform textarea {
  width: 100%;
  font-family: 'Muli', sans-serif!important;
  font-size: 15px;
}


#lavoraconnoi h2 {
  text-align: center;
}


#lavoraconnoi p {
  text-align: center;
}


#contactform #submit {
  width: auto;
  font-family: 'Muli', sans-serif!important;
  font-size: 15px;
}


#contactform #submit:hover {
    background-color: var(--first);
}


/* slider */

.tparrows {
  width: 60px;
  height: 60px;
  background-color: var(--first);
}

.tparrows:hover {
  background-color: var(--red);
}

.tparrows::before {
  font-size: 25px!important;
  padding-top: 10px!important;
}

#Top_bar .menu>li.current-menu-item>a, #Top_bar .menu>li.current_page_item>a, #Top_bar .menu>li.current-menu-parent>a, #Top_bar .menu>li.current-page-parent>a, #Top_bar .menu>li.current-menu-ancestor>a, #Top_bar .menu>li.current-page-ancestor>a, #Top_bar .menu>li.current_page_ancestor>a, #Top_bar .menu>li.hover>a {
    color: var(--second);
}


#Footer a {
  color: var(--second)!important;
}

#Footer a a:hover {
  color: var(--white)!important;
}


.parcomezzi {
  background-position: top left;
  background-size: contain!important;
}

.box-semirimorchio {
  margin-top: -25px;
}



/* cookie */

.iubenda-embed.iubenda-black {
  background-color: var(--first)!important;
  background: var(--first)!important;
}



/* responsive e mobile */

/* menu mobile */

#body_overlay {
  background: rgba(255,255,255,0.5);
}

#Side_slide {
  background: var(--first);
}

#Side_slide #menu ul li a {
  color: var(--white);
}

@media screen AND (max-width: 1280px) {

  #logo-lemao img {
    margin-top: 10px;
  }

  #Top_bar a.responsive-menu-toggle {
    top: 5px!important;
    color: #FFFFFF!important;
  }

  .tparrows {
    visibility: visible!important;
    opacity: 1!important;
  }

  #header-contatti {
    background-color: var(--first)!important;
    padding-top: 30px;
  }

}

@media screen AND (max-width: 1024px) {

  .box-header-contatti p {
    font-size: 16px!important;
  }

  .box-header-contatti svg {
    width: 30px;
    height: 30px;
 }

  #animazione {
    width: 100%;
    margin-left: 0%;
  }

  #dicosacioccupiamo p {
    margin-left: 0px!important;
    margin-right: 0px!important;
  }

  h6.dicosacioccupiamo {
    height: 50px!important;
    margin-top: -20px;
  }

  .box-servizi h4 {
    font-size: 18px;
  }

  #map {
    width: 90%;
    margin-left: 5%;
  }

  .tparrows {
     width: 35px;
     height: 35px;
  }

  .tparrows::before {
    font-size: 15px!important;
    padding-top: 0px!important;
 }

  #tratte {
    height: 0px;
    margin-top: 0px;
  }

  #contatti form {
     margin-top: 0px;
  }

  .parcomezzi {
    padding-bottom: 0px!important;
  }

  .chisiamo {
    padding-top: 0px;
    padding-bottom: 0px;
  }
 
}

@media screen AND (max-width: 500px) {

  #logo-lemao img {
    height: 15px!important;
  }

  #logo-lemao {
    float: left;
  }

  #Top_bar a.responsive-menu-toggle {
    top: -2px!important;
    right: -5px!important;
  }

  #Top_bar a.responsive-menu-toggle i {
    font-size: 20px;
  }

  #header-contatti .one-fourth {
    width: 50%!important;
    display: inline-table!important;
  }

  #header-contatti .column {
    clear: none;
  }
 
  .box-header-contatti {
    min-height: 100px;
  }

  .box-header-contatti {
    min-height: 150px;
  }

  .truck {
    width: 300px;
    background: url(../images/animazioni/truck.svg) no-repeat;
    background-size: cover;
    height: 90px;
  }

  .loop-wrapper {
    margin: 0 auto;
    position: relative;
    display: block;
    width: 100%;
    height: 150px;
  }

  .is-sticky #logo-lemao img {
    margin-top: 8px;
    height: 15px!important;
    margin-bottom: 3px;
  }

  .mobile-sticky #Top_bar.is-sticky a.responsive-menu-toggle {
    top: 0px!important;
  }

  #dicosacioccupiamo p {
     margin-top: 10px!important;
  }

  .box-dicosacioccupiamo .one-fourth {
    width: 50%!important;
    clear: none!important;
  }

  .box-dicosacioccupiamo .one-fourth .column_attr {
    padding: 0px!important;
  }

  .box-dicosacioccupiamo img {
    max-width: 50%;
  }

  .box-servizio {
    margin-bottom: 25px!important;
  }

  .box-servizi .column_attr {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
  }

  ul.list_check {
    display: block;
    height: 500px;
  }

  .box-semirimorchio {
    display: block!important;
    margin-bottom: 50px!important;
  }

  .box-tratte {
    padding-top: 50px!important;
    padding-bottom: 20px!important;
  }

  .box-tratta{
    display: block;
    margin-bottom: 25px;
  }

  .chisiamo {
    padding-top: 0px!important;
  }

  .rev_slider_wrapper {
    width: auto!important;
    height: 200px!important;
  }

  .fullwidthbanner-container .fullwidthabanner {
    width: 100%;
    position: relative;
    height: 100%!important;
  }

  .box-header-contatti p {
    font-size: 14px!important;
 }

 .tp-mask-wrap {
   left: 40px!important;
 }

}

@media screen AND (max-width: 400px) {

  .truck {
    width: 200px;
    height: 60px;
    left: 30px;
    bottom: 0px;
  }

  .box-header-contatti p {
    font-size: 13px!important;
 }

 .parcomezzi {
   background-image: url('../images/home_lemao_mobilebg.jpg')!important;
   background-position: top center!important;
 }

 .parcomezzi h2 {
   margin-top: 50px!important;
 }

 h2.titolo-slider {
  font-size: 6.5em!important;
  line-height: 15px!important;
}

}


.box-button {
  display: block;
  width: auto;
  text-align: center;
}

.btn {
  background-color: #E33C4E;
  text-align: center;
  padding: 15px;
  margin-left: auto;
  margin-right: auto;
  color: #FFFFFF!important;
  text-decoration: none!important;
  font-weight: 700;
  font-size: 1.2em!important;
  margin-top: 50px;
}

.btn:hover {
  background-color: #163276;
  text-decoration: none!important;
}

@media screen AND (min-width: 768px) {

  .parcomezzi-title {
     margin-top: 50px; 
  }
  
}