@charset "utf-8";
/* CSS Document */
body {
	background: rgb(30,30,30);
	font-size: 18px;
	font-family: Nirmala UI, Arial, Tahoma;
	color: black;
	text-align: center;
}
h1 {
	font-size: 31px;
	line-height: 34px;
}





/*logos*/
.logo {
	background: rgb(30,30,30) url('../_images/long_logo.png');
	width: 970px;
	height: 250px;
	margin: 0 auto;
}
.shortlogo {
	display: none;
}





/*menus*/
.centeredmenu {
	display: block;
	clear: both;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 120%;
	z-index: 1000;
	position: relative;
	background: white;
}
.centeredmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
	position: relative;
	right: 50%;
}
.centeredmenu ul li {
	margin: 0 0 0 1px;
	padding: 0;
	float: left;
	position: relative;
	left: 50%;
}
.centeredmenu ul li a {
	display: block;
	margin: 0;
	padding: .5em;
	font-size: 1em;
	line-height: 1em;
	background: white;
	text-decoration: none;
	color: black;
	font-weight: bold;
}
.centeredmenu ul li.active a {
	color: red;
	background: white;
}
.centeredmenu ul li a:hover {
	background: white;
	color: red;
	border-bottom: 0px solid #000;
}
.centeredmenu ul li:hover a,
.centeredmenu ul li.hover a {
	background: white;
	color: red;
	border-bottom: 0px solid #000;
}
.centeredmenu ul ul {
	display: none;
	position: absolute;
	top: 2em;
	left: 0;
	right: auto;
	width: 10em;
}
.centeredmenu ul ul li {
	left: auto;
	margin: 0;
	clear: left;
	width: 100%;
}
.centeredmenu ul ul li a,
.centeredmenu ul li.active li a,
.centeredmenu ul li:hover ul li a,
.centeredmenu ul li.hover ul li a {
	font-size: .9em;
	font-weight: normal;
	background: white;
	color: black;
	line-height: 1.4em;
	border-bottom: 0px solid white;
}
.centeredmenu ul ul li a:hover,
.centeredmenu ul li.active ul li a:hover,
.centeredmenu ul li:hover ul li a:hover,
.centeredmenu ul li.hover ul li a:hover {
	background: white;
	color: red;
}
.centeredmenu ul ul.last {
	left: auto;
	right: 0;
}
.centeredmenu ul li:hover ul,
.centeredmenu ul li.hover ul {
	display: block;
}
.centeredmenusmall {
	display: none;
	clear: both;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 120%;
	z-index: 1000;
	position: relative;
	background: white;
	font-weight: bold;
}
.centeredmenusmall ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
	position: relative;
	right: 50%;
}
.centeredmenusmall ul li {
	margin: 0 0 0 1px;
	padding: 0;
	float: left;
	position: relative;
	left: 50%;
}
.centeredmenusmall ul li a {
	display: block;
	margin: 0;
	padding: .5em;
	font-size: 1em;
	line-height: 1em;
	background: white;
	text-decoration: none;
	color: black;
	font-weight: bold;
}
.centeredmenusmall ul li.active a {
	color: red;
	background: white;
}
.centeredmenusmall ul li a:hover {
	background: white;
	color: red;
	border-bottom: 0px solid #000;
}
.centeredmenusmall ul li:hover a,
.centeredmenu ul li.hover a {
	background: white;
	color: red;
	border-bottom: 0px solid #000;
}
.centeredmenusmall ul ul {
	display: none;
	position: absolute;
	top: 43px;
	left: 0;
	left: -15%;
	width: 10em;
}
.centeredmenusmall ul ul li {
	left: auto;
	margin: 0;
	clear: left;
	width: 100%;
}
.centeredmenusmall ul ul li a,
.centeredmenusmall ul li.active li a,
.centeredmenusmall ul li:hover ul li a,
.centeredmenusmall ul li.hover ul li a {
	font-size: .9em;
	font-weight: normal;
	background: white;
	color: black;
	line-height: 1.4em;
	border-bottom: 0px solid white;
}
.centeredmenusmall ul ul li a:hover,
.centeredmenusmall ul li.active ul li a:hover,
.centeredmenusmall ul li:hover ul li a:hover,
.centeredmenusmall ul li.hover ul li a:hover {
	background: white;
	color: red;
}






/*bookmars*/
.bookmark {
	display: block;
	position: relative;
	top: -44px;
	visibility: hidden;
}





/*headings*/
#upperdivide {
	height: 45px;
}
.divider {
	background: rgb(30,30,30);
	width: 100%;
	min-height: 4em;
}
.dividerline {
	position: relative;
	left: 25%;
	width: 50%;
	height: 3px;
	background: white;
	top: 1.75em;
}
.dividerline2 {
	position: relative;
	left: 10%;
	width: 80%;
	height: 3px;
	background: white;
	top: 1.75em;
}
.dividertext {
	color: white;
	position: relative;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	display: inline-block;
	background: rgb(30,30,30);
	padding-left: .25em;
	padding-right: .25em;
	margin-bottom: 0.5em;
	top: 0.15em;
}





/*backgrounds*/
.toptriangle {
	background: url('../_images/top_triangle.png');
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 10%;
}
.bottomtriangle {
	background: url('../_images/bottom_triangle.png');
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 10%;
}
.wrapper1 {
	clear: both;
	width: 100%;
	background: white;
	position: relative;
	overflow: hidden;
}
.wrapper2 {
	left: 50%;
	position: relative;
}
.wrapper3 {
	right: 40%;
	width: 80%;
	max-width: 970px;
}
.wrapper4 {
	right: 50%;
	position: relative;
	padding: 0em 1em;
	overflow: hidden;
	text-align: left;
}





/*slideshow*/
.mySlides {
	display: none
}
.slideshow-container {
	max-width: 970px;
	width: 90%;
	position: relative;
	margin: auto;
}
.text {
	color: rgba(0,0,0,0);
	font-size: 2em;
	padding: 0px 0px;
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
	background-color: rgba(0,0,0,0);
}
.slideshow-container:hover .text {
	padding: 8px 0px;
	color: white;
	background-color: rgba(30,30,30,0.9);
}
.dot {
	height: 13px;
	width: 13px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active {
	background-color: rgb(30,30,30);
}
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 0.5s;
	animation-name: fade;
	animation-duration: 0.5s;
}
 @-webkit-keyframes fade {
 from {
opacity: .4
}
 to {
opacity: 1
}
}
 @keyframes fade {
 from {
opacity: .4
}
 to {
opacity: 1
}
}

@media only screen and (max-width: 300px) {
.text {
	font-size: 11px
}
}





/*hover over text*/
.picturelinks {
	position: relative;
	display: inline-block;
}
.picturelinks .picturelinkstext {
	visibility: hidden;
	width: 100%;
	background-color: rgba(30,30,30,0.9);
	font-size: 1.5em;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 5px;
	left: 0%;
}
.picturelinks .picturelinkstext::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent rgba(30,30,30,0.9) transparent;
}
.picturelinks:hover .picturelinkstext {
	visibility: visible;
}
.picturelinks .picturelinkstextsmall {
	visibility: hidden;
	width: 100%;
	background-color: rgba(30,30,30,0.9);
	font-size: 1em;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 5px;
	left: 0%;
}
.picturelinks .picturelinkstextsmall::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent rgba(30,30,30,0.9) transparent;
}
.picturelinks:hover .picturelinkstextsmall {
	visibility: visible;
}





/*small pictures*/
.table {
	width: 100%;
	text-align: center;
}
.graphicspics,
.tvandfilmspics,
.cgipics,
.vfxpics,
.motiongraphicspics,
.creditspics,
.gauntletpics {
	width: 180px;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
}
.recentprojectpics {
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
}





/*pictures*/
.mypic {
	background: white;
	width: 30%;
	float: left;
	margin: 0 auto;
	margin-right: 10px;
}





/*youtube videos*/
.size1youtubevid {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.size1youtubevid iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*education table*/
#education {
	display:block;
}


/*contact*/
.contact {
	float: left;
	width: 45%;
}
.contact2 {
	float: right;
	width: 45%;
}





/*footer*/
#footer {
	clear: both;
	text-align: center;
	color: white;
	background: rgb(30,30,30);
	width: 100%;
}
.footersocial {
	clear: both;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 16px;
	position: relative;
	top: -12px;
}
.footersocial ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
	position: relative;
	right: 50%;
}
.footersocial ul li {
	margin: 0 0 0 1px;
	padding: 0;
	float: left;
	position: relative;
	left: 50%;
}
.footersocial ul li a {
	display: block;
	margin: 0;
	padding: .5em;
	font-size: 1em;
	line-height: 1em;
	text-decoration: none;
	color: white;
	font-weight: bold;
	-o-transition: .25s;
	-ms-transition: .25s;
	-moz-transition: .25s;
	-webkit-transition: .25s;
	transition: .25s;
}





/*social media*/
#facebook a:hover {
	background: blue;
	border-bottom: 0px solid #000;
}
#facebook:hover a,
#facebook.hover a {
	background: rgb(59, 89, 152);
	border-bottom: 0px solid #000;
}
#twitter a:hover {
	background: rgb(85, 172, 238);
	border-bottom: 0px solid #000;
}
#twitter:hover a,
#twitter.hover a {
	background: rgb(85, 172, 238);
	border-bottom: 0px solid #000;
}
#instagram a:hover {
	background: rgb(138, 58, 185);
	border-bottom: 0px solid #000;
}
#instagram:hover a,
#instagram.hover a {
	background: rgb(138, 58, 185);
	border-bottom: 0px solid #000;
}
#youtube a:hover {
	background: rgb(187, 0, 0);
	border-bottom: 0px solid #000;
}
#youtube:hover a,
#youtube.hover a {
	background: rgb(187, 0, 0);
	border-bottom: 0px solid #000;
}
#linkedin a:hover {
	background: rgb(0, 123, 181);
	border-bottom: 0px solid #000;
}
#linkedin:hover a,
#linkedin.hover a {
	background: rgb(0, 123, 181);
	border-bottom: 0px solid #000;
}
#imdb a:hover {
	background: rgb(245, 198, 24);
	border-bottom: 0px solid #000;
}
#imdb:hover a,
#imdb.hover a {
	background: rgb(245, 198, 24);
	border-bottom: 0px solid #000;
}
.contactsocialmedia {
	width: 35%;
	float: left;
	margin: 5px;
	display: inline-block;
}
.embededsocialmedia {
	width: 60%;
	float: right;
	margin: 5px;
	display: inline-block;
}





/*diffrent sizes*/
@media only screen and (max-width: 1245px), only screen and (max-device-width: 1245px) {
.contactsocialmedia {
	width: auto;
}
}
@media only screen and (max-width: 1080px), only screen and (max-device-width: 1080px) {
.embededsocialmedia {
	width: auto;
}
}
@media only screen and (max-width: 970px), only screen and (max-device-width: 970px) {
.logo {
	display: none;
}
.shortlogo {
	display: block;
	background: rgb(30,30,30) url('../_images/short_logo.png');
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
}
@media only screen and (max-width: 855px), only screen and (max-device-width: 855px) {
.contactsocialmedia {
	width: 100%;
	float: none;
}
.embededsocialmedia {
	width: 100%;
	float: none;
}
.recentprojectpics {
	width: 47%;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
}
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
.contact {
	width: 100%;
}
.contact2 {
	float: left;
	width: 100%;
}
}
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
h2 {
	border-bottom: 0px solid white;
	width: 100%;
	left: 0%;
}
#mypic {
	width: 50%;
}
#education {
	display:none;
}
}
@media only screen and (max-width: 607px), only screen and (max-device-width: 607px) {
.centeredmenu {
	display: none;
}
.centeredmenusmall {
	display: block;
}
.recentprojectpics {
	width: 97%;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
}
}
@media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {
#mypic {
	width: 100%;
}
.embededsocialmedia {
	display: none;
}
}