/* Caption text */
.text {
  color: #f2f2f2;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 8px;
  padding: 4px 8px;
  position: relative;
  left: 25%;
  top: 10%;
  width: 50%;
  text-align: center;
  background: rgba(0,0,0,0.8);
  border-radius: 3pt;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: white;
    color: #444;
    cursor: pointer;
	
    padding: 18pt;
    width: 100%;
    text-align: left;
	
	font-size: large;
	font-variant: small-caps;
	font-weight: bold;
	
    border: none;
    outline: none;
	
    transition: 0.4s;
	border-radius: 10pt 10pt 0pt 0pt;
}

.accordion img {
	width: 50pt;
	padding-right: 10pt;
	vertical-align: middle;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.activeservice, .accordion:hover {
    background-color: #a4d247;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    overflow: hidden;
	max-height: 0;
	transition: max-height 0.2s ease-out; /* Determines how fast the panel slides out when the accordion button is pressed. Change the float value to change the speed in seconds. */
	animation: fadeEffect 0.5s; /* Determines how fast the panel fades in after the accordion button is pressed. Change the float value to change the speed in seconds. */
	border-radius: 0pt 0pt 0pt 25pt;
}

/* Identifier that allows specific editing of the "Energeo" logo that lies at the beginning of each panel */
#energeo {
	width: 40pt;
	float: left;
	padding: 0pt 10pt 0pt 5pt;
}

/* Ensures that all unordered lists in the panel are offset from the left border of the panel. */
.panel ul {
	padding-left: 30pt;
}

/* Styles all figures within the panel. Some of these settings might seem strange, but they've been optimised to work with the slideshow containers, so changing them might result in unexpected consequences. */
.panel figure {
	max-width: 300pt;
	width: 100%;
	max-height: 200pt;
	height: 100%;
	margin: auto;
	position: relative;
	float: right;
	padding: 8pt;
	display: table; /* Forces text to wrap around the figure caption as well as the figure */
}

.panel figure img {
	border-radius: 5pt; /* Rounds the corners of all images in figures */
}

/* Italicises and centres all figure captions. */
.panel figcaption {
	font-style: italic;
	text-align: center;
}

/* Forces slideshow containers within the panel to take up the entire panel width. */
.panel slideshow-container {
	width: 100%;
}

/* Styles the iframes present within particular panels (important for the projects page). */
.panel iframe {
	border-radius: 5pt;
	max-width: 100%;
}

/* Makes all images within slideshow container have rounded corners. */
.slideshow-container img {
	border-radius: 5pt;
}

/* Defines the animation called "fadeEffect", which changes the opacity of a panel from 0 to 1. */
@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}

/* Displays a plus sign after the accordion button is created. */
.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: large;
    color: #777;
    float: right;
    margin-left: 5px;
}

/* Displays a minus sign after the accordion button is pressed. */
.activeservice:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* Main container that determines a maximum width for all elements and scales them up and down based on screen size. */
.centralcontainer {
	position: relative;
	max-width: 800pt;
	margin-left: auto;
	margin-right: auto;
}