/** MAIN CSS STARTS HERE **/

html { overflow-x: hidden; }

body {
    background: url('../img/bg.png') top left repeat,
                #ffd6d6;
    color: #f26d9e;
    margin: 0px;
    padding: 0px;
    font-family: helvetica, arial, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

::selection { background: rgba(255,213,41,0.5); }

a { outline: none; }
img { width: 100%; }

.wrap { width: 100%; }

/** NAV STYLING **/

.sticky { background: #f598bb; border-bottom: solid 2px #ed6793; }

nav { position: relative; max-width: 1200px; margin: 10px auto; }
nav ul { list-style-type: none; text-align: right; padding: 0; }
nav ul li { display: inline-block; margin: 0 0.5em; }
nav ul li:last-of-type { margin: 0 0; }
nav ul li a { 
    display: inline-block;
    padding: 0.5em 1.5em;
    background: #ed6793;
    border-radius: 6px;
    font-size: 1.2em;
    text-decoration: none;
    color: white;
    transform: translateY(0);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
nav ul li a:hover, nav ul li a:focus { background: #de5985; text-decoration: none; color: white; }
nav ul li a:active { background: #cf4f79; }

#featuredLink { background: #00aeef; }
#featuredLink:hover, #featuredLink:focus { background: #13b8f6; }
#featuredLink:active { background: #00a4e1; }

#cashprizeLink > a { background-color: #fbd834; color: #444; }
#cashprizeLink > a:hover,
#cashprizeLink > a:focus { background-color: #fde15e; }
#cashprizeLink > a:active { background-color: #e4bf10; }

/*
#featuredLink,
#appstoreIcon { position: relative; }

#featuredLink:hover::before,
#appstoreIcon:hover::before {
    position: absolute;
    content: "Coming Soon!";
    bottom: -35px;
    right: 20%;
    padding: 6px 14px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    background: #00aeef;
    border-radius: 6px;
    z-index: 10;
}
#appstoreIcon:hover::before { bottom: -55%; right: 20%; }
*/

/** NAV STYLING END **/

/** CONTENT STYLING **/

.content {
    position: relative;
    max-width: 1200px; 
    margin: 1% auto;
    padding: 0 10px;
}

#main {
    position: relative;
    background-image: linear-gradient(top, rgba(245,152,187,0.5) 47%, rgba(245,152,187,0) 74%);
    background-image: -o-linear-gradient(top, rgba(245,152,187,0.5) 47%, rgba(245,152,187,0) 74%);
    background-image: -moz-linear-gradient(top, rgba(245,152,187,0.5) 47%, rgba(245,152,187,0) 74%);
    background-image: -webkit-linear-gradient(top, rgba(245,152,187,0.5) 47%, rgba(245,152,187,0) 74%);
    background-image: -ms-linear-gradient(top, rgba(245,152,187,0.5) 47%, rgba(245,152,187,0) 74%);

    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.47, rgba(245,152,187,0.5)),
        color-stop(0.74, rgba(245,152,187,0))
    );
}

.animation { position: relative; }

/****** ANIMATIONS ******/

/*@-webkit-keyframes pastry-fall {
    0%   { opacity: 1.0; filter: alpha(opacity=100); top: -10%; }
    10%  { opacity: 0.9; filter: alpha(opacity=90);  top: 10%;  }
    20%  { opacity: 0.8; filter: alpha(opacity=80);  top: 20%;  }
    30%  { opacity: 0.7; filter: alpha(opacity=70);  top: 30%;  }
    40%  { opacity: 0.6; filter: alpha(opacity=60);  top: 40%;  }
    50%  { opacity: 0.5; filter: alpha(opacity=50);  top: 50%;  }
    60%  { opacity: 0.4; filter: alpha(opacity=40);  top: 60%;  }
    70%  { opacity: 0.3; filter: alpha(opacity=30);  top: 70%;  }
    80%  { opacity: 0.2; filter: alpha(opacity=20);  top: 80%;  }
    90%  { opacity: 0.1; filter: alpha(opacity=10);  top: 90%;  }
    100% { opacity: 0.0; filter: alpha(opacity=0);   top: 100%; }
}
@-moz-keyframes pastry-fall {
    0%   { opacity: 1.0; filter: alpha(opacity=100); top: -10%; }
    10%  { opacity: 0.9; filter: alpha(opacity=90);  top: 10%;  }
    20%  { opacity: 0.8; filter: alpha(opacity=80);  top: 20%;  }
    30%  { opacity: 0.7; filter: alpha(opacity=70);  top: 30%;  }
    40%  { opacity: 0.6; filter: alpha(opacity=60);  top: 40%;  }
    50%  { opacity: 0.5; filter: alpha(opacity=50);  top: 50%;  }
    60%  { opacity: 0.4; filter: alpha(opacity=40);  top: 60%;  }
    70%  { opacity: 0.3; filter: alpha(opacity=30);  top: 70%;  }
    80%  { opacity: 0.2; filter: alpha(opacity=20);  top: 80%;  }
    90%  { opacity: 0.1; filter: alpha(opacity=10);  top: 90%;  }
    100% { opacity: 0.0; filter: alpha(opacity=0);   top: 100%; }
}
@-o-keyframes pastry-fall {
    0%   { opacity: 1.0; filter: alpha(opacity=100); top: -10%; }
    10%  { opacity: 0.9; filter: alpha(opacity=90);  top: 10%;  }
    20%  { opacity: 0.8; filter: alpha(opacity=80);  top: 20%;  }
    30%  { opacity: 0.7; filter: alpha(opacity=70);  top: 30%;  }
    40%  { opacity: 0.6; filter: alpha(opacity=60);  top: 40%;  }
    50%  { opacity: 0.5; filter: alpha(opacity=50);  top: 50%;  }
    60%  { opacity: 0.4; filter: alpha(opacity=40);  top: 60%;  }
    70%  { opacity: 0.3; filter: alpha(opacity=30);  top: 70%;  }
    80%  { opacity: 0.2; filter: alpha(opacity=20);  top: 80%;  }
    90%  { opacity: 0.1; filter: alpha(opacity=10);  top: 90%;  }
    100% { opacity: 0.0; filter: alpha(opacity=0);   top: 100%; }
}
@keyframes pastry-fall  {
    0%   { opacity: 1.0; filter: alpha(opacity=100); top: -10%; }
    10%  { opacity: 0.9; filter: alpha(opacity=90);  top: 10%;  }
    20%  { opacity: 0.8; filter: alpha(opacity=80);  top: 20%;  }
    30%  { opacity: 0.7; filter: alpha(opacity=70);  top: 30%;  }
    40%  { opacity: 0.6; filter: alpha(opacity=60);  top: 40%;  }
    50%  { opacity: 0.5; filter: alpha(opacity=50);  top: 50%;  }
    60%  { opacity: 0.4; filter: alpha(opacity=40);  top: 60%;  }
    70%  { opacity: 0.3; filter: alpha(opacity=30);  top: 70%;  }
    80%  { opacity: 0.2; filter: alpha(opacity=20);  top: 80%;  }
    90%  { opacity: 0.1; filter: alpha(opacity=10);  top: 90%;  }
    100% { opacity: 0.0; filter: alpha(opacity=0);   top: 100%; }
}

#cookie,
#pie,
#donut,
#cupcake {
    position: absolute;
    top: -10%;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-backface-visibility: hidden;
}
#cookie {
    left: 20%;
    width: 57px;
    height: 63px;
    background: url('../img/cookie.png') center center no-repeat;
    -webkit-animation: pastry-fall 2s 30s linear;
    -moz-animation: pastry-fall 2s 30s linear;
    -o-animation: pastry-fall 2s 30s linear;
    animation: pastry-fall 2s 30s linear;
}
#pie {
    left: 45%;
    width: 57px;
    height: 64px;
    background: url('../img/pie.png') center center no-repeat;
    -webkit-animation: pastry-fall 2s 10s linear;
    -moz-animation: pastry-fall 2s 10s linear;
    -o-animation: pastry-fall 2s 10s linear;
    animation: pastry-fall 2s 10s linear;
}
#donut {
    left: 65%;
    width: 55px;
    height: 66px;
    background: url('../img/donut.png') center center no-repeat;
    -webkit-animation: pastry-fall 2s 20s linear;
    -moz-animation: pastry-fall 2s 20s linear;
    -o-animation: pastry-fall 2s 20s linear;
    animation: pastry-fall 2s 20s linear;
}
#cupcake {
    left: 80%;
    width: 52px;
    height: 66px;
    background: url('../img/cupcake.png') center center no-repeat;
    -webkit-animation: pastry-fall 2s 40s linear;
    -moz-animation: pastry-fall 2s 40s linear;
    -o-animation: pastry-fall 2s 40s linear;
    animation: pastry-fall 2s 40s linear;
}
*/

/******* ANIMATIONS END *******/

#logo img { margin: 18% auto; }

#video { position: relative; margin-top: 4%; }
#video iframe, #myCarousel {
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#gameLinkPics { margin: 15px auto; text-align: center; }
#facebookIcon, #appstoreIcon { margin-top: 2%; padding: 15px; text-decoration: none; }
#facebookIcon img, #appstoreIcon img { width: 100%; max-width: 198px}

#ginger {
    position: absolute;
    bottom: 0;
    right: -25%;
    width: 207px;
    height: 268px;
    background: url('../img/ginger.png') center center no-repeat;
    z-index: 10;
}

#description, #buzz {
    padding: 15px;
    color: #d9457b;
    background: rgba(237,103,148,0.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 3px 0 rgba(237,103,148,0.6);
    -moz-box-shadow: 0 3px 0 rgba(237,103,148,0.6);
    -o-box-shadow: 0 3px 0 rgba(237,103,148,0.6);
    box-shadow: 0 3px 0 rgba(237,103,148,0.6);
}
#description h3 {
    margin-bottom: 3%;
    font-size: 1.5em;
    color: #fff;
    background: rgba(0,174,239,0.8);
    border-radius: 6px;
    font-family: 'Fjalla One', helvetica, arial, sans-serif;
}

article h1,
aside h1,
.extras-section > h2 {
    font-family: 'Coda Caption', helvetica, arial, sans-serif;
    color: #d9457b;
    padding: 2% 0;
    border-bottom: 1px solid rgba(237,103,148,0.5);
    text-shadow: 0 -1px 0 rgba(255,255,255,0.5);
}
aside h1 { font-size: 2.25em; }
article { margin-bottom: 5%; }
aside { margin-top: 7%;}
article p { font-size: 1.15em; line-height: 1.65em; }
aside blockquote { line-height: 1.5em; }
aside h2 { text-shadow: 0 -1px 0 rgba(255,255,255,0.5); font-family: 'Fjalla One', helvetica, arial, sans-serif; }

#baker { float: left; padding: 2%; width: 181px; height: 295px; background: url('../img/baker.png') center center no-repeat; }

.description_links {
    display: inline-block;
    margin: 5px; 
    padding: 4px 75px;
    background: #00aeef;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    font-family: "Days One", helvetica, arial, sans-serif;
}
.description_links:hover,
.description_links:focus { text-decoration: none; background: #13b8f6; color: #fff; }
.description_links:active { background: #00a4e1; }

/** SLIDER/CAROUSEL STYLING **/

#myCarousel { margin: 4% auto 0; }
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }


/** SLIDER/CAROUSEL STYLING END **/

blockquote {
    position: relative;
    font-style: italic;
    font-family: georgia, serif;
    font-size: 1.15em;
    border: none;
}
blockquote::before {
    content: '"';
    position: absolute;
    top: 5px;
    left: -10px;
    font-size: 2.5em;
}
blockquote::after {
    content: '"';
    position: absolute;
    bottom: -15px;
    right: -5px;
    font-size: 2.5em;
}
.cite_link { display: inline-block; width: 100%; margin: 10px 0; text-align: right; }
.cite_link a {
    text-decoration: none;
    color: white;
    padding: 0.3em 1em;
    background: #00aeef;
    border-radius: 6px 0 6px 0;
}
.cite_link a:hover, .cite_link a:focus { background: #13b8f6; }
.cite_link a:active { background: #00a4e1; }

/** EXTRAS STYLING **/

.extras-section {
    padding: 2%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.extras-section > h2 {
    margin: 10% auto;
    padding: 2%;
    font-family: 'Fjalla One', helvetica, arial, sans-serif;
    text-align: center;
    font-weight: 600;
    /*color: rgb(237,103,148);
    background-color: rgba(255,255,255, 0.5);
    border-radius: 6px 6px 0 0;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgba(237,103,148, 0.65);*/
}
.extras-section > p { min-height: 150px; }
#extras img { text-align: center; }

/** EXTRAS STYLING END **/

/** CONTENT STYLING END **/

/** FOOTER STYLING **/

footer {
    margin-top: 75px;
    width: 100%;
    color: #fff;
    background: #f26d9e;
    border-top: 1px solid rgba(255,255,255,0.4);
}
.contain { margin: 20px auto; max-width: 1200px; }
.contain h1 { margin: 20px auto 20px; }

#footerContent {
    margin: 0 auto 0;
    padding: 15px;
    width: 100%;
}
#footerContent span { float: left;  margin-left: 10px; padding-top: 15px; }
#footerContent img { float: right; margin-right: 10px; margin-bottom: 15px; max-width: 144px; }

.clearfix { clear: both; }

/** FOOTER STYLING END **/


/** MEDIA QUERIES STYLING **/

@media screen and (max-width: 1199px) {
    #ginger { display: none; }
}

@media screen and (min-width: 1152px) {
    #appstoreIcon:hover::before { bottom: -85%; right: 20%; }
}

@media screen and (min-width: 768px) and (max-width: 1152px) {
    #gameLinkPics a { display: inline-block; text-align: center; margin: 5px auto; padding: 0; max-width: 48%; }
    #facebookIcon { display: inline-block; }
    .extras-section > p { min-height: 0%; }
}

@media screen and (min-width: 470px) and (max-width: 768px) {
    #logo { float: left; width: 40.17094017094017%; }
    #video { float: left; width: 57.26495726495726%; }
    #appstoreIcon:hover::before { bottom: -85%; right: 20%; }
    #extras .extras-section { float: left; width: 31.623931623931625%; }
    /*#extras .extras-section { float: left; width: 48.93617021276595%; }*/
    #extras .extras-section:nth-of-type(2) { margin-bottom: 12.25%; }
    #extras .extras-section .cite_link { margin-bottom: 5%; font-size: 13px; line-height: 1.5em; }
    .extras-section > p { min-height: 0%; }
    #reviews { display: none; }
}

@media screen and (max-width: 470px) {
    .content { padding: 0; }

    #cookie,
    #pie,
    #donut,
    #cupcake,
    #baker,
    #facebookLink { display: none; }
    nav ul { margin: 0 auto; }
    nav ul li { display: inline-block; margin: 0.5em 0em; width: 100%; text-align: center; }
    nav ul li:last-of-type { margin: 0.5em 0em; }
    nav ul li a { font-size: 1.5em; width: 99%; }
    #gameLinkPics a#facebookIcon { display: none; }
    #description h3 { padding-left: 1%; }
    #gameLinkPics a { display: inline-block; text-align: center; margin: 5px auto; padding: 0; max-width: 48%; }
    article p { font-size: 1.2em; line-height: 1.65em; }
    #reviews { display: none; }
    #extras .extras-section img { display: none; }
    .extras-section > p { min-height: 0%; }
    #footerContent span { margin-left: 0; }
    #footerContent img { margin-right: 20px; }
}