body {
    padding: 0px;
    margin: 0px;
    background-color: #000000;
        min-width: 300px;
}

#backDrop {
    height: 610px;
    margin-top: 30px;
    z-index: -1;
    position: fixed;
    width: 100%;
    background-image: url('../Images/Elements/bg.png');
    background-color: #000000;
}

.clear {
    clear: both;
    display: block;
}

.columnDivider {
    width: 90%;
    height: 1px;
    background-color: #C0C0C0;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

.responsiveClear {
    clear: both;
    display: none;
}

.responsivecolumnDivider {
    width: 90%;
    height: 1px;
    background-color: #C0C0C0;
    margin-right: auto;
    margin-left: auto;
    display: none;
}
a {
    text-decoration: none;
    color: #FFFFFF;
}
#responsiveHeader {
    display:none;
}





/*-------------------------------------------------*/
/* WEBSITE STRUCTURE */
/*-------------------------------------------------*/
#pageWrap {
    width: 960px;
    margin: 0px auto 0px auto;
    background-color: #E5E5E5;
    text-align: center;
    height: auto;
    padding-top: 75px;
}

#menuBlock {
    padding: 0px 0px 0px 0px;
           min-width: 300px;

    width: 960px;
    height: 75px;
    background: rgba(0, 0, 0, 0.90);
    z-index: 99;
    top: 0px;
    position: fixed;
}

    #menuBlock #logo {
    width: 200px;
    height: 55px;
    float: left;
    padding-left: 20px;
    padding-top: 10px;
}

#header {
    padding: 0px;
    margin: 0px;
    width: 100%;
}

    #header img {
        max-height: 100%;
        max-width: 100%;
}

.tiles {
    margin: 2.8% 0% 2.8% 2.5%;
    width: 30%;
    height: 0;
    padding-bottom: 18.3%;
    float: left;
    -webkit-box-shadow: 0 1px 1px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 10px -6px black;
    background-color: #E5E5E5;
}

    .tiles img {
        max-width: 100%;
    }

    .tiles .caption {
        color: #FFFFFF;
   font-family: 'Calibri';
        font-size: 25px;
        text-align: center;
        background: rgba(0, 173, 239, 0.75);
        margin-right: 0px;
        margin-left: 0px;
        margin-top: -30px;
        position: relative;
    }


.column {
    margin: 2.8% 0% 2.8% 2.5%;
    width: 30%;
    height: 0;
    padding-bottom: 25%;
    float: left;
    text-align: left;
}

    .column img {
        padding: 0px;
        margin: 0px;
        max-width: 100%;
        float: right;
        z-index: 1;
        display: block;
    }

    .column h1 {
        margin: 35px 0px 5px 0px;
        padding: 0px;
        font-size: 30px;
        font-family: 'Calibri';
        font-weight: normal;
        color: #202020;
        z-index: 2;
        position: absolute;
        width: 100px;
    }

#time {
    color: #000000;
    font-size: 35px;
   font-family: 'Segoe UI Light';
    position: relative;
    top: -35px;
}
#Where {
    color: #000000;
    font-size: 35px;
   font-family: 'Segoe UI Light';
    position: relative;
    top: -75px;
}
#Age {
    color: #000000;
    font-size: 35px;
   font-family: 'Segoe UI Light';
    position: relative;
    top: -115px;
}

    .column span {
    font-size: 35px;
    font-family: 'Segoe UI Semibold';
    color: #00ADEF;
    text-align: left;
}

    .column a {
        color: #00ADEF;
        cursor: pointer;
    }


#col1Text {
    font-size: 15px;
    padding-top: 10px;
   font-family: 'Calibri';
    float: left;
    color: #202020;
}

#col2header {
    padding: 0px;
    margin: 0px;
    font-size: 30px;
    font-family: 'Calibri';
    text-align: left;
    position: relative;
    color: #202020;
}

#col2text {
    font-size: 15px;
   font-family: 'Calibri';
    color: #333333;
    text-align: left;
    position: relative;
    float: left;
    top: -158px;
}


#footer {
background: rgba(0, 0, 0, 0.90);
    width: 100%;
    height: auto;
    color: #FFFFFF;
    font-size: 15px;
    font-family: 'Calibri Light';
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 20px;
}

.messagePicLeft {
    margin: 4%;
    width: 30%;
    height: 0;
    padding-bottom: 40%;
    text-align: center;
    float: left;
    position: relative;
}
    .messagePicLeft img {
    max-width: 100%;

    }
.messageTextRight {
    margin: 4% 4% 4% 0%;
    width: 58%;
    height: 0;
    padding-bottom: 43%;
    text-align: center;
    float: left;
}
.messageTextRight p {
    font-family: 'ruda';
    font-size: 14px;
    text-align: left;
    color: #4D4D4D;
}

/*-------------------------------------------------*/
/* WEBSITE STRUCTURE */
/*-------------------------------------------------*/





/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
    #pageWrap {
        width: 100%;
        padding-top: 130px;
    }

    #menuBlock {
        width: 100%;
        height: 130px;
    }

        #menuBlock #logo {
            margin-right: auto;
            margin-left: auto;
            display: inline-block;
            float: none;
        }

    .tiles .caption {
        font-size: 2.8vw;
        margin-top: -11%;
        position: relative;
        margin-right: 0px;
        margin-left: 0px;
    }

    .column {
        padding-bottom: 38%;
    }

        .column h1 {
            font-size: 3vw;
        }

    #col1Text {
        font-size: 1.8vw;
    }

    #col2header {
        font-size: 3vw;
    }

    #col2text {
        font-size: 1.8vw;
        margin-top: 13%;
    }

    .messageTextRight {

    padding-bottom: 66%;
}
.messageTextRight p {
    font-family: 'ruda';
    font-size: 1.8vw;
    text-align: left;
    color: #333333;
}

}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 600px or less */
@media screen and (max-width: 600px) {


    #menuBlock {
        padding: 0px 0px 0px 0px;
        width: 100%;
        height: 75px;
         background: rgba(0, 0, 0, 0.90);
        z-index: 99;
        top: 0px;
        position: fixed;
    }

    #pageWrap {
        padding-top: 75px;
    }
    #responsiveHeader {
    display:block;
        padding: 0px;
    margin: 0px;
    width: 100%;
}
        #responsiveHeader img {
     max-height: 100%;
        max-width: 100%;
    }
    #header {
        display:none;
    }


    .tiles {
        margin: 2.8% auto 4% auto;
        width: 94%;
        height: 0;
        padding-bottom: 58%;
        -webkit-box-shadow: 0 1px 1px -6px black;
        -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 10px -6px black;
        float: none;
    }

        .tiles img {
            width: 100%;
        }

        .tiles .caption {
            font-size: 5vw;
            margin-top: -6.5%;
            position: relative;
            margin-right: 0px;
            margin-left: 0px;
        }

    .column {
        width: 94%;
        height: auto;
        padding-bottom: 0;
        position: relative;
    }
      

        .column img {
            max-width: 100%;
        }

        .column h1 {
            margin: 11% 0px 0px 0px;
            padding: 0px;
            font-size: 7vw;
            font-family: 'Calibri';
            font-weight: normal;
            color: #202020;
            width: 100%;
            position: relative;
        }

    #col1Text {
        font-size: 15px;
        position: relative;
    }

     #col2header {
        font-size: 30px;
        margin: 0px;
        padding: 0px;
        font-family: 'Calibri';
        text-align: left;
        position: relative;
        color: #202020;
    }

     .column span {
           padding: 0px;
        margin: 0px;
        font-size: 35px;
        font-family: 'Segoe UI Semibold';
        text-align: left;
    }
#col2text {
        font-size: 15px;
    font-family: 'Calibri';
        color: #333333;
        text-align: left;
        position: relative;
        float: left;
        top: -40px;
        margin-bottom: -40px;
        padding-top: 5px;
    }
     #time {
        color: #000000;
        font-size: 35px;
    font-family: 'Segoe UI Light';
        position: relative;
          top: -40px;
        margin-bottom: -40px;
    }
#Where {
    color: #000000;
    font-size: 35px;
    font-family: 'Segoe UI Light';
    position: relative;
         top: -40px;
         margin-bottom: -40px;
}
#Age {
    color: #000000;
    font-size: 35px;
    font-family: 'Segoe UI Light';
    position: relative;
          top: -40px;
         margin-bottom: -40px;
}


  
    #footer {
        background-color: #1E1E1E;
        width: 100%;
        height: auto;
        color: #FFFFFF;
        font-size: 10px;
    font-family: 'Calibri Light';
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 20px;
    }

    .responsiveClear {
        clear: both;
        display: block;
    }

    .responsivecolumnDivider {
        width: 90%;
        height: 1px;
        background-color: #C0C0C0;
        margin-right: auto;
        margin-left: auto;
        display: block;
        margin-top: 20px;
    }
        #tabImage {
        width: 300px;
        margin-right: auto;
        margin-left: auto;
        float: none;
    }
            .messageTextRight {
        height: 100%;
        padding-bottom: 0px;
        width: 90%;
        margin-left: 5%;
    }
.messageTextRight p {
    font-family: 'ruda';
    font-size: 13px;
    text-align: left;
    color: #333333;
}
.messagePicLeft {
        margin: 4% auto 4% auto;
        width: 40%;
        height: 0;
        padding-bottom: 60%;
        text-align: center;
        position: relative;
        float: none;
    }
}