.text-cr-red { color: #C90815; }
.bg-cr-red { background-color: #C90815; }
.btn-cr-red { background-color: #C90815; color: white; }
.btn-outline-cr-red { border-color: #C90815; color: #C90815;  }
.top-cr-red { border-top: 5px solid #C90815; }
.bg-cr-grey { background-color: #f0edef; }
.text-cr-grey { color: #f0edef; }

body { font-family: 'Roboto', sans-serif; font-weight:400; font-size:1.2em; }
h1, .h1 { font-size: 3em; line-height: 1.2; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .lead { font-family: 'Poppins', sans-serif; }

.roboto { font-family: 'Roboto', sans-serif; font-weight: 400; }
.roboto-light { font-family: 'Roboto', sans-serif; font-weight: 300; }
.markdown h2, .markdown .h2 { font-size: 1.2em; margin-top: 1.5em; }
.markdown h3, .markdown .h3 { font-size: 1.1em; margin-top: 1.5em; }
.markdown h4, .markdown .h4 { font-size: 1.0em; margin-top: 1.5em; }
.markdown h5, .markdown .h5 { font-size: 0.9em; margin-top: 1.5em; }
.markdown .shoutout { font-size: 2em; line-height: 1.0; }
.trendcontent h2, .trendcontent .h2 { font-size: 1.2em; }

.menu-active span { background-image: url("/img/menu-active.png"); background-size: 100% 10px; padding-bottom: 5px; background-repeat: no-repeat; background-position: center bottom;  image-rendering: -webkit-optimize-contrast;  }

.tdavatar{ width: 50px !important; }

.reply-quote { border-left: 3px solid #ccc; margin: 0 30px; padding-left: 10px; }
.reply-quote:before { font-family: "Font Awesome 5 Free"; font-size: 2em; font-weight: 900; content: "\f10e"; color: #ccc; margin-left: -2em; position: absolute; }

.home-header-photo { background: url(../img/homepj.png); background-repeat: no-repeat; background-position: center bottom; min-height: 450px; }

.bg-note { background-color: #fdfcf1; }
.bg-notice { background-color: #f4f4f4; }
.nav-menu a { display: block; font-size: 0.95em; text-transform: uppercase; color: #000; line-height: 1.3; text-decoration: none;  }
.nav-menu .active { font-weight: 400; text-decoration: none; }
.borderless th { border: none; }

.text-highlight { font-style: normal; border-radius: 1em 0 1em 0; text-shadow: 1px 1px 1px #fff; background-image: linear-gradient(-100deg, rgba(237,205,205,0.15), rgba(237, 205, 205,0.8) 100%, rgba(237, 205, 205,0.25)); }

.phatlink { color: #000; line-height: 1.4em; position: relative; border-bottom: 3px solid #CC2200; padding-bottom: 0px; text-decoration: none; }
a:hover.phatlink { color: #000; line-height: 1.4em; position: relative; border-bottom: 3px solid #000; padding-bottom: 0px; text-decoration: none; }
.phatlink-white { color: #FFF; line-height: 1.4em; position: relative; border-bottom: 3px solid #FFF; padding-bottom: 0px; text-decoration: none; }
a:hover.phatlink-white { color: #FFF; line-height: 1.4em; position: relative; border-bottom: 3px solid #CC2200; padding-bottom: 0px; text-decoration: none; }
.phatlink-red { color: #CC2200; line-height: 1.4em; position: relative; border-bottom: 3px solid #CC2200; padding-bottom: 0px; text-decoration: none; }
a:hover.phatlink-red { color: #CC2200; line-height: 1.4em; position: relative; border-bottom: 3px solid #000; padding-bottom: 0px; text-decoration: none; }

ul { list-style: none; position: relative; }
ul li::before { content: "\2022"; position: absolute; font-size: 2em; color: #C90815; font-weight: bold; display: inline-block; margin-left: -0.6em; margin-top: -0.37em; }
.page-item::before { content: none; }
.list-group-item::before { content: none; }


mark, .mark { font-style: normal; border-radius: 1em 0 1em 0; text-shadow: 1px 1px 1px #fff; background-image: linear-gradient(-100deg, rgba(237,205,205,0.3), rgba(237,205,205,0.9) 100%, rgba(237,205,205,0.4)); }
.handwritten-block { border-top-left-radius: 255px 15px; border-top-right-radius: 15px 225px; border-bottom-right-radius: 225px 15px; border-bottom-left-radius:15px 255px; border:solid 3px #000; }
.handwritten-list { font-size: 1.4em; padding: 0 2em 0 3em; }
.trendcontent .handwritten-list { font-size: 1.1em; padding: 0 2em 0 3em; }
ul.handwritten-list { list-style-type: none; }
ul.handwritten-list li:before { content: '-'; margin-left: -20px; margin-right: 10px;  }


.underline { text-decoration: underline;  }
.underline-handdrawn { background-image: url("/img/underline.png"); background-position: 0 1.06em; background-size: 155px 8px; color: #9e4446; background-repeat: repeat-x; }
.strong { font-weight: bold;  }

li a.active { font-weight: bold; }
.caps { text-transform: uppercase; }


.red-vertical {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+43,ff5656+43,ff8989+55,ffffff+55 */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+48,ffffff+48,c90815+48,c90815+48,c90815+52,ffffff+52 */
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 48%, #ffffff 48%, #c90815 48%, #c90815 48%, #c90815 52%, #ffffff 52%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 48%,#ffffff 48%,#c90815 48%,#c90815 48%,#c90815 52%,#ffffff 52%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #ffffff 0%,#ffffff 48%,#ffffff 48%,#c90815 48%,#c90815 48%,#c90815 52%,#ffffff 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
 }

.red-rectangle { right: 0px; top: -6px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.red-rectangle { background: #C90815; width: 2000px; height: 25px; }
.tweet-circle:before { left: -60px; top: -15px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.tweet-circle:before { height: 60px; width: 270px; background-image: url("/img/tweet-circle3.png"); background-position: center; background-repeat: no-repeat; background-size: cover; }
.sticker:before { left: -30px; top: -20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.sticker:before { height: 118px; width: 272px; background-image: url("/img/sticker.png"); background-position: center; background-repeat: no-repeat; background-size: cover; }

.joinphoto { height: 700px; background-image: url("/img/join.png"); background-position: left 0px top 0px; background-repeat: no-repeat; background-size: 750px; }



.trendsphoto { height: 400px; background-image: url("/img/8trends.png"); background-position: left 280px top 50px; background-repeat: no-repeat; background-size: 500px; }

@media screen and (max-width: 768px) {
	.markdown .shoutout { margin-left: 0px; width:100%; }
  .trendsphoto { background-position: left 50px top 50px; }
  .home-header-photo { background-position: center bottom; }
  h1, .h1 { font-size: 2em; }
  .joinphoto { height:0%; }
}

@media screen and (max-width: 992px) {
  .red-vertical { background: #ffffff; }
}

@media screen and (min-width: 768px)  {
  .reply-arrow,  { display: block; }
	.markdown .shoutout { margin-left: -50px; width:60%; }
  .home-header-photo { background-position: left bottom; }
}


.hr-dashed { border-top: 2px dashed lightgrey; }

.card { border: 0px; background: #fff; border-radius: 0px; }
.bg-blue { background: #f7fcff; }
.bg-silver { background: #bdc3c7; }

body, wrapper { min-height:100vh; }
.flex-fill { flex:1 1 auto; }
.mar-avatar { margin-left: 68px; }

a.anchor { display: block; position: relative; top: -125px; visibility: hidden; }

.twitter { background-color: #55ACEE; }
.linkedin { background-color: #007bb5; }
.whatsapp { background-color: #25D366; }
.facebook { background-color: #3B5998; }
.sharemail { background-color: #dd4b39; }
.instagram { background-color: #c32aa3; }
.icon-bar { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.icon-bar a { display: block; border-style: solid; border-width: 1px; border-color: #333; text-align: center; margin: 4px; padding-left: 12px; padding-right: 12px; padding-top: 6px; padding-bottom: 6px; transition: all 0.3s ease; color: #000; font-size: 16px; background-color: #fff; }
.icon-bar a:hover { color: #FFF; background-color: #444; }
.btn-social { width: 80px; }

.marker { background-image: url('/img/marker.png'); background-size: cover; width: 30px; height: 40px; cursor: pointer; }
.mapboxgl-popup { width: 400px; }

.rounded-bottom-0 { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; width: 100%; }
.rounded-top-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; width: 100%; }
a:hover { text-decoration: none; }


.page-link { background: none; border: 0px; color: #000; }
.page-item.active .page-link { background-color: #bbb;  border-radius: 0; }

.bucketlistmap { width: 100%; height: 500px; }

.dont-break-out {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}