@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
    font-family: 'Rubik', sans-serif;
    background: #0e131a;
    color: #f7f7f7;
    margin: 0 auto;
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  margin-top: 2rem;
}

h2 {
  font-weight: 900
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #171e26;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff0017;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #e0091b;
} 

::selection {
  background: #ff0017; /* WebKit/Blink Browsers */
}


.mainbtn {
  min-width: 500px;
  padding: 15px;
  color: #fff;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
  background-color: #e0091b;
  color: #fff;
  transition: .5s all
}

.mainbtn:hover {
    color: #fff;
    background-color: #941c26;
    -webkit-box-shadow: 0px 2px 30px -1px rgba(255,3,3,1);
-moz-box-shadow: 0px 2px 30px -1px rgba(255,3,3,1);
box-shadow: 0px 2px 30px -1px rgba(255,3,3,1);
    
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 2.2;
}

.carousel-item {
  height: 70vh;
  min-height: 350px;
  background: -moz-linear-gradient(135deg, #171e26c5 0%, #171e26c5 100%), url(../img/bg.jpg);
    background: -webkit-linear-gradient(135deg, #171e26c5 0%, #171e26c5 100%), url(../img/bg.jpg);
    background: linear-gradient(135deg, #171e26c5 0%, #171e26c5 100%), url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
    -webkit-clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}

@media (max-width: 991px) {
  .bb-nav {
    display: none
  }
}

@media (min-width: 992px) {
  .bb-nav {
    border-bottom: 1px solid rgba(203,203,203,.1);
    margin-top: 1rem;
  }

  .bb-nav.l p {
    border-bottom: 1px solid rgba(203,203,203,.1);
    margin-left: -2.6rem;
  }

  .bb-nav.l p b {
    margin-left: 2.6rem;
  }

  .bb-nav.r p {
    border-bottom: 1px solid rgba(203,203,203,.1);
    margin-right: -3.65rem;
  }

  .bb-nav.r p b {
    margin-right: 3.65rem;
  }
  
  .leftnav {
    border-left: 1px solid rgba(203,203,203,.1);
      -webkit-transform: skewX(15deg);
      -moz-transform: skewX(15deg);
      transform: skewX(15deg);
      display: inline-flex;
      padding-left: 40px;
      width: 50%;
  }
  
  .leftnavb {
    -webkit-transform: skewX(-15deg);
      -moz-transform: skewX(-15deg);
      transform: skewX(-15deg);
      display: inline-flex;
  }
  
  .rightnavb {
      -webkit-transform: skewX(15deg);
      -moz-transform: skewX(15deg);
      transform: skewX(15deg);
      display: inline-flex;
  }
  
  .rightnav {
    -webkit-transform: skewX(-15deg);
      -moz-transform: skewX(-15deg);
      transform: skewX(-15deg);
      display: inline-flex;
      padding-right: 40px;
      border-right: 1px solid rgba(203,203,203,.1);
      width: 50%;
  }
}

.navbar-brand  img {
    width: 128px;
}

a:hover {
    text-decoration: none;
}

.bg-dark {
    background-color: #171e26!important;
}

.border-l {
    border-right: 3px solid #42a5f5;
}

.navbar-dark .navbar-nav .nav-link {
    color: #f7f7f7;
    font-size: 20px;
    transition: 0.3s;
    padding: 1rem 1rem!important;
    border-bottom: 3px solid #42a4f500!important;
}

.navbar-dark .navbar-nav .nav-link.active {
  border-bottom: 3px solid #ff0017!important;
}
.navbar-dark .navbar-nav .nav-link:hover {
  border-bottom: 3px solid #ff0017!important;
  color: #f7f7f7!important;
}

.navbar {
    padding: 0 1rem!important;
}

.navbar-nav .dropdown-menu {
    border-radius: 0!important;
    background-color: #171e26!important;
    border: none!important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin: 0!important;
}

.dropdown-item {
    color: #f7f7f7!important;
    border-left: 3px solid #42a4f500;
    text-align: left!important;
}

.dropdown-item:hover {
    color: #f7f7f7!important;
    background-color: #5e1219!important;
    border-left: 3px solid #ff0017!important;
}


.main {
    margin-top: 12rem;
}

.maincard {
    background-color: #171e26;
    color: #f7f7f7;
    box-shadow: none;
    border-radius: 4px;
    padding: 1.5rem;
}

.name {
    padding: 15px 0;
}

.cheatl {
    margin-top: 7rem;
}

.cheatcard {
    background-color: #171e26;
    color: #f7f7f7;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 3rem;
}

.showhide {
    overflow: hidden;
    margin-top: 3rem;
  }
  
  .filterDiv {
    float: left;
    color: #ffffff;
    text-align: center;
    margin: 2px;
    display: none; /* Hidden by default */
  }
  
  /* The "show" class is added to the filtered elements */
  .show {
    display: flex;
  }


.divider {
  background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    margin-top: 7rem;
    clip-path: polygon(50% 10%, 100% 0, 100% 100%, 50% 90%, 0 100%, 0 0);
    -webkit-clip-path: polygon(50% 10%, 100% 0, 100% 100%, 50% 90%, 0 100%, 0 0);

}

.divider2 {
  background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    margin-top: 3rem;
    clip-path: polygon(50% 10%, 100% 0, 100% 100%, 50% 90%, 0 100%, 0 0);
    -webkit-clip-path: polygon(50% 10%, 100% 0, 100% 100%, 50% 90%, 0 100%, 0 0);

}

.minsection {
  margin-top: 3rem;
  clip-path: polygon(50% 0, 100% 6%, 100% 94%, 50% 100%, 0 94%, 0 6%);
  -webkit-clip-path: polygon(50% 0, 100% 6%, 100% 94%, 50% 100%, 0 94%, 0 6%);
  padding: 200px 100px;
}

@media (min-width: 769px) {
  .divider2 h2 {
    margin-top: 40%;
  }

  .divider h2 {
    margin-top: 40%;
  }
}

@media (max-width: 768px) {
  .divider2 h2 {
    display: none
  }

  .divider2 a {
    display: none
  }

  .divider a {
    display: none
  }

  .divider h2 {
    display: none
  }
}

.div-img {
  height: auto;
  max-width: 100%;
  vertical-align: top;
}

.more-btn {
  color: #fff;
  background-color: #ff0e1f;
  border: 1px solid transparent;
  box-shadow: 0 3px 3px 0 rgba(1,1,1,.55);
  transition: .5s cubic-bezier(.22,.61,.36,1);
  padding: 20px;
  margin-top: 2rem;
}

.more-btn:hover {
  -webkit-filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
    filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
    color: #fff;
}

.bc {
  border-bottom: 1px solid rgba(255,255,255,.1);
  background-color: #171e26;
  padding: 9px;
}

.bc-btn {
  margin-left: -9px;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
  padding: 10px;
  padding-right: 15px;
  background-color: #ff0017;
  color: #fff;
}

.bc-btn:hover {
  background-color: #e0091b;
  color: #fff;
}

.carousel-caption {
  bottom: 40%;
}


.cheats {
  margin-top: 5rem;
}

.smallinfo {
  display: inline-flex
}

.cc-main {
  margin-top: 30px;
  
}

.buybtn {
  padding: 5px;
  background-color: #e0091b;
  color: #fff;
  transition: .5s all
}

.buybtn:hover {
  -webkit-filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
    filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
    color: #fff;
}