/* ---------------------------------------- 
Celine 
---------------------------------------- */

/* 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-color: white ;
}

div { border: none; }

.ck2 { 
	background: rgb(255,255,255);
	opacity: 1;
 }

.example div {
		width: 50%;
	height: 100%;
	background-color: white;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	position: center;
	left: 0px;
	top: 0px;
		transform: rotate(0deg);
		border-style: none;
	animation-name: corner-color-change ;
}

@keyframes corner-color-change {
	0% {background-color: white;}
	25% { background-color: grey ; }
	50% {background-color: black ;}
	75% {background-color: grey;}
	100% {background-color: white;}
}


.example { 
	background-color: white;
	/*opacity: 1;*/
/*	border-style: inset;
	border-width: 30px;
	border-top-color: black */
		/*rgb(0, 0, 153)*/
		;
	/*border-right-color: black 
*/		/*blue*/
		;
/*	border-left-color: black */
		/*blue*/
		;
/*	border-bottom-color: black */
		/*rgb(72, 191, 255)*/
		;
}



.example:hover div  { 
/*	background-color: red;*/
	cursor: crosshair;

	width: 50%;
	height: 100%;
	background-color: rgb(254, 18, 1);
	animation-duration: 3s;
	animation-iteration-count: infinite;
	position: absolute right;
	left: 50px;
	top: 0px;
		transform: rotate(0deg);
		border-style: none;
	animation-name: red-yellow ;
}

@keyframes red-yellow {
	0% {background-color: rgb(254, 18, 1);}
	25% { background-color: rgb(254, 102, 1);}
	50% {background-color: rgb(254, 229, 1);}
	75% {background-color: rgb(254, 102, 1)}
	100% {background-color: rgb(254, 18, 1);}
}



.second {
	background-color: black;
/*	border-style: outset;
	border-width: 30px;
	border-top-color: rgb(128, 0, 0); 
	border-right-color: rgb(255, 0, 0);
	border-left-color:rgb(204, 0, 0);
	border-bottom-color: rgb(255, 102, 102);*/
	/*
	border: transparent;*/
	/*cursor: hand;*/
/*	border-radius: 5px */
	
}

.second:hover{
	box-shadow: 0px 15px 25px -5px;
	/*box-shadow: 0px 37px 20px -20px;*/
	transform: translate(0px, -20px);
	cursor: pointer;
}

.second:active{
	cursor: pointer;
	background: url(../images/diagonal.jpg);

}

.second div{
	
	width: 50%;
	height: 100%;
	background-color: black;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	position: center;
	left: 0px;
	top: 0px;
		transform: rotate(0deg);
		border-style: none;
	animation-name: opposite-middle ;
}

@keyframes opposite-middle {
	0% {background-color: black;}
	25% { background-color: grey ; }
	50% {background-color: white ;}
	75% {background-color: grey;}
	100% {background-color: black;}
}
	
}

	/*transition: background-color 1s;*/

	
		 
box-shadow: 0px 17px 10px -10px rgb (0,0,0);




/*
.second:hover{
	background-color: white;*/
	/*border-style: outset;
	border-width: 30px;
	border-top-color: rgb(153, 0, 0); 
	border-right-color: rgb(255, 0, 0);
	border-left-color:rgb(204, 0, 0);
	border-bottom-color: red;*/
/*	transform: rotate(45deg);*/

     /*   -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);*/
       /* border-radius:50%; 
*/   /* }
*/

/*.second div{
	box-shadow: 6px 6px grey blur;  


}*/


/*}

.second: { 
	background: url(../images/swirl.jpg)*/

 }
/*
.example {
*//*	border: transparent;*/
   /* /border width, border-style, color/*/

/*	background-outline-color:white;*/
/*
	background-color: black;*/
/*	I JUST COMMENTED THE LINE ABOVE*/
	
	/*transform: rotate(45deg);*/

	/*transition: background-color 1s;
}*/









/*img< class= "image" 

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
*/

/*.example:active {
	background: url(../images/pattern.jpg);
}*/

/*.example div { 
	opacity: 1;
	background-color: white; 
			background-position: center;
		
	border-radius: 50%;
	width: 50%;
	height: 50%;
	margin-top: 25%; 
	margin-bottom: 25%;
	margin-left: 25%;
	transform: rotate(45deg);

}*/




*/




}