/* Base Styles */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  border: 0;
  font-size: 100%;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

article, nav, section {
  display: block;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: HelveticaNeueLT-BoldCond, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal;
  text-transform: uppercase !important;
  color: #1a4a83;
}

a {
  color: #58585b;
  text-decoration: none;
  position: relative;
}

.txt-highlight-2 {
  color: #fcb814;
}

.txt-light {
  color: #fff;
}

.txt-upper {
  text-transform: uppercase;
}

/* Buttons */
.btn {
  display: inline-block;
  cursor: pointer;
  border: none;
  background: #004a8f;
  font-family: HelveticaNeueLT-BoldCond, Arial, sans-serif;
  text-align: center;
  color: #fff;
  border-radius: 0;
}

.btn--light {
  background: #fff;
  color: #004a8f;
}

/* Grid System */
.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid__col--4 {
  width: 33.3333333333%;
}

.grid--spaced .grid__col--4 {
  width: 31.6%;
}

.grid--spaced .grid__col--4:not(:last-of-type) {
  margin-right: 2.6%;
}

.grid__col--8 {
  width: 66.6666666667%;
}

/* Layout */
.section {
  width: 92%;
  margin-right: auto;
  margin-left: auto;
}

.section--large {
  max-width: 1100px;
}

/* Spacing */
.spacing-large-top {
  padding-top: 10px;
}

.spacing-large-bottom {
  padding-bottom: 5px;
}

.spacing-medium {
  padding-top: 60px;
  padding-bottom: 60px;
}

.spacing-small-all {
  padding: 30px;
}

.spacing-small-top {
  padding-top: 30px;
}

/* Events */
.events__txt {
  background: #fcb814;
}

.event {
  position: relative;
  background: #2a70b8;
  height: 600px;
  display: flex;
  flex-direction: column;
}

.event__img {
  flex-shrink: 0;
  background: transparent center/cover no-repeat;
  height: 200px;
}

.event__tag {
  display: block;
  position: absolute;
  top: 30px;
  left: -10px;
  background: #fff;
  box-shadow: 0 5px 20px 0 rgba(42, 112, 183, .3);
  font-family: HelveticaNeueLT-BoldCond, Arial, sans-serif;
  color: #004a8f;
}

.event__txt {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.event__title {
  flex-shrink: 0;
}

.event .btn-container {
  margin-top: auto;
  flex-shrink: 0;
}

/* Post Styles */
.post-styles h3+* {
  margin-top: 10px;
}

.post-styles ul {
  list-style: none;
}

.post-styles ul li {
  margin: 3px 0;
  color: #a32b1c;
}

.post-styles h3 {
  line-height: 120%;
}

.post-styles li,
.post-styles p {
  line-height: 155%;
}

/* Link Block */
.link-block-large-outer {
  background: #fff;
  box-shadow: 0 5px 75px 0 rgba(42, 112, 183, .3);
}

/* Pagination */
/* .pagination>li {
  float: left;
  padding: 10px 20px;
  margin: 5px;
  color: #004a8f;
  border: 2px solid #cadaec;
} */

/* Responsive Typography */
@media screen and (min-width: 1025px) {
  li, p {
    font-size: 1.375rem;
  }
  
  h2 {
    font-size: 2.25rem;
  }
  
  h3 {
    font-size: 17px;
  }
  
  .btn {
    padding: 14px 20px;
    font-size: 1.375rem;
  }
  
  .events__txt {
    padding-bottom: 210px;
    margin-bottom: -240px;
  }
  
  .events__title {
    font-size: 3.25rem;
  }
  
  .event__title {
    font-size: 2rem;
  }
  
  .post-styles *+p,
  .post-styles p+* {
    margin-top: 30px;
  }
  
  .post-styles *+.btn {
    margin-top: 40px;
  }
}

@media screen and (min-width: 769px) {
  .event {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 671px) and (max-width: 1024px) {
  li, p {
    font-size: 1.25rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  h3 {
    font-size: 1.625rem;
  }
  
  .btn {
    padding: 12px 16px;
    font-size: 1.125rem;
  }
  
  .events__title {
    font-size: 2.625rem;
  }
  
  .event__img {
    height: 200px;
  }
  
  .event__title {
    font-size: 1.625rem;
  }
  
  .event__tag {
    padding: 10px 15px;
  }
  
  .no-touch .btn {
    transition: background-color ease .25s, color ease .25s;
  }
  
  .no-touch .event__tag {
    transition: background ease .25s, color ease .25s;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .events__txt {
    padding-bottom: 230px;
    margin-bottom: -200px;
  }
  
  .spacing-small-all {
    padding: 25px;
  }
}

@media screen and (min-width: 671px) and (max-width: 768px) {
  .events__txt {
    padding-bottom: 130px;
    margin-bottom: -100px;
  }
  
  .event {
    display: flex;
  }
  
  .event__img {
    width: 300px;
    flex-shrink: 0;
  }
  
  .spacing-small-all {
    padding: 25px;
  }
}

@media screen and (max-width: 670px) {
  li, p {
    font-size: 1rem;
  }
  
  h2 {
    font-size: 1.375rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  .spacing-medium {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .spacing-large-top {
    padding-top: 20px;
  }
  
  .spacing-large-bottom {
    padding-bottom: 20px;
  }
  
  .spacing-small-top {
    padding-top: 10px;
  }
  
  .spacing-small-all {
    padding: 20px;
  }
  
  .events__txt {
    padding-bottom: 200px;
    margin-bottom: -190px;
  }
  
  .events__title {
    font-size: 1.5rem;
  }
  
  .event+.event {
    margin-top: 10px;
  }
  
  .event__img {
    height: 190px;
    flex-shrink: 0;
  }
  
  .event__tag {
    padding: 8px 10px;
  }
  
  .post-styles *+p,
  .post-styles p+* {
    margin-top: 20px;
  }
  
  .post-styles *+.btn {
    margin-top: 20px;
  }
}

/* Responsive Grid */
@media screen and (min-width: 671px) and (max-width: 768px) {
  .grid__col--tb2-12 {
    width: 100%;
  }
  
  .grid--spaced .grid__col--tb2-12 {
    width: 100%;
  }
  
  .grid--spaced .grid__col--tb2-12:not(:last-of-type) {
    margin-right: 2.6%;
  }
  
  .grid__col--tb2-12 {
    width: 100%;
    margin-right: 0 !important;
  }
  
  .grid__col--tb2-12+.grid__col--tb2-12 {
    margin-top: 20px;
  }
}

@media screen and (max-width: 670px) {
  .grid__col--m-12 {
    width: 100%;
  }
  
  .grid--spaced .grid__col--m-12 {
    width: 100%;
  }
  
  .grid--spaced .grid__col--m-12:not(:last-of-type) {
    margin-right: 2.6%;
  }
  
  .grid__col--m-12 {
    width: 100%;
    margin-right: 0 !important;
  }
}

/* Hover States */
.no-touch .btn:not([disabled]):hover {
  background-color: #2a70b8;
}

.no-touch .btn--light:hover {
  background: #004a8f;
  color: #fff;
}

.no-touch .event__tag:hover {
  background: #004a8f;
  color: #fff;
}

/* Image Resizing */
.resize-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Font Face */
@font-face {
  font-family: 'HelveticaNeueLT-BoldCond';
  src: url('https://membership.theunion.org/theunion/assets/css/webfonts/34A327_5_0.eot');
  src: url('https://membership.theunion.org/theunion/assets/css/webfonts/34A327_5_0.eot?#iefix') format('embedded-opentype'),
       url('https://membership.theunion.org/theunion/assets/css/webfonts/34A327_5_0.woff2') format('woff2'),
       url('https://membership.theunion.org/theunion/assets/css/webfonts/34A327_5_0.woff') format('woff'),
       url('https://membership.theunion.org/theunion/assets/css/webfonts/34A327_5_0.ttf') format('truetype');
}
    .ribbon {
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;

        --r: .4em;
        /* radius control */
        --c: #005aff;

        position: absolute;
        top: 20px;
        left: calc(-1 * var(--r));
        line-height: 1.8;
        padding: 0 .5em calc(2 * var(--r));
        border-radius: var(--r) 0 0 var(--r);
        background:
            radial-gradient(100% 50% at left, var(--c) 98%, #0000 101%) 100% 0/.5lh calc(100% - 2 * var(--r)),
            radial-gradient(100% 50% at right, #0005 98%, #0000 101%) 0 100%/var(--r) calc(2 * var(--r)),
            conic-gradient(from 90deg at var(--r) calc(100% - 2 * var(--r)), #0000 25%, var(--c) 0) 0 0/calc(101% - .5lh) 100%;
        background-repeat: no-repeat;
    }