/*
colors:
#f7eab3 whiteish
#e15151 reddish
#ab8060 brownish
#fcdbb2 slightly brownish
c22f35
*/

body {
    background-color: #f7eab3;
    background-image: url(/images/asfalt-light2.png);
    min-width: 300px;
}

.header,
.logo,
.title {
    background-image: url(/images/asfalt-light2.png);
    background-color: #f7eab3;
}


/* ----- header tag section ----- */

#header-tag {
    background-image: url(/images/asfalt-light2.png);
    width: 180px;
    margin: 0 auto;
    height: 6em;
    background-color: #fae3ad;
    border-bottom: 1px solid #fcdbb2;
}

.header-tag-lines {
    display: inline-block;
    border-right: 2px solid #ab8060;
    opacity: 0.7;
    width: 13px;
    height: 3.6em;
}

p {
    font-family: 'Abel', sans-serif;
    text-transform: uppercase;
    color: #ab8060;
    padding-top: 10px;
    padding-left: 13px;
    letter-spacing: .39em;
    font-weight: 600;
    opacity: 0.7;
}

/* -----  title section ----- */

.title {
    background-color: #f7eab3;
    height: 20em;
    width: 100%;
}

h1 {
    color: #d33d3c;
    font-size: 10em;
    font-family: 'Rochester', cursive;
    line-height: .8em;
    padding: 0.65em 0;
    font-style:italic;
    text-align: center;
        -ms-transform: rotate(4deg); /* IE 9 */
    -webkit-transform: rotate(4deg); /* Safari */
            transform: rotate(4deg); /* Standard syntax */
}

h1 span {
    padding-left: .1em;
}

/* ----- logo section ----- */

.logo {
    background-color: #d33d3c;
    border-top: 2px solid #d33d3c;
    height: 22em;
    text-align: center;
    padding-top: 4em;
        -ms-transform: rotate(4deg) scale(1.25); /* IE 9 */
    -webkit-transform: rotate(4deg) scale(1.25); /* Safari */
            transform: rotate(4deg) scale(1.25); /* Standard syntax */
}


h2 {
    display: inline-block;
    text-align: center;
    border: 1px solid #f7eab3;
    border-right-width: 4px;
    border-left-width: 4px;
    border-radius: 50%;
    padding: .1em .23em .1em 0.02em;
    margin-left: 2em;
    color: #f7eab3;
    font-size: 1.7em;
    font-family: 'Engagement', cursive;
    font-style: italic;
    text-transform: uppercase;
    line-height: .95em;
}

/* ----- footer section ----- */

.footer {
    border-top: 2px solid #d33d3c;
    text-align: center;
    background-color: #f7eab3;
    height: 7em;
    transform: scale(1.25);
    background-image: url(/images/asfalt-light2.png);
    padding-top: 4em;
}

.footer a {
    font-family: 'Abel', sans-serif;
    color: #ab8060;
    z-index: 999;
    font-size: .6em;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .39em;
    opacity: 0.7;
    font-weight: 600;
}


/* ----- media queries section ----- */


@media (max-width: 500px) {    
  
    h1,
    h2 {
        margin: 0 auto;
        width: 80%;
    }
    
    h1 {
        font-size: 5.5em;
        padding-top: 0.95em;
    }
    
    h2 {
        font-size: 1em;
        padding: 0;
        border: 1px solid #f7eab3;
        padding: .2em .2em .2em .05em;
        border-radius: 50%;
        width: 1em;
        margin-left: 2em;
    }
    
    .title {
        height: 14em;
    }
    
    .logo {
        padding-top: 3em;
        height: 14em;
    }
    
    #header-tag {
        width: 7em;
        height: 4.6em;
    }
    
    .header-tag-lines {
        width: .4em;
        height: 3em;
    }
    
    p {
        padding-top: .5em;
        font-size: .67em;
        padding-left: .4em;
    }
}