@charset "UTF-8";
/* CSS Document */

/* Section start */
section#start .trnslt-item-2 {color: red; font-weight: bolder}

section#start .slide-headline .claim {
		font-size: 0.7em;
	margin-left: 0em;
	}
/* Section Front View */
section#start .block, section#start .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#start .block {
	bottom: 5%;
	background-image: none
}
section#start .bg-item {
	left: 0%;
	right: 50%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#start .slide-copy {
	width: 68%
}



section#start.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/intro.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	height: auto;
	width: auto;
	background-position: center right
}

/* This is in v2 and makes the bg image smaller. remove fit for max size bg image*/
@media screen and (min-height: 800px) {
	section#start.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#start .block {
		left: 28%
	}
	section#start .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#start .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section#start .block {
		top: auto;
		left: 0;
		bottom: 0;
		padding-bottom: 5%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
  section#start .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 10px;
  }
	section#start .slide-copy {
		width: auto
	}
	section#start.on .bg-item {
		margin-left: -50%;
		width: 100%
	}
}

.nojs section#start .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/intro.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0)
}



/* Section Front View */
section#design .block, section#design .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#design .block {
	bottom: 5%;
	background-image: none
}
section#design .bg-item {
	left: 0%;
	right: 50%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#design .slide-copy {
	width: 68%
}
section#design.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/design.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	height: auto;
	width: auto;
	background-position: center right
}

/* This is in v2 and makes the bg image smaller. remove fit for max size bg image*/
@media screen and (min-height: 800px) {
	section#design.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#design .block {
		left: 28%
	}
	section#design .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#design .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section#design .block {
		top: auto;
		left: 0;
		bottom: 0;
		padding-bottom: 5%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
  section#design .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 10px;
  }
	section#design .slide-copy {
		width: auto
	}
	section#design.on .bg-item {
		margin-left: -50%;
		width: 100%
	}
}

.nojs section#design .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/design.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0)
}


/* Section Front View */
section#capacity .block, section#capacity .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#capacity .block {
	bottom: 5%;
	background-image: none
}
section#capacity .bg-item {
	left: 0%;
	right: 50%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#capacity .slide-copy {
	width: 68%
}
section#capacity.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/screen-battery.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	height: auto;
	/*width: auto; Removed as Causing bug because battery icon not centered */
	background-position: center right
}

/* This is in v2 and makes the bg image smaller. remove fit for max size bg image*/
@media screen and (min-height: 800px) {
	section#capacity.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#capacity .block {
		left: 28%
	}
	section#capacity .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#capacity .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section#capacity .block {
		top: auto;
		left: 0;
		bottom: 0;
		padding-bottom: 5%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
  section#capacity .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 10px;
  }
	section#capacity .slide-copy {
		width: auto
	}
	section#capacity.on .bg-item {
		margin-left: -50%;
		width: 100%
	}
}

.nojs section#capacity .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/screen-battery.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0)
}
  section#capacity.on .xxx {
 position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
	
	
}
@keyframes load {
  0% {
    top: 4.5rem;
  }
  70% {
    top: 1.125rem;
  }
  90% {
    top: 0;
  }
  95% {
    top: 0;
  }
  100% {
    top: 4.5rem;
  }
}
@keyframes liquid-1 {
  0% {
    height: 0;
    opacity: 0;
    top: -0.5rem;
  }
  22% {
    height: 0.28125rem;
    top: 0.375rem;
    opacity: 1;
  }
  25% {
    top: -0.25rem;
  }
  35% {
    height: 1.125rem;
    top: -0.5rem;
  }
  55% {
    height: 0.28125rem;
    top: -0.125rem;
  }
  60% {
    height: 0.61875rem;
    opacity: 1;
    top: -0.275rem;
  }
  96% {
    height: 0.84375rem;
    opacity: 0;
    top: 0.5rem;
  }
  100% {
    height: 0;
    opacity: 0;
  }
}
@keyframes liquid-2 {
  0% {
    height: 0;
    opacity: 0;
    top: -0.5rem;
  }
  17.5% {
    height: 0.28125rem;
    top: 0.2rem;
    opacity: 1;
  }
  20% {
    top: -0.25rem;
  }
  25% {
    height: 1.40625rem;
    top: -0.625rem;
  }
  45% {
    height: 0.28125rem;
    top: -0.125rem;
  }
  60% {
    height: 1.40625rem;
    opacity: 1;
    top: -0.5rem;
  }
  96% {
    height: 0.84375rem;
    opacity: 0;
    top: 0.5rem;
  }
  100% {
    height: 0;
    opacity: 0;
  }
}
.battery {
  display: inline-block;
  position: relative;
  width: 4.25rem;
  height: 8.5rem;
  box-shadow: 0 0 0 0.2rem #b0bdca;
  background: none;
  border-radius: 0.09rem;
}
  section#capacity.on .battery:before {
  content: '';
  position: absolute;
  left: 1.5625rem;
  right: 1.5625rem;
  top: -0.3375rem;
  height: 0.3375rem;
  width: 1.125rem;
  background: #b0bdca;
  border-radius: 0.18rem;
}
  section#capacity.on .battery:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* border-left: 4.3rem solid transparent; */
  /* border-bottom: 8.05rem solid rgba(255, 255, 255, 0.325); */
}

  section#capacity.on .liquid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 4.25rem;
  background: #71FB85;
  animation: load 2.25s infinite;
	-webkit-animation: load 2.25s infinite;
	
}
  section#capacity.on .liquid:after,section#capacity.on .liquid:before {
  content: '';
  position: absolute;
  top: -0.5rem;
  height: 4.125rem;
  width: 2.4625rem;
  background: #71FB85;
  border-radius: 50%;
  opacity: 0;
}
  section#capacity.on .liquid:after {
  right: 0;
  animation: liquid-1 2.25s infinite;
 	-webkit-animation:  liquid-1 2.25s infinite;
}
  section#capacity.on .liquid:before {
  left: 0;
  animation: liquid-2 2.25s infinite;
	-webkit-animation: liquid-2 2.25s infinite;
}



@keyframes power {
  0% {
    color: #bcbcbc;
  }
  75% {
    color: #bcbcbc;
    text-shadow: none;
  }
  90% {
    color: #58fa70;
    text-shadow: 0 0 0.8em #71FB85;
  }
  100% {
    color: #bcbcbc;
    text-shadow: none;
  }
}
  section#capacity.on h6 {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.83em;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: #bcbcbc;
  animation: power 2.25s infinite;
	-webkit-animation: power 2.25s infinite;
}



/* Section NeoWave */
section#ports .block, section#ports .bg-item {
	position: absolute
}
section#ports .block, section#ports .bg-item {
	top: 50%;
	left: 50%;
	margin-top: -180px;
	width: 48%
}
section#ports .block {
	margin-left: 20px
}
section#ports .slide-copy {
	width: 80%;
	max-width: 520px
}
section#ports .slide-copy a {
	display: block
}
section#ports .bg-item {
	left: 50%;
	margin-top: -310px;
	margin-left: -590px
}
section#ports .ringtone {
	display: inline-block
}

section#ports.on .lightning-cable {
	position: absolute;
    top: 436px;
	
	background: transparent url("../images/s10-matrix-battery-case/usb-c-cable.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 574px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	overflow: visible;
}

section#ports.on .audio-cable {
	position: absolute;
    top: 375px;
	/*background: transparent url("../images/audio-case/audio-cable.png") no-repeat center center; */
	background: transparent no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 574px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	overflow: visible;
}


section#ports.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/neowave.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 574px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	overflow: visible;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
	section#ports .ringtone {
		width: 40%
	}
}
@media screen and (max-width: 800px) {
	section#ports.on .bg-item {
		left: 34%;
		top: 50%;
		margin-left: -55%;
		margin-top: -31%
	}
}
@media screen and (max-width: 640px) {
	section#ports .blocks {
		position: absolute;
		bottom: 0;
		height: 40%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
	section#ports .block {
		top: auto;
		left: 0;
		bottom: 0;
		margin-top: 0;
		margin-left: 0;
		padding-bottom: 5%;
		width: 100%
	}
	section#ports .slide-copy {
		width: auto
	}
	section#ports .slide-headline {
		margin-right: 0
	}
	section#ports .ringtone {
		display: inline-block;
		margin-right: 0;
		padding-left: 3.75em;
		width: 49%
	}
	section#ports .ringtone .name {
		letter-spacing: 0.0625em
	}
	section#ports.on .bg-item {
		top: -50px;
		position: absolute;
		margin: 0;
		margin-left: 0;
		width: 100%;
		    left: 0%;
	}
	
		section#ports.on .lightning-cable {
		top: 300px;
		position: absolute;
		margin: 0;
		margin-left: 0;
		width: 100%;
		    left: 0%;
	}
			section#ports.on .audio-cable {
		top: 260px;
		position: absolute;
		margin: 0;
		margin-left: 0;
		width: 100%;
		    left: 0%;
	}
}

/* Cable Animations*/
.lightning-cable {
	z-index: 0;
	opacity: 0;
	-webkit-transition: opacity 200ms ease-in 200ms;
	-moz-transition: opacity 200ms ease-in 200ms;
	transition: opacity 200ms ease-in 200ms
}
.second-stage .lightning-cable {
	opacity: 1
}
.audio-cable {
	opacity: 1
}
.second-stage .audio-cable {
	z-index: 0;
	opacity: 0;
	-webkit-transition: opacity 200ms ease-in 200ms;
	-moz-transition: opacity 200ms ease-in 200ms;
	transition: opacity 200ms ease-in 200ms
}

.js section#ports .block {
	background: url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
}
.js section#ports .block .slide-headline {
	-webkit-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-moz-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-webkit-transform: translate3d(0, 300px, 0);
	-moz-transform: translate(0, 300px);
	-ms-transform: translate(0, 300px);
	-o-transform: translate(0, 300px);
	transform: translate(0, 300px);
	opacity: 0;
	filter: alpha(opacity=0);
	position: relative
}
.js section#ports .block .slide-copy {
	-webkit-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-moz-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-webkit-transform: translate3d(0, 340px, 0);
	-moz-transform: translate(0, 340px);
	-ms-transform: translate(0, 340px);
	-o-transform: translate(0, 340px);
	transform: translate(0, 340px);
	opacity: 0;
	filter: alpha(opacity=0);
	position: relative
}
.js section#ports .block.show {
	z-index: 2
}
.js section#ports .block.show .slide-headline {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	opacity: 1;
	filter: alpha(opacity=100)
}
.js section#ports .block.show .slide-copy {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	opacity: 1;
	filter: alpha(opacity=100)
}
.js section#ports .block.hide .slide-headline {
	-webkit-transform: translate3d(0, -340px, 0);
	-moz-transform: translate(0, -340px);
	-ms-transform: translate(0, -340px);
	-o-transform: translate(0, -340px);
	transform: translate(0, -340px);
	opacity: 0;
	-ms-filter: alpha(opacity=0)
}
.js section#ports .block.hide .slide-copy {
	-webkit-transform: translate3d(0, -300px, 0);
	-moz-transform: translate(0, -300px);
	-ms-transform: translate(0, -300px);
	-o-transform: translate(0, -300px);
	transform: translate(0, -300px);
	opacity: 0;
	filter: alpha(opacity=0)
}
.js section#ports.active .Lcircle1, .js section#ports.active .Rcircle1 {
	-webkit-animation: slowzoom1 2s linear infinite;
	-moz-animation: slowzoom1 2s linear infinite;
	animation: slowzoom1 2s linear infinite;
	border: 1px solid #bbb;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50px;
	margin-left: 20px;
	left: 50%;
	-moz-border-top-left-radius: 250px;
	-moz-border-top-right-radius: 250px;
	-moz-border-bottom-left-radius: 250px;
	-moz-border-bottom-right-radius: 250px;
	-webkit-border-top-left-radius: 250px;
	-webkit-border-top-right-radius: 250px;
	-webkit-border-bottom-left-radius: 250px;
	-webkit-border-bottom-right-radius: 250px;
	border-top-left-radius: 250px;
	border-top-right-radius: 250px;
	border-bottom-left-radius: 250px;
	border-bottom-right-radius: 250px
}
.js section#ports.active .Lcircle2, .js section#ports.active .Rcircle2 {
	-webkit-animation: slowzoom2 2s linear infinite;
	-moz-animation: slowzoom2 2s linear infinite;
	animation: slowzoom2 2s linear infinite;
	-moz-border-top-left-radius: 250px;
	-moz-border-top-right-radius: 250px;
	-moz-border-bottom-left-radius: 250px;
	-moz-border-bottom-right-radius: 250px;
	-webkit-border-top-left-radius: 250px;
	-webkit-border-top-right-radius: 250px;
	-webkit-border-bottom-left-radius: 250px;
	-webkit-border-bottom-right-radius: 250px;
	border-top-left-radius: 250px;
	border-top-right-radius: 250px;
	border-bottom-left-radius: 250px;
	border-bottom-right-radius: 250px;
	border: 1px solid #bbb;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	margin-top: -25px;
	margin-left: 0px;
	left: 50%
}
.js section#ports.active .Lcircle3, .js section#ports.active .Rcircle3 {
	-webkit-animation: slowzoom3 2s linear infinite;
	-moz-animation: slowzoom3 2s linear infinite;
	animation: slowzoom3 2s linear infinite;
	-moz-border-top-left-radius: 250px;
	-moz-border-top-right-radius: 250px;
	-moz-border-bottom-left-radius: 250px;
	-moz-border-bottom-right-radius: 250px;
	-webkit-border-top-left-radius: 250px;
	-webkit-border-top-right-radius: 250px;
	-webkit-border-bottom-left-radius: 250px;
	-webkit-border-bottom-right-radius: 250px;
	border-top-left-radius: 250px;
	border-top-right-radius: 250px;
	border-bottom-left-radius: 250px;
	border-bottom-right-radius: 250px;
	border: 1px solid #bbb;
	width: 150px;
	height: 150px;
	position: absolute;
	top: 50px;
	margin-top: -50px;
	margin-left: -25px;
	left: 50%
}
.js section#ports.active .Lcircle4, .js section#ports.active .Rcircle4  {
	-webkit-animation: slowzoom4 2s linear infinite;
	-moz-animation: slowzoom4 2s linear infinite;
	animation: slowzoom4 2s linear infinite;
	-moz-border-top-left-radius: 250px;
	-moz-border-top-right-radius: 250px;
	-moz-border-bottom-left-radius: 250px;
	-moz-border-bottom-right-radius: 250px;
	-webkit-border-top-left-radius: 250px;
	-webkit-border-top-right-radius: 250px;
	-webkit-border-bottom-left-radius: 250px;
	-webkit-border-bottom-right-radius: 250px;
	border-top-left-radius: 250px;
	border-top-right-radius: 250px;
	border-bottom-left-radius: 250px;
	border-bottom-right-radius: 250px;
	border: 1px solid #bbb;
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50px;
	margin-top: -75px;
	margin-left: -50px;
	left: 41%;
	opacity: 0
}
	.js section#ports.active .Lcircle1, .js section#ports.active .Lcircle2, .js section#ports.active .Lcircle3, .js section#ports.active .Lcircle4, .js section#ports.active .Lcircle5 {
		left: 41%;
		top: -43px
	}

	.js section#ports.active .Rcircle1, .js section#ports.active .Rcircle2, .js section#ports.active .Rcircle3, .js section#ports.active .Rcircle4, .js section#ports.active .Rcircle5 {
		left: 18%;
		top: -80px
	}

@media screen and (max-width: 640px) {
	.js section#ports.active .Lcircle1, .js section#ports.active .Lcircle2, .js section#ports.active .Lcircle3, .js section#ports.active .Lcircle4, .js section#ports.active .Lcircle5 {
		left: 36%;
		top: 47px
	}
		.js section#ports.active .Rcircle1, .js section#ports.active .Rcircle2, .js section#ports.active .Rcircle3, .js section#ports.active .Rcircle4, .js section#ports.active .Rcircle5 {
		left: 16%;
		top: 3px
	}
}
.nojs section#ports .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/neowave.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 574px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	overflow: visible
}
.nojs section#ports .block {
	top: 5%;
	margin-top: 0
}
.nojs section#ports .block2 {
	margin-top: 350px
}




/* Section PERFORMANCE */
section#performance .block, section#performance .bg-item {
	position: absolute;
	top: 50%
}
section#performance .block {
	top: 20%;
	left: 15%;
	width: 60%
}
section#performance .slide-copy {
	width: 60%
}
section#performance .bg-item {
	left: 5%
}
section#performance .center-cta {
	text-align: left
}
section#performance h2 .small {
	display: inline-block
}
section#performance.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/battery-mah.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 373px;
	width: 1263px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	height: 50%;
	width: 90%;
	max-width: 1400px
}
/* counter */
.container__counter {
    position: absolute;
    top: 40%;
    left: 24%;
}
.count {
font-size: 3em;
    letter-spacing: .1em;
    margin: 0 0 .25em;
    font-family: 'NEOElementsX';
}
@media screen and (max-width: 640px) {
	section#performance .block {
		top: auto;
		left: auto;
		bottom: 0;
		padding-bottom: 5%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
	section#performance .block .slide-copy {
		width: 95%
	}
	section#performance .bg-item {
		left: -23%;
		top: 10%
	}
	section#performance.on .bg-item {
		width: 250%
	}
	.container__counter {
    position: absolute;
    top: 40%;
    left: 19%;
}
	
	.count {
font-size: 2.5em;
	}
}
.nojs section#performance .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/battery-mah.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 373px;
	width: 1263px;
	z-index: -1;
	-webkit-transform: translateZ(0)
}





/* Section style Back */
section#style .block, section#style .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#style .block {
	bottom: 5%;
	background-image: none
}
section#style .bg-item {
	left: 2%;
	right: 53%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#style .slide-copy {
	width: 68%
}
section#style.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/upside.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 420px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	height: auto;
	width: auto;
	background-position: center right
}

/* This is in v2 and makes the bg image smaller. remove fit for max size bg image*/
@media screen and (min-height: 800px) {
	section#style.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#style .block {
		left: 28%
	}
	section#style .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#style .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {

	
	section#style .block {
		top: auto;
		left: 0;
		bottom: 0;
		padding-bottom: 5%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
  section#style .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 0;
  }
	section#style .slide-copy {
		width: auto
	}
	section#style.on .bg-item {
		margin-left: -50%;
		width: 100%;
	}
}

.nojs section#style .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/upside.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 420px;
	z-index: -1;
	-webkit-transform: translateZ(0)
}



/* Section Edge Sword */
section#edge .block, section#edge .bg-item {
	position: absolute
}
section#edge .block {
	top: 35%;
	left: 60%;
	margin-left: -13%
}
section#edge .bg-item {
	-webkit-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-moz-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	position: absolute
}
section#edge .bg-item {
	top: -5%;
	left: 0;
	margin-left: -18%;
	margin-top: -50%
}
section#edge .slide-copy {
	width: 68%
}
section#edge.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/3X-power-case.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 1562px;
	width: 995px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	top: -50px;
	left: -16px;
	margin: 0;
	background-position: top left
}
section#edge.sec2 .bg-item {
	-webkit-transform: translate3d(-5%, -20%, 0);
	-moz-transform: translate(-5%, -20%);
	-ms-transform: translate(-5%, -20%);
	-o-transform: translate(-5%, -20%);
	transform: translate(-5%, -20%)
}
section#edge.sec3 .bg-item {
	-webkit-transform: translate3d(-10%, -40%, 0);
	-moz-transform: translate(-10%, -40%);
	-ms-transform: translate(-10%, -40%);
	-o-transform: translate(-10%, -40%);
	transform: translate(-10%, -40%)
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	section#edge .slide-copy p {
		letter-spacing: 2px
	}
}
@media screen and (max-width: 640px) {
	section#edge .blocks {
		position: absolute;
		bottom: 0;
		height: 40%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
	section#edge .block {
		top: auto;
		bottom: 0;
		left: auto;
		margin-left: 0;
		padding-bottom: 5%;
		width: auto
	}
	section#edge .slide-copy {
		width: auto;
		font-weight: lighter
	}
	section#edge .bg-item {
		top: -90%;
		left: -50%;
		margin-left: -20%;
		margin-top: -100%
	}
	section#edge.on .bg-item {
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate(0, 182px);
		-ms-transform: translate(0, 182px);
		-o-transform: translate(0, 182px);
		transform: translate(0, 182px);
		width: 160% !important
	}
	section#edge.sec2 .bg-item {
		-webkit-transform: translate3d(-10%, -15%, 0);
		-moz-transform: translate(-10%, -15%);
		-ms-transform: translate(-10%, -15%);
		-o-transform: translate(-10%, -15%);
		transform: translate(-10%, -15%)
	}
	section#edge.sec3 .bg-item {
		-webkit-transform: translate3d(-15%, -30%, 0);
		-moz-transform: translate(-15%, -30%);
		-ms-transform: translate(-15%, -30%);
		-o-transform: translate(-15%, -30%);
		transform: translate(-15%, -30%)
	}
}
@media screen and (max-height: 400px) {
	section#edge.sec2 .bg-item {
		-webkit-transform: translate3d(-6%, -17%, 0);
		-moz-transform: translate(-6%, -17%);
		-ms-transform: translate(-6%, -17%);
		-o-transform: translate(-6%, -17%);
		transform: translate(-6%, -17%)
	}
	section#edge.sec3 .bg-item {
		-webkit-transform: translate3d(-12%, -34%, 0);
		-moz-transform: translate(-12%, -34%);
		-ms-transform: translate(-12%, -34%);
		-o-transform: translate(-12%, -34%);
		transform: translate(-12%, -34%)
	}
}
.js section#edge .block .slide-headline {
	-webkit-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-moz-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-webkit-transform: translate3d(0, 300px, 0);
	-moz-transform: translate(0, 300px);
	-ms-transform: translate(0, 300px);
	-o-transform: translate(0, 300px);
	transform: translate(0, 300px);
	opacity: 0;
	filter: alpha(opacity=0);
	position: relative
}
.js section#edge .block .slide-copy {
	-webkit-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-moz-transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: all 750ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-webkit-transform: translate3d(0, 340px, 0);
	-moz-transform: translate(0, 340px);
	-ms-transform: translate(0, 340px);
	-o-transform: translate(0, 340px);
	transform: translate(0, 340px);
	opacity: 0;
	filter: alpha(opacity=0);
	position: relative
}
.js section#edge .block.show .slide-headline {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	opacity: 1;
	filter: alpha(opacity=100)
}
.js section#edge .block.show .slide-copy {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	opacity: 1;
	filter: alpha(opacity=100)
}
.js section#edge .block.hide .slide-headline {
	-webkit-transform: translate3d(0, -340px, 0);
	-moz-transform: translate(0, -340px);
	-ms-transform: translate(0, -340px);
	-o-transform: translate(0, -340px);
	transform: translate(0, -340px);
	opacity: 0;
	filter: alpha(opacity=0)
}
.js section#edge .block.hide .slide-copy {
	-webkit-transform: translate3d(0, -300px, 0);
	-moz-transform: translate(0, -300px);
	-ms-transform: translate(0, -300px);
	-o-transform: translate(0, -300px);
	transform: translate(0, -300px);
	opacity: 0;
	filter: alpha(opacity=0)
}

.nojs section#edge .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/3X-power-case.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 1562px;
	width: 995px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	opacity: 1
}
.nojs section#edge .block {
	top: 5%
}
.nojs section#edge .block2 {
	margin-top: 150px
}
.nojs section#edge .block3 {
	margin-top: 300px
}



/* Section Slim Angle  */
section#slim .block, section#slim .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#slim .block {
	bottom: 5%;
	background-image: none
}
section#slim .bg-item {
	left: 0%;
	right: 50%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#slim .slide-copy {
	width: 68%
}
section#slim.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/slim-design.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	height: auto;
	width: auto;
	background-position: center right
}

/* This is in v2 and makes the bg image smaller. remove fit for max size bg image*/
@media screen and (min-height: 800px) {
	section#slim.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#slim .block {
		left: 28%
	}
	section#slim .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#slim .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section#slim .block {
		top: auto;
		left: 0;
		bottom: 0;
		padding-bottom: 5%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
  section#slim .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 10px;
  }
	section#slim .slide-copy {
		width: auto
	}
	section#slim.on .bg-item {
		margin-left: -50%;
		width: 100%
	}
}

.nojs section#slim .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/slim-design.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0)
}





/* Section Front View */
section#concept .block, section#concept .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#concept .block {
	bottom: 5%;
	background-image: none
}
section#concept .bg-item {
	left: 0%;
	right: 50%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#concept .slide-copy {
	width: 68%
}
section#concept.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/case-insert.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	height: auto;
	width: auto;
	background-position: center right
}

/* This is in v2 and makes the bg image smaller. remove fit for max size bg image*/
@media screen and (min-height: 800px) {
	section#concept.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#concept .block {
		left: 28%
	}
	section#concept .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#concept .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section#concept .block {
		top: auto;
		left: 0;
		bottom: 0;
		padding-bottom: 5%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
  section#concept .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 10px;
  }
	section#concept .slide-copy {
		width: auto
	}
	section#concept.on .bg-item {
		margin-left: -50%;
		width: 100%
	}
}

.nojs section#concept .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/case-insert.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 556px;
	z-index: -1;
	-webkit-transform: translateZ(0)
}




/* Section duplex Back */
section#duplex .block, section#duplex .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#duplex .block {
	bottom: 5%;
	background-image: none
}
section#duplex .bg-item {
	left: 2%;
	right: 53%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#duplex .slide-copy {
	width: 68%
}
section#duplex.on .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/spec-view.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 420px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	height: auto;
	width: auto;
	background-position: center right
}

/* This is in v2 and makes the bg image smaller. remove fit for max size bg image*/
@media screen and (min-height: 800px) {
	section#duplex.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#duplex .block {
		left: 28%
	}
	section#duplex .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#duplex .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section#duplex .block {
		top: auto;
		left: 0;
		bottom: 0;
		padding-bottom: 5%;
		background-color: rgba(0, 0, 0, 0);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.35)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0.7)));
		background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7))
	}
  section#duplex .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 0;
  }
	section#duplex .slide-copy {
		width: auto
	}
	section#duplex.on .bg-item {
		margin-left: -50%;
		width: 100%
	}
}

.nojs section#duplex .bg-item {
	background: transparent url("../images/s10-matrix-battery-case/spec-view.png") no-repeat center center;
	background-size: contain;
	white-space: nowrap;
	overflow: hidden;
	height: 714px;
	width: 420px;
	z-index: -1;
	-webkit-transform: translateZ(0)
}


/* Section COLOUR */
section#colour h2 {
	text-align: center;
	position: absolute;
	top: 90px;
	width: 100%
}
section#colour h3 {
	margin-bottom: -50px
}
section#colour .carousel {
	width: 99.8%;
	left: 0.1%;
	margin-left: 0
}
section#colour .carousel .slide {
	height: 500px;
	width: 100%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat
}
@media screen and (max-width: 1024px), screen and (max-height: 768px) {
	section#colour h3 {
		margin-bottom: 10px
	}
}
@media screen and (max-width: 768px) {
	section#colour h2 {
		top: 90px
	}
}
@media screen and (max-width: 640px) {
	/*original: Changed as not displaying centre in iPhone X and larger displays.
	section#colour .carousel {
		height: 500px;
		top: -80px;
		margin-top: 0
	}
	section#colour .carousel .pager {
		bottom: 40px
	}
	section#colour .carousel .slide {
		background-position: center center;
		background-size: contain
	}
	section#colour .carousel .slide h3 {
		bottom: 120px
	}*/
	
		section#colour .carousel {
		margin-top: -270px;
		top: 50%;
		height: 580px
	}
	section#colour .carousel .slide h3 {
		bottom: 20px
	}
	section#colour .carousel .pager {
		bottom: 60px
	}
	
}
@media screen and (max-device-height: 700px) and (min-device-height: 490px) {
	/* controls position from top on mobile */
	section#colour .carousel {
		margin-top: -270px;
		top: 50%;
		height: 580px
	}
	section#colour .carousel .slide h3 {
		bottom: 20px
	}
	section#colour .carousel .pager {
		bottom: 60px
	}
}
/*Custom@Media Targeting larger screens like iPhone X, iPhone Plus etc... */
@media screen and (max-device-height: 850px) and (min-device-height: 701px) {
	section#colour .carousel .slide h3 {
		bottom: -10px
	}
	section#colour .carousel .pager {
		bottom: 30px
	}
}
@media screen and (max-height: 640px) and (max-width: 960px) and (orientation: landscape) {
	section#colour .carousel {
		width: 100%
	}
	section#colour .carousel .slide {
		margin-top: 140px;
		width: 100%;
		height: 300px
	}
	section#colour .carousel .slide h3 {
		bottom: 48px
	}
	section#colour .carousel .pager {
		bottom: 161px
	}
}
.js section#colour.off .carousel .slide {
	background-image: none !important
}