@charset "UTF-8";
//section= Header: Barra Lingua ed Utente;
@top_nav_bg                = transparent;  //help colore del background
@top_nav_color             = #ffffff;  //help colore del font

//section= Colori del Menu Standard livello 1;
@menu_cat_bg               = transparent;  //help colore del background 
@menu_cat_color            = #ffffff;  //help colore del font 
@menu_cat_open_bg          = transparent;  //help colore del background con voce aperta
@menu_cat_open_color       = #ffffff;  //help colore del font con voce aperta

//section= Colori del Menu Standard livello 2 (submenu);
@submenu_cat_bg            = #e0071b;  //help colore del background 
@submenu_cat_color         = #ffffff;  //help colore del font 
@submenu_cat_over_bg       = #e0071b;  //help colore del background sull'hover
@submenu_cat_over_color    = #cccccc;  //help colore del font sull'hover

//section= Colori del Menu Mobile;
@menu_mobile_bg            = #e0071b;  //help colore del background 
@menu_mobile_color         = #ffffff;  //help colore del font 
@submenu_mobile_color      = #cccccc;  //help colore del font nei sottomenu

//section= Colori del Header;
//solo per fieraroma
@header_bg                 = #FFFFFF;  //help colore del background 

//section= COOKIE DISCLAIMER;
@cookie_bg                 = #000000;  //help colore del background
@cookie_border_color       = #EDEDED;  //help colore del bordo
@cookie_color              = #FFFFFF;  //help colore del font

//section= Generali;
@font_color                = #000000;  //help colore del font principale
@link_color                = #e0071b;  //help colore dei link
@title_color               = #000000;  //help colore dei titoli
@sub_title_color           = #000000;  //help colore dei sottotitoli
@highlight_bg              = #000000;  //help colore di sfondo dei box con classe <i class="text-warning">.bg-highlight</i>
@highlight_color           = #FFFFFF;  //help colore del font dei box con classe <i class="text-warning">.bg-highlight</i>
@dark_bg                   = #000000;  //help colore di sfondo dei box con classe <i class="text-warning">.bg-dark</i>
@dark_color                = #FFFFFF;  //help colore del font dei box con classe <i class="text-warning">.bg-dark</i>
@light_bg                  = #F6F6F6;  //help colore di sfondo dei box con classe <i class="text-warning">.bg-light</i>
@light_color               = @font_color;  //help colore del font dei box con classe <i class="text-warning">.bg-light</i>
@notfound_bg               = #F6F6F6;  //help colore di sfondo dei box con classe <i class="text-warning">.bg-notfound</i>
@notfound_color            = @font_color;  //help colore del font dei box con classe <i class="text-warning">.bg-notfound</i>
@image_border              = #000000;  //help colore del bordo delle immagini nelle liste

//section= Footer;
@footer_bg                 = #000000;  //help colore di sfondo
@footer_color              = #FFFFFF;  //help colore del font

//Solo per fieraroma
@footer_bg_image           = #FFFFFF;  //help colore di sfondo dell'immagine

//section= Bottoni principali (es tasto ACQUISTA);
@btn-primary-bg            = #e0071b;  //help colore di sfondo
@btn-primary-color         = #FFFFFF;  //help colore del font
@btn-primary-border        = #343434;  //help colore del bordo

//section= Altri pulsanti;
@btn-default-bg            = #ffffff;  //help colore di sfondo - default
@btn-default-color         = #e0071b;  //help colore del font - default
@btn-default-border        = #CCCCCC;  //help colore del bordo - default

@btn-success-bg            = #000000;  //help colore di sfondo - success
@btn-success-color         = #FFFFFF;  //help colore del font - success
@btn-success-border        = #343434;  //help colore del bordo - success

@btn-info-bg               = #5BC0DE;  //help colore di sfondo - info
@btn-info-color            = #FFFFFF;  //help colore del font - info
@btn-info-border           = #46B8DA;  //help colore del bordo - info

@btn-warning-bg            = #F0AD4E;  //help colore di sfondo - warning
@btn-warning-color         = #FFFFFF;  //help colore del font - warning
@btn-warning-border        = #EEA236;  //help colore del bordo - warning

@btn-danger-bg             = #D9534F;  //help colore di sfondo - danger
@btn-danger-color          = #FFFFFF;  //help colore del font - danger
@btn-danger-border         = #D43F3A;  //help colore del bordo - danger

//section= Colori del Calendario;
@cal_bg                    = #FFFFFF;  //help background calendario
@cal_title_bg              = #000000;  //help background mese
@cal_title_color           = #FFFFFF;  //help font mese
@cal_week_bg               = #EDEDED;  //help background giorni settimana
@cal_week_color            = #000000;  //help font giorni settimana

@cal_not_sched_bg          = #FFFFFF;  //help background giorni non in programma
@cal_not_sched_color       = #666666;  //help font giorni non in programma

@cal_scheduled_bg          = #2C842C;  //help background giorni in programma
@cal_scheduled_color       = #FFFFFF;  //help font giorni in programma
@cal_scheduled_hover_bg    = #95c195;  //help background hover giorni in programma
@cal_scheduled_hover_color = #FFFFFF;  //help font hover giorni in programma

@cal_scheduled_sel_bg      = #006699;  //help background giorno selezionato
@cal_scheduled_sel_color   = #FFFFFF;  //help font giorno selezionato

@cal_full_bg               = #E3E3E3;  //help background giorno in programma ma senza disponibilita'
@cal_full_color            = #666666;  //help font giorno in programma ma senza disponibilita'

//section= Abbonamenti
@abbo_bg                   = #FCE2BA;  //help background sezione abbonamento in scelta eventi in abbonamento

@import "operator.part/toinclude.less";

/******** font ***/


@font-face {
  font-family: "Raleway";  
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Raleway/raleway.woff2") format("woff2");    
}

@font-face {
  font-family: "RalewayLight";  
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/Raleway/ralewaylight.woff2") format("woff2");    
}

@font-face {
  font-family: "RalewayBold";  
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Raleway/ralewaybold.woff2") format("woff2");    
}

/**** fine font ***/

body {
  background-color: rgb(245, 245, 245);
  font-size: 16px;
  color: #000;
  font-family: "Raleway";  
  font-style: normal;
  font-weight: 300;
}

#page_header { 
   height: 150px;
}

#top-nav-inner {
    max-width: 100%;    
    font-family: "Raleway";  
    font-style: normal;
    font-weight: 300;
    font-size: 14px;  
}

#top-social {  font-size: 14px;}



#menu-user-mobile, #menu-cat, #menu-cat-alt {
  position: relative;
  top: 84px;
}

#menu-cat-alt > ul > li > a {
    font-family: "Raleway";  
    font-style: normal;
    font-weight: 300;
    font-size: 15px;
}

//calendario
.legenda li:before {
  content: "#";
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  display: inline-block;
  zoom: 1;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  text-indent: 0;
}

ul.month {
  height: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
}

ul.week {
  height: 15px;
}

.date-cal .week li {
  background-color: #f5f5f5;
  color: #000000;
}

.date-cal .month a {
  color: #000;
  font-size: 20px;
}

//disponibili
.date-cal .days a {
  background-color: #000;
  color: #fff;
  width: 100%;
  text-decoration: none; 
  font-size: 16px;
}

.date-cal .days a:hover {
  background-color: #000;
  color: #fff;
  font-size: 16px;
}

.date-cal .day p {
  background-color: #000;
  color: #fff;
  margin-bottom: 0px;
  font-size: 12px;
}

//promo
.promo a, .promo p {
  background-color: #2C842C !important;
  color: #fff !important;
}

//fasce orarie
.date-cal li, .time-cal li {
  background-color: #f5f5f5;
  margin-bottom: 5px;
}

//Esaurito
.date-cal li.inactive, .time-cal li.inactive {
  background-color: #E0071B;
  color: #fff;
  font-size: 16px;
}

//Chiuso
.date-cal li.no-event,.time-cal li.no-event {
  background-color: #FFFFFF;
  color: #c3c3c3;
  font-size: 16px;
}

li.day {
  height: 42px;
}

.date-cal .month li.name {
  color: #000;
}

.date-cal .month li {
  background-color: #f5f5f5;
}

.date-cal .days a.selected, .date-cal .days p.selected {
  background-color: #006699;
  color: #FFFFFF;
  margin-bottom: 0px;
}

.time-cal .times a {
  background-color: #f5f5f5;
  color: #000;
  border: solid 0.5px #EDEDED;
}

.time-cal .caption {
  background-color: #fff;
  color: #000;
}

.time-cal .times a:hover {
  background-color: #2C842C;
  color: #FFFFFF;
}

//disponibili (In programma, con posti disponibili)
.legenda li.np:before {
  background-color: #000;
  color: #fff;
}

//promo
.legenda li.pd:before {
  background-color: #2C842C;
  color: #fff;
}

//esaurito (In programma, senza posti disponibili)
.legenda li.ds:before {
  background-color: #E0071B;
  color: #fff;
}

//chiuso (Non in programma)
.legenda li.pr:before {
  background-color: #fff;
  color: #c3c3c3;
}

//sezione footer
#footer-nav {
  max-width: 1280px;
}

#boxFooter {
  max-width: 1280px;
  margin: auto;
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  z-index: 1000;
}

.heightBox {
  margin-bottom: 5px;
}

ul.ulFooter {
  list-style-type: none;
  text-decoration: none;
  text-transform:uppercase;
}

ul.ulFooter>li {
  margin-bottom: 10px;
  font-weight: bold;
}

.boxFooterSmart {
  padding-left: 0px;
  margin-top: 10px;
}

#footer-nav ul {
  padding-left: 0px;
}

.riga {
  margin: 20px auto 20px;
  width: calc(100% - 40px);
  height: 1px;
  opacity: 0.1;
  border: 1px solid rgb(255, 255, 255);
}

.boxCentrale {
  padding-top: 90px;
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.scritta {
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.44px;
}

.boxLogo {
  --logo-height: 100px;
  position: absolute;
  width: 100%;
  height: var(--logo-height);
  top: calc(-1* var(--logo-height) / 2);
  display: flex;
  flex-direction: row;
  -webkit-box-pack: center;
  justify-content: center;
  align-items: flex-start;
}

.firstHashtag {
  display: block;
  flex: 1 1 0%;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.61px;
  position: relative;
  top: 73px;
  text-transform: uppercase;
  text-align: right;
}

.logoFooter {
  height: 100%;
  margin: 0px 10px;
}

.secondHashtag {
  display: block;
  flex: 1 1 0%;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.61px;
  position: relative;
  top: 73px;
  text-transform: uppercase;
}

ul.social {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  list-style-type: none;
}

.social>li {
  padding: 0px 16.5px;
}

.social>li a {
  display: block;
  width: 25px;
  height: 25px;
}

.space {
  padding-bottom: 100px;
}

.page-content {
  max-width: 1030px;
  margin: 20px auto;
  padding-bottom: 100px;
}

.home {
  position: relative;
  top: -68px;
}

#footer-nav ul li a {
  text-decoration: none;
}


@media (min-width: 412px) {
  .logoFooter {
    margin: 0px 20px;
  }
  .firstHashtag {
      font-size: 17px;
  }
  .secondHashtag {
    font-size: 17px;
  }
}

@media (min-width: 600px) {
  .boxLogo {
      --logo-height: 180px;
      height: var(--logo-height);
  }
  .firstHashtag {
    font-size: 24px;
    top: 135px;
  }
  .secondHashtag {
    font-size: 24px;
    top: 135px;
  }
}


@media (min-width: 768px) {
  .logoFooter {
    margin: 0px 50px;
  }
  .firstHashtag {
      font-size: 26px;
  }
  .secondHashtag {
    font-size: 26px;
  }
}

@media (min-width: 834px) {
  .logoFooter {
      margin: 0px 100px;
  }
}

@media all and (max-width: 480px) {
  .date-cal li, .date-cal a {
      width: 13%;
  }

  li.name {
    width: 78% !important;
  }
  
  li.prev, li.next {
    width: 10%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .date-cal {
    width: unset !important;
    height: auto;
    margin-top: 10px;
    overflow: hidden;
    border: solid 1px #EDEDED;
  } 

  .time-cal {
    width: 100% !important;
    height: auto;
    margin-top: 10px;
    overflow: hidden;
  } 

  .time-cal .caption {
    background-color: #fff;
    color: #000;
    width: 100%;
  }
   
} 

@media (min-width: 481px) and (max-width: 767px) { 

  .date-cal li, .date-cal a {
    width: 14%;
  }

  li.name {
    width: 78% !important;
  }

  li.prev, li.next {
    width: 10%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .date-cal {
    width: unset !important;
    height: auto;
    margin-top: 10px;
    overflow: hidden;
    border: solid 1px #EDEDED;
  } 

  .time-cal {
    width: 100% !important;
    height: auto;
    margin-top: 10px;
    overflow: hidden;
  } 

  .time-cal .caption {
    background-color: #fff;
    color: #000;
    width: 100%;
  }

}

@media (min-width: 768px) and (max-width: 843px) { 
  .date-cal li, .date-cal a {
    width: 13%;
  }

  li.name {
    width: 78% !important;
  }

  li.prev, li.next {
    width: 10%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .date-cal {
    width: 100%; 
    height: auto;
    margin-top: 10px;
    overflow: hidden;
    border: solid 1px #EDEDED;
  }

  .time-cal {
    width: 100%; 
    height: auto;
    margin-top: 10px;
    overflow: hidden;
  }

  .time-cal .caption {
    width: 100%; 
    background-color: #fff;
    color: #000;
  }

}

@media (min-width: 844px) and (max-width: 991px) { 
  .date-cal li, .date-cal a {
    width: 14%;
  }

  li.name {
    width: 78% !important;
  }

  li.prev, li.next {
    width: 10%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .date-cal {
    width: 100%; 
    height: auto;
    margin-top: 10px;
    overflow: hidden;
    border: solid 1px #EDEDED;
  }

  .time-cal {
    width: 100%; 
    height: auto;
    margin-top: 10px;
    overflow: hidden;
  }

  .time-cal .caption {
    width: 100%; 
    background-color: #fff;
    color: #000;
}
}

@media (min-width: @screen-md-min) {

  #page_header { 
    background: url("@{imageUrl}/wms_images/museomondomilan/header_hospitality.jpg");
    background-repeat: no-repeat;  
    height: 250px;
    background-position-x: center;
  }
  
  
  .date-cal li, .date-cal a {
    width: 14%;
  }

  li.name {
    width: 78% !important;
  }

  li.prev, li.next {
    width: 10%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  } 

  .date-cal {
    width: unset !important;
    height: auto;
    margin-top: 10px;
    overflow: hidden;
    border: solid 1px #EDEDED;
  } 

  .time-cal {
    width: 227px !important;
    height: auto;
    margin-top: 10px;
    overflow: hidden;
  } 

  .time-cal .caption {
    background-color: #fff;
    color: #000;
    width: 100%;
  }

  // #page_header { height: 140px; }

  #header .logo {
	margin-top: 0;
    margin-bottom: 0;
    position: relative;
    top: -57px;
    z-index: 999;
  } 

  #header .logoVivaticket {
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    top: -25px;
    z-index: 999;
  }

 .width-limit { 
    height: 60px; 
    position: relative;
    top: -19px;
  }

  .Menu {
   position: relative;
   top: 30px;
  }

  h1.logo img {
   max-height: 108px
  }

 #menu-cat-alt > ul { 
    display:block; 
    position: relative;
              
  }

}