/* GENERAL */
#transitions #controls {
	width: 240px;
	float: left;
	margin: 0;
	position: relative;
	height: 539px;
}
#transitions #transitions-demo.perspective {
	-webkit-perspective: 1000;
}
@media only screen and (max-device-width: 768px) {
	#transitions #transitions-demo { -webkit-transform: translateZ(0); }
}
#transitions #transition-list {
	list-style: none none outside;
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
}
#transitions #transition-list li {
	margin: 0 40px 5px 0;
}

#transitions #transition-list li a {
	display: block; 
	padding: 0;
	text-decoration: none;
	color: rgba(255,255,255,1);
	opacity: 1;
	-webkit-transition: color 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
}
@media screen and (max-device-width: 480px) {
	#transitions #transition-list li a { padding: 2px 0; }
	#transitions #transition-list #tIris,
	#transitions #transition-list #tSearchlight { display: none; }
}
@media only screen and (min-device-width: 1025px) {
	#transitions #transition-list li a:hover { color: rgba(255,255,255,0.5); }
}
#transitions #transition-list.active li a {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	opacity: 0.5;
	-webkit-transition: opacity 0.3s linear;
	
}
#transitions.container .how {
	width: 220px;
	padding-right: 0;
	padding-top: 26px;
}
#transitions #transitions-demo .demo {
	display: none;
	width: 570px;
	height: 380px;
	z-index: 0;
}
#transitions #transitions-demo .demo.active {
	display: block;position:relative
}

#transitions #watchAgainWrapper {
	padding-left: 240px;
	text-align: center;
	font-size: 12px;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
	-webkit-user-select: none;
}
@media only screen and (max-device-width: 768px) {
	#transitions #watchAgainWrapper { font-size: 14px; }
}
#transitions #watchAgain {
	visibility: hidden;
	opacity: 0;
	padding: 3px 19px;
	border: 1px solid #d18e00;
	-webkit-border-radius: 10px;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));
	-webkit-transition: color 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}
#transitions #watchAgain.loaded {
	visibility: visible;
	opacity: 1;
}
#transitions #watchAgain:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.03)), to(rgba(0,0,0,0.13)));
}
#transitions #watchAgain.loaded.active {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	opacity: .5;
}



#transitions #poster.inactive { display: none; }
#transitions .toggle {
	width: 145px;
}
#transitions .toggle legend {
	color: #fff;
}

/* CUBE */
#transitions #cube {
	-webkit-transform-style: preserve-3d;
	width: 600px;
	height: 400px;
	position: absolute;
}
#transitions #cube.active {
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-name: cubedemo;
	-webkit-transform: rotateX(-90deg);
}
#transitions #cube .face {
	position: absolute;
	width: 600px;
	height: 400px;
	display: block;
	overflow: hidden;
}
#transitions #cube .front {
	-webkit-transform: scale3d(.835,.835,.835) translateZ(200px);
}
#transitions #cube .back {
	-webkit-transform: scale3d(.835,.835,.835) rotateY(180deg) translateZ(200px);
}
#transitions #cube .top {
	-webkit-transform: scale3d(.835,.835,.835) rotateX(90deg) translateZ(200px);
}
@-webkit-keyframes cubedemo {
	0% { -webkit-transform: rotateX(0); -webkit-animation-timing-function: linear; }
	50% { -webkit-transform: rotateX(-92deg); -webkit-animation-timing-function: ease-in; }
	70% { -webkit-transform: rotateX(-84deg); -webkit-animation-timing-function: ease-in; }
	80% { -webkit-transform: rotateX(-90deg); -webkit-animation-timing-function: ease-in; }
	95% { -webkit-transform: rotateX(-88deg); -webkit-animation-timing-function: ease-in; }
	100% { -webkit-transform: rotateX(-90deg); }
}

/* FOLD-OUT */
#unfold { width: 600px; height: 400px; }
#unfold .box { position: absolute; width: 600px; height: 133px; overflow: hidden; -webkit-transform: rotateX(0); }

#unfold .outgoing { opacity: 0; height: 200px; -webkit-transform-origin: 50% 100%; -webkit-animation-duration: 1s; }
#unfold .outgoing.out2 { top: 200px; }
#unfold .outgoing.out2 img { position: absolute; top: -200px; }
#unfold.active .outgoing.out1 { -webkit-animation-name: unfoldout1; }
#unfold.active .outgoing.out2 { -webkit-animation-name: unfoldout2; }
@-webkit-keyframes unfoldout1 {
	0%   { opacity: 1; -webkit-transform: rotateX(0); -webkit-animation-timing-function: ease-in-out; }
	50%  { opacity: 1; -webkit-transform: rotateX(175deg); }
	52%  { opacity: 0; -webkit-transform: rotateX(175deg); }
	100%  { opacity: 0; -webkit-transform: rotateX(175deg); }
}
@-webkit-keyframes unfoldout2 {
	0%   { opacity: 1; -webkit-transform: rotateX(0); -webkit-animation-timing-function: ease-in-out; }
	50%  { opacity: 1; -webkit-transform: rotateX(0); }
	100%  { opacity: 0; -webkit-transform: rotateX(90deg); }
}

#unfold .incoming { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: rotateX(0); -webkit-animation-duration: 2s; }
.started #unfold .incoming { opacity: 1; }
#unfold .incoming img { position: absolute; }

#unfold .incoming.in1 { top: 0; }
#unfold .incoming.in2 { top: 133px; }
#unfold .incoming.in2 img { top: -133px; }
#unfold .incoming.in3 { top: 266px; height: 134px; }

.ended #unfold.active .incoming.in1 { -webkit-animation-name: unfoldin1; }
.ended #unfold.active .incoming.in2 { -webkit-animation-name: unfoldin2; }
.ended #unfold.active .incoming.in3 { -webkit-animation-name: unfoldin3; }

@-webkit-keyframes unfoldin1 {
	0%   { opacity:0; -webkit-transform: rotateX(130deg); -webkit-animation-timing-function: ease-in-out; }
	24%  { opacity:1; -webkit-transform: rotateX(-12deg); }
	26%  { opacity:1; -webkit-transform: rotateX(12deg); }
	30%  { opacity:1; -webkit-transform: rotateX(0); }
	100% { opacity:1; -webkit-transform: rotateX(0); }
}
@-webkit-keyframes unfoldin2 {
	0%   { opacity: 0; }
	25%  { opacity: 0; -webkit-transform: rotateX(130deg); }
	26%  { opacity: 1; -webkit-transform: rotateX(130deg); -webkit-animation-timing-function: ease-in-out; }
	45%  { opacity: 1; -webkit-transform: rotateX(-18deg); }
	53%  { opacity: 1; -webkit-transform: rotateX(18deg); }
	60%  { opacity: 1; -webkit-transform: rotateX(0); }
	100% { opacity: 1; -webkit-transform: rotateX(0); }
}
@-webkit-keyframes unfoldin3 {
	0%   { opacity: 0; }
	54%  { opacity: 0; -webkit-transform: rotateX(140deg); }
	55%  { opacity: 1; -webkit-transform: rotateX(140deg); -webkit-animation-timing-function: ease-in-out; }
	68%  { opacity: 1; -webkit-transform: rotateX(-28deg); }
	76%  { opacity: 1; -webkit-transform: rotateX(28deg); }
	84%  { opacity: 1; -webkit-transform: rotateX(-12deg); }
	92%  { opacity: 1; -webkit-transform: rotateX(12deg); -webkit-animation-timing-function: ease-out; }
	100% { opacity: 1; -webkit-transform: rotateX(0); }
}

/* ROTATE IN */
#rotatein.demo {
	width: 600px;
	height: 400px;
}
#rotatein div {
	position: absolute;
	width: 600px;
	height: 400px;
	-webkit-transform: rotateX(0);
	-webkit-transform-origin: 50% 100%;
	overflow: hidden;
	opacity: 1;
}
#rotatein.active div {
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1.5s;
}
#rotatein.active .outgoing {
	z-index: 2;
	-webkit-animation-name: rotate1;
}
#rotatein.active .incoming {
	z-index: 10;
	-webkit-animation-name: rotate2;
}
@-webkit-keyframes rotate1 {
	0% { -webkit-transform: rotateX(0); opacity: 1; -webkit-animation-timing-function: linear; }
	80% { -webkit-transform: rotateX(-180deg); opacity: 0; }
	100% { -webkit-transform: rotateX(-180deg); opacity: 0; }
}
@-webkit-keyframes rotate2 {
	0% { opacity: 0; }
	30% { -webkit-transform: rotateX(180deg); opacity: 0; }
	31% { -webkit-transform: rotateX(180deg); -webkit-animation-timing-function: linear; opacity: 1; }
	60% { -webkit-transform: rotateX(-18deg); }
	65% { -webkit-transform: rotateX(18deg); }
	70% { -webkit-transform: rotateX(-9deg); }
	76% { -webkit-transform: rotateX(9deg); }
	84% { -webkit-transform: rotateX(-4deg); }
	92% { -webkit-transform: rotateX(4deg); }
	100% { -webkit-transform: rotateX(0); }
}

/* MULTIFLIP */
#multiflip .flipper {
	-webkit-transform-style: preserve-3d;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 2s;
	width: 600px;
	height: 400px;
	position: absolute;
}
#transitions #multiflip.active .flipper {
	-webkit-transform: rotateX(180deg);
}
#transitions #multiflip .incoming,
#transitions #multiflip .outgoing {
	width: 86px;
	height: 400px;
	overflow: hidden;
	position: absolute;
	-webkit-backface-visibility: hidden;
}
#transitions #multiflip #flip7 .incoming,
#transitions #multiflip #flip7 .outgoing {
	width: 84px;
}
#transitions #multiflip .outgoing {
	z-index: 20;
}
#transitions #multiflip .incoming {
	z-index: 0;
	-webkit-transform: rotateX(-180deg);
}
@-webkit-keyframes multiflip1 {
	0% { -webkit-transform: rotateX(0); -webkit-animation-timing-function: ease-in-out; }
	60% { -webkit-transform: rotateX(180deg); }
	100% { -webkit-transform: rotateX(180deg); }
}
@-webkit-keyframes multiflip2 {
	0% { -webkit-transform: rotateX(0); }
	10% { -webkit-transform: rotateX(0); -webkit-animation-timing-function: ease-in-out; }
	70% { -webkit-transform: rotateX(180deg); }
	100% { -webkit-transform: rotateX(180deg); }
}
@-webkit-keyframes multiflip3 {
	0% { -webkit-transform: rotateX(0); }
	20% { -webkit-transform: rotateX(0); -webkit-animation-timing-function: ease-in-out; }
	80% { -webkit-transform: rotateX(180deg); }
	100% { -webkit-transform: rotateX(180deg); }
}
@-webkit-keyframes multiflip4 {
	0% { -webkit-transform: rotateX(0); }
	30% { -webkit-transform: rotateX(0); -webkit-animation-timing-function: ease-in-out; }
	90% { -webkit-transform: rotateX(180deg); }
	100% { -webkit-transform: rotateX(180deg); }
}
#transitions #multiflip img {
	position: absolute;
}
#transitions #multiflip #flip2 img {
	left: -86px;
}
#transitions #multiflip #flip3 img {
	left: -172px;
}
#transitions #multiflip #flip4 img {
	left: -258px;
}
#transitions #multiflip #flip5 img {
	left: -344px;
}
#transitions #multiflip #flip6 img {
	left: -430px;
}
#transitions #multiflip #flip7 img {
	left: -516px;
}
#transitions #multiflip #flip1 {
	-webkit-animation-name: multiflip4;
}
#transitions #multiflip #flip2 {
	-webkit-animation-name: multiflip3;
	left: 86px;
}
#transitions #multiflip #flip3 {
	-webkit-animation-name: multiflip2;
	left: 172px;
}
#transitions #multiflip #flip4 {
	-webkit-animation-name: multiflip1;
	left: 258px;
}
#transitions #multiflip #flip5 {
	-webkit-animation-name: multiflip2;
	left: 344px;
}
#transitions #multiflip #flip6 {
	-webkit-animation-name: multiflip3;
	left: 430px;
}
#transitions #multiflip #flip7 {
	-webkit-animation-name: multiflip4;
	left: 516px;
	width: 84px;
}

/* HORIZONTAL FLIP */
#horizontalflip .flipper {
	-webkit-transform-style: preserve-3d;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 0.75s;
	width: 600px;
	height: 400px;
	position: absolute;
	z-index: 1;
}
#transitions #horizontalflip.active .flipper {
	-webkit-animation-name: horizontalflip;
	-webkit-transform: rotateX(180deg);
	z-index: 0;
}
#transitions #horizontalflip .incoming,
#transitions #horizontalflip .outgoing {
	width: 600px;
	height: 400px;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	-webkit-backface-visibility: hidden;
}
#transitions #horizontalflip .incoming { z-index: 0; -webkit-transform: rotateX(-180deg); }
#transitions #horizontalflip .gallery_image { position: absolute; -webkit-backface-visibility: hidden; }

@-webkit-keyframes horizontalflip {
	0% { -webkit-transform: rotateX(0); -webkit-animation-timing-function: ease-in-out; }
	100% { -webkit-transform: rotateX(180deg); }
}

/* CROSS-FADE */
#transitions #dissolve {
	width: 600px;
	height: 400px;
	position: absolute;
}
#transitions #dissolve .outgoing {
	width: 600px;
	height: 400px;
	position: absolute;
	opacity: 0;
	overflow: hidden;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1s;
}
#transitions #dissolve.active .outgoing {
	opacity: 0;
	z-index: 2;
	-webkit-animation-name: dissolve;
}
#transitions #dissolve.active .incoming {
	opacity: 1;
	z-index: 0;
}
@-webkit-keyframes dissolve {
	0% { opacity: 1; }
	1% { opacity: 1; }
	100% { opacity: 0; }
}

/* TOSS-DOWN */
#transitions #toss .incoming,
#transitions #toss .outgoing {
	width: 600px;
	height: 400px;
	position: absolute;
}
#transitions #toss .incoming {
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 0.5s;
	-webkit-transform: rotate(0) scale(1) translate(0,0);
	opacity: 1;
}
#transitions #toss.active .incoming {
	-webkit-animation-name: toss;	
}
@-webkit-keyframes toss {
	0% { -webkit-transform: rotate(-30deg) scale(1.3) translate(-20px,-250px); opacity: 0; -webkit-animation-timing-function: ease-in-out; }
	100% { -webkit-transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; }
}

/* SLIDE IN */
#transitions #slidein {
	overflow: hidden;
}
#transitions #slidein .incoming,
#transitions #slidein .outgoing {
	width: 600px;
	height: 400px;
	position: absolute;
}
#transitions #slidein .outgoing {
	z-index: 2;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 0.5s;
	-webkit-transform: translate(0,0);
}
#transitions #slidein.active .outgoing {
	-webkit-animation-name: slideout;
}
#transitions .started #slidein .outgoing {
	-webkit-transform: translate(600px,0);
}
@-webkit-keyframes slideout {
	0% { -webkit-transform: translate(0,0); -webkit-animation-timing-function: ease-in-out; }
	100% { -webkit-transform: translate(600px,0); }
}
#transitions #slidein .incoming {
	z-index: 0;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 0.5s;
	-webkit-transform: translate(-600px,0);
}
#transitions #slidein.active .incoming {
	-webkit-animation-name: slidein;
}
#transitions .started #slidein .incoming {
	-webkit-transform: translate(0,0);
}
@-webkit-keyframes slidein {
	0% { -webkit-transform: translate(-600px,0); -webkit-animation-timing-function: ease-in-out; }
	100% { -webkit-transform: translate(0,0); }
}

/* WIPE IN */
#transitions #iris .incoming,
#transitions #iris .outgoing {
	width: 570px;
	height: 380px;
	position: absolute;
	left:0;
	top:0;
}
#transitions #iris .incoming img {
	-webkit-mask-image: url(https://devimages.apple.com.edgekey.net/safaridemos/showcase/transitions/images/circle-mask.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	-webkit-mask-size: 1500px;
	-webkit-animation-duration: 1s;}
#transitions #iris.active .incoming img {
	-webkit-animation-name: iris;
}
@-webkit-keyframes iris {
	0% { -webkit-mask-size: 0; -webkit-animation-timing-function: ease-in-out; }
	100% { -webkit-mask-size: 1500px; }
}

/* POOF */
#transitions #fadethrough .incoming,
#transitions #fadethrough .outgoing {
	width: 600px;
	height: 400px;
	position: absolute;
}
#transitions #fadethrough .incoming {
	z-index: 10;
}
#transitions #fadethrough .outgoing {
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 0.75s;
	-webkit-transform: scale(1) translate(0,0);
	-webkit-transform-origin: 50% 50%;
	opacity: 0;
	z-index: 20;
}
#transitions #fadethrough.active .outgoing {
	-webkit-animation-name: fadethrough;	
}
@-webkit-keyframes fadethrough {
	0% { -webkit-transform: scale(1) translate(0,0); opacity: 1; -webkit-animation-timing-function: ease-in-out; }
	100% { -webkit-transform: scale(1.5) translate(0,-40px); opacity: 0; }
}

/* SEARCHLIGHT */
#transitions #searchlight .incoming,
#transitions #searchlight .outgoing {
	width: 600px;
	height: 400px;
	position: absolute;
}
#transitions #searchlight .incoming img {
	-webkit-mask-image: url(https://devimages.apple.com.edgekey.net/safaridemos/showcase/transitions/images/circle-mask.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	-webkit-mask-size: 1500px;
	-webkit-animation-duration: 2s;
}
#transitions #searchlight.active .incoming img {
	-webkit-animation-name: searchlight;
}
@-webkit-keyframes searchlight {
	0% { -webkit-mask-size: 50px; -webkit-mask-position: 0 0; -webkit-animation-timing-function: ease-in-out; }
	25% { -webkit-mask-size: 150px; -webkit-mask-position: 400px 50px; -webkit-animation-timing-function: ease-in-out; }
	50% { -webkit-mask-size: 250px; -webkit-mask-position: 0px 100px; -webkit-animation-timing-function: ease-in-out; }
	75% { -webkit-mask-size: 250px; -webkit-mask-position: 200px 150px; -webkit-animation-timing-function: ease-in-out; }
	100% { -webkit-mask-size: 1500px; -webkit-mask-position: -450px -550px; }
}

#transitions.container .safari_dev_center {
	margin-top: -26px;
}
ul#color-swatches{
margin: 0;
padding: 0;
list-style: none;
}
ul#color-swatches li {
	border: 1px solid #CBCBCB;
    float: left;
    margin:0 10px 5px 0;
    padding: 4px;}
ul#color-swatches li a{float:left;width:20px;text-decoration:none;}

#masktab{
filter: alpha(opacity=50);
opacity:.5;}


#color-pallate p{padding-bottom:15px;text-transform:capitalize;font-size: 12px;}

.color-rnd-btn{margin-right:10px; border-radius: 50%!important;box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); transition: .3s ease-out;width: 7rem;height:7rem;display: inline-block;}
@media (max-width:768px){
.color-rnd-btn{width: 5rem;height:5rem;}
}
@media(max-width:768px){
#transitions #transitions-demo .demo {
    display: none;
    width: 100%;
   height: 135px;
    z-index: 0;
}
#transitions #iris .incoming, #transitions #iris .outgoing {
    width: 100%;
   height: 135px;
    position: absolute;
    left: 0;
    top: 0;
}
}