/* FONT COLLECTION URL: http://www.google.com/webfonts#UsePlace:use/Collection:Medula+One|Balthazar|Sansita+One  */
/* RESPONSIVE FORMULA: TARGET DIVIDED BY CONTEXT */

/* Main nav styles */
.main-nav { background-color: #F2F2E6; /* White */ list-style: none; border: 1px dotted #ccc7b9; min-height: 100px; min-width: 200px; display: block; } 
.main-nav ul li { list-style: none; margin: 25px; float: left; }
.main-nav ul li a { width: 200px; height: 50px; background-color: #ffaa71; padding: 10px; border-radius: 5px; -moz-border-radius: 5px; }
.button:link { text-decoration: none; color: #333; }
.button:visited { color: #706659; }
.button:hover { color: #629e9e; }
.button:active { color: #3b8686; }
/* CSS Animations */
@-webkit-keyframes bg-fadein-animation
{
from { background: #e9e4d4; }
to { background: #fff; }
}
article { -webkit-animation: bg-fadein-animation 1s ease 0s 1 normal; }
/* Tags */




body { background-color: #e9e4d4; width: 90%; margin: 0 auto; font-size: 100%; }

article { background: #fff; border: 1px none #ccc7b9; display: block; padding: 0 1.04166%; }
h1 { font-family: 'Sansita One', cursive; font-weight: 400; font-size: 3em; }
header , section { display: block; padding: 0 1.04166%; }
p { font-family: 'Balthazar', serif; }

/* Common */
.border-radius-5-px { border-radius: 5px; -moz-border-radius: 5px; }
.display-none   { display: none; }
.display-block { display: block; }
.display-inline { display: inline; }
.position-relative { position: relative; }
.position-absolute { position: absolute; top: 0; left: 0; }
.float-left { float: left; }
.float-right { float: right; }
.clear-both { clear: both; }
.clear-left { clear: left;  }
.clear-right { clear: right;  }
.sans-serif { font-family: sans-serif; }
.background-color-white { background-color: #ffffff; }
.background-color-beige { background-color: #e9e4d4; }
.background-color-brown { background-color: #f2f2e6; }
.background-color-orange { background-color: #ffaa71; }
.background-color-aqua { background-color: #aad7c0; }
.border-dotted { border: 1px dotted #ccc7b9; }
.text-transform-upper-case { text-transform: uppercase; }
.two-column-wrapper  ul { display: block; list-style: none; padding: 3.33333%; }
.two-column-wrapper ul li.two-column-left { width: 31.25%; background-color: #e9e4d4; float: left; }
.two-column-wrapper ul li.two-column-right { width: 68.75%; background-color: #f2f2e6; float: left; }
.two-column-left   p, .two-column-right   p   { padding: 0 3.33333%; } 
.clear { clear: both; }
/* Media queries */
@media screen and (max-width: 320px)
{
.main-nav { background-color: #fdc689; /* Orange */ display: block; min-height: 200px; }
.main-nav ul li { float: none; margin-left: 0; }
.two-column-wrapper  ul { display: block; list-style: none; }
.two-column-wrapper ul li.two-column-left { width: 100%; background-color: #e9e4d4; float: none; }
.two-column-wrapper ul li.two-column-right { width: 100%; background-color: #f2f2e6; float: none; }
article { padding: 0; margin: 0; }
} 
@media screen and (min-width: 321px)
{
.main-nav { background-color: #aad7c0; /* Green */ display: block; margin: 0; min-height: 250px; }
}