/* General */
@font-face {
    font-family: ubuntuFontMono;
    src: url("fonts/UbuntuMono-R.ttf");
}

body 
{
	/*background: url("layout/bg.gif") no-repeat center 20% fixed; */
	background-color: #1a1a1a;
	margin: 0;
	height: 100%;
	color:white;
	font-family: 'Courier New', Courier, monospace;
	font-family: ubuntuFontMono;
}
main {
	display: block;
}
p, li, td {
	font-size: 1.75vw;
	text-align: justify;
}
.titleSub,
.title
{
	font-size: 4vw;
	font-weight: bolder;
  	color: #97cf38;
	text-shadow:
	   -1px -1px 0 #393939,  
		1px -1px 0 #393939,
		-1px 1px 0 #393939,
		 1px 1px 0 #393939;
}
.titleSub{
	font-size: 2.5vw;
	font-weight:normal;
	font-style: italic;
	color: #749e2d;
}




h1
{
	color: #bf0073; 
	font-size: 3vw;
	padding-bottom: 10px;
}
h2
{
	font-size:2.5vw;
	font-weight: bold;

	color: #97cf38;
	margin: 1%;
}
h3
{
	color: #bf0073; 
	font-size: 1.6vw;
	padding-bottom: 0px;
}


/* Tags  ------------------------------------------------------------------------------------*/
ul.tag 
{
	width: 100%;
	float: right;

	margin: 0 auto;
	padding-top: 5%;
	padding-bottom: 5%;
}	

li.tag
{
	color:#393939;
	background-color:#bf0073;
	font-weight: bold;

	
	display: inline-block;
	position: relative;
	text-align: center;
	font-size: 1.65vw;
	padding: 5px;	
	margin: .5em;
}

/* TitleLine ------------------------------------------------------------------------------------*/
.titleLine {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;

  max-width: 1280px;
  margin: 0 auto;
}

.titleLine::before
{
	content: '';
	flex: 1;
	border-bottom: 2px solid #97cf38;
}
.titleLine::after 
{
  	content: '';
  	flex: 2;
  	border-bottom: 2px solid #97cf38;
}

.titleLine:not(:empty)::before {
  	margin-right: 1em;
}

.titleLine:not(:empty)::after {
  	margin-left: 1em;
}

#cycle:after {
    animation-name:cycle;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    content: "";
}

@keyframes cycle {
	0% {
	  	content: "Tools Programmer";
	}
	33% {
	  	content: "Software Developer";
	}
	66% {
		content: "Game Programmer";
	}
	100% {
		content: "Technical";
	}
}

/* Banner  ------------------------------------------------------------------------------------*/
#banner
{
	position: relative;
	margin: 0 auto;
	top:0px;
			
	width: 100%;

	padding-top: 1%;
	padding-bottom: 1%;
	background-image: url("layout/banner.gif");
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center; 
}

.bannerContent
{
	width: 100%;
	height: 100%;
	max-width: 1280px;
	position: relative;


	margin: 0 auto;

    flex-direction: row;
    align-items: center;
}


#bannerTextBox
{
	margin: 0 auto;
	display:inline-block;

	min-width: 450px;

	border-top:  2px solid #bf0073;
	padding-left: 20px;
}

#logo
{
	margin: 0 auto;
	display:inline-block;

	width: 40%;
	max-width: 429px;
	min-width: 300px;

	height: 20vw;
	max-height: 150px;

	background-position: center; 
	background-image: url("layout/logo.png");
	background-size: contain;
	background-repeat:no-repeat;
}
/* ------------------------------------------------------------------------------------*/


/* Site  ------------------------------------------------------------------------------------*/
#siteContainer 
{

	display: -ms-flexbox;
    display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -o-flexbox;
    display: flexbox;
	
	-ms-flex-direction:	column;
	-o-flex-direction: column; 	
	-webkit-flex-direction: column; 
	-moz-flex-direction: column;
	flex-direction: column;

	margin: auto;
	margin-top: 0px;
	margin-bottom: 300px;
	
	width: 100%;
	
	top: 0px;
	height: 100%;
}

#mainContainer
{
	position: relative;
	margin: 0 auto;

			
	width: 100%;
	height: 100%;
}


a {
	color: #90c400;
    text-decoration:none;
}



/* Project Container  -----------------------------------------------------------------------*/
.narrowContainer,
.wideContainer{
    padding: 5%;
	padding-top: 1%;
	margin: 0 auto;
	margin-bottom: 15vh;
	background: rgba(102, 193, 62, 0.25);


    background: -webkit-linear-gradient(rgba(129, 71, 106, 0.25), rgba(102, 193, 62, 0.25)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(129, 71, 106, 0.25), rgba(102, 193, 62, 0.25)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(129, 71, 106, 0.25), rgba(102, 193, 62, 0.25)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(129, 71, 106, 0.25), rgba(102, 193, 62, 0.25)); /* Standard syntax */
}

.narrowContainer
{
	width: 80%;
	max-width: 960px;
}




/* SELECTOR */
.selectionBar
{
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;

	-webkit-column-width: auto;
    -moz-column-width: auto;
    column-width: auto;
	height: auto;

	-webkit-column-count:4;
	-moz-column-count: 4;
	column-count: 4;

	column-gap: 1%;	
	margin-bottom: 5%;
	overflow: visible;
}
.selectionBarItem 
{
	display:table;
	width: 100%;
	height: 100%;
    cursor:pointer;

	background-image: url("layout/projects/button_d.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}
.selectionBarItem:hover
{ 	
	background-image: url("layout/projects/button_a.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}
.buttonSelected
{
	background-image: url("layout/projects/button_a.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}

.barItemImage
{
	display: inline-block;
	width:100%;
	padding-bottom: 0.3em;
	padding-top: 0.3em;
}
.barItemImage:hover
{
	-webkit-filter:grayscale();
	filter: grayscale();
}

.toolBar
{
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.toolBarItem
{
	display: inline-block;
	position: relative;
	height: 5vw;
	max-height: 60px;
	min-height: 30px;
	margin: 1.5%;
}


/* MEDIA */
.contentSplitWrapper
{
	max-width: 1280px;
	margin: 0 auto;

	-webkit-column-count: 400px;
    -moz-column-count: 400px;
	column-count: 400px;
	
	-webkit-column-width: 400px;
	-moz-column-width: 400px;
	column-width: 400px;
	

	column-gap: 80px;
	column-rule: 1px solid #90c400;
}

.contentColumn
{	
    -webkit-column-break-inside: avoid;
	
    page-break-inside: avoid;
    break-inside: avoid;
	
	display:table;
	width: 100%;
	float: left;
	position:relative;
}
.contentColumn.isHidden
{
	visibility: hidden;
	overflow: hidden;
	opacity: 0;	
	height: 0;
	width: 0;
	overflow: hidden;
	display: none;
}	

.projectMediaWrapper
{
	display:inline-block;
	position:relative;
	    
	width: 640px;
	width: 100%;

    height: 0;
	padding-bottom: 56.25%;  
	
	border-top: 2px solid #90c400; 
	border-bottom: 2px solid #90c400; 
}

#contentImage 
{
	position:absolute;
    width: 100%;
	height: 100%;
}
#contentVideo 
{
	position:absolute;
    width: 100%;
	height: 100%;
}
.contentHidden 
{
	visibility: hidden;
	left: 300%;	
    height: 0px;
	width: 0px;
}


/* Content -----------------------------------------------------------------------*/
article {	
	opacity: 1;
	height:130%;
}
article.isHidden {
	overflow: hidden;
	opacity: 0;	
	height: 0;
} 

/* Content Navigator -----------------------------------------------------------------------*/
.mediaButtonBackground
{
	background-color: #393939;
	width: 100%;
	display: flex;
}

.imageButton 
{
	cursor:pointer;
	margin:2px;

	width:calc(20% - 4px);
	padding-bottom:4%;

	background-color: rgba(102, 193, 62, 0.25);
}
.imageButton.selected {
	background-color: rgb(129, 0, 90);
}
.imageButton.isHidden {
	display:none;
}
.videoButton 
{
	cursor:pointer;
	margin:2px;

	width:calc(20% - 4px);
	padding-bottom:4%;

	background-color: rgba(62, 71, 193, 0.25);
}
.videoButton.selected {
	background-color: rgb(129, 0, 90);
}
.videoButton.isHidden {
	display:none;
}


/* Progressbar  ------------------------------------------------------------------------------------*/
.progressWrapper
{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	
	-webkit-column-count: 2;
    -moz-column-count: 2;
	column-count: 2;
	
	-webkit-column-width: auto;
	-moz-column-width: auto;
	column-width: auto;
	

	column-gap: 2vw;
	column-rule: 1px solid #90c400;
}

.progressText,
.progressBarContainer
{
	width: 90%;
	height: 2vw;
	max-height: 25px;
	min-height: 10px;
	margin-bottom: .8%;

	font-size: 2vw;
	overflow: visible;
}
.progressBarContainer
{
	text-align: right;
	
	color: #393939;
	background-color: #393939; 
}

.progressBar
{
	display:table;
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 2vw;
	background-color: #bf0073;
}

/* Badges  ------------------------------------------------------------------------------------*/
.badgeWrapper
{
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.badgeColumn
{
	margin: 20px auto;
	width: 100%;
}

.badgesSplitWrapper
{
	flex: 1 1 auto;
	margin: 0 auto;
	width: 95%;

	-webkit-column-count: 2;
    -moz-column-count: 2;
	column-count: 2;
	
	-webkit-column-width: auto;
	-moz-column-width: auto;
	column-width: auto;
}

.badgeInfoContainer
{
	display:flex;
	width: 100%;

	margin-bottom: 5%;

	float: left;
	position:relative;

	background-color: #393939;
	border: 1px solid #90c400;
}

.badgeIcon
{
	display:table;
	height: 100%;
	margin: 2%;
	position: relative;
	/*border: 1px solid red;*/
}

.badgeContent
{
	width: 100%;
	height: 4em;
	margin: 2%;
	position: relative;

	display: table-column;
	grid-column: 1 / -1;
}

.badgeTitle
{
	font-size: 2vw;
	color:#90c400;
	
	width: 100%;
	display:block;

	border-bottom: 1px solid #90c400;
}

.badgeSubtext
{
	font-size: 1.6vw;
	color:#b2ffafcc;
	width: 100%;
	display:block;
}

.badgeBig
{
	width: 40%;
	margin: 0 auto;
	padding-bottom: 40%; 

	background-image: url("layout/badges/templateBig.png");
	background-repeat: no-repeat;
	background-size: contain;
}

.aboutContainer
{
	width: 100%;
	display: flex;
}
.aboutText
{
	width: 70%;
}
.aboutImage
{
	width: 25%;
	margin: auto 5%;
	padding-bottom: 25%;

	background-image: url("layout/me.jpeg");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Footer  ------------------------------------------------------------------------------------*/
footer {
	position:fixed;
	z-index: 10;
	bottom: 0;
	margin: 0 auto;
	height: 60px;
	width:100%;
	
	background-image: url("layout/f_spacer.png");
    background-repeat: repeat-x;
}

#innerFooter {
	left: 50%;
	transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	
	position: absolute;
	
	height: 60px;
	width: 100%;
	max-width: 960px;
	
	line-height: 60px;
	text-align:center;
}

/* Paralax  ------------------------------------------------------------------------------------*/
#piece01 {
	position: fixed;
	overflow:hidden;
	left: 30%;
	width: 223px;
	height: 351px;
	z-index: -1;
	
	background-image: url("layout/piece01.png");
	
	-o-animation:spin 200s linear infinite;
	-ms-animation:spin 200s linear infinite;
	-webkit-animation:spin 200s linear infinite;
    -moz-animation:spin 200s linear infinite;
    animation:spin 200s linear infinite;
}
#piece02 {
	position: fixed;
	overflow:hidden;
	left: 10%;
	width: 191px;
	height: 216px;
	z-index: -1;
	
	background-image: url("layout/piece02.png");
	
	-o-animation:spin 150s linear infinite;
    -ms-animation:spin 150s linear infinite;
	-webkit-animation:spin 150s linear infinite;
    -moz-animation:spin 150s linear infinite;
    animation:spin 150s linear infinite;
	
	-o-animation-direction: reverse;
	-ms-animation-direction: reverse;
	-webkit-animation-direction: reverse;
	-moz-animation-direction: reverse;	
	animation-direction: reverse;
}
#piece03 {
	position: fixed;
	overflow:hidden;
	right: 10%;
	width: 143px;
	height: 109px;
	z-index: -1;
	
	background-image: url("layout/piece03.png");
	
	-o-animation:spin 50s linear infinite;
    -ms-animation:spin 50s linear infinite;
	-webkit-animation:spin 50s linear infinite;
    -moz-animation:spin 50s linear infinite;
    animation:spin 50s linear infinite;
	
}
#piece04 {
	position: fixed;
	overflow:hidden;
	left: 45%;
	width: 413px;
	height: 382px;
	z-index: -1;
	
	background-image: url("layout/piece04.png");
	
	-o-animation:spin 250s linear infinite;
    -ms-animation:spin 250s linear infinite;
	-webkit-animation:spin 250s linear infinite;
    -moz-animation:spin 250s linear infinite;
    animation:spin 250s linear infinite;
	
	-o-animation-direction: reverse;
	-ms-animation-direction: reverse;
	-webkit-animation-direction: reverse;
	-moz-animation-direction: reverse;	
	animation-direction: reverse;
	
}

@-o-keyframes moveLeft { 0% { left: -10%; } 50% { left: -12.5%; } 100%{left :  -10%; }  }
@-ms-keyframes moveLeft { 0% { left: -10%; } 50% { left: -12.5%; } 100%{left :  -10%; }  }
@-moz-keyframes moveLeft { 0% { left:  -10%; } 50% { left: -12.5%; } 100%{left :  -10%; }  }
@-webkit-keyframes moveLeft { 0% { left: -10%; } 50% { left:  -12.5%; } 100%{left :  -10%; }  }
@keyframes moveLeft { 0% { left:  -10%; } 50% { left:  -12.5%; } 100%{left :  -10%; }  }
 
@-o-keyframes moveRight { 0% { right: -10%; } 50% { right: -12.5%; } 100%{right : -10%; }  }
@-ms-keyframes moveRight { 0% { right: -10%; } 50% { right:  -12.5%; } 100%{right : -10%; }  }
@-moz-keyframes moveRight { 0% { right: -10%; } 50% { right:  -12.5%; } 100%{right : -10%; }  }
@-webkit-keyframes moveRight { 0% { right: -10%; } 50% { right: -12.5%; } 100%{right : -10%; }  }
@keyframes moveRight { 0% { right: -10%; } 50% { right: -12.5%; } 100%{right : -10%; }  }

@-o-keyframes spin { 100% { -o-transform: rotate(360deg); } }
@-ms-keyframes spin { 100% { -ms-transform: rotate(360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* HANDLE SCALING - MIN AND MAX */
@media screen and (min-width: 960px) 
{
	h1{
		font-size: 1.8em;
	}
	h2 {
		font-size: 1.5em;
	}
	h3 {
		font-size: 0.95em;
	}
	p, li, td{
		font-size: 1.05em;
	}
	/*Menu button text */
	nav li {
		font-size: 1.8em;
	}
	.contentNavButton 
	{
		font-size: 1.65em;
	}	
	.projectSelectionText 
	{
		font-size: 1.15em;
	}
	.badgeTitle
	{
		font-size: 1.2em;
	}
	.badgeSubtext
	{
		font-size: .95em;
	}
	.progressBarContainer,
	.progressBar,
	.progressText
	{
		font-size: 1.1em;
	}
	li.tag
	{
		font-size: 1em;
	}
	.title
	{
		font-size: 2.4em;
	}
	.titleSub{
		font-size: 1.5em;
	}

}

@media screen and (max-width: 550px) 
{
	h1{
		font-size: 1em;
	}
	h2 {
		font-size: .9em;
	}
	h3 {
		font-size: .7em;
	}
	p, li, td {
		font-size:.7em;
	}
	nav li {
		font-size: 1.05em;
	}
	.contentNavButton 
	{
		font-size: .75em;
	}	
	.projectSelectionText 
	{
		font-size: .8em;
	}
	.badgeTitle
	{
		font-size: .7em;
	}
	.badgeSubtext
	{
		font-size: .6em;
	}
	.progressBarContainer,
	.progressBar,
	.progressText
	{
		font-size: .75em;
	}
	li.tag
	{
		font-size: .56em;
	}
	.title
	{
		font-size: 1.36em;
	}
	.titleSub
	{
		font-size: 0.85em;
	}
}