html,body,div,a,ul,p,h1,h3{margin:0;padding:0;border:0;outline:0;font-weight:500;}
body{font-family:'Jost',sans-serif;font-size:14px;color:#333;text-align:center;height:auto;width:100%;}
a{color:#333;text-decoration:none}
ul{list-style:none;}
h1{font-size:30px;}
h3{font-size:24px;color:#8a6363;margin:0 0 50px;}
header{margin:50px 0;}
ul{display:flex;flex-wrap:wrap;justify-content:center;}
li {margin:0 20px 60px;}
li:hover .name{background:#5f8a27;}
.image-bg{box-shadow:0 0 6px 1px #ccc;display:block;position:relative;width:370px;height:370px;}
.image-bg > span {background-position:center 0;background-repeat:no-repeat;background-size:cover;height:370px;position:absolute;left:0;top:0;width:100%;transition:all 4s ease-out 0s;}
.image-bg:hover span {background-position:center 100%;}
.name {background:#82b440;border-radius:4px;color:#fff; font-size:16px;display:inline-block;margin:25px 0 0;padding:8px 16px;transition:background 0.5s;}
.other-themes{background:#f4eded;padding:50px 0 0;}