/* <!-- [Main Rules] --> */

	@media (min-width: 767px) {
		
		.prothumb, .prothumb > a > img {
			height: 200px;
		}
				
	}
	
	@media (max-width: 767px) {
		
		.prothumb, .prothumb > a > img {
			max-height: 250px;
		}
				
	}

	.prothumb {
		text-align: center;
		min-height: 200px;
		position: relative;
		border-radius: 0px;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.6);
		-webkit-user-select: none;
		   -moz-user-select: none;
	}
	
	.prothumb > span {
		display: none;
		position: absolute;
		left: 0;
		top: calc(45% + 1vw);
		width: 100%;
		color: rgba( 255, 255, 255, 0.9);
		background-color: rgba(0, 0, 0, 1);
		cursor: pointer;
		pointer-events: none;
	}
	
	.prothumb:hover > span {
		display: inline;
	}
	
	.prothumb > a, .prothumb:focus > a {
		outline: none;
	}
	
	.prothumb > a > img, .prothumb:focus > a > img {
		border-radius: 0px;
		min-height: 200px;
		width: 100%;
	}

	.prothumb:hover {
		background-color: #000;
	}
	
	.prothumb:hover > a > img{
		opacity: 1;
	}
	
/* The main non-Mobile rule */

	@media (min-width: 768px) {

			#JoomComponent {
				margin: 0 -10px; /* counter bootstrap's 20px side padding */
				min-height: 200px;
			}
			
			#main_cont {
			padding-top: 20px;
		}
	}

/* Size control section */

	@media (min-width: 768px) and (max-height: 964px) {
		#article_content {min-height: 500px;}
	}

	@media (min-width: 768px) and (max-height: 974px) and (min-height: 520px) {
		#JoomComponent {
			padding: 0;
		}
	}
	
	@media (min-width: 768px) and (min-height: 975px) {
		#JoomComponent {
			padding-top: 40px;
		}
	}
	
	@media (min-width: 768px) and (max-height: 519px) {
		#JoomComponent {
			padding: 0;
		}
	}

	@media (min-width: 768px) and (max-height: 639px) {
		#article_content {min-height: 400px;}

	}

		/* lower article_content's scale under 870px for desktop size */
	@media (min-width: 980px) and (max-height: 1159px) and (min-height: 1081px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%) scale(0.95);
		}
	}

	@media (min-width: 980px) and (max-height: 1080px) and (min-height: 880px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.9);
		}
	}

	@media (min-width: 980px) and (max-height: 879px) and (min-height: 800px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.8);
		}
	}
	
	@media (min-width: 980px) and (max-height: 799px) and (min-height: 740px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.75);
		}
	}

	@media (min-width: 980px) and (max-height: 739px) and (min-height: 640px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.7);
		}
	}

	@media (min-width: 980px) and (max-height: 639px) and (min-height: 610px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -48%) scale(0.7);
		}
	}

	@media (min-width: 980px) and (max-height: 609px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -49%) scale(0.6);
		}
	}
	
	@media (min-width: 768px) and (max-height: 549px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -49%) scale(0.5);
		}
	}

	@media (min-width: 768px) and (max-height: 479px) {
		#article_content {
			position: static;
			transform: scale(0.7);
			transform-origin: top;
			
		}
	}

		/* lower article_content's scale under 870px for my tablet sizes (under 980px width) */
	@media (max-width: 979px) and (min-width: 768px) and (min-height: 1160px) {
	
		#article_content {	
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%);
		}
	}

	@media (max-width: 979px) and (min-width: 768px) and (max-height: 1159px) and (min-height: 1081px) {
	
		#article_content {	
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%) scale(0.9);
		}
	}

	@media (max-width: 979px) and (min-width: 768px) and (max-height: 939px) and (min-height: 870px) {
		#article_content {
			transform: scale(0.9);
			transform-origin: top;
		}
		
		#JoomComponent > div > div:nth-child(2) {
		    height: 200px;
		}
	}

	@media (max-width: 979px) and (min-width: 768px) and (max-height: 869px) and (min-height: 790px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.8);
		}

		#JoomComponent > div > div:nth-child(2) {
		    height: 200px;
		}
	}

	@media (max-width: 979px) and (min-width: 768px) and (max-height: 789px) and (min-height: 635px) {
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.7);
		}

		#JoomComponent > div > div:nth-child(2) {
		    height: 200px;
		}
	}

	@media (max-width: 979px) and (min-width: 768px) and (max-height: 634px) {
		#article_content {
			transform: scale(0.7);
			transform-origin: top;
		}

		#JoomComponent > div > div:nth-child(2) {
		    height: 200px;
		}
	}
	
		/* Desktop */
	@media (max-width: 1119px) and (min-width: 980px) and (min-height: 1201px) {
	
		#site_head {
			transform: translateZ(100px);
		}
		
		footer {
			transform: translateZ(100px);
		}
	
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%) scale(1);
		}
	
	}

	@media (max-width: 1199px) and (min-width: 1120px) and (min-height: 1224px) {
	
		#site_head {
			transform: translateZ(100px);
		}
		
		footer {
			transform: translateZ(100px);
		}
	
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%) scale(1.15);
		}
	
	}

		/* Bigger screens like 2K and 4K */
	@media (min-width: 980px) and (min-height: 1101px) {
	
		#JoomComponent {
			padding-top: 60px;
		}
	
	}
	
	@media (min-width: 1200px) and (min-height: 1201px) {
	
		#site_head {
			transform: translateZ(100px);
		}
		
		footer {
			transform: translateZ(100px);
		}
	
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%);
		}
	
	}

	@media (min-width: 1400px) and (min-height: 1201px) {
	
		#site_head {
			transform: translateZ(100px);
		}
		
		footer {
			transform: translateZ(100px);
		}
	
		#article_content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%) scale(1.1);
		}
	
	}
	
	@media (min-width: 1440px) and (min-height: 1275px) {
	
		#article_content {
			transform: translate(-50%, -60%) scale(1.2);
		}
	
	}
		
	@media (min-width: 1600px) and (min-height: 1400px) {
	
		#article_content {
			transform: translate(-50%, -60%) scale(1.35);
		}
	
	}
	
	@media (min-width: 2550px) and (min-height: 1460px) {
	
		#article_content {
			transform: translate(-50%, -60%) scale(1.45);
		}
	
	}

	@media (min-width: 3000px) and (min-height: 1740px) {
	
		#article_content {
			transform: translate(-50%, -60%) scale(1.8);
		}
	
	}

	@media (min-width: 3820px) and (min-height: 2120px) {
	
		#article_content {
			transform: translate(-50%, -60%) scale(2.3);
		}
	
	}
	
	@media (min-width: 4086px) and (min-height: 2300px) {
	
		#article_content {
			transform: translate(-50%, -60%) scale(2.5);
		}
	
	}
		

/* Microfoot Override */

	@media (max-height: 1080px) and (min-width: 768px) {
		footer {
			position: fixed;
			bottom: 0;
			width: 100%;
		}
		
		#shadow_line {display: none;}
		
		#page_foot {display: none;}
		
		.microfoot {
			display: block;
			position: fixed;
			bottom: 30px;
			left: 0px;
			width: 100%;
			background-color: #fdfdfd;
			padding-bottom: 2px;
		}
	}