/* Special Widget1 */
	.general .greyBox.sp1 h2 { font-size:300%; line-height:1.2; margin:20px 0 50px 0; font-family: 'Fjalla One'; transition: all 0.3s ease-out; }

	.general .greyBox.sp1 .section { clear:both; padding:0px; margin:0px;}

	.general .greyBox.sp1 .col 				   { display:block; float:left; margin: 3% 0 0 1.6%;}
	.general .greyBox.sp1 .col:first-child     { margin-left: 0; }

	.general .greyBox.sp1 .span_1_of_3.adj-pos { margin-left:33.86% }

	.group:before,
	.group:after { content:""; display:table; }
	.group:after { clear:both;}
	.group { zoom:1; /* For IE 6/7 */ }


	.general .greyBox.sp1 .span_3_of_3 { width: 100%; }
	.general .greyBox.sp1 .span_2_of_3 { width: 66.13%; transition: all 0.3s ease-out;}
	.general .greyBox.sp1 .span_1_of_3 { width: 32.26%; transition: all 0.3s ease-out;}
	.general .greyBox.sp1 { padding-bottom:50px}

	/* Special Widget2 */
	.sp2 			  { width:100%; border:1px solid #000; padding:20px;}
	.sp2.border-left  { border-left:10px solid #000; }
	.sp2.border-right { border-right:10px solid #000; }


	/* Special Widget3 */
	.sp3			{ width:70%; margin:0 auto; padding:50px; font-size:120%; font-family: 'robotomedium'; font-style:italic; line-height:1.4}
	.sp3.quote-tl 	{ background:url(images/quote-tl.svg); background-position:left top; background-repeat:no-repeat; }
	.sp3.quote-tr 	{ background:url(images/quote-tr.svg); background-position:right top; background-repeat:no-repeat; }
	.sp3.quote-bl 	{ background:url(images/quote-bl.svg); background-position:left bottom; background-repeat:no-repeat; }
	.sp3.quote-br 	{ background:url(images/quote-br.svg); background-position:right bottom; background-repeat:no-repeat; }

	/* Special Widget4 */
	.sp4 { width:100%; padding:0 0 0 30px; background:url(images/bg-sp4.gif); background-position:left bottom; background-repeat:no-repeat; background-size:auto }

	/* ==========================================================================
	    Media Style
	============================================================================= */
	@media only screen and (max-width:1024px) {
	.general .greyBox.sp1 h2 { font-size:220%; margin:10px 0 40px 0; }

	.general .greyBox.sp1 .col 				   { margin: 1% 0 0 5%;}
	.general .greyBox.sp1 .span_1_of_3 		   { width: 47.5% }
	.general .greyBox.sp1 .span_1_of_3.adj-pos { margin-left:0 }
	.general .greyBox.sp1 .span_2_of_3		   { width: 77%; }

	.sp3 { width:80%; }

	}

	@media only screen and (max-width:767px) {
	.general .greyBox.sp1 h2 { font-size:160%; margin:10px 0 30px 0; }
	.general .greyBox.sp1 { padding-bottom:20px}

	.general .greyBox.sp1 .span_1_of_3 		   { width: 100% }
	.general .greyBox.sp1 .span_2_of_3		   { width: 100%; }
	.general .greyBox.sp1 .col 				   { margin:0}
	.general .greyBox.sp1 .span_1_of_3.adj-toppos-m { margin-top:30px}

	.sp3 { width:100%; padding:30px; font-size:110% }
	.sp3.quote-tl, .sp3.quote-tr, .sp3.quote-bl, .sp3.quote-br { background-size:15%}
	.sp4 { width:100%; padding:0 0 0 30px; background:url(images/bg-sp4-m.gif); background-position:left bottom; background-repeat:no-repeat; background-size:auto }

	}