/*-- fade in only animation--*/
@-webkit-keyframes fadeInOnly {
  0%   { 
    opacity: 0; 
    -webkit-transform: translate(0,0);
  }
  100% { 
    opacity: 1; 
    -webkit-transform: translate(0,0);
  }
}
@-moz-keyframes fadeInOnly {
  0%   { 
    opacity: 0; 
    -moz-transform: translate(0,0);
  }
  100% { 
    opacity: 1; 
    -moz-transform: translate(0,0);
  }
}
@keyframes fadeInOnly {
  0%   { 
    opacity: 0; 
    transform: translate(0,0);
  }
  100% { 
    opacity: 1; 
    transform: translate(0,0);
  }
}

/*-- fade in animation--*/
@-webkit-keyframes fadeIn {
  0%   { 
    opacity: 0; 
    visibility: visible;
    -webkit-transform: translate(0,0);
  }
  100% { 
    opacity: 1; 
    -webkit-transform: translate(0,0);
    visibility: visible;
  }
}
@-moz-keyframes fadeIn {
  0%   { 
    opacity: 0; 
    -moz-transform: translate(0,0);
    visibility: visible;
  }
  100% { 
    opacity: 1; 
    -moz-transform: translate(0,0);
    visibility: visible;
  }
}
@keyframes fadeIn {
  0%   { 
    opacity: 0; 
    transform: translate(0,0);
    visibility: visible;
  }
  100% { 
    opacity: 1; 
    transform: translate(0,0);
    visibility: visible;
  }
}

/*-- fade out animation--*/
@-webkit-keyframes fadeOut {
  0%   { 
    opacity: 1; 
    visibility: visible;
    -webkit-transform: translate(0,0);
  }
  100% { 
    opacity: 0; 
    -webkit-transform: translate(0,0);
    visibility: visible;
  }
}
@-moz-keyframes fadeOut {
  0%   { 
    opacity: 1; 
    -moz-transform: translate(0,0);
    visibility: visible;
  }
  100% { 
    opacity: 0; 
    -moz-transform: translate(0,0);
    visibility: visible;
  }
}
@keyframes fadeOut {
  0%   { 
    opacity: 1; 
    transform: translate(0,0);
    visibility: visible;
  }
  100% { 
    opacity: 0; 
    transform: translate(0,0);
    visibility: visible;
  }
}


/*-- hide content--*/
@-webkit-keyframes hideContent {
  0%   {
    visibility: hidden;
  }
  100% { 
    visibility: hidden;
  }
}
@-moz-keyframes hideContent {
  0%   {
    visibility: hidden;
  }
  100% { 
    visibility: hidden;
  }
}
@keyframes hideContent {
  0%   {
    visibility: hidden;
  }
  100% { 
    visibility: hidden;
  }
}

/*-- fade in down --*/
@-webkit-keyframes fadeInDown {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0, -20px);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInDown {
  0%   {
    visibility: visible;
    -moz-transform: translate(0, -20px);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInDown {
  0%   {
    visibility: visible;
    transform: translate(0, -20px);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- fade in down 100 --*/
@-webkit-keyframes fadeInDown100 {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0, -100%);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInDown100 {
  0%   {
    visibility: visible;
    -moz-transform: translate(0, -100%);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInDown100 {
  0%   {
    visibility: visible;
    transform: translate(0, -100%);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- fade in up --*/
@-webkit-keyframes fadeInUp {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInUp {
  0%   {
    visibility: visible;
    -moz-transform: translate(0, 20px);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0%   {
    visibility: visible;
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- fade in up 100 --*/
@-webkit-keyframes fadeInUp100 {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0, 100%);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInUp100 {
  0%   {
    visibility: visible;
    -moz-transform: translate(0, 100%);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInUp100 {
  0%   {
    visibility: visible;
    transform: translate(0, 100%);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- fade in right 100 --*/
@-webkit-keyframes fadeInRight100 {
  0%   {
    visibility: visible;
    -webkit-transform: translate(-100%, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInRight100 {
  0%   {
    visibility: visible;
    -moz-transform: translate(-100%, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInRight100 {
  0%   {
    visibility: visible;
    transform: translate(-100%, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- fade in right --*/
@-webkit-keyframes fadeInRight {
  0%   {
    visibility: visible;
    -webkit-transform: translate(-30px, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInRight {
  0%   {
    visibility: visible;
    -moz-transform: translate(-30px, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInRight {
  0%   {
    visibility: visible;
    transform: translate(-30px, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- fade in left 100 --*/
@-webkit-keyframes fadeInLeft100 {
  0%   {
    visibility: visible;
    -webkit-transform: translate(100%, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInLeft100 {
  0%   {
    visibility: visible;
    -moz-transform: translate(100%, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInLeft100 {
  0%   {
    visibility: visible;
    transform: translate(100%, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- fade in left --*/
@-webkit-keyframes fadeInLeft {
  0%   {
    visibility: visible;
    -webkit-transform: translate(30px, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInLeft {
  0%   {
    visibility: visible;
    -moz-transform: translate(30px, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInLeft {
  0%   {
    visibility: visible;
    transform: translate(30px, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- zoom out --*/
@-webkit-keyframes zoomOut {
  0%   {
    visibility: visible;
    -webkit-transform: scale(1.25, 1.25);
  }
  100% { 
    visibility: visible;
    -webkit-transform: scale(1, 1);
  }
}
@-moz-keyframes zoomOut {
  0%   {
    visibility: visible;
    -moz-transform: scale(1.25, 1.25);
  }
  100% { 
    visibility: visible;
    -moz-transform: scale(1, 1);
  }
}
@keyframes zoomOut {
  0%   {
    visibility: visible;
    transform: scale(1.25, 1.25);
  }
  100% { 
    visibility: visible;
    transform: scale(1, 1);
  }
}

/*-- zoom in --*/
@-webkit-keyframes zoomIn {
  0%   {
    visibility: visible;
    -webkit-transform: scale(0.75, 0.75);    
  }
  100% { 
    visibility: visible;
    -webkit-transform: scale(1, 1);
  }
}
@-moz-keyframes zoomIn {
  0%   {
    visibility: visible;
    -moz-transform: scale(0.75, 0.75);
  }
  100% { 
    visibility: visible;
    -moz-transform: scale(1, 1);
  }
}
@keyframes zoomIn {
  0%   {
    visibility: visible;
    transform: scale(0.75, 0.75);
  }
  100% { 
    visibility: visible;
    transform: scale(1, 1);
  }
}

/*-- rotate 360 --*/
@-webkit-keyframes rotate360 {
  0%   {
    visibility: visible;
    -webkit-transform: rotate(1deg);
  }
  100% { 
    visibility: visible;
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate360 {
  0%   {
    visibility: visible;
    -moz-transform: rotate(1deg);
  }
  100% { 
    visibility: visible;
    -moz-transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  0%   {
    visibility: visible;
    transform: rotate(1deg);
  }
  100% { 
    visibility: visible;
    transform: rotate(360deg);
  }
}

/*-- slide in up --*/
@-webkit-keyframes slideInUp {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0,100%);
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0,0);
  }
}
@-moz-keyframes slideInUp {
  0%   {
    visibility: visible;
    -moz-transform: translate(0,100%);
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0,0);
  }
}
@keyframes slideInUp {
  0%   {
    visibility: visible;
    transform: translate(0,100%);
  }
  100% { 
    visibility: visible;
    transform: translate(0,0);
  }
}

/*-- slide in down --*/
@-webkit-keyframes slideInDown {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0,-100%);
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0,0);
  }
}
@-moz-keyframes slideInDown {
  0%   {
    visibility: visible;
    -moz-transform: translate(0,-100%);
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0,0);
  }
}
@keyframes slideInDown {
  0%   {
    visibility: visible;
    transform: translate(0,-100%);
  }
  100% { 
    visibility: visible;
    transform: translate(0,0);
  }
}

/*-- slide in right --*/
@-webkit-keyframes slideInRight {
  0%   {
    visibility: visible;
    -webkit-transform: translate(-100%,0);
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0,0);
  }
}
@-moz-keyframes slideInRight {
  0%   {
    visibility: visible;
    -moz-transform: translate(-100%,0);
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0,0);
  }
}
@keyframes slideInRight {
  0%   {
    visibility: visible;
    transform: translate(-100%,0);
  }
  100% { 
    visibility: visible;
    transform: translate(0,0);
  }
}

/*-- slide in left --*/
@-webkit-keyframes slideInLeft {
  0%   {
    visibility: visible;
    -webkit-transform: translate(100%,0);
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0,0);
  }
}
@-moz-keyframes slideInLeft {
  0%   {
    visibility: visible;
    -moz-transform: translate(100%,0);
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0,0);
  }
}
@keyframes slideInLeft {
  0%   {
    visibility: visible;
    transform: translate(100%,0);
  }
  100% { 
    visibility: visible;
    transform: translate(0,0);
  }
}


/*-- slide out left --*/
@-webkit-keyframes slideOutLeft {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0,0);
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(-100%,0);
  }
}
@-moz-keyframes slideOutLeft {
  0%   {
    visibility: visible;
    -moz-transform: translate(0,0);
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(-100%,0);
  }
}
@keyframes slideOutLeft {
  0%   {
    visibility: visible;
    transform: translate(0,0);
  }
  100% { 
    visibility: visible;
    transform: translate(-100%,0);
  }
}

/*-- zoom out and fade out --*/
@-webkit-keyframes zoomOutAndFadeOut {
  0%   {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1,1);
  }
  100% { 
    visibility: visible;
    opacity: 0;
    -webkit-transform: scale(0.2, 0.2);
  }
}
@-moz-keyframes zoomOutAndFadeOut {
  0%   {
    visibility: visible;
    opacity: 1;
    -moz-transform: scale(1,1);
  }
  100% { 
    visibility: visible;
    opacity: 0;
    -moz-transform: scale(0.2, 0.2);
  }
}
@keyframes zoomOutAndFadeOut {
  0%   {
    visibility: visible;
    opacity: 1;
    transform: scale(1,1);
  }
  100% { 
    visibility: visible;
    opacity: 0;
    transform: scale(0.2, 0.2);
  }
}

/*-- rotate and zoom in--*/
@-webkit-keyframes rotateRightAndZoomIn {
  0%   {
    visibility: visible;
    -webkit-transform: scale(0.01, 0.01) rotate(1deg);
  }
  100% { 
    visibility: visible;
    -webkit-transform: scale(1, 1) rotate(360deg);
  }
}
@-moz-keyframes rotateRightAndZoomIn {
  0%   {
    visibility: visible;
    -moz-transform: scale(0.01, 0.01) rotate(1deg);
  }
  100% { 
    visibility: visible;
    -moz-transform: scale(1, 1) rotate(360deg);
  }
}
@keyframes rotateRightAndZoomIn {
  0%   {
    visibility: visible;
    transform: scale(0.01, 0.01) rotate(1deg);
  }
  100% { 
    visibility: visible;
    transform: scale(1, 1) rotate(360deg);
  }
}

/*-- rotate left and zoom in--*/
@-webkit-keyframes rotateLeftAndZoomIn {
  0%   {
    visibility: visible;
    -webkit-transform: scale(0.01, 0.01) rotate(359deg);
  }
  100% { 
    visibility: visible;
    -webkit-transform: scale(1, 1) rotate(0deg);
  }
}
@-moz-keyframes rotateLeftAndZoomIn {
  0%   {
    visibility: visible;
    -moz-transform: scale(0.01, 0.01) rotate(359deg);
  }
  100% { 
    visibility: visible;
    -moz-transform: scale(1, 1) rotate(0deg);
  }
}
@keyframes rotateLeftAndZoomIn {
  0%   {
    visibility: visible;
    transform: scale(0.01, 0.01) rotate(359deg);
  }
  100% { 
    visibility: visible;
    transform: scale(1, 1) rotate(0deg);
  }
}

/*-------------------------------------------*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.absolute {
  position: absolute;
}

.container{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 250px;
  display: block;
}

.banner-container{
  overflow: hidden;
  background-color: #ffffff;
}

.content-hide-ie {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  z-index: 0;

  -webkit-animation: fadeInOnly 10ms ease-in-out 0s forwards;
  -moz-animation: fadeInOnly 10ms ease-in-out 0s forwards;
  animation: fadeInOnly 10ms ease-in-out 0s forwards;
}

.content-container{
  -webkit-animation: hideContent 10ms ease-in-out 0s forwards;
  -moz-animation: hideContent 10ms ease-in-out 0s forwards;
  animation: hideContent 10ms ease-in-out 0s forwards;
}

.content{
  background-color: #ffffff;
  -webkit-animation: fadeIn 0.75s ease-in-out 0.5s forwards;
  -moz-animation: fadeIn 0.75s ease-in-out 0.5s forwards;
  animation: fadeIn 0.75s ease-in-out 0.5s forwards;
  overflow: hidden;
}

.content-wrapper { 
  -webkit-animation: hideContent 10ms ease-in-out 0s forwards;
  -moz-animation: hideContent 10ms ease-in-out 0s forwards;
  animation: hideContent 10ms ease-in-out 0s forwards; 
}

.bg {
  background: url("./images/300x250_d_bg1.jpg");
  -webkit-animation: fadeIn 0.75s ease-in-out 0.5s forwards;
  -moz-animation: fadeIn 0.75s ease-in-out 0.5s forwards;
  animation: fadeIn 0.75s ease-in-out 0.5s forwards;
}
.cta {
  background: url("./images/300x250_d_cta.png");
  -webkit-animation: fadeIn 0.75s ease-in-out 0.5s forwards;
  -moz-animation: fadeIn 0.75s ease-in-out 0.5s forwards;
  animation: fadeIn 0.75s ease-in-out 0.5s forwards;
}
.image1 {
  background: url("./images/300x250_d_image1.png");
  -webkit-animation: fadeIn 0.75s ease-in-out 0.75s forwards;
  -moz-animation: fadeIn 0.75s ease-in-out 0.75s forwards;
  animation: fadeIn 0.75s ease-in-out 0.75s forwards;
}
.text1_1 {
  background: url("./images/300x250_d_text1_1.png");
  -webkit-animation: fadeInLeft 0.75s ease-in-out 1s forwards;
  -moz-animation: fadeInLeft 0.75s ease-in-out 1s forwards;
  animation: fadeInLeft 0.75s ease-in-out 1s forwards;
}
.text1_2 {
  background: url("./images/300x250_d_text1_2.png");
  -webkit-animation: fadeInLeft 0.75s ease-in-out 1.5s forwards;
  -moz-animation: fadeInLeft 0.75s ease-in-out 1.5s forwards;
  animation: fadeInLeft 0.75s ease-in-out 1.5s forwards;
}
.text1_3 {
  background: url("./images/300x250_d_text1_3.png");
  -webkit-animation: fadeInLeft 0.75s ease-in-out 2s forwards;
  -moz-animation: fadeInLeft 0.75s ease-in-out 2s forwards;
  animation: fadeInLeft 0.75s ease-in-out 2s forwards;
}
.redline1 {
  background: url("./images/300x250_d_redline1.png");
  -webkit-animation: fadeInRight 0.75s ease-in-out 2.75s forwards;
  -moz-animation: fadeInRight 0.75s ease-in-out 2.75s forwards;
  animation: fadeInRight 0.75s ease-in-out 2.75s forwards;
}
.redx {
  background: url("./images/300x250_d_redx.png");
  -webkit-animation: fadeIn 0.5s ease-in-out 3.75s forwards;
  -moz-animation: fadeIn 0.5s ease-in-out 3.75s forwards;
  animation: fadeIn 0.5s ease-in-out 3.75s forwards;
}

.bg2 {
  background: url("./images/300x250_d_bg2.jpg");
  -webkit-animation: fadeIn 0.75s ease-in-out 5.5s forwards;
  -moz-animation: fadeIn 0.75s ease-in-out 5.5s forwards;
  animation: fadeIn 0.75s ease-in-out 5.5s forwards;
}
.text2_1 {
  background: url("./images/300x250_d_text2_1.png");
  -webkit-animation: fadeInLeft 0.75s ease-in-out 6s forwards;
  -moz-animation: fadeInLeft 0.75s ease-in-out 6s forwards;
  animation: fadeInLeft 0.75s ease-in-out 6s forwards;
}
.text2_2 {
  background: url("./images/300x250_d_text2_2.png");
  -webkit-animation: fadeInLeft 0.75s ease-in-out 6.5s forwards;
  -moz-animation: fadeInLeft 0.75s ease-in-out 6.5s forwards;
  animation: fadeInLeft 0.75s ease-in-out 6.5s forwards;
}
.text2_3 {
  background: url("./images/300x250_d_text2_3.png");
  -webkit-animation: fadeInLeft 0.75s ease-in-out 7s forwards;
  -moz-animation: fadeInLeft 0.75s ease-in-out 7s forwards;
  animation: fadeInLeft 0.75s ease-in-out 7s forwards;
}
.redline2 {
  background: url("./images/300x250_d_redline2.png");
  -webkit-animation: fadeInRight 0.75s ease-in-out 7.75s forwards;
  -moz-animation: fadeInRight 0.75s ease-in-out 7.75s forwards;
  animation: fadeInRight 0.75s ease-in-out 7.75s forwards;
}