/*------TITLE - DESKTOP -----*/
.title{
	width:100%;
	text-align: center;
	text-transform: capitalize;
}.title span{
	line-height: 10.1VW;
	display: inline-block;
	font-family: ClashDisplay;
	font-size:10.1VW;
	letter-spacing: 0.1VW;
	display: inline-block;
	filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.15));
}.title>.first{
	display: inline-block;
	padding-right:3.5VW;
}.title>.last{
	display: inline-block;	
}.title2:hover{
	animation: nudge 0.5s linear infinite alternate;
}
.title-mobile{
	display: none;
}


/*------TITLE - MOBILE -----*/

.title-mobile{
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}.title-mobile img{
	width: 100%;
}

@media only screen and (max-width:800px){
	.title{
		display: inline-block;
		width:100%;
	}.title>.first{
		padding-right:0;
		display: inline-block;
		float: left;
	}.title>.last{
		float: right;
	}
}
/*HIDE INTERACTIVE TITLE FOR SMALL SCREENS!!*/
@media only screen and (max-width:600px){
	.title{
		display: none;
	}.title-mobile{
	    display: block;
    }
}


/*----------------------*/
/*------NAVIGATION------*/
nav a{
	color: rgba(255, 255, 255, 0.75);
}nav a:hover{
	color: white;
	animation: nudge 0.5s linear infinite alternate;
}.active{
	color: white;
}
/*---DESKTOP NAV--*/

#mobile-nav{
	display:none;
}

#desktop-nav{
	display: block;
}#category-nav{
	padding-top:8px;
	width: calc(100% - 135px);
	float: left;
	padding-left: 8px;
	box-sizing: border-box;
}#category-nav a{
	padding-right: 14px;
}

.about-nav{
	float: left;
	width: 135px;
	text-align: right;
}.about-nav img{
	width:26px;
}.about-nav a{
	padding-right: 8px;
}.ig-btn img{
	width:20px;
}

/*------MOBILE NAV------*/

@media only screen and (max-width:850px){
	#desktop-nav{
		display: none;
	}#mobile-nav{
	    display: contents;
    }
}

#mobile-nav>span>img{
	width:17px;
	padding: 6px;
}#mobile-nav>div{
	width:130px;
	float: right;
	text-align: right;
}

/* The Overlay (background) */
.nav-overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: #000041; /* Black fallback color */
  background-color: #000041; /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 15%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.nav-overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #ffffff;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.nav-overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.nav-overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .nav-overlay a {font-size: 20px}
  .nav-overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}