body{
background:url(img/TEST.gif);
}
.logo{
    background:url(img/coollogo_com-25959195.png);
    position: absolute;
    width: 515px;
    height: 120px;
    margin-left: 460px;
    border-top: 20px;
        
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
}
.gifzera{
    position: absolute;
    margin-top: 150px;
    margin-left: 150px;
    background:url(img/BemVindo.gif);
    width: 480px;
    height: 183px;
}
.fecalateral{
    position: absolute;
    margin-top: 20px;
    background:url(img/54645657-psychedelic-abstract-background-colorful-swirls-seamless-pattern.jpg);
    margin-left: 150px;
    width: 100px;
    height: 100px;
}
.fecalateral2{
    position: absolute;
    margin-top: 20px;
    background:url(img/54645657-psychedelic-abstract-background-colorful-swirls-seamless-pattern.jpg);
    margin-left: 280px;
    width: 100px;
    height: 100px;
}
.intro{
    position: absolute;
    margin-top: 150px;
    margin-left: 680px;
    width: 500px;
    height: 300px;
    font-family: Comic Sans MS;
    color: #fff;
    font-size: 20px;
    
}
.khaos{
    position: absolute;
    margin-left: 50px;
    width: 200px;
    height: 200px;
}
.barrinha{
    position: absolute;
    margin-top: 60px;
    margin-left: 800px;
    width: 409px;
    height: 202px;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: pink; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: limegreen; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: yellow; 
}

.mensagem{
    position: absolute;
    width: 454px;
    height: 340px;
    margin-top: -100px;
    margin-left:800px;
}

.scroll-left {
 width:900px;
 height: 170px; 
 overflow: hidden;
 position: relative;
 background: yellow;
 font-size: 100px;
 color: orange;
    font-family: Papyrus;
 border: 1px solid orange;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 170px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-left 15s linear infinite;
 -webkit-animation: scroll-left 15s linear infinite;
 animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}

.ellis{
    position: absolute;
    margin-left: 450px;
    margin-top: -400px;
    width: 500px;
    height: 500px;
}
.texto{
    position: absolute;
    margin-left: 350px;
    margin-top: 50px;
    width: 700px;
    height: 700px;
    font-family: Arial;
    font-size: 20px;
    color: #fff;
    background:url(img/horr%C3%ADvel.jpg);
}
.gife{
    position: absolute;
    margin-left: 300px;
    margin-top: -400px;
    width: 200px;
    height: 200px;

}