/* Colors */ :root { --astrad-black: #000000; --astrad-pink: #d63384; --astrad-cyan: #17a2b8; --astrad-white: #ffffff; --astrad-gray-dark: #343a40; --astrad-primary: #FF0066; --astrad-primary-dark: #e00e62; --astrad-secondary: #162238; --astrad-secondary-dark: #121a2d; --astrad-gray: #dedede; --astrad-gray-light: #f7f7f7; --astrad-gray-500: #f2f2f2; --astrad-gray-500-thumb: #c2c2c2; --astrad-danger: #dc3545; --astrad-light: #faf2f5; --astrad-dark: #343a40; --astrad-theme-radius: 6.25rem; --astrad-transition: all .35s cubic-bezier(.645, .045, .355, 1); --astrad-transition-slow: all .55s cubic-bezier(.645, .045, .355, 1); --astrad-transition-very-slow: all .75s cubic-bezier(.645, .045, .355, 1); } /*--basic css--*/ ul { list-style: none; padding-left: 0; margin-left: 0; } ::selection { background: var(--astrad-primary); color: #fff; } /* keyboard */ a:hover, a:active, a:focus { transition: all 0.4s; color: var(--astrad-primary); text-decoration: underline; text-decoration-style: dotted; } a, area, button, input, label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation; -webkit-transition: transparent; transition: transparent; } button, input, optgroup, select, textarea { margin: 0; } .btn:focus { box-shadow: 0 0 0 3px rgb(121 82 179 / 25%); } .btn.focus, .btn:focus, button:focus, input:focus, select:focus, option:focus, textarea:focus { box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 50%)!important; } .btn-check:focus+.btn-outline-primary, .btn-outline-primary:focus { box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 50%); } .btn-check:focus+.btn, .btn:focus { outline: 0; box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); } .btn-primary:hover, .btn-primary:focus-within, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:focus { overflow: hidden; border-radius: 5px; color: #fff; border-color: var(--astrad-primary); background: var(--astrad-primary); box-shadow: 0px 20px 20px 0px rgba(157, 157, 157, 0.5); border-width: 2px; } a { color: var(--dcode-secondary); text-decoration: none; background-color: transparent; } *, ::after, ::before { box-sizing: border-box; } a:-webkit-any-link:focus { outline-offset: 1px #000; } :focus { outline: -webkit-focus-ring-color auto 1px #000; } .select2-container--default:focus, .select2-selection--single:focus, select:focus, input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, textarea:focus { color: var(--astrad-secondary); outline-offset: -6px!important; outline: 2px dotted var(--astrad-secondary)!important; } /* theme-button */ body .btn-primary:hover { background-color: var(--astrad-secondary); border-color: var(--astrad-secondary); } /*--header--*/ header .nav-link:hover, header .nav-link:focus { color: var(--astrad-gray); } .navbar-nav { text-align: left; } .navbar-nav .nav-link { text-transform: capitalize; font-size: 18px; } nav .dropdown li:hover, nav .dropdown li:focus-within { width: 100%; background-color: var(--astrad-primary); transition: all 0.6s; } .navbar .dropdown-toggle::after { display: none; } .navbar { background-color: transparent; position: absolute; z-index: 99; top: 0; width: 100%; color: #fff; } .navbar .container { background-color: #ffffff26; margin-top: 30px; padding: 0 0 0 20px; } .site-header.sticky { position: fixed; top: 0; width: 100%; z-index: 99; } .site-header.sticky .navbar .container { background-color: transparent; margin-top: 0; } .site-header .navbar { transition: var(--astrad-transition); } .site-header.sticky .navbar { background-color: var(--astrad-primary); transition: var(--astrad-transition); padding: 0; } .site-header.sticky .navbar .container img.custom-logo { max-width: 140px; } .sticky .menu-item a { padding: 10px 10px; } .site-title { margin-bottom: 0; color: #fff; } .site-title a { font-size: 30px; padding: 0; font-weight: bold; color: #fff!important; text-transform: uppercase; } img.custom-logo { max-width: 160px; transition: var(--astrad-transition); } .navbar.sticky img.custom-logo { max-width: 160px; transition: var(--astrad-transition); } button.menu-toggle.on { padding: 0; } body #site-navigation .menu-toggle { width: 28px; height: 30px; margin: 10px auto; padding: 0; background-color: transparent; box-shadow: none; } #site-navigation .menu-toggle div { width: 100%; height: 1px; background: #fff; margin: 8px auto; transition: all 0.3s; backface-visibility: hidden; } #site-navigation .menu-toggle.on .one { transform: rotate(45deg) translate(5px, 5px); } #site-navigation .menu-toggle.on .two { opacity: 0; } #site-navigation .menu-toggle.on .three { transform: rotate(-45deg) translate(7px, -8px); } #site-navigation .nav-link.search-btn { color: #ffffff; height: 100p; background-color: var(--astrad-primary); padding: 30px 35px; margin: 0; } .sticky #site-navigation .nav-link.search-btn { background-color: var(--astrad-secondary); } /* search box */ #search-form { position: fixed; left: 0; top: 0; right: 0; border: 0; border-radius: 0; background-color: #fff; box-shadow: 10px 6px 10px #00000014; z-index: 999; } #search-form .card.card-body { border: 0; border-radius: 0; max-width: 1270px; margin: 0 auto; background-color: transparent; } #search-form form { width: 100%; display: flex; height: 160px; align-items: center; } #search-form .btn-search { padding: 18px 26px; background-color: var(--astrad-secondary); color: #fff; border-bottom: 1px solid var(--astrad-primary); border-radius: 0; } #search-form .btn-search-close { padding: 18px 26px; color: #fff; background-color: var(--astrad-primary); border-radius: 0; } #search-form input.form-control { background-color: transparent; border: 0; border-radius: 0; padding: 8px 15px; border-bottom: 1px solid var(--astrad-primary); min-height: 60px; } /*--weights-sidebar--*/ td#today { background-color: var(--astrad-primary); color: #fff; } td#today a { color: #fff; } .calendar_wrap { background-color: #ffffff12; padding: 15px; } #wp-calendar { text-align: center; caption-side: top; } #wp-calendar caption { color: var(--astrad-primary)!important; text-align: left; text-align: center; font-size: 20px; padding: 4px; margin-bottom: 10px; background-color: #f7f7f7; } #wp-calendar span.btn-group { width: 100%; } #wp-calendar span.btn-group a.btn.text-left { text-align: left; } #wp-calendar span.btn-group a.btn.text-right { text-align: right; } #wp-calendar span.btn-group i { padding: 5px; background-color: var(--astrad-primary); color: #fff; } #wp-calendar td { padding: 8px; } #wp-calendar td.today { background-color: var(--astrad-primary); color: #fff; } #wp-calendar a.btn.active { text-transform: uppercase; font-weight: bold; font-size: 20px; } .widget { margin: 0 0 1.5em; padding: 20px; border-radius: 0px; box-shadow: -4px 8px 30px 0px #00000021; } .widget ul { padding-left: 0; margin-left: 0; } .widget ul ul { padding-left: 10px; border-left: 1px solid #ccc; } .widget li { list-style: none; } .widget li a { position: relative; line-height: 21px; z-index: 0; padding: 7px 1px; border: 0; display: inline-block !important; text-decoration: none; transition: var(--astrad-transition); color: var(--astrad-black); } .widget li a:hover, .widget li a:focus { transition: var(--astrad-transition); color: var(--astrad-primary)!important; } .mphb_widget_search-form label { padding-top: 8px; } .mphb_widget_search-form { padding: 15px; } .mphb_widget_search-form select, .mphb_widget_search-form input { width: 100%; height: 46px; padding: 10px; } body .tagcloud a { color: var(--astrad-secondary); background-color: #edecec; padding: 3px 7px !important; line-height: 1.8; display: inline-block; margin: 4px; font-size: 18px !important; text-decoration: none; word-break: break-word; border-radius: 0; text-align: center; transition: var(--astrad-transition); } .tagcloud a:hover, .tagcloud a:focus { background-color: var(--astrad-primary); color: #fff; transition: var(--astrad-transition); } .menu .menu-item a { display: flex!important; align-content: center; justify-content: space-between; } .comments-area { margin-top: 60px; } .comments-area input, .comments-area select, .comments-area textarea { min-height: 50px; width: 100%; } p.form-submit { width: fit-content; } .comment-form-cookies-consent { display: flex; align-items: center; } .comment-form-cookies-consent input#wp-comment-cookies-consent { width: 20px; margin-right: 10px; } .comments-area { margin-top: 60px; padding: 40px; background-color: #edecec; } /*--special classes--*/ .container-space { padding-top: 80px; padding-bottom: 80px; } /*--blog-post--*/ article { padding: 30px; box-shadow: 15px 18px 48px #0c0c0c1f; box-shadow: 8px 8px 30px 0px #cccccc69; } .wp-block-quote { border-color: var(--astrad-primary); } .entry-title a { text-decoration: none; color: #000; text-transform: capitalize; } .widget-title { transform: translate(-20px, -20px); width: calc(100% + 40px)!important; padding: 10px 15px; border-left: 3px solid var(--astrad-primary); color: #ffffff; background-color: var(--astrad-secondary); text-transform: capitalize; font-size: 24px; } .mphb_sc_search-wrapper input, .mphb_sc_search-wrapper select { width: 100%; height: 46px; padding: 10px; } span.meta-nav { color: #333; font-size: 20px; /*display: block;*/ text-decoration: none; } .recentcomments { margin: 10px 0; } /*--form---*/ .form-control, .search-field { border-radius: 0; display: block; line-height: 1.5; font-size: 0.97rem; font-weight: 500; padding: 0.65rem 1.25rem; min-height: 50px; background-color: #03a9f417; border: 1px solid var(--astrad-gray-light); outline: none; letter-spacing: 0.5px; box-shadow: none; transition: var(--astrad-transition); } .search-form input[type="submit"] { background-color: var(--astrad-primary); font-size: 14px!important; font-weight: 600; font-size: 19px; padding: 13px 29px; color: #fff; cursor: pointer; box-shadow: none; text-align: center; border: none; background-size: 300% 100%; transition: var(--astrad-transition); } .search-form .search-submit { border-radius: 0; font-size: 19px; background-color: var(--astrad-primary); padding: 4px 17px; color: #fff; border: 0; } .search-form { display: flex; overflow: hidden; align-content: center; } .search-field { border: 0; padding-left: 15px!important; width: 100%; border: 0!important; } .search-form label { width: 100%; margin-bottom: 0; } .main-navigation { display: flex; flex-direction: column } /* --footer css -- */ .site-footer { background-color: var(--astrad-secondary); padding: 60px 0 0 0; } .site-footer .widget { color: #fff; box-shadow: none; } footer .widget-title { display: block; transform: initial; padding: 10px 15px; margin-bottom: 40px; width: 100%!important; background-color: rgb(255 255 255 / 4%); } .site-info { background-color: var(--astrad-secondary-dark); text-align: center; padding: 15px; color: #fff; margin-top: 40px; } body .site-info a { color: #fff; } footer .gallery-item { margin-bottom: 0; } footer .widget { padding: 0; } footer .gallery { margin-bottom: 0; display: grid; grid-gap: 10px; } /*--comment-box--*/ .comment-list article { margin: 30px 0; background-color: #fff; } /*--woocommerce--*/ .woocommerce {} .woocommerce li a { background-color: var(--astrad-dark); display: inline-block; padding: 6px 20px; font-size: 16px; color: #fff; margin: 2px 0px; } .woocommerce li a:hover, .woocommerce li a:focus { background-color: var(--astrad-primary); } /* --breadcrumb-- */ section.page-title.breadcrumb-main { padding-top: 200px; } .breadcrumb-container { display: flex; align-items: flex-end; justify-content: center; text-align: center; padding-bottom: 60px; position: relative; z-index: 9; } .breadcrumb-container ol.breadcrumb { margin-left: 0; } .breadcrumb-main .page-title { padding-top: 20px; color: var(--astrad-white); margin-bottom: 22px; font-size: calc(4vw); } ol.breadcrumb { margin-bottom: 20px; } .breadcrumb-item a { color: var(--astrad-white)!important; } .breadcrumb-item+.breadcrumb-item::before { color: var(--astrad-white); } .header-wrapper { background-position: center; position: relative; background-size: cover; background-repeat: no-repeat; } .header-wrapper:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: #000; opacity: 0.8; } .breadcrumb-item.active { color: var(--astrad-primary); } .breadcrumb-item { font-size: 18px; } .site-footer .widget li a { color: var(--astrad-white); } .btn-astrad-button { background-color: var(--astrad-primary); font-size: 17px!important; font-weight: 600; padding: 7px 17px; border-radius: 0; margin-top: 15px; color: #fff!important; cursor: pointer; box-shadow: none; text-align: center; border: none; background-size: 300% 100%; transition: var(--astrad-transition); box-shadow: 8px 8px 30px 0px #cccccc73; } .entry-footer span { margin-right: 10px; font-weight: 600; } .entry-meta span { font-weight: 600; } .navigation.post-navigation, .navigation.posts-navigation { margin-top: 30px; padding: 23px 20px; background-color: #eaedf3; border: 1px solid #eaedf3; } .navigation.pagination .page-numbers { padding: 8px 14px; font-size: 18px; box-shadow: 8px 8px 30px 0px #d7d3d36b; margin-right: 6px; border: 1px solid var(--astrad-primary); border-radius: 0; color: var(--astrad-primary); } span.page-numbers.current { background: var(--astrad-primary); color: var(--astrad-white)!important; padding: 8px 14px; font-size: 16px; } .post .entry-title a { color: #000000c2; } /* preloader */ .preloader { overflow: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background-color: #ffffff; z-index: 999; align-items: center; justify-content: center; } .preloader-inner { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } .loader { width: 100px; height: 100px; font-size: 10px; position: relative; display: flex; align-items: center; justify-content: center; } .loader .face { position: absolute; border-radius: 50%; border-style: solid; animation: animate 3s linear infinite; } .loader .face:nth-child(1) { width: 100%; height: 100%; color: var(--astrad-primary); border-color: currentColor transparent transparent currentColor; border-width: 0.2em 0.2em 0em 0em; --deg: -45deg; animation-direction: normal; } .loader .face:nth-child(2) { width: 70%; height: 70%; color: var(--astrad-secondary); border-color: currentColor currentColor transparent transparent; border-width: 0.2em 0em 0em 0.2em; --deg: -135deg; animation-direction: reverse; } .loader .face .circle { position: absolute; width: 50%; height: 0.1em; top: 50%; left: 50%; background-color: transparent; transform: rotate(var(--deg)); transform-origin: left; } .loader .face .circle::before { position: absolute; top: -0.5em; right: -0.5em; content: ""; width: 1em; height: 1em; background-color: currentColor; border-radius: 50%; box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1); } @keyframes animate { to { transform: rotate(1turn); } } /*back to top */ .scroll-to-top { display: block !important; position: fixed!important; z-index: 9; display: none; color: var(--astrad-secondary); background-color: var(--astrad-primary); padding: 6px 12px 9px 12px; font-size: 16px; border-radius: 100%; right: 40px; bottom: 40px; opacity: 0; } .scroll-to-top i { position: relative; z-index: 9; color: #fff; } .scroll-to-top:hover { color: var(--astrad-white); } .scroll-to-top.show { opacity: 1; } .animation-ripple { text-align: center; background-color: var(--astrad-primary); border-radius: 100%; transition: var(--astrad-transition); position: relative; } .animation-ripple i { position: relative; z-index: 2; } .animation-ripple::after, .animation-ripple::before { content: ''; border: 5px solid; border-color: inherit; width: 150%; height: 150%; border-radius: 50%; position: absolute; left: -25%; top: -25%; } .animation-ripple::before { border-color: var(--astrad-primary); background: var(--astrad-primary); opacity: 0.7; animation: 3s videomodule-anim linear infinite; } .animation-ripple::after { border-color: var(--astrad-primary); background: var(--astrad-primary); opacity: 0.5; animation: 2s videomodule-anim linear infinite; } .no-breadcrumb nav#site-navigation { background: var(--astrad-primary); } .no-breadcrumb .main-navigation .container { margin-top: 0px; background-color: transparent; } .no-breadcrumb .nav-link.search-btn { background-color: var(--astrad-secondary); } .no-breadcrumb .container-space { padding-top: 170px; } .post.sticky { background: #ff006614; box-shadow: 8px 8px 30px 0px #e3e2e25c; } .comment-author img.avatar.avatar-60.photo { border-radius: 50%; } .comment-author.vcard { margin-bottom: 10px; } .post .post-thumbnail img { margin-top: 15px; } .post-navigation .col-6.text-right { text-align: right; } .site-footer .widget_nav_menu .dropdown-menu, aside#secondary .widget_nav_menu .dropdown-menu { display: block; position: relative; background: transparent; border-right: transparent; border-top: transparent; border-bottom: transparent; border-radius: 0; } .site-footer .widget_nav_menu button.caret, aside#secondary .widget_nav_menu button.caret { display: none; } @-webkit-keyframes videomodule-anim { 0% { transform: scale(0.68); } 100% { transform: scale(1.4); opacity: 0; } } @media screen and (min-width: 1024px) { .boxed-layout, .frame-layout { background-color: #696969; } .boxed-layout #page, .frame-layout #page { max-width: 1400px; width: 90%; margin-left: auto; margin-right: auto; background-color: #fff; } .boxed-layout .site-header.sticky, .frame-layout .site-header.sticky { max-width: 1400px; width: 90%; margin-left: auto; margin-right: auto; } .frame-layout #page { margin: 50px auto; } } /* add new */ @media (max-width: 991.98px) {}