@font-face {
        font-family: Sackers_Gothic_Medium_AT;
        src: url("/font/Sackers Gothic Medium AT.otf");
        }
html, body {
  margin:0;
  padding:0;
  background-color:#FFFFFF;
}


.locked{        /*this locks the div at the top of the screen- I use it for the top menu, and the video player locked to the top menu*/
    position: -webkit-sticky; /* Safari*/ 
    position: sticky;
    top: 0;
    z-index:2000;
}


.header{
  /*position: -webkit-sticky; /* Safari 
  position: sticky;
  top: 0;*/
  display:flex;
  justify-content: space-between;
  align-items: center;
  color: black;
  font-family: Sackers_Gothic_Medium_AT;
  background-color:#FFFFFF;
  width:100%;
}


.header::after {
  content:"";
}
.header::before{
  content:"";
}

.logo {
    display: flex;
    font-size: 2vw;
    position: relative;
    bottom: 0;
    padding-top:1vw;
    line-height:1.3vw;
}

.menu { 
  display: flex;
  width:90%;
  height:2vw;
  justify-content:space-around;
  align-items: flex-end;
  padding: 1vw;
  font-size: 1vw;
}
.line{
    display: flex;
    justify-content:space-around;
    width:100%;
    align-items: flex-end;

}

.headerButton{
    display: flex;
    align-items: flex-end;
    padding:0;
    padding-top:2.5vw;
    margin:0;
    line-height:1vw;
  font-family: Sackers_Gothic_Medium_AT;

  
}
.headerButton:hover{

 
    box-shadow: none; /*removes shadow created by grow element*/
}

#instagramLogo{
    text-align:bottom;
    width:1vw;
    height:1vw;

    padding-bottom:0.3vw; /*to align up with text*/
}

a { /* will remove the auto coloring set by default by links */
  color: inherit; 
  text-decoration: inherit;
  
}


/****************************mobile menu*************************************/



.mobile-topnav {
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari*/ 
    position: sticky;
    top: 0;
    z-index:2000;
}

.mobile-topnav #myLinks {
  display: none;

}
.mobile-topnav #myLinks a{
	color:white;
}

.mobile-topnav a ,.mobile-topnav .active{
  color: black;
  padding: 3vw;
  text-decoration: none;
  display: block;
  height:7vw;
  display:flex;
}
.mobile-topnav a{
    font-size: 4vw;
}

.mobile-topnav a.icon {
  background: black;
  padding:3vw;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  color:white;
  height:7vw;
  width:5vw;
}

.mobile-topnav a:hover {
  background-color: #ddd;
  color: black;
}

.mobile-topnav .active {
  background-color: white;
  color: black;
  height:7vw;
  font-size: 7vw;
}