/* STYLES */
/* links: #60affe (Dusty Blue);
   text: Open Sans #000000 (Black);
   text: Droid Serif: #808080 (Charcoal;
   borders: #808080 (Charcoal);
   header background: #ebebeb (Silver); 
   body background: #eef9fe (Baby Blue); 
   footer background: #ffffff (White);
*/
/* BREAKPOINTS */
/* phone: 400px; tablet: 768px; desktop: 1200px */
/* FONTS */
/* nav: desktop: 24px (1.5em) uppercase; tablet: 20px (1.25em); phone: 16px (1em);
   h2 & a: desktop: 36px (2.25em); tablet: 32px (2em); phone: 20px (1.25em);
   p: desktop: 20px (1.25em); tablet: 16px (1em); phone: 16px (1em);
*/
/* SECTIONS */
/* header, footer, samples, reviews, about, contact, portfolio */
/***** MOBILE BASE STYLE *****/
body {
    font-size: 16px;
    min-width: 400px;
}
/***** HEADER *****/
header {
    background-image: url(../img/beige086head.png);
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #808080, #ebebeb, #60affe, #eef9fe, #000000) 1;
    height: 30%;
    width: 100%;
}
 #typeface-logo {
    padding-left: 8%;
    width: 80%;
}
nav {
    padding-left: 25%;
}
nav ul li {
    display: block;
}
 nav ul li a {
    color: #60affe;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}
nav ul li a:hover {
    color: #ffffff;
}
nav i {
    padding-right: 2px;
}
header h2 {
    font-size: 1.25em;
    padding: 0 2.5% 0 1% ;
}
strong {
    color: #60affe;
}
/***** FOOTER *****/
footer {
    background: url(../img/beige086foot.png);
    border-top: 2px solid;
    border-image: linear-gradient(90deg, #808080, #ebebeb, #60affe, #eef9fe, #000000) 1;
    clear: both;
    height: 20%;
    padding: 0 0 1% 2%;
    width: 100%;
}
footer h2 {
    font-family: 'Droid Serif', serif;
    font-size: 1.25em;
}
footer a {
    color: #60affe;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}/***** HOMEPAGE *****/
main {
    background: url(../img/closeup.jpg) no-repeat center center / cover;
}
/***** SAMPLES *****/
#samples {
    padding: 0.2% 0 0 1%;
    height: 50%;
    width: 100%;
}
#samples h2 {
    font-size: 1.25em;
    line-height: 1.3em;
}
.skills {
    width: 100%;
}
.skills ul li a {
    font-family: 'Droid Serif', serif;
    font-size: 1.25em;
    line-height: 1.3em;
    text-decoration: none;
    text-transform: uppercase;
}
.samples {
    width: 100%;
}
.samples img {
    border: 1px solid #808080;
    width: 90%;
}
/***** REVIEWS *****/
#reviews {
    padding-left: 1%;
    height: 50%;
    width: 100%;
}
#reviews h2 {
    font-size: 1.25em;
    line-height: 1.3em;
}
.reviews p {
    font-family: 'Droid Serif', serif;
    font-size: 1em;
    line-height: 1.2em;
}
/***** ABOUT *****/
main {
    background: url(../img/closeup.jpg) no-repeat center center / cover;
}
#about {
   padding: 0.2% 0 0 1%;
   height: 100%;
   width: 100%;
}
.headshot, .model, .kitty {
    float: left;
    width: 100%;
}
.headshot img, .model img, .kitty img {
    width: 90%;
 }
.intro, .hobby, .misc {
    float: left;
    width: 100%;
}
.intro p, .hobby p, .misc p {
     font-family: 'Droid Serif', serif;
     font-size: 1em;
     line-height: 1.25em;
}
/*  content (text & images): 90%; 
    borders: 100%, 2px; } */ 
@media (min-width: 768px) {
/***** TABLET BASE STYLE ******/
body {
    font-size: 16px;
}
/***** HEADER *****/
header {
    border-bottom: 3.5px solid;
    height: 30%;
    width: 100%;
}
 #typeface-logo {
    padding-left: 8%;
    width: 85%;
}
nav {
    padding-left: 12%;
}
nav ul li {
    display: inline-block;
    padding-right: 10px;
}
 nav ul li a {
    color: #60affe;
    font-size: 1.25em;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}
nav i {
    padding-right: 5px;
}
header h2 {
    font-size: 1.25em;
    text-align: center;
}
strong {
    color: #60affe;
}
/***** FOOTER *****/
footer {
    border-top: 3.5px solid;
    height: 20%;
    padding: 0 0 1% 2%;
    width: 100%;
}
footer h2 {
    font-family: 'Droid Serif', serif;
    text-align: center;
    font-size: 1.25em;
    line-height: 1.3em;
}
footer a {
    color: #60affe;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}
/***** SAMPLES *****/
#samples {
    padding: 0.2% 0 0 1%;
    height: 50%;
    width: 100%;
}
#samples h2 {
    font-size: 2em;
}
.skills {
    float: left;
    width: 45%;
}
.skills ul li a {
    font-family: 'Droid Serif', serif;
    font-size: 2em;
    text-decoration: none;
    text-transform: uppercase;
}
.samples {
    float: left;
    width: 45%;
}
.samples img {
    border: 1px solid #808080;
    width: 100%;
}
/***** REVIEWS *****/
#reviews {
    padding: 0 0 1% 0.2%;
    height: 50%;
    width: 100%;
}
#reviews h2 {
    font-size: 2em;
}
.reviews p {
    font-family: 'Droid Serif', serif;
    font-size: 1em;
    line-height: 1.2em;
}
/***** ABOUT *****/
main {
    background: url(../img/closeup.jpg) no-repeat center center / cover;
}
#about {
   padding: 0.2% 0 0 1%;
   height: 100%;
   width: 100%;
}
.headshot, .model, .kitty {
    float: left;
    width: 45%;
}
 .hobby {
    clear: both; 
}
.kitty {
    padding-bottom: 1%;
}
.headshot img, .model img, .kitty img {
    width: 90%;
 }
.intro, .hobby, .misc {
    float: left;
    width: 45%;
}
.intro p, .hobby p, .misc p {
     font-family: 'Droid Serif', serif;
     font-size: 1em;
     line-height: 1.25em;
}
}
@media (min-width: 1200px) {
/***** DESKTOP BASE STYLE *****/
body {
    font-family: 'Open Sans', sans-serif;
    min-width: 1200px;
    padding-left: 15%;
}
/***** HEADER *****/
header {
   border-bottom: 5px solid;
   height: 30%;
   width: 100%;
}
#typeface-logo {
    padding-left: 25%;
    width: 50%;
}
nav {
    padding-right: 15%;
    text-align: center;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    color: #60affe;
    font-size: 1.5em;
    font-weight: bold;
    padding-right: 10px;
    text-decoration: none;
    text-transform: uppercase;
}
nav i {
   padding-right: 10px;
}
header h2 {
    font-size: 2em;
    text-align: center;
}
strong {
    color: #60affe;
}
/***** FOOTER *****/
footer {
   border-top: 5px solid;
   height: 20%;
   width: 100%;
}
footer h2 {
    font-family: 'Droid Serif', serif;
    font-size: 2em;
    text-align: center;
}
footer a {
    color: #60affe;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}
/***** HOMEPAGE *****/
main {
    background: url(../img/closeup.jpg) no-repeat center center / cover;
}
/***** SAMPLES *****/
#samples {
    height: 50%;
    width: 100%;
}
#samples h2 {
    font-size: 2.25em;
    line-height: 24px;
}
.skills {
    float: left;
    width: 45%;
}
.skills h2 span {
    font-size: 1em;
}
.skills ul li a {
    font-family: 'Droid Serif', serif;
    font-size: 2.25em;
    line-height: 2em;
    padding-left: 20px;
    text-decoration: none;
    text-transform: uppercase;
}
.samples {
    padding-top: 2%;
    width: 45%;
}
.samples img {
    border: 1px solid #808080;
    width: 45%;
}
/***** REVIEWS *****/
#reviews {
    height: 50%;
    padding-left: 50px;
    float: left;
}
#reviews h2 {
    font-size: 2.25em;
    line-height: 2.5em;
    padding-left: 20px;
    text-align: left;
}
.reviews p {
    font-family: 'Droid Serif', serif;
    font-size: 1.25em;
    float: left;
    line-height: 1.5em;
    padding-right: 50px;
    padding-left: 20px;
}
/***** ABOUT *****/
main {
    background: url(../img/closeup.jpg) no-repeat center center / cover;
}
#about {
   clear: both;
   padding-left: 20px;
   height: 100%;
   width: 100%;
}
.headshot, .model, .kitty {
    float: left;
    padding-top: 20px;
    width: 45%;
}
.headshot img, .model img, .kitty img {
    height: auto;
    padding-left: 20px;
    width: 80%;
 }
.intro, .hobby, .misc {
    float: left;
    width: 45%;
}
.intro p, .hobby p, .misc p {
     float: left;
     font-family: 'Droid Serif', serif;
     font-size: 1.25em;
     line-height: 1.5em;
     padding-left: 20px;
}
/***** PORTFOLIO *****/
main {  
    background: url(../img/closeup.jpg) no-repeat center center / cover;
}
#portfolio {
    height: 100%;
}
#portfolio-a, #portfolio-b, #portfolio-c, #portfolio-d {
   clear: both;
   padding-top: 20px;
   padding-left: 20px;
   width: 100%;
}
.permafrost, .client, .social, .wp-theme, .photo {
    float: left;
    padding-top: 20px;
    padding-left: 20px;
    width: 30%;
}
.permafrost img, .client img, .social img, .wp-theme img, .photo img {
   border: 1px solid #808080;
   padding: 2px;
   width: 80%;
}
#portfolio-a h2, #portfolio-b h2, #portfolio-c h2, #portfolio-d h2 {
    font-size: 1.25em;
    font-weight: bold;
}
.permafrost p, .social p, .client p, .wp-theme p, .photo p {
    font-size: 1em;
}
/***** CONTACT *****/
#contact {
    background: url(../img/closeup.jpg) no-repeat center center / cover;
    text-align: center;
    padding: 50px 0;
    height: 80%;
}
#contact p {
    font-family: 'Droid Serif', serif;
    font-size: 1.25em;
    line-height: 1.5em;
    text-align: center;
}
#contact form {
    padding-bottom: 5%;
    padding-top: 5%;
    margin-left: 4%;
    margin-right: 4%;
}
#contact form label {
    font-size: 24px;
    margin-left: 1%;
}
#contact form input {
    font-size: 24px;
    width: 21%;
    height: 3%;
    margin-bottom: 2%;
}
#contact .email {
    font-size: 24px;
    width: 20%;
    height: 3%;
}
#contact form button {
    border: none;
    background: #60affe;
    color: #ffffff;
    border-radius: 10px;
    margin-left: 5%;
    margin-top: 10%;
    font-size: 36px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 20%;
    height: 35%;
}
#contact ul li {
    display: inline-block;
}
#contact ul img {
    padding-left: 75px;
}
/****** LANDING *****/
main {
    background: url(../img/closeup.jpg) no-repeat center center / cover;
}
#samples {
    border-bottom: 5px solid;
    border-image: linear-gradient(90deg, #808080, #ebebeb, #60affe, #eef9fe, #000000) 1; 
    width: 100%;
}
#samples .logo, #samples .card, #samples .header {
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    width: 30%;
}
#samples img {
    border: 1px solid #808080;
    margin: 2px;
    padding: 2px;
    width: 80%;
}
.signup {
    padding-top: 2%;
    padding-bottom: 2%;
}
.signup h3 {
    padding-top: 5%;
    text-align: center;
}
#e-offer form {
    padding-bottom: 5%;
    padding-top: 5%;
    margin-left: 4%;
    margin-right: 4%;
}
#e-offer form label {
    font-size: 24px;
    margin-right: 1%;
    margin-left: 1%;
}
#e-offer form input {
    font-size: 24px;
    width: 21%;
    height: 3%;
    margin-bottom: 2%;
}
#e-offer.email {
    font-size: 24px;
    margin-left: 1%;
    width: 45%;
    height: 3%;
}
#e-offer form button {
    border: none;
    background: #60affe;
    color: #ffffff;
    border-radius: 10px;
    border-radius: 10px;
    margin-left: 5%;
    margin-top: 10%;
    font-size: 36px;
    width: 40%;
    height: 35%;
}
footer p {
    color: #000000;
    font-family: 'Droid Serif', serif;
    font-size: 1.25em;
    line-height: 38px;
    padding-top: 5%;
    text-align: center;
}
footer ul li {
    display: inline-block;
}
footer ul img {
    margin-left: 125%;
    padding-left: 75px;
}
}