/********************************************

PAGE STYLES: index.html

********************************************/

#projects {

	/* All screens smaller than Desktop */
	@media only screen and (max-width: 992px) {
		ol {
			display: flex;
			flex-flow: column nowrap;
			gap: 50px;
			list-style: decimal-leading-zero;
			list-style-position: inside;
			li {
				display: flex;
				flex-flow: column nowrap;
				gap: 20px;
			}
		}
	}
	/* Desktop screens */
	@media only screen and (min-width: 992px) {
		ol {
			display: flex;
			flex-flow: column nowrap;
			gap: 75px;
			list-style: decimal-leading-zero;
			list-style-position: inside;
			img.left {
				float: left;
				height: 40vh;
				padding-right: 50px;
				padding-bottom: 50px;
			}
			img.right {
				float: right;
				height: 40vh;
				padding-left: 50px;
				padding-bottom: 50px;
			}
		}
	}
}

/********************************************

PAGE STYLES: about.html

********************************************/

#experience {
	div.container {
		ul.timeline {
			display: flex;
			flex-flow: column nowrap;
			gap: 20px;
			list-style: none;
			border-left-color: var(--blue-med);
			border-left-style: dashed;
			border-left-width: 2px;
			li.item {
				padding:0px 25px;
				h2,h3,h4,p { margin:0;padding:0; }
				div.dot { position: relative; top:25px; left:-71px; height:10px; width:10px; border-radius:50%; background:var(--blue-main); }
			}
		}
	}
}

#education {
	div.container {
		ul.timeline {
			display: flex;
			flex-flow: column nowrap;
			gap: 20px;
			list-style: none;
			border-left-color: var(--blue-med);
			border-left-style: dashed;
			border-left-width: 2px;
			li.item {
				padding:0px 25px;
				h2,h3,h4,p { margin:0;padding:0; }
				div.dot { position: relative; top:25px; left:-71px; height:10px; width:10px; border-radius:50%; background:var(--blue-main); }
			}
		}
	}
}


/********************************************

PAGE STYLES: pantrypal.html

********************************************/

#pantrypalPrototype {
	div.carousel-pantrypal {
		height: 50vh;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		img.carousel-slide {
			
		}
	}
}

#carousel-pantrypal-01 { z-index: 1; opacity: 0.3; position: absolute; width: 200px; height: 100px; left: 200px}
#carousel-pantrypal-02 { z-index: 2; opacity: 0.6; position: absolute;width: 400px; height: 200px; left: 300px}
#carousel-pantrypal-03 { z-index: 3; opacity: 1.0; width: 600px; height: 300px; }
#carousel-pantrypal-04 { z-index: 2; opacity: 0.6; position: absolute; width: 400px; height: 200px; right: 300px}
#carousel-pantrypal-05 { z-index: 1; opacity: 0.3; position: absolute; width: 200px; height: 100px; right: 200px}

/********************************************

STYLES BY ELEMENT ID

********************************************/

#indexHero {
	min-height: 45vh;
	background: no-repeat right url("img/index_heroBG.png");
}

#contact {
	background: no-repeat right url("img/index_contactBG.png");
}

#pantrypalHero {
	min-height: 45vh;
	background: no-repeat right url("img/pantrypal_header.png");
}