/*
    
    Theme Name: SpiralLite
    Theme URI: https://pixelonetry.com/downloads/spiral-lite-one-page-one-page-wordpress-theme/
    Author: pixelonetry
    Author URI: https://pixelonetry.com/
    Description: SpiralLite is creative one page parallax WordPress theme for anyone. This theme can be used for creative, portfolio, agency or multipurpose website .This theme is perfect for any other categories as well and you can also modify it. the demo at https://demo.pixelonetry.com/spiral-lite-one-page/
	  Requires at least: 5.9
    Tested up to: 6.6
    Requires PHP: 7.4
    Version: 1.1.0
    License:  GNU General Public License version 3.0
    License URI: http://www.gnu.org/licenses/gpl-3.0.html
    Text Domain: spiral-lite-one-page
	Tags: editor-style, blog, custom-background, custom-logo, custom-menu, featured-images, footer-widgets, one-column, portfolio, right-sidebar, threaded-comments, translation-ready, two-columns, four-columns, wide-blocks, full-width-template, sticky-post, theme-options, block-styles, block-patterns 

*/

/*------------------------------------------------------------------
Main Color: #5aa9ce
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TABLE OF CONTENTS]

	1. CSS Reset    
    2. Bootstrap fix for WinPhone 8 and IE10    
    3. Main Elements    
    4. Typography	
    5. Basic Styles		
        5.1. Hover Overlay
		5.2. Seperator		
        5.3. Buttons
        5.4. Forms	
        5.5. Preloader
        5.6. Spacer
        5.7. Scroll Bar
        5.8. Hover Effect
    6. Isotope Transitions
	7. Header
        7.1. Mobile Navigation
	8. Hero Section
	9. Basic Section Styles

	10. About Section	
    11. Call to Action
	12. Services Section
	13. Counters	
    14. Portfolio Section        
        14.1. Filter         
        14.2. Portfolio Item	
    15. Clients	
    16. New Feature Section	
    17. Testimonials		
        17.1. Flexslider
	18. Team Section		
		18.1. Social Icons Hover
	19. Pricing Section
    20. Contact Section		
        20.1. Contact Form	
    21. Blog
    22. Pagination
    23. Sidebar
    24. Comments
    25. Footer		
        25.1. Newsletter Form
		25.2. Footer Social Icons
        25.3. Copyright 
        25.4. Scroll Up
    26. Responsive CSS
		

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

/*------------------------------------------------------------------
1. CSS Reset
-------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*------------------------------------------------------------------
2. Bootstrap fix for WinPhone 8 and IE10
-------------------------------------------------------------------*/

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }  

/*------------------------------------------------------------------
3. Main Elements
-------------------------------------------------------------------*/
/*@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Oranienbaum&family=Oswald:wght@200..700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');*/
body {
    font: 16px/32px "Lora", Helvetica, Arial, sans-serif;
    line-height: 1; 
    -webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
    background: #ffffff;
    overflow-x: hidden; 
    color: #808080;  
}

/*------------------------------------------------------------------
4. Typography
-------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { 
    font-family: "Oranienbaum", Helvetica, Arial, sans-serif;
}
h1 {
	font-size: 50px;
	line-height: 62px;
    font-weight: 400;
    color: #515151;
	letter-spacing: 0.10em;
    margin-bottom: 20px;
}
h2 {
	font-size: 34px;
	line-height: 40px;
	font-weight: 300;
    color: #7e7e7e;
    letter-spacing: 0.10em;
	margin-bottom: 20px;
}
h3 {
	font-size: 26px;
	line-height: 40px;
	font-weight: 300;
    color: #292929;
    margin-bottom: 20px;
}
h4 {
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
    margin-bottom: 20px;
}
p {
    font-size: 16px;
	line-height: 42px;
}
.entry-summary p {
   font-size: 18px;
   line-height: 36px;  
  /* margin-bottom: 60px;*/
}
a { 
    color: #5aa9ce;
   /* text-decoration: underline; */
    -webkit-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease;
	   -moz-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease;
	    -ms-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease;
	     -o-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease;
	        transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease; 
}
a:hover {  
    text-decoration: none; 
    outline: none;     
}
em {
	font-style: italic;
}
strong { 
    font-weight: 600;
    color: #5aa9ce;
}
/*------------------------------------------------------------------
5. Basic Styles
-------------------------------------------------------------------*/
.text-left {
	text-align: left !important;
}
.text-right { 
	text-align: right !important;
}
.text-center {
	text-align: center!important;
}
.float-left {
	float: left;
}
.float-right {
	float: right;
}
.left-margin {
	margin-left: 80px;
}
.right-margin {
	margin-right: 80px;
}
.top-margin {
	margin-top: 80px;
}
.bottom-margin {
	margin-bottom: 80px;
}
.animated {
	visibility: hidden;
}
.visible {
	visibility: visible;
}
.parallax {
	width: 100%;
	background-attachment: fixed;
	background-position: 50% 0;
}
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
.container-full {
  margin: 0 auto;
  width: 100%;
}
/*------------------------------------------------------------------
5.1. Hover Overlay
-------------------------------------------------------------------*/
.overlay {
    position: relative;
    overflow: hidden;
}
.overlay img {
    -webkit-transition: all 900ms;
	-moz-transition: all 900ms;
	-o-transition: all 900ms;
    -ms-transition: all 900ms;
	transition: all 900ms;
}
.overlay:hover img {
     -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
	-o-transform: scale(1.3);
    transform: scale(1.3);
}
.overlay .overlaycolor {
   	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 0;
    filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}	
.overlay:hover .overlaycolor {
	opacity: 1;
    filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}	
.overlay span {
	width: 100%;
	height: 100%;
	position: absolute;
    background-color: #000000;
    opacity: 0.4;
}
/*------------------------------------------------------------------
5.2. Seperator
-------------------------------------------------------------------*/
.seperator {
	line-height: 0px;
	padding: 8px 0;
}
.seperator span {
    width: 100px;
	height: 2px;
	background: #000000;
	display: inline-block;
	opacity: 0.3; 
}
.color-light .seperator span { 
    background: #ffffff; 
    opacity: 0.7;
}
.seperator.full span { width: 100%; }
.seperator.medium span { width: 220px; }
.seperator.small span { width: 100px; }
.seperator.mini span { width: 40px; }

.seperator.height-1px span { height: 1px; }
.seperator.height-2px span { height: 2px; }
.seperator.height-3px span { height: 3px; }
/*------------------------------------------------------------------
5.3. Buttons
-------------------------------------------------------------------*/
.btn {
    font-family: "Oranienbaum", Helvetica, Arial, sans-serif;
    padding: 15px 50px;
    line-height: 16px;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 5px;
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    -webkit-transition: All 200ms linear;
	-moz-transition: All 200ms linear;
	-ms-transition: All 200ms linear;
	-o-transition: All 200ms linear; 
    transition: All 200ms linear;
}
.btn:hover {
    color: #fff;
}
.btn-small {
    padding: 8px 16px;
}
.btn-medium {
    padding: 10px 20px;
}
.btn-large {
    padding: 15px 40px;
    font-size: 16px;
}
.btn-big {
    padding: 18px 45px;
    font-size: 18px;
}
.btn-outline-light {
    background: transparent;
    color: rgba(255,255,255,0.8);
    border: 2px solid rgba(255,255,255,0.3);
}
.btn-outline-light:hover {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.90); 
    color: #fff;
}
.btn-outline {
    background: transparent;
    color: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(102, 102, 102, 0.5);
}
.btn-outline:hover {
    border: 2px solid rgba(102, 102, 102, 0.90); 
    color: #000000;
}
.btn-contour {
    background-color: #5aa9ce;
}
.btn-contour:hover {
    opacity: 0.8;
}
/*------------------------------------------------------------------
5.4. Forms
-------------------------------------------------------------------*/
/*input, textarea, select {
    font-weight: 300;
    height: auto;
    max-width: 100%;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
    color: #475996;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	-webkit-transition: background-color .3s ease, border .3s ease, color .3s ease;
	-moz-transition: background-color .3s ease, border .3s ease, color .3s ease;
	-ms-transition: background-color .3s ease, border .3s ease, color .3s ease;
	-o-transition: background-color .3s ease, border .3s ease, color .3s ease;
	transition: background-color .3s ease, border .3s ease, color .3s ease;
    margin-bottom: 25px;
}*/
.wpcf7-form input::-webkit-input-placeholder, .wpcf7-form textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { color: #666; font-family: "Playfair Display", Helvetica, Arial, sans-serif; }
.wpcf7-form input::-moz-placeholder, .wpcf7-form textarea::-moz-placeholder, input::-moz-placeholder { color: #666; font-family: "Playfair Display", Helvetica, Arial, sans-serif; }
.wpcf7-form input:-ms-input-placeholder, .wpcf7-form textarea:-ms-input-placeholder, input:-ms-input-placeholder { color: #666; font-family: "Playfair Display", Helvetica, Arial, sans-serif;}
.wpcf7-form input.placeholder, .wpcf7-form textarea.placeholder, input.placeholder { color: #666; font-family: "Playfair Display", Helvetica, Arial, sans-serif; }
/*------------------------------------------------------------------
5.5. Preloader
-------------------------------------------------------------------*/
.preloader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  z-index: 999999;
}

#preloader {
  position: fixed;
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  z-index: 999999;
}

#preloader-status {
  display: table-cell;
  vertical-align: middle;
}

.preloader-position {
  position: relative;
  margin: 0 auto;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.loader {
  position: relative;
  width: 45px;
  height: 45px;
  left: 50%;
  top: 0;
  margin-left: -22px;
  margin-top: 2px;
  -webkit-animation: rotate 1s infinite linear;
          animation: rotate 1s infinite linear;
  border: 3px solid;
  border-color:rgb(90, 169, 206, 0.15); 
  border-radius: 50%;
}

.loader span {
    position: absolute;
    width: 45px;
    height: 45px;
    top: -3px;
    left: -3px;
    border: 3px solid transparent;
    border-top: 3px solid;
    border-top-color: rgba(90, 169, 206, 0.75); 
    border-radius: 50%;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*------------------------------------------------------------------
5.6. Spacer
-------------------------------------------------------------------*/
.spacer { 
    width:100%;
    display:block
  }
  .spacer.spacerhalf {
    height:5px 
  }
  .spacer.spacer1 {
    height:10px 
  }
  .spacer.spacer2 {
      height:20px
  }
  .spacer.spacer3 {
      height:30px 
  }
  .spacer.spacer4 {
        height:40px
  }
  .spacer.spacer5 {
    height:50px
  }
  .spacer.spacer6 {
    height:60px
  }
  .spacer.spacer7 {
    height:70px
  }
  .spacer.spacer8 {
    height:80px
  }
  .spacer.spacer9 {
    height:90px
  }
  .spacer.spacer10 {
    height:100px
  }
/*------------------------------------------------------------------
5.7. Scroll Bar
-------------------------------------------------------------------*/
  ::-webkit-scrollbar {
    width:12px
}
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); 
    -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.3); 
    box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb { 
   background:rgba(210,210,210,.8); 
   -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5);
    -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.5); 
    box-shadow:inset 0 0 6px rgba(0,0,0,.5); }
::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(210,210,210,.4) 
}
/*-------------------------------------------------------
5.7. Hover Effects
-------------------------------------------------------*/
.post-hover-effect {
  margin-bottom: -2.5px!important;
  position: relative;
}
.post-hover-effect::before,
.post-hover-effect::after {
  background-color: #fffefd;
  content: "";
  /*background: #000;*/
  height: 0;
  width: 0;
  z-index: 1;
  position: absolute;
  -webkit-transition-duration: 1.3s;
  -o-transition-duration: 1.3s;
  transition-duration: 1.3s;
  margin-bottom: -2.5px!important;
}
.post-hover-effect::before {
  right: 0;
  opacity: 1;
  top: 0;
}
.post-hover-effect::after {
  bottom: 5px;
  opacity: .7;
  left: 0;
}
.post-hover-effect:hover::after, .post-hover-effect:hover::before {
  background-color: #fff;
  bottom: 5px;
  height: 100%;
  opacity: 0;
  width: 100%;
}
/*------------------------------------------------------------------
6. Isotope Transitions
-------------------------------------------------------------------*/
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}
/*------------------------------------------------------------------
7. Header
-------------------------------------------------------------------*/
.navbar {
    font-family: "Oranienbaum", Helvetica, Arial, sans-serif;
    position: absolute;
    padding: 0;
    margin: 0;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid rgba(168, 122, 122, 0.1);
    z-index: 100;
    min-height: 75px;
  }

  .navbar .navbar-nav li a {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    padding: 15px 7px;
    margin: 10px;
  }

  .navbar .navbar-nav li > a i {
    color: #5aa9ce;
    margin-right: 8px;
   } 
  
   .navbaroverlay .navbar-toggler i {
    color: #fff;
   }
   .nav-scroll .navbar-toggler i {
    color: #111;
   }
  .navbar .navbar-nav .dropdown-menu {
    padding: 10px 0;
    border: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    -webkit-transition: all .4s;
    transition: all .4s;
  }

  .dropdown:hover .dropdown-menu,
  .dropdown:hover .mega-menu {
      opacity: 1;
      visibility: visible;
      -webkit-transform: translateY(0);
      transform: translateY(0);
  }
  
  .navbar .navbar-nav .dropdown-menu li {
    padding: 10px 20px;
    position: relative;
    -webkit-transition: all .4s;
    transition: all .4s;
    font-size: 13px;
    opacity: .9;
  }

  .navbar .navbar-nav .dropdown-menu li a {
    color: #111111;
  }
  
  .navbar .navbar-nav .dropdown-menu li:hover {
    background: transparent;
    color: #5aa9ce;
  }
  
  .navbar .navbar-nav .dropdown-menu.show {
    top: 42.5px;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  
  .navbar .navbar-nav .dropdown-menu li::after {
    content: '';
    width: 0px;
    height: 1px;
    background: #5aa9ce;
    position: absolute;
    left: 10px;
    top: 50%;
    -webkit-transition: all .4s;
    transition: all .4s;
  }
  
  .navbar .navbar-nav .dropdown-menu li:hover {
    padding-left: 25px;
  }
  
  .navbar .navbar-nav .dropdown-menu li:hover::after {
    width: 10px;
  }
  
  .light, .nav-scroll {
    background: #fff;
    -webkit-box-shadow: 0px 10px 30px rgba(37, 37, 49, 0.1);
    box-shadow: 0px 10px 30px rgba(37, 37, 49, 0.1);
    padding: 0;
    position: fixed;
    top: -80px;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
  }
  
  .light .navbar-nav li a, .nav-scroll .navbar-nav li a {
    color: #111;
  }
  
  .light .navbar-nav .logo, .nav-scroll .navbar-nav .logo {
    width: 100px;
    padding: 15px 0;
    color: #111;
  }
  
  .light .social-icon, .nav-scroll .social-icon {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .light .social-icon a, .nav-scroll .social-icon a {
    color: #000;
  }
  
  .light .social-icon a, .nav-scroll .social-icon a:hover {
    color: #000;
  }
  
  .light .search, .nav-scroll .search {
    color: #000;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .navbar .social-icon {
    padding: 0 20px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .navbar .social-icon a {
    color: #333;
    margin: 0 10px;
    font-size: 13px;
  }
  
  .navbar .social-icon a:hover {
    color: #5aa9ce;
  }
  
  .navbar .search {
    color: #333;
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .navbar .search .icon {
    cursor: pointer;
  }
  
  .navbar .search .search-form {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(37, 37, 49, 0.98);
    display: none;
  }
  
  .navbar .search .search-form form {
    width: 600px;
    position: absolute;
    left: calc(50% - 300px);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  .navbar .search .search-form form input {
    padding: 15px 0;
    font-size: 80px;
    color: #fff;
    text-transform: uppercase;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #b19777;
  }
  
  .navbar .search .search-form .close {
    position: absolute;
    top: 20%;
    right: 20%;
    color: #fff;
    font-size: 60px;
    opacity: 1;
    cursor: pointer;
  }
  
  .navbar-expand-lg .navbar-nav > .active > a,
  .navbar-expand-lg .navbar-nav > .active > a:focus,
  .navbar-expand-lg .navbar-nav > .active > a:hover,
  .navbar-expand-lg .navbar-nav li > a:hover {
    color: #5aa9ce;
  }
  h3.test-logo {
    letter-spacing: 5px;
    margin-bottom: 0!important;
  }

.close-menu {
    display: none; /* Default to hidden */
    background-color: transparent; /* Transparent background */
    border: none; /* No border */
    font-size: 24px; /* Adjust font size */
    cursor: pointer; /* Change cursor to pointer */
    color: #333; /* Text color */
}
.close-menu:hover {
  color: #5aa9ce; /* Change color on hover */
}

/* Show close button on mobile devices */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    .close-menu {
        display: inline-block; /* Show close button on mobile */
        top: 10px; /* Adjust top position */
        right: 10px; /* Adjust right position */
        z-index: 1000; /* Ensure it’s above other content */
    }
}
/*------------------------------------------------------------------
7.1. Mobile Navigation
-------------------------------------------------------------------*/
@media only screen and (max-width: 992px) {
  .navbar {
    min-height: 60px;
  }
 .navbar .navbar-collapse {
    max-height: 600px;
    width: 100% !important;
    left: 0 !important;
    position: relative;
    overflow: auto;
    background: #f7f7f7;
    text-align: center;
    padding: 0 0;
}
.navbar .navbar-collapse {
     overflow-x: hidden;
  overflow-y: hidden;
  }
  .navbar .navbar-collapse li {
    padding: 15px 10px !important;
    border-bottom: 1px solid rgb(212, 210, 210);
    color: #666;
    text-transform: uppercase;
    text-align: center;
  }
  /*.navbar .navbar-collapse li a {
    margin-top: -30px!important;
    color: #111;
  }*/
  .navbar li a {
    margin: 55x auto !important;
  }
  .navbar .logo {
    margin-left: 15px;
    width: 50px;
  }
  .nav-scroll .navbar-collapse li a,
  .light .navbar-collapse li a {
    color: #111;
  }
  .nav-scroll .navbar-collapse .active,
  .light .navbar-collapse .active {
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .navbar .navbar-nav .dropdown-menu {
    opacity: 1;
    visibility: visible;
    display: none;
    background: #fff;
    text-align: center;
    color: #fff;
  }
  .navbar .navbar-nav .dropdown-menu li {
    color: #eee;
  }
  .navbar .navbar-nav .dropdown-menu.show {
    display: block;
  }
  .navbar .navbar-nav li a {
    padding: 0;
  }
  .light .social-icon,
  .nav-scroll .social-icon {
    padding: 20px!important;
  }
  .light .social-icon a,
  .nav-scroll .social-icon a {
    color: #222;
    text-align: center;
    margin-top: 15px;
}

.navbar .social-icon,
.navbar .search {
  border: 0;
  padding: 0;
  /*margin-top: 30px;*/
}

.navbar .search .search-form {
  display: block;
  position: static;
  height: auto;
}

.navbar .search .search-form form {
  position: static;
  width: 100%;
  -webkit-transform: none;
  transform: none;
}

.navbar .search .search-form form input {
  padding: 15px;
  width: 100%;
  font-size: 14px;
}

.navbar .search .icon,
.navbar .search .search-form .close {
  display: none;
}
}
/*------------------------------------------------------------------
8. Hero Section
-------------------------------------------------------------------*/
/*.hero {
  background-position: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}*/
.hero .block { 
    background-color: rgba(255, 255, 255, 0.9);
    padding: 82px 50px; 
    margin-top: 75.5px;
    letter-spacing: -0.05em;   
}
.hero .block h1 { 
    font-family: "Big Shoulders Display", Helvetica, Arial, sans-serif;
    line-height: 70px;
    color: #333;
    font-weight: 300;
    margin-bottom: 30px;
}
.hero .block h3 { 
    font-family: "Playfair Display", Helvetica, Arial, sans-serif;
    line-height: 45px;
    margin-bottom: 40px;
}
/*------------------------------------------------------------------
9. Basic Section Styles
-------------------------------------------------------------------*/
.section {
  background-color: #FFF; 
  padding: 80px 0; 
}
.section .title {
	text-transform: uppercase;
	letter-spacing: 0.10em;
    margin-bottom: 40px;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
}
.section h1.title span {
   color: #5aa9ce;
}
.section .subtitle {
	line-height: 48px;
}
.section .pretitle {
	margin-bottom: 40px;
}
.section .icon { 
    background-image: url(../images/section-title.png);
    background-repeat: repeat-x;
    background-position: center left;
    text-align: center;
    margin-bottom: 40px;
    color: #5aa9ce;
} 
.section .icon i {
    background-color: #fff;
    font-size: 40px;
    padding: 0 50px;
}
.section .seperator {
    margin-bottom: 20px;
}
/*------------------------------------------------------------------
10. About Section
-------------------------------------------------------------------*/
.block {
    margin-top: -10px;
}
/*.block h2 {
    font-family: "Lato", Helvetica, Arial, sans-serif;
}*/
.block h5 {
    margin-bottom: 0;
}
/*------------------------------------------------------------------
11. Call to Action
-------------------------------------------------------------------*/
.action { 
    text-transform: uppercase;
    padding: 40px 0;
}
.action h2 { 
    margin-top: 10px;
    font-size: 30px;
    color: #f0f0f0;
}
.action h2 span {
     color: #fff;
     font-weight: 700;                       
}
.action .left-margin { 
    margin-left: 5px;
}
/*------------------------------------------------------------------
12. Services Section
-------------------------------------------------------------------*/
.service-block {
    cursor: pointer;
}
.service-block .ibox {
    text-align: center;
    font-size: 22px;
    color: #fff;
}
.service-block .ibox i {
    background-color: #5aa9ce;
    color: #ffffff;
    width: 65px;
    height: 65px;
     -webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-o-border-radius: 100%;
    border-radius: 100%;
    line-height: 65px;
    font-size: 30px;
    margin-bottom: 100px
}
.service-block:hover .ibox i {
    background-color: #f0f0f0;
    color: #5aa9ce;
}
.service-block .tbox {
    overflow: hidden;
    padding: 0px 0px 0px 40px;
    margin-bottom: 20px;
}
.service-block .tbox h3 {
      margin-bottom: 0;
}
.service-block .tbox .seperator {
    margin-bottom: 0;
}
.service-block .tbox p {
    font-size: 16px;
    line-height: 24px;
}
/*------------------------------------------------------------------
20.1. Contact Form
-------------------------------------------------------------------*/
input, textarea, select p {
    font-size: 16px;
	line-height: 24px;
}
#form {
    margin-top: -30px;
}
.form-control {
    padding: 10px 15px;
    margin: 20px 0;
    background: #eeeeee;
	  border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
   -o-border-radius: 0;
    border-radius: 0;
}
.form-control:hover, .form-control:focus {
	background: #e7e7e7;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}
#btn-submit { 
    font-weight: 700;
    letter-spacing: 0.15em;
    width: 100%;
}
div.wpcf7-validation-errors {
    border: none !important;
}
div.wpcf7-mail-sent-ng {
    border: none !important; 
}
span.wpcf7-not-valid-tip {
    display: none !important;
}
#btn-submit { 
    font-weight: 700;
    letter-spacing: 0.15em;
    width: 100%;
}
/*.success {
   background-color: rgba(19, 207, 169, 0.7);
   padding: 10px;    
   text-align: center;
   color: #021410;
   margin-bottom: 25px;
}
.error {
   background-color: #df5e63;
   padding: 10px; 
   text-align: center;
   color: #5e1316;
   margin-bottom: 25px;
}*/
.error_message {
	display: block;
	padding: 5px;
	background: #fbe3e4;
	color: #8a1f11;
	border: 1px solid #fbc2c4;
}
.response_message {
	display: block;
	background-color: rgba(19, 207, 169, 0.7);
    padding: 10px;    
    text-align: center;
    color: #021410;
}
.hide {
	display: none;
}
/*------------------------------------------------------------------
21. Blog
-------------------------------------------------------------------*/
.parallax-blog {
    min-height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
  }
.blog .title { 
    margin-top: 25px; 
}
.blog .subtitle { 
    margin-bottom: 50px; 
}
.blog a.btn { 
    margin-top: 15px; 
}
section.blog {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #ffffff;
}
body.single-post .section.blog {
    padding: 80px 0;
}
section.blog .section-icon {
	margin-bottom: 100px;
}
.post {
	position: relative;
	margin-bottom: 80px;
	text-align: left;
}
.post hr {
	margin: 10px 0 20px 0;
}
.post .entry-title {
	width: 100%;
	display: inline-block;
    background: url(../images/background-title.png) left center repeat-x;
}
.post .entry-title h2 {
    background: #ffffff;
	float: left;
	padding-right: 30px;
	margin-bottom: 15px;
}
.post .entry-title h2 a {
	color: #262626;
}
.post .entry-title h2 a:hover {
	color: #5aa9ce;
}

.post {
	position: relative;
	/*margin-bottom: 80px;*/
	text-align: left;
}
.post hr {
	margin: 10px 0 20px 0;
}
.post .entry-title {
	width: 100%;
	display: inline-block;
    background: url(../images/background-title.png) left center repeat-x;
}
.post .entry-title h2 {
    background: #ffffff;
	float: left;
	padding-right: 30px;
	margin-bottom: 15px;
}
.post .entry-title h2 a {
	color: #262626;
}
.post .entry-title h2 a:hover {
	color: #5aa9ce;
}

.post .post-media img {
	width: 100%;
    height: 100%;
}
.post .post-meta {
	margin-bottom: 25px;
}
.post .entry-title h2 span {
    color: #5aa9ce;
}

.entry-footer {
    font-family: "Playfair Display", Helvetica, Arial, sans-serif;
	color: #333;
	font-size: 15px;
	line-height: 18px;
	margin-top: 2.1538461538em;
}

.entry-footer:empty {
	margin: 0;
}

.entry-footer a {
	color: #666;
}

.entry-footer a:hover,
.entry-footer a:focus {
	color: #5aa9ce;
}

.entry-footer > span:not(:last-child):after {
	content: "\002f";
	display: inline-block;
	opacity: 0.7;
	padding: 0 0.538461538em;
}

.entry-footer .avatar {
	height: 21px;
	margin: -0.1538461538em 0.5384615385em 0 0;
	width: 21px;
}

/*.post .entry-content {
	width: 100%;
	display: inline-block;
    background: url(../images/background-title.png) left center repeat-x;
}
.post .entry-content h2 {
    background: #ffffff;
	float: left;
	padding-right: 30px;
	margin-bottom: 15px;
}
.post .entry-content h2 a {
	color: #262626;
}
.post .entry-content h2 a:hover {
	color: #5aa9ce;
}*/
/*.entry-content {
	width: 100%;
	display: inline-block;
    background: url(../images/background-title.png) left center repeat-x;
}
.entry-content h2 {
    background: #ffffff;
	float: left;
	padding-right: 30px;
	margin-bottom: 15px;
}
.entry-content h2 a {
	color: #262626;
}
.entry-content h2 a:hover {
	color: #5aa9ce;
}*/
.post .post-media img {
	width: 100%;
    height: 100%;
}
.post .post-meta {
	margin-bottom: 25px;
}
.post .post-meta .post-meta-date,
.post .post-meta .post-meta-author,
.post .post-meta .post-meta-category,
.post .post-meta .post-meta-tags,
.post .post-meta .post-meta-comments {
	margin-right: 10px;
	display: inline-block;
	font-style: italic;
}
.post .post-meta a:hover {
	color: #212121;
}
.post .post-meta .post-meta-author {
	color: #333;
}
.post .post-meta i {
	margin-right: 5px;
	color: #666;
}
.post .post-media {
	margin-bottom: 20px;
}

.entry-meta {
	margin-bottom: 25px;
}

.blog .flex-control-paging li a.flex-active {
	background: #5aa9ce;
}
.post .post-body p {
	font-size: 14px;
	line-height: 30px;
    margin-bottom: 10px;
}
.post blockquote p {
	border-left: 1px solid #5aa9ce;
	font-size: 14px;
	line-height: 30px;
	font-style: italic;
	padding: 15px 20px 15px 20px !important;
	color: #111111;
	background: #ebebeb;
	margin: 20px 0;
}
.pager li>a, .pager li>span {
    padding: 8px 25px;
}
.pager a {
    padding: 10px 10px;
	background: #ebebeb !important;
}
.pager a:hover {
	background: #000000 !important;
	color: #ffffff;
}
.pager .disabled a {
	background: transparent !important;
}
.pager .disabled a:hover {
	background: transparent !important;
    color: #333;
}
.pager .previous {
	float: left;
}
.pager .next {
	float: right;
}

.post-navigation { 
  margin-bottom: 40px;
}
/* -------------------------------------------------------------
POST NAVIGATION
-------------------------------------------------------------- */
.nav-links {
display: flex;
align-items: center;
margin: 40px 0;
border: 1px solid #ddd;
border-style: solid none;
/*padding: 20px 0;*/
padding-top: 15px;
padding-bottom: 22px;
overflow: hidden;
}


/*
.post-navigation {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding: 20px 0 22px;
  overflow: hidden;
}
  */

.post-navigation .previous-post {
  float: left;
  width: 50%;
}

.post-navigation .next-post {
  float: right;
  width: 50%;
}


.next-post > a {
  float: right;
  width: 75px;
  margin-left: 18px;
}

.previous-post > a {
  float: left;
  width: 75px;
  margin-right: 18px;
}

.nav-subtitle {
  color: #666;
  font-size: 11px; 
  font-weight: 300; 
  letter-spacing: 2px;
  text-transform: uppercase; 
}

.nav-title {
  color: #333; 
  font-size: 14px; 
  font-weight: 600; 
  letter-spacing: 1px;
}
.nav-title:hover {
  color: #5aa9ce; 
}


.post-navigation span {
  display: block;
  padding-top: 12px;
  line-height: 2.2;
 /* font-size: 11px;
  letter-spacing: 1px;
  */
  font-weight: 600;
  text-transform: uppercase;
}

.post-navigation > div h5 {
  padding-bottom: 19px;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.post-navigation .previous-post  > div {
  float: left;
  text-align: left;
}

.post-navigation .next-post  > div {
  float: right;
  text-align: right;
}

/*------------------------------------------------------------------
22. Pagination
-------------------------------------------------------------------*/
.pagination span, .pagination a {
	float: left;
	margin: 2px 4px 2px 0;
	padding: 6px 20px;
	color: #666666;
	background: #c2c2c2;
}
.pagination span:hover, .pagination a:hover {
	background: #333333;
}
.pagination .page-info {	
	background: none;
	font-style: italic;
}
.pagination .page-info:hover {
	background: none;
}
.pagination .current {
	background: #5aa9ce;
	color: #ffffff;
}
.pagination .current:hover {
	background: #5aa9ce;
}

/* -------------------------------------------------
DF WordPress Navigation
----------------------------------------------------/*
/* Default WordPress */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  /*  margin: 0 0 2.5em; */
    overflow: hidden;
    font-size: 22px;
    font-family: "Playfair Display", Helvetica, Arial, sans-serif;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    margin-top: 10px;
    float: left;
    width: 50%;
    font-size: 22px;
    font-family: "Playfair Display", Helvetica, Arial, sans-serif;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    margin-top: 10px;
    float: right;
    text-align: right;
    width: 50%;
    font-size: 22px;
    font-family: "Playfair Display", Helvetica, Arial, sans-serif;
}


/*----------------------------------------
Single Author Info
------------------------------------------*/

/*.author-block {
  padding: 0 0 50px;
  border-bottom: 1px solid #d9dbde;
  margin: 0 0 51px;
}

.author-block .author-title {
  font: 32px/36px 'Oxygen', sans-serif;
  color: #252626;
  margin: 0 0 32px;
}

.author-block .author-holder {
  overflow: hidden;
}

.author-block .img-holder {
  float: left;
  margin-right: 20px;
}

.author-block .img-holder img {
  -webkit-border-radius: 200px;
  border-radius: 50%;
}

.author-block .text-holder {
  overflow: hidden;
}

.author-block .text-holder .author-name {
  font-size: 21px;
  line-height: 25px;
  font-weight: 600;
  color: #252626;
  margin: 0 0 19px;
  position: relative;
  padding: 0 0 14px;
}

.author-block .text-holder .author-name:after {
  width: 28px;
  height: 2px;
  position: absolute;
  left: 0;
  top: 100%;
  background: #8e8f91;
  content: '';
}*/

.author-post{
  display: flex;
  align-items: center;
  margin: 40px 0;
  border: 1px solid #ddd;
  border-style: solid none;
  padding: 20px 0;
  overflow: hidden;
}
.author-post .author-image{
  margin: 0 15px 0 0;
}
.author-post img{
  width: 50px;
}
.author-post a{
  color: #333;
}
.author-post a:hover{
  color: #5aa9ce;
}

/*------------------------------------------------------------------
23. Sidebar
-------------------------------------------------------------------*/

.widget-title {
    margin-top: 25px;
	  text-align: left;
	  text-transform: uppercase;
	  font-size: 18px;
    font-weight: 300;
    color: #333;
    margin-bottom: 0;
}

.widget-area {
    margin: 0 0 1.5em;
	text-align: left;
}

.widget {
    margin: 0 0 1.5em;
	text-align: left;
}
.widget select {
    max-width: 100%;
}
/*.widget h3 {
    margin-top: 25px;
	text-align: left;
	text-transform: uppercase;
	font-size: 18px;
    font-weight: 300;
    color: #333;
    margin-bottom: 0;
}*/
.widget_search #s { 
    width: 100%;
    font-weight: 300;
    font-size: 14px;
    background: #fff;
    border: 1px solid #d9d9d9;
    line-height: 18px;
    color: #999;
    padding: 10px 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3x;
    transition: all 200ms linear;
}
.widget_search #s:hover, .widget_search #s:focus {
	border: 1px solid #000000;
}
.widget_search input[type=submit] {
	display: none;
}
.widget_text {
   line-height: 22px !important;
}
.widget ul li {
   padding: 15px 0;
   border-bottom: 1px solid #d9d9d9;
   font-size: 16px;
   margin: 0;
}
.widget ul li a {
    color: #5aa9ce;
    line-height: 28px;
}
.widget ul li a:hover {
    opacity: 0.6;
}
.tagcloud a {
	border: 1px solid #d9d9d9;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 11px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -webkit-border-radius: 2px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-right: 3px;
}
.tagcloud a:hover {
	color: #ffffff;
	background: #5aa9ce;
}

/* Seach Widget */
.widget_search .search-form{
    display: flex;
  }
  .widget_search .search-form label{
    width: 100%;
  }
  .widget_search input.search-field {
    padding: 8px 5%;
    width: 100%;
    border-right: none;
    border: 1px solid #5aa9ce;
  }
  .widget_search input.search-field:active {
    outline: none;
  }
  .widget_search input.search-field:focus {
    outline: none;
  }
  .widget_search input.search-field:after {
    padding: 8px 5%;
    width: 100%;
    border-right: none;
    border: 1px solid #5aa9ce;
  }
  .widget_search input.search-submit {
    border: none;
    padding: 8px 5%;
    background: url(../images/search.png) center no-repeat;
    color: #fff;
    width: 22%;
    height: 10px;
    background-size: 25px;
    text-indent: -9999px;
    background-color: #5aa9ce; 
    padding: 20px;
    border-radius: 0;
    transition: all 0.2s ease-in-out;
  }
  .widget_search input.search-submit:hover{
    background-color: rgba(90, 169, 206, 0.695);
  }
  #search-submit__button {
    width: 24%;
  }
  
  /*new update search widget*/
  .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
  .wp-block-search .wp-block-search__input{
    width: 100%;
    display: inline-block;
    position: relative;
    border-right: none;
    border: 1px solid #5aa9ce;
  }
  .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus,
  .wp-block-search .wp-block-search__input:focus{
    outline: none;
  }
  .wp-block-search .wp-block-search__button{
    border: none;
    padding: 8px 5%;
    background: url(../images/search.png) center no-repeat;
    color: #fff;
    width: 30%;
    height: 10px;
    background-size: 25px;
    text-indent: -9999px;
    background-color: #5aa9ce; 
    padding: 20px;
    border-radius: 0;
    transition: all 0.2s ease-in-out;
  }
  .wp-block-search .wp-block-search__button:hover{
    background-color: rgba(90, 169, 206, 0.695);
  }
  .wp-block-search__label {
    font-family: "Playfair Display", Helvetica, Arial, sans-serif;
    color: #333;
    font-size: 16px;
    margin-bottom: 15px;
  }

/*------------------------------------------------------------------
24. Comments
-------------------------------------------------------------------*/
#comments {
    /*margin-top: 130px;*/
}
#comments p {
	padding: 0px;
	text-align: left;
	font-size: 14px;
	line-height: 30px;
    margin-bottom: 10px;
}
/*#comments-title {
	text-transform: uppercase;
    margin-bottom: 10px;
}
#comments-title span {
	color: #777777;
	margin-left: 5px;
}*/
#comments .comments-title {
    text-transform: uppercase;
    margin-bottom: 10px;
  }
#comments .comment-body {
    margin-bottom: 30px;
}
#comments img {
    margin-bottom: 10px;
}
.commentlist .commentmetadata {
	margin-bottom: 10px;
}
.commentlist .commentmetadata a {
	font-style: italic;
	color: #999999;
	font-size: 12px;
}
.commentlist .reply a {
	background: #ffffff;
	color: #c2c2c2;
	padding: 4px 8px;
	font-weight: normal;
	border: 2px solid #c2c2c2;
	text-transform: uppercase;
}
.commentlist .reply a:hover {
	background: #5aa9ce;
	color: #ffffff;
	border: 2px solid transparent;
}
.form-horizontal .control-group {
	display: inline-block;
	width: 100%;
    margin-bottom: 20px;
}
.form-horizontal .controls {
	float: left;
}
.form-horizontal .comment-form-comment .controls {
	width: 100%;
}
.form-horizontal .controls input {
	height: 35px;
}
.form-horizontal .controls input,
.form-horizontal .controls textarea {
    padding: 10px 15px;
	background: #eeeeee;
	border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
   -o-border-radius: 0;
    border-radius: 0;
	width: 100%;
    color: #333;
    font-size: 18px;
	margin-bottom: 0px;
}
.form-horizontal .controls input:hover,
.form-horizontal .controls input:focus,
.form-horizontal .controls textarea:hover
.form-horizontal .controls textarea:focus {
	background: #e7e7e7;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}
.form-horizontal .control-label {
	margin-left: 10px;
}
.form-horizontal .required {
	color: #5aa9ce;
}
.form-horizontal button {
	padding: 15px 50px;
    line-height: 16px;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    margin-bottom: 5px;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: All 200ms linear;
	-moz-transition: All 200ms linear;
	-ms-transition: All 200ms linear;
	-o-transition: All 200ms linear; 
    transition: All 200ms linear;
    background: transparent;
    color: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(102, 102, 102, 0.5);
}
.form-horizontal button:hover {
	color: #ffffff;
	background: #5aa9ce;
	border: 2px solid transparent;
}

/*-----------------------------------------------------
Comments
------------------------------------------------------*/

#comments .comments-title {
  font-family: "Playfair Display", Helvetica, Arial, sans-serif;
  color: #333;
  margin: 0 0 36px;
}

.comment-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.comment-list .comment-body img {
  -webkit-border-radius: 200px;
  border-radius: 50%;
  float: left;
  margin-right: 20px;
}

.comment-list .comment-body .says {
  display: none;
}

.comment-list .comment-body .fn {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 5px;
  color: #333;
}

.comment-list .comment-body .fn a {
  color: #333;
}

.comment-list .comment-body .fn a:hover {
  color: #fff;
  text-decoration: none;
}

.comment-list .comment-metadata a {
  font-size: 16px;
  line-height: 20px;
  color: #88888c;

}

.comment-list .comment-metadata a:hover {
  text-decoration: none;
  color: #5aa9ce;
  color: #755443;
}

.comment-list .comment-content {
  float: left;
  width: 80%;
}

.comment-list .comment-content p {
  margin: 0 0 20px;
}
.comment-list .comment-body {
  overflow: hidden;
  border-bottom: 1px solid #d9dbde;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.comment-list .reply {
  float: right;
  width: 85%;
}

.comment-list .comment-metadata {
  margin: 0 0 5px;
}

.comment-list .children {
  list-style: none;
}

.comment-reply-title {
  font-family: "Playfair Display", Helvetica, Arial, sans-serif;
  color: #252626;
  margin: 0 0 36px;
}

.comment-form p {
  margin-top: 0;
}

.comment-form:after {
  content: '';
  display: block;
  clear: both;
}

.comment-form label {
  font-family: "Playfair Display", Helvetica, Arial, sans-serif;
  color: #636366;
  display: block;
  margin: 0 0 5px;
}

.comment-form .comment-form-author {
  float: left;
  width: 48%;
}

.comment-form .comment-form-email {
  float: right;
  width: 48%;
}

.comment-form .comment-form-url {
  display: block;
  width: 100%;
  overflow: hidden;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  border-color: #cfcfd4;
  padding: 6px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.comment-form textarea {
  width: 100%;
  border-color: #cfcfd4;
  padding: 6px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 160px;
  resize: none;
}

.comment-form input[type="submit"] {
  font-family: "Playfair Display", Helvetica, Arial, sans-serif;
  color: #3c3b3b;
  background: #5aa9ce;
  border-radius: 5px;
  border: 0;
  box-shadow: none;
  height: 38px;
  text-shadow: none;
  padding: 0 25px;
}

.comment-form input[type="submit"]:hover {
  background: #eaad00;
}

.comment-list .comment-metadata a:hover {
  text-decoration: none;
  color: #5aa9ce;
}

.comment-list .comment-content {
  float: left;
  width: 80%;
}

.comment-list .comment-content p {
  margin: 0 0 20px;
}

.comment-list .comment-body {
  overflow: hidden;
  border-bottom: 1px solid #d9dbde;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.comment-list .reply {
  float: right;
  width: 85%;
}

.comment-list .comment-metadata {
  margin: 0 0 5px;
}

.comment-list .children {
  list-style: none;
}

.comment-reply-title {
  font-family: "Playfair Display", Helvetica, Arial, sans-serif;
  color: #252626;
  margin: 0 0 36px;
}

.comment-form p {
  margin-top: 0;
}

.comment-form:after {
  content: '';
  display: block;
  clear: both;
}

.comment-form label {
  font-family: "Playfair Display", Helvetica, Arial, sans-serif;
  color: #636366;
  display: block;
  margin: 0 0 5px;
}

.comment-form .comment-form-author {
  float: left;
  width: 48%;
}

.comment-form .comment-form-email {
  float: right;
  width: 48%;
}

.comment-form .comment-form-url {
  display: block;
  width: 100%;
  overflow: hidden;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  border-color: #cfcfd4;
  padding: 6px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.comment-form textarea {
  width: 100%;
  border-color: #cfcfd4;
  padding: 6px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 160px;
  resize: none;
}

.comment-form input[type="submit"] {
  font-family: "Playfair Display", Helvetica, Arial, sans-serif;
  color: #3c3b3b;
  background: #5aa9ce;
  border-radius: 5px;
  border: 0;
  box-shadow: none;
  height: 38px;
  text-shadow: none;
  padding: 0 25px;
}

.comment-form input[type="submit"]:hover {
  background: rgba(90, 169, 206, 0.695);
}

.comments-area .comment-form label[for="wp-comment-cookies-consent"] {
  display: inline-block;
  margin-left: 5px;
}

/*------------------------------------------------------------------
25. Footer
-------------------------------------------------------------------*/
.footer {
    background-color: #1a1919;
    padding: 60px 40px;
    text-align: center;

}
/*------------------------------------------------------------------
25.1. Newsletter Form
-------------------------------------------------------------------*/
#newsletter h3 {
    text-transform: uppercase;
    text-align: center;
    color: #DDD;
    font-size: 26px;
    letter-spacing: 4px;
    margin-bottom: 15px;
}
#newsletter form {
    margin-bottom: 0;
}
#newsletter form input[type="email"] {
   	width: 74%;
    height: 38px;
    background-color: #fff;
	border: 1px solid #ccc;
	float: left;
	color: #414141;
	font-size: 16px;
    font-weight: 300;
    padding: 10px 15px;
	-webkit-border-radius: 6px 0 0 6px;
	-moz-border-radius: 6px 0 0 6px;
	-o-border-radius: 6px 0 0 6px;
	border-radius: 6px 0 0 6px;
}
#newsletter form input[type="submit"] {
    width: auto;
    height: 38px;
	background-color: #5aa9ce;
	border: 1px solid transparent;
    float: left;
	color: #fff;
	font-size: 16px;
    font-weight: 900;
	text-transform: uppercase;
    padding: 6px 18px;
	-webkit-border-radius: 0 6px 6px 0;
	-moz-border-radius: 0 6px 6px 0;
	-o-border-radius: 0 6px 6px 0;
	border-radius: 0 6px 6px 0;
	-webkit-transition: all 350ms ease-in-out;
	-moz-transition: all 350ms ease-in-out;
	-o-transition: all 350ms ease-in-out;
	-ms-transition: all 350ms ease-in-out;
	transition: all 350ms ease-in-out;
}
#newsletter form input[type="submit"]:hover {
	opacity: 0.8;
}
.message {
    margin-bottom: 10px;
}
.message span {
    color: #5aa9ce;
}
.success {
    display: block;
    color: #5aa9ce;
}
.error {
    display: block;
    color: #ce5a5a;
}
.reset {
    display: none;
}
footer .icons {  
    margin-bottom: 15px;
}
/*------------------------------------------------------------------
25.2. Footer Social Icons
-------------------------------------------------------------------*/
footer .icons a {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
    border-radius: 50%;
    color: #999;
    margin: 0 5px;
    font-size: 20px;
}
footer .icons a:hover {
    color: #ffffff;
}
footer .icons a.facebook:hover { 
    background-color: #475996; 
}
footer .icons a.twitter:hover { 
    background-color: #69baf3;                             
}
footer .icons a.google-plus:hover { 
    background-color: #c63d2d;
}
footer .icons a.linkedin:hover { 
    background-color: #4875b4; 
}
footer .icons a.pinterest:hover { 
    background-color: #d03737; 
}
footer .icons a.dribbble:hover { 
    background-color: #d76896; 
}
footer .icons a.behance:hover { 
    background-color: #00a8e7; 
}
footer .icons a.instagram:hover { 
    background-color: #beb3a8; 
}
footer .icons a.vimeo-square:hover { 
    background-color: #45bbff; 
}
footer .icons a.dropbox:hover { 
    background-color: #008ad2; 
}
footer .icons a.skype:hover { 
    background-color: #00a9ed; 
}
footer .icons a.youtube:hover { 
    background-color: #cd1b20; 
}
footer .icons a.tumblr:hover { 
    background-color: #3a5976; 
}
footer .icons a.vimeo:hover { 
    background-color: #00adee; 
}
footer .icons a.flickr:hover { 
    background-color: #d2d2d2; 
}
footer .icons a.github:hover { 
    background-color: #222; 
}
footer .icons a.renren:hover { 
    background-color: #364a83; 
}
footer .icons a.vk:hover { 
    background-color: #3b5998; 
}
footer .icons a.xing:hover {
     background-color: #015f5e; 
}
footer .icons a.weibo:hover {
     background-color: #be4443;
}
footer .icons a.digg:hover  { 
    background-color: #222; 
}
footer .icons a.deviantart:hover {
     background-color: #57675d;
}
footer .icons a.envelope:hover { 
    background-color: #999; 
}
footer .icons a.delicious:hover {
     background-color: #0A0A0A; 
}
footer .icons a.rss:hover {
     background-color: #e67e22; 
}
/*------------------------------------------------------------------
25.3. Copyright 
-------------------------------------------------------------------*/
footer .copyright {
    font-size: 14px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
footer .copyright span {
    color: #5aa9ce;
}
/*------------------------------------------------------------------
25.4. Scroll Up
-------------------------------------------------------------------*/
#scrollUp {
    background-image: url(../images/back-to-top.png);
    background-repeat: no-repeat;
    background-position: center;
	background-color: #333;
    bottom: 0px;
    right: 30px;
    height: 35px;
    width: 50px;
    -webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
#scrollUp:hover {
	background-color: #5aa9ce;	
}
.archive-description {
    color: #5aa9ce;
}
/*------------------------------------------------------------------
26. Responsive CSS
-------------------------------------------------------------------*/
 @media only screen and (max-width: 992px) {	
    .hero .block { 
        margin-top: 60px;
    }
    .hero h1 { 
    margin-top: -60px;
    }
    #about img { 
    margin-bottom: 25px;
    }
    .action {
    text-align: center;
    }
    .clients img { 
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .team-member .overlay img {
    max-height: 700px;
    height: auto;
    }
    .team-member {
    margin-bottom: 30px;
    }
    .content-box {
    margin-bottom: 30px;
    }
    #newsletter form {
    margin-left: 10%;
    }
    .post-meta {
    line-height: 28px;
    }
    
  }
@media only screen and (max-width: 768px) {
    .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
    padding: 15px 15px 5px 25px;
    }
    #about img { 
    margin-bottom: 25px;
    }
    .action {
    text-align: center;
    }
    .counters { 
    margin-bottom: 25px;
    }
   .portfolio-item .overlay img {
    max-height: 480px;
    height: auto;
    }
   .team-member .overlay img {
    max-height: 660px;
    height: auto;
    }
    .clients img { 
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .team-member {
    margin-bottom: 30px;
    }
    .content-box {
    margin-bottom: 30px;
    }
    #newsletter form {
    margin-left: 20%;
    }
    #newsletter form input[type="email"] {
    margin-bottom: 5px;
    }
    #newsletter form input[type="submit"] {
    width: 74%;
    }
    .post-meta {
     line-height: 28px;
    }
}



.blog-section {
  background-color: #f0f2f7;
  /*padding: 80px 0;*/
}
.blog-section .title {
	text-transform: uppercase;
	letter-spacing: 0.10em;
    margin-bottom: 40px;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
}
.blog-section h1.title span {
   color: #5aa9ce;;
}
.blog-section .subtitle {
	line-height: 48px;
  margin-bottom: 40px;
}
.blog-section .pretitle {
	margin-bottom: 40px;
}
.blog-section .icon { 
    background-image: url(../images/section-title.png);
    background-repeat: repeat-x;
    background-position: center left;
    text-align: center;
    margin-bottom: 40px;
    color: #5aa9ce;
} 
.blog-section .icon i {
    background-color: #f0f2f7;
    font-size: 40px;
    padding: 0 50px;
}
.blog-section .seperator {
    margin-bottom: 20px;
}
.front-blog p {
  line-height: 26px;
  margin-bottom: 10px;
}
.front-blog .post-hover-effect {
  margin-bottom: 20px!important
}
.front-blog .post .entry-title {
  background-image: none!important;
}