/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} /* ------------------------ GLOBAL ELEMENTS ------------------------ */ *, *:before, *:after { box-sizing: inherit; } /*For IE 10 (desktop) to work in it's new "snap mode" you need to use this */ @-moz-viewport { width: device-width; zoom: 1.0; } @-ms-viewport { width: device-width; zoom: 1.0; } @-o-viewport { width: device-width; zoom: 1.0; } @-webkit-viewport { width: device-width; zoom: 1.0; } @viewport { width: device-width; zoom: 1.0; } html, body { /* Set and to inherit the height of the viewport */ min-height: 100%; overflow-x: hidden; } html { box-sizing: border-box; font-size: 100%; overflow-y: scroll; } address, blockquote, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, menu, ol, p, pre, summary, table, ul { margin: 0 0 1rem; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } ::selection:window-inactive { background: #dedede; } img::selection { background: transparent; } img::-moz-selection { background: transparent; } [disabled] { cursor: not-allowed; } /* ------------------------ TYPOGRAPHY ------------------------ */ html, button, select, input, textarea { color: #fff5de; } body { font-family: 'Federo', Helvetica, Arial, sans-serif; font-size: 1rem; -webkit-font-smoothing: antialiased; font-weight: 400; line-height: 1.5; text-align: left; } a, a:active, a:visited { outline: none; transition: 0.2s ease-in-out all; } a { color: #b8d9c8; text-decoration: none; } a:hover { color: #5a9e7b; outline: none; } a:active { color: #6f7a60; } caption, p, table, textarea, td, th { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; word-wrap: break-word; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: #4d002b; } h1, .h1 { font-family: 'Poiret One', Helvetica, Arial, sans-serif; font-size: 2.25rem; line-height: 1.33333; } h2, .h2 { font-family: 'Poiret One', Helvetica, Arial, sans-serif; font-size: 1.875rem; line-height: 1.6; } h3, .h3 { font-family: 'Poiret One', Helvetica, Arial, sans-serif; font-size: 1.50rem; line-height: 1; } h4, .h4 { font-size: 1.25rem; line-height: 1.2; } h5, .h5 { font-size: 1rem; line-height: 1.5; } h6, .h6 { font-size: 0.875rem; line-height: 1.71429; } nav ul, nav ol { margin: 0; padding: 0; list-style: none; } ol { list-style: decimal; } ol ol { list-style: upper-alpha; } ol ol ol { list-style: lower-roman; } ol ol ol ol { list-style: lower-alpha; } ul { list-style: disc; } ul ul { list-style: circle; } ul ul ul { list-style: square; } ul ul ul ul { list-style: decimal-leading-zero; } ol ol, ol ul, ul ul, ul ol { margin-bottom: 0; } .no-list { list-style: none; margin: 0; padding: 0; } small, .small { display: inline-block; font-size: 0.75em; line-height: 2; } .micro { font-size: 0.625rem; line-height: 2.4; } /* ------------------------ =Colors ------------------------ */ .barossa { color: #4d002b; } .bg-barossa { background-color: #4d002b; } .pansy-purple { color: #750e49; } .bg-pansy-purple { background-color: #750e49; } .bazaar { color: #917081; } .bg-bazaar { background-color: #917081; } .surf { color: #b8d9c8; } .bg-surf { background-color: #b8d9c8; } .egg-sour { color: #fff5de; } a.egg-sour:hover { color: #baa575; } .bg-egg-sour { background-color: #fff5de; } /* ------------------------ =Sections ------------------------ */ header { height: 24rem; padding: 2rem 0; } header nav { position: relative; top: 7.5rem; } header ul { text-align: center; } header li { display: inline-block; font-size: 1.25rem; line-height: 3.5; text-transform: uppercase; } header a { display: block; padding: 0 1.75rem; text-decoration: none; } .masthead { position: relative; width: 20rem } .masthead span { background: #000; border-radius: 10rem; padding: 2rem; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 20rem; height: 20rem; } .masthead img { border-radius: 4rem; width: 16rem; } main { min-height: 34rem; overflow: hidden; padding-bottom: 2rem; } footer { font-size: 0.75rem; line-height: 3; text-align: center; } /* ------------------------ =Content ------------------------ */ .wrap { width: 60rem; margin: 0 auto; } aside { border-radius: 0.25rem; display: inline-block; padding: 2rem; vertical-align: top; width: 24%; } section { display: inline-block; padding: 0 2rem; vertical-align: top; width: 74%; } article { border-bottom: 1px dotted #750e49; margin-bottom: 1rem; overflow: hidden; padding-bottom: 1rem; } .figure-left { float: left; margin: 0 1rem 1rem 0; } .figure-right { float: right; margin: 0 0 1rem 1rem; }