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

/* Section start */
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/extreme-index/iphone-12-turbo-edition.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/extreme-index/iphone-12-turbo-edition.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 item2 */

/* Section Front View */
section#item2 {background-color: #000}
section#item2 .block, section#item2 .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#item2 .block {
	bottom: 5%;
	background-image: none
}
section#item2 .bg-item {
	left: 0%;
	right: 50%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#item2 .slide-copy {
	width: 68%
}
section#item2.on .bg-item {
	background: transparent url("../images/extreme-index/glass-anime-04s.gif") 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#item2.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#item2 .block {
		left: 28%
	}
	section#item2 .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#item2 .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section#item2 .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#item2 .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 10px;
  }
	section#item2 .slide-copy {
		width: auto
	}
	section#item2.on .bg-item {
		margin-left: -50%;
		width: 100%
	}
}

.nojs section#item2 .bg-item {
	background: transparent url("../images/extreme-index/glass-anime-04s.gif") 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#item3 .block, section#item3 .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#item3 .block {
	bottom: 5%;
	background-image: none
}
section#item3 .bg-item {
	left: 0%;
	right: 50%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#item3 .slide-copy {
	width: 68%
}
section#item3.on .bg-item {
	background: transparent url("../images/extreme-index/iphone-12-hydro-gt.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#item3.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#item3 .block {
		left: 28%
	}
	section#item3 .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#item3 .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section#item3 .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#item3 .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 10px;
  }
	section#item3 .slide-copy {
		width: auto
	}
	section#item3.on .bg-item {
		margin-left: -50%;
		width: 100%
	}
}

.nojs section#item3 .bg-item {
	background: transparent url("../images/extreme-index/iphone-12-hydro-gt.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 item4 */
/* Section item4 */
section#item4 .block, section#item4 .bg-item {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section#item4 .block {
	bottom: 5%;
	background-image: none
}
section#item4 .bg-item {
	left: 0%;
	right: 50%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
section#item4 .slide-copy {
	width: 68%
}
section#item4.on .bg-item {
	background: transparent url("../images/extreme-index/iphone-12-titan-edition-case.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#item4.on .bg-item {
		background-size: auto
	}
}
/* end block */
@media screen and (max-width: 910px) {
	section#item4 .block {
		left: 28%
	}
	section#item4 .bg-item {
		left: 50%;
		margin-left: -53%
	}
	section#item4 .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section#item4 .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#item4 .bg-item {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 10px;
  }
	section#item4 .slide-copy {
		width: auto
	}
	section#item4.on .bg-item {
		margin-left: -50%;
		width: 100%
	}
}

.nojs section#item4 .bg-item {
	background: transparent url("../images/extreme-index/iphone-12-titan-edition-case.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 item5 Back */
section#item5 .block, section#item5 .bg-item {
	position: absolute
}
section#item5 .block {
	bottom: 0;
	left: 15%;
	margin-bottom: 5%;
	width: 70%;
}

section#item5 .slide-copy {
	max-width: 600px
}
section#item5 article {
	z-index: 2;
	position: relative;
	height: 100%
}


section#item5.on .bg-item {
	background: transparent url("../images/extreme-index/case-vid.gif") no-repeat center center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	text-indent: 100%;
	white-space: nowrap;
	z-index: -1;
	-webkit-transform: translateZ(0);
}

@media screen and (max-width: 640px) {
	section#item5 .block {
		left: auto;
		top: auto;
		bottom: 0;
		margin-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));
		width: 100%;
	}

	
}
.nojs section#item5 .bg-item {
	background: transparent url("../images/extreme-index/case-vid.gif") no-repeat center center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	text-indent: 100%;
	white-space: nowrap;
	z-index: -1;
	-webkit-transform: translateZ(0)
}




.info-link h3 {color: red;margin-top: 15px}