@import url('https://fonts.googleapis.com/css?family=Parisienne|Quicksand:300,400,500,700|Source+Sans+Pro:200,300,400,600,700,900');
@import url('https://fonts.googleapis.com/css?family=Qwigley');
@import url('https://fonts.googleapis.com/css?family=Droid+Sans|Montserrat');
@import url('https://fonts.googleapis.com/css?family=Anton|Arvo|Bitter|Cabin|Catamaran|Muli|Nunito+Sans|Overpass|Raleway|Roboto+Slab');

@import url('https://fonts.googleapis.com/css?family=Catamaran:100,300,400,600,800');
@import url('https://fonts.googleapis.com/css?family=Ek+Mukta:300,400,600,800');

@font-face {
    font-family: this;
    src: url('../font/this.otf'); /* IE9 Compat Modes */
}

body {font-family: 'Ek Mukta', sans-serif !important;}
body {font-family: 'Catamaran', sans-serif;}

.header-about {font-family: 'this', serif; margin:20px 0 20px -80px;}

a[href^=tel] { color: inherit; text-decoration: none; }
.fixed-color {color:#333 !important;}

a {text-decoration: none;} 
a:hover, a:focus {  text-decoration:underline;}

.sr-vidmarge {margin:0 0 -1px 0;}

/*BLUR HOVER EFFECT */
.blurry-parent {
  transition: all 1300ms ease;
}
.blurry {
  transition: all 1300ms ease;
}
.blurry-parent:hover .blurry {
   transition: all 500ms ease 0ms; opacity:.5;
   filter: blur(3px); /* Someday, sigh ... */ 
	-webkit-filter: blur(3px); /* Prefixed CSS3 blur filters */
	-moz-filter: blur(3px); 
	-o-filter: blur(3px); 
	-ms-filter: blur(3px); 
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); /* IE lte 9 */	
}
.blurry-parent .blurry:hover {
    position:relative; z-index:1000;transition: all 50ms ease; opacity:1;
	filter: blur(0px) !important; /* Someday, sigh ... */ 
	-webkit-filter: blur(0px) !important; /* Prefixed CSS3 blur filters */
	-moz-filter: blur(0px) !important; 
	-o-filter: blur(0px) !important; 
	-ms-filter: blur(0px) !important; 
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0') !important; /* IE lte 9 */	
}




/*SPEAKER MUTE BUTTON */
.speaker {
width: 35px;
height: 35px;
  position: relative;
  overflow: hidden;
  display: inline-block;
border: none;
opacity: 1;
background-size: contain;
background-repeat: no-repeat;
bottom: 15px;
position: fixed;
right: 15px;
z-index:1020;
	transition:all 1000ms ease-out 500ms;
	-webkit-transition:all 1000ms ease-out 500ms;
	-moz-transition:all 1000ms ease-out 500ms;
}
	
		
.speaker span {
  display: block;
  width: 8px;
  height: 8px;
  background: #333;
  margin: 11px 0 0 2px;
}
.speaker span:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #333 transparent transparent;
  border-width: 10px 14px 10px 15px;
  left: -13px;  
  top: 5px;
}
.speaker span:after {
  transform: rotate(45deg);
  border-radius: 0 20px 0 0;
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-style: double;
  border-color: #333;
  border-width: 7px 7px 0 0;
  left: 18px;
  top: 9px;
  transition: all 0.8s ease-out;
}

.speaker:hover span:after {
  transform: scale(0.8) translate(-5px, 0) rotate(42deg); opacity:0.0;
}


.speaker.mute span:after {
  transform: scale(1.0) translate(0px, 0) rotate(42deg);
  opacity: 1;
}

.speaker span:after {
  content: '';
  left: 19px !important;  
  transform: scale(0.8) translate(-0px, 0) rotate(42deg); opacity:0.0;
  }


/*******************************************************************************************************************************************************************************************/




.show-on-mobile {display:none;}
.hide-on-mobile {display:block;}


body { overflow-x:hidden; margin:0; background:#000;font-family: 'Nunito Sans', sans-serif; color: #fff;}
#welcome {background:white;}



.social-icons {
height:30px;
margin: 0px 20px 10px 0px;
padding: 0px;
display: inline-block;
}.social-icons img {max-height:100%; display:inline-block;}



img {
  border-style: none; image-rendering: auto;}

button:focus {outline:0;}
#btn-git {max-width:100%;}

video {width:100%;}
img {border : 0;}
img a {outline : none;}
#margin-start {margin-top:41vh;}

.about-hr {margin:25px 0 15px 0;}


a {color:white; text-decoration:none; opacity:0.75;}
a:hover {text-decoration:none; opacity:1;}




.sr-info { 
-webkit-box-shadow: 10px 20px 100px 25px rgba(0,0,0,0.75);
-moz-box-shadow: 	10px 20px 100px 25px rgba(0,0,0,0.75);
box-shadow: 		10px 20px 100px 25px rgba(0,0,0,0.75);
	opacity:0.0;
	position: absolute;
    width: 100%;
	color:white;
    text-align: center;
    z-index: 1;
    height: 99%;
	border:0px solid black;
    margin: 0;
    padding:0;    
	display: inline-block;  
  -webkit-transition: all 0ms;
     -moz-transition: all 0ms;
       -o-transition: all 0ms;
      -ms-transition: all 0ms;
          transition: all 0ms;
	}



.scale .sr-info h4 { display:block; margin:40% auto 0; letter-spacing:-0.2em; font-size:1.50em; text-transform:uppercase; padding:0; color:rgba(0,0,0,0); } 
.scale .sr-info h6 { display:block; margin:5px auto 0; letter-spacing:-0.2em; font-size:1em; padding:0; color:rgba(0,0,0,0); } 

.scale:hover .sr-info h4 { margin:26% auto 0; letter-spacing:0.0em; font-size:1.55em; color:rgba(255,255,255,1); }
.scale:hover .sr-info h6 { padding:0; 		  letter-spacing:0.0em; font-size:1em; color:rgba(255,255,255,1); }

.scale:hover .sr-info h4, .scale .sr-info h6 { 
  -webkit-transition: all 800ms cubic-bezier(.25,1.06,.29,1.033);
     -moz-transition: all 800ms cubic-bezier(.25,1.06,.29,1.33);
       -o-transition: all 800ms cubic-bezier(.25,1.06,.29,1.33);
      -ms-transition: all 800ms cubic-bezier(.25,1.06,.29,1.33);
          transition: all 800ms cubic-bezier(.25,1.06,.29,1.033);
} 

.scale:hover .sr-info{
  opacity:1; background:rgba(0,0,0,0.3);  	
  -webkit-transition: all 30ms ease-in-out;
     -moz-transition: all 30ms ease-in-out;
       -o-transition: all 30ms ease-in-out;
      -ms-transition: all 30ms ease-in-out;
          transition: all 30ms ease-in-out;
}

.scale:active .sr-info{
  opacity:0;  	
  -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
       -o-transition: all 300ms ease-in-out;
      -ms-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
}

.sr-c0 {background: rgba(10, 10, 10, 0.15); }
.sr-c1 {background: rgba(20, 20, 20, 0.75); }
.sr-c2 {background: rgba(20, 20, 20, 0.75); }
.sr-c3 {background: rgba(20, 20, 20, 0.75); }
.sr-c4 {background: rgba(20, 20, 20, 0.75); }
.sr-c5 {background: rgba(20, 20, 20, 0.75); }

.scale .sr-underline {
    display: block;
    width: 0px;
    height: 1px;
    background: rgba(255,255,255,0);
    margin: 5px auto;
    padding: 0 0 0 0;
	  -webkit-transition:all 150ms cubic-bezier(.69,.19,.6,.87) 0ms;  				
	-moz-transition: all 150ms cubic-bezier(.69,.19,.6,.87) 0ms;  				
	-o-transition: all 150ms cubic-bezier(.69,.19,.6,.87) 0ms; 				
	-transition: all 150ms cubic-bezier(.69,.19,.6,.87) 0ms;
	}
	

.scale:hover .sr-underline  {
    width: 20%;
    background: rgba(255,255,255,1);
	  -webkit-transition:all 1200ms cubic-bezier(1,.03,.21,1.56) 20ms;  				
	-moz-transition: all 1200ms ccubic-bezier(1,.03,.21,1.56) 20ms;  				
	-o-transition: all 1200ms cubic-bezier(1,.03,.21,1.56) 20ms; 				
	transition: all 1200ms cubic-bezier(1,.03,.21,1.56)) 20ms;
	}
	
.scale:active .sr-underline  {
    width: 40%;
    background: rgba(255,255,255,1);
	  -webkit-transition:all 200ms cubic-bezier(.69,.19,.6,.87) 0ms;  				
	-moz-transition: all 200ms cubic-bezier(.69,.19,.6,.87) 0ms;  				
	-o-transition: all 200ms cubic-bezier(.69,.19,.6,.87) 0ms; 				
	transition: all 200ms cubic-bezier(.69,.19,.6,.87) 0ms;
	}




html, body {height: auto; font-size:1.05em; }

.awards-con {position:fixed;bottom:0; margin:0 auto; width:100%; min-width:1260px; background-image:url(img/bg-laurels.png); background-repeat:repeat; text-align:center;  background-size:contain; }
 
.award { opacity:0.8;display:inline-block;width:100%; margin:8px; padding-bottom:5px; max-width:5%;}
.award:hover { opacity:1; padding-bottom:30px;}

.grow { transition: all .08s ease-in-out .0ms; }
.grow:hover { transition: all .0s ease-in-out;  transform: scale(2.0); }

	
/* BACKGROUNDS AND QUERIES ################################################################ */




	#about-bg, #contact-bg  {width:100%; height:100%; position:fixed; top:0; bottom:0; margin:0 auto; padding:0;}




	#about-bg {  background: url(../img/bg-about.png) no-repeat, #000000; background-position:40% center;
		-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  background-attachment:fixed; 
		}

	#contact-bg {  background: url(../img/bg-contact.png) no-repeat, #000000; background-position:65% center;
		-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  background-attachment:fixed; 
		}


	
		
	@media only screen and (max-width: 1024px) {
		.show-on-mobile {display:block;}
		.hide-on-mobile {display:none;}	
			
		.award { opacity:0.8;display:inline-block;width:100%; margin:8px; padding-bottom:0; max-width:5%;}
		.award:hover { opacity:1; padding-bottom:0;}
		.grow:hover {  transform: scale(1.0); }
		
		.awards-con {position:relative;bottom:0; margin:0 auto; width:100%; min-width:100%; background-image:url(img/bg-laurels.png); background-repeat:repeat; text-align:center;  background-size:contain; }
	}

	
	@media only screen and (max-width: 540px) {
		.award {
			margin: 11px 0.2% 5px;
			max-width: 75px;
		}
		.award:hover {
			margin: 11px 0.2% 5px;
			max-width: 75px;
		}
		
.quote {padding: 10px;}
		
		
	}

/* TYPOGRAPHY ############################################################################# */

h1 {
  font-size: 2.1rem; margin: 0 auto;
}

h2 {
  font-size: 1.75rem; margin-bottom:4px;
}

h3 {
  font-size: 1.32rem; margin-top:4px;  font-weight: 400;
}

h4 {
  font-size: 1.1rem;  font-weight: 600;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
  font-weight: 600;
}

p {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.5;
  margin: 7px 0;
  letter-spacing:-0.4px;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-heavy {
  font-weight: 700;
}

/* POSITIONING */

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify {
  text-align: justify;
}
	
	
	
	img { border:none;}
	nav { width: 100%; }	
	
	.baloo {font-family: 'Baloo Chettan', cursive;}
	
	#img-about {width:100%;}


		
	#logo-start {max-width:470px; width:100%; margin:0 auto;}
	#logo-modal {max-width:100px; width:100%; margin:10px auto 0;}
	#logo-contact {max-width:170px; width:100%; margin:0 auto;}
	
	.nav_wrapper {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  transition: top .5s ease-out;
	  z-index:9999999;
	}
	
	.scroll { top: -0px; }
	
	.no-scroll {
	  top: 0;
	  z-index: 9999;
	}

	main {
	  width: 74%;
	  margin: 140px auto 0;
	  padding:0;
	  text-align:center;
      min-width: 1260px;
	}
	
	main p { 
	}
	
	.title {
	color: rgba(255,255,255,0.8);
	text-transform: uppercase;
	margin: 0 auto;
	padding:0;
	font-size: 1.5em;
	font-weight: 300;
	}
	
	
	
	
	
	
button {border:none; background-color:transparent;}	

.btn-contact {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 4px;
    color: #fff;
	width:30%;
    font-size: 0.75em;
    background: rgba(255, 255, 255, .1);
    padding: 8px 23px;
    margin:10px auto 100px;
    border: solid #ffffff 1px;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .15em;	
	transition: all 0.13s ease-in-out;
  -webkit-transition: all 0.13s ease-in-out;
  -moz-transition: all 0.13s ease-in-out;
  -ms-transition: all 0.13s ease-in-out;
	     
}	
.btn-showreel {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 4px;
    color: #fff;
    font-size: 1.45em;
	font-family: 'Nunito Sans', sans-serif;
    background: rgba(255, 255, 255, .1);
    padding: 8px 23px;
    margin:13vh auto 10px;
    border: solid #ffffff 1px;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .15em;	
	transition: all 0.13s ease-in-out;
  -webkit-transition: all 0.13s ease-in-out;
  -moz-transition: all 0.13s ease-in-out;
  -ms-transition: all 0.13s ease-in-out;
	     
}	
		
.btn-showreel:hover, .btn-contact:hover {
    color: #111;
	  background: rgba(255,255,255,1);
	  text-decoration: none;    
	transition: all 0.13s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;

}
			

	
.btn-getintouch {
    background-color: transparent;
    margin: 0 auto;
	padding-top:10px;
    width: auto;
    display: inline-block;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    width: 50px;
    height: 50px;
	border:none;
}

.btn-getintouch:hover {
	border:none;
	padding-top:0px;
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;    
	cursor: pointer;
}

	

	
	
	
	
	.mute {
    width: 35px;
    height: 35px;
    border: none;
    opacity: 1;
    background-color:transparent;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 15px;
    position: fixed;
    right: 15PX;
	z-index:1020;
	}

	
	
	#showreel { 
    position: relative;
	margin:0;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 100;
}

	
    .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
	.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
               

	#fade-thank-you, #fade-1, #fade-2, #fade-3, #fade-4, #fade-5, #fade-6, #fade-7, #fade-8, #fade-vid, #fade-vid-1, #fade-vid-2, #fade-vid-3, #fade-vid-4, #fade-vid-5, #fade-vid-6, #fade-btn-audio {opacity: 0.0;}
	
	.fadeo {opacity:1 !important;	
		transition:opacity 800ms ease-out 0ms;
		-webkit-transition:opacity 800ms ease-out 0ms;
		-moz-transition:opacity 080ms ease-out 0ms;
	}
	.fadeo:hover {opacity:.2 !important;	
		transition:opacity 100ms ease-out 0ms;
		-webkit-transition:opacity 100ms ease-out 0ms;
		-moz-transition:opacity 100ms ease-out 0ms;
	}
	
	
input[type="checkbox"] {
    width: 0;
    height: 0;
    margin: 0;
    border: 0 none;
    padding: 0;
}
input[type="checkbox"]:before {
    content: url('img/muted-on.gif');
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
}
input[type="checkbox"]:checked:before {
    content: url('img/muted-on.gif');
}


#ol {background-color:rgba(0, 0, 0, 0.5); top:0; margin:0; padding:0; width:100%; height:100%; position:fixed; z-index:10;}
.zindex1001 {z-index:1001; position:relative;}


/*  GO FULL WIDTH BELOW 1366 PIXELS */
@media only screen and (max-width: 1366px) {
	main {
	  width: 90vw;
	  margin: 0 auto;
	  padding:12vh 0 2vh 0;
	  text-align:center;
      min-width: 720px;
	}
	
	#margin-start {margin-top:42vh;}
	.btn-showreel {margin: 8vh auto 30px;	}	
	
.quote {font-size: 3.0em;padding: 0px 0px 0;line-height: 1.05em;margin: 0 auto 15px;
}
.quote-caption {font-size: 0.65rem; font-weight: 100; margin: 0 50px 0 0;}
	
#contact-bg {
    background: url(../img/bg-contact.jpg) repeat, #080d10;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}
}




/*  GO FULL WIDTH BELOW 720 PIXELS */
@media only screen and (max-width: 767px) {

.header-about {margin-left:0px;}

	
	#welcome { background:black;}
	#fade-vid {display:none;}
	
	#logo-start {max-width:410px; width:100%; margin:0 auto;}
	
	#margin-start {margin-top:8vh;}
	.btn-showreel {margin: 5vh auto 0px; font-size:1em !important;	}	
	
	
	main {
	  width: 84vw;
	  margin: 0 auto;
	  padding:10vh 0 7vh 0;
	  text-align:center;
      min-width: 320px;
	}

}


/*  GO FULL WIDTH BELOW 540 PIXELS */
@media only screen and (max-width: 540px) {

	#about-bg {  background-size:375% auto; background-position:25.8% top;    opacity: .5;}
	#contact-bg {     background-size: 350% auto; background-position: 62% top;    opacity: .5;}

	main {
	  max-width:90%;
	  margin: 0 auto;
	  text-align:center;
	}
	.left, .right, .center, .justify {text-align: center;}

		
	#logo-start {max-width:310px; width:100%; margin:0 auto;}
	#margin-start {margin-top:36vh;}
	
	.btn-showreel {
		font-size: 0.85em;
		padding: 7px 23px;
		margin: 65px auto 25px;
	}

	.btn-start {
	  font-size: .95em;
	  padding: 13px 2px;
	  margin:0 auto;
	  width: 90%;
	  display: block;
	}



}