/* A. Hacks and fixes */

/* A.1 HTML5 Fix */
section, article, header, footer, nav, aside, hgroup { display: block; }

/* A.2 Clear fix */

.clearfix:after, .row:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

.clearfix, .row { display: inline-block; }

/* A.2.1 Hides from IE5/Mac \*/
* html .clearfix, * html .row { height: 1px; }

.clearfix, .row  { display: block; }
/* End hide from IE5/Mac */

/* 1. Generic */

html, body { min-height: 100%; }

body {
	min-height: 100%;
	margin: 0 auto;
	padding: 30px 0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.4em;
	letter-spacing: -1px;
	color: #000000;
	background-color: #bbbbbb;
}

a {
	color: #888888;
	outline: none;
	text-decoration: none;
}

a:hover {
	color: #000000;
}

a img { border: 0; }

img {
	max-width: 100%;
	height: auto;
}

form { margin: 0; padding: 0; }

form input, form button { -webkit-appearance: none; }

h1, h2, h3, h4, h5, h6 {
	line-height: 1em;
	margin: 1.4em 0 1em 0;
}

.small { font-size: 0.875em; }

.left { float: left; }
.right { float: right; }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.mt0 { margin-top: 0; }

.rounded {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/* 2. Structure styles */

header, #header, section, footer, #footer { margin: 0 auto; }

.container {
	margin: 0 auto;
	width: 1250px;
	background-color: #ffffff;
}

section {
	padding: 25px;
	border-top: 1px solid #bbbbbb;
	background-color: #ffffff;
}

.column {
	float: left;
	padding: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(assets/htc/boxsizing.htc);
}

.column *:first-child { margin-top: 0; }

.column-row {
	padding: 0!important;
}

.separator {
	padding-top: 15px;
	border-top: 1px solid #cccccc;
}

.full-width { width: 100%; }
.half-width { width: 50%; }
.one-third { width: 33.33333%; }
.two-thirds { width: 66.66666%; }
.one-fourth { width: 25%; }
.three-fourths { width: 75%; }
.one-fifth { width: 20%; }
.two-fifths { width: 40%; }
.three-fifths { width: 60%; }
.one-sixth { width: 16.66666% }

/* 3. Sections */

/* 3.1 Section: Intro */

#intro {
	border: 0;
	background-color: #eeeeee;
}

#intro .column h1 {
	margin: 0;
	padding: 0;
	font-size: 3em;
	font-weight: 800;
	letter-spacing: -0.07em;
}

#intro .column h3 {
	margin: 0 0 15px 0;
	padding: 0;
	font-size: 1.5em;
	font-weight: 300;
	letter-spacing: -0.07em;
}

.bold-profile-pic {
	width: 90px;
	max-width: 100%;
	float: left;
	margin: 0 15px 0 0;
	padding: 5px;
	background-color: #fff;
}

.bold-profile-info { font-size: 0.875em; }

.bold-social-links {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.bold-social-links li {
	float: left;
	margin: 0 8px 8px 0;
}
.bold-social-links li a { display: inline-block; }
.bold-social-links li i { font-size: 1.5em; }

.bold-contacts i {
	display: inline-block;
	width: 15px;
	margin-right: 5px;
	text-align: center;
	color: #888;
}

/* 3.2 Generic section styling */

h2.section-title {
	font-size: 2em;
	font-weight: 800;
	letter-spacing: -0.07em;
	margin: 0 0 10px 0;
	padding: 0;
}

/* 3.3 Skills */

.bold-skill h5 {
	font-size: 0.750em;
	font-weight: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.bold-skill p { margin-bottom: 0; }

.skill-bar {
	width: 100%;
	padding: 2px;
	background-color: #eeeeee;
	text-align: left;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(assets/htc/boxsizing.htc);
}

.skill-bar-fill {
	display: block;
	height: 5px;
	text-indent: -9999px;
	background-color: #bbbbbb;
}

.skill-bar-10 { width: 10%; }
.skill-bar-20 { width: 20%; }
.skill-bar-30 { width: 30%; }
.skill-bar-40 { width: 40%; }
.skill-bar-50 { width: 50%; }
.skill-bar-60 { width: 60%; }
.skill-bar-70 { width: 70%; }
.skill-bar-80 { width: 80%; }
.skill-bar-90 { width: 90%; }
.skill-bar-100 { width: 100%; }

/* 3.4 Portfolio */

.bold-filters { 
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 0.750em;
	text-transform: uppercase;
}

.bold-filters li {
	float: left;
	margin: 0 3px 5px; 0;
	padding: 0 5px;
	color: #555555;
	background-color: #dddddd;
	line-height: 2em;
	display: inline-block;
	cursor: pointer;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.bold-filters li:hover {
	color: #ffffff;
	background-color: #000000;
}

.bold-filters li.active {
	color: #ffffff;
	background-color: #bbbbbb;
}

.bold-portfolio .column{
	display: none;
	opacity: 0;
}

.project-wrap { position: relative; overflow: hidden; cursor: pointer; }

.project-wrap img { display: block; }

.project-links {
	position: absolute;
	top: 100%;
	bottom: 0;
	width: 100%;
	height: 60%;
	padding-top: 40%;
	text-align: center;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.4);
	background: transparent\10;
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
}

.project-wrap a {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0 2px;
	padding: 0;
	color: #000;
	line-height: 30px;
	text-align: center;
	background: #ffffff!important;
}
.project-wrap a i {
	margin: 0;
	line-height: 30px;
}

/* 3.5 Form */

input[type="text"], textarea {
	font-family: inherit;
	font-size: 1em;
	font-style: italic;
	width: 96%;
	padding: 0 2%;
	height: 38px;
	line-height: 38px;
	margin: 0 0 10px 0;
	font-size: 1em;
	background-color: transparent;
	border: 1px solid #888888;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	resize: none;
}

textarea {
	height: auto;
	line-height: 1.4em;
}

.button {
	display: inline-block;
	color: #ffffff;
	background-color: #888888;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
}

.button:hover {
	color: #ffffff!important;
	background-color: #000!important;
}
.button-small {
	padding: 5px 10px;
	font-size: 0.875em;
}
.button-medium {
	padding: 10px 15px;
	font-size: 1em;
}
.button-large {
	padding: 15px 20px;
	font-size: 1.125em;
}

.button i { margin-right: 5px; }

label.error {
	display: block;
	padding: 0 0 10px 0;
	font-size: 0.875em;
}

.form-message-success, .form-message-error {
	display: block;
	padding-bottom: 10px;
}


/* B. Color schemes and theme FX */

/* B.1.1 Default theme */
.theme-default, .theme-light, .theme-default .skill-bar-fill, .theme-light .skill-bar-fill, .theme-default .bold-filters li.active, .theme-light .bold-filters li.active { background-color: #bbbbbb; }
.theme-default section, .theme-light section { border-color: #bbbbbb; }
.theme-default .button, .theme-light .button { color: #000000; background-color: #bbbbbb; }

/* B.1.2 Sun theme */
.theme-sun, .theme-sun .skill-bar-fill, .theme-sun .bold-filters li.active { background-color: #ffcc00; }
.theme-sun section { border-color: #ffcc00; }
.theme-sun .button { color: #000000; background-color: #ffcc00; }

/* B.1.3 Emerald theme */
.theme-emerald, .theme-emerald .skill-bar-fill, .theme-emerald .bold-filters li.active { background-color: #27ae60; }
.theme-emerald section { border-color: #27ae60; }
.theme-emerald .button { background-color: #27ae60; }

/* B.1.4 Sky theme */
.theme-sky, .theme-sky .skill-bar-fill, .theme-sky .bold-filters li.active { background-color: #3498db; }
.theme-sky section { border-color: #3498db; }
.theme-sky .button { background-color: #3498db; }

/* B.1.5 Ruby theme */
.theme-ruby, .theme-ruby .skill-bar-fill, .theme-ruby .bold-filters li.active { background-color: #e51d1d; }
.theme-ruby section { border-color: #e51d1d; }
.theme-ruby .button { background-color: #e51d1d; }

/* B.1.6 Orchid theme */
.theme-orchid, .theme-orchid .skill-bar-fill, .theme-orchid .bold-filters li.active { background-color: #5a2182; }
.theme-orchid section { border-color: #5a2182; }
.theme-orchid .button { background-color: #5a2182; }

/* B.1.7 Plum theme */
.theme-plum, .theme-plum .skill-bar-fill, .theme-plum .bold-filters li.active { background-color: #673653; }
.theme-plum section { border-color: #673653; }
.theme-plum .button { background-color: #673653; }

/* B.1.8 Sea theme */
.theme-sea, .theme-sea .skill-bar-fill, .theme-sea .bold-filters li.active { background-color: #16a085; }
.theme-sea section { border-color: #16a085; }
.theme-sea .button { background-color: #16a085; }

/* B.1.9 Earth theme */
.theme-earth, .theme-earth .skill-bar-fill, .theme-earth .bold-filters li.active { background-color: #5b1f19; }
.theme-earth section { border-color: #5b1f19; }
.theme-earth .button { background-color: #5b1f19; }

/* B.1.10 Orange theme */
.theme-orange, .theme-orange .skill-bar-fill, .theme-orange .bold-filters li.active { background-color: #ff9900; }
.theme-orange section { border-color: #ff9900; }
.theme-orange .button { background-color: #ff9900; }

/* B.1.11 Lava theme */
.theme-lava, .theme-lava .skill-bar-fill, .theme-lava .bold-filters li.active { background-color: #f01e45; }
.theme-lava section { border-color: #f01e45; }
.theme-lava .button { background-color: #f01e45; }

/* B.1.12 Lime theme */
.theme-lime, .theme-lime .skill-bar-fill, .theme-lime .bold-filters li.active { background-color: #bfeb24; }
.theme-lime section { border-color: #bfeb24; }
.theme-lime .button { color: #000000; background-color: #bfeb24; }

/* B.1.13 Grass theme */
.theme-grass, .theme-grass .skill-bar-fill, .theme-grass .bold-filters li.active { background-color: #669900; }
.theme-grass section { border-color: #669900; }
.theme-grass .button { background-color: #669900; }

/* B.1.14 Girly theme */
.theme-girly, .theme-girly .skill-bar-fill, .theme-girly .bold-filters li.active { background-color: #ea4c88; }
.theme-girly section { border-color: #ea4c88; }
.theme-girly .button { background-color: #ea4c88; }

/* B.1.15 Dark theme */
.theme-dark, .theme-dark .skill-bar-fill, .theme-dark .bold-filters li.active { background-color: #252d30; }
.theme-dark section { border-color: #252d30; }
.theme-dark .button { background-color: #252d30; }

/* B.2 Subsection theming */
/* Applying the original color scheme classes to a resume section tag will allow a per-section chromatic customizaton */
section.theme-default, section.theme-light { border-color: #bbbbbb; }
section.theme-default .skill-bar-fill, section.theme-default .bold-filters li.active, section.theme-default .button, section.theme-light .skill-bar-fill, section.theme-light .bold-filters li.active, section.theme-light .button { background-color: #bbbbbb; }
section.theme-sun { border-color: #ffcc00; }
section.theme-sun .skill-bar-fill, section.theme-sun .bold-filters li.active, section.theme-sun .button { background-color: #ffcc00; }
section.theme-emerald { border-color: #27ae60; }
section.theme-emerald .skill-bar-fill, section.theme-emerald .bold-filters li.active, section.theme-emerald .button { background-color: #27ae60; }
section.theme-sky { border-color: #3498db; }
section.theme-sky .skill-bar-fill, section.theme-sky .bold-filters li.active, section.theme-sky .button { background-color: #3498db; }
section.theme-ruby { border-color: #e51d1d; }
section.theme-ruby .skill-bar-fill, section.theme-ruby .bold-filters li.active, section.theme-ruby .button { background-color: #e51d1d; }
section.theme-orchid { border-color: #5a2182; }
section.theme-orchid .skill-bar-fill, section.theme-orchid .bold-filters li.active, section.theme-orchid .button { background-color: #5a2182; }
section.theme-plum { border-color: #673653; }
section.theme-plum .skill-bar-fill, section.theme-plum .bold-filters li.active, section.theme-plum .button { background-color: #673653; }
section.theme-sea { border-color: #16a085; }
section.theme-sea .skill-bar-fill, section.theme-sea .bold-filters li.active section.theme-sea .button { background-color: #16a085; }
section.theme-earth { border-color: #5b1f19; }
section.theme-earth .skill-bar-fill, section.theme-earth .bold-filters li.active, section.theme-earth .button { background-color: #5b1f19; }
section.theme-orange { border-color: #ff9900; }
section.theme-orange .skill-bar-fill, section.theme-orange .bold-filters li.active, section.theme-orange .button { background-color: #ff9900; }
section.theme-lava { border-color: #f01e45; }
section.theme-lava .skill-bar-fill, section.theme-lava .bold-filters li.active, section.theme-lava .button { background-color: #f01e45; }
section.theme-lime { border-color: #bfeb24; }
section.theme-lime .skill-bar-fill, section.theme-lime .bold-filters li.active, section.theme-lime .button { background-color: #bfeb24; }
section.theme-grass { border-color: #669900; }
section.theme-grass .skill-bar-fill, section.theme-grass .bold-filters li.active, section.theme-grass .button { background-color: #669900; }
section.theme-girly { border-color: #ea4c88; }
section.theme-girly .skill-bar-fill, section.theme-girly .bold-filters li.active, section.theme-girly .button { background-color: #ea4c88; }
section.theme-dark { border-color: #252d30; }
section.theme-dark .skill-bar-fill, section.theme-dark .bold-filters li.active, section.theme-dark .button { background-color: #252d30; }

section.theme-default, section.theme-light, section.theme-sun, section.theme-emerald, section.theme-sky, section.theme-ruby, section.theme-plum, section.theme-sea, section.theme-earth, section.theme-orange, section.theme-lava, section.theme-lime, section.theme-grass, section.theme-girly, section.theme-dark { background-color: #ffffff }

/* B.3.1 Gradient FX */
body.fx-gradient {
	background-image: url(../img/fx/fx-gradient.png);
	background-repeat: repeat-x;
	background-position: top center;
}

/* B.3.2 Horizontal Lines FX */
body.fx-h-lines {
	background-image: url(../img/fx/fx-h-lines.png);
	background-repeat: repeat;
}
body.fx-h-lines-alt {
	background-image: url(../img/fx/fx-h-lines-alt.png);
	background-repeat: repeat;
}

/* B.3.3 Check FX */
body.fx-check {
	background-image: url(../img/fx/fx-check.png);
	background-repeat: repeat;
}
body.fx-check-alt {
	background-image: url(../img/fx/fx-check-alt.png);
	background-repeat: repeat;
}
body.fx-big-check {
	background-image: url(../img/fx/fx-big-check.png);
	background-repeat: repeat;
}
body.fx-big-check-alt {
	background-image: url(../img/fx/fx-big-check-alt.png);
	background-repeat: repeat;
}

/* B.3.4 Diagonal FX */
body.fx-diag {
	background-image: url(../img/fx/fx-diag.png);
	background-repeat: repeat;
}
body.fx-diag-alt {
	background-image: url(../img/fx/fx-diag-alt.png);
	background-repeat: repeat;
}

/* B.3.5 Stripes FX */
body.fx-stripes {
	background-image: url(../img/fx/fx-stripes.png);
	background-repeat: repeat;
}
body.fx-stripes-alt {
	background-image: url(../img/fx/fx-stripes-alt.png);
	background-repeat: repeat;
}

/* B.3.6 Royal FX */
body.fx-royal {
	background-image: url(../img/fx/fx-royal.png);
	background-repeat: repeat;
}
body.fx-royal-alt {
	background-image: url(../img/fx/fx-royal-alt.png);
	background-repeat: repeat;
}
body.fx-royal-mix {
	background-image: url(../img/fx/fx-royal-mix.png);
	background-repeat: repeat;
}

/* B.3.7 Dots FX */
body.fx-dots {
	background-image: url(../img/fx/fx-dots.png);
	background-repeat: repeat;
}
body.fx-dots-alt {
	background-image: url(../img/fx/fx-dots-alt.png);
	background-repeat: repeat;
}

/* B.3.8 Grid FX */
body.fx-grid {
	background-image: url(../img/fx/fx-grid.png);
	background-repeat: repeat;
}
body.fx-grid-alt {
	background-image: url(../img/fx/fx-grid-alt.png);
	background-repeat: repeat;
}

/* B.3.9 Math FX */
body.fx-math {
	background-image: url(../img/fx/fx-math.png);
	background-repeat: repeat;
	background-position: top center;
}
body.fx-math-alt {
	background-image: url(../img/fx/fx-math-alt.png);
	background-repeat: repeat;
	background-position: top center;
}

/* B.3.10 Tech FX */
body.fx-tech {
	background-image: url(../img/fx/fx-tech.png);
	background-repeat: repeat;
	background-position: top center;
}
body.fx-tech-alt {
	background-image: url(../img/fx/fx-tech-alt.png);
	background-repeat: repeat;
	background-position: top center;
}

/* B.3.11 Tech FX */
body.fx-h-ruler {
	background-image: url(../img/fx/fx-h-ruler.png);
	background-repeat: repeat-x;
	background-position: top center;
}
body.fx-h-ruler-alt {
	background-image: url(../img/fx/fx-h-ruler-alt.png);
	background-repeat: repeat-x;
	background-position: top center;
}
body.fx-v-ruler {
	background-image: url(../img/fx/fx-v-ruler.png);
	background-repeat: repeat-y;
	background-position: top left;
	background-attachment: fixed;
}
body.fx-v-ruler-alt {
	background-image: url(../img/fx/fx-v-ruler-alt.png);
	background-repeat: repeat-y;
	background-position: top left;
	background-attachment: fixed;
}

/* B.4 Backstretch FX - Only display when class 'fx-backstretch' is applied on <body> */
.backstretch {
	display: none;
}
body.fx-backstretch .backstretch {
	display: block;
}


/* C. Media queries */
@media screen and (max-width: 1024px) {
	.container { width: 960px; }
	.column { padding: 15px; }
}

@media screen and (max-width: 800px) {
	body { padding: 15px 0; }
	.container { width: 780px; }
	.column { padding: 10px; }
}

@media screen and (max-width: 768px) {
	.container { width: 720px; }
}

@media screen and (max-width: 640px) {
	body { padding: 2% 0; }
	.container { width: 96%; }
	section { padding: 15px; }
	.section-description { display: none; }
	.column { float: none; width: 100%; padding: 10px 0; }
	.bold-portfolio .column {
		float: left;
		width: 50%;
		padding: 0;
	}
	.bold-portfolio .column img { display: block; }
}

@media screen and (max-device-width: 540px) {
	.container { width: 450px; }
	.column { float: none; width: 100%; padding: 10px 0; }
}

@media screen and (max-width: 320px) {
	.container { width: 96%; }
}

@media screen and (max-device-width: 320px) {
	.container { width: 96%; }
}