@media screen and (min-width: 2000px) {
	html {
	  font-size: 95%; /* 18px (112.5% of 16px) */
	}
	section.full.dark {
	  #feature-list {
		  max-width: 110rem;
		  margin: 0 auto;
	  }
	  h2{
		  max-width: 110rem;
		  margin: 0 auto var(--space--m-l);
	  }
  }
}/*/mediaquery*/

@media screen and (max-width: 2000px) {
	html {
	  font-size: 85%;
	}
	#mission-block {
		  display:grid;
		  grid-template-columns: 1fr 1fr 1fr 1fr;
	  }
}

@media screen and (max-width: 1460px) {
	footer .main-footer{
		grid-template-columns: min-content auto 28rem 12rem;
	}
	footer form label{
		display: none;
	}
}

  @media screen and (max-width: 1000px) {
	footer form{
		display:block;
		width: 100%;
		height: auto;

		input{
			width: 100%;
		}
		button{
			width:100%;
			margin-left: 0;
			margin-top: var(--space--m);
		}
	}
	footer .message p{
		margin-bottom: var(--space--l);
	}

	#section-top h1{
		  font-size: 8rem;
		  line-height: 6.5rem;

		  &.dropdown{
			font-size: var(--font-size--3xl);
			line-height: 4.5rem;
		  }
	  }
	  
	section.full.dark #feature-list{
		 grid-template-columns: 1fr;
		 text-align:center;

		 h3{
			text-align:center;
		 }
		 
		 ul{
			 margin-bottom: var(--space--3xl);
			 
			 li{
				 font-size: var(--font-size--m);
				 text-align:center;
				 max-width:90%;
				 margin: 0 auto 1.75rem;
			 }
			 &:last-child{
				margin-bottom: 0;
			 }
		 }
	}
	
	section {
		&.full {
			&.dark {
				padding: var(--space--3xl);
			}
			&.referral{
				display: none;
				padding: var(--space--3xl);	
				p{
					padding-right: 0rem;
					margin: 0 0 var(--space--xl);
					font-size: var(--font-size--m);
				}
				form{
					margin-top: 0;
				}
				&.visible{
					display:block;
				}
			}
		}
	}
	
	.example-wrapper{
		&.right, &.left  {
			grid-template-columns: 1fr;
		}
		&.right .example{
			padding: 0 var(--space--3xl) var(--space--3xl);
		}
		&.left .example {
			padding: var(--space--3xl) var(--space--3xl) 0;
		}

		&.right .text-block {
			padding: var(--space--3xl) var(--space--3xl) var(--space--m);
		}

		.text-block {
			padding: var(--space--3xl);
			max-width: none;
		}
		&.split {
			grid-template-columns: 1fr;
			
			.text-block.type{
				padding-bottom: 0;
			}
		}
	}
	
	section.center .example {
		padding: var(--space--3xl) 0 0;
		max-width: none;
	}
	
	
	section.full #testimonials ul {
		grid-template-columns: 1fr;
		row-gap: var(--space--xl);
	}
	
	section.full #testimonials, section.full #team {
		padding: var(--space--xl) 0;
		
		ul {
			display: flex;
			overflow-x: auto;
			overflow-y: hidden;
			gap: var(--space--xl); /* Adjust spacing between items as needed */
			padding: var(--space--m) var(--space--3xl) var(--space--m);
			margin-top: var(--space--xs);
			
			/* Optional: smooth scrolling */
			scroll-behavior: smooth;
			
			/* Optional: hide scrollbar but keep functionality */
			-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
		
			li {
				flex: 0 0 auto; /* Don't grow, don't shrink, stay at natural size */
				width: 80vw; /* Adjust width as needed - 80% of viewport width */
				max-width: 400px; /* Optional: set a max width */
				min-width: 280px; /* Optional: set a min width */
			}
		}
		
		/* Optional: Hide scrollbar while keeping scroll functionality */
		
		ul::-webkit-scrollbar {
			display: none;
		}
		
		ul {
			-ms-overflow-style: none;  /* IE and Edge */
			scrollbar-width: none;  /* Firefox */
		}	
	}
	
	#section-top.team h2{
		font-size: var(--font-size--l);
		line-height: 2.25rem;
	} 
	
	section.full.section-chart ul.chart-row li{
		font-size: var(--font-size--s);
	}
	section.full.section-chart ul.chart-row li.company{
		text-align:center;
		padding-left: 0;
	}
	
	section.full.section-chart{
		padding: var(--space--m) 0 var(--space--m);
	}
	
	section.full.section-chart div.chart-intro {
		grid-template-columns: 1fr;
		padding: 0 var(--space--3xl);
	}
	
	.note{
		padding-right: var(--space--m);
	}
	
	#section-top.team p.harvest, #section-top.team p.go-ahead.caption{
		padding: 0 var(--space--3xl);
	}
	
	#mission-block {
		display:block;
	}
	
	section#section-color p, section#section-type p, section#section-payments p{
		font-size: 1.375rem;
	}
	
	section#section-color h1, section#section-type h1{
		font-size: 3.5rem;
		text-align:center;
	}
	
	section#section-color h2, section#section-type h2{
		text-align:center;
		font-size: var(--font-size--m);
		line-height: 1.25rem;
	}
	
	section#section-payments{
		padding: var(--space--3xl) 0 0;
	}
	section#section-payments header{
		padding: 0 var(--space--3xl);
	}
	
	#payments{
		width: 100vw;
		overflow-x: auto;
		overflow-y: hidden;
		padding-left: 0;
	}
	
	#payments-sidebar-wrapper{
		width: 300vw;
		padding: 0 var(--space--3xl);
	}
	section.full.testimonials.team #team {
		ul{
			margin-top: var(--space--l);
		}
		header, header+p{
			max-width: 100%;
		}
		header+p{
			margin-bottom: 0rem;
		}
	}
	
}/*/mediaquery*/

@media screen and (max-width: 1000px) {
	html {
	  font-size: 75%;
	}
}

@media screen and (max-width: 767px){
  html {
	font-size: 65%; /* 14px (87.5% of 16px) */
	  }
	  section{
		padding: var(--space--3xl);
	}
	
	h1{
		text-align:center;
	}
	section.full h1 {
		font-size: var(--font-size--2xl);
		line-height: .9;
		max-width: 100%;
		margin: 0 auto var(--space--m);
	}
	
	#who-for svg.logotype2 {
	width: 15rem;
	margin-top: var(--space--xs);
	}
	
	footer form {
		display:grid;
		grid-template-columns: 1fr;
		row-gap: var(--space--m);
		text-align:center;
		height: inherit;
		margin-bottom: var(--space--xl);
		
		label{
			font-size: var(--font-size--m);
		}
		
		button{
			margin-left: 0;
		}
	}
	
	#section-color{
		display: block;
	}
	
	#section-top{
		display: block;
		position:relative;
		overflow:hidden;
		
		h1{
			font-size: 6.5rem;
			line-height: 5.5rem;
		}
		
		h2{
			font-size: 2.25rem;
			line-height: 2.75rem;
			text-align:center;
		}
		
		.example {
			position: absolute;
			top: -10rem;
			z-index: -1;
			width: 100%;
			border-left: 0;
			height: 75rem;
			
			img{
				opacity: .15;
			}
			
			.photo-overlay{
				background-color: var(--color--main--medium);
				opacity: .7;
			}
			
			.photo-overlay2{
				background-color: var(--color--main--medium);
				opacity: .6;
			}
		}
		
		.text-left{
			padding: var(--space--4xl) var(--space--3xl) var(--space--4xl);
		}

		.text-block{
			padding: var(--space--xs) var(--space--3xl);
		}
	}
	
	#section-color-wrapper{
		display:block;
	}
	
	.type-wrapper{
		display: block;
		padding: var(--space--3xl) 0 0;
	}
	
	ul{
		&.font-samples {
			margin-right: 0rem;
		}
		&#templates{
			width: 400%;
			margin-left:-2rem;
		}
	}
	
	#section-color .example{
		display:none;
	}
	
	.text{
		padding-left:0;
		padding-right:0;
	}
	
	
	#section-templates header{
		padding: 0 var(--space--3xl);
	}
	#section-who-for{
		grid-template-columns: [who-for] 1fr [professions] 1fr;
	}
	
	#section-who-for{
		h1 {
			font-size: 2.75rem;
			letter-spacing:0;
			display:block;
			padding-right: var(--space--3xl);
			align-content: center;
			text-align:right;
		}
		ul#professions li{
			font-size: var(--font-size--m);
		}
		#bracket{
			font-size:50rem;
			line-height: 46.5rem;
		}
		#who-for i{
			font-size: var(--font-size--m);
			float:left;
			text-align:right;
			padding-right: var(--space--l);
			width: 100%;
		}
	}
	header.site ul{
		border-top: none;
		border-bottom:none;
		
		li{
			border-left: none;
			padding-left:0rem;
			font-size: var(--font-size--s);
			font-weight: 700;
		}
	}

	header.site {
		grid-template-columns: [left-edge] 19rem [main-left] 1fr [main-center] 2fr [main-right] 2fr [right-edge];
	}
	
	#bracket{
		display:none;
	}
	button{
		font-size: var(--font-size--m);
		padding: var(--space--m) var(--space--xl) var(--space--m-l);
		width:100%;
	}
	
	.team-member{
		display:block;
	}
	
	.bio-wrapper{
		border-left:none;
		align-content:center;
		padding: var(--space--2xl) var(--space--3xl) var(--space--3xl);
		
		p{
			font-size: var(--font-size--m);
		}
	}
	
	.bio{
		max-width: none;
	}
	
	.team-photo{
		border-bottom: var(--border--thin);
		width: 100%;
		border-left: none;
		max-height: none;
	}
	
	#section-team img{
		height: inherit;
		width: 100%;
	}
	
	.bio-wrapper{
		border-right: none;
	}
	
	ul#professions{
		margin-top: 0rem;
	}
	
	section#section-type{
		padding-bottom: 0;
	}
	#templates-wrapper{
		padding-bottom: var(--space--xl);
	}
	#section-top.team .text.left {
		max-width: 80rem;
		padding: var(--space--3xl);
	}
	
	#story-header p{
		font-size: var(--font-size--m-l);
		margin-bottom: var(--space--3xl);
	}
	section.full.section-chart {
		div.inputs{
			max-width: 100%;
			padding: 0 var(--space--3xl);
			padding-bottom: var(--space--xl);
			width: 100%;
			display: block;
			margin-top: var(--space--2xl);	
		}
		input{
			width: 100%;
		}
	}
	
	.text.left, .text.right {
		max-width: 100%;
	}
	
	#section-top p, #section-color header+p, #section-type p, #section-payments p{
		font-size: var(--font-size--m-l);
	}
	
	section.story{	
		background-image: none;
	}
	
	section.full.section-chart {
		div.inputs span{
			padding: var(--space--m) var(--space--xs);
			align-content:center;
			margin-top: 0;
			display: block;
		}
		button{
			margin: var(--space--l) auto var(--space--3xl);
		}
	}
	
	.chart-intro p.big{
		font-size: var(--font-size--m-l);
		text-align:center;
	}
	
	.mobile-break{
		display:block;
	}
	
	form{
		display:block;
		width: 100%;
		margin-top: var(--space--3xl);
		/* margin-bottom: 2.5rem; */
	}
	
	.join form {
		input{
			width: 100%;
			margin-bottom: var(--space--xl);
		}
		button{
			margin: 0 auto;
		}
	}
	
	footer {
		.collapsed{
			display:block;
		}
		.main-footer{
			display: block;
			border-top: var(--border--thin);
		}
		.collapsed {
			.logo-footer{
				padding: var(--space--m) var(--space--m-l);
				border-right: var(--border--thin);
				width: 6.25rem;
				display:block;
			}
			.footerToggle{
				display: none;
			}	
		}
		.message{
			padding: var(--space--2xl) var(--space--3xl) var(--space--m);
			
			p{
				padding: 0rem;
				margin-top:0;
			}
		}
		.contact{
			border-left:none;
			padding: var(--space--xs) var(--space--3xl);
		}
		.studioworks{
			border-left: none;
			padding: var(--space--xs) var(--space--3xl);
		}
	}
	
	h2{
		text-align:center;
	}
	
	.bio ul{
		text-align:center;
	}
	 
	section{
		border-bottom: var(--border--thin);
		padding: 3.5em 3em 4em;
	}
	#mission-block {
		display:grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space--xl);
	}
	
}/*/mediaquery*/

@media screen and (max-width: 620px){
	header.site{
		grid-template-columns: [left-edge] 13rem [main-left] 1fr [main-center] 1fr [main-right] 1fr [right-edge];
	}
	header.site a.brand .logo{
		width: 13rem;
	}
}