body.open-modal-automovel, body.open-modal-residencial, body.open-modal-empresarial, body.open-modal-vida {
  overflow: hidden;
}

body.open-modal-automovel #automovel {
  visibility: visible;
  opacity: 1;
}

body.open-modal-residencial #residencial {
  visibility: visible;
  opacity: 1;
}

body.open-modal-empresarial #empresarial {
  visibility: visible;
  opacity: 1;
}

body.open-modal-vida #vida {
  visibility: visible;
  opacity: 1;
}



.mask {
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: rgba(20, 30, 47, 0.9);
    z-index: 99999;
    top: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 300ms linear;
}


.mask .modal {
    background-color: #ffffff;
    position: absolute;
    top: 15vh;
    bottom: 15vh;
    left: 25vh;
    right: 25vh;
    /*left: 50%;
    top: 50%;
    transform: translatey(-50%) translateX(-50%);*/
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5em 0 5em 0;
    padding-right: 6px;
    /*max-width: 450px;*/
}

.modal .container .topic {
  display: flex;
  margin-top: 2em;
}

.topic .number {
  border-radius: 0 1.3em 0 1.3em;  
  background-color: rgb(68, 201, 255);
  padding: .8em 1em;
  font-size: 1.7em;
  font-weight: 700;
  /*margin-right: .5em;*/
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.topic .description {
  padding: 1em 2em;
  border-bottom: 3px solid #e2ebec;
  /*border-radius: 0 1.3em 0 1.3em;*/
  font-size: 1.1em;
  width: 100%;
  display: flex;
  align-items: flex-end;
  line-height: 1.5em;
  font-weight: 500;
}

.modal p {
  margin-top: 40px;
}

/*.mask .modal {
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translatey(-50%) translateX(-50%);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5em 0 5em 0;
    max-width: 1400px;
}*/

.mask .modal .image-modal {
  width: 40%;
  height: 100%;
  background-color: grey;
  border-radius: 5em 0 0 0;
  overflow: hidden;
  float: left;
}

.residencial {
  background: url('../img/residencial-crop.jpg') center / cover no-repeat;)
}

.empresarial {
  background: url('../img/corporate-crop.jpg') center / cover no-repeat;)
}

.automovel {
  background: url('../img/car.jpg') center / cover no-repeat;)
}

.vida {
  background: url('../img/life-crop.jpg') center / cover no-repeat;)
}

.modal .container {
  float: right;
  width: 60%;
  overflow: auto;
}

.modal .container .scroller {
  height: 100%;
  border-radius: 0 0 5em 0;
}

.scroller {
    padding: 5em 4.5em 5em 4em;;
}


.mask .close-modal {
    height: 60px;
    width: 60px;
    position: absolute;
    right: -30px;
    top: -30px;
    background: rgb(68, 201, 255) url(../img/icon-close.svg) center no-repeat;
    background-size: 35%;
    transition: transform 250ms;
    border-radius: 1em 0 1em 0;
    z-index: 9;
} 

.mask .close-modal:hover {
  cursor: pointer;
  transition: transform 400ms;
  transform: rotate(90deg);
}

@media (max-width: 1024px) {
  .mask .modal {
    top: 15vh;
    bottom: 15vh;
    left: 10vh;
    right: 10vh;
  }
  .topic .number {
    padding: .6em 1em;
  }
}

@media (max-width: 800px) {
  .mask .modal {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    padding-right: 0;
  }

  .mask .modal .image-modal {
    width: 100%;
    height: 300px;
    background-color: grey;
    border-radius:  0;
    overflow: hidden;
    float: none;
}
  
  .mask .close-modal {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 15px;
    top: 15px;
    background: rgb(68, 201, 255) url(../img/icon-close.svg) center no-repeat;
    background-size: 35%;
    transition: transform 250ms;
    border-radius: 1em 0 1em 0;
    z-index: 9;
  } 
  .modal .container {
    float: none;
    width: 100%;
    overflow: initial;
  }

  .scroller {
    padding: 5em 1em 5em 1em;
  }

  .topic .number {
    padding: .6em 1em;
  }

  .topic .description {
    padding: 1em;
}

}