/**
 * @package 	WordPress
 * @subpackage 	Welfare
 * @version		1.0.4
 * 
 * Responsive CMSMS Donations CSS Rules
 * Created by CMSMasters
 * 
 */



/*-------------------------------------------------------------------------

	0.	LESS Variables + Functions
	1.	Large Monitor
	2.	Tablet Monitor
	3.	Small Tablet Monitor
	4.	Phone Monitor
	5.	Small Phone Monitor

-------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------*/
/*	0.	LESS Variables & Functions	*/
/*-------------------------------------------------------------------------*/

/***************** Variables ******************/
@line_height_pad: 20px;
@blocks_hor_pad: 20px;
@cont_vert_pad: 30px;

@input_pad: 8px;

@col_mar: 2%;

@resp_blocks_pad: 46.5%;


@monitor_large: ~'(min-width: 1440px)';
@monitor_medium: ~'(min-width: 1025px)';
@monitor_tablet: ~'(max-width: 1024px)';
@monitor_tablet_950: ~'(max-width: 950px)';
@monitor_tablet_small: ~'(max-width: 767px)';
@monitor_tablet_600: ~'(max-width: 600px)';
@monitor_phone: ~'(max-width: 540px)';
@monitor_phone_small: ~'(max-width: 320px)';

@tablet_ipad: ~'(min-width: 768px) and (max-width: 1024px)';
@tablet_small: ~'(min-width: 541px) and (max-width: 767px)';


/***************** Functions ******************/
.fl () {
	float:left;
}

.fr () {
	float:right;
}

.dn () {
	display:none;
}

.tal () {
	text-align:left;
}

.tac () {
	text-align:center;
}

.tar () {
	text-align:right;
}

.cl () {
	clear:both;
}

.ovh () {
	overflow:hidden;
}

.m0a () {
	margin:0 auto;
}

.bd (@w:1px; @t:solid) {
	border-width:@w;
	border-style:@t;
}

.bdt (@w:1px; @t:solid) {
	border-top-width:@w;
	border-top-style:@t;
}

.bdb (@w:1px; @t:solid) {
	border-bottom-width:@w;
	border-bottom-style:@t;
}

.bdr (@w:1px; @t:solid) {
	border-right-width:@w;
	border-right-style:@t;
}

.bdl (@w:1px; @t:solid) {
	border-left-width:@w;
	border-left-style:@t;
}

.color_white_opacity (@op:.5) {
	color:rgba(255, 255, 255, @op);
}

.bg_white_opacity (@op:.5) {
	background-color:rgba(255, 255, 255, @op);
}

.fullwidth_in_block () {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}

.op (@op:.5) {
	opacity:@op;
}

.cl_after () {
	content:'.';
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
	overflow:hidden;
}

.pos_abs (@w:1em; @h:1em; @l:0; @r:0; @t:0; @b:0) {
	width:@w;
	height:@h;
	margin:auto !important;
	position:absolute;
	left:@l;
	right:@r;
	top:@t;
	bottom:@b;
}

.bdbx () {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.ctbx () {
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
}

.bdrs (@radius:5px) {
	-webkit-border-radius:@radius;
	border-radius:@radius;
}

.bxsh (@x:0; @y:0; @blur:5px; @spred:0; @alpha:.05) {
	-webkit-box-shadow:@x @y @blur @spred rgba(0, 0, 0, @alpha);
	box-shadow:@x @y @blur @spred rgba(0, 0, 0, @alpha);
}

.bxshi (@x:0; @y:0; @blur:5px; @spred:0; @alpha:.05) {
	-webkit-box-shadow:inset @x @y @blur @spred rgba(0, 0, 0, @alpha);
	box-shadow:inset @x @y @blur @spred rgba(0, 0, 0, @alpha);
}

.bxsh_none () {
	-webkit-box-shadow:none;
	box-shadow:none;
}

.trans(@trans:0) when not (@trans = 0) {
    -webkit-transition:@trans;
    -moz-transition:@trans;
    -ms-transition:@trans;
    -o-transition:@trans;
    transition:@trans;
}

.arrow_top (@h:5px; @w:5px) {
	border-top:0 solid transparent !important;
	border-left:@w solid transparent !important;
	border-right:@w solid transparent !important;
	border-bottom-width:@h;
	border-bottom-style:solid;
}

.arrow_bottom (@h:5px; @w:5px) {
	border-bottom:0 solid transparent !important;
	border-left:@w solid transparent !important;
	border-right:@w solid transparent !important;
	border-top-width:@h;
	border-top-style:solid;
}

.arrow_left (@h:5px; @w:5px) {
	border-left:0 solid transparent !important;
	border-top:@w solid transparent !important;
	border-bottom:@w solid transparent !important;
	border-right-width:@h;
	border-right-style:solid;
}

.arrow_right (@h:5px; @w:5px) {
	border-right:0 solid transparent !important;
	border-top:@w solid transparent !important;
	border-bottom:@w solid transparent !important;
	border-left-width:@h;
	border-left-style:solid;
}

.arrow_top_left (@h:5px; @w:5px) {
	border-right:@w solid transparent !important;
	border-left:0 solid transparent !important;
	border-bottom:0 solid transparent !important;
	border-top-width:@h;
	border-top-style:solid;
}

.arrow_top_right (@h:5px; @w:5px) {
	border-bottom:@h solid transparent !important;
	border-top:0 solid transparent !important;
	border-left:0 solid transparent !important;
	border-right-width:@w;
	border-right-style:solid;
}

.arrow_bottom_left (@h:5px; @w:5px) {
	border-top:@h solid transparent !important;
	border-right:0 solid transparent !important;
	border-bottom:0 solid transparent !important;
	border-left-width:@w;
	border-left-style:solid;
}

.arrow_bottom_right (@h:5px; @w:5px) {
	border-left:@w solid transparent !important;
	border-top:0 solid transparent !important;
	border-right:0 solid transparent !important;
	border-bottom-width:@h;
	border-bottom-style:solid;
}



@media only screen {
	/*-------------------------------------------------------------------------*/
	/*	1.	Large Monitor
	/*-------------------------------------------------------------------------*/
	@media @monitor_large {
		.donations {
			outline:none;
		}
	}
	
	
	@media @monitor_medium {
		.donations {
			outline:none;
		}
	}
	
	
	
	/*-------------------------------------------------------------------------*/
	/*	2.	Tablet Monitor
	/*-------------------------------------------------------------------------*/
	@media @monitor_tablet {
		#page {
			.donations.opened-article {
				> .donation {
					.cmsms_donation_info {
						.tac;
					}
					
					.cmsms_donation_info_img {
						width:40%;
						padding:0 0 30px;
					}
					
					.cmsms_donation_info_cont {
						display:block;
						width:100%;
					}
				}
			}
			
			.header_top_donation_but {
				margin:10px 0 0;
				padding:5px 20px;
			}
		}
	}
	
	
	
	/*-------------------------------------------------------------------------*/
	/*	Tablet Monitor 950
	/*-------------------------------------------------------------------------*/
	@media @monitor_tablet_950 {
		.donations {
			outline:none;
		}
	}
	
	
	
	/*-------------------------------------------------------------------------*/
	/*	3.	Small Tablet Monitor
	/*-------------------------------------------------------------------------*/
	@media @monitor_tablet_small {
		#page {
			.header_donation_but_wrap {
				width:100%;
				float:none;
				margin:0;
				padding:15px 5% 0;
				.cl;
				
				.header_donation_but_wrap_inner {
					display:block;
					height:auto !important;
					width:100%;
					
					.header_donation_but {
						display:block;
						.tac;
					}
				}
			}
			
			.donations.opened-article {
				> .donation {
					.cmsms_donation_info_img {
						width:60%;
					}
				}
			}
			
			.cmsms_featured_campaign {
				.campaign {
					.tac;
					
					.cmsms_campaign_wrap_img {
						display:inline-block;
						float:none;
						width:50%;
						vertical-align:middle;
					}
					
					.cmsms_campaign_donated_percent {
						display:inline-block;
						float:none;
						width:50%;
						vertical-align:middle;
						padding:30px 0;
					}
					
					.cmsms_campaign_cont {
						float:none;
						width:100%;
						.cl;
					}
				}
			}
		}
	}
	
	
	
	/*-------------------------------------------------------------------------*/
	/*	Tablet Monitor 600
	/*-------------------------------------------------------------------------*/
	@media @monitor_tablet_600 {
		.donations {
			outline:none;
		}
	}
	
	
	
	/*-------------------------------------------------------------------------*/
	/*	4.	Phone Monitor
	/*-------------------------------------------------------------------------*/
	@media @monitor_phone {
		#page {
			.opened-article > .campaign {
				.campaign_meta_wrap {
					display:block;
					
					> div {
						display:block;
						width:100%;
						.bdl(0);
						.bdt(2px);
					}
				}
			}
			
			.donations.opened-article {
				> .donation {
					.cmsms_donation_info {
						padding:30px;
					}
				}
			}
			
			.cmsms_featured_campaign {
				.campaign {
					.tac;
					
					.cmsms_campaign_wrap_img {
						display:block;
						width:100%;
					}
					
					.cmsms_campaign_donated_percent {
						display:block;
						width:100%;
						padding-bottom:5px;
					}
				}
			}
		}
	}
	
	
	
	/*-------------------------------------------------------------------------*/
	/*	5.	Small Phone Monitor
	/*-------------------------------------------------------------------------*/
	@media @monitor_phone_small {
		.donations {
			outline:none;
		}
	}
}

