teagles / VS-America.com

@charset 'utf-8';
@font-face {
  font-family: 'Malva';
  font-weight: 300;
  src: image-url("/fonts/322AAE_11_0.eot");
  src: image-url("/fonts/322AAE_11_0.eot?#iefix") format("embedded-opentype"), image-url("/fonts/322AAE_11_0.woff2") format("woff2"), image-url("/fonts/322AAE_11_0.woff") format("woff"), image-url("/fonts/322AAE_11_0.ttf") format("truetype");
}
@font-face {
  font-family: 'Malva';
  font-weight: 400;
  src: image-url("/fonts/322AAE_5_0.eot");
  src: image-url("/fonts/322AAE_5_0.eot?#iefix") format("embedded-opentype"), image-url("/fonts/322AAE_5_0.woff2") format("woff2"), image-url("/fonts/322AAE_5_0.woff") format("woff"), image-url("/fonts/322AAE_5_0.ttf") format("truetype");
}
@font-face {
  font-family: 'Malva';
  font-weight: 700;
  src: image-url("/fonts/322AAE_E_0.eot");
  src: image-url("/fonts/322AAE_E_0.eot?#iefix") format("embedded-opentype"), image-url("/fonts/322AAE_E_0.woff2") format("woff2"), image-url("/fonts/322AAE_E_0.woff") format("woff"), image-url("/fonts/322AAE_E_0.ttf") format("truetype");
}
@font-face {
  font-family: 'Malva';
  font-weight: 800;
  src: image-url("/fonts/322AAE_A_0.eot");
  src: image-url("/fonts/322AAE_A_0.eot?#iefix") format("embedded-opentype"), image-url("/fonts/322AAE_A_0.woff2") format("woff2"), image-url("/fonts/322AAE_A_0.woff") format("woff"), image-url("/fonts/322AAE_A_0.ttf") format("truetype");
}

@import 'settings';
@import 'foundation6/foundation';
@import 'foundation6/motion-ui';

@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

@include motion-ui-transitions;
@include motion-ui-animations;

h1, h2, h3 {
  text-transform: uppercase;
}

ul.breadcrumbs {
  margin-bottom: 0;
}

li > a:hover {
  color: #ff6100;
}

li.is-active > a {
  font-style: italic;
  font-weight: bold;
  // color: #ff6100;
  // background-color: yellow;
}

li.has-submenu > a {
  font-weight: bold;
}

body {
      background: image-url('/images/body-bg.png') repeat;
  // font-size: rem-calc(17)
}

header {
  background-color: #ECEEEE;

  .banner {
    img {
      // height: rem-calc(125);
    }
  }

  .menu-wrapper {
    position: relative;
  }

  .contact-info {
    margin-top: rem-calc(10);
    padding-right: 1.0em;
    text-align: right;
  }


  nav#top-menu {
    position: absolute;
    bottom: rem-calc(5);
    right: 0;

    .fa {
      margin-top: rem-calc(-4);
    }

    a {
      color: $black;
      text-transform: uppercase;
    }

    a:hover {
      color: #ff6100;
    }
  }
}



.title-bar {
  .contact-info {
    float: right;

    @include breakpoint(small only) {
      font-size: 0.75rem;
    }

    a {
      color: #fff;
    }
  }
}

.page-wrapper {
  max-width: $global-width;
  margin: auto;
  margin-bottom: rem-calc(15);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#main {
  padding-top: rem-calc(5);
  padding-bottom: rem-calc(5);
  background: #fff;

  .featured_image {
    float: left;
    margin: 0 rem-calc(8) rem-calc(8) 0;

    img {
      border: solid 4px #fefefe;
      box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
    }
  }

  @include breakpoint(large) {
    .sidebar {
      width: 28%;
      padding: 0;
      box-shadow: 3px 1px 3px -2px rgba(0,0,0,0.12);

    }

    .content {
      width: 70%;

    }
  }
}

.card {
  // border: 1px solid $dark-gray;
  margin: rem-calc(10);
}

.clickable, .pointer {
  cursor: pointer;
}

footer {
  text-align: center;
  background-color: #ECEEEE;
}

@import 'print';