/*
Theme Name: GlasgowGuardian2020
Author: Krishang Patney
Description: The new theme page for GG
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
*/

.body{
    display: flex;
}

.logo{

  width: 100%;
  max-width: 450px;
  height: auto;

  display: block;
  margin-left: auto;
  margin-right: auto;

}

#card{
  cursor: pointer;
}
/* Navigation Bar  */

.navBar{
  list-style:none;
  text-decoration: none;
  margin:0;
  padding:0;
  text-align:center;
  
}
.navBar li{
  display:inline;
}
.navBar a{
  text-decoration: none;
  display:inline-block;
  padding:10px;
  color: black;
} 



.navBar > li:not(:last-child) {
  border-right: 1px solid black;
  box-sizing: border-box;
}
.navBar{
  border:1px solid #ccc;
  border-width:1px 0;
}



/* Footer Navigation Bar  */
.footerNav{
    list-style:none;
    text-decoration: none;
    margin:0;
    padding:0;
    text-align:center;
}
.footerNav li{
    display:inline;
}
.footerNav a{
    display:inline-block;
    padding:10px;
    color: white;
}

.underLogo{
  text-decoration: none;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
.underLogo li{
  display:inline;
}
.underLogo a{
  display:inline-block;
  padding:10px;
  color: black;
}

.underLogo > li:not(:last-child) {
  border-right: 1px solid black;
  box-sizing: border-box;
}

.mobilenav {
  list-style:none;
  text-decoration: none;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 0.9;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.mobilenav a {
  font-family: "Times New Roman", Times, serif;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.mobilenav a:hover {
  color: #f1f1f1;
}

.mobilenav .closebtn {
  position: absolute;
  top: 0;
  right: 55px;
  font-size: 36px;
  margin-left: 60px;
}

/* From here on is the meat of the code */
div.fill {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden
}
div.fill img {
  flex-shrink:0;
  min-width:100%;
  min-height:100%
}

/* Contact Logos Black  */
.fa{
    color: black;
    height: 20px;
    width: 20px;
}

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

#mc-embedded-subscribe-form input[type=checkbox]{display: inline; width: auto;margin-right: 10px;}
#mergeRow-gdpr {margin-top: 20px;}
#mergeRow-gdpr fieldset label {font-weight: normal;}
#mc-embedded-subscribe-form .mc_fieldset{border:none;min-height: 0px;padding-bottom:0px;}

/* Stuff */
.news{
	color: rgb(237, 31, 36); /*red*/
}
.multimedia{
	color: orange; /*red*/
}
.science-and-technology{
 	color: rgb(118, 70, 255); /*purple*/
}
.news a{
	color: rgb(237, 31, 36); /*red*/
}
.multimedia a{
	color: orange; /*red*/
}
.science-and-technology a{
 	color: rgb(118, 70, 255); /*purple*/
}
.features{
	color: rgb(253, 195, 0); /*dark yellow*/
}
.features a{
	color: rgb(253, 195, 0); /*dark yellow*/
}
.views{
	color: rgb(0, 159, 238); /*blue*/
}
.views a{
	color: rgb(0, 159, 238); /*blue*/
}
.culture{
	color: rgb(230, 63, 155); /*purple*/
}
.culture a{
	color: rgb(230, 63, 155); /*purple*/
}
.sport a{
	color: rgb(46, 138, 86); /*green*/
}
.sport {
	color: rgb(46, 138, 86); /*green*/
}

.TNR{
  font-family:"Times New Roman", Times, serif;
   }
.fa{
  color: black;
}            
.vl {
  border-left: 1px solid black;
  height: 500px;
}
/* Archive Page stuff */
/* kept as inline style */

/* On Desktop */
@media only screen and (min-width: 900px) {
 
.menu-item a{
font-family: Georgia, 'Times New Roman', Times, serif;
  text-decoration: none;
}

.menu-item a:hover{  
  font-weight: bold;
  font-size:17px;
}
  .mobile{
    display: none;
  }
  .articleImage{
    height: auto;
    width: 700px;
  }
}
/* On mobile */
@media only screen and (max-width: 900px) {
  
  .articleImage{
    height: auto;
    width: 300px;
  }
  .opennav{
    display: block;
    margin: 0;

    position: absolute;
    top: 50%;
    left: -100%;
    
    transform: translate(-50%, -50%)
  }
  .bigScreen{
    display: none;
  }
  .logo1{
    display: block;
    height: 55px;
    margin-left: 15px;
    width:auto;
    
  }
}

#content .items .content p { text-align: justify; }