.move1{

    transform:translateY(-66px)


}







.move2{

    transform:translateY(-45px)


}

.toleft{

  position: absolute;
  top: 30%;
    left: 25%;
    transform: rotateZ(90deg);
    z-index: 22;

}

.toleft2 {
  position: absolute;
  top: 30%;
  left: 10%;
  transform: rotateZ(
90deg
);
  z-index: 22;
}

.toleft3 {
  position: absolute;
  top: 60%;
  left: 25%;
  transform: rotateZ( 
90deg
);
  z-index: 22;
}

.toright{
  position: absolute;
  top: 27%;
  left: 86%;
z-index: 22;
transform: rotateZ(270deg);
}

.toright2 {
  position: absolute;
  top: 20%;
  left: 87%;
  z-index: 22;
  transform: rotateZ(
270deg
);
}

.toright3 {
  position: absolute;
  top: 53%;
  left: 84%;
  z-index: 22;
  transform: rotateZ( 
270deg
);
}


.toright4 {
  z-index: 22;
  transform: rotateZ( 
270deg
);
  /* transform: translate(10px, 10px); */
  left: 47%;
  margin-top: -13px;
  margin-left: 53%;
}

.toleft4 {

  z-index: 22;
  transform: rotateZ( 
90deg
);

margin-top:45px;


}

.blocked span {
  border-color: #4f4848 !important;
  animation-duration: 0s!important;
  cursor:auto;
}

.todown{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top:20px;

}
.arrow span{
    display: block;
    width: 17px;
    height: 17px;
    border-bottom: 5px solid white;
    border-right: 5px solid  white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }


    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}


/*------------------BREAKING NEWS----------------------------------*/


.breaking-news-headline {
  display: block;
  position: absolute;
  font-family: arial;
  font-size: 13px;
  margin-top: -22px;
  color: white;
  margin-left: 45%;

}

.breaking-news-title {
  background-color: #6e071a;
  display: block;
  height: 20px;
  width: 120px;
  font-family: arial;
  font-size: 11px;
  position: absolute;
  top: 0px;
  margin-top: 0px;
  margin-left: 20px;
  padding-top: 10px;
  padding-left: 10px;
  z-index: 3;
}
.breaking-news-title:before {
  content: "";
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  top: 0;
  left: -12px;
  border-left: 12px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 30px solid #6e071a;
}
.breaking-news-title:after {
  content: "";
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  right: -12px;
  top: 0;
  border-right: 12px solid transparent;
  border-left: 0px solid transparent;
  border-top: 30px solid #6e071a;
}

#breaking-news-colour {
  height: 30px;
  width: 100%;
  background-color: #212121;

}

span.breaking-news-title.delay-animated.slidein {
    padding-left: 14%;
    color: white;
    text-transform: uppercase;
}
#breaking-news-container {
  height: 30px;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom:0px;
  z-index: 2;
 
}
#breaking-news-container:before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #212121;
  position: absolute;
  z-index: 2;
}

.animated {
  -webkit-animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 0.2s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
}

.delay-animated {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 0.4s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.scroll-animated {
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 3s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.delay-animated2 {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 0.4s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.delay-animated3 {
  -webkit-animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 5s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.5s;
  animation-delay: 1s;
}

.fadein {
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -o-animation-name: fadein;
  animation-name: fadein;
}

@-webkit-keyframes fadein {
  from {
    margin-left: 1000px;
  }
}
@-moz-keyframes fadein {
  from {
    margin-left: 1000px;
  }
}
.slidein {
  -webkit-animation-name: slidein;
  -moz-animation-name: slidein;
  -o-animation-name: slidein;
  animation-name: slidein;
}

@keyframes marquee {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
.marquee {
  animation: marquee 10s linear infinite;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 1s;
  font-size: 18px;
}

@-webkit-keyframes slidein {
  from {
    margin-left: 800px;
  }
  to {
    margin-top: 0px;
  }
}
@-moz-keyframes slidein {
  from {
    margin-left: 800px;
  }
  to {
    margin-top: 0px;
  }
}
.slideup {
  -webkit-animation-name: slideup;
  -moz-animation-name: slideup;
  -o-animation-name: slideup;
  animation-name: slideup;
}

@-webkit-keyframes slideup {
  from {
    margin-top: 30px;
  }
  to {
    margin-top: 0;
  }
}
@-moz-keyframes slideup {
  from {
    margin-top: 30px;
  }
  to {
    margin-top: 0;
  }
}

div#down {
  transform: translate(40px, 126px);
  /* transition-duration: 0s; */
}

div#up {
  transform: translate(38px, 10px);
  transform: rotate(180deg) translate(69px, 105px);
}

div#down1 {
  transform: translate(40px, 95px);
  /* transition-duration: 0s; */
}

div#up1 {
  transform: translate(38px, 10px);
  transform: rotate( 
180deg
) translate(65px, 80px);
}

div#down2 {
  transform: translate(39px, 50px);
  /* transition-duration: 0s; */
}

div#up2 {
  transform: translate(38px, 10px);
  transform: rotate( 
180deg
) translate(64px, 110px);
}


/*------------------------------BREAKING NEWS-----------------------------------------*/


.translate1{

  transform: translateX(88px);

}




/*-----------------------JS ANIMATIONS---------------------------------------------*/

.disappear{


  opacity:0;


}


.disappear{
  animation-duration: 1s;
  -webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
  animation-name: noimage;

}

.delete{
  animation-duration: 1s;
  -webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
  animation-name: notext;

}


.view {
  transform: translate(-20%,3%);
}

.appear{
  animation-duration: 1s;
  -webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
  animation-name: yesimage;

}


.rewrite{
  animation-duration: 1s;
  -webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
  animation-name: yestext;

}


.fly{

  animation-duration: 1.5s;
  -webkit-animation: bubble 1.5s forwards; /* for less modern browsers */
        animation: bubble 1.5s forwards;
  animation-name: fly;

}


@keyframes fly {
 
  70% { transform:scale(4) }
100% { opacity:0; height:1px!important;position:absolute;z-index:-111111111111111111; display:none; }


  
}

@-webkit-keyframes  fly {
 
  70% { transform:scale(4) }
100% { opacity:0; height:1px!important;position:absolute;z-index:-111111111111111111; display:none; }

  
}





@keyframes noimage {
  from {
  opacity:1
  }

  to {
    opacity:0
  }

  
}


@keyframes yesimage {
  from {
  opacity:0
  }

  to {
    opacity:1
  }

  
}


@keyframes notext {
  from {
    transform: translateX(0px);
    opacity: 1;
  }

  to {
    transform: translateX(-125px);
    opacity: 0;
  }

  
}


@keyframes yestext {
  from {
    transform: translateX(-125px);
    opacity: 0;
  }

  to {
    transform: translateX(0px);
    opacity: 1;
  }

  
}