.hero-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.atmc-hero-01 {
	position: relative;
	width: 100%;
	padding: 10rem 0 13rem;
}
.atmc-hero-01 .atmc-container > .row-fluid > .span12 {
	position: relative;
}
/* .atmc-hero-01 .atmc-container > .row-fluid > .span12:before,
.atmc-hero-01 .atmc-container > .row-fluid > .span12:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #fff;
	opacity: 0.5;
	height: 40px;
	width: 1px;
} */
.atmc-hero-01 .atmc-container > .row-fluid > .span12:before {
	top: -45px;
}
.atmc-hero-01 .atmc-container > .row-fluid > .span12:after {
	bottom: -45px;
}

.qvantel-hero-logo {
  padding: 0 6%;
  position: relative;
}

.qvantel-hero-heading {
  display: flex;
  justify-content: flex-start;
  padding: 0 6%;
}

#home-hero * {
 transition-duration: 1s !important; 
}
@media (max-width: 991px) {
  #home-hero div.qvantel-hero-description-canvas p {
   width: 75% !important; 
  }
}

@media (max-width: 768px) {
  .qvantel-hero-heading h1 {
    font-size: 50px !important; 
  }
  .qvantel-hero-left-alignment {
    left: 0px !important; 
  }
  #home-hero div.qvantel-hero-heading h1 {
	font-size: 26px !important;
}
}

@media (max-width: 568px) {
  .qvantel-hero-heading h1 {
    font-size: 34px !important; 
  }
  #home-hero div.qvantel-hero-heading h1 {
	font-size: 22px !important;
}
  #home-hero div.qvantel-hero-logo{
/*     top: -40px; */
     transform: translateY(-30px);
  }
}

.qvantel-hero-description-canvas {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.qvantel-hero-description-black-bg {
  padding: 12px;
  width: 50%;
  margin-top: 15px;
}

.qvantel-hero-left-alignment {
  display: flex;
  justify-content: left;
  padding-left: 6%;
  position: relative;
/*   left: -10px; */
}


/* Featured items area CSS */
#hero-feat {
  position: relative;
  top: 20px;
  right: 180px;
  width: 502px;  /* 472 Change featured item size. Aspect ratio 1:1.91.  */
  height: 262px;  /* 247 Change featured item size. Aspect ratio 1:1.91. Also change .hero-feat-dots property 'top' by the vertical amount. */
  filter: drop-shadow(5px 5px 2px var(--night));
  z-index: 500;
/*   transform: rotate3d(10, -43, 6, 20deg) */
}

.hero-feat-container {
  box-sizing: border-box;
/*   background-color: #fafafa; */
  border: 0px solid #cacaca;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
/*   filter: drop-shadow(1px 1px 3px #cacaca); */
  transition-duration: 2.5s;
  transition-timing-function: linear;
  transition-property: opacity;
}

.hero-feat-item {
  height: 100%;
  width: 100%;
/*   border: 2px solid #fafafa; */
/*   filter: drop-shadow(4px 4px 4px #0096cf); */
}

.hero-feat-img {
/*   width: 375px; */
/*   height: 196px; */
  width: 100%;
}

.hero-feat-title {
  padding: 8px;
  height: 112px;
  font-size: 12px;
}

.hero-feat-cta {
  min-height: 25px;
  text-align: center;
  padding-bottom: 20px;
}

.hero-feat-cta a {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.hero-feat-cta a {
  text-transform: uppercase;  
}

.hero-feat-dots {
  position: absolute;
  display: flex;
  top: 262px;
  width: 100%;
  justify-content: center;
}

.hero-feat-dot {
  height: 20px;
  width: 20px;
  margin: 20px 15px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
}

.hero-feat-dot:hover {
  cursor: pointer;
  background-color: var(--rock);
}

.hero-feat-dot:active {
  background-color: var(--rock);
}

.hero-feat-type {
  position: absolute;
  padding: 2px 8px;
  z-index: 100;
  display: flex;
  top: -20px;
  height: 22px;
  min-width: 100px;
  left: 0px;
  justify-content: flex-start;
}

.hero-feat-type-txt {
  color: #FFFFFF !important;
  text-transform: uppercase;
  font-size: 12px;
  position: relative;
  display: table;
  margin: 0 auto;
}

@media (max-width: 1280px) {
  #hero-feat { 
/*     display: none; */
    right: 0px;
/*     margin: 0 auto; */
  }
  .hero-feat-container { 
/*     display: none; */
  }
  .hero-content {
    flex-direction: column; 
  }
  .hero-content-right {
  width: 100%;
  padding-bottom: 60px;
  padding-top: 60px;
    padding-left: 6%;
    padding-right: 6%;
}
}

@media (max-width: 568px) {
  #hero-feat {
    margin: 0 auto; 
    width: 300px;
    height: 157px;
  }
  .hero-feat-dots {
  top: 157px;
}