.navmain-zone{
    --navmain-height: 80px;
	--navmain-zindex: 9900;
	--navmain-bgcolor: #333;
	--navmain-txtcolor: #ccc;
	--navmain-bgcolor-hover: #000;
	--navmain-txtcolor-hover: #fff;
    --navmain-link-font-size: 1.25rem;


	margin: 0;
	padding: 0;
	display: block;
	transition: var(--default-transition);
    
    background-color: #fff;
}
.navmain-wrap{	    
	gap: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
   
    height: var(--navmain-height);
}

.navmain-brand{
    font-size: 1.5rem;
    font-weight: 600;
    font-style: italic;
    color: rgba(0,0,0,0, 0.9);
	display: inline-block;


	text-decoration: none;
	color: transparent;
	background-clip: text;
	/* background-image: linear-gradient(to right, #00B9B4, #8DC73F, #FF595D); */
	background-image: linear-gradient(to right, #00B9B4, #8DC73F);
}

.navmain-logo-sm{
	display: inline;
}
.navmain-logo-lg{
	display: none;
}


.navmain-brand-logo{
	display: none;
}


.navmain-toolbar{
	margin: 0;
	padding: 0;
	list-style: none;
	
	width: auto;
	gap: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
    line-height: 1;
    font-style: italic;

    padding: 8px 24px;
    border-radius: 18px;
    background-color: #fafafa;
}
.navmain-btn-locale,
.navmain-toolbar-btn-locale{
	width: auto;
	gap: 1rem;
	display: none;
	align-items: center;
	justify-content: center;
	transition: var(--default-transition);

	font-weight: 400;
    font-style: normal;
    color: crimson;
    cursor: pointer;
}
.navmain-btn-locale.active{
	display: flex;
}
.navmain-btn-locale:hover,
.navmain-toolbar-btn-locale:hover{
	color: red;
}




.navmain-masmenu{
	margin: 0;
	padding: 0;
    padding: 20px 0;
	list-style: none;
	
	top: var(--navmain-height);
    height: 80vh;

	left: 0;
	bottom: 0;
	width: 100%;
	z-index: var(--navmain-zindex); 
    transform: translateX(-100%);
    position: fixed;
	
    gap: 0.25rem;    
	display: block;
    align-items: center;
    justify-content: center;
	
	color: var(--navmain-txtcolor);
	background-color: var(--navmain-bgcolor);
		
	
	transition: var(--default-transition);
}
.navmain-masmenu-item{
	width: 100%;
	gap: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--default-transition);	
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.navmain-masmenu-link{
	margin: 0;
	padding: 8px 16px;
	
	width: 100%;
	gap: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;

    font-style: italic;
    font-size: var(--navmain-link-font-size);
    color: var(--navmain-txtcolor);
    background-color: var(--navmain-bgcolor);

    text-decoration: none;
	transition: var(--default-transition);
}
.navmain-masmenu-item:last-child{
    border: none;
}
.navmain-masmenu-link:hover{
	color: orange;
}


.navmain-switch{
	position: relative;
	
	width: auto;
	gap: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;

    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
}
.navmain-switch::before,
.navmain-switch::after{
	content: '';
}

.navmain-toggle{
	display: none;
}
.navmain-toggle:checked ~ .navmain-switch{
	color: pink;
} 
.navmain-toggle:checked ~ .navmain-masmenu{
    transform: translateX(0);
}



@media screen and (min-width: 769px){
    .navmain-zone{
        --navmain-zindex: 9900;
        --navmain-bgcolor: transparent;
        --navmain-txtcolor: #444;
        --navmain-bgcolor-hover: transparent;
        --navmain-txtcolor-hover: magenta;
        --navmain-link-font-size: 1rem;
    }

	.navmain-logo-sm{
		display: none;
	}
	.navmain-logo-lg{
		display: inline;
	}

    .navmain-switch{
        display: inline-block;
        display: none;
    }
    .navmain-masmenu{
        width: auto;
        height: auto;        
        top: initial;
        left: initial;
        right: initial;
        bottom: initial;
        z-index: initial;
        position: relative;
        display: flex;
        transform: translateX(0);
    }
    .navmain-masmenu-item,
    .navmain-masmenu-link{
        border: none;
    }
}