/* ===================================================================
 *  1.  GENERAL BODY SECTION
 *
 * ------------------------------------------------------------------- */
		
	* {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box; }
	body {
	  font-family: "museo-sans";
	  font-size: 15px;
	  color: #666;
	  margin: 0; 
	  
	  }
	
	h1{
		font-family: museo-sans;
		font-style: normal;
		font-weight: 500;
		font-size: 42pt;
		letter-spacing: 1px;	
	}
	
	h2{
		font-family: museo-sans;
		font-style: normal;
		font-weight: 300;
		font-size: 20pt;
		letter-spacing: 2px;	
	}
	
	
	h4{
		font-family: museo-sans;
		font-style: normal;
		font-weight: 100;
		font-size: 8pt;
		letter-spacing: 1px;	
	}


/* ===================================================================
 *  3.  FLEX SECTION
 *
 * ------------------------------------------------------------------- */
	


	.flexStartRow{
		display:flex;
		display:-webkit-flex;
	    justify-content: flex-start;
	    -webkit-justify-content: flex-start;
	    flex-direction: row;
	}
	.flexStartRowNoWrap{
		display:flex;
		display:-webkit-flex;
	    justify-content: flex-start;
	    -webkit-justify-content: flex-start;
	    flex-direction: row;
	    flex-wrap: no-wrap;	
	    overflow-x: auto;
	}
	.flexStartCenterRow{
		display:flex;
		display:-webkit-flex;
	    justify-content: flex-start;
	    -webkit-justify-content: flex-start;
	    flex-direction: row;
	    align-items: center;
	    -webkit-align-items: center;
	    flex-wrap: no-wrap;	
	    width: 100%;
	}
	.flexStartColumn{
		display:flex;
		display:-webkit-flex;
	    justify-content: flex-start;
	    -webkit-justify-content: flex-start;
	    flex-direction: column;
	    flex-wrap: no-wrap;	
	}
	.flexCenterRow{
		display:flex;
		display:-webkit-flex;
	    justify-content: center;
	    -webkit-justify-content: center;
	    align-items: center;
	    -webkit-align-items: center;
	    flex-direction: row;
	    flex-wrap: no-wrap;	
	}
	.flexCenterColumn{
		display:flex;
		display:-webkit-flex;
	    justify-content: center;
	    -webkit-justify-content: center;
	    flex-direction: column;
	    align-items: center;
	    -webkit-align-items: center;
	    flex-wrap: no-wrap;	
	}
	
	.flexSpaceBetweenRow{
		display:flex;
		display:-webkit-flex;
	    justify-content: space-between;
	    -webkit-justify-content: space-between;
	    flex-direction: row;
	    align-items: center;
	    -webkit-align-items: center;
	    width: calc(100% - 50px);
	    /*flex-wrap: no-wrap;*/	
	}
	
	.flexSpaceAroundRow{
		display:flex;
		display:-webkit-flex;
	    justify-content: space-around;
	    -webkit-justify-content: space-around;
	    flex-direction: row;
	    align-items: center;
	    -webkit-align-items: center;
	    flex-wrap: no-wrap;	
	}

/* ===================================================================
 *  4.  MAIN CONTENT SECTION
 *
 * ------------------------------------------------------------------- */
	
		.header{
			height: 40px;
			background-color: #f2f2f2;
		}
		
		.mainSection{
			height: calc(100vh);
			width: 100vw;
			background-color: #f2f2f2;
			position: relative;
		}
		.indentedBar{
			height: 20px;
			width: 80px;
			margin: 10px;
			background: rgba(255,255,255,.1);
			box-shadow: inset -4px -4px 12px -1px rgba(255,255,255, 1),
		              inset 2px 2px 8px -1px rgba(72,79,96, 0.5);
		}
		.indentedCircle{
			height: 20px;
			width: 20px;
			border-radius: 20px;
			margin: 10px;
			background: rgba(255,255,255,.1);
			box-shadow: inset -4px -4px 12px -1px rgba(255,255,255, 1),
		              inset 2px 2px 8px -1px rgba(72,79,96, 0.5);
		}
			
		.smallSpacer {
			width: 5px;
			height: 1px;
		}	
/* ===================================================================
 *  5.  HEADER SECTION
 *
 * ------------------------------------------------------------------- */
		
		
	.tepaHeader{
		padding: 20px;
		
	}
	.tepaHeaderLetters{
		position:relative; 
		width: 50px;
		height: 50px;
		margin-left: 10px;
		
	}
	.tepaHeaderLetterLine{
		position: absolute;
		background-color: #910000;
	}
	
	.tlineh{
		height: 3px;
		width: calc(100% - 4px);
		left: 2px;
		top: 2px;
		animation: xanimate 1s linear;
	}
	
	.tlinev{
		width: 3px;
		height: calc(100% - 4px);
		top: 2px;
		left:  calc(50% - 2px);
		animation: yanimate 1s linear;
	}
	.elineh1{
		height: 3px;
		width: calc(100% - 4px);
		left: 2px;
		top: 2px;
		animation: wanimate 1.2s linear;
	
	}
	.elineh2{
		height: 3px;
		width: calc(100% - 7px);
		left: 2px;
		top: calc(50% - 1px);
		animation: wanimate 1.3s linear;
	}
	.elineh3{
		height: 3px;
		width: calc(100% - 4px);
		left: 2px;
		bottom: 2px;
		animation: wanimate 1.4s linear;
	}
	.plinev{
		width: 3px;
		height: calc(100% - 4px);
		top: 2px;
		left: 2px;
		animation: yanimate 1.5s linear;
	}
	.plineh1{
		height: 3px;
		width: calc(50% - 5px);
		left: 7px;
		top: 2px;
		animation: xhalfanimate 2s linear;
	}
	.plineh2{
		height: 3px;
		width: calc(50% - 5px);
		left: 7px;
		top: calc(50% - 0px);
		animation: xhalfanimate 2s linear;
		
	}
	.plinec1{
		height:calc(50% + 1px);
		width: calc(50% - 2px);
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
		border: 3px solid #910000;
		border-left: 0;
		background-color: transparent;
		left: calc(50% - 0px);
		top: 2px;
		animation: xcurveanimate 2s linear;
		/*animation-delay: 2s;*/
	}
	.alinev1{
		height: calc(100% - 4px);
		width: 3px;
		left: 6px;
		top: 2px;
		-moz-transform: skew(-30deg);
		-webkit-transform: skew(-30deg);
		transform: skew(-30deg);
		animation: yanimate 2.25s linear;
	}
	.alinev2{
		height: calc(100% - 4px);
		width: 3px;
		right: 15px;
		top: 2px;
		-moz-transform: skew(30deg);
		-webkit-transform: skew(30deg);
		transform: skew(30deg);
		animation: yanimate 2.25s linear;
	}
	.alineh{
		height: 0px;
		width: calc(40% );
		background-color: transparent;
		border-bottom: 4px solid #910000;;
		border-left: 2px solid transparent;
		border-right: 2px solid transparent;
		left: 10px;
		top: calc(50% + 2px);
		animation: whalfanimate 2.5s linear;
	}
	@keyframes yanimate{
	  0% {
	    top: -100%;
	  }
	  
	  100%{
	    top: 2px;
	  }
	}
	
     @keyframes xanimate {
         0% {
             left: -100%;
         }
 		100% {
             left: 2px;
         }
         
     }
     
     @keyframes xhalfanimate {
         0% {
             left: -50%;
         }
         100% {
             left: 7px;
         }
     }
     @keyframes xcurveanimate {
         0% {
             left: -20%;
         }
         100% {
             left: 50%;
         }
     }
     
     @keyframes wanimate {
         0% {
             width: 10%;
         }
 		100% {
             width: 100%;
         }
         
     }
     @keyframes whalfanimate {
         0% {
             width: 10%;
         }
 		100% {
             width: 40%;
         }
         
     }
     
     
/* ===================================================================
 *  6.  FOOTER SECTION
 *
 * ------------------------------------------------------------------- */
	
	#footer {
	  	background-color: #002e5b;
	  	width: 100%;
	  	height: 24px;
	  	padding: 0 15px;
	  	color: #e8edf2;
	}
	.copyright-text {
	    font-size: 12px;
	    color: #fff;
	    line-height: 15px;
	    padding: 0 10px;
	}
	.copyright-text a {
		  color: #fff;
	}
	.footerLink{
		margin: 0 10px;
		font-size: 7pt;
	    text-transform: uppercase;
	}
	.social-icons {
	    float: right;
	    line-height: 20px;
	}
	.social-icons ul {
	    list-style: none;
	}
	  
	.social-icons li {
	    display: inline-block;
	}

	.social-icons a {
	      color: #fff;
	      background-color: rgba(white, 0.2);
	      width: 15px;
	      height: 15px;
	      text-align: center;
	      line-height: 15px;
	      font-size: 16px;
	      margin: 0 8px;
	 }
	  .social-icons  a:hover {
	      background-color: white;
	      color: black;
	  }

/* ===================================================================
 *  7.  RESPONSIVE SECTION
 *
 * ------------------------------------------------------------------- */
	
		@media (max-width: 768px) {
			 body{
		  		font-size: 12px;
			 }
			 
				
			.social-icons{
				display:none;
			}
			.footerLink, .copyright-text {
		    	font-size: 6pt;
			}
			.spacer{
				height: 10px;
			}
		}	
		@media (max-width: 480px){
				
			.indentedBar{
				width: 40px;
				margin: 10px 2px;
			}
			.indentedCircle{
				margin: 10px 5px;
			}
			.smallSpacer {
				width: 2px;
			}	
			.footerLink, .copyright-text {
		    	font-size: 4pt;
			}
		}
		@media (max-width: 400px){
			
		}
		
		.hide {
			display: none;
		}