/*

[Custom Stylesheet]

Project     : USNews - Multipurpose News, Magazine and Blog HTML5 Template
Author      : themelooks.com
Author URI  : https://themeforest.net/user/themelooks

*/

                                .myImg {
                                      border-radius: 5px;
                                      cursor: pointer;
                                      transition: 0.3s;
                                      width: 100%!important;
                                      height: auto!important;
                                    }

                                    .myImg:hover {opacity: 0.7;}

                                    /* The Modal (background) */
                                    .modal {
                                      display: none; /* Hidden by default */
                                      position: fixed; /* Stay in place */
                                      z-index: 1111; /* Sit on top */
                                      padding-top: 100px; /* Location of the box */
                                      left: 0;
                                      top: 0;
                                      width: 100%; /* Full width */
                                      height: 100%; /* Full height */
                                      overflow: auto; /* Enable scroll if needed */
                                      background-color: rgb(0,0,0); /* Fallback color */
                                      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
                                    }

                                    /* Modal Content (image) */
                                    .modal-content {
                                      margin: auto;
                                      display: block;
                                      width: 80%;
                                      max-width: 700px;
                                    }

                                    /* Caption of Modal Image */
                                    #caption {
                                      margin: auto;
                                      display: block;
                                      width: 80%;
                                      max-width: 700px;
                                      text-align: center;
                                      color: #ccc;
                                      padding: 10px 0;
                                      height: 150px;
                                    }

                                    /* Add Animation */
                                    .modal-content, #caption {  
                                      -webkit-animation-name: zoom;
                                      -webkit-animation-duration: 0.6s;
                                      animation-name: zoom;
                                      animation-duration: 0.6s;
                                    }

                                    @-webkit-keyframes zoom {
                                      from {-webkit-transform:scale(0)} 
                                      to {-webkit-transform:scale(1)}
                                    }

                                    @keyframes zoom {
                                      from {transform:scale(0)} 
                                      to {transform:scale(1)}
                                    }

                                    /* The Close Button */
                                    .close {
                                      position: absolute;
                                      top: 100px;
                                      right: 35px;
                                      color: #fff;
                                      font-size: 40px;
                                      font-weight: bold;
                                      transition: 0.3s;
                                      z-index: 1;
                                      background: #090909;
                                      opacity: 1;
                                    }

                                    .close:hover,
                                    .close:focus {
                                      color: #bbb;
                                      text-decoration: none;
                                      cursor: pointer;
                                    }

                                    /* 100% Image Width on Smaller Screens */
                                    @media only screen and (max-width: 700px){
                                      .modal-content {
                                        width: 100%;
                                      }
                                    }