body {
    font-family: 'PPMori', sans-serif;
}
/* fix odometer digit shifting */
.odometer .odometer-digit .odometer-value {
  width: 100%;
}
.bg-between {
}
.formkit-slide-in {
  z-index: 100000;
}
@media (min-width:992px) {
    .navbar-nav .dropdown-menu {
        left: 50%;
        min-width: 700px;
        padding: 1.5rem 1rem;
        box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, .15);
        visibility: hidden;
        opacity: 0;
        transform: translate3d(-50%, 10px, 0);
        transition: all .2s ease-in-out;
        transition-property: opacity, visibility, transform;
        transform-origin: top center
    }

    .navbar-nav .dropdown-menu.dropdown-menu-lg {
        min-width: 670px
    }
}
@media (max-width: 992px) {
    row {
        display: block;
    }
}
@media (max-width: 576px) {
  .anchor {
    display: block;
    margin-top: 100px; 
  }
}

@media (min-width: 401px) {

#target-logo {
  width:10%;
  padding:10px;
}
#microsoft-logo {
  width:25%;
  padding:10px;
}
#typeform-logo {
  width:15%;
  padding:10px;
  padding-right:20px;
}
#pingdom-logo {
  width:15%;
  padding:10px;
}
}

@media (max-width: 400px) {
    #target-logo {
        width:20%;
        padding:10px;
    }
    #microsoft-logo {
        width:40%;
        padding:10px;
    }
    #typeform-logo {
        width:40%;
        padding:10px;
        padding-right:20px;
    }
    #pingdom-logo {
        width:40%;
        padding:10px;
    }
}
.actual-list ul {
  list-style: none;
}
.actual-list li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}

.actual-list ul li:before {
  color: green;
  margin-top: 4px;
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 4em;
  height: 4em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path fill='%2376C7A5' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'></path></svg>") no-repeat;
}
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>

.left-padding10 {
    padding-left: 10px !important;
}

.text-white {
    color: #fff;
}

@media (min-width: 768px) {
    .pt-md-11, .py-md-11 {
        padding-top: 2rem!important;
    }
}

.dropdown-menu a:hover {
    background: #EBEFFD;
    border-radius: 10px;
}

.dropdown-menu a {
    padding: 5px;
}


.bg-blue {
background-color: #21D4FD;
background-image: linear-gradient(180deg, #21D4FD 0%, #70c4db 71%);


} 

.main-headline {
    font-size: 2.9rem;
    font-weight: 600;
}

.main-subhead {
    font-size: 1.5rem;
}

.navbar {
    background-color: #21D4FD;
}
ul li {
  list-style-position: outside;
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (max-width: 990px) {
  /*hide stuff on smaller screens*/
    #stunning-header-img {
        display: none;
    }
    #try-free-button {
        display: none;
    }
    .svg-shim {
      display: none;
    }
    #sign-in-button {
      font-weight: 600;
      text-align: left;
      border-top-color:rgb(241, 244, 248);
      border-top-style:solid;
      border-top-width:1px;
      padding-left: 24px;
    }    
}

@media (min-width: 768px) {
    .col-md-7 {
        flex: none; 
        max-width: 100%;
    }

}
#recovered-revenue-main {
    background-color: #42ba96;
    border-color: #42ba96;
    display: inline-block;
    font-weight: 600;
    color: #161c2d;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    padding: .8125rem 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    border-radius: .375rem;
}

#recovered-revenue-main h2 {
    margin-bottom: 0px;
    color: #fff;
}
/* rangeslider */
.rangeslider,
.rangeslider__fill {
  display: block;
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.rangeslider {
  background: #e6e6e6;
  position: relative;
}

.rangeslider--horizontal {
  height: 20px;
  width: 100%;
}

.rangeslider--vertical {
  width: 20px;
  min-height: 150px;
  max-height: 100%;
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.rangeslider__fill {
  background: #00ff00;
  position: absolute;
}
.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 100%;
}
.rangeslider--vertical .rangeslider__fill {
  bottom: 0;
  width: 100%;
}

.rangeslider__handle {
  background: white;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.rangeslider__handle:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
}
.rangeslider--horizontal .rangeslider__handle {
  top: -10px;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}
.rangeslider--vertical .rangeslider__handle {
  left: -10px;
  touch-action: pan-x;
  -ms-touch-action: pan-x;
}

input[type="range"]:focus + .rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}




#helper{
  float: left;
  margin-top: 20px;
  color: $light-blue;
  font-style: italic;
}

.mrr {
  display: block;
  font-size: 2em;
}


price {
  display: block;
  font-size: 1.5em;
}

/* original css */
.rangeslider,
.rangeslider__fill {
  display: block;
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.rangeslider {
  background: #e6e6e6;
  position: relative;
}

.rangeslider--horizontal {
  height: 20px;
  width: 100%;
}

.rangeslider--vertical {
  width: 20px;
  min-height: 150px;
  max-height: 100%;
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.rangeslider__fill {
  //background: $blue;
    background: -webkit-linear-gradient(left, #70c4db, #21D4FD); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #70c4db, #21D4FD); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #70c4db, #21D4FD); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #70c4db, #21D4FD); /* Standard syntax (must be last) */
  position: absolute;
}
.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 100%;
}
.rangeslider--vertical .rangeslider__fill {
  bottom: 0;
  width: 100%;
}

.rangeslider__handle {
  background: white;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.rangeslider__handle:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.rangeslider__handle:active {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
}
.rangeslider--horizontal .rangeslider__handle {
  top: -10px;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}
.rangeslider--vertical .rangeslider__handle {
  left: -10px;
  touch-action: pan-x;
  -ms-touch-action: pan-x;
}

input[type="range"]:focus + .rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}

/* rangeslider end */


.mobile-only {display: none;} 

/* Smartphone Portrait and Landscape */ 
@media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px){ 
    .mobile-only {
      display: inline;
      background-color: rgba(225, 104, 83, 0.3);
      border-color: #42ba96;
      display: inline-block;
      color: #161c2d;
      text-align: center;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      
      padding: .8125rem 1.25rem;
      font-size: 1rem;
      line-height: 1.6;
      border-radius: .375rem;
      margin-bottom: 20px;
      margin-top: -20px;

    }
}

//revenue rescue front page styles

.screen--wrapper {
    position: relative;
    background-color: #204063;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 1rem);
    height: 100%;
    max-height: calc(100vh - 1rem);
    overflow:auto
}

@media screen and (min-width: 700px) {
    .screen--wrapper {
        width: calc(100% - 10vmin);
        max-height:calc(100% - 10vmin)
    }
}

.screen--container__tutorial .screen--wrapper {
    background-color: transparent;
    width: 100%;
    max-height:100%
}


.screen--header {
    position: relative;
    padding: 3rem;
    width: 100%;
    padding-bottom:6rem
}

@media screen and (min-width: 1400px) {
    .screen--header {
        background-size:100% 5rem, auto 100%
    }
}

.screen--container__start .screen--header {
    background-color: #33bedb;
    background-image: url("/img/water-surface-startscreen.png"), url("/img/sky-startscreen.png");
    background-repeat: repeat-x, no-repeat;
    background-position: right bottom, right top;
    background-size:1400px 5rem, cover
}

.screen--container__end .screen--header {
    background-color: #33bedb;
    background-image: url("/img/bg-end-screen-sky.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top
}

@media screen and (min-width: 850px) {
    .screen--container__end .screen--header {
        display:flex
    }
}

.screen--logo-wrapper {
    display: flex;
    justify-content:center
}

@media screen and (min-width: 900px) {
    .screen--logo-wrapper {
        justify-content:flex-start
    }
}

.screen--container__end .screen--logo-wrapper {
    margin-right:2rem
}

.screen--logo {
    max-width: 20rem;
    width: 100%;
    height: auto;
    align-self:center
}

@media screen and (min-width: 900px) {
    .screen--logo {
        max-width:24rem
    }
}

.screen--container__end .screen--logo {
    max-width:14rem
}

.screen--headline {
    position: relative;
    width: 100%;
    max-width: 60rem;
    margin-top: 2rem;
    font-family: "Baloo 2", sans-serif;
    font-weight: bold;
    font-size: 1.375rem;
    line-height: 1.2;
    text-align:center
}

@media screen and (min-width: 700px) {
    .screen--headline {
        text-align: left;
        font-size:2rem
    }
}
@media screen and (min-width: 700px) {
  .play-button {
      position: relative;
      top: -5rem;
  }
}

@media screen and (max-width: 1150px) {
  .play-button {
      position: relative;
      top: -1rem;
  }
}
@media screen and (max-width: 900px) {
  .play-button {
      position: relative;
      top: 0.5rem;
  }
}
.screen--payment {
    position: absolute;
    bottom: 5rem;
    right: 10vw;
    width: 8vw;
    animation:bob 2s alternate linear infinite
}

@keyframes bob {
    from {
        transform:translateY(0.5rem) rotate(-5deg)
    }

    to {
        transform:translateY(0.5rem) rotate(5deg)
    }
}
.btn-rescue {
  color: white;
    background-color: #CF4941;
    border-color: #dc3545;
}
.btn.btn-rescue:hover, .btn.btn-rescue:focus {
    color: white;

}

.mark {
  animation: 3s highlighter 1.5s 1 normal forwards;
  animation-delay: 7s;
  background-color: none;
  background: linear-gradient(90deg, #42ba96 50%, rgba(255, 255, 255, 0) 50%);
  border-radius: 12px 12px 7px 8px;

  background-size: 200% 100%;
  background-position: 100% 0;
  margin-left: -4px;
}

@keyframes highlighter {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@font-face {
  font-family: "PPMori";
  font-weight: 100;
  src: url("/fonts/ppmori/PPMori-Extralight.woff2") format("woff2");
}
@font-face {
  font-family: "PPMori";
  font-weight: 200;
  src: url("/fonts/ppmori//PPMori-Light.woff2") format("woff2");
}
@font-face {
  font-family: "PPMori";
  font-weight: 300;
  src: url("/fonts/ppmori//PPMori-Book.woff2") format("woff2");
}
@font-face {
  font-family: "PPMori";
  font-weight: 400;
  src: url("/fonts/ppmori//PPMori-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "PPMori";
  font-weight: 500;
  src: url("/fonts/ppmori//PPMori-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "PPMori";
  font-weight: 600;
  src: url("/fonts/ppmori//PPMori-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "PPMori";
  font-weight: 700;
  src: url("/fonts/ppmori//PPMori-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "PPMori";
  font-weight: 800;
  src: url("/fonts/ppmori//PPMori-ExtraBold.woff2") format("woff2");
}