html { div { overflow:auto; } html { overflow: -moz-scrollbars-vertical; } body { background-image: url(background-gradient.png); background-repeat: repeat-x; } a, a:visited, a:active { color:black; text-decoration: none; } nav { font-family: 'Courier'; font-size:13px; right: 10px; top: 5px; text-align: right; text-shadow: 3px 3px 3px rgba(200,205,100,1); } nav ul { list-style-type: none; } #poem { font-size: 14px; font-family: Courier, Arial, sans-serif; position: scroll; color:black; top: 5px; left: 5px; } #poem { font-size: 10.5px; font-family: Helvetica, Arial, sans-serif; position: fixed; top: 5px; left: 5px; } #key { background-image: url(the-female-key-icon2.gif); background-repeat: repeat-x; width: 300px; position:relative; top: 30%; left: 40%; top: 0; } #key a { position: relative; font-size: 20px; color: #000; text-shadow: 2px 2px 2px grey; } #key table, #key th, #key tr, #key td { border: none; } .cathand img { position:fixed; left:0px; bottom:20px; } #overlay{ display: block; position:fixed; width: 100%; heigth: 100%; } .notbold{ font-weight:normal } @import "bourbon"; html { min-height: 100%; } body { height: 100%; } // length of each slide in seconds $animation-delay: 6s; .slideshow { list-style: none; z-index: 1; li { span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; // multiply slide duration by the total number of slides @include animation(imageAnimation $animation-delay * 4 linear infinite 0s); } h3 { position: absolute; text-align: center; z-index: 2; bottom: 150px; left: 0; right: 0; opacity: 0; font-size: em(65px); font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; color: #fff; // multiply slide duration by the total number of slides @include animation(titleAnimation $animation-delay * 4 linear 1 0s); @media only screen and (min-width: 768px) { bottom: 30px; font-size: em(130px); } @media only screen and (min-width: 1024px) { font-size: em(175px); } } } @import "bourbon"; html { min-height: 100%; } body { height: 100%; } // length of each slide in seconds $animation-delay: 6s; .slideshow { list-style: none; z-index: 1; li { span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; // multiply slide duration by the total number of slides @include animation(imageAnimation $animation-delay * 4 linear infinite 0s); } h3 { position: absolute; text-align: center; z-index: 2; bottom: 150px; left: 0; right: 0; opacity: 0; font-size: em(65px); font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; color: #fff; // multiply slide duration by the total number of slides @include animation(titleAnimation $animation-delay * 4 linear 1 0s); @media only screen and (min-width: 768px) { bottom: 30px; font-size: em(130px); } @media only screen and (min-width: 1024px) { font-size: em(175px); } .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow:after { content: ''; background: url(IMG_4541.jpg) repeat top left; } body { background-image: url("Animated-moving-blinking-eye-in-the-wall-picture.GIF"); background-repeat: repeat-y; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; animation: imageAnimation 36s linear infinite 0s; } .cb-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; animation: titleAnimation 36s linear infinite 0s; } .cb-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; } .cb-slideshow li:nth-child(1) span { background-image: url(Animated-moving-blinking-eye-in-the-wall-picture.GIF) } .cb-slideshow li:nth-child(2) span { background-image: url(Designer_Plus-Silver_Cloud.jpg); animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { background-image: url(eyes.jpg); animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { background-image: url(RunRestaurant_PaulaCourt-07.JPG); animation-delay: 18s; } .cb-slideshow li:nth-child(2) div { animation-delay: 6s; } .cb-slideshow li:nth-child(3) div { animation-delay: 12s; } .cb-slideshow li:nth-child(4) div { animation-delay: 18s; } .cb-slideshow li:nth-child(5) div { animation-delay: 24s; } .cb-slideshow li:nth-child(6) div { animation-delay: 30s; } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }
iSn't She Home