/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/*------------------------ global ----------------------------*/

body { background-color: rgb(238,245,190); font-family: "apertura", sans-serif; font-weight:400; font-size:62.5%;/*1em = 10px*/  -webkit-text-size-adjust: none; }

.content { float:left; padding-left:3.125%/*30px/960px*/; }
.content.secondary { width:60.4166667%/*580px/960px*/; padding-top:50px; }
.content.leftColTop { float:left; width:43.75%/*420 / 960*/; padding-top:50px; }
.content.leftCol { float:left; width:43.75%/*420 / 960*/; padding-bottom:50px; }
.content.rightColTop { float:right; width:43.75%; padding:50px 3.125% 50px 0; }
#expertise .content.rightColTop { padding:92px 3.125% 50px 0; }
#podcast .content.rightColTop { padding:50px 3.125% 50px 0; }
.content.rightCol { float:right; width:43.75%; padding:50px 3.125% 50px 0; }
.content.rightColVideo { float:right; width:43.75%; padding:140px 3.125% 50px 0; }
.content-pic { float:right; width:28.125%/*270px/960px*/; height:220px; margin:20px 3.125%/*30px/960px*/; }

img { max-width:100%; }

.clear { overflow: hidden; float: none; clear: both; height:0; visibility:hidden; content:"."; display:block; }

a:link, a:visited { color:rgb(188,52,38); text-decoration:none; font-size:15px; }
a:hover { text-decoration:underline; }

.bullet { font-size:20px; color:rgb(188,52,38); margin:0 5px; display:inline-block; }


/*------------------------ typography ----------------------------*/

b { font-weight:bold; }
p { padding-top:0.85em; font-size:15px; line-height:18px; }
p.noPadding { padding-top:0; }
p.top { padding-top:25px; }
p.rightColPrint { padding-top: 60px; }

h1 { font-family:"vinyl", sans-serif; font-weight:400; font-size:60px; }
h2 { font-family:"vinyl", sans-serif; font-weight:400; font-size:40px; color:rgb(188,52,38); }
h2.clients { padding:50px 0 0 3.125%/*30 / 960*/; }
h3 { font-family:"vinyl", sans-serif; font-weight:400; font-size:25px; color:rgb(188,52,38); padding-top:25px; }

ul { margin-bottom: 30px; margin-top: 20px;  }
ul li { padding-top:0.85em; font-size:15px; line-height:18px; padding-top: 0px; list-style: disc; font-family: "apertura", sans-serif; font-weight:400; }

/*------------------------ header ----------------------------*/

#header-wrap { background-color:rgb(238,245,190); width:100%; border-top:10px solid rgb(188,52,38); }
header { max-width:960px; margin:0 auto; }

#logo { float:left; width:20%;/*192px/960px*/ padding:30px 3.125%/*30px/960px*/; }

.replyMessage { background-color:rgb(188,52,38); max-width:500px; margin:18px auto 0; padding:7px 0; text-align:center; color:rgb(255,255,255); font-size:16px; }

nav#desktop { padding-top:3em; }
nav#desktop ul { float:right; padding-right:1.1458333%/*11px/960px*/; }
nav#desktop ul li { display:inline-block; padding:10px 6px 7px 3px; font-size: 1.2em; }
nav#desktop ul li:last-child { border-right:none; }
nav#mobile { display:none; }

nav#desktop a { background-color:rgb(188,52,38); color:rgb(255,255,255); text-transform:uppercase; padding:5px 10px 4px; font-size:1.2em; }
nav#desktop a:hover { color:rgb(208,224,120); text-decoration:none; }

#feature-wrap, #overview-wrap, #expertise-wrap, #podcast-wrap, #hypr-wrap, #news-wrap, #clients-wrap, #contact-wrap { border-top:1px dashed rgb(188,52,38); min-height: 300px; }

/*------------------------ feature ----------------------------*/

#feature-wrap { width:100%; background-color:rgb(218,216,167); }
#feature { max-width:960px; margin:0 auto; }

#feature-pic { float:right; width:36.4583333%/*350px/960px*/; height:250px; margin:3.6em 3.125%/*30px/960px*/; text-align: right; }
.content.feature { width:52.0833333%/*500px/960px*/; }
#feature h1 { letter-spacing:2px; padding-top:1.5em; }

/*------------------------ overview ----------------------------*/

#overview-wrap { width:100%; background-color:rgb(238,245,190); }
#overview { max-width:960px; margin:0 auto; }

/*------------------------ expertise ----------------------------*/

#expertise-wrap { width:100%; background-color:rgb(218,216,167); }
#expertise { max-width:960px; margin:0 auto; }

/*------------------------ podcast ----------------------------*/

#podcast-wrap { width:100%; background-color:rgb(238,245,190); }
#podcast { max-width:960px; margin:0 auto; }

/*------------------------ hypr ----------------------------*/

#hypr-wrap { width:100%; background-color:rgb(218,216,167); }
#hypr { max-width:960px; margin:0 auto; }

/*------------------------ news ----------------------------*/

#news-wrap { width:100%; background-color:rgb(238,245,190); }
#news { max-width:960px; margin:0 auto; }

#news img.print { float:left; border:1px solid rgb(0,0,0); }
#news p.printDesc { float:left; padding:20px 0 20px  4.7619048%/*20 / 420*/; width:59.047619%/*248 / 420*/; }
#news .content.rightCol { padding-top:0; }

/*------------------------ clients ----------------------------*/

#clients-wrap { width:100%; background-color:rgb(218,216,167); }
#clients { max-width:960px; margin:0 auto; }

/*------------------------ contact ----------------------------*/

#contact-wrap { width:100%; background-color:rgb(208,224,120); }
#contact { max-width:900px; margin:0 auto; padding:50px 3.125%/*30px/960*/; }

.contactCol { float:left; width:31.1111111%/*280px/900px*/; margin-right:3.3333333%/*30px/900px*/; }
.contactCol.first { width:25.5555556%/*230 / 900*/; background:rgb(238,245,190); padding:0 2.7777778%/*25 / 900*/ 25px 2.7777778%; text-align:center; }
.contactCol.last { float:left; margin-right:0; }

.social { margin-top:25px; }
.social a { opacity:.8; transition:.2s ease-in; -webkit-transition:.2s ease-in; -moz-transition:.2s ease-in; -o-transition:.2s ease-in; margin-right:30px; }
.social a.right { margin-right:0; }
.social a:hover { opacity:1; }

/*.contactCol.last iframe { height:400px; }*/

/*------------------------ spacers ----------------------------*/

#spacerOne, #spacerTwo, #spacerThree, #spacerFour, #spacerFive, #spacerSix, #spacerSeven, #spacerEight { border-top:1px dashed rgb(188,52,38); }

#spacerOne { border-bottom:8px solid rgb(208,224,120); }
#spacerTwo { border-bottom:18px solid rgb(238,245,190); background-color:rgb(238,245,190); }
#spacerThree { border-bottom:32px solid rgb(238,245,190); }
#spacerFour { border-bottom:16px solid rgb(208,224,120); }
#spacerFive { border-bottom:24px solid rgb(238,245,190); }
#spacerSix { border-bottom:16px solid rgb(208,224,120); }
#spacerSeven { border-bottom:15px solid rgb(238,245,190); }
#spacerEight { border-bottom:24px solid rgb(238,245,190); }
#spacerNine { border-bottom:1px solid rgb(208,224,120); }
#spacerTen { border-bottom:40px solid rgb(208,224,120); }

/*------------------------ Feature Slider ----------------------------*/

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0 auto; width:93.75%/*900 / 960*/; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider { position: relative; zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 400px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}

.flexslider li { list-style:none; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url('flexslider/bg_direction_nav.png') no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

/*------------------------ Wufoo Form ----------------------------*/
	
	form input, form textarea { -webkit-appearance:none; }
	.contactCol form ul { margin:0; }
	.contactCol form li { list-style:none; }
	.contactCol form li input { width:92%/*298 / 320*/; border:1px solid rgb(255,255,255); padding:5px 10px; margin-bottom:10px; color:rgb(188,52,38); font-family:"apertura", sans-serif; font-weight:400; font-size:14px; }
	.contactCol form input:focus { outline:0; border:1px solid rgb(188,52,38); background-color:white; }
	.contactCol form textarea { width:92%; border:1px solid rgb(255,255,255); padding:5px 10px; color:rgb(188,52,38); font-family:"apertura", sans-serif; font-weight:400; font-size:14px; }
	.contactCol form textarea:focus { border:1px solid rgb(188,52,38); outline:0; }
	
	.contactCol form li.buttons { text-align:center; }
	.contactCol form li.buttons input#saveForm { border:none; width:auto; padding:7px 40px 5px 40px; text-transform:uppercase; background-color:rgb(188,52,38); color:rgb(255,255,255); }
	.contactCol form li.buttons input#saveForm:hover { cursor:pointer; color:rgb(208,224,120); }
	
	.contactCol form ul li.hide { display:none; }


/*-----------------------------------------------------------------*/
/*------------------------ media queries ----------------------------*/
/*-----------------------------------------------------------------*/

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

/*------------------------ less than 768px (iPad) ----------------------------*/

@media screen and (max-width: 768px) {

#feature h1 { padding-top:17px; }
nav#normal { padding-top:35px; }

#feature-wrap, #overview-wrap, #expertise-wrap, #podcast-wrap, #hyper-wrap, #news-wrap, #clients-wrap, #contact-wrap { min-height:100px; }

#logo { width:240px; margin:0 auto; float:none; padding:30px 3.125%/*30px/960px*/ 0; }
nav#desktop { padding-top:0; }
nav#desktop ul { float:none; padding:0; text-align:center; }

.content.leftColTop { padding-top:30px; }
.content.leftCol { padding-top:10px; padding-bottom:30px; }
h2.clients { padding-top:30px; }
.content.rightColVideo { padding-top:120px; }

#expertise { padding-bottom:30px; }
#expertise .content.rightColTop { padding-top:72px; }

#news p.printDesc { width:50%; }
#news p.rightColPrint { padding-top: 0; }
#news .content.leftCol, #news .content.rightCol { width:90%; }
#news .content.rightCol { padding:0 5% 40px 5%; }

#contact {  }
#contact { width:93.75%; padding-top:30px; }
}

/*------------------------ less than 480px (iPhone landscape) ----------------------------*/

@media screen and (max-width: 480px) {

/*padding = 5% * 480px = 24px*/

p { font-size:1.6em; padding-top:0.75em; }

header { padding-bottom:1.5em; }

#logo { width:100%/*432px/480px*/; text-align:center; margin:1.5em 0; padding:0; }

.flex-direction-nav .flex-prev {opacity: 1; left: -10px;}
.flex-direction-nav .flex-next {opacity: 1; right: -10px;}
.flexslider:hover .flex-next {opacity: 0.8; right: -5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: -5px;}

nav#normal { display:none; }
nav#iphone-landscape { display:block; text-align:center; font-size:1.2em; }
nav#iphone-landscape a { padding:0 2%; border-right:1px solid black; }
nav#iphone-landscape a.last { border-right:none; }

#feature, #overview, #expertise, #podcast, #hypr, #news, #clients, #contact { padding-top:2.4em; }
#feature-pic { float:none; width:90%/*432px/480px*/; margin:0 auto; }
.content { padding:1.5em 5%/*24px/480*/; }
.content.feature { width:90%/*432px/480px*/; margin:0 auto; }
#feature h1 { padding:0; font-size:5em; }

.content-pic { float:none; width:90%/*432px/480px*/; margin:0 auto; }
.content.secondary { width:90%/*432px/480px*/; padding:1.5em 5% 2.4em 5%; }

#news p.printDesc { width:60%; }
#news p.rightColPrint { padding-top: 0; }

#contact { padding:30px 5%/*24px/480px*/; width:90%; margin:0; }
.contactCol { width:76%; margin:0 11% 2em 11%; }
.contactCol.first { width:75%; margin:0 11% 30px; padding:0 0 25px; }
.contactCol.first h3 a { font-size:24px; padding-top:25px; color:black; }
.contactCol.last { margin-bottom:0; width:75%; }

.content.leftColTop { width:90%/*432 / 480*/; padding:30px 5% 0; }
.content.rightColTop { width:90%/*432 / 480*/; padding:15px 5% 30px 5%; float:left; }
#expertise .content.rightColTop { width:90%/*432 / 480*/; padding:15px 5% 30px 5%; }
.content.rightColVideo { width:90%/*432 / 480*/; padding:0 5%; }

}

/*------------------------ less than 320px (iPhone portrait) ----------------------------*/

@media screen and (max-width: 320px) {

nav#iphone-landscape { display:none; }
nav#normal { display:none; }
nav#iphone-portrait { display:block; text-align:center; font-size:1.2em; }
nav#iphone-portrait ul li { display:inline-block; padding:0 2%; border-right:1px solid rgb(0,0,0); }
nav#iphone-portrait ul li:last-child { border:none; margin:1em 0 0 0; }

#feature, #overview, #expertise, #podcast, #hypr, #news, #clients, #contact { padding-top:1.6em; }
.content.secondary { padding:1.5em 5% 1.6em 5%; }

#news p.printDesc { width:100%; text-align:center; padding:20px 0; }
#news p.rightColPrint { padding-top: 0; }
#news p { text-align:center; }
#news img.print { float:none; }

#contact { padding:1.6em 5%/*24px/480px*/; }
.contactCol { width:100%/*of 450px*/; margin:0 0 1.6em 0; }

iframe { height:200px; }

.contactCol { width:97%; margin:0 1.5% 2em 1.5%; }
.contactCol.first { width:97%; margin:0 1.5% 30px; padding:0 0 25px; }
.contactCol.first h3 a { font-size:24px; padding-top:25px; color:black; }
.contactCol.last { margin-bottom:0; width:97%; }

}