@charset "UTF-8";
/* CSS Document */

body,
h1,
h2,
h3,
h4,
h5,
p {
    font-family: 'Spartan', sans-serif;
}

.bg-light {
    background-color: transparent !important;
    z-index: 10;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-family: 'Spartan', sans-serif;
    padding-right: 5rem;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.navbarcolor {
    transition: 500ms ease;
    background: transparent !important;
}

.navbarcolor.scrolled {
    background-color: #9f3838 !important;
    color: #fff;
    box-shadow: 2px 0px 2px #101010;
    z-index: 100000;
}


.navbarcolor.scrolled>.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-family: 'Spartan', sans-serif;
    padding-right: 5rem;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.navbarcolor.scrolled>.navbar-light .navbar-nav .nav-link:hover {
    color: #E6E6E6;
    font-family: 'Spartan', sans-serif;
    padding-right: 5rem;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.navbarcolor.scrolled>.navbar-dark .navbar-nav .nav-link2 {
    color: #fff;
}

.navbarcolor.scrolled>.navbar-dark .navbar-nav .nav-link2:hover {
    color: #DCDCDC;
}

.navbarcolor.scrolled>.bg-dark {
    background-color: #1c355a !important;
}
.altezza-logo{
  padding-top:0px!important;
  padding-bottom:0px!important;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #fff;
    text-align: left;
    list-style: none;
    background-color: #A64444 !important;
    background-clip: padding-box;
    border: px solid rgba(0,0,0,.15);
    border-radius: 0rem;
}


.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    color: #fff;
    font-family: 'Spartan', sans-serif;
    padding-right: 5rem;
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.dropdown-item.active, .dropdown-item:active {
    color: #A2A2A2;
    text-decoration: none;
    background-color: #fff;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #E6E6E6;
}




.nopadding {
    padding: 0px;
    margin: 0px;
}



.back1 {
    background-image: url(../img/head.jpg);
    bacground-size: cover;
    background-position: center;
    height: 100vh;
}

.div-wrapper {
    position: relative;
    height: 300px;
    width: 300px;
}

.div-wrapper img {
    position: absolute;
    left: 0;
    bottom: 0;
}


.back2 {
    background-image: url(../img/back2.jpg);
    bacground-size: cover;
    background-position: center;
    height: 80vh;

}


.back4 {
    background-image: url(../img/back2.jpg);
    bacground-size: cover;
    background-position: center;
}


.riga {
    border-left: 4px solid #fff;
    margin-left: 8rem;
    margin-bottom: 10rem;
}

.riga2 {
    border-right: 4px solid #9f3838;
    margin-right: 8rem;
    margin-top: 10rem;
}

.box {
    padding-top: 10rem;
    padding-bottom: 1rem;
    padding-right: 12rem;
}

.box3 {
    padding-top: 8rem;
    padding-bottom: 10rem;
    padding-left: 12rem;

}

.box2 {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 5rem;
    padding-right: 5rem;
}

.box-pagine {
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-right: 8rem;
    padding-left: 8rem;
}

.boxsezdx {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 3rem;
    padding-left: 3rem;
}

.backred {
    background-image: url(../img/backred.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.back3 {
    background-image: url(../img/back3.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.backsezdx {
    background-color: #fff;
    margin-bottom: -10rem;
}

.divisorio {
    border-bottom:2px solid #9f3838;
}


.titolo {
    font-weight: 300;
    font-size: calc(35px + (60 - 35) * ((100vw - 300px) / (1920 - 300)));
    color: #fff;

}

.sottotitolo {
    font-weight: 400;
    font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1920 - 300)));
    color: #fff;
}

.img-centro{
    padding:15px;
}


.txt {
    font-weight: 300;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));

}

.appuntamento{
    font-weight: 600;
    font-size: calc(20px + (22 - 20) * ((100vw - 300px) / (1920 - 300)));
}

.titolodx {
    font-weight: 800;
    font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    color: #9f3838;
    text-transform: uppercase;
}

.titoloprodotti {
    font-weight: 600;
    font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
    color: #fff;
    text-transform: uppercase;
}

.btn-outline-light {
    color: #fff !important;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 3px solid #fff;
    border-radius: 50px;
    padding-top: 10px;
}

.btn-outline-light:hover {
    color: #9f3838 !important;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 3px solid #fff;
    border-radius: 50px;
    background-color: #fff;
}

.btn-outline-red {
    color: #9f3838 !important;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 3px solid #9f3838;
    border-radius: 50px;
    padding-top: 10px;
    z-index:100;
}

.btn-outline-red:hover {
    color: #fff !important;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 3px solid #9f3838;
    border-radius: 50px;
    background-color: #9f3838;
    z-index:100;
}

.btn-outline-red-leggi {
    color: #9f3838 !important;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 2px solid #9f3838;
    border-radius: 50px;
    padding-top: 10px;
    z-index:100;
    padding:5px 9px 3px;
}

.btn-outline-red-leggi:hover {
    color: #fff !important;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 2px solid #9f3838;
    border-radius: 50px;
    background-color: #9f3838;
    z-index:100;
    padding:5px 9px 3px;
}

.btn-outline-white-leggi {
    color: #fff !important;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 2px solid #fff;
    border-radius: 50px;
    padding-top: 10px;
    z-index:100;
    padding:5px 9px 3px;
}

.btn-outline-white-leggi:hover {
    color: #9f3838 !important;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 2px solid #fff;
    border-radius: 50px;
    background-color: #fff;
    z-index:100;
    padding:5px 9px 3px;
}


.btn-gallery {
    color: #9f3838 !important;
    font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 2px solid #9f3838;
    border-radius: 50px;
    padding-top: 10px;
    z-index:100;
    padding:5px 9px 3px;
}

.btn-gallery:hover {
    color: #fff !important;
    font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 2px solid #9f3838;
    border-radius: 50px;
    background-color: #9f3838;
    z-index:100;
    padding:5px 9px 3px;
}

.btn-gallery-white {
    color: #fff !important;
    font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 2px solid #fff;
    border-radius: 50px;
    padding-top: 10px;
    z-index:100;
    padding:5px 9px 3px;
}

.btn-gallery-white:hover {
    color: #9f3838 !important;
    font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    border: 2px solid #fff;
    border-radius: 50px;
    background-color: #fff;
    z-index:100;
    padding:5px 9px 3px;
}

.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.txt-conteggio{
    position: absolute;
  bottom: 1rem;
  left: 2rem;
  z-index: 1;
  color: #fff;
  font-size: calc(16px + (35 - 16) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 500;
  text-shadow: 3px 3px 6px #2C2C2C;
}

.white {
    color: #fff;
}

.black {
    color: #2D2D2D;
}
.red {
    color: #9f3838;
}

.iubenda-nostyle{
    color:#fff;
}

a {
    color: #2D2D2D;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: #959595;
    text-decoration: none;
    background-color: transparent;
}


.nopadding {
    padding: 0px;
    margin: 0px;
}

.box-footer{
    padding-top:3rem;
    padding-bottom: 0rem;
    padding-left: 3rem;
    padding-right: 3rem;
}




.head-pavimentazioni {
    background-image: url(../img/head/pavimenti.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 300px;
}

strong{
    font-weight: 600;
}

/* ------------------------------video-in-background---------------------> */

.videobackground {
  position: relative;
    min-height: 10rem;
  width: 100%;
  overflow: hidden;
}

.videobackground video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.videobackground .container-fluid {
  position: relative;
  z-index: 2;
  padding-right:0px;
}

.videobackground .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}


.div-wrapper {
    position: relative;
    height: 250px;
    width: 300px;
}

.div-wrapper img {
    position: absolute;
    left: 0;
    bottom: 0;
}

#mapid { height: 350px; }


@media only screen and (max-width: 1050px) {
  .riga {
    border-left: 4px solid #fff;
    margin-left: -0.5rem;
    margin-bottom: 5rem;
}

.box {
    padding-top: 5rem;
    padding-bottom: 1rem;
    padding-right: 2rem;
}

.riga2 {
    border-right: 4px solid #9f3838;
    margin-right: 0.1rem;
    margin-top: 5rem;
}
.box3 {
    padding-top: 8rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
}

.div-wrapper {
    position: relative;
    height: 100px;
    width: 300px;
}
.navbarcolor.scrolled>.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-family: 'Spartan', sans-serif;
    padding-right: 1rem;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-family: 'Spartan', sans-serif;
    padding-right: 1rem;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.navbarcolor.scrolled>.navbar-light .navbar-nav .nav-link:hover {
    color: #A2A2A2;
    font-family: 'Spartan', sans-serif;
    padding-right: 1rem;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.box-pagine {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 2rem;
    padding-left: 2rem;
}

.mailfoot{
    font-size:15px;
}


.navbarcolor {
    transition: 500ms ease;
    background: transparent !important;
}

}

@media only screen and (max-width: 775px) {
    .hmobile{
        height: 15rem;
    }
    .mailfoot{
    font-size:11px;
}
.navbarcolor {
    transition: 500ms ease;
    background: #9f3838 !important;
}
    }