@font-face {
  font-family:'HelveticaNeue-RegularCondensed';
  src:url('../fonts/HelveticaNeue/HelveticaNeue-RegularCondensed.woff');
}

@font-face {
  font-family:'HelveticaNeue-MediumCondensed';
  src:url('../fonts/HelveticaNeue/HelveticaNeue-MediumCondensed.woff');
}

@font-face {
	font-family:'HelveticaNeue-BoldCondensed';
	src:url('../fonts/HelveticaNeue/HelveticaNeue-BoldCondensed.woff');
}

@font-face {
	font-family:'HelveticaNeue-ExtBlackCondensed';
	src:url('../fonts/HelveticaNeue/HelveticaNeue-ExtBlackCondensed.woff');
}

/* width */
::-webkit-scrollbar {
  width:10px;
  height:2px;
  box-shadow:0 0 1px rgba(237, 177, 65, 1);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:rgba(237, 177, 65, 1);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:rgba(237, 177, 65, .85);
}

html {
	scroll-behavior:smooth;
}

body {
	font-family:'HelveticaNeue-RegularCondensed', Arial, Helvetica, sans-serif;
	font-size: 16px;
}

a {
	color:#000;
	text-decoration:none;
	transition:all .5s;
}

.relative {
	position:relative;
}

.absolute {
	position:absolute;
}

.block {
	display:block;
}

.flex {
	display:flex;
}

.flex-col {
	flex-direction:column;
}

.flex-1 {
	flex:1;
}

.flex-1-5 {
	flex:1.5;
}

.flex-2 {
	flex:2;
}

.flex-vert-aligned {
	align-items:center;
}
 
.flex-hor-aligned {
	justify-content:center;
}

.full-width {
	width:100%;
}

.uppercase {
	text-transform:uppercase;
}

.fs-19 {
	font-size:19px;
}

.fs-20 {
	font-size:20px;
}

.fs-26 {
	font-size:26px;
}

.fs-32 {
	font-size:32px;
}

.fs-36 {
	font-size:36px;
}

.fs-50 {
	font-size:50px;
}

.fs-90 {
	font-size:90px;
}

.white-bg {
	background-color:rgba(255, 255, 255, 1);
}

.black-bg {
	background-color:#000;
}

.white-text {
	color:rgba(255, 255, 255, 1);
}

.orange-text {
	/*color: rgba(237, 177, 65, 1); commented by a demand */
}

.pt-50 {
	padding-top:50px;
}

.mt-40 {
	margin-top:40px;
}

.mb-40 {
    margin-bottom:40px;
}

.mt-30 {
	margin-top:30px;
}

.mb-30 {
	margin-bottom:30px;
}

.mt-20 {
	margin-top:20px;
}

.mb-10 {
	margin-bottom:10px;
}

.center-aligned {
	text-align:center;
}

.remove {
	display:none;
}

	.wrapper .container {
		max-width:1200px;
		width:100%;
		height: 100%;
		margin:auto;
		padding-left:20px;
		padding-right:20px;
	}

		.nav {
			padding-top: 22px;
			padding-bottom: 22px;
			justify-content: space-between;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			padding-left: calc(((100vw - 1200px) / 2) + 15px);
			padding-right: calc(((100vw - 1200px) / 2) + 15px);
			background: transparent;
			z-index: 1;
			transition: background .25s;
		}

		.nav.got-bgcolor {
			background: #fff;
		}

			.nav ul a {
				font-family:'HelveticaNeue-BoldCondensed';
				font-size: 17px;
			}

			.nav ul li:not(.nav-btn) a:hover {
				color: rgba(237, 177, 65, 1);
			}

			.nav ul li:not(:last-child) a {
				padding-right: 70px;
			}

				.nav-btn a {
					width: 204px;
					height: 40px;
					background-color: rgba(237, 177, 65, 1);
					border: 1px #000 solid;
				}

				.app-video-play:hover,
				.footer a:hover {
					opacity: .75;
				}

				.nav-btn span {
					margin-left: 10px;
				}

		.section {
			height: 800px;
			background-size: cover;
			background-position: center;
		}

		.section-1 {
			background-image: url("../images/backgrounds/section-1.png");
		}

			.section-1 .intro-content {
				max-width: 450px;
			}

				.section-1 .intro-content h1 {
					margin-bottom: 48px;
					font-family:'HelveticaNeue-ExtBlackCondensed';
					line-height: 90px;
				}

				.section-1 .intro-content h1:after {
					content: "";
					position: absolute;
					background-image: url("../images/pics/heading-underline.svg");
					background-repeat: no-repeat;
					left: 0;
					right: 0;
					bottom: 0;
					height: 8px;
					transform: translateY(18px);
				}

				.section-1 .intro-content strong {
					font-family:'HelveticaNeue-BoldCondensed';
				}

				.section-1 .intro-content span {
					font-family: Arial, Helvetica, sans-serif;
				}

				.app-download-btns img {
					max-width: 180px;
				}

				.app-download-btns > a:not(:last-child) img {
					margin-right: 30px;
				}

		.section-2 {
			background-image: url("../images/backgrounds/section-2.jpg");
		}

			.app-features {
				line-height: 30px;
				list-style: disc;
			}

				.app-features li:not(:last-child) {
					margin-bottom: 20px;
				}

		.section-3 {
			height: 570px;
			background-image: url("../images/backgrounds/section-3.png");
		}

			.app-manual-icons {
				display: grid;
				grid-gap: 20px 40px;
				grid-template-columns: auto auto;
			}

			.app-manual-desc {
				max-width: 490px;
				border: 4px #000 solid;
				border-radius: 10px;
				text-align: right;
			}

				.app-manual-img {
					left: 25px;
					bottom: -4px;
                    max-width: 110px;
                    width: 100%;
                    height: 277px;
                    background-image: url("../images/pics/section-3-old.png");
                    background-size: cover;
				}

				.app-manual-span {
					align-items: center;
					justify-content: end;
					padding: 30px 30px 30px 154px;
					font-family:'HelveticaNeue-MediumCondensed';
					line-height: 28px;
				}

					.app-manual-icon {
						margin-right: 10px;
					}

				.app-manual-link {
					padding-left: 154px;
					padding-right: 30px;
					line-height: 74px;
					font-family:'HelveticaNeue-ExtBlackCondensed';
				}

		.section-4567 {
			background-image: url("../images/backgrounds/section-4567.png");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: bottom;
		}

			.app-screen {
				justify-content: end;
			}

				.app-screen h3,
				.app-screen h4 {
					font-family:'HelveticaNeue-ExtBlackCondensed';
				}

				.app-screen h4 {
					line-height: 40px;
				}

				.app-screen-figure {
					margin-top: 32px;
					margin-bottom: 15px;
				}

					.section-4 .app-screen-figure .popup-1 {
						left: -200px;
						bottom: 160px;
					}

					.section-4 .app-screen-figure .popup-2 {
						right: -145px;
						bottom: 105px;
					}

					.section-5 .app-screen-figure .popup-1 {
						left: -20px;
						bottom: 105px;
					}

					.section-7 .app-screen-figure .popup-1 {
						left: -132px;
						bottom: 265px;
					}

					.section-6 .app-screen-figure .popup-1 {
						top: 145px;
						left: -195px;
					}

					.section-6 .app-screen-figure .popup-2 {
						bottom: 42%;
						right: -140px;
					}

					.section-7 .app-screen-figure .popup-2 {
						right: -180px;
						bottom: 145px;
					}

						.app-screen-figure .popup-1 > div:before {
							content: url("../images/icons/desc-indicator-1.svg");
							position: absolute;
						}

						.section-4 .app-screen-figure .popup-1 > div:before {
							right: 45%;
							bottom: -10px;
						}

						.section-5 .app-screen-figure .popup-1 > div:before {
							left: -29%;
							bottom: 15px;
						}

						.section-4 .app-screen-figure .popup-2 > div:before {
							content: url("../images/icons/desc-indicator-2.svg");
							position: absolute;
							right: 10px;
							bottom: -10px;
						}


						.section-6 .app-screen-figure .popup-2 > div:before {
							content: url("../images/icons/desc-indicator-3.svg");
							position: absolute;
							right: 4px;
							bottom: 0;
						}

						.app-screen-figure .show-comment strong {
							width: 380px;
							font-family:'HelveticaNeue-ExtBlackCondensed';
							line-height: 54px;
						}

						.section-4 .app-screen-figure .popup-1.show-comment strong {
							bottom: 50px;
							left: -145px;
						}

						.section-5 .app-screen-figure .popup-1.show-comment strong {
							bottom: 75px;
							left: -365px;
						}

						.section-7 .app-screen-figure .popup-1.show-comment strong {
							bottom: 7px;
							left: -255px;
						}

						.section-4 .app-screen-figure .popup-2.show-comment strong {
							bottom: 50px;
							right: -270px;
						}

						.section-6 .app-screen-figure .popup-2.show-comment strong {
							bottom: 12px;
							left: -95px;
						}

		.section-8 {
			background-image: url("../images/pics/section-8.jpg");
		}

			.app-video span {
				font-family:'HelveticaNeue-ExtBlackCondensed';
				line-height: 54px;
			}

			.app-video-play {
				width: 98px;
				height: 98px;
				background: rgba(237, 177, 65, 1);
				border-radius: 100%;
			}

		.section-9 {
			background-image: url("../images/backgrounds/section-9.png");
			background-size: contain;
			background-position: right;
			background-repeat: no-repeat;
		}

		.toughbuilt-connect:before {
			content: "";
			position: absolute;
			top: calc(50% - 112.5px);
			left: 0;
			right: 0;
			height: 225px;
			background-color: rgba(237, 177, 65, 1);
			border-top: 1px #000 solid;
			border-bottom: 1px #000 solid;
			z-index: 0;
		}

			.toughbuilt-connect-text {
				font-family:'HelveticaNeue-ExtBlackCondensed';
			}

		.footer {
			border-top: 1px #C6C6C6 solid;
			height:94px;
		}

			.footer li {
				margin: 0 30px;
			}

	.show-toughbuilt-popup {
		overflow:hidden;
	}

		.toughbuilt-popup-layer {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			opacity: 0;
			visibility: hidden;
			background-color: rgba(0, 0, 0, .7);
			z-index: 2;
			transition: all .5s;
		}

		/*.show-toughbuilt-popup .toughbuilt-logo {
			z-index: 1;
		}*/
	
		.show-toughbuilt-popup .toughbuilt-popup-layer {
			opacity: 1;
			visibility: visible;
		}
		
			.toughbuilt-popup-top {
				top:23px;
				left:calc(((100vw - 1200px) / 2) + 15px);
				right:calc(((100vw - 1200px) / 2) + 15px);
				justify-content: space-between;
			}
			
				.toughbuilt-popup-close {
					width:20px;
					height:20px;
					background-image:url("../images/icons/toughbuilt-popup-close.png");
					background-size:cover;
				}

			.toughbuilt-popup-content {
				height: 570px;
			}

				.toughbuilt-popup-title {
					font-family:'HelveticaNeue-ExtBlackCondensed';
				}

				.show-toughbuilt-popup .nav ul {
					opacity: 0;
					visibility: hidden;
				}

@media screen and (max-width: 1210px) {
	.toughbuilt-popup-top {
		top: 30px;
		left:20px;
		right:20px;
	}
	
	.nav {
		padding-left: 20px;
		padding-right: 20px;
	}

		.nav ul li:not(:last-child) a {
			padding-right: 35px;
		}

	.section-3 {
		background-position: right;
	}

		.section-1 .intro-content h1,
		.toughbuilt-connect-text h2 {
			font-size: 60px;
			line-height: 60px;
		}

		.app-screen-figure .show-comment > div {
			display: none;
		}
}

@media screen and (max-width: 812px) {
	.hide-on-mobile {
		display: none;
	}

	.show-on-mobile {
		display: block;
	}

	.nav-btn a {
		width: 180px;
	}

	.app-download-btns > a:not(:last-child) img {
		margin-right:10px;
	}

	.section {
		height: auto;
	}

	.section-1 .intro {
		padding-top: 84px;
	}

	.section-1 .intro,
	.app-manual,
	.toughbuilt-connect-content,
	.footer .container {
		flex-direction: column;
	}

		.section-1 .intro-content {
			max-width: none;
			margin-top: 40px;
		}

		.section-1 .intro-content,
		.section-1 .intro-img {
			width: 100%;
		}

	.section-2 {
		background-image:none;
	}

		.section-2 .container {
			flex-direction: column;
			background-image:url("../images/backgrounds/section-2-small.jpg");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: bottom;
			padding-left: 0;
			padding-right: 0;
		}

			.section-2 .left-side,
			.app-features {
				width: 100%;
			}

			.section-2 .left-side {
				min-height: 380px;
			}

			.app-features {
				background-color: rgba(255, 255, 255, 1);
				padding: 40px 20px 40px 40px;
				order: -1;
				font-size: 20px;
				line-height: 26px;
			}

	.section-3 {
		padding-top: 60px;
		padding-bottom: 60px;
	}

		.app-manual-icons,
		.app-manual-info {
			width: 100%;
		}

		.app-manual-icons {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-bottom: 200px;
			grid-gap: 0;
		}

			.app-manual-icons img {
				width: 82px;
				margin: 15px;
			}

			.app-manual-img {
				left: 16px;
				bottom: 55px;
                background-image: url("../images/pics/section-3.png");
                background-size: cover;
			}

			.app-manual-link {
				line-height: 56px;
				font-size: 36px;
			}

	.section-4567 {
		padding-top: 62px;
	}

		.app-screen h4,
		.section-4567 h3 {
			font-size: 31px;
		}

		.app-screen-figure {
			margin-bottom:0;
		}

	.section-8 {
		height: 540px;
	}

		.app-video span,
		.toughbuilt-popup-title {
			font-size: 36px;
			line-height: 40px;
		}

		.app-video-play {
			width: 50px;
			height: 50px;
			margin-top: 15px;
		}

			.app-video-play img {
				width: 8px;
			}

	.section-9 {
		padding-top: 60px;
		padding-bottom: 60px;
	}

		.toughbuilt-connect:before {
			top: calc(50% - 154px);
			height: 308px;
		}

		.toughbuilt-connect-text > span {
			font-size: 26px;
			line-height: 36px;
		}

    .toughbuilt-popup-content {
        justify-content: flex-start;
        overflow-y: auto;
        padding-top: 100px;
        padding-bottom: 50px;
        height: 100vh;
    }

    .footer li {
        margin: 0 15px;
    }

    .footer > span {
        font-size: 14px;
    }
}

@media screen and (max-width: 414px) {
    .toughbuilt-popup-content {
        height:auto;
        padding-bottom: 100px;
    }

        .toughbuilt-logo img {
            width: 126px;
        }

    .app-download-btns img {
        width: 162px;
    }

    .app-manual-span {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-right: 15px;
        background-color: rgba(237, 177, 65, 1);
        font-size: 17px;
        line-height: 22px;
    }

    .app-manual-link {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .app-screen-figure > img {
        max-width: 230px;
    }

    .section-4 .app-screen-figure .popup-1,
    .section-6 .app-screen-figure .popup-1 {
        left: -68px;
    }

        .section-4 .popup-1 > img {
            width: 200px;
        }

        .section-6 .popup-1 > img {
            width: 232px;
        }

    .section-4 .app-screen-figure .popup-2,
    .section-7 .app-screen-figure .popup-2 {
        right: -50px;
    }

        .section-4 .popup-2 > img {
            width: 180px;
        }

        .section-7 .popup-2 > img {
            width: 150px;
        }

    .section-5 .popup-1 > img {
        width: 100%;
    }
}