*{
	margin: 0%;
	padding: 0%;
	box-sizing: border-box;
  }
  
  body{  
  background-image: url('background-picture.gif');
  background-size: cover;
  /* background-repeat: no-repeat; */
  /* background: fixed !important; */
  }
  
  /* nav */
  
  .hide {
	display: none;
	
  }
  
  .head-nav li:hover {
	background-color: #1a1a1a;
  }
  .head-nav li:hover:before {
	background-color: #1a1a1a;
  }
  .head-nav li:hover svg {
	background: #1a1a1a;
	fill: #c5A34f;
  }
  .head-nav li:hover a {
	color: #c5A34f;
  }
  .head-nav li:before {
	position: absolute;
	left: -0.925rem;
	top: 0;
	width: 0.925rem;
	height: 100%;
	content: "";
	background: #000;
	z-index: 1;
	transition: background 400ms;
  }
  .head-nav ul {
	margin-top: 1.85rem;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	list-style: none;
  }
  .head-nav li {
	position: relative;
	clear: both;
	width: 100%;
	padding: 0;
	transition: background 400ms;
  }
  .head-nav li a {
	display: flex;
	padding-top: 2vh;
	padding-bottom: 2vh;
  }
  .head-nav a {
	align-items: center;
	width: 100%;
	color:#c5A34f ;
	text-decoration: none;
	transition: color 400ms;
  }
  .head-nav a span {
	position: relative;
	display: block;
	z-index: 0;
	font-family: Roboto;
	text-indent: -20em;
	white-space: nowrap;
	transition: text-indent 400ms ease-in-out;
	font-size: 15PX;
  }
  .head-nav svg {
	position: relative;
	max-width: 80px;
	max-height: 30px;
	z-index: 1;
	fill: #fefefe;
	background: #000;
	transition: 400ms;
  }
  @media screen and (max: 768px) {
	.head-nav ul {
	  margin-top: 0.23125rem;
	}
	.head-nav svg {
	  max-width: 20px;
	}
  }
  
  .main-head {
	position: fixed;
	bottom: 0;
	width: 83px;
	height: 100%;
	z-index: 1;
	background: #000;
	transition: width 400ms;
  }
  .main-head:hover {
	width: 230px;
  }
  .main-head:hover + .wrap-all-the-things {
	/* transform: translateX(145px); */
	max-width: 100%;
	opacity: 0.4;
  }
  .main-head:hover .head-nav li:nth-of-type(1) span {
	transition-delay: 100ms;
  }
  .main-head:hover .head-nav li:nth-of-type(2) span {
	transition-delay: 200ms;
  }
  .main-head:hover .head-nav li:nth-of-type(3) span {
	transition-delay: 300ms;
  }
  .main-head:hover .head-nav li:nth-of-type(4) span {
	transition-delay: 400ms;
  }
  .main-head:hover .head-nav span {
	text-indent: 0;
  }
  @media screen and (max: 768px) {
	.main-head {
	  width: 70px;
	  padding: 0 0.925rem;
	}
	.main-head .head-nav {
	  padding-left: 7px;
	}
	.main-head:hover .head-nav span {
	  text-indent: 1em;
	}
  }
  
  .wrap-all-the-things {
	min-height: 100%;
	height: 100%;
	padding-left: 83px;
	margin-top: 0;
	background-image: url('background-picture.gif');
	background-size: cover;
	background-position: center center;
	transition: transform 400ms, opacity 400ms;
	overflow: hidden !important;
	
  }
  @media screen and (max: 480px) {
	.wrap-all-the-things {
	  padding-left: 70px;
	}
  }
  .logo{
	width: 100%;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	justify-items: center !important;
  }
  .logo :hover{
   background-color: #c5A34f !important;
  }
  
  
  /* section */
  .main-head:hover + .wrap-all-the-things {
	/* transform: translateX(145px); */
	max-width: 100%;
	opacity: 0.4;
  }
  
  .wrap-all-the-things {
	min-height: 100%;
	height: 100%;
	padding-left: 83px;
	margin-top: 0;
	background-image: url('background-picture.gif');
	background-size: cover;
	background-position: center center;
	transition: transform 400ms, opacity 400ms;
	
  }
  @media screen and (max: 480px) {
	.wrap-all-the-things {
	  padding-left: 70px;
	}
  }
  
  /* section */
  section.main-section {
	padding: 60px;
	background-image: url(https://img.freepik.com/premium-photo/piece-cheese…ke-with-words-cheesecake-it_111797-1744.jpg?w=900);
	background-size: cover;
	background-repeat: no-repeat;
	height:100%;
  }
  
  .pic{
	height: 600px !important;
  }
  .mn{
	  margin-left: 20px !important; 
	  font-size: 30px !important;
  }
  
  
  






  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

  /* * {
	  box-sizing: border-box;
  } */
  
  /* body {
	  background-image: url(background-picture.gif);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	  font-family: 'Montserrat', sans-serif;
	  height: 100vh;
	  margin: -20px 0 50px;
  } */
  
  h1 {
	  font-weight: bold;
	  margin: 0;
  }
  
  h2 {
	  text-align: center;
  }
  
  p {
	  font-size: 14px;
	  font-weight: 100;
	  line-height: 20px;
	  letter-spacing: 0.5px;
	  margin: 20px 0 30px;
  }
  
  span {
	  font-size: 12px;
  }
  
  a {
	  color: #333;
	  /* font-size: 14px; */
	  text-decoration: none;
	  margin: 15px 0;
  }
  
  button {
	  border-radius: 20px;
	  border: 1px solid black;
	  /* background-color: #FF4B2B; */
	  color: #FFFFFF;
	  font-size: 12px;
	  font-weight: bold;
	  padding: 12px 45px;
	  letter-spacing: 1px;
	  text-transform: uppercase;
	  transition: transform 80ms ease-in;
	  background-color: black;
  }
  .button :hover{
	  background-color: #D9B457;
	  
  }
  
  button:active {
	  transform: scale(0.95);
  }
  
  button:focus {
	  outline: none;
  }
  
  button.ghost {
	  background-color: transparent;
	  border-color: #FFFFFF;
  }
  
  form {
	  background-color:#D9B457;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	  padding: 0 50px;
	  height: 100%;
	  text-align: center;
  }
  
  input {
	  background-color: #473939;
	  border: none;
	  padding: 12px 15px;
	  margin: 8px 0;
	  width: 100%;
	  border-radius: 20px;
  }
  
  .container {
	  background-color:black;
	  border-radius: 10px;
		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			  0 10px 10px rgba(0,0,0,0.22);
	  position: relative;
	  overflow: hidden;
	  width: 768px;
	  max-width: 100%;
	  min-height: 480px;
	  margin-left: 10%;
	  align-items: center;
	  /* justify-content: center;
	  justify-items: center; */
	  display: grid;
	  justify-content: center;
	  align-items: center;
	  margin-top: 100px;
  }
  
  .form-container {
	  position: absolute;
	  top: 0;
	  height: 100%;
	  transition: all 0.6s ease-in-out;
  }
  
  .sign-in-container {
	  left: 0;
	  width: 50%;
	  z-index: 2;
  }
  
  .container.right-panel-active .sign-in-container {
	  transform: translateX(100%);
  }
  
  .sign-up-container {
	  left: 0;
	  width: 50%;
	  opacity: 0;
	  z-index: 1;
  }
  
  .container.right-panel-active .sign-up-container {
	  transform: translateX(100%);
	  opacity: 1;
	  z-index: 5;
	  animation: show 0.6s;
  }
  
  @keyframes show {
	  0%, 49.99% {
		  opacity: 0;
		  z-index: 1;
	  }
	  
	  50%, 100% {
		  opacity: 1;
		  z-index: 5;
	  }
  }
  
  .overlay-container {
	  position: absolute;
	  top: 0;
	  left: 50%;
	  width: 50%;
	  height: 100%;
	  overflow: hidden;
	  transition: transform 0.6s ease-in-out;
	  z-index: 100;
  }
  
  .container.right-panel-active .overlay-container{
	  transform: translateX(-100%);
  }
  
  .overlay {
	  background-image:url(https://img.freepik.com/free-photo/world-ball-chocolate-day-celebration_23-2151468367.jpg?t=st=1719002892~exp=1719006492~hmac=4a335d7e73f4434e522714f81d0469598ebfe0b885918dbe9838153f6e6537fa&w=826);
	  /* background: #FF416C;
	  background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
	  background: linear-gradient(to right, #FF4B2B, #FF416C); */
	  
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-position: 0 0;
	  color: #FFFFFF;
	  position: relative;
	  left: -100%;
	  height: 100%;
	  width: 200%;
		transform: translateX(0);
	  transition: transform 0.6s ease-in-out;
  }
  
  .container.right-panel-active .overlay {
		transform: translateX(50%);
  }
  
  .overlay-panel {
	  position: absolute;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	  padding: 0 40px;
	  text-align: center;
	  top: 0;
	  height: 100%;
	  width: 50%;
	  transform: translateX(0);
	  transition: transform 0.6s ease-in-out;
  }
  
  .overlay-left {
	  transform: translateX(-20%);
  }
  
  .container.right-panel-active .overlay-left {
	  transform: translateX(0);
  }
  
  .overlay-right {
	  right: 0;
	  transform: translateX(0);
  }
  
  .container.right-panel-active .overlay-right {
	  transform: translateX(20%);
  }
  
  .social-container {
	  margin: 20px 0;
  }
  
  .social-container a {
	  border: 1px solid #DDDDDD;
	  border-radius: 50%;
	  display: inline-flex;
	  justify-content: center;
	  align-items: center;
	  margin: 0 5px;
	  height: 40px;
	  width: 40px;
  }
  
  
  .ghost{
	  background-color: #D9B457 !important;
	  border: 1px solid black !important;
  color: black;
  }
  /* .typ{
	  font-size: 2.5rem !;
  } */
  .ghost:hover{
	  background-color: black !important;
	  color: white !important;
  }


  
/* WebKit (Chrome, Safari, etc.) */
::-webkit-scrollbar {
	width: 12px;
	background-color: gray; /* width of the entire scrollbar */
  }
  
  ::-webkit-scrollbar-thumb {
	background-color: red;
	border-radius: 20px; /* color of the thumb */
  }