/* Theme Name: Appdetail Theme URI: Author: Mapro Collins Author URI: https://profiles.wordpress.org/ratinatemplates/ Description: Appdetail is a simple and easy to use, modern and creative, user friendly and elegant, WordPress theme for blog, news and magazine sites. It is responsive, cross browser compatible, SEO friendly theme with lots of highly created features. Theme have 2 images in slider section as well as video option make theme attractive in looking. Theme customization is very easy in use. Theme comes with beautiful slider section, featured post column, footer options, sidebar options, site design options and many more. It is very light weighted theme based on customizer. Added custom widgets for author information and advertisement will make your site awesome. Try Product today and blog away. Our dedicated support team will guide you in every steps while using theme. Version: 1.8 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: appdetail Tags: two-columns, right-sidebar, custom-background, custom-colors, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready, news, blog Appdetail WordPress Theme, Copyright (C) 2019 , ratinatemplates Appdetail is distributed under the terms of the GNU GPL */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- */ /*-------------------------------------------------------------- # 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; } @-webkit-keyframes spinAround { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spinAround { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /*========= Global Styles ========= */ body { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 400; margin: 0; padding: 0; color: #000; overflow-x: hidden } .h1, .h2, .h3, .h4, h1, h2, h3, h4, h5, p { margin: 0 } h4{ font-size: 20px; } ul, li { list-style: none; padding: 0; margin: 0; } p { line-height: 1.6; font-family: 'Open Sans', sans-serif; } a, a:hover { outline: 0; text-decoration: none; } a:focus{ text-decoration: none; } .btn.focus, .btn:focus, .btn:hover, button { outline: 0; } img { max-width: 100%; height: auto; } .form-control:focus { border: 0; } .center-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .s-pad { padding-top: 100px; padding-bottom: 100px; } .all-title { text-align: center } .all-title h3 { font-size: 40px; font-weight: 700; text-transform: uppercase; position: relative; padding-bottom: 20px; } .all-title .t-border::after { width:220px; height:2px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); content: ""; background-size: 100%; background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(84, 36, 191) 40%, rgb(84, 36, 191) 60%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(84, 36, 191) 40%, rgb(84, 36, 191) 60%, rgba(255, 255, 255, 0)); background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgb(84, 36, 191) 40%, rgb(84, 36, 191) 60%, rgba(255, 255, 255, 0)); } .all-title p { max-width: 700px; margin: 35px auto 50px; font-weight: 500; font-size: 16px; } .h-border { position: relative; } .h-border::after { position: absolute; content: ""; height: 2px; width: 54px; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: #5424bf; } .btn-custom { padding: 12px 30px; text-transform: capitalize; border-radius: 10px; font-weight: 600; color: #fff; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .o-hid { overflow: hidden; } .pb-150{ padding-bottom: 150px; } /* ============================ scroll top button ============================ */ .scrollBtn { display: none; position: fixed; text-align: center; color: #fff; bottom: 20px; right: 30px; width: 40px; height: 40px; z-index: 99; border: none; cursor: pointer; line-height: 40px; border-radius: 50%; font-size: 25px; -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; background-color: #5424bf; opacity: .7; box-shadow: 0px 2px 20px 0px #9b9b9b; } .scrollBtn:hover, .scrollBtn:focus { color: #fff; opacity: 1; } /*================== preloader Css ==================*/ #preloader { position: fixed; left: 0; top: 0; z-index: 9999999; width: 100%; height: 100%; overflow: visible; background: #fff url("assets/images/loader.gif") no-repeat center center; } /* ============================ menu ============================ */ .navbar { border: none; margin-bottom: 0; min-height: 70px; } .navbar-header { margin: 0 } .navbar > .container .navbar-brand { margin: 0 } .navbar-brand { height: auto; padding: 5px 0; } .navbar-default { background: none; border: none; width: 100%; border-radius: 0; padding-top: 40px; position: absolute; z-index: 99 } .navbar-right { margin: 4px 0; border-radius: 30px; text-align: center } .navbar-default .navbar-nav > li > a { padding: 20px 17px; text-transform: uppercase; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; color: #fff; font-weight: 400; border-radius: 50px; } .appin-menu .navbar-default .navbar-nav > .active > a, .appin-menu .navbar-default .navbar-nav > .active > a { color: #fff; background-color: #5424bf; } .navbar.affix { padding-top: 8px; padding-bottom: 8px; position: fixed; top: 0; z-index: 999; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; background-color: #000 } .navbar-default .navbar-toggle { border: 0; margin: 26px 0; padding: 0; color: #fff } /* ============================ Top-Section ============================ */ .top-banner { background-size: cover; position: relative; z-index: 0; padding: 180px 0 100px; } .top-banner-content { text-align: left; color: #fff } .top-banner-content h2 { margin-bottom: 10px; margin-top: 70px; font-weight: 600; text-transform: capitalize; line-height: 1.6em; font-size: 50px; letter-spacing: 4px; } .top-banner-content p { margin-bottom: 60px; margin-top: 30px; line-height: 2; font-size: 18px; font-weight: 400; } .top-banner::after { position: absolute; content: ""; background-color: rgba(0, 0, 0, 0.8); top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .top-banner .btn-video { text-transform: capitalize; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; padding: 15px 50px; font-size: 30px; color: #fff; border: none; border-radius: 10px; -webkit-box-shadow: 0 3px 12.74px 0.26px rgba(0, 0, 0, 0.68); -o-box-shadow: 0 3px 12.74px 0.26px rgba(0, 0, 0, 0.68); box-shadow: 0 3px 12.74px 0.26px rgba(0, 0, 0, 0.68); background-color: #5424bf; } .top-banner .btn-video i { margin-right: 15px; } .top-banner .btn-video:hover,.top-banner .btn-video:focus { background-color: #fff; color: #000; } /* ======== top-mobile-slider ========= */ .mobile-wrap { max-width: 250px; margin: 0 auto; } .mobile { position: relative; top: 55px; } .mobile::before { position: absolute; content: ""; left: 109px; top: -98px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 313px; background-size: 90%; height: 643px; } .mobile .owl-nav { position: relative; height: 32px; margin-top: 90px; margin-bottom: 60px; font-size: 30px; color: #fff } .mobile .owl-nav .owl-prev { left: 66px; position: absolute; display: inline-block; -webkit-transform: translatex(-50%); -ms-transform: translatex(-50%); transform: translatex(-50%); } .mobile .owl-nav .owl-next { right: 75px; position: absolute; display: inline-block; -webkit-transform: translatex(50%); -ms-transform: translatex(50%); transform: translatex(50%); } .mobile .owl-nav::after { background-color: #fff; content: ""; height: 24px; left: 48%; position: absolute; bottom: -2px; -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); width: 2px; } .mobile .owl-dots { counter-reset: slides-num; position: absolute; left: 50%; -webkit-transform: translatex(-50%); -ms-transform: translatex(-50%); transform: translatex(-50%); bottom: -7px; color: #fff; font-weight: 500; } .mobile .owl-dots:after { content: "0" counter(slides-num); display: inline-block; font-size: 18px; padding-top: 5px; } .mobile .owl-dot { display: inline-block; counter-increment: slides-num; margin-right: 10px; } .mobile .owl-dot.active:before { content: "0" counter(slides-num); display: inline-block; font-size: 18px; position: absolute; left: -10px; top: -4px; } /* ============================ about section ============================ */ .about { background-color: #f6f6f6; } .about-2 { background-color: #fff; } .about-item { padding: 40px 20px; margin: 20px auto; background-color: #fff; max-width: 400px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .about-2 .about-item { background-color: #f6f6f6; } .about-us h4 { font-weight: 600; padding-bottom: 20px; font-size: 25px; } .about-item:hover ,.about-item:focus { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, 0.30), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, 0.30); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, 0.30), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, 0.30); border: 1px solid #ccc; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); background-color: #fff; } .about-item h4 { font-weight: 600; padding: 30px 0 15px; position: relative; text-transform: capitalize; } .about-item p { padding-top: 15px; } /* ============================ how section ============================ */ .how { background-color: #fff; color: #000; } .h-phn { margin-bottom: 50px; margin-top: 50px; } .how-2 { background-size: cover; position: relative; color: #fff } .how-2:before { position: absolute; left: 0; top: 0; width: 100%; content: " "; height: 100%; } .h-phn img { -webkit-filter: drop-shadow(10px 20px 15px #989898); filter: drop-shadow(10px 20px 15px #989898); } .how-item { margin: 0 auto; margin-top:60px; max-width: 400px; padding: 0 20px; } .how-item h4 { font-weight: 600; padding: 30px 0 15px; position: relative; text-transform: capitalize; } .how-item p { padding-top: 15px; } .how-top { position: relative; margin-top: -180px; margin-bottom: 80px; -webkit-animation: movingbox 2.5s ease infinite; animation: movingbox 2.5s ease infinite; overflow: hidden; } @-webkit-keyframes movingbox { 0% { -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); } 50% { -webkit-transform: translate3d(0,30px,0); transform: translate3d(0,30px,0) } 100% { -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0) } } /* ============================ features section ============================ */ .features { background-size: cover; position: relative; z-index: 0; } .features::after { position: absolute; content: ""; background-color: rgba(241, 241, 241,0.95); left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .single-features { padding: 17px 30px; margin: 14px auto; max-width: 500px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; border-bottom: 2px solid transparent; } .single-features:hover,.single-features:focus { -webkit-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.4); -o-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.4); -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); border-bottom: 2px solid #5424bf; background-color: #fff; } .f-inner { position: relative; padding-left: 120px; text-align: left; } .f-inner img { position: absolute; left: 0; top:10px; } .single-features h4 { text-transform: capitalize; font-size: 20px; font-weight: 600; padding-bottom:15px; position: relative; } .single-features .h-border::after { left: 0; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .single-features p { padding-top: 15px; } /* ============================ video section ============================ */ .video { background-color: #f6f6f6; } .video-wrap { padding-bottom: 60px; position: relative; } .video-wrap .lapi { position: relative; -webkit-animation: movez 800ms linear; animation: movez 800ms linear; } @-webkit-keyframes movez { from { -webkit-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0); opacity: 0; } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1 } } @keyframes movez { from { -webkit-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0); opacity: 0; } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1 } } .video-wrap a img { position: absolute; top: 28%; left: 50%; width: 94px; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .video-space { height: 470px; background-color: #fff; margin-top: 100px } .video-2 .video-wrap { margin-top: -50%; } .count-box { position: relative; margin: 20px auto; max-width: 400px; border-radius: 20px; overflow: hidden; background-color: #fff; box-shadow: 0px 0px 35px 0px rgba(0, 1, 1, 0.15); } .box-purple { position: relative; border-radius: 0 0 35px 20px; width: 107%; left: -10px; top: -23px; padding: 45px 0 25px; -webkit-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg); background-color: #5424bf } .box-purple img { -webkit-transform: rotate(6deg); -ms-transform: rotate(6deg); transform: rotate(6deg); } .box-wit { padding: 7px 0 25px; } .box-wit h4 { text-transform: capitalize; font-weight: 600; position: relative; } .box-wit p { font-size: 35px; font-weight: 700; } /* ============================ screenshots section ============================ */ .screenshots { background-size: cover; position: relative; z-index: 0; } .screenshots::after { position: absolute; content: ""; background-color:rgba(85, 37, 191, .9); left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .screenshots .all-title { color: #fff } .screenshots .all-title .t-border::after { background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0)); background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0)); } .screenshots .all-title p { margin-bottom: 10px; } .appin-screenshot .swiper-slide { padding: 115px 43px; cursor: ew-resize } .swiper-container::before { background-size: cover; content: ""; height: 90%; left: 50%; position: absolute; top: 39px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 355px; z-index: 999; } .swiper-slide { width: 390px; height: auto; padding: 0 15px; } .swiper-slide img { display: block; margin: auto; width: 100%; -webkit-box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.9); box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.9); } .screen-nav { color: #fff; margin: 10px auto 0; text-align: center; } .screen-nav .prev, .screen-nav .next { cursor: pointer; background: #000; color: #fff; height: 49px; width: 85px; text-align: center; line-height: 0; padding: 9px 0; border-radius: 33px; font-size: 32px; margin: 0 25px; display: inline-block; transition: all .6s ease; } .screen-nav .prev:hover, .screen-nav .next:hover, .screen-nav .prev:focus, .screen-nav .next:focus{ background-color: #fff; color: #5424bf; } /* ============================ team section ============================ */ .box-main { position: relative; max-width: 300px; margin: 0 auto; background-color: #5424bf; color: #fff; margin-top: 100px; } .box-round { position: absolute; border-radius: 50%; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); width: 180px; height: 180px; top: -10px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden; z-index: 5; } .box-content { padding-bottom: 35px; } .box-round:before { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; content: ""; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: hidden; z-index: 8; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; background-color: rgba(0, 0, 0, .9); } .box-main:hover .box-round:before,.box-main:focus .box-round:before { opacity: 1; visibility: visible; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .box-round .social { position: absolute; top: 50%; left: 50%; width: 70%; opacity: 0; visibility: hidden; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 10; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .box-main:hover .box-round .social,.box-main:focus .box-round .social { -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); opacity: 1; visibility: visible; } .social li { display: inline-block; padding: 10px 20px } .social li a { font-size: 20px; color: #fff; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .social li a:hover,.social li a:focus { color: #5424bf } .box-content h4 { position: relative; padding-bottom: 5px; top: 110px; font-size: 20px; font-weight: 600; text-transform: capitalize } .box-content p { margin-top: 108px; text-transform: capitalize; font-size: 13px; } /* =============================== Client section =================================== */ .client { position: relative; background-size: cover; } .client:before { position: absolute; content: " "; height: 100%; width: 100%; left: 0; top: 0; background-color:rgba(85, 37, 191, .9); } .client .all-title { color: #fff; } .client .all-title .t-border::after { background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0)); background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0)); } .client .container-fluid { padding: 0; } .testi-top { position: relative; background: #fff; margin: 0 auto; width: 90%; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); padding: 35px 0; } .testi.owl-theme .owl-nav { color: #fff; margin: 50px auto 0; position: relative; } .testi.owl-theme .owl-nav [class*='owl-'] { cursor: pointer; background: #000; color: #fff; height: 49px; width: 85px; text-align: center; line-height: 0; padding: 9px 0; border-radius: 33px; margin: 0 25px; font-size: 32px; transition: all .6s ease; } .testi .owl-nav [class*='owl-']:hover,.testi .owl-nav [class*='owl-']:focus{ background-color: #fff; color: #5424bf; } /*.tag { border-style: solid; border-width: 18px 18px 18px 137px; border-color: #000 transparent #000 #000; width: 130px; height: 28px; }*/ .quote { padding: 20px 25px 0; position: relative; } .testi-top:before { content: ' '; width: 0; height: 0; border-style: solid; border-width: 220px 58px 0 18px; border-color: #e2e2e2 transparent transparent transparent; position: absolute; bottom: -127px; -webkit-transform: rotate(-63deg); -ms-transform: rotate(-63deg); transform: rotate(-63deg); left: 77px; background-color: #e2e2e2; -webkit-background-clip: text; z-index: -1; } .quote h5 { color: #fff; font-size: 15px; position: absolute; top: -25px; } .student { margin: 90px 0 0; position: relative; color: #fff; text-align: center; } .client .student .photo { background-color: #ccc; border-radius: 50%; width: 121px; height: 121px; margin: 0 auto; overflow: hidden; border: 4px solid #fff; } .student h4 { margin-top: 30px; text-transform:capitalize; font-size: 20px; font-weight: 600; } .testi-control { width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .prev-slide, .next-slide { cursor: pointer; font-size: 25px; background: #000; color: #fff; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; padding: 27px 10px; display: inline-block; position: absolute; opacity: .7; z-index: 99; } .prev-slide { left: 0; content: "\f104"; } .next-slide { right: 0; content: "\f105"; } .prev-slide:hover, .next-slide:hover, .prev-slide:focus, .next-slide:focus { padding: 27px 20px; opacity: 1; } /* =========================== pricing section ============================ */ .pricing { position: relative; text-align: center } .price-2 { background-color: #f6f6f6; } .price-item { position: relative; margin: 0 auto; max-width: 400px; } .price-item .price-top { height: 235px; border-radius: 20px; position: relative; overflow: hidden; z-index: 6; background-color: #eaeaea; } .price-item .price-top .top-in { position: absolute; top: -52%; left: -28px; width: 111%; border: #fff solid 5px; height: 100%; -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; background-color: #000; } .price-item .price-top h2 { position: relative; margin-top: 47px; font-size: 25px; font-weight: 600; text-transform: uppercase; color: #fff; } .price-item .price-top h3 { font-weight: 700; margin-top: 60px; margin-bottom: 10px; font-size: 40px; } .price-item .bottom { text-transform: capitalize; width: 88%; margin: 0 auto; border-radius: 0 0 20px 20px; position: relative; border: 1px solid #ccc; border-top: 0; background-color: #fff; padding: 35px 25px; z-index: 5; } .price-item .bottom li { border-bottom: 1px solid #000; padding: 10px 0; } .price-item .bottom li:last-child { border-bottom: none; } .price-item .btn-custom { font-weight: 500; border: none; margin-top: -23px; color: #fff; z-index: 7; background-color: #000; position: relative; } .price-item.active .price-top .top-in { background-color: #5424bf } .price-item .btn-custom:hover,.price-item .btn-custom:focus { opacity: .8; } /* ========================== FAQ section ============================= */ .faq { background-attachment: fixed; position: relative; text-align: center; z-index: 0; } .faq::before { position: absolute; background-color: #000; opacity: .9; left: 0; top: 0; width: 100%; content: ""; height: 100%; z-index: -1; } .faq .all-title { color: #fff } .faq .all-title .t-border::after { background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0)); background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0)); } .panel-group .panel { border-radius: 0; margin-bottom: 22px; } .panel-title a { position: relative; display: block; width: 100%; padding: 23px 0; padding-right: 70px; color: #000; padding-left: 30px; text-align: left; font-size: 20px; } .panel-title a::after { font-family: FontAwesome; width: 70px; height: 100%; position: absolute; top: 0; text-align: center; padding-top: 23px; right: 0; background-color: #5424bf; color: #fff; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .panel-title a.collapsed::after { content: "\f067"; } .panel-title a::after { content: "\f078"; } .panel-default { border: none; } .panel-default > .panel-heading { padding: 0; border: none; background-color: #fff; -webkit-box-shadow: 1.414px 1.414px 8px 0 rgba(0, 0, 0, 0.34); box-shadow: 1.414px 1.414px 8px 0 rgba(0, 0, 0, 0.34); } .panel-body { border: none; font-size: 15px; text-align: left; padding: 20px 30px; -webkit-animation: movingy 2s infinite; animation: movingy 2s infinite; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border: none; } /* =========================== Pricing section ============================ */ .stores { background-color: #5424bf; color: #fff; position: relative; overflow: hidden; } .store-bg-img { position: absolute; right: 0; } .store-title h2 { font-size: 40px; font-weight: 700; text-transform: uppercase; padding-bottom: 30px; } .soc-icon { padding-top: 20px; } .soc-icon img { margin-right: 20px; border-radius: 10px; margin-top: 15px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -webkit-box-shadow:4px 3px 20px 0 rgba(0, 0, 0, .5); box-shadow:4px 3px 20px 0 rgba(0, 0, 0, .5); } .soc-icon img:hover,.soc-icon img:focus { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } /* =========================== Blog section ============================ */ .blog { position: relative; background-attachment: fixed; background-size: cover; z-index: 0; text-align: center; /* padding-bottom: 130px; */} .blog::after { position: absolute; background: rgba(255, 255, 255, 0.9); content: " "; height: 100%; width: 100%; left: 0; top: 0; z-index: -1; } .blog-item { max-width: 400px; margin: 10px auto; } .blog-top { border-radius: 20px; overflow: hidden; } .blog-top img { width: 100%; -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; } .blog-item:hover .blog-top img,.blog-item:focus .blog-top img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .blog-admin { position: relative; width: 70px; border-radius: 10px; border: 2px solid #000; height: 70px; margin: -35px auto; z-index: 8; overflow: hidden; margin-top: 10px; } .blog-bottom { position: relative; width: 88%; margin: 0 auto; border-radius: 0 0 20px 20px; border: 1px solid #ccc; border-top: 0; padding: 50px 20px 40px; background-color: #fff } .blog-bottom h4 { text-transform: capitalize; padding-bottom: 10px; color: #5424bf; font-weight: 500; font-size: 12px; margin-bottom: 4px; } .blog-bottom span{ font-size: 12px; } .blog-bottom h4.h-border::after { width: 94px; background-color: #3d3d3d; } .blog-bottom h5 { font-weight: 600; padding: 20px 0 15px; position: relative; font-size: 20px; margin-bottom: 15px; } .blog-item .btn-custom { font-weight: 500; border: none; top: -23px; color: #fff; z-index: 7; background-color: #5424bf; position: relative; margin-top: 0; } .blog-item .btn-custom:hover,.blog-item .btn-custom:focus { opacity: .8; } /* =========================== subscribe section ============================ */ .subscribe { width: 100%; position: absolute; text-align: center; z-index: 2; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .subscribe .subs-in { padding: 40px 100px; border-radius: 30px; background-color: #5424bf; } .subs-in h2 { color: #fff; text-transform: uppercase; font-weight: 600; line-height: 1.3 } .input-group { position: relative; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: stretch; -webkit-box-align: stretch; align-items: stretch; width: 100%; max-width: 500px; margin: 0 auto } .search .form-control { padding: 24px; border: 0; border-radius: 50px 0 0 50px; } .btn-search { border-radius: 0 50px 50px 0; color: #fff; font-weight:500; text-transform: uppercase; padding: 13px 25px; position: relative; background-color: #000; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .btn-search:hover,.btn-search:focus { opacity: .7; } /* =========================== map and contact-form section ============================ */ .map-contact { position: relative; } .map { width: 100%; height: 770px; } .contact-form { color: #fff; background-color: rgba(0, 0, 0, .9); padding: 150px 0 100px; position: absolute; height: 770px; top: 0; left: 0; width: 50%; z-index: 1; } .form-inner { max-width: 700px; margin: 0 auto; padding: 0 50px; } .contact-form h2 { font-weight: 600; text-transform: uppercase; margin-bottom: 30px; } .contact-form .form-control { background: none; border: none; border-bottom: 1px #fff solid; border-radius: 0; margin-bottom: 60px; padding-left: 0; color: #fff; width: 100%; line-height: 10px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .contact-form .form-control:focus, .msg:focus, .contact-form .form-control:hover, .msg:hover { -webkit-box-shadow: none; box-shadow: none; border-color: #5424bf } .contact-form .form-control::-webkit-input-placeholder{ color: #fff } .contact-form label { font-weight: 400; color: #fff } .contact-form .msg { border: 1px solid #fff; margin-bottom: 40px; } .contact-form .submit-area { text-align: right } .contact-form .btn-search { border-radius: 50px; background-color: #5424bf; color: #fff; padding: 13px 45px; } /* =========================== footer section ============================ */ .foot-top { background-color: #5424bf; padding: 80px 0 60px; color: #fff; } .cont-info { position: relative; padding-left: 25px; text-transform: capitalize; margin: 30px 0; } .foot-top h2 { margin-bottom: 25px; text-transform: uppercase; font-weight: 600; } .foot-top i { position: absolute; left: 0; top: 4px; } .foot-bottom { padding: 30px 0; text-transform: capitalize; background-color: #000; color: #fff } .copyright { margin-top: 15px; margin-bottom: 10px; } .copyright a { color: #fff; font-weight: 600; } .foot-social { float: right; } .foot-social a { height: 40px; position: relative; width: 40px; margin: 5px 0; margin-left: 20px; text-align: center; padding-top: 6px; display: inline-block; background-color: #fff; color: #000; font-size: 20px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .foot-social a:hover, .foot-social a:focus { color: #fff; } .foot-bottom .foot-social a:before { background-color: #5424bf; color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 0; content: ""; z-index: 9; -webkit-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; } .foot-bottom .foot-social a:hover:before,.foot-bottom .foot-social a:focus:before { height: 100%; } .foot-bottom .foot-social i { position: relative; z-index: 10; } /*-------------------------------------------------------------- ## Main Menu CSS --------------------------------------------------------------*/ .main-menu { position: relative; } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navigation { position: relative; margin: 0px; padding: 0; } .main-menu .navigation ul { margin: 0; padding: 0; } .main-menu .navigation ul li { list-style: none; } .main-menu .navigation > li { position: relative; display: inline-block; margin-right: 40px; padding: 20px 0; } .main-menu .dropdown-btn { position: absolute; right: 10px; top: 6px; width: 34px; height: 30px; border: 1px solid #7a7a7a; text-align: center; font-size: 16px; line-height: 28px; color: #7a7a7a; cursor: pointer; z-index: 5; display: none; } .main-menu .navigation > li:last-child { margin-right: 0px; } .main-menu .navigation > li > a { position: relative; display: block; padding: 20px 0px; font-size: 15px; color: #fff; text-transform: uppercase; line-height: 24px; opacity: 1; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .main-menu .navigation > li.menu-item-has-children > a:before { position: absolute; content: '\f107'; right: 5px; line-height: 24px; font-size: 12px; font-family: 'FontAwesome'; } .main-menu .navigation > li.menu-item-has-children > a { padding-right: 15px; } .sticky-header .main-menu .navigation > li > a { color: #181818 !important; padding: 17px 15px; } .main-menu .navigation > li:hover > a,.main-menu .navigation > li a:focus, .main-menu .navigation > li.current > a, .main-menu .navigation > li.current-menu-item > a { color: #fff; opacity: 1; } .main-menu .navigation > li.current-menu-item > a { color: #fff; background-color: #5424bf; padding: 12px 18px; } .main-menu .navigation > li:hover:after,.main-menu .navigation > li a:hover:after, .main-menu .navigation > li.current:after, .main-menu .navigation > li.current-menu-item:after, .main-menu .navigation > li:hover+li:after,.main-menu .navigation > li a:focus+li:after, .main-menu .navigation > li.current+li:after, .main-menu .navigation > li.current-menu-item+li:after { opacity: 0; visibility: hidden; } .main-menu .navigation > li.menu-item-has-children > a:after { display: none; } .main-menu .navigation > li:hover > a,.main-menu .navigation > li a:hover , .main-menu .navigation > li.current > a, .main-menu .navigation > li.current-menu-item > a { background: transparent; opacity: 1; } .main-menu .navigation > li.current_page_item{ padding-bottom: 28px; } .main-menu .navigation > li > ul { position: absolute; left: 0px; top: 120%; width: 220px; padding: 0px; z-index: 100; display: none; background: #ffffff; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } .main-menu .navigation > li > ul { width: 220px; } .main-menu .navigation > li > ul.from-right { left: auto; right: 100%; } .main-menu .navigation > li > ul > li { position: relative; width: 100%; border-bottom: 1px solid #ececec; } .main-menu .navigation > li > ul > li:last-child { border-bottom: none; } .main-menu .navigation > li > ul > li > a { position: relative; display: block; padding: 15px 20px; line-height: 22px; font-weight: 400; font-size: 15px; color: #292929; text-align: left; text-transform: capitalize; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .main-menu .navigation > li > ul > li:nth-child(even) > a:after{ background: #ff7473; } .main-menu .navigation > li > ul li:hover > a,.main-menu .navigation > li > ul li a:focus { background-color: #5424bf; border-color: #5424bf; color: #fff; } .main-menu .navigation > li > ul > li.menu-item-has-children a:after { font-family: 'FontAwesome'; content: "\f105"; position: absolute; right: 10px; top: 13px; width: 10px; height: 20px; display: block; color: #292929; line-height: 20px; font-size: 16px; font-weight: normal; text-align: center; z-index: 5; } .main-menu .navigation li ul li:not(.menu-item-has-children) a:after { content:none } .main-menu .navigation > li > ul li.menu-item-has-children:hover > a:after,.main-menu .navigation > li > ul li.menu-item-has-children a:hover::after { color: #ffffff; } .main-menu .navigation > li > ul > li ul { position: absolute; left: -100%; top: 20px; width: 220px; padding: 0px; z-index: 100; display: none; background: #ffffff; border-top: 1px solid #333; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } .main-menu .navigation > li > ul > li > ul > li { position: relative; width: 100%; border-bottom: 1px solid #ececec; text-align:left; } .main-menu .navigation > li > ul > li > ul > li:last-child { border-bottom: none; } .main-menu .navigation > li > ul li a { position: relative; display: block; padding: 12px 20px; line-height: 28px; font-weight: 400; font-size: 14px; text-transform: capitalize; color: #292929; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .main-menu .navigation > li.menu-item-has-children:hover > ul,.main-menu .navigation > li.menu-item-has-children a:focus > ul { visibility: visible; opacity: 1; top: 100%; } .main-menu .navigation li > ul > li.menu-item-has-children:hover > .sub-menu ,.main-menu .navigation li > ul > li.menu-item-has-children a:focus > .sub-menu { visibility: visible; opacity: 1; top: -1px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .main-menu .navbar-collapse > ul li.menu-item-has-children .dropdown-btn { position: absolute; right: 10px; top: 6px; width: 34px; height: 30px; border: 1px solid #ffffff; text-align: center; font-size: 16px; line-height: 28px; color: #ffffff; cursor: pointer;2 z-index: 5; display: none; } @media only screen and (min-width: 768px) { .main-menu .navigation > li > ul, .main-menu .navigation > li > ul > li ul { display: block !important; visibility: hidden; opacity: 0; } /* .main-menu .navigation > li.menu-item-has-children:hover > .sub-menu, .main-menu .navigation > li.menu-item-has-children a:focus + ul.sub-menu, .main-menu .navigation > li.menu-item-has-children a:focus ul.sub-menu { visibility: visible; opacity: 1; top: 100%; } .main-menu .navigation > li.menu-item-has-children a:focus ul.sub-menu { visibility: visible; opacity: 1; left:-100%; top: 100%; }*/ } @media only screen and (max-width: 767px) { .main-menu .dropdown-btn{ display:block; } .main-menu .navigation > li.menu-item-has-children > a::before, .main-menu .navigation > li > ul > li.menu-item-has-children > a::after{ display:none; } .main-menu .collapse { overflow: auto; float: none; width: 100%; padding: 10px 0px 0px; border: none; margin: 0px 0px 15px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; box-shadow: none; } .main-menu .collapse.in, .main-menu .collapsing { padding: 10px 0px 0px; border: none; margin: 0px 0px 15px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; box-shadow: none; } .main-menu .navbar-header { position: relative; float: none; display: block; text-align: right; width: 100%; padding: 20px 0px; right: 0px; z-index: 12; } .main-menu .navbar-header .navbar-toggle { display: inline-block; z-index: 7; border: 1px solid #292929; float: none; margin: 0px 0px 0px 0px; border-radius: 0px; background: #292929; } .main-menu .navbar-header .navbar-toggle .icon-bar { background: #ffffff; } .main-menu .navigation > li{ display:block; } .main-menu .navbar-collapse .navigation { float: none !important; margin: 0px !important; width: 100% !important; background: #292929; border: 1px solid #ffffff; border-top: none; } .main-menu .navbar-collapse > .navigation > li { margin: 0px !important; float: none !important; padding: 0px !important; width: 100%; display:block; } .main-menu .navigation > li > a, .main-menu .navigation > li > ul:before { border: none; } .main-menu .navbar-collapse .navigation > li > a { padding: 10px 10px !important; border: none !important; } .main-menu .navigation li.dropdown > a:after, .main-menu .navigation > li.dropdown > a:before, .main-menu .navigation > li > ul > li > a::before, .main-menu .navigation > li > ul > li > ul > li > a::before { color: #ffffff !important; right: 15px; font-size: 16px; display: none !important; } .main-menu .navbar-collapse .navigation > li > ul, .main-menu .navbar-collapse .navigation > li > ul > li > ul { position: relative; border: none; float: none; visibility: visible; opacity: 1; display: none; margin: 0px; left: auto !important; right: auto !important; top: auto !important; padding: 0px; outline: none; width: 100%; background: #292929; -webkit-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; -o-transition: none !important; -moz-transition: none !important; } .main-menu .navbar-collapse .navigation > li > ul, .main-menu .navbar-collapse .navigation > li > ul > li > ul { border-top: 1px solid rgba(72, 72, 72, 1) !important; } .main-menu .navbar-collapse .navigation > li, .main-menu .navbar-collapse .navigation > li > ul > li, .main-menu .navbar-collapse .navigation > li > ul > li > ul > li { border-top: 1px solid rgb(72, 72, 72, 1) !important; border-bottom: none; opacity: 1 !important; top: 0px !important; left: 0px !important; visibility: visible !important; } .main-menu .navbar-collapse .navigation > li:first-child { border: none; } .main-menu .navbar-collapse .navigation > li > a, .main-menu .navbar-collapse .navigation > li > ul > li > a, .main-menu .navbar-collapse .navigation > li > ul > li > ul > li > a { padding: 10px 10px !important; line-height: 22px; color: #ffffff; background: #292929; text-align: left; } .main-menu .navbar-collapse .navigation > li > a:hover, .main-menu .navbar-collapse .navigation > li > a:active, .main-menu .navbar-collapse .navigation > li > a:focus { background: #292929; } .main-menu .navbar-collapse .navigation > li:hover > a, .main-menu .navbar-collapse .navigation > li > ul > li:hover > a, .main-menu .navbar-collapse .navigation > li > ul > li > ul > li:hover > a, .main-menu .navbar-collapse .navigation > li a:focus , .main-menu .navbar-collapse .navigation > li > ul > li a:focus, .main-menu .navbar-collapse .navigation > li > ul > li > ul > li a:focus, .main-menu .navbar-collapse .navigation > li.current > a, .main-menu .navbar-collapse .navigation > li.current-menu-item > a { background: #292929; color: #ffffff !important; } .main-menu .navbar-collapse .navigation li.dropdown .dropdown-btn, .header-style-two .nav-outer .btn-outer { display: block; } .main-menu .navbar-collapse .navigation li.dropdown:after, .main-menu .navigation li > ul:before, .main-slider .bordered-layer { display: none !important; } } /* menu-icon */ .menu-icon { margin-top: 37px; } .menu-icon a { font-size: 18px; color: #000; margin-left: 20px; } .skip-link.screen-reader-text{ display: none; } .togo-text{ padding-top: 15px; } .togo-text .site-title a{ font-size: 21px; } .site-description{ font-size: 12px; } /*=============================================================== ## Comments =================================================================*/ .comment-box-wrapper{ position: relative; background: #ffffff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05); float: left; width: 100%; margin-bottom: 1.5em; } /** * 11.4.1 - Comment form * ----------------------------------------- */ /* comments area: comment form, comment list, and navigation */ .comments-area { font-size: 15px; font-style: normal; font-weight: 400; line-height: 1.7; color: #4c4f53; padding: 30px; } /* comments area: styles for Font Awesome icons */ .comment-reply-title #cancel-comment-reply-link:before, .bypostauthor > article .fn:after { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } /* comment form title, comments title */ .comment-reply-title, .comments-title { margin: 0 0 25px; font-size: 26px; font-style: normal; font-weight: 700; line-height: 1.2; color: #2f3235; } /* comment form */ .comment-form { background-color: #ffffff; margin-bottom: 0; padding: 0; box-shadow: none; } .comment-form-comment { margin-bottom: 7px; } .comment-form-author, .comment-form-email, .comment-form-url { margin-bottom: 10px; } .comment-form label { display: none; margin-bottom: 0; padding-bottom: 5px; font-weight: 500; line-height: 1.7; color: #4c4f53; } .logged-in-as{ padding-bottom: 15px; } .comment-form-cookies-consent { margin-bottom: 10px; padding-top: 12px; } .comment-form-cookies-consent input[type="checkbox"] { margin: 0 10px 0 0; } .comment-form-cookies-consent label { display: inline; padding-bottom: 0; font-weight: 400; } #author, #email, #url, #comment { width: 100%; height: 40px; padding: 0 10px; color: #4c4f53; background: #ffffff; border-radius: 0; border: 1px solid #ccc; -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; -o-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } #comment { height: 150px; padding: 10px; resize: vertical; border: 1px solid #ccc; padding: 6px 12px; } #author:hover, #email:hover, #url:hover, #comment:hover, #author:focus, #email:focus, #url:focus, #comment:focus { border-color: #e4ecec; } #author:active, #email:active, #url:active, #comment:active, #author:focus, #email:focus, #url:focus, #comment:focus { outline: none; border-color: #e4ecec; } /* allowed tags */ .comment-form .form-allowed-tags { display: none; } /* comment form: submit button */ .comment-form .form-submit { padding: 15px 0 7px; margin-bottom: 0; } .comment-form #submit { outline: none; display: inline-block; height: 48px; font-size: 1.2em; font-weight: 600; text-transform: capitalize; letter-spacing: 1px; border: 1px solid #000; border-radius: 0; margin: 10px auto 30px; padding: 10px 40px; background: transparent; color: #000; -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .comment-form #submit:hover, .comment-form #submit:focus { color: #ffffff; background-color: #5424bf; } .comment-form #submit:hover , .comment-form #submit:focus { color: #ffffff; background-color: #5424bf; text-decoration: none; border: 1px solid #5424bf; } .comment-form #submit:active { position: relative; top: 1px; } /* "must login" message */ .comment-respond .must-log-in { margin-bottom: 40px; padding: 30px; background-color: #ffffff; } .comment-respond .must-log-in a { color: #4c4f53; text-decoration: underline !important; } .comment-respond .must-log-in a:hover, .comment-respond .must-log-in a:focus { color: #6ca4db; } /* "logged-in as ..." message */ .comment-form .logged-in-as a { color: #4c4f53; } .comment-form .logged-in-as a:first-child:hover, .comment-form .logged-in-as a:first-child:focus { color: #4c4f53; text-decoration: underline !important; } .comment-form .logged-in-as a:last-child { text-decoration: underline !important; } .comment-form .logged-in-as a:last-child:hover, .comment-form .logged-in-as a:last-child:focus { color: #6ca4db; } /* cancel comment reply link */ .comment-reply-title small { float: right; margin-top: 10px; } .comment-reply-title #cancel-comment-reply-link { font-family: 'PT Sans', sans-serif; font-size: 12px; font-style: normal; font-weight: 700; color: #989ea6; } .comment-reply-title #cancel-comment-reply-link:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f057'; margin-right: 8px; } .comment-reply-title #cancel-comment-reply-link:hover, .comment-reply-title #cancel-comment-reply-link:focus { color: #6ca4db; } /** * 11.4.2 - Comment list * ------------------------------------------------------------- */ /* comments */ .comment-list-wrap { margin-bottom: 40px; padding: 30px 30px 15px; background-color: #ffffff; } .comment-list { list-style: none outside none; margin: 0; padding: 0 0 15px; } .comment-list .children { list-style: none outside none; margin: 0; padding: 0 0 0 30px; } /* comment body */ .comment .comment-body { margin-top: 25px; padding-top: 25px; border-top: 1px solid #eeefef; word-wrap: break-word; } .comment-list > .comment:first-child > .comment-body { margin-top: 0; padding-top: 0; border-top: none; } /* pingbacks and trackbacks */ .comment-list .pingback .comment-body { margin-top: 25px; padding-top: 25px; padding-left: 36px; border-top: 1px solid #eeefef; word-wrap: break-word; position: relative; font-family: 'PT Sans', sans-serif; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.3; color: #989ea6; } .comment-list .pingback .comment-body:before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: 'FontAwesome'; font-weight: 900; content: '\f35d'; position: absolute; top: auto; left: 0; margin-top: -2px; line-height: 1; font-size: 19px; color: #4c4f53; opacity: 0.2; } .comment-list > .pingback:first-child > .comment-body { margin-top: 0; padding-top: 0; border-top: none; } .comment-list .pingback .comment-body > a { display: block; margin-top: 12px; font-size: 15px; font-weight: 400; line-height: 1.7; color: #4c4f53; } .comment-list .pingback .comment-body > a:hover, .comment-list .pingback .comment-body > a:focus { color: #6ca4db; text-decoration: underline !important; } .comment-list .pingback .comment-body .edit-link { display: inline-block; margin-top: 12px; font-family: 'PT Sans', sans-serif; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.3; } .comment-list .pingback .comment-body .edit-link .comment-edit-link { color: #989ea6; text-decoration: none !important; } .comment-list .pingback .comment-body .edit-link .comment-edit-link:hover, .comment-list .pingback .comment-body .edit-link .comment-edit-link:focus { color: #6ca4db; text-decoration: underline !important; } /* comment metadata: avatar */ .comment-meta .comment-author img { float: left; display: block; width: 70px; height: 70px !important; margin: 0 15px 0 0; padding: 0; } /* comment metadata: author */ .comment-meta .comment-author .fn { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; font-style: normal; font-weight: 600; line-height: 1.3; color: #2f3235; } .comment-meta .comment-author .fn .url { color: #2f3235; text-decoration: underline !important; } .comment-meta .comment-author .fn .url:hover, .comment-meta .comment-author .fn .url:focus { color: #6ca4db; } .comment-meta .comment-author .says { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important; word-wrap: normal !important; } /* comment metadata: date and edit links */ .comment-meta .comment-metadata { margin-top: 2px; font-family: Montserrat, sans-serif; font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.3; color: #989ea6; } .comment-metadata time{ display: none; } .comment-meta .comment-metadata a { color: #989ea6; } .comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:focus { color: #6ca4db; text-decoration: underline !important; } /* comment metadata: "comment awaiting moderation" message */ .comment-meta .comment-awaiting-moderation { display: inline-block; margin: 15px 0 0; padding: 4px 0; background-color: #f7f8f8; } /* comment content */ .bwp-no-avatars .comment-content { padding-left: 0 !important; } .comment-content p { margin-bottom: 15px; } .comment-content a { color: #4c4f53; text-decoration: underline !important; } .comment-content a:hover, .comment-content a:focus { color: #6ca4db; } /* comment reply */ .comment-section .reply { padding: 0 0 0 61px; margin-top: -8px; line-height: 1.3; } .bwp-no-avatars .comment-body .reply { padding-left: 0 !important; } .comment-section .reply .comment-reply-link { font-family: Montserrat, sans-serif; font-size: 14px; font-style: normal; color: #989ea6; font-weight: 400; margin-left: 20px !important; } .comment-section .reply .comment-reply-link:focus { color: #989ea6; } .comment-section .reply .comment-reply-link:hover, .comment-section .reply .comment-reply-link:focus { color: #6ca4db; text-decoration: underline !important; } .comment-reply-link{ color: #5424be !important; margin-left: 20px; } .comment-reply-link::before{ content: "\f112"; font-family: 'FontAwesome'; color: #5424be !important; padding-right: 5px; font-size: 14px; } /* comment reply: comment form */ .comment-respond, .comment-list li .comment-respond { margin-top: 25px; padding-top: 25px; border-top: 1px solid #eeefef; } .comment-list li .comment-reply-title { margin-bottom: 16px; } .comment-list li .comment-form { margin-bottom: 0; padding: 0; box-shadow: none; } .comment-list li .comment-form .form-submit { padding-bottom: 5px; } /* comments are closed */ .comment-list-wrap.comments-closed .comment-list { padding-bottom: 0; } .comments-area .no-comments { margin-bottom: 40px; padding: 30px; background-color: #ffffff; } /** * 11.4.3 - Comments navigation * ------------------------------------------------------------- */ .comment-navigation { margin: 10px 0 0; padding: 20px 0 15px; border-top: 1px solid #eeefef; } .comment-list-wrap.comments-closed .comment-navigation { margin-top: 25px; } .comment-navigation:before, .comment-navigation:after { content: " "; display: table; } .comment-navigation:after { clear: both; } .comment-navigation { zoom: 1; } .comment-navigation .nav-previous, .comment-navigation .nav-next { display: inline-block; min-height: 1px; width: 50%; line-height: 1.6; } .comment-navigation .nav-previous { float: left; text-align: left; padding-right: 15px; } .comment-navigation .nav-next { float: right; text-align: right; padding-left: 15px; } .comment-navigation .nav-links a { display: inline-block; width: 100%; font-family: 'PT Sans', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; word-wrap: break-word; color: #989ea6; } .comment-navigation .nav-links a:hover, .comment-navigation .nav-links a:focus { color: #6ca4db; text-decoration: underline !important; } .comment-navigation .nav-previous i { margin-right: 10px; } .comment-navigation .nav-next i { margin-left: 10px; } .comment-section h4 { font-weight: 600; } /***************************Gallery***********************************/ .gallery {margin-bottom: 1.5em;padding: 5px 0;} .gallery-item {display: inline-block;text-align: center;vertical-align: top;width: 100%; margin-bottom: -5px;} .gallery-item img{width: 100%;height: auto;padding: 5px;margin-bottom: 5px;} .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; } /*****************************Search Form**************************************/ .screen-reader-text{ display: none; } .search-form{ width: 100%; } .search-form input[type="search"]{ border: 1px solid #ddd; height: 40px; padding: 7px; width: 100% !important; } .search-form label { display: inline-block; width: 98%; margin-bottom: 5px; font-weight: 700; } .search-form input[type="submit"]{ background: #5424bf none repeat scroll 0 0; border: 1px solid #5424bf; cursor: pointer; height: 40px; right: 15px; position: absolute; width: 65px; transition: all .3s ease-in-out; color: #fff; } .co-blog-sidebar ul.children{ margin-left: 20px; } .co-blog-sidebar ul.sub-menu{ margin-left: 20px; } .footer .widget a{ color: #fff; } .footer ul.sub-menu{ margin-left: 20px; } #secondary{ text-align: left; } .pagination span.page-numbers.current{ padding: 7px 14px; color: #fff; cursor: default; background-color: #5424bf; border-color: #5424bf; margin-left: -4px; } .pagination a.page-numbers{ position: relative; padding: 7px 14px; margin-left: -4px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .pagination .page-numbers:hover, .pagination .page-numbers:focus{ color:#fff; background-color: #eee; } .footer-widget{ margin-bottom: 30px; } .footer-widget .tagcloud a { color: #000; } .widget select { color: #000; width: 100%; height: 40px; } .widget_calendar{ padding-bottom: 30px; } .footer-widget .post-date{font-size: 13px; font-weight: 600; font-style: italic; color: #fff; margin-bottom: 10px; display: block;} #wp-calendar {padding:5px;border: 1px solid #ccc;width:100%;font-size:12px;font-weight:300;border-collapse:separate;border-spacing:1px;margin-left:-2px;} #wp-calendar caption {text-align: center; font-size: 14px;} .footer-area-top #wp-calendar caption {text-align: center; font-size: 14px;color: #b0b0b0;} #wp-calendar tbody td {margin-bottom:10px;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:1px solid #ccc;padding: 6px 10px;} #wp-calendar tbody td:hover,#wp-calendar tbody td:focus {border-color:#8224e3;} .footer-widget #wp-calendar tbody td:hover,.footer-widget #wp-calendar tbody td:focus {border-color:#b015c8;} #wp-calendar tbody td.pad {border:0;} #wp-calendar tbody td#today {color:#fff;background-color:#b015c8;} #wp-calendar tfoot td#prev a,#wp-calendar tfoot td#next a {color:#b0b0b0;font-size:12px;font-weight:400;position:relative;text-transform:uppercase;bottom:-9px;margin-bottom:1px;} #wp-calendar tfoot td#prev {text-align:left;} #wp-calendar tfoot td#next {text-align:right;} #wp-calendar thead th {font-size:14px;font-weight:400; border:none; color:#b0b0b0;text-align:center;padding-bottom:10px;} #wp-calendar tbody td a,#wp-calendar tfoot td#prev a:hover,#wp-calendar tfoot td#next a:hover, #wp-calendar tbody td a,#wp-calendar tfoot td#prev a:focus,#wp-calendar tfoot td#next a:focus {color:#fff;} #wp-calendar tbody td a,#wp-calendar tfoot td#prev a:hover,#wp-calendar tfoot td#next a:hover, #wp-calendar tbody td a,#wp-calendar tfoot td#prev a:focus,#wp-calendar tfoot td#next a:focus {color:#8224e3;} #wp-calendar td{ border:none; } .post-content .wp-caption.alignnone{ width: 100% !important; } .wp-caption-text{} .blog-admin.auth{ margin-top: 20px; } .page-def{ background-color: #f6f6f6; text-align: justify; } .post-content tr, th, td{ border: 2px solid #a8a8a8; text-align: center; margin-bottom: 20px; padding: 5px; } .page-template-default .post-content h1,h2,h3,h4,h5,h6{ margin-bottom: 10px; margin-top: 5px; } .page-template-default .post-content ul, .page-template-default .post-content ol { margin: 0 0 1.5em; padding-left: 1.5em; } .page-template-default .post-content ul li{ list-style: disc; color: #858585; } .page-template-default .post-content ol { list-style: decimal; color: #858585; } .page-template-default .post-content ol > li{ list-style: decimal; } .page-template-default .post-content li > ul, .page-template-default .post-content li > ol { margin-bottom: 0; margin-left: 0; padding-left: 1.5em; } .page-template-default .post-content dt { font-weight: bold; } .page-template-default .post-content dd { margin: 0 1.5em 1.5em; color: #858585; } .post-template-default .blog-detail-area ul, .post-template-default .blog-detail-area ol { margin: 0 0 1.5em; padding-left: 1.5em; } .post-template-default .blog-detail-area ul li{ list-style: disc; color: #858585; } .post-template-default .blog-detail-area ol { list-style: decimal; color: #858585; } .post-template-default .blog-detail-area ol > li{ list-style: decimal; } .post-template-default .blog-detail-area li > ul, .post-template-default .blog-detail-area li > ol { margin-bottom: 0; margin-left: 0; padding-left: 1.5em; } .post-template-default .blog-detail-area dt { font-weight: bold; } .page-template-default .post-content dd { margin: 0 1.5em 1.5em; color: #858585; } .post-template-default .blog-detail-area .wp-caption.alignnone{ width: 100% !important; } .blog-bottom .date a{ color: #000; } .byline .author.vcard .url{ color: #5424bf; } /* Accessibility */ /* Text meant only for screen readers. */ .skip-link.screen-reader-text { display: block; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .skip-link.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } .error-section .err-page{ font-size: 50px; padding-bottom: 40px; font-weight: 600; } .main-menu .navigation li:hover>ul.sub-menu, .main-menu .navigation li a:focus + ul.sub-menu, .main-menu .navigation li.force-show ul.sub-menu { opacity: 1; visibility: visible; } .news-detail .meta{ padding-left: 0 !important; } @media screen and (max-width: 782px){ body { margin-top: -47px !important } .main-menu .navigation li a:focus + ul.sub-menu, .main-menu .navigation li.force-show ul.sub-menu { opacity: 1; visibility: visible; } } .main-home-post{ display: none; }