


    

    


    /* ------------------------------------------------------------------------------------------------------------------ INIZIO STRUTTURALI IMPORTANTI */
/* ------------------------------------------------------------------------------------------------------------------ FINE STRUTTURALI IMPORTANTI 
*/

/* ------------------------------------------------------------------------------------------------------------------ INIZIO FONT */
/* ------------------------------------------------------------------------------------------------------------------ FINE FONT */

/* ------------------------------------------------------------------------------------------------------------------ INIZIO HEADER */
header#layout-header {
  background: #fff !important;
}
#head-slideshow {
  color: #000;
}
/* ------------------------------------------------------------------------------------------------------------------ FINE HEADER */

/* ------------------------------------------------------------------------------------------------------------------ INIZIO CORPO PAGINA */
.gray-bg {
  background: #f8d155;
}
#new-in-negozio .gray-bg,
#new-online .gray-bg,
#new-faq .gray-bg,
#new-vendere .gray-bg {
  background: #c2d8ef;
}
#new-in-negozio .white-bg {
  background: #91e5f2;
}
#new-in-negozio #section-100 {
  background-color: #ffffff;
}
#detail-splide #detail-splide-slide01.splide__slide .detail-slide {
  background-color: #f5ebc9 !important;
}
#detail-splide #detail-splide-slide02.splide__slide .detail-slide {
  background-color: #ffb990 !important;
}
#detail-splide #detail-splide-slide03.splide__slide .detail-slide {
  background-color: #bcdcd1 !important;
}
#detail-splide #detail-splide-slide04.splide__slide .detail-slide {
  background-color: #bf9cc1 !important;
}
#detail-splide .splide__slide:nth-child(even) .detail-slide {
  background-color: #bf9cc1;
}
#detail-splide .splide__slide:nth-child(odd) .detail-slide {
  background-color: #f5ebc9;
}
#box_negozio .grey-card {
  background-color: #d2efee;
}
#box_online .grey-card {
  background-color: #faf2e3;
}
#new-in-negozio .mini-box.gray-bg {
  background: #fbf2e1;
  margin-bottom: 30px;
}
#new-in-negozio button {
  background-color: #91e5f2;
  color: #000;
}
#new-in-negozio .white-bg .grid-1 {
  padding-bottom: 70px;
}
#new-online h1,
#new-faq h1,
#new-in-negozio h1 {
  margin-top: 50px;
}
#new-online .white-bg.color {
  background-color: #fcd4d9;
  padding-bottom: 55px;
}
#new-online .grey-card {
  background-color: #bcdcd1 !important;
}
#new-online .gray-bg {
  background: #ffffff;
}
#new-online #numbers-splide-list .splide__slide {
  background-color: #f0f5fb;
  border-radius: 20px;
}
#new-online #numbers-splide-list .splide__slide .number-box {
  border: 17px solid #ffffff;
}
.gray2-bg {
  background-color: #c2d8ef;
}
.flex-cell.content-right.gray-bg {
  background-color: #faf2e3;
}
#form-section.red-bg {
  background: #f5ebc9;
  color: #000;
}
#new-vendere h2 {
  color: #000000;
}
#new-online h2 {
  color: #000000;
}
#new-online .youtubeBlockResponsive16by9 {
  /* padding-bottom: 35.25%; */
}
#new-online .figcaption iframe {
  height: 315px;
}
.detail-slide p {
  line-height: 26px;
}
#new-vendere #detail-splide .splide__slide:nth-child(even) {
  color: black;
}
.form-sim-cnt input,
.form-sim-cnt select {
  color: black;
}
.sim-container .absolute.bottom strong {
  font-size: 55px;
}
.ref-circle .circle-path .circle-handle .circle-label {
  font-size: 18px;
  top: -2px !important;
}
#circles-bg-cnt {
  background: #c2d8ef;
  background-image: none;
}
#new-vendere .grey-card.with-bg-circle,
#new-in-negozio .grey-card.with-bg-circle,
#new-online .grey-card.with-bg-circle {
  background-image: none;
  background: #bee9c8;
}
#new-online .one-per-row .flex-row.centered-content.responsive.one-per-row {
  background: #ffffff;
}
#sim-form button.primary.inverse {
  background-color: var(--accent-color-dark);
  color: var(--white);
}
#sim-form button.primary.inverse:hover {
  color: #e20613;
}
#form-section.red-bg {
  background: #ffb990;
}
.page-template-homepage-pl .gray-bg {
  background: #faf2e3;
}
#new-online .flex-row.responsive.one-per-row {
  background: #ffffff;
}
.flex-row.responsive.one-per-row.extremes p {
  font-weight: 900;
}
#new-vendere .compact-ul li::marker {
  color: #000000;
}
#new-in-negozio ul.primary li::marker,
#new-online ul.primary li::marker,
#new-faq ul.primary li::marker,
#new-vendere ul.primary li::marker {
  color: #000000;
}
#new-online #numbers-splide-list .splide__slide .number-box {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  font-weight: bold;
  font-size: 0;
  margin-bottom: 20px;
  border: 0 !important;
}
li#numbers-splide-slide01 .flex-cell .number-box {
  background-image: url(https://www.compass.it/images/come-funziona-1.svg);
  width: 100% !important;
  height: 506px !important;
  margin: 0 !important;
  background-size: cover;
}
li#numbers-splide-slide02 .flex-cell .number-box {
  background-image: url(https://www.compass.it/images/come-funziona-2.svg);
  width: 100% !important;
  height: 506px !important;
  margin: 0 !important;
  background-size: cover;
}
li#numbers-splide-slide03 .flex-cell .number-box {
  background-image: url(https://www.compass.it/images/come-funziona-3.svg);
  width: 100% !important;
  height: 506px !important;
  margin: 0 !important;
  background-size: cover;
}
li#numbers-splide-slide04 .flex-cell .number-box {
  background-image: url(https://www.compass.it/images/come-funziona-4.svg);
  width: 100% !important;
  height: 506px !important;
  margin: 0 !important;
  background-size: cover;
}
li#numbers-splide-slide05 .flex-cell .number-box {
  background-image: url(https://www.compass.it/images/come-funziona-5.svg);
  width: 100% !important;
  height: 506px !important;
  margin: 0 !important;
  background-size: cover;
}
#new-online #numbers-splide-list .numbers-slide {
  padding: 0;
}
#new-online .numbers-slide.flex-row.flex-column.centered-content p {
  padding: 0px 30px 18px 30px;
  margin: 6px 0 -10px 0;
}
#new-faq .accordion-content a {
  color: #e20613 !important;
}
#new-faq .accordion-content ul li {
  list-style: disc;
}
/* ------------------------------------------------------------------------------------------------------------------ FINE CORPO PAGINA */

/* ------------------------------------------------------------------------------------------------------------------ INIZIO FOOTER */
/* ------------------------------------------------------------------------------------------------------------------ FINE FOOTER */

/* ************************************************************************ */
/* ------------------------------------------------------------------------------------------------------------------ RESPONSIVE */
/* ************************************************************************ */

/* ------------------------------------------------------------------------------------------------------ DESKTOP - FULL RESOLUTION (orig. 1920)*/
@media only screen and (min-width: 1921px) {
  #new-in-negozio #ragazzo img {
    bottom: -71px;
    position: relative;
    width: 430px;
  }
  #new-online #ragazza img {
    bottom: -55px;
    position: relative;
    width: 380px;
  }
  #new-online li#numbers-splide-slide01 .flex-cell .number-box,
  #new-online li#numbers-splide-slide02 .flex-cell .number-box,
  #new-online li#numbers-splide-slide03 .flex-cell .number-box,
  #new-online li#numbers-splide-slide04 .flex-cell .number-box,
  #new-online li#numbers-splide-slide05 .flex-cell .number-box {
    margin: 10px -20px 0 -20px;
    object-fit: cover;
  }
}

/* ------------------------------------------------------------------------------------------------------------------ DESKTOP - STANDARD (orig. 1459)*/
@media only screen and (min-width: 1681px) and (max-width: 1920px) {
  #new-in-negozio #ragazzo img {
    bottom: -71px;
    position: relative;
    width: 430px;
  }
  #new-online #ragazza img {
    bottom: -55px;
    position: relative;
    width: 380px;
  }
  #new-online li#numbers-splide-slide01 .flex-cell .number-box,
  #new-online li#numbers-splide-slide02 .flex-cell .number-box,
  #new-online li#numbers-splide-slide03 .flex-cell .number-box,
  #new-online li#numbers-splide-slide04 .flex-cell .number-box,
  #new-online li#numbers-splide-slide05 .flex-cell .number-box {
    margin: 10px -20px 0 -20px;
    object-fit: cover;
  }
}

/* ------------------------------------------------------------------------------------------------------------------ DESKTOP - VECCHI (orig. 1680)*/
@media only screen and (min-width: 1478px) and (max-width: 1680px) {
  #new-in-negozio #ragazzo img {
    bottom: -71px;
    position: relative;
    width: 430px;
  }
  #new-online #ragazza img {
    bottom: -55px;
    position: relative;
    width: 380px;
  }
  #new-online li#numbers-splide-slide01 .flex-cell .number-box,
  #new-online li#numbers-splide-slide02 .flex-cell .number-box,
  #new-online li#numbers-splide-slide03 .flex-cell .number-box,
  #new-online li#numbers-splide-slide04 .flex-cell .number-box,
  #new-online li#numbers-splide-slide05 .flex-cell .number-box {
    margin: 10px -20px 0 -20px;
    object-fit: cover;
  }
}

/* ------------------------------------------------------------------------------------------------------ DESKTOP - VECCHI PORTATILI (orig. 1459)*/
@media only screen and (min-width: 1356px) and (max-width: 1477px) {
  #new-in-negozio #ragazzo img {
    bottom: -71px;
    position: relative;
    width: 430px;
  }
  #new-online #ragazza img {
    bottom: -55px;
    position: relative;
    width: 380px;
  }
  #new-online li#numbers-splide-slide01 .flex-cell .number-box,
  #new-online li#numbers-splide-slide02 .flex-cell .number-box,
  #new-online li#numbers-splide-slide03 .flex-cell .number-box,
  #new-online li#numbers-splide-slide04 .flex-cell .number-box,
  #new-online li#numbers-splide-slide05 .flex-cell .number-box {
    margin: 10px -20px 0 -20px;
    object-fit: cover;
  }
}

/* ------------------------------------------------------------------------------------------------------------------ DESKTOP - PORTATILI */
@media only screen and (min-width: 1200px) and (max-width: 1355px) {
  #new-in-negozio #ragazzo img {
    bottom: -71px;
    position: relative;
    width: 430px;
  }
  #new-online #ragazza img {
    bottom: -55px;
    position: relative;
    width: 380px;
  }
  #new-online li#numbers-splide-slide01 .flex-cell .number-box,
  #new-online li#numbers-splide-slide02 .flex-cell .number-box,
  #new-online li#numbers-splide-slide03 .flex-cell .number-box,
  #new-online li#numbers-splide-slide04 .flex-cell .number-box,
  #new-online li#numbers-splide-slide05 .flex-cell .number-box {
    margin: 10px -20px 0 -20px;
    object-fit: cover;
  }
}

/* ------------------------------------------------------------------------------------------------------------------ TABLET LANDSCAPE */
@media only screen and (min-width: 993px) and (max-width: 1199px) {
  #new-in-negozio #ragazzo img {
    bottom: -71px;
    position: relative;
    width: 430px;
  }
  #new-online #ragazza img {
    bottom: -55px;
    position: relative;
    width: 380px;
  }
  #new-vendere #s1 {
    background-image: url(https://www.compass.it/images/pagolight_vendere_slide1.jpg.webp) !important;
  }
  #new-online li#numbers-splide-slide01 .flex-cell .number-box,
  #new-online li#numbers-splide-slide02 .flex-cell .number-box,
  #new-online li#numbers-splide-slide03 .flex-cell .number-box,
  #new-online li#numbers-splide-slide04 .flex-cell .number-box,
  #new-online li#numbers-splide-slide05 .flex-cell .number-box {
    margin: 0 !important;
    height: 478px !important;
    background-size: cover;
  }
}

/* ------------------------------------------------------------------------------------------------------------------ TABLET PORTRAIT */
@media only screen and (min-width: 768px) and (max-width: 992px) {
  #new-in-negozio #ragazzo img {
    bottom: -71px;
    position: relative;
    width: 430px;
  }
  #new-online #ragazza img {
    bottom: -55px;
    position: relative;
    width: 380px;
  }
  #new-vendere #s1 {
    background-image: url(https://www.compass.it/images/pagolight_vendere_slide1.jpg.webp) !important;
  }
  li#numbers-splide-slide01 .flex-cell .number-box {
    background-image: url(https://www.compass.it/images/come-funziona-1.svg);
    width: 100% !important;
    height: 350px !important;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5% !important;
    margin-top: 0px;
  }
  li#numbers-splide-slide02 .flex-cell .number-box {
    background-image: url(https://www.compass.it/images/come-funziona-2.svg);
    width: 100% !important;
    height: 350px !important;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5% !important;
    margin-top: 0px;
  }
  li#numbers-splide-slide03 .flex-cell .number-box {
    background-image: url(https://www.compass.it/images/come-funziona-3.svg);
    width: 100% !important;
    height: 350px !important;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5% !important;
    margin-top: 0px;
  }
  li#numbers-splide-slide04 .flex-cell .number-box {
    background-image: url(https://www.compass.it/images/come-funziona-4.svg);
    width: 100% !important;
    height: 350px !important;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5% !important;
    margin-top: 0px;
  }
  li#numbers-splide-slide05 .flex-cell .number-box {
    background-image: url(https://www.compass.it/images/come-funziona-5.svg);
    width: 100% !important;
    height: 350px !important;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5% !important;
    margin-top: 0px;
  }
}

/* ------------------------------------------------------------------------------------------------------ MOBILE LANDSCAPE + MOBILE HD FULL GRANDI */
@media only screen and (min-width: 401px) and (max-width: 767px) {
  #head-slideshow #s1 {
    background-image: url(https://www.compass.it/images/pagolight_home_slide1_mobile.jpg.webp) !important;
  }
  #head-slideshow p {
    color: #fff;
  }
  #new-vendere #head-slideshow #s1 {
    background-image: url(https://www.compass.it/images/pagolight_vendere_slide1_mobile.jpg.webp) !important;
  }

  #head-slideshow #slide1 {
    background-image: url(https://www.compass.it/images/pagolight_acquistare_slide-1_mobile.jpg.webp) !important;
  }
  #head-slideshow #slide2 {
    background-image: url(https://www.compass.it/images/pagolight_acquistare_slide-2_mobile.jpg.webp) !important;
  }
  #head-slideshow #slide3 {
    background-image: url(https://www.compass.it/images/pagolight_acquistare_slide-3_mobile.jpg.webp) !important;
  }
  #head-slideshow .slide-caption p {
    line-height: 28px;
    font-size: 28px;
  }
  #form-section.mob #total-text strong {
    font-size: 7vw;
  }
  .ref-circle .circle-path .circle-handle .circle-label {
    font-size: 11px;
    top: -1px !important;
  }
  #new-vendere li#detail-splide-slide01 {
    background-color: #f5ebc9 !important;
  }
  #new-vendere li#detail-splide-slide02 {
    background-color: #ffb990 !important;
  }
  #new-vendere li#detail-splide-slide03 {
    background-color: #bcdcd1 !important;
  }
  #new-vendere li#detail-splide-slide04 {
    background-color: #bf9cc1 !important;
  }
  div#youtube19657 {
    height: 300px;
  }
  #new-in-negozio #ragazzo img {
    width: 300px;
  }
  #new-online li#numbers-splide-slide01 .flex-cell .number-box,
  #new-online li#numbers-splide-slide02 .flex-cell .number-box,
  #new-online li#numbers-splide-slide03 .flex-cell .number-box,
  #new-online li#numbers-splide-slide04 .flex-cell .number-box,
  #new-online li#numbers-splide-slide05 .flex-cell .number-box {
    margin: 0 !important;
    height: 380px !important;
    background-size: cover;
  }
  #new-online #numbers-splide-list .splide__slide p {
    font-size: 16px;
    line-height: 20px;
  }
}

/* ------------------------------------------------------------------------------------------------------------------ MOBILE PORTRAIT */
@media only screen and (max-width: 400px) {
  #head-slideshow #s1 {
    background-image: url(https://www.compass.it/images/pagolight_home_slide1_mobile.jpg.webp) !important;
  }
  #head-slideshow p {
    color: #fff;
  }
  #new-vendere #head-slideshow #s1 {
    background-image: url(https://www.compass.it/images/pagolight_vendere_slide1_mobile.jpg.webp) !important;
  }

  #head-slideshow #slide1 {
    background-image: url(https://www.compass.it/images/pagolight_acquistare_slide-1_mobile.jpg.webp) !important;
  }
  #head-slideshow #slide2 {
    background-image: url(https://www.compass.it/images/pagolight_acquistare_slide-2_mobile.jpg.webp) !important;
  }
  #head-slideshow #slide3 {
    background-image: url(https://www.compass.it/images/pagolight_acquistare_slide-3_mobile.jpg.webp) !important;
  }
  #head-slideshow .slide-caption p {
    line-height: 28px;
    font-size: 28px;
  }
  #form-section.mob #total-text strong {
    font-size: 7vw;
  }
  .ref-circle .circle-path .circle-handle .circle-label {
    font-size: 11px;
    top: -1px !important;
  }
  #new-vendere li#detail-splide-slide01 {
    background-color: #f5ebc9 !important;
  }
  #new-vendere li#detail-splide-slide02 {
    background-color: #ffb990 !important;
  }
  #new-vendere li#detail-splide-slide03 {
    background-color: #bcdcd1 !important;
  }
  #new-vendere li#detail-splide-slide04 {
    background-color: #bf9cc1 !important;
  }
  div#youtube19657 {
    height: 300px;
  }
  #new-in-negozio #ragazzo img {
    width: 300px;
  }
  #new-online li#numbers-splide-slide01 .flex-cell .number-box,
  #new-online li#numbers-splide-slide02 .flex-cell .number-box,
  #new-online li#numbers-splide-slide03 .flex-cell .number-box,
  #new-online li#numbers-splide-slide04 .flex-cell .number-box,
  #new-online li#numbers-splide-slide05 .flex-cell .number-box {
    margin: 0 !important;
    height: 380px !important;
    background-size: cover;
  }
  #new-online #numbers-splide-list .splide__slide p {
    font-size: 16px;
    line-height: 20px;
  }
}

@media screen and (max-width: 767px) {
  #news-home #filters-slide-list .splide__slide,
  #news-archivio #filters-slide-list .splide__slide,
  #pl-news-richiamo #filters-slide-list .splide__slide,
  #news-interno #filters-slide-list .splide__slide {
    width: 90px !important;
    margin-right: 20px !important;
  }
  #layout-content .pink-bg .grid-2 .flex-row .flex-cell {
    width: 100%;
    overflow-x: hidden;
  }
}




@media only screen and (max-width: 767px) {
  .page-template-homepage-pl #head-slideshow #slide2 {
    background-color: #94d3e4 !important;
    background-image: url(https://www.compass.it/images/pagolight_home_slide1_mobile.jpg.webp) !important;
  }
}
@media only screen and (max-width: 400px) {
  #head-slideshow #slide2 {
    background-image: url(https://www.compass.it/images/pagolight_home_slide1_mobile.jpg.webp) !important;
  }
}
@media only screen and (max-width: 400px) {
  .page-template-homepage-pl #head-slideshow #slide1 {
    background-color: #f4d0d0 !important;
    background-image: url(https://www.compass.it/images/HEADER-SITO-MOBILE_1125-1968-14323.jpg.webp) !important;
  }
}
@media only screen and (max-width: 767px) {
  .page-template-homepage-pl #head-slideshow #slide1 {
    background-color: #f4d0d0 !important;
    background-image: url(https://www.compass.it/images/HEADER-SITO-MOBILE_1125-1968-14323.jpg.webp) !important;
    background-size: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .page-template-homepage-pl #head-slideshow #slide1 {
    background-color: #f4d0d0 !important;
    background-image: url(https://www.compass.it/images/HEADER-SITO-IPAD_1238-768-14323.jpg.webp) !important;
  }
}
@media only screen and (min-width: 1024px) {
  .page-template-homepage-pl #head-slideshow #slide1 {
    background-size: contain !important;
    background-color: #f4d0d0 !important;
    background-image: url(https://www.compass.it/images/HEADER-SITO_1920-841-14323.jpg.webp) !important;
    background-position-x: right;
    background-position-y: bottom;
  }
}

@media only screen and (min-width: 768px) {
    #menu-cnt {
        flex: 4 !important;
    }
}



