#box-pen { float:left; width:100%; padding:80px 0px; margin:0px; background:#ebebeb; text-align:center;}
.box-pen { float:left; width:100%;}
.box-pen li { padding:0px; position:relative; list-style:none; float:left; width:24%; margin:0 15px 0 0;}
.box-pen li  span { margin:0px; padding:20px 0 0; display:inline-block;}
.box-pen li:last-child { margin:0px;}
.box-pen li a {padding:70px 0 0 0; margin:0; display:block;}
.box-pen li#icon1 a{background:url('../images/home-icon1.png'); background-repeat:no-repeat; background-position:top 0 center;}
.box-pen li#icon2 a{background:url('../images/home-icon2.png'); background-repeat:no-repeat; background-position:top 0 center;}
.box-pen li#icon3 a{background:url('../images/home-icon3.png'); background-repeat:no-repeat; background-position:top 0 center;}
.box-pen li#icon4 a{background:url('../images/home-icon4.png'); background-repeat:no-repeat; background-position:top 0 center;}

.box-pen li#icon1 a:hover{background:url('../images/home-icon1-hover.png'); background-repeat:no-repeat; background-position:top 0 center;}
.box-pen li#icon2 a:hover{background:url('../images/home-icon2-hover.png'); background-repeat:no-repeat; background-position:top 0 center;}
.box-pen li#icon3 a:hover{background:url('../images/home-icon3-hover.png'); background-repeat:no-repeat; background-position:top 0 center;}
.box-pen li#icon4 a:hover{background:url('../images/home-icon4-hover.png'); background-repeat:no-repeat; background-position:top 0 center;}

.box-pen li#icon1 a h3,.box-pen li#icon2 a h3,.box-pen li#icon3 a h3,.box-pen li#icon4 a h3  { font-weight: bold; color: #0968ad; padding:30px 0 0; font-size: 30px; line-height:35px;font-family:'Montserrat Bold';}
.box-pen li#icon1 a:hover h3,.box-pen li#icon2 a:hover h3,.box-pen li#icon3 a:hover h3,.box-pen li#icon4 a:hover h3 { color:#585866; }

@media only screen and ( max-width:1620px) {

}
@media only screen and ( max-width:1360px) {
#box-pen {padding:50px 0px;}
}

@media only screen and ( max-width:1200px) {
.box-pen li { margin:0px;}
.box-pen li#icon1 a h3,.box-pen li#icon2 a h3,.box-pen li#icon3 a h3,.box-pen li#icon4 a h3  { font-size:25px; line-height:30px;}
}

@media only screen and ( max-width:980px) {
.box-pen { text-align:center;}	
.box-pen li { width:38%; float:none; display:inline-block; margin:0 10px 30px; vertical-align:top;} 
.box-pen li h3 br { display:none;}
}

@media only screen and ( max-width:767px) {
.box-pen li { width:42%;}

}

}

@media only screen and ( max-width:640px) {
}

@media only screen and ( max-width:560px) {
.box-pen li#icon1 a h3,.box-pen li#icon2 a h3,.box-pen li#icon3 a h3,.box-pen li#icon4 a h3  { font-size:20px; line-height:30px;}
#box-pen { padding:30px 0px;}
.box-pen li { width:70%; margin:0 0 30px;}


}

@media only screen and ( max-width:420px) {
.box-pen li { width:100%;}
}