#container{  /*float:left;*/ width:100%; height:auto;}

.box{ float:left; /*position:relative;*/ width:21%; padding:20px 1%; height:auto; min-height:300px; margin:5px 1%; background:#FFF; text-align:center;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; transition: all 0.4s ease 0s;}
div .box:hover { background:#3dadf9}

.box h3{ width:100%; padding:0 0 17px 0; 
font-family: "open_sansregular", Arial,"Arial Narrow"; font-size:20px; color:#515151; text-transform:uppercase;}
div .box:hover h3{color:#fff;}

.box h4{ width:100%; padding:12px 0 12px 0; line-height:1.1; 
font-size:14px; color:#2792da; }
div .box:hover h4{color:#fff;}

.box p{ width:100%; font-size:14px; color:#5f5f5f;}

.box ul{ padding:0 0 20px 0;}

.box li{ line-height:16px; text-align:left; list-style:outside none;
background:url(../images/sri-lanka.png) 0px 2px  no-repeat; 
padding:0px 0 0 12px; margin:0 0 3px 0;
}

div .box:hover li{color:#fff; background:url(../images/web-designing.png) 0px 2px  no-repeat; }

div .box a { /*float:left;*/ display:inline-block; background:#3dadf9; padding:10px 15%; text-align:center; color:#fff;
text-decoration:none; font-size:15px; text-transform:uppercase; /*margin:15px 15% 0 15%;*/
border:1px solid #dfdfdf;
 white-space: nowrap; text-decoration: none;
bottom: 0px; /*display: flex; justify-content: center; flex-direction: column;*/
 margin: 0 auto; 
}

div .box:hover a{color:#3dadf9; background:#fff;}

/*.center { background:#3dadf9;  
	margin:15px auto;
    width: 30%; height:35px;
    
}*/

@media only screen 
and (min-width : 641px) 
and (max-width : 850px)    {
.box{ float:left; width:44%; padding:20px 1%; height:auto; min-height:400px; margin:5px 2%;}
  
}

@media only screen
and (min-width : 321px)  
and (max-width : 640px)  {
.box{ float:none; width:86%; padding:20px 4%; height:auto; min-height:400px; 
margin:5px auto 25px auto;  }	
}

@media only screen
and (max-width : 320px) and (orientation : portrait) {
.box{ float:left; width:86%; padding:20px 4%; height:auto; min-height:auto; margin:5px 1%;  }	
.box ul{ display:none;}
}


@media only screen and (min-width : 640px) and (max-width : 1136px) and (orientation : landscape) {
.box{ float:none; width:86%; padding:20px 4%; height:auto; min-height:400px; 
margin:5px auto 25px auto;  }	

#services p{ width:84%;}
	}