#slider { position: relative; width: 100%; height: 440px; background: #f9f9f9; border-top: 2px solid #174ebf; overflow: hidden; }
#slider .panel { position: absolute; width: 100%; height: 440px; background-position: center; background-repeat: no-repeat;
                 background-size: cover; visibility: hidden; opacity: 0;
                 -webkit-transition:visibility 0s linear 0.5s,opacity 0.5s linear;
                 -moz-transition: visibility 0s linear 0.5s,opacity 0.5s linear;
                 -ms-transition: visibility 0s linear 0.5s,opacity 0.5s linear;
                 -o-transition: visibility 0s linear 0.5s,opacity 0.5s linear;
                 transition: visibility 0s linear 0.5s,opacity 0.5s linear;
}
#slider .panel.current{ visibility: visible; opacity: 1; transition-delay: 0s; }
#slider .previous, #slider .next { display: none; }

#slider .panel .mobile-panel { height: 100%; }

.wrap { margin: 0; padding: 0; height: 440px; }
.banner-text-container { position: relative; z-index: 5; width: 60%; }
.banner-text-container.slide { width: 50%; height: 100%; }
.banner-text-container.slide a.button { position: absolute; bottom: 35px; background-color: #4b96ee; border-color: #4b96ee; color: #fff; }
.banner-text-container.slide a.button:hover { color: #fff;
                                              -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.6);
                                              -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.6);
                                              box-shadow: 0 5px 15px 0 rgba(0,0,0,0.6) }
.banner-text-container h1, .banner-text-container h2 { font-family: 'brandon_textlight'; font-size: 45px; color: #174ebf; margin: 0 0 40px; font-weight: 100; line-height: 1.2em; }
.banner-text-container p { font-family: 'brandon_text_regularregular'; font-size: 18px; line-height: 1.3em; color: #174ebf; margin: 0 0 15px; font-weight: 100; }
.panel-sites .banner-text-container h2 { font-size: 40px; line-height: 1.1em; }
.panel-sites .banner-text-container p { font-size: 16px; }
.banner-text-con { padding: 40px 0; text-align: left; height: 100%; }
.progress_bar { position: absolute; top: 435px; height: 5px; background: rgba(239,239,239,0.7); z-index: 5; }

.nav { position: absolute; z-index: 6; top: 400px; margin: 0; width: 100%; height: 20px; }
.nav ul { margin: 0; height: 80px; -webkit-padding-start: 0; -moz-padding-start: 0; }
.nav ul li { float: left; padding: 0; width: 20px; height: 20px; text-align: center; cursor: pointer; list-style: none; line-height: 20px; 
             color: #868686; font-size: 14px; font-family: "brandon_text_regularregular"; font-weight: 400; text-transform: none;
             -webkit-transition: all 0.2s ease-in-out;
             -moz-transition: all 0.2s ease-in-out;
             -ms-transition: all 0.2s ease-in-out;
             -o-transition: all 0.2s ease-in-out;
             transition: all 0.2s ease-in-out;
             -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
             -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.nav ul li span { display: inline-block; width: 12px; height: 12px; background: #d3d3d3;
                  border-radius: 90px; -webkit-border-radius: 90px; -moz-border-radius: 90px;
                  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.nav ul li:hover span, .nav ul li.current span { background: #174ebf; }

.scroll-lower { display: block; position: absolute; bottom: 0; right: 0; padding: 10px 15px; width: 230px; background-color: #4b96ee; 
                font-family: 'brandon_textblack'; font-size: 11px; color: #fff; text-transform: uppercase;
                border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
                -webkit-transition: all 0.2s ease-in-out;
                -moz-transition: all 0.2s ease-in-out;
                -ms-transition: all 0.2s ease-in-out;
                -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out; }
.scroll-lower:hover { color: #fff;
                      -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.6);
                      -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.6);
                      box-shadow: 0 5px 15px 0 rgba(0,0,0,0.6) }
.scroll-lower:after { display: block; position: absolute; top: 0; bottom: 0; right: 15px; margin: auto; width: 20px; height: 11px; 
                      font-family: 'FontAwesome'; font-size: 8px; content: "\f078"; text-align: right; }

@media only screen and (max-width: 1080px) {
    .banner-text-container.slide { width: 60%; }
    #slider .panel .mobile-panel { height: 480px; }
    .banner-text-container.slide a.button { bottom: 70px; }
}

@media only screen and (max-width: 780px) {
    #slider .panel { position: absolute; }
    #slider .panel .mobile-panel { height: 450px; }
    .wrap { margin: 0; padding: 0; }
    .banner-text-container { position: relative; width: 100%; }
    .banner-text-container.slide { width: 100%; }
    .banner-text-container h2 { font-size: 36px; margin: 0 0 30px; }
    .progress_bar { position: absolute; height: 5px; background: rgba(239,239,239,0.7); z-index: 5; }
    .nav ul { margin-left: 0; }
}

@media only screen and (max-width: 560px) {  
    #slider, #slider .panel, #slider .panel .mobile-panel, .wrap { height: 500px; }
    .progress_bar { top: 495px; }
    .nav { top: 460px; }
    .scroll-lower { display: none; }
    .banner-text-container.slide a.button { bottom: 50px; }
}

@media only screen and (max-width: 450px) {
    #slider, #slider .panel, #slider .panel .mobile-panel, .wrap { height: 600px; }
    .progress_bar { top: 595px; }
    .nav { top: 560px; }
}