/* - TABLET STYLESHEET
---------------------------------------------- */

	
	 /* - GLOBAL
	    ------------------------------------------ */
	html,body{
		width:100%;
		-webkit-text-size-adjust:auto;
	}
	.constraint{
		width:600px;
	}
	#introduction .branding{
		width:600px;
	}


	/* - INTRODUCTION
    ------------------------------------------ */
	#introduction .branding .introduction{
		width:100%;
		text-align:center;
		font-size:40px;
		font-weight:900;
		font-family:"proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2","Helvetica Neue","Arial";
		margin:0px 0 20px 0;
	}
	#introduction .branding .strapline{
		width:300px;
		font-size:18px;
		font-weight:300;
	}
	#introduction #navigation li.link-about:hover{
		border-left: 1px solid #BABABA;
	}
	#introduction #navigation ul li a:hover,
	#introduction #navigation ul li.active a{
		padding:10px 0px 7px 0px;
		color:#444;
		text-shadow:0px 1px 0px #FFF;
	}
	#introduction #navigation li:hover,
	#introduction #navigation li.active {
		border:1px solid #BABABA;
		border-left:1px solid #FFF;
		border-top:1px solid #BABABA;
		background: #F8F8F8; /* old browsers */
		background: -moz-linear-gradient(top, #F8F8F8 0%, #ECECEC 100%); /* firefox */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8F8F8), color-stop(100%,#ECECEC)); /* webkit */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#ECECEC',GradientType=0 ); /* ie */
		background-image: -o-linear-gradient(top, #F8F8F8 0%, #ECECEC 100%); /* opera */
		box-shadow:inset 0 1px 0px rgba(255,255,255,1);
		-moz-box-shadow:inset 0 1px 0px rgba(255,255,255,1);
		-webkit-box-shadow:inset 0 1px 0px rgba(255,255,255,1);
	}
	

	/* - INTERFACE
    ------------------------------------------ */
	#interface .left-section{
		width:450px;
		float:none;
		margin:0 auto;
		border:none;
		padding:0px;
	}
	#interface .right-section{
		width:450px;
		float:none;
		margin:0 auto;
		border:none;
		padding:0px;
	}
	#interface .interface-icons{
		display:none;
	}
	#interface #progress-bar-container{
		display:none !important;
	}


	/* - PRESENTATION
    ------------------------------------------ */
	#presentation .left-section{
		width:450px;
		float:none;
		margin:0 auto;
		border:none;
		padding:0px;
	}
	#presentation .right-section{
		width:450px;
		float:none;
		margin:0 auto;
		border:none;
		padding:0px;
	}
	#presentation .interface-icons{
		display:none;
	}
	#presentation #progress-bar-container{
		display:none !important;
	}


	/* - LANGUAGE
    ------------------------------------------ */
	#language .left-section{
		width:450px;
		float:none;
		margin:0 auto;
		border:none;
		padding:0px;
	}
	#language .right-section{
		width:450px;
		float:none;
		margin:0 auto;
		border:none;
		padding:0px;
	}
	#language .language-icons{
		display:none;
	}
	#language #language-bar-container{
		display:none !important;
	}
	

	/* - ABOUT ME
    ------------------------------------------ */
	#about-me .left-section{
		width:450px;
		float:none;
		margin:0 auto;
		border:none;
		padding:0px;
	}
	#about-me .right-section{
		width:450px;
		float:none;
		margin:0 auto;
		border:none;
		padding:0px;
	}
	#about-me .about-me-icons{
		display:none;
	}
	#about-me #progress-bar-container{
		display:none !important;
	}



	/* - CONTACT
    ------------------------------------------ */
	#contact .right-section{
		display:none;
	}
	#contact .contact-form{
		float:none;
		margin:0 auto;
	}
	#contact .contact-form button{
		width:auto;
		margin:0 auto;
		display:block;
		float:none;
	}


	/* - PLAY
	------------------------------------------ */
	#play{
	}
	
	
/* ——— Creativity Coaching layout ——— */

/* Flex sections (intro & who-it’s-for) */
.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.flex .text,
.flex .image {
  flex: 1 1 50%;
  padding: 1em;
}

/* Five-column grid */
.grid-5 {
  display: flex;
  flex-wrap: wrap;
  margin: -1em;
}
.grid-5 .col {
  flex: 1 1 20%;
  padding: 1em;
  text-align: center;
}

/* Mobile fallback: stack columns */
@media (max-width: 768px) {
  .grid-5 .col {
    flex: 1 1 100%;
  }
}


/* Tablet: 3-column for grid */
@media screen and (max-width: 880px) and (min-width: 601px) {
  #how  .grid-5 .col,
  #expect .grid-5 .col,
  #costs .grid-5 .col {
    width: 33.3333%;
  }
}