/**
*   =============================
*      Jacks On Live Project
*   =============================
*
*   @author Anton Zekeriev Rodin
*   @url www.azr.es
*   @description CSS Stylesheet for Jacks On Live Project.
*   @version 2
*/
/* Basscss Margin */
.m0 {
  margin: 0;
}

.mt0 {
  margin-top: 0;
}

.mr0 {
  margin-right: 0;
}

.mb0 {
  margin-bottom: 0;
}

.ml0 {
  margin-left: 0;
}

.mx0 {
  margin-left: 0;
  margin-right: 0;
}

.my0 {
  margin-top: 0;
  margin-bottom: 0;
}

.m1 {
  margin: var(--space-1);
}

.mt1 {
  margin-top: var(--space-1);
}

.mr1 {
  margin-right: var(--space-1);
}

.mb1 {
  margin-bottom: var(--space-1);
}

.ml1 {
  margin-left: var(--space-1);
}

.mx1 {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}

.my1 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

.m2 {
  margin: var(--space-2);
}

.mt2 {
  margin-top: var(--space-2);
}

.mr2 {
  margin-right: var(--space-2);
}

.mb2 {
  margin-bottom: var(--space-2);
}

.ml2 {
  margin-left: var(--space-2);
}

.mx2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.my2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.m3 {
  margin: var(--space-3);
}

.mt3 {
  margin-top: var(--space-3);
}

.mr3 {
  margin-right: var(--space-3);
}

.mb3 {
  margin-bottom: var(--space-3);
}

.ml3 {
  margin-left: var(--space-3);
}

.mx3 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.my3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.m4 {
  margin: var(--space-4);
}

.mt4 {
  margin-top: var(--space-4);
}

.mr4 {
  margin-right: var(--space-4);
}

.mb4 {
  margin-bottom: var(--space-4);
}

.ml4 {
  margin-left: var(--space-4);
}

.mx4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.my4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.mxn1 {
  margin-left: -var(--space-1);
  margin-right: -var(--space-1);
}

.mxn2 {
  margin-left: -var(--space-2);
  margin-right: -var(--space-2);
}

.mxn3 {
  margin-left: -var(--space-3);
  margin-right: -var(--space-3);
}

.mxn4 {
  margin-left: -var(--space-4);
  margin-right: -var(--space-4);
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

:root {
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
}

/* Basscss Padding */
.p0 {
  padding: 0;
}

.pt0 {
  padding-top: 0;
}

.pr0 {
  padding-right: 0;
}

.pb0 {
  padding-bottom: 0;
}

.pl0 {
  padding-left: 0;
}

.px0 {
  padding-left: 0;
  padding-right: 0;
}

.py0 {
  padding-top: 0;
  padding-bottom: 0;
}

.p1 {
  padding: var(--space-1);
}

.pt1 {
  padding-top: var(--space-1);
}

.pr1 {
  padding-right: var(--space-1);
}

.pb1 {
  padding-bottom: var(--space-1);
}

.pl1 {
  padding-left: var(--space-1);
}

.py1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.px1 {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.p2 {
  padding: var(--space-2);
}

.pt2 {
  padding-top: var(--space-2);
}

.pr2 {
  padding-right: var(--space-2);
}

.pb2 {
  padding-bottom: var(--space-2);
}

.pl2 {
  padding-left: var(--space-2);
}

.py2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.px2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.p3 {
  padding: var(--space-3);
}

.pt3 {
  padding-top: var(--space-3);
}

.pr3 {
  padding-right: var(--space-3);
}

.pb3 {
  padding-bottom: var(--space-3);
}

.pl3 {
  padding-left: var(--space-3);
}

.py3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.px3 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.p4 {
  padding: var(--space-4);
}

.pt4 {
  padding-top: var(--space-4);
}

.pr4 {
  padding-right: var(--space-4);
}

.pb4 {
  padding-bottom: var(--space-4);
}

.pl4 {
  padding-left: var(--space-4);
}

.py4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.px4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

:root {
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
}

/**
  Center Absolute
  Center any div inside other div horizontaly and verticaly
*/
/*
MEDIA QUERY MANAGER
Currently I prefer the pixel...
I cant see any reason for use EM for this purpose d -__- b

0   - 600   Phone
600 - 900   Tablet portrait
900 - 1200  Tablet landscape
(1200-1800) Default style
1800+       Big desktop

600/16 = 37,5em (depends of the default font size)

 */
*, :after, :before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
}

html {
  font-size: 62.5%;
}
@media only screen and (min-width: 1800px) {
  html {
    font-size: 75%;
  }
}
@media only screen and (max-width: 1200px) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 900px) {
  html {
    font-size: 50%;
  }
}

body {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #5a5a5a;
  font-size: 1.8rem;
  line-height: 1.5;
}

a {
  text-decoration: none;
  font-weight: bold;
  color: #000;
}
a:hover, a:focus {
  color: #000;
}
a:active, a:visited {
  color: #000;
}

hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 0;
  border-top: 1px solid #eeeeee;
}

p {
  margin: 1rem 0;
}

h1 {
  font-size: 3.6rem;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 2.4rem;
}

h4 {
  font-size: 1.8rem;
}

.text-small, .ts {
  font-size: 1.2rem;
}
@media only screen and (max-width: 600px) {
  .text-small, .ts {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 900px) {
  .text-small, .ts {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 1200px) {
  .text-small, .ts {
    font-size: 1.4rem;
  }
}

.b {
  font-weight: bold;
}

.r {
  font-weight: normal;
}

.i {
  font-style: italic;
}

.uc {
  text-transform: uppercase;
}

.cap {
  text-transform: capitalize;
}

.tl, .text-left {
  text-align: left;
}

.tc, .text-center {
  text-align: center;
}

.tr, .text-right {
  text-align: right;
}

.tj, .text-justify {
  text-align: justify;
}

.thumbnail {
  border: 1px solid #dddddd;
  border-radius: 4px;
  height: auto;
  padding: 0.5rem;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.borders-rounded {
  border-radius: 50%;
}

.width-100 {
  width: 100%;
}

.background-black {
  background-color: black;
}

.background-grey {
  background-color: #999999;
}

.background-light-grey {
  background-color: #dddddd;
}

.border-bottom {
  border-bottom: 0.4rem solid #333333;
}

.position-relative {
  position: relative;
}

.overflow-hidden,
.oh {
  overflow: hidden;
}

.display-none,
.dn {
  display: none;
}

.grey-border-row {
  background-color: #f5f5f5;
  padding: 1rem;
  border-top: 2px solid black;
}

.color-white {
  color: #ffffff;
  text-shadow: 1px 1px 1px #000000;
}

.color-red {
  color: red;
}

.no-bullet,
.nb {
  list-style: none;
}

.clear-both,
.cb {
  clear: both;
}

.flex {
  display: flex;
}

.wrap {
  flex-wrap: wrap;
}

.grow-item {
  flex-grow: 2;
}

.jc-center {
  justify-content: center;
}
.jc-space-between {
  justify-content: space-between;
}
.jc-flex-start {
  justify-content: flex-start;
}
.jc-flex-end {
  justify-content: flex-end;
}

.ai-center {
  align-items: center;
}

.jol-hide {
  display: none;
}
@media only screen and (min-width: 1800px) {
  .jol-hide__lg {
    display: none;
  }
}
@media only screen and (max-width: 1200px) {
  .jol-hide__md {
    display: none;
  }
}
@media only screen and (max-width: 900px) {
  .jol-hide__sm {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .jol-hide__xs {
    display: none;
  }
}

.jol-show {
  display: none;
}
@media only screen and (min-width: 1800px) {
  .jol-show__lg {
    display: block;
  }
}
@media only screen and (max-width: 1200px) {
  .jol-show__md {
    display: block;
  }
}
@media only screen and (max-width: 900px) {
  .jol-show__sm {
    display: block;
  }
}
@media only screen and (max-width: 600px) {
  .jol-show__xs {
    display: block;
  }
}

.flex-row {
  display: flex;
}
.flex-row.flex-row--multiline {
  flex-wrap: wrap;
}
.flex-row.flex-row--items-stretch {
  align-items: stretch;
}
.flex-row.flex-row--center {
  align-items: center;
}
.flex-row.items-start {
  align-items: flex-start;
}

.fcol {
  flex: 1;
}
.fcol.is-12 {
  width: 100%;
  flex: none;
}
.fcol.is-8 {
  width: 66.66667%;
  flex: none;
}
.fcol.is-6 {
  width: 50%;
  flex: none;
}
.fcol.is-4 {
  width: 33.3%;
  flex: none;
}
.fcol.is-3 {
  width: 25%;
  flex: none;
}
.fcol.is-2 {
  width: 16.66667%;
  flex: none;
}
.fcol.no-flex {
  flex: none;
}

/* NEW GRID */
.col {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-12 {
  width: 100%;
}
@media only screen and (min-width: 1800px) {
  .col__lg-2 {
    width: 16.66%;
  }
  .col__lg-3 {
    width: 25%;
  }
  .col__lg-4 {
    width: 33.33%;
  }
  .col__lg-5 {
    width: 41.66%;
  }
  .col__lg-6 {
    width: 50%;
  }
  .col__lg-7 {
    width: 58.33%;
  }
  .col__lg-8 {
    width: 66.66%;
  }
  .col__lg-9 {
    width: 75%;
  }
  .col__lg-10 {
    width: 83.33%;
  }
  .col__lg-12 {
    width: 100%;
  }
}
@media only screen and (max-width: 1200px) {
  .col__md-2 {
    width: 16.66%;
  }
  .col__md-3 {
    width: 25%;
  }
  .col__md-4 {
    width: 33.33%;
  }
  .col__md-5 {
    width: 41.66%;
  }
  .col__md-6 {
    width: 50%;
  }
  .col__md-7 {
    width: 58.33%;
  }
  .col__md-8 {
    width: 66.66%;
  }
  .col__md-9 {
    width: 75%;
  }
  .col__md-10 {
    width: 83.33%;
  }
  .col__md-12 {
    width: 100%;
  }
}
@media only screen and (max-width: 900px) {
  .col__sm-2 {
    width: 16.66%;
  }
  .col__sm-3 {
    width: 25%;
  }
  .col__sm-4 {
    width: 33.33%;
  }
  .col__sm-5 {
    width: 41.66%;
  }
  .col__sm-6 {
    width: 50%;
  }
  .col__sm-7 {
    width: 58.33%;
  }
  .col__sm-8 {
    width: 66.66%;
  }
  .col__sm-9 {
    width: 75%;
  }
  .col__sm-10 {
    width: 83.33%;
  }
  .col__sm-12 {
    width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .col__xs-2 {
    width: 16.66%;
  }
  .col__xs-3 {
    width: 25%;
  }
  .col__xs-4 {
    width: 33.33%;
  }
  .col__xs-5 {
    width: 41.66%;
  }
  .col__xs-6 {
    width: 50%;
  }
  .col__sx-7 {
    width: 58.33%;
  }
  .col__xs-8 {
    width: 66.66%;
  }
  .col__xs-9 {
    width: 75%;
  }
  .col__xs-10 {
    width: 83.33%;
  }
  .col__xs-12 {
    width: 100%;
  }
}

.navigation__logo img {
  width: 30rem;
  height: auto;
}
@media only screen and (max-width: 900px) {
  .navigation__logo img {
    width: 25rem;
  }
}
.navigation__hamburger, .navigation__login {
  cursor: pointer;
}
.navigation__svg {
  margin: 0 auto;
  padding: 0;
  display: block;
  height: 3rem;
  width: 3rem;
  fill: #fdca01;
}
.navigation__svg:hover, .navigation__svg:focus {
  fill: #ffffff;
}
.navigation__svg:visited, .navigation__svg:active {
  fill: #fdca01;
}
.navigation__user {
  cursor: pointer;
  position: relative;
}
.navigation__user img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 2px solid #fdca01;
}
.navigation__user img:hover, .navigation__user img:focus {
  border-color: #ffffff;
}

.navigation-toggle {
  display: none;
}

.navigation-menu {
  display: flex;
  justify-content: flex-end;
}
.navigation-menu__link {
  padding: 1rem;
  margin-left: 2rem;
  color: #fdca01;
}
.navigation-menu__link:hover, .navigation-menu__link:focus {
  color: #ffffff;
  text-decoration: none;
}
.navigation-menu__link:active, .navigation-menu__link:visited {
  color: #fdca01;
}
@media only screen and (max-width: 900px) {
  .navigation-menu {
    flex-direction: column;
  }
}

/**
Navigation search
 */
.navigation-search {
  width: 30rem;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 600px) {
  .navigation-search {
    display: none;
  }
}
.navigation-search__input {
  margin: 0;
  background-color: #333333;
  border: 2px solid #fdca01;
  border-radius: 15px;
  width: 100%;
  height: 3.5rem;
  font-family: inherit;
  font-size: 1.4rem;
  color: #ffffff;
  transition: all 0.5s ease;
}
.navigation-search__input:focus {
  width: 100%;
  outline: none;
  border: 2px solid #000000;
  background-color: #eeeeee;
  color: #333333;
}
.navigation-search__button {
  margin-left: -3.2rem;
  border: none;
  background-color: transparent;
}
.navigation-search__button:focus {
  outline: none;
}
.navigation-search__icon {
  margin: 0 auto;
  padding: 0;
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  fill: #5a5a5a;
}

/**
  Dropdown menu
 */
.user-dropdown {
  background-color: #eeeeee;
  box-shadow: 3px 3px 3px #000000;
  border-radius: 5px;
  z-index: 999;
  position: absolute;
  right: -3.5rem;
  margin-top: 1rem;
  width: 20rem;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-direction: column;
  transition: all 0.5s ease;
}
.user-dropdown__hide {
  transform: translateY(-1rem);
  opacity: 0;
  pointer-events: none;
}
.user-dropdown__show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.user-dropdown__separator {
  width: 100%;
  height: 2px;
  border-bottom: 1px solid #999999;
}
.user-dropdown__item {
  background-color: #eeeeee;
  padding: 0.5rem 1rem;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.user-dropdown__item:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.user-dropdown__item:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.user-dropdown__item:focus, .user-dropdown__item:hover {
  background-color: #dddddd;
}
.user-dropdown__link {
  font-weight: 400;
  color: #000000;
}
.user-dropdown__link:hover, .user-dropdown__link:focus {
  text-decoration: none;
}

.container {
  max-width: 117rem;
  margin: 0 auto;
}
@media only screen and (max-width: 1200px) {
  .container {
    max-width: 90rem;
  }
}
@media only screen and (max-width: 900px) {
  .container {
    max-width: 80rem;
  }
}

.container-fluid {
  width: 100%;
}

.container,
.container-fluid {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media only screen and (max-width: 1200px) {
  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media only screen and (max-width: 900px) {
  .container,
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media only screen and (min-width: 1800px) {
  .container,
  .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.submenu-container {
  border-top: 3px solid #222;
  background-color: #333;
}

.header-submenu {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 500px) {
  .header-submenu {
    overflow-x: scroll;
  }
}
.header-submenu__item {
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #333333;
}
.header-submenu__item--active {
  border-bottom: 3px solid #fdca01;
}
@media only screen and (max-width: 500px) {
  .header-submenu__item--active {
    order: -1;
  }
}
.header-submenu__item:hover {
  border-color: #fdca01;
}
.header-submenu__link:hover {
  text-decoration: none;
  color: #fdca01;
}
.header-submenu__link, .header-submenu__link:active, .header-submenu__link:visited {
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0.1rem;
  color: #ddd;
  font-size: 2rem;
  padding: 1rem 1rem 0.5rem 1rem;
  display: block;
}

.buscar {
  display: flex;
  align-items: center;
}
.buscar__input {
  margin: 0;
  background-color: #eeeeee;
  border: 2px solid #5a5a5a;
  border-radius: 5px;
  width: 100%;
  height: 4rem;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  transition: all 0.5s;
}
.buscar__input:focus {
  background-color: #ffffff;
  outline: none;
  border: 2px solid #000000;
  box-shadow: 3px 3px 3px black;
}
.buscar__button {
  margin-left: -3.2rem;
  border: none;
  background-color: transparent;
}
.buscar__button:focus {
  outline: none;
}
.buscar__icon {
  margin: 0 auto;
  padding: 0;
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  fill: #5a5a5a;
}

/* Footer & Provincias Start */
/*******************************/
.footer-cover {
  background: url("https://d19p9in64smmdy.cloudfront.net/template/footer-bg-optimized.png") no-repeat;
  background-size: cover;
}

.provincias {
  display: inline-block;
  margin-top: 20rem;
  min-height: 30rem;
}
.provincias__lista {
  list-style: none;
}
.provincias__item {
  float: left;
  width: 15rem;
  margin: 0.2rem 1rem;
}
.provincias__link, .provincias__link:active, .provincias__link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: bold;
  display: block;
  color: white;
  text-shadow: 2px 2px 2px black;
}
.provincias__link:hover, .provincias__link:focus, .provincias__link:active:hover, .provincias__link:active:focus, .provincias__link:visited:hover, .provincias__link:visited:focus {
  color: #fdca01;
  text-decoration: none;
}

.footer {
  display: inline-block;
  min-height: 20rem;
}
.footer__paragraph {
  color: #dddddd;
  margin: 1rem;
}
.footer__paragraph a {
  color: #dddddd;
  text-decoration: underline;
}
.footer__paragraph a:hover {
  color: #fdca01;
}

.alert {
  border: 1px solid transparent;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
}
.alert-primary {
  color: #111111;
  background-color: #f5f5f5;
  border-color: #000000;
}
.alert-danger {
  color: #ffffff;
  background-color: #f14668;
  border-color: #000000;
}
.alert-warning {
  color: rgba(0, 0, 0, 0.7);
  background-color: #ffdd57;
  border-color: #000000;
}
.alert-success {
  color: #ffffff;
  background-color: #48c774;
  border-color: #000000;
}

.tag {
  border: 2px solid transparent;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 0.4rem;
  color: #4a4a4a;
  display: inline-flex;
  font-size: 1.2rem;
  height: 2em;
  justify-content: center;
  line-height: 1.5;
  padding-left: 0.75em;
  padding-right: 0.75em;
  white-space: nowrap;
}
.tag-xs {
  font-size: 1rem;
}
.tag-primary {
  color: #111111;
  background-color: #f5f5f5;
}
.tag-primary:hover {
  border-color: #000000;
}
.tag-danger {
  color: #ffffff;
  background-color: #f14668;
}
.tag-danger:hover {
  border-color: #000000;
}
.tag-warning {
  color: rgba(0, 0, 0, 0.7);
  background-color: #ffdd57;
}
.tag-warning:hover {
  border-color: #000000;
}
.tag-success {
  color: #ffffff;
  background-color: #48c774;
}
.tag-success:hover {
  border-color: #000000;
}
.tag-dark {
  color: #ffffff;
  background-color: #5a5a5a;
}
.tag-dark:hover {
  border-color: #000000;
}
.tag-black {
  color: #ffffff;
  background-color: #000000;
  border-color: #000000;
}
.tag-black:hover {
  border-color: #5a5a5a;
}
.tag-pointer {
  cursor: pointer;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn-group-xs > .btn, .btn-xs {
  padding: 1px 5px;
  font-size: 1.2rem;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-default {
  color: #333333;
  background-color: white;
  border-color: #cccccc;
}

.btn-info {
  color: #fdca01;
  background-color: black;
  border-color: #eea236;
}

.btn-warning {
  color: black;
  background-color: #fdca01;
  border-color: black;
}

.quienes-foto {
  width: 20rem;
  height: 20rem;
}
@media only screen and (max-width: 900px) {
  .quienes-foto {
    width: 15rem;
    height: 15rem;
  }
}