*,
*::before,
*::after{
  font-family: Verdana, sans-serif;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root{
  --color-bg: #333333;
  --color-text-main: #dfdfdf;
  --color-text-header: #5782d1;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

html{
  font-size: 62.5%;
}

body{
  background: var(--color-bg);
  color: var(--color-text-main);
  font-size: 16px;
}

span, h1, h2, h4{
  font-weight: 950;
}
span, p{
  font-size: 1.2rem;
}


/*h2{
  font-size: 16px;
}*/

a:hover{
  text-decoration: underline;
}

a{
  text-decoration-line: none;
  color: var(--color-text-main);
}

span a{
  color: #aaaaaa !important;
  font-size: 1rem !important;
}

/*p{
  color: #999999;
}
*/
ul{
  list-style-type: none;
}

.yellow{
  color: #EDC001;
}
.white{
  color: #ffffff;
}
.bold{
  font-weight: 900;
}
.small{
  font-size: 0.9rem;
}

/*SIDEBAR********************************/
.nav-container{
/*  border: 2px solid white;*/
  position: absolute;
  z-index: 1; 
  top: 0; 
  left: 0;
  padding: 20px 0;
  width: 200px;

  height: 100%;
}
.navbar{
  height: 100%;
/*  width: 100%;*/
/*  background-color: #222222;*/
/*  overflow-x: hidden; */
}

/*button look to nav */
.navbar li{
  padding: 10px 0;
  margin: 0 20px;
  font-size: 1.2rem;
}
.navbar li:hover:not(.no-hover){
  background-color: #555555;
  width: 100%;
/*  margin: 0;*/
  border-radius: 5px;
/*  border: 0 solid lightgrey;*/
}

.nav-image{
  object-fit: cover;
  width: 40%;
}
.search{
  width: 80%;
  border-style: none;
  padding: 5px;
  margin: -5px;
  background: inherit;
  color: #ffffff;
  font-size: inherit;
}
.search:active{
  width: 100%;
}
.search-icon{
  max-width: 16px;
}
.search-button{
  border: 0;
}

/*Main Content***************************/
.main{
  margin: 25px 0 25px 200px
}

.primary-flex{
/*  border: 2px solid white;*/
  display: flex;
  flex-direction: row;
/*  height: 600px;*/
  height: 100%;
}
.primary-news{
/*  border: 2px solid white;*/
  width: 65%;
  font-size: 1.4rem;
}
.primary-news-picture{
  width: 100%;
  max-width: 1000px;
/*  height: 550px;*/
  object-fit: cover;
  padding: 10px 0;
}
.news-right-side{
/*  border: 2px solid white;*/
  padding: 0 50px;
  width: 35%;
  height: 100%;
}
.news-right-side li{
  padding: 15px 0;
  text-overflow: ellipsis;
}

/*List borders*/
.borders > ul > li:not(:last-child):after{
  content:"";
  margin: 0.8em 0;
  display: block;
  padding: 0px;
  border-bottom: 3px solid #444444;
}

.secondary-news-box{
/*  border: 2px solid white;*/
  display: flex;
  flex-direction: row;
  margin: 40px 0;
  height: 220px;
}

.news-box-title, .news-box-text, .news-box-image{
/*  border: 2px solid white;*/
  width: 33%;
}
/*.news-box-title{
  width: 30%;
}*/
.news-box-title h2{
  font-size: 1.6rem;
}
.news-box-title *{
  padding: 10px 0;
}
.news-box-text{
  margin: 0 40px;
  text-overflow: ellipsis;
}
.news-box-image {
  margin: 0 20px;
}
.news-box-image img{
  height: 100%;
  width: 100%;
  max-width: 500px;
  object-fit: cover;
}

.tech-crunch-premium{
  margin-top: 0px;
}
.premium-icon{
  max-width: 40px;
}



/*FOOTER*********************************/
footer{
/*  padding: 20px;*/
/*  background-color: #109c04;*/
/*  width: 100%;*/
/*  position: absolute;*/
}

.ft-list{
  color: #ffffff;
}

/**FOOTER*********************************/
footer {
  position: sticky;
  font-size: 1.5rem;
}

.media-icons li a img {
  width: 2rem;
  padding-bottom: 1rem;
}

.newsletter-form {
  font-size: 1.3rem;
  padding: 0.5rem;
  display: block;
  margin-bottom: 1rem;
}

.newsletter-button {
  display: inline-block;
  font-size: 1.3rem;
  padding: 0.5rem;
}

.footer-container {
  flex: 1;
}

.footer-main {
  font-size: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 2rem;
  background: #109c04;
  margin: 0 auto;
  text-align: left;
}

.footer-item ul li a {
  color: #dfdfdf;
}

.footer-title {
  color: #dfdfdf;
  padding-bottom: 0.5rem;
}

.footer-item-1, .footer-item-2 {
  width: 300px;
}

.footer-bottom {
  background: #000000;
  padding: 0.9375rem 1.875rem;
}

.ft-wrap {
  display: flex;
  flex-wrap: wrap;
}

.ft-wrap li {
  margin: 0.125rem 0.625rem;
  white-space: nowrap;
}

.footer-bottom .ft-wrap li:nth-last-child(2) {
  flex: 1;
}

/**MEDIA************************************/
/*Sidebars hide or collapse upon minimizing*/
.short-icon-a, .short-icon-b{
  display: none;
}

@media screen and (max-width:1440px){
  .primary-flex{
  /*  border: 2px solid white;*/
    display: flex;
    flex-direction: column;
  /*  height: 600px;*/
    height: 100%;
  }
  .primary-news{
  /*  border: 2px solid white;*/
    width: 100%;
    font-size: 1.4rem;
  }
  .primary-news-picture{
    width: 100%;
    max-width: 1000px;
  /*  height: 550px;*/
    object-fit: cover;
    padding: 10px 0;
  }
  .news-right-side{
  /*  border: 2px solid white;*/
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .news-right-side li{
    padding: 10px 0;
/*    text-overflow: ellipsis;*/
  }
  .news-right-side h2{
    font-size: 1.3rem;
  }
}

@media screen and (max-width:1080px){

/* NAVBAR****************************** */
  .nav-container{
    height: 70px;
    width: 100%;
  }
  .navbar ul{
    display: flex;
  }
  .navbar{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
/*    width: 80%;*/
    margin: auto;
  }
  .navbar li{
/*    border: 2px solid white;*/
    display: flex;
/*    width: 20px;*/
    height: 100%;
    margin: 0;
    font-size: 1rem;
  }
  .navbar li a{
    padding: 5px 10px;
  }
  .navbar li:hover:not(.no-hover){
    background-color: #555555;
    width: inherit;
    border-radius: 5px;
  }
  .nav-image{
/*    object-fit: cover;*/
    width: 2rem;
    margin: auto;
  }
  .search{
    width: 80%;
    border-style: none;
    padding: 0;
    margin: 0;
    background: inherit;
    color: #ffffff;
    font-size: inherit;
  }
/* MAIN*************************** */
  .main{
    margin: 90px 20px 25px 20px;
  }
/* SECONDARY NEWS*********************** */
  .secondary-news-box{
    height: 100%;
    flex-direction: column;
  }
  .news-box-title, .news-box-text, .news-box-image{
  /*  border: 2px solid white;*/
    width: 100%;
  }
  .news-box-title h2{
    font-size: 1.3rem;
  }
  .news-box-title *{
    padding: 10px 0;
  }
  .news-box-text{
    margin: 0;
    text-overflow: ellipsis;
  }
  .news-box-image {
    margin: 0 20px;
    width: 100%;
  }
  .news-box-image img{
    height: 100%;
    width: 100%;
    max-width: 1000px;
    object-fit: cover;
  }
}

@media screen and (max-width:950px){
  .hide-a{
    display: none;
    padding: 0;
  }
/*  .navbar li .hide*/
}
@media screen and (max-width:900px){
  .hide-b{
    display: none;
    padding: 0;
  }
}
@media screen and (max-width:850px){
  .hide-c{
    display: none;
    padding: 0;
  }
}
@media screen and (max-width:800px){
  .hide-d{
    display: none;
    padding: 0;
  }
  .short-icon-a{
    display: block;
    font-size: 2rem;
  }
  .hide-long-a{
    display: none;
  }
}
@media screen and (max-width:750px){
  .hide-e{
    display: none;
    padding: 0;
  }
}
@media screen and (max-width:700px){
  .hide-f{
    display: none;
    padding: 0;
  }
}
@media screen and (max-width:650px){
  .hide-g{
    display: none;
    padding: 0;
  }
  .short-icon-b{
    display: block;
    font-size: 2rem;
    filter: invert(100%);
  }
  .hide-long-b{
    display: none;
  }
}
/*BASE*****************************/
.base{
  text-align: center;
  font-size: 2rem;
  margin: 3rem 0 0 0;
}
.base-image{
  margin: auto;
  width: 100%;
/*   max-width: 1000px; */
}