@charset "utf-8";

/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
   ----- INDEX -----------------------------------------------------------------------------------------------------------------------------------------------
   ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.cncpt01 {
  position: relative;
	background-color: #FFFFFF;
	width:25%;
	padding:5% 37.5%;
}
.btn03 {
	color: #000000;
	background-color: rgba(0,0,0,0.0);
	padding: 5%;
	font-size: 14pt;
	font-weight: 700;
	text-transform: uppercase;
	transition: 0.3s;
	font-family: 'Azonix';
}
.btn03:hover {
	color: #000000;
	background-color: #ffd23f;
}

.item {
	width: 100%;
	height: 100vh;
	position: relative;
}

.bg-wrap {
	clip: rect(0, auto, auto, 0);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bg {
	position: fixed;
	display: block;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	transform: translateZ(0);
	will-change: transform;
}

.bg.bg01 {
	background-image: url(/images/A_bttl01_strawberry.png);
	background-color: #FFFFFF;
}

.bg.bg02 {
	background-image: url(/images/A_bttl02_raspberry.png);
	background-color: #FFFFFF;
}

.bg.bg03 {
	background-image: url(/images/A_bttl03_blackberry.png);
	background-color: #FFFFFF;
}

.bg.bg04 {
	background-image: url(/images/A_bttl04_melonberry.png);
	background-color: #FFFFFF;
}

.bg.bg05 {
	background-image: url(http://carbonxii.com/images/box05_pexpress.png);
	background-color: #ff9933;
}

.bg.bg06 {
	background-image: url(/images/index-cncpt02.jpg);
	background-color: #e23044;
}

.bg.bg07 {
	background-image: linear-gradient(#FFFFFF, #FFFFFF, #FFFFFF, #E5E5E5);
	background-color: #FFFFFF;
}

.bg.bg08 {
	background-color: #d9e3fa;
}

.bg.bg09 {
	background-image: url(http://carbonxii.com/images/box09-cerealmilk.png);
	background-color: #cc9900;
}

.bg.bg10 {
	background-image: url(http://carbonxii.com/images/box10_granddaddypurp.png);
	background-color: #552D80;
}

.bg.bg11 {
	background-image: url(http://carbonxii.com/images/box11_zkittlez.png);
	background-color: #00394d;
}

.bg.bg12 {
	background-color: #FFFFFF;
}

.bg.bg13 {
	background-image: url(http://carbonxii.com/images/box13-kamikazi.png);
	background-color: #660000;
}

.bg.bg14 {
	background-image: url(http://carbonxii.com/images/box14-kingxiii.png);
	background-color: #456f99;
}

.bg.bg15 {
	background-image: url(http://carbonxii.com/images/box15-forbiddenfruit.png);
	background-color: #cc6d29;
}

.bg.bg16 {
	background-image: url(http://carbonxii.com/images/box16-trnwrck.png);
	background-color: #004c66;
}

.bg.bg14-L {
	background-image: url(http://carbonxii.com/images/box14_stwlmnd.png);
	background-color: #ff7f66;
}


.box01, .box02, .box03, .box04, .box05, .box06, .box07, .box08, .box09, .box10, .box11, .box12, .box13, .box14, .box15, .box16, .box14-L {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	margin: auto;
	padding: 35% 14%;
	font-size: 50%;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	float: left;
	display: block;
	opacity: 0;
}
.name01, .name02, .name03, .name04, .name05, .name06, .name07, .name08, .name09, .name10, .name11, .name12, .name13, .name14, .name15, .name16, .name14-L {
	position: absolute;
	left: 75%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	margin: auto;
	padding: 1% 2%;
	font-size: 75%;
	font-weight: 900;
	color: #000000;
	border: 2px solid rgba(255,255,255,0.00);
	text-transform: uppercase;
	float: left;
	display: block;
	transition: 1.3s;
}
.name01:hover, .name02:hover, .name03:hover, .name04:hover, .name05:hover, .name06:hover, .name07:hover, .name08:hover, .name09:hover, .name10:hover, .name11:hover, .name12:hover, .name13:hover, .name14:hover, .name15:hover, .name16:hover, .name14-L:hover {
	border: 2px solid rgba(0,0,0,0.25);
}
.cncpt03 {
	position: relative;
	margin: auto;
	width: 80%;
	padding: 10% 10% 10% 10%;
	background-color: #FFFFFF;
	color: rgba(255,255,255,0.8);
	-webkit-animation: cncpt03 8s ease-in-out infinite;
	-o-animation: cncpt03 8s ease-in-out infinite;
	animation:  cncpt03 8s ease-in-out infinite;
}
@keyframes cncpt03 {
	0%    {background-color: #ffd23f;}
	24.5% {background-color: #ffd23f;}
	25%   {background-color: #540d6e;}
	49.5% {background-color: #540d6e;}
	50%   {background-color: #ee4266;}
	74.5% {background-color: #ee4266;}
	75%   {background-color: #3bceac;}
	99.5% {background-color: #3bceac;}
	100%  {background-color: #ffd23f;}
}
.word_show01 {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 90%;
	opacity: 0.5;
	-webkit-animation: wrd1 8s ease-in-out infinite;
	-o-animation: wrd1 8s ease-in-out infinite;
	animation:  wrd1 8s ease-in-out infinite;
}
@keyframes wrd1 {
	0%    {opacity: 0.5;}
	24.5% {opacity: 0.5;}
	25%   {opacity: 0.0;}
	49.5% {opacity: 0.0;}
	50%   {opacity: 0.0;}
	74.5% {opacity: 0.0;}
	75%   {opacity: 0.0;}
	99.5% {opacity: 0.0;}
	100%  {opacity: 0.5;}
}
.word_show02 {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 90%;
	opacity: 0.5;
	-webkit-animation: wrd2 8s ease-in-out infinite;
	-o-animation: wrd2 8s ease-in-out infinite;
	animation:  wrd2 8s ease-in-out infinite;
}
@keyframes wrd2 {
	0%    {opacity: 0.0;}
	24.5% {opacity: 0.0;}
	25%   {opacity: 0.5;}
	49.5% {opacity: 0.5;}
	50%   {opacity: 0.0;}
	74.5% {opacity: 0.0;}
	75%   {opacity: 0.0;}
	99.5% {opacity: 0.0;}
	100%  {opacity: 0.0;}
}
.word_show03 {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 90%;
	opacity: 0.5;
	-webkit-animation: wrd3 8s ease-in-out infinite;
	-o-animation: wrd3 8s ease-in-out infinite;
	animation:  wrd3 8s ease-in-out infinite;
}
@keyframes wrd3 {
	0%    {opacity: 0.0;}
	24.5% {opacity: 0.0;}
	25%   {opacity: 0.0;}
	49.5% {opacity: 0.0;}
	50%   {opacity: 0.5;}
	74.5% {opacity: 0.5;}
	75%   {opacity: 0.0;}
	99.5% {opacity: 0.0;}
	100%  {opacity: 0.5;}
}
.word_show04 {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 90%;
	opacity: 0.5;
	-webkit-animation: wrd4 8s ease-in-out infinite;
	-o-animation: wrd4 8s ease-in-out infinite;
	animation:  wrd4 8s ease-in-out infinite;
}
@keyframes wrd4 {
	0%    {opacity: 0.0;}
	24.5% {opacity: 0.0;}
	25%   {opacity: 0.0;}
	49.5% {opacity: 0.0;}
	50%   {opacity: 0.0;}
	74.5% {opacity: 0.0;}
	75%   {opacity: 0.5;}
	99.5% {opacity: 0.5;}
	100%  {opacity: 0.0;}
}
.cncpt03 h2 {
	position: relative;
	margin: auto;
	width: 80%;
}
.cncpt03 p {
	position: relative;
	margin: auto;
	width: 80%;
	font-size: 70%;
}
.pop_show {
	position: relative;
	margin: auto;
	width: 80%;
	max-width: 400px;
	padding: 30% 0% 10% 0%;
}
.pop_show img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	overflow: hidden;
}
.pop_show01 {
	-webkit-animation: fruitz1 8s ease-in-out infinite;
	-o-animation: fruitz1 8s ease-in-out infinite;
	animation:  fruitz1 8s ease-in-out infinite;
}
@keyframes fruitz1 {
	0%    {opacity: 1.0; width: 10%;}
	2.5%  {opacity: 1.0; width: 100%;}
	3.0%  {opacity: 1.0; width: 92.5%;}
	3.5%  {opacity: 1.0; width: 100%;}
	22.5% {opacity: 1.0; width: 100%;}
	24.5% {opacity: 1.0; width: 10%;}
	25%   {opacity: 0.0; width: 10%;}
	49.5% {opacity: 0.0;}
	50%   {opacity: 0.0;}
	74.5% {opacity: 0.0;}
	75%   {opacity: 0.0;}
	99.5% {opacity: 0.0;}
	100%  {opacity: 0.0;}
}
.pop_show02 {
	-webkit-animation: fruitz2 8s ease-in-out infinite;
	-o-animation: fruitz2 8s ease-in-out infinite;
	animation:  fruitz2 8s ease-in-out infinite;
}
@keyframes fruitz2 {
	0%    {opacity: 0.0;}
	24.5% {opacity: 0.0;}
	25%   {opacity: 1.0; width: 10%;}
	27.5% {opacity: 1.0; width: 100%;}
	28.0% {opacity: 1.0; width: 92.5%;}
	28.5% {opacity: 1.0; width: 100%;}
	47.5% {opacity: 1.0; width: 100%;}
	49.5% {opacity: 1.0; width: 10%;}
	50%   {opacity: 0.0; width: 10%;}
	74.5% {opacity: 0.0;}
	75%   {opacity: 0.0;}
	99.5% {opacity: 0.0;}
	100%  {opacity: 0.0;}
}
.pop_show03 {
	-webkit-animation: fruitz3 8s ease-in-out infinite;
	-o-animation: fruitz3 8s ease-in-out infinite;
	animation:  fruitz3 8s ease-in-out infinite;
}
@keyframes fruitz3 {
	0%    {opacity: 0.0;}
	24.5% {opacity: 0.0;}
	25%   {opacity: 0.0;}
	49.5% {opacity: 0.0;}
	50%   {opacity: 1.0; width: 10%;}
	52.5% {opacity: 1.0; width: 100%;}
	53.0% {opacity: 1.0; width: 92.5%;}
	53.5% {opacity: 1.0; width: 100%;}
	72.5% {opacity: 1.0; width: 100%;}
	74.5% {opacity: 1.0; width: 10%;}
	75%   {opacity: 0.0; width: 10%;}
	99.5% {opacity: 0.0;}
	100%  {opacity: 0.0;}
}
.pop_show04 {
	-webkit-animation: fruitz4 8s ease-in-out infinite;
	-o-animation: fruitz4 8s ease-in-out infinite;
	animation:  fruitz4 8s ease-in-out infinite;
}
@keyframes fruitz4 {
	0%    {opacity: 0.0; width: 10%;}
	24.5% {opacity: 0.0;}
	25%   {opacity: 0.0;}
	49.5% {opacity: 0.0;}
	50%   {opacity: 0.0;}
	74.5% {opacity: 0.0;}
	75%   {opacity: 1.0; width: 10%;}
	77.5% {opacity: 1.0; width: 100%;}
	78.0% {opacity: 1.0; width: 92.5%;}
	78.5% {opacity: 1.0; width: 100%;}
	97.5% {opacity: 1.0; width: 100%;}
	99.5% {opacity: 1.0; width: 10%;}
	100%  {opacity: 0.0; width: 10%;}
}

#cncpt04 {
	position: relative;
	margin: auto;
	object-fit: cover;
  width: 100%;
  height: 100%;
	opacity: 0.9;
	z-index: 0;
	box-shadow: 0px 0px 50px rgba(0,0,0,0.3);
}
.cncpt0401 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
}
.cncpt0401 h3 {
	font-weight: 200;
	font-size: 160%;
}
.cncpt0401 p {
	position: relative;
	margin: auto;
	width: 80%;
	font-size: 70%;
}
.cncpt05 {
	position: relative;
	margin: auto;
	width: 100%;
	color: rgba(255,255,255,0.8);
	background-image: url(../images/sugar-straws.jpg);
	background-color: #f1dc45;
  background-position: center 60%;
  background-repeat: no-repeat;
  background-size: cover;
}
.cncpt0501 {
	position: relative;
	margin: auto auto auto 10%;
	max-width: 30%;
	padding: 10% 0% 10% 0%;
}
.cncpt0501 img {
	position: relative;
	margin: auto auto 2.5% auto;
	width: 40%;
}
.cncpt0501 h4 {
	font-size: 140%;
	font-weight: 600;
	text-transform: uppercase;
}
.cncpt06 {
	position: relative;
	margin:0;
	width: 100%;
	display: inline-block;
	background: #FFFFFF;
}
.cncpt0601 {
	position: relative;
	margin:0;
	width: 50%;
}
.cncpt0601 img {
	margin-bottom: -2.5%;
}
.cncpt0602 {
	position: absolute;
	width: 50%;
	margin: 0 0% 0 50%;
	left: 0%;
	top: 50%;
	transform: translateY(-50%) translateX(0%);
}
.cncpt0602 h5 {
	color: #000000;
}
.cncpt0602-btn {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 16pt;
	color: #FFFFFF;
	background-color: #000000;
	padding: 2.75% 5% 2% 5%;
	transition: 0.3s;
}
.cncpt0602-btn:hover {
	background-color: #3bceac;
}


@keyframes backgroundmove {
	0%	{transform: scale(1);}
	100%	{transform: scale(1.1);}
}
#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    background-position-x: 50%;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('imageURL');
    background-repeat: no-repeat;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX {}

/* ===========================================================================================================================================================
   ===== MEDIA QUERIES ======================================================================================================================================= 
   =========================================================================================================================================================== */
   
@media only screen and (min-width : 0px) and (max-width : 768px) {
	
	.box01, .box02, .box03, .box04, .box05, .box06, .box07, .box08, .box09, .box10, .box11, .box12, .box13, .box14, .box15, .box16, .box14-L {
		display: none;
	}
	.name01, .name02, .name03, .name04, .name05, .name06, .name07, .name08, .name09, .name10, .name11, .name12, .name13, .name14, .name15, .name16, .name14-L {
		left: 50%;
		top: 85%;
		width: 80%;
		padding: 5% 2%;
		font-size: 50%;
		border: 2px solid rgba(255,255,255,0.05);
	}
	.cncpt03 {
		width: 90%;
		padding: 20% 5% 20% 5%;
	}
	.pop_show {
		position: relative;
		margin: auto;
		width: 80%;
		max-width: 400px;
		padding: 30% 0% 40% 0%;
	}
	
	.cncpt01 {
		position: relative;
		background-color: #FFFFFF;
		width: 60%;
		padding: 25% 20% 10% 20%;
	}
	.btn03 {
		color: #000000;
		background-color: rgba(0,0,0,0.0);
		padding: 5%;
		font-size: 14pt;
		font-weight: 700;
		text-transform: uppercase;
		transition: 0.3s;
	}
	
	#cncpt04 {
		position: relative;
		margin: auto;
		object-fit: cover;
		width: 100%;
		height: 100%;
		opacity: 0.50;
		z-index: 0;
		box-shadow: 0px 0px 50px rgba(0,0,0,0.3);
	}
	.cncpt0401 {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateY(-50%) translateX(-50%);
		background: rgba(14,37,133,0.4);
		padding: 15% 5%;
		width: 60%;
		z-index: 9;
	}
	.cncpt0401 h3 {
		font-weight: 200;
		font-size: 160%;
	}
	.cncpt0401 p {
		position: relative;
		margin: auto;
		width: 80%;
		font-size: 70%;
	}
	.cncpt05 {
		position: relative;
		margin: auto;
		width: 100%;
		color: rgba(255,255,255,0.8);
		background-image: url(../images/sugar-straws.jpg);
		background-color: #f1dc45;
		background-position: 32.5%;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.cncpt0501 {
		position: relative;
		margin: auto auto auto 0%;
		max-width: 90%;
		padding: 40% 5%;
	}
	.cncpt0501 img {
		position: relative;
		margin: auto auto 2.5% auto;
		width: 50%;
	}
	.cncpt0501 h4 {
		font-size: 140%;
		font-weight: 600;
		text-transform: uppercase;
	}
	.cncpt06 {
		position: relative;
		margin:0;
		width: 100%;
		display: inline-block;
		background: #FFFFFF;
	}
	.cncpt0601 {
		position: relative;
		margin:0;
		width: 100%;
	}
	.cncpt0601 img {
		margin-bottom: -2.5%;
	}
	.cncpt0602 {
		position: relative;
		width: 100%;
		margin: 20% auto;
		left: auto;
		top: atuo;
		transform: translateY(0%) translateX(0%);
	}
	.cncpt0602 h5 {
		margin: auto auto 5% auto;
		color: #000000;
	}
	.cncpt0602-btn {
		font-size: 20pt;
		color: #FFFFFF;
		background-color: #000000;
		padding: 5% 8% 3.5% 10%;
		transition: 0.3s;
	}

}