/*------------------------------------------------------------------
Project:	Mosaic
Version:	1.0
Created: 		20/01/2014
Last change:	06/02/2014
-------------------------------------------------------------------*/

/* ===== Buttons ===== */

.btn {
	border-radius: 3px;
}

/* ===== Headlines ===== */

.headline {
	padding-bottom: 1px;
	border-bottom: 1px solid #eee;
	margin-bottom: 30px;
	line-height: 50px;
}
.headline span {
	padding-bottom: 4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

/* ===== Breadcrumbs ===== */

.topic {
	margin-top: -20px;
	margin-bottom: 40px;
	border-bottom: 1px solid #eee;
}
.topic h3 {
	display: inline-block;
	padding: 20px 0 20px;
	margin: 0 0 -1px 0;
	font-size: 20px;
}
.topic .breadcrumb {
	margin-bottom: 0;
	padding: 21px 0;
	background: transparent;
}

/* ===== Responsive Video =====*/

.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

/* ===== Pagination ===== */

.body-green .pagination > .active > a,
.body-green .pagination > .active > span,
.body-green .pagination > .active > a:hover,
.body-green .pagination > .active > span:hover,
.body-green .pagination > .active > a:focus,
.body-green .pagination > .active > span:focus {
  background-color: #94BA65;
  border-color: #94BA65;
}
.body-blue .pagination > .active > a,
.body-blue .pagination > .active > span,
.body-blue .pagination > .active > a:hover,
.body-blue .pagination > .active > span:hover,
.body-blue .pagination > .active > a:focus,
.body-blue .pagination > .active > span:focus {
  background-color: #2790B0;
  border-color: #2790B0;
}
.body-red .pagination > .active > a,
.body-red .pagination > .active > span,
.body-red .pagination > .active > a:hover,
.body-red .pagination > .active > span:hover,
.body-red .pagination > .active > a:focus,
.body-red .pagination > .active > span:focus {
  background-color: #E35E54;
  border-color: #E35E54;
}
.body-orange .pagination > .active > a,
.body-orange .pagination > .active > span,
.body-orange .pagination > .active > a:hover,
.body-orange .pagination > .active > span:hover,
.body-orange .pagination > .active > a:focus,
.body-orange .pagination > .active > span:focus {
  background-color: #D26C22;
  border-color: #D26C22;
}

/* ===== Helper Classes ===== */

.primary-font {
	font-family: 'Roboto', sans-serif;
}
.first-child {
	margin-top: 0;
}
@media (max-width: 767px) {
	.first-child-m {
		margin-top: 20px;
	}
}
.delay-1 {
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}
.delay-2 {
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}
.delay-3 {
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}