gnusites.com/style.css

/* the more specific css path overrides bootstrap's stylesheet. */
div.navbar-header>a.navbar-brand:hover
                                     {
                                         color:#E18A07;
                                         text-decoration:none;
                                     }
div.jumbotron {
    background-color:white;
}
ul.nav.navbar-nav>li>a:hover
                           {
                               color:#E18A07;
                               text-decoration:none;
                           }
.affix {
    top: 0;
    border-width: 0 0 1px;
    width:100%;
    position:absolute;
    z-index:100;
}

body
{
    margin-top:80px;
    font-family:georgian, helvetica, sans-serif;
    font-size:18px;
}
body img.borderBrown {
    border-color:#E18A07;
    border-width:2px;
    border-style:solid;
    margin-bottom:15px;
}
.brown {
    color:#E18A07;
}
button.center {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
div.brownContainer
{
    border:solid;
    border-radius:10px;
    border-color:#E18A07;
    background-color:#FFFFFF;
    /* padding: 10px 10px 10px 10px; */
}
.text-left {
    text-align:left;
}
.text-center {
    text-align:center;
}
img.right {
    float:right;
    margin-left:15px;
}
img.left {
    float:left;
}
img.center {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
h1
{
    color:#E18A07;
}
p.big {
    font-size:18px;
    font-weight:200;
    line-height:30px;
    margin:10px 10px 10px;
}
.regular
{
    border-width:0px;
}
.hover {
    height:300px;
    position:relative;
}

.hover img {
    position:absolute;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

/* make my images hover and fade out on hover */
@media  (min-width:756px) {
    .hover {
        width:33.33333333%;
    }
}

.hover:hover {
    cursor:pointer;
}

.hover img.top {
    -webkit-transform:scale(0,0);
    -moz-transform:scale(0,0);
    -o-transform:scale(0,0);
    transform:scale(0,0);
    opacity:0;
}

.hover:hover img.top, .hover.hover_effect img.top {
    opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin: top right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: top right;
    -o-transform:scale(1,1);
    -o-transform-origin: top right;
    transform:scale(1,1);
    transform-origin: top right;
}

.hover:hover img.bottom, .hover.hover_effect img.bottom {
    -webkit-transform:scale(0,0);
    -webkit-transform-origin: bottom left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: bottom left;
    -o-transform:scale(0,0);
    -o-transform-origin: bottom left;
    transform:scale(0,0);
    transform-origin: bottom left;
}

/* between the desktop and mobile view */
@media (max-width:1000px) {
    .hover {
        height:200px;
        position:relative;
    }
}

/* the mobile view */
@media (max-width:756px) {
    .hover {
        width:100%;
        height:auto;
        position:relative;
    }

    /*
     ** since mobile does not have a hover action, then we'll get rid
     ** of it.
     */
    .hover img {
        position:relative;
    }
    .hover .top {
        display:none;
    }

    /* don't let the bottom image have a transform */
    .hover:hover img.bottom, .hover.hover_effect img.bottom {
        -webkit-transform:none;
        -webkit-transform-origin: bottom left;
        -moz-transform:none;
        -moz-transform-origin: bottom left;
        -o-transform:none;
        -o-transform-origin: bottom left;
        transform:none;
        transform-origin: bottom left;
    }
}