/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position: fixed;
	width: 100%;
    z-index: 15;
	    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
	-webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  background: #fff
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    /*margin-bottom: 60px;*/

    /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    margin-top: 5px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
    /* or, don't declare height, because we want the element to scale.
    height: 500px;*/
    background-color: #777;
}

.carousel-inner > .item > img {
    /*position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;*/
    margin-left: auto;
    margin-right: auto;
}

.spritearrow {
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    width: 65px;
    height: 65px;
    display: inline-block;
    left: 20%;
    position: absolute;
    top: 45%;
    z-index: 20;
}

.spritearrow-left {
    background-position: 0px -88px;
}

.spritearrow-right {
    background-position: 0px -153px;
    left: auto;
    right: 20%;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
    /* or, don't */
    padding-left: 0px;
    padding-right: 0px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    text-align: center;
    margin-bottom: 20px;
}

.marketing .col-lg-4 p {
    margin-left: 10px;
    margin-right: 10px;
}

/* Featurettes
------------------------- */

.featurette-divider {
    margin: 20px 0; /* Space out the Bootstrap <hr> more */
    color: #fff;
    border-top-color: #fff;
}

.featurette-divider.short {
    margin: 0px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}

.featurette {
    position: relative;
}

.featurette-inner {
    position: absolute;
    top: 20%;
}

.featurette-inner-inner {
    /*background-color:#fff;*/
    background: url(../images/whitetransbg.png) repeat;
    padding: 5%;
    margin-bottom: 0px;
}

ul.featurette-inner-inner {
    display: table;
    width: 100%;
    list-style-type: none;
    background: none;
    padding: 0;
}

ul.featurette-inner-inner li {
    display: block;
    float: left;
    margin: 1% 0px 0px 1%;
    height: 90px;
}

ul.featurette-inner-inner li:first-child {
    margin-left: 0px;
}

ul.featurette-inner-inner li span {
    display: table;
    width: 100%; /*background-color:#fff;*/
    background: url(../images/whitetransbg.png) repeat;
    height: 90px;
    position: relative;
    text-transform: uppercase;
    transition: color .5s, background-color .5s;
    -webkit-transition: color .5s, background-color .5s; /* Safari */
}

ul.featurette-inner-inner li a:hover {
    color: #fff;
    text-decoration: none;
}

ul.featurette-inner-inner li span a {
    display: table-cell;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

ul.sixcols li span {
    display: table;
    width: 100%; /*background-color:#fff;*/
    background: url(../images/whitetransbg.png) repeat;
    height: 90px;
    position: relative;
    text-transform: uppercase;
    transition: color .5s, background-color .5s;
    -webkit-transition: color .5s, background-color .5s; /* Safari *//*-ms-word-break: break-all;*/

    /* Be VERY careful with this, breaks normal words wh_erever */
    /*word-break: break-all;*/

    /* Non standard for webkit */
    /*word-break: break-word;*/

    /*-webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;*/
    letter-spacing: -0.5px;
}

ul.sixcols li {
    width: 15.6%;
    word-wrap: break-word;
}

ul.sixcols li:first-child {
    width: 17%;
}

ul.fivecols li {
    width: 19%;
}

ul.fivecols li:first-child {
    width: 20%;
}

ul.fourcols li {
    width: 24%;
}

ul.fourcols li:first-child {
    width: 25%;
}

ul.threecols li {
    width: 32%;
}

ul.threecols li:first-child {
    width: 34%;
}
ul.twocols li {
    width: 48%;
}

ul.twocols li:first-child {
    width: 51%;
}

.blue h2, .blue a {
    color: #00b6de;
}

.blue, .blue ul.featurette-inner-inner li a:hover {
    background-color: #00b6de;
}

.orange h2, .orange a {
    color: #fe7659;
}

.orange, .orange ul.featurette-inner-inner li a:hover {
    background-color: #fe7659;
}

.green h2, .green a {
    color: #56dea7;
}

.green, .green ul.featurette-inner-inner li a:hover {
    background-color: #56dea7;
}

@media (max-width: 992px) {
    .featurette-inner {
        top: 5%;
    }
}

@media (max-width: 768px) {
    .featurette-inner {
        position: static;
        margin-bottom: 3%;
        margin-top: 3%;
    }

    .featurette img {
        display: none;
    }

    .featurette-inner-inner, ul.featurette-inner-inner li span {
        background-color: #fff;
    }

    ul.featurette-inner-inner {
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }

    ul.featurette-inner-inner li {
        display: block;
        float: none;
        height: auto;
        margin: 1% 0 0 0 !important;
        width: 100% !important;
    }

    ul.featurette-inner-inner li a, ul.featurette-inner-inner li a span {
        height: auto;
    }
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

    /* Remove the edge padding needed for mobile */
    .marketing {
        padding-left: 0;
        padding-right: 0;
    }

    /* Navbar positioning foo */
    .navbar-wrapper {
/*        margin-top: 30px;*/
    }

    /* The navbar becomes detached from the top, so we round the corners */
    .navbar-wrapper .navbar {

    }

    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 20px;
        font-size: 21px;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }

}

@media (min-width: 992px) {
    .featurette-heading {
        margin-top: 0px;
    }
}

@media (max-width: 767px) {


}