/* =================================== */

/*	Basic Style   */

/* =================================== */
html {
    xscroll-behavior: smooth !important;
}
.fake {
	color:0;
}
xx.bgimg {
	filter: grayscale(50%) brightness(74%);
	background-size: contain;
}
body:not(.loaded) #features {
	display:none;
}
.item.active.bgimg {
	position: relative;
}
.item.active.bgimg {
	height: 995px;
}
.item.active.bgimg>* {
	xosition: relative;
	z-index: 9989;
}
.item.active.bgimg:before {
	xbackground: rgba(0, 0, 0, 0.25);
	position: absolute;
	width: 100%;
	z-index: 999;
	height: 83%;
	content:" .";
	box-shadow: 0 31vh 90vh -2vh black inset;
}
#loader {
	/* opacity: 0; */
	transition: 250ms 133ms top;
	left: 0;
	top: 0;
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 9999999;
	background: white;
	text-align: center;
	font-size: 500px;
}
body.loaded #loader {
	top: -100vh;
}
body {
	background-color: black;
	font-family:'Oswald', sans-serif;
	!important line-height: 21px;
	font-size: 16px;
	color: #6a737b;
}
ol, ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
figure, p {
	margin: 0;
}
a {
	color: #fff;
	-webkit-transition: all .3s ease-in 0s;
	-moz-transition: all .3s ease-in 0s;
	-ms-transition: all .3s ease-in 0s;
	-o-transition: all .3s ease-in 0s;
	transition: all .3s ease-in 0s;
}
iframe {
	border: 0;
}
a, a:focus, a:hover {
	text-decoration: none;
	outline: 0;
}
a:focus, a:hover {
	color: yellow;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0;
}
.clear:before, .clear:after {
	content:" ";
	display: table;
}
.clear:after {
	clear: both;
}
.clear {
	*zoom: 1;
}
span.color {
	color: #000;
}
body > section, .footer {
	padding: 70px 0;
}
.sec-title {
}
.sec-title h2 {
	color: #000;
	font-size: 2em;
	font-weight: 800;
	text-transform: uppercase;
}
.sec-sub-title {
	margin: 35px 0 45px;
}
.sec-sub-title p {
	font-weight: 600;
	line-height: 24px;
	font-size: 18px;
	color: #5b646e;
}
.sec-title.text-center.wow.fadeInUp.animated.animated {
	padding-bottom: 1em;
}
.devider {
	margin-top: 30px;
}
.devider i {
	color: #cccccc;
}
.devider:before, .devider:after {
	content:"______________________";
	color: #e6e8ea;
	position: relative;
	bottom: 6px;
}
.devider:before {
	right: 10px;
}
.devider:after {
	left: 10px;
}
.mb50 {
	margin-bottom: 50px;
}
#preloader {
	background-color: #fff;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 1100;
}
#preloader > img {
	left: 47%;
	position: absolute;
	top: 48%;
}
video {
	width: 100%;
}
.modal.fade video {
	filter: blur(20px) grayscale(1) brightness(10) contrast(0.3);
	transition: 1200ms 20ms filter;
}
.modal.fade.in video {
	filter: blur(0px) grayscale(0) brightness(1) contrast(1);
}
/*=========================================
	Header
==========================================*/
 #navigation {
	background-color: rgba(0, 0, 0, 0.2) !important;
	border: 0 none;
	margin: 0;
	-webkit-transition: background-color 800ms linear;
	-moz-transition: background-color 800ms linear;
	-ms-transition: background-color 800ms linear;
	-o-transition: background-color 800ms linear;
	transition: background-color 800ms linear;
}
#navigation[style="background-color: rgb(8, 94, 125);"] {
	background-color: rgba(0, 0, 0, 0.8) !important;
}
.navbar-toggle i {
	color: #fff;
}
.navbar-brand {
	padding: 0;
}
.navbar-nav li a {
	border-top: 1px solid transparent;
	font-size: 1.5em;
}
.navbar-nav li a.current, .navbar-nav li a:focus, .navbar-nav li a:hover {
	background-color: transparent;
	color: #fff;
    text-decoration: underline overline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}
/*=========================================
	Slider
==========================================*/
 #slider {
	padding: 0;
}
#slider .carousel-inner .item {
	background-size: cover;
}
.carousel-caption {
	top: 50%;
	text-shadow: 2px 2px 5px black;
}
.carousel-caption h2 {
	font-size: 62px;
	font-weight: 300;
}
.carousel-caption h2 span {
	font-weight: 800;
}
.carousel-caption h3 {
	font-size: 48px;
	font-weight: 300;
	margin: 6px 0 20px;
}
.carousel-caption p {
	color: #fff;
	font-size: 18px;
	font-weight: 300;
}
.carousel-caption p:before, .carousel-caption p:after {
	xcolor: #000;
	content:"___";
	position: relative;
	top: -8px;
}
.carousel-caption p:before {
	right: 20px;
}
.carousel-caption p:after {
	left: 20px;
}
.social-links {
	margin-top: 5%;
}
.social-links li {
	display: inline-block;
}
.social-links li a {
	color: white;
	display: block;
	margin: 0 6px;
}
.social-links li a:hover {
	color: yellow;
}
.carousel-indicators {
	bottom: 10px;
	left: inherit;
	margin: 0;
	right: 30px;
	top: 49%;
	width: 0;
}
.carousel-indicators li {
	border: 1px solid rgba(255, 255, 255, 0.3);
	height: 8px;
	width: 8px;
}
.carousel-indicators .active {
	height: 8px;
	width: 8px;
}
figcaption i.far, figcaption i.fas {
	position: absolute;
	bottom: 2em;
	left: calc(50% - 22px);
	opacity: 0.85;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
i.fas.fa-pencil-alt.fa-3x {
	margin-top: 0.5em;
	color: black;
}
/*=========================================
	Features
==========================================*/
 .features {
	background-color: #f4f7f9;
}
.owl-controls {
	bottom: -45px;
	margin-top: 10px;
	position: relative;
	text-align: center;
}
.owl-controls .owl-page {
	display: inline-block;
}
.owl-controls .owl-page span {
	border: 1px solid #C7CED3;
	border-radius: 20px;
	display: block;
	height: 8px;
	margin: 5px 4px;
	width: 8px;
}
.owl-controls .owl-page.active span {
	background: #062033;
	border: 0;
}
.service-icon .fa {
	color: #000;
	xfloat: left;
	padding: 10px;
}
.service-desc {
	position: relative;
	top: 5px;
	bottom: 20px;
}
.service-desc h3 {
	color: #062033;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 25px;
}
.col-md-4 {
	xmargin-bottom: 100px;
}
/*=========================================
	Our Works
==========================================*/
#filterText{
    padding-right: 1em;
    font-weight: bolder;
}


.work h2 {
	color: white;
}
.work {
	background-color: black;
}
.work-filter {
	margin-bottom: 35px;
}
.work-filter ul li {
	display: inline-block;
}

.work-filter li {
	letter-spacing: 2px;
    color: white;
	display: block;
	font-size: 20px;
}

.work-filter ul li a {
	letter-spacing: 2px;
    color: grey;
	display: block;
	font-size: 20px;
	padding: 5px 17px;
	border-radius: 6px;
	text-transform: capitalize;
    
}
.work-filter ul li a:hover, 
.work-filter ul li a.active {
	background-color: #000;
	border-radius: 6px;
	color: #fff;
	padding: 0px 17px;
	box-shadow: 
		0px -9px 0px -3px black, 
		0px -13px 0px -5px, 
		0px 9px 0px -3px black, 
		0px 13px 0px -5px #fff ;
    
}
ul.text-center.filterer {
	padding-top: 1em;
}
.mix {
	display: none;
}
.work-item {
	float: left;
	width: 15%;
	position: relative;
	padding: 20px 20px 20px 20px;
}
.work-item > img {
	display: block;
	height: auto;
	width: 100%;
	margin-left: 20%;
   
}

.overlay {
	background-color: rgba(66, 66, 66, 0.87);
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	margin-left: 17%;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 450ms ease-out 0s;
	-moz-transition: all 450ms ease-out 0s;
	-o-transition: all 450ms ease-out 0s;
	transition: all 450ms ease-out 0s;
	-webkit-transform: rotateY(180deg) scale(0.5, 0.5);
	-moz-transform: rotateY(180deg) scale(0.5, 0.5);
	-ms-transform: rotateY(180deg) scale(0.5, 0.5);
	-o-transform: rotateY(180deg) scale(0.5, 0.5);
	transform: rotateY(180deg) scale(0.5, 0.5);
}
.work-item:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: rotateY(0deg) scale(1, 1);
	-moz-transform: rotateY(0deg) scale(1, 1);
	-ms-transform: rotateY(0deg) scale(1, 1);
	-o-transform: rotateY(0deg) scale(1, 1);
	transform: rotateY(0deg) scale(1, 1);
}
.work-item .overlay a .fa.fa-eye {
	display:none;
}
.work-item .overlay a {
	border-radius: 5px;
	display: inline-block;
	margin-top: 20%;
	padding: 7px 10px;
	width: 109%;
	height: 100%;
	background: transparent;
	position: absolute;
	left: -5%;
	top: -15%;
	color: transparent;
}
.work-item .overlay a:hover {
	color: #fff;
}
.work-item .overlay h4 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	margin: 25px 0 8px;
}
.work-item .overlay p {
	font-size: 14px;
	line-height: 24px;
}
div.project-wrapper figure {
	position: relative;
	left: 2vw;
}

img.rounded {
    box-shadow: 0px 0px 20px black;
}
/*=========================================
	Our Team Member
==========================================*/
 .team {
	background-color: white;
}
.member-thumb {
	width: 273px;
	position: relative;
}
.member-thumb .overlay h5 {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	margin: 10px 0;
}
.member-thumb .overlay {
	font-size: 16px;
	padding: 20px;
	line-height: 24px;
}
.team-member h4 {
	color: #062033;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	margin: 15px 0 8px;
}
.member-thumb:hover .overlay {
	cursor: pointer;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: rotateY(0deg) scale(1, 1);
	-moz-transform: rotateY(0deg) scale(1, 1);
	-ms-transform: rotateY(0deg) scale(1, 1);
	-o-transform: rotateY(0deg) scale(1, 1);
	transform: rotateY(0deg) scale(1, 1);
}
.team-member:hover h4 {
	color: #000;
}
.team-member .social-links {
	margin-top: 24%;
}
.team-member .social-links li a {
	background-color: #0d7c67;
	color: #fff;
	height: 42px;
	padding: 10px 0 0;
	width: 42px;
}
.team p {
	font-size: x-large;
	color: black;
	font-family:'Oswald regular';
}
/*=========================================
	Some fun facts
==========================================*/

.parallax-overlay {
	background-color: rgba(0, 0, 0, 0.8);
	padding: 70px 0;
}
.counters-item {
	color: #fff;
}
.counters-item i {
	border: 1px solid #737C85;
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	height: 120px;
	margin: 0 0 35px;
	padding: 40px 0 0;
	width: 120px;
}
.counters-item strong {
	display: block;
	font-size: 60px;
	font-weight: 600;
	line-height: 60px;
}
.counters-item p {
	font-size: 18px;
	line-height: 24px;
	margin-top: 15px;
	text-transform: uppercase;
}
/*=========================================
	Contact Us
==========================================*/
 .contact {
	padding-bottom: 0;
}
.contact-address h3 {
	color: #062033;
	font-size: 22px;
	line-height: 32px;
	margin-bottom: 25px;
}
.contact-address p {
	line-height: 24px;
}
.contact-form {
}
.contact-form h3 {
	color: #062033;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	margin-bottom: 25px;
}
.contact-form .input-group {
	width: 100%;
}
.contact-form .form-control {
	border-color: -moz-use-text-color -moz-use-text-color #cccccc;
	border-radius: 0;
	border-style: none none solid;
	border-width: 0 0 1px;
	box-shadow: none;
	margin-bottom: 10px;
}
.contact-form .input-field {
	width: 48%;
	float: left;
	margin-right: 4%;
}
.contact-form .input-field:last-child {
	margin-right: 0;
}
.contact-form .form-control.error {
	border-bottom-color: #c0392b;
}
label.error {
	color: #c0392b;
	font-weight: normal;
	text-transform: capitalize;
}
.contact-form #form-submit {
	background: url("../img/envelop.png") no-repeat scroll 0 13px transparent;
	filter: grayscale(1) brightness(2);
	border: 0 none;
	color: #ffffff;
	font-size: 16px;
	line-height: 24px;
	padding: 10px;
	text-align: center;
	width: 150px;
}
textarea#message {
	min-height: 15em;
}
.footer-social {
	margin-top: 17px;
}
.footer-social li a {
	color: #cdd2d6;
	display: block;
	margin-bottom: 10px;
}
#map_canvas {
	height: 215px;
	width: 100%;
}
/*=========================================
	Contact Us
==========================================*/
 .footer {
	background-color: #000;
	color: #fff;
	xposition: fixed;
	left: 0;
	right: 0;
}
.footer a:hover {
	color: #062033;
}
.footer h6 {
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	margin-bottom: 30px;
}
.about-us p {
	line-height: 24px;
}
.footer-single .subscribe {
	margin-bottom: 15px;
	position: relative;
}
.subscribe #subscribe {
	background-color: transparent;
	border: 2px solid #fff;
	border-radius: 2px;
	height: 40px;
	text-indent: 10px;
	width: 100%;
}
.subscribe #subs {
	background-color: transparent;
	border: 0 none;
	font-size: 24px;
	position: absolute;
	right: 0;
	top: 6px;
}
.footer-single {
	line-height: 24px;
}
.footer-single ul {
}
.footer-single li {
	line-height: 32px;
}
.footer-single p i {
	margin: 0 10px;
}
.credit a {
	color: #062033;
}
.credit a:hover {
	color: #fff;
}
.copyright {
	color: #fff;
}
#back-top {
	bottom: 20px;
	position: fixed;
	right: 25px;
	z-index: 9;
}
#thanksfooter {
	background-color: black;
	color: #fff;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 0px;
	padding-bottom: 20px;
}
.footer.social-links {
	margin-bottom: 5%;
}
.footer .social-links li {
	display: inline-block;
	margin-bottom: 5%;
	margin-top: -50px;
}
.footer .social-links li a {
	color: #a7a7a7;
	display: block;
	margin: 0 15px;
}
.footer .social-links li a:hover {
	color: #fff;
}
/*=========================================
	MEDIA QUERIES
==========================================*/
 @media screen and(max-width: 800px) {
	.team p {
		font-size: large;
		color: black;
		font-family:'Oswald regular';
		padding: 2em;
	}
	#caption {
		font-size: 1em;
		padding: 0.5em 0.3em;
	}
}
/* ///////////////////////////////////
        IMPORTED FROM INDEX
////////////////////////////////////// */
@font-face {
	font-family:'Glyphicons Halflings';
	src: url(https://getbootstrap.com/docs/3.3/dist/fonts/glyphicons-halflings-regular.woff2);
}
body {
	background: black;
}
.project-wrapper img {
	width: 100%;
	margin: 1em auto;
}
/* hide all but first item in a project group */
 body[data-filter] .project-wrapper a[data-fancybox][data-index] {
	display: none;
}
body[data-filter] .project-wrapper a[data-fancybox][data-index="0"] {
	display: inline-block;
}
.hidden {
	display: none;
}
a {
	position: relative;
	display: inline-block;
}
a[data-caption] img {
	opacity: 1;
	transition: 330ms 50ms opacity;
    
}
a[data-caption]:hover img {
	opacity: 0.25;
}
/* icons  */

/*
      .project-wrapper a[data-caption][data-media]:after {
	position: absolute;
	bottom: 0.5em;
	left:0.75em;
	display: inline-block;
	font-family: 'Glyphicons Halflings';
		text-shadow: 0 0 3px #000;
		background: rgba(0,0,0,0.65);
		padding: 2px 6px;
		border: 1px solid #444;
		font-size: 150%;
		border-radius: 0.2em;
}  
  .project-wrapper a[data-caption][data-media='video']:after { 		content: "\e059"; }
  .project-wrapper a[data-caption][data-media='image']:after {  		content: "\e060"; }
  
  */

/* hover-based info bar on each grid thumbnail a  */
 .project-wrapper a[data-caption]:before {
	content: attr(data-project)"   \A "    attr(data-count)   "  " attr(data-media) "s" ;	
	white-space: pre;
	text-align: center;
	position: absolute;
	text-transform: capitalize;
	left: 0.62em;
	top: 35%;
	z-index: 12344;
	opacity: 1;
	padding-left: 0.5em;
	color: #fff;
	text-shadow: 0 0 3px #000;
	font-weight: normal;
	font-size: 175%;
	display: block;
	background: rgba(0, 0, 0, 0.5);
	width: calc(100% - 1.25em);
	padding: 0.5em 0.5em;
	opacity: 0;
	transition: 250ms 50ms opacity;
}
/* special version w/o 's' for single-image/vid projects */
 .project-wrapper a[data-caption][data-count='1']:before {
	content: attr(data-project)"   \A "    attr(data-count)   "  " attr(data-media);	
}
.project-wrapper a[data-caption]:hover:before {
	opacity: 1;
}
/* modal gallery css */



#body #dialog {
	position: fixed;
	height: 95%;
	top: 0.5%;
	left: 0;
	padding: 2em;
	background: #000;
	color: #fff;
	border: 2px solid #000;
	width: 90%;
	/* min-height: 58em; */
	text-align: center;
	box-shadow: 0 0 0 60vw rgb(25 20 20 / 95%);
	z-index: 4000;
	transition: 120ms left, 270ms opacity;
	max-height: 95vh;
	overflow: hidden;
	overflow-y: auto !important;
}



dialog a img {
	max-width: 100px;
	max-height: 100px;
	margin: 2em 0 0.25em 0;
}
dialog a {
	display: inline-block;
	position: relative;
}
dialog iframe {
	display: block;
}


#body #dialog:not([open]) {
	display: inline-block;
	left: -220vw;
	transition-duration: 420ms;
	box-shadow: 0 0 0 10px #000;
	opacity: 0.5;
	border-color: #000;
}






body[data-modal="open"]{  overflow-y: hidden !important; }
#caption {
	text-align: left;
	font-size: 1.0em;
	padding: 0.5em 0em;
	width: 72%;
	left: 14%;
	position: relative;
}

#title {
	font-size: 175%;
	margin-top: -0.25em;
	position: relative;
	top: -0.5em;
	left: 0.25em;
}


xx #video{
	width: calc(75% - 2em);
	min-height: 728px;
}

#video{
		xxwidth: 66.67vw;
		height: calc(50vw * 0.5625);
}
	

#img {
	min-height: 528px;
	padding-left: 0.3em;
	
	max-height: 99vh;
	overflow-y: auto;
	overflow-x: hidden;	
}
#img {
	width: auto;
	height: 70vh;
}

/* close button on modal */
#body .close:hover { 
	color:#fff; 
}


body .close {
	float: right;
	font-size: 2em;
	font-weight: normal;
	line-height: 1;
	filter: alpha(opacity=20);
	top: -0.1em;
	position: absolute;
	color: #bbb;
	padding: 0.2em 1em;
	right: -0.75em;
	z-index: 999;
	font-family: monospace;
	opacity: 1;
}



dialog a {
	padding: 0.3em;
}
dialog a.hidden {
	display: inline-block;
}
dialog img {
	display: inline-block;
}
dialog a.current {
	color: #fff;	
}


dialog a.current[data-count="1"] img {
		display:none;
}
a.current img {
	box-shadow: 0px -9px 0px -3px black, 0px -13px 0px -3px, 0px 9px 0px -3px black, 0px 13px 0px -3px #fff ;
}

xx body .mix {
	display: inline-block;
}
/* from index2 's category chooser nav bar */

/* filtering CSS */
 body[data-filter] .project-wrapper a[data-fancybox] {
	position: absolute;
	left: -300vw;
	opacity: 0;
	transition: 800ms 200ms opacity, 333ms left;
}
body[data-filter="reset"] .project-wrapper a[data-fancybox] {
	transition-duration: 1ms;
	left: -300vw;
}
body[data-filter='all'] .project-wrapper a[data-fancybox], 
body[data-filter='.animation'] .project-wrapper a.animation, 
body[data-filter='.ill'] .project-wrapper a.ill, 
body[data-filter='.med'] .project-wrapper a.med, 
body[data-filter='.feat'] .project-wrapper a.feat, 
body[data-filter='.int'] .project-wrapper a.int, 
body[data-filter='.sci'] .project-wrapper a.sci {
	position: relative;
	display: inline-block;
	opacity: 1;
	left: 0;
}
body .project-wrapper a[data-fancybox] {
	display: inline-block;
	margin-bottom: 0.7em;
	xmin-height:10em;
}
.navbut {
	display:none;
}
/*
@media (max-width: 767px){   .project-wrapper  a[data-fancybox] img { 	 min-height: 13em;  }  }
@media (min-width: 768px){   .project-wrapper  a[data-fancybox] img { 	 min-height: 10.5em;  }  }
@media (min-width: 992px){  .project-wrapper  a[data-fancybox] img { 	 min-height: 8.6em;  }  }
  */
 @media(max-width: 767px) {
	.project-wrapper a[data-fancybox] {
		min-height: 13em;
	}
}
@media(min-width: 768px) {
	.project-wrapper a[data-fancybox] {
		min-height: 13.5em;
	}
}
@media(min-width: 992px) {
	.project-wrapper a[data-fancybox] {
		min-height: 12em;
	}
	#body .close {
		right: -0.4em;
	}
	
}
@media(min-width: 1199px) {
    
	.project-wrapper a[data-fancybox] {
		min-height: 10.5em;
	}


	#caption {
		font-size: 1.5em;
	}
	
}

	body[data-modal="open"] #works {min-height: 101vh; }
	#works {min-height: 50vh; }



    .sec-title.text-center.wow.fadeInRight.animated {
    padding: 1.5em;
}

.vidwrap {
	display: inline-block;
	position: relative;
}


#body .row .tray { display:none; }

XXX .tray {
	z-index: 5434343;
	position: absolute;
	background: transparent;
	height: 26em;
	width: 5em;
	top: 5em;
	right: 9em;
	display: inline-block;
}

span.appicon {
	position: relative;
	top: 0.55em;
	margin: 0 0em;
}

  .appicon[data-app]:after {	background-size: contain; }
	


/* dd666 */
 .appicon[data-app="ai"]:after { background-image:url(/AdobeIcons/AdobeIllustrator.png); }
 .appicon[data-app="ps"]:after { background-image:url(/AdobeIcons/PhotoShop.png); }
 .appicon[data-app="ae"]:after { background-image:url(/AdobeIcons/AfterEffects.png); }
 .appicon[data-app="maya"]:after { background-image:url(/AdobeIcons/Maya.png); }
 .appicon[data-app="unity"]:after { background-image:url(/AdobeIcons/Unity.png); background-color: white !important; }
 .appicon[data-app="zbrush"]:after { background-image:url(/AdobeIcons/Zbrush.png ); background-color: white !important; }
 .appicon[data-app="max"]:after { background-image:url(/AdobeIcons/3DSMax.png); }




#caption span.appicon:after {
	xcontent: attr(data-app);
	content: ".";
	text-transform: capitalize;
	font-weight: bold;
	min-width: 1em;
	height: 1em;
	display: inline-block;
	text-align: center;
	padding: 0;
	padding-top: 0.2em;
	border-radius: 2px;
	border: 0;
	background-color: transparent;
	color: transparent;
}