@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html, body{
	margin: 0px;
	padding: 0;
	overflow-x: hidden;
	font-family: 'Roboto Condensed', sans-serif;
}

#servicepage{
	max-width: 1366px;
	margin: auto;
}
.servicepage{
	margin-bottom: 70px;
}
#servicepage h1{
	text-align: center;
	margin: 25px 0 0 0;
	font-weight: 700;
    color: #2426b3;
}
#servicepage hr{
	width: 72px;
    margin: 8px 0 60px 548px;
    border: 0.5px solid #2526B3;
}
.box{
	width: 360px;
	height: 300px;
	background: #ECE7E7;
	margin: 15px 0  14px 0px;
	position: relative;
    transition: all .6s;
}

.box img{
    width: 33%;
    height: 41%;
    margin: 70px 0 35px 120px;
}
#servicepage .box:hover{
    background: #0089c93d;
    box-shadow: 5px 5px 5px 5px #0089c93d;
}
 p{
	font-size: 1.8em;
	color: #2426b3;
	text-align: center;
}
#servicepage a{
	text-decoration: none;
}



/*RESPONSIVE*/

@media(max-width: 1080px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 454px;
}
.box {
    width: 380px;
    height: 300px;
    margin: 10px 0 20px 36px;
}
.box img {
    margin: 70px 0 35px 130px;
}    
}

@media(max-width: 1024px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 454px;
}  
}

@media(max-width: 960px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 345px;
}
.box {
    width: 340px;
    height: 290px;
    margin: 10px 0 20px 0px;
}
.box img {
    margin: 70px 0 28px 110px;
}    
}

@media(max-width: 900px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 345px;
}    
}

@media(max-width: 800px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 345px;
}    
}

@media(max-width: 768px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 340px;
}  
}

@media(max-width: 736px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 336px;
}
.box {
    width: 646px;
    height: 300px;
    margin-left: 30px;
}
.box img{
    width: 22%;
    height: 42%;
    margin: 70px 0 40px 253px;
}    
}

@media(max-width: 667px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 300px;
}
.box {
    width: 577px;
    height: 300px;
}
.box img{
    margin: 70px 0 40px 223px;
}     
}

@media(max-width: 640px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 287px;
}
.box {
    width: 550px;
    height: 300px;
}
.box img{
    margin: 70px 0 40px 223px;
}  
}

@media(max-width: 600px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 268px;
}
.box {
    width: 510px;
}
.box img {
    margin: 70px 0 40px 200px;
}   
}

@media(max-width: 568px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 251px;
}
.box {
    width: 478px;
}
.box img {
    margin: 70px 0 40px 186px;
}    
}

@media(max-width: 533px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 233px;
}
.box {
    width: 443px;
}
.box img {
    width: 24%;
    height: 39%;
    margin: 70px 0 40px 166px;
}    
}

@media(max-width: 480px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 208px;
}
.box {
    width: 391px;
}
.box img {
    margin: 70px 0 40px 149px;
}    
}


@media(max-width: 414px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 172px;
}
.box {
    width: 385px;
    height: 280px;
    margin-left: 0px;
}
.box img {
    margin: 40px 0 40px 38%;
} 
}


@media(max-width: 384px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 159px;
}
.box {
    width: 354px;
    height: 260px;
}

}

@media(max-width: 375px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 155px;
}
.box {
    width: 345px;
}
}


@media(max-width: 360px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 145px;
}
.box {
     width: 330px;
}
}

@media(max-width: 320px){
#servicepage h1 {
    margin: 0;
}
#servicepage hr {
    width: 70px;
    margin: 8px 0 35px 128px;
}
.box {
     width: 290px;
     height: 240px;
}
}
/*RESPONSIVE*/