body {
  background-color:#efefef;
}
#header, .mobile-menu {
  animation-delay:0s;
  animation:none;
  -webkit-transform:none;
  -ms-transform: none;
  transform: none;
}  

#searchBox {
  padding:1rem 0;
  position:fixed;
  top:60px;
  z-index:9;
  width:100%;
  transition: all .3s ease-in-out;
}

#searchBox .row {
  width:1400px;
  max-width:96vw;
  margin:0 auto;
  position: relative;
  text-align: center;
}
#searchBox .searchInput {
  max-width:90vw;
  padding:0;
}

#searchBox .row i {
  cursor:pointer;
  color:#131F28;
  font-size:20px;
  position: absolute;
  right:0.5rem;
  top:1.25rem;
  width:40px;
  transition:all .2s ease-in-out;
}

#searchBox .row i.fa-filter {
  right:4rem;
  top:1.35rem;
}
#searchBox .row i:hover {
  color:#ffc315;
}

#searchBox input {
  filter: drop-shadow(0px 0px 6px #bbb);
  margin-bottom:0;
  padding:1.25rem 2rem;
  border-radius:25px;
  font-size:14px !important;
  border:2px solid rgb(32 44 54);
  letter-spacing:.05em;
}

#searchBox input:-webkit-autofill,
#searchBox input:-webkit-autofill:hover, 
#searchBox input:-webkit-autofill:focus {
  -webkit-text-fill-color: #000 !important;
}

#searchBox input:hover, #searchBox input:focus {
  filter: drop-shadow(0px 0px 10px #aaa);
}

.search-scroll {
  top:50px !important;
  background: rgba(18, 30, 41, 0.75);
  backdrop-filter: blur(2px);
  box-shadow: 0 0 5x 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.35);
}

.search-scroll ul li a {
  color:#ddd;
}
.search-scroll ul li:nth-child(2) {
  border-color:#999;
}

.search-scroll ul li a:hover {
  color:#fff;
}

.search-scroll ul li a.active {
  color:#ffc315;
}

#latest {
  padding-top:18rem;
  animation-delay:.5s;
}

#latest:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url(../img/bg6.png);
  opacity: .04;
  z-index:0;
  background-size: contain;
  background-position: bottom;
  background-repeat: repeat-x;
}

#latest .row {
  width:1400px;
  max-width:96vw;
  margin:0 auto;
  justify-content: center;
  z-index:1;
  overflow: hidden;
}

.row .col-md-4 {
  padding:1.5rem 2rem;
  min-width:360px;
}

.item .thumbnail img {
  box-shadow: 0 0 5x 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
  border-radius: 10%;
  width:100%;
  background: rgb(255,255,255);
}

.item .content {
  position: relative;
}

.item .content ul {
  list-style: none;
  color: #111;
  justify-content: center;
  font-size: 15px;
  font-family: Roboto-Thin;
  font-weight: 600;
  letter-spacing: .1em;
}

.item .content p {
  color: #000;
  letter-spacing: .04em;
  max-height: 280px;
  padding: 1rem 0.5rem !important;
  border-top: 1px solid #ddd;
  margin-top: 1rem !important;
  font-size: 16px;
  --mask: linear-gradient(to bottom, rgba(0,0,0, 1) 0, rgba(0,0,0, 1) 60%, rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0 ) 100% 50% / 100% 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    text-align: justify;
}

.item .content a span.learn {
  color: #0b1924;
  text-transform: uppercase;
  width:100%;
  text-align: center;
  transition:all .2s ease-in-out;
  position: absolute;
  bottom: 1.75rem;
  font-size:14px;
  font-weight: 600;
}

.item .content a:hover span.learn {
  text-decoration: underline;
}

.item .content ul {
  list-style: none;
  color: #111;
  justify-content: center;
  font-size: 14px;
  font-family: Roboto-Thin;
  font-weight: 600;
  letter-spacing: .1em;
}
.item .content ul li, .item .content ul li i {
  font-size:14px;
}

.item .content ul li {
  display: flex;
  height: 16px;
  align-items: center;
  margin: 0.5rem;
}

.item .overlay div ul {
  list-style: none;
}

/* paging */

.paging {
  text-align: center;
  padding:0;
}
.paging a, .paging .current {
  font-size:16px;
  margin:.75rem;
  text-decoration: none;
  color:#131F28;
  display:inline-flex;
  align-items: center;
  justify-content:center;
  width: 35px;
  height:35px;
  background-color: #fff;
  border-radius:50%;
  font-weight:600;
  box-shadow: 0 0 5x 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
  transition:all .2s ease-in-out;
}

.paging .current,.paging a:hover {
  background-color: #131F28;
  color:#fff;
  box-shadow: 0 0 5x 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.35);
}
.paging span.disabled {
  display: none;
}

.paging i.fa-angle-right, .paging i.fa-angle-double-right {
  padding-left:2px;
}

.paging i.fa-angle-left, .paging i.fa-angle-double-left {
  padding-right:2px;
}

.btn-primary i {
  margin-right:1rem;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

.sort {
  display: flex;
  list-style: none;
  max-width:100vw;
  width:500px;
  margin:0 auto;
}
.sort li {
  padding: 0 1rem;
  margin:1.5rem auto;
  margin-bottom:.5rem;
  justify-content: center;
  width:100%;
  height:16px;
  display: flex;
  align-items: center;
}

.sort li:nth-child(2) {
  border-left:1px solid #0a314e;
  border-right:1px solid #0a314e;
}

.sort li a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .03em;
  color:#555;
  font-size:14px;
  position: relative;
}

.sort li a:hover {
  color:#000;
}

.sort li a.active {
  font-weight: 600;
  color: #dba400;
  padding-right: 5px;
}

.sort li a i {
  display: none;
  position: absolute;
  right: -1.5rem;
  top: 6px;
  font-size: 14px;
  color:#131F28;
}

.search-scroll .sort li a i { 
  color: #fff;
}

.sort li a.active i.fa-chevron-down {
  display:flex;
}

.title h1 {
  width:auto;
  margin-bottom:.75rem;
  font-size:2.2rem;
}

.title h1:before {
  top:4rem;
}

.search-scroll .title h1 {
  background-image: linear-gradient(90deg, rgb(255, 255, 255), #c89500);
}
.search-scroll .title h1:before {
  transform: rotate(180deg);
}
@media only screen and (min-width: 400px) {
  .row .col-md-4{
    min-width:390px;
  }
  .paging a, .paging .current {
    margin:.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .paging a, .paging .current {
    margin:1.5rem;
    width:40px;
    height:40px;
    font-size:18px;
  }

  .item .content p {
    max-height: 220px;
  }
  .row .col-md-4{
    padding:2rem 3rem;
  }
  .item .content ul li i {
    font-size:17px;
  }
  #searchBox .row {
    padding: 0 3rem;
  }

  #searchBox .row i {
    right:3.5rem;
  }

  #searchBox .row i.fa-filter {
    right:7rem;
  }
  .search-scroll {
    top:37px !important;
  }
  #searchBox input {
    font-size:16px !important;
  }
  .sort li {
    height:20px;
  }
  .sort li a {
    font-size:14px;
  }
  
  .sort li a i {
    right: 0rem;
    top: 7px;
    font-size: 14px;
    right:-2rem;
  }
  .title h1 {
    font-size:2.75rem;
    margin-bottom:1.25rem;
  }
  .title h1:before {
    top:4.5rem;
  }
  #latest {
    margin-top:2rem;
  }
}

@media only screen and (min-width: 912px) {
  #searchBox {
    top:110px;
  }

  #latest {
    margin-top:7rem;
    min-height:60vh;
  }
}