/*--------------------------------------------------------------

Template: Caracraft
Author: 
Author URI: 
Version:  1.0
Description: Caracraft Minimal portfolio template for creative.
Design and Developed by: 

---------------------------------------------------------------*/
 
/*---------------------------------------
CSS Table of content: 
----------------------------------------

1. Theme default css
  1.1 Background color variation for section
  1.2 Button default
  1.3 Buttons variation
  1.4 Black button
2. Header style one 
2.1 Header menu area
3. Slider area
4. About section
5. Area title
6. Next/Prev buttons
7. Sections backgrounds 
8. Skill bar styles
9. Service section
10. Portfolio style
11. Portfolio filter style
12. Experience Area
13. Testimonial section
14. Brand Slider area
15. Blog section
16. Contact section
17. Contact from area
18. Send button animations
19. Breadcrumb styles 
20. Comment form area
21. Widget area
22. Instargam widget
23. Footer area
  23.1 Slick slider button hover style
24 Dark layout styles
25. Minimal layout style
26. Dark blog layout style  
27. Overlay menu sections style

----------------------------------------*/
/*-------------------------------------------------------
1. Theme default css
---------------------------------------------------------*/
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  text-rendering: optimizeLegibility;
  text-rendering: geometricPrecision;
  font-smooth: always;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}
.img{
max-width: 100%;
transition: all 0.3s ease-out 0s;
}
a,
.button {
  -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,a:hover {
  color: currentColor;
}
a:focus,
a:hover,
.button:focus {
    text-decoration: none;
    outline: none;
}
.portfolio-cat a:hover,
.footer-menu li a:hover {
  color: #D6B161;
  text-decoration: none;
}
:focus {
  outline: none;
}
a,
button {
  outline: medium none;
  color: #337ab7;
}
.page-minimal a {
  color: #737272;
}
.page-minimal a:hover {
  color: #d6b161;
}
.uppercase { 
  text-transform: uppercase;
}
.capitalize { 
  text-transform: capitalize;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Dosis', sans-serif;
  font-weight: normal;
  color: #333333;
  margin-top: 0px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
}

.layout-dark h1,
.layout-dark h2,
.layout-dark h3,
.layout-dark h4,
.layout-dark h5,
.layout-dark h6 {
  color: #ffffff;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a { 
    color: inherit;
}
h1 {
    font-size: 40px;
}
h2 {
    font-size: 35px;
}
h3 {
    font-size: 28px;
}
h4 {
    font-size: 22px;
}
h5 {
    font-size: 18px;
}
h6 {
    font-size: 16px;
}
ul {
  margin: 0px;
  padding: 0px;
}
li { 
	list-style: none
 }
p {
  color: #737272;
  font-size: 15px;
  letter-spacing: 0.5px;
  line-height: 1.5;
  margin-bottom: 15px;
}
hr{
  margin: 60px 0;
  padding: 0px;
  border-bottom: 1px solid #e5e5e5;
  border-top: 0px;
}
label {
  color: #737272;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
}
.layout-dark label{
  color: #999fa9;
}
*::-moz-selection {
  background: #d6b161;
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: #d6b161;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #d6b161;
  color: #fff;
  text-shadow: none;
}
*::-moz-placeholder {
  color: #555555;
  font-size: 14px;
  opacity: 1;
}
*::placeholder {
  color: #555555;
  font-size: 14px;
  opacity: 1;
}
.container {
  width: 1200px;
}
.push-right {
  float: right;
}
.push-left {
  float: left;
}
.width-50 {
  width: 50%;
  float: left;
}
.mb-60 {
  margin-bottom: 60px;
}
.mb-80 {
  margin-bottom: 80px;
}
.mb-90 {
  margin-bottom: 90px;
}
.dir-rtl {
  direction: RTL;
  /*unicode-bidi: bidi-override;*/
}
/*-------------------------------------------------------
  1.1 Background color variation for section
---------------------------------------------------------*/
.white-bg { 
	background: #ffffff; 
}
.gray-bg { 
	background: #f8f8f9;
}
.transparent-bg { 
	background: transparent; 
}
/*-------------------------------------
  1.2 Button default
---------------------------------------*/
.button {
  border: 1px solid #2b2b2b;
  background: transparent;
  color: #333333;
  display: inline-block;
  font-size: 12px;
  height: 60px;
  letter-spacing: 2px;
  line-height: 60px;
  padding: 0 60px;
  text-transform: uppercase;


  /*************************************

  New typography for button

  ***********************************/
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: "Open Sans", arial, sans-serif;
}
/*-------------------------------------
  1.3 Buttons variation
---------------------------------------*/
.button.large  { 
  padding: 0 60px; 
  font-size: 12px;
}
.button.small {
  font-size: 11px;
  padding: 0 25px;
}
.button.extra-small {
  font-size: 10px;
  height: 40px;
  letter-spacing: 1.5px;
  line-height: 40px;
  padding: 0 15px;
}
/*-------------------------------------
  1.4 Black button
---------------------------------------*/
.button:hover {
  background: #333333;
  color: #ffffff;
}
.button.active-btn {
  background: #333333;
  color: #ffffff;
  border: 1px solid transparent;
}
.button.active-btn:hover{
  background: transparent;
  color: #333333;
  border: 1px solid #2b2b2b;
}
/*-----------------------------------
  2. Header style one
------------------------------------*/
.caracraft-header .navbar-brand {
  color: #ffffff;
  display: inline-block;
  float: left;
  font-size: 24px;
  font-weight: 400;
  height: auto;
  letter-spacing: 1px;
  line-height: 20px;
  padding: 0;
  text-transform: uppercase;
  vertical-align: middle;
}
.caracraft-header .navbar {
  padding: 50px 0 0;
  transition: background 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s;
}
.caracraft-header .top-nav-collapse {
    background: rgb(255, 255, 255) none repeat scroll 0 0;
    border: medium none;
    box-shadow: 0 1px 3px rgba(50, 50, 50, 0.2);
    padding: 5px 0;
}
.navbar-brand.page-scroll img {
  transition: .3s;
}
.top-nav-collapse .navbar-brand.page-scroll img {
  padding: 5px 0;
}
.hover-style-one li a::before {
  background: #333 none repeat scroll 0 0;
  bottom: -2px;
  color: rgba(0, 0, 0, 0);
  content: "";
  font-size: 10px;
  font-weight: normal;
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all 0.3s ease 0s;
  width: 0;
}
.hover-style-one li:hover > a::before, 
.hover-style-one li.active > a::before{
  opacity: 1;
  width: 50%;
}
.caracraft-header .hover-style-one li:hover > a::before, 
.caracraft-header .hover-style-one li.active > a::before{
  color: #ffffff;
  text-shadow: 7px 0 #ffffff, 14px 0 #ffffff;
}
.caracraft-header .top-nav-collapse .hover-style-one li:hover > a::before, 
.caracraft-header .top-nav-collapse .hover-style-one li.active > a::before {
  color: #222;
  text-shadow: 7px 0 #222, 14px 0 #222;
}
.hover-style-one li a{
  position: relative;
}
.caracraft-header .top-nav-collapse .hover-style-one li:hover > a::before, 
.caracraft-header .top-nav-collapse .hover-style-one li.active > a::before {
  color: #222222;
  text-shadow: 7px 0 #222222, 14px 0 #222222;
}
.dropdown-menu-right .dropdown-submenu > a::after, 
.navbar-right .dropdown-submenu > a::after {

  margin-left: -12px;
  margin-top: 4px;
}
.caracraft-header .navbar > .container .navbar-brand, 
.caracraft-header .navbar > .container-fluid .navbar-brand {
  margin-left: 0;
}
.caracraft-header .navbar-toggle {
  background-color: transparent;
  background-image: none;
  border: 1px solid #333;
  border-radius: 0;
  float: right;
  margin: 13px 0;
  padding: 9px;
  position: relative;
}
.caracraft-header .navbar-toggle .icon-bar + .icon-bar {
  margin-top: 5px;
}
.caracraft-header .navbar-toggle .icon-bar {
  background: #333 none repeat scroll 0 0;
  border-radius: 0;
  display: block;
  height: 1px;
  width: 20px;
}
.caracraft-header .top-nav-collapse .navbar-toggle .icon-bar{
  background: #999;
}
/* ---------------------------------------
  2.1 Header menu area
------------------------------------------*/
.menu-toggle-btn {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.menu-logo-area {
  position: relative;
}
.nav.navbar-nav.hover-style-one {
  margin-right: 60px;
}
.nav.navbar-nav.hover-style-one {
  opacity: 0;
  transition: all 0.5s ease 0s;
  visibility: hidden;
}
.nav-show .nav.navbar-nav.hover-style-one {
  opacity: 1;
  visibility: visible;
}
/* ---------------------------------------
  3. Slider area
------------------------------------------*/
.slider-area {
  position: relative;
}
.caracraft-single-slider {
  background: rgba(0, 0, 0, 0) url(img/1/BON_2930.jpg) repeat scroll center center / cover ;
  padding: 300px 0;
}
.slider-style-minimal .caracraft-single-slider {
  background: rgba(0, 0, 0, 0) url(img/1/BON_2948.jpg) repeat scroll center center / cover ;
  padding: 300px 0;
}
.slider-style-dark .caracraft-single-slider {
  background: rgba(0, 0, 0, 0) url(img/1/BON_2930.jpg) repeat scroll center center / cover ;
}
.single-slide-content h1 {
  font-size: 64px;
  letter-spacing: 6px;
  line-height: 80px;
  margin-bottom: 17px;
  text-transform: uppercase;
}
.single-slide-content p {
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: "Open Sans", arial, sans-serif;
}
.layout-dark .single-slide-content p {
  color: #999fa9;
}
.scroll-bottom-btn {
  bottom: 80px;
  position: absolute;
  width: 100%;
}
.sc-button-wrapper a {
  background: #131313 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  height: 45px;
  line-height: 45px;
  text-align: center;
  width: 45px;
}

.btn-submitt:hover .fa-paper-plane {
  animation: 1500ms ease 0s normal none 1 running caracraft-send;
}
.sc-button-wrapper a:hover i {

}
.sc-button-wrapper > p {
  color: #333333;
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  margin: 0 0 0 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: "Open Sans", arial, sans-serif;
}
/* ---------------------------------------
  4. About section
------------------------------------------*/
.about-section {
  padding: 120px 0 100px;
}
.about-block-text p {
  margin-bottom: 35px;
  text-align: justify;
}
/* ---------------------------------------
  5. Area title
------------------------------------------*/
.area-title h1 {
  font-size: 45px;
  letter-spacing: 0.5px;
  margin-bottom: 25px;
}
.area-title p {
  font-size: 18px;
  margin: 0;
  font-family: 'Dosis', sans-serif;
  letter-spacing: 1px;
}
.ca-name {
  color: #000;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  text-orientation: upright;
  text-transform: uppercase;
  writing-mode: vertical-lr;
}
.sign-image {
  display: inline-block;
  margin-left: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.about-block-text {
  margin-bottom: 28px;
  padding-right: 50px;
}
.signature {
  margin-bottom: 28px;
  position: relative;
}
.download-btn .button.active-btn {
  padding: 0 50px;
}
/* ---------------------------------------
  6. Next/Prev buttons
------------------------------------------*/
.slick-prev, 
.slick-next {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #131313;
  color: transparent;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 45px;
  line-height: 0;
  outline: medium none;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
  width: 45px;
}
.slick-prev::before, 
.slick-next::before {
  color: #131313;
  font-family: fontawesome;
  font-size: 12px;
  line-height: 1;
  opacity: 1;
}
.slick-prev::before {
  content: "\f177";
}
.slick-next {
  right: 0;
  background: #333;
}
.slick-prev {
  left: 0;
}
.gallery-slider .slick-prev, 
.gallery-slider .slick-next {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #131313;
  bottom: -125px;
  color: transparent;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 45px;
  line-height: 0;
  outline: medium none;
  padding: 0;
  position: absolute;
  top: auto;
  transform: none;
  width: 45px;
}
.section-gallery-content{
  position: relative;
}
.gallery-box {
  border: 30px solid #fff;
  box-shadow: 0 0px 35px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
}
.gallery-slider .slick-next {
  right: -30px;
  background: #333333;
  border: 1px solid transparent;
  color: #fff;
}
.slick-next::before {
  content: "\f178";
  color: #fff;
}
.gallery-slider .slick-prev {
  left: auto;
  right: 30px;
}
.section-gallery-content h1 {
  color: #cecece;
  font-size: 64px;
  line-height: 1;
  margin: -31px 0 0;
  position: relative;
  text-align: center;
  position: absolute;
  transform: translateY(-30%);
  -ms-transform: translateY(-30%);
  -o-transform: translateY(-30%);
  -moz-transform: translateY(-30%);
  -webkit-transform: translateY(-30%);
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.gallery-popup img,
.single-video-slide > img {
  width: 100%;
}
.pagingInfo {
  color: #333333;
  display: inline-block;
  font-size: 18px;
  margin-top: 50px;
  position: relative;
  min-height: 45px;
  line-height: 45px;
}
.pagingInfo::before {
  background: #333 none repeat scroll 0 0;
  content: "";
  height: 1px;
  left: calc(100% + 40px);
  position: absolute;
  top: 50%;
  width: 45px;
}
/* ---------------------------------------
  7. Sections backgrounds 
------------------------------------------*/
.section-bg-regular {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #ffffff 59%, #f9f9f9 41%) repeat scroll 0 0; /*Standard*/
}
.section-bg-revarse {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #f8f8f9 59%, #fff 41%) repeat scroll 0 0; /*Standard*/
}
.layout-dark .section-bg-regular {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #292b31 59%, #2e3037 41%) repeat scroll 0 0; /*Standard*/
}
.layout-dark .section-bg-revarse {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #2e3037 59%, #292b31 41%) repeat scroll 0 0; /*Standard*/
}
.layout-dark .white-bg {
  background: #292b31 none repeat scroll 0 0;
}
.layout-dark .gray-bg {
  background: #2e3037 none repeat scroll 0 0;
}
.single-video-slide {
  position: relative;
}
    
.video-init-btn {
  bottom: 80px;
  position: absolute;
  right: 80px;
  z-index: 98;
}
.video-init-btn.center {
  bottom: 50%;
  transform: translate(-50%);
  position: absolute;
  left: 50%;
  width: 100%;
  text-align: center;
}
.video-init-btn a {
  color: #000000;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 20px;
  text-transform: uppercase;
}
.video-init-btn a:hover {
  color: #000000;
}
.video-init-btn a img {
  margin-left: 10px;
  margin-top: -3px;
}
/* -----------------------------------
  8. Skill bar styles
--------------------------------------*/
.single-bar .progress-bar {
  float: right;
}
.single-bar .progress {
  background-color: #cecece;
  border-radius: 0;
  box-shadow: none;
  height: 2px;
  margin-bottom: 35px;
  overflow: hidden;
}
.single-bar .progress-bar {
  background-color: #333333;
  box-shadow: none;
}
.single-bar > p {
  color: #000;
  font-size: 12px;
  line-height: 1;
  margin-bottom: 19px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: "Open Sans", arial, sans-serif;
}
.skill-content-section {
  margin-top: 0px;
  padding-left: 125px;
}
.skill-content-section .area-title h1 {
  font-size: 38px;
  margin-bottom: 30px;
}
.skill-content-section .area-title {
  margin-bottom: 65px;
}
.single-bar:last-child .progress {
  margin-bottom: 0;
}
.skill-section {
  padding: 120px 0;
}
/* -----------------------------------
  9. Service section
--------------------------------------*/
.service-section {
  padding: 120px 0px 180px;
}
.single-service {
  background: #f8f8f9 none repeat scroll 0 0;
  padding: 30px;
}
.service-box-inner {
  background: #fefefe none repeat scroll 0 0;
  padding: 50px 25px;
  transition: all 0.3s ease 0s;
  box-shadow: 0 0px 32px rgba(0, 0, 0, 0.15);
}
.single-service-slider-item.slick-center .service-box-inner,
.single-service:hover .service-box-inner {
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  background: #fff;
}
.service-icon i {
  color: #333333;
  display: inline-block;
  font-size: 45px;
  margin-bottom: 30px;
}
.single-service h3 {
  font-size: 21px;
  margin-bottom: 30px;
}
.service-box-inner a {
  color: #333;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "Open Sans", arial, sans-serif;
}
.theme-b-w-btn:hover,.theme-b-w-btn:focus,.theme-b-w-btn:active{
  color: #333;
}
.service-box-inner > p {
  margin-bottom: 35px;
}
.single-service-slider-item {
  padding: 0 15px;
}
.service-slider .slick-prev, 
.service-slider .slick-next {
  bottom: -107px;
  right: 15px;
  top: auto;
  transform: none;
  transition: .3s;
}
.slick-prev, 
.slick-next {
  transition: .3s;
}
.service-slider .slick-prev {
  left: auto;
  right: 70px;
}
/* -----------------------------------------
  10. Portfolio style
-------------------------------------------- */
.portfolio-section {
  padding: 120px 0px;
}
.portfolio-container.portfolio-gutter {
  margin-left: -15px;
  margin-right: -15px;
}
.portfolio-gutter .portfolio-item {
  padding: 0 15px;
  margin-bottom: 30px;
}
.portfolio-item {
  float: left;
}
.portfolio-column-count-2 .portfolio-item {
  width: 50%;
}
.portfolio-column-count-3 .portfolio-item {
  width: 33.33%;
}
.portfolio-column-count-4 .portfolio-item {
  width: 25%;
}
.portfolio-column-count-5 .portfolio-item {
  width: 20%;
}
.portfolio-item-content {
  position: relative;
}
.portfolio-fullwidth {
  max-width: 100%;
  overflow: hidden;
}
.item-thumbnail img {
  width: 100%;
}
/* -----------------------------------------
  11. Portfolio filter style
-------------------------------------------- */
.portfolio-filter li {
  display: inline-block;
  margin-left: 40px;
}
.portfolio-filter li a {
  color: #737272;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: "Open Sans", arial, sans-serif;
  position: relative;
}
.portfolio-filter > li a::before {
  background: #333 none repeat scroll 0 0;
  content: "";
  height: 1px;
  position: absolute;
  top: 20px;
  transition: all 0.3s ease 0s;
  width: 0;
}
.portfolio-filter > li.active a,
.portfolio-filter > li a:hover {
  color: #333;
}
.portfolio-filter > li.active a::before ,
.portfolio-filter > li a:hover::before {
  width: 50%;
  background: #333;
}
.portfolio-filter li:first-child {
  margin-left: 0;
}
.portfolio-description {
  background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
  box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
  height: calc(100% - 60px);
  left: 30px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 30px;
  transform: translateX(-15px) translateY(-15px);
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: calc(100% - 60px);
}
.portfolio-item:hover .portfolio-description{
  transform: translateX(0) translateY(0);
  visibility: visible;
  opacity: 1;  
}
.description-box {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 100%;
}
.portfolio-item:hover .description-box {
  visibility: visible;
  opacity: 1;
}
.portfolio-catagory {
  margin-bottom: 15px;
}
.portfolio-catagory > li {
  display: inline-block;
  position: relative;
  margin-left: 8px;
}
.portfolio-catagory > li::before {
  content: "/";
  left: -10px;
  position: absolute;
}
.portfolio-catagory > li:first-child {
  margin-left: 0;
}
.portfolio-catagory > li:first-child:before {
  content: ""
}
.portfolio-catagory > li a {
  color: #333;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.load-more {
  margin-top: 70px;
}
/* -----------------------------------------
  12. Experience Area
-------------------------------------------- */
.experience-section {
  padding: 120px 0;
}
.experience-wrapper {
  overflow: hidden;
}
.single-experience {
  padding: 30px;
}
.single-description-conent {
  background: #fefefe none repeat scroll 0 0;
  padding: 45px 20px 45px 40px;
  box-shadow: 0 0px 32px rgba(0, 0, 0, 0.15);
  transition: .3s;
}
.single-experience :hover.single-description-conent {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
}
.single-description-conent h4 {
  font-size: 21px;
}
.company-name {
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 30px;
}
.single-description-conent p:not(.company-name) {
  margin: 0;
}
.single-duration-conent {
  height: 294px;
  line-height: 242px;
  position: relative;
  text-align: center;
}
.single-duration-conent > h1 {
  font-size: 48px;
  line-height: 1;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.hire-btn {
  margin-top: 100px;
  text-align: center;
}
.hire-btn .button {
  padding: 0 70px;
}
/* -----------------------------------------
  13. Testimonial section
-------------------------------------------- */
.testimonial-section {
  padding: 120px 0px 180px;
}
.testimonial-area-wrapper {
  background: rgba(0, 0, 0, 0) url(http://placehold.it/1170x526) repeat scroll 0 0;
  margin-bottom: 30px;
  padding: 115px 550px 160px 100px;
}
.minimal-testimonial .testimonial-area-wrapper {
  background: rgba(0, 0, 0, 0) url(http://placehold.it/1170x526) repeat scroll 0 0;
}
.dark-testimonial .testimonial-area-wrapper {
  background: rgba(0, 0, 0, 0) url(http://placehold.it/1170x526) repeat scroll 0 0;
}
.client-name {
  color: #333333;
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0;
}
.testimonial-area-wrapper .slick-prev, 
.testimonial-area-wrapper .slick-next {
  bottom: -100px;
  top: auto;
  transform: none;
}
.testimonial-area-wrapper .slick-next {
  background: #333 none repeat scroll 0 0;
  left: 55px;
  right: auto;
}
.single-testimonial img:not(.signature-t) {
  margin-bottom: 20px;
}
.testimonial-area-wrapper p {
    margin-left: 1px;
}

/* -----------------------------------------
  14. Brand Slider area
-------------------------------------------- */
.single-brand-slide  {
  text-align: center;
  padding: 0 15px;
}
.single-brand-slide-inner {
  background: #fff;
  padding: 30px;
}
.single-brand-slide img {
  display: inline-block;
}
.brand-box {
  background: #f8f8f9 none repeat scroll 0 0;
  cursor: pointer;
  padding: 25px 0;
  box-shadow: 0 0px 50px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease 0s;
}
.single-brand-slide:hover .brand-box {
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
.brand-logo-slider .slick-prev, 
.brand-logo-slider .slick-next {
  bottom: -115px;
  top: auto;
  transform: none;
}
.brand-logo-slider .slick-next {
  background: #333 none repeat scroll 0 0;
  right: 15px;
}
.brand-logo-slider .slick-prev {
  left: auto;
  right: 70px;
}
.brand-logo-title {
  min-height: 244px;
  position: relative;
}
.brand-logo-wrapper {
  position: absolute;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.brand-logo-title p {
  display: inline-block;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0;
  padding-right: 15px;
  position: relative;
}
.brand-logo-wrapper > p::before {
  background: #333 none repeat scroll 0 0;
  content: "";
  height: 1px;
  position: absolute;
  right: calc(100% + 52px);
  top: 50%;
  transform: translateY(-50%);
  width: 170px;
}
/* -----------------------------------------
  15. Blog section
-------------------------------------------- */
.blog-section {
  padding: 120px 0px 180px;
}
.blog-section .read-more {
  position: relative;
  top: 5px;
}
.post-content {
  background: #f9f9f9 none repeat scroll 0 0;
  left: 30px;
  margin-top: -70px;
  position: relative;
  width: calc(100% - 60px);
  transition: .3s;
  padding: 50px 25px;
  margin-bottom: 20px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}
.site-main .post-content {
  background-color: #f9f9f9;
}
.single-blog-post:hover .post-content {
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
.layout-dark .single-blog-post:hover .post-content {
  box-shadow: none;
}
.single-blog-post {
  position: relative;
}
.post-image img {
  width: 100%;
}
.post-content > h3 {
  font-size: 21px;
  line-height: 30px;
  letter-spacing: 1px;
  margin-bottom: 25px;
}
.post-content p{
  margin-bottom: 25px;
}
.page-minimal .post-content a:hover {
  color: #737272;
}
.page-minimal .post-content  .read-more:hover {
  color: #d6b161;
}
.read-more {
  color: #333;
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 1;
}
.read-more i {
  margin-left: 5px;
}
.layout-minimal-blog .button,
.layout-minimal-blog .widget-subscribe-form > input,
.layout-light-blog .button,
.layout-light-blog .widget-subscribe-form > input {
  border-color: #e1e1e1;
}
/* -----------------------------------------
  16. Contact section
-------------------------------------------- */
.info-icon {
  border: 1px solid #333;
  font-size: 22px;
  height: 45px;
  line-height: 40px;
  text-align: center;
  width: 45px;
  float: left;
}
.single-info {
  overflow: hidden;
  margin-bottom: 10px;
}
.single-info:last-child {
  margin-bottom: 0;
}
.info-details {
  font-family: 'Dosis', sans-serif ;
  float: left;
  margin-top: 15px;
  padding-left: 30px;
  width: calc(100% - 45px);
}
.contact-section {
  padding: 120px 0;
}
.info-details p,
.info-details a {
  line-height: 1;
  margin: 0;
  font-size: 18px;
  letter-spacing: 1px;
}
.info-details a {
  color: #737272;
}
.info-block-text {
  margin-bottom: 50px;
}
/* -----------------------------------------
  17. Contact from area
-------------------------------------------- */
.contact-form-wrapper {
  background: #f9f9f9 none repeat scroll 0 0;
  box-shadow: 0 0px 35px rgba(0, 0, 0, 0.15);
  padding: 30px;
  position: relative;
}
.single-from-input {
  margin-bottom: 10px;
}
.single-from-input input {
  border: medium none;
  height: 42px;
  padding: 0 30px;
  width: 100%;
}
.single-from-input input {
  border: medium none;
  font-size: 14px;
  height: 42px;
  letter-spacing: 2px;
  padding: 0 30px;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.single-from-input input:focus, .form-body textarea:focus {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  outline: none;
}
.form-body textarea {
  border: medium none;
  letter-spacing: 1px;
  margin-bottom: 10px;
  min-height: 195px;
  padding: 30px;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.btn-submitt.btn-medium {
  background: #333 none repeat scroll 0 0;
  border: 1px solid transparent;
  color: #fff;
  display: block;
  font-size: 18px;
  height: 42px;
  width: 100%;
}
.caracraft-form-send-message {
  bottom: 9px;
  left: 30px;
  line-height: 1;
  margin: 0;
  position: absolute;
}
p.caracraft-form-send-message.success {
    color: #009688;
}
p.caracraft-form-send-message.error {
    color: #D50000;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 12px; letter-spacing: 2px; color: #333; text-transform: uppercase;
}
::-moz-placeholder { /* Firefox 19+ */
  font-size: 12px; letter-spacing: 2px; color: #333; text-transform: uppercase;
}
:-ms-input-placeholder { /* IE 10+ */
  font-size: 12px; letter-spacing: 2px; color: #333; text-transform: uppercase;
}
:-moz-placeholder { /* Firefox 18- */
  font-size: 12px; letter-spacing: 2px; color: #333; text-transform: uppercase;
}
/* -----------------------------------------
  18. Send button animations
-------------------------------------------- */
@-webkit-keyframes caracraft-passdown {
  0%,30%, 70%, 100% {
    -webkit-transform: translate3d(0,0,0);
  }
  30% {
    transform: translate3d(0px, 7px, 0);
  }

  70%  {
    transform: translate3d(0px, 0px, 0);
  }
}

@-moz-keyframes caracraft-passdown {
  0%,30%, 70%, 100% {
    -moz-transform: translate3d(0,0,0);
  }
  30% {
    transform: translate3d(0px, 7px, 0);
  }

  70%  {
    transform: translate3d(0px, 0px, 0);
  }
}

@keyframes caracraft-passdown {
  0%,30%, 70%, 100% {
    transform: translate3d(0,0,0);
  }
  30% {
    transform: translate3d(0px, 7px, 0);
  }

  70%  {
    transform: translate3d(0px, 0px, 0);
  }
}
.caracraft-passdown {
  -webkit-animation-name: caracraft-passdown;
  -o-animation-name: caracraft-passdown;
  animation-name: caracraft-passdown;
}
@-webkit-keyframes caracraft-passup {
  0%,30%, 70%, 100% {
    -webkit-transform: translate3d(0,0,0);
  }
  30% {
    transform: translate3d(0px, 7px, 0);
  }

  70%  {
    transform: translate3d(0px, 0px, 0);
  }
}

@-moz-keyframes caracraft-passup {
  0%,30%, 70%, 100% {
    -moz-transform: translate3d(0,0,0);
  }
  30% {
    transform: translate3d(0px, 7px, 0);
  }

  70%  {
    transform: translate3d(0px, 0px, 0);
  }
}

@keyframes caracraft-passup {
  0%,30%, 70%, 100% {
    transform: translate3d(0,0,0);
  }
  30% {
    transform: translate3d(0px, 7px, 0);
  }

  70%  {
    transform: translate3d(0px, 0px, 0);
  }
}
.caracraft-passup {
  -webkit-animation-name: caracraft-passup;
  -o-animation-name: caracraft-passup;
  animation-name: caracraft-passup;
}
.caracraft-passup-hov:hover {
  animation: 1500ms ease 0s infinite normal none running caracraft-passup;
}
.sc-button-wrapper a:hover i {
  animation: 1500ms ease 0s infinite normal none running caracraft-passdown;
}
@-webkit-keyframes caracraft-send {
  0%,30%, 70%, 100% {
    -webkit-transform: translate3d(0,0,0);
  }
  30% {
  -webkit-transform: translate3d(-5px, 4px, 0);
  }

  70%  {
    -webkit-transform: translate3d(5px, -4px, 0);
  }
}

@-moz-keyframes caracraft-send {
  0%,30%, 70%, 100% {
    -moz-transform: translate3d(0,0,0);
  }
  30% {
  -moz-transform: translate3d(-5px, 4px, 0);
  }

  70%  {
    -moz-transform: translate3d(5px, -4px, 0);
  }
}

@-o-keyframes expand {
  0%,30%, 70%, 100% {
    -o-transform: translate3d(0,0,0);
  }
  30% {
  -o-transform: translate3d(-5px, 4px, 0);
  }

  70%  {
    -o-transform: translate3d(5px, -4px, 0);
  }
}

@keyframes caracraft-send {
  0%,30%, 70%, 100% {
    transform: translate3d(0,0,0);
  }
  30% {
    transform: translate3d(-5px, 4px, 0);
  }

  70%  {
  transform: translate3d(5px, -4px, 0);
  }
}
.caracraft-send {
  -webkit-animation-name: caracraft-send;
  -o-animation-name: caracraft-send;
  animation-name: caracraft-send;
}

.btn-submitt:hover .fa-paper-plane {
  animation: 1500ms ease 0s normal none 1 running caracraft-send;
}
/* ------------------------------
  Single Pages Style 
---------------------------------*/
/* ------------------------------
  19. Breadcrumb styles 
---------------------------------*/
.breadcrumb-area {
  background: rgba(0, 0, 0, 0) url(http://placehold.it/1854x527) repeat scroll center center / cover ;
  padding: 220px 0;
}
.page-cat {
  font-size: 45px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.breadcrumb-list li a {
  color: #333333;
}
.breadcrumb-list li {
  color: #333333;
  float: left;
  font-weight: 600;
  letter-spacing: 2px;
  margin-right: 30px;
  position: relative;
  text-transform: capitalize;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
}
.text-center .breadcrumb-list > li {
  display: inline-block;
  float: none;
  margin: 0 10px;
  position: relative;
}
.breadcrumb-list > li::before {
  bottom: -1px;
  content: "/";
  position: absolute;
  right: -20px;
}
.breadcrumb-list li a {
  color: #555;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0px !important;
}
.breadcrumb-list li:last-child:before{
  display: none;
}
.cara-standard-section.single-bolg-post {
  background: #f7f7f7 none repeat scroll 0 0;
  padding: 115px 0 160px;
}
.single-post {
  background: #fff none repeat scroll 0 0;
  padding: 30px;
}
.post-content-wrapper {
  margin-top: 70px;
  padding: 0 10px;
}
.blog-post-title {
  font-size: 32px;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.post-header {
  border-bottom: 1px solid #ededed;
  margin-bottom: 30px;
  padding-bottom: 30px;
}
.post-meta span {
  color: #737272;
  font-size: 14px;
  letter-spacing: 0.25px;
  margin-right: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}
.layout-dark-blog .post-meta span {
  color: #999fa9;
}
.post-meta span a {
  color: inherit;
}
.post-content-wrapper ul li {
  color: #737272;
  font-size: 15px;
  line-height: 30px;
  padding-left: 40px;
  position: relative;
}
.post-content-wrapper li::before {
  color: #cecece;
  content: "";
  font-family: fontawesome;
  left: 0;
  position: absolute;
}
.post-content-wrapper > ul {
  margin-bottom: 60px;
  margin-top: 40px;
}
.post-content-wrapper > h4 {
  font-size: 20px;
  margin: 40px 0 30px;
}
.single-blog-post-area blockquote {
  background: #f3f3f3 none repeat scroll 0 0;
  border-left: 2px solid #cecece;
  font-size: 17.5px;
  margin: 0 0 60px 30px;
  padding: 20px 40px;
}
.post-content-wrapper blockquote p {
  margin: 0;
  text-transform: uppercase;
  font-family: 'Dosis', sans-serif !important;
}
.post-content-wrapper blockquote span {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.post-footer {
  background: #fff none repeat scroll 0 0;
  border-top: 1px solid #ededed;
  margin-bottom: 60px;
  overflow: hidden;
  padding: 40px 30px;
}
.blog-footer{
  margin: 0 15px;
  padding: 40px 0;
  background-color: #fff;
}
.tag-wrapper {
  display: inline-block;
  float: left;
}
.share-wrapper {
  display: inline-block;
  float: right;
}
.share-wrapper i:hover {
 transform: scale(1.2);
}
.share-wrapper i{
transition: all .2s ease-in-out;
}

.tag-wrapper a {
  background: #f3f3f3 none repeat scroll 0 0;
  color: #333333;
  display: inline-block;
  height: 25px;
  letter-spacing: 1px;
  line-height: 25px;
  margin-right: 5px;
  padding: 0 10px;
  text-transform: uppercase;
}
.tag-wrapper a:hover {
  background: #333;
  color: #fff;
}
.share-wrapper li {
  display: inline-block;
  margin-left: 35px;
}
.share-wrapper a {
  color: #333;
  font-size: 15px;
}
.author-area {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 60px;
  padding: 40px;
}
.author-img {
  float: left;
  width: 100px;
}
.author-info {
  overflow: hidden;
}
.author-desc {
  float: left;
  padding-left: 30px;
  width: calc(100% - 100px);
}
.author-img > img {
  border-radius: 50%;
  width: 100%;
}
.author-desc h5 {
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
}
.author-desc h5 span {
  display: block;
  font-size: 12px;
  margin-top: 9px;
  padding-bottom: 20px;
  position: relative;
  text-transform: none;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  color: #737272;
}
.layout-dark .author-desc h5 span{
  color: #bbbbbb;
}
.c-title span::before {
  background: #ededed none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 1px;
  position: absolute;
  width: 70px;
}
.author-desc p {
}
.comment-section-title {
  font-size: 21px;
  margin-bottom: 40px;
}
.comment-section-title span {
  background: #333333 none repeat scroll 0 0;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 30px;
}
.comment-section-title span.dark{
  background: #292b31 none repeat scroll 0 0;
}
.theme-comment-section {
  background: #fff none repeat scroll 0 0;
  padding: 35px 30px;
}
.media-left img {
  background: #f3f3f3 none repeat scroll 0 0;
  border-radius: 50%;
  height: 70px;
  width: 70px;
}
.media-replay .media-left img {
  height: 50px;
  width: 50px;
}
.sabbi-arrow-roll i {
  position: relative;
  transition: all .4s;
  left: 0;
  margin-left: 3px;
}
.sabbi-arrow-roll-right:hover i {
  left: 10px;
}
.slick-next:focus {
  background: #333;
}
/* GENERAL SABBI-BUTTON STYLING */
.sabbi-button,
.sabbi-button::after {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.sabbi-button {
  position: relative;
  z-index: 0;
}

.sabbi-button.sabbi-button:hover {
  background: transparent;
}

.sabbi-button::before,
.sabbi-button::after {
  background: #2b2b2b;
  content: '';
  position: absolute;
  z-index: -1;
}
/* .sabbi-BUTTON 1 */
.sabbi-btn-1::after {
  height: 0;
  left: 0;
  top: 0;
  width: 100%;
}

.sabbi-btn-1:hover:after {
  height: 100%;
}
.layout-minimal .sabbi-button.sabbi-button:hover {
  background: transparent;
  border-color: #bb9e7d;
}
.layout-minimal .sabbi-button:before,.layout-minimal .sabbi-button::after {
  background: #bb9e7d;
}
/* sabbi-BUTTON 2 */
.sabbi-btn-2::after {
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}

.sabbi-btn-2:hover:after {
  width: 100%;
}

/* sabbi-BUTTON 3 */
.sabbi-btn-3::after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.sabbi-btn-3:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

/* sabbi-BUTTON 4 */
.sabbi-btn-4::before {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.sabbi-btn-4::after {
  background: #2ecc71;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.sabbi-btn-4:hover:after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

/* sabbi-BUTTON 5 */
.sabbi-btn-5 {
  overflow: hidden;
}

.sabbi-btn-5::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.sabbi-btn-5:hover:after {
  height: 100%;
  width: 135%;
}
.active-btn.sabbi-button {
  background-color: transparent;
}
.active-btn.sabbi-button.hupup::after {
  background: #333;
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  left: 0;
}
.layout-dark .sabbi-button::before, .layout-dark .sabbi-button::after {
  background: #fff;
}
.layout-dark .active-btn.sabbi-button.hupup::after{
  background: #fff;
}

.layout-minimal .button.active-btn:hover {
  color: #333333;
  border-color: #2b2b2b;
}
.layout-minimal .active-btn.sabbi-button.hupup::after {
  background: #B79E7A;
}
.layout-minimal .active-btn.sabbi-button.hupup::after {
  background: #B79E7A;
}
.active-btn.sabbi-button.hupup:hover:after {
  height: 0;
}
/*-----------------------------------------
  20. Comment form area
-------------------------------------------*/
.theme-comment-section .media {
  border-bottom: 1px solid #dfdfdf;
  padding: 35px 0;
}
.media-list li:last-child {
  margin: 0;
}
.theme-comment-section {
  background: #fff none repeat scroll 0 0;
  padding: 30px 30px 50px;
}
.comment-author-title {
  display: inline-block;
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 1px;
  margin-bottom: 0;
  text-transform: uppercase;
}
.theme-comment-section .media-body > p span {
  color: #808080;
  display: inline-block;
  font-size: 12px;
  line-height: 15px;
  margin-bottom: 0;
  text-transform: uppercase;
}
.media-list li {
  background: #ffffff none repeat scroll 0 0;
  transition: .3s;
  position: relative;
}
.theme-comment-section .media-body {
  margin-top: 0;
  padding-right: 25px;
}
.reply-link {
  color: #737272;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 0;
}
.layout-dark  .reply-link{
  color: #bbbbbb;
}
.layout-dark  .reply-link:focus,
.layout-dark  .reply-link:active,
.layout-dark  .reply-link:hover {
  color: #fff;
}
.media-left img {
  border: none;
  border-radius: 50%;
}
.media-left, 
.media > .pull-left {
  padding-right: 20px;
}
.comment-head > p {
  display: inline-block;
  margin: 0;
  padding-left: 20px;
}
.comment-head > p i {
  margin-right: 10px;
}
.comment-head {
  margin-bottom: 15px;
}
.media-body > p {
  line-height: 30px;
  margin-bottom: 20px;
  line-height: 1.4;
}
.reply-link i {
  font-size: 16px;
  margin-right: 10px;
}
.theme-comment-section .media-replay .media {
  border-bottom: 1px solid transparent;
  padding-left: 90px;
}
.theme-comment-section .media-replay  {
  border-bottom: 1px solid #dfdfdf;
}
.media-list {
  list-style: outside none none;
  margin-bottom: 65px;
}
.commtent-from-title {
  font-size: 21px;
  letter-spacing: 1px;
  margin-bottom: 30px;
}
.input-field {
  float: left;
  padding: 0 10px;
  width: 33.33%;
}
.input-field input {
  border: 1px solid #e1e1e1;
  height: 50px;
  padding: 0 30px;
  width: 100%;
}
.input-field-wrapper {
  margin: 0 -10px 20px;
  overflow: hidden;
}
.my-comment-box textarea {
  border: 1px solid #e1e1e1;
  padding: 20px 30px;
  width: 100%;
}
.my-comment-box {
  margin-bottom: 25px;
}
.check-box {
  margin-bottom: 30px;
}
input[type="checkbox"], 
input[type="radio"] {
  line-height: normal;
  margin: 0 10px 0 0;
}
.comment-form  .button {
  padding: 0 33px;
}
/* ----------------------------
  21. Widget area
-------------------------------*/
.search-widget {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.search-form input {
  background: #fff none repeat scroll 0 0;
  border: 1px solid transparent;
  height: 50px;
  letter-spacing: .5px;
  padding: 0 30px;
  width: 100%;
}
/*.search-form ::-webkit-input-placeholder { 
  letter-spacing: .5;
}
.search-form ::-moz-placeholder { 
  letter-spacing: .5;
}
.search-form :-ms-input-placeholder {
  letter-spacing: .5;
}
.search-form :-moz-placeholder {
  letter-spacing: .5;
}*/
.search-form {
  position: relative;
}
.search-form > button {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  color: #737272;
  font-size: 15px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.single-widget {
  margin-bottom: 30px;
}
.widget-title {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  color: #333333;
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 30px;
  position: relative;
  text-align: center;
}
.widget-title::before {
  border-color: #ffffff transparent transparent;
  border-style: solid;
  border-width: 11px 13px 0;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
}
.widget-content.about-widget {
  background: #fff none repeat scroll 0 0;
  padding: 20px;
}
.about-widget {
  background: #fff none repeat scroll 0 0;
  padding: 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.about-widget img {
  background: #f2f2f2 none repeat scroll 0 0;
  margin-bottom: 25px;
}
.widget-signature img {
  background: transparent none repeat scroll 0 0;
  margin: 0;
}
.widget-signature {
  text-align: center;
}
.flow-social {
  text-align: center;
}
.flow-social > li {
  display: inline-block;
  margin: 0 1px;
}
.flow-social a {
  background: #fff none repeat scroll 0 0;
  color: #333333;
  display: inline-block;
  font-size: 22px;
  height: 45px;
  line-height: 45px;
  width: 45px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.flow-social a:hover,
.post-cat-list a:hover {
  background: #333;
  color: #fff;
}
.post-cat-list {
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.post-cat-list > li {
  background: #fff none repeat scroll 0 0;
}
.post-cat-list > li:hover a { 
  border-bottom: 1px solid transparent;
}
.post-cat-list a {
  color: #333333;
  display: block;
  font-size: 14px;
  height: 50px;
  letter-spacing: 1px;
  line-height: 50px;
  text-transform: uppercase;
  border-bottom: 1px solid #ececec;
}
.post-cat-list > li span {
  margin-left: 5px;
}
.widget-single-post {
  background: #fff none repeat scroll 0 0;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.widget-single-post > a {
  float: left;
  width: 70px;
}
.widget-post-content {
  float: left;
  padding: 15px;
  width: calc(100% - 70px);
  text-transform: uppercase;
}
.widget-post-content a {
  color: #333333;
  font-family: 'Dosis', sans-serif !important;
  line-height: 1.4;
  margin-bottom: 10px;
  display: block;
  letter-spacing: 1px;
}
.layout-dark .widget-post-content > p ,
.widget-post-content > p {
  margin: 0;
}

.widget-post-content > p + p {
  font-size: 12px;
  line-height: 1;
  margin-top: 4px;
}
.newsletter-widget .widget-title::before {
  display: none;
}
.newsletter-widget .widget-title {
  margin-bottom: 0;
}
.widget-subscribe-form {
  background: #fff none repeat scroll 0 0;
  padding: 40px 20px;
}
.widget-subscribe-form > input {
  border: 1px solid #2b2b2b;
  height: 50px;
  margin-bottom: 20px;
  padding: 0 10px 0 30px;
  width: 100%;
  text-align: center;
}
.widget-subscribe-form .button {
  height: 50px;
  line-height: 50px;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #bb9e7d;
  color: #fff !important;
}

.widget-subscribe-form .sabbi-button:before,
.widget-subscribe-form .sabbi-button:after {
    background: #fff;
    color: #333;
}
.widget-subscribe-form .sabbi-button:hover {
    color: #333 !important;
}

.layout-light-blog .widget-subscribe-form .sabbi-button{
  background-color: #333;
  color: #fff;
}
.layout-light-blog .widget-subscribe-form .sabbi-button:hover{
  border-color: #333;
}
.banner-slider {
  background: #fff none repeat scroll 0 0;
  padding: 20px;
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.banner-slider img {
  display: block;
  width: 100%;
}
/* ------------------------------
  22. Instargam widget
---------------------------------*/
.instagram-widget-area {
  background: #f7f7f7 none repeat scroll 0 0;
}
.instagram-widget {
  background: #fff none repeat scroll 0 0;
}
.single-instra-image {
  float: left;
  width: 16.6667%;
}
.insta-photos {
  overflow: hidden;
}
.instagram-widget h3 {
  font-size: 21px;
  line-height: 1;
  margin: 0;
  padding: 60px;
}
.widget-content.about-widget > img {
  width: 100%;
}
.single-instra-image {
  position: relative;
}
.single-instra-image:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.single-instra-image:hover:before {
  opacity: .1;
}
.layout-dark .single-instra-image:hover:before {
  opacity: .25;
}

.single-instra-image img {
  width: 100%;
}
.single-post.single-blog-post-area > img {
  width: 100%;
}
/* ------------------------------------
  23. Footer area
---------------------------------------*/
.footer-area {
  padding: 40px 0;
}
.blog-footer-area{
  background-color: #f7f7f7;
  margin: 0;
  padding: 0;
}
.dark-footer{
  background-color: #2e3037;
}
.blog-footer-area .blog-footer{
  margin: 0 15px;
  padding: 40px 0;
  background-color: #fff;
  display: block;
  position: relative;
  overflow: hidden;
}
.dark-footer .blog-footer{
  background-color: #292b31;
}
.footer-info{
  padding: 10px 0px;
  line-height: 60px;
}
.footer-info p {
  color: #333333;
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  margin: 0;
  padding-left: 150px;
  text-transform: uppercase;
}
.back-to-top{
  padding: 10px 15px;
  line-height: 60px;
}
.back-to-top p {
  color: #131313;
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
}
.to-top-btn {
  background: #333 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  height: 45px;
  line-height: 45px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  width: 45px;
  border: 1px solid transparent;
}
.to-top-btn:hover {
  background: #000 none repeat scroll 0 0;
  border: 1px solid #333;
  color: #fff;
}
.to-top-btn:hover  i {
  animation: 1500ms ease 0s infinite normal none running caracraft-passup;
}
.social-icons-list li {
  float: left;
  margin-right: 10px;
}
.social-bookmark-section {
  margin-top: 50px;
}
.social-icons-list a {
  border: 1px solid #333;
  color: #333;
  display: inline-block;
  font-size: 22px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  width: 45px;
}
.layout-dark .social-icons-list a {
  border: 1px solid #fff;
  color: #fff;
}
.layout-dark .social-icons-list a:hover {
  color: #333;
  background: #fff;
  border: 1px solid transparent;
}
.social-icons-list a:hover {
  background: #333;
  color: #fff;
}
/* ------------------------------------------
  23.1 Slick slider button hover style
--------------------------------------------*/
.slick-prev:hover{
  background: #333;
  border: 1px solid transparent;
}
.slick-next:hover{
  background: transparent;
  border: 1px solid #131313;
}
.slick-next:hover::before {
  color: #131313;
}
.slick-prev:hover::before {
  color: #fff;
}
/* ------------------------------------------
  24 Dark layout styles
--------------------------------------------*/
.layout-dark .caracraft-header .top-nav-collapse {
  background: #32343c none repeat scroll 0 0;
  box-shadow: 0 1px 3px rgba(50, 52, 60, 0.3)
}
.layout-dark .sc-button-wrapper a {
  background: #fff none repeat scroll 0 0;
  color: #333;
}
.layout-dark .sc-button-wrapper > p,
.layout-dark p.ca-name {
  color: #fff;
}
.layout-dark p {
  color: #999fa9;
}
.layout-dark .button {
  border: 1px solid #fff;
  color: #fff;
}
.layout-dark .button:hover, 
.layout-dark .button.active-btn {
  background: #fff none repeat scroll 0 0;
  border: 1px solid transparent;
  color: #333;
}
.layout-dark .button.active-btn:hover {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #fff;
  color: #fff;
}
.layout-dark .slick-next {
  background: #fff none repeat scroll 0 0;
  border: 1px solid transparent;
}
.layout-dark .slick-next::before {
  color: #333;
}
.layout-dark .slick-next:hover {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #fff;
}
.layout-dark .slick-next:hover::before {
  color: #fff;
}
.layout-dark .slick-prev::before {
  color: #fff;
}
.layout-dark .slick-prev {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #fff;
}
.layout-dark .slick-prev:hover {
  background: #fff none repeat scroll 0 0;
  border: 1px solid transparent;
}
.layout-dark .slick-prev:hover::before {
  color: #333;
}
.layout-dark .area-title p {
  color: #999fa9;
}
.layout-dark .video-init-btn a {
  color: #fff;
}
.layout-dark .single-bar .progress {
  background-color: #717171;
}
.layout-dark .single-bar .progress-bar {
  background-color: #cccccc;
}
.layout-dark .single-bar > p {
  color: #999fa9;
}
.layout-dark .pagingInfo {
  color: #fff;
  display: inline-block;
  font-size: 18px;
  margin-top: 70px;
  position: relative;
}
.layout-dark .pagingInfo::before {
  background: #fff none repeat scroll 0 0;
}
.layout-dark .gallery-box {
  border: 30px solid #32343c;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.18);
}
.layout-dark .single-service {
  background: #32343c none repeat scroll 0 0;
}
.layout-dark .service-box-inner {
  background: #2a2c32 none repeat scroll 0 0;
}
.layout-dark .single-service-slider-item.slick-center .service-box-inner, 
.layout-dark .single-service:hover .service-box-inner {
  background: #2a2c32 none repeat scroll 0 0;
  box-shadow: none;
}
.layout-dark .service-icon i {
  color: #fff;
}
.layout-dark .service-box-inner a {
  color: #fff;
}
.layout-dark .portfolio-filter li a {
  color: #999fa9;
}
.layout-dark .portfolio-filter li.active a,.layout-dark .portfolio-filter li a:hover {
  color: #fff;
}
.layout-dark .portfolio-filter > li a::before {
  background: #fff none repeat scroll 0 0;
}
.layout-dark .portfolio-description {
  background: rgba(45, 47, 53, 0.75) none repeat scroll 0 0;
}
.layout-dark .portfolio-catagory > li a {
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.layout-dark .portfolio-catagory > li::before {
  color: #fff;
}
.layout-dark .single-description-conent {
  background: #292b31 none repeat scroll 0 0;
}
.layout-dark .gray-bg.single-experience {
  background: #32343c none repeat scroll 0 0;
}
.layout-dark .single-experience .single-description-conent:hover {
  background: #292b31 none repeat scroll 0 0;
  box-shadow: none;
}
.layout-dark .client-name {
  color: #fff;
}
.layout-dark .single-brand-slide-inner {
  background: #32343c none repeat scroll 0 0;
  padding: 30px;
}
.layout-dark .brand-box {
  background: #2e3037 none repeat scroll 0 0;
}
.layout-dark .single-brand-slide:hover .brand-box {
  box-shadow: none;
}
.layout-dark .brand-logo-wrapper > p::before {
  background: #fff none repeat scroll 0 0;
}
.layout-dark .brand-logo-title p {
  color: #fff;
}
.layout-dark .post-content {
  background: #2e3037 none repeat scroll 0 0;
}
.layout-dark .read-more {
  color: #fff;
}
.layout-dark .info-details p, 
.layout-dark .info-details a {
  color: #fff;
}
.layout-dark .info-icon {
  border: 1px solid #fff;
  color: #fff;
}
.layout-dark .contact-form-wrapper {
  background: #32343c none repeat scroll 0 0;
}
.layout-dark .form-body textarea {
  background: #292b31 none repeat scroll 0 0;
  color: #fff;
}
.layout-dark .single-from-input input {
  background: #292b31 none repeat scroll 0 0;
  color: #fff;
}
.layout-dark ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 12px; letter-spacing: 2px; color: #fff; text-transform: uppercase;
}
.layout-dark ::-moz-placeholder { /* Firefox 19+ */
  font-size: 12px; letter-spacing: 2px; color: #fff; text-transform: uppercase;
}
.layout-dark :-ms-input-placeholder { /* IE 10+ */
  font-size: 12px; letter-spacing: 2px; color: #fff; text-transform: uppercase;
}
.layout-dark :-moz-placeholder { /* Firefox 18- */
  font-size: 12px; letter-spacing: 2px; color: #fff; text-transform: uppercase;
}
.layout-dark .btn-submitt.btn-medium {
  background: #fff;
  color: #333;
}
.layout-dark .footer-info p,
.layout-dark .back-to-top p {
  color: #fff;
}
.layout-dark .to-top-btn {
  background: #fff none repeat scroll 0 0;
  color: #333;
}
.layout-dark .to-top-btn:hover {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #fff;
  color: #fff;
}
.layout-dark .hamburger-inner, 
.layout-dark .hamburger-inner::before, 
.layout-dark .hamburger-inner::after {
  background-color: #fff;
}
.layout-dark .top-nav-collapse .hamburger-inner, 
.layout-dark .top-nav-collapse .hamburger-inner::before, 
.layout-dark .top-nav-collapse .hamburger-inner::after {
  background-color: #fff;
}
.layout-dark .top-nav-collapse .is-active .hamburger-inner {
  background-color: transparent;
}
.layout-dark .hover-style-one li a::before {
  background: #fff none repeat scroll 0 0;
}
.layout-dark .top-nav-collapse .hover-style-one li a::before {
  background: #333 none repeat scroll 0 0;
}
.layout-dark .caracraft-header .navbar-nav > li > a {
  color: #fff;
}
.layout-dark  .caracraft-header .top-nav-collapse .navbar-nav > li > a {
  color: #333;
}
.layout-dark .reply-link:hover{
  color: #fff;
}
/* ---------------------------------
25. # Minimal layout style
------------------------------------*/
.layout-minimal .breadcrumb-area {
  background: rgba(0, 0, 0, 0) url(http://placehold.it/1854x527) repeat scroll center center / cover  ;
}
.layout-minimal .flow-social a,
.layout-minimal .footer-info > p i {
  color: #bb9e7d;
}
.layout-minimal .flow-social a:hover, 
.layout-minimal .post-cat-list a:hover,
.layout-minimal .tag-wrapper a:hover,
.layout-minimal .to-top-btn {
  background: #bb9e7d none repeat scroll 0 0;
  color: #fff;
}

.layout-minimal .button:hover {
  border-color: #bb9e7d;
}
.layout-minimal .button:hover, 
.layout-minimal .button.active-btn {
  background: #bb9e7d none repeat scroll 0 0;
  color: #fff; 
}
.layout-minimal .button:hover, 
.layout-minimal .button.active-btn {
  background: #bb9e7d none repeat scroll 0 0;
  color: #fff; 
}
.layout-minimal .to-top-btn:hover {
  border: 1px solid transparent;
  color: #fff;
}
.layout-minimal .comment-section-title span {
  background: #bb9e7d;
}

.layout-minimal .sc-button-wrapper a {
  background: #bb9e7d none repeat scroll 0 0;
}
.layout-minimal .sc-button-wrapper a {
  color: #fff;
}

.layout-minimal .btn-submitt.btn-medium {
  background: #bb9e7d none repeat scroll 0 0;
}

.layout-minimal .testimonial-area-wrapper .slick-next {
  background: #bb9e7d none repeat scroll 0 0;
  left: 55px;
  right: auto;
}

.layout-minimal .slick-prev:hover {
  background: #bb9e7d ;
}
.layout-minimal .slick-next {
  background: #bb9e7d;
  border: 1px solid #bb9e7d;
}
.layout-minimal .slick-next:hover {
  background: transparent;
  border-color: #131313;
}
.layout-minimal .single-service a {
  transition: all .4s;
}
.layout-minimal .single-service a:hover {
  color: #D6B161;
}
.layout-minimal .portfolio-catagory > li a {
  color: #d6b161;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: "Open Sans", arial, sans-serif;
}
.layout-minimal  .portfolio-catagory > li::before {
  color: #D6B161;
}
.layout-minimal .portfolio-filter > li.active a,.layout-minimal .portfolio-filter > li a:hover {
  color: #d6b161;
}
.layout-minimal .portfolio-filter > li.active a:before,.layout-minimal .portfolio-filter > li a:hover:before {
  background: #d6b161;
}
.layout-minimal .social-icons-list a:hover {
  background: #bb9e7d;
  border: 1px solid #bb9e7d;
}
.layout-minimal .video-init-btn.center {
  bottom: 35%;
}
.layout-minimal .video-init-btn.center>a {
  display: inline-block;
  text-align: center;
}
.layout-minimal .video-init-btn.center .video__play {
  margin-bottom: 19px;
}
.layout-minimal .reply-link:hover,
.layout-minimal .reply-link:active,
.layout-minimal .reply-link:focus {
  color: #bb9e7d;
}
/* ---------------------------------
26. Dark blog layout style
------------------------------------*/
.layout-dark .breadcrumb-area {
  background: rgba(0, 0, 0, 0) url(http://placehold.it/1854x527) repeat scroll center center / cover  ;
}
.layout-dark .cara-standard-section.single-bolg-post {
  background: #2e3037 none repeat scroll 0 0;
}
.layout-dark .single-post {
  background: #292b31 none repeat scroll 0 0;
}
.layout-dark .post-footer {
  background: #292b31 none repeat scroll 0 0;
  border-top: 1px solid #353535;
}
.layout-dark .post-header {
  border-bottom: 1px solid #353535;
}

.layout-dark .post-content-wrapper ul li {
  color: #999fa9;
}
.layout-dark .single-blog-post-area blockquote {
  background: #2e3037 none repeat scroll 0 0;
  border-left: 2px solid #999fa9;
}
.layout-dark .post-content-wrapper blockquote span {
  color: #c7c7c7;
}
.layout-dark .share-wrapper a {
  color: #fff;
}
.layout-dark .tag-wrapper a {
  background: #32343c  none repeat scroll 0 0;
  color: #fff;
}
.layout-dark .tag-wrapper a:hover {
  background: #fff none repeat scroll 0 0;
  color: #333;
}
.layout-dark .author-area {
  background: #292b31 none repeat scroll 0 0;
  box-shadow: none;
}
.layout-dark .theme-comment-section {
  background: #292b31 none repeat scroll 0 0;
}
.layout-dark .theme-comment-section .media {
  background: #292b31 none repeat scroll 0 0;
  border-bottom: 1px solid #353535;
}
.layout-dark .theme-comment-section .media-replay {
  border-bottom: 0px solid #353535;
}
.layout-dark .input-field input {
  background: #2e3037 none repeat scroll 0 0;
  border: 1px solid transparent;
  color: #fff;
}
.layout-dark .my-comment-box textarea {
  background: #2e3037 none repeat scroll 0 0;
  border: 1px solid transparent;
  color: #fff;
}
.layout-dark .button {
  border: 1px solid #fff;
  color: #fff;
}
.layout-dark .instagram-widget-area {
  background: #2e3037 none repeat scroll 0 0;
}
.layout-dark .instagram-widget h3 {
  background: #292b31 none repeat scroll 0 0;
}
.layout-dark .search-form input {
  background: #292b31 none repeat scroll 0 0;
  color: #fff;
}
.layout-dark .widget-title {
  background: #292b31 none repeat scroll 0 0;
  box-shadow: none;
}
.layout-dark .widget-title::before {
  border-color: #292b31 transparent transparent;
}
.layout-dark .widget-content.about-widget {
  background: #292b31 none repeat scroll 0 0;
} 
.layout-dark .widget-content.about-widget p{
  margin-bottom: 15px;
}
.layout-dark .flow-social a {
  background: #292b31 none repeat scroll 0 0;
  box-shadow: none;
  color: #fff;
}
.layout-dark .flow-social a:hover, 
.layout-dark .post-cat-list a:hover {
  background: #fff none repeat scroll 0 0;
  color: #292b31;
}
.layout-dark .banner-slider {
  background: #292b31 none repeat scroll 0 0;
  box-shadow: none;
}
.layout-dark .post-cat-list a {
  background: #292b31 none repeat scroll 0 0;
  border-bottom: 1px solid #262626;
  color: #fff;
}
.layout-dark .widget-post-content {
  background: #292b31 none repeat scroll 0 0;
}
.layout-dark .widget-post-content a {
  color: #c7c7c7;
}
.layout-dark .widget-post-content > p + p {
  color: #999fa9;
}
.layout-dark .widget-subscribe-form {
  background: #292b31 none repeat scroll 0 0;
}
.layout-dark .widget-subscribe-form > input {
  background: #292b31 none repeat scroll 0 0;
  border: 1px solid #fff;
}
.layout-dark-blog .button {
  border-color: #fff;
}
.layout-dark .newsletter-widget .widget-title {
  border-bottom: 1px solid #353535;
}
.layout-dark .layout-dark .to-top-btn {
  background: #292b31 none repeat scroll 0 0;
  color: #fff;
}
.layout-dark .to-top-btn {
  background: #fff none repeat scroll 0 0;
  color: #333;
}
.layout-dark .to-top-btn:hover {
  background: #fff none repeat scroll 0 0;
  border: 1px solid transparent;
  color: #333;
}
.layout-dark .breadcrumb-list li {
  color: #fff;
}
.layout-dark .breadcrumb-list li a {
  color: #fff;
}
.layout-dark .menu-section {
  background: rgba(23, 23, 23, 0.97) none repeat scroll 0 0;
}
.layout-dark .main-menu.main-menu-wrapper a {
  color: #c7c7c7;
}
.layout-dark .main-menu.main-menu-wrapper li.active a::before {
  background: #fff;
}
.main-menu.main-menu-wrapper li.active a::before {
  width: 100%;
}
.layout-dark .main-menu.main-menu-wrapper li.active a {
  color: #fff;
}
.main-menu.main-menu-wrapper li.active a {
  color: #000;
}
.main-menu.main-menu-wrapper li.active a::before {
  background: #000 none repeat scroll 0 0;
}
.white-bg .media-left img{
  background: none;
}
/* ---------------------------------
27. Overlay menu sections style
------------------------------------*/
.menu-section {
    background: rgba(255, 255, 255, 0.97) none repeat scroll 0 0;
    height: 100vh;
    position: fixed;
    transform: translateY(-100%);
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 99;
    
}
.menu-section.show-win {
  transform: translate(0px);
}
.menu-container {
  overflow: hidden;
  text-align: center;
  display: table;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}
.main-menu.main-menu-wrapper li {
  margin-bottom: 20px;
}
.main-menu.main-menu-wrapper a {
  color: #737272;
  display: inline-block;
  font-size: 21px;
  letter-spacing: 1px;
  line-height: 1;
  padding-bottom: 12px;
  position: relative;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: 'Dosis', sans-serif;
}
.main-menu.main-menu-wrapper a::before {
  background: #737272 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 50px;
  transition: .3s;
}
.main-menu.main-menu-wrapper a:hover::before {
  width: 100%
}
.menu-section {
  pointer-events: none;
}
.show-win.menu-section {
  pointer-events: all;
}
.main-menu.main-menu-wrapper {
  opacity: 0;
  transition: all 0.3s ease .5s;
  visibility: hidden;
}
.show-win .main-menu.main-menu-wrapper {
  opacity: 1;
  visibility: visible;
  display: table-cell;
  vertical-align: middle;
}

/*sabbi style*/
.author-desc a:focus {
  color: currentColor;
}
.layout-dark .button.active-btn{
  color: #333 !important;
}
.layout-dark .button.active-btn:hover{
  color: #fff !important;
}
.back-to-top a{
  color: #ffffff;
}