/* ============================================================
  GLOBAL
============================================================ */
.box {
	margin:15px 0;
	overflow:hidden;
	text-align:center;
}

.box h1 {
	font-size:28px;
}
.box h2 {
	font-size:28px;
}
.box h3 {
	font-size:28px;
}
.box a {
	color:#FFFFFF;
}
.box a:hover {
	color:#434343;
}

.box .overlay a.btn {
	color:#FFFFFF;
	margin:0.5rem 0;
	padding: 0.25rem 0.75rem;
	border:1px dotted #FFFFFF; 
	border-radius: 0;
}
.box .overlay a.btn:hover {
	color:#434343;
	background-color: #FFFFFF;
}

.title {
	padding:10px 15px;
	color:#FFFFFF;
	position:absolute;
	bottom:0;
	width:100%;
	z-index:10;
	cursor:pointer;
	z-index:30;
	text-align:left;
}
.title h3 {
	font-family: 'Amatic SC', sans-serif;
	margin: 0;
	font-size:28px;
}
.title a {
	color:#FFFFFF;
	background-image:none;
}
.title a:hover {
	color:#434343;
}

.effects {
	text-align:center;
}
.effects .img {
	position:relative;
	float:left;
	overflow: hidden;
	height:380px;
	width:100%;
	text-align:center;
}

.img.cover {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.effects .overlay {
  color:#FFFFFF;
  display: block;
  position: absolute;
  z-index: 20;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
}
.effects:hover .overlay {
  height: 100%;
}

.green {background: rgba(78,187,120,0.8);}
.blue {background: rgba(79,198,223,0.8);}
.teal {background: rgba(45,172,163,0.8);}
.purple {background: rgba(165,116,178,0.8);}
.orange {background: rgba(238,132,49,0.8);}

.text {
	padding:30px;
	text-align:left;
}

iframe {
	border: none;
	background-color: rgba(30,30,30,1);
}
.effects .vid iframe,
.effects .img iframe {
	width:100%;
	height:380px;
}
.effects .vid .vidtitle iframe {
	width:100%;
	height:332px;
}

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
/* Large desktop */
@media (min-width: 1200px)  {
}
@media (max-width: 1200px)  {
.effects .img {
  height:310px;
} 
body {
	font-size:14px;
}
.text {
	padding:15px;
}
.title h3 {
	font-size:25px;
}

.effects .vid iframe,
.effects .img iframe {
	width:100%;
	height:310px;
}
.effects .vid .vidtitle iframe {
	width:100%;
	height:265px;
}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 992px) {
.effects .img {
  height:300px;
} 
p.readmore {
	display:none;
}
.overlay h3 {
	font-size:28px;
}
}

@media (max-width: 992px) { 
body {
	font-size:14px;
}
.effects .img {
  height:380px;
} 
.text {
	padding:20px;
}

.effects .vid iframe,
.effects .img iframe {
	width:100%;
	height:380px;
}
.effects .vid .vidtitle iframe {
	width:100%;
	height:335px;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {  
.overlay {
}
.effects .img {
  height:380px;
} 
.text {
	padding:40px;
}
.text {
	padding:20px;
}
}

/* Landscape phones and down */
@media (max-width: 480px)  { 
.effects .img {
  height:300px;
}
.hide {
	display:none;
}
.overlay {
}
.overlay h3 {
	font-size:28px;
}
.overlay p {
	font-size:13px;
}
.text {
	padding:20px;
}

.effects .vid iframe,
.effects .img iframe {
	width:100%;
	height:300px;
}
.effects .vid .vidtitle iframe {
	width:100%;
	height:255px;
}
}