/* VARIABLES */
/* MIXINS */
section.container {
  margin-bottom: 30px; }
  section.container:after {
    content: '';
    height: 29px;
    bottom: -29px; }

section.patternsSection {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  section.patternsSection a.hoverEffect {
    width: 21%;
    margin-bottom: 30px; }
    section.patternsSection a.hoverEffect .signature {
      padding: 0 5px;
      display: flex;
      display: -webkit-flex;
      position: relative;
      justify-content: center;
      height: 40px;
      align-items: center; }
      section.patternsSection a.hoverEffect .signature:before {
        content: '';
        background-image: url(/img/layout/shadow.png);
        background-position: top;
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 100%;
        height: 15px;
        position: absolute;
        top: 0;
        left: 0; }
      section.patternsSection a.hoverEffect .signature span {
        font-size: 1.4em;
        line-height: 26px;
        font-weight: 700;
        color: #ffffff;
        background-color: #d2d2d2;
        border-radius: 100%;
        width: 26px;
        height: 26px;
        position: absolute;
        top: 7px;
        left: 5px; }
      section.patternsSection a.hoverEffect .signature h3 {
        font-size: 1.4em;
        line-height: 1.1em; }
  section.patternsSection a.hoverEffect:last-of-type .signature {
    justify-content: flex-start; }
    section.patternsSection a.hoverEffect:last-of-type .signature h3 {
      margin-left: 35px; }
  section.patternsSection > div {
    -webkit-box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    border-radius: 20px;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    background-color: #ffffff;
    width: 21%;
    margin-bottom: 30px;
    padding: 15px 10px 10px 10px; }
    section.patternsSection > div:after {
      content: '';
      background-image: url(/img/layout/shadow2.png);
      background-position: top;
      background-size: 100% auto;
      background-repeat: no-repeat;
      width: 92%;
      height: 10px;
      position: absolute;
      left: 4%;
      right: 4%;
      bottom: -10px; }
    section.patternsSection > div img {
      width: 170px;
      height: 170px;
      margin: 0 auto; }
    section.patternsSection > div .signature {
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      margin-top: 8px; }
      section.patternsSection > div .signature span:first-of-type {
        font-size: 1.6em;
        line-height: 1.1em;
        font-weight: 600;
        margin-bottom: 5px; }
      section.patternsSection > div .signature span:last-of-type {
        color: #9d9d9d;
        font-weight: 600;
        font-size: 1em;
        line-height: 1.1em; }

/*# sourceMappingURL=granitePatterns.css.map */