﻿html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

html, body, form
{
    height:100%;
	font-family: PT Sans, Verdana;
	background-color:#000000;
}

h1 {
	font-size: 56px;
	font-family: Combo;
	margin:25px 0 25px 0;
}

a
{
    color:#ffffff;
    text-decoration:none;
}

.hidden
{
	display:none;
}

div.wrapper
{
	position:absolute;
	top:0;
	left:0;
    display:block;
    font-size:14px;
	z-index:10;
}

div.mainImage
{
	position:fixed;	
	top:0;
	left:0;
    width:100%;
    height:100%;
    background-image: url('../Images/rab4.jpg');
    background-position: center;
    background-size: cover;
}

div.gradient
{
	position:fixed;	
	top:0;
	left:0;
    width:100%;
    height:70%;
	z-index:0;

	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

div.header
{
    margin:0 15% 0 15%;
    color:#ffffff;
    min-width:330px;
    max-width:1600px;
	text-align:center;
}

nav
{
    margin:0 auto 0 auto;
	width:80%;
	height:50px;
	text-align:center;
}

	nav div
	{
		background-color: rgba(255, 255, 255, 1);
		margin:0;
		width:33%;
		height:100%;
		float: left;
		cursor:pointer;
	}

		nav div.middle
		{
			margin:0 .5% 0 .5%;
		}
	
		nav div.active, nav div:hover
		{
			background-color: rgba(255, 127, 103, 1);
		}



			nav div.active a, nav div:hover a
			{
				color:#ffffff;
			}


		nav div a
		{ 
			font-size:20px;
			color:#9da8ae;
			display:block;
			width:100%;
			height:100%;
			line-height:20px;
		    padding:15px 0 15px 0;
		}

			nav div a:hover
			{
				text-decoration:none;
			}


div.info
{	
    background-color: rgba(0, 0, 0, .5);
    padding:3%;
    color:#ffffff;
    margin:30px auto 0 auto;
	width:74%;
    min-width:330px;
    max-width:1600px;
	text-align:center;
	overflow:hidden;
}

	div.info h3
	{
		margin-top: 6%;
		text-align: left;
		font-size: 20px;
		font-weight: bold;
	}

	div.info p a
	{
		font-style: italic;
	}
		
	div.info p a:hover
	{
		text-decoration:underline;
	}
	

    div.info div.left {
        float:left;
        width:60%;
    }

    div.info div.right {
        float:left;
        width:35%;
		margin-left:5%;
		overflow:hidden;
    }

		div.info div.right p, div.info div.left p
		{
			margin-top:3%;
			text-align:left;
		}

			div.info div.right p.top, div.info div.left p.top
			{
				margin-top: 0;
			}

	div.info div.container
	{
		margin-top:3%;
		float: left;
		width:33%;
		background-color: rgba(255, 127, 103, 1);
		text-align:center;
	}

		div.info div.container.middle
		{
			margin:3% .5% 0 .5%;
		}


		div.info div.container img
		{
			width:100%;
			display:block;
		}

		div.info div.container p
		{
			padding:1%;
			font-size:18px;
			text-align:center;
			margin-top:0;
		}

		div.info div.container.full
		{
			width:100%;
			float:none;
			display:block;
		}

		div.info div.container.half
		{
			width: 48%;
		}

		div.info div.container.half.left
		{
			margin-right:4%;
		}


ul.social
{
	overflow:  hidden;
	margin: 0em 0 1% 0;
	text-align: center;
	cursor: default;
}
		
	ul.social li
	{
		display: inline-block;
		padding: 0em 0.30em;
		font-size: 1.5em;
	}
		
	ul.social li span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
			
	ul.social li a
	{
		color: #fff;
		opacity: 0.45;
		-moz-transition: opacity 0.25s ease-in-out;
		-webkit-transition: opacity 0.25s ease-in-out;
		-o-transition: opacity 0.25s ease-in-out;
		-ms-transition: opacity 0.25s ease-in-out;
		transition: opacity 0.25s ease-in-out;
	}
			
		ul.social li a:before
		{
			display: inline-block;
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
				
		ul.social li:hover a
		{
			opacity: 0.8;
		}
	
iframe
{
	margin-top:3%;
}
		
div.footer {
    background-color: rgba(0, 0, 0, .5);
    padding:0 3% 1% 3%;
    color:#ffffff;
    margin:0 auto 0 auto;
	width:74%;
    min-width:330px;
    max-width:1600px;
	text-align:center;
	overflow:hidden;
}


/************ MOBILE CSS ************/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)
{

	h1 {
		font-size: 78px;
	}

	div.mainImage
	{
		background-position: top;
		background-repeat:no-repeat;
		background-size: 100% auto;
	}

	div.header
	{
		margin:0 5% 0 5%;
		text-align:center;
	}

	nav
	{
		width:90%;
		height:100px;
	}

			nav div a
			{
				font-size: 40px;
				line-height:40px;
				padding:30px 0 30px 0;
			}

			
	div.info
	{
		margin:20px auto 0 auto;
		width:84%;
		font-size:40px;
	}
	
	div.info h3
	{
		font-size: 48px;
	}

		div.info div.container
		{
			float:none;
			width:100%;
			margin: 5% 0 0 0;
		}

			div.info div.container.middle
			{
				margin: 5% 0 0 0;
			}

			div.info div.container p
			{
				padding: 3%;
				font-size: 40px;
			}

			div.info div.container.half
			{
				width: 100%;
			}
			

    div.info div.left {
        float:none;
        width:100%;
    }

    div.info div.right {
        float:none;
        width:100%;
		margin: 5% 0 0 0;
    }

#contact .right p, #contact .right h3
{
	text-align:center;
}

iframe
{
	width:80%;
	height:600px;
}
        
div.footer {
	width:84%;
	font-size:36px;
}

}
