/* ================================================================ */
/* Niftylift Japan 													*/
/* ================================================================ */

/* ==== Global ==================================================== */

html, body {
	margin: 0;
	padding: 0;
}

html {
	font-size: 18px;
}

body {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 1rem;
	line-height: 2.3;
	color: #878787;
	font-weight: 400;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
	flex-shrink: 0;
}

/* ================================================================ */

/* ==== Buttons =================================================== */

.button {
	background-color: #99CC00;
	display: inline-block;
	color: #ffffff;
	text-align: center;
	font-size: 1.333rem;
	line-height: 2.3;
	vertical-align: middle;
	text-decoration: none;
	padding: 0 30px;
	min-width: 300px;
	max-width: 100%;
	box-sizing: border-box;
	border-radius: 30px;
	border: 2px solid #99CC00;
	transition: color 0.25s, background-color 0.25s;
}

.button:hover {
	background-color: #ffffff;
	color: #99CC00;
}

/* ================================================================ */

/* ==== Header ==================================================== */

.toolbar-spacer {
	height: 48px;
	display: block;
}

.header {
	background-color: #ffffff;
	display: block;
	padding: 24px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.header--xl {
	padding-bottom: 400px;
}

.header--l {
	padding-bottom: 260px;
}

.header__container {
	margin: 0 auto;
	padding: 18px 100px;
	max-width: 1200px;
	border: 2px solid #99CC00;
	border-radius: 36px;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

@media (max-width: 1200px) {
	.header__container {
		padding: 18px 36px;
	}
}

.header__logo {
	width: 365px;
	max-width: 50%;
	font-size: 0;
	line-height: 0;
}

@media (max-width: 1200px) {
	.header__logo {
		width: 300px;
	}
}

.header__logo a {
	text-decoration: none;
	opacity: 1;
	transition: opacity 0.25s;
}

.header__logo a:hover {
	opacity: 0.5;
}

@media (max-width: 950px) {
	.header__menu {
		display: none;
	}
}

.header__menu .nav {
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header__menu .nav a {
	display: block;
	margin: 0 30px;
	color: #878787;
	text-decoration: none;
	font-size: 1.333rem;
	line-height: 1.5;
}

.header__menu .nav a:hover {
	color: #99CC00;
}

.header__menu .nav a.nav-path-selected {
	color: #99CC00;
	border-bottom: 2px solid #99CC00;
}

/* ================================================================ */

/* ==== Trigger =================================================== */

.header__trigger {
	display: none;
}

@media (max-width: 950px) {
	.header__trigger {
		display: block;
		width: 44px;
		height: 44px;
		position: absolute;
		right: 36px;
		top: 50%;
		margin-top: -21px;
		cursor: pointer;
	}
}

.header__trigger span {
	width: 100%;
	height: 2px;
	background-color: #99CC00;
	position: absolute;
	left: 0;
	right: 0;
	transition: opacity 0.25s, transform 0.25s, top 0.25s, bottom 0.25s;
	opacity: 1;
	transform: rotate(0deg);
	margin-top: -1px;
}

.header__trigger span:nth-child(1) {
	top: 10px;
}

.header__trigger span:nth-child(2) {
	top: 50%;
}

.header__trigger span:nth-child(3) {
	bottom: 10px;
}

body.menu-open .header__trigger span:nth-child(1) {
	transform: rotate(45deg);
	top: 50%;
}

body.menu-open .header__trigger span:nth-child(2) {
	opacity: 0;
}

body.menu-open .header__trigger span:nth-child(3) {
	transform: rotate(-45deg);
	bottom: 50%;
}

/* ================================================================ */

/* ==== Mobile Menu =============================================== */

.menu {
	display: none;
}

@media (max-width: 950px) {
	.menu {
		display: block;
		position: fixed;
		width: 240px;
		height: 100%;
		right: -240px;
		background: #575757;
		padding: 24px;
		box-sizing: border-box;
	}

	.page {
		overflow: hidden;
	}

	.menu,
	.page {
		transform: translateX(0px);
		transition: transform 0.25s;
	}

	body.menu-open .menu,
	body.menu-open .page {
		transform: translateX(-240px);
	}
}

.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu ul a {
	display: block;
	text-align: left;
	margin: 0 0 1rem;
	font-size: 1.333rem;
	color: #ffffff;
	text-decoration: none;
}

.menu ul a:hover,
.menu ul a:focus,
.menu ul a:active {
	text-decoration: underline;
}

/* ================================================================ */

/* ==== Footer ==================================================== */

.products {
	background-color: #575757;
	padding: 24px 24px 48px;
}

.footer {
	background-color: #878787;
	padding: 24px;
	text-align: center;
}

.footer img {
	width: 320px;
	max-width: 50%;
}

.footer p {
	font-size: 0.78rem;
	color: #ffffff;
	margin: 0;
}

.footer .button {
	margin-top: -24px;
	transform: translateY(-50%);
}

/* ================================================================ */

/* ==== Columns =================================================== */

.wrapper {
	max-width: 1200px;
	padding: 0 24px;
	margin: 0 auto;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 -12px;
	width: calc(100% + 24px);
}

.row--reverse {
	flex-direction: row-reverse;
}

.row--align-center {
	align-items: center;
}

.col-3-12 {
	width: 25%;
	box-sizing: border-box;
	padding: 12px;
}

.col-4-12 {
	width: 33.333%;
	box-sizing: border-box;
	padding: 12px;
}

.col-6-12 {
	width: 50%;
	box-sizing: border-box;
	padding: 12px;
}

.col-8-12 {
	width: 66.666%;
	box-sizing: border-box;
	padding: 12px;
}

.col-12-12 {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
}

/* ================================================================ */

/* ==== Home ====================================================== */

.home__intro-copy p {
	font-size: 1.333rem;
}

.home__intro-copy .button {
	width: 100%;
}

.home-page .col-6-12 p {
	margin: 0;
}

@media (max-width: 1023px) {
	.home-page .col-4-12 {
		width: 100%;
		max-width: 700px;
		margin: auto;
	}

	.home-page .col-8-12 {
		width: 100%;
	}
}

@media (max-width: 650px) {
	.home-page .col-8-12 > .row {
		align-items: center;
		align-items: flex-start;
	}

	.home-page .col-6-12 img {
		width: 200px;
	}

	.home-page .col-6-12 .row {
		flex-direction: column;
	}

	.home-page .col-6-12 .col-6-12 {
		width: 100%;
	}
}

/* ================================================================ */

/* ==== About ===================================================== */

.about-intro {
	max-width: 600px;
	padding: 24px;
	margin: auto;
}

.about-intro p {
	font-size: 1.333rem;
}

.about-content {
	max-width: 700px;
	padding: 0 24px;
	margin: auto;
}

@media (max-width: 650px) {
	.about-content .col-4-12,
	.about-content .col-8-12 {
		width: 100%;
	}

	.about-content .row {
		flex-direction: column;
	}

	.about-content img {
		width: 200px;
		display: block;
		margin: auto;
	}
}

/* ================================================================ */

/* ==== About ===================================================== */

.contact-intro {
	max-width: 600px;
	padding: 24px;
	margin: auto;
}

.form-grid {
	padding: 24px;
}

@media (min-width: 1061px) {
	.form-grid {
		max-width: 1000px;
		margin: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 24px;
		grid-row-gap: 24px;
		grid-template-areas: "name company"
							 "email telephone"
							 "machines why"
							 "machines allow"
							 "message preference"
							 "message terms"
							 "message submit";
	}
}

.contact-form .form-group .control-label {
	display: inline-block;
	padding: 0 12px 4px;
	vertical-align: middle;
}

.contact-form .form-group .text-muted {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin-left: 0.6rem;
	font-size: 0;
	line-height: 0;
	color: #ffffff;
	background-image: url(../images/required.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	vertical-align: middle;
}

.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="email"] {
	background: rgba(135, 135, 135, 0.15);
	font-size: 1rem;
	padding: 12px;
	color: #878787;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid transparent;
}

.contact-form .form-group textarea {
	background: rgba(135, 135, 135, 0.15);
	font-size: 1rem;
	padding: 12px;
	color: #878787;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid transparent;
	height: 340px;
}

.contact-form .form-group input[type="text"]:focus,
.contact-form .form-group input[type="email"]:focus {
	border-color: #99CC00;
}

.contact-form .form-group:nth-of-type(1) {
	grid-area: name;
}

.contact-form .form-group:nth-of-type(2) {
	grid-area: company;
}

.contact-form .form-group:nth-of-type(3) {
	grid-area: email;
}

.contact-form .form-group:nth-of-type(4) {
	grid-area: telephone;
}

.contact-form .form-group:nth-of-type(5) {
	grid-area: machines;
}

.contact-form .form-group:nth-of-type(6) {
	grid-area: why;
}

.contact-form .form-group:nth-of-type(7) {
	grid-area: message;
}

.contact-form .form-group:nth-of-type(8) {
	grid-area: allow;
}

.contact-form .form-group:nth-of-type(9) {
	grid-area: preference;
}

.contact-form .form-group:nth-of-type(10) {
	grid-area: terms;
}

.contact-form .form-actions {
	grid-area: submit;
}

.contact-form .form-actions button {
	background-color: #99CC00;
	display: inline-block;
	color: #ffffff;
	text-align: center;
	font-size: 1.333rem;
	line-height: 2.3;
	vertical-align: middle;
	text-decoration: none;
	padding: 0 30px;
	min-width: 300px;
	max-width: 100%;
	box-sizing: border-box;
	border-radius: 30px;
	border: 2px solid #99CC00;
	transition: color 0.25s, background-color 0.25s;
	appearance: none;
	cursor: pointer;
}

.contact-form .form-actions button:hover {
	background-color: #ffffff;
	color: #99CC00;
}

/* ================================================================ */

/* ==== Product View ============================================== */

.product-view {
	max-width: 1200px;
	margin: auto;
	padding: 24px;
}

@media (max-width: 767px) {
	.product-view .col-6-12 {
		width: 100%;
	}

	.product-view .col-3-12 {
		width: 50%;
	}
}

@media (max-width: 500px) {
	.product-view .col-3-12 {
		width: 100%;
	}
}

.product-grey {
	background-color: #575757;
	color: #ffffff;
}

.product-grey i,
.product-grey em {
	font-weight: 400;
	font-style: normal;
	color: #99CC00;
}

.product-grey h2,
.product-grey h3 {
	color: #99CC00;
	margin: 0;
	font-size: 2rem;
}

.product-intro h1,
.product-intro h2 {
	margin-top: 0;
}

.product-intro table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

.product-intro td {
	border: 0;
	padding: 0 12px 12px 0;
}

.product-intro td p {
	margin: 0;
}

.product-intro td b,
.product-intro td strong {
	font-weight: 400;
	font-style: normal;
	color: #99CC00;
}

.product-intro td i,
.product-intro td em {
	font-weight: 400;
	font-style: normal;
	font-size: 0.8rem;
}

.info-grid-title h2,
.info-grid-title h3 {
	color: #99CC00;
	font-size: 2rem;
	margin: 0;
}

/* ================================================================ */

/* ==== Product List ============================================== */

.product-list-title {
	text-align: center;
}

.product-list-title h3 {
	color: #99CC00;
	font-size: 2rem;
	margin: 0;
}

.product-list {
	max-width: 1200px;
	margin: auto;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
}

.listed-product {
	width: 20%;
	display: block;
	padding: 12px;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.product-list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.listed-product {
		width: 33.333%;
	}
}

@media (max-width: 500px) {
	.listed-product {
		width: 50%;
	}
}

.listed-product__link {
	text-decoration: none;
	text-align: center;
}

.listed-product__image {
	border-radius: 100%;
	border: 2px solid #99CC00;
}

.listed-product__name {
	color: #ffffff;
	display: block;
	text-align: center;
}

/* ================================================================ */

/* ==== Product Specs ============================================= */

.productSpecifications {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.specification {
	width: 33.333%;
	box-sizing: border-box;
	min-height: 93px;
	position: relative;
	padding: 12px 12px 12px 78px;
}

@media (max-width: 767px) {
	.specification {
		width: 50%;
	}
}

@media (max-width: 500px) {
	.specification {
		width: 100%;
	}
}

.specification:before {
    content: "";
    width: 54px;
    height: 54px;
    position: absolute;
    top: 24px;
    left: 12px;
    background-repeat: no-repeat;
    background-size: 53px;
	background-position: left center;
}

.specification p {
	margin: 0;
}

.specification p.label {
	color: #99CC00;
}

.specification span.display--imperial {
	font-size: 0.7rem;
}

.specification span.display--imperial:before {
	content: "("
}

.specification span.display--imperial:after {
	content: ")"
}

.icon_platform_height_metric:before {
    background-image: url(../images/product_icons/platform-height.png)
}

.icon_working_height_metric:before {
    background-image: url(../images/product_icons/working-height.png)
}

.icon_working_outreach_metric:before {
    background-image: url(../images/product_icons/working-outreach.png)
}

.icon_minimum_weight_metric:before {
    background-image: url(../images/product_icons/machine-weight.png)
}

.icon_safe_working_load_metric:before {
    background-image: url(../images/product_icons/safe-working-load-sc.png)
}

.icon_cage_width_metric:before {
    background-image: url(../images/product_icons/cage-size-width.png)
}

.icon_cage_depth_metric:before {
    background-image: url(../images/product_icons/cage-size-depth.png)
}

.icon_cage_rotation_degrees:before {
    background-image: url(../images/product_icons/cage-rotation.png)
}

.icon_fly_boom_arc_degrees:before {
    background-image: url(../images/product_icons/fly-boom-arc.png)
}

.icon_power_options:before {
    background-image: url(../images/product_icons/power-options.png)
}

.type--trailer-mounted .icon_machine_height_metric:before {
    background-image: url(../images/product_icons/tm-height.png)
}

.type--trailer-mounted .icon_machine_width_metric:before {
    background-image: url(../images/product_icons/tm-width.png)
}

.type--trailer-mounted .icon_retracted_width_metric:before {
    background-image: url(../images/product_icons/tm-width-retracted.png)
}

.type--trailer-mounted .icon_machine_length_metric:before {
    background-image: url(../images/product_icons/tm-length.png)
}

.type--trailer-mounted .icon_working_width_metric:before {
    background-image: url(../images/product_icons/tm-width-working.png)
}

.type--trailer-mounted .icon_traction_drive:before {
    background-image: url(../images/product_icons/traction-drive.png)
}

.type--trailer-mounted .icon_outrigger_type:before {
    background-image: url(../images/product_icons/tm-outrigger-type.png)
}

.type--self-drive .icon_machine_height_metric:before,.type--self-propelled .icon_machine_height_metric:before {
    background-image: url(../images/product_icons/sp-height.png)
}

.type--self-drive .icon_machine_width_metric:before,.type--self-propelled .icon_machine_width_metric:before {
    background-image: url(../images/product_icons/sp-width.png)
}

.type--self-drive .icon_machine_length_metric:before,.type--self-propelled .icon_machine_length_metric:before {
    background-image: url(../images/product_icons/sp-length.png)
}

.type--self-drive .icon_transport_length_metric:before,.type--self-propelled .icon_transport_length_metric:before {
    background-image: url(../images/product_icons/sp-length-retracted.png)
}

.type--self-drive .icon_travel_speed_metric:before,.type--self-propelled .icon_travel_speed_metric:before {
    background-image: url(../images/product_icons/sp-travel-speed.png)
}

.type--self-drive .icon_gradeability_degrees:before,.type--self-drive .icon_gradeability_percent:before,.type--self-propelled .icon_gradeability_degrees:before,.type--self-propelled .icon_gradeability_percent:before {
    background-image: url(../images/product_icons/sp-gradeability.png)
}

.type--self-drive .icon_turning_radius_metric:before,.type--self-propelled .icon_turning_radius_metric:before {
    background-image: url(../images/product_icons/turning-radius.png)
}

.type--self-drive .icon_working_width_metric:before,.type--self-propelled .icon_working_width_metric:before {
    background-image: url(../images/product_icons/sd-width-working.png)
}

.type--track-drive .icon_machine_height_metric:before {
    background-image: url(../images/product_icons/tm-height.png)
}

.type--track-drive .icon_machine_width_metric:before {
    background-image: url(../images/product_icons/tm-width.png)
}

.type--track-drive .icon_retracted_width_metric:before {
    background-image: url(../images/product_icons/tm-width-retracted.png)
}

.type--track-drive .icon_machine_length_metric:before {
    background-image: url(../images/product_icons/td-length.png)
}

.type--track-drive .icon_travel_speed_metric:before {
    background-image: url(../images/product_icons/td-travel-speed.png)
}

.type--track-drive .icon_gradeability_degrees:before,.type--track-drive .icon_gradeability_percent:before {
    background-image: url(../images/product_icons/td-gradeability.png)
}

.type--track-drive .icon_working_width_metric:before {
    background-image: url(../images/product_icons/tm-width-working.png)
}

/* ================================================================ */