/* Feature Tour */
.twistFeatureTourHeader {
	font-size: 38px;
    border-bottom: 1px solid #676767;
    padding-bottom: 0.2em;
	text-transform: uppercase;
    margin-bottom: 0.3em;
    font-weight: 300;
    line-height: 1;
}

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

.twistFeatureTourPar, .twistFeatureTourPar2 {
	font-size: 17.6px;
}

.twistFeatureTourPar2 {
	padding-top: 1em;
}

.twistKiCompatibilityMatrixFullImg, .twistVersitalityChangesMindFullImgDesktop, .twistVersitalityChangesMindFullImgTablet, .twistVersitalityChangesMindFullImgPhone, .twistControlAtFingertipsFullImgTablet,
.twistControlAtFingertipsFullImgDesktop, .twistFrontMountFullImgDesktop, .twistFrontMountFullImgPhone, .twistFoldStowGoImgMobile, .twistAppMobile, .twistKiCompatibilityMatrixFullImgMobile, 
.twistPrecisionTightPlacesImg, .twistControlUpDownImg, .twistWhereSafetyQualityImg, .twistCompatibilityImg, .twistEffortlessandReliableConnectionImg {
	width: 100%;
}

.twistVersitalityChangesMindFullImgTablet, .twistVersitalityChangesMindFullImgPhone, .twistControlAtFingertipsFullImgTablet, .twistFoldStowGoImgMobile, .twistFrontMountFullImgPhone,
.twistAppMobile, .twistKiCompatibilityMatrixFullImgMobile {
	display: none;
}

.twistFeatureTourHalfImg, .twistLeftAlignImg, .twistRightAlignImg, .twistLeftAlignText, .twistRightAlignText {
	width: 50%;
}

.twistLeftAlignImg {
	text-align: right;
    padding-right: 4em;
}

.twistLeftAlignText {
	padding-right: 3em;
}

.twistRightAlignText {
	padding-left: 3em;
}

.topFeaturePadding, .topFeatureMargin {
	padding-top: 1em;
}

.twistWhiteHeader, .twistVersitilityChangeWorldWhiteHeader {
	color: white;
}

.twistWhitePar, .twistVersitilityChangeWorldWhitePar {
	color: #d3d3d3;
}

.twistNote {
    font-size: 13px;
    padding-top: 0.2em;
}

a.twistUserInstructionLink, .twistAppLink {
    color: #be0000;
}

a.twistUserInstructionLink:hover, .twistAppLink:hover {
    color: #d3d3d3;
    transition: 0.3s ease;
}

select#optionCategories, select#optionsAvailable, select#optionCategories:focus-visible, select#optionsAvailable:focus-visible {
    overflow-y: hidden !important;
}

/* Feature 1 - VERSATILITY THAT CHANGES YOUR WORLD */
.twistVersitilityChangeWorldVerbiage {
    position: absolute;
    padding: 2em;
}

/* Feature 3 - Front Mount Versatility */
.twistFrontMountVersitilityWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #f7f7f7;
}

.twistFrontMountVersitilityVerbiage {
    position: absolute;
    width: 50%;
    padding: 0 3em;
}

/* Feature 4 - SPEED CONTROL: UP AND DOWN */
.twistControlWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.twistControlVerbiage {
    position: absolute;
    width: 45%;
    padding-right: 6em;
}

/* Feature 5 - FOLD, STOW AND GO */
.twistFoldStowGoWrapper {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    background: #f7f7f7;
    align-items: center;
    padding: 3em;
}

.twistFoldStowGoLeft {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4em;
}

.twistFoldedHandlebarImg {
    width: 75%;
}

.twistHandlebarImg {
    width: 65%;
}

.twistFoldStowGoRight {
    display: flex;
    justify-content: center;
}

/* Feature 6 - EFFORTLESS AND RELIABLE CONNECTION */
.twistEffortReliableConnectionWrapper, .twistWhereSafetyQualityWrapper {
    background: #000000;
}

video.twistFeatureTourVideo {
    width: 100%;
    padding: 1em 0 1em 2em;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* Feature 7 - Control at your fingertips */


/* Feature 8 - Klaxon App */
.twistAppWrapper {
    width: 100%;
    display: flex;
    column-gap: 4em;
    background: #f7f7f7;
}

.twistAppLifestyleImg {
    width: 100%;
}

.twistAppPhonesImg {
    width: 50%;
}

.twistAppLeft {
	width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.twistAppVerbiage {
    padding: 1em 2em 1em 0;
}

/* Feature 9 - WHERE SAFETY AND QUALITY COME FIRST */
.twistWhereSafetyQualityWrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    background: #000000;
}

.twistWhereSafetyQualityVerbiage {
	width: 40%;
	position: absolute;
}

/* Feature 10 - COMPATIBILITY */
.twistCompatabilityWrapper {
    display: flex;
    justify-content: center;
    background: #f7f7f7;
}

/* Feature 11 - Ki Compatibility Matrix */
.twistKiCompMatrixWrapper {
    display: flex;
    justify-content: center;
}

.twistKiCompMatrixVerbiage {
    position: absolute;
    text-align: center;
    padding: 2em 1em 0 1em;
}

/* Responsive */

@media screen and (max-width: 1400px) {
	.twistFoldedHandlebarImg {
	    width: 80%
	}
	
	.twistVersitilityChangeWorldVerbiage {
	    padding: 1em
	}
}

@media screen and (max-width: 1310px) {
	.twistFeatureTourHeader {
	    font-size: 30px;
	}
	
	.twistFeatureTourPar, .twistFeatureTourPar2 {
	    font-size: 16px;
	}
	
	.twistAppPhonesImg {
	    width: 60%;
	}
}

@media screen and (max-width: 1210px) {
	.twistPercisionTightPlacesLeftAlignImg, .twistPercisionTightPlacesRightAlignImg {
		padding: 0;
	}
	
	.twistFoldStowGoLeft {
	    width: 90%;
	    row-gap: 3em;
	}
	
	.twistFoldStowGoRight {
	    justify-content: flex-end;
	}
	
	.twistHandlebarImg {
	    width: 82%;
	}
}

@media screen and (max-width: 1100px) {
	.twistFeatureTourHeader {
        font-size: 24px;
    }
    
    .twistFeatureTourPar, .twistFeatureTourPar2 {
        font-size: 14px;
    }
}

@media screen and (max-width: 1000px) {
	.twistVersitalityChangesMindFullImgDesktop {
		display: none;
	}
	
	.twistVersitalityChangesMindFullImgTablet {
		display: block;
	}
	
	.twistFrontMountVersitilityVerbiage, .twistFeauteVerbiage, .twistFoldStowGoVerbiage, .twistAppVerbiage {
	    padding: 0 1em;
	}
	
	.twistLeftAlignImg {
	    padding-right: 1em;
	}
	
	.twistLeftAlignText {
	    padding-right: 1em;
	}
	
	.twistFoldStowGoWrapper {
	    padding: 1em;
	}
	
	.twistFoldStowGoLeft {
        width: 100%;
    }
	
	.twistAppWrapper {
	    column-gap: 1em;
	}
	
	.twistAppPhonesImg {
	    width: 75%;
	}
}

@media screen and (max-width: 900px) {	
	.twistLeftAlignImg, .twistRightAlignText {
		padding-left: 1em;
	}
	
	.twistRightAlignImg {
		padding-right: 1em;
	}
	
	.twistFeatureTourHeader {
        font-size: 18px;
    }
    
    .twistFeatureTourPar, .twistFeatureTourPar2 {
        font-size: 12px;
    }
	
	.twistNote {
	    font-size: 10px;
	}
}

@media screen and (max-width: 800px) {   
    .twistControlAtFingertipsFullImgDesktop {
		display: none;
	}
	
	.twistControlAtFingertipsFullImgTablet {
		display: block;
	}
	
	.twistLeftAlignImg, .twistRightAlignImg {
		padding: 10px;
	}
	
	.twistKiCompMatrixVerbiage {
	    padding-top: 1em;
	}
}

@media screen and (max-width: 700px) {
	.product-page-wrapper {
        padding-top: 3em !important;
    }
    
    .twistFrontMountVersitilityVerbiage, .twistFeauteVerbiage, .twistFoldStowGoVerbiage, .twistAppVerbiage {
        padding: 1em;
    }
    
    .twistFrontMountFullImgDesktop, .twistFoldedHandlebarImg, .twistFoldStowGoRight, .twistAppLifestyleImg, .twistAppPhonesImg, .twistKiCompatibilityMatrixFullImg, .twistVersitalityChangesMindFullImgTablet {
		display: none;
	}
	
	.twistFrontMountFullImgPhone, .twistFoldStowGoImgMobile, .twistAppMobile, .twistKiCompatibilityMatrixFullImgMobile {
		display: block;
	}
	
	.twistAppWrapper {
        column-gap: 0;
    }
	
	.twistFrontMountVersitilityVerbiage {
	    position: relative;
	    width: 100%;
	}
	
	.twistFrontMountVersitilityWrapper {
	    flex-direction: column-reverse;
	    padding-top: 1em;
	}
	
	.twistVersatilityChangesWorldWrapper {
	    display: flex;
	    flex-direction: column-reverse;
	}
	
	.twistPercisionTightPlacesWrapper {
	    padding-bottom: 1em;
	}
	
	.twistAppLeft {
	    flex-direction: column-reverse;
	    justify-content: normal;
	    align-items: normal;
	}

	.twistVersitalityChangesMindFullImgPhone, .twistVersitilityChangeWorldVerbiage  {
		display: block;
		position: relative;
	}
	
	.twistLeftAlignImg, .twistRightAlignImg {
		width: 100%;
	}
	
	.twistLeftAlignImg, .twistRightAlignImg {
        padding: 0;
    }
    
    .twistLeftAlignText, .twistRightAlignText {
	    width: 100%;
	}
	
	.twistVersitilityChangeWorldWhiteHeader, .twistVersitilityChangeWorldWhitePar {
		color: #676767;
	}
	
	.twistFoldStowGoWrapper {
	    justify-content: normal;
	    padding: 0;
	    row-gap: 0;
	}
	
	.twistFoldStowGoLeft {
	    row-gap: 0;
	    flex-direction: column-reverse;
	}
	
	video.twistFeatureTourVideo {
	    padding: 0;
	}
	
	#twistWhereSafetyQualityContainer {
		flex-direction: column-reverse;
	}
	
	.twistRightAlignText {
        padding-left: 0;
    }
}