/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 700px) {


	
	
/* css for campaigns ------------------------------------------------------------------------------------------ */

	#campaign {
		margin: 10px 0 10px 25px;
	
	}
	.element {
		position: relative;
		margin: 0 0 20px 0;
		width: 97%;
		height: 200px;
		overflow: hidden;
		float: none;
		}
	.element p {
		position: absolute;
		padding: 8px 0 0 0;
		width: 97%;
		min-height: 37px;
		bottom: 0;
		left: 0px;
		font-size: 15px;
		line-height: 18px;
		font-weight: bold;
		color: #ffffff !important;
		z-index: 991;
		background: url('../images/fade.png');

		}

	.w-one-third {
		width: 97%;
		}
	.w-two-thirds {
		width: 97%;
		}
	.w-half {
		width: 97%;
		}
	.w-full {
		width: 97%;
		}
	.h-one-third {
		height: auto;
		}
	.h-two-thirds {
		height: auto;
		}
	.h-half {
		height: auto;
		}



					

	/* Responsive lightbox */
	#lightbox2-overlay {width:100% !important;}
	#outerImageContainer {
		max-width: 100%;
		height: auto !important;
		width: auto !important;
	}
	#imageContainer, #frameContainer, #modalContainer {
		height: auto !important;
		max-width: 100% !important;
	}
	#imageDataContainer {width: auto !important;}
	#lightboxImage {
		height: auto !important;
		max-width: 100% ;
	}
	#prevLink:hover, #prevLink:visited:hover, #prevLink.force_show_nav, #framePrevLink {
	  background: url(../images/lightbox/prev.png) left 25% no-repeat !important;
	}

	#nextLink:hover, #nextLink:visited:hover, #nextLink.force_show_nav, #frameNextLink {
	  background: url(../images/lightbox/next.png) right 25% no-repeat !important;
	}

	#prevLink:hover.force_show_nav, #prevLink:visited:hover.force_show_nav,
	#framePrevLink:hover, #framePrevLink:visited:hover {
	  background: url(../images/lightbox/prev.png) left 25% no-repeat !important;
	}

	#nextLink:hover.force_show_nav, #nextLink:visited:hover.force_show_nav,
	#frameNextLink:hover, #frameNextLink:visited:hover {
	  background: url(../images/lightbox/next.png) right 25% no-repeat !important;
	}
}