/*
Template Name: Template-001
Template URI: http://websitebox.org/
Description: A RealitySoft Template
Author: RealitySoft
Author URI: http://websitebox.org/
Version: 1.0
*/

/*  TOC 
01. GENERAL TYPOGRAPHY 
02. STRUCTURE
	- Header
	- Content
	- Bottom Content & Footer
03. MENU
04. PROGRESSIVE ENHANCEMENTS
  - Transitions
05. 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;}
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; }

/*
===============================================================================================================
02. STRUCTURE
=============================================================================================================== */
.wsbx_body_wrap, .wsbx_page_footer, .wsbx_bottom_header_wrap {position:relative; width: 96%; max-width:1038px; margin:0 auto; display: block!important;}

  /* Header
  -------------------------------------------------------------- */
  .wsbx_page_header {width: 100%; position: relative; height: 100%; }
  .wsbx_page_header .wsbx_logo { position: absolute; width: 25.04816955684008%; z-index: 99; top: 2%; left: 0.9633911368015413%; } /*260/ 1038 */
  .wsbx_page_header .wsbx_header_bottom_box { height: 8px; margin: 0 15px; clear: both;}

  /* Featured Slider Content */
   .wsbx_featuredwrap { overflow: hidden; }
  .wsbx_featuredwrap li {position: relative; float: left;}
  .wsbx_featuredwrap li .wsbx_slider_content .wsbx_image_frame { width: 55.84007707129094%; }  /* width: 590px */
  .wsbx_featuredwrap li .wsbx_slider_content .wsbx_slider_caption { width: 40.46242774566474%; padding-top: 1.50%; } /* width: 420px */
  .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: 38.60%; 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; border: 4px solid rgba(0,0,0, 0.2); }
  .wsbx_featuredwrap li .wsbx_slider_content.wsbx_partial_staged_left .wsbx_slider_caption {float: right; } 
   
   /* Partial Staged Right */
  .wsbx_featuredwrap li .wsbx_slider_content.wsbx_partial_staged_right .wsbx_image_frame {float: right; height: auto; border: 4px solid rgba(0,0,0, 0.2);   } 
  .wsbx_featuredwrap li .wsbx_slider_content.wsbx_partial_staged_right .wsbx_slider_caption {float: left; } 

   /* Overlay Slide Effect */
   .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect { position: absolute; width: 41.42581888246628%; height: 100%; top: 0; right: 0; background: url(http://data.websitebox.com/data/applications/01/headers/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; } 

     /* 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; } 


  /* 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%;}

    /* Direction Nav */
    .flex-direction-nav li a {width: 53px; height: 53px; margin: -13px 0 0; display: block; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}
    .flex-direction-nav li .next {background-position: -53px 0; right: 10px;}
    .flex-direction-nav li .prev {left: 10px;}
    .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

    /* Control Nav */
    .flex-control-nav { width: 160px; position: absolute; right: 5px; bottom: 15px; text-align: center; }
    .flex-control-nav li {margin: 0 0 0 3px; display: inline-block; zoom: 1; *display: inline;}
    .flex-control-nav li:first-child {margin: 0;}
    .flex-control-nav li a {width: 20px; height: 18px; display: block; background: url(../images/nav_dots_sprite.png) no-repeat 50% 0; cursor: pointer; text-indent: -9999px;}
    .flex-control-nav li a:hover { opacity:.70; }
    .flex-control-nav li a.active {background-position: 50% -34px;  cursor: default;}

   /* Content
   -------------------------------------------------------------- */
  .wsbx_page_content { width: 100%; margin: 15px 0 0; padding: 0 0 30px; clear: both; display: block; }

  /* Extra
   -------------------------------------------------------------- */  
  #toTop {width: 57px;height: 57px; background: url(http://data.websitebox.com/data/applications/01/headers/0101201/images/top.png) 0 0 no-repeat; position: fixed; bottom: 1.5625%; right: 1.5625%; cursor: pointer; display: none; z-index: 999;} /* Back  to top */
  
/*
===============================================================================================================
03. MENU
=============================================================================================================== */
#wsbx_primary_menu {margin: 7px 0; height: 36px; z-index: 999; position: relative;}
#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 0; margin-right: 2px; text-decoration: none; font-size: .950em;}
#wsbx_primary_menu ul li.wsbx_last_item a {margin-right: 0;}
#wsbx_primary_menu ul li ul { position: absolute; top: 0; left: 0; display: none; visibility: hidden; -moz-box-shadow: 0 8px 6px -6px #474747; -webkit-box-shadow: 0 8px 6px -6px #474747; box-shadow: 0 8px 6px -6px #474747;}
#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: 160px; padding: 10px; margin: 0; border-right: 0; text-align: left; border-top: 1px solid transparent; border-bottom: 1px solid #fff;  position: relative;}
#wsbx_primary_menu ul ul li.wsbx_last_sub_item a { border-bottom-width: 0; }
#wsbx_primary_menu ul li ul li ul li a { border-bottom: 1px solid #fff!important;}
#wsbx_primary_menu ul li ul li ul li.wsbx_last_sub_item a { border-bottom-width: 0!important; }
#wsbx_primary_menu .wsbx_mobileMenu {display: none; padding: 3px 4px; font-size: 1em; border-width: 2px; border-style:solid; width: 100%;} /* Hide our select drop menu */
.downarrowclass { position: absolute; margin: 0 0 0 0; right: 14px; top: 16px; width: 9px; height: 5px; }
.rightarrowclass { position: absolute; top: 16px; right: 8px; width: 5px; height: 9px; }

/* 8 Menu Items */
#wsbx_primary_menu.wsbx_menu_item_8 li { width: 12.5%;}
#wsbx_primary_menu.wsbx_menu_item_7 li { width: 14.286127167630058% }
#wsbx_primary_menu.wsbx_menu_item_6 li { width: 16.666666666666666% }
#wsbx_primary_menu.wsbx_menu_item_5 li { width: 19.999999999999998% }

/*
===============================================================================================================
04. PROGRESSIVE ENHANCEMENTS
=============================================================================================================== */

/* Transition {For a smooth responsiveness}
-------------------------------------------------------------- */
body { transition:all .2s linear; 
  -o-transition:all .2s linear;  
  -moz-transition:all .2s linear;  
  -webkit-transition:all .2s linear;}

/*
===============================================================================================================
05. 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: 783px) {
    #wsbx_primary_menu {height: auto;}
    #wsbx_primary_menu.wsbx_menu_item_8  ul li,
    #wsbx_primary_menu.wsbx_menu_item_7  ul li,
    #wsbx_primary_menu.wsbx_menu_item_6  ul li,
    #wsbx_primary_menu.wsbx_menu_item_5  ul li { width: 50%; } 
    #wsbx_primary_menu ul li a {margin-bottom: 2px;}
    #wsbx_primary_menu ul li.wsbx_border_right_off a {margin-right: 0;}
    #wsbx_primary_menu ul li ul {-moz-box-shadow: 0 8px 6px -7px #474747; -webkit-box-shadow: 0 8px 6px -7px #474747; 
      width: 100%!important; box-shadow: 0 8px 6px -7px #474747;}
    #wsbx_primary_menu ul li ul li {width: auto!important;}
    #wsbx_primary_menu ul li ul li a { width: auto!important; text-align: center;}
    .wsbx_page_header {clear: both;}
    .wsbx_slider_content .wsbx_slider_caption h1 { font-size: 2em; }
}

@media only screen and (min-width: 240px) and (max-width: 720px){
    .wsbx_page_content { padding: 0 0 10px; }
    .wsbx_featuredwrap li .wsbx_slider_content .wsbx_image_frame { float: none; width: auto; } 
    .wsbx_featuredwrap li .wsbx_slider_content .wsbx_video_framed { float: none; width: 100%; padding-bottom: 60.60%; } 
    .wsbx_featuredwrap li .wsbx_slider_content .wsbx_slider_caption { float: none; width: auto;  }
    .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect { width: 59.72222222222222%; }
    .wsbx_slider_content .wsbx_slider_caption .wsbx_button_link { padding: 1.8% 2.5%; }
}

@media screen and (max-width: 655px) {
    .wsbx_featuredwrap li .wsbx_slider_content .wsbx_image_frame { width: 98.80%; } 
    .wsbx_featuredwrap li .wsbx_slider_content .wsbx_image_frame img { width: 100%; }
    .wsbx_featuredwrap { display: none; }
    .wsbx_page_header { height: 110px; position: relative; }
    .wsbx_page_header .wsbx_logo { width: 100%; top: 0; left: 0; }
    .wsbx_page_header .wsbx_header_bottom_box { position: absolute; width: 100%; bottom: 0; left: 0; margin-left: 0; }
}

@media screen and (max-width: 615px) {
   .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect { width: 71.66666666666667%; }
   .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect h1 { font-size: 1.5em;  }
   .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect p  { line-height: 1.2; margin: 0; }
}

@media screen and (max-width: 495px) {
    .wsbx_bottom_menu ul {padding: 4px 0; margin: 0;} 
    .wsbx_featuredwrap li .wsbx_slider_content .wsbx_image_frame { width: 98.40%; } 
    .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect { width: auto; }
}

@media screen and (max-width: 335px) {
   #wsbx_primary_menu {margin: 6px 0;}
   #wsbx_primary_menu  ul {display: none}
   #wsbx_primary_menu select {display: block;}  
   #toTop { width: 40px; height: 42px; background: url(../images/top-small.png) 0 0 no-repeat; right: 4%;}
  .wsbx_featuredwrap li .wsbx_slider_content.wsbx_partial_staged_left .wsbx_image_frame { width: 98.0%; } 
  .wsbx_slider_content .wsbx_slider_caption { padding-top: 5px; padding-bottom: 30px; }
  .wsbx_slider_content .wsbx_slider_caption h1 { font-size: 1.6em; margin-top: 1%; }
  .wsbx_slider_content .wsbx_slider_caption p { margin: 0!important; line-height: 1.3; font-size: .90em; }
  .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect p { height: 30px; overflow: hidden; }
  .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect .wsbx_slider_caption {padding-top: 1%;}
  .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect .wsbx_button_link { font-size: .80em; }
}

@media screen and (max-width: 267px) {
   .wsbx_featuredwrap li .wsbx_slider_content .wsbx_image_frame { width: 96.50%!important; } 
   .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect h1 {font-size: 1em; font-weight: bold;}
   .wsbx_featuredwrap li .wsbx_slider_content.wsbx_overlay_effect p { font-size: .80em; }
   .wsbx_page_header {height: 100px; }
   
}