@font-face {
  font-family: "BrownStd-Regular";
  src: url("fonts/@font-face/f97225822a70757425b37ccb7fb0ca5c.eot");
  /* IE9*/
  src: url("fonts/@font-face/f97225822a70757425b37ccb7fb0ca5c.eot?#iefix") format("embedded-opentype"),
      /* IE6-IE8 */
      url("fonts/@font-face/f97225822a70757425b37ccb7fb0ca5c.woff2") format("woff2"),
      /* chrome、firefox */
      url("fonts/@font-face/f97225822a70757425b37ccb7fb0ca5c.woff") format("woff"),
      /* chrome、firefox */
      url("fonts/@font-face/f97225822a70757425b37ccb7fb0ca5c.ttf") format("truetype"),
      /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("fonts/@font-face/f97225822a70757425b37ccb7fb0ca5c.svg#BrownStd-Regular") format("svg");
  /* iOS 4.1- */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#logo a {
text-decoration: none;
font-family: "Cookie";
font-size: 38px;
font-weight: 300;
z-index: 11;
color: black;
}

#logo a span {
color: #ff5e5e;
font-family: "Cookie";
}

#logo {
padding: 0 0 0 20px;
float: left;
}

.nav #logo p {
text-decoration: none;
font-family: "Source Sans Pro", sans-serif;
font-weight: 600;
letter-spacing: 5px;
font-size: 10px;
color: black;
text-transform: uppercase;
margin: 2px 0;
}

.non-white #logo a {
color: #000;
}

nav {
top: 0;
left: 0;
width: 100%;
cursor: pointer;
}

nav ul {
vertical-align: top;
display: inline-block;
list-style-type: none;
justify-content: space-around;
margin-right: -4px; 
padding: 10px;
}

nav ul li {
display: flex;
font-family: "laca", sans-serif;
margin: auto;
}

.nav {
cursor: pointer;
position: sticky;
}

.hamburger {
font-family: "Cookie" !important;
font-weight: 200;
font-size: 40px;
cursor: pointer;
position: absolute;
top: 10px;
right: 30px;
z-index: 10;
visibility: hidden;
}

.nav-links a {
text-decoration:  none;
font-size: x-large;
padding-left: 5vw;
color: #000;
}
.menu {
display: flex;
font-size: 18px;
justify-content: space-between;
margin-left:auto;
padding-top: 1vh;
padding-right: 10px;

}
.nav-links a:hover::after{
transform: scaleX(1);
}
.nav-links a::after{
content: "";
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
transform: scaleX(0);
transition: transform 0.3s ease;
}
::-webkit-scrollbar-thumb {
background: black; 
}
#change{
overflow: hidden;
width: 100%;
z-index: 99;
padding: 0px 16px; 

}
.sticky {
position: fixed;
top: 0;
width: 100%;
}

@media screen and (max-width: 600px) {
#change{
  background-color: none;
}
.hamburger {
  visibility: visible;
}

.nav #logo {
  float: none;
  visibility: visible;
}

.nav-links a{
  display: none;
}

.nav-links .responsive {
  position: relative;
}
.nav-links .responsive a{
  float: none;
  display: block;
  text-align: left;
}

}