@media (orientation: landscape) {


 @media (max-height:414px){

              .framecl{
         display:block;
border: solid 1px #555;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
 margin-left:105px!important;
}
  /*image viewer */
   .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 90%;
    height: auto;
    border-radius: 15px;
    box-shadow: 5px 10px #000000;
    position: absolute;
    margin-left: 38px!important;
}

 }
    @media (max-height:375px){

  
       .framecl{
         display:block;
border: solid 1px #555;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
 margin-left:105px!important;
}
    /*image viewer */
   .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 90%;
    height: auto;
    border-radius: 15px;
    box-shadow: 5px 10px #000000;
    position: absolute;
    margin-left: 38px!important;
}

 }
   @media (min-height:415px) and (max-height:600px){
 
                 .framecl{
         display:block;
border: solid 1px #555;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
 margin-left:105px!important;
}
   /*image viewer */
   .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 90%;
    height: auto;
    border-radius: 15px;
    box-shadow: 5px 10px #000000;
    position: absolute;
    margin-left: 38px!important;
}

 }

}