/*  HTML5 ✰ Boilerplate  */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, images, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;

}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body { font:13px/1.231 sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 0px; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

em { font-style: italic; }
/**
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } **/
a:link { -webkit-tap-highlight-color: #FF5E99; }

button {  width: auto; overflow: visible; }
.ie7 images { -ms-interpolation-mode: bicubic; }

body, select, input, textarea {  color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
p a, p a:active { padding: 0 3px; }
p a:hover, p a:visited {  }

#footer .social div.twitter span.tweet a { background: #F53427; padding: 0 3px; }
#footer .social div.twitter span.tweet a:hover { background: #c42a1f; }

/** End boilerplate **/

h2 { font-size: 55px; float:left; line-height:55px; }
.odd h2 {color:#fff; }
.even h2 {color:#000; }
section .content h2 { padding-top: 25px; font: 900 78px/52px "proxima-nova", "Futura", "Arial", arial,sans-serif; }
h2, nav a { text-transform: uppercase; font-family: 'Michroma', sans-serif; font-weight: bold; }
h3 { font: 800 26px/26px "proxima-nova", "Arial Black", arial, sans-serif; text-transform:uppercase; padding: 13px 0 32px; }
h4 { font: 22px/24px "proxima-nova", "Arial Black", arial, sans-serif; padding-top: 10px; }
a { color: green; text-decoration: none;}
p, .tweet li { font: 18px/26px georgia, "times new roman", sans-serif; padding: 10px 0px 15px;}
p em { background: #f53427; padding: 0 3px; font-style: normal; }
ul { list-style:none; }
h2.flame { background: url('../images/flame.png') right bottom no-repeat; padding-right: 28px; }


#logo { float:left; background: url('../images/hg-logo.png'); width: 219px; height: 42px; margin: 30px 0 0; }
.content { width:960px; margin:0px auto;  }
.nav-wrapper   {position:absolute; top:0; width:100%;}
.nav-container { width:1010px; margin:0px auto; position:relative; clear:both; position:relative; z-index:1000; top:0px;}
/*.nav-container { width: 960px; margin: 0 auto; overflow: hidden; }*/
#nav-primary { margin:0px 0 0 35px; float: left; }
#nav-primary a { color:#000000;
  font-family: 'eurostileregular';
  font-size:18px;
  font-weight:bold;}
#nav-primary li { float: left; margin-left: 20px; }
#nav-primary li a:hover { color: #f53427; } 
section{}
.button { display:inline-block; background: url('../images/btn-red.png') no-repeat 0 0; padding: 7px 15px 6px 25px; margin-top: 15px; font-weight: bold; text-transform: uppercase; font: 600 17px/17px "proxima-nova", "Futura", "Arial", sans-serif; border: none; color: #fff; }
.button:hover { background-position: 0 -29px; color:#fff !important;}
button.button { height: 29px; }


/**Slider General **/
.slider {margin: 0 auto; padding: 0px}
.slider li {width:100%; height:702px !important;}
.slider .text { width: 420px; padding-top: 100px;}
.slider .text h2 { font: 800 72px/72px "proxima-nova", "Arial Black", arial, sans-serif; padding-top: 10px;}
.controls { position: static; bottom: 30px; right: 20px; z-index: 10; left:80% }
.controls a {background:url('../images/bg-arrows.gif'); color: #fff; font: 15px/15px "Arial Black", arial, sans-serif; cursor: pointer; width: 40px; height: 74px; position: absolute; top: 50%; right: 0; }
.controls a.prev { background-position: left top; right: auto; left: 0; }
.controls a.prev:hover { background-position: left -74px;}
.controls a.next { background-position: right top;}
.controls a.next:hover { background-position: right -74px;}
.controls a.next-off { background-position: right -148px !important; cursor: default; }
.controls a.prev-off { background-position: left -148px !important; cursor: default; }


/**Top slides **/
section#top { position: relative; top:50px; width: 100%; overflow: hidden;}
section#top h2.flame { background-position: right 114px; font: 800 132px/132px "proxima-nova","Arial Black",arial,sans-serif; color: #000; }
section#top p { margin: 0 0 0 720px; font: 25px/32px georgia,"times new roman",sans-serif; color: #000; clear: both; }
section#top .button { margin: 0 0 0 720px; }
section#top ul li {width: 100%; position: absolute; background-position: center bottom; }
section#top .slide-1 .text { width: auto; padding-top: 285px; float:left; }
section.top .slide-1{ background: url('../images/bg-top-1.jpg') no-repeat; }
section.top .slide-2{ background: url('../images/top-photo2.jpg') no-repeat; }
section.top .slide-3{ background: url('../images/top-photo3.jpg') no-repeat; }

section.top .bg-1 { background: url('../images/bg-top-1.jpg') center bottom no-repeat; }
section.top .bg-2 { background: url('../images/bg-top-2.jpg') center bottom no-repeat; }
section.top .bg-3 { background: url('../images/bg-top-3.jpg') center bottom no-repeat; }
section.top .bg-4 { background: url('../images/bg-top-4.jpg') center bottom no-repeat; }
section.top .bg-5 { background: url('../images/bg-top-1.jpg') center bottom no-repeat; }

section.top li { display: none; }
section.top li.on { display: block; }
section.top .controls { z-index: 100; }

section#grillo { height: auto; width:900px; position: relative; padding-left: 3px; overflow: hidden;}
section#grillo .content { position: relative; width: 100%; height: 500; overflow: hidden; }
section#grillo h2 { color: #fff; background-image: url('../img/flame-alt.png'); }
section#grillo h3 { color: #fff; padding: 55px 0 0; margin: 0 0 0 515px; color: #fff; font-weight: 300; font-family: "Georgia", "Times New Roman", serif; text-transform: none; }

section#grillo ul.peek-list { clear: both; padding: 55px 0 0; overflow: hidden; }
section#grillo ul li { width: 1100px; height: 500; overflow:hidden; margin: 0 12px 12px 0; background: white; text-align: center; position: relative;}
section#grillo ul li img { height: 500px; margin: 0 auto; display: block; width: auto; text-align: center; }
section#grillo ul li.split { clear: right; }
section#grillo .text { width: 400px; padding-top: 200px; float:left; }
section#grillo li {  }
section#grillo li.on { opacity: 1; }
section#grillo .controls { z-index: 100; }
section#grillo em{clear:both; display:block;}

section#grillo .inner { width: 960px; margin: 0 auto; }

section#grillo .video-box { display: none; }

/**Work slides **/

section #work-slider .work-slide { padding: 0 0 50px; }
section #work-slider .work-slide .text { width: 400px; padding-top: 200px; float:right; }
section #work-slider .work-slide p.services { font-size: 14px; line-height: 19px; }

section#work .work-slide .content { background: transparent; margin: 0; }
section#work .work-slide .text { width: 385px; padding: 15px 0 0; }
section#work .work-slide .text h2, section#company .text h2 { font-size: 40px; text-transform: none; line-height: 40px; font: 40px/40px "proxima-nova", "Arial Black", "Arial", sans-serif; }
section#work .work-slide .text h2{ float: none; padding-top: 10px; }
.work-slide .inner-slider { float: left; width: 575px; }
.work-slide .inner-slider .dot-content { background: url('../images/bg-work.png') 0 0 no-repeat; height: 430px; position: relative; margin: 30px 0 0; }
.work-slide .inner-slider .dot-content div { display: none; position: absolute; left: 20px; top: 21px; z-index: 1; }
.work-slide .inner-slider .dot-content div.current { display: block; }

.work-slide .inner-slider .dot-points { overflow: hidden; width: 60px; margin: 0 auto; padding: 18px 0 0; }
.work-slide .inner-slider .dot-points div { float: left; width: 10px; height: 0; padding: 10px 0 0; overflow: hidden; background: url('../images/bg-dots.png') 0 0 no-repeat; margin: 0 5px; }
.work-slide .inner-slider .dot-points div.current { background-position: -10px 0; }


/** general section styles **/
section {}
section .left { width: 635px; float: left; }


/** section specific styles **/
section#company ul.peek-list { clear: both; padding: 55px 0 0; }
section#company ul li { float: left; width: 900px; height: 500px; overflow: hidden; margin: 0 12px 12px 0; background: white; text-align: center; }
section#company ul li images { height: 500px; margin: 0 auto; display: block; width: auto; text-align: center; }
section#company{ background: url('../images/bg-pattern-black.png') repeat; color: #fff; overflow: hidden; top:120px; }
section#company nav a{ color: #fff; }
section#company nav a.on { color: #f53427; }
section#company p { font: 23px/32px georgia,"times new roman",sans-serif; }
/*section#company .content, section#work .content, section#company .content { background: url('../images/bg-top-stripe-red.png') no-repeat; }*/
section#company .video-content .text { width:220px; float:left; margin: 100px 85px 0px 0px; }
section#company .fact { margin-top:20px; width: 282px; height: 282px; float: right; color: #000; text-align: center; padding: 0; }
section#company .fact li { display: none; }
section#company .fact li.current { display: block; }
section#company .fact p { font: bold 26px/25px "proxima-nova", "Arial Black", arial, sans-serif; text-transform: uppercase; letter-spacing: -1px; display: inline-block; width: 198px; vertical-align: middle; }
section#company .fact images { vertical-align: middle; }
section#company a.factsheet { background: url('../images/icon-factsheet.png') 0 0px no-repeat; padding: 5px 0 0 40px; height: 26px; color: #F53427; text-transform: uppercase; font: bold  13px/13px "proxima-nova", "Arial Black",'arial bold', arial, sans-serif; display:inline-block;}



section#work { background: url('../images/bg-pattern-white.png') repeat; padding-bottom:0px; }
section#work a:hover { color: #f53427; }
section#work .clients-content images { float:left; margin: 10px; }
section#work .industry-selector { float:right; margin: -40px 15px 0 0;}
section#work label { display:inline-block; float:left; font: bold 13px/13px "proxima-nova", "Arial Black", arial, sans-serif; color:#000; text-transform:uppercase; margin-right: 15px; padding:2px 0px;}
section#work .customStyleSelectBox{ background: url('../images/bg-dropdown.png') right 0px no-repeat;  text-align:left; width: 163px; color:#fff; padding: 4px 5px 2px; text-transform:uppercase; height:14px; font: bold 13px/13px "proxima-nova", "Arial Black", arial, sans-serif; margin-top:-2px;} 
section#work select{ width:175px; margin-top:-2px;}

section#clients { background: url('../images/bg-pattern-white.png') repeat; padding-bottom: 80px; }
section#clients .clients-content { clear: both; }
section#clients .clients-content ul.clients-list li { display: inline; position: relative; }
section#clients .clients-content images { margin: 0 0 12px 16px; background: #fff; height: auto; width: 87px; }
section#clients h3, section#meet-us h3 { font: 23px/32px georgia,"times new roman",sans-serif; clear: both; text-transform: none; }

/*   test client images for new site   */
section#clients .clients-content ul.clients-list li images.preview	{ display:none; position:absolute; left:100px; height:200px; width:300px; z-index:1000; }
section#clients .clients-content ul.clients-list li a { display:inline-block; height:62px; width:87px; background-position: top left; background-repeat: no-repeat; margin:0 0 12px 15px; }
section#clients .clients-content ul.clients-list li a:hover { background-position: bottom left; }
section#clients .clients-content ul.clients-list li a.espn { background-image:url(../images/logos-sprite/espn.png); }
section#clients .clients-content ul.clients-list li a.irrational { background-image:url(../images/logos-sprite/irrational.png); }


/*   end test client images for new site   */


section#thinking{ background: url('../images/bg-pattern-red.png') repeat;}
section#thinking .content { background: url('../images/bg-top-stripe-white.png') no-repeat; }
section#thinking h2, section#thinking p{ color:#fff; }
section#thinking .content ul li { float:left; width: 260px; margin:10px 60px 0 0; color:#fff;}
section#thinking .button { background: url('../images/btn-white.png') no-repeat 0 0; color:#000; }
section#thinking .button:hover { background-position: 0 -30px; color:#000 !important;}
section#thinking .tweet { min-height: 163px;}
section#thinking .tweet_list li { padding-bottom:13px; }

/*section#company { padding-bottom:0px; }
section#company li .content { background: none; }
section#company li .content h2{ display:block; float: none;}*/

section#company a.play-video { position: absolute; width: 255px; height: 255px; left: 50%; margin: 0 0 0 -118px; top: 279px; background: url('../images/bg-video-play.png') -300px 0 no-repeat; }
section#company a.play-video:hover { background-position: 0 0; }


section#meet-us { background: url('../images/bg-pattern-black.png') 0 bottom repeat #000; position: relative; padding: 100px 0 0; }
section#meet-us h2 { float:none; display:inline-block; font: 900 79px/55px "proxima-nova", "Futura", "Arial", sans-serif; }
section#meet-us h2, section#meet-us p{ color: #fff; }
section#meet-us h3 { color: #fff; }
section#meet-us li p { font-size: 16px; }
section#meet-us h2 span.text { color: #959595; position:relative; }
section#meet-us h2 span.text .strike { position: absolute; width: 100%; background: #f53427; height: 13px; left: 0; top: 46%; }
section#meet-us .content ul li  { float:left; width: 210px; margin:10px 24px 0 0; color:#fff;}
/*section#meet-us .content .chicklets a{ display: inline-block; margin-top:10px; }*/
section#meet-us .footer { position:absolute; bottom: 20px; width: 960px; }
section#meet-us .footer .copyright { color:#959595; font: normal 14px "Georgia", "Times", "Times New Roman", serif;  }
section#meet-us .footer form { float: right; margin-top: -20px;}
section#meet-us .footer form input { color:#252525; font: normal 16px "Georgia", "Times", "Times New Roman", serif; height:20px; float: left; }
section#meet-us .footer form button { display:inline-block; background: url('../images/btn-submit.png') no-repeat right 0; padding: 7px 25px 6px 15px; float:left; font-weight: bold; text-transform: uppercase; color:#fff; border:0px; }
section#meet-us .footer form button:hover { background-position: right -29px; color:#fff !important;}

#footer { overflow: hidden; padding: 20px 0 0; }
#footer .social { width: 375px; margin: 0 0 0 516px; }
#footer .social div.twitter { background: url('../images/icon-tweet.png') 0 0 no-repeat; padding: 44px 0 0; }
#footer .social div.twitter span.tweet_text { font-style: italic; }
#footer .social div.twitter span.tweet a { background: #F53427; padding: 0 3px; }
#footer .social div.twitter span.tweet a:hover { background: #c42a1f; }
#footer .social div.twitter span.time { display: block; font: normal 14px/14px "Georgia", "Times New Roman", serif; padding: 3px 0 4px; }
#footer .social div.twitter a.button { font-size: 14px; }
section#meet-us #footer .tweet_list li { float: none; width: auto; margin: 0; padding: 17px 0 5px 3px; }
#footer .social {  }
#footer .social dl { padding: 43px 0 0; }
#footer .social dt { color: #fff; text-transform: uppercase; font: 800 26px/26px "proxima-nova", "Futura", "Arial", sans-serif; }
#footer .social dd { padding: 20px 0 0; }
#footer .social dd ul { overflow: hidden; }
section#meet-us #footer .social dd li { width: 39px; height: 39px; float: left; margin: 0 5px 0 0; }
#footer .social dd li a { width: 39px; height: 0; padding: 39px 0 0; background: url('../images/bg-social.png') 0 0 no-repeat; display: block; overflow: hidden; color: #000; }
#footer .social li.twitter a { background-position: -44px 0; }
#footer .social li.linkedin a { background-position: -88px 0; }
#footer .social li.google a { background-position: -132px 0; }
#footer .social li.fr a { background-position: -175px 0; }
#footer .social li.youtube a { background-position: -218px 0; }

#footer .social li.facebook a:hover { background-position: 0 -39px; }
#footer .social li.twitter a:hover { background-position: -44px -39px; }
#footer .social li.linkedin a:hover { background-position: -88px -39px; }
#footer .social li.google a:hover { background-position: -132px -39px; }
#footer .social li.fr a:hover { background-position: -175px -39px; }
#footer .social li.youtube a:hover { background-position: -218px -39px; }

#footer .fields { overflow: hidden; }
#footer fieldset { float: left; width: 220px; margin: 0 0 15px; }
#footer fieldset.first { padding: 0 20px 0 0; }
#footer label { color: #939393; font: normal 18px/18px "Georgia", "Times New Roman", serif; display: block; padding: 0; }
#footer input { width: 218px; font: normal 14px/14px "Georgia", "Times New Roman", serif; display: block; border: none; background: #fff; padding: 5px 0; margin: 8px 0 15px; }
#footer select { width: 216px; padding: 4px 0; margin: 8px 0 15px; }
#footer textarea { width: 449px; height: 101px; padding: 5px; margin: 8px 0 15px; }
#footer .contact-form { width: 460px; float: left; }
#footer button.button { font-size: 14px; float: right; margin: 17px 0 0; }
section#meet-us .contact-form h2 { font-size: 40px; color: #fff; font-weight: 600; }

.contact-info { background: #f53427; padding: 70px 0; margin: 100px 0 0; }
.contact-info .inner { width: 960px; margin: 0 auto; overflow: hidden; }
section#meet-us .contact-info h2 { font-size: 40px; line-height: 40px; font-weight: 600; text-transform: none; }
section#meet-us .contact-info h2 a:hover { text-decoration: underline; }
.contact-info h6 { font: normal 16px/16px "Georgia", "Times New Roman", serif; color: #fff; padding: 23px 0 0; }
.contact-info address { font: normal 18px/25px "Georgia", "Times New Roman", serif; float: right; color: #fff; }



#meet-us .chicklets .social { overflow: hidden; padding: 17px 0 0; }
#meet-us .chicklets .social li { float: left; list-style-type: none; padding: 0 0 0 9px; position: relative; margin: 0; width: auto; }
#meet-us .chicklets .social li.behance { padding: 0; }
#meet-us .chicklets .social li a { width: 31px; height: 0; padding: 31px 0 0; overflow: hidden; display: block; }
.chicklets .social li.behance a { background: url('../images/icon-footer-behance.png') 0 0 no-repeat; }
.chicklets .social li.tumblr a { background: url('../images/icon-footer-tumblr.png') 0 0 no-repeat; }
.chicklets .social li.linkedin a { background: url('../images/icon-footer-linkedin.png') 0 0 no-repeat; }
.chicklets .social li.facebook a { background: url('../images/icon-footer-facebook.png') 0 0 no-repeat; }
.chicklets .social li.twitter a { background: url('../images/icon-footer-twitter.png') 0 0 no-repeat; }

.chicklets .social li.behance a:hover { background-position: 0 bottom; }
.chicklets .social li.tumblr a:hover { background-position: 0 bottom; }
.chicklets .social li.linkedin a:hover { background-position: 0 bottom; }
.chicklets .social li.facebook a:hover { background-position: 0 bottom; }
.chicklets .social li.twitter a:hover { background-position: 0 bottom; }



.super-nav .logo { float: left; background: url('http://www.guideusa.net/clients/grillos/images/pickle-logo.jpg'); width: 24px; height: 28px; margin: 4px 0 0; }
.super-nav { position: fixed; top: 0; left: 0; width: 100%; height: 42px; background: #fff; display: none; }
.super-nav .inner { float:left;
  font-size:14px;
  font-style:normal;
  font-variant:normal;
  font-weight:600;
  line-height:14px;
  margin:0 auto;
  overflow:hidden;
  text-transform:uppercase;
  width:1080px; }
.super-nav ul { overflow: hidden; float: right; padding: 10px 4px 0 0; }
.super-nav a { color:#000000;
  font-family:eurostilebold;
  font-size:18px;
  font-weight:bold;}
.super-nav li { float: left; margin-left: 20px; }
.super-nav li a:hover { color: #f53427; }




.switch{ display:none; }
.switch.first { display:block; } 
nav.section-nav ul {padding-top:40px; }
nav.section-nav li { float:left; margin-left:40px; }
nav.section-nav li a { color: #000; }
nav.section-nav li a.on, nav.section-nav li a:hover { color: #f53427 !important; } 
section#process nav.section-nav li a { color: #000; }
section#process nav.section-nav li a.on, nav.section-nav li a:hover { color: #fff; }
ul.company { list-style: none; padding:0px;}

section#press {
  background-image:url(http://guideusa.net/clients/grillos/images/bg-pattern-black.png);
  background-position:initial initial;
  background-repeat:repeat repeat;
  color:#FFFFFF;
  overflow:hidden;
  top:50px;
  position:relative;
  width:900px;
}

section#store {
  top:600px;
  margin-top: 100px;
}

.company li { float:left; margin-right: 5px; width:230px; height: 220px; font-family: georgia, times, serif; color: #000;}
.page-anchor { top: -20px; position:relative;}

/** Clearfix **/
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

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

@import url(http://fonts.googleapis.com/css?family=Michroma);


@font-face {
    font-family: 'eurostileregular';
    src: url('http://guideusa.net/clients/grillos/font/eurosti-webfont.eot');
    src: url('http://guideusa.net/clients/grillos/font/eurosti-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://guideusa.net/clients/grillos/font/eurosti-webfont.woff') format('woff'),
         url('http://guideusa.net/clients/grillos/font/eurosti-webfont.ttf') format('truetype'),
         url('http://guideusa.net/clients/grillos/font/eurosti-webfont.svg#eurostileregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*
root element for the scrollable.  when scrolling occurs this
element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 900px;
  height:500px;
}
 
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set width and height for the root element
and not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}
 
/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items div {
  float:left;
}

a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { margin-left: 0px; }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

.contentbox-wrapper{
    position:relative;
    left:0;
    width:3600px;
    height:100%;
}
 
.contentbox{
    width:900px;
    height:100%;
    float:left;
    padding:10px;
    background:#fff;
}

#content {overflow:hidden;}

nav {
	height: 40px;
		margin-left: -10px;
		line-height:50px;
	position: relative;
	background-color: #fff;
	width:1010px; margin:0px auto;
}

#nav-secondary { margin:0px 0 0 250px; float: left; }
#nav-secondary a { color:#000000;
  font-family:eurostileregular, arial, Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight:bold;}
#nav-secondary li { float: left; margin-left: 20px; }
#nav-secondary li a:hover { color: #f53427; } 

.fixed {
        position:fixed;
}

header {
	text-align:center;
	padding:70px 0;
}

.post { 
	width: 900px; 
}