Fixes Sponsor

Author: crnacura

css/pater.css

@@ -1,11 +1,12 @@
+
 .pater {
 	position: fixed;
 	width: 320px;
 	height: auto;
 	bottom: 0;
 	left: 0;
 	padding: 1em 2em 2em 2em;
-	font-family: 'Helvetica Neue', Arial, sans-serif;
+	font-family: 'Helvetica', Arial, sans-serif;
 	color: #000;
 	font-size: 0.85em;
 	pointer-events: none;
@@ -28,6 +29,7 @@
 	z-index: 10;
 	padding: 10px 0 8px 52px;
 	cursor: default;
+	color: #262628;
 	background: url(../img/sponsor/webydo-logo.png) no-repeat 0% 50%;
 	-webkit-transform: translateY(40px);
 	transform: translateY(40px);
@@ -56,7 +58,7 @@
 
 .pater__description {
 	line-height: 1.2;
-	color: #717070;
+	color: #747474;
 	cursor: default;
 }
 
@@ -66,20 +68,22 @@
 	display: block;
 	z-index: 10;
 	cursor: default;
-	-webkit-transform: translate3d(0,-45px,0);
-	transform: translate3d(0,-45px,0);
-	-webkit-transition: -webkit-transform 0.3s;
-	transition: transform 0.3s;
+	color: #262628;
+	-webkit-transform: translate3d(139px,0px,0);
+	transform: translate3d(139px,0px,0);
+	-webkit-transition: -webkit-transform 0.3s, color 0.3s;
+	transition: transform 0.3s, color 0.3s;
 }
 
 .pater:hover .pater__sponsor {
+	color: #262628;
 	-webkit-transform: translate3d(0,0,0);
 	transform: translate3d(0,0,0);
 }
 
 .pater__button {
-	background: #f9cf21;
-	color: #000;
+	background: #fec841;
+	color: #262628;
 	cursor: pointer;
 	padding: 0.65em 1.25em;
 	border-radius: 1.5em;
@@ -89,7 +93,6 @@
 	top: 100%;
 	margin: 0.5em 0 0;
 	z-index: 100;
-	font-weight: bold;
 	line-height: 1;
 	-webkit-transition: background-color 0.2s, color 0.2s;
 	transition: background-color 0.2s, color 0.2s;
@@ -119,21 +122,26 @@
 }
 
 .pater__effect img:nth-child(2) {
-	margin: 2em 0 0 -4em;
+	margin: 4em 0 0 -3em;
 }
 
 .pater__effect img:nth-child(3) {
-	margin: -3.85em 0 0 3em;
+	margin: -7em 0 0 0.5em;
+}
+
+.pater:hover .pater__effect img:nth-child(1) {
+	-webkit-transform: translate3d(0,-110px,0);
+	transform:  translate3d(0,-110px,0);
 }
 
-.pater:hover .pater__effect img:nth-child(-n+3) {
-	-webkit-transform: translateY(-80px);
-	transform: translateY(-80px);
+.pater:hover .pater__effect img:nth-child(2) {
+	-webkit-transform: translate3d(0,-130px,0);
+	transform: translate3d(0,-130px,0);
 }
 
 .pater:hover .pater__effect img:nth-child(3) {
-	-webkit-transform: translateY(53px);
-	transform: translateY(53px);
+	-webkit-transform: translateY(55px);
+	transform: translateY(55px);
 }
 
 .pater-responsive {

index.html

@@ -196,15 +196,15 @@ <h3 class="content__title">Better World</h3>
 				</div><!-- /content -->
 			</div><!-- /calendar-wrap -->
 			<div class="pater">
-				<h3 class="pater__title">Design and development,<br/>all-in-one:</h3>
+				<h3 class="pater__title">Design &amp; Development,<br/>All-In-One</h3>
 				<div class="pater__hidden">
-					<p class="pater__description">Design just as you would in Photoshop while Webydo generates clean, semantic code optimized for SEO to help clients rank in search results.</p>
+					<p class="pater__description">Design as you would in Photoshop while Webydo generates clean code, optimized for SEO.</p>
 					<a href="https://goo.gl/Z3wbtl" class="pater__button">Try It Now</a>
 				</div>
-				<span class="pater__sponsor">Sponsored by <strong>Webydo</strong></span>
+				<span class="pater__sponsor">Sponsored by <strong>Webydo</strong>.</span>
 				<div class="pater__effect">
-					<img src="img/sponsor/ipad1.png" alt="Ipad">
 					<img src="img/sponsor/ipad2.png" alt="Ipad">
+					<img src="img/sponsor/ipad1.png" alt="Ipad">
 					<img src="img/sponsor/ipad3.png" alt="Ipad">
 				</div>
 			</div>

index2.html

@@ -196,15 +196,15 @@ <h3 class="content__title">Better World</h3>
 				</div><!-- /content -->
 			</div>
 			<div class="pater">
-				<h3 class="pater__title">Design and development,<br/>all-in-one:</h3>
+				<h3 class="pater__title">Design &amp; Development,<br/>All-In-One</h3>
 				<div class="pater__hidden">
-					<p class="pater__description">Design just as you would in Photoshop while Webydo generates clean, semantic code optimized for SEO to help clients rank in search results.</p>
+					<p class="pater__description">Design as you would in Photoshop while Webydo generates clean code, optimized for SEO.</p>
 					<a href="https://goo.gl/Z3wbtl" class="pater__button">Try It Now</a>
 				</div>
-				<span class="pater__sponsor">Sponsored by <strong>Webydo</strong></span>
+				<span class="pater__sponsor">Sponsored by <strong>Webydo</strong>.</span>
 				<div class="pater__effect">
-					<img src="img/sponsor/ipad1.png" alt="Ipad">
 					<img src="img/sponsor/ipad2.png" alt="Ipad">
+					<img src="img/sponsor/ipad1.png" alt="Ipad">
 					<img src="img/sponsor/ipad3.png" alt="Ipad">
 				</div>
 			</div>