@media screen and (max-width: 767px){
  html {
	font-size: 65%; /* 14px (87.5% of 16px) */
	  }
	  section{
		padding: 3rem 3rem 3rem;
	}
	
	h1{
		text-align:center;
	}
	section.full h1 {
		font-size: 4.5rem;
		line-height: 3.75rem;
		max-width: 80%;
		margin: 0 auto 1.5rem;
	}
	
	#who-for svg.logotype2 {
	width: 15rem;
	margin-top: .5rem;
	}
	
	footer form {
		display:grid;
		grid-template-columns: 1fr;
		row-gap: 1rem;
		text-align:center;
		height: inherit;
		margin-bottom: 2rem;
		
		label{
			font-size: 1.5rem;
		}
		
		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:4rem 3rem 4rem;
		}

		.text-block{
			padding: .5rem 3rem;
		}
	}
	
	#section-color-wrapper{
		display:block;
	}
	
	.type-wrapper{
		display: block;
		padding: 3rem 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 3rem;
	}
	#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: 3rem;
			align-content: center;
			text-align:right;
		}
		ul#professions li{
			font-size:1.5rem;
		}
		#bracket{
			font-size:50rem;
			line-height: 46.5rem;
		}
		#who-for i{
			font-size: 1.5rem;
			float:left;
			text-align:right;
			padding-right:1.5rem;
			width: 100%;
		}
	}
	header.site ul{
		border-top: none;
		border-bottom:none;
		
		li{
			border-left: none;
			padding-left:0rem;
			font-size: 1rem;
			font-weight: 700;
		}
	}

	header.site {
		grid-template-columns: [left-edge] 2fr [main-left] 1fr [main-center] 2fr [main-right] 2fr [right-edge];
	}
	
	#bracket{
		display:none;
	}
	button{
		font-size:1.75rem;
	}
	
	.team-member{
		display:block;
	}
	
	.bio-wrapper{
		border-left:none;
		align-content:center;
		padding: 2.5rem 3rem 3rem;
		
		p{
			font-size: 1.5rem;
		}
	}
	
	.bio{
		max-width: none;
	}
	
	.team-photo{
		border-bottom: .125rem solid var(--color--main--borders);
		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: 2rem;
	}
	#section-top.team .text.left {
		max-width: 80rem;
		padding: 3rem 3rem 3rem;
	}
	
	#story-header p{
		font-size: 1.75rem;
		margin-bottom: 3rem;
	}
	section.full.section-chart {
		div.inputs{
			max-width: 100%;
			padding: 0 3rem;
			padding-bottom: 2rem;
			width: 100%;
			display: block;
			margin-top: 2.5rem;	
		}
		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: 1.75rem;
	}
	
	section.story{	
		background-image: none;
	}
	
	section.full.section-chart {
		div.inputs span{
			padding: 1rem .5rem;
			align-content:center;
			margin-top: 0;
			display: block;
		}
		button{
			margin: 1.5rem auto 3rem;
		}
	}
	
	.chart-intro p.big{
		font-size: 1.75rem;
		text-align:center;
	}
	
	.mobile-break{
		display:block;
	}
	
	form{
		display:block;
		width: 100%;
		margin-top: 3rem;
		/* margin-bottom: 2.5rem; */
	}
	
	.join form {
		input{
			width: 100%;
			margin-bottom: 2rem;
		}
		button{
			margin: 0 auto;
		}
	}
	
	footer {
		.collapsed{
			display:block;
		}
		.main-footer{
			display: block;
			border-top: solid .125rem var(--color--main--borders);
		}
		.collapsed {
			.logo-footer{
				padding: 1rem 1.25rem;
				border-right: solid .125rem var(--color--main--borders);
				width: 6.25rem;
				display:block;
			}
			.footerToggle{
				display: none;
			}	
		}
		.message{
			padding: 2.5rem 3rem 1rem;
			
			p{
				padding: 0rem;
			}
		}
		.contact{
			border-left:none;
			padding: .5rem 3rem;
		}
		.studioworks{
			border-left: none;
			padding: .5rem 3rem;
		}
	}
	
	h2{
		text-align:center;
	}
	
	.bio ul{
		text-align:center;
	}
	
}/*/mediaquery*/

@media screen and (max-width: 1000px) {
	
	#section-top h1{
		  font-size: 8rem;
		  line-height: 6.5rem;

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

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

		&.right .text-block {
			padding:3rem 3rem 1rem;
		}

		.text-block {
			padding: 3rem;
			max-width: none;
		}
		&.split {
			grid-template-columns: 1fr;
			
			.text-block.type{
				padding-bottom: 0;
			}
		}
	}
	
	section.center .example {
		padding: 3rem 0 0;
		max-width: none;
	}
	
	
	section.full #testimonials ul {
		grid-template-columns: 1fr;
		row-gap: 2rem;
	}
	
	section.full #testimonials, section.full #team {
		padding: 2rem 0;
		
		ul {
			display: flex;
			overflow-x: auto;
			overflow-y: hidden;
			gap: 2rem; /* Adjust spacing between items as needed */
			padding: 1rem 3rem 1rem;
			margin-top: .5rem;
			
			/* 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 */
		}	
	}
	
	#story-wrapper{
		display: grid;
		grid-template-columns: 1fr;
		column-gap: 0rem;
		max-width: 90rem;
		margin: 0 auto;
	}
	#story-header {
		margin-top: 0rem;
	}
	section#story{
		background-image: none;
	}
	section#story #story-page{
		padding: 3.5rem 4rem 4rem;
	}	
	
	#section-top.team h2{
		font-size: 2rem;
		line-height: 2.25rem;
	} 
	
	section.story #story-header p{
		font-size: 1.75rem;
	}
	
	section.full.section-chart ul.chart-row li{
		font-size: 1rem;
	}
	section.full.section-chart ul.chart-row li.company{
		text-align:center;
		padding-left: 0;
	}
	
	section.full.section-chart{
		padding: 1rem 0 1rem;
	}
	
	section.full.section-chart div.chart-intro {
		grid-template-columns: 1fr;
		padding: 0 3rem;
	}
	
	.note{
		padding-right: 1rem;
	}
	
	#section-top.team p.harvest, #section-top.team p.go-ahead.caption{
		padding: 0 3rem;
	}
	
	#mission-block {
		display:block;
	}
	
	section.story #story-page{
		padding: 3rem 3.5rem 3rem;
	}
	
	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: 1.5rem;
		line-height: 1.25rem;
	}
	
	section#section-payments{
		padding: 3rem 0 0rem;
	}
	section#section-payments header{
		padding: 0 3rem;
	}
	
	#payments{
		width: 100vw;
		overflow-x: auto;
		overflow-y: hidden;
		padding-left: 0;
	}
	
	#payments-sidebar-wrapper{
		width: 300vw;
		padding: 0 3rem;
	}
	section.full.testimonials.team #team {
		ul{
			margin-top: 1.5rem;
		}
		header, header+p{
			max-width: 100%;
		}
		header+p{
			margin-bottom: 0rem;
		}
	}
	
}/*/mediaquery*/

@media screen and (min-width: 767px) {
  html {
	font-size: 85%; /* 18px (112.5% of 16px) */
  }
 
  section{
	border-bottom: .125rem solid var(--color--main--borders);
	padding: 3.5em 3em 4em;
	}
	#mission-block {
		  display:grid;
		  grid-template-columns: 1fr 1fr;
		  column-gap: 2rem;
	  }
}/*/mediaquery*/

@media screen and (min-width: 1400px) {
  html {
	/* font-size: 100%; 18px (112.5% of 16px) */
  }
  #mission-block {
		display:grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}/*/mediaquery*/

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