/* --------------------------------------------------------	*/ 
/*	Twitter Bootstrap */
/*	Responsive media queries */
/*	Custom override - max width of 1024px */
/* --------------------------------------------------------	*/

@import url("bootstrap/bootstrap.min.css");

// --------------------------------------------------------	
//	LESS variables */
// --------------------------------------------------------	

@light-yellow: #FED86F;
@green: #80C348;
@blue: #508BCB;
@grey: #5D5A5A;
@pink: #D15F98;
@brown: #504031;
@light-brown: #6A5F5A;
@orange:#E84E39;
@white: #fff;
@button_background: @light-brown;
@button_text: #fff;

// --------------------------------------------------------	
//	LESS mixins (learn more at http://lesscss.org/)  */
// --------------------------------------------------------	

// rounded corners
.rounded (@radius: 5px) {

	-webkit-border-radius: @radius;
	   -moz-border-radius: @radius;
	        border-radius: @radius;

	-webkit-background-clip: padding-box; 
	   -moz-background-clip: padding; 
			background-clip: padding-box; 
}

// box shadow with 4 arguments
.box-shadow (@x, @y, @blur, @color) {

	-webkit-box-shadow: @x @y @blur @color;
	   -moz-box-shadow: @x @y @blur @color;
	     -o-box-shadow: @x @y @blur @color;
			box-shadow: @x @y @blur @color;
}

// box shadow with 1 argument
.box-shadow (@arguments) {

	-webkit-box-shadow: @arguments;
	   -moz-box-shadow: @arguments;
	     -o-box-shadow: @arguments;
			box-shadow: @arguments;
}

// inset shadow
.inset-shadow (@x, @y, @blur, @color) {

	-webkit-box-shadow: @x @y @blur @color inset;
	   -moz-box-shadow: @x @y @blur @color inset;
	     -o-box-shadow: @x @y @blur @color inset;
			box-shadow: @x @y @blur @color inset;
}

// opacity
.opacity (@opacity: 0.8) {

	// convert opacity to percentage for IE
	@opacityPercentage: @opacity * 100;
    
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{opacityPercentage}))"; 
    filter: ~"alpha(opacity = (@{opacityPercentage}))";

	-webkit-opacity: @opacity;
	 -khtml-opacity: @opacity;
	   -moz-opacity: @opacity;
			opacity: @opacity;
	
}

// transitions
.animate (@prop, @duration, @ease:ease-out) {

	-webkit-transition:@prop @duration @ease;
	   -moz-transition:@prop @duration @ease;
		-ms-transition:@prop @duration @ease;
		 -o-transition:@prop @duration @ease;
			transition:@prop @duration @ease;
}

/* --------------------------------------------------------	*/
/*	Base */
/* --------------------------------------------------------	*/

::-moz-selection { background: transparent; color: #f30; text-shadow: none; }
::selection { background: transparent; color: #f30; text-shadow: none; }

html {

	font-family:Roboto, sans-serif;
	-webkit-font-smoothing: antialiased !important;
	overflow-y:scroll;
	margin:0;
	height:100%;
	width:100%;
}
body {
	background:transparent;
	margin: 0;
	padding: 0;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #333333;
	cursor:default;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-size-adjust: 100%;	
}
body.homepage {
	background:url(../images/bg.jpg) no-repeat top center;
	height:100%;
	width:100%;
	background-size:cover;
}
h1, h2, h3, h4, h5, h6 {
	color: #474747;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 20px 0;
}
h3, h4, h5 { 
	font-weight: 600; 
	margin: 0 0 10px 0; 
}
h1 {
	color:#E84E39;
	font-size:1.5em;
}
h2 {
	font-size:1.3em;
}
h3 {
	font-size:1.2em;	
}
h4 {
	margin:0 0 20px 0;
	text-transform:uppercase;
	font-weight:200;
	color:#555;
}
h1, h2, h3 {margin:0 0 10px 0;}
a {
  color: #0088cc;
  text-decoration: none;
  &:hover {
	color: #005580; 
	text-decoration: underline;
  }
}
header {
	margin: 0 0 60px 0;
}

/* --------------------------------------------------------	*/
/*	Classes	*/
/* --------------------------------------------------------	*/

.fr {
	float:right;
}
.fl {
	float:left;
}
.ac {
	text-align:center;
}
.al {
	text-align:left;
}
.ar {
	text-align:right;
}
.clr {
	clear:both
}
.grey {
	color:#999
}
.hidden {
	display:none;
}
.show {
	display:block;
}
.unstyled {
	list-style-type:none;
	margin:0;
}
.no-border {
	border:none!important;
}
.no-background {
	background:none;
}
.gradient {
	background:#A0DBE8;
	background-image: linear-gradient(100 100, #A0DBE8 10%, #83B7E0 55%);
	background-image: -o-linear-gradient(100 100, #A0DBE8 10%, #83B7E0 55%);
	background-image: -moz-linear-gradient(left, #A0DBE8 10%, #83B7E0 78%);
	background-image: -webkit-linear-gradient(100 100, #A0DBE8 10%, #83B7E0 55%);
	background-image: -ms-linear-gradient(100 100, #A0DBE8 10%, #83B7E0 55%);
	background-image: -webkit-gradient(
		linear,
		100 100,
		200 200,
		color-stop(0.1, #A0DBE8),
		color-stop(0.55, #83B7E0)
	);		
}
.inline {
	display:inline
}
.inline-block {
	display:inline-block;	
}
.uc {
	text-transform: uppercase;
}
.stacked {
	-webkit-box-shadow:0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8 !important;
	-moz-box-shadow:0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8 !important;
	box-shadow:0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8 !important;	
}

.work {
	margin-bottom:60px;
}

.fb {
	display:inline-block;
	position:relative;
	top:6px!important;
	left:6px;
}
.arrows {
	position:fixed;
	background:url(../images/arrows.png) right top no-repeat;
	top:20px;
	right:20px;
	padding:8px 45px 12px 0;
	color:#aaa;
}
.portfolio {
	padding-bottom:60px;
}


/* ---------------------------------------------------------------------- */
/*	Single-page
/* ---------------------------------------------------------------------- */

.single-page {padding:62px 60px;margin-bottom:19px;border-radius:0;background:#090c0e; color:#222;border-radius:4px;box-shadow:0 0 20px rgba(0,0,0,0.2); }
.single-page h1 {font-size:24px;font-weight:normal;margin-bottom:20px;}
.single-page p {font-size:16px;line-height:1.5em;}  

/* ---------------------------------------------------------------------- */
/*	Resume
/* ---------------------------------------------------------------------- */

#resume {
	padding:40px;
	background:white;
}

#resume h2 {
  font-size:14px;
  margin:0 0 10px 0;
  font-weight:bold;
}
#resume ul {
  margin: 0 0 20px 0;
  list-style-type:none;
}
#resume ul li {
  padding:2px 0;
}

/* ---------------------------------------------------------------------- */
/*	Tables
/* ---------------------------------------------------------------------- */

table {
	color:#444;
	width:100%;
	border-collapse:collapse;
	border-width:1px;
	border-style: solid;
	border-color:#ccc;
}
table thead tr {
	border:0;
}
table thead th {
	background:#eee;
	font-weight:600;
	text-align:left;
	color:#222;
	padding:6px 10px;
    border:0px solid #ddd;
    border-bottom:1px solid #ddd;
	background-image: linear-gradient(bottom, rgb(242,242,242) 46%, rgb(250,250,250) 92%);
	background-image: -o-linear-gradient(bottom, rgb(242,242,242) 46%, rgb(250,250,250) 92%);
	background-image: -moz-linear-gradient(bottom, rgb(242,242,242) 46%, rgb(250,250,250) 92%);
	background-image: -webkit-linear-gradient(bottom, rgb(242,242,242) 46%, rgb(250,250,250) 92%);
	background-image: -ms-linear-gradient(bottom, rgb(242,242,242) 46%, rgb(250,250,250) 92%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.46, rgb(242,242,242)),
		color-stop(0.92, rgb(250,250,250))
	);

}
table td {
	padding:4px 10px;
	background:#fff;
	border-bottom:1px solid #eee;
}
table tr:last-child td {
	border-bottom:1px solid #ccc;	
}
table tr:nth-child(even) td {
	background:#fafafa;
}
table tr:hover td {
	background:#EAF5FA;
}	

/* --------------------------------------------------------	*/
/*	Navigation */
/* --------------------------------------------------------	*/

header {
	position:absolute;
	top:100px;
	left:100px;
}
header ul {
	margin:0 0 20px 0;
}

header ul, header li {
	list-style-type:none;
}
#content {
	max-width:980px;
	background: transparent;
	position:relative;
	top:200px;
	width:880px;
	margin-left:100px;
}

header h2 a {

/*
			position:absolute;
			top:100px;
			left:100px;

*/	
}

header {

	h2 {

		display:inline-block;
		margin-bottom:20px;

		a {
			color:#222;
			font-size:1.8em;
			display:inline-block;
			color:#fff;
			line-height:1em;
			font-weight:600;

			&:hover {
				color:#fff;
				text-decoration:none;
			}
		}
	}

	ul.links {
		display:inline-block;
		margin-left:10px;
		
		a {
			font-size:1.1em;
			background:none;
			margin:-10px 0 0 0!important;

			&:hover {
				text-decoration:underline;
			}
		}
	}

	ul {
		li {
			display:inline-block;
			a {
				display:inline-block;
				padding:4px 8px 2px 8px;
				
				margin-right:6px;
				background:#111;
				color:white;
				font-weight:normal;
				font-size:1.25em;
				.opacity(0.9);	
				.animate(0.3s,all);

				&:hover {
					text-decoration:none;
					color:#fff;
					.opacity(1);	
				}
			}
		}
	}
}

/*
header ul li {
	display:block;
	margin:0 0 10px 0;
}
header h2 {
	margin-bottom:40px;
}
*/
header ul.links {
	display:block;
	position:fixed;
	bottom:40px;
}

/* --------------------------------------------------------	*/
/*	Custom styled scrollbar */
/* --------------------------------------------------------	*/

html:not(.osx) ::-webkit-scrollbar {
    width: 6px;
}
html:not(.osx) ::-webkit-scrollbar-track-piece {
    background-color: #eee;
    border-left:1px solid #ddd;
}
html:not(.osx) ::-webkit-scrollbar-thumb:vertical {
    background-color:#bbb;
}

/*
  Rules for resolutions between 768 and 979px
*/
@media (max-width: 979px) and (min-width: 768px) {}

/*
  Rules for resolutions below 768px
*/
@media (max-width: 767px) {}