/*


xs - phone
sm
md
lg - tablet / laptop
xl - laptop / desktop
xxl - widescreen

See: https://getbootstrap.com/docs/5.1/layout/breakpoints/

*/
/** HACK: screen height -- why is this not 100vh?! It doesn't seem to be the navbar, which floats over the top
*/
/** select tablets and larger */
/* Use for "mobile only" */
/* widescreen desktops */
/*

The centralised go-to repository of all colours any Good-Loop app should require
Individual apps can override and add to the colour list in their own files if neccessary,
but if a colour can be sourced from here or added to here it should be! Keep it simple!
Additionally, redesigns can happen, sometimes often - it makes it MUCH easier to execute those
if the css remains centralised, especially colours.
Make sure redesigns happen in these files!

ALSO
When adding or removing a colour, remember to keep track of the bootstrap-style class definitions as well
They should all be commented with matching labels

*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:600,800|Tajawal&display=swap');
.bg-gl-white {
  background-color: #fff !important;
}
.bg-gl-white-blue {
  background-color: #F7FAFC !important;
}
.color-gl-white {
  color: #fff !important;
}
.color-gl-white h1 > a,
.color-gl-white h2 > a,
.color-gl-white h3 > a,
.color-gl-white h4 > a,
.color-gl-white h5 > a {
  color: #fff !important;
}
.color-gl-white-blue {
  color: #F7FAFC !important;
}
.color-gl-white-blue h1 > a,
.color-gl-white-blue h2 > a,
.color-gl-white-blue h3 > a,
.color-gl-white-blue h4 > a,
.color-gl-white-blue h5 > a {
  color: #F7FAFC !important;
}
.bg-gl-red {
  background-color: #770f00 !important;
}
.bg-gl-light-red {
  background-color: #af2009 !important;
}
.color-gl-red {
  color: #770f00 !important;
}
.color-gl-red h1 > a,
.color-gl-red h2 > a,
.color-gl-red h3 > a,
.color-gl-red h4 > a,
.color-gl-red h5 > a {
  color: #770f00 !important;
}
.color-gl-light-red {
  color: #af2009 !important;
}
.color-gl-light-red h1 > a,
.color-gl-light-red h2 > a,
.color-gl-light-red h3 > a,
.color-gl-light-red h4 > a,
.color-gl-light-red h5 > a {
  color: #af2009 !important;
}
.bg-gl-pink {
  background-color: #FBE1DE !important;
}
.bg-gl-light-pink {
  background-color: #FEF5F4 !important;
}
.color-gl-pink {
  color: #FBE1DE !important;
}
.color-gl-pink h1 > a,
.color-gl-pink h2 > a,
.color-gl-pink h3 > a,
.color-gl-pink h4 > a,
.color-gl-pink h5 > a {
  color: #FBE1DE !important;
}
.color-gl-light-pink {
  color: #FEF5F4 !important;
}
.color-gl-light-pink h1 > a,
.color-gl-light-pink h2 > a,
.color-gl-light-pink h3 > a,
.color-gl-light-pink h4 > a,
.color-gl-light-pink h5 > a {
  color: #FEF5F4 !important;
}
.bg-gl-orange {
  background-color: #af2009 !important;
}
.bg-gl-light-orange {
  background-color: #e82316 !important;
}
.bg-gl-pale-orange {
  background-color: #fcf5f4 !important;
}
.color-gl-orange {
  color: #af2009 !important;
}
.color-gl-orange h1 > a,
.color-gl-orange h2 > a,
.color-gl-orange h3 > a,
.color-gl-orange h4 > a,
.color-gl-orange h5 > a {
  color: #af2009 !important;
}
.color-gl-light-orange {
  color: #e82316 !important;
}
.color-gl-light-orange h1 > a,
.color-gl-light-orange h2 > a,
.color-gl-light-orange h3 > a,
.color-gl-light-orange h4 > a,
.color-gl-light-orange h5 > a {
  color: #e82316 !important;
}
.color-gl-pale-orange {
  color: #fcf5f4 !important;
}
.color-gl-pale-orange h1 > a,
.color-gl-pale-orange h2 > a,
.color-gl-pale-orange h3 > a,
.color-gl-pale-orange h4 > a,
.color-gl-pale-orange h5 > a {
  color: #fcf5f4 !important;
}
.bg-gl-dark-blue {
  background-color: #3c747c !important;
}
.bg-gl-muddy-blue {
  background-color: #286984 !important;
}
.bg-gl-blue {
  background-color: #1894DA !important;
}
.bg-gl-desat-blue {
  background-color: #3488AB !important;
}
.bg-gl-light-blue {
  background-color: #5ca5c0 !important;
}
.bg-gl-lighter-blue {
  background-color: #DEEEF3 !important;
}
.color-gl-dark-blue {
  color: #3c747c !important;
}
.color-gl-dark-blue h1 > a,
.color-gl-dark-blue h2 > a,
.color-gl-dark-blue h3 > a,
.color-gl-dark-blue h4 > a,
.color-gl-dark-blue h5 > a {
  color: #3c747c !important;
}
.color-gl-muddy-blue {
  color: #286984 !important;
}
.color-gl-muddy-blue h1 > a,
.color-gl-muddy-blue h2 > a,
.color-gl-muddy-blue h3 > a,
.color-gl-muddy-blue h4 > a,
.color-gl-muddy-blue h5 > a {
  color: #286984 !important;
}
.color-gl-blue {
  color: #1894DA !important;
}
.color-gl-blue h1 > a,
.color-gl-blue h2 > a,
.color-gl-blue h3 > a,
.color-gl-blue h4 > a,
.color-gl-blue h5 > a {
  color: #1894DA !important;
}
.color-gl-desat-blue {
  color: #3488AB !important;
}
.color-gl-desat-blue h1 > a,
.color-gl-desat-blue h2 > a,
.color-gl-desat-blue h3 > a,
.color-gl-desat-blue h4 > a,
.color-gl-desat-blue h5 > a {
  color: #3488AB !important;
}
.color-gl-light-blue {
  color: #5ca5c0 !important;
}
.color-gl-light-blue h1 > a,
.color-gl-light-blue h2 > a,
.color-gl-light-blue h3 > a,
.color-gl-light-blue h4 > a,
.color-gl-light-blue h5 > a {
  color: #5ca5c0 !important;
}
.bg-gl-darker-grey {
  background-color: #515151 !important;
}
.bg-gl-dark-grey {
  background-color: #928b81 !important;
}
.bg-gl-light-grey {
  background-color: #E4E4E4 !important;
}
.color-gl-darker-grey {
  color: #515151 !important;
}
.color-gl-darker-grey h1 > a,
.color-gl-darker-grey h2 > a,
.color-gl-darker-grey h3 > a,
.color-gl-darker-grey h4 > a,
.color-gl-darker-grey h5 > a {
  color: #515151 !important;
}
.color-gl-dark-grey {
  color: #928b81 !important;
}
.color-gl-dark-grey h1 > a,
.color-gl-dark-grey h2 > a,
.color-gl-dark-grey h3 > a,
.color-gl-dark-grey h4 > a,
.color-gl-dark-grey h5 > a {
  color: #928b81 !important;
}
.color-gl-light-grey {
  color: #E4E4E4 !important;
}
.color-gl-light-grey h1 > a,
.color-gl-light-grey h2 > a,
.color-gl-light-grey h3 > a,
.color-gl-light-grey h4 > a,
.color-gl-light-grey h5 > a {
  color: #E4E4E4 !important;
}
.bg-gl-dark-turquoise {
  background-color: #286984 !important;
}
.bg-gl-turquoise {
  background-color: #51B6AA !important;
}
.color-gl-dark-turquoise {
  color: #286984 !important;
}
.color-gl-dark-turquoise h1 > a,
.color-gl-dark-turquoise h2 > a,
.color-gl-dark-turquoise h3 > a,
.color-gl-dark-turquoise h4 > a,
.color-gl-dark-turquoise h5 > a {
  color: #286984 !important;
}
.color-gl-turquoise {
  color: #51B6AA !important;
}
.color-gl-turquoise h1 > a,
.color-gl-turquoise h2 > a,
.color-gl-turquoise h3 > a,
.color-gl-turquoise h4 > a,
.color-gl-turquoise h5 > a {
  color: #51B6AA !important;
}
.bg-gl-background-default {
  background-color: #f4f3f1 !important;
}
.color-gl-background-default {
  color: #f4f3f1 !important;
}
.color-gl-background-default h1 > a,
.color-gl-background-default h2 > a,
.color-gl-background-default h3 > a,
.color-gl-background-default h4 > a,
.color-gl-background-default h5 > a {
  color: #f4f3f1 !important;
}
.bg-greenmedia-darkgreen {
  background-color: #285E41 !important;
}
.bg-greenmedia-green {
  background-color: #75B752 !important;
}
.bg-greenmedia-lightgreen {
  background-color: #F2F8EF !important;
}
.color-greenmedia-darkgreen {
  color: #285E41 !important;
}
.color-greenmedia-darkgreen h1 > a,
.color-greenmedia-darkgreen h2 > a,
.color-greenmedia-darkgreen h3 > a,
.color-greenmedia-darkgreen h4 > a,
.color-greenmedia-darkgreen h5 > a {
  color: #285E41 !important;
}
.color-greenmedia-green {
  color: #75B752 !important;
}
.color-greenmedia-green h1 > a,
.color-greenmedia-green h2 > a,
.color-greenmedia-green h3 > a,
.color-greenmedia-green h4 > a,
.color-greenmedia-green h5 > a {
  color: #75B752 !important;
}
.color-greenmedia-lightgreen {
  color: #F2F8EF !important;
}
.color-greenmedia-lightgreen h1 > a,
.color-greenmedia-lightgreen h2 > a,
.color-greenmedia-lightgreen h3 > a,
.color-greenmedia-lightgreen h4 > a,
.color-greenmedia-lightgreen h5 > a {
  color: #F2F8EF !important;
}
.bg-greenmedia-seagreen {
  background-color: #477b73 !important;
}
.color-greenmedia-seagreen {
  color: #477b73 !important;
}
.color-greenmedia-seagreen h1 > a,
.color-greenmedia-seagreen h2 > a,
.color-greenmedia-seagreen h3 > a,
.color-greenmedia-seagreen h4 > a,
.color-greenmedia-seagreen h5 > a {
  color: #477b73 !important;
}
.bg-greenmedia-darkcyan {
  background-color: #52727a !important;
}
.color-greenmedia-darkcyan {
  color: #52727a !important;
}
.color-greenmedia-darkcyan h1 > a,
.color-greenmedia-darkcyan h2 > a,
.color-greenmedia-darkcyan h3 > a,
.color-greenmedia-darkcyan h4 > a,
.color-greenmedia-darkcyan h5 > a {
  color: #52727a !important;
}
.fill-gl-red {
  fill: #770f00;
}
.black {
  color: #000;
}
.white {
  color: #fff;
}
.text-dark-0 {
  color: #343a40;
}
.bg-dark-0 {
  background-color: #343a40;
}
.text-light-0 {
  color: #f8f9fa;
}
.bg-light-0 {
  background-color: #f8f9fa;
}
.text-dark-1 {
  color: #3c747c;
}
.bg-dark-1 {
  background-color: #3c747c;
}
.text-light-1 {
  color: #E4E4E4;
}
.bg-light-1 {
  background-color: #E4E4E4;
}
.text-dark-2 {
  color: #770f00;
}
.bg-dark-2 {
  background-color: #770f00;
}
.text-light-2 {
  color: #5ca5c0;
}
.bg-light-2 {
  background-color: #5ca5c0;
}
.color-facebook {
  color: #3b5998;
}
.color-twitter {
  color: #4099ff;
}
.color-instagram {
  color: #e95950;
}
.color-linkedin {
  color: #0077B5;
}
.color-good-loop {
  color: #770f00;
}
.bg-facebook {
  background-color: #3b5998;
}
.bg-twitter {
  background-color: #4099ff;
}
.bg-instagram {
  background-color: #e95950;
}
.bg-linkedin {
  background-color: #0077B5;
}
.bg-good-loop {
  background-color: #770f00;
}
/* To setup: symlink the fonts folder from wwappbase.js into web/fonts
e.g.
	cd web
	ln -s ../src/js/base/base-fonts .
(assuming src/js/base is already a symlink to wwappbase.js/base)
*/
/** This is UPPERCASE so only use it for _short_ headers. 
Otherwise its hard to read, and shouty.
*/
.header-font {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}
.sub-header-font {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}
.body-font {
  font-family: "Tajawal", sans-serif;
  font-weight: 400;
}
body {
  font-family: "Tajawal", sans-serif;
  font-weight: 400;
}
h1 {
  font-size: 2.2rem;
  /* from 2.5 */
}
h2 {
  font-size: 1.8rem;
  /* from 2 */
}
h3 {
  font-size: 1.5rem;
  /* from 1.75 */
}
h3.sm {
  font-size: 1rem;
}
h4 {
  font-size: 1.25rem;
  /* from 1.5 */
}
h4.sm {
  font-size: 1rem;
}
h5 {
  font-size: 1rem;
  /* from 1.25 */
  font-family: "Montserrat", sans-serif;
}
h1,
h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}
h3,
h4,
h5 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}
/* NB ,h3,h4,h5 look too cramped in the Bebas font */
body code {
  color: inherit;
}
/** Opposite of .small 
NB: BS defines .small for textm and -sm -lg for some widgets, but not .large for text */
.large {
  font-size: 1.25em;
}
@media (min-width: 1200px) {
  .large {
    font-size: 1.4em;
  }
}
code {
  text-transform: none !important;
}
/** 
HACK: copy some BS rules, so we can refer to them here in .less
?? Is there a better way to do this?
*/
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.flex {
  display: flex;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
/** a flex row which does not expand to full width */
.flex-row-compact {
  display: flex;
  flex-direction: row;
}
.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}
.flex-grow {
  display: flex;
  flex: 1 !important;
}
.flex-vertical-align {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-centre {
  align-items: center;
}
.flex-align-items-start {
  align-items: start;
}
.flex-wrap {
  flex-wrap: wrap;
}
/** shorthand for use flex to do vertical centering */
.v-centre {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
.flexbox-1row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.flex-space-between {
  justify-content: space-between;
}
/**
BS style support for display:grid
e.g.
<div class="gridbox gridbox-md-3">
defines a 3 column grid
*/
.gridbox {
  display: grid;
  grid-auto-rows: 1fr;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
}
.gridbox.gridbox-gap-5 {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
}
.gridbox.gridbox-gap-4 {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
}
.gridbox.gridbox-gap-3 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
.gridbox.gridbox-gap-0 {
  grid-column-gap: 0;
  grid-row-gap: 0;
}
@media (min-width: 576px) {
  .gridbox-sm-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .gridbox-sm-2 {
    grid-template-columns: repeat(2, 2fr);
  }
  .gridbox-sm-3 {
    grid-template-columns: repeat(3, 3fr);
  }
  .gridbox-sm-4 {
    grid-template-columns: repeat(4, 4fr);
  }
  .gridbox-sm-5 {
    grid-template-columns: repeat(5, 5fr);
  }
  .gridbox-sm-6 {
    grid-template-columns: repeat(6, 6fr);
  }
  .gridbox-sm-7 {
    grid-template-columns: repeat(7, 7fr);
  }
}
@media (min-width: 768px) {
  .gridbox-md-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .gridbox-md-2 {
    grid-template-columns: repeat(2, 2fr);
  }
  .gridbox-md-3 {
    grid-template-columns: repeat(3, 3fr);
  }
  .gridbox-md-4 {
    grid-template-columns: repeat(4, 4fr);
  }
  .gridbox-md-5 {
    grid-template-columns: repeat(5, 5fr);
  }
  .gridbox-md-6 {
    grid-template-columns: repeat(6, 6fr);
  }
  .gridbox-md-7 {
    grid-template-columns: repeat(7, 7fr);
  }
}
/* spinner */
.loader-box {
  padding-top: 50px;
}
.loader {
  border-top: 16px solid #770f00;
  border-right: 16px solid #3c747c;
  border-bottom: 16px solid #af2009;
  border-left: 16px solid #5ca5c0;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
.spinning {
  animation: spin 3s infinite linear;
}
@keyframes spin {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1) rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.img-credit {
  z-index: 100;
  position: absolute;
  bottom: 0;
  right: 0;
  color: white;
  background: #666;
}
/**
BS 5 off-canvas, backport for BS 4
*/
.offcanvas.show {
  transform: none;
  visibility: visible;
}
.offcanvas-start {
  top: 50px;
  left: 0;
  width: 400px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.5);
}
.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  background-color: #fff;
  background-clip: padding-box;
  outline: 0;
  transition: transform 0.3s ease-in-out;
}
/* HACK open button */
.offcanvas-toggle {
  position: fixed;
  top: 50px;
  left: 0px;
}
.offcanvas-header .offcanvas-toggle {
  position: absolute;
  left: auto;
  right: 0.5rem;
  top: 0.5rem;
}
.DropZone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 2px dashed #666;
  border-radius: 5px;
  cursor: pointer;
}
.DropZone.disabled {
  border-color: #aaa;
}
/* have the save button always visible */
.SavePublishDeleteEtc {
  position: fixed;
  bottom: 0;
  padding: 10px;
  color: white;
  background: #333;
  width: 100%;
  z-index: 100;
}
.panel-heading.btn-link {
  cursor: pointer;
}
/* The loading spinner*/
.loader-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loader-box .spinner-box {
  width: 120px;
  height: 120px;
  animation: spin 2s infinite linear;
  border-radius: 50%;
  overflow: hidden;
}
.loader-box.inline {
  flex-direction: row;
}
.loader-box.inline .spinner-box {
  width: 50px;
  height: 50px;
}
.loader-box.inline .loader-text {
  margin-left: 1em;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.emoji {
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
  font-variant-emoji: emoji;
  font-size: 2em;
}
.emoji.logo-sm {
  font-size: 1em;
}
.emoji.logo-lg {
  font-size: 6em;
}
/**
	This fixes the issue that an emoji can have weird colours with unpredictable UX effects
	To do different colours, apply more css :'(
*/
.emoji-black {
  color: transparent;
  text-shadow: 0 0 0 black;
}
.emoji-white {
  color: transparent;
  text-shadow: 0 0 0 white;
}
.emoji-grey {
  color: transparent;
  text-shadow: 0 0 0 #666;
}
.emoji-success {
  color: transparent;
  text-shadow: 0 0 0 green;
}
.emoji-info {
  color: transparent;
  text-shadow: 0 0 0 blue;
}
.emoji-warning {
  color: transparent;
  text-shadow: 0 0 0 yellow;
}
.emoji-danger {
  color: transparent;
  text-shadow: 0 0 0 red;
}
.ListLoad {
  margin-bottom: 0.5em;
}
.ListLoad .filter {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #333;
}
.ListLoad .LL-buttons {
  justify-content: space-evenly;
  margin: 0.5em;
}
.ListLoad > div:not(:first-child) {
  margin-top: 0.5em;
}
.ListItem {
  display: inline-flex;
  flex-direction: row;
  width: 100%;
}
.ListItem > *:not(:first-child) {
  margin-left: 0.5em;
}
.ListItem .id {
  font-family: monospace;
}
.ListItem.btn-space {
  width: calc(100% - 4em);
}
.TaskList {
  margin-left: 1em;
  margin-bottom: 1em;
  border-left: 1px solid #666;
  padding-left: 1em;
  background: white;
  height: 100%;
  max-width: 350px;
  min-width: 200px;
}
.login-guts {
  /**
	wide login buttons
	*/
}
.login-guts .login-divs {
  display: flex;
}
.login-guts .btn.signin {
  width: 100%;
  text-align: left;
}
.switch-verb {
  float: right;
  text-align: right;
}
@media (max-width: 576px) {
  .login-modal #loginByEmail label {
    display: none;
  }
  .login-modal .modal-title {
    font-size: 1rem;
    line-height: 1.25;
  }
  .login-modal .modal-title .logo {
    height: 2.5em;
    width: 2.5em;
  }
}
.MDText {
  /* handle long urls nicely */
  overflow-wrap: anywhere;
}
.MessageBar {
  position: fixed;
  /* below dialogs, but above the page base */
  z-index: 101;
}
.MessageBar .alert {
  overflow-x: scroll;
  max-height: 25em;
  position: relative;
}
.MessageBar .alert .close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
}
.MessageBar.side {
  right: 0;
  bottom: 0;
  width: 25em;
}
/* a more compact form layout than BS standard (see also form-inline) */
.form-compact .form-group {
  margin-bottom: 0.85rem;
}
.form-compact label {
  margin-bottom: 0rem;
}
.form-compact .form-control:not(.btn-lg,.btn-sm),
.form-compact .btn:not(.btn-lg,.btn-sm) {
  padding: 0.55rem 0.35rem 0.15rem 0.35rem;
  line-height: 1;
  height: calc(1em + 0.7rem + 2px);
}
.form-compact .form-control[type="color"] {
  padding: 0;
}
.form-compact .input-group-append,
.form-compact .input-group-prepend {
  height: calc(1em + 0.7rem + 2px);
}
.form-compact input.form-check-input {
  margin-top: 0;
}
.form-compact .card-header.btn {
  height: unset;
}
/* ./form-compact */
/* checkbox layout vs sizing - BS default looks a bit broken */
.form-control-sm {
  height: 1.3em;
  line-height: 1;
}
.form-group .input-group.input-group-sm .form-control {
  height: calc(1.3em + 0.4rem + 2px);
  line-height: 1.3;
  padding-top: 0.5rem;
}
.form-group .input-group.input-group-sm .input-group-prepend,
.form-group .input-group.input-group-sm .input-group-append,
.form-group .input-group.input-group-sm .btn {
  height: calc(1.3em + 0.4rem);
  line-height: 1.3;
}
.form-control-lg {
  height: 1.5em;
}
.form-group.Money input,
.form-group.email input,
.form-group.imgUpload input,
.form-group.videoUpload input,
.form-group.textarea textarea {
  max-width: 40em;
}
.form-group.imgUpload .video-thumbnail,
.form-group.videoUpload .video-thumbnail,
.form-group.bothUpload .video-thumbnail,
.form-group.imgUpload .img-thumbnail,
.form-group.videoUpload .img-thumbnail,
.form-group.bothUpload .img-thumbnail,
.form-group.imgUpload .DropZone,
.form-group.videoUpload .DropZone,
.form-group.bothUpload .DropZone {
  margin: 5px;
  height: 80px;
}
.form-group.imgUpload .DropZone,
.form-group.videoUpload .DropZone,
.form-group.bothUpload .DropZone {
  width: 96px;
}
.form-group.imgUpload .img-thumbnail.stripe-bg,
.form-group.videoUpload .img-thumbnail.stripe-bg,
.form-group.bothUpload .img-thumbnail.stripe-bg {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAQMAAAAlhr+SAAAABlBMVEW7u7tVVVXOtErWAAAAM0lEQVQI12P4x8Dwh4XhBw/DBxmGBzYMB2oYGv4wMP5hYP7BwP6Bgf8Bg/wBBvsGhnoGADdeDd7GEVhmAAAAAElFTkSuQmCC);
}
.keyset .keys {
  margin-bottom: 1em;
}
.keyset .key {
  padding: 0.25em;
  border: 1px solid grey;
  border-radius: 0.25em;
  margin-right: 0.25em;
}
.keyset .remove-key {
  background-color: black;
  color: white;
  margin-left: 0.25em;
  border-radius: 0.25em;
  cursor: pointer;
}
.pills .form-control input {
  border: none;
}
.pills .form-control input:focus {
  border: none;
}
/** Make the inner wrapper of the autocomplete element a position reference for the dropdown menu */
.autocomplete > div {
  position: relative;
}
/**
This mimics Bootstrap's form-control on-focus.
You can apply it to, well, anything.
*/
.focus {
  border-radius: 4px;
  border: 1px solid #ccc;
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  margin: -1px;
}
/* aggressively hide filtered inputs! */
.nomatch {
  display: none;
}
/* Special styling for colour controls */
.color-control {
  position: relative;
}
.color-control .overlay {
  pointer-events: none;
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 1px 1px 1px black;
}
.color-control .overlay.light-bg {
  color: black;
  text-shadow: 1px 1px 1px white;
}
.color-control .overlay.no-color {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAQMAAAAlhr+SAAAABlBMVEW7u7tVVVXOtErWAAAAM0lEQVQI12P4x8Dwh4XhBw/DBxmGBzYMB2oYGv4wMP5hYP7BwP6Bgf8Bg/wBBvsGhnoGADdeDd7GEVhmAAAAAElFTkSuQmCC);
}
/* ./color-control */
/* Special styling for PropControlDataItem */
.DataItemBadge .logo {
  border: 1px solid #ddd;
  vertical-align: middle;
}
span.preview .DataItemBadge {
  cursor: default;
}
.data-item-control .dropdown-sizer {
  position: relative;
}
.data-item-control .items-dropdown {
  display: block;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 1;
}
.data-item-control .items-dropdown .DataItemBadge {
  display: block;
  margin: 0;
  padding: 0.25em 0;
}
.data-item-control .items-dropdown .DataItemBadge:not(:first-child) {
  border-top: 1px solid #ddd;
}
/* ./data-item-control */
.modal-propControl .form-group.textarea textarea {
  height: 70vh;
  width: 100%;
  max-width: unset;
}
.SimpleTable {
  /** by default, dont allow too big columns */
  /* styling for tree children */
  /* e.g. "Page < 1 > of 3" */
}
.SimpleTable td {
  max-width: 33vw;
  overflow: auto;
  overflow-wrap: anywhere;
}
.SimpleTable tr.depth2 td:first-child,
.SimpleTable tr.depth3 td:first-child,
.SimpleTable tr.depth4 td:first-child,
.SimpleTable tr.depth5 td:first-child,
.SimpleTable tr.depth6 td:first-child,
.SimpleTable tr.depth7 td:first-child {
  /* make the before content sit to the left of the text without a linebreak */
  flex-direction: row;
  display: flex;
}
.SimpleTable tr.depth2 td:first-child::before,
.SimpleTable tr.depth3 td:first-child::before,
.SimpleTable tr.depth4 td:first-child::before,
.SimpleTable tr.depth5 td:first-child::before,
.SimpleTable tr.depth6 td:first-child::before,
.SimpleTable tr.depth7 td:first-child::before {
  margin-right: 0.2rem;
}
.SimpleTable tr.depth2 {
  font-size: 90%;
}
.SimpleTable tr.depth2 td:first-child::before {
  margin-left: 0.1rem;
  content: '>';
}
.SimpleTable tr.depth3 {
  font-size: 80%;
}
.SimpleTable tr.depth3 td:first-child::before {
  margin-left: 0.45rem;
  content: '>>';
}
.SimpleTable tr.depth3 td {
  padding: 0.5rem;
}
.SimpleTable tr.depth4,
.SimpleTable tr.depth5,
.SimpleTable tr.depth6,
.SimpleTable tr.depth7 {
  font-size: 75%;
}
.SimpleTable tr.depth4 td:first-child::before,
.SimpleTable tr.depth5 td:first-child::before,
.SimpleTable tr.depth6 td:first-child::before,
.SimpleTable tr.depth7 td:first-child::before {
  margin-left: 0.65rem;
  content: '>>>';
}
.SimpleTable tr.depth4 td,
.SimpleTable tr.depth5 td,
.SimpleTable tr.depth6 td,
.SimpleTable tr.depth7 td {
  padding: 0.4rem;
}
.SimpleTable .topRow {
  font-weight: bold;
}
.SimpleTable .pager a {
  text-decoration: none;
}
.table p {
  padding-bottom: 0.25em;
}
.SimpleTable .table a {
  word-break: break-word;
}
.SimpleTable.scroller {
  width: 100%;
  height: 100%;
}
.SimpleTable.scroller .scroll-div {
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.WizardProgressWidget {
  display: flex;
  justify-content: center;
  align-items: center;
}
.WizardProgressWidget .Stage {
  position: relative;
  display: inline-block;
  /* evenly spaced */
  flex-grow: 1;
  flex-basis: 0;
  color: #80bde7;
}
.WizardProgressWidget .Stage h5 {
  font-size: 18px;
  transition: opacity 0.5s;
}
.WizardProgressWidget .Stage .graphic {
  position: relative;
}
.WizardProgressWidget .Stage .marker {
  position: relative;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  z-index: 1;
}
.WizardProgressWidget .Stage .line {
  position: absolute;
  top: 15px;
  width: 100%;
  height: 0;
  outline: 2px solid grey;
  z-index: 0;
}
.WizardProgressWidget .Stage:first-child .line,
.WizardProgressWidget .Stage:last-child .line {
  width: 50%;
}
.WizardProgressWidget .Stage:first-child .line {
  left: 50%;
}
.WizardProgressWidget .Stage.complete {
  cursor: pointer;
}
.WizardProgressWidget .Stage .below {
  opacity: 0;
}
.WizardProgressWidget .Stage.active .above {
  opacity: 0;
}
.WizardProgressWidget .Stage.active .below {
  opacity: 1;
}
.WizardProgressWidget .Stage .marker {
  background-color: #80bde7;
}
.WizardProgressWidget .Stage.complete,
.WizardProgressWidget .Stage.active {
  color: #005;
}
.WizardProgressWidget .Stage.complete .marker,
.WizardProgressWidget .Stage.active .marker {
  background-color: #005;
}
.padded-block {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}
.WizardStage {
  min-height: 50vh;
}
.WizardStage .nav-buttons {
  margin-top: 10px;
}
.WizardStage .nav-buttons-top {
  margin-top: 0;
  border-bottom: 1px solid #333;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
.footer {
  border-top: 1px solid #999;
  background: #333;
  color: white;
  font-size: 11pt;
  line-height: 1;
  min-height: 2em;
  padding: 0.5em;
}
.footer a {
  color: #5ca5c0;
}
.Ticker {
  font-variant-numeric: tabular-nums;
}
.Ticker span {
  text-align: center;
  margin: unset;
}
.BSCarousel {
  height: 100%;
}
.BSCarousel .carousel,
.BSCarousel .carousel-inner,
.BSCarousel .carousel-item {
  height: 100%;
}
.BSCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>");
}
.BSCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
a {
  cursor: pointer;
}
.TODO {
  display: none;
}
.avoid-navbar {
  margin-top: 70px;
}
.navbar-brand {
  padding: 2px;
}
.navbar-brand img {
  min-height: 50%;
  max-height: 48px;
}
/** an extra small button (btn-sm is too big for a 1-line-height setting*/
.btn.btn-xs {
  padding: 0.1rem 0.2rem;
  line-height: 1;
}
/** I miss BS3's btn-default in BS4 -- note btn-outline-dark is a decent replacement */
.btn-default {
  color: #343a40;
  border-color: #343a40;
  background-color: #f8f9fa !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: #333;
  background-color: #e6e6e6;
}
.btn-default:hover {
  border-color: #adadad;
}
.btn-default:focus {
  border-color: #8c8c8c;
}
.btn-default:active {
  background-image: none;
  border-color: #adadad;
}
/* avoid large X with odd spacing on badges */
.badge .close {
  font-size: inherit;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.checkbox input {
  margin-top: 0;
}
.no-margin {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
.no-margin-bottom {
  margin-bottom: 0px;
}
.logo {
  width: 4em;
  height: 4em;
}
.logo-xs,
img.logo-xsmall,
.logo.logo-xs {
  width: 1em;
  height: 1em;
}
.logo-sm,
img.logo-small,
.logo.logo-sm {
  width: 2em;
  height: 2em;
}
.logo-lg,
img.logo-large,
.logo.logo-lg {
  width: 6em;
  height: 6em;
}
.logo-xl,
.logo-xlarge,
.logo.logo-xl {
  width: 8em;
  height: 8em;
}
img.logo,
img.logo-xs,
img.logo-xsmall,
img.logo-sm,
img.logo-small,
img.logo-lg,
img.logo-large,
img.logo-xl,
img.logo-xlarge {
  object-fit: contain;
}
/** a generic .disabled effect */
.disabled {
  opacity: 75%;
}
.row .page {
  width: 100%;
}
@media (max-width: 767px) {
  #mainDiv.nav-open {
    overflow: hidden;
    height: 100vh;
  }
}
@media (min-width: 576px) {
  .container .full-width {
    margin-left: calc(0.5 * (540px + 15px - 100vw));
    margin-right: calc(0.5 * (540px + 15px - 100vw));
  }
}
@media (min-width: 768px) {
  .container .full-width {
    margin-left: calc(0.5 * (720px + 15px - 100vw));
    margin-right: calc(0.5 * (720px + 15px - 100vw));
  }
}
@media (min-width: 992px) {
  .container .full-width {
    margin-left: calc(0.5 * (960px + 15px - 100vw));
    margin-right: calc(0.5 * (960px + 15px - 100vw));
  }
}
@media (min-width: 1200px) {
  .container .full-width {
    margin-left: calc(0.5 * (1140px + 15px - 100vw));
    margin-right: calc(0.5 * (1140px + 15px - 100vw));
  }
}
.color-gl-light-pink {
  color: #FEF5F4 !important;
}
.color-gl-light-pink h1 > a,
.color-gl-light-pink h2 > a,
.color-gl-light-pink h3 > a,
.color-gl-light-pink h4 > a,
.color-gl-light-pink h5 > a {
  color: #FEF5F4 !important;
}
.color-gl-light-red {
  color: #af2009 !important;
}
.color-gl-light-red h1 > a,
.color-gl-light-red h2 > a,
.color-gl-light-red h3 > a,
.color-gl-light-red h4 > a,
.color-gl-light-red h5 > a {
  color: #af2009 !important;
}
.bg-gl-light-pink {
  background-color: #FEF5F4 !important;
}
.bg-gl-light-red {
  background-color: #af2009 !important;
}
.bg-gl-default {
  background-color: #f4f3f1 !important;
}
.bg-gl-light-blue {
  background-color: #5ca5c0 !important;
}
/**
General every page styling
*/
body {
  font-family: 'Tajawal';
}
#main b,
#main strong {
  font-weight: 600;
}
#main a {
  color: #770f00;
}
#main a:hover {
  color: #af2009;
}
#main a.disabled {
  color: grey;
  text-decoration: none;
  cursor: default;
}
/** section-body (which is created by Jerbil) = a BS container */
@media (min-width: 576px) {
  .section-body {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .section-body {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .section-body {
    max-width: 600px;
  }
}
@media (min-width: 1200px) {
  .section-body {
    max-width: 800px;
  }
}
.gl-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .gl-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .gl-container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .gl-container {
    max-width: 600px;
  }
}
@media (min-width: 1200px) {
  .gl-container {
    max-width: 800px;
  }
}
/*
@media (min-width: 2048px) {
	.gl-container {
		max-width: 1600px;
	}
}*/
.divider {
  padding: 1px;
}
.bg-cover {
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.large-spacer {
  padding-top: 100px;
  padding-bottom: 100px;
}
.thin-text-block {
  max-width: 555px;
}
.white-link a {
  color: white !important;
  text-decoration: underline;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .client-testimonials {
    padding: 50px 0 !important;
  }
}
/** .desktop and .mobile are added by utilities.js checkBodyClasses() */
body.desktop .d-mobile {
  display: none !important;
}
body.mobile .d-desktop {
  display: none !important;
}
@media (max-height: 450px) and (orientation: landscape) {
  body {
    overflow-y: hidden;
  }
}
svg {
  object-fit: contain;
}
@media (max-height: 450px) and (orientation: landscape) {
  .drift-conductor-item {
    display: none !important;
  }
}
.no-mobile-landscape-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 9999;
}
@media (max-height: 450px) and (orientation: landscape) {
  .no-mobile-landscape-banner {
    display: block;
  }
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Black.woff2') format('woff2'), url('/fonts/Montserrat-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-BoldItalic.woff2') format('woff2'), url('/fonts/Montserrat-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-LightItalic.woff2') format('woff2'), url('/fonts/Montserrat-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'), url('/fonts/Montserrat-ExtraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-BlackItalic.woff2') format('woff2'), url('/fonts/Montserrat-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-ThinItalic.woff2') format('woff2'), url('/fonts/Montserrat-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-ExtraLight.woff2') format('woff2'), url('/fonts/Montserrat-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Thin.woff2') format('woff2'), url('/fonts/Montserrat-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Bold.woff2') format('woff2'), url('/fonts/Montserrat-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-SemiBold.woff2') format('woff2'), url('/fonts/Montserrat-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.woff2') format('woff2'), url('/fonts/Montserrat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Italic.woff2') format('woff2'), url('/fonts/Montserrat-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'), url('/fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Light.woff2') format('woff2'), url('/fonts/Montserrat-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Medium.woff2') format('woff2'), url('/fonts/Montserrat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-MediumItalic.woff2') format('woff2'), url('/fonts/Montserrat-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'), url('/fonts/Montserrat-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-ExtraBold.woff2') format('woff2'), url('/fonts/Montserrat-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Regular.woff2') format('woff2'), url('/fonts/OpenSans-Regular.woff') format('woff');
}
.border-box-grey {
  border: 1px solid grey;
}
.border-top-none {
  border-top: none;
}
.border-bottom-dashed {
  border-bottom-style: dashed;
}
.border-bottom-none {
  border-bottom: none;
}
.brand-carousel-img {
  max-height: 250px;
  max-width: 100%;
}
.brand-carousel-inner {
  height: 300px;
}
@media (max-width: 768px) {
  .brand-carousel-inner {
    height: 500px;
  }
}
.carousel-btn {
  cursor: pointer;
}
.carousel-indicators > li {
  width: 30px;
  height: 30px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 50%;
}
.carousel li {
  background-color: #928b81;
}
.carousel li.active {
  background-color: #af2009;
}
#charity-carousel {
  height: 400px;
}
@media (max-width: 768px) {
  #charity-carousel {
    height: 700px;
  }
}
#client-testimonials-carousel {
  height: 400px;
}
@media (max-width: 768px) {
  #client-testimonials-carousel {
    height: 600px;
  }
}
#teamphotos-carousel {
  height: 500px;
}
@media (max-width: 992px) {
  #teamphotos-carousel {
    height: 800px;
  }
}
@media (max-width: 760px) {
  #teamphotos-carousel {
    height: 470px;
  }
}
.navbar {
  background: white;
  color: black;
  box-shadow: 0 0 4px #000;
  transition: 0.3s;
}
.navbar .flex-column > * {
  margin: 0;
}
@media (max-width: 1500px) {
  .navbar {
    font-size: 0.85rem;
  }
}
@media (max-width: 1400px) {
  .navbar {
    font-size: 0.7rem;
  }
}
@media (max-width: 1142px) {
  .navbar {
    font-size: 0.6rem;
  }
}
@media (max-width: 1034px) {
  .navbar {
    font-size: 0.5rem;
  }
}
@media (max-width: 992px) {
  .navbar {
    font-size: 1rem;
  }
}
nav {
  text-align: center;
  font-family: 'Montserrat';
}
nav a {
  color: black;
}
nav a:hover {
  color: black;
}
nav a:focus {
  color: black;
  background-color: transparent;
}
nav .nav-item:focus,
nav .dropdown:focus {
  background-color: transparent;
}
nav .dropdown-item:active {
  background-color: #5ca5c0;
}
@media (max-width: 992px) {
  nav {
    text-align: left;
  }
}
nav .btn {
  padding: 5px 50px;
}
.navbar-toggler #nav-toggle-icon-hamburger {
  opacity: 0;
  transition: 0.3s;
}
.navbar-toggler #nav-toggle-icon-cross {
  opacity: 1;
  transition: 0.3s;
}
.navbar-toggler .navbar-toggler-icon {
  content: unset;
}
.navbar-toggler.collapsed #nav-toggle-icon-hamburger {
  opacity: 1;
  transition: 0.3s;
}
.navbar-toggler.collapsed #nav-toggle-icon-cross {
  opacity: 0;
  transition: 0.3s;
}
#navItemsDiv {
  flex-basis: 60%;
  flex-grow: 0.35;
}
@media (max-width: 992px) {
  #navItemsDiv {
    flex-basis: 100%;
  }
}
.navbar-brand {
  padding: 10px 2px;
}
.navbar-brand .logo {
  width: 10em;
  height: 4em;
}
.dropdown.show {
  background: white;
}
.dropdown.show a {
  color: black !important;
}
.dropdown-menu {
  background: white;
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 0;
}
@media (max-width: 992px) {
  nav .btn {
    background: none !important;
    color: black !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    text-align: left;
  }
  nav .btn:hover,
  nav .btn:active,
  nav .btn:focus {
    background: none !important;
    color: black !important;
  }
}
.white-logo {
  display: none;
}
body.page-index .navbar {
  background: rgba(255, 255, 255, 0);
  box-shadow: none;
  transition: 0.3s;
}
body.page-index .navbar a {
  color: white;
}
body.page-index .navbar.force-white {
  background: white;
  box-shadow: 0 0 4px #000;
  transition: 0.3s;
}
body.page-index .navbar.force-white a {
  color: black;
}
body.page-index .navbar.force-white .white-logo {
  display: none !important;
}
body.page-index .navbar.force-white .normal-logo {
  display: inline !important;
}
body.page-index .normal-logo {
  display: none;
}
body.page-index .white-logo {
  display: inline;
}
body.page-index.scrolled .navbar {
  background: white;
  box-shadow: 0 0 4px #000;
  transition: 0.3s;
}
body.page-index.scrolled .navbar a {
  color: black;
}
body.page-index.scrolled .navbar .white-logo {
  display: none !important;
}
body.page-index.scrolled .navbar .normal-logo {
  display: inline !important;
}
.selected {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-what-we-do #nav-what-we-do {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-products #nav-products {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-case-study-index #nav-case-study {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-our-story #nav-about,
body.page-our-story #nav-our-story {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-donations-report #nav-about,
body.page-donations-report #nav-donations-report {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-press-and-awards #nav-about,
body.page-press-and-awards #nav-press-and-awards {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-good-news-index #nav-good-news {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-good-news-index #nav-news {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-podcast-index #nav-podcast {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-podcast-index #nav-news {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-brands #nav-who-we-work-with,
body.page-brands #nav-brands-and-agencies {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-the-public #nav-who-we-work-with,
body.page-the-public #nav-the-public {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-publishers #nav-who-we-work-with,
body.page-publishers #nav-publishers {
  background-color: #E4E4E4;
  transition: 0.3s;
}
body.page-charities #nav-who-we-work-with,
body.page-charities #nav-charities {
  background-color: #E4E4E4;
  transition: 0.3s;
}
@media (max-width: 768px) {
  body.page-contact #nav-contact {
    background-color: #E4E4E4;
    transition: 0.3s;
  }
}
.hiring-now {
  position: absolute;
  z-index: 999;
}
.hiring-now #hiring-btn {
  position: fixed;
  top: 5rem;
  right: 1rem;
  padding: 5px 20px;
  text-transform: uppercase;
}
.tile-img {
  position: relative;
}
.tile-img img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tile {
  border: 1px solid #c2c2c2;
}
.tile.tile-fill .tile-img img {
  width: auto;
  height: 100%;
}
.tile-img:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.tile:not(:hover) {
  color: black !important;
  transition: color 0.2s;
}
.tile:hover {
  text-decoration: none !important;
  transition: color 0.2s;
}
.tile-text {
  border-top: 1px solid #C2C2C2;
}
.tile-text > * {
  margin: 0;
}
.tile-box {
  border: 1px solid grey;
  border-radius: 5px;
  background: white;
  padding: 20px;
  position: absolute;
  /*
	top: 20%;
	left: 50%;
	right: -100%;
	*/
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  transform: scaleY(0);
  opacity: 0;
  cursor: default;
}
.tile-box hr {
  margin: 3px;
}
.tile-expand.revealed .tile-box {
  display: inline-block;
  transform: scaleY(1);
  opacity: 1;
  transition: 0.2s;
}
/* styles for '...' */
.tile-text:not(.no-cutoff) {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative;
  /* use this value to count block height */
  line-height: 1.2rem;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 4.8rem;
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;
  /* place for '...' */
  padding: 1.2rem;
}
/* create the ... */
.tile-text:not(.no-cutoff):before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 1rem;
  bottom: 0;
}
/* CSS for arrow link and animated underlines */
.arrow-link {
  font-weight: bold;
  text-decoration: none;
  color: black;
}
.arrow-link:hover {
  text-decoration: none;
  color: inherit;
}
.arrow-link-inverted {
  color: white !important;
}
.arrow-link-text {
  display: inline-flex;
  flex-direction: column;
  justify-content: start;
}
.arrow-link-text > p {
  margin: 0;
}
.arrow-link-underline {
  padding: 1px;
  background-color: #770f00;
  transform: scaleX(0);
  transition: 0.1s ease-out;
}
.arrow-link-inverted .arrow-link-underline {
  background-color: white;
}
.arrow-link:hover .arrow-link-underline,
.arrow-link:active .arrow-link-underline {
  transform: scaleX(1);
  transition: 0.1s ease-out;
}
.innerpage-controls {
  width: 25%;
}
@media (max-width: 768px) {
  .innerpage-controls {
    width: 100%;
  }
}
.placeholder {
  width: 300px;
  height: 0;
  padding-bottom: 300px;
  background-color: #dddddd;
  display: inline-block;
  box-shadow: 3px 3px 4px #aaaaaa;
}
.placeholder-fw {
  width: 300px;
  height: 0;
  padding-bottom: 300px;
  background-color: #dddddd;
  display: inline-block;
  box-shadow: 3px 3px 4px #aaaaaa;
  width: 100%;
  padding-bottom: 100%;
}
.placeholder-hw {
  width: 300px;
  height: 0;
  padding-bottom: 300px;
  background-color: #dddddd;
  display: inline-block;
  box-shadow: 3px 3px 4px #aaaaaa;
  width: 50%;
  padding-bottom: 50%;
}
@media (max-width: 768px) {
  .placeholder-hw {
    width: 100%;
    padding-bottom: 100%;
  }
}
.placeholder-fw-nosquare {
  width: 300px;
  height: 0;
  padding-bottom: 300px;
  background-color: #dddddd;
  display: inline-block;
  box-shadow: 3px 3px 4px #aaaaaa;
  width: 100%;
  padding-bottom: 100%;
  padding: 20px;
  height: auto;
}
.placeholder-circle {
  width: 300px;
  height: 0;
  padding-bottom: 300px;
  background-color: #dddddd;
  display: inline-block;
  box-shadow: 3px 3px 4px #aaaaaa;
  border-radius: 50%;
}
.placeholder-circle-hw {
  width: 300px;
  height: 0;
  padding-bottom: 300px;
  background-color: #dddddd;
  display: inline-block;
  box-shadow: 3px 3px 4px #aaaaaa;
  border-radius: 50%;
  padding-bottom: 50%;
  width: 50%;
}
@media (max-width: 768px) {
  .placeholder-circle-hw {
    width: 100%;
    padding-bottom: 100%;
  }
}
.placeholder-circle-fw {
  width: 300px;
  height: 0;
  padding-bottom: 300px;
  background-color: #dddddd;
  display: inline-block;
  box-shadow: 3px 3px 4px #aaaaaa;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
}
.impact-hub-splash-text {
  width: 60%;
  position: absolute;
  top: 5%;
  left: 10%;
  z-index: 3;
  text-align: left;
}
@media (max-width: 992px) {
  .impact-hub-splash-text {
    position: static;
    width: 100%;
  }
}
@media (max-width: 1200px) {
  .impact-hub-splash-text h3 {
    margin: 1rem 0 !important;
  }
}
.impact-hub-splash-text h1 a,
.impact-hub-splash-text h2 a,
.impact-hub-splash-text h3 a,
.impact-hub-splash-text h4 a,
.impact-hub-splash-text h5 a {
  color: #af2009 !important;
}
.impact-report-bg {
  background: #E6E6E6;
}
@media (max-width: 992px) {
  .impact-report-bg {
    display: flex;
    flex-direction: column-reverse;
  }
}
.impact-report-img {
  width: 40%;
}
@media (max-width: 992px) {
  .impact-report-img {
    width: 100%;
  }
}
footer {
  font-family: "Tajawal", sans-serif;
  background-color: #343a40;
  color: #f8f9fa;
}
footer a {
  color: white;
}
footer a:hover {
  color: white !important;
}
footer h5 {
  text-transform: uppercase;
  font-family: 'Montserrat';
  font-weight: bold;
}
footer .btn {
  font-family: 'Montserrat';
}
footer hr {
  color: white;
  background-color: white;
  margin: 50px 0px;
}
footer .flex-column > * {
  margin: 0;
}
@media (min-width: 768px) {
  footer .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
}
footer .footer-logos-portrait {
  max-width: 4em;
}
footer .footer-logos-landscape {
  max-width: 6em;
}
/** avoid the navbar */
#main {
  margin-top: 25rem;
}
@media (max-width: 768px) {
  #main {
    margin-top: 15rem;
  }
}
.notop {
  margin-top: -21.8rem;
}
@media (max-width: 768px) {
  .notop {
    margin-top: -11.8rem;
  }
}
.page-banner {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
@media (max-width: 768px) {
  .page-banner {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
.page-title {
  font-size: 1.5rem;
  font-family: "Montserrat";
  text-transform: uppercase;
  text-align: center;
  padding: 20px 50px;
  background: white;
  display: inline;
  position: absolute;
  bottom: 100%;
  left: 100px;
  z-index: 100;
}
@media (max-width: 768px) {
  .page-title {
    font-size: 1rem;
    left: 10px;
  }
}
.page-title.title-red {
  color: white;
  background-color: #af2009;
}
.products-table p {
  margin: 0;
}
.products-table th {
  padding: 15px 20px;
  font-weight: normal;
  text-transform: uppercase;
  color: #af2009;
}
.products-table td {
  padding: 10px 20px;
}
.products-table .pdtb-lead-col {
  width: 50%;
  text-align: left;
}
.products-table .head-bar {
  border: 1px solid #e2e1df;
}
.products-table .pdtblabel {
  max-width: 50%;
}
@media (max-width: 768px) {
  .products-table .pdtblabel {
    max-width: 100%;
  }
}
.products-table .pdtblcontent {
  margin: auto;
}
.products-table .pdtblimg {
  max-width: 75%;
  margin: auto;
}
@media (max-width: 768px) {
  .products-table .pdtblimg {
    max-width: 100%;
  }
}
@media (max-width: 1142px) {
  .products-table {
    font-size: 0.9rem;
  }
}
.cursor-pointer {
  cursor: pointer;
}
.btn {
  border-radius: 100px;
  vertical-align: middle;
  padding: 15px 40px;
  border: none !important;
  box-shadow: none !important;
  /* NB this breaks -outline buttons */
  font-weight: bold;
  font-family: 'Montserrat';
  font-size: 0.9rem;
}
.btn p {
  margin: 0 !important;
}
.btn.disabled {
  cursor: default;
}
.btn-primary {
  background-color: #af2009 !important;
  color: white !important;
}
.btn-primary:hover:not(.disabled) {
  background-color: #e82316 !important;
  box-shadow: none !important;
  border: none !important;
}
.btn-primary:active:not(.disabled),
.btn-primary:focus:not(.disabled) {
  background-color: #770f00 !important;
  box-shadow: none !important;
  border: none !important;
}
.btn-secondary {
  background-color: white;
  color: black !important;
  mix-blend-mode: screen;
}
.btn-secondary:hover:not(.disabled) {
  box-shadow: none !important;
  background-color: #E4E4E4;
  border: none !important;
  mix-blend-mode: normal;
  color: black !important;
}
.btn-secondary:active:not(.disabled),
.btn-secondary:focus:not(.disabled) {
  background-color: #770f00 !important;
  box-shadow: none !important;
  border: none !important;
}
.btn-transparent {
  background-color: transparent;
  color: #af2009 !important;
  padding: 13px 38px;
  border: solid 2px #af2009 !important;
}
@media (max-width: 768px) {
  .btn-transparent {
    padding: 8px 38px;
  }
}
@media (max-width: 768px) and (max-height: 568px) {
  .btn-transparent {
    padding: 8px 18px;
  }
}
.btn-transparent.btn-white {
  color: white !important;
  border-color: white !important;
}
.btn-transparent.fill {
  background: white !important;
}
.btn-transparent:hover:not(.disabled) {
  color: #e82316 !important;
  box-shadow: none !important;
  border: solid 2px #e82316 !important;
}
.btn-transparent:active:not(.disabled),
.btn-transparent:focus:not(.disabled) {
  color: #770f00 !important;
  box-shadow: none !important;
  border: solid 2px #770f00 !important;
}
.btn-2ndcta {
  background-color: #2F7090 !important;
  color: #af2009 !important;
  padding: 13px 38px;
  border: solid 2px #af2009 !important;
}
@media (max-width: 768px) {
  .btn-2ndcta {
    padding: 8px 38px;
  }
}
@media (max-width: 768px) and (max-height: 568px) {
  .btn-2ndcta {
    padding: 8px 18px;
  }
}
.btn-2ndcta.btn-white {
  color: white !important;
  border-color: white !important;
}
.btn-2ndcta.btn-white {
  color: white !important;
  border-color: white !important;
}
.btn-2ndcta.fill {
  background: white !important;
}
.btn-2ndcta:hover:not(.disabled) {
  color: #e82316 !important;
  box-shadow: none !important;
  border: solid 2px #e82316 !important;
}
.btn-2ndcta:active:not(.disabled),
.btn-2ndcta:focus:not(.disabled) {
  color: #770f00 !important;
  box-shadow: none !important;
  border: solid 2px #770f00 !important;
}
.bcorp-img {
  width: 100%;
}
@media (max-width: 768px) {
  .bcorp-img {
    width: 75%;
  }
}
.bcorp-img img {
  background-color: #5ca5c0;
}
.b-corp {
  margin: auto;
}
.b-corp h1 {
  margin: 0 !important;
}
@media (max-width: 767px) {
  #main .pageslice .h1-section,
  #main .pageslice .h2-section {
    padding: 0;
  }
  #main .pageslice.no-img-text-space .mt-5 {
    margin-top: 0 !important;
  }
  #main .pageslice h1,
  #main .pageslice h2 {
    margin-top: 0;
  }
  #main .pageslice:not(.same-order-mobile) .pageslice-right-row {
    flex-direction: column-reverse;
  }
}
#main h1,
#main h2,
#main h3,
#main h4,
#main h5 {
  font-family: 'Montserrat';
  text-transform: uppercase;
}
#main h1 a,
#main h2 a,
#main h3 a,
#main h4 a,
#main h5 a {
  color: black;
}
#main h1 a:hover,
#main h2 a:hover,
#main h3 a:hover,
#main h4 a:hover,
#main h5 a:hover {
  color: black;
  cursor: default;
}
#main h1 > a,
#main h2 > a,
#main h3 > a,
#main h4 > a,
#main h5 > a:hover {
  text-decoration: none !important;
}
#main h1,
#main h2,
#main h3 {
  margin-top: 50px;
  margin-bottom: 50px;
}
.h2-section {
  padding: 50px;
}
h1,
h2,
h3 {
  font-weight: normal;
}
.red h1 a,
.red h2 a,
.red h3 a,
.red h4 a,
.red h5 a {
  color: #af2009 !important;
}
.section-body {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.h1-section .h2-section {
  padding: 0;
}
.h1-section .h2-section .section-body {
  padding: 0;
}
.container .h1-section {
  padding-left: 0;
  padding-right: 0;
}
.container .h1-section .section-body {
  padding: 0;
}
.container .h2-section {
  padding-left: 0;
  padding-right: 0;
}
.container .h2-section .section-body {
  padding: 0;
}
@media (max-width: 768px) {
  .col .h1-section,
  .col-md .h1-section,
  .col .h2-section,
  .col-md .h2-section {
    padding: 0;
  }
  .h2-section {
    padding: 50px 0;
  }
}
#for-agencies-and-brands,
#for-the-public,
#for-agencies-and-brands-1,
#for-the-public-1,
#good-loop-delivers,
#we-areb-corp-certified,
#where-does-my-campaign-run,
#quality-and-brand-safe-environments,
#charity-matchmaking-service,
#charity-management,
#managed-service-buying,
#proprietary-technology,
#leverage-social-data,
#ad-formats-in-more-detail,
#go-green-with-good-loop,
#discover-the-my-good-loop-platform,
#super-brand-safe-buying,
#targeting,
#partner-with-us,
#how-to-get-involved,
#how-it-started,
#today-we-are-a-fast-growing-team-of-passionate-kind-and-driven-people,
#good-loop-exists-to-make-advertising-a-positive-force-in-the-world,
#our-offices,
#work-with-us,
#current-vacancies,
#upcoming-vacancies,
#benefits-and-perks,
#our-values,
#ethical-alternatives-to-facebook {
  color: #af2009 !important;
}
#green-media-title,
#make-your-next-ad-campaign-carbon-positive-and-keep-our-planet-green {
  color: #285E41 !important;
}
#measure-your-co2--emissions-with-our-carbon-calculator,
#offset-using-our-green-ad-tag,
#be-carbon-positive-with-good-loop,
#download-our-whitepaper-on-decarbonising-media {
  color: #75B752 !important;
}
.lds-ring {
  display: inline-block;
  position: absolute;
  z-index: 1000;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #af2009;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #af2009 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  #mce-EMAIL {
    border-radius: 100px;
  }
  #mc-embedded-subscribe {
    width: 100%;
  }
}
.ad-sizer {
  position: relative;
  overflow: hidden;
  /* prevent margin collapse with aspectifier */
}
.ad-sizer .goodloopad,
.ad-sizer iframe {
  position: absolute;
  top: 0;
  left: 0;
}
.ad-sizer .vpaid-container {
  width: 100%;
  height: 100%;
}
.ad-sizer.landscape .aspectifier {
  margin-top: 56.25%;
}
.ad-sizer.portrait .aspectifier {
  margin-top: 177.77%;
}
.ad-sizer.square .aspectifier {
  margin-top: 100%;
}
.h-2em {
  height: 2em;
}
.h-3em {
  height: 3em;
}
.h-4em {
  height: 4em;
}
.h-5em {
  height: 5em;
}
.h-6em {
  height: 6em;
}
.h-7em {
  height: 7em;
}
.h-8em {
  height: 8em;
}
.h-9em {
  height: 9em;
}
.h-5 {
  height: 5% !important;
}
.h-10 {
  height: 10% !important;
}
.h-40 {
  height: 40% !important;
}
.fancy-blockquote {
  padding: 1.5em;
  font-style: italic;
  font-size: 1.25em;
  background-image: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"/><path fill="%236D6D6D" d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/></g></svg>');
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 0;
}
blockquote {
  border-left: none;
}
/** a small card */
.mini-card {
  border: 1px solid #515151;
  padding: 1rem;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
.mini-card h5 {
  color: #515151;
}
.mini-card h5 a {
  color: #515151;
  text-decoration: underline;
}
@keyframes fade-down {
  from {
    top: -100px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
#splash {
  position: relative;
  background: url('/img/build/pages/home-page/HomePage_LandingPageBackground.2000w.jpg');
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: 100vh;
  margin-top: -25rem;
}
@media (max-width: 768px) {
  #splash {
    background: url('/img/build/pages/home-page/HomePage_LandingPageBackground.800w.jpg');
  }
}
#splash h1 {
  font-size: 5rem;
  font-weight: 900;
}
@media (max-width: 1440px) {
  #splash h1 {
    font-size: 3rem;
    line-height: 7rem;
    margin: 0 !important;
  }
}
@media (max-width: 767px) {
  #splash h1 {
    font-size: 2rem;
    line-height: 5rem;
    margin: 0 !important;
  }
}
#splash .h2-section {
  padding: 0 !important;
}
@media (max-width: 767px) {
  #splash .h2-section {
    margin-top: 0 !important;
  }
}
@media (max-width: 767px) {
  #splash .h1-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
#splash h2 {
  font-weight: 500;
}
@media (max-width: 1440px) {
  #splash h2 {
    font-size: 1.3rem;
    line-height: 2rem;
    margin: 0 !important;
  }
}
@media (max-width: 992px) {
  #splash h2 {
    font-size: 1rem;
    line-height: 1.3rem;
    margin: 0 !important;
  }
}
#splash h1 a,
#splash h2 a {
  color: white !important;
}
#splash .text-white a {
  color: white;
  text-decoration: underline;
}
#splash .contact-cta {
  width: 25%;
}
@media (max-width: 1300px) {
  #splash .contact-cta {
    width: unset;
  }
}
#splash .subtitle {
  width: 75%;
}
#splash .splash-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  #splash {
    margin-top: -15rem;
  }
  #splash .subtitle {
    width: 100%;
  }
}
@media (min-width: 992px) {
  #splash #splash-img {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    left: -10%;
    width: 80%;
    z-index: 0;
  }
}
@media (max-width: 992px) {
  #splash #splash-img {
    position: static;
    width: 100%;
    transform: translateX(-5%);
  }
}
@media (max-width: 767px) {
  #splash #splash-img {
    width: 120%;
    transform: translate(-15%, 70%);
    margin-bottom: 10rem;
  }
}
@media (max-width: 1440px) {
  #splash .splash-text {
    padding: 50px;
  }
}
@media (max-width: 768px) {
  #splash .splash-text {
    padding: 10px;
  }
}
@media (min-width: 992px) {
  #splash .splash-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    z-index: 1;
    width: 50%;
  }
}
@media (min-width: 992px) and (max-height: 600px) {
  #splash .splash-text {
    transform: translateY(-45%);
  }
}
@media (max-width: 1280px) {
  #splash .splash-text {
    font-size: 0.8rem;
  }
}
#splash .scroll-down {
  margin-top: 100px;
  width: 15%;
  position: relative;
  top: -100px;
  opacity: 0;
  animation-name: fade-down;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
#splash .scroll-down:hover {
  cursor: pointer;
}
@media (max-width: 767px) {
  #splash .scroll-down {
    margin-top: 120px;
    transform: translateY(-400%);
  }
}
@media (min-width: 992px) and (max-height: 600px) {
  #splash .scroll-down {
    margin-top: 30px;
  }
}
.together-we-raised-xy-for-charities-so-far {
  background-color: white;
  text-align: center;
}
.journey {
  text-align: center;
  background-color: white;
  padding-bottom: 0 !important;
}
.journey .h2-section {
  padding-bottom: 0;
}
.journey h2 {
  margin-bottom: 0 !important;
}
.client-testimonials-container {
  text-align: center;
  background-color: white;
  padding-bottom: 50px;
}
.client-testimonials-container .section-body {
  padding: 0;
}
.client-testimonials-container .h2-section {
  padding-bottom: 0;
}
/*
#splash-img {
    .keyframes(shake; {
        2%, 18% {
            transform: rotate(-0.25deg);
        }
        
        4%, 16% {
            transform: rotate(0.5deg);
        }
    
        6%, 10%, 14% {
            transform: rotate(-1deg);
        }
    
        8%, 12% {
            transform: rotate(1deg);
        }

        20% {
            transform: rotate(0);
        }
    });

    .animation(shake 5s linear infinite alternate);
}*/
.some-of-our-brand-partners {
  text-align: center;
  width: 100%;
}
.donation-button {
  bottom: 75px;
}
@media (max-width: 992px) {
  .donation-button {
    bottom: 20px;
  }
}
#graphic-tablet-and-phone {
  z-index: 100;
}
#graphic-social-icons-1,
#graphic-social-icons-2,
#graphic-social-icons-3 {
  position: absolute;
  z-index: 99;
}
#homepage-journey,
#homepage-journey-1,
#homepage-journey-2,
#homepage-journey-3 {
  width: 75% !important;
}
#homepage-journey-2 {
  position: relative;
  top: -1em;
}
.b2c-offering h5.MyGL {
  color: #515151;
  text-transform: uppercase;
}
.b2c-offering h5.MyGL a {
  color: #515151;
  text-decoration: underline;
}
.charity-testimonials {
  text-align: center;
}
.page-banner-charities {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/banners/Banner_Charities.jpg');
}
@media (max-width: 768px) {
  .page-banner-charities {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-charities {
    background-image: url('/img/build/banners/Banner_Charities.800w.jpg');
  }
}
.why-good-loop {
  text-align: center;
}
.why-good-loop .section-body {
  padding: 0;
  max-width: 75%;
}
.why-good-loop a {
  color: #af2009 !important;
}
.why-good-loop *:not(h5) > a {
  text-decoration: underline !important;
}
@media (min-width: 768px) {
  .why-good-loop [class*=col-] {
    padding-bottom: 50px;
  }
}
.purpose-with-proven-performance {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.purpose-with-proven-performance > .section-body {
  flex: 1 1 0;
  text-align: left;
}
.quality-and-brand-safe-environments {
  background-color: white;
  text-align: center;
}
@media (max-width: 768px) {
  .quality-and-brand-safe-environments {
    padding: 50px 10px !important;
  }
  .quality-and-brand-safe-environments h2 {
    text-align: left;
  }
}
.page-banner-brands {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/banners/Banner_BrandsAndAgencies.jpg');
}
@media (max-width: 768px) {
  .page-banner-brands {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-brands {
    background-image: url('/img/build/banners/Banner_BrandsAndAgencies.scaled.800w.jpg');
  }
}
.where-does-my-campaign-run {
  text-align: center;
  background-color: white;
  padding-top: 100px;
}
.top-div-wwd {
  text-align: center;
  background-color: white;
  padding: 50px;
}
.benefits .section-body {
  padding: 0;
  max-width: 75%;
}
.benefits h2 {
  text-align: center;
  margin-bottom: 100px !important;
}
.benefits h5 a {
  color: #af2009 !important;
}
.benefits img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .benefits [class*=col-] {
    padding-bottom: 50px;
  }
}
.page-banner-wwd {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/banners/Banner_WhatWeDo.jpg');
}
@media (max-width: 768px) {
  .page-banner-wwd {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-wwd {
    background-image: url('/img/build/banners/Banner_WhatWeDo.800w.jpg');
  }
}
.managed-service-buying {
  text-align: center;
  padding: 50px 0px;
}
.ad-formats-in-more-detail {
  text-align: center;
  padding-top: 100px;
  background-color: white;
}
@media (max-width: 768px) {
  .ad-formats-in-more-detail {
    padding: 20px;
  }
}
.page-banner-products {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/banners/Banner_Products_05_21.jpg');
}
@media (max-width: 768px) {
  .page-banner-products {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-products {
    background-image: url('/img/build/banners/Banner_Products_05_21.jpg');
  }
}
.pink-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pink-box h1 {
  font-size: 2.5rem;
}
@media (max-width: 768px) {
  .pink-box h1 {
    font-size: 1.5rem;
  }
}
.what-s-next {
  text-align: center;
}
.ad-formats-products-link {
  width: 65%;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .ad-formats-products-link {
    width: 100%;
    justify-content: center !important;
  }
}
.products-greenmedia {
  background-image: url("/img/build/pages/products/GreenMedia_Background.1600w.jpg");
  background-size: cover;
}
#our-ad-formats h1 {
  color: #af2009;
}
#our-ad-formats .card-subtitle {
  font-size: 1.5rem;
  text-transform: uppercase;
  color: #af2009;
}
.let-s-be-honest {
  text-align: center;
  background-color: white;
  padding-top: 100px;
}
.to-the-best-of-our-abilities-we-promise-to-always-be h2 {
  text-align: center;
}
.to-the-best-of-our-abilities-we-promise-to-always-be h2 a,
.to-the-best-of-our-abilities-we-promise-to-always-be h4 a {
  color: #af2009 !important;
}
.to-the-best-of-our-abilities-we-promise-to-always-be .section-body {
  padding: 0;
  max-width: 75%;
}
.how-it-started {
  text-align: left;
}
.how-it-started h2 {
  text-align: center;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .how-it-started {
    text-align: center;
  }
}
#reasons {
  background-color: #FEF5F4;
  text-align: center;
}
#reasons h3 {
  margin: 0 !important;
}
.page-banner-our-story {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/banners/Banner_Our_story.jpg');
}
@media (max-width: 768px) {
  .page-banner-our-story {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-our-story {
    background-image: url('/img/build/banners/Banner_Our_story.scaled.800w.jpg');
  }
}
.our-story-tile-img {
  position: relative;
  overflow: hidden;
}
.our-story-tile-img img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.our-story-tile-img:after {
  content: "";
  display: block;
  padding-bottom: 120px;
}
.our-story-img {
  position: relative;
  width: 40%;
  margin: auto;
}
.our-story-img img {
  position: absolute;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.our-story-img::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.third {
  max-width: 33%;
  padding: 0px 30px;
}
@media (max-width: 768px) {
  .third {
    padding: 0px;
    max-width: 100%;
  }
}
.stub-divider {
  padding: 2px;
  width: 25%;
  margin: 20px 0;
  background: #af2009;
}
.good-news-filters {
  width: 100%;
}
@media (min-width: 768px) {
  .good-news-filters {
    width: 25%;
  }
}
.page-banner-good-news {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background: url('/img/build/banners/Banner_GoodNews_Newspaper.jpg');
}
@media (max-width: 768px) {
  .page-banner-good-news {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-good-news {
    background-image: url('/img/build/banners/Banner_GoodNews_Newspaper.scaled.800w.jpg');
  }
}
.rainbow-text {
  display: inline-block;
  background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.good-news-back {
  position: fixed;
  bottom: 20px;
  right: 20px;
  box-shadow: 0 0 3px black !important;
  font-size: 3rem;
  padding: 10px 20px;
}
@media (max-width: 768px) {
  .good-news-back {
    display: none;
  }
}
body.page-good-news-index .good-news-back {
  display: none;
}
.company-news-filters {
  width: 100%;
}
@media (min-width: 768px) {
  .company-news-filters {
    width: 25%;
  }
}
.page-banner-company-news {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background: url('/img/build/pages/company-news/general/typewriter_bg_w1920.jpg');
  background-position: bottom !important;
}
@media (max-width: 768px) {
  .page-banner-company-news {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-company-news {
    background-image: url('/img/build/pages/company-news/general/typewriter_bg_w800.jpg');
  }
}
.rainbow-text {
  display: inline-block;
  background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.company-news-back {
  position: fixed;
  bottom: 20px;
  right: 20px;
  box-shadow: 0 0 3px black !important;
  font-size: 3rem;
  padding: 10px 20px;
}
@media (max-width: 768px) {
  .company-news-back {
    display: none;
  }
}
body.page-company-news-index .company-news-back {
  display: none;
}
.h2-section {
  padding: 2em !important;
}
.our-promise-to-you {
  text-align: center;
}
.our-promise-to-you h3 a {
  color: #af2009 !important;
}
.join-us {
  background-color: #af2009;
  color: white;
  text-align: center;
}
.join-us h2 > a {
  color: white !important;
}
.page-banner-public {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/banners/Banner_The_Public.jpg');
}
@media (max-width: 768px) {
  .page-banner-public {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-public {
    background-image: url('/img/build/banners/Banner_The_Public.scaled.800w.jpg');
  }
}
.targeting {
  text-align: left;
}
.abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.page-banner-publishers {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background: url('/img/build/banners/Banner_Publishers.jpg');
}
@media (max-width: 768px) {
  .page-banner-publishers {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-publishers {
    background-image: url('/img/build/banners/Banner_Publishers.scaled.800w.jpg');
  }
}
.super-brand-safe-buying h2 {
  margin-bottom: 50px;
}
.small-tilt-right {
  transform: rotate(20deg);
}
.blue-bar {
  margin-top: -1px;
}
.blue-bar p {
  margin: 0;
}
.how-does-it-work h1,
.how-does-it-work h2,
.how-does-it-work h3 {
  margin-top: 0 !important;
}
.our-offices {
  text-align: center;
  padding-top: 100px;
}
.our-global-presence {
  text-align: center;
}
.contact {
  background-color: #af2009;
  color: white;
  padding: 50px;
  text-align: center;
}
.contact textarea#message {
  height: 150px;
}
.contact .form-control:focus {
  border-color: #af2009;
  box-shadow: 0 0 0 0.2rem rgba(175, 32, 9, 0.2);
}
.contact .col-md {
  padding-left: 0;
  padding-right: 0;
  height: 700px;
}
.contact .h2-section {
  padding: 0;
}
@media (max-width: 767px) {
  .contact {
    padding: 50px 5px;
  }
  .contact .col-md {
    height: auto;
  }
  .contact .col-md.meeting-box {
    height: 400px;
  }
}
.contact-alert-box {
  padding: 100px;
  box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid grey;
  background-color: white;
  color: black;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  visibility: hidden;
  opacity: 0;
  z-index: 999;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.contact-alert-box.revealed {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.page-banner-donations-report {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background: url('/img/build/graphics/Graphic_ImpactReport_long.jpg');
}
@media (max-width: 768px) {
  .page-banner-donations-report {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
.report-body h1 a,
.report-body h2 a,
.report-body h3 a,
.report-body h4 a,
.report-body h5 a {
  color: #af2009 !important;
}
.report-body .h2-section {
  padding: 0px;
}
.report-body .report-ads {
  padding: 10em;
}
@media (max-width: 768px) {
  .report-body .report-ads {
    padding: 6em;
  }
}
.report-body .report-ads img {
  transform: translate(-50%, -50%);
  max-width: 80%;
}
.report-body .report-ads :nth-child(1) {
  width: 583px;
}
.report-body .report-ads :nth-child(2) {
  width: 500px;
}
.bqstart {
  font-size: 700%;
}
.page-banner-press-and-awards {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background: url('/img/build/banners/Banner_PressAndAwards.jpg');
}
@media (max-width: 768px) {
  .page-banner-press-and-awards {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-press-and-awards {
    background-image: url('/img/build/banners/Banner_PressAndAwards.scaled.800w.jpg');
  }
}
.page-banner-careers {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background: url('/img/build/banners/Banner_Careers_GoodLoop.1280w.jpg');
}
@media (max-width: 768px) {
  .page-banner-careers {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-careers {
    background-image: url('/img/build/banners/Banner_Careers_GoodLoop.800w.jpg');
  }
}
.want-to-make-a-better-world-work-with-us {
  text-align: center;
}
.want-to-make-a-better-world-work-with-us h1 {
  margin-bottom: 50px;
}
.want-to-make-a-better-world-work-with-us h2 {
  margin: 50px 0;
}
.vacancy {
  height: 220px;
  flex-basis: 220px;
  /* why is this needed?? */
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vacancy-onhold {
  height: unset;
}
.benefit {
  height: 360px;
  flex-basis: 200px;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
}
.benefit .benefit-card {
  height: 170px;
}
.benefit .benefit-card img {
  position: absolute;
  transform: translate(-50%, 0%);
}
.benefit .benefit-card .w-75 {
  transform: translate(-50%, -15%) !important;
}
.benefit .benefit-card p {
  margin-top: 105px;
  color: #770f00;
}
.benefit .benefit-card .Good-Loop_Icon_Charity {
  transform: translate(-50%, -25%) !important;
}
.benefit .benefit-card .volunteering-icon {
  transform: translate(-50%, -25%) !important;
}
.benefit .benefit-card .recognitionscheme-icon {
  transform: translate(-50%, -10%) !important;
}
.benefit .benefit-description {
  font-size: 0.75rem;
}
.office-title {
  color: #770f00;
  text-transform: uppercase;
}
.office-description {
  font-size: 0.75rem;
}
#benefits-and-perks {
  text-align: center;
}
#benefits-and-perks:hover {
  text-decoration: none;
  cursor: default;
}
.benefit-box {
  height: 100%;
  padding: 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: #f4f3f1;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
}
.row .col-md-12 {
  width: 100%;
}
@media (min-width: 768px) {
  .row .col-md-12 {
    margin-top: 1rem;
  }
  .row .col-md-12:first-child {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  [class*="col-"] {
    margin-top: 1rem;
  }
}
.dev-amp-product {
  padding-top: 0 !important;
}
.dev-amp-product h2 {
  margin-top: 1rem !important;
}
.page-banner-podcast {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background: url('/img/build/banners/Banner_Podcast.jpg');
}
@media (max-width: 768px) {
  .page-banner-podcast {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
.page-podcast-index #main h1 a {
  width: 100%;
  display: inline-block;
  text-align: center;
}
.page-banner-greenmedia {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/pages/greenmedia/Banner_GreenMedia.1600w.jpg');
}
@media (max-width: 768px) {
  .page-banner-greenmedia {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-greenmedia {
    background-image: url('/img/build/pages/greenmedia/Banner_GreenMedia.800w.jpg');
  }
}
.green-media-page .greenmedia-splash-bg {
  position: relative;
  color: white;
  background-color: #285E41;
}
.green-media-page .greenmedia-splash-bg a {
  color: white !important;
  font-weight: bold;
}
.green-media-page .greenmedia-splash-img {
  position: absolute;
  height: 90%;
  right: 0;
  top: 6em;
}
@media only screen and (max-width: 1300px) {
  .green-media-page .greenmedia-splash-img {
    height: 80%;
    top: 10em;
  }
}
.green-media-page .greenmedia-splash-text {
  position: relative;
  left: -25%;
}
.green-media-page .greenmedia-splash-text h3 {
  font-size: 2rem;
}
.green-media-page .greenmedia-splash-text .splash-caption {
  text-transform: uppercase;
  font-style: italic;
}
@media (max-width: 768px) {
  .green-media-page .greenmedia-splash-img {
    height: 25%;
    top: 80%;
  }
  .green-media-page .greenmedia-splash-text {
    left: 0%;
  }
  .green-media-page .greenmedia-splash-text .splash-caption {
    width: 50%;
  }
}
.green-media-page .greenmedia-gogreen-bg {
  background-color: #F2F8EF;
}
.green-media-page h4 a {
  color: #285E41 !important;
}
.page-banner-sxsw2022 {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/banners/Banner_SXSW2022.png');
  /*@media @md-max {
        background-image: url('/img/build/banners/Banner_WhatWeDo.800w.jpg');
    }*/
}
@media (max-width: 768px) {
  .page-banner-sxsw2022 {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
.page-sxsw2022 #main h1 {
  text-align: center;
}
.page-sxsw2022 #main h1 a {
  color: #770f00 !important;
  font-weight: bold;
}
.page-sxsw2022 #main .red-h2 {
  text-align: center;
}
.page-sxsw2022 #main .red-h2 h2 a {
  color: #770f00;
}
.page-sxsw2022 #main .strong {
  text-transform: uppercase;
  color: #770f00;
  font-family: 'Montserrat';
}
.page-sxsw2022 #main .strong a {
  text-transform: uppercase;
  color: #770f00;
  font-family: 'Montserrat';
}
.page-sxsw2022 #main .profile-img {
  width: 100%;
}
@media (max-width: 767px) {
  .page-sxsw2022 #main .profile-img {
    width: 50%;
  }
}
/* BEGIN COMMENT Originally a part of a singular blog entry's less file, now applied to all blogs */
.page-banner-blog {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background: url('/img/build/banners/blog/Banner_B_Corp.png');
}
@media (max-width: 768px) {
  .page-banner-blog {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 768px) {
  .page-banner-blog {
    background-image: url('/img/build/banners/Banner_B_Corp.scaled.800w.png');
  }
}
.bcorp h1 {
  margin-bottom: 50px;
}
.bcorp h2 {
  margin: 50px 0px;
}
/* END OF COMMENT */
.blog-body-text img,
iframe {
  width: 100%;
}
H1,
.h1 {
  margin-bottom: 0 !important;
}
H2,
.h2 {
  margin-bottom: 0 !important;
}
.subheader {
  color: #6c757d;
  line-height: 1.45;
  font-family: 'Montserrat';
  font-weight: 400;
}
/* Author Header / Byline */
.author-block {
  margin-top: 1em;
  margin-bottom: 1em;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.author-block .author-img {
  display: block;
  height: 3em;
  width: 3em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 0.25em;
}
.author-block .author-stuart {
  background-image: url('/img/build/pages/blog/stuart.png');
}
.author-block .author-becca {
  background-image: url('/img/build/pages/blog/becca.png');
}
.author-block .author-claire {
  background-image: url('/img/build/pages/blog/claires-head.png');
}
.author-block .author-connie {
  background-image: url('/img/build/pages/blog/connie.png');
}
.author-block .author-ryan {
  background-image: url('/img/build/pages/blog/ryan-headshot-better.png');
}
.author-block .author-ehannah {
  background-image: url('/img/build/pages/blog/ehannah.png');
}
.author-block .author-tash {
  background-image: url('/img/build/pages/blog/tash.png');
}
.author-block .author-winterstein {
  /* TODO a better picture please :) */
  background-image: url('https://winterstein.me.uk/images/dan.png');
  /* TODO Let's do all author images via border instead of image edits */
  border: solid #770f00 1px;
  border-radius: 1.5em;
}
.author-block .author-raimah {
  background-image: url('');
  border: solid #770f00 1px;
  border-radius: 1.5em;
}
.author-block .author-williams {
  background-image: url('/img/build/pages/blog/author-williams.jpg');
  border: solid #770f00 1px;
  border-radius: 1.5em;
}
.author-block .author-rainey {
  background-image: url('/img/build/pages/blog/author-nick.jpg');
  border: solid #770f00 1px;
  border-radius: 1.5em;
}
.author-block .author-hannah {
  background-image: url('/img/build/pages/blog/hannah.png');
}
.author-block .author-laura {
  background-image: url('/img/build/pages/blog/author-laura.jpg');
}
.author-block .author-david {
  background-image: url('/img/build/pages/blog/david.jpg');
}
.author-block .author-georgia {
  background-image: url('/img/build/pages/blog/georgia.png');
}
.author-block .author-karim {
  background-image: url('/img/build/pages/blog/karim.jpg');
}
.author-block .author-tom {
  background-image: url('/img/build/pages/blog/tom.png');
}
.author-block .author-charley {
  background-image: url('/img/build/pages/blog/author-charley.png');
}
.author-block .author-blank {
  background-image: url('/img/build/pages/blog/blank-head.jpg');
}
.author-block .author-unset {
  display: none;
}
.author-block .author-name {
  font-family: 'Montserrat';
  font-weight: 600;
  color: #770f00;
  text-transform: uppercase;
  letter-spacing: 0.25em;
}
.author-block .author-title {
  text-transform: uppercase;
  font-family: 'OpenSans';
  letter-spacing: 0.1em;
}
/* ./author */
.blog-datestamp {
  margin-bottom: 1em;
  font-weight: 400;
  font-style: italic;
}
.blog-summary-header {
  margin-bottom: 2em;
  font-weight: 800;
}
/* BEGIN COMMENT -- .blog-body-image is meant to be used with <img> classes, therefore height is auto instead of explicitly set */
.blog-body-image {
  width: 100%;
  height: auto;
}
/* END COMMENT */
/*blockquote {
	padding-left: 1em;
	border-left: 0.5em solid #d8d8d8;
}*/
#case-study {
  background: white;
}
#case-study h1,
#case-study h2,
#case-study h3 {
  font-weight: 800;
  text-transform: uppercase;
}
#case-study h4 a {
  color: #af2009 !important;
}
#case-study .h-nomargin h1,
#case-study .h-nomargin h2,
#case-study .h-nomargin h3,
#case-study .h-nomargin h4,
#case-study .h-nomargin h5 {
  margin: 0 !important;
}
#case-study .big-num h1 {
  font-size: 6rem !important;
}
#case-study .uplift .h1-section,
#case-study .uplift .h2-section,
#case-study .uplift h1,
#case-study .uplift h2 {
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  #case-study .uplift .h1-section,
  #case-study .uplift .h2-section,
  #case-study .uplift h1,
  #case-study .uplift h2 {
    text-align: center;
  }
}
.resources-download .h2-section {
  margin: 0 !important;
  padding: 0 !important;
}
.page-banner-soapglory {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background: url('/img/build/pages/case-studies/soap-and-glory/soap-glory-bg-hand-food.jpg');
  background-origin: border-box;
  background-size: contain !important;
  background-position-x: 80% !important;
  background-position-y: center !important;
  background-color: #CDF8F1;
}
@media (max-width: 768px) {
  .page-banner-soapglory {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
@media (max-width: 992px) {
  .page-banner-soapglory {
    background-position-x: 100% !important;
  }
}
#case-study.soap-and-glory .brand-color h1 a,
#case-study.soap-and-glory .brand-color h2 a,
#case-study.soap-and-glory .brand-color h3 a,
#case-study.soap-and-glory .brand-color h4 a,
#case-study.soap-and-glory .brand-color h5 a {
  color: #ECBECB !important;
}
#case-study.soap-and-glory .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-banner-birdseye {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/pages/case-studies/birdseye/vegheader.jpg');
}
@media (max-width: 768px) {
  .page-banner-birdseye {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
#case-study.birdseye .brand-color h1 a,
#case-study.birdseye .brand-color h2 a,
#case-study.birdseye .brand-color h3 a,
#case-study.birdseye .brand-color h4 a,
#case-study.birdseye .brand-color h5 a {
  color: #ED1C24 !important;
}
.page-banner-huggies {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/pages/case-studies/huggies/close-up-of-baby-feet.jpg');
}
@media (max-width: 768px) {
  .page-banner-huggies {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
#case-study.huggies .brand-color h1 a,
#case-study.huggies .brand-color h2 a,
#case-study.huggies .brand-color h3 a,
#case-study.huggies .brand-color h4 a,
#case-study.huggies .brand-color h5 a {
  color: #ED1C24 !important;
}
#side-projects {
  background: white;
}
#side-projects h1,
#side-projects h2,
#side-projects h3 {
  font-weight: 800;
  text-transform: uppercase;
}
#side-projects h4 a {
  color: #af2009 !important;
}
#side-projects .h-nomargin h1,
#side-projects .h-nomargin h2,
#side-projects .h-nomargin h3,
#side-projects .h-nomargin h4,
#side-projects .h-nomargin h5 {
  margin: 0 !important;
}
#side-projects .big-num h1 {
  font-size: 6rem !important;
}
#side-projects .uplift .h1-section,
#side-projects .uplift .h2-section,
#side-projects .uplift h1,
#side-projects .uplift h2 {
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  #side-projects .uplift .h1-section,
  #side-projects .uplift .h2-section,
  #side-projects .uplift h1,
  #side-projects .uplift h2 {
    text-align: center;
  }
}
#side-projects h3 {
  text-align: center;
}
.page-banner-jerbil {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/banners/Banner_WhatWeDo.jpg');
}
@media (max-width: 768px) {
  .page-banner-jerbil {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
.page-banner-bob {
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: -9999;
  padding: 100px;
  padding-top: 130px;
  height: 25rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image: url('/img/build/banners/Banner_WhatWeDo.jpg');
}
@media (max-width: 768px) {
  .page-banner-bob {
    text-align: center;
    padding-top: 75px;
    height: 15rem;
  }
}
body code {
  background-color: #dfdfdf;
}
@keyframes kicking {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-10deg) translate(0, -10%);
  }
}
@keyframes jumpkick {
  0%,
  90% {
    transform: rotate(0) translate(0, 0) scale(1);
  }
  20% {
    transform: rotate(-10deg) translate(0, -25%) scale(1.05);
  }
  40% {
    transform: rotate(0) translate(0, -26%) scale(1);
  }
  60% {
    transform: rotate(0) translate(0, -27%) scale(1);
  }
}
@keyframes stretchinandout {
  0% {
    transform: translate(-50%, 0) scaleX(0);
  }
  50% {
    transform: translate(0, 0) scaleX(1);
  }
  100% {
    transform: translate(50%, 0) scaleX(0);
  }
}
@keyframes expandandfade {
  0% {
    transform: scale(1);
    opacity: inherit;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
@keyframes fade2D {
  0% {
    opacity: 0;
    transform: translate(0, -10em);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fade2U {
  0% {
    opacity: 0;
    transform: translate(0, 10em);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fade2R {
  0% {
    opacity: 0;
    transform: translate(-20em, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fade2L {
  0% {
    opacity: 0;
    transform: translate(20em, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes turning {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(10deg) scale(1.1);
  }
}
@keyframes scaling {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fingertapleft {
  0% {
    transform: translateX(-2%) rotate(-10deg);
  }
  40% {
    transform: translateX(0) rotate(0);
  }
  50% {
    transform: translateX(0) rotate(0);
  }
  100% {
    transform: translateX(-2%) rotate(-10deg);
  }
}
@keyframes fingertapright {
  0% {
    transform: translate(4%, -35%) rotate(10deg);
  }
  40% {
    transform: translate(0) rotate(0);
  }
  50% {
    transform: translate(0) rotate(0);
  }
  100% {
    transform: translate(4%, -35%) rotate(10deg);
  }
}
@keyframes coinfall {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(15%, 21%) scale(0.7);
  }
}
.inViewport {
  opacity: 0;
}
.inViewport.played {
  opacity: 1;
}
[data-inviewport="how-it-works"].inViewport.played #graphic-tv {
  animation: jumpkick 1s ease-out 0.5s both;
}
[data-inviewport="how-it-works"].inViewport.played .red-effect-line {
  animation: stretchinandout 0.5s ease-in-out 0.5s both;
  padding: 1.5px;
  background-color: #af2009;
}
[data-inviewport="how-it-works"].inViewport.played .line-effect-container {
  position: absolute;
  width: 20%;
}
[data-inviewport="how-it-works"].inViewport.played #line1 {
  transform: rotate(200deg);
  top: 10%;
  left: -20%;
}
[data-inviewport="how-it-works"].inViewport.played #line2 {
  transform: rotate(230deg);
  top: -20%;
  left: -10%;
}
[data-inviewport="how-it-works"].inViewport.played #line3 {
  transform: rotate(260deg);
  top: -30%;
  left: 20%;
}
[data-inviewport="how-it-works"].inViewport.played #play-graphic {
  position: absolute;
  top: 41%;
  left: 52%;
  transform: translate(-50%, -50%) scale(0.75);
}
[data-inviewport="how-it-works"].inViewport.played .blue-circle {
  position: absolute;
  background-color: #58A5BC;
  border-radius: 50%;
}
[data-inviewport="how-it-works"].inViewport.played #large-circle {
  width: 20%;
  height: auto;
  padding-top: 20%;
  top: 28%;
  left: 42%;
  opacity: 0.7;
  animation: expandandfade 1s ease-out 0.5s both;
}
[data-inviewport="how-it-works"].inViewport.played #small-circle {
  width: 15%;
  height: auto;
  padding-top: 15%;
  top: 31%;
  left: 44.5%;
  animation: expandandfade 1s ease-out 0.5s both;
}
[data-inviewport="how-it-works"].inViewport.played #swirl-tv {
  width: 80%;
  margin: 10% auto;
}
[data-inviewport="globe-svg"].inViewport {
  opacity: 1 !important;
}
[data-inviewport="globe-svg"].inViewport #image1302 {
  transform: translateY(-2%);
}
[data-inviewport="globe-svg"].inViewport #image871 {
  transform: translateY(-2%);
}
[data-inviewport="globe-svg"].inViewport.played #coin1 {
  animation: coinfall 0.5s ease-in 0s both;
}
[data-inviewport="globe-svg"].inViewport.played #coin2 {
  animation: coinfall 0.5s ease-in 0.2s both;
}
[data-inviewport="globe-svg"].inViewport.played #coin3 {
  animation: coinfall 0.5s ease-in 0.4s both;
}
[data-inviewport="metro-graphic"].inViewport .metro-logo {
  position: absolute;
}
[data-inviewport="metro-graphic"].inViewport #logo1 {
  width: 6.98%;
  top: 18%;
  left: 10%;
}
[data-inviewport="metro-graphic"].inViewport #logo2 {
  width: 7.14%;
  top: 7%;
  left: 15%;
}
[data-inviewport="metro-graphic"].inViewport #logo3 {
  width: 7.5%;
  top: 18%;
  left: 21%;
}
[data-inviewport="metro-graphic"].inViewport #logo4 {
  width: 6.98%;
  top: 7%;
  left: 26%;
}
[data-inviewport="metro-graphic"].inViewport #logo5 {
  width: 7.29%;
  top: 18%;
  left: 31%;
}
[data-inviewport="metro-graphic"].inViewport #logo6 {
  width: 8%;
  top: 7%;
  left: 36%;
}
[data-inviewport="metro-graphic"].inViewport #logo7 {
  width: 7.14%;
  top: 18%;
  left: 41.5%;
}
[data-inviewport="metro-graphic"].inViewport #logo8 {
  width: 7.6%;
  top: 7%;
  left: 46%;
}
[data-inviewport="metro-graphic"].inViewport #logo9 {
  width: 7.4%;
  top: 18%;
  left: 51.5%;
}
[data-inviewport="metro-graphic"].inViewport #logo10 {
  width: 8%;
  top: 7%;
  left: 56%;
}
[data-inviewport="metro-graphic"].inViewport #logo11 {
  width: 5.89%;
  top: 18%;
  left: 62.5%;
}
[data-inviewport="metro-graphic"].inViewport #logo12 {
  width: 6.82%;
  top: 7%;
  left: 67%;
}
[data-inviewport="metro-graphic"].inViewport #logo13 {
  width: 6.98%;
  top: 18%;
  left: 72.5%;
}
[data-inviewport="metro-graphic"].inViewport #logo14 {
  width: 6.61%;
  top: 7%;
  left: 78%;
}
[data-inviewport="metro-graphic"].inViewport #logo15 {
  width: 7.24%;
  top: 18%;
  left: 83%;
}
[data-inviewport="metro-graphic"].inViewport.played #logo1 {
  animation: fade2U 0.5s ease-out 0.1s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo2 {
  animation: fade2U 0.5s ease-out 0.15s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo3 {
  animation: fade2U 0.5s ease-out 0.2s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo4 {
  animation: fade2U 0.5s ease-out 0.25s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo5 {
  animation: fade2U 0.5s ease-out 0.3s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo6 {
  animation: fade2U 0.5s ease-out 0.35s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo7 {
  animation: fade2U 0.5s ease-out 0.4s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo8 {
  animation: fade2U 0.5s ease-out 0.45s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo9 {
  animation: fade2U 0.5s ease-out 0.5s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo10 {
  animation: fade2U 0.5s ease-out 0.55s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo11 {
  animation: fade2U 0.5s ease-out 0.6s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo12 {
  animation: fade2U 0.5s ease-out 0.65s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo13 {
  animation: fade2U 0.5s ease-out 0.7s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo14 {
  animation: fade2U 0.5s ease-out 0.75s both;
}
[data-inviewport="metro-graphic"].inViewport.played #logo15 {
  animation: fade2U 0.5s ease-out 0.8s both;
}
[data-inviewport="our-ad-formats"].inViewport.played #graphic-laptop-and-mobile {
  animation: fade2D 1s ease-out 0s both;
}
[data-inviewport="our-ad-formats"].inViewport.played #watch-to-donate {
  animation: fade2D 1s ease-out 0.1s both;
}
[data-inviewport="our-ad-formats"].inViewport.played #graphic-tablet-and-phone {
  animation: fade2D 1s ease-out 0.2s both;
}
[data-inviewport="our-ad-formats"].inViewport.played #engage-to-donate {
  animation: fade2D 1s ease-out 0.3s both;
}
[data-inviewport="our-ad-formats"].inViewport.played #linkText-button {
  animation: fade2D 1s ease-out 0.4s both;
}
[data-inviewport="our-ad-formats"].inViewport.played #graphic-social-icons-1 {
  animation: fade2U 0.6s ease-out 0.7s both;
}
[data-inviewport="our-ad-formats"].inViewport.played #graphic-social-icons-2 {
  animation: fade2U 0.4s ease-out 0.9s both;
}
[data-inviewport="our-ad-formats"].inViewport.played #graphic-social-icons-3 {
  animation: fade2U 0.4s ease-out 1s both;
}
[data-inviewport="brand-partners"].inViewport.played #brand-partners-1 {
  animation: fade2U 1.5s ease 0s both;
}
[data-inviewport="brand-partners"].inViewport.played #brand-partners-2 {
  animation: fade2U 1.5s ease 0.05s both;
}
[data-inviewport="brand-partners"].inViewport.played #brand-partners-3 {
  animation: fade2U 1.5s ease 0.1s both;
}
[data-inviewport="brand-partners"].inViewport.played #brand-partners-4 {
  animation: fade2U 1.5s ease 0.15s both;
}
[data-inviewport="brand-partners"].inViewport.played #brand-partners-5 {
  animation: fade2U 1.5s ease 0.2s both;
}
[data-inviewport="footer-social"].inViewport.played .footer-icons {
  animation: turning 1s ease 0.5s both;
}
[data-inviewport="infographic-journey-1"].inViewport.played #significantly-higher-engagemnet {
  animation: fade2D 1s ease-out 0s both;
}
[data-inviewport="infographic-journey-1"].inViewport.played #view-rates-img {
  animation: fade2R 1s ease-out 0.1s both;
}
[data-inviewport="infographic-journey-1"].inViewport.played #view-rates-text {
  animation: fade2R 1s ease-out 0.2s both;
}
[data-inviewport="infographic-journey-1"].inViewport.played #which-means-more-people-remember-your-ad {
  animation: fade2D 1s ease-out 0s 1 both;
}
[data-inviewport="infographic-journey-1"].inViewport.played #ad-recall-img-cocacola {
  animation: fade2L 1s ease-out 0.4s both;
}
[data-inviewport="infographic-journey-1"].inViewport.played #ad-recall-img-football {
  animation: fade2L 1s ease-out 0.5s both;
}
[data-inviewport="infographic-journey-1"].inViewport.played #ad-recall-text {
  animation: fade2L 1s ease-out 0.6s both;
}
[data-inviewport="infographic-journey-2"].inViewport.played #brand-positivity-img-sunbites {
  animation: fade2R 1s ease-out 0s both;
}
[data-inviewport="infographic-journey-2"].inViewport.played #brand-positivity-img-tomato {
  animation: fade2R 1s ease-out 0.1s both;
}
[data-inviewport="infographic-journey-2"].inViewport.played #brand-positivity-text {
  animation: fade2R 1s ease-out 0.2s both;
}
[data-inviewport="infographic-journey-2"].inViewport.played #brand-sentiment-img-backpack {
  animation: fade2L 1s ease-out 0s both;
}
[data-inviewport="infographic-journey-2"].inViewport.played #brand-sentiment-img-toms {
  animation: fade2L 1s ease-out 0.1s both;
}
[data-inviewport="infographic-journey-2"].inViewport.played #brand-sentiment-text {
  animation: fade2L 1s ease-out 0.2s both;
}
[data-inviewport="infographic-journey-2"].inViewport.played #ultimately-more-brand-love {
  animation: fade2D 1s ease-out 0s both;
}
[data-inviewport="infographic-journey-3"].inViewport.played #likely-to-purchase-img-phone {
  animation: fade2R 1s ease-out 0s both;
}
[data-inviewport="infographic-journey-3"].inViewport.played #likely-to-purchase-text {
  animation: fade2L 1s ease-out 0.2s both;
}
.gird-tile-informative {
  transition: transform 0.2s;
}
.gird-tile-informative:hover {
  transform: scale(1.05);
}
[data-inviewport="how-it-works-numbers"].inViewport.played #how-it-works-numbers-img-1 {
  animation: scaling 1s ease 0s both;
}
[data-inviewport="how-it-works-numbers"].inViewport.played #how-it-works-numbers-text-1 {
  animation: fade2D 0.5s ease-out 0.2s both;
}
[data-inviewport="how-it-works-numbers"].inViewport.played #how-it-works-numbers-img-2 {
  animation: scaling 1s ease 0.2s both;
}
[data-inviewport="how-it-works-numbers"].inViewport.played #how-it-works-numbers-text-2 {
  animation: fade2D 0.5s ease-out 0.4s both;
}
[data-inviewport="how-it-works-numbers"].inViewport.played #how-it-works-numbers-img-3 {
  animation: scaling 1s ease 0.3s both;
}
[data-inviewport="how-it-works-numbers"].inViewport.played #how-it-works-numbers-text-3 {
  animation: fade2D 0.5s ease-out 0.5s both;
}
#crowdfunding-btn {
  animation: fade2L 1s ease-out 0.5s both;
}