@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@200;400;500&display=swap');

body.soundolino {
  font-family: 'Encode Sans Condensed', sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}
a {
  color:#26366D;
}
button.link {
  background: none!important;
  border: none;
  padding: 0!important;
  color: #26366D;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}
.navbar-light .navbar-nav .nav-link {
  font-size:1.3em;
  font-weight:500;
  color:#26366D;
}
.btn-primary {
  background-color:#26366D;
  border-color: #26366D;
}
a.btn.btn-primary, 
a.btn.btn-primary:hover {
  border-radius: 0.25rem;
  padding: .375rem .75rem;
}

nav.navbar {
  border-radius: 0 0 2em 2em;
  padding-bottom:0;
}
.navbar-brand {
  height:55px;
}
.navbar-brand img {
   width: 160px;
   margin-top:-14px;
}
footer {
  margin-top: auto;
}
footer nav.bg-light {
  background-color:#147EAF !important;
  border-radius: 2em 2em 0 0;
  padding: 20px 20px 0 20px;
}
footer .navbar-light .navbar-brand {
  color:#FFF;
}
.carousel-inner {
  border-radius: 0 0 2em 2em;
}
.caruselmask {
  position:absolute;
  top:0;
  border-radius: 0 0 2em 2em;
  height: 4em;
  width: 100%;
  background-color: #FFF;
}
.carousel-item {
  height: 18rem;
  background-size:cover;
  background-position: center center;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

.carousel-caption {
  text-shadow: #26366D 2px 2px 1px;
}
.media {
  overflow:hidden;
  border-radius: 0.8em;    
}
.media img,
.media video {
  cursor:pointer;
  width:100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.media img {
  transition: transform .5s ease;
}
.media img:hover {
  transform: scale(1.3) translateY(-30%);
}
.modal-content,
.modal-body img,
.modal-body video {
  border-radius: 0.8em;
}
.support .media div {
  background-color: #E3F0F6;
}
.support .media div div {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 5% 15%;
  height:80%;
}
.card {
  border:none;
}
.bg-light {
  background-color: #fff !important;
}
.circlespinner {
    animation: rotate 2s linear infinite;
    margin: 0 .5em 0 0;
    width: 1.5em;
    height: 1.5em;
    stroke: #0d6efd;
}
.path {
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite
}
.ms-n5 {
  margin-left: -40px;
}

@media (min-width: 992px) {
  .row-cols-lg-8>* {
    width:12.5%
  }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124
    }
}

@media (max-width: 768px) {
  h5.s-small {
    font-size:1rem;
  }
  p.s-small {
    font-size:0.9em;
  }
  
}

/* KidsCreator */
html:not(.soundolino), 
body:not(.soundolino) {
  font-family: 'Encode Sans Condensed', sans-serif;
  background:#eee;
}
.stdf {
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.kchead td:nth-child(1),
.kchead td:nth-child(4) {
  width:20%;
}
.kidscreator input {
  font-size:1.5rem;
  border-radius:8px;
  border: 2px solid #ccc;
  padding: 0px 8px;
  width: 100%;
}
.kidscreator button {
  border-radius:8px !important;
}
@media only screen and (max-width: 600px) {
  .kchead td:nth-child(1),
  .kchead td:nth-child(4) {
    width:7%;
  }
}