/* ==================================================
   Custom Grid Styles
================================================== */

.row
{
	width: 100%;
	
	width: -moz-calc(100% + 40px);
	width: -webkit-calc(100% + 40px);
	width: -o-calc(100% + 40px);
	width: calc(100% + 40px);
	
	margin: 0 -20px;
}

	.row .box
	{
		padding: 0;
		margin: 0;
		
	}
	
.withbg
{
	background: url("../images/bg.png") repeat-y 50% 0;
}
	
/* ==================================================
   Grid System
================================================== */

[class*='dwdgrid-']
{
	position: relative;
	float: left;
	width: 100%;
	padding: 0 20px;
}

.dwdgrid-1
{ width: 8.3333333333333%; }

.dwdgrid-2
{ width: 16.666666666667%; }

.dwdgrid-3
{ width: 25%; }

.dwdgrid-4
{ width: 33.333333333333%; }

.dwdgrid-5
{ width: 41.666666666667%; }

.dwdgrid-6
{ width: 50%; }

.dwdgrid-7
{ width: 58.333333333333%; }

.dwdgrid-8
{ width: 66.666666666667%; }

.dwdgrid-9
{ width: 75%; }

.dwdgrid-10
{ width: 83.333333333333%; }

.dwdgrid-11
{ width: 91.666666666667%; }

.dwdgrid-12
{ width: 100%; }

/* ==================================================
   Media Queries - Mobile - Landscape
================================================== */

@media only screen and (max-width: 960px)
{
	
	[class*='dwdgrid-']
	{
		width: 100%;
	}

	[class*='dwdgrid-']:last-of-type
	{
		float: right;
	}

	.withbg
	{
		background-image: none;
	}
	
}

/**

<div class="row withbg clearfix">
	<div class="dwdgrid-6">
		<div class="box">
			<h3>Half Width</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget diam dictum, posuere velit eu, condimentum orci. Sed eget sapien dictum arcu venenatis dignissim. Cras vitae est facilisis tortor vestibulum mollis. Vivamus tempor malesuada dolor, vitae tempus dolor.</p>
		</div>
	</div>
	<div class="dwdgrid-6">
		<div class="box">
			<h3>Half Width</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget diam dictum, posuere velit eu, condimentum orci. Sed eget sapien dictum arcu venenatis dignissim. Cras vitae est facilisis tortor vestibulum mollis. Vivamus tempor malesuada dolor, vitae tempus dolor.</p>
		</div>
	</div>
</div>

**/

/* ==================================================
   Global Styles
================================================== */

body
{

	font-family: "Source Sans Pro", Arial, Verdana, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 28px;
	color: #444;
}

::selection
{
	background: #0070BF;
	color: #FFF;
}

::-moz-selection
{
	background: #0070BF;
	color: #FFF;
}

a
{
	color: #0070BF;
	text-decoration: none;
}

	a:hover
	{
		color: #222;
	}
	
.textleft
{
	text-align: left;
}
	
.textcentre
{
	text-align: center;
}
	
.textright
{
	text-align: right;
}

p
{
	margin: 0 0 20px 0;
}

	p.highlight
	{
		font-size: 130%;
	}

strong, b
{
	font-weight: 700;
}

	strong.largebold
	{
		font-size: 120%;
		text-transform: uppercase;
	}

em, i
{
	font-style: italic;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 20px 0;
	font-weight: 700;
	color: #333;
	text-transform: none;
	font-style: normal;
}

	h1
	{
		font-size: 32px;
		line-height: 32px;
		letter-spacing: -0.6px;
	}
	
	h2
	{
		font-size: 28px;
		line-height: 28px;
	}
	
	h3
	{
		font-size: 26px;
		line-height: 26px;
	}
	
	h4
	{
		font-size: 24px;
		line-height: 24px;
	}
	
	h5
	{
		font-size: 22px;
		line-height: 22px;
	}
	
	h6
	{
		font-size: 20px;
		line-height: 20px;
	}
	
ul
{
	margin: 0 0 20px 25px;
	list-style-type: square;
}

	ul li
	{
		padding: 0;
	}

		ul ul
		{
			margin: 0 0 0 15px;
		}
		
.tickul ul
{
	margin: 0 0 20px 0;
	list-style-type: none;
}

	.tickul ul li span
	{
		margin: 0 8px 0 0;
		color: #76C045;
	}
		
ol
{
	margin: 0 0 20px 25px;
	list-style-type: decimal;
}

	ol li
	{
		padding: 0;
	}

		ol ol
		{
			margin: 0 0 0 15px;
		}

hr
{
	clear: both;
	border: 0;
	height: 0;
	margin: 0 0 20px 0;
	border-top: 1px dotted #CCC;
}
		
/* ==================================================
   Responsive Media Queries - Tablets
================================================== */

@media only screen and (max-width: 960px)
{
		
	.textcentre
	{
		text-align: left;
	}
		
	.textright
	{
		text-align: left;
	}
	
	.tickul .dwdgrid-6:first-child ul
	{
		margin: 0;
	}

	
}


/* ==================================================
   Buttons
================================================== */

.button
{
	display: inline-block;
	padding: 14px 18px 12px 18px;
	font-size: 17px;
	line-height: 17px;
	font-weight: 500;
	font-family: inherit;
	color: #FFF;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	background: #0070BF;
	outline: 0;
	border: none;
	cursor: pointer;
	letter-spacing: 0.6px;
	border-bottom: 3px solid rgba(0,0,0,0.2);
}

	.button.redbutton
	{
		background: #e74c3c;
	}

.button.curvedcorners
{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.button.fullbutton
{
	width: 100%;
}

	.button:hover
	{
		color: #FFF;
	}

	.button:active
	{	
		transform: translate(0px,3px);
		-webkit-transform: translate(0px,3px);
		border-bottom: 0;
		margin-bottom: 3px;
	}
	
/* ==================================================
   	Images
================================================== */

.imgleftdiv
{
    float: left;
    max-width: 320px;
    margin: 0 20px 15px 0;
}
        
    .imgleftdiv img
    {
        width: 100%;
        display: block;
        margin: 0 0 8px 0;
    }
        
.imgrightdiv
{
    float: right;
    max-width: 320px;
    margin: 0 0 15px 20px;
}
        
    .imgrightdiv img
    {
        width: 100%;
        display: block;
        margin: 0 0 8px 0;
    }
	
.img250
{
	max-width: 250px;
}

.imgfull
{
	width: 100%;
	max-width: 800px;
}

.imgfull540
{
	width: 100%;
	max-width: 540px;
}

.imgfull350
{
	width: 100%;
	max-width: 350px;
}

@media only screen and (max-width: 960px)
{
	
	.imgleftdiv
	{
		float: none;
		max-width: 340px;
		margin: 0 0 20px 0;
	}

		.imgleftdiv .caption
		{
			text-align: left;
		}
	
	.imgrightdiv
	{
		float: none;
		max-width: 340px;
		margin: 0 0 20px 0;
	}

		.imgrightdiv .caption
		{
			text-align: left;
		}
	
}

@media only screen and (max-width: 480px)
{		
	
	
	
}

/* ==================================================
   Custom Gallery
================================================== */

#imggallery
{
	float: left;
	width: 100%;
	
	margin: 0 -10px 30px -10px;
	
	width: -moz-calc(100% + 20px);
	width: -webkit-calc(100% + 20px);
	width: -o-calc(100% + 20px);
	width: calc(100% + 20px);
}

	#imggallery ul
	{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
		#imggallery ul li
		{
			float: left;
			width: 33.33%;
			margin: 0;
			padding: 10px;
			list-style-type: none;
		}
		
			#imggallery ul li a
			{
				float: left;
			}
			
				#imggallery ul li a img
				{
					display: block;
					width: 100%;
					max-width: 400px;
				}

@media only screen and (max-width: 768px)
{
	
	#imggallery ul li
	{
		width: 50%;
	}

}

@media only screen and (max-width: 480px)
{		
	
	#imggallery ul li
	{
		width: 50%;
	}
	
}

/* ==================================================
   Hover Img
================================================== */

.hoverimage
{
	position: relative;
	line-height: 0;
	margin: 0;
	padding: 10px;
	background: #FFF;
}

#maincont .hoverimage
{
	padding: 0;
}

	.hoverimage .hoverwrapper
	{
		overflow: hidden;
		position: relative;
		background: #FFF;
	}
	
	.hoverimage .hoverwrapper img
	{
		width: 100%;
	}

	.hoverimage .hoverwrapper img:not(.ls-l)
	{
		position: relative;
		top: 0;
		transform: scaleY(1);
	}

	.hoverimage:not(.no_link) .hoverwrapper img:not(.ls-l)
	{
		margin-bottom: -10px !important;
	}

	.hoverimage:hover .hoverwrapper img
	{
		top: -10px;
		opacity: 1;
	}

	.hoverimage .hoverwrapper img
	{
		transition: all 0.2s ease-in-out 0s;
	}
	
		.hoverimage .hoverwrapper .mask
		{
			position: absolute;
			width: 38px;
			height: 38px;
			text-align: center;
			font-size: 18px;
			color: #FFF;
			background: rgba(0,0,0,0.25);
			padding: 9px 10px 11px 10px;
			bottom: 10px;
			right: 10px;
			
			transition: all 0.2s ease-in-out 0s;
		}
		
			.hoverimage:hover .hoverwrapper .mask
			{
				background: #0070BF;
			}

/* ==================================================
   Search Box
================================================== */

.sb-search
{
	position: relative;
	width: 100%;
	min-width: 100px;
	height: 50px;
	overflow: hidden;
	
	-webkit-backface-visibility: hidden;
}

	.sb-search .sb-search-input
	{
		position: absolute;
		top: 0;
		right: 0;
		border: none;
		outline: none;
		background: #EEE;
		width: 100%;
		height: 50px;
		color: #444 !important;
		margin: 0;
		z-index: 10;
		padding: 0 65px 0 15px;
		font-family: inherit;
		font-size: 14px;
		font-style: normal;
		color: inherit;
		font-weight: 400;
		
		-webkit-appearance: none;
		
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}

button.formbutton, .sb-search-submit
{
	width: 54px;
	height: 54px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	text-align: center;
	cursor: pointer;
}

	.sb-search-submit
	{
		background: #FFF; /* IE needs this */
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
		filter: alpha(opacity=0); /* IE 5-7 */
		opacity: 0;
		color: transparent;
		border: none;
		outline: none;
		z-index: -1;
	}
	
	button.formbutton
	{
		color: #FFF;
		background: #0070BF;
		z-index: 90;
		border: 0;
		height: 50px;
	}
	
	button.formbutton span
	{
		font-size: 19px;
	}
	
		button.formbutton:hover
		{
			background: #0070BF;
		}

/* ==================================================
   Responsive Tables
================================================== */

#responsivetable
{
	overflow-x: auto;
	margin: 0 0 30px 0;
	padding: 5px;
	border: 1px solid #CCC;
}

	#responsivetable table
	{
		border-collapse: collapse;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	#responsivetable table tr:nth-child(even)
	{
		background: #EEE;
	}
	
	#responsivetable table tr:nth-child(odd)
	{
		background: #FFF;
	}

	#responsivetable table th,
	#responsivetable table td
	{
		padding: 12px 15px;
		text-align: left;
		line-height: 1em;
		border: 2px solid #FFF;
	}

	#responsivetable table th
	{
		background: #0070BF;
		color: #FFF;
		font-weight: 800;
		
	}