.lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:340px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }
 
   .lightbox .title {
      margin:0;
      padding:0 0 10px 0px;
      border-bottom:1px #ccc solid;
      font-size:22px;
      }
 
   .lightbox .content {
      display:block;
      padding:10px 0 0 0px;
      font-size:18px;
      line-height:22px;
      }
 
   .lightbox .close {
      float:right;
      display:block;
      text-decoration:none;
      font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size:22px;
      color:#858585;
      }
.lightbox {
   /** Hide the lightbox */
   display: none;
 
   /** Apply basic lightbox styling */
   position: fixed;
   z-index: 9999;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   color:#333333;
   }	  
   .lightbox:target {
    /** Show lightbox when it is target */
    display: block;
    outline: none;
}



/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
	  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) {
	  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   } 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  	   .lightbox .box {
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   min-width:240px;
    margin: 8% auto;
   padding:20px;
   background-color:#FFF;
   box-shadow: 0px 1px 26px -3px #777777;
   }

}