/* Stylesheet for rowanbixler.com */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

html {
	scroll-behavior: smooth;
}

body {
	padding-right: 0;
	padding-left: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
}

header {
	max-width: 100%;
}

/* Top Banner */
	.banner {
		display: inline;
		width: 320px;
		max-width: 96%;
		height: auto;
		float: left;
		margin-top: 1em;
		margin-left: 1em;
		margin-bottom: 0.5em;
	}

	.toolbar {
		height: 98px;
		width: 100%;
		display: inline-block;
		background-color: rgba(255,255,255,0.8);
		backdrop-filter: saturate(180%) blur(20px);  
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		position: fixed;
		top: 0;
		z-index: 2;
		left: 0;
		transition: 0.3s;
	}

	.toolbox {
		float: right;
		display: inline-block;
		vertical-align: center;
		margin-top: 32px;
		margin-right: 1.5em;
		transition: 0.4s;
	}

	.toolicon {
		padding-left: 2em;
	}

	.toolicon img {
		width: 32px;
		height: 32px;
	}

	/* Tooltip container */
		.tooltip {
			position: relative;
			display: inline-block;
		}

		/* Tooltip text */
		.tooltip .tooltiptext {
			display: inline;
			visibility: hidden;
			width: 100px;
			background-color: #2b2b2b;
			color: #fff;
			text-align: center;
			padding: 5px 0;
			border-radius: 6px;
			font-family: 'Open Sans', sans-serif;

			/* Position the tooltip text */
			position: absolute;
			z-index: 1;
			top: 110%;
			left: 25%;
			margin-left: -17px;

			/* Fade in tooltip */
			opacity: 0;
			transition: opacity 0.4s;
		}

		/* Tooltip arrow */
		.tooltip .tooltiptext::after {
			content: "";
			position: absolute;
			bottom: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: transparent transparent #2b2b2b transparent;
		}

		/* Show the tooltip text when you mouse over the tooltip container */
		.tooltip:hover .tooltiptext {
			visibility: visible;
			opacity: 1;
		}
	
button {
	color: inherit;
	background-color: inherit;
	border: none;
}

button:active {
	border: none;
}

/* Desktop Nav Bar */
	.navbar {
		float: right;
	}

	.dropbtn {
		background-color: rgba(30, 173, 195, 0.6);
		/* Experimental web feature (Can be viewed in Microsoft Edge) */
		backdrop-filter: blur(10px);  
		-webkit-backdrop-filter: blur(10px);
		color: white;
		padding: 16px;
		font-size: 16px;
		border: none;
		cursor: pointer;
		font-family: 'Open Sans', sans-serif;
		transition: 0.4s;
	}

	.dropbtn a {
		text-decoration: none;
		color: white;
	}

	.dropdown {
		position: relative;
		display: inline-block;
		transition: 0.4s;
	}

	.dropdown-content {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		right: 0;
		background-color: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.dropdown-content a {
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		transition: 0.4s;
		font-family: 'Open Sans', sans-serif;
	}

	.dropdown-content a:hover {
		background-color: #f1f1f1;
	}

	.dropdown:hover .dropdown-content {
		visibility: visible; 
		opacity: 1; 
		transition: visibility 0s, opacity 0.4s linear;
	}

	.dropdown:hover .dropbtn {
		background-color: #1EADC3;
	}

	.navheader {
		min-height: 380px;

		/* Center and scale the image nicely */
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	
		/* Needed to position the navbar */
		position: relative;
		margin-top: 98px;
	}

#main {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

h1 {
	font-size: 50px;
	font-family: 'Open Sans', sans-serif;
}

h2 {
	font-family: 'Open Sans', sans-serif;
}

p {
	font-size: 1.15em;
	font-family: 'Open Sans', sans-serif;
}

ul {
	font-size: 1.15em;
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
}

article {
	display: inline-block;
	padding-top: 5em;
	padding-bottom: 5em;
	width: 100%;
	overflow: auto;
}

.right-article, .left-article{
	width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.right-article-img {
	display: inline-block;
	float: right;
	margin-left: 2em;
	max-width: 100%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	margin-bottom: 2em;
	max-width: 50%;
}

.left-article-img {
	display: inline-block;
	float: left;
	margin-right: 2em;
	max-width: 100%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	margin-bottom: 2em;
	max-width: 50%
}

.background-img-article {
	color: #FFFFFF;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.background-img-article p {
	margin-left: 2em;
	margin-right: 2em;
}

/* Diagram */
	.background-img-diagram {
		color: #FFFFFF;
		text-align: center;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	}

	.diagram-element a {
		text-decoration: none;
		color: #FFFFFF;
		font-family: 'Open Sans', sans-serif;
		transition: 0.4s;
		font-weight: bold;
	}

	.diagram-label {
		text-align: left; 
		margin-left: 5%; 
		margin-right: 85%;
		padding-bottom: 3em;
	}

	.diagram-number {
		padding: 1.5em;
		font-size: 1em;
		border: solid #FFFFFF;
		border-radius: 50px;
		background-color: rgba(30, 173, 195, 0.8);
		/* Experimental web feature (Can be viewed in Microsoft Edge) */
		backdrop-filter: blur(10px);  
		-webkit-backdrop-filter: blur(10px);
	}

	.diagram-element a:hover {
		color: #1EADC3;
	}

	.diagram-number:hover {
		border: solid #1EADC3;
		background: rgba(255, 255, 255, 1);
	}

	.diagram-label:hover + .diagram-number {
		color: #1EADC3;
		border: solid #1EADC3;
		background: rgba(255, 255, 255, 1);
	}

.whitebutton {
	display: inline-block; 
	padding: 10px 20px; 
	border: solid #ffffff;
	border-width: 2px;  
	font-weight: bold;
	letter-spacing: 0.0625em; 
	background: #ffffff00; 
	color: #ffffff; 
	text-decoration: none;
	font-family: 'Open Sans', sans-serif;
	transition: 0.4s;
}

.whitebutton:hover, .blackbutton:hover {
	border: solid #1EADC3;
	color: #1EADC3;
	border-width: 2px;
}

.blackbutton {
	display: inline-block; 
	padding: 10px 20px; 
	border: solid #000000; 
	border-width: 2px; 
	font-weight: bold;
	letter-spacing: 0.0625em; 
	background: #ffffff00; 
	color: #000000; 
	text-decoration: none;
	font-family: 'Open Sans', sans-serif;
	transition: 0.4s;
	cursor: pointer;
}

/*Accordion style rules*/
	.accordion {
	cursor: pointer;
	display: inline-block; 
	padding: 10px 20px; 
	border: solid #000000; 
	border-width: 2px; 
	font-weight: bold;
	letter-spacing: 0.0625em; 
	background: #ffffff00; 
	color: #000000; 
	text-decoration: none;
	font-family: 'Open Sans', sans-serif;
	transition: 0.4s;
	font-size: 1.15em;
	}

	.accordion:hover {
	border: solid #1EADC3;
	color: #1EADC3;
	border-width: 2px;
	}

	.panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	}

/*Timeline style rules*/
	.timeline, .timeline-container, .timeline-left, .timeline-right, .timeline-content {
		box-sizing: border-box;
	}

	/* The actual timeline (the vertical ruler) */
	.timeline {
		position: relative;
		max-width: 1200px;
		margin: 0 auto;
	}

	/* The actual timeline (the vertical ruler) */
	.timeline::after {
		content: '';
		position: absolute;
		width: 6px;
		background-color: #000000;
		top: 0;
		bottom: 0;
		left: 50%;
		margin-left: -3px;
	}

	/* Container around content */
	.timeline-container {
		padding: 10px 40px;
		position: relative;
		background-color: inherit;
		width: 50%;
	}

	/* The circles on the timeline */
	.timeline-container::after {
		content: '';
		position: absolute;
		width: 25px;
		height: 25px;
		right: -17px;
		background-color: white;
		border: 4px solid #1EADC3;
		top: 15px;
		border-radius: 50%;
		z-index: 1;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	}

	/* Place the container to the left */
	.timeline-left {
		left: 0;
	}

	/* Place the container to the right */
	.timeline-right {
		left: 50%;
	}

	/* Add arrows to the left container (pointing right) */
	.timeline-left::before {
		content: " ";
		height: 0;
		position: absolute;
		top: 22px;
		width: 0;
		z-index: 1;
		right: 30px;
		border: solid #1EADC3;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #1EADC3;
	}

	/* Add arrows to the right container (pointing left) */
	.timeline-right::before {
		content: " ";
		height: 0;
		position: absolute;
		top: 22px;
		width: 0;
		z-index: 1;
		left: 30px;
		border: solid #1EADC3;
		border-width: 10px 10px 10px 0;
		border-color: transparent #1EADC3 transparent transparent;
	}

	/* Fix the circle for containers on the right side */
	.timeline-right::after {
		left: -16px;
	}

	/* The actual content */
	.timeline-content {
		padding: 20px 30px;
		background-color: white;
		position: relative;
		border-radius: 6px;
		border: solid #1EADC3;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	}

	.timeline-content img {
		display: block;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
	}

	/* Media queries - Responsive timeline on screens less than 600px wide */
	@media screen and (max-width: 600px) {
	/* Place the timelime to the left */
	.timeline::after {
		left: 31px;
	}

	/* Full-width containers */
	.timeline-container {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}
	
	/* Make sure that all arrows are pointing leftwards */
	.timeline-container::before {
		left: 60px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent white transparent transparent;
	}

	/* Make sure all circles are at the same spot */
	.timeline-left::after, .timeline-right::after {
		left: 15px;
	}
	
	/* Make all right containers behave like the left ones */
	.timeline-right {
		left: 0%;
	}

	} /*End of Timeline rules*/

.cards{
	width: 95%;
	display: block;
	margin: 0 auto;
	overflow: auto;
	text-align: center;
}

/* Profile Cards */
	.profilecard {
		display: inline-block;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		margin: 2.5em;
		width: 330px;
		max-width: 95%;
		text-align: center;
		min-height: 600px;
		overflow: auto;
	}

	.profilecard h2, .profilecard p {
		padding-left: 1em;
		padding-right: 1em;
	}

	.profileimg {
		width: 100%;
	}

	.jobtitle {
		color: grey;
		font-size: 15px;
	}

	.profilelink {
		height: 30px;
		width: 30px;
		cursor: pointer;
		margin-bottom: 10px;
	}

/* App Cards */
	.appcard {
		display: inline-block;
		border: solid lightgray; 
		border-width: 2px;
		border-radius: 8px;
		margin: 1em;
		width: 300px;
		max-width: 75%;
		height: 200px;
		padding: 2em;
		text-decoration: none;
		color: black;
		text-align: left;
	}

	.appcard:hover {
		border: solid #1EADC3; 
		border-width: 2px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		transition: 0.2s;
		cursor: pointer;
	}

	.appicon {
		width: 32px;
		height: 32px;
	}


/* Footer */
	footer {
		width: 95%;
		margin-top: 2em;
		margin-left: auto;
		margin-right: auto;
		padding-top: 2em;
		padding-bottom: 2em;
		border-top: solid #1EADC3;
	}

	footer a {
		text-decoration: none;
		color: #1EADC3;
		font-size: 12px;
		font-family: 'Open Sans', sans-serif;
		margin-right: 2em;
		text-align: left;
		padding-bottom: 1em;
	}	

	footer a:hover {
		color: #62788d;
	}

	footer p {
		font-size: 12px;
		font-family: 'Open Sans', sans-serif;
		text-align: right;
	}

.desktop {
	display: inline;
}

.tablet {
	display: none;
}

.mobile {
	display: none;
}



/* MOBILE */
@media screen and (max-width: 450px) {

	body {
		padding: 0;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
	}
	
	#main {
		width: 100%;
		max-width: 100%;
		margin-top: 3em;
		overflow-x: hidden;
	}

	.banner {
		display: block;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}

	.toolbox {
		margin-top: 0px;
		padding-right: 2.5%;
	}

	.right-article-img, .left-article-img {
		float: none;
		box-shadow: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}

	.right-article, .left-article {
		margin-top: 2em;
	}

	.article-text {
		margin-left: 2.5%;
		margin-right: 2.5%;
	}

	/* Profile Cards */
		.profilecard {
			display: block;
			margin-left: auto;
			margin-right: auto;
			float: none;
		}

	/* App Cards */
		.appcard {
			display: block;
			margin-left: auto;
			margin-right: auto;
			float: none;
		}
	
	footer {
		padding-left: 2.5%;
		padding-right: 2.5%;
	}

	footer p {
		margin-right: 2em;
	}

	.desktop {
		display: none;
	}

	.tablet {
		display: none;
	}

	.mobile {
		display: inline;
	}

}