@media (max-width: 1440px) {
  :root {
    --top-header: #303133;
    --white: #fff;
    --red-color: #d90000;
    --btn-bg: #c7262d;
    --from-span: #c2262d;
    --black-color: #000000;
    --from-h4: #686868;
    --tier-list-h3: #acacac;
    --blog-p: #6b6b6b;
    --page-bg: #151515;
    --font-9: 9px;
    --font-11: 11px;
    --font-12: 12px;
    --font-13: 13px;
    --font-14: 14px;
    --font-10: 10px;
    --font-18: 18px;
    --font-22: 22px;
    --font-24: 24px;
    --font-26: 26px;
    --font-34: 34px;
    --font-37: 37px;
    --font-48: 48px;
  }
  .main-banner {
    height: 77vh;
  }
  .baner-hdgh5 {
    font-size: 25px;
  }
  .baner-hdg {
    font-size: 95px;
  }
  .create-acount-popup .modalWindow .modalWrapper {
    padding: 30px 40px;
  }
  .user-imge img {
    width: 33%;
  }
  .user-imge h1 {
    margin-top: 10px;
    font-size: var(--font-22);
  }
  .fixedform-1 {
    margin-top: 35px;
  }
  .mm-field textarea.form-control {
    height: 75px;
  }
  .builds-create-account .mm-field,
  .mm-field {
    height: 80px;
  }

  .create-acount-popup .closeBtn,
  .edit-delete-button a {
    font-size: 14px;
  }
  .builds-create-account .user-imge img {
    width: 20%;
  }
  .builds-create-account .modalWindow .modalWrapper {
    padding: 27px 25px;
  }
  .builds-create-account .user-imge h1 {
    font-size: 16px;
    margin-bottom: 0;
  }
  .builds-create-account .atr-ctr-dtls {
    padding: 10px 0;
  }
  .builds-create-account .user-imge {
    margin-top: -8%;
  }
  .builds-create-account .atr-ctr-dtls P {
    font-size: var(--font-12);
    line-height: 20px;
  }
  .builds-create-account .comment-ul {
    margin-top: 10px !important;
  }
  .builds-create-account .atr-ctr-form {
    margin-top: 10px !important;
  }
  .builds-create-account .atr-ctr-dtls-ul a {
    font-size: 14px;
  }
  .builds-create-account .mm-field textarea.form-control {
    height: 75px;
  }
  .builds-create-account .atr-ctr-dtls h4 {
    margin-bottom: 3px;
  }
  .builds-create-account .modalWindow {
    width: 41%;
    top: 3%;
  }
  .builds-create-account .mt-4,
  .my-4 {
    margin-top: 0.7rem !important;
  }
  .fixedform-1 {
    margin-top: 22px;
  }
  .builds-create-account .input-btn button {
    height: 40px;
    font-size: 17px;
  }
  .player-imglist img {
    margin-right: 20px;
    width: 22%;
  }
  .tierlist-login-create-sec .tier-one-list {
    padding: 30px 20px 30px 20px;
  }
  .player-imglist{
    margin-bottom: 20px;
  }
  .tier-one-ctreatelist-details h4{
    font-size: 20px;
  }
  .tier-one-ctreatelist-details p{
    line-height: 24px;
  }
  .player-selection .tier-one-listul img {
    width: 100px;
}
.player-selection .tier-one-listul{
  gap: 50px 30px;
}
.player-selection{
  margin-left: 20px;
  }
  .tierlist-user-imge img {
    width: 18%;
}
.tierlist-user-dtl h1{
  font-size: var(--font-22);
}
.tierlist-user-dtl span{
  font-size: var(--font-18);
}
.tier-one-listul img {
  width: 70%;
}
.tier-one-listul li {
  margin-right: 0 !important;
}
.tier-one-list h2{
  font-size: var(--font-34);
  margin-bottom: 15px;
}
.tier-one-list{
  padding: 30px;
}
.tier-one-list-details {
  margin-top: 15px;
}
.tier-one-list-details p {
  margin-bottom: 0;
  line-height: 23px;
  font-size: 14px;
}
.tier-two-list {
  margin-top: 20px;
}
.comment-ul{
  margin-top: 20px !important;
}
.tier-one-textarea{
  margin-top: 20px;
  margin-bottom: 0;
}
.tierlist-login-sec .mm-field{
  height: 70px;
}
.tierlist-login-sec .mm-field textarea.form-control {
  height: 65px;
}
.brdr-btm {
  padding: 20px 50px 20px 0;
}

}
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)  {
    /* .tierlist-login-create-sec .modalWindow {
        width: 71% !important;
    } */
    .profile-tier .modal-content.tier-content {
        height: 632px !important;
    }
    /* .tierlist-login-create-sec .modalWindow {
      width: 87%;
    } */
    .tierlist-login-create-sec .modalWindow {
      width: 79.6% !important;
    }
}

@media (max-width: 1280px) {
  .main-banner {
    background-position: top;
    height: 100%;
    padding: 70px 0;
  }
  .baner-hdgh5 {
    font-size: 20px;
    padding: 8px 25px;
  }
  .baner-hdg {
    font-size: 95px;
    margin-bottom: 0;
    line-height: 100%;
  }
  .tier-list-h2 {
    font-size: var(--font-18);
  }
  .tier-list-wpraper {
    margin-top: 30px;
  }
  .guide-sec,
  .tier-list-sec {
    padding: 50px 0;
  }
  .create-acount-popup .modalWindow .modalWrapper {
    padding: 20px 40px;
  }
  .mm-field {
    height: 55px;
    margin-bottom: 13px;
  }
  .mm-field input,
  .mm-field textarea {
    padding: 10px 25px 0;
  }
  .input-btn button {
    height: 40px;
    font-size: 18px;
  }
  .fixedform-1 {
    margin-top: 25px;
  }
  .mm-field textarea.form-control {
    height: 53px;
  }
  .builds-create-account .modalWindow {
    width: 55%;
  }
  .builds-create-account .user-imge {
    margin-top: -6%;
  }

    .tierlist-login-create-sec .tier-one-list h2{
      font-size: var(--font-24);
    }
    .tier-one-list a{
      font-size: var(--font-14);
    }
    .tier-one-ctreatelist-details h4 {
      font-size: 16px;
    }
    .tier-one-ctreatelist-details p{
      font-size: var(--font-12);
    }
}
@media (max-width: 1199px) {
  .header .navbar-expand-lg .navbar-nav .nav-link {
    width: 100px;
  }
  .menu-img a {
    margin: 0 6px;
  }
  .tier-list-h2 {
    font-size: 16px;
  }
  .create-acount-popup .modalWindow {
    width: 40%;
  }
  .builds-create-account .modalWindow {
    width: 55%;
  }
  .builds-create-account .modalWindow {
    width: 65%;
  }
  .home-login {
    margin-bottom: 0;
  }
  .profile-sec h1 {
    font-size: 20px;
  }
  .profile-edit a {
    font-size: 16px;
  }
  .blog-sec-h2 {
    margin: 30px 0 40px;
  }
  .side-blogs .blog-sec h1 {
    font-size: 17px;
  }
  .roster-page-ul {
    gap: 40px 30px;
  }
  .roster-page {
    padding: 60px 0;
  }
  .roster-page-ul li {
    margin-left: 0;
  }
  .roster-page-ul a {
    margin-left: 0;
    padding: 0 0 0 8px;
  }
  .tierlist-login-create-sec .modalWindow {
    width: 70%;
  }
  .tierlist-login-create-sec .modalWrapper {
    padding: 40px 30px 0px !important;
  }
  .tierlist-login-create-sec .drag-publishbtn{
    margin-bottom: 40px
  }
  .tierlist-login-sec .edit-delete-button{
    margin-top: 25px;
  }
  .tierlist-login-sec .modalWindow {
    width: 75% !important;
  }
  .tierlist-header{
    margin-bottom: 20px !important;
  }
  .player-name h2{
    font-size: 20px;
    margin-left: 25px;
  }
  .brdr-btm .player-name:nth-child(2) {
    flex: 0 0 23%;
  }
  .brdr-btm {
    padding: 20px 20px 20px 0;
  }
  .sidebar, .mainbar {
    width: 100%;
  }
  .userguide-section {
    height: 900px;
  }
}
@media (max-width: 991px) {
  .header .navbar-expand-lg .navbar-nav .nav-link {
    height: 45px;
    width: 100%;
    font-size: 15px;
    border-bottom: 2px solid var(--black-color);
    border-top: 0;
  }
  .header .navbar-nav {
    display: block;
  }

  .navbar {
    justify-content: right;
  }
  .baner-hdg {
    font-size: 80px;
  }
  .top-header .container {
    max-width: 100%;
  }
  .header .navbar-toggler-icon {
    width: 100%;
    position: relative;
    z-index: 9999999999999;
    display: inline;
  }
  .header .navbar-toggler {
    position: absolute;
    padding: 0;
  }
  button:focus {
    outline: none;
  }
  .navbar-expand-lg .navbar-collapse {
    z-index: 999;
    width: 90%;
    position: absolute;
    top: 46px;
    left: 0;
    background-color: var(--btn-bg);
  }
  .menu-img {
    margin: 24px 0;
    display: flex;
    justify-content: center;
  }

  .navbar-expand-lg .navbar-nav .nav-link.active,
  .navbar-expand-lg .navbar-nav .nav-link:hover {
    background-color: transparent;
  }
  .menu-img sup {
    color: var(--btn-bg) !important;
  }
  .menu-img sup::before {
    background-color: var(--white);
  }
  .menu-img img {
    width: 20px;
  }
  .header .col-md-3 {
    flex: 0 0 34%;
    max-width: 34%;
  }
  .header .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 66%;
    max-width: 66%;
  }
  .navbar-expand-lg .navbar-nav .menu-img img:hover {
    filter: none;
  }
  .guide-tab-pane .tab-pane {
    padding: 55px 30px !important;
  }
  .juli-img-box {
    padding: 20px 4px;
    background-position: center;
  }
  .guide-h1 {
    font-size: var(--font-34);
  }
  .juli-img-wraper h1 {
    font-size: var(--font-18);
  }
  .juli-img-wraper h4 {
    font-size: 12px;
  }
  .top-header .col-md-3 {
    flex: 0 0 30%;
    max-width: 30%;
  }
  .top-header .col-md-9 {
    flex: 0 0 70%;
    max-width: 70%;
  }
  .menu-img a {
    margin: 0 15px 0 5px;
  }
  .tier-list-ul img,
  .tier-list-ul2 img {
    width: 72px;
  }
  .tier-list-ul {
    gap: 15px;
  }
  .tier-list-h2 {
    font-size: 13px;
  }
  .blog-h1 {
    font-size: 17px;
  }
  .footer-quick-ul a,
  .footer-support-ul a {
    padding: 0 30px;
  }
  .builds-with-login-tabs a {
    margin: 0 15px;
  }
  .builds-with-login-ul img {
    width: 70px;
  }
  .create-acount-popup .modalWindow {
    width: 50%;
  }
  .builds-create-account .modalWindow {
    width: 95% !important;
  }
  .guide-sec-wrp .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link {
    padding: 0 22px 6px;
  }
  .home-login-area .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 58.666667%;
    max-width: 58.666667%;
  }
  .home-login-area .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 35%;
    max-width: 35%;
  }
  .guide-sec-wrp .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link {
    padding: 0 16px 6px;
  }
  .name-date span {
    font-size: 12px;
  }
  .login-h1 {
    font-size: 18px;
  }
  .login-player-area {
    background-position: bottom;
  }
  .roster-page-ul {
    grid-template-columns: auto auto auto;
  }
  .tierlist-login-create-sec .modalWindow {
    width: 90%;
}
.tierlist-login-sec .modalWindow {
  width: 95% !important;
}
.tierlist-heading h1{
  font-size: 16px;
}
.players-img {
  width: 70px !important;
}
.tierlist-without-login .player-name h2 {
  font-size: 15px;
  margin-left: 15px;
}
.tierlist-without-login .player-name span {
  font-size: var(--font-14);
}
.tierlist-without-login .player-name h5{
  font-size: var(--font-14);
}

}
@media (max-width: 767px) {
  .top-header .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .top-header .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .top-header {
    padding: 4px 30px;
  }
  .top-header .container {
    display: none;
  }
  .openbtn,
  .top-sidebars {
    display: block;
  }
  .header .col-md-3 {
    flex: 0 0 43%;
    max-width: 43%;
  }
  .header .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 57%;
    max-width: 57%;
  }
  .guide-sec-wrp .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link {
    padding: 0 15px 6px;
    font-size: 16px !important;
  }
  .juli-img-player img {
    width: 50px;
  }
  .juli-img-player {
    gap: 18px;
  }
  .juli-img-wraper h4 {
    margin-bottom: 20px;
  }
  .guide-h1 {
    font-size: var(--font-26);
  }
  .blog-wraper img {
    width: 100%;
  }
  .blog-wraper .col-md-4 {
    margin-bottom: 30px;
  }
  .footer-quick-ul a,
  .footer-support-ul a {
    padding: 0 17px;
  }
  .builds-with-login-tabs a {
    margin: 0 7px;
    padding: 22px 13px;
    font-size: 12px;
  }
  .builds-with-login-ul {
    grid-template-columns: auto auto auto auto;
    margin-bottom: 15px !important;
  }
  .builds-with-login-ul a {
    margin-bottom: 30px;
  }
  .create-acount-popup .modalWindow {
    width: 65%;
  }
  .home-login-area .col-md-8 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
  .home-login-area .col-md-3 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    order: -1;
  }
  .home-login-area .blog-sec img {
    width: 100%;
  }
  .tierlist-login-create-sec .modalWindow {
    width: 98% !important;
  }
  .tierlist-login-create-sec .modalWrapper {
    padding: 35px 20px 0px !important;
  }
  .player-selection .tier-one-listul img {
    width: 70px;
  }
  .player-imglist img {
    margin-right: 5px;
  }
  .tier-one-list a{
    font-size: 13px;
  }
  .tierlist-login-create-sec .tier-one-list h2{
    font-size: 20px;
  }
  .tier-one-ctreatelist-details h4 {
    font-size: 14px;
  }
  .player-selection .tier-one-listul {
    gap: 50px 10px;
  }
  .tierlist-header .tierlist-heading:nth-child(1) {
    flex: 0 0 30%;
  }
  .tierlist-header .tierlist-heading:nth-child(2) {
    flex: 0 0 40%;
  }
  .tierlist-without-login .player-name h5{
    font-size: var(--font-12);
  }
  .tierlist-without-login .brdr-btm {
    padding: 20px 8px 20px 0;
  }
  .build-container .tier-container .talent-info {
    width: unset;
  }
  .build-container .tier-container {
    white-space: unset;
  }
  .userguide-section {
    height: 1200px;
  }
}
@media (max-width: 575px) {
  .footer-quick-ul a,
  .footer-support-ul a {
    padding: 0 12px;
  }
  .guide-sec-wrp .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link {
    padding: 0 8px 5px;
    font-size: 14px !important;
  }
  .guide-h1 {
    font-size: var(--font-22);
  }
  .header .col-md-3 {
    flex: 0 0 49%;
    max-width: 49%;
  }
  .header .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 51%;
    max-width: 51%;
  }
  .baner-hdg {
    font-size: 65px;
  }
  .guide-tab-ul li span {
    font-size: 20px;
  }
  .builds-with-login-tabs a {
    padding: 22px 7px;
  }
  .create-acount-popup .modalWindow {
    width: 80%;
  }
  .roster-page-ul {
    grid-template-columns: auto auto;
  }
.player-imglist img {
  width: 30%;
}
.player-imglist {
  text-align: left;
  margin-top: 20px;
}
.tierlist-user-dtl h1 {
  font-size: var(--font-18);
}
.tierlist-user-dtl span {
  font-size: var(--font-14);
}
.tierlist-login-sec .modalWindow .modalWrapper {
  padding: 20px !important;
}
.tier-one-list h2{
  font-size: var(--font-26);
}
.players-img {
  width: 55px !important;
}
.tierlist-without-login .player-name h2 {
  font-size: 12px;
  margin-left: 10px;
}
.tierlist-without-login .player-name span{
  font-size: var(--font-12);
}
.tierlist-header{
  padding: 32px 58px 32px 20px;
}
}
@media (max-width: 480px) {
  .tier-list-ul {
    grid-template-columns: auto auto auto;
  }
  .footer-quick-ul a,
  .footer-support-ul a {
    padding: 0 6px;
  }
  .brand-logo a {
    font-size: 30px;
  }
  .builds-with-login-tabs a {
    padding: 22px 15px;
  }
  .builds-with-login-ul {
    grid-template-columns: auto auto auto;
  }
  .create-acount-popup .modalWindow {
    width: 90%;
  }

  .comment-ul li {
    padding: 0 8px;
  }
  .builds-create-account .atr-ctr-dtls-ul a {
    font-size: 12px;
  }
  .roster-page-ul a {
    font-size: 11px;
  }
  .brdr-btm .player-name:nth-child(3) {
    flex: 0 0 27%;
}
}
@media (max-width: 414px) {
  .brand-logo a {
    font-size: var(--font-22);
  }
  .baner-hdg {
    font-size: 55px;
  }
  .guide-sec-wrp {
    display: block;
  }
  .guide-sec-wrp .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link {
    font-size: 14px !important;
  }
  .guide-h1 {
    font-size: var(--font-26);
    margin-bottom: 25px;
  }
  .guide-tab-ul li span {
    font-size: 15px;
  }
  .juli-img-player {
    grid-template-columns: auto auto auto auto;
  }
  .tier-list-ul2 li {
    margin: 0 17px !important;
  }
  .footer-quick-ul,
  .footer-support-ul,
  .social-icon-ul {
    display: grid;
    grid-template-columns: auto auto auto auto;
  }
  .footer-quick-ul a,
  .footer-support-ul a {
    margin-bottom: 12px;
  }
  .footer-quick-ul,
  .footer-support-ul,
  .social-icon-ul {
    margin-top: 15px !important;
  }
  .builds-with-login-ul {
    grid-template-columns: auto auto;
  }
  .serach-area {
    padding: 10.5px 18px;
  }
  .serach-area img {
    margin-right: 0;
  }
  .create-acount-popup .modalWindow .modalWrapper {
    padding: 20px 30px;
  }
  .input-btn button {
    width: 100px;
  }
  .checkbox-round {
    margin-left: 10px;
  }
  .input-btn button {
    font-size: 16px;
  }
  .input-btn label {
    font-size: 14px;
  }
  .builds-create-account .mm-field textarea.form-control {
    font-size: 13px;
  }
  .builds-create-account .modalWindow .modalWrapper {
    padding: 20px 10px;
  }
  .tier-one-ctreatelist-details p{
    height: auto;
  }
  .created-list-btn-option .classic{
    padding: 15px;
    font-size: 14px;
  }
  .created-list-aftr{
    padding: 80px 20px !important;
  }
  .created-list-aftr .input-btn button {
    width: 150px;
}
.created-list-btn-option {
  margin: 30px 0;
}
.tierlist-user-imge img {
  width: 35%;
  margin-top: 25px;
}
.tierlist-login-sec .comment-ul{
  grid-template-columns: auto auto auto auto auto auto;
}
.tierlist-login-sec .comment-ul li{
  margin-bottom: 10px !important;
}
.tierlist-login-sec .tier-one-list {
  padding: 15px;
}
.created-list-aftr{
  padding: 55px !important;
}
.create-listdlt-wraper{
  margin-top: 0;
}
.created-list-details p{
  font-size: 13px;
}
.created-list-details h3{
  font-size: var(--font-18);
}
.created-list-aftr {
  padding: 50px 20px !important;
}
.created-list-details {
  padding: 20px 0;
}
}