.drawer-frame {
	z-index: 0;
	position: relative;
	overflow: hidden;
	background: url('../img/whiteboard-pale.jpg') top center / cover no-repeat;
	color: #333;
	margin-bottom: 1em;
	border:1px solid #ccc;
	height: 1200px;
}

.drawer-frame a {
	color: #333;
	position: relative;
}

.drawer-title{
	color: #099;
	font-weight: bold;
	margin: 2.5em 0em 0em 0em;
}

.drawer-frame > h1, .drawer-frame > h2 {
	text-align: center;
}

.drawer-target {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: right 1s, left 1s;
	-webkit-transition: right 1s, left 1s;
	z-index: 2;
	top: 0;
	background-size: cover;
}

.drawer-target.inactive {
	right: 100%;
}

.drawer-target.active {
	right: 0%
}

.drawer-content {
	display: none;
}

.drawer-target > div {
	height: 100%;
}

.fill-background {
	background-size: contain;
	background-color: #efefef;
	position: relative;
	
}

.formula-triggers {

	margin:3em auto 2.5em auto;
}

.formula-wrapper {padding:1em;}

.drawer-panel {
	padding: 0em;
	position: relative;
	background-color: #efefef;
	top:24em;
	height: 100%;
	min-height: 100%;
}

.drawer-panel .formula-wrapper ul {

	list-style: disc;
	margin-left: 1.1rem;
}

.drawer-panel .formula-wrapper ul li {

	list-style: disc;
	text-align: left;
	text-transform: uppercase;
	width: 100%;
	font-size: 0.80em;
	display: list-item;
}

.drawer-panel .formula-wrapper p {

	font-size: 0.80em;
	line-height: 180%;
}

.drawer-panel .formula-wrapper .formula-learn {

	display: block;
	text-align: right;
	width: 100%;
	padding-top: 0.25em;
}

.drawer-panel-header {
	background: #099;
	color: #fff;
	font-size: 1.95em;
	margin:0;
	padding:0.5em 0em 0.5em 0.75em;

}

.drawer-frame .join-btn {

	width: 50%;
	max-width: 50%;
	min-width: 200px;
	color: #fff;
	background: #008c9a;
	box-shadow: none;
	border:none;
	border-radius: 6px !important;
	-webkit-border-radius:6px;
	font-size: 2em;
	font-family: "Open Sans";
	text-align: center;
	padding:0.65em 1.25em;
	display:block;
	margin:0.75em auto 4em auto;


}

.grey-module {

	background: #efefef;
	border:1px solid #ccc;
	
}

.grey-module-header {

	background: #333;
	color: #fff;
	font-size: 0.95em;
	margin:0;
	padding:0.15em 0em 0.15em 0.25em;
}

.sidebar-wrapper {
	padding:0.75em 1em 0.85em 1em;
}

.sidebar-wrapper a {

	color: #666;
}

.video-thumb {
	max-width: 800px;
	display: block;
	margin:0 auto;
}

.talk-to-me.join {

	padding:2em 0.75em;
}

.talk-to-me.join h3 {

	margin-bottom: 1.75em;
}

.video-label {font-size: 0.75em;}



.fill-background.training {
	background:url(../img/bg-training.jpg) top left no-repeat #efefef;
	background-size:contain;
}
.fill-background.branding {
	background:url(../img/bg-branding.jpg) top left no-repeat #efefef;
	background-size:contain;
}
.fill-background.technology {
	background:url(../img/bg-tech.jpg) top left no-repeat #efefef;
	background-size:contain;
}
.fill-background.culture {
	background:url(../img/bg-culture.jpg) top left no-repeat #efefef;
	background-size:contain;
}
.fill-background.formula {
	background:url(../img/bg-formula.jpg) top left no-repeat #efefef;
	background-size:contain;
}

@media (max-width: 1199px) {
	.drawer-frame article {width: 100%;}
	.drawer-target {  }
	.drawer-frame article:nth-child(2n+1) {
		clear: both;  
	}
}

@media (max-width: 700px) {
	.drawer-frame article {
		display: inline-block;
		width: 90%;
		vertical-align: top;
		text-align: center;
		margin: 0;
		float: left;
	}

	.drawer-panel .formula-wrapper .formula-learn {text-align: left;padding-top: 1.5em} 
	.drawer-panel {top: 15em;}

	.drawer-title {margin-top: 1em;}


}

@media (max-width: 550px) { 
	 .drawer-frame {min-height: 550px;height: 1275px;}
	 .drawer-frame article {width: 100%; margin-bottom:1em;}
	 .drawer-panel  h1 {  font-size: 19px; line-height: 1em; text-align: center;}
	 .drawer-panel {width:100%;top:10em;}
	 .drawer-hide a img {}
	 .drawer-hide-small a img {}
	 .drawer-panel ul.drawer-tags li{width:100%;}
	 .drawer-frame .join-btn {font-size: 0.85em;}
	 .drawer-title {font-size: 1.75em;}
	 .formula-wrapper h3 {font-size: 1em;}
	 .formula-wrapper p {font-size: 0.75em}
	 .drawer-panel .formula-wrapper ul li {font-size: 0.75em;}
	 .drawer-panel .formula-wrapper .formula-learn {text-align: left;padding-top: 1.5em} 
	 .drawer-frame .drawer-button h4 {font-size: 0.70em;}
	 .drawer-frame .drawer-button img {width: 125%;}
}

.drawer-frame article ul {
	list-style: none;
	width: 225px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
}

.drawer-frame article ul li {
  padding: 3px 10px;
  margin: 0.5em 0;
  border-radius: 2px;
  text-align: left;
  font-size: 15px;
}

.drawer-frame article img {
	
}

.drawer-target ul {
	list-style: none;
	margin: 0;
}

.drawer-target ul li {
	width: 225px;
	padding: 3px;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	margin-right: 0.5em;
}

.orange {
	background-color: orange;
}

.purple {
	background-color: purple;
}

.drawer-target h1 {
	text-transform: uppercase;
	color: white;
}

.drawer-hide {
	position: relative;
	top:1em;
	left: 1em;
}

.drawer-hide-small {
	position:inherit!important;
	top:0!important;
	left: 0!important;
}

.powerful {

	margin-bottom: 1em;
}

.drawer-outbound {
	background-color: #e23024;
	margin: 1em auto 6em auto;
	width: 50%;
	padding: 1em;
	text-align: center;
	border-radius: 3em;
	display: block;
	clear: both;
	float: none;
	font-size: 1.5em;
	position: relative;
	top:3em;
}


.drawer-more {
	background-color: #e23024;
	margin: 0.5em auto;
	width: 50%;
	padding: 0.5em;
	text-align: center;
	border-radius: 3em;
	display: block;
	clear:both;
}

.read-more {

	display: block;
	width: 100%;
	text-align: left;
}

.drawer-button {
	background-image: url('../img/tworings.png');
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	display: block;
}

.drawer-button:hover {
	background-position: bottom center;
}

.drawer-button img {
	display: block;
	width: 100%;
}

.drawer-button h4 {
	font-family: 'Permanent Marker';
	font-size: 1em;
	position: absolute;
	height: 1em;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
}