.season{
    display:inline-block;

}

.season .imageWrapper{
    width:100px;
    height:100px;    
    float:left;
}

.season .contentWrapper{
    text-align:left;    
    float:left;
    max-width: 300px;
}

.season .name{
    font-size: 25px;
}

#quoteWrapper {
    border-radius: 10px;
    padding: 3%;
    display: inline-block;
    margin-bottom: 30px;
    -webkit-box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.2);
    background-color: #871472;
    opacity: 1;
    background-image: radial-gradient(#d90bbf 1.4000000000000001px, transparent 1.4000000000000001px), radial-gradient(#d90bbf 1.4000000000000001px, #871472 1.4000000000000001px);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
    text-align: center;    
    max-width: 400px;
    width: 94%;
}

#quoteWrapper.flip {
    animation: rotatequote 0.2s alternate infinite ease-in;
}

@keyframes rotatequote {
    0%   {transform: rotateX(0deg);} 
    100% {transform: rotateX(360deg);}
}

#quoteWrapper q {
    font-size: 25px;
    font-weight:bold;
    color: #f1efe8;
    font-family: 'Kalam', sans-serif;
    width: 100%;
    max-width: 400px;
    display: inline-block;
}

#score {
    display: inline-block;    
    background-color:#FA01FB;
    padding:10px 15px;
    color:#FFF;
    font-family: 'Kalam', sans-serif;
    text-align:center;
    border-radius: 10px;
    margin-top: -20px;
}

#score.change{
    animation: crescendo 0.2s alternate infinite ease-in;
}

#score.final {
    animation: crescendobig 0.75s alternate infinite ease-in;
}

#celebration {
    position: absolute;
    top:150px;
    left: 0;
    width: 100%;
    text-align: center;
    background: rgb(103,62,177);
    background: linear-gradient(0deg, rgba(103,62,177,0) 0%, rgba(91,42,157,0.7721682422969187) 30%, rgba(91,33,142,0.8534007352941176) 52%, rgba(91,31,138,0.7581626400560224) 73%, rgba(90,8,99,0) 100%);    
    display: none;
}

#celebration.show {
    display: block;
    animation: fadeIn 1s ease-in;
}

#celebration.hide {
    display: none;
    animation: fadeOut 1s ease-in;
}

#celebrationContent{
    position: absolute;
    width: 100%;
    text-align: center;
    top:50px;    
    transform: scale(0.8);    
    animation: crescendo 1s alternate infinite ease-in;
}

#incorrect {
    position: absolute;
    top:150px;
    left: 0;
    width: 100%;
    text-align: center;
    background: rgb(103,62,177);
    background: linear-gradient(0deg, rgba(103,62,177,0) 0%, rgba(45,20,80,0.7721682422969187) 30%, rgba(56,20,87,0.8534007352941176) 52%, rgba(55,17,85,0.7581626400560224) 73%, rgba(90,8,99,0) 100%);
    display: none;
}

#incorrect.show {
    display: block;
    animation: fadeIn 1s ease-in;
}

#incorrect.hide {
    display: none;
    animation: fadeOut 1s ease-in;
}

#incorrectContent{
    position: absolute;
    width: 100%;
    text-align: center;
    top:30px;    
    transform: scale(0.8);    
    animation: crescendo 1s alternate infinite ease-in;
}

@keyframes crescendo {
    0%   {transform: scale(.8);} 
    100% {transform: scale(1);}
}

@keyframes crescendobig {
    0%   {transform: scale(1);} 
    100% {transform: scale(1.5);}
}

@keyframes fadeIn {
    0%   {transform: opacity(0);} 
   100% {transform: opacity(1);}
}

@keyframes fadeOut {
    0%   {transform: opacity(1);} 
   100% {transform: opacity(0);}
}

@media only screen and (max-width: 768px) {
    .season .contentWrapper{
        max-width:230px;
    }
}

#wdsiicon{    
    float: left;    
}

.season.play{
    background: none;
    box-shadow: none;
    display: inline-block;
    width: auto;
}

@media only screen and (max-width: 768px) {
    .season.play .contentWrapper {
        max-width: 190px;
    }
}