.brandbar-container {
	width: 100%;
	overflow-x: hidden;
	position: relative;
	height: 9px;
}

.brandbar {
	height: 8px;
	width: 100%;
	position: absolute;
	transform: translatex(0%);
	transition: all 0.5s;
}

.overlay-container.show + .brandbar-container > .brandbar {
	transform: translatex(100%);
	transition: all 0.5s;
}

.overlay-container.show + .brandbar-container > .brandbar-second {
	transform: translatex(0%);
	transition: all 0.5s;
}

.brandbar span, .brandbar-second span {
	height: 100%;
	float: left;
}

.brandbar .b01, .brandbar-second .b01 {
	width: 30%;
	background-color: $cr-grey;
}

.brandbar .b02, .brandbar-second .b02 {
	width: 2%;
	background-color: #fff;
}

.brandbar .b03, .brandbar-second .b03 {
	width: 2%;
	background-color: $cr-dkblue;
}

.brandbar .b04, .brandbar-second .b04 {
	width: 19%;
	background-color: $cr-blue;
}

.brandbar .b05, .brandbar-second .b05 {
	width: 7%;
	background-color: $cr-dkblue;
}

.brandbar .b06, .brandbar-second .b06 {
	width: 3%;
	background-color: $cr-blue;
}

.brandbar .b07, .brandbar-second .b07 {
	width: 7%;
	background-color: $cr-dkblue;
}

.brandbar .b08, .brandbar-second .b08 {
	width: 3%;
	background-color: $cr-blue;
}

.brandbar .b09, .brandbar-second .b09 {
	width: 7%;
	background-color: $cr-dkblue;
}

.brandbar .b10, .brandbar-second .b10 {
	width: 3%;
	background-color: $cr-blue;
}

.brandbar .b11, .brandbar-second .b11 {
	width: 1%;
	background-color: #fff;
}

.brandbar .b12, .brandbar-second .b12 {
	width: 1%;
	background-color: $cr-grey;
}

.brandbar .b13, .brandbar-second .b13 {
	width: 2%;
	background-color: #fff;
}

.brandbar .b14, .brandbar-second .b14 {
	width: 13%;
	background-color: $cr-orange;
}