@font-face
{
font-family: hn;
src: url('hn.ttf');
}

@font-face
{
font-family: hn;
src: url('hn-light.otf');
font-weight: light;
}

/*         css reset       */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*,
*:after,
*::before {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

/*      css reset ends here        */

/*   main styles start from here   */

body
{
width: 100%;
height: 100%;
font-family: 'raleway', sans-serif;
}


#landing-wrapper
{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: #1b1b1b;
z-index: 100;
}

#landing
{
width: 100%;
height: 100%;
}

#fade-pointer
{
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
border-radius: 50%;
box-shadow: 0px 0px 500px 50px rgba(81,187,255,1);
background: rgba(81,187,255,0.2);
}

#landing-inner
{
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 100%;
background: url('../images/bg-dot.png');

-webkit-animation: move 200s infinite linear, rotate 30s infinite linear;
-moz-animation: move 200s infinite linear, rotate 30s infinite linear;
-ms-animation: move 200s infinite linear, rotate 30s infinite linear;
-o-animation: move 200s infinite linear, rotate 30s infinite linear;
animation: move 200s infinite linear, rotate 30s infinite linear;
}

@-webkit-keyframes move
{
0% {background-position: 0px 0px;}
100% {background-position: 5000px 0px;}
}

@-moz-keyframes move
{
0% {background-position: 0px 0px;}
100% {background-position: 5000px 0px;}
}

@-ms-keyframes move
{
0% {background-position: 0px 0px;}
100% {background-position: 5000px 0px;}
}

@-o-keyframes move
{
0% {background-position: 0px 0px;}
100% {background-position: 5000px 0px;}
}

#land-elements
{
position: fixed;
z-index: 100;
}

#land-elements div
{
position: fixed;
left: 50%;
top: 50%;
}

#land-elements div:nth-child(1)
{
margin-left: -59px;
margin-top: -25px;
}

#land-elements div:nth-child(2)
{
margin-left: -100px;
margin-top: -100px;

-webkit-animation: rotate 3s infinite linear;
-moz-animation: rotate 3s infinite linear;
-ms-animation: rotate 3s infinite linear;
-o-animation: rotate 3s infinite linear;
animation: rotate 3s infinite linear;
}

@-webkit-keyframes rotate
{
0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(359deg);-ms-transform: rotate(359deg);transform: rotate(359deg);}
}

@-moz-keyframes rotate
{
0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(359deg);-ms-transform: rotate(359deg);transform: rotate(359deg);}
}

@-ms-keyframes rotate
{
0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(359deg);-ms-transform: rotate(359deg);transform: rotate(359deg);}
}

@-o-keyframes rotate
{
0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(359deg);-ms-transform: rotate(359deg);transform: rotate(359deg);}
}

#land-elements div:nth-child(3)
{
margin-left: -80px;
margin-top: -80px;
}

#window-width
{
position: fixed;
width: 100%;
top: 0px;
left: -5;
height: 1px;
}

#window-height
{
position: fixed;
width: 1px;
top: -5px;
height: 100%;
left: 0;
}

#nav-wrapper
{
position: fixed;
top: 20px;
left: 20px;
z-index: 50;
}

#nav-inner div
{
border: 1px solid rgba(105,105,105,0.5);
color: rgba(255,255,255,8);
background: rgba(10,10,10,1);
text-align: center;
padding: 17px;
height: 50px;
}

#nav-inner div, #nav-inner li
{
width: 150px;
margin: 1px 0;
cursor: pointer;
}

#nav-inner ul
{
overflow: hidden;
}

#nav-inner li
{
-webkit-transition: left .2s;
transition: left .2s;

color: rgba(0,0,0,0.9);
background: rgba(255,255,255,.95);
position: relative;
left: -150px;
font-weight: bold;
padding: 10px 17px;
height: 35px;
}

#nav-inner div:hover, #nav-inner li:hover
{
background: rgba(81,187,255,0.8);
color: rgba(255,255,255,8);
}

#music-player-wrapper
{
width: 250px;
padding: 0 15px;
height: 35px;
display: block;
position: fixed;
top: 30px;
right: 10px;
z-index: 70;
overflow: hidden;
}

#music-player-wrapper #heading-wrapper
{
padding: 10px 20px;
background: url('../images/music-controls-heading.png') right -4px no-repeat, rgba(50,50,50,1);
_background: url('../images/music-controls-heading.png') right -46px no-repeat, rgba(50,50,50,1);
color: rgba(255,255,255,0.9);
letter-spacing: 2px;
cursor: pointer;
}

#music-player-wrapper #player-wrapper
{
height: 50px;
width: 100%;
background: #111111;
text-align: right;
}

#music-player-wrapper #player-wrapper .music-buttons
{
width: 30px;
height: 30px;
border: 1px solid gray;
display: inline-block;
margin: 10px 5px;
cursor: pointer;
}

/*.music-buttons#play
{
background: url('../images/music-controls.png') 6px 3px no-repeat;
}

.music-buttons#play
{
background: url('../images/music-controls.png') -16px 3px no-repeat;
}*/

.music-buttons#play
{
background: url('../images/music-controls.png') 6px -21px no-repeat;
}

.music-buttons#stop
{
background: url('../images/music-controls.png') -36px 3px no-repeat;
}

.music-buttons#stop:hover
{
background: url('../images/music-controls.png') -36px -21px no-repeat;
}

#song-name
{
font-family: sans-serif;
font-size: 12px;
float: left;
color: rgba(250,250,250,0.8);
padding: 18px 8px;
}

#music-player-wrapper #music-wrapper
{
padding: 5px 10px;
background: rgba(81,187,255,0.8);
height: 115px;
}

#music-player-wrapper #music-wrapper li
{
padding: 5px 0 5px 10px;
color: rgba(255,255,255,1);
cursor: pointer;
font-weight: light;

-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

#music-player-wrapper #music-wrapper li:hover
{
margin-left: 10px;
background: rgba(200,200,200,0.3);
}

#music-player-wrapper #youtube-link a
{
display: block;
background: red;
text-align: center;
color: rgba(240,240,240,1);
padding: 8px;
}

#music-player-wrapper #youtube-link a:hover
{
background: rgba(100,100,100,1);
}

#body-wrapper
{
position: absolute;
height: 1100%;
width: 100%;
background: rgba(5,5,5,1);
}

.transition
{
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}

.section
{
position: relative;
width: 100%;
}

#s1
{
background: url('../images/intro-bg.jpg') center top no-repeat, rgba(2,2,2,1);
padding: 40px 100px 300px 100px;
height: auto;
text-align: center;
}

#intro-logo 
{
position: relative;
top: 70px;
}

#scrd
{
padding-top: 50px;
margin-left: -50px;
color: rgba(255,255,255,0.8);
}

#sound-wave
{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 132px;
overflow: hidden;
}

#canvas
{
_border: 1px solid white;
position: relative;
bottom: -7px;
}

#sound-wave #waves, #sound-wave #mask
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

#sound-wave #mask
{
background: url('../images/sound-wave-mask.png');
}

#sound-wave #waves
{
background: url('../images/sound-wave.png'), rgba(2,2,2,1);

-webkit-animation: move 60s infinite linear;
-moz-animation: move 60s infinite linear;
-ms-animation: move 60s infinite linear;
-o-animation: move 60s infinite linear;
animation: move 60s infinite linear;
}

#move-mouse
{
padding: 20px 20px 20px 50px;
background: url('../images/mm.png') 5px 15px no-repeat, rgba(0,0,0,0.8);
color: rgba(240,240,240,1);
position: fixed;
top: 300px;
left: -400px;
z-index: 100;
}

.divider
{
width: 100%;
height: 9.090909090909090909090909090909091%;
background: #000;
}

.divider .fore, .divider .mid, .divider .back, .divider .vignette
{
position: absolute;
width: 100%;
height: 100%;
}

#d1, #d2
{
top: 0;
left: 0;
}

#d1 .fore
{
background: url('../images/bg/bg1/fore.png') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#d1 .mid
{
background: url('../images/bg/bg1/mid.png') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#d1 .back
{
background: url('../images/bg/bg1/back.jpg') no-repeat;
background-size: cover;
background-attachment: fixed;
}

.vignette
{
_background: url('../images/vignette.png') no-repeat;
background-size: 100% 100%;
}

#s2, #s3, #s4, #s5, #s6
{
height: auto;
font-family: hn, sans-serif;
padding: 100px 200px;
background: url('../images/bg.jpg'), rgba(2,2,2,1);
}

#s2
{
_background: url('../images/about-bg.png') right top repeat-y, rgba(2,2,2,1);
}

.section-heading
{
position: relative;
width: 800px;
font-family: hn, sans-serif;
font-weight: light;
left: 0px;
font-size: 80px;
color: rgba(81,187,255,1);
}

.section-description
{
position: relative;
width: 800px;
padding-top: 50px;

font-weight: 500;
font-size: 15px;
letter-spacing: 2px;
line-height: 30px;
color: rgba(252,252,252,1);
}

#d2 .fore
{
background: url('../images/bg/bg2/fore.png') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#d2 .mid
{
background: url('../images/bg/bg2/mid.png') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#d2 .back
{
background: url('../images/bg/bg2/back.jpg') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#s3
{
_background: url('../images/members-bg.png') right top repeat-y, rgba(2,2,2,1);
}

#members
{
width: 100%;
}

.member-wrapper
{
padding: 10px 20px;
border-radius: 5px;
display: block;
width: 45%;
vertical-align: top;
width: auto;
height: 300px;
background: url('../images/members.png') no-repeat;
border-bottom: 1px solid rgba(50,50,50,.5);
overflow: hidden;
}

.mr-description-wrapper
{
padding: 40px;
padding-left: 300px;
height: 100%;
font-weight: 500;
letter-spacing: 2px;
line-height: 30px;
color: rgba(252,252,252,1);
display: block;
position: relative;
}

.mr-description
{
display: table-cell;
vertical-align: middle;
height: 200px;
}

.member-wrapper:last-child
{
border-bottom: transparent;
}

#anubhav
{
background-position: 0 -310px;
}

#gaurav
{
background-position: 0 -620px;
}

#shashank
{
background-position: 0 -920px;
}

#vishnu
{
background-position: 0 -1220px;
}

#saksham
{
background-position: 0 -1470px;
}

#d3 .fore
{
background: url('../images/bg/bg3/fore.png') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#d3 .mid
{
background: url('../images/bg/bg3/mid.png') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#d3 .back
{
background: url('../images/bg/bg3/back.jpg') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#s4
{
_background: url('../images/schedule-bg.png') right top repeat-y, rgba(2,2,2,1);
}

.schedule-description
{
margin-top: 100px;

font-weight: 500;
font-size: 15px;
letter-spacing: 2px;
line-height: 30px;
color: rgba(252,252,252,1);
}

table
{
width: 100%;
margin: 0 auto;
}

tr:nth-child(even)
{
background: rgba(20,20,20,0.5);
}

th
{
background: rgba(250,250,250,1);

color: rgba(2,2,2,1);
box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

tr td:nth-child(2), tr td:nth-child(3)
{
text-align: center;
}

tr td, th
{
padding: 20px;
}

#d4 .fore
{
background: url('../images/bg/bg4/fore.png') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#d4 .mid
{
background: url('../images/bg/bg4/mid.png') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#d4 .back
{
background: url('../images/bg/bg4/back.jpg') no-repeat;
background-size: cover;
background-attachment: fixed;
}

#s5
{
_background: url('../images/gallery-bg.png') right top repeat-y, rgba(2,2,2,1);
}

.gallery-description
{
font-weight: 500;
font-size: 15px;
letter-spacing: 2px;
line-height: 30px;
color: rgba(252,252,252,1);
}

.gallery-description a
{
display: inline-block;
padding: 2px;
}

h2
{
margin-top: 25px;
}

.album li img:hover
{
box-shadow: 1px 1px 0px rgba(81,187,255,0.8), -1px 1px 0px rgba(81,187,255,0.8), -1px -1px 0px rgba(81,187,255,0.8), 1px -1px 0px rgba(81,187,255,0.8);
}

#s6
{
_background: url('../images/contact-bg.png') right top repeat-y, rgba(2,2,2,1);
}

a
{
text-decoration: none;
color: rgba(252,252,252,1);
}

.contact-description
{
padding-top: 50px;
_padding-left: 50px;
font-weight: 500;
font-size: 15px;
letter-spacing: 2px;
line-height: 30px;
color: rgba(252,252,252,1);
}

#contact div
{
margin-top: 50px;
width: 50px;
height: 50px;
display: inline-block;
vertical-align: top;
margin-right: 5px;
}

#contact div a
{
display: block;
width: 100%;
height: 100%;
}

#contact div:nth-child(1)
{
background: url('../images/contact-icons.png') 0px 0px no-repeat;
}

#contact div:nth-child(1):hover
{
background-position: -50px 0px;
}

#contact div:nth-child(2)
{
background: url('../images/contact-icons.png') 0px -53px no-repeat;
}

#contact div:nth-child(2):hover
{
background-position: -50px -53px;
}

@media screen and (max-width: 1400px)
{
	#s2, #s3, #s4, #s5, #s6
	{
	padding: 100px;
	}
	
	.mr-description-wrapper
	{
	padding: 10px;
	padding-left: 250px;
	}
	
	.mr-description
	{
	height: 260px;
	}
}