PDF opening in Modal gets lowercase

Question

I have a website where I use a modal for opening PDF, and the same when it is opened is very small. Has anyone ever been through this? They’d know a way to fix it?

CSS Modal code:

.modal.modal-fullscreen .modal-dialog,
.modal.modal-fullscreen .modal-content {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.modal.modal-fullscreen .modal-dialog {
  margin: 0;
  width: 100%;
  animation-duration:0.6s;
}
.modal.modal-fullscreen .modal-content {
  border: none;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
  -o-box-shadow: inherit;
  box-shadow: inherit;
  /* change bg color below */
 /* background:#1abc9c; */
}

.modal.modal-fullscreen.force-fullscreen .modal-body {
  padding: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header,
.modal.modal-fullscreen.force-fullscreen .modal-footer {
  left: 0;
  position: absolute;
  right: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header {
  top: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-footer {
  bottom: 0;
}

.close {
    float: right;
    font-size: 81px;
    font-weight: 700;
    line-height: 1;
    color: red;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    right: 50%;
    position: relative;
    background: #000 !important;
    z-index: 1111111;
}

.close:hover{
    color:red;
}

HTML MODAL code:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <!-- -->
    <div class="m-t-40">
        <div class="services-icon-bx">
            <div class="text-center">
                <i class="font-size-60 "><img src="img/icon/tunel.png" style="height:70px; weight:70px;"></i>
                <h3 class="heading-sm">Subterrâneo</h3>
                <button class="btn btn-c-primary" data-toggle="modal" data-target="#myModalFullscreen5" contenteditable="false">Saber mais</button> 
            </div>
        </div>
    </div>  

    <div class="modal fade modal-fullscreen  footer-to-bottom" id="myModalFullscreen5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog animated zoomInLeft">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <iframe src="./docs/tuneis.pdf" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
                        Seu navegador não suporta esse conteudo
                    </iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>          
                </div>
            </div>
        </div>
    </div>                              
</div>

This is what he looks like when he carries: