/* some default styles go in textstyles.css so the editor looks more like the page.*/
/* ******************************************************************** */
/* jquery validate 														 */
/* ******************************************************************** */
.error {
	color:red;
}
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }

/* ******************************************************************** */
/* Common elements 														*/
/* ******************************************************************** */
.contentwrap {
	width:95%;
	max-width:1110px;
	margin:0 auto;
	position:relative;
}
.row {
	display:table;
	width:100%;
}
.col {
	display:table-cell;
	vertical-align:top;
}
header.top .logo {
	line-height:76px;
	display:inline-block;
}
header.top .logo img {
	vertical-align:middle;
}
header.top nav {
	float:right;
	font-size:18px;
}
header.top ul {
	list-style:none;
	padding:0;
	margin:0;
}
header.top li > ul {
    position:absolute;
    top:100%;
    left:0;
    white-space: nowrap;
    min-width: 100%;
    display: none;
    z-index: 100;
    background: #f1592a;
    color:#fff;
    font-size: 16px;
}
header.top li:hover > ul {
    display:block;
}
header.top li {
	display:inline-block;
    position: relative;
}
header.top li li {
    display: block;
}
header.top nav a {
	display:block;
	line-height:76px;
	margin:0 15px;
	text-decoration:none;
}
.separator {
	background: #ca3202; /* Old browsers */
	background: -moz-linear-gradient(left,  #ca3202 0%, #d13909 23%, #e85021 72%, #f1592a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ca3202), color-stop(23%,#d13909), color-stop(72%,#e85021), color-stop(100%,#f1592a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #ca3202 0%,#d13909 23%,#e85021 72%,#f1592a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #ca3202 0%,#d13909 23%,#e85021 72%,#f1592a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #ca3202 0%,#d13909 23%,#e85021 72%,#f1592a 100%); /* IE10+ */
	background: linear-gradient(to right,  #ca3202 0%,#d13909 23%,#e85021 72%,#f1592a 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ca3202', endColorstr='#f1592a',GradientType=1 ); /* IE6-9 */
	height:12px;
}
img, iframe {
	max-width:100%;
	height:auto !important;
}
.page-header {
    height:150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
}
@media all and (max-width: 760px) {
	header.top nav ul,header.top li:hover ul {
		display:none;
	}
	
	header.top nav {
		cursor:pointer;
		position:absolute;
		top:0;
		left:0;
		right:0;
		padding:10px;
		text-align:right;
		z-index:0;
	}
	header.top nav.active {
		z-index:200;
	}
	header.top .logo {
		z-index:1;
		position:relative;
	}
	header.top nav:after {
		content:"";
		background: #ca3202 url('/app/images/menu-icon.png') center no-repeat;
		width:24px;
		height:24px;
		display:inline-block;
		border-radius: 5px;
		margin: 3px 10px;
		padding: 8px;
	}
	header.top nav > ul {
		z-index:2000;
		position:absolute;
		top:100%;
		left:0;
		right:0;
		background:#ca3202;
		color:#fff;
		height:auto;
	}
    header.top ul ul {
        background: #333;
        position: static;
    }
	header.top nav.active > ul {
		display:block;
	}
	header.top li.active > ul {
		display:block;
	}
	header.top li:hover > a:before {
		display:none;
	}
	header.top nav li {
		height:auto;
		padding:12px 0;
		vertical-align:middle;
		display:block;
	}
	header.top nav a {
		display:block;
		text-align:center;
		padding:0 20px;
	}
    header.top ul .expand {
		position: absolute;
		top: 0;
		right: 0;
		border-left: 1px solid #030b16;
		height: 88px;
		width: 50px;
		cursor: pointer;
	}
	header.top ul .expand i {
		content:"";
		display: block;
		height: 88px;
		width: 48px;
		background: url('/app/images/menu-drop.png') no-repeat center center;
        transition: transform 0.3s ease;
	}
	.active > .expand i {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
/* ******************************************************************** */
/* banners 														*/
/* ******************************************************************** */
#banners {
	background:url('/app/images/banner-bg.jpg');
	background-size:cover;
	position:relative;
	overflow:hidden;
}
#banners:before {
	content:"";
	display:block;
	padding-top:50.3%;
}
.banner-content {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
#banners h2 {
	position:absolute;
	top:20%;
	left:0;
	right:0;
	text-align:center;
	font-size:52px;
	color:#98000f;
}
#banners a {
	position: absolute;
	top:45%;
	left:50%;
	margin-left:-100px;
	color:#98000f;
	font-size:20px;
	text-decoration:none;
	background:#fff;
	background:rgba(255,255,255,0.4);
	border-radius:50%;
	width:200px;
	height:200px;
	line-height:200px;
	text-align:center;
	display:inline-block;
	transition:all ease-in 1s;
    border:3px solid white;
}
#banners .graphic {
	background:url('/app/images/banner-graphic.png') center no-repeat;
	position:absolute;
	bottom:5%;
	right:65%;
	width:31.8%;
	height:60%;
	background-size:cover;
	transition:all ease-in 0.5s;
}
#banners a:hover {
	background-color:rgba(152,0,15,0.4);
	color:#fff;
}
@media all and (max-width:1100px) {
	#banners h2 {
		top:15%;
		font-size:36px;
	}
}
@media all and (max-width:760px) {
	#banners h2 {
		font-size:24px;
	}
	#banners a {
		top:35%;
	}
}
@media all and (max-width:650px) {
	#banners h2 {
		top:5%;
		font-size:18px;
	}
	#banners a {
		top:35%;
		height:150px;
		line-height:150px;
	}
}
@media all and (max-width:500px) {
	#banners h2 {
		top:1%;
		font-size:16px;
	}
	#banners a {
		top:35%;
		height:100px;
		line-height:100px;
	}
}
@media all and (max-width:350px) {
	#banners h2 {
		margin:0;
	}
}
/* ******************************************************************** */
/* services 														*/
/* ******************************************************************** */
#services {
	padding:2%;
	padding-top:150px;
	padding-bottom:200px;
	text-align:justify;
}
#services:after {
	content:"";
	display:inline-block;
	width:100%;
}
#services .service {
	max-width:230px;
	display:inline-block;
	text-align:center;
	margin:25px 5px;
    padding:5px;
    text-decoration: none;
    vertical-align: top;
}
#services .service:hover {
    background:#e8e8e8;
}
#services .service-header {
    height:138px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
}
@media all and (max-width:1300px) {
	#services {
		max-width:960px;
		margin:0 auto;
	}
}
@media all and (max-width:550px) {
	#services {
		text-align:center;
	}
	#services .service {
		display:block;
		margin:30px auto;
	}
}
/* ******************************************************************** */
/* footer 														*/
/* ******************************************************************** */
footer.bottom {
	color:#581900;
	background:#ef5728 url('/app/images/footer-bg.jpg') center no-repeat;
	background-size:cover;
}
.footer-info {
	padding:60px 0;
	border-bottom:1px solid #581900;
	color:#ffffff;
	text-align:center;
}
.footer-info .col {
	width:50%;
	padding:10px;
}
.footer-info em {
	color:#581900;
}
.footer-info img {
	border:3px solid #ca3202;
}
footer.bottom .contact {
    padding-bottom:50px;
}
.bykeo {
	position:absolute;
	bottom:10px;
	right:0;
}
.bykeo a {
	text-decoration:none;
}
.bykeo img {
	vertical-align:middle;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.bykeo a:hover img {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
@media all and (max-width:760px) {
	.footer-info .col {
		width:auto;
		display:block;
	}
}