@charset "UTF-8";
/* CSS Document */

.container {
	  margin: 20px;
	  margin-bottom:40px;
}

.container a:link { color:#FFF; text-decoration:none; font-weight:600;}
.container a:visited { color:#FFF; text-decoration:none; font-weight:600;}
.container a:hover { color:#FFF; text-decoration:underline; font-weight:600; }
.container a:active { color:#FFF; text-decoration:undeline; font-weight:600;}

.container h2 a:link { color:#FFF; text-decoration:none; font-weight:400;}
.container h2 a:visited { color:#FFF; text-decoration:none; font-weight:400;}
.container h2 a:hover { color:#FFF; text-decoration:underline; font-weight:400; }
.container h2 a:active { color:#FFF; text-decoration:undeline; font-weight:400; }

.container a:link img { }
.container a:visited img {}
.container a:hover img { opacity: 0.85; filter: alpha(opacity=85)} 
.container a:active img { opacity: 0.85; filter: alpha(opacity=85)}

.gridrow img {
	margin-bottom: 10px;
}

.gridrow {
  display: grid;
  /* W(adjusted) = W(individual) - (1rem * 1/2) */
  /*grid-template-columns: calc(50% - 1rem * 1/2) calc(50% - 1rem * 1/2);*/
  grid-template-columns: minmax(250px, 540px) minmax(250px, 540px);
  grid-column-gap: 30px; 
  
  margin: 0 auto;
  max-width: 1000px;
}

.topbar {  
  margin: 0 auto;
  max-width: 1000px;
  margin-bottom: 20px;
}

.bottombar {  
  margin: 0 auto;
  max-width: 1000px;
  margin-bottom: 20px;
  
  text-align:right;
  padding-right: 10px;
  font-size: 0.8em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.2;
  color:#7b7b7b;
  margin-top: 10px;
}

.bottombar a:link { color:#7b7b7b; text-decoration:none; font-weight:400;}
.bottombar a:visited { color:#7b7b7b; text-decoration:none; font-weight:400;}
.bottombar a:hover { color:#7b7b7b; text-decoration:underline; font-weight:400; }
.bottombar a:active { color:#7b7b7b; text-decoration:undeline; font-weight:400; }

.gridcell {
  padding: 1rem;
 
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.8em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.5;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
  /*background-color:#F2F2F2;*/
  background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
  /*background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);*/
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.0;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.0; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }

@media (max-width: 580px) {
	.gridrow { 
		display: block;
		position:relative;
	}
	
	.gridcell {
		margin-bottom:20px;
	}
}