@media screen and (min-width: 1920px) {

#mpBlock1, #mpBlock3, #mpBlock5, #mpBlock7, #mpBlock9, footer {background-size: 100% auto;}

}


@media screen and (max-width: 1580px) {

body {font-size: 19px;}
.centered {width: 1220px; margin: 0 auto;}
#topBody > div:last-child {padding-left: 6%;}
#mpBlock1BodyImg-block1 .flex img {width: 400px; margin-top: -24px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:last-child p {font-size: 13px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:first-child {width: 48px; height: 48px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel {width: 210px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:last-child {width: calc(100% - 48px); padding: 0 10px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:first-child img {width: 32px; height: 32px;}
.label {font-size: 13px;}
.txt h1 {font-size: 44px;}
.txt h2, .likeH2 {font-size: 36px;}
#mpBlock1Body .txt h2 {font-size: 22px;}
.txt ul li::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url('../img/bullet.svg') no-repeat;
  display: block; background-size: 22px 22px;
  position: absolute;
  top: 2px;
  left: 0px;
}
.txt ul li {padding-left: 32px;}
.button {font-size: 19px;}
#mpBlock1BodyImg > div:first-child {top: 50%; margin-top: -193px;}
#mpBlock2 .txt p {font-size: 22px;}
.colums-2-50-left > div:first-child {padding-right: 56px;}
.txt h3 {font-size: 30px;}
.mpBlock5El .txt h3 {font-size: 22px;}
.questionsEl .flex p {font-size: 20px; line-height: 1.05;}
.txt h4 {font-size: 22px;}
.colums-2-50-right > div:last-child {padding-left: 10%;}
#footerTopBody > .txt p {font-size: 22px;}


}

@media screen and (max-width: 1380px) {

body {font-size: 18px;}
.centered {width: 100%; padding: 0 48px; margin: 0 auto;}
#mpBlock1BodyImg > div:last-child {width: 85%; margin-left: 15%;}
#mpBlock1BodyImg > div:first-child {left: -16px;}
#mpBlock1BodyImg-block1 {width: 90%;}
#mpBlock1BodyImg-block1 .flex img {width: 80%; margin-left: 10%;}
#topBody > div:last-child {padding-left: 64px;}
#mpBlock1BodyImg-block2 {width: 230px;}
#mpBlock1BodyImg-block3 {width: 130px; bottom: 170px; right: -16px;}
#mpBlock1BodyImg-block3::before {
  width: 37px;
  height: 90px;
  background: url('../img/pointer.svg') no-repeat;
  background-size: 37px 90px;
  right: 88px;
  bottom: -68px;
}
#mpBlock1 {
  background: url('../img/mpBlock1-bg.svg') no-repeat;
  background-position: 50% 100%;
  padding: 140px 0; background-size: 1800px 919px;
  margin-top: -83px;
}
#mpBlock1Body > div:last-child {
  width: 60%;
  padding-right: 64px;
}
.txt h1 {font-size: min(max(26px, calc(1.625rem + (42 - 26) * ((100vw - 320px) / (1380 - 320)))), 42px);
  min-height: 0vw; margin-bottom: 36px;}
.txt h1:last-child {margin-bottom: 0px;}
.txt h2, .likeH2 {font-size: min(max(24px, calc(1.5rem + (34 - 24) * ((100vw - 320px) / (1380 - 320)))), 34px); min-height: 0vw;}
#mpBlock1Body .txt h2, #mpBlock2 .txt p {font-size: min(max(18px, calc(1.125rem + (22 - 18) * ((100vw - 320px) / (1380 - 320)))), 22px); min-height: 0vw;}
.button {font-size: 18px;}
#mpBlock3Body table tr td {font-size: 15px;}
#mpBlock3Body .flex2 > div:last-child, #mpBlock3Body .flex3 > div:last-child {font-size: 17px;}
.txt h3 {font-size: min(max(20px, calc(1.25rem + (30 - 20) * ((100vw - 320px) / (1380 - 320)))), 30px);
  min-height: 0vw;}
.mpBlock5El .txt h3 {font-size: min(max(18px, calc(1.125rem + (22 - 18) * ((100vw - 320px) / (1380 - 320)))), 22px); min-height: 0vw;}
.txt ul li:before {top: 1px;}
.questionsEl .flex p {font-size: 19px;}
.txt h4, #footerTopBody > .txt p {font-size: min(max(18px, calc(1.125rem + (22 - 18) * ((100vw - 320px) / (1380 - 320)))), 22px); min-height: 0vw;}
#mpBlock7 {background: url('../img/waves3.svg') no-repeat #F0F0F0; background-position: 50% 0%; padding-top: 332px; z-index: 1; margin-top: -240px;}
#mpBlock7 .centered {padding-top: 40px;}
.selfInstallEl p {font-size: 17px;}
#mpBlock9 {background: url('../img/waves4.svg') no-repeat #F8F8F8; background-position: 50% 0%; padding-top: 234px;}
footer {min-height: 320px; margin-top: -320px; position: relative; width: 100%; background: url('../img/waves5.svg') no-repeat; background-position: 50% 0%; padding-top: 150px;}

#b404 {padding: 140px 0 0;}


}

@media screen and (max-width: 1280px) {

.marginTop-48 {margin-top: 40px;}
.width-80 {width: 90%;}
.txtCenter.width-80 {margin-left: 5%;}
.button {padding: 0 24px;}
.button--icon {padding: 0 0;}
#step3Btn .button {padding: 14px 24px;}
.questionsEl .flex p {font-size: 20px;}
.colums-2-50-right > div:last-child {padding-left: 8%;}
#selfInstallNav {margin-top: 24px;}

}

@media screen and (max-width: 1220px) {
  
#mpBlock1BodyImg-block2 {width: 200px;}
#mpBlock1BodyImg-block3 {width: 100px; bottom: 150px; right: -16px;}
#mpBlock1BodyImg-block3::before {
  width: 37px;
  height: 90px;
  background: url('../img/pointer.svg') no-repeat;
  background-size: 37px 90px;
  right: 64px;
  bottom: -68px;
}
#mpBlock1BodyImg > div:first-child {left: -24px; top: 50%; margin-top: -169px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:last-child p {font-size: 12px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:first-child {width: 40px; height: 40px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel {width: 190px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:last-child {width: calc(100% - 40px); padding: 0 10px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:first-child img {width: 32px; height: 32px;}
.mpBlock1BodyImgLabel:first-child, .mpBlock1BodyImgLabel:last-child {margin-left: 40px;}
.mpBlock1BodyImgLabel:nth-child(2), .mpBlock1BodyImgLabel:nth-last-child(2) {margin-left: 20px;}
.label {padding: 7px 12px 6px;}
#mpBlock1 {background: url('../img/mpBlock1-bg.svg') no-repeat; background-position: 50% 100%; padding: 130px 0; background-size: 1600px 817px; margin-top: -83px;}
#mpBlock3 {background: url('../img/waves1.svg') no-repeat; background-size: 1600px 284px; background-position: 50% 100%; padding-bottom: 130px;}
.stepsEl {padding: 24px;}
.mpBlock5El > div:first-child {padding: 16px;}
#mpBlock5 {padding-top: 130px; background: url('../img/waves2.svg') no-repeat; background-position: 50% 0%; background-size: 1600px 194px;}
#mpBlock7 {background: url('../img/waves3.svg') no-repeat #F0F0F0; background-position: 50% 0%; padding-top: 284px; z-index: 1; margin-top: -190px; background-size: 1600px 284px;}
#mpBlock7 .centered {padding-top: 10px;}
.bentoEl {padding: 24px;}
/*.selfInstallEl img {width: 76%; margin-left: 12%;}*/
.colums-2-50-right > div:last-child {padding-left: 6%;}
#mpBlock9 {background: url('../img/waves4.svg') no-repeat #F8F8F8; background-position: 50% 0%; padding-top: 204px; background-size: 1600px 194px;}
footer {min-height: 320px; margin-top: -320px; position: relative; width: 100%; background: url('../img/waves5.svg') no-repeat; background-position: 50% 0%; padding-top: 130px; background-size: 1600px 194px;}

#b404 {padding: 130px 0 0;}

}

@media screen and (max-width: 1180px) {

.centered {padding: 0 40px;}
.txt ul li {margin-top: 10px;}
.txt ul li:first-child {margin-top: 0px;}
.marginTop-56 {margin-top: 48px;}
#mpBlock1BodyImg-block1 {width: 95%;}
#mpBlock1BodyImg > div:last-child {width: 90%; margin-left: 10%;}
#topBody > div:last-child {padding-left: 56px;}
#mpBlock1Body > div:last-child {width: 60%; padding-right: 56px;}
.colums-2-50-left > div:first-child {padding-right: 40px;}
#mpBlock2 .txt p {font-size: 18px;}
#mpBlock3Body table tr td {padding: 10px;}
#customControl .input {width: 80px;}
.width-80 {width: 100%;}
.txtCenter.width-80 {margin-left: 0%;}
.questionsEl .flex p {font-size: 19px;}
.bentoGallery {width: 90%; margin-top: 20px;}
.selfInstallEl p {margin-top: 16px;}
.marginTop-16 {margin-top: 12px;}
.bento-2-3 > div:last-child > .flex > div:last-child > .flex > div:first-child {width: 60%;}
.bento-2-3 > div:last-child > .flex > div:last-child > .flex > div:last-child {justify-content: center; width: 40%; align-items: center;}
.bento-2-3 > div:last-child > .flex > div:last-child > .flex > div:last-child img {width: 100%;}
.bento-2-3 > div:last-child > .flex > div:last-child > .flex > div:last-child a {width: 80%; margin-left: 10%;}
.colums-2-50-right > div:last-child {padding-left: 56px;}
#mpBlock9 .mpBlock1BodyImgLabel {width: 100%;}
#footerBottom {padding: 48px 0 32px;}
#footerBottomBody > div:nth-child(2) p a, #footerBottomBody > div:nth-child(2) p a:visited {margin-right: 16px;}
#footerBottomBody > div:nth-child(2) p, #footerBottomBody > div:last-child {font-size: 15px;}


}

@media screen and (max-width: 1140px) {
    
#selfInstallNav .button--secondary:not(.button--icon) > div:first-child {display: none;}
#selfInstallNav .button--secondary:not(.button--icon) > div:last-child {margin-left: 0px;}


}

@media screen and (max-width: 1120px) {

.questionsEl .flex p {font-size: 20px;}
.faqEl > div:last-child img {width: 28px; height: 28px;}


}

@media screen and (max-width: 1080px) {
  
#mpBlock1BodyImg-block2 {width: 180px;}
#mpBlock1BodyImg-block3 {width: 90px; bottom: 140px; right: -16px;}
#mpBlock1BodyImg-block3::before {
  width: 37px;
  height: 90px;
  background: url('../img/pointer.svg') no-repeat;
  background-size: 37px 90px;
  right: 64px;
  bottom: -68px;
}
#topBody > div:last-child {padding-left: 48px;}
#mpBlock1Body > div:last-child {width: 60%; padding-right: 48px;}
#topBody > div:last-child ul li {margin: 5px 24px 5px 0;}
#steps > div:first-child, #steps > div:nth-child(2) {width: calc((100% - 20px) / 2);}
#steps > div:last-child {width: 100%; margin-top: 20px; margin-left: 0px;}
#customControl .input {width: 90px;}
#step3Btn .button {width: calc((100% - 10px) / 2); float: left; justify-content: center;}
#step3Btn .button:last-child {margin-left: 10px; margin-top: 0px;}
#customPrice {font-size: 26px; margin-top: 24px;}
.bento-2-3 > div:first-child {width: 320px;}
.bento-2-3 > div:last-child {width: calc(100% - 320px);}
.mpBlock1BodyImgLabel > div:last-child p {font-size: 13px;}
#footerTopBody ul li {margin: 5px 24px 5px 0;}
#footerTopBody ul {margin-top: 32px;}


}

@media screen and (max-width: 960px) {

.centered {padding: 0 10%;}
#mpBlock1Body > div:last-child {width: 560px; padding-right: 0; margin-left: calc((100% - 560px) / 2);}
#mpBlock1Body > div:first-child {width: 100%; margin-left: 0%; margin-top: 56px;}
#mpBlock1 {background-position: 50% 50%; background-size: cover; margin-top: 0px; padding: 64px 0 120px;}
#topBody > div:last-child {padding-left: 40px;}
.txt h1 {font-size: min(max(28px, calc(1.75rem + (36 - 28) * ((100vw - 320px) / (960 - 320)))), 36px); min-height: 0vw; margin-bottom: 32px;}
.txt h1:last-child {margin-bottom: 0px;}
.colums-2-50 > div {width: 100%; margin-left: 0px !important; margin-right: 0px; padding-left: 0px; padding-right: 0px;}
.colums-2-50 > div:last-child {margin-top: 48px;}
#mpBlock2 .colums-2-50 > div:first-child .txt h2 {width: 90%;}
.slickWrpBody {width: calc(100% + 16px); margin-left: -16px;}
.slickWrpBody .slick-slide {margin-left: 16px;}
#mpBlock2 {margin-top: -20px;}
.txt h2, .likeH2 {margin-bottom: 28px;}
.txt h2:last-child, .likeH2:last-child {margin-bottom: 0px;}
#mpBlock3 {padding-bottom: 120px;}
.marginTop-80 {margin-top: 72px;}
#mpBlock3Body table tr td img {width: 16px; height: 16px;}
#mpBlock3Body .flex2 > div:last-child, #mpBlock3Body .flex3 > div:last-child {padding-top: 16px;}
#steps > div:first-child {width: calc((100% - 16px) / 2); margin-left: 0px;}
#steps > div:nth-child(2) {width: calc((100% - 16px) / 2); margin-left: 16px;}
#steps > div:last-child {width: 100%; margin-top: 16px; margin-left: 0px;}
#mpBlock5 .colums-2-50 > div:last-child {margin-top: 16px;}
#mpBlock5 {padding-top: 120px;}
.questionsEl .flex p {font-size: 19px;}
.questionsEl .flex {padding: 20px;}
.marginTop-40 {margin-top: 32px;}
.bento-2-3 > div:first-child {width: 100%;}
.bento-2-3 > div:last-child {width: 100%; padding-left: 0px; padding-top: 16px;}
.bento-2-3 > div:last-child > .flex > div:first-child {width: calc((100% - 16px) / 2);}
.bento-2-3 > div:last-child > .flex > div:nth-child(2) {width: calc((100% - 16px) / 2); margin-left: 16px;}
.bentoGallery {width: 100%;}
.selfInstallEl img {width: 300px; margin-left: calc((100% - 300px) / 2);}
#selfInstallNav {margin-top: 32px;}
.bento-2-3 > div:last-child > .flex > div:last-child {margin-top: 16px;}
#selfInstallNav > div:first-child {margin-right: 16px;}
#mpBlock8 .colums-2-50-right > div:first-child {width: 100%;}
#mpBlock8 .colums-2-50-right > div:last-child {display: none;}
#mpBlock9 .colums-2-50-left > div:first-child {padding-right: 0px;}
#mpBlock9 .mpBlock1BodyImgLabel > div:first-child {width: 48px; height: 48px;}
#mpBlock9 .mpBlock1BodyImgLabel > div:first-child img {width: 32px; height: 32px;}
.mpBlock1BodyImgLabel > div:last-child {width: calc(100% - 48px);}
#mpBlock9 .mpBlock1BodyImgLabel {width: calc((100% - 10px) / 2); margin-left: 10px; margin-top: 10px; float: left;}
#mpBlock9 .mpBlock1BodyImgLabel:nth-child(2n+1) {margin-left: 0px;}
#mpBlock9 .mpBlock1BodyImgLabel:nth-child(-n+2) {margin-top: 0px;}
.mpBlock1BodyImgLabel > div:last-child p {font-size: 12px;}
#certificates > div:last-child {padding-left: 16px;}
#certificates > div:last-child > .flex > div {width: calc((100% - 16px) / 2); margin-left: 16px; margin-top: 16px;} 
#certificates > div:last-child > .flex > div:nth-child(2n+1) {margin-left: 0px;}
#certificates > div:last-child > .flex > div:nth-child(-n+2) {margin-top: 0px;}
#mpBlock9 {padding-top: 194px; margin-top: 0px;}
#footerBottomBody > div:nth-child(2) p {display: block;}
#footerBottomBody > div:nth-child(2) p a {width: 100%; margin-right: 0px; display: block; margin-top: 3px;}
#footerBottomBody > div:nth-child(2) p a:first-child {margin-top: 0px;}
#footerBottom {padding: 40px 0 24px;}
#footerBottomBody > div:nth-child(2) p {font-size: 14px;}
#footerBottomBody > div:nth-child(2) p, #footerBottomBody > div:last-child {font-size: 14px;}
#selfInstallNav .button--secondary:not(.button--icon) > div:first-child {display: -webkit-flex; display: -ms-flexbox; display: flex;}
#selfInstallNav .button--secondary:not(.button--icon) > div:last-child {margin-left: 10px;}
.marginTop-100 {margin-top: 88px;}
.paddingTop-100 {padding-top: 88px;}

#b404 {padding: 64px 0 0; margin-top: 0px;}

}

@media screen and (max-width: 820px) {
  
.centered {padding: 0 8%;}
.button {height: 48px; padding: 0 24px;}
.button--icon {padding: 0 0; width: 48px;}
#customControl .input {width: 80px; height: 48px;}
.questionsEl .flex p {font-size: 20px;}

}

@media screen and (max-width: 780px) {
  
#steps > div:first-child {width: 100%; margin-left: 0px;}
#steps > div:nth-child(2) {width: 100%; margin-left: 0px; margin-top: 16px;}
#step3Btn {width: 70%; margin-left: 15%;}
#step3Btn .button {width: 100%;}
#step3Btn .button:last-child {margin-left: 0px; margin-top: 10px;} 
#steps .txt img {width: 70%; margin-left: 15%;}
#mdl {width: 560px; padding: 48px;}

}

@media screen and (max-width: 720px) {

.centered {padding: 0 7%;}
#mpBlock1Body > div:last-child {width: 520px; padding-right: 0; margin-left: calc((100% - 520px) / 2);}
#mpBlock1 {padding: 56px 0 100px;}
.marginTop-56 {margin-top: 40px;}
#topBody > div:last-child {padding-left: 32px;}
#mpBlock3Body .flex2 > div:last-child, #mpBlock3Body .flex3 > div:last-child {padding: 16px 0 0;}
.questionsEl .flex p {font-size: 19px;}

#b404 {padding: 56px 0 0;}

}


@media screen and (max-width: 680px) {

#topBodyMenuBtnWrp {display: block;}
#topBodyMenuBtnWrp .button {padding: 0 0; width: 40px; height: 40px;}
#topBody > div:last-child ul {display: none;}
#topBody > div:first-child {width: calc(100% - 40px);}
#topBody > div:last-child {flex: auto; width: 40px; padding-left: 0px;}
#topBody > div:first-child img {width: 100px; height: auto;}
#top {padding-top: 20px;}
#mpBlock1Body > div:first-child {margin-top: 48px;}
#mpBlock1 {padding: 48px 0 100px;}
#mpBlock2 .colums-2-50 > div:last-child {margin-top: 40px;}
#mpBlock2 .colums-2-50 > div:first-child .txt h2 {width: 100%;}
#mpBlock3 {padding-bottom: 100px;}
.marginTop-80 {margin-top: 64px;}
#mpBlock5 {padding-top: 100px;}
.marginTop-100 {margin-top: 80px;}
.paddingTop-100 {padding-top: 80px;}
.bento-2-3 > div:last-child > .flex > div:first-child {width: 100%;}
.bento-2-3 > div:last-child > .flex > div:nth-child(2) {width: 100%; margin-left: 0px; margin-top: 16px;}
.bentoGallery {width: 70%; margin-top: 24px;}
.bento-2 > div {width: 100%; margin-left: 0px; margin-top: 16px;}
#mpBlock9 .mpBlock1BodyImgLabel {width: 100%; margin-left: 0px; margin-top: 10px; float: none;}
#mpBlock9 .mpBlock1BodyImgLabel:nth-child(2n+1) {margin-left: 0px;}
#mpBlock9 .mpBlock1BodyImgLabel:nth-child(-n+2) {margin-top: 10px;}
#mpBlock9 .mpBlock1BodyImgLabel:nth-child(-n+1) {margin-top: 0px;}
.mpBlock1BodyImgLabel > div:last-child p {font-size: 13px;}
#footerTopBody ul {display: none;}
#footerBottomBody > div:last-child {width: 100%; margin-top: 32px; }
#footerBottomBody > div:nth-child(2) {padding: 0 0 0 24px;}
#footerBottomBody > div:first-child {width: 100px;}
#footerBottomBody > div:first-child img {display: block; width: 100px; height: auto;}
footer {padding-top: 120px;}

#overlay {width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 0; background: rgba(0,0,0,.3); opacity: 0; visibility: hidden; transition: all .25s ease-in-out;}
#panel {width: 60%; display: block; position: fixed; background-color: #fff; top: 0px; bottom: 0px; right: -60%; z-index: 20; transition: right .4s ease-in-out;height: 100%;}
#panelTop {width: 100%; height: 70px; align-items: center; justify-content: flex-end; padding: 0 24px;}
#panelTop > div svg {display: block; width: 26px; height: 26px; padding: 2px; float: right;}
#panelTop > div svg line {stroke: #36454F; transition: all 0.1s linear;}
#panelTop > div {cursor: pointer;}
#panelTop > div:hover svg line {stroke: #5F6A72; transition: all 0.1s linear;}
#panelBody {height: calc(100% - 70px); padding: 40px 24px;}
#panelBody > div {height: 100%; width: 100%; overflow-y: auto;}
#panelBody p {margin-top: 16px; text-align: center; line-height: 1.2;}
#panelBody p:first-child {margin-top: 0px;}
#panelBody p a, #panelBody p a:visited {color: #36454F; font-size: 22px; line-height: 1 !important;text-decoration: none; transition: all 0.1s linear; }
#panelBody p a:hover {color: #5F6A72 !important; transition: all 0.1s linear;}
.panel--open #overlay {z-index: 15; opacity: 1; visibility: visible; transition: all .25s ease-in-out;}
.panel--open #panel {right: 0px; transition: right .4s ease-in-out;}
#panelBody .flex {width: 100%; height: 100%; justify-content: center; align-items: center;}

#b404 {padding: 48px 0 0;}

}

@media screen and (max-width: 620px) {
  
body {font-size: 17px;}
.centered {padding: 0 40px;}
.txt ul li::before {content: ''; width: 20px; height: 20px; background: url('../img/bullet.svg') no-repeat; background-size: auto; display: block; background-size: 20px 20px; position: absolute; top: 1px; left: 0px;}
.txt ul li {padding-left: 28px; margin-top: 8px;}
.txt ul li:first-child {margin-top: 0px;}
.label {font-size: 12px;}
#mpBlock1Body > div:last-child {width: 460px; padding-right: 0; margin-left: calc((100% - 460px) / 2);}
#mpBlock1BodyImg .mpBlock1BodyImgLabel {margin-top: 8px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:first-child {margin-top: 0px;}
#mpBlock1BodyImg > div:first-child {top: 50%; margin-top: -164px;}
.button {font-size: 17px;}
.txt ul {margin-top: 20px;}
.txt ul:first-child {margin-top: 0px;}
#mpBlock2 .txt p {font-size: 17px;}
.slickWrpBody {width: calc(100% + 8px); margin-left: -8px;}
.slickWrpBody .slick-slide {margin-left: 8px;}
.txt p {margin-top: 16px;}
.txt p:first-child {margin-top: 0px;}
#mpBlock2 {margin-top: -32px;}
#mpBlock3Body .flex2 > div:last-child, #mpBlock3Body .flex3 > div:last-child {font-size: 16px;}
#mpBlock3 {padding-bottom: 88px;}
#steps > div:first-child {width: 100%; margin-left: 0px;}
#steps > div:nth-child(2) {width: 100%; margin-left: 0px; margin-top: 8px;}
#steps > div:last-child {margin-top: 8px;}
#step3Btn {width: 80%; margin-left: 10%;}
#step3Btn .button:last-child {margin-left: 0px; margin-top: 8px;} 
#steps .txt img {width: 80%; margin-left: 10%;}
.marginTop-48 {margin-top: 32px;}
#customControl .input {font-size: 17px;}
#mpBlock5 .colums-2-50 > div:last-child {margin-top: 8px;}
.marginTop-100 {margin-top: 72px;}
.marginTop-40 {margin-top: 24px;}
.questionsEl .flex {padding: 16px;}
.questionsEl .flex p {font-size: 18px;}
#questions .slickWrpBody {width: calc(100% + 8px); margin-left: -8px;}
#questions .slickWrpBody .slick-slide {margin-left: 8px;}
#questions {padding: 0 8px;}
#mpBlock7 {padding-top: 284px; z-index: 1; margin-top: -200px;}
#mpBlock7 .centered {padding-top: 0px;}
.bento-2-3 > div:last-child > .flex > div:nth-child(2) {margin-top: 8px;}
.bentoGallery {width: 80%; margin-top: 24px;}
.bento-2 > div {margin-top: 8px;}
.bento-2-3 > div:last-child > .flex > div:last-child {margin-top: 8px;}
.bento-2-3 > div:last-child {padding-top: 8px;}
.selfInstallEl p {font-size: 16px;}
.bento-2-3 > div:last-child > .flex > div:last-child > .flex > div:last-child {width: 100%; margin-top: 24px;}
.bento-2-3 > div:last-child > .flex > div:last-child > .flex > div:first-child {width: 100%;}
.bento-2-3 > div:last-child > .flex > div:last-child > .flex > div:last-child a {width: 60%; margin-left: 0%;}
.paddingTop-100 {padding-top: 72px;}
#mpBlock9 .mpBlock1BodyImgLabel {width: 100%; margin-left: 0px; margin-top: 8px; float: none;}
#mpBlock9 .mpBlock1BodyImgLabel:nth-child(2n+1) {margin-left: 0px;}
#mpBlock9 .mpBlock1BodyImgLabel:nth-child(-n+2) {margin-top: 8px;}
#mpBlock9 .mpBlock1BodyImgLabel:nth-child(-n+1) {margin-top: 0px;}
#certificates > div:last-child {padding-left: 8px;}
#certificates > div:last-child > .flex > div {width: calc((100% - 8px) / 2); margin-left: 8px; margin-top: 8px;} 
#certificates > div:last-child > .flex > div:nth-child(2n+1) {margin-left: 0px;}
#certificates > div:last-child > .flex > div:nth-child(-n+2) {margin-top: 0px;}
.colums-2-50 > div:last-child {margin-top: 40px;}
.faqEl > div:first-child {padding-right: 16px; padding-left: 0px;}
.faqEl {margin-top: 8px;}
.faqEl:first-child {margin-top: 0px;}
.faqEl > div:last-child img {width: 24px; height: 24px;}
footer {padding-top: 110px;}

#panel {width: 70%; right: -70%;}
#panelBody p a, #panelBody p a:visited {font-size: 20px;}
.panel--open #panel {right: 0px;}
#mdl {width: 100%; padding: 40px;}

#stickyBasket {right: 24px; bottom: 32px; width: 48px; height: 48px; padding: 12px;}
#stickyBasket > img {display: block; width: 24px; height: 24px;}
#stickyBasket > span {position: absolute; right: -2px; top: -2px; display: inline-block; padding: 3px 5px; font-size: 11px; line-height: 1; font-weight: 600; min-width: 18px; width: auto; border-radius: 10px; transition: all 0.1s linear;}


}

@media screen and (max-width: 520px) {
  
#mpBlock1BodyImg > div:first-child {left: -24px; top: 50%; margin-top: -169px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:last-child p {font-size: 11px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:first-child {width: 36px; height: 36px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:last-child {width: calc(100% - 36px); padding: 0 8px;} 
#mpBlock1BodyImg .mpBlock1BodyImgLabel {width: 170px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:first-child, .mpBlock1BodyImgLabel:last-child {margin-left: 32px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(2), .mpBlock1BodyImgLabel:nth-last-child(2) {margin-left: 16px;}
#mpBlock1BodyImg > div:first-child {top: 50%; margin-top: -152px; left: -24px;}
#mpBlock1Body > div:last-child {width: 420px; padding-right: 0; margin-left: calc((100% - 420px) / 2);}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:first-child img {width: 28px; height: 28px;}
#topBody > div:first-child {width: calc(100% - 32px);}
#topBodyMenuBtnWrp .button {width: 32px; height: 32px;}
#topBody > div:last-child {width: 32px;}
#topBody > div:first-child img {width: 96px;}
#mpBlock2 .colums-2-50 > div:last-child {margin-top: 32px;}
#mpBlock3Body table tr td:nth-child(3) {display: none;}
#step3Btn {width: 90%; margin-left: 5%;}
#steps .txt img {width: 90%; margin-left: 5%;}
.mpBlock5El > div:last-child {display: none;}
#footerBottomBody > div:first-child {width: 96px;}
#footerBottomBody > div:first-child img {width: 96px; height: auto;}
#panelTop {height: 67px; padding: 0 24px;}
#panelBody {height: calc(100% - 67px); padding: 40px 24px;}


}


@media screen and (max-width: 480px) {

.centered {padding: 0 32px;}
#mpBlock1BodyImg > div:first-child {position: relative; order: 2; top: 0px; margin-top: 0px; left: 0px; width: 100%:}
#mpBlock1BodyImg > div:last-child {order: 1; margin-bottom: 24px; width: 100%; margin-left: 0;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:first-child, .mpBlock1BodyImgLabel:last-child {margin-left: 0px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(2), .mpBlock1BodyImgLabel:nth-last-child(2) {margin-left: 8px;}
#mpBlock1Body > div:last-child {width: 100%; padding-right: 0; margin-left: 0;}
#mpBlock1BodyImg > div:first-child > div {width: 100%;}
#mpBlock1BodyImg > div:first-child > div:after {content: ''; display: table; clear: both;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel {float: left; width: calc((100% - 8px) / 2); margin-left: 8px; margin-top: 8px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(2n+1) {margin-left: 0px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(-n+2) {margin-top: 0px;}
.label {font-size: 11px; padding: 6px 10px 5px;}
#mpBlock3Body .flex2 > div:last-child, #mpBlock3Body .flex3 > div:last-child {font-size: 15px;}
#mpBlock3 {padding-bottom: 72px;}
#mpBlock3Body table tr td {padding: 8px; font-size: 14px;}
.marginTop-100 {margin-top: 64px;}
.marginTop-56 {margin-top: 32px;}
.bentoGallery {width: 90%; margin-top: 24px;}
.selfInstallEl img {width: 90%; margin-left: 5%;}
.bento-2-3 > div:last-child > .flex > div:last-child > .flex > div:last-child a {width: 70%; margin-left: 0%;}
.paddingTop-100 {padding-top: 64px;}
.mpBlock1BodyImgLabel > div:last-child p {font-size: 12px;}
#footerTopBody > .txt p {font-size: 18px;}
#footerBottomBody > div:first-child {width: 100%;}
#footerBottomBody > div:nth-child(2) {padding: 0 0 0 0; margin-top: 20px;}
#footerBottomBody > div:last-child {margin-top: 24px;}

#panel {width: 80%; right: -80%;}
#panelBody p a, #panelBody p a:visited {font-size: 20px;}
.panel--open #panel {right: 0px;}
#mdl {width: 100%; padding: 32px;}
#mpBlock1BodyImg-block1 .flex img {margin-top: -32px;}


}

@media screen and (max-width: 460px) {
  
#mpBlock1BodyImg-block2 {width: 160px;}
#mpBlock1BodyImg-block3 {width: 80px; bottom: 120px; right: -16px;}
#mpBlock1BodyImg-block3::before {
  width: 27px;
  height: 64px;
  background: url('../img/pointer.svg') no-repeat;
  background-size: 27px 64px;
  right: 56px;
  bottom: -56px;
}
#mpBlock1 {padding: 40px 0 88px;}
#step3Btn {width: 100%; margin-left: 0%;}
#steps .txt img {width: 100%; margin-left: 0%;}
#step3Btn .button {padding: 12px 20px;}
#mpBlock10 .button {width: 60%; margin-left: 20%; justify-content: center;}
#mpBlock10 .button:last-child {margin-top: 8px;}

#b404 {padding: 40px 0 0;}

}

@media screen and (max-width: 420px) {

body {font-size: 16px;}
.centered {padding: 0 24px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:last-child p {font-size: 10px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:first-child {width: 32px; height: 32px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:last-child {width: calc(100% - 32px); padding: 0 6px;} 
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:first-child img {width: 24px; height: 24px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel {float: left; width: calc((100% - 4px) / 2); margin-left: 4px; margin-top: 4px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(2n+1) {margin-left: 0px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(-n+2) {margin-top: 0px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(2), .mpBlock1BodyImgLabel:nth-last-child(2) {margin-left: 4px;}
#mpBlock1Body > div:first-child {margin-top: 40px;}
.txt ul li::before {content: ''; width: 18px; height: 18px; background: url('../img/bullet.svg') no-repeat; background-size: auto; display: block; background-size: 18px 18px; position: absolute; top: 2px; left: 0px;}
.txt ul li {padding-left: 26px; margin-top: 8px;}
.txt ul li:first-child {margin-top: 0px;}
.txt h1 {margin-bottom: 28px;}
.txt h1:last-child {margin-bottom: 0px;}
#mpBlock3 {padding-bottom: 64px;}
.txt h2 {font-size: 24px; margin-bottom: 24px;}
.txt h2:last-child {margin-bottom: 0px;}
#customPrice {font-size: 24px; margin-top: 20px;}
.button, #customControl .input {font-size: 16px;}
.marginTop-100 {margin-top: 56px;}
.paddingTop-100 {padding-top: 56px;}
.questionsEl .flex p {font-size: 17px;}
.marginTop-48 {margin-top: 24px;}
.bentoGallery {width: 100%; margin-top: 24px;}
.selfInstallEl img {width: 100%; margin-left: 0%;}
.bento-2-3 > div:last-child > .flex > div:last-child > .flex > div:last-child a {width: 80%; margin-left: 0%;}
#selfInstallNav {margin-top: 24px;}
#footerTopBody > .txt p {font-size: 17px;}

#stickyBasket {right: 20px; bottom: 32px; width: 48px; height: 48px; padding: 12px;}


}

@media screen and (max-width: 380px) {
  
#mpBlock1BodyImg-block2 {width: 150px;}
#mpBlock1BodyImg-block3 {width: 64px; bottom: 100px; right: -16px;}
#mpBlock1BodyImg-block3::before {
  width: 23px;
  height: 56px;
  background: url('../img/pointer.svg') no-repeat;
  background-size: 23px 56px;
  right: 44px;
  bottom: -44px;
}
#customBody > div:first-child {
  width: 100%;
  height: 140px;
  padding-right: 0px;
  position: relative;
}
#customBody > div:nth-child(2) {width: calc((100% - 8px) / 2); margin-top: 8px;}
#customBody > div:last-child {width: calc((100% - 8px) / 2); margin-top: 8px;}
#customControl .input {width: 100%;}
#customControl .button {width: 100%; margin-left: 0px; margin-top: 8px; justify-content: center;}
#step3Btn .button {padding: 12px 16px;}
.txt h2 {font-size: 22px;}
#customPrice {font-size: 22px; margin-top: 20px;}
#selfInstallNav > div:first-child {width: 100%; margin-right: 0px; justify-content: center;}
#selfInstallNav > div:last-child {display: none;}
.mpBlock1BodyImgLabel > div:last-child p {font-size: 11px;}
#mpBlock10 .button {width: 70%; margin-left: 15%;}

#panel {width: 90%; right: -90%;}
#panelBody p a, #panelBody p a:visited {font-size: 20px;}
.panel--open #panel {right: 0px;}
#mdl {width: 100%; padding: 24px;}
.faqEl > div:last-child {display: none;}
.faqEl > div:first-child {padding-right: 0px;}

}

@media screen and (max-width: 360px) {
  
#mpBlock1BodyImg .mpBlock1BodyImgLabel {float: left; width: 100%; margin-left: 0px; margin-top: 4px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(2n+1) {margin-left: 0px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(-n+2) {margin-top: 4px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(-n+1) {margin-top: 0px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel:nth-child(2), .mpBlock1BodyImgLabel:nth-last-child(2) {margin-left: 0px;}
#mpBlock1BodyImg .mpBlock1BodyImgLabel > div:last-child p {font-size: 11px;}
#mpBlock1BodyImg-block2 {width: 130px;}
#mpBlock1BodyImg-block3 {width: 56px; bottom: 88px; right: -8px;}
#mpBlock1BodyImg-block3::before {
  width: 20px;
  height: 48px;
  background: url('../img/pointer.svg') no-repeat;
  background-size: 20px 48px;
  right: 36px;
  bottom: -36px;
}
#footerTopBody > .txt p {font-size: 16px;}


}