/*---------------------------------
	HTML ELEMENTS
-----------------------------------*/

a{
	outline: 0;
	cursor: pointer;
	text-decoration: none;
}
a:active{color:inherit;}
a:visited{}
a:hover{}

strong,b{color:#000;font-weight:bold;}
col_8 em,i{
	font-style: normal;
	color: #929292;
}


/*---------------------------------
	LAYOUT
-----------------------------------*/
*{}

body{
	margin: 0;
	padding: 0;
	color: #000;
	background: #efefef;
	font-size: 100%;
	line-height: 150%;
	font-weight: normal;
	text-shadow: 0 0 1px transparent;
	font-family: 'Muli', sans-serif;
	;
	;
}

wrap{ 
width:100%;
height: auto;
}


/*---------------------------------
	HEADER
-----------------------------------*/

#header{
	background-color: black;
}


/*---------- navigation -----------*/

.navbar{
	min-height: 90px;
	height: auto;
	color: white;
	margin: 0;
	padding: 0;
}

.navbar #logo {
	margin-top: 16px;
}
.navbar #logo img {
	height: auto;
	width: 75%;
	max-width: 285px;
	min-width: 285px;
}

.navbar span {
	font-style: italic;
}


.navbar ul {
	display: block;
	float: right;
	margin: 0 5%;
	padding: 0;
	min-height: 72px;
	height: auto;
	width: auto;
	letter-spacing: 3px;
}

.navbar li {
	display: block;
	float: left;
	background-color: black;
	color: white;
	text-transform: uppercase;
	height: 72px;
	width: auto;
	margin: 0;
	padding: 0;	
}

.navbar li a {
	display: block;
	background-color: black;
	text-decoration: none;
	color: white;
	height: 42px;
	padding: 18px 18px 0;
	text-align: center;
	margin-top: 7px;
}
		
.navbar li a:hover {
	background-color: #fff;
	color: #000;
	text-decoration: none;
}



/*---------- responsive navigation -----------*/

.show-navbar {
	text-decoration: none;
	color: #000;
	background: #fff;
	text-align: center;
	padding: 10px 0;
	display: none;
	font-size: 2em;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    cursor: pointer;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navbar{
    display: block;
    cursor: pointer;
}
.row .col_8  {
	float: right;
	line-height: 2.5em;
}
.col_8 .col_8 p {
	font-size: 16pt;
}
.row .col_8 .col_8 {
	float: left;
}
.col_12 .col_2  {
	margin-bottom: 229px;
}
.grid .row .col_12 h1 {
	margin-top: 50px;
	font-size: 50pt;
	text-align: center;
}
.row .col_12 img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
.row .col_12 h2 {
	font-style: normal;
	font-size: 18pt;
	margin-bottom: 0px;
	line-height: normal;
	text-align: center;
	letter-spacing: 4px;
}
.row .col_5 h2 {
	font-style: normal;
	letter-spacing: 4px;
	font-size: 26px;
	margin-bottom: 0px;
	margin-top: 40px;
	text-align: center;
}

.row .col_12 h3 {
	text-align: center;
	font-weight: normal;
	color: #929292;
	letter-spacing: 4px;
	font-size: 16pt;
	margin-bottom: 100px;
}
.row .col_12 a {
	color: #000000;
}
.row .col_12  a:hover {
	color: #6B6B6B;
}

.grid .row .col_7 img {
	width: 100%;
	height: auto;
	margin-top: 40px;
}
.row .col_5 h3 {
	margin-bottom: 25px;
	font-weight: normal;
	color: #929292;
	letter-spacing: 4px;
	font-size: 22px;
	margin-top: 5px;
	text-align: center;
}
.row .col_5 p {
	font-size: 18px;
	line-height: 30px;
	padding-left: 35px;
}


.hvr-outline-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent #010101;
	position: relative;
	-webkit-box-shadow: 0 0 1px transparent #010101;
	background-color: #000000;
	color: #FFFFFF !important;
	text-align: center;
	letter-spacing: 4px;
	padding-left: 14px;
	padding-top: 5px;
	padding-right: 14px;
	padding-bottom: 5px;
	width: auto;
	margin-left: 43%;
	margin-top: 30px;
	margin-bottom: 30px;
}
.homebody p strong {
	text-align: center !important;
	font-weight: normal !important;
}

.col_5 .hvr-outline-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent #010101;
	position: relative;
	-webkit-box-shadow: 0 0 1px transparent #010101;
	background-color: #000000;
	color: #FFFFFF;
	text-align: center;
	letter-spacing: 4px;
	padding-left: 14px;
	padding-top: 5px;
	padding-right: 14px;
	padding-bottom: 5px;
	width: auto;
	margin-left: 40%;
	margin-top: 30px;
	margin-bottom: 30px;
}
.hvr-outline-out:before {
	content: '';
	position: absolute;
	border: 4px solid #000000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: top, right, bottom, left;
	transition-property: top, right, bottom, left;
}
.hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}
.row .col_12 p {
	text-align: center;
	font-size: 16pt;
	line-height: 1.5;
}
.col_12 .homebody p {
	text-align: left;
	margin-left: 30%;
	margin-right: 27%;
}
.row .col_12 .homebody {
	margin-top: 60px;
	margin-bottom: 30px;
}










@media all and (max-width: 768px) {
	
	.navbar #logo {
	margin: 0;
	padding: 0;
	text-align: center;	
	}

	/*Make dropdown links appear inline*/
	.navbar ul {
		position: static;
		display: none;
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	/*Create vertical spacing*/
	.navbar li {
		margin-bottom: 1px;
		width: 100%;
		float: left;
	}
	/*Make all menu links full width*/
	.navbar li a {
		width: 100%;
		margin: 0;
		padding: 18px 0 0 0;
	}
	
	/*Display 'show navbar' link*/
	.show-navbar {
		display:block;
		width: 100%;
	}
.row .col_12 img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	width: 100%;
	height: auto;
}
.col_8 .col_8 p {
	font-size: 11pt;
}
.row .col_8 {
	float: right;
	line-height: 1.5em;
}
.grid .row .col_12 h1 {
	margin-top: 50px;
	font-size: 30pt;
	text-align: center;
}
.row .col_5 p {
	font-size: 18px;
	line-height: 30px;
	padding-left: 0px;
}
.col_12 .homebody p {
	text-align: left;
	margin-left: 0%;
	margin-right: 0%;
}
.hvr-outline-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent #010101;
	position: relative;
	-webkit-box-shadow: 0 0 1px transparent #010101;
	background-color: #000000;
	color: #FFFFFF !important;
	text-align: center;
	letter-spacing: 4px;
	padding-left: 14px;
	padding-top: 5px;
	padding-right: 14px;
	padding-bottom: 5px;
	width: auto;
	margin-left: 30%;
	margin-top: 30px;
	margin-bottom: 30px;
}
h1 {
	letter-spacing: 2px !important;
}







}
.row .col_8 h1 {
	font-size: 50pt;
	margin-top: 50px;

}





/*---------------------------------
	HEADINGS
-----------------------------------*/
h1,h2,h3,h4,h5,h6{
line-height: 150%;
margin:0 0 18px 0;
font-weight: 900;
}


h1{
	font-size: 70px;
	font-weight: 900;
	letter-spacing: 5px;
	text-transform: none;
}

h2{
font-size:42px;
font-style: italic;
}

h3{
font-size:36px;

}

h4{
font-size:30px;

}

h5{
font-size:24px;

}

h6{
font-size:18px;

}

@media all and (min-width: 1024px) and (max-width: 1280px) {
	

	
}


/*---------------------------------
	PARAGRAPHS
-----------------------------------*/
p {
margin:10px 0;
}



/*---------------------------------
	LISTS
-----------------------------------*/
ul, ol{
display:block;
padding:0;
margin:0;
list-style: none;
float: left;
}

li{
padding:5px 0;
margin:0;
}

ul.alt1 li {}
ul.alt2 li {}


/*---------------------------------
	HR
-----------------------------------*/
hr{clear:both;border-bottom:0;border-top:1px dotted #ccc;border-right:0;border-left:0;margin:30px 0;min-height: 0;height:1px;}
hr.alt1{border-style: solid;}
hr.alt2{border-style: dashed;}


/*---------------------------------
	FOOTER
-----------------------------------*/

#footer{
	text-align: center;
	font-size: 0.8em;
}


/*---------------------------------
	GRID 960px

.grid {
max-width:960px;
width: 960px;
margin:0 auto;
padding:0;
}

.col_1  { width: 60px; }
.col_2  { width: 140px; }
.col_3  { width: 220px; }
.col_4  { width: 300px; }
.col_5  { width: 380px; }
.col_6  { width: 460px; }
.col_7  { width: 540px; }
.col_8  { width: 620px; }
.col_9  { width: 700px; }
.col_10 { width: 780px; }
.col_11 { width: 860px; }
.col_12 { width: 940px; }


*[class*="col_"]{
margin-left: 10px;
margin-right: 10px;
float: left;
display: block;
}

The fixed-grid layout is above...
note the difference in values...

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

.grid{
max-width:1280px;
margin:0 auto;
padding:0 2em;
}

.grid.flex {
width:100%;
max-width:100%;
padding:0;
margin: 0;
}

.row{
display:block;
overflow:hidden;
clear:both;
}

*[class*="col_"].alpha{margin-left:0;}
*[class*="col_"].omega{margin-right:0;}
 
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  {
	width: 40%;
}
.col_6  { width: 48.333333333333%; }
.col_7  {
	width: 56.667%;
	float: left;
}
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

*[class*="col_"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
margin-top:0.5em;
margin-bottom:0.5em;
float: left;
display: block;
}


/* ---------------------------------
	
	Responsive Grid Media Queries - 1280, 1024, 768, 480
	1280-1024 	- desktop (default grid)
	1024-768 	- tablet landscape
	768-480 	- tablet 
	480-less 	- phone landscape & smaller
	
----------------------------------- */

@media all and (min-width: 1024px) and (max-width: 1280px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 1024px;}
	
}

@media all and (min-width: 768px) and (max-width: 1024px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 768px;}
.row .col_12 img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	width: 100%;
	height: auto;
}


	
}


@media all and (min-width: 480px) and (max-width: 768px) {

	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 480px;}
	
}

@media all and (max-width: 480px) {
	
	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 100%;/*320*/}
.hvr-outline-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent #010101;
	position: relative;
	-webkit-box-shadow: 0 0 1px transparent #010101;
	background-color: #000000;
	color: #FFFFFF !important;
	text-align: center;
	letter-spacing: 4px;
	padding-left: 14px;
	padding-top: 5px;
	padding-right: 14px;
	padding-bottom: 5px;
	width: auto;
	margin-left: 20%;
	margin-top: 30px;
	margin-bottom: 30px;
}
.col_5 .hvr-outline-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent #010101;
	position: relative;
	-webkit-box-shadow: 0 0 1px transparent #010101;
	background-color: #000000;
	color: #FFFFFF;
	text-align: center;
	letter-spacing: 4px;
	padding-left: 14px;
	padding-top: 5px;
	padding-right: 14px;
	padding-bottom: 5px;
	width: auto;
	margin-left: 30%;
	margin-top: 30px;
	margin-bottom: 30px;
}



	
}

@media all and (max-width: 768px) {
	
	.navbar {
	padding-top: 16px;	
	}


@media all and (max-width: 768px) {
	
	.row .col_8 h1 {
	font-size: 30pt;
		}
	

/*---------------------------------
	ADD-ONS
-----------------------------------*/

::-moz-selection { color:#ffffff; background: black; }
::selection { color:#ffffff; background: black; }


.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix, *:first-child+html .clearfix{zoom:1}