@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap');

::selection{ background-color: rgba(26, 212, 168, 0.33); }
::moz-selection{ background-color: rgba(26, 212, 168, 0.33); }
::webkit-selection{ background-color: rgba(26, 212, 168, 0.33); }

html, body {
    width: 100%;
    height: 100%;
    background-color: #F1F1F1 !important;
    font-family: 'Rubik', sans-serif !important;
}

.new-sale-bar {
    background-color: #059669;
    padding: 14px 0;
}

.discount-code-container{
	font-size:17.5px;
	font-weight:600;
	margin-left:10px;
	cursor:pointer;
	transition: background .2s ease-out;
	padding:6px 16px;
	border:3px dashed rgba(255,255,255,.5);
	color:#fff;
	display:inline-block;
	background-color:#7b4dd5;}

.discount-code-container:hover{
	background-color:#6C69bf}

.new-sale-countdown-in {
    float: right;
    padding-right: 10px;
}

.new-sale-countdown .new-sale-countdown-item {
    display: inline-block;
    width: 57px;
    margin-left: 10px;
}

.new-sale-countdown .new-sale-countdown-item .new-sale-countdown-number {
    font-weight: 600;
    color: #fff;
    margin-top: 12px;
    font-size: 24px;
    line-height: 0;
    text-align: center;
    display: block;
}

.new-sale-countdown .new-sale-countdown-item .new-sale-countdown-type {
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 23px;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 13px;
    text-align: center;
    line-height: 0;
    display: block;
    color: rgba(255,255,255,.6);
}

#home-header {
    width: 100%;
    padding-bottom: 360px;
    background-image: url(../img/home-background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    display: block;
}

#page-header {
    width: 100%;
    padding-bottom: 100px;
    background-image: url(../img/page-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    display: block;
}

.new-sale-bar .new-sale-text {
    padding: 0 6px;
    border-left: 1.2px solid rgba(255,255,255,.5);
    border-right: 1.2px solid rgba(255,255,255,.5);
}

.new-sale-bar .new-sale-text .new-sale-type {
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
}

.new-sale-bar .new-sale-text .new-sale-amount {
    color: #fff;
    font-weight: 600;
    font-size: 19px;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
}

.navbar {
    background: transparent !important;
    border: none;
    outline: none;
    padding-top: 55px !important;
}

.navbar-toggler {
    background: #FFFFFF !important;
}

.navbar-logo {
    width: 170px;
}

.nav-link {
    color: rgba(256, 256, 256, .85) !important;
    font-family: 'Rubik', sans-serif !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
    transition: color .2s ease-out !important;
}

.nav-link:hover {
    color: white !important;
}

.navbar .active .nav-link {
    color: white !important;
}

.nav-item {
    margin-left: 30px !important;
}

.nav-btn {
    color: #FD2F42 !important;
    background-color: white !important;
    border-radius: 5px;
    margin-top: 0 !important;
    padding: 11px 35px !important;
    box-shadow: 0 6px 6px rgba(0, 0, 0, .16);
    font-size: 14px !important;
    transition: all .2s ease-out !important;
}

.nav-btn:hover {
    background-color: rgba(256, 256, 256, .9) !important;
    box-shadow: 0 8px 8px rgba(0, 0, 0, .19) !important;
    color: #FD2F42 !important;
}

.header-title {
    font-weight: 600 !important;
    margin-top: 100px;
    font-size: 46px;
    color: white;
}

.home-head-features {
    margin: 30px 0;
    padding: 0;
    list-style: none;
}

.home-head-feature {
    margin-top: 16px;
    margin-bottom: 16px;
}

.feature-check-icon {
    width: 40px;
    margin-right: 12px;
}

.feature-head-text {
    color: rgba(256, 256, 256, .9);
    font-weight: 600;
    font-size: 18px;
}

.home-head-buttons {
    display: block;
}

.home-head-btn {
    display: inline-block;
    margin-right: 25px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, .08);
    border-radius: 7px;
    font-weight: 700;
    text-align: center;
    padding: 14px 0;
    margin-top: 30px;
    transition: all .2s ease-out;
    width: 145px;
    background-color: white;
    color: #FD2F42;
}

#head-btn-two {
    background-color: rgba(0, 0, 0, .36);
    color: white;
}

#head-btn-one:hover {
    text-decoration: none;
    box-shadow: 0 8px 8px rgba(0, 0, 0, .12);
    background-color: rgba(256, 256, 256, .85);
    color: #FD2F42;
}

#head-btn-two:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, .45);
    box-shadow: 0 8px 8px rgba(0, 0, 0, .12);
}

.home-feature-inner {
    background-color: white;
    padding: 30px;
    border-radius: 9px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .12);
    width: 100%;
    margin-bottom: 25px;
    position: relative;
}

#featureOne {
    margin-top: -215px;
}

#featureTwo {
    margin-top: -245px;
}

#featureThree {
    margin-top: -275px;
}

#featureFour {
    margin-top: 0px;
}

#featureFive {
    margin-top: -30px;
}

#featureSix {
    margin-top: -60px;
}

.feature-icon {
    color: #FD2F42;
    font-size: 30px;
    text-align: center;
}

.feature-name {
    font-weight: 600;
    font-size: 16px;
    text-align: center;
}

.feature-text {
    color: rgba(0, 0, 0, .75);
    font-size: 14px;
    text-align: center;
    font-weight: 400;
}

.plan-icon {
    width: 80px !important;
    display: block;
    margin: 0 auto;
}

.section-top-title {
    font-size: 20px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(253, 47, 66, .31);
    text-align: center;
    margin-top: 70px;
}

.section-title {
    font-weight: 700;
    font-size: 45px;
    text-align: center;
}

.location-map {
    margin-top: 80px;
    width: 100%;
    display: block;
}

@media (min-width: 1400px) {
    .container {
        width: 1300px;
    }
}

.locations li {
    color: rgba(0, 0, 0, 0.75);
    font-weight: 400;
    font-size: 15px;
    text-align: left;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 500px;
}

.location-indicator {
    content: " ";
    width: 12px;
    height: 12px;
    position: relative;
    background-color: #FD2F42;
    box-shadow: 0 0 0 5px rgba(253, 47, 66, .32);
    border-radius: 100px;
}

#lille-indicator {
    left: 46%;
    margin-top: -1%;
}

#dusseldorf-indicator {
    left: 47%;
    margin-top: -8%;
}

#ny-indicator {
    left: 22%;
    margin-top: -3%;
}

#kc-indicator {
    left: 15%;
    margin-top: -13%;
}

#la-indicator {
    left: 8%;
    margin-top: -34%;
}

#montreal-indicator {
    left: 24%;
    margin-top: 1%;
}

#at-indicator {
    left: 19%;
    margin-top: 0%;
}

#sg-indicator {
    left: 79%;
    margin-top: 15%;
}

#testimonial-section {
    margin-top: 27%;
    padding-bottom: 60px;
    width: 100%;
    background-image: url(../img/testimonial-background.png);
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 40px;
    background-size: cover;
}

.testimonial-inner {
    width: 100%;
    margin-top: 30px;
    border-radius: 12px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .12);
    padding: 40px 40px 20px 40px;
    background-color: white;
    width: 95%;
    display: block;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-icon {
    width: 40px;
    display: inline-block;
    margin-right: 8px;
}

.testimonial-name span {
    color: rgba(0, 0, 0, .64);
    font-weight: 600;
    font-size: 16px;
    position: relative;
    top: -6px;
}

.testimonial-text {
    font-weight: 400;
    color: rgba(0, 0, 0, .75);
    margin-top: 20px;
    font-size: 14px;
}

.testimonial-stars {
    color: #FD2F42;
    font-size: 15px;
}

.splide__arrow--next {
    right: -42px !important;
}

.splide__arrow--prev {
    left: -42px !important;
}

.splide__arrow {
    background: #FD2F42 !important;
    fill: white !important;
}

.splide__arrow path {
    fill: white !important;
}

.splide__pagination {
    display: none;
}

#footer {
    background-image: url(../img/main-bg2.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-attachment: fixed;
    width: 100%;
    padding-top: 90px;
    padding-bottom: 90px;
}

.footer-logo {
    width: 200px;
    margin-bottom: 30px;
}

.copyright {
    font-weight: 400;
    color: rgba(256, 256, 256, .9);
    width: 90%;
    font-size: 14px;
}

.footer-title {
    font-size: 26px;
    color: white;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-link {
    margin-bottom: 8px;
}

.footer-link a {
    color: white;
    font-weight: 400;
    color: rgba(256, 256, 256, .9);
    font-size: 14px;
    transition: all .2s ease-out;
}

.footer-link a:hover {
    color: white;
    padding-left: 9px;
    text-decoration: none;
    border-left: 3px solid #FD2F42;
}

.footer-test {
    color: #91AAFF;
}

.footer-social-media img {
    display: inline-block;
    width: 45px;
    margin-right: 10px;
    transition: all .2s ease-out;
}

.footer-social-media:hover {
    text-decoration: none !important;
}

.footer-social-media img:hover {
    margin-top: -6px;
    position: relative;
}

#legal-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.legal-title {
    color: black;
    font-weight: 600;
    font-size: 17px;
    margin-top: 50px;
}

.legal-title-sla-green {
    color: rgb(74, 201, 37);
    font-weight: 600;
    font-size: 17px;
    margin-top: 50px;
}

.legal-title-aup-purple {
    color: rgb(114, 90, 212);
    font-weight: 600;
    font-size: 17px;
    margin-top: 50px;
}

.legal-text {
    font-weight: 400;
    color: rgb(114, 90, 212);
    margin-top: 15px;
}

.legal-text-sla-green {
    font-weight: 400;
    color: rgb(74, 201, 37);
    margin-top: 15px;
}

.legal-text-aup-purple {
    font-weight: 400;
    color: rgb(114, 90, 212);
    margin-top: 15px;
}


.clear {
	clear: both;
}



.clear-sla-divider {
	clear:both;
	height:1px;
	border-top:1px solid #dbe1e8;
	margin:55px 0% 70px 0%;
}

.one-fourth {
	width: 25%;
	float: left;
}

.one-third {
	width: 33.3333%;
	float: left;
}

.one-half {
	width: 50%;
	float: left;
}

.one-fifth {
	width:20%;
	float:left;
}

.one-fourth,
.one-third,
.one-half, .single {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.checklist {
	margin-bottom: 20px;
}

.checklist li {
	background: url('../img/checkmark.png') 0px 4px no-repeat;
	padding-left: 25px;
	line-height: 28px;
}

.checklist li:after {
	content: '';
	display: block;
	clear: both;
}

.checkmarklist {
	margin-bottom: 20px;
    font-size: 14px;
}

.checkmarklist li {
	background: url('../img/tick.png') 0px 6px no-repeat;
	padding-left: 22px;
	line-height: 28px;
}

.checkmarklist li:after {
	content: '';
	display: block;
	clear: both;
}


.sla .one-half.left{
	width:62%;
}

.sla .one-half.right {
	width:38%;
	    padding-top: 46px;
}

.sla .plan-table tr td:first-child {
	width:auto;
}
.sla-tablenew {
	-webkit-border-collapse: separate;
	border-collapse: separate;
	width:100%;
	min-width:100%;
	max-width:100%;
}


.sla-tablenew thead th {
	padding: 0px 18px;
    font-size: 14px;
    color: #434a51;
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    border-top: 1px solid #dbe1e8;
    border-bottom: 1px solid #dbe1e8;
    text-align: left;
    background: #f1f4f8;
}

.sla-tablenew thead th:nth-child(1) {
    border-left: 1px solid #dbe1e8;
    -webkit-border-radius: 3px 0px 0px 0px;
    border-radius: 3px 0px 0px 0px;
}

.sla-tablenew thead th:nth-last-child(1) {
    border-right: 1px solid #dbe1e8;
    -webkit-border-radius: 0px 3px 0px 0px;
    border-radius: 0px 3px 0px 0px;
}

.sla-tablenew tr td {
	padding:0px 18px;
	line-height:42px;
	height:42px !important;
	text-align:left !important;
    border-bottom: 1px solid #dbe1e8;
	width:60%;
}

.sla-tablenew tr td:last-child {
    border-right: 1px solid #dbe1e8;
	width:40%;
}


.sla-tablenew tr td:first-child {
    border-left: 1px solid #dbe1e8;
}

.sla-tablenew tr:last-child td:first-child {
    -webkit-border-radius: 0px 0px 0px 3px;
    border-radius: 0px 0px 0px 3px;
}

.sla-tablenew thead th {
	text-align:left;
	background:#f1f4f8;
}

.about-text {
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#about-text-section {
    padding-top: 30px;
    padding-bottom: 80px;
}

#features-about-section {
    width: 100%;
    padding: 25px 0 70px;
    background-color: #e4e4e4;
}

.about-feature-inner {
    background-color: #F1F1F1;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .15);
    margin-top: 30px;
    padding: 30px;
}

.staff-icon {
    width: 120px;
    border-radius: 1000px;
    display: block;
    margin: 40px auto 10px auto;
}

.partner-icon {
    width: 120px;
    display: block;
    margin: 40px auto 10px auto;
}

.staff-name {
    font-weight: 600;
    font-size: 17px;
    text-align: center;
    color: black;
}

.staff-url {
    font-weight: 400;
    font-size: 13px;
    text-align: center;
    color: black;
}

.staff-role {
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    font-style: italic;
    font-size: 15px;
    text-align: center;
}

#meet-our-team {
    padding-top: 40px;
    padding-bottom: 75px;
}

#plans-section {
    padding: 25px 0 60px;
}

.plan-inner {
    background-color: white;
    border-radius: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: space-between;
    height: 98%;
    margin-top: 40px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .12);
    padding: 45px 30px;
}

.plan-name {
    color: #FD2F42;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.plan-price {
    font-size: 44px;
    color: black;
    font-weight: 700;
    margin: 23px 0;
    text-align: center;
}

.plan-price .dollar {
    position: relative;
    top: -15px;
    font-size: 17px;
}

.plan-price .month {
    font-size: 17px;
}

.plan-features {
    margin: 46px 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.plan-features li {
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    margin-bottom: 25px;
    margin-top: 25px;
}

.plan-btn {
    background-color: #FD2F42;
    display: block;
    width: 100%;
    transition: all .2s ease-out;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    padding: 15px 0;
    border-radius: 6.5px;
    color: white;
    font-size: 16px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, .08);
}

.plan-btn:hover {
    background-color: #ec2b3e;
    color: white;
    text-decoration: none;
}


/// Grid system
//
// Generate semantic grid columns with these mixins.

@mixin make-container($gutter: $grid-gutter-width) {
  width: 100%;
  padding-right: $gutter / 2;
  padding-left: $gutter / 2;
  margin-right: auto;
  margin-left: auto;
}


// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }
  }
}

@mixin make-row($gutter: $grid-gutter-width) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$gutter / 2;
  margin-left: -$gutter / 2;
}

@mixin make-col-ready($gutter: $grid-gutter-width) {
  position: relative;
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  padding-right: $gutter / 2;
  padding-left: $gutter / 2;
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($size / $columns);
}

@mixin make-col-auto() {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%; // Reset earlier grid tiers
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: $size / $columns;
  margin-left: if($num == 0, 0, percentage($num));
}

// Row columns
//
// Specify on a parent element(e.g., .row) to force immediate children into NN
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
  & > * {
    flex: 0 0 100% / $count;
    max-width: 100% / $count;
  }
}


// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // Allow columns to stretch full width below their breakpoints
    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }
    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      @for $i from 1 through $grid-row-columns {
        .row-cols#{$infix}-#{$i} {
          @include row-cols($i);
        }
      }

      .col#{$infix}-auto {
        @include make-col-auto();
      }

      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      .order#{$infix}-first { order: -1; }

      .order#{$infix}-last { order: $columns + 1; }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} { order: $i; }
      }

      // `$columns - 1` because offsetting by the width of an entire row isn't possible
      @for $i from 0 through ($columns - 1) {
        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
          .offset#{$infix}-#{$i} {
            @include make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}