/* WHAT WE DO!
 *
 * 1 Accordion Content
 * 2 BarGraph Animation
 * 3 CountUp, CountUp Thousands
 * 4 CalcSlide
 * 5 HTML5 Buttons
 * 6 Responsive, Vertically Aligned Images
 * 7 Tiles Shortcode
 * 8 Create Comp/Mobile Visibility Classes
 *
 */
 
.jpro-tabs.ui-tabs {
  border: 0px;
  padding: 0px;
}
.jpro-tabs ul.ui-widget-header {
  background: transparent;
  background-image: none;
  border: 0px;
  padding: 0px;
}
.jpro-tabs .ui-tabs-panel {
  border: 1px solid #ccc;
  border-radius: 0px 5px 5px 5px;
}

/* * * *  ACCORDION SHORTCODE * * * */

	.accordion-toggle {cursor: pointer;}
	.accordion-content {display: none;}
	.accordion-content.default {display: block;}

	h1.accordion-toggle,
	h2.accordion-toggle,
	h3.accordion-toggle,
	h4.accordion-toggle,
	h5.accordion-toggle,
	h6.accordion-toggle {
		margin: 0px 0px 5px 0px;
		padding: 0px 0px 5px 0px;
	}

	h4.accordion-toggle {
		margin: 5px 0px 5px 0px;
		padding: 7px 7px 7px 0px;
		border-bottom: 1px solid #6E6E6E;
		-webkit-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
		-webkit-transition-property: -webkit-all;
		-moz-transition-property: -moz-all;
		-o-transition-property: -o-all;
		transition-property: all;
	}
		div#accordion h4.accordion-toggle:first-child {
			margin-top: 0px;
		}

	h4.accordion-toggle:hover {
		background: rgba(0, 169, 157, 0.3);
	}

	h4.accordion-toggle span {
		margin-right: 10px;
		-webkit-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
		-webkit-transition-property: -webkit-transform;
		-moz-transition-property: -moz-transform;
		-o-transition-property: -o-transform;
		transition-property: transform;
	}
	h4.accordion-toggle:hover span {
		margin-right: 5px;
		padding-left: 5px;
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	.accordion-content p {
		color: #5F5F5F;
		font-size: 0.9em;
	}

	div#accordion br {
	display: none;
	}


/* * * *  BARGRAPH ANIMATION SHORTCODE * * * */

	.progress-responsive {
		width: 100%;
	}
	/* Progress bar containers */
	.progress-responsive figure {
		position: relative;
		width: 100%;
		height: 30px;
		border: 0px solid #222;
		background: #f7f7f7;
		border-radius: 0px 14px 14px 0px;
		-webkit-border-radius: 0px 14px 14px 0px;
	}
	/* Progress bar shape */
	figure div:first-child {
		width: 0;
		height: 30px;
		border-radius: 1px;
	}
	.jpro-bargraph {
		background: #71B379; 
		border-radius: 0px 14px 14px 0px;
		-webkit-border-radius: 0px 14px 14px 0px;
	}

	.jpro-bargraph.red {
		background: #E79692;
	}
	.jpro-bargraph.blue {
		background: #A298BE;
	}
	.jpro-bargraph.yellow {
		background: #E7DA92;
	}

	/* Percent text */
	figure div:last-child {
		position: absolute;
		top: -2px;
		left: 10px;
		font-size: 25px;
		font-weight: normal;
		font-family: sans-serif;
		color: #fff;
	}

	/* TITLES */
	h4.bargraphtitle {
		margin: 0px;
	}

	/* TEXT */
	p.jprobargraphcontent {
		color: #999;
		font-size: 0.9em;
	}
	p.jprobargraphcontentdark {
		color: #303030;
		font-size: 0.9em;
	}
 
/* * * *  CALCSLIDE SHORTCODE * * * */

	/*Containers*/
	.calcslide-container {
		position: relative;
		display: block;
	}
	.caclslide {
		position: relative;
		display: block;
		margin-bottom: 0.6em;
	}

	/*Input*/
	.calcslide-input .ui-slider-horizontal {
		margin-left: 15px;
		margin-bottom: 0.6em;
	}

	/*Output*/
	.calcslide-output input[type="text"] {
		margin-top: 15px;
		text-align: left;
		width: auto;
		margin:0px;
		padding: 0px 0px 0px 10px;
		border: 0px;
	}

	/*Style*/
	h4.calcslide-input-label {
		text-align: left;
		margin-bottom: 0.6em;
	}


/* * * *  CENTER VERTICAL IMAGES SHORTCODE * * * */
	.jpro-rvai-elements {
		position: relative;
		width: 100%;
	}

	.jpro-rvai-ratio {
		padding-top: 100%; /* forces 1:1 aspect ratio */
	}

	.jpro-rvai-img-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		text-align:center; /* Align center inline elements */
		font: 0/0 a;
	}

	.jpro-rvai-img-container .jpro-rvai-center {
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}

	.jpro-rvai-img-container img {
		vertical-align: middle;
		display: inline-block;
		max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
		max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
	}