* {
    color:white;
}

body {
    background-color:#A70000;
    margin:0;
    padding:0;
}

a {
    text-decoration:none;
}
.textWrapper {
    margin:0 10% 1% 10%;
    z-index:9999;
}

.buttonWrapper {
    margin:6% auto 0 auto;
    z-index:9999;
    position:relative;
    width:160px;
}

.button {
    cursor:pointer;
    font-family:'Rokkitt', Arial, Helvetica, sans-serif;
    z-index:99;
    font-size:16px;
    background-color:#7B0000;
    padding:.5em;
    border-radius:.5em;
    transition-property: background-color;
    transition-duration: .5s;
}

.button:hover {
    background-color:#7B0000;
    transition-property: background-color;
    transition-duration: .5s;
}

#header {
    background-color:#7B0000;
    margin:0 0 3% 0;
    display:block;
}

#header ul {
    list-style:none;
    display:inline-block;
    position:fixed;
    top:0;
    right:0;
    margin-right:20px;
    margin-top:0;
}

#header ul li {
    display:inline-block;
}

#header ul li a div {
    text-decoration:none;
    padding:.75em;
    min-width:1em;
    font-size:16px;
    text-align:center;
    margin-top:.4em;
}

.logo {
    position:absolute;
    z-index:94;
    right:0;
    bottom:0;
    display:block;
}

.logo a img {
    width:40%;
    float:right;
}

#facebook {
    background-color:#1e52ba;
    transition-property:background-color;
    transition-duration:.25s;
}

#facebook:hover {
    background-color:#3a66c7;
    transition-property:background-color;
    transition-duration:.25s;
}

#envelope {
    background-color:#4581a6;
    transition-property:background-color;
    transition-duration:.25s;
}

#envelope:hover {
    background-color:#4993c0;
    transition-property:background-color;
    transition-duration:.25s;
}

#twitter {
    background-color:#20b9ea;
    transition-property:background-color;
    transition-duration:.25s;
}

#twitter:hover {
    background-color:#32ccfe;
    transition-property:background-color;
    transition-duration:.25s;
}

#tumblr {
    background-color:#2f5070;
    transition-property:background-color;
    transition-duration:.25s;
}

#tumblr:hover {
    background-color:#3a6086;
    transition-property:background-color;
    transition-duration:.25s;
} /*SOCIAL BUTTON COLORS*/

h1 {
    font-family: "Libre Baskerville", serif;
    font-weight: 100 !important;
    font-size:30px;
    margin:0;
    padding:.3em .3em .3em .7em;
}

#content {
    width:100%;
    z-index:1;
}

.slide {
    display:none;
}

.text {
    font-family:'Rokkitt', Arial, Helvetica, sans-serif;
    font-size:16px;
    text-align:center;
    margin:0;
    z-index:5;
    position:relative;
}

.source {
    font-family: "Libre Baskerville",serif;
    font-size:12px;
    text-align:center;
    margin:0 10% 10% 10%;
    position:relative;
    z-index:7;
    padding-top: 20px;
}

.slideImage {
    width:70%;
    position:absolute;
    bottom:0;
    right:0;
    z-index:4;
    display:block;
}

.slideLinks {
    position:absolute;
    bottom:0;
    left:0;
    z-index:6;
}

ul.socialLinksOne {
    float:left;
    list-style-type:none;
    padding:0;
    margin:0;
}

ul.socialLinksTwo {
    float:right;
    list-style-type:none;
    padding:0;
    margin:0;
}

.slideLinks ul li a {
    font-size:10px;
    font-family:Arial, Helvetica, sans-serif;
    padding:1em;
    display:block;
    min-width:140px;
    margin:0;
}

.slideLinks ul li div {
    font-size:12px;
    margin-right:.75em;
}

.facebookBot {
    background-color:#1e52ba;
    transition-property:background-color;
    transition-duration:.25s;
}

.facebookBot:hover {
    background-color:#3a66c7;
    transition-property:background-color;
    transition-duration:.25s;
}

.emailBot {
    background-color:#4581a6;
    transition-property:background-color;
    transition-duration:.25s;
}

.emailBot:hover {
    background-color:#4993c0;
    transition-property:background-color;
    transition-duration:.25s;
}

.twitterBot {
    background-color:#20b9ea;
    transition-property:background-color;
    transition-duration:.25s;
}

.twitterBot:hover {
    background-color:#32ccfe;
    transition-property:background-color;
    transition-duration:.25s;
}

.tumblrBot {
    background-color:#2f5070;
    transition-property:background-color;
    transition-duration:.25s;
}

.tumblrBot:hover {
    background-color:#3a6086;
    transition-property:background-color;
    transition-duration:.25s;
} /*SOCIAL BUTTON COLORS*/



/*START MEDIA QUERIES*/

@media (min-height:650px) {
    .text {
        font-size:35px;
    }
    .source {
        font-size:20px;
        padding-top: 20px;
    }
    .button {
        font-size:30px;
    }
}

@media (min-height:550px) and (max-height:649px) {
    .text {
        font-size:25px;
    }
    .source {
        font-size:15px;
        padding-top: 20px;
    }
    .button {
        font-size:20px;
    }
}

@media (min-width:820px) {
    h1 {
        font-size:72px;
    }
    #header ul li a div {
        font-size:30px;
        margin-top:.7em;
    }
    .slideImage {
        max-height:90%;
        width:40%;
    }
    .slideLinks ul li a {
        font-size:16px;
        min-width:200px;
    }
    .slideLinks ul li div {
        font-size:20px;
    }
    .slideLinks {
        bottom:40px;
        left:40px;
    }
    .textWrapper {
        margin:0 40% 1% 8%;
    }
    .source {
        margin:0;
        padding-top: 20px;
    }
    .shirtWrapper {
        left:auto;
        bottom:auto;
        right:0;
        top:120px;
    }
    .shirtWrapper a img {
        width:70%;
    }
    .shirtWrapper a h2 {
        font-size:24px;
        width:150px;
    }
    .buttonWrapper {
        width:240px;
    }
    .button {
        font-size:30px !important;
    }
}

@media (min-width:630px) and (max-width:819px) {
    h1 {
        font-size:50px;
    }
    #header ul li a div {
        font-size:20px;
        margin-top:.7em;
    }
    .slideImage {
        width:60%;
    }
    .slideLinks ul li a {
        font-size:12px;
        min-width:180px;
    }
    .slideLinks ul li div {
        font-size:16px;
    }
    .slideLinks {
        bottom:20px;
        left:20px;
    }
    .textWrapper {
        margin:0 30% 1% 8%;
    }
    .source {
        margin:0;
        padding-top: 20px;
    }
    .shirtWrapper {
        left:auto;
        bottom:auto;
        right:0;
        top:90px;
    }
    .shirtWrapper a img {
        width:67%;
        left:25px;
    }
    .shirtWrapper a h2 {
        font-size:18px;
        width:130px;
    }
    .logo a img {
        width:30%;
    }
    .buttonWrapper {
        width:200px;
    }
    .button {
        font-size:24px !important;
    }
}

@media (max-width:320px) {
    .slideImage {
        bottom:66px;
    }
    #header ul li a div {
        padding:.4em;
    }
    h1 {
        font-size:24px;
    }
    .logo {
        bottom:66px;
    }
    .logo a img {
        width:50%;
    }
    .text {
        font-size:16px !important;
    }
    .source {
        font-size:12px !important;
        padding-top: 20px;
    }
}

@media (max-width:526px) and (min-width:321px) {
    .logo {
        bottom:66px;
        left:150px;
        right:auto;
    }
    .logo a img {
        float:none;
        width:160px;
    }
}

@media (orientation : portrait) {
    .slideImage {
        width:100% !important;
    }
}

@media (orientation : landscape) {
    .slideImage {
        max-width: 85vh !important;
    }
}

@media screen and (device-aspect-ratio: 71/40) {
    .slideImage {
        width:50% !important;
    }
}




/* Added by Dion */

@media only screen and (max-width: 1000px) { 

    .slideImage {
        display:none;
}