@charset "UTF-8";



*,
::after,
::before {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    border: 0;
}


::-moz-selection {
    background: rgba(16, 93, 28, 0.5);
    color: #fff;
    text-shadow: none;
}

::selection {
    background: rgba(16, 93, 28, 0.5);
    color: #fff;
    text-shadow: none;
}

.wrapper {
    padding: 10px
}

footer {
    margin: 20px auto;
    padding: 0.3em;
    color: #4d4d4d;
    text-align: center
}

footer a {
    color: #c3c3c3;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
}

footer a:hover {
    color: #7deb6f;
}

/* Контейнер, в котором размещаем изображение */

.box-thumb {
    width: 95%;//100%;
    max-width: 648px; /* отзывчивые размеры  (опционально) */
    margin: 0 auto; /* распологаем по центру */
    padding: 0;
    overflow: hidden;
    position: relative; /* относительное позиционирование */
    cursor: pointer;
/* Внешняя тень блока с изображением */
    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
@media only screen and (max-width: 1100px)
{
    .box-thumb {
    width: 75%;
    max-width: 648px; /* отзывчивые размеры  (опционально) */
    margin: 0 auto; /* распологаем по центру */
    padding: 0;
    overflow: hidden;
    position: relative; /* относительное позиционирование */
    cursor: pointer;
/* Внешняя тень блока с изображением */
    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

}

/* 
 * Стили изображения внутри 
 * родительского контейнера 
*/
.box-thumb img {
    max-width: 100%;
	width: 100%;
    height: auto;
    display: block;
/* трансформация - реальный масштаб картинки */
    -webkit-transform: scale(1);
    transform: scale(1);
/* время исполнения трансформации */
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}
/*
 * Масштабируем изображение с помощью 
 * трансформации  при наведении 
*/
.box-thumb:hover img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

/* Воспроизведём  эффект наклонного блика */
.box-thumb::before {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
/*
 * используем линейный градиент 
 * определим начальное и конечное расположение,
 * цвет, размер и элементы трансформации
*/
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
/* Создадим анимацию и установим время исполнения */
.box-thumb:hover::before {
    -webkit-animation: shine .85s;
    animation: shine .85s;
}
/*
 * описываем анимацию CSS свойств 
 * в виде перечня ключевых кадров 
*/
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}