@font-face {
    font-family: 'Cormorant-Medium';
    src: url('font/Cormorant-Medium.ttf') format('truetype'), url('font/Cormorant-Medium.woff') format('woff'), url('font/Cormorant-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Canterbury-Regular';
    src: url('font/Canterbury-Regular.ttf') format('truetype'), url('font/Canterbury-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Canterbury';
    src: url('font/Canterbury.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis-Bold';
    src: url('font/Metropolis-Bold.woff') format('woff'), url('font/Metropolis-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis-SemiBold';
    src: url('font/Metropolis-SemiBold.ttf') format('truetype'),
        url('font/Metropolis-SemiBold.woff') format('woff'),
        url('font/Metropolis-SemiBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


.quote-iner.yellow .contant-sec h6,
.quote-iner.light-gray .contant-sec h6 {
    background-image: none;
}

body {
    font-family: 'Metropolis-SemiBold';
    font-family: 'Cormorant', serif;
    background: #040404;
    margin: 0px;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1600px;
    width: 100%;
}

.quote-iner .contant-sec figure {
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    margin: auto;
}

/*.quote-iner.light-gray span.quote.dyntextval {
    color: #fff !important;
}*/

.smoke-template .contant-sec figcaption .jtextfill span.quote.dyntextval {
    /*color: #fff;*/
    color: #EDEADA;
    font-family: 'Cormorant-Medium' !important;
    padding: 0px;
}

.meme-page {
    width: 1330px;
    float: none;
    text-align: center;
    background: #040404;
    height: 100%;
    /* display: flex; */
    /* align-items: center; */
}

.smoke-template p {
    color: #e3ddbe;
    font-family: 'Cormorant', serif !important;
}

.meme-page .select-box {
    width: 100%;
    float: left;
}

.meme-page .select-box select {
    width: 100%;
    float: left;
    height: 50px;
    margin-bottom: 20px;
    font-size: 21px;
    border: 1px solid #fff;
    text-transform: capitalize;
    padding: 10px 6px;
    font-family: 'Metropolis-SemiBold';
}

.meme-page .select-box button.submit {
    background: #b00000;
    width: 100%;
    float: left;
    height: 60px;
    color: #fff;
    border: 0px;
    font-size: 20px;
    font-family: 'Metropolis-SemiBold';
    cursor: pointer;
}

.quote-section {
    width: 100%;
    float: left;
    text-align: center;
    color: #fff;
    background: #000;
}

.quote {
    font-family: 'Metropolis-SemiBold' !important;
    font-size: 30px;
    min-height: auto;
    width: 100%;
    word-break: break-word;
    float: none;
    padding: 0px 24px;
    display: inline-block;
    line-height: 1;
}

.left-sec {
    width: 30%;
    float: left;
    margin-left: 0px;
    margin-top: 30px;
}

.quote-iner .contant-sec figure img {
    width: 40%;
}


.right-section {
    width: 68%;
    float: left;
    margin-left: 20px;
    text-align: center;
    margin-top: 30px;
}

.quote-section p br {
    display: none;
}

.quote-section p {
    font-family: 'Metropolis-SemiBold';
    width: 100%;
    float: left;
    margin: 0 !important;
}

.quote-section h4 {
    /*font-size: 30px;
    font-family: 'Metropolis-Bold';
    margin-top: 30px;
    width: 100%;
    float: left;
    z-index: 9;*/
    font-size: 30px;
    font-family: 'Metropolis-Bold';
    margin-top: 30px;
    max-width: 100%;
    width: max-content;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.quote-section figure {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.quote-section .quote-iner figure::after {
    background: url(../img/quote.png);
    position: absolute;
    content: "";
    width: 300px;
    height: 300px;
    left: 0;
    right: 0;
    margin: auto;
    background-repeat: no-repeat;
    top: 0px;
    background-size: 100%;
}

.quote-iner {
    width: 100%;
    float: left;
    padding-top: 0px;
}


.quote-img {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
    padding-top: 50px;
    margin-top: 70px;
}

.quote-section .quote-iner.golden .quote-img::before {
    background: url(../img/gold-top.png);
    position: absolute;
    content: "";
    width: 60px;
    height: 50px;
    left: -40px;
    background-repeat: no-repeat;
    top: 50px;
    z-index: 222;
    opacity: 9;
}

.quote-section .quote-iner.golden .quote-img::after {
    background: url(../img/gold-qute.png);
    position: absolute;
    content: "";
    width: 70px;
    height: 70px;
    right: -40px;
    background-repeat: no-repeat;
    bottom: -30px;
    z-index: 222;
    opacity: 9;
}

.Layer_1 {
    background-image: url("Layer 1.png");
    position: absolute;
    left: 259px;
    top: 45px;
    width: 395px;
    height: 395px;
    z-index: 2;
}

.quote-section .quote-iner .quote-img::before {
    background: url(../img/quote-top.png);
    position: absolute;
    content: "";
    width: 68px;
    height: 50px;
    left: -55px;
    background-repeat: no-repeat;
    top: 80px;
    z-index: 222;
    opacity: 0.2;
    background-size: 80%;
}

.quote-section .quote-iner .quote-img::after {
    background: url(../img/quote-bottom.png);
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    right: -25px;
    background-repeat: no-repeat;
    bottom: -40px;
    z-index: 222;
    opacity: 0.1;
    background-size: 85%;
}

/*
.quote-section .quote-iner::after {
    content: "";
    background: #040404;
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0px;
    z-index: 0;
}*/
.quote-section .quote-iner.golden {
    width: 100%;
    float: left;
    /*border: 8px solid transparent;*/
    /* border-image-source: linear-gradient(45deg, #bda94f, #bdad73, #695e28, #e6d68b); 
    border-image-slice: 1;
background-image: -moz-linear-gradient( -94deg, rgb(213, 190, 86) 0%, rgb(230, 214, 140) 51%, rgb(170, 146, 54) 100%);
    background-image: -webkit-linear-gradient( -94deg, rgb(213, 190, 86) 0%, rgb(230, 214, 140) 51%, rgb(170, 146, 54) 100%);
    background-image: -ms-linear-gradient( -94deg, rgb(213, 190, 86) 0%, rgb(230, 214, 140) 51%, rgb(170, 146, 54) 100%);*/
    background-image: url("https://www.raprated.com/meme/img/new-gold1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


.quote-section .quote-iner.silver {
    width: 100%;
    float: left;
    /* border: 8px solid transparent; 
    background-image: -moz-linear-gradient( 36deg, rgb(201, 201, 201) 0%, rgb(237, 237, 237) 51%, rgb(163, 162, 162) 100%);
     background-image: -webkit-linear-gradient( 36deg, rgb(201, 201, 201) 0%, rgb(237, 237, 237) 51%, rgb(163, 162, 162) 100%); 
    background-image: -ms-linear-gradient( 36deg, rgb(201, 201, 201) 0%, rgb(237, 237, 237) 51%, rgb(163, 162, 162) 100%);*/
    background-image: url("https://www.raprated.com/meme/img/new-sliver.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.quote-section .quote-iner.red {
    width: 100%;
    float: left;
    /*border: 8px solid transparent;*/
    /*  border-image-source: linear-gradient(45deg, #770000, #db0000, #870000, #870000);
    border-image-slice: 1;
	background-image: -moz-linear-gradient( -94deg, rgb(86, 0, 0) 0%, rgb(173, 0, 0) 51%, rgb(84, 0, 0) 100%);
    background-image: -webkit-linear-gradient( -94deg, rgb(86, 0, 0) 0%, rgb(173, 0, 0) 51%, rgb(84, 0, 0) 100%);
    background-image: -ms-linear-gradient( -94deg, rgb(86, 0, 0) 0%, rgb(173, 0, 0) 51%, rgb(84, 0, 0) 100%);*/
    background-image: url("https://www.raprated.com/meme/img/new-read.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*.quote-section .quote-iner figure img {
    width: 100%;
    object-position: bottom;
    height: 260px;
    object-fit: scale-down;
}*/
.smoke-section .quote-iner.red span.quote.dyntextval {
    color: #e6DDB4 !important;
}

.quote-section .quote-iner figure img {
    max-width: 350px;
    margin-top: 0px;
    object-fit: scale-down;
    object-position: bottom;
    height: 300px;
    left: -22px;
    position: relative;
}

.quote-section .quote-iner figure {

    width: 300px;
    height: 300px;

    margin: auto;
    text-align: center;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 100%;
    margin-bottom: 15px;
    /*  margin-top: 70px;*/
    z-index: 9;
}


.quote-iner figcaption {
    width: 93%;
    padding-bottom: 40px;
    float: none;
    z-index: 9;
    margin: auto;
}

.quote-section .quote-iner.golden figure {
    background-image: -moz-linear-gradient(-94deg, rgb(213, 190, 86) 0%, rgb(230, 214, 140) 51%, rgb(170, 146, 54) 100%);
    background-image: -webkit-linear-gradient(-94deg, rgb(213, 190, 86) 0%, rgb(230, 214, 140) 51%, rgb(170, 146, 54) 100%);
    background-image: -ms-linear-gradient(-94deg, rgb(213, 190, 86) 0%, rgb(230, 214, 140) 51%, rgb(170, 146, 54) 100%);
}

.quote-section .quote-iner.red figure {
    background-image: -moz-linear-gradient(-94deg, rgb(86, 0, 0) 0%, rgb(173, 0, 0) 51%, rgb(84, 0, 0) 100%);
    background-image: -webkit-linear-gradient(-94deg, rgb(86, 0, 0) 0%, rgb(173, 0, 0) 51%, rgb(84, 0, 0) 100%);
    background-image: -ms-linear-gradient(-94deg, rgb(86, 0, 0) 0%, rgb(173, 0, 0) 51%, rgb(84, 0, 0) 100%);
}

.quote-section .quote-iner.silver figure {
    background-image: -moz-linear-gradient(36deg, rgb(201, 201, 201) 0%, rgb(237, 237, 237) 51%, rgb(163, 162, 162) 100%);
    background-image: -webkit-linear-gradient(36deg, rgb(201, 201, 201) 0%, rgb(237, 237, 237) 51%, rgb(163, 162, 162) 100%);
    background-image: -ms-linear-gradient(36deg, rgb(201, 201, 201) 0%, rgb(237, 237, 237) 51%, rgb(163, 162, 162) 100%);
}


/*section.meme-page.smoke-template figcaption {*/

section.meme-page.smoke-template .contant-sec figcaption {
    padding: 20px 0px;
}

.smoke-template .smoke-template .contant-sec figure {
    position: absolute;
    bottom: 86px;
    left: 0;
    right: 0;
    margin: auto;
}

.quote-iner {
    position: relative;
}

.frame-img img {
    width: 100%;
}

.smoke-template .contant-sec h6 {
    background-image: -moz-linear-gradient(90deg, rgb(211, 188, 81) 0%, rgb(211, 188, 81) 0%, rgba(230, 214, 141, 0.78) 56%, rgba(149, 121, 22, 0.6) 100%);
    background-image: -webkit-linear-gradient(90deg, #8a6c05 0%, rgb(211, 188, 81) 0%, rgba(230, 214, 141, 0.78) 56%, rgba(149, 121, 22, 0.6) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(211, 188, 81) 0%, rgb(211, 188, 81) 0%, rgba(230, 214, 141, 0.78) 56%, rgba(149, 121, 22, 0.6) 100%);
    width: auto;
    display: inline-block;
    font-size: 55px;
    color: #000000;
    text-transform: capitalize;
    font-family: 'Canterbury';
    margin-bottom: 0px;
    font-weight: 400;
    padding: 0px 3px;
    margin-top: 0px;
    line-height: 45px;
}

quote-iner.light-gray span.quote.dyntextval {
    color: #edeada !important;
}

.smoke-template .contant-sec figcaption .jtextfill {
    /*font-size: 43px;*/
    color: #e3ddbe;
    font-family: 'Cormorant-Medium';
    /*font-weight: 700;*/
    /*line-height: 45px;*/
    word-break: break-all;
    /*min-height: 110px;*/
}

figure.author-img img {
    width: 360px;
    /*filter: grayscale(100%);
    -webkit-filter: grayscale(100%);*/
}

.grayscale_img {
    filter: grayscale(100%);
    filter: gray;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.frame-img {
    position: relative;
}

figure.author-img {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.quote-iner .contant-sec {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0;
    margin: auto;
    width: 85%;
    bottom: 9px;
}

textarea {
    width: 100%;
    height: 150px;
    font-size: 21px;
    border: 1px solid #fff;
    font-family: 'Metropolis-SemiBold';
    padding: 10px;
    margin-bottom: 20px;
    resize: vertical;
}

input {
    width: 100%;
    float: left;
    height: 50px;
    margin-bottom: 20px;
    font-size: 21px;
    border: 1px solid #fff;
    text-transform: capitalize;
    padding: 10px 6px;
    font-family: 'Metropolis-SemiBold';
}

.contant-sec figcaption .jtextfill {
    position: absolute;
    top: 38px;
    left: 36px;
    width: 92%;
    height: 280px;
    display: flex;
    align-items: center;

}

figcaption .jtextfill {
    position: absolute;
    top: 60%;
    left: 0px;
    width: 100%;
    height: 190px;
    z-index: 9;
    display: flex;
    align-items: center;
    padding: 0px;
}

.quote-section .quote-iner {
    height: 920px;
    position: relative;
    /*width: 750px !important;*/
}

.quote-section h4 {
    position: absolute;
    bottom: 0;
}

.main-inner {
    float: left;
    text-align: center;
    width: 100%;
}

.smoke-template .contant-sec h6 {
    position: relative;
    bottom: 0px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: max-content;
    margin-top: 10px;
}


.quote-section .quote-iner .logo {
    position: absolute;
    left: 20px;
    width: 15%;
    margin: 0;
    z-index: 9;
    top: 20px;
}

.smoke-section .quote-iner .logo {
    position: absolute;
    top: 15px;
    width: 110px;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
}

@media(min-width:1140px) {
    .quote-iner .contant-sec figure {
        position: absolute;
        bottom: 4px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .meme-page {
        float: none;
        text-align: center;
        background: #040404;
        height: 100%;
        align-items: center;
        max-width: 1170px;
        margin: auto;
    }
}

.navbar-header {
    width: auto;
    float: left;
}

ul.nav.navbar-nav li {
    display: inline-block;
    vertical-align: middle;
}

.navbar-nav .login {
    top: 0px;

}


a.navbar-brand {
    top: -10px;
}
.navbar-nav a {
    text-decoration: none;
}

.rapper-rating-listing ul li:last-child {
    display: inherit;
}


span.irs.js-irs-0 {
    margin-top: 12px;
}
@media (min-width:768px){

button.navbar-toggle.collapsed {
    display: none;
}

}

/* ===== MOBILE PORTRAIT ===== */
@media (max-width: 960px) and (orientation: portrait) {

  /* Hide site header/navbar */
  header.cust-header {
    display: none !important;
  }

  /* Override the fixed 1330px width on the page container */
  .meme-page {
    width: 100% !important;
    max-width: 100vw !important;
    background: #040404 !important;
    min-height: 100dvh;
    padding: 0 !important;
    margin: 0 !important;
  }

  html, body {
    overflow-x: hidden !important;
  }

  .meme-page .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Stack layout vertically instead of float side-by-side */
  .meme-page .row-fluid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Controls section — full width on top */
  .meme-page .left-sec {
    width: 100% !important;
    max-width: 430px;
    float: none !important;
    padding: 16px !important;
    margin: 0 !important;
    order: 1;
  }

  .meme-page .left-sec .select-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100% !important;
    float: none !important;
  }

  .meme-page .left-sec .select-box select {
    width: 100% !important;
    float: none !important;
    font-size: 16px !important;
    padding: 12px !important;
    height: auto !important;
    margin-bottom: 0 !important;
    border-radius: 4px;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    -webkit-appearance: none;
    appearance: none;
  }

  .meme-page .left-sec .select-box textarea {
    width: 100% !important;
    font-size: 16px !important;
    padding: 12px !important;
    min-height: 80px;
    height: 80px;
    margin-bottom: 0 !important;
    border-radius: 4px;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    resize: vertical;
  }

  .meme-page .left-sec .select-box button.submit {
    width: 100% !important;
    float: none !important;
    padding: 16px !important;
    height: auto !important;
    font-size: 18px !important;
    border-radius: 4px;
    border: none;
    background: linear-gradient(135deg, #c50127, #8b0019);
    color: #fff;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* Preview section — render at native desktop size, then scale to fit phone */
  .meme-page .right-section {
    width: 904px !important;
    flex-shrink: 0;
    float: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: -480px;
    order: 2;
    align-self: flex-start;
    transform-origin: top left;
    transform: scale(0.475);
    overflow: visible !important;
  }
  .meme-page .right-section .quote-section,
  .meme-page .right-section .smoke-section {
    transform: none;
    margin-bottom: 0;
  }
  .meme-page .right-section .quote-section .quote-iner {
    height: 920px;
  }

}