/*Menu*/

/*All*/
html, body{
    margin:0px;
}

#navbar{
	position: relative;
	font-family: "Teko",Verdana,sans-serif;
	font-weight: 500;
	font-optical-sizing: auto;
	color: #000000;
	text-decoration: none;
	line-height: 1;
	height: fit-content;
	min-height: 60px;
	margin:auto;
	padding-top:25px;
	padding-bottom:25px;
	background-color: #a3e2ba00;
	/*border-bottom: 1px solid #000;*/
}

#screen-size{
	display: none;
	position: absolute;
	height: 40px;
	width: 100px;
	top:0;
	right:0%;
	color: #000;
}

#main-menu{
	position: relative;
	min-height:60px;
	min-width: 556px;
	white-space:nowrap;
	height:84px;
	width: 80%;
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom:0px;
	
}

#main-menu *{
	-webkit-box-sizing: border-box;
	  box-sizing: border-box;
	line-height: 1;
	text-align:center;
	color: #000000;
}

#mobile-menu-icon{
	position: relative;
	background-color:transparent;
	border:none;
	/* float:right; */
	margin-left: 5vw;
	width: 16vw;
	height: 16vw;
}
#mobile-menu-icon:hover{
cursor: pointer;
}

#main-menu a,#main-menu span{
			font-family: "Teko", Verdana;
			text-decoration: none; 
			/*color:#3f425a;*/
			font-weight: 300;
			text-align: center;
		}
		
#main-menu a:hover{
		color:rgba(120,16,34,0.8);
		cursor:pointer;
	}
	
.main-menu-item:hover .dropdown-menu{
    display: block;
}


/* Current page in menu */
#current-page{
	background-color: rgba(120,16,34,0.8);
	color: white;
}

/*menu desktop + hi res tablets*/
@media screen and (min-aspect-ratio: 10/16){
	
	#site-logo{
		position: relative;
		/* background-color: #ff0000;  */ 
		width: 300px;
		min-height: 70px;
		height:fit-content;
		float:left;
		margin-top:10px;
	}
	
	#site-logo img{
		position:relative;
		width:100%;
		height:auto;
		left:0;
	}

    @media screen and (min-width: 1120px){
    	
        #desktop-menu{
            height:30px;
            float:right;
            padding-top:5px;
            /* margin-left: auto; */
			margin-top: 30px;
			/* background: red; */
    	}
        #mobile-menu-icon{
			display:none;
		}
		.main-menu-item{
			position:relative;
			height: 30px;
			float:left;
			font-size:30px;
		}
		.main-menu-item a, .main-menu-item span{
			padding:5px;
		}
    }	
    
    @media only screen and (max-width: 1119px){
        #desktop-menu{
			display: inline;
            position:relative;
            height: 30px;
			width: fit-content;
            float:right;
            padding-top:5px;
			margin-top: 30px;
			/* background: rgba(248, 250, 255, 0.95); */
			z-index:2;
    	}
        #mobile-menu-icon{
			display:none;
		}
		
        .main-menu-item{
			position:relative;
			height: 30px;
			float:left;
			font-optical-sizing: auto;
			font-size:30px;
		}
		.main-menu-item a, .main-menu-item span{
			padding:5px;
		}
    }
	/* @media only screen and (max-width: 980px){
        #mobile-menu-icon{
			display:block;
		}
		
		#desktop-menu{
			position:absolute;
			transform: translate(50%, 20px);
			right: 50%;
			min-height: fit-content;
			width:50vw;
			background: rgba(248, 250, 255, 0.95);
			z-index:2;
			margin: 0%;
			padding: 0%;
		}
		#main-menu{
			margin-left: 20px;
			margin-right: 20px;
			height: fit-content;
		}
		.main-menu-item{
			position:relative;
			height: 10vw;
			font-size: 4vw;
			border-bottom: 2px solid #494949;
			z-index:2;
		}

		.main-menu-item a, .main-menu-item span{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
		}
        
    } */
}	
	

	
/*phones & tablets portrait*/
@media screen and (max-aspect-ratio: 10/16){
	
	#mobile-menu-icon{
		display:block;
	}
	#mobile-menu-icon img{
		width: 100%;
		height: 100%;
	}
	#site-logo{
		position: relative;
		/* background-color: #ff0000;  */ 
		width: 64vw;
		min-height: 70px;
		float:left;
	}
	#site-logo img{
		position:relative;
		width:100%;
		height:auto;
		left:0;
	}
	#desktop-menu{
		/* display: none; */
		position:absolute;
		transform: translate(50%, 20vw);
		right: 50%;
		min-height: fit-content;
		width:50vw;
		background:#dc9577d9;
		z-index:2;
		margin: 0%;
		padding: 0%;
	}
	#main-menu{
		/* min-height:fit-content; */
		margin-left: 20px;
		margin-right: 20px;
		height: fit-content;
	}
	.main-menu-item{
		position:relative;
		height: 10vw;
		font-size: 6vw;
		border-bottom: 2px solid #494949;
		z-index:2;
		/*background:blue;*/
	}

	.main-menu-item a, .main-menu-item span{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}
	@media screen and (max-width: 980px){
		
	}
}