@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

@font-face {
   font-family: 'Yekan';
   src: url('../../contents/css/fonts/Yekan.woff2') format('woff2'),
      url('../../contents/css/fonts/Yekan.woff') format('woff');
   /* Fallback */
   font-weight: normal;
   font-style: normal;
   font-display: swap;
   /* مهم: جلوگیری از تأخیر نمایش متن */
}

span.red-game {
   background: red;
   border-radius: .8em;
   -moz-border-radius: .8em;
   -webkit-border-radius: .8em;
   color: #fff;
   display: inline-block;
   font-weight: 700;
   line-height: 1.6em;
   text-align: center;
   width: 2em !important;
   margin-top: 3px;
}

.emojiGame {
   width: 6rem;
   height: 6rem;
   display: inline-block;
   border-radius: 50%;
   position: relative;
}

.div-thader {
   font-family: 'Yekan';
   color: rgb(255, 255, 255);
   height: 40px;
   margin-bottom: 1px;
   padding: 10px
}

.f-thader {
   font-family: 'Yekan';
   color: aliceblue;
   font-weight: 900
}

.ul-thader {
   font-family: 'Yekan';
   color: aliceblue
}

.screenshot-container {
   background: #f8f9fa;
   /* min-height: 200px; */
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border-radius: 0.5rem 0.5rem 0 0;
}

.blockquote {
   background: linear-gradient(135deg, #de8686 0%, #764ba2 100%) !important;
   color: #fdfcfc;
}

.screenshot-container img {
   width: 100%;
   height: auto;
   object-fit: fill;
   max-height: fit-content;
}

.li-thader {
   font-family: 'Yekan';
   color: aliceblue
}

.a-thader {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1em;
   padding: 1px;
   border: 1px
}

.a-topnav {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1.2em;
   padding: 1px;
   border: 1px
}

.a-topnav1 {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1em;
   padding: 1px;
   border: 1px
}

.a-topnav3 {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1em
}

.a-topnav4 {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1.1em
}

.a-topnav5 {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1.6em
}

.a-topnav6 {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: .5em
}

.a-font {
   font-family: 'Yekan';
   font-weight: 900
}

.font-title {
   font-family: 'Yekan';
   font-weight: 900
}

.font-des {
   font-family: 'Yekan';
   font-weight: 400
}

.a-fontrtl {
   font-family: 'Yekan';
   font-weight: 900;
   align-items: right
}

.a-topnav2 {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1.4em
}

.a-topnav-footer {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1.2em;
   width: max-content;
   padding-top: 1px;
   padding-bottom: 1px
}

.a-topnavback {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1em;
   padding-top: 40px;
   padding-bottom: 40px;
   border: 100px
}

.a-txtt {
   font-family: 'Yekan';
   font-weight: bolder;
   font-size: 1.4em;
   padding: 1px;
   border: 1px
}

.pointer-hover {
   cursor: pointer;
}

.a-txtt1 {
   font-family: 'Yekan';
   font-weight: bolder;
   font-size: 1.1em;
   padding: 1px;
   border: 1px
}

.backgg {
   background-image: url(/contents/images/backlogin.jpg);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover
}

.bnumber {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1.4em;
   padding: 1px;
   border: 1px
}

.bnumber1 {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 2em;
   padding: 1px;
   border: 1px
}

.bnumber2 {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1.4em
}

.clearfix::after {
   content: '';
   clear: both;
   display: table
}

.child {
   width: 100px;
   transform: translate(1px);
   font-weight: 900;
   font-size: 1em;
   margin-top: 25px;
   position: static;
   float: inline-start
}

.column {
   width: 33%
}

.div-hgame {
   align-items: center
}

.botton-gamen {
   flex: 1 1 auto;
   right: 10px
}

.rightg {
   font-family: 'Yekan';
   font-weight: bolder;
   font-size: 1.4em;
   border: 10px;
   padding: 10px
}

body {
   margin: 0;
   font-family: sans-serif;
   line-height: 1.5;
   color: hsl(215, 5%, 20%);
   background-color: hsl(215, 5%, 98%)
}

.content-width {
   margin: 2rem auto;
   width: 90%;
   max-width: 40rem
}

.content-width {
   margin: 2rem auto;
   width: 90%;
   max-width: 40rem
}

h1 {
   font-size: 2rem;
   font-weight: 400;
   line-height: 1.2
}


p {
   font-size: 1.125rem
}

a {
   color: hsl(215, 80%, 50%)
}

a:hover {
   text-decoration: none
}

.button {
   font-family: 'Yekan';
   border: none;
   color: #fff;
   padding: 5px 32px;
   text-align: center;
   text-decoration: none;
   font-size: 15px;
   margin: 1px;
   cursor: pointer
}

.button1 {
   font-family: 'Yekan';
   border: none;
   color: #fff;
   padding: 7px 70px 7px 70px;
   text-align: center;
   text-decoration: none;
   font-size: 15px;
   margin: 1px;
   border-radius: 5px;
   cursor: pointer
}

.button-headder {
   font-family: 'Yekan';
   color: aliceblue;
   font-weight: 800;
   font-size: 1.2em;
   margin-top: 10px;
   background: linear-gradient(to bottom, hsl(215, 80%, 50%), hsl(215, 80%, 30%));
   padding: 8px;
   text-align: center;
   text-decoration: none;
   border-radius: .25rem;
   border: 1px solid hsl(215, 80%, 35%);
   text-shadow: 0 -1px hsl(215, 80%, 35%);
   box-shadow: 0 1px hsl(215, 80%, 70%) inset
}

table {
   font-family: 'Yekan', Roboto;
   font-weight: 700;
   font-style: normal;
   font-size: 1.2em;
   border-collapse: collapse;
   width: 100%;
   margin: 0
}

caption {
   font-family: 'Yekan';
   font-size: 1.2rem;
   font-weight: 700;
   color: hsl(215, 25%, 25%);
   text-align: left;
   margin-bottom: .5em
}

tr {
   text-align: -webkit-auto;
   font-family: 'Yekan'
}

thead>tr {
   color: rgb(1, 0, 0);
   background-color: hsla(0, 100%, 70%, .59);
   font-family: 'Yekan'
}

tbody>tr:nth-child(even) {
   background-color: hsl(0, 84%, 88%);
   font-family: 'Yekan'
}

tbody th {
   font-size: 1rem;
   font-family: 'Yekan'
}

td,
th {
   font-family: 'Yekan';
   font-weight: 900;
   font-size: 1em;
   align-items: center
}

.label {
   display: none
}

.MultiCarousel {
   float: left;
   overflow: hidden;
   padding: 10px;
   width: 100%;
   position: relative
}

.MultiCarousel .MultiCarousel-inner {
   transition: 1s ease all;
   float: left
}

.MultiCarousel .MultiCarousel-inner .item {
   float: left
}

.MultiCarousel .MultiCarousel-inner .item>div {
   text-align: center;
   padding: 5px;
   margin: 10px;
   background: #f1f1f1;
   color: #666
}

.MultiCarousel .leftLst,
.MultiCarousel .rightLst {
   position: absolute;
   border-radius: 50%;
   top: calc(50% - 20px)
}

.MultiCarousel .leftLst {
   left: 0
}

.MultiCarousel .rightLst {
   right: 0
}

.MultiCarousel .leftLst.over,
.MultiCarousel .rightLst.over {
   pointer-events: none;
   background: #ccc
}

.container-fluid,
.container {
   max-width: 1200px
}

.card-container {
   padding: 100px 0;
   -webkit-perspective: 1000;
   perspective: 1000
}

.profile-card-1 {
   background-color: #FFF;
   border-radius: 10px;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   background-image: url(../img/profile-bg-1.jpg);
   background-position: center;
   padding-top: 100px;
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer;
   max-width: 300px
}

.profile-card-1 .profile-content {
   position: relative;
   background-color: #FFF;
   padding: 70px 20px 20px 20px;
   text-align: center
}

.profile-card-1 .profile-img {
   position: absolute;
   height: 100px;
   left: 0;
   right: 0;
   z-index: 10;
   top: -50px;
   transition: all 0.25s linear;
   transform-style: preserve-3d
}

.profile-card-1 .profile-img img {
   height: 100px;
   margin: auto;
   border-radius: 50%;
   border: 5px solid #FFF;
   box-shadow: 0 0 10px rgba(0, 0, 0, .2)
}

.profile-card-1 .profile-name {
   font-size: 18px;
   font-weight: 700;
   color: #021830
}

.profile-card-1 .profile-address {
   color: #777;
   font-size: 12px;
   margin: 0 0 15px 0
}

.profile-card-1 .profile-description {
   font-size: 13px;
   padding: 5px 10px;
   color: #777
}

.profile-card-1 .profile-icons .fa {
   margin: 5px;
   color: #777
}

.profile-card-1:hover {
   box-shadow: 0 0 50px rgba(0, 0, 0, .1)
}

.profile-card-1:hover .profile-img {
   transform: rotateY(180deg)
}

.profile-card-2 {
   max-width: 300px;
   background-color: #FFF;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   background-position: center;
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer;
   border-radius: 10px
}

.profile-card-2 img {
   transition: all linear 0.25s
}

.profile-card-2 .profile-name {
   position: absolute;
   left: 30px;
   bottom: 70px;
   font-size: 30px;
   color: #FFF;
   text-shadow: 0 0 20px rgba(0, 0, 0, .5);
   font-weight: 700;
   transition: all linear 0.25s
}

.profile-card-2 .profile-icons {
   position: absolute;
   bottom: 30px;
   right: 30px;
   color: #FFF;
   transition: all linear 0.25s
}

.profile-card-2 .profile-username {
   position: absolute;
   bottom: 50px;
   left: 30px;
   color: #FFF;
   font-size: 13px;
   transition: all linear 0.25s
}

.profile-card-2 .profile-icons .fa {
   margin: 5px
}

.profile-card-2:hover img {
   filter: grayscale(100%)
}

.profile-card-2:hover .profile-name {
   bottom: 80px
}

.profile-card-2:hover .profile-username {
   bottom: 60px
}

.profile-card-2:hover .profile-icons {
   right: 40px
}

.profile-card-3 {
   background-color: #FFF;
   border-radius: 5px;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer;
   padding: 25px 15px
}

.profile-card-3 .profile-name {
   font-weight: 700;
   color: #21304e
}

.profile-card-3 .profile-location {
   color: #999;
   font-size: 13px;
   font-weight: 600
}

.profile-card-3 img {
   height: 100px;
   width: 100px;
   object-fit: cover;
   margin: 10px auto;
   border-radius: 50%;
   transition: all linear 0.25s
}

.profile-card-3 .profile-description {
   font-size: 13px;
   color: #777;
   padding: 10px
}

.profile-card-3 .profile-icons {
   margin: 15px 0
}

.profile-card-3 .profile-icons .fa {
   color: #fe455a;
   margin: 0 5px
}

.profile-card-3:hover img {
   height: 110px;
   width: 110px;
   margin: 5px auto
}

.profile-card-4 {
   max-width: 300px;
   background-color: #FFF;
   border-radius: 5px;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer
}

.profile-card-4 img {
   transition: all 0.25s linear
}

.profile-card-4 .profile-content {
   position: relative;
   padding: 15px;
   background-color: #FFF
}

.profile-card-4 .profile-name {
   font-weight: 700;
   position: absolute;
   left: 0;
   right: 0;
   top: -70px;
   color: #FFF;
   font-size: 17px
}

.profile-card-4 .profile-name p {
   font-weight: 600;
   font-size: 13px;
   letter-spacing: 1.5px
}

.profile-card-4 .profile-description {
   color: #777;
   font-size: 12px;
   padding: 10px
}

.profile-card-4 .profile-overview {
   padding: 15px 0
}

.profile-card-4 .profile-overview p {
   font-size: 10px;
   font-weight: 600;
   color: #777
}

.profile-card-4 .profile-overview h4 {
   color: #273751;
   font-weight: 700
}

.profile-card-4 .profile-content::before {
   content: "";
   position: absolute;
   height: 20px;
   top: -10px;
   left: 0;
   right: 0;
   background-color: #FFF;
   z-index: 0;
   transform: skewY(3deg)
}

.profile-card-4:hover img {
   transform: rotate(5deg) scale(1.1, 1.1);
   filter: brightness(110%)
}

.profile-card-5 {
   max-width: 300px;
   background-color: #FFF;
   border-radius: 5px;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer;
   padding: 50px 15px 25px 15px
}

.profile-card-5 img {
   height: 100px;
   width: 100px;
   object-fit: cover;
   margin: 10px auto;
   border-radius: 50%;
   transition: all linear 0.25s;
   position: relative
}

.profile-card-5::before {
   content: "";
   position: absolute;
   top: -60px;
   right: 0;
   left: 0;
   height: 170px;
   background-color: #4fb96e;
   transform: skewY(-20deg)
}

.profile-card-5 .profile-name {
   padding-top: 15px;
   font-weight: 700;
   color: #333
}

.profile-card-5 .profile-designation {
   font-size: 13px;
   color: #777
}

.profile-card-3 .profile-location {
   color: #999;
   font-size: 13px;
   font-weight: 600
}

.profile-card-5 .profile-description {
   font-size: 13px;
   color: #777;
   padding: 10px
}

.profile-card-5 .profile-overview {
   padding: 15px 0
}

.profile-card-5 .profile-overview p {
   color: #777;
   font-size: 13px
}

.profile-card-5 .profile-overview h2 {
   font-weight: 700;
   color: #1e2832
}

.profile-card-5 .profile-icons .fa {
   margin: 7px;
   color: #4fb96e
}

.profile-card-5:hover img {
   transform: rotate(-5deg)
}

.profile-card-6 {
   max-width: 300px;
   background-color: #FFF;
   border-radius: 5px;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer
}

.profile-card-6 img {
   transition: all 0.15s linear
}

.profile-card-6 .profile-name {
   position: absolute;
   top: 10px;
   left: 10px;
   font-size: 25px;
   font-weight: 700;
   color: #FFF;
   padding: 15px 20px;
   background: linear-gradient(140deg, rgba(0, 0, 0, .4) 50%, rgba(255, 255, 0, 0) 50%);
   transition: all 0.15s linear
}

.profile-card-6 .profile-position {
   position: absolute;
   color: rgba(255, 255, 255, .4);
   left: 30px;
   top: 100px;
   transition: all 0.15s linear
}

.profile-card-6 .profile-overview {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(0deg, rgba(0, 0, 0, .4) 50%, rgba(255, 255, 0, 0));
   color: #FFF;
   padding: 50px 0 20px 0;
   transition: all 0.15s linear
}

.profile-card-6 .profile-overview h3 {
   font-weight: 700
}

.profile-card-6 .profile-overview p {
   color: rgba(255, 255, 255, .7)
}

.profile-card-6:hover img {
   filter: brightness(80%)
}

.profile-card-6:hover .profile-name {
   padding-left: 25px;
   padding-top: 20px
}

.profile-card-6:hover .profile-position {
   left: 40px
}

.profile-card-6:hover .profile-overview {
   padding-bottom: 25px
}

.profile-card-7 {
   background-color: #FFF;
   border-radius: 5px;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer
}

.profile-card-7 .profile-content {
   padding: 60px 30px 30px 30px;
   background-color: #FFF;
   position: relative
}

.profile-card-7 .profile-content img {
   position: absolute;
   height: 80px;
   width: 80px;
   border-radius: 50%;
   top: -40px;
   border: 5px solid #FFF
}

.profile-card-7 .profile-content .profile-name {
   position: absolute;
   font-size: 17px;
   font-weight: 700;
   top: -35px;
   left: 125px;
   color: #FFF
}

.profile-card-7 .profile-overview {
   padding: 5px 0
}

.profile-card-7 .profile-overview p {
   color: #777;
   font-size: 11px;
   font-weight: 600
}

.profile-card-7 .profile-overview h5 {
   color: #142437;
   font-weight: 700
}

.profile-card-8 {
   background: linear-gradient(#09121c, #36445a);
   border-radius: 5px;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer;
   transition: all 0.25s linear
}

.profile-card-8 .profile-name {
   position: absolute;
   left: 0;
   right: 0;
   top: 25px;
   color: #58d683;
   font-size: 17px;
   font-weight: 700
}

.profile-card-8 .profile-designation {
   position: absolute;
   left: 0;
   right: 0;
   top: 50px;
   color: #FFF;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 1px
}

.profile-card-8 .profile-icons {
   position: absolute;
   left: 0;
   right: 0;
   top: 80px;
   color: rgba(255, 255, 255, .7)
}

.profile-card-8 .profile-icons .fa {
   margin: 5px
}

.profile-card-8:hover {
   transform: scale(1.05, 1.05)
}

.profile-card-9 {
   border-radius: 10px;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer;
   padding: 30px 15px;
   background-color: #FFF;
   transition: all 0.25s linear
}

.profile-card-9 img {
   height: 120px;
   width: 120px;
   border-radius: 50%;
   margin: 10px auto
}

.profile-card-9 .profile-name {
   font-size: 15px;
   color: #3249b9;
   font-weight: 600
}

.profile-card-9 .profile-designation {
   font-size: 13px;
   color: #777
}

.profile-card-9 .profile-description {
   padding: 10px;
   font-size: 13px;
   color: #777;
   margin: 15px 0;
   background-color: #F1F2F3;
   border-radius: 5px
}

.profile-card-9 a {
   padding: 10px 15px;
   background-color: #3249b9;
   color: #FFF;
   font-size: 11px;
   border-radius: 25px
}

.profile-card-9:hover {
   transform: scale(1.05, 1.05)
}

.profile-card-10 {
   border-radius: 5px;
   box-shadow: 0 0 25px rgba(0, 0, 0, .1);
   overflow: hidden;
   position: relative;
   margin: 10px auto;
   cursor: pointer;
   padding: 30px 15px;
   background-color: #1f2124;
   color: #EEE
}

.profile-card-10 img {
   margin: 10px auto;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 10px solid transparent;
   box-shadow: 0 0 0 2px #64c17b;
   transition: all 0.25s linear
}

.profile-card-10 .profile-name {
   color: #FFF;
   font-weight: 700;
   font-size: 17px
}

.profile-card-10 .profile-location {
   font-size: 13px;
   opacity: .7
}

.profile-card-10 .profile-description {
   padding: 10px;
   font-size: 13px
}

.profile-card-10 .profile-icons .fa {
   color: #ffc75e;
   margin: 10px
}

.profile-card-10:hover img {
   transform: scale(1.1)
}

.card1 {
   height: 420px;
   width: 320px;
   background-color: #C62828;
   border-radius: 10px;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   text-align: center !important
}

.card1::before {
   position: absolute;
   width: 100%;
   height: 100%;
   content: "";
   top: -50%;
   background-color: #EF5350;
   transform: skewY(345deg);
   transition: 2s ease-in
}

.card1:hover::before {
   top: -70%;
   transform: skewY(390deg)
}

.card1 .image {
   position: absolute;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center
}

.card1 .image img {
   max-width: 100%;
   transition: 2s ease-in
}

.card1:hover .image img {
   width: 80%
}

.about-product {
   position: absolute;
   color: #fff;
   bottom: -50px !important;
   text-align: center;
   left: 20%;
   transition: 2s ease-in
}

.card1:hover .about-product {
   bottom: 20px !important
}

.buy-now {
   color: #fff;
   background-color: #ef5350 !important;
   border-color: #ef5350 !important;
   width: 160px;
   margin-top: 20px
}

.buy-now:focus {
   box-shadow: none
}

.buy-now:hover {
   color: #fff;
   background-color: #e84040 !important;
   border-color: #e84040 !important
}

body {
   background: #ddd;
   margin-top: 20px
}

.g-hover-card {
   position: relative;
   text-align: center;
   background-color: #fff
}

.g-hover-card img {
   width: 280px;
   height: 135px
}

.g-hover-card .user-avatar {
   position: relative;
   top: -40px;
   margin-bottom: -40px
}

.g-hover-card .user-avatar img {
   width: 80px;
   height: 80px;
   max-width: 80px;
   max-height: 80px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%
}

.g-hover-card .info {
   padding: 4px 8px 10px
}

.g-hover-card .info.title {
   margin-bottom: 4px;
   font-size: 24px;
   line-height: 1;
   color: #262626;
   vertical-align: middle
}

.g-hover-card .info.descriptions {
   overflow: hidden;
   font-size: 12px;
   line-height: 20px;
   color: #737373;
   text-overflow: ellipsis
}

.g-hover-card .bottom {
   padding: 0 20px;
   margin-bottom: 17px
}

.g-hover-card {
   width: 280px;
   padding-top: 0;
   overflow: hidden
}

.snip1344 {
   font-family: 'Open Sans', Arial, sans-serif;
   position: relative;
   overflow: hidden;
   margin: 10px;
   min-width: 230px;
   max-width: 315px;
   width: 100%;
   color: #fff;
   text-align: center;
   line-height: 1.4em;
   background-color: #f1556c
}

.snip1344 * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.25s ease;
   transition: all 0.25s ease
}

.snip1344 .background {
   width: 100%;
   vertical-align: top;
   opacity: .2;
   -webkit-filter: grayscale(100%) blur(10px);
   filter: grayscale(100%) blur(10px);
   -webkit-transition: all 2s ease;
   transition: all 2s ease
}

.snip1344 figcaption {
   width: 100%;
   padding: 15px 25px;
   position: absolute;
   left: 0;
   top: 50%
}

.snip1344 .profile {
   border-radius: 50%;
   position: absolute;
   bottom: 50%;
   left: 50%;
   max-width: 100px;
   opacity: 1;
   box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);
   border: 2px solid rgba(255, 255, 255, .5);
   -webkit-transform: translate(-50%, 0%);
   transform: translate(-50%, 0%)
}

.snip1344 h3 {
   margin: 0 0 5px;
   font-weight: 400
}

.snip1344 h3 span {
   display: block;
   font-size: .6em;
   color: #f39c12;
   opacity: .75
}

.snip1344 i {
   padding: 10px 5px;
   display: inline-block;
   font-size: 32px;
   color: #fff;
   text-align: center;
   opacity: .65
}

.snip1344 a {
   text-decoration: none
}

.snip1344 i:hover {
   opacity: 1;
   -webkit-transition: all 0.35s ease;
   transition: all 0.35s ease
}

.snip1344:hover .background,
.snip1344.hover .background {
   -webkit-transform: scale(1.3);
   transform: scale(1.3)
}

.button2 {
   background: #1d1d1d;
   font-family: 'Orbitron', sans-serif;
   font-size: 1.2em;
   text-align: center;
   color: #fff;
   position: absolute;
   top: 3px;
   left: 3px
}

.team-boxed {
   color: #313437;
   background-color: #eef4f7
}

.team-boxed p {
   color: #7d8285
}

.team-boxed h2 {
   font-weight: 700;
   margin-bottom: 40px;
   padding-top: 40px;
   color: inherit
}

@media (max-width:767px) {
   .team-boxed h2 {
      margin-bottom: 25px;
      padding-top: 25px;
      font-size: 24px
   }
}

.team-boxed .intro {
   font-size: 16px;
   max-width: 500px;
   margin: 0 auto
}

.team-boxed .intro p {
   margin-bottom: 0
}

.team-boxed .people {
   padding: 50px 0
}

.team-boxed .item {
   text-align: center
}

.team-boxed .item .box {
   text-align: center;
   padding: 30px;
   background-color: #fff;
   margin-bottom: 30px
}

.team-boxed .item .name {
   font-weight: 700;
   margin-top: 28px;
   margin-bottom: 8px;
   color: inherit
}

.team-boxed .item .title {
   text-transform: uppercase;
   font-weight: 700;
   color: #d0d0d0;
   letter-spacing: 2px;
   font-size: 13px
}

.team-boxed .item .description {
   font-size: 15px;
   margin-top: 15px;
   margin-bottom: 20px
}

.team-boxed .item img {
   max-width: 160px
}

.team-boxed .social {
   font-size: 18px;
   color: #a2a8ae
}

.team-boxed .social a {
   color: inherit;
   margin: 0 10px;
   display: inline-block;
   opacity: .7
}

.team-boxed .social a:hover {
   opacity: 1
}

.screen {
   cursor: pointer;
   position: relative;
   left: 50%;
   top: 50%;
   overflow: hidden;
   width: 330px;
   height: 360px;
   background-color: #fff;
   border-radius: 15px;
   box-shadow: 0 2 12px 0 rgba(0, 0, 0, .1);
   text-align: center
}

.screen #topIcon {
   position: absolute;
   left: 50%;
   top: 30%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%)
}

.screen .border-top {
   position: absolute;
   top: 0;
   height: 10px;
   width: 100%;
   background-color: #f1556c
}

.screen h3 {
   font-weight: 700;
   font-size: 24px;
   color: #606060;
   letter-spacing: 0;
   position: absolute;
   left: 50%;
   top: 55%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%)
}

.screen p {
   font-weight: 400;
   font-size: 16px;
   color: #616161;
   letter-spacing: .18px;
   position: absolute;
   left: 50%;
   top: 68%;
   width: 90%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%)
}

.screen button {
   background: #f1556c;
   border: 1px solid #f1556c;
   box-shadow: 0 3px 20px 0 rgba(241, 85, 108, .437);
   border-radius: 100px;
   letter-spacing: 1.5px;
   font-weight: 500;
   color: #fff;
   padding-top: 2px;
   width: 186px;
   height: 40px;
   position: absolute;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   bottom: -20%;
   opacity: 0;
   font-size: 13px;
   cursor: pointer
}

#Bubbles {
   visibility: hidden
}

.un {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
}

.tr {
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in
}

.btn-overlay {
   background-color: #f08494;
   border: 0;
   color: #fff;
   opacity: .6;
   padding: 10px 15px;
   border-radius: 100px;
   font-size: 12px;
   letter-spacing: .8px;
   z-index: 999;
   width: 100px
}

.btn-overlay:hover {
   opacity: 1
}

#restart {
   position: fixed;
   right: 10px;
   top: 10px
}

#invert {
   position: fixed;
   right: 10px;
   top: 55px
}

.testimonial-card .card-up {
   height: 120px;
   overflow: hidden;
   border-top-left-radius: .25rem;
   border-top-right-radius: .25rem
}

.aqua-gradient {
   background: linear-gradient(40deg, #f1556c, #ffffff) !important
}

.testimonial-card .avatar {
   width: 120px;
   margin-top: -60px;
   overflow: hidden;
   border: 5px solid #fff;
   border-radius: 50%
}

.user-pic {
   width: 150px;
   height: 150px;
   overflow: hidden;
   border-radius: 100%;
   margin: 20px auto 20px;
   border-left: 3px solid #ddd;
   border-right: 3px solid #ddd;
   border-top: 3px solid #f1556c;
   border-bottom: 3px solid #f1556c;
   transform: rotate(-30deg);
   transition: 0.5s
}

.card-box1:hover .user-pic {
   transform: rotate(0deg);
   transform: scale(1)
}

.card-box1:hover .hr {
   color: #f08494
}

.card-box1 {
   padding: 5px;
   background-color: #fdfdfd;
   margin: 5px 0;
   border-radius: 10px;
   border: 1px solid #eee;
   box-shadow: 0 0 8px 0 #d4d4d4;
   transition: 0.5s;
   display: inline-block
}

.card-box1:hover {
   border: 1px solid #f1556c
}

.card-box1 p {
   color: gray;
   position: relative;
   padding: 0 20px;
   background: #fff;
   -webkit-border-top-left-radius: 10px;
   -webkit-border-top-right-radius: 10px;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px
}

.frame {
   width: 90%;
   margin: 40px auto;
   text-align: center
}

button {
   margin: 20px
}

.custom-btn {
   color: #fff;
   border-radius: 5px;
   padding: 10px 25px;
   font-family: "Lato", sans-serif;
   font-weight: 500;
   background: transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   display: inline-block;
   box-shadow: inset 2px 2px 2px 0 rgba(255, 255, 255, .5), 7px 7px 20px 0 rgba(0, 0, 0, .1), 4px 4px 5px 0 rgba(0, 0, 0, .1);
   outline: none
}

.btn-11 {
   border: none;
   background: #f1556c;
   background: linear-gradient(0deg, #f1556c 0%, #f1556c 100%);
   color: #fff;
   overflow: hidden
}

.btn-11:hover {
   text-decoration: none;
   color: #fff
}

.btn-11:before {
   position: absolute;
   content: "";
   display: inline-block;
   top: -180px;
   left: 0;
   width: 30px;
   height: 100%;
   background-color: #fff;
   animation: shiny-btn1 3s ease-in-out infinite
}

.btn-11:hover {
   opacity: .7
}

.btn-11:active {
   box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255, 255, 255, .2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2)
}

@-webkit-keyframes shiny-btn1 {
   0% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: 0
   }

   80% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: .5
   }

   81% {
      -webkit-transform: scale(4) rotate(45deg);
      opacity: 1
   }

   100% {
      -webkit-transform: scale(50) rotate(45deg);
      opacity: 0
   }
}

span.red {
   background: red;
   border-radius: .8em;
   -moz-border-radius: .8em;
   -webkit-border-radius: .8em;
   color: #fff;
   display: inline-block;
   font-weight: 700;
   line-height: 1.6em;
   text-align: center;
   width: 1.6em
}

.responsive-table {
   display: flex;
   flex-direction: column
}

.responsive-table thead {
   background: #ccc
}

.responsive-table tbody {
   background: #fff
}

.responsive-table td,
.responsive-table th,
.responsive-table .cell {
   margin-block: 2px;
   padding-top: 4px;
   padding-bottom: 4px;
   flex-shrink: 0;
   flex-grow: 1;
   width: 5rem;
   border-top: 2px solid rgba(0, 0, 0, .1);
   border-bottom: 2px solid rgba(0, 0, 0, .1);
   text-align: center;
   position: relative
}

.responsive-table tr,
.responsive-table .table-row {
   display: flex;
   flex-flow: row wrap
}

.responsive-table .status_cell {
   width: 150px;
   flex-grow: 0;
   padding: .3rem;
   text-align: center;
   border: none
}

.responsive-table .created_cell {
   flex-grow: 0
}

.responsive-table .summary_cell {
   width: 185px;
   flex-grow: 0;
   margin-block: 2px;
   text-align: start
}

.responsive-table .actions_cell {
   width: 120px;
   flex-grow: 0;
   text-align: start
}

.status {
   width: revert;
   color: #fff;
   background: gray;
   padding: 2px 5px;
   border-radius: 5px;
   text-align: center
}

.status.green {
   background: #090
}

.status.red {
   background: red;
   text-align: center
}


@media only screen and (max-width:530px) {

   .responsive-table tr .responsive-table .table-row {}

   .mobile-view .actions_cell {
      width: 40px
   }

   .mobile-view .status_cell {
      width: 40px
   }

   .mobile-view .status_cell .status {
      transform: rotate(-90deg);
      width: 5rem;
      position: relative;
      left: 1.6rem;
      top: 1.6rem
   }

   .mobile-view .status_cell .statusenn {
      transform: rotate(-90deg);
      width: 100px;
      position: relative;
      right: 40px;
      top: 1.7rem
   }
}

.button {
   background: #39f;
   border: none;
   display: inline-block;
   width: 20px;
   height: 20px;
   padding: 5px;
   color: #fff;
   font-weight: 700;
   margin-bottom: 5px;
   box-sizing: content-box
}

.mobile-view {
   background: #fff
}

.mobile-view .cell_group {
   border: 0;
   display: flex;
   flex-flow: row wrap
}

@media (max-width:767px) {
   .d-flextour {
      display: flex !important;
      align-content: center;
      flex-direction: row-reverse;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap
   }
}

.paddding {
   flex: 1 1 auto;
   padding: .85rem .85rem;
   background-color: var(--bs-table-bg);
   border-bottom-width: 1px;
   box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)
}

@media (max-width:320px) {
   .btnlgtour {
      padding: .5rem .5rem;
      font-size: 1.015625rem;
      border-radius: .3rem;
      margin-block: 1px
   }

   .lefttt {
      left: 15px
   }

   .paddding {
      padding: 0rem 0rem
   }
}

@media only screen and (min-width:760px) and (max-width:1560px) {
   .a-font {
      color: #09121c
   }
}

.dataTables_length,
.dataTables_filter {
   margin: 1rem;
}

.dataTables_length select {
   width: auto;
   display: inline-block;
}

.dataTables_filter input {
   display: inline-block;
   width: auto;
}