﻿/* @import url('https://fonts.googleapis.com/css?family=Roboto|Rock+Salt&display=swap'); */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html {
  scroll-behaviour:smooth;
}
body_nyt {
  width:90%;  
  margin:auto; 
/*  font-family:"Times New Roman", Times, serif; */
  font-family:"Lato", sans-serif;
  background:#fff;
  color:#000;
  line-height:1.5;
  font-size:16px;
}
ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
a {
  color:#111;
  text-decoration:none;
}
.bb {
  border-bottom:1px solid lightgrey;
  margin:0 1em;
}
.br {
 /*border-left:1px solid #999;*/
  padding:0 1em;
}
.bruno {
 border-left:1px solid #999;
  padding:0 1em;
}
h3 {
  line-height:1.3;
}

h8 {
  line-height:1.8;
  color:#b7703c;
}

h8 a {
  color:#910101;
}

h8 a:hover {
  color:#6b6fff;
  font-size: 17px;
  line-height:.9;
}

.title {
  font-weight:800;
  foint-size:1.3em;
}
.bleed {
	width: 90%;
	margin: auto;
	grid-column: 1 / -1;
	padding: 1em 0;
	position: relative;
	right: 58%;
	left: 42%;
	font-size: x-large;
	font-weight: bold;
}
.lead {
  color:#333;
  font-size:1em;
  padding:0.5em 0;
}
.small {
  font-size:0.7em;
  color:grey;
  line-height:1.2;
}
img {
width:100%;
}
#logo {
  font-family: 'Rock Salt', cursive;
  border-bottom:1px solid lightgrey;
  text-align:center;
  font-size:2.5em;
  text-transform:uppercase;
  font-weight:bold;
  padding:.5em;
}
/*navbvar*/
#navbar {
  border-bottom:1px solid #000;
  font-size:0.79em;
}
#navbar ul{
  display:grid;
  grid-template-columns:repeat(15,1fr);
  text-align:center;
  text-transform:uppercase;
  padding:.5em 0;
}
.active {
  color:red;
  text-decoration:none;
  transition:1s all;
}
.active:hover {
color:#000;
text-decoration:underline;
}
/*showcase*/
#showcase {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid #000;
}
.img-txt {
  position:relative;
display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:1em 1em;
  margin:1em 0;
}
#showcase .br {
  border-left:1px solid lightgrey;
  padding:0 1em;
}
.img-txt p {
font-size:0.89em;
}
/* the major blog posts begin from here */
.container_nyt {
  width:90%;
  dislay:grid;
  grid-template-columns:4fr 2fr;
}
/* in the news */
#in-the-news {
  display:grid;
  grid-template-columns:4fr 2fr;
  grid-gap:1em 1em;
  margin:1em 0;
  width:90%;   /*  ----------------------------------------------------------  added by me  */
  margin:auto;
/*  border-top: 1px double #111; */
}
/*1x2 grids*/
.one-and-two{
  display:grid;
  grid-template-columns:1fr 2fr;
  grid-gap:1em 1em;
  /*border-bottom:1px solid lightgrey;*/
  padding:1em 0;
}
.one-and-two img {
  height:350px;
}
/*1x2 grids*/
/*one-by-one*/
.one-by-one {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:1em 1em;
  padding:1em 0;
  /*border-bottom:1px solid lightgrey;*/
}
/*one-one-one-grids*/
.one-one-one {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:1em 1em;
  padding:1em 0;
  /*border-bottom:1px solid #000;*/
}
/* two by one grid */
#two-by-one {
display:grid;
  grid-template-columns:2fr 1fr;
  grid-gap:1em 1em;
  padding:1em 0;
}
/* opinion */
/* opinion post belong here*/
.article-header {
 display:grid;
  grid-template-columns:2fr 1fr;
  grid-gap:1em 1em;
}
.article-header h3 {
  color:lightgrey;
  font-weight:400;
  font-size:0.89em;
  text-transform:Capitalize;
}
.article-header img {
  border-radius:50%;
  width:50%;
}
/* editors pic */
.editor-pic > section {
  padding:1em;
}
.editor-pic > .one-by-one:last-child {
  border-bottom:none;
}
/* in other news */
#in-other-news {
  border-top:double 1px #111;
  width:90%;
  margin:auto;
/*  margin:3em 0; */
}
#in-other-news .grid{
display:grid;
  grid-template-columns:2fr 2fr 1fr;
}
#in-other-news .grid  article{
  text-align:center;
}
#in-other-news .br {
  border-color:lightgrey;
}
.grid main {
  margin-left:1em;
}
.grid main > .one-by-one:first-child {
padding-top:0;
}
.grid main > .one-by-one:last-child {
border:none;
}
.grid aside .title {
padding:1em 0;
  border-bottom:1px solid lightgrey;
}
.grid aside > .title:last-child {
border:none;
}

.grid aside > .title:first-child {
  padding-top:0;
}
/*smarter living*/

.divisorio {
	background: linear-gradient(238.45deg, #8dafcb 3.32%, #d7e7f7 98.6%);
	width: 50%;
	right: 25%;
	bottom: 25%;
	border-bottom-style: 1;
	border-top-color: #999999;
}
#smarter-living {
	border-top: 1px double #CC99FF;
	width: 90%;
	margin: auto;
	display: grid; /*  grid-template-columns:repeat(5,1fr);  */;
	grid-template-columns: repeat(6,1fr);
	padding-bottom: 70px;
	border-top-color: #0099CC;
}
#smarter-living-divide {
	border-radius: 1px;
	box-shadow: #0099CC;
	border-top: 3px #CC99FF;
	width: 20%;
	margin: auto;
	display: grid; /*  grid-template-columns:repeat(5,1fr);  */;
	grid-template-columns: repeat(6,1fr);
	padding-bottom: 10px;
	right: 40%;
	left: 40%;
	border-top-style: solid;
	border-top-width: 7px;
	border-top-color: #0099CC;
}
#smarter-living-divide-1 {
	border-radius: 1px;
	box-shadow: #0099CC;
	border-top: 1px #CC99FF;
	width: 45%;
	margin: auto;
	display: grid; /*  grid-template-columns:repeat(1,1fr);  */;
	grid-template-columns: repeat(1,1fr);
	padding-bottom: 20px;
	right: 0%;
	left: 90%;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #0099CC;
}
.smart-living article .br {
  border-left:1px solid lightgrey;
}
/* featured*/
#featured {
  width:90%;
  margin:auto;
  border-top: 1px double #111;
  display:grid;
  grid-template-columns:3fr 2fr;
}
#featured main {
text-align:center;
}
#featured main img {
width:80%;
}
#featured main h3 {
font-size:2em;
}
#featured main p {
  font-size:1.5em;
}
#featured .br {
border-color:lightgrey;
}
#featured aside > p:first-child {
  color:#111;
}
#featured .one-by-one:first-child {
  padding-top:0;
  margin-top:0;
}
#featured .one-by-one:last-child {
 border:none;
}
/* most popular */
#most-popular {
  border-top: 1px double #111;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  padding:1em 0em;
}
#most-popular .br {
  border-color:lightgrey;
}
/*discovery*/
#discovery {
	width: 90%;
	margin: auto;
/*  border-top: 1px double #111;  // ************************ cerco di ammazzare le linee  */display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1em;
	padding: 1em 0em 0px 0em;/*****60****/
}
#discovery .one-by-one:first-child {
  padding-top:0;
}
#discovery .one-by-one:last-child {
  border:none;
}
#discovery .br {
}
/*discovery*/
#discovery2 {
	width: 90%;
	margin: auto;
/*  border-top: 1px double #111;  // ************************ cerco di ammazzare le linee  */display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1em;
	padding: 1em 0em 0px 0em;/*****60****/
}
#discovery2 .one-by-one:first-child {
  padding-top:0;
}
#discovery2 .one-by-one:last-child {
  border:none;
}
#discovery2 .br {
  border-color:lightgrey;
}

/* footer*/
#main-footer {
display:grid;
grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid lightgrey;
  border-top:2px double grey;
  MARGIN:1em 0em;
  
}
#main-footer h3 {
  font-weight:bold;
  font-size:0.95em;
}
#main-header ul li {
  font-size:0.89em;
  text-transform:capitlize;
}
/* media queries */
@media screen and (max-width:500px) {
  #showcase {
    display:none;
  }
  .featured {
     grid-template-columns:1fr;
  }
  #most-popluar {
     grid-template-columns:1fr;
  }
  #discovery {
     grid-template-columns:1fr;
     
  } 
   #discovery2 {
     grid-template-columns:1fr;
     
  } 
 
  .one-by-one {
     grid-template-columns:1fr;
  }
  .one-and-one {
     grid-template-columns:1fr;
  }
  .one-one-one {
     grid-template-columns:1fr;
  }
  #main-footer {
  grid-template-columns:1fr;
  }
}
/*   frame around the video    */
.vid-border{
  position: relative;
  height: 387px;
  width: 580px;
  border: 1px dotted grey;
  overflow: hidden;
}

.vid-border-fev{
	position: relative;
	height: 387px;
	width: 580px;
	border: 3px solid #8c113c;
	overflow: hidden;
}
