/* CSS Document */
/* Mobile First */
/* ---------------- Q U I C K L I N K S ------------------- */
/* ..... Container ...... */
.QuickLinks {
display: flex;
margin-top: 1em;
margin-bottom: 1em;
justify-content: center;
}
/* Event Page */
.EventPage .QuickLinks {
display: flex; /*overides
attribute */
flex-direction: column;
margin-top: 0;
padding-top: 2em;
padding-left: .75em;
padding-right: .75em;
}
/*Lable */
.EventPage .QuickLinks::before {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding-top: .5em;
content: "Dans le cadre de";
font-size: .8em;
}
.EN .EventPage .QuickLinks::before {
content: "Part of";
color: black;
}
@media (min-width: 1024px){
.QuickLinks,
.EventPage .QuickLinks {
display: none;
}
}
/* ..... Tiles ...... */
.QuickLinks a {
display: block;
position: relative;
width: 30%;
max-width: 12em;
border: 1px solid #d0d0ce;
border-radius: .5em;
text-align: center;
padding: 0;
overflow: hidden;
}
/* margin */
.QuickLinks a:nth-last-of-type(n+2) {
margin-right: 1em;
}
/* Event Page */
.EventPage li.QuickLinks a{
padding: 0em; /*overides attribute */
height: 100%;
margin-bottom: .5em;
}
.EventPage li.QuickLinks a:hover {
background-color: white; /*overides attribute */
}
/* ..... Lable ...... */
.QuickLinks a p {
padding: .5em;
}
/* Hover */
.QuickLinks a:hover p {
color: #d43287;
}
/* Event Page */
.EventPage li.QuickLinks a p{
font-family: Book;
}
.EventPage li.QuickLinks a:hover p {
color: #d43287;
}
/* Thumnail */
.QuickLinks a > span {
display: block ;
position: relative;
width: 100%;
height: 3em;
top: 0;
left: 0;
background-size: cover;
background-position: center;
}
.QuickLinks a:hover > span {
background-color: #a71d5c; /* Dark pink */
background-blend-mode: luminosity;
filter: brightness(.9) ;)
}
/* Event Page */
.EventPage .QuickLinks a > span {
height: 35%;
}
.EventPage .QuickLinks a > span:not([style*=".jpg)"]) {
background-color: #b1b1ae;
}
.EventPage .QuickLinks a:hover > span:not([style*=".jpg)"]) {
background-color: #d43287;
}