html { direction: rtl; } :root { --swiper-theme-color: var(--primaryColor); } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--backgroundColor); color: #222; min-height: 100vh; font-family: 'Roboto', 'Noto Naskh Arabic', serif; } body>* { -ms-flex-negative: 0; flex-shrink: 0; } .mt-40 { margin-top: 40px; } .mt-80 { margin-top: 80px; } .mb-40 { margin-bottom: 40px; } .mb-80 { margin-bottom: 80px; } .lh16 { line-height: 1.6; } .lh18 { line-height: 1.8; } h1, h2, h3, h4, h5, h6, button, .btn, label { font-family: 'Roboto', 'Cairo', sans-serif; } .red { color: red; } .kufi { font-family: 'Roboto', 'Cairo', sans-serif; } .naskh { font-family: 'Roboto', 'Noto Naskh Arabic', serif; } .justify-text { text-align: justify; } .nav { position: fixed; width: 100%; background-color: #fff; -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; z-index: 1030; } .nav .nav-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 80px; } .nav .nav-menu-btn { margin-right: 20px; margin-left: 20px; cursor: pointer; font-size: 20px; color: #555; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .nav .nav-menu-btn:hover { opacity: .6; } .nav .nav-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: auto; } .nav .nav-actions .btn:not(:last-child) { margin-left: 10px; } a { color: #222; text-decoration: none; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } a:hover { color: #222; } .link.link-primary { color: var(--primaryColor) !important; } .link:hover { opacity: .9; } .btn { border-radius: 5px; padding-right: 22px; padding-left: 22px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-box-shadow: none !important; box-shadow: none !important; } .btn.btn-md { padding-top: 10px; padding-bottom: 10px; } .btn.btn-primary { background-color: var(--primaryColor); border-color: var(--primaryColor); } .btn.btn-secondary { background-color: var(--secondaryColor); border-color: var(--secondaryColor); } .btn:hover { opacity: .9; } .btn.btn-outline-primary { border-color: var(--primaryColor); color: var(--primaryColor); } .btn.btn-outline-primary:focus { background: transparent; } .btn.btn-outline-primary:hover { background-color: var(--primaryColor); color: #fff; opacity: 1; } .form-control { -webkit-box-shadow: none !important; box-shadow: none !important; } .form-control.form-control-md { padding-top: 10px; padding-bottom: 10px; } .form-control:focus { border-color: var(--secondaryColor); } .form-select { -webkit-box-shadow: none !important; box-shadow: none !important; } .form-select.form-select-md { padding-top: 10px; padding-bottom: 10px; } .form-select:focus { border-color: var(--secondaryColor); } .form-search { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form-search.form-search-width { min-width: 280px; } .form-search input { padding: 15px 25px 15px 65px; border: 1px solid #ecf2f6; border-radius: 10px; width: 100%; } .form-search input:focus { outline: 0; border-color: var(--primaryColor); } .form-search button { position: absolute; left: 0; outline: 0; border: 0; background: transparent; color: #ccc; width: 65px; height: 100%; text-align: center; } .categories { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .categories .category { padding: 15px; } .categories .category .category-title { font-weight: 400; margin-bottom: 0; color: var(--primaryColor); } .posts .post { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 12px 15px; } .posts .post:not(:last-child) { margin-bottom: 8px; } .posts .post .post-img { border-radius: 10px; margin-left: 10px; width: 60px; -o-object-fit: cover; object-fit: cover; } .posts .post .post-info .post-title { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-bottom: 5px; color: var(--primaryColor); } .post-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .post-meta .post-meta-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--primaryColor); font-size: 14px; margin-top: 2px; margin-bottom: 2px; font-weight: 300; } .post-meta .post-meta-item:not(:last-child) { margin-left: 10px; } .post-meta .post-meta-item:not(:last-child)::after { content: ''; width: 5px; height: 5px; background-color: #999; margin-right: 10px; border-radius: 50%; } .post-meta .post-meta-item i { margin-bottom: 3px; margin-left: 5px; } .social-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; color: #fff; border: 0; outline: 0; cursor: pointer; } .social-btn i { font-size: 18px; } .social-btn.social-facebook { background-color: #1877f2; } .social-btn.social-twitter { background-color: #1da1f2; } .social-btn.social-linkedin { background-color: #0a66c2; } .social-btn.social-whatsapp { background-color: #25d366; } .social-btn.social-pinterest { background-color: #cc0200; } .social-btn.social-telegram { background-color: #24a9ea; } .social-btn.social-link { background-color: #8C95A0; } .social-btn:hover { opacity: .8; color: #fff; } .share { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: -5px; margin-left: -5px; } .share.v2 { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .share.v2 .social-btn { border-radius: 5px; width: 100%; height: 50px; } .share .social-btn { margin: 5px; } .navbar-toggler { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; -webkit-box-shadow: none !important; box-shadow: none !important; } @media (max-width: 991.98px) { .navbar-collapse { display: block !important; visibility: hidden; position: fixed; width: 100%; height: 100% !important; top: 0; right: 0; opacity: 0; -webkit-transition: .3s !important; -o-transition: .3s !important; transition: .3s !important; } } @media (max-width: 991.98px) { .navbar-collapse .drop-custom .dropdown-menu { -webkit-box-shadow: none; box-shadow: none; background-color: #f8f8f8; } } @media (max-width: 991.98px) { .navbar-collapse .drop-custom .dropdown-menu::before { -webkit-box-shadow: none; box-shadow: none; display: none; } } .navbar-collapse .overlay { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.2); } @media (max-width: 991.98px) { .navbar-collapse .overlay { display: block; } } @media (max-width: 991.98px) { .navbar-collapse .navbar-nav { position: absolute; width: 300px; height: 100%; top: 0; right: -300px; background-color: #fff; overflow: auto; padding: 20px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } } .navbar-collapse .navbar-nav .nav-link { color: #4c4c4c; } @media (max-width: 991.98px) { .navbar-collapse.show { visibility: visible; opacity: 1; } .navbar-collapse.show .navbar-nav { right: 0; } } .drop-custom .dropdown-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 991.98px) { .drop-custom .dropdown-toggle { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .drop-custom .dropdown-toggle::after { display: none; } .drop-custom .dropdown-toggle i { margin-right: 7px; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .drop-custom .dropdown-toggle.show i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .drop-custom .dropdown-menu { -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border: 0; padding-top: 20px; padding-bottom: 20px; min-width: 200px; } .drop-custom .dropdown-menu::before { background-color: #fff; border-radius: 3px 0 0 0; -webkit-box-shadow: -2px -2px 5px rgba(82, 95, 127, 0.1); box-shadow: -2px -2px 5px rgba(82, 95, 127, 0.1); content: ""; display: block; height: 12px; margin: 0 0 0 -6px; position: absolute; top: -5px; left: 15px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 12px; } .drop-custom .dropdown-menu .dropdown-item { background-color: transparent; padding: 0 20px; color: #555; } .drop-custom .dropdown-menu .dropdown-item>* { margin-bottom: 0; } .drop-custom .dropdown-menu .dropdown-item:hover { opacity: .8; } .drop-custom .dropdown-menu li:not(:last-child) .dropdown-item { margin-bottom: 16px; } .card { -webkit-box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; border: 0; border-radius: 15px; background-color: #fff; } .card.card-blog .card-img-top { max-height: 400px; -o-object-fit: cover; object-fit: cover; } .card .card-body { padding: 30px; } @media (max-width: 767.98px) { .card .card-body { padding: 20px; } } .card.v2 { border-radius: 20px; } .card.v2 .card-body { padding: 25px; } .card.v2 .card-body .card-img-top { border-radius: 20px; margin-bottom: 25px; } .card.v2 .card-body .card-title { color: var(--primaryColor); } .card.v2 .btn { -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; border-radius: 0 20px 0 20px; } .article-card .btn { border-radius: 5px !important; } .article-card .download-btn { font-size: 22px; padding: 10px 37px; } .pagination { margin-bottom: 0; } .page-item { font-family: 'Roboto'; } .page-item:not(:last-child) { margin-left: 6px; } .page-item .page-link { color: var(--primaryColor); padding-right: 15px; padding-left: 15px; border-radius: 5px !important; border: 0; background: transparent; } .page-item .page-link:focus, .page-item .page-link:active { -webkit-box-shadow: none !important; box-shadow: none !important; } .page-item .page-link:hover { background: var(--primaryColor); color: #fff; } .page-item.active .page-link { background-color: var(--primaryColor); border-color: var(--primaryColor); color: #fff; } .page-item.active .page-link:hover { color: #fff; } .page-item[disabled] .page-link { cursor: default; background: transparent; color: var(--primaryColor); } .navbar { background-color: #fff; -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; height: 70px; } .navbar .navbar-menu-close { color: #888; cursor: pointer; } .navbar .navbar-menu-close i { font-size: 18px; } .navbar .navbar-menu-close:hover { opacity: .8; } .page-wrapper { padding-top: 70px; } .page-header { position: relative; background-color: var(--primaryColor); z-index: 0; } .page-header::after { content: ''; position: absolute; background: -o-linear-gradient(27deg, #eee 23%, transparent 23%) 7px 0, -o-linear-gradient(27deg, transparent 74%, #eee 78%), -o-linear-gradient(27deg, transparent 34%, #eee 38%, #eee 58%, transparent 62%), var(--primaryColor); background: linear-gradient(63deg, #eee 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #eee 78%), linear-gradient(63deg, transparent 34%, #eee 38%, #eee 58%, transparent 62%), var(--primaryColor); background-size: 16px 48px; top: 0; left: 0; width: 100%; height: 100%; opacity: .02; z-index: -1; } .page-header .page-header-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; min-height: 200px; color: #fff; } .page-header .page-header-inner .page-title { margin-bottom: 0; } .page-header .breadcrumb-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: 'Roboto', 'Cairo', sans-serif; } .page-header .breadcrumb-item a { color: #fff; } .page-header .breadcrumb-item+.breadcrumb-item::before { color: #fff; content: "\f053"; font-family: "Font Awesome 6 Free"; font-weight: 700; font-size: 10px; margin-top: 3px; } .page-header .breadcrumb-item.active { color: #fff; opacity: .85; } .contact-us { max-width: 900px; margin-right: auto; margin-left: auto; } .section { padding-top: 40px; padding-bottom: 70px; } .section .section-header { margin-bottom: 35px; } .section .section-header .section-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 10px; color: var(--primaryColor); margin-bottom: 0; } .section .section-header .section-title::after { content: ''; width: 50%; height: 2px; background-color: var(--secondaryColor); } .section .section-header .section-title.v2::after { width: 25%; } .search-btn { cursor: pointer; color: #888; } .search-btn i { font-size: 20px; margin-top: 4px; } .search { visibility: hidden; position: fixed; width: 100%; -ms-flex-negative: 1; flex-shrink: 1; z-index: 1040; background-color: #fff; -webkit-box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; opacity: 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .search .search-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 0px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; transition: .3s; } .search .search-input { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .search .search-input input { width: 100%; background-color: #f4f5f6; color: #444; outline: none; border: none; border-radius: 8px; padding: 10px 50px; height: 50px; } .search .search-input input::-webkit-input-placeholder { color: #999; } .search .search-input input::-moz-placeholder { color: #999; } .search .search-input input:-ms-input-placeholder { color: #999; } .search .search-input input::-ms-input-placeholder { color: #999; } .search .search-input input::placeholder { color: #999; } .search .search-input .search-icon { position: absolute; right: 0; width: 45px; height: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #aaa; } .search .search-input .search-input-close { position: absolute; color: #888; margin-top: 5px; left: 20px; cursor: pointer; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .search .search-input .search-input-close:hover { opacity: .8; } .search .search-results { position: absolute; top: 75px; left: 0; padding-top: 5px; padding-bottom: 5px; -webkit-box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); background-color: #fff; width: 100%; border-radius: 8px; max-height: 307px; overflow-x: hidden; overflow-y: auto; visibility: hidden; opacity: 0; -webkit-transform: perspective(200px) translateZ(-200px); transform: perspective(200px) translateZ(-200px); -webkit-transition: .3s; -o-transition: .3s; transition: .3s; padding: 20px; } @media (max-width: 575.98px) { .search .search-results { position: fixed; width: 90vw; top: 65px; left: 50%; -webkit-transform: perspective(200px) translateZ(-200px) translateX(-50%); transform: perspective(200px) translateZ(-200px) translateX(-50%); } } .search .search-results .search-results-item { display: block; } .search.show .search-results { visibility: visible; opacity: 1; -webkit-transform: perspective(200px) translateZ(0); transform: perspective(200px) translateZ(0); } @media (max-width: 575.98px) { .search.show .search-results { -webkit-transform: perspective(200px) translateZ(0) translateX(-50%); transform: perspective(200px) translateZ(0) translateX(-50%); } } .search.active { visibility: visible; opacity: 1; } .search.active .search-inner { height: 70px; } .hover-item { position: relative; z-index: 0; } .hover-item::before { content: " "; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0 0 0 0; background: var(--primaryColor); z-index: -1; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; opacity: .08; border-radius: 15px; } .hover-item.hover-item-v2::before { opacity: .04; } .hover-item:hover::before, .hover-item.active::before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; } .most-download .app { position: relative; counter-increment: app; z-index: 0; } .most-download .app:not(:last-child) { margin-bottom: 5px; } .most-download .app::after { position: absolute; left: 16px; z-index: -1; color: #222; font-size: 50px; opacity: .08; content: counter(app); } .most-recent .app:not(:last-child) { margin-bottom: 5px; } .logo img { height: 40px; } @media (max-width: 499.98px) { .logo img { height: 23px; } } .app { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; color: #444; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .app .app-img { margin-left: 16px; } .app .app-img img { width: 60px; max-height: 60px; } .app .app-info { max-width: calc(100% - 115px); margin-left: 10px; } .app .app-title { margin-bottom: 8px; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .app .app-time { font-size: 12px; } .app .app-download { margin-right: auto; } .app .app-download a { color: #aaa; } .app .app-download a:hover { opacity: .8; } .app .app-download i { font-size: 25px; } .app.app-v2 .app-img img { width: 65px; max-width: 100%; max-height: 65px; } .app.app-v2 .app-info { max-width: calc(100% - 82px); } .app.app-v2 .app-title { font-size: 15px; margin-bottom: 1px; } .app.app-v2 .app-text { font-size: 14px; margin-bottom: 0; } .app.app-v2 .app-download i { font-size: 18px; } .app.app-v { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 30px; } .app.app-v .app-img { margin-left: 0; margin-bottom: 10px; } .app.app-v .app-img img { width: 120px; height: 120px; max-height: 100%; } .app.app-v .app-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .app.app-v .app-star { margin-right: 0; } .app-star { position: relative; margin-top: 5px; margin-right: auto; color: #ffaa00; font-size: 15px; } .app-star i { margin-left: 2px; } .app-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .app-meta .app-meta-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .app-meta .app-meta-item:not(:last-child) { margin-bottom: 10px; } .app-meta .app-meta-item .app-meta-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--secondaryColor); margin-left: 10px; } .app-meta .app-meta-item .app-meta-title .app-meta-icon { position: relative; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 0; color: var(--secondaryColor); margin-left: 10px; } .app-meta .app-meta-item .app-meta-title .app-meta-icon::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 0; background-color: var(--secondaryColor); opacity: .15; border-radius: 50%; } .app-meta .app-meta-item .app-meta-title .app-meta-title-text { margin-bottom: 0; } .app-meta .app-meta-item .app-meta-text { color: var(--primaryColor); margin-bottom: 0; font-family: 'Roboto', 'Cairo', sans-serif; } .ratings { display: -webkit-box; display: -ms-flexbox; display: flex; } .ratings .rating { color: #ccc; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .ratings .rating i { font-size: 20px; } .ratings .rating input { display: none; } .ratings .rating:not(:last-child) { margin-left: 3px; } .ratings .rating.active { color: #ffaa00; } .ratings.ratings-inputs .rating { cursor: pointer; } .ratings.ratings-sm .rating i { font-size: 16px; } .ratings.ratings-1 .rating:first-child { color: #ffaa00; } .ratings.ratings-2 .rating:nth-child(-n+2) { color: #ffaa00; } .ratings.ratings-3 .rating:nth-child(-n+3) { color: #ffaa00; } .ratings.ratings-4 .rating:nth-child(-n+4) { color: #ffaa00; } .ratings.ratings-5 .rating { color: #ffaa00; } .swiper-images { height: 400px; max-height: 540px; -webkit-box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; border-radius: 20px; overflow: hidden; } .swiper-images .swiper-image { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; border-radius: 20px; } .swiper-images .swiper-button-next:after, .swiper-images .swiper-button-prev:after { font-size: x-large; } .comments { width: 100%; } .comments .comment { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 20px; border-radius: 10px; } .comments .comment .comment-img img { width: 70px; height: 70px; border-radius: 50%; margin-left: 16px; } .comments .comment .comment-title { margin-bottom: 8px; } .comments .comment .comment-time { font-size: 14px; } .comments .comment .comment-text { font-size: 15px; } .comments .comment:not(:last-child) { margin-bottom: 16px; } .comments .ratings-comment:not(:last-child) { padding-bottom: 20px; margin-bottom: 20px; } .comments .ratings-comment .comment { padding: 0; margin: 0; } .comments .ratings-comment:not(:last-child) { border-bottom: 1px solid #eee; } .footer { padding-top: 25px; padding-bottom: 25px; background-color: #222; color: #ccc; margin-top: auto; } .footer a, .footer p { font-family: 'Roboto', 'Cairo', sans-serif; } .footer .footer-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -8px; margin-left: -8px; } .footer .footer-links a { color: #eee; margin: 5px 8px; font-size: 15px; } .footer .footer-links a:hover { opacity: .8; } .animate { animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-fill-mode: both; -webkit-animation-fill-mode: both; } @keyframes slideIn { 0% { -webkit-transform: translateY(1rem); transform: translateY(1rem); opacity: 0; } 100% { -webkit-transform: translateY(0rem); transform: translateY(0rem); opacity: 1; } 0% { -webkit-transform: translateY(1rem); transform: translateY(1rem); opacity: 0; } } @-webkit-keyframes slideIn { 0% { -webkit-transform: transform; -webkit-opacity: 0; } 100% { -webkit-transform: translateY(0); -webkit-opacity: 1; } 0% { -webkit-transform: translateY(1rem); -webkit-opacity: 0; } } .slideIn { -webkit-animation-name: slideIn; animation-name: slideIn; } .toast-message { font-family: 'Roboto', 'Cairo', sans-serif; } .swiper-button-next, .swiper-button-prev { color: #fff; } .vr-adv-unit.vr-adv-unit-728x90 { width: 100%; min-width: 728px; max-width: 728px; height: 90px; max-height: 90px; } .vr-adv-unit.vr-adv-unit-300x280 { width: 100%; min-width: 300px; max-width: 300px; height: 280px; max-height: 280px; } @media (max-width: 767.98px) { .vr-adv-unit.vr-adv-unit-728x90 { width: 100%; min-width: 300px; max-width: 300px; height: 280px; max-height: 280px; } } .editor-desc img { max-width: 100%; } .fileviewer { display: flex; flex-direction: column; min-height: 100vh; background-color: #202020; color: #fff; font-size: 14px; } .fileviewer .fileviewer-body { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; flex-shrink: 0; } .fileviewer .fileviewer-body .contextmenu { visibility: hidden; position: fixed; width: 200px; background-color: #404040; -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); opacity: 0; transition: .3s visibility, .3s opacity; z-index: 1040; border-radius: 5px; overflow: hidden; } .fileviewer .fileviewer-body .contextmenu .contextmenu-item { display: flex; align-items: center; padding: 12px 10px; color: #fff; cursor: pointer; font-size: 12px; } .fileviewer .fileviewer-body .contextmenu .contextmenu-item i { width: 30px; font-size: 13px; } .fileviewer .fileviewer-body .contextmenu .contextmenu-item:hover { background-color: #494949; } .fileviewer .fileviewer-body .contextmenu.show { visibility: visible; opacity: 1; } .fileviewer .fileviewer-body .fileviewer-file { display: inline-block; padding-left: 10px; padding-right: 10px; } .fileviewer .fileviewer-body .fileviewer-image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .fileviewer .fileviewer-body .fileviewer-image img.r-0 { transform: rotate(0deg); } .fileviewer .fileviewer-body .fileviewer-image img.rp-90 { transform: rotate(90deg); } .fileviewer .fileviewer-body .fileviewer-image img.rp-180 { transform: rotate(180deg); } .fileviewer .fileviewer-body .fileviewer-image img.rp-270 { transform: rotate(270deg); } .fileviewer .fileviewer-body .fileviewer-image img.rm-90 { transform: rotate(-90deg); } .fileviewer .fileviewer-body .fileviewer-image img.rm-180 { transform: rotate(-180deg); } .fileviewer .fileviewer-body .fileviewer-image img.rm-270 { transform: rotate(-270deg); } .fileviewer .fileviewer-body .fileviewer-pdf canvas { display: block; max-width: 100%; margin-right: auto; margin-left: auto; } .fileviewer .fileviewer-body .fileviewer-pdf .canvas-wrapper:first-child { margin-top: 10px; } .fileviewer .fileviewer-body .fileviewer-pdf .canvas-wrapper:last-child { margin-bottom: 10px; } .fileviewer .fileviewer-body .fileviewer-pdf .canvas-wrapper:not(:last-child) { margin-bottom: 16px; } .fileviewer .fileviewer-controler { position: fixed; bottom: 20px; left: 50%; display: flex; align-items: center; background-color: #2e2e2e; border-radius: 5px; padding: 5px; transform: translateX(-50%); visibility: hidden; opacity: 0; transition: .5s .5s; } .fileviewer .fileviewer-controler .fileviewer-controler-item { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; cursor: pointer; transition: .3s; border-radius: 5px; } .fileviewer .fileviewer-controler .fileviewer-controler-item:not(:last-child) { margin-right: 5px; } .fileviewer .fileviewer-controler .fileviewer-controler-item.rotate-right i { transform: scaleX(-1); } .fileviewer .fileviewer-controler .fileviewer-controler-item:hover { background-color: #404040; } .fileviewer:hover .fileviewer-controler { visibility: visible; opacity: 1; transition-delay: 0s; } .obj-viewer { width: 100%; height: 100vh; }