@import url(http://fonts.googleapis.com/css?family=roboto:400,400italic,600,700,800);

@font-face {
    font-family: 'oswaldlight';
    src: url('../fonts/oswald/oswald.light-webfont.eot');
    src: url('../fonts/oswald/oswald.light-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oswald/oswald.light-webfont.woff2') format('woff2'),
         url('../fonts/oswald/oswald.light-webfont.woff') format('woff'),
         url('../fonts/oswald/oswald.light-webfont.ttf') format('truetype'),
         url('../fonts/oswald/oswald.light-webfont.svg#oswaldlight') format('svg');
    font-weight: normal;
    font-style: normal;

}
.navi
{
	margin:0px auto;
	padding:0px auto;
	width:100%;
	text-align:center;
	 position:relative;
  z-index:10;
  margin:0px 0px 0px 0px;
  font-family: 'oswaldlight';
}
.everything
{
	position:relative;
	top:-80px;
}
.logos
{
margin:0px auto;
/* padding:10px 20px 2px 0px;*/
  position:relative;
  z-index:10;
text-align:center;
display: inline-block;
}
.logos img
{
	margin:-5px 0px 0px 0px;
}
.menu 
{
	display: inline-block;
	position:relative;
   z-index:10;top:2px;margin:0 auto;
 }

.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
  padding:0;
  margin:0;
  
}

@-moz-document url-prefix() {
    .menu { display: inline-block;position:relative;
  z-index:10;top:2px;margin:0 auto;}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .logos
{
margin:0px auto;
  /*padding:10px 20px 2px 0px;*/
  position:relative;
  z-index:10;
text-align:center;
display: inline-block;
margin:0px 0px 0px 0px;
    width: 30%;

}
.logos img
{
	margin:0px 0px 0px 65px;
	float: left;

}

}
.menu li:first-child { margin-left: 0; }

.menu li a {
 font-size:14px;
  text-decoration: none;
  padding: 20px 15px 19px 15px;
  display: block;
  transition: all 0.2s ease-in-out 0s;
  color:#fff;
  font-weight:bold;
  
  }



.menu li a:hover,
.menu li:hover>a {
 
  /*background: #04acbb;*/
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  margin:25px 0px;
	padding: 2px 10px 10px 10px;
  position: absolute;
  left: 0px;
  z-index: 99;
  transform: translate(0, 20px);
  transition: all 0.2s ease-out;
  background: #FF0000;
  width: 150px;
}

.menu ul:after {
  bottom: 100%;
  left: 20%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
 
}

.menu ul li {

  float: none;
  background: none;
  width:100%;
  top:15px;

}

.menu ul li a {
  font-size: 16px;
  font-weight: bold;
  margin-top:0px;
  color: #fff; 
 
  /*background: #fff;*/
}

.menu ul li a:hover,
.menu ul li:hover>a {

  color: #FFF;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px, 20px);
  transition: all 0.2s ease-out;
  
}

.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;

}

.menu li>ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.responsive-menu {
  display: none;
  width: 100%;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  text-align:right;
 margin:28px 30px 0px 0px;

 }
 .responsive-menu1 {
  display: none;
  width: 100%;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  text-align:right;
 margin:28px 30px 0px 0px;

 }

.responsive-menu:hover {
 
  color: #000;
  text-decoration: none;
  
}
.responsive-menu1:hover {
 
  color: #000;
  text-decoration: none;
  
}
@media (max-width: 400px){
	.responsive-menu{
		 margin:15px 30px 0px 0px !important;
	}
	
}
@media (max-width: 400px){
	.responsive-menu1{
		 margin:15px 30px 0px 0px !important;
	}
	
}

/*==============================================================
								width=1200px
================================================================*/
@media (min-width: 1200px)
{
	.menu li a {
	
 font-size:17px;
  text-decoration: none;
  padding: 20px 15px 19px 15px;
  display: block;
  transition: all 0.2s ease-in-out 0s;
  color:#fff;
  font-weight:bold;
  }
}
a.homer { background: #04acbb; }


/*=================================================================
								width=1020px
===================================================================*/
 @media all and (max-width: 1020px) 
 {

.mainWrap {
  width: auto;
  padding: 50px 20px;
}

.menu { display: none; }
.menu ul { top: 40px; }
.logos
{
margin:0px auto;
  /*padding:10px 0px 2px 30px;*/
  
  position:relative;
  z-index:10;
text-align:center;
display: inline-block;
left:10%;
}
.responsive-menu  { width:10%;display: inline-block;
	height:20px;
	float:left;
	position:relative;
	z-index:1000;
	}
	
.responsive-menu1  { width:10%;display: inline-block;
	height:20px;
	float:right;
	position:relative;
	z-index:1000;
	}

.everything
{
	position:relative;
	top:0px;
}
.default
{
	z-index: 100000000;
	background:rgba(8, 8, 8, 0.2);
	margin: 0 auto;
	height: 30px;
color:#fff;
padding:20px 0px 0px 0px;
}


nav {
  margin: 0;
  background: none;
}
.menu
{
background:rgba(8, 8, 8, 0.2);
	padding:10px 0px 10px 0px;

}
.menu li {
  display: block;
  margin: 0;
  
}

.menu li a {
 
  color: #fff;
  font-weight:bold;

}

.menu li a:hover,
.menu li:hover>a {
  /*background: #04acbb;*/
  color: #fff;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transform: initial;
  background: #ff0000;
  
}
.menu ul:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
 
}
.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  position: relative;
  transform: initial;
}

.menu ul ul {
  left: 0;
  transform: initial;
}


.menu li>ul ul:hover 
{ transform: initial; }
.logos img {
    margin: 0px 0px 0px -32px;
}

}

/*==========================================================
								width=768px
============================================================*/
 

.mainWrap { width: 768px; }

.menu ul { top: 40px; }

.menu li a { 
	
font-size: 16px; }

a.homer { background: #E95546; }
}
@media (max-width: 767px) {
.menu ul:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}
.logos img
{
	margin:5px 0px 0px 0px;
}
}


/*=================================================================
								end width=1020px
===================================================================*/
/*   media ends*/
@media (max-width: 1020px){
.menu ul { top: 0px; }
}

.menu li a i
{
padding-right:5px;
}


#menu1 {
margin: 0 auto;
	padding: 0;
color:#fff;	
}
.default 
{
margin: 0 auto;
	height: 70px;
color:#fff;
z-index: 100000000;
background:#000;
	}

.fixed 
{
	color:#000;
	position: fixed;
	top: -5px;
	left: 0;
	width: 100%;
	height: 70px;
	z-index: 100000000;
	background:#3a3a3a;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(40%, #000), color-stop(100%, #000));
	background: -moz-linear-gradient(top, #000, #000, #000);
	background-color:#fff;
	font-family:@Adobe Fan Heiti Std B;
	color:#000;*/
}
.cl-effect-5 li a:{ 
	overflow: hidden;
	padding: 0 10px;
	height: 1.3em;
	color: #000;
}


/*** NAVI ***/

.nav-container {
	background:#000;
	padding:5px 20px 0 20px;
	text-align:center;
	
}

.nav-container-share {
	background-color:#000;
	padding:0 0 8px 30px;
	text-align:left;
	min-width:145px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	
}



.nav-container-share p {
	font-family: 'norwester', 'Arial Narrow', Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size: 12px;
	color: #FFF;
	margin:9px 0 5px 0;
}

nav a {
	font-family: 'oswaldlight';
	font-weight:normal;
	letter-spacing:0;
	position: relative;
	display: inline-block;
	margin: 25px 5px;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 14px;
}
nav ul ul li a{
	margin: 15px 5px;
}

nav a:hover,
nav a:focus {
	outline: none;
}

/* Effect 5: same word slide in */
.cl-effect-5 li a {
	overflow: hidden;
	padding: 0 10px;
	height: 1.3em;
	color: #000;
	 font-family: 'oswaldlight';
}

.cl-effect-5 li a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl-effect-5 li a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	color:#ffff;
}

.cl-effect-5 li a:hover span,
.cl-effect-5 li a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}
.cl-effect-5 li ul li a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	color:#000;
}

.cl-effect-5 li a.current {
	color:#00b0ff;
}

/* Effect 5: same word slide in and border bottom */

/*** END NAVI ***/
.scroll-to-top{display:none;}

/* #Font-Face
================================================== */