@media (min-device-width : 319px) {
html{font-family:'Exo 2', sans-serif; font-weight:300; height:100%;}

h1 {font-size: 2.4em; margin: 2px; line-height: 45px; font-family:'Exo 2', sans-serif; font-weight: 600;}
h2 {font-size: font-size: 1.6em; margin: 2px; line-height: 40px; font-family:'Exo 2', sans-serif; font-weight: 300;}
h3,h4,h5,h6 {font-family:'Exo 2', sans-serif;}

div#all {max-width: 100%; margin: 1em auto; position: relative; padding: 1em; top: 50%;}

div#header {width: 100%; margin: 2px; display: inline-block;}
div#header .profile {float: left; width: 98%; margin: 2px;}

div#title {float: left; margin: 10px 2px; width: 98%; text-align: center;}

div#contact {margin: 10px 0px; text-align: center;}
div#contact .logo{width: 14%; padding: 2px; display: inline-block; float: none;}

div#content {width: 100%; margin: 2px; text-align: center; display :inline-block;}
div#content .blurb {font-size: 1.4em; line-height: 35px; margin: 1px;}
div#content .brand-section-sub {font-size: 1.4em; line-height: 20px; margin: 80px 10px 10px 10px;}
div#content .brands {width: 100%;}

}

@media (min-width: 568px) {
h1{font-size: 2em; line-height: 35px;}
h2{font-size: 1em; line-height: 25px;}

div#all {margin: 1em auto; position: relative; padding: 1em;}

div#header {width: 100%; margin: 2px; text-align: left; display: inline-block;}
div#header .profile {float: left; width: 35%; margin: 2px;}

div#title {width: 60%; float: right; margin: 10% 4px 10px 0px; text-align: left;}
div#contact {float: left; margin: 0px 0px 0px 3.75%;}
div#contact .logo{width: 24px; padding: 1px;}

div#content {width: 100%; margin: 2px; text-align: left; display :inline-block;}
div#content .blurb {font-size: 16px; line-height: 22px; text-align: justify; margin: 1px;}
div#content .brand-section-sub {font-size: 16px; line-height: 20px; text-align: center; margin: 40px 10px;}
div#content .brands {width: 23.5%;}
}


@media (min-width: 768px) {
h1{font-size: 2em;}
h2{font-size: 1em;}

div#all{}

div#header{width: 100%;}
div#header .profile {float: left; width: 80px; margin: 0px;}

div#title {float: left; margin: 4px 10px; text-align: left;}

div#contact {float: right; margin: 0px;}
div#contact .logo{width: 34px; padding: 18px 3px; margin: 6px auto;}

div#content {}
div#content .blurb {font-size: 18px; line-height: 24px; margin: 20px 10px;}
div#content .brand-section-sub {font-size: 16px; line-height: 20px; text-align: center; margin: 40px 10px; width: 100%;}
div#content .brands {width: 24.5%;}

}


@media (min-width: 1000px) {
h1{font-size: 2em;}
h2{font-size: 1em;}

div#all{max-width: 1000px;  }
div#header{width: 100%;}
div#header .profile {float: left; width: 80px; margin: 0px;}
    
div#contact {}
div#contact .logo {width: 34px; padding: 18px 3px; margin: 6px auto;}

div#content {width: 100%;}
div#content .blurb {font-size: 18px; line-height: 24px; margin: 20px 10px;}
div#content .brand-section-sub {font-size: 16px; line-height: 20px; text-align: center; margin: 40px 10px; width: 100%;}
div#content .brands {width: 24.5%;  display: inline-block; float: none;} 
}