/* =============================================



 *



 *   FIXED RESPONSIVE NAV



 *



 *   (c) 2014 @adtileHQ



 *   http://www.adtile.me



 *   http://twitter.com/adtilehq



 *



 *   Free to use under the MIT License.



 *



 * ============================================= */







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



  RESPONSIVE NAV STYLES



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











.opstycky1 {



	float: left;



	width: 100%;



  /*background: url(../../img/bg-menu.jpg) repeat center top;*/



	background-color: rgba(17,17,17,0.8);



	position: fixed;



	z-index: 9999;



	top: 0px;



}







.nav-collapse ul {



  margin: 0;



  padding: 0;



  width: 100%;



  display: block;



  list-style: none;



  font: 14px 'Open Sans', sans-serif;



  text-transform: uppercase;



  font-weight: 600;



}







.nav-collapse li {



  width: 100%;



  display: block;



  padding: 10px 0px;



}







.js .nav-collapse {



  clip: rect(0 0 0 0);



  max-height: 0;



  position: absolute;



  display: block;



  overflow: hidden;



  zoom: 1;



}







.nav-collapse.opened {



  max-height: 9999px;



}







.disable-pointer-events {



  pointer-events: none !important;



}







.nav-toggle {



  -webkit-tap-highlight-color: rgba(0,0,0,0);



  -webkit-touch-callout: none;



  -webkit-user-select: none;



  -moz-user-select: none;



  -ms-user-select: none;



  -o-user-select: none;



  user-select: none;



}







@media screen and (min-width: 50em) {



  .js .nav-collapse {



    position: relative;



  }



  .js .nav-collapse.closed {



    max-height: none;



  }



  .nav-toggle {



    display: none;



  }



}











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



  FIXED HEADER



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







/*header {



  background: #eee;



  width: 100%;



  left: 0;



  top: 0;



}







.logo {



  -webkit-tap-highlight-color: rgba(0,0,0,0);



  text-decoration: none;



  font-weight: bold;



  line-height: 55px;



  padding: 0 20px;



  color: #454545;



  float: left;



}



*/







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



  MASK



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







.mask {



  -webkit-transition: opacity 300ms;



  -moz-transition: opacity 300ms;



  transition: opacity 300ms;



  background: rgba(0,0,0, .5);



  visibility: hidden;



  position: fixed;



  opacity: 0;



  z-index: 2;



  bottom: 0;



  right: 0;



  left: 0;



  top: 0;



}







.android .mask {



  -webkit-transition: none;



  transition: none;



}







.js-nav-active .mask {



  visibility: visible;



  opacity: 1;



}







@media screen and (min-width: 50em) {



  .mask {



    display: none !important;



    opacity: 0 !important;



  }



}











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



  NAVIGATION STYLES



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







.fixed {



  position: fixed;



  width: 100%;



  left: 0;



  top: 0;



}







.nav-collapse,



.nav-collapse * {



  -webkit-box-sizing: border-box;



  -moz-box-sizing: border-box;



  box-sizing: border-box;



}







.nav-collapse,



.nav-collapse ul {



  list-style: none;



  width: 100%;



  float: left;



}







@media screen and (min-width: 50em) {



  .nav-collapse {



    float: right;



    width: auto;



  }



}







.nav-collapse li {



  float: left;



  width: 100%;



}







@media screen and (min-width: 50em) {



  .nav-collapse li {



    width: auto;



  }



}







.nav-collapse a {



/*  -webkit-tap-highlight-color: rgba(0,0,0,0);



  border-top: 1px solid white;



  text-decoration: none;



  background: #f4421a;



  padding: 0.7em 1em;*/



  color: #fff;



  width: 100%;



  float: left;



}







.nav-collapse a:active,



.nav-collapse .active a {



/*  background: #b73214;*/



  color: #D2527F;



}







/*.nav-collapse a i {



	font-size: 5px;



	float: left;



	margin-top: 7px;



	margin-right: 5px;



}



*/



@media screen and (min-width: 50em) {



  .nav-collapse a {



    padding: 1.8em 1.4em;



    text-align: center;



    border-top: 0;



    float: left;



    margin: 0;



  }



}







.nav-collapse ul ul a {



  background: #ca3716;



  padding-left: 2em;



}







@media screen and (min-width: 50em) {



  .nav-collapse ul ul a {



    display: none;



  }



}











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



  NAV TOGGLE STYLES



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







.nav-toggle {



  -webkit-font-smoothing: antialiased;



  -moz-osx-font-smoothing: grayscale;



  text-decoration: none;



  text-indent: -300px;



  position: relative;



  overflow: hidden;



  width: 60px;



  height: 55px;



  float: right;



  margin-top: 18px;



}







.nav-toggle:before {



  color: #fff; /* Edit this to change the icon color */



  font: normal 45px "responsivenav"; /* Edit font-size (28px) to change the icon size */



  text-transform: none;



  text-align: center;



  position: absolute;



  content: "\2261"; /* Hamburger icon */



  text-indent: 0;



  speak: none;



  width: 100%;



  left: 0;



  top: 0;



}







.nav-toggle.active:before {



  font-size: 45px;



  content: "\00D7"; /* Close icon */



}











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







.nav-toggle {



  margin-top: 0px;



}







.nav-collapse ul {



  margin: -0px 0 0 0;



}











}