@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Outfit:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC&display=swap');

:root {--min-width: 320px; --max-width: 1920px; --padding: 3vw; --rosso_logo: #bd0031}
* {margin: 0; padding: 0; font-family: 'Outfit', sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}

.hidden {opacity:0} 
.visible {opacity:1}

body {margin: 0; padding: 0; font-size: 17px; color: #000; background:#000}
a {margin: 0; padding: 0; text-decoration:none; color: #444}
h1 {margin: 30px 0; padding: 0; font-size: 60px; line-height: 60px; color: #222}
.vspace {width: 100%; height:40px}

#spazio_top {margin: 0; padding: 0; width: 100%; height:102px}

@media screen and (max-width:160px)
{
  #spazio_top {height: 71px}
}

/* Header */

#fix_header_wrapper {min-width: var(--min-width); width: 100%; position:fixed; top:0; left:0; transition: all 0.5s linear; z-index: 90}
.fix_header_scrolling {top: -500px!important; opacity: 0!important; transition: all 0.5s linear}

.fix_header_bk, .fix_header_bk_w {transition: all 0.5s linear; box-shadow: rgba(0,0,0,0.1) 0px 10px 30px 0px; box-sizing: border-box}
.fix_header_bk {background:rgba(255, 255, 255, 0.95)!important}
.fix_header_bk_w {background:rgba(255, 255, 255, 0.95)!important}

.no_scrolling {position:fixed; overflow-y: hidden; width:100vw; height: 100vh}

#header, #header_w {margin:0px auto; width: 100%; min-width:320px; max-width: var(--max-width); position: relative}
#header_w {background: #FFF}
#header_flex {width: 100%; padding: 20px; display:flex; flex-direction: row; justify-content: space-between}

#logo {font-family: "Playfair Display SC"; color: var(--rosso_logo); font-size: 28px}
#logo_rsp {font-family: "Playfair Display SC"; color: var(--rosso_logo); font-size: 28px; display: none; padding: 0 0 100px 0}

#menu {position:relative; z-index: 90; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start}
.menu-box {display: flex; flex-direction: row; justify-content: flex-start; align-items: center}
.menu_item, .menu_item_attivo {padding: 7px 15px 7px 15px; font-size: 16px}
.menu_item {color: var(--rosso_logo)}
.menu_item:hover {color: #FFF; transition: all .5s; background: var(--rosso_logo)}

.menu_item {color: var(--rosso_logo); transition: all .5s}

.menu_item:hover {color: #FFF; transition: all .5s}
.menu_item_attivo {color: #FFF; background: var(--rosso_logo)}

.menu_divisorio {color: var(--rosso_logo); width:2px; height:100%; background: var(--rosso_logo)}

#vismenu {display:none; margin:0 0 0 10px; padding:0 10px 0 10px; cursor: pointer; transition: all .5s; font-size: 40px!important}
#vismenu {color: var(--rosso_logo); transition: all .5s}
#vismenu:hover {color: #FFF; transition: all .5s; background: var(--rosso_logo)}

#close-button {display: none; position: absolute; top: 20px; right: 20px; cursor:pointer; font-size: 40px!important; transition: all .5s; color: #FFF; font-weight: 400}

.show {left: 0px!important; opacity: 1!important; transition: all .5s!important}

@media screen and (max-width:800px)
{
#vismenu {display:block}
#close-button {display: block}

#menu {padding: 10px 0 10px 0; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: -100%; width:100%; height:100vh; opacity: 0; transition: all .5s!important; background: #000; z-index: 1000; overflow-y: auto;}
.menu-box {width: 100%; flex-direction: column; justify-content: center; align-items: center}
.menu_item, .menu_item_attivo {padding: 20px; color: #FFF; font-size: 25px}
.menu_item a {color:  #FFF; font-size: 25px}
#logo_rsp {display: block}
.menu_divisorio {display:none}
}

#pagina {margin:0px auto; width: 100%; min-width:320px; max-width: var(--max-width); background: #FFF}
.divisorio {margin: calc(var(--padding) * 0.5) 0; display: block; width: 100%; height:3px; background: var(--rosso_logo)}

/* HP VIDEO */

#hp_video_box {position: relative; width: 100%; height: 100vh; background: #000; overflow: hidden}
#hp_video_container {opacity:0.7; position: absolute; top: -100px; left: -100px; width: calc(1920px / 2); height: calc(1080px / 2)}
#myVideo {width: 100%}
#hp_video_text {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20% 5% 0 5%; display: flex; justify-content: center; align-items: center; text-align: center}
.hp_video_text_p {display: flex;  flex-wrap: wrap;  justify-content:center;  align-items:center; width: 100%; font-size: 2vw; color: #ccc; z-index: 50; opacity:0; transition: 3s linear!important; display:none; font-family: "Playfair Display SC";}
.TXT_EffectFadeIn {opacity:100%!important; transition: opacity 3s linear!important}


@media screen and (max-width:800px)
{
  .hp_video_text_p {font-size: 10vw}
}

.vd_spinner_box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.vd_spinner {
  width: 40px;
  height: 40px;
  /*border-width: 8px;
  border-style: solid;  
  border-image: linear-gradient(to right, #000, var(--rosso_logo)) 1;
  border-radius: 20px;*/
  background: linear-gradient(#000, #000) padding-box,
              linear-gradient(to right, #000, var(--rosso_logo)) border-box;
  border-radius: 50%;
  border: 4px solid transparent;

  animation: vd-spinner-anime 0.8s infinite linear;
}
@keyframes vd-spinner-anime {
  100% { 
    transform: rotate(360deg); 
  }
}


/* HP SS */

#hp_ss {position:relative; background: url(img/hp_top.jpg); height: min(100vh, 1080px); background-position: center; background-size: cover; display:flex; flex-direction: column; justify-content: center; align-items:center; opacity: 0}
#hp_ss_box_t1 {font-size: min(23vw, 441px); line-height: min(23vw, 300px); color: #DDD; text-align: center; opacity: 0; font-family: 'Cormorant Garamond', sans-serif;}
#hp_ss_box_t2 {font-size: min(6vw, 115px); color: #DDD; text-align: center; opacity: 0; font-family: 'Cormorant Garamond', sans-serif;}
.EffectFadeIn100 {opacity:1!important; transition: opacity 1.5s linear!important}
.EffectFadeIn60 {opacity:0.6!important; transition: opacity 1.5s linear!important}

#transport_ss {position:relative; background: url(img/transport_top.jpg); height: min(100vh, 1080px); background-position: center; background-size: cover; display:flex; flex-direction: column; justify-content: center; align-items:center; opacity: 0}
#transport_ss_box_t1 {font-size: min(23vw, 441px); line-height: min(23vw, 300px); color: #DDD; text-align: center; opacity: 0; font-family: 'Cormorant Garamond', sans-serif;}
#transport_ss_box_t2 {font-size: min(6vw, 115px); color: #DDD; text-align: center; opacity: 0; font-family: 'Cormorant Garamond', sans-serif;}

/* pgf */

.pgf {margin: 0; padding: 0; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; overflow: hidden;}
.pgf_cella {margin: 0; padding: var(--padding); display: flex; flex-wrap: wrap; justify-content: space-around}
.pgf_titolo {margin: 60px 0 0 0; padding: 0; font-size: 45px; font-weight: 700; line-height: 60px; color: #222; font-family: "Playfair Display SC"}
.pgf_testo {margin: 60px 0 0 0; padding: 0; font-size: 20px; line-height: 50px!important; color: #222}
.testo_maxi {font-size: 28px; font-weight: 700}

.w30p {width:35%}
.w40p {width:40%}
.w50p {width:50%}
.w60p {width:60%}
.w70p {width:65%}

.f_fd_ro {flex-direction: row}
.f_fd_co {flex-direction: column}
.f_jc_fs {justify-content: flex-start}
.f_jc_ce {justify-content: center}

.f_ai_le {align-items: left}
.f_ai_ce {align-items: center}

@media screen and (max-width:1200px)
{
  .pgf {padding: 5vh 0 5vh 0; flex-direction: column; justify-content: center; align-items: center}
  .pgf_cella {padding: 1vw}
  .w30p {width:92%}
  .w40p {width:92%}
  .w50p {width:92%}
  .w60p {width:92%}
  .w70p {width:92%}
}

/* HP TOP WATCH*/

#hp_top_watch {margin: 0; padding: 30px; background:#eee; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 50px}
#hp_top_watch img {width: 100%; max-width: 500px}
#hp_top_watch a {margin: 30px 0 0 0; padding: 30px; background: #222; color: #FFF; cursor: pointer; transition: 0.5s ease; display: inline-block}
#hp_top_watch a:hover {background: #4d4032; transition: 0.5s ease}

@media screen and (max-width: 1200px) {
  #hp_top_watch {padding: 5%; flex-direction: column}
}

/* HP WA*/

#hp_wa {padding: 60px 20px; width: 100%; font-size: 30px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center}
#hp_wa_logo {padding: 20px; font-size: 50px; background: #222; color: #FFF; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 30px; transition: 0.5s ease; border-radius: 10px}
#hp_wa_logo:hover {background: #4d4032; transition: 0.5s ease}

@media screen and (max-width: 900px) {
  #hp_wa {padding: 60px 5% 0 5%}
  #hp_wa_logo {font-size: 30px; flex-direction: column}
}

/* Carosello */
#carosello_hp {margin: 0 10% 0 10%; width: 80%}
.carosello_item {margin: 5px; padding: 0 0 10px 0; background: #f8f8f8}
#carosello_pulsanti {margin: 20px 10% 0 10%; padding: 0 30px 0 0; width: 80%; display: flex; flex-direction: row; justify-content: flex-end;}
.carosello_pulsante {margin: 0 0 0 5px; padding: 0px 40px; background: #222; color: #FFF; font-size: 40px; cursor: pointer; transition: 0.5s ease}
.carosello_pulsante:hover {background: #4d4032; transition: 0.5s ease}
#carosello_all {padding: 40px 0 40px 0; width:100%; text-align:center}
#carosello_all a{padding: 5px 40px; background: #222; color: #FFF; font-size: 18px; cursor: pointer; transition: 0.5s ease}
#carosello_all a:hover {background: #4d4032; transition: 0.5s ease}


/* Chiusura */
#footer {padding: 40px; display:flex; flex-direction: row; justify-content: space-around; align-items: flex-start; background: #4d4032}
.footer_box {text-align: center; font-size: 17px; color: #FFF}
.footer_box a {color: #FFF}

#footer_table td {padding: 3px}
#footer_table td.bottom_label {text-align: right}
#footer_table td.bottom_text {text-align: left}

.menu_item_bottom {display: block; width: 100%; padding: 0 0 10px 0}

@media screen and (max-width:1200px)
{
  #footer {flex-direction: column; justify-content: center;  align-items: center;}
  .footer_box {padding: 20px 0 20px 0}
}

#cprgt {padding: 10px; text-align:center; font-size: 12px; color: #ccc; background: #2e261e}
#cprgt a {color:#ccc}

/* WATCH GRID*/

#orologi_filtro_rsp {margin:5%; padding:0; font-size: 14px; color: #127749; text-align: right; display:none; cursor: pointer;} 

#orologi_wg {margin:0px auto; padding: 0; min-width:340px; width:100%; max-width:1460px; position: relative; display:flex; flex-direction: row; justify-content: center; align-items: flex-start;}

#orologi_wgf {margin:0; padding: 0 20px; min-width:340px; background: #FFF; transition: 0.5s ease}
#orologi_wgf_titolo {margin: 0; padding: 0; width:100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; font-size:17px} 
#orologi_wgf_close {margin:0; padding: 10px; font-size: 30px; opacity: 0; display:block; z-index:20001; cursor: pointer}
.orologi_style_pulsante_grigio_filtro {margin:0; padding: 10px; font-size: 17px}
#orologi_wgf_bottom {position: fixed; bottom: 0; left: 0; padding: 0 20px; width:100vw; height:80px; opacity: 0; background:#F8F8F8; z-index: 20005; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; column-gap: 20px;}
.orologi_wgf_gruppo {margin: 40px 0 20px 0; padding: 0; width:100%; font-size: 17px}
.orologi_filter_show {left: 0!important; opacity:1!important; transition: 0.5s ease}

#orologi_wgw {margin:0px auto; padding: 0 20px 0 0; min-width:340px; width:100%; max-width:1120px; display:flex; flex-direction: row; flex-wrap: wrap; justify-content:center; align-items: stretch; row-gap: 30px; column-gap: 20px; position: relative}

@media screen and (max-width:767px)
{
  #orologi_filtro_rsp {display:block} 
  
  #orologi_wgf {padding: 0; position: fixed; top: 0; left: -100%; width:100vw; height:100vh; opacity: 0; z-index: 20000; overflow-y:scroll!important}
  #orologi_wgf_titolo {padding: 0 0 10px 5%; border-bottom: 1px solid #ccc; justify-content: space-between}
  #orologi_wgf_close {opacity: 1}
  #orologi_wgf_top {display:none}  
  #orologi_wgf_bottom {opacity: 1}
  .orologi_wgf_gruppo {padding: 0 0 0 5%}

  #orologi_wgw {margin:0 5% 0 5%; padding: 0; width:100%; row-gap: 20px; column-gap: 0; justify-content:space-around}    
}

.effFade_In {animation: fadeIn 2s}

  @keyframes fadeIn {
    0% { opacity: 0}
    100% { opacity: 1}
  }
  
/* Check box */

.checkbox-ctrl {display: block; position: relative; margin-left:0%; margin-bottom: 18px; font-size: 12px; user-select: none}
.checkbox-ctrl input {height: 0; width: 0; -webkit-appearance: none; appearance: none; margin: 0}
.checkmark {position: absolute; top: 0px; left: 0px; height: 20px; width: 20px; border: 1px solid #999; background-color: #fff; transition: 0.5s ease} 
.check-text{position: absolute; top: 3px; left: 30px;font-size:12px} 
.checkbox-ctrl input:checked ~ .checkmark {background-color: var(--rosso_logo); transition: 0.5s ease}

@media screen and (max-width:767px)
{
  .checkbox-ctrl {margin-left:5%;} 
}

/* Pagina orologi*/

.anteprima_orologio {position:relative; width: calc(33.33% - 14px); max-width: 300px; display:inline-block; background: #f8f8f8}
.anteprima_orologi_img {width:100%; max-width: 300px}  
.anteprima_orologi_txt {padding: 10px; font-size:17px; text-align: left; color: #222; line-height: 20px}
.anteprima_orologi_overlay {font-size:17px; text-align:right; color: var(--rosso_logo)}

@media screen and (max-width: 1200px) {
  .anteprima_orologio {position:relative; width: calc(50% - 14px); display:inline-block}
}

/* Scheda */

#gallery_big {margin: 0 auto; padding: 0; width:80%; max-width: 600px; position:relative}
#gallery_big_img {width:100%}
#gallery_big_lente {position:absolute; right: 0; bottom: 0; width: 60px; height: 60px; background-color: rgba(255,255,255,0.9); display: flex; justify-content: center; align-items: center; cursor: pointer}
#gallery_big_lente i {font-size: 30px; color:var(--rosso_logo)}
#gallery_big_img_overlay {position:absolute; top: 0; left: 0; width:100%; opacity: 0}
.gallery_big_img_show {opacity: 1!important; transition: 0.5s ease}

#gallery {margin: 0 auto; padding: 0; width:80%!important}
#gallery .slick-prev:before {color: var(--rosso_logo)}
#gallery .slick-next:before {color: var(--rosso_logo)}

.gallery_item {padding: 10px; cursor: pointer;}
.gallery_item_img {width:100%}

#scheda {padding:0px; margin: 0px; display:flex; flex-direction: row; justify-content: center; align-items: center}
#scheda_img {padding:0px; margin: 0; display:flex; flex-direction: column; justify-content: center; align-items: center; width: 50%}
#scheda_testo {padding:0px 5% 0px 5%; width: 50%;}
#scheda_marca {padding: 20px 0 20px 0; color: #222; font-size: 50px; font-weight:700}
#scheda_modello {padding: 0 0 40px 0; color: #222; font-size: 30px; font-weight:700}
#scheda_descri {color: #593A26; font-size: 18px}
#scheda_prezzo {padding: 40px 0 40px 0; color: #593A26; font-size: 18px; text-align: right}
#scheda_richiesta {padding: 40px 0 40px 0; width:100%; text-align:center}
#scheda_richiesta a {display: block; padding: 5px 40px; background: #222; color: #FFF; font-size: 18px; cursor: pointer; transition: 0.5s ease}
#scheda_richiesta a:hover {background: #4d4032; transition: 0.5s ease}
#scheda_immagini {padding:0px; margin: 0px; display:flex; flex-direction: row; justify-content: center; align-items: center}
.miniatura {padding: 13px 18px 0px 18px; margin: 0; width:100px; height: 75px; float: left; text-align: center}

@media screen and (max-width: 1200px) {
  #scheda {flex-direction: column}
  #scheda_img, #scheda_testo {width: 100%}
  #gallery_big {width:90%}
}

/* 360 */
.modal {opacity:0; position: fixed; z-index: -700; left: 0; top: 0; width:100vw; height:100vh; background-color: rgba(0,0,0,0.97); font-size:0; border:none; transition: 0.5s ease}
.modal_show {opacity:1!important; z-index: 700!important; transition: 0.5s ease}

.modal_close {display:block; color: white; position: absolute; top: 20px; right: 20px; font-size: 40px!important; z-index: 701; cursor: pointer}
.modal_close:hover,.modal_close:focus {color: #999; text-decoration: none}
.modal-content {position: relative; margin: 0; padding: 0; width:100vw; height:100vh; display:flex; justify-content: center; align-items: center}
.modal-content_box {margin:0; padding:0; position:relative; width:100%; max-width:800px}
.mySlides {display: none; width: 100%; border:none}
.mySlides img {width: 100%}
.prev360, .next360 {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; color: var(--rosso_logo); font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none}
.prev360 {left: 20px; border-radius: 3px 0 0 3px}
.next360 {right: 20px; border-radius: 3px 0 0 3px}
.prev360:hover, .next360:hover {background-color: rgba(0, 0, 0, 0.8);}
.img-container {width: 100%; margin: 0; padding:0; cursor: ew-resize}

.zoom {display:inline-block; position: relative; cursor:zoom-in}

/* WOF */
#wof_top {padding: 40px; width:100%; background: url(img/sfondo_orologi.jpg); background-size: cover; background-position:center; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center}
#wof_titolo {font-size: 45px; font-weight: 700; line-height: 60px; color: var(--rosso_logo); font-family: "Playfair Display SC"}
#griglia_wof {margin:0px auto; padding: 40px; min-width:340px; display:flex; flex-direction: row; flex-wrap: wrap; justify-content:center; align-items: stretch; row-gap: 30px; column-gap: 20px}

@media screen and (max-width:800px)
{
  #griglia_wof {padding:40px 5% 40px 5%; width:100%; row-gap: 20px; column-gap: 0; justify-content:space-around}
}

/* Video */

#show_video {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0); z-index: -10; opacity: 0; transition: 1s ease}
#show_video_close {position: fixed; top: 10px; right: 10px; color: #FFF; font-size: 40px!important; z-index: 1001}
#show_video_container {width: 100%; height: 100%; display: flex!important; justify-content: center; align-items: center;}
.show_video_fade_in {opacity: 1!important; z-index: 1000!important; transition: 1s ease}
.view_video {padding: 10px; width: 100%; text-align: right; background: #222; color: #FFF; cursor: pointer; transition: 0.5s ease; display: inline-block}
.view_video:hover {background: #4d4032; transition: 0.5s ease}

.anteprima_video {position:relative; width: calc(33.33% - 14px); max-width: 300px; display:inline-block; background: #f8f8f8}
.anteprima_video_img {width:100%; max-width: 300px}  
.anteprima_video_txt {padding: 10px; font-size:17px; text-align: left; color: #222; line-height: 20px}

@media screen and (max-width: 1200px) {
  .anteprima_video {position:relative; width: 100%; display:inline-block}
}

/* Overlay video */

#overlay_video {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background:rgba(0,0,0,0.95); z-index: 10000; overflow-y: auto}
#overlay_video_box {position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center} 
#btt_overlay_close {position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 40px !important; color: #bd0031 !important; font-weight: 400; z-index: 10002}
.overlay_video_close {left: -100%!important; opacity: 0!important; transition: all .5s!important}
#video_player {width: 90vh; height: 90vh; z-index: 10001}

@media screen and (max-width: 800px) {
  #video_player {width: 100vh; height: 100vh}
}