body {
	margin:0;

	padding:0;

	border:0;/* This removes the border around the viewport in old versions of IE */

	width:100%;

	background:#000;

	min-width:600px;/* Minimum width of layout - remove line if not required */

                        /* The min-width property does not work in old versions of Internet Explorer */

	font-size:90%;
}

        a {
color:#fff;
}

        a:hover {
color:#fff;

	background:#369;

	text-decoration:none;
}


h1, h2, h3 {
margin:.8em 0 .2em 0;

	padding:0;
}

        p {
margin:.4em 0 .8em 0;

	padding:0;
}


img {
   margin:1px 0 1px;
}


#ads img {
	display:block;
	padding-top:10px;
}



/* Header styles */

#header {
clear:both;

	float:left;

	width:100%;
}


#header {
border-bottom:1px solid #000;
}

#header p,
#header h1,


#header h2 {
padding:.4em 5px 0 5px;
margin:0;
}

#header ul {
clear:left;
	float:left;
width:100%;
list-style:none;
margin:1px 0 0 0;
padding:0;
}

#header ul li {
	display:inline;
	list-style:none;
margin:0;
padding:0;
}

#header ul li a {
display:block;
	float:left;
margin:0 0 0 1px;
padding:3px 1px;
text-align:center;
background:#000;
color:#fff;
text-decoration:none;
	position:relative;
	         left:5px;
line-height:1.3em;
}

#header ul li a:hover {
	background:#369;
color:#fff;
}

#header ul li a.active,


background:#000;
font-weight:bold;
}

#header ul li a span {
	display:block;
}
/* 'widths' sub menu */


#layoutdims {
clear:both;

	background:#000;

	border-top:10px solid #000;

	margin:0;

	padding:2px 2px !important;

	text-align:right;
}


/* unvisited link */
a:link {
  color: lightblue;
}

/* visited link */
a:visited {
  color: lightgray;
}

/* mouse over link */
a:hover {
  color: Orange;
}

/* selected link */
a:active {
  color: red;
}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

video#fullscreen {
	position:fixed;
	right:0;
	bottom:0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background: url(../../images/banner.jpg) no-repreat;
	background-size: cpver;
} 


/* Box */

	.box {
		border-radius: 5px;
		margin-bottom: 2em;
		background: #2c2c32;
		text-align: center;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box .image.fit {
			margin: 0;
		}

		.box .image img {
			border-radius: 4px 4px 0 0;
		}

		.box .inner {
			padding: 2.0em;
			width: 100% !important;
		}

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

				.box .inner {
					padding: 0em;
				}

			}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}


/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: #70c7be;
		border-radius: 4px;
		border: 0;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-weight: 400;
		height: 2.85em;
		line-height: 2.95em;
		padding: 0 1.5em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: #82cec6;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: #5ec0b6;
		}

		input[type="submit"].icon,
		input[type="reset"].icon,
		input[type="button"].icon,
		button.icon,
		.button.icon {
			padding-left: 0.0em;
		}

			input[type="submit"].icon:before,
			input[type="reset"].icon:before,
			input[type="button"].icon:before,
			button.icon:before,
			.button.icon:before {
				margin-right: 0.5em;
			}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			display: block;
			margin: 0 0 1em 0;
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.8em;
		}

		input[type="submit"].big,
		input[type="reset"].big,
		input[type="button"].big,
		button.big,
		.button.big {
			font-size: 1.35em;
		}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			background-color: rgba(255, 255, 255, 0.75) !important;
			box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
			color: #202024 !important;
			cursor: default;
			opacity: 0.25;
		}

		input[type="submit"].style2,
		input[type="reset"].style2,
		input[type="button"].style2,
		button.style2,
		.button.style2 {
			background-color: #7f92cf;
		}

			input[type="submit"].style2:hover,
			input[type="reset"].style2:hover,
			input[type="button"].style2:hover,
			button.style2:hover,
			.button.style2:hover {
				background-color: #92a2d6;
			}

			input[type="submit"].style2:active,
			input[type="reset"].style2:active,
			input[type="button"].style2:active,
			button.style2:active,
			.button.style2:active {
				background-color: #6c82c8;
			}

		input[type="submit"].style3,
		input[type="reset"].style3,
		input[type="button"].style3,
		button.style3,
		.button.style3 {
			background-color: #9d7ed0;
		}

			input[type="submit"].style3:hover,
			input[type="reset"].style3:hover,
			input[type="button"].style3:hover,
			button.style3:hover,
			.button.style3:hover {
				background-color: #ab91d7;
			}

			input[type="submit"].style3:active,
			input[type="reset"].style3:active,
			input[type="button"].style3:active,
			button.style3:active,
			.button.style3:active {
				background-color: #8f6bc9;
			}

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

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			button,
			.button {
				padding: 0;
			}

		}

/* column container */

.colmask {
position:relative;/* This fixes the IE7 overflow hidden bug */

	clear:both;

	float:right;

	width:100%;/* width of whole page */

	overflow:hidden;/* This chops off any overhanging divs */
}


/* common column settings */

.colright,
.colmid,
.colleft {
float:left;
width:100%;/* width of page */

	position:relative;
}


.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;/* no left and right padding on columns,
          we just make them narrower instead
 
	  only padding top and bottom is included here, make it whatever value you need */

	overflow:visible;
}


/* 3 Column settings */

.threecol {
background:;/* right column background colour */
}


.threecol .colmid {
right:33%;/* width of the right column */

        background:;/* center column background colour */
}


.threecol .colleft {
right:33%;/* width of the middle column */

	background:;/* left column background colour */
}

/* Content Width */


.threecol .col1 {
width:30%;/* width of center column content (column width minus padding on either side) */

	left:66%;/* 100% plus left padding of center column */
}


.threecol .col2 {
width:30%;/* Width of left column content (column width minus padding on either side) */

	left:71%;/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}


.threecol .col3 {
width:30%;/* Width of right column content (column width minus padding on either side) */

	left:76%;/* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus                     (right column left padding) */
}

/* Image */

	.image {
		border-radius: 4px;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			border-radius: 4px;
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			padding: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			padding: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/* Banner */

	#banner {
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		padding: 8em 4em 6em 4em;
		min-height: 70vh;
		background-image: none;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		border-top: 0;
		position: relative;
		text-align: center;
		overflow: hidden;
	}

		#banner .inner {
			text-align: center;
			position: relative;
			z-index: 2;
		}

		#banner h1 {
			color: #fff;
			font-size: 5em;
			font-weight: 400;
			font-family: 'Passion One', cursive;
			margin: 0;
		}

			@media screen and (max-width: 980px) {

				#banner h1 {
					font-size: 5em;
				}

			}

			@media screen and (max-width: 736px) {

				#banner h1 {
					font-size: 3em;
				}

			}

		#banner p {
			color: rgba(255, 255, 255, 0.85);
			font-size: 1.5em;
			font-weight: 300;
		}

			@media screen and (max-width: 980px) {

				#banner p {
					font-size: 1.5em;
				}

			}

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

				#banner p {
					font-size: 1.25em;
				}

			}

		#banner a {
			color: rgba(255, 255, 255, 0.75);
			text-decoration: none;
			border-bottom: 1px dotted;
		}

			#banner a:hover {
				color: #FFF;
				border: none;
			}

		#banner .more {
			background-image: url("image/arrow.svg");
			background-position: center 1.35em;
			background-repeat: no-repeat;
			background-size: auto;
			border: 1px solid #fff;
			border-radius: 100%;
			color: rgba(255, 255, 255, 0.75);
			display: block;
			height: 4em;
			text-indent: 4em;
			overflow: hidden;
			white-space: nowrap;
			width: 4em;
			z-index: 2;
			margin: 0 auto 2em auto;
		}

			#banner .more:hover {
				background-color: rgba(255, 255, 255, 0.05);
				border: 1px solid #fff;
				color: #FFF;
			}

		#banner video {
			-moz-transform: translateX(50%) translateY(50%);
			-webkit-transform: translateX(50%) translateY(50%);
			-ms-transform: translateX(50%) translateY(50%);
			transform: translateX(50%) translateY(50%);
			position: absolute;
			bottom: 50%;
			right: 50%;
			width: auto;
			height: auto;
			min-width: 100%;
			min-height: 100%;
			overflow: hidden;
		}

		#banner:before {
			-moz-transition: opacity 0s ease;
			-webkit-transition: opacity 0s ease;
			-ms-transition: opacity 0s ease;
			transition: opacity 3s ease;
			-moz-transition-delay: 1s;
			-webkit-transition-delay: 1s;
			-ms-transition-delay: 1s;
			transition-delay: 1s;
			content: '';
			background-color: #42424f;
			display: block;
			height: 100%;
			left: 0;
			opacity: 0.0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: -100;
		}

		@media screen and (max-width: 1280px) {

			#banner video {
				display: none;
			}

		}

		@media screen and (max-width: 980px) {

			#banner br {
				display: none;
			}

		}

		@media screen and (max-width: 736px) {

			#banner {
				min-height: 0;
				padding: 6em 2em 4em 2em;
			}

				#banner br {
					display: none;
				}

		}

		body.is-loading #banner:before {
			opacity: 0;
		}

/* Main */

	#main {
		padding: 4em 0 2em 0;
	}

		@media screen and (max-width: 736px) {

			#main {
				padding: 3em 0 1em 0;
			}

		}

		#main .inner {
			width: 90%;
			max-width: 80em;
			margin: 0 auto;
		}

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

				#main .inner {
					width: 95%;
				}

			}

/* Footer styles */

#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}

#footer p {
padding:10px;
margin:0;
}