@media only screen and (max-width: 633px) {
	main {
		overflow-x: hidden !important
	}

	.homepageMobileBannerImage {
		display: block
	}

	.homepageBannerImage {
		display: none
	}

	#shopify-section-prodBanner .homepageBannerImage {
		display: none !important
	}

	.homepageBannerTextContainer {
		width: 100%;
		left: 50%;
		transform: translateX(-50%);
		top: auto;
		bottom: 50px
	}

	.homepageBannerBigText {
		text-align: center;
		font-size: 8vw;
		line-height: 8.3vw
	}

	.homepageBannerSmallText {
		text-align: center;
		font-size: 13px;
		line-height: 19px
	}

	.homepageBannerButtonContainer {
		width: 100%;
		flex-direction: column;
		padding-top: calc(12vw + (2vw * 2))
	}

	.homepageBannerButton1 {
		margin: 0px auto;
		margin-bottom: 25px
	}

	.homepageBannerButton2 {
		margin: 0px auto
	}

	.homepageProductFlex {
		flex-wrap: wrap
	}

	.homepageProductBlock,
	.homepageCollectionBlock {
		padding: 0px 20px;
		width: calc(50% - 40px)
	}

	.homepageSBSContainer {
		flex-direction: column
	}

	.homepageSBSBlock {
		margin-top: 1px;
		width: 100%;
		padding-top: 52%
	}

	.homepageSBSBlockHead {
		font-size: 18px
	}

	.homepageSBSBlockSub {
		font-size: 9px;
		font-size: 14px;
		line-height: 22px
	}

	.mobile {
		display: flex !important
	}

	.desktop {
		display: none !important
	}

	.navBarContainer {
		display: flex;
		justify-content: space-between;
		height: 55px
	}

	.navbarBurgerContainer {
		display: flex;
		flex-direction: column;
		width: 70px;
		justify-content: center
	}

	.navBurger {
		width: 20px;
		height: auto;
		margin-left: 5px;
		cursor: pointer
	}

	.navBarRightFlex {
		display: flex;
		width: 70px
	}

	.navBarCartContainer {
		display: flex;
		flex-direction: column;
		justify-content: center
	}

	.navBarDotsContainer {
		display: flex;
		flex-direction: column;
		padding: 0px 20px 0px 20px;
		justify-content: center
	}

	.navBarDots {
		width: 20px;
		cursor: pointer
	}

	.footerSection {
		height: auto;
		padding-top: 40px;
		padding-bottom: 30px
	}

	.footerTopRow {
		flex-direction: column
	}

	.footerLogo {
		margin: auto
	}

	.footerNewsText {
		font-size: 12px;
		font-family: "Graphik Medium", sans-serif;
		color: #A5A5A5;
		text-align: center;
		padding-top: 40px;
		padding-bottom: 7px
	}

	.footerNewsInput {
		background: rgba(165, 165, 165, 0.21);
		border: none;
		border-radius: 50px 0px 0px 50px;
		padding: 8px;
		width: 180px;
		padding-left: 20px;
		padding-right: 0px
	}

	.footerNewsSubmit {
		background: #a5a5a5;
		color: white;
		font-family: "Graphik Medium", sans-serif;
		font-size: 13px;
		width: 69px;
		padding: 8px 0px;
		border-radius: 0px 50px 50px 0px;
		text-align: center
	}

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

	.footerMidRow {
		flex-direction: column;
		border-bottom: none
	}

	.footerNav {
		flex-direction: column
	}

	.footerNavLink {
		padding: 0px;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 8px;
		font-size: 13px
	}

	.footerSocial {
		width: 269px;
		margin: auto;
		justify-content: space-between;
		padding-top: 50px
	}

	.footerSocialIcon {
		height: 22px
	}

	.footerLegal {
		color: #a5a5a5;
		border-top: 0px solid #707070
	}

	.prodBannerTextContainer {
		max-width: none;
		width: 100%;
		left: 0px;
		transform: none;
		top: 70px
	}

	.prodBannerTextContainer .review-aggregate-summary {
		display: block !important;
		text-align: center !important
	}

	.prodBannerBigText {
		font-size: 33px;
		text-align: center;
		margin-bottom: 0
	}

	.prodBannerSmallText {
		font-size: 13px;
		padding-top: 10px;
		text-align: center
	}

	.prodBannerColorSelect {
		padding-top: 55vw;
		justify-content: center;
		position: relative;
		left: 5px;
		width: 80%;
		margin: auto
	}

	.prodBannerColorSelect .prodFirstColorBubble {
		margin-right: 20px
	}

	.prodColorText {
		position: absolute;
		left: calc(50% + 50px)
	}

	.prodBannerMiniText {
		justify-content: center;
		color: #Fada4f;
		font-family: "Graphik Medium", sans-serif;
		paddig-top: 12px
	}

	.prodBannerButtonContainer {
		flex-direction: column;
		align-items: center;
		margin: auto;
		padding-top: 20px
	}

	.prodBannerButtonContainer>* {
		margin: 6px !important
	}

	.prodMarbleSBSLeftImg {
		width: 100%;
		justify-content: flex-start
	}

	.prodMarbleSBSLeftImg img {
		width: 222px;
		height: 391px;
		left: 10px
	}

	.prodMarbleSBSRightText {
		width: 80%;
		margin: 0px auto;
		padding-top: 30px
	}

	.prodMarbleSBSRightText .big {
		font-size: 18px;
		padding-bottom: 5px
	}

	.prodMarbleSBSRightText .small {
		font-size: 14px;
		line-height: 22px
	}

	.prodMarbleSBSLeftText {
		order: 2;
		width: 80%;
		margin: 0px auto;
		padding-top: 10px
	}

	.prodMarbleSBSLeftText .prodMarbleSBSTextInner {
		width: 100%;
		max-width: none
	}

	.prodMarbleSBSLeftText .prodMarbleSBSTextInner .big {
		font-size: 18px;
		padding-bottom: 5px
	}

	.prodMarbleSBSLeftText .prodMarbleSBSTextInner .small {
		font-size: 14px;
		line-height: 22px
	}

	.prodMarbleSBSRightImg {
		order: 1;
		width: 100%;
		display: block
	}

	.prodMarbleSBSRightImg img {
		margin: auto auto 10px
	}

	.prodMarbleFloatingImg1 img {
		transform: translateX(70px)
	}

	.prodMarbleFloatingImg2 {
		top: auto;
		bottom: 0px;
		width: 100%
	}

	.prodMarbleFloatingImg2 img {
		left: 50%;
		transform: translateX(calc(-50% - 210px)) scale(0.4) translateY(260px)
	}

	.prodMarbleFloatingImg3 {
		bottom: 0px;
		left: 50%;
		width: 80%;
		transform: translate(-50%, 0%)
	}

	.prodMarbleFloatingImg3 img {
		width: auto;
		height: 265px;
		margin: auto
	}

	.prodMarbleSection {
		padding-bottom: 250px;
		background-position: right
	}

	.prodMarbleSection .homepageBannerButton2 {
		margin: 15px 0px 0px 0px
	}

	.prodImgBreakSection {
		height: 100vw;
		justify-content: flex-end
	}

	.prodImgBreakTextContainer {
		transform: none;
		left: 0px;
		bottom: 50px;
		width: calc(100% - 120px);
		padding-right: 60px
	}

	.prodImgBreakTextContainer .big {
		font-size: 18px;
		padding-bottom: 5px
	}

	.prodImgBreakTextContainer .small {
		font-size: 14px;
		line-height: 22px
	}

	.prod3Title {
		width: 80%;
		margin: auto;
		font-size: 18px
	}

	.prod3Section {
		height: auto;
		padding-top: 50px;
		padding-bottom: 50px
	}

	.prod3Flex {
		flex-direction: column;
		width: auto
	}

	.prod3FlexItem {
		width: 80%;
		max-width: 400px;
		margin: 0px auto;
		padding-bottom: 40px
	}

	.prod3FlexItem .big {
		text-align: left;
		font-size: 18px
	}

	.prod3FlexItem .small {
		text-align: left;
		font-size: 14px;
		line-height: 22px
	}

	.prod3FlexImg {
		width: 100%
	}

	.prodSlide .homepageBannerButton2 {
		background-color: white !important;
		color: #545454 !important;
		height: 35px
	}

	.prodSlide .homepageBannerButton2 span {
		top: 19%
	}

	.prodSlide .homepageBannerButton2 img {
		filter: invert(1);
		top: -7px
	}

	.prodSliderSection {
		margin-bottom: 0px
	}

	.prodFeatTitle {
		font-size: 18px;
		padding-top: 60px
	}

	.prodFeatImgSBS {
		padding-top: 20px;
		padding-bottom: 40px
	}

	.prodFeatSelector {
		width: 262px
	}

	.prodFeatSelectorFeatures,
	.prodFeatSelectorSpecs {
		font-size: 13px;
		width: 128px
	}

	.prodFeatAccContent {
		font-size: 12px
	}

	.prodFeatAccFeatures,
	.prodFeatAccSpecs {
		width: 80vw
	}

	.prodFeatImgSBS span {
		font-size: 9px
	}

	.prodFeatAccTitle {
		padding-top: 20px
	}

	.prodWorksSection {
		height: 80vw;
		background-position: -40px bottom;
		background-repeat: no-repeat;
		margin-bottom: 2px;
		background-size: calc(100% + 40px) auto
	}

	.prodWorksText {
		left: 0px;
		top: 0px;
		width: 80%;
		margin: auto
	}

	.prodWorksText .big {
		font-size: 18px
	}

	.prodWorksText .small {
		font-size: 9px
	}

	.prodWorksText .homepageBannerButton1 {
		margin: 0px
	}

	.prodCompatSection {
		height: auto;
		padding-bottom: 60px
	}

	.prodCompatTitle {
		font-size: 18px;
		padding-bottom: 30px;
		padding-top: 5px
	}

	.prodCompatImg {
		width: 80%;
		padding-bottom: 10px
	}

	.prodCompatText {
		width: 80%;
		font-size: 12px
	}

	.mobileNavSection {
		display: block;
		position: absolute;
		height: calc(100vh - 55px);
		width: 100vw;
		top: 55px;
		left: 0px;
		background: white;
		z-index: 100;
		overflow: scroll;
		padding-bottom: 110px;
		transition: all .2s;
		transform: translateX(-100%)
	}

	.mobileNavContainer {
		display: flex;
		flex-direction: column;
		width: calc(100% - 100px);
		padding-left: 50px;
		padding-bottom: 70px
	}

	.mobileNavLink {
		padding-top: 35px;
		font-size: 18px;
		font-family: "Graphik Medium", sans-serif;
		color: #4c4c4c;
		display: inline;
		text-decoration: none;
		cursor: pointer;
		transition: all .2s;
		border-bottom: 5px solid white;
		width: max-content;
		width: -moz-max-content;
		width: -webkit-max-content
	}

	.mobileNavLink:hover {
		border-bottom: 5px solid #Fada4f
	}

	.mobileNavLink span {
		margin-left: 10px;
		display: inline-block;
		transition: all .2s
	}

	.mobileNavLinkProductAcc {
		display: flex;
		flex-direction: column
	}

	.mobileNavLinkProduct {
		height: 22px;
		display: flex;
		text-decoration: none;
		padding-left: 30px;
		padding-top: 30px;
		transition: all .2s
	}

	.mobileNavLinkProduct:hover {
		padding-left: 35px
	}

	.mobileNavLinkProduct span {
		height: 22px;
		display: flex;
		flex-direction: column;
		padding-left: 7px;
		justify-content: center;
		font-size: 14px;
		font-family: "Graphik Regular";
		color: #4c4c4c;
		padding-top: 1px
	}

	.mobileNavLinkProduct span:active:hover {
		color: #Fada4f
	}

	.mobileNavLinkProductImg {
		height: 22px;
		width: 22px;
		object-fit: contain
	}

	.mobileNavProdSection {
		display: block;
		position: absolute;
		height: calc(100vh - 55px);
		width: 100vw;
		top: 55px;
		left: 0px;
		background: white;
		z-index: 100;
		overflow: scroll;
		transition: all .2s;
		transform: translateX(100%)
	}

	.mobileNavProdContainer {
		display: flex;
		flex-direction: column;
		width: calc(100% - 100px);
		padding-left: 50px;
		padding-bottom: 180px;
		height: calc(100% - 243px)
	}

	.mobileNavProdTitle {
		padding-top: 40px;
		font-size: 18px;
		font-family: "Graphik Medium", sans-serif;
		color: #4c4c4c;
		display: inline;
		text-decoration: none;
		cursor: pointer;
		transition: all .2s;
		width: max-content;
		width: -moz-max-content;
		width: -webkit-max-content
	}

	.mobileNavProdTitle span {
		margin-left: 10px;
		display: inline-block;
		transition: all .2s
	}

	#ajax-cart {
		top: 55px;
		width: 100%;
		height: calc(100vh - 55px);
		background-color: #F0F0F0
	}

	.ajax-cart_submit-button {
		max-width: none
	}

	.ajax-cart_total_text {
		float: none;
		text-align: right;
		padding-bottom: 20px;
		padding-right: 20px
	}

	.ajax-cart_content_top {
		display: none
	}

	#ajaxPadding {
		border-top: 2px solid #e4e4e4
	}

	.ajax-cart_item:after {
		width: 100%
	}

	#checkoutButton {
		position: fixed !important;
		width: 100%;
		bottom: 0px;
		right: 0px;
		border-radius: 0px
	}

	.homepageBannerButton2,
	.homepageBannerButton1,
	.prodBannerButton1 button {
		width: 112px;
		height: 33px
	}

	.prodBannerButton1 {
		margin-right: 4px
	}

	.ajax-cart_no-items_text {
		background-color: #f0f0f0
	}

	.emptyCartAlert {
		top: 55px;
		left: 0px;
		transform: translateX(0%)
	}

	.emptyCartAlert span {
		width: 100%;
		max-width: none
	}

	.textBladeSection .text {
		width: 90%;
		font-size: 14px
	}

	.footerSocialIcon {
		padding-right: 0px;
		padding-left: 0px
	}

	.prodFeatSection {
		padding-bottom: 50px
	}

	.houseSectionDesk {
		display: none
	}

	.houseSectionMobile {
		display: block
	}

	.howItWorksText {
		top: 50px
	}

	.howItWorksText .homepageBannerButtonContainer {
		padding-top: 30px;
		flex-direction: row;
		justify-content: center;
		position: relative;
		left: 15px;
		width: 90%;
		margin: auto
	}

	.howSBS {
		flex-direction: column;
		background: none;
		height: auto;
		width: 85%
	}

	.howSBS img {
		width: calc(100% - 80px);
		background: #f4f4f4;
		padding: 40px
	}

	.howSBS .text {
		width: 100%;
		padding-top: 20px
	}

	.howSBS .text .big {
		font-size: 18px
	}

	.howSBS .text .small {
		font-size: 9px;
		line-height: 11px;
		color: #9B9B9B
	}

	.howBlockFlex {
		width: 85%
	}

	.howBlockFlex .block {
		width: 100%
	}

	.howBlockFlex .block:after {
		display: none
	}

	.howBlockFlex .block .text {
		position: relative;
		top: 0px;
		left: 0px;
		padding-top: 10px
	}

	.howBlockFlex .block .text .big {
		font-size: 18px;
		color: black
	}

	.howBlockFlex .block .text .small {
		font-size: 9px;
		line-height: 11px;
		color: #9B9B9B
	}

	.howBigImg .text {
		position: relative;
		top: 0px;
		left: 0px;
		transform: none;
		padding: 35px 2.5%
	}

	.howBigImg .text .big {
		font-size: 18px;
		color: black
	}

	.howBigImg .text .small {
		font-size: 9px;
		line-height: 11px;
		color: #9B9B9B
	}

	#redOnMobile {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 105px;
		height: 31px;
		text-decoration: none;
		text-align: center;
		font-family: "Graphik Regular", sans-serif;
		font-size: 12px;
		border-radius: 20px;
		-webkit-appearance: none;
		border: none;
		background: #Fada4f;
		color: white;
		padding: 0px;
		padding-top: 2px;
		align-items: center;
		cursor: pointer;
		text-decoration: none !important;
		margin: 0px;
		margin-top: 20px;
		position: relative;
		opacity: 1;
		top: 0px;
		left: 0px
	}

	#redOnMobile:hover {
		background: #E01E2A
	}

	.prodFeatSelector {
		left: 0px
	}

	.prodFeatImgBlock1,
	.prodFeatImgBlock2 {
		left: 0px
	}

	.prodFeatImgBlock1 span,
	.prodFeatImgBlock2 span {
		font-size: 13px
	}

	.prodFeatImgSBS {
		transform: scale(0.6);
		margin-top: -40px;
		margin-bottom: -40px
	}

	.howBannerSection .MobileImage {
		display: block
	}

	.howBannerSection .Image {
		display: none
	}

	.howBannerSection .TextContainer {
		width: 90%;
		left: 50%;
		transform: translate(-50%, -50%);
		top: 50%
	}

	.howBannerSection .BigText {
		font-size: 8vw;
		line-height: 8.3vw
	}

	.howBannerSection .SmallText {
		font-size: 13px;
		line-height: 19px
	}

	.howBannerSection .BannerButtonContainer {
		width: 100%;
		flex-direction: column;
		padding-top: calc(12vw + (2vw * 2))
	}

	.howBannerSection .BannerButton1 {
		margin: 0px;
		margin-bottom: 25px
	}

	.howBannerSection .BannerButton2 {
		margin: 0px auto
	}

	.howTextBladeSection {
		padding-bottom: 86px
	}

	.howTextBladeSection .title {
		font-size: 18px
	}

	.howBigSliderSection .bigSliderTitle {
		font-size: 17px
	}

	.howBigSliderSection .bigSlider {
		width: 100%;
		height: 100vw
	}

	.howBigSliderSection .bigSlider img {
		height: 100vw;
		object-fit: cover
	}

	.howBigSliderSection .customDotFlex {
		display: none
	}

	.mobileDotFlex,
	.mobileIcons {
		display: flex !important;
		justify-content: center;
		padding-top: 30px;
		padding-bottom: 20px
	}

	.dotBlock {
		display: flex;
		flex-direction: column;
		cursor: pointer
	}

	.dotBlock img {
		object-fit: scale-down;
		height: 41px;
		filter: contrast(0)
	}

	.dotBlock img.activeDot {
		filter: contrast(0)
	}

	.dotBlock span {
		font-size: 16px;
		font-family: "Graphik Medium", sans-serif;
		padding-top: 24px
	}

	.mobileDot {
		width: 14px;
		height: 14px;
		border-radius: 100%;
		background-color: #D8D8D8;
		margin: 0px 7px;
		cursor: pointer
	}

	.mobileDot.activeDot {
		background-color: #Fada4f
	}

	.howEasyInstallSBS {
		flex-direction: column;
		padding-top: 0px
	}

	.howEasyInstallSBS .left {
		order: 2;
		width: 100%;
		padding-top: 40px
	}

	.howEasyInstallSBS .left .title {
		left: 0px;
		text-align: center;
		font-size: 16px
	}

	.howEasyInstallSBS .left .body {
		left: 0px;
		text-align: center;
		width: 90%;
		padding-top: 15px
	}

	.howEasyInstallSBS .right {
		width: 100%
	}

	.howEasyInstallSBS .right .videoBlock {
		width: 100%;
		max-width: none
	}

	.howCompSBS {
		flex-direction: column;
		height: auto
	}

	.howCompSBS .left {
		width: 100%
	}

	.howCompSBS .left img {
		width: 90%;
		margin: auto
	}

	.howCompSBS .right {
		width: 90%;
		margin: auto;
		padding: 0px;
		text-align: center;
		padding-bottom: 40px
	}

	.howCompSBS .right .title {
		padding-top: 40px;
		max-width: none;
		font-size: 16px
	}

	.howCompSBS .right a {
		color: #28556C
	}

	.howSecurityBlock {
		height: auto
	}

	.howSecurityBlock .inner {
		flex-direction: column
	}

	.howSecurityBlock .inner img {
		padding: 0px;
		width: 181px;
		height: 193px;
		display: block;
		margin: auto;
		padding-top: 40px;
		padding-bottom: 40px
	}

	.howSecurityBlock .inner .text {
		width: 90%;
		margin: auto;
		padding: 0px;
		text-align: center;
		padding-bottom: 20px
	}

	.howSecurityBlock .inner .text .title {
		font-size: 16px
	}

	.howApp .title {
		width: 100vw;
		text-align: center;
		font-size: 16px;
		top: 26px;
		z-index: 1
	}

	.howApp .container {
		display: none
	}

	.howApp .list {
		display: none
	}

	.howApp .mobileButtonRow {
		display: flex !important;
		position: absolute;
		top: 511px;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		justify-content: center
	}

	.howApp .mobileButtonRow img {
		width: 108px;
		height: 32px;
		margin: 5px
	}

	.howApp .mobileListSlider {
		display: block !important
	}

	.howApp .mobileListSlider .row {
		width: 100%;
		display: inline-block;
		padding-top: 80px;
		padding-bottom: 90px;
		background-color: #F4F6F8
	}

	.howApp .mobileListSlider .row img {
		height: 50px;
		margin: auto;
		padding-bottom: 30px
	}

	.howApp .mobileListSlider .row .photo {
		height: 410px;
		width: 100%;
		object-fit: contain
	}

	.howApp .mobileListSlider .row .text {
		width: 90%;
		margin: auto;
		text-align: center;
		height: 140px
	}

	.howApp .mobileListSlider .row .text .header {
		font-size: 16px;
		font-family: "Graphik Semibold", sans-serif;
		color: #4C4C4C;
		padding-bottom: 25px
	}

	.howApp .mobileListSlider .row .text .body {
		font-size: 17px;
		font-family: "Graphik Regular", sans-serif;
		line-height: 27px;
		color: #6E6E6E
	}

	.worksFilter .flex {
		flex-direction: column
	}

	.worksFilter .flex .block {
		margin: 20px auto;
		width: 100%;
		max-width: none
	}

	.worksFilter .flex .block span {
		width: 80%;
		margin: auto
	}

	.worksBanner .deskImg {
		display: none
	}

	.worksBanner .mobileImg {
		display: block
	}

	.worksBanner .text {
		text-align: center
	}

	.worksBanner .text .title {
		font-size: 36px
	}

	.worksBanner .text .small {
		font-size: 17px
	}

	.worksBanner .text .button {
		margin: 43px auto 0px auto
	}

	.worksContainer .innerContainer .worksVoice .title,
	.worksContainer .innerContainer .worksHosting .title,
	.worksContainer .innerContainer .worksWith .title {
		font-size: 17px;
		text-align: center
	}

	.worksContainer .innerContainer .worksVoice .flex .threeBlock,
	.worksContainer .innerContainer .worksVoice .flex .primeBlock,
	.worksContainer .innerContainer .worksVoice .flex .twoBlock,
	.worksContainer .innerContainer .worksHosting .flex .threeBlock,
	.worksContainer .innerContainer .worksHosting .flex .primeBlock,
	.worksContainer .innerContainer .worksHosting .flex .twoBlock {
		max-width: 300px;
		width: 90%;
		margin: 0px auto 20px auto !important
	}

	.worksContainer .innerContainer .worksWith .flex .primeBlock,
	.worksContainer .innerContainer .worksWith .flex .threeBlock,
	.worksContainer .innerContainer .worksWith .flex .twoBlock {
		width: calc(50% - 10px);
		position: relative;
		background-color: white;
		margin-bottom: 20px;
		margin-right: 20px
	}

	.worksContainer .innerContainer .worksWith .flex .primeBlock:nth-child(3n),
	.worksContainer .innerContainer .worksWith .flex .threeBlock:nth-child(3n),
	.worksContainer .innerContainer .worksWith .flex .twoBlock:nth-child(3n) {
		margin-right: 20px
	}

	.worksContainer .innerContainer .worksWith .flex .primeBlock:nth-child(2n),
	.worksContainer .innerContainer .worksWith .flex .threeBlock:nth-child(2n),
	.worksContainer .innerContainer .worksWith .flex .twoBlock:nth-child(2n) {
		margin-right: 0px
	}

	.careersBanner .desktopBannerImg {
		display: none
	}

	.careersBanner .mobileBannerImg {
		display: block;
		width: 100%
	}

	.careersBanner .text {
		width: 80%;
		margin: auto;
		text-align: center;
		font-size: 36px;
		top: 5%
	}

	.careerWhite .fullBlock {
		height: auto;
		background-image: none !important;
		padding-top: 20px
	}

	.careerWhite .fullBlock .title {
		padding-left: 0px;
		width: 90%;
		font-size: 17px
	}

	.careerWhite .fullBlock .body {
		width: 90%;
		padding-left: 0px;
		font-size: 14px
	}

	.careerWhite .threeWideBlock .title {
		text-align: center;
		font-size: 17px;
		width: 80%;
		margin: auto
	}

	.careerWhite .threeWideBlock .flex {
		flex-direction: column
	}

	.careerWhite .threeWideBlock .flex .block {
		width: 90%;
		margin: auto
	}

	.careerWhite .threeWideBlock .flex .block .header {
		font-size: 17px;
		text-align: left
	}

	.careerWhite .threeWideBlock .flex .block .body {
		font-size: 14px;
		text-align: left;
		padding-bottom: 20px
	}

	.careerWhite .innerGrey {
		margin-top: -55px;
		margin-bottom: -50px;
		flex-direction: column;
		width: 80%;
		padding: 10%
	}

	.careerWhite .innerGrey .left {
		width: 100%;
		padding-bottom: 40px
	}

	.careerWhite .innerGrey .right {
		width: 80vw;
		height: 80vw
	}

	.careerGrey .inner {
		width: 80%
	}

	.articleContainer .innerContainer {
		width: 100%
	}

	.articleContainer .innerContainer .filterLinks {
		justify-content: center;
		padding-top: 45px;
		margin-bottom: 30px
	}

	.articleContainer .innerContainer .filterLinks .filterButton {
		margin: 0px 15px;
		padding-bottom: 15px;
		font-size: 18px
	}

	.articleContainer .innerContainer .articleWhite .title {
		font-size: 17px
	}

	.articleContainer .innerContainer .articleWhite .date {
		font-size: 12px
	}

	.articleContainer .innerContainer .articleWhite .article {
		font-size: 14px
	}

	.articleContainer .innerContainer .arrowFlex {
		width: 90%;
		margin: auto
	}

	.articleContainer .innerContainer .arrowFlex .next,
	.articleContainer .innerContainer .arrowFlex .previous {
		font-size: 14px
	}

	.articleContainer .innerContainer .arrowFlex .next span,
	.articleContainer .innerContainer .arrowFlex .previous span {
		top: 0px
	}

	.articleContainer .innerContainer .otherFlex {
		width: 90%;
		margin: auto;
		margin-top: 35px;
		flex-direction: column;
		padding-bottom: 40px
	}

	.articleContainer .innerContainer .otherFlex .block {
		width: 100%;
		margin-bottom: 30px
	}

	.blogGrey .inner {
		width: 100%
	}

	.blogGrey .inner .filterLinks {
		justify-content: center;
		padding-top: 45px;
		margin-bottom: 30px
	}

	.blogGrey .inner .filterLinks .filterButton {
		margin: 0px 15px;
		margin-bottom: 15px;
		font-size: 18px
	}

	.blogGrey .post .post-title {
		font-size: 17px
	}

	.blogGrey .post .post-date {
		font-size: 12px
	}

	.blogGrey .post .post-content {
		margin-bottom: 30px;
		font-size: 14px
	}

	.blogGrey .blogNavFlex {
		padding-bottom: 30px
	}

	.blogGrey .blogNavFlex .button a {
		font-size: 14px
	}

	.legalContainer .banner .text {
		font-size: 36px
	}

	.legalContainer .legalNav {
		font-size: 17px;
		line-height: 16px
	}

	.legalContainer .title {
		font-size: 17px;
		padding-top: 20px;
	}

	.legalContainer .content {
		font-size: 14px;
		margin-bottom: 0px;
		padding-bottom: 50px
	}

	.legalContainer .content h3 {
		font-size: 16px
	}

	.aboutSection .banner {
		height: 412px
	}

	.aboutSection .banner img {
		height: 100%;
		object-fit: cover
	}

	.aboutSection .banner .text .title {
		font-size: 36px
	}

	.aboutSection .banner .text .body {
		font-size: 14px;
		line-height: 16px;
		letter-spacing: .2px
	}

	.aboutSection .photoBox img {
		opacity: 0
	}

	.aboutSection .photoBox .text {
		max-width: none;
		padding: 0px
	}

	.aboutSection .photoBox .text .title {
		font-size: 17px
	}

	.aboutSection .photoBox .text .body {
		font-size: 14px;
		line-height: 16px;
		letter-spacing: .2px
	}

	.pressSection .banner {
		height: 412px
	}

	.pressSection .banner img {
		height: 100%;
		object-fit: cover
	}

	.pressSection .banner .text {
		font-size: 36px
	}

	.pressSection .featured {
		width: 100%;
		max-width: none;
		padding: 40px 0px;
		margin-top: 0px;
		flex-direction: column;
		margin-bottom: 30px
	}

	.pressSection .featured img {
		width: 100%;
		height: 80px;
		object-fit: contain;
		margin-bottom: 30px
	}

	.pressSection .featured .quote {
		font-size: 17px;
		width: 80%;
		margin: auto;
		text-align: center;
		line-height: 19px
	}

	.pressSection .flexTitle {
		font-size: 17px;
		margin-bottom: 30px
	}

	.pressSection .flex .block {
		width: 100%
	}

	.pressSection .flex .block img {
		margin: auto;
		display: block;
		margin-bottom: 30px
	}

	.pressSection .more {
		display: flex;
		margin-top: -30px
	}

	.brandSection .banner {
		height: 412px
	}

	.brandSection .banner img {
		height: 100%;
		object-fit: cover
	}

	.brandSection .banner .text {
		font-size: 36px
	}

	.brandSection .brandNav a {
		font-size: 17px;
		line-height: 16px;
		margin: 0px 15px
	}

	.brandSection .flexTitle {
		font-size: 17px;
		margin-bottom: 30px
	}

	.brandSection .releasesFlex .block,
	.brandSection .assetsFlex .block {
		width: 100%
	}

	.brandSection .releasesFlex .block img,
	.brandSection .assetsFlex .block img {
		margin: auto;
		display: block;
		margin-bottom: 30px
	}

	.brandSection .releasesFlex .block:nth-of-type(3n),
	.brandSection .assetsFlex .block:nth-of-type(3n) {
		margin-right: 0px
	}

	.brandSection .releasesFlex .block:nth-of-type(2n),
	.brandSection .assetsFlex .block:nth-of-type(2n) {
		margin-right: 0px
	}

	.brandSection .more {
		display: flex;
		margin-top: -30px
	}

	.accessoriesSection .banner {
		min-height: 375px;
		overflow: hidden
	}

	.accessoriesSection .banner img {
		height: 100%;
		width: auto;
		position: relative;
		transform: translateX(-66.5%) scale(1.1) translate(-17px, 23px);
		left: 50%;
		max-width: none
	}

	.accessoriesSection .banner .text {
		top: 14%
	}

	.accessoriesSection .banner .text .title {
		font-size: 36px;
		text-align: center
	}

	.accessoriesSection .banner .text .body {
		text-align: center;
		font-size: 14px
	}

	.accessoriesSection .banner-products-wrap:nth-of-type(2n) .products .item {
		flex-direction: column
	}

	.accessoriesSection .banner-products-wrap:nth-of-type(2n) .products .item .imgGallery {
		padding-left: 0
	}

	.accessoriesSection .banner-products-wrap .section-title {
		width: calc(90% - 10px);
		font-size: 36px;
		line-height: 40px;
		font-weight: 100
	}

	.accessoriesSection .products:last-of-type .item {
		padding-bottom: 20px
	}

	.accessoriesSection .products:not(.products--has-banner).products--has-section-title .section-title {
		border-top: 5px solid #f1f1f1
	}

	.accessoriesSection .products .item {
		flex-direction: column;
		border-top: 5px solid #f1f1f1
	}

	.accessoriesSection .products .item .imgGallery {
		width: 80%;
		margin: auto;
		padding-right: 0px
	}

	.accessoriesSection .products .item .text {
		width: calc(90% - 10px);
		margin: auto;
		padding-right: 10px
	}

	.accessoriesSection .products .item .text .title {
		font-size: 17px
	}

	.accessoriesSection .products .item .text .specs .specTitle {
		font-size: 16px
	}

	.workIntContainer .wideBlock {
		height: 73vw
	}

	.workIntContainer .leftBannerContainer img {
		height: 100vw !important;
		object-fit: cover;
		object-position: left
	}

	.workIntContainer .rightBannerContainer img {
		height: 100vw !important;
		object-fit: cover;
		object-position: right
	}

	.workIntContainer .centerBannerContainer img {
		height: 100vw !important;
		object-fit: cover;
		object-position: center center
	}

	.workIntContainer .textOverImgLeft img {
		height: 80vw !important;
		object-fit: cover;
		object-position: right
	}

	.workIntContainer .textOverImgRight img {
		height: 80vw !important;
		object-fit: cover;
		object-position: left
	}

	.workIntContainer .textOverImgCenter img {
		height: 80vw !important;
		object-fit: cover;
		object-position: left
	}

	.workIntContainer .colorBlockImgLeft {
		height: auto;
		padding: 30px 0px
	}

	.workIntContainer .colorBlockImgLeft .inner {
		justify-content: center;
		flex-direction: column
	}

	.workIntContainer .colorBlockImgLeft .inner .img {
		margin: 0px auto;
		padding-bottom: 20px;
		width: 80%
	}

	.workIntContainer .colorBlockImgLeft .inner .text {
		width: 80%;
		margin: 0px auto
	}

	.workIntContainer .colorBlockImgRight {
		height: auto;
		padding: 30px 0px
	}

	.workIntContainer .colorBlockImgRight .inner {
		justify-content: center;
		flex-direction: column
	}

	.workIntContainer .colorBlockImgRight .inner .img {
		margin: 0px auto;
		order: 0;
		padding-bottom: 20px;
		width: 80%
	}

	.workIntContainer .colorBlockImgRight .inner .text {
		width: 80%;
		margin: 0px auto;
		order: 1
	}

	.workIntContainer .textOverImgLeft .inner .text .head {
		width: 80%
	}

	.workIntContainer .textOverImgRight .inner .text {
		width: 100%
	}

	.workIntContainer .sideBySide {
		padding-bottom: 0px
	}

	.workIntContainer .sideBySide .inner {
		flex-direction: column;
		height: auto;
		max-height: none
	}

	.workIntContainer .sideBySide .inner .block {
		width: 100%;
		height: 65vw;
		margin-bottom: 20px
	}

	.workIntContainer .colorBlockRightIcon .inner {
		height: auto;
		padding: 30px 0px;
		flex-direction: column
	}

	.workIntContainer .colorBlockRightIcon .inner .text {
		order: 1;
		width: 90%;
		margin: 0px auto;
		text-align: left
	}

	.workIntContainer .colorBlockRightIcon .inner img {
		left: 0px;
		right: 0px
	}

	.workIntContainer .colorBlockLeftIcon .inner {
		height: auto;
		padding: 30px 0px;
		flex-direction: column
	}

	.workIntContainer .colorBlockLeftIcon .inner .text {
		order: 1;
		width: 90%;
		margin: 0px auto;
		text-align: left
	}

	.workIntContainer .colorBlockLeftIcon .inner img {
		left: 0px;
		right: 0px
	}

	.workIntContainer .feat .flex {
		flex-direction: column
	}

	.workIntContainer .feat .flex .block {
		width: 100%;
		margin-bottom: 20px
	}

	.workIntContainer .feat .flex .block img {
		height: 40vw
	}

	.workIntContainer .textOverImgCenter .inner,
	.workIntContainer .textOverImgLeft .inner,
	.workIntContainer .textOverImgRight .inner {
		position: relative;
		left: 0px;
		top: 0px;
		transform: none;
		margin: 40px auto 20px auto;
		text-align: center;
		color: #4C4C4C !important
	}

	.workIntContainer .textOverImgCenter .inner .text,
	.workIntContainer .textOverImgLeft .inner .text,
	.workIntContainer .textOverImgRight .inner .text {
		float: none
	}

	.workIntContainer .textOverImgCenter .inner .text .head,
	.workIntContainer .textOverImgLeft .inner .text .head,
	.workIntContainer .textOverImgRight .inner .text .head {
		max-width: none;
		margin: auto
	}

	.workIntContainer .mobileCompare {
		display: block
	}

	.workIntContainer .compare {
		display: none
	}

	.connectedPage .banner .text .title {
		max-width: none;
		padding-right: 25%;
		font-size: 36px
	}

	.connectedPage .banner .text .body {
		max-width: none;
		padding-right: 25%;
		font-size: 16px
	}

	.connectedPage .textBlade {
		padding: 50px 5%
	}

	.connectedPage .textBlade .header {
		font-size: 18px;
		line-height: 20px
	}

	.connectedPage .textBlade .body {
		font-size: 9px;
		line-height: 14px
	}

	.connectedPage .textBlade .body p {
		height: auto
	}

	.connectedPage .locksCollection {
		width: 100%;
		max-width: none
	}

	.connectedPage .locksCollection .title {
		font-size: 18px
	}

	.connectedPage .locksCollection .flex {
		display: none
	}

	.connectedPage .locksCollection .mobileYaleSlider {
		display: block
	}

	.connectedPage .benefits {
		padding: 35px 0px
	}

	.connectedPage .benefits .title {
		font-size: 18px;
		padding-bottom: 40px
	}

	.connectedPage .benefits .flex {
		flex-direction: column
	}

	.connectedPage .benefits .flex .block {
		padding-bottom: 20px;
		width: 100%
	}

	.connectedPage .benefits .flex .block .text .header {
		text-align: left;
		font-size: 18px;
		padding-top: 10px;
		padding-bottom: 0px
	}

	.connectedPage .benefits .flex .block .text .body {
		text-align: left;
		font-size: 9px;
		width: 100%
	}

	.connectedPage .compareYaleMobile {
		display: block
	}

	.connectedPage .compareYale {
		display: none
	}

	.videoPage .banner {
		max-height: none
	}

	.videoPage .banner .videoContainer {
		width: 200%;
		transform: translateX(-25%);
		padding-top: 110%
	}

	.videoPage .row .flex .videoBlock {
		width: 100%
	}

	.appPage {
		height: auto;
		min-height: calc(100vh - 235px)
	}

	.appPage .interior {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - 235px);
		height: 100
	}

	.appPage .interior img {
		width: 375px;
		height: 370px;
		object-fit: cover;
		position: absolute;
		bottom: 0px;
		left: 50%;
		transform: translateX(calc(-50% + 40px))
	}

	.appPage .interior .text {
		position: relative;
		top: 0;
		max-width: none;
		left: 0;
		transform: none;
		margin: 0px auto;
		padding-bottom: 370px
	}

	.appPage .interior .text .title {
		text-align: center;
		margin: auto;
		padding-top: 80px;
		font-size: 36px;
		line-height: 36px
	}

	.appPage .interior .text .body {
		text-align: center;
		margin: auto;
		padding-top: 10px;
		padding-bottom: 20px;
		font-size: 16px;
		letter-spacing: .16px
	}

	.appPage .interior .text .row {
		flex-direction: column
	}

	.appPage .interior .text .row a {
		margin: 10px auto
	}

	.appPage .interior .text .row a img {
		position: relative;
		transform: translateX(-50%)
	}

	.compareModal {
		width: 89vw
	}

	#shopify-section-prodSticky {
		top: 55px
	}

	.proPage .banner .text .logo {
		margin: auto;
		display: block;
		margin-bottom: 19px
	}

	.proPage .banner .text .title {
		font-size: 36px;
		text-align: center;
		max-width: none;
		width: 90%;
		margin: auto
	}

	.proPage .banner .text .body {
		font-size: 17px;
		text-align: center
	}

	.proPage .iconRow {
		padding-top: 30px
	}

	.proPage .iconRow .title {
		font-size: 16px;
		text-align: center;
		padding-bottom: 30px
	}

	.proPage .iconRow .flex {
		display: none
	}

	.proPage .iconRow .proSlider {
		display: block;
		position: relative
	}

	.proPage .iconRow .proSlider .block img {
		margin: auto;
		width: 70px;
		height: 70px;
		object-fit: contain
	}

	.proPage .iconRow .proSlider .block .text {
		font-size: 17px;
		font-family: "Graphik-Regular", sans-serif;
		color: #4C4C4C;
		text-align: center;
		padding-top: 20px
	}

	.proPage .iconRow .proSlider .slick-dots {
		position: absolute;
		top: 145px;
		list-style: none;
		display: flex !important;
		padding: 0;
		margin: 0;
		width: 100%;
		justify-content: center
	}

	.proPage .iconRow .proSlider .slick-dots li {
		width: 15px;
		height: 15px;
		margin: 0px 10px;
		border-radius: 100%;
		background-color: #EFEEEE
	}

	.proPage .iconRow .proSlider .slick-dots li button {
		opacity: 0
	}

	.proPage .iconRow .proSlider .slick-dots .slick-active {
		background-color: #Fada4f
	}

	.proPage .marbleBlock .topSbs {
		flex-direction: column
	}

	.proPage .marbleBlock .topSbs img {
		width: 100%;
		height: 285px;
		left: -20px
	}

	.proPage .marbleBlock .topSbs .text {
		padding-top: 8px;
		width: 90%;
		margin: auto
	}

	.proPage .marbleBlock .topSbs .text .title {
		font-size: 16px
	}

	.proPage .marbleBlock .topSbs .text .body {
		font-family: "Graphik-Regular", sans-serif;
		font-size: 14px;
		line-height: 16px
	}

	.proPage .marbleBlock .bottomSbs {
		margin-top: 0px;
		flex-direction: column
	}

	.proPage .marbleBlock .bottomSbs .text {
		order: 1;
		padding-top: 8px;
		width: 90%;
		margin: auto
	}

	.proPage .marbleBlock .bottomSbs .text .title {
		font-size: 16px
	}

	.proPage .marbleBlock .bottomSbs .text .body {
		font-family: "Graphik-Regular", sans-serif;
		font-size: 14px;
		line-height: 16px
	}

	.proPage .marbleBlock .bottomSbs .vidBlock {
		width: 96%;
		margin-top: 40px
	}

	.proPage .textOverImg img {
		object-position: -153px;
		object-fit: cover
	}

	.proPage .textOverImg .text {
		transform: translate(calc(-50% + 59px), calc(-50%));
		width: calc(90% - 130px)
	}

	.proPage .textOverImg .text .quote {
		font-size: 16px
	}

	.proPage .textOverImg .text .credit {
		font-size: 11px
	}

	.proPage .textOverImg .text .credit:nth-of-type(2) {
		margin-bottom: 43px
	}

	.proPage .distPartners {
		padding-bottom: 30px
	}

	.proPage .distPartners .title {
		font-size: 16px;
		text-align: center;
		padding-bottom: 30px;
		width: 90%;
		margin: auto;
		padding-top: 30px
	}

	.proPage .distPartners .chooser {
		width: 90%;
		margin: auto;
		padding-top: 0px;
		display: flex;
		justify-content: space-around
	}

	.proPage .distPartners .chooser div {
		font-size: 18px !important;
		margin: 0px !important
	}

	.proPage .fillGrid {
		padding-bottom: 30px
	}

	.proPage .loadMore {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 85px;
		height: 30px;
		border-radius: 16px;
		border: 1px solid #6E6E6E;
		color: #6E6E6E;
		font-size: 10px;
		font-family: "Graphik-Medium", sans-serif;
		text-align: center;
		margin: auto;
		cursor: pointer;
		position: relative;
		top: -10px
	}

	.proPage .grid .block {
		width: calc(50% - 35px)
	}

	.proPage .grid .block:nth-of-type(3n) {
		margin-right: 21px
	}

	.proPage .grid .block:nth-of-type(2n) {
		margin-right: 0px
	}

	.proPage .proPartner .grid {
		padding-bottom: 20px
	}

	.proPage .proPartner .title,
	.proPage .awards .title {
		font-size: 16px;
		text-align: center;
		padding-bottom: 30px;
		width: 90%;
		margin: auto;
		padding-top: 30px
	}

	.proPage .awards {
		padding-bottom: 30px
	}

	.homepageProductImgContainer,
	.homepageCollectionImgContainer {
		height: 107px
	}

	#shopify-section-newHeader {
		position: fixed;
		width: 100%
	}

	.webpageContainer {
		overflow: hidden;
		margin-top: 55px
	}

	.mobileNavLinkProduct {
		display: block
	}

	.mobileNavLinkProduct span {
		padding-top: 6px
	}

	.mobileNavLinkProductImg {
		float: left
	}

	.mobileNavProdContainer {
		min-height: calc(100% - 243px);
		height: auto
	}

	.mobileNavProductButton {
		display: none
	}

	#shopify-section-prodSticky {
		position: fixed;
		width: 100%
	}

	.prodSticky .review-aggregate-summary {
		display: none !important
	}

	.prodStickyBuy button,
	.prodBannerButton1 button,
	.connectedPage .compareYaleMobile .compareYaleSlideShow .slide button {
		margin: auto;
		text-align: center;
		align-items: center;
		flex-direction: row;
		display: inline-block
	}

	.connectedPage .compareYaleMobile .compareYaleSlideShow .slide button {
		position: relative;
		top: 20px;
		left: 50%;
		transform: translateX(-50%)
	}

	.prodStickyBuy .comparePopButton {
		text-align: center
	}

	.prodWorksText {
		padding-top: 40px
	}

	.compareModal {
		height: calc(100vh - 40px);
		top: 20px;
		transform: translateX(-50%);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch
	}

	.compareModal .inner .compareTitle {
		padding-top: 40px;
		width: 90%;
		margin: auto
	}

	.howMobileComp .slick-dots li button {
		padding: 0px
	}

	.cartContainer .cart .items .block {
		height: auto;
		background: #fafafa
	}

	.cartContainer .cart .items .block .text {
		padding-bottom: 15px;
		height: calc(100% - 20px)
	}

	.cartContainer .cart .items .block .text .quantity {
		position: relative;
		bottom: 0px;
		padding-top: 10px
	}

	.cartContainer .cart .items .block .text .quantity span:after {
		top: 13px;
		right: 67px
	}

	.cartContainer .cart .otherItems .block .img {
		width: 25%;
		max-width: 125px
	}

	.cartContainer .cart .otherItems .block .right .row .price {
		width: 100%;
		padding-bottom: 10px
	}

	.cartContainer .cart .otherItems .block .right .row .addOtherToCart {
		margin-top: 20px;
		position: relative;
		float: none;
		left: -10px
	}

	.footerNavLink {
		text-align: center
	}

	.accessoriesSection .products .item:nth-of-type(2n) .imgGallery {
		padding: 0px;
		margin-top: 20px
	}

	.homepageSBSSection .wideBlock .block {
		height: 52vw
	}

	.worksContainer .wideBlock .block {
		height: 52vw
	}

	.mobileListSlider .slick-dots {
		display: flex !important
	}

	.newSecContainer .innerSBS {
		width: 80%;
		flex-direction: column-reverse
	}

	.newSecContainer .innerSBS .left {
		width: 100%
	}

	.newSecContainer .innerSBS .right {
		width: 100%
	}

	.quoteBlock {
		padding-top: 0px
	}

	.quoteBlock .title {
		font-size: 17px
	}

	.quoteBlock .grid {
		display: none
	}

	.quoteBlock .mobileQuoteSlider {
		display: block !important
	}

	.quoteBlock .mobileQuoteSlider .quote img {
		height: 20vw;
		width: calc(100% - 170px);
		object-fit: contain;
		margin: auto;
		margin-top: 40px;
		margin-bottom: 20px
	}

	.quoteBlock .mobileQuoteSlider .quote .text {
		color: #6E6E6E;
		text-align: center;
		font-size: 15px;
		letter-spacing: .18px;
		line-height: 21px;
		font-family: "Graphik Regular", sans-serif
	}

	.quoteBlock .slick-dots {
		display: flex !important;
		margin-top: 30px;
		padding-bottom: 30px;
		padding-left: 0px;
		justify-content: center
	}

	.quoteBlock .slick-dots li {
		display: block;
		width: 10px;
		height: 10px;
		background: #EFEEEE;
		border-radius: 100%;
		margin: 0px 5px;
		overflow: hidden
	}

	.quoteBlock .slick-dots li button {
		opacity: 0
	}

	.quoteBlock .slick-dots .slick-active {
		border: 1px solid #Fada4f
	}
}

@media only screen and (max-width: 633px) and (max-width: 440px) {
	.prodBannerColorSelect {
		padding-top: 50vw
	}
}