@import url("normalize.less");
@import url("gradients.less");
@import url("mixins.less");
@import url("vars.less");
@import url("fonts.less");
@import url("grid.less");
@import url("colorbox.css");
@import url("owl_carousel.less");
@import url("font.css");
* {
	box-sizing: border-box;
	position: relative;
	font-family: Lato
}

body {
	background-color: #fff
}

a {
	text-decoration: none;

	&.more {
		color: @content_color1;
		font-weight: 700;
		font-size: 24px;
		display: block;
		margin: 0 0 0 auto;
		height: 48px;
		width: 100px;
		position: absolute;
		right: 10px;
		bottom: 10px;

		&:hover:before {
			background-color: @content_color3
		}

		&:hover:after {
			color: @content_color3
		}

		&:before {
			background-color: @content_color1;
			background-image: url(~"@{img_path_base}/more_icon.png");
			content: "";
			width: 38px;
			height: 38px;
			position: absolute;
			bottom: 0;
			right: 0
		}

		&:after {
			content: "more";
			position: absolute;
			bottom: 15px;
			right: 22px
		}
	}

	&.see_all {
		display: block;
		width: 100%;
		text-align: right;
		font-size: 1.1em;
		line-height: 25px;
		margin-bottom: 25px;
		font-weight: 900;
		color: #4c4b4b;
		margin-top: 1.5em;
	}
}

.clearfix {
	.clear-after ()
}

#video_window_open {
	cursor: pointer
}

#side_faq {
	background-color : #fff/*#ebebeb*/;
}

#storysection {
	z-index: 3000
}

#side_w_gallery , #side_w_comments {
	display: none;
	@media (min-width: @screen-md) {
		display: block
	}
}

.onlybigscreen {
	@media (min-width: @screen-md) {
		display: none
	}
}
.onlysmallscreen {
	display: none;
	@media (min-width: @screen-md) {
		display:block
	}
}
.organization_homepage {
	.topbar {
		.logo {
			margin-bottom: 162px;
			@media (min-width: @screen-md) {
				margin-bottom: 12px
			}
		}

		.share {
			@media (max-width: @screen-md) {
				bottom: 40px;
				width: 100%;
				text-align: right
			}

			.home_link_header {
				color: #000;
				display: inline-block;
				font-size: 18px;
				line-height: 22px;
				font-weight: 300;
				margin: 0 10px 0 10px;
				&:hover {
					text-decoration: underline
				}

				@media (max-width: @screen-md) {
					margin: 10px 0 0 10px
				}
			}
		}
	}

	.h_container {
		margin: 0 auto;
		text-align: center;
		width: 96%;
		@media (min-width: @screen-md) {
			text-align: left;
			width: 90.6%
		}

		@media (min-width: @screen-lg) {
			width: 70%
		}

		&.see_all_campaigns_bottom {
			text-align: center;
			img.all_campaigns {
				display: block;
				margin: 32px 50% 32px auto;
				max-width: 100%
			}

			.button {
				margin-bottom: 64px
			}
		}

		&.paddings {
			padding: 30px 3% 20px 3%;
			@media (min-width: @screen-xs) {
				text-align: left
			}

			@media (min-width: @screen-md) {
				padding: 30px 31px 20px 41px
			}
		}

		& , scroller_paddings {
			padding: 0 3% 0 3%
		}

		h2 {
			font-size: 24px;
			margin-bottom: 30px
		}
	}

	.organization_header {
		position: relative;
		.header_logo_image {
			width: 100%;
			height: auto;
			display: block
		}

		.text_overlays {
			width: 87%;
			margin: 10px auto;
			@media (min-width: 1020px) {
				margin: 0;
				position: absolute;
				width: 100%;
				top: 0;
				left: 0
			}
		}

		.org_name , .welcome_message {
			background-color: RGBA(255, 255, 255, 0.8);
			margin: 0
		}

		.welcome_message {
			width: 100%;
			text-align: left;
			font-size: 24px;
			@media (min-width: 1020px) {
				width: 50%;
				margin-left: 50%;
				padding: 20px 4.7% 20px 3.2%
			}

			@media (min-width: @screen-lg) {
				padding: 20px 15% 20px 3.2%;
				font-size: 31px
			}
		}

		.org_name {
			color: @organization_color;
			@media (min-width: 1020px) {
				width: 50%;
				text-align: left;
				padding: 20px 3.2% 20px 4.7%;
				font-size: 38px
			}

			@media (min-width: @screen-lg) {
				padding: 20px 3.2% 20px 15%;
				font-size: 44px
			}
		}
	}
}

#popup_donate {
	padding: 20px 10%;
	.col {
		text-align: center
	}
}

#scroller {
	padding-right: 40px;
	padding-left: 40px;
	padding-top: 15px;
	padding-bottom: 15px;
	.col {
		overflow: hidden;
		padding: 0 0 48px 0
	}

	.image-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		padding-bottom: 48px;
		img {
			width: 100%;
			height: auto
		}
	}

	.description {
		display: none;
		padding: 5px 20px 48px 5px;
		font-size: 14px;
		background-color: #fff;
		text-align: center;
		overflow: hidden;
		position: relative;
		z-index: 200;
		margin: 0;
		height: 100%;
		p {
			margin: 0
		}
	}

	h2 {
		background-color: RGBA(255, 255, 255, 1);
		color: #000;
		text-align: center;
		padding: 5px 10px;
		font-size: 16px;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 48px;
		margin: 0;
		z-index: 300
	}

	.hover {
		cursor: pointer
	}
}

.scroll_bg {
	background-color: #dbdbdb;
	border-top: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf
}

.see_all_campaigns_top {
	display: block;
	font-size: 18px;
	color: #000;
	font-weight: 400;
	margin-top: 20px
}

.author_name {
	text-align: right;
	font-style: italic;
	margin-top: 15px
}

.topbar {
	font-size: 0;
	hr {
		background-color: @content_color2;
		height: 15px;
		margin: 0
	}

	.logo {
		height:  70px;
		margin-top: 12px;
		margin-bottom: 12px;
		font-size: 0;
		width: auto;
		@media (min-width: @screen-md) {
			height: 80px;
			margin-bottom: 12px
		}
		&.error-page{
			height:  55px;
			@media (min-width: @screen-md) {
				margin-bottom: 12px
			}
		}
	}

	.share {
		position: static;
		right: 0;
		bottom: 7px;
		flex-direction: column;
		/*@media (min-width: @screen-sm) {*/
		@media (min-width: 350px) {
			flex-direction: row;
		}
		@media (min-width: @screen-lg) {
			position: absolute;
		}
		.spreadtheword {
			display: block;
			position: absolute;
			top: -45px;
			right: 3px;
		}

		.text-links-wrapper {
			@media (max-width: @screen-sm) {
				display: block;
				position: absolute;
				top: 30px;
				width: 100%;
				text-align: right
			}
		}
	}
}

.cart {
	.cart_product {
		border-bottom: 1px solid #898989;
		padding-bottom: 10px;
		min-height: 116px
	}

	.cart_l_col {
		width: 71px;
		float: left
	}

	.cart_r_col , .cart_total {
		margin-left: 90px;
		width: 67%;
		@media (min-width: @screen-md) {
			width: 67%;
			margin-left: 33%
		}
	}

	.cart_thumb {
		border: 1px solid #4c4b4b;
		width: 71px;
		height: 71px;
		text-align: center;
		padding: 5px;
		img {
			max-width: 100%;
			max-height: 100%
		}
	}

	h3 {
		font-size: 14px;
		font-weight: 700;
		text-align: left
	}

	p {
		font-size: 16px;
		line-height: 21px;
		margin: 0;
		text-align: left;
		&.p_feature {
			font-weight: 300
		}

		&.p_subtotal {
			font-weight: 700;
			.amount {
				float: right;
				display: block
			}
		}
	}

	.cart_total {
		font-size: 25px;
		font-weight: 700;
		margin-top: 5px;
		margin-bottom: 15px;
		text-align: left;
		.c_total_amount {
			float: right;
			display: block
		}
	}
}

.comment {
	border-bottom: 1px solid #898989;
	padding-bottom: 15px;
	font-size: 0.85em;
	letter-spacing: -0.3px;

	&:last-child {
		border-bottom: none;
		margin-bottom: 20px;
	}

	h3 {
		color: @content_color1;
		font-weight: 900;
		font-size: 22px;
		margin-bottom: 8px;
		margin-top: 5px
	}

	p {
		margin: 0;
		color: @text_color
	}

	.time {
		font-size: 10px;
		line-height: 13px;
		margin-bottom: 9px;
		margin-top: 4px
	}

	.person {
		font-size: 16px;
		line-height: 16px;
		font-weight: 700
	}

	.comment_content {
		font-size: 14px;
		line-height: 18px;
		font-weight: 300
	}
}

.comments_wide {
	.comment {
		h3 {
			color: @content_color1;
			font-weight: 900;
			font-size: 22px;
			margin-bottom: 8px;
			margin-top: 5px;
			margin-left: 1%;
			text-align: left
		}

		p {
			margin: 0;
			color: @text_color;
			// width: 85%;
			// margin-left: 9%;
			text-align: left
		}

		.time {
			font-size: 10px;
			line-height: 13px;
			margin-bottom: 9px;
			margin-top: 4px
		}

		.person {
			font-size: 16px;
			line-height: 16px;
			font-weight: 700
		}

		.comment_content {
			font-size: 14px;
			line-height: 18px;
			font-weight: 300
		}
	}
}

footer {
	.responsive{
		width: 80%;
	}
	border-top: 4px solid #d0d2d3;
	background-color: #f0f0f0;
	padding: 5px 0;
	margin-top:1em;
	.powered_by {
		font-size: 14px;
		text-shadow: none;
		vertical-align: middle;
		img {
			vertical-align: middle;
			&.ignite_logo_white {
				margin-bottom: 10px
			}
		}
	}

	p , a {
		color: #000;
		font-size: 14px;
		line-height: 25px
	}

	h2 {
		font-size: 18px;
		font-weight: 700
	}
}

.text-center {
	text-align: center
}

.text-right {
	text-align: right !important;
}

.page_gradient {
	.page_gradient ()
}

.raiser_wrapper {
	height: 350px;
	padding-top: 35px;
	position: relative;
	margin-bottom: 10px;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 35px;
	@media (min-width: @screen-xxs) {
		width: 320px
	}

	@media (min-width: @screen-md) {
		width: 100%;
		height: 350px;
		padding-top: 35px;
		margin-bottom: 10px;
		margin-top: 0
	}

	.goal_total {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 26px;
		text-align: right;
		font-weight: 900;
		color: #898989;
		border-bottom: 2px solid #e5e5e5;
		width: 80%;
		.small {
			font-size: 21px;
			font-weight: 400
		}
	}
}

.raiser {
	position: relative;
	height: 100%;
	width: 100%;
	img.raise_mask {
		position: absolute;
		height: 100%;
		width: auto;
		left: 1px;
		top: 0;
		display: block
	}

	.progress_area {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%
	}

	.thermometer_passed {
		background-color: @content_color2
	}

	.thermometer_bg {
		background-color: #d4d4d4
	}

	.thermometer_passed , .thermometer_bg {
		height: 99.2%;
		position: absolute;
		bottom: 0;
		left: 2px;
		width: 18%;
		@media (min-width: @screen-xxs) {
			width: 17%
		}

		@media (min-width: @screen-md) {
			width: 19.5%
		}

		@media (min-width: @screen-lg) {
			width: 17%
		}
	}

	.goal_raised {
		font-size: 33px;
		text-align: right;
		font-weight: 900;
		border-top: 2px dashed #000;
		margin-right: 0;
		width: 79%;
		margin-left: 21%;

	/* 	@media (min-width: @screen-md) {
			width: 79%;
			margin-left: 21%
		}*/

		@media (min-width: @screen-lg) {
			width: 82%;
			margin-left: 18%
		}

		&:before {
			content: "";
			background-image: url(~"@{img_path_base}/arrow_black.png");
			width: 13px;
			height: 17px;
			position: absolute;
			top: -10px;
			left: -2px
		}

		.dollar_s {
			font-size: 22px
		}

		.small {
			display: block;
			text-align: right;
			font-size: 18px;
			font-weight: 400;
			color: #898989
		}
	}
}

header.container {
	h1 , h2 {
		text-align: center
	}

	h1 {
		margin-bottom: 0;
		margin: 20px 0 25px 20px
	}

	.standard_header {
		width: 100%;
		.white_blue_transp ();
		z-index: 601;
		padding-bottom: 0;
		.header_contents {
			z-index: 799;
			height: 100%
		}

		.header_texture {
			padding-bottom: 20px
		}

		.header_logo_image {
			max-height: 100%;
			width: auto
		}

		.logo_wrappper {
			overflow: hidden;
			position: static;
			z-index: 800;
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-top: 20px;
			height: 180px
		}

		h1 {
			z-index: 802;
			margin: 0;
			position: static
		}

		@media (max-width: @screen-md) {
			.header_logo_image {
				left: 0 ! important
			}

			h1 {
				left: 0 ! important
			}
		}

		@media (min-width: @screen-md) {
			height: 195px;
			padding-bottom: 0;
			.logo_wrappper {
				width: 28%;
				margin-top: 0;
				position: absolute;
				z-index: 800
			}

			.header_logo_image {
				max-width: 100%
			}

			h1 {
				z-index: 802;
				margin: 0;
				position: absolute
			}
		}

		@media (min-width: @screen-lg) {
			.logo_wrappper {
				width: 28%;
				margin-top: 0;
				position: absolute;
				z-index: 800
			}

			h1 {
				z-index: 802;
				margin: 0;
				position: absolute;
				left: 35%
			}
		}

		.header_texture {
			content: "";
			width: 100%;
			height: 100%;
			position: relative;
			top: 0;
			left: 0;
			z-index: 500;
			display: block
		}
	}
}

.big_image {
	width: 100%;
	height: auto
}

.widget {
	width: 100%;
	&#givesection:before {
		content: "";
		width: 1px;
		display: block;
		background-color: transparent;
		height: 90px;
		margin-top: -90px;
		@media (min-width: 500px) {
			margin-top: -60px;
			height: 60px
		}
	}
	.paddings{
		padding:10px 20px;
	}
	a.faq{
		color: @content_color1;
		position:relative;
		display:block;
		margin-bottom:20px;

		.hbox{
			position:absolute;
			display:none;
			background-color:#f7f7f7;
			box-shadow:2px 2px 6px RGBA(0,0,0,0.5);
			padding:20px;
			color:#000;

			top:30px;
			&:before{
				content:"";
				position:absolute;
				top:-14px;
				left:40px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 10px 14px 10px;
				border-color: transparent transparent #f7f7f7 transparent;

			}
		}
		&:hover{
			z-index:2000;
		.hbox{
				display:block;
			}

		}
	}
	h2 {
		background-color: @content_color5_h_background;
		font-size: 22px;
		font-weight: 900;
		padding: 8px 18px;
		color: @content_color4_p_background;
		margin-bottom: 15px
	}

	&.gallery_side {
		h2 {
			margin: 0
		}

		img {
			width: 100%;
			height: auto
		}

		//padding-bottom: 15px
	}
}


.story_main_wrapper {
	height: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 35px;
	position: relative
}

.read_more_ellipsis {
	float: right;
	display: block;
	margin-top: -25px;
	color: @content_color1;
	cursor: pointer
}

.read_less_ellipsis {
	float: right;
	display: none;
	margin-top: -25px;
	color: @content_color1;
	cursor: pointer
}

.spreadtheword_icons {
	display: block;
	position: relative;
	/*top: -40px;*/
	text-align: center;
	@media (min-width:460px) {
	text-align: right;
	}
	@media (min-width: @screen-xs) {
		display: inline-block;
		position: static
	}
}

img.spreadtheword_b {
	display: block;
	position: relative;
	margin-left:auto;
	margin-right:auto;

	/*top: 40px;*/
	max-width: 98%;
	vertical-align:middle;
	@media (min-width: @screen-xs) {
		display: inline;
		position: static
	}
}

.container , .gridtwothird {
	width: 100%;
	position: relative;
	padding: 0;
	text-align: center;

	.clear-after ();
	&.forceleft {
		text-align: left
	}

	&:before {
		clear: both;
		width: 98%;
		content: "";
		display: table
	}

	@media (min-width: @screen-sm) {
		padding: 0;
    width: 94%;
    margin: 0 auto;

	}

	@media (min-width: @screen-md) {
		text-align: left;
		width: 1012px
	}

	@media (min-width: @screen-lg) {
		width: 1128px;
		margin: 0 auto
	}

	&.wide_color:before , .wide_color:before {
		margin: 0;
		width: 100%;
		@media (min-width: @screen-sm) {
			margin: 0 0 0 -5%;
			width: 110%
		}
	}

	&.paddings {
		padding: 18px 3% 20px 3%;
		@media (min-width: @screen-xs) {
			text-align: left
		}

		@media (min-width: @screen-md) {
			padding: 18px 31px 20px 41px
		}
	}
}

.button_remove {
	border-radius: 6px;
	width: 100%;
	font-size: 16px;
	font-weight: 300;
	background-color: #e5e5e5;
	display: block;
	padding: 5px;
	text-align: center;
	color: #4c4b4b;
	margin: 10px 0;
	text-transform: capitalize;
}

.button {
	display: inline-block;
	border-radius: 6px;
	border: 0;
	background-color: @content_color1;
	font-size: 29px;
	line-height: 36px;
	color: @btncap_color !important;
	position: relative;
	padding: 10px 30px;
	text-align: center;
	font-weight: 900;
	cursor: pointer;
	* {
		position: relative
	}

	&.big-2lines {
		bottom: 0;
		left: 0;
		width: 320px;
		.firstline , .secondline , .thirdline {
			display: block;
			line-height: 46px;
			font-weight: 900
		}

		.firstline {
			font-size: 27px;
			line-height: 27px
		}

		.secondline {
			font-size: 31px;
			line-height: 31px;
			text-transform: uppercase
		}

		.thirdline {
			font-size: 19px;
			font-weight: 400;
			line-height: 22px
		}

		@media (min-width: @screen-md) {
			// position: absolute;
			width: 100%;
			.firstline {
				font-size: 22px;
				line-height: 27px
			}

			.secondline {
				font-size: 24px;
				line-height: 31px
			}

			.thirdline {
				font-size: 18px;
				font-weight: 400;
				line-height: 22px
			}
		}

		@media (min-width: @screen-lg) {
			.firstline {
				font-size: 27px;
				line-height: 27px
			}

			.secondline {
				font-size: 31px;
				line-height: 31px;
				text-transform: uppercase
			}

			.thirdline {
				font-size: 19px;
				font-weight: 400;
				line-height: 22px
			}
		}
	}

	&.small {
		font-size: 18px;
		font-weight: 900;
		padding: 10px 20px;
		line-height: 18px
	}

	&.donate_now {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 15px;
		@media (min-width: @screen-xs) {
			width: 50%
		}
	}

	&.checkout {
		width: 100%
	}
}

.bodytext {
	p {
		width: 85%;
		margin-left: auto;
		margin-right: auto
	}
}

.wide_color:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: @content_color4_p_background;
	opacity: .7;
	box-shadow: 0 0 9px RGBA(255, 255, 255, 1);
	display: block
}

.paper_wide {
	background: RGBA(255, 255, 255, 0.9);
	box-shadow: 0 0 9px RGBA(255, 255, 255, 1);
	width: 100%
}

.padding-top-bottom {
	padding-top: 24px;
	padding-bottom: 32px
}

.daystogo {
	.daystogo_label {
		margin: 8px 0 3px;
		font-size: 18px;
		color: #323232
	}

	.daystogo_bar {
		height: 16px;
		background-color: @content_color2;
		.daystogo_bar_passed {
			background-color: RGBA(128, 128, 128, 0.6);
			height: 100%
		}
	}
}

.support_info {
	font-size: 24px;
	font-weight: 300;
	padding-bottom: 15px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 5%;
	@media (min-width: @screen-xs) {
		width: 48%;
		margin-right: 1%
	}
}

.product_images {
	@media (min-width: @screen-xs) {
		margin-right: 5px;
		width: 48%;
		float: left
	}

	img {
		max-width: 100%;
		max-height: 200px
	}
}

.product_data {
	@media (min-width: @screen-xs) {
		width: 50%;
		margin-left: 50%
	}

	.price {
		font-size: 36px;
		font-weight: 900;
		color: #707070;
		margin: 0;

	}

	p {
		font-weight: 300
	}

	.product_title {
		@media (min-width: @screen-xs) {
			margin-top: 0
		}
	}
	*{
		max-width:100%;
	}
}

.product {
	.clear-after ();
	border-top: 1px solid #898989;
	padding-top: 15px;
	width:100%;
	h3 {
		color: #000;
		font-size: 21px;
		font-weight: 900
	}

	h4 {
		font-size: 24px
	}

	.image_big {
		text-align: center;
		width: 100%;
		img {
			max-width: 100%
		}
	}

	.thumbs {
		width:auto;	
		/*height: 50px;*/
		margin: 5px 0 15px 0;
		text-align: center;
		img {
			height: 100%;
			width: auto;
			display: inline-block;
			margin: 5px 5px 0 0;
		}
	}
}

table.sizes , table.summary {
	border-collapse: collapse;
	font-size: 16px;
	font-weight: 700;
	color: @text_color;
	td , th {
		padding: 4px;
		border: 1px solid @text_color;
		text-align: center
	}

	input {
		width: 100%;
		text-align: center;
		font-size: 18px;
		font-weight: 300
	}

	.total {
		color: #000;
		font-weight: 900
	}
}

table.summary {
	th {
		font-weight: 900
	}

	.product_description {
		text-align: left
	}

	td {
		&.item_cost , &.total {
			text-align: right
		}
	}
}

input[type="text"] , input[type="password"] , textarea {
	border: 1px solid #ccc;
	.inputs_gradient ();
	color: #202020;
	padding: 5px;
	font-weight: 400;
	font-family: Lato
}

input[type="checkbox"] {
	margin-right: 10px
}

.donateamount {
	label {
		margin-right: 10px
	}
}

.pagecheckbox , .margin_b15 {
	margin-bottom: 15px
}

.summary_row {
	.clear-after ();
	margin-bottom: 10px;
	border-bottom: 1px solid #898989;
	#mylbl , #totalAmount {
		float: right;
		font-weight: 900;
		font-size: 18px
	}
}

.xbig {
	font-size: 48px ! important
}

.inner_menu {
	&.expanded {
		.col {
			min-height: 340px
		}
	}

	&.collapsed {
		.description {
			display: none
		}

		a.more {
			&:after {
				display: none
			}
		}

		.select {
			a.more {
				display: none
			}

			h2 {
				font-size: 49px;
				color: @content_color1
			}
		}
	}
}

.link_header {
	position: relative;
	top: -50px
}

.margin-zero {
	margin: 0 ! important
}

.scroller_head {
	background-color: #f0f0f0;
	margin: 0;
	font-size: 31px;
	text-align: center;
	padding: 10px 20px;
	border-top: 2px solid #dbdbdb
}

.login_box , .campaign_box {
	color: #000;
	display: none;
	text-align: center;
	font-size: 18px;
	line-height: 22px;
	border: 4px solid #d0d2d3;
	padding: 20px;
	width: 320px;
	position: absolute;
	top: 35px;
	right: 0;
	z-index: 3200;
	background-color: #fff;
	P {
		margin-bottom: 0
	}

	.close_btn {
		background-image: url(~"@{img_path_base}/close_btn.png");
		width: 21px;
		height: 21px;
		top: 5px;
		right: 5px;
		position: absolute;
		display: block
	}
}

.campaign_box {
	position: fixed;
	top: 2%;
	width: 90%;
	left: 5%;
	padding: 30px;
	@media (min-width: @screen-sm) {
		width: 60%;
		left: 20%
	}

	@media (min-width: @screen-lg) {
		width: 50%;
		left: 25%;
		padding: 30px
	}

	h2 {
		line-height: 48px;
		font-size: 24px
	}

	input[type="text"] {
		width: 80%
	}

	.flabel {
		text-align: left;
		margin-left: 10%
	}
}

.gridtwothird .logo {
	width: 85%
}

.community_blurb {
	padding: 0 20px 0 0;
	p {
		text-align: justify
	}

	.readmore_content {
		height: 250px;
		overflow: hidden
	}

	.read_more_ellipsis {
		margin-top: 0
	}

	h2 {
		color: #000;
		font-size: 24px
	}
}

.campaign_list {
	.clear-after ();
	.campaign {
		text-align: center;
		h2 {
			font-size: 18px;
			margin-bottom: 10px
		}

		a {
			color: #000;
			&:hover {
				text-decoration: underline
			}
		}
		.image-wrapper {
			text-align: center;
			img {
				max-width: 100%;
				height: auto
			}
		}
		margin-top: 32px;
		@media (min-width: @screen-sm) {
			text-align: left;
			h2 {
				float: right;
				width: 55%;
				clear: right
			}

			.description {
				margin-left: 45%
			}
			.image-wrapper{
				width:40%;
				float:left;
				margin-right:5%;
				text-align: left;
			}
		}

		@media (min-width: @screen-lg) {
			width: 50%;
			float: left;
			padding: 20px 10px;
			margin-top: 0;
			&:nth-child(2n + 1) {
				clear: left;
				border-right: 1px solid #dbdbdb
			}
		}
	}
}

.playicon {
	text-align: center;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto
}

hr {
	background-color: @content_color3;
	height: 3px;
	border: 0
}

nav {
	&.main {
		.text-center;
		padding: 10px 5px;
		border-top: 1px solid @content_color5_h_background;
		border-bottom: 1px solid @content_color5_h_background;
		/*margin-bottom: 25px;*/
		&.affix {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 3100;
			background-color: #fff
		}

		a {
			border-left: 1px solid @content_color5_h_background;
			padding: 5px 25px;
			display: inline-block;
			color: #4c4b4b;
			font-weight: 900
		}
	}

	ul.scrollpy_menu {
		padding: 0;
		margin: 0;
		li {
			padding: 0;
			margin: 0;
			display: inline-block;
			&.onlybigscreen {
				display: inline-block;
				@media (min-width: @screen-md) {
					display: none
				}
			}

			&:nth-of-type(1) {
				a {
					border: 0
				}
			}

			&.active {
				border-bottom: 2px @content_color1 solid
			}
		}
	}
}

h1 {
	color: @content_color3;
	font-size: 48px;
	font-weight: 900;
	margin: .4em 0 .2em 0;
	&.smaller {
		font-size: 24px
	}

	&.medium {
		font-size: 36px
	}
}

h2 {
	font-size: 48px;
	color: @content_color3;
	font-weight: 900;
	margin: 0 0 .6em 0;
	hr.margin-zero {
		margin-top: 5px ! important
	}

	&.medium {
		font-size: 36px;
		line-height: 40px
	}

	&.smaller {
		font-size: 24px
	}

	&.contra {
		color: #fff;
		background-color: @content_color3;
		padding-top: 5px;
		padding-bottom: 8px
	}

	&.double_line {
		font-size: 18px;
		padding: 5px 0;
		color: @content_color3;
		border-top: 1px solid @content_color3;
		border-bottom: 1px solid @content_color3;
		margin-left: auto;
		margin-right: auto
	}
}

h4 {
	color: @content_color3
}

p , label {
	font-size: 18px;
	color: @content_color4_p_background;
	letter-spacing: .3px;
	line-height: 25px
}

.side_comment_form {
	label {
		.clear-after ();
		text-align: left;
		display: block;
		margin-top: 10px;
		.labelRight {
			margin: 0
		}

		input , textarea {
			width: 100%;
			margin: 5px 0;
			clear: both;
			display: block
		}
	}
}

#textarealimited {
	text-align: right;
	margin-bottom: 10px;
	font-size: 14px;
	font-style: italic
}
/*
.grid4:after {
	content: "";
	display: table;
	width: 100%;
	clear: both
}

.grid4 .col {
	width: 80%;
	margin: 0 auto;
	text-align: center
}

@media (min-width: 480px) {
	.grid4 .col {
		text-align: left;
		float: left;
		width: 46%;
		margin: 4%
	}

	.grid4 .col:nth-child(1) , .grid4 .col:nth-child(3) , .grid4 .col:nth-child(5) {
		margin-left: 0
	}

	.grid4 .col:nth-child(2) , .grid4 .col:nth-child(4) , .grid4 .col:nth-child(6) {
		margin-right: 0
	}

	.grid4 .col:nth-child(3) , .grid4 .col:nth-child(5) {
		clear: left
	}
}

@media (min-width: 600px) {
	.grid4 .col {
		width: 46%;
		margin: 4%
	}

	.grid4 .col:nth-child(3) , .grid4 .col:nth-child(6) {
		margin-right: 0
	}

	.grid4 .col:nth-child(3) , .grid4 .col:nth-child(5) {
		clear: none
	}

	.grid4 .col:nth-child(4) {
		clear: left
	}
}

@media (min-width: 800px) {
	.grid4 .col {
		width: 32%;
		margin: 1%
	}

	.grid4 .col:nth-child(3) {
		margin-right: 0
	}

	.grid4 .col:nth-child(4) {
		clear: none
	}
}

.grid4 .image_wrapper {
	background-color: #fff;
	margin: 10px auto;
	width: 80%;
	text-align: center;
	padding: 6px
}

.grid4 .image_wrapper img {
	display: inline-block;
	margin: 10px 0
}

@media (min-width: 800px) {
	.grid4 .image_wrapper {
		margin: 10 0;
		width: auto
	}

	.grid4 .image_wrapper img {
		display: block
	}
}
*/
.community_blurb .read_less_ellipsis {
	margin-top: 0
}

h2.video_header {
	border-top: 3px solid #000;
	margin-top: 40px;
	padding-top: 8px;
	text-align: center
}

.campaign_box {
	height: 90%;
	left: 15%;
	overflow: auto;
	padding: 30px;
	position: fixed;
	top: 2%;
	width: 70%
}

.help_Campaign {
	display: block;
	margin-top: 10px;
	text-align: center;
	font-size: 18px;
	color: @content_color1
}

.paddings_secure {
	padding: 15px 20px;
	h4 {
		margin: 0 0 10px 0
	}

	.grid2cols .col {
		text-align: left;
		clear: none;
		width: 100%;
		margin: 0;
		@media (min-width: @screen-xxs) {
			width: 48%;
			float: left;
			&:nth-of-type(1) {
				margin-right: 4%
			}
		}
	}
}

.thankyou_img_checkout {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	position: relative;
	max-width: 100%;
	margin-top: 20px;
	@media (min-width: @screen-md) {
		margin-top: 0
	}

	&:after {
/*		content: "Thank You!";
		position: absolute;
		padding: 3% 7%;
		font-size: 28px;
		font-weight: 700;
		background-color: RGBA(255, 255, 255, 0.7);
		letter-spacing: 1px;
		text-shadow: 1px 1px 1px RGBA(255, 255, 255, 0.9);
		left: 0;
		top: 0;
		@media (min-width: @screen-xxs) {
			font-size: 35px
		}

		@media (min-width: @screen-md) {
			padding: 15px 33px;
			font-size: 28px;
			right: 0;
			bottom: 0;
			left: auto;
			top: auto
		}*/
	}

	img {
		max-width: 100%;
		display: inline-block
	}
}

.helptext {
	display: block;
	text-align: right;
	font-size: 14px;
	color: blue;
	vertical-align: baseline;
	cursor: pointer
}
.xx_extra_value {
        color: #707070 !important;
        font-size: 14px;
        padding-left: 14px;
		font-weight:400 !important;
    }

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width:100%;
	iframe, object, embed {
		position: absolute;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
	}
}

// <----------------------ham--------->
.dropbtn-menu {
    cursor: pointer;
	background-color: white;
    border:none;
    font-size:30px;
    font-weight:bold;
	margin-left: 8px;
	color:#726e6e;
	line-height:32px;
	position:relative;
	top:0px;
	&:focus {
  		outline:0;
	}
	div{
		margin: 4px 0px;
		width: 25px;
		height: 4px;
      	border-radius: 3px;
		background-color:#726e6e;
	}
}
.dropdown-content-menu {
    display: none;
    position: absolute;
    background-color:white;
  	min-width: 173px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border:1px solid #cccccc;
		padding: 15px;
		right: -9px;
		top: 49px;
}

.dropdown-content-menu a {

		padding: 2px;
		text-decoration: none;
		display: block;
		font-size: 16px;
		color: @content_color1;

}

.dropdown-menu {
	&.show-menu-wrapper {
		.dropdown-content-menu {
			display: flex;
			flex-direction: column;
			top: 30px;
		}
	}
	a:hover {
	}
}
.show-menu {
	display: flex;
	flex-direction: column;
}

.flex-menu{
		align-items: center;
    display: flex;
    flex-direction: column;
		@media (min-width: @screen-lg) {
			display: block;
		}
}
.right{
	display: flex;
	justify-content: center;
	@media (min-width: @screen-lg) {
		justify-content:flex-end;
	}
}
.border-right{
	border-right: 1px solid black;
	padding-right: 7px;
	margin-right: 5px;
}
.pci-logo{
	width: 120px!important;
	display: block;
	margin: 0 auto;
	margin-top: 10px;
}
.footer-spreadtheword{
	padding-top: 20px;
	@media (min-width: @screen-sm) {
		padding-top: 40px;
	}

	.spreadtheword_icons{
		text-align: center;
	}
}

.end-today{
	display: block;
	margin-top: 20px;
	font-size: 18px;
}
.grid3{
		display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
		@media (min-width: @screen-md) {
			display: block;
		}
	.col{
		margin: 0 ;
		text-align: center;
	}
}
.comment{
    margin: 0 5%;
}
.story_main_wrapper{
	margin: 0 5%;
	margin-bottom: 45px;
}
.shortstory,.loadCart{
	margin: 0 5%;
}
.read_more_ellipsis{
	margin-right: 5%;
	margin-top: -28px;
}
.topbar .share{
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: row;
	&.error-page{
		padding-bottom:12px;
	}
}
.product_data{
	p{
		margin: 1em 0%;
	}
}
.button.big-2lines{
	width: 300px;
}

.pictures_grid {
margin-left: 0;
/*	.mcol{
	width: 100%;
	}*/
}
.new-footer{
	margin-left: 30px;
	margin-right: 30px;
	display: flex;
	flex-wrap: wrap;
	@media (min-width: @screen-sm) {
		margin-top:30px;
		margin-bottom:15px;
		margin-left:0;
		margin-right:0;
	}
	img{
		margin-top: 0;
		width: 30%;
		@media (min-width: @screen-sm) {
			width: 100%;
		}
	}
	p{
		margin-top:0;
		margin-bottom:0;
	}

	.space{
		justify-content: space-between;
	}
	.row{
		display: flex;
		width: 100%;
		flex-direction: column;
		@media (min-width: @screen-sm) {
			flex-direction: row;
		}
	}
	.col{
		margin: 15px 0;
		@media (min-width: @screen-sm) {
			margin:0;
		}
	}
/*	.right-flex{
		margin-left: 0;
		@media (min-width: @screen-sm) {
			margin-left: auto;
		}
	}*/
/*	.row-relative{
		position: static;
		top:0;
		@media (min-width: @screen-sm) {
			position: relative;
			top:-70px;
		}
	}*/
	.logo-footer{
		min-width: 250px;
	}
	.pci-logo-footer-wrapper{
		margin-top:20px;
		@media (min-width: @screen-sm) {
			margin-top:40px;
		}
	}
}
.center{
	text-align: center;
}
/* JK 25.06.2018 */
.topbar .share.onlysmallscreen{
	margin-bottom:10px;
	.create-campaign{
		width:100%;
		@media (min-width: @screen-sm) {
				width:auto;
			}
	}
@media (min-width: @screen-lg) {
		margin-bottom:0px;
	}
}
#nav_wrapper{
	/*height:53px;*/
	margin-bottom:32px;
}
.create-campaign{
	font-size: 16px;
	color: @content_color1;
	margin: 0 0px 0.3em 0px;
	@media (min-width: @screen-md) {
		padding-right: 21px;

	}
}
.flex-center{
	display: flex;
	align-items: center;
}
.share.right{
	margin-bottom:20px;
	p{
		margin:0px;
	}
}

.shortstory {
	.text-center;
	font-size: 27px;
	font-weight: 400;
	margin: 25px 20px 25px 20px;
	line-height: 33px;
	letter-spacing: 0
}

#side_w_comments{
	margin-top:25px;
}
.topsection {
	/*margin-bottom: 20px;*/
	.col {
		@media (min-width: @screen-md) {
			height: 466px
		}
	}
}
#givesection{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	h2{
		width:100%;
		flex-basis:100%;
	}
	.support_info{
		/* changed to grid layout*/
		width:48%;
		margin-left:0px;
		margin-right:2%
	}
	.donate_wrappper{
		@media (min-width: @screen-lg){
			text-align: right;
		}
	}
	.grid2cols{
		/*fix for special grid use case with column changed to display:inline-block to make proper vertical alignement */
		text-align: center;
		width:100%;
		@media (min-width: @screen-lg){
			text-align: left;
		}
	}
/*	*/.donate_now{
		width:50%;
	}
	form{
		width:100%;
	}
}
.error-page-content {
	width: 535px;
	vertical-align: center;
	margin-top: 8vw;

	.error-page-image {
		float: left;
		display: inline-block;
		width: 170px;
		margin-right: 20px;

		img {
			max-width: 100%;
		}
	}

	.error-page-text {
		width: 340px;
		vertical-align: center;
		overflow: hidden;

		h2 {
			font-family: Barlow;
			color: #1ba575;
			font-size: 45px;
			text-align: left;
		}

		p {
			color: #6f6f6f;
			font-size: 22px;
			text-align: left;
			line-height: 1.2em;

			a {
				color: #6f6f6f;
				text-decoration: underline;
			}
		}
	}
}
.product_data .button-expand{
	width:330px;
	/*margin-top:15px;*/
	font-weight:400 !important;
	display:none;
	margin-top:10px;
	&.visible{
		display:block;
	}
}
.total_sizes,.select_size_box,.button-expand, p.line-input input{
	border:1px solid #707070 !important;
	border-radius:5px;
	background:#fff !important;
	font-size:16px;
	text-align:center;
	font-weight:900 !important;
	height:38px;
	&:active, &:focus{
		outline: none;
		border-width: 3px !important;
	}
}
.sizes-wrapper{
	display:none;
	&.expanded{
		display:block;
		margin-top:-4px;
	}
}
.hideSizesLink{
	margin-top:20px;
	//margin-bottom:20px;
	display:none;
	&.visible{
		display:block;
	}

}
.product_data a{
	color: @content_color1;
}
.sizes{

	display:block;
	margin-bottom:12px;
	margin-top:0px;
	.size-wrapper{
		margin-right:12px;
		display:inline-block;
		padding-top:14px;
	}
	&.withexpand{
		height: 130px;
		overflow:hidden;
		.button-expand{
			display:block;
		}
	}
	.size-name{
		text-align: center;
		font-size:11px;
		font-weight:700;
		padding-bottom:5px;
	}
	.total_sizes{
		width:154px;
		margin-top:15px;
		margin-right:12px;
		font-size:18px;
		text-transform: uppercase;
	}

	.select_size_box{
		width:42px;
	}
}
p.label-small{
	line-height:1.4em;

	label{
		line-height:1.4em;
	}
}
p.line-input{
	font-size:14px;
	font-weight:400;
	margin:12px 0px;
	input{
		width:266px;
		text-align:left;
		font-size:20px;
		padding-left:14px;
		vertical-align:middle;
		margin-left:5px;
	}
}
h4.one-row-qty{
	font-size:42px!important;
	margin-top:28px!important;
}
.qty-box-inline{
	font-weight:400;
	margin-top:7px;
	float:right;
	font-size:14px;
	color:#333333;
	margin-right:32px;
	.select_size_box{
		font-size:20px;
		width:46px;
		margin-left:5px;
		vertical-align:middle;
	}
}
label.qty{
     float:right;
	 input{
		margin-left:5px;
	 }
}