$font-sizes: 12px 14px 16px 18px;

@for $i from 1 through length($font-sizes) {
  .text-#{$i} {
    font-size: nth($font-sizes, $i);  // Retrieves the corresponding font size from the list
  }
}


//generates
.text-1 {
  font-size: 12px;
}

.text-2 {
  font-size: 14px;
}

.text-3 {
  font-size: 16px;
}

.text-4 {
  font-size: 18px;
}

.p-mainvisual {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    &__swiper {
        transition-timing-function: linear;
        &-slide {
            position: relative;
            overflow: hidden;
            height: 100vh;
            min-height: 660px;
            img {
                width: 100%;
                height: 100%;
                object-position: top;
                object-fit: cover;
            }
        }
        .swiper-wrapper img {
            width: 100%;
          }

    }
    &__container.swiper-container {
        padding-bottom: 5px;
        position: relative;
    }

    &__progress {
        position: absolute;
        left: 0;
        bottom: 3px;
        width: 0;
        height: 8px;
        background: $brand-color;
        z-index: 70;
        transition: linear;
    }

    &__scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal {
        width: 100%;
        background: #e0eeea;
        left: 0;
        height: 6px;
        .swiper-scrollbar-drag {
            border-radius: 0;
            background-color: $brand-color;
        }
    }

    &__text {
        position: absolute;
        width: 100%;
        padding: 1rem;
        text-align: center;
        top: clamp(rem(140), 11.98vw, rem(230));
        left: 50%;
        transform: translateX(-50%);
        font-family: $font-family-noto;
        font-size: clamp(rem(50), 3.65vw, rem(70));
        font-weight: 700;
        z-index: 50;
        color: #fff;
        text-shadow: 0px 0px 3px #000;
    }

    &__buttons {
        position: absolute;
        display: flex;
        gap: 0 45px;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
    }
}

// Phone
// --------------------------------------------------
@include media-breakpoint-sp {
    .p-mainvisual {
        &__swiper {
            &-slide {
                max-height: 100vh;
                height: 138vw;
                min-height: 580px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        &__buttons {
            bottom: 5%;
            gap: 0 12px;
            flex-wrap: wrap;
            flex-direction: row-reverse;
            justify-content: center;

        }

        &__text {
            font-size: rem(32);
            top: 140px;
            // line-height: 1.3;
         }
    }
}

.p-ticker {
    width: 100%;
    .swiper-slide {
        width: auto;
    }
    &__wrapper {
        transition-timing-function: linear;
    }
    &__text {
        color: #000;
        font-size:  32px;
        font-weight: 900;
    }
}

<span class="counter-value active" data-count="100">100</span>+
if(SDB.App.exists('.sg-counter-ready')){
					$(document).ready(startCounterReady);
					flag = 1;

					function startCounterReady() {
						if ($('.sg-counter-ready').length > 0) {
							$('.sg-counter-ready').each(function () {
								var _current = $(this);
								var countDuration = 0;
								var toTop = _current.offset().top - window.innerHeight;
								if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
									_current.find('.counter-value').each(function () {
										var $this = $(this),
											countTo = $this.attr('data-count');
											countNum: $this.text();
										$({
										}).animate({
											countNum: countTo
										}, {
											duration: 1500,
											easing: 'swing',
											step: function (now) {
												$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
											},
											complete: function () {
												$this.stop();
											}
										});

										$this.removeClass('active');
									});
									countDuration = 1;
								}
							});
						}
					}
				}
				if(SDB.App.exists('.sg-counter')){
					$(window).scroll(startCounter);
					flag = 1;

					function startCounter() {
						if ($('.sg-counter').length > 0) {
							$('.sg-counter').each(function () {
								var _current = $(this);
								var countDuration = 0;
								var toTop = _current.offset().top - window.innerHeight;
								if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
									_current.find('.counter-value').each(function () {
										var $this = $(this),
											countTo = $this.attr('data-count');
											countNum: $this.text();
										$({
										}).animate({
											countNum: countTo
										}, {
											duration: 3000,
											easing: 'swing',
											step: function (now) {
												$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
											},
											complete: function () {
												$this.stop();
											}
										});

										$this.removeClass('active');
									});
									countDuration = 1;
								}
							});
						}
					}
				}

.pv-inline-form{
	.gform_body{
		padding-top: 80px;
		@media(max-width: 860px){
			padding-top: 25px;
		}
		.gform_fields{
			.gfield{
				.ginput_container{
					flex-grow: 1;
					select {
						appearance: none;
						-webkit-appearance: none;
						-moz-appearance: none;
						background-image: url('/wp-content/uploads/2023/06/arrow-down.svg');
						background-repeat: no-repeat;
						background-size: 16px;
						background-position: right center;
						padding-right: 30px;
						/* padding-left: 0; */
					}
					@media(min-width: 861px){
						select{
							text-align: center !important;
							text-align: -webkit-center !important;
							text-align-last: center;
							-webkit-text-alig-last: center;
							-moz-text-align-last: center;
							direction: ltr;
							background-position: 70% center;
						}
						input{
							text-align: center !important;
						}
					}
				}
				@media(min-width: 861px){
					label, .gfield_description{
						flex: 0 0 auto;
					}
					.gfield_description{
						font-size: 20px;
					}
					&.scta-top{
						display: inline-flex;
						//width: 33.333% !important;
						justify-content: flex-start;
						align-items: center;
						vertical-align: middle;
						gap: 10px;
						&.scta-name{
							width: 38%;
						}
						&.scta-company{
							width: 31%;
						}
						&.scta-job{
							width: 31%;
						}
					}
					&.scta-center{
						display: inline-flex;
						justify-content: flex-start;
						align-items: center;
						vertical-align: middle;
						gap: 10px;
						padding-top: 25px;
					}
					&.scta-center.scta-subject{
						width: 33.3333%;
					}
					&.scta-center.scta-message{
						width: 66.6666%;
					}
					&.scta-bottom{
						display: inline-flex;
						width: 100%;
						justify-content: flex-start;
						align-items: center;
						gap: 10px;
						vertical-align: middle;
						padding-top: 25px;
					}
					&.scta-top:not(:first-child),
					&.scta-message{
						padding-left: 10px;
					}
				}
				@media(max-width: 860px){
					display: block !important;
					width: 100% !important;
					label{
						margin-bottom: 0 !important;
					}
					.gfield_description{
						padding-top: 15px;
						font-size: 16px;
					}
					.ginput_container{
						input, select{
							padding: 15px 0 !important;
						}
					}
					&:not(:first-child){
						margin-top: 20px;
					}
				}
				&.gfield_error{
					.ginput_container{
						input, select{
							border-color: red !important;
							border: unset !important;
							border-bottom: 1px solid red !important;
						}
					}
					.gfield_validation_message{
						display: none !important;
					}
				}
			}
		}
	}
	.gform_footer{
		padding-top: 45px;
		span.fas.fa-arrow-right{
			&::before{
				@include arrow-white;
				margin-left: 10px;
			}
		}
		@media(max-width: 860px){
			padding-top: 0 !important;
		}
	}
} 

​/*=========VARIABLES DE COLOR============= - frios - calidos - escala de gris */

$aqua: #7fdbff;
$blue: #0074d9;
$navy: #001f3f;
$teal: #39cccc;
$green: #2ecc40;
$olive: #3d9970;
$lime: #01ff70;

$yellow: #ffdc00;
$orange: #ff851b;
$red: #ff4136;
$fuchsia: #f012be;
$purple: #b10dc9;
$maroon: #85144b;

$white: #ffffff;
$silver: #dddddd;
$gray: #aaaaaa;
$black: #111111;
/*=========FIN VARIABLES DE COLOR============= - frios - calidos - escala de gris */

$columns: 12!default;
$min: 10ch;
$gap: 1rem;
$maxwidth: 1200px!default;

$breakpoints: (
  small: 40em,
  medium: 65em
);

$colors: (
  primary: ( // blue
    300: 216 87% 60%,
    400: 216 87% 40%,
    500: 216 87% 20%,
  ),
  secondary: ( // purple
    300: 277 50% 60%,
    400: 277 50% 40%,
    500: 277 50% 20%,
  ),
  accent: ( // red
    300: 358 72% 70%,
    400: 358 72% 53%,
    500: 358 72% 30%,
  ),

  neutral: (
    100: 0 0% 100%,
    200: 0 0% 87%,
    300: 0 0% 80%,
    400: 0 0% 70%,
    500: 0 0% 60%,
    600: 0 0% 50%,
    700: 0 0% 40%,
    800: 0 0% 30%,
    900: 0 0% 15%,  
  )
);

$type-scale: (
  small:( // Minor third
    300: 1rem,
    400: 1.125rem,
    500: 1.563rem,
    600: 1.953rem,
    700: 2.441rem,
    800: 3.052rem
  ),
  big:( // Augmented fourth
    300: 1rem,
    400: 1.25rem,
    500: 2rem,
    600: 2.827rem,
    700: 4rem,
    800: 5.653rem
  )
);

@mixin mq($key) {

  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

@each $color,
$shade in $colors {

  @each $prop,
  $value in $shade {
    .text-#{$color}-#{$prop} {
      color: var(--clr-#{$color}-#{$prop}) !important;
    }

    .bg-#{$color}-#{$prop} {
      background-color: var(--clr-#{$color}-#{$prop}) !important;
    }
  }
}

:root {
  --section-spacing: 3.5rem;
  @include mq(medium) {
    --section-spacing: 7rem;
  }
  @each $color, $shade in $colors {

    @each $prop, $value in $shade {
      --clr-#{$color}-#{$prop}: #{$value};
    }
  }
  
  @each $screen-size, $property in $type-scale {
    @if $screen-size == small {
      @each $prop, $value in $property { 
        --fs-#{$prop}: #{$value};
      }
    } @else {
      @include mq(small) {
        @each $prop,
        $value in $property {
          --fs-#{$prop}: #{$value};
        }
      }
    }
  }
--min: #{$min};
--gap: #{$gap};
}

@mixin border($width, $style, $color) {
  border: {
    width: $width;
    style: $style;
    color: $color;
  }
}

@mixin shadow($h, $v, $b, $s, $color) {
    box-shadow: $h, $v, $b, $s, $color;
}

.border{
    @include border(1px, solid, gray);
    @include shadow(0px, 0px, 16px, 0px, rgba(0, 0, 0, 0.5));
}

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

@function sizes($i){
    @return ($i * 100% / $columns);
}

.sidebar { width: sizes(3); }

///////// GRID /////////

.container{
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}
.row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  list-style: none;
  padding: 0;
  & > * {
  flex: 1 1 var(--min);
    
    @media screen and (max-width: 40em) {
      & {flex: 0 1 100%;
        max-width: 100%;
      }
    }
    }
}



[class*="col-"] {
flex: 1 1 #{$min};
display: inline-flex;
}

@for $i from 1 through $columns {
    .col-#{$i} {
        flex: 0 0 ($i * 100% / $columns);
        max-width: ($i * 100% / $columns);
    }
}


// Inicio del sistema de columnas con breakpoint
@each $size, $screen-size in $breakpoints {
  @media all and (min-width: $screen-size) {
    @for $i from 1 through $columns {
      .col-#{$size}-#{$i*1} {
        flex: 0 0 ($i * 100% / $columns);
        max-width: ($i * 100% / $columns);
      }
    }
  }
}

​

​

// variables

    $active-brightness: 0.;
5
    $border-radius: 5px;

    $box-shadow: 2px 2px px;

    $color: #C40861;
8
    $color-accent: #8bee;

    $color-accent-hover: darken($color-accent, 10%);
10
    $color-bg: #fff;
11
    $color-bg-secondary: #e9e9e9; // border color

    $color-link: $color;

    $color-secondary: #663399;

    $color-secondary-accent: #9de90b;

    $color-shadow: #f4f4f4;

    $color-table: $color;

    $color-text: #67737a;

    $color-text-secondary: #353b3f;

​
20
.demo{padding: 1rem;}

$breakpoints: (

  xs: 0,

  sm: px,

  md: 76px,
5
  lg: 92px,
6
  xl: 00px
7
) !default;
8
​
9
// Viewports

$viewports: (

  // 'null' disable the viewport on a breakpoint
12
  sm: 510px,

  md: 700px,

  lg: 9px,

  xl: 1130px

) !default;

​

$color-blossom: #1d7484;

$color-fade: #982c61;
20
​

$color-bg: #f9f9f9;

// ⚡️ Flash Grid - Lightweight CSS Grid

​

.base {

  background: #fff    url("data:image/gif;base4,R0lGODlhwAMBAIAAAP/////lSH5BAAHAPALAAAAADAAwEAAAI3hI+hy+0Po2yo2jqz3vJ6zIXiJXAiKaL+amuyHrvrMUXjUe2lffUnvAJgUFhj3gw+pAG5fFTAAA")
5
    repeat-y center;
6
}
7
​
8
.child {
9
  background-color: rgba(5, 28, 48, 25%);

  border: 1px solid crimson;

  height: 4rem;

  display: grid;

  place-content: center;

}

​
16
$font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,

  Noto Sans, sans-serif;

// sizes

$columns:  !default;

$maxWidth: 1rem !default;

$gutter: 1rem !default;

​

*,

*::after,

*::before {

  box-sizing: box;

}

​
12
.demo {

  box-sizing: border-box;

  background-color: rgba(red, %);
15
  outline: 1px solid crimson;

  padding: 1rem;

  display: grid;

  place-content: center;

  color: red;
20
}

​

.container {

// solve css min problem ...

​

$breakpoints: (

  xs: 0,

  sm: 40px,
6
  md: 24px,

  lg: 00px,

  xl: 40px

);
10
​

$gap: (
12
  xs: 0,

  sm: 8px,
14
  md: px,

  lg: 24px,
16
  xl: 28px

) !default;

​

.wrapper {

  width: min(100% - 2rem, 1280px);

  margin-inline: auto;

}

$columns: 1 !default;
2
​

$breakpoints: (

  xs: 0,

  sm: 40px,
6
  md: 24px,

  lg: 0px
8
);

​
10
.demo{

  display: grid;
12
  place-content: center;

  background: #111;

  color: white;

  padding: 1rem;

}

​

@mixin breakpoint($size) {

  @media (min-width: map-get($breakpoints, $size)) {

    @content;

  }

}

// Breakpoints

// 'null' disable the breakpoint

$breakpoints: (

  xs: 0,

  sm: 5px,
6
  md: 76px,
7
  lg: 92px,
8
  xl: 00px
9
) !default;

​

$space-s-l: clamp(1rem, calc(-0.rem + 3.vw), 2.25rem);
12
$space-xl-2xl: clamp(3rem, calc(1.62rem + 3.85vw), 4.5rem);

​

$grid-max-width: 69.75rem;
15
$grid-gutter: var($space-s-l, clamp(1rem, calc(-0.33rem + 3.7vw), 2.25rem));

$grid-columns: 12;

​

$grid-12: repeat(12, minmax(0, 1fr));

$grid-page-width: map-get($breakpoints, "xl");

$grid-page-gutter: 5vw;
21
$grid-page-main: 2 / 3;

/* Media Queries */

$small: screen and (min-width: 0em);

$medium: screen and (min-width: 40em) and (max-width: 4em);
4
$large: screen and (min-width: em);
5
​
6
@mixin for-size($size) {
7
  @if $size == small {

    @media screen and (min-width: 40rem) { @content; }

  } @else if $size == medium {

    @media screen and (min-width: 64em) { @content; }

  } @else if $size == large {

    @media screen and (min-width: 75em) { @content; }

  }  

}

​

/*

// usage

.my-box {

  padding: 10px;

/* Mixin

–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* 

​

/* Media Queries */

@mixin breakpoint($size) {

  @if $size == small {

    @media screen and (max-width: 40em) {

      @content;

    }

  } @else if $size == medium {

    @media screen and (min-width: 40em) and (max-width: 60em) {

      @content;

    }

  } @else if $size == large {

    @media screen and (min-width: 60em) {

      @content;

    }

  }

}

/*

||||||||||||||||

|||||GRIDER|||||

||||||||||||||||

@github https://github.com/codeforms/Grider

*/

​

/******************** 

ENABLE / DISABLE FEATURES ********************/

$equal-feature: true;

$offset-feature: true;

​

/******************** 

BASIC ********************/

$grid: 12;

$gutter: 6px;

​

/******************** 

NAMING ********************/

$row: "row";

$columns: 1 !default;
2
$gap: 1rem !default;

$enable-cssgrid: true !default;

$enable-offset-grid: false !default;

// Grid breakpoints

//

// Define the maximum dimensions at which your layout will change,

// adapting to different screen sizes, for use in media queries.

$breakpoints: (

  xs: 0px,

  sm: 480px,

  md: 960px,

  lg: 1280px,

  xl: 1440px

) !default;

​

// Grid widths

$grid-widths: (

  sm: 640px,

  md: 1024px,

// variables

$size-container: .333rem !default;
3
$col-padding: 0.37rem !default;

$cols:  !default;
5
$gutter-x: $col-padding;

$gutter-y: 0;
7
​

// mediaqueries
9
​

// breakpoint del sistema de columna

$mq: (
12
  xs: 0,

  sm: 576px,

  md: 768px,

  lg: 992px,

  xl: 10px,

  xxl: 1400px

)!default;

​
20
$sizes: 0, 576px, 768px, 992px, 1200px, 1400px;

​

@mixin make-container{

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =====================================================
    Some defaults across all toggle demos
    ===================================================== */

.toggle {
    display: block;
    text-align: center;
    margin-top: 40px;
    user-select: none;
}
    .toggle--checkbox {
    display: none;
    }
    .toggle--btn {
        display: block;
        margin: 0 auto;

        font-size: 1.4em;

        transition: all 350ms ease-in;

        &:hover {
            cursor: pointer;
        }
    }

    .toggle--btn,
    .toggle--checkbox,
    .toggle--feature {
        &,
        &:before,
        &:after {
            transition: all 250ms ease-in;
        }
        &:before,
        &:after {
            content: '';
            display: block;
        }
    }

    $toggleHeight: 70px;
    $toggleWidth: 125px;
    $borderWidth: 5px;
    $toggleBtnRadius: $toggleHeight - 14px;

    $bgColor--night: #3c4145;
    $borderColor--night: #1c1c1c;
    $toggleBtn-bgColor--night: #fff;
    $toggleBtn-borderColor--night: #e3e3c7;

    $bgColor--day: #9ee3fb;
    $borderColor--day: #86c3d7;
    $toggleBtn-bgColor--day: #ffdf6d;
    $toggleBtn-borderColor--day: #e1c348;

    $cloud-borderColor: #d3d3d3;
    $cloud-bgColor: #fff;

    .toggle--daynight,
    .toggle--like {
        .toggle--btn {
            position: relative;
            height: $toggleHeight;
            width: $toggleWidth;
            border-radius: $toggleHeight;

            //toggle button
            &:before {
                position: absolute;
                top: 2px;
                left: 4px;
                width: $toggleBtnRadius;
                height: $toggleBtnRadius;
                border-radius: 50%;
            }
        }
    }

    .toggle--daynight {
        .toggle--btn {
            border: $borderWidth solid $borderColor--night;
            background-color: $bgColor--night;

            //toggle button
            &:before {
                background-color: $toggleBtn-bgColor--night;
                border: $borderWidth solid $toggleBtn-borderColor--night;
            }
            &:after {
                position: absolute;
                top: 62%;
                left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 20px;
                z-index: 10;
                width: $toggleBtnRadius / 5;
                height: $toggleBtnRadius / 5;
                opacity: 0;
                background-color: $cloud-bgColor;
                border-radius: 50%;

                //crazy ass box-shadow to make the cloud
                box-shadow: $cloud-bgColor 0 0,
                            $cloud-bgColor 3px 0,
                            $cloud-bgColor 6px 0,
                            $cloud-bgColor 9px 0,
                            $cloud-bgColor 11px 0,
                            $cloud-bgColor 14px 0,
                            $cloud-bgColor 16px 0,
                            $cloud-bgColor 21px -1px 0 1px,
                            $cloud-bgColor 16px -7px 0 -2px,
                            $cloud-bgColor 7px -7px 0 1px,

                            $cloud-borderColor 0 0 0 4px,
                            $cloud-borderColor 6px 0 0 4px,
                            $cloud-borderColor 11px 0 0 4px,
                            $cloud-borderColor 16px 0 0 4px,
                            $cloud-borderColor 21px -1px 0 5px,
                            $cloud-borderColor 16px -7px 0 1px,
                            $cloud-borderColor 7px -7px 0 5px;

                transition: opacity 100ms ease-in;
            }
        }

        @keyframes starry_star {
            50% {
                background-color: rgba(255,255,255,0.1);
                box-shadow: #fff 30px -3px 0 0,
                            #fff 12px 10px 0 -1px,
                            rgba(255,255,255,0.1) 38px 18px 0 1px,
                            #fff 32px 34px 0 0,
                            rgba(255,255,255,0.1) 20px 24px 0 -1.5px,
                            #fff 5px 38px 0 1px;
            }
        }
        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(.3);
            }
            50% {
                opacity: 100;
                transform: scale(1.1);
            }
            55% {
                transform: scale(1.1);
            }
            75% {
                transform: scale(.9);
            }
            100% {
                opacity: 100;
                transform: scale(1);
            }
        }
        //stars
        .toggle--feature {
            display: block;
            position: absolute;
            top: 9px;
            left: 52.5%;
            z-index: 20;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #fff;

            box-shadow: rgba(255,255,255,0.1) 30px -3px 0 0,
                        rgba(255,255,255,0.1) 12px 10px 0 -1px,
                        #fff 38px 18px 0 1px,
                        rgba(255,255,255,0.1) 32px 34px 0 0,
                        #fff 20px 24px 0 -1.5px,
                        rgba(255,255,255,0.1) 5px 38px 0 1px;

            animation: starry_star 5s ease-in-out infinite;

            &:before {
                position: absolute;
                top: -2px;
                left: -25px;
                width: 18px;
                height: 18px;
                background-color: $toggleBtn-bgColor--night;
                border-radius: 50%;
                border: 5px solid $toggleBtn-borderColor--night;

                box-shadow: $toggleBtn-borderColor--night -28px 0 0 -3px,
                            $toggleBtn-borderColor--night -8px 24px 0 -2px;

                transform-origin: -6px 130%;
            }
        }

        //what happens once checkbox is checked
        .toggle--checkbox:checked {
                & + .toggle--btn {
                background-color: $bgColor--day;
                border: $borderWidth solid $borderColor--day;

                &:before {
                    left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 4px;
                    background-color: $toggleBtn-bgColor--day;
                    border: $borderWidth solid $toggleBtn-borderColor--day;
                }
                &:after {
                    opacity: 100;
                    animation-name: bounceIn;
                    animation-duration: 0.60s;
                    animation-delay: 0.10s;
                    animation-fill-mode: backwards;
                    animation-timing-function: ease-in-out;
                }

                > .toggle--feature {
                    opacity: 0;
                    box-shadow: rgba(255,255,255,0.1) 30px -3px 0 -4px,
                                rgba(255,255,255,0.1) 12px 10px 0 -5px,
                                #fff 38px 18px 0 -3px,
                                rgba(255,255,255,0.1) 32px 34px 0 -4px,
                                #fff 20px 24px 0 -5.5px,
                                rgba(255,255,255,0.1) 5px 38px 0 -3px;
                    animation: none;

                    &:before {
                        left: 25px;
                        transform: rotate(70deg);
                    }
                }
            }
        }
    }

// CSS variables for colors
:root {
  // Brand color pool
  --color-mine-shaft: 
#303030;
  --color-black: var(--color-mine-shaft);
  --color-black-rock: 
#2b303c;
  --color-blue-chalk: 
#ece6f2;
  --color-east-bay: 
#545773;
  --color-pattens-blue: 
#eaf1f8;
  --color-scorpion: 
#5f5f5f;
  --color-valhalla: 
#2a2d3e;
  --color-white: 
#fff;
  --color-grass-green: 
#2fc96d;
  --color-cobalt-blue: 
#603dff;
  --color-persian-blue: 
#3418b4;
  --color-cobalt-blue-light: 
#eeebff;
  --color-imperial-red: 
#ea5e6e;
  --color-mustard-yellow: 
#fcca3d;
  --color-beige: 
#f5f3ee;
  --color-dark-beige: 
#e4e2d7;
  --color-pitch: 
#000;
  --color-silver-chalice: 
#a9a9a9;

  // Main element colors
  --color-heading: var(--color-black);
  --color-main: var(--color-cobalt-blue);
  --color-paragraph: var(--color-black);
}

#textexample {
  background: -webkit-linear-gradient(203.89deg, #FF0000 15.35%, #FF9900 99.34%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@mixin most-outer-selector($new-class) {
  $current-selector: &;
  $new-selector: [];

  @each $item in $current-selector {
    $first-item: nth($item, 1);

    $appended-item: $first-item + $new-class;

    $new-item: set-nth($item, 1, $appended-item);
    $new-selector: append($new-item, $new-selector);
  }

  @at-root #{$new-selector} {
    @content;
  }
}

.parent {
  // some CSS rules
  .child {
    // some CSS rules
    span {
      // some CSS rules
      @include most-outer-selector('.bold') {
        font-weight: bold;
      }
    }
  }
}

:root {
  --centered: {
    display: flex;
    align-items: center;
    justify-content: center;
  };
}

.centered {
  @apply --centered;
}

a {
  /* Adjustments */
  color: color(red alpha(-10%));
  color: color(red tint(-10%));    /* lighten */
  color: color(red shade(-10%));   /* darken */

  /* Absolute */
  color: color(red alpha(50%));
  color: color(red hue(225));
  color: color(red saturation(100%));
  color: color(red lightness(50%));

  color: gray(33);       /* rgb(33, 33, 33) */
  color: gray(33%);      /* rgb(84, 84, 84) */
  color: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */
  color: #0000ff80;      /* rgba(0, 0, 255, 0.5) */

  color: hwb(90, 0%, 0%, 0.5);     /* like hsl() but easier for humans */
  color: hsl(90deg 90% 70%);       /* hsl(180, 90%, 70%) -- supports deg */
  color: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */
  color: rgb(30 60 90 / 30%);      /* rgba(30, 60, 90, 0.3) */
}

body {
  background: var(--text-color);
  background: color(var(--text-color) shade(30%));
}

:root {
  --text-color: #30333a;
}

@mixin text($font-size,$color,$bg-color) {

     // we pass the $font-size to font-size property
    font-size: $font-size;
    
    // we pass the $color to color property
    color: $color;
    
    // we pass the $bg-color to background property
    background: $bg-color;
}



.text1 {
          // ($font-size,$color,$bg-color)
    @include text(3rem,green , black)
}

.text2 {
          // ($font-size,$color,$bg-color)
    @include text(5em,red , transparent)
}

/// Shorthand mixin for offset positioning
/// @param {String} $position - Either `relative`, `absolute` or `fixed`
/// @param {Length} $top [null] - Top offset
/// @param {Length} $right [null] - Right offset
/// @param {Length} $bottom [null] - Bottom offset
/// @param {Length} $left [null] - Left offset
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

/// Computes a top-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function top-shadow($depth) {
  $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
  $blur: nth(1.5 3 10 14 19, $depth) * 4px;
  $color: rgba(black, nth(.12 .16 .19 .25 .30, $depth));

  @return 0 $primary-offset $blur $color;
}

/// Computes a bottom-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function bottom-shadow($depth) {
  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
  $blur: nth(1 3 3 5 6, $depth) * 4px;
  $color: rgba(black, nth(.24 .23 .23 .22 .22, $depth));

  @return 0 $primary-offset $blur $color;
}

/// Gives a card depth effect.
/// @param {Number} $depth - depth level (between 1 and 5)
/// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
/// @requires {function} top-shadow
/// @requires {function} bottom-shadow
@mixin card($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {
    box-shadow: bottom-shadow($depth), top-shadow($depth);  
  }
}

@mixin color-weight ($class, $base-color, $weight: 4) {
  $bg-color: null;

  @for $i from 1 through 8 {
    @if $i < 4 {
      $weight: $weight - 1;
      $bg-color: lighten($base-color, $weight * 10%);
    } @else if $i == 4 {
      $weight: 0;
      $bg-color: $base-color;
    } @else {
      $weight: $weight + 1;
      $bg-color: darken($base-color, $weight * 10%);
    }

    .#{$class}-#{$i} { background-color: $bg-color; }
  }
}

@include color-weight(bg-blue, #1483ff);
@include color-weight(mad, red);

@media screen and (min-width:767px) {

[data-current-styles*='"customContentWidth": 49'].horizontal-alignment--left {
  .section-background {
  
    width:50% !important;
    z-index:1 !important;
    overflow:visible;
  }
  
  .section-background-overlay {
    opacity:1 !important;
    left:100%;
    right:-100%;
  }
  
   .content-wrapper {
     width: 50%;
     margin-left: 50% !important;
     box-sizing: border-box;
     z-index:1;
  }
  
  .content {
    width:100% !important;
  }
}
  
}

@media screen and (min-width:767px) {

[data-current-styles*='"customContentWidth": 49'].horizontal-alignment--right {
  .section-background {
  
    width:50% !important;
    left:50%;
    z-index:1 !important;
    overflow:visible;
  }
  
  .section-background-overlay {
    opacity:1 !important;
    left:-100%;
    right:100%;
  }
  
   .content-wrapper {
     width: 50%;
     margin-left: 0% !important;
     box-sizing: border-box;
     z-index:1;
  }
  
  .content {
    width:100% !important;
  }
}
  
}

// Full Width Image Card - Page Section //

[data-section-id="012345"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: auto !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}}

// Full Width Image Card - Text Padding //
  
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 40px !important;
}

//If you wish to apply this on both desktop and mobile
#blockID {
  max-width:150px;
  margin:auto;
}

//If you wish to apply this on mobile only
@media screen and (max-width:767px) {

#blockID {
  max-width:150px;
  margin:auto;
}

}

//FOR THE PRE STYLE MONOCODE FONT IN SS ONLY ONLY
[data-section-id="605471fe6055c808f219a123"] pre { 
    margin-bottom: 0px;
    margin-top: 0;
    transform: rotate(
-90deg);
    transform-origin: top left;
    position: absolute;
    width: 200px;
    bottom: -100px;
}
//IS THERE WHERE DOES THIS GO IN THE SCSS??
.sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3) {
    word-wrap: break-word;
}

/// Apply `$function` with `$args` to each item from `$list`.
/// @author Kitty Giraudel
/// @param {List} $list - List of items
/// @param {String} $function - Function to apply to every item from `$list`
/// @param {Arglist} $args - Extra arguments to pass to `$function`
/// @return {List}
/// @throw There is no `#{$function}` function.
@function walk($list, $function, $args...) {
  @if not function-exists($function) {
    @error "There is no `#{$function}` function.";
  }
  
  @for $i from 1 through length($list) {
    $list: set-nth($list, $i, call($function, nth($list, $i), $args...));
  }
  
  @return $list;
}

@mixin light-mode {
	@media (prefers-color-scheme: light) {
      @content;
    }
}

@mixin animete-reduce {
  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-delay: 0s !important;
      transition-duration: 0s !important;
    }
  }
}

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

@function rem-calc($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

html,

body {

  width: 0%;

  height: 100%;

  display: flex;

}

​

.wrapper {

  position: relative;
10
  margin: auto;

}

​

.cyclist {

  width: 48px;

  height: 48px;

  position: absolute;

  transform: translateY(-50%);  // position the rider above the curve. could be done with offset-position but it has no browser support yet

  offset-path: path("M1 260C65.034 260.999 102.054 253.632 130.069 241.15C158.083 228.668 177.093 244.645 1.612 258.125C246.13 271.606 296.157 293.574 342.181 258.125C388.6 222.677 405.715 140.297 479.754 139.798C553.793 139.298 591.313 207.699 667.854 258.125C744.395 308.552 782.416 287.783 802.425 269.608C846.949 229.167 924.49 109.841 943 1");

  animation: ride-hills 10s ease-in infinite;
20
}
21
​

.iframe-container {
      // overflow: hidden;
      // /* 16:9 aspect ratio */
      // padding-top: 56.25%;
      // position: relative;
      width: 100%;
      padding-top: 100%;
      position: relative;
      iframe {
         // border: 0;
         // height: 100%;
         // left: 0;
         // position: absolute;
         // top: 0;
         // width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
    }

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}