﻿
.pre22-main .pre-22-multimedia {
  /*border: 1px solid transparent;*/
}
.pre22-main .pre-22-multimedia .mascara-multimedia {
  background-color: #2456B5;
  
  height: 350px;
  position: absolute;
  width: 100%;
  margin-top: -125px;
  /*New*/
  text-align: center;
  margin-top: -150px;
  padding: 10px 0px;
 
  /**/
}
.pre22-main .pre-22-multimedia .mascara-multimedia a,
.pre22-main .pre-22-multimedia .mascara-multimedia h2 {
  color: #fff;
  margin: 1rem 0;
}

.pre22-main .mascara-contenido{
	z-index: 10!important;
}
.pre22-main .pre-22-multimedia h3 {
  color: #fff;
  font-weight: 600;
}
.pre22-main .pre-22-multimedia .multimedia {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 190px;
  gap: 10px;
}
.pre22-main .pre-22-multimedia .info {
  /*New*/
  width: 340px;
  height: 340px;
  /**/
  border: 0px solid gray;
}
.pre22-main .pre-22-multimedia .info h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 100%;
  margin-top: 0px;
}
 
.pre22-main .hovertext {
  position: relative;
}
.pre22-main .hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 0px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pre22-main .hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}


/* Multimedia*/
@media screen and (min-width: 1024px) {
  .pre22-main .pre-22-multimedia .mascara-multimedia {
    width: 85%;
    height: 215px;
    right: 0;
    margin-top: 112px;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
  }
  .pre22-main .pre-22-multimedia .mascara-contenido {
    position: relative;
    width: 225px;
    margin-left: 595px;
  }
  /*New*/
  .pre22-main .pre-22-multimedia .mascara-multimedia h2{
     font-size: 2.0rem !important;  
  }
  .pre22-main .pre-22-multimedia .mascara-multimedia a{
	 font-size: 1rem !important;
	 padding: 5px 10px;
	 transform: translate3d(0, 0, 0);
  }

  .pre22-main .pre-22-multimedia .mascara-multimedia a:hover{
	  
	 border-radius: 10px;
	 background-color: #32404d !important;
  }
 
  /**/
  .pre22-main .pre-22-multimedia .mascara-contenido h3 {
    margin: 0 0;
  }
  .pre22-main .pre-22-multimedia .multimedia {
    justify-content: inherit;
    width: 1024px;
  }
  .pre22-main .pre-22-multimedia .info {
    width: 225px;
    height: 225px;
  }
  .pre22-main .pre-22-multimedia .info h1 {
    height: 100%;
    margin-top: 0px;
  }
  .pre22-main .pre-22-multimedia .m3 {
    margin-right: 25%;
  }
  .pre22-main .pre-22-multimedia .m4 {
    margin-left: 25%;
  }
  .pre22-main .pre-22-multimedia .m7 {
    margin-left: 50%;
  }
}/* Multimedia*/
@media screen and (min-width: 1024px) {
  .pre22-main .pre-22-multimedia .mascara-multimedia {
    width: 85%;
    height: 215px;
    right: 0;
    margin-top: 112px;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
  }
  .pre22-main .pre-22-multimedia .mascara-contenido {
    position: relative;
    width: 225px;
    margin-left: 595px;
  }
  .pre22-main .pre-22-multimedia .mascara-contenido h3 {
    margin: 0 0;
  }
  .pre22-main .pre-22-multimedia .multimedia {
    justify-content: inherit;
    width: 1024px;
  }
  .pre22-main .pre-22-multimedia .info {
    width: 225px;
    height: 225px;
  }
  .pre22-main .pre-22-multimedia .info h1 {
    height: 100%;
    margin-top: 0px;
  }
  .pre22-main .pre-22-multimedia .m3 {
    margin-right: 25%;
  }
  .pre22-main .pre-22-multimedia .m4 {
    margin-left: 25%;
  }
  .pre22-main .pre-22-multimedia .m7 {
    margin-left: 50%;
  }
}
@media screen and (min-width: 1280px) {
  .pre-22-multimedia .mascara-multimedia {
    width: 82% !important;
    height: 270px !important;
    margin-top: 135px !important;
  }
  .pre-22-multimedia .mascara-contenido {
    margin-left: 690px !important;
    width: 270px !important;
  }
  .pre-22-multimedia .multimedia {
    justify-content: inherit;
    width: 1280px !important;
  }
  .pre-22-multimedia .info {
    height: 270px !important;
    width: 270px !important;
  }
}
@media screen and (min-width: 1400px) {
  .pre-22-multimedia .multimedia {
    justify-content: inherit;
    width: 1400px !important;
  }
  .pre-22-multimedia .info {
    height: 315px !important;
    width: 315px !important;
  }
  .pre-22-multimedia .mascara-multimedia {
    width: 82% !important;
    height: 315px !important;
    margin-top: 156px !important;
  }
  .pre-22-multimedia .mascara-contenido {
    margin-left: 775px !important;
    width: 312px !important;
    height: 158px;
  }
}
@media screen and (min-width: 1600px) {
  .pre22-main .pre-22-multimedia .mascara-multimedia {
    width: 75% !important;
  }
  .pre22-main .pre-22-multimedia .mascara-contenido {
    margin-left: 807px !important;
  }
}