/*
=========================================================
CRISIS BANNER
=========================================================
 * Styling for the crisis banner.
 *
 * Limepark AB, 2018
=========================================================*/

/* Common styles for both info and vma classes */
.lp-crisis-banner__info,
.lp-crisis-banner__vma {
  display: flex;
  align-items: stretch;
  line-height: 1.4;
  margin: 10px 0;
}

/* Specific background colors */
.lp-crisis-banner__info {
  background: #FFF000;
  color: #000;
}

.lp-crisis-banner__vma {
  background: #DB3C4D;
  color: #000;
}

/* Child divs should also be flex containers, oriented vertically and centered */
.lp-crisis-banner__info > div,
.lp-crisis-banner__vma > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 20px;
}

/* Last child div specific background and flex properties */
.lp-crisis-banner__info > div:last-child,
.lp-crisis-banner__vma > div:last-child {
  background: rgba(255, 255, 255, 0.7);
  flex: 1 0 0;
}

/* Icon styles */
.lp-crisis-banner__info i,
.lp-crisis-banner__vma i {
  font-size: 50px;
}

/* Text styles */
body .lp-crisis-banner__info .normal:first-child,
body .lp-crisis-banner__vma .normal:first-child {
  font-weight: 700;
}

.lp-crisis-banner__info span.normal,
.lp-crisis-banner__vma span.normal { 
  font-weight: 600;
}

.lp-crisis-banner__info a.normal,
.lp-crisis-banner__vma a.normal {
  /*font-size: 18px;*/
}

body .lp-crisis-banner__info .normal,
body .lp-crisis-banner__vma .normal,
body .lp-crisis-banner__info a,
body .lp-crisis-banner__vma a,
body .lp-crisis-banner__info a.normal,
body .lp-crisis-banner__vma a.normal {
  color: inherit;  
  line-height: inherit;  
  text-decoration: none;
}

body .lp-crisis-banner__info a.normal,
body .lp-crisis-banner__vma a.normal {
   margin-bottom: 0.5rem;
}

body .lp-crisis-banner__info a:hover,
body .lp-crisis-banner__vma a:hover,
body .lp-crisis-banner__info a.normal:hover,
body .lp-crisis-banner__vma a.normal:hover,
body .lp-crisis-banner__info a:focus,
body .lp-crisis-banner__vma a:focus,
body .lp-crisis-banner__info a.normal:focus,
body .lp-crisis-banner__vma a.normal:focus {
  text-decoration: underline;
}

.lp-crisis-banner__info h2,
.lp-crisis-banner__vma h2 {
  margin-bottom: 0.3rem;
}