/* -------------------------------------------------------------- 
   
   grid.css
   * Sets up an easy-to-use grid of 24 columns.
      
-------------------------------------------------------------- */

/* A container should group all your columns. */
#envoyconnect .container, 
#envoyconnectpanels-wrapper .container, 
.envoyconnect .container {
  width: 100%;
  margin: 0 auto;
}

/*	------------------------------------------------------- 
	FIXED PERCENTAGE RESPONSIVE GRID FOR PANELS AND CART
	------------------------------------------------------- */

#envoyconnect .column, #envoyconnect div.span-1, #envoyconnect div.span-2, #envoyconnect div.span-3, #envoyconnect div.span-4, #envoyconnect div.span-5, #envoyconnect div.span-6, #envoyconnect div.span-7, #envoyconnect div.span-8, #envoyconnect div.span-9, #envoyconnect div.span-10, #envoyconnect div.span-11, #envoyconnect div.span-12, #envoyconnect div.span-13, #envoyconnect div.span-14, #envoyconnect div.span-15, #envoyconnect div.span-16, #envoyconnect div.span-17, #envoyconnect div.span-18, #envoyconnect div.span-19, #envoyconnect div.span-20, #envoyconnect div.span-21, #envoyconnect div.span-22, #envoyconnect div.span-23, #envoyconnect div.span-24 {
  float: left;
  margin: 0 .166666666% 0 0; 
}

#envoyconnect .span-1 {width:4%;}
#envoyconnect .span-2 {width:8%;}
#envoyconnect .span-3 {width:12%;}
#envoyconnect .span-4 {width:16%;}
#envoyconnect .span-5 {width:20%;}
#envoyconnect .span-6 {width:24%;}
#envoyconnect .span-7 {width:28%;}
#envoyconnect .span-8 {width:32%;}
#envoyconnect .span-9 {width:36%;}
#envoyconnect .span-10 {width:40%;}
#envoyconnect .span-11 {width:44%;}
#envoyconnect .span-12 {width:48%;}
#envoyconnect .span-13 {width:52%;}
#envoyconnect .span-14 {width:56%;}
#envoyconnect .span-15 {width:60%;}
#envoyconnect .span-16 {width:64%;}
#envoyconnect .span-17 {width:68%;}
#envoyconnect .span-18 {width:72%;}
#envoyconnect .span-19 {width:76%;}
#envoyconnect .span-20 {width:80%;}
#envoyconnect .span-21 {width:84%;}
#envoyconnect .span-22 {width:88%;}
#envoyconnect .span-23 {width:92%;}
#envoyconnect .span-24, #envoyconnect div.span-24 {width:100%;margin:0;}

#envoyconnect .append-1  { padding-right: 4%; }
#envoyconnect .append-2  { padding-right: 8%; }
#envoyconnect .append-3  { padding-right: 12%; }
#envoyconnect .append-4  { padding-right: 16%; }
#envoyconnect .append-5  { padding-right: 20%; }
#envoyconnect .append-6  { padding-right: 24%; }
#envoyconnect .append-7  { padding-right: 28%; }
#envoyconnect .append-8  { padding-right: 32%; }
#envoyconnect .append-9  { padding-right: 36%; }
#envoyconnect .append-10 { padding-right: 40%; }
#envoyconnect .append-11 { padding-right: 44%; }
#envoyconnect .append-12 { padding-right: 48%; }
#envoyconnect .append-13 { padding-right: 52%; }
#envoyconnect .append-14 { padding-right: 56%; }
#envoyconnect .append-15 { padding-right: 60%; }
#envoyconnect .append-16 { padding-right: 64%; }
#envoyconnect .append-17 { padding-right: 68%; }
#envoyconnect .append-18 { padding-right: 72%; }
#envoyconnect .append-19 { padding-right: 76%; }
#envoyconnect .append-20 { padding-right: 80%; }
#envoyconnect .append-21 { padding-right: 84%; }
#envoyconnect .append-22 { padding-right: 88%; }
#envoyconnect .append-23 { padding-right: 92%; } 

#envoyconnect .prepend-1  { padding-left: 4%; }  
#envoyconnect .prepend-2  { padding-left: 8%; } 
#envoyconnect .prepend-3  { padding-left: 12%; } 
#envoyconnect .prepend-4  { padding-left: 16%; } 
#envoyconnect .prepend-5  { padding-left: 20%; } 
#envoyconnect .prepend-6  { padding-left: 24%; } 
#envoyconnect .prepend-7  { padding-left: 28%; } 
#envoyconnect .prepend-8  { padding-left: 32%; } 
#envoyconnect .prepend-9  { padding-left: 36%; } 
#envoyconnect .prepend-10 { padding-left: 40%; } 
#envoyconnect .prepend-11 { padding-left: 44%; } 
#envoyconnect .prepend-12 { padding-left: 48%; } 
#envoyconnect .prepend-13 { padding-left: 52%; } 
#envoyconnect .prepend-14 { padding-left: 56%; } 
#envoyconnect .prepend-15 { padding-left: 60%; } 
#envoyconnect .prepend-16 { padding-left: 64%; } 
#envoyconnect .prepend-17 { padding-left: 68%; } 
#envoyconnect .prepend-18 { padding-left: 72%; } 
#envoyconnect .prepend-19 { padding-left: 76%; } 
#envoyconnect .prepend-20 { padding-left: 80%; } 
#envoyconnect .prepend-21 { padding-left: 84%; } 
#envoyconnect .prepend-22 { padding-left: 88%; } 
#envoyconnect .prepend-23 { padding-left: 92%; } 


/*	------------------------------------------------------- 
	FLUID RESPONSIVE GRID FOR ALL PURPOSE USE
	------------------------------------------------------- */

.envoyconnect .column, .envoyconnect .span-1, .envoyconnect .span-2, .envoyconnect .span-3, .envoyconnect .span-4, .envoyconnect .span-5, .envoyconnect .span-6, .envoyconnect .span-7, .envoyconnect .span-8, .envoyconnect .span-9, .envoyconnect .span-10, .envoyconnect .span-11, .envoyconnect .span-12, .envoyconnect .span-13, .envoyconnect .span-14, .envoyconnect .span-15, .envoyconnect .span-16, .envoyconnect .span-17, .envoyconnect .span-18, .envoyconnect .span-19, .envoyconnect .span-20, .envoyconnect .span-21, .envoyconnect .span-22, .envoyconnect .span-23, .envoyconnect .span-24 {
	float: left;
	margin: 0;
	width: 100%; 
}

@media screen and (min-width: 950px) {

.envoyconnect .column, .envoyconnect .span-1, .envoyconnect .span-2, .envoyconnect .span-3, .envoyconnect .span-4, .envoyconnect .span-5, .envoyconnect .span-6, .envoyconnect .span-7, .envoyconnect .span-8, .envoyconnect .span-9, .envoyconnect .span-10, .envoyconnect .span-11, .envoyconnect .span-12, .envoyconnect .span-13, .envoyconnect .span-14, .envoyconnect .span-15, .envoyconnect .span-16, .envoyconnect .span-17, .envoyconnect .span-18, .envoyconnect .span-19, .envoyconnect .span-20, .envoyconnect .span-21, .envoyconnect .span-22, .envoyconnect .span-23, .envoyconnect .span-24 {
	margin: 0 .166666666% 0 0;
}

.envoyconnect .span-1 {width:4%;}
.envoyconnect .span-2 {width:8%;}
.envoyconnect .span-3 {width:12%;}
.envoyconnect .span-4 {width:16%;}
.envoyconnect .span-5 {width:20%;}
.envoyconnect .span-6 {width:24%;}
.envoyconnect .span-7 {width:28%;}
.envoyconnect .span-8 {width:32%;}
.envoyconnect .span-9 {width:36%;}
.envoyconnect .span-10 {width:40%;}
.envoyconnect .span-11 {width:44%;}
.envoyconnect .span-12 {width:48%;}
.envoyconnect .span-13 {width:52%;}
.envoyconnect .span-14 {width:56%;}
.envoyconnect .span-15 {width:60%;}
.envoyconnect .span-16 {width:64%;}
.envoyconnect .span-17 {width:68%;}
.envoyconnect .span-18 {width:72%;}
.envoyconnect .span-19 {width:76%;}
.envoyconnect .span-20 {width:80%;}
.envoyconnect .span-21 {width:84%;}
.envoyconnect .span-22 {width:88%;}
.envoyconnect .span-23 {width:92%;}
.envoyconnect .span-24, .envoyconnect .span-24 {width:100%;margin:0;}
/*
	.envoyconnect .span-1  {width:30px;}
	.envoyconnect .span-2  {width:70px;}
	.envoyconnect .span-3  {width:110px;}
	.envoyconnect .span-4  {width:150px;}
	.envoyconnect .span-5  {width:190px;}
	.envoyconnect .span-6  {width:230px;}
	.envoyconnect .span-7  {width:270px;}
	.envoyconnect .span-8  {width:310px;}
	.envoyconnect .span-9  {width:350px;}
	.envoyconnect .span-10 {width:390px;}
	.envoyconnect .span-11 {width:430px;}
	.envoyconnect .span-12 {width:470px;}
	.envoyconnect .span-13 {width:510px;}
	.envoyconnect .span-14 {width:550px;}
	.envoyconnect .span-15 {width:590px;}
	.envoyconnect .span-16 {width:630px;}
	.envoyconnect .span-17 {width:670px;}
	.envoyconnect .span-18 {width:710px;}
	.envoyconnect .span-19 {width:750px;}
	.envoyconnect .span-20 {width:790px;}
	.envoyconnect .span-21 {width:830px;}
	.envoyconnect .span-22 {width:870px;}
	.envoyconnect .span-23 {width:910px;}
	.envoyconnect .span-24, .envoyconnect .span-24 {width:950px;margin:0;}
*/
/*	
	.envoyconnect .append-1 {padding-right:40px;}
	.envoyconnect .append-2 {padding-right:80px;}
	.envoyconnect .append-3 {padding-right:120px;}
	.envoyconnect .append-4 {padding-right:160px;}
	.envoyconnect .append-5 {padding-right:200px;}
	.envoyconnect .append-6 {padding-right:240px;}
	.envoyconnect .append-7 {padding-right:280px;}
	.envoyconnect .append-8 {padding-right:320px;}
	.envoyconnect .append-9 {padding-right:360px;}
	.envoyconnect .append-10 {padding-right:400px;}
	.envoyconnect .append-11 {padding-right:440px;}
	.envoyconnect .append-12 {padding-right:480px;}
	.envoyconnect .append-13 {padding-right:520px;}
	.envoyconnect .append-14 {padding-right:560px;}
	.envoyconnect .append-15 {padding-right:600px;}
	.envoyconnect .append-16 {padding-right:640px;}
	.envoyconnect .append-17 {padding-right:680px;}
	.envoyconnect .append-18 {padding-right:720px;}
	.envoyconnect .append-19 {padding-right:760px;}
	.envoyconnect .append-20 {padding-right:800px;}
	.envoyconnect .append-21 {padding-right:840px;}
	.envoyconnect .append-22 {padding-right:880px;}
	.envoyconnect .append-23 {padding-right:920px;}
	
	.envoyconnect .prepend-1 {padding-left:40px;}
	.envoyconnect .prepend-2 {padding-left:80px;}
	.envoyconnect .prepend-3 {padding-left:120px;}
	.envoyconnect .prepend-4 {padding-left:160px;}
	.envoyconnect .prepend-5 {padding-left:200px;}
	.envoyconnect .prepend-6 {padding-left:240px;}
	.envoyconnect .prepend-7 {padding-left:280px;}
	.envoyconnect .prepend-8 {padding-left:320px;}
	.envoyconnect .prepend-9 {padding-left:360px;}
	.envoyconnect .prepend-10 {padding-left:400px;}
	.envoyconnect .prepend-11 {padding-left:440px;}
	.envoyconnect .prepend-12 {padding-left:480px;}
	.envoyconnect .prepend-13 {padding-left:520px;}
	.envoyconnect .prepend-14 {padding-left:560px;}
	.envoyconnect .prepend-15 {padding-left:600px;}
	.envoyconnect .prepend-16 {padding-left:640px;}
	.envoyconnect .prepend-17 {padding-left:680px;}
	.envoyconnect .prepend-18 {padding-left:720px;}
	.envoyconnect .prepend-19 {padding-left:760px;}
	.envoyconnect .prepend-20 {padding-left:800px;}
	.envoyconnect .prepend-21 {padding-left:840px;}
	.envoyconnect .prepend-22 {padding-left:880px;}
	.envoyconnect .prepend-23 {padding-left:920px;}
*/
}

/*	------------------------------------------------------- 
	SHARED RESPONIVE REQUISITES
	------------------------------------------------------- */

/* The last column in a row needs this class. */
#envoyconnect .last, 
#envoyconnect div.last,
.envoyconnect .last, 
.envoyconnect div.last { margin-right: 0; }

/* Border on right hand side of a column. */
#envoyconnect div.border, .envoyconnect div.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
#envoyconnect div.colborder, .envoyconnect div.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}

/*	------------------------------------------------------- 
	SHARED RESPONIVE REQUISITES
	------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */
#envoyconnect .prepend-top, .envoyconnect .prepend-top { 
	margin-top: 1.5em; 
}
#envoyconnect .append-bottom, .envoyconnect .append-bottom { 
	margin-bottom: 1.5em; 
}

/* Use a .box to create a padded box inside a column.  */ 
#envoyconnect .box, .envoyconnect .box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}

/* Use this to create a horizontal ruler across a column. */
#envoyconnect hr, 
.envoyconnect hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
#envoyconnect hr.space, 
.envoyconnect hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

#envoyconnect .clearfix:after, 
.envoyconnect .clearfix:after, 
#envoyconnect .container:after, 
.envoyconnect .container:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    overflow:hidden; 
}
#envoyconnect .clearfix, 
.envoyconnect .clearfix, 
#envoyconnect .container, 
.envoyconnect .container {
	display: block;
	background-color: transparent !important;
}

/* Regular clearing
   apply to column that should drop below previous ones. */

#envoyconnect .clear, .envoyconnect .clear { clear:both; }