/*
 * This file is for various animations using css on the current PCR Hex Logo
 * 
 * expected data structure is as follows:
 * 		<div class="pcrCssLogoMed">
 * 			<div class="pcrLogoPart logoBase1"></div>
 * 			<div class="pcrLogoPart logoBase2"></div>
 *  		<div class="pcrLogoPart logoBase3"></div>
 *  		<div class="pcrLogoPart logoBase4"></div>
 *  		<div class="pcrLogoPart logoBase5"></div>
 *  		<div class="pcrLogoPart logoBase6"></div>
 * 		</div>
 * 
 * the size of the logo is controlled by the font-size attribute on the wrapper
 * 
 */


.pcrCssLogoSmall{
	font-size:10px;
	position: relative;
}

.pcrCssLogoSmall{
	font-size:20px;
	position: relative;
}
.pcrCssLogoMed{
	font-size:29px;
	position: relative;
}
.pcrCssLogoLarge{
	font-size:40px;
	position: relative;	
}
.pcrCssLogoXLarge{
	font-size:52px;
	position: relative;	
}

.pcrLogoPart{
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 1em 1.732em 1em;
    border-color: transparent transparent #0079c5 transparent;
    transform-origin: 2em 1.73em;
    z-index: 10;	
}

.logoBase1{
	border-color: transparent transparent #73c3c8 transparent;
	-webkit-transform:rotate(30deg);
	transform:rotate(30deg);
}
.logoBase2{
	border-color: transparent transparent #041726 transparent;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
.logoBase3{
	border-color: transparent transparent #1a623c transparent;
	-webkit-transform:rotate(150deg);
	transform:rotate(150deg);
}
.logoBase4{
	border-color: transparent transparent #19488f transparent;
	-webkit-transform:rotate(-30deg);
	transform:rotate(-30deg);
}
.logoBase5{
	border-color: transparent transparent #19254c transparent;
	-webkit-transform:rotate(-90deg);
	transform:rotate(-90deg);
}
.logoBase6{
	border-color: transparent transparent #3b9c37 transparent;
	-webkit-transform:rotate(-150deg);
	transform:rotate(-150deg);
}

/*
 * repeating grow and spin while assembling.   this requires a wrapper for the spin
 *  * expected data structure is as follows:
 * <div class="spinGrowWrapper">
 * 		<div class="pcrCssLogoMed assemblePauseRestart">
 * 			<div class="pcrLogoPart logoBase1"></div>
 * 			<div class="pcrLogoPart logoBase2"></div>
 *  		<div class="pcrLogoPart logoBase3"></div>
 *  		<div class="pcrLogoPart logoBase4"></div>
 *  		<div class="pcrLogoPart logoBase5"></div>
 *  		<div class="pcrLogoPart logoBase6"></div>
 * 		</div>
 * <div>
 */
.spinGrowWrapper{
 	animation-name: spinGrowLogo;
    animation-duration: 3000ms;
    animation-iteration-count:infinite;
    animation-timing-function: linear;		
}
@keyframes spinGrowLogo{
		0% { transform: rotate(0deg) scale(.25); }		
		50% {transform: rotate(360deg) scale(1);}	
		100% {transform: rotate(360deg); }	
		
}

.assemblePauseRestart div{
 	animation-name: assemblePauseRestart;
    animation-duration: 3000ms;
    animation-iteration-count:infinite;
    animation-timing-function: linear;	
}

@keyframes assemblePauseRestart{
	 0%  {  border-top-width:2.5em;}
	 50%  {  border-top-width:0;}		
	 100%  {  border-top-width:0;}		
	
}
	

/*
 *  fading sections progress
 *  * expected data structure is as follows:
 * 		<div class="pcrCssLogoMed">
 * 			<div class="pcrLogoPart logoBase1 fadeLogo1"></div>
 * 			<div class="pcrLogoPart logoBase2 fadeLogo2"></div>
 *  		<div class="pcrLogoPart logoBase3 fadeLogo3"></div>
 *  		<div class="pcrLogoPart logoBase4 fadeLogo4"></div>
 *  		<div class="pcrLogoPart logoBase5 fadeLogo5"></div>
 *  		<div class="pcrLogoPart logoBase6 fadeLogo6"></div>
 * 		</div>
 * 
 */

.fadeLogo1{
	animation-delay:0;
 	animation-name: fadeLogoPart;
    animation-duration: 1000ms;
    animation-iteration-count:infinite;
    animation-timing-function: linear;				
}
.fadeLogo2{
	animation-delay:167ms;
 	animation-name: fadeIn1;
    animation-duration: 1000ms;
    animation-iteration-count:infinite;
    animation-timing-function: linear;				
}
.fadeLogo3{
	animation-delay:334ms;
 	animation-name: fadeLogoPart;
    animation-duration: 1000ms;
    animation-iteration-count:infinite;
    animation-timing-function: linear;				
}

.fadeLogo6{
	animation-delay:501ms;
 	animation-name: fadeLogoPart;
    animation-duration: 1000ms;
    animation-iteration-count:infinite;
    animation-timing-function: linear;				
}

.fadeLogo5{
	animation-delay:668ms;
 	animation-name: fadeLogoPart;
    animation-duration: 1000ms;
    animation-iteration-count:infinite;
    animation-timing-function: linear;				
}

.fadeLogo4{
	animation-delay:835ms;
 	animation-name: fadeLogoPart;
    animation-duration: 1000ms;
    animation-iteration-count:infinite;
    animation-timing-function: linear;				
}


@keyframes fadeLogoPart{
	 0%  { opacity:0;}
	 16% { opacity:.16;}
	 32% { opacity:.32;}
	 48% { opacity:.48;}
	 64% { opacity:.64}
	 80% { opacity:.80;}
	 100% { opacity:1;}			
}

/*
 * assemble animation -- recommended to wrap the expected data with a rotate animation of some sort
 *  * expected data structure is as follows:
 * 		<div class="pcrCssLogoMed assemblePcrLogo">
 * 			<div class="pcrLogoPart logoBase1"></div>
 * 			<div class="pcrLogoPart logoBase2"></div>
 *  		<div class="pcrLogoPart logoBase3"></div>
 *  		<div class="pcrLogoPart logoBase4"></div>
 *  		<div class="pcrLogoPart logoBase5"></div>
 *  		<div class="pcrLogoPart logoBase6"></div>
 * 		</div>
 */

.assemblePcrLogo div{
    animation-name: assembleLogo;
    animation-duration: 2000ms;
    animation-iteration-count:1 ;/*infinite*/
    animation-timing-function: linear;		
}
@keyframes assembleLogo {
	 0%  {  border-top-width:2.5em;}
	 100% { border-top-width:0;}	
}	

/*
 * the most fun-- but lightly experimental at the moment-is where the shape is generally in a state of flux.
 * assemble animation -- recommended to wrap the expected data with a rotate animation of some sort
 *  * expected data structure is as follows:
 * 		<div class="pcrCssLogoMed assemblePcrLogo">
 * 			<div class="pcrLogoPart logoBase1"></div>
 * 			<div class="pcrLogoPart logoBase2"></div>
 *  		<div class="pcrLogoPart logoBase3"></div>
 *  		<div class="pcrLogoPart logoBase4"></div>
 *  		<div class="pcrLogoPart logoBase5"></div>
 *  		<div class="pcrLogoPart logoBase6"></div>
 * 		</div>
 */
.buildRebuild div{
 	animation-name: assembleDissasembleLogo;
    animation-duration: 9000ms;
    animation-iteration-count:infinite;
    animation-timing-function: linear;				
}

@keyframes assembleDissasembleLogo{
	0%  {
 			border-top-width:0;		
		 }
	10%  {
 			border-top-width:2.5em;		
		 }		 
	20%  {
 			border-top-width:0;		
		 }			
	30%  {
 			border-left-width:5em;		
		 }	
	40%  {
 			border-left-width:5em;		
		 }		
	50%  {
 			border-right-width:6em;		
		 }	
	60%  {
 			border-right-width:1em;		
		 }	
	70%  {
			border-top-width:4em;
 			border-left-width:5em;	
 			border-right-width:5em;		
		 }				 			 			 
	80%  {
			border-top-width:0;
 			border-left-width:1em;	
 			border-right-width:1em;	
		 }				 		 
	90%  {}				 			 
	100%  {}				 	 
}