@charset "utf-8";
/*
 KSODESIGN MULTIPURPOSE XE LAYOUT
 http://ksodesign.com/
 
 Copyright 2010 KSODESIGN	 
 Contributing author : KSJade (contact@ksodesign.com)
----------------------------------------------------------------*/
/*
** Default 
--------------------------------------------------------*/
body {position: relative;background-color:#fff;}
ul {list-style: none;}




/* Primary
--------------------------------------------------------*/
.kso-container .content-wrapper {padding: 80px 5% 3em;}
.kso-container::before {display: none;content: 'mobile';}

/* Header */
.kso-header {
  position: absolute;top: 0;left: 0;      
  width: 100%;height: 60px;
  background: #3e454c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 90;
}
.kso-header::after {clear: both;content: "";display: table;}
.kso-logo {float: left;display: block;}
.kso-logo img {display: block;}

.kso-nav-trigger {
  float: right;display: block;
  position: relative;  margin-right: 5%;
  width: 34px;height: 60px;  
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}
.kso-nav-trigger span, 
.kso-nav-trigger span::before, 
.kso-nav-trigger span::after {
  position: absolute;
  display: inline-block;
  height: 3px;width: 24px;
  background: #ffffff;
}
.kso-nav-trigger span {
  position: absolute;top: 50%;right: 5px;
  margin-top: -2px;
  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.kso-nav-trigger span::before, .kso-nav-trigger span::after {
  content: '';right: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.kso-nav-trigger span::before {top: -6px;}
.kso-nav-trigger span::after {top: 6px;}
.kso-nav-trigger.nav-is-visible span {background: rgba(255, 255, 255, 0);}
.kso-nav-trigger.nav-is-visible span::before, 
.kso-nav-trigger.nav-is-visible span::after {background: white;}
.kso-nav-trigger.nav-is-visible span::before {
  -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -o-transform: translateX(4px) translateY(-3px) rotate(45deg);
  transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.kso-nav-trigger.nav-is-visible span::after {
  -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -o-transform: translateX(4px) translateY(2px) rotate(-45deg);
  transform: translateX(4px) translateY(2px) rotate(-45deg);
}

.kso-search {position: relative;margin: 1.2em 5% 0.6em;}
.kso-search.is-hidden {opacity: 0;}
.kso-search::before {
  content: '';
  position: absolute;left: 8px;top: 50%;bottom: auto;
  height: 16px;width: 16px;
  background: url(../img/kso-search.svg) no-repeat 0 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.kso-search input {
  padding-left: 32px;width: 100%;height: 36px;
  background-color: rgba(179, 179, 179, 0.2);
  border: none;border-radius: .25em;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.kso-search input:focus {outline: none;}

/* Top Navigation */
.kso-nav {display: none;}
.kso-top-nav > li > a::before {display: none;}
.kso-top-nav img {
	position: absolute;left: 1.8em;top: 50%;bottom: auto;
	width: 20px;height: 20px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);    
	border-radius: 50%;
	display: none;
}

/* Sidebar */
.kso-side-nav {
	position: absolute;left: 0;top: 0;   
	padding: 60px 0px 0;width: 100%;max-height: 100vh;
	background-color: #2c3136;  
	opacity: 0; z-index: 89;    
	visibility: hidden;overflow: hidden;
}
.kso-side-nav.nav-is-visible {
  opacity: 1;
  visibility: visible;overflow: visible;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0s;
  transition: opacity 0.2s 0s, visibility 0s 0s;
  max-height: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.kso-side-nav > ul:last-of-type {padding-bottom: 0;}
.kso-side-nav .kso-label, .kso-side-nav a {display: block;padding: 1em 5%;}
.kso-side-nav .kso-label {
  text-transform: uppercase;
  font-weight: bold;
  color: #666;
  font-size: 1rem;
  /* letter-spacing: .1em; */
}
.kso-side-nav a {position: relative;font-size: 1.4rem;font-weight: bold;}
.kso-side-nav ul.kso-top-nav > li:last-of-type > a {border-bottom: none;}
.kso-side-nav > ul > li > a {  
	/* padding-left: calc(5% + 24px); */  
    padding: 1em 42px 1em 42px;
    text-align: left;
	border-bottom: 1px solid #373d44;
}
.kso-side-nav .count {
  position: absolute;top: 50%;bottom: auto;right: calc(5% + 16px + 0.4em);  
  padding: 0.2em 0.4em;
  background-color: #ff7e66;
  border-radius: .25em;
  color: #ffffff;
  font-weight: bold;font-size: 1.2rem;text-align: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.kso-side-nav .action-btn a {
	display: block;margin: 0;padding: 1em 0;
	font-weight: bold;text-align: center;    
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);    
	color: #ffffff;background-color: #1784c7;
	border: none;border-radius: .25em;
}
.kso-side-nav .action-btn a::before {  display: none;}

.has-children ul {position: relative;width: 100%;display: none;background-color: #1c1f22;}
.has-children > a::after {
  position: absolute;right: 8%;top: 50%;bottom: auto;
  content: '';
  height: 16px;  width: 16px;  
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background: url(../img/kso-arrow.svg);
}
.has-children.selected > ul {display: block;padding-left: 2em;}
.has-children.selected > a::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}


/* Section
--------------------------------------------------------*/
.kso-side-nav .social-icon {text-align: center;}
.kso-side-nav .social-icon li {padding: 0 2px;}
.kso-side-nav .social-icon a{
	padding: 5px;width: 30px;height: 30px;
	font-size: 12px;text-align: center;
	color: #999;background-color: rgba(255,255,255,0.1);	
}

/* color
--------------------------------------------------------*/
.kso-side-nav > ul > li:not(.action-btn):hover > a {background-color: rgba(255,255,255,0.1);}
.kso-side-nav a {color: #ffffff;}


.kso-wraper.light .kso-nav-trigger span, 
.kso-wraper.light .kso-nav-trigger span::before, 
.kso-wraper.light .kso-nav-trigger span::after {background-color: #333;}
.kso-wraper.light .kso-side-nav a {color: #333;}
.kso-wraper.light .kso-side-nav > ul > li > a {border-bottom-color: rgba(155,155,155,0.1);}
.kso-wraper.light .kso-side-nav > ul > li > ul > li > a {font-weight: normal;color: #fff;}
.kso-wraper.light .kso-side-nav .social-icon a {background-color: rgba(155,155,155,0.2);}

@media (min-width: 992px) {
	.kso-wraper.light .kso-search input {color: #333;background-color: rgba(179, 179, 179, 0.2);}
	.kso-wraper.light .kso-search::before {background-position: 0 0;}
}

/* mediaQuery
--------------------------------------------------------*/
@media (min-width: 992px) {
	.kso-container .content-wrapper {margin-left: 320px;padding-top: 55px;}
	.kso-container::before {content: 'tablet';}
	.kso-header {position: fixed;height: 55px;}
	.kso-nav {display: block;float: right;height: 100%;}
	.kso-logo {margin: 0  auto 30px;width: 100%;}
    .kso-logo img {display: block;margin: 0  auto;}
	.kso-nav-trigger {display: none;}

	.kso-side-nav > ul > li > a {padding: 1em 40px 1em 40px;text-align: right;border-bottom: none;}
	.kso-side-nav .action-btn a {margin: 1em 10% 0;}
	.kso-side-nav {		
		float: left;position: fixed;top: auto;
		padding-top: 60px;width: 320px;min-height: 100vh;	max-height: none;	
		visibility: visible;overflow: visible;
		opacity: 1;				
	}
	.kso-side-nav.nav-is-visible {box-shadow: none;}
	.kso-side-nav.is-fixed {position: fixed;}
	.kso-side-nav > ul {padding: 0;margin: 0;margin-bottom: 2em;}
	.kso-side-nav > ul > li:not(.action-btn):hover > a.kso-logo {background: none;}
	.kso-side-nav .active > a {box-shadow: inset 3px 0 0 #1784c7;background-color: #33383e;}
	.kso-side-nav .action-btn a {margin: 1em 10% 0;}
	.kso-side-nav .kso-label {display: block;padding: 1em 42px;}
	.kso-side-nav .has-children.selected > a {background-color: #33383e;}
	.kso-side-nav .social-icon {margin-left: 40px;margin-right: 40px;text-align: right;}
	.kso-side-nav > ul.kso-main-nav {margin: 60px 0 80px;}
	.kso-side-nav .company {margin-left: 40px;margin-right: 40px;text-align: right;font-size: 14px;}

	.no-touch .kso-side-nav .has-children:hover > ul, 
	.kso-side-nav .has-children.hover > ul {display: block;opacity: 1;visibility: visible;}
	.has-children {position: relative;}
	.has-children ul {
		position: absolute;top: -10px;left: 100%;   
		padding: 10px 0;width: 200px;
		color: #fff;background-color: #222;
		box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.0);
	}
	.has-children ul a {text-align: left;border: none;padding: 6px 2em;}
	.has-children > a::after {display: none;}
	.has-children.selected > ul {padding-left: 1em;}
	.no-touch .has-children ul a:hover {color: #1784c7;}

	.kso-top-nav {height: 100%;}
	.kso-top-nav > li {display: inline-block;margin-right: 1em;height: 100%;}
	.kso-top-nav > li:last-of-type {margin-right: 0;}
	.kso-top-nav > li a {padding: 1em .6em !important;}
	.kso-top-nav a {display: block;font-size: 1.4rem;color: #ffffff;}
	.kso-top-nav img {display: block;}
	.kso-top-nav .has-children {position: relative;background-color: #2c3136;}
	.kso-top-nav .has-children > a {height: 100%;padding: 0 calc(1.8em + 22px) 0 calc(1.8em + 26px) !important;line-height: 55px;}
	.kso-top-nav .has-children > a::after {display: block;right: 1.8em;}
	.kso-top-nav .has-children ul {	
		top: 100%;right: 0;left: auto;width: 200px;
		background-color: #1c1f22;
		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
	}
	.kso-top-nav .has-children ul a {padding-left: 18px !important;}

	.kso-search {height: 100%;margin-right: 40px !important;margin-left: 40px !important;}
	.kso-search.is-hidden {opacity: 1;}
	.kso-search::before {background-position: 0 -16px;left: 1em;}
	.kso-search form, .kso-search input {height: 100%;width: 100%;}
	.kso-search input {    
		padding-left: 2.8em;height: 32px;  
		color: #ffffff;background-color: rgba(255,255,255,0.1);
		border: none;border-radius: 0;
	}
	.kso-search input::-webkit-input-placeholder {color: #777c81;}
	.kso-search input::-moz-placeholder {color: #777c81;}
	.kso-search input:-moz-placeholder {color: #777c81;}
	.kso-search input:-ms-input-placeholder {color: #777c81;}
}

@media only screen and (min-width: 1170px) {
	.kso-container::before {content: 'desktop';}
	.kso-top-nav li:not(.has-children) a:hover {color: #1784c7;}
	.kso-side-nav .action-btn {text-align: left;}
	.no-touch .kso-side-nav .action-btn a:hover {background-color: #1a93de;}
	.has-children > ul {width: 100%;z-index: 1;}
	.has-children ul a {padding-left: 18px;}
	.has-children.active > ul {position: relative;display: block;left: 0;box-shadow: none;}
}

@media (max-width: 991px) { 
	.kso-side-nav > ul {padding: 0.6em 0;}
	.kso-logo {
		float: left;display: block;position: relative;
		margin-left: 5%;padding: 0;		
		overflow: hidden;
		white-space: nowrap;
		color: transparent;
	}
	.kso-logo img {max-width: 250px;height: 60px;  }
}

@media (max-width: 767px) { 

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

}