body {
    background-image: url('../images/bg-left-new.png'), url('../images/bg-right-new.png');
    background-position: left top, right top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
@media screen and (max-width: 1350px) {
    body {
        background-image: none;
    }
}

.nav-item, .nav-link, .dropdown-item {
    font-size: 12px;
    color: rgb(0, 26, 51) !important;
    text-transform: uppercase;
}

#topNav {
    opacity: 0.9;
}

.fe-nav-header {
    font-size: 18px;
    color: black;
    letter-spacing: 2.5px;
    font-weight: 400;
}

.fe-experiment-category {
    text-align: center;
}

.fe-experiments-list {
    padding: 0 5px 0 5px;
}

.experiment-images {
    text-align: center;
}

.experiment-images img, .experiment-images video {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: 5px 0 5px 0;
}

.fe-experiments-list > a {
    display: block;
    background-color: white;
    margin: 10px 0 0 0;
}

.fe-experiments-list > a:hover {
    background-color: #bee5eb;
}


a.category-Zephyr:hover, .btn-Zephyr:hover, .badge-Zephyr:hover {
    background-color: rgb(182, 235, 146) !important;
    border-color: rgb(182, 235, 146);
}
.btn-Zephyr, .badge-Zephyr {
    background-color: rgb(139, 182, 111) !important;
    border-color: rgb(139, 182, 111);
}

a.category-Visionary:hover, .btn-Visionary:hover, .badge-Visionary:hover {
    background-color: rgb(233, 153, 206) !important;
    border-color: rgb(233, 153, 206);
}
.btn-Visionary, .badge-Visionary {
    background-color: rgb(179, 116, 158) !important;
    border-color: rgb(179, 116, 158);
}

a.category-Rime:hover, .btn-Rime:hover, .badge-Rime:hover {
    background-color: rgb(154, 241, 241) !important;
    border-color: rgb(154, 241, 241);
}
.btn-Rime, .badge-Rime {
    background-color: rgb(121, 190, 190) !important;
    border-color: rgb(121, 190, 190);
}

a.category-Radiant:hover, .btn-Radiant:hover, .badge-Radiant:hover {
    background-color: rgb(236, 236, 114) !important;
    border-color: rgb(236, 236, 114);
}
.btn-Radiant, .badge-Radiant {
    background-color: rgb(194, 194, 91) !important;
    border-color: rgb(194, 194, 91);
}

a.category-Miaj:hover, .btn-Miaj:hover, .badge-Miaj:hover {
    background-color: rgb(236, 203, 91) !important;
    border-color: rgb(236, 203, 91);
}
.btn-Miaj, .badge-Miaj {
    background-color: rgb(189, 162, 74) !important;
    border-color: rgb(189, 162, 74);
}

a.category-General:hover, .btn-General:hover, .badge-General:hover {
    background-color: #bee5eb !important;
    border-color: #bee5eb;
}
.btn-General, .badge-General {
    background-color: #9bbabe !important;
    border-color: #9bbabe;
}

a.category-Flora:hover, .btn-Flora:hover, .badge-Flora:hover {
    background-color: rgb(212, 151, 199) !important;
    border-color: rgb(212, 151, 199);
}
.btn-Flora, .badge-Flora {
    background-color: rgb(163, 115, 153) !important;
    border-color: rgb(163, 115, 153);
}

a.category-Fauna:hover, .btn-Fauna:hover, .badge-Fauna:hover {
    background-color: rgb(230, 116, 135) !important;
    border-color: rgb(230, 116, 135);
}
.btn-Fauna, .badge-Fauna {
    background-color: rgb(200, 101, 118) !important;
    border-color: rgb(200, 101, 118);
}

a.category-Aqueous:hover, .btn-Aqueous:hover, .badge-Aqueous:hover {
    background-color: rgb(110, 196, 218) !important;
    border-color: rgb(110, 196, 218);
}
.btn-Aqueous, .badge-Aqueous {
    background-color: rgb(88, 156, 173) !important;
    border-color: rgb(88, 156, 173);
}

a.category-Alchemy:hover, .btn-Alchemy:hover, .badge-Alchemy:hover {
    background-color: rgb(125, 173, 136) !important;
    border-color: rgb(125, 173, 136);
}
.btn-Alchemy, .badge-Alchemy {
    background-color: rgb(109, 149, 118) !important;
    border-color: rgb(109, 149, 118);
}

.fe-experiment-title {
    display: flex;
}

.fe-experiment-title img {
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0 15px 5px 0;
}

.fe-experiment-toolbar {
    text-align: right;
    margin-top: 3px;
    margin-bottom: 12px;
}

.fe-experiment-toolbar a {
    font-size: 12px;
    margin-right: 1px;
    font-weight: normal;
    max-width: 150px;
    height: 33px;
}

.fe-experiment-toolbar a span {
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
}

@media screen and (max-width: 800px) {
    .fe-experiment-toolbar a {
        max-width: 128px;
    }
    .fe-experiment-toolbar a span {
        max-width: 88px;
    }
}

.fe-instagram-feed {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    align-items: center;
    overflow: hidden;
    padding: 10px 0 0 10px;
}

.fe-instagram-feed a {
    margin: 0 10px 10px 0;
}

@media screen and (max-width: 740px) {
    .fe-instagram-feed img {
        width: auto;
    }
}    

.fe-further-study {
    font-size: 1.5em;
}

.fe-further-study a {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
}

#footer {
    opacity: 0.7;
}

#footer a, #footer a:visited, .tnts-content .link, .experiment-content a.link, .printables a, .supplies-content .link {
    color: #BC01AB;
    border-color: #BC01AB;
}

.supplies-content .btn, .tnts-content .btn {
    font-family: sans-serif;
    text-transform: uppercase;
}

.science .badge, .science .badge:hover {
    margin-top: 5px;
    white-space: inherit !important;
    background-color: #BC01AB;
    border-color: #BC01AB;
}

.external-resources h5 {
    margin-bottom: 5px;
    margin-top: 15px;
}