/* .slides *******************************/

.slides {
	padding-top: 60px;
	position: relative;

	.slide {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
		width: 100%;

		.watermark {
			position: relative;
		}

  	.sidebar {
			width: 100%;
		}

  	.panel {
			align-items: center;
			display: flex;
			flex-direction: column;
			gap: 40px;
			justify-content: center;
			padding: 40px 20px 50px 20px;
			position: relative;
			width: 100%;

			.main {
				font-size: 1.2rem;
				line-height: 1.8rem;

	      h1 {
					color: var(--color-brand-purple);
					font-size: 1.2rem;
					font-weight: 300;
					letter-spacing: 10px;
					text-transform: uppercase;

					span {
						display: block;
						margin-bottom: 10px;
					}
				}

	      h2 {
					font-size: 2.2rem;
	        font-weight: 300;

	        span {
	          font-weight: 900;
	        }
	      }

	      h3 {
					font-size: 1.2rem;
					font-weight: 300;
					text-transform: uppercase;
	      }

	      h4 {
					color: var(--color-link);
					font-size: 1.2rem;
					font-weight: 300;
					letter-spacing: 10px;
					text-transform: uppercase;
	      }

				button {
					display: block;
					margin: 0 auto;
				}
			}

			.graphic {
				position: relative;
				width: 0%;
			}
		}
	}
}

@media (min-width: 1000px) {

	.slides {
		padding-top: 75px;

		.slide {
			flex-direction: row;

	  	.sidebar {
				min-height: 100svh;
				width: 0%;
			}

	  	.panel {
				flex-direction: row;
				gap: 80px;
				min-height: 100svh;
				padding: 80px;

				.main {

	      	h1 {

						span {
							display: inline-block;
							margin-bottom: 0;

							&::after {
								content: ':';
							}
						}
					}

	      	h2 {
						font-size: 2.5rem;
					}

					button {
						display: inline-block;
					}
				}
			}
		}
	}
}