/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);

/* UNIVERSAL */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
  background-color: rgb(249,249,249);
}


/* ROOT FONT STYLES */

* {
  font-family: 'Lato', Helvetica, sans-serif;
  color: #333447;
  line-height: 1.5;
}

/* TYPOGRAPHY */

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

p {
  font-size: 1.125rem;
  font-weight: 200;
  line-height: 1.8;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-heavy {
  font-weight: 700;
}

/* POSITIONING */

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify {
  text-align: justify;
}

/* ==== GRID SYSTEM ==== */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap:10px;
  margin-bottom: 10px;
}

.row [class^="col"] {
  min-height: 0.125rem;
}

.col-1 {

}
.col-2 {
  grid-column: span 2;
}
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-5 {
  grid-column: span 5;
}
.col-6 {
  grid-column: span 6;
}
.col-7 {
  grid-column: span 7;
}
.col-8 {
  grid-column: span 8;
}
.col-9 {
  grid-column: span 9;
}
.col-10 {
  grid-column: span 10;
}
.col-11 {
  grid-column: span 11;
}
.col-12 {
  grid-column: span 12;
}

/** design **/

.box {
  background-color: #ffffff;
  border-radius: 12px;

  padding: 10px 20px;
}

.shadow {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

/*border-left: 8px solid #d0332c;*/


i {
  color: inherit;
}
.site button, .template button, button.button {
  border: 0px;
  border-radius: 10px;
  height: 42px;
  background-color: #3282B8;
  color: #fff;
  padding: 0px 20px;
  cursor: pointer;
}
.site button:hover, .template button:hover, button.button:hover {
  background-color: #0F4C75;
}


/** forms  */

.form-control {
  min-height: 44px;
  border: 1px solid transparent;
  background-color: #f8f8f8;
  padding-left: 20px;
  width: calc(100% - 24px);


  font-size: 1em;
  height: auto;
  box-shadow: initial !important;
  border-radius: 10px;
  filter: none;
  transition: border-color .15s ease-in-out;
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

input[type='submit'] {
  border: 0px;
  border-radius: 10px;
  height: 42px;
  background-color:#3282B8;
  color: #fff;
  padding: 0px 20px;
  cursor: pointer;
}