body { background-color:#222; background-repeat: no-repeat; font-size:15px; font-family: 'Lato', sans-serif; padding:0; margin:0; color:#000; line-height: 1.4;}
.spacer {padding:0 20px;}
a {text-decoration: none;}
.w100 {width:100%; display: block; }
.w25 {width:22%; display: inline-block; vertical-align: top;}
.w30 {width:28%; display: inline-block; vertical-align: top;}
.w40 {width:38%; display: inline-block; vertical-align: top;}
.w50 {width:48%; display: inline-block; vertical-align: top;}
.w60 {width:58%; display: inline-block; vertical-align: top;}
.w70 {width:68%; display: inline-block; vertical-align: top;}
.container, .pagesection {display: block; width:98%; max-width: 1000px; margin:0 auto;}
.page {background:#fff;}
.section {display:block; margin:0 auto; width:100%; max-width: 1000px;  margin:40px auto 60px;}
.vmid {vertical-align: middle !important;}
p {width:90%; margin: 20px auto; display: block;}
.dotted {width:100%; height: 20px; border-top:1px dotted #55bfc5; margin:40px auto 0;}
h3 { display:block; color:#196569; font-size:1.5em; font-weight:600; margin:20px auto;}
.center {text-align: center;}
.sectiondivider {width:100%; height: 20px; border-top:2px solid #55bfc5; margin:40px auto 0; max-width: 1000px;}

/* H1-H5 */
h1 {font-size:3.5em; font-weight:700; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; color:#55bfc5; width: fit-content; margin: 10px auto; padding:0;  line-height: 1;}
h2 { display:block; color:#1a6569; font-size:2.5em; font-weight:800; margin:20px auto 10px; letter-spacing: 1px; text-align: center; border-bottom: 2px solid #55bfc5;
  width: fit-content;  line-height: 1.2;}
h3 { display:block; color:#278085; font-size:2em; font-weight:800; margin:20px auto; letter-spacing: 1px;}
h4 {font-size:2.2em; font-weight:700; letter-spacing: 0.5px; margin:0 auto 20px; text-align: center; color:#0a8683; width: fit-content; line-height:1;}
h5 {font-size:1.6em; font-weight:700; letter-spacing: 0.5px; margin:-10px auto 0; text-align: center; color:#0a8683;}
#h1green {background:#196569; position: relative; display: block; width:100%; margin:-10px auto 0; border-top:5px solid #55bfc5; border-bottom:1px solid #55bfc5;}
.noborder {border:none;}

/* NAV */
#nav {display: block; width:100%; background:#278085; width:100%; margin:0 auto;  z-index: 500; position: fixed; text-align: center; top:0; min-height: 50px; height: 30px; border-bottom:3px solid #71d9df;}
#nav a, .nav-support { display:inline-block; color:#fff;  text-transform: uppercase; font-size:1em; text-align: center; font-weight: 900; padding:15px 20px; letter-spacing:1px; vertical-align: top; height: max-content;}
#nav a:hover, .nav-support:hover { background:#55bfc5; color:#fff; cursor: pointer;}
#navdonate {background:#dc0000; color:#ffffff !important; padding:5px 30px; -webkit-box-shadow: 1px 1px 7px -2px #000000;  box-shadow: 1px 1px 7px -2px #000000; position: relative; top:5px; margin-right:10px; }

#navdonate:hover {color:#dc0000 !important; background:#fff !important;}
#navOn { background: #55bfc5;}
#subnav { background: #55bfc5; display: none; text-align: center; width:100%; margin:5px auto; overflow: hidden; position: relative; top:-1px; }
#subnav a {display: block; width:100%; text-align: center; padding:10px 0 10px;}
#subnav a:hover { color:#fff;}
#subnav a { color:#000;}



/* HOME */
#header { background: #e1fbfd;  font-size:1em; display:block; width:100%; text-align: center; margin:0 auto; padding-top:70px; padding-bottom:20px; overflow:hidden;}
#heartcontainer { display: block;  width:100%; top:0; left:0; margin:0 auto; overflow:hidden; position:absolute; height: 300px;  }
#homelogo {display:block; margin:0px auto; width:13%; height: auto;}
#homegivinglogo {display:block; margin:20px auto 0; width:30%; height: auto;}
#homeheadline {display:block; margin:15px auto 25px; color:#1a6569; font-size:1.7em; font-weight: 800; width:98%; max-width: 1000px; line-height:1.1; letter-spacing: 1px;}
.homeleft {display:inline-block; width:65%; vertical-align: top;}
.homeright {display:inline-block; width:30%; vertical-align: top}
#hometally {display: block; margin:-10px auto 0; width:45%; max-width: 1000px; position: relative;}
#ulgift li { padding-left: 1rem; text-indent: -1rem; list-style: none; color:#000; font-size:1.2em; padding-bottom:10px; font-weight: 500;}
#ulgift li::before {content: "⭐\00a0\00a0";}
#homegiveicon {display: block; margin:0 auto; width:100%; max-width: 1000px;}
#homecontent { background: #fff;  font-size:1em; display:block; width:100%; text-align: center; margin:0 auto; padding-bottom:20px;}
.homelogo {display: block; margin:20px auto 0; width:40%; height: auto;}


/* DONATION BUTTON */
.donateButton{ font-size:2.2em; font-weight: 800; display:block; width:fit-content; margin:40px auto 15px; text-align: center; background: #dc0000; background-size: 100% auto; border-radius:50px; padding:2px 50px; -webkit-box-shadow: 1px 1px 7px -2px #000000;  box-shadow: 1px 1px 7px -2px #000000; letter-spacing: 2px; border: 2px solid #fff;}
  a .donateButton{ text-decoration:none; color:#fff; text-decoration-color:#fff;}
  .donateButton:hover, #donateButton a:hover{ text-decoration:none; color:#dc0000; background:#fff; cursor:pointer;border: 2px solid #dc0000}
  .donatelink {width:fit-content; display: block; margin:0 auto;}
  #buttonunder {font-size: 2em; max-width: 1000px;}


header h1 {border:none; font-size:2em; margin:0px auto 10px; background:#0a8683; position: relative; z-index: 100; border-radius: 0; }
header img {width:150px; height: auto; display: inline; position: relative; top:50px;}
#logo {display: block; margin: 10px auto; width: 150px; height: auto; top:20px;}
#headervideo {width:100%; border:2px solid #0bb1ad; height: auto; position: relative; z-index: 100;}


#headertopgrad { width:100%; height: 50px; position: absolute; z-index: 50; top:0; background: #67c1bf;  background: -moz-linear-gradient(180deg, rgba(66,90,121,1) 0%, rgba(66,90,121,0) 100%); background: -webkit-linear-gradient(180deg, rgba(66,90,121,1) 0%, rgba(66,90,121,0) 100%); background: linear-gradient(180deg, rgba(66,90,121,1) 0%, rgba(66,90,121,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#425a79",endColorstr="#425a79",GradientType=1);}

#headerbottomgrad { width:100%; height: 50px; position: absolute; z-index: 50; bottom:0; background: rgb(66,90,121); background: -moz-linear-gradient(0deg, rgba(66,90,121,1) 0%, rgba(66,90,121,0) 100%); background: -webkit-linear-gradient(0deg, rgba(66,90,121,1) 0%, rgba(66,90,121,0) 100%); background: linear-gradient(0deg, rgba(66,90,121,1) 0%, rgba(66,90,121,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#425a79",endColorstr="#425a79",GradientType=1);}



#tally {width:95%; max-width: 1000px; margin:-20px auto 10px; display: block;}
/* GRAPH */
#graphs {position: relative;}
.icon {float:left; margin:0 20px 10px 0; width: auto; height: 3em;}
#graphs h1, #ourprograms h1 {text-align: center; font-size:2.0em; word-wrap: break-word; color:#278085; margin:5px auto 10px; font-weight: 800; border:1px solid #0bb1ad; padding:5px 30px; background:#e6fdff; border-radius: 50px;}
.graph {width:100%; margin:0px auto; display: block;}
#g1 .graph {width:80%;}
#graphs p {font-size:1em; line-height: 1.3;}
#graph2 {width:100%; display:block;}
#graph3 {width:60%; display:block; margin:0; position: relative; z-index: 2;}
#g2 {width:48%; display:inline-block; vertical-align: top;}
#g3 {width:48%; display:inline-block; vertical-align: top;}
#g3 .graph {margin-top:-100px;}

/* HOW WILL */
.nolist li {font-size:1.2em; list-style: none; text-align: center; line-height: 1.2; padding: 0 0 20px 0;}
.listdollars { display: flex; flex-wrap: wrap; justify-content: center;}
.listdollars li {font-size:1em; list-style: none; text-align: center; line-height: 1.2; padding: 0 0 20px 0; display: block; width:44%; vertical-align: top; margin:10px 5px 20px; font-style: italic; border:2px solid #55bfc5; border-radius: 10px;}
.listdollars li strong {font-size:1.8em; color:#fff; display: block; text-align: center;background:#277f84;  border-radius: 20px; width:fit-content; margin:-15px auto 5px; padding:2px 25px; }
#hearticons {width:60%; height: auto; display:block; max-width: 1000px; margin:40px auto;}


/* OUR PROGRAMS */
#ourprograms p{width:100%;}
#bgapicon {width:15%; height: auto; display: block; float:left;  margin:0 10px 0 0;}
#bgaph3 {margin:0px auto 5px; background:none; color:#0e878e; border:none; letter-spacing: 0; font-size:2.5em; text-align: center;}
.grads {width:100%; height: auto; display: block; margin:0 auto 10px;}
.quote50 {width:45%; margin:20px; display: inline-block; vertical-align: top; font-style: italic;}
.quote50 img {width:20%; margin:0 10px 0 0; display: inline-block; vertical-align: top;}
.quote50text {width:70%; margin:0 0 0 0; display: inline-block; vertical-align: top;  font-size:0.9em;}
.quote50text strong {display: block;}
#newprog {width:20%; height: auto; display: block; margin:0 auto 10px}
#newprogicon {width:15%; height: auto; display: block; float:right;}
#crpicon {width:8%; height: auto; display: block; float:left; margin:0 10px 0 0;}
#eventsicon {width:11%; height: auto; display: block; float:right; margin:0 10px 0 0;}
#datalink {display:block; font-size:1.5em; font-weight:500; width: fit-content; margin:20px auto ; color:#fff; background:#0a8683; border:10px; border-radius:20px; padding:5px 30px; text-align: center; border:1px solid #fff; -webkit-box-shadow: 1px 1px 7px -2px #000000; box-shadow: 1px 1px 7px -2px #000000; }
#datalink:hover { background:#21b1ad;}

/* PROGRAM BUTTON */
.programbutton{ font-size:2em; font-weight: 800; display:block; width:fit-content; margin:40px auto 60px; text-align: center; background: #278085; background-size: 100% auto; border-radius:50px; padding:2px 50px; -webkit-box-shadow: 1px 1px 7px -2px #000000;  box-shadow: 1px 1px 7px -2px #000000; letter-spacing: 2px; border: 2px solid #fff; color:#fff;}
  a .programbutton{ text-decoration:none; color:#fff; text-decoration-color:#fff;}
  .programbutton:hover, #donateButton a:hover{ text-decoration:none; color:#278085; background:#fff; cursor:pointer;border: 2px solid #278085}

/* MOVIES */
#movies {text-align: center;}
#movies video{width:100%; display: inline-block; margin:10px; vertical-align: top}
#mainvideo {width:95% !important; display: block; margin:10px;  border:2px solid #0bb1ad;}
.videotitles {font-size:1.1em; font-weight:700;  margin:0px auto 0; text-align: center; color:#0a8683; position: relative; top:5px;}

.videotitlesh1 {font-size:1.8em; font-weight:700;  margin:0px auto 0; text-align: center; color:#0a8683; position: relative; top:5px;}
.videotitlesh2 {font-size:1em; font-weight:400;  margin:0px auto 10px; text-align: center; color:#000; position: relative; top:5px; font-style: italic;}

.vid {width:100%; vertical-align: top; display: block; margin:10px auto; max-width: 1000px;}
.vid video {width:75%; vertical-align: top; display: block; margin:10px auto; border:2px solid #0ab5bf;}

/* OUR MBE */
#ourmbe {border:none;}
#ourmbe h1 { color:#196569; font-size:2.5em; font-weight: 800;  padding:10px 40px; border:2px solid #196569; border-radius: 0; width:fit-content; margin:20px auto 40px; letter-spacing: 1px; display: block; max-width: 90%;}
#ourmbe h4 {font-size:1.6em; border:none;}
.underlineyellow {text-decoration: underline; text-decoration-color: #0ab5bf; text-underline-offset: 5px; text-decoration-thickness: 2px;}




/* THANK YOU LIST*/
#thankyoulist { display:block; width:90%; margin:20px auto; padding:20px; border:5px solid #196569; column-count: 3; font-weight: 500; line-height: 1.5; color:#fb8231; font-size: 1.2em; text-align: center;}

/* TESTIMONIALS*/
#quotes, #testimonials {text-align: center;}
#testimonials {max-width: 100%;}
.quotes, .testimonials {width:23%; display: inline-block; vertical-align: top; margin:25px 10px 0 10px; color:#196569; line-height: 1.4; text-align: center; font-size:1em; padding:0px 0 0 0;}
.quotes strong, .testimonials strong {display: block; width:fit-content; margin:10px auto; color:#196569; font-style: italic;}
.quotepic {width:30%; height: auto;  border:2px solid #55bfc5;margin:0px 10px 10px; display: inline-block;}
.testimonialpic {width:30%; height: auto;  border:2px solid #55bfc5;margin:0px 10px 10px; display: inline-block; border-radius: 10px;;}
.mbecollage {display:block; width:95%; height: auto; margin:40px auto 20px; border:1px solid #0ab5bf}
.quotes p , .testimonials p {background:url(images/quotebg.png); background-repeat: no-repeat; background-position: bottom; background-size: 100% auto; margin:0 0 -25px 0; background-color: #e3e3e3; padding: 20px 15px 35px; border-radius: 20px; font-size:1em;}
#staff h1 { color: #196569; font-size:2.8em; font-weight: 100; padding:5px 40px;  border:1px solid #196569; border-radius: 0;}
.staff {width:45%; display: inline-block; vertical-align: top; margin:20px; border-top:5px solid #59bcc1; text-align: center; color:#196569; line-height: 1.4; padding:10px 0 0 0; position: relative}
.stafftop {position: absolute; top:10px; left:30%; text-align: center; width: 70%;}
.staffname {font-weight: 800; font-size:1.4em; color:#278085; text-transform: uppercase;}
.stafftitle {font-weight: 600; font-size:0.8em; color:#278085; text-transform: uppercase; line-height: 1.2; font-style: italic;}
.staff img{width:100%; display: block; height: auto; margin: 0 0 10px 0;}
.stafftext {background:url(images/textbubble.png); background-repeat: no-repeat; background-position: top; background-size: 100% auto; margin-top: -30px; background-color: #e3e3e3; padding: 45px 14px 14px; border-radius: 20px; mix-blend-mode: darken;
}
.staffpic2 {margin:10px auto 0 !important;}

.note {font-style: italic; color:#ff0000;}

/* FOOTER */
.footer {display: block; width:100%; text-align: center; padding:5px 0 40px; background:#222; border-top:5px solid #1a6569;}
#footerheadline { display:block; color:#fff; font-size:2em; font-weight:400; margin:20px auto 5px; letter-spacing: 1px;}
.footer .donateButton {margin:0 auto 0 !important; transform: scale(0.8); }
#footer-sup {font-size: 0.8em; color:#425a79;}
#footer-sup li {padding:0 0 10px 0;}

#homefooter {background:#222; padding:0; margin:0 auto; }
#homefooter #footerheadline {color:#1a6569; font-weight: 600;}

/* FOOTER NAV */
#footernav {display: block; width:100%; background:#222; width:100%; margin:0 auto 40px;  z-index: 500; position: relative; text-align: center; top:0; min-height: 41px; height: 30px; border-bottom:1px solid #1a6569;}
#footernav a, .nav-supportfooter { display:inline-block; color:#fff;  text-transform: uppercase; font-size:1em; text-align: center; font-weight: 900; padding:10px 20px; letter-spacing:1px; vertical-align: top; height: max-content;}
#footernav a:hover, .nav-supportfooter:hover { background:#1a6569; color:#fff; cursor: pointer;}
#navdonatefooter {background:#dc0000; color:#ffffff !important; padding:8px 30px; -webkit-box-shadow: 1px 1px 7px -2px #000000;  box-shadow: 1px 1px 7px -2px #000000; position: relative; top:-0; margin-right:10px; }

#navdonatefooter:hover {color:#dc0000 !important; background:#fff !important;}
#navOn { background: #55bfc5;}
#subnavfooter { background: #1a6569; display: none; text-align: center; width:100%; margin:10px auto; overflow: hidden; position: relative; top:-1px; }
#subnavfooter a {display: block; width:100%; text-align: center; padding:5px 0;}
#subnavfooter a:hover { color:#55bfc5;}
#subnavfooter a { color:#fff;}





@media only screen and (max-width: 2000px) and (min-width: 1200px) {
  #heartcontainer {height: calc(24vw);}
}

@media only screen and (max-width: 1200px) and (min-width: 1100px) {
header h1 {font-size:1.7em;}
.quotes, .testimonials {width:22%;}
}

@media only screen and (max-width: 1100px) and (min-width: 1000px) {
header h1 {font-size:1.6em;}
.quotes, .testimonials {width:22%;}

}

/* 900 - 1000 */
@media only screen and (max-width: 1000px) and (min-width: 900px) {
  #homeheadline {font-size:1.4em;}
  #heartcontainer {transform: scale(1); width:100%; left:0px !important;}
  .quotes, .testimonials {width:22%;}

}

/* 800 - 900 */
@media only screen and (max-width: 900px) and (min-width: 800px) {
  body {font-size:14px;}
  #nav a, .nav-support {font-size:0.9em;}
  #footernav a, .nav-supportfooter {font-size:0.8em; padding:10px 6px;  margin:5px 0 0 0;} 
#homeheadline {font-size:1.4em;}
#ulgift  {width:98%;}
#ulgift li {font-size:1em;}
.quotes, .testimonials, .staff, .quote50 {width:42%;}
.listdollars li {width:44%;}
.stafftitle {font-size:0.7em; margin-top:-2px;}
#heartcontainer {transform: scale(.80); width:126%; left:-115px !important; height:350px !important; top:-40px;}
#ulgift {margin:10px auto; width:90%; padding:0; font-size:1.1em;}
.quotes, .testimonials {width:22%; font-size:0.9em;}

}

/* 700 - 800 */
@media only screen and (max-width: 800px) and (min-width: 700px) {
  body {font-size:14px;}
  #nav a, .nav-support {font-size:0.8em; padding:15px 10px}
  #homeheadline {font-size:1.3em;}
  #footernav a, .nav-supportfooter {font-size:0.8em; padding:10px 6px;  margin:5px 0 0 0;} 
  #heartcontainer {transform: scale(.6); width:170%; left:-272px !important; height:400px !important; top:-50px}
  .donateButton {margin:40px auto 15px; padding:2px 25px;}

  #ulgift {margin:10px auto; width:100%; padding:0; }
  #ulgift li {font-size:1.05em;}
  h2, h3, h4, h5 {margin:10px auto;}
  h2 {font-size:2em;}
  h3 {font-size:1.5em;}
header h1 {font-size:1.1em;}
.quotes, .testimonials, .staff, .quote50 {width:42%;}
.listdollars li {width:43%;}
.staffname {font-size:1em;}
.stafftitle {font-size:0.7em; margin-top:-2px;}
.staff img { margin:20px 0 10px 0;}
.stafftext {margin-top:-20px;}

#graph2 {width:90%;}
#graph3 {width:70%;}

#graphs h1, #ourprograms h1 {font-size:2em;}

}

/* 600 - 700 */
@media only screen and (max-width: 700px) and (min-width: 600px) {
  body {font-size:13px;}
  #nav a, .nav-support {font-size:0.8em; padding:15px 10px;}
  #footernav a, .nav-supportfooter {font-size:0.8em; padding:10px 6px;  margin:5px 0 0 0;} 

  #heartcontainer {transform: scale(.6); width:170%; left:-240px !important; height:300px !important; top:-30px;}
  #homeheadline {font-size:1.3em; margin:10px auto;}
  #ulgift {margin:10px auto; width:100%; padding:0; }
  #ulgift li {font-size:1em;}
  .donateButton {margin:15px auto; padding:2px 20px;}
  h2, h3, h4, h5 {margin:10px auto;}
  h2 {font-size:2em;}
  h3 {font-size:1.5em;}
  #ulgift {margin:10px auto; width:90%; padding:0; font-size:1.1em;}
  #graphs h1, #ourprograms h1 {font-size:2em;}

.quotes, .testimonials, .staff, .quote50 {width:42%;}
.listdollars li, .staff  {width:90%; display: block;}
#thankyoulist {column-count: 2;}

}

/* 500 - 600 */
@media only screen and (max-width: 600px) and (min-width: 500px) {
  body {font-size:12px;}
  #nav a, .nav-support {font-size:0.8em; padding:15px 6px;  margin:0 0 0 0;}

  #footernav a, .nav-supportfooter {font-size:0.8em; padding:10px 6px;  margin:5px 0 0 0;} 

  #heartcontainer {transform: scale(.5); width:200%; left:-260px !important; height:400px !important; top:-70px}
  #homeheadline {font-size:1.4em; margin:10px auto;}
  .homeleft, .homeright {width:100%;}
  #hometally {width:45%; margin:0 auto 10px;}
  .donateButton {margin:15px auto;}
  #ulgift {margin:10px auto; width:90%; padding:0}
  #graphs h1, #ourprograms h1 {font-size:2em;}

  h2, h3, h4, h5 {margin:10px auto;}

header h1 {font-size:1.0em;}
.staff {width:90%; display: block; margin:20px auto;}
.quotes, .testimonials, .quote50 {width:90%; display: block; margin:20px auto;}
#graph3 {width:70%;}
.listdollars li, .staff  {width:90%; display: block;}
#thankyoulist {column-count: 2;}

}

/* 0 - 500 */
@media only screen and (max-width: 500px) and (min-width: 0px) {
  body {font-size:12px;}
  #nav {height: fit-content;}
  #nav a, .nav-support{font-size:0.9em; padding:10px 20px; margin:5px 0 0 0;}
  #navdonate {top:0}
  #subnav .container {text-align: center;}
#subnav a {width:100%;  padding: 5px 0;}
  #header {margin:30px auto 0}
  #homelogo {width:30%;}
#homegivinglogo {width:40%;}
 #heartcontainer {transform: scale(.6); width:198%; left:-241px !important; height:400px !important; top:-50px;}
  #homeheadline {font-size:1.5em; margin:10px auto; width:95%}
  .homeleft, .homeright {width:100%;}
  #hometally {width:45%; margin:0 auto 10px;}
  .donateButton {margin:15px auto;}
  #ulgift {margin:10px auto; width:90%; padding:0}
  #h1green{margin:-10px auto 50px;}
  .homelogo {width:80%;}
  #hometally {width:85%;}
  h2, h3, h4, h5 {margin:10px auto;}
  .listdollars {padding:0;}

  .section {margin:20px auto 20px}
header h1 {font-size:1.0em; padding:20px 0; }
.w50 {display:block; width:80%; margin:10px auto;}
#textvideo {margin:300px auto 0}
h1 {font-size:2.5em; padding:2px 10px;}
#graphs h1 {font-size:1.5em;}
.nolist li {width:90%;}
#graphs h1 {max-width: 80%; }
#donateButton {font-size: 2em;}

#g1, #g2, #g3 {width:80%; display: block; margin:10px auto 0;}
.quotes, .testimonials {width:90%; display: block; margin:20px auto;}
#ourmbe h1 {padding:2px 10px; line-height: 1;}
#navbar {margin:46px auto 0px;}
#staff h1 {padding:2px 10px;}
.staff {width:90%; display: block; margin:20px auto;}
.listdollars li, .staff, .quote50  {width:90%; display: block;}
#thankyoulist {column-count: 2;}
#movies video{width:80%; display: block; margin:10px auto;}
.vid {width:98%; margin:10px auto; display:block;}

#footernav {height: fit-content;}
  #footernav a, .nav-supportfooter {font-size:0.55em; padding:10px 3px; margin:5px 0 0 0;}
  #navdonate {top:0}
  #subnavfooter .container {text-align: center;}
#subnavfooter a {width:100%;  padding: 5px 0;}

}


/* HEART ANIMATION */


#heartscroll{ display: block; width:100%;  position: absolute; top:0px; left:0; animation: scroll 40s;  animation-timing-function: linear;  animation-fill-mode:both; }
#heartscroll2 { display: block; width:100%;  position: absolute; top:810px; left:0;  animation: scroll2 40s;  animation-timing-function: linear; animation-fill-mode:both;}
.heartcontainer {position: absolute; top:10px; left:0; display: block; width:500px; height: 500px; ;}
.heartphoto  { mask-image: url(images/svg-mask.svg); mask-mode: alpha; -webkit-mask-box-image: url(images/svg-mask.svg); width:500px; height:500px; display:block; position: absolute; z-index: 2;}
.heartborder  { width:500px; height:500px; display:block; position: absolute; z-index: 3;}

#heart1 {transform: scale(0.4, 0.4); top:-146px; left:-4%}
#heart2 {transform: scale(0.2, 0.2); top:-191px; left:70%}
#heart3 {transform: scale(0.3, 0.3); top:-160px; left:-22%;}
#heart4 {transform: scale(0.35, 0.35); top:-69px; left:70%}
#heart5 {transform: scale(0.3, 0.3); top:-18px; left:56%}
#heart6 {transform: scale(0.4, 0.4); top:76px; left:70%;}
#heart7 {transform: scale(0.5, 0.5); top:61px; left:-13%;}
#heart8 {transform: scale(0.4, 0.4); top:254px; left:-4%}
#heart9 {transform: scale(0.2, 0.2); top:209px; left:70%;}
#heart10 {transform: scale(0.3, 0.3); top:240px; left:57%;}
#heart11 {transform: scale(0.35, 0.35); top:331px; left:-18%}
#heart12 {transform: scale(0.3, 0.3); top:322px; left:69%}
#heart13 {transform: scale(0.4, 0.4); top:476px; left:-10%}
#heart14 {transform: scale(0.5, 0.5); top:501px; left:65%}

#heart15 {transform: scale(0.4, 0.4); top:-146px; left:-4%}
#heart16 {transform: scale(0.2, 0.2); top:-191px; left:70%}
#heart17 {transform: scale(0.3, 0.3); top:-160px; left:-22%;}
#heart18 {transform: scale(0.35, 0.35); top:-69px; left:70%}
#heart19 {transform: scale(0.3, 0.3); top:-18px; left:56%}
#heart20 {transform: scale(0.4, 0.4); top:76px; left:70%;}
#heart21 {transform: scale(0.5, 0.5); top:61px; left:-13%;}
#heart22 {transform: scale(0.4, 0.4); top:254px; left:-4%}
#heart23 {transform: scale(0.2, 0.2); top:209px; left:70%;}
#heart24 {transform: scale(0.3, 0.3); top:240px; left:57%;}
#heart25 {transform: scale(0.35, 0.35); top:331px; left:-18%}
#heart26 {transform: scale(0.3, 0.3); top:322px; left:69%}
#heart27 {transform: scale(0.4, 0.4); top:476px; left:-10%}
#heart28 {transform: scale(0.5, 0.5); top:501px; left:65%}




@keyframes scroll { 0%{top:0px}  100% { opacity:1; top:-810px} }
@keyframes scroll2 { 0%{top:810px}  100% { opacity:1; top:0px} }
@keyframes fadein { 0%{opacity:0}  100% { opacity:1} }