/*
    CSS for GALLERY SLIDE
*/

.utgImgTitleOn {
    position: absolute;
    top: -50px;
    color: darkslategray;
    font-size: 14px;
    width: 800px;
}

.utgImgTitleOff {
    position: absolute;
    top: 0px;
    color: red;

    font-size: 12px;

    display: none;
}

.utgImgTitlesContainer {
    position: absolute;
    z-index: 99;
}

.utgImgContainerAnim {
    position: absolute;
    top: -2px;
    z-index: 99;
    width: 100%;
    height: 100%;
    margin: 0 auto;

    -webkit-animation: utgImgContainerAnim 1s ease 0s 1;
    animation: utgImgContainerAnim 1s ease 0s 1;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes utgImgContainerAnim{
    0%   {transform: translate(0px, 0px)  ; opacity: 0;}
    100% {transform: translate(0px, 0px)  ; opacity: 1;}
}

@keyframes utgImgContainerAnim{
    0%   {transform: translate(0px, 0px); opacity: 0;}
    100% {transform: translate(0px, 0px); opacity: 1;}
}

.utgImgContainerAnimOff {
    position: absolute;
    top: -2px;
    z-index: 99;
    width: 100%;
    height: 100%;

    -webkit-animation: utgImgContainerAnimOff 1s ease 0s 1;
    animation: utgImgContainerAnimOff 1s ease 0s 1;

    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes utgImgContainerAnimOff{
    0%   {transform: translate(0, 0); opacity: 1;}
    100% {transform: translate(0, 0); opacity: 0;}
}

@keyframes utgImgContainerAnimOff{
    0%   {transform: translate(0, 0); opacity: 1;}
    100% {transform: translate(0, 0); opacity: 0;}
}

.utgArrowLeft {
    position: absolute;
    width: 50px;
    height: 50px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-image: url('../img/ag_arrow_left_up.png');
    background-size: 50px 50px;
    opacity: 0.5;
}
.utgArrowLeft:hover {
    cursor: pointer;

    -webkit-animation: utgArrowLeft 1s ease 0s infinite;
    animation: utgArrowLeft 1s ease 0s infinite;

    -webkit-animation-play-state: inherit;
    animation-play-state: inherit;
}

@-webkit-keyframes utgArrowLeft{
    0%  {transform: translate(0, 0px); opacity: 0.5;}
    100% {transform: translate(0, 0); opacity: 1;}
}

@keyframes utgArrowLeft{
    0%  {transform: translate(0, 0px); opacity: 0.5;}
    100% {transform: translate(0, 0); opacity: 1;}
}

.utgArrowRight{
    position: absolute;
    top: 250px;
    width: 50px;
    height:50px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-image: url('../img/ag_arrow_right_down.png');
    background-size: 50px 50px;
    opacity: 0.5;
}

.utgArrowRight:hover{
    cursor: pointer;
    -webkit-animation: utgArrowRight 5s ease 0s infinite;
    animation: utgArrowRight 5s ease 0s infinite;

    -webkit-animation-play-state: inherit;
    animation-play-state: inherit;
}

@-webkit-keyframes utgArrowRight{
    0%  {transform: translate(0, 0); opacity: 0.5;}
    100% {transform: translate(0, 0); opacity: 1;}
}

@keyframes utgArrowRight{
    0%  {transform: translate(0, 0); opacity: 0.5;}
    100% {transform: translate(0, 0); opacity: 1;}
}

.utgSelectorUp{
    width: 30px;
    height:30px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-image: url('../img/ag_point_up.png');
    background-size: 30px 30px;

}

.utgSelectorUp:hover{
    background-image: url('../img/ag_point_down.png');
}

.utgSelectorDown{
    width: 30px;
    height:30px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-image: url('../img/ag_point_down.png');
    background-size: 30px 30px;

}

.utgSelectorDown:hover{
    background-image: url('../img/ag_point_up.png');
}

.utgSelectorContainer {
    float: left;
    padding: 2px;
}

.utgHw100per {
    position: absolute;
    top: 10px;
    width: 100%;
    heigth: 100%;
}