/* ===========
 * WHAT WE DO!
 *
 * Tile Shortcode CSS
 *
 */
 

/*	TILE SHORTCODE	
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.jpro-tile-container + br { display: none; }
	.jpro-tile {
		margin-bottom: 25px;
	}


/*	TILE TEXT OPTIONS	
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	.jpro-tile.left {text-align:left;}
	.jpro-tile.right {text-align:right;}
	.jpro-tile.center {text-align:center;}


/*	TILE LAYOUT TYPE CLASSES
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	/* TILE WITH BACKGROUND IMAGE 
	*/
		section.jpro-tile-container.image-area {
			background-size: cover !important;
		}
		section.jpro-tile-container.image-area .jpro-tile {
			min-height: 260px;
			margin-bottom: 0px;
			position:relative;
		}
		section.jpro-tile-container.image-area .jpro-tile h3 {
			position: absolute;
			top: 0px;
			bottom: 0px;
			right: 0px;
			left: 0px;
			width: 50%;
			  min-width: 170px;
			height: 50%;
			margin: auto;
			padding: 10px 0px 0px 0px;
			overflow: visible;
			text-shadow: 0px 0px 20px #000;
		}
			@media only screen and (max-width: 1100px) {
				section.jpro-tile-container.image-area .jpro-tile h3 { font-size: 1.2em; }
			}

/*	TILE CONTENT TYPE CLASSES
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	
	/* TILE WITH TEAM CLASS 
	*/
		section.jpro-tile-container.team .jpro-tile {
		  text-align: left;
		}
		section.jpro-tile-container.team img {
		  float: right;
		  max-width: 300px;
		  width: 50%;
		  padding: 35px 0px 0px 20px;
		}	


	/* TILE WITH CLIENT CLASS 
	*/
		.clients .jpro-tile {
		text-align: left;
		min-height: 593px;
		}
		.clients .jpro-tile h3 {
		display: none;
		}
		.clients .jpro-tile img {
		margin: 0px auto;
		display: block;
		}
		section.clients + br {
		display: none;
		}
		@media only screen and (max-width: 800px) {
			.clients .jpro-tile {
			min-height: 0px;
			}
			.clients .jpro-tile img {
			max-width: 150px;
			}
		}
	

		
/*	MASONRY
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.masonry .jpro-tile {
  margin-bottom: 0px;
}

	@media only screen and (max-width: 580px) {
		section.grid {
		  height: auto !important;
		}
		.grid .masonry {
		  width: 100%;
		  height: auto;
		  position: relative !important;
		  display: block;
		  left: 0px !important;
		  top: 0px !important;
		  float: none;
		}
	}
		
/*	MOBILE VERSION CSS
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	@media only screen and (max-width: 580px) {
		.displayComp {
			visibility:hidden;
		}
		.displayMobile {
			visibility: visible;
		}
	}


/*	TILE RESPONSIVE TABLES
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.jpro-tile table { 
		width: 100%; 
		font-size:0.9em; 
		border-color: #ccc; 
		border-style: solid; 
		border-width: 0px; 
	}
	.jpro-tile table tr th,
	.jpro-tile table tr td {
		border-color: #ccc; 
		border-style: solid; 
		border-width: 0px; 
	}
	.jpro-tile table tr th { 
		border-width: 0px 1px 1px 0px; 
		text-align: center; 
		text-transform:uppercase;
	}
	.jpro-tile table tr th:first-child { 
		text-align: left; 
	}
	.jpro-tile table tr th:last-child { 
		border-width: 0px 0px 1px 0px;
	}
	.jpro-tile table tr td { 
		text-align: center; 
		border-width: 0px 1px 0px 0px;
	}
	.jpro-tile table tr td:first-child { 
		text-align: left; 
		font-weight: bold; 
	}
	.jpro-tile table tr td:last-child { 
		border-width: 0px;
	}

	@media
		only screen and (max-width: 760px),
		(min-device-width: 768px) and (max-device-width: 1024px)  {

			/* Force .jpro-tile table to not be like .jpro-tile tables anymore */
			.jpro-tile table, .jpro-tile thead, .jpro-tile tbody, .jpro-tile th, .jpro-tile td, .jpro-tile tr {
				display: block;
			}

			/* Hide .jpro-tile table headers (but not display: none;, for accessibility) */
			.jpro-tile thead tr,
			.jpro-tile tr th {
				position: absolute;
				top: -9999px;
				left: -9999px;
			}

			.jpro-tile tr { border: 1px solid #ccc; }

			.jpro-tile td {
				/* Behave  like a "row" */
				border: none;
				border-bottom: 1px solid #eee;
				position: relative;
				padding-left: 50%;
			}
			
			.jpro-tile td:before {
				/* Now like a .jpro-tile table header */
				position: absolute;
				/* Top/left values mimic padding */
				top: 6px;
				left: 6px;
				width: 45%;
				padding-right: 10px;
				white-space: nowrap;
			}
		}

		
/* TABLE ALTERNATE HEADINGS NEED TO BE ENTERED PER-SITE
@media
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {

		td:nth-of-type(1):before { content: "First Name"; }
		td:nth-of-type(2):before { content: "Last Name"; }
		td:nth-of-type(3):before { content: "Job Title"; }
		td:nth-of-type(4):before { content: "Favorite Color"; }
		td:nth-of-type(5):before { content: "Wars of Trek?"; }
		td:nth-of-type(6):before { content: "Porn Name"; }
		td:nth-of-type(7):before { content: "Date of Birth"; }
		td:nth-of-type(8):before { content: "Dream Vacation City"; }
		td:nth-of-type(9):before { content: "GPA"; }
		td:nth-of-type(10):before { content: "Arbitrary Data"; }
	}