@charset "UTF-8";
/*CSS document*/

/* ---------------------- Placement ------------------*/
img.parallax-layer, .parallax-layer {
	position: absolute;
	z-index: -3;
}

body {
	overflow: hidden;
	margin: 0;
	padding: 0;
	/*background: url("../../resources/groovepaper.png");*/
	background-attachment: fixed;
	color: #444;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

::selection {
	background: #fff;
}

::-moz-selection {
	background: #fff;
}

.parallax
	{position:relative; overflow:hidden; padding-top: 40px; width: 1152px; height:2800px;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

#wrapper {
	position: relative;
	margin: 0 auto;
	max-width: 1152px;
}

#footer {
	position: fixed;
	bottom: 5px;
	width: 1152px;
	color: rgb(204,204,204);
	color: rgba(204,204,204,.6);
	text-align: center;
	font-size: 80%;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

/* ---------------------- Text ------------------*/
.text_placement {
	position: absolute;
	top: 545px;
	left: 228.5px;
}

.TextColor {
	position: absolute;
	z-index: 100;
	width: 695px;
	height: 60px;
	text-align: center;
	text-shadow: 0 1px 0 rgb(255,255,255);
	font-style: italic;
	font-size: 16px;
	line-height: 160%;
}

/* ---------------------- Button Holder ------------------*/
#btn_holder {
	position: fixed;
	z-index:100;
	overflow: hidden;
	padding-top: 0;
	height: 0%;
	border-right: solid 1px #ccc;
	background: white;
	-webkit-transition: all .6s cubic-bezier(.80, .01, .99, 1.01);
	-moz-transition: all .6s cubic-bezier(.80, .01, .99, 1.01);
	transition: all .6s cubic-bezier(.80, .01, .99, 1.01);

}

#btn_holder_expand {
	position: fixed;
	top: 561px;
	z-index:90;
	overflow: hidden;
	width: 204px;
	height: auto;
	-webkit-transition: all .2s cubic-bezier(.80, .01, .99, 1.01);
	-moz-transition: all .2s cubic-bezier(.80, .01, .99, 1.01);
	transition: all .2s cubic-bezier(.80, .01, .99, 1.01);
}

#btnProjects {
border-top: 1px solid #ccc;
cursor: pointer;

}

a.sideBtn {
	position: relative;
	display: block;
	padding-top: 18px;
	padding-bottom: 6px;
	padding-left: 20px;
	width: 184px;
	height: 40px;
	text-decoration: none;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	transition: all .2s ease;
}

a.sideBtnProjects {
	position: relative;
	display: block;
	float: right;
	padding-left: 22px;
	width: 155px;
	height: 50px;
	text-decoration: none;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	transition: all .2s ease;
}

/* ---------------------- Selection Bar ------------------*/
#selectionBar {
	position: fixed;
	left: 204px;
	z-index: 110;
	width: 10px;
	height: 64px;
	background-color: #ccc;
	-webkit-transition: all .6s cubic-bezier(.80, .01, .99, 1.01);
	-moz-transition: all .6s cubic-bezier(.80, .01, .99, 1.01);
	transition: all .6s cubic-bezier(.80, .01, .99, 1.01);
}

#selectionBar2 {
	position: fixed;
	left: 61px;
	z-index: -1;
	display: none;
	width: 10px;
	height: 64px;
	background-color: #444;
	-webkit-transition: all .6s cubic-bezier(.80, .01, .99, 1.01);
	-moz-transition: all .6s cubic-bezier(.80, .01, .99, 1.01);
	transition: all .6s cubic-bezier(.80, .01, .99, 1.01);
}

/* ---------------------- Button & Title Styling ------------------*/
a.sideBtn:hover {
	background: rgb(204,204,204);
	background: rgba(204,204,204,.3);
}

a.sideBtnProjects:hover {
	background: rgb(204,204,204);
	background: rgba(204,204,204,.3);
}

.title {
	float: left;
	color: #444;
	font-weight: bold;
	font-size: 90%;
	opacity: 1;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

span.subtitle {
	position: absolute;
	display: inline;
	color: #666;
	letter-spacing: 1px;
	font-weight: normal;
	font-style: italic;
	font-size: 80%;
	opacity: 1;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

.title_expand {
	float: left;
	color: #444;
	font-weight: bold;
	font-size: 90%;
	opacity: 1;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

/* ---------------------- View Buttons and Style ------------------*/
.btn_placement {
	position: absolute;
	top: 750px;
	left: 50%;
	margin-left: -60px;
}

@-webkit-keyframes "buttonAnimation" {
	0% {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	50% {
		-webkit-box-shadow: 0 0 60px white;
		-moz-box-shadow: 0 0 60px white;
		box-shadow: 0 0 60px white;
	}
	100% {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
}

@-o-keyframes "buttonAnimation" {
	0% {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	50% {
		-webkit-box-shadow: 0 0 60px white;
		-moz-box-shadow: 0 0 60px white;
		box-shadow: 0 0 60px white;
	}
	100% {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
}

@-moz-keyframes "buttonAnimation" {
	0% {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	50% {
		-webkit-box-shadow: 0 0 60px white;
		-moz-box-shadow: 0 0 60px white;
		box-shadow: 0 0 60px white;
	}
	100% {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
}

@keyframes "buttonAnimation" {
	0% {
	    -webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	 }
	50% {
	    -webkit-box-shadow: 0 0 60px white;
		-moz-box-shadow: 0 0 60px white;
		box-shadow: 0 0 60px white;
	 }
	100% {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
}

a.viewbtn {
	z-index: 6600;
	display: block;
	padding: 7px 0 9px 0;
	width: 120px;
	border: 1px solid rgb(255,255,255);
	color: white;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 13px;
	-webkit-box-shadow: 0 0 60px white;
	-moz-box-shadow: 0 0 60px white;
	box-shadow: 0 0 60px white;
	-webkit-animation: buttonAnimation 1s infinite;
    -moz-animation: buttonAnimation 1s infinite;
    -ms-animation: buttonAnimation 1s infinite;
    -o-animation: buttonAnimation 1s infinite;
    animation: buttonAnimation 1s infinite;
}

a.buttonOther {
	background-color: rgb(80,80,80);
	background-image: url(../images/colors/images/underconstruction_03.png);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(80,80,80);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(80,80,80);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(80,80,80);
}

a.buttonOther:hover {
	background-position: top left;
}

#startBtn {
	background-color: rgb(80,80,80);
	background-image: url(../images/colors/images/homecolor2_reg.png);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(80,80,80);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(80,80,80);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(80,80,80);
	color: rgb(255, 197, 0);

}

#startBtn:hover {
	background-position: top left;
}

#selfbtn {
	background-color: rgb(255,131,2);
	background-image: url(../images/colors/images/self_03.png);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(255,131,2);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(255,131,2);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(255,131,2);
}

#selfbtn:hover {
	background-position: top left;
}

#narbtn {
	background-color: rgb(66,166,234);
	background-image: url(../images/colors/images/nar_03.png);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(66,166,234);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(66,166,234);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(66,166,234);
}

#narbtn:hover {
	background-position: top left;
}

#docbtn {
	background-color: rgb(244,164,0);
	background-image: url(../images/colors/images/doc_03.png);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(244,164,0);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(244,164,0);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(244,164,0);
}

#docbtn:hover {
	background-position: top left;
}

#expbtn {
	background-color: rgb(255,201,103);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(255,201,103);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(255,201,103);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(255,201,103);
	background-image: url(../images/colors/images/exp_03.png);
}

#expbtn:hover {
	background-position: top left;
}

#profilebtn {
	background-color: #55ca03;
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px #8bd400;
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px #8bd400;
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #8bd400;
	background-image: url("../images/colors/images/profileColor.png");
}
#profilebtn:hover {
	background-position: top left;
}

#musicBtn {
	background-color: #55ca03;
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px #080247;
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px #080247;
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #080247;
	background-image: url("../images/colors/images/music_color.jpg");
}
#musicBtn:hover {
	background-position: top left;
}

#nar2Btn {
	background-color: #55ca03;
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px #080247;
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px #080247;
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #080247;
	background-image: url("../images/colors/images/music_color.jpg");
}
#nar2Btn:hover {
	background-position: top left;
}


#exploBtn {
	background-color: #55ca03;
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px #080247;
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px #080247;
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #080247;
	background-image: url("../images/colors/images/music_color.jpg");
}
#exploBtn:hover {
	background-position: top left;
}


#mockbtn {
	background-color: rgb(140,140,140);
	background-image: url(../images/colors/images/mock_color.png);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(140,140,140);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(140,140,140);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(140,140,140);
}


#mockbtn:hover {
	background-position: top left;
}

#galaxiumbtn {
	background-color: rgb(51,51,51);
	background-image: url(../images/colors/images/galaxium_color.png);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(51,51,51);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(51,51,51);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(51,51,51);
}


#galaxiumbtn:hover {
	background-position: top left;
}

#fruitbtn {
	background-color: rgb(235,246,168);
	background-image: url(../images/colors/images/drink_color.png);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(51,51,51);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(51,51,51);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(51,51,51);
}


#fruitbtn:hover {
	background-position: top left;
}

#plpbtn {
	background-color: rgb(208,29,16);
	background-image: url(../images/colors/images/mfeplp_color.png);
	background-position: bottom left;
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(208,29,16);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 1px rgb(208,29,16);
	box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(208,29,16);
}


#plpbtn:hover {
	background-position: top left;
}


/* ---------------------- Number Styles ------------------*/

.number_large{
	z-index: 100;
	float: left;
	margin-right: 10px;
	padding:3px 9.4px 4px 10px;
	width: 10px;
	border-radius: 30px;
	color: #FFF;
	text-align: center;
	font-size: 95%;
	font-family:"Arial Black", Gadget, sans-serif;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

.number_large_home{
	z-index: 100;
	float: left;
	margin-right: 10px;
	padding: 6.5px 10px 3.5px 11.5px;
	width: 8px;
	border-radius: 30px;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

#numProjects {
	padding:3px 11px 4px 9px;
	background-color: rgb(235,246,168);
	background-image: url(../images/colors/images/underconstruction_03.png);
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px rgb(204,204,204);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgb(204,204,204);
}


#numHome {
	background-color: rgb(70,70,70);
	background-image: url(../images/colors/images/homecolor2_reg.png);
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px rgb(70,70,70);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgb(70,70,70);
}

#numSelf {
	background-color: rgb(216,13,0);
	background-image: url(../images/colors/images/self_03.png);
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px rgb(216,13,0);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgb(216,13,0);
}

#numNar {
	background-color: rgb(52,147,230);
	background-image: url(../images/colors/images/nar_03.png);
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px rgb(52,147,230);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgb(52,147,230);
}

#numDoc {
	background-color: rgb(242,138,8);
	background-image: url(../images/colors/images/doc_03.png);
	background-position: center bottom;
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px rgb(242,138,8);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgb(242,138,8);
}

#numExp {
	background-color: rgb(255,204,102);
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px rgb(255,204,102);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgb(255,204,102);
	background-image: url(../images/colors/images/exp_circleColor.png);
}

#numPro {
	background-color: #e0f48a;
	background-image: url("../images/colors/images/profileColor.png");
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px #86c621;
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #86c621;
}

#numMus {
	background-color: #87c433;
	background-image: url(../images/colors/images/music_color.jpg);
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px #080247;
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #080247;
}

#numNar2 {
	background-color: rgb(184,184,184);
	background-image: url(../images/colors/images/underconstruction_03.png);
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px rgb(184,184,184);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgb(184,184,184);
}

#numExplo {
	background-color: rgb(184,184,184);
	background-image: url(../images/colors/images/underconstruction_03.png);
	-moz-box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 2px rgb(184,184,184);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgb(184,184,184);
}


/* ---------------------- img Selection ------------------*/

img::selection {
	background: transparent;
}
img::-moz-selection {
	background: transparent;
}

/* ---------------------- Media Queries ------------------*/

@media screen and (max-width: 1400px) {

	a.sideBtn {
		padding-left: 15px;
		width: 55px;
	}
	#selectionBar {
		display: none;
	}
	#selectionBar2 {
		display: block;
	}
	#btn_holder {
		width: 60px;
	}
	#btn_holder_expand {
		width: 60px;
	}
	.title {
		display: none;
		opacity: 0;
	}
	.subtitle {
		display: none;
		opacity: 0;
	}

}

@media screen and (max-height:860px) {

	.parallax
	{
		padding-top: 35px;
	}

	.btn_placement {
	top: 720px;
	}

}