/* - DOCUMENT INFORMATION
------------------------------------------------- 
	Description:MatthewAdams.info
	Author:Matthew Adams
	Author URI:http://matthewadams.info
	Version:1.0
/*


/* - CONTENTS
-------------------------------------------------
    - CSS Reset ............................ 1.0.
    - HTML5 Reset .......................... 2.0.
    - Global ............................... 3.0.
    	- Structural ....................... 3.1.
    	- Base Elements .................... 3.2.
    	- Buttons .......................... 3.3.
    	- Header Slider .................... 3.4.
    	- Social Icons ..................... 3.5.
    	- Tip Tip Style .................... 3.6.
    	- Error Page ........................3.7.
    - Introduction Section ................. 4.0.
	- About Section .........................5.0.
    - Interface Section .....................6.0.
    - Presentation Section ..................7.0.
    - Language Section ......................8.0.
	- Work Section ......................... 9.0.
	- Beliefs Section ......................10.0. 				
	- Play Section .........................11.0. 				
    - Contact Section ......................12.0.
    - Footer ...............................13.0.
*/


/* - 1.0. - CSS RESET
---------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{ -collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}


/* - 2.0. - HTML5 RESET
---------------------------------------------- */
article, aside, dialog, figure, footer, header, hgroup, nav, section{
	display:block; zoom:1;
}

/* - 3.0. - GLOBAL
---------------------------------------------- */
	
	/* - 3.1. - STRUCTURAL
	------------------------------------------ */
	body{
/*		background:url("../images/global/bg.png");-*/
		background-attachment:fixed;
		font-family:"nimbus-sans-condensed","Helvetica Neue","Arial";
		font-size:30px;
		letter-spacing:-0.0px;
		color:#444;
	}
	html,body{
		height:100%;
		width:100%;
	}
	#container{
		position:relative;
		/*background:url(../images/footer/road.png) no-repeat center bottom;*/
	}
	.constraint{
		display:block;
		width:900px;
		height:100%;
		margin:0 auto;
		position:relative;
	}
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	#introduction .title, #work .title, #play .title, #presentation .title, #contact .title, #samples .title{
		width:300px;
		text-align:center;
		padding:0px;
		margin:0 auto 30px auto;
		font-size:32px;
		font-weight:600;
		color:#444;
	}
	#introduction, #about-me, #interface, #presentation, #language, #work, #coaching, #design, #writing, #about2{
		border-bottom:0px dashed #999;
		overflow:hidden;
		padding:40px 0px;
		width:100%; 
	}
	

	/* - 3.2. - BASE ELEMENTS
	------------------------------------------ */
	h1 a, h2 a, h3 a, h4 a{
		color:#190933;
	}
	h1,h2,h3,h4{
		margin:1em 0 0.35em 0;
		font-weight:400;
		font-family:"Montserrat", sans-serif;		
	}
	h1{font-size:42px;}
	h2{font-size:30px;}
	h3{font-size:20px;}
	h4{font-size:16px;}
	h5{font-size:14px;}
	h6{font-size:12px}
	h1.title{
		padding:0 0 15px 0;
	}
	h2.title{
	font-family:"Montserrat", sans-serif;
	font-size:30px;
	line-height:1.3em;
	font-weight:100;
	padding:0 0 10px 0;
	}
	h3.title{
		padding:0 0 7px 0;
	}
	a{
		color:#665687;
		text-decoration:none;
	}
	a:hover{
		color:#e50000;
		text-decoration:underline;
	}
	small{font-size:12px;}
	



	ul{
		margin:0 0 15px 15px;
	}
/*	ul li{
		list-style:circle;
		line-height: 0.1;
	}*/
		
	ol{
		margin:0 0 15px 15px;
	}
	ol li{
		list-style:decimal outside;
	}




	dl{
		margin:0 0 0 0;
	}
	dl dt{
		font-weight:bold;
		margin:0 0 0 0;
	}
	dl dd{
		margin:0 0 0 0;
	}
	strong{
		font-weight:bold;
	}
	b{
		font-weight:bold;
	}
	em{
		font-style:italic;
	}
	i{
		font-style:italic;
	}
	p{
		font-family:"Montserrat", sans-serif;
		font-size:13px;
		line-height:1.3em;
		margin:0 0 0.5em 0;
	}
	p.error{
		color:#e50000;
	}
	.error{
		color:#e50000;
	}


	/* - 3.3. - BUTTONS - matthewadams.info
	------------------------------------------ */
	.button{
		padding:6px 12px 6px 12px;
		display:inline;;
		border-radius:100px;
		font-size:14px;
		text-decoration:none;
		text-align:center;
		color:#444;
		text-shadow:0px 1px 0px #FFF;
		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 */
		background-image:-o-linear-gradient(top, #F8F8F8 0%, #ECECEC 100%); /* opera */
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#ECECEC',GradientType=0 ); /* ie */
		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);
		border:1px solid #bebdbd;
	}
	.button.small{
		font-size:12px;
	}
	.button:hover{
		color:#444;
		background:#ECECEC; /* old browsers */
		background:-moz-linear-gradient(top, #ECECEC 0%, #F8F8F8 100%); /* firefox */
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ECECEC), color-stop(100%,#F8F8F8)); /* webkit */
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ECECEC', endColorstr='#F8F8F8',GradientType=0 ); /* ie */
		background-image:-o-linear-gradient(top, #ECECEC 0%, #F8F8F8 100%); /* opera */
		box-shadow:none;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		text-decoration:none;
	}
	.button.red{
		color:#FFF;
		text-shadow:0px -1px 0px #992029;
		background:#ff3019;
		background:-moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
		background-image:-moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
		box-shadow:inset 0 1px 0px rgba(255,255,255,0.6);
		-moz-box-shadow:inset 0 1px 0px rgba(255,255,255,0.6);
		-webkit-box-shadow:inset 0 1px 0px rgba(255,255,255,0.6);
		border:1px solid #b10303;
		border:1px solid rgba(106,0,0,0.3);
	}
	.button.red:hover{
		color:#FFF;
		text-shadow:0px -1px 0px #992029;
		background:#ff3019;
		background:-moz-linear-gradient(top, #cf0404 0%, #ff3019 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf0404), color-stop(100%,#ff3019));
		background-image:-o-linear-gradient(top, #cf0404 0%, #ff3019 100%);
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf0404', endColorstr='#ff3019',GradientType=0 );
		box-shadow:none;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
	}
	.button.inactive{
		color:#AAA;
	}
	.button.inactive:hover{
		cursor:default;
	}


	/* - 3.4. - HEADER SLIDER
	------------------------------------------ */
	#header-slider{
		height:1px;
		width:100%;
		background:#190933;
		display:relative;
		overflow:hidden;
	}
	#header-slider .close{
		display:none;
		width:14px;
		height:13px;
		background:url(../images/header/close-button-white.png) no-repeat center center;
		float:right;
		margin:10px 0 0 0;		
	}
	/*
		#header-slider #feedback-slider{
			color:#fff;
		}
		#header-slider #feedback-slider li{		
			text-align:center;
			font-size:13px;
			list-style:none;
		}
	*/


	/* - 3.5. - SOCIAL ICONS
	------------------------------------------ */
	#social-icons{
		position:absolute;
		margin:0px;
		top:20px;
		left:15px;
		width:40px;
		height:260px;
		z-index:200;
	}
	#social-icons li{
		margin:0 0 10px 0;
		list-style:none;
		border-radius:100px;
	}
	#social-icons li a{
		display:block;
		width:35px;
		height:35px;
		text-indent:-9999px;
		background:url(../images/header/icon-sprite.png);
	}
	#social-icons li a.twitter{
		background-position:-39px 1px;
	}
	#social-icons li a.twitter:hover{
		background-position:-39px 38px;
	}
	#social-icons li a.linkedin{
		background-position:-76px 1px;
	}
	#social-icons li a.linkedin:hover{
		background-position:-76px 38px;
	}
	#social-icons li a.instagram{
		background-position:-264px 1px;
	}
	#social-icons li a.instagram:hover{
		background-position:-264px 38px;
	}
	#social-icons li a.tiktok{
		background-position:-304px 1px;
	}
	#social-icons li a.tiktok:hover{
		background-position:-304px 38px;
	}
	#social-icons li a.linktree{
		background-position:-344px 1px;
	}
	#social-icons li a.linktree:hover{
		background-position:-344px 38px;
	}
	#social-icons li a.medium{
		background-position:-225px 1px;
	}
	#social-icons li a.medium:hover{
		background-position:-225px 38px;
	}
	
	#to-top-button{
		width:40px;
		height:40px;
		background:#ccc;
		position:absolute;
		bottom:20px;
		right:20px;
		border-radius:100px;
		text-indent:-9999px;
		z-index:200;
		background:url(../images/back-to-top.png) no-repeat;
	}
	#to-top-button:hover{
		background-position:-40px 0px;
	}
	
	
	/* - 3.6. - TIP TIP STYLE
	---------------------------------------------- */
	#tiptip_holder{
		display:none;
		position:absolute;
		top:0;
		left:0;
		z-index:99999;
	}
	#tiptip_holder.tip_top{
		padding-bottom:5px;
	}
	#tiptip_holder.tip_bottom{
		padding-top:5px;
	}
	#tiptip_holder.tip_right{
		padding-left:5px;
	}
	#tiptip_holder.tip_left{
		padding-right:5px;
	}
	#tiptip_content{
		font-size:11px;
		color:#fff;
		text-shadow:0 0 2px #190933;
		padding:6px 8px 5px 8px;
		background-color:rgb(0,0,0);
		background-color:rgba(0,0,0,0.92);
		background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#190933));
		border-radius:3px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		box-shadow:0px 2px 2px rgba(0,0,0,0.07);
		-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.07);
		-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.07);
	}
	#tiptip_arrow, #tiptip_arrow_inner{
		position:absolute;
		border-color:transparent;
		border-style:solid;
		border-width:6px;
		height:0;
		width:0;
	}
	#tiptip_holder.tip_top #tiptip_arrow{
		border-top-color:#fff;
		border-top-color:rgba(255,255,255,0.35);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow{
		border-bottom-color:#fff;
		border-bottom-color:rgba(255,255,255,0.35);
	}
	#tiptip_holder.tip_right #tiptip_arrow{
		border-right-color:#fff;
		border-right-color:rgba(255,255,255,0.35);
	}
	#tiptip_holder.tip_left #tiptip_arrow{
		border-left-color:#fff;
		border-left-color:rgba(255,255,255,0.35);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner{
		margin-top:-7px;
		margin-left:-6px;
		border-top-color:rgb(25,25,25);
		border-top-color:rgba(25,25,25,0.92);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner{
		margin-top:-5px;
		margin-left:-6px;
		border-bottom-color:rgb(25,25,25);
		border-bottom-color:rgba(25,25,25,0.92);
	}
	#tiptip_holder.tip_right #tiptip_arrow_inner{
		margin-top:-6px;
		margin-left:-5px;
		border-right-color:rgb(25,25,25);
		border-right-color:rgba(25,25,25,0.92);
	}
	#tiptip_holder.tip_left #tiptip_arrow_inner{
		margin-top:-6px;
		margin-left:-7px;
		border-left-color:rgb(25,25,25);
		border-left-color:rgba(25,25,25,0.92);
	}
	/* Webkit Hacks  */
	@media screen and (-webkit-min-device-pixel-ratio:0){	
		#tiptip_content{
			padding:4px 8px 5px 8px;
			background-color:rgba(45,45,45,0.88);
		}
		#tiptip_holder.tip_bottom #tiptip_arrow_inner{ 
			border-bottom-color:rgba(45,45,45,0.88);
		}
		#tiptip_holder.tip_top #tiptip_arrow_inner{ 
			border-top-color:rgba(20,20,20,0.92);
		}
	}
	
	
	/* - 3.7. - ERROR PAGE
	---------------------------------------------- */
	#error{
		position:relative;
		height:450px;
		width:620px;
		left:50%;
		top:50%;
		margin:-225px 0 0 -310px;
	}	
	#error .logo{
		width:250px;
		height:300px;
		margin:20px auto 20px auto;
	}
	#error p{
		width:620px;
		text-align:center;
		font-size:20px;
		margin:0 0 20px 0;
	}
	#error .button{
		width:135px;
		margin:0 auto;
		display:block;
	}


/* - 4.0. - INTRODUCTION - matthewadams.info
---------------------------------------------- */
#introduction{
	background:url(../images/grunge-bg-2.png);
	padding:0px 0 50px 0;
	border-top:6px solid #190933;
}
#introduction .branding{
	width:100%;
}
#introduction .branding .introduction{
	width:100%;
	height:260px;
	text-align:center;
	text-indent:-9999px;
	font-size:0px;
	font-weight:900;
	font-family:"nimbus-sans-condensed","Helvetica Neue","Arial";
	margin:0px 0px 0px 0px;
	background:url(../images/matthewadams-dot-info-banner-lg.svg) no-repeat center center;
}
#introduction .branding .strapline{
	width:500px;
	text-align:center;
	margin:0 auto 20px auto;
	font-size:18px;
	font-weight:300;
	letter-spacing:0.2px;
	font-family:"nimbus-sans-condensed","Helvetica Neue","Arial";
	color:#888;
	text-shadow:0px 1px 0px #FFF;
}
#introduction #navigation{
	margin:0 auto;
	width:500px;
	overflow:hidden;
	box-shadow:0px 2px 2px rgba(0,0,0,0.07);
	-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.07);
	-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.07);
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
}
#introduction #navigation ul{
	margin:0px;
	padding:0px;
}
#introduction #navigation li{
	list-style:none;
	float:left;
	border:1px solid #190933;
	border-left:1px solid #FFF;
	border-top:1px solid #190933;
	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);
}
#introduction #navigation li:hover,
#introduction #navigation li.active{
	background:#494949; /* old browsers */
	background:-moz-linear-gradient(top, #494949 0%, #242424 100%); /* firefox */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#190933), color-stop(100%,#000000)); /* webkit */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#242424',GradientType=0 ); /* ie */
	background-image:-o-linear-gradient(top, #494949 0%, #242424 100%); /* opera */
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	border:none;
}
#introduction #navigation ul li a{
	font-size:13px;
	font-weight:300;
	color:#444;
	text-shadow:0px 1px 0px #FFF;
	text-decoration:none;
	display:block;
	text-align:center;
	padding:10px 0px 7px 0px;
}
#introduction #navigation ul li a:hover,
#introduction #navigation ul li.active a{
padding:11px 1px 8px 1px;
	color:#FFF;
	text-shadow:-1px 0 0 #190933;
}












#introduction #navigation ul li.link-interface a{
	width:90px;
	height:20px;
	position: relative;
	top: 7px; 
}
#introduction #navigation ul li.link-presentation a{
	width:110px;
	height:20px;
	position: relative;
	top: 7px; 
}
#introduction #navigation ul li.link-language a{
	width:100px;
	height:20px;	
	position: relative;
	top: 7px; 
}
#introduction #navigation ul li.link-samples a{
	width:100px;
	height:20px;
	position: relative;
	top: 7px; 
}
#introduction #navigation ul li.link-about a{
	width:90px;
	height:20px;
	position: relative;
	top: 7px; 
}
#introduction #navigation li.link-about{
	border-left:1px solid #BABABA;
	border-radius:100px 0px 0px 100px;
	-moz-border-radius:100px 0px 0px 100px;
	-webkit-border-radius:100px 0px 0px 100px;
}
#introduction #navigation li.link-about:hover{
	border-left:100px;
}


/* — New nav items for Coaching page — */
#introduction #navigation ul li.link-coaching a{
	width:160px;
	height:20px;
	position: relative;
	top: 0px; 
}
#introduction #navigation li.link-coaching{
	border-left:1px solid #BABABA;
	border-radius:100px 0px 0px 100px;
	-moz-border-radius:100px 0px 0px 100px;
	-webkit-border-radius:100px 0px 0px 100px;
}
#introduction #navigation li.link-coaching:hover{
	border-left:100px;
}
#introduction #navigation ul li.link-design a {
  width:110px;       /* adjust to fit “Design” */
  height:20px;
  position:relative;
  top:0px;
}
#introduction #navigation ul li.link-writing a {
  width:110px;       /* adjust to fit “Writing” */
  height:20px;
  position:relative;
  top:0px;
}
#introduction #navigation ul li.link-about2 a{
	width:110px;
	height:20px;
	position: relative;
	top: 0px; 
}
#introduction #navigation li.link-about2:hover{
	border-left:100px;
}
#introduction #navigation li.link-about2{
	border-right:1px solid #665687;
	border-radius:0px 100px 100px 0px;
	-moz-border-radius:0px 100px 100px 0px;
	-webkit-border-radius:0px 100px 100px 0px;
}





/* - 5.0. - ABOUT ME
---------------------------------------------- */
#about-me .title{
	width:100%	;
	height:80px;
	margin:0px 0px 50px 0px;
	background:url(../images/matthewadams-dot-info-about.svg) no-repeat center center;
	text-indent:-9999px;
}
#about-me .gradient-text {
  font-size: 3.5rem;
  font-weight: 500;
  background-image: linear-gradient(to right, #6878F7, #6FDF77);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Ensures WebKit browsers render correctly */
  text-shadow: none;
  opacity: 1;
  display: inline-block;
  filter: none; /* Remove potential filters causing issue */
}
#about-me p{
	font-size:13px;
	text-shadow:0px 1px 0px #FFF;
	margin:0 0 13px 0;
}
#about-me h2{
	font-family:"Montserrat", sans-serif;
	font-size:40px;
	line-height:1.3em;
	font-weight:300;
}
#about-me h3{
	font-size:14px;
	text-shadow:0px 0px 0px #FFF;
}
#about-me h2{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}
#about-me .about-me-icons{
	float:right;
	width:150px;
	overflow:hidden;
}
#about-me .about-me-icons li{
	float:right;
	list-style:none;
	margin:0 0 0 10px;
	opacity:0.5;
}
#about-me .about-me-icons li a{
	height:23px;
	display:block;
	text-indent:-9999px;
	background:url(../images/about-me-icons.png) no-repeat;
}
#about-me .about-me-icons li:hover{
	opacity:1;
}
#about-me .about-me-icons li.cv-download a{
	background-position:0px 0px;
	width:18px;
}
#about-me .about-me-icons li.client-feedback a{
	background-position:-49px 0px;
	width:25px;
}
#about-me .about-me-icons li.vcard a{
	background-position:-20px 0px;
	width:28px;
}
#about-me .right-section{
	padding:0 0 0 43px;
	float:right;
	width:402px;
	margin:0 0 30px 0;
	border-left:0px dotted #cdcdcd;
}
#about-me .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
#about-me .right-section h3, #about-me .left-section h3{
	font-size:18px;
	font-weight:300;
}
#about-me #progress-bar-container{
	display:none;
	padding:20px 0 40px 0;
	clear:both;
	position:relative;
}
#about-me #progress-bar-container .start-date,
#about-me #progress-bar-container .end-date{
	font-size:28px;
	font-weight:900;
	font-family:"nimbus-sans-condensed","Helvetica Neue","Arial";
	display:block;
	position:absolute;
	bottom:27px;
}
#about-me #progress-bar-container .start-date{
	left:0px;
}
#about-me #progress-bar-container .end-date{
	right:0px;
}
#about-me .day-number{
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	color:#ccc;
	color:rgba(0,0,0,0.08);
	font-size:50px;
	font-weight:900;
	font-family:"nimbus-sans-condensed","Helvetica Neue","Arial";
	background-image: linear-gradient(to right, #ffc800 0%, #6878f7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; /* Ensures WebKit browsers render correctly */
	opacity: 1;
}
#about-me .percentage{
	padding:11px 0 0 35px;
	display:block;
	position:absolute;
	top:-11px;
	right:0px;
	color:#ccc;
	color:rgba(0,0,0,0.08);
	font-size:50px;
	font-weight:900;
	font-family:"nimbus-sans-condensed","Helvetica Neue","Arial";
	background-image: linear-gradient(to right, #6878F7, #6FDF77);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; /* Ensures WebKit browsers render correctly */
	opacity: 1;
}

#about-me .progress-key{
	overflow:hidden;
	width:300px;
	padding:3px;
	margin:0 auto 65px auto;
	background:url(../images/grunge-bg-2.png) #ccc;
	background:url(../images/grunge-bg-2.png) rgba(230,230,230,0.9);
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
}
#about-me .progress-key li{
	list-style:none;
	float:left;
	width:115px;
	padding:10px 0;
	font-size:13px;
	font-weight:600;
}
#about-me .progress-key li.personal{
	text-align:right;
	padding-right:30px;
	background:url(../images/pin-black.png) no-repeat right center;
	margin-right:5px;
}
#about-me .progress-key li.professional{
	text-align:left;
	padding-left:30px;
	background:url(../images/pin-red.png) no-repeat left center;
	margin-left:5px;
}
#about-me .progress-bar{
	position:relative;
	width:745px;
	height:7px;
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	background:#333;
	margin:0 auto;
	overflow:visible;
}
#about-me .progress{
	/*background:#cf0000;*/
	width:100%;
	height:10px;
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
}
#about-me .progress-bar .progress .notes{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	margin:0px;
	padding:0px;
}
#about-me .progress-bar .progress .notes li{
	position:absolute;
	width:21px;
	height:8px;
	overflow:visible;
	padding:20px 2px 2px 2px;
	margin:0px;
	list-style:none;
}
#about-me .progress-bar .progress .notes li.professional{
	background:url(../images/pin-red.png) no-repeat center top;
	top:-37px;
}
#about-me .progress-bar .progress .notes li.personal{
	top:15px;
	background:url(../images/pin-black.png) no-repeat center top;
}
#about-me .progress-bar .progress .notes li .caption{
	padding:10px;
	width:200px;
	background:#333;
	position:absolute;
	z-index:500;
	display:none;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	box-shadow:0px 2px 2px rgba(0,0,0,0.07);
	-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.07);
	-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.07);
}
#about-me .progress-bar .progress .notes li .caption h4{
	font-weight:600;
	margin:0 0 5px 0;
	font-size:14px;
	text-align:left;
	color:#fff;
}
#about-me .progress-bar .progress .notes li .caption p{
	font-size:12px;
	color:#fff;
	text-shadow:none;
	margin:0px;
}
#about-me .progress-bar .progress .notes li.personal .caption .arrow{
	border-color:transparent transparent #333 transparent;
	border-style:solid;
	border-width:5px;
	height:0;
	width:0;
	position:absolute;
	top:-10px;
	left:17px;
}
#about-me .progress-bar .progress .notes li.professional .caption .arrow{
	border-color:#333 transparent transparent transparent;
	border-style:solid;
	border-width:5px;
	height:0;
	width:0;
	position:absolute;
	bottom:-10px;
	left:17px;
}
#about-me .progress-bar .progress .notes li.professional .caption{
	top:-30px;
	left:-10px;
	padding-bottom:10px;
}
#about-me .progress-bar .progress .notes li.personal .caption{
	top:40px;
	left:-10px;
	padding-top:10px;
	
}
#about-me .progress-bar .progress .notes li .caption .date{
	display:none;
}
#about-me .progress-bar .progress .notes li .caption h4 span{
	color:#999;
}
#about-me .left-section .chart{
	width:362px;
	height:362px;
	margin:20px auto 0 auto;
	display:block;
}



/* - 6.0. - INTERFACE
---------------------------------------------- */
#interface{
/*	background:url(../images/grunge-bg-2.png); */
	overflow:hidden;
}
#interface .title{
	width:100%;
	height:80px;
	margin:0px 0px 50px 0px;
	background:url(../images/matthewadams-dot-info-interface.svg) no-repeat center center;
	text-indent:-9999px;
}
#interface p{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.2em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#interface h3{
	font-size:14px;
	text-shadow:0px 1px 0px #FFF;
}
#interface .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	border-left:0px dotted #cdcdcd;
	margin:0 0 30px 0;
}
#interface .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
#interface .right-section h3, #interface .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}
img {
	max-width: 100%;
}
/*#interface .left-section .chart{
	width:362px;
	height:362px;
	background:url(../images/journeymaking.png) no-repeat;
	margin:20px auto 0 auto;
	display:block;
}*/



/* - 6.0. - PRESENTATION
---------------------------------------------- */
#presentation{
	background:url(../images/grunge-bg-2.png);
	overflow:hidden;
}
#presentation .title{
	width:100%;
	height:80px;
	margin:0px 0px 50px 0px;	
	background:url(../images/matthewadams-dot-info-presentation.svg) no-repeat center center;
	text-indent:-9999px;
}
#presentation h1{
	font-family:"Montserrat", sans-serif;
	font-size:40px;
	text-shadow:0px 1px 0px #FFF;
}
#presentation h2{
	font-family:"Montserrat", sans-serif;
	font-size:30px;
	text-shadow:0px 1px 0px #FFF;
}
#presentation p{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.2em;	
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
.presentation-items li{
	font-family:"Montserrat", sans-serif;
	font-size:120px;
	width:270px;
	list-style:none;
	float:left;
	margin:0 21px 20px 0;
	position:relative;
	color:#878787;
}
#presentation .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	margin:0 0 30px 0;
	border-left:0px dotted #cdcdcd;
}
#presentation .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
#presentation .right-section h3, #presentation .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}
/*#presentation .left-section .chart{
	width:100%;
	height:300px;
	background:url(../images/storytelling.png) no-repeat;
	margin:20px auto 0 auto;
	display:block;
}*/



/* - 8.0. - language
---------------------------------------------- */
#language{
/*	background:url(../images/grunge-bg-2.png);*/
	overflow:hidden;
}
#language .title{
	width:100%;
	height:80px;
	margin:0px 0px 50px 0px;	
	background:url(../images/matthewadams-dot-info-language.svg) no-repeat center center;
	text-indent:-9999px;
}
#language p{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.2em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#language h3{
	font-size:14px;
	text-shadow:0px 1px 0px #FFF;
}
#language .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	margin:0 0 30px 0;
	border-left:0px dotted #cdcdcd;
}
#language .left-section{
	padding:0 0 0 0;
	float:left;
	width:450px;
	margin:0 0 30px 0;
}
#language .right-section h3, #language .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}
/*#language .left-section .chart{
	width:362px;
	height:362px;
	background:url(../images/journeymaking.png) no-repeat;
	margin:20px auto 0 auto;
	display:block;
}*/


/* - 6.0. - SAMPLES
---------------------------------------------- */

#samples .title{
	width:100%;
	height:95px;
	background:url(../images/matthewadams-dot-info-samples.svg) no-repeat center center;
	text-indent:-9999px;
}
#samples h1{
	font-family:"Montserrat", sans-serif;
	font-size:40px;
	text-shadow:0px 1px 0px #FFF;
}
#samples h2{
	font-family:"Montserrat", sans-serif;
	font-size:30px;
	text-align: center
	text-shadow:0px 1px 0px #FFF;
}
#samples p{
	font-family:"Montserrat", sans-serif;
	font-size:15px;
	line-height:1.3em;	
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
.samples-items li{
	font-family:"Montserrat", sans-serif;
	font-size:120px;
	width:270px;
	list-style:none;
	float:left;
	margin:0 21px 20px 0;
	position:relative;
	color:#878787;
}
#samples .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	margin:0 0 30px 0;
/*	border-left:3px dotted #cdcdcd;*/
}
#samples .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
#samples .right-section h3, #presentation .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}
/*#samples .left-section .chart{
	width:100%;
	height:300px;
	background:url(../images/storytelling.png) no-repeat;
	margin:20px auto 0 auto;
	display:block;
}*/


/* - 8.0. - WORK
---------------------------------------------- */
#work{
	overflow:hidden;
}
#work .title{
	width:100%;
	height:135px;
	background:url(../images/work-title.png) no-repeat center center;
	text-indent:-9999px;
}
.work-items{
	overflow:hidden;
}
.work-items li{
	width:270px;
	list-style:none;
	float:left;
	margin:0 21px 20px 0;
	position:relative;
	color:#878787;
}
.work-items li a{
	color:#444;
}
.work-items li.last{
	margin-right:0px;
}
.work-items li .option-overlay{
	display:none;
	position:absolute;
	top:10px;
	left:10px;
	width:260px;
	height:139px;
	z-index:100;
	background:url(../images/magnify-preview.png) center center no-repeat rgb(0,0,0);
	background:url(../images/magnify-preview.png) center center no-repeat rgba(0,0,0,0.7);
	text-indent:-9999px;
}
.work-items li .option-overlay a{
	color:#FFF;
	width:260px;
	text-align:center;
	display:block;
	font-weight:600;
}
.work-items li .option-overlay span{
	color:#FFF;
	width:260px;
	text-align:center;
	font-size:9px;
	display:block;
	padding:10px 0;
}
.work-title{
	font-family:"Montserrat", sans-serif;
	font-size:50px;
	font-weight:300;
	text-align:center;
	margin:50px 0 40px 0;
	height:25px;
}
.work-image{
	width:260px;
	height:139px;
	padding:10px;
	display:block;

}
.work-role{
	color:#999;
	font-size:12px;
	padding:0 0 20px 10px;
}
.work-title2{
	font-size:14px;
	font-weight:500;
	text-align:left;
	margin:0 0 10px 10px;
	height:10px;
}
.work-items2 li{
	width:104px;
	list-style:none;
	float:left;
	margin:0 21px 20px 0;
	position:relative;
}
.work-items2 li a{
	color:#444;
}
.work-items2 li.last{
	margin-right:0px;
}
.work-items2 li .option-overlay a{
	color:#FFF;
	width:104px;
	text-align:center;
	display:block;
	font-weight:600;
}
.work-items2 li .option-overlay span{
	color:#FFF;
	width:104px;
	text-align:center;
	font-size:9px;
	display:block;
	padding:10px 0;
}




/* - 6.0. - CV
---------------------------------------------- */
#cv{
/*	background:url(../images/grunge-bg-2.png);*/
	overflow:hidden;
}
#cv .title{
	width:100%;
	height:80px;
	margin:0px 0px 50px 0px;
	background:url(../images/matthewadams-dot-info-cv.svg) no-repeat center center;
	text-indent:-9999px;
}
#cv p{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv .li{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv h1{
	font-family:"Montserrat", sans-serif;	
	font-size:44px;
	text-shadow:0px 1px 0px #FFF;
}
#cv h2{
	font-family:"Montserrat", sans-serif;
	font-size:34px;
	text-shadow:0px 1px 0px #FFF;
}
#cv h3{
	padding:100 0 0 0;
	font-family:"Montserrat", sans-serif;
	font-size:24px;
	text-shadow:0px 1px 0px #FFF;
}
#cv h4{
	font-family:"Montserrat", sans-serif;
	font-size:14px;
	text-shadow:0px 1px 0px #FFF;
	font-weight:900;
}
#cv .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	border-left:1px dotted #cdcdcd;
	margin:0 0 0 0;
}
#cv .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
/*#cv .right-section h3, #cv .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}*/
img {
	max-width: 100%;
	align-items: center;

}

/* - 6.2. - CV2
---------------------------------------------- */
#cv2{
/*	background:url(../images/grunge-bg-2.png);*/
	overflow:hidden;
}
#cv2 .title{
	width:100%;
	height:80px;
	margin:0px 0px 50px 0px;
	background:url(../images/matthewadams-dot-info-cv.svg) no-repeat center center;
	text-indent:-9999px;
}
#cv2 p{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv2 .li{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv2 h1{
	font-family:"Montserrat", sans-serif;	
	font-size:44px;
	text-shadow:0px 1px 0px #FFF;
}
#cv2 h2{
	font-family:"Montserrat", sans-serif;
	font-size:34px;
	text-shadow:0px 1px 0px #FFF;
}
#cv2 h3{
	padding:100 0 0 0;
	font-family:"Montserrat", sans-serif;
	font-size:24px;
	text-shadow:0px 1px 0px #FFF;
}
#cv2 h4{
	font-family:"Montserrat", sans-serif;
	font-size:14px;
	text-shadow:0px 1px 0px #FFF;
	font-weight:900;
}
#cv2 .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	border-left:1px dotted #cdcdcd;
	margin:0 0 0 0;
}
#cv2 .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
/*#cv .right-section h3, #cv .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}*/
img {
	max-width: 100%;
	align-items: center;

}

/* - 6.3. - CV3
---------------------------------------------- */
#cv3{
/*	background:url(../images/grunge-bg-2.png);*/
	overflow:hidden;
}
#cv3 .title{
	width:100%;
	height:80px;
	margin:0px 0px 50px 0px;
	background:url(../images/matthewadams-dot-info-cv.svg) no-repeat center center;
	text-indent:-9999px;
}
#cv3 p{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv3 .li{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv3 h1{
	font-family:"Montserrat", sans-serif;	
	font-size:44px;
	text-shadow:0px 1px 0px #FFF;
}
#cv3 h2{
	font-family:"Montserrat", sans-serif;
	font-size:34px;
	text-shadow:0px 1px 0px #FFF;
}
#cv3 h3{
	padding:100 0 0 0;
	font-family:"Montserrat", sans-serif;
	font-size:24px;
	text-shadow:0px 1px 0px #FFF;
}
#cv3 h4{
	font-family:"Montserrat", sans-serif;
	font-size:14px;
	text-shadow:0px 1px 0px #FFF;
	font-weight:900;
}
#cv3 .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	border-left:1px dotted #cdcdcd;
	margin:0 0 0 0;
}
#cv3 .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
/*#cv .right-section h3, #cv .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}*/
img {
	max-width: 100%;
	align-items: center;

}

/* - 6.4. - CV4
---------------------------------------------- */
#cv4{
/*	background:url(../images/grunge-bg-2.png);*/
	overflow:hidden;
}
#cv4 .title{
	width:100%;
	height:80px;
	margin:0px 0px 50px 0px;
	background:url(../images/matthewadams-dot-info-cv.svg) no-repeat center center;
	text-indent:-9999px;
}
#cv4 p{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv4 .li{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv4 h1{
	font-family:"Montserrat", sans-serif;	
	font-size:44px;
	text-shadow:0px 1px 0px #FFF;
}
#cv4 h2{
	font-family:"Montserrat", sans-serif;
	font-size:34px;
	text-shadow:0px 1px 0px #FFF;
}
#cv4 h3{
	padding:100 0 0 0;
	font-family:"Montserrat", sans-serif;
	font-size:24px;
	text-shadow:0px 1px 0px #FFF;
}
#cv44 h4{
	font-family:"Montserrat", sans-serif;
	font-size:14px;
	text-shadow:0px 1px 0px #FFF;
	font-weight:900;
}
#cv4 .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	border-left:1px dotted #cdcdcd;
	margin:0 0 0 0;
}
#cv4 .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
/*#cv .right-section h3, #cv .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}*/
img {
	max-width: 100%;
	align-items: center;

}

/* - 6.5. - CV5
---------------------------------------------- */
#cv5{
/*	background:url(../images/grunge-bg-2.png);*/
	overflow:hidden;
}
#cv5 .title{
	width:100%;
	height:80px;
	margin:0px 0px 50px 0px;
	background:url(../images/matthewadams-dot-info-cv.svg) no-repeat center center;
	text-indent:-9999px;
}
#cv5 p{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv5 .li{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv5 h1{
	font-family:"Montserrat", sans-serif;	
	font-size:44px;
	text-shadow:0px 1px 0px #FFF;
}
#cv5 h2{
	font-family:"Montserrat", sans-serif;
	font-size:34px;
	text-shadow:0px 1px 0px #FFF;
}
#cv5 h3{
	padding:100 0 0 0;
	font-family:"Montserrat", sans-serif;
	font-size:24px;
	text-shadow:0px 1px 0px #FFF;
}
#cv5 h4{
	font-family:"Montserrat", sans-serif;
	font-size:14px;
	text-shadow:0px 1px 0px #FFF;
	font-weight:900;
}
#cv5 .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	border-left:1px dotted #cdcdcd;
	margin:0 0 0 0;
}
#cv5 .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
/*#cv .right-section h3, #cv .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}*/
img {
	max-width: 100%;
	align-items: center;

}
/* - 6.6. - CV6
---------------------------------------------- */
#cv6{
/*	background:url(../images/grunge-bg-2.png);*/
	overflow:hidden;
}
#cv6 .title{
	width:100%;
	height:80px;
	margin:0px 0px 50px 0px;
	background:url(../images/matthewadams-dot-info-cv.svg) no-repeat center center;
	text-indent:-9999px;
}
#cv6 p{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv6 .li{
	font-family:"Montserrat", sans-serif;
	font-size:13px;
	line-height:1.7em;
	text-shadow:0px 1px 0px #FFF;
	margin:13px 0 13px 0;
}
#cv6 h1{
	font-family:"Montserrat", sans-serif;	
	font-size:44px;
	text-shadow:0px 1px 0px #FFF;
}
#cv6 h2{
	font-family:"Montserrat", sans-serif;
	font-size:34px;
	text-shadow:0px 1px 0px #FFF;
}
#cv6 h3{
	padding:100 0 0 0;
	font-family:"Montserrat", sans-serif;
	font-size:24px;
	text-shadow:0px 1px 0px #FFF;
}
#cv6 h4{
	font-family:"Montserrat", sans-serif;
	font-size:14px;
	text-shadow:0px 1px 0px #FFF;
	font-weight:900;
}
#cv6 .right-section{
	padding:0 0 0 43px;
	float:right;
	width:403px;
	border-left:1px dotted #cdcdcd;
	margin:0 0 0 0;
}
#cv6 .left-section{
	padding:0 0 0 0;
	float:left;
	width:430px;
	margin:0 0 30px 0;
}
/*#cv .right-section h3, #cv .left-section h3{
	font-family:"Montserrat", sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
}*/
img {
	max-width: 100%;
	align-items: center;

}




/* - 10.0. - BELIEFS 
---------------------------------------------- */
#beliefs{
	background:url(../images/grunge-bg-2.png);
	overflow:hidden;
}
#beliefs .title{
	width:100%;
	height:135px;
	background:url(../images/beliefs-title.png) no-repeat center center;
	text-indent:-9999px;
}
.beliefs-items{
	overflow:hidden;
}
.beliefs-items li{
	width:270px;
	list-style:none;
	float:left;
	margin:0 21px 20px 0;
	position:relative;
}
.beliefs-items li a{
	color:#444;
}
.beliefs-items li.last{
	margin-right:0px;
}
.beliefs-items li .option-overlay{
	display:none;
	position:absolute;
	top:10px;
	left:10px;
	width:260px;
	height:139px;
	z-index:100;
	background:url(../images/magnify-preview.png) center center no-repeat rgb(0,0,0);
	background:url(../images/magnify-preview.png) center center no-repeat rgba(0,0,0,0.7);
	text-indent:-9999px;
}
.beliefs-items li .option-overlay a{
	color:#FFF;
	width:260px;
	text-align:center;
	display:block;
	font-weight:600;
}
.beliefs-items li .option-overlay span{
	color:#FFF;
	width:260px;
	text-align:center;
	font-size:9px;
	display:block;
	padding:10px 0;
}
.beliefs-title{
	font-size:14px;
	font-weight:300;
	margin:10px 0 0 0;
	height:25px;
}
.beliefs-image{
	width:260px;
	height:139px;
	padding:10px;
	display:block;
	background:url(../images/portfolio-item-bg.png);
}
.beliefs-role{
	color:#999;
	font-size:12px;
	padding:0 0 0 5px;
}

​




/* - 11.0. - PLAY
---------------------------------------------- */
#play{
	/*background:url(../images/grunge-bg-2.png);*/
}
#play .title{
	width:100%;
	height:161px;
	background:url(../images/play-title.png) no-repeat center center;
	text-indent:-9999px;
}



/* - 12.0. - CONTACT
---------------------------------------------- */
#contact .title{
	width:100%	;
	height:80px;
	margin:50px 0px 50px 0px;
	background:url(../images/matthewadams-dot-info-contact.svg) no-repeat center center;
	text-indent:-9999px;
}

#contact{
/*	background:url(../images/grunge-bg-2.png);*/
	border-bottom:dotted;
	padding-bottom:0px;
	margin:0 auto;
	
}
#contact .constraint{
	width:764px;
}
#contact .thanks{
	width:100%;
	text-align:center;
}
.contact-title{
	font-family:"Montserrat", sans-serif;
	font-size:50px;
	font-weight:300;
	text-align:center;
	margin:50px 0 40px 0;
	height:25px;
}

#contact .contact-form{
	float:right;
	width:486px;
}
#contact .contact-form label{
	display:block;
	margin:0 0 5px 0;
	font-size:18px;
	color:#555;
	letter-spacing:-0.5px;
	position:absolute;
	left:-9999px;
}
#contact .contact-form ul{
	margin:0;
	overflow:hidden;
}
#contact .contact-form ul li{
	list-style:none;
	overflow:hidden;
	float:left;
	padding-bottom:10px;
}
#contact .contact-form ul li.odd{
	padding-right:10px;
}
#contact .contact-form ul li.full-length{
	margin:0px;
}
#contact .contact-form ul li.submit-button{
	width:100%;
}
#contact .contact-form ul li.send-copy label:hover{
	cursor:pointer;
}
#contact .contact-form ul li.send-copy label{
	font-size:16px;
}
#contact .contact-form ul li.send-copy input{
	display:block;
	float:left;
	width:auto;
	margin:2px 10px 0 0;
}
#contact .contact-form ul li.send-copy input:hover{
	cursor:pointer;
}
#contact .contact-form small{
	color:#999;
}
#contact .contact-form input{
	font-family:"nimbus-sans-condensed","Helvetica Neue","Arial";
	border:1px solid #BABABA;
	background:#FFF;
	width:216px;
	padding:10px;
	font-size:14px; 
	color:#666;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
	-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
	-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
	color:#999;
}
#contact .contact-form input:focus{
	color:#444;
}
#contact .contact-form em.error{
	font-size:12px;
}
#contact .contact-form textarea{
	font-family:"nimbus-sans-condensed","Helvetica Neue","Arial";
	width:464px;
	height:100px;
	border:1px solid #BABABA;
	background:#FFF;
	padding:10px;
	font-size:14px; 
	color:#999;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
	-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
	-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03));
}
#contact .contact-form textarea:focus{
	color:#444;
}
#contact .contact-form button{
	clear:both;
}
#contact .right-section{
	float:left;
	width:248px;
}
#contact .right-section h3{
	font-size:18px;
	margin-top:0px;
}
#contact .right-section p{
	font-size:13px;
	font-weight:300;
}
#contact .right-section ul.contact-list{
	font-size:13px;
	font-weight:600;
	line-height:24px;
}
#contact .right-section ul.contact-list li{
	list-style:none;
}


/* - 13.0. - FOOTER
---------------------------------------------- */

#footer{
	width:100%;
	padding:20px 0px;
	text-align:center;
	clear:both;
	background:url(../images/grunge-bg-2.png);
	overflow:hidden;
}
#footer p{
	color:#999;
}
#footer .right-section{
	padding:0 0 0 43px;
	float:right;
	width:405px;
	margin:0 0 30px 0;
/*	border-left:5px dotted #cdcdcd;*/
}
#footer .left-section{
	padding:0 0 0 0;
	float:left;
	width:450px;
	margin:0 0 30px 0;
}
#footer .left-section .chart{
	width:362px;
	height:362px;
	background:url(../images/matthewadams.png) no-repeat;
	margin:20px auto 0 auto;
	display:block;
}


/* - 13.0. - COACHING
---------------------------------------------- */

/* — Coaching page: layout, typography, lists & utility fixes — */

/* Wrapper for each section */
#who, #how, #expect, #costs, #start, #testimonials {
  border-bottom: 0 dashed #999;
  overflow: hidden;
  padding: 40px 0;
}

/* Two-column layout for “Who it’s for” */
#who .left-section {
  float: left;
  width: 430px;
  margin: 0 0 30px 0;
  padding: 0;
}
#who .right-section {
  float: right;
  width: 403px;
  padding: 0 0 0 43px;
}

/* 5-column grid */
.grid-5 {
  overflow: hidden;
  margin: 0 -1%;
}
.grid-5 .col {
  float: left;
  width: 20%;
  padding: 0 1%;
  box-sizing: border-box;
}

/* Center the “Getting started” section */
#start {
  text-align: center;
}

/* Typography for section headings */
#who h2,
#how h2,
#expect h2,
#costs h2,
#start h2,
#testimonials h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 100;
  margin-bottom: 20px;
  text-align: center;
}
#who .strapline {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 30px;
}
#how h3,
#expect h3,
#costs h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 20px 0 10px;
}
/* Body copy */
#who p,
#how p,
#expect p,
#costs p,
#start p,
#testimonials p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Tablet: collapse 5-cols to 3 */
@media screen and (max-width: 880px) {
  .grid-5 .col {
    width: 33.3333%;
  }
}

/* Mobile: single column */
@media screen and (max-width: 600px) {
  #who .left-section,
  #who .right-section,
  .grid-5 .col {
    float: none !important;
    width: 100%    !important;
    margin: 0 0 30px 0 !important;
    padding: 0           !important;
  }
  #start {
    padding: 20px 0 !important;
  }
}

/* Pin social icons & back-to-top */
#social-icons {
  position: fixed !important;
  top: 20px !important;
  left: 15px !important;
  z-index: 200;
}
#to-top-button {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 200;
}

/* Restore contact section width */
#contact .constraint {
  width: 900px !important;
}

/* Full-width footer */
#footer {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 20px 0 !important;
  background-position: center bottom;
  overflow: hidden;
}

/* Coaching-page list styling with hanging indent */
#who ul,
#how ul,
#expect ul,
#costs ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  margin: 0 0 1em 1.5em !important;
  padding-left: 1.5em !important;
}
#who ul li,
#how ul li,
#expect ul li,
#costs ul li {
  text-indent: -1.5em !important;
  line-height: 1.5 !important;
  margin-bottom: 0.5em !important;
}

/* Restore visible bullets for coaching lists */
#who ul,
#how ul,
#expect ul,
#costs ul {
  list-style: disc inside !important;   /* place bullet inside the box */
  margin: 0 0 1em !important;           /* bottom spacing */
  padding-left: 1.5em !important;       /* indent text */
}

#who ul li,
#how ul li,
#expect ul li,
#costs ul li {
  text-indent: 0 !important;            /* no negative indent */
  line-height: 1.5 !important;          /* comfortable reading */
}



/* — coaching.css — */

/* Sections wrapper */
#who,
#how,
#expect,
#costs,
#start,
#testimonials {
  border-bottom: 0 dashed #999;
  overflow: hidden;
  padding: 40px 0;
}

/* Two-column “Who it’s for” */
#who .left-section {
  float: left;
  width: 430px;
  margin: 0 0 30px 0;
  padding: 0;
}
#who .right-section {
  float: right;
  width: 403px;
  padding: 0 0 0 43px;
}

/* Five-column grid */
.grid-5 {
  overflow: hidden;
  margin: 0 -1%;
}
.grid-5 .col {
  float: left;
  width: 20%;
  padding: 0 1%;
  box-sizing: border-box;
}

/* “Get started” centering */
#start {
  text-align: center;
}

/* Body copy */
#who p,
#how p,
#expect p,
#costs p,
#start p,
#testimonials p {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: center;

}

/* Collapse on tablet/mobile */
@media screen and (max-width: 880px) {
  .grid-5 .col { width: 33.3333%; }
}
@media screen and (max-width: 600px) {
  #who .left-section,
  #who .right-section,
  .grid-5 .col {
    float: none !important;
    width: 100% !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
  }
  #start { padding: 20px 0 !important; }
}

/* Pin social & back-to-top */
#social-icons { position: fixed; top: 20px; left: 15px; z-index: 200; }
#to-top-button { position: fixed; bottom: 20px; right: 20px; z-index: 200; }

/* Full-width footer */
#footer {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 20px 0;
  background-position: center bottom;
  overflow: hidden;
}

/* Bulleted lists with hanging indent */
#who ul,
#how ul,
#expect ul,
#costs ul {
  list-style: disc inside;
  margin: 0 0 1em;
  padding-left: 1.5em;
}
#who ul li,
#how ul li,
#expect ul li,
#costs ul li {
  text-indent: 0;
  line-height: 1.5;
  margin-bottom: 0.5em;
}

/* Image‐above‐copy on desktop in “How it works” */
@media screen and (min-width: 601px) {
  .how-grid .col {
    float: left;
    width: 20%;
    padding: 0 1%;
    box-sizing: border-box;
    display: block !important;
  }
  .how-grid .col img {
    margin-top: 0 !important;
    margin-bottom: 1em !important;
    display: block !important;
  }
  .how-grid {
    margin: 0 -1% !important;
  }
}

/* — Global H1 for coaching page — */
#who h1,
#how h1,
#expect h1,
#costs h1,
#start h1,
#testimonials h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 45px;        /* ← change once to affect ALL H2’s */
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  margin: 0.5em 0 1em;
  color: #190933;
}


/* — Global H2 for coaching page — */
#who h2,
#how h2,
#expect h2,
#costs h2,
#start h2,
#testimonials h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;        /* ← change once to affect ALL H2’s */
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  margin: 0.5em 0 1em;
  color: #222;
}

/* — Global H3 for coaching page — */
#who h3,
#how h3,
#expect h3,
#start h3,
#costs h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;        /* ← change once to affect ALL H3’s */
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  margin: 1em 0 0.5em;
  color: #190933;
}

/* — Optional override class — */
.coaching-heading {
  /* if you still want a handful of H3’s to differ, override here */
  /* e.g. font-size: 20px !important; color: #e50000 !important; */
  text-align: center;
}


/* — Testimonials Carousel — */
#testimonials .testimonial-carousel {
  position: relative;    /* keep slides on top of each other */
  overflow: visible;     /* allow the active slide to grow un-cropped */
  min-height: 50px;         /* remove any old forced min-height */
}

#testimonials .testimonial-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 1;
}

#testimonials .testimonial-slide.active {
  opacity: 1;
  z-index: 2;
}

#testimonials .testimonial-slide blockquote footer {
  font-size: 11px;      /* ↓ change this */
  font-style: italic;   /* ↑ normal, italic, oblique */
  text-align: center;    /* ← left | center | right */
  margin-top: 5px;      /* ↑ space above your name */
}

/* — Testimonials: mobile-friendly single-slide, no clipping — */
@media screen and (max-width: 600px) {
  /* 1) Let the container grow to fit the slide */
  #testimonials .testimonial-carousel {
    overflow: visible !important;
    min-height: auto !important;
  }

  /* 2) Take slides out of absolute so their height contributes to the page flow */
  #testimonials .testimonial-slide {
    position: relative !important;
    display: none !important;      /* hide all by default */
    opacity: 1 !important;          /* disable fade animation */
    transition: none !important;
  }
  #testimonials .testimonial-slide.active {
    display: block !important;      /* show the active one as a block */
  }
}

#start{
	background:url(../images/grunge-bg-2.png);
	overflow:hidden;
}






.grid-5 .col p {
  text-align: left !important;
}

#who .left-section p,
#who .right-section p {
  text-align: left !important;
}




/* ─────────────────────────────────────────────
   “What to Expect” — checkmark bullets only
   (replace everything you have for #expect lists)
───────────────────────────────────────────── */

#expect .grid-5 .col ul {
  list-style: none;   /* kill the default circle */
  margin: 0 0 4em;
  padding: 0;
}

#expect .grid-5 .col ul li {
  position: relative;
  padding-left: -4em;   /* ← TEXT INDENT: move text (and check’s container) left/right */
  margin-bottom: 1em;    /* vertical gap between items */
  line-height: 1.4;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  text-shadow: 0px 1px 0px #FFF;
}

#expect .grid-5 .col ul li::before {
  content: "✔︎";
  position: absolute;
  top: 0;
  left: -3.1em;          /* ← BULLET OFFSET: move check left/right */
  color: #665687;
  font-size: 1em;
}




/* ─────────────────────────────────────────────
   “What to Expect” — plain inline check bullets
───────────────────────────────────────────── */

/* 1) Kill all the old bullets & resets */
#expect .grid-5 .col ul,
#expect .grid-5 .col ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2) Basic vertical spacing between items */
#expect .grid-5 .col ul li {
  margin-bottom: 1em;
}

/* 3) Inject a check, then a tiny gap—and that’s it */
#expect .grid-5 .col ul li::before {
  content: "✔︎";
  color:    #665687;
  margin-right: .5em;   /* ← TWEAK THIS for your desired gap */
}
#expect .grid-5 .col ul li {
  margin-left: 0em;  /* or 0.25em, 0.1em—whatever brings the block closer to the left edge */
}


/* 1) First make sure you’re inside the right section */
/* e.g. if this lives under #presentation */
#presentation ol {
  margin: 0 0 1em 1.5em;
  padding: 0;
  list-style-position: outside;
}

/* 2) Then restyle the little number‐bullets */
#presentation ol li::marker {
  /* copy exactly your <p> typographic styles */
  font-family: "Montserrat", sans-serif;
  font-size:    13px;
  font-weight:  300;           /* or whatever weight you use in <p> */
  line-height:  1.3em;         /* match your paragraph line‐height */
  color:        #444;          /* same color as your <p> */
  
  /* and if you want them big and bold, tweak these: */
  font-size:    2em;           /* bump up the number size */
  font-weight:  600;           /* bold it if desired */
  color:        #222;          /* darker, if that’s your design */
  
  /* adjust the spacing from the text */
  /* note: ::marker doesn’t respect margin, so use `list-style-position: inside` + padding */
}

/* 3) To tighten or loosen the gap you'll need to switch to inside markers */
#presentation ol {
  list-style: decimal inside;
}
#presentation ol li {
  padding-left: 0.5em;  /* moves text under the number */
}



/* 1) Force #samples to drop below any preceding floats/positioned elements */
#samples {
  clear: both;
}

/* 2) Contain any internal floats so the section’s height wraps around its contents */
#samples .constraint {
  overflow: auto;
}

/* ensure #samples wraps its floated children */
#samples::after {
  content: "";
  display: table;
  clear: both;
}




/* CONSULT MODAL */
/* ==== GLOBAL ==== */
body { margin:0; font-family:'Montserrat',sans-serif; background:#fff; }
.version-label { text-align:center; font-size:.85rem; color:#666; margin:16px 0; }

/* ==== INVITE BUTTON ==== */
#openBtn {
  display:block; margin:0 auto 40px; padding:12px 20px;
  font-size:1rem; background:#2885e4; color:#fff;
  border:none; border-radius:20px; cursor:pointer;
}

/* ==== OVERLAY & MODAL ==== */
.overlay {
  position:fixed; inset:0; background:rgba(255,255,255,0.9);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal {
  position:relative; width:90vw; max-width:420px; margin:0 20px;
  background:#888; border-radius:24px; box-shadow:0 4px 20px rgba(0,0,0,0.1);
  transition:height .3s ease; overflow:hidden; display:flex; flex-direction:column;
}
.modal-close {
  position:absolute; top:12px; right:12px; background:none; border:none;
  font-size:1.8rem; color:#333; cursor:pointer;
}
.modal-content {
  padding:50px 20px 100px; opacity:0; transition:opacity .4s;
  box-sizing:border-box;
}
.modal-content.visible { opacity:1; }

/* ==== TYPO ==== */
.modal-question {
  text-align:center; font-size:1.25rem; font-weight:500; color:#222;
  margin-bottom:24px;
}
.branch-label {
  text-align:center; font-size:1rem; font-weight:700; color:#222;
  margin-bottom:8px;
}

/* ==== STEP 0 ==== */
.audience-list { display:flex; flex-direction:column; gap:16px; }
.audience-btn {
  background:#2885e4; color:#fff; border-radius:24px; padding:14px 16px;
  font-size:1rem; font-weight:500; border:2px solid transparent;
  cursor:pointer; transition:background .2s,color .2s; text-align:center;
}
.audience-btn:hover,
.audience-btn:active,
.audience-btn.selected {
  background:#fff; color:#222;
}

/* ==== INPUT ==== */
.text-input {
  width:100%; box-sizing:border-box; min-height:60px;
  border:none; border-radius:12px; padding:12px; font-size:1rem;
  font-family:'Montserrat',sans-serif; font-style:italic;
  box-shadow:0 1px 4px rgba(0,0,0,0.1); margin-bottom:16px; resize:vertical;
}
.text-input::placeholder { font-style:italic; opacity:.7; }

/* ==== CHITS ==== */
.chits {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-bottom:16px;
}
.chit {
  background:#2885e4; color:#fff; border:none; border-radius:16px;
  padding:8px 14px; font-size:.94rem; font-weight:500; cursor:pointer;
  transition:opacity .2s;
}
.chit:hover,
.chit:active { opacity:.8; }
.chit.selected {
  background:#fff!important; color:#000!important; opacity:1!important;
}

/* ==== PROGRESS & NAV ==== */
.nav-row {
  position:absolute; bottom:24px; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 20px; box-sizing:border-box;
}
.dots { display:flex; gap:12px; }
.dot {
  width:24px; height:24px; border-radius:50%;
  border:2px solid #2885e4; background:transparent;
  transition:background .2s;
}
.dot.active { background:#2885e4; }

.next-btn {
  position:absolute; bottom:10px; right:10px;
  width:60px; height:60px; border-radius:50%;
  background:#2885e4; color:#fff; font-size:2rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:.32; pointer-events:none; transition:opacity .2s;
}
.next-btn.enabled { opacity:1; pointer-events:auto; }

/* Hide arrow on steps 4 & 5 */
.modal[data-step="4"] .next-btn,
.modal[data-step="5"] .next-btn {
  display:none;
}



/* ==== CLARITY FINDER MODAL STYLES v2.23 ==== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  position: relative;
  width: 90vw;
  max-width: 420px;
  margin: 0 20px;
  background: #888;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: height 0.3s ease;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #333;
  cursor: pointer;
}
.modal-content {
  padding: 50px 20px 100px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.4s;
  min-height: 200px;
}
.modal-content.visible {
  opacity: 1;
}
.modal-question {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  color: #222;
  margin-bottom: 24px;
}
.branch-label {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
.audience-list { display: flex; flex-direction: column; gap: 16px; }
.audience-btn {
  background: #2885e4; color: #fff; border-radius: 24px;
  padding: 14px 16px; font-size: 1rem; font-weight: 500;
  border: 2px solid transparent; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.audience-btn:hover,
.audience-btn:active,
.audience-btn.selected {
  background: #fff; color: #222;
}
.text-input {
  width: 100%; box-sizing: border-box; min-height: 60px;
  border: none; border-radius: 12px; padding: 12px; font-size: 1rem;
  font-family: 'Montserrat', sans-serif; font-style: italic;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1); margin-bottom: 16px; resize: vertical;
}
.text-input::placeholder { font-style: italic; opacity: 0.7; }
.chits {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 16px;
}
.chit {
  background: #2885e4; color: #fff; border: none; border-radius: 16px;
  padding: 8px 14px; font-size: 0.94rem; font-weight: 500;
  cursor: pointer; transition: opacity 0.2s;
}
.chit:hover,
.chit:active { opacity: 0.8; }
.chit.selected { background: #fff !important; color: #000 !important; opacity: 1 !important; }
.nav-row {
  position: absolute; bottom: 24px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 20px; box-sizing: border-box;
}
.dots { display: flex; gap: 12px; }
.dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #2885e4; background: transparent;
  transition: background 0.2s;
}
.dot.active { background: #2885e4; }
.next-btn {
  position: absolute; bottom: 10px; right: 10px;
  width: 60px; height: 60px; border-radius: 50%;
  background: #2885e4; color: #fff; font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.32; pointer-events: none; transition: opacity 0.2s;
}
.next-btn.enabled { opacity: 1; pointer-events: auto; }
/* Hide arrow on final steps */
.modal[data-step="4"] .next-btn,
.modal[data-step="5"] .next-btn { display: none; }