@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
	{
		/* 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;
	}
	/* This will remove bullets from all list items, including sub lists */
	ul
	{
	    list-style-type: none;
	}
	.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;
		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;
	}
	  .fa-sublist
	  {
		  /* this does not keep space between border and tab */
		  padding: 0px;
	  }
	  .sub-dropdown-content
	  {
		  display: none;
		  position: absolute;
		  background-color: black;
		  margin-top: 15px;
	  }
	  .sub-dropdown-content a
	  {
		  text-decoration: none;
		  color: white;
		  /* this padding is the space between writing and border */
		  padding: 15px;
		  display: block;
		  /* this width keeps sub menu item in one line and not two lines */
		  width: 150%;
		  background-color: black;
	  }
	  .sub-dropdown:hover .sub-dropdown-content
	  {
		  top: 0px;
		  display: block;
		  /* to keep menu item on top of photos */
		  z-index: 9999;
		  /* this keeps the sub sub menu item on the side of the sub menu item */
		  left: 100%;
	  }
	  .sub-dropdown:hover .sub-align-left
	  {
		  display: block;
		  /* This top will keep the sub sub menu item aligned with sub menu item */
		  top: 50px;
		  z-index: 9999;
	  }
	  /* no need to write sub-overlay21 as it is common for all sub overlays */
	  .sub-overlay .closebtn
	  {
		  display: none;
	  }
	.caret
	{
		color: white;
		font-size: 13px;
	}
}

@media screen and (max-width: 767px)
{
	ul
	{
		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;
	}
	/**********************/
	/**********************/
	.sub-overlay31
    {
		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 */
    }
    .sub-overlay-content31
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .sub-overlay31 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .sub-overlay31 a:hover, .sub-overlay31 a:focus
    {
		color: #f1f1f1;
    }
	/* sub overlay is same for all closebtns in sub menus */
	.sub-overlay .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
	/**********************/
	.sub-overlay41
    {
		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 */
    }
    .sub-overlay-content41
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .sub-overlay41 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .sub-overlay41 a:hover, .sub-overlay41 a:focus
    {
		color: #f1f1f1;
    }
	/**********************/
	/**********************/
	.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;
	}
	/**********************/
	/**********************/
	.overlay6
    {
		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-content6
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay6 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay6 a:hover, .overlay6 a:focus
    {
		color: #f1f1f1;
    }
	.overlay6 .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
	/**********************/
	.overlay7
    {
		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-content7
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay7 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay7 a:hover, .overlay7 a:focus
    {
		color: #f1f1f1;
    }
	.overlay7 .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
	/**********************/
	.sub-overlay71
    {
		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 */
    }
    .sub-overlay-content71
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .sub-overlay71 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .sub-overlay71 a:hover, .sub-overlay71 a:focus
    {
		color: #f1f1f1;
    }
	/**********************/
	/**********************/
	.overlay8
    {
		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-content8
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay8 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay8 a:hover, .overlay8 a:focus
    {
		color: #f1f1f1;
    }
	.overlay8 .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
	/**********************/
	.sub-overlay81
    {
		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 */
    }
    .sub-overlay-content81
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .sub-overlay81 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .sub-overlay81 a:hover, .sub-overlay81 a:focus
    {
		color: #f1f1f1;
    }
	/**********************/
	/**********************/
	.overlay9
    {
		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-content9
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay9 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay9 a:hover, .overlay9 a:focus
    {
		color: #f1f1f1;
    }
	.overlay9 .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
	/**********************/
	.overlay10
    {
		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-content10
    {
		position: relative;
	    top: 25%; /* 25% from top */
	    width: 100%;
	    text-align: center;
	    margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
    }
    .overlay10 a
    {
		display: block;  /* display block instead of inline */
	    font-size: 36px;
	    padding: 8px;
	    color: #818181;
	    text-decoration: none;
	    transition: 0.3s;
    }
    .overlay10 a:hover, .overlay10 a:focus
    {
		color: #f1f1f1;
    }
	.overlay10 .closebtn
	{
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
	/**********************/
}