
* { margin:0; padding:0; margin:0px; padding:0px; border:0px; font-family:playfair display, georgia, cursive; }
html, body { width:100%; height:auto; }
body { overflow:hidden; margin:0px; }
#body-top { overflow-y:hidden; }

#outerwrapper { display:flex; flex-direction:column; width:100%; height:100%; background-image:url("sierrasiteimages/sierrawebsitebackground.gif"); }
#topfixedsection { display:flex; justify-content:space-between; height:50px; width:100%; align-items:center; background-color:#F7F3E3;  }
.navigation-links {
	display: none;
	position: absolute;
	background-color:rgba(35,35,35,0.8);
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}
.navigation-links a {
	display:block;
	color: white;
	padding: 12px 16px;
	text-decoration: none;
}
.navigation-links a:hover {background-color: #ddd; }
.menubarcomplex { }
.menubarcomplex:hover .navigation-links {display:block;}
.menubarcontainer {
	width:40px;
	padding-left:30px;
	cursor:pointer;
}
.navigationmenubar {
	width:35px;
	height:3px;
	background-color:#505050;
	margin:7px 0;
}
#topnavigationtitletext { font-size:27px; text-align:center; color:black; font-family:playfair display, georgia, cursive; line-height:22px; }
#topnavigationrightLinkedInIcon { padding-right:60px; width:30px; }

.sectionlineseparator { display:block; width:99%; align-self:center; margin:3px; height:2px; background:black }

#maincontentwrapper { height:100%; overflow-x:hidden; overflow-y:auto; scrollbar-width: thin; scroll-behavior:smooth; padding-bottom:8px; }

.sectionspacersection { margin:8px; }

.maintextabstractsection { display:flex; flex-flow:row wrap; width:97%; justify-content:center; height:auto; align-items:center; padding:8px; height:auto;}
.mainabstracttitle { font-size:25px; text-decoration:underline; color:orange; margin-bottom:10px; }
.mainabstractblock { max-width:400px; text-align:center; padding:5px 50px 20px 50px; box-sizing:border-box; border:3px solid black; background-color:rgb(251,247,228); }
.mainabstracttext { font-size:18px; color:black; }
.mainabstracttextitalic { font-size:18px; color:black; font-style:italic; }

.mainnavtext { margin-top:15px; content:url("sierrasiteimages/aboutnavtext.gif"); width:300px; }

.maintextsection { display:flex; flex-flow:row wrap; align-items:center; margin:0 1% 0 1%; padding:8px;  height:auto; box-sizing:border-box; border:3px solid black; background-color:rgb(251,247,228);}
.maintexttitle { font-size:40px; margin-left:60px; text-decoration:underline; color:orange; text-decoration-color:#505050; text-decoration-line: underline; text-decoration-thickness:2px; text-underline-offset:7px;}
.maintexttitleleft { flex:0 0 35%; text-align:center-right;  }
.maintextblockright { flex:1 0 65%; text-align:center; padding:20px 30px 20px 30px; box-sizing:border-box; border-style:solid; border-width:2px; border-color:rgb(192,192,192); }
.maintext { font-size:20px; color:black; }

#homeintrosection { height:auto; box-sizing:border-box; border:3px solid black; margin:0 1% 0 1%; padding:20px; background-color:rgb(251,247,228); }
.introtwocolumn { display:flex; flex-flow:row wrap; width:100%; height:auto; align-items:center; justify-content:space-between; }
#introarea { flex:1 5 55%; text-align:center; padding:20px; }
.introtextblock { font-size:45px; }
.introtext { color:black; }
.introtextname { color:orange; }
.introtextacronym { font-size:30px; color:black; font-style:italic; }
#introlineseparator { margin:0 auto; width:60%; min-width:250px; height:1px; background:black }
.acronymtextblack { font-size:26px; color:rgb(128,128,128); }
.acronymtextblackbold { font-size:26px; color:rgb(128,128,128); font-weight:bold; }
.acronymtextblackitalic { font-size:26px; color:rgb(128,128,128); font-style:italic; }
.acronymtextorange { font-size:26px; color:orange; font-style:italic; }

#homemindmapsection { height:auto; padding:8px; }
.mindmapcontainer { max-height:560px; text-align:center; }
.mapscalablediv { width:100%; }
#mindmaplabelimage { content:url("sierrasiteimages/mindmaplabelimage.gif"); width:300px; }
#mindmapscalable { width:100%; height:auto; max-height:560px;  }
.mindmapbaseimage { width:1000px; height:1000px; }
#mindmapbase { display:block; z-index:0; }
#mindmaphotspotlayer { display:block; z-index:2; }
#mindmapbrainimage { z-index:3; }

.mindmaphotspot { fill:rgba(128,0,128,0.1); stroke-width:4; stroke:rgba(20,20,20,0.7) }
#mindmapdescription { display:none; position:absolute; width:260px; height:auto; padding:5px; background-color:rgba(35,35,35,0.8); box-sizing:border-box; border:2px solid black; font-size:16px; color:white; z-index:9; }
.mindmapsupportingtext { font-size:20px; color:black; }
.sierraimagesanimation { 
	display:block; margin:0 auto;
	flex:5 1 35%; 
	min-height:350px; max-height:350px; height:auto; object-fit:contain;
	width:max-content;  
	animation-name: sierrahomeimages;
        animation-duration: 40s;
        animation-iteration-count: infinite;
	animation-timing-function: ease-in;
        background-size: contain;
        background-repeat: no-repeat;
}
@keyframes sierrahomeimages {
	0% {background-image: url("sierrasiteimages/sierrahomeimage1.gif") }

	50% {background-image: url("sierrasiteimages/sierrahomeimage1.gif")}

	100% {background-image: url("sierrasiteimages/sierrahomeimage1.gif")}
}
.mindmapbulletlist {
  list-style-type: circle;
  list-style-position: inside;
}
.mindmapbulletlist li {
  font-size:12px;
  margin:4px;
}

#aboutimagecontainer { display:flex; flex-flow:row wrap; flex-basis:700px; justify-content:center; }

#travelimagecontainer { display:flex; flex-flow:row wrap; justify-content:center;  }
.travelplaceslistsection {
}
.travelplaceslistcolumn {
}
.travelbulletlist {
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	height:150px;
	gap:15px;
	list-style-type:circle;
	list-style-position: inside;
}
.travelbulletlist li {
	padding-left:0px;
	font-size:14px;
}
.photo { width:100%; height:auto; max-width:300px; max-height:300px; margin:4px; object-fit:contain; box-sizing:border-box; border:10px solid black; }

#educationsection { padding:8px; height:auto; }
.educationtwocolumn { display:flex; flex-flow:row wrap; column-gap:20px; justify-content:space-around; width:100%; height:auto; }
#educationarea { flex:3 3; min-height:350px; display:flex; align-items:center; justify-content:space-around; box-sizing:border-box; border:3px solid black; background-color:rgb(251,247,228); }
#educationMNSUimageblock { margin-left:10px; flex:0 0 35%; }
#educationMNSUimage { width:225px; content:url("sierrasiteimages/MNSUimage.jpg"); }
.educationtextblock { text-align:center; align-items:center; }
.educationtext { font-size:20px; color:black;}
.sierragraduationimagesanimation { 
	display:block; min-height:350px; min-width:350px; height:auto; object-fit:contain;  
	animation-name: sierragraduationimages;
        animation-duration: 40s;
        animation-iteration-count: infinite;
	animation-timing-function: ease-in;
        background-size: contain;
        background-repeat: no-repeat;
}
@keyframes sierragraduationimages {
	0% {background-image: url("sierrasiteimages/sierragraduationimage1.jpg")}
	17% {background-image: url("sierrasiteimages/sierragraduationimage3.jpg")}
	34% {background-image: url("sierrasiteimages/sierragraduationimage4.jpg")}
	51% {background-image: url("sierrasiteimages/sierragraduationimage5.jpg")}
	68% {background-image: url("sierrasiteimages/sierragraduationimage6.jpg")}
	85% {background-image: url("sierrasiteimages/sierragraduationimage7.jpg")}
	100% {background-image: url("sierrasiteimages/sierragraduationimage1.jpg")}
}

#timelinesection { box-sizing:border-box; padding:6px; }
.timeline { box-sizing:border-box; position:relative; max-width:1400px; margin:0 auto; }
.timelineintrotext { font-size:22px; color:orange; }
.timelineintrotextinteractive { font-size:14px; font-color:rgb(128,128,128); }
.timeline::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:10px; margin-left:-3px; background-color:rgb(12, 175, 255); }
.timelinecontainer { box-sizing:border-box; position:relative; width:100%; padding:3px; z-index:2; }
.timelinecontainer::after { content:''; position:absolute; top:18px; right:-17px; width:25px; height:25px; background-color:white; border-radius:50%; border:4px solid rgb(12, 175, 255); z-index:1; }
.timelinecontainer:hover:after { display:none; }
.timelineleft { width:50%; left:0; padding-right:26px; }
.timelineleft::before { content:" "; height:0; position:absolute; top:24px; right:16px; width:0; z-index:1; border:medium solid white; border-width:10px 0 10px 10px; border-color:transparent transparent transparent grey; }
.timelineleft:hover { width:95%; padding-right:0px; }
.timelineleft:hover:before { display:none; }
.timelineright { width:50%; left:50%; padding-left:26px; }
.timelineright::before { content:" "; height:0; position:absolute; top:24px; left:16px; width:0; z-index:1; border:medium solid white; border-width:10px 10px 10px 0; border-color:transparent grey transparent transparent; }
.timelineright::after { left:-16px; }
.timelineright:hover { left:5%; width:95%; padding-left:0px; }
.timelineright:hover:before { display:none; }
.timelinecontent { -webkit-user-select:none; box-sizing:border-box; border-radius:15px; position:relative; padding:4px 6px 4px 6px; background-color:rgb(251,247,228); border:medium solid black; border-width:2px;  }
.timelinedotdotdot { font-size:20px; font-weight:bold; color:white; }
.timelinedescription { display:none; height:100px; overflow-x:hidden; overflow-y:auto; }
.timelinedescription p { margin-bottom:1em; font-size:14px; color:black; }
.timelinecontent:hover .timelinedescription { display:block; }
.timelinecontent:hover .timelinedotdotdot { display:none; }
.timelinetextdaterange { font-size:16px; color:orange; }
.timelinetextrole {font-size:14px; color:rgb(128,128,128); font-weight:bold; }
.timelinetextcompany {font-size:13px; color:black; font-style:italic; font-weight:bold; }
