/*

COLOURS
FFD6FB - light pink
FFAFF7 - pink
FFDA18 - gold
FF8A00 - orange
A81EE9 - purple
3C1362 - dark purple for text

*/

body, h2, h3, .nav-link, .dropdown-item {
	color: #3C1362;
}

.thin-underline {
	border-bottom: 1px solid currentColor;
	display: inline-block;
	line-height: 1;
}

.thin-underline-pink {
	border-bottom: 1px solid #A81EE9;
	display: inline-block;
	line-height: 1;
}

.footer {
	background-color: #FFAFF7;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: 2rem;
	padding-right: 2rem;
}

.footer-left {
	text-align: left;
	font-weight: lighter;
	vertical-align: middle;
	font-size: 0.9em;
}

.footer-right {
	text-align: right;
	font-weight: lighter;
	vertical-align: middle;
	font-size: 0.9em;
}

@media only screen and (max-width: 768px) {
	body .row.footer {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	body .footer-left {
		text-align: center;
		font-size: 0.9em;
		margin-bottom: 0.25em;
	}
	body .footer-right {
		text-align: center;
		font-size: 0.9em;
	}
}

@media only screen and (max-width: 374px) {
	body .footer-left {
		font-size: 0.7em;
		margin-bottom: 0.25em;
	}
	body .footer-right {
		font-size: 0.7em;
	}
}

.footer-icon {
	color: #3C1362;
	vertical-align: middle;
}

.footer-icon:hover {
	color: #FFD6FB;
}

.navbar-text {

}

/*********************************
 ---------------------------------

IMAGE CAROUSEL STUFF

---------------------------------
*********************************/

.main-carousel {

}

.carousel-image {
  display: block;
  height: 50vh;
  width: auto;
  /* set min-width,
     allow images to determine cell width */
  min-width: 100px;
  max-width: 100vw;
  min-height: 200px;
  margin-right: 5px;
  /* vertically center */
  /*
  top: 50%;
  transform: translateY(-50%);
  */
  border-radius: 4px;
  object-fit: contain;
}

.main-carousel.is-fullscreen .carousel-image {
  height: 100vh;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin-left: 50vw;
  margin-right: 50vw;
}

.flickity-enabled.is-fullscreen { z-index: 1050; }

/* smaller, dark, rounded square */
.flickity-button {
  background: #333;
}
.flickity-button:hover {
  background: #FFAFF7;
}

.flickity-prev-next-button {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
/* icon color */
.flickity-button-icon {
  fill: white;
}

@media only screen and (max-width: 768px) {
	body .carousel-image {
		height: 50vh;
		width: auto;
		max-height: 250px;
	}
}

@media only screen and (max-width: 600px) {
	body .carousel-image {
		height: 40vh;
		width: auto;
		max-height: 150px;
	}
	body .flickity-prev-next-button {
		width: 30px;
		height: 30px;
	}
}

/*********************************
 ---------------------------------

INLINE LINK STYLING

---------------------------------
*********************************/

.inline-link {
	color: #3C1362;
	text-decoration-style: dotted;
}

.inline-link:hover {
	color: #A81EE9;
}

/*********************************
 ---------------------------------

HEADER ICON STYLING

---------------------------------
*********************************/

.header-icon {
	color: #FFD6FB;
	vertical-align: middle;
}

.header-icon:hover {
	color: #FFAFF7;
}

/*********************************
 ---------------------------------

NAV AND DROPDOWN STYLING

---------------------------------
*********************************/

.nav-link:hover {
	color: #FFD6FB;
}

.dropdown-item:hover {
	background-color: #FFAFF7;
	border-radius: 4px;
}

.dropdown-menu {
	border: 1px solid #3C1362;
	max-width: 100px; 
	padding: 3px;
}

/*********************************
 ---------------------------------

ANIMATE DROPDOWN IN NAV

---------------------------------
*********************************/

.dropdown-menu--animate.collapsing {
    display: block;
}

.dropdown-menu--animate {
    opacity: 0.8;
    height: 0;
    display: block;
    transition: all 0.3s;
    overflow: hidden;
    transform-origin: top;
    transform: scale(1,0);
}

.dropdown-menu--animate.show {
    opacity: 1;
    height: auto;
    transition: all 0.3s;
    transform: scale(1);
}

/*********************************
 ---------------------------------

HAMBURGER ICON COLOUR CHANGE

---------------------------------
*********************************/

/*
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#3C1362' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
*/

.custom-toggler.navbar-toggler {
  border-color: #3C1362;
}

/*********************************
 ---------------------------------

MIGHT DELETE

---------------------------------
*********************************/

.hero-image {
	object-fit: cover;
	/* max-width: 700px;*/
	min-width: 300px;
	max-height: 200px;
	width: 80vw;
	height: 70vw;
	border-radius: 5px;
}

/*********************************
 ---------------------------------

SQUARE IMAGE W/ BORDERS

---------------------------------
*********************************/

.rounded-square-cover {
	object-fit: cover;
	max-width: 300px;
	max-height: 300px;
	min-width: 175px;
	min-height: 175px;
	width: 25vw;
	height: 25vw;
	position: relative;
	border-radius: 50px;
}

.colourful-borders {
	border: 3px solid #A81EE9;
	box-shadow:
		0 0 0 2px #FFDA18,
		0 0 0 3px #FF8A00,
		0 0 0 5px #FFAFF7;
	margin:5px;
}

/*********************************
 ---------------------------------

IMAGE FORMATTING FOR SECTION BREAK

---------------------------------
*********************************/

.section-break {
	width: 350px;
	height: 27px;
	margin: 30px;
}

/*********************************
 ---------------------------------

MISC COLOUR DEFINITIONS

---------------------------------
*********************************/

.custom-text-colour {
	color: #3C1362;
}

.bg-custom-light-pink {
	background-color: #FFD6FB;
}

.custom-colour-light-pink {
	color: #FFD6FB;
}

.bg-custom-pink {
	background-color: #FFAFF7;
}

.custom-colour-pink {
	color: #FFAFF7;
}

.bg-custom-gold {
	background-color: #FFDA18;
}

.custom-colour-gold {
	color: #FFDA18;
}

.bg-custom-orange {
	background-color: #FF8A00;
}

.custom-colour-orange {
	color: #FF8A00;
}

.bg-custom-purple {
	background-color: #A81EE9;
}

.custom-colour-purple {
	color: #A81EE9;
}