@charset "utf-8";
/* CSS Document */
@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700';

body {font-size:65%;margin: 0}

aside {
    display:block;
    position:relative;
    width:300px;
    height:250px;
    overflow:hidden;
    z-index:0;
}

.background {
    position:absolute;
    width:400px;
    height:250px;
    background-image:url(../img/bg-pave.jpg);
    background-repeat:no-repeat;
    background-position:0 0;
    z-index:1;
    transform:translate(0px,0);
    transition:ease-in-out 400ms;
}

.top {
    position:absolute;
    top:0;
    left:0;
    width:300px;
    height:4px;
    background-color:#01010E;
    z-index:10;

}

.logo {
    position:absolute;
    top:4px;
    left:10px;
    width:75px;
    height:69px;
    background-image:url(../img/logo.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    z-index:10;
}

.bottom {
    position:absolute;
    bottom:0;
    left:0;
    width:300px;
    height:45px;
    background-image:url(../img/bottom-logo.jpg);
    background-repeat:no-repeat;
    background-position:-5px 0;
    z-index:10;	
}

.machine {
    position:absolute;
    z-index:3;
    transform:translate(312px,30px);
    transition:ease-in-out 400ms;
}

.texte {
    position:absolute;
    width:300px;
    height:77px;
    z-index:6;
    background-image:url(../img/bg-text.png);
    background-repeat:no-repeat;
    background-position:-5px 0;
    transform:translate(-300px,100px);
    transition:ease-in-out 400ms;
}

.texte p {
    display:block;
    margin:0;
    padding:13px;
    width:175px;
    font-size:1.4em;
    font-family: 'Roboto Condensed', sans-serif;
    color:#01010E;
}

.texte p span {
    font-weight:bold;
    font-size:15px;
}

.cliquez {
    position:absolute;
    z-index:5;
    text-align:center;
    width:126px;
    height:20px;
    background-color:#01010E;
    color:#fff;
    padding:10px;
    border-bottom:rgba(237,196,62,1.00) solid 5px;
    transform:translate(77px,145px);
    transition:ease-in-out 400ms;
}

.cliquez:before {
    content:"CLIQUEZ ICI";
    font-family: 'Roboto Condensed', sans-serif;
    font-size:1.8em;
}



.texte2 {
    position:absolute;
    z-index:5;
    text-align:center;
    width:280px;
    height:60px;
    background-color:rgba(237,196,62,0);
    color:#01010E;
    font-family: 'Roboto Condensed', sans-serif;
    font-size:1.8em;
    padding:10px;
    transform:translate(0px,60px);
    transition:ease-in-out 400ms;
}

.texte2 span {
    font-weight:bold;}

/* ANIMATIONS */
.background {animation:background ease-in-out infinite 12s}
.texte {animation:texte ease-in-out infinite 12s}
.machine {animation:machine ease-in-out infinite 12s}
.cliquez {animation:cliquez ease-in-out infinite 12s}
.texte2 {animation:texte2 ease-in-out infinite 12s}

@keyframes background {
    0% {	transform:translate(0,0);}
    5%,45% {	transform:translate(-90px,0);}
    50%,100% {	transform:translate(0,0);}
}

@keyframes texte {
    0% {	transform:translate(-300px,100px);}
    5%,45% {	transform:translate(0px,100px);}
    50%,100% {	transform:translate(-300px,100px);}
}

@keyframes machine {
    0% {	transform:translate(312px,30px);}
    5%,45% {	transform:translate(112px,30px);}
    50%,100% {	transform:translate(312px,30px);}
}

@keyframes cliquez {
    0%,45% {	transform:translate(77px,245px);}
    50%,90% {	transform:translate(77px,145px);}
    95%,100% {	transform:translate(77px,245px);}
}

@keyframes texte2 {
    0%,45% {	transform:translate(0px,260px);}
    50%,90% {	transform:translate(0px,60px);}
    95%,100% {	transform:translate(0px,260px);}
}

/*TRADS*/
.cliquez-NL.cliquez:before {
    content:"Klik hier";
}

.cliquez-EN.cliquez:before {
    content:"Click Here";
}

.cliquez-ES.cliquez:before {
    content:"Haga clic aquí";
}
.cliquez-RO.cliquez:before {
    content:"Faceți clic aici";
}
.cliquez-PL.cliquez:before {
    content:"Kliknij Tutaj";
}


.bottom-NL {
    background-image:url(../img/bottom-logo-NL.jpg);
}

.bottom-EN {
    background-image:url(../img/bottom-logo-EN.jpg);
}

.bottom-ES {
    background-image:url(../img/bottom-logo-ES.jpg);
}

.bottom-RO {
    background-image:url(../img/bottom-logo-RO.jpg);
}

.bottom-PL {
    background-image:url(../img/bottom-logo-PL.jpg);
}