@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,500,700&display=swap');

:root {
	--ntext: 15px/20px IBM Plex Sans;
	--lgrey: rgb(243, 243, 243);
	--blue: rgb(104, 172, 225);
	--purple: rgb(141, 134, 252);
	--green: rgb(109, 222, 210);
	--red: rgb(235, 139, 140);
	--lblack: #333333;
	/* Enter variable to tcol which is theme colour */
	--tcol: var(--blue);
	--width: 90%
}

@media (min-width: 1440px) {
	:root {
		--width: 60%
	}
}
@media (max-width: 1024px) {
	:root {
		--ntext: 15px/18px IBM Plex Sans;
	}
	
	.tool-container .tool-grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	.under-container .under-grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	.down-section .down-grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	.under-grid .tool-under-image {
		grid-column-start: 1;
		grid-column-end: 3;
		text-align: center;
	}
	
	.f-deck-image {
		grid-column-start: 1;
		grid-column-end: 3;
	}
	
	.under-grid .tool-understand {
		padding: 20px;
	}
	
	.under-grid .tool-steps ol {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	.f-container .f-grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	.f-grid .f-how-to {
		margin: 0;
		margin-bottom: 20px;
	}
	
	.f-grid .f-question-bank {
		margin: 0;
	}
	
	.down-grid .tool-card-image {
		padding: 20px;
	}
	
	.down-grid .f-deck-image {
		padding: 20px;
	}
}
	
body {
	width: 100%;
	margin: 0;
}

.header-section {
	width: 100%;
	margin: 0;
	top: 0;
	background: var(--lblack);
	padding: 0;
}
.footer-section {
	width: 100%;
	margin: 0;
	background: var(--lblack);
	padding: 0;
	bottom: 0;
}

.header-container {
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	width: var(--width);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	text-decoration: none;
	align-content: center;
	align-items: center;
}

.header-container h1 a {
	text-decoration: none;
	color: white;
}

.header-container h1 {
	margin: 0;
	font: 20px/22px IBM Plex Sans;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	color: white;
}

.header-container p {
	font: var(--ntext);
	color: white;
	font-weight: 300;
}

.header-link {
	padding: 0;
	margin: 0;
}

.tool-container {
	width: 100%;
	margin: 0;
}

.tool-section {
	width: var(--width);
	margin-left: auto;
	margin-right: auto;
}

.form-section {
	width: var(--width);
	margin-left: auto;
	margin-right: auto;
	background-color: #fafafa;
}

.tool-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 70px;
	margin-top: 50px;
}

.tool-name {
	border-radius: 4px;
	margin: 10px 4px 10px 4px;
	padding: 15px;
	display: block;
}

.tool-name-text {
	margin: 0 0 20px 0;
}

.tool-name-text a {
	color: white;
}

.tool-name-text h3 {
	font: 15px/20px IBM Plex Sans;
	font-weight: 700;
	margin: 0 0 5px 0;
	letter-spacing: 1px;
}

.tool-name-text h3 span {
	font-weight: 300;
}

.tool-name-text h1 {
	font: 60px/65px IBM Plex Sans;
	font-weight: 500;
	letter-spacing: -0.9px;
	margin: 10px 0 35px 0;
	color: var(--tcol);
}

.tool-name-text .line {
	background: black;
	width: 100%;
	height: 5px;
	color: black;
	margin: 0 0 10px 0;
}

.tool-name-text p {
	font: var(--ntext);
	font-weight: 500;
	padding: 5px 15px 5px 15px;
	display: inline;
	background: black;
	color: white;
	margin: 0;
}

.tool-about {
	margin-bottom: 30px;
}

.tool-about p {
	font: var(--ntext);
	font-weight: 300;
	margin: 0;
}

.tool-about h2 {
	font: 18px/24px IBM Plex Sans;
	font-weight: 700;
	margin: 0;
	color: var(--tcol);
}

.tool-about ul {
	font: var(--ntext);
	font-weight: 300;
	margin: 0;
	padding: 0px 20px 0px 20px;
}

.tool-about li {
	margin-bottom: 1em;
}

.tool-use-case {
	margin-bottom: 30px;
}

.tool-use-case h2 {
	font: 18px/24px IBM Plex Sans;
	font-weight: 700;
	margin: 0;
	color: var(--tcol);
}

.tool-use-case ul {
	margin: 0;
	padding: 0px 20px 0px 20px;
}

.tool-use-case li {
	font: var(--ntext);
	font-weight: 300;
	margin-bottom: 0.5em;
}

.tool-use-case li span {
	font-weight: 700;
}

.tool-limitations {
	margin-bottom: 30px;
}

.tool-limitations p {
	font: var(--ntext);
	font-weight: 300;
	margin: 0;
}

.tool-limitations h2 {
	font: 18px/24px IBM Plex Sans;
	font-weight: 700;
	margin: 0;
	color: var(--tcol);
}

.under-section {
	width: 100%;
	background: var(--tcol);
	padding: 20px 0 20px 0;
}

.under-container {
	width: var(--width);
	margin-left: auto;
	margin-right: auto;
}

.under-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-radius: 4px;
	padding: 30px 0 30px 0;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.tool-under-image {
	border-radius: 4px;
	margin: 10px 4px 10px 4px;
	/*padding: 15px;*/
	/*text-align: center;*/
}

.tool-under-image img {
	width: 100%;
	margin: 5px;
	margin: auto;
	border-radius: 4px;
	transition: transform .2s;
}

.tool-under-image img:hover {
	transform: scale(1.2);
}

.tool-image-illustration {
	border-radius: 4px;
	margin: 10px 4px 10px 4px;
	padding: 0px;
	display: flex;
	flex-direction: column;
	position: relative;
	text-align: center;
}

.tool-image-illustration img {
	width: 90%;
	margin: auto;
	text-align: center;
	transition: transform .2s;
}

.tool-image-illustration img:hover {
	transform: scale(1.2);
}

.ref-link {
	text-align: left;
}

.ref-link h2 {
	font: 18px/24px IBM Plex Sans;
	font-weight: 700;
	margin-bottom: 3px;
	color: var(--tcol);
}

.linkin {
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	align-content: center;
	align-items: center;
	font: 20px/20px IBM Plex Sans;
	font-weight: 700;
	margin: 20px;
	text-align: center;
	color: var(--tcol);
	transition: background-size .4s;
}

.down-section {
	width: 100%;
	padding-bottom: 50px;	padding-top: 50px;
	background: white;
}

.down-container {
	width: var(--width);
	margin-left: auto;
	margin-right: auto;
}

.down-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-radius: 4px;
	padding: 30px 0 40px 0;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.pres-down-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	padding: 30px 0 40px 0;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.tool-steps {
	border-radius: 4px;
	padding: 30px;
	grid-column-start: 1;
	grid-column-end: 3;
	background: white;
}

.tool-step-grid {
	display: block;
	width: 100%;
	padding: 0px;
	color: black;
}

.tool-step-segment-title {
	font: 18px/24px IBM Plex Sans;
	font-weight: 700;
	grid-column-start: 1;
	grid-column-end: 4;
}

.tool-steps ol {
	font: var(--ntext);
	font-weight: 300;
	margin: 0;
	padding: 0px 20px 0px 20px;
	color: white;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.tool-steps li {
	margin: 1em;
	/*color: var(--tcol);*/
	color: black;
}

.tool-steps li span {
	font-weight: 700;
	color: var(--tcol);
}

.tool-step-segment-title {
	grid-column-start: 1;
	grid-column-end: 5;
	padding: 0 15px 0 15px;
}

.tool-step-segment-title h2 {
	font: 18px/24px IBM Plex Sans;
	font-weight: 700;
	color: var(--tcol);
}

.tool-step-segment {
	border-radius: 4px;
	margin: 10px 4px 10px 4px;
	padding: 15px;
	font: var(--ntext);
	font-weight: 300;
	color: black;
}

.tool-step-segment span {
	font-weight: 700;
	color: var(--tcol);
}

.tool-card-image {
	border-radius: 4px;
	padding: 20px 20px 20px 0px;
	text-align: center;
}

.f-deck-image {
	border-radius: 4px;
	padding: 20px 0px 20px 20px;
	text-align: center;
}

.f-deck-image img {
	width: 100%;
}

.tool-card-image img {
	width: 100%;
}

.tool-understand {
	border-radius: 4px;
	margin: 10px 4px 10px 4px;
	padding: 20px 20px 20px 20px;
	background: var(--tcol);
}

.tool-understand h2 {
	font: 18px/24px IBM Plex Sans;
	font-weight: 700;
	color: white;
	margin: 0;
}

.tool-understand ul {
	font: var(--ntext);
	color: white;
	font-weight: 300;
	padding: 0px 20px 0px 20px;
}

.tool-understand li {
	margin-bottom: 0.5em;
}

.tool-understand ul span {
	font-weight: 700;
}

.tool-download {
	border-radius: 4px;
	margin: 10px 4px 10px 4px;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.download-buttons {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.header-button {
	font: 15px/20px IBM Plex Sans;
	font-weight: 700;
	background: var(--lblack);
	text-decoration: none;
	padding: 10px 28px;
	border-radius: 2px;
	border-style: solid;
	border-color: white;
	border-width: 3px;
	color: white;
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s;
}

.header-button:hover {
	color: var(--lblack);
	background: white;
	cursor: pointer;
}

.download-button {
	font: 25px/30px IBM Plex Sans;
	background: white;
	width: 100%;
	font-weight: 500;
	color: black;
	text-decoration: none;
	padding: 10px 28px;
	border-radius: 2px;
	border-style: solid;
	border-width: 5px;
	border-color: var(--tcol);
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s;
	margin-top: 30px;
}

.download-button:hover {
	background: var(--tcol);
	color: white;
	cursor: pointer;
}

.f-section {
	width: 100%;
	background: var(--tcol);
	/*padding-bottom: 80px;*/
	padding: 50px 0 100px 0;
}

.f-container {
	width: var(--width);
	margin-left: auto;
	margin-right: auto;
}

.f-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0;
}

.f-how-to {
	padding: 40px;
	border-radius: 2px;
	background: white;
	margin-right: 20px;
}

.f-how-to h2 {
	font: 18px/24px IBM Plex Sans;
	font-weight: 700;
	color: var(--tcol);
}

.f-how-to h2 span {
	font-style: italic;
}

.f-how-to ol {
	font: var(--ntext);
	font-weight: 300;
	padding: 0px 20px 0px 20px;
	color: black;
}

.f-how-to ol li {
	margin-bottom: 1em;
}

.f-how-to ol span {
	font-weight: 700;
		color: var(--tcol);
}

.f-question-bank {
	padding: 40px;
	border-radius: 2px;
	background: white;
	margin-left: 20px;
}

.f-question-bank h2 {
	font: 18px/24px IBM Plex Sans;
	font-weight: 700;
	color: var(--tcol);
}

.f-question-bank ul {
	font: var(--ntext);
	font-weight: 300;
	padding: 0px 20px 0px 20px;
}

.f-question-bank li {
	margin-bottom: 0.5em;
}