.visible-phone { display: none; } .divider-light { border-style: solid; border-color: #e4e4e4; border-width: 1px 0 0 0; } #section0 { margin: 0; } .storefront-intro-bg { background: url(../images_mcpg/store-front-hero-unit-bg.jpg) no-repeat bottom center; height: 710px; padding-top: 70px; background-size: cover; } .section { position: relative; width: 100%; margin: 0; /*padding: 96px 0 0 0;*/ overflow: hidden; } #section0 .storefront-intro { width: 100%; height: 100%; } .section div.section-int { max-width: 1170PX; margin: 0 auto; padding-top: 0; } #section0 .storefront-intro div.heading-text { position: relative; font-family: "Inter", sans-serif; font-size: 38px; line-height: 46px; text-align: center; color: #0d0d0c; font-weight: 600; text-transform: uppercase; } #section0 .storefront-intro div.heading-text span.highlight { color: #0484c1; } #section0 .storefront-intro div.title-text { position: relative; font-family: "Inter", sans-serif; font-size: 24px; text-align: center; font-weight: 500; margin-top: 2px; line-height: 26px; color: #0d0d0c; } #section1.storefront-one { width: 100%; height: 100%; display: inline-block; padding: 0; } #section1.storefront-one div.span6.panel-left { width: 50%; height: 495px; position: relative; margin: 0 0 0 0; padding-top: 50px; text-align: right; vertical-align: bottom; display: inline-block; padding-bottom: 120px; } #section1.storefront-one div.span6.panel-left div.content-text { float: right; width: 455px; position: relative; text-align: left; margin-right: 88px; padding: 0; display: inline-block; } #section1.storefront-one div.span6.panel-left div.content-text div.title-text { position: relative; font-size: 35px; font-family: 'Open Sans', sans-serif; line-height: 44px; margin: 0; display: inline-block; text-align: left; color: #555; } #section1.storefront-one div.span6.panel-left div.content-text .secondary-text { font-size: 15px; font-family: 'Open Sans', sans-serif; margin: 15px 0 0 0; line-height: 22px; color: #000; font-weight: 300; } #section1.storefront-one div.span6.panel-right { width: 50%; height: 100%; background: url(../images_mcpg/storefront-one-bg-shadow.png) left top no-repeat; position: relative; float: right; margin-left: -5px; padding-top: 39px; text-align: left; display: inline-block; position: relative; } #section1.storefront-one div.span6.panel-right .panel-right-img { background: url(../images_mcpg/storefront-one-img.gif) left top no-repeat; display: inline-block; width: 402px; height: 449px; margin-left: 65px; margin-top: 5px; position: relative; } #section2.storefront-two { width: 100%; height: 100%; display: inline-block; padding: 0; } #section2.storefront-two div.span6.panel-left { width: 50%; height: 100%; position: relative; float: left; margin-left: -5px; padding-top: 39px; text-align: left; display: inline-block; position: relative; } #section2.storefront-two div.span6.panel-left .panel-left-img { background: url(../images_mcpg/storefront_two_img.jpg) left top no-repeat; display: inline-block; width: 573px; height: 423px; float: right; margin-left: 0; margin-top: 16px; position: relative; margin-right: 54px; } #section2.storefront-two div.span6.panel-right { width: 50%; height: 478px; position: relative; background: url(../images_mcpg/storefront-one-bg-shadow.png) left top no-repeat; margin: 0 0 0 0; padding-top: 45px; text-align: right; vertical-align: bottom; display: inline-block; padding-bottom: 120px; } #section2.storefront-two div.span6.panel-right div.content-text { float: left; width: 436px; position: relative; text-align: left; margin-left: 40px; padding: 0; display: inline-block; } #section2.storefront-two div.span6.panel-right div.content-text div.title-text { position: relative; font-size: 35px; font-family: 'Open Sans', sans-serif; line-height: 44px; margin: 0; display: inline-block; text-align: left; color: #555; } #section2.storefront-two div.span6.panel-right div.content-text .secondary-text { font-size: 15px; font-family: 'Open Sans', sans-serif; margin: 15px 0 0 0; line-height: 22px; color: #000; font-weight: 300; } #section3.storefront-three { width: 100%; height: 100%; display: inline-block; padding: 0; } #section3.storefront-three div.span6.panel-left { width: 50%; height: 480px; position: relative; margin: 0 0 0 0; padding-top: 42px; text-align: right; vertical-align: bottom; display: inline-block; padding-bottom: 120px; } #section3.storefront-three div.span6.panel-left div.content-text { float: right; width: 455px; position: relative; text-align: left; margin-right: 88px; padding: 0; display: inline-block; } #section3.storefront-three div.span6.panel-left div.content-text div.title-text { position: relative; font-size: 35px; font-family: 'Open Sans', sans-serif; line-height: 44px; margin: 0 0 10px 0; display: inline-block; text-align: left; color: #555; } #section3.storefront-three div.span6.panel-left div.content-text .sub-title-text { font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #787878; margin: 15px 0 0 0; line-height: 20px; } #section3.storefront-three div.span6.panel-left div.content-text .arrow { background: url(../images_mcpg/bullet_arrow_store.png) no-repeat 0 0; width: 7px; height: 11px; display: inline-block; margin-right: 7px; } #section3.storefront-three div.span6.panel-left div.content-text .sub-title-text strong { font-weight: 600; } #section3.storefront-three div.span6.panel-left div.content-text .secondary-text { font-size: 14px; font-family: 'Open Sans', sans-serif; margin: 6px 0 0 15px; line-height: 18px; color: #787878; font-weight: 400; } #section3.storefront-three div.span6.panel-left div.content-text .divider-light { opacity: .5; margin: 15px 0; } #section3.storefront-three div.span6.panel-right { width: 50%; height: 100%; background: url(../images_mcpg/storefront-three-bg-shadow.png) left top no-repeat; position: relative; float: right; margin-left: 0; padding-top: 39px; text-align: left; display: inline-block; position: relative; margin-bottom: 10px; } #section3.storefront-three div.span6.panel-right .panel-right-img { background: url(../images_mcpg/storefront_three_img.jpg) left top no-repeat; display: inline-block; width: 447px; height: 418px; margin-left: 45px; margin-top: 20px; position: relative; } #section4.storefront-four { width: 100%; height: 100%; display: inline-block; padding: 0; } #section4.storefront-four div.span6.panel-left { width: 50%; height: 100%; position: relative; float: left; margin-left: -5px; padding-top: 39px; text-align: left; display: inline-block; position: relative; padding-bottom: 120px; } #section4.storefront-four div.span6.panel-left .panel-left-img { background: url(../images_mcpg/storefront_four_img-new.jpg) right top no-repeat; display: inline-block; float: right; width: 563px; height: 462px; margin-left: 0; margin-top: 0; position: relative; /*margin-right: 54px;*/ } #section4.storefront-four div.span6.panel-right { width: 50%; height: 501px; position: relative; background: url(../images_mcpg/storefront-one-bg-shadow.png) left top no-repeat; margin:0; padding: 45px 0 0 40px; text-align: right; vertical-align: bottom; display: inline-block; box-sizing: border-box; } #section4.storefront-four div.span6.panel-right div.content-text { float: left; width: 436px; position: relative; text-align: left; margin-left: 0; padding: 0; display:inline-block; } #section4.storefront-four div.span6.panel-right div.content-text div.title-text { position: relative; font-size: 35px; font-family: 'Open Sans', sans-serif; line-height: 44px; margin: 0 0 10px 0; display: inline-block; text-align: left; color: #555; } #section4.storefront-four div.span6.panel-right div.content-text .sub-title-text { font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #787878; margin: 15px 0 0 0; line-height: 20px; } #section4.storefront-four div.span6.panel-right div.content-text .sub-title-text strong { font-weight: 600; } #section4.storefront-four div.span6.panel-right div.content-text .secondary-text { font-size: 14px; font-family: 'Open Sans', sans-serif; margin: 0 0 0 0; line-height: 22px; color: #787878; font-weight: 400; } #section5.storefront-five { width: 100%; height: 100%; display: inline-block; padding: 0; } #section5.storefront-five div.span6.panel-left { width: 50%; height: 500px; position: relative; margin: 0 0 0 0; padding-top: 42px; text-align: right; vertical-align: bottom; display: inline-block; padding-bottom: 120px; } #section5.storefront-five div.span6.panel-left div.content-text { float: right; width: 455px; position: relative; text-align: left; margin-right: 88px; padding: 0; display: inline-block; } #section5.storefront-five div.span6.panel-left div.content-text div.title-text { position: relative; font-size: 35px; font-family: 'Open Sans', sans-serif; line-height: 44px; margin: 0 0 10px 0; display: inline-block; text-align: left; color: #555; } #section5.storefront-five div.span6.panel-left div.content-text .sub-title-text { font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #787878; margin: 15px 0 0 0; line-height: 20px; } #section5.storefront-five div.span6.panel-left div.content-text .arrow { background: url(../images_mcpg/bullet_arrow_store.png) no-repeat 0 0; width: 7px; height: 11px; display: inline-block; margin-right: 7px; } #section5.storefront-five div.span6.panel-left div.content-text .sub-title-text strong { font-weight: 600; } #section5.storefront-five div.span6.panel-left div.content-text .secondary-text { font-size: 14px; font-family: 'Open Sans', sans-serif; margin: 0 0 0 15px; line-height: 22px; color: #787878; font-weight: 400; } #section5.storefront-five div.span6.panel-left div.content-text .divider-light { opacity: .5; margin: 15px 0; } #section5.storefront-five div.span6.panel-right { width: 50%; height: 500px; position: relative; float: right; margin-left: -5px; padding-top: 39px; text-align: left; display: inline-block; position: relative; } #section5.storefront-five div.span6.panel-right .panel-right-img { background: url(../images_mcpg/storefront_five_img.jpg) left top no-repeat; display: inline-block; width: 420px; height: 605px; margin-left: 0; float: left; position: relative; } #section7.storefront-seven { width: 100%; height: 100%; display: inline-block; padding: 0; } #section7.storefront-seven div.span6.panel-left { width: 50%; height: 347px; position: relative; background: url(../images_mcpg/storefront-one-bg-shadow.png) left top no-repeat; margin: 0 0 0 0; padding-top: 42px; text-align: right; vertical-align: bottom; display: inline-block; padding-bottom: 120px; } #section7.storefront-seven div.span6.panel-left div.content-text { float: left; width: 350px; position: relative; text-align: left; margin-left: 50px; padding: 0; display: inline-block; } #section7.storefront-seven div.span6.panel-left div.content-text div.title-text { position: relative; font-size: 35px; font-family: 'Open Sans', sans-serif; line-height: 44px; margin: 0; display: inline-block; text-align: left; color: #555; } #section7.storefront-seven div.span6.panel-left div.content-text .secondary-text { font-size: 14px; font-family: 'Open Sans', sans-serif; margin: 15px 0 0 0; line-height: 22px; color: #787878; font-weight: 300; } #section7.storefront-seven div.span6.panel-right { width: 50%; height: 100%; position: relative; float: left; margin-left: -5px; padding-top: 39px; text-align: left; display: inline-block; position: relative; } #section7.storefront-seven div.span6.panel-right .panel-right-img { background: url(../images_mcpg/storefront_seven_img.jpg) left top no-repeat; display: inline-block; width: 454px; height: 330px; float: right; margin-right: 45px; margin-top: 20px; position: relative; } @media (min-width:768px) and (max-width:1024px) { .storefront-intro-bg { height: 400px; } #section0 .storefront-intro div.heading-text { font-size: 30px; line-height: 36px; margin: 0px; } } @media (min-width:768px) and (max-width:1199px) { #section1.storefront-one div.span6.panel-left div.content-text div.title-text { font-size: 28px; line-height: 38px; } #section1.storefront-one div.span6.panel-left, #section2.storefront-two div.span6.panel-right, #section3.storefront-three div.span6.panel-left, #section2.storefront-two div.span6.panel-right, #section3.storefront-three div.span6.panel-left, #section4.storefront-four div.span6.panel-left, #section5.storefront-five div.span6.panel-left, #section7.storefront-seven div.span6.panel-left { padding-bottom: 0; } #section1.storefront-one div.span6.panel-left div.content-text { width: 85%; margin-right: 30px; } #section1.storefront-one div.span6.panel-right .panel-right-img { background-size: 100% auto; width: 90%; margin-left: 20px; margin-top: 5px; position: relative; } #section2.storefront-two div.span6.panel-right { /*! width:42.6%; */ } #section2.storefront-two div.span6.panel-left .panel-left-img { background-size: 100% auto; width: 80%; height: 423px; } #section2.storefront-two div.span6.panel-right div.content-text { width: 85%; margin-left: 20px; } #section2.storefront-two div.span6.panel-right div.content-text div.title-text { font-size: 30px; line-height: 32px; } #section3.storefront-three div.span6.panel-left div.content-text { width: 85%; margin-right: 30px; } #section3.storefront-three div.span6.panel-left div.content-text div.title-text { font-size: 30px; line-height: 32px; } #section3.storefront-three div.span6.panel-left div.content-text .arrow { height: 60px; margin-top: 4px; float: left; } #section3.storefront-three div.span6.panel-right .panel-right-img { background-size: 100% auto; width: 85%; height: 418px; margin-left: 35px; margin-top: 20px; position: relative; } #section4.storefront-four div.span6.panel-left .panel-left-img { background-size: 85% auto; width: 100%; } #section4.storefront-four div.span6.panel-right { /*! width:43.3%; */ padding-left: 20px; } #section4.storefront-four div.span6.panel-right div.content-text { width: 95%; } #section4.storefront-four div.span6.panel-right div.content-text .secondary-text { line-height: 18px; } #section4.storefront-four div.span6.panel-right div.content-text div.title-text { font-size: 30px; line-height: 32px; } #section5.storefront-five div.span6.panel-left div.content-text { width: 85%; margin-right: 30px; } #section5.storefront-five div.span6.panel-left div.content-text .arrow { height: 60px; float: left; margin-top: 4px; } #section5.storefront-five div.span6.panel-left div.content-text div.title-text { font-size: 30px; line-height: 32px; } #section5.storefront-five div.span6.panel-right .panel-right-img { width: 420px; height: 462px; background-size: contain; } #section6.storefront-six div.span6.panel-left .panel-left-img { background-size: 100% auto; width: 90%; margin-right: 20px; } #section6.storefront-six div.span6.panel-right { padding: 45px 0 0 30px; } #section6.storefront-six div.span6.panel-right div.content-text { width: 90%; } #section6.storefront-six div.span6.panel-right div.content-text div.title-text { font-size: 30px; line-height: 32px; } #section7.storefront-seven div.span6.panel-left div.content-text { width: 85%; margin-right: 27px; } #section7.storefront-seven div.span6.panel-left div.content-text div.title-text { font-size: 30px; line-height: 32px; } #section7.storefront-seven div.span6.panel-right .panel-right-img { background-size: 100% auto; display: inline-block; width: 80%; margin-left: 20px; margin-top: 20px; position: relative; } } @media (max-width:767px) { #section2.storefront-two div.span6.panel-left.hidden-phone { display: none; } #section2.storefront-two div.span6.visible-phone { display: block; } #section2.storefront-two div.span6.panel-right { background: none;} .storefront-intro-bg { height: 300px; padding-top: 35px; } #section0 .storefront-intro div.heading-text { font-size: 30px; line-height: 36px; margin: 0px; } #section0 .storefront-intro div.heading-text { font-size: 18px; line-height: 20px; } #section0 .storefront-intro div.title-text { font-size: 15px; font-weight: 400; line-height: 18px; } #section0 .storefront-intro div.title-text.terms-text { font-size: 11px; margin: 20px 0 0 0px; line-height: 12px; } #section1.storefront-one div.span6.panel-left { width: 100%; height: auto; padding-top: 0; padding-bottom: 0px; } #section1.storefront-one div.span6.panel-left div.content-text { float: right; width: auto; padding: 15px; /*margin-bottom: 30px;*/ margin-right: 0px; } #section1.storefront-one div.span6.panel-left div.content-text div.title-text { position: relative; font-size: 20px; line-height: 26px; } #section1.storefront-one div.span6.panel-left div.content-text .secondary-text { font-size: 12px; line-height: 20px; } #section1.storefront-one div.span6.panel-right { margin: 0px; padding: 10px; width: 100%; background: none; } #section1.storefront-one div.span6.panel-right .panel-right-img { background: url(../images_mcpg/storefront_one_img_mobile.jpg) center top no-repeat; position: relative; width: 95%; height: 477px; margin-left: 10px; } #section1.storefront-one div.span6.panel-right .down_arrow { background: url(../images_mcpg/down_arrow_blue.png) 0 0 no-repeat; display: block; top: 0px; left:0; right:0; margin:0 auto; width: 31px; height: 14px; position: absolute; z-index: 100; } #section2.storefront-two div.span6 .down_arrow { background: url(../images_mcpg/down_arrow_red.png) 0 0 no-repeat; display: block; top: 0px; left: 0; right: 0; margin: 0 auto; width: 31px; height: 14px; position: relative; z-index: 1; } #section2.storefront-two div.span6 .panel-left-img-mobile { background-size: 100% auto; width: 90%; margin-top: 15px; float: none; margin-left: auto; margin-right: auto; height: 524px; } #section2.storefront-two div.span6.panel-right { width: 100%; height: auto; padding: 35px 5px 15px 5px; } #section2.storefront-two div.span6.panel-right div.content-text { float: left; width: 100%; margin-left: 0px; } #section2.storefront-two div.span6.panel-right div.content-text div.title-text { font-size: 28px; line-height: 30px; } #section2.storefront-two div.span6.panel-right div.content-text .secondary-text { font-size: 12px; line-height: 20px; } #section3.storefront-three div.span6.panel-left { width: 100%; height: auto; padding: 35px 5px 15px 5px; } #section3.storefront-three div.span6.panel-left div.content-text { width: 100%; float: left; margin: 0 0 20px 0px; } #section3.storefront-three div.span6.panel-left div.content-text .arrow { display:inline-block; height:60px; margin-top:4px; float: left; } #section3.storefront-three div.span6.panel-left div.content-text div.title-text { font-size: 28px; line-height: 30px; } #section3.storefront-three div.span6.panel-left div.content-text .sub-title-text { font-size: 13px; line-height: 18px; } #section3.storefront-three div.span6.panel-left div.content-text .secondary-text { font-size: 11px; line-height: 16px; } #section3.storefront-three div.span6.panel-right { width: 100%; background: none; padding-top: 0; margin-left: 15px; position: relative; } #section3.storefront-three div.span6.panel-right .down_arrow { background: url(../images_mcpg/down_arrow_blue.png) 0 0 no-repeat; display: block; top: 0px; left:0; right:0; margin:0 auto; width: 31px; height: 14px; position: relative; z-index: 100; } #section3.storefront-three div.span6.panel-right .panel-right-img { background: url(../images_mcpg/storefront_three_img_mobile.jpg) center top no-repeat; width: 100%; height: 512px; margin-left: 0px; } #section4.storefront-four div.span6.panel-left { width: 100%; height: 100%; background: none; } #section4.storefront-four div.span6.panel-left.hidden-phone { display: none; } #section4.storefront-four div.span6 .down_arrow { background: url(../images_mcpg/down_arrow_red.png) 0 0 no-repeat; display: block; top: 0px; left: 0; right: 0; margin: 0 auto; width: 31px; height: 14px; position: relative;z-index: 100; } #section4.storefront-four div.span6 .panel-left-img-mobile { background: url(../images_mcpg/storefront_four_img_mobile.jpg) center top no-repeat; float: left;width: 100%; margin-top: 25px; height: 299px; } #section4.storefront-four div.span6.panel-right { width: 100%; height: auto; margin: 0 0 0 0; padding: 35px 5px 15px 5px; background: none; } #section4.storefront-four div.span6.visible-phone { display: block; } #section4.storefront-four div.span6.panel-right div.content-text { width: 100%; line-height: 20px; } #section4.storefront-four div.span6.panel-right div.content-text div.title-text { font-size: 27px; line-height: 29px; margin-bottom: 15px; } #section4.storefront-four div.span6.panel-right div.content-text .sub-title-text { font-size: 13px; line-height: 18px; margin-top: 0px; } #section4.storefront-four div.span6.panel-right div.content-text .secondary-text { font-size: 11px; line-height: 14px; } #section5.storefront-five div.span6.panel-left { width: 100%; height: auto; padding-bottom: 0px; } #section5.storefront-five div.span6.panel-left div.content-text { width: 92%; float: left; margin: 0 0 20px 15px; } #section5.storefront-five div.span6.panel-left div.content-text .arrow { display: inline-block; height: 60px; float: left; } #section5.storefront-five div.span6.panel-left div.content-text div.title-text { font-size: 28px; line-height: 30px; } #section5.storefront-five div.span6.panel-left div.content-text .sub-title-text { font-size: 13px; line-height: 18px; } #section5.storefront-five div.span6.panel-left div.content-text .secondary-text { font-size: 11px; line-height: 16px; } #section5.storefront-five div.span6.panel-right { width: 100%; height: 100%; float: left; margin-left: 0px; padding: 0; } #section5.storefront-five div.span6.panel-right .down_arrow { background: url(../images_mcpg/down_arrow_blue.png) 0 0 no-repeat; display: block; top: 0px; left:0; right:0; margin:0 auto; width: 31px; height: 14px; position: absolute; z-index: 100; display: none; } #section5.storefront-five div.span6.panel-right .panel-right-img { background: url(../images_mcpg/storefront_five_img_mobile.jpg) left top no-repeat; width: 100% !important; margin-top: 0px; height: 450px; background-size: contain; } #section6.storefront-six div.span6.panel-left { width: 100%; height: 106%; background: none; margin: 0px; padding: 45px 15px 0 15px; } #section6.storefront-six div.span6 .down_arrow { background: url(../images_mcpg/down_arrow_red.png) 0 0 no-repeat; display: block; top: 0px; left: 0; right: 0; margin: 0 auto; width: 31px; height: 14px; position: relative; z-index: 100; } #section6.storefront-six div.span6 .panel-left-img-mobile { float: left; width: 100%; height: 400px; margin-left: auto; margin-right: auto; float: none; margin-top: 30px; } #section6.storefront-six div.span6.panel-right { width: 102%; height: auto; padding: 45px 15px 30px 15px; } #section6.storefront-six div.span6.panel-right div.content-text { width: 100%; } #section6.storefront-six div.span6.panel-right div.content-text div.title-text { font-size: 28px; line-height: 30px; } #section6.storefront-six div.span6.panel-right div.content-text .sub-title-text { font-size: 13px; line-height: 16px; } #section6.storefront-six div.span6.panel-right div.content-text .secondary-text { font-size: 12px; line-height: 16px; margin-top: 10px; } #section7.storefront-seven div.span6.panel-left { width: 100%; height: auto; padding: 45px 5px 15px 5px; background: none; } #section7.storefront-seven div.span6.panel-left div.content-text { float: left; width: 100%; margin-right: 0px; margin-left: 0px; } #section7.storefront-seven div.span6.panel-left div.content-text div.title-text { font-size: 28px; line-height: 30px; } #section7.storefront-seven div.span6.panel-left div.content-text .secondary-text { font-size: 11px; line-height: 16px; } #section7.storefront-seven div.span6.panel-right{width:100%;height:100%; padding-bottom:0px; background:none; margin-left:0px; padding-top: 0px;} #section7.storefront-seven div.span6.panel-right .down_arrow { background: url(../images_mcpg/down_arrow_blue.png) 0 0 no-repeat; display: block; top: 0px; left:0; right:0; margin:0 auto; width: 31px; height: 14px; position: absolute; z-index: 100; } #section7.storefront-seven div.span6.panel-right .panel-right-img { background: url(../images_mcpg/storefront_seven_img_mobile.jpg) center top no-repeat; width: 100%; margin-left: auto; margin-right: auto; float: none; margin: 0 auto; position: relative; margin-top: 20px; } } @media (min-width:320px) and (max-width:480px) { .storefront-intro-bg { /*background-image: url(../images_mcpg/store-front-hero-unit-bg-mobile.jpg);*/ height: 300px;} #section0 .storefront-intro div.heading-text { font-size: 15px; /*line-height: 20px;*/ } #section0 .storefront-intro div.title-text { font-size: 12px; } #section1.storefront-one div.span6.panel-left div.content-text div.title-text { font-size: 18px; } }