body {
  background: #f4f4f4;
}
.dark {
  background: #131313;
}
.container {
  max-width: 1170px;
}
.header-logo{
  margin-top:32px; 
  width:185px;
}
.logo{
  background-image:url(../images/logo.png);
  width: 190px;
  height: 31px;
  margin-top: 20px;
}
.dark .logo{
  background-image:url(../images/logo-dark.png);
}
.header{
  background: #FFFFFF;
  height:100px;
}
.dark .header{
  background: #222222;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#bcbcbc;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #bcbcbc;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #bcbcbc;
}

.mobile-header{
  display:none;
}
.header{
  display:block;
}

.nav-logo{
  display:none;
  margin-bottom: 20px;
}

/*---Search Box---*/
.search{
  margin-top:20px;
  border-radius: 100px;
  padding: 10px;
  background: #f4f4f4;
  width:400px;
}
.dark .search{
  background: #2f2f2f;
}
.search-icon{
    border:none;
    background: none;
  }

  .search-icon img{
    margin-bottom:2px;
  }
  .search-box{
    border:none;
    background: none;
    width:340px;
    color:#bcbcbc;
  }

  .dark .search-box{
    color:#bcbcbc;
  }
  .search-box:focus{
    border:none;
    outline: none;
  }
  a{
    color:#2f2f2f;
    text-decoration: none;
  }
  a:hover{
    color:unset;
  }
  .dark a{
    color:#f4f4f4;
  }
  /*---Nav Icons---*/
  .nav-icons{
    margin-top:20px;
  }
    .nav-background{
      border-radius:100px;
      width: 50px;
      height:50px;
      background-color:#f4f4f4;
      background-repeat: no-repeat;
      background-position: center;
    }
    .dark .nav-background{
      background-color:#2f2f2f;
    }
    .nav-background img{
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding-top: 7px;
      padding-left: 2px;
    }
    .nav-active{
      background-color:#333;
    }
    .dark .nav-active{
      background-color:#DDD;
    }
    .light-btn{
      background-image: url('../images/icons/moon-white.png');
    }
    .dark .light-btn{
      background-image: url('../images/icons/moon-dark.png');
    }
    .upload-btn{
      background-image: url('../images/icons/upload-dark.png');
    }
    .dark .upload-btn{
      background-image: url('../images/icons/upload-white.png');
    }
    .user-btn{
      background-image: url('../images/icons/user-dark.png');
    }
    .dark .user-btn{
      background-image: url('../images/icons/user-white.png');
    }

    /*---Main---*/
    .main{
      margin-top:30px;
    }

    /*---Sidebar---*/
    .sidebar-sticky{
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    .sidebar-sticky .nav .nav-link{
      color:#333333;
      font-size:24px;
      font-weight: bold;
    }
    .dark .sidebar-sticky .nav .nav-link{
      color:#f4f4f4;
    }
    .sidebar-sticky .nav .active{
      color:#548eca;
    }
    .dark .sidebar-sticky .nav .active{
      color:#548eca;
    }

    /*--Content--*/
    .content{
      margin-bottom:30px;
    }
    .dark .content{
      background-color: #333333;
    }

    img{
      width:100%;
    }

    .points-btn{
      width:100%;
      height: 60px;
      margin-top:20px;
    }

    .point-arrow{
      float:left;
      margin-left:auto;
    }
    .point-arrow:first-child{
      margin-right:10px;
    }

    .point-up{
      display:block;
      width:60px;
      height:60px;
      border-radius: 100px;
      background-image: url('../images/icons/arrow-up-white.png');
      background-repeat: no-repeat;
      background-position: center;
      background-color:#f4f4f4;
    }

    .point-down{
      display:block;
      width:60px;
      height:60px;
      border-radius: 100px;
      background-image: url('../images/icons/arrow-down-white.png');
      background-repeat: no-repeat;
      background-position: center;
      background-color:#f4f4f4;
    }

    .points{
      float: right;
      margin-top: 20px;
      color:#787878;
    }

    /*---Detail---*/
    .summary{
      margin-top:20px;
    }
    .comments{
      text-align: center;
    }
    .dark .summary, .dark .comments{
      color:#f4f4f4;
    }

    .avs{
      position: -webkit-sticky;
      position: sticky;
      top: 20px;
    }
    .av-box{
      margin-bottom:30px;
    }

    .copy-right {
      bottom: 10px;
      position: fixed;
      right:0;
    }