/*	 Zacher awooga Tiburzi */
 
 
 

/* ------------------------------------- NOTES  -------------------------------------- */ 
/*    title logo                                           */
/*    meta data for web page  							   */
/*    extra back button on the python 					   */
/*    mobil page back and forth  						   */
/*    first letter of the article title is outlin in blue  */


 /*	border-top-width: 0px:
	border-top-style: none;
	border-top-color: rgba(255,50,50,1);
	background-color: rgba(255,253,253, 1);
	font-family:      "Garamond", serif;
	font-size:        14px;*/
/*	font-weight:      normal;	*/		/* normal | bold */
/*	font-style:       normal;	*/		/* normal | italic | oblique */
/*	text-transform:	  normal;	*/		/* normal | uppercase | lowercase | capitalize */
/*	text-decoration:  none;  	*/	    /* none   | underline | overline | linethrough | blink */

/*font-family: "Arial", "Tahoma", "Verdana", "Calibri", "Candara", "Century Gothic", "Helvetica", "Segoe UI", "Trebuchet MS", "Impact", sans serif;
font-family: "Consolas", "Courier New", monospaced;
font-family: "Times New Roman", "Georgia", "Garamond", "Cambria", "Book Antiqua", Serif; */



/* ------------------------------------------------------------------------------------------ */
/* --------------------------------- Attribute Qualities  ----------------------------------- */
/*-ms-@viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 3;
    user-zoom: fixed;
}
@viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 3;
    user-zoom: fixed;
}*/ 

				
	





/* ------------------------------------------------------------------------------------------ */
/* --------------------------------- Attribute Qualities  ----------------------------------- */
			a:{}

			a:link {		 		  /* Links are not underline and have a blck text */
				color: 	          rgba(10,10,10,1);
				text-decoration:  none;}

			a:visited {		 	  /* Visited links are black */
				color:            rgba(10,10,10, 1);}

			a:hover {		 	  /* Does nothing */
 				background-color: rgba(255,253,252,1);}

			a:active {	  /* Does nothng  */
				color: 			  rgba(255,253,252,1);
				background-color: rgba(255,253,252,1);}
                
            /* a:focus {	  
				color: 			  rgba(255,253,252,1);
				background-color: rgba(255,253,252,1);} */

								  /* Hover over text blocks and the bacground is slight red */
			#resumeColumb1:hover, #resumeColumb2:hover, #resumeColumb3:hover, 
								  #resumeColumb4:hover, #projectTextColumn:hover {
				background-color: rgba(255,100,100, .05);}

			a.strikeHover0:hover { /* Line through text on hover */ 
				text-decoration:  line-through;}

			a.hoverTitle:hover {	  /* Zacher Tiburzi is blue on hover */
				color:            rgba(20,20,240, 1);}




	
/* ------------------------------------------------------------------------------------------ */
/* --------------------------------- Formating Selectors ------------------------------------ */
			.inLine {		
				display:    inline;}

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

			.hidden { 		 
				visibility:	hidden; 
				margin:     0px;
				padding:    0px;}

			.clearLeft0 { 		 
				clear:	   left;}

			.clearLeft1 {		 
				clear:	   left;
				float:     left;}
		
			.containerBuffer {		 
				width:     100%;   height:  75px;		  
				margin:    0px;    padding: 0px;}
				
			.floatRight {
				float:     right;}
		
			.floatLeft {
				float:     left;}

			.clearLeft {
				clear:     left;}
		

		
		
		
/* ------------------------------------------------------------------------------------------ */
/* -----------------------------------  Image Filters  -------------------------------------- */
			.red {
				background-color:	rgba(250,75,50,1);}

			.green {
				background-color:	rgba(50,250,50,1);}

			.blue {
				background-color:	rgba(50,50,250,1);}
                
            .yellow1{
				background-color: rgba(255,235,100, .3);}

			.redBrown {
				color:              rgba(200,40,40,.85);}

			.grey {
				color:              rgba(0,0,0,.1);
				color:              rgba(15,15,15,1);}

			.grey0 {
				color:              #403c39;}
		
			.blackBackground {
				background-color:   #222222;}

                
                
			.imageFilter0 {		/* INDIVIDUAL FILTER OF IMAGES, color=  */	
				filter:     blur(0px) brightness(100%) contrast(130%) drop-shadow(0px 0px 0px red) grayscale(0%) 
						    hue-rotate(0deg) invert(0%) opacity(100%) saturate(120%) sepia(0%); }

			.imageFilter1 {		/* INDIVIDUAL FILTER OF IMAGES, color=  */
				filter: 	blur(0px) brightness(100%) contrast(140%) drop-shadow(0px 0px 0px red) grayscale(0%) 
							hue-rotate(0deg) invert(0%) opacity(100%) saturate(120%) sepia(0%); }

			.imageFilter2 {		/* INDIVIDUAL FILTER OF IMAGES, color=  */
				filter: 	blur(0px) brightness(100%) contrast(140%) drop-shadow(0px 0px 0px red) grayscale(0%) 
							hue-rotate(0deg) invert(0%) opacity(100%) saturate(120%) sepia(0%); }
                    
			.imageFilter5 {		/* INDIVIDUAL FILTER OF IMAGES, color=  */
				filter: 	blur(0px) brightness(120%) contrast(110%) drop-shadow(0px 0px 0px red) grayscale(0%) 
							hue-rotate(0deg) invert(0%) opacity(100%) saturate(110%) sepia(0%); }

			.imageFilter6 {		/* INDIVIDUAL FILTER OF IMAGES, color=  */
				filter: 	blur(0px) brightness(110%) contrast(110%) drop-shadow(0px 0px 0px red) grayscale(0%) 
							hue-rotate(0deg) invert(0%) opacity(100%) saturate(110%) sepia(0%); }

			.imageFilter7 {		/* INDIVIDUAL FILTER OF IMAGES, color=  */
				filter: 	blur(0px) brightness(130%) contrast(120%) drop-shadow(0px 0px 0px red) grayscale(0%) 
							hue-rotate(0deg) invert(0%) opacity(100%) saturate(110%) sepia(0%); }

			.imageFilter8 {		/* INDIVIDUAL FILTER OF IMAGES, color=  */
				filter: 	blur(0px) brightness(110%) contrast(120%) drop-shadow(0px 0px 0px red) grayscale(0%) 
							hue-rotate(0deg) invert(0%) opacity(100%) saturate(200%) sepia(0%); }

			.imageFilter9 {		/* INDIVIDUAL FILTER OF IMAGES, color=  */
				filter: 	blur(0px) brightness(100%) contrast(120%) drop-shadow(0px 0px 0px red) grayscale(0%) 
							hue-rotate(0deg) invert(0%) opacity(100%) saturate(150%) sepia(0%); }
 
			.imageFilter10 {		/* INDIVIDUAL FILTER OF IMAGES, color=  */
				filter: 	blur(0px) brightness(110%) contrast(110%) drop-shadow(0px 0px 0px red) grayscale(0%) 
							hue-rotate(0deg) invert(0%) opacity(100%) saturate(110%) sepia(0%); }
            
                
                
                
                
/* ---------------------------------------------------------------------------------------------- */
/* --------------------------------  SVG Color Matrix Values  ----------------------------------- */
            /* Key */
            /* R G B A 1 */
            /* 1 0 0 0 0 // R = 1*R + 0*G + 0*B + 0*A + 0         */
            /* 0 1 0 0 0 // G = 0*R + 1*G + 0*B + 0*A + 0         */
            /* 0 0 1 0 0 // B = 0*R + 0*G + 1*B + 0*A + 0         */
            /* 0 0 0 1 0 // A = 0*R + 0*G + 0*B + 1*A + 0         */
            /* shadow and highlight tones via the alpha channels */
            /* The fourth row affects overall alpha channels, while the 
               fourth column affects luminosity on a per-channel basis. */
                 
                 
                              
            /* Normal, equal rgba values */
            /* values='1 0 0 0 0   0 1 0 0 0   0 0 1 0 0   0 0 0 1 0' */
       
  
            /* Lighten, equal rgba values */
            /* values='1.5 0 0 0 0   0 1.5 0 0 0   0 0 1.5 0 0   0 0 0 1 0' */
            
            /* Darken, equal rgba values */
            /* values='.5 0 0 0 0   0 .5 0 0 0   0 0 .5 0 0   0 0 0 1 0'  */
            
            /* opacity, equal rgba values */
            /* values='1 0 0 0 0   0 1 0 0 0   0 0 1 0 0   0 0 0 .5 0' */
            
            /* Hard green, increases green opacity to be on the same level as overall opacity */
            /* values='1 0 0 0 0   0 1 0 1 0   0 0 1 0 0   0 0 0 1 0' */
            
            /* Hard Yellow, increases green opacity to be on the same level as overall opacity */
            /* values='1 0 0 1 0   0 1 0 1 0   0 0 1 0 0   0 0 0 1 0' */
            
            /* blue-shadow-magenta-highlight */
            /* We retain the red values, yet override any red in the shadows so the shadow colors 
               all become blue, while the lightest values that have red in them become a mix of blue 
               and red (magenta). */
            /* values='1 0 0 0 0   0 0 0 0 0   0 0 1 1 0   0 0 0 1 0' */
            
            /* blue-shadow-magenta-highlight2 */
            /* values='1 0 0 0 0   0 0 0 0 0   0 0 1 .5 0   0 0 0 1 0' */
            
            
            /* Red-Overlay,  */
            /* values='1 0 0 0 0   0 0 0 0 0   0 0 1 -1 0   0 0 0 1 0' */
            /* identical red -Overlay,  */
            /* values='1 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 1 0' */
            
            /* elim blue */
            /* convert blue to white */
            /* values='1 0 0 0 0   0 1 0 0 0   0 0 1 0 0   0 0 -2 1 0' */
            
            
            /* no g red */
            /* red is 100% on the g channel, so g channel looks red, g channel luminosity is lost */
            /* values='1 1 0 0 0   0 0 0 0 0   0 0 1 0 0   0 0 0 1 0' */
            
            /* no g magenta */
            /* no g channel, the g channel is majenta becaudse the it is equal parts of the red and blue*/
            /* values='1 1 0 0 0   0 0 0 0 0   0 1 1 0 0   0 0 0 1 0' */
            
            /* yes g colored majenta*/
            /* g channel is shared by the red and blue values, sums to majenta*/
            /* values='1 1 0 0 0   0 1 0 0 0   0 1 1 0 0   0 0 0 1 0' */
            
            
            
            /* Red, equal rgba values */
            /* values='1 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 1 0' */
            
            /* Green, equal rgba values */
            /* values='0 0 0 0 0   0 1 0 0 0   0 0 0 0 0   0 0 0 1 0' */
            
            /* Blue, equal rgba values */
            /* values='0 0 0 0 0   0 0 0 0 0   0 0 1 0 0   0 0 0 1 0' */
            
            /* Yellow= r+g, equal rgba values */
            /* values='1 0 0 0 0   0 1 0 0 0   0 0 0 0 0   0 0 0 1 0' */
            
            /* Magenta, equal rgba values */
            /* values='1 0 0 0 0   0 0 0 0 0   0 0 1 0 0   0 0 0 1 0' */
            
            /* Cyan, equal rgba values */
            /* values='0 0 0 0 0   0 1 0 0 0   0 0 1 0 0   0 0 0 1 0' */
            
            /* Lime, equal rgba values */
            /* values='1 0 0 0 0   0 2 0 0 0   0 0 0 .5 0  0 0 0 1 0' */
        
            /* Peachy, equal rgba values */
            /* values='1 0 0 0 0   0 .5 0 0 0  0 0 0 .5 0  0 0 0 1 0' */
        
            /* Grey on Light, equal rgba values */
            /* values='1 0 0 0 0   1 0 0 0 0   1 0 0 0 0   0 0 0 1 0' */
            
            /* Grey on Mid, equal rgba values */
            /* values='0 1 0 0 0   0 1 0 0 0   0 1 0 0 0   0 0 0 1 0' */
            
            /* Grey on Dark, equal rgba values */
            /* values='0 0 1 0 0   0 0 1 0 0   0 0 1 0 0   0 0 0 1 0' */
        
            
        
        
        
        
        
        
/* ------------------------------------------------------------------------------------------ */
/* ----------------------------------- General Page ----------------------------------------- */
			html {
				width:   100%;   height:  100%;
				margin:  0px;    padding: 0px;
				}	
		
			body {  
				width:   100%;   height:   100%;		 
				margin:  0px;    padding:  0px; 		 
				}




		
/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- Index header  ------------------------------------- */
			#headerContainer { 		 
				width:        85%;   height:  auto;		 	 
				margin-left:  7.5%;  padding: 0px;		 		   
				margin-top:   1%;
				position:     fixed; 		 	 
				}

			#headerNavigation { 	 	
				width:      auto;    height:  100%;			
				text-align: left;
				display:    inline-block; 
				}

			#headerNavList {	 
				width:           auto;   height:  auto; 
				margin:          0px;    padding: 0px;
				font-size:       14px;
				text-align:      left;
				list-style-type: none;
				visibility:      hidden;
				}

			#headerTitle {
				font-family:    "Book Antiqua", Serif;   /*  "Times New Roman", "Georgia", "Garamond", "Cambria", "Book Antiqua", Serif;  */
				font-weight:    bold;
				width:      	auto;   height:  auto;		
				margin:         0px;	padding: 0px;
				font-size:  	36px;
				float:          right; 	 
				}
 
 
 
 
 
/* ------------------------------------------------------------------------------------------ */
/* --------------------------------------- Index page --------------------------------------- */
			#indexPageBody { 
				background-color:   rgba(255,253,252,1);
				min-width:          1410px;  
				min-height:         800px;  
				overflow-y:         hidden;
				} 

			#indexPageImgContainer {		  
				width:       100%;    height:      auto;		
				text-align:  center;  
				}

			.indexPageBox {		
				width:    	  450px;	height:   825px;
				margin-top:   0px;		padding:  0px;
				margin-right: 15px; 
				display:      inline-block;
				position:     relative; 
				}

			.indexPageImage {	 
				width:   450px;     height:  825px;
				}

			.indexPageImageText {		/* Overlayed text on images*/
				width:         435px;   height:        auto;
				top:           38%;
				left:          5px;
				max-width:     450px;
				text-indent:   95px; 
				font-family:   "Verdana", serif;
				font-style:    italic;
				font-size:     48px;
				line-height:   1.4em;
				position:      absolute;
				color:         rgba(255,255,255,1);
				text-shadow:  -1px -1px 0 rgba(0,0,0,.3), 1px -1px 0 rgba(0,0,0,.3),
						      -1px  1px 0 rgba(0,0,0,.3), 1px  1px 0 rgba(0,0,0,.3);
				}		


		
		
		
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------  Resume page  --------------------------------------- */
			.resumePageBody {			
				background-color:   rgba(255,253,252,1);		
				width:   			100%;    height:   100%;  
				min-width:          500px;
				min-height:         800px; 
				overflow-y:         hidden;
				} 
		
			#resumeContainer {		 
				width:        2700px;   height:   87%;   
				}

			#resumeColumb1, #resumeColumb2, #resumeColumb3, #resumeColumb4 {	 
				height:       100%; 
				margin-right: 40px;
				float:        left;   
				}

			#resumeColumb1 {					 
				width:        500px;
				margin-left:  40px;
				}

			#resumeColumb2 {					 
				width:  600px; 
				}

			#resumeColumb3 {					 
				width:  1200px;		  
				}

			#resumeColumb4 {					  
				width:  600px;
				}

			.resumeSubColumb0, .resumeSubColumb1 {
				height:       auto;
				float:        left;
				margin-right: 20px;
				}

			.resumeSubColumb0 {					 
				width:        43%;
				}

			.resumeSubColumb1 {					 
				width:        53%;
				}

			.resumeSubContainer {				 
				width:  100%; height: auto;
				}

			#resumeTitle0 {				 
				font-size:      21px;
				text-align:     left; 
				font-weight:    600;    			
				}  

			#resumeTitle1 {				 
				font-size:   	16px;
				text-align:     left;   
				font-weight:    600;
				}

			.resumeParagraph {			
				font-size:       13.5px;
 				text-align:      left;	
				font-weight:     500;
				}
				
			#resumeTitle0, #resumeTitle1, .resumeParagraph {
				font-family:    "Helvetica";
				
				margin:	         0px;
				padding:         0px;
 				letter-spacing:  0.02em;
				word-spacing:    .2em;
				line-height:     1.5em;
				}

			.resumeContactPic {				 
				width:	        25px;
				height:	        25px;
				}	

			.resumeContactPic1 {				 
				width:	        25px;
				height:	        25px;
				}				
				
				
				
/* ------------------------------------------------------------------------------------------ */
/* ----------------------------------- Projects and labs  ----------------------------------- */
			#projectGridBody {
				background-color:   rgba(255,253,252,1);
				min-width:          510px;  
				overflow-y:         hidden; 
				}
		
			.projectGridContainer {		 
				width:   	  4500vh;  height:  73.5vh; 
				margin-left:  40px;

				-webkit-column-count: 39; 		/* Chrome, Safari, Opera */
				-moz-column-count:    39; 		/* Firefox */
				column-count:         39;

				-webkit-column-gap:   0px; 		/* Chrome, Safari, Opera */
				-moz-column-gap:      0px; 		/* Firefox */
				column-gap:           0px;

				column-width:         0px;
				-moz-column-width:    0px;
				-webkit-column-width: 0px;

				-moz-column-fill:     auto;		/* prevent glitch */
				overflow:             hidden;		/* stop the scroll bar from appearing */
				}
	
			.projectGridImage {		 
				width:          109.5vh;   height:    73vh;
				margin:		    0px;
				margin-right:   15px;
				margin-bottom:  15px;
				border-radius:  0px;
				
				float:          left;
				display:	    block;	 
				position:       relative;
				overflow-y:     hidden;
				overflow-x:     hidden;

				box-sizing:         border-box;	/*min and max height includes padding and border */
				-moz-box-sizing:    border-box; /*mozilla*/
				-webkit-box-sizing: border-box; /*other browsers*/
				}

			.projectImageText {							
				font-family:   "Verdana", Geneva, sans-serif;
				font-style:    italic;
				font-size:     14vh;
				line-height:   1.4em;
				position:      absolute;
				color:         rgba(255,255,255,1);
				
				text-shadow:  -1px -1px 0 rgba(0,0,0,.3), 1px -1px 0 rgba(0,0,0,.3),
						      -1px  1px 0 rgba(0,0,0,.3), 1px  1px 0 rgba(0,0,0,.3);
	
				top:          24%;
				left:         7.5%;
				width:        109.5vh;
				height:       auto;
				text-indent:  40px;
				margin:       0px;
				padding:      0px;
				position:     absolute;
				}
 
			@media screen and (min-height: 450px) and (max-height: 800px) {		/* When the page is 450 to 800px, middle range*/
				.projectGridContainer {   
					width:    1180vh;   height:   78vh; 
  
					-webkit-column-count: 20; 		/* Chrome, Safari, Opera */
					-moz-column-count:    20; 		/* Firefox */
					column-count:         20;

					-webkit-column-gap:   13px; 		/* Chrome, Safari, Opera */
					-moz-column-gap:      13px; 		/* Firefox */
					column-gap:           13px;
					}

				.projectGridImage {
					width:           55.5vh;   height:     37vh;
					margin-right:    2.75vh;
					margin-bottom:   2.75vh;
					} 	
			
				.projectImageText {
                    top:           21%;
					font-size:     8vh;
					max-width:     350px;
					text-indent:   30px;
					}
				}

			@media screen and (min-height: 801px) {		/* when the page is over 800 px large, top range */
				.projectGridContainer  {  
					width:       550vh;   height:   87vh; 
		 
					-webkit-column-count: 13; 		/* Chrome, Safari, Opera */
					-moz-column-count:    13; 		/* Firefox */
					column-count:         13;

					-webkit-column-gap:   18px; 		/* Chrome, Safari, Opera */
					-moz-column-gap:      18px; 		/* Firefox */
					column-gap:           18px;
					}

				.projectGridImage {
					width:         40.5vh;   height:   27vh;
					}

				.projectImageText {
					max-width:     450px;
					text-indent:   50px;
					font-size:     5.70vh;
 					}
				}




				
/* ------------------------------------------------------------------------------------------ */
/* ---------------------------------------- Art page ---------------------------------------- */
  			#interestsPageBody {												
				background-color:   rgba(255,253,252,1);  
				min-width:          1080px;  
				min-height:         800px;  
				overflow-y:         hidden; 
				}

			#interestsContainer { 		 											 
				width:        85%;   height:  85%;				
				margin:       0px;   padding: 0px;	
				margin-left:  7.5%;  
				margin-top:   1%;	 		 
				}	
		
			.interestsSubContainer {	 										 
				width:       37%;   height: auto;
				margin-left: 30%;
				margin-top:  20%;
				display:	 inline-block;
				min-width:   500px;
				max-width:   700px;
				}
				
			.interestsTitle {			 										
				font-size: 40px;
				width:     auto;   height: auto;
				float:     left;
				}
				
			.interestsTitle1 {			 										
				font-size: 40px;
				width:     auto;   height: auto;
				float:     right;
				}	
				
				
				
				
				
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------  Project page  -------------------------------------- */
  			#projectPageBody {  
				background-color:  rgba(255,253,252,1);  
 				overflow-y: 	   hidden;
				}
  
			#project1Container , #project2Container, #project3Container {								 	 
				height:         86vh;  width:    auto;
				margin:         0px;   padding:  0px;
				min-height:     400px;
				
				display: 	    flex;  
				flex-direction: row;
  				}

			#projectTextColumn, #project1PhotoColumn, #project2PhotoColumn, 
								#project3PhotoColumn {  
				margin-right: 0%;	 
				margin-left:  40px;
				padding:      0px;
				}

			#projectTextColumn {		              /* Text columb width starts at 440px, as the height shrinks the width gets larger to fit the text on the screen without scrolling  */															 
				height:  auto;
				flex:    0 0 440px; 
				
                -webkit-columns: 1;
                -moz-columns:    1;
				columns: 		 1;
					
				-moz-column-fill:  balance;
				column-fill:       balance;
                    
				-webkit-transition: .15s;         /* Chrome, Safari, Opera */
				transition: 		.15s;         /* BYO prefixes */
				}
				
			#projectTitle {				
				font-size:       21px;
				font-weight:     600;    			
				} 
                
            #projectTitle1 {				
				font-size:       16px;
				font-weight:     600;    			
				}
				
			.projectParagraph {			
				font-size:       13.5px;
				font-weight:     500;
				}

			#projectTitle, #projectTitle1, .projectParagraph {
				font-family:    "Helvetica";
				
				margin:	         0px;
				padding:         0px;
 				letter-spacing:  0.02em;
				word-spacing:    .2em;
				line-height:     1.5em;
				text-align:      left;	
				}
	
			#project1PhotoColumn, #project2PhotoColumn, #project3PhotoColumn {				 				 													
				width:  	 auto;   height: auto;
				padding-top: 15px;
				  
				white-space: nowrap;
				display:     inline-block;
				}  
 
			.projImgContainer {
				display:  inline-block;
				position: relative;
				}
	 
			.projectImageRatio1, .projectImageRatio2, .projectImageRatio3, 
								.projectImageRatio4, .projectImageRatio5,
                                .projectImageRatio6 {
				margin-right: 25px;
				}

			.projectImageRatio1 {		/* 3264 * 2448 = 1.33 RATIO. Landscape, and large.*/
				height:	        80vh;
 
				display:        inline-block;
				float:          none !important;
				vertical-align: top;  
				
                min-width:      400px;
				min-height:     300px;
				}

            .projectImageRatio2 {		/* (3264 * 2448) ^-1  = .75 RATIO. Portraite, and large.*/
				width:	   80vh;
				height:    106vh;
				}
	
			.projectImageRatio3 {		/* (3264 * 2448)  = 1.33 RATIO. Landscape, and smaller.*/
				height:         37.3vh;
				
				display:        inline-block;
				float:          none !important;
				vertical-align: top; 
				
                min-width:      200px;
				min-height:     150px;
                
                padding-top:    0%
 				}

			.projectImageRatio4 {		/* (3264 * 2448) ^-1  .75 RATIO. Portraite, and small.*/
 				height:         80vh;
			
				display:        inline-block;
				float:          none !important;
				vertical-align: top;  

                min-width:      225px;
				min-height:     300px;
				}		
                
            .projectImageRatio5 {       /*   720*1280 = .56 Ratio. Portraite, and smaller. */    
                height:	        80vh;   
 
				display:        inline-block;
				float:          none !important;
				vertical-align: top;  
				
                min-width:      168px;
				min-height:     300px;
                
                padding-top:    0%
                }

            .projectImageRatio6 {       /*    1024 576 = 1.777 Ratio. Landscape, and smaller.*/    
                height:	        80vh;   
 
				display:        inline-block;
				float:          none !important;
				vertical-align: top;  
				
                min-width:      265px;
				min-height:     150px;
                
                padding-top:    0%
                }
                
			#project1VideoColumn {
				display:   inline-block;
				position:  relative;
                
				}
			
			
		
			
			
/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- Python header  ------------------------------------ */
			#borderTopPage {
				width:            100%;   height: 100%;
				background-color: #ff0;   /*mabye ?? 0fff00*/
				margin-bottom:    13px;
				padding-bottom:   9px;
				}
	
			/* Used for the newspaper page styling ie python*/
			#contentContainer {								
				border-top: 	0px   solid #0fff00;
				border-bottom: 	0px   solid #0fff00;
				width:          100%;       height: 100%;		
				overflow: 		auto;  
				}
			
			/* Used for the newspaper page styling ie python*/
			#pythonHeader {	
				border-bottom: 	 5px solid #222222;	
				width:           100%;     height: 90px;
				padding-bottom:  22px;				
				}

			/* Used for the newspaper page styling ie python*/
			#pythonHeaderTitle {
				font-family:      "acumin-pro",sans-serif; 
				font-weight:      bold;
				font-size:        54px;   
				background-color: #6cf;
				width:            auto;   height: 80%;
				padding-left:     .57%;
				padding-right:    .57%;
				float:            left; 
				}
		
			/* Used for the fancy github link*/
			#gitContainer, #hubContainer { 
				width:	 			275px;   height: auto;
				top:     			23px; 
				right:    			9.5%;
				float:    			right;
				position: 			absolute;
				transition:         all 0.05s ease-in-out;
				-webkit-transition: all 0.05s ease-in-out;
				}
		
			#gitContainer {
				z-index:  			1; 
				opacity:  			1; 
				}
		
			#hubContainer {
				z-index:  			0; 
				opacity: 			0;      
				}
		
 			#githubG, #githubI, #githubT, #githubH, #githubU, #githubB  {
				width: 31%;  height: 100%;
				float: left;
				}

 			#githubG, #githubI, #githubH, #githubU {
				margin-right:   2%;
				}

			.circle {
				border: 		  2px solid #ff2311;
				background-color: #ffffff;
				border-radius:    50%;
				width:  		  10px;     height:  10px;
				margin:			  1.0px;
				margin-right:     2px;
				}
		
			#gitContainer:hover  {
				opacity:   0; 
				}
		
			#gitContainer:hover + #hubContainer{
				opacity:   1;
				}
 
			#gitContainer:hover + #hubContainer > #githubH > .circle, 
						  #hubContainer > #githubU > .circle,
						  #hubContainer > #githubB > .circle {
				background-color: #ff2311;
				}

				
				
				
				
/* ------------------------------------------------------------------------------------------ */
/* --------------------------------------- Python page  ------------------------------------- */
 			.pythonPageBody {
				width:   80%;    height: 100%;
				margin:  0 auto; padding: 0;
				} 
		
		
			#projectArticleColumn1, #projectArticleColumn2 {   
				width: 		48%;   height: auto; 		
				}
	
			.articleFeature, .articleFeature1, .articleFeature2 {
				width:  		100%;    height:  140px;    
				margin-bottom:  0px;
				position:       relative;	 
				}
		
			.articleFeature1:after  {      /* border on the top*/
				border-top:     2px solid  #222222;
				width:          80%;       height: 0px; 
				padding-bottom: 0px; 
				left:           15%;    
				right:          0%;
				top:	        0%;     
				bottom:         0%;
				content:        "";
				position:       absolute;
				z-index: 	    1;   
				}
			
			.articleFeature2:after  { 	   /* border on the bottom*/
				border-bottom:  2px solid  #222222;
				width:   		80%;       height: 0px;   
				padding-bottom: 0px; 
				left:    		15%;    
				right:   	    0%;
				top:	 		auto;  
				bottom:         0%;
				content: 		"";
				position:       absolute;
				z-index: 		1;   
				}

			.articleCountContain {	
				width:   15%;  height: 100%;  	
				float:   left;  
				}	
	
			.articleCountStyle {
				font-family:   "Helvetica";	
				font-size:     35px;
				color:         #ff2311;		
				opacity:       .85;
				width: 		   auto;      height:  auto;	
				top:           35%;
				position:      relative;		
				text-align:    center;
				}
				
			.articleInfoContain {
				float:        left;
				width:        70%;  height: auto; 
				margin-right: 10%;
				}
		
			.articleTitle, .articleTitle1 {
				font-family:  "Helvetica","Arial","Helvetica Neue", "Verdana","Tahoma";
				font-weight:  bold;
				width:        auto;     height:auto;
				}
		
			.articleTitle {
				font-size:    54px; 
				color:        rgba(255, 250,250,1);
				top:		  25%;
				text-align:   center;
				position:     relative;	
				}
		
			.articleTitle1 {/* 28px  16px  */
				font-family:  "Helvetica";
				font-size:    28px;                  
				color:        rgba(5,5, 5,.85);
				top: 	      10%;
				margin-top:   3%;
				margin-left:  0%;
				font-weight:  bold;				
				}
		
			.articleDescript {
				font-family:      "Helvetica";
				font-size:        16px; 
				color:            rgba(5,5,5,.85);
				width: auto;      height:auto;
				margin-top:       3%;
				margin-left:      0%;
				}
		
			/* Bar graph   */
			.barGraphContain {	 
				width:  2.75%;	  	 
				height: 100%;
				float:  left;
				}
		
			.barGraph { 
				border:    2px   solid  #ff2311;
				opacity:   .95;
				width:     auto%;  height: 65%;
				left:      0%;    
				top:	   16%;    
				bottom:    0%;
				position:  relative; 
				}
		
			.barGraphPer0, .barGraphPer1, .barGraphPer2, .barGraphPer3,
						.barGraphPer4, .barGraphPer5, .barGraphPer6,
						.barGraphPer7, .barGraphPer8, .barGraphPer9,
						.barGraphPer10 {
				background: #ff2311;
				width:      100%;
				position:   relative;
				}
			.barGraphPer0 {
				height:  0%;		 
				top:	 100%;     
				}
			.barGraphPer1 {
				height:  10%;		 
				top:	 90%;    
				}
			.barGraphPer2 {
				height:  20%;		  
				top:	 80%;    
				}
			.barGraphPer3 {
				height:  30%;		 
				top:	 70%;    
				}
			.barGraphPer4 {
				height:  40%;		  
				top:	 60%;  
				}
			.barGraphPer5 {
				height:  50%;		  
				top:	 50%;    
				}	
			.barGraphPer6 {
				height:  60%;		 
				top:	 40%;    
				}
			.barGraphPer7 {
				height:  70%;		 
				top:	 30%;     
				}
			.barGraphPer8 {
				height:  80%;		 
				top:	 20%;     
				}
			.barGraphPer9 {
				height:  90%;		 
				top:	 10%;    
				}
			.barGraphPer10 {
				height:  100%;		 
				top:	 0%;     
				}
	
			#borderBottomPage {
				border-top: 	  1px solid #0fff00;
				background-color: #6cf;
				width:            auto%;    height: 100%;
				margin-top:       135px;
				margin-bottom:    10px;
				padding:	 	  50px;
				padding-top: 	  307px;
				}		
		
		
		
		
		
/* ------------------------------------------------------------------------------------------- */
/* ----------------------------------- Python Article Page  ---------------------------------- */
			#projectArticleColumn3 {
				width: 		  85%;   height: auto; 
				margin-left:  7.5%;     
				}	

			#projectArticleColumn4 {
				width: 		  65%;   height: auto; 
				margin-top:   7.5%;		 
				margin-left:  15%;    
				}
			
			.artilceTitle { 
				font-family: "Times New Roman", serif;
				font-size:   60px;
				text-align:  center;
				color:       rgba( 5, 5, 5, 1);
				}  
		
			.artilceTitle1 { 
				font-family:  "Times New Roman", serif;
				font-size:    36px;
				text-align:   center;	
				color:        rgba( 5, 5, 5, 1);
				}

			.paragraphText { 
				font-family:   "Book Antiqua";
				font-size:     18px;
				text-align:    left;	
				font-style:    normal;
				font-weight:   400;
				font-size:     18px;
				width:         auto;        height:auto;
				color:         rgba( 25, 25, 25, 1);				
				}
		
			#borderBottomPage {
				border-top: 	  1px solid #0fff00;
				background-color: #6cf;
				width:            auto%;    height: 100%;
				margin-top:       135px;
				margin-bottom:    10px;
				padding:	 	  50px;
				padding-top: 	  307px;
				}