/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

#heading { color:#fff; text-shadow: 1px 1px 1px #000; }
h1 { font-size:36px; font-family:"museo-slab",Rockwell,Tahoma,Arial,sans-serif; text-align:center; 
     padding-top:1.5%; text-transform:uppercase; }
#heading p { font-size:12px; font-weight:bold; font-family:Helvetica, Arial, sans-serif;text-align:center; 
             padding-top:.2em; }
h2 { font-size:22px; font-family:"museo-slab",Rockwell,Tahoma,Arial,sans-serif; font-weight:500; color:#EB1D25; margin-top:1em; }

html { height:100%; }
body { height:100%; background-color:#C4C1B0; }
#heading { background: url(familyphoto2.jpg) no-repeat; 
           z-index:1;
           background-size: 100%; 
           height:0;
           padding-bottom:48.8%;
           max-height:487px !important; /*doesn't work*/
           position:relative; 
           
}
#heading #book { margin:0 auto; height:82.35%; width:40%; position:absolute; bottom:0; left:29.9%; z-index:2; }
#heading img { width:100%; height:auto; max-height:400px; max-width:399px; z-index:50; }
#buybutton { display:block; width:199px; height:56px; 
             position:relative;
             background:url(buybutton.png) no-repeat; 
             margin:-28px auto 0 auto; 
             z-index:1000; }


#quote { min-height:1em; }

#main, #retailers { background-color: #FCF8EC; min-height:1em; padding:0 1em 1em 1em; }
.col1 { padding-left:5%; width:45%; float:left; }
.col2 { padding-left:2.5%; width:35%; float:left; }
#retailers { padding-left:6%; }
#retailers ul { padding:1em; }
#retailers li { font-family:'arvo', Helvetica, Arial; font-size:14px; color:#131304; line-height:1.2em; font-weight:400; padding-bottom:1em; }

#main ul { list-style:none; margin:1em 0 0 1.5em; padding:0; }
#main ul li, #main p { text-indent:-.95em; margin:0; padding:.5em; font-family:'arvo', Helvetica, Arial; font-size:14px; color:#131304; line-height:1.2em; font-weight:400; }
#main p { text-indent:0; line-height:1.4em;}
#main strong { font-weight:700;  }

#mc_embed_signup{clear:left; }
#mc_embed_signup label {font-family:'arvo', Helvetica, Arial; font-weight:400 !important; font-size:11px;}


/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations.
   nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

@media all and (max-width: 750px) and (min-width: 520px) {
    #heading p { display:none; }
    .col1 { padding-left:1%; width:55%; }
    .col2 { padding-left:2%; width:40%; }
    #retailers { padding-left:3%; }
}
@media all and (max-width: 520px) {
    #heading p { display:none; }
    .col1, .col2 { width:99%; padding:0; }
    #retailers { width:99%; padding:0 1em; }
    h1 { font-size:1.5em; padding-top:1%;}
}

@media all and (min-width: 998px) {
    #heading { height:487px; width:998px; padding-bottom:0px; margin-bottom:-28px; }
    #heading #book { bottom:auto; top:86px; }
}