.slider,


.slider > div {


    /* Images default to Center Center. Maybe try 'center top'? */


    background-position: center center;


    display: block;


    width: 100%;


    height: 730px;


    /* height: 100vh; *//* If you want fullscreen */


    position:absolute;


	left:0px;


	right:0px;


	top:0px;


    background-size: cover;


    background-repeat: no-repeat;


    background-color: #000;


    overflow: hidden;


    -moz-transition: transform .4s;


    -o-transition: transform .4s;


    -webkit-transition: transform .4s;


    transition: transform .4s;


}





.slider > div {


    position: absolute;


}





.slider > i {


    color: #5bbd72;


    position: absolute;


    font-size: 60px;


    margin: 20px;


    bottom: 36%;


    text-shadow: 0 10px 2px #223422;


    transition: .3s;


    width: 30px;


    padding: 10px 13px;


    background: #fff;


    background: rgba(255, 255, 255, .3);


    cursor: pointer;


    line-height: 0;


    box-sizing: content-box;


    border-radius: 3px;


    z-index: 4;


}





.slider > i svg {


    margin-top: 3px;


}





.slider > .left {


    left: 10px;


}


.slider > .right {


    right: 10px;


}


.slider:hover > .left {


    left: 0;


}


.slider:hover > .right {


    right: 0;


}





.slider > i:hover {


    background:#fff;


    background: rgba(255, 255, 255, .8);


    transform: translateX(-2px);


}





.slider > i.right:hover {


    transform: translateX(2px);


}





.slider > i.right:active,


.slider > i.left:active {


    transform: translateY(1px);


}





.slider:hover > div {


    transform: scale(1.01);


}





.hoverZoomOff:hover > div {


    transform: scale(1);


}





.slider > ul {


    position: absolute;


    bottom: 10px;


    left: 50%;


    z-index: 4;


    padding: 0;


    margin: 0;


    transform: translateX(-50%);


}





.slider > ul > li {


    padding: 0;


    width: 14px;


    height: 14px;


    border-radius: 50%;


    list-style: none;


    float: left;


    margin: 7px 7px 0;


    cursor: pointer;


    border: 1px solid #fff;


    -moz-transition: .3s;


    -o-transition: .3s;


    -webkit-transition: .3s;


    transition: .3s;


}





.slider > ul > .showli {


    background-color: #7EC03D;


    -moz-animation: boing .5s forwards;


    -o-animation: boing .5s forwards;


    -webkit-animation: boing .5s forwards;


    animation: boing .5s forwards;


}





.slider > ul > li:hover {


    background-color: #7EC03D;


}





.slider > .show {


    z-index: 1;


}





.hideDots > ul {


    display: none;


}





.showArrows > .left {


    left: 0;


}





.showArrows > .right {


    right: 0;


}





.titleBar {


    z-index: 2;


    display: inline-block;


    background: rgba(0,0,0,.5);


    position: absolute;


    width: 100%;


    bottom: 0;


    transform: translateY(100%);


    padding: 20px 30px;


    transition: .3s;


    color: #fff;


}





.titleBar * {


    transform: translate(-20px, 30px);


    transition: all 700ms cubic-bezier(0.37, 0.31, 0.2, 0.85) 200ms;


    opacity: 0;


}





.titleBarTop .titleBar * {


    transform: translate(-20px, -30px);


}





.slider:hover .titleBar,


.slider:hover .titleBar * {


    transform: translate(0);


    opacity: 1;


}





.titleBarTop .titleBar {


    top: 0;


    bottom: initial;


    transform: translateY(-100%);


}





.slider > div span {


    display: block;


    background: rgba(0,0,0,.5);


    position: absolute;


    bottom: 0;


    color: #fff;


    text-align: center;


    padding: 0;


    width: 100%;


}








@keyframes boing {


    0% {


        transform: scale(1.2);


    }


    40% {


        transform: scale(.6);


    }


    60% {


        transform: scale(1.2);


    }


    80% {


        transform: scale(.8);


    }


    100% {


        transform: scale(1);


    }


}