Team:Edinburgh OG/CSS:slider

/* --------------------------------

Primary style

---

*/

.cd-words-wrapper {

 display: inline-block;
 position: relative;
 text-align: left;

}

.cd-words-wrapper b {

 display: inline-block;
 position: absolute;
 white-space: nowrap;
 left: 0;
 top: 0;

}

.cd-words-wrapper b.is-visible {

 position: relative;

}

.no-js .cd-words-wrapper b {

 opacity: 0;

}

.no-js .cd-words-wrapper b.is-visible {

 opacity: 1;

}

xslide -------------------------------- */ .cd-headline.slide span {

 display: inline-block;
 padding: .2em 0;

}

.cd-headline.slide .cd-words-wrapper {

 overflow: hidden;
 vertical-align: top;
 width: auto!important;

}

.cd-headline.slide b {

 opacity: 0;
 top: .2em;

}

.cd-headline.slide b.is-visible {

 top: 0;
 opacity: 1;
 -webkit-animation: slide-in 0.6s;
 -moz-animation: slide-in 0.6s;
 animation: slide-in 0.6s;

}

.cd-headline.slide b.is-hidden {

 -webkit-animation: slide-out 0.6s;
 -moz-animation: slide-out 0.6s;
 animation: slide-out 0.6s;

}

@-webkit-keyframes slide-in {

 0% {
   opacity: 0;
   -webkit-transform: translateY(-100%);
 }
 60% {
   opacity: 1;
   -webkit-transform: translateY(20%);
 }
 100% {
   opacity: 1;
   -webkit-transform: translateY(0);
 }

}

@-moz-keyframes slide-in {

 0% {
   opacity: 0;
   -moz-transform: translateY(-100%);
 }
 60% {
   opacity: 1;
   -moz-transform: translateY(20%);
 }
 100% {
   opacity: 1;
   -moz-transform: translateY(0);
 }

}

@keyframes slide-in {

 0% {
   opacity: 0;
   -webkit-transform: translateY(-100%);
   -moz-transform: translateY(-100%);
   -ms-transform: translateY(-100%);
   -o-transform: translateY(-100%);
   transform: translateY(-100%);
 }
 60% {
   opacity: 1;
   -webkit-transform: translateY(20%);
   -moz-transform: translateY(20%);
   -ms-transform: translateY(20%);
   -o-transform: translateY(20%);
   transform: translateY(20%);
 }
 100% {
   opacity: 1;
   -webkit-transform: translateY(0);
   -moz-transform: translateY(0);
   -ms-transform: translateY(0);
   -o-transform: translateY(0);
   transform: translateY(0);
 }

}

@-webkit-keyframes slide-out {

 0% {
   opacity: 1;
   -webkit-transform: translateY(0);
 }
 60% {
   opacity: 0;
   -webkit-transform: translateY(120%);
 }
 100% {
   opacity: 0;
   -webkit-transform: translateY(100%);
 }

}

@-moz-keyframes slide-out {

 0% {
   opacity: 1;
   -moz-transform: translateY(0);
 }
 60% {
   opacity: 0;
   -moz-transform: translateY(120%);
 }
 100% {
   opacity: 0;
   -moz-transform: translateY(100%);
 }

}

@keyframes slide-out {

 0% {
   opacity: 1;
   -webkit-transform: translateY(0);
   -moz-transform: translateY(0);
   -ms-transform: translateY(0);
   -o-transform: translateY(0);
   transform: translateY(0);
 }
 60% {
   opacity: 0;
   -webkit-transform: translateY(120%);
   -moz-transform: translateY(120%);
   -ms-transform: translateY(120%);
   -o-transform: translateY(120%);
   transform: translateY(120%);
 }
 100% {
   opacity: 0;
   -webkit-transform: translateY(100%);
   -moz-transform: translateY(100%);
   -ms-transform: translateY(100%);
   -o-transform: translateY(100%);
   transform: translateY(100%);
 }

}

/* --------------------------------