* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-image: linear-gradient(chocolate, cornsilk);
}

article {
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-bottom: 5em;
}
  
article h2 {
  background: #f5ded3;
}

/* Header/logo Title */

.header {
  background-image: url("../img/remise2.jpg");
  background-color: #f5deb3;
  background-size: 100%;/*auto;*/
  background-position: center;
  background-repeat: no-repeat;
  min-height: 20vw;
  width: 96%;
  position: relative;
  margin-top: 1em;
  margin-left: 2%;
  margin-right: 2%;
}
.header-text {
  text-align:center;
  padding-top: 12vw;
  color: white;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 2em;
}
.header h1 {
	color: #ffffff; 
	font-size : 2em;
	font-weight bolder;
	}
.header h3 {
	color :#ffffff;
	font-weight: normal;
	font-size : 12;
	padding: 0px;
	margin: 0px;
	}
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. 
It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place 
(like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. 
However, for these versions the navbar will inherit default position */
.navbar {
  overflow: hidden;
  background-color: #f5ded3;
  background-size: auto;
  position: relative;    /*sticky;*/
  position: -webkit-sticky;
  top: 0;
  margin-left: 2%;
  margin-right: 2%;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  background-color: #f5deb3;f58b78;
  color: black;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin-left: 2%;
  margin-right: 2%;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.full{
  -ms-flex: 96%; /* IE10 */
  flex: 96%;
  background-color: #fffaef;
  color: black;
  margin-left: 2%;
  margin-right: 2%;
 /* padding-top: 0.5%;
 */
}

.side {
  -ms-flex: 28.5%; /* IE10 */
  flex: 28.5%;
  background-color: #fffaef;
  margin-left: 0.5%;
}

/* Main column */
.main {   
  -ms-flex: 70.5%; /* IE10 */
  flex: 70.5%;
  background-color: #fffaef;
  margin-right: 0.5%
}
.main article {
  margin-top: 1em;
}
  

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
.img {
  background-color: #fffaef;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #f5ded3;
  margin: 2%;
  margin-right: 2%;
}

/* Responsive layout - when the screen is less than 700px wide, make the 
two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
 
  .full{visibi-lity :none;
 
  }
}

/* Responsive layout - when the screen is less than 400px wide,
 make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
  .full{visnibility: hidden;
  }
  .header h1 , .header h3 {
  color: white;
  }
}

.item-collection-1 {
  position: relative;
  left: 0%;
  animation: swap 200s linear infinite;
}

.item {
  display: inline-block;
  padding: 0 1rem;
  font-size: 1rem;
  color: white;   
  font-weight: 400;
  font-family: sans-serif;
}

/* Transition 
@keyframes marquee {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}

@keyframes swap {
  0%, 50% {
    left: 0%;
  }
  50.01%,
  100% {
    left: 100%;
  }
}*/