/*
* -----------------------------------------------------------------------------
*
* _
*
* -----------------------------------------------------------------------------
*/


.container .id-slide-item  .container {
    width: 100%;
}

/*
* ------------------------------------------------------------------
*
* Carousel Indications
*
* ------------------------------------------------------------------
*/

.carousel .carousel-indicators {
    top: 10px;
    bottom: auto;
}

.carousel .carousel-indicators > li {
    margin: auto 5px !important;
    vertical-align: middle;
    border-color: rgba(255,255,255,0.5);
}

.carousel .carousel-indicators .active {
    border-color: rgba(255,255,255,0.5);
    outline: none;
    background-color: rgba(255,255,255,0.5);
}

/*
* ------------------------------------------------------------------
*
* Parallax
*
* ------------------------------------------------------------------
*/


@media screen and (min-width: 1200px) {
    [data-parallax="1"] {
        background-attachment: fixed;
    }
}

/*
* -----------------------------------------------------------------------------
*
* _Slide Item
*
* -----------------------------------------------------------------------------
*/

.carousel a.id-slide-item * {transition: none}
.carousel a.id-slide-item {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: inherit;
    position: relative;
    width: 100%;
    min-height: 100%;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    /*height: 450px;*/
}
.carousel .id-slide-item {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: inherit;
    position: relative;
    width: 100%;
    min-height: 100%;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    /*height: 450px;*/
}



/*@media screen and (min-width: 768px) {
    .id-slide-item {
        height: 500px;
    }
}

@media screen and (min-width: 992px) {
    .id-slide-item {
        height: 500px;
    }
}*/

.id-slide-before.before-id-align-caption-left,
.id-slide-after.after-id-align-caption-left {

}

.id-slide-before,
.id-slide-after,
.id-slide-item::before,
.id-slide-item::after {
    content: '';
}

.id-align-caption-left,
.id-align-caption-right {
    text-align: center;
}



@media screen and (min-width: 768px) {
    .id-align-caption-left {
        text-align: left;
    }
    .id-align-caption-right {
        text-align: right;
    }
}
/*
* -----------------------------------------------------------------------------
*
* _Slide Item Anchor / Link
*
* -----------------------------------------------------------------------------
*/



a.id-slide-item {
    text-decoration: none;
}

a.id-slide-item:hover,
a.id-slide-item:focus {
    text-decoration: none;
    color: inherit;
}



/*
* ---------------------------------------------------------------
* Slide Caption Alignment
*
* # controls Vertical alignment of caption position
*
* ---------------------------------------------------------------
*/


.id-slide-item {
    display: block;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: column;
    -ms-flex-wrap: nowrap;
    -ms-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;

    -ms-flex-align: center;

    -o-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;

    -o-align-content: center;
    -ms-align-content: center;
    -moz-align-content: center;
    -webkit-align-content: center;
    align-content: center;

    -ms-flex-pack: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;

}

@media screen and (min-width: 1px) {

    .id-slide-item.id-flex-start {
        -ms-flex-pack: start;
        -o-justify-content: flex-start;
        -ms-justify-content: flex-start;
        -moz-justify-content: flex-start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .id-slide-item.id-flex-end {
        -ms-flex-pack: end;
        -o-justify-content: flex-end;
        -ms-justify-content: flex-end;
        -moz-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
}



/*
 * -----------------------------------------
 *
 * :( No Flexbox - ie 9 <---- insert Sad Face ):
 *
 * -----------------------------------------
*/



@media screen and (min-width: 992px) {

    .no-flexbox .id-caption-container {
        display: table;
        text-align: center;
        min-height: 100%;
        height: 100%;
    }

    .no-flexbox .id-caption-container > .id-caption-row {
        display: table-cell;
        width: 100%;
    }

    .no-flexbox .id-flex-start  .id-caption-container > * {
        vertical-align: top;
    }

    .no-flexbox .id-flex-center  .id-caption-container > * {
        vertical-align: middle;
    }

    .no-flexbox .id-flex-end  .id-caption-container > * {
        vertical-align: bottom;
    }

    .no-flexbox .id-align-elements--spacer {
        display: inline-block;
    }

}
/*
 * -----------------------------------------
 *
 * Caption Outer
 *
 * # controls horizontal alignment of caption position
 *
 * -----------------------------------------
*/

.id-slideshow-caption-outer > .id-slideshow-caption-inner {
    font-size: 0;
}
@media screen and (min-width: 992px) {

    .id-slideshow-caption-outer > .id-align-caption-center {
        text-align: center;
    }

    .id-slideshow-caption-outer > .id-align-caption-left {
        text-align: left;
    }

    .id-slideshow-caption-outer > .id-align-caption-right {
        text-align: right;
    }
}
/*
 * -----------------------------------------
 *
 * # controls vertical alignment of caption and image relationship
 *
 * -----------------------------------------
*/
.id-slideshow-caption-outer > .id-slideshow-caption-inner > * {
    font-size: 16px;
    font-size: 1rem;
    float: none;
    display: inline-block;
}

.id-slideshow-caption-outer > .id-align-elements-top > *  {
    vertical-align: top;
}

.id-slideshow-caption-outer > .id-align-elements-middle > *  {
    vertical-align: middle;
}

.id-slideshow-caption-outer > .id-align-elements-bottom > *  {
    vertical-align: bottom;
}



.id-slideshow-caption  {
    padding: 15px;
}

.id-slideshow-caption.wow  {
    animation-delay: 0.5s;
}


.slideshow-caption-default  {
    background-color: rgba(255,255,255,0.25);
}

.slideshow-caption-transparent  {
    background-color: rgba(0,0,0,0);
}

.slideshow-caption-inverse  {
    background-color: rgba(0,0,0,0.25);
}


@media screen and (min-width: 768px) {
    .carousel .id-slideshow-caption  {
        padding: 30px;
    }
}




/*
 * -----------------------------------------
 *
 * Mobile
 *
 * -----------------------------------------
*/
.id-mobile-caption {
    text-align: center;
}

.id-mobile-caption .well-lg {
    padding: 0;
    border-radius: 6px;
    background-color: transparent;
    border: none;
    padding: 0;
}

.id-slideshow-title-mobile,
.id-slideshow-message-mobile {
    margin: 1em auto;
}

/*
 * -----------------------------------------
 *
 * Text Content
 *
 * -----------------------------------------
*/

.slideshow-caption-text-light {
    color: #fff;
}


.id-slideshow-title h1,
.id-slideshow-title h2,
.id-slideshow-title h3,
.id-slideshow-title h4,
.id-slideshow-title h5,
.id-slideshow-title h6 {
    margin: 0.5ex auto;
    /*line-height: 1;*/
}


.slideshow-caption-text-default,
.slideshow-caption-text-default h1,
.slideshow-caption-text-default h2,
.slideshow-caption-text-default h3,
.slideshow-caption-text-default h4,
.slideshow-caption-text-default h5,
.slideshow-caption-text-default h6 {
    color: #fff;
}

.slideshow-caption-text-inverse,
.slideshow-caption-text-inverse h1,
.slideshow-caption-text-inverse h2,
.slideshow-caption-text-inverse h3,
.slideshow-caption-text-inverse h4,
.slideshow-caption-text-inverse h5,
.slideshow-caption-text-inverse h6 {
    color: #222;
}

.carousel .id-slideshow-caption h1 {
    font-size: 2em;
}


@media screen and (min-width: 992px) {

    .carousel .id-slideshow-caption h1 {
        font-size: 3.25em;
    }
}

.carousel .id-slideshow-caption h2 {
    font-size: 1.75em;
}


@media screen and (min-width: 768px) {

    .carousel .id-slideshow-caption h2 {
        font-size: 2em;
    }
}

@media screen and (min-width: 992px) {

    .carousel .id-slideshow-caption h2 {
        font-size: 2.5em;
    }
}

@media screen and (min-width: 1200px) {

    .carousel .id-slideshow-caption h2 {
        font-size: 3em;
    }
}

.id-slideshow-caption span.btn {
    margin: 1em auto;
}


@media screen and (max-width: 991px) {
    /*mobile device restriction*/
    .id-slideshow-feature-image >img {
        width: auto;
        height: auto;
        max-height: 200px;
    }

}


/*
 * -----------------------------------------
 *
 * Fade
 *
 * -----------------------------------------
*/

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb

https://codepen.io/redfrost/pen/QwWMwb
*/

/* Carousel Fading slide */
.carousel.carousel-fade .carousel-inner { background: #000; }
.carousel.carousel-fade .carousel-control { z-index: 2; }
.carousel.carousel-fade .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
}

.carousel-fade .next.left,
.carousel-fade .prev.right,
.carousel-fade .item.active { opacity: 1; }

.carousel-fade .active.left,
.carousel-fade .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}


/* Safari Fix */
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/*
* -----------------------------------------------------------------------------
*
* _Carousel Button
*
* -----------------------------------------------------------------------------
*/

.id-slideshow-button {
    padding-top: 15px;
}
/*
* -----------------------------------------------------------------------------
*
* _Carousel Control custom
*
* -----------------------------------------------------------------------------
*/

.carousel-control {
    width: auto;
    padding: 15px;
}


@media screen and (min-width: 1200px) {
    .carousel-control {
        width: 50px;
    }
}


.carousel-control .control-icon {
    font-size: 48px;
    height: 30px;
    margin-top: -15px;
    width: 30px;
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}

.carousel-control .prev {left: 50%; }
.carousel-control .next {right: 50%; }


/* Removing BS background */
.carousel .control-box { opacity: 0; }
a.carousel-control.left  { left: 0; background: none; border: 0;}
a.carousel-control.right { right: 0; background: none; border: 0;}


/* Animation */
.control-box, a.carousel-control, .carousel-indicators li {
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
    /* hardware acceleration causes Bootstrap carousel controlbox margin error in webkit */
    /* Assigning animation to indicator li will make slides flicker */
}


/*
Hover animation
*/
.carousel:hover .control-box { opacity: 1; }

.slideshow-carousel .glyphicon-chevron-left:before,
.slideshow-carousel .glyphicon-chevron-right:before {
    font-family: fontAwesome;
    font-size: 48px;
    margin-top: -30px;
}

.slideshow-carousel .glyphicon-chevron-left:before {
    content: "\f104";
}

.slideshow-carousel .glyphicon-chevron-right:before {
    content: "\f105";
}

/* Hover animation */
.slideshow-carousel .carousel-control { opacity: 0; }
.carousel:focus .carousel-control,
.carousel:hover .carousel-control {
    opacity: 1;
}
.carousel:hover a.carousel-control.left { left: 15px; }
.carousel:hover a.carousel-control.right { right: 15px; }


/*
* -----------------------------------------------------------------------------
*
* Hide Navigation
*
* -----------------------------------------------------------------------------
*/


[data-navigation="false"] .carousel-control,
[data-pagination="false"] .carousel-indicators {
    display: none;
}

/*
* ------------------------------------------------------------------------
*
* Scroll Icons CSS
*
* ------------------------------------------------------------------------
*/

p.id-scroll-icon-wrapper {
    margin: 0 auto;
    width: 100%;
}

.id-scroll-icon {
    display: block;
    width: 100%;
}

.id-scroll-icon > i.fa {
    position: absolute;
}

/*
* --------------------------------------------------
*
* Down
*
* --------------------------------------------------
*/

.id-scroll-icon-down {
    position: relative;
}

.id-scroll-icon-down > i.fa {
    font-size: 32px;
    position: absolute;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 30px;
    z-index: 9;
    height: 60px;
    width: 60px;
    padding: 15px;
    margin: 0 auto;
    margin-left: -30px;
    border-radius: 50% 50%;

    -webkit-transition: all 250ms ease-in .05s;
    -moz-transition: all 250ms ease-in .05s;
    -o-transition: all 250ms ease-in .05s;
    transition: all 250ms ease-in .05s;
}

.id-scroll-icon-down:hover > i.fa {
    /*color: #24305b;*/
    background-color: rgba(255,255,255,0.1);
    -webkit-transition: all 250ms ease-in .05s;
    -moz-transition: all 250ms ease-in .05s;
    -o-transition: all 250ms ease-in .05s;
    transition: all 250ms ease-in .05s;
}
/*
* --------------------------------------------------
*
* Up
*
* --------------------------------------------------
*/

.id-scroll-icon-up > i.fa {
    position: absolute;
    top: auto;
    left: 50%;
    right:auto;
    bottom: 0;
    margin: 0 auto;
    padding: 10px 0;
    z-index: 998;
    margin-left: -30px;
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
    height: 30px;
    width: 60px;
    -webkit-transition: all 250ms ease-in .05s;
    -moz-transition: all 250ms ease-in .05s;
    -o-transition: all 250ms ease-in .05s;
    transition: all 250ms ease-in .05s;
}

/*
* -----------------------------------------------------------------------------
*
* _Firefox Paralax background image attachment not fixed bug
*
* https://stackoverflow.com/questions/39633745/background-attachment-fixed-with-transform-not-working-in-firefox/43067630#43067630
*
* -----------------------------------------------------------------------------
*/

@-moz-document url-prefix() {
    .carousel-inner > .item.active, .carousel-inner > .item.next.left, .carousel-inner > .item.prev.right {
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/*
* ----------------------------------------------------------------
*
* Mosaic
*
* ----------------------------------------------------------------
*/


/*.mosaic-item {
    display: none;
}*/

.mosaic-canvas-inner .mosaic-item-caption {
    width: 100%;
    height: 100%;
    padding: 10%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    z-index: 1;
    position: relative;
}

@media screen and (min-width: 992px) {

    .mosaic-canvas {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        display: block;

        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -ms-flex-direction: column;
        -ms-flex-wrap: wrap;
        -ms-flex-flow: column wrap;
        -moz-flex-flow: column wrap;
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;

        -ms-flex-align: center;

        -o-align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        align-items: center;

        -o-align-content: center;
        -ms-align-content: center;
        -moz-align-content: center;
        -webkit-align-content: center;
        align-content: center;

        -ms-flex-pack: center;
        -o-justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .mosaic-canvas-inner {
        display: block;

        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
        -ms-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
    }

    .mosaic-canvas-inner,
    .mosaic-item {
        width: 50%;
        height: 100%;
        display: inline-block;
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
        background-size: cover;
        background-position: center center;
        margin: 0;
        position: relative;
    }

    .mosaic-item-background {
        position: absolute;
        height: 100% !important;
        left: 0;
        right: 0;
        /*        top: 0!important;
                bottom: 0!important;*/
        background-size: cover;
        background-position: center center;
        margin: 0;
        z-index: 0;
    }

    [data-count="4"] .mosaic-canvas-inner  .mosaic-item:nth-child(3) {
        width: 100%;
        height: 50%;
        -webkit-box-flex: 1 1 100%;
        -ms-flex:  1 1 100%;
        flex:  1 1 100%;
    }

    [data-count="4"] .mosaic-canvas-inner  .mosaic-item:nth-child(2),
    [data-count="4"] .mosaic-canvas-inner  .mosaic-item:nth-child(1) {
        width: 50%;
        height: 50%;
        -webkit-box-flex: 1 1 50%;
        -ms-flex:  1 1 50%;
        flex:  1 1 50%;
    }

    [data-count="5"] .mosaic-canvas-inner  .mosaic-item:nth-child(1n) {
        width: 50%;
        height: 50%;
        -webkit-box-flex: 1 1 50%;
        -ms-flex:  1 1 50%;
        flex:  1 1 50%;
    }
}


@media screen and (min-width: 1350px) {

    @media screen and (min-width: 992px) {
        .mosaic-canvas-inner .mosaic-item-caption {
            width: 50%;
        }
        /*        [data-parallax="1"] .mosaic-item-background {
                    background-attachment: fixed;
                }*/
    }
    .mosaic-item-caption p {
        margin-top: 0.5em;
        margin-bottom:  0.5em;
    }

    /*@media screen and (min-width: 992px) {

         .mosaic-canvas {
            -ms-flex-direction: column;
            -ms-flex-wrap: wrap;
            -ms-flex-flow: column wrap;
            -moz-flex-flow: column wrap;
            -webkit-flex-flow: column wrap;
            flex-flow: column wrap;
         }

        .mosaic-canvas .mosaic-item:nth-child(1) {
            width: 50%;
            height: 100%;
        }
        [data-count="3"] .mosaic-item:nth-child(2),
        [data-count="3"] .mosaic-item:nth-child(3) {
            width: 50%;
            height: 50%;
            -webkit-box-flex: 1 1 50%;
            -ms-flex:  1 1 50%;
            flex:  1 1 50%;
        }*/
}

@media screen and (min-width: 1200px) {

}