.secMBSI_DSMPremium { width: 100%; display: flex; flex-direction: column; grid-gap: 100px; padding: 50px 0; } @media (max-width: 576px) { .secMBSI_DSMPremium { padding: 0; grid-gap: 50px; } } .secMBSI_DSMPremiumHero { padding: 75px 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 25px; background: white; text-align: center; border-radius: 5px; box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); } @media (max-width: 576px) { .secMBSI_DSMPremiumHero { padding: 25px 0px; } } .secMBSI_DSMPremiumHero > :nth-child(1) { width: 100%; max-width: 150px; } .secMBSI_DSMPremiumHero > :nth-child(2) { font-size: 50px; font-weight: 900; } @media (max-width: 576px) { .secMBSI_DSMPremiumHero > :nth-child(2) { font-size: 35px; } } .secMBSI_DSMPremiumHero > :nth-child(3) { font-size: 24px; font-weight: 500; max-width: 700px; opacity: 0.75; } @media (max-width: 576px) { .secMBSI_DSMPremiumHero > :nth-child(3) { font-size: 18px; } } .secMBSI_DSMPremiumSec { width: 100%; display: flex; flex-direction: column; grid-gap: 50px; } .secMBSI_DSMPremiumSecTop { text-align: center; text-transform: uppercase; } .secMBSI_DSMPremiumSecTop > :nth-child(1) { font-weight: 600; color: rgba(0,0,0,0.65); font-size: 38px; } .secMBSI_DSMPremiumSecMid { display: flex; flex-direction: column; grid-gap: 50px; } @media (max-width: 576px) { .secMBSI_DSMPremiumSecMid { grid-gap: 25px; } } .secMBSI_DSMPremiumSecMidCards { width: 100%; display: flex; flex-direction: row; grid-gap: 25px; justify-content: center; flex-wrap: wrap; } .secMBSI_DSMPremiumSecMidBoxes { width: 100%; display: flex; flex-direction: row; grid-gap: 25px; justify-content: center; flex-wrap: wrap; text-align: center; } .secMBSI_DSMPremiumSecMidBoxesBox { transition: ease 0.3s; flex-grow: 1; background: white; padding: 25px; display: flex; flex-direction: column; grid-gap: 25px; border-radius: 5px; align-items: center; box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); } .secMBSI_DSMPremiumSecMidBoxesBox:hover { transition: ease 0.3s; background: #4c82a3; color: white; transform: scale(1.02); box-shadow: 0 0 8px 0 rgba(0,0,0,0); } .secMBSI_DSMPremiumSecMidBoxesBox > :nth-child(1) { font-size: 24px; font-weight: 600; flex-grow: 1; } .secMBSI_DSMPremiumSecMidBoxesBox > * { max-width: 350px; } .secMBSI_DSMPremiumSecMidBoxesBox > :nth-child(2) { font-size: 16px; opacity: 0.75; } .secMBSI_DSMPremiumSecMidSubscribe { display: flex; flex-direction: column; grid-gap: 25px; justify-content: center; align-items: center; } .secMBSI_DSMPremiumSecMidSubscribeBox { width: 100%; max-width: 1000px; padding: 25px; background: white; border-radius: 5px; display: flex; flex-direction: row; grid-gap: 50px; } @media (max-width: 768px) { .secMBSI_DSMPremiumSecMidSubscribeBox { flex-direction: column; grid-gap: 25px; } } .secMBSI_DSMPremiumSecMidSubscribeBoxSec { display: flex; flex-direction: column; grid-gap: 15px; width: 100%; font-size: 16px; } .secMBSI_DSMPremiumSecMidSubscribeBoxSecAlt { display: flex; flex-direction: row; grid-gap: 15px; width: 100%; font-size: 16px; justify-content: space-between; } .secMBSI_DSMPremiumSecMidCardsInside { transition: ease 0.4s; width: 100%; border-radius: 5px; display: flex; flex-direction: row; grid-gap: 0px; justify-content: center; flex-wrap: wrap; } .secMBSI_DSMPremiumSecMidCardsInside:hover { transition: ease 0.4s; grid-gap: 25px; } @media (max-width: 1281px) { .secMBSI_DSMPremiumSecMidCardsInside { grid-gap: 25px; } } .secMBSI_DSMPremiumSecMidCardsInside > :first-child { border-radius: 5px 0 0 5px; } .secMBSI_DSMPremiumSecMidCardsInside > :last-child { border-radius: 0 5px 5px 0; } @media (max-width: 1281px) { .secMBSI_DSMPremiumSecMidCardsInside > *, .secMBSI_DSMPremiumSecMidCardsInside > :first-child, .secMBSI_DSMPremiumSecMidCardsInside > :last-child { border-radius: 5px; } } .secMBSI_DSMPremiumSecMidCardsCard { transition: ease 0.3s; width: 100%; min-width: 400px; max-width: 400px; background: white; display: flex; flex-direction: column; grid-gap: 25px; padding: 25px; cursor: default; justify-content: end; } @media (max-width: 768px) { .secMBSI_DSMPremiumSecMidCardsCard { max-width: unset; min-width: unset; } } .secMBSI_DSMPremiumSecMidCardsCard:hover { transition: ease 0.3s; box-shadow: 0 0 8px 0 rgb(0,0,0,0.15); z-index: 10; transform: scale(1.02); border-radius: 5px; } .secMBSI_DSMPremiumSecMidCardsCardTop { width: 100%; display: flex; flex-direction: column; grid-gap: 10px; text-align: center; } .secMBSI_DSMPremiumSecMidCardsCardTop > p { font-size: 16px; font-weight: 600; color: rgba(0,0,0,0.5); display: flex; flex-direction: row; justify-content: center; align-items: center; grid-gap: 10px; } .secMBSI_DSMPremiumSecMidCardsCardTop > h1, .secMBSI_DSMPremiumSecMidCardsCardTop > h2, .secMBSI_DSMPremiumSecMidCardsCardTop > h3, .secMBSI_DSMPremiumSecMidCardsCardTop > h4, .secMBSI_DSMPremiumSecMidCardsCardTop > h5, .secMBSI_DSMPremiumSecMidCardsCardTop > h6 { font-size: 48px; font-weight: 600; color: rgb(67,67,67); display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; grid-gap: 15px; } @media (max-width: 768px) { .secMBSI_DSMPremiumSecMidCardsCardTop > h1, h2, h3, h4, h5, h6 { flex-direction: column; grid-gap: 5px; } } .secMBSI_DSMPremiumSecMidCardsCardMid { width: 100%; display: flex; flex-direction: column; grid-gap: 10px; /*flex-grow: 1;*/ } .secMBSI_DSMPremiumSecMidCardsCardMid > :last-child { border-bottom: solid 1px rgba(0,0,0,0); } .secMBSI_DSMPremiumSecMidCardsCardMid > * { transition: ease 0.3s; border-bottom: solid 1px rgba(0,0,0,0.1); padding: 10px 0; color: rgba(0,0,0,0.75); text-align: center; } .secMBSI_DSMPremiumSecMidCardsCardMid > *:hover { transition: ease 0.3s; border-radius: 5px; background: rgba(255,255,255,0.05); border-radius: 5px; border-bottom: solid 1px rgba(0,0,0,0); } .secMBSI_DSMPremiumSecMidCardsInside > :first-child > .secMBSI_DSMPremiumSecMidCardsCardMid > *:hover, .secMBSI_DSMPremiumSecMidCardsInside > :last-child > .secMBSI_DSMPremiumSecMidCardsCardMid > *:hover { transition: ease 0.3s; border-radius: 5px; background: rgba(0,0,0,0.05); border-radius: 5px; border-bottom: solid 1px rgba(0,0,0,0); } .secMBSI_DSMPremiumSecMidCardsCardBot { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .secMBSI_DSMPremiumSecMidCardsCardNote { font-size: 14px; color: rgba(0,0,0,0.5); } .secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime { background: #4c82a3; } .secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * { color: white; } .secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > * { color: white; } .secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCard > * > * > :first-child { text-decoration: line-through; } .secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > * > :first-child { text-decoration: line-through; } .secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCard > * > * > * { color: rgba(0,0,0,0.5); font-size: 16px; } .secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > * > * { color: rgba(255,255,255,0.5); } .secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > a { background: #447592; } .secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > a:hover { background: #5e8eab; } .secMBSI_DSMPremiumSecMidCardsCardHead { display: flex; flex-direction: row; justify-content: center; align-items: center; grid-gap: 10px; } .secMBSI_DSMPremiumSecMidCardsCardHead > * { margin: 0; } .secMBSI_DSMPremiumSecMidNote { text-align: center; color: rgba(0,0,0,0.25); font-size: 16px; } .secMBSI_DSMPremiumSecMidCardWrapper { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .secMBSI_DSMPremiumSecMidCard { transition: ease 0.3s; width: 100%; padding: 25px; background: #ffffff; display: flex; flex-direction: column; grid-gap: 15px; cursor: default; justify-content: end; border-radius: 5px; border: solid 3px rgb(76,130,163); text-align: center; } .secMBSI_DSMPremiumSecMidCard:hover { transition: ease 0.3s; transform: scale(1.01); } .secMBSI_DSMPremiumSecMidCardMid { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; font-size: 16px; /*padding: 10px 0;*/ /*border-top: solid 1px rgba(0,0,0,0.1);*/ /*border-bottom: solid 1px rgba(0,0,0,0.1);*/ } .secMBSI_DSMPremiumSecMidCardBot { display: flex; flex-direction: row; grid-gap: 15px; width: 100%; justify-content: center; align-items: center; } .secMBSI_DSMPremiumSecMidCardBot > * { flex-grow: 1; max-width: 200px; } .secMBSI_DSMPremiumSecMidCardTopText { font-size: 32px; color: unset; text-align: center; font-weight: 600; } .secMBSI_DSMPremiumSecMidSubscribeBoxSecQR { width: 100%; max-width: 200px; } .secMBSI_DSMPremiumSecMidSubscribeBoxSecQRWrapper { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border: solid 1px rgba(0,0,0,0.1); padding: 15px; border-radius: 5px; } .secMBSI_DSMPremiumSecMidSubscribeBoxSecPackages { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper { transition: ease 0.3s; position: relative; flex-grow: 1; padding: 15px; border: solid 2px rgba(76,130,163,0.1); border-radius: 5px; background: rgba(76,130,163,0.1); display: flex; flex-direction: column; grid-gap: 5px; } .secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper:hover { transition: ease 0.3s; border: solid 2px rgba(76,130,163,0.2); background: rgba(76,130,163,0.2); } .secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper > :nth-child(2) { font-size: 24px; color: #434343; opacity: 0.5; } .secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper > :nth-child(3) { font-size: 14px; color: rgba(0,0,0,0.5); opacity: 0.5; } .secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive { transition: ease 0.3s; position: relative; flex-grow: 1; padding: 15px; border: solid 2px rgb(76,130,163); border-radius: 5px; background: rgba(76,130,163,0.25); } .secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive > :nth-child(2), .secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive > :nth-child(3) { transition: ease 0.3s; opacity: 1; } .secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckbox { position: absolute; top: 0; bottom: 0; right: 0; left: 0; height: 100%; width: 100%; opacity: 0; cursor: pointer; z-index: 1; } .inputMainWrapper { display: flex; flex-direction: column; grid-gap: 5px; }