﻿div.PublicMainOption {
    width: 300px;
    position: relative;
}

div.PublicMainOption img {
    -webkit-transition: all 0.4s ease-in-out; /* Safari and Chrome */
    -moz-transition: all 0.4s ease-in-out; /* Firefox */
    -o-transition: all 0.4s ease-in-out; /* Opera */
    transition: all 0.4s ease-in-out;
    width: 100%;
    height: 100%;
    border: none;
}

div.PublicMainOption:hover img {
    -webkit-transform: scale(1.2); /* Safari and Chrome */
    -moz-transform: scale(1.2); /* Firefox */
    -ms-transform: scale(1.2); /* IE 9 */
    -o-transform: scale(1.2); /* Opera */
    transform: scale(1.2);
}

div.PublicMainOption h2 {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;

    -webkit-transition: all 0.4s ease-in-out; /* Safari and Chrome */
    -moz-transition: all 0.4s ease-in-out; /* Firefox */
    -o-transition: all 0.4s ease-in-out; /* Opera */
    transition: all 0.4s ease-in-out;
}

div.PublicMainOption:hover h2 {
    -webkit-transform: translate(-10%, 10%); /* Safari and Chrome */
    -moz-transform: translate(-10%, 10%); /* Firefox */
    -ms-transform: translate(-10%, 10%); /* IE 9 */
    -o-transform: translate(-10%, 10%); /* Opera */
    transform: translate(-10%, 10%);
}

div.PublicMainOption a:active img {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */

    -webkit-transition: none; /* Safari and Chrome */
    -moz-transition: none; /* Firefox */
    -o-transition: none; /* Opera */
    transition: none;
}

div.PublicMainOption h2 span {
    color: white;
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    background: rgb(70,70,70); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

div.PublicMainOption h2 span.spacer {
    padding: 0 5px;
    background: transparent;
}

div.PublicMainOption a:active h2 span {
    background: rgb(140,140,140); /* fallback color */
    background: rgba(0, 0, 0, 0.4);
}

div.PublicMainOption a:active h2 span.spacer {
    background: transparent;
}
