@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);


body {
  background: #000000;
	color: #ffffff;
  font-family: "Open Sans", "Arial";
}
main {
  	max-width: 800px;
  	margin: 20px auto;
	background: #ffffff;
	padding: 20px;
	height: auto;
}
input[name=css-tabs] {
  display: none;
}
a {
	color: #18b90a;
}
#tabs {
	padding: 0 0 0 50px;
	width: calc(100% + 50px);
	margin-left: -50px;
	background: #000000;
	height: 80px;
	border-bottom: 5px solid #18b90a;
	box-shadow: 0 3px 5px #000000;
}
#tabs::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -100;
	width: 100%;
	left: 0;
	margin-top: 16px;
	height: 80px;
	background: #000000;
	border-bottom: 5px solid #18b90a;
}
#tabs::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	height: 80px;
	width: 102px;
	background: #18b90a;
	transition: transform 400ms;
}
#tabs label {
	position: relative;
	z-index: 100;
	display: block;
	float: left;
  	font-size: 13px;
	text-transform: uppercase;
	text-align: center;
	width: 100px;
	height: 100%;
	border-right: 1px dotted #000000;
	cursor: pointer;
	color: #ffffff;
	font-weight: 500px;
}
#tabs label:first-child {
	border-left: 1px dotted #000000;
}
#tabs label::before {
	content: "";
	display: block;
	height: 30px;
	width: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: invert(40%);
	margin: 10px auto;
}

@media(max-width: 968px){
	#tabs::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 0;
		height: 80px;
		width: 80px;
		background: #18b90a;
		transition: transform 300ms;
	}
	#tabs label {
		position: relative;
		z-index: 100;
		display: block;
		float: left;
		font-size: 12px;
		text-transform: uppercase;
		text-align: center;
		width: 80px;
		height: 100%;
		border-right: 1px dotted #000000;
		cursor: pointer;
		color: #ffffff;
		font-weight: 500px;
	}
	#tabs label::before {
		content: "";
		display: block;
		height: 20px;
		width: 30px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		filter: invert(40%);
		margin: 15px auto;
	}

}
#tab1::before {
	background-image: url(https://enotaempresarial.com.br/wp-content/uploads/2021/06/conteudo-do-site.png);
}
#tab2::before {
	background-image: url(https://enotaempresarial.com.br/wp-content/uploads/2021/06/aplicativo-movel.png);
}
#tab3::before {
	background-image: url(https://enotaempresarial.com.br/wp-content/uploads/2021/06/sistema.png);
}
#tab4::before {
	background-image: url(https://enotaempresarial.com.br/wp-content/uploads/2021/06/marketing-digital.png);
}
#tab5::before {
	background-image: url(https://enotaempresarial.com.br/wp-content/uploads/2021/08/autodraw-06_06_2021-22_27_52.png);
}
#radio1:checked ~ #tabs #tab1::before, #radio2:checked ~ #tabs #tab2::before, #radio3:checked ~ #tabs #tab3::before, #radio4:checked ~ #tabs #tab4::before, #radio5:checked ~ #tabs #tab5::before {
	filter: invert(100%);
}
#radio1:checked ~ #tabs::after {
	transform: translateX(0);
}
#radio2:checked ~ #tabs::after {
	transform: translateX(101px);
}
#radio3:checked ~ #tabs::after {
	transform: translateX(202px);
}
#radio4:checked ~ #tabs::after {
	transform: translateX(303px);
}
#radio5:checked ~ #tabs::after {
	transform: translateX(404px);
}
@media(max-width: 968px){
	#radio1:checked ~ #tabs #tab1::before, #radio2:checked ~ #tabs #tab2::before, #radio3:checked ~ #tabs #tab3::before, #radio4:checked ~ #tabs #tab4::before, #radio5:checked ~ #tabs #tab5::before {
		filter: invert(100%);
	}
	#radio1:checked ~ #tabs::after {
		transform: translateX(0);
	}
	#radio2:checked ~ #tabs::after {
		transform: translateX(82px);
	}
	#radio3:checked ~ #tabs::after {
		transform: translateX(164px);
	}
	#radio4:checked ~ #tabs::after {
		transform: translateX(246px);
	}
	#radio5:checked ~ #tabs::after {
		transform: translateX(300px);
	}

}
#content {
	position: relative;
	height: 500px;
	padding-top: 20px;
}
#content::before {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	margin-left: -50px;
	border-top: 8px solid #000;
	border-right: 10px solid #000;
	border-left: 10px solid transparent;
	border-bottom: 8px solid transparent;
}
#content::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	margin-left: calc(100% + 30px);
	border-top: 8px solid #000;
	border-left: 10px solid #000;
	border-right: 10px solid transparent;
	border-bottom: 8px solid transparent;
	display: none;
}
#content section {
	position: absolute;
	transform: translateY(50px);
	opacity: 0;
	transition: transform 500ms, opacity 500ms;
}
#radio1:checked ~ #content #content1, #radio2:checked ~ #content #content2, #radio3:checked ~ #content #content3, #radio4:checked ~ #content #content4, #radio5:checked ~ #content #content5 {
	transform: translateY(0);
	opacity: 1;
}
footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 13px;
  background: #474545;
  padding: 5px 10px;
  margin: 5px;
}

.clash-card__unit-description {
	padding: 5px;
  }

.wrapper {
	padding-top: 10px;
	padding-bottom: 30px;
}
.wrapper:focus{
	outline: 0;
}
.clash-card {
	background: white;
	width: 300px;
	display: inline-block;
	margin: auto;
	border-radius: 15px;
	position: relative;
	text-align: center;
	box-shadow: -1px 15px 30px -12px black;
	z-index: 9999;
}
.clash-card__image {
	margin-bottom: 5px;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
}
.clash-card__image--barbarian {
	background-color: #037917;

}

.clash-card__image--barbarian img {
	width: 300px;
	height: 200px;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
}

.clash-card__level {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 3px;
}

.clash-card__level--barbarian {
	color: #18b90a;
}

.clash-card__unit-name {
	font-size: 26px;
	color: black;
	font-weight: 900;
	margin-bottom: 5px;
}
.clash-card__unit-stats--barbarian {
	background: #9af19a;
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
}
.clash-card__unit-stats--barbarian .one-third {
	border-right: 1px solid #000000;
}

.clash-card__unit-stats {
	color: rgb(0, 0, 0);
	font-weight: 700;
	border-bottom-left-radius: 14;
	border-bottom-right-radius: 14;
}
.clash-card__unit-stats .one-third {
	width: 33%;
    float: left;
    margin-top: 15px;

}
.clash-card__unit-stats sup{
	position: absolute;
    bottom: 2px; 
    font-size: 9px;
    margin-left: 2px;

}
.clash-card__unit-stats .stat{
	position: relative;
    font-size: 12px;
    margin-bottom: 5px;

}
.clash-card__unit-stats .stat-value{
	text-transform: uppercase;
    font-weight: 400;
    font-size: 12px;
	padding: 5px;

}
.clash-card__unit-stats .no-border{
	border-right: none;

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