:root {
  --my-color: red;
  --dimmed-background: #ededed;
  --dimmed-background-shadow: #e1e1e1;
  --dimmed-background-hilight: #f9f9f9;
  --bright-background: #fff;
  --dark: #000;
  --white: #fff;
  --pale-gray: #eee;
  --primary-pale: #FFF2C9;
  --primary-light: #D4AF37;
  --primary-medium: #A4810F;
  --primary-dark: #644C00;
  /*  
  --primary-pale: #b3e48e;
  --primary-light: #90C964;
  --primary-medium: #77975E;
  --primary-dark: #4b8321;
  */
  --primary: var(--primary-light);

}

body {
	background-color: var(--dimmed-background);
}

h1 {
	font-size: 1.7em;
	/* font-family: 'Glacial Indifference'; */
	font-family: 'Playfair Display', serif;
	font-weight: bold;
}
h2 {
	font-size: 1.4em;
	/* font-family: 'Glacial Indifference'; */
	font-family: 'Playfair Display', serif;
}
h3 {
	font-size: 1.3em;
	/* font-family: 'Glacial Indifference'; */
	font-family: 'Playfair Display', serif;
}

a {
	color: var(--primary-medium);
}
a:not(.btn) {
	color: var(--primary-medium);
	transition: ease-out 0.2s;
}
a:not(.btn):hover {
	color: var(--primary-light);
	transition: ease-out 0.2s;
}
a:not(.btn):visited {
	color: var(--primary-light);
	transition: ease-out 0.2s;
}
a:not(.btn):focus {
	color: var(--primary-light);
	transition: ease-out 0.2s;
}

.main-hero {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (max-width: 400px) {
	.main-hero {
		background-image: url(/static/images/heroes/wedding-party/hero-400w.jpg);
	}
}
@media (min-width: 401px) and (max-width: 600px) {
	.main-hero {
		background-image: url(/static/images/heroes/wedding-party/hero-600w.jpg);
	}
}
@media (min-width: 601px) and (max-width: 800px) {
	.main-hero {
		background-image: url(/static/images/heroes/wedding-party/hero-800w.jpg);
	}
}
@media (min-width: 801px) and (max-width: 1000px) {
	.main-hero {
		background-image: url(/static/images/heroes/wedding-party/hero-1000w.jpg);
	}
}
@media (min-width: 1001px) and (max-width: 1200px) {
	.main-hero {
		background-image: url(/static/images/heroes/wedding-party/hero-1200w.jpg);
	}
}
@media (min-width: 1201px) {
	.main-hero {
		background-image: url(/static/images/heroes/wedding-party/hero-1600w.jpg);
	}
}
.main-hero .overlay-background {
	background-color: var(--primary-medium);
	opacity: 0.7;
	position: relative;
}

.main-hero .overlay {
	background-color: var(--primary-medium);
	opacity: 0.7;
	position: relative;
	top: -100%;
}


.upload-preview__image {
	max-width: 140px;
	max-height: 100px;
}

.collapse-vertical {
	overflow-y: hidden;
	max-height: 0;
	transition: 0.2s;
	margin: 0;
	padding: 0;
}

.display-5 {
	font-size: 2rem;
}

.navbar-brand img {
	width: 10rem;
	max-width: 10rem;
}


.rich-editable {
	overflow-y: scroll;
	height: 18rem;
}
.square-image {
    position:relative;
    overflow:hidden;
    padding-bottom: 100%;
}
.square-image img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      object-fit: cover;
      width: 100%;
      height: 100%;

}
.square-image .dark-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--dark);
	opacity: 0.6;
	color: var(--white);
}
.square-image .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color: var(--white);
}


/* Neumorphic cards */

.card {
	border-radius: 5px;
	background: var(--bright-background);
	box-shadow: 5px 5px 7px var(--dimmed-background-shadow), 
				-5px -5px 7px var(--dimmed-background-hilight);
	border: none;
	overflow: hidden;
}


/* badges */

.card .badge.first420 {
	background: #404040;
}

.card .badge.founding50 {
	background: #C2B139;
}

.card .badge {
	white-space: nowrap;
	position: absolute;
	padding: 5px 100px;
	min-width: 300px;
	transform: rotate(45deg) translate(7%, 0);
	color: white;
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
	top: 14px;
	box-sizing: border-box;
}


/* Neumorphic inputs */
.form-control:not(.btn) {
	border: 1px solid var(--pale-gray);
	box-shadow: inset 5px 5px 10px #ededed, 
	            inset -5px -5px 10px #ffffff;
}
.rounded-left {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.rounded-right {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}


.dispensary-preview__logo, .vendor-preview__logo {
	background-color: var(--white);
    height: 50px;
    width: 50px;
    overflow: hidden;
    position: absolute;
    bottom: 4em;
    right: 23px;
	border-radius: 50%;
	border: 3px solid var(--white);
	box-shadow:  5px 5px 5px #ededed, 
	             -5px -5px 5px #666;
}


/* buttons */

.btn {
    background-color: transparent; /* var(--primary-light); */
    border-color: #999; /*var(--primary-light);*/
	color: #000; /* var(--white); */
	transition: ease-out 0.1s;
}
.btn:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
	box-shadow:  5px 5px 10px var(--dimmed-background-shadow), 
	             -5px -5px 10px var(--dimmed-background-hilight);
	color: var(--black);
	transition: ease-in 0.1s;
}
.btn:focus {
    background-color: var(--primary-medium);
    border-color: var(--primary-medium);
}
.btn.arrow {
	white-space: nowrap;
	padding-left: 1.8em;
}
.btn.arrow .animate-on {
	/* display: none; */
	position: relative;
	transition: ease-in 0.1s;
	opacity: 0;
	left: -10px;
}
.btn.arrow:hover {
	transition: ease-out 0.2s;
	padding-left: 1em;
}
.btn.arrow:hover .animate-on {
	/* display: inline-block; */
	transition: ease-out 0.1s;
	opacity: 1;
	left: 0;
}
.btn.arrow:focus {
	box-shadow: inset 5px 5px 10px var(--dimmed-background-shadow), 
	            inset -5px -5px 10px var(--dimmed-background-hilight);
}

.checkbutton {
	display: inline-block;
	border-radius: 5px;
	padding: 5px;
	box-shadow: 5px 5px 7px var(--dimmed-background-shadow), 
				-5px -5px 7px var(--dimmed-background-hilight);
    transition: 0.1s;
}
.checkbox:hover {
    background-color: var(--primary-light);
    transition: 0.1s;
}
.checkbutton.active {
    box-shadow: none;
    background-color: var(--primary-light);
    border: 1px solid var(dimmed-background-shadow);
    box-shadow: 0px 0px 12px 1px var(--primary-light);
}



.company--featured-image__frame {
	padding: 2px;
	box-shadow: 5px 5px 7px var(--dimmed-background-shadow), 
				-5px -5px 7px var(--dimmed-background-hilight);
	border-radius: 12px;
	background-color: var(--white);

}
.company--featured-image {
	padding: 10px;
	box-shadow: inset 2px 2px 5px var(--dimmed-background-shadow), 
	            inset -2px -2px 5px var(--dimmed-background-hilight);
	border-radius: 11px;

}
.company--featured-image img {
	border-radius: 5px;

}

.social-media-handle {
	font-size: 1rem;
}

.object-fit__cover {
	object-fit: cover;
}

.card-header h5 {
	font-size: 1rem;
}
#product-accordion .card {
	border-top: 1px solid var(--dimmed-background-shadow);
	border-bottom: 1px solid var(--dimmed-background-shadow);
	border-radius: none;
	box-shadow: none;
}
form label {
	text-transform: uppercase;
}
.jumbotron1 {
	background-color: var(--white);
}

.dashboard-menu__title {
	background-color: var(--dark);
	color: var(--white);
}
.dashboard-menu .list-group-item.active {
	background-color: var(--primary-medium) !important;
	border-color: var(--primary-light);
}
.dashboard-menu .list-group-item.active a {
	color: var(--dark);
}