/*Colors
Orange: #fa7d00
Grey: #222222
Offwhite: #eeeeee
*/
/*svg { max-height: 100%; }*/

#text{
    bottom: 0; left: 0; top: 0; right: 0;
    margin: auto;
    width: 100%;
    height: 100px;
}

/* Universal */
@media all{

	.CategoryContainer, #AboutMeContainer{
		margin-bottom: 20px;
	}

/*
	.CategoryContainerHorizontalWrapper{
		width: 100%;
		height: inherit;
	}
*/
/*
	#Spacer{
		height: inherit;
		width: 20px;
		display: table-cell;
	}
*/

	#ContentOverlay{
		position: absolute;
		right: 0px;
		left: 0px;
		top: 0px;
		bottom: 0px;
		z-index: 1;
		visibility: hidden;
	}

	/* AboutMeContainer > AboutMeHorizontalWrapper > { Portrait, WelcomeText} */


	#AboutMeHorizontalWrapper{

		display: -webkit-flex;
		-webkit-flex-direction: row;
		-webkit-flex-wrap: wrap;
		-webkit-justify-content: space-around;
		-webkit-align-items: flex-start;
		-webkit-align-content: space-between;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: flex-start;
		align-content: space-between;

	}

	#Portrait{

		display: flex;
		flex-grow: 1;
		width: 300px;
		height: 300px;

		/*
		width: 25vw;
		height: 25vw;
		max-height: 300px;
		min-height: 250px;
		min-width: 300px;
		*/

		background-image: url('./Assets/portrait.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #ffffff;
		border-radius: 15px;

		margin: 10px 10px 10px 10px;
	}

	#WelcomeOuterContainer{
		width: 100%;
		flex-grow: 3;
		margin: 10px 10px 10px 10px;
	}

	#WelcomeWrapper{
		display: flex;
		flex-direction: column;
		min-height: inherit;
	}

	#WelcomeTextWrapper{

		width: 100%;
		height: 250px;

		padding: 20px 20px 20px 20px;
		box-sizing: border-box;

		background-color: #000000;
		border-radius: 15px;
	}

	#WelcomeTextInnerWrapper{
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
	}

	#WelcomeTextContainer{
		display: table;
		height: 100%;
		width: 100%;
	}

	#WelcomeText{
		color: white;
		/*text-align: justify;*/
		white-space: pre-line;
		/*font-size: 2.6vmin;*/
		margin-top: -2.0vmin;
	}

	#InfoHorizontalWrapper{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 10px;
		width: 100%;
		min-height: 40px;
	}

	#InfoSpacer{
		margin-left: 10px;
	}

	#ResumeHorizontalWrapper, #EmailHorizontalWrapper, #LinkedInHorizontalWrapper{
		padding-left: 10px;
		display: table;
		height: inherit;
	}

	#ResumeContainer, #EmailContainer, #LinkedInContainer{
		display: flex;
		margin-bottom: 10px;
		height: 40px;
		background-color: #222222;
		border-radius: 15px;
	}

	#ResumeContainer{
		flex-grow: 1;
	}

	#LinkedInContainer{
		flex-grow: 3;
	}

	#EmailContainer{
		flex-grow: 3;
	}

	#IconContainer{
		display: table-cell;
		vertical-align: middle;
	}

	#ResumeIcon, #EmailIcon, #LinkedInIcon{
		height: 30px;
		padding-left: 10px;
		background-position: center center;
		background-size: contain;
		background-repeat: no-repeat;
		border: 0;
	}

	#ResumeIcon{
		background-image: url(../Assets/resume.svg);
		width: 30px;
	}

	#EmailIcon{
		background-image: url(../Assets/email.svg);
		width: 30px;
	}

	#LinkedInIcon{
		background-image: url(../Assets/linkedin.svg);
		width: 30px;
	}

	#ResumeText, #ResumeIcon, #EmailText, #EmailIcon, #LinkedInText, #LinkedInIcon{
		display: table-cell; 
		text-align: center; 
		vertical-align: middle;
		padding-right: 10px;
		color: #fa7d00;
	}

	#ContentLayoutController, #HeaderLayoutController{
		
		max-width: 1400px; 
		/*min-width: 400px;*/
		margin: 0 auto;
		height: 100%;

		box-sizing: border-box;
	}

	.CategoryHeaderContainer{
		width: inherit;
		height: 40px;
		margin: 0px 10px 0px 10px;
		display: flex;
		display: -webkit-flex;
		-webkit-flex-grow: 10;
	}

	.CategoryHeaderHorizontalWrapper{
		width: 100%;
		height: inherit;
		display: table;
		border-collapse: collapse;
		font-family: "Helvetica", "Sans-serif";
		font-size: 2.0em;
		font-weight: bold;
		color: black;
		border-radius: 15px;
		background-color: #fa7d00;
	}

	.CategoryTitleWrapper{
		position: relative;
		height: inherit;
		float: left;
		display: table;
		margin-left: 20px;
		margin-top: 1px;
	}

	.CategoryTitle{
		display: table-cell;
		vertical-align: middle;
	}

	.CategoryLinkWrapper{
		position: relative;
		height: inherit;
		float: left;
		display: table;
		margin-left: 20px;
	}

	.CategoryLink{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		font-size: 0.5em;
		border-radius: 10px;
		background-color: red;
		min-width: 80px;
	}

	#BodyContentWrapper{
		position: relative;
		display: inline-block;
		vertical-align: top;
		/*float: left;*/
		width: 100%;

		box-sizing: border-box;
	}

	#PageContentWrapper{
		box-sizing: border-box;
	}

	#OuterFlexWrapper{
		width: 100%;
		height: 100%;
		margin-top: 20px;
		z-index: 0;
	}

	/*FlexContainer > FlexContentContainer > FlexContent */

	.FlexContainer{
		/* Basic styling */
		position: relative;
		width: 100%;
		overflow: hidden;
		/* Flexbox Setup */

		display: -webkit-flex;
		-webkit-flex-direction: row;
		-webkit-flex-wrap: wrap;
		-webkit-justify-content: space-between;
		-webkit-align-items: center;
		-webkit-align-content: space-between;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		align-content: space-between;
	}

	.FlexContentContainer{
		/* Basic Styling */
		margin: 10px 10px 10px 10px;
		/* Flexbox Setup */
		display: -webkit-flex;
		display: flex;

		max-width: 360px;
		max-height: 215px;
	}

	.FlexContent{
		width: 100%;
		height: 100%;
		border-radius: 15px;
		background-color: black;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		cursor: pointer;
		cursor: hand;
	}

	#PreviewTextContainer{
		width: 100%;
		height: 100%;
		border-radius: inherit;
	}

	.PreviewTextWrapper{
		display: table;
		table-layout: fixed;
		opacity: 0;
		width: 100%;
		height: 100%;
		border-spacing: 10px;
	}

	.PreviewText{
		display: table-cell;
		white-space: normal;
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		font-size: 1.7em;
		background: none;
	}

	.PreviewTextWrapper:hover{
		opacity: 1;
		background: rgba(0, 0, 0, 0.5);
		border-radius: inherit;
	}
	

	.FlexContentSpacer{
		width: 300px;
		height: 140px;
		margin: 10px 10px 10px 10px;
		display: -webkit-flex;
		display: flex;
		visibility: hidden;
	}

	#MainPageContentContainer{
		position: relative;
		white-space: nowrap;
		width: 100%;
		height: 100%;
	}

	html{
		overflow-x: hidden;
		overflow-y: scroll;
		margin: 0 auto;
		padding: 0;
		background-color: #eeeeee;
	}

	body{

		position: relative;
		overflow-x: hidden; 
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		color: #eeeeee;

		visibility: hidden;
	}

	#BodyRoot{
		position: relative;
		margin: 0 auto;
	}

	#HeaderSpaceBuffer{
		height: 0px;
		min-height: 60px;
		max-height: 15%;
	}

	#HeaderContainer{
		position: fixed;
		width: 100%;
		height: 60px;
		top: 0px;
		left: 0px;
		display: block;
		text-align: center;
		z-index: 100;

		background-color: #222222;
	}


	#Header{
		position: relative;
		height: 100%;
		width: 100%;
		display: inline-block;
	}

	#HeaderHorizontalWrapper{
		position: relative;
		height: 100%;
		width: 100%;
		display: block;
	}

	#LogoContainer{
		display: block;
		float: left;
		height: 100%;
		left: 0px;
		width: 60px;
	}

	#logo{
		width: inherit;
		height: inherit;
		background-image: url('Assets/PowerWhiteTransparentBg.png');
		background-position: center;
		background-size: 60% 60%;
		background-repeat: no-repeat;

		display: block;
		text-indent: -9999px;
		white-space: nowrap;

		cursor: pointer;
		cursor: hand;
	}

	.BlockLeft{
		display: block;
		float: left;
	}

	#NameContainer{
		position: relative;
		display: table;
		vertical-align: middle;
		float: left;
		height: 100%;

		top: 50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);

		cursor: pointer;
		cursor: hand;
	}

	#name{
		display: table-cell;
		vertical-align: middle;
		height: 100%;
		padding-top: 5px;
		text-align: left;
		font-size: 2.0em;
		font-family: "Optima", "Helvetica", "Sans-serif";
		font-weight: bold;
		text-decoration: none;
	}

	#MainName{
		text-decoration: inherit;
		color: #fa7d00;
		display: table-cell;
		vertical-align: bottom;
	}


	#com{

		display: table-cell;
		vertical-align: bottom;
		text-decoration: inherit;
		color: rgb(238, 238, 238);
		
		height: inherit;
		width: inherit;
	}

	#Navigation{
		position: relative;
		float: right;
		height: 100%;
		width: 55%;
		min-width: 300px;
		max-width: 800px;
	}

	#NavigationContainer{
		height: 100%;
	}

	#NavHorizontalWrapper{

		position: relative;

		height: 65%;
		min-height: 30px;
		max-height: 80px;
		width: 100%;
		border-radius: 20px;
		background-color: #eeeeee;

		top: 50%;
  		-webkit-transform: translateY(-50%);
  		-ms-transform: translateY(-50%);
  		transform: translateY(-50%);

  		display: table;
  		table-layout: fixed;
	}

	#NavElement{
		height: 100%;
		display: table-cell;
		vertical-align: middle;
		padding-top: 1px;
	}

	#NavLink{
		font-family: "Optima", "Helvetica", "Sans-serif";
		font-size: 1.1em;
		font-weight: 600;
		text-decoration: none;

		cursor: pointer;
		cursor: hand;
	}

	.black{
		color: black;
	}

	.orange{
		color: #fa7d00;
	}

	#MobileNavButtonContainer{
		position: absolute;
		top: 0px;
		right: 0px;
		width: 60px;
		height: 60px;

		cursor: pointer;
		cursor: hand;
	}

	#MobileNavButton{
		position: relative;
		height: 100%;
		width: 100%;
		background-image: url('../Assets/HamburgerOrange.png');
		background-position: center;
		background-size: 60% 60%;
		background-repeat: no-repeat;
	}

	#MobileNavColumn{
		position: fixed;
		top: 60px;
		right: 0px;
		height: 100%;
		width: 40%;
		background-color: black;
		display: none;
	}

	#MobileNavOptionWrapper{
		position: relative;
		width: 100%;
		height: 40px;
		display: table;
	}

	#MobileNavOption{
		display: table-cell;
		vertical-align: middle;
		text-align: left;
		width: 100%;
		height: 100%;
		font-size: 1.6em;
		padding-left: 10px;

		border-bottom-style: solid;
		border-width: 2px;
		border-color: #fa7d00;

		cursor: pointer;
		cursor: hand;
	}

	#PageBanner{

		width: 100%;
		padding-bottom: 33%;
		overflow: hidden;
		background-image: url('Assets/RASTERBURN_Banner.png');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
	}

	#InformationColumnContent{
		position: relative;
		width: 100%;
		height: 100%;
	}

	#MediaViewerWrapper{
		top: 5%;
		left: 0%;
		width:100%;
		background-color: #222222;
		border-radius: 15px 15px 15px 15px;
	}

	#MediaOptionsHorizontalWrapper{
		width: 80%;
		margin: 0 auto;
		display: flex;
 		align-items: center;
    	justify-content: center;
		min-height: 30px;
		max-height: 40px;
		color: white;
	}

	#MediaOptionElement{
		display: flex;
		flex-grow: 1;
		cursor: pointer;
		cursor: hand;
	}

	#MediaOptionText{
		text-align: center;
		vertical-align: middle;
		/*display: table-cell;*/
		width:100%;
	}

	#MediaContentSection{

		width: 100%;
		bottom: 0px;
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}

	#VideoWrapper, #PhotoWrapper, #UnityPlayerWrapper{
		width: 99.5%;
		height: 100%;
		position: relative;
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit; 
	}

	#ImageContainerWrapper{
		width: 100%;
		height: 100%;
		border-radius: inherit;
	}

	#ImageList{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: calc(100% - 30px);
		border-radius: inherit;
	}

	#ImageContainer{
		/*
		display: table-cell;
		vertical-align: middle;
		*/
	}

	#Image{

		display: block;
		border-radius: initial;

		object-fit: contain;

		width: 85%;
		max-width: 85%;
		max-height:100%;
		margin: auto;

		/*
		background-size: contain;
		background-position: 50% 50%;
		background-repeat: no-repeat no-repeat;
		*/
	}

	#VideoPlayer{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}

	#DotsContainer{
		margin: 0 auto;
		/*width: 60%;*/
		max-width: 100%;
		height: 30px;
		display: table;
		table-layout: fixed;
		bottom: 0px;
	}

	#Dot{
		display: table-cell;
		text-align: center;
		vertical-align: middle;

		cursor: pointer;
		cursor: hand;
	}

	.Arrow{

		position: absolute;
		height: 20%;
		width: 8%;
		max-width: 40px;
		left: 10px;
		top: calc(40% - 15px);

		background-position: center center;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url(../Assets/arrow.svg);

		cursor: pointer;
		cursor: hand;
	}

	.RightArrow{
		right: 10px;
		left: initial;
	    -moz-transform: scaleX(-1);
	    -o-transform: scaleX(-1);
	    -webkit-transform: scaleX(-1);
	    transform: scaleX(-1);
	}

	#ProjectDescriptionWrapper, #ProjectContributionsWrapper{
		width: 100%;
		margin-bottom: 4%;
		clear: both;
		font-family: "Optima", "Helvetica", "Sans-serif";
	}

	#ProjectDescriptionLabel, #ProjectContributionsLabel{
		margin-top: 10px;
	}

	#ProjectDescriptionText, #ProjectContributionsList{
		font-size: 1.0em;
		padding-left: 5px;
		padding-right: 5px;
		margin-top: 20px;
		/*text-align: justify;*/
	}

	#ProjectDescriptionLabel, #ProjectContributionsLabel{
		font-size: 2.0em;
		font-weight: 500;
	}

	#Separator{
		position: absolute;
		width: 100%;
		background-color: gray;
		height: 2px;
	}

	#ProjectContributionsList>li{
		margin-bottom: 5px;
		margin-left: 20px;
	}
}

/*---------------------- Project Page Rules ------------------------------ 

MediaColumn
InformationColumn
PageContentWrapper

*/


@media only screen and (min-width: 1000px){

	#PageConfigurationWrapper{
		position: relative;
		width: 100%;
		display: flex;
		padding-top: 2%;
		box-sizing: border-box;
	}

	#ContentLayoutController{
		padding-left: 20px;
		padding-right: 20px;
	}

	#HeaderLayoutController{
		padding-left: 20px;
		padding-right: 30px;
	}

	#PageContentWrapper{

		color: black;
		position: relative;
		display: inline-block;
		vertical-align: top;
		width: 100%;
		box-sizing: border-box;
	}

	#MediaColumn{

		height: 80vh;
		width: calc((92vh - 60px) * 1.0625);
		/*padding-right: 5%;*/
	}

	#InformationColumnContent{
		top: 5%;
	}

	#InformationColumn{
		width: 40%;
		padding-left: 3%;
		white-space: normal;
	}

	#WelcomeText{
		/*font-size: 3em;*/
		font-size: 1.9vw;
	}
}

@media only screen and (min-width: 1200px){

	#WelcomeText{
		font-size: 20px;
	}
}

/* Desktop Medium Width */
@media only screen and (max-width: 1000px){

	#Navigation{
		display: none;
	}

	#MobileNavButtonContainer{
		display: auto;
	}

	#HeaderRightMargin{
		float: right;
	}

	.FlexContentContainer{
		width: 44vw;
		height: calc(44vw * 0.6);
		max-width: 430px;
		max-height: 258px;
	}

}

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

	#PageConfigurationWrapper{
		position: relative;
		width: 100%;
		padding-top: 2%;
		box-sizing: border-box;
	}

	#ContentLayoutController, #HeaderLayoutController{
		padding-left: 20px;
		padding-right: 20px;
	}

	#PageContentWrapper{

		color: black;
		position: relative;
		display: inline-block;
		vertical-align: top;
		width: 100%;
	}

	#MediaColumn{
		width: 100%;
		padding-right: 5%;
		padding-bottom: 2%;
	}

	#InformationColumn{
		width: 100%;
		white-space: normal;
	}

	#WelcomeText{
		/*font-size: 2em;*/
		/*font-size: calc(1.5vmin + 1.5vmax) !important;*/
		font-size: 2.1vw;
	}

}

/*------------------------------------------------------------------------ */


/* Desktop (~16:9) */
@media only screen and (min-width: 1000px){

	#BodyRoot{
		/*max-width: 1400px;*/
		min-height: 800px;
	}

	#Navigation{
		display: auto;
	}

	#MobileNavButtonContainer{
		display: none;
	}

	#HeaderRightMargin{
		float: right;
	}

	.FlexContentContainer{
		width: 300px;
		height: 180px;
	}

	#WelcomeText{
		/*font-size: calc(2.0vmin + 1.0vmax) !important;*/
		/*font-size: 2.5vmin;*/
	}

}

/* Desktop narrow and below */
/*
@media only screen and (max-width: 720px){

	#Navigation{
		display: none;
	}

	#MobileNavButtonContainer{
		display: auto;
	}
}
*/

/* Desktop narrow only */
@media only screen and (min-width: 580px) and (max-width: 720px){

	#ContentLayoutController, #HeaderLayoutController{
		padding-left: 20px;
		padding-right: 20px;
	}

	#logo{
		margin-left: 0;
	}

	.FlexContentContainer, .FlexContentSpacer{
		width: 43vw;
		height: calc(43vw * 0.6);
		max-width: 430px;
		max-height: 258px;
	}

	.PreviewText{
		font-size: 1.3em;
	}

	#WelcomeText{
		/*font-size: 1em;*/
		font-size: 2.4vw;
	}
}

@media only screen and (min-width:720px) and (max-width: 1000px){

	#WelcomeText{
		font-size:2.1vw;
	}

}

/* Desktop single column */
@media only screen and (max-width: 580px){


	.FlexContentContainer, .FlexContentSpacer{
		width: 90vw;
		height: 54vw;
		max-width: none;
		max-height: none;
	}

	#WelcomeText{
		/*font-size: 1em;*/
		font-size: 2.8vw;
	}

	#ResumeContainer, #EmailContainer{
		min-width: 130px;
	}

	#InfoContainer{
		margin-bottom: 10px;
	}

	#MediaOptionsHorizontalWrapper{
		table-layout: auto;
	}
}





/* All iPads */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (device-aspect-ratio: 3/4){

	.PreviewText{
		opacity: 0;
		background: none;
	}

	.PreviewTextWrapper:hover{
		opacity: 0;
	}
}

/* iPad Portrait (3:4) */
@media only screen and (orientation: portrait) and (device-aspect-ratio: 3/4) and (min-device-width: 768px){

	#Navigation{
		display: none;
	}

	#MobileNavButtonContainer{
		display: block;
	}
}

/* iPad Landscape (4:3) */
@media only screen and (orientation: landscape) and (device-aspect-ratio: 3/4) and (min-device-width: 768px){

}





/* iPhone 4 Portrait (2:3) */
@media screen and (orientation: portrait) and (device-aspect-ratio: 2/3){

}

/* iPhone 4 Landscape (3:2) */
@media screen and (orientation: landscape) and (device-aspect-ratio: 2/3){

}

/* iPhone 5 & 6 Portrait (9:16)  + iPhone 4 Portrait (2:3) */
@media only screen and (orientation: portrait) and (device-aspect-ratio: 0.56), 
	   only screen and (orientation: portrait) and (device-aspect-ratio: 10/16),
	   only screen and (orientation: portrait) and (device-aspect-ratio: 9/16),
	   only screen and (orientation: portrait) and (device-aspect-ratio: 2/3){

	#ContentLayoutController, #HeaderLayoutController{
		padding-left: 10px;
		padding-right: 10px;
	}

	#HeaderContainer{
		-webkit-transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		-webkit-transform: translateY(0);
		
		position: absolute;
		height: 50px;
	}

	#MobileNavColumn{
		position: absolute;
		top: 50px;
	}

	#NameContainer{
		margin-left: -5px;
	}

	html{
		/*-webkit-overflow-scrolling : touch;*/
		-webkit-transform: scale(1.0); /* Safari And Chrome */
		-webkit-transform-origin: 0 0;
		width: 960;
	}

	#Spacer{
		background-color: red;
	}

	#InfoSpacer{
		display: none;
	}

	.FlexContentContainer{
		width: 300;
		height: 180;
		background: none;
	}

	.PreviewText{
		opacity: 0;
		background: none;
	}

	.PreviewTextWrapper:hover{
		opacity: 0;
	}

	#com{
		font-size: 0.8em;
		padding-bottom: 2px;
	}

	#MobileNavColumn{
		width: 60%;
	}

}

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

	#HeaderLayoutController{
		padding-left: 0px;
		padding-right: 0px;
	}

	#InfoSpacer{
		display: none;
	}

	#name{
		font-size: 1.7em;
	}
}

/* iPhone 5 & 6 Landscape (16:9) + iPhone 4 Landscape (3:2) */
@media only screen and (orientation: landscape) and (device-aspect-ratio: 40/71), 
	   only screen and (orientation: landscape) and (device-aspect-ratio: 10/16),
	   only screen and (orientation: landscape) and (device-aspect-ratio: 9/16),
	   only screen and (orientation: landscape) and (device-aspect-ratio: 2/3){

	#HeaderContainer{
		height: 50px;
	}

	html{
		/*-webkit-overflow-scrolling : touch;*/
		-webkit-transform: scale(1.0); /* Safari And Chrome */
		-webkit-transform-origin: 0 0;
		width: 640;
	}

	#Spacer{
		width: 5px;
	}

	.FlexContentContainer, .FlexContentSpacer{
		width: 250;
		height: 150;
	}

	.PreviewTextWrapper:hover{
		opacity: 0;
	}
}






.fadeInElementFast{
	-webkit-animation: fadeIn 0.5s;
	animation: fadeIn 0.5s;
}

.fadeInElementSlow{
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

.fadeOutElementFast{
	-webkit-animation: fadeOut 0.5s;
	animation: fadeOut 0.5s;
}

.fadeOutElementSlow{
	-webkit-animation: fadeOut 1s;
	animation: fadeOut 1s;
}

@-webkit-keyframes fadeIn{
	from { opacity: 0.0; }
	to   { opacity: 1.0; }
}

@keyframes fadeIn{
	from { opacity: 0.0; }
	to   { opacity: 1.0; }
}

@-webkit-keyframes fadeOut{
	from { opacity: 1.0; }
	to   { opacity: 0.0; }
}

@keyframes fadeOut{
	from { opacity: 1.0; }
	to   { opacity: 0.0; }
}