/**************************************/
/*   css to make the page responsive  */
 
/* ensure that all HTML elements have the box-sizing property set to border-box. 
   This makes sure that the padding and border are included in the total width 
   and height of the elements. */ 
   * {
	box-sizing: border-box;
  }
  
  /* define columns width    --- default width */  
  .col-1 { width: 8.33%; }
  .col-2 { width: 16.66%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.33%; }
  .col-5 { width: 41.66%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.33%; }
  .col-8 { width: 66.66%; }
  .col-9 { width: 75%; }
  .col-10 { width: 83.33%; }
  .col-11 { width: 91.66%; }
  .col-12 { width: 100%; }
  

  /* set these columns to float left, and have a padding */
  [class*="col-"] {
	float: left;
	padding: 15px;
  }
  
  
  /*  using a media query to insert a breakpoint between tablets and mobile phones */
  
  /* For mobile phones: */
  [class*="col-"] {
	width: 100%;
  }
  
  @media only screen and (min-width: 600px) {
	/* For tablets: */
  /*   .col-s-1 {width: 8.33%;}
	.col-s-2 {width: 16.66%;}
	.col-s-3 {width: 25%;}
	.col-s-4 {width: 33.33%;}
	.col-s-5 {width: 41.66%;}
	.col-s-6 {width: 50%;}
	.col-s-7 {width: 58.33%;}
	.col-s-8 {width: 66.66%;}
	.col-s-9 {width: 75%;}
	.col-s-10 {width: 83.33%;}
	.col-s-11 {width: 91.66%;}
	.col-s-12 {width: 100%;} */
  }
  
  @media only screen and (min-width: 768px) {
	/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
  }
  
  .row { width: 100%; }
  
  /* change font and size with media queries */ 
  
  /* If the screen size is 600px or less, set the font-size and padding */
  @media only screen and (max-width: 600px) {
	.title h2 {
	   font-size: 24px;
	} 
	.title p {
	   font-size: 20px;
	}  
	.logo {       
	   font-size: 36px;
	}
	.container {
	   padding-left: 24px;
	   padding-right: 20px;
	}  
	.title {  
	   line-height: 40px;
	   padding: 30px 20px 20px 40px;
	}
  }
  
  
@media only screen and (max-width: 600px) {
	#fadeshow {
	  display: none;
	}
}