/* ===============================
   Colour Palette:
   ---------------
   Light Cream:	#f2f3ee
   Orange:			#d17f38
   Yellow:			#e8c04f
   Brown:			#4b2707
   =============================== */

/* General */

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans';
    background-image: url("../images/bg-tile.gif");
    background-repeat: repeat;
}

.container {
    margin-left: 20%;
    margin-right: 20%;
}


/* Typography */

h1,
h2 {
    font-family: 'Love Ya Like A Sister';
    color: #d17f38;
}

h1 {
    text-align: center;
    background-image: url("../images/header-divider.png");
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 19px;
    font-size: 2.3em;
}

h1 em {
    color: #4b2707; 
    font-style: normal;
}

h2 {
    font-size: 2em;
}

h3 {
    color : #4b2707;
    font-size : 1em;
}

p.lead {
    font-size: 1.3em;
    text-align: center;
    color: #4b2707;
}

p {
}

a:link,
a:visited {
    color: #d17f38;
    font-family: 'Open Sans';
}

a:hover {}

hr {
    content: url("../images/divider.png");
    height: auto;
    border: none;
    margin-top: 4%;
    margin-bottom: 4%;
}


/* Header */

header nav {
    height: 180px;
}

header nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    height: 100%;
    padding: inherit;
    align-items: center;
    margin-left: 15%;
    margin-right: 15%;
}

header nav ul li {
}

header nav ul li a {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;


}

header nav ul li a:hover {
    background-image: url("../images/tiny-donut.png");
    background-repeat: no-repeat;
    background-position: top;
    padding-top: 25px;
    color: #4b2707;

}

header nav ul li#logo a {
    content: url("../images/logo.png");
    height: 7em;

}

header nav ul li#logo a:hover {
    content: url("../images/logo-hover.png");
    background: transparent;
    padding-top: 0;
}


/* Hero */

#hero {
    background-image: url("../images/bg-tile-yellow.gif");
}

#hero .container {
    display: flex;
    padding-top: 2%;
    padding-bottom: 2%;
    align-items: center;
    margin-left: 20%;
    padding-left: 2%;

}

#hero .large-ribbon {
    content: url("../images/fresh-whole-ingredients.png");
    position: relative;
    top: -190px;
    right: 150px;
}


/* The Whole Story */

#story-excerpt {
float:left;
width: 50%;
color :#4b2707;
}

#best-donut {
    width: 35%;
    float: right;
    background-image: url("../images/award.png");
    background-repeat: no-repeat;
    padding-left: 118px;
    background-position: left;
    color :#4b2707;
}

/* News & Events */

#articles {
    float: left;
    width: 45%;
}

#feature-image {
    float: right;
    margin-top: 20px;
}

#news-events article {}

#news-events article.news {
    background-image: url("../images/icon-news.png");
    background-repeat: no-repeat;
    padding-left: 50px;
    color : #4b2707;
}

#news-events article.event {
    background-image: url("../images/icon-calendar.png");
    background-repeat: no-repeat;
    padding-left: 50px;
    color: #4b2707;
}

#news-events header time {
    font-size: small;
    color : #d17f38;
}

#news-events section.excerpt {
    font-size: 14px;
}

#news-events footer {
    font-size: 14px;
}

/* Footer */

footer.main {
    background-image: url("../images/bg-tile-brown.gif");
    background-repeat: repeat;
    height: 100%;
    width: 100%;
}

footer.main a:hover {
}

#uncopyright,
#credits {
    color: aliceblue;
    font-size: 0.8em;
    margin-top:2%;
    margin-bottom: 2%;
}

#uncopyright {
    background-image: url("../images/icon-recycle.png");
    background-repeat: no-repeat;
    background-position:left;
    float: left;
    display: flex;
    flex-direction: column;
    line-height: 2px;
    padding-left: 50px;
    margin-left: 90px;
    margin-bottom: 3%;
    margin-top: 3%
}

#credits {
    float: right;
    text-align: center;
    height: 100%;
    background-image: url("../images/icon-apple.png");
    background-repeat: no-repeat;
    background-position:left;
    padding-left: 50px;
    padding-top: 5px;
    padding-bottom: 10px;
    margin-right: 110px;
    width: 18%;
}


/* Force Elements to Self Clear its Children: http://css-tricks.com/snippets/css/clear-fix/ */

.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

* html .group {
    zoom: 1;
}

/* IE6 */
*:first-child + html .group {
    zoom: 1;
}

/* IE7 */