/* ---------------------------------------- 
Your Name
---------------------------------------- */

/* 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 */
body {
	background: url(../images/fondo.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.add {
	background-color: #EB6852;
	transition: background-color 3s; 
}

.add:hover { 
	background-color: #FFC843;
	cursor: pointer;
	width: 390px;
    height: 300px;
    background-color: #E7E1E6;
    /* Rotate div */
    -ms-transform: rotate(7deg); 
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
    
}

.add:active {
	background: url(../images/fondo.jpg);
	background-size: 250%;
	background-repeat: no-repeat;
}

.add {
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.add:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
          
}


@keyframes add{
    from {background-color: #EB6852;}
    to {background-color: #892F2F;}
}

/* The element to apply the animation to */
.add {
    
    background-color: #EB6852;
    animation-name: add;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.blank{
	background-color: #3FBFAD;
	border-width: 20px;
	border-style: solid; 
    border-color: #1F1933 #E7E1E6;
}

.blank:hover{
	background-color: #E7E1E6;
}

/* The animation code */
@keyframes blank{
    from {background-color: #3FBFAD;}
    to {background-color: #FFC843;}
}

/* The element to apply the animation to */
.blank {
    background-color: #3FBFAD;
    animation-name: blank;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}