* {
	box-sizing: border-box;
}

body{

	background:black;
	font-family: sans-serif;
}

p{
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	color: white;
	font-size: 12px;
}

.square{
	transition:width 2s ease;
	width: 350px;
	height: 222px;
	float: left;
	margin-right: 5px;

  background: blue; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, blue , black); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, blue, black); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, blue, black); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, blue, black); /* Standard syntax */

}

.square:hover{
	width: 1180px;
}

.square2{
	transition:width 2s ease;
	width: 888px;
	height: 222px;
	float: left;
	margin-right: 5px;

  background: white; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, white, black); /* Standard syntax */
}

.square2:hover{
	width: 1180px;
}

.square3{
	transition:width 2s ease;
	width: 888px;
	height: 222px;
	float: left;
	margin-right: 5px;
	 background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, red , black); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, black); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, black); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red, black); /* Standard syntax */

}

.square3:hover{
	width: 1160px;
}