@font-face {
    font-family: Kiddosy;
    src: url("fonts/Kiddosy-Regular.otf") format("opentype");
}

body {background: #9a24db; background-image: url("images/bg-gradient.png"); background-size: contain; background-repeat: no-repeat; background-position: center top; color: #fff; padding : 0; margin : 0; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Roboto, Arial, sans-serif; font-weight:600;}

h1 { font-size:60px; margin:0; font-family: "Kiddosy", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; font-weight: 600; font-stretch: condensed;}
h2 { font-size:50px; color: #fff; margin:0; font-weight:normal; font-family: "Kiddosy", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;}
h3 { font-size : 40px; margin : 10px 0; line-height : 130%; font-weight:300; font-family: "Kiddosy", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;}
h4 {font-size:35px; line-height: 110%; margin:10px 0; opacity:1; font-family: "Kiddosy", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; font-weight: normal;}

p {font-size:18px; font-weight: normal; line-height: 125%;}
.highlight {background:rgba(0,0,0,0.15); padding:3px 6px; border-radius:3px;}
h3 .highlight {padding:5px 10px; border-radius: 5px;}

hr {border: 0; height: 1px; margin:20px 0; background: rgba(0,0,0,0.1);}

header {padding: 20px 20px 50px 20px; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0));}
header .container {padding:0; margin:0 auto;}
header h1 {font-size: 30px; color: #fff;}
header h1 img {width: 50px; height: auto; margin-right: 15px;}
header a {opacity: 1; color: #fff;}
header a:hover {color: #fff; opacity: 0.9; text-decoration: none;}
header .buttondownload img {width: 150px; height: auto;}

ul {/*list-style:none; */margin-top:30px; margin-bottom:30px; font-size:18px; text-align: left;}
ul li {color:#fff;/* padding:0; margin:10px 0; width:45%;*/ font-weight: normal; line-height: 125%;}

.u-bg-orange h1 {color:#fff;}
.u-bg-orange h2 {color:#000; opacity:0.5;}
.u-bg-orange h3 {color:#fff; opacity:1;}
.u-bg-orange h4 {color:#fff;}

.sectiontext {text-align: center; margin-bottom:30px;}

.avail { font-size : 20px; color: rgba(255, 255, 255, 0.6); }

.container { clear: both; width:95%; max-width: 1150px; min-width: 320px; margin: 0 auto; }
.containerwide { clear: both; width: 100%; margin: 0 auto; padding: 0 20px;}

.intro h3 {text-align: center; max-width: 700px; margin: auto;}
.intro ul {list-style:square; margin:20px 30px; padding: 0 25px; color:#fff;}
.intro ul li {padding-left: 25px; list-style:square;}
.intro p {font-size:20px; font-weight: normal; color:rgba(255,255,255,0.8); margin-top: 30px;}
.intro a { text-decoration: underline; color: #fff }

.mainshot .mainscreenshot {max-width:350px; height:auto; margin-top:-100px; margin-bottom:-100px;}
.mainshot p {opacity: 0.8; font-size: 20px; margin-top: 20px;}
.mainshot .buttondownload img {width: 150px; height: auto;}

.longtext h3 {opacity: 1; font-size: 25px; margin-top: 40px; font-weight: normal; font-family: "Kiddosy", Helvetica, Arial, sans-serif;}
.longtext p {margin-top: 20px;}
.longtext p, .longtext li {opacity: 0.7;}

.u-bg-orange ul li {color:#fff;}

.blobs {width: 100%; display: flex;}
.blobs .blob {width: 25%; position: relative; text-align: center;}
.blobs svg {opacity: 0.1; position: relative;}
.blobs img {position: absolute; width: 100%; height: auto; top: 0; left: 0; }
.blobs h6 {font-family: "Kiddosy", Helvetica, Arial, sans-serif; margin-top: -30px; font-size: 20px;}

@keyframes falling {
  0%    { transform: translate(var(--x),calc(var(--y) + 0px)) rotate3d(1,1,1,0deg); }
  16.6% { transform: translate(var(--x),calc(var(--y) + 133px)) rotate3d(1,1,1,180deg); }
  33.3% { transform: translate(var(--x),calc(var(--y) + 266px)) rotate3d(1,1,1,360deg); }
  50.0% { transform: translate(var(--x),calc(var(--y) + 400px)) rotate3d(1,1,1,540deg); }
  66.6% { transform: translate(var(--x),calc(var(--y) + 533px)) rotate3d(1,1,1,720deg); }
  83.3% { transform: translate(var(--x),calc(var(--y) + 666px)) rotate3d(1,1,1,900deg); }
  100%  { transform: translate(var(--x),calc(var(--y) + 800px)) rotate3d(1,1,1,1080deg) ; }
}

.family {background: rgba(0,0,0,0.1); height:500px; width:100%; float:left; position:relative; text-align:center;}
.confetto {animation: falling var(--duration, 4s) linear infinite; animation-delay: var(--delay); animation-fill-mode: forwards; transform-origin: 50% 50%; transform-box: fill-box;}
.confetti {position: relative; text-align: center; max-width: 1500px; margin: auto;} 
.confetti svg {margin: auto; text-align: center;}
.confettioverlay {position: absolute; width: 100%; height: auto; top: 0; left: 0; text-align: center; padding: 100px 0; }
.confettioverlay h2, .confettioverlay h4 {max-width:700px; margin-left:auto; margin-right: auto;}
.confettioverlay h4 {font-family: -apple-system, BlinkMacSystemFont, Helvetica, Roboto, Arial, sans-serif; opacity: 0.8; font-size: 30px;}
.confettioverlay img { width : 200px; margin-top:30px;}
.family a {color: #fff; opacity: 1; text-decoration: underline;}
.family a:hover {color: #fff; opacity: 0.8;}

.features {list-style: none; display: flex; margin-top: 50px; flex-wrap: wrap; gap: 20px;}
.features li {background: rgba(255,255,255,0.2); padding: 20px; border-radius: 10px; flex-basis: 21%; flex: 1;}
.features li img {width: 100%; margin-bottom: 20px;}

.u-move-up {margin-top:-100px;}
.u-move-upmore {margin-top:-150px;}
.u-fullwidth {width:100%; height:auto;}
.u-shadow {-webkit-filter: drop-shadow(0 20px 20px rgba(0,0,0,0.5)); filter: drop-shadow(0 20px 20px rgba(0,0,0,0.5));}
.u-colcenter {text-align: center;}
.u-colright {text-align: right;}
.u-bg-white {background:#fff; color:#333;}
.u-bg-orange {background:#ff704c; color:#333;}
.u-bg-grey {background:#eee; color:#333; text-align:center;}
.u-bottomborder {border-bottom: 1px solid rgba(255,255,255,0.2);}
.u-vertpadding-30 .container {padding:30px 0;}
.u-vertpadding-50 .container {padding:50px 0;}
.u-vertpadding-80 .container {padding:80px 0;}
.u-vertpadding-150 .container {padding:150px 0;}

/*.buttondownload {width:100%; margin:50px auto;}*/
/*.buttondownload img {margin:auto; margin:30px 0; max-width:250px; -webkit-filter: drop-shadow(0 20px 20px rgba(0,0,0,0.5)); filter: drop-shadow(0 20px 20px rgba(0,0,0,0.5));}*/
/*.buttondownload:hover img {opacity:0.9; -webkit-filter: drop-shadow(0 10px 10px rgba(0,0,0,0.7)); filter: drop-shadow(0 10px 10px rgba(0,0,0,0.7));}*/

.clearfix { clear: both; }

.info-container { display: table; }

.info { font-size : 28px; line-height : 130%; }
.info span { font-size : 20px; color: rgba(255, 255, 255, 0.7); }

ul { margin : 0; }
li { margin-top : 0px; margin-bottom: 0px; line-height : 130%; }

.finaldownload { margin : 50px auto 0px auto; text-align: center; }
.finaldownload img { width : 200px; }
.finaldownload .buttondownload {margin-top:10px;}

.apple-tv {background:rgba(0,0,0,0.1); display:inline-block; border-radius: 5px; padding:10px 20px; margin : 50px auto; text-align: center; color: rgba(0, 0, 0, 0.75); font-size:20px;}
.apple-tv img { width : 50px; height : 50px; vertical-align: middle; margin-right : 10px; }
.apple-tv strong {  color: rgba(0, 0, 0, 1); font-weight:bold;}

.android { text-align : center; margin : 10px 0 0 0; }

.download { margin : 20px auto 100px auto; text-align: center; }
.download img { width : 200px; }

a { color : rgba(255, 255, 255, 0.8); }

footer { text-align : center; margin: 50px auto 0 auto; padding-top : 20px; font-size : 13px; font-weight : 100; }
footer .container {padding:30px 0; /*border-top : 1px solid rgba(255, 255, 255, 0.3);*/}
footer a {color:#fff; text-decoration: underline;}
footer a:hover {color:#fff; opacity:0.8;}
footer ul {list-style: none; margin:20px 0; padding:0; font-size:18px; opacity:0.8; text-align:center;}
footer ul li {margin:0; padding:0 20px; display:inline-block; border-left:1px solid rgba(0,0,0,0.1); width:initial;}
footer ul li:first-of-type {padding-left:0; border-left:0;}
footer p {font-size:14px; opacity:0.5;}

.upsell { text-align : center; background: rgba(0, 0, 0, 0.2); border-radius: 8px; margin: 40px auto; padding: 20px 10px; font-family : "Kiddosy", Helvetica, Arial, sans-serif; font-size : 16px; font-weight : 100; }
.upsell a { font-weight: bold; color: #fff; }

#privacy { text-align: left; font-weight: normal; font-size : 16px; line-height : 26px; margin-top : 40px; }
#privacy h3 { font-size : 22px; margin : 20px 0; padding-top : 20px; border-top : 1px solid rgba(255, 255, 255, 0.2); }

#google_translate_element { margin-top : 30px; }

@media (max-width:768px) {

    h3 {font-size:24px; text-align: center;}
    h4 {font-size:24px; text-align: center;}
    p {font-size:18px;}
    ul {font-size:18px; margin:20px 0;}

    header h1 {font-size: 20px;}
    header h1 img {width: 35px; margin-right: 8px;}
    header .buttondownload img {width: 120px;}

    .container {width:85%;}

    .intro p {font-size:16px; margin-top: 20px;}
    .intro h3 {font-size:30px;}

    .longtext h3 {text-align: left;}

    .mainshot .u-colright {text-align: center;}
    .mainshot .mainscreenshot {margin-bottom:0;}
    .mainshot h4 {margin-left: 30px; margin-right: 30px;}
    .mainshot p {margin-left: 30px; margin-right: 30px; text-align: center;}
    .mainshot .buttondownload {padding-bottom: 30px; display: block;}

    .u-vertpadding-30 .container {padding:30px 0;}
    .u-vertpadding-50 .container {padding:50px 0;}
    .u-vertpadding-150 .container {padding:50px 0;}

    .u-fullwidth {width:80%; margin-bottom:40px; margin-left:auto; margin-right:auto;}

    .u-move-up {margin-top:30px;}
    .u-move-upmore {margin-top:30px;}

    .buttondownload {max-width:50%; text-align: center; margin-left:auto; margin-right:auto;}

    .shotandtext p {text-align: center;}

    .apple-tv { padding:10px 10px; margin : 30px auto; font-size:18px;}
    .apple-tv img { width : 30px; height : 30px;}

    div.confetti { overflow-x: hidden; }
    .confettioverlay {padding: 80px 0; }
    .confettioverlay h2, .confettioverlay h4 {max-width:90%; margin-left:auto; margin-right: auto;}
    .confettioverlay h4 {font-size: 20px;}
    .confettioverlay h2 {font-size: 35px;}
    .confettioverlay img { width : 150px; margin-top:40px;}

    .features {margin-top: 30px; padding: 0}
    .features li {flex-basis: 45%;}

    footer ul li {width:100%; padding:0; margin:0; border:0;}

}

@media (max-width:600px) {
    .features li {flex-basis: 90%;}

    }