/******************************************************************
Site Name: Saphin BV
Author: Rean van de Groenendaal

Stylesheet: Main Stylesheet
******************************************************************/
/******************************************************************
Site Name: Saphin BV
Author: Rean van de Groenendaal

Stylesheet: Mixins & Constants Stylesheet

******************************************************************/
/*********************
CLEARFIXIN'
*********************/
@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700|Roboto+Condensed");
.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

/*********************
TOOLS
*********************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: "PT Sans", "Roboto Condensed", courier, Helvetica, Arial, sans-serif;
  text-rendering: optimizelegibility;
  font-weight: 500;
  /* removing text decoration from all headline links */ }
  h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
    text-decoration: none; }

h1, .h1 {
  font-size: 3.2em;
  line-height: 1.333em; }

h2, .h2 {
  font-size: 1.8em;
  line-height: 1.4em;
  margin-bottom: 0.375em;
  font-weight: normal; }

h3, .h3 {
  font-size: 2.1em; }

h4, .h4 {
  font-size: 1.8em;
  /*font-weight: 700;*/ }

h5, .h5 {
  font-size: 1.6em;
  line-height: 2.09em;
  text-transform: uppercase;
  letter-spacing: 2px; }

h6, .h6 {
  font-size: 1.4em;
  /*font-weight: 700;*/ }

p {
  font-family: "PT Sans", "Roboto Condensed", courier, Helvetica, Arial, sans-serif;
  text-rendering: optimizelegibility;
  font-size: 1.8em; }

.entry-content li {
  font-family: Cambria, Times New Roman, Times, serif;
  text-rendering: optimizelegibility;
  font-size: 1.6em; }

.vcard .org {
  font-weight: 700;
  font-size: 1.2em; }

/* BASE (MOBILE) SIZE */
/******************************************************************
Site Name: Saphin BV
Author: Rean van de Groenendaal

Stylesheet: Base Mobile Stylesheet

******************************************************************/
/*********************
GENERAL STYLES
*********************/
html {
  font-size: 16px !important; }

body {
  font-family: "PT Sans", "Roboto Condensed", courier, Helvetica, Arial, sans-serif;
  font-size: 62.5%;
  /* 16px * 62.5% = 10px : 1em = 10px */
  line-height: 1.5;
  background-size: cover;
  margin: 0;
  padding: 0; }

a {
  color: #035ea5; }

/*********************
GO!
*********************/
html {
  background-image: radial-gradient(#ea6781, #f22755); }

div#content {
  max-width: 90%;
  margin: 10% auto 0; }
  div#content h1 {
    display: block;
    width: 80%;
    height: 150px;
    background: url("../images/reanimatie-rean.png") top center no-repeat;
    background-size: contain;
    color: transparent;
    margin: 0 auto; }
  div#content .intro {
    text-align: center; }

.vcard {
  font-size: 0.9rem;
  margin-bottom: 50px; }
  .vcard .org {
    font-weight: 700; }
  .vcard .adr {
    line-height: 1em; }
    .vcard .adr > * {
      margin: 0.5rem 0; }
    .vcard .adr span {
      display: block; }

/* TABLET & SMALLER */
@media only screen and (min-width: 768px) {
  /******************************************************************
  Site Name: Saphin BV
  Author: Rean van de Groenendaal
  
  Stylesheet: Tablet & Small Desktop Stylesheet
  ******************************************************************/
  /*********************
  GENERAL STYLES
  *********************/
  html {
    /*background: lime;*/ }

  div#content {
    width: 500px;
    margin: 5rem auto 20px; }
    div#content h1 {
      display: block;
      width: 100%;
      height: 350px;
      color: transparent; }

  .vcard {
    font-size: 1.0rem;
    /*background-color: red;*/ } }
/* DESKTOP */
@media only screen and (min-width: 1030px) {
  /******************************************************************
  Site Name: 
  Author: 
  
  Stylesheet: Desktop Stylsheet
  
  This is the desktop size. It's larger than an iPad so it will only
  be seen on the Desktop. 
  
  ******************************************************************/
  div#content {
    width: 500px;
    margin: 15% auto 0; } }
/* LARGE VIEWING SIZE */
@media only screen and (min-width: 1240px) {
  /******************************************************************
  Site Name: 
  Author: 
  
  Stylesheet: Super Large Monitor Stylesheet
  
  You can add some advanced styles here if you like. This kicks in
  on larger screens.
  
  ******************************************************************/ }