html {
        touch-action: manipulation;
    }

    html, body {
        height:100%;
        margin:0;
    }
    
    body {
        background-color:#e1d9ce;
        background: url('images/bg.png');
        background-repeat:repeat;
        background-attachment:fixed;
        margin:0;
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    #wrapper {
        width:99%;
        overflow:hidden;
    }
    .space {
        height:30px;
        display:block;
    }
    
    .space-two {
        height:15px;
        display:block;
    }
    
    #main-container {
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        flex-flow: row wrap;
        width:78%;
        margin:0 auto;
        position:relative;
        overflow:hidden;
    }
    
    #main-container div {
        flex: 0 1 calc(20% - 8px); 
        padding:5px;
        background-color:#fff;
        margin:10px;
        padding:15px 12px 10px 12px;
        box-shadow: 5px 5px 3px rgba(170,170,170,0.2);
        filter:grayscale(50%);
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    
    #main-container div:hover {
        flex: 0 1 calc(20% - 8px); 
        padding:5px;
        background-color:#fff;
        margin:10px;
        padding:15px 12px 10px 12px;
        box-shadow: 5px 5px 3px rgba(170,170,170,0.8);
        filter:grayscale(0%);
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    .main-title {
        font-family: 'Allison', cursive;
        font-size:85px;
        color:#ac3636;
        text-shadow: 2px 2px 0px rgba(255,255,255,0.2);
    }
    
    .main-title span {
        display:block;
        font-size:25px;
        font-family: 'Alumni Sans', sans-serif;
        color:#222222;
        position:relative;
        top:-25px;
        left:55px;
        text-transform:lowercase;
        
    }
    
    .box-text {
        padding-top:10px;
        padding-bottom:10px;
        font-family: 'Allison', cursive;
        font-size:35px;
        color:#222222;
        display:block;
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    .box-text:hover {
        color:#ddad58;
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    .box-text i {
        color:#d14242;
        text-transform:lowercase;
        font-size:22px;
        display:block;
        font-family: 'Alumni Sans', sans-serif;
        margin-top:-12px;
    }
    
    a:link {
        text-decoration:none;
        color:inherit;
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    a:active {
        text-decoration:none;
        color:inherit;
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    a:visited {
        text-decoration:none;
        color:inherit;
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    
    a:hover {
        text-decoration:none;
        color:#d45454;
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    .upcoming a:link, 
    .upcoming a:active, 
    .upcoming a:visited 
    {
        background-color:#ffffff;
        box-shadow: 5px 5px 3px rgba(170,170,170,0.2);
        color:#d14242;
        text-transform:lowercase;
        font-size:18px;
        padding:5px 10px 5px 10px;
        font-family: 'Alumni Sans', sans-serif;
        margin:5px;
    }
    
    
    .upcoming a:hover
    {
        background-color:#ffffff;
        box-shadow: 5px 5px 3px rgba(170,170,170,0.6);
        color:#222222;
        text-transform:lowercase;
        font-size:18px;
        padding:5px 10px 5px 10px;
        font-family: 'Alumni Sans', sans-serif;
        margin:5px;
    }
    
    
    .friends {
        color:#222222;
        font-size:18px;
        padding:5px 10px 5px 10px;
        font-family: 'Alumni Sans', sans-serif;
        font-weight:600;
        margin:5px;
        text-shadow: 2px 2px 0px rgba(255,255,255,0.2);
        background-color:rgba(255,255,255,0.1);
        display:inline-block;
    }
    
    .friends a:link {
        margin:5px;
        color:#222222;
        font-weight:500;
        font-style:italic;
    }
    
    .friends a:hover {
        margin:5px;
        color:#d14242;
        font-weight:500;
        font-style:italic;
    }
    
    .user-navigation i {
        margin:5px;
        color:#222222;
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    
    .user-navigation i:hover {
        margin:5px;
        color:#d14242;
        webkit-transition: opacity 0.4s linear;
        webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }