/* PassionOne from fonts.google.com */
@font-face {
 font-family: PassionOne;
 src: url('fonts/PassionOne-Regular.ttf') format('truetype');
}

/* Roboto from fonts.google.com */
@font-face {
 font-family: Roboto;
 font-style: normal;
 font-weight: 400;
 src: url('fonts/Roboto-Regular.ttf') format('truetype');
}

// Comfortaa from fonts.google.com
@font-face {
 font-family: Comfortaa;
 font-style: normal;
 font-weight: 400;
 src: url('fonts/Comfortaa-Regular.ttf') format('truetype');
}

@font-face {
 font-family: Comfortaa;
 font-style: bold;
 font-weight: 650;
 src: url('fonts/Comfortaa-Regular.ttf') format('truetype');
}

/* Nunito-Black from fonts.google.com */
@font-face {
 font-family: Nunito-Black;
 font-style: normal;
 font-weight: 900;
 src: url('fonts/Nunito-Black.ttf') format('truetype');
}

@font-face {
 font-family: Nunito;
 font-style: normal;
 font-weight: 400;
 src: url('fonts/Nunito-Regular.ttf') format('truetype');
}

/* Roboto from fonts.google.com */
@font-face {
 font-family: Roboto;
 font-style: bold;
 font-weight: 900;
 src: url('fonts/Roboto-Black.ttf') format('truetype');
}

* {box-sizing:border-box}

h1 {
 font-family: PassionOne, sans-serif;
 font-size: 28pt;
 color: #5e2b97;
 text-align: center;
}

h2 {
 font-family: Nunito-Black, sans-serif;
 font-size: 18pt;
 color: black;
 text-align: left;
 font-weight: 900;
}

h3 {
 font-family: Nunito, sans-serif;
 font-size: 14pt;
 color: black;
 font-weight: 600;
 margin-block-start: 25px;
 margin-block-end: 0px;
}

h4 {
 font-family: Nunito, sans-serif;
 font-size: 11pt;
 color: dark-grey;
 font-weight: 400;
 margin-block-start: 25px;
 margin-block-end: 0px;
}

p, li, td, input {
 font-family: Comfortaa, sans-serif;
 font-size: 12pt;
}

th {
 font-family: Nunito, sans-serif;
 font-size: 10pt;
 font-weight: 900;
 border-bottom-style: solid;
 border-bottom-width: thin;
}

table {
 border-style: solid;
 border-width: thin;
}

li {
 padding-bottom: 10px;
}

a {
 font-family: inherit;
 font-sizeZ: inherit;
}

.googleMapsRed {
 color: rgb(219, 68, 54);
}

.googleMapsBlue {
 color: rgb(65, 134, 240);
}

.navbar {
 font-family: Comfortaa, sans-serif;
 font-size: 9pt;
 text-align: right;
}

#link {
 text-decoration: none;
 color: black;
 padding: 5px;
}

/* Was previously set to background color rgb(255, 225, 255) to fit the purplish theme.
 * Might be too much purple. */
#link:hover {
 text-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5);
}

/* Container */
.slideshow-container {
 max-width: 1000px;
 position: relative;
 margin: auto;
}

.slides {
 display: none;
}

.pic {
 text-align: center;
}

.pic > img {
 border-radius: 15px;
 box-shadow: 7px 7px 15px rgb(192, 192, 192);
}

.prev, .next {
 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: orange;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;
}

/* next goes to the right */
.next {
 right: 0;
 border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
 background-color: rgba(0, 0, 0, 0.8);
}

/* caption. presented on a grey shadow so it's more readable on
 * low-contrast image backgrounds. */
.text {
 color: yellow;
 font-family: Roboto, sans-serif;
 text-shadow: 4px 4px 8px #404040, -4px -4px 8px #404040, 4px -4px 8px #404040, -4px 4px 8px #404040;
 font-weight: 900;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 8px;
 width: 100%;
 text-align: center;
}

/* This is for the "2 / 7" number that indicates where we are in the
 * carousel. Not currently being used. */
.number {
 color: #404040;
 font-size: 12px;
 padding: 8px 12px;
 top: 0;
 position: absolute;
}

.dot {
 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 10px 1px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
}

.active, .dot:hover {
 background-color: #717171;
}

.fade {
 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;
}

@-webkit-keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
}

@keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
}