/* ---------------------------------------- 
Taylor
---------------------------------------- */

/* 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/pattern.jpg);
	background-attachment: fixed;
	background-size: cover;
}

div {border: dotted transparent 1px; }

.th {
	background-color: transparent;


}

.path {
	background-color: transparent;

}

.path:hover {
	background: url(../images/dottedline.jpg);
	background-position: center;
	background-size: fill;
	transform: rotate(90deg);
}

.path div {
	background: url(../images/footstep.jpg);
	border-radius: 50%;
	width: 50%;
	height: 50%;
	transform: rotate(45deg);
	margin-top: 25%;
	margin-bottom: 25%;
	background-position: center;
	background-size: contain;
}
.path div:hover {
	transform: rotate(90deg);
}

.corner {
	background: url(../images/ocean.jpg);
}

.boat div {
	background: url(../images/boat.jpg);
	border-radius: 100%;
	width: 75%;
	height: 75%;
	transform: rotate(360deg);
	margin-top: 25%;
	margin-bottom: 25%;
	margin-left: 25%;
	background-position: center;
	background-size: contain;
}

.boat div:hover {
	transform: rotate(180deg);
}
.mark:hover {
	background: url(../images/treasure.jpg);
	background-size: contain;
	background-position: center;
}
.mark div {
	background: url(../images/footstep.jpg);
	border-radius: 50%;
	width: 50%;
	height: 50%;
	transform: rotate(45deg);
	margin-top: 25%;
	margin-bottom: 25%;
	background-position: center;
	background-size: contain;
	
}
.mark div:hover {
	background: url(../images/mark.jpg);
	background-size: contain;
}