/*
  Love Pink: #ff4081
  rgba(255, 64, 129, .7)

first       { color: #f969a0; }
last        { color: #f969a0; }
first-date  { color: #db0972; }
date        { color: #ed1944; }
marriage    { color: #84104a; }

*/

@font-face {
  font-family: 'simpler regular';
  src: url('/fonts/simpler-regular-webfont.eot');
  src: url('/fonts/simpler-regular-webfont.woff2') format('woff2'),
       url('/fonts/simpler-regular-webfont.woff2') format('woff'),
       url('/fonts/simpler-regular-webfont.ttf') format('truetype'),
       url('/fonts/simpler-regular-webfont.svg#simplerregular') format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'simpler light';
  src: url('/fonts/simpler-light-webfont.eot');
  src: url('/fonts/simpler-light-webfont.woff2') format('woff2'),
       url('/fonts/simpler-light-webfont.woff2') format('woff'),
       url('/fonts/simpler-light-webfont.ttf') format('truetype'),
       url('/fonts/simpler-light-webfont.svg#simplerlight') format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'simpler bold';
  src: url('/fonts/simpler-bold-webfont.eot');
  src: url('/fonts/simpler-bold-webfont.woff2') format('woff2'),
       url('/fonts/simpler-bold-webfont.woff2') format('woff'),
       url('/fonts/simpler-bold-webfont.ttf') format('truetype'),
       url('/fonts/simpler-bold-webfont.svg#simplerbold') format('svg');
  font-weight: 400;
  font-style: normal;
}

html, body {
  font-family: 'simpler regular', sans-serif;
}

body {
  font-size: 14px;
  background-color: #FAF7F2;
  -webkit-text-size-adjust: 100%;
}

.container-fluid {
  margin: 0 auto;
  max-width: initial;
  width: 100%;
}

header .nav-wrapper > .logo {
  display: inline-block;
  height: 100%;
  margin-right: 8px;
}

header .nav-wrapper a.left {
  padding-left: 15px;
}

header .nav-wrapper a.right {
  padding-right: 8px;
}

header .nav-wrapper .logo img {
  vertical-align: middle;
}

header p {
  margin: 0;
}

header .side-nav,
header .collapsible {
  padding-right: 0;
}

header .side-nav li > h2 > i.material-icons {
  float: left;
  height: 48px;
  line-height: 48px;
  margin: 0 32px 0 0;
  width: 24px;
  color: rgba(0, 0, 0, 0.54);
}

header .collapsible > li {
  border-top: 1px solid rgba(0, 0, 0, .12);
}

header .collapsible > li:first-child,
header .collapsible > li.active {
  border-top: 0;
}

header .collapsible h2.collapsible-header {
  margin: 0;
  padding: 0 16px;
  color: rgba(0, 0, 0, 0.87);
  height: inherit;
  font-family: 'simpler bold';
  font-size: 16px;
}

header .collapsible .collapsible-header.active {
  background-color: #fbcbdc;
}

header .collapsible .collapsible-body {
  padding: 1em;
  background: white;
  color: black;
}

header .collapsible-body p {
  margin: 0;
  line-height: 1.5;
  font-family: 'simpler light';
  font-size: 14px;
}

.terms-and-conditions-content h3 {
  font-size: 14px;
  text-decoration: underline;
  margin: 1em 0 .5em;
  padding: 0;
}

.terms-and-conditions-content ul {
  padding-right: 20px;
}

.terms-and-conditions-content ul li {
  line-height: 1.3;
  list-style-type: disc;
  margin-bottom: .3em;
}

header .collapsible .collapsible-body .mailto {
  display: inline-block;
  margin: 0;
  padding: 0;
  color: #ff4081;
  font-size: 15px;
  line-height: initial;
  height: auto;
}

header .side-nav > div:first-child {
  overflow: auto;
  height: calc(100vh - 64px);
}

header .side-nav > div:last-child {
  position: absolute;
  bottom: 60px;
  width: 100%;
  background: white;
  padding-right: 16px;
}

header .side-nav > li .logo {
  margin: 8px 0;
}

#map-wrapper {
  width: 100%;
  margin-top: 1px;
  height: calc(100vh - 100px);
  position: relative;
  overflow: hidden;
}

.welcome-banner {
  display: none;
  padding: 3px 1em;
  background-color: rgba(255, 64, 129, .79);
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
}

.welcome-banner h1 {
  font-size: 14px;
  font-family: 'simpler regular';
  margin: 0;
  line-height: 1.5;
}

.welcome-banner .welcome-banner-close-icon {
  float: left;
  margin-top: 19px;
  cursor: pointer;
  color: white;
}

.welcome-banner p {
  margin: 0;
  line-height: 1.5;
}

#map-canvas {
  height: 100%;
}

.gm-style-iw {
  width: 350px !important;
  top: 15px !important;
  right: -75px !important;
  left: auto !important;
  background-color: #fff;
  background-color: transparent;
  border: none;
  direction: ltr;
}

.gm-style-iw > div:first-child {
  display: block !important;
}

.story-wrapper {
  direction: rtl;
  width: 100%;
}

.story-wrapper .story-head {
  padding: 12px 16px;
  background: #ff4081;
  color: white;
  display: flex;
  align-items: center;
}

.story-head.story-type-first,
.story-head.story-type-last        { background-color: #f969a0; }
.story-head.story-type-first-date  { background-color: #db0972; }
.story-head.story-type-date        { background-color: #ed1944; }
.story-head.story-type-marriage    { background-color: #84104a; }

.story-wrapper .story-head h5 {
  font-family: 'simpler bold';
  font-size: 14px;
  margin: 0 5px 0 0;
  flex: 1;
}

.story-wrapper .story-head img {
  width: 20px;
  height: 20px;
  margin-left: 4px;
}

.story-wrapper .story-share {
  margin-left: 5px;
  cursor: pointer;
}

.story-wrapper .story-share i {
  font-size: 20px;
}

.story-wrapper .story-body {
  padding: 12px 16px 16px;
  background-color: #fff;
}

.story-wrapper .story-body .story-name {
  margin-bottom: 4px;
}

.story-wrapper .story-name {
  font-family: 'simpler bold';
  font-size: 10px;
  margin-bottom: 6px;
}

.story-wrapper .story-content {
  font-family: 'simpler regular';
  font-size: 12px;
  width: 316px;
  max-height: 236px;
  position: relative;
  overflow: auto;
}

@media only screen and (max-width: 600px) {
  .gm-style-iw {
    width: 80vw !important;
    right: 10vw !important;
    // left: 0 !important;
  }

  .story-wrapper .story-content {
    width: calc(80vw - 66px) !important;    // 216px
  }
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

form#new-story-form {
  display: block;
  width: 100%;
  position: relative;

  background: white;
  color: #ff4081;
}

.input-field label {
  left: auto;
  right: 0;
}

.new-story-step {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 1s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
  background: white;
}

.new-story-step.new-story-step-current {
  transform: translateY(0);
  transition: transform 1s !important;
}

.new-story-step.new-story-step-current.new-story-step-current-hide {
  transform: translateY(100%);
}

.new-story-step.new-story-step-closed {
  height: 44px;
  line-height: 44px;
  transition-duration: .5s !important;
  color: black;
}

.new-story-step-closed img {
  margin-right: 1em;
  margin-left: .5em;
}

.new-story-body {
  padding: 8px 16px 16px;
}

.new-story-head {
  padding: 0 16px 16px;
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #ebebeb;
}

.new-story-head .close-icon {
  position: absolute;
  left: 16px;
  top: 7px;
  color: #ff4081;
  cursor: pointer;
  z-index: 50;
}

.new-story-head .close-icon i {
  font-size: 28px;
}

.new-story-step-closed .new-story-head {
  padding: 0 16px;
}

.new-story-step-category .new-story-head {
  background-color: #ececec;
  font-size: 16px;
  font-family: 'simpler bold';
  color: #4d4d4d;
}

.new-story-step-name .new-story-head.story-content-wrapper {
  height: auto;
  line-height: 1.5;
  padding-top: 16px;
}

#story_type {
  padding: 6px 0 0;
  margin: 0;
}

#story_type li {
  padding: 4px 0;
}

#story_type label {
  padding-left: 0;
  padding-right: 35px;
}

#story_type label span.vr,
.story-type-selected label span.vr {
  margin-left: 4px;
  font-size: 19px;
  vertical-align: middle;
}

#story_type label:before,
#story_type label:after,
.story-type-selected label:before,
.story-type-selected label:after {
  border-radius: 0;
  background-image: url("/images/hearts-legend.png");
  background-repeat: no-repeat;
  background-position: 0 -20px;
  background-color: transparent;
  border: 0;
  width: 22px;
  height: 20px;
  left: auto;
  right: 0;
}

.legend-first      label { color: #f969a0; }
.legend-last       label { color: #f969a0; }
.legend-first-date label { color: #db0972; }
.legend-date       label { color: #ed1944; }
.legend-marriage   label { color: #84104a; }

.legend-first      label:before { background-position: 0 -20px !important; }
.legend-last       label:before { background-position: -22px -20px !important; }
.legend-first-date label:before { background-position: -44px -20px !important; }
.legend-date       label:before { background-position: -66px -20px !important; }
.legend-marriage   label:before { background-position: -88px -20px !important; }

.legend-first      label:after { background-position: 0 0 !important; }
.legend-last       label:after { background-position: -22px 0 !important; }
.legend-first-date label:after { background-position: -44px 0 !important; }
.legend-date       label:after { background-position: -66px 0 !important; }
.legend-marriage   label:after { background-position: -88px 0 !important; }

.story-type-selected {
  position: relative;
  padding-top: 8px;
}

.story-type-selected label {
  cursor: pointer;
  display: inline-block;
  position: relative;
  vertical-align: top;
  font-size: 16px;
  height: 25px;
  line-height: 25px;
  padding-right: 35px;
  transition: .28s ease;
  user-select: none;
}

.story-type-selected label:before,
.story-type-selected label:after {
  content: '';
  position: absolute;
  margin: 4px;
  z-index: 0;
  transition: .28s ease
}

.new-story-step-story textarea {
  background: #ededed;
  margin-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
  max-height: 200px;
}

form#new-story-form .story-content {
  max-height: 200px;
  overflow: auto;
}

.story-content {
  white-space: pre-line;
  color: #757575;
  word-break: break-word;
}

.new-story-success .modal {
  transform: translateY(-50%) !important;
  text-align: right;
}

.new-story-success .modal h5 {
  font-family: 'simpler bold';
  font-size: 19px;
  line-height: 1.5;
}

.new-story-success .modal p {
  font-size: 15px;
  color: #666;
}

.new-story-success .modal .share-wrapper {
  border-top: 1px solid #ebebeb;
  margin: 0 -24px;
  padding-top: 8px;
  text-align: center;
}

.new-story-success .modal .share-wrapper ul {
  margin-top: 16px;
}

#story-success-content-first,
#story-success-content-last       { color: #f969a0; }
#story-success-content-first-date { color: #db0972; }
#story-success-content-date       { color: #ed1944; }
#story-success-content-marriage   { color: #84104a; }

.hearts-legend {
  margin: 0;
  padding: 0;
}

.hearts-legend li {
  height: 40px;
  font-size: 15px;
  font-family: 'simpler regular';
}

.hearts-legend label {
  font-size: inherit;
}

.heart {
  display: inline-block;
  background-image: url(/images/hearts-legend.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
  width: 22px;
  height: 20px;
  margin: 0 3px 0 6px;
}

.heart.heart-last       { background-position: -22px 0; }
.heart.heart-first-date { background-position: -44px 0; }
.heart.heart-date       { background-position: -66px 0; }
.heart.heart-marriage   { background-position: -88px 0; }

footer .share-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #eee;
  text-align: center;
  padding: 24px 16px;
  border-top: 1px solid white;
}

.share-wrapper .close-icon {
  position: absolute;
  left: 16px;
  top: 7px;
  color: #ff4081;
  cursor: pointer;
  z-index: 50;
}

.share-wrapper ul {
  margin: 0;
  padding: 0;
}

.share-wrapper ul li {
  display: inline-block;
  padding: 0 15px;
}

.share-wrapper ul li img {
  vertical-align: middle;
  max-height: 24px;
}

#site-share-dropdown {
  padding-right: 0;
}

#site-share-dropdown li {
  text-align: center;
}

#site-share-dropdown li a {
  color: black;
}

#site-share-dropdown li a img {
  max-height: 24px;
}

strong, .strong, .text-strong {
  font-family: 'simpler bold' !important;
}

.text-light {
  font-family: 'simpler light' !important;
}

.text-dark {
  color: #4d4d4d;
}

.text-primary {
  color: #ff4081;
}

.p-1 {
  padding-top: 1em;
  padding-bottom: 1em;
}

.p-15 {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.p-2 {
  padding-top: 2em;
  padding-bottom: 2em;
}

.pb-1 {
  padding-bottom: 1em;
}

.pb-15 {
  padding-bottom: 1.5em;
}

.pb-2 {
  padding-bottom: 2em;
}

.slide-transition {
  overflow: hidden;
  transform: translateY(0);
  transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
}

.slide-transition.slide-up {
  transform: translateY(-100%);
  transition: transform 1s !important;
}

a {
  color: #00B7FF;
}

hr {
  margin-bottom: 15px !important;
  margin-top: 15px !important;
}

.close-icon {
  cursor: pointer;
}

body.device--iphone input,
body.device--iphone textarea {
  font-size: 16px !important;
}