* {box-sizing:border-box;}

html,
body {background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment:fixed;}

html {background-color:#0a0000; background-image:url('pic/office.jpg'); /*position:fixed;*/}
html {height:100%; min-height:-moz-available; min-height:-webkit-fill-available; min-height:fill-available; max-height:100vh;}

body {background-image:linear-gradient(135deg, #0a0000 33%,#0a000080 67%,transparent 100%);}
body {height:100%; margin:0; color:#FFF; font-family:Helvetica,sans-serif;}

a {text-decoration:none; color:#1F2F98; color:#00c483;}
a svg {display:block;}

body ::selection, 
body ::-moz-selection {background-color:#00c483; color:#FFF;}
*:focus {border:1px dotted orange; border-color:#1F2F98;}

div#container {height:100%; width:100%; max-height:100vh; max-width:2000px; margin:0 auto;}
div#container {box-sizing:border-box; /*border:solid #1F2F98;*/ /*border-left-width:5px;*/ /*border-right-width:5px;*/ overflow-x:hidden;}
div#container {color:#FFF; display:flex; flex-direction:row; padding:2rem; transition:.5s;}

div#container div.side {flex:1 1 auto; position:relative;}

div#container div.edge {flex:0 1 auto; z-index:5;}
div#container div.edge {display:flex; flex-direction:column;}
div#container div.edge nav.menu {display:flex; flex-direction:column; justify-content:space-between; height:100%; background-color:#1c1e1fcc; margin:2.5rem 0; transition:.5s;}
div#container div.edge nav.menu ul {padding:0; margin:0; list-style:none;}
div#container div.edge nav.menu .item {text-align:center; font-size:1.5rem; /*text-transform:lowercase;*/ font-weight:bold; /*margin:1em 0;*/ padding:1rem; transition:.75s; transition:.5s;}
div#container div.edge nav.menu .item a {display:flex; flex-direction:row; justify-content:center; font-size:1.5rem;}
div#container div.edge nav.menu .item a span.icon {/*margin-right:8px;*/}
div#container div.edge nav.menu .item a label {display:none;}
div#container div.edge nav.menu li.item {/*margin:1rem 0;*/}
div#container div.edge nav.menu li.item a {color:#888; transition:.2s;}
div#container div.edge nav.menu li.item a:hover {color:#00c483;}
div#container div.edge nav.menu li.item.active a {color:#00c483; font-size:2rem;}
div#container div.edge nav.menu div.item.navtoggle {background-color:#00c483; padding:1rem; margin:0; font-size:1.65rem;}
div#container div.edge nav.menu div.item.navtoggle a:hover,
div#container div.edge nav.menu div.item.navtoggle a {color:#000;}
div#container div.edge nav.menu div.item.navtoggle a span.icon {transition:.2s;}
div#container div.edge nav.menu div.item.navtoggle:hover a span.icon {transform:scale(1.25);}
div#container div.edge nav.menu div.item.downloadBtn {font-size:2rem; margin-bottom:.5rem;}
div#container div.edge nav.menu div.item.phantomBtn {font-size:3rem; margin-bottom:.5rem; opacity:0}

div#container div.left {flex:0 1 40%; z-index:10; transition:.5s all, .25s font-size;}
div#container div.left {background-color:#1c1e1fcc; box-shadow: 0 32px 84px 0 rgba(0,0,0,0.5);}
div#container div.left div.hero {background-image:url('pic/headshot.jpg'); background-size:cover; background-position:46% center;}
div#container div.left div.hero {position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;}
div#container div.left div.hero::before {content:''; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:#1c1e1f99; /*background-color:#1c1e1f;*/}
div#container div.left div.badge {position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; text-align:center; transition:1.75s all, .25s font-size;}
div#container div.left div.badge h1.name {/*text-transform:lowercase;*/ font-size:4em; font-weight:600; margin:0 0 1rem;}
div#container div.left div.badge h4.title {text-transform:uppercase; margin:0 0 1.5rem; font-weight:100;}
div#container div.left div.badge h4.title {text-transform:none; font-weight:600; color:#00c483;}
div#container div.left div.badge p span.triplet {margin-bottom:.25rem;}
div#container div.left div.badge p span.triplet:last-of-type {display:block;}
div#container div.left div.badge p span.triplet::after {content:'.';}
div#container div.left div.badge div.socialBox {text-align:center; margin:1rem 0;}
div#container div.left div.badge div.socialBox a.socialButton {display:inline-block; /*border-radius:50%;*/ color:#FFF; padding:15px; transition:background-color 1s, text-shadow.1s, transform 1s;}
div#container div.left div.badge div.socialBox a.socialButton {background-color:transparent; position:relative;}
div#container div.left div.badge div.socialBox a.socialButton .fa {font-size:18px; position:absolute; top:50%; left:50%; /*opacity:.5;*/ transform:translate(-50%,-50%); transition:.5s;}
div#container div.left div.badge div.socialBox a.socialButton:hover {color:#00c483;}
div#container div.left div.badge div.socialBox a.socialButton:hover .fa {/*opacity:1;*/ transform:translate(-50%,-50%) rotateY(360deg);}
/*div#container div.left div.badge div.socialBox a.socialButton.phone:hover {background-color:limegreen; color:#FFF;}*/
/*div#container div.left div.badge div.socialBox a.socialButton.lnkdn:hover {background:#0077B5; color:#FFF;}*/
/*div#container div.left div.badge div.socialBox a.socialButton.email:hover {background-color:dodgerblue; color:#FFF;}*/
div#container div.left div.badge div.socialBox div.indicator {position:relative; text-align:center; color:#00c483;}
div#container div.left div.badge div.socialBox div.indicator:empty::after {content:'abc'; color:transparent;}
div#container div.left div.badge div.socialBox div.indicator span.option {/*position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);*/}
div#container div.left div.badge div.socialBox div.indicator span.option {display:inline-block; opacity:0; max-width:0; transition:.5s; overflow:hidden; white-space:nowrap;}
div#container div.left div.badge div.socialBox div.indicator span.option.call {}
div#container div.left div.badge div.socialBox div.indicator span.option.cnct {}
div#container div.left div.badge div.socialBox div.indicator span.option.mail {}
div#container div.left div.badge div.socialBox div.indicator span.option.active {opacity:1; max-width:100%; transition:1.5s;}

div#container div.right {flex:1 1 60%; z-index:4; overflow:hidden;}
div#container div.right {display:flex; flex-direction:column; position:relative;}
div#container div.right div#content {flex:1 1 auto; margin:2.5rem 0; transform:translateX(0); transition:.5s;}
div#container div.right div#content {background-color:#1c1e1f; overflow:hidden; position:relative; scroll-behavior:smooth;}
div#container div.right div#content.collapsed {transform:translateX(-100%);}
div#container div.right div#content:before, 
div#container div.right div#content::after {content:''; position:absolute; right:0; left:0; width:100%; z-index:1;}
div#container div.right div#content:before {top:0; height:5rem; background:linear-gradient(to bottom, #1c1e1f 2.5%,#1c1e1fcc 35%,#1c1e1f00 100%);}
div#container div.right div#content::after {bottom:0; height:6rem; background:linear-gradient(to top, #1c1e1f 2.5%,#1c1e1fcc 35%,#1c1e1f00 100%);}

div#container div.right div#content div.content {position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;}
div#container div.right div#content div.content {display:none; opacity:0; overflow:auto; transition:.15s;}
div#container div.right div#content div.content {padding:0 3rem 1rem; /*color:#FFF;*/ /*border:1px solid #000;*/}
div#container div.right div#content div.content {scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}
div#container div.right div#content div.content.active {display:block; opacity:1;}
div#container div.right div#content div.content div.inner {padding-bottom:3rem; scroll-behavior:smooth; opacity:0; transition:.1s;}
div#container div.right div#content div.content.active div.inner {opacity:1;}
div#container div.right div#content div.content div.inner {display:flex; flex-direction:row; flex-wrap:wrap;}
div#container div.right div#content div.content div.inner h2 {flex: 0 0 100%;}
div#container div.right div#content div.content div.inner h2 {font-size:4.5rem; margin:4.5rem 0 1.5rem; /*text-transform:lowercase;*/ transition:.5s;}
div#container div.right div#content div.content div.inner p {color:#888; line-height:1.5rem;}
div#container div.right div#content div.content div.inner::after {content:'#'; color:transparent;}

div#container div.right div#content div.content .item {flex: 0 0 50%; text-align:left; padding:1rem; display:block;}
div#container div.right div#content div.content .item.full {flex: 0 0 100%; padding:1rem 3rem;}
div#container div.right div#content div.content .item img {}
div#container div.right div#content div.content .item h3 {color:#FFF; margin-bottom:0; transition:.2s;}
div#container div.right div#content div.content .item h3:hover {color:#00c483;}
div#container div.right div#content div.content .item h4 {color:#FFF; font-weight:200; margin:.25rem 0 .5rem; transition:.2s;}
div#container div.right div#content div.content .item div.date {display:inline-block; background-color:#00c483; color:#0a0000; padding:8px 7px 5px; text-transform:uppercase; font-weight:500; font-size:.75rem; letter-spacing:2.2px; margin-top:.5rem;}
div#container div.right div#content div.content .item h4 + div.date {margin-top:0;}
div#container div.right div#content div.content .item div.date span {color:#0a0000;}
div#container div.right div#content div.content .item div.date span:nth-of-type(2):before {content:' - ';}
div#container div.right div#content div.content .item p {font-size:14px; line-height:1.5rem;}
div#container div.right div#content div.content h2 {margin:4.5rem 0;}
div#container div.right div#content div.content ul {margin:1rem 0;}
div#container div.right div#content div.content li {line-height:3rem;}

div#container div.right div#content div#aboutme {}
div#container div.right div#content div#leadership {}
div#container div.right div#content div#education {}
div#container div.right div#content div#education .item.full {text-align:center;}
div#container div.right div#content div#pubmedia {}
div#container div.right div#content div#awards {}
div#container div.right div#content div#awards h3 {/*font-weight:200;*/ margin-bottom:0;}
div#container div.right div#content div#awards div.group {display:flex; flex-direction:row; flex-wrap:wrap; margin-top:1rem;}


div#container.pre div.edge nav.menu li.item {opacity:0;}
div#container.pre div.edge nav.menu li.item:nth-of-type(n+1) {transform:translateX(-100vw);}
div#container.pre div.edge nav.menu li.item:nth-of-type(n+2) {transform:translateX(-200vw);}
div#container.pre div.edge nav.menu li.item:nth-of-type(n+3) {transform:translateX(-300vw);}
div#container.pre div.left div.badge {opacity:0;}

div.circursor {display:none;}


@media screen and (max-width:1199px) {
	div#container div.right div#content div.content div.inner h2 {font-size:3rem;}
}

@media screen and (max-width:991px) {
	div#container div.left {flex:0 1 0; opacity:0; font-size:.15rem; box-shadow:none; transform:translateY(-100vh); /*display:none;*/}
}

@media screen and (max-width:767px) {
	body {background-image:linear-gradient(to bottom, #0a0000 10%,#0a000000 100%);}

	div#container {padding:0; max-height:100%;}

	div#container div.side {box-sizing:border-box; /*min-height:100%; max-height:100%;*/ /*height:100%;*/}

	div#container div.edge {flex:0 1 auto;}
	div#container div.edge nav.menu {margin:0; border-right:1px solid #444;}
	div#container div.edge nav.menu .item a {font-size:1.3rem;}
	div#container div.edge nav.menu li.item.active a {font-size:1.8rem;}
	div#container div.edge nav.menu div.item.downloadBtn {font-size:2rem;}
	div#container div.edge nav.menu div.item.navtoggle,
	div#container div.edge nav.menu div.item.downloadBtn {padding:.65rem .5rem;}
	div#container div.edge nav.menu div.item.phantomBtn {font-size:2.5rem;}
	div#container div.edge nav.menu li.item,
	div#container div.edge nav.menu div.item {padding:1rem .5rem;}

	div#container div.right {flex:1 1 60%; overflow-y:auto;}
	div#container div.right div#content {margin:0;}
	div#container div.right div#content:before {height:2.5rem;}
	div#container div.right div#content::after {height:3rem;}
	div#container div.right div#content div.content .item.full,
	div#container div.right div#content div.content .item {flex: 0 0 100%; padding:1rem; text-align:left;}
	div#container div.right div#content div#education .item.full {text-align:left;}
}

@media screen and (max-width:575px) {
	div#container div.right div#content div.content div.inner h2 {font-size:2rem;}
}