.popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 101; background: rgba(0,0,0,.7); }
 .popupContent { display: -webkit-flex; -webkit-flex-direction: column; }
 .popupContent { width: 426px; position: relative; margin: 100px auto 0 auto; display: flex; flex-direction: column; padding: 30px 0; background: #ecc36c; color: #fff; border-radius: 7px; box-sizing: border-box; }
  .popup .cross { width: 17px; height: 17px; position: absolute; top: 30px; right: 30px; cursor: pointer; transform: rotate(45deg); }
  .popup .cross:before, .popup .cross:after { content: ''; width: 100%; height: 3px; position: absolute; top: 50%; left: 0; background: #fff; }
  .popup .cross:before { transform: rotate(90deg); }
  .popup .head { margin-bottom: 25px; padding-right: 100px; padding-left: 35px; text-transform: uppercase; font-size: 21px; font-weight: bold; }
  .popup .img { height: 284px; margin-bottom: 30px;  }
  .popup .text { padding: 0 30px; text-align: center; }
   .popup .subHeader { margin-bottom: 10px; font-size: 21px; font-weight: 600; color: #90702d; }
   .popup P { margin: 0; font-size: 15px; }
   .popup .line { width: 100%; float: left; }
   .popup .more { width: 65%; float: left; margin-top: 25px; margin-left: 17.5%; padding: 10px 0; background: #292727; font-size: 15px; text-transform: uppercase; text-decoration: none; font-weight: 600; color: inherit; }
   
@media screen
and (max-height: 700px)
{
  .popup { overflow: scroll; }
  .popupContent { margin-top: 20px; }
}   
   
@media screen
and (max-width: 600px)
{
  .popupContent { width: 90%; margin-top: 20px; padding: 20px 0; }
  .popup .head { margin-bottom: 15px; padding-left: 20px; font-size: 19px; }
  .popup .img { height: auto; margin-bottom: 20px; }
   .popup IMG { width: 100%; }
  .popup .text { padding: 0 20px; }
   .popup .subHeader { font-size: 16px; }
   .popup P { font-size: 13px; }
   .popup .more { width: 80%; margin-left: 10%; margin-top: 10px; }
}

@media screen
and (max-width: 480px)
{
  .popup .head { font-size: 17px; }
}