/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */
.jspContainer {
  overflow: hidden;
  position: relative;
}
.jspPane {
  position: absolute;
}
.jspVerticalBar {
  background: red;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
}
.jspHorizontalBar {
  background: red;
  bottom: 0;
  height: 16px;
  left: 0;
  position: absolute;
  width: 100%;
}
.jspCap {
  display: none;
}
.jspHorizontalBar .jspCap {
  float: left;
}
.jspTrack {
  background: #dde;
  position: relative;
}
.jspDrag {
  background: #bbd;
  cursor: pointer;
  left: 0;
  position: relative;
  top: 0;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
  float: left;
  height: 100%;
}
.jspArrow {
  background: #50506d;
  cursor: pointer;
  direction: ltr;
  display: block;
  margin: 0;
  padding: 0;
  text-indent: -20000px;
}
.jspDisabled {
  background: #80808d;
  cursor: default;
}
.jspVerticalBar .jspArrow {
  height: 16px;
}
.jspHorizontalBar .jspArrow {
  float: left;
  height: 100%;
  width: 16px;
}
.jspVerticalBar .jspArrow:focus {
  border: 1px solid red;
  outline: none;
}
.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
  margin: 0 -3px 0 0;
}

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	background: red;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 16px;
}

.jspHorizontalBar
{
	background: red;
	bottom: 0;
	height: 16px;
	left: 0;
	position: absolute;
	width: 100%;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #dde;
	position: relative;
}

.jspDrag
{
	background: #bbd;
	cursor: pointer;
	left: 0;
	position: relative;
	top: 0;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	cursor: pointer;
        direction: ltr;
	display: block;
	margin: 0;
	padding: 0;
	text-indent: -20000px;
}

.jspDisabled
{
	background: #80808d;
	cursor: default;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	float: left;
	height: 100%;
	width: 16px;
}

.jspVerticalBar .jspArrow:focus
{
        border: 1px solid red;
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}
/*  COLORS
 ************/
/* 
	2021 FONTS AND TYPOGRAPHY - /apps/atvi/callofduty/blog/v2021/clientlibs/css/utils/fonts.less
**/
/* removed old fonts */
/*  UI ELEMENTS 
 *****************/
.icon-crosshair {
  position: relative;
  display: block;
  box-sizing: border-box;
  background: currentColor;
}
.icon-crosshair::after {
  display: block;
  box-sizing: border-box;
  background: currentColor;
  content: "";
  position: absolute;
  width: 2px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.icon-crosshair::before {
  display: block;
  box-sizing: border-box;
  background: currentColor;
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* MIXINs */
/* CLASSES */
.row {
  display: flex;
  flex-wrap: wrap;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}
.col {
  flex: 1 0 0%;
}
.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}
.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}
.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}
.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}
.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}
.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}
.col-auto {
  flex: 0 0 auto;
  width: auto;
}
.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 425px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
.hero-container {
  position: relative;
  background-color: #181817;
  padding-top: 222px;
  padding-bottom: 100px;
}
@media (min-width: 600.02px) {
  .hero-container {
    padding-top: 220px;
  }
}
@media (min-width: 1024.02px) {
  .hero-container {
    padding-bottom: 0;
  }
}
.hero-container .top-color {
  background-image: url('../../../../../../../../content/dam/atvi/callofduty/cod-touchui/blog/common/cod-blog-bg.jpg');
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 0 100%);
  position: absolute;
  top: 0;
  width: 100vw;
  height: 50vw;
  max-height: 277px;
}
@media (min-width: 1024.02px) {
  .hero-container .top-color {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 100%);
  }
}
.hero-container .inner-container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 60px;
}
@media (max-width: 1024px) {
  .hero-container .inner-container {
    max-width: 1024px;
    padding-inline: 40px;
  }
}
@media (max-width: 600px) {
  .hero-container .inner-container {
    max-width: 600px;
    padding-inline: 16px;
  }
}
.hero-container .inner-container .section-title {
  font-family: "Hitmarker Condensed Black", Arial;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 1px;
  font-size: 3.25rem;
  line-height: 3.25rem;
  text-transform: uppercase;
  position: relative;
  margin-bottom: 35px;
  margin-top: -20px;
}
@media (max-width: 600px) {
  .hero-container .inner-container .section-title {
    font-family: "Hitmarker Condensed Black", Arial;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 1px;
    font-size: 2.25rem;
    line-height: 2.25rem;
    text-transform: uppercase;
    margin-top: calc(-100px + 2.25rem);
  }
}
.hero-container .inner-container .content {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: 8fr 4fr;
}
@media (max-width: 1024px) {
  .hero-container .inner-container .content {
    display: grid;
    grid-gap: 28px;
    grid-template-columns: 1fr;
  }
}
.hero-container .inner-container .hero-left {
  margin-bottom: 40px;
}
.hero-container .inner-container .hero-right > ul > li,
.hero-container .inner-container .hero-right .scroll-pane .card {
  margin-bottom: 40px;
}
.hero-container .inner-container .hero-right > ul > li:last-child,
.hero-container .inner-container .hero-right .scroll-pane .card:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024.02px) {
  .hero-container .inner-container .hero-right > ul > li,
  .hero-container .inner-container .hero-right .scroll-pane .card {
    margin-bottom: 40px;
  }
}
@media (min-width: 1024.02px) {
  .hero-container .inner-container .hero-right .scroll-pane {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 1fr;
    width: 100%;
    height: 60vw;
    max-height: 850px;
    overflow: auto;
  }
  .hero-container .inner-container .hero-right .scroll-pane::-webkit-scrollbar {
    width: 0px;
  }
  .hero-container .inner-container .hero-right .jspContainer .jspVerticalBar {
    background: transparent;
    width: 30px;
  }
  .hero-container .inner-container .hero-right .jspContainer .jspVerticalBar .jspDrag {
    background: #ffffff;
    width: 6px;
    left: calc(50% - 3px);
  }
  .hero-container .inner-container .hero-right .jspContainer .jspVerticalBar .jspTrack {
    background: linear-gradient(90deg, transparent, 14.5px, rgba(255, 255, 255, 0.3) 14.5px, 15.5px, transparent 15.5px);
  }
  .hero-container .inner-container .hero-right .card:last-child {
    padding-bottom: 240px;
  }
}
@media (max-width: 1024px) {
  .hero-container .inner-container .hero-right .scroll-pane {
    display: grid;
    grid-gap: 28px;
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-container .inner-container .hero-right .scroll-pane .jspPane {
    width: 100% !important;
    position: relative !important;
    top: unset !important;
  }
  .hero-container .inner-container .hero-right .scroll-pane .jspVerticalBar {
    display: none;
  }
}
@media (max-width: 600px) {
  .hero-container .inner-container .hero-right .scroll-pane {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
  }
}
.hero-container .card-item .card-inner .bg {
  overflow: hidden;
}
.hero-container .card-item .card-inner:hover .preview {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.hero-container .card-item .card-inner:hover .blog-image {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

/*  COLORS
 ************/
/* 
	2021 FONTS AND TYPOGRAPHY - /apps/atvi/callofduty/blog/v2021/clientlibs/css/utils/fonts.less
**/
/* removed old fonts */
/*  UI ELEMENTS 
 *****************/
.icon-crosshair {
  position: relative;
  display: block;
  box-sizing: border-box;
  background: currentColor;
}
.icon-crosshair::after {
  display: block;
  box-sizing: border-box;
  background: currentColor;
  content: "";
  position: absolute;
  width: 2px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.icon-crosshair::before {
  display: block;
  box-sizing: border-box;
  background: currentColor;
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* MIXINs */
/* CLASSES */
.row {
  display: flex;
  flex-wrap: wrap;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}
.col {
  flex: 1 0 0%;
}
.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}
.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}
.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}
.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}
.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}
.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}
.col-auto {
  flex: 0 0 auto;
  width: auto;
}
.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 425px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1024.02px) {
  html[lang="ar"] .hero-container .inner-container .hero-right .jspContainer .jspVerticalBar,
  html[dir="rtl"] .hero-container .inner-container .hero-right .jspContainer .jspVerticalBar {
    right: unset;
    left: 0;
  }
  html[lang="ar"] .hero-container .inner-container .hero-right .jspContainer .jspDrag,
  html[dir="rtl"] .hero-container .inner-container .hero-right .jspContainer .jspDrag {
    left: unset;
    right: calc(50% - 3px);
  }
}