From 6f0186dd0fb58def4b6435e433640caf48764bb2 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 21 Jun 2023 10:27:27 +0200
Subject: [PATCH] rearrange many breakpoints

---
 css/sprint_4.css | 533 +++++++++++++++++++++++++----------------------
 1 file changed, 289 insertions(+), 244 deletions(-)

diff --git a/css/sprint_4.css b/css/sprint_4.css
index cd14de0..17460ff 100644
--- a/css/sprint_4.css
+++ b/css/sprint_4.css
@@ -12685,7 +12685,7 @@ main nav {
 	color: white;
 	text-shadow: 0 0 1em black;
 	height: 50vh;
-	margin-top: 5vh;
+	margin-top: 10vw;
 	padding-top: 50vh;
 }
 @media screen and (max-width: 1023px) {
@@ -12728,7 +12728,7 @@ main nav {
 	flipping part
 	 */
 	#flipping_zone {
-		margin-top: -120vh;
+		margin-top: -100vh;
 		position: static;
 	}
 	.flip-container {
@@ -12736,7 +12736,7 @@ main nav {
 	}
 
 	.flip-container + .flip-container {
-		margin-top: -5vh;
+		margin-top: 40vh;
 	}
 	.flip-container .container-text {
 		z-index: 1;
@@ -12769,6 +12769,9 @@ main nav {
 	#popover {
 		margin-top: 100vh;
 	}
+	#popover .phone-container, #portfolio .phone-container {
+		width: 39vw;
+	}
 	/**
 	exemples sliders
 	 */
@@ -12880,6 +12883,7 @@ main img {
 }
 main .credits {
 	margin-top: 10vh;
+	padding-bottom: 10vh;
 }
 #sprint_4 {
 	background: #fff;
@@ -12949,18 +12953,6 @@ main .credits {
 	font-size: 1.5rem;
 	line-height: 130%;
 }
-@media screen and (max-width: 1300px) {
-	#transactionnal_webdesign {
-		min-height: 100vh;
-		padding-top: 5vh;
-	}
-	#transactionnal_webdesign .title {
-		font-size: 4rem;
-	}
-	#transactionnal_webdesign .description {
-		font-size: 10rem !important;
-	}
-}
 #carry {
 	position: static;
 	background: white;
@@ -13063,92 +13055,8 @@ main .credits {
 	left: 0;
 	top: -97em;
 }
-@media all and (max-width: 1600px) {
-	section#carry {
-		min-height: 120rem;
-	}
-	section#carry .description {
-		margin-top: 3vh;
-		font-size: 8rem;
-	}
-	section#carry .gradient-bg {
-		top: -40rem;
-	}
-	section#carry .gradient-bg-yellow {
-		top: 10rem;
-	}
-	section#carry .computer-block {
-		width: 70%;
-		height: 1080px;
-		left: 0;
-		top: -110em;
-		background-size: contain;
-		margin: 0 auto;
-	}
-	section#carry .bubbles {
-		position: relative;
-		left: -5vw;
-	}
-	section#carry .bubbles p :nth-of-type(1) {
-		top: -75vh;
-	}
-	section#carry .bubbles p :nth-of-type(2) {
-		left: 70%;
-	}
-	section#carry .bubbles p :nth-of-type(3) {
-		left: 50%;
-	}
-	section#carry .bubbles p :nth-of-type(4) {
-		left: 10%;
-	}
-}
-@media all and (max-width: 1100px) {
-	section#carry {
-		padding-left: 10vw;
-		padding-right: 10vw;
-		min-height: 115rem;
-	}
-	section#carry .title {
-		font-size: 4rem;
-	}
-	section#carry .description {
-		margin-top: 3vh;
-		font-size: 10rem;
-	}
-	section#carry .computer-block {
-		background-size: contain;
-		position: relative;
-		height: 100vh;
-		width: 100%;
-		margin-top: -15rem;
-	}
-	section#carry .gradient-bg {
-		margin-top: 0;
-	}
-	section#carry .gradient-bg-yellow {
-		margin-top: 0;
-	}
-	section#carry .bubbles {
-		position: static;
-	}
-	section#carry .bubbles p  {
-		margin-top: 2rem;
-		left: 0;
-	}
-	section#carry .bubbles p :nth-of-type(1) {
-		left: 10%;
-	}
-	section#carry .bubbles p :nth-of-type(2) {
-		left: 70%;
-	}
-	section#carry .bubbles p :nth-of-type(3) {
-		left: 4vw;
-		margin-left: -60%;
-	}
-	section#carry .bubbles p :nth-of-type(4) {
-		left: -10%;
-	}
-}
+
+
 #kyc {
 	font-family: "GT Walsheim Pro";
 	background: white;
@@ -13327,7 +13235,7 @@ main .credits {
 }
 #china {
 	background-color: #141373;
-	height: 1060px;
+	height: 100vh;
 	width: 100vw;
 	padding-bottom: 20rem;
 	border-radius: 5rem;
@@ -13567,36 +13475,6 @@ main .credits {
 #we_develop .rotated {
 	transform: rotate(180deg);
 }
-@media all and (max-width: 1500px) {
-	#we_develop .circle.circle-right {
-		right: 10vw;
-	}
-	#we_develop .circle.circle-left {
-		right: 90vw;
-	}
-	#we_develop .quick {
-		left: 3rem;
-		top: 77rem;
-	}
-	#we_develop .long_term {
-		margin-right: 5rem;
-	}
-	#we_develop .data {
-		text-align: left;
-		padding-left: 6rem;
-		margin-top: 2rem;
-	}
-	#we_develop .ar {
-		text-align: right;
-		padding-right: 6rem;
-		margin-top: 3rem;
-	}
-}
-@media all and (max-width: 1100px) {
-	#we_develop .ar {
-		margin-top: -3rem;
-	}
-}
 #full_creative {
 	background: white;
 	min-height: 120vh;
@@ -13637,26 +13515,8 @@ main .credits {
 #full_creative img {
 	max-width: 80vw;
 }
-@media all and (max-width: 1500px) {
-	#full_creative {
-		padding-bottom: 20rem;
-	}
-	#full_creative .title {
-		padding: 2rem;
-	}
-	#full_creative .column {
-		padding: 2rem;
-	}
-	#full_creative .column p {
-		font-size: 1.5rem;
-	}
-	#full_creative .column, #full_creative .columns {
-		display: block;
-	}
-	#full_creative img {
-		margin-bottom: 15rem;
-	}
-}
+
+
 #our_team {
 	background: white;
 	padding-top: 5rem;
@@ -13696,26 +13556,8 @@ main .credits {
 	padding: 0 2em;
 	background: white;
 }
-@media screen and (max-width: 1500px) {
-	#our_team {
-		margin-top: 30rem;
-		padding-bottom: 20rem;
-	}
-	#our_team img {
-		max-width: 100%;
-		margin: 0 auto;
-	}
-	#our_team .columns, #our_team .colmumn {
-		display: block;
-		position: static;
-	}
-	#our_team .name {
-		font-size: 1.5rem;
-	}
-	#our_team .sub-category {
-		margin-bottom: 10rem;
-	}
-}
+
+
 #china_achievements {
 	margin-top: 30rem;
 	background: white;
@@ -13747,35 +13589,6 @@ main .credits {
 #china_achievements .offset-left-columns {
 	margin-left: -10rem;
 }
-@media screen and (max-width: 1500px) {
-	#china_achievements {
-		margin-top: 895vw;
-	}
-	#china_achievements p {
-		font-size: 2rem;
-	}
-	#china_achievements .column, #china_achievements .columns {
-		position: static;
-		display: block;
-	}
-	#china_achievements .offset-left-columns {
-		margin-left: 0;
-	}
-	#china_achievements .text-description {
-		font-size: 2rem;
-	}
-	#china_achievements .big-number {
-		font-size: 10rem;
-		text-align: center;
-	}
-	#china_achievements .picture {
-		margin-left: 0;
-		width: 100%;
-	}
-	#china_achievements .title {
-		width: 100%;
-	}
-}
 #baozun_group {
 	margin-top: 150px;
 	background: url("/img/baozun.jpg") no-repeat;
@@ -13792,16 +13605,6 @@ main .credits {
 	letter-spacing: -0.04em;
 	padding-top: 464px;
 }
-@media screen and (max-width: 1500px) {
-	#baozun_group {
-		margin-top: 605vw;
-	}
-}
-@media screen and (max-width: 1200px) {
-	#baozun_group {
-		margin-top: 650vw;
-	}
-}
 
 
 .counter-block .big-number {
@@ -13828,9 +13631,52 @@ main .credits {
 
 
 /**
-smaller screen
+responsive land
  */
-@media screen and (min-width: 1024px) {
+
+
+
+@media screen and (max-width: 950px) {
+
+	#baozun_group , #coming_soon, .credits{
+		margin: 0 0;
+		position: relative;
+		top: 900vw;
+	}
+}
+@media screen and (max-width: 900px) {
+
+	#unlock,
+	#unlock_white img{
+		height: 10rem;
+	}
+	.button.is-responsive.is-small {
+		font-size: 0.5625rem;
+	}
+
+	.button.is-responsive,
+	.button.is-responsive.is-normal {
+		font-size: 0.65625rem;
+	}
+
+	.button.is-responsive.is-medium {
+		font-size: 0.75rem;
+	}
+
+	.button.is-responsive.is-large {
+		font-size: 1rem;
+	}
+
+	#content_all h2, #welcome h2{
+		font-size: 4em;
+	}
+}
+
+
+@media all and (max-width: 1100px) {
+	#we_develop .ar {
+		margin-top: -3rem;
+	}
 	.section {
 		padding: 3rem 3rem;
 	}
@@ -13842,6 +13688,220 @@ smaller screen
 	.section.is-large {
 		padding: 18rem 6rem;
 	}
+
+	section#carry {
+		padding-left: 10vw;
+		padding-right: 10vw;
+		min-height: 115rem;
+		margin-top: 15vh;
+	}
+	section#carry .title {
+		font-size: 4rem;
+	}
+	section#carry .description {
+		margin-top: 3vh;
+		font-size: 10rem;
+	}
+	section#carry .computer-block {
+		background-size: contain;
+		position: relative;
+		height: 100vh;
+		width: 100%;
+		margin-top: 50vh;
+	}
+	section#carry .gradient-bg {
+		margin-top: 0;
+	}
+	section#carry .gradient-bg-yellow {
+		margin-top: 0;
+	}
+	section#carry .bubbles {
+		position: static;
+	}
+	section#carry .bubbles p  {
+		margin-top: 2rem;
+		left: 0;
+	}
+	section#carry .bubbles p :nth-of-type(1) {
+		left: 10%;
+	}
+	section#carry .bubbles p :nth-of-type(2) {
+		left: 70%;
+	}
+	section#carry .bubbles p :nth-of-type(3) {
+		left: 4vw;
+		margin-left: -60%;
+	}
+	section#carry .bubbles p :nth-of-type(4) {
+		left: -10%;
+		top: -100vh;
+	}
+	#popover , #portfolio{
+		height: 120vw;
+	}
+	#popover .phone-container, #portfolio .phone-container {
+	width: 410px;
+	left: 15vw;
+	}
+	#kyc .bubbles{
+		margin-top: -100vw;
+	}
+}
+@media screen and (max-width: 1200px) {
+	#baozun_group {
+		margin-top: 650vw;
+	}
+}
+
+@media screen and (max-width: 1300px) {
+	#transactionnal_webdesign {
+		min-height: 100vh;
+		padding-top: 5vh;
+	}
+	#transactionnal_webdesign .title {
+		font-size: 4rem;
+	}
+	#transactionnal_webdesign .description {
+		font-size: 9rem;
+	}
+}
+
+
+@media all and (max-width: 1500px) {
+	#we_develop .circle.circle-right {
+		right: 10vw;
+	}
+	#we_develop .circle.circle-left {
+		right: 90vw;
+	}
+	#we_develop .quick {
+		left: 3rem;
+		top: 77rem;
+	}
+	#we_develop .long_term {
+		margin-right: 5rem;
+	}
+	#we_develop .data {
+		text-align: left;
+		padding-left: 6rem;
+		margin-top: 2rem;
+	}
+	#we_develop .ar {
+		text-align: right;
+		padding-right: 6rem;
+		margin-top: 3rem;
+	}
+	#full_creative {
+		padding-bottom: 20rem;
+	}
+	#full_creative .title {
+		padding: 2rem;
+	}
+	#full_creative .column {
+		padding: 2rem;
+	}
+	#full_creative .column p {
+		font-size: 1.5rem;
+	}
+	#full_creative .column, #full_creative .columns {
+		display: block;
+	}
+	#full_creative img {
+		margin-bottom: 15rem;
+	}
+
+	#our_team {
+		margin-top: 70vw;
+		padding-bottom: 20rem;
+	}
+	#our_team img {
+		max-width: 100%;
+		margin: 0 auto;
+	}
+	#our_team .columns, #our_team .colmumn {
+		display: block;
+		position: static;
+	}
+	#our_team .name {
+		font-size: 1.5rem;
+	}
+	#our_team .sub-category {
+		margin-bottom: 10rem;
+	}
+	#china_achievements {
+		margin-top: 895vw;
+	}
+	#china_achievements p {
+		font-size: 2rem;
+	}
+	#china_achievements .column, #china_achievements .columns {
+		position: static;
+		display: block;
+	}
+	#china_achievements .offset-left-columns {
+		margin-left: 0;
+	}
+	#china_achievements .text-description {
+		font-size: 2rem;
+	}
+	#china_achievements .big-number {
+		font-size: 10rem;
+		text-align: center;
+	}
+	#china_achievements .picture {
+		margin-left: 0;
+		width: 100%;
+	}
+	#china_achievements .title {
+		width: 100%;
+	}
+	#baozun_group , #coming_soon, .credits{
+		margin: 0 0;
+		position: relative;
+		top: 700vw;
+	}
+}
+
+@media all and (max-width: 1600px) {
+	section#carry {
+		min-height: 120rem;
+	}
+	section#carry .description {
+		margin-top: 3vh;
+		font-size: 8rem;
+	}
+	section#carry .gradient-bg {
+		top: -40rem;
+	}
+	section#carry .gradient-bg-yellow {
+		top: 10rem;
+	}
+	section#carry .computer-block {
+		width: 100%;
+		height: 1080px;
+		left: 0;
+		top: -154vw;
+		background-size: contain;
+		margin: 0 auto;
+	}
+	section#carry .bubbles {
+		position: relative;
+		left: -5vw;
+	}
+	section#carry .bubbles p :nth-of-type(1) {
+		top: -75vh;
+	}
+	section#carry .bubbles p :nth-of-type(2) {
+		left: 70%;
+	}
+	section#carry .bubbles p :nth-of-type(3) {
+		left: 20%;
+		top: -200vw;
+	}
+	section#carry .bubbles p :nth-of-type(4) {
+		left: 10%;
+		top: -319vw;
+	}
 }
 
 @media screen and (max-width: 500px) {
@@ -13859,7 +13919,7 @@ smaller screen
 		max-width: 100vw;
 	}
 	.flip-container + .flip-container {
-		margin-top: 37vh;
+		margin-top: 40vh !important;
 	}
 	#transactionnal_webdesign .title {
 		font-size: 2rem;
@@ -13950,43 +14010,28 @@ smaller screen
 		line-height: 7rem;
 	}
 	#our_team .sub-category {
-		 margin-bottom: 10rem;
-		 padding-left: 0rem;
-	 }
+		margin-bottom: 10rem;
+		padding-left: 0rem;
+	}
 	#china_achievements{
 		padding: 1rem;
+		margin-top: 950vw;
 	}
+	#china_achievements .big-number {
+		font-size: 8rem;
+	}
+
 	#baozun_group {
 		margin-top: 1126vw;
 	}
 	#baozun_group .title {
 		padding-top: 25vh;
 	}
-}
-@media screen and (max-width: 768px) {
-
-	#unlock,
-	#unlock_white img{
-		height: 10rem;
-	}
-	.button.is-responsive.is-small {
-		font-size: 0.5625rem;
-	}
-
-	.button.is-responsive,
-	.button.is-responsive.is-normal {
-		font-size: 0.65625rem;
-	}
-
-	.button.is-responsive.is-medium {
-		font-size: 0.75rem;
-	}
-
-	.button.is-responsive.is-large {
-		font-size: 1rem;
-	}
-
-	#content_all h2, #welcome h2{
-		font-size: 4em;
-	}
+
+	#baozun_group , #coming_soon, .credits{
+		margin: 0 0;
+		position: relative;
+		top: 1200vw;
+	}
+
 }