/*

Kirby Starterkit

Author: Bastian Allgeier / Sascha Lack
URL:    http://getkirby.com
Email:  support@getkirby.com

*/


/* Source Sans Pro
-------------------------------------------------- */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url(../threestory.com/assets/fonts/sourcesanspro-300.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(../threestory.com/assets/fonts/sourcesanspro-400.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(../threestory.com/assets/fonts/sourcesanspro-600.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: url(../threestory.com/assets/fonts/sourcesanspro-400-italic.woff) format('woff');
}


/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}


/* Pix
-------------------------------------------------- */
img {
  display: block;
  max-width: 100%;
}

li img {
	border: solid 1px #909395;
	margin-bottom: 10px;
	background-color: #fff;
}

@media screen and (min-width: 30em) {
	.right-side {
		float: right;
		padding-left: 10px;
		max-width:33%;
	}
}

/* Links
-------------------------------------------------- */
a {
  color: #799DCB;
  text-decoration: none;
  transition: color .3s, background .3s, border .3s;
}
a:hover {
  color: #48494b;
  background: #e7e8e9;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
  background: none;
}


/* Clearfix
-------------------------------------------------- */
.cf:after {
  content: "";
  display: table;
  clear: both;
}


/* Site
-------------------------------------------------- */
html {
  height: 101%;
  font-family: "proxima-nova", "Source Sans Pro", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0 auto;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.5em;
  background: #48494B; /* note: on iPhone, a sliver of background shows off to the right - could change to #fff, but then you have white below the footer */
  color: #5a5b5d;
}


/* Twitter
-------------------------------------------------- */

.twitter-timeline {
	max-width:250px;
	}
	
		
/* Header
-------------------------------------------------- */
.header {
  border-top: 10px solid #48494B;
  background: #e7e8e9;
}
.logo {
  display: block;
  float: right;
}
.logo img {
  width: 9.5em;
}

.tagline {
	line-height: 0em;
}

#tag {
	visibility: hidden;
	padding: 0;
	}
	
.header h4 {
  color:#799dcb;
  float: left;
  font-size: 1.0em;
  font-weight: 300;
  line-height: 1.5em;
  margin: 0.3em 0 0 0.6em;
  text-transform:uppercase;
  letter-spacing:0.1em;
}

@media screen and (min-width: 40em) {
	.logo {
		margin: 0 1em 0.2em 0;
		}
		
	#tag {
		visibility: visible;
		background:#E7E8E9;
		padding-left: 2.8em;
		padding-top: 0.3em;
		}
		
	.tagline {
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-size: 0.9em;
		line-height: 1.4em;
		color: #799dcb;
		}

	.header h4 {
	  margin: 0.3em 0 0 3em;
	}

	}


/* Headings
-------------------------------------------------- */
h1 {
  font-size: 1.8em;
  line-height: 1.25em;
  font-weight: 400;
}
h2 {
  font-size: 1.1em;
  line-height: 1.25em;
  font-weight: 700;
  margin-bottom: .5em;
}
h3 {
  font-size: 1.5em;
  line-height: 1em;
  font-weight: 100;
  margin-bottom: .3em;
}
h4 {
  font-size: 1.0em;
  font-weight: 600;
  line-height: 1.5em;
  margin-bottom: .5em;
  text-transform:uppercase;
  letter-spacing:0.1em;
}
h1 a, h2 a, h3 a, h4 a {
  color: inherit;
  border: 0 !important;
}


/* Main
-------------------------------------------------- */
.main {
  background:#fff;
  padding: 2em 1em 0 1em;
}
.main hr {
  margin: 0 0 2.2em 0;
  border:none;
  border-top:2px dotted #bbb;
  height: 2px;
  background: none;
}
.main p,
.main figure,
.main ul,
.main ol {
  margin-bottom: 0.8em;
}

.main p {  
	margin-top: 0.8em;
}

.main a {
  border-bottom: 2px solid #ddd;
}

/* Text blocks */
.text {
  max-width:50em;
}
.text ul,
.text ol {
  margin-left: 1em;
}

#intro {
	width: 100%;
	float: left;
	line-height: 150%;
}

@media screen and (min-width: 40em) {
	.main {
		  padding: 2em 1.5em 1.5em 3em;
	  	}
	.main p,
	.main figure,
	.main ul,
	.main ol {
			margin-top: 0;
		}
		
	#intro {
	width: 67%;
	float: left;
	line-height: 150%;
	}

}
			


/* Footer
-------------------------------------------------- */

#footer {
	clear: both;
	width: 760px;
	line-height: 150%;
	padding-top: 10px;
	font-size: 12px;
}

.footer {
  font-size: .9em;
  background-color: #48494B;
  line-height: 1.4em;
  padding: 0.5em 1em 1em 1em;
  color: #727477;
}

.footer li {
	margin-bottom: 1.5em;
	list-style: none;
}
.footer img {
	border:none;
	display:inline;
	vertical-align:middle;
	margin: 0 0 2px 0;
	background: none;
}

.footer a {
  font-weight:700;
}

.footer a:hover {
  background: none;
  color:#fff;
}
.copyright {
  float: left;
}
.colophon {
  float: right;
}
.colophon a b {
  color: red;
  padding-left: .25em;
}

/*.footer ul,
.footer ol {
  margin-left: 1em;
}*/
@media screen and (min-width: 50em) {
	.footer {
	padding: 1em 0 1.5em 5.5em;
	}
  .footer li {
    float: left;
    width: 30%;
    margin-left: 5%;
  }
  .footer li:first-child {
    margin-left: 0;
  }
}