h2 {
    font-size:100%;
    text-align:center;
}
h3 {
    font-size:100%; 
    font-weight:100;
    margin-bottom: 10px;
    width:100%;
}
div#heading {
    padding-left:10px;
    text-align:left; 
}
div#container {
    display:flex;
}
div#leftMargin {
    width:14%;
    min-width:200px;
}
div#content {
    float: left;
    flex-direction: column;
    display: flex;
    width:80%;
    height:100%;
}
div#rightMargin {
    display: flex;
    width:6%;
}
img.logo {
    max-height: 120px;
}
img#compsci.logo {
    margin-left:40px;
}
img#awildboarafloat.logo {
    margin-left:40px;
}
img#archaeowitness.logo {
    margin-left:35px;
}
div.brand a.sector img.logo {
    opacity: 0.5;
    margin-left: 50px;
    max-height: 80px;
    height: auto;
    width: auto\9; /* ie8 */margin-left:30px;
}
div.brand a.sector img#compsci.logo {
    margin-left: 60px;
} 
div.brand a.sector img#awildboarafloat.logo {
    margin-left: 60px;
}
div.brand a.sector img#archaeowitness.logo {
    margin-left: 60px;
} 
img.logo:hover {
    opacity: 1;
}
div.brand a.sector img.logo:hover {
    opacity: 1;
}
div.stream {
    float: top;
    flex: 1;
    /*flex-wrap: wrap; */
    margin-top: 10px;
    min-height: 160px;
    height:auto;
    border-bottom: 2px solid gray;
}
div.brand {
    max-width: 200px; 
    text-align: left;
    margin-bottom: 20px;
}
div.sectorname {
    text-align: center;
    font-size:75%; 
    margin-bottom: 10px;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a.sector {
    display:inline;
    min-width:auto;
}
a.sector:hover {
    display:inline;
    min-width:auto;
    text-decoration: none;
}
a.smlink_a {
    display:block;
    min-width: 40px;
    color:rgb(132, 42, 179);
}
a.smlink_a:hover {
    display:block;
    min-width: 40px;
    color:rgb(254, 188, 66);

}
a.smlink_c {
    display:block;
    min-width: 40px;
    color:#444;
    text-decoration: none;
}
a.smlink_c:hover {
    display:block;
    min-width: 40px;
    color:#777;
    text-decoration: underline;
}
a.smlink_p {
    display:block;
    min-width: 40px;
    color:rgb(168, 73, 30);
    text-decoration: none;
}
a.smlink_p:hover {
    display:block;
    min-width: 40px;
    color:rgb(254, 188, 66);
    text-decoration: underline;
}
blockquote.instagram-media {
    float: left;
    height: 120px;
    width: 60px;
}
script.content {
    height: 120px;
    width: 60px;
}
em.arrivingsoon {
    display:block;
    margin-top: 40px;
    font-weight: 600; 
    color: #bbbbbb; 
    font-style: normal;
}
/* Container Method for 300px Instagram Embed */ 
/* Formula: Scale Factor = Desired Width ÷ Original Width

    Examples:
        • For 300px: 150 ÷ 540 = 0.28 
        • For 300px: 300 ÷ 540 = 0.56
        • For 400px: 400 ÷ 540 = 0.74
        • For 250px: 250 ÷ 540 = 0.46
*/
.instagram-container { 
    float: left;
    width: 120px; /* Your desired width */ 
    height: 160px; /* Your desired height */ 
    margin-left:10px;
    overflow: hidden; /* Hide overflow from scaling */ 
    /* border: 2px solid #e1306c; /* Optional: Instagram-like border */ 
    border-radius: 8px; /* Optional: rounded corners */ 
    position: relative; /* For proper positioning */ 
    background: #fff; /* Background color */ 
} 
.instagram-container .instagram-embed { 
    width: 540px; /* Original Instagram width */ 
    height: 540px; /* Original Instagram height */ 
    transform: scale(0.28); /* 300/540 = 0.56 */ 
    transform-origin: top left; /* Scale from top-left corner */ 
}
div.youtube-container { 
    float: left;
    height: 128px;
    width: 216px;
    padding-top: 2px;;
    margin: 0 30px 5px 8px;
    background-color: black;
    border-radius: 4px;
    border: 1px solid #dfdfdf;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
div.youtube-container img {
    height:120px;
    width:213px;
}

/* Make the layout responsive */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto;
    }
          
    .leftMargin, .content, .rightMargin {
        width: 100%;
    }
}