@charset "UTF-8";
/***!  https://www.alke.it/script/css/alke-ced-imgfullwidth.css  !***/

/*
2026/05/04
Lorenzo Dal Zotto
css generato dal custom.css del template "t4_bs5_blank" per script imgfullwidth

*/




/*
IV      STRUCTURES
======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= =======
REM
21/11/22
--------
STRUCTURES ACCORDING J4_V5 TEMPLATE'S VIEWPORTS BLOCKS
@media queries
> mobile        .v5-viewport-mobile     <= 575px
> tablet        .v5-viewport-tablet     >= 576px    >= 768px    <= 1199px
> desktop       .v5-viewport-desktop    >= 1200px   >= 1400px

.v5-container-j4v5-default-width >>> width according to J4 V5 template (not fullwidth)
.v5-container-default-width-padding >>>  width according to J4 V5 template (not fullwidth) with right and left padding (15.52px)
.v5-container-fullwidth >>> fullwidth without right and left padding
.v5-container-fullwidth-padding >>> fullwidth with right and left padding (15.52px)
.v5-container-fullwidth-home-blog >>> padding-top adjustments for homepage blog container for mobile viewport 
======= ======= ======= ======= ======= ======= */
.v5-container-default-width,
.v5-container-default-width-padding,
.v5-container-fullwidth,
.v5-container-fullwidth-padding {
  width: 100%;
}

.v5-container-default-width-padding,
.v5-container-fullwidth-padding {
  width: 100%;
  padding: 0 15.52px;
}

@media (min-width: 576px) {

  .v5-container-default-width,
  .v5-container-default-width-padding {
    width: 540px;
    margin: 0 auto;
  }

  .v5-container-fullwidth {
    padding: 0;
  }

}

@media (min-width: 768px) {

  .v5-container-default-width,
  .v5-container-default-width-padding {
    width: 720px;
  }

  .v5-container-default-width {
    padding: 0 15.52px;
  }

}

@media (min-width: 992px) {

  .v5-container-default-width,
  .v5-container-default-width-padding {
    width: 960px;
  }

}

@media (min-width: 1200px) {

  .v5-container-default-width,
  .v5-container-default-width-padding {
    width: 1140px;
  }

  .v5-container-fullwidth-padding {
    padding: 0 40px;
  }

}

@media (min-width: 1400px) {

  .v5-container-default-width,
  .v5-container-default-width-padding {
    width: 1320px;
  }

}

/*
V       VIEWPORT
======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= =======
REM
16/11/22
--------
VIEWPORTS BLOCKS
@media queries
> mobile        .v5-viewport-mobile     <= 575px
> tablet        .v5-viewport-tablet     >= 576px <= 1199px
> desktop       .v5-viewport-desktop    >= 1200px


viewport sources:
https://viewportsizer.com/devices
https://yesviz.com/viewport
https://www.mydevice.io


Tablet Viewport (css width - width px x height px)
======= ======= =======
480	    800	    Amazon Kindle Fire HD 6
480	    800	    Amazon Kindle Fire HD 7
480	    800	    Amazon Kindle Fire HD 10
534	    400     Google Pixel C
600     960     LG G Pad 8.3
600     1024    Amazon Kindle Fire
600     1024    Blackberry Playbook
600     1024    Samsung Galaxy Tab 2 (7")
604     966     Asus Nexus 7
608     912     Microsoft Surface Pro 4
768	    1024    Apple iPad 1/2/3/4
768	    1024    Apple iPad Air/Air 2
768	    1024    Apple iPad mini/mini 2/mini 3/mini 4
768	    1024    Apple iPad Pro 9.7
768	    1024    HTC Nexus 9
768     1366    Microsoft Surface
800     1200    Samsung Galaxy Tab 2 10"
800     1200    Samsung Galaxy Tab 3 10"
800     1200    Samsung Galaxy Tab (8.9")
800     1280    Samsung Nexus 10
1024    1366    Apple iPad Pro
1024    1440    Microsoft Surface Pro 3
======= ======= ======= ======= ======= ======= */
.v5-viewport-tablet,
.v5-viewport-tablet-desktop,
.v5-viewport-desktop {
  display: none;
}

@media (min-width: 576px) {
  .v5-viewport-mobile {
    display: none;
  }

  .v5-viewport-tablet,
  .v5-viewport-tablet-desktop {
    display: block;
  }

}

@media (min-width: 1200px) {
  .v5-viewport-tablet {
    display: none;
  }

  .v5-viewport-desktop {
    display: block;
  }

}


/*
VI      NAVIGATIOON
======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= =======
REM
10/01/23
--------
ANCHOR
.anchor
======= ======= ======= ======= ======= ======= */
.v5-anchor {
  height: 70px;
  margin-top: -70px;
  display: block;
  visibility: hidden;
}

@media (min-width: 576px) {
  .v5-anchor {
    height: 56px;
    margin-top: -56px;
    display: block;
    visibility: hidden;
  }

}

@media (min-width: 768px) {
  .v5-anchor {
    height: 80px;
    margin-top: -80px;
  }

}


/*
XL      SECTIONS
======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= ======= =======
REM
16/11/22
--------
IMMAGINE FULLWIDTH
image + title h1 + subtitle h2 + CTA
.v5-content-image-fullwidth
.v5-content-image-fullwidth-homepage (only for https://www.alke.it)
.v5-content-image-fullwidth-home-article (only for https://www.alke.it/veicoli-elettrici and https://www.alke.it/veicoli-elettrici-n1-wltp)
.v5-anchor
.v5-anchor-navigation
======= ======= ======= ======= ======= ======= */
/* image */
.v5-content-image-fullwidth,
.v5-content-image-fullwidth-homepage,
.v5-content-image-fullwidth-home-article {
  width: 100% !important;
  position: relative;
}

.v5-content-image-fullwidth {
  padding-bottom: 20px;
}

.v5-content-image-fullwidth img,
.v5-content-image-fullwidth-homepage img,
.v5-content-image-fullwidth-home-article img,
.v5-content-image-fullwidth video,
.v5-content-image-fullwidth-homepage video,
.v5-content-image-fullwidth-home-article video {
  width: 100%;
  height: auto;
}

.v5-content-image-fullwidth video,
.v5-content-image-fullwidth-homepage video,
.v5-content-image-fullwidth-home-article video {
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-origin: content-box;
}

.v5-content-image-fullwidth img,
.v5-content-image-fullwidth video {
  padding-bottom: 10px;
}

/*REM 10/04/2026*/
.v5-content-image-fullwidth > .v5-viewport-mobile,
.v5-content-image-fullwidth > .v5-viewport-tablet-desktop,
.v5-content-image-fullwidth.v6-overlay-left > img,
.v5-content-image-fullwidth.v6-overlay-right > img {
  margin-top: 0;
}

.v5-content-image-fullwidth-homepage img {
  padding-top: 54px;
  /* 231214 */
}

.v5-content-image-fullwidth-home-blog img {
  padding-top: 54px;
}

/* adjustments for BLOG homepage container */
.blog-item-content .v5-content-image-fullwidth {
  padding-top: 54px;
}

/* box - outside image */
/* text */
.v5-content-image-fullwidth h1,
.v5-content-image-fullwidth h2,
.v5-content-image-fullwidth p,
.v5-content-image-fullwidth-homepage h1,
.v5-content-image-fullwidth-homepage h2,
.v5-content-image-fullwidth-homepage p,
.v5-content-image-fullwidth-home-article h1,
.v5-content-image-fullwidth-home-article h2,
.v5-content-image-fullwidth-home-article p {
  text-align: center;
  word-wrap: break-word;
}

.v5-content-image-fullwidth h1,
.v5-content-image-fullwidth h2,
.v5-content-image-fullwidth p {
  padding: 0 5%;
}

.v5-content-image-fullwidth h1 {
  padding: 10px inherit 0 inherit;
}

.v5-content-image-fullwidth-homepage h1,
.v5-content-image-fullwidth-home-article h1 {
  padding: 0 10px 10px 10px;
}

.v5-content-image-fullwidth h2 {
  padding-bottom: 10px;
  font-size: 1.3em;
  color: var(--color-black);
  font-weight: 400;
}

.v5-content-image-fullwidth h1,
.v5-content-image-fullwidth h2,
.v5-content-image-fullwidth-homepage h1,
.v5-content-image-fullwidth-homepage h2,
.v5-content-image-fullwidth-home-article h1,
.v5-content-image-fullwidth-home-article h2 {
  color: var(--color-black);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, .5); */
}

.v5-content-image-fullwidth h1,
.v5-content-image-fullwidth-homepage h1,
.v5-content-image-fullwidth-home-article h1 {
  font-size: 36px;
  line-height: 1.2;
}

.v5-content-image-fullwidth h2,
.v5-content-image-fullwidth-homepage h2,
.v5-content-image-fullwidth-home-article h2 {
  font-size: 18px;
  line-height: 1.3;
}

/* navigation link */
.v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation {
  display: none;
}

/* button */
.v5-cta {
  padding-top: 15px;
  text-align: center;
}

.v5-cta>a {
  /* width: 250px; */
  width: 200px;
  max-width: 250px;
  height: 46px;
  margin-bottom: 15px;
  color: var(--color-white);
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
}

.v5-cta>a:nth-child(2) {
  background-color: transparent;
  color: var(--color-black);
  border: 2px solid var(--color-black);
}

.v6-container-fullwidth>.v6-content-image-fullwidth-homepage>.v6-content-image-box>.v5-cta>a:nth-child(2) {
  color: var(--color-white);
}

@media (min-width: 576px) {

  /* adjustments for BLOG homepage container */
  .blog-item-content .v5-content-image-fullwidth {
    padding-top: 40px;
  }

  .v5-content-image-fullwidth img,
  .v5-content-image-fullwidth video {
    padding-top: 0;
  }

  /* box - outside image */
  .v5-content-image-fullwidth h1 {
    padding: 20px inherit 0 inherit;
  }

  .v5-content-image-fullscreen-home-article img {
    margin-top: 70px;
  }

  .v5-content-image-fullwidth h1,
  .v5-content-image-fullwidth-homepage h1,
  .v5-content-image-fullwidth-home-article h1 {
    font-size: 50px;
  }

  .v5-content-image-fullwidth h2,
  .v5-content-image-fullwidth-homepage h2,
  .v5-content-image-fullwidth-home-article h2 {
    font-size: 25px;
  }

  .v5-cta a:first-child {
    margin-right: 15px;
  }

  .v5-container-default-width .v5-content-image-box .v5-cta a:nth-child(2),
  .v5-container-default-width-padding .v5-content-image-box .v5-cta a:nth-child(2) {
    margin-left: 0;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage>video {
    padding-top: 40px;
  }
  
  /*REM 10/04/2026*/
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>video {
    padding-top: 0;
  }

  .v5-content-image-fullwidth-home-blog img {
    padding-top: 40px;
  }

}

@media (min-width: 768px) {

  /* adjustments for BLOG homepage container */
  .blog-item-content .v5-content-image-fullwidth {
    padding-top: 18px;
  }
  
  /*REM 10/04/2026*/
  .v5-content-image-fullwidth img,
  .v5-content-image-fullwidth video {
    padding-top: 0;
  }

  .v5-content-image-fullwidth-homepage img,
  .v5-content-image-fullwidth-home-blog img {
    padding-top: 18px;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage>video {
    padding-top: 18px;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>video {
    padding-top: 0;
  }

  .v5-content-image-fullwidth-homepage h1 {
    margin-bottom: .5rem;
  }

}

@media (min-width: 992px) {

  /* box - outside image */
  .v5-content-image-fullwidth h2 {
    font-size: 1.6em;
  }

  .v5-cta {
    padding-top: 20px;
  }

}

@media (min-width: 1200px) {

  .v5-content-image-fullwidth,
  .v5-content-image-fullwidth img,
  .v5-content-image-fullwidth video {
    padding-bottom: 0;
  }

  .v5-content-image-fullwidth {
    margin-bottom: 40px;
  }

  /* image fullscreen */
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article {
    height: calc(100vh - 80px);
    margin-top: 33px;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .v5-container-default-width>.v6-overlay-left::after,
  .v5-container-fullwidth>.v6-overlay-left::after,
  .v5-container-fullwidth>.v5-content-image-fullwidth.v6-overlay-left::after,
  .v6-container-default-width>.v6-overlay-left::after,
  .v6-container-fullwidth>.v6-overlay-left::after,
  .v6-container-fullwidth>.v5-content-image-fullwidth.v6-overlay-left::after {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, .6) 20%,
        rgba(0, 0, 0, .3) 40%,
        rgba(0, 0, 0, 0) 80%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
  }

  .v5-container-default-width>.v6-overlay-right::after,
  .v5-container-fullwidth>.v6-overlay-right::after,
  .v5-container-fullwidth>.v5-content-image-fullwidth.v6-overlay-right::after,
  .v6-container-default-width>.v6-overlay-right::after,
  .v6-container-fullwidth>.v6-overlay-right::after,
  .v6-container-fullwidth>.v5-content-image-fullwidth.v6-overlay-right::after {
    background: linear-gradient(to left,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, .6) 20%,
        rgba(0, 0, 0, .3) 40%,
        rgba(0, 0, 0, 0) 80%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>video {
    width: auto !important;
    min-width: 100vw;
    min-height: 100vh;
    padding-bottom: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    object-fit: cover;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>video {
    max-height: 100vh;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage {
    margin-top: 18px;
  }

  /* box - inside image */
  .v5-content-image-box {
    background-color: transparent;
    max-width: 35%;
    /* 06/11/2023 */
    position: absolute;
    padding: 10px;
    color: var(--color-white);
    z-index: 1;
  }

  /* image fullscreen - box - inside image */
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>.v5-content-image-box {
    max-width: 32%;
  }

  .v5-content-image-box-inside-left-top,
  .v5-content-image-box-inside-right-top {
    top: 45px;
  }

  .v5-content-image-box-inside-left-middle,
  .v5-content-image-box-inside-right-middle {
    top: calc(50% - 20px);
    transform: translate(0, -50%);
  }

  .v5-content-image-box-inside-left-bottom,
  .v5-content-image-box-inside-right-bottom {
    bottom: 60px;
  }

  .v5-content-image-box-inside-right-top,
  .v5-content-image-box-inside-right-middle,
  .v5-content-image-box-inside-right-bottom {
    right: 0;
  }

  .v5-content-image-fullwidth .v5-content-image-box h1,
  .v5-content-image-fullwidth .v5-content-image-box h2,
  .v5-content-image-fullwidth .v5-content-image-box p {
    color: var(--color-white);
    text-align: left;
  }

  .v5-content-image-fullwidth h1,
  .v5-content-image-fullwidth .v5-content-image-box h1 {
    font-size: 2.9em;
  }

  .v5-content-image-fullwidth .v5-content-image-box .v5-cta {
    padding-left: 15px;
    padding-bottom: 20px;
    text-align: left;
  }

  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation {
    margin-left: 22px;
    display: block;
    font-size: 1.25rem;
    color: var(--color-white);
    font-weight: 700;
    line-height: 1.25em;
    transition: all .2s ease-in-out;
  }

  .v5-anchor-navigation-subtitle h2 {
    padding-left: 0;
  }

  .v5-cta>a {
    padding-top: 10px;
    font-size: 1rem;
  }

  .v5-content-image-fullwidth.v6-overlay-left.v5-content-image-fullscreen-home-article>.v5-content-image-box>.v5-cta>a:nth-child(2),
  .v5-content-image-fullwidth.v6-overlay-right.v5-content-image-fullscreen-home-article>.v5-content-image-box>.v5-cta>a:nth-child(2),
  .v5-container-fullwidth>.v5-content-image-fullwidth.v6-overlay-left>.v5-content-image-box>.v5-cta>a:nth-child(2),
  .v5-container-fullwidth>.v5-content-image-fullwidth.v6-overlay-right>.v5-content-image-box>.v5-cta>a:nth-child(2),
  .v6-content-image-fullwidth.v6-overlay-left.v5-content-image-fullscreen-home-article>.v5-content-image-box>.v5-cta>a:nth-child(2),
  .v6-content-image-fullwidth.v6-overlay-right.v5-content-image-fullscreen-home-article>.v5-content-image-box>.v5-cta>a:nth-child(2),
  .v6-container-fullwidth>.v5-content-image-fullwidth.v6-overlay-left>.v5-content-image-box>.v5-cta>a:nth-child(2),
  .v6-container-fullwidth>.v5-content-image-fullwidth.v6-overlay-right>.v5-content-image-box>.v5-cta>a:nth-child(2) {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
  }

  .v5-content-image-box-outside .v5-cta>a:nth-child(2) {
    color: var(--color-black);
    border: 2px solid var(--color-black);
  }

  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation:hover,
  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation:active,
  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation:focus {
    color: var(--t4-gray-400);
  }

  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation .fas {
    padding-left: 5px;
    font-size: 1.10rem;
    transition: all .2s ease-in-out;
    border-bottom: none;
  }

  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation:hover .fas,
  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation:active .fas,
  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation:focus .fas {
    transform: rotate(90deg);
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>.v5-anchor {
    position: absolute;
    bottom: 0;
    left: 0;
  }

}

@media (min-width: 1280px) and (max-width: 1380px) and (min-height: 950px) and (max-height: 1100px) {

  /* image fullscreen */
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article {
    height: 686px;
    margin-top: 0;
    margin-bottom: -20px;
    overflow: hidden;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage {
    margin-top: 17px;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>video {
    width: auto !important;
    min-height: auto !important;
    padding-bottom: 0;
    position: absolute;
    top: 325px;
    transform: translateY(-50%);
    object-fit: cover;
  }

}

@media (min-width: 1400px) {

  /* image fullscreen - box - inside image */
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>.v5-content-image-box {
    max-width: 29%;
  }

}

@media (min-width: 1500px) {

  /* box - outside image */
  .v5-content-image-fullwidth h1,
  .v5-content-image-fullwidth .v5-content-image-box h1 {
    font-size: 3.5em;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage>video {
    width: 100% !important;
    height: auto;
    padding-top: 40px;
  }

  .v5-content-image-box {
    min-width: 570px;
    max-width: 35%;
  }

  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation {
    margin-left: 28px;
  }

}

@media (min-width: 1600px) and (max-width: 1800px) and (min-height: 2500px) and (max-height: 2570px) {

  /* image fullscreen */
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article {
    height: 686px;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>video {
    width: auto !important;
    min-height: auto !important;
    padding-bottom: 0;
    position: absolute;
    top: 366px;
    transform: translateY(-50%);
    object-fit: cover;
  }

}


@media (min-width: 1801px) {

  /* image fullscreen - homepage */
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article.v5-content-image-fullscreen-home-homepage>video {
    width: 100% !important;
    height: 100vh;
    padding-top: 39px;
  }

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>video {
    min-height: 100vh !important;
    max-height: 150vh;
  }

  /* box - outside image */
  .v5-content-image-box {
    max-width: 32%;
  }

  .v5-content-image-fullwidth .v5-content-image-box .v5-anchor-navigation {
    margin-left: 30px;
  }

}

@media (min-width: 2500px) {

  /* box - outside image */
  .v5-content-image-fullwidth h1,
  .v5-content-image-fullwidth .v5-content-image-box h1 {
    font-size: 4.5em;
  }

}

@media (min-width: 2500px) and (min-height: 800px) and (max-height: 1300px) {

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>video {
    width: 2560px !important;
    min-height: auto !important;
    padding-bottom: 0;
    position: absolute;
    top: 366px;
    transform: translateY(-50%);
    object-fit: cover;
  }

}

@media (min-width: 3840px) and (min-height: 800px) and (max-height: 2200px) {

  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>img,
  .v5-content-image-fullwidth.v5-content-image-fullscreen-home-article>video {
    width: 4150px !important;
    top: 1000px;
  }

}



/*
Lorenzo Dal Zotto
Gradiente per yootheme
*/
.gradient-left-yt {
    background: linear-gradient(
                to right,
                rgba(0, 0, 0, .8) 0%,
                rgba(0, 0, 0, .5) 20%, 
                rgba(0, 0, 0, .3) 40%, 
                rgba(0, 0, 0, 0) 80% 
                );
        }

.gradient-right-yt {
    background: linear-gradient(
                to left,
                rgba(0, 0, 0, .8) 0%,
                rgba(0, 0, 0, .5) 20%, 
                rgba(0, 0, 0, .3) 40%, 
                rgba(0, 0, 0, 0) 80% 
                );
        }