::selection{
            color:#27ae60;
            background:none;
        }
        #imageList{
            margin-top:10px;
        }
        #imageList img:hover{
           cursor:pointer;
           border:1px solid #333;
        }
        #leftControl {
            width: 48px;
            height: 69px;
            background: url(lg-left-icon.png);
            position: absolute;
            cursor: pointer;
            left: 20px;
            top: 40%;
            display: none;
            opacity:0.6;
}        #leftControl:hover {
            opacity:1;
            }
         #rightControl {
            width: 48px;
            height: 69px;
            background: url(lg-right-icon.png);
            position: absolute;
            cursor: pointer;
            right: 20px;
            top: 40%;
            opacity:0.6;
          }
            #rightControl:hover {
            opacity:1;
            }
         .activeImage{
             border:1px solid #000;
         }
       #outside{
          background:#333;
          position:fixed;
          margin:0px;
          padding:0px;
          top:0px;
          left:0px;
          right:0px;
          bottom:0px;
          height:100%;
          width:100%;
          display:none;
          z-index:1035;
         }
        #modalContent{
            width:100%;
            max-width: 1080px;
            height:100%;
            max-height: 620px;
            background: #000;
            position: fixed;
            display:none;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            border:3px solid #0e0e0e;
            border-radius:7px;
            z-index:1036;
        }
        #btnClose{
            background:url(icon-close-btn.png);
             float:right;
             width:32px;
             height:32px;
             cursor:pointer;
             margin:10px;
        }
        #btnClose:hover{
            opacity:0.6;
        }
        .clear{
            clear:both;
        }
        #mainImage{
            cursor:pointer;
        }
        #modalMainImage {
        max-width:1000px;
        width:100%;
        top:0px;
        left:0;
        bottom:0px;
        right:0px;
        margin:auto;
        position:absolute;
        padding:30px;
        }
        #modalLeftControl{
            width: 48px;
            height: 69px;
            background: url(modal-lg-left-icon.png);
            position: absolute;
            cursor: pointer;
            left: 15px;
            top: 270px;
            display:none;
        }
            #modalLeftControl:hover {
                opacity:0.6;
            }
        #modalRightControl{
            width: 48px;
            height: 69px;
            background: url(modal-lg-right-icon.png);
            position: absolute;
            cursor: pointer;
            right: 15px;
            top: 270px;
            }
            #modalRightControl:hover {
            opacity:0.6;
            }
        .thumbnailsImage{
            width:70px;
            float:left;
            margin:5px;
        }
        

       /* MOBILE STYLE START */
        @media  (min-width:412px )  and (max-width:576px) {
            #rightControl 
            {
            background: url(xs-right-icon.png);
            width: 20px;
            height: 28px;
            top: 45%;
            }
            #leftControl 
            {
            background: url(xs-left-icon.png);
            width: 20px;
            height: 28px;
            top: 45%;
            }
             .thumbnailsImage{
            width:45px;
            float:left;
            margin:5px;
          }
          #modalLeftControl{
            width: 30px;
            height: 45px;
            background: url(modal-xs-left-icon.png);
            left: 2px;
            top: 23%;
            display:none;
          }
          #modalRightControl{
            width: 30px;
            height: 45px;
            background: url(modal-xs-right-icon.png);
            right: 2px;
            top: 23%;
          }
           #modalMainImage {
            max-width:1000px;
            width:100%;
            top:30px;
            left:0;
            bottom:0px;
            right:0px;
            margin:unset;
            position:absolute;
            padding:30px;
            }
        }
        @media (min-width:320px) and (max-width:411px) {
           .thumbnailsImage{
            width:39px;
          }
            #rightControl 
            {
            background: url(xs-right-icon.png);
            width: 20px;
            height: 28px;
            top: 70px;
            }
            #leftControl 
            {
            background: url(xs-left-icon.png);
            width: 20px;
            height: 28px;
            top: 70px;
            }
           #modalLeftControl{
            width: 30px;
            height: 45px;
            background: url(modal-xs-left-icon.png);
            left: 2px;
            top: 45%;
          }
          #modalRightControl{
            width: 30px;
            height: 45px;
            background: url(modal-xs-right-icon.png);
            right: 2px;
            top: 45%;
          }
        }
        /* MOBILE STYLE END */




        /* TABLET STYLE START */
         @media (min-width:577px) and (max-width:767px) {
           .thumbnailsImage{
               width:73px;
            }
            #leftControl {
                top: 40%;
            }
             #rightControl {
                top: 40%;
            }
           #modalLeftControl{
            width: 30px;
            height: 45px;
            background: url(modal-xs-left-icon.png);
            left: 2px;
            top: 45%;
          }
          #modalRightControl{
            width: 30px;
            height: 45px;
            background: url(modal-xs-right-icon.png);
            right: 2px;
            top: 45%;
          }
         }
        /* TABLET STYLE END */




        /* DESKTOP MINI STYLE STAR  */
         @media (min-width:768px) and ( max-width:992px){
           .thumbnailsImage{
            width:32px;
            }
            #rightControl 
            {
            background: url(xs-right-icon.png);
            width: 20px;
            height: 28px;
             top: 45%;
            }
            #leftControl 
            {
            background: url(xs-left-icon.png);
            width: 20px;
            height: 28px;
            top: 45%;
            }
            #modalLeftControl{
            width: 30px;
            height: 45px;
            background: url(modal-xs-left-icon.png);
            left: 2px;
            top: 45%;
          }
          #modalRightControl{
            width: 30px;
            height: 45px;
            background: url(modal-xs-right-icon.png);
            right: 2px;
            top: 45%;
          }
          #modalMainImage {
            max-width:750px;
            }
         }
        /* DESKTOP MINI STYLE END  */

       
        /* DESKTOP MEDUIM STYLE STAR  */
        @media (min-width:993px) and ( max-width:1199px) {
            .thumbnailsImage{
            width:60px;
            }
          #modalMainImage {
            max-width:910px;
            }
        }
        /* DESKTOP MEDUIM STYLE END  */