/*!
Theme Name: News Site
Theme URI: https://newssite1.weebly.com/
Author: Achyut Kumar De
Author URI: https://achyutkumarde.github.io/
Description: Theme for an awesome news site
Version: 1.0.23
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: news-site
Tags: news, custom-background, custom-menu, featured-images, threaded-comments

This theme, like WordPress, is licensed under the GPL.

news-site is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*
Index
  0.  Varaibles
  1.  Intializing 
  2.  Header
  3.  Menu
  4.  Posts
  5.  Single Page
  6.  Navigation
  7.  Sidebar
  8.  Footer
  9.  Comments
  10. Screen size adjustment 
  11. Home Page Animation
  12. Misc

  

0. Varaibles ####################################################################################################*/

:root{
  --themecolor:chocolate;
  --topheight:calc(100px);
  --categoryscroll:0px;
}
/*
1. Intializing###################################################################################################*/

body, div, p, span, a, article, aside, ul, li {
  padding: 0;
  margin: 0;
  font-size: 16px;
}
a {
  color: black;
  text-decoration: none;
}
.hide {
  visibility: hidden;
  display: none;
}


/*
2. Header#########################################################################################################--*/

#masthead {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--topheight);
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  z-index: 2;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
#masthead.scrolled{
  -webkit-transform: translateY(-150px);
      -ms-transform: translateY(-150px);
          transform: translateY(-150px);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

#masthead.scrolled .site-branding{
  position: fixed;
  left:0px;
  -webkit-transform: translateY(150px);
      -ms-transform: translateY(150px);
          transform: translateY(150px);
  -webkit-transition:0.8s;
  -o-transition:0.8s;
  transition:0.8s; 
}
.admin-bar #masthead.scrolled .site-branding{
  -webkit-transform: translateY(120px);
      -ms-transform: translateY(120px);
          transform: translateY(120px);
}
#masthead.scrolled .site-title{
  background: rgba(0,0,0,0.8);
  -webkit-box-shadow: black 10px 10px 10px;
          box-shadow: black 10px 10px 10px;
}
.admin-bar #masthead.scrolled .site-branding{
  top:32px;
}
#masthead.scrolled .site-branding p{
  visibility: hidden;
}
.admin-bar #masthead {
  top: 32px;
}
#masthead.scrolled .site-branding .site-title{
  visibility: visible;
}

.site-branding {
  margin: 5px 25px;
  text-align: center;
}
.category .page-header h1{
  display: none;
}

/*
3.Menu #############################################################################################################*/

#icons, #sidebarToggle{
  margin: auto 0;
}
#sidebarToggle{
  margin-left: 10px;
}
.menuitems svg{
  cursor: pointer;
  width: 2em;
  fill: var(--themecolor);
  margin-right: 1em;
}
#screenmenuclose{
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
#sideToggleShow{
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
#sideToggleHide.nomenu{
  -webkit-transform: translateY(-300px);
      -ms-transform: translateY(-300px);
          transform: translateY(-300px);
}

.site-title {
  display: inline-block;
  color: black;
  font-weight: 900;
  margin: 5px 0 0 0;
  padding: 5px 10px;
  white-space: nowrap;
  font-size: 1.1em;
}

.site-title a {
  font-size: 2em;
  color: var(--themecolor)
}

.site-description {
  font-size: 0.8em;
}

/*
4.Posts ##############################################################################################################*/

img {
  margin: 2%;
  overflow: visible;
}

.alignright {
  float: right;
}

.alignleft {
  float: left;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figcaption {
  text-align: center;
}
p {
  margin: 1%;
}

li {
  margin-left: 1em;
  list-style-type: none;
}

address {
  margin-left: 2%;
}


.categories{
  visibility: hidden;
}
.categories ul{
  visibility: visible;
  width: 80%;
  margin: auto;
  list-style-type: none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.home main{
  padding-top: 0px;
}
#content{
  margin-top: calc(var(--topheight) + 1.6em);
}
main {
  text-align: center;
}

.archive article figure, .archive article .entry-content,.archive article img{
  margin: 0;
  width: 100%;
}
.home article figure, .home article .entry-content,.home article img{
  margin: 0;
  width: 100%;
}
figure {
  max-width: 100%;
}


/*
4.1 Block version ####################################################################################################*/
article {
  position: relative;
  display: inline-block;
  margin: 0.5%;
  width: 32%;
  height: 300px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 2px black;
          box-shadow: 0 0 2px black;
  background: white;

}
.home article.emphasis:nth-child(1){
  float:left;
  width: 65.5%;
  height: 615px;
  margin-left: 0.45%;
}
.home article.has-post-thumbnail .entry-content,
.archive article.has-post-thumbnail .entry-content{
  top: 0;
}
.home article .entry-content,.archive article .entry-content{
  position: relative;
  top: 2.5em;
  margin: 3%;
  width: 94%;
}


.home article footer,.archive article footer{
  display: none;
}

article .attachment-post-thumbnail {
  width: 265px;
  height: auto;
}

.entry-title {
  padding: 0;
  margin: 0;
}

article .entry-header {
  position: absolute;
  top: 0;
  color: black;
  margin: 6% 3%;
  padding: 0.1% 0.5%;
  text-align: Left;
  max-width: 87%;
}
article.has-post-thumbnail .entry-header {
  background: rgba(255, 255, 255, 0.8);
  
}

#spacerDiv {
  min-height: 3em;
}

article .entry-content {
  margin: 0 5px;
  text-align: justify;
}

article a {
  color: black;
}

article .posted-on, article .byline {
  display: none;
}


.cat-links a {
  margin: 5px;
}

article .entry-footer span {
  margin: 5px;
}

time {
  padding: 2px;
}

/* 
4.2- Fullwidth version ##################################################################################################*/

article.fullwidth{
  width: 90%;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.6);;
  height: auto;
  max-height: 300px;
  margin: 1.5% 0;
}
article.fullwidth .attachment-post-thumbnail {
  height: 250px;
  width: auto;
  float:left;
  margin:0.1em 1em 1em 0.1em;
}
.home article.type-post.fullwidth:hover {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
article.fullwidth .entry-header{
  margin: 2% 1%;
}

/*
4.3 Single article ####################################################################################################*/

.single article {
  width: 95%;
  height: auto;
  text-align: left;
  -webkit-box-shadow: 0 0 0 0;
          box-shadow: 0 0 0 0;
  border-bottom:1px solid black;
}
.single article, .single #comments, .single nav.navigation{
  transform: translateX(100vw);
}
.single article.ingrid, .single #comments.ingrid, .single nav.navigation.ingrid{
  transform: translateX(0vw);
  transition: 0.5s;
}

.single article .attachment-post-thumbnail {
  width: 50%;
  height: auto;
  float: left;
  margin: 0 20px 0 10px;
  min-width: 400px;
  border-radius: 0px;
}

.single .entry-header {
  margin: 2px;
  position: relative;
  display: inline-block;
  background: rgba(0, 0, 0, 0);
}

.single .entry-header h1 {
  font-size: 2em;
}

.single .entry-content {
  padding: 10px;
  margin: 0 30px 0 0;
}

.single .posted-on, .single .byline {
  display: inline-block;
}

.single main a {
  text-decoration: underline;
}

.single .entry-meta span{
  font-size:8px;
}
.single .entry-meta a{
  font-size:8px
}

/*
5.Single Page #########################################################################################################*/
.page article {
  width: 90%;
  height: auto;
  -webkit-box-shadow: 0 0 0 0;
          box-shadow: 0 0 0 0;
}

.page .entry-header {
  position: relative;
  font-size: 2em;
  margin: 1.5% 0;
}

.page .entry-header h1 {
  font-size: 1.1em;
}
iframe{
  width: 100%;
  height: auto;
}
.entry-content img{
  width: 200%;
  height:auto;
  margin-top:0;
}

/*
6.Navigation ##########################################################################################################--*/

.nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 98%;
  margin: 20px auto;
}

.nav-links div {
  padding: 2px 5px;
  border: 1px solid rgba(0,0,0,0.2);
}

.nav-links div:hover {
  background: var(--themecolor);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.nav-links div:hover a {
  color: white;
  display: block;
}


.navigation .nav-links a {
  font-size: 1.1em;
  
}
/*
7. Sidebar ############################################################################################################--*/

.sidebartoggled aside{
  display: block;
  
}

aside{
  display: none;
  position: fixed;
  z-index: 10;
  overflow: scroll;
  height: calc(100vh - var(--topheight));
  overflow: scroll;
  padding-left: 2%;
  width: 30%;
  background: rgba(255,255,255,1);
}
#menuholder_sidebar{
  padding: 1em 0;
}
.menu-item a{
  padding: 0 1em 0 0.5em;
}
.menu-item a:hover{
  background: var(--themecolor);
}
aside section{
  margin-top: 10px;
}
aside h2{
  text-align: center;
  -webkit-box-shadow: var(--themecolor) 0px 0px 10px;
          box-shadow: var(--themecolor) 0px 0px 10px;
}
.sidebartoggled #content{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
aside input{
  width: 97%;
  margin: 1%;
}
aside figure{
  width: 100%;
  padding: 0;
  margin: 0;
}
aside select{
  width: 97%;
}
aside img{
  width: 100%;
  height: auto;
}
aside li{
  list-style-type: none;
  padding: 1%;
}
aside section ul li:nth-child(odd){
  background: rgba(0,0,0,0.1);
}

aside section{
  width: 97%;
  overflow: hidden;
}


.loaded #loadBackground,.loaded #loadAnime,.loaded #loadingDiv{
  transform:translate(0,-150vh);
  transition: 2s;
}
.loadScreen{
  position: fixed;
  height: 12vh;
  display: none;
}
.home .loadScreen{
  display: block;
}
#loadBackground{
  background: black;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
#loadAnime{
  background: var(--themecolor);
  top: 40vh;
  left: -10em;
  width: 10vh;
  z-index: 12;
  transition:2s;
}
#loadAnime.animate{
  transform: translateX(120vw);
  transition: 2s;
}
#loadingDiv{
  font-size: 10vh;
  font-weight: bold;
  background: rgba(255,255,255);
  color: var(--themecolor);
  text-align: center;
  width: 100%;
  
  top: 40vh;
  z-index: 11;
}

#modal{
  display: none;
  position: fixed;
  left: 0;
  top:0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  background: rgba(0, 0, 0, 1);
}
.admin-bar #modal{
  top:calc(var(--topheight) + 35px);

}

.sidebartoggled{
  overflow: hidden;
}
.sidebartoggled #content #modal{
  display: block;
  top:var(--topheight);
  background: rgba(0, 0, 0, 0.8);
}
/*
8. Footer ##########################################################################################################--*/

footer .categories{
  width: calc(100vw - 40px);
  overflow: hidden;
}

footer .categories ul{
  position: fixed;
  min-width: 100%;
  bottom: 0px;
  height: 1.6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  z-index: 5;
  -webkit-transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em));
      -ms-transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em));
          transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em));
}

.admin-bar footer .categories ul{
  -webkit-transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em + 35px));
      -ms-transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em + 35px));
          transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em + 35px));
}
footer .categories ul li{
  text-align: center;
  margin: 0;
  height:1.5em;
  background: rgba(0,0,0,0.8);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-width: 6em;
  
}
footer .categories ul li ul{
  display: none;
}
footer .categories ul li a{
  color: white;
}
footer .categories ul li.active{
  background: var(--themecolor);
  padding-left: 10px;
  padding-right:10px;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}
footer .scrolled .categories ul{
  display: none;
  -webkit-transform: translate(-16px, calc(-100vh + var(--topheight) + 1.8em -150px));
      -ms-transform: translate(-16px, calc(-100vh + var(--topheight) + 1.8em -150px));
          transform: translate(-16px, calc(-100vh + var(--topheight) + 1.8em -150px));
  -webkit-transition-delay: 0.5s;
       -o-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

.arrows{
  display: none;

}
.home .arrows{
  display: block;
  background: rgba(0,0,0,0.6);
  fill: var(--themecolor);
  position:fixed;
  cursor: pointer;
  top:100x;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 1.4em;
  z-index: 10;
}
#leftArrow{
  left: 0px;
}
#rightArrow{
  right: -5px;
}
.home .arrows.scrolled{
  display: none;
  
}

/*
9. Comments #############################################################################################################--*/
#respond,.comments-title{
  background: rgba(0,0,0,0.1);
  
}
.comment-form,.comment-list{
  display: none;
}
.comment-form.show,.comment-list.show{
  display: inline-block;
}

#reply-title, .comments-title{
  cursor: pointer;
}
.comment-form p {
  width: 500px;
  margin: auto;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

article.comment-body {
  width: 500px;
  padding: 10px 35px;
  margin: 10px;
  border-radius: 20px;
}

.comment-list {
  list-style-type: none;
}

.comment-author {
  background: rgba(255, 255, 255, 0.7);
  padding: 10px;
}

.comment-metadata {
  margin: 10px 0;
}

.comment-metadata time {
  font-size: 0.7em;
}
.comment-form .submit{
  width: 100%;
}
.reply {
  margin: 15px 0;
}

#signature {
  text-align: center;
  padding: 0 20px;
}

#signature a {
  color: blue;
  text-decoration: underline;
}
/*
10.Screen size adjustment #########################################################################################################--*/
@media only screen and (min-width: 1300px) {
  .home article.emphasis:nth-child(1),.archive article.emphasis:nth-child(1){
    clear: both;
    width: 48%;
  height: 620px;
  }
  .home article.emphasis,.archive article.emphasis{
    width: 23.7%;
  }
}
@media only screen and (max-width: 850px) {
  .home article.emphasis:nth-child(1),.archive article.emphasis:nth-child(1){
    clear: both;
    width: 100%;
    margin: 0;
    height: 500px;
  }
  .home article.emphasis,.archive article.emphasis{
    width: 48%;
  }
}
@media only screen and (max-width: 792px) {
  .categories, .arrows{
    display: none;
  }
}
  @media only screen and (max-width: 592px) {
  #masthead{
    width: 100%;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  #masthead .site-branding{
    margin-left: 0;
  }
  .admin-bar #masthead.scrolled .site-branding{
    left: 10px;
    -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
            transform: translateY(80px);
  }
  #masthead.scrolled .site-branding{
    -webkit-transform: translateY(150px);
        -ms-transform: translateY(150px);
            transform: translateY(150px);
    
  }
  #masthead .entry-header{
    max-width: 300px;
  }
  .home article.emphasis,.archive article.emphasis{
    width: 100%;
  }
  .home .post,.archive .post {
    margin: 0;
    width: 90%;
    margin: 2%;
    height: auto;
  }

  .home .post .entry-content ,.archive .post .entry-content {
    max-height: 100px;
    overflow: hidden;
  }
  .home .post footer,.archive .post footer {
    display: none;
  }
  .home article .attachment-post-thumbnail, .archive article .attachment-post-thumbnail {
    width: 100%;
  }
  .comment-form p {
    width: 95%;
    margin: 0;
  }
  textarea {
    width: 200px;
  }
  .page .post-thumbnail {
    min-width: 0%;
  }
  #grid1{
    display: none;
  }
  .sidebartoggled aside{
    width:80%;
  }
  #content #primary{
    width: 99%;
  }
  article.has-post-thumbnail{
    -webkit-box-shadow: 0 0 0 0;
            box-shadow: 0 0 0 0;
  }
  .home article.has-post-thumbnail p, .archive article.has-post-thumbnail p{
    display: none;
  }
  .home article,.archive article{
    min-height: 120px;
  }

  .home article.emphasis:nth-child(1),.archive article.emphasis:nth-child(1){
    height: auto;
  }
  .sidebartoggled #content #primary{
    width: 100%;
    height: 100%;
  }
  #content #primary img{
    padding: 0;
    margin: 0;
    float: none;
  }
  footer .categories ul{
    -webkit-transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em + 16px));
        -ms-transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em + 16px));
            transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em + 16px));
  }
  .admin-bar footer .categories ul{
    -webkit-transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em + 51px));
        -ms-transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em + 51px));
            transform: translate(calc(-16px - var(--categoryscroll)), calc(-100vh + var(--topheight) + 1.8em + 51px));
  }
  .arrows{
    -webkit-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}




/*
11. Home Page Animation ##################################################################################################################--*/




/*
12.Hide ###############################################################################################################*/

.skip-link, .menu-toggle, .screen-reader-text, .smallscreen {
  display: none;
}

.wp-caption, .wp-caption-text, .sticky, .gallery-caption, .bypostauthor, .alignright, .alignleft, .aligncenter {
  background: rgba(0, 0, 0, 0);
}