digital-theory/repl/src/assets/styles/responsive_small.scss

/**
responsive land custom
 */


@media all and (max-width: 600px) {
	main {
		img {
			max-width: 95vw;
		}
	}
	.column {
		padding-left: 1rem;
	}
	.burger-menu > span:nth-of-type(2),
	.circle-right,
	.circle-left,
	.arrow-left,
	.arrow-right {
		display: none;
	}

	#cover {
		.button {
			top: 10rem;
			width: 7rem;
			height: 7rem;
		}

		#main_title_container {
			.title-container {
				margin-top: 5rem;
			}
		}
	}

	#open {
		img, #unlock, #unlock_white {
			height: 120px;
		}

		#unlock_white {
			margin-top: -34rem;
		}
	}

	#transactionnal_webdesign .title,
	#content_first,
	#for_all_your {
		font-size: 2rem;
		margin-bottom: 1rem;
	}
	#content_all .text,
	.container-text-md {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#welcome h2 {
		font-size: 4rem;
		line-height: 1em;
	}

	#content_all .columns {
		max-width: 100vw;
		margin-left: 0;
		padding-left: 0;
	}
	#content-2 {
		margin-top: 0;
		padding-top: 0;
	}
	#popover {
		margin-top: 132vw;
	}

	/**
	flipping part
	 */

	#flipping_zone {
		margin-top: 0;
		position: static;


		.flip-container {
			position: relative;
			height: 1300px;

			.flip-handle {
				height: 10vh;
			}

			+ .flip-container {
				margin-top: 0;
			}

			.container-text {
				width: 100%;
				margin: 0;
				top: 0;
				padding-left: 7vw;
				min-height: 25rem;
			}

			.text-description {
				width: 100%;
			}

			.container-text {
				z-index: 1;
				left: 1rem;
			}

			.text-title {
				margin-top: 0;
			}

			.phone-container {
				margin: 2rem auto;
				margin-left: auto;
				position: static;
				width: 335px;
				margin-left: 9.5vw;
			}

			&.flip-from-left {
				.container-text {
					left: 1rem;
					margin-left: 0;
				}

				.phone-container {
					left: 1rem;
					top: 2rem;
					margin: 0 auto;
					padding: 0;
				}
			}
		}
	}
	#popover, #portfolio {
		margin-top: 0;
		height: 1500px;
	}
	.slider-screen {
		.phone-container {
			left: 2vw;
			width: 95vw;
		}

		.text {
			left: 7vw;
			position: relative;
			text-align: left;
			top: 19rem;
			width: 90vw;
		}
	}
	#transactionnal_webdesign {
		min-height: 1600px;

		.columns {
			max-width: 85vw;
		}

		.description {
			font-size: 5rem !important;
			padding-top: 4rem;
		}

		.sub-title {
			font-weight: 600;
			font-size: 5rem;
			text-shadow: 0 0 1rem #333;
			line-height: 4rem;
			letter-spacing: 0;
		}

		.second {
			text-shadow: 0 0 1rem #fff;
		}

	}


	#carry {
		.description {
			margin-top: 3vh;
			font-size: 5rem;
			text-shadow: 0 0 1rem #ccc;
		}

		.computer-block {
			margin-top: -11rem;
			width: 97vw;
		}

		.bubbles {
			margin-top: 0;

			p {
				&:nth-of-type(1) {
					left: -19%;
					top: -89rem;
				}

				&:nth-of-type(2) {
					left: 36%;
					top: -112rem;
				}

				&:nth-of-type(3) {
					left: -10vw;
				}

				&:nth-of-type(4) {
					height: 322px;
				}
			}
		}

		.gradient-bg {
			width: 96vw;
			height: 58vh;
			left: 0;
			top: -41rem;
		}

		.gradient-bg-yellow {
			width: 96vw;
			height: 58vh;
			left: 0;
			top: -10rem;
		}
	}


	#kyc {
		.description2 {
			font-size: 3rem;
			padding: 0 1rem;
		}

		.title {
			font-size: 5rem;
			line-height: 1em;
		}

		.bubbles {
			.bubble {
				span {
					margin-left: 0;
				}

				&:nth-of-type(1) {
					left: 1rem;
					top: -7rem;
				}

				&:nth-of-type(2) {
					margin-left: -6rem;
				}

				&:nth-of-type(3) {
					left: 0;
					top: 0;
				}
			}

			margin-top: -200vw;
		}
	}


	#china {
		height: 90rem;
		padding: 1rem;

		.top {
			font-size: 3rem;
			margin-bottom: 1rem;
		}

		.cols {
			.columns {
				text-align: center;
				display: block;
				padding: 0px;
				padding-right: 0px;
				margin-top: 1rem;
				padding-right: 1rem;
			}
		}
	}


}