﻿/* Slider CSS */

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* controls ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.slider                                         { background-size:auto; }
.slider .content                                { max-width:1200px }
.slider .column_Inner_Padding                   { padding:0; margin:0;}

.webnetBannerContainer, .webnetBanner           { width:100%; position:relative; }

/* font */
.slider h1, .slider h2                          { border-bottom:0; padding:0; }

/* slide */
.slide                                          { position:relative; width:100%; overflow:hidden; position:relative; }
.slide img                                      { width:100% !important; display:block; margin:0; }

/* slide > content */
.banner-left, .banner-right, .banner-top-left,
.banner-top-right, .banner-bottom-left, 
.banner-bottom-right, .banner-center, 
.banner-top-center, .banner-bottom-center       { position: absolute; top: 50%; max-width: 400px; padding:20px; background-color:rgba(0, 0, 0, 0.20);
                                                  transform: translate(0, -50%); -ms-transform: translate(0, -50%); 
                                                  -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); }

/* slide > content - positioning */
.banner-left                                    { left:0;}
.banner-right                                   { right:0; }
.banner-top-left                                { top:0; left:0; }
.banner-top-right                               { top:0; right:0;}
.banner-bottom-left                             { bottom:0; left:0; top:initial;  }
.banner-bottom-right                            { bottom:0; right:0; top:initial; }
.banner-center                                  { left:0; right:0; text-align:center; margin:0 auto; }
.banner-top-center                              { top:0; left:0; right:0; text-align:center; margin:0 auto; }
.banner-bottom-center                           { bottom:0; left:0; right:0; top:initial; text-align:center; margin:0 auto; }

/* slide > content - positioning reset*/
.banner-top-left, .banner-top-right,
.banner-bottom-left, .banner-bottom-right,
.banner-top-center, .banner-bottom-center       { transform:none; -ms-transform:none; -webkit-transform:none; -moz-transform:none; -o-transform: none; }

.banner-left, .banner-right, .banner-top-left,
.banner-top-right, .banner-bottom-left,
.banner-bottom-right                            { text-align:left; }


/* slider > navigation */
.webnetBannerContainer .slideForward            { right:0;}
.webnetBannerContainer .slideBack               { left:0; }
.webnetBannerContainer .slideForward,
.webnetBannerContainer .slideBack               { z-index:3; padding: 2% 0; opacity:0; filter:alpha(opacity = 80); position: absolute; top: 50%;
                                                  transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%);
                                                  transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.webnetBannerContainer .slideForward:hover, 
.webnetBannerContainer .slideBack:hover         { cursor:pointer; opacity:1; filter:alpha(opacity = 100); }
.webnetBannerContainer .slideForward span, 
.webnetBannerContainer .slideBack span          { display:none; }

/* slider > pagination */
.banner_spots                                   { width:100%; text-align:center; display:block; position:absolute; bottom:0; z-index:3;}
.banner_spots ul                                { list-style:none; margin:0.25em 0 0 0; padding:0; display:block; }
.banner_spots li                                { margin:0 0.25em; display:inline-block; }
.banner_spots li a                              { display:inline-block; width:1em; height:1em; overflow:hidden; }
.banner_spots li a                              { border-radius:0.5em; opacity: 0.3;}
.banner_spots li a:hover, 
.banner_spots li a.selected                     { opacity: 1;}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* appearance //////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.slider                                         { color:#fff; }
.slider                                         { /*background: #052A5B url(../images/crest-bg.png) no-repeat center;*/ background-color:#eee; }

/* font */
.slider h1, .slider h2                          { font-size: 3.8rem; line-height:3.8rem; }
.slider p                                       { font-size: 1.6rem; line-height:3.2rem; }

/* slider > navigation */
.webnetBannerContainer .slideForward,
.webnetBannerContainer .slideBack               { background:#0060ad; color:#fff; }
.webnetBannerContainer .slideForward:hover, 
.webnetBannerContainer .slideBack:hover         { background-color:#0060ad; }

/* slider > pagination */
.banner_spots li a                              { background:#707275;}
.banner_spots li a:hover, 
.banner_spots li a.selected                     { background:#656565;}

/* full width banner additional */
.slider .webnetBanner .slide {
    min-height: 220px;
    max-height:640px;
}

.bannerTextWrapper {
    text-align: center;
    display: block;
    margin: 0 auto;
    background-color:transparent;
    height:100%;
    max-width: 1200px;
    position: absolute;
    position: absolute; top: 50%; right:0; left:0;
    transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%);
    z-index: 1;
    width: 100%;
}

.bannerTextContent {
    height:100%;
}

.slide .btn {
    max-width:120px;
}

/* =================================================================================================================== */
/* fullWidth Slider Fallback  ======================================================================================== */
/* =================================================================================================================== */
@media only screen and (max-width: 960px) {

.slider .webnetBanner .slide {
    position: relative;
    min-height: 220px;
}

.slide img {
    min-width: 960px;
    max-width: none;
    position:absolute;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

}/*end*/

/* =================================================================================================================== */
/* tablet styles ===================================================================================================== */
/* =================================================================================================================== */
@media only screen and (max-width: 800px) {

.slider .content                                { padding:0; }
.slider .multi_Column_Layout                    { margin:0; padding: 0;  }
.slider .column_Inner_Padding                   { margin:0; padding: 0; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* controls ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* slide > content */
.banner-left, .banner-right, .banner-top-left,
.banner-top-right, .banner-bottom-left, 
.banner-bottom-right, .banner-center, 
.banner-top-center, .banner-bottom-center       { /*padding:10px;*/ /*max-width: 400px;*/ }

/* slide > content > extras */
.slide .btn                                     { max-width:80px; padding:8px 20px; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* appearance //////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* font */
.slider h1, .slider h2                          { font-size: 2.8rem; line-height:2.8rem; }
.slider p                                       { font-size: 1.4rem; line-height:2.4rem; }

}/* /end */

/* =================================================================================================================== */
/* mobile styles ===================================================================================================== */
/* =================================================================================================================== */
@media only screen and (max-width: 480px) {

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* controls ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* slider > navigation */
.webnetBannerContainer .slideForward img,
.webnetBannerContainer .slideBack img           { width:30px; height:30px; }


/* font */
.slider p                                       { display:none; }

/* slide > content > extras */
.slide .btn                                     { padding:4px 10px; font-size:1.2rem; margin-top:10px; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* appearance //////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* font */
.slider h1, .slider h2                          { font-size: 1.8rem; line-height:1.8rem; }


}/* /end */

@media only screen and (max-width: 320px) {}
@media only screen and (max-width: 280px) {}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* slider - version 2 //////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

a.version-01 {
    cursor: default;
}

    a.version-01 .banner-txt {
        height: 100%;
        transform: none;
        top: 0;
        text-align: center;
        background: none;
        padding: 0;
        width: auto;
        max-width: inherit;
    }

        a.version-01 .banner-txt.banner-left,
        a.version-01 .banner-txt.banner-right {
            height: 100%;
            transform: none;
            top: 0;
        }

        a.version-01 .banner-txt .btn {
            margin: 0 auto;
        }

        a.version-01 .banner-txt img {
            width: auto!important;
            max-height: 100%;
            max-width: 100%;
            cursor: pointer;
        }

@media only screen and (max-width: 960px) {
    a.version-01 .banner-txt img { 
        position:static; 
        top:0; 
        left:0; 
        -webkit-transform: none; 
        -moz-transform: none; 
        -ms-transform: none; 
        -o-transform: none; 
        transform: none; 
        min-width:0;
        min-width:initial;
    }

}

@media only screen and (max-width: 600px) {

    a.version-01 img {
        min-height: 0;
        position: relative;
        top: 0!important;
        -webkit-transform: translateY(0%) translateX(-50%);
        -moz-transform: translateY(0%) translateX(-50%);
        -ms-transform: translateY(0%) translateX(-50%);
        -o-transform: translateY(0%) translateX(-50%);
        transform: translateY(0%) translateX(-50%);
        min-width: 0;
        min-width: initial;
        margin: 0 auto;
    }

    a.version-01 .bannerTextWrapper {
        position: relative;
        transform: none;
        top: 0;
    }

    a.version-01 .bannerTextContent {
        height: 100%;
        transform: none;
        top: 0;
        display: block;
        position: relative;
        width: 100%;
        background: none;
    }

        a.version-01 .bannerTextContent .banner-txt {
            position: relative;
            margin: 0 auto;
            max-width: none;
        }

    a.version-01 .banner-txt img {
        max-width: 240px;
    }

    /* to change per project*/
    a.version-01 .bannerTextContent {
        background: #DC2333;
    }

}

@media only screen and (max-width: 480px) {

    a.version-01 > img {
        min-width: 480px!important;
    }
}