/* SwaddleMe fonts */

@font-face {
    font-family: 'Archer';
    src: url('../fonts/Archer-Medium.eot');
    src: url('../fonts/Archer-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Archer-Medium.woff2') format('woff2'),
        url('../fonts/Archer-Medium.woff') format('woff'),
        url('../fonts/Archer-Medium.ttf') format('truetype'),
        url('../fonts/Archer-Medium.svg#Archer-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Archer';
    src: url('../fonts/Archer-MediumItalic.eot');
    src: url('../fonts/Archer-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Archer-MediumItalic.woff2') format('woff2'),
        url('../fonts/Archer-MediumItalic.woff') format('woff'),
        url('../fonts/Archer-MediumItalic.ttf') format('truetype'),
        url('../fonts/Archer-MediumItalic.svg#Archer-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Archer';
    src: url('../fonts/Archer-Semibold.eot');
    src: url('../fonts/Archer-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Archer-Semibold.woff2') format('woff2'),
        url('../fonts/Archer-Semibold.woff') format('woff'),
        url('../fonts/Archer-Semibold.ttf') format('truetype'),
        url('../fonts/Archer-Semibold.svg#Archer-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Archer';
    src: url('../fonts/Archer-SemiboldItalic.eot');
    src: url('../fonts/Archer-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Archer-SemiboldItalic.woff2') format('woff2'),
        url('../fonts/Archer-SemiboldItalic.woff') format('woff'),
        url('../fonts/Archer-SemiboldItalic.ttf') format('truetype'),
        url('../fonts/Archer-SemiboldItalic.svg#Archer-SemiboldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Archer Book';
    src: url('../fonts/Archer-Book.eot');
    src: url('../fonts/Archer-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Archer-Book.woff2') format('woff2'),
        url('../fonts/Archer-Book.woff') format('woff'),
        url('../fonts/Archer-Book.ttf') format('truetype'),
        url('../fonts/Archer-Book.svg#Archer-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Archer Book';
    src: url('../fonts/Archer-BookItalic.eot');
    src: url('../fonts/Archer-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Archer-BookItalic.woff2') format('woff2'),
        url('../fonts/Archer-BookItalic.woff') format('woff'),
        url('../fonts/Archer-BookItalic.ttf') format('truetype'),
        url('../fonts/Archer-BookItalic.svg#Archer-BookItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Utily';
    src: url('../fonts/Utily-Regular.eot');
    src: url('../fonts/Utily-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Utily-Regular.woff2') format('woff2'),
        url('../fonts/Utily-Regular.woff') format('woff'),
        url('../fonts/Utily-Regular.ttf') format('truetype'),
        url('../fonts/Utily-Regular.svg#Utily-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Utily';
    src: url('../fonts/Utily-Medium.eot');
    src: url('../fonts/Utily-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Utily-Medium.woff2') format('woff2'),
        url('../fonts/Utily-Medium.woff') format('woff'),
        url('../fonts/Utily-Medium.ttf') format('truetype'),
        url('../fonts/Utily-Medium.svg#Utily-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Utily';
    src: url('../fonts/Utily-Bold.eot');
    src: url('../fonts/Utily-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Utily-Bold.woff2') format('woff2'),
        url('../fonts/Utily-Bold.woff') format('woff'),
        url('../fonts/Utily-Bold.ttf') format('truetype'),
        url('../fonts/Utily-Bold.svg#Utily-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Utily';
    src: url('../fonts/Utily-Black.eot');
    src: url('../fonts/Utily-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Utily-Black.woff2') format('woff2'),
        url('../fonts/Utily-Black.woff') format('woff'),
        url('../fonts/Utily-Black.ttf') format('truetype'),
        url('../fonts/Utily-Black.svg#Utily-Black') format('svg');
    font-weight: 900;
    font-style: normal;
}

/* SwaddleMe menu content styles */

.sicms-menu-swaddleme {
    background-color: #213868;
    box-shadow: 0 -1px rgba(0, 0, 0, .1);
    border-right: 2px solid #20b6bb;
}

header nav .sicms-menu .sicms-nav-item.sicms-menu-swaddleme:hover, header nav .sicms-menu .sicms-nav-item.sicms-menu-swaddleme:focus, header nav .sicms-menu .sicms-nav-item.sicms-menu-swaddleme:focus-within {
    background-color: #9EA3A3;
}

.sicms-menu-swaddleme > .sicms-menu-link {
    background-image: url('../img/logo-swaddleme.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 120px !important;
    filter: grayscale(100%) contrast(200%) invert(1);
}

.sicms-menu-swaddleme > .sicms-menu-link > .sicms-menu-link-title {
  visibility: hidden;
}


/* SwaddleMe base styles */

.swaddleme-page {
  background-image: url("../img/background-page.png");
  background-repeat: repeat-y;
  background-size: contain;
  font-family: "Archer Book", serif;
  color: #002d74;
  padding-bottom: 4rem;
}

.swaddleme-page h1 { font-size: 2.5rem; font-weight: 600; }
.swaddleme-page h2 { font-size: 2.25rem; font-weight: 600; }
.swaddleme-page h3 { font-size: 1.75rem; font-weight: 600; }
.swaddleme-page h4 { font-size: 1.5rem; font-weight: 600; }
.swaddleme-page h5 { font-size: 1.25rem; font-weight: 600; }
.swaddleme-page h6 { font-size: 1rem; font-weight: 600; }

.swaddleme-section {
  margin: 3rem 0;
}

.swaddleme-heading {
  max-width: 1200px;
  margin: auto;
  padding: 0 15px;
}

.swaddleme-content {
  max-width: 1200px;
  margin: auto;
  padding: 0 15px;
}

.swaddleme-logo {
  text-align: center;
  padding: 2rem 0;
}

.swaddleme-logo img {
  max-width: 100%;
  height: auto;
}

.swaddleme-hero {
  text-align: center;
}

.swaddleme-hero img {
  width: 100%;
  height: auto;
}

.swaddleme-lead-content {
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.25;
  font-family: "Archer", serif;
  font-weight: 500;
  font-style: italic;
  padding: 0;
}

hr.swaddleme-hr {
  border: 0;
  width: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 2rem 0;
}

hr.swaddleme-hr-line-above {
  background-image: url("../img/hr-line-above.png");
  height: 16px;
}

hr.swaddleme-hr-line-below {
  background-image: url("../img/hr-line-below.png");
  height: 16px;
}

hr.swaddleme-hr-brand {
  background-image: url("../img/hr-swaddleme-heart.png");
  height: 61px;
  background-repeat: repeat-x;
}

.swaddleme-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.swaddleme-card {
  width: 100%;
  max-width: 320px;
  padding: 0;
}

.swaddleme-card-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 150%; /* card images use aspect ratio 2:3 */
  overflow: hidden;
}

.swaddleme-card-image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
}

.swaddleme-card-body {
  position: relative;
  top: -4rem;
  text-align: center;
  color: #fff;
  margin: auto;
  margin-bottom: -2.5rem;
}

.swaddleme-card-title {
  display: block;
  font-family: "Archer", serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  padding: 1rem 2rem 0.25rem 2rem;
}

.swaddleme-card-subtitle {
  display: block;
  font-family: "Archer", serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.25rem;
  padding: 0 2rem 0.25rem 2rem;
}

.swaddleme-card-footer {
  text-align: center;
}

.swaddleme-resources {
  text-align: center;
}

.swaddleme-shape {
  width: 200px;
  height: 200px;
  margin: 0 auto 0.5rem auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.swaddleme-shape-1 {
  background-image: url("../img/shape-stage-1.png");
}

.swaddleme-shape-2 {
  background-image: url("../img/shape-stage-2.png");
}

.swaddleme-shape-3 {
  background-image: url("../img/shape-stage-3.png");
}

a.swaddleme-button {
  text-decoration: none;
  color: #002d74;
}

.swaddleme-button {
  display: inline-block;
  color: #002d74;
  border-width: 3px;
  border-style: solid;
  font-family: "Utily", sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  padding: 0.25rem 1rem;
}

.swaddleme-button:focus,
.swaddleme-button:hover {
  color: #fff;
}

.swaddleme-button-large {
  border-width: 4px;
  font-size: 2rem;
  padding: 0.75rem 2rem;
}

.swaddleme-button-1 {
  border-color: #00ccb7;
}

.swaddleme-button-1:focus,
.swaddleme-button-1:hover {
  border-color: #008072;
  background-color: #00ccb7;
}

.swaddleme-button-2 {
  border-color: #318cdd;
}

.swaddleme-button-2:focus,
.swaddleme-button-2:hover {
  border-color: #205c91;
  background-color: #318cdd;
}

.swaddleme-button-3 {
  border-color: #f58b75;
}

.swaddleme-button-3:focus,
.swaddleme-button-3:hover {
  border-color: #a96050;
  background-color: #f58b75;
}

/* SwaddleMe responsive styles */

@media (min-width: 576px) {
  .swaddleme-lead-content {
    font-size: 1.5rem;
    padding: 0rem 2rem;
  }
}

@media (min-width: 768px) {
  .swaddleme-page h1 { font-size: 3.25rem; }
  .swaddleme-page h2 { font-size: 2.75rem; }
  .swaddleme-page h3 { font-size: 2rem; }
  
  hr.swaddleme-hr {
    margin: 2.5rem 0;
  }

  hr.swaddleme-hr-brand {
    background-image: url("../img/hr-swaddleme-heart.png");
  }
  
  .swaddleme-lead-content {
    font-size: 1.75rem;
    line-height: 1.5;
    padding: 0rem 3rem;
  }
  
  .swaddleme-cards {
    flex-direction: row;
    justify-content: center;
  }
  
  .swaddleme-card {
    padding: 0 1rem;
  }
}

@media (min-width: 1200px) {
  .swaddleme-page h1 { font-size: 3.5rem; }
  .swaddleme-page h2 { font-size: 3.25rem; }
  .swaddleme-page h3 { font-size: 2.5rem; }
  
  hr.swaddleme-hr {
    margin: 3rem 0;
  }
  
  .swaddleme-lead-content {
    padding: 0rem 5rem;
  }
  
  .swaddleme-cards {
    margin: 0 3rem;
  }
  
  .swaddleme-card {
    padding: 0 2rem;
  }
}