/* override browser default */
html, body { margin: 0; padding: 0; }

/* use viewport-relative units to cover page fully */
body { height: 100vh; width: 100vw; background-color: black; }

/* include border and padding in element width and height */
* { box-sizing: border-box; }

/* full-sized  container that fills up the page */
.full-height { height: 100%; width: 100%; /* example padding, font-size, background, etc */ padding: 10px; font-size: 20px; }

.my-slider { height: 90vh; }

.slider-container { padding: 2rem 3rem; overflow: hidden; position: relative; /*background-color: red;*/ }
/*         .slider-container:before { content: ".slider-container"; position: absolute; left: 0; top: 0; color: blue; }
*/
.slider-item { height: 100%; background-color: black; padding: 4px; /*padding: 1.5rem 0.75rem;*/ position: relative; /*background-color: yellow;*/ }
/*         .slider-item:before { content: ".slider-item"; position: absolute; left: 0; top: 0; color: blue; }
*/
.slider-item:hover { cursor: pointer; }

.controls { margin: 0; padding: 0; color: #7d7d7d; list-style: none; position: absolute; left: 0; background: #333; width: 100%; top: 50%; transform: translatey(-50%); display: flex; align-items: center; justify-content: space-between; }
.controls:focus { outline: none; }
.controls li:hover { cursor: pointer; }

.card { height: 100%; text-align: center; margin: 0 auto; color: black; /*background-color: cyan;*/ background-color: rgba(0,0,0,0.7); padding-bottom: 0.75rem; font-family: sans-serif; overflow: hidden; box-shadow: 2px 2px rgba(0, 0, 0, 0.3); position: relative; }
/*         .card:before { content: ".card"; position: absolute; bottom: 0; color: blue; }
*/

.card h2 { margin: 0 0 0.25rem; }
.card p { margin: 0; padding: 0 0.5rem; }
.card img { vertical-align: central; }

.my-slider .sldoverlay { position: absolute; bottom: 0; left: 0; background-color: rgba(0,0,0,0.7); width: 100%; display: flex; align-items: center; color: white; }
.my-slider .sldtitle { color: white; font: 18px Tahoma, Helvetica, Arial, sans-serif; font-weight: bold; text-align: left; padding: 0px 0px 0px 10px; margin: 0px 0px 4px 6px; border-left: 5px solid #55b647; text-transform: uppercase; }
.my-slider .sldinfo { color: white; font-family: sans-serif; font-size: 12px; letter-spacing: 1px; text-align: left; }

.slidePre, .slideNext { background: url(/images/story/ipadRight.png) repeat; width: 102px; height: 95px; text-indent: -99999px; position: absolute; top: 40%; margin-left: 24px; z-index: 200; }
.slideNext { right: 0; background: url(/images/story/ipadLeft.png) repeat; margin: 0 12px 0 0; margin: 0 24px 0 0; }
.slidePre:hover, .slideNext:hover { color: black; }

.goTxtHome { height: 26px; line-height: 26px; position: absolute; right: 0; bottom: 50px; z-index: 200; }
.goTxtHome a { display: block; background: url(/images/story/home.png) no-repeat; padding-left: 30px; text-decoration: none; outline: none; cursor: pointer; }
.goTxtHome a span { background: #55b647; color: #fff; display: block; padding-right: 10px; font-size: 12px; }

.prev i { font-size: 2em; }
.next i { font-size: 2em; }

@media (min-width: 768px) {
    .prev i { font-size: 3em; }
    .next i { font-size: 3em; }
}

@media(min-width:1000px) {
    .prev i { font-size: 4em; }
    .next i { font-size: 4em; }
}

@media(min-width:1200px) {
    .prev i { font-size: 5em; }
    .next i { font-size: 5em; }
}