.history-image{ position: relative; overflow: hidden; display: block; width: 100%; }
.show{ display: block; }
.hide{ display: none; }
@media only screen and (min-width: 1px) {
	.history-m{ position: relative; overflow: hidden; }
	
	.history-timeline-m{ display: none; }
	.history-nav-m{ display: none; }
	/** Mobile View Title "History" **/
	.history-title-m{ position: relative; overflow: hidden; background-color: #222222;
		font-size: 16px; font-weight: bolder; color: #5fe4a9; text-align: center; padding-top: 12px; padding-bottom: 10px; }
	
	.history-boxview-m{ position: relative; overflow: hidden; }
	.history-boxwrapper-m{ position: relative; overflow: hidden; }/** Wrapper for the list of History entries **/
	.history-box-m{ position: relative; overflow: hidden; }
	.history-potrait-m{ position: relative; overflow: hidden; width: 100%; }/** Consist of images for all 3 view ports **/
		.history-image-n, .history-image-d{	display: none; }
	.history-dialog-m{ position: relative; overflow: hidden; background-color: #7fe9ba; /** Consist of the History details **/
		padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 15px; }
		.history-heading-m{ position: relative; overflow: hidden; font-size: 50px; line-height: 44px; font-weight: bolder; color: #22875a; }
		.history-subheading-m{ position: relative; overflow: hidden; font-size: 18px; font-weight: bolder; color: #015530;  text-transform: uppercase; }
		.history-desc-m{ position: relative; overflow: hidden; font-size: 13px; color: #282828; }
}

@media only screen and (min-width: 768px) {
	.history-n{ width: 100%; }
	
	.history-timeline-n{ display: block; position: absolute; overflow: hidden; z-index: 500; top: 20px; background-color: #131313; 
		padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; } /** Consist of the list of years **/
		.history-timeline-button-n{ position: relative; overflow: hidden; float: left;  }
		.history-timeline-button-n.yearly.active{ background-color: #44cf91; }/*YEARS*/
		.history-timeline-button-n.yearly.active .history-timeline-button-a-n{ color: #093e27; }/*YEARS*/
		.history-timeline-button-n.yearly:hover{ background-color: #44cf91; }/*YEARS*/
		.history-timeline-button-n.yearly:hover .history-timeline-button-a-n{ color: #093e27; }/*YEARS*/
		
		.history-timeline-button-n.divider{ padding-left: 12px; padding-right: 12px; padding-top: 3px; padding-bottom: 2px; }/** <DIAMOND> **/
		.history-timeline-bullet-n{ position: relative; display: block; padding-top: 5px; }
		
		.history-timeline-button-a-n{ position: relative; overflow: hidden; display: block; 
			font-size: 12px; font-weight: bolder; letter-spacing: 0.25px; text-decoration: none; color: #48e19e; 
			padding-left: 7px; padding-right: 7px; padding-top: 3px; padding-bottom: 2px; }
		.history-timeline-button-n.lefty .history-timeline-button-a-n{ padding-top: 5px; padding-right: 12px; }/*LEFT ARROW <*/
		.history-timeline-button-n.righty .history-timeline-button-a-n{ padding-top: 5px; padding-left: 12px; }/*RIGHT ARROW >*/
		.history-timeline-arrow-n { position: relative; display: block; }/*ARROW image*/
		.history-timeline-arrow-n.active{ display: none; }/*ARROW image*/
		.history-timeline-button-a-n:hover .history-timeline-arrow-n.active{ display: block; }
		.history-timeline-button-a-n:hover .history-timeline-arrow-n.inactive{ display: none; }
		
	/** Navigation arrow all the way on the left and right **/
	.history-nav-n{ position: absolute; overflow: hidden; display: block; top: 40%; z-index: 1000; }
	.history-nav-a-n{ position: relative; overflow: hidden; display: block; text-decoration: none; }
	.history-nav-n.lefty{ left: 0px; }
	.history-nav-n.righty{ right: 0px; }
	.history-nav-n.lefty .history-nav-a-n{ padding-left: 13px; }
	.history-nav-n.righty .history-nav-a-n{ padding-right: 13px; }
	
	.history-nav-arrow-n{ display: block; }
	.history-nav-arrow-d{ display: none; }
	.history-nav-arrow-n.active{ display: none; }
	.history-nav-a-n:hover .history-nav-arrow-n.active{ display: block; }
	.history-nav-a-n:hover .history-nav-arrow-n.inactive{ display: none; }
	
	.history-title-n{ display: none; }
	
	.history-boxview-n{ width: 100%; }
	.history-boxwrapper-n{ position: relative; overflow: hidden; top: 0px; left: 0px; }/** Wrapper that acts like a flim strip **/
	.history-box-n{ float: left; }
	.history-image-m{ display: none; }
	.history-image-n{ display: block; }
	.history-dialog-n{ position: absolute; overflow: hidden; background-color: transparent; }
	.history-heading-n{ font-size: 60px; line-height: 60px; letter-spacing: 0.5px; color: #37bb81; }
	.history-subheading-n{ font-size: 16px; color: #015530; }
	.history-desc-n{ font-size: 13px; color: #282828; }
	
	/********************************/
	/** Individual History entries **/
	.history-box-n:nth-child(1) .history-dialog-n{ width: 200px; top: 20%; left: 20%; }
	
	.history-box-n:nth-child(2) .history-dialog-n{ width: 440px; top: 13%; left: calc(50% - 220px); text-align: center; }
	
	.history-box-n:nth-child(3) .history-dialog-n{ width: 195px; top: 16%; left: 10%; }
	
	.history-box-n:nth-child(4) .history-dialog-n{ width: 300px; top: 30%; left: calc(50% - 150px); text-align: center; }
	.history-box-n:nth-child(4) .history-dialog-n .history-subheading-n{ color: #ffffff; }
	.history-box-n:nth-child(4) .history-dialog-n .history-desc-n{ color: #e9e9e9; }
	
	.history-box-n:nth-child(5) .history-dialog-n{ width: 280px; top: 16%; right: 6%; }
	.history-box-n:nth-child(5) .history-dialog-n .history-subheading-n{ color: #ffffff; }
	.history-box-n:nth-child(5) .history-dialog-n .history-desc-n{ color: #e9e9e9; }
	
	.history-box-n:nth-child(6) .history-dialog-n{ width: 400px; top: 17%; left: 12%; }
	
	.history-box-n:nth-child(7) .history-dialog-n{ width: 355px; bottom: 22%; right: 20%; }
	.history-box-n:nth-child(7) .history-dialog-n .history-subheading-n{ color: #ffffff; }
	.history-box-n:nth-child(7) .history-dialog-n .history-desc-n{ color: #e9e9e9; }
	
	.history-box-n:nth-child(8) .history-dialog-n{ width: 305px; bottom: 18%; right: 3%; }
	.history-box-n:nth-child(8) .history-dialog-n .history-subheading-n{ color: #ffffff; }
	.history-box-n:nth-child(8) .history-dialog-n .history-desc-n{ color: #e9e9e9; }
	
	.history-box-n:nth-child(9) .history-dialog-n{ width: 290px; top: 14%; left: 8%; }
	.history-box-n:nth-child(9) .history-dialog-n .history-subheading-n{ color: #ffffff; }
	.history-box-n:nth-child(9) .history-dialog-n .history-desc-n{ color: #e9e9e9; }
}

@media only screen and (min-width: 1280px) {
	/** Hide all arrows associated to netbook **/
	.history-nav-arrow-n, .history-nav-arrow-n.active, .history-nav-arrow-n.inactive{ display: none; }
	.history-nav-a-n:hover .history-nav-arrow-n.active, .history-nav-a-n:hover .history-nav-arrow-n.inactive{ display: none; }
	
	.history-nav-arrow-d{ display: block; }
	.history-nav-arrow-d.active{ display: none; }
	.history-nav-a-d:hover .history-nav-arrow-d.active{ display: block; }
	.history-nav-a-d:hover .history-nav-arrow-d.inactive{ display: none; }
	
	.history-heading-d{ font-size: 80px; line-height: 75px; }
	.history-subheading-d{  font-size: 18px; }
	.history-desc-d{ font-size: 14px; }
	
	.history-timeline-d{ top: 30px; }
	.history-timeline-button-a-d{ font-size: 13px; }
	.history-timeline-button-d.divider{ padding-left: 18px; padding-right: 18px; }
	.history-timeline-button-d.lefty .history-timeline-button-a-d{	padding-right: 18px; padding-left: 11px; }
	.history-timeline-button-d.righty .history-timeline-button-a-d{	padding-left: 18px; padding-right: 11px; }
	
	/********************************/
	/** Individual History entries **/
	.history-box-d:nth-child(1) .history-dialog-d{ width: 335px; top: 25%; left: 17%; }
	.history-box-d:nth-child(2) .history-dialog-d{ width: 470px; top: 18%; }
	.history-box-d:nth-child(3) .history-dialog-d{ width: 217px; top: 19%; }
	.history-box-d:nth-child(4) .history-dialog-d{ width: 450px; top: 28%; left: calc(50% - 225px);	}
	.history-box-d:nth-child(5) .history-dialog-d{ width: 270px; top: 25%; right: 10%; }
	.history-box-d:nth-child(6) .history-dialog-d{ width: 465px; top: 17%; left: 12%; }
	.history-box-d:nth-child(7) .history-dialog-d{ width: 365px; bottom: 24%; right: 25%; }
	.history-box-d:nth-child(8) .history-dialog-d{ width: 340px; bottom: 26%; right: 12%; }
	.history-box-d:nth-child(9) .history-dialog-d{ width: 325px; left: 10%;}
}