body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
}

.ui.menu .item img.logo {
    margin-right: 1.5em;
	transform: rotateY(180deg);
}

.ui.menu .item img.logo:hover {
	transform: none;
}

.main.container {
    margin-top: 3em;
	margin-bottom: 2em;
}
.ui.message {
	min-height: 50px;
}
.wireframe {
    margin-top: 2em;
}

.main {
    flex-grow: 1;
}

.footer {
    margin-top: auto;
}

.submit.button {
    background-color: #6b705a;
    color: #fff;
}

#nav, #footer {
    background-color: #6b705a;
}

.header.title, .ui.breadcrumb .active {
    color: #6b705a !important;
}

.header .subtitle {
	font-size: 14px;
	color: #555 !important;
}

.ui.breadcrumb a, .lece-orange {
    color: #F4A259 !important;
}

.ui.nag {
	z-index: 100;
}

a:hover {
	color: #F4A259 !important;
}

.lece-orange-bg {
    background-color: #F4A259!important;
	border-color: #F4A259;
}

.ui.basic.lece-orange.button, .ui.basic.lece-orange.buttons .button {
    box-shadow: 0 0 0 1px #F4A259 inset !important;
    color: #F4A259 !important;
}

.cards.typeform .card .image.form, .cards.typeform .card .image.form img {
	background-color: #77695e; 
	height: 250px;
} 

.cards .card .image.guide, .cards .card .image.guide img {
	background-color: #6b705a; 
	height: 250px;
} 
.cards .card .image.state img {
	height: 220px;
} 

.cards .card .image.resource, .cards .card .image.resource img {
	background-color: #595959; 
	height: 250px;
} 
.cards .card .image.resource.guide, .cards .card .image.resource.guide img {
	background-color: #6b705a; 
	height: 250px;
} 
.message .content .meta {
    margin: .5em 0 .5em;
    font-size: 1em;
    line-height: 1em;
    color: rgba(0, 0, 0, .6);
}
.message {
	word-break: break-word;
}
.lece-green {
	color: #6b705a;
}
.lece-green-bg {
    background-color: #6b705a!important;
	border-color: #6b705a;
	color: #FFF!important;
}

.ui.basic.lece-green.button, .ui.basic.lece-green.buttons .button {
    box-shadow: 0 0 0 1px #6b705a inset !important;
    color: #6b705a !important;
}

.lece-red-bg {
    background-color: #FA6D4F;
	border-color: #FA6D4F;
}

.avatar {
	width: 38px;
	height: 38px;
	background-color: #F5E5CB; 
	border-radius: 25px;
	text-align: center;
	color: #555;
	font-weight: bold;
}

.avatar img{
	margin-top: -6px; 
	margin-left: -12px; 
	border-radius: 25px;
}

.lece-tan-bg {
    background-color: #F5E5CB;
	border-color: #F5E5CB;
}

.ui.basic.lece-tan.button, .ui.basic.lece-tan.buttons .button {
    box-shadow: 0 0 0 1px #F5E5CB inset !important;
    color: #F5E5CB !important;
}

.tfembed {
    width: 100%;
    height: 75%;
}
.card .header.title, .card .description {
    overflow-wrap: anywhere;
}

.card .description .less {
	display: contents;
}

.card .description .ellipsis {
	display: contents;
}

.card .description .more {
	display: none;
}

.block {
	color: #555;
}

.file.word {
	color: #2185d0;
}

.file.pdf {
	color: #db2828;
}

.file.powerpoint {
	color: #ff851b;
}

.resource-container {
	position: relative;
	background-color: #595959;
}

.guide .resource-container {
	position: relative;
	background-color: #6b705a;
}

@font-face {
	font-family: ember;
	src: url('/css/fonts/amazon-ember/Amazon Ember Medium.ttf');
  }

.resource-container .resource-text {
  position: absolute;
  color: #FFF;
  font-size: 30px;
  top: 28px;
  left: 16px;
  text-align: left;
  line-height: normal;
  font-family: 'ember';
  margin-right: 100px;
}

.resource-container .resource-river {
	float: right;
	padding: 10px;
	margin-top: 125px;
}

.resource-container .resource-river img {
	width: 100px;
	height: 100px!important;
}
/*

Semantic UI Hamburger Menu (not oficial)
I understand why Semantic UI creators doesn't want to add more responsive debt to core project. I respect the nature of Semantic UI project because I love what these guys created there. But I need a Hamburger Menu. Maybe you too.
By @betoayesa.

**This file include some responsive helper clases from  https://github.com/Semantic-Org/Semantic-UI/issues/1114
*/

/* Hamburger Clases Implemented for Mobile Only. Up to you to add it for other breakpoints */

/* Hamburger hidden by default */

.hamburger{
	display:none
}


/* Mobile */
@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large screen only"]:not(.mobile),
  [class*="widescreen only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }

  	.hamburger {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 9px;
		top: 13px;
		cursor: pointer;
		display: block;
	}
	.hamburger 	span {
		display: block;
		height: 3px;
		background: #FFF;
		margin: 0 0 3px;
	}
	.hamburger:hover {
		-moz-opacity: 1;
	    -khtml-opacity: 1;
	    -webkit-opacity: 1;
	    opacity: 1;
	    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	    filter: alpha(opacity=100);
	    -moz-transition-duration: .2s;
	    -webkit-transition-duration: .2s;
	    -o-transition-duration: .2s;
	    transition-duration: .2s;
	}
	.hamburger.active {
				
	}
	.hamburger.active .hamburger-bun {
		margin: 0;
		-webkit-transform-origin: center center;
		-moz-transform-origin: center center;
		-o-transform-origin: center center;
		transform-origin: center center;
	}
			
	.hamburger.active .hamburger-bun:first-child {
		-webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    transform: rotate(45deg);
	    -webkit-transition: all .2s ease-out;
	    -moz-transition: all .2s ease-out;
	    -o-transition: all .2s ease-out;
	    transition: all .2s ease-out;
	    -webkit-transition: all .2s ease;
	    -moz-transition: all .2s ease;
	    -ms-transition: all .2s ease;
	    -o-transition: all .2s ease;
	    transition: all .2s ease;
	    margin-top: 3px;
	}
	.hamburger.active .hamburger-bun:last-child {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-transition: all .2s ease-out;
		-moz-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
		transition: all .2s ease-out;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		margin-top: -3px;
	}

	.hamburger.active .hamburger-patty {
		display: none;
	}

	.ui.stackable.menu .item:not(.header){
		display:none;
	}

	.ui.stackable.menu.open .item{
		display:block;
	}

	.ui.stackable.menu.open {
		height:inherit
	}
}

a.fc-col-header-cell-cushion, a.fc-daygrid-day-number{
	color: #555 !important;
}

.chats .date-format {
	font-size: 12px;
	color: #777;
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  [class*="mobile only"]:not(.tablet),
  [class*="tablet hidden"],
  [class*="computer only"]:not(.tablet),
  [class*="large screen only"]:not(.tablet),
  [class*="widescreen only"]:not(.tablet),
  [class*="or lower hidden"]:not(.mobile) {
    display: none !important;
  }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large screen only"]:not(.computer),
  [class*="widescreen only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
  [class*="mobile only"]:not([class*="large screen"]),
  [class*="tablet only"]:not([class*="large screen"]),
  [class*="computer only"]:not([class*="large screen"]),
  [class*="large screen hidden"],
  [class*="widescreen only"]:not([class*="large screen"]),
  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
  [class*="mobile only"]:not([class*="widescreen"]),
  [class*="tablet only"]:not([class*="widescreen"]),
  [class*="computer only"]:not([class*="widescreen"]),
  [class*="large screen only"]:not([class*="widescreen"]),
  [class*="widescreen hidden"],
  [class*="widescreen or lower hidden"] {
    display: none !important;
  }
}

@media print {
	.no-print  {
		display: none!important;
	}
	.print  {
		display: block!important;
	}
}