/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
 /**
 * The Pagination
 */
 .siloRenderPagination{
 text-align:center;
 padding:6px 0px;
 }
 
 .siloRenderPagination a,  .siloRenderPagination p{
color: black;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
 }
 
  .siloRenderPagination a.active{
background-color: #4CAF50;
  color: white;
 }
 
 .siloRenderPagination a:hover:not(.active) {background-color: #ddd;}

/**
* The Grid Layout
**/

.siloRenderGridRow {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}

.siloRenderGridRow h3 {
	font-weight: 600;
	line-height: 1.4;
	font-size: 22px;
}

.siloRenderGridRowOne {
	padding: 0 4px;
}

.siloRenderGridRowOne h3 {
	font-weight: 600;
	line-height: 1.4;
	font-size: 16px;
}

.siloRenderGridColumn {
	flex: 33%;
	padding: 0 2%;
	max-width: 33%;
}

.siloRenderGridColumnOne {
	padding: 0 2%;
}

.siloRenderGridElement {
	border-bottom: 2px solid #0000000a;
	padding-bottom: 5px;
	padding-top: 5px;
}

.siloRenderGridElementBTN:before {
	content: "\f522";
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'dashicons';
	display: inline-block;
	color: #fff;
	height: 20px;
	margin-right: 8px;
	position: relative;
	top: -2px;
	vertical-align: middle;
	width: 20px;
}

.siloRenderGridElementBTN {
	text-align: left;
	border: none;
	color: #ffffff !important;
	padding: 10px 15px 10px 10px;
	margin-bottom: 15px;
	margin-top: 10px;
	font-size: 14px;
	width: 80%;
	display: block;
	cursor: pointer;
	background-color: #ef6262 !important;
	border-color: #ef6262 !important;
}

.siloRenderGridElementBTN:hover {
	background-color: #f57e7e !important;
}

/**
* The Full Layout
**/
.siloRenderContainer {
	margin-top: 0px;
	padding: 5px 10px 5px 10px;
}

.siloRenderHeading {
	padding: 5px 10px 5px 10px;
}

.siloRenderBody img {
	margin-top: 10px;
}

.siloRenderElement {
	padding: 5px 10px 5px 10px;
	margin: 0px 0px 20px 0px;
}

.siloRenderContainer h2 {
	font-weight: 600;
	line-height: 1.4;
}

.siloRenderElement h3 {
	padding: 10px;
	color: #444444;
	text-align: left;
	font-weight: 300 !important;
}

.siloRenderElement a {
	font-weight: 800;
}

.siloRenderElementRight h3 {
	background: rgb(49, 72, 124);
	background: #f3f3f3;
}

.siloRenderElementLeft h3 {
	background: rgb(49, 72, 124);
	background: #f3f3f3;
}



/**
* Responsive Styles Tablet Only 
**/
@media all and (min-width: 768px) and (max-width: 980px) {
	.siloRenderGridElementBTN {
		width: 100%;
	}
	.siloRenderContainer h3 {
		font-size: 20px;
	}
}

/**
* Responsive Styles Smartphone Only 
**/
@media all and (max-width: 767px) {
	.siloRenderGridColumn {
		flex: 50%;
		padding: 0 2%;
		max-width: 50%;
	}
	.siloRenderGridElementBTN {
		width: 100%;
		font-size: 12px;
		padding: 8px 8px 8px 8px;
	}
	.siloRenderContainer h3 {
		font-size: 18px;
	}
}