/*Reference 
    Lines 14-72: Global Section
    Lines 73-157: Text Section
    Lines 158-198: Navigation Bar
    Lines 199-227: Banner Section
    Lines 228-264: Home Page
    Lines 265-341: Articles Page
    Lines 342-373: About Page
    Lines 374-401: Contact Page
    Lines: 402-451: Footer
*/

/*Developer Note: This code was formatted for a computer screen which is 13 inches wide and has a resolution of 1280 x 720*/
/*--------------------------------------------------------------------------------------Custom Font--------------------------------------------------------------------------------------*/
@font-face {
    font-family: 'fastup';
    src: url('fastupsc-regular-webfont.woff2') format('woff2'),
         url('fastupsc-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/*----------------------------------------------------------------------------------------Begin Global Section--------------------------------------------------------------------------*/

* { /*Natural Box Model*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: Helvetica, sans-serif;
    color: black;
}

body {
    font-size: 0;
    background-color: #d9d9d9; /*Options: #F0F0E1, #FFFFFF, #EEEEEE, #e7e7e7*/
}
html {
    -webkit-text-size-adjust: none;
}

.giantBox { /*Sets outmost container*/
    width: 100%;
    display: block;
}

.floatBox { /*Sets margins for all content*/
    margin: auto;
    width: 1050px; 
    display: block;
}

.clearFix::after { /*Clears floats afterwards*/
    content: "";
    clear: both;
    display: table;
}

.center { /*Aligns text center*/
    text-align: center;
}

.inlineBlock { /*Displays items in inline block*/
    display: inline-block;
}

.inline { /*Displays items in inline*/
    display: inline;
}
.rightMargin3 { /*Sets right margin for content with 3 boxes*/
    margin-right: 60px;
}

.standardPaddingTop { /*Sets standard top padding*/
    padding-top: 40px;
}

.standardPaddingBottom { /*Sets standard bottom padding*/
    padding-bottom: 40px;
}

.paddingTop { /*fixes stupid issue with articles navbar*/
    padding-top: 100px;
}
/*------------------------------------------------------------------------------------------End Global Section---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------Begin Text Section---------------------------------------------------------------------------*/

h1 { /*Article Titles*/
    font-family: Helvetica, sans-serif;
    font-size: 40px;
    color: #3D9970;
}

h2 { /*Banner Text*/
    font-size: 30px;
    font-weight: bold;
	font-style: italic;
    position: absolute;
    top: 30%;
    left: 60%;
    transform: translate(-50%, -50%);
    font-family: Times New Roman;
    color: #cc0000;
}

h3 { /*Website headings-left*/
    font-size: 24px;
    font-family: Helvetica;
    font-weight: 700;
    color: #3D9970;
    padding-bottom: 15px;
}

h4 { /*Article Subtitle Text*/
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    color: #3D9970;
}

h5 { /*Author Info*/
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
}
h6, .imageText a { /*Image Descriptions/Publication Info*/
    font-size: 14px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: grey;
}

h7 { /*Website headings-right*/
    font-size: 24px;
    font-family: Helvetica;
    font-weight: 700;
	text-align: center;
    color: #3D9970;
    padding-bottom: 15px;
}

.navItem { /*Controls the text in the top nav bar and articles nav bar */
    text-decoration: none;
	font-weight: bold;
    font-family: 'Arial';
    text-transform: uppercase;
    width: 120px;
    height: 75px;
    line-height: 70px;
    color: #d4d4d4;
}

.navLinks a { /*Sets font size of main nav bar to 16px*/
    font-size: 16px;
}

.articlesNav a { /*Sets font size of secondary nav bar to 14px*/
    font-size: 14px;
}

p, .box02 li{ /*Controls all paragraph text*/
    line-height: 2;
    color: black;
    font-size: 18px;
    font-family: helvetica, sans-serif;
}

.contactText { /*Author Info*/
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    line-height: 2;
}

.footerText{
    font-size: 18px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: lightgrey;
    text-decoration: none;
}

.green {
    color: #3D9970;
}
/*--------------------------------------------------------------------------------------------End Text Section------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------Begin Nav Bar Page Section-----------------------------------------------------------------------------*/

#navbar {
    background-color: #292929; /* Black background color */
    position: fixed; /* Make it stick/fixed */
    top: 0; /* Stay on top */
    width: 100%; /* Full width */
    transition: top 0.5s; /* Transition effect when sliding down (and up) */
    height: 132px;
    z-index: 1;
    border-bottom: 5px solid tan;
}


.navLogo { /*Floats the logo to the left of the page*/
    float: center;
}

.navLogo img { /*Sets width and height for the nav logo*/
    width: 400px;
    height: 61px;
}

.navLinks {
    float: center; /*Floats the list to the right of the logo */
	text-align: center;
}

.navItem:hover, .imageText a:hover, .footNav a:hover, .legal a:hover, .bibContent a:hover { /*Controls the effect of hovers*/
    color: #d2b48c;
}
.navItem:active, .imageText a:active, .footNav a:active, .legal a:active, .bibContent a:active { /*Controls the color when the mouse is clicked*/
    color: #85bb65;
}

.currentLink { /*Sets current website link to green*/
    color: #85bb65;
}

.imageText a, .bibContent a { /*Removes underline and sets color green*/
    text-decoration: none;
    color: #85bb65;
}
/*-----------------------------------------------------------------------------------------End Nav Bar Page Section--------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------Begin Banner Section------------------------------------------------------------------------------*/
.bannerContainer { /*Properties of the banner container*/
    position: relative;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
}

.bannerImage { /*Sets height and width for image*/
    width: 100%;
    height: 100%;
}

.privacyBanner {
    opacity: 1;
}

.bibliographyBanner {
    opacity: 1;
}

.contactBannerImage, .aboutBanner {
    opacity: 1
}
.articleBanner {
    height: 600px;
}
/*--------------------------------------------------------------------------------------------End Banner Section-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------Begin Home Page Section---------------------------------------------------------------------------*/
.recents {
    overflow: auto;
    padding: 20px 0px 20px 0px;
}

ul {
    list-style: none; /* Remove default bullets */
}

ul li::before {
    content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #85bb65;/* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    padding: 0px 0px 0px 40px; /* Also needed for space (tweak if needed) */
    font-size: 2em;
    margin-right: 20px;
    vertical-align: middle;
}
.AnthemSection {
	
}	
.box02 {
    width: 495px;
    vertical-align: top;
}

.box02 img {
    width: 495px;
}

.innerBox {
    margin: 0 auto;
}

.homeTextDescription {
    padding-top: 15px;
}
/*--------------------------------------------------------------------------------------------End Home Page Section------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------Begin Articles Page Section---------------------------------------------------------------------------*/
.articlesNav { /*Needs to match height of nav bar*/
    text-align: center;
    background-color: #292929; /* Black background color */
    border-right: 5px solid tan;
    border-bottom: 5px solid tan;
    border-left: 5px solid tan;
	border-top: 5px solid tan;
    margin-top: 135px;
}

.articleTitle {
    padding: 40px 0px 10px 0px;
}

.articleSubTitle {
    padding: 0px 0px 40px 0px;
}

.imageDescription {
    padding: 10px 0px 0px 0px;
    line-height: 25px;
}

.cameraImage {
    display: inline;
    vertical-align: middle;
}
.cameraImage img {
    width: 25px;
    margin-right: 10px;
    height: 25px;
}

.imageText {
    display: inline;
    vertical-align: top;
}

.clockText {
    line-height: 15px;
    padding-bottom: 10px;
}

.clockImage {
    vertical-align: top;
}
.clockImage img{
    width: 15px;
    margin-right: 5px;
}

.publication {
    display: block;
    padding-top: 20px;
}

.articleText {
    width: 690px;
}

.articleImages {
    vertical-align: top;
    padding: 190px 0px 190px 0px;
    width: 300px;
}

.articleLargeImage {
    width: 1050px;
    height: 500px;
}

.articleSmallImage {
    width: 300px;
    height: 300px;
}

/*-----------------------------------------------------------------------------------------End Articles Page Section---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------Begin About Page Section----------------------------------------------------------------------------*/

.aboutImage {
    float: left;
    width: 310px;
}

.box03 {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    width: 305px;
    padding-bottom: 30px;
}

.box03 .firstImg img {
    text-align: center;
    width: 305px; /*Matches width of container*/
    height: 300px;
}

.aboutName {
    padding-bottom: 10px;
}
.history {
    padding-top: 10px;
}

.paragraphSpace {
    padding-top: 10px;
}
/*-------------------------------------------------------------------------------------------End About Page Section---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------Begin Contact Page Section---------------------------------------------------------------------------*/


.contactContent {
    padding: 30px 0px 50px 0px;
}
.contactLeftBox {
    width: 525px;
    height: 200px;
}

.contactLeftBox img {
    height: 50px;
}

.phoneIcon {
    margin-right: 20px;
}
.contactRightBox {
    vertical-align: top;
    width: 525px;
    height: 200px;
}

.contactSocial {
    padding-top: 60px;
}
/*-----------------------------------------------------------------------------------------End Contact Page Section---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------Begin Footer Page Section---------------------------------------------------------------------------*/
.footerContainer { /*Sets the width and height for the footer with the correct padding*/
    width: 100%;
    background-color: #292929; /* Black background color */
    border-top: 5px solid tan;
    height: 190px;
}

.footerContent {
    text-align: center;
}

.socialIcon img {
    height: 27px;
    margin: 5px;
}

/*Code below is modified from original code --> https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-image-swap-on-hover*/
.socialIcon { /*Sets the position to relative so on the hover, the image can go on top of it*/
    position: relative;
}

.socialIcon .socialIconTop { /*Displays as none until you over over the image*/
    display: none;
    position: absolute;
    left: 0; /*Makes sure that on the hover, the image goes directly over and not over the one to the right*/
}
.socialIcon:hover .socialIconTop { /*Displays the image inline then uses the left:0 setting to place the image over the previous one*/
    display: inline;
}

/*End code from https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-image-swap-on-hover*/

.footNav {
    padding-top: 30px;
}

.footNav a {
    text-decoration: none;
}

.socialMedia {
    padding: 15px 0px 15px 0px;
}

.companyTitle {
    padding-top: 20px;
}

/*-----------------------------------------------------------------------------------------End Footer Page Section---------------------------------------------------------------------------*/