@charset "UTF-8";

/* WEBSITE INFO
------------------------

swatch colours
--------------


Green : #006225
Light green : #d4de27


------------------------*/





/*	========================================================
	@font-face 
	========================================================*/
	

@font-face { font-family: Gotham Bold; src: url("fonts/Gotham/Gotham-Bold.otf") format("opentype"); }
@font-face { font-family: Gotham Medium; src: url("fonts/Gotham/Gotham-Medium.otf") format("opentype"); }
@font-face { font-family: Gotham Book; src: url("fonts/Gotham/Gotham-Book.otf") format("opentype"); }
@font-face { font-family: Gotham Light; src: url("fonts/Gotham/Gotham-Light.otf") format("opentype"); }
@font-face { font-family: Gotham Bold Italic; src: url("fonts/Gotham/Gotham-BoldItalic.otf") format("opentype"); }
@font-face { font-family: Gotham Medium Italic; src: url("fonts/Gotham/Gotham-MedItalic.otf") format("opentype"); }
@font-face { font-family: Gotham Book Italic; src: url("fonts/Gotham/Gotham-BookItalic.otf") format("opentype"); }
@font-face { font-family: Gotham Light Italic; src: url("fonts/Gotham/Gotham-LightItalic.otf") format("opentype"); }





/*	========================================================
	Typography
	========================================================*/




a:link, a:active, a:visited {
	text-decoration:none;
	transition: 0.2s;
	-moz-transition: 0.2s; /* Firefox 4 */
	-webkit-transition: 0.2s; /* Safari and Chrome */
	-o-transition: 0.2s; /* Opera */
}

a:hover {
	text-decoration:none;
	transition: 0.2s;
	-moz-transition: 0.2s; /* Firefox 4 */
	-webkit-transition: 0.2s; /* Safari and Chrome */
	-o-transition: 0.2s; /* Opera */
}

h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { 
	margin: 1.12em 0;
}

h1 {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
	letter-spacing:0.1em;
	font-size: 3.6em; 
	margin: .67em 0;
}

h2 {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: 2.4em; 
	margin: .75em 0;
	letter-spacing:0.03em;
}

h3 {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: 1.5em; 
	margin: .83em 0;
	letter-spacing:0.12em;
}

h4 {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: 2em; 
	margin: 0.78em 0;
	font-weight:200
}

h5 {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: 15px;  
	margin: 1.1em 0;
	font-weight:500;
}

h6 {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: .7em; 
	letter-spacing:0.1em;
	margin: 1.67em 0;
}

p {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: 0.88em;
	margin: 0.64em 0;
	line-height: 1.6em;
}



.nomargin {margin:0;}
.center { text-align:center; }
.margin-center {margin:auto !important; float:none !important;}





/*	========================================================
	Layout
	========================================================*/


html { 
	font-size:100%; 
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	color:#262626;
	
	-webkit-text-size-adjust:none; 
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	
	margin:0;
	padding:0;
	border:0;
	width:100%;
	height:100%;
}

body {
	background-image:url(../img/bg-light.jpg);
	background-repeat: repeat;
	height:100%;
	width:100%;
}

* {
	margin:0;
	padding:0;
	font-weight:normal;
}

img {
	border:none;
}

hr {
	width:60px; height:3px; 
	background-color:#d4de27; 
	margin:auto; margin-bottom:20px; margin-top:20px; 
	border:0;
}

.one { width:70px; margin:0 5px; float:left; overflow:hidden; }
.two { width:150px; margin:0 5px; float:left; overflow:hidden; }
.three { width:230px; margin:0 5px; float:left; overflow:hidden; }
.four { width:310px; margin:0 5px; float:left; overflow:hidden; }
.five { width:390px; margin:0 5px; float:left; overflow:hidden; }
.six { width:470px; margin:0 5px; float:left; overflow:hidden; }
.seven { width:550px; margin:0 5px; float:left; overflow:hidden; }
.eight { width:630px; margin:0 5px; float:left; overflow:hidden; }
.nine { width:710px; margin:0 5px; float:left; overflow:hidden; }
.ten { width:790px; margin:0 5px; float:left; overflow:hidden; }
.eleven { width:870px; margin:0 5px; float:left; overflow:hidden; }
.twelve { width:950px; margin:0 5px; float:left; overflow:hidden; }

.one-over { margin-left:80px; }
.two-over { margin-left:160px; }
.three-over { margin-left:320px; }
.four-over { margin-left:400px; }
.five-over { margin-left:480px; }
.six-over { margin-left:560px; }
.seven-over { margin-left:640px; }
.eight-over { margin-left:720px; }
.nine-over { margin-left:800px; }
.ten-over { margin-left:880px; }
.eleven-over { margin-left:960px; }





.mainContent {
	width:100%;
	min-width:960px;
	height:100%;
	background-color:#fff;
	background-image:url(../img/bg-main.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:auto 100%;
}
.main {
	width:960px;
	height:100%;
	position:relative;
	margin:auto;
	overflow:hidden;
}
.main.coconuts {
	background-image:url(../img/bg-coconuts.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:auto 100%;
}

.mainContent .main .circleWrapper {
	position:absolute;
	height:250px;
	width:100px;
	top:50%;
	margin-top:-165px;
	right:80px;
}
.mainContent .main .circleWrapper-left {
	position:absolute;
	height:250px;
	width:100px;
	top:50%;
	margin-top:-165px;
	left:80px;
}
.mainContent .main .circle {
	width:100px;
	height:100px;
	float:left;
	margin:15px 0;
	color:#fff;
	text-align:center;
	cursor:pointer;
	border-radius:100px;
	
	-webkit-box-shadow: 0 0 30px 0 rgba(255,255,255,0.7);
	box-shadow: 0 0 30px 0 rgba(255,255,255,0.7);
}

.mainContent .main .circle.one { background-image:url(../img/circle1.png); }
.mainContent .main .circle.two { background-image:url(../img/circle2.png); }
.mainContent .main .circle.three { background-image:url(../img/circle3.png); }
.mainContent .main .circle.four { background-image:url(../img/circle4.png); }

.mainContent .main .circle p {
	font-size:0.7em;
	margin: 3em 0;
	line-height:1.2em;
}
.mainContent .main .circle em {
	font-size:2em;
	color:#d4de27;
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-style:normal;
}

.mainContent .main .textWrapper {
	position:absolute;
	height:auto;
	width:100%;
	bottom:7%;
	left:0;
	text-align:center;
	color:#006225;
	opacity:0.4;
	filter:alpha(opacity=40);
}
.mainContent .main .textWrapper h4 {
	font-size: 2.2em;
	margin: 1.12em 0;
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight:300;
}

.footer { 
	position:fixed;
	bottom:-500px;
	left:0;
	height:560px; width:100%; 
	border-top:3px solid #d4de27;
	
	-webkit-box-shadow: inset 0 0 100px 0 rgba(255,255,255,0.2);
	box-shadow: inset 0 0 100px 0 rgba(255,255,255,0.2);
	
	transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; 
}

.footer.show { 
	bottom:0px;
}

.footer .head { width: 100%; min-width:960px; height: 60px; color:#d4de27; background-color:#006225; }
.footer .head ul { width:100%; height: 100%; list-style:none; margin:0; padding:0; }
.footer .head ul li { float:left; width:33%; text-align:center; margin:6px 0; height: 100%; position: relative; }

.footer .head ul li#aboutBtn { text-align:left; cursor:pointer; }
.footer .head ul li#aboutBtn .show-hide { 
	width:15px; height:15px; display:block; position:relative; 
	margin:18px 20px 10px 40px;
	background-image:url(../img/plus.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	float:left;
	
	transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; -o-transition: 0.2s; 
}
.footer .head ul li#aboutBtn .show-hide.rotate { 
	-webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
}

.footer .head ul li#competition a {
	position: absolute;
	bottom: 0; right: 0;
	display: block;
	overflow: hidden; }




.footer .info { position:relative; width:100%; text-align:center; background-color:rgba(255,255,255,0.8); padding:30px 0; margin-top:0; background-image:url(../img/bg-droplets.jpg); background-size:400px; opacity:0.9; filter:alpha(opacity=90); }
.footer.show .info h4 { color:#fff; }
.footer .info p { font-weight:500;}






.footer .contact { position:relative; width:100%; text-align:center; margin-top:0; color:#fff; background-color:#262626; height:300px;
	
	-webkit-box-shadow: inset 0 0 90px 0 rgba(0,0,0,0.8);
	box-shadow: inset 0 0 90px 0 rgba(0,0,0,0.8);}

.footer .contact ul.contactWrapper {
	width:100%;
	list-style:none;
	padding-bottom:30px;
}
.footer .contact ul.contactWrapper li {
	padding-top:10px;
	width:33%;
	float:left;
	opacity:0.7; filter:alpha(opacity=70);
}

.footer .contact ul.contactWrapper li:hover {
	opacity:1; filter:alpha(opacity=100);
}

.footer .contact ul.contactWrapper li a {
	color:#d4de27;
}