/* CSS Document */

body {
background-color:#D8C292;
}
h1 {color:#0000FF;
    font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
	margin:50px;
	}
img {float: left;
      margin: 10px;
    }
.img1 {float:none;
}
 .box { float: none;
  width: 500px; height:350px;
  padding: 10px;
  border: 5px solid gray;
  margin:50px 35px 80px 35px;
  }
.box2 { float:left;
     width:500px;
     height:450px;     
	 border:5px solid blue;
	 padding: 10px;
	 margin:25px;
}
.box3 {float:right;
     width:500px;
     height:160px;
     border:5px solid red;
	 padding: 10px;
	 margin:25px;
	 }
.box4  {float:right;
     width:250px;
     
     border:5px solid #008fb3;
	 font:Georgia, "Times New Roman", Times, serif;
	 font-size:24px;
	 padding:10px;
	 margin: 50px;
	 }
	 .container {
  position: relative;
  width: 50%;
}



.image {
  display: block;
  width: 25%;
  height: auto;
}

.overlay {
	position: absolute;
	bottom: 0;
	left: 590px;
	right: 0;
	background-color: #008CBA;
	overflow: hidden;
	width: 100%;
	height: 100%;

  -webkit-transform: scale(0);
  -ms-transform: scale(0);
	transform: scale(0);

  -webkit-transition: .3s ease;
  transition: .3s ease;
	top: -339px;
}

.container:hover .overlay {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.bdr {border:5px solid  green;
margin50px;
}
.cart {border:3px solid purple;
        width:150px;
		height:150px;
       float:right;
	   margin:10px 75px;
	   padding:25px;
}
.thumbnail:hover {
    position:relative;
    top:-25px;
    left:-35px;
    width:500px;
    height:auto;
    display:block;
    z-index:999;
}
.header {
  padding: 60px;
  text-align: center;
  background: olive;
  color: white;
  font-size: 36px;
}