/*------------------------------------------------------------
Site-wide font classes
-------------------------------------------------------------*/

html {
  	scroll-behavior: smooth;  /* Doesn't work for Edge & Explorer */
	font-size: 100%;
}

body {
	position: relative;
    font-family: 'Poppins', sans-serif;
	background: grey;
}

h1 {
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
	color: white;
	font-size: 3rem;
}

h2 {
	color: white;
	padding-left: 1.25rem;
	margin-bottom:0;
	margin-top:0;
	text-align: center;
	font-size: 1.6rem;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
}

h3 {
	color: white;
	padding-top: 0rem;
	padding-left: 1.25rem;
	text-align:center;
}

h4 {/*  Reserved for the name in top left portrait photo */
	color: white;
	font-size: 1.5rem;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
	margin: 0;
}

h5 {/*  Headers for the resume timeline. This one needs absolute size to fit the containers*/
	color:rgb(34, 167, 240);
	font-size: 16px;
	text-align: left;
	margin:0px;
}

h6 {/* sub headers for additional training, portfolio content, hobby content */
	color: #fdebd0;  /*rgb(51, 193, 255); */
	font-size: 1.4rem;
	text-align: left;
	margin: 10px 0px 0px 5px;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
}

ul {
	font-family: arial, sans-serif;
	font-size: .85rem;
	line-height: 1.7rem;
	color: #fdebd0;
	text-align: left;
}

li {margin-left:0rem;}

p {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	line-height: 1.6rem;
  	color: #fdebd0; /*#eadd61; */
	margin: 0;
	margin:0;
	text-align: left;
	padding: .4rem .25rem 0.25rem 0.4rem;
}

hr {
	margin-top: 0;
	margin-bottom: 0;
	border-top: 1px solid #404040;
}

.content_link {  /* Use this links in the main content site */
	color: #989898;
	font-size: 1rem;
	margin:0;
	text-decoration: none;
}

.button_subheader {  /* Looks like content_link, but no hover changes */
	color: #989898;
	font-size: 1rem;
	font-style: italic;
	margin:0;
	text-decoration: none;
}

.close_content_link {  /* Use this one to close some expanding content (with a close icon)*/
	color: #989898;
	font-size: 1rem;
	margin:0;
	text-decoration: none;
	width:100%;
	display: flex;
	align-items:center;
	padding-left:2rem;
}

.content_link:hover {
	text-decoration: none;
	color: #C8C8C8;
	font-weight: bold;
}

.list_link {font-size: .85rem;}    /* Also add this second for links in lists */
.list_link:hover {font-weight: normal;} /* Stop annoying behaviour with multi-line text */

/*------------------------------------------------------------
Site-Wide Formatting Classes and ids
-------------------------------------------------------------*/
.header-block{
	height:55px;
}

#dismiss_content, #dismiss_hobby, #dismiss_hobby_3, #dismiss_mobile_content, #dismiss_mobile_content_hobbies, #dismiss_book{
	margin-left:auto;
	margin-right:0;
}

.close_icon:hover{
	background:#0077b5;
}

.dismiss_content_bottom {
	float: right;
	margin-top:0;
}

.section {
	height: auto;
	min-height: 100vh;
	padding-top: 3.75rem;
	padding-left :0px;
	background-color:grey;
}

.GreyButton{
	padding: 5px;
	border:none;
	background: #202020;
	display: flex;
	justify-content: center;
	cursor: pointer;
}

.LongBlackButton{
	margin-left:30px;
	padding: 0;
	border:none;
	background: #202020;
	max-width: 18rem;
	min-height:30px;
	display: flex;
	justify-content: center;
	align-items:center;
	margin-top:10px;
	cursor: pointer;
}

.GreyButton:hover{box-shadow: 7px 7px 4px  #202020;}

.wrapper {
    display: flex;
    width: 100%;
}

.page_col {
	min-height: 100vh;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------*/

.portrait {
	height: 14.4rem;  /* Was 205px Now 12.8*16*1.1 = 225px for FHD, 12.8*.9x3x16 = 553 on mobile*/
	width: 12.5rem;   /* Was 200px Now 12.5*16*1.1 = 220px for FHD, 12.5*.9x3x16 = 558.4 on mobile*/
	position: relative;
	margin-bottom:4px;
}

#portrait-text {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height: 45px;     /* Was 45px */
	background: rgba(29,34,90, 0.8);  /* hex: #1D225A  */
	margin:auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom-width: 1px;
	border-bottom-style:  solid;
	border-bottom-color:  #404040;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
}

#sidebar {
	background-image: url(../images/portrait6.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
    background-position: center top;
	margin-left: 0px;
  	width: 12.5rem;      /* Was 201px */
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	z-index: 400;
	color: #fff;
	background-color: #202020;
	transition: all 0.3s;
	border-right: 1px solid #404040;
	border-top: 1px solid #404040;
}

#sidebar ul.components {
    padding: 0 0;
}

#sidebar ul p {
    color: #606060;
    padding: .85rem;
}

#sidebar ul li a {
	color: #989898;
	padding: 7px;
	font-size: .85rem;
	display: block;
	margin-left:40px;
}

#sidebar ul li a:hover {
	color: #C8C8C8;
	background: #202020;
	font-weight: bold;
}

#sidebar ul li a:active { /*  this only works when mouse pressed */
	color: #DCDCDC;
	background: #202020;
	font-weight: bold;
}

#sidebar ul li .active{ /*  this is the real active class */
	color: #DCDCDC;
	background: #202020;
	font-weight: bold;
}

#attribution {
	position: absolute;
	width:100%;
	bottom: 5px;
	font-size: .85rem;
	text-align: center;}

/*-------------------------------------
Landing Page & The Navbars
--------------------------------------*/
#mobile_header {
	color: white;
	font-size: 1.5rem;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
}

#navbar_header {
	margin: 0px;
	color: white;
	font-size: 1.5rem;
	margin-left: 0px;
	text-align: left;
}

#landing-page {
	height: auto;
	min-height: 100vh;
	text-align:center;
	background-image: url(../images/blue.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	font-size:1.4em;
}

.last {
	color:  #fdebd0;
	font-weight: bold;
}

#landing-page-mobile-space{
	height:30vh;
}

#landing-page-header {
	height: 12vh;
	padding-top: 5vh;
	margin-bottom: 1rem;
	text-align: center;
}

#lading-page-credentials {  /* Not using this at the moment */

	padding-top: 0;
	margin-bottom: 1rem;
	text-align: center;
	font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
}


#landing_page_block {
	background: rgba(29,34,90, 0.6);
	padding: 1rem;
	display: inline-block;
}

#landing_page_text {
	background: rgba(29,34,90, 0.6);
	padding: 1rem;
	margin-top:4rem;
}

.landing-page-list {
	padding: 1rem 1rem 0rem 1rem;
	list-style: none;
	font-weight: bold;
	font-size: 1rem;
	line-height: 2rem;
	color: #fdebd0;
	text-align:center;
}

#landing-page-subheader {
	padding: 1rem 0 0 0;
	text-align: center;
	margin:0;
}

.navbar {
    padding: 0px 0px;
    border: none;
    margin-bottom: 0px;
	background:rgba(0,0,0, 0.7);
	height:55px;
	z-index:300;
}

#top_navbar {
	width: 100%;
}

#SideBarToggler {
	float: right;
}

/*---------------------------------------------------------------------
Resume Page: See also resume-style.css for the timeline
----------------------------------------------------------------------*/

/*------ Shared with skills page  ----- */
.closed_card {
	background-image: url(../images/arrow-204-16.png);
	background-repeat: no-repeat;
	background-position: right 8px top 10px;
}

.open_card {
	background-image: url(../images/arrow-142-16.png);
	background-repeat: no-repeat;
	background-position: right 8px top 10px;
}
/*------------------------------------ */

#resume-page {
	height: auto;
	min-height: 100vh;
	background-color:#404040;
	background-image: url(../images/boats.jpg);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.resume-timeline-col {
	padding:0;
	background-color:#404040;
}

#ExtraTrainingColumn {
	background: linear-gradient(to right,
	rgba(64,64,64, 1) 20%,
	rgba(64,64,64, 0) 80%);
	padding:0;
	padding-top:15px;
}

#ExtraTrainingWiderColumn {
	background: linear-gradient(to right, rgba(64,64,64, 1) 40%, rgba(64,64,64, .3) 100%);
	padding:0;
	padding-top:15px;
}

#ExtraTrainingHeaders > ul {
	line-height: 1.6rem;
	margin-top:0.8rem;
	padding-left:.5rem;
}

#ExtraTraining > ul {
	list-style-type:none;
	line-height: 1.6rem;
	margin-top:0.8rem;
	padding-left:0;
}

#ExtraTrainingSmall > ul {
	line-height: 1.6rem;
	margin-top:0.8rem;
	padding-left:1.5rem;
	padding-right:0.5rem;
}

/*-------------------------------------
Skills Page
--------------------------------------*/

.scrolling-wrapper-flexbox {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	flex-shrink: 0;
	overflow-x: auto;
}

.skills-container {
	width:100%;
}

.skills-page-container {
	width:100%;
	flex: 0 0 auto;
}

#MapSource, #ImageSource, #ImageSource_2, #ImageSource_3 {
	position:absolute;
	bottom: .8rem;
	right:.8rem;
	background:rgba(32,32,32,.9);
	width: 90%;
	padding:1rem;
}

#MapSource > p, #ImageSource > p, #ImageSource_2 > p, #ImageSource_3 > p{
	font-size: 0.85rem;
	line-height: 1.2rem;
}

.source_link {
	position: absolute;
	bottom:1rem;
	right:1rem;
}

/*-------------------------------------
Portfolio Page
-------------------------------------- */

.portfolio-pages {
	width:100%;
	max-width: 800px;
}

#portfolio_pages_wrapper {
	background:#404040;
	min-height:100vh;
	display:none;
	padding: 15px;
}

#portfolio-page {
	min-height: 100vh;
	height: auto;
	background-color:#404040;
	background-image: url(../images/side-image-2.jpg);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.portfolio-flex-container {
	display:flex;
	flex-wrap: wrap;
	margin: auto;
	justify-content: center;
}

.portfolio-headers {
	padding-top:10px;
	display:flex;
}

.portfolio-button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 10rem;
	height: 8rem;
	border: 1px solid black;
	padding: 0;
	margin: 0;
	background-position: bottom;
	background-size: 100% 80%;
	background-repeat: no-repeat;
	color: #989898;
	text-decoration:none;
	font-family: arial, sans-serif;
	font-size: .85rem;
	font-weight: 300;
	cursor: pointer;
}

.expand_icon {
	height: 22px;
	width: 22px;
	border:4px solid #202020;
	box-shadow:0 0 0 1px black; /* Hack to cover unwanted margin on chrome mobile  */
	padding:2px;
	background: url(../images/expand_grey_24.png) no-repeat;
	background-size:cover;
	background-color:#202020;
	margin-top:auto;
	align-self: flex-end;
}

.button_wrapper {
	padding:0;
	border:0;
	margin: .4rem;
	cursor: pointer;
}

#dismiss_book {
	z-index:570;
}

#mobile_content_wrapper {
	background-color: #404040;
	position: absolute;
	width:100%;
	z-index:100;
}

.mobile_content {
	padding: 0px;
}

.button_label {
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
	height: 2.5rem;
	background: #202020;
	box-shadow:0 0 0 1px black; /* Hack to cover unwanted margin on chrome mobile  */
	margin:0px;
}

.portfolio-button:hover {
	box-shadow: .5rem .5rem .25rem #202020;
	color: #C8C8C8;
	font-weight: bold;
}

.portfolio-button-m:hover {
	box-shadow: .5rem .5rem .25rem #202020;
	font-weight: bold;
	color: #C8C8C8;
}

.accordian-p {
	margin:0 0 0 1rem;
}

.accordion {
	margin-left:1.25rem;
}

#portfolio_column {
	background: linear-gradient(to right,
	rgba(64,64,64, 1) 0%,
	rgba(64,64,64, 0) 50%);
}

/*-------------------------------------
Hobby Page
--------------------------------------*/

.hobby-expand {
	padding:1px; /* Needed to prevent some quirk at the lower boundary */
}

#hobbies-page {
	height: auto;
	min-height: 100vh;
	background-color: #404040;
	background-image: url(../images/hobbies_space.jpg);
	background-position: right;
	background-repeat: no-repeat;
	background-size:100% 100%;
}

.hobbies_list {
	padding: 20px;
	max-width: 27.5rem;
}

#hobby_column {
	padding: 0;
	display:flex;
	justify-content:center;
}

.hobby-pages {
	width:100%;
	max-width: 50rem;
	min-height:95vh; padding:0;   /* min-height ensures the contact page doesn't scroll into view on mobile*/
}

/*-------------------------------------
Contact Page
--------------------------------------*/

.left_margin_30pc {
	text-align: left;
	margin-left:30%;     /*For the Header*/
}

.contact-main-column {
	background: rgb(64,64,64)
}

#contact-page {
	height: auto;
	min-height: 100vh;
	background-color: #404040;
	background-image: url(../images/remarkables.jpg);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#contact-page-column {
	padding: 0;
	padding-top: 15px;
}

.contact_p {
	max-width: 28rem;
	margin-left:1rem;
	padding-top:0;
	padding-bottom:.5rem;
}

/*-------------------------------------
Forms
--------------------------------------*/

label {
	color: #fdebd0;
}

.form-group > label{margin-bottom:0px;}

.form_button {
	color: rgb(235,189,104);
	background: rgb(29,34,90);
	border: 1px solid black;
}

input:hover {
	box-shadow: .5rem .5rem .25rem #202020;
	font-style: italic;
}

::placeholder {
	font-size:0.85rem;
	color:#909090;
}

textarea:hover {
	box-shadow: .5rem .5rem .25rem  #202020;
	font-style: italic;
}

textarea:active {
	outline: none;
	border: 1px solid #202020;
}

/*-------------------------------------
Handle Maps
--------------------------------------*/

#myMap {
	width: 100%;
	height:100%;
}

#myMap2 {
	width: 100%;
	height:15.625rem;
}

.expand_full_screen {
	height: 28px;
	width: 28px;
	border:none;
	padding:none;
	background: url(../images/expand_grey_24.png) no-repeat center;
	position: absolute;
	right: 10px;
	bottom: 5px;
}

.expand_full_screen:hover {
	height: 28px;
	width: 28px;
	border:none;
	padding:none;
	background: url(../images/expand_blue_24.png) no-repeat center;
}

#dismiss_full_screen_button_1 {
	display:none;
	position: absolute;
	right: 10px;
	top: 5px;
}

#dismiss_full_screen_button_2 {
	display:none;
	position: absolute;
	right: 10px;
	bottom: 0px;
}

.map_overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
	background: #404040;
	cursor: grab;
}

.map_container {
	display: flex;
	align-items: flex-start;
	width:100%;
	max-width: 50rem;
	height: 35rem;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	padding:0;
	margin:0;
	background-color:#404040;
}

.smaller_map_container {
	display: flex;
	align-items: flex-start;
	width: 100%;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	padding:0;
}

/* ----------------------------------
CONTENT STYLE
------------------------------------ */

#content {
    width: calc(100% - 12.5rem);
    padding: 0px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;

}

#content.active {
    width: 100%;
}

/* --------------------------------
MEDIAQUERIES
-------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -12.5rem;
	}
    #sidebar.active {
        margin-left: 0;
    }
    #content {
        width: 100%;
    }
    #content.active {
        width: calc(100% - 12.5rem);
    }
    #sidebarCollapse span {
        display: none;
    }

	.remove_for_mobile {
		display: none;
	}

	#contact-page{
		background-image: none;
	}
	#hobbies-page{
		background-image: none;
	}
	#skills-page{
		background-image: none;
	}
	#portfolio-page{
		background-image: none;
	}
	#resume-page{
		background-image: none;
	}
/* Decrease all font sizes on mobile */
/* default is 1rem or 16px */
	html {
	font-size: .9rem;
	}
}

/* Decrease the font size for narrow browsers (Like a 32 inch screen, covering only half)*/
@media (max-width: 1000px) {
	html {
		font-size: .9rem;
	}
}

/* Things to change on large screens */

@media (min-width: 768px) {
	#top_navbar {
		display: none;
	}

	#portfolio_column{
		min-height:100vh;
	}

	h2 {
		padding-top: 1rem;
	}

	#myMap2 {
		height:400px;
	}

	.contact_p{  /* Space the contact page paragraphs differently */
		width:80%;
		margin-left:1rem;
		padding-top:0.25rem;
		padding-bottom:.5rem;
	}

	#hobby_column  {
		background-image: url(../images/Beijing_Paris_Globe.gif);
		background-position: center;
		background-repeat: no-repeat;
		background-size:  70% auto;
	}


}

/* Things to change on screens bigger than small laptops */

@media (min-height: 700px) AND (min-width: 1500px){  /* made a bit less than 768, to allow for headers    */
	.portfolio-button {
	width: 12rem;
	height: 10rem;
	}
}

/* Things to change on screens smaller than small laptops (<1366 x 768) so the GIS portfolio book fits */

@media (max-height: 700px) {
	#dismiss_book{
		margin-top:0rem;
		background-color:rgba(0,0,0, 0.7);
		padding:.2rem;
	}
	.portfolio-headers{
		padding-top:0px;
		padding-bottom:10px;
	}
}

/* Things to change on FHD and larger */

@media (min-width: 1800px) {  /* transition on my laptop is at 1840px    */
	html {
		font-size: 1.1rem;
		}
	.header-block{
		height:75px;
	}
	h2:not(#landing-page-subheader){
		margin-bottom:2rem;
	}
}