body,
p,
h1,
h2,
h3,
h4 {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

.container {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.container header {
    width: 100%;
}

header #topbanner {
    margin-bottom: 10px;
    border-radius: 8px;
    width: 100%;
    height: 65px;
    background-image: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(215, 215, 215, 1.00) 100%);
    background-image: -moz-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(215, 215, 215, 1.00) 100%);
    background-image: -o-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(215, 215, 215, 1.00) 100%);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(215, 215, 215, 1.00) 100%);
}

#topbanner #textleft {
    float: left;
    margin-top: 10px;
    margin-left: 6px;
    font-size: x-small;
    font-weight: bolder;
}

#topbanner #logo img {
    float: right;
    position: relative;
    margin-right: 23px;
    margin-top: 11px;
}

@media screen and (max-width: 482px) {
    .container .menu ul {
        margin-bottom: 10px;
    }
    ul.topnav li:not(:first-child) {
        display: none;
    }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
    /* Remove margins and padding from the list, and add a black background color */
    ul.topnav {
        list-style-type: none;
        margin-right: -3px;
        margin-left: -3px;
        margin-bottom: -3px;
        padding: 0;
        overflow: hidden;
        border-radius: 8px;
        background-image: -webkit-linear-gradient(270deg, rgba(86, 156, 73, 1.00) 0%, rgba(36, 59, 32, 1.00) 100%);
        background-image: -moz-linear-gradient(270deg, rgba(86, 156, 73, 1.00) 0%, rgba(36, 59, 32, 1.00) 100%);
        background-image: -o-linear-gradient(270deg, rgba(86, 156, 73, 1.00) 0%, rgba(36, 59, 32, 1.00) 100%);
        background-image: linear-gradient(180deg, rgba(86, 156, 73, 1.00) 0%, rgba(36, 59, 32, 1.00) 100%);
    }
    .container .menu .bigmenu {
        margin-top: -9999px;
        margin-left: -9999px;
        position: absolute;
    }
    /* Float the list items side by side */
    ul.topnav li {
        float: left;
    }
    /* Style the links inside the list items */
    ul.topnav li a {
        display: inline-block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        transition: 0.3s;
        font-size: 17px;
    }
    /* Change background color of links on hover */
    ul.topnav li a:hover {
        background-color: #555;
    }
    ul.topnav.responsive {
        position: relative;
    }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
    #topbanner #logo img {
        float: right;
        margin-right: 15px;
        width: 46%;
        height: 50%;
        margin-bottom: auto;
        margin-top: 16px;
    }
    .container #maincontent {
        border-radius: 8px;
        background-image: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.52) 46.63%, rgba(255, 255, 255, 0.31) 78.24%, rgba(255, 255, 255, 1.00) 100%);
        background-image: -moz-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.52) 46.63%, rgba(255, 255, 255, 0.31) 78.24%, rgba(255, 255, 255, 1.00) 100%);
        background-image: -o-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.52) 46.63%, rgba(255, 255, 255, 0.31) 78.24%, rgba(255, 255, 255, 1.00) 100%);
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.52) 46.63%, rgba(255, 255, 255, 0.31) 78.24%, rgba(255, 255, 255, 1.00) 100%);
        padding-bottom: 91px;
        opacity: 1;
        padding-left: 4px;
        padding-right: 3px;
        overflow-y: auto;
    }
    #content {
        padding-left: 10px;
        padding-top: 12px;
        padding-right: 10px;
    }
    #newswindow {
        width: 224px;
        text-align: center;
        color: #569C49;
        font-weight: bolder;
        margin-left: auto;
        /* margin-top: 51px; */
        margin-right: auto;
        margin-top: 38px;
        margin-bottom: 38px;
    }
    #newswindow #news {
        border-radius: 8px;
        border-style: solid;
        border-color: #569C49;
        width: 210px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        background-color: #FFFFFF;
        margin-top: 18px;
        box-sizing: content-box;
    }
    #twitter {
        width: 86%;
        margin-top: 26px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    #photos {
        clear: both;
        width: 65%;
        /* margin-left: -9999px;
        margin-top: -367px; */
        margin: 0 auto;
    }
    #photos #movie {
        width: 95%;
        margin-left: 0px;
        max-width: 0px;
    }
    #social {
        padding-left: 17px;
        padding-right: 17px;
        width: 80%;
        clear: right;
        text-align: center;
        display: inline;
        /* float: left; */
        margin-left: auto;
        margin-right: auto;
        overflow-y: auto;
        display: flex; 
        justify-content: center;
    }
    #social p {
        margin-left: auto;
        margin-right: auto;
    }
    #social #fblogo {
        /* float: left; */
        display: inline;
        /* margin-left: 26%; */
        margin-top: 25px;
        margin-left: auto;
        margin-right: auto;
    }
    #social #twitlogo {
        position: relative;
        clear: left;
        margin-left: 19%;
        display: block;
    }
    #weather {
        margin-left: auto;
        margin-right: auto;
        width: 290px;
        clear: left;
        float: none;
        margin-bottom: 15px;
    }
    #stravabox {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
    }
    #strava {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

@media screen and (max-width:768px) and (min-width:483px) {
    .container .menu ul {
        margin-bottom: 10px;
    }
    ul.topnav li:not(:first-child) {
        display: none;
    }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
    /* Remove margins and padding from the list, and add a black background color */
    ul.topnav {
        list-style-type: none;
        margin-right: -3px;
        margin-left: -3px;
        margin-bottom: -3px;
        padding: 0;
        overflow: hidden;
        border-radius: 8px;
        background-image: -webkit-linear-gradient(270deg, rgba(86, 156, 73, 1.00) 0%, rgba(36, 59, 32, 1.00) 100%);
        background-image: -moz-linear-gradient(270deg, rgba(86, 156, 73, 1.00) 0%, rgba(36, 59, 32, 1.00) 100%);
        background-image: -o-linear-gradient(270deg, rgba(86, 156, 73, 1.00) 0%, rgba(36, 59, 32, 1.00) 100%);
        background-image: linear-gradient(180deg, rgba(86, 156, 73, 1.00) 0%, rgba(36, 59, 32, 1.00) 100%);
    }
    /* Float the list items side by side */
    ul.topnav li {
        float: left;
    }
    /* Style the links inside the list items */
    ul.topnav li a {
        display: inline-block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        transition: 0.3s;
        font-size: 17px;
    }
    /* Change background color of links on hover */
    ul.topnav li a:hover {
        background-color: #555;
    }
    ul.topnav.responsive {
        position: relative;
    }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
    #topbanner #logo img {
        float: right;
        margin-right: 15px;
        width: 46%;
        height: 50%;
        margin-top: auto;
        margin-bottom: auto;
    }
    .container #maincontent {
        border-radius: 8px;
        background-image: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.52) 46.63%, rgba(255, 255, 255, 0.31) 78.24%, rgba(255, 255, 255, 1.00) 100%);
        background-image: -moz-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.52) 46.63%, rgba(255, 255, 255, 0.31) 78.24%, rgba(255, 255, 255, 1.00) 100%);
        background-image: -o-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.52) 46.63%, rgba(255, 255, 255, 0.31) 78.24%, rgba(255, 255, 255, 1.00) 100%);
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.52) 46.63%, rgba(255, 255, 255, 0.31) 78.24%, rgba(255, 255, 255, 1.00) 100%);
        padding-bottom: 11px;
        opacity: 1;
        float: left;
        overflow-y: auto;
    }
    #maincontent #newswindow {
        width: 217px;
        text-align: center;
        color: #569C49;
        font-weight: bolder;
        margin-left: auto;
        margin-top: 51px;
        margin-right: auto;
        margin-bottom: 51px;
    }
    #maincontent #newswindow #news {
        border-radius: 8px;
        border-style: solid;
        border-color: #569C49;
        width: 200px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        background-color: #FFFFFF;
        margin-top: 18px;
    }
    .container #maincontent #content {
        margin-left: 25px;
        margin-top: 25px;
        margin-right: 25px;
        margin-bottom: 25px;
        width: 92%;
        padding-top: 12px;
    }
    .container .menu .bigmenu {
        margin-top: -9999px;
        margin-left: -9999px;
        position: absolute;
    }
    .container #maincontent #twitter {
        margin-top: 16px;
        width: 71%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 16px;
    }
    .container #maincontent #photos {
        width: 95%;
        clear: both;
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
        float: none;
        padding-right: 2%;
    }
    #maincontent #photos #movie {
        clear: both;
        width: 95%;
        padding-left: 4%;
    }
    .container #maincontent #social {
        margin-left: auto;
        margin-right: auto;
        clear: both;
        width: 80%;
        padding-top: 13px;
        /* padding-left: auto; */
        /* padding-right: auto; */
    }
    #maincontent #social p {
        text-align: center;
    }
    #maincontent #social #fblogo {
        margin-left: 31%;
        margin-top: 27px;
        /* width: 133px; */
    }
    #weather {
        margin-left: auto;
        margin-right: auto;
        width: 290px;
        clear: left;
        float: none;
        padding-bottom: 9px;
        margin-bottom: 15px;
    }
    #stravabox {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
    }
    #strava {
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
    }
}

@media (min-width: 769px) {
    .container .menu ul.topnav {
        visibility: hidden;
        width: 1px;
        height: 1px;
    }
    header #topbanner #textleft {
        margin-left: 27px;
        font-weight: bolder;
        position: absolute;
        margin-top: 3px;
        font-size: medium;
    }
    .container header #topbanner {
        width: 100%;
        height: 73px;
    }
    .container #maincontent {
        width: 100%;
        background-image: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.42) 44.04%, rgba(255, 255, 255, 0.44) 64.77%, rgba(255, 255, 255, 1.00) 100%);
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.42) 44.04%, rgba(255, 255, 255, 0.44) 64.77%, rgba(255, 255, 255, 1.00) 100%);
        border-radius: 8px;
        margin-top: 9px;
        padding-bottom: 22px;
        overflow-y: auto;
    }
    .container #maincontent #content {
        width: 53%;
        float: left;
        clear: both;
        margin-left: 4%;
        margin-top: 38px;;
        padding-right: 15px;
        padding-left: 29px;
    }
    #maincontent #content h1 {
        font-size: 16pt;
        font-weight: bold;
    }
    .container #maincontent #newswindow {
        margin-right: 7%;
        text-align: center;
        width: 220px;
        color: #569C49;
        font-weight: bolder;
        font-size: large;
        position: relative;
        float: right;
        margin-top: 38px;
        margin-bottom: 38px;
    }
    .container #maincontent #news {
        border: thick solid #569C49;
        border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 0px;
        padding-left: 0px;
        margin-top: 10px;
        background-color: #FFFFFF;
    }
    .menu ul.bigmenu #largemenu {
        width: 100%;
        height: auto;
    }
    ul {
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        background-image: -webkit-linear-gradient(270deg, rgba(86, 156, 73, 1.00) 0%, rgba(6, 36, 0, 1.00) 100%);
        background-image: -moz-linear-gradient(270deg, rgba(86, 156, 73, 1.00) 0%, rgba(6, 36, 0, 1.00) 100%);
        background-image: -o-linear-gradient(270deg, rgba(86, 156, 73, 1.00) 0%, rgba(6, 36, 0, 1.00) 100%);
        background-image: linear-gradient(180deg, rgba(86, 156, 73, 1.00) 0%, rgba(6, 36, 0, 1.00) 100%);
        border-radius: 8px;
    }
    li {
        float: left;
    }
    li a,
    .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li a:hover,
    .dropdown:hover .dropbtn {
        border-radius: 8px;
        background-image: -webkit-linear-gradient(270deg, rgba(66, 66, 66, 1.00) 0%, rgba(23, 23, 23, 1.00) 100%);
        background-image: -moz-linear-gradient(270deg, rgba(66, 66, 66, 1.00) 0%, rgba(23, 23, 23, 1.00) 100%);
        background-image: -o-linear-gradient(270deg, rgba(66, 66, 66, 1.00) 0%, rgba(23, 23, 23, 1.00) 100%);
        background-image: linear-gradient(180deg, rgba(66, 66, 66, 1.00) 0%, rgba(23, 23, 23, 1.00) 100%);
    }
    li.dropdown {
        display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #569C49;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        background-image: -webkit-linear-gradient(270deg, rgba(133, 135, 133, 1.00) 0%, rgba(63, 63, 63, 1.00) 98.96%, rgba(29, 46, 26, 1.00) 98.96%, rgba(23, 43, 20, 1.00) 100%);
        background-image: -moz-linear-gradient(270deg, rgba(133, 135, 133, 1.00) 0%, rgba(63, 63, 63, 1.00) 98.96%, rgba(29, 46, 26, 1.00) 98.96%, rgba(23, 43, 20, 1.00) 100%);
        background-image: -o-linear-gradient(270deg, rgba(133, 135, 133, 1.00) 0%, rgba(63, 63, 63, 1.00) 98.96%, rgba(29, 46, 26, 1.00) 98.96%, rgba(23, 43, 20, 1.00) 100%);
        background-image: linear-gradient(180deg, rgba(133, 135, 133, 1.00) 0%, rgba(63, 63, 63, 1.00) 98.96%, rgba(29, 46, 26, 1.00) 98.96%, rgba(23, 43, 20, 1.00) 100%);
    }
    .dropdown-content a {
        color: #FFFFFF;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    .dropdown-content a:hover {
        background-color: #464846;
    }
    .dropdown:hover .dropdown-content {
        display: block;
        z-index: 8;
        width: auto;
    }
    #twitter {
        width: 28%;
        display: inline;
        position: relative;
        float: left;
        clear: both;
        margin-top: 35px;
        margin-left: 5%;
    }
    .midgroup {
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        clear: both;
    }
    #photos {
        width: 59%;
        position: relative;
        /* float: right; */
        /* margin-right: 4%;
        margin-top: 2%; */
        margin: 0 auto;
    }
    #movie {
        float: left;
        width: 100%;
        margin-top: 20px;
    }
    #social {
        width: 32%;
        text-align: center;
        padding-top: 35px;
        display: table;
        min-width: 359px;
        float: right;
        /* padding-left: auto; */
        /* padding-right: auto; */
        margin-right: 14%;
        margin-top: -165px;
        float:none; 
        clear: both; 
        display: flex; 
        justify-content: center;
        margin: 0 auto
    }
    #fblogo {
        margin-top: 22px;
        clear: both;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0px;
    }
    #weather {
        width: 40%;
        position: relative;
        float: left;
        clear: both;
        margin-left: 6%;
        margin-top: 34px;
    }
    #maincontent #weather #met1 {
        position: absolute;
    }
    #maincontent #weather #met {
        margin-top: 10px;
        position: relative;
        float: right;
    }
    #stravabox {
        width: 47%;
        max-width: 400px;
        float: right;
        clear: left;
        margin-right: 14%;
        margin-top: -358px;
    }
    #strava {
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
        margin-top: 64px;
    }
}