.face {position:relative;margin:0 auto;height:60px;width:60px;background:#fff;border-radius:50%;border:3px solid;}
.lefteye {position:absolute;top:15px;left:10px;width:15px;height:7px;border:2px solid;border-radius:100%;}
.righteye {position:absolute;top:15px;left:30px;width:15px;height:7px;border:2px solid;border-radius:100%;}
.sadmouth {position:absolute;top:30px;left:15px;width:25px;height:13px;border:2px solid #cc3300;border-radius:25px 25px 0 0;}
.happymouth {position:absolute;top:33px;left:15px;width:25px;height:13px;border:2px solid #29abe1;border-radius:0 0 25px 25px;}

.cartoony {animation:faceAni 1.3s linear;-webkit-animation:faceAni 1.3s linear}

@keyframes faceAni
{
  0% {transform:scale(0) rotateX(0deg);}
  100% {transform:scale(1) rotateX(360deg);}
}

@-webkit-keyframes faceAni
{
  0% {-webkit-transform:scale(0) rotateX(0deg);}
  100% {-webkit-transform:scale(1) rotateX(360deg);}
}

#planheading {position:relative;width:100%;height:85px;padding:10px;border:3px solid;border-radius:10px;margin-top:65px;margin-bottom:15px;}
#planheading div.icon {float:left;margin-right:1%;width:10%;height:100%;}
#planheading div.overview {float:left;height:100%;width:89%}
#planheading div.overview p {font-size:20px;font-weight:bold;}

div.saver .face,div.saver .lefteye,div.saver .righteye {border-color:#29abe1}
div.overdrawn .face,div.overdrawn .lefteye,div.overdrawn .righteye {border-color:#cc3300}
#planheading.saver,#planheading.saver div.overview p {border-color:#29abe1;color:#29abe1}
#planheading.overdrawn,#planheading.overdrawn div.overview p {border-color:#cc3300;color:#cc3300}

#listings {padding:20px;font-size:16px;border:3px solid;border-radius:10px;}
#listings p {padding-bottom:5px;border-bottom:3px dashed #eee;}


@media (max-width:991px)
{

} 


@media (max-width:767px)
{ 
  #planheading div.icon,#planheading div.overview,#planheading {float:none;height:auto;text-align:center;width:auto;}
}

@media (max-width:700px)
{

}

@media (max-width:500px)
{ 

}
 
 
@media (max-width:400px)
{

 
}
 

@media (min-width:601px) and (max-width:767px)
{
   	 
}

@media (min-width:768px) and (max-width:991px)
{
    
}


@media (min-width:992px) and (max-width:1199px)
{
	  
}
 

@media (min-width:1200px)
{
    
}
    

  
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) 
{
 	/* use the @2x img src, set the background size to the original image size (i.e half of the retina img), and switch repeat off */

}