/* CSS Document for Krishnan's Web Page */

/* -------------- RESET STYLES -------------- */ 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

a
{
	text-decoration:none;
	cursor:pointer;
}

@font-face 
{
	font-family: "Century Gothic";
	src: url('../fonts/Century_Gothic.ttf');
}

@font-face 
{
	font-family: "Century Gothic Bold";
	src: url('../fonts/Century_Gothic_Bold.ttf');
}

@font-face 
{
	font-family: "Futura Medium";
	src: url('../fonts/Futura_Medium.otf');
}

@font-face 
{
	font-family: "Futura Cond";
	src: url('../fonts/Futura_Cond.ttf');
}

@font-face 
{
	font-family: "GillSans Light";
	src: url('../fonts/GillSans_Light.ttf');
}

@font-face 
{
	font-family: "BanksScript";
	src: url('../fonts/BanksScript.otf');
}

/* -------------- END OF RESET STYLES -------------- */ 

/* -------------- BACKGROUND STYLES -------------- */ 

html, body{
	width: 100%;
	height: 100%;
}

body	
{
 	background:#253341;
 	font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
 }

.container 
{
	width: 1000px;
	height: 600px;
	position: relative; 
	top:50%;
	left:50%;
	margin-top:-326px;
	margin-left:-500px;
    opacity: 0.8;
	perspective: 2500px;
	-webkit-perspective: 2500;
}

.bimage01,.bimage02,.bimage03,.bimage04
{
	min-height: 100%; 
	min-width: 1024px; 
	width: 100%; 
	height: auto; 
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index:-9999; 
	background-size:cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	overflow: hidden;
	display: none;
} 

.bimage01 { background-image:url(../images/bk/01.jpg); }
.bimage02 { background-image:url(../images/bk/02.jpg); }
.bimage03 { background-image:url(../images/bk/03.jpg); }
.bimage04 { background-image:url(../images/bk/04.jpg); }

/* -------------- END OF BACKGROUND STYLES -------------- */ 


/* -------------- BOX POSITION STYLES -------------- */ 

#box 
{
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition: transform 1s ease 0s;
  -webkit-transition: -webkit-transform 1s ease 0s;
}

#box figure 
{
  display: block;
  position: absolute;
  margin:0px;	
}

#box .front,#box .back 
{
  width: 1000px;
  height: 600px;
}

#box .right,#box .left 
{
  width: 400px;
  height: 600px;
}

#box .top,#box .bottom 
{
  width: 1000px;
  height: 600px;
}

#box .left   { left: 50px; }
#box .right  { right: 50px; }

#box .bottom  { top: 400px; }

/* -------------- END OF BOX POSITION STYLES -------------- */ 


/* -------------- BOX VISUAL STYLES -------------- */ 

#box .front,#box .back,#box .top,#box .bottom 
{
 font-family: "GillSans Light";
 font-size: 40px;
 color:white;
 text-align: center;
}

#box .front  { background: #0AC2D2; }
#box .back   { background: #fcdb2c; }
#box .right  { background: #ffd857; }
#box .left   { background: #e9305a; }
#box .top    { background: #96b232; }
#box .bottom { background: #ffcb08; }

/* -------------- END OF BOX VISUAL STYLES -------------- */ 


/* -------------- BOX 3D STYLES -------------- */ 

#box .front  { transform: rotateY(   0deg ) translateZ(  300px ); }
#box .back   { transform: rotateX( 180deg ) translateZ(  300px ); }
#box .right  { transform: rotateY(  90deg ) translateZ( 250px ); }
#box .left   { transform: rotateY( -90deg ) translateZ( 250px ); }
#box .top    { transform: rotateX(  90deg ) translateZ( 300px ); }
#box .bottom { transform: rotateX( -90deg ) translateZ( -100px ); }

#box .front  { -webkit-transform: rotateY(   0deg ) translateZ(  300px ); }
#box .back   { -webkit-transform: rotateX( 180deg ) translateZ(  300px ); }
#box .right  { -webkit-transform: rotateY(  90deg ) translateZ( 250px ); }
#box .left   { -webkit-transform: rotateY( -90deg ) translateZ( 250px ); }
#box .top    { -webkit-transform: rotateX(  90deg ) translateZ( 300px ); }
#box .bottom { -webkit-transform: rotateX( -90deg ) translateZ( -100px ); }

#box.show-front  { transform: translateZ(  -50px ) rotateY(    0deg ); }
#box.show-back   { transform: translateZ(  -50px ) rotateX( -180deg ); }
#box.show-right  { transform: translateZ( -150px ) rotateY(  -90deg ); }
#box.show-left   { transform: translateZ( -150px ) rotateY(   90deg ); }
#box.show-top    { transform: translateZ( -100px ) rotateX(  -90deg ); }
#box.show-bottom { transform: translateZ( -100px ) rotateX(   90deg ); }

#box.show-front  { -webkit-transform: translateZ(  -50px ) rotateY(    0deg ); }
#box.show-back   { -webkit-transform: translateZ(  -50px ) rotateX( -180deg ); }
#box.show-right  { -webkit-transform: translateZ( -150px ) rotateY(  -90deg ); }
#box.show-left   { -webkit-transform: translateZ( -150px ) rotateY(   90deg ); }
#box.show-top    { -webkit-transform: translateZ( -100px ) rotateX(  -90deg ); }
#box.show-bottom { -webkit-transform: translateZ( -100px ) rotateX(   90deg ); }

/* -------------- END OF BOX 3D STYLES -------------- */ 


/* -------------- FOOTER BUTTON STYLES -------------- */ 

.line
{
	width: 610px;
	height: 2px;
	border-top: 2px solid #0AC2D2;
	bottom:51px;
	position: fixed;
	opacity: 0.70;
}

.pointer
{
	bottom:44px;
	display:none;
	position: fixed;
	z-index: 99;	
	opacity: 0.80;
}

#options
{
	bottom:0px;
	left:0px;
	position: fixed;
	width:100%;
	height:45px;
	text-align: center;
	margin-top: 5px;
	opacity: 0.85;
	color:#fff;
}

#show-buttons
{
	
	width:100%;
	position: absolute;
	bottom: 18px;
	font-family: "GillSans Light";
	font-size: 16px;
	text-decoration: none;
}

#show-buttons .butt
{
	cursor: pointer;
	width: 140px;
	display: inline-block;
	font-weight: 500;
	letter-spacing: 3px;
	margin:0 4px;
}

.show-front,.show-bottom,.show-back,.show-top
{
	color: #fff;
}

.show-front:hover
{	color:#0AC2D2;	}

.show-bottom:hover
{	color:#ffcb08;	}

.show-back:hover
{	color:#fcdb2c;	}

.show-top:hover
{	color:#009e04;	}

/* -------------- END OF BOX TRANSFORM STYLES -------------- */ 


/* -------------- WELCOME PAGE STYLES -------------- */ 

.logo
{
	height:376px;
	margin:65px 0 15px 0;
}

.front h2,.bottom h2,.back h2,.top h2
{
	font-family: "GillSans Light";
	font-size:30px;
	font-weight: 500;
	letter-spacing: 5px;
	margin-bottom: 5px;
}

.front h2 
{
	position: absolute;
	bottom: 65px;
	left: 240px;
}
.front h3
{
	font-family: "GillSans Light";
	font-size:11px;
	font-weight: 100;
	letter-spacing: 3px;
	display: block;
	position: absolute;
	bottom: 30px;
	left: 236px;
}

.front h4
{
	font-family: "BanksScript";
	font-size:22px;
	font-weight: 300;
	letter-spacing: 1px;
	margin: 2px; 
	position: absolute;
	bottom: 105px;
	left: 375px;
}

.mainline
{
	position: absolute;
	bottom:51px;
	left:305px;
}

/* -------------- END OF WELCOME PAGE STYLES -------------- */ 


/* -------------- ABOUT PAGE STYLES -------------- */ 

.bottom h2
{
	margin:0 0 20px 0;
	line-height: 30px;
}

.view
{
	display:block;
	width:1000px;
	height:600px;
	overflow: hidden;
	position: absolute;
	//margin-top:100px;
	left:0px;
}

.fullabout
{
	width:7000px;
	height:600px;
	display:block;
	position: absolute;
	top:0px;
	left:0px;
}

.fullabout h6
{
	font-family: "Garamond";
	font-style: italic;
	font-weight: 500;
	font-size: 20px;
	color: #fff;
	letter-spacing: 2px;
	width: 1000px;
	display: block;
	position: absolute;
	top:375px;
	left:0px;
}

.page1,.page2,.page3,.page4,.page5,.page6,.page7
{
	display: inline-block;
	height:600px;
	width:1000px;
	float: left;
	position: absolute;
	top:0px;
	z-index: 1;

}

.page1  { left:0px; }
.page2  { left:1000px; }
.page3  { left:2000px; }
.page4  { left:3000px; }
.page5  { left:4000px; }
.page6  { left:5000px; }
.page7  { left:6000px; }

.about01
{	
	float: left;
	margin-left: 105px;
	margin-top: 230px;
}

.about02
{	
	float: left;
	margin-left: 90px;
	margin-top: 230px;
}

.about03
{	
	float: left;
	margin-left: 140px;
	margin-top: 155px;
}

.about04
{	
	float: left;
	margin-left: 238px;
	margin-top: 40px;
}

.about05
{	
	float: left;
	margin-left: 150px;
	margin-top: 145px;
}

.about06
{	
	float: left;
	margin-left: 95px;
	margin-top: 0px;
}

.about07
{	
	float: left;
	margin-left: 330px;
	margin-top: 145px;
}

.profile
{
	position: absolute;
	left: 450px;
	top:240px;
	z-index: 99;
}

.b
{
	position: absolute;
	left: 25px;
	top:275px;	
	z-index: 1;
	cursor: pointer;
}

.m
{
	position: absolute;
	right: 25px;
	top:275px;	
	z-index: 1;
	cursor: pointer;
}

.res
{
	display: block;
	position: absolute;
	top:260px;
	left:770px;	
}

.abticon
{
	//padding:4px;
	height: 75px;
	width: 75px;
	margin: 0;
	border-radius: 85px;
	border: 4px solid #ffcb08;
	position: absolute;
}

.abticon:hover
{
	border: 4px solid #fff;
	transition: border 0.3s ease-in;
	-moz-transition: border 0.3s ease-in;
	-webkit-transition: border 0.3s ease-in;
}

.fcb
{
	top:420px;
	left:550px;
}

.lkn
{
	top:200px;
	left:350px;
}

.beh
{
	top:80px;
	left:213px;
}

.ins
{
	top:350px;
	left:850px;
}
.ggp
{
	top:450px;
	left:162px;
}

.wps
{
	top:85px;
	left:635px;
}


/* -------------- END OF ABOUT PAGE STYLES -------------- */ 

/* -------------- PORTFOLIO PAGE STYLES -------------- */ 

.back
{
	text-align: center;
}

.star
{
	display: inline;
	margin:15px 20px 5px 20px;

}

.back h2
{
	font-size: 72px;
	margin-top:40px;
	margin-bottom: 5px;
	//font-family: "helvetica neue";
	font-weight: 100;
	color:#393b30;
	display: inline-block;
	letter-spacing: 5px;
}

.back .lin
{
	padding: 0px;
	clear: both;
}

.back .down
{
	margin-top: 65px;
	clear: both;
}
.sec
{
	list-style-type: none;
	margin-top:60px;
	margin-left: 135px;
	display: block;
}

.sec li
{
	margin-right: 20px;
	float: left;
	display: inline;
	width: 160px;
	height: 160px;
	border-radius: 160px;
	background-color:#fcdb2c;
	border:#393b30 solid 3px;
	cursor: pointer;
}

.sec li:hover
{
	border:#393b30 dotted 3px;
	transition: border 0.3s ease-in;
	-moz-transition: border 0.3s ease-in;
	-webkit-transition: border 0.3s ease-in;
}

.sec li div
{
	display: block;
	width: 150px;
	height: 150px;
	background-color:#393b30;
	border-radius: 150px;
    margin: 5px;
}

.sec .cat
{
	font-family: "BanksScript";
	font-size: 29px;
	font-weight: 100;
	color: #fff;
	line-height: 0.7em;
	display: block;
	width: 103px;
	margin-top: -105px;
	margin-left: 27px;
	word-wrap:break-word;
}

.sec .sm
{
	font-size: 26px;
	margin-top: -102px;
}

.qd
{
	width: 1000px;
}

.qdownload
{
	width: 220px;
	margin:0 70px;
	display: inline-block;
}

.back p
{	
	font-size: 18px;
	margin-top:35px;
	font-family: "BanksScript";
	font-weight: 200;
	display: block;	
	color:#393b30;
	letter-spacing: 1px;
}

.back h5
{
	font-family: "GillSans Light";
	font-size:22px;
	font-weight: bold;
	letter-spacing: 2px;
	display: block;	
	color:#393b30;
	margin-top:5px;
	cursor: pointer;
}

.back h5:hover
{
	color:#000;
	transition: 0.2s ease-in-out;
	-moz-transition:  0.2s ease-in-out;
	-webkit-transition:  0.2s ease-in-out;
}	

/* -------------- END OF PORTFOLIO PAGE STYLES -------------- */ 


/* -------------- CONTACT PAGE STYLES -------------- */ 

.sicon
{
	padding:4px;
	height: 72px;
	width: 72px;
	margin: 0;
	border-radius: 85px;
	border: 4px solid #96b232;
	display: inline-block; 
}

.sicon:hover
{
	border: 4px solid #fff;
	transition: border 0.3s ease-in;
	-moz-transition: border 0.3s ease-in;
	-webkit-transition: border 0.3s ease-in;
}

.icongrid
{
	display: block;
}

.top h2
{
	margin-top:35px;
	margin-bottom: 5px;
	font-size: 40px;
	display: inline-block;
}

.ornament
{
	display: inline;
	margin:15px 3px 5px 3px;
}

.top h3
{
	display: inline-block;
	margin:15px 0 10px 0;
	font-family: "BanksScript";
	font-weight:100;
	font-size:22px;
	color: #fff;
	letter-spacing: 1px;
	padding:3px 0px;
}


.l1,.r1
{
	display:block;
	width:820px;
	padding:0 100px;
	float:left;
	margin:0 auto;
	text-align: center;
}

.r1
{
	width: 785px;
	padding: 0 108px;
}

.r1 input[type="text"],textarea
{
	width:89%;
	height:18px;
	margin:0px 0px 10px 0px;
	border:1px solid #718232;
	border-radius: 4px;	
	padding:5px 10px;
	font-family:"Arial";
	//font-style:italic;
	font-weight:100;
	font-size:13px;
	color:rgba(255,255,255,0.7);
	display: block;
	background-color: #256c1c;
	//letter-spacing: 1px;
}

.r1 textarea
{
	width:100%;
	height:150px;
	resize:none;
	margin-bottom: 15px;
	letter-spacing: 1px;
}

textarea:focus,input[type="text"]:focus
{
	border:1px solid #fff;
}

.submitbutton
{
	width:70px;
	height:70px;
	float: right;
	margin-right: -17px;
	font-family: "GillSans Light";
	font-size:16px;
	font-weight:100;
	font-style:normal;
	background-color:#304324;
	color:#FFF;
	border:3px solid #304324;
	padding: 5px;
	border-radius: 70px;
	display: inline-block;
	cursor: pointer;
 	background-image:url(../images/mail.png);
	background-position: center; 
	background-repeat: no-repeat; 
}

.submitbutton:hover
{
	border: 3px solid #fff;
	transition: border 0.3s ease-in;
	-moz-transition: border 0.3s ease-in;
	-webkit-transition: border 0.3s ease-in;
	background-color:#111;
}
	
.end
{
	display: block;
	clear: both;
	margin: 0 auto;
	padding-top:15px;
}