:root {
  --dark: #000000;
  --dark-gold: #886853;
  --light-gold: #ae8e7a;
  --dark-grey: #67686a;
  --med-grey: #808184;
  --light-grey: #ebebec;
  --edmonton-grey:  #717374;
}

/* ////////////////// Text & Stuff ////////////////// */
html {
}

body {
  font-family: "Open Sans", sans-serif;
  color: var(--dark-grey);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans", sans-serif;
  /*font-family: "Prata", serif;*/
  color: var(--dark-gold);
}
.edmonton h1,
.edmonton h2,
.edmonton h3,
.edmonton h4,
.edmonton h5,
.edmonton h6 {
  font-family: "Open Sans", sans-serif;
  /*font-family: "Prata", serif;*/
  color: var(--edmonton-grey);
}
h1 {
  font-size: 48px;
}
h2 {
  font-size: 38px;
}
h3 {
  font-size: 29px;
}
h4 {
  font-size: 21px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 16px;
}
.subhead, .subhead2 {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 20px;
}
.subhead::before,
.subhead::after {
    display: inline-block;
    content: "";
    border-top: .1rem solid #ae8e7a;;
    width: 4rem;
    margin: 0 0.5rem;
    transform: translateY(-0.45rem);
}
.edmonton .subhead::before,
.edmonton .subhead::after {
    border-top: .1rem solid #717374;
}
a, a:visited, a.nav-link, a.nav-link:visited{
  color: var(--dark-gold);
  transition: 0.3s;
}

.edmonton a, a:visited, .edmonton a.nav-link, .edmonton a.nav-link:visited{
  color: rgba(0,0,0,.55);
}
a:hover, a.nav-link:hover{
  color: var(--dark);
  transition: 0.3s;
}
label {
  color: var(--dark);
}
.flex-spacer {
  height: 7vh;
}
.mobile-flex-spacer {
  height: 3vh;
}
.bg-light {
    --bs-bg-opacity: 1;
    background-color: #ffffff!important;
}

/* ////////////////// Buttons ////////////////// */
.btn-black, .btn-black:visited {
  background-color: var(--dark);
  color: #ffffff;
  border: 0;
  border-radius: 0;
  min-width: 200px;
  font-size: 22px;
}
.btn-black:hover, .btn-black:active, .btn-black:focus {
  background-color: var(--dark-gold);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.edmonton .btn-black:hover, .edmonton .btn-black:active, .edmonton .btn-black:focus {
  background-color: var(--edmonton-grey);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.btn-gold, .btn-gold:visited {
  background-color: var(--dark-gold);
  color: #ffffff !important;
  border: 0;
  border-radius: 0;
  min-width: 200px;
  font-size: 22px;
}
.edmonton .btn-gold, .edmonton .btn-gold:visited {
  background-color: var(--edmonton-grey);
}
.edmonton .btn-gold:hover, .edmonton .btn-gold:active, .edmonton .btn-gold:focus {
  background-color: var(--dark);
}

.btn-gold:hover, .btn-gold:active, .btn-gold:focus {
  background-color: var(--dark);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.btn-edit, .btn-edit:visited {
	position: fixed;
	transform: rotate(-90deg);
	right: 0;
	top:300px;
	z-index: 999 !important;
  background-color: var(--dark-gold);
  color: #ffffff !important;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  padding: 10px;
  text-decoration: none;
}
.edmonton .btn-edit, .edmonton .btn-edit:visited {
  background-color: var(--edmonton-grey);
}
.btn-edit:hover {
  background-color: var(--dark);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.accordion-button:not(.collapsed) {
  color: var(--dark-gold);
  background-color: #d7c4b9;
}
.edmonton .accordion-button:not(.collapsed) {
  color: var(--edmonton-grey);
}
.accordion-button:focus {
  border-color: rgba(174, 142, 122, 0.5) !important;
}

		.btn-header-cal,  .btn-header-cal:visited{
			min-width: 280px; 
            padding: 40px; 
            margin: 20px;
            background-color: var(--dark-gold);
 			color: #ffffff !important;
  			border: 0;
  			border-radius: 0;
  			font-size: 22px;
 		}
 		.btn-header-ed,  .btn-header-ed:visited{
			min-width: 280px; 
            padding: 40px; 
            margin: 20px;
            background-color: var(--edmonton-grey);
 			color: #ffffff !important;
  			border: 0;
  			border-radius: 0;
  			font-size: 22px;
 		}
        .btn-header-cal:hover, .btn-header-cal:focus, .btn-header-ed:hover, .btn-header-ed:focus {
          background-color: var(--dark);
        }

/* ////////////////// Headers ////////////////// */

.mobile-splash-header {
  position: relative;
  z-index: 100;

  height: 125px;
  overflow: visible;
}
.mobile-logo {
  width: 200px;
  margin-top: 30px;
}
.header {
  border-bottom: 1px solid #e5e5e5;
}

.header-logo {
  max-width: 200px;
}
.social-icons {
  text-align: left;
}
.social-icon {
  display: inline-block;
  width: 24px;
  margin-left: 5px;
  margin-right: 5px;
  fill: #6f7e8c;
  transition: 0.3s;
}
.social-icon:hover {
  fill: var(--light-gold);
}
.edmonton .social-icon:hover {
  fill: var(--edmonton-grey);
}
.social-link {
  fill: var(--dark-gold);
}

		.header-with-buttons{
			background-color: var(--light-grey); 
			padding: 50px 3% 50px 3%;
            border-bottom: 1px solid #e5e5e5;
        }
          @media (max-width: 767.98px) {
          	.header-with-buttons{
				padding: 30px 0 30px 0;
        	}
        }

/* ////////////////// Navigation////////////////// */
.nav-item {
  padding: 10px 13px;
}
a.nav-link {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  border-bottom: 3px solid #fff;
  transition: 0.3s;
}
a.nav-link:hover {
  border-bottom: 3px solid var(--light-grey);
  transition: 0.3s;
}
#home .nav-home,
#show-info .nav-show-info,
#tickets .nav-tickets,
#directory .nav-directory,
#gown-sale .nav-gown-sale,
#gallery .nav-gallery,
#prizes .nav-prizes,
#become-an-exhibitor .nav-become-an-exhibitor,
#contact .nav-contact
 {
  border-bottom: 3px solid var(--edmonton-grey) !important;
}

/* ////////////////// Heros ////////////////// */

.video-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground {
    width: 300%;
    left: -100%;
  }
}
/* ////////////////// Homepage ////////////////// */
.gradated{
  background: rgb(174,142,122);
  background: linear-gradient(180deg, rgba(174,142,122,1) 0%, rgba(174,142,122,1) 19%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%);
}

#homepage-pillar {
  padding: 25px;
  background: rgb(174, 142, 122);
  background: linear-gradient(
    180deg,
    rgba(174, 142, 122, 1) 20%, 
    rgba(174, 142, 122, 0) 100%
  );
  backdrop-filter: blur(5px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 8vw;
  height: 100%;
  min-height: 500px;
}
#homepage-pillar .logo {
  max-width: 200px;
  display: block;
  margin: 10vh auto 10vh auto;
}
#homepage-pillar .cities {
  text-align: center;
  color: #222222;
}
.mobile-cities {
  margin-top: 5vh;
  text-align: center;
}
.video-background {
  width: auto;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

/* Fade in Video) */
.fade-in-video {
  animation: fadeIn 2s;
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  -ms-animation: fadeIn 2s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



/* ////////////////// Video Embed Responsively ////////////////// */

.embed-container {
  z-index: 9;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ////////////////// Page content ////////////////// */


.card-lt-gold {
  padding: 30px 50px 10px 30px;
}

.section-grey {
  background-color:  var(--light-grey);
  padding: 30px 50px 30px 50px;
  margin: 80px 0;
}
.exhibitor-categories {
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
}
.exhibitor-categories li {
  padding-bottom:10px
}

blockquote.exhibit {
  padding: 10px 20px;
  margin: 0 0 20px;
  border-left: 5px solid #eee;
}
.exhibitor-block {
  margin-bottom: 40px;
}
/* ////////////////// Gallery content ////////////////// */

.gallery-description{
  font-size: 20px;
}

/* ////////////////// Footer ////////////////// */
.fat-footer {
  padding: 2rem 1rem 0 1rem;
  color: var(--dark-grey);
  text-align: center;
  background-color:  var(--light-grey);
}
.footer-logo {
  margin: 10px;
  max-width: 200px;
}
.widget-wrapper {
padding: 20px
}
.footer-info-wrapper{
  padding: 20px;
}
.footer {
  padding-top: 20px;
  padding-bottom: 20px;
}
.footer p {
  font-size: 12px;
  color: var(--med-grey);
}
.copyright{
  text-align: left;
}
.awesomeweb{
  text-align: right;
}
.awesomeweb a {
  text-decoration: none;
  color: var(--med-grey);
}
.awesomeweb a:hover {
  text-decoration: underline;
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .header-logo {
    margin-top: 10px;
    width: 120px;
  }
  #main-nav {
    margin-top: -20px;
  }
  .navbar {
    width: 100% !important;
    background: pink;
  }
  .mobile-header-logo {
    margin-top: 20px;
    width: 120px;
  }
  .copyright, .awesomeweb{
    text-align: center;
  }
  .exhibitor-categories {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }

}

/* `sm` applies to small devices (phones, less than 578px) */
@media (max-width: 575.98px) {
  .exhibitor-categories {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }
}