/*!----------------------------------------------------------
  Template Name: PM || PRO HTML5 Personal Responsive Tempalte
  Template URI: http://presstechit.com
  Description: This is html5 Presonal Portfolio Template
  Author: PressTechit
  Author URI: http://presstechit.com
  Version: 1.0
------------------------------------------------------------*/

/*!------------------------------------------------
	CSS INDEX
  ..........
 Css Contents  

 01.  Service Area Css 	
 02.  About Area css
 03.  Fun Facts Area Css
 04.  Protfolio Area css
 05.  Team Area Css
 06.  Blog area
 07.  Clients Review Area
 08.  Coming Soon Page Css
 09.  Not Found Page Css
 10.  Scrollup Css
 11.  Single blog page css
 12.  home-2 particle css
 13.  Home-3 video bg css 
 14.  home-4 Slider Css
/*!------------------------------------------------*/

/*!------------------------------------------------
		Custom All Conntent
---------------------------------------------------*/
/*Service Area Css*/
.service-area {
  background: #000000 none repeat scroll 0 0;
}
.single-service {
  border: 2px solid #60983d;
  margin-top: 50px;
  transition: all 0.6s ease 0s;
  text-align: center;
}
.single-service:hover{
  border: 2px solid #ffffff;
}
.single-service i {
  color: #60983d;
  font-size: 80px;
  margin: 40px 0 20px 0px;
}
.single-service h5 {
  color: #ffffff;
  text-transform: uppercase;
}
.single-service p {
  color: #cccccc;
  padding: 10px;
}
.single-service a {
  margin-bottom: 25px;
  padding: 0 15px;
}
.btn-red {
  background: #60983d -webkit-linear-gradient(left, #60983d 50%, #000000 50%) repeat scroll 0 0 / 205% 100%;
  background: #60983d -o-linear-gradient(left, #60983d 50%, #000000 50%) repeat scroll 0 0 / 205% 100%;
  background: #60983d linear-gradient(to right, #60983d 50%, #000000 50%) repeat scroll 0 0 / 205% 100%;
  border: 1px solid #212121;
  border-radius: inherit;
  color: #ffffff;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  height: inherit;
  letter-spacing: 1px;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-position 0.7s ease 0s;
}
.btn-red:hover{
  border: 1px solid #DC143C;
  color: #DC143C;
  color: #60983d;
  border: 1px solid #60983d;
  background-color: transparent;
  -webkit-background-position: 100% 0;
  -moz-background-position: 100% 0;
  -ms-background-position: 100% 0;
  -o-background-position: 100% 0;
  background-position: 100% 0;
}

/*About Area css*/
.about-us-area{
  background: #000000 none repeat scroll 0 0;
}
.about-info {
  overflow: hidden;
}
.about-text {
  display: inline-block;
  margin-bottom: 35px;
}
.about-info h2{
  color: #ffffff;
}
.about-info p {
  color: #cccccc;
  display: block;
}
.progress {
  border: medium none;
  border-radius: 0;
  height: 13px;
  margin-bottom: 55px;
  overflow: visible;
  position: relative;
}
.skill-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  text-transform: uppercase;
  top: -30px;
}
.progress-bar {
  background: #60983d none repeat scroll 0 0;
  text-align: right;
}
.progress-bar span {
  background: #60983d none repeat scroll 0 0;
  color: #ffffff;
  padding: 2px;
  position: absolute;
  top: -35px;
}
.progress span::after {
  border-color: #60983d transparent transparent;
  border-style: solid;
  border-width: 10px 8px 0;
  bottom: 0;
  content: "";
  height: 0;
  left: 22%;
  position: absolute;
  top: 100%;
  width: 0;
}

/*Fun Facts Area Css*/
#counterdown .single-count {
  color: #ffffff;
  font-size: 15px;
  margin-top: 30px;
  text-align: center;
}
#counterdown h2 {
  color: #ffffff;
  font-weight: 700;
  margin-top: 50px;
  position: relative;
}
#counterdown .single-count i {
  background: #60983d none repeat scroll 0 0;
  border-radius: 100%;
  font-size: 36px;
  height: 90px;
  line-height: 90px;
  position: relative;
  transition: all 0.3s ease 0s;
  width: 90px;
}
#counterdown .single-count:hover i {
    transform: rotate(360deg);
}
#counterdown .single-count i::after {
  border: 3px solid #60983d;
  border-radius: 100%;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: scale(0.8);
  transition: all 0.3s ease 0s;
  width: 100%;
}
#counterdown .single-count:hover i::after, #counterdown .single-count.active i::after {
  opacity: 1;
  transform: scale(1.2);
}
#counterdown .single-count p {
  color: #cccccc;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Protfolio Area css*/
.protfolio-menu button {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #60983d;
  color: #60983d;
  display: inline-block;
  font-weight: 500;
  padding: 5px 10px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  font-size: 14px;
}
.protfolio-menu button.active {
  background: #60983d none repeat scroll 0 0;
  color: #ffffff;
}
.protfolio-item {
    margin-bottom: 30px;
}
.single-protfolio {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  margin-top: 50px;
}
.single-protfolio .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}
.single-protfolio img {
  display: block;
  position: relative;
  transition: all 0.4s ease-in 0s;
  width: 100%;
}
.single-protfolio:hover img {
  filter: grayscale(1) blur(3px);
  -webkit-filter: grayscale(1) blur(3px);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.single-protfolio h2 {
  text-transform: capitalize;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: #60983d;
}
.single-protfolio a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid #60983d;
  margin: 50px 0 0 0;
  background-color: transparent;
}
.single-protfolio a.info:hover {
  box-shadow: 0 0 5px #60983d;
}
.single-protfolio a.info, .single-protfolio h2 {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 0;
  filter: alpha(opacity=0);
  color: #ffffff;
  text-transform: capitalize;
}
.single-protfolio:hover a.info, .single-protfolio:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/*Team Area Css*/
.single-member {
  background: #ffffff none repeat scroll 0 0;
  border-radius: 5px;
  margin-top: 50px;
  padding-bottom: 25px;
  padding-top: 50px;
  text-align: center;
}
.team-member-img img {
  border: 5px solid #60983d;
  border-radius: 100%;
  width: 150px;
}
.team-info > h4 {
  font-weight: 700;
  padding-top: 15px;
  text-transform: capitalize;
}
.team-info > p {
  color: #363636;
  font-weight: 700;
  padding-bottom: 20px;
}
.team-info a {
  font-size: 20px;
  margin-bottom: 0;
  padding: 5px 30px;
  text-transform: capitalize;
}
.team-info a i {
  padding-right: 5px;
}
.team-member-img a { 
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 150px;
}
.team-member-img > a::after {
  background: #000000 none repeat scroll 0 0;
  content: "";
  display: inline-block;
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  border-radius: 100%;
}

/*Blog Area Css*/
.latest-blog {
  margin-top: 30px;
}
.blog-img {
  float: left;
  margin-top: 20px;
  position: relative;
  width: 50%;
}
.blog-img > a::before {
  background: #000000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  transition: all 0.5s ease 0s;
}
.latest-blog:hover .blog-img > a::before{
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  -ms-opacity: 0.5;
  -o-opacity: 0.5;
  opacity: 0.5;
}
.blog-link {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.blog-link > a {
  border: 1px solid #60983d;
  color: #ffffff;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 0 5px;
  transform: scale(0);
  transition: all 0.5s ease 0s;
  width: 40px;
}
.latest-blog:hover .blog-link > a{
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.blog-content {
  width: 50%;
  float: right;
  padding-left: 20px;
}
.bolg-meta {
  margin-bottom: 10px;
  margin-top: 15px;
  overflow: hidden;
}
.blog-content span{
  color: #ffffff;
}
.blog-content span i {
  padding-right: 5px;
  color: #60983d;
}
.blog-info > a h6 {
  font-weight: 700;
  text-transform: uppercase;
  color: #60983d;
}
.blog-info > p {
  color: #cccccc;
  font-weight: 500;
}
.blog-info > a {
  color: #ffffff;
  font-weight: 700;
  text-transform: capitalize;
}
.blog-info > a i {
  margin-left: 5px;
}
.blog-info > a:hover{
  color: #60983d;
}
.blog-active .owl-dots {
  bottom: -50px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}
.brand-img {
  border: 1px solid #dddddd;
  padding: 20px;
}
.brabd-active .owl-dots {
  background: #ffffff none repeat scroll 0 0;
  bottom: -50px;
  height: 15px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}
.blog-active .owl-dots button {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid rgba(242, 1, 1, 0.4);
  height: 10px;
  margin: 0 5px;
  width: 20px;
}
.blog-active .owl-dots .owl-dot.active {
  background: #60983d;
}

/*Clients Review Area css*/
.client-details {
  background: #ffffff none repeat scroll 0 0;
  border: 2px solid #60983d;
}
.client-details {
  padding: 100px 45px 33px;
}
.review-ptn {
  margin-top: 0;
}
.clients.team-member-img > img {
  border: 2px solid #60983d;
  padding: 3px;
}
.clients.team-member-img {
   margin-bottom: -10%;
}
.review.owl-carousel .owl-item img{
  display: inline-block;
  width: 150px;
}
.review-reating i {
  color: #f1c30d;
  font-size: 18px;
}
.review .owl-dots {
  bottom: -30px;
  height: 15px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}
.review .owl-dots button {
  background: #ffffff none repeat scroll 0 0;
  height: 10px;
  margin: 0 5px;
  width: 20px;
}
.review .owl-dots .owl-dot.active {
  background: #60983d;
}

/*Coming Soon Page Css*/
.notfound {
  min-height: 100vh;
}
.coming-area h1 {
  color: #ffffff;
  font-size: 50px;
  letter-spacing: 2px;
  margin: 35px 0;
  text-transform: uppercase;
}
.newslatter {
  margin-bottom: 50px;
  margin-top: 25px;
  position: relative;
}
.newslatter form input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #60983d;
  color: #60983d;
  height: 50px;
  width: 100%;
}
.newslatter form button {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: #60983d;
  border-color: currentcolor currentcolor currentcolor #60983d;
  border-image: none;
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  color: #ffffff;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

/*Page Not Found Css*/
.notfound {
  min-height: 100vh;
}
.notfound h1 {
  font-size: 50px;
  margin: 123px 0;
  color: #ffffff;
}
/*Scrollup Css*/
#scrollUp {
  text-align: center;
  position: relative;
  right: 20px;
  bottom: 20px;
  color: #ffffff;
  width: 35px;
  height: 35px;
  line-height: 35px;
}
#scrollUp::before {
  background: #60983d none repeat scroll 0 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  content: "";
  height: 44px;
  left: 0;
  line-height: 45px;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 45px;
  z-index: -1;
}
#scrollUp span i {
  display: inline-block;
  font-size: 20px;
  margin-left: 10px;
  margin-top: 10px;
  text-align: center;
}

/*Single blog page css*/
.slider-content.text-center > h3 {
  color: #ffffff;
  text-transform: capitalize;
}
.single-item {
  margin-bottom: 50px;
}
.single-item .img-post {
  overflow: hidden;
  position: relative;
}
.single-item .img-post:hover img {
  transform: scale(1.2, 1.2);
}
.single-item .img-post img {
  transition: all 0.5s ease 0s;
}
.posts {
  padding-right: 15px;
}
.single-item .content .post-img {
  margin-bottom: 50px;
  overflow: hidden;
  width: 100%;
}
.single-item .content .post-img img {
  transition: all 0.5s ease 0s;
  width: 100%;
}
.single-item .content .post-img img:hover {
  transform: scale(1.1, 1.1);
}
.single-item .content .post-info h3 {
  color: #ffffff;
}
.mor-inf {
  margin: 0 0 20px 0;
}
.mor-inf li {
  color: #ffffff;
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1px;
  margin-right: 15px;
  text-transform: uppercase;
}
.content .mor-inf li a:hover {
  color: #60983d;
}
.content .mor-inf li .icon {
  color: #60983d;
  margin-right: 5px;
}
.mor-inf ul li a {
  color: #ffffff;
}
.post-info p {
  color: #cccccc;
}
.posts .pagination span {
  border: 1px solid #60983d;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 10px 18px;
  text-transform: uppercase;
  transition: all 0.5s ease 0s;
}
.posts .pagination span:hover {
  background: #60983d none repeat scroll 0 0;
  border-color: #ffffff;
  color: #ffffff;
}
.posts .pagination .active {
  border-color: #ffffff;
  color: #60983d;
}
.side-bar {
  padding-left: 15px;
}
.side-bar .widget {
  margin-bottom: 80px;
}
.search > form input {
  position: relative;
}
.search > form button {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #60983d;
  height: 45px;
  position: absolute;
  right: 15px;
  top: 0;
}
.side-bar .widget .about-bar img {
  margin-bottom: 30px;
}
.side-bar .widget .lpost .item {
  margin-bottom: 30px;
  overflow: hidden;
}
.side-bar .widget .lpost .sm-img {
  float: left;
  width: 30%;
}
.side-bar .widget .lpost .info {
  margin-left: 35%;
  padding-top: 5px;
}
.side-bar .widget .lpost .info h5 {
  color: #ffffff;
  font-size: 12px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.side-bar .widget .lpost .info span {
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 1px;
}
.side-bar .widget .catg h5 {
  color: #ffffff;
  font-size: 13px;
  margin-bottom: 15px;
  padding-left: 15px;
  position: relative;
}
.side-bar .widget .catg h5::before {
  color: #60983d;
  content: "";
  font-family: "FontAwesome";
  left: 0;
  position: absolute;
  top: 1px;
}
.catg a {
  color: #ffffff;
  font-size: 15px;
}
.catg h5 a:hover {
  color: #60983d;
}
.side-bar .widget .catg h5 span {
  color: #ffffff;
  float: right;
}
.about-bar p {
  color: #cccccc;
}
.side-tit {
  border-bottom: 1px solid #ffffff;
  margin-bottom: 50px;
  padding-bottom: 20px;
}
.side-tit h4 {
  color: #ffffff;
}
.side-bar .widget .tags span {
  border: 1px solid #ffffff;
  color: #ffffff;
  display: inline-block;
  font-size: 12px;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px 10px;
  transition: all 0.5s ease 0s;
}
.side-bar .widget .tags span:hover {
  background: #60983d none repeat scroll 0 0;
  border-color: #ffffff;
  color: #ffffff;
}

/*single-post css*/
#single-post-content {
  margin: 0 0 30px;
}
blockquote {
  border-left: 5px solid #60983d;
  color: #ffffff;
}
#single-post-content .post-title {
  margin: 30px 0 20px;
}
.post-title h1 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 20px;
}
#single-post-content .post-meta {
  margin: 0 0 30px;
}
#single-post-content .post-body > p {
  color: #505050;
  margin: 0 0 30px;
}
#single-post-content .post-body {
  color: #505050;
  margin: 0 0 30px;
  margin: 0 0 30px;
}

#comments {
  position: relative; 
}
#comments .title-box {
  margin: 15px 0 50px;
}

/*comment list */
#comments .commentlist {
  margin-left: 32px;
  list-style: outside none none;
}
.commentlist li {
  margin: 0 0 30px;
  position: relative;
}
.commentlist li ul.children {
  margin: 30px 0 0 50px;
}
.comment-wrap {
  border: 1px solid #60983d;
  padding: 30px 60px;
  position: relative;
}
.comment-author-avatar {
  left: -30px;
  position: absolute;
  top: 30px;
  background: #000000 none repeat scroll 0 0;
  border: 1px solid #60983d;
  border-radius: 100%;
}
.children .comment-author-avatar {
  left: -20px;
}
.comment-author-avatar img {
  border-radius: 100%;
  display: block;
  padding: 5px;
  width: inherit;
}
.commentlist li .children {
  list-style: outside none none;
  margin-top: 0;
}
.commentlist li .comment-content {
  padding: 0 0 0 15px;
}
.comment-content .comment-meta h4 a {
  color: #ffffff;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
}
.comment-content .comment-meta a {
  color: #ffffff;
  font-style: italic;
  font-weight: 400;
}
.comment-content a {
  text-decoration: none;
}
.comment-content a:hover {
  color: #ffffff;
}
.commentlist li .comment-content p {
  color: #cccccc;
  padding-top: 8px;
}
.commentlist li .comment-content a.comment-reply-link {
  margin-top: 10px;
  font-weight: 500;
}
a, button, input {
  color: #60983d;
}
.title-box {
  border-bottom: 1px dashed #60983d;
  margin: 30px 0;
  position: relative;
}
.title-box::after {
  background: #60983d none repeat scroll 0 0;
  bottom: -3px;
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  width: 50px;
}
.title-box h3 {
  color: #ffffff;
}
#commentform .comment-notes {
  margin-bottom: 30px;
  padding: 0 0 0 15px;
}
#commentform .required {
  font-weight: bold;
  color: #60983d;
}
#commentform .form-group {
  display: table;
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}
#commentform .form-control {
  padding-left: 10px;
}

/*Home-2 particle css*/
#particles-js {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

/*Home-3 video bg css*/
.video-bg {
  position: relative;
}
#bg-container {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}
#bg-container::after {
  background: #000000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
}
#bg {
  min-width: 100%;
  min-height: 100%;
}

/*home-4 Slider Css*/
.slider-active .owl-nav button{
  height: 50px;
  width: 50px;
  line-height: 50px;
  background: #000000;
  color: #ffffff;
  font-size: 30px;
  left: 10px;
  top: 50%;
  text-align: center;
  position: absolute;
  transform: translateY(-50%);
}
.slider-active .owl-nav button i {
  color: #ffffff;
  font-size: 50px;
}
.slider-active .owl-nav button.owl-next{
  left: auto;
  right: 10px;
}