body{-webkit-animation:bugfix infinite 1s;}
@-webkit-keyframes bugfix{from{padding:0;}
to{padding:0;}
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
a:active,
a:hover { outline: 0; }
a{	text-decoration: none; color:inherit;}
a, button, nav li:hover { cursor:pointer; }
ul, nav { list-style:none; list-style-image:none; }

/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */
header { background:rgba(0, 0, 46, 1); position:fixed; z-index:3; width:100%; left:0; top:0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; z-index:1000; padding:0 .5rem;}
.stickyhead { width:100%; z-index:99; position:fixed; top:0; left:0; background:rgba(0, 0, 46, 0); }
.stickyhead1 { width:100%; z-index:99; position:fixed; top:0; left:0; background:rgbargba(0, 0, 46, 1);; box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.19); }

.wrap-logo { width:60%; padding:.1rem 0 .1rem 2rem; }
.wrap-logo img { height:65px; }
.wrap-phone { max-width:40%; }
nav { width:35% z-index:1001; background:#00008B; }
.nav-collapse { width:100%; z-index:1001; }
.nav-collapse ul { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; height:100%; padding:.5rem 0; }
.nav-collapse li { width: 100%; }
.nav-collapse li a { display:block; white-space:nowrap; color:#FFFF9E; transition:0.3s; border-radius:4px; padding:1rem .5rem; border-top:1px solid white; font-size:1.3rem;
                     text-align:center; -webkit-tap-highlight-color: rgba(0,0,0,0);  }
.nav-collapse li a:hover { background:#E4E7EC; color:red;}
.nav-collapse a:active,
.nav-collapse .active a { border-bottom: 1px solid #b73214;}
.nav-collapse.opened { max-height: 9999px; }
.js .nav-collapse { clip:rect(0 0 0 0); max-height:0; position:absolute; overflow:hidden; zoom:1; }
.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; }
.nav-collapse li a.login { color:grey; }
/* 48em is 768px */
@media screen and (min-width: 900px) {
   .wrap-logo { height:70px; width:auto; padding:.1rem 0 0 2rem; }
   nav { background:transparent; }
   .nav-collapse { width:35%;  }
   .nav-collapse ul {width:100%; position:relative; display:flex; flex-direction:row; justify-content:space-between;  }
   .nav-collapse li { width: auto;  }
   .nav-collapse li a { padding:.2em .5em; border:none; margin:0;  }
   .js .nav-collapse { position: relative;  }
   .js .nav-collapse.closed { max-height: none;  }
   .nav-toggle {  display: none;  }
}

/* ------------------------------------------
  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: 40em) {
  .mask { display: none !important; opacity: 0 !important;  }
}

/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------
@font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}
*/
.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; }

.nav-toggle:before {  color: #fff; /* Edit this to change the icon color */
                      font: normal 28px/55px "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: 24px; content: "\78"; /* Close icon */ }
