@charset "UTF-8";

body { background:#ffffff; margin: 0 auto;}
img { border:none; }

@font-face {
  font-family: 'Lato';
  src: url('lato.eot'); /* IE9 Compat Modes */
  src: url('lato.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('lato.woff2') format('woff2'), /* Super Modern Browsers */
       url('lato.woff') format('woff'), /* Pretty Modern Browsers */
       url('lato.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('lato.svg#svgFontName') format('svg'); /* Legacy iOS */
}


.Lato-normal-400 {
  font-family: 'Lato', sans-serif; 
  font-style:  normal;
  font-weight: 400;
}

h1 {font-family: 'Lato' !important;
    color: #000000;
    font-size: 14px;
    letter-spacing: 1.2px;
    font-style:  normal;
  font-weight: 400;
    margin-top:0px;
    padding:0px;
    line-height: 1.5;
    }
p {text-indent: 0;}


a:link {color: #000000; text-decoration: none;}
a:hover {color: red; font-weight:bold; text-decoration: none;}
a:visited {color: #333333;} 

/*desktop mongo*/
@media only screen
and (max-width : 2000px) {
#mad{
position: absolute;
width: 100%;
height: 4200px;
display: block;
}
#test{
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 1500px;
height: 6000px;
background: url('http://www.heathereatmancreative.com/') center;
background-repeat: no-repeat;
background-size: 100%;
text-align: center;
}
#banner{
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 1000px;
height: 180px;
background: url('http://www.heathereatmancreative.com/images/banner.jpg') center;
background-repeat: no-repeat;
background-size: 100%;
}
#buttons {
position: relative;
display: block;
margin-top: -25px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 800px;
height: 43px;
}
#homeimage {
position: relative;
display: block;
margin-top: -20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 1000px;
height: 664px;
background: url('http://www.heathereatmancreative.com/images/homeimage.jpg') center;
background-repeat: no-repeat;
background-size: 100%;
}
#buttoncontact{
margin-top: 0px;  
margin-left: -1px;  
position: relative;
display: block;
width: 122px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttoncontact.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: left;
}
#buttonprint{
margin-top: 0px;   
margin-left: -5px;
position: relative;
display: block;
width: 173px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonprint.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: left;
    }   
#buttonillustration{
margin-top: 0px;   
margin-left: -1px;  
margin: 0px;
position: relative;
display: block;
width: 252px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonillustration.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: left;
    } 
#buttonweb{
margin-top: 0px; 
margin-left: -20px;    
margin: 0px;
position: relative;
display: block;
width: 157px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonweb.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: left;
    } 
#buttonvideo{
margin-top: 0px;   
margin-left: 0px;  
position: relative;
display: block;
width: 89px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonvideo.jpg') center;
background-repeat: no-repeat;
background-size: 100%;
float: left;
    } 
#hevideo{
margin-top: 130px;
margin-right: auto;
margin-left: auto;
position: relative;
display: block;
width: 1000px;
height: 95px;
background: url('http://www.heathereatmancreative.com/images/hevideo.jpg') ;
background-repeat: no-repeat;
background-size: contain;
z-index: 5;
    } 
#embed{  
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 1000px;
height: 250px;
    } 
#nameangels{
margin-top: 0px; 
margin-left: auto;
margin-right: auto;  
position: relative;
display: block;
width: 700px;
height: 350px;
background: url('http://www.heathereatmancreative.com/images/nameangels.jpg') center;
background-repeat: no-repeat;
background-size: contain;
    } 
#namesoul{
margin-top: 30px;   
margin-left: auto;
margin-right: auto; 
position: relative;
display: block;
width: 700px;
height: 350px;
background: url('http://www.heathereatmancreative.com/images/namesoul.jpg') center;
background-repeat: no-repeat;
background-size: contain;
    } 
#heweb{
margin-top: 50px;
margin-right: auto;
margin-left: auto;
position: relative;
display: block;
width: 1000px;
height: 95px;
background: url('http://www.heathereatmancreative.com/images/heweb.jpg') ;
background-repeat: no-repeat;
background-size: contain;

    } 
#heillustration{
margin-top: 180px;
margin-right: auto;
margin-left: auto;
position: relative;
display: block;
width: 1000px;
height: 95px;
background: url('http://www.heathereatmancreative.com/images/heillustration.jpg') ;
background-repeat: no-repeat;
background-size: contain;

    } 
#hedesign{
margin-top: 220px;
margin-right: auto;
margin-left: auto;
position: relative;
display: block;
width: 1000px;
height: 95px;
background: url('http://www.heathereatmancreative.com/images/hedesign.jpg') ;
background-repeat: no-repeat;
background-size: contain;
z-index: 5;
    } 
    
#hecontact{
margin-top: 700px;
margin-right: auto;
margin-left: auto;
position: relative;
display: block;
width: 1000px;
height: 95px;
background: url('http://www.heathereatmancreative.com/images/hecontact.jpg') ;
background-repeat: no-repeat;
background-size: contain;
z-index: 5;
    } 
    
#weblinks{
position: relative;
display: block;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
width: 920px;
height: 155px;
z-index: 7;
    } 
    
#topline {
position: relative;
display: block;
margin-top: -20px;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 50px;
text-align: center;
    }
#topline2 {
position: relative;
display: block;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
width: 132px;
height: 50px;
text-align: center;
    }
    
#underline {
position: relative;
display: block;
margin-top: 140px;
margin-left: auto;
margin-right: auto;
width: 900px;
height: 80px;
    }
      
#mark{
margin-top: 0px;
margin-left: 40px;
float: left;
display: block;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/mark.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    } 
#mark:hover { background-position: 0 0;}

#nadia{
margin-top: 0px;
float: left;
display: block;
margin-left: 0px;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/nadia.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    } 
#nadia:hover { background-position: 0 0;}
    
#andrea{
margin-top: 0px;
float: left;
display: block;
margin-left: 40px;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/andrea.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    }  
#andrea:hover { background-position: 0 0;}
    
#dan{
margin-top: 0px;
float: left;
display: block;
margin-left: 40px;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/dan.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    }   
#dan:hover { background-position: 0 0;}

#contacticons {
position: relative;
display: block;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 320px;
height: 650px;
z-index: 7;
    }
#email {
position: relative;
display: block;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
width: 132px;
height: 132px;
background: url('http://www.heathereatmancreative.com/images/email.jpg');
background-repeat: no-repeat;
background-size: 100%;
    }
#instagram {
position: relative;
display: block;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
width: 132px;
height: 132px;
background: url('http://www.heathereatmancreative.com/images/instagram.jpg');
background-repeat: no-repeat;
background-size: 100%;
    }
#facebook   {
position: relative;
display: block;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
width: 132px;
height: 132px;
background: url('http://www.heathereatmancreative.com/images/facebook.jpg');
background-repeat: no-repeat;
background-size: 100%;
    }
#twitter  {
position: relative;
display: block;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
width: 132px;
height: 132px;
background: url('http://www.heathereatmancreative.com/images/twitter.jpg');
background-repeat: no-repeat;
background-size: 100%;
    }
#footer  {
position: relative;
display: block;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
width: 384px;
height: 132px;
background: url('http://www.heathereatmancreative.com/images/footer.jpg');
background-repeat: no-repeat;
background-size: 100%;
    }
}

@media screen and (max-width: 1400px) {
#test{
width: 100%;
background-color: #ffffff;
}
#homeimage {
width: 1000px;
height: 664px;
}

#banner{
margin-bottom: 0px;
width: 970px;
height: 180px;
}
#buttons{
width: 830px;
    }
#buttoncontact{
margin-right: 0px;
}
#buttonprint{
margin-right: 10px;
    }   
#buttonillustration{
margin-right: 10px;
    } 
#buttonweb{
margin-left: 0px;
margin-right: 10px;
    } 
#buttonvideo{
margin-right: 10px;
    } 
#hevideo{

    } 
#embed{  

    } 
#nameangels{

    } 
#namesoul{

    } 
#heweb{

    } 
#heillustration{


    } 
#hedesign{

    } 
    
#hecontact{


    } 
    
#weblinks{

    } 
    
#topline {

    }
#topline2 {

    }
    
#underline {

    }
      
#mark{

    } 

#andra{

    } 
    
#andrea{

    }  
    
#dan{

    }   

#contacticons {

    }
#email {

    }
#instagram {

    }
#facebook   {

    }
#twitter  {

    }
#footer  {

    }

  }
  
@media screen and (max-width: 1300px) { 
#test{
background-color: #ffffff;
} 
#banner{width: 1000px;}
#buttons {
width: 820px;
}
#buttonweb{
margin-left: 0px;
margin-right: 0px;
    } 
}
  
  
  
@media screen and (max-width: 1200px) {
#test{
width: 100%;
background-color: #ffffff;
}
#homeimage {
width: 965px;
height: 664px;
margin-top: -35px;
}

#banner{
margin-bottom: 0px;
width: 1000px;
height: 180px;
}
#buttons {
width: 800px;
}
#buttoncontact{
margin-right: 0px;
}
#buttonprint{
margin-right: 0px;
    }   
#buttonillustration{
margin-right: 0px;
    } 
#buttonweb{
margin-left: 0px;
margin-right: 0px;
    } 
#buttonvideo{
margin-right: 0px;
    } 
#hevideo{
width: 850px;
    } 
#embed{  

    } 
#nameangels{

    } 
#namesoul{

    } 
#heweb{
width: 850px;
    } 
#heillustration{
width: 850px;

    } 
#hedesign{
width: 850px;
    } 
    
#hecontact{
width: 850px;

    } 
    
#weblinks{

    } 
    
#topline {
margin-top: -30px;
    }
#topline2 {

    }
    
#underline {

    }
      
#mark{

    } 

#andra{

    } 
    
#andrea{

    }  
    
#dan{

    }   

#contacticons {

    }
#email {

    }
#instagram {

    }
#facebook   {

    }
#twitter  {

    }
#footer  {

    }
  }

@media screen and (max-width: 1000px) {
#test{
width: 100%;
height: 4900px;
background-color: #ffffff;
}
#homeimage {
margin-top: -90px;
width: 800px;
height: 664px;
}

#banner{
width: 90%;
height: 180px;
}
#buttons {
margin-top: -42px;
width:650px;
}
#buttoncontact{
width: 100px;
}
#buttonprint{
width: 141px;
    }   
#buttonillustration{
width: 206px;
    } 
#buttonweb{
width: 129px;
    } 
#buttonvideo{
width: 73px;
    } 
#embed{ 
width: 85%; 
height: 800px;
    } 
#nameangels{

    } 
#namesoul{

    } 
#heweb{
margin-top: -30px;
width: 800px;
    } 
#heillustration{
width: 800px; margin-top: 20px;

    } 
#hedesign{
width: 800px; margin-top: 20px;
    } 
#hevideo{
width: 800px; margin-top: 20px;
    } 
    
#hecontact{
margin-top: 0px;
width: 800px;

    } 
    
#weblinks{
width: 670px; margin-top: 0px;
    } 
    
#topline {
margin-top: -40px;
    }
#topline2 {

    }
    
#underline {
width: 90%; margin-left: auto; margin-right: auto; margin-top: 0px;
    }
      
#mark{
width: 135px;
height: 100px;
    } 

#andra{
width: 135px;
height: 100px;
    } 
    
#andrea{
width: 135px;
height: 100px;
    }  
    
#dan{
width: 135px;
height: 100px;
    }   

#contacticons {

    }
#email {
width: 90px;
height: 90px;
    }
#instagram {
width: 90px;
height: 90px;
    }
#facebook   {
width: 90px;
height: 90px;
    }
#twitter  {
width: 90px;
height: 90px;
    }
#footer  {
margin-top: 50px;
    }
  }
  
@media screen and (max-width: 800px) {
h1 {font-size: 14px;}
#test{
width: 100%;
height: 4700px;
background-color: #ffffff;
}
#homeimage {
width: 600px;
height: 400px;
margin-top: -30px;
}

#banner{
margin-bottom: 0px;
width: 90%;
height: 180px;
}
#buttons {
margin-top: -60px;
width: 520px;
}
#buttoncontact{
width: 80px;
}
#buttonprint{
width: 113px;
    }   
#buttonillustration{
width: 165px;
    } 
#buttonweb{
width: 103px;
    } 
#buttonvideo{
width: 58px;
    } 
#hevideo{
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 100%;
background-position: center;
    } 
#embed{ 
margin-top: -20px; 
width: 85%; 
height: 770px;
    } 
#nameangels{

    } 
#namesoul{
margin-top: 0px;
    } 
#heweb{
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
width: 100%;
background-position: center;
    } 
#heillustration{
margin-top: 80px;
width: 700px;

    } 
#hedesign{
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 100%;
background-position: center;
    } 
    
#hecontact{
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 100%;
background-position: center;

    } 
    
#weblinks{
margin-top: 10px;
    } 
    
#topline {
    margin-top: 10px;
width: 400px;
    }
#topline2 {

    }
    
#underline {
margin-top: -20px;
width: 550px;
height: 105px;
    }
      
#mark{

    } 

#andra{

    } 
    
#andrea{

    }  
    
#dan{

    }  
#nameangels{width: 95%;  }
#namesoul{width: 95%;  }

#contacticons {

    }
#email {
width: 90px;
height: 90px;
    }
#instagram {
width: 90px;
height: 90px;
    }
#facebook   {
width: 90px;
height: 90px;
    }
#twitter  {
width: 90px;
height: 90px;
    }

#footer  {
margin-top: 0px;
    }
  }


  
@media screen and (max-width: 600px){
#test{width: 99%; background-color: #ffffff;}
#banner {width: 100%; margin-left: auto; margin-right: auto; height: 100px; background-size: 120%; background-position: center;}
#homeimage {width: 100%; height: 264px; margin-top: 0px; margin-left: auto; margin-right: auto;}
#buttons {
position: relative;
display: block;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 252px;
height: 200px;
}
#buttoncontact{
margin-top: 0px;  
margin-left: auto;  
margin-right: auto;   
position: relative;
display: block;
width: 122px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttoncontact.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
}
#buttonprint{
margin-top: 0px;   
margin-left: auto;  
margin-right: auto;    
position: relative;
display: block;
width: 173px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonprint.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    }   
#buttonillustration{
margin-top: 0px;   
margin-left: auto;  
margin-right: auto;   
position: relative;
display: block;
width: 252px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonillustration.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    } 
#buttonweb{
margin-left: auto;  
margin-right: auto;     
position: relative;
display: block;
width: 157px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonweb.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    } 
#buttonvideo{
margin-top: 0px;   
margin-left: auto;  
margin-right: auto;   
position: relative;
display: block;
width: 252px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonvideo.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    } 
#mark{
margin-top: 30px;
margin-left: 0px;
float: none;
display: block;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/mark.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    } 
#mark:hover { background-position: 0 0;}

#nadia{
margin-top: 0px;
float: none;
display: block;
margin-left: 0px;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/nadia.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    } 
#nadia:hover { background-position: 0 0;}
    
#andrea{
margin-top: 30px;
float: none;
display: block;
margin-left: 0px;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/andrea.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    }  
#andrea:hover { background-position: 0 0;}
    
#dan{
margin-top: 30px;
float: none;
display: block;
margin-left: 0px;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/dan.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    }   
#dan:hover { background-position: 0 0;}

#weblinks{
position: relative;
display: block;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 740px;
z-index: 7;
    } 
#underline {
position: relative;
display: block;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 90%;
height: 180px;
    }
#topline{width: 90%; margin-top: 0px; }
#topline2 {width: 300px;}


#embed { margin-top: 0px; width: 100%; height: 430px;}
#nameangels {width: 100%; height: 200px; }
#namesoul {width: 100%; height: 200px;  }
#heillustration {margin-left: auto; margin-right: auto; width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#hedesign {margin-left: auto; margin-right: auto; width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#hevideo {height: 80px; margin-left: auto; margin-right: auto; width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#hecontact {margin-left: auto; margin-right: auto; width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#heweb {margin-left: auto; margin-right: auto; width: 100%; margin-top: 20px; background-position: center; background-size: auto 60px;}


}
  
@media screen and (max-width: 400px){
#test{
width: 400px;
height: 4500px;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}

h1 {font-size: 14px;}

#banner {width: 100%; margin-left: auto; margin-right: auto; height: 100px; background-size: 120%; background-position: center;}

#homeimage {
width: 95%;
height: 264px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#buttons {
position: relative;
display: block;
margin-top: -25px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 252px;
height: 200px;
}
#buttoncontact{
margin-top: 0px;  
margin-left: auto;  
margin-right: auto;   
position: relative;
display: block;
width: 122px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttoncontact.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
}
#buttonprint{
margin-top: 0px;   
margin-left: auto;  
margin-right: auto;    
position: relative;
display: block;
width: 173px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonprint.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    }   
#buttonillustration{
margin-top: 0px;   
margin-left: auto;  
margin-right: auto;   
position: relative;
display: block;
width: 252px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonillustration.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    } 
#buttonweb{
margin-left: auto;  
margin-right: auto;     
position: relative;
display: block;
width: 157px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonweb.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    } 
#buttonvideo{
margin-top: 0px;   
margin-left: auto;  
margin-right: auto;   
position: relative;
display: block;
width: 252px;
height: 43px;
background: url('http://www.heathereatmancreative.com/images/buttonvideo.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    } 
#hecontact{
margin-left: auto;
margin-right: auto;
    } 
#hecontact {width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#heillustration {width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#hedesign {width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#hevideo {width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#hecontact {width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#heweb {width: 100%; margin-top: 0px; background-position: center; background-size: auto 60px;}
#contacticons {
margin-left: auto;
margin-right: auto;
    }
#email {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
    }
#instagram {
margin-left: auto;
margin-right: auto;
    }
#facebook   {
margin-left: auto;
margin-right: auto;
    }
#twitter  {
margin-left: auto;
margin-right: auto;
    }
#footer  {
margin-left: auto;
margin-right: auto;
    }

#mark{
margin-top: 30px;
margin-left: 0px;
float: none;
display: block;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/mark.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    } 
#mark:hover { background-position: 0 0;}

#nadia{
margin-top: 0px;
float: none;
display: block;
margin-left: 0px;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/nadia.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    } 
#nadia:hover { background-position: 0 0;}
    
#andrea{
margin-top: 30px;
float: none;
display: block;
margin-left: 0px;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/andrea.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    }  
#andrea:hover { background-position: 0 0;}
    
#dan{
margin-top: 30px;
float: none;
display: block;
margin-left: 0px;
width: 200px;
height: 150px;
background: url('http://www.heathereatmancreative.com/images/dan.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    }   
#dan:hover { background-position: 0 0;}

#weblinks{
position: relative;
display: block;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 740px;
z-index: 7;
    } 
#underline {
position: relative;
display: block;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 90%;
height: 180px;
    }
#topline{width: 95%; margin-top: 0px; }
#topline2 {width: 300px;}

#embed { margin-top: 20px;}
#embed { margin-top: 0px; width: 100%; height: 430px;}
#nameangels { width: 100%; height: 200px; }
#namesoul {width: 100%; height: 200px;  }

    }  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
/*@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)*/ 
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
#test{
width: 1100px;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
}
#banner{
width: 1100px;
height: 200px;    
    }
#homeimage {
width: 85%;
height: 664px;
margin-top: -20px;
}
#buttons {
position: relative;
display: block;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 504px;
height: 450px;
}
#buttoncontact{
margin-top: 0px;  
margin-left: auto;  
margin-right: auto;   
position: relative;
display: block;
width: 244px;
height: 86px;
background: url('http://www.heathereatmancreative.com/images/buttoncontact.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
}
#buttonprint{
margin-top: 0px;   
margin-left: auto;  
margin-right: auto;    
position: relative;
display: block;
width: 346px;
height: 86px;
background: url('http://www.heathereatmancreative.com/images/buttonprint.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    }   
#buttonillustration{
margin-top: 0px;   
margin-left: auto;  
margin-right: auto;   
position: relative;
display: block;
width: 504px;
height: 86px;
background: url('http://www.heathereatmancreative.com/images/buttonillustration.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    } 
#buttonweb{
margin-left: auto;  
margin-right: auto;     
position: relative;
display: block;
width: 314px;
height: 86px;
background: url('http://www.heathereatmancreative.com/images/buttonweb.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    } 
#buttonvideo{
margin-top: 0px;   
margin-left: auto;  
margin-right: auto;   
position: relative;
display: block;
width: 504px;
height: 86px;
background: url('http://www.heathereatmancreative.com/images/buttonvideo.jpg') center;
background-repeat: no-repeat;
background-size: contain;
float: none;
    } 
#topline2 {width: 300px;}

#hecontact {width: 100%; margin-left: auto; margin-right: auto; margin-top: 50px; background-position: center; background-size: auto 100px;}
#heillustration {width: 100%; margin-left: auto; margin-right: auto; margin-top: 100px; background-position: center; background-size: auto 100px;}
#hedesign {width: 100%; margin-left: auto; margin-right: auto; margin-top: 0px; background-position: center; background-size: auto 100px;}
#hevideo {width: 100%; margin-left: auto; margin-right: auto; margin-top: 130px; background-position: top; background-size: auto 100px; z-index: 9;}
#hecontact {width: 100%; margin-left: auto; margin-right: auto; margin-top: 130px; background-position: center; background-size: auto 100px;}
#heweb {width: 100%; margin-left: auto; margin-right: auto; margin-top: 0px; background-position: center; background-size: auto 100px;}
#contacticons {
margin-left: auto;
margin-right: auto;
    }
#email {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
    }
#instagram {
margin-left: auto;
margin-right: auto;
    }
#facebook   {
margin-left: auto;
margin-right: auto;
    }
#twitter  {
margin-left: auto;
margin-right: auto;
    }
#footer  {
margin-left: auto;
margin-right: auto;
    }
    
h1 {font-size: 32px;}

#mark{
margin-top: 30px;
margin-left: 0px;
float: none;
display: block;
width: 300px;
height: 225px;
background: url('http://www.heathereatmancreative.com/images/mark.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    } 
#mark:hover { background-position: 0 0;}

#nadia{
margin-top: 0px;
float: none;
display: block;
margin-left: 0px;
width: 300px;
height: 225px;
background: url('http://www.heathereatmancreative.com/images/nadia.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    } 
#nadia:hover { background-position: 0 0;}
    
#andrea{
margin-top: 30px;
float: none;
display: block;
margin-left: 0px;
width: 300px;
height: 225px;
background: url('http://www.heathereatmancreative.com/images/andrea.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    }  
#andrea:hover { background-position: 0 0;}
    
#dan{
margin-top: 30px;
float: none;
display: block;
margin-left: 0px;
width: 300px;
height: 225px;
background: url('http://www.heathereatmancreative.com/images/dan.jpg') bottom left;
background-repeat: no-repeat;
background-size: 100%;
    }   
#dan:hover { background-position: 0 0;}

#weblinks{
position: relative;
display: block;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 1000px;
z-index: 7;
    } 
#underline {
position: relative;
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
width: 95%;
height: 250px;
    }
#topline{width: 80%; margin-top: 20px; }
#embed{  
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
width: 1000px;
height: 750px;
    } 
#nameangels{
margin-top: 0px; 
margin-left: auto;
margin-right: auto;  
position: relative;
display: block;
width: 700px;
height: 350px;
background: url('http://www.heathereatmancreative.com/images/nameangels.jpg') center;
background-repeat: no-repeat;
background-size: contain;
    } 
#namesoul{
margin-top: 30px;   
margin-left: auto;
margin-right: auto; 
position: relative;
display: block;
width: 700px;
height: 350px;
background: url('http://www.heathereatmancreative.com/images/namesoul.jpg') center;
background-repeat: no-repeat;
background-size: contain;
    } 
    }