@import url('../fonts/source/stylesheet.css');
@import url('../fonts/open/stylesheet.css');
/*
	COLORS
	
	dark green:	#063106
	yellow:		#f7eb02
	clay red:	#8b2c22
	green gradient:  #063106   to   #597658
*/

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 12px;
    line-height: 12px;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection { background: #b3d4fc; text-shadow: none;}

::selection { background: #b3d4fc; text-shadow: none;}

/*
 * A better looking default horizontal rule
 */

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img { vertical-align: middle;}

/*
 * Remove default fieldset styles.
 */

fieldset { border: 0; margin: 0; padding: 0;}

/*
 * Allow only vertical resizing of textareas.
 */

textarea { resize: vertical;}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}

/* ==========================================================================
   My custom styles
   ========================================================================== */
	
	body{}
	
	h1 { font-family: 'open', sans-serif; font-weight:normal; font-size:40px;}
	h2 { font-family: 'open', sans-serif; font-weight:normal; font-size:24px; margin:0px; color:#063106;}
	h3 { font-family: 'open', sans-serif; font-weight:normal; font-size:18px; margin:0px; color: #8B2C22;}
	h4 { font-family: 'source_sans_proregular',sans-serif; font-weight:700; font-size:14px; margin:0px; color: #063106;}
	p{ font-family: 'source_sans_proregular', sans-serif; font-weight:normal; font-size:14px; line-height:16px; margin:10px 0; text-align:justify;}
	a{ font-family: 'source_sans_proregular', sans-serif; font-weight:900; font-size:14px; text-decoration:none; overflow:hidden;color:#FFF; cursor:pointer;}	
	
	.justify { text-align:justify !important;}
	.center { text-align:center !important;}
	.margin-top { margin-top:25px;}
	.button:hover { opacity:0.8;}
	
	.text_shadow{text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.75);}
	
	.main_wrapper{ position:relative; width:900px; margin:0 auto;}
		
		/* HEADER */
		
		.main_wrapper header { background: rgba(255,255,255,0.05); height: 85px; padding: 25px 0 0 160px; position: relative;}
			.main_wrapper .deco_shape { position:absolute; width:461px; height:461px; background:url(../images/deco_shape.png)0 0 transparent; z-index:-1; top:-50px; right:-50px;}
			.main_wrapper header .logo { background:url(../images/greenpointtennis_logo.png)0 0 transparent no-repeat; width:131px; height:156px; display:block; position:absolute; left:15px; top:25px; text-indent:-2000px; z-index:999;}
			.main_wrapper header .logob { background:url(../images/greenpointtennis_logo_b.png)0 0 transparent no-repeat; width:146px; height:172px; display:block; position:absolute; left:5px; top:25px; text-indent:-2000px; z-index:999;}
			.main_wrapper header .logoc{ background:url(../images/greenpointtennis_logo_f.png)0 0 transparent no-repeat; width:160px; height:183px; display:block; position:absolute; left:0px; top:18px; text-indent:-2000px; z-index:999;}
			.main_wrapper header h1{ color:#FFF; text-transform:uppercase; font-weight: 900; margin: 20px 0;}
			.main_wrapper header p{ color:#f7eb02; font-weight:700; font-style:italic;}
			
			.main_wrapper header .contact{ position:absolute; top:25px; right:0px; width:249px; height:60px; padding:5px 20px; background:url(../images/contact_bkg2.jpg) 0 0 no-repeat;}
				.main_wrapper header .contact h2{color:#063106; font-style:italic; margin: 5px 0 10px;}
					.main_wrapper header .contact a {  line-height:16px; color:#8b2c22; display:inline-block; text-shadow: 0px 0px 4px #FFF;}
					.main_wrapper header .contact a.tel{ background:url(../images/phone_ico.png)0 0 transparent no-repeat; text-indent:25px;}
					.main_wrapper header .contact a.mail{ background:url(../images/mail_ico.png)0 2px transparent no-repeat; text-indent:25px;}
				.main_wrapper header .contact .social{position:relative; float:left; width:50%; text-align:right;}
		
		/* TOP NAV */
		
		.main_wrapper nav.top{ position:relative; min-height:40px; background:#063106; padding: 10px 0 0 160px; border:1px solid rgba(255,255,255,0.1);
			-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.75);
			-moz-box-shadow:    0px 3px 3px rgba(0, 0, 0, 0.75);
			box-shadow:         0px 3px 3px rgba(0, 0, 0, 0.75);	/* box shadow */
		}
			.main_wrapper nav.top ul, li{ margin:0px; padding:0px; display:inline-block;}
			.main_wrapper nav.top li{margin:10px 15px 0 0;}
				.main_wrapper nav.top .nav_btn{
					background: #597658; /* Old browsers */
background: -moz-linear-gradient(top, #597658 0%, #063106 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#597658), color-stop(100%,#063106)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #597658 0%,#063106 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #597658 0%,#063106 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #597658 0%,#063106 100%); /* IE10+ */
background: linear-gradient(to bottom, #597658 0%,#063106 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#597658', endColorstr='#063106',GradientType=0 ); /* IE6-9 */	/* gradient */
					-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
					-moz-box-shadow:    0px 0px 3px rgba(0, 0, 0, 0.8);
					box-shadow:         0px 0px 3px rgba(0, 0, 0, 0.8); /* box shadow */
					padding:5px 10px; font-weight:400;
					}
				.main_wrapper nav.top .nav_btn:hover{ background:#063106; border:2px solid #FFF; padding:3px 8px;}
				.main_wrapper nav.top a { font-family:source_sans_proregular; font-size:14px;}
				.main_wrapper nav.top a.active{ background:#063106; border:2px solid #FFF; padding:3px 8px;}
				.main_wrapper nav.top .social .fb {  position:absolute; text-indent:-2000px; width:25px; height:25px; display:block; background:url(../images/fb2.jpg) 0 0 no-repeat transparent; background-position:0 0; transition: background 0.3s ease 0s; right:15px; top:13px; box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.65);}
				.main_wrapper nav.top .social .fb:hover { background-position:0 -25px;}
		
		#mobile-menu { position: absolute; top:10px; right:10px; width:36px; height:23px; background:url(../images/mobile-menu.png)0 0 no-repeat transparent; display:none;}
				
		/* SITE CONTENT */
		.site_content { position:relative; overflow:hidden;}
			.site_content .slide_wrapper { position:relative; width:900px; height:400px; margin-top:10px; margin-bottom: 20px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75);}
			.site_content .slide_wrapper a.play-btn { position:absolute; left:20px; bottom:20px; width:164px; height:69px; background:url(../images/play_btn.png)0 0 no-repeat transparent; z-index:999; display:block;}
				.site_content .slide_wrapper a.play-btn:hover { opacity:0.8;}
			.site_content .intro { position:absolute; top:10px; right:0px; z-index:990; width:249px; height:360px; background:rgba(255,255,255,0.80); padding:20px;}
				.site_content .intro h2 { margin:20px 0; text-transform: uppercase;}
				.site_content .intro p { }
				.site_content .intro a { color: #8B2C22; text-decoration:underline; font-size:12px;}
					.site_content .intro a:hover { text-decoration:none;}
				.site_content .intro .close { position:absolute; display:block; top:10px; right:10px; font-size:12px; color:#8B2C22;}
				.site_content .back { position:absolute; display:block; top:20px; right:-100px; text-indent:-2000px; width:66px; height:29px; background:url(../images/show_text.png)0 0 transparent; z-index:999;}
				.site_content .back:hover{ opacity:0.8;}				
				
				
			.box { position:relative; float:left; width:283px; height:174px; border:3px solid #063106; margin: 5px 15px 20px 0; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75);}
				.box a { display:block; width:100%; text-align:center; padding:10px 0; background:rgba(28,28,30,0.8); text-transform:uppercase; position:absolute; top:35px; color:#f7eb02; box-shadow: 0 0 5px #063106; font-size:16px; border-bottom: 1px solid rgba(247, 235, 2, 0.2); border-top: 1px solid rgba(247, 235, 2, 0.2); transition: all 0.2s ease;}
					.box a:hover { color:#FFF; border-bottom: 1px solid rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.4);}
				.box:last-child{ margin-right:0px; float:right;}
				#play { background:url(../images/play.jpg)0 0;}
				#map { background:url(../images/map.jpg)0 0;}
				#coaching { background:url(../images/coaching.jpg);}
				#join { background:url(../images/join.jpg);}
				#history { background:url(../images/history.jpg);}
			
			.inner-box { width:100%; text-align:center;}
				.inner-box img { display:inline-block; width:188px; height:126px; margin: 10px 40px;}
				.inner-box img:nth-child(2){margin: 10px 60px;}
				
		.content-header { position:relative; float: left; width:600px; height:180px; margin: 10px 0 0 0; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75);}
		#map-header { position:relative; float: left; width:600px; height:180px; margin: 10px 0 0 0; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75);}
		.content-header-full { position:relative; width:900px; height:180px; margin: 10px 0 0 0; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75);}
            
                
            h1.page-title  { text-align: center; margin: 20px 0 40px 0; font-size: 32px; line-height: 32px; color: #063106; text-transform: uppercase;}
            h1.page-title span { display: block; text-align: center; margin: 5px 0 0 0; font-size: 16px; line-height: 16px; color: #063106; text-transform: none;}
            
            .content-header-full h1 { text-align: center; margin: 60px 0 0 0; font-size: 32px; line-height: 32px; color: #FFF; text-transform: uppercase;}
            .content-header-full h1 span { display: block; text-align: center; margin: 10px 0 0 0; font-size: 16px; line-height: 16px; color: #f7eb02; text-transform: none;}
            
            .content-header-full.come-and-play { background: url("../images/come_and_play_tennis_background.jpg")0 0 no-repeat;}
            .content-header-full.join { background: url("../images/contact_us_background.jpg")0 0 no-repeat;}
            .content-header-full.coaching { background: url("../images/tennis_coaching_background.jpg")0 0 no-repeat;}
            .content-header-full.history { background: url("../images/history_of_the_club_background.jpg")0 0 no-repeat;}
                
        
        
		#map-header-full { position:relative; float: left; width:900px; height:300px; margin: 10px 0 0 0; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75);}
			.map-content { width:200px; height:100px;}
				.map-content a { font-family: 'source_sans_proregular',sans-serif; font-weight:700; font-size:12px; margin:0; color: #8B2C22; display:inline-block; text-decoration:underline; transition: all 0.2s ease;}
						.map-content a:hover { color:#063106;}
		
		/* LEFT CONTENT */
		.left-content { position:relative; float: left; width:550px; background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95); min-height: 600px; margin: 10px 0; padding: 25px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75);}
			
			.left-content h2 { margin:25px 0 25px 0;}
			.left-content h3 { margin:20px 0 5px 0;}
			.left-content h3:first-child { margin-top:0;}
			.left-content img { width:100%;}
				.left-content .img-caption { font-size:10px; text-align:center; line-height:14px; margin-top:5px; color: #787878;}
					.left-content .img-caption span { margin:0 10px;}
				.left-content p {}
				.left-content p.introduction { color:#063106; font-size:16px; font-style:italic;}
				.left-content p.remark { margin:0 0 10px 0; color:#063106; font-size:14px; font-style:italic;}
					.left-content p strong { color: #8B2C22; font-weight:700; font-style:italic;}
				
				.left-content section { margin:25px 0;}
				.left-content .left { position:relative; float:left; width:250px;}
					.left-content .left img { box-shadow: 0 0 2px rgba(0, 0, 0, 0.75);}
					
					.left-content .left .contact { margin:20px 0;}
					.left-content .left ul { margin:10px 0; padding:0; list-style-type: none;}
					.left-content .left .contact span { display:inline-block;}
					.left-content .left .contact a { display:inline-block; font-family:'source_sans_proregular',sans-serif; font-size:12px; color:#063106; vertical-align:top; line-height:20px;}
						.left-content .left .contact a:hover { opacity:0.7;}
						
						.left-content .left .contact a.fb { display:inline-block; width:40px; height:40px; background:url(../images/contact_fb.jpg)0 0 no-repeat; margin:10px 10px 0 0;}
						.left-content .left .contact a.tw { display:inline-block; width:40px; height:40px; background:url(../images/contact_tw.jpg)0 0 no-repeat; margin:10px 10px 0 0;}
					.left-content .left .contact span.ico { display:inline-block; width:20px; height:20px; margin-right:20px;}
						.left-content .left .contact span.tel { background:url(../images/contact_tel_ico.jpg)0 0 no-repeat;}
						.left-content .left .contact span.email { background:url(../images/contact_email_ico.jpg)0 0 no-repeat;}
					
				.left-content .right { position:relative; float:right; width:275px;}
					.left-content .right ul { margin:0; padding:0; list-style-type: none; font-family:'source_sans_proregular',sans-serif; font-size:12px;}
						.left-content .right ul li { margin:0; padding:0; display:block;}
					.left-content .right p { font-size:12px; line-height:14px;}
			
			/* LEFT CONTENT FULL WIDTH */
		.left-content-full { position:relative; float: left; width:850px; background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95); margin: 10px 0; padding: 25px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75);}
			.no-margin { margin-top:0 !important;}
			
			.left-content-full h2 { margin:25px 0 25px 0;}
			.left-content-full h3 { margin:20px 0 5px 0; font-size:20px;}
			.left-content-full h3:first-child { margin-top:0;}
			.left-content-full img { /*width:100%;*/}
				.left-content-full .img-caption { font-size:10px; text-align:center; line-height:14px; margin-top:5px; color: #787878;}
					.left-content-full .img-caption span { margin:0 10px;}
				.left-content-full p {}
				.left-content-full p.introduction { color:#063106; font-size:18px; font-style:italic; line-height: 20px; text-align: center;}
				.left-content-full p.remark { margin:0 0 10px 0; color:#8B2C22; font-size:14px; font-style:italic; text-align: center;}
					.left-content-full p strong { font-weight:700;}
				
				.left-content-full section { margin:40px 0;}
				.left-content-full .left { position:relative; float:left; width:250px;}
					.left-content-full .left img { box-shadow: 0 0 2px rgba(0, 0, 0, 0.75);}
					
					.left-content-full .left .contact { margin:20px 0;}
					.left-content-full .left ul { margin:10px 0; padding:0; list-style-type: none;}
					.left-content-full .left .contact span { display:inline-block;}
					.left-content-full .left .contact a { display:inline-block; font-family:'source_sans_proregular',sans-serif; font-size:12px; color:#063106; vertical-align:top; line-height:20px;}
						.left-content-full .left .contact a:hover { opacity:0.7;}
						
						.left-content-full .left .contact a.fb { display:inline-block; width:40px; height:40px; background:url(../images/contact_fb.jpg)0 0 no-repeat; margin:10px 10px 0 0;}
						.left-content-full .left .contact a.tw { display:inline-block; width:40px; height:40px; background:url(../images/contact_tw.jpg)0 0 no-repeat; margin:10px 10px 0 0;}
					.left-content-full .left .contact span.ico { display:inline-block; width:20px; height:20px; margin-right:20px;}
						.left-content-full .left .contact span.tel { background:url(../images/contact_tel_ico.jpg)0 0 no-repeat;}
						.left-content-full .left .contact span.email { background:url(../images/contact_email_ico.jpg)0 0 no-repeat;}
					
				.left-content-full .right { position:relative; float:right; width:550px;}
					.left-content-full ul { margin:0; padding:0; list-style-type: none; font-family:'source_sans_proregular',sans-serif; font-size:14px;}
						.left-content-full ul li { margin:2px 0; padding:0; display:block;}
					.left-content-full .right p { font-size:14px; line-height:16px;}
					
				.col { position:relative; float:left; width:263px; margin:5px 0; text-align:center;}
					.col h4 { font-family: 'source_sans_proregular',sans-serif; font-weight:700; font-size:16px; margin:0 0 10px 0; color: #063106;}
					
					.col a { font-family: 'source_sans_proregular',sans-serif; font-weight:700; font-size:14px; margin:10px 0 20px; color: #8B2C22; display:inline-block; width:100%; text-align:center; text-decoration:underline; transition: all 0.2s ease;}
						.col a:hover { color:#063106;}
					
					.col:nth-child(2){ width:273px; margin:5px 25px;}
					.col:last-child{ margin-right:0px;}
					
					.contact a { margin:0;}
				.membership-buttons { position:relative; width:100%; margin:20px 0; text-align:center;}
					.membership-buttons a { display:inline-block; margin:0 50px;}
		
		/* SIDE BAR */
		.sidebar { position:relative; float:right;}
			.sidebar .box { float:none; margin:10px 0;}
		
		/* FOOTER */
		
		footer { height:20px; background:#063106; padding: 10px; margin-bottom: 20px; border:1px solid rgba(255,255,255,0.1);
			-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.75);
			-moz-box-shadow:    0px 3px 3px rgba(0, 0, 0, 0.75);
			box-shadow:         0px 3px 3px rgba(0, 0, 0, 0.75);	/* box shadow */
		}
			footer nav { display:inline-block; float:left;}
				footer ul, li { margin:0px; padding:0px; display:inline-block;}
				footer li {margin:0	 15px 0 0; line-height: 20px;}
				footer li a { font-family:source_sans_proregular; font-size:14px; color:#FFF; text-decoration:underline; font-weight:normal; font-size:12px;}
				footer li a.active { color:#FFFF00; text-decoration:none;}
				footer li a:hover { text-decoration:none;}
			
			footer .right { display:inline-block; float:right; font-family:source_sans_proregular; text-align:right;}
				footer .right span { display:block; }
				footer .right .copy { color: #FFF; font-size:14px;}
				footer .right .club { color: #ffff00; font-size:12px;}
			
		
		/* WEBEGAN */
		
		a.webegan { position:relative; float:right; display:block; width:143px; height:36px; background:url(../images/powered_by_webegan_customised_web_solutions.png)0 0 no-repeat; background-size: 143px 36px; overflow:hidden; text-indent:-2000px;  -webkit-transition: all 0.3s ease 0s;  -moz-transition: all 0.3s ease 0s;  -o-transition: all 0.3s ease 0s;  transition: all 0.3s ease 0s; margin:10px 0;}
			a.webegan:hover { opacity:0.7;}
		
		/* FORM */
		/*
			COLORS
			
			dark green:	#063106
			yellow:		#f7eb02
			clay red:	#8b2c22
			green gradient:  #063106   to   #597658
	*/
		.vote-container { background:#FFF; width:640px; height:auto; margin:0 auto; box-shadow:0 0 6px rgba(0,0,0,0.8);}
		.vote-header { width:640px; height:235px; margin:0 auto 20px auto; background:url(../images/vote_header.jpg)0 0 no-repeat; z-index:999;}
		.form-content { padding:0 20px; }
			.form-content .col33 { width:33%; float:left; padding:0 10px;}
			.form-content .col67 { width:67%; float:left; padding:0 10px;}
			.form-content .form-row .col30:first-child { width:34%;}
			.form-content * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }			
			.form-content .logo { background:url(../images/greenpointtennis_logo_e.png)0 0 transparent no-repeat; width:160px; height:183px; display:block; margin:20px auto;}
			.form-content h1 { text-align:center; text-transform:uppercase; font-size:22px; line-height:22px;}
			.form-content h2 { display:block; color:#FFF; text-align:center; text-transform:uppercase; font-size:18px; line-height:20px; margin:30px 0; padding:20px 0; background:#8b2c22;}
				.form-content h2 span { color:#f7eb02;}
			.form-content h3 { text-align:center; text-transform:uppercase; font-size:16px; line-height:16px; margin:0;}
			.form-content p { text-align:center; font-size:16px; line-height:18px; margin:10px 0;}
				.form-content p em { color:#818181;}
				.form-content p.position { font-weight:bold;}
				.form-content p.error{ font-weight:bold; font-size:16px; line-height:20px; color:#EE0000; text-transform:uppercase; margin:20px 0;}
				.form-content p.margin-bottom { margin-bottom:28px;}
			.form-content .form-row { width:100%;}
			.form-content .form-row:first-child { margin:10px 0;}
			
			.form-content label { font-size:12px; font-family:'open', sans-serif; font-weight:normal; color:#3a474c; text-transform:uppercase;}
			.form-content label.error { background:#ff3a90; color:#FFF; padding:2px 5px;}
			.form-content input { display:block; width:100%; padding:5px 10px; border:1px solid #bfbfbf; margin-top:5px; font-family:'source_sans_proregular', sans-serif; margin-bottom:15px; font-weight:normal; font-size:14px;}
			.form-content input.error { border:1px solid #8b2c22;}
			.form-content .submit { font-size:16px; color:#FFF; background:#8b2c22; padding:8px 15px; text-align:center; display:block; border:none; width:150px; margin:40px auto;}
				.form-content .submit:hover { opacity:0.7;}
			.logo_thank_you { display:block; margin:50px auto 0 auto; width:298px; height:393px; background:url(../images/thank_you_vote.png)0 0 no-repeat transparent;}
			
		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
		/* DESKTOP STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  */
		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
		@media only screen and (min-width:901px) 
		{
			
		}
		
		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
		/* TABLET STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
		
		@media only screen and (max-width:1000px) 
		{
			.main_wrapper .deco_shape { display:none;}
		}
		
		@media only screen and (max-width:900px)
		{
			.main_wrapper { width: 100%;} 
			.site_content .slide_wrapper { width: 100%;}
			.content-header-full { width: 100%; height:auto;}
				.content-header-full img { width:100%; height:auto;}
				
			.left-content-full { width: 100%;}
			
			.main_wrapper header .contact { background: rgba(0, 0, 0, 0) url("../images/contact_bkg2.jpg") repeat scroll 0 0; height: 20px; padding: 5px 0 0; position: absolute; right: 0; text-align: center; top: 0; width: 100%; }
			.main_wrapper header .contact a { display: inline-block;}
			.main_wrapper header .contact a.tel { margin-right:10px;}
			.main_wrapper header .contact h2 { display:none;}
			.social { display:none;}
		}
		
		@media only screen and (max-width:700px) 
		{
			.main_wrapper .deco_shape { display:none;}
			
			#mobile-menu { display:block;}
			#mobile-menu:hover { opacity:0.7;}
			
			.main_wrapper nav.top { transition:all 0.3s ease; padding:0;}
			
			nav.top ul { position:relative; width:100%; padding:20px; margin-top:38px !important; height: 0; overflow: hidden; transition:all 0.3s ease;}
				nav.top ul.show {  height:295px;}
				nav.top ul li:first-child { border-top:1px solid rgba(255, 255, 255, 0.15); padding-top:15px;}
				nav.top ul li { display:block; width:100%; text-align:center; padding:10px 0 15px; margin:10px; border-bottom:1px solid rgba(255,255,255,0.15);}
				nav.top ul li:last-child { border-bottom:none; margin:10px 0 0 0 !important;}
				.main_wrapper nav.top a.active, .main_wrapper nav.top .nav_btn:hover { background:none; box-shadow: none; color:#FFFF00; border:none;}
				.main_wrapper nav.top .nav_btn { background:none; box-shadow: none;}
		}
		
		@media only screen and (min-width:481px) and (max-width:600px) 
		{
			.main_wrapper header h1 { font-size:28px;}
		}
		
		@media only screen and (min-width:481px) and (max-width:900px) 
		{
			
			.main_wrapper nav.top li { margin: 10px 10px 0 0; }
			.box { width:32%; margin: 5px 0 20px 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); border:none !important;}
			.box:nth-child(2) { margin:5px 2% 20px 2%;}
			.box:last-child { float:left;}
			
			.content-header-full { float: none;}
				.content-header-full img { width:100%; height:auto;}
			
			.left-content-full { float: none; padding:20px 0; text-align:center;}
				.left-content-full p { padding:10px 25px; text-align:center;}
				
				.col, .col:nth-child(2) { float:none; width:100%; margin:40px auto;}
				
				.inner-box img { width: 188px !important;}
				
			.left-content-full .left, .left-content-full .right  { width:100%; float:none;}
			img.mosaic { width: 100%; }
			/*.left-content-full img { width: 100%; }*/
			div.history img { width: 100%; }
			.come-and-play img { width: 188px !important;}
			#map-header-full { width:100%; height:300px; float:none;}
		}
		
		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
		/* MOBILE STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
		@media only screen and (max-width:480px) 
		{
			.main_wrapper header h1 { font-size:24px; line-height:26px; margin:10px 0 2px 0;}
			.main_wrapper header p { margin:0;}
			
			.box { width:283px; float:none; margin: 30px auto; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); border:none !important;}
			.box:nth-child(2) { margin:30px auto;}
			.box:last-child { float:none; margin:30px auto;}
			
			.content-header-full { float: none;}
				.content-header-full img { width:100%; height:auto;}
			
			.left-content-full { float: none; padding:20px 0; text-align:center;}
				.left-content-full p { padding:10px 25px; text-align:center;}
				
				.col, .col:nth-child(2) { float:none; width:100%; margin:40px auto;}
				
				.inner-box img { width: 188px;}
				
			.left-content-full .left, .left-content-full .right  { width:100%; float:none;}
			img.mosaic { width: 100%; }
			div.history img { width: 100%; }
			.come-and-play img { width: 188px !important;}
			#map-header-full { width:100%; height:300px; float:none;}
			
			footer { height:auto; margin-bottom:0;}
			footer nav { display:block; text-align:center; float:none;}
			footer .right { display:block; float:none; margin:20px; text-align:center;}
		}
		
		@media only screen and (max-width:380px) 
		{
			.main_wrapper header .contact a { font-size: 10px;}
		}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}