﻿.hwPhotoGallery {
    width:100%;
    max-height:600px;
    padding:2%;
}

.hwPhotoGallery .main_photo_container {
    float:left;
    width:83%;
    max-height:600px;
    border:solid 5px #C1C1C1;
    transition: linear 0.3s;
    cursor:pointer;
}

.hwPhotoGallery .main_photo_container:hover {
    border:solid 5px #8E8E8E;
    transition: linear 0.3s;
}

.hwPhotoGallery .main_photo_container img {
    display: block;
    width: 100%;
    max-height: 510px;
}

.hwPhotoGallery .photo_thumbs_container {
    float: right;
    width: 15%;
    max-height: 520px;
    margin-left:5px;    
}

.hwPhotoGallery .photo_thumbs_container_scroll{
    overflow-y:scroll;
    overflow-x:hidden;
}

.hwPhotoGallery .photo_thumbs_container .photo_thumb{    
    max-height:122px;
    border: solid 5px #C1C1C1;
    float:none;
    cursor:pointer;    
    margin-bottom:10px;
}

.hwPhotoGallery .photo_thumbs_container .photo_thumb img {
    width: 100%;
}

@media (max-width:991px) {
    .hwPhotoGallery .photo_thumbs_container {
        max-height:420px;
    }
}

@media (max-width:800px) {
    .hwPhotoGallery .photo_thumbs_container {
        max-height:320px;
    }
}

@media (max-width:620px) {
    .hwPhotoGallery .photo_thumbs_container {
        max-height:220px;
    }
}

@media (max-width:470px) {
    .hwPhotoGallery .photo_thumbs_container {
        max-height:150px;
    }
}

@media (max-width:340px) {
    .hwPhotoGallery .photo_thumbs_container {
        display:none;
    }
}