/* CSS Document */

/* -- allows for transparent gifs and pngs start -- */
img {
	behavior: url(../css/iepngfix.htc);
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), url('../fonts/Raleway-Light.ttf') format('woff');
}
@font-face {
  font-family: 'Raleway-Bold';
  font-style: normal;
  font-weight: 900;
  src: local('Raleway-Bold'), url('../fonts/Raleway-Bold.ttf') format('woff');
}
@font-face {
  font-family: 'Raleway-ExtraBold';
  font-style: normal;
  font-weight: 900;
  src: local('Raleway-ExtraBold'), url('../fonts/Raleway-ExtraBold.ttf') format('woff');
}

body {
	background: url(../images/bg-texture.jpg) repeat center bottom;
	background-color: #FFF;
	font: 16px 'Raleway', Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	height: 100%; /* needed for fixing footer to bottom of page */
}
div, h1, h2, h3, h4, h5, h6, form, label, input, span, ul, li, p, a{
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
.spacer {
	font-size: 0;
	line-height: 0;
	clear: both;
}
a:hover, a:active, a:focus {
	outline: none; /* a:focus is the rectangular box that appears around a link when using the tab key; setting outline to none removes it */
}

#page {
	min-height: 100%; /* needed to fix footer to bottom of page */
	position: relative; /* needed to fix footer to bottom of page */
}

h1.maintitle {
	margin-top: 20px;
	font-family: 'Raleway-ExtraBold', Helvetica, sans-serif;
	font-size: 28px;
}


/* -- header start -- */
header {
	padding-top: 0px;
}
header .logo {
	top: 0;
	width: 264px;
	height: 72px;
	display: block;
	position: absolute;
	margin: 0 auto;
	padding-left: 20px;
	text-align: left;
	z-index: 1; /* required for logo to be clickable in some browsers */
}
@media screen and (max-width:979px){
header .logo {
	padding-top: 10px;
	position: relative;
}
}
/* -- header end -- */


/* -- nav start -- */
#nav {
	top: 0px;
	min-width: auto;
	display: block;
	list-style: none;
	margin: 0 auto;
	padding-left: 10px;
	font: 400 14px 'Raleway', Helvetica, sans-serif;
	text-align: center;
}
@media screen and (max-width:1312px){
#nav {
	padding-left: 270px;
}
}
@media screen and (max-width:979px){
#nav {
	padding-left: 30px;
	text-align: center;
}
}
#nav a {
	display: inline-block;
	padding: 10px;
}
#nav a, nav a:active, nav a:visited {
	display: inline-block;
	color: #333;
	text-decoration: none;
}
#nav ul {
	position: absolute;
	left: -9999px;
	margin: 0;
	padding: 0;
	text-align: left;
	list-style-type: none; /* necessary for IE6 and IE7 not to show bullets */
}
#nav ul a {
	white-space: nowrap;
	display: block;
	border-bottom: 1px solid #333;
}
#nav ul li {
	display: block;
	color: #808080;
}
nav ul li a {
	display: inline-block;
	font-weight: normal;
	font-size: 14px/20px;
	text-decoration: none;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
nav ul li a:hover {
	color: #FFF;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
#nav li {
	position: relative;
	display: inline;
	color: #000;
}
#nav li:hover a{
	color: #FFF;
	background: #a90329;
/*	background: #6d0019; */
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
#nav-ie6 {
	display: none;
}
/* -- nav end -- */

/* -- article start -- */
article {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding-top: 10px;
	font: normal 16px 'Raleway', Helvetica, sans-serif;
	color: #000;
	text-align: center; /* centers inner divs when they have display property of inline-block */
	padding-bottom: 30px; /* height of the footer */
}

/* Image Glow Effect */
.about img, .clients .logo img, .testimonials-column1 .testimony .stars img, .testimonials-column2 .testimony .stars img {
	opacity: 1;
	/*Reflection*/
	-webkit-box-reflect: below 0 px -webkit-gradient(linear, left top, left bottom, from(transparent), color - stop(.7, transparent), to(rgba(0, 0, 0, 0.4)));
	/*Glow*/
	-webkit-box-shadow: 0 px 0 px 20 px rgba(255, 255, 255, 0.8);
	-moz-box-shadow: 0 px 0 px 20 px rgba(255, 255, 255, 0.8);
	box-shadow: 0 px 0 px 20 px rgba(255, 255, 255, 0.8);
}
.clients .logo img:hover, .testimonials-column1 .testimony .stars img:hover, .testimonials-column2 .testimony .stars img:hover {
    margin: 25 px;
	opacity: 0.8;
	border: 10 px solid #eee;
    /*Transition*/
    -webkit-transition: all 0.5 s ease;
	-moz-transition: all 0.5 s ease;
	-o-transition: all 0.5 s ease;
	/*Reflection*/
	-webkit-box-reflect: below 0 px -webkit-gradient(linear, left top, left bottom, from(transparent), color - stop(.7, transparent), to(rgba(0, 0, 0, 0.1)));
}

/* About */
.about {
	display: block;
	max-width: 1280px;
	margin: 0 auto; /* centers content on page */
	padding: 20px 75px 0px 75px;
	overflow: auto; /* clearfix */
}
.about p {
	color: #000;
	font-size: 16px;
	padding-bottom: 15px;
	text-align: justify;
}
.about a, .about a:active, .about a:visited {
	color: #a90329;
}
.about a:hover {
	color: #6d0019;
}
.about .image-with-overlay {
	width: 720px;
/*  width: 600px; for '../images/tonylam-milezero.jpg' */
    height: 483px;
/*  height: 568px; for '../images/tonylam-milezero.jpg' */
	margin: 0 30px 20px 0;
	background: url('../images/tonylam-camera.jpg');
	float: left;
	clear: left;
}
.about .image-with-overlay2 {
    width: 1280px;
    height: 480px;
	margin-top: 10px;
	background: url('../images/tonylam-pch.jpg');
}
.about .image-with-overlay, .about .image-with-overlay2 {
    display: block;
    position: relative;
	z-index: 0;
}
.about .image-with-overlay:after, .about .image-with-overlay2:after { 
    content: '';
    background: transparent url('../images/pattern-30.png') repeat top left;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}
.about .photo, .about .photo2 {
	display: none;
}
@media screen and (max-width:1439px) {
.about .image-with-overlay, .about .image-with-overlay2 {
	display: none;
}
.about .photo {
	display: block;
	text-align: center;
	float: left;
	padding-bottom: 15px;
}
.about .photo .textwrap {
	float: left;
	clear: left;
	margin: 0 0px 10px 0;
}
.about .photo2 {
	display: block;
	padding-top: 10px;
}
.about img {
	max-width: 100%; /* responsive design for image */
	height: auto; /* responsive design for image */
}
}
@media screen and (max-width:1082px) {
.about .photo {
	float: none;
	padding-bottom: 20px;
}
.about .photo .textwrap {
	float: none;
	clear: none;
	margin: 0 0 10px 0;
}
}

/* Case Study */
/* See work.css */

/* Services */
.services {
	display: block;
	margin: 0 auto; /* centers content on page */
	padding: 20px 75px 0px 75px;
	max-width: 1280px;
	overflow: auto;
}
.services h2.description, .services h2.types {
	font-family: 'Raleway-Bold', Helvetica, sans-serif;
	font-size: 24px;
	color: #000;
	text-align: center;
}
.services h2.description {
	padding-bottom: 5px;
}
.services h2.types {
	padding-bottom: 20px;
}
.services .textwrap {
	margin: 0 30px 20px 0;
	float: left;
	clear: left;
}
.services .textwrap2 {
	margin: 0 0 20px 30px;
	float: right;
	clear: right;
}
.services img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
.services p {
	width: auto;
	font-family: 'Raleway', Helvetica, sans-serif;
	color: #000;
	line-height: 20px;
	text-align: justify;	
}
.services .intro {
	margin-top: 30px;
	padding-bottom: 0px;
	font-size: 16px;
}
.services .heading {
	font-family: 'Raleway-Bold', Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	text-align: left;
	padding-bottom: 12px;
}
.services .heading a, .services .heading a:hover {
	color: #000;
}
.services .description {
	display: block;
	margin: 0 auto 20px auto;
	color: #000;
	font-size: 16px;
}
.services .allcaps {
	text-transform: uppercase;
	font-weight: bold;
}
.services a, .services a:active, .services a:visited {
	color: #a90329;
}
.services a:hover {
	color: #6d0019
}
@media screen and (max-width:1279px) {
.services {
	padding-top: 10px;
}
.services h2.description {
	padding-bottom: 0px;
}
.services h2.types {
	padding-bottom: 15px;
}
.services .textwrap, .services .textwrap2 {
	float: none;
}
}

/* Clients */
.clients {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
}
.clients .logo {
	display: inline-block; /* centers divs on page when outer div container has text-align property of center */
	margin: 15px;
	margin-top: 0;
	padding: 10px;
}
.clients img {
	max-width: 100%; /* responsive design for image */
	height: auto; /* responsive design for image */
}

/* TVSpots */
.tvspots {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.tvspots h2 {
	font-family: 'Raleway', Helvetica, sans-serif;
	font-size: 22px;
	color: #000;
	padding-top: 10px;
	padding-bottom: 20px;
	text-align: center;
	line-height: 25px;
}
.tvspots .description {
	width: 80%;
	margin: 0 auto;
	padding-bottom: 30px;
}
.tvspots .rolemodels {
	display: inline-block; /* centers divs on page when outer div container has text-align property of center */
	margin: 10px;
	margin-top: 0;
	padding: 0px;
	vertical-align: top;
}
.tvspots .rolemodels .titles {
	width: 360px;
	font: 14px 'Raleway', Helvetica, sans-serif;
	padding-top: 10px;
	line-height: normal;
}

/* Testimonials */
.testimonials-column1,
.testimonials-column2 {
		display: block;
		margin: 0 auto;
		width: 45%;
		padding: 30px 30px 40px 20px;
}
.testimonials-column1 {
		float: left;
}
.testimonials-column2 {
		float: right;
}
.testimonials-column1 p,
.testimonials-column2 p {
	color: #666;
	line-height: 23px;
	padding-bottom: 10px;
	text-align: justify;
}
.testimonials-column1 a, .testimonials-column1 a:active, .testimonials-column1 a:visited,
.testimonials-column2 a, .testimonials-column2 a:active, .testimonials-column2 a:visited {
	color: #a90329;
}
.testimonials-column1 a:hover,
.testimonials-column2 a:hover {
	color: #6d0019
}
.testimonials-column1 .testimony,
.testimonials-column2 .testimony {
	display: block;
	margin: 0 auto;
	padding: 0 30px 40px 20px;
}
.testimonials-column1 .testimony .title,
.testimonials-column2 .testimony .title {
	padding-top: 15px;
	padding-bottom: 10px;
	font-size: 18px;
	font-weight: normal;
}
.testimonials-column1 .testimony .quotations,
.testimonials-column2 .testimony .quotations {
	float: left;
	margin-right: 15px;
}
.testimonials-column1 .testimony .quote,
.testimonials-column2 .testimony .quote {
	display: block;
	padding: 10px 0 0 40px;
	font-size: 16px;
	color: #666;
}
.testimonials-column1 .testimony .highlight,
.testimonials-column2 .testimony .highlight {
	text-transform: uppercase;
	font-size: 18px;
	color: #000;
}
.testimonials-column1 .testimony .stars,
.testimonials-column2 .testimony .stars {
	display: block;
	padding: 10px 0 5px 40px;
	margin: 0 auto;
}
.testimonials-column1 .testimony .author,
.testimonials-column2 .testimony .author {
	padding-top: 10px;
	padding-left: 40px;
	font-size: 16px;
	text-align: right;
}
.testimonials-column1 .testimony .allcaps,
.testimonials-column2 .testimony .allcaps {
	text-transform: uppercase;
	font-weight: bold;
}
@media screen and (max-width:1125px) {
.testimonials-column1,
.testimonials-column2 {
	width: 90%;
	padding: 20px 20px 40px 20px;
	float: none;
}
.testimonials-column1 .testimony,
.testimonials-column2 .testimony {
	padding-bottom: 20px;
}
.testimonials-column1 .testimony .stars,
.testimonials-column2 .testimony .stars {
	padding-top: 5px;
	padding-bottom: 0px;
}
.testimonials-column1 .testimony .author,
.testimonials-column2 .testimony .author {
	padding-top: 15px;
}
}

/* Crooked Image Effect */
.testimonials-column1 .testimony .quotations img,
.testimonials-column2 .testimony .quotations img {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; }
.testimonials-column1 .testimony .quotations img:hover,
.testimonials-column2 .testimony .quotations img:hover {
	-webkit-transform: rotate(-9deg);
	-moz-transform: rotate(-9deg);
	-o-transform: rotate(-9deg);
}

.rates {
	display: block;
	margin: 10px auto 0 auto; /* centers content on page */
	width: 960px;
}
.rates h2 {
	font-family: 'Raleway-Bold', Helvetica, sans-serif;
	font-size: 24px;
	color: #000;
	padding-top: 30px;
	padding-bottom: 10px;
	text-align: center;
}
.rates p {
	width: auto;
	padding: 15px 75px 10px 75px;
	font-size: 16px;
	color: #000;
	line-height: 20px;
	text-align: justify;
}
.rates .heading {
	padding-top: 25px;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
.rates .note {
	width: 50%;
	margin: 0 auto;
	margin-top: -15px;
}
.rates .fill {
	height: 460px; /* pushes footer below form */
}
.rates ul {
	width: auto;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
}
.rates li {
	margin: 0 auto;
	padding: 8px 0 12px 0;
	font-size: 16px;
	color: #000;
	width: 600px;
}
.rates a, .rates a:active, .rates a:visited {
	color: #a90329;
}
.rates a:hover {
	color: #6d0019;
}

@media screen and (max-width:970px){ /* this rule will come into play when the browser screen is less than 630px */
.rates {
	width: auto;
	overflow-x: hidden;
}
.rates p {
	padding: 15px 40px 10px 40px;
}
.rates li {
	width: auto;
}
}
/* -- article end -- */

/* -- footer start -- */
#footer {
	display: inline-block;
	position: relative;
	bottom: 0;
	width: 100%;
	height: 30px; /* height of the footer */
	background: transparent;
	font: normal 14px 'Raleway', Helvetica, sans-serif;
	color: #808080;
	text-align: center;
}
#footer a {
	color: #808080;
}
/* -- footer end -- */

@media screen and (max-width:360px){
header .logo {
	padding-left: 0px;
}
#nav {
	padding-left: 0px;
	text-align: center;
}
#page {
	overflow-x: hidden;
}
h1.maintitle {
	width: 350px;
	margin-top: 0px;
}
.about {
	padding: 0px 25px 0px 25px;
}
.about .photo {
	padding-bottom: 0px;
}
.clients {
	width: 100%;
	margin: 0px;
	padding: 0px;
}
.services {
	padding: 5px 25px 0px 25px;	
}
.services h2.types {
	padding-top: 10px;
}
.services .textwrap,
.services .textwrap2 {
	margin-bottom: 15px;
}
.testimonials-column1,
.testimonials-column2 {
	width: 100%;
	margin: 0px;
	padding: 0px;
}
.testimonials-column1 .testimony,
.testimonials-column2 .testimony {
	margin: 0px 25px 0px 0px;
	padding: 0px;
}
.tvspots .rolemodels {
	margin: 0px;
}
.tvspots .rolemodels .titles {
	width: 90%;
	margin-left: 18px;
}
#footer {
	width: 340px;
	padding-left: 10px;
	padding-bottom: 20px;
}
}