/*

 * HTML5 Boilerplate

 *

 * What follows is the result of much research on cross-browser styling.

 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,

 * Kroc Camen, and the H5BP dev community and team.

 */

/* ==========================================================================

   Base styles: opinionated defaults

   ========================================================================== */

html,
button,
input,
select,
textarea {

  color: #000;

}

body {

  font-size: 1em;

  line-height: 1.4;

}

::-moz-selection {

  background: #b3d4fc;

  text-shadow: none;

}

::selection {

  background: #b3d4fc;

  text-shadow: none;

}

hr {

  display: block;

  height: 1px;

  border: 0;

  border-top: 1px solid #ccc;

  margin: 1em 0;

  padding: 0;

}

img {

  vertical-align: middle;

}

fieldset {

  border: 0;

  margin: 0;

  padding: 0;

}

textarea {

  resize: vertical;

}

.tinynav {

  display: none;

}

.chromeframe {

  margin: 0.2em 0;

  background: #ccc;

  color: #000;

  padding: 0.2em 0;

}

.nostyle {

  list-style: none;

  margin: 0;

  padding: 0;

}

.text_right {

  text-align: right;

}

.text_left {

  text-align: left;

}

.text_center {

  text-align: center;

}

.lines {

  background: url(../images/whiteline.png) repeat-x center center;

  text-transform: uppercase;

}

.sub_title {

  font-size: 19px;

  font-weight: 300;

  color: #fff;

  margin-top: -20px;

  line-height: 19px;

  margin-bottom: 50px;

}

.plug {

  padding: 0 20px;

}

#services .plug {

  background: #FF9900;

}

#portfolio .plug {

  background: #44a5ac;

}

#pricing_table .plug {

  background: #324c68;

}

#about_us .plug {

  background: #d44032;

}

.black_over {

  background: url(../images/blackpx.png) repeat;

  height: 100%;

}

.back2top {

  display: block;

  position: absolute;

  width: 60px;

  height: 30px;

  border-radius: 50%;

  left: 50%;

  margin-left: -30px;

  bottom: 0;

  padding: 30px 0 0;

  margin-top: -30px;

  text-decoration: none;

  text-align: center;

  font-size: 18px;

  font-weight: bold;

}

.top_box,
.bot_box {

  width: 0px;

  height: 0px;

}

.section2 .top_box, .section4 .top_box, .section6 .top_box, .section8 .top_box {

  border-width: 0 0 60px 2880px;

  border-style: solid solid solid dashed;

}

.section3 .top_box, .section5 .top_box, .section7 .top_box, .section9 .top_box {

  border-width: 60px 0 0 2880px;

  border-style: solid solid solid dashed;

}

.section2 .bot_box, .section4 .bot_box, .section6 .bot_box, .section8 .bot_box {

  border-width: 0 2880px 60px 0;

  border-style: solid dashed solid solid;

}

.section3 .bot_box, .section5 .bot_box, .section7 .bot_box, .section9 .bot_box {

  border-width: 60px 2880px 0 0;

  border-style: solid dashed solid solid;

}

.section2 .man_box {

  position: relative;

  z-index: 10;

  margin-top: -60px;

}

.section2 .intro {

  display: none;

}

.section3 .man_box {

  position: relative;

  z-index: 9;

  margin-top: -60px;

}

.section4 .man_box {

  position: relative;

  z-index: 8;

  margin-top: -60px;

}

.section5 .man_box {

  position: relative;

  z-index: 7;

  margin-top: -60px;

}

.section6 .man_box {

  position: relative;

  z-index: 6;

  margin-top: -60px;

}

.intro {

  margin: -65px 0 0;

  background-attachment: fixed;

  background-size: cover;

  height: 430px;

  text-transform: uppercase;

  background-repeat: no-repeat;

}

.soc_font, .fsoc {

  text-decoration: none;

  color: #fff;

}

.fsoc {

  font-family: zocial;

}

input[type="text"], input[type="email"], textarea {

  padding: 10px;

  font-size: 16px;

  line-height: 24px;

  margin-bottom: 15px;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -o-box-sizing: border-box;

  color: #fff;

  font-weight: 300;

  display: inline-block;

  margin-right: 1%;

  width: 99%;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: 25px;

}

input[type="text"].half, input[type="email"].half {

  width: 49%;

  float: left;

}

input[type="submit"] {

  background: #ffffff;

  border: none;

  color: #fff;

  margin: 0 1% 1% 0;

  font-size: 18px;

  color: #000;

  padding: 15px 20px;

  border-radius: 25px;

  -webkit-border-radius: 25px;

  -moz-border-radius: 25px;

  text-transform: uppercase;

}

input[type="submit"]:hover {

  background: #000;

  color: #fff;

}

/* ==========================================================================

   Helper classes

   ========================================================================== */

/*

 * Image replacement

 */

.ir {

  background-color: transparent;

  border: 0;

  overflow: hidden;

  /* IE 6/7 fallback */

  *text-indent: -9999px;

}

.ir:before {

  content: "";

  display: block;

  width: 0;

  height: 150%;

}

/*

 * Hide from both screenreaders and browsers: h5bp.com/u

 */

.hidden {

  display: none !important;

  visibility: hidden;

}

/*

 * Hide only visually, but have it available for screenreaders: h5bp.com/v

 */

.visuallyhidden {

  border: 0;

  clip: rect(0 0 0 0);

  height: 1px;

  margin: -1px;

  overflow: hidden;

  padding: 0;

  position: absolute;

  width: 1px;

}

/*

 * Extends the .visuallyhidden class to allow the element to be focusable

 * when navigated to via the keyboard: h5bp.com/p

 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {

  clip: auto;

  height: auto;

  margin: 0;

  overflow: visible;

  position: static;

  width: auto;

}

/*

 * Hide visually and from screenreaders, but maintain layout

 */

.invisible {

  visibility: hidden;

}

/*

 * Clearfix: contain floats

 *

 * For modern browsers

 * 1. The space content is one way to avoid an Opera bug when the

 *    `contenteditable` attribute is included anywhere else in the document.

 *    Otherwise it causes space to appear at the top and bottom of elements

 *    that receive the `clearfix` class.

 * 2. The use of `table` rather than `block` is only necessary if using

 *    `:before` to contain the top-margins of child elements.

 */

.clearfix:before,
.clearfix:after {

  content: " "; /* 1 */

  display: table; /* 2 */

}

.clearfix:after {

  clear: both;

}

/*

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */

.clearfix {

  *zoom: 1;

}

/* ==========================================================================

   EXAMPLE Media Queries for Responsive Design.

   These examples override the primary ('mobile first') styles.

   Modify as content requires.

   ========================================================================== */

@media only screen and (min-width: 35em) {

  /* Style adjustments for viewports that meet the condition */

}

@media print,

(-o-min-device-pixel-ratio: 5/4),

(-webkit-min-device-pixel-ratio: 1.25),

(min-resolution: 120dpi) {

  /* Style adjustments for high resolution devices */

}

/* ==========================================================================

   Print styles.

   Inlined to avoid required HTTP connection: h5bp.com/r

   ========================================================================== */

@media print {

  * {

    background: transparent !important;

    color: #000 !important; /* Black prints faster: h5bp.com/s */

    box-shadow: none !important;

    text-shadow: none !important;

  }

  a,
  a:visited {

    text-decoration: underline;

  }

  a[href]:after {

    content: " (" attr(href) ")";

  }

  abbr[title]:after {

    content: " (" attr(title) ")";

  }

  /*

   * Don't show links for images, or javascript/internal links

   */



  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {

    content: "";

  }

  pre,
  blockquote {

    border: 1px solid #999;

    page-break-inside: avoid;

  }

  thead {

    display: table-header-group; /* h5bp.com/t */

  }

  tr,
  img {

    page-break-inside: avoid;

  }

  img {

    max-width: 100% !important;

  }

  @page {

    margin: 0.5cm;

  }

  p,
  h2,
  h3 {

    orphans: 3;

    widows: 3;

  }

  h2,
  h3 {

    page-break-after: avoid;

  }

}

/* LayerSlider Default Skin */

.ls-defaultskin {

  background: none !important;

  border: none !important;

  border-radius: 0 !important;

  padding: 0 !important;

  box-shadow: 0 0 0 !important;

}

.ls-defaultskin .ls-bottom-nav-wrapper {

  margin: 15px auto 0px auto;

}

.ls-defaultskin .ls-playvideo {

  width: 50px;

  height: 50px;

  margin-left: -25px;

  margin-top: -25px;

}

.ls-defaultskin .ls-playvideo,
.ls-defaultskin .ls-nav-sides,
.ls-defaultskin .ls-bottom-slidebuttons a,
.ls-defaultskin .ls-nav-start,
.ls-defaultskin .ls-nav-stop,
.ls-defaultskin .ls-fullscreen,
.ls-defaultskin .ls-loading-container {

  background: none !important;

}

.ls-defaultskin .ls-playvideo {

  background-position: -300px -150px;

}

.ls-defaultskin .ls-playvideo:hover,
.ls-defaultskin .ls-vpcontainer:hover .ls-playvideo {

  background-position: -375px -150px;

}

.ls-defaultskin .ls-nav-prev:before {

  content: "\f053";

  font-family: FontAwesome;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: #fff solid 2px;

  display: block;

  line-height: 40px;

  text-align: center;

  font-size: 16px;

}

.ls-defaultskin .ls-nav-prev:hover {

}

.ls-defaultskin .ls-nav-next:before {

  font-size: 16px;

  display: block;

  content: "\f054";

  font-family: FontAwesome;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: #fff solid 2px;

  line-height: 40px;

  text-align: center;

  text-decoration: none;

}

.ls-defaultskin .ls-nav-next:hover {

}

.ls-defaultskin .ls-nav-start {

  background-position: -300px 0px;

}

.ls-defaultskin .ls-nav-start:hover,
.ls-defaultskin .ls-nav-start-active {

  background-position: -300px -75px;

}

.ls-defaultskin .ls-nav-stop {

  background-position: -450px 0px;

}

.ls-defaultskin .ls-nav-stop:hover,
.ls-defaultskin .ls-nav-stop-active {

  background-position: -450px -75px;

}

.ls-defaultskin .ls-bottom-slidebuttons a {

  background-position: 0px -150px;

}

.ls-defaultskin .ls-bottom-slidebuttons a.ls-nav-active,
.ls-defaultskin .ls-bottom-slidebuttons a:hover {

  background-position: -75px -150px;

}

.ls-defaultskin .ls-nav-sideleft {

  background-position: -150px -150px;

}

.ls-defaultskin .ls-nav-sideright {

  background-position: -225px -150px;

}

.ls-defaultskin .ls-nav-prev,
.ls-defaultskin .ls-nav-next {

  z-index: 10000;

  top: 50%;

  margin-top: -21px;

  position: absolute;

  text-decoration: none;

  background: none !important;

}

.ls-defaultskin .ls-nav-prev {

  left: 5px;

}

.ls-defaultskin .ls-nav-next {

  right: 5px;

}

.ls-defaultskin .ls-bottom-slidebuttons,
.ls-defaultskin .ls-bottom-slidebuttons a,
.ls-defaultskin .ls-nav-start,
.ls-defaultskin .ls-nav-stop,
.ls-defaultskin .ls-nav-sides {

  height: 28px;

}

.ls-defaultskin .ls-bottom-slidebuttons,
.ls-defaultskin .ls-bottom-slidebuttons a,
.ls-defaultskin .ls-nav-start,
.ls-defaultskin .ls-nav-stop,
.ls-defaultskin .ls-nav-sides {

  display: inline-block;

}

.ls-defaultskin .ls-nav-start,
.ls-defaultskin .ls-nav-stop {

  width: 24px;

}

.ls-defaultskin .ls-bottom-slidebuttons a {

  width: 20px;

}

.ls-defaultskin .ls-nav-sides {

  width: 6px;

}

.ls-defaultskin .ls-thumbnail-hover {

  bottom: 55px;

  padding: 4px;

  margin-left: 1px;

}

.ls-defaultskin .ls-thumbnail-hover-bg {

  background: white;

  box-shadow: 0px 2px 12px -4px black;

  border-radius: 4px;

}

.ls-defaultskin .ls-thumbnail-hover span {

  border: 5px solid white;

  margin-left: -5px;

}

.ls-defaultskin .ls-thumbnail {

  top: -20px;

}

.ls-defaultskin .ls-thumbnail-inner {

  padding: 5px;

  margin-left: -5px;

  background: white;

  box-shadow: 0px 3px 35px -10px black;

  border-radius: 4px;

}

.ls-defaultskin .ls-thumbnail-slide a {

  margin-right: 5px;

}

.ls-defaultskin .ls-nothumb {

  background: #eee;

}

.ls-defaultskin .ls-above-thumbnails {

  display: none;

}

.ls-defaultskin .ls-below-thumbnails {

  display: block;

  margin-top: -20px;

}

.ls-defaultskin .ls-loading-container {

  width: 40px;

  height: 40px;

  margin-left: -20px;

  margin-top: -20px;

  background-position: -450px -150px;

}

.ls-defaultskin .ls-loading-indicator {

  width: 22px;

  height: 22px;

  margin-top: 9px;


}

.ls-defaultskin .ls-fullscreen {

  width: 30px;

  height: 30px;

  right: 10px;

  top: 10px;

  background-position: -525px -150px;

}

.ls-defaultskin .ls-fullscreen:hover {

  background-position: -525px -190px;

}