/*! flex.css v1.0 | 2016-01-30 | authored by Joe Razumny */

/**
 * credit: flex is built on top of skeleton which was created by Dave Gamache, getskeleton.com
 */

/*=========================== start resets ===========================*/

p, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin: 0;
  }
  div {box-sizing: border-box;}
  
  /*=========================== end resets ===========================*/
  /*=========================== start ui framework ===========================*/
  
  /*typography*/
  body {font-size: 16px; line-height: 1.3; font-weight: 400; font-family: Helvetica, Arial, sans-serif; color: #222; margin: 0;}
  h1,h2,h3,h4,h5,h6 {font-family: Helvetica, Arial, sans-serif; font-weight: 300;}
  h1, .heading1, .header1 {font-size: 64px; line-height: 1.3;}
  h2, .heading2, .header2 {font-size: 48px; line-height: 1.3;}
  h3, .heading3, .header3 {font-size: 36px; line-height: 1.3;}
  h4, .heading4, .header4 {font-size: 28px; line-height: 1.3;}
  h5, .heading5, .header5 {font-size: 24px; line-height: 1.3;}
  h6, .heading6, .header6 {font-size: 22px; line-height: 1.3;}
  p  {font-family: Helvetica, Arial, sans-serif;}  
  
  /*background color for testing*/
  .g1 {background-color: #DDD;}
  .g2 {background-color: #BBB;}
  .g3 {background-color: #999;}
  .g4 {background-color: #777;}
  .g5 {background-color: #555;}
  .g6 {background-color: #333;}
  
  /*=========grid=========*/
  @media (min-width: 320px) {
      
      /*===================*/
      /*grid with margin*/
      .container {position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; box-sizing: border-box;}
      .column, .columns {width: 100%; margin-left: 4%; float: left; box-sizing: border-box;}
      .column:first-child, .columns:first-child {margin-left: 0;}
  
      .one.column, .one.columns        			{width: 4.66666666667%;}
      .two.columns, .two.column        			{width: 13.3333333333%;}
      .three.columns, .three.column      			{width: 22%;}
      .four.columns, .four.column       			{width: 30.6666666667%;}
      .five.columns, .five.column       			{width: 39.3333333333%;}
      .six.columns, .six.column        			{width: 48%;}
      .seven.columns, .seven.column      			{width: 56.6666666667%;}
      .eight.columns, .eight.column      			{width: 65.3333333333%;}
      .nine.columns, .nine.column       			{width: 74.0%;}
      .ten.columns, .ten.column        			{width: 82.6666666667%;}
      .eleven.columns, .eleven.column     		{width: 91.3333333333%;}
      .twelve.columns, .twelve.column,     		{width: 100%; margin-left: 0;}
      .one-third.column, .one-third.columns   	{width: 30.6666666667%;}
      .two-third.column, .two-third.columns, 
      .two-thirds.column, .two-thirds.columns  	{width: 65.3333333333%;}
      .one-half.column, .one-half.columns			{width: 48%;}
  
      /*offsets*/
      .offset-by-one.column, .offset-by-one.columns 		{margin-left: 8.66666666667%;}
      .offset-by-two.column, .offset-by-two.columns 		{margin-left: 17.3333333333%;}
      .offset-by-three.column, .offset-by-three.columns 	{margin-left: 26%;}
      .offset-by-four.column, .offset-by-four.columns 	{margin-left: 34.6666666667%;}
      .offset-by-five.column, .offset-by-five.columns 	{margin-left: 43.3333333333%;}
      .offset-by-six.column, .offset-by-six.columns 		{margin-left: 52%;}
      .offset-by-seven.column, .offset-by-seven.columns 	{margin-left: 60.6666666667%;}
      .offset-by-eight.column, .offset-by-eight.columns 	{margin-left: 69.3333333333%;}
      .offset-by-nine.column, .offset-by-nine.columns 	{margin-left: 78.0%;}
      .offset-by-ten.column, .offset-by-ten.columns 		{margin-left: 86.6666666667%;}
      .offset-by-eleven.column, .offset-by-eleven.columns {margin-left: 95.3333333333%;}
      /*offset by thirds*/
      .offset-by-one-third.column, .offset-by-one-third.columns 	{margin-left: 34.6666666667%;}
      .offset-by-two-thirds.column, .offset-by-two-thirds.columns {margin-left: 69.3333333333%;}
      /*offset by half*/
      .offset-by-one-half.column, .offset-by-one-half.columns {margin-left: 52%;}
  
      /*self-clearing*/
      .container:after, .row:after, .u-cf {content: ""; display: table; clear: both;}
  }
  /*===================*/	
  /*grid fullwidth*/
  .column.full, .columns.full {width: 100%; margin-left: 0%; float: left; box-sizing: border-box;}
  
  .one.column.full, .one.columns.full        			{width: 8.3333333333%; margin-left: 0;}
  .two.columns.full, .two.column.full       			{width: 16.6666666667%; margin-left: 0;}
  .three.columns.full, .three.column.full      		{width: 25%; margin-left: 0;}
  .four.columns.full, .four.column.full, 
  .one-third.column.full, .one-third.columns.full     {width: 33.3333333333%; margin-left: 0;}
  .five.columns.full, .five.column.full       		{width: 41.6666666667%; margin-left: 0;}
  .six.columns.full, .six.column.full, 
  .one-half.column.full, .one-half.columns.full       {width: 50%; margin-left: 0;}
  .seven.columns.full, .seven.column.full      		{width: 58.3333333333%; margin-left: 0;}
  .eight.columns.full, .eight.column.full, 
  .two-thirds.column.full, .two-thirds.columns.full   {width: 66.6666666667%; margin-left: 0;}
  .nine.columns.full, .nine.column.full       		{width: 75%; margin-left: 0;}
  .ten.columns.full, .ten.column.full        			{width: 83.3333333333%; margin-left: 0;}
  .eleven.columns.full, .eleven.column.full     		{width: 91.6666666667%; margin-left: 0;}
  .twelve.columns.full, .twelve.column.full     		{width: 100%; margin-left: 0;}
  /* Offsets Fullwidth */
  .offset-by-one.column.full, .offset-by-one.columns.full 				{margin-left: 8.3333333333%;}
  .offset-by-two.column.full, .offset-by-two.columns.full 				{margin-left: 16.6666666667%;}
  .offset-by-three.column.full, .offset-by-three.columns.full 			{margin-left: 25%;}
  .offset-by-four.column.full, .offset-by-four.columns.full,
  .offset-by-one-third.column.full, .offset-by-one-third.columns.full 	{margin-left: 33.3333333333%;}
  .offset-by-five.column.full, .offset-by-five.columns.full 				{margin-left: 41.6666666667%;}
  .offset-by-six.column.full, .offset-by-six.columns.full,
  .offset-by-one-half.column.full, .offset-by-one-half.columns.full 		{margin-left: 50%;}
  .offset-by-seven.column.full, .offset-by-seven.columns .full			{margin-left: 58.3333333333%;}
  .offset-by-eight.column.full, .offset-by-eight.columns.full,
  .offset-by-two-thirds.column.full, .offset-by-two-thirds.columns.full 	{margin-left: 66.6666666667%;}
  .offset-by-nine.column.full, .offset-by-nine.columns.full 				{margin-left: 75%;}
  .offset-by-ten.column.full, .offset-by-ten.columns.full 				{margin-left: 83.3333333333%;}
  .offset-by-eleven.column.full, .offset-by-eleven.columns.full 			{margin-left: 91.6666666667%;}
  /*======================*/
  
  /*spacer - up to 24x*/
  .spacer0x{height:5px !important; min-height:5px !important; max-height:5px !important;}.spacer1x{height:10px !important; min-height:10px !important; max-height:10px !important;}.spacer2x{height:20px !important; min-height:20px !important; max-height:20px !important;}.spacer3x{height:30px !important; min-height:30px !important; max-height:30px !important;}.spacer4x{height:40px !important; min-height:40px !important; max-height:40px !important;}.spacer5x{height:50px !important; min-height:50px !important; max-height:50px !important;}.spacer6x{height:60px !important; min-height:60px !important; max-height:60px !important;}.spacer7x{height:70px !important; min-height:70px !important; max-height:70px !important;}.spacer8x{height:80px !important; min-height:80px !important; max-height:80px !important;}.spacer9x{height:90px !important; min-height:90px !important; max-height:90px !important;}.spacer10x{height:100px !important; min-height:100px !important; max-height:100px !important;}.spacer11x{height:110px !important; min-height:110px !important; max-height:110px !important;}.spacer12x{height:120px !important; min-height:120px !important; max-height:120px !important;}.spacer13x{height:130px !important; min-height:130px !important; max-height:130px !important;}.spacer14x{height:140px !important; min-height:140px !important; max-height:140px !important;}.spacer15x{height:150px !important; min-height:150px !important; max-height:150px !important;}.spacer16x{height:160px !important; min-height:160px !important; max-height:160px !important;}.spacer17x{height:170px !important; min-height:170px !important; max-height:170px !important;}.spacer18x{height:180px !important; min-height:180px !important; max-height:180px !important;}.spacer19x{height:190px !important; min-height:190px !important; max-height:190px !important;}.spacer20x{height:200px !important; min-height:200px !important; max-height:200px !important;}.spacer21x{height:210px !important; min-height:210px !important; max-height:210px !important;}.spacer22x{height:220px !important; min-height:220px !important; max-height:220px !important;}.spacer23x{height:230px !important; min-height:230px !important; max-height:230px !important;}.spacer24x{height:240px !important; min-height:240px !important; max-height:240px !important;} 
  
  /*animation*/
  .animateFaster {-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
  .animateFast   {-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
  .animateSlow   {-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
  .animateSlower {-webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out;}
      /*jquery helper classes*/
      .slideStart {opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); position:relative; top: 50px;}
      .slideEnd {opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); position:relative; top: 0px;}
  
  /*utility*/
  .textCenter		{text-align: center;}
  .textLeft		{text-align: left;}
  .textRight		{text-align: right;}
  .center			{margin: 0 auto; float: none; text-align: center;}
  .left			{float: left; text-align: left;}
  .right			{float: right; text-align: right;}
  .flex100 		{width:100% !important; float: none; clear: both; margin: 0 auto; text-align: center;}
  .flex95			{width:95% !important; float: none; clear: both; margin: 0 auto; text-align: center;}
  .flex90 		{width:90% !important; float: none; clear: both; margin: 0 auto; text-align: center;}
  
  .flexImage		{text-indent: -9999px; width:100%; background-size: 100% 100%;}
  .clearFix		{clear: both; float: left;}
  .noWrap			{white-space: nowrap;}
  .show			{display: block !important; visibility: visible !important; height: auto !important; width: auto !important; line-height: inherit !important;}
  .hide, .hidden	{display: none !important; visibility: hidden !important; height: 0px !important; width: 0px !important; line-height: 0px !important;}
  .visible		{visibility: visible !important;}
  .blur			{visibility: hidden !important;}
  .flexFix 		{line-height: 0px;}
  .table			{display: table;}
  .cell			{display: table-cell;}
  .overflow		{overflow: auto;}
  
  .max1200		{max-width: 1200px; box-sizing: border-box;}
  .max1100		{max-width: 1100px; box-sizing: border-box;}
  .max1000		{max-width: 1000px; box-sizing: border-box;}
  .max900			{max-width: 900px; box-sizing: border-box;}
  .max768			{max-width: 768px; box-sizing: border-box;}
  .max600			{max-width: 600px; box-sizing: border-box;}
  .max480			{max-width: 480px; box-sizing: border-box;}
  .max460			{max-width: 460px; box-sizing: border-box;}
  .max400			{max-width: 400px; box-sizing: border-box;}
  .max320			{max-width: 320px; box-sizing: border-box;}
  .max200			{max-width: 200px; box-sizing: border-box;}
  
  
  /*padding and margin*/
  .pt5{padding-top: 5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.pl5{padding-left:5px;}
  .pt10{padding-top: 10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}.pl10{padding-left:10px;}
  .pt20{padding-top: 20px;}.pr20{padding-right:20px;}.pb20{padding-bottom:20px;}.pl20{padding-left:20px;}
  .p0{padding:0px;}
  .mt10{margin-top:10px;}.mr10{margin-right:10px;}.mb10{margin-bottom:10px;}.ml10{margin-left:10px;}
  .mt20{margin-top:20px;}.mr20{margin-right:20px;}.mb20{margin-bottom:20px;}.ml20{margin-left:20px;}
  .m0{margin:0px;}
  
  /* larger than desktop HD */
  @media (max-width: 1200px) {
      /*utility*/
      .flex100at1200{width:100% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex95at1200{width:95% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex90at1200{width:90% !important; float: none !important; clear: both !important; margin: 0  auto !important; text-align: center !important;}
      .flex85at1200{width:85% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex80at1200{width:80% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex50at1200{width:50% !important; float: left !important; clear: none !important; margin: 0 auto !important; text-align: center !important;}
      .show1200{display: block !important; visibility: visible !important; height: auto !important; width: auto !important; line-height: inherit !important;}
      .hide1200{display: none !important; visibility: hidden !important; height: 0px !important; width: 0px !important; line-height: 0px !important;}
      .center1200{margin: 0 auto !important; float: none !important; text-align: center !important;} /*doesn't work with grid offsets*/
      .textCenter1200{text-align: center !important;}
      .textLeft1200{text-align: left !important;}
      .textRight1200{text-align: right !important;}
      
      /*padding and margin*/
      .pt10at1200{padding-top: 10px;}.pr10at1200{padding-right:10px;}.pb10at1200{padding-bottom:10px;}.pl10at1200{padding-left:10px;}
      .pt20at1200{padding-top: 20px;}.pr20at1200{padding-right:20px;}.pb20at1200{padding-bottom:20px;}.pl20at1200{padding-left:20px;}
      .p0at1200{padding:0px;}
      .mt10at1200{margin-top:10px;}.mr10at1200{margin-right:10px;}.mb10at1200{margin-bottom:10px;}.ml10at1200{margin-left:10px;}
      .mt20at1200{margin-top:20px;}.mr20at1200{margin-right:20px;}.mb20at1200{margin-bottom:20px;}.ml20at1200{margin-left:20px;}
      .m0at1200{margin:0px;}
  
  }
  
  /* larger than desktop */
  @media (max-width: 900px) {
      /*utility*/
      .flex100at900{width:100% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex95at900{width:95% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex90at900{width:90% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex85at900{width:85% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex80at900{width:80% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex50at900{width:50% !important; float: left !important; clear: none !important; margin: 0 auto !important; text-align: center !important;}
      /*.flex50at900.2col{width:50% !important; float: left !important; clear: none !important; margin: auto !important;}*/
      .show900{display: block !important; visibility: visible !important; height: auto !important; width: auto !important; line-height: inherit !important;}
      .hide900{display: none !important; visibility: hidden !important; height: 0px !important; width: 0px !important; line-height: 0px !important;}
      .center900{margin: 0 auto !important; float: none !important; text-align: center !important;} /*doesn't work with grid offsets*/
      .textCenter900{text-align: center !important;}
      .textLeft900{text-align: left !important;}
      .textRight900{text-align: right !important;}
  
      /*padding and margin*/
      .pt10at1200{padding-top: 10px;}.pr10at1200{padding-right:10px;}.pb10at1200{padding-bottom:10px;}.pl10at1200{padding-left:10px;}
      .pt20at1200{padding-top: 20px;}.pr20at1200{padding-right:20px;}.pb20at1200{padding-bottom:20px;}.pl20at1200{padding-left:20px;}
      .p0at1200{padding:0px;}
      .mt10at1200{margin-top:10px;}.mr10at1200{margin-right:10px;}.mb10at1200{margin-bottom:10px;}.ml10at1200{margin-left:10px;}
      .mt20at1200{margin-top:20px;}.mr20at1200{margin-right:20px;}.mb20at1200{margin-bottom:20px;}.ml20at1200{margin-left:20px;}
      .m0at1200{margin:0px;}
  }
  
  /* larger than tablet */
  @media (max-width: 768px) {
      /*utility*/
      .flex100at768{width:100% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex95at768{width:95% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex90at768{width:90% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex85at768{width:85% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex80at768{width:80% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex50at768{width:50% !important; float: left !important; clear: none !important; margin: 0 auto !important; text-align: center !important;}
      .show768{display: block !important; visibility: visible !important; height: auto !important; width: auto !important; line-height: inherit !important;}
      .hide768{display: none !important; visibility: hidden !important; height: 0px !important; width: 0px !important; line-height: 0px !important;}
      .center768{margin: 0 auto !important; float: none !important; text-align: center !important;} /*doesn't work with grid offsets*/
      .textCenter768{text-align: center !important;}
      .textLeft768{text-align: left !important;}
      .textRight768{text-align: right !important;}
  
      /*padding and margin*/
      .pt10at768{padding-top: 10px;}.pr10at768{padding-right:10px;}.pb10at768{padding-bottom:10px;}.pl10at768{padding-left:10px;}
      .pt20at768{padding-top: 20px;}.pr20at768{padding-right:20px;}.pb20at768{padding-bottom:20px;}.pl20at768{padding-left:20px;}
      .p0at768{padding:0px;}
      .mt10at768{margin-top:10px;}.mr10at768{margin-right:10px;}.mb10at768{margin-bottom:10px;}.ml10at768{margin-left:10px;}
      .mt20at768{margin-top:20px;}.mr20at768{margin-right:20px;}.mb20at768{margin-bottom:20px;}.ml20at768{margin-left:20px;}
      .m0at768{margin:0px;}
  
      /*spacer - up to 24x*/
      .spacer0x {height:4px !important; min-height:4px !important; max-height:4px !important;}.spacer1x {height:7px !important; min-height:7px !important; max-height:7px !important;}.spacer2x {height:15px !important; min-height:15px !important; max-height:15px !important;}.spacer3x {height:23px !important; min-height:23px !important; max-height:23px !important;}.spacer4x {height:30px !important; min-height:30px !important; max-height:30px !important;}.spacer5x {height:38px !important; min-height:38px !important; max-height:38px !important;}.spacer6x {height:45px !important; min-height:45px !important; max-height:45px !important;}.spacer7x {height:53px !important; min-height:53px !important; max-height:53px !important;}.spacer8x {height:60px !important; min-height:60px !important; max-height:60px !important;}.spacer9x {height:68px !important; min-height:68px !important; max-height:68px !important;}.spacer10x{height:75px !important; min-height:75px !important; max-height:75px !important;}.spacer11x{height:83px !important; min-height:83px !important; max-height:83px !important;}.spacer12x{height:90px !important; min-height:90px !important; max-height:90px !important;}.spacer13x{height:98px !important; min-height:98px !important; max-height:98px !important;}.spacer14x{height:105px !important; min-height:105px !important; max-height:105px !important;}.spacer15x{height:113px !important; min-height:113px !important; max-height:113px !important;}.spacer16x{height:120px !important; min-height:120px !important; max-height:120px !important;}.spacer17x{height:128px !important; min-height:128px !important; max-height:128px !important;}.spacer18x{height:135px !important; min-height:135px !important; max-height:135px !important;}.spacer19x{height:143px !important; min-height:143px !important; max-height:143px !important;}.spacer20x{height:150px !important; min-height:150px !important; max-height:150px !important;}.spacer21x{height:158px !important; min-height:158px !important; max-height:158px !important;}.spacer22x{height:165px !important; min-height:165px !important; max-height:165px !important;}.spacer23x{height:173px !important; min-height:173px !important; max-height:173px !important;}.spacer24x{height:180px !important; min-height:180px !important; max-height:180px !important;}
      
      /*fonts*/
      h1, .heading1, .header1 {font-size: 48px !important; line-height: 1.3;}
      h2, .heading2, .header2 {font-size: 36px !important; line-height: 1.3;}
      h3, .heading3, .header3 {font-size: 28px !important; line-height: 1.3;}
      h4, .heading4, .header4 {font-size: 24px !important; line-height: 1.3;}
      h5, .heading5, .header5 {font-size: 22px !important; line-height: 1.3;}
      h6, .heading6, .header6 {font-size: 20px !important; line-height: 1.3;}
  }
  
  /* larger than phablet */
  @media (max-width: 600px) {
      /*utility*/
      .flex100at600{width:100% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex95at600{width:95% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex90at600{width:90% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex85at600{width:85% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex80at600{width:80% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex50at600{width:50% !important; float: left !important; clear: none !important; margin: 0 auto !important; text-align: center !important;}
      .show600{display: block !important; visibility: visible !important; height: auto !important; width: auto !important; line-height: inherit !important;}
      .hide600{display: none !important; visibility: hidden !important; height: 0px !important; width: 0px !important; line-height: 0px !important;}
      .center600{margin: 0 auto !important; float: none !important; text-align: center !important;} /*doesn't work with grid offsets*/
      .textCenter600{text-align: center !important;}
      .textLeft600{text-align: left !important;}
      .textRight600{text-align: right !important;}
  
      /*padding and margin*/
      .pt10at600{padding-top: 10px;}.pr10at600{padding-right:10px;}.pb10at600{padding-bottom:10px;}.pl10at600{padding-left:10px;}
      .pt20at600{padding-top: 20px;}.pr20at600{padding-right:20px;}.pb20at600{padding-bottom:20px;}.pl20at600{padding-left:20px;}
      .p0at600{padding:0px;}
      .mt10at600{margin-top:10px;}.mr10at600{margin-right:10px;}.mb10at600{margin-bottom:10px;}.ml10at600{margin-left:10px;}
      .mt20at600{margin-top:20px;}.mr20at600{margin-right:20px;}.mb20at600{margin-bottom:20px;}.ml20at600{margin-left:20px;}
      .m0at600{margin:0px;}
  }
  
  /* larger than mobile */
  @media (max-width: 520px) {
      .flex100at520{width:100% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
  }
  
  /* larger than mobile */
  @media (max-width: 480px) {
      /*utility*/
      .flex100at480{width:100% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex95at480{width:95% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex90at480{width:90% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex85at480{width:85% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex80at480{width:80% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex50at480{width:50% !important; float: left !important; clear: none !important; margin: 0 auto !important; text-align: center !important;}
      .show480{display: block !important; visibility: visible !important; height: auto !important; width: auto !important; line-height: inherit !important;}
      .hide480{display: none !important; visibility: hidden !important; height: 0px !important; width: 0px !important; line-height: 0px !important;}
      .center480{margin: 0 auto !important; float: none !important; text-align: center !important;} /*doesn't work with grid offsets*/
      .textCenter480{text-align: center !important;}
      .textLeft480{text-align: left !important;}
      .textRight480{text-align: right !important;}
  
      /*padding and margin*/
      .pt10at480{padding-top: 10px;}.pr10at480{padding-right:10px;}.pb10at480{padding-bottom:10px;}.pl10at480{padding-left:10px;}
      .pt20at480{padding-top: 20px;}.pr20at480{padding-right:20px;}.pb20at480{padding-bottom:20px;}.pl20at480{padding-left:20px;}
      .p0at480{padding:0px;}
      .mt10at480{margin-top:10px;}.mr10at480{margin-right:10px;}.mb10at480{margin-bottom:10px;}.ml10at480{margin-left:10px;}
      .mt20at480{margin-top:20px;}.mr20at480{margin-right:20px;}.mb20at480{margin-bottom:20px;}.ml20at480{margin-left:20px;}
      .m0at480{margin:0px;}
  
      /*spacer - up to 24x*/
      .spacer0x{height:3px !important; min-height:3px !important; max-height:3px !important;}.spacer1x{height:5px !important; min-height:5px !important; max-height:5px !important;}.spacer2x{height:10px !important; min-height:10px !important; max-height:10px !important;}.spacer3x{height:15px !important; min-height:15px !important; max-height:15px !important;}.spacer4x{height:20px !important; min-height:20px !important; max-height:20px !important;}.spacer5x{height:25px !important; min-height:25px !important; max-height:25px !important;}.spacer6x{height:30px !important; min-height:30px !important; max-height:30px !important;}.spacer7x{height:35px !important; min-height:35px !important; max-height:35px !important;}.spacer8x{height:40px !important; min-height:40px !important; max-height:40px !important;}.spacer9x{height:45px !important; min-height:45px !important; max-height:45px !important;}.spacer10x{height:50px !important; min-height:50px !important; max-height:50px !important;}.spacer11x{height:55px !important; min-height:55px !important; max-height:55px !important;}.spacer12x{height:60px !important; min-height:60px !important; max-height:60px !important;}.spacer13x{height:65px !important; min-height:65px !important; max-height:65px !important;}.spacer14x{height:70px !important; min-height:70px !important; max-height:70px !important;}.spacer15x{height:75px !important; min-height:75px !important; max-height:75px !important;}.spacer16x{height:80px !important; min-height:80px !important; max-height:80px !important;}.spacer17x{height:85px !important; min-height:85px !important; max-height:85px !important;}.spacer18x{height:90px !important; min-height:90px !important; max-height:90px !important;}.spacer19x{height:95px !important; min-height:95px !important; max-height:95px !important;}.spacer20x{height:100px !important; min-height:100px !important; max-height:100px !important;}.spacer21x{height:105px !important; min-height:105px !important; max-height:105px !important;}.spacer22x{height:110px !important; min-height:110px !important; max-height:110px !important;}.spacer23x{height:115px !important; min-height:115px !important; max-height:115px !important;}.spacer24x{height:120px !important; min-height:120px !important; max-height:120px !important;}
  
      /*fonts*/
      h1, .heading1, .header1 {font-size: 36px !important; line-height: 1.3;}
      h2, .heading2, .header2 {font-size: 28px !important; line-height: 1.3;}
      h3, .heading3, .header3 {font-size: 24px !important; line-height: 1.3;}
      h4, .heading4, .header4 {font-size: 22px !important; line-height: 1.3;}
      h5, .heading5, .header5 {font-size: 20px !important; line-height: 1.3;}
      h6, .heading6, .header6 {font-size: 18px !important; line-height: 1.3;}
  }
  
  /* mobile */
  /*@media (min-width: 1px) and (max-width: 320px) {*/
  @media (max-width: 320px) {
      /*utility*/
      .flex100at320{width:100% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex95at320{width:95% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex90at320{width:90% !important; float: none !important; clear: both !important; margin: 0 auto `!important; text-align: center !important;}
      .flex85at320{width:85% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex80at320{width:80% !important; float: none !important; clear: both !important; margin: 0 auto !important; text-align: center !important;}
      .flex50at320{width:50% !important; float: left !important; clear: none !important; margin: 0 auto !important; text-align: center !important;}
      .show320{display: block !important; visibility: visible !important; height: auto !important; width: auto !important; line-height: inherit !important;}
      .hide320{display: none !important; visibility: hidden !important; height: 0px !important; width: 0px !important; line-height: 0px !important;}
      .center320{margin: 0 auto !important; float: none !important; text-align: center !important;} /*doesn't work with grid offsets*/
      .textCenter320{text-align: center !important;}
      .textLeft320{text-align: left !important;}
      .textRight320{text-align: right !important;}
  
      /*fonts*/
      h1, .heading1, .header1 {font-size: 28px !important; line-height: 1.3;}
      h2, .heading2, .header2 {font-size: 24px !important; line-height: 1.3;}
      h3, .heading3, .header3 {font-size: 22px !important; line-height: 1.3;}
      h4, .heading4, .header4 {font-size: 20px !important; line-height: 1.3;}
      h5, .heading5, .header5 {font-size: 18px !important; line-height: 1.3;}
      h6, .heading6, .header6 {font-size: 16px !important; line-height: 1.3;}
  
      /*padding and margin*/
      .pt10at320{padding-top: 10px;}.pr10at320{padding-right:10px;}.pb10at320{padding-bottom:10px;}.pl10at320{padding-left:10px;}
      .pt20at320{padding-top: 20px;}.pr20at320{padding-right:20px;}.pb20at320{padding-bottom:20px;}.pl20at320{padding-left:20px;}
      .p0at320{padding:0px;}
      .mt10at320{margin-top:10px;}.mr10at320{margin-right:10px;}.mb10at320{margin-bottom:10px;}.ml10at320{margin-left:10px;}
      .mt20at320{margin-top:20px;}.mr20at320{margin-right:20px;}.mb20at320{margin-bottom:20px;}.ml20at320{margin-left:20px;}
      .m0at320{margin:0px;}
  
      /*grid*/
      .row {margin-left:0% !important; width: 100% !important;}
      .column, .columns {margin-left: 0 auto !important;}
      .column:first-child, .columns:first-child {margin-left: 0;}
  }