@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
.top-header { padding-top: 5px; padding-bottom: 5px; background-color: #ff9f51; color: #fff; font-size: 22px; }

.top-header .top-header-list { display: flex; justify-content: space-between; }

.top-header .top-header-list, .top-header .header-left-container, .top-header .header-right-container { display: flex; flex-wrap: wrap; margin-top: 0; margin-bottom: 0; align-items: center; }

.top-header .top-header-list li { margin-left: 10px; margin-right: 10px; white-space: nowrap; list-style: none; }

.top-header a { text-decoration: none; color: #fff; }

.top-header a > i { margin-right: 10px; }

.top-header i.fas, .top-header i.fab { font-size: 40px; }

.top-header .chat-container button { background-color: #ffd517; color: #fff; font-size: 22px; border: none; border-radius: 50px; padding-left: 25px; padding-right: 25px; cursor: pointer; display: flex; align-items: center; padding-top: 5px; padding-bottom: 5px; }

.top-header .chat-container button:hover { background-color: #91d4d4; }

.top-header .chat-container button:active { outline: none; }

.top-header .chat-container button:focus { outline: none; }

.top-header .chat-container button img { width: 32px; margin-right: 10px; }

.top-header .header-right-container .viber-container { margin-left: auto; }

.top-header .header-right-container .viber-container a { display: flex; align-items: flex-start; }

.top-header .header-right-container .viber-container .viber-icon { width: 40px; }

.top-header li:nth-child(3) { margin-left: auto; }

.navigation-top { position: sticky; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; }

.navigation-top a:link { text-decoration: none; line-height: normal; font-weight: bold; }

.navigation-top img { height: 150px; }

.navigation-top .logo-container { padding: 0px 0px 0px 40px; display: flex; flex-grow: 1; }

.navigation-top .logo-container a { text-decoration: none; display: block; }

.navigation-top .logo-container a:hover { text-decoration: none; }

.navigation-top .list-container { display: flex; flex-grow: 1.5; }

a { color: #464646; }

.navigation-top a { margin-left: 10px; margin-right: 10px; text-align: center; line-height: 50px; font-size: 20px; font-weight: normal; }

.menu-item-active { color: #26c7cc; }

.navigation-top { overflow: hidden; }

.navigation-top a:hover { color: #26c7cc; }

.navigation-top .icon { display: none; }

@media screen and (max-width: 825px) { .navigation-top a { display: none; } .navigation-top a.icon { display: block; text-align: center; margin: 20px; } .navigation-top .logo-container { display: flex; justify-content: center; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; } }

@media screen and (max-width: 825px) { .navigation-top { display: flex; } .navigation-top.responsive i { margin-top: 17px; } .navigation-top.responsive .list-container { position: relative; display: block; } .navigation-top.responsive .list-container a { margin-top: 15px; margin-bottom: 10px; padding-bottom: 5px; padding-top: 5px; } .navigation-top.responsive .list-container .icon { margin-top: 0px; } .list-container { justify-content: flex-end; } .navigation-top.responsive a.icon { position: absolute; right: 0; top: 0; } .navigation-top.responsive a { display: block; } .navigation-top { border-bottom: thin solid lightgray; } }

@media screen and (max-width: 500px) { .navigation-top { display: flex; } .navigation-top img { height: 70px; } }

.list-container a { position: relative; }

.list-container i:before { background-color: unset; }

.list-container a:before, .list-container a:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; }

.list-container a:before { bottom: 0; display: block; height: 3px; width: 0%; content: ""; background-color: #26c7cc; }

a.icon::before { background-color: unset; }

.list-container a:hover:before, .list-container .menu-item-active a:before { opacity: 1; width: 100%; }

.banner-container { padding: 0px 30px; background-color: #1c4755; display: flex; align-items: center; font-size: 20px; }

.banner-container .sos-text { display: inline; color: #fff; }

.banner-container img { width: 50px; display: inline-flex; margin: 30px 30px 30px 20px; }

.title-subtitle-container { padding-top: 20px; }

.main-title, .main-subtitle { text-align: center; color: #555555; }

.main-title { white-space: nowrap; overflow: hidden; font-family: 'Source Code Pro', monospace; font-size: 66px; margin: 0 auto 50px auto; }

.main-title { animation: animated-text 4s steps(29, end) 1s 1 normal both, animated-cursor 600ms steps(29, end) infinite; }

@keyframes animated-text { from { width: 0; }
  to { width: 625px; } }

@keyframes animated-cursor { from { border-right-color: #008c99; }
  to { border-right-color: transparent; } }

.main-subtitle { margin-top: 10px; font-family: 'Source Code Pro', monospace; font-size: 24px; font-style: italic; margin-bottom: 0px; }

.circle-container { display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: nowrap; }

.circle-container .circle { background-size: 190vh; width: 33%; height: 40em; display: flex; justify-content: center; align-items: center; background-position: center; background-repeat: no-repeat; cursor: pointer; }

.circle-container a { font-size: 22px; font-weight: bold; color: white; text-decoration: none; }

.circle-container a span { font-size: 26px; }

.circle-container .circle-blue { background-image: url("/assets/images/zuta.png"); }

.circle-container .circle-green { background-image: url("/assets/images/narandzasta.png"); }

.circle-container .circle-yellow { background-image: url("/assets/images/crvena.png"); }

html { scroll-behavior: smooth; }

body { font-family: 'Montserrat', sans-serif; margin: 0; }

.scene-button-container { margin-top: 60px; text-align: center; margin-bottom: 60px; }

.hide-site { display: block; position: fixed; z-index: 5; top: 60%; right: -30px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 18px; border: thin solid #1c4755; padding: 8px 24px; border-radius: 92px; background-color: #1c4755; color: white; text-decoration: none; }

.hide-site:hover { background-color: white; color: #1c4755; }

.hide-site:hover a { color: #008c99; }

.hide-site i { padding-left: 5px; }

@media screen and (max-width: 400px) { .main-title { font-size: 24px; } @keyframes animated-text { from { width: 0; }
    to { width: 305px; } } }

@media screen and (max-width: 500px) { .hide-site { font-size: 14px; padding: 6px 20px; } .thumbnail-container { display: flex; justify-content: space-around; } .main-title { font-size: 32px; } .hero-subtitle-container { display: none; } @keyframes animated-text { from { width: 0; }
    to { width: 305px; } } .circle-container .circle { height: 28em; } .legal-link { font-size: 16px; } .top-header .top-header-list { justify-content: center; padding-left: 0; align-items: center; font-size: 18px; } .header-left-container i.fab, .header-left-container i.fas, .header-right-container i.fab, .header-right-container i.fas { font-size: 20px; } .header-left-container .viber-icon, .header-right-container .viber-icon { width: 74%; } .header-left-container .viber-container, .header-right-container .viber-container { margin-top: 0; margin-right: 20px; } h2.information-title { text-align: center; } .header-right-container i.fab { font-size: 40px; } }

@media screen and (max-width: 825px) { .hero-ability-container { display: none; } button.choose-hero-button { font-size: 16px; padding: 7px 20px; } li .choose-hero-button-container-sm { display: inline; } li .choose-hero-button-container-sm .choose-hero-button, li .choose-hero-button-container-sm .hero-1-button.hero-2-button.hero-3-button.hero-4-button.hero-5-button { font-size: 12px; width: min-content; padding: 6px 22px; } li .hero-image-button-container { display: flex; } li .hero-image-button-container img { margin-right: -10px; } .circle-container { flex-direction: column; } .circle-container .circle { width: 100%; } .banner-container img { display: none; } .banner-container div { padding-top: 20px; padding-bottom: 20px; } .banner-container { display: none; } }

@media screen and (max-width: 1024px) { .circle-container .circle { height: 35em; background-size: 170vh; } }

.error-page { display: grid; place-items: center; margin-top: 13em; margin-bottom: 13em; color: #555555; }

.solid { border-top: thin solid lightgray; width: 96%; }

.information-container { color: #555555; padding-top: 15px; font-weight: bold; max-width: 1300px; margin: auto; padding-right: 30px; padding-left: 30px; }

.information-container h2 { text-align: left; }

.information-container .blog-page-container { padding: 0px; }

.information-container .information-title { font-weight: 600; font-size: 36px; padding-left: 15px; }

.blog-post-container { margin: auto; color: #555555; padding: 3em; max-width: 1300px; }

.blog-post-title, .blog-post-date { color: #555555; text-align: center; }

.blog-post-image-container { margin: auto; }

.blog-post-image { margin: auto; display: block; width: 100%; }

.blog-post-content-container { line-height: 1.75; }

.blog-post-content-container p img { width: 100%; }

.share-bar-container { padding: 1em; }

.hero-container { font-family: 'Rowdies', cursive; display: flex; margin: auto; -webkit-box-pack: center; justify-content: center; padding-top: 30px; padding-bottom: 30px; flex-direction: column; }

.hero-container h1 { color: #555; margin-top: 30px; margin-bottom: 20px; font-family: 'Rowdies', cursive; }

.hero-container *, .hero-container *::before, .hero-container *::after { box-sizing: inherit; margin: 0; padding: 0; text-align: center; }

.hero-container li { list-style-type: none; color: #555555; }

.thumbnails { display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; line-height: 0; margin-left: 2em; margin-right: 2em; }

.thumbnails li { -webkit-box-flex: 1; flex: auto; text-align: center; font-weight: bold; line-height: normal; padding-bottom: 10px; }

.thumbnails a { display: block; }

.thumbnails img { width: 80%; height: 80%; object-fit: cover; object-position: top; }

.highlight-hero { -moz-box-shadow: inset 0 0 10px #008c99; -webkit-box-shadow: inset 0 0 10px #008c99; box-shadow: inset 0 0 10px #008c99; border-radius: 15%; }

.slides-container { margin-bottom: 60px; }

.hero-ability-container, .special-ability-container { line-height: 2; padding-top: 20px; margin-right: -10px; }

.hero-ability-container .hero-ability, .special-ability-container .hero-ability { display: flex; white-space: pre; font-family: 'Rowdies', cursive; }

.hero-ability-container .hero-ability img, .special-ability-container .hero-ability img { width: 30px; height: 30px; padding-right: 5px; padding-bottom: 10px; }

.slides { overflow: visible; width: 50vmin; height: 50vmin; margin: auto; }

.slides li { width: 50vmin; height: 60vmin; position: absolute; z-index: 1; }

.slides img { height: 60vmin; object-fit: cover; object-position: top; }

.slides li:target { z-index: 3; -webkit-animation: pop 1s 1; animation: pop 1s 1; pointer-events: none; display: flex; justify-content: center; }

.slides li:not(:target) { -webkit-animation: hidden 1s 1; display: none; }

.hero-subtitle-container { border: 2px solid; margin: 0px 5px; padding: 10px 0px; border-radius: 25px; }

.hero-subtitle-container a { text-decoration: none; }

.hero-subtitle-container:hover a { color: #fff; }

.hero-subtitle-color-1 { border-color: orange; }

.hero-subtitle-color-1:hover { background-color: orange; }

.hero-subtitle-color-1 a:hover { background-color: orange; }

.hero-subtitle-color-2 { border-color: red; }

.hero-subtitle-color-2:hover { background-color: red; }

.hero-subtitle-color-2 a:hover { background-color: red; }

.hero-subtitle-color-3 { border-color: #ffb901; }

.hero-subtitle-color-3:hover { background-color: #ffb901; }

.hero-subtitle-color-3 a:hover { background-color: #ffb901; }

.hero-subtitle-color-4 { border-color: purple; }

.hero-subtitle-color-4:hover { background-color: purple; }

.hero-subtitle-color-4 a:hover { background-color: purple; }

.hero-subtitle-color-5 { border-color: green; }

.hero-subtitle-color-5:hover { background-color: green; }

.hero-subtitle-color-5 a:hover { background-color: green; }

@keyframes pop { 0% { transform: scale(1); }
  100% { transform: scale(1.5); } }

@-webkit-keyframes hidden { 0% { z-index: 2; }
  100% { z-index: 2; } }

@keyframes hidden { 0% { z-index: 2; }
  100% { z-index: 2; } }

.choose-hero-button-container-sm { display: none; }

.choose-hero-button { pointer-events: all; padding: 10px 30px; border-radius: 92px; font-size: 18px; cursor: pointer; border: none; border-radius: 25px; color: snow; outline: none; margin-top: 40px; }

.choose-hero-button:focus { outline: none; }

.choose-hero-button:hover::before { filter: blur(20px); opacity: 1; }

.hero-1-button { background: orange; }

.hero-1-button:hover { animation: glow-orange 2s ease-in infinite; }

.hero-1-button::before { background: orange; }

@keyframes glow-orange { 0% { background: orange; }
  25% { background: #f5d18f; }
  100% { background: orange; } }

.hero-2-button { background: red; }

.hero-2-button:hover { animation: glow-red 2s ease-in infinite; }

.hero-2-button::before { background: red; }

@keyframes glow-red { 0% { background: red; }
  25% { background: #ff8484; }
  100% { background: red; } }

.hero-3-button { background: #ffb901; }

.hero-3-button:hover { animation: glow-yellow 2s ease-in infinite; }

.hero-3-button::before { background: #ffb901; }

@keyframes glow-yellow { 0% { background: #ffb901; }
  25% { background: #fad474; }
  100% { background: #ffb901; } }

.hero-4-button { background-color: purple; }

.hero-4-button:hover { animation: glow-purple 2s ease-in infinite; }

.hero-4-button::before { background: purple; }

@keyframes glow-purple { 0% { background: purple; }
  25% { background: #f875f8; }
  100% { background: purple; } }

.hero-5-button { background-color: green; }

.hero-5-button:hover { animation: glow-green 2s ease-in infinite; }

.hero-5-button::before { background: green; }

@keyframes glow-green { 0% { background: green; }
  25% { background: #7afc7a; }
  100% { background: green; } }

.blog-page-container { color: #555555; border-top: thin solid lightgrey; max-width: 1300px; margin: auto; }

.blog-page-container .grid-container ul { display: grid; grid-template-columns: 33% 33% 33%; padding: 0px; }

.blog-page-container .blog-page-title { text-align: left; margin: 60px 15px 30px 15px; }

.blog-page-container .title-underline { display: block; margin-left: auto; margin-right: auto; }

.blog-page-container .post-title { text-align: left; }

.blog-page-container .post-title a { text-decoration: none; }

.blog-page-container .title-date-container { padding: 2px 16px; }

.blog-page-container li { list-style: none; }

.blog-page-container .single-post-container { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; width: auto; margin: 10% 5%; }

.blog-page-container .single-post-container:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }

.blog-page-container .blog-page-post-image { width: 100%; }

.blog-page-container .blog-page-post-image:hover { transition: .5s ease; opacity: 0.5; }

@media screen and (max-width: 825px) { .blog-page-container .grid-container ul { grid-template-columns: 100%; } }

.blog-page-container .read-more a { color: #008c99; text-decoration: none; padding-left: 16px; padding-right: 16px; font-size: 18px; font-weight: bolder; }

.post-excerpt-container { padding-left: 16px; padding-right: 16px; }

.read-more-container-kids .read-more a { color: #558de0; }

.read-more-container-teens .read-more a { color: #e1bb30; }

.read-more-container-young .read-more a { color: #4db998; }

.blog-post-container .share-bar-container { padding-left: 0px; }

.footer-container { box-sizing: border-box; font-family: "Roboto", sans-serif; margin: 0; padding: 0; background-color: #ff9f51; color: #bbb; line-height: 1.5; color: #bbb; line-height: 1.5; }

.footer-container ul { list-style: none; padding-left: 0; }

.footer-container a { text-decoration: none; color: #eee; }

.footer-container a:hover { text-decoration: underline; }

.footer-container .footer-title { color: #fff; font-family: "Roboto", sans-serif; font-size: 1.375rem; padding-bottom: 0.625rem; }

.footer-container .footer-subtitle { color: white; padding-top: 3px; }

.footer-container .container { flex: 1; }

.footer-container .footer-main { display: flex; flex-wrap: wrap; }

.footer-container .disclaimer { color: white; font-size: 12px; }

.footer-container .unicef-logo { width: 200px; }

.footer-container .footer-logo-container { display: flex; flex-direction: column; }

.footer-container .footer-logo-container a { padding-bottom: 20px; }

@media only screen and (min-width: 477px) { .footer-container .footer-main { justify-content: space-evenly; } }

@media only screen and (max-width: 477px) { .footer-container div.logos-image-container { flex-direction: column; } .footer-container div.logos-image-container div { width: 100%; } }

@media only screen and (min-width: 1240px) { .footer-container .footer-main { justify-content: space-evenly; } }

.footer-container .footer-main-item { padding: 1.25rem; min-width: auto; }

.footer-container .footer-social { background-color: #fdb913; }

.footer-container .footer-social-list { display: flex; justify-content: center; padding-top: 1.25rem; padding-bottom: 1.25em; margin: 0; }

.footer-container .footer-social-list li { font-size: 3rem; }

.footer-container .footer-social-list li a { margin-left: 1em; margin-right: 1em; }

.footer-container .footer-legal { padding: 0.9375rem 1.875rem; background-color: #1c4755; color: white; font-size: 20px; }

.footer-container .footer-legal-list { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }

.footer-container .footer-legal-list li { margin: 0.125rem 0.625rem; white-space: nowrap; }

.footer-container .footer-legal-list li:nth-last-child(2) { flex: 1; }

.footer-container .legal-link a:hover { text-decoration: none; color: #ff00e6; }

.footer-container .logos-image-container img { width: 100%; }

.footer-container .logos-image-container { display: flex; flex-direction: row; background-color: white; }

/*# sourceMappingURL=styles.css.map */