﻿@media screen and (max-width: 504px) {
    html, body {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        font-family: 'Trebuchet MS';
    }
    #NavBar {
        width: 100%;
        height: auto;
        color: #8995A1;
        font-size: 1.4vw;
        padding-left: 0%;
        display: inline-block;
        position: static;
        z-index: 1;
        top: 1%;
        background-color: white;
        box-shadow: 0.5vw 0vw 0.25vw grey;
    }

    .container1 {
        background-color: #efefef;
        font-size: 7vw;
    }

    * {
        box-sizing: border-box
    }

    body {
        font-family: Verdana, sans-serif;
        margin: 0
    }

    .mySlides {
        display: none
    }

    img {
        vertical-align: middle;
    }

    /* Slideshow container */
    .slideshow-container {
        z-index: 0;
        max-height: 100%;
        max-width: 100%;
        margin: 0px;
        width: auto;
        height: auto;
        position: relative;
        margin: auto;
        box-shadow: 1vw 1vw 0.5vw grey;
    }

    /* Next & previous buttons */
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 1.6s ease;
        border-radius: 0 3px 3px 0;
    }

    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

    /* Caption text */
    .text {
        color: #f2f2f2;
        font-size: 6vw;
        padding: 0.4% 1.1%;
        position: absolute;
        bottom: 0.4%;
        width: 100%;
        text-align: center;
    }

    .split {
        position: relative;
        perspective: 500px;
        top: 50%;
        padding: 0 20px;
        transform: translateY(-50%);
        font-weight: 300;
    }

    #text {
        color: #f2f2f2;
        font-size: 6vw;
        padding: 0.4% 1.1%;
        position: absolute;
        bottom: 0.4%;
        width: 100%;
        text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* The dots/bullets/indicators */


    .active, .dot:hover {
        background-color: #717171;
    }

    /* Fading animation */
    .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 4s;
        animation-name: fade;
        animation-duration: 4s;
    }

    @-webkit-keyframes fade {
        from {
            opacity: .1
        }

        to {
            opacity: 1
        }
    }

    @keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    #LandownersBanner {
        z-index: 0;
        max-height: 100%;
        max-width: 100%;
        margin: 0px;
        width: auto;
        height: auto;
        position: relative;
        margin: auto;
        box-shadow: 1vw 1vw 0.5vw grey;
    }

    #LandownersBannerImg {
        max-width: 100%;
        max-height: 100%;
    }
    #LandownersTitle {
        position: relative;
        display: block;
        color: #97CA54;
        font-size: 8vw;
        text-align: center;
        letter-spacing: 0.4vw;
        background-color: #efefef;
    }

    #Intro {
        width: 100%;
        background: white;
        color: #000000;
        font-size: 1.5em;
        padding-left: 0%;
        position: absolute;
        left: 0px;
        overflow: hidden;
        display: block;
        margin-top: 45%;

    }

    #logo {
        display: inline-block;
        max-height: 100%;
        width: 100%;
        height: auto;
        margin-left: 0px;
        padding: 0px;
        background-color:white;
    }

    #email {
        transition: .5s ease;
        text-decoration: none;
        color: #191970;
        font-size: 4.2vw;
        color: #8995A1;
    }
        #email:hover {
            color: #97CA54;
        }


    #VideoFrame {
        position: relative;
        width: 100%;
        height: 0px;
        padding-bottom: 60%;
    }
    #AboutUs {
        display: inline-block;
        text-align: center;
        width: 100%;
    }

    iframe {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }

    .right {
        display: table-cell;
        width: 1px;
        vertical-align: middle;
        white-space: nowrap;
    }

    #Title {
        font-size: 8vw;
        color: #97CA54;
        margin-top: 8%;
    }

    #sub {
        text-align: center;
        font-size: 2.7vw;
        color: #8995A1;
        line-height: 3.7vw;
    }
    #Desc {
        font-size: 4.2vw;
        color: #8995A1;
        line-height: 7.56vw;
    }
    .greenPs {
        font-size: 5.2vw;
        color: #97CA54;
        line-height: 7.56vw;
    }
    #sub {
        text-align: center;
        font-size: 5.2vw;
        color: #8995A1;
        line-height: 7.56vw;
    }

    #Container {
        text-align: left;
        padding: 10%;
        padding-top: 5%;
        padding-bottom: 5%;
        background-color: #efefef;
    }
    .LandContainer {
        text-align: left;
        padding-top: 5%;
        padding-bottom: 5%;
        background-color: #efefef;
        padding: 5%;
        display:inline-block;
    }

    p.TeamDesc {
        font-size: 4.2vw;
        color: #8995A1;
        line-height: 7.56vw;
        display: inline-block;
        width: 100%;
    }
    p.LandDescRight {
        margin-top: 10%;
        font-size: 4.2vw;
        color: #8995A1;
        line-height: 7.56vw;
        float: right;
        width: 100%;
    }

    .LandImgLeft {
        z-index: 0;
        max-height: 100%;
        max-width: 100%;
        margin: 0px;
        width: auto;
        height: auto;
        margin-top: 0;
        box-shadow: 2vw 2vw 0.5vw grey;
    }

    p.LandDescLeft {
        margin-top: 10%;
        font-size: 4.2vw;
        color: #8995A1;
        line-height: 7.56vw;
        width: 100%;
    }

    .LandImgRight {
        z-index: 0;
        max-height: 100%;
        max-width: 100%;
        margin: 0px;
        width: auto;
        height: auto;
        margin-top: 0;
        box-shadow: -2vw 2vw 0.5vw grey;
    }

    h2.TeamNames {
        font-size: 6.4vw;
        color: #97CA54;
    }

    #Footer {
        margin-top: 0px;
        display: inline-block;
        height: 20%;
        width: 100%;
        background-color: #3d3d3d
    }

    #FootDetails {
        margin: auto;
        color: white;
        text-align: center;
        line-height: 8.0vw;
        font-size: 4.0vw;
    }
}

@media screen and (min-width: 505px) {
    html, body {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }

    * {
        box-sizing: border-box
    }

    body {
        font-family: Verdana, sans-serif;
        margin: 0
    }

    .mySlides {
        display: none
    }

    img {
        vertical-align: middle;
    }

    /* Slideshow container */
    .slideshow-container {
        z-index: 0;
        max-height: 100%;
        max-width: 100%;
        margin: 0px;
        width: auto;
        height: auto;
        position: relative;
        margin: auto;
        box-shadow: 1vw 1vw 0.5vw grey;
    }
    #LandownersBanner {
        z-index: 0;
        max-height: 100%;
        max-width: 100%;
        margin: 0px;
        width: auto;
        height: auto;
        position: relative;
        margin: auto;
        box-shadow: 1vw 1vw 0.5vw grey;
    }
    #LandownersBannerImg {
        max-width: 100%;
        max-height: 100%;
    }
    #LandownersTitle {
        position: absolute;
        bottom: 8px;
        left: 16px;
        color:white;
        font-size:3vw;
        letter-spacing:0.5vw;
    }

    /* Next & previous buttons */
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 1.6s ease;
        border-radius: 0 3px 3px 0;
    }

    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

    /* Caption text */
    .text {
        color: #f2f2f2;
        font-size: 3vw;
        padding: 0.4% 1.1%;
        position: absolute;
        bottom: 0.4%;
        width: 100%;
        text-align: center;
    }

    .split {
        position: relative;
        perspective: 500px;
        top: 50%;
        padding: 0 20px;
        transform: translateY(-50%);
        font-weight: 300;
    }

    #text {
        color: #f2f2f2;
        font-size: 1.5vw;
        padding: 0.4% 1.1%;
        position: absolute;
        bottom: 0.4%;
        width: 100%;
        text-align: center;
    }
    #VideoFrame {
        position: relative;
        width: 100%;
        height: 0px;
        padding-bottom: 30%;
    }
    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* The dots/bullets/indicators */


    .active, .dot:hover {
        background-color: #717171;
    }

    /* Fading animation */
    .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 4s;
        animation-name: fade;
        animation-duration: 4s;
    }

    @-webkit-keyframes fade {
        from {
            opacity: .1
        }

        to {
            opacity: 1
        }
    }

    @keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    #NavBar {
        width: 100%;
        height: auto;
        color: #8995A1;
        font-size: 1.4vw;
        padding-left: 1%;
        display: inline-block;
        position: fixed;
        z-index: 1;
        top: 1%;
        background-color: white;
        box-shadow: 0.5vw 0vw 0.25vw grey;
    }


    #Intro {
        width: 100%;
        background: white;
        color: #000000;
        font-size: 1.5em;
        padding-left: 0%;
        position: absolute;
        left: 0px;
        overflow: hidden;
        display: block;
        margin-top: 45%;
    }

    #logo {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin-left: 0px;
        padding: 0px;
    }


    #NavigationOptions {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
    }

    #TableBody {
        width: 100%;
        height: 50%;
        display: table;
    }

    #TableRow {
        width: 100%;
        display: table;
    }

    #LogoCell {
        width: 20%;
        height: auto;
    }


    td.cells {
        margin-top: 2%;
        text-align: center;
        display: inline-table;
        border-left: solid;
        border-left-color: #8995A1;
        width: 16%;
        height: auto;
        margin-right: 0px;
        transition: .5s ease;
    }

    td.dropdown {
        margin-top: 2%;
        text-align: center;
        display: inline-table;
        border-left: solid;
        border-left-color: #8995A1;
        width: 16%;
        height: auto;
        margin-right: 0px;
        transition: .5s ease;
    }

    a {
        transition: .5s ease;
        text-decoration: none;
        color: #8995A1;
        font-size: 1.4vw;
    }
    #email {
        transition: .5s ease;
        text-decoration: none;
        color: #191970;
        font-size: 2.4vw;
    }
        #email:hover {
            color: #97CA54;
        }

    td.cells:hover a {
        color: white;
        transition: .5s ease;
    }

    td.cells:hover {
        background-color: #97CA54;
        color: white;
        transition: .5s ease;
    }

    td.dropdown:hover a {
        transition: .5s ease;
    }

    td.dropdown:hover {
        background-color: #97CA54;
        color: white;
        transition: .5s ease;
    }

    .dropdown-content {
        color: #8995A1;
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 100%;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

        .dropdown-content a {
            color: #8995A1;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

            .dropdown-content a:hover {
                color: #e6e6e6;
                background-color: #89c33c;
                transition: .5s ease;
            }

    .dropdown:hover .dropdown-content {
        display: block;
        transition: .5s ease;
    }



    #AboutUs {
        display: inline-block;
        text-align: center;
        width: 100%;
    }

    iframe {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 50%;
        height: 100%;
        margin-left: 25%;
    }


    .right {
        display: table-cell;
        width: 1px;
        vertical-align: middle;
        white-space: nowrap;
    }

    #Title {
        font-size: 4vw;
        color: #97CA54;
        margin-top: 8%;
    }

    #Desc {
        font-size: 2.2vw;
        color: #8995A1;
        line-height: 3.7vw;
    }

    .greenPs {
        text-align:center;
        font-size: 2.7vw;
        color: #97CA54;
        line-height: 3.7vw;
    }
    
    .boldgreen {
	font-weight: bold;
	color: #97CA54;
    }
    #sub {
        text-align: center;
        font-size: 2.7vw;
        color: #8995A1;
        line-height: 3.7vw;
    }

    #Container {
        vertical-align: top;
        text-align: left;
        padding: 10%;
        padding-top: 5%;
        padding-bottom: 5%;
        background-color: #efefef;
    }
    .LandContainer {
        text-align: left;
        padding-top: 5%;
        padding-bottom: 5%;
        background-color: #efefef;
        padding: 5%;
        display: inline-block;
    }

    p.TeamDesc {
        font-size: 2.2vw;
        color: #8995A1;
        line-height: 3.7vw;
        display: inline-block;
        width: 100%;
    }
    p.LandDescRight {
        font-size: 1.2vw;
        color: #8995A1;
        line-height: 2.7vw;
        float:right;
        width: 45%;
        margin-left: 5%;
    }
    .LandImgLeft {
        z-index: 0;
        max-height: 100%;
        max-width: 48%;
        margin: 0px;
        width: auto;
        float:left;
        height: auto;
        margin-top: 0;
        box-shadow: 1vw 1vw 0.5vw grey;
    }

    p.LandDescLeft {
        font-size: 1.2vw;
        color: #8995A1;
        line-height: 2.7vw;
        float: left;
        width: 45%;
        margin-right: 5%;
    }

    .LandImgRight {
        z-index: 0;
        max-height: 100%;
        max-width: 48%;
        margin: 0px;
        width: auto;
        float: right;
        height: auto;
        margin-top: 0;
        box-shadow: -1vw 1vw 0.5vw grey;
    }


    h2.TeamNames {
        font-size: 2.6vw;
        color: #97CA54;
    }

    #Footer {
        margin-top: 0px;
        display: inline-block;
        height: 20%;
        width: 100%;
        background-color: #3d3d3d
    }

    #FootDetails {
        margin: auto;
        color: white;
        text-align: center;
        line-height: 2.0vw;
        font-size: 1.0vw;
    }
}