/* ---------------------------------------- 
Leah Slava
---------------------------------------- */

/* NOTES:

1. DO NOT use width or height properties for any parent-level divs (these are divs you will be adding classes to).
2. Use % over px for sizing interior divs
3. Remember: if you do not give dimention and style to interior divs, we will not see them. By default, divs are invisible.

*/

/* so we can tell that our file is loading */

/* The element to apply the animation to */
/*body {
    background-image: url(../images/fondo.jpg);
    background-size: 100%;
    cursor: pointer;
}*/

body{
    background-color: #FFC843;
}
/*
div{
    border: solid red ;
}
*/

.square.xx { background-image: url(../images/uno.jpg); }

.xx.demo-circle {
	background-image: url(../images/uno.jpg);
	background-size: 70%;
	background-repeat: no-repeat;
}
.xx.demo-circle { 

    background-position: left bottom; 
    -webkit-animation: slide 1.5s linear infinite; }

@-webkit-keyframes slide {
    from { background-position: left 0; }
    to { background-position: left 70%; }
}

.xx.demo-dos {
	background-image: url(../images/dos.jpg);
	background-size: 70%;
	background-repeat: no-repeat;
}
.xx.demo-dos {

    position: relative;
    animation-name: demo-dos;
    animation-duration: 3s;
    animation-iteration-count:infinite;
    animation-direction: reverse;    
}

@keyframes demo-dos{
    0%   { left:0px; top:0px;}
    25%  { left:70px; top:0px;}
    50%  { left:70px; top:70px;}
    75%  { left:0px; top:70px;}
    100% { left:0px; top:0px;}
}
.xx.demo-tres {
	background-image: url(../images/tres.jpg);
	background-size: 70%;
	background-repeat: no-repeat;
}

.xx.demo-tres{ 

    background-position: left bottom; 
    -webkit-animation: slide 1.5s linear infinite; }

@-webkit-keyframes slide {
    from { background-position: left 0; }
    to { background-position: left 70%; }

}

.xx.demo-cuatro {
	background-image: url(../images/cuatro.jpg);
	background-size: 70%;
	background-repeat: no-repeat;
}
.xx.demo-cuatro {

    position: relative;
    animation-name: demo-cuatro;
    animation-duration: 2s;
    animation-iteration-count:infinite;
    animation-direction: reverse;    
}

@keyframes demo-cuatro{
    0%   { left:0px; top:0px;}
    25%  { left:70px; top:0px;}
    50%  { left:70px; top:70px;}
    75%  { left:0px; top:70px;}
    100% { left:0px; top:0px;}
}

.xx.demo-seis {
	background-image: url(../images/seis.jpg);
	background-size: 70%;
	background-repeat: no-repeat;
}

.xx.demo-seis { 

    background-position: left bottom; 
    -webkit-animation: slide 1.5s linear infinite; }

@-webkit-keyframes slide {
    from { background-position: left 0; }
    to { background-position: left 70%; }

}

.xx.demo-ocho {
	background-image: url(../images/ocho.jpg);
	background-size: 70%;
	background-repeat: no-repeat;
}
.xx.demo-ocho {

    position: relative;
    animation-name: demo-ocho;
    animation-duration: 2s;
    animation-iteration-count:infinite;
    animation-direction: reverse;    
}

@keyframes demo-ocho{
    0%   { left:0px; top:0px;}
    25%  { left:70px; top:0px;}
    50%  { left:70px; top:70px;}
    75%  { left:0px; top:70px;}
    100% { left:0px; top:0px;}
}

.xx.demo-nueve {
	background-image: url(../images/nueve.jpg);
	background-size: 70%;
	background-repeat: no-repeat;
}

.xx.demo-nueve { 

    background-position: left bottom; 
    -webkit-animation: slide 2s linear infinite; }

@-webkit-keyframes slide {
    from { background-position: left 0; }
    to { background-position: left 70%; }

}

.xx.demo-dieciseis {
	background-image: url(../images/dieciseis.jpg);
	background-size: 70%;
	background-repeat: no-repeat;
}
.xx.demo-dieciseis { 

    background-position: left bottom; 
    -webkit-animation: slide 2s linear infinite; }

@-webkit-keyframes slide {
    from { background-position: left 0; }
    to { background-position: left 100%; }

}

.xx.demo-doce {
	background-image: url(../images/doce.jpg);
	background-size: 70%;
	background-repeat: no-repeat;
}
.xx.demo-doce {

    position: relative;
    animation-name: demo-doce;
    animation-duration: 2s;
    animation-iteration-count:infinite;
    animation-direction: reverse;    
}

@keyframes demo-doce{
    0%   { left:0px; top:0px;}
    25%  { left:70px; top:0px;}
    50%  { left:70px; top:70px;}
    75%  { left:0px; top:70px;}
    100% { left:0px; top:0px;}
}