/* COLORS */

@blue: #2a648c;
@red: #ff4343;
@yellow: #ffbc5a;

@blue-lt: #52a5e8;

@text-padding: 10px;
@section-padding: 15px;

/* GLOBALS & TYPOGRAPHY */
html {
	font-size: 100%;
	overflow-y: scroll;
}

h1, h2, h3 {
	font-family: 'Futura LT', sans-serif !important;
	font-weight: 900;
	padding: 10px 0px;
	margin: 0;
}

body, p	{	font-family: 'Georgia', serif !important;		}
#footer { 	font-family: 'Georgia', serif !important;		}

h1		{	font-size: 2em; color: @red;		}
h2		{	font-size: 1.750em; color: @red; 		}
h3		{	font-size: 1.5em; color: @red;	 	}
body, p	{	font-size: 1em; 					}

p	{	padding-bottom: @text-padding; margin: 0;	}

a		{	color: @blue; }
a:hover	{	color: @blue-lt; text-decoration: none;	}

ul {
	list-style-type: square;
	list-style-image: url("list-img.png");
	padding-left: 20px;
}

/* REUSABLE SECTIONS */


.container {
	max-width: 800px;
}

.eq-container {
	position: relative;
	overflow: hidden;
}

.colbor + .colbor {
	border-left: 1px solid #ccc;
}	

.word-break {
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
			hyphens: auto;
}

/* RESUME */
#resume {
	display: block;
	color: @blue;
	border: 1px solid #eee;
	border-radius: 5px;
	padding: 5px 10px;
}

#resume p {
	font-family: 'Futura LT', sans-serif !important;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 18px;
	margin-left: 10px;
	padding: 0px;
}

#resume img {
	max-width: 40px;
	margin-bottom: 0px;
}

#resume * {
	vertical-align: middle;
	display: inline-block;
}

/* HEADER & MAIN */
#main { background-color: white; }
#header { background-color: rgb( 240, 244, 249 ); }

#header { padding-top: @section-padding; }
#main { padding: @section-padding 0px; }


/* LOGO */
#logo img {
	width: 100%;
	max-width: 350px;
	margin-bottom: @text-padding;
}

/* BANNER */
#banner-wrapper {
	width: 100%;
	height: 0;
	padding-bottom: 32.5%;
	position: relative;
	margin-bottom: @section-padding;
}

#banner {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-image: url('image/banner.png');
	overflow: hidden;
}

@media (max-width : 767px) {
	#banner-container {
		margin-left: -15px;
		margin-right: -15px;
	}
}

@media (max-width : 479px) {
	#banner-wrapper {
		display: none;
	}
}

/* CLOCK */
@clock-size: 200px;
@clock-scale: @clock-size / 434px;
#clock {
	position: absolute;
	top: 20px;
	right: 20px;
	width: @clock-size;
	height: @clock-size;
	background: url('image/clock/face.png');
	background-size: cover;
	list-style: none;
}

#sec, #min, #hour {
	position: absolute;
	width: 10px * @clock-scale;
	height: @clock-size;
	top: 0px;
	left: (@clock-size / 2) - (5px * @clock-scale);
	background-size: (10px * @clock-scale) @clock-size;
}

#sec {
	background-image: url('image/clock/second.png');
	z-index: 3;
}

#min {
	background-image: url('image/clock/minute.png');
	z-index: 2;
}

#hour {
	background-image: url('image/clock/hour.png');
	z-index: 1;
}

/* ZEBRA */

@media (max-width : 767px) {
	.zebra {
		background-color: rgb( 248, 248, 248 );
	}
}

/* CASE STUDIES */
.case-study {
	margin-bottom: @section-padding;
	padding-bottom: @section-padding;
	border-bottom: 1px solid #ccc;
}

.case-study:last-child {
	border-bottom: 0px;
}


.case-study img {
	float: left;
}

.case-study a h2:hover {
	color: mix( @red, white, 75%);
}

@media (max-width : 479px) {
	.case-study h2 {
		font-size: 1.5em;
	}
}

/* PROCESS */
#process-img {
	float: left;
	max-width: 320px;
	width: 100%;
}

/* NAVBAR */
#links {
	background-color: @blue;
	
	font-family: 'Futura LT', sans-serif !important;
	font-weight: 900;
	font-size: 18px;
	text-transform: uppercase;
}

#links ul {
	list-style: none;
	text-align: right;
	margin-bottom: 0;
}

#links li {
	display: inline-block;
	margin-right: 20px;
}

#links li a {
	display: inline-block;
	color: white;
	padding: 8px;
}

#links #mobile {
	display: none;
}

@media (max-width : 665px) {
	#links li a {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width : 579px) {

	#links #mobile {
		display: block;
	}
	
	#links #toggle,
	#links li,
	#links li a { 
		margin: 0px -15px;
		padding: 0px 15px;
		border-bottom: 1px solid #eee;
		display: block;
	}
	
	#links #toggle {
		display: none;
	}
	
	#links li a {
		padding: 8px 15px;
	}
	
	#links ul {
		padding-left: 0;
		text-align: left;
	}
	
}



/* FOOTER */
#footer  {
	background-color: @red;
	font-size: 14px;
	text-align: center;
}

#footer .contained {
	padding: 10px 0px;
}

#footer, #footer a {
	color: mix( @red, white, 25%);
}

#footer p {
	padding-bottom: 0;
}

/* COUCHCMS */

body {
	background-color: mix( @red, white, 50%);
}

#couchcms {
	padding: 10px 0px;
	text-align: center;
}

#couchcms a {
	color: @red;
	font-size: 12px;
}

#couchcms p {
	padding-bottom: 0;
}

#photo {
	max-width: 100%;
}

/* MOBILE */
@media (max-width : 599px) {
	.col-about-left {
		width: 41.66666666666667%;
	}
	.col-about-right {
		width: 58.333333333333336%;
	}
}


@media (max-width : 549px) {
	.col-about-left {
		width: 100%;
		text-align: center;
		background-color: rgb( 248, 248, 248 );
	}
	.col-about-right {
		width: 100%;
	}
	
	#photo {
		max-height: 200px;
		width: auto;
	}
}