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

/* Section mode1 */
section#start .trnslt-item-2 {color: red; font-weight: bolder}
section#start .slide-headline .claim {font-size: 0.7em; margin-left: 0em;}




/* Section duplex */
section .block, section .bg-item,
section .bg-titan,
section .bg-phantom {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -200px;
	bottom: auto
}
section .block {
	bottom: 5%;
	background-image: none
}
section .bg-item,
section .bg-titan,
section .bg-phantom {
	left: 2%;
	right: 53%;
	top: 50px;
	bottom: 55px;
	margin: 0;
	height: auto;
	width: auto
}
 
section .slide-copy {
	width: 68%
}
section.on .bg-item,
section.on .bg-titan,
section.on .bg-phantom {
	/* seperated the image below */
	/*background: transparent url("../images/power-dock/powerdock-base-angle.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;
}

/* single slide images for SILVER Colour */
section#start.on .bg-item {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Silver/Apple-Watch-Link-Bracelet-Silver-intro.png") no-repeat center center;
	background-size: contain;
	background-position: center right;
}

section#mode2.on .bg-item {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Silver/Apple-Watch-Link-Bracelet-Silver-direct_view.png") no-repeat center center;	
	background-size: contain;
	background-position: center right;
}
section#mode3.on .bg-item {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/aviation-grade-materials.png") no-repeat center center;	
	background-size: contain;
	background-position: center right;	
}

section#mode4.on .bg-item {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Silver/Apple-Watch-Link-Bracelet-Silver-left_view.png") no-repeat center center;	
	background-size: contain;
	background-position: center right;	
}

section#mode5.on .bg-item {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Silver/Apple-Watch-Link-Bracelet-Silver-up_view.png") no-repeat center center;
	background-size: contain;
	background-position: center right;	
}

section#mode6.on .bg-item {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Silver/Apple-Watch-Link-Bracelet-Silver-back_view.png") no-repeat center center;
	background-size: contain;
	background-position: center right;	
}



/* single slide images for titan Colour */
section#start.on .bg-titan {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Titan/Apple-Watch-Link-Bracelet-Titan-intro.png") no-repeat center center;
	background-size: contain;
	background-position: center right;
}

section#mode2.on .bg-titan {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Titan/Apple-Watch-Link-Bracelet-Titan-direct_view.png") no-repeat center center;
	background-size: contain;
	background-position: center right;
}
/* USING DEFAULT B-ITEM AS DEFAULT IMG FOR ALL VARIATIONS AND TARGETED VIA VELOCITY
section#mode3.on .bg-titan {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/aviation-grade-materials.png") no-repeat center center;
	background-size: contain;
	background-position: center right;	
}
*/
section#mode4.on .bg-titan {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Titan/Apple-Watch-Link-Bracelet-Titan-left_view.png") no-repeat center center;
	background-size: contain;
	background-position: center right;	
}

section#mode5.on .bg-titan {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Titan/Apple-Watch-Link-Bracelet-Titan-up_view.png") no-repeat center center;
	background-size: contain;
	background-position: center right;	
}

section#mode6.on .bg-titan {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Titan/Apple-Watch-Link-Bracelet-Titan-back_view.png") no-repeat center center;
	background-size: contain;
	background-position: center right;	
}






/* single slide images for Black PHANTOM Colour */

section#start.on .bg-phantom {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Phantom/Apple-Watch-Link-Bracelet-Phantom-intro.png") no-repeat center center;
	background-size: contain;
	background-position: center right;
}

section#mode2.on .bg-phantom {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Phantom/Apple-Watch-Link-Bracelet-Phantom-direct_view.png") no-repeat center center;	
	background-size: contain;
	background-position: center right;
}
/* USING DEFAULT B-ITEM AS DEFAULT IMG FOR ALL VARIATIONS AND TARGETED VIA VELOCITY
section#mode3.on .bg-phantom {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/aviation-grade-materials.png") no-repeat center center;	
	background-size: contain;
	background-position: center right;	
}
*/
section#mode4.on .bg-phantom {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Phantom/Apple-Watch-Link-Bracelet-Phantom-left_view.png") no-repeat center center;
	background-size: contain;
	background-position: center right;	
}

section#mode5.on .bg-phantom {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Phantom/Apple-Watch-Link-Bracelet-Phantom-up_view.png") no-repeat center center;
	background-size: contain;
	background-position: center right;	
}

section#mode6.on .bg-phantom {
	background: transparent url("../images/Apple-Watch-Link-Bracelet/Phantom/Apple-Watch-Link-Bracelet-Phantom-back_view.png") no-repeat center center;
	background-size: contain;
	background-position: center right;	
}




@media screen and (max-width: 910px) {
	section .block {
		/* -----------  CHANGE BELOW LEFT TO AROUND 52% TO ALIGN TEXT AND IMAGE SIDE BY SIDE ON TABLET DEVICES ------------- */
		left: 28%
	}
	section .bg-item, section .bg-titan, section .bg-phantom {
		left: 50%;
		margin-left: -53%
	}
	section .slide-copy {
		width: 75%
	}
}
@media screen and (max-width: 640px) {
	section .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 .bg-item, section .bg-titan, section .bg-phantom {
    left: 50%;
    top: 0;
    margin-left: -40%;
    margin-top: 0;
  }
	section .slide-copy {
		width: auto
	}
	section.on .bg-item, section.on .bg-titan, section.on .bg-phantom {
		margin-left: -50%;
		width: 100%
	}

}

.nojs section .bg-item, .nojs section .bg-titan, .nojs section .bg-phantom {
	/*background: transparent url("../images/hyper-usb/rotated-usb.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 gallery */
section#gallery h2 {
	text-align: center;
	position: absolute;
	top: 90px;
	width: 100%
}
section#gallery h3 {
	margin-bottom: -50px
}
section#gallery .carousel {
	width: 99.8%;
	left: 0.1%;
	margin-left: 0
}
section#gallery .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#gallery h3 {
		margin-bottom: 10px
	}
}
@media screen and (max-width: 768px) {
	section#gallery h2 {
		top: 90px
	}
}
@media screen and (max-width: 640px) {
	/*original: Changed as not displaying centre in iPhone X and larger displays.
	section#gallery .carousel {
		height: 500px;
		top: -80px;
		margin-top: 0
	}
	section#gallery .carousel .pager {
		bottom: 40px
	}
	section#gallery .carousel .slide {
		background-position: center center;
		background-size: contain
	}
	section#gallery .carousel .slide h3 {
		bottom: 120px
	}*/
	
		section#gallery .carousel {
		margin-top: -270px;
		top: 50%;
		height: 580px
	}
	section#gallery .carousel .slide h3 {
		bottom: 20px
	}
	section#gallery .carousel .pager {
		bottom: 60px
	}
	
}
@media screen and (max-device-height: 700px) and (min-device-height: 490px) {
	/* controls position from top on mobile */
	section#gallery .carousel {
		margin-top: -270px;
		top: 50%;
		height: 580px
	}
	section#gallery .carousel .slide h3 {
		bottom: 20px
	}
	section#gallery .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#gallery .carousel .slide h3 {
		bottom: -10px
	}
	section#gallery .carousel .pager {
		bottom: 30px
	}
}
@media screen and (max-height: 640px) and (max-width: 960px) and (orientation: landscape) {
	section#gallery .carousel {
		width: 100%
	}
	section#gallery .carousel .slide {
		margin-top: 140px;
		width: 100%;
		height: 300px
	}
	section#gallery .carousel .slide h3 {
		bottom: 48px
	}
	section#gallery .carousel .pager {
		bottom: 161px
	}
}
.js section#gallery.off .carousel .slide {
	background-image: none !important
}