:root {
	--mainColor1: rgba(0,133,22,1.00);
	--mainColor2: rgba(249,245,161,1.00);
	--mainColor3: rgba(199,167,0,1.00);
	--mainColor4: rgba(241,241,241,1.00);
	--mainColor5: rgba(30,30,30,1.00);
	--mainColor6: rgba(10,170,25,1.00);
	--mainColor7: rgba(59,56,56,1.00);
	--colorSofta: rgba(0,133,22,1.00);
	--colorSuppo: rgba(23,102,186,1.00);
}

* { -webkit-appearance:none; }

body{
    margin: 0;
    background-color: var(--mainColor4);
	font-family: DMSans;
}

@media (max-width: 800px){
	html { font-size:11px; }
}

@media (min-width:801px) and (max-width: 1100px){
	html { font-size:14px; }
}

@media (min-width:1101px) and (max-width: 1300px){
	html { font-size:16px; }
}

@media (min-width: 1301px){
	html { font-size:19px; }
}

html{
	scroll-behavior: smooth !important;
}

a{
	color:inherit;
	text-decoration: none;
}

#menubtn{ display:none; }

#menubtnlab{ 
	position: fixed; 
	width:90px;
	height: 70px;
	left:0px;
	right:0px;
	top:0px;
	margin: auto;
	line-height: 90px;
	font-size:35px;
	text-align: center;
	background-color: rgba(0,0,0,0.4);
	color:white;
	transform: rotate(0deg);
	z-index: 5665;
}

#menubtnlab:before{ 
	position: absolute;
	top:70px;
	right:0px;
	border-left:45px solid transparent;
	border-top:45px solid rgba(0,0,0,0.4);
	border-bottom:45px solid transparent;
	border-right:45px solid transparent;
	content: "";
}

#menuwrap {
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 75px;
    padding: 0px 7%;
    box-sizing: border-box;
    z-index: 5555;
    background-size: cover;
    background-color:rgba(22,22,22,0.0);
}

#menubtnlab #on{ display: none; transform: rotate(90deg) scale(1.3, 1.0); }
#menubtnlab #off{ display: block; transform: rotate(90deg); }

#menubtn:checked ~ #menubtnlab #on { display: block; }
#menubtn:checked ~ #menubtnlab #off { display: none; }

#menuwrap ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width:auto;
    max-width: 98%;
    flex-wrap: wrap;
	height: auto;
    gap:5px min(10px, 4%);
	padding: 20px 2% 0px 2%;
	margin: 0;
	box-sizing: border-box;
	list-style:none;
}

#menuwrap ul li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin:0px;
	font-size:max(14px, min(1.35vw, 18px));
	width:auto;
	height:35px;
	font-weight: 900;
	color: var(--mainColor4);
	background-attachment: fixed;
	background-color:rgba(135,135,135,0.30);
	text-transform: capitalize;
    text-wrap:nowrap;
	border-radius:35px;
	padding:0px 25px;
	box-sizing: border-box;
	opacity: 1.0;
	transition: all 0.5s;
	cursor: pointer;
    box-shadow: inset -2px -2px 4px rgba(200,200,200,0.950), inset 3px 2px 4px rgba(240,240,240,1.00), 0px 2px 2px rgba(22,22,22,0.2);
    text-shadow: 0px 1px 1px rgba(22,22,22,0.2);
	animation-name: blnk;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
} 

@media screen and (max-width:800px){

    #menuwrap {
    padding: 0px 3%;
    }
    
    #menuwrap ul {
    gap: 5px;
    }
    
    #menuwrap ul li {
        padding:0px 16px;
        height:30px;
        line-height: 30px;
    	font-size:max(13px, min(1.35vw, 16px));
    }

    
}
#menuwrap ul li:nth-of-type(1) { animation-duration: 1s; }
#menuwrap ul li:nth-of-type(2) { animation-duration: 2s; }
#menuwrap ul li:nth-of-type(3) { animation-duration: 3.7s; }
#menuwrap ul li:nth-of-type(4) { animation-duration: 5.2s; }

#menuwrap ul li a { 
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width:100%;
	height:100%;
	cursor: pointer;
}


#menuwrap ul li:hover {
	color: var(--mainColor5);
	background-color:rgba(235,235,235,0.95);
    box-shadow: inset -0px -14px 8px rgba(182,182,182,0.95);
}

#wrap {
    display: flex;
    width:100%;
    height: auto;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.btns{
	display: inline-block;
	width:auto;
	height:50px;
	line-height: 50px;
	font-size: 15px;
	font-weight: 800;
	border-radius: 30px;
	padding: 0px 25px;
	box-sizing: border-box;
	margin: 20px 0px;
	text-align: center;
	background-color: #DE157F;
	color:#E2E2E2;
	transition: all 0.3s;
}

.btns:hover{
	transform:scale(1.04);
}