/* site.css */
@font-face {
	font-family: Tiki_Tropic; 
	src: url("../font/Tiki_Tropic.eot") format("embedded-opentype"),
	url("../font/Tiki_Tropic.ttf") format("truetype"),
	url("../font/Tiki_Tropic.otf") format("opentype"); }/* before feedback from 5.2 custom font had been tested in IE, Firefox, and Chome successfully */

html, body {
	padding: 0;
	margin: 0;
	background-image: url("../Pics/sand.jpg"); /* added as a suggestion from 6.1 to eliminate the gray */
	background-color: gray; }

header, footer {
	background-color: #0065BD ;
	border: solid 1px black;
	border-radius: 10px;
	padding: 10px;
	font-size: 14px;
	color: #FFFFFF }

header {
	height: 140px;
	font-family: 'Tiki_Tropic'; }

body {
	line-height: 1.6 ; }

#main {
	padding: 30px;
	margin: 5px 0; }

.main:after {
	content: "";
	display: table;
	clear: both; }

.home {
	font-size: 20px; }	

#nav a{
	color: #FFFFFF ; 
	font-family: 'Tiki_Tropic'; }

#link {
	padding: 8px 10px;
	border-left-style: solid;
	border-color: #FFFFFF;
	border-width: 1px;
	display: inline-block; 
	font-size: 20px; }

#foot {
	padding: 2px 10px;
	display: inline-block;
	width: 30%; }		

#rfoot {
	padding: 2px 2px;
	display: inline-block;
	width: 30%;	}

#rfoot a{
	color: #FFFFFF; 
	font-size: 18px; }	

#col-1 {
	width: 8.33%;
	box-sizing: border-box; 
	float: left; }
#col-2 {
	width: 16.66%;
	box-sizing: border-box; 
	float: left; }
#col-3 {
	width: 25%;
	box-sizing: border-box; 
	float: left; }
#col-4 {
	width: 33.33%;
	box-sizing: border-box; 
	float: left; }
#col-5 {
	width: 41.66%;
	box-sizing: border-box; 
	float: left; }
#col-6 {
	width: 50%;
	box-sizing: border-box; 
	float: left; }
#col-7 {
	width: 58.33%;
	box-sizing: border-box; 
	float: left; }
#col-8 {
	width: 66.66%;
	box-sizing: border-box; 
	float: left; }
#col-9 {
	width: 75%;
	box-sizing: border-box; 
	float: left; }
#col-10 {
	width: 83.33%;
	box-sizing: border-box; 
	float: left; }
#col-11 {
	width: 91.66%;
	box-sizing: border-box; 
	float: left; }
#col-12 {
	width: 100%;
	box-sizing: border-box; 
	float: left; }

.page {
	width: 989px;
	margin: 0 auto;
	padding: 2px;
	background-color: white; }

.zoom {
    padding: 10px;
    transition: transform .2s; /* Animation */
    width: 35%;
    height: ;
    margin: 0 auto;
    float: right;
    border-width: 2px;
    border-color: black; }

.zoom:hover {
    transform: scale(2.0); /* (200% zoom) */
    margin: 10px }

.gallery {
	margin: 10px 50px } 

.gallery img {
	width: 230px;
	padding: 10px;
	filter: grayscale(100%);
	transition: 1s; }

.gallery img:hover {
	filter: grayscale(0);
	transform: scale(1.2); }

.rpoint {
	float: left;
	margin: 10px;
	clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }

.rabbit {
	float: left;
	margin: 10px;
	clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); }