@font-face

{

    font-family: 'ACF';

    src:url('assets/fonts/AC-FatCondensed_Unicode.woff'),

        url('assets/fonts/AC-FatCondensed_Unicode.ttf');

}

body{font-family: 'ACF', sans-serif;margin:0px; background-color:#F6FBFF;}
header{background-color:white;}
#menu, #burger-menu

{

    position:sticky;

    top:0px;

    z-index:10;

}

#burger-menu

{

    display:none;

    background-color:#FFF;

    color:#113366;

    height:65px;

    line-height:50px;

    border-bottom:1px solid #113366;

    border-top:15px solid #113366;

    animation: burger-menu-animation 5s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

}



.logo img {width:30%;height:100%;transition: width 0.1s;}

a:hover {text-decoration: none;}

.pill

{

    font-family: 'ACF', sans-serif;

    width:100%;

    max-height:54px;

    display:inline-block;

    padding:15px 35px;

    margin:5px;

    border-radius:40px;

    text-align: center;

    font-size: 0.8rem;

    transition: background-color 0.1s, color 0.1s, font-size 0.1s;

}

.pill:hover

{

    font-size:0.9rem;

    color: #0064C1;

    background-color:White;

    border:2px solid #0064C1;

}

.pill-button

{

    position:relative;

    color:White;

    font-family: 'ACF', sans-serif;

    width:36%;

    background-color:#E32213;

    /*max-height:54px;*/

    display:block;

    padding:15px 35px;

    margin: 0 auto;

    margin-top:-25px;

    border-radius:40px;

    text-align: center;

    transition: background-color 0.1s, color 0.1s, font-size 0.1s;

}

/*Background colors*/

.white

{

    background-color:#F3FDFE;

    color: #113366 !important;

}
.darkgreen
{
    background-color:#00843E;
    color:White;
}
.darkgreen h5, .darkgreen p 
{
    color:#00843E !important;
}
.darkblue
{
    background-color:#1586CC;
    color:White;
}
.darkblue h5, .darkblue p
{
    color:#1586cc !important;
}
.darkOrange
{
    background-color:#FAB900;
    color:White;
}
.darkOrange h5, .darkOrange p
{
    color:#FAB900 !important;
}

.skyblue
{

    background-color:#00A6E4;

    color: #FFFFFF;

}

.skyblue h5, .skyblue p

{

    color:#00A6E4 !important;

}

.darkblue

{

    background-color:#0033A1;

    color: #FFFFFF;

}

.cherry

{

    background-color:#E20C52;

    color: #FFFFFF;

}

.cherry h5, .cherry p

{

    color:#E20C52 !important;

}

.orange

{

    background-color:#F6A505;

    color: #FFFFFF;

}

.orange h5, .orange p

{

    color:#F6A505 !important;

}

.darkorange

{

    background-color:#E64210;

    color: #FFFFFF;

}

.purple

{

    background-color:#BB1B8D;

    color: #FFFFFF;

}

.darkpurple

{

    background-color:#9D4C96;

    color: #FFFFFF;

}

.magenta
{
    background-color: #E10C51;
    color: white;
}

.limegreen

{

    background-color:#86BC25;

    color: #FFFFFF;

}

.skySection

{

    background-color: #9AD6F2;

    /*padding:50px 0;*/

    padding-top:30px;
    padding-left:0;
    padding-right:0;

}

.skySection h2, .skySection h3

{

    color:#0033A1;

    transition:font-size 0.2s;

    font-size:2.5rem;

}

.skySection p

{

    color:white;

}

.skySection .card-body p

{

    text-align: center;

}

.skySection .card-body h5

{

    text-align: center;

    font-size:2rem;

}



.skySection .card

{
    

    border-radius: 0px 0px 0 0;

    transition:background-color 0.2s, box-shadow 0.2s;

    height:fit-content;

}

.skySection .card img.card-img-top

{

    /*padding:25px;*/

    padding-top:15px;

    margin-bottom:-2px;

}
.card.transparent {
	background:transparent !important;
	border:0 !important;
}
.skySection .card.transparent:hover {
	box-shadow:none;
	cursor: default;
}
.card.transparent .card-body {
	background: transparent !important;
    }
.skySection .card:hover

{

    box-shadow: 0px 0px 15px #000;

}
.skySection .card.darkgreen:hover
{
    background-color: #109E4D;
}
.skySection .card.darkblue:hover
{
    background-color:#3BA9E0;
}
.skySection .card.darkOrange:hover
{
    background-color:#FCCB4F;
}
.skySection .card.skyblue:hover

{

    background-color: #10C6F4;

}

.skySection .card.orange:hover

{

    background-color: #F9C734;

}

.skySection .card.cherry:hover

{

    background-color: #F21C62;

}

.skySection .card-text

{

    /*max-width:238px;*/



    display:none;

}

/*----------FOOTER-----------*/

footer .row

{

    background-color: #822EE4;

    color: #FFFFFF;

    display:flex;

}

footer .row ul {margin-bottom:0px;}

footer .row li

{

    display: inline-flex;

    list-style: none;

    padding:15px 35px;

    transition:background-color 0.1s;

    color: #FFFFFF;

}

footer .row li:hover

{

    background-color: white;

    color:#822EE4;

}

footer .row li a

{

    color:inherit;

}

footer .row li a:hover

{

    text-decoration: none;

    color:inherit;

}

/*------------SECTIONS----------------*/



#play-with-us h3, #talent-show h3, #download-book h3

{

    color:white !important;

}

#surfing

{

    background-color:White;

    padding:0;

    padding-bottom:50px;

    overflow: hidden;

}

/* Utility Classes */

.pad-35-h

{

    padding:10px 35px;

    box-sizing: content-box;

}

.pad-65-h

{

    padding:10px 65px;

    box-sizing: content-box;

}
@media screen and (max-width:768px)
{
    .pad-65-h
    {
        padding:10px 0;
    }
}
.pad-50

{

    padding:50px;

}

.img-responsive

{

    width:100%;

    /*height:auto !important;*/
    height: 100%;

}
.img-responsive-surfing
{
   width:100%;
   height:auto;
}
span.purpleAccent

{

    color:#BB1B8D;

}

.lightboxOverlay

{

    background-color:white;

    opacity: 1.0;

}

.hidden

{

    display:none;

}

.carousel-inner
{
    overflow:hidden !important;
}
.card-title {padding-top:0.75rem !important;}
.card-body {padding:0px !important; padding-bottom:1.25rem !important;;}
#remi-footer.card-separator
{
    display:block;
    width:100%;
    height:61px;
    margin-bottom:-2px;
    background-position: center;
    background:url("images/characters/CARDS/3d/remi_footer.png");
    background-repeat: round;
}
#pop-footer.card-separator
{
    display:block;
    width:100%;
    height:61px;
    margin-bottom:-2px;
    background-position: center;
    background:url("images/characters/CARDS/3d/pop_footer.png");
    background-repeat: round;
}
#booky-footer.card-separator
{
    display:block;
    width:100%;
    height:61px;
    margin-bottom:-2px;
    background-position: center;
    background:url("images/characters/CARDS/3d/booky_footer.png");
    background-repeat: round;
}
#hiphop-footer.card-separator
{
    display:block;
    width:100%;
    height:61px;
    margin-bottom:-2px;
    background-position: center;
    background:url("images/characters/CARDS/3d/hiphop_footer.png");
    background-repeat: round;
}
#dino-footer.card-separator
{
    display:block;
    width:100%;
    height:61px;
    margin-bottom:-2px;
    background-position: center;
    background:url("images/characters/CARDS/3d/dino_footer.png");
    background-repeat: round;
}
#snack-footer.card-separator
{
    display:block;
    width:100%;
    height:61px;
    margin-bottom:-2px;
    background-position: center;
    background:url("images/characters/CARDS/3d/snack_footer.png");
    background-repeat: round;
}
#splash-footer.card-separator
{
    display:block;
    width:100%;
    height:61px;
    margin-bottom:-2px;
    background-position: center;
    background:url("images/characters/CARDS/3d/splash_footer.png");
    background-repeat: round;
}
.loading-indicator
{
    background-color:white;
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:35px;
    border-radius:50px;
    display:none;
    justify-content: center;
    align-items: center;
    max-height: 100px;
    text-align: center;
}
.loading-indicator.flex
{
    display:flex;
}
.loading-indicator img
{
    width:150px;
}
.carousel-item
{
    box-sizing: border-box;
    padding: 50px;
}
#character-carousel
{
    display:Flex;
    align-items: center;
}
#fridges img {
	margin: 0 auto;
	max-width: 100%;
	width:100%;
}

.signature {
	text-align: center;
    margin: 40px auto;
    width: fit-content;
    text-align: center;
}
.signature img {
	width: 200px;
	max-width: 100%;
	margin: 0 auto;
}