@charset "UTF-8";
/* CSSes */

@font-face {
    font-family: "My Custom Font";
    src: url(fonts/lineto-circular-book.ttf) format("truetype");
}

.hvr-grow {
    background-color: rgba(201,255,201,1);
	display: block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform, background-color;
	position: absolute;
	top: 50%; left: 50%;
    width: 450px;
    height: 450px;
    margin: -225px 0 0 -225px; 
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.02);
	background-color: rgba(161,255,161,1); 
}



#hvr-growRing {
    background-color: rgba(228,228,228,1);
	display: block;
    vertical-align: middle;
    transform: translateZ(0) scale(0.8);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
	transition-duration: 0.3s;
    transition-property: transform;
	position: absolute;
	top: 47%; left: 50%;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px; 

}

#hvr-growRing img {
	position: absolute;
width: 420px;
height: 420px;

}


.hotspot {
    position: absolute;
	cursor: default; 
}
.hotspot + * {
    pointer-events: none;
    opacity: 0;
}
.hotspot:hover + * {
    opacity: 1.0;
}
.hotspot2 {
	cursor: default;   
}
.hotspot2 + * {
    pointer-events: none;
    opacity: 0;
}

.wash1 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring1.png");
    background-size:420px 420px;
}

.wash2 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring2.png");
    background-size:420px 420px;
}

.wash3 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring3.png");	
    background-size:420px 420px;
}

.wash4 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -1px 0px 0px -1px;
	background-position: 1px 1px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring4.png");
    background-size:420px 420px;
}

.wash5 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring5.png");
    background-size:420px 420px;
}

.wash6 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring6.png");
    background-size:420px 420px;
}

.wash7 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring7.png");
    background-size:420px 420px;
}

.wash8 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring8.png");
    background-size:420px 420px;
}

.wash9 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring9.png");
    background-size:420px 420px;
}

.wash10 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring10.png");
    background-size:420px 420px;
}

.wash11 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring11.png");
    background-size:420px 420px;
}

.wash12 {
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
	height: 424px;
	width: 424px;
	margin: -2px 0px 0px -2px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
    background-image: url("images/W2ring12.png");
    background-size:420px 420px;
}


.fade {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0s ease-in-out;
  -moz-transition: opacity 0s ease-in-out;
  -o-transition: opacity 0s ease-in-out;
  transition: opacity 0s ease-in-out;
}

.fade:hover {
  opacity:0;
  
}

.fade2 {
  position: absolute;
    left: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.fade2:hover {
  opacity:0;
  
}


.shape1 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	width: 140px; 	
	height: 105px; 
	margin: -210px 0 0 -210px;  
	clip-path: polygon(0px 0px, 140px 0px, 140px 105px, 105px 105px);
	-webkit-clip-path: polygon(0px 0px, 140px 0px, 140px 105px, 105px 105px);	
	-moz-clip-path: polygon(0px 0px, 140px 0px, 140px 105px, 105px 105px);	

}

.shape2 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 105px; 
	width: 140px; 
	margin: -210px 0 0 -70px;
	
}

.shape3 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 105px; 
	width: 140px; 
	margin: -210px 0 0 70px;
	clip-path: polygon(0px 0px, 140px 0px, 35px 105px, 0px 105px);
	-webkit-clip-path: polygon(0px 0px, 140px 0px, 35px 105px, 0px 105px);
	-moz-clip-path: polygon(0px 0px, 140px 0px, 35px 105px, 0px 105px);
	
}

.shape4 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 140px; 
	width: 105px; 
	margin: -210px 0 0 105px;
	clip-path: polygon(105px 0px, 105px 140px, 0px 140px, 0px 105px);
	-webkit-clip-path: polygon(105px 0px, 105px 140px, 0px 140px, 0px 105px);
	-moz-clip-path: polygon(105px 0px, 105px 140px, 0px 140px, 0px 105px);
	
}

.shape5 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 140px; 
	width: 105px; 
	margin: -70px 0 0 105px;
	
}

.shape6 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 140px; 
	width: 105px; 
	margin: 70px 0 0 105px;
	clip-path: polygon(0px 0px, 105px 0px, 105px 140px, 0px 35px);
	-webkit-clip-path: polygon(0px 0px, 105px 0px, 105px 140px, 0px 35px);
	-moz-clip-path: polygon(0px 0px, 105px 0px, 105px 140px, 0px 35px);
	
	
}

.shape7 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 105px; 
	width: 140px; 
	margin: 105px 0 0 70px;
	clip-path: polygon(0px 0px, 105px 0px, 140px 105px, 0px 105px);
	-webkit-clip-path: polygon(0px 0px, 35px 0px, 140px 105px, 0px 105px);
	-moz-clip-path: polygon(0px 0px, 35px 0px, 140px 105px, 0px 105px);
	
}

.shape8 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 105px; 
	width: 140px; 
	margin: 105px 0 0 -70px;
	
}

.shape9 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 105px; 
	width: 140px; 
	margin: 105px 0 0 -210px;
	clip-path: polygon(105px 0px, 140px 0px, 140px 105px, 0px 105px);
	-webkit-clip-path: polygon(105px 0px, 140px 0px, 140px 105px, 0px 105px);
	-moz-clip-path: polygon(105px 0px, 140px 0px, 140px 105px, 0px 105px);
	
}

.shape10 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 140px; 
	width: 105px; 
	margin: 70px 0 0 -210px;
	clip-path: polygon(0px 0px, 105px 0px, 105px 105px, 0px 140px);
	-webkit-clip-path: polygon(0px 0px, 105px 0px, 105px 35px, 0px 140px);
	-moz-clip-path: polygon(0px 0px, 105px 0px, 105px 35px, 0px 140px);
	
}

.shape11 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	height: 140px; 
	width: 105px; 
	margin: -70px 0 0 -210px;
	
}

.shape12 {
	/*background-image: url("images/ringGreen.jpg");*/
	top: 50%; 
	left: 50%; 
	width: 105px;
	height: 140px;  
	margin: -210px 0 0 -210px;  
	clip-path: polygon(0px 0px, 105px 105px, 105px 140px, 0px 140px);
	-webkit-clip-path: polygon(0px 0px, 105px 105px, 105px 140px, 0px 140px);
	-moz-clip-path: polygon(0px 0px, 105px 105px, 105px 140px, 0px 140px);

}


.like_dot {
	top: 50%; 
	left: 50%; 
	height: 41px; 
	width: 187px; 
	margin: -14px 0 0 -93px;
	
}

.like_dot2 {
	top: 50%; 
	left: 50%; 
	height: 41px; 
	width: 187px; 
	margin: -14px 0 0 -93px;	
}
	
	
.like_dot_wash {
 position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    right: 0;
	height: 41px; 
	width: 200px; 
	margin: -20px 0 0 -97px;
	background-position: 2px 2px;
	background-repeat:no-repeat;
	background-color:rgba(255,255,255,1);
	
}


#pinkRing {
	position: absolute;
	top: 47%; left: 50%;
	transform: translateZ(0) scale(0.8);
    width: 700px;
    height: 721px;
    margin: -350px 0 0 -350px; 
}

#pinkRing1svg {
	position: relative;
}

.pinkOff {
	opacity: .7;
	background-position: center;
	background-repeat: no-repeat;
	width: 40px;
	height: 35px;
}
.pinkOff2 {
	background-position: center;
	background-repeat: no-repeat;
}

#thumb1 {
	overflow: hidden;
	position: relative;
	width: 40px;
	top: -675px;
	left: 314px;
}
#thumb2 {
	overflow: auto;
	position: relative;
	width: 40px;
	top: -660px;
	left: 190px;
}
#thumb3 {
	position: relative;
	width: 40px;
	top: -780px;
	left: 537px;
}
#thumb4 {
	position: relative;
	width: 40px;
	top: -600px;
	left: 592px;
}
#thumb5 {
	position: relative;
	width: 40px;
	top: -270px;
	left: 556px;
}
#thumb6 {
	position: relative;
	width: 40px;
	top: -335px;
	left: 380px;
}
#thumb7 {
	position: relative;
	width: 40px;
	top: -320px;
	left: 234px;
}
#thumb8 {
	position: relative;
	width: 40px;
	top: -575px;
	left: 7px;
}
#thumb9 {
	opacity: 1;
	position: relative;
	width: 40px;
	top: -720px;
	left: 83px;
}
#thumb10 {
	position: relative;
	width: 40px;
	top: -500px;
	left: 610px;
}
#thumb11 {
	position: relative;
	width: 40px;
	top: -570px;
	left: 70px;
}
#thumb12 {
	position: relative;
	width: 40px;
	top: -730px;
	left: 570px;
}
#thumb13 {
	position: relative;
	width: 40px;
	top: -1050px;
	left: 60px;
}
#editorsObject {
	position: absolute;
	width: 250px;
	height: 60px;
	left: 85px;
	top: -16px;
}
#issue1 {
	position: absolute;
	transform: translateZ(0) scale(0.8);
	width: 15px;
	height: 92px;
	top: -150px;
	left: 364px;
}
#issue2 {
	position: absolute;
	transform: translateZ(0) scale(0.8);
	width: 15px;
	height: 92px;
	top: -150px;
	left: 470px;
}

#logoTitleDiv {
	position: absolute;
	transform: translateZ(0) scale(0.8);
	top: 34%;
	left: 50%;
	width: 420px;
	margin: 55px 0 0 -213px;
	text-align: center;
	vertical-align: central;
}
.logoTitle {
	font-family: "My Custom Font", Verdana, Tahoma;
}
#titleMain {
	font-size: 140%;
	font-weight:20;
}
.Washer {
	display: none;
	position:absolute;
	top: 0px;
}
.pinkScore {
	color: #ffc7fb;
	font-family: Verdana;
	font-size: 19px;
}
#editorsBundle {
	position: absolute;
	left:50%;
	top:45%;
	margin: 5px 0 0 -210px;
}
#editorsWash {
	position: relative;
	left: 100px;
}