Team:YiYe-China/css

/*

 Theme Name: appnox - Product Landing HTML5 Template
 Author: theme_group
 Support: robiulislamfree@gmail.com
 Description: appnox is app landing PSD Template.This is a clean Professional and Creative Design using bootstrap 1170px Grid System.You can use appnox as a better way to present and promote your startup mobile apps,
 Tags: business, clean design, clean layout, marketing, minimal design, minimalist, modern, newsletter, app, app landing, App Showcase, digital, digital product, landing page, mobile apps, modern, sales apps, sass, software, startup,
 Version: 1.0

• /

/* CSS Index

---

1. google fonts 2. theme default css 3. pre loader css 4. header area css 5. main menu area css i. sub menu 6. search form area css 7. hero area css 8. services area css 9. about area css 10. pricing table area css 11. videos area css 12. screen shots area css 13. call to action area css 14. faq area css 15. testimonial area css 16. latest blog area css 17. footer area css i. wedget 1 css ii. wedget 2 css iii. wedget 3 css 18. footer copyright css 19. breadcrumb area css 20. blog wedget css 21. widget search area css i. widget latest post area css ii. widget post archive area css iii. widget follow us css iv. widget tags area css 22. blog details area css i. blog details tag & share ii. blog author area css iii. related post area css iv. recent comments area css v. comments form area css 23. contact area css i. contact form area css 24. error area css

• /

/* google fonts */

@import url('b6f99a7fe7b04da897d26b4ff96c2310.css');

/* theme default css */

body {

   font-family: 'Poppins', sans-serif;
   font-weight: normal;
   font-style: normal;

}

img {

   max-width: 100%;
   height: auto;
   transition: all 0.3s ease-out 0s;

}

a, .button, .btn {

   -webkit-transition: all 0.3s ease-out 0s;
   -moz-transition: all 0.3s ease-out 0s;
   -ms-transition: all 0.3s ease-out 0s;
   -o-transition: all 0.3s ease-out 0s;
   transition: all 0.3s ease-out 0s;

}

a:focus, .button:focus, .btn:focus {

   text-decoration: none;
   outline: none;

}

a:focus, a:hover {

   text-decoration: none;

}

.btn:focus, button:focus, input:focus, input:focus, textarea, textarea:focus, .form-control:focus {

   outline: none;
   box-shadow: none;
   -webkit-box-shadow: none;
   border-color: inherit;
   background: #fff;
   color: #000;

}

button {

   cursor: pointer;

}

h1, h2, h3, h4, h5, h6 {

   font-family: 'Ubuntu', sans-serif;
   color: #353858;
   margin: 0px;
   padding: 0px;
   font-style: normal;
   font-weight: 400;

}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {

   color: inherit;

}

ul {

   margin: 0px;
   padding: 0px;

}

li {

   list-style: none

}

p {

   font-family: 'Poppins', sans-serif;
   font-size: 18px;
   font-weight: 400;
   line-height: 28px;
   color: #656970;
   margin: 0px;

}

hr {

   border-bottom: 1px solid #eceff8;
   border-top: 0 none;
   margin: 30px 0;
   padding: 0;

}

label {

   color: #7e7e7e;
   cursor: pointer;
   font-size: 14px;
   font-weight: 400;

}

• -moz-selection {

   background: #d6b161;
   color: #fff;
   text-shadow: none;

}

-moz-selection {

   background: #444;
   color: #fff;
   text-shadow: none;

}

selection {

   background: #106ad2;
   color: #fff;
   text-shadow: none;

}

• -moz-placeholder {

   color: #555555;
   font-size: 14px;
   opacity: 1;

}

• placeholder {

   color: #555555;
   font-size: 14px;
   opacity: 1;

}

/* pre loader css */

.preloader {

   background-image: -moz-linear-gradient(178deg, rgb(47, 50, 212) 0%, rgb(113, 66, 247) 100%);
   background-image: -webkit-linear-gradient(178deg, rgb(47, 50, 212) 0%, rgb(113, 66, 247) 100%);
   background-image: -ms-linear-gradient(178deg, rgb(47, 50, 212) 0%, rgb(113, 66, 247) 100%);
   height: 100%;
   position: fixed;
   width: 100%;
   z-index: 999999999;

}

.preloader .loader {

   width: 250px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   font-family: helvetica, arial, sans-serif;
   text-transform: uppercase;
   font-weight: 900;
   color: #ffffff;
   letter-spacing: 0.2em;

}

.loader::before, .loader::after {

   content: "";
   display: block;
   width: 15px;
   height: 15px;
   background: #ff2782;
   position: absolute;
   -webkit-animation: load .7s infinite alternate ease-in-out;
   animation: load .7s infinite alternate ease-in-out;

}

.loader::before {

   top: 0;

}

.loader::after {

   bottom: 0;

}

@-webkit-keyframes load {

   0% {
       left: 0;
       height: 30px;
       width: 15px;
   }

   50% {
       height: 8px;
       width: 40px;
   }

   100% {
       left: 235px;
       height: 30px;
       width: 15px;
   }

}

@keyframes load {

   0% {
       left: 0;
       height: 30px;
       width: 15px;
   }

   50% {
       height: 8px;
       width: 40px;
   }

   100% {
       left: 235px;
       height: 30px;
       width: 15px;
   }

}

/* header area css */

.sticky {

   left: 0;
   margin: auto;
   position: fixed;
   top: 0;
   width: 100%;
   box-shadow: 0 0 60px 0 rgba(0, 0, 0, .07);
   z-index: 9999;
   -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
   animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
   -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
   background: #ffffff;
   transition: .3s;

}

.header-logo {

   margin-top: 20px;

}

.header-logo a {

   display: block;

}

.header-top-area {

   background-color: #222;
   font-size: 15px;
   padding: 10px 0;

}

.header-top-area a, .header-top-area {

   color: #fff;

}

.header-top-area i {

   color: #f7be49;

}

/* main menu area css */ .main-menu ul {

   display: inline-block;

}

.main-menu nav > ul > li {

   display: inline-block;
   position: relative;

}

.main-menu nav > ul > li:last-child a {

   padding-right: 0

}

.main-menu nav > ul > li:first-child a {

   padding-left: 0

}

.main-menu nav > ul > li > a {

   color: #111111;
   display: block;
   font-size: 16px;
   font-weight: 600;
   padding: 40px 13px;
   transition: all 0.3s ease 0s;
   line-height: 1.25;
   font-family: 'Poppins', sans-serif;
   text-transform: capitalize;

}

.main-menu nav > ul > li:hover > a, .main-menu nav > ul > li.active > a {

   color: #ff60a3;

}

/* sub menu */ .main-menu nav > ul > li .sub-menu {

   background: #ffffff none repeat scroll 0 0;
   border-top: 3px solid #ff60a3;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
   left: 0;
   opacity: 0;
   position: absolute;
   top: 100%;
   transition: all 0.4s ease-out;
   visibility: hidden;
   width: 220px;
   z-index: 9;
   transform-origin: top;
   transform: scaleY(0);

}

.main-menu nav > ul > li:hover .sub-menu {

   opacity: 1;
   visibility: visible;
   transform: scaleY(1);

}

.main-menu nav > ul > li .sub-menu li {

   display: block;
   position: relative;

}

.main-menu nav > ul > li .sub-menu li a {

   color: #666666;
   font-size: 15px;
   font-weight: 600;
   margin: 0;
   padding: 13px 20px;
   text-transform: capitalize;
   display: block;
   font-family: 'Poppins', sans-serif;

}

.main-menu nav > ul > li:hover > .sub-menu li > a:hover {

   color: #fff;
   background: #ff60a3;

}

/* sub menu */ .main-menu nav > ul > li > .sub-menu > li > .sub-menu {

   background: #ffffff none repeat scroll 0 0;
   border-top: 3px solid #ff60a3;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
   left: 100%;
   opacity: 0;
   position: absolute;
   top: 120%;
   transition: all 0.3s ease 0s;
   visibility: hidden;
   width: 220px;
   z-index: 9;

}

.main-menu nav > ul > li > .sub-menu > li:hover .sub-menu {

   top: 0 !important;
   opacity: 1;
   top: 100%;
   visibility: visible

}

.header-top-btn {

   margin: 24px 0 0 35px;
   display: inline-block;

}

/* search form area css */

ul.header-search {

   margin: 37px 0 0 30px;
   display: inline-block;

}

ul.header-search li a {

   color: #111111;

}

ul.header-search li a:hover {

   color: #ff60a3;

}

1. search-overlay {

   display: none;

}

.search-form-area {

   background-image: -moz-linear-gradient(178deg, rgb(47, 50, 212) 0%, rgb(113, 66, 247) 100%);
   background-image: -webkit-linear-gradient(178deg, rgba(47, 50, 212, 0.9) 0%, rgba(113, 66, 247, .9) 100%);
   background-image: -ms-linear-gradient(178deg, rgb(47, 50, 212) 0%, rgb(113, 66, 247) 100%);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: auto;
   text-align: center;
   border: #a0a0a0 solid 1px;
   margin: 0;
   z-index: 99999;

}

.search-form-area:before {

   content: ;
   display: inline-block;
   height: 100%;
   vertical-align: middle;
   margin-right: 0;

}

.search-form-centered {

   display: inline-block;
   vertical-align: middle;
   width: 50%;
   padding: 10px 15px;
   color: #FFF;
   border: none;
   background: transparent;

}

1. search-box {

   position: relative;
   width: 100%;
   margin: 0;

}

.search-form input.form-control {

   box-shadow: none;
   color: #777777;
   height: 80px;
   background: #f8f8f8;
   border: none;
   border-radius: 30px;
   padding: 20px 30px;

}

.search-form button { background: #ff60a3;

   position: absolute;
   top: 10px;
   right: 10px;
   text-align: center;
   line-height: 42px;
   border-width: 0;
   border-radius: 30px;
   cursor: pointer;
   padding: 9px 50px;
   color: #ffffff;
   font-size: 18px;
   font-weight: 500;

}

1. close-btn {

   position: fixed;
   top: 1em;
   right: 1em;

}

1. close-btn:hover {

   color: #ff60a3;
   cursor: pointer;

}

/* hero area css */

.hero-bg {

   background-image: url(../images/hero-bg-1.png);
   background-position: center center;
   background-size: cover;
   color: #fff;
   height: 800px;
   overflow: hidden;

}

.hero-content {

   padding-top: 180px;

}

.hero-content h2 {

   color: #fff;
   font-size: 54px;
   font-weight: 700;
   line-height: 1.25;
   margin-bottom: 25px;

}

.hero-content p {

   font-size: 24px;
   color: #fff;
   margin-bottom: 25px;
   line-height: 1.50;

}

.hero-btn a.btn:first-child {

   margin-right: 35px;

}

.hero-mobile-img {

   position: absolute;
   right: -180px;
   top: 115px;

}

/* services area css */

.single-services {

   box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.14);
   padding: 46px 25px 35px;
   overflow: hidden;
   border-radius: 15px;

}

.style-shape {

   position: absolute;

}

.hero-style-shape .shape-1 {

   top: 10%;
   left: 0px;

}

.services-shape .style-shape.shape-1 {

   left: -60px;
   top: 0;
   z-index: 1;
   opacity: .5;

}

.services-shape .style-shape.shape-2 {

   left: 0;
   top: 0;
   z-index: -1;

}

.appnox-services-area .col-xl-4:nth-child(odd) .single-services {

   margin-top: 40px;

}

.single-services-content h3 {

   font-size: 24px;
   font-weight: 500;
   line-height: 1;
   margin: 57px 0 22px 0;

}

.single-services-content {

   margin-top: 26px;

}

/* about area css */ .appnox-about-area {

   position: relative;

}

.appnox-about-img {

   position: absolute;
   left: 0;
   bottom: 0;
   width: 46%;

}

.about-single-counter {

   position: relative;
   padding: 30px 0;
   text-align: center;
   border-radius: 15px 0 15px 15px;
   box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.14);
   margin-bottom: 30px;
   overflow: hidden;

}

.about-single-counter .counter {

   font-size: 48px;
   line-height: 50px;
   font-weight: 700;
   margin-bottom: 10px;

}

.about-single-counter span {

   font-size: 22px;
   line-height: 32px;
   font-weight: 500;
   color: #8b95a3;
   text-transform: capitalize;

}

.counter-shape {

   position: absolute;
   top: 0;
   right: 0;
   opacity: .30;
   transition: all .3s;

}

.about-single-counter:hover .counter-shape {

   transform: scale(1.5);
   opacity: 1;

}

/* pricing table area css */

.appnox-pricing-area {

   position: relative;
   background-position: center center;
   background-size: cover;
   background-attachment: inherit;
   position: relative;
   height: 100%;
   background-image: url(../images/prictable-bg.png);
   background-repeat: no-repeat;

}

.pricing-area {

   padding-top: 100px;

}

.pricing-area.pricing-area-3 {

   margin-top: 0px;

}

ul.price-nav {

   display: inline-block;
   border: 1px solid #e7e7e7;
   border-radius: 30px;

}

ul.price-nav li {

   display: inline-block;

}

.price-header h4 {

   font-weight: 600;
   text-transform: uppercase;
   font-size: 22px;
   color: #ffffff;
   font-family: 'Poppins', sans-serif;

}

ul.price-nav li a {

   padding: 20px 40px;
   line-height: 1;
   font-size: 15px;
   font-weight: 700;
   color: #878991;
   border-radius: 30px 0px 0px 30px;

}

ul.price-nav li a.active {

   color: #fff;
   background: #ff2782;
   -webkit-border-radius: 30px 0px 0px 30px;
   -moz-border-radius: 30px 0px 0px 30px;
   -ms-border-radius: 30px 0px 0px 30px;
   -o-border-radius: 30px 0px 0px 30px;

}

ul.price-nav li:nth-child(2) a {

   border-radius: 0px 30px 30px 0px;
   -webkit-border-radius: 0px 30px 30px 0px;
   -moz-border-radius: 0px 30px 30px 0px;
   -ms-border-radius: 0px 30px 30px 0px;
   -o-border-radius: 0px 30px 30px 0px;

}

.pricing-area {

   margin-bottom: -240px;

}

.single-price-area {

   background: #ffffff;
   border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   padding: 0 50px 40px;
   position: relative;
   overflow: hidden;
   transition: all .3s;    

border: 1px solid #f2f2f2; }

.single-price-bg {

   background-position: center center;
   background-size: cover;
   background-attachment: inherit;
   position: absolute;
   height: 100%;
   background-image: url(../images/prictable-bg.png);
   background-repeat: no-repeat;
   left: 0;
   right: 0;
   bottom: -30px;
   opacity: 0;
   visibility: hidden;
   transition: all .3s;
   z-index: -1;

}

.single-price-area:hover .price-header {

   background: #ff60a3;

}

.single-price-area:hover .btn {

   color: #ffffff;
   background: #ff2782;

}

.single-price-area:hover {

   box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);

}

.single-price-area.active .price-header {

   background: #ff60a3;

}

.single-price-area.active .btn {

   color: #ffffff;
   background: #ff2782;

}

.single-price-area.active {

   box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);

}

.price-header {

   position: relative;
   border-radius: 50%;
   display: inline-block;
   margin-top: -60px;
   text-align: center;
   background: #5e2ced;
   width: 200px;
   height: 200px;
   padding: 85px 0 0;
   margin-bottom: 30px;
   transition: all .3s;

}

.price-img {

   padding: 0 0 30px;

}

.price-header > span {

   font-size: 18px;
   color: #30323d;
   margin-bottom: 15px;
   font-weight: 600;

}

.price-header h2 {

   font-size: 45px;
   color: #ffffff;
   font-weight: 600;
   font-family: 'Poppins', sans-serif;
   transition: all .3s;

}

.price-item-list ul li {

   font-size: 17px;
   margin-bottom: 17px;

}

.price-item-list ul li:last-child {

   margin-bottom: 0px;

}

/* videos area css */

.appnox-videos {

   position: relative;

}

.appnox-videos:before {

   content: "";
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   background: #1c006d;
   opacity: 0.851;

}

.videos-icon-text {

   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

}

.videos-icon-text i {

   background: #ff2782;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   height: 140px;
   width: 140px;
   color: #fff;
   font-size: 30px;
   line-height: 140px;
   transition: .3s;
   -webkit-transition: .3s;
   -moz-transition: .3s;
   -ms-transition: .3s;
   -o-transition: .3s;
   animation: heartbeat 1s infinite alternate;

}

.videos-icon-text h3 {

   font-size: 48px;
   font-weight: 700;
   margin-bottom: 15px;
   color: #ffffff;

}

/* screen shots area css */ .appnox-screenshot-slider .screenshot-item {

   padding: 15px;
   margin: 15px;
   transition: all .3s;
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.14);
   border: 1px solid #f1f1f1;
   border-radius: 5px;

}

.appnox-screenshot-slider.owl-theme .owl-dots .owl-dot span {

   background: #5e2ced none repeat scroll 0 0;
   border-radius: 50%;
   display: inline-block;
   height: 15px;
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   width: 15px;
   transition: all .3s;
   margin: 0 4px;

}

.appnox-screenshot-slider.owl-theme .owl-dots .owl-dot.active span {

   background: #ff2782;
   border: medium none;
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   width: 30px;
   height: 15px;
   border-radius: 7.5px;

}

.appnox-screenshot-slider.owl-theme .owl-nav.disabled + .owl-dots {

   margin-top: 30px;

}

/* call to action area css */ .appnox-cta-area {

   background-position: center center;
   background-size: cover;
   background-attachment: inherit;
   position: relative;
   height: 100%;
   background-image: url(../images/cta-bg.jpg);
   background-color: #1a2b3c;
   background-repeat: no-repeat;

}

.appnox-cta-area:before {

   content: "";
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   background: #5e2ced;
   opacity: 0.6;

}

.cta-content h2 {

   font-size: 45px;
   color: #fff;
   font-weight: 500;
   line-height: 55px;
   display: inline-block;
   text-transform: capitalize;

}

.cta-content p {

   color: #ffffff;
   text-transform: capitalize;
   margin: 25px 0 30px 0;

}

.cta-btn {

   margin: 13px 0;

}

/* faq area css */

.faq-shape {

   position: absolute;
   right: -35px;
   top: 3px;
   z-index: -1;

}

.appnox-accordion-wrapper p {

   margin: 0;
   font-size: 18px;
   color: #878991;

}

.appnox-accordion-wrapper .card {

   margin-bottom: 20px;
   border-radius: 10px;
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.14);
   border: 0;
   border-top-left-radius: 10px;
   border-bottom-right-radius: 10px;

}

.appnox-accordion-wrapper .btn.btn-link {

   display: block;
   text-align: left;
   padding: 30px 35px 0;
   font-size: 24px;
   border: none;
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
   background: #fff;
   text-transform: capitalize;

}

.appnox-accordion-wrapper .btn.btn-link.collapsed {

   display: block;
   text-align: left;
   padding: 30px 35px;
   font-size: 24px;
   border: none;
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
   background: #fff;

}

.appnox-accordion-wrapper .btn.collapsed {

   background: #fff;
   border-radius: 15px;

}

.appnox-accordion-wrapper .card-header:first-child {

   border-radius: 15px;

}

.appnox-accordion-wrapper .card-header {

   padding: 0;
   border-bottom: 1px solid #fff;

}

.appnox-accordion-wrapper .card-body {

   padding: 20px 35px 25px 35px;

}

.appnox-accordion-wrapper .accordion > .card:first-of-type {

   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;

}

.appnox-accordion-wrapper .accordion > .card {

   border-radius: 10px !important;
   -webkit-border-radius: 10px !important;
   -moz-border-radius: 10px !important;
   -ms-border-radius: 10px !important;
   -o-border-radius: 10px !important;

}

.appnox-accordion-wrapper h2 a.btn {

   color: #ff2782;
   position: relative;

}

.appnox-accordion-wrapper h2 a.btn:hover {

   text-decoration: none;

}

.appnox-accordion-wrapper h2 a.btn.collapsed {

   color: #353858;
   text-transform: capitalize;

}

.appnox-accordion-wrapper h2 a.btn::after {

   content: "\f106";
   position: absolute;
   right: 25px;
   top: 35px;
   height: 25px;
   width: 25px;
   color: #ff2782;
   text-align: center;
   line-height: 25px;
   border-radius: 30px;
   font-family: fontawesome;

}

.appnox-accordion-wrapper h2 a.btn.collapsed::after {

   content: "\f107";
   position: absolute;
   right: 25px;
   top: 35px;
   height: 25px;
   width: 25px;
   color: #353858;
   text-align: center;
   line-height: 25px;
   border-radius: 30px;
   font-family: fontawesome;

}

.faq-thumb img {

   margin-left: -45px;

}

.faq-bottom-area h2 {

   font-weight: 600;
   font-size: 30px;
   color: #30323d;
   line-height: 40px;

}

/* testimonial area css */

.appnox-testimonial-area {

   background-position: center center;
   background-size: cover;
   background-attachment: inherit;
   position: relative;
   background-image: url(../images/testimonial-bg.png);

}

.testimonial-wraper {

   background: #ffffff;
   border-radius: 10px;

}

.single-testimonial {

   padding: 40px 60px;

}

.single-testimonial img {

   width: 100px !important;
   height: 100px;
   display: inline-block;
   margin: 0 auto;
   border-radius: 50%;
   border: 5px solid #ff2782;

}

.single-testimonial p {

   margin: 30px 0;

}

.single-testimonial h4 {

   text-transform: capitalize;
   font-size: 18px;
   font-weight: 600;
   line-height: 1;

}

.testimonial-wraper .owl-nav div {

   left: -130px;
   position: absolute;
   top: 50%;
   transform: translateY(-60%);
   transition: all 0.3s ease 0s;
   text-align: center;
   line-height: 95px;
   font-size: 30px !important;
   background: #ff2782 !important;
   border-radius: 50% !important;
   color: #fff !important;
   width: 100px;
   height: 100px;

}

.testimonial-wraper .owl-nav div.owl-next {

   left: auto;
   right: -130px;

}

.testimonial-wraper .owl-nav div:hover {

   background: #ffab00;

}

/* latest blog area css */ .single-blog-area {

   position: relative;
   overflow: hidden;

}

.single-blog-area:before {

   content: ;
   left: 0;
   top: 0;
   right: 0px;
   bottom: 0;
   position: absolute;
   transition: all .3s;
   background: -moz-linear-gradient(top, rgba(125, 185, 232, 0) 0%, rgba(0, 0, 0, 1) 100%);
   background: -webkit-linear-gradient(top, rgba(125, 185, 232, 0) 0%, rgba(0, 0, 0, 1) 100%);
   background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0%, rgba(0, 0, 0, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#000000', GradientType=0);

} .single-blog-area img {

   width: 100%;

} ul.category-list {

   position: absolute;
   left: 30px;
   top: 30px;
   transition: all .3s;
   visibility: hidden;
   opacity: 0;
   transform: scale(0);

}

ul.category-list li {

   display: inline-block;
   margin-right: 15px;

}

ul.category-list li a {

   font-size: 12px;
   line-height: 1;
   font-weight: 700;
   text-transform: uppercase;
   background: #ff2782;
   color: #ffffff;
   padding: 7px 12px;
   border-radius: 30px;

}

ul.category-list li a:hover {

   color: #ff2782;
   background: #ffffff;

}

.blog-title-date-wraper {

   position: absolute;
   left: 30px;
   bottom: 30px;
   right: 30px;
   transition: all .3s;
   margin-bottom: -60px;

}

.blog-title h3 a {

   font-size: 23px;
   line-height: 30px;
   font-weight: 500;
   text-transform: capitalize;
   color: #ffffff;

}

ul.blog-author-date {

   padding-top: 15px;
   margin-top: 15px;
   border-top: 1px solid #ffffff;
   opacity: 0;
   visibility: hidden;

}

ul.blog-author-date li {

   display: inline-block;
   font-size: 15px;
   text-transform: capitalize;
   margin-right: 18px;

}

ul.blog-author-date li a {

   color: #ffffff;

}

.single-blog-area:hover .blog-title-date-wraper {

   margin-bottom: 0;

}

.single-blog-area:hover ul.blog-author-date {

   opacity: 1;
   visibility: visible;

}

.single-blog-area:hover ul.category-list {

   visibility: visible;
   opacity: 1;
   transform: scale(1);

}

.single-blog-area:hover:before {

   background: -moz-linear-gradient(top, rgba(125, 185, 232, 0) 0%, rgba(94, 44, 237, 1) 100%);
   background: -webkit-linear-gradient(top, rgba(125, 185, 232, 0) 0%, rgba(94, 44, 237, 1) 100%);
   background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0%, rgba(94, 44, 237, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#5e2ced', GradientType=0);

}

/* footer area css */

.appnox-footer-area { position:relative; background: #3d54f2; } .appnox-footer-area:before { content: url(assets/img/footer/footer-bg.jpg);

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;

} /* wedget 1 css */

.footer-widget {

   margin-bottom: 30px;

}

.widget-1 p {

   color: #fff;
   font-size: 15px;

}

ul.footer-social {

   padding-top: 30px;
   margin-top: 25px;
   border-top: 1px solid #ffffff;

}

ul.footer-social li {

   display: inline-block;
   margin-right: 25px;

}

ul.footer-social li a {

   color: #fff;
   font-size: 16px;

}

ul.footer-social li a i {}

.footer-logo {

   margin-bottom: 28px;

}

/* wedget 2 css */ .footer-widget.widget-2 {

   margin-left: 60px;

}

.footer-widget > h3 {

   font-weight: 500;
   color: #fff;
   margin-bottom: 35px;
   text-transform: capitalize;
   font-size: 28px;

}

.footer-popu-link {}

.footer-popu-link li {

   display: block;
   margin-bottom: 15px;

}

.footer-popu-link li:hover a {

   color: #ff60a3;
   margin-left: 4px;
   font-family: 'Poppins', sans-serif;

}

.footer-popu-link li:last-child {

   margin-bottom: 0;

}

.footer-popu-link li a {

   font-family: 'Poppins', sans-serif;
   color: #fff;
   text-transform: capitalize;
   font-weight: 600;
   font-size: 15px;

}

.footer-popu-link li a i {}

/* wedget 3 css */ .footer-newsletter-form-area input.form-control {

   border-radius: 50px;
   box-shadow: none;
   color: #353858;
   height: 50px;
   margin-bottom: 20px;
   background: #ffffff;
   padding: 15px;
   border: 1px solid #ffffff;

}

/* footer copyright css */

.footer-copyright p {

   color: #fff;
   font-size: 16px;

}

.footer-copyright {

   border-top: 1px solid #ffffff;
   margin-top: 100px;

}

.footer-copyright p a {

   color: #fff;
   font-weight: 700;

}

/* breadcrumb area css */

.appnox-breadcrumb-area {

   background-position: center center;
   background-size: cover;
   position: relative;
   background-image: url(../images/breadcrumb.png);
   padding: 135px 0 250px 0;

}

.appnox-breadcrumb-area h2 {

   color: #fff;
   font-size: 50px;
   font-weight: 500;
   margin-bottom: 15px;
   text-transform: capitalize;

}

.appnox-breadcrumb-area .breadcrumb {

   background: inherit;
   padding: 0;
   margin: 0;

}

.breadcrumb .breadcrumb-item {

   font-family: 'Poppins', sans-serif;
   font-size: 24px;

}

.appnox-breadcrumb-area .breadcrumb .breadcrumb-item, .appnox-breadcrumb-area .breadcrumb-item.active a, .appnox-breadcrumb-area .breadcrumb .breadcrumb-item.active {

   color: #fff;
   text-transform: capitalize;

}

.appnox-breadcrumb-area .breadcrumb .breadcrumb-item a {

   color: #ffffff;
   text-transform: capitalize;

}

.appnox-breadcrumb-area .breadcrumb-item + .breadcrumb-item::before {

   color: #fff;

}

/* blog wedget css */

/* widget search area css */ .single-sid-wdg {

   margin-bottom: 50px;
   border: 1px solid #f1f1f1;
   padding: 30px;

}

.sid-wdg-title {

   font-size: 18px;
   font-weight: 700;
   text-transform: capitalize;
   margin-bottom: 30px;
   color: #1a2b3c;
   line-height: 1;

}

.wdg-search-form {

   position: relative;

}

button.submit-btn {

   background: #ff2782 none repeat scroll 0 0;
   border: 1px solid #f1f1f1;
   color: #ffffff;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 1px;
   line-height: 25px;
   padding: 15px 30px;
   display: inline-block;
   border-radius: 0;
   position: absolute;
   right: 0;
   top: 0;
   cursor: pointer;
   border-left-color: #f7faff;

}

.wdg-search-form input {

   height: 57px;
   border-radius: 0;
   box-shadow: none;
   color: #1a2b3c;
   background: transparent;
   border: 1px solid #f1f1f1;
   width: 100%;
   padding: 20px;
   font-family: 'Poppins', sans-serif;
   font-size: 15px;
   text-transform: capitalize;

}

.wdg-search-form input :focus {

   background: transparent !important;
   border: 1px solid #98cb2b;

}

/* widget latest post area css */

.single-wdg-post {

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #f1f1f1;

}

.single-wdg-post:last-child {

   margin-bottom: 0;
   padding-bottom: 0;
   border: none;

}

.wdg-post-img {

   min-width: 100px;
   height: auto;

}

.wdg-post-content {

   padding-left: 12px;

}

.wdg-post-content h5 {

   font-size: 16px;
   font-weight: 500;
   line-height: 22px;
   color: #1a2b3c;

}

.single-wdg-post:hover .wdg-post-content h5 a {

   color: #ff60a3;

}

.wdg-post-content span {

   margin-top: 10px;
   display: block;
   font-size: 14px;
   line-height: 24px;
   font-weight: 400;
   color: #777777;

}

/* widget post archive area css */

.wdg-post-archive li {

   margin-bottom: 25px;

}

.wdg-post-archive li:last-child {

   margin-bottom: 0;

}

.wdg-post-archive li a {

   font-size: 15px;
   color: #757575;
   font-weight: 400;
   display: block;
   text-transform: capitalize;

}

.wdg-post-archive li:hover a {

   color: #ff60a3;

}

.wdg-post-archive li a span {

   float: right;

}

/* widget follow us css */ .wdg-follow-us li {

   display: inline-block;
   margin: 0 5px;

}

.wdg-follow-us li a {

   display: block;
   text-align: center;
   font-size: 20px;
   color: #1a2b3c;
   background: #ffffff;
   border-radius: 50%;
   line-height: 40px;
   width: 40px;
   height: 40px;
   transition: .3s all;
   border: 1px solid #f1f1f1;

}

.wdg-follow-us li a:hover {

   color: #fff;
   background: #ff2782;

}

/* widget tags area css */

.tag-list li {

   display: inline-block;
   margin: 0px 5px 10px 0px;

}

.tag-list li a {

   font-size: 13px;
   line-height: 24px;
   color: #1a2b3c;
   padding: 10px 15px;
   border: 1px solid #f1f1f1;
   display: block;
   transition: all .2s;
   text-transform: capitalize;
   border-radius: 20px;

}

.tag-list li a:hover {

   background: #ff60a3;
   color: #fff;

}

/* blog details area css */

.blog-details-content p {

   margin-bottom: 30px;

}

.blog-details-content p:last-child {

   margin-bottom: 0;

}

.blog-details-content img {

   margin-bottom: 20px;

}

.blog-details-content h1, .blog-details-content h2, .blog-details-content h3, .blog-details-content h4, .blog-details-content h5, .blog-details-content h6 {

   margin: 10px 0 25px;
   font-weight: 500;

}

.blog-details-content h3 {

   font-size: 30px;
   text-transform: capitalize;
   line-height: 1;

}

.block-quote {

   background: #5e2ced;
   padding: 39px 30px 40px 85px;
   box-shadow: 0px 0px 30px 0px rgba(26, 43, 60, 0.15);
   border-radius: 15px;
   position: relative;
   margin: 0 0 30px 55px;

}

.block-quote:before {

   content: url(assets/img/blog/quote.png);
   position: absolute;
   left: -55px;
   padding: 39px 28px;
   background: #ff2782;
   border-radius: 15px;
   top: 0;
   bottom: 0;
   width: 110px;
   height: 124px;
   margin: auto;

}

.block-quote p {

   color: #ffffff;
   font-size: 20px;
   font-weight: 500;
   line-height: 32px;
   margin: 0;

}

/* blog details tag & share */ .post-tag-share-area {

   padding: 70px 0;

}

.post-tag-area span, .blog-share-icon span {

   font-weight: 500;
   font-size: 15px;
   text-transform: capitalize;
   color: #1a2b3c;
   margin-right: 15px;

}

.post-tag-area {

   display: inline-block;

}

.post-tag-share-area ul {

   display: inline-block;

}

.post-tag li {

   display: inline-block;
   margin: 8px 15px 8px 0;

}

.post-tag li a {

   font-size: 13px;
   font-weight: 700;
   color: #707b8e;
   background: #f5f6fa;
   padding: 7px 10px;
   border: 1px solid #f1f1f1;
   border-radius: 30px;
   text-transform: capitalize;

}

.post-tag li a:hover {

   background: #ff2782;
   color: #ffffff;

}

.post-tag li strong {

   color: #ffab00;
   text-transform: capitalize;

}

ul.share-icon-list {}

ul.share-icon-list li {

   display: inline-block;
   margin-right: 10px;

}

ul.share-icon-list li:hover a {

   color: #fff;
   background: #ff60a3;

}

ul.share-icon-list li a {

   display: block;
   text-align: center;
   font-size: 18px;
   color: #1a2b3c;
   background: #fff;
   border-radius: 50%;
   line-height: 40px;
   width: 40px;
   height: 40px;
   transition: .3s all;
   border: 1px solid #f1f1f1;

}

ul.share-icon-list li a i {}

/* blog author area css */

.blog-author-area {

   border-top: 1px solid #e7eaf0;
   border-bottom: 1px solid #e7eaf0;
   display: flex;
   align-items: start;
   justify-content: center;
   padding: 35px 0;
   margin: 0 0 70px 0;

}

.blog-author-img {

   width: 140px;
   height: auto;
   margin-right: 20px;

}

.blog-author-img img {

   border-radius: 50%;

}

.author-desig {

   margin-bottom: 18px;

}

.author-desig h3 {

   font-weight: 500;
   font-size: 24px;
   text-transform: capitalize;

}

.blog-author-area p {

   font-size: 16px;
   line-height: 24px;

}

/* related post area css */

.post-heading {

   margin-bottom: 30px;

}

.post-heading h3 {

   font-size: 28px;
   font-weight: 600;
   text-transform: capitalize;
   color: #1a2b3c;
   line-height: 1;

}

/* recent comments area css */

.comments-box {

   margin-bottom: 30px;
   border-bottom: 1px solid #e7eaf0;
   padding-bottom: 30px;

}

.comments-avatar {

   float: left;
   width: 100px;

}

.comments-avatar img {

   border-radius: 50%;

}

.comments-text {

   overflow: hidden;
   padding-left: 30px;

}

.avatar-name-date {

   overflow: hidden;

}

.avatar-name-date > h5 {

   font-size: 18px;
   font-weight: 500;
   text-transform: capitalize;
   color: #1a2b3c;
   font-family: 'Poppins', sans-serif;
   line-height: 1;

}

.avatar-name-date span {

   text-transform: capitalize;
   font-weight: 400;
   font-size: 14px;
   margin: 10px 0 12px;
   display: block;
   color: #333333;
   font-family: 'Poppins', sans-serif;
   line-height: 1;

}

.comments-text > p {

   margin-bottom: 20px;
   color: #878991;
   font-size: 17px;

}

.comments-text > a {

   display: inline-block;
   font-size: 16px;
   font-weight: 600;
   text-transform: capitalize;
   color: #1a2b3c;
   font-family: 'Poppins', sans-serif;

}

.comments-reply {

   padding-left: 130px;

}

/* comments form area css */

.post-comments-form-area {

   margin: 40px 0 0 0;

}

.post-comments-form input.form-control {

   box-shadow: none;
   color: #777777;
   height: 50px;
   margin-bottom: 30px;
   background: #ffffff;
   border: 1px solid #e7eaf0;
   border-radius: 25px;
   padding: 5px 20px;
   transition: all .3s;

}

.post-comments-form textarea.form-control {

   height: 133px;
   box-shadow: none;
   color: #777777;
   margin-bottom: 30px;
   background: #ffffff;
   border: 1px solid #e7eaf0;
   border-radius: 25px;
   padding: 15px 20px;
   transition: all .3s;

}

.post-comments-form textarea.form-control:focus, .post-comments-form input.form-control:focus {

   box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
   outline: none;
   border: 1px solid #ff60a3;

}

/* contact area css */ .contact-info-area {

   margin: 100px 0;

}

.contact-info-box {

   display: flex;
   margin-bottom: 40px;

}

.contact-info-box:last-child {

   margin-bottom: 0;

}

.contact-info-icon {

   background: #ffffff;
   border-radius: 50%;
   width: 80px;
   height: 80px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.14);
   margin-right: 20px;

}

.contact-info-icon img {

   padding: 25px 0;

}

ul.contact-info {

   padding: 10px 0;

}

ul.contact-info li, ul.contact-info li a {

   font-size: 20px;
   line-height: 30px;
   color: #656970;
   font-weight: 500;
   margin-bottom: 0px;
   font-family: 'Poppins', sans-serif;

}

1. appnox-map {

   width: 100%;
   height: 400px;
   border-radius: 30px;

}

/* contact form area css */ .appnox-contact-form-area {

   padding: 70px 50px;
   background: #ffffff;
   box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.14);
   border-radius: 10px;

}

.appnox-contact-form input.form-control {

   box-shadow: none;
   color: #777777;
   height: 50px;
   margin-bottom: 30px;
   background: #ffffff;
   border: 1px solid #e7eaf0;
   border-radius: 25px;
   padding: 5px 20px;
   transition: all .3s;

}

.appnox-contact-form textarea.form-control:focus, .appnox-contact-form input.form-control:focus {

   box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
   outline: none;
   border: 1px solid #ff60a3;

}

.appnox-contact-form textarea.form-control {

   height: 133px;
   box-shadow: none;
   color: #777777;
   margin-bottom: 30px;
   background: #ffffff;
   border: 1px solid #e7eaf0;
   border-radius: 25px;
   padding: 15px 20px;
   transition: all .3s;

}

p.form-message {

   font-size: 15px;

}

/* error area css */

.error-content {

   margin-top: 100px;

}

.error-content h2 {

   color: #1a2b3c;
   font-family: 'Poppins', sans-serif;
   font-size: 60px;
   font-weight: 700;
   text-transform: capitalize;

}

.error-content p {

   margin: 55px 0 33px;
   font-size: 23px;
   line-height: 36px;

}