#imageGroups {
  position: relative;
  height: auto;
  overflow: hidden;
  margin-top: 57px;
  width: 88%;
  margin: 0 auto 10px auto;
  float: left
}

#imageGroups:nth-child(even) {
  float: right;
  margin-right: 6%
}

#imageGroups:nth-child(odd) {
  margin-left: 8.5%
}

.promoColumnImage {
  font-variant: JIS04;
  position: relative;
  display: block;
  width: 46%;
  height: 30vw;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 2%;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  cursor: pointer
}

.grayscaleImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  -moz-transition: opacity 0.4s ease-out;
  -webkit-transition: opacity 0.4s ease-out;
  -o-transition: opacity 0.4s ease-out
}

.promoWideImage:hover .grayscaleImg,
.promoColumnImage:hover .grayscaleImg {
  opacity: 1
}

.promoImageColumnText:hover {
  display: block;
  color: #00326c
}

.promoWideImage:hover .description {
  color: #fff;
  display: block;
  bottom: 0;
  position: absolute;
}

#promoWideImage:hover .promoImageColumnText {
  display: block
}

.promoWideImage {
  position: relative;
  float: left;
  width: 100%;
  height: 930px;
  margin-bottom: 22px;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  cursor: pointer
}

.promoWideImage:nth-child(even) {
  float: right
}

.fullScreenPromo {
  width: 96%;
  margin-left: 2%;
  margin-top: 1%;
  position: relative;
  display: block;
  margin-bottom: 10px
}

.fullScreenContainer {
  display: block;
  width: 100%;
  position: relative;
  height: auto;
  overflow: hidden
}

.description {
  font-size: 15px;
  text-decoration: underline;
  display: block;
  position: absolute;
  bottom: 6%;
  text-align: center;
  width: 100%;
}

.promoImageColumnText {
  position: absolute;
  bottom: 10%;
  text-align: center;
  color: #fff;
  float: left;
  font-size: 40px;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  overflow: hidden;
  transition: color 0.4s ease-out;
  -moz-transition: color 0.4s ease-out;
  -webkit-transition: color 0.4s ease-out;
  -o-transition: color 0.4s ease-out
}

.bkgHovered {
  opacity: .8
}

.textHovered {
  opacity: 1
}

#containerSquareDiv {
  width: 50%;
  height: 700px;
  position: relative;
  background-color: #f6f5f3;
  color: #686767;
  float: right;
  margin: 0 auto;
  text-align: center
}

.textoSquareDiv {
  text-align: center;
  position: relative;
  color: #686767;
  top: 50%;
  transform: translateY(-50%)
}

#textoNivel2 {
  font-weight: 300
}

#textoNivel1 {
  font-weight: 500;
  text-transform: uppercase
}

@media screen and (max-width: 768px) {
  #containerSquareDiv {
    width: 100%;
    height: 75px
  }

  .promoColumnImage {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    display: block;
    float: none;
    margin-bottom: 15px
  }

  .promoWideImages {
    width: calc(50% - 10px);
    height: 167px !important;
    display: block;
    margin-bottom: 0px !important;
    float: left !important
  }

  .promoWideImage {
    margin-left: 0;
    margin-right: 0;
    height: 100%;
    width: 100%;
    margin-bottom: 0
  }

  .promoImageColumnText {
    font-size: 17px;
    left: 0;
    top: 13px;
    margin-left: 9px
  }

  .promoColumnImage .promoImageColumnText {
    font-size: 25px
  }

  .promoWideImage:nth-child(even) {
    float: left
  }

  .fullScreenPromo {
    width: 100%;
    margin-left: 0%
  }

  .promoWideImage {
    position: relative;
    width: 100%;
    height: 990px;
    margin-bottom: 28px
  }

  #imageGroups:nth-child(even) {
    margin: 10px 5%;
    width: 90%;
    height: auto;
    margin-bottom: 0;
    margin-top: 15px !important
  }

  #imageGroups:nth-child(odd) {
    width: 90%;
    height: 460px;
    margin: 0;
    margin-left: 5%
  }
}