/**
 * @file
 * base
 * 
 * Base styles for the entire site
 *
 * Added through the .info file.
 */

/*=======================================
   Global
  =======================================*/

*, :before, :after {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*=======================================
   Elements
  =======================================*/

/*----------------------------
   Form Elements
  ----------------------------*/

/* Input
----------------*/

input {
  border-radius: 0; /* Sarfari issue */
  font-size: 1em;
}

/*----------------------------
   Links (has classes)
  ----------------------------*/
a {
  color: #3d86c5;
  text-decoration: none;
  -webkit-transition: all .4s;
  transition: all .4s;
  display: inline-block;
  vertical-align: bottom;
}

#main-content {  display: inline;  } /* For "display:inline-block" above */

a:hover {
  color: inherit;
  opacity: .7;
  text-decoration: none;
}

/* Shorthand classes */
.no-fade a:hover {  opacity: 1;  }

.links-inherit a {  color: inherit;  }

/*----------------------------
   Images
  ----------------------------*/
img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border: 0;
}

/*----------------------------
   Headers
  ----------------------------*/
h2, h3, h4 {
  margin: 1em 0 .5em;
}

h1 {
  font: 400 3em/1.2 'Roboto', Helvetica, sans-serif;
  margin: 0;
}

h2 {
  font: 500 2.1em/1.2 'Roboto', Helvetica, sans-serif;
  color: #333;
}

h3 {
  font: 500 1.3em/1.5 'Roboto', Helvetica, sans-serif;
}

h4 {
  font: 500 1.2em 'Roboto', Helvetica, sans-serif;
}

.no-top-margin {  margin-top: 0;  }

/*----------------------------
   Misc 
  ----------------------------*/

/* Main: IE issue
----------------*/
main, aside, footer {
  display: block;
}

/* Figure
----------------*/
figure {
  margin: 0;
}

/* Lists
----------------*/
ol, ul {
  margin: 0 0 1em;
}

/* Paragraphs
----------------*/
p {  margin: 0 0 1em;  }

/*=======================================
   Shorthand clases
  =======================================*/

/*----------------------------
   Forms
  ----------------------------*/
.form--inline {
  float: left;
}

.form-item--comfy input,
.form-item--comfy button {
  padding: .5em .7em;
  border-radius: .15em;
  width: 100%;
}

/*----------------------------
   Image Content
  ----------------------------*/
.img-content {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.img-content__img {  line-height: 0;  }

.img-content__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .35;
  z-index: 10;
}

.img-content__content {
  position: absolute;
  z-index: 20;
}

/*----------------------------
   Button
  ----------------------------*/
.buttons a,
.btn {
  padding: .7em 1em;
  display: inline-block;
  vertical-align: bottom;
  font: 500 1em Roboto, sans-serif;
  background: #d02340;
  color: #fff;
  border: 0;
  -webkit-transition: all .4s;
  transition: all .4s;
  letter-spacing: 1px;
  outline: 0;
}

.buttons a:hover,
.btn:hover {
  background-color: #bd1e39;
  color: #aaa;
}

.buttons a:focus,
.btn:focus {
  color: #ccc;
  -webkit-box-shadow: inset .05em .05em .1em rgba(0,0,0,.5);
  box-shadow: inset .05em .05em .1em rgba(0,0,0,.5);
}

.small-buttons a,
.small-btn {
	font-size: .9em;
  padding: .6em .9em;
}

/*----------------------------
   Align
  ----------------------------*/
.align-left {
  margin: 0 1.5em 1em 0;
}

.align-right {
  margin: 0 0 1em 1.5em;
}

/*----------------------------
   Menu
  ----------------------------*/
.menu {
  margin: 0;
  list-style: none;
}

/* Inline
----------------*/
ul.inline,
.menu {
  list-style: none;
}

ul.inline li,
.menu li {
  display: inline-block;
  vertical-align: middle;
}

ul.inline a,
.menu a {  color: inherit;  }


/*----------------------------
   Misc
  ----------------------------*/
  
/* Prevent top margin collaspe */
.force-margin-top::before {
    content: '.';
    font-size: 0;
    display: block;
}

/*=======================================
   Layout
  =======================================*/

.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 .7em;
}

@media screen (min-width: 700px) {
  .container {
    padding: 0 1em;
  }
}

@media screen (min-width: 1000px) {
  .container {
    padding: 0 1.5em;
  }
}