:root {
	--lggray:#BCBCBC;
	--txtgray:#595959;
}

* {
	box-sizing:border-box;
}

img { vertical-align:middle !important; }

h4 { font-size:12px; }

body.page-template-chain-template #content {
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
}
#mobile-chain-wrapper { display:none; }

.chain-wrapper {
	width:min(1400px, 96vw);
	padding:0px clamp(1px, 50px, 4vw) clamp(20px, 50px, 4vw);
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:70px;
}

.production-container {
	position: relative;
	display:inline-block;
	text-align:left;
}

.boxes {
	width:550px;
	height:470px;
	box-shadow: 3px 3px 20px #00000040;
	margin:100px 0;
	position:relative;
}

#production-container2 {
	padding-top:180px;
}


/* BOX1 */
#box1 {
	margin-top:50px !important;
}
.box-flow {
	position:relative;
	height:325px;
	width:100%;
	background:#fff;
	z-index:1;
	overflow:hidden;
}
.box-content {
	position:relative;
	background:#fff;
	height:145px;
	width:100%;
	padding:15px;
	z-index:1;
}
.box-content h4, .box-content h2, .box-content p {
	margin: 0;
	display:inline-block;
	width:100%;
	line-height:1.4;
	z-index:2;
	color:var(--txtgray);
	font-size:14px;
	font-weight:400;
}
.box-content h2 {
	color:var(--accent);
	margin:0 0 10px 0;
	line-height:1;
	font-size:35px;
	font-weight:400;
}
.box-content h4 {
	text-transform:uppercase;
}
.box-content span {
	position: absolute;
	left: 5px;
	top: 5px;
	font-size: 168px;
	font-weight: 900;
	color: var(--accent);
	z-index: 1;
	opacity: 0.1;
	line-height: 0.8;
}

.img1 {
	left: -14px;
	position: absolute;
	width: 140px;
	top: -94px;
}
.img2 {
	right:-70px;
	bottom: 0;
	position: absolute;
	width: 530px;
	animation-name: camion;
	animation-duration:4s;
	animation-direction: alternate;
  	animation-iteration-count: infinite;
  	animation-fill-mode: none;
	animation-delay:1s;
  	animation-play-state: running; 
  	animation-timing-function:ease-in;
}

#sidebox1 {
	position:absolute;
	left:-90px;
	top:193px;
	width:190px;
	height:500px;
	border-top:4px solid var(--accent);
	border-left:4px solid var(--accent);
	border-bottom:4px solid var(--accent);
	border-radius:11px;
	z-index:0;
}

.balls {
	border:2px solid var(--accent);
	border-radius:50%;
	width:14px;
	height:14px;
	z-index:1;
	position:absolute;
	animation-fill-mode: forwards;
	animation-delay: -3s;
	background:#fff;
}
.balline {
	width:1px;
	height:20px;
	background: linear-gradient(180deg, rgba(65,146,100,0) 0%, rgba(65,146,100,0.7) 80%, rgba(65,146,100,1) 100%);
	position:absolute;
	opacity:0;
	animation:balline infinite 2s ease-in;
	animation-delay:2s;
}
.balline1, .balline3 {
	left:-1px;
	top:-26px;
}
.balline2, .balline4 {
	left:10px;
	top:-28px;
}

.ball0 {
	top: -9px;
	left:172px;
	animation:ball0 infinite 2s ease-out;
}
.ball1 {
	left:-9px;
	top:-9px;
	opacity:0;
	animation:ball1 infinite 2s ease-in;
	animation-delay:2s;
}
.ball2 {
	left:-9px;
	top:487px;
	animation:ball2 infinite 2s ease-out;
	opacity:0;
	animation-delay:4s;
}
.ballb3 {
	top: -9px;
	left:172px;
	animation:ball0 infinite 2s ease-out;
	animation-delay:0s;
}
.ballb4 {
	left:-9px;
	top:-9px;
	opacity:0;
	animation:ball1 infinite 2s ease-in;
	animation-delay:4s;
}
.ballb5 {
	left:-9px;
	top:487px;
	animation:ball2 infinite 2s ease-out;
	opacity:0;
	animation-delay:6s;
}

@keyframes camion {
	0% {
	    right: -70px;
	}
	25% {
		right: -70px;
	}
	75% {
		right: -550px;
	}
	100% {
    	right: -550px;
	}
}

@keyframes ball0 {
	0% {
	    transform: translateX(0px);
	}
	100% {
    	transform: translateX(-181px);
	}
}
@keyframes ball1 {
	0% {
	    transform: translateY(0px);
	    opacity:1;
	}
	100% {
    	transform: translateY(497px);
    	opacity:1;
	}
}
@keyframes balline {
	0% {
	    opacity:0;
	}
	100% {
    	opacity:0.7;
	}
}
@keyframes ball2 {
	0% {
	    transform: translateX(0px);
	    opacity:1;
	}
	100% {
    	transform: translateX(200px);
    	opacity:1;
	}
}


/* box2 */
.silos {
	position:absolute;
	bottom:75px;
	width:168px;
	height:168px;
	animation-name:silos;
	animation-duration:16s;
	animation-direction:normal;
  	animation-iteration-count: infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}

.sil0 {
	animation-delay:0;
	left:-200px;
	animation-name:silos;
	animation-duration:16s;
	animation-direction:normal;
  	animation-iteration-count: infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}
.sil1 {
	animation-delay:4s;
	left:-200px;
	animation-name:silos;
	animation-duration:16s;
	animation-direction:normal;
  	animation-iteration-count: infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}
.sil2 {
	animation-delay:8s;
	left:-200px;
	animation-name:silos;
	animation-duration:16s;
	animation-direction:normal;
  	animation-iteration-count: infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}
.sil3 {
	animation-delay:12s;
	left:-200px;
	animation-name:silos;
	animation-duration:16s;
	animation-direction:normal;
  	animation-iteration-count: infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}

.silstart0 {
	animation-delay:0;
	left:-6px;
	animation-name:silstart;
	animation-duration:16s;
	animation-direction:normal;
  	animation-iteration-count: 1;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}
.silstart1 {
	animation-delay:0;
	left:190px;
	animation-name:silstart;
	animation-duration:16s;
	animation-direction:normal;
  	animation-iteration-count: 1;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}
.silstart2 {
	animation-delay:0;
	left:384px;
	animation-name:silstart;
	animation-duration:16s;
	animation-direction:normal;
  	animation-iteration-count: 1;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}

#sidebox2, #sidebox7, #sidebox8, #sidebox9 {
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:-130px;
	width:4px;
	height:160px;
	z-index:0;
	background:var(--accent);
}
.ball3, .ball4 {
	top: 0;
	left:-18px;
	animation-delay:-2s;
	animation-name:ball3;
	animation-duration:2s;
	animation-direction:normal;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in;
}
.ball4 {
	left:8px;
	animation-delay:2.7s;
	animation-duration:2s;
}
.balline3, .balline4 {
	animation-delay:2.7s;
}

@keyframes silos {
	0% {
		left:-200px;
	}
	100% {
		left:575px;
	}
}
@keyframes silstart {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(775px);
	}
}
@keyframes ball3 {
	0% {
	    transform: translateY(0px);
	}
	100% {
    	transform: translateY(160px);
	}
}

/* BOX3 */
.mbuti {
	width:210px; /* 65 margin */
	top:0;
	left:50%;
	position:absolute;
	margin-left:-105px;
	animation-duration:3s;
	animation-direction:normal;
  	animation-iteration-count:1;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in-out;
}
.mbutoa {
	left:-1100px;
}
.mbutob {
	left:-825px;
}
.mbutoc {
	left:-550px;
}
.mbuto0 {
	left:-275px;
}
.mbuto1 {
	left:0;
}
.mbuto3 {
	left:auto;
	right:-105px;
}
#mbuti {
  	z-index:3;
}
.animate1 {
	animation-name:mbutistep1;
}
.animate2 {
	animation-name:mbutistep2;
}
.animate3 {
	animation-name:mbutistep3;
}
.animate4 {
	animation-name:mbutistep4;
}

.dropballs {
	border-radius:50%;
	width: 14px;
	height: 14px;
	z-index: 1;
	position: absolute;
	background: #fff;
	left:50%;
	transform: translateX(-50%);
	top:101px;
	animation-duration:1s;
	animation-direction:normal;
  	animation-iteration-count:1;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in;
	opacity:0;
}
.darkball {
	background:#5a5a5a;
	border:2px solid #5a5a5a;
}
.lightball {
	background:#e9e9e9;
	border:2px solid #e9e9e9;
}
.greenball {
	background:var(--accent);
	border:2px solid var(--accent);
}
.fallball {
	animation-name:fallball;
}

.fondo {
	z-index:5;
	background:#fff;
	position:absolute;
	bottom:0;
	width:100px;
	height:20px;
	left:50%;
	transform:translateX(-50%);
}

.ballgroups {
	position:absolute;
	bottom:1px;
	left:50%;
	transform:translateX(-50%);
	width:170px;
	margin-left:5px;
	z-index:6;
	transition:all 0.1s ease;
}
.ballgroup1 {
	opacity:0;
}
.ballgroup2 {
	opacity:0;
	z-index:7;
}
.ballgroup3 {
	opacity:0;
	z-index:8;
}
.showballs {
	opacity:1;
}


@keyframes mbutistep1 {
	0% {
	    transform:translateX(0);
	}
	33.33% {
		transform:translateX(275px);
	}
	100% {
		transform:translateX(275px);
	}
}
@keyframes mbutistep2 {
	0% {
	    transform:translateX(275px);
	}
	33.33% {
		transform:translateX(550px);
	}
	100% {
		transform:translateX(550px);
	}
}
@keyframes mbutistep3 {
	0% {
	    transform:translateX(550px);
	}
	33.33% {
		transform:translateX(825px);
	}
	100% {
		transform:translateX(825px);
	}
}
@keyframes mbutistep4 {
	0% {
	    transform:translateX(825px);
	}
	33.33% {
		transform:translateX(1100px);
	}
	100% {
		transform:translateX(1100px);
	}
}
@keyframes fallball {
	0% {
		opacity:1;
	    top:101px;
	}
	100% {
    	top:400px;
    	opacity:1;
	}
}


/* BOX4 */
#sidebox3, #sidebox10 {
	position:absolute;
	right:-90px;
	top:193px;
	width:190px;
	height:500px;
	border-top:4px solid var(--lggray);
	border-right:4px solid var(--lggray);
	border-bottom:4px solid var(--lggray);
	border-radius:11px;
	z-index:0;
}

.palletitems {
	width:70px;
	position:absolute;
}

.palitem1 {
	top:-100px;
	left:485px;
	animation-delay:-2s;
	animation-name:pal1;
	animation-duration:6s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in-out;
}
.palitem2 {
	top:-270px;
	left:415px;
	animation-delay:2s;
	animation-name:pal2;
	animation-duration:30s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}
.palitem3 {
	top:-180px;
	left:345px;
	animation-delay:3s;
	animation-name:pal3;
	animation-duration:12s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in-out;
}
.palitem4 {
	top:-150px;
	left:275px;
	animation-delay:0s;
	animation-name:pal4;
	animation-duration:12s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}
.palitem5 {
	top:-380px;
	left:205px;
	animation-delay:3s;
	animation-name:pal5;
	animation-duration:20s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in-out;
}
.palitem6 {
	top:-340px;
	left:135px;
	animation-delay:5s;
	animation-name:pal6;
	animation-duration:30s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease;
}
.palitem7 {
	top:-140px;
	left:65px;
	animation-delay:3s;
	animation-name:pal7;
	animation-duration:20s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in;
}
.palitem8 {
	top:-260px;
	left:-5px;
	animation-delay:1s;
	animation-name:pal8;
	animation-duration:10s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease;
}

.pallets {
	position:absolute;
	right:90px;
	top:-8px;
	width:70px;
	animation-name:palls;
	animation-duration:6s;
	animation-direction:normal;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:linear;
}
.pallets img { width:100%; }
.pall0 {
	animation-delay:1s;
}
.pall1 {
	animation-delay:3s;
}
.pall2 {
	animation-delay:5s;
}

/* BOX5 */
.pcitem {
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:380px;
}
.fascet {
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	margin-top: -100px;
	animation-name:fasc;
	animation-duration:6s;
	animation-direction:normal;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-out;
}
.fasc1 {
	width:5px;
	top:50%;
	animation-delay:1s;
}
.fasc2 {
	width:5px;
	top:50%;
	animation-delay:3s;
}
.fasc3 {
	width:5px;
	top:50%;
	animation-delay:5s;
}

#sidebox4 {
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:-130px;
	width:4px;
	height:160px;
	z-index:0;
	background:var(--lggray);
}


/* BOX6 */
.printers {
	position:absolute;
	left:50%;
	transform: translateX(-50%);
}
.print1 {
	top:-20px;
	width:80px;
	opacity:0;
	margin-left:-50px;
	animation-delay:0;
	animation-name:print1;
	animation-duration:4s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in-out;
}
.print2 {
	top:-20px;
	margin-left:-50px;
	width:80px;
	opacity:1;
	animation-delay:0;
	animation-name:print2;
	animation-duration:4s;
	animation-direction:alternate;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in-out;
}
.print3 {
	bottom:0;
	width:200px;
}

#sidebox5 {
	position: absolute;
	left: calc(-50% + -72px);
	top: 75%;
	width: 624px;
	height: 500px;
	border-left: 4px solid var(--accent);
	border-right: 4px solid var(--accent);
	border-bottom: 4px solid var(--accent);
	border-radius: 11px;
	z-index: 0;
}

.ballcolored0 {
	top:200px;
	left:-9px;
	background:var(--accent);
	animation:ballc0 infinite 3s linear;
}
.ballcolored1 {
	left:200px;
	top:-9px;
	border-color:#5a5a5a;
	background:#5a5a5a;
	animation:ballc0 infinite 3s linear;
	animation-delay:1.5s;
}
.ballcolored2 {
	left:200px;
	top:-9px;
	border-color:var(--lggray);
	background:var(--lggray);
	animation:ballc0 infinite 3s linear;
	animation-delay:3.7s;
}
#sidebox6 {
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:-162px;
	width:4px;
	height:160px;
	z-index:0;
	background:var(--accent);
}


/* BOX7 */
#box7 {
	margin:30px 0;
}

.tobepressed {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-7px;
	margin-top:-35px;
	width:14px;
	transform:scale(0);
	opacity:0;
	animation-duration:1s;
	animation-direction:normal;
  	animation-iteration-count:1;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in;
}
.tobepressed.persist {
	opacity:1;
	transform:scale(1);
}
.tobepressed .balls {
	position:relative;
}
.showtbp {
	animation-name:showtbp;
}
.tbp1 {
	border-color:var(--accent);
	background:var(--accent);
}
.tbp2 {
	border-color:#5a5a5a;
	background:#5a5a5a;
}
.tbp3 {
	border-color:var(--lggray);
	background:var(--lggray);
}

.presses {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	height:180px;
	animation-duration:1s;
	animation-direction:normal;
  	animation-iteration-count:1;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in;
  	z-index:3;
}

.press1 {
	left:-279px;
}
.press2 {
	right:-278px;
}

.pressit1 {
	left:-179px;
	animation-name:pressfasc1;
}
.pressit2 {
	right:-177px;
	animation-name:pressfasc2;
}

.produced {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 140px;
	margin-top: 2px;
	margin-left: 3px;
	display:none;
}
.produced svg {
	width:100%;
	height:100%;
}
.produced.appeard {
	display:block;
	animation-name:produced;
	animation-delay:0.5s;
	animation-duration:1.5s;
	animation-direction:normal;
  	animation-iteration-count:1;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in;
}

.produced .fascprod2.col1 {
	fill:var(--accent);
}
.produced .fascprod2.col2 {
	fill:#5a5a5a;
}
.produced .fascprod2.col3 {
	fill:var(--lggray);
}

.bars {
	width:2px;
	background:var(--accent);
	height:30px;
	position:absolute;
	top:0;
	left:-6px;
	animation-name:bars;
	animation-duration:2s;
	animation-direction:normal;
	animation-iteration-count:infinite;
	animation-fill-mode:forwards;
	animation-play-state:running;
	animation-timing-function:ease-in;
	animation-delay:-2s;
}
.bar2, .bar4 {
	left:8px;
}
.bar1 {
	animation-delay:1.7s;
}
.bar2 {
	animation-delay:2.2s;
}
.bar3 {
	animation-delay:2.7s;
}
.bar4 {
	animation-delay:3.2s;
}


@keyframes showtbp {
	0% {
	    transform:scale(0);
	    opacity:0;
	}
	30% {
		transform:scale(1.0);
		opacity:1;
	}
	99.8% {
		transform:scale(1.0);
		opacity:1;
	}
	100% {
		transform:scale(1.0);
		opacity:0;
	}
}
@keyframes pressfasc1 {
	0% {
	    left:-279px;
	}
	20% {
		left:-179px;
	}
	50% {
    	left:-179px;
	}
	100% {
		left:-279px;
	}
}
@keyframes pressfasc2 {
	0% {
	    right:-278px;
	}
	10% {
		right:-177px;
	}
	50% {
    	right:-177px;
	}
	100% {
		right:-278px;
	}
}
@keyframes produced {
	0% {
	    margin-top:2px;
	}
	50% {
	    margin-top:2px;
	}
	100% {
		margin-top:300px;
	}
}
@keyframes bars {
	0% {
	    transform: translateY(0px);
	}
	100% {
    	transform: translateY(160px);
	}
}

/* BOX8 */
.box-values {
	display:grid;
	grid-template-columns:25% 25% 50%;
	position:absolute;
	width:calc(100% - 60px);
	top:30px;
	left:30px;
	color:var(--accent);
}
.box-values span, .box-values span small {
	font-size:20px;
}
.box-values span:last-child {
	font-size:30px;
	line-height:0.7;
	margin-top:6px;
}
.prods {
	position:absolute;
	bottom:0;
	left:50%;
	-webkit-transform:translateX(-50%);
  	-moz-transform:translateX(-50%);
	transform:translateX(-50%);
	animation-delay:0;
	animation-name:prodline;
	animation-duration:12s;
	animation-direction:normal;
  	animation-iteration-count:infinite;
  	animation-fill-mode:forwards;
  	animation-play-state: running; 
  	animation-timing-function:ease-in-out;
}
.prod1 {
	margin-left:210px;
	width:34px !important;
	height:150px !important;
}
.prod2 {
	margin-left:70px;
	width:50px !important;
	height:150px !important;
}
.prod3 {
	margin-left:-70px;
	width:44px !important;
	height:80px !important;
}
.prod4 {
	width:43px !important;
	margin-left: -210px;
	height:120px !important;
}
.prod5 {
	margin-left:-350px;
	width:29px !important;
	height:130px !important;
}
.prod6 {
	width:47px !important;
	margin-left:-490px;
	height:120px !important;
}
.prod7 {
	margin-left:-630px;
	width:34px !important;
	height:150px !important;
}
.prod8 {
	margin-left:-770px;
	width:50px !important;
	height:150px !important;
}
.prod9 {
	margin-left:-910px;
	width:44px !important;
	height:80px !important;
}
.prod10 {
	margin-left:-1050px;
	width:43px !important;
	height:120px !important;
}
.prod11 {
	width:29px !important;
	margin-left:-1190px;
	height:130px !important;
}
.prod12 {
	margin-left:-1330px;
	width:47px !important;
	height:120px !important;
}

.packages {
	width:42px;
	position:absolute;
	top:-20px;
	left:-48px;
	animation-name:packs;
	animation-duration:2s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function: ease-in;
	animation-delay:-2s;
}
.packages img {
	width:100%;
}
.pack1 {
	left:9px;
	animation-delay:2.7s;
}
.pack2 {
	animation-delay:3.7s;
}
.pack3 {
	left:9px;
	animation-delay:-1s;
}


/* BOX9 */
#box9 .box-flow {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(42px, 1fr));
	grid-gap:2px;
	align-items:end;
	align-content:end; 
	padding:0 2px;
}
#box9 .box-flow > div {
	display: flex;
	flex-direction: column;
	gap: 3px;
	position: relative;
	animation-duration:1s;
	animation-direction:normal;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	animation-play-state:running;
	animation-timing-function:ease-out;
}
.movepacks {
	animation-name:movepacks;
}
.packs {
	width:100%;
	transition:all 1s ease-out;
	height:25px;
}
.packs.fp {
	height:auto;
}
.hidpack {
	display: none;
}

.fitem {
	position:relative;
	transform:translateY(-270px);
	animation-duration:1s;
	animation-direction:normal;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:ease-in;
}
.fitem1.dropPack {
	animation-name:fall1;
}
.fitem2.dropPack {
	animation-name:fall2;
}
.fitem3.dropPack {
	animation-name:fall3;
}

.hp1, .fp, .mp {
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	opacity:1;
}
.fp {
	animation-duration:1s;
	animation-direction:normal;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:ease-in;
}
.fpanim {
	animation-name:fp;
}
.fp2 {
	animation-delay:1s;
}
.fp3 {
	animation-delay:2s;
}
.slidethem {
 	margin-bottom:-85px;
}
.shadowpacks {
	position: absolute;
	bottom:-3px;
	left: 0;
	display:none;
}
.shadowpacks.positioned {
	bottom:82px;
	display:block;
}
.shadowpacks.positioned .packs {
	margin-bottom:3px;
}


@keyframes movepacks {
	0% {
	    margin-bottom:0;
	}
	100% {
    	margin-bottom:-85px;
	}
}
@keyframes fall1 {
	0% {
	    transform:translateY(-270px);
	}
	88% {
		transform:translateY(0px);
	}
	96% {
		transform:translateY(-1px);
	}
	100% {
    	transform:translateY(0px);
	}
}
@keyframes fall2 {
	0% {
	    transform:translateY(-270px);
	}
	88% {
		transform:translateY(-25px);
	}
	96% {
		transform:translateY(-26px);
	}
	100% {
    	transform:translateY(-25px);
	}
}
@keyframes fall3 {
	0% {
	    transform:translateY(-270px);
	}
	88% {
		transform:translateY(-50px);
	}
	96% {
		transform:translateY(-51px);
	}
	100% {
    	transform:translateY(-50px);
	}
}
@keyframes fp {
	0% {
	    opacity:0;
	}
	10% {
		opacity:0;
	}
	88% {
    	opacity:1;
	}
	89% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}


/* BOX10 */
.mcol {
	position:absolute;
	display:flex;
	flex-direction:column;
	left:50%;
	transform:translateX(-50%);
	top:-2px;
	height:302px;
	width:42px;
	gap:1px;
}
.mitem {
	position:relative;
	animation-duration:1s;
	animation-direction:normal;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:ease-in;
}
.dropMuleBox1 {
	animation-name:fall4;
}
.dropMuleBox2 {
	animation-name:fall5;
}
.dropMuleBox3 {
	animation-name:fall6;
}
.mp {
	animation-duration:1s;
	animation-direction:normal;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:ease-in;
	height:auto;
}
.mpgo {
	animation-name:fp;
}
.mp2 {
	animation-delay:1s;
}
.mp3 {
	animation-delay:2s;
}

.mules {
	position:absolute;
	left:-66px;
	bottom:0;
	width:150px;
	animation-duration:5s;
	animation-direction:normal;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:cubic-bezier(.37,.37,.08,1);
}
.mules img {
	width:100%;
}
.moveMule {
	animation-name:mules;
}
.muleaway .stripes {
	position: absolute;
	height:2px;
	background: linear-gradient(90deg, rgba(65,146,100,0) 0%, rgba(65,146,100,1) 100%);
	opacity:0;
	animation-duration:2s;
	animation-delay:300;
	animation-direction:normal;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:ease-in;
}
.stripe1 {
	bottom: 0;
	left: -65px;
	width: 70px;
}
.stripe2 {
	bottom: 65px;
	left: -35px;
	width: 35px;
}
.stripe3 {
	bottom: 105px;
	left: -110px;
	width: 135px;
}
.mulestripes {
	animation-name:stripes;
}
.mulebefore {
	margin-left:-305px;
	position:absolute;
	animation-duration:1s;
	animation-direction:normal;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:cubic-bezier(.37,.37,.08,1);
}
.mulebappear {
	animation-name:mulebefore;
}

.muleaway {
	position:absolute;
	left:149px;
	bottom:0;
	width:150px;
	animation-duration:1.5s;
	animation-direction:normal;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:ease-in;
	display: none;
}
.packeds {
	width: 42px;
	display: flex;
	flex-direction: column;
	grid-gap: 1px;
	position: absolute;
	right: 3px;
	bottom: 23px;
}
.muleaway .mule2 {
	position:absolute;
	left:0;
	bottom:0;
	width:150px;
}
.mulestatic {
	position:absolute;
	left:-66px;
	display:none;
}

.getOut {
	animation-name:getout;
}

#sidebox10 {
	border-top:4px solid var(--accent);
	border-right:4px solid var(--accent);
	border-bottom:4px solid var(--accent);
}
.packround {
	position: absolute;
	right:90px;
	top:-14px;
	width:42px;
	animation-name: packround;
	animation-duration: 6s;
	animation-direction: normal;
	animation-iteration-count:infinite;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function: linear;
}
.packround img { width:100%; }
.pk1 {
	animation-delay:1s;
}
.pk2 {
	animation-delay:3s;
}
.pk3 {
	animation-delay:5s;
}
@keyframes mules {
	0% {
	    left:-66px;
	}
	25% {
	    left:149px;
	}
	50% {
    	left:149px;
	}
	75% {
	    left:149px;
	}
	100% {
    	left:149px;
	}
}
@keyframes getout {
	0% {
	    left:149px;
	}
	100% {
    	left:620px;
	}
}
@keyframes fall4 {
	0% {
	    transform:translateY(0px);
	}
	88% {
		transform:translateY(302px);
	}
	96% {
		transform:translateY(301px);
	}
	100% {
    	transform:translateY(302px);
	}
}
@keyframes fall5 {
	0% {
	    transform:translateY(0px);
	}
	88% {
		transform:translateY(277px);
	}
	96% {
		transform:translateY(276px);
	}
	100% {
    	transform:translateY(277px);
	}
}
@keyframes fall6 {
	0% {
	    transform:translateY(0px);
	}
	88% {
		transform:translateY(252px);
	}
	96% {
		transform:translateY(251px);
	}
	100% {
    	transform:translateY(252px);
	}
}
@keyframes fp {
	0% {
	    opacity:0;
	}
	10% {
		opacity:0;
	}
	88% {
    	opacity:1;
	}
	89% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}
@keyframes stripes {
	0% {
	    opacity:0;
	}
	94% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@keyframes mulebefore {
	0% {
	    margin-left:-305px;
	}
	100% {
		margin-left:-215px;
	}
}


/* BOX11 */
.world {
	width: 100%;
	margin-top:15px;
}
.world-info {
	position:absolute;
	left:20px;
	bottom:30px;
	color:var(--accent);
}
.world-info span {
	margin-bottom:15px;
	display:inline-block;
	width:100%;
	font-size:19px;
	line-height:1.2;
}
.world-info strong {
	font-size:35px;
	font-weight:700;
	line-height:1;
	display:inline-block;
	width:100%;
}

.lines {
	position: absolute;
	top: 117px;
	left: 279px;
	height: 2px;
	width: 200px;
	background: var(--accent);
}
.lines {
	position: absolute;
	height:1px;
	width:0;
	background: var(--accent);
	transform-origin: top left;
	animation-duration:9s;
	animation-direction: normal;
	animation-iteration-count:infinite;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:ease-in;
}
.line1 {
	transform: rotate(12deg);
	animation-name:line1;
	top: 119px;
	left: 280px;
}
.line2 {
	transform: rotate(36deg);
	animation-name: line2;
	top: 120px;
	left: 280px;
}
.line3 {
	transform: rotate(50deg);
	animation-name:line3;
	top:121px;
	left:279px;
}
.line4 {
	transform: rotate(147deg);
	animation-name:line4;
	top:121px;
	left:275px;
}
.line5 {
	transform: rotate(168deg);
	animation-name:line5;
	top:120px;
	left:275px;
}
.line6 {
	transform: rotate(175deg);
	animation-name:line6;
	top:119px;
	left:275px;
}
.line7 {
	transform: rotate(188deg);
	animation-name:line7;
	top:119px;
	left:275px;
}
.line8 {
	transform: rotate(215deg);
	animation-name:line8;
	top:118px;
	left:275px;
}
.line9 {
	transform: rotate(224deg);
	animation-name:line9;
	top:118px;
	left:275px;
}
.line10 {
	transform: rotate(270deg);
	animation-name:line10;
	top:117px;
	left:276px;
}
.line11 {
	transform: rotate(294deg);
	animation-name:line11;
	top:117px;
	left:278px;
}
.line12 {
	transform: rotate(340deg);
	animation-name:line12;
	top:117px;
	left:279px;
}
.line13 {
	transform: rotate(350deg);
	animation-name:line13;
	top:118px;
	left:279px;
}

.dots {
	position:absolute;
	top:50%;
	right:-6px;
	transform:translate(-50%, -50%);
	background:var(--accent);
	width:6px;
	height:6px;
	border-radius:50%;
	opacity:0;
	animation-name:dots;
	animation-duration:9s;
	animation-direction: normal;
	animation-iteration-count:infinite;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function:ease-in;
}

@keyframes line1 {
	0% {
		width:0;
	}
	33.333% {
		width:135px;
	}
	100% {
		width:135px;
	}
}
@keyframes line2 {
	0% {
		width:0;
	}
	33.333% {
		width:202px;
	}
	100% {
		width:202px;
	}
}
@keyframes line3 {
	0% {
		width:0;
	}
	33.333% {
		width:64px;
	}
	100% {
		width:64px;
	}
}
@keyframes line4 {
	0% {
		width:0;
	}
	33.333% {
		width:35px;
	}
	100% {
		width:35px;
	}
}
@keyframes line5 {
	0% {
		width:0;
	}
	33.333% {
		width:180px;
	}
	100% {
		width:180px;
	}
}
@keyframes line6 {
	0% {
		width:0;
	}
	33.333% {
		width:160px;
	}
	100% {
		width:160px;
	}
}
@keyframes line7 {
	0% {
		width:0;
	}
	33.333% {
		width:125px;
	}
	100% {
		width:125px;
	}
}
@keyframes line8 {
	0% {
		width:0;
	}
	33.333% {
		width:135px;
	}
	100% {
		width:135px;
	}
}
@keyframes line9 {
	0% {
		width:0;
	}
	33.333% {
		width:35px;
	}
	100% {
		width:35px;
	}
}
@keyframes line10 {
	0% {
		width:0;
	}
	33.333% {
		width:36px;
	}
	100% {
		width:36px;
	}
}
@keyframes line11 {
	0% {
		width:0;
	}
	33.333% {
		width:55px;
	}
	100% {
		width:55px;
	}
}
@keyframes line12 {
	0% {
		width:0;
	}
	33.333% {
		width:135px;
	}
	100% {
		width:135px;
	}
}
@keyframes line13 {
	0% {
		width:0;
	}
	33.333% {
		width:170px;
	}
	100% {
		width:170px;
	}
}
@keyframes dots {
	0% {
		opacity:0;
	}
	33% {
		opacity:0;
	}
	33.333% {
		opacity:1;
	}
	100% {
		opacity:1;
	}
}



/******************* ANIMATIONS *****************/


/* BOX4 */
@keyframes pal1 {
	0% {
		top: -100px;
	}
	20% {
		top: -100px;
	}
	80% {
		top:-340px;
	}
	100% {
		top:-340px;
	}
}
@keyframes pal2 {
	0% {
		top: -270px;
	}
	100% {
		top:-100px;
	}
}
@keyframes pal3 {
	0% {
		top:-180px;
	}
	20% {
		top:-180px;
	}
	40% {
		top:-280px;
	}
	60% {
		top:-280px;
	}
	80% {
		top:-380px;
	}
	100% {
		top:-380px;
	}
}
@keyframes pal4 {
	0% {
		top: -150px;
	}
	100% {
		top:-300px;
	}
}
@keyframes pal5 {
	0% {
		top:-380px;
	}
	10% {
		top:-380px;
	}
	20% {
		top:-345px;
	}
	30% {
		top:-345px;
	}
	40% {
		top:-345px;
	}
	50% {
		top:-240px;
	}
	60% {
		top:-240px;
	}
	70% {
		top:-110px;
	}
	80% {
		top:-110px;
	}
	90% {
		top:-190px;
	}
	95% {
		top:-190px;
	}
	100% {
		top:-190px;
	}
}
@keyframes pal6 {
	0% {
		top: -340px;
	}
	100% {
		top:-105px;
	}
}
@keyframes pal7 {
	0% {
		top: -140px;
	}
	100% {
		top:-340px;
	}
}
@keyframes pal8 {
	0% {
		top: -260px;
	}
	50% {
		top: -340px;
	}
	100% {
		top:-130px;
	}
}
@keyframes palls {
	0% {
		right:90px;
		top:-8px;
	}
	15% {
		right:-37px;
		top:-8px;
	}
	85% {
		right:-37px;
		top:488px;
	}
	100% {
		right:90px;
		top:488px;
	}
}
@keyframes fasc {
	0% {
	    width:5px;
		margin-top: -100px;
	}
	12.5% {
		width:220px;
		margin-top: -100px;
	}
	25% {
		width:220px;
		margin-top: -100px;
	}
	37.5% {
    	width:220px;
		margin-top: -100px;
	}
	45% {
    	width:300px;
		margin-top:-20px;
	}
	62.5% {
    	width:300px;
		margin-top:-20px;
	}
	70%  {
		width:300px;
		margin-top:-20px;
		opacity:1;
	}
	72% {
    	width:150px;
		margin-top:0px;
		opacity:0.5;
	}
	100%  {
		width:50px;
		margin-top:65px;
		opacity:0;
	}
}

/* BOX6 */

@keyframes print1 {
	0% {
	    top:-20px;
	    margin-left:-50px;
	    opacity:0;
	}
	20% {
		top:0;
		margin-left:-50px;
		opacity:0;
	}
	40% {
		top:0;
		margin-left:-50px;
		opacity:1;
	}
	60% {
		top:0;
    	margin-left:54px;
    	opacity:1;
	}
	80% {
		top:0;
    	margin-left:54px;
    	opacity:0;
	}
	100% {
    	top: -20px;
    	margin-left:54px;
    	opacity:0;
	}
}
@keyframes print2 {
	0% {
	    top:-20px;
	    margin-left:-50px;
	    opacity:1;
	}
	20% {
		top:0;
		opacity:1;
		margin-left:-50px;
	}
	40% {
		top:0;
		margin-left:-50px;
		opacity:0;
	}
	60% {
		top:0;
    	margin-left:54px;
    	opacity:0;
	}
	80% {
		top:0;
    	margin-left:54px;
    	opacity:1;
	}
	100% {
    	top: -20px;
    	margin-left:54px;
    	opacity:1;
	}
}

/* BOX7 */
@keyframes ballc0 {
	0% {
		top:200px;
		left:-9px;
	}
	40% {
		top:491px;
		left:-9px;
	}
	80% {
		top:491px;
		left:301px;
	}
	100% {
		top:600px;
		left:301px;
	}
}


/* BOX8 */
@keyframes prodline {
	0% {
	    transform:translateX(calc(-50%));
	}
	8.333% {
		transform:translateX(calc(-50% + 140px));
	}
	16.666% {
		transform:translateX(calc(-50% + 140px));
	}
	25% {
    	transform:translateX(calc(-50% + 280px));
	}
	33.333% {
    	transform:translateX(calc(-50% + 280px));
	}
	41.666% {
    	transform:translateX(calc(-50% + 420px));
	}
	50% {
    	transform:translateX(calc(-50% + 420px));
	}
	58.333% {
    	transform:translateX(calc(-50% + 560px));
	}
	66.666%  {
		transform:translateX(calc(-50% + 560px));
	}
	75% {
    	transform:translateX(calc(-50% + 700px));
	}
	83.333% {
    	transform:translateX(calc(-50% + 700px));
	}
	91.666% {
    	transform:translateX(calc(-50% + 840px));
	}
	100%  {
		transform:translateX(calc(-50% + 840px));
	}
}
@keyframes packs {
	0% {
	    transform: translateY(0px);
	}
	100% {
    	transform: translateY(160px);
	}
}

/* box10 */
@keyframes packround {
	0% {
		right:90px;
		top:-14px;
	}
	15% {
		right:-23px;
		top:-14px;
	}
	85% {
		right:-23px;
		top:482px;
	}
	100% {
		right:90px;
		top:482px;
	}
}


/*

.print2 {
	top:-20px;
	margin-left:-50px;
	width:80px;

*/
@media (max-width:1576px) {
	#box1 {
		margin-top:20px !important;
	}
	.chain-wrapper {
		margin-bottom:-5vw;
	}
}

@media (max-width:1439px) {
	.chain-wrapper {
		transform:scale(0.9) translateY(-5%);
		width:100%;
		padding:0;
		margin-bottom:-30vw;
	}
	.boxes {
		margin:50px 0;
	}
}
@media (max-width:1280px) {
	.chain-wrapper {
		transform:scale(0.8) translateY(-12%);
		margin-bottom:-70vw;
	}
}
@media (max-width:1199px) {
	.chain-wrapper {
		display:none;
	}
	#mobile-chain-wrapper { display:block; }
}