/*
  Template Name: Template-094
  Template URI: http://websitebox.org/
  Description: A RealitySoft Template
  Author: RealitySoft
  Author URI: http://websitebox.org/
  Version: 1.0
  Date: Tuesday May 16, 2012
*/

/*  TOC 
01. GENERAL TYPOGRAPHY 
02. STRUCTURE
	- Header
    * Logo
    * Navigation
	- Content
  - Extras
03. PROGRESSIVE ENHANCEMENTS
  - Transitions
04. MEDIA QUERIES (Responsive web design)
*/

/*
===============================================================================================================
01. GENERAL TYPOGRAPHY
=============================================================================================================== */
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
img {border: 0;}
body { font-size: 100%; margin: 0; padding: 0; background-image: url(../images/body.jpg); }
body{line-height:20px;}
a,a:hover,a:active,a:focus{text-decoration:none; outline:0 none;-moz-outline-style:none;}
.wsbx_clearfix:after, .wsbx_page_content:after { content: "."; display: block; clear: both; visibility: hidden;
line-height: 0; height: 0;} 
.wsbx_clearfix, .wsbx_page_content { display: inline-block; }
html[xmlns] .wsbx_clearfix, html[xmlns] .wsbx_page_content { display: block;} 
* html .wsbx_clearfix, * html .wsbx_page_content { height: 1%; overflow: visible; }

.flex-control-nav li a, #toTop { behavior:url('js/PIE.htc'); zoom: 1; position: relative; }


/*
===============================================================================================================
02. STRUCTURE
=============================================================================================================== */
.wsbx_page_wrap { position:relative; width: 96%; max-width:1038px; margin:0 auto; display: block; }
.wsbx_bottom_wrap { margin-bottom: 2.50%; }

/* Header
-------------------------------------------------------------- */
.wsbx_page_header { margin-bottom: 1.0%; position: relative; }
.wsbx_page_header .wsbx_logo { float: left; width: auto; z-index: 99; margin: 1.50% 0; }

/* Featured Slider Content */
.wsbx_featuredwrap { height: auto; position: relative; float: left; background: url(../images/slider-shadow.png) 50% 98% no-repeat;  } 
.wsbx_featuredwrap li {position: relative; float: left; margin-bottom: 4%; }
.wsbx_featuredwrap li .wsbx_slider_content .wsbx_image_frame { width: 55.84007707129094%; } 
.wsbx_featuredwrap li .wsbx_slider_content .wsbx_slider_caption { width: 39%; padding-top: 1.50%; }
.wsbx_slider_content .wsbx_slider_caption h1 { font-size: 2.4em; line-height: 1; margin: 0 0 6px; padding: 0; font-weight: normal;  }
.wsbx_slider_content .wsbx_slider_caption p { font-size: 1.060em; padding-right: 10px;}
.wsbx_slider_content .wsbx_slider_caption .wsbx_button_link { padding: 10px 20px; font-size: .95em; }
.wsbx_video_framed { position: relative; padding-bottom: 26.50%; height: 0; overflow: hidden; width: 55.84007707129094%; }
.wsbx_video_framed iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

/* Partial Staged Left */
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_partial_staged_left .wsbx_image_frame { float: left; height: auto; }
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_partial_staged_left .wsbx_slider_caption {float: right; padding-right: 2%; } 
   
/* Partial Staged Right */
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_partial_staged_right .wsbx_image_frame {float: right; height: auto; } 
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_partial_staged_right .wsbx_slider_caption {float: left; padding-left: 1.80%; } 

/* Overlay Slide Effect */
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect { position: absolute; width: 45.0%; height: 100%; top: 0; right: 0; background: url(../../gadgets/ava/images/_rgba/black50.png); color: #fff;} /* width: 430px */
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect .wsbx_slider_caption { width: auto; padding: 4.6511627906976744% 3.488372093023256% 0 5.581395348837209%; }

/* Vimeo Video Staged Left */
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_video_left .wsbx_video_framed { float: left; } 
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_video_left .wsbx_slider_caption { float: right; margin-left: 2%; } 

/* Youtube Video Staged Left */
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_video_right .wsbx_video_framed { float: right; } 
.wsbx_featuredwrap li .wsbx_slider_content.wsbx_video_right .wsbx_slider_caption { float: left; margin-left: 2%; } 

/* Flex Slider */
.flex-container a:active,
.wsbx_flexslider a:active {outline: none;}
.slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.wsbx_flexslider {width: 100%; margin: 0; padding: 0;}
.wsbx_flexslider .slides > li { display: none; } /* Hide the slides before the JS is loaded. Avoids image jumping */
.wsbx_flexslider .slides img { max-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%;}

/* Control Nav */
.flex-control-nav { height: 22px; width: 126px; position: absolute; left: 46%; bottom: 0; text-align: center; }
.flex-control-nav li {margin: 0 0 3px 0; display: block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a { width: 12px; height: 12px; float: left; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; margin-right: 8px; }
.flex-control-nav li a:hover { opacity:.70; }
.flex-control-nav li a.active { cursor: default; }


 /* Navigation: */
#wsbx_primary_menu { margin: 2.0% 0 0; clear: both; height: 60px; }
#wsbx_primary_menu ul { margin: 0; padding: 0; list-style-type: none; }
#wsbx_primary_menu ul li {display: inline; float: left; position: relative; }
#wsbx_primary_menu ul li a { display: block; text-align: center; padding: 10px 22px; text-decoration: none; font-size: 1.45em; font-weight: normal; background-image: url(../images/nav-bg.png); background-repeat: no-repeat; background-position: 50% 50%; }
#wsbx_primary_menu ul li a:hover,
#wsbx_primary_menu ul li a.wsbx_selected,
#wsbx_primary_menu ul li.wsbx_current_page_nav a { background-image: url(../images/nav-bg1.png); background-repeat: no-repeat; background-position: 50% 50%; }
#wsbx_primary_menu ul li ul { position: absolute; left: 0; display: none; visibility: hidden; }
#wsbx_primary_menu ul li ul li ul { top: 0; }
#wsbx_primary_menu ul li ul li { display: list-item; float: none; }
#wsbx_primary_menu ul li ul li a { width: 165px; margin: 0; text-align: left; padding: 10px 10px; position: relative; font-size: 1.10em; font-weight: normal;  }
#wsbx_primary_menu ul li ul li a:hover { background-image: url(../images/nav-bg.png); background-repeat: no-repeat; background-position: 50% 50%; }
#wsbx_primary_menu ul ul li a.wsbx_last_sub_item { border-bottom: none; }
#wsbx_primary_menu .wsbx_mobileMenu {display: none; padding: 6px; font-size: 1em; border-width: 1px; border-style:solid; width: 100%; } /* Hide our select drop menu */

/* Content
-------------------------------------------------------------- */
.wsbx_page_content { padding: 15px 0 25px; clear: both; display: block; }


/* Extras
-------------------------------------------------------------- */
#toTop { width: 55px; padding: 18px 0; text-align: center; background: #222222; color: #fff; position: fixed; bottom: 2%; right: 2%; cursor: pointer; display: none; z-index: 999; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-transform: uppercase; font-size: .86em; -webkit-box-shadow: #6f6f6f 0 0 .68em; -moz-box-shadow: #6f6f6f 0 0 .68em;box-shadow: #6f6f6f 0 0 .68em; } /* Back to top */


/*
===============================================================================================================
03. PROGRESSIVE ENHANCEMENTS
=============================================================================================================== */
body { transition:all .2s linear; 
  -o-transition:all .2s linear;  
  -moz-transition:all .2s linear;  
  -webkit-transition:all .2s linear;}

/*
===============================================================================================================
04. MEDIA QUERIES (Responsive web design)
=============================================================================================================== */
@media screen and (max-width: 1039px) {
  body { -webkit-text-size-adjust: none;}
  img, embed, iframe, video { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
}

@media screen and (max-width: 815px) {
  .wsbx_page_header .wsbx_logo { margin: .50% 0; }
  #wsbx_primary_menu { height: 50px; }
  #wsbx_primary_menu ul li a { font-size: 1.10em; padding: 10px 16px; }
  #wsbx_primary_menu ul li ul li a { font-size: .90em; }
  .wsbx_slider_content .wsbx_slider_caption h1 { font-size: 1.70em; margin-bottom: 3px; }
  .wsbx_slider_content .wsbx_slider_caption .wsbx_button_link  { padding: 7px 15px; }
  .wsbx_slider_content .wsbx_slider_caption p:nth-child(2),
  .wsbx_slider_content .wsbx_slider_caption p:nth-child(3) { margin: 0 0 3px;  }
  .wsbx_slider_content .wsbx_slider_caption p { font-size: .96em; }
  .flex-control-nav { bottom: -8px; }
}

@media screen and ( max-width: 720px ) {
  #wsbx_primary_menu { height: 38px; width: 65%; margin: auto; }
  .wsbx_page_header .wsbx_logo { position: relative; left: 32%; width: 38%; } 
  .wsbx_featuredwrap { display: none!important; }
  .wsbx_page_content { padding: 1% 0; }
}


@media screen and ( max-width: 335px ) {
  .wsbx_page_header .wsbx_logo { left: 20%; width: 62%; } 
  #wsbx_primary_menu { width: 92%; }
  #wsbx_primary_menu .wsbx_mobileMenu { padding: 4px; }
  #toTop { width: 42px; padding: 13px 0; }
}