﻿/***********************************************
Variables
/***********************************************/
/*** Fonts ***/
/*** Weight ***/
/*** Colors ***/
/***********************************************
Border Colors
  -whitepaper cover image
/***********************************************/
/***********************************************
Pattern Squares Colors
/***********************************************/
/***********************************************
Buttons
/***********************************************/
/***********************************************
General Mixin
/***********************************************/
/***********************************************
Images
/***********************************************/
/***********************************************
Line-Height Function
/***********************************************/
.article-block {
  padding-left: 0;
  padding-right: 0; }
  .article-block .container {
    padding-left: 0;
    padding-right: 0; }
  .article-block article {
    z-index: 2;
    position: relative; }
  .article-block .article-info-box {
    position: relative;
    background: #ffffff;
    margin: -50px auto 0 auto;
    padding: 20px 20px 0 20px;
    z-index: 2; }
  .article-block h2 {
    font-family: canada-type-gibson, helvetica, arial, sans-serif;
    font-size: 24px;
    font-weight: 600; }
  .article-block p {
    display: none; }

@media (min-width: 768px) {
  .article-block p {
    display: inherit;
    font-size: 18px;
    color: #555555; } }

@media (min-width: 992px) {
  .article-block {
    position: relative; }
    .article-block:before {
      content: '';
      /*background:url("../images/article-block-bg.gif") no-repeat;
			background-size:1697px;*/
      height: 772px;
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
      margin: -75px auto 0 auto; }
    .article-block h2 {
      font-size: 36px; }
    .article-block .article-info-box {
      padding: 30px 50px 0 50px; }
    .article-block .pattern-left {
      background: url("../images/pattern-home-left.jpg") no-repeat;
      background-size: 321px;
      position: absolute;
      bottom: 100px;
      left: -6px;
      height: 320px;
      width: 320px; } }
    @media (min-width: 992px) and (min-width: 300px) {
      .article-block .pattern-left {
        background: none; } }
    @media (min-width: 992px) and (min-width: 992px) {
      .article-block .pattern-left {
        background: url("../images/pattern-home-left.jpg") no-repeat; } }
    @media (min-width: 992px) and (min-width: 1780px) {
      .article-block .pattern-left {
        left: 65px; } }
    @media (min-width: 992px) and (min-width: 2000px) {
      .article-block .pattern-left {
        left: 150px; } }
    @media (min-width: 992px) and (min-width: 2100px) {
      .article-block .pattern-left {
        left: 290px; } }
    @media (min-width: 992px) and (min-width: 2150px) {
      .article-block .pattern-left {
        left: 370px; } }

@media (min-width: 992px) {
    .article-block .pattern-right {
      background: url("../images/pattern-home-right.jpg") no-repeat;
      background-size: 320x;
      position: absolute;
      top: -45px;
      right: -120px;
      height: 420px;
      width: 420px; } }
    @media (min-width: 992px) and (min-width: 1580px) {
      .article-block .pattern-right {
        right: 60px;
        top: -65px; } }
    @media (min-width: 992px) and (min-width: 1990px) {
      .article-block .pattern-right {
        right: 120px; } }
    @media (min-width: 992px) and (min-width: 2190px) {
      .article-block .pattern-right {
        right: 420px; } }

@media (min-width: 1200px) {
  .article-block {
    padding-left: 15px;
    padding-right: 15px; }
    .article-block .container {
      padding-left: 15px;
      padding-right: 15px; } }
