* {
                margin:0;
                padding:0;
                box-sizing:border-box;
            }

            /* STRUCTURE */
            body {background-color:#afbb6f;}
            div {
                max-width:600px;
                background-color: #d8d1a8;
                padding:20px 40px;
                margin:0 auto;
            }
            article {
                margin-top:20px;
                margin-bottom:20px;
                padding:10px 40px 40px 40px;
                background-color:#ebe7d4;
            }

            header {margin-top:20px;}
            figure.fl {width:200px; float:left; padding:0; padding-right:20px; }
            header img {width:100%; margin-top:0; margin-bottom:20px;}
            header div {width:300px;}

            img.portfolio {float:right; margin:60px 0 20px 20px; width:300px;}

            .fl {float:left;}

            nav li {display:inline;}


            /* TYPOGRAPHY */
            h1, h2 {
                color:red;
                font-size:30px;
                margin-top:10px;
            }
            h1 {font-size:40px; line-height:1;}
            h3 {font-size:28px;}
            header h3 {font-size:18px; line-height:1.3;}
            article h3 {font-size:28px; margin-top:60px;}
            article h4 {font-size:20px;}
            p,ul,ol,h4,img {margin-top:20px;}
            
            @media screen and (min-width:900px) {
            	div {min-width:1000px;}
            	header {float:left; width:315px; margin-right:40px;}
            	article {float:left; Width:525px;}
            }
            

            /* LINKS */
            a:link, a:visited {color:#45590b; text-decoration:none; font-style:italic;}
            a:hover, a:focus, a:active {color:red;}

            nav a:link, nav a:visited {
                color:white;
                text-decoration: none;
                padding:5px 10px;
                background-color:#45590b;
            }
            nav a:hover, nav a:active, nav  a:focus {background-color:red;}

            nav li {
                list-style-type:none; display:inline;

            }
            nav a:hover {
                background-color:red;}

            /* CLEARFIX */
            /**
            * For modern browsers
            * 1. The space content is one way to avoid an Opera bug when the
            *    contenteditable attribute is included anywhere else in the document.
            *    Otherwise it causes space to appear at the top and bottom of elements
            *    that are clearfixed.
            * 2. The use of `table` rather than `block` is only necessary if using
            *    `:before` to contain the top-margins of child elements.
            */
            .cf:before,
            .cf:after {
                content: " "; /* 1 */
                display: table; /* 2 */
            }

            .cf:after {
                clear: both;
            }

            /**
             * For IE 6/7 only
             * Include this rule to trigger hasLayout and contain floats.
             */
            .cf {
                *zoom: 1;
            }