/* CSS Stylesheet */

/* iPhone 12 Pro Max or similar */

@media only screen and (max-width: 480px) {

	.mobile-hide {
		display: none;
	}

	.mobile-show {
		display: block;
	}

	.container {
		margin: 0 auto;
		width: 82.6086957%; /* 342px / 414px */
	}

	header nav {
		display: none;
	}

	.hero {
		padding-bottom: 28px;
		padding-top: 28px;
	}

		.hero .label {
			font-size: .9375em; /* 15px / 16px */
			margin-bottom: 16px;
		}

		.hero h1 {
			font-size: 3.5em; /* 56px / 16px */
			margin-bottom: 16px;
			max-width: 100%;
			width: 100%;
		}

		.hero p {
			font-size: 1.25em; /* 20px / 16px */
			margin-bottom: 174px; /* 114px + 60px */
			max-width: 100%;
			padding-bottom: 0px;
		}

		.hero-image {
			display: none;
		}

	.cb1 {
		padding: 80px 0;
		position: relative;
	}

		.cb1 .mobile-hero-image {
				display: block;
				position: absolute;
				right: 0;
				top: -170px;
		}

			.cb1 .mobile-hero-image img {
				border-radius: 16px 0 0 36px;
			}

		.cb1 .client-logos {
			display: none;
		}

		.cb1 .mobile-client-logos {
			display: block;
			max-width: 100%;
			overflow: hidden;
		}

	.cb2 {
		padding-bottom: 20px;
	}

	.cb3 {
		padding: 80px 0 32px;
	}

		.cb3 .title {
			font-size: 3em; /* 48px / 16px */
			margin-bottom: 60px;
			padding: 20px 0 22px;
			width: 82.6086957%; /* 342px / 414px */
		}

		.cb3 .left,
		.cb3 .right {
			padding: 0;
			width: 100%;
		}

		.cb3 .left img {
			width: 100%;
			height: auto;
		}

		.cb3 .left img.mobile-show {
			margin-bottom: 60px;
		}

		.cb3 .right section {
			margin-bottom: 48px;
		}

		.cb3 .right .heading {
			font-size: .619047619em; /* 13px / 21px */
			margin-bottom: 12px;
		}

		.cb3 .right .specialisations {
			margin-bottom: 14px;
		}

		.cb3 .right p {
			font-size: .8095238095em; /* 17px / 21px */
		}

		.cb3 .right li {
			font-size: 1em; /* 21px */
			margin-bottom: 0;
			padding-bottom: 16px;
			padding-left: 0;
		}

	.cb4 {
		padding: 80px 0;
	}

		.cb4 .container {
			margin: 0 auto;
			width: 82.60869565%; /* 342px / 414px */
		}

		.cb4 .slider-container {
			height: 210px;
			margin-bottom: 60px;
		}

		.cb4 .mobile-slider-background {
			background: url("../img/mobile-devices.png") repeat-x;
		}

		.cb4 .left,
		.cb4 .right {
			width: 100%;
		}

		.cb4 .row {
			border-bottom: 0;
			padding-bottom: 0;
		}

		.cb4 .left {
			border-bottom: 1px solid #2B2B2B;
		}

		.cb4 .title {
			font-size: 2.75em; /* 44px / 16px */
			font-weight: 500;
			letter-spacing: -3px;
			margin-bottom: 8px;
		}

		.cb4 ul {
			margin-top: 28px;
		}

		.cb4 li {
			margin-bottom: 24px;
		}

		.cb4 li:last-child {
			margin-bottom: 0;
			padding-bottom: 2px;
		}

	.portfolio .title {
		font-size: 2.375em; /* 38px / 16px */
		font-weight: 600;
		margin-left: 0;
	}

	.portfolio .slide {
		margin: 5px;
		width: auto;
	}

		.portfolio .slide img {
			border-radius: 16px;
			width: 374px; /* 374px / 414px */
			height: auto;
		}

	.portfolio .dot {
		height: 8px;
		margin: 0 4px;
		width: 8px;
	}

	.project-info {
		display: none;
	}

	.mobile-project-info {
		display: block;
		margin: 0 auto 48px;
		max-width: 100%;
		width: 100%;
	}

		.mobile-project-info .col-2 {
			margin-bottom: 14px;
			width: 100%;
		}

		.mobile-project-info .border-bottom {
			border-bottom: 1px solid #ddd;
			margin-bottom: 0;
			padding-bottom: 20px;
		}

}

/* iPhone 12 or similar */

@media only screen and (max-width: 375px) {

	.portfolio .slide {
		margin: 4px;
	}

		.portfolio .slide img {
			border-radius: 12px;
			width: 338px; /* 374px / 414px */
		}

}