/*
BURDOCKS

Authors:    Robyn Shesterniak
Author URI: http://burdocks.ca
License:    Creative Commons 
            Attribution-NonCommercial-ShareAlike (BY-NC-SA)
            http://creativecommons.org/licenses/by-nc-sa/3.0/
*/

/* _____________________________________________________________________________________________COLOURS_____________ */

/* 

black: #231f20;
white: #f8f8f8;
red: #f84e57;

/* _____________________________________________________________________________________________BASE________________ */

* { box-sizing: border-box; }

body { margin: 0; padding: 0; background: #fff; }
html { margin: 0; padding: 0; height: 100%; overflow: visible; font-size: 62.5%; }
img { margin: 0; padding: 0; width: 100%; height: auto; }

/* _____________________________________________________________________________________________TYPOGRAPHY__________ */

@font-face{ 
	font-family: 'CalibreWeb';
	src: url('../fonts/CalibreWeb-Regular.eot');
	src: url('../fonts/CalibreWeb-Regular.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/CalibreWeb-Regular.woff') format('woff');
	font-weight: normal;
}

body, p, input, textarea, li, div {
    font-family: 'CalibreWeb', "Calibre", "Helvetica Neue", helvetica, arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 2rem;
    line-height: 2.9rem;
    color: #231f20;
    -moz-font-feature-settings: "onum=1";
    font-feature-settings: "onum=1";
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: none;
    margin: 0;
    padding: 0;
}

p, small { margin-bottom: 1.4rem; }
p:last-child, small:last-child { margin-bottom: 0; }
small { font-size: 1.5rem; line-height: 2.5rem; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'CalibreWeb', "Calibre", "Helvetica Neue", helvetica, arial, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 3.6rem;
	line-height: 4.2rem;
	color: #231f20;
	margin: 0 0 1.4rem 0; 
	padding: 0;
}
h2 { font-size: 1.8rem; line-height: 2.8rem; }
h3 { font-size: 1.35rem; line-height: 2.8rem; text-transform: uppercase; letter-spacing: 0.03rem; }

ul, ol, li { margin: 0; padding: 0; list-style-type: none; }
img { width: 100%; height: auto; }

a, a:link, a:visited { 
	text-decoration: underline; color: #231f20;     
	-webkit-transition: color 0.1s ease-in;
    -moz-transition: color 0.1s ease-in;
    -ms-transition: color 0.1s ease-in;
    -o-transition: color 0.1s ease-in;
    transition: color 0.1s ease-in;
    cursor: pointer;
}
a:hover, a:focus, a:active { color: #f84e57; }

::selection { color: #231f20; background: #ffd2d5; text-shadow: none; }
::-moz-selection { color: #231f20; background: #ffd2d5; text-shadow: none; }

.container { max-width: 1800px; margin: 0 auto; }

/* _____________________________________________________________________________________________CONTENT AREA________ */



body { padding-top: 7.2rem; }
header { clear: both; float: none; width: 100%; position: fixed; top: 0; left: 0; height: 7.2rem; line-height: 7.2rem; background: #fff; z-index: 1000; padding: 0;}
header a#logo, header a#email { display: block; float: left; vertical-align: middle; height: 7.2rem; padding-left: 3.6rem; padding-right: 3.6rem; line-height: 6.8rem; }
header a#logo { line-height: 6.5rem; }
header a#logo img { vertical-align: middle; height: 1.6rem; width: auto; display: inline-block; }
header a#email { float: right; }

main { clear: both; float: none; margin: 0; padding: 0; width: 100%; }
.blurb { padding: 3.6rem 3.6rem 2.6rem 3.6rem; background: #fff; }
.blurb p { max-width: 700px; }
.blurb small { max-width: 520px; }
.blurb ul li { font-size: 1.5rem; line-height: 2.5rem; }
.blurb ul li span { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.08rem; padding-right: 1rem; }
body.project .grid-item { width: 50%; }
body.home .grid-item { width: 33.333%; }
.grid-item a { display: block; vertical-align: middle; }
.grid-item img { vertical-align: bottom; }

footer { float: none; clear: both; width: 100%; text-align: center; padding: 7.2rem; background: #fff; }
footer ul { margin: 0 0 1.8rem 0; }
footer ul li { display: inline-block; }
footer ul li a { padding: 1rem; }
footer p { max-width: 700px; margin: 0 auto 1.8rem auto; }


/* _____________________________________________________________________________________________FOOTER______________ */



/* _____________________________________________________________________________________________MOBILE______________ */

@media (min-width: 1800px) {
	header a#logo { margin-left: -3.6rem; }
	header a#email { margin-right: -3.6rem; }
	.blurb { padding-left: 0; padding-right: 0; }
}

@media (max-width: 599px) {
	body.project .grid-item { width: 100%; }
	footer { padding: 3.6rem; }
	/*body.home .grid-item { width: 50%; }*/
}

@media (max-width: 480px) {
	body.home .grid-item { width: 100%; }
	header a#email { display: none; }
}