.view {
position: relative;
text-align: center;
overflow: hidden;
max-width: 98%;
margin-top:8px;
margin-bottom:16px;
margin-left:auto;
margin-right:auto;
display:block;
}

@media screen and (orientation: portrait) {
.view {
      max-width: 94%;
  }
}

@media screen and (orientation: landscape) {
.view {
      max-height: 84vh;
  }
}

.view .mask{
   /*width: 340px;
   height: 340px;*/
max-width: 98%;
margin-bottom:16px;
margin-left:auto;
margin-right:auto;
right:8px;
left:8px;
margin-top:24px;
   position: fixed;
   top: 20%;
   left: 8;
   display:inline-block;
   vertical-align:middle;
   /*overflow:scroll;*/
}


.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color:#eee;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   /*font-style: italic;*/
   font-size: 16px;
   position: relative;
   color: #eee;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #eee;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}