@font-face {
    font-family: myFont;
    src: url(fonts/timeburnernormal.ttf);
}

@font-face {
    font-family: myFontBold;
    src: url(fonts/timeburnerbold.ttf);
}


html
	{
	color:#027966;
	}

body
	{
	font-family:myFont;
	background:#fff;
	overflow:hidden;
	}
	
::-webkit-scrollbar { 
    display: none; 
}

#header	
{
	
}

#title-div
	{
	position:fixed;
	top:15px;
	left:30px;
	-webkit-animation: move 8s linear;
	animation: move 8s linear;
	-moz-animation: move 8s linear;
	}

#title-div p
	{
	position:absolute;
	top:0px;
	left:0px;
	font-size:28px;
	padding:0px;
	margin:0px;
	}
	
p#titlefirst
	{
	-webkit-animation: title 20s infinite;
    -moz-animation: title 20s infinite;
    -ms-animation: title 20s infinite;
    -o-animation: title 20s infinite;
    animation: title 20s infinite;
	}
	
p#titlesecond
	{
	-webkit-animation: titletwo 20s infinite;
    -moz-animation: titletwo 20s infinite;
    -ms-animation: titletwo 20s infinite;
    -o-animation: titletwo 20s infinite;
    animation: titletwo 20s infinite;
	}
	
#the-body-part
	{
	margin-top:30px;
	}

#skills
	{
	padding-top:100px;	
	}
	
#skills-box
	{
	margin-top:140px;
	display:inline-block;
	width:100%;
	padding-left:10px;
	padding-right:10px;
	border-left:solid 3px #222;
	border-bottom:solid 3px #222;
	border-top:solid 3px #222;
	border-right:solid 3px #ddd;
	background:rgba(255,255,255,0.7);
	animation:border 7s infinite;
	-webkit-animation: border 7s infinite;
	animation: border 7s infinite;
	-moz-animation: border 7s infinite;
	font-size:14px;
	margin-left:-65px;
	}
	
#skills-box h2
	{
	padding:0px;
	margin:0px;
	font-weight:700;
	font-size:18px;
	}
	
font#title
	{
	text-transform:uppercase;
	font-size:30px;
	}
	


font#the-day
	{
	font-size:14px;
	}
	
#txt
	{
	display:inline-block;
	width:100%;
	text-align:right;
	font-size:18px;
	color:#111;
	font-family:myFontBold;
	}

#day
	{
	display:inline-block;
	text-align:right;
	width:100%;
	font-weight:700;
	font-style:italic;
	padding-right:20px;
	}
#rector
	{
	text-align:center;
	}
#reactor img
	{
	width:250px;
	position:absolute;
	top:160px;
	left:172px;
	z-index:2000;
	}
	
#reactorCirleOver
{
	position:absolute;
	top:160px;
	left:184px;
	z-index:1000;
	background:#F2F3F6;
	height:240px;
	width:240px;
	border-radius:50%
}
	
#loading
{
animation-name: myfirst;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 20s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}

#loading1
{
animation-name: mysec;
animation-duration: 74s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: mysec;
-moz-animation-duration: 77s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: mysec;
-webkit-animation-duration: 73s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}

#loading2
{
animation-name: spinPulse;
animation-duration: 22s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 25s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 22s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}

#loading3
{
animation-name: mysec;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: mysec;
-moz-animation-duration: 15s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: mysec;
-webkit-animation-duration: 15s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}

#loading4
{
animation-name: myfirst;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 30s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 30s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}


img#loading
	{
	width:101px;
	position:fixed;
	top:10px;
	right:10px;
	}
	
#wrap-all {
width: 100%;
height: 100%;
background: url('images/.html') no-repeat center center;
position: fixed;
overflow: auto;
cursor:default;
}




.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,0,0,1);
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 100px;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    -moz-animation: spinPulse 3s infinite ease-in-out;
    -webkit-animation: spinPulse 3s infinite linear;
	position:fixed;
	top:10px;
	right:10px;
	box-shadow: 0 0 10px #222;
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,0,0,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 65px;
	box-shadow: 0 0 5px #222;
    width: 65px;
    height: 65px;
    margin: 0 auto;
    position: fixed;
    top: 17.5px;
	right:17.5px;
    -moz-animation: spinoffPulse 10s infinite linear;
    -webkit-animation: spinoffPulse 10s infinite linear;
}

	
#percent{
            opacity: 1;
            font-weight: 700;
            -webkit-animation: percent 5s infinite;
            -moz-animation: percent 5s infinite;
            -ms-animation: percent 5s infinite;
            -o-animation: percent 5s infinite;
            animation: percent 5s infinite;
        }
		
#percent2{
            opacity: 1;
            font-weight: 700;
            -webkit-animation: percent 5s infinite;
            -moz-animation: percent 7s infinite;
            -ms-animation: percent 7s infinite;
            -o-animation: percent 7s infinite;
            animation: percent 7s infinite;
        }
		
#percent3{
            opacity: 1;
            font-weight: 700;
            -webkit-animation: percent 10s infinite;
            -moz-animation: percent 510s infinite;
            -ms-animation: percent 10s infinite;
            -o-animation: percent 10s infinite;
            animation: percent 10s infinite;
        }
		
#percent4{
            opacity: 1;
            font-weight: 700;
            -webkit-animation: percent 9s infinite;
            -moz-animation: percent 9s infinite;
            -ms-animation: percent 9s infinite;
            -o-animation: percent 9s infinite;
            animation: percent 9s infinite;
        }
        
		
#letter{
			letter-spacing:1px;
			text-align:left;
            -webkit-animation: letter 8.5s infinite;
            -moz-animation: letter 8.5s infinite;
            -ms-animation: letter 8.5s infinite;
            -o-animation: letter 8.5s infinite;
            animation: letter 8.5s infinite;
        }
		
#letter2{
			letter-spacing:1px;
			text-align:left;
            -webkit-animation: letter 4.5s infinite;
            -moz-animation: letter 4.5s infinite;
            -ms-animation: letter 4.5s infinite;
            -o-animation: letter 4.5s infinite;
            animation: letter 4.5s infinite;
        }

#letter3{
			letter-spacing:1px;
			text-align:left;
            -webkit-animation: letter 11s infinite;
            -moz-animation: letter 11s infinite;
            -ms-animation: letter 11s infinite;
            -o-animation: letter 11s infinite;
            animation: letter 11s infinite;
        }

#letter4{
			letter-spacing:1px;
			text-align:left;
            -webkit-animation: letter 6s infinite;
            -moz-animation: letter 6s infinite;
            -ms-animation: letter 6s infinite;
            -o-animation: letter 6s infinite;
            animation: letter 6s infinite;
        }		
		
#testimonials
	{
	display:inline-block;
	position:absolute;
	top:290px;
	border-left:solid 1px #26B8AE;
	border-bottom:solid 1px #26B8AE;
	border-top:solid 1px #09484D;
	border-right:solid 1px #09484D;
	background:rgba(255,255,255,0.7);
	-webkit-animation: bordertwo 8s infinite;
	animation: bordertwo 8s infinite;
	-moz-animation: bordertwo 8s infinite;
	background:rgba(255,255,255,0.7);
	width:100%;
	padding:10px;
	left:-20px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	}
	
#testimonials img
	{
	width:80px;
	float:left;
	margin-right:10px;
	}
		
#the-type-div
	{
	z-index:-2;
	height::140px;
	min-height:140px;
	display:block;
	width:100%;
	background:#fff;
	}
        
#menu
	{
	width:100px;
	position:fixed;
	right:0px;
	top:200px;
	border:solid 1px #333;
	height:300px;
	border-radius:-150px;
	}
	
p#theTitle
{
	font-family:myFontBold;
	font-size:38px;
	color:#222;
	-webkit-animation: titletwo 20s infinite;
    -moz-animation: titletwo 20s infinite;
    -ms-animation: titletwo 20s infinite;
    -o-animation: titletwo 20s infinite;
    animation: titletwo 20s infinite;
}


#audioplayer{
	width: 480px;
	height: 60px;
	position:fixed;
	bottom:32px;
	left:44px;
}

#pButton{
    height:60px; 
    width: 60px;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    float:left;
    outline:none;
}

.play{background: url('../alexkatz.me/codepen/images/play.html') ;}
.pause{background: url('../alexkatz.me/codepen/images/pause.html') ;}

#timeline{
	width: 300px;
	height: 5px;
	margin-top: 26px;
	float: left;
	background: rgba(0,0,0,.3);
	margin-left:20px;
  
}
#playhead{
	width: 5px;
	height: 5px;
	background: rgba(0, 0, 0,1);

}

#music
{
	position:fixed;
	bottom:10px;
	left:10px;
	z-index:200;
}

#musicRing
{
	position:fixed; 
	width:70px; 
	height:70px; 
	border-radius:50%; 
	border:solid 7px #222; 
	position:fixed; 
	bottom:20px; 
	left:30px;
	-webkit-animation: title 20s infinite;
    -moz-animation: title 20s infinite;
    -ms-animation: title 20s infinite;
    -o-animation: title 20s infinite;
    animation: title 20s infinite;
	background:rgba(255,255,255,0.7);
}

#theRoboMenu
{
	border:solid 1px #111;
	padding:5px;
	width:400px;
	position:fixed;
	right:50px;
	top:20px;
	z-index:-1;
	padding-left:15px;
	padding-bottom:2px;
	height:25px;
	background:rgba(255,255,255,0.7);
}

#theRoboCircle
{
	background:#F2F3F6;
	height:92px;
	width:92px;
	border-radius:50%;
	position:fixed;
	right:8px;
	top:8px;
}

#theRoboMenuList	
{
	position:fixed;
	top:27px;
	right:140px;
}

#theRoboMenuList a
{
	text-decoration:none;
	color:#111;
	text-transform:uppercase;
	margin-right:20px;
}

#theRoboMenuList a:hover
{
	text-decoration:none;
	color:#111;
	text-transform:uppercase;
	margin-right:20px;
	font-weight:700;
	
}

#theRoboDate
{
	border:solid 1px #111;
	padding:5px;
	width:230px;
	position:fixed;
	right:50px;
	top:53px;
	z-index:-2;
	padding-left:15px;
	padding-bottom:2px;
	height:20px;
	background:#525151;
	color:#fff;
}

#theRoboDay
{
	position:fixed;
	top:60px;
	right:110px;
	font-size:14px;
	color:#fff;
	font-weight:700;
}

#dates
	{
	position:fixed;
	top:40px;
	right:27px;
	font-size:16px;
	z-index:2000;
	}
	
#musicInfo
{
	position:fixed;
	bottom:75px;
	left:125px;
	text-transform:uppercase;
	color:#222;
	font-family:myFontBold;
}

#musicCredits
{
	position:fixed;
	bottom:25px;
	left:125px;
	text-transform:uppercase;
	color:#222;
	font-family:myFontBold;
	width:298px;
}

#social
{
	position:fixed;
	right:0px;
	bottom:0px;
	width:270px;
	height:70px;
}

#social img	
{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

#social a
{
	text-decoration:none;
	display:inline-block;
	width:40px;
	text-transform:uppercase;
	color:#222;
	height:40px;
	border:solid 1px #222;
	padding-left:5px;
	padding-top:5px;
	border-radius:50%;
	margin-left:25px;
	background:#222;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	-webkit-animation: border 6s infinite;
    -moz-animation: border 6s infinite;
    -ms-animation: border 6s infinite;
    -o-animation: border 6s infinite;
    animation: border 6s infinite;
}

a#social2
{
	text-decoration:none;
	display:inline-block;
	width:40px;
	text-transform:uppercase;
	color:#222;
	height:40px;
	border:solid 1px #222;
	padding-left:5px;
	padding-top:5px;
	border-radius:50%;
	margin-left:25px;
	background:#222;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	-webkit-animation: border 10s infinite;
    -moz-animation: border 10s infinite;
    -ms-animation: border 10s infinite;
    -o-animation: border 10s infinite;
    animation: border 10s infinite;
}

a#social3
{
	text-decoration:none;
	display:inline-block;
	width:40px;
	text-transform:uppercase;
	color:#222;
	height:40px;
	border:solid 1px #222;
	padding-left:5px;
	padding-top:5px;
	border-radius:50%;
	margin-left:25px;
	background:#222;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	-webkit-animation: border 14s infinite;
    -moz-animation: border 14s infinite;
    -ms-animation: border 14s infinite;
    -o-animation: border 14s infinite;
    animation: border 14s infinite;
}

#social a:hover	
{
	background:#444;
}

img#target
{
	position:fixed;
	bottom:12px;
	right:12px;
	width:100px;
	height:100px;
}

#footerCircleOverlap
{
	width:100px;
	height:100px;
	border:solid 2px #222;
	position:fixed;
	bottom:10px;
	right:10px;
	background:rgba(255,255,255,0.9);
}
/*-
#copyright
{
	background:#222;
	color:#fff;
	float:right;
	text-transform:uppercase;
	font-size:12px;
	padding-left:20px;
	padding-right:20px;
	padding-top:3px;
	position:absolute;
	bottom:0px;
	right:0px;
	width:260px;
}--*/

h1#pappuTitle
{
	background:#222;
	font-size:24px;
	padding-left:80px;
	padding-top:3px;
	color:#fff;
	text-align:right;
	padding-right:25px;
}

#theContent
{
	margin-top:170px;
	z-index:-200;
	margin-left:50px;
}

.type-wrap
{
	font-family:Roboto;
	line-height:24px;
	color:#222;
	font-size:16px;
	text-transform:uppercase;
	font-weight:300;
}

img#pappuPic
{
	-webkit-animation: pappu 32s linear;
    -webkit-animation: pappu 32s linear;
    -webkit-animation: pappu 32s linear;
    -webkit-animation: pappu 32s linear;
    -webkit-animation: pappu 32s linear;
}


/* Header */
.large-header {
	position: absolute;
	width: 100%;
	background: #F2F3F6;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

.demo-1 .large-header {
	background-image: url('img/demo-1-bg.html');
}

.demo-2 .large-header {
	background-image: url('img/demo-2-bg.html');
	background-position: center bottom;
}

.demo-3 .large-header {
	background: #7f8c8d;
}

.demo-4 .large-header {
	background: #f9f1e9;
}

.main-title {
	position: absolute;
	margin: 0;
	padding: 0;
	color: #f9f1e9;
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.demo-1 .main-title, 
.demo-3 .main-title {
	text-transform: uppercase;
	font-size: 4.2em;
	letter-spacing: 0.1em;
}

.demo-2 .main-title {
	font-family: 'Clicker Script', cursive;
	font-weight: normal;
	font-size: 8em;
	padding-left: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.demo-2 .main-title::before {
	content: '';
	width: 20vw;
	height: 20vw;
	min-width: 3.5em;
	min-height: 3.5em;
	background: url(img/deco.html) no-repeat center center;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	z-index: -1;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.demo-3 .main-title {
	padding: 10px 40px;
	border: 10px double #f9f1e9;
	text-transform: uppercase;
	font-family: Londrina Outline, sans-serif;
}

.demo-4 .main-title {
	font-size: 6em;
	font-weight: 300;
	padding: 10px 30px;
	text-transform: uppercase;
	color: #222;
}

.main-title .thin {
	font-weight: 200;
}

@media only screen and (max-width : 768px) {
	.demo-1 .main-title, 
	.demo-3 .main-title,
	.demo-4 .main-title {
		font-size: 3em;
	}

	.demo-2 .main-title {
		font-size: 4em;
	}
}

#theAboutContent
{
	max-height:310px;
	overflow:scroll;
	overflow-y:auto;
	border-left:solid 3px #222;
	border-bottom:solid 3px #222;
	border-top:solid 3px #222;
	border-right:solid 3px #ddd;
	background:rgba(255,255,255,0.7);
	margin-top:140px;
	padding:20px;
	text-align:justify;
	color:#222;
	font-family:Roboto;
	font-weight:300;
	margin-left:60px;
	animation:border 12s infinite;
	-webkit-animation: border 12s infinite;
	animation: border 12s infinite;
	-moz-animation: border 12s infinite;
	line-height:24px;
}

#aboutPicture
{
	margin-left:-63px;
	border:solid 3px #222;
	margin-top:20px;
	width:403px;
	padding:0px;
	height:167px;
}

.dg-container{
	width: 100%;
	height: 450px;
	position: relative;
	margin-top:160px;
}
.dg-wrapper{
	width: 481px;
	height: 316px;
	margin: 0 auto;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
}
.dg-wrapper a{
	width: 480px;
	height: 290px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: #444;
}
.dg-wrapper a.dg-transition{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
	display: block;
	padding: 23px 0px 0px 0px;
}
.dg-wrapper a div{
	text-align: center;
	line-height: 50px;
	color: #fff;
	font-size: 14px;
	width: 100%;
	top: -13px;
	display: none;
	position: absolute;
	font-family:Roboto;
}
.dg-wrapper a.dg-center div{
	display: block;
}
.dg-container nav{
	width: 58px;
	position: absolute;
	z-index: 1000;
	bottom: 100px;
	left: 50%;
	margin-left: -29px;
}
.dg-container nav span{
	text-indent: -9000px;
	float: left;
	cursor:pointer;
	width: 24px;
	height: 25px;
	opacity: 0.8;
	background: transparent url(images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
	opacity: 1;
}
.dg-container nav span.dg-next{
	background-position: top right;
	margin-left: 10px;
}

#typing
	{
	padding-top:100px;
	font-size:16px;
	line-height:26px;
	}
	
.type-wrap
	{
	max-width:200px;
	}
	
#roatate
{
	height:100px;
	width:100px;
}

#therotateCircle{
	height:100px;
	width:100px;
	border-radius:50%;
	border:solid 3px #222;
	border-left:solid 3px #222;
	border-bottom:solid 3px #222;
	border-top:solid 3px #222;
	border-right:solid 3px #ddd;
	animation-name: myfirst;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	/* Firefox: */
	-moz-animation-name: myfirst;
	-moz-animation-duration: 8s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-play-state: running;
	/* Safari and Chrome: */
	-webkit-animation-name: myfirst;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	background:rgba(255,255,255,0.7);
}

ul#aboutTime
{
	margin-top:140px;
	width:150px;
}

ul#aboutTime	li
{
	display:inline-block;
	width:100%;
	margin-left:20px;
	margin-bottom:40px;
	letter-spacing:4px;
}

ul#aboutTime	li:hover
{
	display:inline-block;
	width:100%;
	margin-left:20px;
	margin-bottom:40px;
	letter-spacing:5px;
}


ul#aboutTime.tabs li.selected a, ul.tabs li.selected a:hover
{
    font-weight:700;
	-webkit-animation: titletwo 25s infinite;
    -moz-animation: titletwo 25s infinite;
    -ms-animation: titletwo 25s infinite;
    -o-animation: titletwo 25s infinite;
    animation: titletwo 25s infinite;
}



#aboutTimeline
{
	margin-top:160px;
	background-image:url('images/backtime.png');
	width:150px;
	height:305px;
	padding-top:10px;
	transition:background-image 0.2s linear;
}

#aboutTimeline:hover
{
	margin-top:160px;
	background-image:url('images/backtime2.png');
	width:150px;
	height:305px;
	padding-top:10px;
	transition:background-image 0.2s linear;
}

#pappu1
{
	background-image:url('images/pappu1.jpg');
	height:310px;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	background-position: 0px 0px;
	animation:border 14s infinite;
	-webkit-animation: border 14s infinite;
	animation: border 14s infinite;
	-moz-animation: border 14s infinite;
}

#pappu1 p
{
	background:#fff;
	padding:15px;
	width:260px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
}

#pappu2
{
	background-image:url('images/pappu4.jpg');
	height:310px;
	border:solid 3px #222;
	background-position: 0px 0px;
}

#pappu2 p
{
	background:#fff;
	padding:15px;
	width:260px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
	position:absolute;
	left:0px;
	bottom:20px;
}

#pappu3
{
	background-image:url('images/pappu5.jpg');
	height:310px;
	border:solid 3px #222;
	background-position: 0px 0px;
}

#pappu3 p
{
	background:#fff;
	padding:15px;
	width:260px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
	position:absolute;
	right:0px;
	bottom:20px;
}

#pappu4
{
	background-image:url('images/pappu6.jpg');
	height:310px;
	border:solid 3px #222;
	background-position: 0px 0px;
}

#pappu4 p
{
	background:#fff;
	padding:15px;
	width:200px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
	position:absolute;
	right:0px;
	bottom:10px;
}

#pappu5
{
	background-image:url('images/pappu7.jpg');
	height:310px;
	border:solid 3px #222;
	background-position: 0px 0px;
}

#pappu5 p
{
	background:#fff;
	padding:15px;
	width:400px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
	position:absolute;
	left:0px;
	bottom:40px;
}


#call
{
	background:rgba(255,255,255,0.7);
	border:solid 1px #222;
	padding:15px;
	font-family:Roboto;
	color:#222;
	margin-top:160px;
	-webkit-animation: back 8s infinite;
    -moz-animation: back 8s infinite;
    -ms-animation: back 8s infinite;
    -o-animation: back 8s infinite;
    animation: back 8s infinite;
}

#mail
{
	background:rgba(255,255,255,0.7);
	border:solid 1px #222;
	padding:15px;
	font-family:Roboto;
	color:#222;
	margin-top:10px;
	-webkit-animation: back 12s infinite;
    -moz-animation: back 12s infinite;
    -ms-animation: back 12s infinite;
    -o-animation: back 12s infinite;
    animation: back 12s infinite;
}

#place
{
	background:rgba(255,255,255,0.7);
	border:solid 1px #222;
	padding:15px;
	font-family:Roboto;
	color:#222;
	margin-top:10px;
	-webkit-animation: back 10s infinite;
    -moz-animation: back 10s infinite;
    -ms-animation: back 10s infinite;
    -o-animation: back 10s infinite;
    animation: back 10s infinite;
}

b#contactb
{
	font-size:20px;
	font-family:myFontBold;
	text-transform:uppercase;
	margin-bottom:8px;
}

b#contactf
{
	font-size:20px;
	font-family:myFontBold;
	text-transform:uppercase;
	margin-bottom:20px;
}


#form
{
	border:solid 1px #222;
	padding:15px;
	margin-left:20px;
	background:rgba(255,255,255,0.7);
	color:#222;
	margin-top:160px;
	padding-left:26px;
	padding-bottom:0px;
	height:290px;
	-webkit-animation: back 16s infinite;
    -moz-animation: back 16s infinite;
    -ms-animation: back 16s infinite;
    -o-animation: back 16s infinite;
    animation: back 16s infinite;
}

#form input
{
	width:95%;
	border-radius:0px;
	border:solid 1px #222;
	height:15px;
	margin:0px;
	margin-top:15px;
}

textarea#textContact
{
	width:95%;
	border-radius:0px;
	border:solid 1px #222;
	height:15px;
	margin:0px;
	margin-top:15px;
}

input#submit
{
	width:120px;
	background:#222;
	text-align:center;
	color:#fff;
	padding:10px;
	height:40px;
	margin:0px;
	margin-right:15px;
	font-family:myFontBold;
	text-transform:uppercase;
}

input#submit:hover
{
	width:120px;
	background:#666;
	text-align:center;
	color:#fff;
	padding:10px;
	height:40px;
	margin:0px;
	margin-right:15px;
	font-family:myFontBold;
	text-transform:uppercase;
	cursor:pointer;
}


@media screen and (max-width: 760px) {
    
	
	@font-face {
    font-family: myFont;
    src: url(fonts/timeburnernormal.ttf);
}

@font-face {
    font-family: myFontBold;
    src: url(fonts/timeburnerbold.ttf);
}


html
	{
	color:#027966;
	}

body
	{
	font-family:myFont;
	background:#fff;
	overflow:hidden;
	}
	
::-webkit-scrollbar { 
    display: none; 
}

#header	
{
	
}

#title-div
	{
	position:fixed;
	top:15px;
	left:30px;
	-webkit-animation: move 8s linear;
	animation: move 8s linear;
	-moz-animation: move 8s linear;
	}

#title-div p
	{
	position:absolute;
	top:0px;
	left:0px;
	font-size:28px;
	padding:0px;
	margin:0px;
	}
	
p#titlefirst
	{
	-webkit-animation: title 20s infinite;
    -moz-animation: title 20s infinite;
    -ms-animation: title 20s infinite;
    -o-animation: title 20s infinite;
    animation: title 20s infinite;
	}
	
p#titlesecond
	{
	-webkit-animation: titletwo 20s infinite;
    -moz-animation: titletwo 20s infinite;
    -ms-animation: titletwo 20s infinite;
    -o-animation: titletwo 20s infinite;
    animation: titletwo 20s infinite;
	}
	
#the-body-part
	{
	margin-top:30px;
	}

#skills
	{
	padding-top:100px;	
	}
	
#skills-box
	{
	margin-top:140px;
	display:inline-block;
	width:100%;
	padding-left:10px;
	padding-right:10px;
	border-left:solid 3px #222;
	border-bottom:solid 3px #222;
	border-top:solid 3px #222;
	border-right:solid 3px #ddd;
	background:rgba(255,255,255,0.7);
	animation:border 7s infinite;
	-webkit-animation: border 7s infinite;
	animation: border 7s infinite;
	-moz-animation: border 7s infinite;
	font-size:14px;
	margin-left:-65px;
	}
	
#skills-box h2
	{
	padding:0px;
	margin:0px;
	font-weight:700;
	font-size:18px;
	}
	
font#title
	{
	text-transform:uppercase;
	font-size:30px;
	}
	


font#the-day
	{
	font-size:14px;
	}
	
#txt
	{
	display:inline-block;
	width:100%;
	text-align:right;
	font-size:18px;
	color:#111;
	font-family:myFontBold;
	}

#day
	{
	display:inline-block;
	text-align:right;
	width:100%;
	font-weight:700;
	font-style:italic;
	padding-right:20px;
	}
#rector
	{
	text-align:center;
	}
#reactor img
	{
	width:250px;
	position:absolute;
	top:160px;
	left:172px;
	z-index:2000;
	}
	
#reactorCirleOver
{
	position:absolute;
	top:160px;
	left:184px;
	z-index:1000;
	background:#F2F3F6;
	height:240px;
	width:240px;
	border-radius:50%
}
	
#loading
{
animation-name: myfirst;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 20s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}

#loading1
{
animation-name: mysec;
animation-duration: 74s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: mysec;
-moz-animation-duration: 77s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: mysec;
-webkit-animation-duration: 73s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}

#loading2
{
animation-name: spinPulse;
animation-duration: 22s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 25s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 22s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}

#loading3
{
animation-name: mysec;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: mysec;
-moz-animation-duration: 15s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: mysec;
-webkit-animation-duration: 15s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}

#loading4
{
animation-name: myfirst;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 30s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 30s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}


img#loading
	{
	width:101px;
	position:fixed;
	top:10px;
	right:10px;
	}
	
#wrap-all {
width: 100%;
height: 100%;
background: url('images/.html') no-repeat center center;
position: fixed;
overflow: auto;
cursor:default;
}




.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,0,0,1);
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 100px;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    -moz-animation: spinPulse 3s infinite ease-in-out;
    -webkit-animation: spinPulse 3s infinite linear;
	position:fixed;
	top:10px;
	right:10px;
	box-shadow: 0 0 10px #222;
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,0,0,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 65px;
	box-shadow: 0 0 5px #222;
    width: 65px;
    height: 65px;
    margin: 0 auto;
    position: fixed;
    top: 17.5px;
	right:17.5px;
    -moz-animation: spinoffPulse 10s infinite linear;
    -webkit-animation: spinoffPulse 10s infinite linear;
}

	
#percent{
            opacity: 1;
            font-weight: 700;
            -webkit-animation: percent 5s infinite;
            -moz-animation: percent 5s infinite;
            -ms-animation: percent 5s infinite;
            -o-animation: percent 5s infinite;
            animation: percent 5s infinite;
        }
		
#percent2{
            opacity: 1;
            font-weight: 700;
            -webkit-animation: percent 5s infinite;
            -moz-animation: percent 7s infinite;
            -ms-animation: percent 7s infinite;
            -o-animation: percent 7s infinite;
            animation: percent 7s infinite;
        }
		
#percent3{
            opacity: 1;
            font-weight: 700;
            -webkit-animation: percent 10s infinite;
            -moz-animation: percent 510s infinite;
            -ms-animation: percent 10s infinite;
            -o-animation: percent 10s infinite;
            animation: percent 10s infinite;
        }
		
#percent4{
            opacity: 1;
            font-weight: 700;
            -webkit-animation: percent 9s infinite;
            -moz-animation: percent 9s infinite;
            -ms-animation: percent 9s infinite;
            -o-animation: percent 9s infinite;
            animation: percent 9s infinite;
        }
        
		
#letter{
			letter-spacing:1px;
			text-align:left;
            -webkit-animation: letter 8.5s infinite;
            -moz-animation: letter 8.5s infinite;
            -ms-animation: letter 8.5s infinite;
            -o-animation: letter 8.5s infinite;
            animation: letter 8.5s infinite;
        }
		
#letter2{
			letter-spacing:1px;
			text-align:left;
            -webkit-animation: letter 4.5s infinite;
            -moz-animation: letter 4.5s infinite;
            -ms-animation: letter 4.5s infinite;
            -o-animation: letter 4.5s infinite;
            animation: letter 4.5s infinite;
        }

#letter3{
			letter-spacing:1px;
			text-align:left;
            -webkit-animation: letter 11s infinite;
            -moz-animation: letter 11s infinite;
            -ms-animation: letter 11s infinite;
            -o-animation: letter 11s infinite;
            animation: letter 11s infinite;
        }

#letter4{
			letter-spacing:1px;
			text-align:left;
            -webkit-animation: letter 6s infinite;
            -moz-animation: letter 6s infinite;
            -ms-animation: letter 6s infinite;
            -o-animation: letter 6s infinite;
            animation: letter 6s infinite;
        }		
		
#testimonials
	{
	display:inline-block;
	position:absolute;
	top:290px;
	border-left:solid 1px #26B8AE;
	border-bottom:solid 1px #26B8AE;
	border-top:solid 1px #09484D;
	border-right:solid 1px #09484D;
	background:rgba(255,255,255,0.7);
	-webkit-animation: bordertwo 8s infinite;
	animation: bordertwo 8s infinite;
	-moz-animation: bordertwo 8s infinite;
	background:rgba(255,255,255,0.7);
	width:100%;
	padding:10px;
	left:-20px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	}
	
#testimonials img
	{
	width:80px;
	float:left;
	margin-right:10px;
	}
		
#the-type-div
	{
	z-index:-2;
	height::140px;
	min-height:140px;
	display:block;
	width:100%;
	background:#fff;
	}
        
#menu
	{
	width:100px;
	position:fixed;
	right:0px;
	top:200px;
	border:solid 1px #333;
	height:300px;
	border-radius:-150px;
	}
	
p#theTitle
{
	font-family:myFontBold;
	font-size:38px;
	color:#222;
	-webkit-animation: titletwo 20s infinite;
    -moz-animation: titletwo 20s infinite;
    -ms-animation: titletwo 20s infinite;
    -o-animation: titletwo 20s infinite;
    animation: titletwo 20s infinite;
}


#audioplayer{
	width: 480px;
	height: 60px;
	position:fixed;
	bottom:32px;
	left:44px;
}

#pButton{
    height:60px; 
    width: 60px;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    float:left;
    outline:none;
}

.play{background: url('../alexkatz.me/codepen/images/play.html') ;}
.pause{background: url('../alexkatz.me/codepen/images/pause.html') ;}

#timeline{
	width: 300px;
	height: 5px;
	margin-top: 26px;
	float: left;
	background: rgba(0,0,0,.3);
	margin-left:20px;
  
}
#playhead{
	width: 5px;
	height: 5px;
	background: rgba(0, 0, 0,1);

}

#music
{
	position:fixed;
	bottom:10px;
	left:10px;
	z-index:200;
}

#musicRing
{
	position:fixed; 
	width:70px; 
	height:70px; 
	border-radius:50%; 
	border:solid 7px #222; 
	position:fixed; 
	bottom:20px; 
	left:30px;
	-webkit-animation: title 20s infinite;
    -moz-animation: title 20s infinite;
    -ms-animation: title 20s infinite;
    -o-animation: title 20s infinite;
    animation: title 20s infinite;
	background:rgba(255,255,255,0.7);
}

#theRoboMenu
{
	border:solid 1px #111;
	padding:5px;
	width:400px;
	position:fixed;
	right:50px;
	top:20px;
	z-index:-1;
	padding-left:15px;
	padding-bottom:2px;
	height:25px;
	background:rgba(255,255,255,0.7);
}

#theRoboCircle
{
	background:#F2F3F6;
	height:92px;
	width:92px;
	border-radius:50%;
	position:fixed;
	right:8px;
	top:8px;
}

#theRoboMenuList	
{
	position:fixed;
	top:27px;
	right:140px;
}

#theRoboMenuList a
{
	text-decoration:none;
	color:#111;
	text-transform:uppercase;
	margin-right:20px;
}

#theRoboMenuList a:hover
{
	text-decoration:none;
	color:#111;
	text-transform:uppercase;
	margin-right:20px;
	font-weight:700;
	
}

#theRoboDate
{
	border:solid 1px #111;
	padding:5px;
	width:230px;
	position:fixed;
	right:50px;
	top:53px;
	z-index:-2;
	padding-left:15px;
	padding-bottom:2px;
	height:20px;
	background:#525151;
	color:#fff;
}

#theRoboDay
{
	position:fixed;
	top:60px;
	right:110px;
	font-size:14px;
	color:#fff;
	font-weight:700;
}

#dates
	{
	position:fixed;
	top:40px;
	right:27px;
	font-size:16px;
	z-index:2000;
	}
	
#musicInfo
{
	position:fixed;
	bottom:75px;
	left:125px;
	text-transform:uppercase;
	color:#222;
	font-family:myFontBold;
}

#musicCredits
{
	position:fixed;
	bottom:25px;
	left:125px;
	text-transform:uppercase;
	color:#222;
	font-family:myFontBold;
	width:298px;
}

#social
{
	position:fixed;
	right:0px;
	bottom:0px;
	width:270px;
	height:70px;
}

#social img	
{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

#social a
{
	text-decoration:none;
	display:inline-block;
	width:40px;
	text-transform:uppercase;
	color:#222;
	height:40px;
	border:solid 1px #222;
	padding-left:5px;
	padding-top:5px;
	border-radius:50%;
	margin-left:25px;
	background:#222;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	-webkit-animation: border 6s infinite;
    -moz-animation: border 6s infinite;
    -ms-animation: border 6s infinite;
    -o-animation: border 6s infinite;
    animation: border 6s infinite;
}

a#social2
{
	text-decoration:none;
	display:inline-block;
	width:40px;
	text-transform:uppercase;
	color:#222;
	height:40px;
	border:solid 1px #222;
	padding-left:5px;
	padding-top:5px;
	border-radius:50%;
	margin-left:25px;
	background:#222;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	-webkit-animation: border 10s infinite;
    -moz-animation: border 10s infinite;
    -ms-animation: border 10s infinite;
    -o-animation: border 10s infinite;
    animation: border 10s infinite;
}

a#social3
{
	text-decoration:none;
	display:inline-block;
	width:40px;
	text-transform:uppercase;
	color:#222;
	height:40px;
	border:solid 1px #222;
	padding-left:5px;
	padding-top:5px;
	border-radius:50%;
	margin-left:25px;
	background:#222;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	-webkit-animation: border 14s infinite;
    -moz-animation: border 14s infinite;
    -ms-animation: border 14s infinite;
    -o-animation: border 14s infinite;
    animation: border 14s infinite;
}

#social a:hover	
{
	background:#444;
}

img#target
{
	position:fixed;
	bottom:12px;
	right:12px;
	width:100px;
	height:100px;
}

#footerCircleOverlap
{
	width:100px;
	height:100px;
	border:solid 2px #222;
	position:fixed;
	bottom:10px;
	right:10px;
	background:rgba(255,255,255,0.9);
}
/*-
#copyright
{
	background:#222;
	color:#fff;
	float:right;
	text-transform:uppercase;
	font-size:12px;
	padding-left:20px;
	padding-right:20px;
	padding-top:3px;
	position:absolute;
	bottom:0px;
	right:0px;
	width:260px;
}--*/

h1#pappuTitle
{
	background:#222;
	font-size:24px;
	padding-left:80px;
	padding-top:3px;
	color:#fff;
	text-align:right;
	padding-right:25px;
}

#theContent
{
	margin-top:170px;
	z-index:-200;
	margin-left:50px;
}

.type-wrap
{
	font-family:Roboto;
	line-height:24px;
	color:#222;
	font-size:16px;
	text-transform:uppercase;
	font-weight:300;
}

img#pappuPic
{
	-webkit-animation: pappu 32s linear;
    -webkit-animation: pappu 32s linear;
    -webkit-animation: pappu 32s linear;
    -webkit-animation: pappu 32s linear;
    -webkit-animation: pappu 32s linear;
}


/* Header */
.large-header {
	position: absolute;
	width: 100%;
	background: #F2F3F6;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

.demo-1 .large-header {
	background-image: url('img/demo-1-bg.html');
}

.demo-2 .large-header {
	background-image: url('img/demo-2-bg.html');
	background-position: center bottom;
}

.demo-3 .large-header {
	background: #7f8c8d;
}

.demo-4 .large-header {
	background: #f9f1e9;
}

.main-title {
	position: absolute;
	margin: 0;
	padding: 0;
	color: #f9f1e9;
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.demo-1 .main-title, 
.demo-3 .main-title {
	text-transform: uppercase;
	font-size: 4.2em;
	letter-spacing: 0.1em;
}

.demo-2 .main-title {
	font-family: 'Clicker Script', cursive;
	font-weight: normal;
	font-size: 8em;
	padding-left: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.demo-2 .main-title::before {
	content: '';
	width: 20vw;
	height: 20vw;
	min-width: 3.5em;
	min-height: 3.5em;
	background: url(img/deco.html) no-repeat center center;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	z-index: -1;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.demo-3 .main-title {
	padding: 10px 40px;
	border: 10px double #f9f1e9;
	text-transform: uppercase;
	font-family: Londrina Outline, sans-serif;
}

.demo-4 .main-title {
	font-size: 6em;
	font-weight: 300;
	padding: 10px 30px;
	text-transform: uppercase;
	color: #222;
}

.main-title .thin {
	font-weight: 200;
}

@media only screen and (max-width : 768px) {
	.demo-1 .main-title, 
	.demo-3 .main-title,
	.demo-4 .main-title {
		font-size: 3em;
	}

	.demo-2 .main-title {
		font-size: 4em;
	}
}

#theAboutContent
{
	max-height:310px;
	overflow:scroll;
	overflow-y:auto;
	border-left:solid 3px #222;
	border-bottom:solid 3px #222;
	border-top:solid 3px #222;
	border-right:solid 3px #ddd;
	background:rgba(255,255,255,0.7);
	margin-top:140px;
	padding:20px;
	text-align:justify;
	color:#222;
	font-family:Roboto;
	font-weight:300;
	margin-left:60px;
	animation:border 12s infinite;
	-webkit-animation: border 12s infinite;
	animation: border 12s infinite;
	-moz-animation: border 12s infinite;
	line-height:24px;
}

#aboutPicture
{
	margin-left:-63px;
	border:solid 3px #222;
	margin-top:20px;
	width:403px;
	padding:0px;
	height:167px;
}

.dg-container{
	width: 100%;
	height: 450px;
	position: relative;
	margin-top:160px;
}
.dg-wrapper{
	width: 481px;
	height: 316px;
	margin: 0 auto;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
}
.dg-wrapper a{
	width: 480px;
	height: 290px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: #444;
}
.dg-wrapper a.dg-transition{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
	display: block;
	padding: 23px 0px 0px 0px;
}
.dg-wrapper a div{
	text-align: center;
	line-height: 50px;
	color: #fff;
	font-size: 14px;
	width: 100%;
	top: -13px;
	display: none;
	position: absolute;
	font-family:Roboto;
}
.dg-wrapper a.dg-center div{
	display: block;
}
.dg-container nav{
	width: 58px;
	position: absolute;
	z-index: 1000;
	bottom: 100px;
	left: 50%;
	margin-left: -29px;
}
.dg-container nav span{
	text-indent: -9000px;
	float: left;
	cursor:pointer;
	width: 24px;
	height: 25px;
	opacity: 0.8;
	background: transparent url(images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
	opacity: 1;
}
.dg-container nav span.dg-next{
	background-position: top right;
	margin-left: 10px;
}

#typing
	{
	padding-top:100px;
	font-size:16px;
	line-height:26px;
	}
	
.type-wrap
	{
	max-width:200px;
	}
	
#roatate
{
	height:100px;
	width:100px;
}

#therotateCircle{
	height:100px;
	width:100px;
	border-radius:50%;
	border:solid 3px #222;
	border-left:solid 3px #222;
	border-bottom:solid 3px #222;
	border-top:solid 3px #222;
	border-right:solid 3px #ddd;
	animation-name: myfirst;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	/* Firefox: */
	-moz-animation-name: myfirst;
	-moz-animation-duration: 8s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-play-state: running;
	/* Safari and Chrome: */
	-webkit-animation-name: myfirst;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	background:rgba(255,255,255,0.7);
}

ul#aboutTime
{
	margin-top:140px;
	width:150px;
}

ul#aboutTime	li
{
	display:inline-block;
	width:100%;
	margin-left:20px;
	margin-bottom:40px;
	letter-spacing:4px;
}

ul#aboutTime	li:hover
{
	display:inline-block;
	width:100%;
	margin-left:20px;
	margin-bottom:40px;
	letter-spacing:5px;
}


ul#aboutTime.tabs li.selected a, ul.tabs li.selected a:hover
{
    font-weight:700;
	-webkit-animation: titletwo 25s infinite;
    -moz-animation: titletwo 25s infinite;
    -ms-animation: titletwo 25s infinite;
    -o-animation: titletwo 25s infinite;
    animation: titletwo 25s infinite;
}



#aboutTimeline
{
	margin-top:160px;
	background-image:url('images/backtime.png');
	width:150px;
	height:305px;
	padding-top:10px;
	transition:background-image 0.2s linear;
}

#aboutTimeline:hover
{
	margin-top:160px;
	background-image:url('images/backtime2.png');
	width:150px;
	height:305px;
	padding-top:10px;
	transition:background-image 0.2s linear;
}

#pappu1
{
	background-image:url('images/pappu1.jpg');
	height:310px;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	background-position: 0px 0px;
	animation:border 14s infinite;
	-webkit-animation: border 14s infinite;
	animation: border 14s infinite;
	-moz-animation: border 14s infinite;
}

#pappu1 p
{
	background:#fff;
	padding:15px;
	width:260px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
}

#pappu2
{
	background-image:url('images/pappu4.jpg');
	height:310px;
	border:solid 3px #222;
	background-position: 0px 0px;
}

#pappu2 p
{
	background:#fff;
	padding:15px;
	width:260px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
	position:absolute;
	left:0px;
	bottom:20px;
}

#pappu3
{
	background-image:url('images/pappu5.jpg');
	height:310px;
	border:solid 3px #222;
	background-position: 0px 0px;
}

#pappu3 p
{
	background:#fff;
	padding:15px;
	width:260px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
	position:absolute;
	right:0px;
	bottom:20px;
}

#pappu4
{
	background-image:url('images/pappu6.jpg');
	height:310px;
	border:solid 3px #222;
	background-position: 0px 0px;
}

#pappu4 p
{
	background:#fff;
	padding:15px;
	width:200px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
	position:absolute;
	right:0px;
	bottom:10px;
}

#pappu5
{
	background-image:url('images/pappu7.jpg');
	height:310px;
	border:solid 3px #222;
	background-position: 0px 0px;
}

#pappu5 p
{
	background:#fff;
	padding:15px;
	width:400px;
	background:#222;
	color:#fff;
	font-family:Roboto;
	line-height:24px;
	position:absolute;
	left:0px;
	bottom:40px;
}


#call
{
	background:rgba(255,255,255,0.7);
	border:solid 1px #222;
	padding:15px;
	font-family:Roboto;
	color:#222;
	margin-top:160px;
	-webkit-animation: back 8s infinite;
    -moz-animation: back 8s infinite;
    -ms-animation: back 8s infinite;
    -o-animation: back 8s infinite;
    animation: back 8s infinite;
}

#mail
{
	background:rgba(255,255,255,0.7);
	border:solid 1px #222;
	padding:15px;
	font-family:Roboto;
	color:#222;
	margin-top:10px;
	-webkit-animation: back 12s infinite;
    -moz-animation: back 12s infinite;
    -ms-animation: back 12s infinite;
    -o-animation: back 12s infinite;
    animation: back 12s infinite;
}

#place
{
	background:rgba(255,255,255,0.7);
	border:solid 1px #222;
	padding:15px;
	font-family:Roboto;
	color:#222;
	margin-top:10px;
	-webkit-animation: back 10s infinite;
    -moz-animation: back 10s infinite;
    -ms-animation: back 10s infinite;
    -o-animation: back 10s infinite;
    animation: back 10s infinite;
}

b#contactb
{
	font-size:20px;
	font-family:myFontBold;
	text-transform:uppercase;
	margin-bottom:8px;
}

b#contactf
{
	font-size:20px;
	font-family:myFontBold;
	text-transform:uppercase;
	margin-bottom:20px;
}


#form
{
	border:solid 1px #222;
	padding:15px;
	margin-left:20px;
	background:rgba(255,255,255,0.7);
	color:#222;
	margin-top:160px;
	padding-left:26px;
	padding-bottom:0px;
	height:290px;
	-webkit-animation: back 16s infinite;
    -moz-animation: back 16s infinite;
    -ms-animation: back 16s infinite;
    -o-animation: back 16s infinite;
    animation: back 16s infinite;
}

#form input
{
	width:95%;
	border-radius:0px;
	border:solid 1px #222;
	height:15px;
	margin:0px;
	margin-top:15px;
}

textarea#textContact
{
	width:95%;
	border-radius:0px;
	border:solid 1px #222;
	height:15px;
	margin:0px;
	margin-top:15px;
}

input#submit
{
	width:120px;
	background:#222;
	text-align:center;
	color:#fff;
	padding:10px;
	height:40px;
	margin:0px;
	margin-right:15px;
	font-family:myFontBold;
	text-transform:uppercase;
}

input#submit:hover
{
	width:120px;
	background:#666;
	text-align:center;
	color:#fff;
	padding:10px;
	height:40px;
	margin:0px;
	margin-right:15px;
	font-family:myFontBold;
	text-transform:uppercase;
	cursor:pointer;
}

#mobileView
{
	opacity:0px;
	height:0px;
	width:0px;
	padding:0px;
}

#errorText
{
	width:100%;
	text-align:center;
	font-family:myFontBold;
	padding-top:100px;
	color:#222;
	font-size:18px;
	text-transform:uppercase;
}

a#BackBack	
{
	color:#222; 
	font-family:myFontBold;
}

a#BackBack:hover
{
	text-transform:uppercase;
}


@media screen and (max-width: 767px) {
	
body	
{
	background:#F2F3F6;
}
    .content
	{
		opacity:0;
		height:0px;
		
	}
	
#mobileView	
{
	opacity:1;
	width:100%;
	height:auto;
}
	
#mobileTitle
{
	font-family:myFontBold;
	text-transform:uppercase;
	font-size:28px;
	padding:15px;
	-webkit-animation: title 20s infinite;
    -moz-animation: title 20s infinite;
    -ms-animation: title 20s infinite;
    -o-animation: title 20s infinite;
    animation: title 20s infinite;
	color:#222;
	position:fixed;
	top:0px;
	left:0px;
}


#social
{
	position:fixed;
	right:10px;
	top:15px;
	text-align:right;
	
}

#social img	
{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

#social a
{
	text-decoration:none;
	display:inline-block;
	width:20px;
	height:20px;
	text-transform:uppercase;
	color:#222;
	border:solid 1px #222;
	padding-left:5px;
	padding-top:5px;
	border-radius:50%;
	margin-left:15px;
	background:#222;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	-webkit-animation: border 6s infinite;
    -moz-animation: border 6s infinite;
    -ms-animation: border 6s infinite;
    -o-animation: border 6s infinite;
    animation: border 6s infinite;
}

a#social2
{
	text-decoration:none;
	display:inline-block;
	width:20px;
	height:20px;
	text-transform:uppercase;
	color:#222;
	border:solid 1px #222;
	padding-left:5px;
	padding-top:5px;
	border-radius:50%;
	margin-left:15px;
	background:#222;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	-webkit-animation: border 10s infinite;
    -moz-animation: border 10s infinite;
    -ms-animation: border 10s infinite;
    -o-animation: border 10s infinite;
    animation: border 10s infinite;
}

a#social3
{
	text-decoration:none;
	display:inline-block;
	width:20px;
	height:20px;
	text-transform:uppercase;
	color:#222;
	border:solid 1px #222;
	padding-left:5px;
	padding-top:5px;
	border-radius:50%;
	margin-left:15px;
	background:#222;
	border-top:solid 3px #222;
	border-right:solid 3px #222;
	border-bottom:solid 3px #222;
	border-left:solid 3px #ddd;
	-webkit-animation: border 14s infinite;
    -moz-animation: border 14s infinite;
    -ms-animation: border 14s infinite;
    -o-animation: border 14s infinite;
    animation: border 14s infinite;
}

#social a:hover	
{
	background:#444;
}

#rectorMobile
	{
	text-align:center;
	}
#reactor img
	{
	width:200px;
	top:80px;
	left:15px;
	z-index:2000;
	}
	
#reactorCirleOver
{
	position:absolute;
	top:80px;
	left:15px;
	z-index:1000;
	background:#F2F3F6;
	height:200px;
	width:200px;
	border-radius:50%
}

::-webkit-scrollbar {
    width: 12px;
}

#SorryText
{
	width:100%;
	text-align:center;
	font-family:myFontBold;
	padding-top:100px;
	color:#222;
	font-size:18px;
	text-transform:uppercase;
}

}