/* ==========================================================================
   Base Styles and Bootstrap Modifications
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #f25c09;
    color: #000000;
    text-shadow: none;
}

::selection {
    background: #16a085;
    color: #a4003a;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

hr-orange {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ff4e00;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   General styles
   ========================================================================== */

html,
body {
    height: 100%;
}

body {
    font-family: "Lato";
    font-weight: 300;
    font-size: 16px;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

.col-md-4 {
    padding-bottom: 20px;
}

.row {
    margin-top: 10px;
    margin-bottom:10px;
    margin-right: 0px;
    margin-left: -15px;
}

.modal{

}
.modal-header {
    background: #3498db;
}

.modal-header h4 {
    color: white;
}

.modal-footer {
    /*background: #2b2b2b;*/
}

.navbar-default {
    font-family: "Raleway";
    /*
    font-weight: 300;
    font-size: 28px;
    background-color: #ffffff;
    border-color: #1a798d;
    border-bottom-width: medium;
    */
}

.brand {
    float: left;
    display: block;
// Vertically center the text given @navbarHeight
@elementHeight: 48px;
    padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
    margin-left: -20px; // negative indent to left-align the text down the page
font-size: 20px;
    font-weight: 200;
    line-height: 1;
    color: @navbarBrandColor;
}

.navbar-default .navbar-brand {

}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #ff0000;
}
.navbar-default .navbar-text {
    color: #000000;
}
.navbar-default .navbar-nav > li > a {
    color: #000000;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #ff7f00;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #ff7f00;
    background-color: #000000;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #ff7f00;
    background-color: #000000;
}
.navbar-default .navbar-toggle {
    border-color: #000000;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #000000;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #000000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #000000;
}
.navbar-default .navbar-link {
    color: #000000;
}
.navbar-default .navbar-link:hover {
    color: #ff7f00;
}

/* navigation bar backgground */

.navbar-inverse {
    background: white;
}

.btn-navbar{
    background: orange;
}

hr {
    position: relative;
    border: none;
}

hr:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #ccc;
}

a img {
    /*background: white;*/
}

.odd a img {
    background: #f5f5f5;
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway";
    font-weight: 300;
    color: #333;
}
/* Paragraph & Typographic */
p {
    line-height: 28px;
    margin-bottom: 25px;
}

.centered {
    text-align: center;
}

.paragraph-lead {
    font-size: 20px;
    color: #3498db;
}

strong {
    font-weight: 700;
}

em {
    font-weight: 300;
}

pre {
    background: #ebebeb;
    border: none;
    font-family: "Monaco";
    font-size: 16px;
    color: #666;
    padding: 20px;
    line-height: 28px;
}

small {
    font-size: 12px;
}

blockquote,
blockquote p {
    line-height: 28px;
    color: #999;
    font-weight: 300;
    font-style: italic;
}

blockquote {
    position: relative;
    margin: 0 0 40px -30px;
    padding-left: 30px;
    border-left: 5px solid #3498db;
}

blockquote cite {
    position: absolute;
    bottom: -25px;
    right: 0;
    font-size: 12px;
    font-style: italic;
    color: #333;
    font-weight: 300;
}

blockquote cite:before {
    content: "-- "
}

/* Images */
.overflow-image {
    margin-top: -65px;
}

/* Links */
a {
    color: #ffffff;
    word-wrap: break-word;


    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #ff3200;
    text-decoration: underline;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}



/* ==========================================================================
   Wrap Sections
   ========================================================================== */
/*#headerScroller{
    height: 400px;
    position: relative;
    overflow: hidden;

}

#headerScroller > div{
    height: 400px;
    width: 35974px;

    position: absolute;
    top: 0;
    left: 0;
    height: 100%;

    -moz-transition:  opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    -webkit-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;

    -webkit-animation: moveSlideshow 140s linear infinite;
    -moz-animation:    moveSlideshow 140s linear infinite;

    /*
    -webkit-animation: moveSlideshow 10s linear forwards;
    -moz-animation:    moveSlideshow 10s linear forwards;
    */
/*
    background: url(../img/slider/1.jpg), url(../img/slider/2.jpg), url(../img/slider/3.jpg), url(../img/slider/4.jpg), url(../img/slider/5.jpg), url(../img/slider/6.jpg), url(../img/slider/7.jpg), url(../img/slider/8.jpg), url(../img/slider/9.jpg), url(../img/slider/10.jpg);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left 0px top 0px, left 4371px top 0px, left 7798px top 0px, left 11471px top 0px, left 12972px top 0px, left 16485px top 0px, left 20156px top 0px, left 23605px top 0px, left 28261px top 0px, left 31318px top 0px, left 35974px top 0px;

}

@-webkit-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -35974px; }
}
@-moz-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -35974px; }
}

*/

#headerwrap {
    background: url(../img/header_bg.jpg) no-repeat center top;
    margin-top: 50px;
    padding-top:120px;
    text-align:center;
    background-attachment: relative;
    background-position: center center;
    min-height: 650px;
    width: 100%;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#headerwrap h1 {
    color:#ffffff;
    margin-top: 90px;
    padding-bottom: 30px;
    letter-spacing: 8px;
    font-size: 100px;
    font-weight: bold;
    text-shadow: 2px 2px 2px #000;
}

#headerwrap p {
    color:#ffffff;
    font-size: 40px;
    font-weight: 400;
    text-align: center;
    line-height: 40px;
    letter-spacing: 3px;
    margin-left: 15px;
    text-shadow: 1px 1px 1px #000;
}

#greywrap {
    background: #f5f5f5;
    margin-top: 0px;
    padding-top: 40px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

#greywrap .callout {
    margin-bottom: 20px;
}

#greywrap p {
    margin-left: 30px;
    margin-right: 30px;
    letter-spacing: 1px;
    padding-top: 15px;
    padding-bottom: 15px;
}

#greywrap .icon {
    font-size: 60px;
    line-height: 30px;
    margin-bottom: 10px;
}

#orangewrap {
    background: #f50000;
    margin-top: 0px;
    padding-top: 40px;
    border-bottom: 0px solid #f50000;
    text-align: center;
    background-attachment: relative;
    background-position: center center;
    min-height: 650px;
    width: 100%;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#orangewrap .callout {
    margin-bottom: 20px;
}

#orangewrap h1 {
    color:#ffffff;
    background: #f50000;
    margin-top: 60px;
    padding-bottom: 30px;
    letter-spacing: 8px;
    font-family: "Raleway";
    font-size: 100px;
    font-weight: bold;
    text-shadow: 2px 2px 2px #000;
}
#orangewrap h2 {
    color:#ffffff;
    background: #f50000;
    margin-top: 50px;
    padding-bottom: 25px;
    letter-spacing: 7px;
    font-family: "Raleway";
    font-weight: bold;
    text-shadow: 2px 2px 2px #000;
}

#orangewrap p {
    color:#ffffff;
    margin-left: 30px;
    margin-right: 30px;
    letter-spacing: 1px;
    padding-top: 15px;
    padding-bottom: 15px;
}

#orangewrap .icon {
    font-size: 60px;
    line-height: 30px;
    margin-bottom: 10px;
}

#footerwrap {
    background: #2b2b2b;
    margin-top: 0px;
    padding-top: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

#footerwrap h4 {
    color: white;
}


/* ==========================================================================
   Box Sections
   ========================================================================== */

.white h1 {
    padding-top: 35px;
}

.white p {
    padding-top: 25px;
}

/* Section Dividers */
.section-divider {
    z-index: 999;
    width: 100%;
    display: table;
    max-height: 450px;
    border-bottom: 2px solid #E6EAED;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom: 70px;
    margin-top: 45px;


    background-position: center center;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-attachment: relative;

    text-align: center;
}

.textdivider h1 {
    padding-top: 70px;
    color: white;
    font-size: 40px;
}

.textdivider p {
    color: white;
    font-size: 25px;
}


/* Section Dividers Backgrounds  1. 	background-image: url('../img/bg/divider1.jpg')*/

.divider1 {
    color:#000000
    background:#ff4e00

}

.divider2 {
    background-image: url('../img/bg/divider2.jpg')
}

.divider3 {
    background-image: url('../img/product/shark_scale.png');
    margin-top: 0px;
}

.divider4 {
    background-image: url('../img/bg/divider4.jpg')
}

.divider6 {
    background-image: url('../img/bg/divider6.jpg')
}



/* ==========================================================================
   Services Section
   ========================================================================== */

.service-trigger {
    display: block;
    position: relative;
    margin-bottom: 15px;
    color: white;
    font-size: 20px;
    text-align: center;
    height: 168px;
    cursor: pointer;
    padding: 90px 20px 50px 20px;
    border: none;
    background: #333;
}

.service-trigger:before {
    width: 100%;
    top: 50px;
    color: #3498db;
    font-size: 36px;
    text-align: center;
    position: absolute;
    left: 0;
}

.service-active .service-trigger {
    background: #222;
}

.service-active p {
    font-family: 'Lato', sans-serif;
    padding-top: 10px;
}

.service-content {
    padding: 15px 20px;
    background: #e6eaed;
    display: block;
    height: auto
}

.service-content p:last-child {
    margin: 0;
}


/* ==========================================================================
   Image Mask
   ========================================================================== */

.grid figure {
    margin: 0;
    position: relative;
}

.grid figure img {
    width: 100%;
    display: block;
    position: relative;
}

.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    color: #fff;
    background: #3498db;
}

.grid figcaption h5 {
    margin: 0;
    padding-top: 0px;
    padding-left: 2px;
    padding-bottom: 5px;
    color: #fff;
    font-weight: 700;
    text-align: left;
    letter-spacing: 2px;

}

.grid figcaption a {
    text-align:center;
    padding: 5px 10px;
    margin-left: 20px;
    display: inline-block;
    /*background: #2f2f2f;*/
    color: #fff;
    font-size: 13px;
}

/* Caption Style */
.mask figure {
    overflow: hidden;
}

.mask figure img {
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

.no-touch .mask figure:hover img,
.mask figure.cs-hover img {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
}

.mask figcaption {
    height: 50px;
    width: 100%;
    top: auto;
    bottom: 0;
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .mask figure:hover figcaption,
.mask figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}

.mask figcaption a {
    position: absolute;
    top:5px;
    bottom: 5px;
    right: 5px;
}

/* Photo slider Clients List
=================================================================== */

.clients-carousel {
    border: 1px solid #f6f6f6;
    overflow: hidden;
}

.clients-carousel li {

    float: left;
    width: 120px;
    padding: 0px 20px;
    overflow: hidden;
    border-right: 1px solid #f6f6f6;
    margin-left: 1px;

}

.clients-carousel ul.clients {
    background: #fcfcfc;
}

.clients-carousel li img {
    float: none !important;
    margin: 0 auto !important;
    /*filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.clients-carousel li:hover {
    background: #fafafa;
}

.clients-carousel li img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Flexslider
=================================================================== */

/* Browser Resets
=================================================================== */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}


/* Necessary Styles
=================================================================== */
.flexslider {margin: 0; padding: 0;}

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li {position: relative;  zoom: 1; display: none; -webkit-backface-visibility: hidden;}
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flexslider {position: relative;  zoom: 1; z-index: 50;}

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

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* Default Styles
=================================================================== */
.flexslider {
    background: #fff;
    zoom: 1;
}

.ie7 .flexslider {margin-bottom: -30px;}

.flex-viewport {max-height: 2000px;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}


/* Direction Nav
=================================================================== */

.flex-direction-nav a {
    width: 35px;
    height: 35px;
    display: block;
    background-color: #555;
    top: 20px;
    right: 20px;
    float: none;
    position: absolute;
    cursor: pointer;
    text-indent: -9999px;
    background-color: #222;
    background: rgba(0, 0, 0, 0.65);
    *bottom: 50px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.flex-direction-nav .flex-next {
    background-image: url(../img/slider-control-right.png);
    background-repeat: no-repeat;
    background-position: 52% 50%;
}

.flex-direction-nav .flex-prev {
    margin-right: 36px;
    background-image: url(../img/slider-control-left.png);
    background-repeat: no-repeat;
    background-position: 48% 50%;
}

.flex-direction-nav .flex-prev:hover,
.flex-direction-nav .flex-next:hover {
    background-color:#72b626;
    opacity: 1;
}

.subpage .flex-direction-nav a {bottom: 0px; right: 0px; *bottom: 30px;}


/* Control Nav
=================================================================== */
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -30px;
    text-align: center;
}

.flex-control-nav li {
    margin: 0 3px 0 0;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.flex-control-paging li a {
    width: 14px;
    height: 14px;
    display: block;
    background: #c8c8c8;
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}

.flex-control-paging li a:hover,
.flex-control-paging li a.flex-active {
    background: #505050;
}

.flex-control-paging li a.flex-active {
    cursor: default;
}


/* Caption
=================================================================== */
.slide-caption {
    width: auto;
    max-width: 30%;
    padding: 10px 20px;
    margin: 0 0 0px 0px;
    position: absolute;
    display: block;
    left: 20px;
    bottom: 20px;
    background-color: #222;
    background: rgba(0, 0, 0, 0.7);
}

.slide-caption.n {background-color: #222; background: rgba(0, 0, 0, 0.6);}

.slide-caption h3 {
    color: #fff;
    font-size: 18px;
    margin:0;
    line-height: 33px;
}

.slide-caption p {
    margin:0;
    line-height: 19px;
    color: #bbb;
}








/* ==========================================================================
   text alb
   ========================================================================== */

p.alb, h1.alb, h2.alb, h3.alb, h4.alb, h5.alb, h6.alb , span.alb, dd.alb, #href.alb{
    color: #ffffff;
}





/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #000000;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ff0000;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ff0000;
        background-color: #000000;
    }
}

@media screen and (max-width:1050px), screen and (max-device-width:1050px){
    body .header{background-attachment: scroll;}
}


/*ipad portrait*/
@media only screen and (min-device-width:768px) and (max-device-width : 1024px) and (orientation : portrait){
    .header{background-attachment: scroll;}
}

@media screen and (max-width:769px) {
    #headerwrap h1 {
        font-size: 80px;
    }
    #headerwrap p {
        font-size: 30px;
        line-height: 38px;
    }
}