.hidden{
    visibility: hidden;
}
 :focus {
    outline: none !important;
}
/******************************** styles.css ********************************/
.loading-screen{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(245, 245, 245, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 9999;
    flex-direction: column;
    font-size: 12px;
}

.logo{
    width: 200px;
    /* height: 200px; */
    margin-bottom: 3px;
}
pre {
    display: block;
    font-size: 14px;
    color: #212529;
    font-family: 'Roboto';
}
.px-6{
	padding: 0 6px
}
.m-6{
	margin-left: -6px;
	margin-right: -6px;
}
.loading-bar{
  width: 200px;
  height: 2px;
  background: #cfcfcf;
  /* margin-left: 18px; */
  position: relative;
  overflow: hidden;
}
.navbar-mobile{
}
.loading-bar::before{
content: "";
    width: 35px;
    height: 4px;
    background: #000;
    position: absolute;
    border-radius: 50px;
    left: -34px;
    animation: bluebar 3s infinite ease;
}

@keyframes bluebar{
  50%{
    left: 195px;
  }
}

#button{
    display:block;
    margin:20px auto;
    padding:10px 30px;
    background-color:#eee;
    border:solid #ccc 1px;
  cursor: pointer;
}
#overlay{   
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
        margin: 0 auto;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px transparent solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
.video-wrapper .cv-spinner {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes sp-anime {
    100% { 
        transform: rotate(360deg); 
    }
}
.is-hide{
    display:none;
}
.signin{
    /* background-image: url(../images/image%208.svg); */
    background-image: url(../images/bg-login.jpg);
    width: 100%;
    /* height: 100vh; */
    min-height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	background-attachment: fixed;
}
.signin.page404 {
    background: none;
    max-height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}
.signin.page404 .coverdb{
    background-image: url(../img/404.jpg);
    min-height: 100vh;
}
.page404wrapper{
    position: absolute;
    top: 45%;
    color: #fff;
    transform: translateY(-50%);
}
.section-forgot{
    background: #111;
    min-height: 100vh;
}
.col.title-register {
    font-family: 'Roboto';
    font-weight: bold;
    text-align: left;
    font-size: 30px;
    color: white;
    margin-bottom: 19px;
    /*align-items: center;*/
}

.col.reg-input {
    margin: 0px 0px 13px;
}
.color-default{
	color: #222 !important;
}
button,
input {
    background-position: center;
    background-color: #ffffff;
}
b, strong {
    font-weight: 700;
}

.img-preview{
    border-radius: 5px;
    height: 300px;
    width: 100%;
    object-fit: cover;
}
.border-radius-5{
	border-radius: 5px !important;
}
.border-radius-10{
	border-radius: 10px !important;
}
.w-auto{
	min-width: unset !important
}
.btn {
    display: inline-block;
    font-weight: 400;
    /* color: #212529; */
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* background-color: transparent; */
   /* border: 1px solid transparent;*/
    padding: 6px 16px;
    /* font-size: 1rem; */
    min-width: 120px;
    line-height: normal;
    border-radius: 50px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
    color: #fff;
    background-color: #A8055D;
    border-color: #A8055D;
    /* min-width: 170px; */
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #A8055D;
    border-color: #A8055D;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):hover, 
.show>.btn-primary.dropdown-toggle{
    color: #fff;
    background-color: #750642;
    border-color: #750642;
     box-shadow: none;
    
    /* min-width: 170px; */
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus{
    box-shadow: none;
}
.btn-secondary {
    color: #828282;
    background-color: transparent;
    border-color: #828282;
}
.btn-secondary:hover {
	color: #828282;
    background-color: #e8e8e8;
    border-color: #828282;
}
.btn-border {
    color: #A8055D;
    background-color: transparent;
    border-color: #A8055D;
    /* min-width: 170px; */
}
.btn-border:hover {
    color: #750642;
    background-color: transparent;
    border-color: #750642;
    /* min-width: 170px; */
}
.related{
	margin-left: -2px;
}
.btn-border-dark {
	box-shadow: inset 0 0 0 1px #292f38;
	color: #292f38;
	
}
.button-cancel{
	font-size: 14px;
}
.btn-border-dark:hover {
	background-color: #292f38;
    color: #fff;
}
.button {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    text-align: center;
    border-radius: 50px;
    /* width: 80px; */
    text-align: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    min-width: 140px;
    height: auto;
    padding: 12px 16px;
    transition: all .2s ease;
    border: 1px solid transparent;
}


.button:hover {
    text-decoration: none;
}
.btn-remove {
    color: #fff;
    background-color: #DC4E41;
    border-color: #DC4E41;
    /* min-width: 170px; */
}
.btn-remove:hover {
    color: #fff;
    background-color: #c5463b;
    border-color: #c5463b;
    
    /* min-width: 170px; */
}
.btn-white-transparent{
    color: #fff;
    border-color: #fff;
}
.btn-white-transparent:hover{
    color: #333;
    background: #fff;
}
.btn-orange {
    width: 120px;
    height: 30px;
    background: #FFC700;
    border-radius: 31px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #222222;
    transition: all .25s ease;
}
.btn-orange:hover {
    background: #eab700;
}


#imageUpload {
    position: relative;
    bottom: 130px;
    padding: 50px;
    opacity: 0;
    cursor: pointer;
}

#profileImage {
    cursor: pointer;
}

.login-wrapper input[type=text],
.login-wrapper input[type=password],
.login-wrapper input[type=email],
.login-wrapper select,
.login-wrapper text {
    width: 100%;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #fff;
}
.login-wrapper input:focus,
.login-wrapper select:focus {
    outline: none;
}
.info-req {
    width: 100%;
    height: 100%;
    margin-top: 14px;
}

.info-req p {
    font-family: 'Roboto';
    color: white;
    font-size: 10px;
}

.col.col-btn-reg {
    width: 100%;
    height: 100%;
    text-align: right;
}

.col.col-btn-reg button {
    border-radius: 30px;
    color: white;
    background-color: #87b700;
    padding: 10px;
    width: 77%;
    height: 46px;
    font-size: 16px;
    font-family: 'Roboto';
}

.row.req-field {
    margin-top: 17px;
    margin-bottom: 14px;
}

.orline {
    width: 100%;
    height: 10px;
    border-bottom: 1px solid white;
    margin-top: 20px;
    text-align: right;
    padding: 0px;
    /*margin-right: 0px;*/
    /*margin-left: 10%;*/
}

.col.col-orlines {
    text-align: left;
    width: 100%;
}

.row.rowor {
    margin-bottom: 26px;
}

.orline span {
    color: white;
    margin: -24px;
}

.col.col-fb-signup button {
    width: 100%;
    background-image: url(../images/001-facebook.svg);
    height: 100%;
    border-radius: 23px;
    background-position: initial;
    background-repeat: no-repeat;
    background-color: white;
    background-size: contain;
}

.jrbtn2 {
    width: 100%;
    height: 50px;
    text-align: left;
    margin: 24px 0px 0px;
}

.jrbtn2 button {
    background-position: initial;
    background-image: url(../images/001-facebook.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    font-family: 'Roboto';
    font-weight: bold;
    color: #222222;
    font-size: 14px;
    background-color: #fff;
    border: 4px solid #fff;
}

.jrbtn2 button:hover {
    background-color: #3d5a97;
    border-color: #3d5a97;
    color: #fff;
}

.col.col-policy {
    width: 100%;
    height: 100%;
    margin-top: 16px;
}

.agree-policy {
    text-align: center;
    font-family: 'Roboto';
    color: white;
}

.col.col-policy span {
    font-size: 14px;
}

.col.col-policy a {
    font-size: 14px;
    color: rgb(168, 5, 93);
}
.agree-policy a {
    font-size: 14px;
	text-decoration: underline;
    color: rgb(168, 5, 93);
}

.col-sm-3 img {
    width: 200px;
    margin-left: 0px;
    height: auto;
    margin-top: 20px;
}

.col-sm-2 h3 {
   /* font-size: 12px;
    color: #828282;
    font-family: 'Roboto';
    margin-left: 0px;*/
}

.col-sm-2 ul {
    margin-left: 0px;
    font-family: 'Roboto';
    list-style-type: none;
}

.col-sm-2 ul li {
    padding-left: 2em;
    text-indent: -2em;
    list-style-type: none;
    padding: 10px;
    margin-left: 13px;
}

.col-sm-2 ul li a {
    float: left;
    font-weight: bold;
    position: absolute;
    color: #4b4c4d;
    font-size: 12px;
    margin-left: 0px;
}

.col-copyrght {
    margin-left: 16px;
    padding: 0px;
}

.col-img-followus {
    margin-left: 15px;
    width: 100%;
    height: 30px;
}

.col-img-followus img {
    width: 30px;
    align-items: center;
    margin: -11px 2px 3px;
}

.col-sm-3 h3 {
    font-family: 'Roboto';
    font-size: 12px;
    color: #828282;
}

.col-copyrght p {
    font-family: 'Roboto';
    font-size: 10px;
}

.footer-mgn {
    margin-top: 0px;
    /*margin-top: 4%;*/
    background-color: #fff;
}

.col.bcme-contrib-info {
    margin-left: 60px;
    margin-right: 20px;
}

.col.bcme-contrib-info p {
    font-family: 'Roboto';
    color: #aeaeae;
    font-size: 11px;
}

.col.bcme-contrib-info button {
    font-size: 12px;
    color: white;
    background-color: #a8055d;
    border-radius: 30px;
    width: 167px;
    margin-left: 10px;
    text-align: center;
}

.col.bcme-contrib-info a {
    font-size: 12px;
    color: white;
    background-color: #a8055d;
    border-radius: 30px;
    width: 167px;
    margin-left: 10px;
    text-align: center;
}

.col.input-prf-col label {
    color: grey;
    font-size: 12px;
}

.col.input-prf-col input {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: bold;
    margin-top: -20px;
    max-height: 20px;
    margin-left: -10px;
    border: none;
    outline: none;
    margin-bottom: 10px;
}

.col.input-prf-col select {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: bold;
    margin-top: -10px;
    max-height: 50px;
    margin-left: -10px;
    text-align: center;
    min-width: 405px;
    max-width: 405px;
    border: none;
    outline: none;
}

.col.input-prf-col input[type=date] {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: bold;
    margin-top: -10px;
    max-height: 50px;
    margin-left: -10px;
    text-align: center;
    padding-top: 10px;
    min-width: 200px;
    border: none;
    outline: none;
}

.jrbtn3 {
    width: 100%;
    height: 50px;
    text-align: left;
    margin: 15px 0px 0px;
}

.jrbtn3 button {
    background-position: initial;
    background-image: url(../images/Group.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    display: inline-block;
    height: 100%;
    border-radius: 50px;
    font-family: 'Roboto';
    font-weight: bold;
    color: #222222;
    font-size: 14px;
    background-color: #fff;
    border: 4px solid #fff;
}

.jrbtn3 button:hover {
    background-color: #dc4c3f;
    border-color: #dc4c3f;
    color: #fff;
}

.row.rormidforgot {
    margin-bottom: 10%;
}

.row.row-lgn-mgn {
    margin-bottom: 5%;
}

body {
    background-color: #eaeaea;
}

.row.rowfoot {
    padding-top: 25px;
}

.navbar.navbar-dark.navbar-expand-md.bg-dark.shadow-lg {
    background-color: #000!important;
}

.container.shadow-lg {
    margin-top: 40px;
    margin-bottom: 40px;
}

.col.prf-title {
    margin: 0px 0px 21px;
    background-color: #0a0a0a;
}

.col.prf-title h3 {}

.col.prf-title h3 {
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 20px;
    font-family: Roboto, sans-serif;
    margin: 6px 24px 6px;
    padding-bottom: 4px;
}

.col.tiitle-info {
    margin: 20px 25px 20px;
}

.col.text-black-50.tiitle-info h3 {
    font-weight: bold;
    font-size: 20px;
    font-family: Roboto, sans-serif;
}

.col.text-black-50.tiitle-info h3 {
    font-weight: bold;
    font-size: 20px;
    font-family: Roboto, sans-serif;
}

.col.title-info-edit {
    padding-right: 26px;
    margin: 30px 0px 20px;
}

.col.text-right.title-info-edit a {
    font-weight: bold;
    color: rgb(168, 5, 93);
    font-size: 14px;
    font-family: Roboto, sans-serif;
}

.col.input-prf {
    margin: 0px 0px 20px;
}

.col.input-prf-col p {
    color: grey;
    font-family: 'Roboto';
    font-size: 12px;
    margin-bottom: 0px;
    margin-top: 10px;
}

.col.input-prf-col span {
    color: grey;
    font-family: 'Roboto';
    font-size: 12px;
}

.col.input-prf-col {
    text-align: left;
    border: 1px solid #d6d3d3;
    margin: 1px 26px 19px;
    padding-bottom: 10px;
    max-height: 68px;
    border-radius: 10px;
    position: relative;
}

.col.input-prf-col-right {
    text-align: left;
    border: 1px solid #d6d3d3;
    margin: 1px 26px 19px;
    padding-bottom: 10px;
    min-height: 130px;
    max-height: 130px;
    border-radius: 10px;
    position: relative;
}

.col.input-prf-col-right textarea {
    font-family: 'Roboto';
    font-size: 12px;
    font-weight: bold;
    border: none;
    outline: none;
}

.col.input-prf-col-right label {
    color: grey;
    font-size: 12px;
}

.col.last-col-prf {
    margin-bottom: 63px;
}

.col.input-address-prf-col {
    text-align: left;
    border: 1px solid #d6d3d3;
    margin: 1px 26px 19px;
    padding-bottom: 10px;
    min-height: 200px;
    max-height: 68px;
    border-radius: 10px;
    position: relative;
}

.col.input-address-prf-col h3 {
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
    margin-top: 10px;
}

.col.input-address-prf-col p {
    margin-bottom: 0px;
    font-size: 14px;
    font-family: 'Roboto';
}

.col.btn-billing button {
    width: 100%;
    border-radius: 11px;
    height: 58px;
    background-color: #F2F2F2;
    font-size: 15px;
    color: grey;
    font-family: 'Roboto';
}

.col.btn-billing {
    width: 100%;
    height: 100%;
    margin-top: 20px;
}

.col.fb-link-acc {
    background-image: url("../images/searchbg.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 50px;
    padding-right: 50px;
    max-width: 50%;
    text-align: center;
    border: solid;
    border: 1px solid rgba(255, 0, 0, 0);
}

.col.fb-link-acc img {
    max-width: 41px;
    max-height: 41px;
    position: relative;
    right: 8.5rem;
    top: 2px;
}

.col.fb-link-acc span {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    right: 20px;
}

.col.google-link-acc {
    background-image: url("../images/searchgbg.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    max-width: 50%;
    min-height: 50px;
    padding-left: 50px;
    padding-right: 50px;
    border: 1px solid rgba(255, 0, 0, 0);
}

.col.google-link-acc img {
    max-width: 40px;
    max-height: 40px;
    position: relative;
    right: 8.5rem;
    top: 2px;
}

.col.google-link-acc span {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    right: 18px;
}

.col.side-menu-prf {
    margin-top: 0px;
}

.col.side-menu-prf {
    margin-top: 0px;
}

.col.prf-photo {
    text-align: center;
    border: 1px solid #d6d3d3;
    margin: 1px 26px 19px;
    max-height: 180px;
    min-height: 180px;
    border-radius: 10px;
    position: relative;
}

.col.prf-photo label {
    color: grey;
    font-size: 12px;
}

.col.prf-photo img {
    margin-top: 30px;
    margin-right: 60px;
    max-width: 120px;
    min-width: 120px;
    min-height: 120px;
    max-height: 120px;
    border-radius: 50%;
    position: relative;
}

.col.side-menu-prf ul {
    list-style-type: none;
    margin-left: 25px;
}

.col.side-menu-prf ul li {
    margin-bottom: 4px;
}

.col.side-menu-prf ul li a {
    font-size: 14px;
    font-family: 'Roboto';
    color: #222222;
}

.col.side-menu-prf ul li a:hover {
    color: white;
    /*background-color:   #F8192C;*/
    text-decoration-line: none;
    cursor: pointer;
}

.col.side-menu-prf ul li a:active {
    font-weight: bold;
}

.col.prf-side-photo {
    width: 289px;
    height: 80px;
    max-height: 100px;
    margin: 18px 0px 73px;
    max-width: 290px;
}

.col.text-center.prf-side-photo img {
    margin: 8px 0px 0px;
    max-width: 120px;
    max-height: 120px;
    min-width: 120px;
    min-height: 120px;
    padding: 1px;
    border-radius: 50%;
}

.table-responsive.tblephto {
    width: 316px;
    max-width: 280px;
    height: 249px;
    max-height: 176px;
    margin-left: 56px;
    padding: 1px;
}

.dropdown.drpimge {
    text-align: center;
    list-style-type: none;
    height: 38px;
    width: 90px;
    margin-top: 1px;
    margin-right: 2px;
    margin-left: 2px;
    color: #a0a5a9!important;
    font-family: Roboto, sans-serif;
    padding: 9px;
}

.dropdown.drpimge a {
    color: rgba(255, 255, 255, 0.5);
    padding-top: 0px;
}

.input-group > .custom-select:not(:first-child),
.input-group > .form-control:not(:first-child) {
   /* border-radius: 8px;
    width: 290px;
    height: 32px;
    margin-top: 4px;
    font-size: 14px;
    opacity: 0.85;
    filter: saturate(98%);*/
}

#basic-addon1 {
    text-align: center;
    color: rgb(222, 33, 146);
}

.dropdown-menu.show.menu-img-sect a {
    color: black;
    font-family: 'Roboto';
}

.col.sve-btn-prf {
    padding-right: 20px;
    margin-bottom: 45px;
    font-size: 12px;
}

.col.text-right.sve-btn-prf button {
    margin-left: 22px;
    width: 121px;
    height: 33px;
    border-radius: 33px;
    font-family: 'Roboto';
    text-align: center;
    font-size: 14px;
    color: white;
}

.col.col-last-edit-prf {
    height: 70px;
}

.col.col-last-input-prf {
    height: 120px;
}

.col.col-comment-parp {
    font-family: 'Roboto';
}

.col.text-left.col-comment-parp span {
    font-size: 14px;
    font-weight: bold;
    margin-left: 25px;
}

.col.col-comment-butn button {
    margin-left: 22px;
    width: 121px;
    height: 33px;
    border-radius: 33px;
    font-family: 'Roboto';
    text-align: center;
    font-size: 14px;
    color: black;
}

.col.col-comment-butn {
    padding-right: 35px;
}

.row.row-last-mrgn {
    margin-bottom: 57px;
}

.col.text-left.img-plan-sub {
    margin-bottom: 2px;
    margin-left: 25px;
}

.col.text-left.img-plan-sub span {
    font-size: 16px;
    font-weight: bold;
    font-family: 'Roboto';
}

.col.text-left.img-plan-sub p {
    font-weight: bold;
    font-size: 14px;
    font-family: 'Roboto';
}

.col.card-address {
    margin-left: 24px;
    margin-right: 15px;
    font-family: 'Roboto';
}

.col.card-address h3 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Roboto';
}

.col.card-address p {
    margin-bottom: 2px;
    font-size: 14px;
    font-family: 'Roboto';
}

.col.address-edit a {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: bold;
    color: #A8055D;
    text-decoration-line: none;
}

.col.address-edit {
    text-align: right;
    color: red;
}

.card.crd-margin {
    margin-bottom: 20px;
}

.col.cor-card {
    margin-right: 20px;
    margin-left: 25px;
}

.card-body.mrgn {
    margin-top: -35px;
    margin-bottom: -20px;
    margin-left: -35px;
}

.col-xl-3.text-right.radio-btn-post {
    margin-top: 25px;
}

.col.add-payment {
    margin-bottom: 18px;
    text-align: center;
}

.col.add-payment button {
    width: 100%;
    height: 50px;
    font-size: 15px;
    font-weight: normal;
    font-family: 'Roboto';
    background-color: #f2f2f2;
    color: grey;
}

.col-bx-1 {
    border-style: groove;
    min-height: 70px;
    border: 1px solid #d6d3d3;
    margin: 3px 6px 18px;
    max-height: 80px;
    border-radius: 10px;
    position: relative;
}

.col.col-bx2 {
    min-height: 100px;
    border: groove;
}

.row.col-bx2 {
    min-height: 170px;
    border-style: groove;
    border: 1px solid #d6d3d3;
    margin: 3px -7px 18px;
    max-height: 170px;
    border-radius: 8px;
    position: relative;
}

.col.col-bx-1 input {
    margin-top: -9px;
    max-height: 40px;
    border: none;
    font-weight: bold;
    font-family: 'Roboto';
    font-size: 20px;
}

.col.col-bx-1 label {
    color: grey;
    font-size: 13px;
    font-family: 'Roboto';
}

.col.col-bx2-info {
    margin-left: 0px;
}

.col.col-bx2-info label {
    font-family: 'Roboto';
    font-size: 22px;
    color: grey;
}

.col.col-bx2-info p {
    color: grey;
    font-size: 10px;
    margin-top: 7px;
}

.col-xl-5.col-bx2-info2 p {
    font-size: 12px;
    margin-top: 15px;
    color: grey;
    font-family: 'Roboto';
}

.col.col-bx2-info input {
    font-size: 38px;
    font-weight: bold;
    font-family: 'Roboto';
    border-radius: 12px;
}

.col-xl-5.text-left.col-bx2-info2 a {
    color: #A8055D;
    font-size: 12px;
    text-decoration: none;
    font-family: 'Roboto';
}

.col.tabel-span-title span {
    color: grey;
    font-size: 12px;
    font-family: 'Roboto';
}

.col.tabel-span-title {
    margin-left: 12px;
    margin-bottom: 20px;
}

.col.space-align {
    margin-left: 9px;
    margin-bottom: 10px;
}

.table-responsive.shadow-sm.tble-setting1 {
    font-size: 12px;
    font-family: 'Roboto';
    border-radius: 9px;
}

.tble-header-color {
    background-color: #aeb1b4;
}

.row.jarakcolumn {
    min-height: 50px;
    background-color: #eaeaea;
}

.col.grid-set2 {
    max-width: 258px;
}

.col.grid-set2 img {
    max-width: 258px;
    min-width: 240px;
    max-height: 353px;
    min-height: 174px;
    margin-bottom: 10px;
}

.col.grid-set1 {
    max-width: 258px;
}

.col.grid-set1 img {
    max-width: 258px;
    max-height: 170px;
    min-width: 258px;
    min-height: 170px;
    margin-bottom: 10px;
}

.col-lg-4.gridset1 {
    max-width: 250px;
    margin-left: 0px;
    margin-bottom: 9px;
}

.col-lg-4.gridset1 img {
    max-width: 237px;
}

.row.rowgrid1 {
    margin-left: 20px;
}

.col-lg-4.gridset2 {
    margin-bottom: 9px;
    max-height: 320px;
}

.col-lg-4.gridset2 img {
    max-height: 322px;
}

.col.upload-cntnt {
    text-align: center;
}

.col.upload-cntnt img {
    margin-left: 25px;
}

.col.upload-cntnt-last {
    text-align: right;
}

.col.upload-cntnt-last button {
    border-radius: 25px;
    min-width: 180px;
    background-color: grey;
    font-size: 14px;
    font-family: 'Roboto';
}

.col.upload-cntn-title {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 4px;
}

.col.upload-cntn-title h1 {
    color: grey;
    font-size: 18px;
    font-family: 'Roboto';
}

small {
    /*font-size: 14px;
    font-family: 'Roboto';
    font-weight: bold;
    color: red;*/
    
    color: red;
    margin: 2px 0;
    font-size: 80%;
    font-weight: 500;
}
.formgroup.h-3group small  {
}


.col.col-button-right {
    text-align: right;
    font-family: 'Roboto';
    font-size: 14px;
}

.col.col-button-right button {
    border-style: none;
    min-width: 120px;
    min-height: 30px;
    cursor: pointer;
    margin-right: 15px;
    border-radius: 24px;
}

.save {
    color: #ffffff;
    background-color: #A8055D;
}

.save:hover {
    background-color: rgba(168, 5, 93, 0.7);
}

.save:active {
    background-color: #A8055D !important;
}

.cancel {
    color: grey;
    background-color: #ffffff;
}

.cancel:hover {
    color: rgb(128, 128, 128);
    background-color: #e5dada;
}

.cancel:active {
    color: rgb(128, 128, 128) !important;
    background-color: #ffffff !important;
}


/******Taufik's ****/

.login-wrapper {
    width: 406px;
    color: #fff;
    margin-left: auto;
	padding-top: 70px;
    padding-bottom: 70px;
}
.page404 .login-wrapper{
    margin-right: auto;
    margin-left: 0;
    width: 532px;
    font-family: Lato;
    height: 100vh;
    display: flex;
    align-items: center;
}
.page404 .login-wrapper > div{
    
}
.page404 h1{
    font-size: 105px;
    font-weight: 900;
    
}
.page404 h2 {
    font-size: 35px;
    font-weight: 600;
}
.page404 h5 {
    font-weight: 300;
    font-size: 18px;
}
.page404wrapper button {
    background: #fff;
    font-weight: 900;
    color: #2D2D2D;
    font-size: 18px;
    min-width: 200px;
}
.section-forgot .login-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.rowbutton {
    align-items: center;
}

.rowbutton a,.rowbutton p {
    color: #fff;
    font-size: 11px;
}

.or {
    position: relative;
    text-align: center;
}

.or:before {
    content: "";
    border-top: 1px solid #fff;
    width: 46%;
    height: 2px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.or:after {
    content: "";
    border-top: 1px solid #fff;
    width: 46%;
    height: 2px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


/******************************** END styles.css ********************************/


/***************** main.css **********************/

body {
    font-family: Roboto !important;
    font-style: normal ;
    /*line-height: normal;*/
    background: #f2f0f0;
}

.content-wrap {
    max-width: 830px;
    min-height: 852px;
    margin-top: 90px;
    margin-bottom: 3rem;
    padding-bottom: 25px;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.title-box {
    height: 40px;
    background: #222222;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding-left: 10px;
    padding-top: 8px;
}

.title-text {
    font-weight: 900;
    font-size: 20px;
    line-height: 23px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    border-radius: 5px;
}

.ul-content {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.li-content {
    float: left;
}

.remain-box {
    width: 405px;
    height: 110px;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
}

.remain-text {
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    padding: 0;
    margin: 0;
    color: #828282;
}

.remain-status {
    font-weight: normal;
    font-size: 40px;
    line-height: 47px;
    color: #000000;
}

.remain-detail {
    font-weight: normal;
    font-size: 10px;
    line-height: 14px;
    margin: 0;
    padding: 0;
    color: #828282;
}

.subscript-text {
    font-weight: bold;
    font-size: 10px;
    line-height: 140.62%;
    /* or 14px */
    color: #000000;
}

.subscript-status {
    font-weight: normal;
    font-size: 10px;
    line-height: 140.62%;
    /* or 14px */
    padding: 0;
    margin: 0;
    color: #828282;
}


/*----------------------side menu account---------------------*/

.sidemenu-wrap {
    max-width: 250px;
    min-height: 800px;
    /*background: lightblue;*/
    margin-top: 90px;
    margin-bottom: 3rem;
    padding-bottom: 25px;
    padding-left: 0;
    margin-left: 50px;
}

.ul-side {
    list-style-type: none;
    margin: 0;
    padding: 8px 0;
    width: 250px;
    border-bottom: 1px solid #222222;
}

.li-side {
    padding-left: 0;
    margin: 0;
}

.last-li {
    border-bottom: none;
}

.li-side button {
    margin-bottom: 15px;
    margin-top: 15px;
    margin-left: 15%;
}

.img-sidebox {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    height: 10rem;
    margin-bottom: 10px;
}

.img-side {
    border-radius: 100%;
    min-height: 9rem;
    min-width: 9rem;
    max-height: 9rem;
    max-width: 9rem;
    border: 1px solid #ffffff;
}

.name-side {
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #222222;
}

.account-text {
    font-weight: normal;
    font-size: 10px;
    line-height: 12px;
    color: #828282;
}

.li-side a {
    font-weight: normal;
    font-size: 12px;
    line-height: normal;
    display: flex;
    align-items: center;
    color: #222222;
    padding: 7px 5px;
    border: 1px solid transparent;
}
.li-side a.active {
    font-weight: 700;
    font-size: 14px;
}

.li-side a:hover {
    text-decoration: none;
    border: 1px solid #d9d9d9;
    background: #e3e3e3;
    border-radius: 3px;
}

.active {
    /* font-weight: bold !important; */
    /* transition: 0.2s !important; */
    /* color: #222222 !important; */
}

.contrib-desc {
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #AEAEAE;
    padding: 0;
    margin: 0;
}

.become-contributor {
    background: #A8055D;
    border-radius: 100px;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 0.8s;
    color: #FFFFFF;
}

.become-contributor:hover {
    color: #ffffff;
    opacity: 0.8;
    transition: 0.8s;
}

.become-contributor:active {
    color: #ffffff;
    position: relative;
    top: 2px;
    opacity: 1;
}

.message-pop {
    color: red;
    position: relative;
    top: 3px;
}

.message-pop2 {
    color: red !important;
    position: relative !important;
    top: -12px !important;
}


/*-----------------------------profile----------------------------------*/

.personal-box {
    margin-bottom: 20px;
}

.perosonal-text {
    font-weight: 500;
    font-size: 20px;
    line-height: normal;
    color: inherit;
    margin-bottom: 3px;
}

.edit-box {
    text-align: right;
}

.edit-text {
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    color: #A8055D;
}

.edit-text:hover {
    opacity: 0.8;
    transition: 0.8s;
    color: #A8055D;
}

.edit-text:active {
    opacity: 1;
    transition: 0.8s;
    color: #A8055D;
}

.input-box {
    height: 45px;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    padding-top: 16px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
}
.input-box input{
    padding-bottom: 0;
}
.input-box p {
    display: flex;
    align-self: flex-end;
    margin-bottom: 0;
}
.input-box input[type=text],
.input-box input[type=password],
.input-box input[type=email] {
    font-weight: bold;
    font-size: 14px;
    line-height: 30px;
    width: 100%;
    border-style: none;
    padding-left: 0;
    background: transparent;
    color: #000000;
}

.form-control:focus {
    /*border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);*/
    border-color: none;
    box-shadow: none;
}

.label-text {
font-weight: normal;
    font-size: 11px;
    position: absolute;
    left: 4px;
    top: 4px;
    color: #828282;
}
.border-bottom{
    border-bottom: 1px solid #828282;
}
.section-title{
    font-size: 20px;
    color: #828282;
    margin-bottom: 20px;
    font-weight: 400;
}
.img-box {
    height: 175px;
    background: #FFFFFF;
    /* box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); */
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
}

.img-box img {
    position: absolute !important;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    object-fit: cover;
    object-position: center;
}

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

.facebook {
    width: 406px;
    height: 50px;
    background: #3D5A97;
    border-radius: 100px;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    transition: 1.0s;
    color: #FFFFFF;
    margin-bottom: 20px;
    position: relative;
}

.facebook:hover {
    color: #FFFFFF;
    transition: 1.0s;
    opacity: .8;
}

.facebook:active {
    position: relative;
    top: 2px;
    opacity: 1;
}

.google {
    margin-bottom: 20px;
    width: 406px;
    height: 50px;
    background: #DC4C3F;
    border-radius: 100px;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    position: relative;
    color: #FFFFFF;
}

.google:hover {
    color: #FFFFFF;
    transition: 1.0s;
    opacity: .8;
}

.google:active {
    position: relative;
    top: 2px;
    opacity: 1;
}


/*-----------------------plan price---------------------------------------------------*/

.plan-box {
    margin-left: 10px;
    margin-bottom: 10px;
}

.first-plan {
    margin-top: 20px;
}

.last-plan {
    margin-bottom: 30px;
}

.plan-text {
    font-weight: bold;
    font-size: 14px;
    line-height: 30px;
    color: #000000;
}

.btn-plan-box {
    text-align: right;
    margin-right: 0;
    margin-left: auto;
}

.get-credit {
    width: 120px;
    height: 30px;
    background: #FFC700;
    border-radius: 31px;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    /* identical to box height */
    transition: .25s;
    color: #222222;
}

.get-credit:hover {
    opacity: 0.8;
    color: #222222;
}

.get-credit:active {
    position: relative;
    top: 2px;
    opacity: 1;
}

.border-plan {
    width: 100%;
    min-height: 130px;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 35px;
    position: relative;
}

.sub-text {
    /*font-weight: normal;
    font-size: 14px;
    line-height: normal;
    color: #000000;*/
}


/*---slider btn------*/

.auto-btn {
    position: absolute;
    right: 3rem;
    bottom: 1rem;
}

.auto-btn {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #222222;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    /* lane */
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    height: 38px;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    /* circle */
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    left: 4px;
    bottom: 4px;
    background-color: #DC4E41;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #E5E5E5;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
    background-color: #87B700;
}

.checkbox.switcher {
   /* position: absolute;
    right: 5px;
    bottom: 10px;*/
}

div.checkbox.switcher label, div.radio.switcher label {
  padding: 0;
}
div.checkbox.switcher label *, div.radio.switcher label * {
  vertical-align: middle;
}
div.checkbox.switcher label input, div.radio.switcher label input {
  display: none;
}
div.checkbox.switcher label input + span, 
div.radio.switcher label input + span {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  width: 65px;
  height: 30px;
  background: #e5e5e5;
  border: 3px solid #e5e5e5;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

div.checkbox.switcher label input + span:before{
    content: "OFF";
    position: absolute;
    left: 47%;
    top: 50%;
    transform: translateY(-50%);
    color: #bbbbbb;
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    transition: all .4s ease;
}
div.checkbox.switcher label input:checked + span:before {
    content: "ON";
    left: 20%;
    color: #fff;
    
}
div.checkbox.switcher label input + span small, div.radio.switcher label input + span small {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 0;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    left: 3px;
    box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.1);
}
div.checkbox.switcher label input:checked + span, div.radio.switcher label input:checked + span {
    background: #64be64;
    border-color: #64be64;
}
div.checkbox.switcher label input:checked + span small, div.radio.switcher label input:checked + span small {
  /*left: 34px;*/
    left: calc(100% - 23px);
}


/* Rounded sliders */

.slider.round {
    /*lane*/
    border-radius: 100px;
}

.slider.round:before {
    /*circle*/
    border-radius: 100%;
}


/*
.off-box{
padding-top: 12px;
padding-left: 40px;
height: 38px;
}
.off{
font-weight: normal;
font-size: 14px;
line-height: 16px;
color: #222222;
}
input:checked .off{
display: none;
}*/


/*---end slider btn------*/

.renew-box {
    position: absolute;
    right: 7.3rem;
    bottom: 1.7rem;
}

.renew-txt {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #222222;
}


/*-----------------------------------------billing-------------------------------------------------------*/

.icon-bill {
    min-width: 44px;
    min-height: 28px;
    max-width: 44px;
    max-height: 28px;
}

.payment-card {
        width: 100%;
    height: 62px;
    position: relative;
    border: 1px solid #f2f2f2;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
    display: flex;
    padding: 6px 14px;
}
.payment-card a {
    font-size: 12px;
    transition: .25s;
    color: #A8055D;
    /*text-decoration: underline;*/

}
.payment-card a:hover {
    color: #A8055D;
    text-decoration: underline;

}
.payment-logo{
    width: 50px;
}
.payment-logo img {
    max-width: 50px;
}
.col-card-info{
        justify-content: space-between;
}

.pt1 {
    padding-right: 30px;
}

.payment-left {
   /* float: left;
    padding: 18px;*/
}

img.payment-icon {
    width: 50px;
    margin: 0;
    padding: 0;
}

.payment-right {
    position: absolute;
    right: 15px;
    top: 15px;
}

.payment-btn-box {
    /*padding-left: 20px;
    padding-right: 20px;*/
    margin-bottom: 20px;
    margin-top: 10px;
}

.add-payment {
    width: 100%;
    height: 62px;
    background: #F2F2F2;
    border-radius: 5px;
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    transition: .25s;
    color: #828282;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-payment:hover {
    opacity: 0.7;
    box-shadow: 3px 4px 2px -2px rgba(0, 0, 0, 0.25);
}

.add-payment:active {
    position: relative;
    top: 2px;
    opacity: 1;
}

.addr-box {
max-width: 100%;

    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    margin-right: 10px;
    padding: 10px 15px;
    position: relative;
}

.addr-txt {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    padding: 0;
    margin-bottom: 0px;
    color: #000000;
}

.addr-txt-bold {
    font-weight: 900;
    font-size: 14px;
    line-height: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: #222222;
}

.edit-addr {
    position: absolute;
    right: 20px;
}


/*-------------------------------purchase history------------------------------------------------------------------*/

.purchase-txt {
font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    display: flex;
    align-items: center;
}

.space20 {
    margin-right: 5rem;
}

.filter-box {
    text-align: right !important;
    /* padding-right: 0; */
    width: 100%;
    margin-right: -6px;
}

.filter {

}


/*-------dropdown filter-------*/

.dropbtn {
    background-color: transparent;
    color: white;
    padding: 10px 8px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    display: flex;
    align-items: center;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown i {
    font-size: 18px;
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 90px;
    text-align: center;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    right: 0px;
    border-radius: 0 0 5px 5px;
    margin-top: 0px;
    left: auto;
        padding: 5px 0;
}

.dropdown-content a {
    color: black;
    padding: 6px 8px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    color: black;
    text-decoration: none;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background: rgba(220, 220, 220, 0.4);
    border-radius: 10px 10px 0 0;
}


/*------- end dropdown filter-------*/


/*---------------------------------------------------my like-------------------------------------------------------------------*/

.like-title-box {
    width: 100%;
    /* padding-left: 0; */
    /* margin-bottom: 20px; */
    color: #333;
    padding: 10px 0 20px;
}
.like-title-box.left-0 {
    margin-left: -30px;
}

.option-text {
    font-weight: normal;
    font-size: 20px;
    line-height: 20px;
    transition: 0.3s;
    color: #828282;
}
.li-option.active .option-text{
    font-weight: 900;
    color: #222;
}
.option-text:hover {
    color: #222;
    text-decoration: none;
}

.option-text:active {
    font-weight: 500;
    font-size: 20px;
    line-height: 23px;
    color: #222222;
}

.option-box {
    margin-bottom: 30px;
}

.ul-option {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-left: -10px;
}

.li-option {
    float: left;
    padding: 2px;
    padding-right: 25px;
    padding-left: 25px;
    border-right: 1px solid #828282;
}
.li-option:last-child {
    border-right: 0;
}


/*------------------------------grid picture--------------------------------*/

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    /* padding: 0 4px; */
}


/* Create four equal columns that sits next to each other */

.column {
    -ms-flex: 25%;
    /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}


/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

.img-landscape {
    /*width: 250px;
display: block;
height: 186px;
max-height: 186px;
border-radius: 8px;
object-fit: cover;*/
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    position: absolute;
    object-fit: cover;
    grid-row-end: span 1;
   /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 5px 5px rgba(0, 0, 0, 0.3);*/
    transition: .5s ease;
}
.grid-landscape:hover .img-landscape{
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 5px 5px rgba(0, 0, 0, 0.3);
}
.grid-potrait:hover .img-landscape{
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 5px 5px rgba(0, 0, 0, 0.3);
}

.img-potrait {
    object-fit: cover;
   /* width: 250px;
    border-radius: 8px;
    display: block;
    min-height: 390px;
    max-height: 390px;*/
    width: 250px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    position: absolute;
    object-fit: cover;
    grid-row-end: span 1;
   /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 5px 5px rgba(0, 0, 0, 0.3);*/
    transition: .5s ease;
}


/*------------------------end grid picture----------------------------------*/


/*-----------------------image overlay----------------------------------------*/

.figure {
    padding: 0;
    margin: 0;
    transition: 1s ease;
    position: relative;
    display: block;
}

.overlay {
    /*position: absolute;
  top: 0;
  border-radius: 6px;
  bottom: 0;
  left: 0;
  right: 0;
  display: inherit;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 1s ease;
  background-color: rgba(0, 0, 0, 0.6);*/
    position: relative;
    background: green;
    opacity: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transition: 1s ease;
    display: inherit;
    background-color: rgba(0, 0, 0, 0.6);
    transition :all .25s ease
}

.overlay:hover {
    /* opacity: 1;
  transition: 1s ease;*/
    opacity: 1;
    /*box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);*/
   
}

.overlay .middle {
    /*position: absolute;
 top: 50%;
 left: 50%;
-webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 text-align: center;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.overlay .bottom {
    position: absolute;
    bottom: 10px;
    left: 15px;
    width: calc(100% - 30px);
}

.overlay-title {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: .4s ease;
    color: #FFFFFF;
}

.overlay-title:hover {
    opacity: .7;
    transition: .4s ease;
    color: #ffffff;
}

.overlay-title:active {
    position: relative;
    top: 2px;
    opacity: 1;
}

.top {
    padding: 0;
    position: relative;
}


/*----------checkbox start------*/

.top .chk {
    position: absolute;
    right: 20px;
    top: 0px;
    cursor: pointer;
}


/* Hide the browser's default checkbox */

.chk input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 100px;
}


/* On mouse-over, add a grey background color */

.chk:hover input ~ .checkmark {
    background-color: rgb(220, 220, 220, 0.1);
}


/* When the checkbox is checked, add a blue background */

.chk input:checked ~ .checkmark {
    background-color: rgb(191, 255, 0);
}

.overlay~ .chk input:checked {
    opacity: 1;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.chk input:checked ~ .checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.chk .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*-------checkbox end--------*/

.download-overlay {
    /*button*/
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 5px;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    cursor: pointer;
    transition: 1s;
    /* identical to box height */
    color: #FFFFFF;
}

.download-overlay:hover {
    opacity: 0.8;
    transition: 1s;
    color: #FFFFFF;
    background: rgb(220, 220, 220, 0.4);
}

.download-overlay:active {
    opacity: 1;
    position: relative;
    top: 2px;
}


.ul-bot  {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    margin-left: -7px;
}
.li-bot {
    float: left;
    margin-right: 0;
}
.li-bot a{
    transition: .25s ease;
    color: #FFFFFF;
    padding: 10px 7px 10px;
    display: flex;
}
.li-bot-detail {
    position: absolute;
    left: auto;
    right: 0;
}

.li-bot i {
    font-size: 16px;
    color: #ffffff;
    transition: .4s;
}

.li-bot i:hover {
    font-size: 16px;
    color: #ffffff;
    opacity: 0.7;
    transition: .4s;
}

.li-bot-detail a {
    font-weight: normal;
    font-size: 12px;
    line-height: 21px;
    transition: .25s;
    color: #FFFFFF;
}

.li-bot-detail a:hover {
    
    color: #ffffff;
    opacity: 0.7;
}

.li-bot i:active,
.li-bot-detail a:active {
    position: relative;
    top: 2px;
    opacity: 1;
}



.galerry-box {

}

.grid-landscape {
    /*width: 250px;
border-radius: 5px;
border: 1px solid yellow;
margin-right: 20px;
margin-bottom: 20px;
background: grey;
grid-row-end: span 1;*/
    width: 100%;
    border-radius: 5px;
    /*border: 1px solid yellow;
background: grey;*/
    grid-row-end: span 1;
    position: relative;
}

.grid-potrait {
    /*width: 250px;
grid-row-end: span 2;
border-radius: 5px;
/*border: 1px solid red;
margin-right: 20px;
/*background: blue;
margin-bottom: 20px;*/
    width: 100%;
    grid-row-end: span 2;
    border-radius: 5px;
    /*border: 1px solid red;
background: blue;*/
    position: relative;
}

.row1 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 200px;
}




/*-----------------------end image overlay----------------------------------------*/


/*--------------------------------------------collection------------------------------------------------------------------------------------*/

.section-folder {
    /* margin-left: -8px; */
    /* margin-right: -8px; */
    padding: 0 8px;
}
.left-0 .section-folder {

    margin-left: -38px;
    margin-right: -38px;
}
.allcontent-wrapper{
    margin-left: -8px;
    margin-right: -8px;
}
/*
.card-folder {
    width: calc(25% - 16px);
    height: 179px;
    border: 0px solid transparent;
    box-sizing: border-box;
    border-radius: 5px;
    margin: 0 8px;
    /* margin-right: 15px; *
    margin-bottom: 15px;
    background: #fff;
    position: relative;
    display: inline-block;
}
*/
.card-folder {
    /* width: calc(25% - 16px); */
    width: calc(100% + 16px);
    height: 179px;
    border: 0px solid transparent;
    box-sizing: border-box;
    border-radius: 5px;
    margin: 0 -8px;
    /* margin-right: 15px; */
    margin-bottom: 15px;
    background: #fff;
    position: relative;
    display: inline-block;
}
.left-0 .card-folder {
    width: 210px;
    height: 210px;
    background: #f0f0f0;
}

.allcontent-wrapper .card-folder {
    width: calc(25% - 16px);
    height: 181px;
    border: 1px solid #ddd;
}
.card-wish {
   /* width: 213px;
    height: 213px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    position: relative;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
    border: 1px solid #A8055D;
    box-sizing: border-box;
    border-radius: 5px;*/
    border: 1px solid #A8055D;
    padding: 10px;
}

.card-default {
    border: 1px solid #828282;
    padding: 0px;
}
.card-default .overlay {
    opacity: 1;
    background-color: transparent;
}
.card-default .overlay a {
    color: #333333;
}
.wish-title {
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    transition: 1s ease;
    color: #333333;
}

.wish-title:hover {
    transition: 1s ease;
    opacity: 0.8;
    color: #333333;
}

.wish-title:active {
    position: relative;
    opacity: 1;
    top: 2px;
}

.wish-date {
    font-weight: normal;
    font-size: 10px;
    line-height: 21px;
    color: #333333;
}

.wish-icon {
display: inline-block;
    border-radius: 100%;
    box-shadow: 0px 0px 2px #888;
    padding: 0;
    font-size: 22px;
    line-height: 22px;
    background: #F2F2F2;
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    color: #A8055D;
    text-shadow: 0px 0px 5px #FFFFFF;
    padding: 11px 8px 8px;
    width: 45px;
    height: 45px;
    text-align: center;
}

.card-wish i {
position: absolute;
    left: 50%;
    /* bottom: 100px; */
    top: 43%;
    transform: translate(-50%, -50%);
}

.btn-wish,
.card-default .btn-card{
   
    height: 31px;
    border: 1px solid #333333;
    box-sizing: border-box;
    border-radius: 5px;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #333333;
    transition: .35s ease;
}
.card-default .overlay h5 span {
    font-weight: 400;
}
.card-default .more::after {
    color: #333;
}
.btn-wish:hover {
    background: rgb(220, 220, 220, 0.3);
    color: #333333;
}

.btn-wish:active {

}

.card-wish .wish-title {
    position: absolute;
    top: 10px;
}

.card-wish .wish-date {
    position: absolute;
    bottom: 45px;
    left: 10px;
}

.card-wish .btn-wish {
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
    width: calc(100% - 20px);
    margin: 0 auto;
}

.img-folder {
    /*min-width: 11.7vw;
max-width: 11.7vw;
min-height: 23.5vh;
max-height: 23.5vh;*/
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    position: absolute;
    left: 0;
    top: 0;
}
.card-default .img-folder {
    border-radius: 6px;
}
.card-default .overlay .overlay-title-date{
   color: #000;
}

.card-folder:hover .overlay {
    opacity: 1;
    transition: 1s ease;
}

.new-folder {
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    width: 100px;
    text-align: center;
    transition: 1s;
    color: #828282;
}

.new-folder:hover {
    color: #828282;
    transition: 1s;
    opacity: 0.8;
}

.new-folder:active {
    position: relative;
    top: 2px;
    opacity: 1;
}

.card-folder .new-folder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-folder .title-folder {
    position: absolute;
    bottom: 15px;
    left: 15px;
}
.card-folder .overlay{
    padding: 10px;
}
.title-folder {
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
}

.card-folder:hover .title-folder {
    /*exclude title when card is hover*/
    display: none;
    transition: 1s ease;
}

.overlay-title-folder {
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    transition: 1s;
    color: #FFFFFF;
}

.overlay-title-date {
    font-weight: normal;
    font-size: 10px;
    line-height: 21px;
    color: #FFFFFF
}

.overlay-title-folder:hover {
    opacity: .7;
    transition: 1s ease;
    color: #FFFFFF;
}

.overlay-title-folder:active {
    position: relative;
    top: 2px;
    opacity: 1;
}

.btn-card {
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 5px;
    font-weight: normal;
    font-size: 14px;
    width: 90%;
    transition: 1s;
    color: #FFFFFF;
    transition: .25s ease;
}

.btn-card:hover {
    color: #FFFFFF;
    opacity: 0.8;
    background: rgb(220, 220, 220, 0.4);
}

.btn-card:active {

}

.overlay .overlay-title-folder {
    position: absolute;
    left: 13px;
    top: 10px;
}

.overlay .overlay-title-date {
    position: absolute;
    bottom: 45px;
    left: 13px;
}

.overlay .btn-card {
    position: absolute;
    bottom: 15px;
    left: 13px;
}

.overlay .btn-card {
    position: absolute;
    bottom: 10px;
    width: calc(100% - 20px);
    margin: 0 auto;
    left: 0;
    right: 0;
    line-height: normal;
}
.card-default .overlay .btn-card {
    bottom: 10px;
}


/*-----------------------------------------home blog-------------------------------------------------------*/

.blog-left {
    /*background: lime;*/
}

.blog-right {
    /*background: red;*/
    text-align: right;
}

.blog-right {
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 35px;
    color: #000000;
}

.blog-card-title {
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    line-height: 23px;
    color: #222222;
}

.blog-card-title:hover {
    color: #222222;
    text-decoration: underline;
}

.blog-card-title:active {}

.blog-card-name {
    font-weight: 500;
    font-size: 12px;
    color: #000;
    padding: 0;
    margin: 0;
    line-height: 14px;
}

.blog-card-date {
    font-weight: 400;
    font-size: 11px;
    color: #828282;
    line-height: 11px;
}

.blog-box {
    /*background: lime;*/
    padding-top: 20px;
    padding-bottom: 20px;
    justify-content: space-between;
    display: inline-flex;
}

.blog-card {
    width: 360px;
    height: 300px;
    /*background: yellow;*/
    border-radius: 5px;
    position: relative;
}

.blog-card .blog-img {
    /*background: green;*/
    height: 18vh;
    max-width: 100%;
    min-width: 100%;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}

.blog-card .blog-body {
    /*background: red;*/
    position: relative;
    height: 12.5vh;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.img-blogger {
    border-radius: 50%;
    border: 1px solid #bbb;
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    object-fit: cover;
}

.detail-bloger {
    position: absolute;
    left: 80px;
    top: 65px;
}

.blog-body img {
    position: absolute;
    left: 20px;
    bottom: 13px;
}

.layering {
    width: 100%;
    height: 18vh;
    /*background: green;*/
    position: absolute;
    top: 0;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transition: .8s ease;
}

.blog-card:hover .layering {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.7);
    transition: .8s ease;
}

.exploring {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    color: #FFFFFF;
}

.exploring:hover {
    opacity: 0.8;
    color: #FFFFFF;
}

.exploring:active {
    position: relative;
    top: 2px;
}

.layering .exploring {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.blog-card:hover {
    background: #F2F2F2;
    box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);
    transition: .8s ease;
}


/*-----------------------------------------grid homepage----------------------------------------------------------*/

.boxss-grid {
    /*background: lime;*/
    margin-top: 20px;
    width: 100%;
    height: 100%;
}

.rows {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 280px;
}

.home-landscape {
    width: 360px;
    /*background: grey;*/
    border: 1px solid #bbb;
    grid-row-end: span 1;
    border-radius: 5px;
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);
    transition: .5s ease;
}

.home-landscape:hover {
    box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);
    transition: .5s ease;
}

.home-potrait {
    width: 360px;
    grid-row-end: span 2;
    /*background: blue;*/
    /*border:1px solid #bbb;*/
    border-radius: 5px;
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);
    transition: .5s ease;
}

.home-potrait:hover {
    box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);
    transition: .5s ease;
}

.figr {
    /*background: red;*/
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 5px;
}

.pict-card {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    z-index: -1;
}

.layer {
    /*background: green;*/
    width: 100%;
    height: 100%;
    border-radius: 5px;
    opacity: 0;
    transition: .8s ease;
    display: inherit;
    background-color: rgba(0, 0, 0, 0.6);
}

.layer .atas {
    padding-top: 15px;
    padding-left: 20px;
}

.layer .tengah {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.layer .bawah {
    position: absolute;
    bottom: 15px;
    left: 20px;
}

.figr:hover .layer {
    opacity: 1;
    transition: .8s ease;
}

.li-home-detail {
    position: absolute;
    left: 18rem;
}

.li-home-detail a {
    font-weight: normal;
    font-size: 12px;
    line-height: 21px;
    transition: .4s;
    color: #FFFFFF;
}

.li-home-detail a:hover {
    font-size: 11px;
    color: #ffffff;
    opacity: 0.7;
    transition: .4s;
}

.li-home-detail a:active {
    position: relative;
    top: 2px;
    opacity: 1;
}


/*-------------------------------------profile edit---------------------------------------------------------------------*/

.single-save-box {
    text-align: right;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
    padding-right: 15px;
}

.cancel {
    min-width: 120px;
    border: 1px solid #828282;
    box-sizing: border-box;
    border-radius: 100px;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #828282;
}

.cancel:hover {
    color: #828282;
    transition: 1s ease;
    background: rgb(237, 237, 237);
}

.save {
    min-width: 120px;
    min-height: 30px;
    background: #A8055D;
    border-radius: 100px;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.save:hover {
    color: #FFFFFF;
    transition: 1s ease;
    background: rgb( 204, 8, 114);
}

.save:active,
.cancel:active {
    position: relative;
    top: 2px;
    opacity: 1;
}


/*----------------------------------------------overview contributor------------------------------------------------------------*/

.contrib-text {
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #828282;
}

.contrib-detail {
    font-weight: normal;
    font-size: 40px;
    line-height: 47px;
    color: #000000;
}

.contrib-desc {
    font-weight: normal;
    font-size: 10px;
    line-height: 14px;
    color: #828282;
}

.contrib-overview-box {
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    width: 405px;
    height: 110px;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 5px;
}

.contrib-lable {
    font-weight: normal;
    font-size: 10px;
    line-height: 12px;
    /* identical to box height */
    color: #828282;
}

.contrib-4-col {
    width: 194px;
    height: 60px;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 20px;
}

.contrib-col-info {
    font-weight: bold;
    font-size: 20px;
    line-height: 21px;
    color: #000000;
}

.contrib-graf-box {
    height: 400px;
}

.contrib-table-box {
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 20px;
}

.contribution {
    margin-left: 10px;
    margin-bottom: 20px;
}

.overview-image {
    width: 830px;
    height: 581px;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}


/***************** END main.css **********************/
.faqs-group{
    padding: 25px 45px 10px;
    border-bottom: 1px solid #ddd;
    color: #222;
    line-height: 1.4;
}
.faqs-group h5{
    font-size: 16px;
    margin-bottom: 20px;
}
.faqs-group.question-faqs{
    border-bottom: 0;
        padding-bottom: 45px;
}
.faqs-group a{
    color: #A8055D;
    font-weight: 700;
}

.faqs-group h1 {
    font-size: 20px;
    color: #828282;
    font-weight: 400;
}
.faqs-group ol > li {
    margin-bottom: 25px;
}
.faqs-group ol > li > span {
    margin-bottom: 3px;
    display: block;
}
.faqs-group ul {
    counter-reset: items-lvl1;
    list-style: none;
    position: relative;
    padding-left: 25px;
}

.faqs-group ul li:before {
    content: ">";
    position: absolute;
    right: auto;
    left: 13px;
    padding-right: 0;
}


/***************** footer_user.css **********************/

#footer {
    width: 100%;
    background-color: #ffffff;
    
    /* margin-top: 10px; */
    /* opacity: 0.9; */
    padding-top: 3.5rem;
    /* padding-left: 8rem; */
    /* padding-right: 8rem; */
}

.ul-footer {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-bottom: 12px;
}
.logo-footer {
    max-width: 153px;
}
.title-footer {
    font-weight: normal;
    font-size: 10px;
    line-height: 12px;
    color: #828282;
    margin-bottom: 3px;
    display: block;
}

.li-footer a {
    font-weight: 500;
    font-size: 12px;
    /* line-height: 25px; */
    color: #000000;
}

.li-footer a:hover {
    text-decoration: underline;
}

.li-footer a:active {}

.phone {
font-size: 14px;
    line-height: 15px;
    color: #000000;
    font-weight: 700;
    margin-bottom: 8px;
}

.phone strong {
    font-weight: 900;
}

.phone span {
    font-weight: 400;
}

.ul-foot-icon {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.li-foot-icon {
    float: left;
    margin-right: 8px;
}

.copy-box {
    margin-top: 25px;
}


/***************** END footer_user.css **********************/


/***************** navbar_home.css **********************/


/*---------------atas transparent-------------------*/

.jr-transparent {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    /*background: lime;*/
    position: absolute;
    z-index: 1;
    max-height: 50px;
    width: 100%;
}

.plan-text {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: .8s ease;
}

.plan-text:hover {
    color: rgba(255, 255, 255, 0.8);
    transition: .8s ease;
}

.discover-text {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: .8s ease;
}

.discover-text:hover {
    color: rgba(255, 255, 255, 0.8);
    transition: .8s ease;
}

.discover-text:after {
    content: '\f107';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    /* Fix version 5.0.9 */
    font-size: 12px;
    position: absolute;
    top: 8px;
    left: 58px;
    color: #ffffff;
    pointer-events: none;
    background: #111111;
    display: inline-block;
    border-radius: 100%;
    padding: 0.5px 6px;
}

.img-text {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: .8s ease;
}

.img-text:hover {
    color: rgba(255, 255, 255, 0.8);
    transition: .8s ease;
}

.img-text:after {
    content: '\f107';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    /* Fix version 5.0.9 */
    font-size: 12px;
    position: absolute;
    top: 8px;
    left: 45px;
    color: #ffffff;
    pointer-events: none;
    background: #111111;
    display: inline-block;
    border-radius: 100%;
    padding: 0.5px 6px;
}

.signs-text {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #111111;
}

.signs-text:hover {
    color: #111111;
}

.li-menu-home {
    /*background: red !important;*/
    height: 30px;
    margin-right: 5px;
    padding-right: 5px;
    border-right: 0.5px solid rgba(229, 229, 229, 0.2) !important;
}

.li-menu-login {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    border-radius: 100px;
    /*background: #ffffff;*/
    margin-left: 5px;
    text-align: center;
    width: 70px;
    height: 30px;
    margin-right: 5px;
    transition: .8s ease;
}

.li-menu-login:hover {
    transition: .8s ease;
    background: rgba(255, 255, 255, 0.8);
    color: #111111 !important;
}

.li-menu-sign {
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    border-radius: 100px;
    text-align: center;
    width: 70px;
    height: 30px;
    transition: 1s ease;
}

.li-menu-sign:hover {
    opacity: 0.8;
    transition: 1s ease;
}

.signs-text:hover {
    color: #111111;
}

.iconic {
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0;
    padding: 0;
}

.iconic-text:after {
    content: '\f107';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    /* Fix version 5.0.9 */
    font-size: 18px;
    position: absolute;
    top: 3px;
    left: 42px;
    color: #ffffff;
    pointer-events: none;
}

.jr-transparent .iconic {
    position: absolute;
    top: 0;
}


/*---------------------------bwah white----------------------------------*/

.justi {
    justify-content: space-between;
}

.white-navbar {
    background: linear-gradient(180deg, #ffffff 98%, rgba(255, 255, 255, 0) 100%) !important;
    padding-left: 20px;
    height: 50px;
    margin: 0;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 7.5rem;
    padding-right: 7rem;
    z-index: 10;
    position: fixed;
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    transform: translateY(-100%);
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}


/*change color on scroll*/

.white-navbar.scrolled {
    background: #ffffff !important;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.img-text-w {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: rgba(0, 0, 0, 1);
    transition: .8s ease;
}

.img-text-w:hover {
    color: rgba(0, 0, 0, 0.8);
    transition: .8s ease;
}

.img-text-w:after {
    content: '\f107';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    /* Fix version 5.0.9 */
    font-size: 12px;
    position: absolute;
    top: 8px;
    left: 58px;
    color: #ffffff;
    pointer-events: none;
    background: #111111;
    display: inline-block;
    border-radius: 100%;
    padding: 0.5px 6px;
}

.discover-text-w {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: rgba(0, 0, 0, 1);
    transition: .8s ease;
}

.discover-text-w:hover {
    color: rgba(0, 0, 0, 0.8);
    transition: .8s ease;
}

.discover-text-w:after {
    content: '\f107';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    /* Fix version 5.0.9 */
    font-size: 12px;
    position: absolute;
    top: 8px;
    left: 58px;
    color: #ffffff;
    pointer-events: none;
    background: #111111;
    display: inline-block;
    border-radius: 100%;
    padding: 0.5px 6px;
}

.plan-text-w {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: rgba(0, 0, 0, 1);
    transition: .8s ease;
}

.plan-text-w:hover {
    color: rgba(0, 0, 0, 0.8);
    transition: .8s ease;
}

.li-menu-login-w {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 100px;
    /*background: #ffffff;*/
    color: #000000;
    margin-left: 5px;
    text-align: center;
    width: 70px;
    height: 30px;
    margin-right: 5px;
    transition: .8s ease;
}

.li-menu-login-w:hover {
    transition: .8s ease;
    background: rgba(0, 0, 0, 0.8);
}

.li-menu-sign-x {
    background: #222222;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 100px;
    text-align: center;
    width: 70px;
    height: 30px;
    transition: 1s ease;
}

.li-menu-sign-x:hover {
    opacity: 0.8;
    transition: 1s ease;
}

.logins-text-w {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #222222;
}

.logins-text-w:hover {
    color: #ffffff;
}

.signs-text-w {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #ffffff;
}

.signs-text-w:hover {
    color: #ffffff;
}

.iconic-w {
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0;
    padding: 0;
}

.iconic-text-w:after {
    content: '\f107';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    /* Fix version 5.0.9 */
    font-size: 18px;
    position: absolute;
    top: 3px;
    left: 42px;
    color: #222222;
    pointer-events: none;
}

.white-navbar .iconic-w {
    position: absolute;
    top: 0;
}

.inverse_black {
    filter: invert(100%);
}


/*<style>*/

.searchingg-box {
    /*background: lime;*/
    height: 30px;
    width: 400px;
    margin-left: 40px;
    border-radius: 5px;
    position: relative;
    float: right;
}

.seacrc-white {
    background: transparent;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #bbb;
    height: 100%;
    width: 100%;
    color: #828282;
    border-radius: 5px;
    padding-left: 10px;
}

.searchingg-box button {
    position: absolute;
    right: 3px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}

.searchingg-box button:focus {
    outline-style: none;
}

.img-seacrchss {
    height: 25px;
    width: 25px;
    opacity: 0.8;
    transition: 1s ease;
}

.img-seacrchss:hover {
    opacity: 1;
    transition: 1s ease;
}

.icon-trasparent-bar {
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0;
    padding: 0;
}

.sub-menu-homes {
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
    color: #828282
}

.dropdown-menu .iconxy {
    padding-left: 20px;
}

.iconxy img {
    margin-right: 3px;
}


.container {
    /*max-width: 1270px;*/
}

.navbar-brand {
    display: inline-flex;
    flex: 0 0 auto;
}

.black-navbar {
    color: #fff;
    padding: 0;
    background: linear-gradient(180deg, #111111 -94%, rgba(17, 17, 17, 0) 100%);
    transition: background-color .2s ease-in-out;
}

.black-navbar.scrolled {
    background: #111;
    color: #fff;
    padding: 0;
}

.nav-item {
    padding: 0px 0;
    /* height: 50px; */
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(229, 229, 229, 0.05);
}
.nav-item:first-child{
    border-left: 0 !important;
}

.scrolled .nav-item {
    border-left: 1px solid #222;
}


.black-navbar .navbar-nav a.nav-link {
    /* color: #828282;   */
    font-size: 12px;
    /* opacity: .5; */
    color: rgba(255, 255, 255, 0.8);
}

.black-navbar .navbar-nav a.nav-link:hover {
    /* opacity: 1; */
    color: #fff;
}

.toggle-image {
    /*width: 162px;*/
    width: 120px;
    padding: 0;
    position: relative;
    display: flex;
    vertical-align: middle;
    align-items: center;
    height: 100%;
    font-size: 18px !important;
    color: #fff !important;
        height: 50px;
    ;
}

.toggle-discover {
    width: 115px;
    position: relative;
    display: flex;
    vertical-align: middle;
    align-items: center;
    height: 100%;
    padding-left: 11px;
}

.toggle-account {
    padding: 0;
    position: relative;
    display: flex;
    vertical-align: middle;
    align-items: center;
    border: 1px solid rgba(229, 229, 229, 0.2);
    border-radius: 100px;
    height: 30px;
    width: 164px;
    padding: 3px 2px 3px 11px;
    margin-left: 9px;
     padding-left: 15px !important;
}

.scrolled .toggle-account {
    border: 1px solid #222222;
   
}

.arrow-dropdown::after {
    content: url('../images/icon/arrow.svg');
    margin: 0;
    position: absolute;
    right: 8px;
    border: none;
    vertical-align: middle;
    /* height: 24px; */
    font-size: 0px;
     transition: all .4s ease;
}
.arrow-dropdown[aria-expanded="true"]::after {

    transform: rotate(-180deg);
   
}

.toggle-account.arrow-dropdown::after {
    content: url(../images/icon/arrow.svg);
    margin: 0;
    position: absolute;
    right: 2px;
    border: none;
    vertical-align: middle;
}
.navbar-admin .toggle-account.arrow-dropdown::after {
    filter: invert(1);
}
.form-navbar {
    padding: 0px .5rem;
    height: 50px;
    display: flex;
    align-items: center;
    /*width: 427px;*/
    width: 100%;
    transition: all .36s ease;
     opacity:1;
}
.nav-search{
   width: calc(100% - 780px);
     /*width: calc(100% - 650px);*/
}
.form-navbar.hide {
    opacity:0;
}

.form-navbar.form-inline .form-control {
    width: calc(100% - 43px);
    /*background: transparent;*/
    background: #fff;
    border: none;
    font-size: 12px;
    height: 35px;
    color: #fff;
    transition: all .5s ease;
}

.form-navbar.form-inline .form-control:focus {
    background: #fff;
    color: #222;
}

.navbar .button {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #111111;
    background: #fff;
    height: 30px;
    border-radius: 50px;
    width: 80px;
    text-align: center;
    justify-content: center;
    padding: 0;
    min-width: unset;
}

.button:hover {
    text-decoration: none;
}

.btn-white {
    color: #111111;
    background: #fff;
}

.navbar .btn-transparent {
    color: rgba(255, 255, 255, 0.5);
    /* opacity: .5; */
    background: transparent;
    border: 1px solid;
}

.scrolled .btn-transparent {
    color: #828282;
    /* opacity: .5; */
    background: transparent;
    border: 1px solid;
}

.btn-transparent:hover {
    color: #fff;
    /* opacity: 1; */
}

.no-border {
    border: none !important;
}

.not-button {
    padding: 0;
    background: none;
    -webkit-appearance: none;
    border: none;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: auto;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
        width: 100%;
    padding: .5rem 0;
    margin: 0rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 0px solid rgba(0, 0, 0, .15);
    border-radius: 0 0 5px 5px;
    /*box-shadow: 0 3px 8px rgba(0, 0, 0, .3);*/
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, .3)
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem .75rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-transform: capitalize;
}


/***************** END navbar_home.css **********************/


/*------------------------ home.css -----------------------------*/


/*------------------------homepage-----------------------------*/

#header-home {
    /*background: red;*/
    position: relative;
    overflow: hidden;
}

.head-home {
    /*background: lime !important;*/
    position: relative !important;
}

.coverdb {
    /* Set a specific height */
    /* height: 100vh;  */
    object-fit: cover !important;
    transition: all .5s ease;
    filter: none;
    min-height: 550px;
    /* Create the parallax scrolling effect */
    /* background-attachment: fixed !important; */
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.25) 0%, rgba(13, 13, 13, 0.31) 100%), url(../images/homepage/master-big.jpg);
    opacity: 1;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    /* -webkit-animation: slide 100s linear infinite; */
    -webkit-animation: zoomin 200s ease-in infinite;
    animation: zoomin 200s ease-in infinite;
    transition: all .5s ease-in-out;
    overflow: hidden;
}


#videoDiv {
    width: 100%; 
    height: 100vh; 
    min-height: 550px;
    position: relative;
}
#videoBlock {width: 100%; height: 100%;  display: flex;  justify-content: center; align-items: center;}
#videoMessage {
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0 0 0 / 40%);
}

#videoMessage .container {
    margin: 0 auto;
    height: 100%;
}
#videoMessage {
    color:white;
    z-index:99 
    
}
#videoMessage h1{
    color:#ffffff;
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 25px;
}

#videoMessage h3{
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 30px;

}
#videoDiv form{
    max-width: 250px;
}
.bgvideo {
    position: absolute;
    right: 2vw;
    bottom: 0;
    width: 25vw;
}
.bgaudio {
    position: absolute;
    right: 0;
    bottom: 3vw;
    width: 32vw;
}

/*End of Zoom in Keyframes */

.discover {
    font-weight: 900;
    font-size: 30px;
    line-height: 35px;
    color: #FFFFFF;
    margin-bottom: 0;
}

.creatif {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
}

.trending {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    padding: 0;
    margin: 0;
    color: #FFFFFF;
}

.owner {
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    color: #FFFFFF;
}

.search-boxs {
    width: 100%;
    border: 0px solid #bbb;
    background: #fff;
    border-radius: 100px;
    height: 42px;
    margin-top: 25px;
    margin-bottom: 20px;
    padding-left: 20px;
    position: relative;
    display: flex;
}

.search-boxs.inside {
    border: 1px solid #d6d6d6;
        margin: 0;
        
}
.imgresult {
    width: 180px;
    padding: 3px;
    border: 1px solid #a8055d;
    border-radius: 5px;
}
.searchby {
    color: #666;
    display: flex;
    align-items: center;
    /*width: 180px;*/
    width: 260px;
    /* border: 1px solid rgba(12, 18, 28, .38); */
    height: 32px;
    border-radius: 50px;
    justify-content: center;
    border: 1px solid rgba(160, 160, 160, 0.38);
    height: 42px;
    /* box-shadow: 0 2px 4px 0 rgba(12,18,28,.12); */
    font-weight: 500;
    margin-right: 15px;
}
.searchby:focus,
.searchby:hover{
    outline: none;
   
    box-shadow: 0 2px 4px 0 rgba(12,18,28,.12);
}
.searchby *{
    cursor: default;
}
.search-boxs.inside .search-home {
}

.searchby .icon-search {
    width: 21px;
    margin-left: 10px;
    
}
.search-boxs.inside .icon-camera {
    right: 0;
}

.section-search {
    /*position: fixed; */
    /* top: 50px; */
    margin-top: 50px;
    width: 100%;
    /* margin-top: 0; */
    z-index: 1030;
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(12,18,28,.12);
    transition: all .5s ease;
}
.section-search.scrolled{
    top: 0px;
}
.section-searchresult {
   /* margin-top: 50px;
    padding-top: 80px;*/
}
.showfilter {
    /* display: flex; */
    
}
.filterright{
    justify-content: flex-end;
    display: flex;
    /* align-items: flex-end; */
    padding-bottom: 10px;
}
.btn-filter {
border: 1px solid #a8055d;
    color: #fff;
    background: #a8055d;
    font-size: 12px;
    display: flex;
    justify-content: center;
    height: 30px;
    line-height: 30px;
    padding: 0 0;
    align-items: center;
}
.btn-filter:hover{
    color: #fff;
}
.btn-filter i{
    content: url(../images/icon/icon-filter.png);
    margin-left: 10px;
    
}
.search-home {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    background: transparent;
    border: none;
    color: #222;
    height: 100%;
    padding-right: 28px;
}
.icon-camera{
    position: absolute;
    width: 21px;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}
.btn-search {
    /* right: 3px; */
    /* position: absolute; */
    /* top: 3px; */
    /* justify-content: flex-end; */
    margin-right: 3px;
    /*background: #000;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    top: 3px;*/
    transition: all .25s ease;
}

.btn-search img {
    width: 36px;
    height:36px;
}
.btn-search img:hover {
   /*opacity: .7;*/
    filter: brightness(0.8);
}

.search-boxs .dropdown {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-boxs .dropdown-toggle {
    background: #fff;
    white-space: nowrap;
    padding: 6px 8px 6px 15px;
    padding-right: 40px;
    position: relative;
    border: none;
    width: 130px;
    text-align: left;
    display: flex;
    align-items: center;
    /* border-left: 1px solid #ccc; */
    border-left: 1px solid rgba(12, 18, 28, .38);
    font-size: 14px;
    color: #828282;
}

.search-boxs button.dropdown-toggle:focus {
    outline: none;
}

.search-boxs .arrow-dropdown::after {
    content: url(../images/icon/arrow-white-small.png);
    margin: 0;
    position: absolute;
    right: 0px;
    border: none;
    vertical-align: middle;
}

.dropdown-menu {
    margin: 0px 0 0;
    border-radius: 5px 5px;
}
.dropdown-menu.likes {
    border-radius: 3px;
}
.bottom-layer .list-inline a{
	color: #fff;
}
.list-inline .dropdown-menu.likes {
    border-radius: 3px;
    margin-left: -6px;
	top: -6px !important;
}
.dropdown-menu.likes i{
        color: #828282;
    margin-right: 5px;
    width: 18px;
    text-align: center;
}
.dropdown-divider {
    height: 0;
    margin: 2px 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}
.dropdown-menu.likes:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgb(255, 255, 255);
    z-index: 8;
    margin: 0 auto;
    position: absolute;
    left: 6px;
    bottom: -7px;
    /*box-shadow: 0 3px 8px rgba(0, 0, 0, .3);*/
}

.dropdown-menu.share {
    border-radius: 3px;
    width: auto;
    padding: 4px 7px;
    margin-left: -15px;
    transition: all .2s ease-in-out;
    width: 0;
    min-width: 0;
    padding: 0;
}
.dropdown-menu.share.show {
    display: block;
    width: auto;
    min-width: unset;
    /* overflow: hidden; */
    padding: 4px 7px;
}
.share-menu{
    display: flex;
    width: auto;
}
.share .dropdown-item {
    padding: .25rem 5px;
}
.dropdown-menu.share i {
    color: #fff;
    width: 24px;
    text-align: center;
    height: 24px;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #222;
    border-radius: 50px;
        font-size: 12px;
}
.dropdown-menu.share:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgb(255, 255, 255);
    z-index: 8;
    margin: 0 auto;
    position: absolute;
    left: 20px;
    bottom: -7px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: transparent;
    outline: 0;
}

.overlay .dropdown-menu a {
    color: #222;
}
.overlay a.dropdown-item.disabled, .dropdown-item:disabled {
    color: #6c757d;
    pointer-events: none;
    background-color: transparent;
}
.search-boxs .dropdown-menu {
    margin: 8px 0 0;
    border-radius: 5px 5px;
}

.search-home:focus {
    outline-style: none;
}

.head-home .img_owner {
    position: absolute;
    bottom: 20px;
}

#stunt {
    background: #222222;
    width: 100%;
    /* height: 50px; */
    color: #fff;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 20px;
}

#stunt h3 {
    font-size: 20px;
    font-weight: 900;
}

#stunt h3 span {
    font-weight: 400;
}

.stunt-left {
    /*background: lime;*/
    text-align: right;
    padding-top: 4px;
    border-right: 0.5px solid #E5E5E5;
}

.stunt-right {
    /*background: red;*/
}
.arrow {
    width: 20px;
    height: 20px;
    transform: rotate(0deg);
    transition: all .25s ease;
    margin-left: 10px;
}
.arrow.right {
    transform: rotate(-90deg);
}
.creatif {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
}

.find_plan {
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    transition: .25s ease;
    color: #FFFFFF;
    border-left: 1px solid #e5e5e5;
    padding-left: 12px;
    margin-left: 7px;
}
.find_plan img{
    transition: all .35s ease;
}
.find_plan:hover img{
        transform: translateX(7px);
}
.find_plan:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.icon-plan {
    color: #A8055D;
}

.stunt-right i {
    position: relative;
    top: 2px;
}

.amaze-box {
    margin-top: 30px;
}

.amazing {
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    color: #000000;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.ul-cat {
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    display: flex;
}

.li-cat {
    float: left;
    padding: 18px 15px;
    /*width: 190px;*/
    width: 15.5%;
    /* height: 60px; */
    text-align: center;
    /* background: red; */
    border-radius: 5px;
    transition: .8s ease;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: .25s ease;
    /* display: flex; */
    justify-content: center;
    vertical-align: middle;
}

.li-cat:hover,.li-cat.active {
    box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transition: .8s ease;
    background: #A8055D;
}

.li-cat:active {
    position: relative;
    top: 2px;
}

.cat {
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
}

.cat:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.amaze-box .cat-boxs {
    margin-top: 40px;
    margin-bottom: 40px;
}

.btn-cat {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 5px;
    opacity: .99;
}

/*.tren-text {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #000000;
}

.cat-blur-dld {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #BBBBBB;
}

.cat-blur {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: .8s ease;
    transition: .5s ease;
    color: #BBBBBB;
}

.cat-blur:hover {
    color: #BBBBBB;
    opacity: 0.7;
    transition: .8s ease;
}
*/
.blur-end {
    border-right: 1px solid #BBBBBB;
}

.view-more {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    transition: .8s ease;
    color: #222222;
}

.view-more:hover {
    color: #222222;
    opacity: 0.8;
    transition: .8s ease;
}

.view-more:active {
    position: relative;
    top: 2px;
}

.ul-trend {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.li-trend {
    float: left;
    margin-right: 8px;
    padding-right: 8px;
    cursor: pointer;
    line-height: 25px;
}
.li-trend a{
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #BBBBBB;
    transition: all .25s ease;
}
.li-trend a:hover{
    color: #000;
    text-decoration: none !important;
}
.li-trend a.active{
    font-weight: bold;
    color: #000;
}

.tren-left {
    /*background: lime;*/
}

.tren-right {
    /*background: red;*/
    text-align: right;
}


/*------------------------------------------------about----------------------------------------*/


/*<style>*/

#about1 {
    height: 300px;
    width: 100%;
    /*background: lime;*/
}

.about_head {
    /*background: red;*/
    height: 300px;
}

.about-box1 {
    padding-top: 90px;
    position: relative;
}

.capturing {
    font-weight: 900;
    font-size: 30px;
    line-height: 35px;
    color: #FFFFFF;
}

.comunity {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
}

.about-link {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
}

.about-link:hover {
    color: #FFFFFF;
    opacity: 0.8;
}

.about-link:active {
    position: relative;
    top: 2px;
}

.get-start {
    width: 120px;
    height: 30px;
    background: #F1F2F2;
    border-radius: 100px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #222222;
}

.get-start:hover {
    transition: 1s ease;
    opacity: 0.8;
    color: #222222;
}

.get-start:active {
    position: relative;
    top: 2px;
}

.about-box1 button {
    margin-top: 10px;
}

.about-box1 .owner {
    display: flex;
    margin-top: 50px;
}

.about-h-img {
    width: 100%;
    object-fit: cover;
    height: 300px;
    position: absolute;
}


/*</style>*/


/*<style>*/

#about2 {
    /*background: lime;*/
}

.about-title {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #222222;
}

.about-grey {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #828282;
}

.detail-abt2 {
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 35px;
    color: #222222;
}

.photo-btn {
    width: 223px;
    height: 30px;
    background: #A8055D;
    border-radius: 24px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.photo-btn:hover {
    opacity: 0.8;
    transition: 1s ease;
    color: #FFFFFF;
}

.photo-btn:active {
    position: relative;
    top: 2px;
}

.abt2-desc {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #222222;
}

.about2-box {
    margin-top: 40px;
    margin-bottom: 30px;
}

.abt2-box button {
    margin-top: 20px;
}

.about2s-left {
    padding: 20px;
}

.about2s-right {
    padding: 20px;
}


/*</style>*/


/*<style>*/

#abt3 {
    background: #222222;
    mix-blend-mode: multiply;
    height: 300px;
    width: 100%;
}

.abt3-box {
    padding-top: 60px;
    padding-bottom: 20px;
}

.title-benefit {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
}

.title-reward {
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
}

.details-reward {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    height: 80px;
    margin-bottom: 30px;
}

.trans-about {
    min-width: 120px;
    height: 30px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    transition: .35s ease;
    color: #FFFFFF;
}

.trans-about:hover {
    color: #FFFFFF;
    opacity: 0.8;
    transition: 1s ease;
}

.trans-about:active {
    position: relative;
    top: 2px;
}


/*</style>*/


/*<style>*/

#abt5 {
    /*background: lime;*/
    padding-top: 50px;
    padding-bottom: 50px;
}

.abt5-box {
    /*background: red;*/
    text-align: center;
    padding-left: 140px;
    padding-right: 140px;
}

.abt5-inside p {
    margin-top: 30px;
}

.abt5-galerry {
    /*background: blue;*/
    padding-top: 70px;
    padding-bottom: 50px;
    padding-left: 50px;
}

.justice {
    justify-content: space-between;
    display: flex;
}


/*</style>*/


/*<style>*/

#abt4 {
    height: 400px;
    width: 100%;
}

.about-earn-img {
    max-height: 400px;
    min-height: 400px;
    width: 100%;
    position: absolute;
}

.about_earn {
    padding-top: 100px;
}

.about_earn_box .save {
    margin-bottom: 20px;
    margin-top: 30px;
}

.about_earn_box button {
    margin-bottom: 10px;
    margin-top: 10px;
}


/*</style>*/


/*---------------------------------------become contributor--------------------------------------*/


/*<style>*/

#becom-contrib {
    /*background: lime;*/
    height: 300px;
}

.becom-contrib {
    /*background: red;*/
    height: 300px;
    padding-top: 100px;
    position: relative;
}

.header-bcem {
    position: absolute;
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.contribss-box {
    /*background: blue;*/
    height: 200px;
}

.contribss-box .img_owner {
    position: absolute;
    bottom: 20px;
}

.contribss-box button {
    margin-top: 10px;
}

.get-starts {
    min-width: 120px;
    height: 30px;
    text-align: left;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #222222;
    padding-left: 15px;
    border: 1px solid #bbb;
    background: #F1F2F2;
    border-radius: 17px;
    transition: 1s ease;
    position: relative;
}

.sign-textss {
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    /* identical to box height */
    transition: 1s ease;
    color: #FFFFFF;
}

.sign-textss:hover {
    opacity: 0.8;
    transition: 1s ease;
    color: #FFFFFF;
}

.sign-textss:active {
    position: relative;
    top: 2px;
}

.get-starts:hover {
    color: #ffffff;
    background: #222222;
    transition: 1s ease;
    border: none;
}

.get-starts:after {
    content: '\f105';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    /* Fix version 5.0.9 */
    font-size: 14px;
    position: absolute;
    top: 5px;
    right: 4px;
    color: #ffffff;
    pointer-events: none;
    background: #A8055D;
    display: inline-block;
    border-radius: 100%;
    padding: 1px 6px;
}

.get-starts:active {
    position: relative;
    top: 2px;
    color: #ffffff;
    background: #222222;
}

.get-starts:focus {
    outline-style: none;
}

.joinx {
    min-width: 117px;
    height: 30px;
    background: #A8055D;
    border-radius: 24px;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.joinx:focus {
    outline-style: none;
}

.joinx:hover {
    transition: 1s ease;
    background: #8f044f;
    color: #FFFFFF;
}

.joinx:active {
    position: relative;
    top: 2px;
}

#bcme-col {
    margin-top: 50px;
}

.bcme-col {
    position: relative;
    /*background: lightblue;*/
    margin-bottom: 50px;
}

.bcme-detail-box {
    /*background: lime;*/
    width: 839px;
}

.bcme-detail {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    padding: 0;
    margin: 0;
    color: #222222;
}

.bcme-col button {
   margin-left: auto;
}

.bcme-title {
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    line-height: 23px;
    color: #222222;
}



.img-bcme {
    max-width: 100%;
    max-height: 330px;
    border-radius: 5px;
    object-fit: cover;
    box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.66);
}

.bcme-left-img {
    /*background: red;*/
    margin-bottom: 30px;
    padding-right: 0;
}

.bcme-right-img {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    
}

.become-desc-box {
    width: 310px;
    padding-left: 60px;
}

.become-desc-box h3 {
    margin-bottom: 30px;
}

.bcome-desc button {
    margin-top: 20px;
}

.become-sign {
    border: 1px solid #BBBBBB;
    box-sizing: border-box;
    border-radius: 14px;
    font-weight: bold;
    color: #222222;
    width: 120px;
}

.become-sign:hover {
    color: #ffffff;
    background: #222222;
}

.become-sign:focus {
    outline-style: none;
}

.become-sign:active {
    position: relative;
    top: 2px;
}


/*</style><style>*/

.bcme-right2 {
    /*background: red;*/
    margin-bottom: 20px;
}

.bcme-left2 {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    margin-left: 120px;
}

.bcme-left2 h3 {
    margin-bottom: 20px;
}

.bcme-left2 button {
    margin-top: 20px;
}


/*</style>*/


/*<style>*/

.bcme-gall-box {
    /*background: lime;*/
    width: 100%;
    padding: 5px;
    justify-content: space-between;
    display: flex;
}

.becme-galerry {
    width: 230.07px;
    height: 230.07px;
    /*border: 1px solid red;background: grey;*/
    margin-right: 5px;
    margin-left: 5px;
    float: left !important;
    position: relative;
    border-radius: 5px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.becme-galerry img {
    position: absolute;
    min-width: 215.07px;
    min-height: 230.07px;
    max-width: 215.07px;
    max-height: 230.07px;
    border-radius: 5px;
    object-fit: cover;
}

.becme-galerry span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.technologys {
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    line-height: 23px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
}

.technology-link {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 23px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    opacity: 1;
    color: #FFFFFF;
}

.technology-link:hover {
    opacity: 0.8;
    color: #FFFFFF;
}

.technology-link:active {}

.become-layer {
    background: #222222;
    opacity: 0;
    width: 100%;
    border-radius: 5px;
    height: 100%;
    transition: 1s ease;
}

.become-layer a {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%);
}

.becme-galerry .become-layer:hover {
    opacity: 0.6;
    transition: 1s ease
}

.becme-galerry:hover span {
    display: none;
    transition: 1s ease;
}

.becme-galerry:hover {
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25), 0px 19px 38px rgba(0, 0, 0, 0.3);
}

.popular-box {
    margin-top: 20px;
    margin-bottom: 20px;
}

.popular {
    font-style: normal;
    font-weight: 900;
    font-size: 18px;
    color: #222222;
}


/*</style>*/


/*<style>*/

#section-bcm4 {
    background: lime;
    height: 370px;
    margin-top: 40px;
    position: relative;
}

.header-becm {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 370px;
    z-index: -1;
}

.bcmstart {
    margin-top: 100px;
    /*background: red;*/
    height: 270px;
    width: 350px;
}

.bcmstart button {
    margin-bottom: 15px;
    margin-top: 20px;
}



.becme-galerry-explore {
    width: 230.07px;
    height: 230.07px;
    border: 0.5px solid #A8055D;
    position: relative;
    border-radius: 5px;
    text-align: center;
}

.becme-galerry-explore a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.exploremore-link {
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #A8055D;
}

.exploremore-link:hover {
    color: #A8055D;
    opacity: 0.8
}

.exploremore-link:active {}




/*----------------------------------------become contrib home form-----------------------------------------*/


#bcm-form {
    /*background: url(../images/bg_become_contrib.jpg) no-repeat center / cover;*/
    background: url(../images/becomecontributor/background.jpg) no-repeat center / cover;
    padding-top: 80px;
    /*background-attachment: fixed;*/
    background-position: center;
}

.bmc-form {
    max-width: 920px;
   
}

.want-bcm-title {
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    color: #FFFFFF;
    margin-bottom: 0;
}

.want-bcm-box {
    background: #222222;
    padding: 10px 30px;
}

.basic-bcm {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 42px;
    display: flex;
    align-items: center;
    color: #828282;
}

.bcm-content {
    background: #ffffff;
    padding: 20px 30px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.basicss-box {
    margin-bottom: 20px;
}


/*</style>*/


/*<style>*/

.input-bcm-box {
    background: #F2F2F2;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    height: 45px;
    position: relative;
    margin-bottom: 20px;
}

.input-bcm-label {
    font-size: 11px;
    line-height: normal;
    color: #828282;
    margin-bottom: 0px;
}

.input-bcm {
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    text-align: right;
    width: 100%;
    color: #000000;
    background: transparent;
    border: none;
    padding-right: 10px;
}

.input-bcm {
    outline-style: none;
}

.input-bcm-box .input-bcm {
    position: absolute;
    right: 2px;
    top: 5px;
}

.input-bcm-box .input-bcm-label {
    position: absolute;
    left: 2px;
    top: 2px;
}


/*</style>*/


/*<style>*/

.prf-bcm {
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    /*background: lime;*/
    position: relative;
    height: 175px;
    margin-bottom: 20px;
}

.bcm-detail {
    position: absolute;
    right: 100px;
    top: 30px;
}

.bcm-detail p {
    padding: 0;
    margin: 5px;
}

.bcm-detail button {
    margin-top: 15px;
}

.bcm-img {
    position: absolute;
    left: 80px;
    top: 23px;
    background: #C4C4C4;
    width: 130px;
    height: 130px;
    border-radius: 50%;
}

.bcm-img img {
    object-fit: cover;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.prf-bcm label {
    position: absolute;
    top: 4px;
    left: 4px;
}

.ulpoad-btn {
    width: 120px;
    height: 30px;
    background: #A8055D;
    border-radius: 100px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.ulpoad-btn:focus {
    outline-style: none;
}

.ulpoad-btn:hover {
    color: #FFFFFF;
    background: #750642;
    transition: 1s ease;
}

.ulpoad-btn:active {
    position: relative;
    top: 2px;
}


/*--------------------------------------------------profile edit contributor-----------------------------------*/

#file-upload{
position: absolute;
background: transparent;
height: 100%;
width: 100%;
opacity: 0;

}

.remove{
color: #ffffff;
position: absolute;
top: 10px;
cursor: pointer;
left: 7.5rem;
border: 1px solid #bbb;
padding: 1px 8px;
border-radius: 100%;
background:#222222  ;
}

.bcm-textarea-box {
    background: #F2F2F2;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    height: 175px;
    padding-top: 20px;
}

.bcm-textarea-box label {
    position: absolute;
    top: 2px;
    left: 4px;
}

.bcm-textarea-box textarea {}

.bcm-textarea {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
}

.bcm-textarea:focus {
    outline-style: none;
}


/*</style>*/


/*<style>*/

.input-bcm-box-select {
    background: #F2F2F2;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    height: 45px;
    position: relative;
    margin-bottom: 20px;
}

.input-bcm-box-select:after {
    content: '\f107';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    /* Fix version 5.0.9 */
    font-size: 14px;
    position: absolute !important;
    top: 11px;
    right: 5px;
    color: #ffffff;
    pointer-events: none;
    background: #111111;
    display: inline-block;
    border-radius: 100%;
    padding: 0.8px 7px;
}

.bcm-select {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    text-align: right;
    direction: rtl;
    color: #000000;
    padding-right: 35px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.bcm-select:focus {
    outline-style: none;
}

.input-bcm-box-select select {
    position: absolute;
    left: 0;
}

.options {
    font-weight: bold !important;
    color: #fff !important;
    background: #bc0000 !important;
    text-transform: uppercase;
}


/*</style>*/


/*<style>*/

.bcm-term-left {
    /*background: lime;*/
    padding-top: 20px;
}

.bcm-term-right {
    /*background: lightblue;*/
    text-align: right;
    padding: 0;
    margin: 0;
}

.bcm-sign {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
}

.term {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #A8055D;
}

.term:hover {
    color: #A8055D;
    opacity: 0.8;
    transition: 1s ease;
}

.term:active {
    position: relative;
    top: 2px;
}


/*</style>*/


/*----------------------------------list category----------------------------------------------------*/


/*<style>*/

.list-cat-header-box h3 {
    margin-top: 30px;
}

.list-cat-header {
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 35px;
    color: #222222;
}

.list-cat-detail {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #222222;
}

.list-cat-detail-link {
    transition: 1s ease;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #828282;
}

.list-cat-detail-link:hover {
    opacity: 0.8;
    transition: 1s ease;
    color: #828282;
}

.list-cat-detail-link:active {
    position: relative;
    top: 2px;
}

.list-cat-inside {
    /*background: lime;*/
    width: 660px;
    margin-top: 10px;
    margin-bottom: 25px;
}


/*</style>*/


/*<style>*/

.cat-list-justify {
    /*background: red;*/
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    justify-content: space-between;
    display: flex;
}

.cat-list-box {
    /*background: lime;*/
    width: 265px;
    height: 192px;
    border-radius: 5px;
    float: left;
    position: relative;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 5px 5px rgba(0, 0, 0, 0.3);
}

.cat-list-box:hover {
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25), 0px 19px 38px rgba(0, 0, 0, 0.3);
}

.cat-layer {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    opacity: 0.4;
    height: 100%;
    width: 100%;
    position: relative;
    opacity: 0;
    transition: 1s ease;
}

.cat-layer:hover {
    opacity: 1;
    transition: 1s ease;
}

.cat-layer .cat-up-lay {
    position: absolute;
    top: 10px;
    left: 20px;
}

.cat-layer .cat-mid-lay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cat-layer .cat-bot-lay {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.ul-cat-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
        margin-left: -7px;
}

.li-cat-list {
    /*margin-right: 20px;
    float: left*/;
    width: 32px;
}

.cat-list-title {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.cat-list-title:hover {
    color: #FFFFFF;
    opacity: 0.8;
    transition: 1s ease;
}

.cat-list-title:active {
    position: relative;
    top: 2px;
}

.cat-list-link {
    transition: .25s ease;
    color: #FFFFFF;
    padding: 10px 7px 0;
        display: flex;
}

.cat-list-link:hover,.cat-list-link[aria-expanded="true"] {
  color: #FFFFFF;
    /*opacity: .5;*/
    /* transition: 1s ease; */
}

.cat-list-link:active {
    position: relative;
    top: 2px;
}

.mid-explore {
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 5px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.mid-explore:hover {
    color: #FFFFFF;
    opacity: 0.8;
}

.mid-explore:active {
    position: relative;
}

.mid-explore:focus {
    list-style-type: none;
}

.cat-img-card {
    object-fit: cover;
    width: 265px;
    height: 192px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
}


/*</style>*/


/*<style>*/

.cat-list-box-more {
    width: 265px;
    height: 192px;
    /*background: lime;*/
    background: transparent;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 5px 5px rgba(0, 0, 0, 0.3);
    border: 0.5px solid #A8055D;
    box-sizing: border-box;
    position: relative;
    border-radius: 5px;
    transition: 1s ease;
}

.cat-list-box-more:hover {
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25), 0px 19px 38px rgba(0, 0, 0, 0.3);
    transition: 1s ease;
}

.more-link {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    transition: 1s ease;
    color: #A8055D;
    border-radius: 5px;
}

.more-link:hover {
    color: #A8055D;
    transition: 1s ease;
    opacity: 0.8;
}

.more-link:active {
    position: relative;
    top: 2px;
}

.cat-list-box-more .more-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*</style>*/


/*---------------------------------------------list cat more--------------------------------------------------------*/


/*<style>*/

.cat-more-header {
    /*background: lime;*/
    margin-top: 80px;
    margin-bottom: 10px;
}

.ul-cat-more {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
    bottom: 23px;
    left: 60px;
}

.li-cat-more {
    float: left;
    margin-right: 10px;
}

.more-cat-link {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #A8055D;
}

.more-cat-link:hover {
    opacity: 0.8;
    color: #A8055D;
}

.more-cat-link:active {
    position: relative;
    top: 2px;
}



.main_box {
    /*background: lime;*/
    margin-top: 20px;
    width: 100%;
    height: 100%;
}

.main_row {
    /* display: grid; */
    /* grid-gap: 20px; */
    /* grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); */
    /* grid-auto-rows: 235px; */
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));
    grid-auto-rows: 260px;
}

.main_potrait {
    width: 100%;
    position: relative;
    border-radius: 5px;
    /*background: yellow;*/
    grid-row-end: span 2;
}

.main_landscape {
    width: 100%;
    position: relative;
    border-radius: 5px;
    /*background: lightblue;*/
    grid-row-end: span 1;
    overflow: hidden;
}

.img-mains {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    position: absolute;
    object-fit: cover;
    grid-row-end: span 1;
   /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 5px 5px rgba(0, 0, 0, 0.3);*/
    transition: .5s ease;
}

.main-layer {
    position: relative;
    opacity: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transition: .35s ease;
    display: inherit;
    background-color: rgba(0, 0, 0, 0.6);
}

.main-layer:hover {
    opacity: 1;
   /* box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);*/
}

.main-layer .upper-layer {
    width: 100%;
    position: absolute;
    top: 15px;
    left: 0;
    padding: 0 15px;
}

.main-layer .midder-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-layer .bottom-layer {
    width: 100%;
    position: absolute;
    bottom: 15px;
    left: 0;
    padding: 0 15px;
}



/*-------------------------------------image details--------------------------------------------------*/



.box-img-desc-left {
    
    margin-left: 0;
    padding: 0;
    position: relative;
    border-radius: 5px;
}

.box-img-desc-right {
    padding-left: 20px;
}
.imgwrapper {
    background: #000;
    border-radius: 5px 5px 0 0;
    height: 375px;
}
.imgwrapper img{
    
}

.ul-img-dwnlod {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.li-img-dwnlod {
    padding: 2px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 10px;
    border: 1px solid rgba(187, 187, 187, .5);
    box-sizing: border-box;
    border-radius: 5px;
    height: 29px;
    cursor: pointer;
    transition: .2s ease;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.li-img-dwnlod:hover {
   /* opacity: 0.8;
    transition: 1s ease;*/
}

.li-img-dwnlod:active {
   /* position: relative;
    top: 2px;*/
}

.inider-img-detail {
    background: #fff !important;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    border-radius: 0px 0px 5px 5px;
    width: 100%;
}
.buttonwrapper{
    height: 50px;  
    display: flex;
    align-items: center!important;
    justify-content: flex-end;
}

.box-img-desc-left .inider-img-detail {
   /* position: absolute;
    bottom: 0;
    left: 0;*/
        position: relative;
}

.link-iconimg {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #222222;
}

.link-iconimg:hover {
    text-decoration: none;
    color: #222222;
}

.report-link {
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    transition: 1s ease;
    color: #BBBBBB;
}

.report-link:hover {
    color: #BBBBBB;
    opacity: 0.8;
    transition: 1s ease;
}

.report-link:active {
    position: relative;
    top: 2px;
}

.inider-img-detail .report-link {
    position: absolute;
    right: 20px;
    top: 20px;
}

.img-download-cardd {
    position: relative;
    left: 0;
    top: 0;
    border-radius: 5px 5px 0px 0px;
    height: auto;
    width: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
    height: 100%;
}
.img-download-cardd.portrait {
    object-fit: contain;
}

.back_search {
    /*background: lime;*/
    margin-top: 80px;
    margin-bottom: 30px;
}

.back_search_link {
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
    transition: 1s ease;
    cursor: pointer;
    color: #222222;
}

.back_search_link:hover {
    color: #222222;
    opacity: 0.8;
    transition: 1s ease;
}

.back_search_link:active {
    position: relative;
    top: 2px;
}




.imagetable{
    padding-top: 0;
    border-top: 0;
    margin-top: 0;
    height: 369px;
}
.th-licence {
font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #BBBBBB;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding: 9px 10px 10px;
}

.licence-option {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #222222;
    /*
    margin-top: 10px;
    margin-bottom: 8px;*/
}

.licence-option-xs {}

.xs-circle {
    background: linear-gradient(#222222, #000000);
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    margin: auto;
    font-size: 10px;
    padding: 12px;
    display: flex;
    height: 10px;
    width: 10px;
    color: #fff;
    line-height: 1;
    font-weight: 500;
}

.licence-option {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #222222;
}
.sectioncontent{
    display: none;
}
.imagetable .licence-option {

    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
        padding: 5px 10px;
}
.modaldownload .licence-option {
    justify-content: left;
}
.licence-option.text-left{
    justify-content: left;
}
.licence-option.option-title{
    justify-content: left;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 32px;
    padding-top: 11px;
}
.box-summary{
    border: 1px solid #828282;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
    font-size: 12px;
}
.box-summary p{
    margin-bottom: 7px;
}
.box-summary p:last-child{
    margin-bottom: 0px;
}

.ul-standard {
    list-style-type: none;
    padding-left: 0px;
    margin: 0;
    display: flex;
    margin-left: 0px;
    margin-bottom: 10px;
}
.ul-standard li:last-child{
    margin-right: 0 !important;
}
.li-standard {
    /*float: left;*/
    padding: 7px 10px;
    margin-right: 7px;
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s ease
}

.li-standard:hover {
}

.li-standard:active {
    position: relative;
    
}
.li-standard.nav-item:first-child {
    border-left: 0.5px solid rgba(0, 0, 0, 0.15) !important;
}
.link-standar {
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #BBBBBB;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease
}
.link-standar.active:before{
    content: url(../images/icon/check.svg);
    margin-right: 7px;
}
.fa-check-circle{
    font-size: 24px;
}
.link-standar:hover {
    color: #222222;
    text-decoration: none;
}

.link-standar:active,.link-standar.active {
    color: #222222;
    text-decoration: none;
}

.download-btn {
    font-weight: normal;
    font-size: 14px;
    min-width: 150px;
    color: #FFFFFF;
    background: #A8055D;
    border-radius: 100px;
    transition: .1s ease;
}

.download-btn:hover {
    color: #FFFFFF;
    background: #6e093f;
}

.download-btn:active {
    position: relative;
    top: 2px;
}

.imgdetail-dwnld {
    text-align: right;
}

.radio-standard-box {
    /*background: lime;*/
    padding-top: 8px;
}

.radio-standard {
    width: 15px;
    height: 15px;
}

.ques {
    color: #A8055D;
    font-size: 11px;
}



.title-details-box {
    margin-bottom: 10px;
    max-width: 50%;
}

.title-details-head {
    font-style: normal;
    font-weight: 900;
    /* font-size: 20px; */
    line-height: normal;
    color: #222222;
    text-transform: capitalize;
}

.title-inside-box {
    /*background: red;*/
    position: relative;
    height: 70px;
}

.label-detailss {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 12px;
    color: #BBBBBB;
    margin-bottom: 4px;
    margin-top: 0;
}

.title-inside-box .detail-left {}

.title-inside-box .detail-mid {
    position: absolute;
    left: 250px;
    top: 0;
    /*background: lightblue;*/
}

.title-inside-box .detail-right {
    position: absolute;
    left: 450px;
    top: 0;
    /*background: pink;*/
}

.img-detail-prf {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background: #C4C4C4;
}

.detail-left {
    position: relative;
    /*background: yellow;*/
}

.detail-left .leftss {
    /*background: green;*/
    position: absolute;
}

.detail-left .rightss {
    /*background: blue;*/
    position: absolute;
    left: 60px;
}

.nmme-detaail {
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    color: #A8055D;
    padding: 0;
    margin: 0;
}



.image-summary .blog-info {
    align-items: start;
}
.image-summary .avatar {
    width: 50px;
    height: 50px;
}
.image-summary .blog-info a {
    font-weight: 600;
    color: #A8055D;
}
.image-summary label {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 12px;
    color: #BBBBBB;
    margin-bottom: 4px;
    margin-top: 0;
}
.image-summary h5{
    font-size: 18px;
}
.image-summary  a {
    color: #A8055D;
}
.image-summary  a:hover {
    text-decoration: underline;
}

.place-detaail {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    padding: 0;
    margin: 0;
    color: #222222;
}

.product-detail {
    font-weight: bold;
    font-size: 12px;
    color: #222222;
}

.ul-link-det {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
    bottom: 5px;
}

.li-link-det {
    float: left;
    margin-right: 10px;
}


/*</style>*/


/*<style>*/

.img-more-box {
    /*background: lime;*/
    margin-bottom: 20px;
    margin-top: 40px;
}

.img-detail-more {
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #828282;
}

.img-detail-more:hover {
    opacity: 0.8;
    color: #828282;
}

.img-detail-more:active {
    position: relative;
    top: 2px;
}


/*</style>*/


/*------------------------------------------download image modal-----------------------------------*/


/*<style>*/

.subscribe-detaail {
font-style: normal;
    font-weight: 900 !important;
    font-size: 20px;
    line-height: normal;
    color: #222222;
}

.modal-img {
/*    width: 437px;*/
    /*background: lime;*/
    margin-bottom: 20px;
   /* margin-left: 13px;*/
}

.old.modal {
    position: relative;
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

.old.modal-content {
    background: #FFFFFF;
    width: 25%;
    padding: 20px;
    padding-top: 40px;
    position: relative;
}
.modal hr,
.content_left_wrapper .modal hr{
    margin-left: 0;
    margin-right: 0;
}
.modal.fade{
  opacity:1;
}
.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.modal.fade .modal-dialog {
   -webkit-transform: translate(0);
   -moz-transform: translate(0);
   transform: translate(0);
   transition: transform .1s ease-out,-webkit-transform .1s ease-out;
}

.modal .modal-content {
    border-radius: 0;
    border: 0px solid white;
    background: white;
}
.modal-dialog{
    max-width: 600px;
}
.modal-body {
    padding: 25px;
}
.modal-img-dwd {
    /*background: red;*/
    margin-bottom: 15px;
}

.modal-img-dwd .subscribe-detaail {
    margin-bottom: 0px;
}

.modal-img-plan {
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    background: #EEEEEE;
    border-radius: 5px;
}

.modal-img-plan .radio-standard {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.modal-backdrop {
    background-color: rgba(12,18,28,.38);
}
.modal-backdrop.show {
    opacity: 1;
}



.modalregister .modal-dialog {
    max-width: 1150px;
}
.modalregister .modal-content {
    border-radius: 0;
    border: 0;
}
.modalregister .modal-body {
    padding: 0px;
    background: #222;
}
.modal-left {
    width: 100%;
    color: #fff;
    margin-left: auto;
    padding-top: 70px;
    padding-bottom: 70px;
    background: #222;
}
.modalregister .login-wrapper {
    margin-left: auto;
    margin-right: auto;
}
.modalregister .modal-right .login-wrapper {
    width: 343px;
    color: #222;
    padding-top: 35px;
    padding-bottom: 35px;
}
.modal-right{
    background: #fff;
    color: #222;
        margin-right: -1px;
        position: relative;
}
.modal-right .login-wrapper input[type=text], 
.modal-right .login-wrapper input[type=password], 
.modal-right .login-wrapper input[type=email], 
.modal-right .login-wrapper select, .login-wrapper text {
    width: 100%;
    padding: 11px;
    border: 1px solid #C2C2C2;
    border-radius: 7px;
    background: #fff;
}
.modal-right .or:before {
    border-top: 1px solid #c2c2c2;
    width: 150px;
}
.modal-right .or:after {
    border-top: 1px solid #c2c2c2;
    width: 150px;
}
.modal-right .jrbtn2 ,
.modal-right .jrbtn3 
{
    height: 45px;
    transition: all .2s ease;
}
.modal-right .jrbtn2 button {
    border: 0px solid #fff;
    background: #3d5a97;
    color: #fff;
    transition: all .2s ease;
}
.modal-right .jrbtn2 button:hover {
    background: #344d82;
}
.modal-right .jrbtn3 button {
    border: 0px solid #fff;
    background: #dc4c3f;
    color: #fff;
    transition: all .2s ease;
}
.modal-right .jrbtn3 button:hover {
    background: #b13e34;
}
.modal-right .agree-policy {
    color: #828282;
}

.modalregister .button-kreatif {
    min-width: 170px;
}
.modalregister .close {
    margin-right: 15px;
    margin-top: 15px;
}



.modalbilling .modal-dialog {
    max-width: 926px;
}
.modalbilling  .modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 20px;
    font-weight: 400;
    color: #828282;
}
.modalbilling  .modal-title.center {
    margin: 0 auto;
}
.modalbilling .modal-header{
    padding: 20px 30px;
    padding: 20px 30px;
    border-radius: 0;
    border: 0;
}
.modalbilling .modal-body{
    padding: 0px 30px;
}
.modalbilling .modal-footer{
    padding: 20px 30px;
        border: 0;
}
.modalbilling  .formgroup .form-control {
    /* text-align: left; */
    /* padding-left: 0; */
    /* height: auto; */
    /* line-height: unset; */
}
.modalbilling .formgroup select.form-control {
    /* width: 100%; */
    /* background: url(../images/icon/arrow.svg) no-repeat; */
    /* background-position: top 0px right; */
    /* background-size: 20px; */
    /* padding: 5px; */
    /* margin-left: -5px; */
    /* margin-right: -5px; */
    /* width: calc(100% + 5px); */
}
.modalbilling .formgroup {
    /* background: #f2f2f2; */
    /* padding: 5px; */
    /* border-radius: 5px; */
    /* position: relative; */
    /* margin-bottom: 15px; */
    /* display: flex; */
    /* justify-content: flex-start; */
}
.modalbilling .formgroup.no-label {
   
    padding: 0 7px;
    justify-content: center;
}


#add-collection .modal-dialog {
    max-width: 430px;
}
.modal .close {
    position: absolute;
	right: 16px;
    top: 14px;
    padding: 0;
    margin: 0;
    font-size: 30px;
    line-height: 7px;
    font-weight: 300;
    z-index: 10;
}
.right-wrapper{
    min-height: 100%;
}

#add-collection .modal-footer {
    padding: 20px 30px;
    border: 0;
    display: block;
    text-align: center;
}
#add-collection .btn {
   /* min-width: 230px;*/
}

.btn-cancel{
    color: #828282;
}

.modalinfo .modal-dialog{
   max-width: 926px;
}






/** END MODAL ***/
.top-wrapper {
    padding-bottom: 20px;
}
.modalbilling hr {
    margin: 15px -30px 10px;
}
.groupinfo {
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
}
.groupcol{
    padding: 6px 15px;
    display: flex;
    align-items: center;
}
.grouprow {
    padding: 10px 25px;
}
.groupbody.grouprow{
    border-top:1px solid  #f2f2f2;
}
.groupheader{
    color: #828282;
    font-size: 11px;
}
.radioplan {
    margin-left: 20px;
}
.btn-plan {
    padding: 25px;
}
.all {
    border: 1px solid #A8055D;
    box-sizing: border-box;
    color: #A8055D;
}

.all:hover {
    color: #A8055D;
    opacity: 0.8;
}

.buy {
    background: #A8055D;
    color: #FFFFFF;
}

.buy:hover {
    background: #5c0b37;
    color: #FFFFFF;
}

.all:active,
.buy:active {
    position: relative;
    top: 2px;
}

.all:focus,
.buy:focus {
    outline-style: none;
}

.closer {
    color: #ffffff;
    opacity: 0.8;
    cursor: pointer;
    font-size: 12px;
    background: #000000;
    padding: 1px 8px;
    border-radius: 50%;
    transition: 1s ease;
}

.closer:hover {
    opacity: 1;
    transition: 1s ease;
}

.modal-content .closer {
    position: absolute;
    right: 10px;
    top: 10px;
}



/*---------------------------------------------plan and pricing ------------------------------------*/



#plan1 {
    /*background: lime;*/
    padding-top: 60px;
    padding-bottom: 40px;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.plan-boxsss {
    padding-bottom: 20px;
    padding-top: 20px;
}

.plan-wrapper {
    margin: 0 -25px;
}

.plan-boxsss .plan-item {
    padding: 0 25px;
    margin: 0 auto;
}
.plan-item-info {
    min-height: 260px;
}

.tilte-plan {
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    color: #222222;
    margin-bottom: 15px;
}

.plan-details {
margin-bottom: .25rem;
}

.ul-plan {
    padding-left: 20px;
    margin-bottom: 40px;
}

.li-plan {
    padding: 0;
    margin: 0;
}

.plan-package {
    background: #F2F2F2;
    border: 1px solid #F2F2F2;
    /* box-sizing: border-box; */
    border-radius: 5px;
    width: 100%;
    height: 640px;
    padding: 20px;
    position: relative;
}

.title-package {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    color: #222222;
    margin-bottom: 18px;
    text-transform: capitalize;
}


.plan-package button {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

.planss {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: normal;
    color: #000000;
    margin-bottom: 0px;
}

.planns-box {
    position: relative;
 
}


.radioplan {
    width: 16px;
    height: 16px;
}

.planns-box input[type=radio] {
    position: absolute;
    right: 15px;
    top: 15px;
}

.plan-rm {
 font-weight: bold;
    font-size: 20px;
    line-height: 100%;
    display: flex;
    margin: 0;
    color: #A8055D;
}

.mtxx {
    margin-top: 20px;
}

.purchase-plan {
    width: 200px;
    height: 30px;
    background: #A8055D;
    border-radius: 24px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.purchase-plan:hover {
    color: #FFFFFF;
    transition: 1s ease;
    opacity: 0.8;
}

.purchase-plan:active {}

.plan-package .title-package {
    margin-bottom: 25px;
}




/*--------------------------------------download image detil-------------------------------------------------*/


#dld-img {
    margin-bottom: 100px;
}
.page-imagedownload{
    padding-top: 80px;
}

.metainfo {
    display: flex;
    padding: 10px 0;
}

.dld-title-box {
    /*background: lime;*/
    margin-top: 100px;
    margin-bottom: 10px;
}

.meta-dld-id {
    padding-right: 30px;
}

.meta-dld-id p {

}

.meta-dld-detail {

}

.ul-dld-meta {
    list-style-type: none;
    padding: 0;
    margin: 0;
	    margin-top: -3px;
}

.ul-dld-meta li {
    /*border-right: 1px solid #222222;*/
    display: inline-block;
    position: relative;
    margin-right: 10px;
}
.ul-dld-meta li:not(:last-child):after{
    content: '';
    /*content: '•';*/
    width: 1px;
    height: 20px;
    background: #c2c2c2;
    position: absolute;
    display: inline-block;
    margin: 0px 6px;
    top: -3px;
}
.ul-dld-meta li:first-child{
    padding-left: 0;
}
.ul-dld-meta li:last-child{
    border-right: 0;
}


.naming-plan {
    font-weight: normal;
    color: #BBBBBB;
}
.right-wrapper{
    height: 100%;
}
.relative{
    position:relative;
}

.btn-detail-box {
position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
}

.product-plan-box {
    margin-top: 20px;
}

.product-plan-box .product-detail {
    margin-bottom: 25px;
}



.box-desc-dld {
    border: 1px solid #828282;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    margin-top: 10px;
    width: 100%;
}

.box-redld p {
    margin-left: 0;
}





/*--------------------------------------------------------------------------------------profile portfolio---------------------------------------------*/



.prf-det-con {
    /*background: lime;*/
}

.prf-det-box {
    /*background: red;*/
    position: relative;
    height: 300px;
}

.prf-det-img {
    max-width: 120px;
    max-height: 120px;
    min-width: 120px;
    min-height: 120px;
    object-fit: cover;
    border-radius: 50%;
}

.prf-det-img-box {
    /*background: yellow;*/
    width: 130px;
}

.prf-det-descs {
    /*background: lightblue;*/
    width: 223px;
}

.prf-det-box .prf-det-img-box {
    position: absolute;
    top: 100px;
}

.prf-det-box .prf-det-descs {
    position: absolute;
    top: 100px;
    left: 150px;
}

.ul-prf-det {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.li-prf-dets {
    float: left;
    margin-right: 10px;
    background: #222222;
    border-radius: 50%;
    text-align: center;
    width: 25px;
    height: 25px;
    transition: .25s ease;
    cursor: pointer;
}

.li-prf-dets:hover {

    background: #000;
}

.li-prf-dets:active {
    position: relative;
    top: 2px;
}

.socmed-circle {
    font-size: 12px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
}

.socmed-circle:hover {
    color: #ffffff;
}

.name-prf {
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 35px;
    color: #FFFFFF;
}

.place-prf {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
}


/*</style>*/


/*<style>*/

#port-section {
    background: #ffffff;
    min-height: 400px;
}

.menu-port-box {
    /*background: lime;*/
    padding-top: 40px;
    padding-bottom: 40px;
}

.ul-menu-port {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /*background: red;*/
}

.li-menu-port {
    /*background: green;*/
    float: left;
    padding: 20px;
    padding-left: 45px;
    padding-right: 45px;
    border-bottom: 1px solid #bbb;
    transition: all .15s linear;
}
.li-menu-port:hover{
    padding-right: 95px;
}
.li-menu-port.active{
    border-top: 1px solid #bbb;
    border-bottom: 0;
}

.menu-port {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 100%;
    color: #828282;
}
.li-menu-port.active .menu-port{
    font-weight: 900;
    color: #000000;
}

.menu-port:hover {
    font-style: normal;
    /*font-weight: 900;*/
    font-size: 20px;
    line-height: 100%;
    color: #000000;
    text-decoration: none;
}
.filter{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 12px;
}
.filter label{
    margin: 0 30px 0px 0;
}
.filter select.form-control{
    width: auto;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../images/arrow.png) no-repeat;
    background-position: center right 2px;
    padding-right: 27px;
    background-size: 20px;
    height: 30px;
    border: none;
    color: #000;
    font-size: 12px;
}
.br-t {
    border-top: 1px solid #BBBBBB;
}

.br-r {
    border-right: 1px solid #BBBBBB;
}

.br-b {
    border-bottom: 1px solid #BBBBBB;
}
.profileinfowrapper{
    width: 920px;
}
.profileinfowrapper .form-control:disabled,
.profileinfowrapper .form-control[readonly] {
    background-color: #fff;
    /* opacity: 1; */
}
.profileinfowrapper .form-control:focus {
    color: #000;
}
.left-port-box {
    /*background: lime;*/
    padding-left: 60px;
    margin-bottom: 100px;
}

.right-port-box {
    /*background: red;*/
    margin-bottom: 100px;
}

.input-port-box {
    /* background: lightblue; */
    height: 48.09px;
    margin-bottom: 20px;
}

.input-port-box label {
    /* position: absolute; */
    /* top: 4px; */
    /* left: 4px; */
    margin-bottom: 3px;
}

.input-port-box input {
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    padding-left: 0;
}

.input-port {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #000000;
    width: 100%;
    padding-left: 4px;
    background: transparent;
    border: none;
}

.input-port:focus {
    outline-style: none;
}

.input-port-box-textarea {
    height: 116px;
    /* background: yellow; */
    margin-bottom: 20px;
    position: relative;
    
       -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}
.input-port-box-textarea p {
    font-weight: 900;
    margin-top: 8px;
}

.textarea-port {
    width: 100%;
    height: 80%;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    padding-left: 4px;
    background: transparent;
    border: none;
}

.textarea-port:focus {
    outline-style: none;
}

.input-port-box-textarea label {
margin-bottom: 3px;
}

.input-port-box-textarea textarea {
height: 76%;
}

.flex-center{
	height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-landscape.blackhover {
    width: 100%;
    border-radius: 5px;
    grid-row-end: span 1;
    position: relative;
    background: #0000002e;
	transition: all .35s ease;
}
.grid-landscape.blackhover:hover{
	background: #00000057;
}
/*----------------------------------------------------------portfolio-------------------------------------------------------*/

#section4-grid {
    background: #ffffff;
}

.grids4 {
    /*background: lime;*/
    width: 100%;
    height: 100%;
    padding: 10px;
}

.rows4 {
    display: grid;
    grid-gap: 20px;
    /*grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));*/
    grid-template-columns: repeat(auto-fill, minmax(calc(25% - 60px), 1fr));
    grid-auto-rows: 192px;
}

.grid{
    width: 100%;
    height: 100%;
    padding: 0; 
}
.grid-2-column{
    display: grid;
    grid-gap: 20px;
    /*grid-template-columns: repeat(auto-fill, minmax(calc(33% - 40px), 1fr));*/
	grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr));
    /*grid-auto-rows: 260px;*/
    grid-auto-rows: 238px;
}

.grid-3-column{
    display: grid;
    grid-gap: 20px;
    /*grid-template-columns: repeat(auto-fill, minmax(calc(33% - 40px), 1fr));*/
	grid-template-columns: repeat(auto-fill, minmax(calc(270px - 15px), 1fr));
    /*grid-auto-rows: 260px;*/
    grid-auto-rows: 238px;
}

.grid-4-column{
    display: grid;
    grid-gap: 15px;
    /*grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));*/
    /*grid-template-columns: repeat(auto-fill, minmax(calc(25% - 15px), 1fr));*/
	grid-template-columns: repeat(auto-fill, minmax(calc(270px - 15px), 1fr));
    /*grid-auto-rows: 192px;*/
    grid-auto-rows: 175px;
}
.grid-6-column{
    display: grid;
    grid-gap: 10px;
    /* grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); */
    grid-template-columns: repeat(auto-fill, minmax(calc(16.6666666667% - 25px), 1fr));
    grid-auto-rows: 120px;
}
.grid-3-column.grid-video-type{
	grid-template-columns: repeat(auto-fill, minmax(calc(33% - 15px), 1fr));   
	grid-auto-rows: 176px;
}
#mediamanager .grid-6-column{
    grid-auto-rows: 130px;
}
.landscape{

}
.square{
    width: 100%;
    position: relative;
    border-radius: 5px;
    /*background: lightblue;*/
    grid-row-end: span 1;
}
.square.selected {
    border: 5px solid #0073aa;
    border-radius: 0;
    /*border-color: rgb(191, 255, 0);*/
}
.potrait {
    
}
.img-grid {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    position: absolute;
    object-fit: cover;
    grid-row-end: span 1;
    /*transition: .15s ease;*/
}


.landscape4 {
    width: 100%;
    position: relative;
    border-radius: 5px;
    /*background: lightblue;*/
    grid-row-end: span 1;
}

.potrait4 {
    width: 100%;
    position: relative;
    border-radius: 5px;
    /*background: yellow;*/
    grid-row-end: span 2;
}

.img-port4 {
    width: 260px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    position: absolute;
    object-fit: cover;
    grid-row-end: span 1;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 5px 5px rgba(0, 0, 0, 0.3);
    transition: .5s ease;
}

.layer4 {
    position: relative;
    background: green;
    opacity: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transition: 1s ease;
    display: inherit;
    background-color: rgba(0, 0, 0, 0.6);
}

.layer4:hover {
    opacity: 1;
    transition: 1s ease;
    box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.25), 0px 13px 20px rgba(0, 0, 0, 0.1);
    transition: 1s ease;
}

.layer4 .layer4-upper {
    position: absolute;
    top: 12px;
    left: 15px;
}

.layer4 .layer4-mid {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.layer4 .layer4-bot {
    position: absolute;
    bottom: 15px;
    left: 15px;
}


/*</style>*/


/*-------------------------------------------------------new pricing  modal--------------------------------*/

.sign-contx {
    border-radius: 10px;
    /*background:#000000;*/
    width: 100%;
    height: 545px;
    /*background: lime;*/
    position: relative;
    margin-bottom: 100px;
    margin-top: 100px;
}

.sign-optx {
    /*background: blue;*/
    position: relative;
    width: 455px;
    height: 545px;
}

.sign-contx .sign-optx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sign-optx .close-modal {
    position: absolute;
    right: 10px;
    top: 10px;
}

.signxx {
    /*background: yellow;*/
    padding: 20px;
    width: 406.3px;
    height: 496px;
}

.sign-optx .signxx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.signxx .sign-title {
    margin-bottom: 40px;
}

.sign-cont .signxx {
    position: absolute;
    /*background: lightblue;*/
    width: 406.3px;
    height: 496px;
    left: 80px;
    top: 80px;
    padding: 20px;
}


/*-------------------------------------------------------pricing  modal--------------------------------*/


/*<style> */

.sect-modal {
    /*background: red;*/
    background: rgba(0, 0, 0, 0.96);
}

.sign-cont {
    border-radius: 10px;
    background: #000000;
    width: 100%;
    background: lime;
    position: relative;
    margin-bottom: 50px;
    display: block;
}

.sign-opt {
    /*background: blue;*/
    height: 100%;
}

.left-sign .sign-title {
    margin-bottom: 40px;
}

.sign-cont .left-sign {
    position: absolute;
    /*background: lightblue;*/
    width: 406.3px;
    height: 496px;
    left: 80px;
    top: 80px;
    padding: 20px;
}

.sign-title {
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 35px;
    color: #FFFFFF;
}

.col-sign-box {
    width: 406.3px;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
    margin-bottom: 10px;
}

.col-sign-box:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .5);
}

.sign-input {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
}

.sign-input:focus {
    outline-style: none;
}

.forgot {
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 12px;
    transition: 1s ease;
    color: #FFFFFF;
}

.forgot:hover {
    opacity: 0.8;
    color: #FFFFFF;
    transition: 1s ease;
}

.forgot:active {
    position: relative;
    top: 2px;
}

.signin-btn {
    width: 120px;
    height: 30px;
    background: #A8055D;
    border-radius: 31px;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.signin-btn:hover {
    color: #FFFFFF;
    transition: 1s ease;
    background: #70043e;
}

.signin-btn:active {
    position: relative;
    top: 2px;
}

.dont-acc {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
}

.sign-links {
    font-style: normal;
    font-weight: 900;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.sign-links:hover {
    color: #FFFFFF;
    transition: 1s ease;
    opacity: 0.8;
}

.sign-links:active {
    position: relative;
    top: 2px;
}

.forgot-left {
    /*background: lime;*/
    padding-left: 0;
    padding-top: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.forgot-right {
    /*background: red;*/
    text-align: right;
    padding-right: 0;
    margin-bottom: 10px;
    margin-top: 10px;
}

.sign-btn-modal {
    width: 100%;
    height: 50px;
    background: #F2F2F2;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    border-radius: 100px;
    color: #222222;
}

.sign-btn-modal:hover {
    opacity: 0.8;
}

.sign-btn-modal:active {
    position: relative;
    top: 2px;
}

.fb-badge {
    color: #ffffff;
    width: 40px;
    height: 40px;
    background: #3D5A97;
    border-radius: 50%;
    padding: 11px 15px;
}

.gm-badge {
    background: #DC4C3F;
    color: #ffffff;
    width: 40px;
    height: 40px;
    background: #DC4C3F;
    border-radius: 50%;
    padding: 12px;
}

.box-btn-fb {
    /*background: lime;*/
    position: relative;
    margin-bottom: 10px;
    padding: 0;
}

.box-btn-fb i {
    position: absolute;
    left: 5px;
    top: 5px;
}

.box-btn-gm {
    /*background: red;*/
    position: relative;
    margin-bottom: 20px;
    padding: 0;
}

.box-btn-gm i {
    position: absolute;
    left: 5px;
    top: 5px;
}

.box-dont {
    text-align: center;
    margin-top: 10px;
}

.close-modal {
    background: #ffffff;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    font-size: 8px;
    padding: 11px;
    display: flex;
    height: 10px;
    width: 10px;
    color: #222222;
    cursor: pointer;
}

.close-modal:hover {
    opacity: 0.8;
}

.sign-opt .close-modal {
    position: absolute;
    right: 10px;
    top: 10px;
}


/*</style>*/


/*<style>*/

.sign-cont .right-price {
    /*margin-bottom: 70px;width: 300px;height: 697px;background: #FFFFFF;border: 1px solid #F2F2F2;box-sizing: border-box;border-radius: 5px;position: relative;left: 48rem;top: 30px;padding: 20px;*/
    position: absolute;
    right: 20px;
    padding: 20px;
    margin-bottom: 50px;
    width: 300px;
    height: 697px;
    right: 40px;
    top: 40px;
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
}

.sign-cont>.right-price {
    display: block;
}

.order-grey {
font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 80px;
    margin-bottom: 0;
    color: #828282;
}

.modal-pack-title {
	font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 30px;
    color: #222222;
}

.modal-tiltle-box {
    /*background: lightblue;*/
}

.modal-tiltle-box .order-grey {}

.modal-tiltle-box .modal-pack-title {}

.modal-price {
    margin-top: 15px;
    margin-bottom: 15px;
}

.modal-price p {
    padding: 0;
    margin: 0;
}

.btn-change-box {
    text-align: center;
}

.change-plan {
    border: 1px solid #222222;
    box-sizing: border-box;
    border-radius: 24px;
    width: 100%;
    height: 32px;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    transition: .25s ease;
    color: #222222;
    width: 250px;
    margin: 0 auto;
}

.change-plan:hover {
    opacity: 0.8;
    color: #222222;
}

.change-plan:active {
    position: relative;
    top: 2px;
}

.subtotal {
    font-size: 12px;
    color: #828282;
}

.subtotal-left {
    text-align: left;
}

.subtotal-right {
    text-align: right;
}

.coupon {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #A8055D;
}

.coupon-box {
    /*background: yellow;*/
    position: relative;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.coupon-input-box {
    border-bottom: 0px solid #bbb;
    width: 173px;
    height: 30px;
    padding: 0px;
}

.input-coupon {
    width: 100%;
    height: 100%;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;
    border: none;
    color: #000000;
    transition: all .25s ease;
}

.input-coupon:focus {
    outline-style: none;
    padding-left: 5px;
     border-bottom: 1px solid #828282;
}

.coupon-input-box:focus-within {
    /*border-bottom: 3px solid rgba(0, 123, 255, .8);*/
   
    
}

.apply {
    width: 80px;
    height: 28px;
    background: #A8055D;
    border-radius: 31px;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.apply:hover {
    color: #FFFFFF;
    transition: 1s ease;
    background: #70043e;
}

.apply:active {
    position: relative;
    top: 2px;
}

.coupon-box .apply {
    position: absolute;
    right: 15px;
    top: 0;
    height: 30px;
}

.total-price-title {
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    line-height: 23px;
    color: #222222;
}

.total-price-rm {
    font-weight: bold;
    font-size: 30px;
    line-height: 100%;
    /* or 30px */
    color: #A8055D;
}

.desc-modal-box {
    margin-top: 10px;
}


/*</style>  */


/*-----------------------------plan process ---------------------------------------------*/


/*<style>*/

.process-left {
    max-width: 926px;
    /* background: #FFFFFF; */
    box-shadow: 0px 2px 2px rgb(0 0 0 / 10%);
    /* margin-top: 70px; */
    /* margin-bottom: 40px; */
    padding: 0 30px;
}
.process-left hr {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
    margin-left: -30px;
    margin-right: -30px;
}
.oder-left {
    height: 86px;
    align-items: center;
    display: flex;
}

.order-right {
    height: 86px;
    align-items: center;
    display: flex;
}

.title-tajuk {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 42px;
    color: #828282;
}

.orderspan {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    color: #A8055D;
}

.time-order {
    font-weight: normal;
    font-size: 12px;
    line-height: 110.9%;
    color: #000000;
    opacity: 0.5;
}

    
.order-right p {
    margin: 3px;
     margin-left: auto;
    text-align: right;
    font-size: 13px;
}


.edit-link {
    font-size: 12px;
    transition: .25s;
    color: #A8055D;
        text-transform: capitalize;
}

.edit-link:hover,.edit-link:active{
    color: #A8055D;
    text-decoration: underline;
}

.edit-link:active {
}

.col-tajuk {
    /*background: lime;*/
    margin-bottom: 10px;
}

.addr-text {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.col-bill-left {
    /*background: red;*/
    position: relative;
    margin-bottom: 20px;
    min-height: 35px;
}

.col-bill-left p {
    margin: 3px;
}

.col-bill-left span {
    position: relative;
    top: 5px;
    left: 5px;
    /*background: blue;*/
}

.col-bill-right {
    /*background: lime;*/
    text-align: right;
    margin-bottom: 20px;
}

.col-bton-secure {
    text-align: right;
    padding-top: 30px;
    padding-bottom: 15px;
}

.col-bton-secure .cancel {
    margin-right: 5px;
}

.place-secure {
    background: #A8055D;
    border-radius: 24px;
    width: 206.9px;
    height: 30px;
    transition: 1s ease;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
}

.add-payment-btn {
    width: 100%;
    height: 64px;
    background: #F2F2F2;
    border-radius: 5px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    transition: 1s ease;
    color: #828282;
}

.add-payment-btn:hover {
    color: #828282;
    opacity: 0.8;
    transition: 1s ease;
}

.add-addrs-btn {
    width: 100%;
    height: 100px;
    background: #F2F2F2;
    border-radius: 5px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    transition: 1s ease;
    color: #828282;
}

.add-addrs-btn:hover {
    color: #828282;
    opacity: 0.8;
    transition: 1s ease;
}

.place-secure:hover {
    color: #FFFFFF;
    transition: 1s ease;
    background: #570531;
}

.place-secure:active,
.add-payment-btn:active,
.add-addrs-btn:active {
    position: relative;
    top: 2px;
}

.online-box {
    /*background: lime;*/
}


/*</style>*/


/*<style>*/

.col-bill-left .online-box {
    position: absolute;
}

.col-bill-left h3 {
    position: absolute;
    left: 127px;
    top: 7px;
}

.online-box img {
    position: relative;
    left: 10px;
    /*background: yellow;*/
}

.online-box .radioplan {
    position: relative;
    /*background: lightblue;*/
    top: 5px;
}

.online-box span {
    position: absolute;
    left: 17rem;
    top: 6px;
}

.col-add-pymnt {
    margin-bottom: 20px;
    margin-top: 10px;
}


.small, small {
    font-size: 11px;
    font-weight: 400;
}
.process-right {
	/*margin-top: 70px; */
    /* max-width: 300px !important; */
    /* height: 750px !important; */
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 0 20px;
    margin-left: auto;
	line-height: 1.4;
}

.process-right hr {
    border-top: 1px solid rgba(0,0,0,.1);
    margin: 20px -20px;
}


/*----------------------------------------------------------------------------------plan process----------------------------------------------*/




.cont-bill {
    width: 926px;
    min-height: 280px;
    background: #FFFFFF;
    margin-bottom: 60px;
    position: relative;
    border-radius: 5px;
    padding-bottom: 30px;
    padding-top: 3px;
}

.col-closeing {
    position: absolute;
    right: 5px;
    z-index: 9;
}

.close-modal-addr {
    cursor: pointer;
    z-index: 10;
}


/*</style><style>*/

.left-modal-adrr {
    /*background: lime;*/
    padding-left: 20px;
    padding-right: 20px;
}

.right-modal-adrr {
    /*background: red;*/
    padding-left: 20px;
    padding-right: 20px;
}

.modal-input-box {
    height: 45px;
    background: #F2F2F2;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
    margin-bottom: 20px;
}

.modal-input {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    text-align: right;
    background: transparent;
    border: none;
    color: #000000;
    width: 100%;
    padding-right: 10px;
}

.modal-input:focus {
    outline-style: none;
}

.modal-input-box:focus-within {
    transition: 0.2s ease;
    border: 1.5px solid rgba(0, 123, 255, .8);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    transition-delay: 9999s;
}

.modal-input-box label {
    position: absolute;
    top: 2px;
    left: 5px;
}

.modal-input-box .modal-input {
    position: absolute;
    left: 0;
    bottom: 3px;
}

.modal-select-box {
    background: #F2F2F2;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    height: 45px;
    position: relative;
    margin-bottom: 20px;
}

.modal-select-box:focus-within {
    transition: 0.2s ease;
    border: 1.5px solid rgba(0, 123, 255, .8);
}

.modal-select-box:after {
    content: '\f107';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    /* Fix version 5.0.9 */
    font-size: 10px;
    position: absolute !important;
    top: 13px;
    right: 5px;
    color: #ffffff;
    pointer-events: none;
    background: #111111;
    display: inline-block;
    border-radius: 100%;
    padding: 0.1px 5px;
}

.select-modal {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    text-align: right;
    direction: rtl;
    color: #000000;
    padding-right: 35px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.select-modal:focus {
    outline-style: none;
}

.modal-select-box label {
    position: absolute;
    top: 3px;
    left: 5px;
}

.modal-select-box select {
    position: absolute;
    bottom: 0;
    left: 0;
}

.col-save {
    /*background: lime;*/
    text-align: right;
    margin-top: 10px;
}

.col-save .save {
    margin-left: 5px;
}

.open-addr {
    cursor: pointer;
}


/*</style>*/


/*<style>*/

.contain-bill {
    background: #FFFFFF;
    width: 926px;
    min-height: 300px;
    border-radius: 5px;
    margin-bottom: 200px;
    padding-bottom: 20px;
}

.col-head-modal {
    /*background: lime;*/
    margin-bottom: 20px;
}

.head-modal {
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 12px;
    color: #828282;
}

.detail-modal {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    color: #000000;
    margin-left: 10px;
}

.debit-opttion {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 110.6%;
    color: #000000;
    opacity: 0.5;
}

.col-dedit {
    /*background: lime;*/
    position: relative;
    top: 5px;
}

.col-dedit input {
    position: absolute;
    right: 60px;
    top: 0px;
}

.col-modal-row {
    margin-bottom: 5px;
}

.bill-agree-left {
    /*background: red;*/
    margin-top: 10px;
    position: relative;
}

.bill-agree-right {
    /*background: lime;*/
    margin-top: 10px;
    text-align: right;
    padding-top: 7px;
}

.bill-agree-right .save {
    margin-left: 5px;
}

.close-modal-bill {
    cursor: pointer;
    z-index: 10;
}

.col-cls {
    position: absolute;
    right: 5px;
    z-index: 9;
}

.open-bill {
    cursor: pointer;
}


/*</style>*/


/*<style>*/

.modal-ack {
    /*background: yellow;*/
    position: relative;
}

.modal-xx {
    /*background: green;*/
    width: 400px;
}

.modal-xx p {
    margin: 3px;
}

.modal-ack input {
    position: absolute;
    left: 0;
}

.modal-ack .modal-xx {
    position: relative;
    left: 20px;
}


/*</style>*/


/*<style>*/

.cont-success {
    /*background: lime;*/
}

.left-succes {
    /*background: lightblue;*/
    width: 890px;
    padding-bottom: 20px;
    margin-top: 80px;
}

.right-succes {
    max-width: 300px;
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left: 10px;
    padding-bottom: 20px;
    margin-top: 80px;
}

.tile-success {
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 210.94%;
    color: #828282;
}

.suscess-det {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.done-btn {
    background: #000000;
    border-radius: 24px;
    width: 150px;
    height: 30px;
    transition: 1s ease;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
}

.done-btn:hover {
    color: #FFFFFF;
    opacity: 0.8;
    transition: 1s ease;
}

.done-btn:active {
    position: relative;
    top: 2px;
}

.col-done-sucess {
    /*background: lime;*/
    margin-top: 50px;
    text-align: right;
}

.col-done-sucess .done-btn {
    margin-left: 10px;
}

.success-box p {
    margin: 5px;
}


/*</style>*/


/*---------------------------------------------modal share-------------------------------------*/


/*<style>*/

.modal-share {
    position: relative;
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.7);
    /* Black w/ opacity */
    border-radius: 5px;
}

.cont-share {
    width: 350px;
    /*background: lime;*/
    height: 50px;
}

.x-share {
    /*background: red;*/
    padding-top: 3px;
    padding-bottom: 1px;
    padding-right: 5px !important;
}

.x-span {
    background: rgb(255, 255, 255, 0.6);
    width: 50px;
    height: 10px;
    border-radius: 50%;
    font-size: 18px;
    color: #222222;
    text-align: center;
    padding: 0.1px 6px 0.1px 7px;
    transition: 1s ease;
}

.x-span:hover {
    background: rgb(255, 255, 255, 1);
    transition: 1s ease;
}

section.modal-share div.x-share {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 100%;
    text-align: right;
    padding-right: 5px;
}

section.modal-share div.soc-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
}

.soc-modal {
    background: rgb(255, 255, 255, 0);
    border-radius: 3px;
    padding: 8px;
    position: absolute;
    left: 60px;
}

.ul-modal-soc {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /*background: red;*/
}

.li-modal-soc {
    float: left;
    /*background: grey;*/
    margin-right: 7px;
}

.li-modal-soc i {
    background: rgb(0, 0, 0, 0.9);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding: 8px 7px 0.1px 8.5px;
    transition: 1s ease;
}

.li-modal-soc i:hover {
    transition: 1s ease;
    background: rgb(255, 255, 255, 1);
    color: rgb(0, 0, 0, 1);
}

.li-modal-soc i:active {
    position: relative;
    top: 2px;
}

.pipe-bar {
    border-right: 0.5px solid #AEAEAE;
    padding-right: 7px;
}


/*</style>*/


/*<style>*/

.download_share_modal {
    position: absolute;
    display: none;
    /* Hidden by default */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 371px;
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.7);
    /* Black w/ opacity */
    border-radius: 5px 5px 0 0;
}

section.download_share_modal div.x-share {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 100%;
    text-align: right;
    padding-right: 5px;
}

section.download_share_modal div.soc-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
}


/*</style>*/


/*<style>*/

.enlarge-modal {
    /*background: lime;*/
    text-align: center;
}

.xcircle {
    background: rgb(0, 0, 0, 0.6);
    width: 50px;
    height: 10px;
    border-radius: 50%;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    padding: 0.1px 6px 0.1px 7px;
    transition: 1s ease;
    cursor: pointer;
}

.xcircle:hover {
    background: rgb(0, 0, 0, 1);
    transition: 1s ease;
}

.enlarge-img {
    width: 628px;
    height: 421px;
    object-fit: cover;
}

.align-close {
    position: relative;
}

.align-close .box-clost {
    position: absolute;
    right: 15.7rem;
    top: 0;
}


/*</style>*/


/*-------------------------------------------modal register--------------------------------*/


/*<style> */

.modal-reg-left {
    height: 675px;
    background: #222222;
    position: relative;
}

.content-reg {
    /*background: lime;*/
    padding: 20px;
    width: 430px;
}

.modal-reg-left .content-reg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sign-dld {
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 35px;
    color: #FFFFFF;
}

.reg-dld-box {
    width: 406.3px;
    height: 45px;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 20px;
}

.reg-dld-box:focus-within {
    transition: 0.2s ease;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .5);
}

input[type='password']:-webkit-autofill,
input[type='password']:-webkit-autofill:hover,
input[type='password']:-webkit-autofill:focus,
input[type='password']:-webkit-autofill:active {
    -webkit-transition-delay: 9999s !important;
    transition-delay: 9999s !important;
}

.input-reg-dld {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
}

.input-reg-dld:focus {
    outline-style: none;
}

.sign-dld-box {
    margin-bottom: 30px;
    padding: 0;
}

.link-mod-dld {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.link-mod-dld:hover {
    opacity: 0.8;
    color: #FFFFFF;
    transition: 1s ease;
}

.sign-modal-btn {
    width: 171px;
    height: 30px;
    background: #A8055D;
    border-radius: 31px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.sign-modal-btn:hover {
    transition: 1s ease;
    color: #FFFFFF;
    background: #82094a;
}

.link-mod-dld:active,
{
    position: relative;
    top: 2px;
}

.btn-align-dld {
    margin-top: 10px;
    position: relative;
}

.btn-align-dld button {
    position: absolute;
    right: 0;
}


/*</style>*/


/*<style>*/

.modal-reg-right {
    height: 675px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.24), 0px 0px 4px rgba(0, 0, 0, 0.12);
    position: relative;
}

div.content-right-dld {
    /*background: red;*/
    width: 360px;
    padding: 15px;
}

.modal-reg-right .content-right-dld {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.cl-dld-sign {
    /*background: lime;*/
    text-align: right;
    padding: 0;
}

.text-now-box {
    margin-bottom: 15px;
}

.text-modal-now {
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 35px;
    color: #000000;
}

.modal-now-box {
    width: 343px;
    height: 45px;
    mix-blend-mode: normal;
    border: 1px solid #C2C2C2;
    border-radius: 5px;
    margin-bottom: 15px;
}

.input-modal-now {
    width: 100%;
    height: 100%;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
    background: transparent;
    border: none;
}

.input-modal-now:focus {
    outline-style: none;
}

.modal-now-box:focus-within {
    transition: 0.2s ease;
    border: 1.5px solid rgba(0, 123, 255, .8);
}

.link-req {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #A8055D;
    transition: 1s ease;
}

.link-req:hover {
    opacity: 0.8;
    transition: 1s ease;
    color: #A8055D;
}

.link-req:active {
    position: relative;
    top: 2px;
}

.register-btn {
    width: 171px;
    height: 30px;
    background: #87B700;
    border-radius: 27px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    transition: 1s ease;
    color: #FFFFFF;
}

.register-btn:hover {
    transition: 1s ease;
    color: #FFFFFF;
    opacity: 0.8;
}

.register-btn:active {}

.fb-modal {
    width: 100%;
    height: 45px;
    background: #3D5A97;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24), 0px 0px 2px rgba(0, 0, 0, 0.12);
    border-radius: 100px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    align-items: center;
    transition: 1s ease;
    color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 5px;
}

.google-modal {
    width: 100%;
    height: 45px;
    background: #DC4C3F;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24), 0px 0px 2px rgba(0, 0, 0, 0.12);
    border-radius: 100px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    align-items: center;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.fb-modal:hover,
.google-modal:hover {
    transition: 1s ease;
    color: #FFFFFF;
    opacity: 0.8;
}

.fb-modal:active,
.google-modal:active {
    position: relative;
    top: 2px;
}

.text-term-grey {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
}

.align-btn-rq {
    position: relative;
    /*background: lime;*/
    height: 30px;
    margin-bottom: 10px;
}

.align-btn-rq button {
    position: absolute;
    right: 0;
}

.col-mod-soc {
    padding: 5px;
}

.hr3 {
    border: 0.5px solid #000000;
}

.or-box {
    /*background: lime;*/
    position: relative;
    padding: 0;
}

.or-box span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.or-text {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
    background: #ffffff;
    padding: 10px;
}


/*</style>*/

.cl-dlds {
    position: absolute;
    right: 3px;
    top: 3px;
}

.hrdld {
    border: 1px solid #E5E5E5;
    width: 100%;
    margin: 0 0 8px 0;
    padding: 0;
}

.modal-bill-dwd {
    margin-bottom: 40px;
}



.col-using-option {
    position: relative;
    /*border: 1px solid #F2F2F2;*/
    /*border: 1px solid #82828280;*/
	border: 1px solid  rgba(12,18,28,.12);
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 15px;
}
.col-using-option:hover {
	cursor: pointer;
}

.col-using-option p {
    padding: 1px;
    margin: 0;
}

.col-using-option .radio-standard {
    position: absolute;
    right: 15px;
    top: 18px;
}
.card-download{
	border: 1px solid rgba(12,18,28,.12);
	border-radius: 5px;
}
.card-body{border-radius: calc(5px - 1px) calc(5px - 1px);
}
.card-download .card-header{
    border-bottom: 1px solid rgba(12,18,28,.12);
	border-radius: calc(5px - 1px) calc(5px - 1px) 0 0;

}
/***************** END home.css **********************/


/***************** general.css **********************/

html,
body {
    font-size: 14px;
    /*transform: scale(1.01);*/
    /*transition: all .25s cubic-bezier(0.6, -0.28, 0.74, 0.05);*/
}

.text-black {
    color: #000 !important;
}

.text-white {
    color: #fff !important;
}
.color-default{
	color: #222 !important;
}
.text-grey,.color-grey {
    color: #828282 !important;
}
.text-light-grey,.color-light-grey {
    color: #bbb !important;
}
.text-green,.color-green {
    color: #87B700 !important;
}
.text-purple,.color-purple {
    color: #A8055D !important;
}
.text-date{
	font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    color: #b1b1b1;
}
.text-secondary{
	color: #b1b1b1 !important;
}
.bg-grey {
    background-color: #f2f2f2 !important; 
}
.bg-black {
    background-color: #111;
    color: #fff;
}
.bg-dark {
    background-color: #222 !important;
    color: #fff;
}
.bg-white {
    background-color: #fff;
    color: #222;
}
.bg-purple{
    background: #A8055D;	
}
.weight-300{
	font-weight: 300 !important;
}
.weight-400{
	font-weight: 400 !important;
}
.weight-500{
	font-weight: 500 !important;
}
.weight-600{
	font-weight: 600 !important;
}
.weight-700{
	font-weight: 700 !important;
}
.weight-900{
	font-weight: 900 !important;
}
.font-10{
	font-size: 10px !important;
}
.font-12{
	font-size: 12px !important;
}
.font-14{
	font-size: 14px !important;
}
.font-16{
	font-size: 16px !important;
}
.font-18{
	font-size: 18px !important;
}
.font-20{
	font-size: 20px !important;
}
.font-26{
	font-size: 26px !important;
}
.text-shadow{
    text-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
}
.height-auto{
	height: auto !important;
}
.wrapper-blog {
    padding: 0px 20px;
}
.text-underline{
	text-decoration: underline !important;
}
.box-content-type{
	height: 230px;
	text-align: center;
}
.blog {
     margin: 0px 0px 25px;
    /* max-width: 100%; */
    /* width: calc(100% + 56x); */
    transition: .8s ease;
    margin-left: -5px;
    margin-right: -5px;
}
.featured  img.curve{
        margin-left: -5px;
    margin-right: -5px;
    width: calc(100% + 5px);
}
.blog:hover {
    background: #fff;
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 19px 38px rgba(0, 0, 0, 0.3); */
    box-shadow: 0px 6px 8px -5px rgba(0, 0, 0, 0.68);
    border-radius: 5px;
}

.blog-top img {
    width: 100%;
    object-fit: cover;
    height: 200px;
    border-radius: 5px;
}

.blog-body {
    padding: 10px 15px;
    min-height: 80px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    object-fit: cover;
}

.blog-footer {
    padding: 10px 18px 20px;
}

.blog-info {
    padding: 0 8px 0 12px;
    display: flex;
    align-items: center;
	line-height: 1.1;

}
.w30x30{
	width: 30px !important;
	height: 30px !important;
}

.section-top {
    padding-top: 20px;
    padding-bottom: 20px;
}

.section-top h3 {
    font-weight: 900;
    color: #222;
    font-size: 30px;
}
.category-inside{
    margin-top: 50px;
}
.section-categories .section-top a {
    color: #828282;
    text-decoration: underline;
}

.section-top a:hover {
    color: #222;
    text-decoration: underline;
}

.section-top h5 {
    font-weight: 900;
    font-size: 20px;
    color: #222222;
}

.section-top h5 span {
    font-weight: 400;
}
.link_arrow {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    transition: .2s ease;
    color: #222222;
    display: flex;
    /* justify-content: flex-end; */
    display: flex;
    align-items: center;
}
.link_arrow:hover {
    opacity: .8;
    color: #222222;
}
.link_arrow.right{
    justify-content: flex-end
}
 .arrow-right {
    transform: rotate(-90deg);
    height: 24px;
    margin-left: 6px;
}
 .arrow-right:after {
    content: url(../images/icon/arrow.svg);
    display: inline-block;
}
 .arrow-right.arrowsmall{
    height: 20px;
}
 .arrow-right.arrowsmall:after {
    content: '';
    background: url(../images/icon/arrow.svg) no-repeat;
    display: inline-block;
    height: 20px;
    width: 20px;
    background-size: contain;
}



 .arrow-left {
    transform: rotate(-90deg);
    height: 24px;
    margin-right: 6px;
}
.arrow-left:after {
    content: url(../images/icon/arrow.svg);
    transform: rotate(-180deg);
    display: inline-block;
}
 .arrow-left.arrowsmall{
    height: 20px;
}
.arrow-left.arrowsmall:after {
    content: '';
    background: url(../images/icon/arrow.svg) no-repeat;
    display: inline-block;
    height: 20px;
    width: 20px;
    background-size: contain;
}

.dataTables_paginate .arrow-left.arrowsmall:after,
.dataTables_paginate .arrow-left.arrowsmall{
    display: none;
}
.dataTables_paginate .arrow-right.arrowsmall,
.dataTables_paginate .arrow-right.arrowsmall:after {
    display: none;
}

.view-more {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    transition: .8s ease;
    color: #222222;
    display: flex;
    justify-content: flex-end;
    display: flex;
    align-items: center;
}

.engine {
    position: absolute;
    width: 580px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
}

.wrapper-categories {
    padding: 0 20px;
}

.box-category-wrapper {
    /* flex: 1 0 auto; */
    background-color: #000;
    height: 208px;
    margin: 0 -6px;
    border-radius: 5px;
}

.more.box-category-wrapper {
    /* flex: 1 0 auto; */
    background: transparent;
}

.box-category-wrapper:hover .box-category {
    opacity: 1;
}

.box-category {
    height: 100%;
    background-image: url(../images/becomecontributor/cat-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    border-radius: 5px;
    opacity: .6;
}

.box-category:hover {}

.box-category h5 {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.more .box-category {
    border: 1px solid #A8055D;
    position: relative;
    border-radius: 5px;
    text-align: center;
    background: none;
    opacity: 1;
	transition: all .5s ease;
}

.more .box-category:hover {
    background: #A8055D;
	/*opacity: .7;*/
	
}

.more .box-category a {
    color: #A8055D;
}
.more .box-category:hover a {
    color: #fff;
}

.more .box-category a:hover {
    text-decoration: none;
}

.box-category p {
    margin-bottom: 0;
    line-height: normal;
    font-size: 14px;
}

.wrapper-categorieslist {
    padding: 0 20px;
}

.box-categorieslist-wrapper {
    /* flex: 1 0 auto; */
    background-color: #000;
    height: 192px;
    margin: 0 -6px;
    border-radius: 5px;
}

.more.box-categorieslist-wrapper {
    /* flex: 1 0 auto; */
    background: transparent;
}

.box-categorieslist-wrapper:hover .box-categorieslist {}

.box-categorieslist {
    height: 100%;
    background-image: url(../images/becomecontributor/cat-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    border-radius: 5px;
    background-position: center;
	position: relative;
}

.box-categorieslist:hover {}

.box-categorieslist h5 {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.more .box-categorieslist {
    border: 1px solid #A8055D;
    position: relative;
    border-radius: 5px;
    text-align: center;
    background: none;
    opacity: .5;
}

.more .box-categorieslist:hover {
    opacity: 1;
}

.more .box-categorieslist a {
    color: #A8055D;
}

.more .box-categorieslist a:hover {
    text-decoration: none;
}

.box-categorieslist p {
    margin-bottom: 0;
    line-height: normal;
    font-size: 16px;
}
.thetitle{
    color: #a8055d;
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 3px;
}
.thesubtitle{
    font-size: 12px;
    /*color: rgba(12, 18, 28, 0.6);*/
	color: #828282;
    margin-bottom: 0;
}
.box-categorieslist-wrapper {
    /* flex: 1 0 auto; */
    background-color: #000;
    height: 175px;
    margin: 0 -6px;
    border-radius: 5px;
}
.box-categorieslist-wrapper.square {
    height: 208px;
}

.cat-layer {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    opacity: 0.4;
    height: 100%;
    width: 100%;
    position: relative;
    opacity: 0;
    transition: .25s ease;
    padding: 15px;
}

.section-categories .section-top .related a{
    color: #A8055D;
    text-decoration: none;
}

.cat-layer .cat-up-lay {
    position: absolute;
    top: auto;
    left: auto;
}

.cat-layer .cat-bot-lay {
    position: absolute;
    bottom: 12px;
    left: auto;
}

.mid-explore {
border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 3px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    transition: 1s ease;
    color: #FFFFFF;
    padding: 6px 15px;
    transition: .25s ease;
    min-width: unset;
}

.mid-explore:hover {
    color: #FFFFFF;
    /* opacity: 0.8; */
    /*  */
}

.section-banner:before {
    content: '';
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: .5;
    /* z-index: -1; */
}

.no-banner.section-banner:before {
    content: '';
    background-color: unset;
}

.no-banner.section-banner.topbanner {
    background-image: none;
    margin-top: 50px;
        height: 200px;;
}
.bg-black.no-banner.section-banner.topbanner {
    height: 140px;
}
.section-banner {
    background-image: url(../images/becomecontributor/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 374px;
    background-position: center;
}

.section-banner.topbanner {
    background-image: url(../images/becomecontributor/contributor.jpg);
    height: 300px;
}

.section-banner h5,
h5 {
    font-size: 20px;
    font-weight: 900;
}

.section-banner h5 span,
h5 span {
    font-size: 20px;
    font-weight: 400;
}

.section-banner h3,
h3 {
    font-size: 26px;
    font-weight: 900;
}

.section-banner h2,
h2 {
    /*font-size: 40px;
    font-weight: 900;*/
    font-size: 34px;
    font-weight: 900;
    line-height: 34px;
}

.button-kreatif {
    background: #A8055D;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
    min-width: 140px;
    height: auto;
    padding: 12px 16px;
    transition: all .2s ease;
}
.button-kreatif:hover {
    background: #770241;
    color: #fff;
}
.button-kreatif-white {
    background: #fff;
    font-weight: 400;
    color: #222222;
    font-size: 16px;
    min-width: 140px;
    height: auto;
    padding: 12px 16px;
    transition: all .2s ease;
    position: relative;
    text-align: left;
    justify-content: left;
}
.button-kreatif-white:hover {
    background: #A8055D;
    color: #fff;
}
.button-kreatif-white i {
    width: 26px;
    height: 26px;
    position: absolute;
    right: 7px;
	transition: all .3s linear
}

.button-kreatif-white i:before {
    content: '';
    background: url(../images/icon/arrow-right-purple.png) no-repeat center / contain;
    width: 26px;
    height: 26px;
    position: absolute;
}
.button-kreatif-white:hover  i{
    right: 0;
}
a:hover {
    text-decoration: none;
    /* color: inherit; */
}
.button-green{
	background: #87B700;
	color: #fff;
}
.button-green:hover{
	background: #6d9206;
	color: #fff;
}

.wrapper-banner {
    /* height: 374px; */
    padding: 15px;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: normal;
}

.no-banner .wrapper-banner {
    color: #222;
}
.bg-black.no-banner .wrapper-banner {
    color: #fff;
}

.profileinfo {
    padding-left: 15px;
}
.profileinfo h3{
    margin-bottom: 0;
    font-weight: 700;
}
.wrapper-banner .profileinfo p {
    margin-bottom: 15px;
}
.wrapper-banner p {
    margin-bottom: 25px;
	line-height: 1.4;
}

.aligner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.aligner-item {
    /* max-width: 50%; */
}

.aligner-item--top {
    align-self: flex-start;
}

.aligner-item--bottom {
    align-self: flex-end;
}

.img_owner {
    position: absolute;
    bottom: 0;
    padding: 15px;
}

.collections .box-categorieslist-wrapper {
    height: 175px;
}
.row-5-col .col{
    max-width: 20%;
}
.overlay {
    position: relative;
    opacity: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    display: block;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 15px;
    transition :all .25s ease
	
}
.wrapper-categorieslist .overlay {

	position: relative;
    opacity: 1;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    /*display: block;*/
    background-color: rgba(0, 0, 0, 0.18);
    padding: 15px;
    transition: all .25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	transition: all .35s ease;
}

.overlay a,
.overlay p {
    color: #fff;
	transition: all .35s ease;
}

.overlay h5 {
    font-size: 20px;
    line-height: 20px;
    padding-right: 10px;
    text-transform: capitalize;
	word-break: break-all;
	transition: all .35s ease;
}

.overlay h5 span {
    font-weight: 300;
}

.overlay .date strong {
    font-weight: 700;
}

.overlay p {
    /*font-size: 11px;*/
    font-size: inherit;
    font-weight: 300;
}

.overlay .date {
    font-size: 11px;
    font-weight: 300;
    position: absolute;
    bottom: 55px;
	display: none;
	transition: all .35s ease;
}
.overlay .btn-explore {
	display: none;
}
.overlay:hover .btn-explore {
	display: block;
}
.overlay:hover .date {
    display: block;
}
.overlay:hover {
    flex-direction: column;
    align-items: flex-start;
	justify-content: space-between;
}
.btn-explore {
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 5px;
    font-weight: normal;
    font-size: 14px;
    width: 90%;
    transition: 1s;
    color: #FFFFFF;
    width: calc(100% - 30px);
    display: block;
    text-align: center;
    padding: 6px;
    bottom: 15px;
    position: absolute;
	transition: all .35s ease;
}

.abt5-inside p {
    margin-top: 17px;
    margin-bottom: 27px;
    width: 567px;
    margin-left: auto;
    margin-right: auto;
}

.about-grey {
    margin-bottom: 7px;
}

.button-kreatif.width-auto {
    padding: 12px 35px;
    margin: 0 auto;
    width: auto;
    display: inline-block;
}

.abt3-box .col {
    padding-right: 70px;
}


/** contact ***/
.list-breadcrumb {
    margin-bottom: 0;
}
.list-breadcrumb li {
    border-right: 1px solid #bbb;
    padding: 1px 10px;
    margin-right: 0 !important;
}
.list-breadcrumb li:last-child{
    border-right: 0px solid #bbb;
}

.list-breadcrumb li:first-child {
    padding-left: 0;
}
.list-breadcrumb a {
    color: #222;
}
.list-breadcrumb a.active {
    color: #222;
    font-weight: 900;
}
.bg-black .list-breadcrumb li {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.bg-black .list-breadcrumb a {
    transition: all .15s ease;
    color: rgba(255, 255, 255, 0.5);
}
.bg-black .list-breadcrumb a:hover {
    color: rgba(255, 255, 255, 1);
}
.bg-black .list-breadcrumb a.active {
    color: rgba(255, 255, 255, 1);
    font-weight: 900;
}

.wrapper-contact {
    width: 1150px;
    margin: 0 auto;
}
.wrapper-contact hr{
    border-color: #bbb !important;
}

.wrapper-contact-info {
    /* width: 1000px; */
    margin: 0 auto;
    /*border-bottom: 1px solid #bbb;*/
}

.wrapper-contact-info label {
    font-size: 11px;
    color: #828282;
    margin-bottom: 0;
}

.wrapper-contact-info h5 {
    /* font-size: 20px; */
    font-size: 30px;
    color: #000;
    margin-bottom: 0;
}

.wrapper-contact-info h5 span {
    font-size: 30px;
}

.followus {
    padding: 6px 0;
}

.followus a {
    margin-right: 11px;
    transition: all .3s ease;
}

.followus a:hover img {
    opacity: .7;
}

.formgroup {
    background: #f2f2f2;
    padding: 6px 5px 0px;
    border-radius: 5px;
    position: relative;
    margin-bottom: 20px;
    display: flex;
    /*justify-content: space-between;*/
    flex-direction: column;
    /*height: 45px;*/
    height: auto;
    min-height: 45px;
    border: 1px solid #f2f2f2;
    transition: all .25s ease;
}
.formgroup.error,.formgroup.error.no-border {
    border: 1px solid #ea0000 !important;
}
.formgroup.focus {
    outline: 0;
    box-shadow: 0 0 4px 2px rgba(0,123,255,.25);
}
.formgroup.bg-white{
    background-color: white;
    /*border: 1px solid #f2f2f2;*/
    /*border: 1px solid #dadce0;*/
    border: 1px solid #e6e6e6;
}

.formgroup label {
    font-size: 11px;
    line-height: 11px;
    color: #a2a2a2;
    position: relative;
    /* top: 4px; */
    /* left: 7px; */
    margin-bottom: 2px;
    margin-top: -1px;
    display: block;
}
.formgroup label.custom-control-label {
    font-size: 12px;
    line-height: normal;
        position: relative;
    margin-bottom: 0;
    vertical-align: top;
}

.formwrapper {
    padding: 0 7px;
}

.formgroup-wrapper {
    margin-left: -7px;
    margin-right: -7px;
}

.formgroup .form-control {
    text-align: left;
    background: transparent;
    border: transparent;
    color: #000;
    padding: 3px 0 0;
    margin: 0;
    height: auto;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0px;
}
.formgroup .form-control span {

    font-weight: 400;
}
.formgroup .form-control-plaintext {
    text-align: left;
    background: transparent;
    border: transparent;
    color: #000;
    padding: 3px 0;
    margin: 0;
    height: auto;
    font-weight: 700;
    line-height: normal;
}
.formgroup textarea.form-control {
    height: 100%;
}
.form-control::-webkit-input-placeholder {
    color: #bbb !important;
    font-weight: 400;
}
 
.form-control:-moz-placeholder { /* Firefox 18- */
    color: #bbb !important; 
    font-weight: 400;
}
 
.form-control::-moz-placeholder {  /* Firefox 19+ */
    color: #bbb !important;
    font-weight: 400;
}
 
.form-control:-ms-input-placeholder {  
color: #bbb !important; 
font-weight: 400;
}
.h-3group{
    height: 175px;
}
.h-2group{
    height: 124px;
}

.formgroup select.form-control {
    width: auto;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../images/arrow.png) no-repeat;
    background-position: top right 2px;
    padding-right: 35px;
    background-size: 20px;
	padding-bottom: 2px;
}
.formgroup select.form-control option[disabled] {
    color: #bbb;
}

.formgroup.multiple .multiselect{
    text-align: left;
    padding: 2px 0;
    font-weight: 500;
}
.multiselect.btn:focus {
    outline: 0;
    box-shadow: none;
}
.multiple  .dropdown-toggle::after {
    content: '';
    background: url(../images/arrow.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin: 0;
    position: absolute;
    right: 0;
    border: none;
    top: 0;
}

.multiple .multiselect-container>li>a>label>input[type=checkbox] {
    margin-bottom: 0;
    line-height: 14px;
}
.multiple .multiselect-container {
    position: absolute;
    list-style-type: none;
    margin: 5px 0;
    padding: 10px;
}
.multiple .multiselect-container>li {
    padding: 0;
}
.multiple .multiselect-container>li>a {
    padding: 0;
}
.multiple .multiselect-container>li>a>label {
    margin: 0;
    height: 100%;
    cursor: pointer;
    font-weight: 400;
    padding: 5px 20px 5px 0px;
    font-size: 14px;
    color: #222;
}


.formgroup.uploadpdf{
    height: auto;
    background: #fff;
    border-color: #ccd0d5;
    padding: 10px 10px;
}
.sectionpdf{
     display:none;
}
.sectionpdf.active{
    display: block;
}

.sectionpdf2{
     display:none;
}
.sectionpdf2.active{
    display: block;
}
.formgroup label.label-uploadpdf{
    margin-bottom: 10px;
    margin-left: -10px;
}

.uploadpdf .up-form {
    position: absolute;
    z-index: 1;
    background: transparent;
    opacity: 0;
    padding: 30px;
    width: 100%;
}
.uploadpdf .pdf-boxx {
width: 100%;
    min-height: 98px;
    background: #f2f2f2;
    border: 1px solid #f2f2f2;
    box-sizing: border-box;
    border-radius: 5px;
    margin-right: 0;
    padding-bottom: 15px;
    padding-top: 15px;
    line-height: 1.3;
    word-break: break-all;
    max-width: calc(100% - 0px);
    font-size: 12px;
    color: #828282;
}
.attach-box {
    margin-left: 0;
    /*text-align: right;*/
    padding-top: 5px;
}
.text-release{
   text-align: left;
   color: #828282; 
}

.avatar-profile {
    width: 130px;
    height: 130px;
    object-fit: cover;
    background: #C4C4C4;
    border-radius: 50%;
    margin: 7px 26px 7px;
}

.text-left .formgroup .form-control {
    text-align: left;
    background: transparent;
    border: transparent;
    color: #000;
}

.formgroup-buttons {
    display: flex;
    justify-content: flex-end;
    padding: 15px 0;
}

button {
    border: 1px solid transparent;
}

.formgroup-buttons button,
.formgroup-buttons input {
	margin-left: 7px;
    width: auto;
    height: 30px;
}

.formgroup .input-group{
    margin: -6px -5px;
    height: 45px;
    width: calc(100% + 10px);
}
.formgroup  .input-group-text {
   
    background-color: #ffffff;
    border: 0px solid #f2f2f2;
    border-radius: 5px;
}
.formgroup .input-group .form-control {
    margin: 0;
    padding: 0 6px;
	height:45px;
}
.formgroup.formnote {
    background: #fff;
    border: 0;
    flex-direction: inherit;
    font-size: 11px;
    color: #828282;
	align-items: center;
}

.formgroup.formeditphoto {
    height: 240px;
    background: #fff;
    border-color: #ccd0d5;
	justify-content: unset;
}
.col-image{
    justify-content: center;
    /* text-align: center; */
    padding-left: 10px;
}
.col-image img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 5px;
}
.socmed-inner {
    border-top: 1px solid #F2F2F2;
    position: absolute;
    bottom: 1px;
    width: 100%;
    left: 0;
    height: 23px;
    display: flex;
    align-items: center;
}
.socmed-inner span {
    background: #F2F2F2;
    min-height: 23px !important;
    padding: 0;
    padding: 0 8px;
    display: flex;
    align-items: center;
    line-height: 23px;
    border-radius: 0 0 0 5px;
}
.socmed-inner input[type=text] {
    border: none;
    padding: 0 10px;
    height: 23px;
    width: 100%;
    border-radius: 0 0 5px 0;
}



.button-submit {
    /* background:  */
    /* color: #fff; */
    /* border-color: #828282; */
}

.button-reset {
    background: transparent;
    color: #828282;
    border-color: #828282;
}


/** END contact ***/

.phone {
    margin-bottom: 12px;
}

.li-footer {
    margin-bottom: 10px;
}

.title-footer {
font-size: 10px;
    margin-bottom: 6px;
}

.copy-box {
    margin-top: 45px;
}

.ul-footer {
    margin-bottom: 19px;
}

.x {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
}


.x {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
}
.x:hover::before, .x:hover::after {
  background: #1ebcc5;
}
.x::before, .x::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #000;
}
.x::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.x::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.x::before, .x::after {
    height: 1px;
}

/*---------------------------------------------------------------------------- END general.css **********************/


.more:not(.box-categorieslist-wrapper):not(.box-category-wrapper) {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 10;
    width: 20px;
    height: 20px;
    display: block;
    margin-left: auto;
    text-align: center;
}
.more[aria-expanded="true"], .more:hover{
    /*opacity: .7;*/
}
.more::after {
    content: "\22EE";
    position: absolute;
    right: 0px;
    font-size: 23px;
    line-height: 20px;
    float: none;
    transition: all 0.1s ease-in 0s;
    margin: 0px auto;
    color: #fff;
}
.dropdown-menu.contextmenu {
    margin-top: 4px;
    padding: 5px 10px;
    min-width: 80px;
    width: unset;
    border-radius: 2px;
    box-shadow: 2px 3px 3px -2px rgba(0, 0, 0, 0.2);
}
.contextmenu.dropdown-menu a {
    font-size: 12px;
    line-height: normal;
    color: #222;
    padding: 3px 0;
    display: block;
    transition: all .25s ease;
}
.contextmenu.dropdown-menu a:hover {
    text-decoration: underline;
}

.tags {
    background: none repeat scroll 0 0 transparent;
    display: table;
    padding: 0;
    width: 100%;
    list-style: outside none none;
    margin: 6px 0 0 -2px;
}

.tags ol,
.tags ul {
    list-style: outside none none;
}
.tags li.tagAdd, .tags li.addedTag {
    float: left;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 4px;
    font-size: 12px;
}
.tags li.addedTag {
   /* background: none repeat scroll 0 0 #A8055D;
    border-radius: 2px;
    color: #fff;
    padding: 3px 5px;
    font-weight: 500;*/
	
	
}
.tags li.addedTag {
    /* background: none repeat scroll 0 0 #A8055D; */
    border-radius: 2px;
    color: #fff;
    padding: 3px 5px;
    font-weight: 500;
    display: inline-block;
    font-weight: 400;
    font-size: 11px;
    text-transform: lowercase;
    border-radius: 50px;
    padding: 4px 15px;
    border: 1px solid;
    border-color: #0c121c3b;
    min-width: 50px;
    text-align: center;
    background: #fff;
    margin: 2px 2px;
    color: rgba(12,18,28,.87) !important;
    transition: all .35s ease-out;
    /* box-shadow: inset 0 0 0 1px #0c121c1f; */
}
.labelgroup .tags li.addedTag {
	 border-color: #0c121c21;
}
.form-control.form-tags{
    background: #fff;
    margin-top: 5px;
    border: 1px solid #ddd;
    padding: 5px;
}
.form-control.form-tags:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}
.tags input, li.addedTag {
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow: none;
    display: block;
    padding: 0.5em;
}
.tags input:hover {
    border: 1px solid #000;
}
span.tagRemove {
    cursor: pointer;
    display: inline-block;
    padding-left: 0.5em;
}
span.tagRemove:hover {
    color: #adadad;
}
.newtags.tags li.addedTag {
    font-weight: 400;
    font-size: 12px;
    text-transform: lowercase;
    border-radius: 50px;
    padding: 4px 9px 4px 15px;
    border: 1px solid;
    border-color: #c4c4c4;
    min-width: 50px;
    text-align: center;
    background: transparent;
    margin: 2px 4px 2px 0;
    color: inherit;
}

.popover-block-container .popover-icon {
  background: none;
  color: none;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
}
.popover-block-container .popover-icon i {
  color: #04a0b2;
  text-align: center;
  margin-top: 4px;
}

.popover-header {
  display: none;
}

.popover {
  max-width: 306.6px;
  border-radius: 6px;
  border: none;
  box-shadow: 0 0 6px 1px #eee;
}

.popover-body {
  border: none;
  padding: 20px 49.4px 24px 24px;
  color: #5f6976;
  font-size: 15px;
  font-style: italic;
  z-index: 2;
  line-height: 1.53;
  letter-spacing: 0.1px;
}
.popover-body .popover-close {
  position: absolute;
  top: 5px;
  right: 10px;
  opacity: 1;
}
.popover-body .popover-close .material-icons {
  font-size: 16px;
  font-weight: bold;
  color: #04a0b2;
}
.lb-outerContainer {
    border-radius: 0;
}
.lightboxOverlay {
    background-color: rgba(0, 0, 0, 0.84);
    filter: alpha(Opacity=100);
    opacity: 1;
}
.lb-data .lb-close {
    position: fixed;
    top: 10px;
    right: 10px;
}
.lightbox .lb-image {
    border-radius: 0px;
    border: 0;
    box-shadow: 3px 2px 10px #00000069;
}
.lb-data .lb-details {
    padding-top: 10px;
}
.lb-nav a.lb-prev,
.lb-nav a.lb-next{
    background-size: 30px;
}

.contest_wrapper{
    width: 680px;
    max-width: 680px;
    margin: 0 auto;
}
.img_contest {
    border-radius: 5px;
}
.contest_content h1 {
    font-size: 40px;
    font-weight: 900;
    padding-right: 100px;
    text-align: left;
    margin-bottom: 20px;
}
.authorinfo label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 0;
}
.authorinfo span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 0;
}
.authorinfo{
    padding-left: 9px;
    color: #222;
}
article{
    line-height: 1.45;
}
article h5{
    font-weight: 500;
}
article h1,article h2,article h3, article h4 {
    font-size: 20px;
}
article p{
    min-height: 1px;
}
article a{
    color: #A8055D;
}
article a:hover{
    text-decoration: underline;
}
article img{
    border-radius: 5px;
        margin-bottom: 10px;
}
.content_left_wrapper article hr {
    margin-left: 0;
    margin-right: 0;
    border-color: #BBBBBB;
}
.list-tags{
    margin-bottom: -3px;
    padding: 3px 0 0;
}
.list-tags a {
color: #828282;
    /* font-style: italic; */
    font-size: 12px;
    /* font-weight: 500; */
    background: #dedede;
    padding: 4px 10px;
    border-radius: 2px;
    margin: 2px 0;
    display: block;
}
.list-tags .list-inline-item:not(:last-child) {
    margin-right: 1px;
}
.list-tags a:hover{
    background: #ccc;
}
.section-article{
    margin: -25px -30px 0;
    padding: 25px 30px;
    background: #f2f2f2;
}
.fa-comment-alt,.fa-odnoklassniki,.fa-snowman {
    font-size: 76px;
    color: #b7c0d2;
    padding: 10px;
    background: #f2f0f0;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    text-align: center;
    display: flex !important;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
    margin-bottom: 12px;
}
.text-licenss {
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    /* color: #d1d2d4; */
    font-weight: 400;
}
.link-license{
    transition: .35s ease;
    color: #A8055D;
}
.start-browse-box {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #a2a2a2;
}

.mediasearch{
    width: 200px;
    height: auto;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 50px;
    border: 1px solid #f2f2f2;
    background: #f2f2f2 url(../images/icon/icon-search.png) no-repeat;
    background-position: top 7px right 9px;
    line-height: normal;
    height: 30px;
    background-color: #f2f3f5;
    border: 1px solid #ccd0d5;

}
.section-hr span{
    color: #bbb;
}
.section-hr i {
    display: flex;
    align-items: center;
        padding-right: 0;
}
.section-hr i:after {
content: "";
    background: #bbb;
    height: 1px;
    width: 100%;
    opacity: .7;
}
.curve{
    border-radius: 5px;
}
.info {
    line-height: 1.4;
}
.info h5{
    padding-right: 30%;
    margin-bottom: 15px;
}
.info h5 a{
    color: #222;
}
.info h5 a:hover{
    text-decoration: underline;
}
.page-blog-main .list-breadcrumb a{
    color: #bbb;
    transition: all .25s ease;
}
.page-blog-main .list-breadcrumb a:hover{
    color: #222;
}
.page-blog-main .list-breadcrumb a.active{
    color: #222;
}
.section-breadcrumb {
    height: 45px;
    display: flex;
    align-items: center;
    background: #ffff;
    margin-top: 50px;
}
.share-menu-article {
    display: flex;
    width: auto;
    justify-content: flex-end;
}
.share-item {
    display: block;
    width: 100%;
    padding: 0;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.share-menu-article .list-inline-item {
    display: inline-block;
    float: left;
}
.share-item i {
    color: #fff;
    width: 24px;
    text-align: center;
    height: 24px;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #222;
    border-radius: 50px;
    font-size: 12px;
}
.not.share-item i {
    font-size: 14px;
    line-height: 14px;
    color: #737373;
    background: transparent;
}
.box-comment{
    /*border: 1px solid #C4C4C4;*/
    border-radius: 10px;
    padding: 25px 10px 10px 25px;
    box-shadow: 0px 0 2px 0 rgba(0, 0, 0, 0.3);
}
.box-comment textarea.form-control {
    height: auto;
    border: 0;
    min-height: 100px;
    background: transparent;
    margin-bottom: 10px;
}
.comment-bottom {
    padding: 15px;
    background: #F6F6F6;
    margin: 0 -10px -10px -25px;
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: flex-end;
}
.box-comment textarea.form-control::-webkit-input-placeholder {
color: #333 !important;
font-weight: 400;
}

.all-comment .authorinfo label {
    font-size: 14px;
}
.btn-edit {
    border-radius: 5px;
    border: 1px solid #C4C4C4;
    min-width: 60px;
    height: 30px;
}
.icon-comment {
    color: #000;
    opacity: .5;
    margin-right: 9px;
    font-size: 16px;
    transition: all .35s ease;
}
.icon-comment:hover{
    opacity: 1;
}
.row-comment {
    padding: 20px 0 35px 35px ;
    border-bottom: 1px solid #bbb;
}
.box-newsletter {
    background: #E5E5E5;
    width: 380px;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    padding: 25px;
    margin-left: auto;
        margin-top: -20px;
}
.box-newsletter p{
        font-size: 12px;
    margin-bottom: 60px;
}
.box-newsletter .form-control {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #Aeaeae;
    border-radius: 0;
    padding: 0;
    height: 30px;
        font-size: 12px;
}
.box-newsletter .form-control::-webkit-input-placeholder {
color: #000 !important;
font-weight: 400;
}
.custom-control {
    position: relative;
    display: block;
    min-height: 16px;
   
    padding: 0px;
     padding-left: 1.75rem;
}
.custom-control-label::before,
.custom-control-label::after {
    top: 0;
    width: 16px;
    height: 16px;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #A8055D;
    border-color: #000;
    background-color: #fff;
}
.custom-radio .custom-control-input:checked~.custom-control-label::after {
    /* background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e); */
    background: #A8055D;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 3px;
    left: -18px;
}
.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(168, 5, 93, 0.17);
}    
.top.selected{
	background: #dcead5;
    border-color: #dcead5;
    color: #003300;
}
/* radiooooooooooooo **/
.top [type="radio"]:checked,
.top [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.top [type="radio"]:checked + label,
.top [type="radio"]:not(:checked) + label
{
	position: relative;
    padding-right: 28px;
    cursor: pointer;
    line-height: 20px;
    display: block;
	margin-bottom: 0;
}
.top [type="radio"]:checked + label:before,
.top [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #82828280;
    border-radius: 100%;
    background: #fff;
}
.top [type="radio"][disabled] + label:before {
    opacity: 0.5;
}
.top [type="radio"]:checked + label:after,
.top [type="radio"]:not(:checked) + label:after {
    content: url(../img/check_circle_24px.svg);
    width: 20px;
    height: 20px;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.top [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.top [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.legal-title {
    padding-top: 45px;
    padding-bottom: 20px;
}
.legal-subtitle {
    padding-bottom: 40px;
}
.legal-subtitle h5 span {
    line-height: 1.35;
    font-weight: 500;
}
.document ol { 
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
}
.document li{ 
    display: flex;
    align-items: baseline;
}
.document li:before { 
    content: counters(item, ".") ". "; counter-increment: item;
    font-size: 20px;
    font-weight: 500;
    margin-right: 5px;
}
.ol-main-sub li{
    display: flex;
    margin-bottom: 15px;
}    
.document .ol-main {
    padding-left: 0;
    line-height: 1.4;
}
.document .ol-main>li:not(:last-child) {
    border-bottom: 1px solid #bbb;
    margin-bottom: 20px;
    padding-bottom: 15px;
}
.ol-main h5{
    margin-bottom: 15px;
    font-weight: 500;
    display: inline-block;
}
.document .ol-main-sub{
    font-size: 14px;
    font-weight: 400;
    padding-left: 0;

}
.document .ol-main-sub>li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
    font-weight: 600;
    margin-right: 10px;
    font-size: 14px;
}

.document .ol-abc {
    counter-reset: item;
    list-style: none;
}
.document .ol-abc>li {
    counter-increment: count;
    position: relative;
}
.document .ol-abc>li:before {
    content: counter(count,lower-alpha)'.';
    font-weight: 600;
    margin-right: 10px;
    font-size: 14px;
}
.ol-content {
    display: inline-block;
    width: 100%;
}
.modalupload .modal-body {
    padding: 0 25px 0;
}
.media-wrapper {
    margin: 0 -10px;
}

.media-left{
    max-width: 200px;
    background: #f2f2f2;
}
.media-right{
    padding-left: 25px;
        padding-right: 25px;


}
.modal.modalupload h5 {
    font-size: 19px;
    margin-bottom: 0;
}
.media-header {
    height: 86px;
    align-items: center;
    display: flex;
}
.media-header h5{
    
}
.media-left .nav {
    display: block;
}
.media-left .nav-pills .nav-link {
    border-radius: 0;
    color: #828282;
    width: 100%;
    padding: 15px 0;
}
.media-left .nav-pills .nav-link.active, 
.media-left .nav-pills .show>.nav-link {
    color: #000;
    background-color: transparent;
    font-weight: 700;
}
.media-left .nav-item:not(:last-child) {
   
    border-left: 0;
    border-bottom: 1px solid #bbb;
}
			        	    
.myProgress {
    width: 100%;
    background-color: #b7b7b7;
    border-radius: 50px;
}

.myBar {
    width: 1%;
    min-width: 10px;
    height: 7px;
    background-color: green;
    border-radius: 50px;
}

.modal .col-image-upload {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 20px;
    text-align: center;
    min-height: 200px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    background: #EEEEEE;
    border-radius: 5px 5px 0 0;
}
.img-uploaded {
    width: 215px;
    height: 215px;
    object-fit: cover;
}
.select-img.custom-control {
    position: relative;
    display: block;
    min-height: 16px;
    padding: 0px;
    padding-left: 0;
}
.select-img .custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
    width: 100%;
    height: 130px;
}
.select-img .custom-control-label::before, 
.select-img .custom-control-label::after {
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    left: auto;
    z-index: 10;
    color: #0073aa;
    border-color: #0073aa;
    background-color: #fff;
    background-color: #0073aa;
    box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0073aa;
    opacity: 0;
}
.select-img .custom-control-input:checked~.custom-control-label::before,
.select-img .custom-control-input:checked~.custom-control-label::after{
    color: #0073aa;
    border-color: #0073aa;
    background-color: #fff;
    background-color: #0073aa;
    box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0073aa;
    opacity: 1;
}
.select-img .custom-control-input:checked~.custom-control-label img {
    border: 5px solid #0073aa;
    border-radius: 0;
}
.gambar {
    max-height: 400px;
    object-fit: cover;
}
.pip{
    position: absolute;
}
.img-container .remove {
    color: #ffffff;
    position: absolute;
    top: 10px;
    cursor: pointer;
    left: auto;
    right: 30px;
    border: 3px solid #fdfdfd;
    padding: 1px 8px;
    border-radius: 100%;
    background: #0073aa;
    width: 30px;
    height: 30px;
    padding: 0;
    text-align: center;
    line-height: 24px;
    font-size: 22px;
    box-shadow: 2px 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.featured-image-wrapper{
    margin: 0 -15px;
    width: calc(100% + 30px);
}
.actionUpload{
    position: relative;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 10px);
}
.actionUpload input[type="file"]{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 30px;
}
.upload-wrapper {
    text-align: center;
    background: #f2f2f2;
}
.upload-all-wrapper {
    /*background: #f2f2f2 url(../images/bg-upload-wrapper.png) no-repeat;*/
    background: #f2f2f2 ;
    padding: 25px 0;
    /*min-height: 350px;*/
    min-height: 280px;
    background-position: center;
}
.upload-msg{
    display: block;
    height: 260px;
        text-align: center;
    padding-top: 15px;
}
.upload-wrapper{
    display: none;
}
.upload-all-wrapper.ready .upload-msg {
     display: none;
}

.upload-all-wrapper.ready .upload-wrapper {
     display: block;
}


.box-radio{
    flex-direction: initial !important;
    align-items: center !important;
}
.box-radio h6{
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 400;
}
.box-radio input[type="radio"],
.box-radio input[type="checkbox"]{
    position: absolute;
    right: 10px;
}
.section-tq{
    background: #fff url(../images/tq.jpg) no-repeat;
    margin-top: 50px;
    background-position: top right;
    min-height: 528px;
    background-size: auto;
}
.col-left{
    min-height: 528px;
}
.text-wrapper{
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
}
.logo-popup{
    width: 170px;
}
.footermodal{
    font-size: 12px;
    background: #222;
    padding: 7px 20px;
    color: #fff;
}
.footermodal h5 {
    font-weight: 500;
}
.footermodal .small {
    font-size: 10px;
    color: #fff;
}
.modal-body-wrapper{
    margin: -25px;
}
.modalimage  .close{
    color: #fff !important;
    opacity : 1;
}
.modalimage .modal-body{
    background: #000;
    text-align: center;
}

.modalimage #img-modal{
    max-height: unset;
    width: 100%;
    margin: 0 auto;
}
.modalimage #img-modal.potrait{
    max-height: 533px;
    width: auto;
        max-width: 100%;
    margin: 0 auto;
}
.invoice-wrapper{
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 0px;
    font-size: 14px;
    color: #222;
}
.data{
    padding: 15 15px;
    margin-left: -15px;
    margin-right: -15px;
    height: 100%;
}

@media print {
  .data{
    padding: 15 15px;
    margin-left: -15px;
    margin-right: -15px;
    height: 100%;
}
}
.invoice-wrapper .table{
    font-size: 14px;
    margin-bottom:0;
}
.tableprintdownload{
    font-size: 14px;
}
.tableprintdownload td{
    vertical-align: top;
}
.invoice-wrapper .table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #eee;
    background: #fff;
    border-top: 0;
    font-weight: 700;
    font-size: 14px;
    border-left: 1px solid #fff;
    text-align: left;
    padding-left: 15px !important;
}
.invoice-wrapper .table td,
.invoice-wrapper .table th {
    padding: 20px 15px !important;
    vertical-align: top;
    border-top: 0px solid #dee2e6;
}
#image-upload {
    position: absolute;
    background: transparent;
    height: 70%;
    width: 100%;
    top: 90px;
    left: 0;
    opacity: 0;
}


.file-upload {
    background-color: #ffffff;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.iconuploadwrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #c4c4c4;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 45px auto 35px;
}
.file-upload-btn {
  width: 100%;
  margin: 0;
  color: #fff;
  background: #1FB264;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #15824B;
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.file-upload-btn:hover {
  background: #1AA059;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.file-upload-btn:active {
  border: 0;
  transition: all .2s ease;
}

.file-upload-content {
  display: none;
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
      left: 0;
    top: 0;
}

.image-upload-wrap {
margin-top: 0;
    position: relative;
    background: #FFF;
    border: 1px dashed  #BDBDBD;
    box-sizing: border-box;
    border-radius: 5px;
    text-align: center;
}

.image-upload-wrap p{
    margin-top: 70px;
    color: #828282;
    font-size: 12px
}
.modal.modalupload .image-upload-wrap h5 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #828282;
}
.image-dropping,
.image-upload-wrap:hover {
  background: #F2F2F2;
  border: 1px dashed #BDBDBD;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

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

.drag-text h3 {
  font-weight: 100;
  text-transform: uppercase;
  color: #15824B;
  padding: 60px 0;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #cd4535;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #b02818;
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all .2s ease;
}
.showfilter {
    /*display: flex;*/
}
.showfilter .grid {
    /*width: calc(100% - 315px);*/
    /*width: calc(100% - 282px);*/
    width: 100%;
    height: 100%;
    padding: 0;
}
.showfilter .grid-4-column {
    /*grid-template-columns: repeat(auto-fill, minmax(calc(33% - 60px), 1fr));*/
	grid-template-columns: repeat(auto-fill, minmax(calc(270px - 15px), 1fr));
	grid-gap: 15px;
}
.showfilter .grid-3-column,
#contentgrid .grid-3-column{
    /*grid-template-columns: repeat(auto-fill, minmax(calc(33% - 60px), 1fr));*/
	grid-template-columns: repeat(auto-fill, minmax(calc(270px - 15px), 1fr));
    grid-auto-rows: 175px;
	grid-gap: 15px;
}
.contest_content img{
    max-width: 100%;
    height: auto;
}
.btn-acc {
    padding: 0 0;
    margin: 0;
    border: 0;
    display: flex;
    height: 50px;
    align-items: center;
    width: 100%;
    position: relative;
    color: rgba(12,18,28,.87);
    font-weight: 500;
    font-size: 12px;
}

.arrow-acc {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    transform: rotate(-180deg);
    transition: all .25s ease;
}
.btn-acc[aria-expanded="true"] .arrow-acc {
    transform: rotate(0deg);
}
.col-filter {
    max-width: 280px;
    padding-left: 10px;
}

.menu-filter > a{
    border: 1px solid #828282;
    color: #828282;
    background: transparent;
    font-size: 12px;
    display: inline-block;
    justify-content: center;
    height: 30px;
    line-height: 30px;
    padding: 0 0;
    align-items: center;
    border-radius: 50px;
    width: calc(50% - 10px);
    text-align: center;
    margin: 2px 4px 10px;
}
.menu-filter.three-column > a {
    width: calc(33.333333% - 12px);
}
.menu-filter > a.selected{
    border: 1px solid #a8055d;
    color: #fff;
    background: #a8055d;
    
}
.menu-filter{
    padding: 15px 0;
    margin-left: -4px;
    margin-right: -4px;
    /* border-bottom: 1px solid #aeaeae;*/
}
.filter-wrapper{
    width: 255px;
    /* margin-left: auto; */
    /* display: none; */
    transition: all .25s ease;
}
.showfilter .filter-wrapper{

    display: block;
}
.text-purple{
    color: #a8055d;
}
.text-purple:hover{
    /*color: #750642;*/
}
.col-filter hr {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

.toast-top-center , #toast-container{
    top: 0;
    left: 0;
    transform: none;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .3);
}
#toast-container.toast-bottom-center>div, #toast-container.toast-top-center>div {
    width: 300px;
 
}
#toast-container>div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 55px 15px 15px 15px;
    width: 300px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 5px;
    background-position: top 15px center;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
    -webkit-box-shadow:none;
    box-shadow: none;
    color: #FFF;
    opacity: .8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
    font-size: 14px;
    text-align: center;
	line-height: 1.2;
    margin: 0;
    /* position: absolute; */
	top: 70px;
    left: 0;
    right: 0;
    margin: 0 auto 15px;
   /* transform: translate(-50%);*/
}
#toast-container>div:hover {
    -moz-box-shadow: none;
    box-shadow: none;
}
.toast-close-button {
    position: absolute;
    top: 4px;
    right: 10px;
    float: right;
    font-size: 24px;
    font-weight: 300;
    color: #FFF;
    -webkit-text-shadow: 0 1px 0 #fff;
    text-shadow: 0 1px 0 #fff;
    opacity: .8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
    line-height: 1;
}
.toast-success {
    background-color: #64cd83;
    border: 1px solid #3faa5d;
}
.toast-error {
    background-color: #e74d3d;
    border: 1px solid #ba2d1d;
}
.toast-title {
    margin-bottom: 10px;
}

.pagepagination  .pagination {
    align-items: center;
    justify-content: center;
    padding-top: 25px;
}
.pagepagination .page-link {
    position: relative;
    display: block;
    padding: 5px;
    margin-left: -1px;
    line-height: 1.25;
    color: #BBBBBB;
    background-color: transparent;
    border: 0px solid #dee2e6;
        display: flex;
    align-items: center;
    transition: all .2s ease;
}
.pagepagination .page-link:hover {
    color: #828282;
    background-color: transparent;
}
.pagepagination .page-item.active .page-link {
    color: #000;
    font-weight: 600;
    background-color: transparent;
}
.page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: none;
}
.page-link[rel="next"]:after{
   /* content: 'Next';
    background: url(../images/icon/arrow.svg) no-repeat;
    display: inline-block;
    height: 20px;
    width: 20px;
    background-size: contain;*/
}
.pagepagination .page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    padding-right: 25px;
    color: #222;
    padding-left: 30px;
    position: absolute;
    left: 15px;
    padding-left: 0;
    top: 25px;
}
.pagepagination .page-item:last-child .page-link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    padding-left: 25px;
    color: #222;
    padding-left: 30px;
    position: absolute;
    right: 15px;
    padding-right: 0;
    top: 25px;
}
.pagepagination .page-item:first-child .page-link:hover,
.pagepagination .page-item:last-child .page-link:hover {
    opacity: .7;
}
.pagepagination .page-item:last-child.disabled .page-link {
    opacity: .3;
}

.pagepagination  .page-item.disabled .page-link {
    opacity: .3;
}

.note-btn-group .note-btn {
    border-color: rgba(0,0,0,.2);
    padding: .28rem .65rem;
    font-size: 13px;
    min-width: unset;
    border-radius: 3px;
}
.modal.note-modal .modal-dialog {
    outline: 0;
    border-radius: 5px;
    box-shadow: none !Important;
}
.note-modal .form-group label{
font-size: 11px;
    color: #828282
}
.note-modal .form-group.note-group-select-from-files {
    margin-bottom: 18px;
}
.note-modal .modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 19px;
    color: #000;
    font-weight: 900;
}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle {
    color: #212529;
    background-color: transparent;
    border-color: transparent;
}
.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show>.btn-light.dropdown-toggle:focus {
    box-shadow: none;
}

.bootstrap-select>.dropdown-toggle {
    padding: 0;
    background: transparent;
    border: none;
    white-space: normal;
    font-weight: 500;
    
}
.bootstrap-select>.dropdown-toggle.bs-placeholder {
    font-weight: 400;
}
.bootstrap-select .dropdown-toggle .filter-option {
    padding-right: 25px;
}
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: 0 !important;
    outline-offset: 0;
    border: 0;
    box-shadow: none;
} 
.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: #bbb;
}

.bootstrap-select .dropdown-item.active, 
.bootstrap-select .dropdown-item:active {
    color: #212529;
    text-decoration: none;
    background-color: transparent;
    outline: 0;
    font-weight: 700;
     box-shadow: none;
}
.bootstrap-select .dropdown-menu li a.selected span.text {
    font-weight: 700;
}
.formgroup .bootstrap-select .form-control {
    background: #fff;
    padding: 8px 6px 8px 8px;
    border: 1px solid #dfdfdf;
}
.bootstrap-select .dropdown-menu {
    margin-top: 5px;
}
.bootstrap-select>.dropdown-toggle:after {
    content: "";
    background: url(../images/arrow.png) no-repeat;
    width: 20px;
    min-width: 20px;
    height: 18px;
    margin: 0;
    background-position: right 1px center;
    background-repeat: no-repeat;
    border: 0;
    background-size: contain;
    vertical-align: middle;
}
.menu-filter .bootstrap-select>.dropdown-toggle:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: none;
    border-top: 5px solid #222222;
    border-right: 5px solid transparent;
    border-bottom: 0;
    border-left: 5px solid transparent;
    width: unset;
    min-width: unset;
    height: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
}
.message.error {
    color: red;
    padding: 2px 0;
    font-size: 80%;
    font-weight: 600;
    margin-left: -5px;
}
.plan-intro{
    line-height: 1.4;
}
.img-plan {
    border-radius: 7px;
    transition: all .25s ease;
}
.img-plan:hover {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.img-plan-box{
    position: relative;
}
.img-plan-box .btn {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 200px;
    font-weight: 500;
}
.modal .img-plan-box .btn {
    bottom: 10px;
    left: 10px;
    width: auto;
}

.img-title{
    height: 70px;
}
.plan-acc {
    margin: 0;
    border: 0;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    color: #000;
    min-height: 70px;
    cursor: default;
}
.plan-acc[aria-expanded="false"] .arrow-acc {
    transform: rotate(0deg);
}
.plan-acc[aria-expanded="true"] .arrow-acc {
    transform: rotate(-180deg);
}
.planprice-wrapper{
    background: #F2F2F2;
    border: 1px solid #F2F2F2;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 20px;
    width: 500px;
    margin-bottom: 15px;
}
.planprice-wrapper .btn{
    min-width: 200px;
}

.img-title-box{
    min-width: 100px;
    z-index: 0;
    position: relative;
        overflow: hidden;
}

/* Shine */
.img-title-box:after {
	content:'';
    top:0;
	transform:translateX(-300%);
	width: 50px;
    height: 70px;
	position: absolute;
	z-index:1;
	animation: slide 5s infinite 5s;
	opacity: .4;
  /* 
  CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ 
  */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}

/* animation */

@keyframes slide {
	0% {transform:translateX(-300%);}
	50% {transform:translateX(300%);}
}


.labelgroup{
border-radius: 5px;
    position: relative;
    margin-bottom: 25px;
    color: #000;
    font-weight: 500;
    min-height: 32px;
    line-height: normal;
}
.labelgroup label{
    font-size: 11px;
    line-height: 11px;
    color: #a2a2a2;
    position: relative;
    margin-bottom: 5px;
    display: block;
    font-weight: 400;
}
.labelgroup p {

    margin-bottom: 0px;
}
.h5light {
    font-weight: normal;
    font-size: 20px;
    line-height: normal;
    color: #828282;
    margin-bottom: 0px;
}
.img-pending-wrapper{
    height: 240px;
    border: 1px solid #dadce0;
    border-radius: 5px;
    text-align: center;
}

.tag {
    display: inline-block;
    font-weight: 400;
    font-size: 11px;
    text-transform: lowercase;
    border-radius: 50px;
    padding: 7px 15px;
    /* border: 1px solid; */
    /* border-color: #c4c4c4; */
    min-width: 50px;
    text-align: center;
    background: transparent;
    margin: 2px 2px;
    color: rgba(12,18,28,.87) !important;
    transition: all .35s ease-out;
    box-shadow: inset 0 0 0 1px rgba(12,18,28,.12);
}

.keyword {
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    text-transform: lowercase;
    border-radius: 50px;
    padding: 2px 15px;
    /* border: 1px solid; */
    /* border-color: #c4c4c4; */
    min-width: 50px;
    text-align: center;
    background: #dadada;
    margin: 0px 3px 8px;
    color: rgb(168 5 93) !important;
    transition: all .35s ease-out;
    /* box-shadow: inset 0 0 0 1px rgb(12 18 28 / 12%); */

}
.keyword:hover{
	background: #ccc9c9;
}
.tag:first-child{
    margin-left: 0;
}
a.tag:hover{
    color: #000;
        background: #cacdd2;
            text-decoration: none;
                box-shadow:none;
    
}
.tag:not(:last-child):after{
    
}
.img-curve{
    border-radius: 5px;
}
.img-pending {
    height: 100%;
    margin: 0 auto;
    object-fit: cover;
}
.similarimageswrapper .grid-4-column {
    display: grid;
    grid-gap: 10px 10px;
    /* grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); */
    grid-template-columns: repeat(auto-fill, minmax(calc(25% - 30px), 1fr));
    /* grid-auto-rows: 192px; */
    grid-auto-rows: 160px;
}
.box-slider .slick-prev ,
.box-slider .slick-next {
    transition: all .1s ease;
    width: 40px;
    height: 40px;
    z-index: 1;
}
.box-slider .slick-prev.slick-disabled ,
.box-slider .slick-next.slick-disabled {
    opacity: 0;
}
.box-slider .slick-next {
    right: -12px;
}
.box-slider .slick-next:hover {
    right: -17px;
}
.box-slider .slick-next:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    background: url(../images/icon/next-big.svg) no-repeat;
    opacity: 1;
    z-index: 1;
}
.box-slider .slick-next:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    left: 50%;
    top: 50%;
    background: #fff;
    opacity: 1;
    z-index: 0;
    border-radius: 100%;
    transform: translate(-50%, -50%);
}
.box-slider .slick-prev {
    left: -12px;
}
.box-slider .slick-prev:hover {
    left: -17px;
}
.box-slider .slick-prev:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    background: url(../images/icon/back-big.svg) no-repeat;
    opacity: 1;
    z-index: 1;
}
.box-slider .slick-prev:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    left: 50%;
    top: 50%;
    background: #fff;
    opacity: 1;
    z-index: 0;
    border-radius: 100%;
    transform: translate(-50%, -50%);
}
.inform {
    display: flex;
    padding: 0px;
    font-size: 12px;
    color: rgba(12, 18, 28, 0.6);
    border-radius: 3px;
    margin-bottom: 0px;
    margin-top: 5px;
}
.inform-left {
    padding: 0px 0px 0 0px;
    font-size: 16px;
    max-width: 20px;
}
.inform-right {
    padding: 0px 6px;
        display: flex;
    align-items: center;
}
.dd {
    display: flex;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
    color: rgba(12, 18, 28, 0.6);
    line-height: 16px;
}
.dd i{
    margin-right: 5px;
    font-size: 16px;
}
.page_instructions ul{
    font-size: 14px;
    padding-left: 17px;
}
.file-size {
    color: #878787;
    margin-bottom: 0;
    font-size: 10px;
    text-transform: uppercase;
}


.progressstatus {
    display: none;
    position: relative;
    margin: 20px 0;
    width: 100%;
    background-color: #eee;
    border: 0px solid transparent;
    padding: 3px;
    border-radius: 6px;
}

.progressstatus-bar {
    background-color: #99d699;
    width: 0%;
    height: 30px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.percent {
    position: absolute;
    display: inline-block;
    color: #507350;
    font-weight: bold;
    top: 50%;
    left: 50%;
    -webkit-border-radius: 4px;
    transform: translate(-50%, -50%);
}
.videowrapper{
    overflow: hidden;
    height: 0;
    padding-top: 56.25%;
    position: relative;
	    background: #000;
}
.videowrapper video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videofooter {
    border: 1px solid rgba(0,0,0,.07);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.videodetailwrapper h5 {
    font-size: 20px;
    font-weight: 500;
}
.videodetailwrapper .xs-circle{
	margin:0
}
.videodetailwrapper .table {
    font-size: 12px;
    width: 100%;
    margin-bottom: 1rem;
    /*color: rgba(12,18,28,.6);*/
	color: #222;
	
}
.videodetailwrapper  .image-summary .avatar {
    width: 34px;
    height: 34px;
}
.text-medium{
	font-weight: 500;
}
.videodetailwrapper .table td, 
.videodetailwrapper .table th {
    padding: 12px .75rem;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

.videodetailwrapper .table.table-small td, 
.videodetailwrapper .tabletable-small th {
    padding: 6px .75rem;
}
.videodetailwrapper .table th {
    font-size: 12px;
    color: #bbb;
    font-weight: 400;
}
.videodetailwrapper .table th {
    vertical-align: bottom;
    border-bottom: 0px solid #dee2e6;
	border-top: 0px solid #dee2e6;
}
.videodetailwrapper .table tr:first-child td{
	
}

.table-hover tbody tr.no-hover:hover {
    color: #212529;
    background-color: transparent;
}

.videodetailwrapper .table td:first-child{
	/*padding-left: 0;*/
}
.videodetailwrapper .table td:last-child{
	/*padding-right: 0;*/
	text-align: right
}
.videodetailwrapper .card-header {
    padding: 0 0 .75rem;
    margin-bottom: 0;
    background-color: inherit;
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.videodetailwrapper  .card-footer {
    padding: .75rem 1.25rem;
    background-color: inherit;
    border-top: 0px solid rgba(0,0,0,.125);
}
.videodetailwrapper .card{
    background: transparent;
    border: none;
}
.icon-play {
    width: 55px;
    height: 55px;
    opacity: 1;
    transition: all .35s ease;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}
.icon-play:hover{
	opacity:1;
}

.video-overlay{
    position: relative;
    opacity: 1;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transition: .35s ease;
    display: inherit;
    background-color: rgba(0, 0, 0, 0.6);
}
.card-video {
	width: 100%;
    height: 100%;
    border: 0;
    background: #0002;
	border-radius: 6px;
	    z-index: 21;
}
.card-video *{
	color: #fff;
}
.card-video .dropdown-item,
.bottom-layer .likes .dropdown-item{
	color: #212529;
}
.card-video .video-title,
.card-video .card-footer{
	opacity: 0;
	tansition: all .25s ease;
}
.card-video:hover .video-title,
.card-video:hover .card-footer{
	opacity: 1;
}
.card-video .card-header {
	background: transparent;
    border-bottom: 0px solid rgba(0,0,0,.125);
}
.card-video .card-body{
	padding: 0;
	position:relative;
}

.body-center {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.card-video .card-body a{
    display: inline-block;
}
.card-video .card-body img{
	
}
.card-video .card-footer {
	background: transparent;
    border-top: 0px solid rgba(0,0,0,.125);
}
.card-video:hover{
	background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.4009978991596639) 0%, rgba(0,0,0,0.14889705882352944) 50%, rgba(0,0,0,0.09567577030812324) 100%);
}
.box-thumbnail {
    height: 175px;
    margin: 0 -6px;
    background-size: cover;
    background-position: center;
	border-radius: 6px;
	position: relative;
}

.ul-video-spec {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
.ul-video-spec  li {
    display: inline-flex;
    position: relative;
    margin-right: 0;
    line-height: 1;
}
.ul-video-spec li:not(:last-child):after {
    content: '';
    width: 1px;
    height: 12px;
    background: #000000;
    margin: 0px 6px;
}
.ul-video-spec .product-detail {
    font-weight: bold;
    font-size: 14px;
    color: #222222;
}
.videodetailwrapper .box-summary.no-border{
	font-size: 14px;
	border: none;
	padding: 0;
}
.bg-grey .section-search {
        background: #e8e8e8;
}
/*

.scroll {
    padding: 10px 15px;
    margin: 0 -15px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.scroll:after{
    content: '';
    position: absolute;
    right: 0;
    width: 100px;
    height: 100%;
    top: 0;
    background: rgb(17,17,17);
    background: linear-gradient(90deg, rgba(17,17,17,0) 0%, rgba(17,17,17,1) 100%);
}
.scroll:hover:after,
.scroll:focus:after,
.scroll:active:after{
    display: none;
}
.scroll::-webkit-scrollbar {
  display: none;
}*/


.box-img-inside {
    position: relative;
    margin-right: 0;
    margin-bottom: 0;
    height: 200px;
}
.video-thumbnail{
    height: 100px;
}
.thumbnailvideo {
    max-width: 100%;
    border-radius: .25rem .25rem 0 0;
}
.myProgress-video {
    width: 100%;
    background-color: #b7b7b7;
    border-radius: 50px;
}

.dropzone {
    min-height: 300px;
    border: 0;
    background: #eee;
    padding: 20px 20px;
	position: relative;
}
.dropzone .dz-message {
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.4;
}
.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    min-height: 100px;
    width: 25%;
    padding: 5px;
	text-align: center;
}
.dropzone .dz-preview .dz-image {
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    height: 120px;
    position: relative;
    display: block;
    z-index: 10;
}
.dropzone .dz-preview .dz-details {
    z-index: 20;
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
    font-size: 12px;
    min-width: 100%;
    max-width: 100%;
    padding: 10px;
    text-align: center;
    color: rgba(0,0,0,0.9);
    line-height: 1.4;
}
.dropzone .dz-preview:hover .dz-image img {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    -webkit-filter: none;
    filter: none;
}
.dropzone .dz-preview.dz-image-preview {
    background: transparent;
}
.dropzone .dz-preview .dz-image img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dropzone .dz-preview.dz-complete .dz-image img {
    display: block;
}


.dropzone .dz-preview.dz-file-preview .dz-image {
    border-radius: 5px;
    background: #dcdcdc;
    border: 0;
    /* background: linear-gradient(to bottom, #eee, #ddd); */
}
.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.dropzone .dz-preview .dz-remove {
    font-size: 12px;
    color: #a8055d;
    padding: 10px 0 0;
}
.dropzone .dz-preview .dz-progress {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: relative;
    height: 8px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    width: 90%;
    margin-left: 0;
    background: rgba(255,255,255,0.9);
    -webkit-transform: translate(-50%, -50%);
    border-radius: 8px;
    overflow: hidden;
}
.dropzone .dz-preview .dz-progress .dz-upload {
    background: #333;
    background: linear-gradient(to bottom, #a8055d, #a8055d);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    -webkit-transition: width 300ms ease-in-out;
    -moz-transition: width 300ms ease-in-out;
    -ms-transition: width 300ms ease-in-out;
    -o-transition: width 300ms ease-in-out;
    transition: width 300ms ease-in-out;
}
.dropzone .dz-preview .dz-details .dz-filename {
    white-space: unset;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span,
.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: none;
    background-color: transparent;
}
.dropzone .dz-preview .dz-details .dz-filename span, 
.dropzone .dz-preview .dz-details .dz-size span {
    background-color: transparent;
    padding: 0 0.4em;
    border-radius: 3px;
    word-break: break-all;
}
.dropzone .dz-preview .dz-details .dz-size {
    margin-bottom: 0;
    font-size: 10px;
}
/*
.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    position: absolute;
    display: block;
    top: 37px;
    left: 50%;
    margin-left: 0;
    margin-top: 0;
    transform: translateX(-50%);
    
	    z-index: 1000;
}*/
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
    top: 29%;
	z-index: 9999;
	
}
.dropzone .dz-complete:not(.dz-error) .dz-success-mark{
	opacity: 1;
}
.dropzone .dz-preview .dz-error-message {
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: block;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    font-size: 11px;
    top: 104%;
    bottom: auto;
    left: 50%;
    width: 140px;
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: 0.5em 1.2em;
    color: white;
    transform: translateX(-50%);
}
.dropzone .dz-preview.dz-error .dz-error-message {
    display: block;
    opacity: 1;
}

.video{
	width: 100%;
    height: 100%;
    background: #000;
}
.inline-video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:20;
}
.inline-video video{
	z-index:9;
	object-fit: cover;
	position: relative;
	border-radius: 5px;
}
.grid-video .cv-spinner {
    position: absolute;
    z-index: 22;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	display: none;
}
.fa-check-circle:after {
    content: "";
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    z-index: -1;
}
.fa-exclamation-circle:after {
    content: "";
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    z-index: -1;
}
.img-wrapper{
	background: #f2f2f2;
}
.img-wrapper img{
    height: 100%;
    /*max-height: 305px;*/
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    /* padding: 15px; */
    object-fit: contain;
    /*min-height: 310px;*/
    object-position: top;
}
.usagelabel {
    font-size: 11px;
    color: #f5883b;
    padding: 2px 5px;
    border: 1px solid #f5883b;
    border-radius: 2px;
    line-height: 14px;
    font-weight: 500;
    margin-right: 5px;
}


.label-other{
    font-size: 10px;
    color: #bbb;
    font-style:italic ;
    padding: 0;
    margin: 0;
    position: relative;
    top: -20px;
}