/* =============================================================
Author Name: ib-themes
Description: CSS files of Bostami Toolkit
Version:	1.0.0
================================================================*/   


/*** Page Title ***/

.title-section {
  margin: 0 auto;
  width: 100%;
  position: relative;
  padding: 70px 0;
}

.title-section h1 {
	font-size: 56px;
	font-weight: 900 !important;
	color: #fff !important;
	text-transform: uppercase;
	margin: 0;
}
.title-bg {
  font-size: 110px;
  left: 0;
  letter-spacing: 10px;
  line-height: 0.7;
  position: absolute;
  right: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 800;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.07);
}


/* [ Pages ] */
/*================================================== */

/*** Homepage ***/

body .color-block {
  position: fixed;
  height: 200%;
  width: 100%;
  transform: rotate(-15deg);
  left: -83%;
  top: -50%;
}

body .bg {
  background-image: url(../img/2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: calc(100vh - 80px);
  z-index: 111;
  border-radius: 30px;
  left: 40px;
  top: 40px;
  box-shadow: 0 0 7px rgba(0,0,0,.9);
}

body .container-home {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.home-details > div {
	max-width: 570px;
	margin: 0 auto;
	text-align: left;
}

.home-details h1 {
  font-size: 51px;
  line-height: 62px;
  font-weight: 700;
  margin: 18px 0 10px;
  position: relative;
  padding-left: 70px;
}

.home-details h1:before {
  content: '';
  position: absolute;
  left: 0;
  top: 29px;
  height: 4px;
  width: 40px;
  border-radius: 10px;
}

.home-details h1 span {
	color: #fff;
	display: block;
}
.home-details h6 {
  color: #eee;
  font-size: 22px;
  font-weight: 400;
  display: block;
}

.home-details p {
  margin: 15px 0 28px;
  font-size: 16px;
  line-height: 35px;
}

/*** About ***/

.about .main-content {
  padding-bottom: 20px;
}

/* Personal Info List */

.about-list li:not(:last-child) {
  padding-bottom: 20px;
}

.about-list .title {
  opacity: .8;
  text-transform: capitalize;
}

.about-list .value {
  font-weight: 600;
}
.tunis-single-skill{
  margin-top:10px;
}
.tunis-skill-title {
	font-weight: 500;
}
.tunis-single-skill > div > span {
	font-weight: 600;
}
/* Box Stats */

.box-stats {
  padding: 20px 30px 25px 40px;
  border-radius: 5px;
  border: 1px solid #252525;
}

.box-stats h3 {
	position: relative;
	display: inline-block;
	margin: 0;
	font-size: 50px;
	font-weight: 700;
	line-height: 110%;
}

.box-stats h3 span {
  content: '+';
  position: absolute;
  right: -24px;
  font-size: 33px;
  font-weight: 300;
  top: 2px;
}


.box-stats p {
  padding-left: 45px;
}

.box-stats p:before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 30px;
  height: 1px;
  background: #777;
}

/* Resume */

.resume-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-box li {
  position: relative;
  padding: 0 20px 0 60px;
  margin: 0 0 50px;
}

.resume-box li:after {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  bottom: 0;
  border-left: 1px solid #333;
}

.resume-box .icon {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  right: 0;
  line-height: 40px;
  text-align: center;
  z-index: 1;
  border-radius: 50%;
  color: #fff;
  background-color: #252525;
}

.resume-box .time {
  color: #fff;
  font-size: 12px;
  padding: 1px 10px;
  display: inline-block;
  margin-bottom: 12px;
  border-radius: 20px;
  font-weight: 600;
  background-color: #252525;
  opacity: .8;
}

.resume-box h5 {
  font-size: 18px;
  margin: 7px 0 10px;
}

.resume-box p {
  margin: 0;
  color: #eee;
  font-size: 14px;
}

.resume-box .place {
  opacity: .8;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  padding-left: 26px;
}

.resume-box .place:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 2px;
  background-color: #fff;
  left: 7px;
  top: 9px;
  opacity: .8;
}

/* Skills */
.slice div {
	width: 120px !important;
	height: 120px !important;
}
.c100 {
  float: none !important;
  margin: 0 auto;
  background-color: #252525;
}

.c100 > span {
  color: #fff;
}

.c100:after {
  background-color: #111;
}

/*** Portfolio ***/


/* Grid */
/* .portfolio-row{
  overflow:hidden;
  height: 100%;
  padding-bottom: 100px;
}
.portfolio .portfolio-list {
  margin: 0 auto;
  min-height: 100vh;
} */
.portfolio .portfolio-list-gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portfolio .portfolio-list-gallery figure {
  margin: 0;
}

.portfolio .portfolio-list-gallery figure img {
  display: block;
  width: 100%;
  border-radius: 5px;
  transition: .3s;
}
.portfolio-modal-table-text {
	color: #fff !important;
}
.portfolio .portfolio-list-wrap {
  margin: 0 auto;
}

.portfolio .portfolio-list {
  margin: 0 auto;
}

.portfolio .portfolio-list li {
  width: 33.333333%;
  float: left;
  cursor: pointer;
  padding: 15px;
}

.portfolio .portfolio-list figure {
	-webkit-transition: 0.3s;
	transition: 0.3s;
	border-radius: 5px;
	padding: 0;
	position: relative;
	overflow: hidden;
	margin: 0 !important;
}

.portfolio .portfolio-list figure img {
  display: block;
  position: relative;
}

.portfolio .portfolio-list li a {
  overflow: hidden;
}

.portfolio .portfolio-list figure div {
	position: absolute;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	justify-content: center;
}
.portfolio .portfolio-list figure div span {
  margin: 0;
  text-transform: uppercase;
  color: #fff;
  font-size: 18px;
}
/* Slideshow */

.portfolio .slideshow {
  position: fixed;
  background: rgba(0,0,0,0.85);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1111;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
  text-align: left;
}

.portfolio .slideshow-open .slideshow {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.portfolio .slideshow ul {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0,0,150px);
  transform: translate3d(0,0,150px);
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.portfolio .slideshow ul.animatable > li {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.portfolio .slideshow-open .slideshow ul {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.portfolio .slideshow ul > li {
  width: 660px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -280px 0 0 -330px;
  visibility: hidden;
}

.portfolio .slideshow ul > li.show {
  visibility: visible;
}

.portfolio .slideshow ul > li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: 111;
  border-radius: 10px;
}

.portfolio .slideshow ul > li.current:after {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

.portfolio .slideshow figure {
  width: 100%;
  height: 100%;
  background: #252525;
  padding: 30px;
  overflow: auto;
  border-radius: 10px;
}

.portfolio .slideshow a {
  text-decoration: underline;
}

.portfolio .slideshow figcaption {
  margin-bottom: 15px;
}

.portfolio .slideshow figcaption h3 {
  text-transform: uppercase;
  padding: 10px 0 20px;
  font-weight: 700;
  text-align: center;
  font-size: 33px;
}

/* Embedded Videos */

.portfolio .slideshow .videocontainer,
.portfolio .slideshow .responsive-video {
  max-width: 100%;
  border-radius: 4px;
  display: block;
  object-fit: cover;
}

.portfolio .slideshow .videocontainer {
  position: relative;
  padding-bottom: 56.20%;
  padding-top: 0;
  height: 0;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
  display: block;
  margin: 0;
  border-radius: 4px;
}

.portfolio .slideshow .videocontainer iframe,
.portfolio .slideshow .videocontainer object,
.portfolio .slideshow .videocontainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Carousel */

.portfolio .slideshow .carousel-indicators {
  bottom: 0;
  background: rgba(0,0,0,.4);
  padding: 10px 0;
  margin: 0;
}

.portfolio .slideshow .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 7px;
  background-color: #fff;
  opacity: 1;
}

/* Navigation */

.portfolio .slideshow nav span {
  position: fixed;
  z-index: 1000;
  text-align: center;
  cursor: pointer;
  padding: 200px 30px;
  color: #fff;
}

.portfolio .slideshow nav span.nav-prev,
.portfolio .slideshow nav span.nav-next {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 41px;
  line-height: 58px;
}

.portfolio .slideshow nav span.nav-prev {
  left: 0;
}

.portfolio .slideshow nav span.nav-next {
  right: 0;
}

.portfolio .slideshow nav span.nav-close {
  top: 30px;
  right: 30px;
  padding: 0;
}

/*** Contact ***/
.contact .main-content {
  padding-bottom: 85px;
}
/* Left Side */

.custom-span-contact {
  font-weight: 600;
  padding-left: 50px;
  line-height: 21px;
  padding-top: 5px;
}

.custom-span-contact i {
  left: 0;
  top: 10px;
  font-size: 33px;
}

.custom-span-contact i.fa-phone-square {
  font-size: 39px;
  top: 7px;
}

.custom-span-contact span {
  text-transform: uppercase;
  opacity: .8;
  font-weight: 400;
}

ul.social {
  margin-left: -5px;
}

ul.social li {
  display: inline-block;
}

ul.social li a {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 42px;
  text-align: center;
  color: #fff;
  transition: .3s;
  font-size: 17px;
  margin: 0 6px;
  background: #2b2a2a;
  border-radius: 50%;
}
/* Form */
.contact .contactform input[type=text],
.contact .contactform input[type=email] {
  border: 1px solid #111;
  width: 100%;
  background: #252525;
  color: #fff;
  padding: 11px 26px;
  margin-bottom: 30px;
  border-radius: 30px;
  outline: none !important;
  transition: .3s;
}

.contact .contactform textarea {
  border: 1px solid #111;
  background: #252525;
  color: #fff;
  width: 100%;
  padding: 12px 26px;
  margin-bottom: 20px;
  height: 160px;
  overflow: hidden;
  border-radius: 30px;
  outline: none !important;
  transition: .3s;
}

.contact .contactform .form-message {
  margin: 24px 0;
}

.contact .contactform .output_message {
  display: block;
  color: #fff;
  height: 46px;
  line-height: 46px;
  border-radius: 30px;
}

.contact .contactform .output_message.success {
  background: #28a745;
}

.contact .contactform .output_message.success:before {
  font-family: FontAwesome;
  content: "\f14a";
  padding-right: 10px;
}

.contact .contactform .output_message.error {
  background: #dc3545;
}

.contact .contactform .output_message.error:before {
  font-family: FontAwesome;
  content: "\f071";
  padding-right: 10px;
}


/* [ RESPONSIVE DESIGN STYLES ] */

@media (min-width: 1351px) {
  .portfolio .container-portfolio .grid {
    text-align: left;
  }
}

@media (max-width: 1350px) and (min-width: 992px) {
  .container {
    max-width: calc(100% - 195px);
  }

  .portfolio .container-portfolio {
    max-width: calc(100% - 195px);
  }
}

@media (max-width: 1200px) {
  .home-details h1 {
    padding-left: 0;
  }
  .home-details h1:before {
    display: none;
  }
}

@media (max-width: 1200px) and (min-width: 992px) {
  .home-details h1 {
    font-size: 42px;
    line-height: 52px;
  }
}

@media (max-width: 1100px) and (min-width: 992px) {
  .home-details > div {
    max-width: 450px;
  }
}

@media (min-width: 1600px) {
  .home-details > div {
    max-width: 600px;
  }
}

@media (min-width: 992px) {
  .home-details-container {
    width: 100%;
    height: 100vh;
  }

}


/* Mobile  Navigation */

@media (max-width: 991px) {


  section.main-container {
    padding: 30px 0 !important;
  }

  .home-details-container {
    margin: 0 auto !important;
  }
  .home-details {
    padding: 0;
  }

  .main-img-mobile img {
    border-radius: 50% !important;
    width: 270px !important;
    height: 270px !important;
    border: 4px solid #252525 !important;
    margin: 0 auto 25px !important;
    display: block !important;
  }

  .home-details h1 {
    font-size: 38px;
    line-height: 48px;
    margin: 29px 0 13px;
  }

  .home-details p {
    margin: 10px 0 23px;
    font-size: 15px;
    line-height: 30px;
  }

  #menuToggle {
    display: inline-block;
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 1111;
    user-select: none;
    padding: 19px 0 0 16px;
    width: 54px;
    height: 54px;
    border-radius: 5px;
    background: #252525;
  }

  #menuToggle input {
    display: flex;
    width: 54px;
    height: 54px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    top: 0;
    left: 0;
  }

  #menuToggle > span {
    display: flex;
    width: 23px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    background: #ffffff;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 5px 0;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
  }

  #menuToggle > span:first-child {
    transform-origin: 0 0;
  }

  #menuToggle > span:nth-last-child(2) {
    transform-origin: 0 100%;
  }

  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(4px, 0);
    background: #fff;
  }

  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(2px, 4px);
  }

  #menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 60px;
    background-color: #252525;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0 0;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }


  #menuToggle input:checked ~ div ul {
    transform: none;
  }

  #menu li {
    position: relative;
    padding-left: 30px;
  }

  #menu li:after {
    position: absolute;
    content: '';
    height: 1px;
    width: calc(100% - 60px);
    background: #333;
    left: 30px;
  }

  #menu li:last-child:after {
    display: none;
  }

  #menu li.active a span {
    font-weight: 600;
  }

  #menu li a {
    color: #fff;
    text-transform: uppercase;
    transition-delay: 2s;
    font-size: 26px;
    display: block;
    text-decoration: none;
    padding: 14px 0;
    position: relative;
  }

  #menu li a span {
    position: absolute;
    left: 50px;
    font-weight: 400;
  }

  .portfolio .portfolio-list li {
    width: 50%;
  }

  .portfolio .portfolio-list li figure div {
    display: none !important;
  }
  .portfolio-single-it  figure div {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .portfolio .slideshow {
    background: #252525;
  }

  .portfolio .slideshow nav span {
    padding: 0;
  }

  .portfolio .slideshow ul > li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
  }

  .portfolio .slideshow ul > li:after {
    display: none;
  }

  .portfolio .slideshow figure {
    padding: 125px 30px 30px;
    border-radius: 0;
    max-width: 720px;
    margin: 0 auto;
  }

  .portfolio .slideshow nav span.nav-prev,
  .portfolio .slideshow nav span.nav-next {
    top: 35px;
    width: 32px;
    height: 32px;
  }

  .portfolio .slideshow nav span.nav-next {
    right: 30px;
  }

  .portfolio .slideshow nav span.nav-prev {
    left: 30px;
  }

  .portfolio .slideshow nav span.nav-prev img,
  .portfolio .slideshow nav span.nav-next img {
    width: 32px;
    height: 32px;
  }

  .portfolio .slideshow nav span:before {
    display: none;
  }

  .portfolio .slideshow nav span.nav-close {
    top: 35px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 32px;
    height: 32px;
    display: block;
    line-height: 0;
  }

  .portfolio .slideshow nav span.nav-close img {
    width: 32px;
    height: 32px;
  }

  .portfolio .slideshow nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 102px;
    background: #252525;
    z-index: 1;
    border-bottom: 1px solid #333;
  }

  .contact .main-content {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .home-details p {
    font-size: 14px;
    line-height: 28px;
  }
 .portfolio-list {
	height: 220vh !important;
}
}

@media (max-width: 576px) {

  body {
    font-size: 14px;
  }
.title-section.revealator-delay1 {
	transform: none !important;
	opacity: 1 !important;
	padding: 20px 15px;
	background-color: #000;
}
  #menuToggle {
    right: 10px;
    top: 4px;
    padding: 19px 0 0 13px;
    width: 49px;
    height: 49px;
  }

  .home #menuToggle {
    right: 25px;
    top: 25px;
    padding: 17px 0 0 13px;
  }

  #menu li {
    padding-left: 25px;
  }

  #menu li a {
    font-size: 18px;
  }

  #menu li:after {
    width: calc(100% - 50px);
    left: 25px;
  }

  #menu li a span {
    left: 35px;
  }

.main-content {
	padding-top: 35px;
}
  .main-content > .container {
    padding: 0 25px;
  }
.home-details > div {
	text-align: center;
}

.main-img-mobile img {
	width: 230px !important;
	height: 230px !important;
}

  .home-details h1 {
    font-size: 29px;
    line-height: 39px;
    margin: 18px 0 13px;
  }

  .home-details h6 {
    font-size: 19px;
  }

  .title-section {
  
  }
.title-section h1 {
	font-size: 24px;
}

  .title-bg {
    display: none;
  }

  .custom-title {
    font-size: 21px;
  }

  .about .main-content {
    padding-bottom: 0;
  }

  .resume-box h5 {
    font-size: 17px;
  }

  .box-stats {
    padding: 15px 20px 20px 25px;
  }

  .c100 {
    transform: scale(.8);
  }


  .box-stats h3 {
    font-size: 40px;
  }

  .box-stats p {
    padding-left: 0;
  }

  .box-stats p:before {
    display: none;
  }

  .portfolio .main-content {
    padding-bottom: 10px;
    margin-top: -12px;
  }

  .portfolio .portfolio-list li {
    width: 100%;
  }

  .portfolio .main-content > .container {
    padding: 0 10px;
  }

  .portfolio .slideshow figure {
    padding: 85px 25px 25px;
  }

  .portfolio .slideshow figcaption h3 {
    font-size: 25px;
  }

  .portfolio .slideshow nav span.nav-prev,
  .portfolio .slideshow nav span.nav-next {
    top: 9px;
    width: 20px;
    height: 20px;
  }

  .portfolio .slideshow nav span.nav-next {
    right: 20px;
  }

  .portfolio .slideshow nav span.nav-prev {
    left: 20px;
  }

  .portfolio .slideshow nav span.nav-prev img,
  .portfolio .slideshow nav span.nav-next img {
    width: 20px;
    height: 20px;
  }

  .portfolio .slideshow nav span.nav-close {
    top: 21px;
    width: 20px;
    height: 20px;
  }

  .portfolio .slideshow nav span.nav-close img {
    width: 20px;
    height: 20px;
  }

  .portfolio .slideshow nav {
    height: 62px;
  }
.news-default .post-container {
	margin-top: 30px;
}
  .blog .main-content {
    padding-bottom: 55px;
  }

  .blog-post article h1 {
    font-size: 25px;
  }

  .separator.mt-1 {
    margin-top: 35px !important;
  }
}



.project-item-groups i{
  margin-right:10px;
}

.custom-title{
	color: #fff !important;
	font-size: 26px;
  margin:0 !important;
}
.custom-title h1, .custom-title h2, .custom-title h3, .custom-title h4, .custom-title h5, .custom-title h6 {
	color: inherit !important;
	font-size: inherit;
	font-size: 26px !important;
  margin:0 !important;
}
@media (max-width: 576px) {
.custom-title h1, .custom-title h2, .custom-title h3, .custom-title h4, .custom-title h5, .custom-title h6 {
    font-size: 21px !important;
  }
}



/*** Light Body ***/

.page-wrapper.light-theme {
  color: #666;
  background-color: #fff;
}

.page-wrapper.light-theme .custom-title{
  color:#666 !important;
}
.page-wrapper.light-theme  body {
  background: #fff;
}
.page-wrapper.light-theme p,.page-wrapper.light-theme .title-section h1{
  color:#666 !important; 
}

.page-wrapper.light-theme .breadcrumb-meta-wrap .meta-item .author-name, 
.page-wrapper.light-theme .breadcrumb-meta-wrap .meta-item .date, 
.page-wrapper.light-theme .breadcrumb-meta-wrap .meta-item .comment,
.page-wrapper.light-theme .home-details h1 span,
.page-wrapper.light-theme .button .button-text,
.page-wrapper.light-theme .home-details h6,
.page-wrapper.light-theme .title-section h1,
.page-wrapper.light-theme .blog-details-tag .tag-item a,
.page-wrapper.light-theme .logged-in-as a:first-child,
.page-wrapper.light-theme .logged-in-as a{
  color:#666;
}




.page-wrapper.light-theme .button:hover .button-text {
  color: #fff;
}

.page-wrapper.light-theme blockquote p {
	color: #fff !important;
}
.page-wrapper.light-theme .bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

.page-wrapper.light-theme .preloader .black_wall {
  background-color: #eee;
}
.page-wrapper{
  background-color: #111;
}

.page-wrapper.light-theme .preloader {
  background-color: #fff;
}


.page-wrapper.light-theme .title-bg {
  color: rgba(30, 37, 48, 0.07);
}

.page-wrapper.light-theme .box-stats {
  border: 1px solid #ddd;
}
.page-wrapper.light-theme .elementor-divider-separator {
	border-top: 1px solid #ddd !important;
}
.page-wrapper.light-theme .c100,
.page-wrapper.light-theme .resume-box .time {
  background-color: #eee;
}

.page-wrapper.light-theme .resume-box .time,
.page-wrapper.light-theme .resume-box p {
  color: #666;
}

.page-wrapper.light-theme .resume-box .place:before {
  background-color: #666;
}

.page-wrapper.light-theme .resume-box li:after {
  border-left: 1px solid #ddd;
}

.page-wrapper.light-theme .c100 > span {
  color: #666;
}

.page-wrapper.light-theme .c100:after {
  background-color: #fff;
}

.page-wrapper.light-theme .portfolio .slideshow figure {
  background-color: #fff;
}

.page-wrapper.light-theme .portfolio .slideshow ul > li:after {
  background: rgba(255, 255, 255, 0.77);
}

.page-wrapper.light-theme .portfolio .slideshow {
  background: rgba(0, 0, 0, 0.7);
}

.page-wrapper.light-theme ul.social li a {
  color: #666;
  background: #eee;
}

.page-wrapper.light-theme ul.social li a:hover {
  color: #fff;
}

.page-wrapper.light-theme .post-content {
  background-color: #f2f2f2;
}

.page-wrapper.light-theme .post-content .entry-header h3 a {
  color: #666;
}

.page-wrapper.light-theme .page-link {
  color: #666;
  background-color: #eee;
  border: 1px solid #eee;
}

.page-wrapper.light-theme-post .meta {
  color: #888;
}

.page-wrapper.light-theme .page-item.active .page-link {
  color: #fff;
}

.page-wrapper.light-theme hr.separator {
  border-top: 1px solid #ddd;
}

.page-wrapper.light-theme input[type="text"], 
.page-wrapper.light-theme input[type="email"], 
.page-wrapper.light-theme input,
.page-wrapper.light-theme textarea {
	background-color: #fff;
	border-color:#ddd !important;
	color: #666 !important;
}



@media (min-width: 992px) {
  .page-wrapper.light-theme .header ul.icon-menu li {
    background-color: #eee;
  }

  .page-wrapper.light-theme .header ul.icon-menu li i {
    color: #666;
  }

  .page-wrapper.light-theme .header ul.icon-menu li.active,
  .page-wrapper.light-theme .header ul.icon-menu li:hover,
  .page-wrapper.light-theme .header ul.icon-menu li.active i,
  .page-wrapper.light-theme .header ul.icon-menu li:hover i {
    color: #fff;
  }
}

@media (max-width: 991px) {
.page-wrapper.light-theme .main-img-mobile {
	border: 4px solid #eee;
	padding-top: 20px;
}

  .page-wrapper.light-theme #menuToggle {
    border: 1px solid #ddd;
  }

  .page-wrapper.light-theme #menuToggle,
  .page-wrapper.light-theme #menu {
    background: #eee;
  }

  .page-wrapper.light-theme #menuToggle > span,
  .page-wrapper.light-theme #menuToggle input:checked ~ span {
    background: #666;
  }

  .page-wrapper.light-theme #menu li a {
    color: #666;
  }

  .page-wrapper.light-theme #menu li:after {
    background: #ddd;
  }

  .page-wrapper.light-theme .portfolio .slideshow nav {
    background: #eee;
    border-bottom: 1px solid #ddd;
  }

  .page-wrapper.light-theme .portfolio .slideshow nav span img {
    display: none;
  }

  .page-wrapper.light-theme .portfolio .slideshow nav span.nav-next {
    background-image: url("../img/projects/navigation/right-arrow.png");
    background-size: cover;
  }

  .page-wrapper.light-theme .portfolio .slideshow nav span.nav-prev {
    background-image: url("../img/projects/navigation/left-arrow.png");
    background-size: cover;
  }

  .page-wrapper.light-theme .portfolio .slideshow nav span.nav-close {
    background-image: url("../img/projects/navigation/close-button.png");
    background-size: cover;
  }

  .page-wrapper.light-theme .portfolio .slideshow nav span.nav-next,
  .page-wrapper.light-theme .portfolio .slideshow nav span.nav-prev {
    top: 51px;
  }

  .page-wrapper.light-theme .portfolio .slideshow {
    background: #fff;
  }
}

@media (max-width: 576px) {
  .page-wrapper.light-theme .title-section {
    background: #eee;
    border-bottom: 1px solid #ddd;
  }

  .page-wrapper.light-theme #menuToggle {
    border: 0;
  }

  .page-wrapper.light-theme .portfolio .slideshow nav span.nav-next,
  .page-wrapper.light-theme .portfolio .slideshow nav span.nav-prev {
    top: 31px;
  }
}




@media only screen and  (max-width: 1024px) {
  .about-list .value {
    display: block !important;
  }
  .box-stats {
    padding: 15px;
  }
  }
  


/* =================================================================== */
/* GREEN #72b626
====================================================================== */


body h1,
.box-stats h3,
.title-section h1 span,
#menu li.active a,
 #menu li.active a,
.post-container:hover .post-content .entry-header h3 a,
.post-content .entry-header h3 a:hover,
.custom-span-contact i,
.portfolio .slideshow figcaption h3,
.portfolio .slideshow a,
.portfolio .portfolio-list figure:hover figcaption,
.blog-post .meta i{
    color: var(--common-primary-color) !important;
}
.home-details h1:before,
.resume-box .icon,
ul.social li a:hover,
ul.social li a:hover,
.preloader .loader,
.page-link:hover,
.page-item.active .page-link,
.page-link:hover,
.page-item.active .page-link,
.portfolio .portfolio-list figure div,
.header ul.icon-menu li.menu-item.active, .header ul.icon-menu li.menu-item:hover,
 .header ul.icon-menu li.menu-item.active,   .header ul.icon-menu li.menu-item:hover,
.btn,
.header .menu-item span,
body .color-block,
.title-section hr,
.portfolio .slideshow .carousel-indicators li.active,
.button:before,
.button-icon{
    background-color: var(--common-primary-color) !important;
}
.page-wrapper.light-theme  input[type=text]:focus,
.page-wrapper.light-theme input[type=email]:focus,
.page-wrapper.light-theme textarea:focus,
.page-wrapper.light-theme input[type=text]:focus,
.page-wrapper.light-theme input[type=email]:focus,
.page-wrapper.light-theme textarea:focus,
.page-item.active .page-link,
.page-link:hover,
.page-item.active .page-link,
.page-link:hover,
.button{
    border: 1px solid var(--common-primary-color) !important;
}


.post-thumb {
    border-bottom: 5px solid var(--common-primary-color) !important;
}
.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
    border: 0.08em solid var(--common-primary-color) !important;
}