* {
margin: 0; padding: 0;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}
.category { font-weight: bold; }
p { padding-bottom: 1.5em; line-height: 1.8em;}
h3 { padding-bottom: 1em; }

.clearfix:after {
    content: " ";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

@font-face {
    font-family: Gothic;
    src: url(../fonts/gothic.ttf) format('truetype');
}
body {
    width: 100%;
    height: 100%;
    font-size: 90%;
    font-family: 'Gothic';
}

.img_fade_in { 
    -webkit-animation: IMG_FADE_IN 1s 1 forwards;
            animation: IMG_FADE_IN 1s 1 forwards;
}
.img_fade_out { 
    -webkit-animation: IMG_FADE_OUT 1s 1 forwards;
            animation: IMG_FADE_OUT 1s 1 forwards;
}

@keyframes IMG_FADE_IN {
      0% { opacity: 0; filter:alpha(opacity=0); }
    100% { opacity: 1; filter:alpha(opacity=100); }
}
@keyframes IMG_FADE_OUT {
      0% { opacity: 1; filter:alpha(opacity=100); }
    100% { opacity: 0; filter:alpha(opacity=0); }
}
@-webkit-keyframes IMG_FADE_OUT {
      0% { opacity: 1; filter:alpha(opacity=100); }
    100% { opacity: 0; filter:alpha(opacity=0); }
}
@-webkit-keyframes IMG_FADE_IN {
      0% { opacity: 0; filter:alpha(opacity=0); }
    100% { opacity: 1; filter:alpha(opacity=100); }
}

#VT > img {
    -webkit-animation: IMG_FADE_IN 1s 1 forwards;
            animation: IMG_FADE_IN 1s 1 forwards;
}

/*  ======================================================================== 
    Addon: Galleria
    ======================================================================== */
.galleria {
    float: left;
    width: 50%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.galleria-lightbox-content{
	position:absolute;
	background-color:#fff;
	top:1px;
	left:1px;
	right:1px;
	bottom:1px;
	overflow:hidden
}
/*  ======================================================================== 
    Addon: (En)Scrollbox
    ======================================================================== */ 
.scrollbox {
    overflow: auto;
    width: 100%;
    height: 90%;
}
.track {
    width: 6px;
    background: rgba(0, 0, 0, 0);
    margin-right: 2px;
    border-radius: 6px;
    -webkit-transition: background 250ms linear;
            transition: background 250ms linear;
}
.track:hover, .track.dragging {
    background: #d9d9d9; /* Browsers without rgba support */
    background: rgba(0, 0, 0, 0.15);
}
.handle {
    width: 6px;
    right: 0;
    background: #999;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    -webkit-transition: width 150ms;
            transition: width 150ms;
}
.track:hover .handle, .track.dragging .handle {
    width: 6px;
}

/*  ======================================================================== 
    Layout
    ======================================================================== */       

#VT   { position: absolute;  top:   0; left:   0; width: 100%; height: 40%; }
#VBL  { position: absolute;  top: 41%; left:   0; width:  45%; height: 59%; }
#VBR  { position: absolute;  top: 41%; left: 48%; width:  52%; height: 59%; }
#VBLT { width: 100%; height: 78px; }
#VBLB { width: 100%; height: calc(100% - 78px); }
#VBRT { width: 100%; height: 78px; }
#VBRB { width: 100%; height: calc(100% - 78px); }

/*  ======================================================================== 
    Style: Fixed Language selector
    ======================================================================== */
#SELLANG {
    position: fixed;
    bottom: .5em;
    right: 1em;
    font-size: .8em;
    /*text-shadow: -1px 0px 1px rgba(150, 150, 150, 1);*/
}
#SELLANG a {
    color: #04041f;
    /*text-shadow: -1px 0px 1px rgba(100, 100, 100, 1);*/
    text-decoration: none;
}
#SELLANG a:hover {
    color: #570f0f;
}

/*  ======================================================================== 
    Style: View/Top
    ======================================================================== */
#VT {
    background-color: #000;
	-webkit-box-shadow: 0 8px 6px -6px #000;
	   -moz-box-shadow: 0 8px 6px -6px #000;
	        box-shadow: 0 8px 6px -6px #000;
}
#VT img { 
    width: 100%;
    height: 100%;
}
#VT aside:first-child {   
    float: left;
    width: 25%;
    padding-left: 6em;
    padding-right: 2em;
    padding-top: 2em;
    font-size: .8em;
    color: #eee;
    /*text-shadow: -1px 0px 1px rgba(150, 150, 150, 1);*/
    height: 100%;
    overflow: auto;
}

#VT aside:last-child {   
    float: left;
    width: 25%;
    padding-left: 3em;
    padding-right: 6em;
    padding-top: 2em;
    font-size: .8em;
    color: #eee;
    /*text-shadow: -1px 0px 1px rgba(150, 150, 150, 1);*/
    height: 100%;
    overflow: auto;
}

#VT aside h2 { 
    font-size: 1.2em;
    padding-bottom: .5em;
    /*text-shadow: -1px 0px 1px rgba(150, 150, 150, 1);*/
}


/*  ========================================================================
    Style: View/Bottom.Left.Top
    ======================================================================== */
#VBLT {
    padding-left: 5em;
    padding-right: 4em;
}
#VBLT header { 
    display: table;
    height: 100%;
    width: 100%;
    border-bottom: 1px solid #aaa;
}
#VBLT h2 {
    display: table-cell;
    vertical-align: bottom;
    color: #222;
    /*text-shadow: -1px 0px 2px rgba(150, 150, 150, 1);*/
}

/*  ========================================================================
    Style: View/Bottom.Left.Bottom
    ======================================================================== */
#VBLB {
/*  FIXME: -> shorthand :)                                                   */
    padding-left: 5em;
    padding-right: 4em;
    padding-top: 2em;
}

/*  ========================================================================
    Style: View/Bottom.Right.Bottom
    ======================================================================== */
#VBRB article[data-sx-content="team"]:first-child { padding-top: 2.5em; padding-bottom: 0.5em;}
#VBRB article[data-sx-content="team"] > ul { list-style: none; }
#VBRB article[data-sx-content="team"] li + li { padding-left: calc(78px + 3.5em); }
#VBRB article[data-sx-content="team"] a img { float: left; height: 78px; }

#VBRB article[data-sx-content="team"] a:not(.opacity1) img {
    -webkit-animation: A_STAFF_FADE_OUT 1s 1 forwards;
            animation: A_STAFF_FADE_OUT 1s 1 forwards;    
}
#VBRB article[data-sx-content="team"] a:not(.opacity1):hover img {
    -webkit-animation: A_STAFF_FADE_IN 1s 1 forwards;
            animation: A_STAFF_FADE_IN 1s 1 forwards;    
}

#VBRB article[data-sx-content="contact"]:first-child { padding-top: 2.5em; padding-bottom: 3em;}
#VBRB article[data-sx-content="contact"] > ul { list-style: none; }
#VBRB article[data-sx-content="contact"] li + li { padding-left: calc(78px + 3.5em); }
#VBRB article[data-sx-content="contact"] img { float: left; height: 78px; }

/* filter:alpha(opacity=... for IE8 */
@keyframes A_STAFF_FADE_IN {
      0% { opacity: .5; filter:alpha(opacity=50); }
    100% { opacity: 1; filter:alpha(opacity=100); }
} 
@-webkit-keyframes A_STAFF_FADE_IN {
      0% { opacity: .5; filter:alpha(opacity=50); }
    100% { opacity: 1; filter:alpha(opacity=100); }
}
@keyframes A_STAFF_FADE_OUT {
      0% { opacity: 1; filter:alpha(opacity=100); }
    100% { opacity: .5; filter:alpha(opacity=50); }
}
@-webkit-keyframes A_STAFF_FADE_OUT {
      0% { opacity: 1; filter:alpha(opacity=100); }
    100% { opacity: .5; filter:alpha(opacity=50); }
}

/*  ======================================================================== 
    H/Navigation
    ======================================================================== */
nav { width: 100%; height: 78px; }
nav > ul { height: 100%; }
nav > ul > li { height: 100%; }
nav ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
 nav ul li {
    list-style: none;
    float:left;
}
nav ul li a {
    position: relative;
    top: 0;
    left: 0;
    text-decoration: none;
    /*text-shadow: -1px 0px 2px rgba(150, 150, 150, 1);*/
    outline: none; /* firefox: remove border */
    display: block;
    height: 100%;
    color: #222;
    padding-right: 1em;
}
nav ul li img { height: 100%; width: auto; padding-right: 3.5em;}

.mv_down {
    -webkit-animation: A_MV_DOWN 1s 1 forwards;
            animation: A_MV_DOWN 1s 1 forwards;
}
.mv_up {   
    -webkit-animation: A_MV_UP 1s 1 forwards;
            animation: A_MV_UP 1s 1 forwards;
}

@keyframes A_MV_DOWN {
      0% { top: 0; }
    100% { top: calc(100% - 1em); }
} 
@-webkit-keyframes A_MV_DOWN {
      0% { top: 0; }
    100% { top: calc(100% - 1em); }
}

@keyframes A_MV_UP {
      0% { top: calc(100% - 1em); } 
    100% { top: 0; }
}
@-webkit-keyframes A_MV_UP {
    0%   { top: calc(100% - 1em); }
    100% { top: 0; }
}

/*  ======================================================================== 
    V/Navigation
    ======================================================================== */
.subnav_show { display: inline; }
.subnav_hide { display: none; }

nav ul li ul{
    display: inline;
    position: absolute;
    padding-top: 2em;
}
nav ul li ul li{
    float: none;
}
nav ul li ul li a:hover{
    color: #700;
}

.mv_left {
    -webkit-animation: A_MV_LEFT 1s 1 forwards;
            animation: A_MV_LEFT 1s 1 forwards;
}
.mv_right {   
    -webkit-animation: A_MV_RIGHT 1s 1 forwards;
            animation: A_MV_RIGHT 1s 1 forwards;
}

@keyframes A_MV_LEFT {
      0% { left: 0; }
    100% { left: calc(-100% + 2.5em); }
} 
@-webkit-keyframes A_MV_LEFT {
      0% { left: 0; }
    100% { left: calc(-100% + 1em); }
}

@keyframes A_MV_RIGHT {
      0% { left: calc(-100% + 2.5em); } 
    100% { left: 0; }
}
@-webkit-keyframes A_MV_RIGHT {
    0%   { left: calc(-100% + 1em); }
    100% { left: 0; }
}