/*
=====================================================================================
  Site created by Humberto Ventura
  Artwork by Humberto Ventura
  Front-end and back-end development by Humberto Ventura
  www.humbertoventura.com
=====================================================================================
*/



/*----------------------------------------------------
@Reset
-----------------------------------------------------*/
html
{margin: 0;padding: 0; height: 100%;overflow-x: hidden;}

body
{margin: 0;padding: 0;width: 100%;min-width: 1000px;overflow-x: hidden;}


*
{margin: 0;padding: 0;outline: none;}

  body,
  div,
  dl,dt,dd,
  ul,ol,li,
  h1,h2,h3,h4,h5,h6,
  pre,
  form,fieldset,
  input,textarea,
  a,
  p,blockquote,
  th,td 
  {margin: 0;padding: 0; vertical-align: baseline;}
    
  images 
  {border: 0}
    
  address, caption, cite, code, dfn, em, strong, th, var 
  {font-style: normal;font-weight: normal;}
    
  ol,ul 
  {list-style: none; left:0px;}
    
  h1,h2,h3,h4,h5,h6 
  {font-size: 100%;font-weight: normal;}

/*----------------------------------------------------
@HTML5
-----------------------------------------------------*/
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary, mark 
{display:block;}

/*----------------------------------------------------
@FontFace
-----------------------------------------------------*/
@font-face {
    font-family: 'Gear';
    src: url('../fonts/geared/gearedslab-webfont.eot');
    src: local("☺"), url('../fonts/geared/gearedslab-webfont?#iefix') format('embedded-opentype'),
         url('../fonts/geared/gearedslab-webfont.woff') format('woff'),
         url('../fonts/geared/gearedslab-webfont.ttf') format('truetype'),
         url('../fonts/geared/gearedslab-webfont.svg#Gear') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'Gear-Bold';
    src: url('../fonts/geared/gearedslab-bold-webfont.eot');
    src: local("☺"), url('../fonts/geared/gearedslab-bold-webfont?#iefix') format('embedded-opentype'),
         url('../fonts/geared/gearedslab-bold-webfont.woff') format('woff'),
         url('../fonts/geared/gearedslab-bold-webfont.ttf') format('truetype'),
         url('../fonts/geared/gearedslab-bold-webfont.svg#Gear-Bold') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'Colab-Thin';
    src: url('../fonts/colab/ColabThi-webfont.eot');
    src: local("☺"), url('../fonts/colab/ColabThi-webfont?#iefix') format('embedded-opentype'),
         url('../fonts/colab/ColabThi-webfont.woff') format('woff'),
         url('../fonts/colab/ColabThi-webfont.ttf') format('truetype'),
         url('../fonts/colab/ColabThi-webfont.svg#Colab-Thin') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'Imp-Caps';
    src: url('../fonts/imper/imperatorsmallcaps-webfont.eot');
    src: local("☺"), url('../fonts/imper/imperatorsmallcaps-webfont?#iefix') format('embedded-opentype'),
         url('../fonts/imper/imperatorsmallcaps-webfont.woff') format('woff'),
         url('../fonts/imper/imperatorsmallcaps-webfont.ttf') format('truetype'),
         url('../fonts/imper/imperatorsmallcaps-webfont.svg#Imp-Caps') format('svg');
    font-weight: normal;
    font-style: normal;}
    
@font-face {
    font-family: 'Robot';
    src: url('../fonts/robot/roboto-regular-webfont.eot');
    src: local("☺"), url('../fonts/robot/roboto_regular-webfont?#iefix') format('embedded-opentype'),
         url('../fonts/robot/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/robot/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/robot/roboto-regular-webfont.svg#Robot') format('svg');
    font-weight: normal;
    font-style: normal;}
    
@font-face {
    font-family: 'Cabin';
    src: url('../fonts/cabin/Cabin-Regular-webfont.eot');
    src: local("☺"), url('../fonts/cabin/Cabin-Regular-webfont?#iefix') format('embedded-opentype'),
         url('../fonts/cabin/Cabin-Regular-webfont.woff') format('woff'),
         url('../fonts/cabin/Cabin-Regular-webfont.ttf') format('truetype'),
         url('../fonts/cabin/Cabin-Regular-webfont.svg#Cabin') format('svg');
    font-weight: normal;
    font-style: normal;}

    
/*----------------------------------------------------
@Global
-----------------------------------------------------*/
html, body{
line-height: 20px;
font-family:'Colab-Thin', Helvetica, Arial, Verdana, sans-serif;
font-weight: normal;
font-size: 14px;
font-size-adjust:0.49; 
font-weight: 100 !important; 
font-style: normal;}

p{
margin: 0;
font-size: 14px;
line-height: 24px;
font-family: 'Colab-Thin', Helvetica, Arial, Verdana, sans-serif;}
  
a{
font-size: 14px;
color: #4f9426;
text-decoration: none;
cursor: pointer}
 
a:hover {color: #888;}
  
h1 {
font-size-adjust:0;
font-weight:100 !important; 
font-style:normal;}

/*fonts*/
.gear{font-family: 'Gear' !important;}
.gearbd{font-family: 'Gear-Bold' !important;}
.imp{font-family: 'Imp-Caps' !important;}
.robot{font-family: 'Robot' !important;}
.cabin{font-family: 'Cabin' !important}

/*font-sizes*/
.L90{font-size: 90px !important;} 
.L78{font-size: 78px !important;} 
.L37{font-size: 37px !important;}
.L26{font-size: 26px !important;}
.L24{font-size: 24px !important;}
.L22{font-size: 22px !important;}
.L20{font-size: 20px !important;}

.xl{font-size: 94px !important;}
.large{font-size: 54px !important;}
.medium{font-size: 28px !important; }
.regular{font-size: 17px !important;}
.small{font-size: 11px !important;}
.xs{font-size: 8px !important;}

/*background colors*/
.lt-green{background: #bdc53f !important}
.green{background: #9cb265 !important}
.dk-green{background: #7a997b !important}
.lt-blue{background: #96c5cc !important}
.dk-blue{background: #42a8bf !important}
.orange{background: #ee6a4c !important}
.bt-orange{background: #fab14d !important}

/*font colors*/
.lt-green-ft{color: #bdc53f !important}
.green-ft{color: #9cb265 !important}
.dk-green-ft{color: #7a997b !important}
.lt-blue-ft{color: #96c5cc !important}
.dk-blue-ft{color: #42a8bf !important}
.white{color: white !important}
.grey{color: #404040 !important}
.brown-ft{color: #362210 !important}
.lt-brown-ft{
	color: white !important
}
.tan{
	color: #5D5D5E !important
}
.bt-orange-ft{color: white !important}

/*spacer*/
.space{padding-bottom: 24px !important}

/*scroll-down*/
.scrolldwn{
background: url(../images/scroll-down.png)left top no-repeat;
height:15px;
width:108px;
display: block;
margin: 5px auto 0}

/*----------------------------------------------------
@Wrapper
-----------------------------------------------------*/
div#wrapper {
  width: 100%;
  max-width: 1900px;
  min-width: 100px;
  padding: 0;
  margin: 0 auto;
  position: relative;}


/*----------------------------------------------------
@Header
-----------------------------------------------------*/
header{
background-color: #7cbee8;
margin: 0 auto;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
overflow: hidden;}

#hdr-box{
margin: 0 auto;
position: relative;
height: 116px;
width: 980px;
padding: 0;}

#hdr-box .logo{
background: url(../images/)left top no-repeat;
height: 82px;
width:241px;
float: left;
display: block;
margin-top: 20px}


/*----------------------------------------------------
@Nav
-----------------------------------------------------*/
.nav-main{
float: right;
margin-top:83px}

.nav-main ul.nav-links li, .nav-main ul.nav-links li a{
color: white; 
font:normal 16px 'Gear', Helvetica, Arial, Verdana, sans-serif;
padding-top: 7px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
z-index: 99999}

.nav-main ul.nav-links li:hover{
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */}

.nav-main ul.nav-links li{
float: left; 
height:26px;
width:93px;
cursor: pointer}

/*----------------------------------------------------
@Contact_Box
-----------------------------------------------------*/
#contactbox{
display:none;
height:190px;
width:980px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
position: fixed;
top:116px; 
z-index: 99999}

.cb-main{width:755px; height:190px;margin:25px auto;}
.cb-left{width:340px;height:120px;padding:20px 60px 0 0; border-right: 3px solid white;float: left}
  .cb-left p{padding-bottom:20px;line-height: 48px}
  .cb-left a{color:white;border-bottom: 1px dotted white;}
  .cb-left a:hover{opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */}
.cb-middle{width:40px;padding:8px 0 0 60px;float: left}
	.cb-middle .phone, .cb-middle .email, .cb-middle .links{background: url(../images/sprite.png) no-repeat; background-position: -4px -4px; width:38px; height: 38px; margin-bottom: 6px }
	.cb-middle .email{background-position: -4px -49px}
	.cb-middle .links{background-position: -4px -93px; margin: 0}
.cb-right{width:230px;padding:8px 0 0 20px;float: left}
	.cb-right .phone, .cb-right .email, .cb-right .links{margin: 6px 0 17px}
	.cb-right .face, .cb-right .twit, .cb-right .you{background: url(../images/sprite.png) no-repeat; background-position: -72px -97px; width:32px; height: 32px; margin-right: 6px; float: left }
	.cb-right .twit{background-position: -109px -97px;}
	.cb-right .you{background-position: -146px -97px;}
	.cb-right p a:hover{border-bottom: 1px dotted white;}
	.cb-right a{color:white;}
	.cb-right a:hover{opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */}



/*----------------------------------------------------
@Privacy_Policy
-----------------------------------------------------*/
#privacyoverlay {
position: fixed;
top: 0;
left: 0;
z-index: 999999;
width:100%;
height:100%;
background-color: white;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
opacity: 0.85;
display: none;}

#privacybox{
display:none;
position: fixed;
margin-left: auto;
margin-right: auto;
top: 10%;
left: 0;
right: 0;
width: 900px;
height:650px;
padding: 20px;
z-index:999999;
background: #362312;
border: 1px white solid;
outline: 10px #362312 solid;
overflow: scroll;
overflow-x: hidden;}

#privacybox .panel{
padding: 20px 10px;}

#privacybox .panel h3{
padding-bottom: 40px;
line-height: 24px;}

#privacybox .panel p, #privacybox .panel ul li{font-size: 15px}  

#privacybox .panel ul{margin-left:20px}

#privacybox .panel ul li{
	list-style-type: disc;
	padding-bottom: 8px;}

#privacybox .space{padding-bottom: 25px !important}
    
    
/*----------------------------------------------------
@GlobalScenes
-----------------------------------------------------*/
.scene {
position: relative;
width: 100% !important;
min-width: 1000px;
margin: 0;
padding: 0;}

.scene .text {
position: absolute;
left: 135px;
top: 1000px;
width: 400px;
z-index: 99998;}
  
.scene .text p {
width: 300px;
font-size: 15px;}
  
.scene .text p a {
color: #222;
border-bottom: 1px dotted #222;}
    
.scene .text a {
font-size: 15px;
color: #222 !important;
border-bottom: 1px dotted #222;}
    
.scene .text a:hover { 
color: #000 !important;
border-bottom: 0;}

.scene .desc {
background: white;
width: 300px;
opacity: .95;
margin:10px;
border: 1px black solid;
outline: 10px white solid;
color: black;
padding: 30px;}

.scene .desc p{
font-family: 'Cabin',Helvetica, Arial, Verdana, sans-serif;
font-weight: normal !important;
letter-spacing: 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px	}

.scene #close{
margin-top: -45px;
cursor: pointer;
position: absolute;
margin-left: 500px;}

/*callouts & hotpots*/
.callout{position:absolute; z-index: 1002}

.callout .content {
background-color:#d06207;
color: white;
padding:6px 10px 5px;
font-size: 20px;
line-height: 26px;
/*
-webkit-transform-origin: 0 0;
-webkit-transform: scale3d(0,0,0);
-webkit-transition: .3s;
-moz-transform-origin: 0 0;
-moz-transform: scale(0,0);
-moz-transition: .3s;
*/}

.callout .content a, .callout .content a:hover{color:white}
.callout .content a:hover{opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */}

/*.animate{
display: block !important;
-webkit-transform: scale3d(1,1,1) ;
-moz-transform: scale(1,1) }*/

.hotspot-container{
position: relative;
top: -182px;
left: -58px;
z-index:900}

.on .hotspot, .off .hotspot, .hotspot-container a {
display: block;
font: 0/0 a;
text-shadow: none;
color: transparent;
position: absolute;}

.hotspot, .on .hotspot, .off .hotspot {
width:115px;
height:115px;
background:url(../images/hotspot-off.png) no-repeat center center;
animation:hotspot 1.5s infinite;
-moz-animation:hotspot 1.5s infinite; /* Firefox */
-webkit-animation:hotspot 1.5s infinite; /* Safari and Chrome */
-o-animation:hotspot 1.5s infinite; /* Opera */}

.off .hotspot{background:url(../images/hotspot-on.png) no-repeat center center}

.hotspot-container a, .hotspot-container .on a, .hotspot-container .off a {
width:70px;
height:70px;
top:22px;
left:22px;
background:url(../images/hotspot-off-icon.png) 29px 29px no-repeat}

.hotspot-container .off a{background:url(../images/hotspot-on-icon.png) 29px 29px no-repeat}

.hotspot-container .off{display: none}
.hotspot-container:hover .on{display:none}
.hotspot-container:hover .off{display: block}

@keyframes hotspot{0%{opacity:0;-webkit-transform:scale(0,0)}70%{opacity:1}90%{opacity:1}100%{opacity:0;-webkit-transform:scale(0.6,0.6)}}

@-webkit-keyframes hotspot{0%{opacity:0;-webkit-transform:scale(0,0)}70%{opacity:1}90%{opacity:1}100%{opacity:0;-webkit-transform:scale(0.6,0.6)}}

@-moz-keyframes hotspot{0%{opacity:0;-moz-transform:scale(0,0)}80%{opacity:1}100%{opacity:0;-moz-transform:scale(0.6,0.6)}}

@-o-keyframes hotspot{0%{opacity:0;-moz-transform:scale(0,0)}80%{opacity:1}100%{opacity:0;-moz-transform:scale(0.6,0.6)}}


/*----------------------------------------------------
@Footer
-----------------------------------------------------*/
footer {
width: 980px;
margin: 0 auto;
padding: 0}

footer a {
color: #222;
border-bottom: 1px dotted #222;
padding: 0 !important;
margin: 0 !important; 
text-indent: 1px !important;}
  
footer a:hover {border-bottom: 0;}
  
.h-legal {
margin: 25px auto;
width: 980px;
text-align: center;
font-size: 11px;}
  
.h-legal *{font-size: 11px;}

footer a.logo{border-bottom: 0;}

/*----------------------------------------------------
@Clear
-----------------------------------------------------*/
.clear-self:after { 
content: " "; 
display: block; 
clear: both; 
visibility: hidden; 
line-height: 0; 
height: 0;
margin-bottom: 0; }

.clear-self { 
/*display: inline-block;*/
display: block;}

html[xmlns] .clear-self { display: block;}

* html .clear-self {height: 1%;}