/* Please ❤ this if you like it! */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

@media screen and (max-width: 768px) {
	/* body{
	  font-family: 'Montserrat', sans-serif;
	  font-weight: 300;
	  font-size: 15px;
	  line-height: 1.7;
	  color: #830707;
	  background-color: #1f2029;
	  overflow: hidden;
	  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
	  background-position: center;
	  background-repeat: repeat;
	  background-size: 4%;
	  height: 100vh;
	  width: 100%;
	} */
	.section-center{
	  position: absolute;
	  top: 50%;
	  left: 0;
	  display: block;
	  width: 100%;
	  padding: 0;
	  margin: 0;
	  z-index: 6;
	  text-align: center;
	  transform: translateY(-50%);
	}
	/* h1{
	  font-family: 'Montserrat', sans-serif;
	  font-weight: 800;
	  font-size: 7vw;
	  line-height: 1;
	  color: #ffeba7;
	  text-align: center;
	  -webkit-text-stroke: 2px #ffeba7;
	  text-stroke: 2px #ffeba7;
	  -webkit-text-fill-color: transparent;
	  text-fill-color: transparent;
	  color: transparent;
	} */
	
	[type="checkbox"]:checked,
	[type="checkbox"]:not(:checked){
	  position: absolute;
	  left: -9999px;
	}
	.menu-icon:checked + label,
	.menu-icon:not(:checked) + label{
	  position: fixed;
	  top: 63px;
	  right: 75px;
	  display: block;
	  width: 34px;
	  height: 30px;
	  padding: 0;
	  margin: 0;
	  cursor: pointer;
	  z-index: 10;
	}
	.menu-icon:checked + label:before,
	.menu-icon:not(:checked) + label:before{
	  position: absolute;
	  content: '';
	  display: block;
	  width: 30px;
	  height: 17px;
	  z-index: 20;
	  top: 0;
	  left: 4px;
	  border-top: 2px solid #830707;
	  border-bottom: 2px solid #830707;
	  transition: border-width 100ms 200ms ease,top 100ms 150ms cubic-bezier(0.23, 1, 0.32, 1),height 100ms 200ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease,transform 20ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.menu-icon:checked + label:after,
	.menu-icon:not(:checked) + label:after{
	  position: absolute;
	  content: '';
	  display: block;
	  width: 30px;
	  height: 2px;
	  z-index: 20;
	  top: 10px;
	  right: 0;
	  background-color: #830707;
	  margin-top: -1px;
	  transition: width 100ms 1750ms ease, right 100ms 1750ms ease,margin-top 100ms ease, transform 20ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.menu-icon:checked + label:before{
	  top: 10px;
	  transform: rotate(45deg);
	  height: 2px;
	  background-color: #830707;
	  border-width: 0;
	  transition: border-width 100ms 40ms ease, top 100ms 30ms cubic-bezier(0.23, 1, 0.32, 1),height 100ms 30ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms 50ms ease,transform 20ms 70ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.menu-icon:checked + label:after{
	  width: 30px;
	  margin-top: 0;
	  right: 0;
	  transform: rotate(-45deg);
	  transition: width 100ms ease,right 100ms ease,  margin-top 100ms 200ms ease, transform 20ms 170ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	
	.nav{
	  position: fixed;
	  top: 33px;
	  right: 0;
	  display: block;
	  width: 80px;
	  padding: 0;
	  margin: 0;
	  z-index: 9;
	  background-color: #f4efe1;
	}
	footer .nav {
		position: relative;
		border-radius: 0%;
	}
	@keyframes border-transform{
		0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
		14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
		28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
		42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
		56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
		70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
		84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
	}
	
	.menu-icon:checked ~ .nav {
	  animation-play-state: paused;
	  top: 50%;
	  right: 50%;
	  transform: translate(50%, -50%);
	  width: 200%;
	  height: 200%;
	  
	}
	
	.nav ul{
	  	position: absolute;
	  	top: 40%;
	  	left: 0;
	  	display: block;
	  	width: 100%;
		height: 100px;
	  	padding: 0;
	  	margin: 0;
	  	z-index: 6;
	  	text-align: center;
	  	transform: translateY(-50%);
	  	list-style: none;
	}
	.nav ul li{
	  	position: relative;
	  	display: block;
	  	width: 100%;
		max-width: 420px;
	  	padding: 0;
	  	margin: 0 auto;
	  	list-style: none;
	  	pointer-events: none;
	  	opacity: 0;
	  	visibility: hidden;
	}
	/* .nav ul li:nth-child(1){
	  transition-delay: 200ms;
	}
	.nav ul li:nth-child(2){
	  transition-delay: 150ms;
	}
	.nav ul li:nth-child(3){
	  transition-delay: 100ms;
	}
	.nav ul li:nth-child(4){
	  transition-delay: 50ms;
	} */
	.nav ul li a{
	  text-transform: uppercase;
	  line-height: 1.2;
	  font-weight: 800;
	  display: inline-block;
	  position: relative;
	  color: #000;
	  transition: all 250ms linear;
	}
	.nav ul li a:hover{
	  text-decoration: none;
	  color: #ffeba7;
	}
	.nav ul li a:after{
	  display: block;
	  position: absolute;
	  top: 50%;
	  content: '';
	  height: 2vh;
	  margin-top: -1vh;
	  width: 0;
	  left: 0;
	  background-color: #353746;
	  opacity: 0.8;
	  transition: width 250ms linear;
	}
	.nav ul li a:hover:after{
	  width: 100%;
	}
	
	
	.menu-icon:checked ~ .nav  ul li {
	  pointer-events: auto;
	  visibility: visible;
	  opacity: 1;
	  transform: translateY(0);
	  padding: 0 0 0 50px;
	}
	/* .menu-icon:checked ~ .nav ul li:nth-child(1){
	  transition-delay: 1400ms;
	}
	.menu-icon:checked ~ .nav ul li:nth-child(2){
	  transition-delay: 1480ms;
	}
	.menu-icon:checked ~ .nav ul li:nth-child(3){
	  transition-delay: 1560ms;
	}
	.menu-icon:checked ~ .nav ul li:nth-child(4){
	  transition-delay: 1640ms;
	} */
	
	.fixed-anchor img {
		width: 50%;
	}
	.fixed-anchor-logo {
		width: 0%;
	}
	.fixed-anchor-local a {
		font-size: 14px;
		line-height: 47px;
	}
	.fixed-anchor-local li {
		border-top: 1px solid #480303;
    	padding-left: 50px;
    	text-align: left;
	}
	
	
	/* .logo {
	  position: absolute;
	  top: 60px;
	  left: 50px;
	  display: block;
	  z-index: 11;
	  transition: all 250ms linear;
	}
	.logo img {
	  height: 26px;
	  width: auto;
	  display: block;
	} */
}
@media screen and (max-width: 991px) {
	.menu-icon:checked + label,
	.menu-icon:not(:checked) + label{
	  right: 26px;
	}
	.logo {
	  left: 12px;
	}
	.header .logo {
		z-index: 10;
	}
	/* .nav{
	  right: 30px;
	} */
	h1{
	  font-size: 9vw;
	  -webkit-text-stroke: 2px transparent;
	  text-stroke: 2px transparent;
	  -webkit-text-fill-color: #ffeba7;
	  text-fill-color: #ffeba7;
	  color: #ffeba7;
	}
	.nav ul li a{
	  font-size: 14px;
	  line-height: 47px;
	}
  }