body {

    font-family: "Noto Sans";

    font-weight: 300;

    color: #191E21;

    font-size: 1.4em;

  }

  

  h1, h2, h3, h4, h6,

  .line div {

    font-weight: 800;

    font-family: 'Raleway';

    color: #000;

    margin: 10px 0;

  }

  

  h4 {

    font-size: 26px;

  }

  

  .input-group .btn {

    height: 40px;

  }

  

  a, .btn {

    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -o-transition: all 0.5s;

    -moz-transition: all 0.5s;

  }

  

  a {

    color: #F73F52;

  }

  a:hover, a:focus {

    color: #C8081C;

  }

  

  section {

    padding-top: 20px;

    padding-bottom: 40px;

  }

  section.first {

    padding-top: 120px;

    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -o-transition: all 0.5s;

    -moz-transition: all 0.5s;

  }

  

  .form-control {

    border-radius: 0;

    height: 40px;

  }

  .form-control:focus {

    border-color: #989898;

    box-shadow: 0 1px 2px #ddd;

  }

  

  .btn {

    font-size: 15px;

    border-radius: 0;

    padding-left: 20px;

    padding-right: 20px;

    border-color: transparent;

    padding-top: 10px;

    padding-bottom: 10px;

    letter-spacing: .5px;

  }

  .btn.btn-lg {

    border-radius: 0;

    padding-left: 40px;

    padding-right: 40px;

    padding-top: 15px;

    padding-bottom: 15px;

  }

  .btn.btn-sm {

    border-radius: 0;

    padding: 5px 10px;

    font-size: 12px;

  }

  .btn:focus {

    outline: 0;

    box-shadow: none;

    border-color: transparent;

  }

  .btn.btn-rounded {

    border-radius: 3px;

  }

  .btn i {

    margin-right: 5px;

  }

  

  .btn-social {

    font-weight: 400;

    padding-left: 25px;

    padding-right: 25px;

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .btn-social:hover {

    color: #fff;

    opacity: .8;

  }

  

  .btn-primary {

    background-color: #F73F52;

    border-color: #F73F52;

  }

  .btn-primary:disabled, .btn-primary.disabled, .btn-primary:hover, .btn-primary:active, .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:focus {

    background-color: #c8081c;

    border-color: #c8081c;

    box-shadow: none;

    outline: 0;

  }

  .btn-primary:active:hover {

    background-color: #af0719;

  }

  

  .btn-success {

    background-color: #1ABC9C;

    color: #fff !important;

    border-color: #1ABC9C;

  }

  .btn-success:disabled, .btn-success.disabled, .btn-success:hover, .btn-success:active, .btn-success:active:hover, .btn-success:active:focus, .btn-success:focus {

    background-color: #0e6252;

    border-color: #0e6252;

    outline: 0;

    box-shadow: none;

  }

  .btn-success:active:hover {

    background-color: #0b4c3f;

  }

  

  .btn-warning {

    background-color: #F39C12;

    color: #fff !important;

    border-color: #F39C12;

  }

  .btn-warning:disabled, .btn-warning.disabled, .btn-warning:hover, .btn-warning:active, .btn-warning:active:hover, .btn-warning:active:focus, .btn-warning:focus {

    background-color: #976008;

    border-color: #976008;

    outline: 0;

    box-shadow: none;

  }

  .btn-warning:active:hover {

    background-color: #7f5006;

  }

  

  .btn-danger {

    background-color: #E74C3C;

    color: #fff !important;

    border-color: #E74C3C;

  }

  .btn-danger:disabled, .btn-danger.disabled, .btn-danger:hover, .btn-danger:active, .btn-danger:active:hover, .btn-danger:active:focus, .btn-danger:focus {

    background-color: #a82315;

    border-color: #a82315;

    outline: 0;

    box-shadow: none;

  }

  .btn-danger:active:hover {

    background-color: #921e12;

  }

  

  .btn-info {

    background-color: #3498db;

    color: #fff !important;

    border-color: #3498db;

  }

  .btn-info:disabled, .btn-info.disabled, .btn-info:hover, .btn-info:active, .btn-info:active:hover, .btn-info:active:focus, .btn-info:focus {

    background-color: #196090;

    border-color: #196090;

    outline: 0;

    box-shadow: none;

  }

  .btn-info:active:hover {

    background-color: #16527a;

  }

  

  .btn-default {

    background-color: #E7E7E7;

    color: #fff !important;

    border-color: #E7E7E7;

  }

  .btn-default:disabled, .btn-default.disabled, .btn-default:hover, .btn-default:active, .btn-default:active:hover, .btn-default:active:focus, .btn-default:focus {

    background-color: #b4b4b4;

    border-color: #b4b4b4;

    border-color: transparent;

    outline: 0;

    box-shadow: none;

  }

  .btn-default:active:hover {

    background-color: #a7a7a7;

  }

  

  .btn-magz {

    background-color: transparent;

    color: #F73F52;

    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -o-transition: all 0.5s;

    -moz-transition: all 0.5s;

    border-color: #F73F52;

    position: relative;

    overflow: hidden;

    z-index: 2;

  }

  .btn-magz:after {

    position: absolute;

    bottom: -20px;

    left: 20px;

    width: 5px;

    height: 5px;

    opacity: 0;

    border-radius: 50%;

    content: ' ';

    background-color: #F73F52;

    z-index: -1;

    transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -webkit-transition: all .3s;

  }

  .btn-magz:focus:after, .btn-magz:hover:after {

    transform: scale(200);

    -webkit-transform: scale(200);

    -moz-transform: scale(200);

    -o-transform: scale(200);

    opacity: 1;

    transition: all 1s;

    -moz-transition: all 1s;

    -webkit-transition: all 1s;

    -o-transition: all 1s;

  }

  .btn-magz:focus {

    color: #fff;

  }

  .btn-magz:hover {

    background-color: transparent;

    color: #fff !important;

  }

  .btn-magz i {

    margin-left: 10px;

  }

  .btn-magz.white {

    color: #fff;

  }

  .btn-magz.white:after {

    background-color: #fff;

  }

  .btn-magz.white:focus, .btn-magz.white:hover {

    color: #F73F52 !important;

  }

  

  .form-group label {

    margin-bottom: 5px;

    font-size: 14px;

    font-weight: 400;

  }

  .form-group label.fw {

    display: block;

  }

  .form-group label .required {

    color: #E74C3C;

    font-weight: 600;

    font-size: 16px;

  }

  .form-group label .required:before {

    content: '*';

  }

  .form-group .help-block {

    font-size: 12px;

    margin-top: -3px;

  }

  .form-group .form-control {

    border-radius: 0;

    font-family: 'Noto Sans';

    font-weight: 300;

  }

  .form-group .form-control:focus {

    border-color: #989898;

    box-shadow: 0 1px 2px #ddd;

  }

  .form-group .form-control.rounded {

    border-radius: 4px;

  }

  .form-group.has-error .form-control {

    border-color: #E74C3C;

  }

  .form-group.has-error .control-label {

    color: #E74C3C;

  }

  .form-group.has-error .help-block {

    color: #E74C3C;

  }

  .form-group.has-success .form-control {

    border-color: #1ABC9C;

  }

  .form-group.has-success .control-label {

    color: #1ABC9C;

  }

  .form-group.has-success .help-block {

    color: #1ABC9C;

  }

  .form-group.has-warning .form-control {

    border-color: #F39C12;

  }

  .form-group.has-warning .control-label {

    color: #F39C12;

  }

  .form-group.has-warning .help-block {

    color: #F39C12;

  }

  .form-group.floating {

    position: relative;

    margin-top: 10px;

  }

  .form-group.floating .form-control {

    padding-left: 0;

    padding-right: 0;

    border-top-color: transparent;

    border-left-color: transparent;

    border-right-color: transparent;

    border-bottom-width: 2px;

    box-shadow: none;

  }

  .form-group.floating.stacked label {

    font-size: 12px;

    position: absolute;

    top: -13px;

    left: 0;

    background-color: #fff;

  }

  .form-group.floating.focus label {

    position: absolute;

    top: 10px;

    left: 0;

    transition: all 0.5s;

    -o-transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    z-index: -1;

  }

  .form-group.floating.focus .form-control {

    background-color: transparent;

    border-radius: 0;

  }

  .form-group.floating.focus .form-control::-webkit-input-placeholder {

    opacity: 0;

    transition: all 0.5s;

    -moz-transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -o-transition: all 0.5s;

  }

  .form-group.floating.focus.focused label {

    top: -13px;

    left: 0;

    font-size: 12px;

  }

  .form-group.floating.focus.focused .form-control::-webkit-input-placeholder {

    opacity: 1;

  }

   

  section .container {

    padding-left: 15px;

    padding-right: 15px;

  }

  

  .box-wrapper {

    width: 400px;

    margin: 0 auto;

  }

  

  .box {

    background-color: rgb(240, 240, 240);

    border-radius: 3px;

    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);

  }

  .box.box-border {

    box-shadow: none;

    border: 1px solid #f2f2f2;

  }

  .box .box-body {

    padding: 30px;

  }

  .box .box-body h4 {

    margin-bottom: 30px;

  }

  

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

    .with-sidebar .sidebar {

      display: none;

    }

    .with-sidebar .has-sidebar {

      padding: 0 20px;

    }

  

    .for-tablet {

      display: block !important;

    }

  

    footer.footer .block {

      margin-bottom: 30px;

    }

    footer.footer .line {

      margin: 0;

      margin-bottom: 30px;

    }

  

    .divider-top {

      margin-top: 50px;

    }

  

    .sidebar {

      position: fixed;

      top: 0;

      right: -320px;

      height: 100%;

      width: 320px;

      z-index: 2001;

      background-color: #fff;

      overflow: auto;

      transition: all 0.5s;

      -webkit-transition: all 0.5s;

      -o-transition: all 0.5s;

      -moz-transition: all 0.5s;

    }

    .sidebar.active {

      right: 0;

    }

    .sidebar .sidebar-title {

      margin: 0 -15px;

      height: 53px;

      text-align: center;

      border-bottom: 1px solid #f2f2f2;

      letter-spacing: .5px;

      font-weight: 700;

      line-height: 55px;

      font-family: 'Raleway', sans-serif;

      margin-bottom: 30px;

    }

  

    .trending-tags {

      margin-bottom: 20px;

    }

  

    .search-toggle {

      display: none;

    }

  

    nav.menu {

      height: 55px;

    }

    nav.menu .mobile-toggle {

      display: inline-block;

    }

    nav.menu ul.nav-list {

      position: fixed;

      width: 320px;

      height: 100%;

      top: 0;

      right: -320px;

      background-color: #fff;

      z-index: 3000;

      overflow: auto;

      transition: all 0.5s;

      -webkit-transition: all 0.5s;

      -o-transition: all 0.5s;

      -moz-transition: all 0.5s;

    }

    nav.menu ul.nav-list.active {

      right: 0;

    }

    nav.menu ul.nav-list li {

      display: block;

      float: none;

      position: static;

      padding-top: 2px;

      padding-bottom: 2px;

    }

    nav.menu ul.nav-list > li:first-child {

      margin-left: 0;

      text-align: center;

      position: relative;

    }

    nav.menu ul.nav-list > li:first-child .back {

      z-index: 9;

      position: absolute;

      height: 100%;

      width: 50px;

      line-height: 55px;

      font-size: 20px;

    }

    nav.menu ul.nav-list > li:first-child a {

      border-bottom: 1px solid #f2f2f2;

    }

    nav.menu ul.nav-list > li:first-child a:after {

      display: none;

    }

    nav.menu ul.nav-list > li > a {

      display: block;

    }

    nav.menu ul.nav-list > li > a .badge {

      right: 10px;

      top: 5px;

    }

    nav.menu ul.nav-list > li .dropdown-menu {

      box-shadow: none;

      position: absolute;

      top: 57px;

      left: initial;

      right: -320px;

      height: calc(100% - 55px);

      height: -webkit-calc(100% - 55px);

      height: -moz-calc(100% - 55px);

      height: -o-calc(100% - 55px);

      width: 320px;

      transform: scale(1);

      -webkit-transform: scale(1);

      -moz-transform: scale(1);

      -o-transform: scale(1);

      visibility: visible;

      display: none;

      opacity: 1;

    }

    nav.menu ul.nav-list > li .dropdown-menu.active {

      right: 0;

    }

    nav.menu ul.nav-list > li .dropdown-menu > li > a {

      width: auto;

    }

    nav.menu ul.nav-list > li .dropdown-menu > li > a:hover:after {

      transform: scale(105);

      -webkit-transform: scale(105);

      -moz-transform: scale(105);

      -o-transform: scale(105);

    }

    nav.menu ul.nav-list > li .dropdown-menu > li ul {

      top: 0;

    }

    nav.menu ul.nav-list > li .dropdown-menu [class^="col-"] {

      margin-bottom: 30px;

    }

  

    header.primary.up {

      top: -286px;

    }

  

    .firstbar {

      text-align: center;

    }

    .firstbar .brand {

      float: none;

    }

    .firstbar .brand img {

      float: none;

      display: inline-block;

      margin-bottom: 15px;

    }

    .firstbar .brand h2 {

      display: block;

      float: none;

      border: none;

      margin: 0;

      padding: 0;

      width: initial;

    }

    .firstbar .search {

      margin: 0 70px;

    }

    .firstbar .right {

      float: none;

      display: block;

      margin: 10px auto;

    }

  }

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

    .article-list figure {

      width: 100%;

      height: 200px;

      margin-bottom: 10px;

    }

    .article-list .details {

      margin-left: 0;

    }

    .article-list .details .detail {

      display: inline-flex;

      display: -webkit-inline-box;

    }

  

    .line div {

      font-size: 14px;

    }

  

    .featured {

      height: 200px;

    }

    .featured .details h1 {

      font-size: 16px;

    }

    .featured .details .category a {

      padding: 3px 6px;

    }

  

    .firstbar .search {

      margin-left: 20px;

      margin-right: 20px;

    }

  

    .topbar .topbar-nav li a i, .topbar ul.info li a i {

      transform: scale(1);

      -webkit-transform: scale(1);

      -moz-transform: scale(1);

      -o-transform: scale(1);

      display: block;

      font-size: 22px;

    }

    .topbar .topbar-nav li a span, .topbar ul.info li a span {

      display: none;

    }

  

    .for-mobile {

      display: block !important;

    }

  

    .nav-icons {

      display: none;

    }

  

    .box-wrapper {

      width: 100%;

    }

  

    .box .box-body {

      padding: 20px;

    }

  }

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

    nav.menu ul.nav-list {

      width: 290px;

      right: -350px;

    }

    nav.menu ul.nav-list > li .dropdown-menu {

      width: 290px;

      right: -350px;

    }

  

    .sidebar {

      width: 290px;

      right: -350px;

    }

  

    article figure {

      height: 200px;

    }

  }