@font-face {
  font-family: poppins;
  src: url(./fonts/Poppins-Extra-Bold.ttf);
}

html {
    font-family: heebo, sans-serif;
    box-sizing: border-box;
    overflow-y: scroll
}

body{
  margin:0;
  background-color: #000;
}

* {
    box-sizing: border-box
}

@media (max-width:767px) {
    hgroup {
        font-size: 2.95vw
    }
}

@media (min-width:768px) {
    hgroup {
        font-size: 1.5vw
    }
}

@media (min-width:1200px) {
    hgroup {
        font-size: 1.15vw
    }
}

.align-center{
  text-align: center;
}

h2, h3{ color: #fff;}

strong, a{ color: #ff8e8e;}

p a:hover{
 color: #ff1111;
}

header .wrapper-banner {
    background: url(../img/test.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #000;
    padding: 1.5em 0 4.5em 7.5em;
    transition: all .3s ease;
    height: 15vw;
    min-height: 68vh;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.28);
}

.review header .wrapper-banner{
  background: url(../img/jerkmate-banner.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: #000;
  padding: 1.5em 0 4.5em 7.5em;
  transition: all .3s ease;
  height: 23vw;
  min-height: 38vh;
  box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 28%);
}

@media (max-width:1199px) {
    header .wrapper-banner {
        padding: 4.5em 0 4.5em 4.5em
    }

    .review header .wrapper-banner{
      padding: 4.5em 5.5em;
    }
}

@media (max-width:767px) {
    header .wrapper-banner {
        padding: 1.5em;
        height: 84vw;
        min-height: 1em;
    }

    .review header .wrapper-banner{
      padding: 1.5em;
      height: 50vw;
      min-height: 35vh;
    }
}

@media (max-width:500px) {
    header .wrapper-banner {
        min-height: 27em;
    }
}

@media (max-width:767px) {
    header .wrapper-banner {
        position: relative;
        background: url(../img/deviantclip-m.jpg) no-repeat;
        background-position: center top;
        background-size: cover
    }
    header .wrapper-banner:before {
        background: linear-gradient(0, #000 0, #000 0%, rgba(246, 247, 242, 0) 57%);
    }
    header .wrapper-banner:before {
        content: '';
        position: absolute;
        height: 55%;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 0
    }
}

@media (min-width:768px) {
    header hgroup {
        max-width: 34.5em
    }
}

@media (min-width:992px) {
    header hgroup {
        max-width: 29.5em
    }
}



.logo__ctn {
    justify-content: space-between;
    align-items: flex-start
}

header {
    background-color: #f6f7f2
}

header .logo {
    margin: 0 0 5em
}

header .logo svg {
    width: 100%;
    max-width: 200px
}

header .logo img {
    max-width: 175px;
    margin: 0 0 0 15px
}

@media (max-width:767px) {
    header .logo {
        text-align: center;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .logo svg {
        width: 100%;
        max-width: 9em
    }
    header .logo img {
        max-width: 10em;
        margin: 0 0 0 15px
    }
}

header h1 {
    font-size: 2em;
    line-height: 1.25;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 15px 0
}

header h1 p {
    margin: 1.4em 0 0 0;
    color: #fff;
}

@media (max-width:767px) {
    header h1 p {
        display: none
    }

    .review header h1 p{
      display: block
    }

    header .title {
        display: -webkit-flex;
        display: flex;
        height: 4em;
        min-height:200px;
        justify-content: center;
        align-items: center
    }
}

header p.subtitle {
    font-size: 1.2em;
    margin: 0;
    color: #fff;
}

header .cta__links .btn:first-child {
    margin: 1.5em 1em 0 0
}

header .cta__links {
    margin: 1em 0 0
}

.btn {
    padding: 20px 50px;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background: #ff1111;
    text-transform: uppercase;
    transition: all .3s ease;
    text-align: center;
}

.btn:hover {
    background: #d1141b;
}

.btn.btn-2 {
    background: #000
}

.btn.btn-2:hover {
    background: #0005cd
}

@media (max-width:767px) {
    header .cta__links .btn {
        width: 100%;
        text-align: center;
        font-size: 1.2em
    }
    header .cta__links .btn:first-child {
        margin: 0 0 15px 0
    }
    header p.subtitle {
        font-size: 1.5em;
        text-align: center;
        position: relative
    }
}

@media (max-width:575px) {
    header .cta__links .btn {
        width: 100%;
        text-align: center;
        font-size: 1.6em
    }
}
.inner {
    max-width: 85rem;
    margin: auto;
    padding: 0 1rem
}

.products, .text-content {
    background-color: #000;
}

.price .text,
.products .text{
    font-size: 1.35em;
    text-align: center;
    width: 90%;
    margin: auto;
    color: #fff;
}

.products>p {
    font-size: 1.2em;
    text-align: center
}

.products .inner {
    padding: 3.5em 5.5em 5.5em
}

@media (max-width:992px) {
    .products .inner {
        padding: 1.5em
    }
    .price .text,
    .products .text {
        width: 100%;
        font-size: 1.15em
    }
}

.product-ctn {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

ul.product-ctn{
  padding: 0;
}

.product-single{
  width: 45%;
  margin: 0 0 2.5em;
}

@media (max-width: 1060px){
  .product-single{
    width: 100%;
    margin: 0 0 4em;
  }
}

.product-header{
  /* overflow: hidden; */
  position: relative;
  padding-top: 70%;
}


@media (max-width: 767px){
    .product-header{
      padding-top: 90%;
    }
}

.product-header a{
  color: #fff;
}

.product-header img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.28);
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .3s ease;
  background-color: #00000024;
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 0 0 1000px rgb(189 20 20 / 18%);
}

.product-intro {
  position: absolute;
  top: 57%;
  right: 0;
  width: 100%;
  text-align: right;
  padding: 1.5em;
}

@media (max-width:1199px){
  .product-intro {
    top: 30%;
  }
}

@media (max-width: 767px){
  .product-intro {
    top: 30%;
    padding: 1em;
  }
}

.product-intro .name{
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 .2em 0;
  font-size: 2em
}

.product-intro .copy{
  margin: 5px 0 0 0;
  font-size: 1.25em;
  font-weight: 400
}

.product-intro .btn{
  margin-top: 1em;
}

.product-excerpt{
  color: #fff;
  margin-top: 3.5em;
}

.product-excerpt a{
  color: #d1141b;
}

@media (max-width: 320px){
  .product-excerpt{
    margin-top: 3.5em;
  }
}


.products .product {
    background-color: #fff;
    text-align: right;
    padding: 2em;
    overflow: hidden;
    display: block;
    position: relative;
    text-decoration: none;
    color: #fff;
    font-size: 1em
}


.product-ctn .product .name {
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 .2em 0;
    font-size: 2.5em
}

.product-ctn .product .trademark {
    color: #0207cd;
    margin: 0;
    font-size: 1.4em
}

.product-ctn .product .duration {
    margin: 5px 0 0 0;
    font-size: 1.4em
}

.products .product .btn {
    margin: 1.5em 0 0 0;
    padding: 20px 30px;
    font-size: 1em
}

.products .product {
    width: 49%;
    position: relative;
    display: block;
}

/* a.product.product-1{
    background: url(../img/exclusivities-2.jpg) no-repeat;
    background-size: cover;
    background-position-y: -5em;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.47);
}

a.product.product-2{
    background: url(../img/classics.jpg) no-repeat;
    background-size: cover;
    background-position-y: -8em;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1260px) {
  a.product.product-1{
        background-position-y: 0;
  }
}

@media (max-width: 1260px) {
  a.product.product-2{
        background-position-y: 0;
  }
}

@media (max-width: 768px) {
  a.product.product-1{
    background-position-y: -5em;
  }
}

@media (max-width: 768px) {
  a.product.product-2{
    background-position-y: -8em;
  }
}

@media (max-width: 600px) {
  a.product.product-1{
    background-position-y: 0em;
  }
}

@media (max-width: 600px) {
  a.product.product-2{
    background-position-y: 0;
  }
} */

.product-ctn {
    margin-top: 2em
}

.product-cta {
    border: none;
    font-size: 1.2em
}


.products .product.product-2:before {
    background: url(../img/product-2.png) left top no-repeat;
    background-size: contain
}

.products .product>* {
    position: relative;
    z-index: 20
}

@media (max-width:1199px) {
    .products .product {
        padding: 1.5em;
        font-size: 1.2em
    }
    .product-ctn .product .name {
        font-size: 1.6em
    }
}

@media (max-width:500px) {
  .product-ctn .product .name {
    font-size: 1.3em;
  }
}

@media (max-width:992px) {
    .product-ctn .product .duration,
    .product-ctn .product .trademark {
        font-size: 1em
    }
}

@media (max-width:767px) {
    .product-ctn {
        flex-wrap: wrap
    }
    .products .product {
        width: 100%;
        position: relative;
        display: block
    }
    .products .product.product-1 {
        margin-bottom: 2em
    }
}

.features {
    background: url(../img/mosaique-red-2.png) no-repeat;
    background-size: cover;
    color: #fff;
    padding: 6em 0
}

@media (max-width: 500px) {
  .features {
      padding: 1em 0 3em 0;
  }
}

.features .inner {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2em 3em;
    align-items: center
}

.features .inner {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2em 3em;
    align-items: center
}

@media (max-width:525px) {
  .features .inner{
    display: flex;
    flex-wrap: wrap;
  }
}

@media (min-width:768px) {
    .price .inner {
        padding: 4em 1em
    }
}

.features-ctn {
    align-self: center;
    list-style: none;
    margin: 0;
    padding: 0
}

@media (min-width:768px) {
    .features .features-ctn,
    .features .order {
        width: 49%
    }
}

.features-ctn .feature {
    position: relative;
    padding-left: 2em;
    margin-bottom: 1em;
    font-size: 1.2em
}

.features-ctn .feature.star {
    font-weight: 700
}

.features .order {
    text-align: center;
    font-size: 2.8em;
    text-transform: uppercase;
    font-weight: 700
}

.features .approval span,
.features .delivery span {
    text-transform: none;
    font-size: .75em;
    display: block;
    font-weight: 400
}

.features .text {
    margin: 0
}

.features .approval:before,
.features .delivery:before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: auto
}

.features .approval:before {
    background: url(../img/approved-icon.svg) no-repeat
}

.features .delivery:before {
    background: url(../img/delivery-icon.svg) no-repeat;
    height: 1.2em
}

@media (min-width:768px) {
    .features .delivery {
        margin: 1em 0 0 0
    }
}

.features .features-ctn .feature {
    position: relative
}

.features .features-ctn .feature:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    background: url(../img/checked-icon.svg) left center no-repeat
}

.features-ctn .feature.star {
    margin-bottom: 0
}

.features-ctn .feature.star:before {
    background: url(../img/star-icon.svg) left center no-repeat
}

@media (max-width:992px) {
    .features .order {
        font-size: 2em
    }
    .features-ctn .feature {
        font-size: 1em
    }
}

@media (max-width:767px) {
    .features .inner {
        padding: 2.5em;
        justify-content: space-between;
        justify-content: center;
    }
    .features .order .approval,
    .features .order .delivery {
        margin-bottom: 1em;
        margin-right: 1em;
    }
}

.price .products__list {
    justify-content: space-between;
    display: flex;
    margin: 50px 0
}

.price .products__list .product__cta {
    align-items: flex-start;
    display: flex;
    position: relative;
    width: 47.5%
}

.price .products__list .product__cta .product_description img {
    width: 100%;
    height: auto;
    max-width: 150px
}

.price .products__list .product__cta .product_description {
    width: 40%
}

.price .products__list .product__cta .product_price {
    width: 60%
}

.price .products__list .product__cta .product_price ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.price .products__list .product__cta .product_price ul li {
    border-bottom: 1px solid #8e8e8e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    text-align: left;
    margin: 0;
    padding: 10px 0 5px;
    font-size: 1.2em
}

.price .products__list .product__cta .product_price ul li .activity-int {
    width: 25%;
    font-size: 2em;
    font-weight: 900;
    text-align: center;
    margin-right: 7%
}

.price .products__list .product__cta .product_price ul li .activity-text {
    width: 40%
}

.price .products__list .product__cta .product_price ul li .price {
    color: #0207cd;
    width: 35%
}

.price .products__list .product__cta .product_description .name {
    font-weight: 900;
    font-size: 2em;
    margin: 25px 0 0 0
}

.price .products__list .product__cta .product_description .trademark {
    color: #0005cd;
    font-size: 1.2em;
    margin: 10px 0 0 0
}

.price .products__list .product__cta .product_description .time {
    margin: 0;
    color: #0005cd;
    font-size: 1.2em
}

.price .products__list .product__cta .btn {
    position: absolute;
    bottom: 0;
    right: 0
}

@media (max-width:992px) {
    .price .inner {
        padding: 1.5em
    }
    .price .products__list {
        flex-wrap: wrap;
        margin: 2em 0 0 0
    }
    .price .products__list .product__cta {
        width: 100%;
        flex-wrap: wrap
    }
    .price .products__list .product__cta .product_description {
        width: 100%;
        text-align: center
    }
    .price .products__list .product__cta .product_price {
        width: 100%
    }
    .price .products__list .product__cta .btn {
        position: initial;
        display: block;
        width: 100%;
        margin: 2em 0;
        text-align: center;
        font-size: 1.2em
    }
    .price .products__list .product__cta:last-child .btn {
        margin-bottom: 0
    }
}

footer {
    padding: 1em 0;
    background-color: #0a0a0a;
    color: #fff;
}

@media (min-width:480px) {
    footer .inner {
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

@media (max-width: 480px) {
  footer{
    text-align: center;
  }
}

footer .inner svg {
    width: 20%
}

footer .copyright .cr-aff-link {
    display: block;
    transition: color .1s ease-in
}

footer .copyright a {
    color: #020202
}

.cr-aff-link {
    font-weight: 700;
    text-decoration: underline;
    text-transform: uppercase
}

@media (min-width:480px) {
    footer .copyright {
        margin-right: 1em;
        text-align: center;
    }
}

.seo-content{
  padding: 5vw 10vw;
  text-align: center;
  font-size: 1.2em;
  background-color: #0e0e0e;
  color: #fff;
}

.seo-text{
  height:11em;
  overflow: hidden;
  position: relative;
  text-align:left;
  line-height: 1.3em;
}

.seo-text:after{
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  position: absolute;
  background: linear-gradient(to bottom,rgba(255,255,255,0) 0,#0e0e0e 75%);
  height: 100px;
}

.seo-text h1{
  font-size: 1.2em;
}

.seo-text h2{
  line-height: 1.25;
}

.open{
  height:auto;
  overflow: hidden;
  background: none;
}

.open:after{
  background: none;
}

.footer-btn{
  position: relative;
  cursor: pointer;
  background-color: #ff1111;
  display: inline-block;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  margin: 30px 0 35px 0;
  border: none;
}

.footer-btn:before{
  content: '';
  position: absolute;
  background: url(../img/arrow-icon.png) center center no-repeat;
  top: 5px;
  bottom: 0;
  left: 0;
  width: 3em;
  background-size: 1.7em;
  transition: transform .3s;
}

.footer-btn.open{
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.footer-btn:focus{
  outline: 0;
}

#footer-logo{
  width: 75vw;
  max-width: 13em;
  margin-top: 1em;
}

#header-cta{
  font-size: 1.2em;
}

@media (min-width:768px) and (max-width:1200px) {
  #header-cta{
    font-size: 1.4em;
  }
}


/* GLOBAL NAV-BAR */

#nav-bar{
  height: 3vw;
  background-color: #000;
  display: flex;
  align-items: center;
  padding: 0 6vw 0 6vw;
  justify-content: space-between;
}

@media (max-width:1400px) {
  #nav-bar{
    height: 7vw;
  }
}

@media (max-width:900px) {
  #nav-bar{
    height: 10vw;
  }
}

@media (max-width:600px) {
  #nav-bar{
    height: 14vw;
  }
}

#nav-bar-list{
  display: flex;
}

@media (max-width:768px) {
  #nav-bar-list{
    display: none;
  }
}

#nav-bar-list > a{
  color: #fff;
  text-decoration: none;
  font-size: 1.1vw;
  padding-left: 2vw;
  text-transform: uppercase;
  font-weight: bolder;
  display: block;
}

@media (max-width:1400px) {
  #nav-bar-list > a{
    font-size: 1.8vw;
  }
}

@media (max-width:900px) {
  #nav-bar-list > a{
    font-size: 2.1vw;
  }
}

#nav-bar-list-mobile > a{
  display:block;
  text-decoration: none;
  color: #fff;
  padding-bottom: 1em;
  font-family: heebo;
  font-weight: 600;
  font-size: 7vw;
  text-transform: uppercase;
}

#mobile-nav-bar{
  display: none;
}

.mobile{
  display: block !important;
  background-color: rgb(190,19,24);
  justify-content: center;
  text-align: center;
  width: 100vw;
  height: 100vh;
  padding-top: 20vw;
}

#menu-icon{
  display: none;
}

@media (max-width:768px) {
  #menu-icon{
    display: block;
    height: 7vw;
  }
}

#nav-logo{
  width: 15vw;
  box-shadow: 0px 1px 23px rgba(0,0,0,0.1);
}

@media (max-width:1400px) {
  #nav-logo{
    width: 15vw;
  }
}

@media (max-width:900px) {
  #nav-logo{
    width: 25vw;
  }
}

@media (max-width:600px) {
  #nav-logo{
    width: 40vw;
  }
}


/* 404 PAGE */

.banner_404{
  height: 100vh;
  background-image: url("../img/test.jpg");
  background-size: cover;
  padding: 1vw 14vw 0 12vw;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.16);
}

@media (max-width:1200px) {
  .banner_404{
    padding: 0vw 8vw 0 8vw;
  }
}

@media (max-width:900px) {
  .banner_404{
    display: block;
    padding-top: 4em;
    text-align: center;
  }
}

@media (max-width:600px) {
  .banner_404{
    padding-top: 7em;
  }
}

.text_404{
  color: #fff;
  width: 35vw;
  font-family: heebo;
  position: relative;
  top: -0.5vw;
}

@media (max-width:1200px) {
  .text_404{
    top: -0.5vw;
  }
}

@media (max-width:900px) {
  .text_404{
    width: fit-content;
    display: inline-block;
  }
}

.text_404 h1{
  text-transform: uppercase;
  font-size: 4.2vw;
  margin-block-start: 0em;
  margin-block-end: 0em;
  line-height: 1.1em;
}

@media (max-width:768px) {
  .text_404 h1{
    font-size: 6vw;
  }
}

@media (max-width:600px) {
  .text_404 h1{
    margin-top: 0.5em;
  }
}

.text_404 p{
  font-size: 1.5vw;
  line-height: 2.15vw;
  margin-block-start: 1vw;
  margin-block-end: 1vw;
}

@media (max-width:1200px) {
  .text_404 p{
    font-size: 2vw;
    line-height: 2.9vw
  }
}

@media (max-width:900px) {
  .text_404 p{
    font-size: 2.5vw;
    margin-top: 1em;
  }
}

@media (max-width:768px) {
  .text_404 p{
    font-size: 3.2vw;
    line-height: 1.2em;
    margin-top: 0.8em;
    margin-bottom: 1.5em;
  }
}

@media (max-width:600px) {
  .text_404 p{
    font-size: 3.5vw;
    line-height: 1.2em;
    margin-top: 1.3em;
    margin-bottom: 2.5em;
  }
}

.btn404_container{
  margin-top: 4vw;
}

.text_404 p > a{
  color: #fff;
}

/*Jerkmate Review*/

article h2{
  font-size: 2em;
}

.text-content{
  margin: 8em 0 5em ;
  line-height: 1.5;
}

.text-content p {
  color: #fff;
}

.text-content .inner {
  padding: 0 1.5em;
}

@media (min-width:1200px) {
  .text-content{
    margin: 5em 0;
  }

  .text-content .inner {
    padding: 0 5.5em;
  }
}

.article-section{
  margin: 2.5em 0;
}

.block-ctn{
  display: flex;
  align-items: center;
}

.row{
  flex-direction: column;
}

@media (min-width:1200px){
  .row{
    flex-direction: row;
  }
}

.block-left, .block-right {
  margin: 0;
}

.block-img{
  width: 100%;
  height: auto;
}

@media (min-width:1200px){

  .block-left {
    margin: 0 0 0 2rem;
  }

  .block-right {
    margin: 0 2rem 0 0;
  }

  .block-img{
    width: 50%;
  }
}

.block-ctn .btn{
  width: 80%;
  margin: 1em 0;
}

.spot{
  background-color: #0e0e0e;
  padding: 1em 1em 2em;
  text-align: center;
}

.row .spot{
  flex-direction: column-reverse;
}

.spot img{
  box-shadow: rgb(10 1 1 / 99%) 1px 1px 14px 12px;
}

@media (min-width:1200px){
  .spot{
    padding: 2em 4em;
    text-align: inherit;
  }

  .row .spot{
    flex-direction: row;
  }
}