@charset "UTF-8";

.container {
	width: 95%;
	overflow: hidden;
	background: white;
	margin: 20px auto;
	padding: 10px;
}

.container img {
	width: 100%;
	height: auto;
}

.container ul {
	padding: 0px;
	margin: 0px;
}

.container ul li {
    list-style: none;
    float: left;
    width: 23%;
    height: auto;
    background: #D15B36;
    margin: 20px 0px 0px 20px;
    box-sizing: border-box;
}


.container ul li:hover {
	opacity: 0.9;
}

.container ul li .title:hover{
	background: #D15B36;
	color: #fffff;
}
.container ul li .title{
	width: 100%;
	height: 50%;
	line-height: 28px;
	background: #D15B36;
	text-align: center;
	color: #FFFFFF;
	text-transform: uppercase;
	padding: 0px 0 20px 0;
}

.container ul li .title a:link, a:active, a:visited {
	color: #ffffff;
	text-decoration:none;
}

.container ul li .title a:hover {
	color: #FFFFFF;
	text-decoration:none;
}



@media screen and (max-width: 630px){
		
	.container ul li .title {
	              font-size: 22px;}		
}




@media screen and (max-width: 1250px) {
	.container ul li {width: 40%;
	                  margin-left: 20px;}
}


@media screen and (max-width: 800px) {
	.container ul li {width: 40%;
	                  margin: 20px;}
}

@media screen and (max-width: 400px) {
	.container ul li {width: 85%;
	                  margin: 20px;}
}