html,body {
    background-color: #dfdfdf;
}
h1 {
    text-align:center;
}
h2 {
    color:#FFF;
    height:50px;
    margin-top:0;
    font-size: large;
    position:relative;
    display:block;
    text-align: center;
    font-size:100%; 
}
h3 {
    margin-bottom: 20px;
    font-size: 200%;
}
div#heading {
    background-color: #AAA;
}
div#container {
    position: relative;
    height:250px;
}
div.sector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:225px;
    z-index: 1;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    font-size: 24px;    
    padding-top:25px;
    text-align: center;
    min-height: auto;
}
div.sector img.logo {
    max-height: 180px;
}
div#compsci.sector img.logo {
    margin-left: 40px;
}
div#awildboarafloat.sector img.logo {
    margin-left: 40px;
}
div#archaeowitness.sector img.logo {
    margin-left: 40px;
}
div.brand {
    position:absolute;
    top: 20px;
    width: 150px;
    height: 70px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:none;
}
div.brand a.sector img.logo {
    flex-shrink: 0;
    opacity: 1;
}
div.brand a.sector img.logo:hover {
    opacity: 0.5;
}
img#awildboarafloat.logo {
    max-width: 120px;
    margin-left: 20px;
}
div.brand div.sectorname {
    width:100%;
    text-align: center;
    font-size: 100%;
}
div#leftSectorLink {
    top:40px;
}
div#leftSectorLink.brand a.sector img#compsci.logo {
    margin-left:5px;
}
div#leftSectorLink.brand a.sector img#awildboarafloat.logo {
    margin-left:10px;
}
div#rightSectorLink {
    top:40px;
    right:10px;
}
div#rightSectorLink.brand a.sector img#awildboarafloat.logo {
    margin-left:10px;
}
div#rightSectorLink.brand a.sector img#archaeowitness.logo {
    margin-left:10px;
} 
span {
    color: #CCC;
}
div#content {
    width:100%;
    height:auto;
}
div.stream {
    height: inherit ;
    float: top;
    margin-top: 10px;
    width:100%;
    text-align:center;
    border-bottom: 2px solid gray;
}
em {
    font-size: 150%;
}
div#instagram.stream {
    margin-top: 0px;
    display: flex;
    flex-direction:column;
    align-items: center;
}
div.posts {
    margin-bottom:20px;
}
div#youtube.stream {
    margin-top: 0px;
    display: flex;
    flex-direction:column;
    align-items: center;
}
div#youtube.stream div.posts {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom:0px;
}
a.sector {
    display:block;
    min-width:auto;
}
a.mlink {
    text-decoration: none;
}
a.mlink:hover {
    text-decoration: underline;
}
a#compscitrivium:hover {
    color: #FFF;
}
a#compscitrivium:visited {
    color: #FFF;
}
.instagram-container { 
    float:top;
    background:none;
    width: 250px; /* Your desired width */ 
    height: 410px; /* Your desired height */
} 
.instagram-container .instagram-embed { 
    width: 540px; /* Original Instagram width */ 
    height: 540px; /* Original Instagram height */ 
    transform: scale(0.74); /* 400/540 = 0.746 */ 
}
div.youtube-container {
    height: 370px;
    width: 644px;
    margin: 0px;
    padding-top:4px;
    border-radius: 8px;
    margin-bottom:20px;
}
div.youtube-container a img {
    height:370px;
    width:640px;
}
/*
@media only screen and (max-width: 400px) - for small mobile phones
@media only screen and (max-width: 480px) - for mobile devices
@media only screen and (max-width: 768px) - for tablets and smaller
@media only screen and (max-width: 900px) - for ipad
@media only screen and (max-width: 1024px) - for smaller laptops/tablets
*/
