:root {
  --themeColor: #1a2b4b;
  --chevron-bg: #1a2b4b;
}

@font-face {
  font-family: "AVENGEANCE-MIGHTIEST-AVENGER";
  src: url("../fonts/AVENGEANCE-MIGHTIEST-AVENGER.ttf");
}
@font-face {
  font-family: "Comic-Book-Bold";
  src: url("../fonts/Comic-Book-Bold.otf");
}

body {
  font-family: "Raleway", sans-serif;
  font-size: 1em;
}
.bannersNavbar {
  box-shadow: 0 7px 5px rgba(0, 0, 0, 0.1);
}
.bannersNavbar .navbar-brand {
  font-family: "AVENGEANCE-MIGHTIEST-AVENGER";
  color: var(--themeColor);
  font-weight: bolder;
  font-size: 1.8em;
  transition: 300ms ease-in-out;
}
.navbar.bannersNavbar .nav-link {
  color: white !important;
}
.navbarBtn {
  display: inline-block;
  background-color: var(--themeColor);
  color: white;
  border-radius: 0.3em;
  padding: 0.4em 1.4em;
  font-weight: 800;
  border: 2px solid transparent;
  transition: 200ms ease-in-out;
}
.navbarBtn:hover {
  transform: translate3d(0, -3px, 0);
  opacity: 0.8;
  text-decoration: none;
}
.odd.navbarBtn {
  color: var(--themeColor) !important;
  border: 2px solid var(--themeColor);
  background-color: transparent;
}

/* Banners Section */
.bannersSection {
  padding: 2em 0 3em 0;
}
.mainHeading {
  font-family: "Comic-Book-Bold";
  font-size: 2em;
  text-align: center;
  color: var(--themeColor);
  margin-bottom: 1em;
}
.mainText {
  color: #707070;
  font-weight: 600;
  text-align: center;
}
.bannersSection .bannersCard {
  display: inline-block;
  text-decoration: none;
  position: relative;
  border-radius: 0.5em;
  box-shadow: 0 9px 5px rgb(0 0 0 / 40%);
  overflow: hidden;
  margin-bottom: 1.5em;
  transition: 300ms ease-in-out;
}
.bannersSection .bannersCard:hover {
  transform: scale(0.99);
  box-shadow: none;
}
.bannersSection .bannersCard .bannerTag {
  font-family: "Comic-Book-Bold";
  background-color: rgba(255, 255, 255, 1);
  color: var(--themeColor);
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0em;
  width: 50px;
  text-align: center;
  font-size: 1.5em;
  border-radius: 0.6em 0em 0em 0em;
}
.bannersSection .bannersCard .bannerImg {
  width: 100%;
}
#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 70px;
  width: 100px;
  position: absolute;
  left: 0;
  top: 17px;
}
#chevron:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: var(--chevron-bg);
  transform: skew(0deg, 15deg);
}
#chevron:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: var(--chevron-bg);
  transform: skew(0deg, -15deg);
}
.bannersSection .bannersCard .bannerHeading {
  color: white;
  font-weight: 800;
  position: relative;
  z-index: 10;
  font-size: 1.2em;
  margin-top: 0.4em;
  line-height: 1.2;
}
.bannersSection .bannersCard .bannerLogo {
  position: absolute;
  height: 40px;
}
.bannersSection .bannersCard.bannerCardOne .bannerLogo {
  bottom: 10px;
  left: 20px;
}
.bannersSection .bannersCard .contents {
  position: absolute;
  max-width: 140px;
}
.bannersSection .bannersCard.bannerCardOne .contents {
  right: 0;
  top: 10px;
}
.bannersSection .bannersCard .bannerText {
  color: white;
  font-size: 0.7em;
  font-weight: 500;
  line-height: 1.2;
}
.bannersSection .bannersCard .adsbannerTag {
  background-color: var(--themeColor);
  display: inline-block;
  color: white;
  padding: 0.3em 1em;
  font-size: 0.7em;
  font-weight: 700;
  border-radius: 0.2em;
  margin-top: 1em;
}
#pointer {
  width: 120px;
  height: 40px;
  position: relative;
  background: var(--chevron-bg);
  position: absolute;
  top: 13px;
  left: 0;
  text-align: center;
}
#pointer:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
#pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid var(--chevron-bg);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.bannersSection .bannersCard.bannerCardTwo .bannerLogo {
  top: 10px;
  right: 20px;
}
.bannersSection .bannersCard.bannerCardTwo .contents {
  left: 0;
  padding: 0.5em 0.8em;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  max-width: 100%;
}
.bannersSection .bannersCard.bannerCardTwo .adsbannerTag {
  background-color: var(--chevron-bg);
}
.bannersSection .bannersCard .bannerCardTag {
  background-color: var(--chevron-bg);
  position: absolute;
  left: 0;
  right: 0;
  padding: 0.5em 1em;
  top: 0;
  text-align: center;
}
.bannersSection .bannersCard.bannersCardThree .bannerLogo {
  bottom: 10px;
  left: 10px;
}
.bannersSection .bannersCard.bannersCardThree .contents {
  left: 50%;
  text-align: center;
  top: 60%;
  transform: translate(-50%, -50%);
}
.bannersSection .bannersCard.bannersCardThree .adsbannerTag {
  background-color: var(--chevron-bg);
}
.bannersSection .bannersCard.bannersCardFour .bannerCardTagFour {
  background-color: var(--chevron-bg);
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0.5em 1em;
  left: 0;
}
.bannersSection .bannersCard.bannersCardFour .bannerLogo {
  position: absolute;
  bottom: 10px;
  left: 25px;
}
.bannersSection .bannersCard.bannersCardFour .contents {
  position: absolute;
  bottom: 20px;
  right: 5px;
}
.bannersSection .bannersCard.bannersCardFour .adsbannerTag {
  background-color: var(--chevron-bg);
}
.bannersSection .bannersCard.bannersCardFive .bannerCardTagFive {
  background-color: var(--chevron-bg);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  padding: 0.4em 1.5em;
  border-radius: 0 0 0.3em 0.3em;
}
.bannersSection .bannersCard.bannersCardFive .bannerLogo {
  left: 10px;
  top: 14px;
}
.bannersSection .bannersCard.bannersCardFive .contents {
  left: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0.5em 0.8em;
  right: 0;
  max-width: 100%;
}
.bannersSection .bannersCard.bannersCardFive .adsbannerTag {
  background-color: var(--chevron-bg);
}
#parallelogram {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid var(--chevron-bg);
  border-bottom: 50px solid transparent;
}
.bannersSection .bannersCardSix .bannerSixcardTag {
  position: absolute;
  left: 25px;
  top: 0;
}

#talkbubble {
  text-align: center;
  width: 110px;
  height: 50px;
  background: var(--chevron-bg);
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid var(--chevron-bg);
  border-bottom: 13px solid transparent;
}
.bannersSection .bannersCard.bannersCardSix .bannerHeading {
  line-height: 2.4;
}
.bannersSection .bannersCard.bannersCardSix .bannerLogo {
  right: 10px;
  top: 10px;
}
.bannersSection .bannersCard.bannersCardSix .contents {
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}
.bannersSection .bannersCard.bannersCardSix .adsbannerTag {
  background-color: var(--chevron-bg);
}
.pageFooter {
  padding: 2em 0;
  background-color: #f8f9fa;
  box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.1);
}
.pageFooter .footerLogo {
  display: inline-block;
  text-decoration: none;
}
.pageFooter .footerLink {
  display: block;
  margin-bottom: 0.5em;
  color: #707070;
  text-decoration: none;
  font-size: 0.9em;
  transition: 200ms ease-in-out;
}
.pageFooter .footerLink:hover {
  color: var(--themeColor);
}
.pageFooter .footerHeading {
  font-family: "Comic-Book-Bold";
  font-size: 1.2em;
  margin-bottom: 0.8em;
  color: var(--themeColor);
}
.pageFooter .footerText {
  margin-bottom: 1em;
  font-size: 0.9em;
  line-height: 1.3;
  color: #707070;
  text-decoration: none;
}
.footerSearchArea {
  position: relative;
}
.footerSearchArea input {
  background-color: white;
  padding: 0.7em 1em;
  border-radius: 30px;
  width: 100%;
  outline: none;
  border: 1px solid transparent;
  transition: 200ms ease-in-out;
}
.footerSearchArea input:focus {
  border-color: var(--themeColor);
}
.footerSearchArea .sendBtn {
  background-color: var(--themeColor);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 0.7em 1.7em;
  position: absolute;
  right: 0;
  top: 0;
  border: 1px solid transparent;
}
.pageFooter .copyrightText {
  color: #707070;
  font-size: 0.8em;
  padding-top: 2em;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* Banner Page 1 */
/* Body Wrapper */
.bodyWrapper {
  display: flex;
}
/* Side Menu */
.bodyWrapper .sideMenu {
  width: 20%;
  min-height: 100vh;
  background-color: #f8f9fa;
  box-shadow: 6px -3px 5px rgb(0 0 0 / 10%);
  padding: 2em 1em;
}
.bodyWrapper .mainHeading {
  font-size: 1.3em;
  text-align: center;
  margin-bottom: 1.5em;
}
.commanLabel {
  color: #707070;
  font-size: 0.9em;
  font-weight: 700;
}
.commonInput {
  border: none;
  background-color: white;
  border-radius: 30px;
  padding: 0.5em 1em;
  width: 100%;
  border: 1px solid var(--themeColor);
}
#bgColorInput,
.colorPicker {
  height: 45px;
  width: 100%;
  border: none;
  background-color: transparent;
}
.bodyWrapper .logoBtn {
  background-color: var(--themeColor);
  color: white;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  font-size: 0.9em;
  font-weight: 700;
  transition: 200ms ease-in-out;
}
.bodyWrapper .logoBtn:hover {
  transform: translate3d(0, -3px, 0);
  opacity: 0.8;
  text-decoration: none;
}
.bodyWrapper #logo {
  opacity: 0;
}
.sideMenu .uploadBtn i {
  margin-right: 0.3em;
}
.sideMenu .uploadBtn {
  background-color: var(--themeColor);
  color: white;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  font-size: 0.9em;
  font-weight: 700;
  margin-top: 2em;
  display: inline-block;
  transition: 200ms ease-in-out;
}
.sideMenu .uploadBtn:hover {
  transform: translate3d(0, -3px, 0);
  opacity: 0.8;
  text-decoration: none;
}

/* Page Contents */
.pageContents {
  width: 60%;
  padding: 2em;
}
.pageContents .downLoadBtn i {
  vertical-align: text-top;
  margin-right: 0.3em;
}
.pageContents .downLoadBtn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9em;
  padding: 0.6em 1.3em;
  border-radius: 0.3em;
  background-color: var(--themeColor);
  color: white;
  margin-bottom: 3em;
  transition: 200ms ease-in-out;
}
.pageContents .downLoadBtn:hover {
  transform: translate3d(0, -3px, 0);
  opacity: 0.8;
  text-decoration: none;
}
.pageContents .BannerStyleCard {
  position: relative;
  transition: 500ms all ease-in-out;
  padding: 1em;
  height: 290px;
  overflow: hidden;
}
.pageContents .BannerStyleCard #chevron {
  height: 130px;
  width: 100%;
  position: unset;
  padding: 12px 5px;
}
.pageContents .BannerStyleCard #chevron::before {
  left: -1px;
}
.pageContents .BannerStyleCard .bannerStyleCardHeading {
  color: white;
  position: relative;
  z-index: 10;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.5em;
  overflow-x: hidden;
}
.bannerStyleCardImgContainer {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
}
.bannerStyleCardImg {
  width: 100%;
  height: 100%;
}
.pageContents .BannerStyleCard .bannerStyleCardLogo {
  position: absolute;
  height: 60px;
}
.pageContents .BannerStyleCard.BannerStyleCardOne .bannerStyleCardLogo {
  bottom: 20px;
  left: 20px;
}
.pageContents .BannerStyleCard .BannerStyleCardContents .bannerText {
  color: white;
  font-weight: 600;
  font-size: 0.9em;
}
.pageContents .BannerStyleCard .BannerStyleCardContents .adsbannerTag {
  background-color: var(--themeColor);
  color: white;
  padding: 0.5em 1.2em;
  border-radius: 0.3em;
  font-size: 0.9em;
  font-weight: 600;
  display: inline-block;
  margin-top: 1em;
  text-decoration: none;
  transition: 200ms ease-in-out;
}
.pageContents .BannerStyleCard .BannerStyleCardContents .adsbannerTag:hover {
  opacity: 0.7;
}
.pageContents .BannerStyleCard.BannerStyleCardTwo .BannerStyleCardContents {
  margin: -2em -1em 0em -1em;
  padding: 1.3em;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.8);
}
.pageContents .BannerStyleCard.BannerStyleCardTwo .bannerStyleCardLogo {
  position: unset;
}
.pageContents
  .BannerStyleCard.BannerStyleCardTwo
  .BannerStyleCardContents
  .adsbannerTag {
  background-color: var(--chevron-bg);
}
.pageContents .BannerStyleCard.BannerStyleCardTwo #pointer {
  width: 80%;
  height: 35px;
  left: -1px;
  top: -16px;
}
.pageContents .BannerStyleCard.BannerStyleCardTwo .bannerStyleCardHeading {
  margin-top: 0.6em;
}
.pageContents .BannerStyleCard.BannerStyleCardTwo #pointer::before {
  border-bottom: 15px solid transparent;
}
.pageContents .BannerStyleCard.BannerStyleCardThree .bannerStyleThreeHeader {
  background-color: var(--chevron-bg);
  margin: -2em -1em;
  text-align: center;
  padding: 0.7em;
}
.pageContents .BannerStyleCard.BannerStyleCardThree .BannerStyleCardContents {
  margin-top: 1em;
  text-align: left;
}
.pageContents .BannerStyleCard.BannerStyleCardThree .adsbannerTag {
  background-color: var(--chevron-bg);
}
.pageContents .customRow {
  margin-top: 2.5em;
}
.pageContents .BannerStyleCard.BannerStyleCardFour .BannerStyleCardFourCol {
  background-color: var(--chevron-bg);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
.pageContents .BannerStyleCard.BannerStyleCardFour .adsbannerTag {
  background-color: var(--chevron-bg);
}
.pageContents .BannerStyleCard.BannerStyleCardFour .bannerStyleCardLogo {
  bottom: 10px;
  left: 20px;
}
.pageContents .BannerStyleCard.BannerStyleCardFive .bannerStyleFiveHeader {
  background-color: var(--chevron-bg);
  margin-top: -1em;
  text-align: center;
  padding: 0.5em;
  border-radius: 0 0 0.6em 0.6em;
}
.pageContents .BannerStyleCard.BannerStyleCardFive .BannerStyleCardContents {
  margin-top: 2em;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 0.3em -1em 0 -1em;
  padding: 0.3em 2em;
}
.pageContents .BannerStyleCard.BannerStyleCardFive .bannerStyleCardLogo {
  top: 6px;
  left: 15px;
}
.pageContents .BannerStyleCard.BannerStyleCardFive .adsbannerTag {
  background-color: var(--chevron-bg);
}
.pageContents .BannerStyleCard.BannerStyleCardSix .bannerStyleCardLogo {
  position: unset;
}
.pageContents .BannerStyleCard.BannerStyleCardSix #talkbubble {
  width: 100%;
  height: 35px;
  left: 10px;
  top: -18px;
  border-radius: 4px;
}
.pageContents .BannerStyleCard.BannerStyleCardSix .bannerStyleCardHeading {
  line-height: 2.4;
}
.BannerStyleCard.BannerStyleCardSix .BannerStyleCardContents {
  margin-top: -0.9em;
  padding-left: 2em;
}
.pageContents .BannerStyleCard.BannerStyleCardSix .adsbannerTag {
  background-color: var(--chevron-bg);
}
.pageContents .BannerStyleCard.BannerStyleCardSix #talkbubble::before {
  top: 4px;
}
.pageContents .BannerStyleCard .bannerFooter {
  position: absolute;
  right: 15px;
  bottom: 6px;
}
.pageContents .BannerStyleCard .bannerFooter .websiteText {
  color: white;
  font-size: 0.9em;
  font-weight: 700;
}

/* Banner728 */
.pageContents .BannerStyleCard.banner728 {
  height: 90px;
  width: 728px;
  background-color: #c9c9c9;
}
.pageContents .BannerStyleCard.banner728 .bannerStyleCardImg {
  width: 220px;
}
.pageContents .BannerStyleCard.banner728 .bannerStyleCardImgContainer {
  text-align: right;
  z-index: 0;
}
.pageContents .BannerStyleCard.banner728 .bannerStyleCardHeading {
  font-size: 0.9em;
  font-weight: 800;
}
.pageContents .BannerStyleCard.banner728 #chevron {
  height: 70px;
}
.pageContents .BannerStyleCard.banner728 #chevron::before,
.pageContents .BannerStyleCard.banner728 #chevron::after {
  height: 75%;
}
.bodyWrapper
  .pageContents
  .fourthRow
  .BannerStyleCard.banner728
  .bannerStyleCardLogo {
  bottom: 5px;
  left: 60%;
  height: 30px;
}
.pageContents .BannerStyleCard.banner728 .bannerText {
  font-size: 0.7em;
  font-weight: 700;
}
.pageContents
  .BannerStyleCard.banner728.BannerStyleCardThree
  .bannerStyleCardImgContainer {
  z-index: 2;
}
.pageContents .BannerStyleCard.banner728 .adsbannerTag {
  padding: 0.3em 0.8em;
  font-size: 0.7em;
  margin-top: 0.5em;
}
/* .pageContents .BannerStyleCard.banner728 .bannerStyleCardImg {
  width: 300px;
}
.pageContents .BannerStyleCard.banner728 .bannerStyleCardImgContainer {
  text-align: center;
} */

/* Banner300 */
.pageContents .BannerStyleCard.banner300 {
  height: 250px;
  width: 300px;
}
.pageContents .BannerStyleCard.banner300 #chevron::before,
.pageContents .BannerStyleCard.banner300 #chevron::after {
  height: 68%;
}
.pageContents .BannerStyleCard.banner300 .bannerStyleCardHeading {
  font-size: 0.9em;
  font-weight: 800;
}
.pageContents .BannerStyleCard.banner300 .bannerText {
  font-size: 0.8em;
  font-weight: 700;
}
.pageContents .BannerStyleCard.banner300 .adsbannerTag {
  padding: 0.4em 1em;
  font-size: 0.8em;
  margin-top: 0.7em;
}
.pageContents .BannerStyleCard.banner300 .bannerStyleCardLogo {
  height: 50px;
}
.pageContents .BannerStyleCard.banner300 #chevron {
  height: 100px;
}

/* Banner100 */
.pageContents .BannerStyleCard.banner100 {
  height: 120px;
}
.pageContents .BannerStyleCard.banner100 #chevron::before,
.pageContents .BannerStyleCard.banner100 #chevron::after {
  height: 60%;
}
.pageContents .BannerStyleCard.banner100 .bannerText {
  font-size: 0.7em;
  font-weight: 700;
}
.pageContents .BannerStyleCard.banner100 .adsbannerTag {
  padding: 0.4em 1em;
  font-size: 0.8em;
  margin-top: 0.7em;
}
.pageContents .BannerStyleCard.banner100 .bannerStyleCardLogo {
  height: 40px;
  bottom: 8px;
  left: 15px;
}
.pageContents .BannerStyleCard.banner100 .bannerStyleCardHeading {
  font-size: 0.8em;
  font-weight: 800;
}
.pageContents .BannerStyleCard.banner100 #chevron {
  height: 70px;
}

/* Banner 160 */
.pageContents .BannerStyleCard.banner160 {
  height: 600px;
}
.pageContents .BannerStyleCard.banner160 #chevron::before,
.pageContents .BannerStyleCard.banner160 #chevron::after {
  height: 60%;
}
.pageContents .BannerStyleCard.banner160 .bannerText {
  font-size: 0.7em;
  font-weight: 700;
}
.pageContents .BannerStyleCard.banner160 .adsbannerTag {
  padding: 0.4em 1em;
  font-size: 0.8em;
  margin-top: 0.7em;
}
.pageContents .BannerStyleCard.banner160 .bannerStyleCardLogo {
  height: 40px;
  bottom: 59px;
  left: 5px;
}
.pageContents .BannerStyleCard.banner160 .bannerStyleCardHeading {
  font-size: 0.8em;
  font-weight: 800;
}
.pageContents .BannerStyleCard.banner160 #chevron {
  height: 70px;
}
.pageContents .BannerStyleCard.banner160 .bannerFooter .websiteText {
  font-size: 0.8em;
}

/* Images Side */
.imagesSide {
  width: 20%;
  padding: 2em 1em;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.imagesSide .adBannerImg {
  width: 100%;
  margin-bottom: 2em;
  height: 180px;
  cursor: pointer;
}
.bodyWrapper .imagesSide .footerSearchArea input {
  background-color: #f8f9fa;
  margin-bottom: 2em;
}
.bodyWrapper .hideBtn {
  display: none;
  text-decoration: none;
  font-weight: 700;
  color: white;
  background-color: var(--themeColor);
  padding: 0.5em 1.3em;
  border-radius: 40px 0 0 40px;
  position: absolute;
}
.bodyWrapper .imagesShowBtn {
  left: -230px;
  top: 30px;
}
.bodyWrapper .bannersStyleBtn {
  right: -230px;
  top: 30px;
  border-radius: 0 40px 40px 0;
}

/* Media Queries */
@media (max-width: 992px) {
  .bannersSection .bannersCard {
    width: 100%;
    margin-bottom: 2.5em;
  }
  .bodyWrapper .sideMenu {
    position: fixed;
    left: -270px;
    z-index: 1000;
    transition: 500ms ease-in-out;
  }
  .bodyWrapper .sideMenu.show {
    left: 0;
  }
  .bodyWrapper .imagesSide {
    position: fixed;
    right: -270px;
    background-color: white;
    z-index: 1000;
    transition: 500ms ease-in-out;
  }
  .bodyWrapper .imagesSide.show {
    right: 0;
  }
  .pageContents {
    width: 100%;
  }
  .pageContents .firstRow {
    width: 70%;
  }
  .pageContents .secondRow {
    width: 32%;
  }
  .pageContents .thirdRow {
    width: 50%;
  }
  .bodyWrapper .hideBtn {
    display: inline-block;
  }
}