/* MAIN */
html, body {
	height: 100%;
	background-color: #030a12;
	overflow: auto !important;
	margin: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
position: relative;
z-index: 110;
}
/* OVERLAY WRAPPER */
.overlayWrapper {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: -100;
	padding-top:2.2vh;
height: 100vh;
width: 100%;
top: 0;
background-color: #030a12;
opacity: 0;
}

/* MAIN NAV LINKS */
.mainNavLinks {
margin: 0;
padding: 0;
/*overflow: hidden;*/
}

.mainNavLinks li {
list-style: none;
margin: 0 0 45px 0;
padding: 0;
transform: translateY(730px);	
transition: all 600ms ease;
opacity: 0;
}

/* ANIMATE NAV LINKS FADE IN/UP */
.mainNavLinks li.fadeInUp {
transform: translateY(0);
animation: fadeInUp ease 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

/* ANIMATE NAV LINKS FADE OUT/DOWN */
.mainNavLinks li.fadeOutDown {
transform: translateY(950px);
animation: fadeInDown ease 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

/* MAIN NAV LINKS */
.mainNavLinks li a {
display: block;
text-decoration: none;
text-align: center;
color:#a06d1c;
text-decoration: none;
font-size: 14px;
font-family: 'one_dayregular';
text-transform: uppercase;
letter-spacing: 4px;
transition: all .45s ease;
}
.mainNavLinks li a:hover {
content: '';
transition: 1.135s;
color:#dfc08e;
}

#mainNavLinks_active a{
color:#dfc08e;
}
.mainNavLinksOffCanvas {
position: fixed;
top: 0;
left: 0;
transform: translateX(-100%)
}

/* ANIMATE OVERLAY WRAPPER FADE IN */
.overlayWrapper.fadeInOverlay {
animation: fadeInOverlay ease 700ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
z-index: 100;
}
/* ANIMATE OVERLAY WRAPPER FADE OUT */
.overlayWrapper.fadeOutOverlay {
animation: fadeOutOverlay ease 700ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

/* COPYRIGHT */
.copyRight {
color: #a06d1c;
	font-size: 7px;
	font-family: 'one_dayregular';
	text-transform: uppercase;
	letter-spacing: 2.5px;
position: fixed;
bottom: 30px;
transform: translateY(100px);
transition: all 1s ease;
	opacity.6;
}

.copyRight.copyRightSlideUp {
transform: translateY(0);
}


/* -------KEYFRAME ANIMATIONS-------- */
/* MAIN NAV LINKS FADE IN/UP */
@keyframes fadeInUp {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


@keyframes fadeInDown {
0% {
opacity: 1;
}
25% {
opacity: .15;
}
100% {
opacity: 0;
}
}

/* FADE IN OVERLAY */
@keyframes fadeInOverlay {
0% {
opacity: 0;
}
100% {
opacity: .95;
}
}

/* FADE OUT OVERLAY */
@keyframes fadeOutOverlay {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
 
a {
	transition: all 2.5s ease;
}
a:link, a:visited, a:active {
	text-decoration: none;	
}

.textAnimate {
	transform: translateY(120px);
}

.main-contents {
	height: 637px;
	margin: 72px auto;
	width: 100%;
}
.main-contents-about {
	margin: 0 auto;
	text-align: justify;
	max-width: 875px;
	padding: 80px 5% 0;
	min-height: 75vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.main-contents-connect {
	align-items: center;
	color:#f6e2d3;
	display: flex;
	justify-content: center;
	letter-spacing: .1em;
	min-height: 82vh;
	padding: 80px 5% 0;
	text-align: left;
}
.main-contents .thumb-container {
	margin: 0px;
}

.footer_slide_up {				
	position:fixed;
	width: 100vw;
	display: flex; 
	justify-content: center;
	padding: 25px 0;
	bottom: 0;
	animation: slideup .5s forwards;
	animation-delay: 1.8s;
	transform: translateY(100%);
}

.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	transform: translateY(100%);
	transition: all .75s ease;
	text-align: center;
	padding: 15px 0;
}
.slideUp {
	transform: translateY(0);
	/* animation-name: slideUp;
	-webkit-animation-name: slideUp;	
	animation-duration: .55s;	
	-webkit-animation-duration: .55s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	visibility: visible !important;	 */
}
.static {
	position: static;
}

.copyright {
	display: flex;
	justify-content: center;
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 30000000000000000000000000;
	transform: translateY(100%);
	padding: 20px 0;
	transition: all .75s ease;
}
.copyright a {
	color: #dc7f1d;
	font-size: 7px;
	font-family: 'one_dayregular';
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 2.5px;
	opacity:.6;
}
.copyrightSlideUp {
	transform: translateY(0)
}

.button_container {
	position: fixed;
	top: 22px;
	right: 22px;
	height: 64px;
	width: 27px;
	cursor: pointer;
	z-index: 999999999999999999999999999999999999999999999999999999999999;
	transition: .2s;
}
.button_container.active .top {
	transform: translateY(8px) translateX(-2px) rotate(60deg); /* top left */
	width: 66%;
	background: #cf9153;
	z-index: 999999999999999999999999999999999999999999999999999999999999;
}
.button_container.active .middle {
	transform: translateY(-3px) translateX(13px) rotate(-60deg);/* top right */
	width: 69%;
	background: #97630f;
}
.button_container.active .middle2 {
	transform: translateY(5px) translateX(-2px) rotate(120deg);/* bottom left */
	width: 69%;
	background: #97630f;
}
.button_container.active .bottom {
	transform: translateY(-6px) translateX(13px) rotate(-120deg);/* bottom right */
	width: 72%;
	background: #97630f;
	z-index: 999999999999999999999999999999999999999999999999999999999999;
}
.button_container span:nth-of-type(2) {
	top: 11px;
}
.button_container span:nth-of-type(3) {
	top: 23px;
}
.button_container span:nth-of-type(4) {
	top: 34px;
}
.button_container span:nth-of-type(5) {
	top: 70px;
}
.button_container span:nth-of-type(5) {
	top: 65px;
}
.button_container span {
	background: #a06d1c;
	
	
	height: 1.1px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .35s ease;
	
	cursor: pointer;
	z-index: 999999999999999999999999999999999999999999999999999999999999;
	opacity:1;
}
.button_container:hover {
	/* width:86px;
	right:44px;	
	transition: .2s; */
	width:34px;
	right:22px;
	transition: .2s;
}
.button_container_home {
	right: 22px;
	-webkit-animation: slideInR .8s forwards cubic-bezier(.19,.17,.35,1.09);
	-moz-animation: slideInR .8s forwards cubic-bezier(.19,.17,.35,1.09);
	animation: slideInR .8s forwards cubic-bezier(.19,.17,.35,1.09);
}
.button_container_home:hover, .button_container_movies:hover {
	right:18px;
}

.fadeOut {
	opacity: 0;
}
.fadeIn {
	opacity: .93 !important;
}

.overlayz {
	position: fixed;
	background: #030a12;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: opacity .15s, visibility .15s, height .31s;
	z-index: 2000000000000000000000000000000000000000000000000000000000000000000;
}
.overlayz.open {
	opacity: .95;
	transition-timing-function: cubic-bezier(1, 0, 1, .1);
	visibility: visible;
	height: 100%;
	z-index: 999;
}
.overlayz.fadeOut {
	opacity: 0!important;
	transition: opacity .3s ease-out;
}
.overlayz.open li {
	animation: fadeInRight .5s ease forwards;
	animation-delay: .35s;
}
.overlayz.open li:nth-of-type(2) {
	animation-delay: .4s;
}
.overlayz.open li:nth-of-type(3) {
	animation-delay: .45s;
}
.overlayz.open li:nth-of-type(4) {
	animation-delay: .50s;
}
.overlayz.open li:nth-of-type(5) {
	animation-delay: .50s;
}

.overlayz nav {
	position: relative;
	height: 50%;
	top: 62%;
	transform: translateY(-50%);
	text-align: center;
}
.overlayz ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	height: 100%;
}
.overlayz ul li {
	display: block;
	height: 50%;
	height: calc(50% / 4);
	min-height: 30px;
	position: relative;
	opacity: 0;
}
.overlayz ul li a {
	display: block;
	position: relative;
	color:#a06d1c;
	text-decoration: none;
	overflow: hidden;
	font-size: 14px;
	font-family: 'one_dayregular';
	text-transform: uppercase;
	letter-spacing: 4px;
	transition: all .45s ease;
}
.overlayz ul li a:hover {
	content: '';
	transition: 1.135s;
	color:#dfc08e;
}


#overlayz_active a{
	color:#dfc08e;
}

.th_logo_white {
	position:fixed;
	top:20px;
	left:20px;
	width:27px;
	height:44px;
	z-index: 9999999999999999999999999999999999999999999999999999999999999;
	transition: .2s;
	opacity:93;
}
.th_logo_white_home {
	left: 22px;
	-webkit-animation: slideInL .8s forwards cubic-bezier(.19,.17,.35,1.09);
	-moz-animation: slideInL .8s forwards cubic-bezier(.19,.17,.35,1.09);
	animation: slideInL .8s forwards cubic-bezier(.19,.17,.35,1.09);
}
#social_overlay {
	display: flex; 
	justify-content: center;
}
#social_overlay2 {
	padding-left:9px;
	width:100%
}
.social_font {
	text-transform: lowercase;
	font-style: normal;
	padding-right:.7em;
	margin-top:.5vw;
	color:#a06d1c;
	font-size:1.4em;
	font-family: 'font_100_iconsregular';
	transition: all .45s ease;
	z-index: 99999999999999999999999999999999999999999999999999999999999999999999999;
}
.social_font:hover {
	color:#f1c57f;
}

#toggle {
	position: absolute;
	z-index: 200000000000000000000000000000000000000000000000000000000000000;
}
#toggle.fixed-toggle {
	position: fixed;
}

.showHide {
	display: none;
}
.clear {
	clear: both;
}

/* Work Grid */
/* Removed grid, way over kill */
.videoGalleryWrapper {
	padding-top: 80px;
	padding-bottom: 8px;
	margin: 0; /* Cleaned up margins */
	font-size: 0; /* Because a div without text in it still leaves room for text */
	width: 100vw; /* Because '.slider' onload container is absolute posistioned  */
}

	/* 	Where is this being used? */
	.videoGalleryslide {
		top:500px;
		transform: translateY(0);
		transition: transform 300ms ease-in-out;
	}
	.videoShowcase {
		display: flex;
		flex-direction:	column;
		height: 100vh;
		width:	100vw;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		
	}	
	.videoContainer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		
		z-index: 0;
	}
	
	.videoContainer::after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-color: rgba(0, 0, 0, 0.38);
		overflow: hidden;	
	}
	.videoContainer video {
		min-width: 100%;
		min-height: 100%;
		object-fit: cover;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: all 700ms ease-in-out;
		opacity: 0;
		z-index: 0;
		
		
	}


/* Work Block */
.reelVideoContainer {
	width: calc(50% - 4px); /* Allowing for 4px margin side */
	display: inline-block;
	position: relative;
	opacity: 0;
	margin:	0 4px 8px 4px;
	overflow: hidden;
	transform: translateY(83px);
	transition: all .75s cubic-bezier(.49,.44,.37,1.14);
}
/* So blocks touch edge of screen */
.reelVideoContainer:nth-child(odd) {
	margin-left: 0;
}
.reelVideoContainer:nth-child(even) {
	margin-right: 0;
}

/* For below, see https://alistapart.com/article/creating-intrinsic-ratios-for-video/ */
.sizer {
	height: 0;
	padding-bottom: 46.875%;
}
.reelVideoContainer video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 10;
	opacity: 0;
	transition: opacity 500ms ease-in-out;
}
.reelVideoContainer img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.reelVideoContainer:hover video {
	opacity: 1;
}
	
	/* 	Where is this being used? */
	.videoText {
		margin-top: 10px;
		text-align: center;
		transition: opacity 700ms cubic-bezier(.22,.05,.54,1.31);
	}
	.videoText h2 {
		margin:	0 0 32px 0;
		padding: 0;
		font-size: 66px;
		font-weight: normal;
		font-family:'monotonregular', san-serif;
		
		color:#a06d1c;
		line-height: 1;
		letter-spacing: 6px;
		text-transform:	uppercase;
		transition: all .33s cubic-bezier(.22,.05,.54,1.31);
		opacity: 0;
		transition-delay: .03s cubic-bezier(.22,.05,.54,1.31);
	}
	.videoText h2:after {
		content: ""; 
		display: block; /* This will put the pseudo element on its own line. */
		margin: 0 auto; /* This will center the border. */
		width: 22%; /* Change this to whatever width you want. */
		margin-bottom:-13px; /* This creates some space between the element and the border. */
		border-bottom: solid .012em #a06d1c ; /* This creates the border. Replace black with whatever color you want. */
			border-style:dashed;
		
		opacity: .7;
		margin-top: 22px;
	}	

	.videoText h4 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin:	0 0 32px 0;
		padding: 0;
		font-family:'one_dayregular', san-serif;
		color: #d1b993; 
		font-size: 19px;
		line-height: 32px;
		letter-spacing: 5px;
		text-transform:	uppercase;
		transition: all .36s cubic-bezier(.22,.05,.54,1.31);
		opacity: 0;
	}
	.videoText h5 {
		margin:	0;
		padding: 0;
		font-size: 11px;
		line-height: 26px;
		letter-spacing: 3px;
		text-transform:	uppercase;
		font-family: 'one_dayregular';
		color: #bda785; 
		transition: all .36s cubic-bezier(.22,.05,.54,1.31);
		opacity: 0;
		padding-left: 15px;
		padding-right: 15px;
	}

/* 
 * Meta
 * Rebuilt to be less responsive, use CSS for hover state
 * You had positioning and translation, makes it confusing to position elements.
 * Note you can animate position.
 */
.reelVideoText {
	position: absolute;
	z-index: 20;
	left: 10px;
	right: 10px;
	bottom: -25px;
	transition: bottom 300ms ease-in-out;
	font-size: 18px;
	font-family:'one_dayregular', san-serif;
	color: #dfc08e; 
	text-align: center;
	text-transform:uppercase;
}
/* Resetting font sizing, hacky but hard for me to unravel
 * Read about responsive font sizing, you over-thought it. You used so many different unit types. I prefer px sizing and media queries, more predicatble.
 */
.reelVideoText,
.reelVideoText .brand-upper,
.reelVideoText .dot,
.reelVideoText .spot_title,
.reelVideoText .reelAgency {
	letter-spacing: .2em;
	font-size: 1vw;
	line-height: 1;
}
.agency a{
font-family:'one_dayregular', san-serif;
	
}
.reelVideoContainer:hover .reelVideoText {
	bottom: 20px;
	transition: all .47s cubic-bezier(.63,.31,.14,1.44);
}
.reelVideoContainer:hover .brand_upper{
	bottom: 20px;
	transition: all 1.17s cubic-bezier(.63,.31,.14,1.44);
}


.slideUpVideoText {
	transform: translateY(0);
	
}

.fadeInVideo {
	opacity: 1;
	transform: translateY(0);
}

.slideUp_thumb1 {
	animation-name: slideUp_thumb1;
	-webkit-animation-name: slideUp_thumb1;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: cubic-bezier(.24,.51,.37,1.05);	
	-webkit-animation-timing-function: cubic-bezier(.24,.51,.37,1.05);
	visibility: visible !important;			
}

.brand_heyman {
	font-size: 42%;
	line-height:2px;
	letter-spacing: 1.5px;
	font-family:'monotonregular', san-serif;
	color:#a06d1c;
}
.title_heyman {
	font-size: 68%;
	letter-spacing: 4px;
} 
.dot {
	color:#a06d1c;
	font-size: 83%;
	vertical-align: center;
	font-family:'monotonregular', san-serif;
	vertical-align: center;
}
.slash {
	color:#a06d1c;
	font-size: 100%;
	vertical-align: center;
	font-family:'one_dayregular', san-serif;
	vertical-align: center;
}
.cross {  
	font-size: 100%;
	vertical-align: center;
	line-height: normal;
	display: inline-block;
	margin-left:1.25em;
	margin-right:1.25em;
	font-weight: normal;
font-family:'monotonregular', san-serif;
	color:#a06d1c;
}
.cross2 {  
	font-size: 95%;
	vertical-align: center;
	line-height: normal;
	display: inline-block;
	margin-left:.5em;
	margin-right:.5em;
	font-weight: normal;
	font-family:'monotonregular', san-serif;
	color: #a06d1c;
}
.cross2 a {  
	font-weight: normal;
	font-family:'monotonregular', san-serif;
	color: #a06d1c;
}

/*REEL*/
.slider{ 
	position: absolute; 
	top: 2000px; 
}
.activer{ 
	position: absolute; 
	top: 0px; 
	transition-duration: 1s; 
	transition-timing-function: cubic-bezier(.24,.51,.37,1.08);
}
.blur { animation: blur 250ms; }

@keyframes blur {
  0% { -webkit-filter: blur(0px); }
  50% { -webkit-filter: blur(5px); }
  100% { -webkit-filter: blur(0px); }
}
 
 
.thumb-container {
	width: 100%;
	position: relative;
	overflow: hidden;
	float: left;	
	border-bottom:solid 3em #d48246;
	height: auto;
	font-size: 0;
}
.imageContainer {
	border:solid 3em #d48246;
	width: 50%;
	margin:0%;
	text-align:center;
}

.brand {
	font-family:'one_dayregular', san-serif;
	color:#ad761f;
	font-weight: 900;

} 
.brand-upper {
	text-transform: uppercase;
		font-size: 1.6vw;
	
}

.agency{	
	font-size: .9vw;  
	font-family: 'one_dayregular';
	vertical-align: center;
	font-weight:100;
	color: #dfc08e; 
	letter-spacing:.15em;
	text-align:center;
	line-height: 2.5rem;
	text-transform: uppercase;  
	display: inline-block;
	opacity:1;
	
} 
.reelAgency {
	line-height: 1;
}

.thumb-overlay {
	position: absolute;
	opacity: 1;
	width: 100%;
	height: 100%;
	transition: all 0.25s ease;
	left: 0px;
	top: 0px;
}
.thumb-container:hover .thumb-overlay {
	background-color:rgba(0,0,0,0);
}

.faded { 
	display: none; 
}

html, body, #cj-thumb-container {
	min-height: 795px;
}

#cj-fade-bg.cj-fade-bg {
	opacity: 0;
	visibility: hidden;	
}
a img {
	border: 0;	
}

#cj-thumb-container iframe {
	display: flex;	
	top: 50%;	
	visibility: hidden;
	opacity: 0;	
}

.archivetype  {
	padding-bottom:4px;
}
.archivetype a {
	text-align:center;
	font-family:  one_dayregular;
	color:#d8b093;
	font-size: 1.6em;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: .35em;
	font-weight:1000;
	display:inline-block;
	padding-bottom:4px;
}
.archivetype:hover a {
	color:#fff;
}

/*ABOUT*/ 
#header2 {
	position:fixed;
	left: 0;
	top:0px;
	width:100%;
	height:80px;
	background-color: #030a12;
	opacity:.92;
	overflow-y: auto;	
	-webkit-transition: all .3s; /* Safari and Chrome */
	-moz-transition: all .35s; /* Firefox */
	-ms-transition: all .35s; /* IE 9 */
	-o-transition: all .35s; /* Opera */
	transition: all .35s;
	z-index:99;
}

.flex-child {
	flex: 1;
}  
.flex-child:first-child {
	margin-right: 50px;
}

.biotype  {
	font-family: kanitthin;
	color:#fae1b9;
	font-size: 15px;
	font-weight: 500;
	line-height:23px;
	position: relative;
	letter-spacing:0px;
	text-align:justify;
}
.contacttype {
	color:#fae1b9;
	display: flex;
	flex-wrap: wrap;
	font-family: kanitthin;
	font-size: 12px;
	font-weight: 500;
	gap: 3em;
	justify-content: center;
	letter-spacing:0em;
	line-height:20px;
	position: relative;
	text-align:left;
}
.contacttype a:link, .contacttype a:visited {
	font-family: kanitthin;
	color:#fae1b9;
	font-weight: 500;
	line-height:1.9em;
	position: relative;
	letter-spacing:0em;
	text-align:left;
}

#bio_para {
	padding-top:2%;
}

.para_bold {
	font-family: kanitlight;
}
.para_ital  { 
	font-style: oblique;
}

.heyman_title {
	font-weight: 100;
	font-size: 1.95em;
	font-family:'one_dayregular', san-serif;
	color:#dfc08e;
	text-transform: uppercase;
	letter-spacing:.05em;
	text-align: left;
	padding-bottom: 30px;
	opacity:1;
	z-index:99999999999;
}
#words {
	margin-top: 20px;
}
.dga_size {
	position: relative;
	font-weight: 100;
	font-family:'one_dayregular', san-serif;
	color:#dfc08e;
	font-size: 1.6em;
	text-transform: uppercase;
	letter-spacing:.2em;
	text-align: left;
	opacity:.8;
}

.toddpic2 {
	margin-bottom: 15px;
	min-width: 280px;
	padding-right: 18px;
	position: relative;
	vertical-align: middle;
	width: 20vw;
	z-index: 9;
}
.curve { 
	float: left;
	margin-right:2rem; 
	border-radius: 50%;
	
	shape-outside:circle();
	
	
}

.country {
	font-weight: 100;
	font-family: one_dayregular;
	font-size: 1.4em;
	text-transform: uppercase;
	color:#fbc489;
	letter-spacing:.13em;
	text-align: left;
	padding-bottom: 10px;
	border-bottom: solid .03em #c28151;
}
.agent {
	min-width: 160px;
}

.e {
	color:#fbc489;	
}

/*MOVIE*/
#movietype	{
	padding-top:380px;	
}
.brand_movie {
	font-family:'one_dayregular', san-serif;
	color:#f7d8b8;
} 
.title2_movie {	
	font-size: 14px;  
	font-family:'one_dayregular', san-serif;
	color: #f9d2a9; 
	letter-spacing:.3px;
	display: inline-block;
	text-align:center;
	text-transform:uppercase; 
	opacity:.7;
} 

.btn-previous-project, .btn-next-project, .player-close {
	position: absolute;
	overflow: hidden;				
	outline: medium none;
}

.player-close:hover {
	/* transform */
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.085);
	-ms-transform: scale(1.085);
	-o-transform: scale(1.085);
	transform: scale(1.085);
}
.btn-next-project:hover {
	-webkit-transform: translateX(-15px);
	-moz-transform: translateX(-15px);
	-ms-transform: translateX(-15px);
	-o-transform: translateX(-15px);
	transform: translateX(-15px);
	-webkit-transition: opacity 0.25s linear, -webkit-transform 0.3s ease-out;
	-moz-transition: opacity 0.25s linear, -moz-transform 0.3s ease-out;
	transition: opacity 0.25s linear, transform 0.3s ease-out; 
}

.btn-previous-project:hover {
	-webkit-transform: translateX(15px);
	-moz-transform: translateX(15px);
	-ms-transform: translateX(15px);
	-o-transform: translateX(15px);
	transform: translateX(215px);
	-webkit-transition: opacity 0.25s linear, -webkit-transform 0.3s ease-out;
	-moz-transition: opacity 0.25s linear, -moz-transform 0.3s ease-out;
	transition: opacity 0.25s linear, transform 0.3s ease-out; 
}

a.btn-previous-project, a.btn-next-project {
	color: #a6623d;
	text-align: center;
	font-family: 'videocon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 2.3rem;
}
a.player-close {
	color: #a6623d;
	text-align: center;
	font-family: 'videocon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 1.8rem;
}
.player-close {
	top: 13px;
	right: 14px;
}
.media-player .controller {
	opacity: 1;	
}
.media-player .vjs-control-bar {
	opacity: 0;	
}
div.media-player {
	background-color: transparent;
	bottom: 70px;
	left: 11px;
	right: 11px;
}

.media-player:hover .vjs-control-bar, .media-player:hover .controller {
	opacity: 1;
}	

.controller {
	position: absolute;
	top: 0;
	left: 0;
	height: 50%;
	width: 100%;
	z-index: 1;
	background:transparent;
}
.media-container {
	width: 100%;
	height: 100%;
	text-align: center;
}

div.vjs-default-skin .vjs-play-control {
	width: 60px;
}

#movie {
	display: inline-block;
	max-height: 100%;
	max-width: 85%;
	height: 100%;
	position: relative;
}
#movieElement {
	display: inline;
	max-width: 100%;
	max-height: 100%;
}
#movieElement::before {
	content: " ";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
#movieElement_html5_api {
	max-width: 100%;
	max-height: 100%;
	background-color: f9d2a9;
	vertical-align: middle;
}
#movie a.btn {
	position: absolute;
	z-index: 1;
	background-color: transparent;
	transition: all .2s;
	color: #f9d2a9;
	text-align: center;
	font-family: 'source_code_proextralight';
	speak: none;
	font-style: normal;
	font-weight: lighter;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 30px;
	
}
#movie a.btn-previous-project, #movie a.btn-next-project {
	top: 50%;
	font-stretch: ultra-condensed;
	
}
#movie a.btn-previous-project {
	left: -5.5vw;
}
#movie a.btn-previous-project:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}
#movie a.btn-next-project {
	right: -5.5vw;
}
#movie a.btn-next-project:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	
}
#movie a.btn-player-close {
right: -5.5vw;
	top:-2.5vw;
	font-size: 38px;
}
#movie a.btn-player-close:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	
}

/* non-hover, or hover but inactive */
 
#movie .vjs-control-bar, #movie.inactive:hover .vjs-control-bar,
/* initializing state */
#movie.initializing a.btn, #movie.initializing.inactive:hover a.btn,
#movie.initializing .vjs-control-bar, #movie.initializing .inactive:hover .vjs-control-bar {
opacity: 0 !important;
display: block !important;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

#movie:hover .vjs-control-bar, #movie.initialLoad .vjs-control-bar,
#movie:hover a.btn, #movie.initialLoad a.btn {
	opacity: 1 !important;
}
#movie a.btn {
opacity: 1 !important;
display: block !important;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

#controls-overlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.aspect-ratio-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	max-height: 100%;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	/*overflow: hidden;*/
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	-o-user-select: none;
	user-select: none;
}

.aspect-ratio-sizer {
	padding-top: 56.25%; /* 16:9 */
	width: 100%;
}

/* Smartphones, Touchscreens */
@media (hover: none) and (pointer: coarse) {
	
	/* 	On mobile, hide video hover state  */
	.reelVideoContainer video {
	    display: none;
    }
    
}


@media (max-width: 768px) {

	.reelVideoContainer {
		width: 100%; 
	    overflow: visible;
	    margin-bottom: 33px;
	    margin-left: 0;
	    margin-right: 0;
    }
	.reelVideoText,
	.reelVideoText .brand-upper,
	.reelVideoText .dot,
	.reelVideoText .spot_title,
	.reelVideoText .reelAgency {
		font-size: 2.2vw;
	}
	.reelVideoContainer:hover .reelVideoText {
		bottom: -25px;
	}
/*
	.reelVideoText {
		font-size: 2.2vw;
		transform: translateY(0);
		bottom: 4px;
	}

	.agency {
		font-size: 2.23vw;
	}
	.spot_title {
		font-size: 2.5vw;
	}
	.videoText  {
		margin-top:-15%;;
	}
		.brand-upper {
	text-transform: uppercase;
		font-size: 2.7vw;
	
	}
*/
}

@media (max-width: 679px){
	.hide-mobile {
		display: none;
	}

	.videoText h2 {
		font-size: 49px;
	}
	.videoText h4 {
		font-size: 19px;
	}
		.videoText h5 {
		font-size: 11px;
	}
		.videoText  {
		margin-top:-25%;;
	}

	.contacttype {
		display: block;
	}

	.agent {
		margin-bottom: 3em;
	}
	
	.toddpic-wrapper {
		text-align: center;
	}
	.toddpic2 {
		float: none;
		margin-right: 0;
		padding-right: 0;
		
	}
	.bio_para_mobile {
		text-align: center;
	}

	.biotype .bioname {
		text-align: center;
	}
}

@media (max-width: 340px){
	.toddpic2 {
		min-width: 100%;
	}
}

@keyframes slideUp {
	100% {
		transform: translateY(500%);
	}
	100% {
		transform: translateY(0%);
	}	
}
@-webkit-keyframes slideUp {
	100% {
		-webkit-transform: translateY(500%);
	}
	100% {
		-webkit-transform: translateY(0%);
	}	
}
@keyframes slideup {
	0%   {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}

@-webkit-keyframes slideInR {
	0% {
		transform: translateX(900px);
	}
	100% {
		transform: translateX(0);
	}
}
@-moz-keyframes slideInR {
	0% {
		transform: translateX(900px);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes slideInR {
	0% {
		transform: translateX(900px);
	}
	100% {
		transform: translateX(0);
	}
}

@-webkit-keyframes slideInL {
	0% {
		transform: translateX(-900px);
	}
	100% {
		transform: translateX(0);
	}
}
@-moz-keyframes slideInL {
	0% {
		transform: translateX(-900px);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes slideInL {
	0% {
		transform: translateX(-900px);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes slideUp_thumb1 {
	0% {
	  transform: translateY(500%);
	}
	
	100% {
	  transform: translateT(-0%);
	}	
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		top: 20%;
	}
	100% {
		opacity: 1;
		top: 0;
	}
}