html,body {height:100%; margin:0; scroll-behavior:smooth; font-family:Verdana,sans-serif;}

/*div#container {max-width:1600px; margin:auto;}*/
div#container {min-height:100%; overflow:auto; -webkit-overflow-scrolling:touch;}
div#container div.page {background-color:dodgerblue; background-size:cover; background-repeat:no-repeat; background-position:center center; position:relative; padding:40px; box-sizing:border-box; font-size:18px; border:1px solid rgba(0,0,0,0.25); min-height:25%; transition:.5s;}
div#container div.page.social {background-color:#FFF; background-image:url('social.jpg'); background-attachment:scroll; box-shadow:9999px 9999px rgba(255,255,255,0.75) inset;}
div#container div.page.polygon {background-color:transparent; box-shadow:9999px 9999px rgba(0,0,0,0.35) inset; color:#FFF;}
div#container div.page.polygon:before,
div#container div.page.polygon:after {width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; content:'';}
div#container div.page.polygon:before {z-index:-2; background-color:#2a5f98; clip-path:polygon(63% 69%, 100% 9%, 100% 100%, 5% 100%);}
div#container div.page.polygon:after {z-index:-1; background-color:#226dbc; clip-path:polygon(72% 74%, 100% 27%, 100% 100%, 5% 100%);}
div#container div.page:empty {display:none;}
div#container div.page h2 {text-align:center;}
div#container div.page p {line-height:2em; transition:.5s;}
div#container div#page01 {height:100vh; background-color:#FFF; background-image:url('profile.jpg'); background-attachment:fixed; background-position:90% 0; transition:.5s; /*box-shadow:9999px 9999px dodgerblue inset;*/}
div#container div#page01 div.badge {position:absolute; right:0; top:67%; transform:translate(0,-50%); text-align:center; padding:24px 40px; font-family:Lato, sans-serif; font-weight:300; min-width:100px; box-sizing:border-box; transition:.5s; background-color:rgba(0,0,0,0.5); color:rgba(255,255,255,0.8); border-radius:.5rem;}
div#container div#page01 div.badge {right:50%; transform:translate(50%,-50%);}
div#container div#page01 div.badge > * {margin:6px 0;}
div#container div#page01 div.badge div.name {font-size:56px; /*text-transform:uppercase;*/ /*font-variant:small-caps;*/}
div#container div#page01 div.badge div.occupation {font-size:18px;}
div#container div#page01 div.badge div.mission {font-size:16px;}
div#container div#page01 div.badge div.learnMore {border:2px solid #DDD; color:#DDD; background:rgba(0,0,0,0); display:inline-block; margin-top:24px; padding:18px 24px 16px; cursor:pointer; transition:.5s;}
div#container div#page01 div.badge div.learnMore:hover {background:#DDD; color:#222;}
div#container div#page02 {min-height:50%;}
div#container div#page03 {}
div#container div#page04 {}
div#container div#page05 {}
div#container div#page06 {}
div#container div#page07 {}
div#container div#page08 {}
div#container div#page09 {background:linear-gradient(red,orange,green,blue); /*color:#000;*/ box-shadow:9999px 9999px rgba(255,255,255,0.85) inset;}
div#container div#page10 {background-color:rgb(114,114,114); background-image:url('worldmap.png'); background-attachment:scroll; /*min-height:400px;*/ text-align:center;}
div#container div#page10 .logoBox {margin-bottom:12px;}
div#container div#page10 .logoBox img.logo {height:34px; /*position:relative; bottom:3px;*/ transition:1s;}
div#container div#page10 .socialBox {margin:12px 0; text-align:center;}
div#container div#page10 .socialBox a.socialMediaButton {display:inline-block; background-color:rgb(52,58,64); background-color:dodgerblue; border-radius:12px; color:#FFF; padding:15px; position:relative; /*top:50%; transform:translateY(-50%);*/ transition:.5s; /*opacity:.25;*/}
div#container div#page10 .socialBox a.socialMediaButton:hover {}
div#container div#page10 .socialBox a.socialMediaButton .fa {font-size:18px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:.5s; opacity:.75;}
div#container div#page10 .socialBox a.socialMediaButton:hover .fa {opacity:1;}
/*div#container div.page:before {height:100%; background-size:cover; background-repeat:no-repeat; background-position:center center;}*/
/*div#container div.page.parallax {background-position:center 0;}*/


/* mobile(xs,sm) */
@media screen and (max-width:767px) {
	div#container div.page {font-size:15px;}
	div#container div.page p {line-height:1.5em;}
	div#container div#page01 {background-attachment:scroll;}
	div#container div#page01 div.badge {top:50%; right:50%; transform:translate(50%,-50%); min-width:90%; margin:1rem auto;}
	div#container div#page01 div.badge div.name {font-size:32px;}
	div#container div#page01 div.badge div.occupation {}
	div#container div#page01 div.badge div.mission {}
	div#container div#page01 div.badge div.learnMore {}
	div#container div.desktop {display:none;}
	div#container div.mobile {display:block;}
	/*div#container div#page01:before {background-image:url('profile.jpg'); background-attachment:scroll; transition:.5s; position:fixed; top:0; right:0; bottom:0; left:0; content:'';}*/
}
/* tablet(md), desktop(lg,xl) */
@media screen and (min-width:768px) {
	div#container div.mobile {display:none;} 
	div#container div.desktop {display:block;}
}