@import url("Calligraffiti/stylesheet.css");

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
}
body {
	background-color: #000;
	background-image: url(../images/moraine.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	

}
h1 {
	font-size: 36px;
	color: #FFF;
	text-shadow: 5px 5px 8px rgba(0,0,0,.5);
}
h2 {
	font-size: 30px;
	clear: both;
}
a:link {
	color: #F00;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #900;
}
a:hover {
	text-decoration: underline;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FF0;
}
#logo {
	position: absolute;
	left: 5%;
	top: 0px;
	width: 220px;
	height: 113px;
	z-index: 200;
}

#alink
	{
		text-decoration: none;
	}
#share  {
	position: absolute;
	top: 90%;
	left: 85%;
}

p 
	{
		font-size: 18px;
	}	

nav {
	position: absolute;
	left: 51px;
	top: 75px;
	width: 90%;
	height: 31px;
	z-index: 2;
	background-color: #000000;
	text-align: right;
}
header {
	position: absolute;
	left: 5%;
	top: 100px;
	width: 681px;
	height: 74px;
	z-index: 3;
}
section {
	position: relative;
	top: 190px;
	width: 70%;
	min-height:300px;
	z-index: 4;
	background-color: rgba(0,0,0,.8);
	border-radius: 0px 30px 0px 30px;
	float: right;
	right: 5%;
	padding: 10px;
		
}

/*.par 
	{
		font-size: 18px;
	}
*/	
.nicefont {
	font-family: Calligraffiti;
	font-size: 40px;
	color: rgba(136,4,4,1);
	text-shadow: 5px 5px 6px rgba(0,0,0,1);
}


/* start of style for gallery */
#gallery {
		position: relative;
		top: 150px;
		width: 90%;
		height: 700px;
		margin: 20px auto;
		padding: 40px;
		/*
		background-color: yellow;
		*/
		}
		
		#gallery div 
		{
			
			background: #fff;
			height:260px;
			position: relative;
			overflow: hidden;
			width: 400px;
			opacity: 0.9;
			-webkit-transition: all 700ms linear;

			-webkit-border-radius: 30px;
			-moz-border-radius: 30px;
			border-radius: 30px;

			-webkit-box-shadow: -3px -3px 50px black;
			-moz-box-shadow: -3px -3px 50px black;
			box-shadow: 5px 5px 50px black;
		}
			
		#gallery div#img1:hover,
		#gallery div#img2:hover,
		#gallery div#img3:hover,
		#gallery div#img4:hover,
		#gallery div#img5:hover,
		#gallery div#img6:hover,
		#gallery div#img7:hover,
		#gallery div#img8:hover,
		#gallery div#img9:hover		
		{
			z-index: 999;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			opacity: 1;
		}		
		
		
		#gallery span {
			position: absolute;
			right: 0;
			bottom: 15px;
			color: maroon;
			background: #fff;
			width: 35%;
			text-align: center;
			padding: 10px;
			font-size: 13px;
			font-weight: bold;}
			
			
		#gallery img {
			position: relative;

			-webkit-mask-repeat: none;
			}
		
		#gallery #img1 {
			-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);
			top: ;
			left:;
			z-index:1;}
			
			#img1 img {
				width: 400px;
								}
			
		#gallery #img2 {
			-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);
			top: ;
			left:;
			z-index:2;}
			
			#img2 img {
				width: 400px;}
			
				
		#gallery #img3 {
			-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);
			top: -3%;
			left: ;
			z-index:3;}
			
			#img3 img {
				width: 400px;}

		#gallery #img4 { /* eye */
			-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);
			top: -111.5%;
			left:30%;
			z-index:4;}
			
			#img4 img {
				width: 400px;
				}
			
		#gallery #img5 {
			-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);	
			top: -112%;
			left: 30%;
			z-index:5;}
			
			#img5 img {
				width: 400px;}
			
		#gallery #img6 {
			-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);	
			top: -115%;
			left:30%;
			z-index:6;}
			
			#img6 img {
				width: 400px;
				}
			
		#gallery #img7 { /* img9*/
			-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);	
			top:-152%;
			left: 60%;
			z-index:9;
			}
			
			#img7 img {
				width: 400px;
				
			}
				
				
		#gallery #img8 { /* img7 */
			-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);	
			top:-260%;
			left: 60%;
			z-index:7;
			}
			
			#img8 img {
				width: 400px;
			}
			
		#gallery #img9 { /* img8 */
			-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);	
			top:-260%;
			left: 60%;
			z-index:8;
			}
			
			#img9 img {
				width: 400px;
				
			}
				
		
				
				
/*end of gallery style */