/*!
 * abustillos.com (2015)
 * handcrafted by @atonahuali
 * html5 css3 js
 */


/* Layout */
html, body {
	width: 100%;
}
.ab {
	height: auto; width: 100%; 
	margin: 0;
}
.ac { 
	float: left;
	height: 100%; width: 76.4%;
	margin: 0;
	margin-left: 23.6%;
}
.cb { 
	position: fixed;
	height: 100%; width: 23.6%; max-width: 250px;
}

/* Sections */

.el-menu {
	background-color: #f8f8f8;
	-moz-box-shadow: -1px 0 3px #999999 inset;
	-webkit-box-shadow: -1px 0 3px #999999 inset;
	box-shadow: -1px 0 3px #999999 inset;
}
.el-menu-toggle {
	visibility: hidden;
	position: absolute; right: 2px;
	border: none;
	background: none;
	padding: 14px;
}

.el-show {
	padding-bottom: 60px;
}
.el-project {
	position: relative;
	height: auto; width: 100%;
}
.el-photo {
	float: left; clear: both;
	height: auto; max-height: 1080px;
	padding: 50px 50px 0;
}
.el-photo > img {
	min-height: auto; max-height: 76.4%; max-width: 100%;
	-moz-box-shadow: -1px 1px 4px #999999;
	-webkit-box-shadow: -1px 1px 4px #999999;
	box-shadow: -1px 1px 4px #999999;
}
.el-photo.no-shadow > img {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.el-video {
	float: left; clear: both;
	height: auto; max-height: 272px;
	width: 100%; max-width: 480px; 
	margin: 50px 50px 0;
}
.el-video > video {
	height: 100%; width: auto;
}
.el-description {
	float: left; clear: both;
	width: 76.4%; max-width: 600px;
	padding: 50px;
}
.el-description > img {
	float: left; clear: both;
	width: 100%; max-width: 600px;
	margin-top: 37px;
	margin-bottom: 9px;
	
}
.el-caption {
	float: left; clear: both;
	padding: 0 50px 50px 50px;
}

.el-index {
	position: relative;
	height: 100%;
	padding: 78px 2% 0 1%;
}
.el-card {
	float: left;
	height: auto; min-height: 90px; width: 90%; min-width: 240px; max-width: 420px;
	margin: 0 37px 23px 14px;
	border: 1px solid #999999;
	background-color: #ffffff;
	-moz-box-shadow: -1px 1px 3px #999999;
	-webkit-box-shadow: -1px 1px 3px #999999;
	box-shadow: -1px 1px 3px #999999;
}
.el-card-icon {
	float: left;
	height: 60px; width: 60px;
	margin: 14px;
	border: 1px solid #999999;
}
.el-story {
	position: relative;
	height: 100%;
}
.el-story > img,
.el-story > svg {
	width: 80%; max-width: 600px;
	margin: 40px 0 0 50px;
	-moz-box-shadow: -1px 1px 4px #999999;
	-webkit-box-shadow: -1px 1px 4px #999999;
	box-shadow: -1px 1px 4px #999999;
}
.el-story > .el-description {
	padding-top: 37px;
	padding-bottom: 0;
}

.tight-padding {
	padding-bottom: 23px !important;
}
.centered {
	text-align: center;
}

/* Typography */	

p { font: italic 14px/23px Georgia, "Times New Roman", Times, serif; color: #444444;
	-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
p.el-artist {
	margin-top: 0; margin-bottom: 10px;
	padding-left: 10%;
	cursor: default;
	font-size: 11px; line-height: 14px;
	color: #999999;
}
p.el-specs {
	margin-top: 0; margin-bottom: 0;
}
p.el-status {
	font-weight: lighter; color: #999999;
	margin-top: 0; margin-bottom: 0;
}
p.el-tagline {
	display: block;
	line-height: 20px;
	color: #777777;
	padding: 0 14px 11px 0;
	margin: 0;
}
p.el-note {
	clear: both;
	color: #666666;
}
h1 { font: normal 23px/37px Arial, sans-serif; color: #444444;
	-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

h2 { font: normal 16px/26px Arial, sans-serif; color: #444444;
	-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
h2.el-homelink {
	font-weight: bold;
	margin-top: 0; margin-bottom: 0;
	padding-top: 73px;
	padding-left: 10%;
}
h2.el-title {
	margin-bottom: 0;
}
h2.el-card-title {
	margin: 0;
	padding-top: 13px;
}
h2.el-story-title {
	margin: 0;
}

ul { font: normal 14px/31px Arial, sans-serif; color: #444444;
	-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%; }
ul.el-sidelinks {
	margin-top: 31px; margin-bottom: 30px; padding-left: 10%;
	list-style: none;
}
ul.el-navlinks {
	margin-top: 0; margin-bottom: 37px; padding-left: 10%;
	list-style: none;	
}

.first-line {
	padding-top: 23px;
}

/* Links */

.this-page {
	font-weight: bold;
	color: #000000;
}
.el-description a, 
.el-description a:visited { 
	text-decoration: underline;
	color: inherit;
	outline: none;
}

a, a:visited { 
	text-decoration: none;
	color: inherit;
	outline: none;
}
a:hover { 
	text-decoration: underline;
	color: #000000;
	outline: none;
}
.el-card > a:hover {
	text-decoration: none;
}

.el-card:hover {
	background-color: #f8f8f8;
	border-color: #777777;
	-moz-box-shadow: -2px 4px 5px #d2d2d2;
	-webkit-box-shadow: -2px 4px 5px #d2d2d2;
	box-shadow: -2px 4px 5px #d2d2d2;
}
.el-card:hover > img {
	border-color: #444444;
}
.el-card:hover > a > h2,
.el-card:hover > a > p {
	color: #000000;
}

/* Responsive */

@media only screen 
  and (max-width: 640px) {
	.ac { 
		height: auto; width: 100%;
		clear: both;
		margin: 60px 0 0;
	}
	.cb { 
		height: auto; width: 100%; min-width: 100%; max-width: 100%;
		z-index: 1;
	}
	h2.el-homelink {
		float: left;
		width: 50%;
		padding-top: 14px;
	}
	p.el-artist {
		float: left;
		width: 50%;
	}
	#b-menu-toggle {
		visibility: visible;
		opacity: 1;
		top: 2px; 
		-webkit-transition-property: top; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: 0; transition-property: top; transition-duration: 0.3s; transition-timing-function: ease-out; transition-delay: 0;
		-moz-transition-property: top; -moz-transition-duration: 0.3s; -moz-transition-timing-function: ease-out; -moz-transition-delay: 0; 
		-o-transition-property: top; -o-transition-duration: 0.3s; -o-transition-timing-function: ease-out; -o-transition-delay: 0; 
	}
	#m-page {
		height: 64px;
		overflow: hidden;
		-webkit-transition-property: height; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: 0; transition-property: height; transition-duration: 0.3s; transition-timing-function: ease-out; transition-delay: 0;
		-moz-transition-property: height; -moz-transition-duration: 0.3s; -moz-transition-timing-function: ease-out; -moz-transition-delay: 0; 
		-o-transition-property: height; -o-transition-duration: 0.3s; -o-transition-timing-function: ease-out; -o-transition-delay: 0; 
	}
	.el-menu-links {
		clear: both;
	}
	ul.el-sidelinks {
		margin-bottom: 0;
	}
	.el-card {
		margin-left: 10%; width: 80%;
	}
	.el-description {
		padding: 37px 0 0 10%;
	}
	.el-photo, .el-caption {
		padding-left: 10%; padding-right: 10%;
	}
	.el-story > img {
		margin-left: 10%;
	}
}

@media only screen
  and (max-height: 504px) {
	h2.el-homelink {
		padding-top: 14px;
	}
	ul.el-sidelinks {
		margin-top: 14px;
		margin-bottom: 0;
	}
	.el-description {
		padding-top: 0;
	}
	.el-description > img {
		height: 240px; width: auto;
	}
	.el-photo {
		height: 75%;
	}
}

@media print {
	.ac { 
		float: none !important;
		height: auto;
		width: auto; 
		margin: 60px 0 37px;
		border: 0;
		padding: 23px 0 0; 
	}
	.cb { 
		float: none !important;
		height: auto; 
		width: auto; min-width: 100%; max-width: 100%;
	}
	.el-menu {
		background-color: #f5f5f5;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.el-menu-links {
		display: none;
		clear: both;
	}
	.el-menu-toggle {
		visibility: hidden;
	}
	h2.el-homelink {
		float: right;
		width: 90%;
		padding-top: 14px;
		margin-right: 23px;
		text-align: right;
	}
	p.el-artist {
		float: right;
		width: 90%;
		margin-right: 23px;
		text-align: right;
	}
	.el-card {
		margin: 0 37px 23px 14px;
		border: none;
		background-color: transparent;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		page-break-inside: avoid;
	}
	.el-card > a > h2,
	.el-card > a > p,
	.el-description > h1,
	.el-description > p {
		color: #000000;
	}
	.el-description > h2 {
		color: #444444;
		margin-bottom: 60px;
	}
	.el-description {
		page-break-after: always;
	}
	.el-photo {
		page-break-before: always;
	}
	.el-caption {
		page-break-inside: avoid;
	}
	.el-story > img {
		display: none;
	}
}