/*=======================================
=            General styling            =
=======================================*/
/* .display-4 style */
h1.hawaii-text {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}
.bg-container {
  top: 0;
  bottom: 0;
}
.hawaiian-bg {
  background-color: #00739f; /* Hawaiian palette teal */
}

/*=====  End of General styling  ======*/


/*=============================
=            Fonts            =
=============================*/
.hawaii-text {
  font-family:'HawaiiLover',Sans-Serif;
}

/*=====  End of Fonts  ======*/


/*==============================================
=            Hawaiian Color Palette            =
==============================================*/
/* Palette: color-hex.com/color-palette/5186 */

.teal {
  color:  #00739f;
}
.red-dark {
  color: #b23948;
}
.red-light {
  color:  #ff000e;
}
.pink-dark {
  color: #ff407c;
}
.pink-light {
  color:  #ffb2e1;
}
.teal-bg {
  background-color:  #00739f;
}
.teal-bg-90 {
  background-color:  rgba(0,115,159,.9);
}
.red-dark-bg {
  background-color: #b23948;
}
.red-light-bg {
  background-color:  #ff000e;
}
.pink-dark-bg {
  background-color: #ff407c;
}
.pink-light-bg {
  background-color:  #ffb2e1;
}

/*=====  End of Hawaiian Color Palette  ======*/

/*==========================================
=            Responsive styling            =
==========================================*/
/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* .display-3 style */
  h1.hawaii-text {
    font-size: 4.5rem;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* .display-1 style */
  h1.hawaii-text {
    font-size: 6rem;
  }
  .hawaiian-bg {
    background-image: url(/css/media/beautiful-outdoor-tropical-beach-sea-paradise-island-sm.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}


/*=====  End of Responsive styling  ======*/