/* List view & grid view
	----------------------------------*/
	.btnContainer  	{ background-color:#e8e4db; padding:20px; }

	
	/* Create two equal columns that floats next to each other */
	.row.gridrow  {
		--cols: 4;
		--gap: 12px;
		display: flex; 
		flex-wrap: wrap; 
		flex-direction: row; 
		gap: var(--gap);
	}
	.row.gridrow .column { flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1)); flex-grow: 0; flex-shrink: 0; }
	.column 		{ padding:0;}
	.column.gridcol:last-child { border-right: 0; }
	
	.column.gridcol .hidegrid{
		display: none;
	}
	.column .flx-wrp{
		display: flex;
	}

	/* Clear floats after the columns */
	.row:after 		{ content:""; display:table; clear:both;  }
	
	.row .column:nth-child(4n+1) { background-color:#f5f7f6; border-top:5px solid #fff;}
	.row .column:nth-child(4n+2) { background-color:#eaeef1; border-top:5px solid #fff;}
	.row .column:nth-child(4n+3) { background-color:#f5f7f6; border-top:5px solid #fff;}
	.row .column:nth-child(4n+4) { background-color:#eaeef1; border-top:5px solid #fff;}


	/* Style the buttons */
	.btn 			{ border:none; outline:none; padding:12px 16px; background-color:#e8e4db; color:#8d7e6d; cursor:pointer; font-size:18px;
	  							 -webkit-border-radius: 5px;
									-moz-border-radius: 5px;
								 	     border-radius: 5px;
								 	        transition: all 0.3s ease-out;}

	.btn:hover 		{ background-color:#e8e4db;}
	.btn.active 	{ background-color:#fff; color:#333;}



	.row 			{ line-height:normal; }
	.row-col1 		{ flex-basis: 10%; flex-shrink: 0; flex-grow: 0; }
	.row-col>img 	{ width:100%; height:auto;}
	.row-col2		{ flex-basis: 35%; flex-shrink: 0; flex-grow: 0; font-size:30px;}
	.row-col3		{ flex-basis: 40%; flex-shrink: 0; flex-grow: 1; }
	.row-col4		{ flex-basis: 15%; flex-shrink: 0; flex-grow: 0; }
	
	.column.gridcol .flx-wrp { flex-direction: column; }
	.column.gridcol .row-col1,
	.column.gridcol .row-col2,
	.column.gridcol .row-col3,
	.column.gridcol .row-col4{ flex-basis: auto; flex-shrink: 0; flex-grow: 1; }

	.row-col2.rc-title 	{ font-size:30px; font-family:'robotolight'; line-height:normal; color:#385a66; }
	.row-col3.rc-descr  { color:#8d7e6d}
	.row .row-pos 				{ padding:20px; }

	ul.row-fa					{ margin:0; padding:0; }
	ul.row-fa li 				{ margin:0; padding:0; padding-right:30px; display:inline-block; list-style:none;   }
	ul.row-fa li:last-child 	{ padding-right:0px; }
	ul.row-fa li .fa 			{ font-size:30px; font-weight:normal; }
	ul.row-fa li a              { color:#385a66; }
	ul.row-fa li a:hover        { color:#8d7e6d; }
	


	/* Control color
	----------------------------------*/
/*	.tab-green .tab-sw .btn.active,
	.tab-green .tab-sw .row-col2.rc-title 	{ color:#385a66; }

	.tab-blue .tab-sw .btn.active,
	.tab-blue .tab-sw .row-col2.rc-title  	{ color:#404972; }

	.tab-purple .tab-sw .btn.active,
	.tab-purple .tab-sw .row-col2.rc-title  { color:#513f71; }

	.tab-gold .tab-sw .btn.active  			{ color:#5e4933; }
	.tab-gold .tab-sw .row-col2.rc-title	{ color:#333; }*/



	/* ==========================================================================
	    Media Style
	============================================================================= */

	@media only screen and (max-width: 1100px) {
		.btnContainer 	{ padding:15px }

	}

	@media only screen and (max-width: 1024px) {
		.column.listcol .flx-wrp{
			flex-wrap: wrap;
		}
		.column.listcol .row-col1{
			flex-basis: 33.3%;
		}
		.column.listcol .row-col2{
			flex-basis: 66.6%;
		}
		.column.listcol .row-col3{
			flex-basis: 100%;
		}
		.column.listcol .row-col4{
			flex-basis: 100%;
		}
		.row.gridrow  {
			--cols: 3;
		}

		.column.gridcol .row-col2.rc-title  { font-size:20px; font-weight:600; }
		.column.listcol .row-col2.rc-title  { font-size:30px; font-weight:400; }
		.column.gridcol .row-pos 		    { padding:15px }
		ul.row-fa  { text-align:right; }
	}


	@media only screen and (min-device-width: 768px)  and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		.column.listcol .row-col1{
			flex-basis: 20%;
		}
		.column.listcol .row-col2{
			flex-basis: 80%;
		}

	}

	@media only screen and (min-device-width: 768px)  and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
		.column.listcol .row-col1{
			flex-basis: 20%;
		}
		.column.listcol .row-col2{
			flex-basis: 80%;
		}
		.column.listcol .row-col2.rc-title { margin-top:50px; }

	}

	@media only screen and (max-width: 767px) {
		.row.gridrow  {
			--cols: 2;
		}

		.column.gridcol .row-col2.rc-title,
		.column.listcol .row-col2.rc-title  { font-size:20px; font-weight:600; }
		#btnContainer 		{ padding:10px }
		.row-col4>.row-pos  { padding-top:0; }
	}