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

    Template Name: Usual
    Template URI: https://devitems.com/
    Description: This is html5 template
    Author: HasTech
    Author URI: https://devitems.com/
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Home One Css
		2. About Area
		3. About Video Area 
		4. Service Area 
		5. Portfolio css
		6. Blog Area
		7. Client Testimonial 
		8. Pricing Table 
		9. Brand Area 
		10. Form Contact
		11. Footer Bottom 
	12. Home Two Css
		13. About Us 
		14. Our Successful
		15. Our Service
		16. Team See Our Portfolio
		17. Latest Shot/Portfolio Css
		18. Our Team
		19. Skill Progress
		20. our pricing table
		21. Blog Style
		22. Our Client
		23. Footer Style Two
	24. About Us Page
	25. Contact Us Page
	26. Portfolio Details Page
	27. Pagination Count css
	28. Blog Details Page
	29. 404 Page
	30. ScrollUp
	31. Style Customizer css
	
-----------------------------------------------------------------------------------*/

/* ------------------------------
  1. Home One Css
---------------------------------*/
/* -------------------------
  2. About Area
-----------------------------*/

.icon-titel {
  display: block;
  margin-bottom: 13px;
  overflow: hidden;
}
.icon-titel i {
  color: #666666;
  font-size: 24px;
}
.choose-us .icon-titel i {
  color: #666666;
  float: left;
  font-size: 24px;
  height: 50px;
  line-height: 50px;
  position: relative;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 50px;
  z-index: 999;
}
.choose-us .icon-titel i::after {
  border: 1px solid #ddd;
  border-radius: 0px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
  z-index: -9999;
}
.icon-titel h6 {
  display: block;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  padding-top: 20px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}
.specialty-single:hover .icon-titel h6,.ourservice-single:hover .srvc-content h6{color:#005aab;}
.choose-us .specialty-single:hover .icon-titel i,.ourservice-single:hover .srvc-icon a i{color:#fff;}
.specialty-single:hover .icon-titel i::after,.social-rotate ul li a:hover,.ourservice-single:hover .srvc-icon a{background:#005aab;border-color:#005aab;}
.specialty-image {
  margin-top: 10%;
  padding-left: 40px;
}
.spe-discribe > p {
  margin: 0;
}
.text-titel {
  font-size: 50px;
  font-weight: 800;
  line-height: 80px;
  letter-spacing: 2px;
  color:#fff;
}


.navbar-expand-lg .navbar-nav .dropdown-menu {
	position: absolute;
	border-radius: 0 0 5px 5px;
	box-shadow: 0px 0px 8px 2px #ddd;
	margin-top: 0px;
}
/* -------------------------
  3. About Video Area
-----------------------------*/
.video-area .img {
  display: block;
  overflow: hidden;
  position: relative;
}
.popup-youtube {
  color: #fff;
  display: block;
  font-size: 60px;
  height: 70px;
  left: 0;
  line-height: 70px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 35%;
  width: 70px;
}
.social-rotate ul li a {
  border: 1px solid #ddd;
  color: #666666;
  display: block;
  font-size: 15px;
  height: 30px;
  line-height: 28px;
  margin-right: 20px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 30px;
}
.header-area-2 .social-rotate ul li a {
  margin-right: 8px;
  color:#fff;
}
.social-rotate ul li a:hover{color:#fff;}
/* .social-rotate ul li a i {
  transform: rotate(45deg);
} */
/* --------------------------
  4. Service Area
-----------------------------*/


.service-area {
  background-color: #fff;
}

.srvc-icon i {
  color: #666666;
  font-size: 36px;
}

.service-single {
  margin-left: -15px;
  margin-right: -15px;
  transition: .5s;
}
.service-single:hover .service-hover {
  padding: 35px 15px 30px;
}
.service-single:hover img {
  transform: rotate(360deg);
}

.bl {
  border-left: 1px solid #005aab;
}
.bb {
  border-bottom: 1px solid #005aab;
}
.service-hover {
  background: #fff none repeat scroll 0 0;
  border-radius: 5px;
  padding: 25px 15px 40px;
  transition: all 0.3s ease 0s;
  min-height: 300px;
}
.hvr-icon {
  margin-top: 5px;
}
.hvr-icon img {
  margin-bottom: 25px;
  transition: .5s;
}
.hvr-icon > h6 {
  color: #383838;
  margin-bottom: 20px;
}
.wework-social {
  text-align: center;
}
.wework-social ul li {
  background: #fff none repeat scroll 0 0;
  border-radius: 5px;
  height: 115px;
  margin-right: 126px;
  width: 115px;
  transition:.3s;
}
.wework-social ul li:last-child{margin-right:0;}
.wework-social ul li:hover {background:#005aab;}
.wework-social ul li:hover a i,.wework-social ul li:hover a span{color:#fff;}
.wework-social ul li a {
  display: block;
  height: 100%;
  padding: 25%;
  width: 100%;
}
.wework-social ul li a i {
  color: #666666;
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
  text-align: center;
  transition:.5s;
}
.wework-social ul li a span {
  color: #383838;
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition:.5s;
}
/* --------------------------
  5. Portfolio css
-----------------------------*/
.portfolio-menu li {
  color: #383838;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  margin-left: -4px;
  padding: 10px 25px;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  background: rgba(4, 74, 103, 0.06);
  margin: 0 5px;
  border-radius: 5px;
}
.portfolio-menu li.active, .portfolio-menu li:hover {
  background: #005aab none repeat scroll 0 0;
  border-color: #005aab;
  color: #fff;
}
.image-box::after {
  background: #005aab none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0px;
  transform: rotate(90deg);
  transition: all 0.4s ease 0s;
}
.image-box > a {
  color: #fff;
  font-size: 70px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease 0s;
  visibility: hidden;
  z-index: 1;
}
.image-box > a:hover{color: #fff;}
.image-box:hover:after{opacity: 0.7;transform:rotate(0deg)}
.image-box:hover a{visibility: visible;opacity: 1;}
.image-box {
  cursor: pointer;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.single-portfolio {
}
.portfoio-boxall {
  margin: 0 -5px;
}
.text-content h6 {
  margin-bottom: 0;
}
.socialbar{margin-top: 30px;}
.latestshot-area .container-fluid,.map-area-main .container-fluid,.specialty-area .container-fluid,
.successful-area .container-fluid,.latestshot-area .container-fluid{
  padding: 0;
}
.latestshot-menu li:last-child {
  border-right: 1px solid #eee;
}

.shot-two .single-portfolio {
  margin-bottom: 0;
}

/* -------------------------
   6. Blog Area
----------------------------*/
.blog-content {
  border: 1px solid #ddd;
  padding: 28px 20px;
}
.blog-content > h6 {
  margin-bottom: 15px;
}
.blog-content a {
  transition: all 0.4s ease 0s;
}
.post-info {
  color: #777;
  font-size: 12px;
  font-weight: 400;
}
.post-date > a,.favorite-comment > a,.favorite > a{
  color: #777;
}
.post-date > a:hover,.favorite-comment > a:hover,.favorite > a:hover{color:#005aab;}
.post-date i,.favorite-comment i {
  color: #777;
  margin-right: 4px;
}
.favorite {
  float: left;
  margin-right: 23px;
}
.blog-img::before, .blog-img::after {
  background: #005aab none repeat scroll 0 0;
  content: "";
  height: 200%;
  left: 0;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: all 0.6s ease 0s;
  width: 200%;
}
.blog-img::before {
  transform: skew(45deg) translateX(100%);
  z-index: 9;
}
.blog-img::after {
  transform: skew(45deg) translateX(-100%);
}
.blog-img {
  overflow: hidden;
  position: relative;
}
.single-blog:hover .blog-img::before,.single-blog:hover .blog-img::after {
  cursor: pointer;
  transform: skew(45deg) translateX(0px);
}
/* -------------------------
   7. Client Testimonial
----------------------------*/
.ct-cp img {
  border-radius: 100%;
}
.client-say {
  display: block;
  overflow: hidden;
  padding: 35px 0 40px;
  padding-bottom: 0;
}
.client-info > p {
  margin: 0;
}
.client-info > h6 {
  color: #d7d7d7;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 1px;
}
.client-info {
  margin-top: 15px;
}
.client-adrs > p {
  color: #d7d7d7;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  padding-bottom: 6px;
  position: relative;
}
.client-say > p {
  color: #d7d7d7;
  display: inline-block;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 30px;
  max-width: 850px;
  vertical-align: top;
}
.client-testimonial-area .owl-theme .owl-controls {
  margin-top: 68px;
  text-align: center;
}
.client-testimonial-area .owl-theme .owl-controls .owl-buttons div {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 40px;
  line-height: 40px;
  margin: 0 23px 0 0;
  opacity: 1;
  padding: 0;
  text-align: center;
  transform: rotate(45deg);
  width: 40px;
  transition:.3s;
}
.client-testimonial-area .owl-theme .owl-controls .owl-buttons div:hover{color:#005aab;}
.client-testimonial-area .owl-theme .owl-controls .owl-buttons div.owl-prev::after {
  content: "";
  font-family: material-design-iconic-font;
  font-size: 30px;
  height: 100%;
  left: 0;
  margin-top: 4px;
  position: absolute;
  right: 0;
  transform: rotate(495deg);
  width: 100%;
}
.client-testimonial-area .owl-theme .owl-controls .owl-buttons div.owl-next::before {
  content: "";
  font-family: material-design-iconic-font;
  font-size: 30px;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  transform: rotate(675deg);
  width: 100%;
  margin-top: -1px;
}
.client-testimonial-area .owl-theme .owl-prev i,.client-testimonial-area .owl-theme .owl-next i {
  display: none;
}
/* -------------------------
   8. Pricing Table
----------------------------*/
.pricing-table-single {
  border: 1px solid #ddd;
  transition:.3s;
}
.pricing-table-single:hover {
  box-shadow: 2px 2px 15px 5px #ddd;
}
.table-category {
  background-color: #0171BB;
  padding: 5px 0;
}
.table-category h2{
  color: #fff;
  text-align: center;
  font-size:28px;
}
.table-category-off {
  text-align: center;
  background-color: #025694;
  padding: 3px 0;
}
.table-category-off h4 {
  color: #CFFFFF;
  font-weight: 700;
  font-size: 25px;
}
.table-category-off span{

}
.table-category h1 span {
  color: #999999;
  font-size: 12px;
  font-weight: 900;
  margin-left: 8px;
  text-transform: uppercase;
}
.hosting-details{
  height: 300px;
}
.hosting-details  ul {
  margin: 0;
  padding: 0;
}
.hosting-details ul li {
  display: block;
  padding: 8px 0;
  color: #A8A8A8;
}
.hosting-details ul li span{
  color: #B56F3B;
  font-weight: 1000;
}
.hosting-details ul li span i{
  color: #fff;
}
.hosting-pricing h4{
  text-align: center;
  color: #A8A8A8;
}
.hosting-pricing h4 span{
  color: #B56F3B;
  font-weight: 1000;
}
.order-button  a {
  border-top: 1px solid #ddd;
  color: #005aab;
  display: block;
  font-size: 12px;
  font-weight: 700;
  padding: 15px 0;
  transition:.3s;
}
.order-button > a:hover{background:#005aab;color:#fff;border-color:#005aab;}
/* -------------------------
   9. Brand Area
----------------------------*/
.brand-single > a {
  display: block;
  margin-bottom: 1px;
  transition: all 0.3s ease 0s;
  border: 2px solid #ddd;
  border-radius: 5px;
}
.brand-single > a:hover{border-color:#005aab;}
.single-brand img {
  border-radius: 5px;
  width: 100%;
}
/* -------------------------
   10. Form Contact
----------------------------*/
.map-area-main {
  position: relative;
}
.help-contact-area {
  margin-top: -5.8%;
  width: 100%;
}
.form-group {
  margin-bottom: 0;
  padding-left: 170px;
  padding-right: 170px;
  padding-top: 35px;
}
.shadow {
  box-shadow: 2px 2px 15px 5px #ddd;
  position:relative;
}
.form-single input {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #ddd;
  border-radius: 0;
  box-shadow: none;
  float: left;
  height: 40px;
  margin-bottom: 25px;
}
.form-textarea textarea {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #ddd;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 25px;
}
.form-button button {
  background: #005aab none repeat scroll 0 0;
  border: medium none;
  box-shadow: none;
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 600;
  height: 40px;
  overflow: hidden;
  text-transform: uppercase;
  width: 100%;
}
.form-control:focus {
  border-color: #005aab;
  box-shadow: none;
  outline: 0 none;
}
.form-textarea {
  clear: both;
}
/* -------------------------
   11. Footer Bottom
----------------------------*/
.footer-shadow {
  box-shadow: 0px 10px 15px #000;
  background: #fff;
}
.footer-area .social-rotate ul li a {
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 24px;
  height: 45px;
  line-height: 45px;
  margin-right: 40px;
  text-align: center;
  transform: rotate(-45deg);
  transition: all 0.3s ease 0s;
  width: 45px;
}
.footer-area .social-rotate ul li a:hover {
  background: #005aab none repeat scroll 0 0;
  border-color: #005aab;
}
.fotter-copyright p {
  font-size: 13px;
  font-weight: 400;
  margin-bottom:0
}
.fotter-copyright p a {
  color: #005aab;
}
/* -------------------------
   12. Home Two Css
----------------------------*/
/* -------------------------
   13. About Us
----------------------------*/
.aboutus-area {
	
}
.specialty-single.two {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #ddd;
  border-style: solid solid solid none;
  border-width: 1px 1px 1px 0;
  float: left;
  padding: 70px 80px;
  width: 25%;
}
.specialty-single.two .icon-titel i {
  margin: 0;
}
.specialty-single.two .spe-discribe > p {
  padding-right: 0;
}
.read-more-btn > a {
  color: #005aab;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 25px;
  text-transform: uppercase;
  transition:.3s;
  border: 1px solid #005aab;
}
.read-more-btn > a:hover,.newsletter-form > button:hover,.contact-button button:hover,
.form-button button:hover{background:#005aab; color: #fff}
/* -------------------------
   14. Our Successful
----------------------------*/
.successful-single {
  padding: 80px 0;
}
.sucs-count {
  display: block;
}
.sucs-count h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.sucs-count h3 span {
  color: #005aab;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}
.sucs-icon a {
  display: block;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.3s ease 0s;
}
.sucs-icon a i {
  color: #fff;
  font-size: 35px;
  line-height: 60px;
  padding: 0;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 100%;
}

/* -------------------------
   15. Our Service
----------------------------*/
.srvc-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
.srvc-content > h6 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  transition:.3s;
}
.srvc-content > p {
  margin: 0;
}
.ourservice-single a {
  border: 1px solid #ddd;
  display: block;
  height: 72px;
  line-height: 72px;
  margin: 0 auto;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 72px;
}
.ourservice-single a i {
  color: #666666;
  font-size: 35px;
  height: 100%;
  line-height: 75px;
  padding: 0;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 100%;
}
/* -------------------------
   16. Team See Our Portfolio
----------------------------*/
.team-our-portfolio h4 {
  color: #fff;
  font-size: 24px;
  margin: 0;
}
.teambutton-one {
  display: inline-block;
  margin-right: 30px;
  margin-top: 35px;
}
.teambutton-one > a {
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  padding: 10px 20px;
  transition:.3s;
}
.teambutton-one > a:hover{background:#fff;color:#757575;}
/* -------------------------
   17. Latest Shot/Portfolio Css
----------------------------*/
.latestshot-menu li {
  border: medium none;
  color: #383838;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  margin-left: 0;
  padding: 10px 25px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}
.latestshot-menu li.active, .latestshot-menu li:hover {
  border-bottom: 1px solid #005aab;
}
.latestshot-content .grid-sizer,
.latestshot-content .grid-item { width: 33.33%; }
/* Massonary 2 columns */
.latestshot-content .grid-item--width2 { width: 50%; }
.portfolio-image > a,.single-portfolio,.effect-titel {
  display: block;
  overflow: hidden;
  position: relative;
  transition:.7s;
}
.effect-titel {
  background: rgba(3, 169, 244, 0.6) none repeat scroll 0 0;
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.4s ease 0s;
  visibility: hidden;
  width: 100%;
  padding-top: 42%;
}
.effect-titel.two{padding-top:22%;}
.effect-titel.three{padding-top:16%;}
.effect-titel > a {
  background: #005aab none repeat scroll 0 0;
  border-radius: 5px;
  display: block;
  height: 45px;
  line-height: 45px;
  margin: 0 auto 22px;
  transform: rotate(45deg);
  width: 45px;
}
.effect-titel a i {
  color: #fff;
  font-size: 25px;
  padding: 10px;
  transform: rotate(138deg);
}
.effect-titel h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}
.effect-titel > p {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  text-transform: capitalize;
}
.image-effect:hover .effect-titel{
  opacity:1;
  visibility:visible;
}
.hover-style:hover::before {
  opacity: 0.6;
}
.single-portfolio > a img {
  transition: .7s;
  transform: scale(1);
}
.portfolio-image a > img {
  transition: .7s;
  transform: scale(1);
}
.single-portfolio:hover > a img,.image-effect:hover .portfolio-image a > img{transform: scale(1.1);}
.hover-style::before {
  background: #005aab none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease-in-out 0s;
  width: 100%;
  z-index:9;
}
.portfolio-title {
  left: 0px;
  opacity: 0;
  padding: 35px 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s ease 0s;
  z-index: 99;
}
.single-portfolio:hover .portfolio-title {
  opacity: 1;
  color:#383838;
}
.portfolio-title h3 a:hover{color:#383838;}
.portfolio-title h3 {
  font-size: 19px;
  font-weight: 500;
  transition: all 0.4s ease-in-out 0s;
  transform: translatey(-20px);
  color:#fff;
  margin: 5px 0;
}
.single-portfolio:hover .portfolio-title h3{transform: translatey(1px);}
.single-portfolio:hover .portfolio-title span{transform: translatey(1px);}
.portfolio-title span {
  color: #fff;
  display: inline-block;
  font-siz
  e: 15px;
  line-height: 16px;
  transition: all 0.4s ease-in-out 0s;
  transform: translatey(20px);
}

/* -------------------------
   18. Our Team
----------------------------*/
.team-single{
  display: block;
  position: relative;
  overflow:hidden;
}
.team-details {
  background: rgba(3, 169, 244, 0.6) none repeat scroll 0 0;
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.4s ease 0s;
  visibility: hidden;
  width: 100%;
}
.team-adrs h5 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
.team-adrs > p {
  color: #fff;
  margin: 0;
}
.team-socaladrs ul li{color:#fff;}
.team-socaladrs ul li a {
  color: #fff;
  font-size: 16px;
  padding: 5px;
}
.team-socaladrs ul li a:hover{color: #005aab;}
.team-single:hover .team-details {
  opacity: 1;
  visibility: visible;
}
.team-single > img {
  transform: scaleY(1);
  transition: all 0.7s ease 0s;
}
.team-single:hover > img{transform: scale(1.1);}
/* -------------------------
   19. Skill Progress
----------------------------*/
.skill {
  padding-top: 16px;
}
.skill-area > h4 {
  color: #383838;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.skill-content {
    overflow: hidden;
    padding-top: 40px;
}
.skill .progress-bar {
  background-color: #005aab;
  box-shadow: none;
  position: relative;
}
.skill .progress .lead {
  color: #333;
  font-size: 14px;
  font-weight: 400;
  left: 0;
  position: absolute;
  text-transform: uppercase;
  top: -25px;
  width: 100%;
  z-index: 99;
}
.skill .progress .lead span {
  float: right;
  text-align: right;
}
.skill .progress {
  background-color: #eeeeee;
  border-radius: 0;
  box-shadow: none;
  height: 10px;
  margin-bottom: 62px;
  overflow: visible;
  position: relative;
}
.skill .progress-bar::after {
  background: #fff none repeat scroll 0 0;
  border: 3px solid #005aab;
  border-radius: 30px;
  content: "";
  height: 25px;
  position: absolute;
  right: -5px;
  top: -8px;
  width: 25px;
}
.skill .progress-bar > span {
  color: #767676;
  float: right;
  font-size: 14px;
  margin-top: -25px;
  position: relative;
}
.skill .progress:last-child {
  margin-bottom: 8px;
}
.single-skill {
  float: left;
  width: 50%;
}
.skill-titel p {
  margin-bottom: 0;
  margin-top: -29%;
}

/* -------------------------
   21. Blog Style
----------------------------*/
.style-two .blog-content {
  border: none;
}
.style-two > h6 {
  margin-bottom: 25px;
  margin-left: 25px;
  margin-top: 25px;
}
.post-content > p {
  display: block;
  margin: 20px 0;
  overflow: hidden;
}
.post-btn a {
  color: #005aab;
  font-size: 14px;
}
.post-btn a:hover {
  color: #999;
}
.post-btn a i {
  margin-left: 5px;
}
/* -------------------------
   22. Our Client
----------------------------*/
.client-content {
  border-radius: 5px;
  display: block;
  margin-bottom: 60px;
  overflow: unset;
  padding: 58px 100px 100px;
}
.client-content span i {
  font-size: 50px;
  margin-bottom: 17px;
}
.client-content > p {
  margin-bottom: 26px;
  padding: 0 7%;
}
.client-adrs > h6 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.client-adrs > p {
  color: #fff;
}
.client-img {
  bottom: 0;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
}
.our-client .owl-theme .owl-controls {
  margin-top: 55px;
  text-align: center;
}
.our-client .owl-theme .owl-controls .owl-page span {
  background: #869791 none repeat scroll 0 0;
  border-radius: 0;
  display: block;
  height: 3px;
  margin: 5px 7px;
  opacity: 0.5;
  width: 40px;
  margin-bottom: 0;
}
.our-client .owl-theme .owl-controls .owl-page.active span,.our-client .owl-theme .owl-controls.clickable .owl-page:hover span {
  background: #005aab none repeat scroll 0 0;
  opacity: 1;
}
.our-client-single {
  padding-left: 15px;
  padding-right: 15px;
}
/* -------------------------
   23. Footer Style Two
----------------------------*/
.footer-menu h6 {
  color: #fff;
  display: block;
  font-size: 18px;
  margin-bottom: 18px;
  overflow: hidden;
}
.contact-details ul li{margin-bottom:20px;}
.contact-details ul li:last-child,.recent-post ul li:last-child,.quick-link ul li,.project-information ul li:last-child{margin:0;}
.contact-details ul li a {
  border: 1px solid #fff;
  color: #fff;
  display: inline-block;
  float: left;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  margin-right: 20px;
  margin-top: 10px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 30px;
}
.contact-details ul li:hover a {
  background: #fff none repeat scroll 0 0;
  color:#383838;
}
.contact-details p {
  color: #cccbcb;
  display: block;
  margin: 0;
  overflow: hidden;
}
.recent-post img {
  float: left;
  margin-right: 15px;
}
.recent-post ul li {
  margin-bottom: 30px;
  width: 100%;
}
.recent-post ul li h5 {
  color: #cccccc;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  margin: 0;
  overflow: hidden;
}
.recent-post ul li h5 a,.footer-copyright > p a{color:#005aab;}
.recent-post ul li span {
  color: #cccccc;
  font-size: 14px;
}
.quick-link ul li {
  display: block;
  padding-bottom: 10px;
}
.quick-link ul li a {
  color: #cccccc;
  display: block;
  padding-left: 20px;
  position: relative;
}
.quick-link ul li:hover a{color:#005aab;}
.quick-link ul li a::after {
  background: #cccccc none repeat scroll 0 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 5px;
}
.quick-link ul li:hover a::after{color:#005aab;background: #005aab;}
/* News Letter Form*/
.newsletter > p {
  color: #cccccc;
  margin-bottom: 28px;
}
.newsletter-form input {
  background: #fff none repeat scroll 0 0;
  border: medium none;
  border-radius: 0px;
  box-shadow: none;
  color: #999999;
  font-size: 12px;
  height: 40px;
  padding-left: 20px;
  width: 100%;
  margin-bottom:34px;
}
.newsletter-form > button {
  background: #1e8bc3 none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 15px 30px;
}
.footer-copyright > p {
  font-size: 13px;
  margin: 0;
}
/*Mail Chimp */
.mailchimp-alerts {
  padding: 10px 0;
}
.mailchimp-submitting{color:#31708f}
.mailchimp-success{color:#3c763d;}
.mailchimp-error{color:#a94442;}
/* -------------------------
   24. About Us Page
----------------------------*/
.breadcrumb-list ul li{font-weight:700;}
.breadcrumb-list ul li.active{color:#005aab;}
.breadcrumb-list .divider {
  padding:  0 5px;
}
.video-content.two > h6 {
  font-size: 20px;
}
.video-content.two > h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}
.mission-vission .video-content h6 {
  font-size: 24px;
}
.about-menu ul li {
  display: block;
  overflow: hidden;
  padding-bottom: 5px;
  padding-left: 15px;
  position: relative;
}
.about-menu ul li::after {
  border: 1px solid #999999;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 5px;
}
.choose-us .icon-titel h6 {
  padding-left: 4%;
}
.choose-us  .spe-discribe > p {
  padding-right: 32%;
}

.two .help-contact-area {
  margin-top: -18.8%;
  width: 100%;
}
.two .section-title h1 {
  text-transform: capitalize;
  font-size: 24px;
}
.two .form-group {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 35px;
}
.contact-button button {
  background: #005aab none repeat scroll 0 0;
  border: medium none;
  border-radius: 0px;
  box-shadow: none;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  left: 0;
  margin: 0 auto;
  padding: 12px 40px;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  display: block;
}
/* -------------------------
   25. Contact Us Page
----------------------------*/
.cntct-right-adrs .section-title h4::before,.comments-box .section-title h4::before{
  left: 0;
  right: 0;
  margin:0;
}
.cntct-right-adrs .section-title h4::after,.comments-box .section-title h4::after{
  left: 15px;
  right: 0;
  margin:0;
}
.adrs-details ul li {
  margin-bottom: 30px;
  width: 100%;
}
.adrs-details ul li a {
  border: 1px solid #ddd;
  color: #666666;
  display: inline-block;
  float: left;
  font-size: 20px;
  height: 38px;
  line-height: 38px;
  margin-right: 20px;
  margin-top: 10px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 38px;
}
.adrs-details ul li:hover a {
  background: #005aab none repeat scroll 0 0;
  color: #fff;
  border-color:#005aab;
}
.adrs-details p {
  color: #606060;
  display: block;
  line-height: 24px;
  margin: 0;
  overflow: hidden;
  padding-right: 35%;
}
p.form-messege {
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 0;
  margin: 0;
}
p.success {
  color: green;
}
p.error {
  color: red;
}
/* -------------------------
   26. Portfolio Details Page
----------------------------*/
.portfolio-titel h4 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
.project-details {
  float: left;
  padding: 100px 70px 100px 100px;
  width: 50%;
}
.project-details > h5 {
  color: #fff;
  font-weight: 700;
  margin: 0 0 20px;
}
.project-information ul li {
  display: block;
  font-weight: 400;
  margin-bottom: 24.5px;
}
.project-information ul li span {
  font-size: 14px;
  font-weight: 600;
}

/* -------------------------
   27. Pagination Count css
----------------------------*/
.pagination-count ul li a {
  border: 1px solid #ddd;
  color: #666666;
  display: block;
  font-size: 13px;
  font-weight: 400;
  height: 30px;
  line-height: 28px;
  margin-right: 10px;
  text-align: center;
  width: 30px;
}
.pagination-count ul li {
  padding-right: 5px;
}
.pagination-count ul li:last-child {
  padding: 0;
}
.pagination-count ul li a i{font-size: 16px;font-weight:bold;}
.pagination-count ul li a:hover{background:#005aab;color:#fff;border-color:#005aab;}
/* -------------------------
   28. Blog Details Page
----------------------------*/
.blogdetails-titel {
  height: 90px;
  padding-left: 100px;
}
.blogdetails-titel > span {
  background: #005aab none repeat scroll 0 0;
  color: #fff;
  float: left;
  font-size: 18px;
  font-weight: 900;
  height: 100%;
  line-height: 90px;
  margin-right: 30px;
  text-align: center;
  text-transform: uppercase;
  width: 200px;
}
.blogdetails-titel > h4 {
  color: #383838;
  font-size: 24px;
  font-weight: 700;
  line-height: 90px;
  text-transform: uppercase;
  margin:0;
}
.blog-discribe-area {
  padding: 0 100px 100px;
}
.dicrobe-content {
  box-shadow: 2px 2px 8px 8px #ddd;
  padding: 25px 70px 100px;
}
.dicrobe-content blockquote {
  background: #fbfbfb none repeat scroll 0 0;
  border-left: 0 none;
  font-size: 17.5px;
  margin: 37px 0;
  padding: 35px 40px;
}
.dicrobe-content blockquote p {
  color: #666666;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
}
.dicrobe-content blockquote p i {
  color: #005aab;
  padding: 0 10px;
}
/*Blog Social*/
.blog-social {
  background: #fbfbfb none repeat scroll 0 0;
  height: 50px;
  margin-bottom: 60px;
  margin-top: 60px;
  padding: 0 20px;
}
.blog-social > p {
  display: inline-block;
  float: left;
  line-height: 50px;
  margin: 0;
  text-align: left;
}
.blog-social > ul {
  line-height: 50px;
  text-align: right;
}
.blog-social ul li a {
  color: #666666;
  font-size: 10px;
  padding: 16px 5px;
}
.blog-social ul li a:hover{color:#005aab;}
.comments-box.two .section-title h4,.comments-box.three .section-title h4{
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
}
/* Comment Author */
.comment-pic {
  display: inline-block;
  float: left;
  margin-right: 30px;
  overflow: hidden;
}
.comment-author {
  display: block;
  overflow: hidden;
}
.comment-author h3 {
  color: #383838;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
  text-transform: uppercase;
}
.comment-author > p {
  color: #999999;
  float: left;
  font-size: 12px;
  margin: 0 0 8px;
}
.comment-author > a {
  background: #005aab none repeat scroll 0 0;
  border-radius: 20px;
  color: #fff;
  float: right;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  margin-top: -12px;
  text-align: center;
  width: 30px;
}
.comment-dis {
  display: block;
  margin: 0 0 10px;
  overflow: hidden;
}
.three .form-group {
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 8px;
}
/* -------------------------
   29. 404 Page
----------------------------*/
.four-zero-content h2 {
  color: #333333;
  font-size: 70px;
  font-weight: 800;
  text-transform: uppercase;
  margin:0;
}
.four-zero-content h3 {
  color: #333333;
  font-size: 60px;
  font-weight: 500;
  text-transform: uppercase;
  margin:0;
}
.four-zero-content.text-center > p {
  padding: 50px 0;
  margin:0;
  font-size: 18px;
}
.four-zero-content h2 span {
  color: #005aab;
}
.four-zero-content a {
  background: #333333 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-weight: 500;
  padding: 12px 30px;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
}
.four-zero-content a:hover {
  background: #005aab none repeat scroll 0 0;
  color:#fff;
}
/* -------------------------
   30. ScrollUp
----------------------------*/
#scrollUp {
    background: #005aab none repeat scroll 0 0;
    bottom: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    color: #fff;
    font-size: 25px;
    height: 30px;
    line-height: 27px;
    position: fixed;
    right: 7px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 30px;
    z-index: 200
}
#scrollUp:hover{background:#383838;}
/* -------------------------
   31. Style Customizer css
----------------------------*/
.boxed-layout.wrapper {
  background-color: #fff;
  box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
  margin: auto;
  position: relative;
  max-width: 1240px;
  width: 100%;
}
.boxed-layout .sticky, .box-layout .sticky {
  left: auto;
  margin: auto;
  width: 1240px;
}
/*Background Patterns*/

.intro-text {
  color: #fff;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size:36px;
}
.btn-primary-corp-big {
  background-color: #1e8bc3;
  border: medium none;
  border-radius: 0;
  color: #fff !important;
  font-weight: 600;
  height: 48px;
  line-height: 48px;
  padding: 0 25px;
  text-transform: uppercase;
  transition:.4s;
}
.btn-primary-corp-big:hover, .btn-primary-corp-big:focus, .btn-primary-corp-big:active {
  background-color: #3498db;
  color: #fff;
}
.btn-primary-corp-big i {
  margin-right: 5px;
}
.lead {
  color: #fff;
  font-size: 21px;
  margin: 0;
  margin-bottom: 30px;
}

.jlr {font-size: 0;}

.jlr_img{
  margin-bottom: 10px;
}

.jlr img.jlr_loaded {
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
    opacity: 1;
}

.gray_out {
    background-color: #eee;
}

.slder-cps {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.section-title {
    margin-bottom: 25px;
}

/*Our Protfolio isotop*/
.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group {
  margin-bottom: 20px;
}

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  /*float: left;*/
  border-radius: 5px;
  margin-left: 0;
  margin-right: 1px;
  width: 140px;
  margin-bottom: 10px;
}


/* ---- isotope ---- */


/* ---- .element-item ---- */
/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
  width: 33.333%;
  position: relative;
  overflow: hidden;
}
.grid-item {
  float: left;
  border: 10px solid transparent;
}
.grid-item img {
  display: block;
  max-width: 100%;
  border-radius: 3px;
}
.port-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  border-radius: 3px;
  transition: .8s;
  transform: scale(0);
}
.grid-item:hover .port-overlay {
  transform: scale(1);
}
.port-icon-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11111;
}

.port-icon-area a {
  font-size: 15px;
  color: #fff;
  padding: 8px;
  display: inline-block;
  margin: 0 2px;
  border: 2px dashed #1191D0;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 20px;
}

.port-icon-area a:hover{
  background-color: #07507A;
  border-color: transparent;
  transition: .5s;
  border-radius: 3px;
  color: #ddd;
}


/*printing area*/
.btn-outline-primary {
  border-color: transparent;
  color: #383838;
}
.btn-outline-primary:hover {
  color: #fff;
}
.btn-outline-primary:focus {
  box-shadow: none;
}
.btn-outline-primary:active{
   background: #00000;
 }
/*payment area*/
.payment-system{
  border: 1px solid #000;
  padding: 10px;
}


.portfolio-details {
  width: 375px;
  display: table-cell;
  vertical-align: top;
  padding-left: 30px;

  /* div padding fix */
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

.portfolio-details h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: #4e4e4e;
  text-transform: uppercase;
}
.portfolio-tag {
  margin-top: 25px;
  padding-left: 25px;
  border-left: #36bfc4 solid 5px;

  /* div padding fix */
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

.portfolio-tag ul {
  list-style: none;
}

.portfolio-tag ul li {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  color: #36bfc4;
  text-transform: uppercase;
  margin-bottom: 13px;
}

.portfolio-tag ul li span{
  color: #7e7e7e;
  margin-left: 3px;
}

.show-img img{
    border-radius:3px;
}


/*modalcss*/
.modal{
  z-index: 99999;
}

.lb-caption{
    display:none;
}