Add arrow to go down on slideshow

Tourist
14 0 1

Hi,

When people are on my full screen slide show, they don't understand they can swipde down.
I would like to add <Icon type="down-circle" /> on this slide show. Where should I put the code ?


I put an arrow in the slideshow image, but of course it doesn't fit with all screens !

 

chrome_HTrEsDtlFL.jpg

Thanks in advance,
Hecho a Mano

0 Likes

Hello 

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Shopify Partner
455 80 98

@Hechoamano 

 

What theme you are using and share also please live url of the site, if it is possible.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Tourist
14 0 1

Hello @oscprofessional , @sarhov ,

 

The theme is Brooklyn
The URL is https://www.hechoamano.fr/

Hecho a Mano

0 Likes
Shopify Partner
455 80 98

@Hechoamano 

 

Go into Edit Code...

Open/Search theme.scss.liquid file

scroll at the very bottom and past the following code.

#Hero::before {
    content: '';
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: url("data&colon;image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiBjbGFzcz0iIj48Zz48cGF0aCBkPSJtMjU2IDUxMmMtNjguMzc4OTA2IDAtMTMyLjY2Nzk2OS0yNi42Mjg5MDYtMTgxLjAxOTUzMS03NC45ODA0NjktNDguMzUxNTYzLTQ4LjM1MTU2Mi03NC45ODA0NjktMTEyLjY0MDYyNS03NC45ODA0NjktMTgxLjAxOTUzMXMyNi42Mjg5MDYtMTMyLjY2Nzk2OSA3NC45ODA0NjktMTgxLjAxOTUzMWM0OC4zNTE1NjItNDguMzUxNTYzIDExMi42NDA2MjUtNzQuOTgwNDY5IDE4MS4wMTk1MzEtNzQuOTgwNDY5czEzMi42Njc5NjkgMjYuNjI4OTA2IDE4MS4wMTk1MzEgNzQuOTgwNDY5YzQ4LjM1MTU2MyA0OC4zNTE1NjIgNzQuOTgwNDY5IDExMi42NDA2MjUgNzQuOTgwNDY5IDE4MS4wMTk1MzFzLTI2LjYyODkwNiAxMzIuNjY3OTY5LTc0Ljk4MDQ2OSAxODEuMDE5NTMxYy00OC4zNTE1NjIgNDguMzUxNTYzLTExMi42NDA2MjUgNzQuOTgwNDY5LTE4MS4wMTk1MzEgNzQuOTgwNDY5em0wLTQ3MmMtMTE5LjEwMTU2MiAwLTIxNiA5Ni44OTg0MzgtMjE2IDIxNnM5Ni44OTg0MzggMjE2IDIxNiAyMTYgMjE2LTk2Ljg5ODQzOCAyMTYtMjE2LTk2Ljg5ODQzOC0yMTYtMjE2LTIxNnptMTM4LjI4NTE1NiAxODItMjguMjg1MTU2LTI4LjI4NTE1Ni0xMTAgMTEwLTExMC0xMTAtMjguMjg1MTU2IDI4LjI4NTE1NiAxMzguMjg1MTU2IDEzOC4yODUxNTZ6bTAgMCIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCIgZmlsbD0iI0ZGRkZGRiIvPjwvZz4gPC9zdmc+Cg==");
        background-size: auto;
    background-color: #9c0;
    z-index: 99;
    background-size: 50px;
}

Final result should be like the following screenshot:

 

A2SoXUj

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Tourist
14 0 1

Thanks @sarhov,

 

Thanks very much for you reply.
Sadly, I have only a green square in the position.
Do you have an idea why it is working on you device and not mine ?

chrome_2019-06-30_18-23-14.jpg

0 Likes
Shopify Partner
455 80 98

@Hechoamano 

 

Please do the same steps, but use this updated code, there was an typo there.

#Hero::before {
    content: '';
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: url("data&colon;image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiBjbGFzcz0iIj48Zz48cGF0aCBkPSJtMjU2IDUxMmMtNjguMzc4OTA2IDAtMTMyLjY2Nzk2OS0yNi42Mjg5MDYtMTgxLjAxOTUzMS03NC45ODA0NjktNDguMzUxNTYzLTQ4LjM1MTU2Mi03NC45ODA0NjktMTEyLjY0MDYyNS03NC45ODA0NjktMTgxLjAxOTUzMXMyNi42Mjg5MDYtMTMyLjY2Nzk2OSA3NC45ODA0NjktMTgxLjAxOTUzMWM0OC4zNTE1NjItNDguMzUxNTYzIDExMi42NDA2MjUtNzQuOTgwNDY5IDE4MS4wMTk1MzEtNzQuOTgwNDY5czEzMi42Njc5NjkgMjYuNjI4OTA2IDE4MS4wMTk1MzEgNzQuOTgwNDY5YzQ4LjM1MTU2MyA0OC4zNTE1NjIgNzQuOTgwNDY5IDExMi42NDA2MjUgNzQuOTgwNDY5IDE4MS4wMTk1MzFzLTI2LjYyODkwNiAxMzIuNjY3OTY5LTc0Ljk4MDQ2OSAxODEuMDE5NTMxYy00OC4zNTE1NjIgNDguMzUxNTYzLTExMi42NDA2MjUgNzQuOTgwNDY5LTE4MS4wMTk1MzEgNzQuOTgwNDY5em0wLTQ3MmMtMTE5LjEwMTU2MiAwLTIxNiA5Ni44OTg0MzgtMjE2IDIxNnM5Ni44OTg0MzggMjE2IDIxNiAyMTYgMjE2LTk2Ljg5ODQzOCAyMTYtMjE2LTk2Ljg5ODQzOC0yMTYtMjE2LTIxNnptMTM4LjI4NTE1NiAxODItMjguMjg1MTU2LTI4LjI4NTE1Ni0xMTAgMTEwLTExMC0xMTAtMjguMjg1MTU2IDI4LjI4NTE1NiAxMzguMjg1MTU2IDEzOC4yODUxNTZ6bTAgMCIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCIgZmlsbD0iI0ZGRkZGRiIvPjwvZz4gPC9zdmc+Cg==");
    z-index: 99;
    background-size: 50px;
}

Let me know if  now it works.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Tourist
14 0 1

Hello @sarhov ,


I tried that withot suucces.
I also tried with another backgrounf: url(...) with a png file but it didn't work.

Thanks for your time !

0 Likes
Shopify Partner
455 80 98

You are doing something wrong... add me as collaborator, I will check it, you can use shopify@sarhov.com

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Highlighted
Tourist
14 0 1

I don't know how to add collaborator.
I also tried with this one:

.container {
	display: flex;
	background-color: #26a1ff;
	height: 100vh;
}

.container-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto auto 1rem auto;
}

.text-label {
	text-transform: uppercase;
	font-family: helvetica;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: #fff;
}

.arrow-circle-down {
	display: block;
	width: 40px;
	height: 40px;
	margin: 16px 0;
	/*fill: #fff;*/
}

.bounce {
	-webkit-animation: bounce 2s;
	        animation: bounce 2s;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
	0%,
	25%,
	50%,
	75%,
	100% {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
	60% {
		-webkit-transform: translateY(-12px);
		        transform: translateY(-12px);
	}
}

@keyframes bounce {
	0%,
	25%,
	50%,
	75%,
	100% {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
	60% {
		-webkit-transform: translateY(-12px);
		        transform: translateY(-12px);
	}
}
With your kind solution the end of my  theme.scss.liquid file is like:
/*================ Rich text section ================*/
.rich-text {
  .section-header {
    margin-bottom: $gutter / 2.5;
  }
}

.rich-text__heading--large {
  font-size: em(floor($headerBaseFontSize * 1.2));
}
.rich-text__heading--small {
  font-size: em(floor($headerBaseFontSize * 0.8));
}

.rich-text__text--large {
  font-size: em(floor($baseFontSize * 1.2));
}
.rich-text__text--small {
  font-size: em(floor($baseFontSize * 0.925));
}

/*================ Modules | Theme collection grid item ================*/
.collection-collage__item {
  overflow: hidden;
}

.collection-collage__item-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;

  .collection-grid__item-overlay {
    position: relative;
    @include transition(all 0.8s ease);

    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0.25;
      background-color: #000;
      @include transition(all 0.8s ease);
    }

    &:hover,
    &:focus {
      @include transform(scale(1.03));

      &:after {
        opacity: 0.5;
      }
    }
  }
}

.collection-grid__item-link {
  display: block;
  width: 100%;
  height: 100%;
}

.collection-grid__item-overlay {
  display: block;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.collection-grid__item-title--wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  display: table;
  table-layout: fixed;
  color: #fff;
  cursor: pointer;

  .collection-grid__item-title {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
  }
}

.custom-content {
  @include display-flexbox;
  @include align-items(stretch);
  @include flex-wrap(wrap);
  width: auto;
  margin-bottom: -$gridGutter;
  margin-left: -$gridGutter;

  @include at-query($max, $small) {
    margin-bottom: -$gridGutterMobile;
    margin-left: -$gridGutterMobile;
  }
}

.custom__item {
  @include flex(0 0 auto);
  margin-bottom: $gridGutter;
  padding-left: $gridGutter;
  max-width: 100%;

  @include at-query($max, $small) {
    @include flex(0 0 auto);
    padding-left: $gridGutterMobile;
    margin-bottom: $gridGutterMobile;

    &.small--one-half {
      @include flex(1 0 50%);
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.custom__item-inner {
  position: relative;
  display: inline-block;
  text-align: left;
  max-width: 100%;
}

.custom__item-inner--video,
.custom__item-inner--html {
  display: block;
}

/*================ Flex item alignment ================*/
.align--top-middle {
  text-align: center;
}

.align--top-right {
  text-align: right;
}

.align--middle-left {
  @include align-self(center);
}

.align--center {
  @include align-self(center);
  text-align: center;
}

.align--middle-right {
  @include align-self(center);
  text-align: right;
}

.align--bottom-left {
  @include align-self(flex-end);
}

.align--bottom-middle {
  @include align-self(flex-end);
  text-align: center;
}

.align--bottom-right {
  @include align-self(flex-end);
  text-align: right;
}

.featured-blog__post,
.featured-blog__meta,
.title--one-post {
  margin-bottom: $gridGutter * 1.75;

  @include at-query($max, $small) {
    margin-bottom: $gridGutterMobile * 1.75;
  }
}

.featured-blog__author {
  display: inline-block;
  font-style: italic;
  line-height: 1.7;

  &:after {
    content: '\2022';
    margin: 0 5px;
  }
}

.featured-blog__date {
  display: inline-block;
}

.article__heading-link {
  color: $colorHeadings;
}

.map-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: $gutter * 3 0;
  @include display-flexbox();
  @include align-items(center);
  @include flex-wrap(wrap);
  @include flex-direction(row);

  @include at-query($max, $medium) {
    min-height: auto;
    padding: 0 $gutter;
    margin-top: $gutter * 1.5;
  }

  @include at-query($max, $small) {
    padding: 0 $gutter * 0.5;
  }

  .shopify-section:first-child & {
    margin-top: -110px;

    @include at-query($max, $medium) {
      margin-top: inherit;
    }
  }
}

.map-section__wrapper {
  height: 100%;
  flex-shrink: 0;
  flex-grow: 1;
  @include flex-basis(100%);
  @include display-flexbox();
  @include flex-wrap(wrap);
  @include flex-direction(row);

  @include at-query($max, $medium) {
    padding: 0;
  }
}

.map-section--load-error {
  height: auto;
}

.map-section__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
}

.map-section__error {
  position: relative;
  z-index: 3;

  @include at-query($max, $medium) {
    position: absolute;
    margin: 0 2rem;
    top: 50%;
    @include transform(translateY(-50%));
  }
}

.map-section__content-wrapper {
  position: relative;
  text-align: center;
  height: 100%;
  @include display-flexbox();
  flex-grow: 0;
}

.map-section__content {
  position: relative;
  display: inline-block;
  background-color: $colorBody;
  padding: $section-spacing-small;
  width: 100%;
  text-align: center;
  z-index: 3;
  @include display-flexbox();
  @include align-items(center);
  @include flex-wrap(wrap);
  min-height: 350px;

  // Make sure every children is on one line
  & > * {
    width: 100%;
  }

  @include at-query($max, $medium) {
    background-color: $colorNewsletter;
    min-height: auto;
    display: block;
  }

  .map-section--load-error & {
    position: static;
    transform: translateY(0);
  }
}

.map-section__link {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  max-width: none;
  width: 100%;
  height: 100%;
  z-index: 2;
  @include transform(translateX(-50%));
}

// Optically center map in visible area with
// extended height/widths and negative margins
.map-section__container {
  position: absolute;
  height: 100%;
  min-height: auto;
  left: 0;
  top: 0;
  // map is centered on resize, larger widths allow pin to be off-center
  width: 130%;

  @include at-query($max, $medium) {
    position: relative;
    max-width: $siteWidth;
    width: 100%;
    height: 55vh;
  }

}

.map_section__directions-btn {
  [class^="icon"] {
    height: 1em;
  }

  * {
    vertical-align: middle;
  }
}

.map-section__background-wrapper {
  @include flex-basis(100%);
  flex-grow: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  @include at-query($max, $medium) {
    overflow: hidden;
    position: relative;
    @include flex-basis(100%);
  }

  .map-section--onboarding & {
    min-height: 350px;
  }

  .placeholder-background {
    height: 100%;
  }

  .js {
    .no-js & {
      @include visuallyHidden();
    }
  }
}

.map-section__image {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  @include at-query($max, $medium) {
    position: relative;
  }

  // Only show the background image if map fails to load
  .map-section--display-map & {
    display: none !important;
  }

 .map-section--load-error & {
    display: block !important;
  }
}

// Hide Google maps UI
.gm-style-cc,
.gm-style-cc + div {
  visibility: hidden;
}

.flex--third {
  @include flex-basis(33%);

  @include at-query($max, $medium) {
    @include flex-basis(100%);
  }
}

// Section padding
.index-newsletter-section + .index-map-section{
  margin-top: 0;
}

.index-map-section + .index-newsletter-section {
  margin-top: -60px;

  @include at-query($max, $medium) {
    margin-top: $gutter;
  }
}


/*================ View-specific styles ================*/
/*================ Templates | Theme Blog ================*/
.article {
  margin-bottom: -($gutter / 2);
}

.article__featured-image-wrapper {
  position: relative;

  .no-js & {
    @include visuallyHidden();
  }
}

.article__featured-image {
  display: block;
  margin: 0 auto;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
}

.article__featured-image-link {
  display: block;
  margin-bottom: $gutter;
}

/*================ RSS ================*/
.rss-link {
  font-size: 0.6em;
}

/*================ Comments ================*/
.comment.last {
  margin-bottom: -($gutter / 2);
}

/*============= Templates | Password page =============*/

.template-password {
  height: 100vh;
  text-align: center;
}

.password-page__wrapper {
  display: table;
  height: 100%;
  width: 100%;

  @if $passwordPageUseBgImage {
    background-image: url({{ "password-page-background.jpg" | asset_url }});
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
  } @else {
    color: $colorTextBody;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @if $passwordPageUseBgImage {
      color: #ffffff;
    } @else {
      color: $colorTextBody;
    }
  }

  a {
    color: inherit;
  }

  hr {
    @if $passwordPageUseBgImage {
      border-color: inherit;
    } @else {
      border-color: $colorBorder;
    }
  }

  .rte a:hover {
    color: $colorSecondary;
    border-bottom: 1px solid $colorSecondary;
  }

  .social-sharing.clean a {
    color: inherit;
    background: transparent;
  }
}

.password-header-section {
  display: table-row;
}

.password-page__header {
  display: table-cell;
  height: 1px;
}

.password-page__header__inner {
  padding: ($gutter / 2) $gutter;
}

.password-page__logo {
  margin-top: 3 * $gutter;

  .logo {
    max-width: 100%;
  }
}

.password-page__main {
  display: table-row;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.password-page__main__inner {
  display: table-cell;
  vertical-align: middle;
  padding: ($gutter / 2) $gutter;
}

.password-page__hero {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
  font-size: em(42px);
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;

  @include at-query($min, $postSmall) {
    font-size: em(60px);
  }

  @include at-query($min, $large) {
    font-size: em(64px);
  }
}

.password-page__message {
  font-style: italic;
  font-size: 120%;

  img {
    max-width: 100%;
  }
}

.password-page__hr {
  margin: $gutter auto;
}

.password-page__message,
.password-page__login-form,
.password-page__signup-form {
  max-width: 500px;
  margin: 0 auto;
}

.password-page__login-form {
  text-align: center;
  padding: $gutter;
}

.password-page__login-form,
.password-page__signup-form {
  @include at-query($min, $small) {
    padding: 0 $gutter;
  }

  .input-group {
    width: 100%;
  }

  .errors ul {
    list-style-type: none;
    margin-left: 0;
  }
}

.password-page__signup-form__heading {
  margin-bottom: 0.8em;
}

.password-page__social-sharing {
  margin-top: $gutter;
}

.password-page__social-sharing__heading {
  margin-bottom: 0;
}

.password-login,
.admin-login {
  margin-top: $gutter / 2;
  a:hover {
    color: inherit;
  }
}

.password-login {
  @include accentFontStack;
  font-size: em(0.8 * $baseFontSize);
  line-height: 0.8 * $baseFontSize;
}

.lock-icon-svg {
  width: 0.8 * $baseFontSize;
  height: 0.8 * $baseFontSize;
  display: inline-block;
  vertical-align: baseline;

  path {
    fill: currentColor;
  }
}

.admin-login {
  font-size: 95%;
}

.password-page__footer {
  display: table-row;
  height: 1px;
}

.password-page__footer_inner {
  display: table-cell;
  vertical-align: bottom;
  padding: $gutter;
  line-height: 1.5 * $baseFontSize;
  font-size: 95%;
}

.shopify-link {
  color: inherit;

  &:hover {
    color: inherit;
  }
}

.shopify-logo-svg {
  width: 1.5 * $baseFontSize * 120 / 35;
  height: 1.5 * $baseFontSize;
  display: inline-block;
  line-height: 0;
  vertical-align: top;

  path {
    fill: currentColor;
  }
}

/* =========
   Hiding the word 'Shopify' but not from screen readers.
   ========= */

.shopify-name {
    @include visuallyHidden;
}

.order-table {

  tbody tr + tr {
    border-top: lightgray;
  }

  thead {
    border-bottom: 1px solid $colorTextBody;
  }

  tfoot {
    border-top: 1px solid $colorTextBody;

    tr {
      &:first-child th,
      &:first-child td {
        padding-top: 1.5em;
      }

      &:nth-last-child(2) th,
      &:nth-last-child(2) td {
        padding-bottom: 1.5em;
      }

      &:last-child th,
      &:last-child td {
        border-top: 1px solid $colorTextBody;
        font-weight: normal;
        padding-top: 1.5em;
        padding-bottom: 1em;
        font-size: em(13px);
        letter-spacing: 0.15em;
        @include accentFontStack;
      }
    }
  }

  // Reset theme default table styles
  td,
  th {
    padding: 0.5em 1em;
  }

  tbody th,
  tfoot th {
    font-family: $bodyFontStack;
    font-weight: normal;
    text-transform: none;
    font-size: $baseFontSize;
    letter-spacing: 0;
  }

  tr {

    th:first-child {
      padding-left: 0;
    }

    th:last-child,
    td:last-child {
      padding-right: 0;
    }
  }

  tr:first-child th,
  tr:first-child td {
    &::after {
      display: none;
    }
  }

  @include at-query($min, $postSmall) {

    tbody {
      tr {
        &:first-child th,
        &:first-child td {
          padding-top: 1.25em;
        }

        &:last-child th,
        &:last-child td {
          padding-bottom: 1.25em;
        }
      }
    }

    tfoot {
      tr {
        td, th {
          vertical-align: bottom;
        }
      }
    }
  }

  @include at-query($max, $small) {
    border: 0;

    thead {
      display: none;
    }

    th,
    td {
      float: left;
      clear: left;
      width: 100%;
      text-align: right;
      padding: 0.5rem 0;
      border: 0;
      margin: 0;
    }

    th::before,
    td::before {
      content: attr(data-label);
      float: left;
      text-align: left;
      padding-right: 2em;
      max-width: 80%;
    }

    tbody th::before,
    tbody td::before {
      font-size: em(13px);
      letter-spacing: 0.15em;
      @include accentFontStack;
    }

    tbody {
      tr {
        td:first-child {
          padding-top: 1.5em;
        }
        td:last-child {
          padding-bottom: 1.5em;
        }
      }
    }
  }
}

.order-table__product {
  @include at-query($max, $small) {
    display: flex;
    justify-content: space-between;
  }
}

.order-discount {
  text-transform: uppercase;
  color: $colorSaleTag;
  display: block;
  line-height: 1.2em;

  .icon-saletag {
    margin-right: 0.5em;
    font-size: 0.75em;
  }
}

.order-discount--title {
  word-break: break-word;
  padding-right: 1em;
}

.order-discount--list {
  margin: 0.3em 0 0 1.3em;
  list-style: none;
  padding: 0;
}

.order-discount--cart {
  text-align: right;
}

.order-discount--cart-list {
  display: inline-block;
  width: 80%;
  margin-top: 1em;
}

.order-discount--ajax-cart {
  color: inherit;
  font-size: 0.9em;
}

.order-discount--ajax-cart-list {
  width: 60%;
  display: block;
  margin-top: 0.8em;
  margin-left: auto;
  line-height: 1.1;
}

.order-discount__item {
  text-indent: -1.3em;
  margin-bottom: 0;

  & + .order-discount__item {
    margin-top: 0.6em;
  }
}

.order-discount-wrapper {
  @include at-query($max, $small) {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}
#Hero::before {
    content: '';
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: url("data&colon;image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiBjbGFzcz0iIj48Zz48cGF0aCBkPSJtMjU2IDUxMmMtNjguMzc4OTA2IDAtMTMyLjY2Nzk2OS0yNi42Mjg5MDYtMTgxLjAxOTUzMS03NC45ODA0NjktNDguMzUxNTYzLTQ4LjM1MTU2Mi03NC45ODA0NjktMTEyLjY0MDYyNS03NC45ODA0NjktMTgxLjAxOTUzMXMyNi42Mjg5MDYtMTMyLjY2Nzk2OSA3NC45ODA0NjktMTgxLjAxOTUzMWM0OC4zNTE1NjItNDguMzUxNTYzIDExMi42NDA2MjUtNzQuOTgwNDY5IDE4MS4wMTk1MzEtNzQuOTgwNDY5czEzMi42Njc5NjkgMjYuNjI4OTA2IDE4MS4wMTk1MzEgNzQuOTgwNDY5YzQ4LjM1MTU2MyA0OC4zNTE1NjIgNzQuOTgwNDY5IDExMi42NDA2MjUgNzQuOTgwNDY5IDE4MS4wMTk1MzFzLTI2LjYyODkwNiAxMzIuNjY3OTY5LTc0Ljk4MDQ2OSAxODEuMDE5NTMxYy00OC4zNTE1NjIgNDguMzUxNTYzLTExMi42NDA2MjUgNzQuOTgwNDY5LTE4MS4wMTk1MzEgNzQuOTgwNDY5em0wLTQ3MmMtMTE5LjEwMTU2MiAwLTIxNiA5Ni44OTg0MzgtMjE2IDIxNnM5Ni44OTg0MzggMjE2IDIxNiAyMTYgMjE2LTk2Ljg5ODQzOCAyMTYtMjE2LTk2Ljg5ODQzOC0yMTYtMjE2LTIxNnptMTM4LjI4NTE1NiAxODItMjguMjg1MTU2LTI4LjI4NTE1Ni0xMTAgMTEwLTExMC0xMTAtMjguMjg1MTU2IDI4LjI4NTE1NiAxMzguMjg1MTU2IDEzOC4yODUxNTZ6bTAgMCIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCIgZmlsbD0iI0ZGRkZGRiIvPjwvZz4gPC9zdmc+Cg==");
    z-index: 99;
    background-size: 50px;
}
0 Likes