.valign-table{ display: table; width: 100%; height: 100%; }
.valign-row{ display: table-row; }
.valign-cell{ display: table-cell; height: 100%; vertical-align: middle; }


html{ background-color: #b9a38c; transition: background-color 0.7s linear; }
body,
body > main,
#expositions .expositions main{ background-color: transparent !important; }
#expositions .expositions main{}
#expositions .expositions h1{ font-family: 'Playfair Display', serif; font-size: 255px; line-height: 255px; color: #FFF; text-transform: uppercase; font-weight: 400; text-align: left; max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }
#expositions .expositions h1{ font-size: 225px; line-height: 225px; }
/*#expositions .expositions img{ position: relative; top: -100px; z-index: 0; max-width: 43%; }*/
#expositions .expositions img{ position: relative; z-index: -1; visibility: hidden; }
#expositions .expositions .ctn-img{ position: relative; top: -100px; z-index: 0; max-width: 43%; }
#expositions .expositions .ctn-img .img-item{ 
	clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 0%);
	position: absolute; 
	left: 0; top: 0;
	height: 100%; width: 100%;
}
#expositions .expositions .affix .titre-fix{ position: fixed; top: 0px; width: 100%; padding-top: 0; }
#expositions .expositions .left,
#expositions .expositions .right{ display: inline-block; width: 50%; margin: 0; float: left; box-sizing: border-box; padding-right: 8%; }
#expositions .expositions .right div{ margin-bottom: 25px; position: relative; }
#expositions .expositions .right div[data-date]:before{ content: attr(data-date); display: inline-block; position: absolute; left: -80px; color: #020202; font-size: 19px; line-height: 25px; font-family: 'Nunito', serif; font-weight: 700; }
#expositions .expositions .right div p{ margin: 0; color: #020202; font-size: 20px; line-height: 26px; font-family: 'Nunito', serif; font-weight: 300; }
#expositions .expositions .right{ padding-top: 750px; padding-left: 210px; padding-bottom: 100px; }

#expositions .expositions .dates-digits{ position: absolute; bottom: 400px; left: calc(43% - 172px); }
#expositions .expositions .dates-digits:after{ content: ''; width: 1px; height: 160px; background-color: #FFF; display: inline-block; position: absolute; right: -30px; top: 25px; transform: rotate(25deg); }
#expositions .expositions .dates-digits div { 
	width: 84px; height: 160px; overflow: hidden; display: inline-block; 	
  position: relative; text-align: center; 
  /*outline: 1px solid green;*/
}
#expositions .expositions .dates-digits div:nth-child(1){ width: 50px; }
#expositions .expositions .dates-digits div:nth-child(2){ width: 54px; }
#expositions .expositions .dates-digits div:nth-child(3){ left: -7px;  }
#expositions .expositions .dates-digits div:nth-child(4){ text-align: left; left: -15px; }
#expositions .expositions .dates-digits div:nth-child(1) span,
#expositions .expositions .dates-digits div:nth-child(2) span{ 
	font-size: 100px; position: relative; top: -2px; 
}
#expositions .expositions .dates-digits div:nth-child(3) span,
#expositions .expositions .dates-digits div:nth-child(4) span{ 
 position: relative; top: -10px; 
}
#expositions .expositions .dates-digits span { 
	position: relative; font-family: 'Playfair Display', serif; font-size: 150px; line-height: 155px; color: #FFF; 
	display: block; transition: transform .5s;
}

/*RESPONSIVE*/

@media screen and (max-width:1840px){

}
@media screen and (max-width:1660px){
	#expositions .expositions .affix .titre-fix{ padding-top: 35px; }
	#expositions .expositions h1{ font-size: 172px; line-height: 172px; }
	/*#expositions .expositions img{ top: -60px; }*/
	#expositions .expositions .ctn-img{ top: -60px; }
	#expositions .expositions .dates-digits{ bottom: 210px; }
	#expositions .expositions .right{ padding-top: 600px; }
}
@media screen and (max-width:1365px){
	#expositions .expositions .affix .titre-fix{ padding-top: 100px; }
	/*#expositions .expositions img{ max-width: 38%; }*/
	#expositions .expositions h1{ font-size: 132px; line-height: 132px; }
	#expositions .expositions .left{ width: 40%; }
	#expositions .expositions .right{ width: 60%; }
}
@media screen and (max-width:1279px){
	#expositions .expositions .affix .titre-fix{ padding-top: 105px; }
	#expositions .expositions h1{ font-size: 122px; line-height: 122px; }
	#expositions .expositions .dates-digits{ left: calc(43% - 212px); bottom: 160px; }
	#expositions .expositions .right{ padding-left: 250px; }
}
@media screen and (max-width:1200px){

}
@media screen and (max-width:1100px){

}
@media screen and (max-width:1023px){
	#expositions .expositions .dates-digits{ transform: scale(0.8); }
	#expositions .expositions h1{ font-size: 102px; line-height: 102px; }
	#expositions .expositions .affix .titre-fix{ padding-top: 205px; }
	#expositions .expositions .right{ padding-left: 210px; }
	#expositions .expositions .right div p{ font-size: 20px; }
	#expositions .expositions .right div[data-date]:before{ font-size: 20px; }
}
@media screen and (max-width:767px){
	#expositions .expositions h1{ font-size: 95px; }
	#expositions .expositions .left{ width: 100%; }
	#expositions .expositions .affix .titre-fix{ top: 0 !important; padding-top: 155px; }
	#expositions .expositions .dates-digits{ display: none; }
	#expositions .expositions .ctn-img{ left: 5%; max-width: 90%; }
	/*#expositions .expositions img{ left: 5%; max-width: 90%; }*/
	#expositions .expositions .right{ width: 100%; padding-left: 100px; }
	#expositions .expositions .right div{ padding-right: 12px; }
}
@media screen and (max-width:375px){

}