@charset "utf-8";
.container {
    color: #000000;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    font-style: normal;


}
.container header {
    background-color: #1848D9;
    color: #F2E205;
    height: 150px;
    padding-bottom: 5px;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    text-align: center;
}
.container nav {
    background-color: #01FD35;
}

.container aside {
    background-color: #909090;
    float: none;

}
.container main {
    background-color: #FFFFFF;
    max-width: 80%;
	margin:auto;
    padding: 30px;
	color: #000000;
	font-size:1.2em;

}
.container main figure {
    color: #000000;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    background-color: #C7C7C7;
}


.container footer {
    background-color: #1848D9;
    color: #F2E205;
    height: 50px;
}
.container main .sources {
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;

}
.container-cell-content   {
    color: #000000;
    width: 30%;
    height: 30%;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    vertical-align: bottom;
    text-align: center;
}

/* ==========================================================
   PHOTO - FLOAT LEFT
   ==========================================================

   Use when you want the image centered on the page with
   the caption underneath.

========================================================== */

.article-photo-left{
    float:left;
    width:35%;
    margin:0 40px 30px 0;
    text-align:center;
}

.article-photo-left img{
    width:100%;
    cursor:pointer;
}

.article-photo-left figcaption{
    margin-top:1px;
    font-size:0.9em;
    line-height:1.4;
    color:#000000;
    font-style:bold;
}

/* ==========================================================
   PHOTO - FLOAT RIGHT
   ==========================================================

   Use when the image should appear on the RIGHT side of the
   page and the article text should wrap around the LEFT.

========================================================== */

.article-photo-right{
    float:right;
    width:35%;
    margin:0 0 20px 30px;
    text-align:center;
}

.article-photo-right img{
    width:100%;
    cursor:pointer;
    display:block;
}

.article-photo-right figcaption{
    margin-top:1px;
    font-size:0.9em;
    color:#000000;
    line-height:1.4;
	font-style:bold;
}

/* ==========================================================
   PHOTO - CENTER
   ==========================================================

   Use when you want the image centered on the page with
   the caption underneath.

========================================================== */

.article-photo-center{
    width:60%;
    margin:30px auto;
    text-align:center;
}

.article-photo-center img{
    width:100%;
    cursor:pointer;
    display:block;
}

.article-photo-center figcaption{
    margin-top:1px;
    font-size:0.9em;
    color:#000000;
    line-height:1.4;
	font-style:bold;
}

/* ==========================================================
   THREE PHOTO ROW
   Displays three photos evenly across the page.
========================================================== */

.photo-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin:30px 0;
}

.photo-row figure{
    flex:1;
    margin:0;
    text-align:center;
}

.photo-row img{
    width:100%;
    cursor:pointer;
    border-radius:6px;
}

.photo-row figcaption{
    margin-top:1px;
    font-size:0.9em;
    color:#000000;
    line-height:1.4;
	font-style:bold;
}

/* ==========================================================
   CLEAR FLOATS
   ==========================================================

   Insert this after a left/right image when you want the
   next section of text to begin below the image instead of
   wrapping around it.

   Example:

   <div class="clear"></div>

========================================================== */

.clear{
    clear:both;
}