ul.hpBoxesList {
margin:20px auto;
width:100%;
padding:0;
}
ul.hpBoxesList li {
display: inline-block;
list-style: none;
}
.hpBoxes {
position:relative;
width:290px;
height:238px;
overflow:hidden;
float:left;
margin-right:15px;
background-color:#ebe827;
}
.hpBoxes p,.hpBoxes h2 {
color:#000;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.hpBoxes p {
color:#262525;
font-size:13px;
line-height:18px;
margin:0;
text-align:center;
background: url(/images/hpboxes/arrow.png) no-repeat;
min-height:40px;
background-position:100% 0;
}
.hpBoxes h2 {
font-size:20px;
line-height:24px;
margin:0;
text-align:center;
width: 100%;
min-width: 290px;
margin-bottom:10px;
}
.effect img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:0px 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out
}
.effect img.top:hover {
bottom: -90px;
padding-top:238px
}
h2.zero,p.zero {
margin:0;
padding:0
}
.hpBoxes p.zero {
padding-right:50px;
}
.hpBoxes h2.zero {
margin-bottom:10px;
}
@media only screen and (max-width: 768px) {
.hpBoxes {
position: relative;
width: 290px;
height: 238px;
overflow: hidden;
float: none;
margin-right: 15px;
background-color: #AFCA05;
margin: 0 auto;
margin-bottom: 30px;
}
ul.hpBoxesList li {
display: block;
list-style: outside none none;
}
ul.hpBoxesList a:hover {
text-decoration:none;
}
}