/*!
Theme Name: MonsieurPress
Theme URI: http://www.monsieurpress.com/
Author: David MANSON
Author URI: http://www.david-manson.com/
Description: Hello, I'm MonsieurPress, a super cool, lightweight & simple WordPress starter theme for developpers
Version: 1.0.0
License: WTFPL
License URI: http://www.wtfpl.net/
Text Domain: monsieurpress
Tags: right-sidebar, custom-menu, sticky-post
*/
/*-----------------------
    Libs
------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

.white {
  color: #fff; }

.black {
  color: #000; }

.brown {
  color: #d2b290; }

/* 

  Vertical Rhythm Mixin

    This mixin is to help create a typograhpical baseline grid but also to allow for specifying different line heights or bottom margins if you need to.

    In this mixin you can specifiy the font size in PX and it will calculate the REM based on your $doc-font-size & $doc-line-height variables. 

      @include font-size(24);

    It will also create a bottom margin based on the $doc-font-size & $doc-line-height variables unless you specify that it shouldn't have one -

      @include font-size(24, no);

    Or if you want to specify a different bottom margin to be generated -

      @include font-size(24,32);

    This mixin also generates a pixel-less line height by default unless you specify that you either don't want one where I'd suggest declaring 1 within the mixin -

      @include font-size(24, yes, 1);

    There's also the option to specify a different line-height for it to generate to, where you would specify the line-height in (effectively) it's pixel value -

      @include font-size(24, yes, 40);

*/
/*-----------------------
     Setting up
------------------------*/
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 100%;
  line-height: 1.6;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

p {
  font-size: 18px;
  line-height: 1.8; }

h2 {
  font-size: 24px;
  font-weight: 700;
  padding-top: 48px; }

.f24 {
  font-size: 24px;
  display: block;
  line-height: 1.8em; }

.bold {
  font-weight: 700; }

.regular {
  font-weight: 300; }

.light {
  font-weight: 300; }

/*-----------------------
    General styles
------------------------*/
/*-----------------------
    Link Styles
------------------------*/
body {
  letter-spacing: 0.5px; }

.clearfix {
  overflow: auto;
  zoom: 1; }

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

.wrap {
  width: 100%;
  max-width: 1400px;
  padding-left: 30px;
  padding-right: 30px;
  margin: 0 auto; }

.centered {
  text-align: center; }

.header {
  width: 100%;
  height: 75vh;
  background: url("images/header.png") no-repeat;
  background-size: cover;
  padding-top: 48px; }

.top {
  width: 100%;
  float: left; }

ul.menu {
  z-index: 999;
  position: relative; }
  ul.menu li {
    float: right; }
    ul.menu li a {
      display: block;
      position: relative;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      margin-left: 48px;
      text-decoration: none;
      letter-spacing: 2px;
      transition: all .25s; }
      ul.menu li a:hover:before {
        opacity: 1;
        transition: all .25s ease;
        -webkit-transform: translateY(0px);
                transform: translateY(0px); }
      ul.menu li a:before {
        transition: all .25s;
        position: absolute;
        border-bottom: 2px solid #d2b290;
        width: 100%;
        top: 48px;
        height: 2px;
        content: "";
        transition: all .25s ease;
        opacity: 0;
        -webkit-transform: translateY(10px);
                transform: translateY(10px); }

.logo {
  float: left;
  width: 200px;
  position: relative;
  z-index: 99; }

.header_content {
  float: left;
  width: auto;
  bottom: -180px;
  position: absolute; }

.hc_main {
  width: 40%;
  float: left; }

.foto {
  position: relative;
  float: right;
  margin-right: 30px; }

.title {
  color: #d2b290;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 16px;
  text-transform: uppercase; }

.huge {
  font-size: 60px;
  font-weight: 700;
  color: #fff;
  padding-bottom: 24px;
  line-height: 2em;
  letter-spacing: 2px; }

.f-18 {
  font-size: 18px;
  line-height: 1.68em; }

.tel {
  border-top: 1px solid #8d8d8d;
  padding-top: 48px;
  margin-top: 48px; }
  .tel span {
    font-size: 24px;
    font-weight: 800;
    color: #d2b290;
    letter-spacing: 2px;
    position: relative;
    padding-left: 30px; }
    .tel span:before {
      position: absolute;
      left: 0px;
      content: "";
      top: 5px;
      width: 20px;
      height: 20px;
      background: url("images/phone.png") no-repeat; }

.btn_black {
  padding: 12px 39px 12px 59px;
  background: #000;
  height: 48px;
  color: #fff;
  font-weight: 300;
  position: absolute;
  bottom: 293px;
  left: -48px;
  text-decoration: none;
  display: block; }
  .btn_black:before {
    position: absolute;
    content: "";
    top: 18px;
    left: 28px;
    width: 20px;
    height: 20px;
    background: url("images/arrow.png") no-repeat;
    transition: all .25s ease; }
  .btn_black:hover:before {
    left: 18px;
    transition: all .25s ease; }

.btmrelat {
  position: relative;
  bottom: 0px;
  height: 100%; }

.col_about {
  padding-left: 48px;
  padding-top: 96px;
  width: 50%; }
  .col_about p {
    padding-top: 48px; }

.col_left {
  padding-top: 0px;
  padding-left: 144px;
  padding-right: 72px;
  width: 50%;
  display: inline-block;
  float: left;
  overflow: hidden; }

.col_right {
  padding-right: 72px;
  padding-left: 72px;
  width: 50%;
  display: inline-block;
  float: right; }

.monrelat {
  position: relative; }

.monument {
  position: absolute;
  right: 0px;
  bottom: -120px; }

.blackcolumns {
  background: url("images/columns.png") no-repeat #000;
  background-size: cover;
  position: relative;
  color: #fff !important;
  padding-top: 120px;
  padding-bottom: 120px;
  margin-top: 120px; }
  .blackcolumns p {
    padding-top: 48px; }

ul.services {
  padding-top: 24px; }
  ul.services li {
    padding-bottom: 24px; }

.publications * {
  display: block; }

.publications .title {
  padding-top: 72px; }

.publications .pub_nr {
  padding-top: 48px;
  font-size: 12px;
  font-weight: 700; }

.publications .pub_title {
  padding-top: 48px;
  font-weight: 200;
  font-size: 24px; }

.publications .pub_rs {
  font-size: 18px;
  padding-top: 48px;
  padding-left: 71px;
  position: relative; }
  .publications .pub_rs:before {
    position: absolute;
    content: "";
    width: 48px;
    height: 1px;
    left: 0px;
    bottom: 13px;
    border-top: 1px solid #000; }

.publications .pub_author {
  font-weight: 700;
  padding-top: 60px;
  line-height: 2em;
  font-size: 18px; }

.publications .pub_where {
  font-weight: 200;
  font-size: 18px; }

.publications .pub_grey {
  font-weight: 700;
  padding-top: 36px;
  font-size: 14px;
  color: #a1a1a1; }

.publications .pub_nav {
  padding-top: 24px; }
  .publications .pub_nav span {
    border: 2px solid #d2b290;
    width: 36px;
    height: 36px;
    display: inline-block;
    background: url("images/arrow.png") 10px 10px no-repeat;
    cursor: pointer;
    transition: all .25s ease; }
    .publications .pub_nav span:hover {
      transition: all .25s ease;
      background: url("images/arrow.png") 5px 10px no-repeat; }
  .publications .pub_nav .navright {
    margin-left: -6px;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1); }

.footer {
  float: left;
  width: 100%;
  background: #000;
  padding-top: 96px;
  padding-bottom: 96px;
  margin-top: 96px; }
  .footer .socials {
    padding-top: 24px; }

.linked {
  padding-left: 12px;
  display: inline-block;
  transition: all .25s ease; }
  .linked:hover {
    opacity: .5;
    transition: all .25s ease; }

.fb {
  transition: all .25s ease; }
  .fb:hover {
    opacity: .5;
    transition: all .25s ease; }

.foot_logo {
  float: left;
  display: inline-block; }

.foot_col1 {
  padding-left: 91px;
  float: left;
  display: inline-block; }

.foot_title {
  font-weight: 400;
  color: #d2b290;
  font-size: 18px;
  text-transform: uppercase;
  display: block; }

.address {
  display: block;
  font-size: 12px;
  line-height: 2em;
  padding-top: 24px;
  color: #fff; }

.foot_col2 {
  padding-left: 256px;
  float: left;
  padding-top: 48px; }
  .foot_col2 * {
    display: block;
    font-size: 14px;
    font-weight: 400; }
  .foot_col2 .fs-14 {
    padding-top: 24px;
    color: #fff;
    letter-spacing: 2px; }

@media (max-width: 1400px) {
  .wrap {
    max-width: 1200px; }
  .huge {
    font-size: 50px; }
  .foto img {
    width: 80%;
    float: right; }
  .header_content {
    bottom: -70px; }
  .btn_black {
    bottom: 123px; } }

@media (max-width: 1140px) {
  .wrap {
    max-width: 960px; }
  .header_content {
    bottom: -67px;
    width: 100%; }
  .huge {
    font-size: 40px; }
  .tel {
    margin-top: 0px;
    border-top: none; }
  .hc_main {
    width: 50%;
    position: absolute;
    z-index: 999; }
  .foto img {
    width: 64%; }
  .f-18 {
    font-size: 16px; }
  .btn_black {
    bottom: 99px;
    left: 80px; }
  .col_left {
    padding-left: 0px; } }

@media (max-width: 900px) {
  .monument {
    display: none; }
  .col_about {
    width: 100%; }
  .col_left {
    width: 100%; }
  .col_right {
    width: 100%;
    padding-left: 0px;
    padding-top: 48px; }
  .pub_foto {
    display: none; }
  .foot_col1 {
    padding-left: 0px;
    width: 100%; }
  .foot_col2 {
    width: 100%;
    padding-left: 0px; }
  .foto {
    display: none; }
  .header_content {
    position: relative; }
  .hc_main {
    width: 80%;
    position: relative;
    z-index: 999; } }

@media (max-height: 800px) {
  .header {
    height: 100vh; } }

@media (max-width: 600px) {
  .mb_nav {
    display: none; }
  .logo img {
    width: 40px; }
  .header_content {
    width: 100%;
    margin-top: -40px; }
    .header_content .title {
      font-size: 12px; }
  .huge {
    font-size: 28px;
    line-height: 1em; }
  .f-18 {
    font-size: 14px; }
  .hc_main {
    width: 100%; }
  .header {
    height: 100vh; }
  .col_about {
    padding-left: 0px;
    padding-top: 48px; }
  .blackcolumns {
    padding-top: 48px; }
  .col_left {
    padding-right: 0px; }
  .col_right {
    padding-right: 0px; }
  .footer {
    padding-top: 48px; }
  .foot_logo {
    padding-bottom: 24px; }
  .publications .title {
    padding-top: 0px; } }