/* Styles main */

.head_wrapper {
	/* background-color: #021c41; */
	background-color: #1b212f;
}
@media (min-width: 768px) {
	.head_wrapper {
		background-image: url(/shop/grafik_bb/collage_blau.jpg);
	}
}


.content_wrapper {min-height: 500px;}    /* Soll verhindern, dass Footer zuweit nach oben rutscht auf kurzen Seiten */

.onblack { color: silver; }
.onblack a {color: silver;}
.onblack_norm { color: silver; }

a, a:active, a:focus, a:visited {
	outline: none;

}


@media only screen and (max-width: 768px) {
	/* Für Input Felder auf kleinen Screens */
	.txtinput {
		font-size: 16px;
	}
}

.footer { color: silver; padding-top: 40px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#112044+0,060b18+100 */
	/*background: rgb(17,32,68); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#112044', endColorstr='#060b18',GradientType=0 ); /* IE6-9 */
	background-color: #171E2F;
	/*background: #1b212f;	 */
}


.footer a { color: silver; }

.footer-col {margin-bottom: 60px;}
.footer-col H5 {color: #ECD54F; font-weight: bold; margin-top: 5px; margin-bottom: 5px;}

hr.stylish-hell {
	border: 0;
	height: 2px;
	margin-top: 6px;
	margin-bottom: 15px;
	/* background-image: linear-gradient(to right, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75), rgba(128, 128, 128, 0)); */
 	background-image: linear-gradient(to right, rgba(128, 128, 128, 1), rgba(128, 128, 128, 0), rgba(128, 128, 128, 0));
}

@media only screen and (max-width: 768px) {
	/* Für Handys (portrait und landscape) und tablett portrait */
	body {
		font-size: 16px;
	}
}


.maxWidthContainer {max-width: 1700px;}
	
@media (min-width: 1500px) {
	.container {
		width: 1320px;
	}
}

.head-line {
	background-color: rgba(11,11,11,0.5);
}

.headlink {display: inline-block; margin-left: 15px;}
.headerlogin {display: inline-block; position: relative;}
.headerlogindrop {
	position: absolute; right: -100px; top: 23px; z-index: 99; width: 350px; background-color: rgba(14, 23, 47, 0.8);

    	border-bottom-right-radius: 1em;
    	border-bottom-left-radius: 1em;
}

.main-header {padding: 0px;}
@media (min-width: 992px) {
	.main-header {
		background: url(/shop/grafik_bb/header_links.png) left no-repeat;
	}
}


#header-container {padding-top: 21px; min-height: 86px;}
@media (max-width: 767px) {
	#header-container {padding-top: 16px; min-height: 70px;}
}

#suchformM {
	border: 0;
    	-webkit-box-shadow: none;
    	box-shadow: none;
	width:100%; border:none; margin: 0px; padding: 8px 15px;
}

.yellow-bar {
	/* Gelbe Kopfzeile */
	height: 4px; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d4c35b+8,39486f+41 */
	background: rgb(212,195,91); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(212,195,91,1) 8%, rgba(57,72,111,1) 41%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(212,195,91,1) 8%,rgba(57,72,111,1) 41%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(212,195,91,1) 8%,rgba(57,72,111,1) 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4c35b', endColorstr='#39486f',GradientType=1 ); /* IE6-9 */
}

.yellow-footer {
	height: 6px; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d4c35b+8,333333+50,d4c35b+92 */
background: rgb(212,195,91); /* Old browsers */
background: -moz-linear-gradient(left, rgba(212,195,91,1) 8%, rgba(51,51,51,1) 50%, rgba(212,195,91,1) 92%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(212,195,91,1) 8%,rgba(51,51,51,1) 50%,rgba(212,195,91,1) 92%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(212,195,91,1) 8%,rgba(51,51,51,1) 50%,rgba(212,195,91,1) 92%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4c35b', endColorstr='#d4c35b',GradientType=1 ); /* IE6-9 */
}

.header-balken {
	height: 7px; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a8a8a8+1,0b152e+29,0b152e+74,a8a8a8+100 */
	background: rgb(168,168,168); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(168,168,168,1) 1%, rgba(11,21,46,1) 29%, rgba(11,21,46,1) 74%, rgba(168,168,168,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(168,168,168,1) 1%,rgba(11,21,46,1) 29%,rgba(11,21,46,1) 74%,rgba(168,168,168,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(168,168,168,1) 1%,rgba(11,21,46,1) 29%,rgba(11,21,46,1) 74%,rgba(168,168,168,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#a8a8a8',GradientType=1 ); /* IE6-9 */
}




.navbar-schatten {
	height: 12px; 
	margin-bottom: 20px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+4,0+92 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 4%, rgba(0,0,0,0) 92%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 4%,rgba(0,0,0,0) 92%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 4%,rgba(0,0,0,0) 92%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}


.footer-schatten {
	height: 12px; 
	margin-top: 30px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+8,0.65+96 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 8%, rgba(0,0,0,0.65) 96%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 8%,rgba(0,0,0,0.65) 96%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 8%,rgba(0,0,0,0.65) 96%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}


.mybutton {
	background:    #ffd966;
	background:    -webkit-linear-gradient(#ffd966, #ddb440);
	background:    linear-gradient(#ffd966, #ddb440);

	border:        1px solid #625241;
	border-radius: 5px;
	color:         #000;
	display:       inline-block;
	padding:       7px 12px;
	font:          normal 400 18px/1 "Calibri", sans-serif;
	text-align:    center;
	min-width:     200px;
}

.mybutton:hover {
	background:    #fcd55e;
	background:    -webkit-linear-gradient(#fcd55e, #dea00b);
	background:    linear-gradient(#fcd55e, #dea00b);
	color:         #000;
	border:        1px solid #333333;
}


@media only screen and (max-width : 768px) {
	 /* Extra Small Devices, Phones */ 

	.mybutton {
		background:    #fcd55e;
		background:    -webkit-linear-gradient(#fcd55e, #dea00b);
		background:    linear-gradient(#fcd55e, #dea00b);
		border:        1px solid #625241;
		border-radius: 5px;
		color:         #000;
		display:       inline-block;
		padding:       13px 16px;
		font:          normal 400 20px/1 "Calibri", sans-serif;
		text-align:    center;
		width:         100%;
	}
}

.mybuttonback {
	background:    #5d6b8e;
	background:    -webkit-linear-gradient(#5d6b8e, #223463);
	background:    linear-gradient(#5d6b8e, #223463);
	border:        1px solid #3b4b7b;
	border-radius: 5px;
	color:         #fff;
	display:       inline-block;
	padding:       8px 20px;
	font:          normal 400 18px/1 "Calibri", sans-serif;
	text-align:    center;
	text-shadow:   1px 1px 0 #000;
	min-width:     200px;
}

.mybuttonback:hover {
	background:    #485881;
	background:    -webkit-linear-gradient(#485881, #142553);
	background:    linear-gradient(#485881, #142553);
	border:        1px solid #3b4b7b;
	border-radius: 5px;
	color:         #fff;
}

@media only screen and (max-width : 768px) {
	 /* Extra Small Devices, Phones */ 

	.mybuttonback {
		background:    #5d6b8e;
		background:    -webkit-linear-gradient(#5d6b8e, #223463);
		background:    linear-gradient(#5d6b8e, #223463);
		border:        1px solid #3b4b7b;
		border-radius: 5px;
		color:         #fff;
		display:       inline-block;
		padding:       13px 16px;
		font:          normal 400 20px/1 "Calibri", sans-serif;
		text-align:    center;
		width:         100%;
	}
}








.mybuttonblue {
	background:    #3d85c6;
	background:    -webkit-linear-gradient(#3d85c6, #073763);
	background:    linear-gradient(#3d85c6, #073763);
	border:        1px solid #3b4b7b;
	border-radius: 4px;
	color:         #fff;
	display:       inline-block;
	padding:       8px 20px;
	font:          normal 400 18px/1 "Calibri", sans-serif;
	text-align:    center;
	text-shadow:   none;
}


.mybuttonwhite {
	background:    #eeeeee;
	border:        1px solid #333333;
	border-radius: 5px;
	color:         #333;
	display:       inline-block;
	padding:       7px 12px;
	font:          normal 400 18px/1 "Calibri", sans-serif;
	text-align:    center;
	min-width:     200px;
}

.mybuttonwhite:hover {color:         #000000;}

@media only screen and (max-width : 768px) {
	 /* Extra Small Devices, Phones */ 
	.mybuttonwhite {
		background:    #eeeeee;
		border:        1px solid #333333;
		border-radius: 5px;
		color:         #333;
		display:       inline-block;
		padding:       13px 16px;
		font:          normal 400 20px/1 "Calibri", sans-serif;
		text-align:    center;
		width:         100%;
	}
}



#suchform .input-group {width:75%;}
@media only screen and (max-width : 991px) {
	#suchform .input-group {width:100%;}
}

#livesearch {z-index:9; position: absolute; background-color: white; width:100%; padding: 0px 10px 10px 10px; display: none;}

#livesearchM {z-index:9; position: absolute; background-color: white; width:100%; padding: 0px 10px 10px 10px; display: none;}


.menudrop {z-index:9; position: absolute; background-color: white; width:100%; padding: 15px; 
	border:        1px solid #BBBBBB;
	border-radius: 0 0 4px 4px;
	-webkit-box-shadow: 0 10px 6px -6px grey;
	   -moz-box-shadow: 0 10px 6px -6px grey;
	        box-shadow: 0 10px 6px -6px grey;
}



.menudrop-wrap {z-index:9;position: relative;}


.invis {border:none; background:none; margin-top:0px; padding-top:0px;}

.livesearch-pic {
	max-height: 30px;
	margin: auto;
}



/* Warenkorb Buttons im Header */
.wkButtonBig i {font-size: 30px;}
.wkButtonSmall i {font-size: 25px;}

.wkButtonA {
    	/* WK Button Aktiv */
    	background-color: Transparent;
    	border: none;
    	cursor: pointer;
    	overflow: hidden;
    	outline:none;
	color: #edc417;
}
.wkButtonA:hover {color: #edc417; text-shadow: 0px 0px 16px #DDDDDD;}

.wkButtonI {
    /* WK Button Inaktiv */
	color: #666666;
    	cursor: auto;
}
.wkButtonI:hover {color: #666666;}



/* Login Modal */
#myLogin .modal-content {
}

#myLogin .modal-header {

}


/* WK Modal */
#ModalWK img {max-width: 140px;}



/* Side WK */
#myModalWK .modal-dialog {
	position: fixed;
	margin: auto;
	width: 320px;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}


#myModalWK .modal-content {
	height: 100%;
	overflow-y: auto;
}
	

#myModalWK .modal-body {
	padding: 15px 15px 80px;
}

       
/*Right*/
.modal.right.fade .modal-dialog {
	right: -320px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
	        transition: opacity 0.3s linear, right 0.3s ease-out;
}
	
.modal.right.fade.in .modal-dialog {
	right: 0;
}

/* ----- MODAL STYLE ----- */
#myModalWK .modal-content {
	border-radius: 0;
	border: none;
}

#myModalWK .modal-header {
	border-bottom-color: #EEEEEE;
	background-color: #FAFAFA;
}


.panel-primary>.panel-heading {

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#112044+0,060b18+100 */
	background: rgb(17,32,68); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(17,32,68,1) 0%, rgba(6,11,24,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(17,32,68,1) 0%,rgba(6,11,24,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(17,32,68,1) 0%,rgba(6,11,24,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#112044', endColorstr='#060b18',GradientType=0 ); /* IE6-9 */
}

.panel-primary {
	border-color: #999999;
	box-shadow: 0 8px 6px -6px #444444;
}




/* ***************************************************  */
/* NAVBAR                                               */
/* ***************************************************  */

/* Stellt sicher, dass auf PC die Hauptmenuepunkte nicht geklickt werden können (ausser beim Hamburger Menue) */
@media (min-width: 768px) {
	.no-touch .inactiveLink {
		pointer-events: none;
   		cursor: default;
	}
}

.navbar {margin-bottom: 0px;}

.nav > li > a {
	/* Macht Navbar schmaler */
	padding: 10px 10px;
}
	
.navbar-btn {margin-top: 3px; margin-bottom: 3px; }

#myNavbar {margin-left: 0px;}


@media (min-width: 768px) {
	/* Aktive Hauptgruppe markieren */
	.mainGroupActive:after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0; left: 0;
		width: 100%;
		height: 3px;
		background: #e8ba1c;
	}
}


@media (max-width: 767px) {
	/* Menuepunkte auf Handy */
	.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #333; font-size: 16px;}
}
@media (max-width: 767px) {
	/* Menuepunkte auf Handy */
	.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {color: #000; font-size: 16px;}
}



#myHamburger {
	margin-left: 15px;
	background-color: #DDDDDD;
}


@media (max-width: 767px) {
	.navbar-nav {margin: 7.5px 0px;}
}

@media (max-width: 767px) {
	#myNavbar {background-color: #DDDDDD; color: #444444;}
}

.navbar-custom {background-color: rgba(11,11,11,0.3); border-radius:0;}

/* .navbar-custom.navbar-fixed-top {background-color: rgba(1,26,57,0.85);} */
.navbar-custom.navbar-fixed-top {background-color: rgba(2,11,30,0.85);}

.navbar-custom .navbar-nav > li > a {
    	color:#EEEEEE;
	font-size: 15px;
}

@media (max-width: 767px) {
	.navbar-custom .navbar-nav > li > a {
    		color:#222222;
		font-size: 16px;
	}
}


.navbar-custom .dropdown .dropdown-toggle {
	border-radius: 4px 4px 0px 0px;
}

.navbar-custom .navbar-nav > .active > a {
    color: #FFFFFF;
    background-color:transparent;
}



@media screen and (max-width: 767px) {
	.navbar-custom .navbar-nav > li > a:hover,
	.navbar-custom .navbar-nav > li > a:focus,
	.navbar-custom .navbar-nav > .active > a:hover,
	.navbar-custom .navbar-nav > .active > a:focus,
	.navbar-custom .navbar-nav > .open >a {
		text-decoration: none;
		color: black;
	}
}

@media screen and (min-width: 768px) {
	.navbar-custom .navbar-nav > li > a:hover,
	.navbar-custom .navbar-nav > li > a:focus,
	.navbar-custom .navbar-nav > .active > a:hover,
	.navbar-custom .navbar-nav > .active > a:focus,
	.navbar-custom .navbar-nav > .open >a {
		text-decoration: none;
		/* Geändert für Hauptmenupunkte als Links */
		color: #e8ba1c;
	}
}


@media (min-width: 768px) {
	.navbar-custom .navbar-nav > li > a:focus,
	.navbar-custom .navbar-nav > .active > a:focus,
	.navbar-custom .navbar-nav > .open >a {
		color: white;
	}
}



.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}

.navbar-collapse {
	padding-right: 0px;
	padding-left: 0px;
}



@media screen and (min-width: 768px) {
	.no-touch .dropdown:hover .dropdown-menu {
		   display: block;
	}
}


@media screen and (min-width: 768px) {
	.no-touch .dropdown:hover .dropdown-toggle {
		background: white;
		color: black; 
	}
}


/* Unterteilung bei den dropdowns in der Nav */
nav ul li .newblock:before {
  content: '\00BB';
  position: relative; 
  top: -2px; 
  padding-right: 8px; 
  color: #fff;
}


/* 
Unterschiedliche Verhaltensweisen von tablets was die Hauptmenue Links betrifft:
Beim Klick auf Hauptmenue:
- Android -> a:focus
- Android-Chrome -> a:focus
- iPad -> a:focus

Beim Klick auf Hauptmenue und anschliessendem Klick in einen leeren Bereich:
- Android -> a (standard)
- Android-Chrome -> a (standard)
- iPad -> a:focus

Beim Klick auf Hauptmenue und nochmaligem Klick auf Hauptmenue:
- Android -> a:hover
- Android-Chrome -> a:focus
- iPad -> a:hover
 */

@media only screen and (min-width: 768px) {
	.touch .navbar-default .navbar-nav> li >a,
	.touch .navbar-default .navbar-nav> li >a:focus, 
	.touch .navbar-default .navbar-nav> li >a:hover {
		color: #EEEEEE;
	}
}

@media only screen and (min-width: 768px) {
	.touch .navbar-default .navbar-nav>.open>a,
	.touch .navbar-default .navbar-nav>.open>a:focus {
		color: black;
	}
}