@import url'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300,400,500,600,700&display=swap');

#branding-container{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
	position: absolute;
	z-index: 10000; /* base z-index  */
	width: 100vw;
	height: 100vh;
	background: #000;
	overflow: hidden;
}

#branding-container .tabs input{
	visibility: hidden;
	display: none;
}

#branding-container .buttons{
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10000000; /* base z-index * 1000 */
}

#branding-container .buttons label{
	width: 20px;
	height: 20px;
	background: #fff;
	opacity: 0.6;
	border-radius: 20px;
	cursor: pointer;
	transition: 0.5s;
}

#branding-container .tabs input:nth-child(1):checked ~ .buttons label:nth-child(1),
#branding-container .tabs input:nth-child(2):checked ~ .buttons label:nth-child(2),
#branding-container .tabs input:nth-child(3):checked ~ .buttons label:nth-child(3){
	opacity: 1;
	width: 50px;
}

#branding-container .content{
	position: relative;
	width: 300vw;
	display: flex;
	transition: 0.5s;
}

#branding-container .content .box{
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	padding: 40px;
}

#branding-container .content .box:nth-child(1){
	/*background: linear-gradient(150deg,#95E400,#AC0DFF,white,white,#fff 50%,white,white,#AC0DFF,#95E400);*/
	background: url(../img/backgrounds/1.jpg) no-repeat;
	background-size: cover;
}

#branding-container .content .box:nth-child(2){
	/*background: linear-gradient(90deg,#ff4e50,#f9d423);*/
	background: url(../img/backgrounds/3.jpg) no-repeat;
	background-size: cover;
}

#branding-container .content .box:nth-child(3){
	/*background: linear-gradient(90deg,#9d50bb,#6e48aa);*/
	background: url(../img/backgrounds/4.jpg) no-repeat;
	background-size: cover;
}

#branding-container .tabs input:nth-child(1):checked ~ .content{
	left: 0;
}

#branding-container .tabs input:nth-child(2):checked ~ .content{
	left: -100vw;
}

#branding-container .tabs input:nth-child(3):checked ~ .content{
	left: -200vw;
}

#branding-container .content .box .brand-mirror{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	opacity: 0.4;
	position: absolute;
	z-index: 100005; /* (base z-index * 10) */
	background-color: #000;
}

#branding-container .content .box .brand-blur{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100000; /* (base z-index * 10) */
	background: rgba(0, 0, 0, .1);
	backdrop-filter: blur(4px);
}

#branding-container .content .box .brand-icon{
	padding: 30px;
	border-radius: 50%;
	background: #fff;
	border: none;
	background: rgba(0, 0, 0, .1);
	backdrop-filter: blur(4px);
	/*box-shadow: inset 0px 0px 10px 10px #000;*/
}

#branding-container .content .box .contentBox{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
	color: #fff;
	z-index: 1000000; /* (base z-index * 100) */
}

#branding-container .content .box .contentBox h2{
	text-align: center;
	font-size: 40 	px;
	color: #fff;
}

#branding-container .content .box .contentBox p{
	font-size: 14px;
	max-width: 700px;
	text-align: center;
}

#branding-container .content .box .contentBox .btn-slider i{
	color: #000; 
	font-size: 14px; 
	font-weight: bold; 
}

#branding-container .content .box .contentBox button{
	font-size: 15px;
	text-decoration: none;
	color: #333;
	margin-top: 10px;
	font-weight: 600;
	border: none;
	border-radius: 40px;
	transition: 0.5s;
}

#branding-container .content .box .contentBox button:hover{
	letter-spacing: 0.2em;
}