/*----------------------------------------------------
		            HTML5 Reset
-----------------------------------------------------*/

html, body, div, section, article, aside, header,
hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p,
blockquote, address, time, span, em, strong, img,
ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
}

ul { list-style-type: none;}
a { text-decoration: none;}
a:hover { color: white;}

/*----------------------------------------------------
                 HTML5 Display Rules
-----------------------------------------------------*/

address, article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

html {
	background-color: white;
	box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: border-box;
}

::selection {
    color: white;
    background: black;
}



/*----------------------------------------------------
           Amazon A+/Dell content index page
-----------------------------------------------------*/

/*----------------------------------------------------
                   Mobile first
-----------------------------------------------------*/

body {
-webkit-font-smoothing: antialiased;
width: 100vw;
height: 100vh;
text-align: center;
}

.container {
width: 100%;
margin: 10% 0;
height: auto;
overflow-y: scroll;
}

img.logo {
  width: 80%;
	max-width: 400px;
}

.grid {
   margin: 0 5%;
}

nav {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
background: #80808021;
border-radius: 2vw 2vw 2vw 2vw;
padding: 2vw;
 filter: drop-shadow(2px 4px 6px #00000040);
 margin: 25px 0;
}

.flag {
   width: 31%;
   border-radius: 20px;
   padding: 1%;
}

.products {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-gap: 1.8vw;
     width: 62%;
}

.products a {
    transition: all .05s ease-in-out;
}

a.none, a.none:hover  {
    filter: grayscale(1) !important;
    opacity: 0.2;
    transform: none !important;
    cursor: default;
}

.products img {
    width: 100%;
		float: left;
}

/*----------------------------------------------------
                   Tablette
-----------------------------------------------------*/

@media (min-device-width: 768px) and (min-width: 768px) {

img.logo {
   width: 80%;
}

.grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin: 0 3%;
   grid-gap: 30px;
}

nav {
 justify-content: center;
 margin: 0;
}

.flag {
   width: 30%;
	 border-radius: 2vw;
}

.products {
     margin-left: 1.2vw;
     grid-gap: 1vw;
}
}

/*----------------------------------------------------
                     Desktop
-----------------------------------------------------*/

@media (min-device-width: 1200px) and (min-width: 1200px) {

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
	width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
	overflow-y: initial;
}

img.logo {
  width: 46%;
	max-width: 620px;
}

.grid {
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
  margin: 3% 0 0 0;
}

nav {
	justify-content: space-between;
  border-radius: 1.5vw 1vw 1vw 1.5vw;
  padding: 1vw;
}

.flag {
  width: 33%;
  border-radius: 0.8vw;
}

.products {
  margin-left: 1vw;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 0.3vw;
}

.products a {
 transition: all .05s ease-in-out;
}

.products a:hover {
 transform: scale(1.2);
 filter: drop-shadow(2px 4px 6px #0000006b);
}

.products img {
  width: 100%;
}
}