* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
html {
	/*background-color: #2E477A;*/
	background: linear-gradient(rgba(0, 0, 0, 0.8), #2E477A 33%);
	background-size: cover;
}
a {
	text-decoration: none;
}
a:link, a:visited {
	color: #000080;
}
a, a:visited, a:focus, a:active, a:hover{
	outline:0 none !important;
}

/*vertical navigation menu container*/
.vnavcontainer {
	position: absolute;
	top: 0em;
	left: 0em;
	z-index: 2;
}

/*Nav Element*/
.vnavmenu {
	background: rgba(0,100,200,0.2);
	width: 11.25em;
	padding: 0.625em;
	transform: translate3d(-12.5em,0em,0em);
	transition: all 0.3s ease;
	height: 0px;
}
.vnavmenu.menuopen {
	transform: translate3d(0em,0em,0em);
	transition: all 0.3s ease;
	height: 100%;
	overflow: scroll;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
}
.vnavmenu.menuopen::-webkit-scrollbar {
	display: none;
}
.vnavmenu.menuopen {
	scrollbar-width: none;
}
/*Open and Close button*/
.toggle {
	display: block;
	width: 11.25em;
	padding: 0em 0em 0.625em 1.2em;
}
.toggle::before {
	content: "Menu";
	color: #ffffff;
}
.toggle.menuopen {
	background: rgba(0,100,200,0.2);
	padding: 0.625em 0em 0.625em 0.625em;
}
.toggle.menuopen::before {
	content: "Close";
}

/*all li*/
.vnavmenu ul li {
	text-align: center;
	list-style: none;
}

/*only liheaders = michael and thatscoolcol*/
.liheaders {
	background: #666;
	background: linear-gradient(#a6a6a6, #9a9a9a, #8d8d8d, #808080, #737373, #676767);
	border-radius: 0.1875em;
	box-shadow: inset 0em 0em 0em 0.0625em #a7a7a7;
	margin-bottom: 0.0625em;
}
.liheaders:active {
	background: #737373;
}
/*liheaders not the menu and close*/
.vnavmenu ul:not(:first-child) {
	background: darkgrey;
	display: none;
	border-bottom: #000080 solid 0.0625em;
}
/*michael and thatscoolcool with added js class*/
.liheaders.submenuopen .vnavtccsubmenu, .liheaders.submenuopen .vnavmichaelsubmenu {
	display: block;
}
/*michael and thatscoolcool names*/
.liheaders > a {
	text-shadow: 0em 0.125em 0em rgba(0,0,0,0.4);
	font: 1.2rem Arial, sans-serif;
}

/*li for submenu*/
.vnavmenu ul li ul li {
	border-bottom: #000080 solid 0.0625em;
}
/*all li last childs*/
.vnavmenu ul li :last-child {
	border-bottom: none;
}

/*all links*/
.vnavmenu ul li a {
	display: block;
	padding: 1.2em 0.625em;
}

.vnavmichaelsubmenu a.active {
	background: #666666;
	background: linear-gradient(#666666, #555555);
	border: solid 0.0625em #777777;
}

/*Added*/
#mask {
	position: fixed; /* important */
	top: 0px; /* start from top */
	left: 0px; /* start from left */
	height: 100vh; /* cover the whole page */
	width: 100%;  /* cover the whole page */
	display: none; /* don't show it '*/
	/* styling bellow */
	background: rgba(0,0,0,0.9);
	z-index: 999;
}

.modalwindow {
	position: absolute; /* important so we can position it on center later */
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	display: none; /* don't show it */
	/* styling bellow */
	width: 98%;
	z-index: 1000;
	border: rgba(255,255,255,0.6) solid;
}

/* style a specific modal window
#family{
	padding: 50px;
	border: 1px solid gray;
	background: #246493;
	color: black;
}
#friends{
	padding: 50px;
	border: 1px solid gray;
	background: #246493;
	color: black;
}*/

/*.overlay {
	background: rgba(0,0,0,0.75);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	z-index: 1000;
	width: 98%;
	display: none;
}*/

.modalwindow h2 {
	text-align: center;
	color: rgb(125, 125, 125);
	text-decoration: none;
	padding: 10px 10px 0px 10px;
}
.modalwindow ul {
	display: flex;
	flex-flow: row wrap;
	align-items: space-around;
	justify-content: space-around;
	margin: 10px;
}
.modalwindow li {
	flex: 1 45%;
	margin: 10px;
	list-style: none;
	border: #FFFFFF solid 1px;
}
.modalwindow li:active {
	opacity: 0.4;
}
.modalwindow li:hover img {
	transform: scale(1.1,1.1);
}
.modalwindow li:hover a {
	color: #F5F5EC;
}
.modalwindow li a {
	display: inline-flex;
	align-items: center;
	padding: 10px;
	color: #FFFFFF;
}
.modalwindow img {
	max-width: 100px;
	max-height: 100px;
	margin-right: 10px;
}

.menudescription {
	border: rgb(100, 100, 100) solid 1px;
	padding: 10px;
}
.menudescription h3 {
	color: rgb(52, 122, 222);
	font-weight: bold;
	font-style: italic;
}

.close {
	position: absolute;
	top: 0.3125em;
	right: 0.3125em;
	padding: 0.3125em 0.625em;
	font-weight: bold;
	font-size: 16px;
	border: 1px solid black;
	background: #C3C3C3;
	cursor: pointer;
	opacity: 0.4;
}
.close:hover {
	opacity: 0.9;
}
.close:active {
	color: #F5F5F5;
	opacity: 0.75;
}
/*Until Here*/

/* ============================== This is for Overall Styling of the Content Gallery*/
.gallerycontainer {
    /*border:2px solid rgb(6, 61, 92);*/
    /*border-radius:5px 5px 10px 10px;*/
    /*margin:10px auto;*/
    /*padding: 0px;*/
	/*display: table;*/
    display: flex;
	flex-flow: column wrap;
	justify-content: center;
	position: relative;
}

/*Photo Gallery Title*/
.photogallerytitle {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	color: #C0C0C0;
	text-align: center;
	background: rgba(0,0,0,0.4);
}

/*Show Arrows When Clicked*/
input[type = checkbox] {
    display: none;
}

.gallery {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
    /*width:640px;*/
	width: 750px;
    /*height:370px;*/
	max-height: 100%;
    /*background:#999;*/
    /*border:2px solid green;*/
	margin: auto;
}

.outerborderframe {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	border: #000000 solid 0.3125em;
	box-shadow: inset 0em 0em 0.0625em 0.0625em #808080, inset 0em 0em 0.3125em 0.625em rgba(0,0,0,0.8);
	padding: 0.625em 0.625em 0.375em 0.625em;
	background: #FFFFFF;
	width: 100%;
	margin-top: 2px;
}

.slider {
	background: #000000;
  overflow-x: scroll;
	border: #000000 solid 0.15625em;
	border-radius: 5px;
	margin-bottom: 5px;
}
.slider ul {
	display: flex;
	align-items: center;
    width: 999999px;
    list-style: none;
    margin-left: 0px;
}
/*.slider li {
    float: left;
}*/

.imagetitle {
	opacity: 0.6;
	flex: 1 100%;
	/*background: #C5BBBB;*/
	background: rgba(0,0,0,0.2);
	color: #FFFFFF;
	font-weight: bold;
	margin-top: -30px;
}

/* ============================== This is for Styling Each of the Content Slides */
.slides {
	display: flex;
	/*width:640px; This width is reduced to compensate the padding on left and right */
	width: 720px;
	/*height:345px; /* This height is reduced to compensate the padding on top and bottom */
	max-height: 405px;
	/*background-color:rgb(198,185,221);*/
}

/* ============================== This is for Navigation Buttons Styling. */
.slidercontrols {
    display:none; /* This is important to hide the buttons if jQuery is Not supported. */
    /*margin-top: -10em;*/
    /*cursor: pointer;*/
}
.slidercontrols a {
    /*opacity:0.5;*/
	font-size: 2rem;
	padding: 2.5px 10px;
	background: rgba(0,0,0,0.4);
	color: rgba(255,255,255,0.2);
}
.backarrow {
    /*opacity:0.5;*/
	margin-right: 5px;
}
.slidercontrols a:hover {
	background: rgba(0,0,0,0.2);
	color: grey;
}
.slidercontrols a:active {
	background: rgba(0,0,0,0.1);
	color: darkgrey;
	border: #000000 solid 1px;
}

/* ============================== This is for Pagination Styling. */
.paginationslider {
    /*border:2px solid red;*/
    /*text-align:center; Important : Keeps the Pagination in the center. */
    /*width:640px;*/
	display: inline-flex;
	width: 100%;
	height: 100px;
	margin-top: 10px;
	overflow-y: hidden;
	overflow-x: scroll;
	position: relative;
}

.paginationcontainer {
    /*border: 2px solid cyan;*/
    padding: 5px;
    /*display: inline-block; This is a good alternative for inline-flex and supports most of the browsers. */
    /* display: inline-flex; */ /* This is important to remove the extra vertical spaces  between 'UL' and 'pagi-container' */
	display: inline-flex;
	align-items: center;
	width: 100000px;
	height: 100%;
	background: rgba(0,0,0,0.4);
	overflow: scroll;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
	position: absolute;
}
.paginationcontainer::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	background: transparent;
}

.paginationcontainer > ul {
    padding: 2px;
    /*border:1px solid black;*/
    display: inline-flex;
	align-items: center;
	height: 100%
}

.paginationcontainer > ul li {
    /* float:left; */ /* Instead write "display:inline-block" Property to set the pagi-elements in center. */
    list-style: none;
    padding: 0px; /* Setting padding as zero will increase clickable region of child('a' Anchor Element) of LI element */
    border: 1px solid #aaa;
    margin: 0px auto;
    /*margin-bottom: 5px;*/
    display: inline-block;
    background: radial-gradient(rgba(255, 255, 255, 0.8) 50%, rgba(180,180,180,0.8));
	margin-left: 10px;
}

.paginationcontainer > ul li:hover {
    background: radial-gradient(rgba(220, 220, 220, 0.3), rgba(180,180,180,0.8) 95%);
}

.paginationcontainer > ul li:active {
   	opacity: 0.5;
	border: #000000 solid 1px;
}

.paginationcontainer > ul li a {
    display: inline-block;
    padding: 5px; /* This is important to Increase the Clickable Region of the anchor Elements */
    /*text-decoration:none;*/
    /*color: rgb(100,100,100);*/
    /* display:inline-flex; */
}

.paginationcontainer > ul li a img:hover {
    opacity: 0.8;
}

.imagenormal {
    /*opacity:0.5;
    vertical-align:bottom;  Very Important to Vertically Centre the Thumbnail and removing the bottom space between and Image and the container Anchor Tag. */
	vertical-align: middle;
	max-width: 100px;
	max-height: 100px;
	opacity: 0.75;
	border: solid #808080 1px;
}

.imageselected {
    opacity: 1.0;
	border: #000000 solid 2px;
	border-radius: 5px;
}

.paginationselected {
    /*box-shadow
    -webkit-box-shadow:0 0 15px #000;
    -moz-box-shadow:0 0 15px #000;*/
    box-shadow: 0 0 15px rgba(255,255,255,0.4);
    opacity: 1.0;

}

.mainfooter {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	background-color: grey;
	border: 0.0625em solid #000000;
	border-radius: 0.3125em 0.3125em 0em 0em;
	width: 100%;
	padding: 0.625em 0em;
	margin: 0% auto 0% auto;
	position: relative;
}

.linkedin {
	margin: 0.5625em 0em;
}

.share-buttons {
	display: inline-flex;
	flex: column nowrap;
	list-style: none;
	margin: 0em 0.9375em;
}
.share-buttons img {
	margin: 0.625em 1em;
	width: 2em;
	height: 2em;
}

.copyright {
	position: absolute;
	bottom: 1%;
	left: 1%;
	font-size: 0.625rem;
}
.copyright a:hover, .copyright a:active {
	background-color: lightgrey;
}

.credits {
	position: absolute;
	bottom: 1%;
	right: 1%;
	font-size: 0.625rem;
}
.credits a:hover, .credits a:active {
	background-color: lightgrey;
}

@media only screen and (min-width : 1024px)
{
	.vnavmenu ul li:hover:not(.liheaders) {
		background: lightgrey;
	}

	.liheaders {
		margin-bottom: 0px;
	}
	.liheaders:hover {
		background: #808080;
	}

	.liheaders:hover .vnavmichaelsubmenu, .liheaders:hover .vnavtccsubmenu {
		display: block;
	}
}

@media only screen and (max-width : 1024px)
{
	/*button Stop and start slider*/
	.sliderpauseplay::before {
		/*align-self: flex-end;*/
		display: block;
		content: "Pause Slide Show";
		color: #FFFFFF;
		position: absolute;
		right: 10px;
	}
	input[type="checkbox"]:checked + .sliderpauseplay::before {
		background: rgba(0,100,200,0.4);
		content: "Play Slide Show";
	}

	.backarrow {
		/*opacity:0.5;*/
		margin-right: 10px;
	}
	.slidercontrols a {
		background: rgba(255,255,255,0.1);
		color: rgba(0,0,0,0.4);
	}

	/* ============================== This is for Pagination Styling. */
	.paginationslider {
		/*border:2px solid red;*/
		/*text-align:center; Important : Keeps the Pagination in the center. */
		/*width:640px;*/
		display: inline-flex;
		width: 100%;
		height: 100px;
		margin-top: 10px;
		overflow-y: hidden;
		overflow-x: scroll;
		position: relative;
	}
	.paginationcontainer {
		overflow: -moz-scrollbars-horizontal;
		position: static;
	}
}

@media only screen and (max-width: 720px)
{
	/*Added start here*/
	.modalwindow {
		top: 0;
		left: 0;
		transform: translate3d(0,0,0);
		width: 100%;
		overflow: scroll;
	}
	.modalwindow li {
		flex: 1 100%;
	}
	/*Added end here*/

	/*Modify Gallery For Photo Gallery Title*/
	.gallery {
		margin: 2.5em auto auto auto;
	}
	/*Photo Gallery Title*/
	.photogallerytitle {
		position: relative;
		top: 0;
		left: 0;
		transform: translateX(0);
		margin-bottom: 0.3125em;
		background: rgba(0,0,0,0.2);
	}
}

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

	/*Open and Close button*/
	.toggle {
		width: 6.25em;
	}
	.toggle.menuopen {
		width: 11.25em;
	}
}
@media only screen and (min-width: 390px) and (max-width: 719px)
{
	.gallery {
		/*width:640px;*/
		width: 390px;
	}
	.slides {
		/*width:640px; This width is reduced to compensate the padding on left and right */
		width: 360px;
	}
}

@media only screen and (min-width: 360px) and (max-width: 389px)
{
	.gallery {
		/*width:640px;*/
		width: 360px;
	}
	.slides {
		/*width:640px; This width is reduced to compensate the padding on left and right */
		width: 330px;
	}
}

@media only screen and (max-height : 440px)
{
	/*Open and Close button*/
	.toggle {
		width: 6.25em;
	}
	.toggle.menuopen {
		width: 11.25em;
	}

	/*Added start here*/
	.modalwindow {
		top: 0;
		left: 0;
		transform: translate3d(0,0,0);
		width: 100%;
	}
	.modalwindow li {
		flex: 1 100%;
	}
	/*Added end here*/

	/*Slider Image*/
	.slides {
		max-height: 350px;
	}
}

@media only screen and (max-width: 359px)
{
	.gallery {
		/*width:640px;*/
		width: 320px;
	}
	.slides {
		/*width:640px; This width is reduced to compensate the padding on left and right */
		width: 290px;
	}
}