/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
	font-size: 16px;
	font-family: "Playfair Display", serif;
}

.btn {
	font-family: "raleway",sans-serif;
	text-transform: uppercase;
}

/* SVG Support
-------------------------------------------------- */
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
}

body.shrink {
/*   padding-top: 60px; */
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

#footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}
.logo {
	font-size: 16px;
}

/* Custom Navbar stuff
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.navbar-custom {
	z-index: 3;
	transition: all .2s;
	font-family: "raleway",sans-serif;
}
.shrink .navbar-custom {
	border-bottom: 0px solid #C76565;
	background-color: rgba(255, 255, 255, 0.95)
}
.shrink .navbar-custom[data-navbar-style=navbar-style-light] {
	border-bottom: none;
	background-color: transparent;
}
.navbar-custom .navbar-toggle .icon-bar {
	background-color: #FFF;
}
.nav > li > a {
  color: #FFF;
  font-size: 18px;
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .active > a:hover {
    font-weight: bold;
}
.shrink .nav > li > a {
  color: #2f4454;
}

.nav>li>a:focus, 
.nav>li>a:hover {
	background: transparent;
}

.navbar-brand {
	display: block;
/* 	background: url(../img/FVO.png) left center no-repeat; */
	background-size: contain;
	text-indent: -2000px;
	overflow: hidden;
	margin: 10px 0 10px 15px;
	padding: 0 0 0 10px;
	width: 150px;
	height: 0px;
	transition: all .2s;
}

.shrink .navbar-brand {
/* 	background-image: url(../img/FVO-p.png); */
	height: 40px;
	margin-top: 15px;
	text-indent: inherit;
}
.shrink .navbar-brand .icon {
	font-size: 40px;
}


@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}
@media (max-width: 767px) {
	.container>.navbar-collapse {
		max-height: 100%;
	}
	body.hamburger-nav-open {
		overflow: hidden;
	}
	body.hamburger-nav-open .container>.navbar-collapse {
		background-color: rgb(28, 51, 52);
		position: fixed;
		width: 100%;
		max-height: 100%;
		height: 100%;
	}
	body.hamburger-nav-open .navbar-custom {
		background-color: rgb(28, 51, 52) !important;	
	}
	
	body.hamburger-nav-open .navbar-brand {
		height: 40px;
		margin-top: 15px;
		text-indent: inherit;
	}
	.navbar-brand .icon {
		font-size: 40px;
	}
	body.hamburger-nav-open .navbar-custom .navbar-brand,
	body.hamburger-nav-open .navbar-custom .nav > li > a {
		color: #FFF !important;
	}
	body.hamburger-nav-open .navbar-toggle {
		padding-top: 19px;	
	}
	body.hamburger-nav-open .navbar-toggle .icon-bar {
		background-color: #FFF !important;
	}
	
	body.hamburger-nav-open .navbar-toggle .icon-bar:first-child {
		transform: rotate(45deg);
		transform-origin-y: 11px;
		transition: all 0.3s ease;
	}
	body.hamburger-nav-open .navbar-toggle .icon-bar:nth-child(2) {
		display: none;
	}
	body.hamburger-nav-open .navbar-toggle .icon-bar:last-child {
		transform: rotate(-45deg);
		transform-origin-y: -9px;
		transition: all 0.5s ease;
	}
	
	body.hamburger-nav-open .navbar-custom {
		border-bottom: none !important;
	}
}
/* Navbar styles
-------------------------------------------------- */

.shrink .navbar-custom[data-navbar-style=navbar-style-default] {
	border-bottom: none;
	background-color: transparent;
}
.shrink .navbar-custom[data-navbar-style=navbar-style-white] {
	border-bottom: 1px solid rgb(221, 188, 179);
	background-color: #FFF;
}
.shrink .navbar-custom[data-navbar-style=navbar-style-blue] {
	border-bottom: none;
	background-color: rgba(48, 69, 85, 0.95);
}
.shrink .navbar-custom[data-navbar-style=navbar-style-green] {
	border-bottom: none;
	background-color:  rgba(28, 50, 52, 0.97);
}
.shrink .navbar-custom[data-navbar-style=navbar-style-pink] {
	border-bottom: none;
	background-color: rgba(221, 188, 179, 0.9);
}
.shrink .navbar-custom[data-navbar-style=navbar-style-lightpink] {
	border-bottom: none;
	background-color: rgba(255, 244, 246, 0.97);
}
.shrink .navbar-custom[data-navbar-style=navbar-style-lightgrey] {
	border-bottom: none;
	background-color: rgba(234, 233, 229, 0.97);
}
.shrink .navbar-custom[data-navbar-style=navbar-style-darkgrey] {
	border-bottom: none;
	background-color: rgba(148, 149, 153, 0.97);
}


.shrink .navbar-custom[data-navbar-color=navbar-color-white] .nav > li > a,
.shrink .navbar-custom[data-navbar-color=navbar-color-white] .navbar-brand {
	color: #FFF;
}
.shrink .navbar-custom[data-navbar-color=navbar-color-white] .navbar-toggle .icon-bar {
	background-color: #FFF;
}

.shrink .navbar-custom[data-navbar-color=navbar-color-blue] .nav > li > a,
.shrink .navbar-custom[data-navbar-color=navbar-color-blue] .navbar-brand {
	color: rgb(48, 69, 85);
}
.shrink .navbar-custom[data-navbar-color=navbar-color-blue] .navbar-toggle .icon-bar {
	background-color: rgb(48, 69, 85);
}

.shrink .navbar-custom[data-navbar-color=navbar-color-green] .nav > li > a,
.shrink .navbar-custom[data-navbar-color=navbar-color-green] .navbar-brand {
	color: rgb(28, 50, 52);
}
.shrink .navbar-custom[data-navbar-color=navbar-color-green] .navbar-toggle .icon-bar {
	background-color: rgb(28, 50, 52);
}

.shrink .navbar-custom[data-navbar-color=navbar-color-pink] .nav > li > a,
.shrink .navbar-custom[data-navbar-color=navbar-color-pink] .navbar-brand {
	color: rgb(221, 188, 179);
}
.shrink .navbar-custom[data-navbar-color=navbar-color-pink] .navbar-toggle .icon-bar {
	background-color: rgb(221, 188, 179);
}

.shrink .navbar-custom[data-navbar-color=navbar-color-lightpink] .nav > li > a,
.shrink .navbar-custom[data-navbar-color=navbar-color-lightpink] .navbar-brand {
	color: rgb(255, 244, 246);
}
.shrink .navbar-custom[data-navbar-color=navbar-color-lightpink] .navbar-toggle .icon-bar {
	background-color: rgb(255, 244, 246);
}

.shrink .navbar-custom[data-navbar-color=navbar-color-dark] .nav > li > a,
.shrink .navbar-custom[data-navbar-color=navbar-color-dark] .navbar-brand {
	color: rgb(148, 149, 153);
}
.shrink .navbar-custom[data-navbar-color=navbar-color-dark] .navbar-toggle .icon-bar {
	background-color: rgb(148, 149, 153);
}

.shrink .navbar-custom[data-navbar-color=navbar-color-black] .nav > li > a,
.shrink .navbar-custom[data-navbar-color=navbar-color-black] .navbar-brand {
	color: rgba(0, 0, 0);
}
.shrink .navbar-custom[data-navbar-color=navbar-color-black] .navbar-toggle .icon-bar {
	background-color: rgb(0, 0, 0);
}

/* Colours
-------------------------------------------------- */
.highlight {
	color: rgb(221, 188, 179);
}
.highlight-bg {
/* 	background-color: #eb3552; */
	background-color: #2f4454;
	color: #E9E8E3;
}
.dark {
	color: #00587f;	
}
.dark-bg {
	background-color: #00587f;	
	color: #FFF;
}
.light {
	color: #E9E8E3;
}
.light-bg {
	background-color: #E9E8E3;
	color: #3D5266;
}
.white {
	color: #FFF;
}
.white-bg {
	background-color: #FFF;
	color: #3D5266;
}

.light-bg .btn.btn-ghost,
.white-bg .btn.btn-ghost {
	color: #eb3552;
	border-color: #eb3552;
}

.light-bg .btn.btn-ghost:hover,
.white-bg .btn.btn-ghost:hover {
	color: #FFF;
	background-color: #eb3552;
}
.dark-grey-bg {
	background-color: #949599;	
	color: #FFF;
}

/* #888785 */

/* Typography
-------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: "raleway",sans-serif;
}

h4.h1, h2.h1 {
	font-size: 24px;
}

@media only screen and (min-width: 400px) {
	h4.h1, h1, h2.h1 {
		font-size: 30px;
	}
}

@media only screen and (min-width: 767px) {
	h4.h1, h1, h2.h1 {
		font-size: 48px;
	}
}


/* Buttons
-------------------------------------------------- */
.btn.btn-ghost {

	background: transparent;
	color: #FFF;
	padding: 10px 35px;
	font-weight: 500;
	border-width: 2px;
	
	/* CSS Transition */
	-webkit-transition: background .2s ease-in-out, border .2s ease-in-out;
	-moz-transition: background .2s ease-in-out, border .2s ease-in-out;
	-ms-transition: background .2s ease-in-out, border .2s ease-in-out;
	-o-transition: background .2s ease-in-out, border .2s ease-in-out;
	transition: background .2s ease-in-out, border .2s ease-in-out;
	
	-webkit-border-radius: 0;
	-moz-border-radius:    0;
	border-radius:         0;
	
	border-color: #FFF;
	
	letter-spacing: 2px;
	
	box-shadow: none;
	-webkit-box-shadow: none;
	white-space: normal;
}

.btn.btn-ghost:hover {
	background: #FFF;
	color: #000;
}


/* Home page CSS
-------------------------------------------------- */
body.index {
/*
	background: url(../img/feature.jpg) right bottom;
	background-size: cover;
*/
}
#home {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: 0;
	top: 0;
}

#footer {
	position: relative;
	margin-top: -60px;
	background: transparent;	
}

#home-content {
	min-height: 1500px;
	margin-top: 100%;
	background: #FFF;
	position: relative;
	z-index: 2;
}
#homepage-panels {
	padding-top: 60px;
}
.home-panel {
	padding: 100px 0;
	display: flex;
	align-items: flex-start;
}
.home-panel.banner {
	background: #000 url(/assets/components/theme/img/home.jpg);
	background-size: cover;
}
.home-panel.clients {
	background: #FFF;
}

.home-panel.about {
	padding: 0;
	display: block;
	position: relative;
}
.home-panel.about strong {
	color: rgb(221, 188, 179);
}

.home-panel.about .pseudo-panel {
	display: flex;
	align-items: center;
/*
	position: absolute;
	top: 0;
	opacity: 1;
	z-index: 99;
*/
}
/*
.home-panel.about .pseudo-panel:last-child {
	opacity: 0;
	bottom: 0;
	top: auto;
	z-index: 98;
}
*/
.home-panel.about h2 {

}
.home-panel.about .pseudo-panel.fixed {
	position: fixed;
}
	
@media (min-width: 768px) {
	.home-panel.about p {
		font-size: 24px
	}
}
#about-more {
	flex-direction: column;
	justify-content: flex-start;
	padding: 50px 0;
}
@media screen and (min-width: 992px) {
	#about-more {
		justify-content: space-around;
		padding: 200px 0;	
	}
}
.about-more-img {
	max-width: 500px;
	flex-grow: 1;
}
.about-more-text {
	flex-grow: 1;	
}
.home-panel.testimonials {
	align-items: center;
}

.home-panel.testimonials .container,
#testimonial-carousel {
	height: 100%;
}

#testimonial-carousel {
	display: flex;
	align-items: center;
}

.home-panel.testimonials blockquote {
	border-left: none;
}

.home-panel.testimonials blockquote h4 {
	margin-bottom: 10%;
}

.home-panel.testimonials blockquote footer {
	color: #FFF;	
}
@media (min-width: 768px) {
	.home-panel.testimonials blockquote footer {
		font-size: 150%;	
	}
}

.home-panel.testimonials .carousel-indicators {
	bottom: -20px;
}

.home-panel.testimonials .carousel-indicators li {
	border: 1px solid #FFF;
}

.home-panel.testimonials .carousel-indicators li.active {
	background-color: #FFF;
}

.home-panel.banner > .container {
	
}

.home-panel.contact {
	align-items: center;
}

.home-panel.contact h2 {
	margin-bottom: 75px;	
}

#home > .showreel {
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}
#home > .showreel h1 {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 10%;
}
#home > .showreel p {
	font-size: 18px;
}
#home > .showreel .logo {
	font-size: 50px;
}
.showreel a {
	color: #FFF;
}
.showreel a:hover {
	text-decoration: none;
}
#work-link {

}
#work {
	padding-top: 60px;
}
#work-more-link {
	visibility: hidden;
	color: #FFF;
	display: block;
	margin-top: 1em;
	font-family: "raleway", sans-serif;
}
#work-more-link span {
	padding: 0 20px;
	display: inline-block;
	white-space: nowrap;
}
#work-more-link:hover span:hover {
	color: rgb(221, 188, 179);	
}
a.home-panel-link {
	display: inline-block;
	text-decoration: none;
	font-size: 28px;
	color: #E0B8B1;
}

a.btn.cta {
	margin-top: 5%;
	font-size: 18px;
	text-transform: uppercase;
}

@media screen and (min-width: 400px) {
	#home > .showreel .logo {
		font-size: 75px;
	}
	#home > .showreel h1 {
		font-size: 48px;
	}
	#home > .showreel p {
		font-size: 24px;
	}
	a.btn.cta {
		font-size: 24px;
	}
}

@media screen and (min-width: 992px) {
	#home > .showreel .logo {
		font-size: 100px;
	}
	#home > .showreel h1 {
		font-size: 60px;
	}
	#home > .showreel p {
		font-size: 30px;
	}
	a.btn.cta {
		font-size: 30px;
	}
}

@media screen and (min-width: 1199px) {
	#home > .showreel .logo {
		font-size: 120px;
	}
	#home > .showreel h1 {
		font-size: 72px;
	}
	#home > .showreel p {
		font-size: 36px;
	}
	a.btn.cta {
		font-size: 36px;
	}
}

/* Animated Text */
#style-tags {
	margin: 0 20px;
	height: 150px;
}
#style-tags a {
	color: #FFF;
	font-size: 22px;
	white-space: nowrap;
}

.text-fade-in-out {
	padding: 0 25px;
}


#listen .h1 {
	margin: 1.5em 0;
}

.grid-sizer,
.workItem { width: 25%; height: 200px;}
.workItem {
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
/* 2 columns wide */
.workItem--width2 { width: 50%; }
.workItem--height2 { height: 400px; }




.workItem-inner {
	position: absolute;
	top: 7px;
	left: 7px;
	bottom: 7px;
	right: 7px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-align: center;
}

.playing .workItem-inner,
.workItem-inner:hover {
	display: flex;
	background-color: rgba(0, 0, 0, .6);
	color: #FFF;
}

.workItem:hover {
	filter: grayscale(100%);
}

.workItem:hover > .fvo-player {
	filter: grayscale(0%);
}

.fvo-player {
	visibility: hidden;
}
















.grid {
	max-width: 69em;
	list-style: none;
	margin: 50px auto 30px;
	padding: 0;
}

.grid li {
	display: block;
	float: left;
	padding: 7px;
	width: 33%;
	opacity: 0;
}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	max-width: 90%;
	margin: 0 auto;
}

/* Effect 1: opacity */
.grid.effect-1 li.animate {
	-webkit-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

@keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

/* Effect 2: Move Up */
.grid.effect-2 li.animate {
	-webkit-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

/* Effect 3: Scale up */
.grid.effect-3 li.animate {
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: scaleUp 0.65s ease-in-out forwards;
	animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

/* Effect 4: fall perspective */
.grid.effect-4 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-4 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	-webkit-animation: fallPerspective .8s ease-in-out forwards;
	animation: fallPerspective .8s ease-in-out forwards;
}

@-webkit-keyframes fallPerspective {
	0% { }
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@keyframes fallPerspective {
	0% { }
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-5 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-5 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -300px;
	transform-origin: 50% 50% -300px;
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-animation: fly .8s ease-in-out forwards;
	animation: fly .8s ease-in-out forwards;
}

@-webkit-keyframes fly {
	0% { }
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes fly {
	0% { }
	100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-6 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-6 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: rotateX(-80deg);
	transform: rotateX(-80deg);
	-webkit-animation: flip .8s ease-in-out forwards;
	animation: flip .8s ease-in-out forwards;
}

@-webkit-keyframes flip {
	0% { }
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
	0% { }
	100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-7 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-7 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-animation: helix .8s ease-in-out forwards;
	animation: helix .8s ease-in-out forwards;
}

@-webkit-keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}

@keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
}

/* Effect 8:  */
.grid.effect-8 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-8 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
	-webkit-animation: popUp .8s ease-in forwards;
	animation: popUp .8s ease-in forwards;
}

@-webkit-keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

@media screen and (max-width: 900px) {
	.grid li {
		width: 50%;
	}
}

@media screen and (max-width: 400px) {
	.grid li {
		width: 100%;
	}
}



/*

 Media Playback buttons
 ------------------------------------
*/


a.sm2_button,
a.yt-player,
a.vm-player {
	position:relative;
	display:inline-block !important; /* If you worry about old browser bugs, Firefox 2 might not like this and may need -moz-inline-box instead. :D */
	width:48px;
	height:48px;
	text-indent:-9999px; /* don't show link text */
	overflow:hidden; /* don't draw inner link text */
	vertical-align:middle;
	background-size: 24px 24px;
	/* and, a bit of round-ness for the cool browsers. */
	border-radius:24px;
	background-position: center center;
}

a.sm2_button:focus,
a.yt-player:focus,
a.vm-player:focus {
	outline:none; /* maybe evil, but don't show the slight border outline on focus. */
}

a.sm2_button,
a.yt-player,
a.vm-player {
	background-color:#333;
	background-image:url(../img/play-white.png);
	background-repeat:no-repeat;
	background-position: 60% center;
}

a.sm2_button:hover,
a.sm2_button.sm2_playing:hover {
	background-color:#000;
}

a.sm2_button.sm2_playing,
a.sm2_button.sm2_playing:hover {
	background-image:url(../img/pause-white.png);
	background-position: center center;
}

a.sm2_button.sm2_paused,
a.sm2_button.sm2_paused:hover {
	background-image:url(../img/play-white.png);
	background-position: 60% center;
}

a.sm2_button.sm2_buffering,
a.sm2_button.sm2_buffering:hover,
.loading a.yt-player,
.loading a.yt-player:hover,
.loading a.vm-player,
.loading a.vm-player:hover {
	background-image:url(../img/loader.svg);
	background-position: center center;
	background-size: 32px 32px;
}

.loading iframe {
	display: none;
}

.media-type-3.playing .fvo-player,
.workItem-inner:hover .fvo-player,
.media-type-7.loading .fvo-player,
.media-type-8.loading .fvo-player {
	visibility: visible;
}

.media-type-7.playing .workItem-inner,
.media-type-8.playing .workItem-inner {
	background-color: rgba(0, 0, 0, 1);
}

.media-type-7.playing .fvo-player,
.media-type-7.playing .workItem-inner:hover .fvo-player,
.media-type-8.playing .fvo-player,
.media-type-8.playing .workItem-inner:hover .fvo-player {
	visibility: hidden;
	display: none;
}

#yt-movie iframe, 
#vm-movie iframe { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}



a#work-link.sm2_button {
	text-indent: 0;
	width: auto;
	height: auto;
	background-repeat: no-repeat;
	background-size: 32px;
	background-position: center center;
	color: #f3e2da;
	border-color:  #f3e2da;
}
a#work-link.sm2_button:hover {
	color: #949599;
	background-color: #f3e2da;
	border-color:  #f3e2da;
}
a#work-link.sm2_button.sm2_buffering,
a#work-link.sm2_button.sm2_playing,
a#work-link.sm2_button.sm2_paused {
	text-indent: -9999px;
	background-color: transparent;
}

a#work-link.sm2_button.sm2_buffering:hover,
a#work-link.sm2_button.sm2_playing:hover,
a#work-link.sm2_button.sm2_paused:hover {
	background-color: transparent;
}



/*

 Contact Form
 ------------------------------------
*/

#contact-form {
	
}
#contact-form-hide {
	position: relative;
}
#contact-form-hide > .btn {
	position: absolute;
	top: -30px;
	right: -30px;
	font-size: 30px;
	color: #FFF;
}

#contactModal .modal-content {
	background-color:  rgb(221, 188, 179);
	color: #FFF;
}
#contactModal .modal-header {
	border-bottom: none;
}
#contactModal .close {
	color: #FFF;
}

@-webkit-keyframes fadeOutCollapse {
    0% {
        opacity: 1;
        height: 100%;
    }

    100% {
        opacity: 0;
        height: 0;
    }
}

@keyframes fadeOutCollapse {
    0% {
        opacity: 1;
        height: 100%;
    }

    100% {
        opacity: 0;
        height: 0;
    }
}

.fadeOutShrink {
    -webkit-animation-name: fadeOutCollapse;
    animation-name: fadeOutCollapse
}

@-webkit-keyframes fadeInExpand {
    0% {
        opacity: 0;
        height: 0;
    }

    100% {
        opacity: 1;
        height: 100%;
    }
}

@keyframes fadeInExpand {
    0% {
        opacity: 0;
        height: 0;
    }

    100% {
        opacity: 1;
        height: 100%;
    }
}

.fadeInExpand {
    -webkit-animation-name: fadeInExpand;
    animation-name: fadeInExpand
}