diff --git a/.gitignore b/.gitignore
index 427305a..824c733 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,5 +2,7 @@
 # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
 # Useful .gitignore templates: https://github.com/github/gitignore
 node_modules
+.nvm
+~/.nvm
 dist
-.cache
\ No newline at end of file
+.cache
diff --git a/css/sprint_4.css b/css/sprint_4.css
index f7447de..f0a6d84 100644
--- a/css/sprint_4.css
+++ b/css/sprint_4.css
@@ -2796,7 +2796,27 @@ fieldset[disabled] .button {
 	margin-left: 0.25rem;
 	margin-right: 0.25rem;
 }
+@media screen and (max-width: 416px) {
+
+	.nav-main p {
+		padding-left: 30vw;
+	}
+}
+@media screen and (max-height: 800px) {
+
+	#main_title {
+		top: 160px;
+	}
+}
 @media screen and (max-width: 768px) {
+
+	.nav-main p{
+		padding-left: 10vw;
+	}
+	#unlock,
+	#unlock_white img{
+		height: 10rem;
+	}
 	.button.is-responsive.is-small {
 		font-size: 0.5625rem;
 	}
@@ -2813,6 +2833,10 @@ fieldset[disabled] .button {
 	.button.is-responsive.is-large {
 		font-size: 1rem;
 	}
+
+	#content_all h2, #welcome h2{
+		font-size: 4em;
+	}
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
 	.button.is-responsive.is-small {
@@ -12360,7 +12384,7 @@ main nav {
 }
 #unlock_white{
 	opacity: 0;
-	margin-top: -471.9px;
+	margin-top: -4em;
 }
 #open-handle {
 	float: left;
@@ -12728,6 +12752,7 @@ main nav {
 		text-align: left;
 	}
 
+
 	#content_all .columns {
 		top: -145vh;
 		width: 55vw;
@@ -12810,6 +12835,12 @@ main nav {
 	.slider-screen {
 		min-height: 100vh;
 	}
+	#popover, #portfolio {
+		min-height: 200vh;
+	}
+	#popover .phone-container, #portfolio .phone-container{
+		width: 50vw;
+	}
 
 }
 @media screen and (max-width: 35em) {
diff --git a/js/animations_custom.js b/js/animations_custom.js
index 4e68a4d..f8285ff 100644
--- a/js/animations_custom.js
+++ b/js/animations_custom.js
@@ -10,7 +10,7 @@ let enable_animations = false
 enable_animations = true
 
 const rotateYCard = '200deg'
-const offsetCard = '-100px'
+const offsetCard = '-=100'
 
 function animateCard (id, side) {
 
@@ -94,15 +94,15 @@ if (enable_animations) {
 		},
 		keyframes: [
 			{
-				top: '500',
+				top: '-=50',
 				width: '100vw',
 			},
 			{
-				top: '200',
-				// width: "-=20vw",
+				top: '-=50',
+				width: "-=5vw",
 			},
 			{
-				top: '-100',
+				top: '-=100',
 				width: '-=40vw',
 			}]
 	})
@@ -234,7 +234,7 @@ if (enable_animations) {
 	gsap.fromTo('#content_all_img',
 		{
 			scale: 1,
-			left: -100
+			left: "-=100"
 		},
 		{
 			scale: 1.1,
@@ -252,15 +252,15 @@ if (enable_animations) {
 		{
 			opacity: 0.5,
 			scale: 1,
-			bottom: '-100vh',
-			height: '22rem',
+			bottom: '-=100vh',
+			height: '10rem',
 		},
 		{
 			opacity: 1,
 			bottom: '50vh',
 			scale: 1.5,
 			ease: 'spline',
-			height: '25rem',
+			height: '11rem',
 			scrollTrigger: {
 				trigger: '#open-handle',
 				scrub: 2,