/*
*
*  Eight-column grid active
*  ----------------------------------------------------------------------
*  Margin   | #  1     2     3     4     5     6     7     8   |   Margin
*  5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%
*	
*
*/


.break { width: 100%; height: 1px; margin: 0; padding: 0; page-break-after:always; clear:both; }

@media screen and (min-width: 1em) {
	

.entry, #entrycol {position: relative;}

.wp_social_single_share_wrapper{ display: block; position: relative; top: 0; left:0; }
.wp_social_share_cat_wrapper { display: block; position: relative; top: auto; left:auto; }		
	
  input, textarea { width: 180px; }
  /*nav li { display: block; }*/
  .logo { width: 90px; margin-top: 21px; }
  #content-nav { margin: 0 -70px 50px -2px; text-align: left; }

/*  .social-icons { bottom: 0; width: 39px; right: 0; position: fixed; }
*/  
  .sidebar { width: 100%; float: none; padding-left: 0px; margin-left: 0px; height: auto; }
  #wrapper { border-right: 10px solid white; border-left: 10px solid white; }
  body {
    /* Reset baseline grid to 16/16 = 1 */
  
    font-size: 1em;
  }
  #twoway .wrapper {
    float: left;
    width: 50%;
  }
}
/* @media screen and (min-width: 720px) */
@media screen and (min-width: 45em) {
	

.wp_social_single_share_wrapper{ display: block; position: relative; top: 0; left:0; }
.wp_social_share_cat_wrapper { display: block; position: relative; top: auto; left:auto; }		
	
  input, textarea { width: 180px; }
  nav li { display: block; }
  .logo { width: 90px; margin-top: 21px; }
  #content-nav { margin: 0 -70px 50px -2px; text-align: left; }
  /*.social-icons { width: 39px; right: 0; position: fixed; }*/
  .sidebar { width: 100%; float: none; padding-left: 0px; margin-left: 0px; height: auto; }
  #wrapper { border-right: 10px solid white; border-left: 10px solid white; }
   body {
    /* Reset baseline grid to 16/16 = 1 */
  
    font-size: 1em;
  }
  #twoway .wrapper {
    float: left;
    width: 50%;
  }
}
/* @media screen and (min-width: 888px) */
@media screen and (min-width: 55.5em) {


.wp_social_single_share_wrapper{ display: block; position: relative; top: 0; left:0; }
.wp_social_share_cat_wrapper { display: block; position: relative; top: auto; left:auto; }		
	
  input, textarea { width: 300px; }
  nav li { display: inline-block; margin: auto .7em; }
  .sidebar { width: 100%; float: right; padding-left: 30px; margin-left: 30px; background: transparent; height: auto;}
  #content-nav { margin: 0 -70px 50px 0; text-align: center; }
  /*.social-icons { width: 189px; float: right; position: relative; }*/
  #wrapper { border-right: 10px solid white; border-left: 10px solid white; }
  .logo { width: 520px; margin-top: 0; display: inline-block; }
   body {
    /* Zoom baseline grid to 17/16 = 1.0625 */
  
    font-size: 1.0625em;
  }
}
/* @media screen and (min-width: 984px) */
@media screen and (min-width: 61.5em) {
	

.wp_social_single_share_wrapper{ position: relative; }
.wp_social_share_cat_wrapper { display: inline; position: absolute; top: 0; left:-90px; }	
	
  input, textarea { width: 300px; }
  nav li { display: inline-block; margin: auto .7em; }
  .sidebar { width: 100%; float: right; padding-left: 30px; margin: 30px 0 0 30px; background: transparent; height: auto;}
  #content-nav { margin: 0 -70px 50px 0; text-align: center; }
  /*.social-icons { width: 189px; float: right; position: relative; }*/
  #wrapper { border-right: 30px solid white; border-left: 30px solid white; }
  .logo { width: 520px; margin-top: 0; display: inline-block; }
  body {
    /* Reset baseline grid to 16/16 = 1.0 */
  
    font-size: 1em;
  }
  header, #twoway {
    margin: 0 16.666666666666664%;
  }
}
/* @media screen and (min-width: 1200px) */
@media screen and (min-width: 75em) {
	

.wp_social_single_share_wrapper{ position: relative; }
.wp_social_share_cat_wrapper { display: inline; position: absolute; top: 0; left:-90px; }	
	
  input, textarea { width: 300px; }
  nav li { display: inline-block; margin: auto .7em; }
  /*.sidebar { width: 190px; float: right; padding-left: 30px; margin-left: 30px; background: white; height: auto;}*/
  #content-nav { margin: 0 -70px 50px 0; text-align: center; }
 /* .social-icons { width: 189px; float: right; position: relative; }*/
  .logo { width: 520px; margin-top: 0; display: inline-block; }
  #wrapper { border-right: 50px solid white; border-left: 50px solid white; }
  body {
    /* Zoom baseline grid to 17/16 = 1.0625 */
    font-size: 1.0625em;
  }
}
/* @media screen and (min-width: 1392px) */
@media screen and (min-width: 87em) {
	

.wp_social_single_share_wrapper{ position: relative; }
.wp_social_share_cat_wrapper { display: inline; position: absolute; top: 0; left:-90px; }	
	
  input, textarea { width: 300px; }
  nav li { display: inline-block; margin: auto .7em; }
  /*.sidebar { width: 190px; float: right; padding-left: 30px; margin-left: 30px; background: white; height: auto;}*/
  #content-nav { margin: 0 -70px 50px 0; text-align: center; }
  /*.social-icons { width: 189px; float: right; position: relative; }*/
  .logo { width: 520px; margin-top: 0; display: inline-block; }
  #wrapper { border-right: 50px solid white; border-left: 50px solid white; }
  body {
    /* Reset baseline grid to 16/16 = 1.0 */
  
    font-size: 1em;
  }
  header, #twoway {
    margin: 0 27.77777777777778%;
  }
}
/* @media screen and (min-width: 1680px) */
@media screen and (min-width: 105em) {
	
  input, textarea { width: 300px; }
  nav li { display: inline-block; margin: auto .7em; }
  .sidebar { width: 100%; float: right; padding-left: 30px; margin-left: 30px; background: white; height: auto;}
  #content-nav { margin: 0 -70px 50px 0; text-align: center; }
  /*.social-icons { width: 189px; float: right; position: relative; }*/
  .logo { width: 520px; margin-top: 0; display: inline-block; }  
  #wrapper { border-right: 50px solid white; border-left: 50px solid white; }
  body {
    /* Zoom baseline grid to 17/16 = 1.0625 */
  
    font-size: 1.0625em;
  }
}


@media only screen and (max-width : 860px) {
  .social-icons {
      right: 0  !important;
  }

}


@media only screen and (max-width : 640px) {
  .social-icons {
      right: 0  !important;
      top: -207px  !important;
  }

  .social-icons span {
    clear: both;
  }

  .social-icons span a img {
    padding-bottom: 0 !important;
  }


}





/*
These are easy to forget
*/

img::selection {
background: #e3c86f;
}
img::-moz-selection {
background: #e3c86f;
}

/*
Style overrides for IE6-8
http://jonikorpi.com/leaving-old-IE-behind/
*/

.ie {

}


/*
An easy way to zoom your entire layout in or out (as long as it's set in ems).
Just change the media queries to activate them.
Assuming your base font-size is 16:
- the first one zooms out by a factor of (16-2)/16 = 0.875
- the second one zooms in by a factor of (16+2)/16 = 1.125  
*/

@media screen and (max-width: 1px) {
body {
font-size: ($font-size - 2) / $em;
}
}

@media screen and (max-width: 1px) {
body {
font-size: ($font-size + 2) / $em;
}
}






/*  SECTIONS  ============================================================================= */

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

/*  GROUPING  ============================================================================= */


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

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}









/*  GRID OF FIVE   ============================================================================= */

	
.span_5_of_5 {
	width: 100%;
}

.span_4_of_5 {
  	width: 79.68%; 
}

.span_3_of_5 {
  	width: 59.36%; 
}

.span_2_of_5 {
  	width: 39.04%;
}

.span_1_of_5 {
  	width: 18.72%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 1250px) {
	.span_5_of_5 {
		width: 100%; 
	}
	.span_4_of_5 {
		width: 100%; 
	}
	.span_3_of_5 {
		width: 100%; 
	}
	.span_2_of_5 {
		width: 100%; 
	}
	.span_1_of_5 {
		width: 100%; 
	}
}






/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	/*width: 32.2%; */
  width: 100%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}