@import url('https://cdn.klct-gmbh.de/bootstrapcss/current/dist/css/bootstrap.min.css');
@import url('https://cdn.klct-gmbh.de/font-awesome/current/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* Anpassung Firmenlogo */
@media (min-width: 992px) {
	#header-logo {
		float: left;
		height: 7em;
		background: url('https://cdn.klct-gmbh.de/Ebay/Ebay_TB_2017v1/images/Firmenlogo_breit.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
		flex-basis: 90%;
	}
}

@media (max-width: 991px) {
	#header-logo {
		float: left;
		height: 5em;
		background: url('https://cdn.klct-gmbh.de/Ebay/Ebay_TB_2017v1/images/Firmenlogo.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		flex-basis: 90%;
	}
}

#header {
	background: rgb(249,249,249);
	background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 100%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(246,246,246,1) 100%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(249,249,249,1) 0%,rgba(246,246,246,1) 100%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ffffff',GradientType=0 );
}

/* Footertabs */
.tabs {
	float: none;
	list-style: none;
	padding: 0;
	margin: 75px 0 0 0;
}

.tabs:after {
	content: '';
	display: table;
	clear: both;
}

.tabs input[type=radio] {
	display:none;
}

.tabs label {
	display: block;
	float: left;
	width: 100%;
	color: #ccc;
	font-size: 1.5em;
	font-weight: normal;
	text-decoration: none;
	line-height: 2;
	cursor: pointer;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

@media (min-width: 992px) {
	.tabs label {
		display: block;
		float: left;
		width: 100%;
		color: #ccc;
		font-size: 2em;
		font-weight: normal;
		text-decoration: none;
		text-align: center;
		line-height: 2;
		cursor: pointer;
		box-shadow: inset 0 4px #ccc;
		border-bottom: 4px solid #ccc;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
	}
	.tabs label:hover {
		color: #3498db;
		box-shadow: inset 0 4px #3498db;
		border-bottom: 4px solid #3498db;
	}
	#artikelbeschreibung {
		padding-top: 30px;
	}
}


.tabs label i {
	padding: 5px;
	margin-right: 0;
}

.tab-content {
	display: none;
	width: 100%;
	float: left;
	padding: 15px;
	box-sizing: border-box;
	background-color:#ffffff;
}

.tab-content * {
	-webkit-animation: scale 0.7s ease-in-out;
	-moz-animation: scale 0.7s ease-in-out;
	animation: scale 0.7s ease-in-out;
}

@keyframes scale {
  0% {
	transform: scale(0.9);
	opacity: 0;
	}
  50% {
	transform: scale(1.01);
	opacity: 0.5;
	}
  100% {
	transform: scale(1);
	opacity: 1;
  }
}

.tabs [id^="tab"]:checked + div label {
	background: #FFF;
	box-shadow: inset 0 4px #3498db;
	border-bottom: 4px solid #3498db;
	color: #3498db;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
	display: block;
}

/* Artikelbildslider */ 

.slider {
	width: 480px;
	position: relative;
	padding-top: 480px;
	height: 550px;
	display: flex;
	flex-direction: row;	
	/*margin: 100px auto;*/
	/*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);*/
}
.slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
	max-width: 480px;
	max-height: 480px;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	margin: 18px 0 0 18px;
	/*border: 3px solid #999;*/
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	opacity: 0.6;
	/*width: 10%;*/
}

.slider label img{
	display: block;
	width: 100%;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
	/*border-color: #666;*/
	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}

@media (min-width: 768px) and (max-width: 1279px) {
	.slider{
		margin-top: 30px;
		/*margin-left: auto;
		margin-right: auto;*/
	}
	#artikelbeschreibung {
		margin-top: 30px;
	}
}

@media (min-width: 1280px) {
	.slider{
		width: 600px;
		padding-top: 600px;
		height: 660px;
		margin: auto;
	}
	.slider>img{
		max-width: 600px;
		max-height: 600px;
	}
}

#sicherheitshinweise {
	margin-top: 100px;
	font-size: 0.8em;
}

#ds_div > div:last-child {
	display: none;
}