/*  Design style tiles in the browser with SCSS! Fork this in CodePen and make your own tiles. Share your tiles with clients with the Full Page link. Go CodePen Pro and update styles on the fly in Live View in a meeting with your client. It's responsive, too. Get your in-browser design on. (Documentation in the JS tab.) */
/* Web Fonts @import */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,800italic,400,800);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);
/* BASIC STYLING
-------------------------------- */
/* Colours */
/* Basic typography */
/* font color in <header> */
/* Basic button styling */
/* Basic texture swatch styling */
/* end basic styling */
/* ADVANCED STYLING
-------------------------------- */
/* Main */
/* Header */
/* Colour swatches */
/* Texture swatches */
/* Buttons */
/* Typography samples */
/* Adjectives */
/* Footer */
/* end advanced styling */
/* SETTINGS
-------------------------------- */
/* Typography samples settings */
/* Grid settings */
/* Swatch grid settings (for the boxes containing Possible Colors and Textures */
/* end settings */
/* ================================================== */
/* Clearfix
-------------------- */
.group:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

* html .group {
  zoom: 1;
}

/* IE6 */
*:first-child + html .group {
  zoom: 1;
}

/* IE7 */
/* General styling
-------------------- */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  background: white;
  font: 1.6em "Droid Serif", serif;
  line-height: 1.5;
}

header, .main, footer {
  max-width: 81em;
  margin: 0 auto;
}

/* Header
-------------------- */
.header-wrapper {
  background: #9f1c19;
}

header {
  padding: 20px;
  background: #9f1c19;
}

header h1, header hgroup {
  position: relative;
  float: left;
}

header h1 {
  font: bold 3em/1 "Open Sans", sans-serif;
  color: white;
  text-transform: uppercase;
  letter-spacing: -2px;
  padding-right: .75em;
}

header h2 {
  font: bold 1.6em "Open Sans", sans-serif;
  color: rgba(255, 255, 255, 0.95);
  padding-left: 200px;
}

header h3 {
  font: italic 1.2em "Open Sans", sans-serif;
  color: rgba(255, 255, 255, 0.95);
}

header h4 {
  font: 0.8em "Droid Serif", serif;
  color: rgba(255, 255, 255, 0.95);
}

.project-title {
  position: relative;
  float: left;
}

/* Main
-------------------- */
.main {
  padding-top: 5%;
  background: white;
  width: 50%;
  margin-top: 20px;
  padding-bottom: 5%;
  
}

.section-heading {
  /* e.g., h3's like "Possible colors", "Textures" */
  font: italic 1.3em "Open Sans", sans-serif;
  color: #777;
  margin-bottom: .5em;
}

.main p {
  margin-bottom: .5em;
}

section {
  margin-bottom: 2em;
}

/* Swatches
-------------------- */
[class*="swatch-"] {
  height: 5em;
  border: 4px solid white;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
}

.color-swatch-1 {
  background: #9f1c19;
}

.color-swatch-2 {
  background: #65d1fb;
}

.color-swatch-3 {
  background: #05abeb;
}

.color-swatch-4 {
  background: #ff8500;
}

.color-swatch-5 {
  background: #ff241f;
}

/* Texture swatches
-------------------- */
[class*="texture-swatch-"] {
  overflow: hidden;
  height: 8em;
  border: 4px solid white;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
}

.texture-swatch-1 {
  background: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/pw_maze_white.png") top left repeat;
}

.texture-swatch-2 {
  background: url("https://subtlepatterns.com/patterns/white_paperboard.png") top left repeat;
}

.texture-swatch-3 {
  background: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/subtle_grunge.png") top left repeat;
}

/* Buttons
--------------------- */
[class*="button-"] {
  display: inline-block;
  position: relative;
  margin-right: 1em;
  margin-bottom: 1em;
}

.button-1 {
  padding: 1em;
  border-radius: 4px;
  background: #05abeb;
  text-align: center;
  text-decoration: none;
  font: bold 1.25em/1 "Open Sans", sans-serif;
  letter-spacing: 1px;
  color: white;
  text-transform: uppercase;
  text-shadow: 0px -1px 0px #0374a0;
  transition: all .2s ease;
}
.button-1:hover {
  background: #0374a0;
}

.button-2 {
  padding: 1em;
  border-radius: 4px;
  background: #ff241f;
  text-align: center;
  text-decoration: none;
  font: bold 1.25em/1 "Open Sans", sans-serif;
  letter-spacing: 1px;
  color: white;
  text-transform: uppercase;
  text-shadow: 0px -1px 0px #d20500;
  transition: all .2s ease;
}
.button-2:hover {
  background: #d20500;
}

/* Typography samples
--------------------- */
.typography-samples {
  background: white;
  padding: 0;
}
@media (min-width: 50em) {
  .typography-samples {
    padding: 20px;
  }
}

h3.typography-sample {
  font: bold 2.4em/1.25 "Open Sans", sans-serif;
  margin-bottom: .25em;
  color: #363636;
}

h4.typography-sample {
  font: italic 1.5em/1.25 "Droid Serif", serif;
  margin-bottom: .25em;
  color: #363636;
}

p.typography-sample {
  font: 1em/1.5 "Droid Serif", serif;
  color: #222;
}
p.typography-sample strong {
  font-weight: bold;
}
p.typography-sample em {
  font-style: italic;
}

a.typography-sample {
  font: bold 1em "Open Sans", sans-serif;
  color: #05abeb;
  text-decoration: none;
}
a.typography-sample:hover {
  color: #0088bd;
  transition: all .3s ease;
}

p[class*="font-details-"] {
  margin-top: .5em;
  margin-bottom: 2em;
  font: 0.75em/1 "Droid Serif", serif;
  color: #6f6f6f;
}
p[class*="font-details-"] .font-color {
  font-style: italic;
}

/* Adjectives
-------------------- */
.adjective-1 {
  font: italic 1.6em/1 "Open Sans", sans-serif;
  color: #9f1c19;
}

.adjective-2 {
  font: bold 1.25em/1.25 "Droid Serif", serif;
  color: #05abeb;
}

.adjective-3 {
  font: 1.5em/1 "Open Sans", sans-serif;
  color: #ff8500;
}

.adjective-4 {
  font: 1.6em/1.15 "Open Sans", sans-serif;
  color: #65d1fb;
}

.adjective-5 {
  font: bold italic 3em/0.7 "Open Sans", sans-serif;
  color: #ff241f;
}

.adjective-6 {
  font: bold italic 1.8em/1.1 "Droid Serif", serif;
  color: #05abeb;
}

/* Footer
-------------------- */
.footer-wrapper {
  background: #9f1c19;
}

footer {
  padding: 20px;
  font: italic 1em/1.5 "Open Sans", sans-serif;
  color: #222;
}
footer a {
  font-weight: bold;
  color: #fbfdfe;
  text-decoration: none;
}

/* Grids
based on Chris Coyier's Dont Overthink It Grids
https://css-tricks.com/dont-overthink-it-grids/
-------------------- */
[class*='col-'] {
  float: left;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-1-2 {
  width: 100%;
  /* Single-column by default, i.e., on mobile */
}
@media (min-width: 50em) {
  .col-1-2 {
    /* 2-column if viewport is wide enough*/
    width: 50%;
  }
}

.col-1-3 {
  width: 100%;
}
@media (min-width: 50em) {
  .col-1-3 {
    width: 33.3333%;
  }
}

[class*="col-"] {
  padding: 0;
}
@media (min-width: 50em) {
  [class*="col-"] {
    padding-left: 30px;
  }
}

[class*="col-"]:first-child {
  padding-left: 0;
}

/* Swatch grids

  [Want to add more swatch grid column options?

  Formula for calculating swatch width:

  width: (100% - ($swatch-margin * (y - 1))) / y;

  where y = number of swatches in a grid row]

*/
[class*='swatch-'] {
  float: left;
}

.swatchgrid:after {
  content: "";
  display: table;
  clear: both;
}

.swatch-1-2 {
  width: 49%;
}

.swatch-1-3 {
  width: 32%;
}

.swatch-1-4 {
  width: 23.5%;
}

.swatch-1-5 {
  width: 18.4%;
}

[class*="swatch-"] {
  margin-left: 2%;
}

[class*="swatch-"]:first-child {
  margin-left: 0;
}