body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #2F3C60;
}

h1 {
    font-size: 64px;
    font-weight: 500;
}

h2 {
    font-size: 32px;
    font-weight: 500;
}

h3 {
    font-size: 48px;
    font-weight: 500;
}

p {
    color: #70798F;
    line-height: 32px;
    margin: 0;
}

a {
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: #5E8FFF;
}

b {
    font-weight: 500;
}

.desktop-hidden {
    display:none;
}

#section-main {
    height: 750px;
    background: radial-gradient(123.68% 39.89% at 50% 100%, rgba(94, 143, 255, 0.2) 0%, rgba(94, 143, 255, 0) 100%);
}

#section-main .background-image {
    position: absolute;
    right:90px;
    top: 0;
    z-index: -1;
    opacity: 0.2;
}

#section-main .logo-container {
    position: absolute;
    top:10px;
    left:20px;
    z-index: 1;
}

#section-main .c-section-content {
    position: relative;
    flex-direction: row-reverse;
    margin-top:30px;
}

#section-main .c-section-content .section-text-container {
    margin-top: 50px;
    max-width: 470px;
}

#section-main .c-section-content .buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
}

#section-main .c-section-content .stores-info-container {
    margin-top: 125px;
}

#section-main .c-section-content .stores-info-container p {
    font-size: 14px;
    color: #2F3C60;
    font-weight: 500;
    margin-bottom: 10px;
}

#section-main .laptop-container img {
    margin-left: -90px;
    object-fit: cover;
    width: 703px;
    height: 570px;
    object-position: 0% 0%;
}

#section-main-legal {
    height: auto;
    background: radial-gradient(123.68% 39.89% at 50% 100%, rgba(94, 143, 255, 0.2) 0%, rgba(94, 143, 255, 0) 100%);
}

#section-main-legal .c-section-content .section-text-container {
    max-width: none;
    margin-top: 50px;
}

#section-main-legal .background-image {
    position: absolute;
    right:90px;
    top: 0;
    z-index: -1;
    opacity: 0.2;
}

#section-main-legal .logo-container {
    position: absolute;
    top:20px;
    left:20px;
    z-index: 1;
}

#section-main-legal .c-section-content {
    position: relative;
    flex-direction: row-reverse;
    margin-top:30px;
}

#section-family-playing {
}

#section-family-playing .c-section-content {
    position: relative;
    flex-direction: row;
}

#section-family-playing .people-playing-container {
    margin-left: -300px;
    margin-right: 60px;
}

#section-family-playing .section-text-container {
    max-width: 420px;
}

#section-setup-game {}

#section-setup-game .c-section-content {
    position: relative;
    flex-direction: row;
}

#section-setup-game .section-text-container {
    width: 391px;
    margin-right: 160px;
}

#section-coachmarks {}

#section-coachmarks .c-section-content {
    position: relative;
    flex-direction: row-reverse;
}

#section-coachmarks .section-text-container {
    width: 468px;
    margin-left: 100px;
}

#section-features .c-section-content {
    display:flex;
    flex-direction: row;
    justify-content: center;
}

#section-design {

}

#section-design .blue-box {
    display:grid;
    justify-content: center;
    align-items: start;
    position: relative;
    width: 1064px;
    height: 464px;
    background: #5E8FFF;
    border-radius: 16px;
    overflow: hidden;
}

#section-design .blue-box .box-text {
    font-family: 'Roboto', sans-serif;
    width:530px;
    margin-top: 50px;
    font-weight: 300;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
}

#section-design .blue-box .suit-icon-bg {
    position: absolute;
}

#section-design .device-image {
    position: absolute;
}

#section-story {
    background: linear-gradient(180deg, rgba(2,0,36,0.1) -150%, rgba(229,232,240,0) 100%);
}

#section-story .c-section-content {
    flex-direction: column;
}

#section-story .c-section-content h3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

#section-story .section-text-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

#section-story .section-text-container .story-text {
    width: 480px;
    margin: 0 50px;
}

#section-story .section-text-container .story-text.story-summary {
    position: relative;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}

#section-story .section-text-container .story-text.story-content {
    font-weight: 300;
    font-size: 20px;
    line-height: 32px;
    color: #70798F;
    margin-top: 190px;
}

#section-story .section-text-container .story-text.story-content p {
    margin-bottom: 30px;
}

#section-quote .c-section-content {
    padding: 180px 0;
}

#section-price .c-wrapper {
    max-width: 1100px;
}

#section-price .c-section-content {
    overflow: visible;
    padding-top: 0;
    padding-bottom: 100px;
    flex-direction: column;
}

#section-price .c-section-content .text-container {
    width: 100%;
    text-align: left;
}

#section-price .c-section-content h3 {
    margin-bottom: 20px;
}

#section-price .c-section-content p {
    margin-bottom: 60px;
    font-size: 20px;
}

#section-price .c-section-content .prices-container {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

#section-price .price-plan-wrapper {
    position:relative;
}

#section-price .price-plan-wrapper .recommended-price-plan-bg {
    position: absolute;
    left: 29px;
    top: -90px;
    z-index: -2;
}

#section-price .price-plan-wrapper .recommended-price-plan-tab {
    position: absolute;
    width: 328px;
    height: 51px;
    left: 0;
    top: -35px;
    background: #AFC8FF;
    border-radius: 8px 8px 0 0;
    z-index: -1;
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: start;
    padding-top:5px;
    box-sizing: border-box;
}

#section-nursing-home {
}

#section-nursing-home .c-wrapper {
    max-width: 1100px;
}

#section-nursing-home .c-section-content {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 60px;
}

#section-nursing-home .people-playing-container {
}

#section-nursing-home .section-text-container {
    max-width: 504px;
}

#section-lets-play {
    background-color: #5E8FFF;
    overflow: visible;
    position: relative;
}

#section-lets-play .c-wrapper {
    max-width: 1100px;
}

#section-lets-play .c-section-content {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
}

#section-lets-play .section-image-container {
    margin-top: -75px;
    z-index: 1;
}

#section-lets-play .section-text-container {
    z-index: 1;
}

#section-lets-play .section-text-container h3 {
    font-size: 64px;
    color: #FFFFFF;
    line-height: 73px;
    font-weight: 500;
    margin-top:0;
}

#section-lets-play .c-section-content .stores-info-container {
    margin-top: 45px;
}

#section-lets-play .c-section-content .stores-info-container p {
    font-size: 14px;
    color: #2F3C60;
    font-weight: 500;
}

#section-lets-play .suits-blurred-bg {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 0;
    overflow: hidden;
    max-width: 1366px;
    margin:auto;
}

#section-lets-play .suits-blurred-bg .suit-icon-bg {
    position: absolute;
    filter: blur(12px);
}

footer {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #27345A;
    padding:4px 20px;
    color: #FFFFFF;
}

footer .copyright-container,
footer .logo-container {
    width: 260px;
}

footer .logo-container {
    position: relative;
    font-size: 22px;
    font-weight: 400;
}

footer .logo-container .logo-compact {
    position: absolute;
    top: 5px;
    left: 43px;
}

footer .copyright-container {
    text-align: right;
    font-size: 16px;
}

footer .links-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

footer a {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 300;
    font-size: 16px;
    line-height: 32px;
    margin:0 22px;
}

#lottie svg {
    height: auto!important;
}