@charset "UTF-8";
/* CSS Document */

.galerie{
    /*height:825px;*/
    background-image: url(../images/gal/logo_bckgrnd.png);
    background-position: center 620px !important;
    padding-bottom:20px;
}

#stage{
    display:block;
    width:910px;
    height:690px;
    margin:0 auto 0 -90px;
    padding-top:40px;
    box-sizing: border-box;

}

#stageImageCon{
    width:910px;
    height:650px;
    box-sizing: border-box;

}

#signature{
    width:80%;
    height:auto;
    margin:40px auto 0 auto;
    color:white;
    line-height: 14px;
    text-align: center;
    
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
    
    filter:alpha(opacity=0);
    -moz-opacity: .0;
    opacity: .0;
}

#selection{
    width:710px;
    height:80px;
    margin:20px auto 0 auto;
    display:block;
    padding-bottom:20px;
}

#btnbck{
    margin-top:30px;
    float:left;
    cursor:pointer;
    height:16px;
    width:16px;
    border: 0 solid transparent;
    border-right: .4rem solid white; /* Im unteren Beispiel .0625rem */
    border-bottom: .4rem solid white; /* Im unteren Beispiel .0625rem */
    transform: rotate(135deg);
    
    filter:alpha(opacity=50);
    -moz-opacity: 0.50;
    opacity: 0.50;

    -webkit-transition: border 300ms ease-in-out;
    -moz-transition: border 300ms ease-in-out;
    -o-transition: border 300ms ease-in-out;
    transition: border 300ms ease-in-out;
}
#btnbck:hover{
    border-right: .4rem solid black; /* Im unteren Beispiel .0625rem */
    border-bottom: .4rem solid black; /* Im unteren Beispiel .0625rem */
    
    filter:alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;

    -webkit-transition: border 300ms ease-in-out;
    -moz-transition: border 300ms ease-in-out;
    -o-transition: border 300ms ease-in-out;
    transition: border 300ms ease-in-out;
}

#btnforw{
    margin-top:30px;
    float:left;
    cursor:pointer;
    height:16px;
    width:16px;
    border: 0 solid transparent;
    border-right: .4rem solid white; /* Im unteren Beispiel .0625rem */
    border-bottom: .4rem solid white; /* Im unteren Beispiel .0625rem */
    transform: rotate(315deg);

    filter:alpha(opacity=50);
    -moz-opacity: 0.50;
    opacity: 0.50;
    
    -webkit-transition: border 300ms ease-in-out;
    -moz-transition: border 300ms ease-in-out;
    -o-transition: border 300ms ease-in-out;
    transition: border 300ms ease-in-out;
}
#btnforw:hover{
    border-right: .4rem solid black; /* Im unteren Beispiel .0625rem */
    border-bottom: .4rem solid black; /* Im unteren Beispiel .0625rem */
    
    filter:alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;

    -webkit-transition: border 300ms ease-in-out;
    -moz-transition: border 300ms ease-in-out;
    -o-transition: border 300ms ease-in-out;
    transition: border 300ms ease-in-out;
}

#selMask{
    width:660px;
    height:80px;
    float:left;
    margin-left:0px;
    overflow-x:hidden;
}
.selImg{
    height:75px;
    width:75px;
    background:white;
    box-shadow: 0 5px 5px black;
    float:left;
    margin-left:8.5px;
    cursor:pointer;
    
    filter:alpha(opacity=0);
    -moz-opacity: .0;
    opacity: .0;
    
      -webkit-transition: all 500ms ease-in-out;
      -moz-transition: all 500ms ease-in-out;
      -o-transition: all 500ms ease-in-out;
      transition: all 500ms ease-in-out;
}

.sIActive{
    height:75px;
    width:75px;
    background:white;
    box-shadow: 0 5px 5px black;
    float:left;
    margin-left:8.5px;
    cursor:pointer;
    
      -webkit-transition: all 500ms ease-in-out;
      -moz-transition: all 500ms ease-in-out;
      -o-transition: all 500ms ease-in-out;
      transition: all 500ms ease-in-out;
}

.selImg:hover{
    background:#aaa;
    
      -webkit-transition: all 100ms ease-in-out;
      -moz-transition: all 100ms ease-in-out;
      -o-transition: all 100ms ease-in-out;
      transition: all 100ms ease-in-out;
}

.selImg:first-of-type{
    margin-left:0px;
}
#selImgCon{
    width:2000px;
    height:80px;


    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;

    -webkit-transition: margin-left 1000ms ;
    -moz-transition: margin-left 1000ms ease-in-out;
    -o-transition: margin-left 1000ms ease-in-out;
    transition: margin-left 1000ms ease-in-out;
}


.stageImage{
    display:block;
    position:relative;
    box-shadow: 0 5px 5px black;
    
    filter:alpha(opacity=0);
    -moz-opacity: .0;
    opacity: .0;
    
    -webkit-transition: opacity 700ms ease-in-out;
    -moz-transition: opacity 700ms ease-in-out;
    -o-transition: opacity 700ms ease-in-out;
    transition: opacity 700ms ease-in-out;
}

.stageBtnBck{
    display:block;
    position: absolute;
    
    height:20px;
    width:20px;
    border: 0 solid transparent;
    border-right: .5rem solid black; /* Im unteren Beispiel .0625rem */
    border-bottom: .5rem solid black; /* Im unteren Beispiel .0625rem */
    transform: rotate(135deg);
    
    z-index:2;
    cursor:pointer;

    
    filter:alpha(opacity=0);
    -moz-opacity: 0.0;
    opacity: 0.0;

    -webkit-transition: opacity 1000ms ease-in-out;
    -moz-transition: opacity 1000ms ease-in-out;
    -o-transition: opacity 1000ms ease-in-out;
    transition: opacity 1000ms ease-in-out;
    
    -webkit-transition: border 300ms ease-in-out;
    -moz-transition: border 300ms ease-in-out;
    -o-transition: border 300ms ease-in-out;
    transition: border 300ms ease-in-out;
}
.stageBtnBck:hover{
    
    border-right: .5rem solid white; /* Im unteren Beispiel .0625rem */
    border-bottom: .5rem solid white; /* Im unteren Beispiel .0625rem */
    
    filter:alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;

    -webkit-transition: opacity 1000ms ease-in-out;
    -moz-transition: opacity 1000ms ease-in-out;
    -o-transition: opacity 1000ms ease-in-out;
    transition: opacity 1000ms ease-in-out;    

    -webkit-transition: border 300ms ease-in-out;
    -moz-transition: border 300ms ease-in-out;
    -o-transition: border 300ms ease-in-out;
    transition: border 300ms ease-in-out;
 
}
.stageBtnForw{
    display:block;
    position: absolute;
    z-index:2;
    cursor:pointer;
    
    height:20px;
    width:20px;
    border: 0 solid transparent;
    border-right: .5rem solid black; /* Im unteren Beispiel .0625rem */
    border-bottom: .5rem solid black; /* Im unteren Beispiel .0625rem */
    transform: rotate(315deg);
    
    filter:alpha(opacity=0);
    -moz-opacity: 0.0;
    opacity: 0.0;
    
    -webkit-transition: opacity 1000ms ease-in-out;
    -moz-transition: opacity 1000ms ease-in-out;
    -o-transition: opacity 1000ms ease-in-out;
    transition: opacity 1000ms ease-in-out;
    
    -webkit-transition: border 300ms ease-in-out;
    -moz-transition: border 300ms ease-in-out;
    -o-transition: border 300ms ease-in-out;
    transition: border 300ms ease-in-out;

}

.stageBtnForw:hover{
    border-right: .5rem solid white; /* Im unteren Beispiel .0625rem */
    border-bottom: .5rem solid white; /* Im unteren Beispiel .0625rem */
    
    filter:alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;

    -webkit-transition: opacity 1000ms ease-in-out;
    -moz-transition: opacity 1000ms ease-in-out;
    -o-transition: opacity 1000ms ease-in-out;
    transition: opacity 1000ms ease-in-out;
    
    -webkit-transition: border 300ms ease-in-out;
    -moz-transition: border 300ms ease-in-out;
    -o-transition: border 300ms ease-in-out;
    transition: border 300ms ease-in-out;
}

#noscript{
    font-size:12px;
    color:white;
    line-height:24px;
    text-align: center;
    margin-top:350px;
    
    filter:alpha(opacity=50);
    -moz-opacity: 0.50;
    opacity: 0.50;
    
}


.clear{clear:both;}
.none{display:none;}