@charset "utf-8";

/* XSmall CSS <576px / Default CSS */

* {
    box-sizing: border-box;
}

body>div {
    width: 100%;
    min-height: 94vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top;
    display: flex;
    flex-direction: column;
}

.text-color1 {
    color: #fae218;
}

.text-color2 {
    color: #1d682a;
}

.text-color3 {
    color: #643f1a;
}

.text-color4 {
    color: #aeca7d;
}

.text-color5 {
    color: #ff6501;
}

.bg-color1 {
    background-color: #ffffc3;
}

.bg-color2 {
    background-color: #1d682a;
}

.bg-color3 {
    background-color: #643f1a;
}

.bg-color4 {
    background-color: #ff6501;
}

.font1 {
    font-family: "Luckiest Guy", sans-serif;
    letter-spacing: 2px;
}

.font2 {
    font-family: "Bakbak One", sans-serif;
}



/* -------------------- Header CSS -------------------- */

.container {
    max-width: 1350px;
}

.social-media-icons>a>img {
    width: 40px;
    padding: 20px 2px 0px 0px;
}

/* Logo */
#header .logo {
    z-index: 100;
}

#header .logo>img {
    width: 190px;
    margin-top: 40px;
    margin-left: -10px;
}

#header .logo>img:hover {
    transform: scale(1.1);
    transition: .1s all ease-in-out;
}

#header nav {
    position: absolute;
    right: 0%;
    top: 0.5%;
}

/* Nav buttons */
#header #mobileNavbar button.navbar-toggler>.navbar-toggler-icon {
    background-image: none;
    width: 50px;
    height: 50px;
}

#header #mobileCollapseNavbar {
    transition: 0.8s;
}

#header #mobileCollapseNavbar a {
    display: flex;
    width: max-content;
    margin: 0 auto;
}

#header #mobileCollapseNavbar a>img {
    width: 140px;
    margin: 0px auto 10px auto;
}



/* -------------------- Footer CSS -------------------- */

#footer>div {
    background-size: cover;
    position: relative;
}

#footer>div>img {
    width: 120px;
    padding: 30px 0px 15px 0px;
}

#footer>div>div>a {
    color: #fae218;
    font-weight: lighter;
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0px 10px;
    line-height: 1;
}



/* -------------------- Main Content CSS -------------------- */

/* Home */
#home-content .characters {
    position: relative;
    width: 100vw;
    height: 46vw;
    max-width: 1350px;
    max-height: 625px;
}

#home-content .character {
    position: absolute;
}

#home-content .character:hover {
    transform: scale(1.1);
    transition: .1s all ease-in-out;
}

#home-content .character>div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#home-content .character.leo {
    width: 24%;
    height: 80%;
    bottom: 0;
    z-index: 5;
}

#home-content .character.katie {
    width: 15%;
    height: 52%;
    left: 29%;
    top: 41%;
    z-index: 4;
}

#home-content .character.hero {
    width: 12%;
    height: 24%;
    left: 56%;
    bottom: 8%;
    z-index: 4;
}

#home-content .character.farah {
    width: 14%;
    height: 60%;
    left: 17%;
    top: 29%;
    z-index: 3;
}

#home-content .character.jane {
    width: 17%;
    height: 60%;
    left: 60%;
    bottom: 12%;
    z-index: 3;
}

#home-content .character.peyo {
    width: 14%;
    height: 46%;
    left: 6%;
    top: 36%;
    z-index: 2;
}

#home-content .character.zumi {
    width: 13%;
    height: 25%;
    left: 67%;
    bottom: 16%;
    z-index: 2;
}

#home-content .character.kyle {
    width: 15%;
    height: 48%;
    left: 77%;
    bottom: 21%;
    z-index: 1;
}

#home-content .character.kai {
    width: 16%;
    height: 43%;
    left: 30%;
    top: -2%;
    z-index: 1;
}

#home-content .character.pico {
    width: 7%;
    height: 12%;
    left: 13%;
    top: 18%;
    z-index: 1;
}

#home-content .character.rocky {
    width: 25%;
    height: 30%;
    left: 70%;
    top: 5%;
    z-index: 1;
}



/* Parent */
#parent-content .img-box {
    width: 75%;
}

#parent-content img {
    z-index: 1;
}

#parent-content .content-box {
    height: max-content;
    margin: -30px 25px 0px 25px !important;
    background-color: #ffffc3;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
    border-radius: 40px;
    padding: 30px 30px 20px 30px;
}

#parent-content .content-box .title {
    color: #ff6501;
    font-size: 30px;
    padding: 15px 0px;
    text-align: left;
    line-height: 100%;
}

#parent-content .content-box .paragraph {
    color: #1d682a;
    text-align: left;
    font-size: 13px;
    line-height: 110%;
}



/* The Rangers */
#rangers-content .main-content {
    width: 95vw;
    max-width: 1340px;
    margin: 0 auto;
}

#rangers-content .char-img {
    z-index: 10;
}

#rangers-content img {
    width: 90%;
}

#rangers-content .leo img {
    width: 95%;
}

#rangers-content .katie img {
    width: 65%;
}

#rangers-content .hero img {
    width: 65%;
}

#rangers-content .rocky img {
    width: 80%;
}

#rangers-content .zari img {
    width: 60%;
}

#rangers-content .kyle img {
    width: 80%;
}

#rangers-content .jane img {
    width: 80%;
}

#rangers-content .kai img {
    width: 60%;
}

#rangers-content .farah img {
    width: 70%;
}

#rangers-content .peyo img {
    width: 80%;
}

#rangers-content .char-name {
    color: white;
    font-family: "Luckiest Guy", sans-serif;
    font-weight: 100;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

#rangers-content .content-box {
    position: relative;
}

#rangers-content .content-box:nth-child(even) {
    margin-left: -15px;
    margin-right: 15px;
}

#rangers-content .content-box:nth-child(odd) {
    margin-left: 20px;
    margin-right: -20px;
}

#rangers-content .desc-box {
    font-family: "Bakbak One", sans-serif;
    font-weight: 900;
    position: absolute;
    top: 0;
    bottom: 0;
    font-size: 0.6rem;
}

#rangers-content .content-box:nth-child(even) .desc-box {
    padding: 0px 30px 0 15px;
}

#rangers-content .content-box:nth-child(odd) .desc-box {
    padding: 0px 8px 0 35px;
}

#rangers-content .desc-box>div>p {
    display: inline;
    color: white;
}



/* Watch */
#watch-content .video {
    position: relative;
    margin: 0px 10px;
}

#watch-content .video>iframe {
    border-radius: 6px;
    position: absolute;
    width: 92%;
    height: 85%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 3px;
    margin: auto;
}

#watch-content .episodes {
    margin: 0px 40px;
}

#watch-content .episode {
    position: relative;
    min-width: 230px;
    padding: 7px;
}

#watch-content .episode .content-box {
    position: absolute;
    width: 90%;
    left: 0;
    right: 0;
    top: 12px;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
}

#watch-content .episode:hover {
    transform: scale(1.05);
    transition: .1s all ease-in-out;
    cursor: pointer;
}

#watch-content .episode>div>img {
    height: 56%;
    object-fit: cover;
    border-radius: 12px 12px 0px 0px;
}

#watch-content .episode .episode-num {
    font-size: 18px;
    text-align: center;
    line-height: 25px;
}

#watch-content .episode small {
    letter-spacing: 1px;
}

#watch-content .episode .content-box>div {
    position: absolute;
    bottom: 10%;
    top: 58%;
    display: flex;
    align-items: center;
}

#watch-content #watchModal .modal-content {
    border-radius: 20px;
}

#watch-content #watchModal .modal-body>img {
    border-radius: 10px 10px 0px 0px;
}

#watch-content #watchModal button {
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 10;
    border-radius: 50px;
    padding: 0px 8px 5px 8px;
    background-color: #3f250b;
}



/* Fun */
#fun-content .carousel-section {
    position: relative;
    width: 90%;
}

#fun-content .carousel-section>.carousel {
    position: absolute;
    width: 92.7%;
    height: 85%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 7px;
    margin: auto;
}

#fun-content .carousel-section .carousel-inner,
#fun-content .carousel-section .carousel-inner img {
    border-radius: 10px;
}

#fun-content .carousel .carousel-control-prev,
#fun-content .carousel .carousel-control-next {
    width: 10%;
    height: fit-content;
    margin: auto;
}

#fun-content .carousel .dot {
    height: 13px;
    width: 13px;
    background-color: #207845;
    border-radius: 50%;
    display: inline-block;
    margin: 0 7px;
    cursor: pointer;
}

#fun-content .carousel .dot.active {
    background-color: rgb(255, 255, 255);
}

#fun-content .title-bar {
    color: #643f1a;
    position: relative;
    width: 90vw;
    padding: 0px 0px;
}

#fun-content .title-bar>p {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding-top: 10px;
    font-size: 18px;
}

#fun-content a {
    position: relative;
    max-width: 300px;
    margin: 5px 0px;
}

#fun-content a:hover {
    transform: scale(1.05);
    transition: .1s all ease-in-out;
}

#fun-content a>.download-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 6px;
    width: 82%;
    height: 86%;
    object-fit: cover;
}

#fun-content .email-subs-section>img {
    width: 50%;
    position: relative;
    z-index: 10;
}

#fun-content .email-subs-section>div:not(.signup-bar) {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 40px 40px 30px 40px;
    border-radius: 40px;
    box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.5);
}

#fun-content .email-subs-section .signup-bar {
    position: relative;
    padding: 0;
}

#fun-content .email-subs-section .signup-bar>div {
    position: absolute;
    top: 0;
}

#fun-content .email-subs-section .signup-bar input {
    background-color: unset;
    border: 0;
    color: white;
    font-size: 15px;
    letter-spacing: 1px;
}

#fun-content .email-subs-section .signup-bar input::placeholder {
    color: #d76d29;
}

#fun-content .email-subs-section .signup-bar input:focus {
    outline: none;
}

#fun-content .email-subs-section input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px #a4541d inset;
    -webkit-text-fill-color: white;
}

#fun-content .email-subs-section input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px #a4541d inset;
    -webkit-text-fill-color: white;
}

#fun-content .email-subs-section .signup-bar button {
    background-color: unset;
    border: 0;
}

.popover {
    min-height: unset;
    width: auto;
}



/* Privacy Policy */
/* Terms of Use */
#policy-content .content-box,
#terms-content .content-box {
    height: max-content;
    margin: 0px 25px !important;
    background-color: #ffffc3;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
    border-radius: 40px;
    padding: 20px 30px 40px 30px;
}

#policy-content .content-box .title,
#terms-content .content-box .title {
    color: #ff6501;
    font-size: 30px;
    padding: 15px 0px;
    text-align: left;
    line-height: 100%;
    text-transform: uppercase;
}

#policy-content .content-box .paragraph,
#terms-content .content-box .paragraph {
    color: #1d682a;
    text-align: left;
    font-size: 12px;
    line-height: 110%;
}



/* Contact */
#contact-content>div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    margin: 20px 10px;
    border-radius: 40px;
    box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.5);
}

#contact-content .email-box {
    width: 100%;
    border-radius: 20px;
    padding: 10px 0px;
    font-size: 20px;
}