/* OVERALL STRUCTURE AND STYLE */

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    background-color: #f6f0de;
    font-family: 'Roboto', sans-serif;
    width: 100%;
    overflow: hidden;
}

header {
    position: absolute;
    top: 0;
    height: 5vh;
    background-color: white;
    width: 100%;
    z-index: 999;
    display: table;
}

html, body, #wrapper {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

#map {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto auto;
}

svg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hidden {
    display: none;
}

.minimal-header {
    background-color: #f6f0de;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.modal {
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 99999;
    display: none;
    background-color: rgb(250, 250, 250);
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal ul {
    float: left;
    list-style: none;

}

.weighted-list {
    padding-right: 3em;
}

.modal ul li {
    line-height: 1.4;
}

.modal ul li.header {
    font-size: 1.5em;
    font-family: Georgia;
    color: #f78f6a;
    font-family: Georgia, serif;
    margin-bottom: .5em;
    border-bottom: 1px solid;
}

#close-button {
    float: right;
    padding-right: .5em;
    font-size: 1.5em;
}

span.value {
    float: right;
    font-weight: 500;
    padding-left: 1em;
}

span.field {
    line-height: 1.4;
}

.select-div {
    position: absolute;
    top: 50px;
    left: 30px;
    font-weight: 400;
    font-family: 'Roboto';
    font-size: 1.2em;

}

.search-clear {
    font-size: 0.8em;
    color: #085f71;
    cursor: pointer;
}

.search-clear:hover {
    text-decoration: underline;
}

span.search {
    display: block;
    font-size: .8em;
    width: 90%;
    padding-top: 0.5em;

}

.white-header {
    background-color: white;
    -webkit-box-shadow: 0px 1px 6px -4px rgba(0, 0, 0, 0.72);
    -moz-box-shadow: 0px 1px 6px -4px rgba(0, 0, 0, 0.72);
    box-shadow: 0px 1px 6px -4px rgba(0, 0, 0, 0.72);
    transition: 0.5s all;
}

svg.heatmap {
    position: relative;
    display: block;
    margin: 0 auto;
}

header ul {
    margin: 0;
    list-style: none;
    padding-right: 1%;
    font-weight: 500;
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

header ul li {
    padding: 0;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    margin-left: 3em;
}

header ul li a {
    color: #2e2e2e;
    text-decoration: none;
    position: relative;
}

#responsive-nav {
    display: none;
    position: absolute;
    top: 5vh;
    width: 100%;
    z-index: 1001;
    bottom: 0;
    background-color: white;
}

#responsive-nav ul {
    margin: 0;
    list-style: none;
    /* padding-right: 1%; */
    font-weight: 500;
    /* display: table-cell; */
    vertical-align: middle;
    text-align: center;
    width: 100%;
    padding: 0;
}

#responsive-nav ul li {
    padding: 1.5em;
    display: block;
    font-family: 'Roboto', sans-serif;
    background-color: white;
    font-size: 1.5em;
    border-bottom: 0.25px solid lightgray;
}

#responsive-nav ul li a {
    color: #2e2e2e;
    text-decoration: none;
    position: relative;
}

header ul li a.menu {
    display: none;
}

header ul li a div {
    width: 30px;
    height: 4px;
    background-color: rgb(41,41,41);
    margin: 6px 0;
}


header ul li:not(:last-child) a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #f78f6a;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.25s ease-in 0s;
    transition: all 0.25s ease-in 0s;
}

header ul li:not(:last-child) a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

header ul li:not(:last-child) a.selected:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

header #masthead {
    padding-left: 1%;
    display: table-cell;
    vertical-align: middle;
}

header #masthead a {
    color: #085f71;
    font-family: Georgia, serif;
    font-size: 110%;
    text-decoration: none;
}

header #masthead a:hover {
    color: #08404f;
    font-family: Georgia, serif;
    text-decoration: none;
}

#main {
    width: 100%;
    height: 95vh;
    position: relative;
    background-color: #f6f0de;
    overflow: hidden;
    margin-top: 5vh;
}

svg#mapSvg {
    height: 100%;
}

.loading {
    color: #404040;
    position: fixed;
    font-size: 18px;
    top: 50%;
    left: 50%;
}

.recommendations-background, .explore_0.main, .about.main, .next-steps.main {
    background: url('img/Artboard 1.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: inherit;
}

.recommendations-container {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 5vh;

}

.recommendations-container h1 {
    margin-bottom: 0;
}

.recommendations-left {
    width: 40%;
    display: inline-block;
    float: left;
}

.recommendations-right {
    display: inline-block;
    width: 50%;
    padding-left: 5%;
}

.recommendation {
    margin-top: 4vh;
}

.recommendation p {
    margin-top: 0;
}

.summary {
    font-style: italic;
    width: 50%
}

.recommendations-container .nav-buttons {
    bottom: 5vh;
    position: absolute;
    z-index: 1000;
    width: 325px;
    right: 0;
    left: 0;
    margin: auto;
}

/*span.highlight-text.selected {*/
/*text-style: underline;*/
/*color: #f78f6a;*/
/*}*/

/* ABOUT SEQUENCE */

.about_0.main {
    background-color: #f6f0de;
    background-image: url(./img/splash-banner.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0px 110%;
    height: inherit;
}

.about.main h2, .about.main h1, .next-steps.main h2, .next-steps.main h1, .contact h1 {
    width: 75%;
    margin: 0 auto;
    text-align: center;
    padding-top: 10vh;
    margin-bottom: 5vh;
}

.about.main p, .next-steps.main p, .contact.main p {
    width: 35%;
    margin: 0 auto;
    margin-bottom: 2vh;
}

.about.main span {
    font-style: italic;
}

.about.main p:last-of-type {
    margin-bottom: 5vh;
}

.about.main a {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.big-sentence {
    font-size: 120%;
    margin: 0 auto;
    display: inline-block;
    position: absolute;
    top: 5vh;
    z-index: 201;
    width: 75%;
    text-align: center;
    left: 0;
    right: 0;
    line-height: 1.5;
}

.big-sentence span.highlight-text {
    text-decoration: none;
}

.big-sentence span.active {
    text-decoration: underline;
    color: #f78f6a;
}

span.highlight-text {
    color: #43adad;
    text-decoration: underline;
}

span.highlight-text:hover {
    color: #f78f6a;
    text-decoration: none;
}

span.highlight-text.clicked {
    color: orangered;
    text-decoration: underline;
}

.nav-buttons {
    bottom: 5vh;
    position: absolute;
    z-index: 1000;
    width: 200px;
    right: 0;
    left: 0;
    margin: auto;
}

.circlepack.nav-buttons {
    position: relative;
    z-index: 1000;
    width: 200px;
    text-align: center;
    margin: 0 auto;
}

.about-nav {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 4px;
    color: #085f71;
    font-size: 120%;
    background: #ffffff;
    padding: 9px 20px 10px 20px;
    text-decoration: none;
    width: fit-content;
    border: 1px #085f71 solid;
    margin-right: 1em;
}

.call-to-action {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 4px;
    color: #ffffff;
    font-size: 120%;
    background: #085f71;
    padding: 9px 20px 10px 20px;
    text-decoration: none;
    width: 100px;
}

.parent {
    fill: transparent !important;
}

#splash-image {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-image: url(./img/splash-banner.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 40vh;
}

.copy {
    position: absolute;
    z-index: 1000;
    right: 1%;
    overflow: hidden;
    padding: 10px 10px 20px;
    top: 10vh;
    max-width: 20%;
    background-color: whitesmoke;
}

.less-copy {
    height: 10vh;
}

.show-less {
    display: none;
}

.legend {
    position: absolute;
    z-index: 1000;
    bottom: 25%;
    right: 22%;
    width: 300px;
    height: 50px;
    opacity: .8;
}

.text {
    margin-bottom: 1vh;
}

/* EXPLORE STORIES */

#stories-container {
    display: block;
    position: absolute;
    margin: 0 auto;
    text-align: center;
    left: 0;
    right: 0;
    width: 75%;
    top: 25vh;
}

#stories-container div {
    width: 25%;
    margin: 0 1em 2em;
    border: 1px solid #e47a54;
    border-radius: 3px;
    padding: .5em 1em;
    vertical-align: bottom;
    transition: all 0.25s;
    opacity: 0.8;
    background-color: #f6f0de;
    display: none;
}

#stories-container div ul {
    font-weight: 300;
    -webkit-padding-start: 0;
    padding-start: 0;
    font-size: .9em;
    list-style: none;
    text-align: left;
    padding-left: 0em;
    border-top: 1px solid;
    padding-top: 2vh;
    height: 25%;
}

#stories-container div:hover {
    background-color: #e6e1d1;
    opacity: 1;

}

#stories-container img {
    max-width: 12em;
    max-height: 12em;
    text-align: center;
    /*background-color: #f78f6a;*/
}

#stories-container a div h2 {
    text-align: center;
    color: #e47a54;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
}

#stories-container a div.network-list {
    height: 12vh;
    width: 100%;
    margin: 0;
    border: none;
    padding: 0;
    vertical-align: initial;
    opacity: 1;
    background-color: transparent;
    transtion: none;
    /* min-height: 0; */
}

#stories-container a {
    text-align: center;
    color: #f78f6a;
    text-decoration: none;
}

#stories-container p {
    font-style: italic;
    color: rgba(0, 0, 0, 0.8);
    margin-top: 0;
}

.explore .controls {
    margin-top: 5vh;
    position: relative;

}

.explore .controls a {
    color: darkslategray;
    text-decoration: none;
    font-size: 1.1em;
    opacity: 0.85;
}

.explore .controls a:hover {
    opacity: 1;
}

.explore .controls a:last-of-type {
    float: right;
}

.left-arrow {
    opacity: 0.85;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid darkslategray;
    margin-right: 4px;
    display: inline-block;
    vertical-align: bottom;
}

.right-arrow {
    opacity: 0.85;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid darkslategray;
    margin-left: 4px;
    display: inline-block;
    vertical-align: bottom;
}

.heatmapContainer, .barchartContainer {
    height: 100%;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
}

.heatmapContainer {
    width: 75%;
}

.ui-autocomplete {
    z-index: 9999;
}

svg.heatmap rect.active {
    stroke-dasharray: 5, 5, 5;
}

.circleMapContainer {
    z-index: 100;
    width: 50%;
    height: 75%;
    margin: 0 auto;
}

.circleMapContainer svg {
    position: relative;
    height: 85%;
}

.circlepack.big-sentence {
    position: relative;
    margin: 10vh auto 0;
    display: block;
    top: inherit;
    left: inherit;
    right: inherit;
}

.barchartContainer svg {
    position: relative;
}

.compare.controls {
    position: absolute;
    top: 10vh;
    z-index: 9999;
    max-width: 300px;
}

.compare.controls div {
    display: inline-block;
}

.compare.controls select {
    display: block;
    width: 90%;
}

.compare.controls ul {
    padding: 0;
    margin: auto;
    width: 165px;
    padding-bottom: 5vh;
    padding-top: 2vh;
}

.compare.controls ul li {
    display: inline-block;
}

/* TYPOGRAPHY */

h1, h2, h3 {
    font-family: "Georgia", serif;
    color: darkslategray;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 1em;
}

h4, h5 {
    margin: 0;
}

h4 {
    color: #e47a54;
}

.circletext {
    font-size: 2em;
    font-family: "Roboto", sans-serif;
    color: darkslategray;
}

/* MAPBOX OVERRIDES */

.mapboxgl-ctrl-top-left {
    top: 5vh;
    left: 0;
}

/*.Hub{*/
/*fill: #59b4ff;*/
/*}*/

/*.Web{*/
/*fill: #69a75b;*/
/*}*/

/*.Seasonal{*/
/*fill: yellow;*/
/*}*/

/*.giver{*/
/*fill: green;*/
/*}*/

/*.receiver{*/
/*fill: red;*/
/*}*/

/*.highlight{*/
/*fill: #dd653e;*/
/*}*/

.connection {
    stroke: rgba(0, 0, 0, 0.02);
    width: 1px;
}

.libraries {
    cursor: pointer;
}

.libraryLabels {
    color: black;
    font-size: 0.8em;
}

.domain {
    display: none;
}

.network-label {
    font-size: 1.5em;
    text-shadow: 1px 1px 6px rgba(255, 255, 255, 1);
    font-weight: 600;
}

.network-label-circle {
    font-size: 1em;
    text-shadow: 1px 1px 6px rgba(255, 255, 255, 1);
    font-weight: 600;
}

.label {
    font-size: 1.5em;
    text-shadow: 1px 1px 6px rgba(255, 255, 255, 1);
    font-weight: 600;
    padding-left: .5em;
}

/*TOOLTIP*/

div.tooltip-hub {
    text-align: left;
    font-size: 89.6%;
    font-weight: 500;
    background: darkslategray;
    color: whitesmoke;
    padding: 2px 7px;
    border-radius: 2px;
    height: 100px;
    width: 100px;
}

div.tooltip {
    position: absolute;
    text-align: left;
    font-size: 89.6%;
    font-weight: 500;
    background: darkslategray;
    color: whitesmoke;
    padding: 2px 7px;
    border-radius: 2px;
    top: 0;
    z-index: 999;
}

div.tooltip.hidden:after {
    display: none;
}

div.tooltip:after, div.tooltip-hub:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid darkslategray;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

div.tooltips {
    position: relative;
    display: inline;
}

div.tooltips span {
    position: absolute;
    width: 140px;
    color: #FFFFFF;
    background: #000000;
    height: 30px;
    line-height: 30px;
    text-align: center;
    visibility: hidden;
    border-radius: 3px;
}

div.tooltips span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

div:hover.tooltips span {
    visibility: visible;
    opacity: 1;
    bottom: 30px;
    left: 50%;
    margin-left: -76px;
    z-index: 999;
}

.hub2 div.tooltip.Andover,
.hub2 div.tooltip.Attleboro,
.hub2 div.tooltip.Billerica,
.hub2 div.tooltip.Chelmsford,
.hub2 div.tooltip.Great,
.hub2 div.tooltip.Greenfield,
.hub2 div.tooltip.Hamilton,
.hub2 div.tooltip.Leominster
.hub2 div.tooltip.Middleborough,
.hub2 div.tooltip.New,
.hub2 div.tooltip.Newburyport,
.hub2 div.tooltip.Northampton,
.hub2 div.tooltip.Pittsfield,
.hub2 div.tooltip.Springfield,
.hub2 div.tooltip.Worcester {
    display: none;
}

.explore-controls {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 1vh;
    margin-bottom: 1vh;
    height: 6vh;
}

.explore-legend {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 1vh;
    margin-bottom: 1vh;
    height: 12vh;
}

.explore-legend.heatTable {
    height: 20vh;
}

.explore-legend.heatTable p {
    font-size: 0.869em;
    font-style: italic;
}

p.legend-label {
    font-size: 0.869em;
    font-style: italic;
}

.explore-legend.heatTable p.dialog {
    font-size: 0.869em;
    font-style: normal;
}

.dialog {
    text-decoration: underline;
    font-size: .8em;
    cursor: pointer;
    font-style: normal;
}

.bold-text {
    margin-left: 0.6em;
    margin-bottom: 0.2em;
    font-size: 0.869em;
}

.legend-label {
    font-size: .869em;
    font-family: "Roboto", san-serif;
}

.about-ul {
    width: 30%;
    margin: 0 auto;
}

/*Button group*/

ul#heat {
    padding-top: 1vh;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-radius: 5px;
}

ul.tab li {
    float: left;
    padding: 0;
}

ul.tab li label {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 0;
    color: #085f71;
    font-size: .85em;
    background: #ffffff;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    /* width: fit-content; */
    border: 1px #085f71 solid;
    /* margin-right: 1em; */
}

ul.tab li label:hover {
    background: whitesmoke;
}

ul.tab > li:first-child label {
    border-radius: 5px 0 0 5px;
}

ul.tab > li:last-child label {
    border-radius: 0 5px 5px 0;
}

ul.tab li input[type="radio"] {
    opacity: 0;
    width: 1px;
    height: 1px;
    position: absolute;
}

ul.tab li input[type="radio"]:checked ~ label {
    background: #085f71;
    color: white;
    transition: all 0.5s;
}

.yellow-legend {
    width: 75px;
    height: 15px;
    display: inline-block;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcf8e8+0,ffbc14+100 */
    background: #fcf8e8; /* Old browsers */
    background: -moz-linear-gradient(left, #fcf8e8 0%, #ffbc14 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #fcf8e8 0%, #ffbc14 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #fcf8e8 0%, #ffbc14 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcf8e8', endColorstr='#ffbc14', GradientType=1); /* IE6-9 */
    border: 1px solid lightgray;
    margin-left: 0.5em;
    margin-right: 0.5em;
    vertical-align: text-top;
}

label a {
    text-decoration: none;
    color: inherit;
}

.legend-container {
    margin-left: 0.5em;
    display: block;
    margin-bottom: 1vh;
    font-size: .896em;
}

/*JQUERY UI OVERRIDES*/

.ui-widget-header {
    border: none;
    background: none;
    color: #333;
    font-weight: bold;
}

.fast-fade-in, .big-sentence {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
    -ms-animation: fadein 3s; /* Internet Explorer */
    -o-animation: fadein 3s; /* Opera < 12.1 */
    animation: fadein 3s;
}

.slow-fade-in {
    -webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 8s; /* Firefox < 16 */
    -ms-animation: fadein 8s; /* Internet Explorer */
    -o-animation: fadein 8s; /* Opera < 12.1 */
    animation: fadein 8s;
}

.delayed-fade, .annotation-label {
    animation-delay: 5s;
    -webkit-animation-delay: 5s;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
    -ms-animation: fadein 3s; /* Internet Explorer */
    -o-animation: fadein 3s; /* Opera < 12.1 */
    animation: fadein 3s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.sg-wrapper {
    width: 35%;
    margin: 0 auto;
    margin-bottom: 2vh;
}

textarea {
    width: 100%;
    height: 200px;
}

.sg-question {
    margin-bottom: 2vh;
}

.tick line {
    visibility: hidden;
}


@media (max-width: 1300px) {
    #stories-container a div h2 {
        text-align: center;
        color: #e47a54;
        text-decoration: none;
        transition: all 0.5s;
        white-space: inherit;
        min-height: 7vh;
    }

    #stories-container p {
        min-height: 7vh;
    }
}

@media (max-width: 900px) {
    h3 {
        font-size: 0.8em;
    }

    .copy {
        position: absolute;
        z-index: 1000;
        left: 0;
        right: 0;
        top: auto;
        overflow: hidden;
        padding: 1em;
        bottom: 0;
        max-width: none;
        background-color: whitesmoke;
    }

    .compare.controls {
        position: absolute;
        z-index: 1000;
        left: 0;
        right: 0;
        top: auto;
        overflow: hidden;
        padding: 1em;
        bottom: 0;
        max-width: none;
        background-color: whitesmoke;
    }

    #stories-container div {
        width: 50%;
        margin: 0 1em 2em;
        border: 1px solid #e47a54;
        border-radius: 3px;
        padding: .5em 1em;
        vertical-align: bottom;
        transition: all 0.25s;
        opacity: 0.8;
        background-color: #f6f0de;
        display: none;
    }

    #stories-container div ul {
        text-align: center;
        font-size: 1em;
    }

    .about.main p, .next-steps.main p, .contact.main p {
        width: 80%;
    }

    header ul.nav li a {
        float: right;
        display: none;
    }

    header ul.nav li a.menu {
        display: inline-block;
        position: absolute;
        right: 1%;
        top: 0;
    }

    header ul.nav.responsive li:not(:last-child){
        display: none;
    }

    header ul.nav.responsive li a.menu {
        position: absolute;
        right: 5;
        top: 5;
        display: inline-block;
    }

    #responsive-nav.responsive {
        display: block;
    }

    .heatmapContainer {
        width: 100%;
    }

    .recommendations-container {
        max-width: 1100px;
        margin: 0 auto;
        padding-top: 5vh;
        padding-left: 5%;
        height: inherit;

    }

    .recommendations-container h1 {
        margin-bottom: 0;
    }

    .recommendations-left {
        width: 90%;
        display: inline-block;
        float: left;
    }

    .recommendations-right {
        display: none;
    }

    .summary {
        font-style: italic;
        width: 90%;
    }

    .recommendations-container .nav-buttons {
        position: relative;
        bottom: auto;
        top: auto;
        left: auto;
        right: auto;
        margin-top: 2vh;
        height: 10vh;
    }
}

@media (max-width: 700px) {
    #stories-container {
        display: block;
        position: absolute;
        margin: 0 auto;
        text-align: center;
        left: 0;
        right: 0;
        width: 100%;
        top: 40vh;
    }

    .show-less {
        position: absolute;
        display: inline-block;
        top: 0.5vh;
        right: 1%;
        font-size: .869em;
        color: whitesmoke;
        background-color: darkslategray;
        border-radius: 1px;
        padding: .2em .5em;

    }

}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {



}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    


}