/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

html {
margin: 0;
padding: 30px;
overflow-y: scroll;
min-height: 100%;
-webkit-text-size-adjust: none;
overflow-x: hidden !important;
}

h2 {
  font-size: 5vw;
  color: red;
  margin-top:150px;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  text-align: justify;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  /* line-height: 250px; */
}

body{
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { outline: none; text-decoration: none; }
a:link { color: inherit; text-decoration: none; }
a:visited { color: inherit; text-decoration: underline; }
a:hover { color: inherit; text-decoration: underline; }
a:focus { color: inherit; text-decoration: underline; }
a:active { color: inherit; text-decoration: underline; }
.logo{
max-width: 215px;
width: 100%;
/* background-color: lightblue; */
}
.header {
margin-top:50px;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: top;
    -ms-flex-align: top;
        align-items: top;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 100px 1fr;
grid-template-columns: 1fr 1fr;
-webkit-column-gap: 100px;
   -moz-column-gap: 100px;
        column-gap: 100px;
row-gap:10px;
position: fixed;
top: 0;
z-index: 99;
}
.fashion-designer {
/* background-color: lightpink; */
font-size: 4vw;
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
color: red;
text-align: left;
margin-top: -15px;
}
.column-wrap {
height: 100%;
position: relative;
}
.column-wrap {
width: 100%;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
}
div {
display: block;
}
.titre {
/* background-color: lightblue; */
font-size: 20vw;
color: red;
margin-top:150px;
-webkit-box-pack: left;
    -ms-flex-pack: left;
        justify-content: left;
text-align: justify;
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
/* line-height: 250px; */
}
.titre-test {
height: 200px;
/* width: 100%; */
font-size: 25.5vw;
font-family: Ostrich Sans Light;
color: black;
margin-top:0px;
font-size: ;
}.img {
width: 100%;
margin-bottom: 8px;
}
.title {
margin-top: 10px;
font-size: 3vw;
font-weight: 600;
line-height: 50px;
margin-bottom: 0;
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
color: red;
}.info-grid {
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.table {
border: 0;
cellspacing: 0;
cellpadding: 0;
width:95%;
}
.grid {
margin-top: 200px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 10vw 1fr 10vw 1fr;
grid-template-columns: 1fr 1fr 1fr;
-webkit-column-gap: 10vw;
   -moz-column-gap: 10vw;
        column-gap: 10vw;
row-gap:10px;
}
.image-grid {
--gap: 50px;
--num-cols: 4;
--row-height: 300px;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
padding: var(--gap);
display: -ms-grid;
display: grid;
-ms-grid-columns: ;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid>img {
width: 100%;
height: 100%;
-o-object-fit:scale-down;
   object-fit:scale-down;
}
.menu {
color: red;
-webkit-transition: -webkit-text-decoration cursor scale 0.15s;
transition: -webkit-text-decoration cursor scale 0.15s;
-o-transition: text-decoration cursor scale 0.15s;
transition: text-decoration cursor scale 0.15s;
transition: text-decoration cursor scale 0.15s, -webkit-text-decoration cursor scale 0.15s;
scale:(1);
-webkit-transition: 0.15s;
-o-transition: 0.15s;
transition: 0.15s;
z-index: 1;
}
.menu:hover {
cursor: pointer;
color: black;
text-decoration: underline;
-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
        transform: scale(1.1);
}
p {
/* font-size: 5vw;
font-family: sans-serif;
color: red;
margin-top:0px;
justify-content: center;
text-align: justify; */
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
li {
/* font-size: 5vw;
font-family: sans-serif;
color: red;
margin-top:0px;
justify-content: center;
text-align: justify; */
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
table {
position: relative;
margin-top: 150px;
}
span {
font-size: 20px;
font-family: sans-serif;
color: black;
margin-top:0px;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
text-align: justify;
font-style: italic;
text-transform: capitalize;
font-weight: 800;
}
footer p {
position: fixed;
left: 0;
bottom: 0;
margin-bottom: 0px;
margin-top: 350px;
color: red;
font-size:10px;
font-family: sans-serif;
text-transform: uppercase;
z-index: 99;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
color: white;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: black;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: red;
}
/* Anything under 1024px */
@media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 200px;
}
}
/* Anything under 750px */
@media screen and (max-width: 750px) {
.image-grid {
--num-cols: 1;
--row-height: 500px;
}
}
@media (max-width: 750px) {
.grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
row-gap:100px;
}
.header {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.title {
font-size: 15vw;
line-height: 50px;
}
.fashion-designer {
font-size: 8vw;
}
}
@media (min-width: 751px) and (max-width:999px){
.grid {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1000px) {
.grid {
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}