/*

AFE Red: rgb(237,28,36);
AFE Blue: rgb(46,49,146)
AFE Grey: rgb(209,210,212)


div { border: solid blue 1px; }
*/

div { box-sizing: border-box;}


body { margin: 0 auto 2% auto;
					
		max-width: 1360px;		
		
		font: normal 100% 'Droid-Sans',"Gill Sans", "Gill Sans MT", sans-serif;}

		



	h1 { font-size: 5em; line-height: 1em; font-weight: bolder;}		
	h2 { font-size: 1.8em;  line-height: 2em;}		
	h3 { font-size: 1.6em;  line-height: 1.7em;}		
	h4 { font-size: 1.3em;  line-height: 1.5em;}		
	h5 { font-size: 1.25em;  line-height: 1.3em;}		

	p { font-size: 1em;  line-height: 1.35em; padding-bottom: 1.25%;}		

	ul { padding: 2.5%; }

	li { line-height: 1.5em; 
			list-style: disc;
			padding: 0 1% 0 1%;}

	i { text-align: center; }

	q { font-size: 0.9em; line-height: 1.2em; font-style: italic; text-align: center; display: block; margin: 5px;}



	figure {	margin: 0% 1% 1% 1%;
				}

		figure img { max-width: 40%;
						margin-right: 10px; 
						float: left;}

		figcaption { font-size: 1em;  line-height: 1.3em; color: rgb(46,49,146); float: left; }

		figure p { float: right; }




	header {	width: 100%;
				margin-top: 1%;
				margin-bottom: 1%;	

			}


	#headerimage {	position: relative; 
		 			overflow: hidden;
		 			min-height: 200px;
		 			}

		#headerimage:after { 	position: absolute;
								content : "";
								display: block;

								top: 0;
								left:0;
								width: 100%;
								height: 100%;
								
								background-size: cover;

								background: url("../images/banner_pad_and_pen.png") no-repeat;
								/*background: url("../images/banner_pad_and_pen.png") no-repeat;*/
								opacity: 1;
								z-index: -1; }



	

	#tagline {	float: left;
				margin-left: 25%;
				margin-top: 2%;
				width: 75%;
								
				color: rgb(255,255,255);
				text-align: left;
				}

			#tagline h1 { margin-bottom: 2%;
							color: rgb(46,49,146) ; }

			#tagline h2 { 	float: left;
							font-size: 1.5em;
							font-weight: bold;
							margin-right: 3%; }


	section {	/*border: solid rgb(209,210,212) 2px; */
				border: solid rgb(46,49,147) 1px;
				
				background-color: rgb(209,210,212);
				border-radius: 10px;
				padding: 1%;
				overflow-y: ;

				min-height: 30%;
							
				margin-bottom: 1%;

				

			}

		section h2 { background-color: rgb(46,49,146); 
						color: white;
						font-weight: bold;

						padding-left: 5%;
						line-height: 1.4em;
						margin-bottom: 3%;
					}
		.category_body ul { margin-left: 2.5%;
							display: block;
							float: left;
							 }			
		.category_body p, .category_body li { 	margin-left: 2.5%;
												padding-right: 2.5%; 
											}

		


/* Content classes */

	.logo_r { width: 22.5%;
			float: right;
			margin: 0% 1% 1% 1%;
			clear: both;	}

	.logo_s {	/*border: 1px solid rgb(46,49,146);*/
				padding: 6px;
				height: 40px;
				margin-top: 3%;
				margin-bottom: 1%;
				display: block;
			    margin-left: auto;
			    margin-right: auto ;
				}

	.logo_leftsmall { 	margin: 1%;
						padding-right: 15px;
						width: 33%; 
						float: left;}

	.logo_l {	margin: 1%;
				padding: 10px;
				width: 85%;
			}




	.image_r { width:25%;
				float: right;
				/*margin: 0% 1% 1% 1%;
				clear: both;*/

				}


	.image_l { width: 33%;
				float: left;
				margin: 0% 1% 1% 1%;
				clear: both;	}


	.system_summary { margin-bottom: 2%;

						 }

		.system_summary img { float: left; 
								max-width: 30%;
								margin-right: 10px; }

		.system_summary p { margin-bottom: 1%; }

	
	.flexcontainer { 	float: left;

						display: flex; 
						flex-direction: row;
						flex-wrap: 	wrap;	
						flex-grow: 	1;
						justify-content: space-around;

						max-width: 100%;

						}

	.verticalalign { align-items: center; }


	.cols_4 {			
				width: 22.5%;
				
			}



/* Named divs */


	#page_middle {	float: left;
					position: relative;
					width: 100%;

					overflow-x:hidden;
				}

	
	#page_categories { 	
						float: left;	
									
					}


	#more_detail {	float: left;
					margin-left: 2%;	

					transition: transform 0.75s;
					transform: scale(0);
												
				}

		
		#more_detail_header i { position: absolute;
								top: -15px;
								right: -45px;
								cursor: pointer; 
								}

		#more_detail_content { 
								width: 100%;
								overflow-y: auto;

								background-color: white;
								box-shadow: 5px 5px 2px grey;
								/*background-color: rgb(255, 255, 247);*/
								
								
								border: solid 1px grey;
								/*border-radius: 1em;*/
								padding: 1%;

							}


				#more_detail_content h4 { /*border-bottom: 1px solid rgb(46,49,146);*/
											color: white;
											background-color: rgb(46,49,146);
											padding: 6px;
											
											margin-top: 3%;
											margin-bottom: 2%;
											display: block;
											text-align: center;
										}

				#more_detail_content img { max-width: 60%;
											float: right;
											padding-left: 3%; }


						

/* Detail classes */

	
	.category_body { min-width: 100%; }
	.category_body h2 { border-radius: 5px; }
	
	.btnmore { 	text-align: left;
				float: left;								
				cursor: pointer;

				display: flex;
  				
  				max-height: 25px;
  				min-width: 100px;
  				margin-top: 10px;

  				background-color: #AAAFAB;
				border-radius: 5px;
				padding: 3px;
				padding-left: 28px;

				box-shadow: 2px 2px grey;
			}

		.btnmore p { 	
						color: white;	
						font-style: italic;
						
						font-size: 0.9rem;


					}

			.more_triangle{
							transform-origin:25% 50%;
						  border: 8px solid transparent;
						  border-width: 8px 12px;	
						  border-left-color: white;
						  margin-left: 15px;
							width: 0;
							height: 0;
							display: inline-block;
							text-align: center;
							content: '';
							color: #AAAFAB;
						   -webkit-transition:all .5s ease;  
						   -moz-transition:all .5s ease;  
						   -o-transition:all .5s ease;  
						   transition:all .5s ease; 
							/* position: absolute;*/
							margin-top: 1px;
					
					}

					.rotate90deg { transform: rotate(90deg); }
					.rotate180deg { transform: rotate(180deg); }



	section .detail_content { 	display: none;
								
								margin-left: 2.5%;
								
							}

		section .detail_content h4 { 	margin-top: 2%;
										margin-bottom: 1%;
										
										color: black;
										text-decoration: underline;
										
										text-align: center;
									}		

		section .detail_content ul { margin-left: 5%; }						
		section .detail_content li { list-style: square; }





/* Slidein classes */


	.width_100pc {	width: 100%;
					 }

	.width_50pc	{ width: 46%;	
					margin: 0.5%;														
				}

	.width_0pc { width: 0%;	
					}


	/*.slideaway { animation: slideleft 3s ease-in-out; }
	.slidein { animation: slideright 3s ease-in-out; }*/

	.expandable_1 { display: none;
					/*transform: scale(0);*/
					opacity: 0;

					
					/*animation: expand_slow 0.75s ease-in-out;	*/
					}

	.shrinkable_1 { animation: shrink_slow 0.75s ease-in-out; }

	.expanded {	display: block;
			    
			    opacity: 1;
			    
	    	  }








		@keyframes expand_fast {
		  
		  1% {
		    display: block;
		    opacity: 0.5;
		    transform: scale(0.95);
		  }
		  
		  100% {
		    opacity: 1;
		    transform: scale(1);
		  }
		}


		@keyframes expand_slow {
		  0% {
		    display: none;
		    opacity: 0;
		  }
		  1% {
		    display: block;
		    opacity: 0;
		    transform: scale(0);
		  }
		  
		  100% {
		    opacity: 1;
		    transform: scale(1);
		  }
		}


		@keyframes shrink_slow {
		  0% {	opacity: 1;
		    	transform: scale(1);		    
		  	}

		  99% {
				    display: block;
				    opacity: 0;
				    transform: scale(0);
		  		}
		  
		  100% {
				  	display: none;
				    opacity: 0;		    
		  }
		}



		@keyframes slideright
		{
			0% {
					opacity: 1;
			}
			100% {
					opacity: 1;
					-webkit-transform: translate3d(50%, 0, 0);
					transform: translate3d(50%, 0, 0);
			}
		}

		@keyframes slideleft
		{
			0% {
					transform: scaleX(1);
			}
			100% {
					transform: scaleX(0.5);
					/*-webkit-transform: translate3d(-25%, 0, 0);
					transform: translate3d(-25%, 0, 0);*/
			}
		}




/* Footer */

footer { 	width: 100%;
			float: left;
			
			height: 10em;
						
			margin-top: 1%;
						
		}


		#footerimage {	position: relative; 
		 				overflow: hidden;
		 				}

		#footerimage:after { 	position: absolute;
								content : "";
								display: block;

								top: 0;
								left:0;
								width: 100%;
								height: 100%;
								
								background-size: cover;

								background: url("../images/graduated_footer.png") no-repeat;
								/*background: url("../images/pad_and_pen_background.png") no-repeat;*/
								opacity: 0.6;
								z-index: -1; }

		#footer_items {	position: relative;
						margin-top: 1%;
						margin-left: 1%;
						width: 98%;

						}

		footer img, footer a, footer p, footer i { float:left; 
													clear: right;
													margin: 0px 3px 0 3px;
													color: rgb(6,20,121);
													word-wrap: break-word;	
													font-size: 0.9em;												
												}

			.textbeside { 	clear:left; 
							display: table-cell;
    						vertical-align: middle;}

		#acknowledgment { 	width: 100%;
							min-height:20px;
							
						  	display: flex;
						  	align-items: center;
						  	justify-content: center;
						}

			#acknowledgment p {	font-size: 0.8em;
								font-style: italic;
								font-weight: bold;
								color: rgb(237, 28,36); 
								
								padding: 0.25em;
							}







/* media font-feature-settings: */


	@media screen and (max-width: 1020px) 	/* iPad portrait */
	
		{


			h1 { font-size: 2em; }

			#tagline em { display: none; }		/* hide the "Ltd" when space is tight */

		}


	@media screen and (max-width: 820px) 	/* iPad portrait */
	
		{

		html { font-size: 90%; }

		p { font-size: 0.9em }

		#headerimage:after { opacity: 0.66;  }

		#logo { float: none; }
		
		#tagline {	margin-left: 2%;
					width: 100%;
					font-size: 0.9rem;
					color: rgb(46,49,146);					
				}

			#tagline em { display: none; }		/* hide the "Ltd" when space is tight */



		#footerimage:after { opacity: 0.33; }					
		
		#footer_items { left: 0;
						width: 100%; }

		

		.width_50pc { width: 96%; }
	    
		}



	@media screen and (max-width: 400px) 	/* phone */
	
		{
			html { font-size: 80%; }

			#headerimage:after { opacity: 0.5;  }


			.cols_4 { width: 98%; 
						background-color: rgb(209,210,212);
						border-top: solid 1px white;
					}

			#footerimage:after { visibility: hidden; }	

		}