/* --------------- Base (Base Styles) --------------- */

#homegallery,
#homegallery>li { display: block; }
#homegallery { position: relative; overflow: hidden; height: 200px; background-color: #000; }
#homegallery>li { position: absolute; background-size: cover; display: none; top: 0; bottom: 0; left: 0; width: 100%; background-position: 33% 33%; }
#homegallery>li.lastSlide,
#homegallery>li.beforeLastSlide,
#homegallery>li.currentSlide,
#homegallery>li.nextSlide,
#homegallery>li.afterNextSlide { display: block; opacity: 0; }
#homegallery>li.beforeLastSlide { z-index: 0; left: -200%; opacity: 0;   transition: opacity linear 0.6s, left 0.7s; }
#homegallery>li.lastSlide { z-index: 1;       left: -100%; opacity: 0.25; transition: opacity linear 0.5s, left 0.7s; }
#homegallery>li.currentSlide { z-index: 2;    left: 0%;  opacity: 1;   transition: opacity linear 0.4s, left 0.7s; }
#homegallery>li.nextSlide { z-index: 1;       left: 100%;  opacity: 0.25; transition: opacity linear 0.5s, left 0.7s; }
#homegallery>li.afterNextSlide { z-index: 0;  left: 200%; opacity: 0;   transition: opacity linear 0.6s, left 0.7s; }
#homegallery>li.nextButton,
#homegallery>li.lastButton { cursor: pointer; z-index: 6; display: block; opacity: 0; transition: opacity 0.2s; border-radius: 20px; background: #444; box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5), -1px -1px 2px 0 rgba(128,128,128,0.5) inset; top: 20px; left: 20px; right: 20px; bottom: 20px; width: 40px; height: 40px; text-align: center; vertical-align: middle; color: #FFF; font-weight: bold; font-size: 24px; }
#homegallery>li.nextButton:after,
#homegallery>li.lastButton:after { content:""; display: inline-block; vertical-align:middle; height: 100%; }
#homegallery:hover>li.nextButton,
#homegallery:hover>li.lastButton { opacity: 0.5; }
#homegallery>li.nextButton:hover,
#homegallery>li.lastButton:hover { opacity: 0.8; }
#homegallery>li.nextButton { left: auto; top: auto; }
#homegallery>li.lastButton { right: auto; top: auto; }





/* --------------- SmMo (450px) --------------- */

@media (min-width : 450px) {
    #homegallery { height: 220px; }
}





/* --------------- LgMo (600px) --------------- */

@media (min-width: 600px) {
    #homegallery { height: 250px; }
    #homegallery>li { width: 80%; }
    #homegallery>li.beforeLastSlide { left: -150%; }
    #homegallery>li.lastSlide {       left: -70%; }
    #homegallery>li.currentSlide {    left: 10%; }
    #homegallery>li.nextSlide {       left: 90%; }
    #homegallery>li.afterNextSlide {  left: 170%; }
}





/* --------------- SmTb (750px) --------------- */

@media (min-width : 750px) {
    #homegallery { height: 300px; }
    #homegallery>li { width: 70%; }
    #homegallery>li.beforeLastSlide { left: -125%; }
    #homegallery>li.lastSlide {       left: -55%; }
    #homegallery>li.currentSlide {    left: 15%; }
    #homegallery>li.nextSlide {       left: 85%; }
    #homegallery>li.afterNextSlide {  left: 155%; }
}





/* --------------- LgTb (900px) --------------- */

@media (min-width : 900px) {
    #homegallery { height: 325px; }
    #homegallery>li { width: 60%; }
    #homegallery>li.beforeLastSlide { left: -100%; }
    #homegallery>li.lastSlide {       left: -40%; }
    #homegallery>li.currentSlide {    left: 20%; }
    #homegallery>li.nextSlide {       left: 80%; }
    #homegallery>li.afterNextSlide {  left: 140%; }
}





/* --------------- SmDk (1200px) --------------- */

@media (min-width : 1200px) {
    #homegallery { height: 360px; }
    #homegallery>li { width: 50%; }
    #homegallery>li.beforeLastSlide { left: -75%; }
    #homegallery>li.lastSlide {       left: -25%; }
    #homegallery>li.currentSlide {    left: 25%;  }
    #homegallery>li.nextSlide {       left: 75%;  }
    #homegallery>li.afterNextSlide {  left: 125%; }
}





/* --------------- MdDk (1500px) --------------- */

@media (min-width : 1500px) {
    #homegallery { height: 440px; }
}





/* --------------- LgDk (1800px) --------------- */

@media (min-width : 1800px) {
    /*   Insert Styles   */
}





/* --------------- ExLg (2250px) --------------- */

@media (min-width : 2250px) {
    /*   Insert Styles   */
}





/* --------------- SuLg (2700px) --------------- */

@media (min-width : 2700px) {
    /*   Insert Styles   */
}





/* --------------- UlLg (3150px) --------------- */

@media (min-width : 3150px) {
    /*   Insert Styles   */
}