/* Hilary Cholo styles */
/* Version 2: Mobile enabled */
/* Version 3: Image cycling (with dots) added */
/* Version 4: Major upgrade to responsiveness & simplification */
/* Version 5: Minor tweaks */
/* Version 6: Height improved with dvh BUT DOESN'T PLAY NICE WHEN INSTALLED BY CHROME ON MOBILE*/
/* Version 7: Arrows removed for touch screens */
/* Version 8: Active class separated for thumbs */
/* Version 9: Mobile screen font size restrictions removed */
/* Version 10:V6 changes removed and other mods, to cure problems when installed using Chrome on mobile*/
:root {
  --blue: #05326B;
  --width: 850px;
}

/* Get rid of those focus dotted outlines and highlights:*/
*:focus { outline: none !important; -webkit-tap-highlight-color: transparent;}

body {font-size:100%;font-family:Arial, Helvetica, sans-serif;margin:0;	height:99%;padding:0;	color:var(--blue);	background-color:#fff;	user-select:none;	}
	
html {height:100%;margin:0;}

.imgSlide {	width:95%;margin:0px auto;}
.imgSlide img {max-width:92%;	max-height:95%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);border:1px solid DarkGray;	box-shadow:5px 5px 5px #9C9C9C;border-radius:2%;}
.fade-image {opacity: 0; transition: opacity 0.5s ease-in-out;}
.fade-image.active { opacity: 1;}
.fadeIn {animation-name: fadeIn;animation-duration: 1.5s;}
.fadeOut {animation-name: fadeOut;	animation-duration: 1.5s;}
@keyframes fadeIn  {from {opacity: 0}	to {opacity: 1}}
@keyframes fadeOut {from {opacity: 1}	to {opacity: 0}}

#prevPic, #nextPic {cursor: pointer;	position: absolute;color: var(--blue);font-size: 2em;transition: 0.6s ease;border-radius: 25px;user-select: none;top:0;	bottom:0;margin:auto 0;height:32px;}
#nextPic {right: 0; padding:0px 5px 10px 16px;}
#prevPic {left: 0;  padding:0px 16px 2% 5px;}
#prevPic:hover,
#nextPic:hover {background-color: white;opacity:0.7;}
.butgal {cursor:pointer;width:10%;display:table-cell;vertical-align:middle;color:var(--blue);}

.pdot {	cursor: pointer;height: 15px;	width: 15px;margin: 0 6px;	background-color: #bbb;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;}
#pdots {text-align:center; flex:0 1 auto;margin-bottom:10px;}
.pdot.active {background-color: var(--blue);	}
.pdot:hover {background-color: var(--blue); opacity:0.5;	}
#gdots {display:none;}
.dot {cursor:pointer;margin:0px 1%;}
	
#page {	height:100%;max-width:var(--width);margin:0px auto;position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr;}

#hdr {	height:100px;text-align:center;background-color: var(--blue);margin-bottom: 3px;position:relative;}
#hdr a {color:currentColor;}

.mainBody {	width:calc(100% - 1px);overflow-y:hidden;	height: 99%;display:grid;	grid-template-columns: 200px 1fr;	border-width: 4px 1px 1px 1px;border-color: #00316B;	border-style: solid;}
.mainMid {width:100%;text-align:center;overflow:hidden;position:relative;flex:1 1 auto;}
.mainBK {display:inline-block;	background-color: black;color: white;}	

.homePage {width:100%;display:inline-block;height:100%;}
#homeTop {width:95%;height:60%;margin: 1% auto 0px auto;	position:relative;	}	
#homeBot {width:100%;margin:auto;text-align:center;overflow-y:auto;	height:38%;	}
.menuPage {display:flex; flex-flow:column;}

.personalHdr { height:100px;}
.personalPage {height:100%;display:flex;flex-flow:column;margin-top:1%;}
#personalTop {width:95%;height:200px;	margin:10px auto 0px auto;	text-align:center;	overflow:hidden;display:flex;justify-content:space-around;}
#personalBot {height: calc(98vh - 352px);padding:0px 3%;border: 1px solid var(--blue);width: 90%;margin: 20px auto 0px auto;}
#personalScroll {overflow-y:auto;height:100%;scrollbar-width:none;}
#personalScroll::-webkit-scrollbar {display: none;}
.galleryPage {height:99%;display:flex;flex-flow:column;margin-top:1%;}
#galleryTop {width:100%;height:fit-content;text-align:center;margin:0px auto;padding:0px;display:none;flex:0 1 auto;	}
#galleryBot {width:100%;height:fit-content;text-align:center;margin:auto;}


#homeImage {position:absolute;	aspect-ratio:6/4;border-radius:3%;max-height:100%;max-width:100%;bottom:0;left:0;	right:0;margin:0px auto;box-shadow: 5px 5px 5px #9C9C9C;}
#menuBar {background-color:var(--blue);color:#fff;height:100%;display:inline-block;}
.mmShow {display:none;} /* (mmShow is activated in media queries) */
.mmHide {display:none;}
.hidden {display:none;}
	
#choloImg { height: 94%;position:absolute;left:0;transform:translate(4%, 3%);	}
#bannerImg {max-height: 80%;max-width:60%;position: absolute;top: 50%;	transform: translate(-50%, -50%);	}
#contactImg {margin-right:2%;height:75%;position:absolute;top:50%;right:0px;transform: translate(0%, -50%);}

#mobornot {text-align:right;display:none;}

#menuItems {width:98%;	height:98%;	padding-left:2%;overflow:hidden;}
#scrollBase {height:10%;}
#logoTurn {position:absolute;bottom:5%;left:12%;width:6%;}
#expbox {height:6vh;max-height:32px;cursor:pointer;}	
#blackBox {	width:100%;	height:100%;margin:auto;text-align:center;display:flex;flex-flow:column;}
#blackLeg {	height:fit-content;width:90%;margin: 0px auto;flex:0 1 auto;	padding-bottom:5px;}
#blackTop {	width:100%;	position:relative;flex:1 1 auto;}
#blackImg {	border-radius:2%;max-height:95%;max-width:95%;position:absolute;bottom:0;top:0;right:0;left:0;margin:auto;}
#blackBot {	width:100%;	flex:0 1 auto;	height:40px;padding:20px 0px;	}
.bnav {border:0;outline-style:none;cursor:pointer;height:100%;aspect-ratio:49/54;}
#bnavLHS {float:left;margin-left:10px;}
#bnavRHS {float:right;visibility:hidden;}
#cycler {right:0;left:0;margin-left:auto;margin-right:auto;}
#ttldiv {display:none;}
#legpCont {position:relative;width:100%;margin-bottom:10px;height:66px;}
#legp {text-align:center;width:95%;margin:0px auto 20px auto;font-size:90%;}
	
a {color:#000;text-decoration:none;border-style:none;border:0px;outline-style:none;}
a.mnuMob {	color:#fff;	line-height:1.4em;	padding:0;	border-style:none;}
a.mnu {	color:#fff;	line-height:1.4em;	padding:0;	border-style:none;font-size:90%;}
a:active, a:focus { outline-style:none;border:none;outline:none;}

img.shdr {box-shadow: 5px 5px 5px #B2B2B2;height:96%;	}
img.thbs {margin:2px;border: 1px solid black;	height:60px;border-radius:4px;}
span.thmb{color:#000;text-decoration:none;outline-style:none;border:1px;cursor:pointer;}
.thmb.active, .thmb:hover {opacity:0.7;}

#smallmenu {display:none;cursor:pointer;position:absolute;top:30%; right:3%; height:30%;transform:translate(-7%, 11%);}

p.footer {display:none;}
p.mLeg {margin-bottom:3px; font-size:100%;}
#header{font-size:15px;display:block;font-weight:bold;text-align:center;}

img.logo {width:21px; height:14px;}
span.error{ color:red; font-weight:bold;	}
li.cv {margin-bottom:5px; }
ul.cv{margin-left:0px;margin-top:5px;padding-left:20px;}
div.noshow {width:100%;margin:3% auto;text-align:center;}
a.noshow {color:#F5FFF5;	text-decoration:none;border:none; }
hr.ending {	border: 0;	height: 1.5px;	width:50%;	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--blue), rgba(0, 0, 0, 0));}
br.full {display:inline-block;}
/* Non-touch screen specifics: */
@media(hover: hover)
{
	.mnu:hover, .mnuMob:hover {color:orange;text-shadow: 0.2px 0.2px;}
}
/* Touch screen specifics: */
@media (pointer:coarse)
{
	#prevPic, #nextPic {display:none;}
}
/* Screens narrower than max width 850px */
@media only screen and (max-width:849px)
{
	#contactImg {display:none;}
	#shdrR {display:none;}
}
/* Reduce gallery thumbs for smaller (full size) screens */
@media only screen and (max-width:800px), screen and (max-height:899px)
{
	img.thbs { height:45px;}
	.personalPage {margin-top:0px;}
	#galleryBot {margin-top:1%;}
}
	
/* Screens narrower than 750px or shallower than 595px (show hamburger menu) */
@media only screen and (max-width:749px), screen and (max-height:594px)
{
	#contactImg {display:none;}
	p.footer{text-align:center;display:block;}
	.full {display:none;}
	.galleryPage {height:96%;margin-top:0px;}
	#galleryBot {display:none;}
	#pdots{padding:0px;margin:20px auto 0px auto;}
	#galleryTop {display:inline-block;}
	#galspan{width:40%;display:table-cell;height:inherit;vertical-align:middle;}
	#gdots {display:inline-block !important;width:80%;text-align:center;height:20px;padding-bottom:2%;}
	#hdr {padding:0;height:60px;}
	#homeBot {display:inline-block;}
	.homePage {border:none;width:99%;}
	#legp {padding-bottom:10px;height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;}
	#lht {text-align:right;}
	#logoTurn {display:none;}
	#mainBody {	display:inline-block;text-align:center;}
	.mainSM {text-align:center;}
	#menuBar {display:none;}
	#menuMobile {text-align:center;width:99%;	height:97%;	overflow-y:auto;margin:1% auto 2% auto;}
	.menuPage {display:none;}
	.mmHide {display:none;}
	.mmHide {display:none;}
	.mmShow {display:inline-block;}
	a.mnu, a.mnuMob {color:var(--blue);}
	#mobornot {text-align:left;}
	#personalBot {text-align:initial; height:100%;border:none;margin-top:0px;}
	#personalTop {display:none;}
	#rht {text-align:left;}
	#smallmenu {display:block; }
	div.smitem {display:block;margin:0px auto;}
	span.smfiller {display:none;width:20px;}
	span.smtitles {font-style:italic;font-weight:bold;}
	#ttldiv {display:table;text-align:center;font-weight:bold; width:100%;height:40px;}
}
/* Adjustments for shallower screens */
@media only screen and (max-height:684px)
{
	#logoTurn {display:none;}
	#pdots {display:none;}
}
@media only screen and (max-height:580px)
{
	#hdr {padding: 0;}
	.imgSlide img {box-shadow: 3px 3px 4px #9C9C9C;}
	#prevPic,#nextPic {font-size:1.5em;}
}
@media only screen and (max-height:499px)
{
	#blackLeg {font-size:0.9em;}
	#gdots {display:none;}
}
@media only screen and (max-height:400px)
{
	#pdots, .ending {display:none;}
}
@media only screen and (max-width:380px)
{
	#legp {font-size:0.9em;}
}
@media only screen and (max-width:299px)
{
	#choloImg{display:none !important;}
	#bannerImg{transform: translate(-64%, -50%);}
}