@charset "UTF-8";
/* CSS Document */
.section { width: 500px; }
.section .picturewrap { padding: 0  0 5px 0; }
.section .textwrap { padding: 0  0 5px 0; }

.section .span1 { width: 110px; }
.section .span2 { width: 240px; }
.section .span3 { width: 370px; }
.section .span4 { width: 500px; }

.section.picturefirst .picturewrap, .section.textfirst .textwrap { float: left; padding-right: 20px; }
.section.picturefirst .textwrap, .section.textfirst .picturewrap { float: right; }

.section.wrap.picturefirst .picturewrap { padding-right: 20px; }
.section.wrap.textfirst .picturewrap { padding-left: 20px; }
.section.wrap .textwrap { padding: 0; }
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.typography .section img {
	border: none;
}

.fluidsection { }
.fluidsection .picturewrap { padding: 0  0 5px 0; }
.fluidsection .textwrap { padding: 0  0 5px 0; }

.fluidsection .span1of4 { width: 25%; }
.fluidsection .span2of4 { width: 50%; }
.fluidsection .span3of4 { width: 75%; }
.fluidsection .span4of4 { width: 100%; }

.fluidsection .picturewrap, .fluidsection .textwrap {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.fluidsection.picturefirst .picturewrap { float: left; padding-right: 20px; }
.fluidsection.picturefirst .textwrap { float: right; }

.fluidsection.textfirst .picturewrap { float: right; padding-left: 20px; }
.fluidsection.textfirst .textwrap { float: left; }


.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.fluidsection .picturewrap img {
	max-width: 100%;
	border: none;
	display: block;
}


/* *********************************************************************************************************************
 * Responsive examples
 */
@media all and (min-width: 1024px) {
}


/* *********************************************************************************************************************
 * Small devices
 */
@media all and (max-width: 500px) {	
	.fluidsection .span1of4, .fluidsection .span3of4  {
		float: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
	}
}

@media all and (max-width: 500px) {	
	.fluidsection.picturefirst .picturewrap.span2of4 {
		padding-right: 10px;
	}
	.fluidsection.textfirst .picturewrap.span2of4 {
		padding-left: 10px;
	}
}

@media all and (max-width: 350px) {	
	.fluidsection .span2of4 {
		float: none !important;
		padding: 0 !important;
		width: 100% !important;
	}
}