@charset "UTF-8";
/* CSS Document */

/* universal elements */
body, html{
	font-size: 14px;
	font-family: sans-serif;
}
/* default link color */
a, a:link{
	color: #ef4b24;
}
h1{
	text-transform:  uppercase;
	font-size: 2rem;
	font-weight: bold;
	margin-top: 0;
}
h2, h3, h4, h5{
	margin-top: 0;
}
iframe{
	border: none;
	height: 1500px;
}

textarea{
    resize: both;
    overflow: auto;
	height: 10rem;
}
textarea.resize-none{
    resize: none;
}
textarea.resize-x,
textarea.resize-horizontal{
    resize: horizontal;
}
textarea.resize-y,
textarea.resize-vertical{
    resize: vertical;
}




/* Universal tools */
.group:after {
	content: "";
	display: table;
	clear: both;
}
.error{
	text-align: center;
	color: #000;
	padding: .5rem 0;
	background-color: #FF888A;
}
.drop-shadow{
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
}





/* List */
.no-bullets {
	list-style: none;
	padding: 0;
}
.list-inside {
	list-style-position: inside;
}
.list-check{
  list-style: none;
}
.list-check li:before {
	content: '✓';
	margin-right: .5rem;
}






/* Button styles */
input[type=submit]{
	border-radius: .8rem;
	border: none;
	padding: .5rem 1rem;
}
.round-button{
	border-radius: .8rem;
	border: none;
	padding: .5rem 1rem;
}





/* Sizing */
.full-width{
	width: 100%;
}
.half-width{
	width: 50%;
}
.height-max-100{
	max-height: 100px;
}
.height-max-150{
	max-height: 150px;
}
.height-max-180{
	max-height: 180px;
}
.height-max-200{
	max-height: 100px;
}
.max-width-230{
	max-width: 230px;
	margin-left: auto;
	margin-right: auto;
}




/* background colors */
.background-white,
.color-white-background{
	background-color: #FFF;
}
.background-black,
.color-black-background{
	color: #FFF;
	background-color: #000;
}
.background-orange{
	background-color: #ef4b24;
	color: #fff;
}
.background-grey,
.color-grey-background{
	background-color: #EDEDEF;
}
.background-dark-grey{
	color: #FFF;
	background-color: #363636;
}
.background-darker-grey{
	color: #FFF;
	background-color: #292929;
}
.background-purple{
	background-color: #3C364A;
	color: #fff;
}
.background-dark-purple{
	background-color: #272331;
	color: #97959D;
}
/* restyle links if they're on a dark background */
.background-dark-purple a{
	color: #e4ecff !important;
}
.background-dark-purple a:hover,
.background-dark-purple a:focus{
	color: #FFA371 !important;
	text-decoration: underline !important;
}
.background-color-rainbow {
	left:0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
	background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
	background-size: 1800% 1800%;

	-webkit-animation: rainbow 18s ease infinite;
	-z-animation: rainbow 18s ease infinite;
	-o-animation: rainbow 18s ease infinite;
	animation: rainbow 18s ease infinite;
}
@-webkit-keyframes rainbow {
	0%{background-position:0% 82%}
	50%{background-position:100% 19%}
	100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
	0%{background-position:0% 82%}
	50%{background-position:100% 19%}
	100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
	0%{background-position:0% 82%}
	50%{background-position:100% 19%}
	100%{background-position:0% 82%}
}
@keyframes rainbow { 
	0%{background-position:0% 82%}
	50%{background-position:100% 19%}
	100%{background-position:0% 82%}
}






/* text colors */
.text-color-white,
input.text-color-white,
a.text-color-white{
	color: #FFF;
}
.text-color-orange{
	color: #ef4b24;
}
.text-color-purple{
	color: #3C364A;
}
.text-color-red{
	color: #FF0004;
}
.text-color-grey{
	color: #e3e3e3;
}
.text-color-black{
	color: #000;
}
.text-color-white input,
.text-color-white select{
	color: #000;
}
a.text-color-grey{
	color: #535353;
}
a.text-color-white{
	color: #FFF;
}





/* Text size and placement */
.text-size-double{
	font-size: 2rem;
}
.text-size-half-step{
	font-size: 1.5rem;
}
.text-size-reset{
	font-size: 1rem;
}
.text-size-micro{
	font-size: .8rem;
}
.text-size-lg{
	font-size: 5rem;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.text-center{
	text-align: center;
}
.align-center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 768px) { 
	.text-center-sm{
		text-align: center;
	}
}
.text-all-caps,
.all-caps{
	text-transform: uppercase;
}
.text-bold{
	font-weight: bold;
}
.text-size-reset{
	font-size: 1rem;
}
.text-size-50{
	font-size: .5rem;
}
.text-size-150{
	font-size: 1.5rem;
}
.text-size-200{
	font-size: 2rem;
}
.text-small{
	font-size: .7rem;
}
.pull-right{
	float: right;
}
.pull-left{
	float: left;
}






/* padding */
.padding-flat{
	padding: .5rem 1rem;
}
.padding{ padding: 1rem; }
.padding-top{ 	padding-top: 1rem; }
.padding-right{ padding-right: 1rem; }
.padding-bottom{ padding-bottom: 1rem; }
.padding-left{ padding-left: 1rem; }

.padding-top-none{ padding-top: 0; }
.padding-right-none{ padding-right: 0; }
.padding-bottom-none{ padding-bottom: 0; }
.padding-left-none{ padding-left: 0; }

.padding-top-md{ padding-top: 2.5rem; }
.padding-right-md{ padding-right: 2.5rem; }
.padding-bottom-md{ padding-bottom: 2.5rem; }
.padding-left-md{ padding-left: 2.5rem; }

.padding-top-lg{ padding-top: 5rem; }
.padding-right-lg{ padding-right: 5rem; }
.padding-bottom-lg{ padding-bottom: 5rem; }
.padding-left-lg{ padding-left: 5rem; }






/* Margins */
.flush-top{
	margin-top: -2rem;
}
.flush-bottom{
	margin-bottom: -2rem;
}
.flush-left{
	padding-left: 0;
	margin-left: 0;
}
.margin-top{ margin-top: 1rem;}
.margin-right{ margin-right: 1rem;}
.margin-bottom{ margin-bottom: 1rem;}
.margin-left{ margin-left: 1rem;}

.margin-top-lg{ margin-top: 3rem;}
.margin-right-lg{ margin-right: 3rem;}
.margin-bottom-lg{ margin-bottom: 3rem;}
.margin-left-lg{ margin-left: 3rem;}

.margin-top-none{ margin-top: 0;}
.margin-right-none{ margin-right: 0;}
.margin-bottom-none{ margin-bottom: 0;}
.margin-left-none{ margin-left: 0;}

.margin-top-half{ margin-top: .5rem;}
.margin-right-half{ margin-right: .5rem;}
.margin-bottom-half{ margin-bottom: .5rem;}
.margin-left-half{ margin-left: .5rem;}




/* Borders */
.border{
	border: solid 1px #000;
}
.border-white{
	border: solid 1px #FFF;
}
.border-dark-grey{
	border: solid 1px #222;
}
.border-bottom-white{
	border-bottom: solid .5rem #FFF;
}
.border-1{
	border-radius: 1rem;
}




/* Processing button */
.processing,
.processing:link,
.processing:hover{
    background-color: #CCC !important;
    color: #999 !important;
    cursor: wait !important;
}
/* makes a word not break out of it's shell */
.force-word-break {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}






/* dev site tag */
.devSiteNotice{
	background-color: #e991ff;
	padding: 1rem;
	color: #FFF;
	text-align: center;
	margin-left: -15px;
	margin-right: -15px;
}
@media (min-width: 600px) {
	.devSiteNotice{
		z-index: 1000;
		position: fixed;
		display: inline;
		bottom: 2rem;
		left: -10px;
		width: 140px;
		box-shadow: 2px 2px 2px #888888;
		margin-left: inherit;
		margin-right: inherit;
	}

}



/* *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** */

.color-grey{
	color: #e3e3e3;
}
.color-grey-background{
	background-color: #e3e3e3;
}
.color-black{
	color: #000;
}
.color-black-background{
	background-color: #000;
}.color-white{
	color: #FFF;
}
.color-white-background{
	background-color: #FFF;
}
a.color-white{
	color: #FFF;
}



.display-block{
	display: block;
}
.display-inline-block{
	display: inline-block;
}
.img-circle{
	border-radius: 30rem;
	border: solid .2rem #FFF;
}
input.required{
	border: solid 1px red;
	background-color: #fbe0e0;
	color: #000;
}
.circle-border {
	border-radius: 30rem;
	border: solid .2rem #000;
	background-color: #c3c3c3;
}
.circle-border-sm {
	border-radius: 30rem;
	border: solid 1px #000;
	background-color: #c3c3c3;
}


.border-shape-circle{
	border-radius: 50%;
}

.transition-4s{
	transition: .4s ease;
}
.hover-white:hover,
.hover-white:focus{
	fill: #FFF;
	color: #FFF;
}
.hover-dark:hover,
.hover-dark:focus{
	fill: #520000;
	color: #520000;
}
.hover-grey:hover,
.hover-grey:focus{
	fill: #222222;
	color: #222222;
}