#examples {
	margin: 40px 30px;
}

.example {
	float: left;
	width: 100%;
	margin: 15px 0;
}

.example-inner {
	position: relative;
	margin: 10px;
}

@media (min-width: 1350px) {
	/* 2 column layout */
	.example { width: 49.9%; }
}

@media (min-width: 2000px) {
	/* 3 column layout */
	.example { width: 33.3%; }
}

.example h2 {
	position: relative;
	margin: 0; padding: 0;
	font-size: 18pt;
	font-weight: 400;
	height: 40px; line-height: 40px;
	white-space: nowrap;
	overflow: hidden;
	top: 0; /* In order for FF to animate this property */
}

.example h2 a:not(:hover) {
	text-decoration: none;
}

.example .content,
.example .toolbar-inner,
.example iframe {
	background: #FFF;
}

.example .content,
.example iframe,
.example .editor {
	height: 300px;
}

.example .content {
	position: relative;
}
.example .content.animate {
	z-index: 10;
}

.example .content,
.example .toolbar-inner {
	border: 1px solid #AB9;
}

.example iframe {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	margin: 0;
	border: none;
	padding: 0;
	z-index: 1;
}

.example .editor {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	text-align: left;
}

.example .code {
	display: none;
	position: relative;
}
.example.edit-mode .preview { display: none; }
.example.edit-mode .code { display: block; }

.example .toolbar {
	font-size: 14pt;
	width: 100%;
	position: absolute;
	left: 0; top: calc(0.5px - 35px);
	z-index: 2;
	overflow: hidden;
}

.example .toolbar {
	height: 35px;
}
.example .toolbar-inner {
	display: inline-block;
	position: relative;
	top: 35px;
	height: 35px;
	line-height: 35px;
	padding: 0 8px;
	border-bottom: none;
}
.example .toolbar .btn {
	padding: 0 8px;
	display: inline-block;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}
.example .toolbar .btn:hover { text-decoration: underline; }

.example:hover .toolbar-inner,
.example.hover .toolbar-inner
	{ top: 0; }
.example:hover h2,
.example.hover h2
	{ top: calc(0.5px - 35px); }

.example.highlight .content,
.example.highlight .toolbar-inner {
	border-color: #D6005D;
}

/* TODO: not used */
#assistance-info h2 {
	position: relative;
	margin: .5em 0 0; padding: 0;
	font-size: 140%;
}

/* TODO: not used */
#assistance-info .content {
	margin: 0 40px 60px;
	padding: 1em 2em;
	border: 2px solid #DBE0CB;
	background: #FFF;
}


/********** ROUNDED CORNERS **********/

.example .toolbar-inner {
	border-radius: 10px 10px 0 0;
}


/********** SHADOWS **********/

.example .content {
	box-shadow: 0px 15px 30px 0px rgba(171,178,151,0.85);
}


/********** TRANSITIONS AND ANIMATIONS **********/

.example .toolbar-inner,
.example h2 {
transition: .25s;
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
}

.animate {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.flipExampleIn {
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: flipExampleIn;
	animation-name: flipExampleIn;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

@-webkit-keyframes flipExampleIn {
  from {
	-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
	transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
  }
  to {
	-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
	transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
  }
}

@keyframes flipExampleIn {
  from {
	-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
	transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
  }
  to {
	-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
	transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
  }
}

.flipExampleOut {
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: flipExampleOut;
	animation-name: flipExampleOut;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
}

@-webkit-keyframes flipExampleOut {
  from {
	-webkit-transform: perspective(400px);
	transform: perspective(400px);
  }
  to {
	-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
	transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  }
}

@keyframes flipExampleOut {
  from {
	-webkit-transform: perspective(400px);
	transform: perspective(400px);
  }
  to {
	-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
	transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  }
}