@media screen and (min-width: 768px)
{
	.openbtn, .closebtn
	{
		display: none;
	}
	nav > ul
	{
		background-color: black;
		margin: 0px;
		/* this padding is the space above and below menu items */
		padding: 15px;
		/* this will keep menu items at the center of the menu bar */
		text-align: center;
	}
	nav > ul > li
	{
		list-style-type: none;
		/* display will show menu items in a line */
		display: inline-block;
	}
	nav > ul > li > a
	{
		color: white;
		/* this padding is the space between menu items */
		padding: 15px;
		text-decoration: none;
	}
	.col-lg-4 a:hover
	{
		background-color: red;
	}
	.dropdown-content
	{
		/* sub-menu items will not show initially */
		display: none;
		position: absolute;
		background-color: black;
		/* this margin is the space between menu item and sub-menu item */
		margin-top: 15px;
	}
	.dropdown-content a
	{
		text-decoration: none;
		color: white;
		/* this padding is the space between sub menu items */
		padding: 15px;
		/* this display will keep the sub menu items vertical */
		display: block;
		/* this will keep sub-menu items aligned to the left */
		text-align: left;
	}
	.dropdown-content a:hover
	{
		background-color: black;
	}
	.dropdown:hover .dropdown-content
	{
		/* On hover, sub menu items will show */
		display: block;
		/* z-index is set to a big number to stop drop down list from hiding behind page content */
		z-index: 9999;
	}
	.dropdown-content a:hover
	{
		background-color: red;
	}
	.caret
	{
		color: white;
		font-size: 13px;
	}
}

@media screen and (max-width: 767px)
{
	nav ul li
	{
		list-style-type: none;
	}
	.overlay
    {
		height: 100%;
		width: 0;
		position: fixed; /* stay in place */
		z-index: 1;   /* sit on top */
		top: 0;
	    left: 0;
	    background-color: rgba(0,0,0,1); /* black back ground color with opacity */
	    overflow-x: hidden;  /* disable horizontal scroll */
	    transition: 0.5s; /* 0.5 second sliding effect */
    }
    .overlay-content
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay a:hover, .overlay a:focus
    {
		color: #f1f1f1;
    }
    /* position the close button */
    .overlay .closebtn
    {
		position: absolute;
	    top: 20px;
	    right: 45px;
	    font-size: 60px;
    }
	/* For sub menu */
	/********************/
	.overlay1
    {
		height: 100%;
		width: 0;
		position: fixed; /* stay in place */
		z-index: 1;   /* sit on top */
		top: 0;
	    left: 0;
	    background-color: rgba(0,0,0,1); /* black back ground color with opacity */
	    overflow-x: hidden;  /* disable horizontal scroll */
	    transition: 0.5s; /* 0.5 second sliding effect */
    }
    .overlay-content1
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
	/********************/
    .overlay1 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay1 a:hover, .overlay1 a:focus
    {
		color: #f1f1f1;
    }
    /* position the close button */
    .overlay1 .closebtn
    {
		position: absolute;
	    top: 20px;
	    right: 45px;
	    font-size: 60px;
    }
	/**********************/
	.overlay2
    {
		height: 100%;
		width: 0;
		position: fixed; /* stay in place */
		z-index: 1;   /* sit on top */
		top: 0;
	    left: 0;
	    background-color: rgba(0,0,0,1); /* black back ground color with opacity */
	    overflow-x: hidden;  /* disable horizontal scroll */
	    transition: 0.5s; /* 0.5 second sliding effect */
    }
    .overlay-content2
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay2 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay2 a:hover, .overlay2 a:focus
    {
		color: #f1f1f1;
    }
	.overlay2 .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
	/**********************/
	.overlay3
    {
		height: 100%;
		width: 0;
		position: fixed; /* stay in place */
		z-index: 1;   /* sit on top */
		top: 0;
	    left: 0;
	    background-color: rgba(0,0,0,1); /* black back ground color with opacity */
	    overflow-x: hidden;  /* disable horizontal scroll */
	    transition: 0.5s; /* 0.5 second sliding effect */
    }
    .overlay-content3
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay3 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay3 a:hover, .overlay3 a:focus
    {
		color: #f1f1f1;
    }
	.overlay3 .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
	/**********************/
	.overlay4
    {
		height: 100%;
		width: 0;
		position: fixed; /* stay in place */
		z-index: 1;   /* sit on top */
		top: 0;
	    left: 0;
	    background-color: rgba(0,0,0,1); /* black back ground color with opacity */
	    overflow-x: hidden;  /* disable horizontal scroll */
	    transition: 0.5s; /* 0.5 second sliding effect */
    }
    .overlay-content4
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay4 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay4 a:hover, .overlay4 a:focus
    {
		color: #f1f1f1;
    }
	.overlay4 .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
	/**********************/
	.overlay5
    {
		height: 100%;
		width: 0;
		position: fixed; /* stay in place */
		z-index: 1;   /* sit on top */
		top: 0;
	    left: 0;
	    background-color: rgba(0,0,0,1); /* black back ground color with opacity */
	    overflow-x: hidden;  /* disable horizontal scroll */
	    transition: 0.5s; /* 0.5 second sliding effect */
    }
    .overlay-content5
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay5 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay5 a:hover, .overlay5 a:focus
    {
		color: #f1f1f1;
    }
	.overlay5 .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
}