.personas ul,
.personas li {
  margin: 0 ;
  padding: 0 ;
  border: 0 ;
  font-size: 100% ;
  font: inherit ;
  vertical-align: baseline ;
}
/* HTML5 display-role reset for older browsers */
section {
  display: block ;
}
/* body { */
  /* line-height: 1 ; */
/* } */
.personas ul {
  list-style: none ;
}
*:focus {
  outline: none ;
}
/**************************************************************************************************
 *
 *  @Section: Global Styles
 *
***************************************************************************************************/
.personas a {
  text-decoration: none ;
  color: #d20050 ;
  display: inline-block ;
}
.personas a:hover {
  text-decoration: none ;
  color: #e40157 ;
}
.personas a:focus,
.personas a:active {
  text-decoration: none ;
}
.personas img {
  width: 100% ;
  height: auto ;
  display: block ;
}
.bm-container {
  width: 80% ;
  min-width: 728px ;
  margin: 0 auto ;
  position: relative ;
  padding: 100px 0 ;
  box-sizing: border-box ;
  max-width: 1280px ;
  z-index: 10 ;
}
.bm-container:after {
  content: '' ;
  display: block ;
  clear: both ;
  height: 0 ;
  line-height: 0 ;
}
.bm-container .section-intro {
  text-align: center ;
  margin-bottom: 40px ;
}
.bm-container .section-intro h2, .some-notes .section-intro h2 {
  font-size: 4rem ;
  margin-bottom: 20px ;
  line-height: 1 ;
  color: #333333;
}
.bm-container .section-intro p,
.bm-container .section-intro a {
  font-size: 2.1rem ;
}
.bm-container .section-intro p {
  width: 70% ;
  margin: auto ;
  color: rgb(245, 245, 245) ;
}
section {
  position: relative ;
}
/**************************************************************************************************
 *
 *  @Section: Buttons
 *
***************************************************************************************************/
.info-body .btn {
  text-transform: uppercase ;
  line-height: 1 ;
  padding: 13px 25px ;
  background-color: #d20050 ;
  color: #ffffff ;
  border: 0 ;
  outline: 0 ;
  cursor: pointer ;
  box-sizing: border-box ;
  text-align: center ;
  letter-spacing: 2px ;
  font-family: "texta_altheavy", Arial, Helvetica, Sans-Serif ;
}
.info-body .btn:hover {
  background-color: #e40157 ;
  color: #ffffff ;
  cursor: pointer ;
}

/**************************************************************************************************
 *
 *  @Section: Personas Section
 *
***************************************************************************************************/
.personas {
  position: relative ;
  z-index: 2 ;
}
.personas:before {
  content: '';
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  z-index: 1;
  top: 0;
  right: 0;
  width: 755px;
  height: 427px;
  background-image: url(../images/bg-content-top.png);
  top: -30px;
  left: -12%;
}
.personas:after {
  content: '' ;
  position: absolute ;
  display: block ;
  background-repeat: no-repeat ;
  z-index: 1 ;
  top: 0 ;
  right: 0 ;
  width: 305px ;
  height: 318px ;
  background-image: url(../images/bg-circle-bottom-left.png) ;
  top: 30% ;
}
.personas .row {
  margin: 100px 0 ;
}
.personas .row:after {
  content: '' ;
  display: block ;
  clear: both ;
  height: 0 ;
  line-height: 0 ;
}
.personas .row ul .persona {
  position: relative ;
  float: left ;
  width: 24% ;
  margin-right: 1% ;
}
.personas .row ul .persona:first-child .information .info-head {
  background-color: #fa8014 ;
  height:130px;

}
.personas .row ul .persona:first-child .information .info-body {
  background-color: #fb8d2c ;
  height:250px;
  overflow-y:scroll;
}
.personas .row ul .persona:nth-child(2) .information .info-head {
  background-color: #00aad2 ;
  height:130px;
}
.personas .row ul .persona:nth-child(2) .information .info-body {
  background-color: #1ab3d7 ;
   height:250px;
  overflow-y:scroll;
}
.personas .row ul .persona:nth-child(3) .information .info-head {
  background-color: #443c86 ;
  height:130px;
}
.personas .row ul .persona:nth-child(3) .information .info-body {
  background-color: #4e468c ;
   height:250px;
  overflow-y:scroll;
}
.personas .row ul .persona:last-child .information .info-head {
  background-color: #8cd228 ;
  height:130px;
}
.personas .row ul .persona:last-child .information .info-body {
  background-color: #98d73e ;
   height:250px;
  overflow-y:scroll;
}
.personas .row ul .persona:hover .information {
  opacity: 1 ;
  transition: opacity 0.5s ease ;
  z-index: 100 ;
}
.personas .row ul .persona .information {
  position: absolute ;
  width: 100% ;
  max-width: 100% ;
  top: 0 ;
  opacity: 0 ;
  transition: opacity 0.5s ease ;
}
.personas .row ul .persona .information .info-head,
.personas .row ul .persona .information .info-body {
  color: #ffffff ;
  padding: 15px ;
  
  box-sizing: border-box ;
}
.personas .row ul .persona .information .info-head h4,
.personas .row ul .persona .information .info-body h4 {
  font-size: 1.8rem ;
  font-family: "texta_altblack", Arial, Helvetica, Sans-Serif ;
  margin-bottom: 10px ;
}
.personas .row ul .persona .information .info-head li,
.personas .row ul .persona .information .info-body li {
  font-size: 1.6rem ;
}
.personas .row ul .persona .information .info-body ul {
  list-style-type: disc ;
  padding-left: 15px ;
}
.personas .row ul .persona .information .info-body ul li {
  float: none ;
  width: 100% ;
  margin: 0 0 10px ;
}
.personas .row ul .persona .information .info-body .btn {
  width: 100% ;
}
.personas .row ul .persona .information.info-open {
  opacity: 1 ;
  transition: opacity 0.5s ease ;
  z-index: 100 ;
}

/**************************************************************************************************
 *
 *  @Section: Mobile Styles
 *
***************************************************************************************************/
@media only screen and (max-width: 767px) {
  body {
    min-width: 0 ;
  }
  section {
    overflow: hidden ;
  }
  .bm-container {
    min-width: 0 ;
    padding: 40px 0 ;
    width: 85% ;
  }
  .bm-container .section-intro p {
    width: 100% ;
  }
  .personas a:hover {
    color: inherit ;
    background-color: inherit ;
  }
  .personas:before {
    left: -600% ;
  }
  .personas:after {
    top: 20% ;
  }
  .personas .row:after {
    content: '' ;
    display: block ;
    clear: both ;
    height: 0 ;
    line-height: 0 ;
  }
  .personas .row ul .persona {
    float: none ;
    width: 80% ;
    max-width: 400px ;
    margin: 0 auto 20px ;
  }
  .personas .row ul .persona:last-child {
    margin-bottom: 0 ;
  }
  .personas .row ul .persona .information {
    max-width: 400px ;
    top: 50% ;
    left: 0 ;
    right: 0 ;
    margin: auto ;
    -webkit-transform: translateY(-50%) ;
    transform: translateY(-50%) ;
  }
}