@charset "utf-8";
/* CSS Document */
/* 
Define this in your CSS 
.bgColor = Replace it by the name you want to give your animation
.bgAnimObj = Assign this class to the object you want to apply the effect
*/

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	src: url(OpenSans-Regular.woff2) format('woff2');
  }

html {
	width: 100%;
	height: 100%;
}

body {
	background-color:#eff2fb;
	font-family: 'Open Sans', sans-serif;
	font-size:20px;
	margin: 0px;
	list-style-image: url(../img/li.gif);
	color:#333;
}

#content1 {
	background-color: #FFFFFF;
	padding: 30px 10px 30px 30px;
}

ul { text-align: left;}

#content2 { 
	width: 50%;
	float:left;
	padding: 10px 30px 20px 30px;}

#content3 {
	padding: 10px 10px 20px 30px;
	overflow: auto;
}

#content3 img {
	-webkit-filter: none;
	filter: none;
	margin: 30px 15px;
	max-height: 146px;
	max-width: 250px;
}

#content3 img:hover {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

@media only screen and (max-width:767px) {
	body {text-align: center;}
	#content1 img { width: 100%; height: auto; }
	#content2 { float: none; width:inherit; padding: 10px;}
	#content3 { padding: 10px; }
}