* {
  @import url ("https://fonts.googleapis.com/css?family=Lato:300, 400,400i,700");
  @import url: ("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
}
* {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Lato, Raleway, airal, sans-serif;
  font-weight: lighter;
  text-transform: uppercase;
  clear: both;
}
h1 {
  /*border: 2px solid red;
  text-align: center;
  width: 80%;
  margin: 1em auto;
  background-color: yellow;
  padding: 1em;*/
  font-family: Lato, arial;
  color: #c51162;
  border-bottom: solid 1px #ef9a9a;
  margin: 0.25em auto -0.5em auto;
}
h2 {
  color: #ff6d00;
  font-size: 1.9em;
  margin: 1em 0;
}
h3 {
  color: #7cb342;
  font-weight: normal;
  font-size: 1.15em;
}
body {
  margin: 0;
  font-family: Lato, arial, sans-serif;
  font-weight: 300;
  padding: 5% 10% 10%;
  font-size: 100%;
  padding: 60px 10% 10%
}
/*p {
   background: magenta;
   display: inline-block; 
} */
img {
  background: #ffffff;
  padding: 10px;
  border: 1px solid black;
  width: 40%;
  margin: 4.8%;
  display: block;
}
a {
  background: #ff6d00;
  color: white;
  font-weight: 400;
  border: #888 solid 1px;
  padding: 0.6em;
  display: inline-block;
  text-decoration: none;
  border-radius: 2px;
  transition: 0.3s ease-in-out background;
  box-shadow: 0 2px 4px 2px rgba(0 0 0 0.1);
}
a:hover {
  background: #c51162;
}
li {
  /*float: left;
  list-style: none;
 background: pink;
  padding:.5em;
    margin: 2px;
  border-right: 1px solid black;
  width: 16.66666666667;
  text-align: center;*/
  /*OTHER TYPE OF FLOATS*/
  float: left;
  list-style: none;
  background: transparent;
  width: 30%;
  border: 1px #444 solid;
  margin: 0.166666666667%;
  min-height: 150px;
  padding: 1em;
}
ul {
  padding: 0;
  overflow: hidden;
}
li:nth-child(odd) {
  background: aliceblue;
}
li:nth-child(even) {
  background: #fffde7;
}

/*IDS*/
#blend-modes {
  border: 1px #666 solid;
  padding: 1%;
  
  
}
ul#blend-modes li{
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding-top: 30%;
}

/*CLASSES*/

li.item1 {
  background: #2196F3 url(https://sandbox.leighcotnoir.com/project-assets/mat125/practice-grid-classes/square/0.jpg)
    no-repeat center;
  background-size: cover;

}
li.item1:hover {
  background-blend-mode: hard-light;
  
  
}
li.item2 {
  background: #2196F3 url(https://sandbox.leighcotnoir.com/project-assets/mat125/practice-grid-classes/square/1.jpg)
    no-repeat  center;
  background-size: cover;

}
li.item2:hover {
  background-blend-mode: hard-light;
  
  
}

li.item3 {
  background: #2196F3 url(https://sandbox.leighcotnoir.com/project-assets/mat125/practice-grid-classes/square/2.jpg)
    no-repeat center;
  background-size: cover;

}
li.item3:hover {
  background-blend-mode: hard-light;
  
  
}
li.item4 {
  background: #2196F3 url(https://sandbox.leighcotnoir.com/project-assets/mat125/practice-grid-classes/square/3.jpg)
    no-repeat center;
  background-size: cover;

}
li.item4:hover {
  background-blend-mode: hard-light;
  
  
}
li.item5 {
  background: #2196F3 url(https://sandbox.leighcotnoir.com/project-assets/mat125/practice-grid-classes/square/4.jpg)
    no-repeat center;
  background-size: cover;

}
li.item5:hover {
  background-blend-mode: hard-light;
  
  
}
li.item6 {
  background: #2196F3 url(https://sandbox.leighcotnoir.com/project-assets/mat125/practice-grid-classes/square/5.jpg)
    no-repeat  center;
  background-size: cover;

}
li.item6:hover {
  background-blend-mode: hard-light;
  
  
}
#relative {
  position: relative;
  background-color: pink;
  
}
/* Absolute scrolls with page.*/
#absolute {
  position: absolute;
  background-color: yellow;
  top: 0;
  left: 50%;
  margin: 0;
  width: 100%;
}
#static {
  position: static;
  border: 1px #ccc solid;
}
#fixed {
  position: fixed;
  background: lightskyblue;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  z-index: 200;
  min-height: 50px;
  box-shadow: 0 0 5px rgba( 0 0 0 0.5)
}
#container {
  position: relative;
  background: green;
  
}