/*
//
// Women@DIOR
// Website By Digital Kids - 2019
// https://digitalkids.fr
//
*/

html { font-size: 15px; overflow-x: hidden; }
@media (min-width: 992px) {
	html { font-size: 18px; }
}

body { margin: 0 auto; font-family: Oswald; }

.container-fluid { max-width: 1280px;}
@media (min-width: 992px) {
	.container-fluid { padding-left: 30px; padding-right: 30px; }
}

img { max-width: 100%; }
::selection { background: black; color: #fff; }
hr { background: black; border-color: black; }
h2 { font-weight: bold; }
h3, .display-3 { font-weight: 300; font-size: 1.75rem; }
h4, .display-4 { font-weight: bold; font-size: 2rem; }
p { text-align: justify; }
p, ul li { font-family: Poppins; color: #323334; text-align: justify; }
p a { font-weight: 500; }
p a:hover { color: black;  text-decoration: none; }
ul { position: relative;}
ul.styled li { list-style: none; }
ul.styled li:before { content: ''; position: absolute; background-image: url("img/separator.svg"); left: 0px; width: 28px; height: 28px; background-size: contain; background-repeat: no-repeat; }
p a { color: inherit; }
cite { font-size: .9rem; line-height: 1; font-style: normal; font-weight: 300;}

/*
// NAVBAR
*/

.header { }
.header .navbar-brand { margin-right: 0; padding: 0; }
.header .navbar-brand svg { max-height: 54px; width: 130px; margin: 30px 0; margin-left: 0; }
.header .nav-link { color: black; text-transform: uppercase; letter-spacing: 1px; font-size: .9rem; font-family: Oswald; transition: all .2s ease-in-out; }
.header .nav-link:hover { color: #fff; background: black; }
.header ul { padding: 0; margin-bottom: 0; }

.alt { color:#9F8A52;}


.hero { line-height: 1.2; height: calc(100vh - 120px); max-height: 740px; min-height: 320px; }
h1 { font-size: 2rem; text-transform: uppercase; }

@media (max-width: 991px) {
	.hero .col-12:first-of-type { min-height: 320px; }
}

@media (max-width: 576px) {
	.intro img { height: auto; max-height: 160px; }
}
.mosaic-section { padding: 2rem 0; }

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
  gap: 14px;
  padding: 20px;
  background: #111;
  border-radius: 24px;
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 120px;
  gap: 12px;

  grid-auto-flow: dense;
}

.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 16px;
  transition: all ease-in-out .2s;
}

/* Custom spans */
.mosaic img:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.mosaic img:nth-child(4) {
  grid-row: span 2;
}

.mosaic img:nth-child(7) {
  grid-column: span 2;
}

.mosaic img:nth-child(10) {
  grid-column: span 2;
  grid-row: span 2;
}

.mosaic img:nth-child(12) {
  grid-row: span 2;
}

.mosaic img:nth-child(13) {
  grid-row: span 1;
}

/* Drag & drop states */
.mosaic img { cursor: grab; }
.mosaic img.dragging { opacity: 0.35; cursor: grabbing; transform: scale(0.97); }
.mosaic img.drag-over { outline: 3px solid #9F8A52; outline-offset: -3px; opacity: 0.75; transform: scale(0.98); }

/* Auto-shuffle animation */
@keyframes mosaic-fadeswap {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 0; transform: scale(0.88); }
  60%  { opacity: 0; transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1); }
}
.mosaic img.swapping {
  animation: mosaic-fadeswap 0.8s ease-in-out forwards;
}

blockquote.blockquote p { font-size: 1rem; }
.boxed { border: 2px solid #F4F3EE; }
.boxed .boxed-text { line-height: 1.3; font-weight: 300; font-size: 1.2rem; letter-spacing: 1px; font-family: Poppins;}
.boxed .grid-divider { max-width: 840px; margin: 0 auto; }
.timeline-line { position: relative; font-size: 1.15rem; }
.timeline-line .triangle { position: absolute; right: -19px; top: -11px; }
.timeline-line > div:before { content: ''; position: absolute; top: -8px; border-radius: 50%; height: 14px; width: 14px; background-color: #9F8A52; border: 2px solid white; }
.timeline-line .descr { min-height: 140px; }
@media (max-width: 991px) {
	/* #main { padding-left: 0; padding-right: 0; } */
}
.carousel-wrapper {  position: relative; margin-top: 5%; margin-bottom: -10%; }
.carousel { display: flex; align-items: center; }
.carousel img { display: block; max-height: 440px; }
.handle-overlap { padding-top: calc(10% + 6rem); }
.card { border-radius: 0; }

/*
// How To Take Part
*/

#http img.desktop { 
	display: block;
	position: sticky;
	top: 0;
}
#http img.mobile { display: none;}
@media (max-width: 768px) {
	#http img.mobile {
		display:block; 
	}
	#http img.desktop {
		display: none;
	}
}
#footer { background: black; color: #fff; padding: 2rem 0; }
#footer .footer-logo { fill: #fff; width: 124px; display: inline-block; margin-bottom: 5px;}
#footer .footer-logo-women { max-height: 44px; }
#footer .copyright { font-weight: lighter; font-family: Poppins; font-size: .75rem; }
#footer a { color: #fff; }
#footer a:hover { text-decoration: none; }


/*
// UTILS
*/

.big-number { font-size: 2rem; font-weight: bold; }
.text-danger { color: #6D161E !important; }
.btn { border-radius: 0; padding: .5rem 1.5rem; font-weight: normal; font-family: Poppins; font-size: .75rem;}
.btn-light { background-color: transparent; border-color: #DEDFE0; color: black; }
blockquote p { font-size: 1.5rem; font-weight: lighter; }
.btn.alt { background-color: #9F8A52; border-color: #9F8A52; color: #fff; }
.btn-outline { border-color: #9F8A52; color: #9F8A52; background: transparent;}
.btn-outline:hover { border-color: #9F8A52; color: black; background: #9F8A52;}
/*
// GRID DIVIDER
*/

.grid-divider { overflow: hidden; position: relative; }
.grid-divider > [class*="col-"]:nth-child(n + 2):after {
	content: "";
	background-color: #F4F3EE;
	position: absolute;
	top: 0;
	bottom: 0;
}
.grid-divider.grid-divider-red > [class*="col-"]:nth-child(n + 2):after {
	background-color: #CC2F35;
}
@media (max-width: 767px) {
	.grid-divider > [class*="col-"]:nth-child(n + 2):after {
		width: 100%;
		height: 1px;
		left: 0;
		top: -4px;
	}
	.grid-divider.grid-divider-red > [class*="col-"]:nth-child(n + 2):after {
		background-color: transparent;
	}
}
@media (min-width: 768px) {
	.grid-divider > [class*="col-"]:nth-child(n + 2):after {
		width: 2px;
		height: auto;
		left: -2px;
	}
}