vkko/front/scss/media-mobile.scss

@import "variables";

@media screen AND (max-width: 559px) {
	
.map {
    display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto;
    grid-gap: 50px;
    border: 1px solid $color2;
    border-radius: 10px;
	padding: 10px;
	
	.info {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;

		h2 {
			margin: 10px 0;
			font-size: 1.25rem;
		}
	}
}
	header {
		margin-bottom: 20px;
		flex-direction: column;
		padding: 13px 0;

		> .logo > .text {
			font-size: 3rem;
			color: $color-white;
		}

		> .organization,
		> .logo-art {
			display: none;
		}
	}

	main {
		padding: 0 5px;
		grid-template-columns: calc(100vw - 10px);

		.article-title {
			font-size: 2rem;
		}

		article {
			text-align: center;
			font-size: 1.2rem;
			margin-bottom: 20px;
		}

		> section {
			// margin-bottom: 20px;

			&:nth-child(1) {
				grid-row: 2/3;
			}
			&:nth-child(2) {
				grid-row: 1/2;
			}
			&:nth-child(3) {
				grid-row: 3/4;
			}
		}
	}

	.hamburger-main,
	.hamburger-top {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: $mobile-hamburger-height;
		height: $mobile-hamburger-height;
		z-index: 60;

		> .background {
			background-color: $color-black;
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100%;
			z-index: -1;
		}

		> .line {
			position: absolute;
			width: 50%;
			height: 6px;
			border-radius: $border-radius;
			background-color: $color-grey;
			transform: translateY(-50%);
			transition-property: top, left, transform, opacity, color;
			transition-duration: 250ms;

			&:nth-child(1) {
				top: 25%;
				left: 5px;
			}
			&:nth-child(2) {
				top: 25%;
				left: calc(50% - 5px);
			}
			&:nth-child(3) {
				top: 50%;
				left: 5px;
				width: calc(100% - 10px);
			}
			&:nth-child(4) {
				top: 75%;
				left: 5px;
			}
			&:nth-child(5) {
				top: 75%;
				left: calc(50% - 5px);
			}
		}

		&.open {
			> .line {
				background-color: $color-white;

				&:nth-child(1) {
					top: calc(25% + 5px);
					left: 5px;
					transform: translateY(-50%) rotateZ(45deg);
				}
				&:nth-child(2) {
					top: calc(25% + 5px);
					left: calc(50% - 5px);
					transform: translateY(-50%) rotateZ(-45deg);
				}
				&:nth-child(3) {
					opacity: 0;
				}
				&:nth-child(4) {
					top: calc(75% - 5px);
					left: 5px;
					transform: translateY(-50%) rotateZ(-45deg);
				}
				&:nth-child(5) {
					top: calc(75% - 5px);
					left: calc(50% - 5px);
					transform: translateY(-50%) rotateZ(45deg);
				}
			}
		}
	}

	.hamburger-top {
		left: unset;
		right: 0;
	}

	nav,
	.menu {
		position: fixed;
		width: 100vw;
		z-index: 250;
		top: $mobile-hamburger-height;
		bottom: 0;
		left: 0;
		overflow: auto;
		opacity: 0.95;

		transform: translateX(-100%);
		transition: transform 250ms ease-in-out;
	}
	.menu {
		.item {
			> .text {
				font-size: 1.5em;
				text-align: center;
				padding: 25px;
				display: block;
				text-decoration: none;
				color: $color-black;
			}
		}
	}
	nav {
		flex-direction: column;
		transform: translateX(100%);
		background-color: $color-white;

		.item {
			> .text {
				font-size: 1.75em;
				text-align: center;
				padding: 25px;
				display: block;
				text-decoration: none;
				color: $color-black;

				&[data-click] {
					background-color: $color-purple-900;
					color: $color-white;
					position: relative;

					&::before {
						content: "\f0a7";
						font-family: "Font Awesome 5 Free";
						font-size: 2rem;
						right: 30px;
						position: absolute;
						font-weight: 700;
						animation: touchItem 500ms linear infinite;
					}
				}
			}

			> .submenu {
				height: 0;
				overflow: hidden;
				background-color: $color-green-500;
			}

			&.open {
				background-color: $color-green-900;
				color: $color-white;
			}
		}

		&::before {
			content: none;
		}
	}

	footer {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 150px;
	}

	.hamburger-main {
		&.open {
			~ main {
				.menu {
					transform: translateX(0);
				}
			}
		}
	}

	.hamburger-top {
		&.open {
			~ nav {
				transform: translateX(0);
				background-image: linear-gradient(0deg, #fbff00, #7cff00);
				animation: navBackground 5s linear infinite;
			}
		}
	}

	.notice-container {
		.carousel {
			height: 500px;

			> .slider {
				> .slide {
					flex-direction: column;
					> .image {
						height: 40%;

						> img {
							object-fit: cover;

							&.blur {
								display: none;
							}
						}
					}

					> .content {
						height: 60%;
						padding: 15px 15px 35px 15px;
						justify-content: space-evenly;
						text-align: center;
						align-items: center;
					}

					&.expand {
						top: $mobile-hamburger-height;
						padding: 20px;
						overflow: auto;
						display: block;

						> .content {
							padding: 20px 0;
							height: auto;

							> .full-text {
								overflow: unset;
								padding: 0;
							}
						}
					}
				}
			}
		}
	}

	.news-container {
		grid-template-columns: 1fr;

		> .news {
			padding: 20px;

			> .text {
				font-size: 1rem;
			}

			> .image {
				display: none;
			}
		}
	}

	.news-pagination {
		margin-bottom: 20px;
		
		> a {
			padding: 10px 25px;
			font-size: 1.4rem;
		}
	}

	a {
		&.gradient-button {
			width: 160px;
			height: 40px;
			font-size: 1.4rem;
		}
	}

	.block {
		&.flex {
			font-size: 1.5rem;
		}

		> .icon {
			width: 80px;
		}

		.fas {
			font-size: 50px;
		}
	}
}

@media screen AND (max-width: 359px) {
	header {
		> .logo {
			> .text {
				font-size: 2rem;
			}
		}
	}
	.block {
		&.flex {
			font-size: 1.1rem;
		}
	}
}

@keyframes touchItem {
	0% {
		transform: translateY(-15px);
	}
	80% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(-15px);
	}
}