/*1024-1230*/ @media screen and (max-width: 1229px) { .container { width: 95%; } } @media screen and (max-width: 1130px) { #cardBlueSquare1 { top: -282px; left: -319px; } .actionCard { bottom: -606px; margin-top: -535px; .container { flex-direction: column; .card { margin: 12px 0; text-align: left; .actionBtn { text-align: left; } padding-left: 50px; padding-right: 70px; .subscription { text-align: left; } width: 100%; .cardTableFlex { display: flex; align-items: center; justify-content: space-between; .subscriptionCostDescription { } } } } } footer .container { padding-top: 600px; .coming { text-align: center; margin-top: 100px; } .footerActions { flex-direction: column; align-items: center; .timerBlock { margin-top: 8px; margin-bottom: 62px; } } } } /*1024*/ @media screen and (max-width: 1023px) { main .container { overflow-x: hidden; .info h1 { font-size: 40px; max-width: 450px; } } .canvasImg, .scheduleFont { width: 133px; } .canvasImg img, .scheduleFont img { width: 100%; } main .mainStatistic { width: 133px; height: 400px; .mainStatisticPercent { background-size: cover; font-size: 22px; margin-bottom: 20px; } ul { padding-left: 12px; .squareLi1, .squareLi3, .squareLi5 { width: 80px; } .squareLi2, .squareLi4 { width: 56px; } } } } /*767*/ @media screen and (max-width: 767px) { .container{ width: 90% ; } header .container .logo { text-align: center; } main .container { justify-content: center; flex-wrap: wrap; .info { order: 3; text-align: center; } } .actionCard { margin-top: -650px; bottom: -800px; .container .card { .subscription { text-align: center; } text-align: center; .cardTableFlex { flex-direction: column; justify-content: center; } } } footer .container { padding-top: 800px; .footerActions .timerBlock { width: 300px; .timeBlock { width: 60px; padding: 10px; .digit { font-size: 28px; } } } } #downSquare1{ top: -332px; left: calc(50% - 1018px); } #cardBlueSquare1{ left: calc(50% - 440px); top: -379px; } #upSquare1{ right: calc(50% - 333px); } }