/* ------ GLOBAL ------ */

*{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

html{width:100%; height:100%;}
body{
	width:100%; height:100%;
	margin: 0; padding: 0;
	background-color: #000;
	font-family: 'Fauna One', serif;
	font-size: 14px;
	color: #fff;
	line-height: 22px;
}
img{border-width: 0px}
hr{border: 1px dashed #fff; height: 1px}
td{font-size: 14px;}

h1{color: #fff; font-size: 40px; margin: 10px 0px 30px 0px; font-family: 'Josefin Sans', sans-serif; font-weight: normal; line-height:100%;}
h2{color: #fff; font-size: 30px; margin: 10px 0px; font-family: 'Josefin Sans', sans-serif; font-weight: normal; line-height:100%;}
h3{color: #fff; font-size: 24px; margin: 10px 0px; font-family: 'Josefin Sans', sans-serif; font-weight: normal; line-height:100%;}
h4{color: #fff; font-size: 20px; font-weight: bold; font-family: 'Josefin Sans', sans-serif; margin: 0; line-height:100%;}
h5{color: #fff; font-size: 16px; font-weight: bold; font-family: 'Josefin Sans', sans-serif; margin: 0; line-height:100%;}

a, a img{
	color: #ff0078;
	font-weight: 600;
	text-decoration: none;
	-o-transition: .3s;
	-ms-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	transition: .3s;
}
a:hover{color: #ff0078;}


/* ------ TEMPLATE/LAYOUT ------ */

#tbl{position: relative;}

#topbar{
	padding: 10px;
	background-color: #fff;
}
#topbar h2{color: #000; font-weight: 600;}
#topbar2{
	padding-top: 10px;
	background: #000 url('img/toplines.png') repeat-x;
	background-position: top left;
}

#content{
	padding-top: 50px;
	text-shadow: 1px 1px #000; filter: DropShadow(Color=#000, OffX=1, OffY=1);
}

#content ul{list-style-image: url('img/tick.png'); margin-left: 35px; padding: 0;}
#content ul li{padding-left: 10px;}
#content a:hover{color: #fff}

#footer{
	background-color: #fff;
	font-family: 'Open Sans';
}
#footer a{color: #808080; font-weight:600}
#footer a:hover{color: #000;}
#footer .inner{
	position: relative;
	width: 75%;
	max-width: 1200px;
	padding: 30px;
	margin: auto;
	color: #808080;
	line-height: 250%;
	text-align: left;
}
#footernav{padding: 0; margin: 0;}
#footernav li{
	margin: 0;
	padding: 0px 10px 0px 0px;
	list-style: none;
	display: inline-block;
	color: #ff0078;
}
#footernav li:before{content: '\25BA';}
#footernav li a{
	margin: 0;
	padding: 10px;
	text-align: left;
	text-decoration: none;
}
#footer .socialmedia{text-align: right;}
#footer .socialmedia a img{filter: alpha(opacity=60); opacity: 0.6;}
#footer .socialmedia a:hover img{filter: alpha(opacity=100); opacity: 1.0;}

#nav_responsive_menubutton {
	display: none;
}
/* ------ NAVIGATION ------ */

#navbar{
	position: relative;
	z-index: 100;
	margin: auto;
	padding: 0;
	display: block;
	text-align: center;
}
#navbar li{
	margin: 0;
	padding: 0px 5px 0px 4px;
	list-style: none;
	display: inline-block;
}
#navbar li div{display: none;}
#navbar li:hover div{display: block;}

#navbar li a{
	display: block;
	margin: 0;
	padding: 14px 35px;
	color: #cccccc;
	border-bottom: 6px solid transparent;
	font-size: 16px;
	font-family: 'Josefin Sans';
	font-weight: 600;
	text-align: left;
	text-decoration: none;
}
#navbar li a:hover, #navbar li a.selected{color: #fff; border-bottom-color: #fff;}
#navbar li a:active{color: #ff0078;}

.logo_top {width:425px;}

/* ------ RESPONSIVE ------ */
@media only screen and (max-width : 768px), (max-height : 768px){
	#navbar li a{padding: 20px !important; width: 100% !important;}
	#footer .inner{width: 100% !important; padding: 15px !important;}
	.band .inner{width: 100% !important;}
	.gap-1{margin-top: 25px !important;}
	.gap-2{margin-top: 50px !important;}
	.gap-3{margin-top: 75px !important;}
	.gap-4{margin-top: 100px !important;}
	.gap-5{margin-top: 125px !important;}
	.gap-1b{margin-bottom: 25px !important;}
	.gap-2b{margin-bottom: 50px !important;}
	.gap-3b{margin-bottom: 75px !important;}
	.gap-4b{margin-bottom: 100px !important;}
	.gap-5b{margin-bottom: 125px !important;}
}
@media only screen and (max-width : 767px){
	#navbar li{display: block !important; padding: 0 }
	#footernav li a{font-size: 130%;}
	.cascade, .leftcol, .rightcol{
		display: block !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-bottom: 50px !important;
	}
	.topMenuMargin{margin-bottom:20px !important;}
	.r-left{text-align: left !important;}
	.r-center{text-align: center !important;}
	.r-right{text-align: right !important;}
	
	#nav_responsive_menubutton {
		width: 80%;
		height: 40px;
		display: block;
		font-size:25px;
		margin:0 auto;
		border-radius: 5px;
		border: 1px solid #ccc;
		margin-bottom: -40px !important;
	}
	#nav_responsive_menubutton:hover .icon-bar {
		background-color:#333;
		cursor: pointer;
	}
	#nav_responsive_menubutton:hover {cursor:pointer;}
	#topbar2 {
		background-color: rgba(0,0,0,0.9);
		height: 5px;
	}
	#navbar {display: none; }
	.icon-bar {
		width: 22px;
		height: 2px;
		margin: 0 auto;
		margin-top: 8px;
		display: block;
		border-radius: 1px;
		background-color:#ccc;
	}
	.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {width: 100% !important;}
}
@media only screen and (max-width : 425px){
	.logo_top {width:100%;}
}



/* ------ TABLES/CELLS/DIVS ------ */

.band{min-width: 100%;}
.band .inner{
	position: relative;
	width: 75%;
	max-width: 1200px;
	padding: 30px;
	margin: auto;
	line-height: 220%;
	text-align: left;
}
.table{display: table;}
.row{display: table-row;}
.leftcol{
	display: table-cell;
	width: 50%;
	padding-right: 2%;
}
.rightcol{
	display: table-cell;
	width: 50%;
	padding-left: 2%;
}

#gallery table td{font-size: 11px; padding: 8px 0px; border: 1px solid #ececec; border-width: 0px 0px 1px 0px; line-height: 14px;}
#gallery img{margin: 2px; margin-right: 10px; border: 2px solid #ff0078;}

#formbox{padding: 25px;}
#tokenbox{width: 100%; margin: 8px 0px; padding: 5px; background-color: #000; border-radius: 5px; font-size: 12px; text-align: right; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

.pinkbgbox{background-color: #ff0078 !important; padding: 10px; color: #fff}
.blackbgbox{background-color: rgba(0,0,0,0.9) !important; padding: 10px; color: #fff}
.divInfoBox{position: relative; border-radius: 15px;}


/* ------ CUSTOM TAGS ------ */

.table{width: 100%; display: table}

.left{text-align: left;}
.center{text-align: center;}
.right{text-align: right;}
.top{display: table-cell; vertical-align: top;}
.middle{display: table-cell; vertical-align: middle;}
.bottom{display: table-cell; vertical-align: bottom;}

.clear{display: table-row; width: 100%; height: 0; overflow: hidden;}
.required{color: #ff0000 !important;}

.xsmall{font-size: 60% !important}
.small{font-size: 80% !important}
.medium{font-size: 120% !important;}
.large{font-size: 130% !important;}
.xlarge{font-size: 150% !important;}

.gap-0{margin-top: 0px;}
.gap-1{margin-top: 50px;}
.gap-2{margin-top: 100px;}
.gap-3{margin-top: 150px;}
.gap-4{margin-top: 200px;}
.gap-5{margin-top: 250px;}
.gap-0b{margin-bottom: 0px;}
.gap-1b{margin-bottom: 50px;}
.gap-2b{margin-bottom: 100px;}
.gap-3b{margin-bottom: 150px;}
.gap-4b{margin-bottom: 200px;}
.gap-5b{margin-bottom: 250px;}


/* ------ COLOURS ------ */

.pink{color: #ff0078 !important;}
.pinkbg{background-color: #ff0078 !important;}
.mgray{color: #a0a0a0 !important;}
.mgraybg{background-color: #a0a0a0 !important;}
.dgray{color: #606060 !important;}
.dgraybg{background-color: #606060 !important;}
.black{color: #000 !important;}
.blackbg{background-color: rgba(0,0,0,0.9) !important;}
.transblackbg{
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);	/* For IE 5.5 - 7*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";	/* For IE 8*/
}
.transpinkbg{
    background: rgb(255, 0, 120) transparent;
    background: rgba(255, 0, 120, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ff0078, endColorstr=#99ff0078);	/* For IE 5.5 - 7*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ff0078, endColorstr=#99ff0078)";	/* For IE 8*/
}


/* ------ BUTTONS ------ */

a.button, a.button:visited{
	display: inline-block; display: -moz-inline-block;
	padding: 12px 20px;
	background-color: #000;
	color: #fff;
	border: 1px solid #606060;
	border-radius: 3px;
	box-shadow: 0 0 3px #fff;
	text-decoration: none;
	outline: none;
}
a.button:hover{background-color: #ff0078; border-color: #ff75b6; box-shadow: 0 0 3px #404040;}
a.button:active{background-color: #ff75b6; border-color: #ff75b6;}
a.button:focus{outline: none}


/* ------ FORMS/INPUTS/MESSAGES ------ */

input[type="text"]{font-size: 14px; font-family: 'Fauna One', serif; color: #000; border: 1px solid #000; padding: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"]:focus{border-color: #fff;}
select{font-size: 14px; font-family: 'Fauna One', serif; color: #000; border: 1px solid #000; padding: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
select:focus{border-color: #fff;}
textarea{font-size: 14px; font-family: 'Fauna One', serif; color: #000; border: 1px solid #000; padding: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
textarea:focus{border-color: #fff;}

div.success{width: 100%; display: block; margin: 10px 0px; background-color: #6fb500; border: 1px solid #62a000; color: #fff; font-weight: bold; text-align: left;}
div.msg{padding: 5px 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
div.error{width: 100%; display: block; margin: 10px 0px; background-color: #e90078; border: 1px solid #ff0078; color: #fff; font-weight: bold; text-align: left;}
input.error{background-color: #e90078 !important; color: #000 !important}
textarea.error{background-color: #e90078 !important; color: #000 !important}
select.error{background-color: #e90078 !important; color: #000 !important;}




/* GALLERY STYLES */
#gallery_images {
	width: 100%;
	padding: 0px 2%;
	margin: 0 auto;
	position: relative;
}
#gallery_images .item {
	display: inline-block;
	vertical-align: top;
	padding: 10px;
	width: 19%;
	cursor: pointer;
}
#gallery_images .item img {
	max-width: 100%;
	height: auto;
	border: 3px solid #fff;
}
#gallery_images .item .caption {
	width: 100%;
	vertical-align: bottom;
	margin: 0px -10px 19px;
	position: absolute;
	bottom: 0;
	display: none;
}
#gallery_images .item .caption h1 {
	display: block;
	background-color: rgba(0,0,0,0.5);
	margin: 0px 10px;
	padding: 10px 0px 0px;
	font-size: 25px;
}
#gallery_images .item .caption h2 {
	display: block;
	background-color: rgba(0,0,0,0.5);
	margin: 0px 10px;
	padding: 10px 0px;
	font-size: 16px;
}


@media (max-width:1100px){
#gallery_images .item { width: 32%; }
}
@media (max-width:750px){
#gallery_images .item { width: 48%; }
}
@media (max-width:500px){
#gallery_images .item { width: 95%; }
}
