body,html{margin:0px;padding:0px;background-image:url(sos.png);font-family:Verdana, Geneva, sans-serif;}

#promo{text-align:center;margin-top:3px;margin-bottom:3px;}
 
#area1{width:840px;padding:20px;background-color:#fffffe;margin:auto;}
.intro{margin-bottom:9px;}
.intro2{padding-left:20px;padding-right:20px;}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}


#bb1{padding:5px;border-radius:5px;background-color:#00b5cc;text-align:center;color:#fff;float:left;width:100px;margin-right:10px;}
#bb2{padding:5px;border-radius:5px;background-color:#00b5cc;text-align:center;color:#fff;float:left;width:100px;margin-right:10px;}
#bb1:hover{opacity:.8;}
#bb2:hover{opacity:.8;}

#area2{width:840px;background-color:#fffffe;margin:auto;margin-top:20px;}
.box{width:50%;float:left;height:60px;margin-bottom:50px;}
.boxinner{border:2px solid grey;background-color:white;height:80%;padding:5%;width:80%;margin:auto;font-size:20px;color:#2e3131;cursor:pointer;}
.boxinner:hover{padding:4%;width:82%;background-color:#ffffef;}



.bb{font-size:22px;height:100%;float:left;width:40px;}

#footspace{width:100%;height:40px;clear:both;float:none;}


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


#area1{width:96%;padding:2%;}
#area2{width:100%;}

}



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

.boxinner{font-size:17px;}
.bb{font-size:20px;width:36px;}

}




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

.box{width:100%;height:40px;margin-bottom:30px;}


}