@charset "UTF-8";
@import 'https://fonts.googleapis.com/css?family=Lato:300,400,700';
.flash-alert {
  background-color: rgba(255, 246, 191, 0.2);
  border: 2px solid rgba(255, 246, 191, 0.6);
  color: shade(#fff6bf, 60%);
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center;
  border-radius: 3px; }
  .flash-alert p:last-child {
    margin-bottom: 0; }
  .flash-alert a {
    color: shade(#fff6bf, 70%);
    text-decoration: underline; }
    .flash-alert a:focus, .flash-alert a:hover {
      color: shade(#fff6bf, 90%); }

.flash-error {
  background-color: rgba(255, 34, 4, 0.2);
  border: 2px solid rgba(255, 34, 4, 0.6);
  color: shade(#FF2204, 60%);
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center;
  border-radius: 3px; }
  .flash-error p:last-child {
    margin-bottom: 0; }
  .flash-error a {
    color: shade(#FF2204, 70%);
    text-decoration: underline; }
    .flash-error a:focus, .flash-error a:hover {
      color: shade(#FF2204, 90%); }

.flash-notice {
  background-color: rgba(229, 237, 248, 0.2);
  border: 2px solid rgba(229, 237, 248, 0.6);
  color: shade(#e5edf8, 60%);
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center;
  border-radius: 3px; }
  .flash-notice p:last-child {
    margin-bottom: 0; }
  .flash-notice a {
    color: shade(#e5edf8, 70%);
    text-decoration: underline; }
    .flash-notice a:focus, .flash-notice a:hover {
      color: shade(#e5edf8, 90%); }

.flash-success {
  background-color: rgba(37, 202, 171, 0.2);
  border: 2px solid rgba(37, 202, 171, 0.6);
  color: shade(#25CAAB, 60%);
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center;
  border-radius: 3px; }
  .flash-success p:last-child {
    margin-bottom: 0; }
  .flash-success a {
    color: shade(#25CAAB, 70%);
    text-decoration: underline; }
    .flash-success a:focus, .flash-success a:hover {
      color: shade(#25CAAB, 90%); }

/* ==========================================================================
   GRID SYSTEM (Flex box based 12 columns grid system)
   @mixin ========================================================================= */
/** */
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  max-width: 77rem;
  margin: 0 auto;
  padding: 0 1rem; }
  @media only screen and (max-width: 540px) {
    .row {
      display: block; } }

.row-boxes {
  flex-wrap: wrap; }
  .row-boxes .item {
    text-align: center; }

@media only screen and (max-width: 850px) {
  .item {
    width: 33.33333%; } }

@media only screen and (max-width: 480px) {
  .item {
    width: 100%;
    margin: 2rem 0; } }

.col-centered {
  margin-left: auto;
  margin-right: auto; }

.col-1 {
  width: 6.41667rem;
  max-width: 100%; }

.col-2 {
  width: 12.83333rem;
  max-width: 100%; }

.col-3 {
  width: 19.25rem;
  max-width: 100%; }

.col-4 {
  width: 25.66667rem;
  max-width: 100%; }

.col-5 {
  width: 32.08333rem;
  max-width: 100%; }

.col-6 {
  width: 38.5rem;
  max-width: 100%; }

.col-7 {
  width: 44.91667rem;
  max-width: 100%; }

.col-8 {
  width: 51.33333rem;
  max-width: 100%; }

.col-9 {
  width: 57.75rem;
  max-width: 100%; }

.col-10 {
  width: 64.16667rem;
  max-width: 100%; }

.col-11 {
  width: 70.58333rem;
  max-width: 100%; }

.col-12 {
  width: 77rem;
  max-width: 100%; }

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  font-size: 16px; }
  body h1, body h2, body h3, body h4, body h5, body h6, body a, body p, body ol, body ul, body span, body small, body strong, body input, body button, body dt, body dd, body dl {
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    color: #102939;
    margin-top: 0; }
  body p, body dt, body dd {
    font-weight: 300;
    color: #133A51; }
  body a, body .link {
    color: #F43D02;
    text-decoration: none;
    cursor: pointer; }
    body a:hover, body .link:hover {
      color: #F86B08; }
  body .link {
    font-weight: 400 !important; }
    body .link:hover {
      text-decoration: underline; }
  body h3 {
    margin-bottom: 1rem; }
  body h6 {
    margin-bottom: 1rem; }
  body figure {
    margin: 2rem 0; }
  body img {
    max-width: 100%;
    height: auto; }
  body ul.notice {
    padding: 1rem 3rem; }
  body li {
    line-height: 1.4rem;
    margin-bottom: 0.4rem; }
  body .content a:hover {
    text-decoration: underline !important; }

.notice {
  background: #eef1f4;
  margin-bottom: 2rem; }

.link-more {
  text-transform: uppercase;
  margin: 0; }
  .link-more:hover {
    text-decoration: underline; }

.list {
  list-style: disc;
  margin: 0 0 2rem 2rem;
  padding: 0; }

.center {
  text-align: center; }

.left {
  text-align: left; }

.right {
  text-align: right; }

.section {
  padding: 100px 0;
  background-color: white; }
  @media only screen and (max-width: 560px) {
    .section {
      padding: 50px 0; } }
  .section.negative {
    background-color: #102939; }
    .section.negative a, .section.negative p, .section.negative li, .section.negative small, .section.negative strong, .section.negative h1, .section.negative h2, .section.negative h3, .section.negative h4, .section.negative h5, .section.negative h6, .section.negative td {
      color: white; }

.section-title {
  text-align: center; }
  .section-title h2 {
    width: 100%;
    font-size: 1.9rem;
    font-weight: 400; }

.lightboxOverlay {
  background: #133A51; }

.sweet-overlay {
  background: rgba(19, 58, 81, 0.5) !important; }

.popup-subscribe {
  width: 600px;
  margin-left: -300px; }
  .popup-subscribe iframe {
    width: 90%;
    height: 140px;
    overflow: hidden;
    margin: 0 auto;
    background: url(../images/ajax-loader.gif) center no-repeat; }

.lb-details span {
  color: white !important;
  text-transform: uppercase !important; }

.page-header {
  background: #133A51;
  text-align: center;
  padding: 50px 0; }
  .page-header h2 {
    color: white;
    font-size: 2.8rem;
    font-weight: 400;
    margin-bottom: 0.7rem; }
  .page-header h3 {
    color: #8EA6BB;
    text-transform: uppercase;
    font-weight: 200; }

.modal-button {
  cursor: pointer;
  transition: all 0.4s;
  position: relative;
  border-bottom: 3px solid #F43D02;
  padding-bottom: 5px; }
  .modal-button:hover {
    opacity: 0.5; }

.sweet-alert {
  border-radius: 3px; }
  .sweet-alert p, .sweet-alert a, .sweet-alert h1, .sweet-alert h2, .sweet-alert h3, .sweet-alert h4, .sweet-alert h5, .sweet-alert h6, .sweet-alert small, .sweet-alert strong, .sweet-alert span {
    color: #133A51; }
  .sweet-alert a {
    font-weight: 400;
    color: #F43D02;
    transition: all 0.4s; }
    .sweet-alert a:hover {
      color: #F86B08;
      text-decoration: underline; }
  .sweet-alert button {
    border: 2px solid #133A51;
    color: #133A51;
    background: transparent !important;
    border-radius: 0;
    transition: all 0.4s; }
    .sweet-alert button:hover {
      border: 2px solid #F43D02;
      color: #F43D02; }
    .sweet-alert button.cancel {
      padding: 0;
      display: block;
      width: 32px;
      height: 32px;
      line-height: 0;
      font-size: 32px;
      position: absolute;
      top: -1rem;
      right: 0.2rem;
      border: none;
      opacity: 0.7; }

.negative .button {
  border: 2px solid white;
  display: inline-block;
  padding: 0.8rem 1.2rem;
  margin-right: 1rem;
  transition: all 0.4s; }
  .negative .button:hover, .negative .button.primary {
    background: white; }
    .negative .button:hover *, .negative .button.primary * {
      color: #9f1a01; }

.negative .button.primary:hover {
  background: transparent !important; }
  .negative .button.primary:hover * {
    color: white; }

.alert-box {
  margin-bottom: 1.25em;
  padding: 1.25em;
  background: #eef2f4; }
  .alert-box a {
    font-weight: 400; }
  .alert-box > :last-child {
    margin-bottom: 0; }
  .alert-box.warning {
    background: #fee1cb; }
    .alert-box.warning .strong-highlight {
      color: #F43D02; }

.header .logo a {
  background: url(../images/semanticmerge-logo.png) center no-repeat !important; }

.videos-cta {
  margin-top: 2rem;
  margin-bottom: -1rem; }
  .videos-cta a {
    background: url(../images/icon-video-play.png) left center no-repeat;
    padding-left: 1.4rem;
    transition: all 0.4s; }
    .videos-cta a:hover {
      opacity: 0.8; }
  .videos-cta.rows {
    text-align: center; }
    .videos-cta.rows .button {
      color: white;
      padding: 1rem;
      padding-left: 2.6rem;
      background: #F43D02 url(../images/icon-video-play.png) 1rem center no-repeat;
      border-radius: 2px;
      display: inline-block; }

.main-nav .item-for-responsive-menu {
  display: none !important; }
  @media only screen and (max-width: 670px) {
    .main-nav .item-for-responsive-menu {
      display: block !important; } }

.section.section-dark.section-videos {
  width: 100%;
  padding: 0; }
  .section.section-dark.section-videos .content .video-wrapper {
    border-radius: 3px;
    margin-top: 0;
    height: 0px;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    display: none; }
    .section.section-dark.section-videos .content .video-wrapper iframe {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0px;
      left: 0px; }
    @media only screen and (max-width: 560px) {
      .section.section-dark.section-videos .content .video-wrapper {
        margin-bottom: 1rem;
        display: block; } }
  .section.section-dark.section-videos .content .video-list {
    margin-top: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start; }
    .section.section-dark.section-videos .content .video-list .video-item {
      flex-basis: calc(25%);
      padding: 0 10px 30px 10px; }
      @media only screen and (max-width: 1024px) {
        .section.section-dark.section-videos .content .video-list .video-item {
          flex-basis: calc(33%); } }
      @media only screen and (max-width: 560px) {
        .section.section-dark.section-videos .content .video-list .video-item {
          flex-basis: calc(50%); } }
      @media only screen and (max-width: 380px) {
        .section.section-dark.section-videos .content .video-list .video-item {
          flex-basis: calc(100%); } }
    .section.section-dark.section-videos .content .video-list .video-data h6 {
      margin-bottom: 0;
      margin-top: -0.5rem; }
    .section.section-dark.section-videos .content .video-list .video-title,
    .section.section-dark.section-videos .content .video-list .video-timing {
      max-width: 85%;
      font-size: 14px;
      float: left;
      font-weight: 700;
      line-height: 1.3rem; }
    .section.section-dark.section-videos .content .video-list .video-timing {
      max-width: 15%;
      float: right;
      color: #8EA6BB; }
    .section.section-dark.section-videos .content .video-list .video-thumb {
      padding: 0 !important;
      height: auto;
      display: inline-block;
      position: relative; }
      @media only screen and (max-width: 560px) {
        .section.section-dark.section-videos .content .video-list .video-thumb {
          display: none; } }
      .section.section-dark.section-videos .content .video-list .video-thumb img {
        border: 2px solid black;
        border-radius: 3px;
        height: auto !important;
        width: 100%;
        margin-bottom: 0;
        position: relative;
        transition: all 0.4s;
        display: inline-block; }
      .section.section-dark.section-videos .content .video-list .video-thumb::before, .section.section-dark.section-videos .content .video-list .video-thumb::after {
        content: "";
        display: block;
        width: 100%;
        height: calc( 100% - 25px);
        position: absolute;
        top: 0;
        left: 0;
        background: -moz-linear-gradient(top, transparent 0%, rgba(16, 41, 57, 0.2) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(16, 41, 57, 0.2)));
        background: -webkit-linear-gradient(top, transparent 0%, rgba(16, 41, 57, 0.2) 100%);
        background: -o-linear-gradient(top, transparent 0%, rgba(16, 41, 57, 0.2) 100%);
        background: -ms-linear-gradient(top, transparent 0%, rgba(16, 41, 57, 0.2) 100%);
        background: linear-gradient(to bottom, transparent 0%, rgba(16, 41, 57, 0.2) 100%); }
      .section.section-dark.section-videos .content .video-list .video-thumb::after {
        z-index: 10;
        background: url(../images/icon-video-play.png) center no-repeat; }
      .section.section-dark.section-videos .content .video-list .video-thumb.active {
        opacity: 0.4; }
  .section.section-dark.section-videos #top-video {
    display: block; }
    @media only screen and (max-width: 560px) {
      .section.section-dark.section-videos #top-video {
        display: none; } }

.test {
  background: pink;
  min-height: 40px; }

/*-----------------------------------*
  $TOAST-GRID

  An insane grid.
  You'd be mad to use it.

  Usage
  =====

  Assuming default values:

  <div class="grid">
    <div class="grid__col grid__col--1-of-2">
      A half-width column.
    </div>
    <div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
      A quarter, pulled left by its own width. You get this, right?
    </div>
  </div>


  Customisation
  =============

  $toast-grid-namespace and $toast-grid-column-namespace
  adjusts the class names for the grid. With
  default values, grid wrappers have a class
  of '.grid' and columns '.grid__col'.

  $toast-col-groups(n) adjusts column divisions.
  For example, $toast-col-groups(12) will produce
  a 12-column grid. $col-groups(3,6,8)
  will produce a 3-, 6-, and 8-column grid.

  $toast-gutter-width is—you guessed it—the gutter
  width. Accepts any unit.

  That's it. Have fun.

\*-----------------------------------*/
.trow {
  list-style: none;
  margin-left: -20px; }

.tcol--2-of-2, .tcol--3-of-3, .tcol--4-of-4, .tcol--5-of-5, .tcol--6-of-6, .tcol--8-of-8, .tcol--12-of-12 {
  width: 100%; }

.tcol--1-of-2, .tcol--2-of-4, .tcol--3-of-6, .tcol--4-of-8, .tcol--6-of-12 {
  width: 50%; }

.tcol--1-of-3, .tcol--2-of-6, .tcol--4-of-12 {
  width: 33.33333%; }

.tcol--2-of-3, .tcol--4-of-6, .tcol--8-of-12 {
  width: 66.66667%; }

.tcol--1-of-4, .tcol--2-of-8, .tcol--3-of-12 {
  width: 25%; }

.tcol--3-of-4, .tcol--6-of-8, .tcol--9-of-12 {
  width: 75%; }

.tcol--push-2-of-2, .tcol--push-3-of-3, .tcol--push-4-of-4, .tcol--push-5-of-5, .tcol--push-6-of-6, .tcol--push-8-of-8, .tcol--push-12-of-12 {
  margin-left: 100%; }

.tcol--push-1-of-2, .tcol--push-2-of-4, .tcol--push-3-of-6, .tcol--push-4-of-8, .tcol--push-6-of-12 {
  margin-left: 50%; }

.tcol--push-1-of-3, .tcol--push-2-of-6, .tcol--push-4-of-12 {
  margin-left: 33.33333%; }

.tcol--push-2-of-3, .tcol--push-4-of-6, .tcol--push-8-of-12 {
  margin-left: 66.66667%; }

.tcol--push-1-of-4, .tcol--push-2-of-8, .tcol--push-3-of-12 {
  margin-left: 25%; }

.tcol--push-3-of-4, .tcol--push-6-of-8, .tcol--push-9-of-12 {
  margin-left: 75%; }

.tcol--pull-2-of-2, .tcol--pull-3-of-3, .tcol--pull-4-of-4, .tcol--pull-5-of-5, .tcol--pull-6-of-6, .tcol--pull-8-of-8, .tcol--pull-12-of-12 {
  margin-left: -100%; }

.tcol--pull-1-of-2, .tcol--pull-2-of-4, .tcol--pull-3-of-6, .tcol--pull-4-of-8, .tcol--pull-6-of-12 {
  margin-left: -50%; }

.tcol--pull-1-of-3, .tcol--pull-2-of-6, .tcol--pull-4-of-12 {
  margin-left: -33.33333%; }

.tcol--pull-2-of-3, .tcol--pull-4-of-6, .tcol--pull-8-of-12 {
  margin-left: -66.66667%; }

.tcol--pull-1-of-4, .tcol--pull-2-of-8, .tcol--pull-3-of-12 {
  margin-left: -25%; }

.tcol--pull-3-of-4, .tcol--pull-6-of-8, .tcol--pull-9-of-12 {
  margin-left: -75%; }

.tcol--1-of-5 {
  width: 20%; }

.tcol--push-1-of-5 {
  margin-left: 20%; }

.tcol--pull-1-of-5 {
  margin-left: -20%; }

.tcol--2-of-5 {
  width: 40%; }

.tcol--push-2-of-5 {
  margin-left: 40%; }

.tcol--pull-2-of-5 {
  margin-left: -40%; }

.tcol--3-of-5 {
  width: 60%; }

.tcol--push-3-of-5 {
  margin-left: 60%; }

.tcol--pull-3-of-5 {
  margin-left: -60%; }

.tcol--4-of-5 {
  width: 80%; }

.tcol--push-4-of-5 {
  margin-left: 80%; }

.tcol--pull-4-of-5 {
  margin-left: -80%; }

.tcol--1-of-6 {
  width: 16.66667%; }

.tcol--push-1-of-6 {
  margin-left: 16.66667%; }

.tcol--pull-1-of-6 {
  margin-left: -16.66667%; }

.tcol--5-of-6 {
  width: 83.33333%; }

.tcol--push-5-of-6 {
  margin-left: 83.33333%; }

.tcol--pull-5-of-6 {
  margin-left: -83.33333%; }

.tcol--1-of-8 {
  width: 12.5%; }

.tcol--push-1-of-8 {
  margin-left: 12.5%; }

.tcol--pull-1-of-8 {
  margin-left: -12.5%; }

.tcol--3-of-8 {
  width: 37.5%; }

.tcol--push-3-of-8 {
  margin-left: 37.5%; }

.tcol--pull-3-of-8 {
  margin-left: -37.5%; }

.tcol--5-of-8 {
  width: 62.5%; }

.tcol--push-5-of-8 {
  margin-left: 62.5%; }

.tcol--pull-5-of-8 {
  margin-left: -62.5%; }

.tcol--7-of-8 {
  width: 87.5%; }

.tcol--push-7-of-8 {
  margin-left: 87.5%; }

.tcol--pull-7-of-8 {
  margin-left: -87.5%; }

.tcol--1-of-12 {
  width: 8.33333%; }

.tcol--push-1-of-12 {
  margin-left: 8.33333%; }

.tcol--pull-1-of-12 {
  margin-left: -8.33333%; }

.tcol--2-of-12 {
  width: 16.66667%; }

.tcol--push-2-of-12 {
  margin-left: 16.66667%; }

.tcol--pull-2-of-12 {
  margin-left: -16.66667%; }

.tcol--5-of-12 {
  width: 41.66667%; }

.tcol--push-5-of-12 {
  margin-left: 41.66667%; }

.tcol--pull-5-of-12 {
  margin-left: -41.66667%; }

.tcol--7-of-12 {
  width: 58.33333%; }

.tcol--push-7-of-12 {
  margin-left: 58.33333%; }

.tcol--pull-7-of-12 {
  margin-left: -58.33333%; }

.tcol--10-of-12 {
  width: 83.33333%; }

.tcol--push-10-of-12 {
  margin-left: 83.33333%; }

.tcol--pull-10-of-12 {
  margin-left: -83.33333%; }

.tcol--11-of-12 {
  width: 91.66667%; }

.tcol--push-11-of-12 {
  margin-left: 91.66667%; }

.tcol--pull-11-of-12 {
  margin-left: -91.66667%; }

.tcol {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: 20px;
  vertical-align: top; }
  @media (max-width: 700px) {
    .tcol {
      display: block;
      margin-left: 0;
      margin-right: 0;
      width: auto; } }
  @media (max-width: 700px) and (min-width: 480px) {
    .tcol[class*="tcol--m-"] {
      display: inline-block;
      margin-right: -.24em; }
    .tcol.tcol--m-1-of-2, .tcol.tcol--m-2-of-4 {
      width: 50%; }
    .tcol.tcol--m-1-of-3 {
      width: 33.33333%; }
    .tcol.tcol--m-2-of-3 {
      width: 66.66667%; }
    .tcol.tcol--m-1-of-4 {
      width: 25%; }
    .tcol.tcol--m-3-of-4 {
      width: 75%; } }
  @media (max-width: 480px) {
    .tcol[class*="tcol--s-"] {
      display: inline-block;
      margin-right: -.24em; }
    .tcol.tcol--s-1-of-2, .tcol.tcol--s-2-of-4 {
      width: 50%; }
    .tcol.tcol--s-1-of-3 {
      width: 33.33333%; }
    .tcol.tcol--s-2-of-3 {
      width: 66.66667%; }
    .tcol.tcol--s-1-of-4 {
      width: 25%; }
    .tcol.tcol--s-3-of-4 {
      width: 75%; } }

.tcol--centered {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.tcol--d-first {
  float: left; }

.tcol--d-last {
  float: right; }

.trow--no-gutter {
  margin-left: 0;
  width: 100%; }
  .trow--no-gutter .tcol {
    padding-left: 0; }
  .trow--no-gutter .tcol--span-all {
    margin-left: 0;
    width: 100%; }

.tcol--ab {
  vertical-align: bottom; }

.tcol--am {
  vertical-align: middle; }

.flash-alert {
  background-color: rgba(255, 246, 191, 0.2);
  border: 2px solid rgba(255, 246, 191, 0.6);
  color: shade(#fff6bf, 60%);
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center;
  border-radius: 3px; }
  .flash-alert p:last-child {
    margin-bottom: 0; }
  .flash-alert a {
    color: shade(#fff6bf, 70%);
    text-decoration: underline; }
    .flash-alert a:focus, .flash-alert a:hover {
      color: shade(#fff6bf, 90%); }

.flash-error {
  background-color: rgba(255, 34, 4, 0.2);
  border: 2px solid rgba(255, 34, 4, 0.6);
  color: shade(#FF2204, 60%);
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center;
  border-radius: 3px; }
  .flash-error p:last-child {
    margin-bottom: 0; }
  .flash-error a {
    color: shade(#FF2204, 70%);
    text-decoration: underline; }
    .flash-error a:focus, .flash-error a:hover {
      color: shade(#FF2204, 90%); }

.flash-notice {
  background-color: rgba(229, 237, 248, 0.2);
  border: 2px solid rgba(229, 237, 248, 0.6);
  color: shade(#e5edf8, 60%);
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center;
  border-radius: 3px; }
  .flash-notice p:last-child {
    margin-bottom: 0; }
  .flash-notice a {
    color: shade(#e5edf8, 70%);
    text-decoration: underline; }
    .flash-notice a:focus, .flash-notice a:hover {
      color: shade(#e5edf8, 90%); }

.flash-success {
  background-color: rgba(37, 202, 171, 0.2);
  border: 2px solid rgba(37, 202, 171, 0.6);
  color: shade(#25CAAB, 60%);
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center;
  border-radius: 3px; }
  .flash-success p:last-child {
    margin-bottom: 0; }
  .flash-success a {
    color: shade(#25CAAB, 70%);
    text-decoration: underline; }
    .flash-success a:focus, .flash-success a:hover {
      color: shade(#25CAAB, 90%); }

/* ==========================================================================
   GRID SYSTEM (Flex box based 12 columns grid system)
   @mixin ========================================================================= */
/** */
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  max-width: 77rem;
  margin: 0 auto;
  padding: 0 1rem; }
  @media only screen and (max-width: 540px) {
    .row {
      display: block; } }

.row-boxes {
  flex-wrap: wrap; }
  .row-boxes .item {
    text-align: center; }

@media only screen and (max-width: 850px) {
  .item {
    width: 33.33333%; } }

@media only screen and (max-width: 480px) {
  .item {
    width: 100%;
    margin: 2rem 0; } }

.col-centered {
  margin-left: auto;
  margin-right: auto; }

.col-1 {
  width: 6.41667rem;
  max-width: 100%; }

.col-2 {
  width: 12.83333rem;
  max-width: 100%; }

.col-3 {
  width: 19.25rem;
  max-width: 100%; }

.col-4 {
  width: 25.66667rem;
  max-width: 100%; }

.col-5 {
  width: 32.08333rem;
  max-width: 100%; }

.col-6 {
  width: 38.5rem;
  max-width: 100%; }

.col-7 {
  width: 44.91667rem;
  max-width: 100%; }

.col-8 {
  width: 51.33333rem;
  max-width: 100%; }

.col-9 {
  width: 57.75rem;
  max-width: 100%; }

.col-10 {
  width: 64.16667rem;
  max-width: 100%; }

.col-11 {
  width: 70.58333rem;
  max-width: 100%; }

.col-12 {
  width: 77rem;
  max-width: 100%; }

.header {
  padding: 1.5rem 0;
  background-color: white;
  position: relative; }
  .header .row {
    justify-content: space-between; }
    @media only screen and (max-width: 670px) {
      .header .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        /*flex-direction: column */ } }
  .header .hamburguer-menu {
    display: none; }
    @media only screen and (max-width: 670px) {
      .header .hamburguer-menu {
        display: block;
        content: "";
        width: 32px;
        height: 32px;
        background: url(../images/hamburguer-icon.png) center no-repeat;
        background-size: 50%;
        text-indent: -9999px;
        border: 2px solid #102939;
        border-radius: 2px;
        transition: all 0.4s ease-out;
        /* For older safari versions */
        position: absolute;
        right: 20px;
        top: 25px; } }
  .header .main-nav {
    text-align: right;
    flex: 3; }
    .header .main-nav a {
      opacity: 0.8;
      transition: all 0.4s;
      margin-left: 2rem;
      display: inline-block;
      color: #133A51; }
      .header .main-nav a:hover {
        opacity: 1; }
      .header .main-nav a.sign-in {
        border: 2px solid #133A51;
        padding: 0.5rem 1rem;
        border-radius: 2px; }
        .header .main-nav a.sign-in:hover {
          color: #F43D02;
          border: 2px solid #F43D02; }
    @media only screen and (max-width: 670px) {
      .header .main-nav {
        display: none;
        width: 100%;
        position: absolute;
        top: 80px;
        left: 0;
        padding: 0;
        z-index: 10;
        border-top: 1px solid rgba(142, 166, 187, 0.5) !important; }
        .header .main-nav a {
          opacity: 0.95;
          width: 100%;
          background: white;
          text-align: left;
          border: none !important;
          margin: 0;
          padding: 1rem !important;
          font-size: 1.3rem;
          border-bottom: 1px solid rgba(142, 166, 187, 0.5) !important; } }
  .header .logo a {
    background: url(../images/semanticmerge-logo.png) center no-repeat;
    width: 150px;
    height: 35px;
    display: inline-block;
    text-indent: -9999px;
    transition: all 0.4s; }
    .header .logo a:hover {
      opacity: 0.7; }

.section.footer {
  padding: 40px 0; }
  @media only screen and (min-width: 690px) {
    .section.footer .row-boxes {
      width: 100%; }
      .section.footer .row-boxes .tcol {
        width: 33%; } }
  @media only screen and (max-width: 700px) {
    .section.footer .row {
      flex-direction: column;
      text-align: center; } }
  .section.footer a {
    transition: all 0.4s;
    opacity: 0.7; }
  .section.footer a:hover {
    opacity: 1; }
  .section.footer .products {
    margin-right: 40px; }
  .section.footer .logo a {
    display: inline-block;
    width: 150px;
    height: 32px;
    background: url(../images/logo-plasticscm.png) center no-repeat;
    text-indent: -9999px; }
  .section.footer .copyright {
    text-align: center; }
    .section.footer .copyright * {
      font-weight: 200;
      line-height: 36px; }
    .section.footer .copyright a {
      font-weight: 400; }
      .section.footer .copyright a:hover {
        text-decoration: underline; }
    @media only screen and (max-width: 700px) {
      .section.footer .copyright {
        margin-top: 1rem; } }
  .section.footer .social-nav {
    text-align: right;
    margin-right: 0; }
    .section.footer .social-nav a {
      display: inline-block;
      width: 34px;
      height: 36px;
      background-position: center;
      background-repeat: no-repeat;
      text-indent: 9999px;
      overflow: hidden;
      margin-left: 0.6rem; }
      .section.footer .social-nav a.blog {
        background-image: url(../images/icon-social-blogger.png); }
      .section.footer .social-nav a.twitter {
        background-image: url(../images/icon-social-twitter.png); }
      .section.footer .social-nav a.youtube {
        background-image: url(../images/icon-social-youtube.png); }
      .section.footer .social-nav a.facebook {
        background-image: url(../images/icon-social-facebook.png); }
    @media only screen and (max-width: 700px) {
      .section.footer .social-nav {
        text-align: center;
        margin-top: 1rem; }
        .section.footer .social-nav a {
          margin: 0 0.5rem; } }

.secondary-banner {
  background-image: url(../images/robot-and-ufo.png), url(../images/banner-bg.png);
  background-size: 22vh, cover;
  background-position: 3vv  3vv, center top;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
  height: 221px; }
  @media only screen and (max-width: 540px) {
    .secondary-banner {
      background-size: 50vh, cover;
      background-position: 1vv  -3vv, center top; } }
  .secondary-banner .row {
    justify-content: center; }
  .secondary-banner .banner-header {
    background: url(../images/hero-row-bg.png);
    background-repeat: repeat-y;
    background-position: top left;
    background-size: 100%;
    height: 221px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    padding: 4rem 3rem; }
    @media only screen and (max-width: 540px) {
      .secondary-banner .banner-header {
        padding: 4rem 1rem; } }
    .secondary-banner .banner-header .page-title {
      display: inline-block;
      height: 1rem; }
      .secondary-banner .banner-header .page-title h2 {
        font-size: 2.8rem;
        text-transform: uppercase;
        font-weight: 400; }
        @media only screen and (max-width: 540px) {
          .secondary-banner .banner-header .page-title h2 {
            font-size: 1.8rem; } }

.section.cta-footer {
  background: #F43D02; }
  .section.cta-footer .item {
    width: 100%;
    padding-left: 2rem;
    text-align: center; }
  @media only screen and (max-width: 570px) {
    .section.cta-footer .button.negative {
      display: none; } }

.hero {
  max-height: calc(100vh - 4rem);
  overflow: hidden;
  padding: 0;
  position: relative;
  background-color: #F43D02 !important;
  background-image: url(../images/robot-and-ufo.png), url(../images/hero-bg.png);
  background-position: 15% -10px, center;
  background-repeat: no-repeat;
  background-size: auto, cover; }
  @media only screen and (max-width: 540px) {
    .hero {
      max-height: 600px; } }
  .hero .column {
    position: relative;
    flex: 1;
    background: url(../images/hero-row-bg.png) right repeat-y; }
    @media only screen and (max-width: 1200px) {
      .hero .column {
        background-size: 100%; } }
  .hero .hero-header {
    padding-left: 28rem;
    padding-right: 6rem;
    margin: 2rem auto 50px auto; }
    @media only screen and (max-width: 1200px) {
      .hero .hero-header {
        padding: 0;
        text-align: center; } }
    @media only screen and (max-width: 750px) {
      .hero .hero-header .button {
        display: none; } }
    @media only screen and (max-width: 540px) {
      .hero .hero-header .button {
        width: 80%; }
        .hero .hero-header .button.primary {
          margin-bottom: 1rem;
          margin-left: 4px; } }
  .hero h1 {
    font-size: 2.8rem;
    font-weight: 400;
    margin-bottom: 1rem; }
    @media only screen and (max-width: 750px) {
      .hero h1 {
        font-size: 2.2rem;
        line-height: 2.64rem; } }
    @media only screen and (max-width: 540px) {
      .hero h1 {
        font-size: 2.4rem;
        line-height: 2.88rem; } }
  .hero h2 {
    font-size: 1.5;
    font-weight: 100; }
    @media only screen and (max-width: 750px) {
      .hero h2 {
        font-size: 1.2rem; } }
  .hero .slideshow {
    max-width: 948px;
    height: 642px;
    margin: 0 auto;
    position: relative; }
    .hero .slideshow::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: url(../images/bottom-shadow.png) top left repeat-x; }
  .hero .badge {
    position: absolute; }
  .hero .badge-new2 {
    background: #102939;
    text-align: center;
    width: 250px;
    height: 250px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    top: -125px;
    left: -125px;
    align-items: flex-end;
    justify-content: center;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
    .hero .badge-new2 h6, .hero .badge-new2 p {
      color: rgba(255, 255, 255, 0.7) !important;
      font-weight: 300;
      margin: 0;
      padding: 0; }
    .hero .badge-new2 a:hover {
      color: #F43D02; }
    .hero .badge-new2 h6 {
      text-transform: uppercase;
      font-size: 20px; }
    .hero .badge-new2 .content {
      margin-bottom: 1rem; }
    @media only screen and (max-width: 1040px) {
      .hero .badge-new2 {
        background-color: transparent;
        -ms-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        left: 0;
        top: 0; }
        .hero .badge-new2 h6, .hero .badge-new2 p {
          display: none; }
        .hero .badge-new2 a {
          display: block;
          width: 250px;
          height: 250px;
          background-image: url(../images/badge-new-bg.png);
          background-repeat: no-repeat;
          background-position: top left;
          text-indent: -9999px; } }
    @media only screen and (max-width: 767px) {
      .hero .badge-new2 {
        display: none; } }
  .hero .badge-xmerge {
    top: -1rem;
    right: -5.8rem;
    opacity: 1;
    transition: all 0.4s; }
    .hero .badge-xmerge:hover {
      opacity: 0.6; }

.section.languages {
  padding: 2rem 0;
  text-align: center; }
  @media only screen and (max-width: 540px) {
    .section.languages {
      display: none; } }
  .section.languages h6 {
    margin: 0 0 1rem 0;
    font-size: 0.8rem;
    font-weight: 400; }
  .section.languages img {
    margin: 0 1.5rem; }
  .section.languages .column {
    flex: 1; }
  .section.languages .box {
    display: inline-block; }
  .section.languages .inactive {
    opacity: 0.5; }
  .section.languages a {
    transition: all 0.4s; }
    .section.languages a:hover {
      opacity: 0.5; }

@media only screen and (max-width: 1030px) {
  .section.why .row {
    flex-direction: column;
    max-width: 55rem; } }

@media only screen and (max-width: 480px) {
  .section.why .row {
    text-align: center; } }

.section.why .item {
  width: 50%; }
  @media only screen and (max-width: 850px) {
    .section.why .item {
      width: 100%; } }
  @media only screen and (max-width: 480px) {
    .section.why .item {
      margin-right: 0;
      margin-bottom: 3rem; } }

.section.why h2 {
  margin-bottom: 3rem; }

.section.why h3 {
  color: white;
  font-weight: 300;
  margin-bottom: 0.6rem; }
  @media only screen and (max-width: 480px) {
    .section.why h3 {
      font-size: 1.3rem; } }
  .section.why h3 strong {
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    background: url(../images/hexagon-small-orange.png) center no-repeat;
    text-align: center;
    font-weight: 300;
    margin-right: 0.5rem; }
    @media only screen and (max-width: 480px) {
      .section.why h3 strong {
        display: block;
        margin: 0 auto 1rem auto; } }

.section.why p {
  color: #8EA6BB;
  font-weight: 300;
  line-height: 1.4rem;
  margin-top: 0;
  padding-left: calc(35px + 0.6rem); }
  @media only screen and (max-width: 480px) {
    .section.why p {
      padding-left: 0;
      font-size: 1.1rem; } }

@media only screen and (max-width: 480px) {
  .section.what {
    text-align: center; }
    .section.what p {
      font-size: 1.1rem; } }

.section.features {
  background: rgba(192, 204, 214, 0.3); }
  .section.features .feature h5 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 300;
    margin-bottom: 0.7rem; }

.section.success .comment {
  text-align: center;
  margin-bottom: 2rem; }
  @media only screen and (max-width: 560px) {
    .section.success .comment {
      min-width: 100%;
      margin: 1rem 0 3rem 0; } }

.section.success h5, .section.success h6, .section.success p {
  margin: 0 0 0.6rem 0; }

.section.success h5 {
  font-weight: bold;
  font-size: 1.15rem; }

.section.success h6 {
  font-size: 1.15rem;
  font-weight: 300; }

.section.success p {
  font-weight: 400;
  line-height: 1.4rem; }

.sidebar .icon-twitter {
  padding-left: 22px;
  background: url(../images/icon-small-twitter.png) left center no-repeat;
  margin-left: -2rem; }
  .sidebar .icon-twitter:hover {
    text-decoration: underline; }

.avatar {
  background: url(../images/hexagon-big-dark.png) top center no-repeat;
  width: 240px;
  height: 280.8px;
  margin-bottom: 2rem; }
  .avatar img.avatar-hero {
    width: 180px;
    height: 180px;
    border-radius: 180px;
    background-color: white;
    margin-top: 20%; }

.section.page.success dt, .section.page.success dd {
  color: #344D6D;
  line-height: 1.4rem; }

.section.page.success dt {
  color: #133A51;
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 1rem; }

.section.page.success dd {
  margin-bottom: 1rem; }

.section.page.success .hero-details {
  background-color: #8EA6BB;
  padding: 2rem; }
  .section.page.success .hero-details p {
    text-align: center !important; }

.section.twitter-love .comment {
  text-align: center;
  margin-bottom: 2rem; }
  @media only screen and (max-width: 560px) {
    .section.twitter-love .comment {
      min-width: 100%;
      margin: 1rem 0; } }

.section.twitter-love figure {
  background: url(../images/hexagon-medium-grey.png) center no-repeat;
  display: inline-block;
  width: 107px;
  height: 107px;
  margin-bottom: 0.6rem; }
  .section.twitter-love figure img {
    border-radius: 100px;
    margin-top: 15px; }

.section.twitter-love h5, .section.twitter-love h6, .section.twitter-love p {
  margin: 0 0 0.6rem 0; }

.section.twitter-love h5 {
  font-weight: bold;
  font-size: 1.15rem;
  color: #F43D02; }

.section.twitter-love p {
  font-weight: 300;
  line-height: 1.4rem; }
  @media only screen and (max-width: 560px) {
    .section.twitter-love p {
      font-size: 1.1rem; } }
  .section.twitter-love p a {
    color: #F43D02;
    transition: all 0.4s; }
    .section.twitter-love p a:hover {
      color: #F86B08;
      text-decoration: underline; }

.section.next .feature {
  text-align: center;
  margin-bottom: 2rem; }
  @media only screen and (max-width: 560px) {
    .section.next .feature {
      min-width: 100%;
      margin: 1rem 0 3rem 0; }
      .section.next .feature figure {
        margin-bottom: 1rem; } }

.section.next h5, .section.next h6, .section.next p {
  margin: 0 0 0.6rem 0;
  width: 100%; }

.section.next h5 {
  font-weight: 600;
  font-size: 1.15rem;
  color: #1d587a; }

.section.next p {
  font-weight: 300;
  line-height: 1.4rem; }
  @media only screen and (max-width: 560px) {
    .section.next p {
      font-size: 1.1rem; } }
  .section.next p a {
    color: #F43D02;
    transition: all 0.4s;
    font-weight: 500; }
    .section.next p a:hover {
      color: #F86B08;
      text-decoration: underline; }

.section.next .center h5 {
  flex: 1;
  text-align: center;
  font-weight: 300; }

.section.page.documentation h4 {
  font-size: 1.2rem;
  font-weight: 200; }

.section.page.documentation ul {
  background: rgba(142, 166, 187, 0.15);
  padding: 2rem;
  list-style: none; }
  @media only screen and (max-width: 1035px) {
    .section.page.documentation ul {
      width: 100%; } }
  .section.page.documentation ul li {
    margin-bottom: 1rem; }
    .section.page.documentation ul li:last-child {
      margin-bottom: 0; }
  .section.page.documentation ul a, .section.page.documentation ul a small {
    color: #F43D02;
    transition: all 4s; }
    .section.page.documentation ul a:hover, .section.page.documentation ul a small:hover {
      color: #F86B08;
      text-decoration: underline; }
  @media only screen and (max-width: 420px) {
    .section.page.documentation ul {
      font-size: 1.2rem; } }

.section.page.documentation .documentation-block {
  margin-bottom: 2rem;
  line-height: 3.4rem; }
  .section.page.documentation .documentation-block .row {
    max-width: 64.16667rem; }
  @media only screen and (max-width: 420px) {
    .section.page.documentation .documentation-block {
      margin-bottom: 1rem; } }

.section.page.features {
  background: white url(../images/features-pages-bg.png) top center repeat-x; }
  .section.page.features h5, .section.page.features p, .section.page.features li, .section.page.features strong, .section.page.features small, .section.page.features em {
    color: #1d587a; }
  .section.page.features h3 {
    font-size: 2.1rem; }
    .section.page.features h3 a, .section.page.features h3 a:hover {
      color: #133A51; }
  .section.page.features h4 {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 2rem;
    margin-bottom: 1rem; }
  .section.page.features h5 {
    font-size: 1.25rem;
    font-weight: 200;
    line-height: 1.8rem; }
  .section.page.features h6 {
    font-size: 1.1rem;
    font-weight: 600; }
  .section.page.features p {
    line-height: 1.4rem; }
  .section.page.features .sidebar {
    max-width: 267px;
    text-align: center; }
    @media only screen and (max-width: 860px) {
      .section.page.features .sidebar {
        max-width: 100%;
        text-align: center;
        margin-bottom: 2rem; }
        .section.page.features .sidebar figure {
          margin: 2rem auto 0 auto; } }
    .section.page.features .sidebar > img {
      max-width: 10rem;
      max-height: 11.35rem; }
  .section.page.features .content figure {
    text-align: center; }
  @media only screen and (max-width: 560px) {
    .section.page.features .content {
      padding: 0; }
      .section.page.features .content h5 {
        font-size: 1.4rem; }
      .section.page.features .content dt {
        font-weight: 600; }
      .section.page.features .content dd {
        margin-left: 0;
        font-size: 1.1rem;
        line-height: 1.5rem; } }
  .section.page.features .page-title,
  .section.page.features .questionary {
    margin: 0 2.5rem 3rem 0;
    max-width: 51.33333rem;
    margin-left: auto;
    margin-right: auto; }
    @media only screen and (max-width: 560px) {
      .section.page.features .page-title,
      .section.page.features .questionary {
        margin: 0 0 2rem 0; }
        .section.page.features .page-title p,
        .section.page.features .questionary p {
          font-size: 1.2rem;
          line-height: 1.6rem; } }
  .section.page.features .screenshots {
    margin-top: 4rem;
    text-align: center; }
  @media only screen and (max-width: 860px) {
    .section.page.features .row {
      display: block !important; } }

.section.page.linux {
  background: white url(../images/features-pages-bg.png) top center repeat-x; }
  .section.page.linux h3 {
    font-size: 2.1rem; }
    .section.page.linux h3 a, .section.page.linux h3 a:hover {
      color: #133A51; }
  .section.page.linux h4 {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 3rem 0 1rem 0; }
  .section.page.linux h5 {
    font-size: 1.1rem;
    color: #344D6D;
    margin-bottom: 1rem; }
  .section.page.linux em {
    font-style: normal; }
  .section.page.linux .section-title h3 {
    text-align: left;
    margin-bottom: 1rem; }
    .section.page.linux .section-title h3 img {
      margin-bottom: -0.6rem;
      margin-right: 1rem; }
  .section.page.linux .code {
    background: #102939;
    color: #8EA6BB;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    font-size: .875em; }

.linux-nav {
  text-align: center;
  padding: 0;
  position: sticky;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #D9DFE4; }
  .linux-nav a {
    margin-left: -4px;
    color: #133A51;
    padding: 1rem 1.5rem;
    display: inline-block;
    border-right: 1px solid #C0CCD6;
    opacity: 0.8;
    transition: all 0.4s; }
    .linux-nav a:last-child {
      border: none; }
    .linux-nav a:hover {
      color: #133A51;
      opacity: 1; }
    .linux-nav a:focus {
      outline: none; }
    .linux-nav a.active {
      color: #133A51;
      border-bottom: 5px solid #133A51; }
  @media only screen and (max-width: 760px) {
    .linux-nav {
      display: none; } }