/* CSS HEX Illustration pallette
            --dark-violet:#4d2c3a;
            --violet:#984d6a;
            --blue:#4d4ea1;
            --blue-green:#43aa91;
            --tan:#ad6e36;
            --light-blue:#90d5ea;
            --green:#6fa370;
           */
            
			body {
				background-color: #fff;
                font-family:'Roboto', sans-serif;
                color:#202124;
                margin:0;
                padding:0;
			}

            p {
                line-height:1.5;
                margin:.8rem auto;
            }
li {
    line-height:1.5;
    margin:.8rem auto;
}
            h1, h2 {
                font-family: 'Roboto Condensed', sans-serif;
            }
h2 {
    font-size:1.9rem;
    margin:.4rem auto .8rem;
}

a.btn, button.btn {
    padding:10px 20px;
    background:#333;
    border-radius:20px;
    border:0;
    color:white;
    text-decoration:none;
    margin:auto;
}

.button-container {
    display:flex;
    flex-flow:row;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items:center;
}
.button-container .btn {
    margin:0 10px 0 0;
}
button.btn-primary, a.btn-primary {
    background:#643588;
}
button.btn-primary:hover, a.btn-primary:hover {
    background:#440568;
}
hr {
    border-top:4px dotted #643588;;
    width:100%;
}
            .navbar {
                 background: #9D94D6; 
                display:flex;
                width:100%;
                flex-flow:row;
                height:40px;
                justify-content: flex-end;
                position:relative;
                
            }
            ul.nav {
                display:flex;
                flex-flow:row;
                width:auto;
                margin:0 auto 0 auto;
                padding:0;
                height:100%;
            }
            ul.nav li.nav-link {
                display:flex;    
                height:100%;
                margin:0 5px;
                padding:0;
                z-index:2;
            }
            ul.nav li.nav-link.current-link {
                font-weight:bold;
                
            }
ul.nav li.nav-link.align-left {
   left:0;
    position:absolute;
}
            ul.nav li.nav-link a {
                text-decoration:none;
                display:inline-flex;
                height:calc(100% - 2px);
                padding:0 10px;
                justify-content: center;
                align-items: center;
                line-height:1;
                color:#202124;
                text-transform:uppercase;
                border:1px solid transparent;
                border-radius:10px;
                letter-spacing: .03rem;
            }
            ul.nav li.nav-link a:hover {
                text-decoration: underline;
                
            }
			#content {
                width:100%;
                flex-flow:column;
                display:flex;
                justify-content: center;
                align-items: center;
			}
            .container {
                display:flex;
                flex-flow:row;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                margin:auto;          
                width:100%;
				max-width: 960px;
            }

            #hero {
                background-color:#9D94D6;
                width:100%;
                position:relative;
            }
            
            #hero .container {
                position:relative;
            }
#hero.secondary-page .container {
    min-height:110px;
}
#main-text .container {
    align-items: flex-start;   
}
#main-text>.container>div {
    padding-top:4%;
}

            #title {
                width:96%;
                padding:2%;
                margin:auto;
                    display:flex;
                    flex-flow:column;
                position:absolute;
                bottom:-18%;
                z-index:1;
            }
             
.secondary-page #title{
    bottom:-45%;
}
            #title .image-replace {
                font-size:.1rem;
                padding-top:9%;
                width:40%;
                background: transparent url('images/FaM_color_horizontal.png') no-repeat;
                background-size:100%;
                text-indent: -1000px;
                font-weight:normal;
                margin:auto;
            }
            .secondary-page #title .image-replace {
                font-size:.1rem;
                padding-top:25%;
                width:25%;
                background: transparent url('images/fam_character_logo.png') no-repeat;
                background-size:100%;
                background-position: bottom center;
                text-indent: -1000px;
                font-weight:normal;
                margin:auto;
            }
            #title h1 {}
            #title a.anchor-link {
                display:flex;
                flex-flow:row;
                text-decoration:none;
                color:#3d3e51;
                align-items:center;
                font-size:20px;
                text-transform:uppercase;
            }
            #title a.anchor-link span {
                margin-left:6px;
                background:#4B54A2; color:white;
                border-radius:50%;
                font-size:26px;
            }
            
            #characters-container {
                padding-top:30%;
                width:100%;
                position:relative;
                overflow:hidden;
            }

            .characters-background {
                position:absolute;
                height:auto;
                bottom:0;
                width:12%;
                animation:move_up .5s ease-in-out;
            }
            @keyframes move_up {
                0%{
                    transform:translate(0, 100px);
                }    
                
            }
            
            #Mon_05.characters-background {
                bottom:-1%;
                width:22%;
                left:calc(50% - 11%);
            }
            
            #Girl_04.characters-background{
                bottom:-10%;
                left:calc(50% - 6%);
            }
            #Girl_03.characters-background{
                width:12.5%;
                bottom:-16%;
                left:calc(37% - 6%);
                transform:rotate(4deg);
            }
            #Boy_03.characters-background{
                width:17%;
                bottom:-5%;
                left:calc(26% - 8.5%);
                transform:rotate(33deg);
            }
            #Boy_02.characters-background{
                width:12%;
                bottom:-13%;
                left:calc(76% - 6%);
                transform:rotate(-10deg);
            }
            #Girl_01.characters-background{
                width:20%;
                bottom:-5%;
                left:calc(63% - 10%);
                transform:rotate(-33deg);
            }
            #Mon_01.characters-background{
                width:16%;
                bottom:16%;
                left:calc(31% - 8%);
                transform:rotate(22deg);
            }
#Mon_02.characters-background{
                width:23%;
                bottom:-5%;
                left:calc(69% - 11%);
                transform:rotate(-22deg);
            }
.col_8 {
    width:66%;
}
.col_4 {
    width:34%;
    position:relative;
    overflow-y:hidden;
    display:flex;
    margin-top:0;
}
.rounded-rect-bg, .rounded-rect-bg-2, .inside-rect-bg {
    position:relative;
    overflow:hidden;
    width:100%;
}

.rounded-rect-bg .container, .rounded-rect-bg-2 .container,  .inside-rect-bg .container {
    position:relative;
    z-index:1;
}
.rounded-rect-bg:before {
    background:#C5558C;
    display:block;
    content:'';
    border-radius:0 0 0 30px ;
    width:30%;
    position:absolute;
    top:0;
    bottom:10px;
    right:0;
    z-index:0;
}

.rounded-rect-bg-2:before {
    background:#8FD7BD;
    display:block;
    content:'';
    border-radius:30px 0 0 30px ;
    width:30%;
    padding-top:30%;
    position:absolute;
    top:5%;
    right:0;
    z-index:0;
}

.inside-rect-bg:before {
    background:#8FD7BD;
    display:block;
    content:'';
    width:100%;
    position:absolute;
    top:25px;
    bottom:25px;
    z-index:0;
}

.rounded-rect-bg-2 .col_4 {
    align-items: center;
}
.photo-image, .photo-image-horizontal {
 border-radius:20px;
    border:5px solid white;
    max-width:300px;
    width:80%;
    margin:20px auto;
}
.photo-image-horizontal { 
margin:25% auto 5%;
width:90%;
    max-width:400px;
}
article {
    margin-bottom:5%;
}
.rotate-right {
    transform:rotate(2deg);
}

.rotate-left {
    transform:rotate(-2deg); 
}

article h1 {
    font-family:'Roboto Condensed', sans-serif;
  font-size:2rem;
}
article h2 {
  font-size:1.5rem;
    font-weight:normal;
}
            #app-placards {
                margin:auto;
                width:100%;
            }

.app-placard {
    margin:10px auto 50px;
}
.app-trailer-container {
    width:100%;
    padding-top:46.15%;
    background:#ddd;
    margin-bottom:10px;
    position:relative;
}
.app-trailer-container video {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
.app-info-container {
    display:flex;
    width:100%;
    flex-flow:row;
}

.app-info {
    display:flex;
    flex-flow:row;
    
    width:33%;
}
.app-description {
    width:66%;
}
.app-icon-container {
    margin-right:10px;
}
.app-title {
    font-size:1.5rem;
    margin:0 auto 10px;
}
.app-icon-container img {
    max-width:100px;
}
.store-badge img{
    max-width:150px;
}

     
            footer {
                width:100%;
            }
.footer-text-container {
    font-size:15px;
    background:#603284;
    color:white;
    font-weight:bold;
    padding:1% 0;
}
.footer-text-container .container {align-items: flex-start;}
.footer-text-container a {
    color:white;
}
            .logo-container {
                background:white;
                display:flex;
                flex-wrap: wrap;
                padding-bottom:40px;
            }
            .logo-container img{
                width:calc(40% - 10px);
                height:auto;
                margin:5px auto;
                padding:5px;
            }
.logo-container img.narrow-logo {
    width:calc(21% - 10px);
}

.logo-container img.wide-logo {
    width:calc(50% - 10px);
}

.social-media-links {
    list-style-type: none;
    display:flex;
    flex-flow: row;
    justify-content: space-around;
    width:80%;
    margin:10px 10%;
    padding:0;
}      
.social-media-link  {
    margin:auto;
}
.social-media-link a {
    display:block;
    height:40px;
    width:40px;
    
}


            
            @media (max-width:720px) {
                
                .container {
                    width:96%;
                    margin:auto;
                    flex-wrap: wrap;
                    flex-flow: wrap;
                }
                
                .col_8 {
                    width:100%;
                    flex-grow:0;
                }
                .col_4 {
                    width:100%;
                    flex-grow:0;
                }
                
                    

                #hero.secondary-page .container {
                    min-height:70px;
                }
                #main-text>.container>div {
                    
                }
                

                .secondary-page #title {
                    bottom:-65%;
                }
                .secondary-page #title .image-replace {
                    width:32%;
                    padding-top:30%;
                }
                .rounded-rect-bg, .rounded-rect-bg-2 {
                    padding:0;
                    margin:auto;
                }
                .rounded-rect-bg img, .rounded-rect-bg-2 img {
                    margin:0 auto 30px;
                }
                .rounded-rect-bg:before, .rounded-rect-bg-2:before {
                    width:100%;
                    top:auto;
                    bottom:10px;
                    left:0;
                    border-radius:0;
                    z-index:0;
                    right:auto;
                    height:270px;
                    padding-top:0;
                }
                .photo-image {
                    width:50%
                }
                .app-info-container {
                    flex-flow:wrap;
                }
                .app-description, .app-info {
                    width:100%;
                }
            }