/*! Theme Name: Amike Lite Theme URI: https://themebing.com/wp/amike_lite/ Author: ThemeBing Author URI: https://themebing.com/ Description: Amike Portfolio Landing WordPress Theme Version: 1.0.0 Tested up to: 5.4 Requires PHP: 7.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: amike_lite Tags: custom-background, custom-logo, custom-menu, blog , threaded-comments, translation-ready */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Elements # Navigation # WordPress Core # Galleries # team # service # portfolio # Contact Form # Comments # Blog # 404 # Footer # Responsive --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ body { font-family: Poppins; background: #1F2235; color: #dfdfdf; line-height: 26px; } h1, h2, h3, h4, h5, h6 { -ms-word-wrap: break-word; word-wrap: break-word; color: #fff; } h1:not(:last-child), h2:not(:last-child), h3:not(:last-child), h4:not(:last-child), h5:not(:last-child), h6:not(:last-child) { margin-bottom: 25px; } a { text-decoration: none; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } a:hover { color: #ff2c2c; } a:hover, a:focus, a:active { color: inherit; text-decoration: none; } a:focus { outline: inherit; } a:hover, a:active { outline: 0; } table { width: 100%; margin-bottom: 20px; } table tr, table th, table td { background: #23263a; padding: 10px; border: 1px solid #f4f5f8; color: #fff; } pre { background: #23263a; color: #ddd; padding: 30px; overflow: auto; max-width: 100%; } img { height: auto; max-width: 100%; } blockquote:not(:last-child) { margin-bottom: 25px; } blockquote { background: #23263a; padding: 30px; font-size: 20px; border-radius: 6px; position: relative; } blockquote>* { z-index: 1; position: relative; margin-bottom: 0; } blockquote p { font-style: italic; } ul, ol { padding-left: 20px; } li>ul, li>ol { margin-bottom: 0; margin-left: 1.5em; } ::-webkit-input-placeholder { color: #dfdfdf; opacity: 1; } ::-moz-placeholder { color: #dfdfdf; opacity: 1; } :-ms-input-placeholder { color: #dfdfdf; opacity: 1; } ::-ms-input-placeholder { color: #dfdfdf; opacity: 1; } ::placeholder { color: #dfdfdf; opacity: 1; } :-ms-input-placeholder { color: #dfdfdf; } ::-ms-input-placeholder { color: #dfdfdf; } [type=search] { background: transparent; outline-offset: -2px; -webkit-appearance: none; border: none; padding: 17px 15px; border-radius: 50px; width: 100%; border: 1px solid #f4f5f8; color: #fff; } select { width: 100%; background: #1F2235; color: #fff; border: 1px solid #3f4254; padding: 10px; } [type=password], [type=reset], [type=submit], button, html [type=button] { color: #fff !important; display: inline-block; padding: 18px 40px; border-radius: 100px; border: none; } .post-password-form input[type=password] { background: transparent; border: 1px solid; } .post-password-form input[type=password]:focus { outline: none; } textarea { color: #fff; } .search-form { position: relative; } .search-form [type=search] { width: unset; } button:focus { outline: none; } .sticky .post-item-content { color: #fff; } .sticky .post-item-content h3, .sticky .post-item-content a, .sticky .post-item-content p { color: #fff; } .sticky .post-item-content h3:hover { color: #fff; } .home-mb-100 { margin-bottom: 100px; border-top: 1px solid #ccc; } .elementor-widget-text-editor, .elementor-widget-button a.elementor-button, .elementor-widget-button .elementor-button { font-family: Poppins !important; } .elementor-button { border-radius: 0 !important; } .dropdown-menu { border-radius: 6px; background: #23263a; } .dropdown-item { padding: 10px 15px; } .dropdown-item:focus, .dropdown-item:hover, .dropdown-item, .dropdown-item.active, .dropdown-item:active { color: #fff; } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .wp-block-image { margin-bottom: 15px; } .wp-block-spacer { clear: both; } .wp-block-calendar table th { background: inherit; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /* ==================================== Navigation ==================================== */ body.admin-bar .fixed-top { top: 28px; } .navbar { padding: 30px 0; } .navbar.fixed-top { background: #1F2235; -webkit-box-shadow: 0px 18px 40px -30px #23263a; box-shadow: 0px 18px 40px -30px #23263a; -webkit-animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown; animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown; } .navbar-logo { font-size: 24px; font-weight: bold; display: inline-block; } .custom-logo-link img { width: 110px; } .navbar-nav .nav-link { margin: 0 10px; font-weight: 500; color: #fff; font-size: 18px; } .menu-item:last-child .nav-link { margin-right: 0; padding-right: 0; } .navbar-toggler { background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(225, 225, 225, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); font-size: 24px; } .breadcrumb-item+.breadcrumb-item::before { content: '>'; color: #fff; margin: 0px 5px; } /*-------------------------------------------------------------- # Banner --------------------------------------------------------------*/ .banner { padding: 100px 0 0; } .about_me_image { margin: 0 auto; overflow: hidden; } .about_me_image img {} .banner .social { margin-top: 100px; } .banner .social li a { width: 50px; height: 50px; background: #1F2235; text-align: center; padding: 13px; border-radius: 50%; font-size: 20px; text-align: center; 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; } .banner .social li.list-inline-item:not(:last-child) { margin-right: 15px; } .banner h1 { margin-top: 50px; font-size: 58px; font-weight: 700; overflow: hidden; border-right: 5px solid transparent; white-space: nowrap; -webkit-animation: typing 3.5s steps(30, end), blink-caret .5s step-end 7; animation: typing 3.5s steps(30, end), blink-caret .5s step-end 7; } @-webkit-keyframes typing { from { width: 0 } to { width: 100% } } @keyframes typing { from { width: 0 } to { width: 100% } } @-webkit-keyframes blink-caret { from, to { border-color: white } 50% { border-color: transparent; } } @keyframes blink-caret { from, to { border-color: white } 50% { border-color: transparent; } } .banner p { font-size: 26px; line-height: 40px; font-weight: 300; margin-bottom: 50px; } .banner a { border: 2px solid; color: #fff; font-weight: 500; display: inline-block; padding: 13px 40px; border-radius: 50px; font-size: 15px; } .banner a.play-btn { text-align: center; border: none; margin-left: 15px; } .banner a.play-btn i { font-size: 20px; } /*-------------------------------------------------------------- # section title --------------------------------------------------------------*/ .section-title { position: relative; } .section-title.underline:after { position: absolute; content: ''; width: 10%; height: 3px; bottom: -35px; left: 0; right: 0; margin: 0 auto } .section-title i { font-size: 46px; margin-bottom: 15px; } .section-title>span { font-weight: 500; text-transform: uppercase; margin-bottom: 20px; display: block; } .section-title h2 { font-weight: bold; } .section-title h2 span { font-weight: bold; display: block; } .span-inline { display: inline-block !important; } .section-title p { line-height: 30px; } .title-desc { margin: 0 auto; line-height: 30px; } /*-------------------------------------------------------------- # Butrton --------------------------------------------------------------*/ .amike_lite-btn { color: #fff; font-weight: 500; display: inline-block; padding: 12px 40px; border-radius: 100px; font-size: 15px; margin: 0 7px; } .amike_lite-btn i { margin-right: 10px; } .amike_lite-btn.bordered { border: 2px solid; background: transparent !important; } /*-------------------------------------------------------------- # WordPress Core --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #eee; clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } .wp-block-button { margin-bottom: 20px; } .alignfull>figcaption, .alignfull>.wp-caption-text { margin-left: auto; margin-right: auto; } figure.wp-block-gallery.alignfull { margin-bottom: 100px; margin-top: 100px; } .wp-block-button__link { background: #ff4a57; } a:not([href]):not([tabindex]) { color: #dfdfdf; } .is-style-outline .wp-block-button__link { border: 2px solid #ff4a57; } /*-------------------------------------------------------------- # pricing --------------------------------------------------------------*/ .amike_lite-pricing-table { background: #23263a; padding: 50px 30px; border-radius: 10px; text-align: center; } .amike_lite-pricing-table .amike_lite-price { margin-bottom: 10px; } .amike_lite-pricing-table h1 { font-size: 70px; font-weight: 100; } .amike_lite-pricing-table ul { list-style: none; padding-left: 0; font-size: 15px; margin-bottom: 40px; } .amike_lite-pricing-table ul li { line-height: 50px; border-bottom: 1px solid #3c3c3c; } .amike_lite-pricing-table.recommended { border: 2px solid; position: relative; } .amike_lite-pricing-table.recommended:after { content: 'Recommended'; position: absolute; top: 0; left: 0; right: 0; width: 50%; margin: 0 auto; display: inline-block; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; } .amike_lite-currency { position: absolute; font-size: 20px; left: 27%; bottom: 20%; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /*-------------------------------------------------------------- # Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /*-------------------------------------------------------------- # team --------------------------------------------------------------*/ .team { text-align: center; } .team img { margin-bottom: 15px; } .team h6 { margin-bottom: 5px; } .team span { font-size: 12px; text-transform: uppercase; } /*-------------------------------------------------------------- # service --------------------------------------------------------------*/ .item-service { background: #23263a; padding: 50px 35px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .item-service:hover i { color: #fff; } .item-service i { font-size: 46px; display: inline-block; -webkit-transition: .8s linear; -o-transition: .8s linear; transition: .8s linear; -webkit-transform: rotateY(0); transform: rotateY(0); } .item-service:hover i { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .item-service h5 { margin-top: 30px; margin-bottom: 20px; } /*-------------------------------------------------------------- # portfolio --------------------------------------------------------------*/ .portfolio-filter { text-align: center; margin-bottom: 30px; } .portfolio-filter ul { margin-bottom: 50px; } .portfolio-filter ul .list-inline-item { border: 2px solid #23263a; background: #1F2235; padding: 5px 15px; border-radius: 20px; cursor: pointer; } .isotope_items .single_item { margin-bottom: 30px; position: relative; } .isotope_items .single_item img { border-radius: 6px; } .isotope_items .single_item_content { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); position: absolute; height: 100%; width: 92%; left: 4%; right: 0; bottom: 0; top: 0; padding: 30px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .isotope_items .single_item:hover .single_item_content { background: rgba(0, 0, 0, 0.63); border-radius: 6px; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .isotope_items .single_item_content span { font-size: 12px; color: #fff; text-transform: uppercase; } .isotope_items .single_item_content h6 { color: #fff; font-size: 24px; } /*-------------------------------------------------------------- # Blog --------------------------------------------------------------*/ .blog-item { position: relative; background: #23263a; border-radius: 10px; overflow: hidden; } .blog-item .blog-content { padding: 30px; } .blog-meta li { font-size: 14px; } .blog-meta li i { margin-right: 10px; } .blog-item h5 a { font-size: 18px; letter-spacing: 1px; color: #fff; } .blog-content>a { font-weight: 600; } .blog-content>a i { margin-left: 10px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .blog-content>a:hover i { margin-left: 5px; } /*-------------------------------------------------------------- # address --------------------------------------------------------------*/ .address { padding: 25px; padding-left: 20px; border-radius: 6px; background: #23263a; } .address i { font-size: 32px; } .address span { font-weight: bold; position: relative; font-size: 16px; top: -10px; color: #fff; left: 10px; } .address p { margin-bottom: 0; color: #fff; margin-left: 55px; } /*-------------------------------------------------------------- # Contact Form --------------------------------------------------------------*/ .contactform input[type=text], .contactform input[type=email] { border: none; width: 100%; background: #23263a; color: #fff; padding: 20px 35px; margin-bottom: 20px; border-radius: 6px; } .contactform textarea { border: none; background: #23263a; color: #fff; width: 100%; padding: 30px 35px; margin-bottom: 20px; height: 160px; overflow: hidden; border-radius: 6px; } .contactform input[type=submit] { padding: 18px 60px; cursor: pointer; display: inline-block; } /*-------------------------------------------------------------- # Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } .comment-navigation { margin-top: 30px; margin-bottom: 50px; } .comment-navigation .nav-links a { padding: 10px 30px; border-radius: 50px; color: #fff; display: inline-block; } .comments-area { padding: 100px 0 0; } .comment-list { list-style: none; padding: 0; margin: 0 } .comment-list li ul { list-style: none; } .single-comment { margin-right: 0; margin-left: 0; background: #23263a; margin-bottom: 30px; padding: 30px; border-radius: 6px; } .comment-avatar-img { -ms-flex: 0 0 13%; -webkit-box-flex: 0; flex: 0 0 13%; max-width: 13%; } .comment-text { -ms-flex: 0 0 87%; -webkit-box-flex: 0; flex: 0 0 87%; max-width: 87%; } .depth-5 .comment-avatar-img { -ms-flex: 0 0 15%; -webkit-box-flex: 0; flex: 0 0 15%; max-width: 15%; } .depth-5 .comment-text { -ms-flex: 0 0 85%; -webkit-box-flex: 0; flex: 0 0 85%; max-width: 85%; } .comment-avatar-img img { max-width: 90px; border-radius: 50%; } .comment-avatar-info h5 { font-size: 18px; margin-bottom: 0; display: inline-block; text-transform: capitalize; } .comment-avatar-info h5 span { font-size: 14px; margin-left: 5px; font-weight: 400; color: #ddd; } .comment-reply-link { float: right; font-size: 14px; font-weight: 500; } .comment-reply-link i { margin-right: 5px; } .comment-avatar-info { overflow: hidden; margin-bottom: 10px; } .comment-text p { margin-bottom: 0; } .comment-reply { margin-left: 50px; } .comment-form textarea { width: 100%; padding: 20px 35px; margin-bottom: 20px; background: #23263a; color: #fff; height: 160px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; border: none; border-radius: 6px; } .comment-form input { width: 100%; padding: 20px 35px; background: #23263a; color: #fff; border: none; margin-bottom: 20px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; border-radius: 6px; } .comment-form textarea::-webkit-input-placeholder, .comment-form input::-webkit-input-placeholder { font-size: 16px; opacity: .92; } .comment-form textarea::-moz-placeholder, .comment-form input::-moz-placeholder { font-size: 16px; opacity: .92; } .comment-form textarea:-ms-input-placeholder, .comment-form input:-ms-input-placeholder { font-size: 16px; opacity: .92; } .comment-form textarea::-ms-input-placeholder, .comment-form input::-ms-input-placeholder { font-size: 16px; opacity: .92; } .comment-form textarea::-webkit-input-placeholder, .comment-form input::-webkit-input-placeholder { font-size: 16px; opacity: .92; } .comment-form textarea::-moz-placeholder, .comment-form input::-moz-placeholder { font-size: 16px; opacity: .92; } .comment-form textarea:-ms-input-placeholder, .comment-form input:-ms-input-placeholder { font-size: 16px; opacity: .92; } .comment-form textarea::-ms-input-placeholder, .comment-form input::-ms-input-placeholder { font-size: 16px; opacity: .92; } .comment-form textarea::placeholder, .comment-form input::placeholder { font-size: 16px; opacity: .92; } .comment-form textarea:focus, .comment-form input:focus { border: none; } .comment-form .comment-form-cookies-consent { padding-left: 15px; } .comment-form .comment-form-cookies-consent input { width: inherit; margin-right: 10px; } .comments-title { margin-bottom: 50px !important } .logged-in-as { padding: 0 15px; } /*-------------------------------------------------------------- # Breadcrumb --------------------------------------------------------------*/ .breadcrumb { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: #23263a; padding: 5px 25px; margin: 0; } .breadcrumb i { margin: 5px 10px; } .breadcrumb-header { padding: 100px 0; } .breadcrumb-header .title-header h1 { font-weight: bold; } /*-------------------------------------------------------------- # Blog --------------------------------------------------------------*/ .amike_lite-wrapper { padding-bottom: 100px; } .single-post-image { position: relative; } .single-post-image img { border-radius: 10px; margin-bottom: 30px; } .post-item { border-radius: 6px; padding: 0; margin-bottom: 50px; overflow: hidden; } .post-item-image { position: relative; } .post-item-content { padding: 45px; background: #23263a; } .post-item-content h3 { font-weight: 600; font-size: 24px; line-height: 35px; margin-bottom: 0; } .post-item-content i { margin-right: 10px; } .post-item-content span { margin-bottom: 10px; display: block; text-transform: capitalize; } .post-item-content p { margin-top: 20px; } .post-item-content .readmore-btn { display: inline-block; margin-top: 20px; } .pagination { display: inline-block; margin-top: 40px; } .pagination .page-numbers { padding: 0 15px; font-size: 18px; } .pagination .prev, .pagination .next { color: #fff; display: inline-block; padding: 13px 17px; border-radius: 100px; margin: 0 7px; border: none; } .pagination .current { font-weight: bold; } .post-tag { margin-top: 70px; display: block; clear: both; } .page-links { clear: both; padding-top: 20px; } .post-tag a { background: #23263a; padding: 6px 15px; font-size: 12px; color: #fff; border-radius: 20px; margin: 0 5px; } .post-navigation { margin-top: 100px; overflow: hidden; } .post-navigation .nav-previous a, .post-navigation .nav-next a { background: #23263a; padding: 10px 30px; border-radius: 30px; display: inline-block; } .post-navigation .nav-previous { float: left; } .post-navigation .nav-next { float: right; } .post-navigation .nav-links a { font-weight: 600; color: #fff; } /*-------------------------------------------------------------- # Widget --------------------------------------------------------------*/ .widget-area .widget { background: #23263a; padding: 30px; margin-bottom: 50px; border-radius: 6px; } .widget .search-form button { position: absolute; } .search-form [type=search]:focus { outline: none; } .widget .search-form [type=search] { width: 90%; } .widget .search-form button { position: absolute; right: 0; padding-left: 30px; padding-right: 30px; } .search-form button i { font-size: 20px; } .widget-area .widget:last-child { margin-bottom: 0; } .widget-area .widget ul { list-style: none; padding: 0; margin-bottom: 0; } .widget-area .widget ul li { line-height: 26px; padding: 10px 0; border-bottom: 1px solid #3f4254; } .widget-area .widget ul li:last-child { border-bottom: 0; } .widget-area .widget ul li a { color: #dfdfdf; } .widget-area .widget .widget-title { position: relative; font-weight: 600; margin-bottom: 40px; } .widget-area .widget .widget-title:after { position: absolute; content: ''; width: 100%; height: 2px; bottom: -25px; left: 0; } .widget_search { position: relative; } .search-submit { position: absolute; padding: 11px 30px; } .widget_search .search-submit { right: 27px; } .sidebar-recent-post li { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: none !important; padding: 15px 0 !important; } .recent-post-thumb { width: 30%; } .recent-post-thumb img { border-radius: 6px; } .recent-post-content { position: relative; width: 70%; margin-left: 15px; } .recent-post-content p { font-size: 15px; line-height: 22px; } .recent-post-content span { position: absolute; bottom: -4px; left: 0; font-size: 12px; } .author-widget h5 { margin-bottom: 30px; } .author-widget-thumb img { background: #1f2235; width: 200px; height: auto; border-radius: 50%; } .author-widget p { margin: 30px 0 20px; } .author-widget-social li { padding: 0 !important; border-bottom: none !important; } .author-widget-social li.list-inline-item:not(:last-child) { margin-right: 15px; } .author-widget-social li a i { font-size: 20px; } .tagcloud a { display: inline-block; font-size: 16px !important; background: #1f2235; color: #dfdfdf; margin: 5px 1px; padding: 5px 20px; border-radius: 20px; } /*-------------------------------------------------------------- # partner --------------------------------------------------------------*/ .partner { text-align: center; } .partner .list-inline-item:not(:last-child) { margin-right: 0; } .partner li { width: 19%; text-align: center; margin-bottom: 50px; } .partner>li img { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; opacity: .3; } .partner>li:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); opacity: 1; } /*-------------------------------------------------------------- # Tab --------------------------------------------------------------*/ .amike_lite-tab .nav a { margin-right: 15px; border-radius: 6px; width: 180px; text-align: center; background: #23263a; color: #fff; padding: 15px 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .amike_lite-tab .nav a:last-child { margin-right: 0; } .amike_lite-tab .nav a.active { color: #fff; } /*-------------------------------------------------------------- # Testimonial --------------------------------------------------------------*/ .testimonial-content { padding: 40px 60px; background: #23263a; padding-left: 80px; margin-bottom: 35px; position: relative; border-radius: 3px; } .testimonial-content::before { content: "\f10e"; position: absolute; left: 35px; top: 35px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 30px; text-rendering: auto; -webkit-font-smoothing: antialiased; } .testimonial-content p { font-size: 18px; font-style: italic; line-height: 30px; margin-bottom: 15px; } .testimonial-rating i { font-size: 14px; margin-right: 3px; } .testimonial-avatar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 10px; } .testimonial-avatar-img { margin-right: 15px; } .testimonial-avatar-img img { border: 3px solid !important; width: 75px; border-radius: 50% !important; } .testimonial-avatar-info h5 { font-size: 18px; margin-bottom: 5px; } .testimonial .slick-arrow { position: absolute; right: 0; bottom: 15px; height: 40px; width: 40px; border: 2px solid #ebebeb; background: none; border-radius: 50%; font-size: 14px; color: #c7c2d3; line-height: 40px; z-index: 1; background: #23263a; padding: 0; -webkit-transition: .3s linear; -o-transition: .3s linear; transition: .3s linear; cursor: pointer; } .testimonial .slick-prev { right: 50px; } .testimonial .slick-arrow:hover { color: #2684fe; } /*-------------------------------------------------------------- # Counter --------------------------------------------------------------*/ .counter i { font-size: 50px; margin-bottom: 25px; } .counter h2 { font-size: 52px; } .counter span { font-size: 22px; } /*-------------------------------------------------------------- # Progress bar --------------------------------------------------------------*/ .skill { margin-bottom: 10px; position: relative; overflow: hidden; } .skill>p { color: #fff; margin-bottom: 10px; } .skill:before { width: 100%; height: 5px; content: ""; display: block; position: absolute; background: #23263a; bottom: 0; } .skill-bar { width: 100%; height: 5px; display: block; position: relative; } .skill-bar span { border: .125rem solid #fff; position: absolute; top: -36px; font-size: 12px; padding: 0px 12px !important; font-weight: 500; border-radius: 6px; } .skill-count { right: 0; } .skill-bar span:after { border-style: solid; border-width: .3125rem .3125rem 0 0; border-color: #fff transparent transparent transparent; bottom: -0.4375rem; content: ""; left: 1.375rem; position: absolute; } /*-------------------------------------------------------------- # 404 --------------------------------------------------------------*/ .error-404 p { margin: 30px 0 60px; } .error-404 span { font-size: 172px; margin: 100px 0 100px; display: block; font-weight: bold; } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .site-footer { background: #23263a; text-align: center; padding: 100px 0 0; } .site-footer .navbar-logo { font-size: 32px } .site-footer .custom-logo-link img { width: 160px; } .footer-social { margin-top: 50px; margin-bottom: 70px; } .footer-text { font-size: 18px; line-height: 30px; } .footer-social li a { width: 60px; height: 60px; color: #fff; background: #1F2235; text-align: center; padding: 13px; border-radius: 50%; font-size: 20px; text-align: center; 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; } .copyright-text { padding: 30px 0; background: #1F2235; } .copyright-text p { margin-bottom: 0; } /*-------------------------------------------------------------- # Back to Top --------------------------------------------------------------*/ #backtotop { position: fixed; bottom: 40px; right: 30px; display: none; } #backtotop i { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #backtotop i:hover { cursor: pointer; } /*-------------------------------------------------------------- # Preloader --------------------------------------------------------------*/ #preloader { background: #23263a; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: table; text-align: center; } .spinner { margin: auto; text-align: center; display: table-cell; vertical-align: middle; } @-webkit-keyframes uil-ripple { 0% { width: 0; height: 0; opacity: 0; margin: 0 0 0 0; } 33% { width: 44%; height: 44%; margin: -22% 0 0 -22%; opacity: 1; } 100% { width: 88%; height: 88%; margin: -44% 0 0 -44%; opacity: 0; } } @-webkit-keyframes uil-ripple { 0% { width: 0; height: 0; opacity: 0; margin: 0 0 0 0; } 33% { width: 44%; height: 44%; margin: -22% 0 0 -22%; opacity: 1; } 100% { width: 88%; height: 88%; margin: -44% 0 0 -44%; opacity: 0; } } @-webkit-keyframes uil-ripple { 0% { width: 0; height: 0; opacity: 0; margin: 0 0 0 0; } 33% { width: 44%; height: 44%; margin: -22% 0 0 -22%; opacity: 1; } 100% { width: 88%; height: 88%; margin: -44% 0 0 -44%; opacity: 0; } } @keyframes uil-ripple { 0% { width: 0; height: 0; opacity: 0; margin: 0 0 0 0; } 33% { width: 44%; height: 44%; margin: -22% 0 0 -22%; opacity: 1; } 100% { width: 88%; height: 88%; margin: -44% 0 0 -44%; opacity: 0; } } .uil-ripple-css { background: none; position: relative; width: 200px; height: 200px; margin: 0 auto; } .uil-ripple-css div { position: absolute; top: 50%; left: 50%; margin: 0; width: 0; height: 0; opacity: 0; border-radius: 50%; border-width: 12px; border-style: solid; -webkit-animation: uil-ripple 2s ease-out infinite; animation: uil-ripple 2s ease-out infinite; } .uil-ripple-css div:nth-of-type(1) { border-color: #fff; } .uil-ripple-css div:nth-of-type(2) { border-color: #fff; -webkit-animation-delay: 1s; animation-delay: 1s; } /*-------------------------------------------------------------- # Responsive --------------------------------------------------------------*/ @media (max-width: 1200px) { .comment-avatar-img { -ms-flex: 0 0 20%; -webkit-box-flex: 0; flex: 0 0 20%; max-width: 20%; } .comment-text { -ms-flex: 0 0 80%; -webkit-box-flex: 0; flex: 0 0 80%; max-width: 80%; } .depth-5 .comment-avatar-img { -ms-flex: 0 0 25%; -webkit-box-flex: 0; flex: 0 0 25%; max-width: 25%; } .depth-5 .comment-text { -ms-flex: 0 0 75%; -webkit-box-flex: 0; flex: 0 0 75%; max-width: 75%; } } @media (max-width: 1024px) { .banner h1 { font-size: 54px; } .post-date { font-size: 5em; } .post-date:before { bottom: 25px; } .item-service-content { margin-left: 0; margin-top: 15px; } .rings .ring__ringlet { max-width: 600px; max-height: 600px; } } @media (max-width: 991px) { .banner .about_me_image { display: none; } .banner { padding-bottom: 100px; } .comment-avatar-img { -ms-flex: 0 0 20%; -webkit-box-flex: 0; flex: 0 0 20%; max-width: 20%; } .comment-avatar-img img { margin-right: 20px; } .comment-text { -ms-flex: 0 0 80%; -webkit-box-flex: 0; flex: 0 0 80%; max-width: 80%; } .depth-5 .comment-avatar-img { -ms-flex: 0 0 30%; -webkit-box-flex: 0; flex: 0 0 30%; max-width: 30%; } .depth-5 .comment-text { -ms-flex: 0 0 70%; -webkit-box-flex: 0; flex: 0 0 70%; max-width: 70%; } .widget .search-form [type=search] { width: 100%; } .widget .search-form button { display: none; } } @media (max-width: 768px) { .navbar-nav .nav-link { padding: 15px; background: #23263a; margin: 0; } .navbar .container { padding: 0 15px; } .banner { padding: 0 0 100px; text-align: center; } .banner h1 { font-size: 46px; margin-top: 50px; } .widget_search .search-submit { display: none; } nav li a { font-size: 16px; } .banner h1 { margin-top: 0; } .breadcrumb-header .title-header h1 { font-size: 28px; } .counter { margin: 50px 0; } .blog-item { margin: 15px 0; } .calendar_wrap table tr, .calendar_wrap table th, .calendar_wrap table td { padding: 0; } .comment-avatar-img { -ms-flex: 0 0 25%; -webkit-box-flex: 0; flex: 0 0 25%; max-width: 25%; } .comment-avatar-img img { width: 80px; } .comment-text { -ms-flex: 0 0 75%; -webkit-box-flex: 0; flex: 0 0 75%; max-width: 75%; } .depth-5 .comment-avatar-img { -ms-flex: 0 0 40%; -webkit-box-flex: 0; flex: 0 0 40%; max-width: 40%; } .depth-5 .comment-text { -ms-flex: 0 0 60%; -webkit-box-flex: 0; flex: 0 0 60%; max-width: 60%; } } @media (max-width: 481px) { .banner h1 { white-space: unset; -webkit-animation: unset; animation: unset; border: none; font-size: 42px; } .testimonial { text-align: center; padding: 0; } .testimonial img, .testimonial h6, .testimonial span { margin: 0 auto; } .partner li { width: 50%; } .title-desc { width: auto; } .banner ul li:first-child a { margin-bottom: 15px; } body.admin-bar .fixed-top { top: 0; } .navbar { padding: 15px; } .portfolio-filter { text-align: center; } .pagination { margin-bottom: 60px; } .calendar_wrap table tr, .calendar_wrap table th, .calendar_wrap table td { padding: 11px; } .post-item-content { padding: 30px; } .post-item-content h3 { font-weight: bold; } blockquote { padding: 30px; } blockquote:before { display: none; } } @media (max-width: 320px) { .footer-social li a, .banner .social li a { width: 40px; height: 40px; font-size: 16px; } .footer-text { font-size: 16px; } .banner h1 { font-size: 32px; } .banner p { font-size: 17px; line-height: 26px; } .item-service { padding: 35px 20px; } .item-service i { font-size: 35px; } .amike_lite-pricing-table h1 { font-size: 45px; } }