/* ---------------------------------------- 
Catalina 
---------------------------------------- */

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





/*div {border: dotted black 2px;}
.co {
	background: ;
}*/

.rotate:hover
{
		background-color:darkmagenta;
        -webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
}

.rotateR:hover
{
		background-color:darkmagenta;
        -webkit-transform: rotateZ(30deg);
        -ms-transform: rotateZ(30deg);
        transform: rotateZ(30deg);
}


.corners1:hover{	
	background-color:darkmagenta;
	cursor: help;

}

.corners1 {

	border-style:ridge;
	border-width :50px;
	border-top-color:lightcyan;
	border-right-color :lightcyan;
	border-bottom-color:green;
	border-left-color:green;

}

.corners:hover{	
	background-color:darkmagenta;
	cursor: help;

}

.corners {
	border-style:ridge;
	border-width :50px;
	border-top-color:lightcyan;
	border-right-color :lightcyan;
	border-bottom-color:green;
	border-left-color:green;

}

.spin:active {
	 -webkit-transform: rotate(360deg);
          transform: rotate(345deg);
          transition:transform 1s ease;

}




.example1 {
	background-color: lemonchiffon;
	transition:background-color 1s;
}

.example1:hover { 
	background: url(../images/discover.png);
	cursor: crosshair;
	background-size:contain;
	background-position:center;
}

/*active means click*/

.example1:active {
	background: url(../images/discover.gif);
	background-size:contain;
	background-position:center;
	

}

.example2 {
	background-color: lemonchiffon;
	transition:background-color 1s;
}

.example2:hover { 
	background: url(../images/discover.png);
	cursor: crosshair;
	background-size:contain;
	background-position:center;
}

/*active means click*/

.example2:active {
	background: url(../images/discover3.gif);
	background-size:contain;
	background-position:center;
	
}


.example3 {
	background-color: lemonchiffon;
	transition:background-color 1s;
}

.example3:hover { 
	background: url(../images/discover.png);
	cursor: crosshair;
	background-size:contain;
	background-position:center;
}

/*active means click*/

.example3:active {
	background: url(../images/discover1.gif);
	background-size:contain;
	background-position:center;
	

}

.example4 {
	background-color: lemonchiffon;
	transition:background-color 1s;
}

.example4:hover { 
	background: url(../images/discover.png);
	cursor:crosshair;
	background-size:contain;
	background-position:center;
}

/*active means click*/

.example4:active {
	background: url(../images/discover2.gif);
	background-size:contain;
	background-position:center;
	

}



















/*.example div { 
	background: url(../chair3.png);
	border-radius: 50%;
	width: 100%;
	height: 50%;
	/*transform: rotate(45deg);*/




}