/*
## -----------------------------------------------------------------------------
##
##
##  STYLE SHEET
##                                             
##        Style-Sheet-Definitionen | GLOBAL APX LAYOUT THEME
##                                                                          
##        SCHEME:      __apx__scheme__                                                
##        AUTHOR:      Carsten Zandecki, mediaMinds internet services            
*/


*          { margin:0; padding:0; }



/* FOR FULL SCREEN BACKGROUNDS */

*, ::before, ::after {
	box-sizing: inherit;
}

html       { height: 100%; width: 100%; box-sizing: border-box;  }

body       { text-align: center; /** font-family: 'AllerLight'; font-size: 18px; color: #777777;**/ margin: auto; /*background: #fff;*/ 
             background-repeat: no-repeat; background-position: center center; 
             background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
             background-size: cover;
           }

img        { border:0px; max-width:100%; }


/*
## -----------------------------------------------------------------------------
##
##  GLOBAL ELEMENT/FORM CLASSES
##                                             
*/

.buttoncon { display:block; width:100%; }  /** GLOBAL BUTTONCONTAINER FOR ALIGNMENT **/


/*
## -----------------------------------------------------------------------------
##
##  SITE MAIN NAVIGATION STYLES
##
##
*/

/** LEVEL 1 **/

#menuNav { text-align:right; }

#menuNav > ul { width: 100%; /* Increase when adding more menu items */ margin:0 auto; }
#menuNav > ul > li{ /* will style only the top level li */ 

           list-style: none; 
           display: inline-block; 
           line-height: 1.0em; 
           margin: 1px 1px 10px 10px; 
           padding: 9px 17px 8px 13px; 
           font-size:24px; 
           font-family: Bira; 
           font-weight:normal; 
           color: #fffbc1; 
           text-shadow: 0 0 5px #000; 
           letter-spacing:0.025em; 
           border: 2px solid #d9d0a4; 
           border-radius:6px; 
           background: linear-gradient(to bottom, #0e4323 0%,#04200f 100%);
           box-shadow: 0 0 15px 0 #042913; 
}

#menuNav > ul > li:hover  { color: #fff; background: #adcc28; }
#menuNav > ul > li:before { content: ""; /* or whatever color you prefer */ }
#menuNav > ul > li:hover:before { position:absolute; content: " "; color: #49bdc7; /* or whatever color you prefer */ }
#menuNav > ul > li > a { text-decoration:none !important; font-size:24px; font-family: Bira; font-weight:normal; color: #fffbc1; padding: 3px 2px; text-shadow: 0 0 5px #000; letter-spacing:0.025em; }
#menuNav > ul > li > a:hover { }
#menuNav > ul > li.sub  { /*height:200px;*/ }

/** LEVEL 2 **/

#menuNav > ul > li > ul {      

           position:absolute; 
           z-index: 103; 
           list-style:none; 
           text-align:center; 
           top: 58px;         
   
           min-width:1200px;
           left:50px;
           margin:0 auto;
           padding-left: 350px; 

           display:inline-block; 
        /*
           border-top:none;
           border-left: 1px solid #d9d0a4;
           border-right: 1px solid #d9d0a4;
           border-bottom: 1px solid #d9d0a4;
        */
           border-radius:6px;
	   background-color: #04210f;
           box-shadow:0 0 15px rgba(0,0,0,0.8); 

        /* This is important for the show/hide CSS animation */

	   max-height:0px;
	   overflow:hidden;
	   -webkit-transition:max-height 0.4s linear;
	   -moz-transition:max-height 0.4s linear;
	   transition:max-height 0.4s linear;
}

#menuNav > ul > li > ul:before { content: ""; position:relative; width:1200px; height:46px; /**border:2px solid #d9d0a4;**/ border-radius:6px; left:0; }
#menuNav > ul > li > ul > li   { float:left; }
#menuNav > ul > li > ul > li:last-child {}
#menuNav > ul > li > ul > li a {
        margin:0 20px;
	padding:12px 0 12px 28px;
        font-family: OpenSans;
        font-size: 0.7em;
        font-weight:normal;
	color:#d9d0a4; /* !important;*/
	text-decoration:none !important;
	display:inline;
        float:left;
        text-shadow:none;
        background: url(../images/hop_nav.png) 0 10px no-repeat;
}

#menuNav > ul > li > ul > li a:hover { color:#adcc28; background: url(../images/hop_nav_green.png) 0 10px no-repeat; }


#menuNav li ul li:first-child:before{ /* the pointer tip */

	content:'';

/*
position:absolute;
width:10px;
heigth:10px;
background:#ccc;*/

        /*
         position:absolute;
         top:-10px;
         z-index:999;
	 width:9px;
	 height:15px;
	 border:15px solid #333; 
	 border-bottom-color:#333;
         left:25px;
	 top:-25px; 
         margin-left:-5px; 
        */

        /*display:none; */
}

#menuNav li ul li:last-child{
	/* border-bottom-left-radius:5px;
	   border-bottom-right-radius:5px; 
        */
}

#menuNav .tip { background:#ccc; }

/* This will trigger the CSS */
/* transition animation on hover */

#menuNav li:hover ul{ max-height:380px; } /* Increase when adding more dropdown items */


/*
## -----------------------------------------------------------------------------
##
##  MOBILEMENU/TABLEMENU STYLES
##
##
*/

#mobilebox { position:absolute; z-index:99; top:50px; right:0px; width:100%; text-align:right; }
.mobilebutton { background: #0e4323 url('../images/menu.png') 13px 9px no-repeat; padding:17px 17px 17px 42px; border-radius:50%; color:#fff; box-shadow: 0 0 10px 0 #423a02; border: 2px solid #d9d0a4; }

#mobilemenu      { display:none; font-size:18px; position:relative; width:100%; height:auto; background:#0e4323; left:0px;color:#fff; border-top:2px solid #d9d0a4; }
#mobilemenu a    { font-family: OpenSans; font-weight:normal; width:100%; padding:4%; display:block; color: #fffbc1; text-align:center; border-bottom:1px solid #d9d0a4; text-decoration:none; }
#mobilemenu a:hover { color: #fff; background: #adcc28; }
#mobilemenu .sep { font-family:OpenSans; font-weight:bold; display:block; background:#04200f; color:#fffbc1; padding:4%; text-align:center; }


#tabletbutton { position:absolute; width:100px; height:46px; top:23px; right:20px; z-index:999; display:block; border-radius:6px; border: 2px solid #d9d0a4; box-shadow: 0 0 10px 0 #423a02; margin:0px auto; padding:5px; background: #0e4323 url('../images/menu_tablet.png') 5px 3px no-repeat; text-align:center; }
#tabletbutton img { margin:0 auto; }

#tabletmenu   { display:none; box-sizing: border-box; font-size:16px; position:absolute; z-index:998; width:100%; height:auto; background: #0e4323; padding:5% 10%; left:0px; top:90px; color:#4b4b4d; border-top: 2px solid #d9d0a4; border-bottom: 4px solid #d9d0a4; }
#tabletmenu a { font-family: OpenSans; font-weight:normal; box-sizing: border-box; width:100%; padding:5%; display:block; color: #fffbc1; text-align:left; text-decoration:none; }
#tabletmenu a:hover { background: #adcc28; color:#fff; border-radius:6px;  } 

.tabletcategory { display:block; font-family: OpenSans; font-size:16px; font-weight:bold; width:100%; height:auto; text-align:left; padding:5%; border-radius:6px; background: #04200f; color:#d9d0a4;  }
.tbcol50   { float:left; width:45%; display:block; }
.tbspace50 { margin-right:10%; }



/*
## -----------------------------------------------------------------------------
##
##  MAIN SITE STYLES
##                                             
*/


article  { }
section  { }

.full    { clear:both; width:100%; display:block; }
.content { clear:both; width:100%; display:block; margin:0 auto; text-align:left; }



th, td {
    padding:3px;
    border-spacing: 0;
    vertical-align:middle;
}



hr { border:none; height:1px; margin-bottom:40px; }


.actionbutton { margin-top:40px; }

/* STD STYLE / FROM PAGE EDITOR */

.left     { text-align:left;   }
.center   { text-align:center; }
.right    { text-align:right; }
.justify  { text-align:justify; }



/*
## -----------------------------------------------------------------------------
##
##  JBOX OVERWRITES / MODAL WINDOW
##
##
*/

.jBox-Modal .jBox-container, .jBox-Confirm .jBox-container {
	border-radius: 12px;
	box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4);
        background: rgba(22,22,22,0.9); /*#202629*/;  /* 30383d*/
        
}

.jBox-content { padding:12px 18px; }

#jBox-overlay {
      /* background: rgba(32,38,41,0.9);  */
}

.createWinOverlay { background: rgba(32,38,41,0.9);  

backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
-moz-backdrop-filter: blur(6px);

}

.sysWin { color: #fff; text-align:center; }



/*
## -----------------------------------------------------------------------------
##
##  IMAGE HOVER FX
##                                             
*/

/* RESIZE FX */

.imghover { position: relative; padding: 0; width:100%; display:block; cursor:pointer; /*border-radius:5px; border:5px solid #fff; box-shadow:0 0 10px rgba(0,0,0,0.3);*/ vertical-align:middle; }
.imgtext  { position: absolute; 
            display:table-cell; 
            width: 100%;
            /*height: 94.8%; */
            height:100%;

            color:#fff; 
            background-color:rgba(77,77,77,0.9);
            text-align: center; 

            z-index: 10;
	    opacity: 0;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
          }

.imgtext:hover { opacity:1; }
.hovertext     { display:flex; align-items: center; justify-content: center; width:100%; height:100%; line-height:1.4em; vertical-align:middle; font-family: AllerLight; }
/*img { z-index:1; }*/

.imgContent      { vertical-align:middle; }

.stdimg { position: relative; padding: 0; width:100%; display:block; height:244px; background-size:cover; background-position: center center; cursor:pointer; border-radius:0; border:6px solid #fff; box-shadow:0 0 10px rgba(0,0,0,0.3); vertical-align:middle; }


/* TRANSITION FX */

.imgparent { /*width:250px; height:250px; border-radius: 50%;*/ display: inline-block; cursor: pointer; overflow: hidden; position: relative; /*border: 8px solid #fff; box-shadow:0 0 10px 2px rgba(0,0,0,0.1); margin:20px 0 20px 0; */  }
.imgchild  { display:block; /*width: 100%; height: 242px;*/ background-size: cover;  /*background-repeat: no-repeat;*/
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.imgparent:hover .imgchild, .imgparent:focus .imgchild {
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.imgparent:hover .imgchild:before, .imgparent:focus .imgchild:before {
    display: block;
		/*opacity: 0.7;*/
}

.imgparent:hover a, .imgparent:focus a {
    display: block;
}

.imgchild:before {
    content: "";
    display: block;
	opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(52,73,94,0.75);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

/** INLINE TEXT IMAGE **/

.textImageSpace { margin-top:25px; }
.rightPosImage  { float:right; width:31.72%; margin: 0 0 25px 25px; }
.leftPosImage   { float:left; width:31.72%; margin: 0 25px 25px 0px; }


/** IMAGE CAPTION / COPYRIGHTS **/

.imgCapBox    { margin-bottom:25px; }
.imageCaption { margin-top:10px; display:block; font-size: 16px; }
.imageCopyright { font-size:12px; text-transform:uppercase; }


/*
## -----------------------------------------------------------------------------
##
##  GLOBAL COLS
##                                             
*/

.colMax          { max-width:1200px; }
.colPadTopBottom { padding: 20px 0; }
.colPadAround    { padding: 20px; }

.col100ns { float:left; margin:0; width:100%; }
.col75ns  { float:left; margin:0; display:block; width:75%; }
.col50ns  { float:left; margin:0; display:block; width:50%; }
.col66ns  { float:left; margin:0; display:block; width:66%;  }
.col33ns  { float:left; margin:0; display:block; width:33.333333333%; }
.gold12ns { float:left; margin:0; display:block; width:38.196666666%; }
.gold21ns { float:left; margin:0; display:block; width:61.803333333%; }
.col25ns  { float:left; margin:0; display:block; width:25%; }
.col20ns  { float:left; margin:0; display:block; width:20%; }
.col16ns  { float:left; margin:0; display:block; width:16.666666666%; }

/*
.col100 { float:left; margin:0; width:100%; }
.col75  { float:left; margin:0; display:block; width:72.5%; }
.col50  { float:left; margin:0; display:block; width:46.5%; }
.col66  { float:left; margin:0; display:block; width:65%; }
.col33  { float:left; margin:0; display:block; width:30%; }
.col25  { float:left; margin:0; display:block; width:23%; }
*/

/* 25px */

.col100 { float:left; margin:0; width:100%; }
.col75  { float:left; margin:0; display:block; width:72.916666666%; }
.col50  { float:left; margin:0; display:block; width:47.916666666%; }
.col66  { float:left; margin:0; display:block; width:64.5833333333326666%; }
.col33  { float:left; margin:0; display:block; width:31.2499999999966666%; }
.gold12 { float:left; margin:0; display:block; width:36.113267791%; }
.gold21 { float:left; margin:0; display:block; width:59.720065541%; }
.col25  { float:left; margin:0; display:block; width:22.916666666%; }
.col20  { float:left; margin:0; display:block; width:17.916666666%; }
.col16  { float:left; margin:0; display:block; width:14.583333326666%; }

.space2 { float:left; display:block; margin-right: 4.166666666%; }
.space3 { float:left; display:block; margin-right: 3.125%; }
.space4 { float:left; display:block; margin-right: 2.7777777777%; }
.space5 { float:left; display:block; margin-right: 2.6041666666%; }
.space6 { float:left; display:block; margin-right: 2.5%; }

/** ----------------------------------------------------------------------------
/** 
/**  GLOBALSPACE SYSTEM:
/**  Hat gleiche horizontale Abstandsbeite bei den Spacern
/**  Berechnet dafuer die Breite der Bloecke
/**

:root {
  --globalspacer:4%;   /* Abstand Div Bloecke - Global - 50px of 1200px*/
}

.gspace   { float:left; display:block; margin-right: var(--globalspacer); }  /* Globalspace 50px * /

  /* 1 COLS * / 

.col100 { float:left; margin:0; width:100%; }

  /* 2 COLS GLOBALSPACER SYSTEM * /  

.col75  { float:left; display:block; width: calc(75% - (var(--globalspacer)/2)) }
.col50  { float:left; display:block; width: calc(50% - (var(--globalspacer)/2)) }
.col66  { float:left; display:block; width: calc(66.666666666% - (var(--globalspacer)/2)) }
.col33  { float:left; display:block; width: calc(33.333333333% - (var(--globalspacer)/2)) }
.col25  { float:left; display:block; width: calc(25% - (var(--globalspacer)/2)) }
.gold12 { float:left; display:block; width: calc(38.196666666% - (var(--globalspacer)/2)) }
.gold21 { float:left; display:block; width: calc(61.803333333% - (var(--globalspacer)/2)) }

  /* 3 COLS GLOBALSPACER SYSTEM * /

.col50_2  { float:left; display:block; width: calc(50% - (var(--globalspacer)*2/3)) }
.col33_2  { float:left; display:block; width: calc(33.3333333% - (var(--globalspacer)*2/3)) }
.col25_2  { float:left; display:block; width: calc(25% - (var(--globalspacer)*2/3)) }

  /* 4 COLS GLOBALSPACER SYSTEM * / 

.col25_3  { float:left; display:block; width: calc(25% - (var(--globalspacer)*3/4)) }

  /* 5 COLS GLOBALSPACER SYSTEM * / 

.col20_4  { float:left; display:block; width: calc(20% - (var(--globalspacer)*4/5)) }


  /* 6 COLS GLOBALSPACER SYSTEM * / 

  .col16_5  { float:left; display:block; width: calc(16.666666666% - (var(--globalspacer)*5/6)) }
  /*.col16_5  { float:left; display:block; width: calc(16.666666666% - (5%/6)) } * /

-----------------------------------------------------------------------------**/


/*
## -----------------------------------------------------------------------------
##
##  GLOBAL RESPONSIVE SLIDERS
##                                             
*/

.mainslider { display:block; width:100%; }
.sliderow   { display:block; width:100%; background:transparent; }
.innerrow   { display:block; width:100%; margin:0 auto; }

/**
.mitslider  { width:1072px; }

.btboxcon     { width: 1200px; text-align:left; margin: 0 auto; /* position:relative; top: 48%; transform: translateY(-48%); */ } 
.slidebutton  { margin: -260px 0 0 48%; }

**/


/*
############################################################################
###                                                                         
###  SPINNER2
###                                                                           
*/


.loader2 {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.loader2 div {
  position: absolute;
  top: 54px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #423a02;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader2 div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.loader2 div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loader2 div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loader2 div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}



/*
## -----------------------------------------------------------------------------
##
##  CLEAR STYLES
##                                             
*/
 
    .clear        { clear:both; }
    .group:after  { content: ""; display: table; clear: both; }