﻿
.solstice
{
    /*background: #fff;*/ 
    height: 406px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.solstice:hover .solstice-next, .solstice:hover .solstice-prev, .solstice:focus .solstice-next, .solstice:focus .solstice-prev
{
    opacity: 0.7;
}
.solstice:hover .solstice-next:hover, .solstice:hover .solstice-next:focus, .solstice:hover .solstice-prev:hover, .solstice:hover .solstice-prev:focus, .solstice:focus .solstice-next:hover, .solstice:focus .solstice-next:focus, .solstice:focus . solstice-rev:hover, .solstice:focus .solstice-prev:focus
{
    border: 0;
    opacity: 1;
}
.solstice img
{
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    max-width: 100%;
}
.solstice .solstice-slide
{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    
    -webkit-transform-origin: 50.2% 190%;
    -moz-transform-origin: 50.2% 190%;
    -ms-transform-origin: 50.2% 190%;
    -o-transform-origin: 50.2% 190%;
    transform-origin: 50.2% 190%;
    
    -webkit-transform: rotate(45deg) translateZ(-1px);
    -moz-transform: rotate(45deg) translateZ(-1px);
    -ms-transform: rotate(45deg) translateZ(-1px);
    -o-transform: rotate(45deg) translateZ(-1px);
    transform: rotate(45deg) translateZ(-1px);
    
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 0;
    visibility: hidden;
}
.solstice .prev
{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.solstice .active
{
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1;
    visibility: visible;
}
@media screen and (min-width: 450px)
{
    .solstice
    {
        height: 150px;
    }
}
@media screen and (min-width: 650px)
{
    .solstice
    {
        height: 375px;
    }
}
@media screen and (min-width: 800px)
{
    .solstice
    {
        height: 440px;
    }
}
@media screen and (min-width: 960px)
{
    .solstice img
    {
        margin-left: -480px;
        position: absolute;
        left: 50%;
    }
}
.solstice-title
{
   /* margin-bottom: 3em;*/
    margin-top: 0;
    text-align: center;
}
@media screen and (min-width: 700px)
{
    .solstice-title
    {
       /* margin-bottom: 4.5em;*/
    }
}
.solstice-title h2
{
    color: #96b651;
    font-size: 1.7em;
    line-height: 1.6em;
    margin: 0;
    position: relative;
    padding: 12px 15px 8px;
}
/*@media screen and (min-width: 700px)
{
    .solstice-title h2
    {
        font-size: 3em;
        margin: 0 51px;
        padding: 10px 0 8px;
    }
    .solstice-title h2:before, .solstice-title h2:after
    {
        background: url('/img/bg-title.png') no-repeat;
        content: "";
        display: block;
        height: 72px;
        position: absolute;
        top: 0;
        width: 81px;
    }
    .solstice-title h2:before
    {
        left: -81px;
    }
    .solstice-title h2:after
    {
        background-position: -81px 0;
        right: -81px;
    }
}*/
.solstice-prev, .solstice-next
{
    margin-top: -15px;
    position: absolute;
    top: 50%;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    margin-top: 41px;
    opacity: 0.4;
}
.solstice-prev
{
    height: 30px;
    width: 30px;
    background: url(/img/fs.prevnext.png) 0px -30px no-repeat;
}
.solstice-next
{
    height: 30px;
    width: 30px;
    background: url(/img/fs.prevnext.png) -30px -30px no-repeat;
    right: 0px;
}



.solstice-content
{
   height: 100px;
   position: relative;
}

#customers, #skyHigh, #mirror, #thinking, #family
{
    position: absolute;
    top: 0;
}

.hidden { display: none }
