html {
  font-family: Source Sans Pro, Verdana, sans-serif;  	/* changed font family */
  /* font-size: 16px;		/* changed from 15px */
  line-height: 1.5;
  font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Source Sans Pro, Verdana, sans-serif;	/* changed font family */
  font-weight: 400;
  line-height: 1;
  /* margin: 20px 0;  */
}

a {
  font-family: Source Sans Pro, Verdana, sans-serif;	/* changed font family */
}

.w3-ul li{padding:8px 0px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}

/* end of code to override w3.css */

:root {
  	--photo_max_height: 650px;
  	--photo_max_width: 650px; 
  	--thumb_max_height: 300px;   	
  	--thumb_max_width: 300px; 
  	--f30: 187.5%;
  	--f24: 150%;
  	--f20: 125%;
  	--f19: 118.75%;
  	--f18: 112.5%;
  	--f17: 106.25%;
  	--f16: 100%;					/* base font size */
  	--f15: 93.75%;
  	--f14: 87.5%;
  	--f13: 81.25%;
  	--deep-red: #cc0000;			/* deep red matching logo given white background */ 
  	--deep-blue: #0F52BA;			/*  sapphire blue  */	

  	--dark-grey: #8f8f8f;
  	--medium-grey: #a3a3a3;
  	--light-grey: #e0e0e0;
  	--lightest-grey: #f0f0f0;	
}

.body {
  /* Location of the image */
  /* max-width:1000px; */
  font-size: 16px;
}


.font-30 {font-size: var(--f30);}
.font-24 {font-size: var(--f24);}
.font-20 {font-size: var(--f20);}
.font-19 {font-size: var(--f19);}
.font-18 {font-size: var(--f18);}
.font-17 {font-size: var(--f17);}
.font-16 {font-size: var(--f16);}
.font-15 {font-size: var(--f15);}
.font-14 {font-size: var(--f14);}
.font-13 {font-size: var(--f13);}


.padding-12{padding-left:12px!important;padding-right:12px!important;padding-top:12px!important;padding-bottom:12px!important}
.padding-top-12{padding-top:12px!important}
.padding-left-right-36{padding-left:36px!important;padding-right:36px!important}

.margin-left-8{margin-left:8px!important}
.margin-right-8{margin-right:8px!important}

.border-bottom{border-bottom:2px solid #ccc!important}

.navbar {
	background-color: #ffffff;		/* white */
	width: 100vw;
  	/* max-width:800px; */
}

.card-header {
	background-color: var(--dark-grey);		
	color: white;
}

.card-body {background-color: #F5F5F5;}  /* light gray */

.skill-header {
	background-image: url('/images/skills.jpg');		
	background-color: white;
}

.skill-body {
	background-color: var(--lightest-grey);
	color: black;
}  

.button {
	background-color: darkgray;		
	color: white;
}

.deep-red {
	background-color: var(--deep-red);
	color: white;
}

.deep-blue {
	background-color: var(--deep-blue);
	color: white;
}

.topmargin-sizing {
		margin-top: 62px;	/* spaces works so it doesnt hide under navbar */	
}

.cell-thumb {
	height: calc(100vw/3);
	line-height: calc(100vw/3);
	width: calc(100vw/3);
}

.thumbnail {
	height: calc(calc(100vw/3) - 8px);
	max-height: var(--thumb_max_height);
	width: calc(calc(100vw/3) - 8px);
	max-width: var(--thumb_max_width);
	object-fit: contain;
}

.slideshow-container {
	height: 100vw;
	max-height: var(--photo_max_height);
	width: 100vw;
	max-width: var(--photo_max_width);
}

.slideshow-photos {
	height: calc(100vw - 32px);
	max-height: var(--photo_max_height);
	width: calc(100vw - 32px);
	max-width: var(--photo_max_width);
}

.ss-button {
	/* height: calc(100vw - 60px);  */
	/* max-height: var(--photo_max_height);	*/
	height: 40px;
	width: 30px;
	/* position: relative;	*/
}

.button-ss {
	height: 40px;
	width: 30px;	
}

/*
.vertical-center {		
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
*/

.photo {
	height: calc(100vw - 32px);
	max-height: var(--photo_max_height); 
	width: calc(100vw - 32px);
	max-width: var(--photo_max_width); 
	object-fit: contain;
}

.photo-info {
	width: calc(100vw - 92px);								/* minus button's widths + left & right margins */
	max-width: calc(var(--photo_max_width) - 60px); 		/* minus button's widths */
}

.hero-section {
	height: calc((100vh - 180px)/3);	
	max-height: 250px;
}

.hero-image {
  background-image: url("/images/skills.jpg");
  background-color: #cccccc;
  height: calc(.25 * calc(calc(100vw - 48px)/3));						/* maintain 1/4 aspect ratio by determining dynamic width available for photo x .75 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: black;
}

.font-banner {font-size: var(--f18);}
.font-headline {font-size: var(--f17);}
.font-title {font-size: var(--f14);}
.font-body {font-size: var(--f13);} 

	
@media only screen and (max-width: 599px) {				/* small screens only */
	.hero-image {
  		height: calc(.25 * calc(100vw - 16px));			/* maintain 1/4 aspect ratio by determining dynamic width available for photo x .75 */
 	}				
}


/* breakpoints for hamburger versus menu items */

@media only screen and (max-width: 643px) {
	.display-medium-large {		
		display: none;
	}				
}

@media only screen and (min-width: 644px) {   
	.display-small {			
		display: none;			
	}								
}