/*
Palette:
- Rosso: #e3251b
- Grigio chiaro: #c2c7d6
- Azzurro: #6291c1
*/

html {
	font-size: 14px;
}

body.mybootstrap {
	color: white;
	background-color: black;
	font-family: 'Open Sans', sans-serif;
	position: relative;
	height: 100vh; /* Senza questo, il background non copre fino in basso quando la pagina è molto stretta */
}
.langChooser {
	position: absolute;
    right: 18px;
    top: 25px;
}

.langChooser span {
	border: thin solid black;
    padding: 2px 5px;
    background-color: black;
    color: white;
	font-weight: 200;
}
.langChooser .it {
    padding: 2px 8px;
}

.affix .langChooser {
/* 	top: 8px; */
	display: none;
}

:lang(it) .it {
	font-weight: 600;
	background-color: white;
	color: black;
}

:lang(en) .en {
	font-weight: 600;
	background-color: white;
	color: black;
}

/* img.middleImage {
	margin-top:50px;
}
 */
a {
	text-decoration: none;
	color: black;
}
a:hover {
	color: #6291c1;
}

.mybootstrap h1 {
	font-size: 2.6rem;
	text-transform: capitalize;
	text-shadow: 0 4px 6px rgba(0,0,0,1);
}

/* .mybootstrap h2 {
	margin-top: 50px;
}
 */
.mybootstrap h1.mainText {
    margin-bottom: 28px;
}

.filler {
	background-size: cover;
}

.header {
	position: fixed;
    top:0;
    padding: 18px;
    text-align: center;
    color: black;
    font-size: 1.1rem;
    font-weight: 700;
    width: 100%;
    z-index: 10;
    background-color: white;
    transition: padding 0.3s;
}

.catella .header {
	padding: 7px 8px 2px 8px;
}
.hospitality .header {
	padding: 0px 8px 0px 8px;
}

.header.affix {
	padding: 2px 0 0 0;
	box-shadow: 0 1px 1px 1px rgba(1,1,1,0.2);
}

/* .index .header {
	color: white;
    margin: 5px auto;
    text-shadow: 0 4px 6px rgba(0,0,0,0.7);
    background-color: transparent;
} */

.header div:last-child {
	font-weight: 400;
}

a.backArrow {
	position: absolute;
	left: 18px;
	top: 25px;
	text-decoration: none;
	color: black;	
}
a.backArrow:visited {
	color: black;
}
.affix a.backArrow {
	/* top: 8px; */
	display: none;
}

.homeFooter {
	width: 100%;
    text-align: center;
	position: fixed;
	bottom: 20px;
	left: 0;
}

a.button {
    text-align: center;
	text-transform: uppercase;
	padding: 10px;
	border: thin solid white;
	background-color: #e3251b;
	text-decoration: none;
	color: white;
	margin-top: 10px;
	margin-bottom: 10px;
    display: inline-block;
    width: 7em;
}

a.button:visited {
	color: white;
}

img.responsive {
	width: 100%;
	display: block; /* Elimina il gap verticale tra le immagini */
}

.pageHeader {
	margin-top:	76px;	
}
.pageHeader h1 {
	font-family: 'Nunito Sans', sans-serif;
	text-shadow: none;
	margin-top: 0;
	background-color: black;
	color: white;
/* 	background-color: #c2c7d6; */
    font-weight: normal;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 40px;
}

.mainText {
	padding-left: 20px;
	padding-right: 20px;
	color: white;
}

div.mainText {
	padding-bottom: 50px;
	font-size: 1.2rem;
}

@media(min-width: 1200px) {
	div.mainText {
		font-size: 1.4rem;
	}
}

.caption {
	margin-bottom: 22px;
    text-align: center;	
}
.caption.top {
	margin-top: 40px;
}
.caption.bottom {
	margin-top: 8px;
}

a.continua {
	display: none;	
}

@media(max-width: 767px) {
	a.continua, a.continua:visited {
		color: red;
		text-decoration: none;
		display: inline;
	}
	.expandable {
		display: none;
	}
}

.legenda {
	font-size: 12px;
}
.legenda .line {
	width: 57px;
    display: inline-block;
    height: 5px;
    margin-right: 10px;
}
.legenda .spagnole .line {
    background-color: #adc395;
} 
.legenda .medievali .line {
    background-color: #7a7695;
} 
.legenda .romane .line {
    background-color: #a45b26;
} 

.pin {
    position: absolute;
	top: 16vw;
    left: 62vw;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    color: red;
    text-shadow: 0px 0px 6px white;
}
.pin:before {
    content: "x";
    font-size: 16px;
    padding-right: 8px;
    text-shadow: 0px 0px 6px white;
    color: red;
}

/* PAGE HEADER */

#top-carousel .item, .pageHeader div.image {
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 56.2%;
	background-position: center center; 
}

@media(min-width: 768px) {
	#top-carousel .item {
		/* padding-bottom: 86vh; */
		padding-bottom: 82.6vh;
		
	}
	.pageHeader div.image {
		/* padding-bottom: 88vh; */
		padding-bottom: 82.7vh;
	}
}

/* INDEX */

body.index {
	font-family: 'Nunito Sans', sans-serif;
    overflow-y: hidden;
}

.index .cover {
	display: inline-block;
	width: 64%;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 100vh;
	background-position: center center; 
	background-image: url('img/homepage.jpg');
	/*https://dummyimage.com/960x1080*/
}

.indexMenu {
	display: inline-block;
	width: 34%;
	height: 100vh;
    vertical-align: top;
    font-size: 2.2rem;
    /* color: #c53d49; */
    position: relative;
    padding-left: 30px;
    line-height: 40px;
}

.indexTitle {
	position: relative;
	top: 40px;
}

.indexTitle div:last-child {
    font-size: 1.355em;
}

.indexMenu .menu {
    position: absolute;
    bottom: 110px;
    padding: 0;
    font-size: 1.3em;
}

.indexMenu a {
	text-decoration: none;
}

.indexMenu ul {
	list-style: none;
}
.indexMenu li a {
    line-height: 30px;
    display: inline-block;
}

.menuVia a	 {
	color: #6291c1;
    font-size: 1.6em;
}
.menuHistory a {
	color: #e58845;
}
.menuCulture a {
	color: #e5e5e5;
}
.menuHospitality a {
	/* color: #c53d49; */
	color: #e58845;
}
.menuBrand a {
	color: white;
}
.menuFlow a {
	/* color: #e5e5e5; */
	color: #e58845;
}
.menuNews a {
	color: white;
}
.menuHandle {
	display: none;
}

@media(max-width: 767px) {
	body:not(.mobileMenu) .indexTitle {
		position: fixed;
	    height: 100px;
		top: 13px;
	}
	.menuHandle {
		display: block;
	}
	.icon-ics.menuHandle {
		z-index: 30;
		display: none;
	}
	.mobileMenu .menuHandle {
		display: block;
	}
	.mobileMenu .menu {
		line-height: 50px;
	}
	.index .cover {
		z-index: 10;
		width: 100%;
	}
	.index:not(.mobileMenu) .indexMenu {
		/* per iphone devo spostare il contenitore altrimenti scrollando sotto lo si vede */
		height: 300px;
    	position: fixed;
    	top: 300px;
    	left: 0;
    }
	.indexMenu .menu, .indexMenu .langChooser {
		display: none;
	}
	.index.mobileMenu .indexMenu .menu, .index.mobileMenu .indexMenu .langChooser {
		display: block;
	}
	.index.mobileMenu .indexMenu {
		display: block;
		position: absolute;
	    width: 100%;
	    left: 0;
	    top: 0;
	    z-index: 20;
	    background-color: black;
	} 
	.indexTitle {
		top: 13px;
    	font-size: 1.7em;
	}
	.index.mobileMenu .menu {
		bottom: 140px;
	}
	.index.mobileMenu .langChooser {
    	bottom: 80px;
	}
}

.menuHandle {
	position: absolute;
    right: 20px;
    top: 20px;
    font-size: 26px;
    cursor: pointer;
}   
    
@media(max-width: 1064px) {
	.indexTitle {
	    font-size: 1.5rem;
	}
}

.index .langChooser {
	position: absolute;
    bottom: 30px;
    left: 35px;
    top: initial;
    font-size: 2.4rem;
    font-family: 'Nunito Sans', sans-serif;
}

@media(min-width: 768px) {
	.index .langChooser {
	    font-size: 1.4rem;
	}
}

/* body.index {
	background-image: url('img/homepage.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

@media(min-width: 768px) {
	body.index {
		background-image: url('img/menu/FlowOfLight1920.jpg');
	}
} */

/* LA VIA */

.lavia .pageHeader div.image {
	background-image: url('img/mappa.jpg');
}

@media(min-width: 768px) {
	.lavia .pageHeader div.image {
		background-image: url('img/mappa.jpg');
	}
}

.item.lavia1 {
		background-image: url('img/lavia/11_768.jpg');
}
.item.lavia2 {
		background-image: url('img/lavia/22_768.jpg');
}
.item.lavia3 {
		background-image: url('img/lavia/33_768.jpg');
}
.item.lavia4 {
		background-image: url('img/lavia/44_768.jpg');
}

@media(min-width: 768px) {
	.item.lavia1 {
		background-image: url('img/lavia/11_1920.jpg');
	}
	.item.lavia2 {
		background-image: url('img/lavia/22_1920.jpg');
	}
	.item.lavia3 {
		background-image: url('img/lavia/33_1920.jpg');
	}
	.item.lavia4 {
		background-image: url('img/lavia/44_1920.jpg');
	}
}
/* EVENTS
.events .pageHeader div.image {
	background-image: url('img/menu/events_mobile.jpg')
}
@media(min-width: 768px) {
	.events .pageHeader div.image {
		background-image: url('img/menu/events.jpg');
	}
} */
/* FLOW OF LIGHT */

.flow .pageHeader .mainText {
	color: #e58845;
}

.row.loghi {
	background-color: white;
}

.flow .pageHeader div.image {
	background-image: url('img/homepage.jpg')
}

	/* background-image: url('img/menu/FlowOfLight768.jpg'); 
@media(min-width: 768px) {
	.flow .pageHeader div.image {
		background-image: url('img/menu/FlowOfLight1920.jpg');
	}
}
*/

@media(max-width: 767px) {
	.flow .loghi img {
		max-width: 80%;
		margin-right: auto;
	    margin-left: auto;
	}
}

/* MUSEUM */

.museum .pageHeader div.image {
	background-image: url('img/header.Museo-Bagatti-Valsecchi.sm.jpg');
}

@media(min-width: 768px) {
	.museum .pageHeader div.image {
		background-image: url('img/header.Museo-Bagatti-Valsecchi.jpg');
	}
}

.bottomImage {
    max-width: 500px;
    margin: 50px auto;
}

.item.museum0 {
	background-image: url('img/museum/museum762.jpg');
}
.item.museum1 {
	background-image: url('img/museum/bagatti1_768.jpg');
}
.item.museum2 {
	background-image: url('img/museum/bagatti2_768.jpg');
}
.item.museum3 {
	background-image: url('img/museum/bagatti3_768.jpg');
}
.item.museum4 {
	background-image: url('img/museum/bagatti4_768.jpg');
}
.item.museum5 {
	background-image: url('img/museum/bagatti5_768.jpg');
}

@media(min-width: 768px) {
	.item.museum0 {
		background-image: url('img/museum/museum1920.jpg');
	}
	.item.museum1 {
		background-image: url('img/museum/bagatti1_1920.jpg');
	}
	.item.museum2 {
		background-image: url('img/museum/bagatti2_1920.jpg');
	}
	.item.museum3 {
		background-image: url('img/museum/bagatti3_1920.jpg');
	}
	.item.museum4 {
		background-image: url('img/museum/bagatti4_1920.jpg');
	}
	.item.museum5 {
		background-image: url('img/museum/bagatti5_1920.jpg');
	}
}

/* HISTORY */

.history .pageHeader .mainText {
	color: #e58845;
}

.history .pageHeader div.image {
	background-image: url('img/history/Mappa-Milano768.jpg');
}
@media(min-width: 768px) {
	.history .pageHeader div.image {
		background-image: url('img/history/mappa-milano1920.jpg');
	}
}

/* BRANDS */
body.mybootstrap.brands {
	color: black;
	background-color: white;
}
/* .brands .pageHeader .mainText {
	color: #e58845;
} */

.brands .pageHeader div.image {
	background-image: url('img/brands/mappa-senza-loghi.jpg');
}

@media(min-width: 768px) {
	.brands .pageHeader div.image {
		background-image: url('img/brands/mappa-senza-loghi.jpg');
	}
}

.brands .brand {
	color: black;
	font-size: 1.2em;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
.brands .brand > div:first-child {
	display: none; /* Nascondo il nome del brand che è ridondante */
}
.brands .brand img {
	width: 100%;
}
.brands .brand a {
	font-size: 0.9em;
}

/* HOSPITALITY */
.hospitality .pageHeader .mainText {
	color: #e58845;
	/* color: #c53d49; */
}

.item.hosp1 {
	background-image: url('img/fourseasons/Four-Seasons-Hotel-Milano-Garden768.jpg');
}
.item.hosp2 {
	background-image: url('img/fourseasons/Four-Seasons-Hotel-Milano,-Fresco-Suite768.jpg');
}
.item.hosp3 {
	background-image: url('img/fourseasons/Four-Seasons-Hotel-Milano.Spa-Suite768.jpg');
}
.item.hosp4 {
	background-image: url('img/fourseasons/La-Veranda-Restaurant-Four-Seasons-Hotel-Milano768.jpg');
}

@media(min-width: 768px) {
	.item.hosp1 {
		background-image: url('img/fourseasons/Four-Seasons-Hotel-Milano-Garden.jpg');
	}
	.item.hosp2 {
		background-image: url('img/fourseasons/Four-Seasons-Hotel-Milano,-Fresco-Suite.jpg');
	}
	.item.hosp3 {
		background-image: url('img/fourseasons/Four-Seasons-Hotel-Milano.Spa-Suite.jpg');
	}
	.item.hosp4 {
		background-image: url('img/fourseasons/La-Veranda-Restaurant-Four-Seasons-Hotel-Milano.jpg');
	}
}


/* CATELLA */

.item.catella1 {
	background-image: url('img/catella/IMG_2141-m.jpg');
}
.item.catella2 {
	background-image: url('img/catella/IMG_2420-m.jpg');
}
.item.catella3 {
	background-image: url('img/catella/IMG_2486-m.jpg');
}
.item.catella4 {
	background-image: url('img/catella/IMG_2495-m.jpg');
}

@media(min-width: 768px) {
	.item.catella1 {
		background-image: url('img/catella/IMG_2141.jpg');
	}
	.item.catella2 {
		background-image: url('img/catella/IMG_2420.jpg');
	}
	.item.catella3 {
		background-image: url('img/catella/IMG_2486.jpg');
	}
	.item.catella4 {
		background-image: url('img/catella/IMG_2495.jpg');
	}
}

/* MENU */

/* .menu {
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 56.2%;
	background-position: center center; 
	position: relative;
	font-size: 8vw;
	margin-bottom: -1px;
} */

/* .menu h1 {
    font-size: 1.2em;
    position: absolute;
    top: 1.6em;
    width: 100%;
	text-align: center;
	text-shadow: none;
} 

.menu h1 a {
	border-bottom: 3px solid white;
	text-shadow: 0 4px 6px rgba(0,0,0,1);
	color: white;
	text-decoration: none;
}

@media(min-width: 768px) {
	.menu h1 {
		font-size: 0.7em;
		top: 3.6em;
	}
}

.menu.flow {
	background-image: url('img/menu/FlowOfLight768.jpg');
}
.menu.history {
	background-image: url('img/menu/history768.jpg');
}
.menu.museum {
	background-image: url('img/menu/museum762.jpg');
}
.menu.hospitality {
	background-image: url('img/menu/hospitality768.jpg');
}
.menu.brand {
	background-image: url('img/menu/brand_768.jpg');
}

@media(min-width: 768px) {
	div.menu.flow {
		background-image: url('img/menu/FlowOfLight1920.jpg');
	}
	.menu.history {
		background-image: url('img/menu/history1920.jpg');
	}
	.menu.museum {
		background-image: url('img/menu/museum1920.jpg');
	}
	.menu.hospitality {
		background-image: url('img/menu/hospitality1920.jpg');
	}
	.menu.brand {
		background-image: url('img/menu/brand_1920.jpg');
	}
}

*/
.link {
	color: white;
}
.link:hover {
	color: #6291c1;;
}
.link:focus {
	color: #23527c;
}