@charset "UTF-8";

/*

Theme Name: Theratio

Theme URI: http://templates.thememodern.com/theratio/index.html

Author: ThemeModern

Author URI: http://thememodern.com

Description: Theratio is a WordPress theme for Interior Design & Architecture Company. Theratio is easy to use, it provides everything you need to create great looking website. With Theratio you can impress your customer by it’s professional design and the interactivity. Theratio built with latest website technology to ensure your website is looks nice on desktop and mobile. Get Theratio now!

Version: 1.1

License: GNU General Public License v2+

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: theratio

Domain Path: /languages/

Tags: one-column, two-columns, left-sidebar, right-sidebar, full-width-template, post-formats, theme-options, threaded-comments, translation-ready



*/

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

>>> TABLE OF CONTENTS:

----------------------------------------------------------------

# Normalize

# Typography

# Elements

# Forms

# Navigation

	## Links

	## Menus

# Accessibility

# Alignments

# Clearings

# Widgets

# Content

	## Posts and pages

	## Comments

# Infinite scroll

# Media

	## Captions

	## Galleries

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

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

# Normalize

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

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document

	 ========================================================================== */

/**

 * 1. Correct the line height in all browsers.

 * 2. Prevent adjustments of font size after orientation changes in iOS.

 */

  @import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

  @import url('https://fonts.googleapis.com/css?family=Titillium Web:200,300,300i,400,400i,600,600i,700,700i,900');

  @import url('https://fonts.googleapis.com/css?family=Josefin Sans:300,300i,400,400i,500,500i,600,600i,700,700i');



  html {

    overflow-x: hidden;

    line-height: 1.15;

    /* 1 */

    -webkit-text-size-adjust: 100%;

    /* 2 */

  }



/* Sections

	 ========================================================================== */

/**

 * Remove the margin in all browsers.

 */

  body {

    margin: 0;

  }



/* Grouping content

	 ========================================================================== */

/**

 * 1. Add the correct box sizing in Firefox.

 * 2. Show the overflow in Edge and IE.

 */

  hr {

    box-sizing: content-box;

    /* 1 */

    height: 0;

    /* 1 */

    overflow: visible;

    /* 2 */

  }



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

  pre {

    font-family: monospace, monospace;

    /* 1 */

    font-size: 1em;

    /* 2 */

  }



/* Text-level semantics

	 ========================================================================== */

/**

 * Remove the gray background on active links in IE 10.

 */

  a {

    background-color: transparent;

  }



/**

 * 1. Remove the bottom border in Chrome 57-

 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

 */

  abbr[title] {

    border-bottom: none;

    /* 1 */

    text-decoration: underline;

    /* 2 */

    text-decoration: underline dotted;

    /* 2 */

  }



/**

 * Add the correct font weight in Chrome, Edge, and Safari.

 */

  b,

  strong {

    font-weight: bold;

  }



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

  code,

  kbd,

  samp {

    font-family: monospace, monospace;

    /* 1 */

    font-size: 1em;

    /* 2 */

  }



/**

 * Add the correct font size in all browsers.

 */

  small {

    font-size: 80%;

  }



/**

 * Prevent `sub` and `sup` elements from affecting the line height in

 * all browsers.

 */

  sub,

  sup {

    font-size: 75%;

    line-height: 0;

    position: relative;

    vertical-align: baseline;

  }



  sub {

    bottom: -0.25em;

  }



  sup {

    top: -0.5em;

  }



/* Embedded content

	 ========================================================================== */

/**

 * Remove the border on images inside links in IE 10.

 */

  img {

    border-style: none;

  }



/* Forms

	 ========================================================================== */

/**

 * 1. Change the font styles in all browsers.

 * 2. Remove the margin in Firefox and Safari.

 */

  button,

  input,

  optgroup,

  select,

  textarea {

    font-family: inherit;

    /* 1 */

    font-size: 100%;

    /* 1 */

    line-height: 1.15;

    /* 1 */

    margin: 0;

    /* 2 */

  }



/**

 * Show the overflow in IE.

 * 1. Show the overflow in Edge.

 */

  button,

  input {

    /* 1 */

    overflow: visible;

  }



/**

 * Remove the inheritance of text transform in Edge, Firefox, and IE.

 * 1. Remove the inheritance of text transform in Firefox.

 */

  button,

  select {

    /* 1 */

    text-transform: none;

  }



/**

 * Correct the inability to style clickable types in iOS and Safari.

 */

  button,

  [type=button],

  [type=reset],

  [type=submit] {

    -webkit-appearance: button;

  }



/**

 * Remove the inner border and padding in Firefox.

 */

  button::-moz-focus-inner,

  [type=button]::-moz-focus-inner,

  [type=reset]::-moz-focus-inner,

  [type=submit]::-moz-focus-inner {

    border-style: none;

    padding: 0;

  }



/**

 * Restore the focus styles unset by the previous rule.

 */

  button:-moz-focusring,

  [type=button]:-moz-focusring,

  [type=reset]:-moz-focusring,

  [type=submit]:-moz-focusring {

    outline: 1px dotted ButtonText;

  }



/**

 * Correct the padding in Firefox.

 */

  fieldset {

    padding: 0.35em 0.75em 0.625em;

  }



/**

 * 1. Correct the text wrapping in Edge and IE.

 * 2. Correct the color inheritance from `fieldset` elements in IE.

 * 3. Remove the padding so developers are not caught out when they zero out

 *		`fieldset` elements in all browsers.

 */

  legend {

    box-sizing: border-box;

    /* 1 */

    color: inherit;

    /* 2 */

    display: table;

    /* 1 */

    max-width: 100%;

    /* 1 */

    padding: 0;

    /* 3 */

    white-space: normal;

    /* 1 */

  }



/**

 * Add the correct vertical alignment in Chrome, Firefox, and Opera.

 */

  progress {

    vertical-align: baseline;

  }



/**

 * Remove the default vertical scrollbar in IE 10+.

 */

  textarea {

    overflow: auto;

  }



/**

 * 1. Add the correct box sizing in IE 10.

 * 2. Remove the padding in IE 10.

 */

  [type=checkbox],

  [type=radio] {

    box-sizing: border-box;

    /* 1 */

    padding: 0;

    /* 2 */

  }



/**

 * Correct the cursor style of increment and decrement buttons in Chrome.

 */

  [type=number]::-webkit-inner-spin-button,

  [type=number]::-webkit-outer-spin-button {

    height: auto;

  }



/**

 * 1. Correct the odd appearance in Chrome and Safari.

 * 2. Correct the outline style in Safari.

 */

  [type=search] {

    -webkit-appearance: textfield;

    /* 1 */

    outline-offset: -2px;

    /* 2 */

  }



/**

 * Remove the inner padding in Chrome and Safari on macOS.

 */

  [type=search]::-webkit-search-decoration {

    -webkit-appearance: none;

  }



/**

 * 1. Correct the inability to style clickable types in iOS and Safari.

 * 2. Change font properties to `inherit` in Safari.

 */

  ::-webkit-file-upload-button {

    -webkit-appearance: button;

    /* 1 */

    font: inherit;

    /* 2 */

  }



/* Interactive

	 ========================================================================== */

/*

 * Add the correct display in Edge, IE 10+, and Firefox.

 */

  details {

    display: block;

  }



/*

 * Add the correct display in all browsers.

 */

  summary {

    display: list-item;

  }



/* Misc

	 ========================================================================== */

/**

 * Add the correct display in IE 10+.

 */

  template {

    display: none;

  }



/**

 * Add the correct display in IE 10.

 */

  [hidden] {

    display: none;

  }



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

# Typography

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

body,

button,

input,

select,

optgroup,

textarea {

  color: #555555;

  font-family: "Raleway", sans-serif;

  font-size: 16px;

  line-height: 1.875;

  font-weight: 400;

  word-break: break-word;

  box-sizing: border-box;

}



body.dark-scheme {

  color: #dddddd;

}



h1, h2, h3, h4, h5, h6 {

  font-family: "Titillium Web", sans-serif;

  font-weight: 400;

  line-height: 1.4;

  margin: 0 0 20px;

  color: #415755;

}



.dark-scheme h1, .dark-scheme h2, .dark-scheme h3, .dark-scheme h4, .dark-scheme h5, .dark-scheme h6 {

  color: #fff;

}



h1 {

  font-size: 48px;

}



h2 {

  font-size: 42px;

}



h3 {

  font-size: 36px;

}



h4 {

  font-size: 30px;

}



h5 {

  font-size: 24px;

}



h6 {

  font-size: 20px;

}



p {

  margin: 0 0 20px;

}



dfn, cite, em, i {

  font-style: italic;

}



blockquote {

  font-size: 22px;

  margin: 40px 0 28px;

  font-weight: 400;

  padding: 50px 160px 0;

  position: relative;

  font-family: "Titillium Web", sans-serif;

  color: #415755;

  text-align: center;

}

blockquote cite {

  font-family: "Josefin Sans", sans-serif;

  text-transform: uppercase;

  font-size: 14px;

  font-weight: 600;

  font-style: normal;

  display: block;

  color: #9f9e9e;

  margin-top: 10px;

}

blockquote:before {

  position: absolute;

  content: "";

  top: 0;

  left: 50%;

  background: url("https://via.placeholder.com/189x150.png");

  width: 39px;

  height: 32px;

  background-repeat: no-repeat;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}



address {

  margin: 0 0 1.5em;

}



pre {

  background: #eee;

  font-family: "Courier 10 Pitch", Courier, monospace;

  font-size: 15px;

  line-height: 1.7142857143;

  margin-bottom: 1.6em;

  max-width: 100%;

  overflow: auto;

  padding: 1.6em;

}



code, kbd, tt, var {

  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;

  font-size: 15px;

}



abbr, acronym {

  border-bottom: 1px dotted #666;

  cursor: help;

}



mark, ins {

  background: #fff9c0;

  text-decoration: none;

}



big {

  font-size: 125%;

}



.bg-alt {

  background: #f7f7f7;

}



.bg-primary {

  background: #9f9e9e;

}



.text-primary {

  color: #9f9e9e;

}



.section-padd {

  padding: 110px 0;

}



.section-padd-bot {

  padding-bottom: 110px;

}



.section-padd-top {

  padding-top: 110px;

}



.section-padd-top70 {

  padding-top: 70px;

}



.lead {

  font-size: 18px;

}



.clear-both {

  clear: both;

}



.unstyle {

  list-style: none;

  padding-left: 0;

}



.font14 {

  font-size: 14px;

}



.text-light {

  color: #FFF;

}

.text-light * {

  color: #66CC33;

}

.text-green {

  color: #66CC33;

}


.bolder {

  font-weight: 600;

}



.normal {

  font-weight: 400;

}



.lighter {

  font-weight: 300;

}



.f-left {

  float: left;

}



.f-right {

  float: right;

}



.dtable {

  display: table;

}



.dcell {

  display: table-cell;

  vertical-align: middle;

}



.flex-middle {

  display: flex;

  align-items: center;

  justify-content: center;

}



.overflow {

  overflow: hidden;

}



.overlay {

  position: absolute;

  top: 0;

  left: 0;

  background: #fff;

  opacity: 1;

  width: 100%;

  height: 100%;

  z-index: -1;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}



.layer-behind {

  position: absolute;

  top: 20px;

  left: 20px;

  width: 100%;

  height: 100%;

  z-index: -1;

  background: #f4f4f4;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}



.gaps {

  clear: both;

  height: 20px;

  display: block;

}

.gaps.size-2x {

  height: 40px;

}



.number-stroke {

  font-family: "Titillium Web", sans-serif;

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

  color: transparent !important;

  -webkit-text-stroke-width: 1px;

  -webkit-text-stroke-color: #fff;

  opacity: 0.5;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}


.title-link {

  display: inline;

  background-size: 0 2px;

  background-position: 0 90%;

  background-repeat: no-repeat;

  background-image: linear-gradient(0deg, #7e7e7e, #f5f5f5);

}

.title-link:hover {

  background-size: 100% 2px;

}



.btn-details {

  position: relative;

  font-family: "Titillium Web", sans-serif;

  font-size: 13px;

  font-weight: 600;

  color: #415755;

  text-transform: uppercase;

  z-index: 0;

  letter-spacing: 0.5px;

}

.btn-details:before {

  position: absolute;

  content: "";

  background: #dddddd;

  bottom: -3px;

  left: -7px;

  width: 20px;

  height: 12px;

  z-index: -1;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.btn-details:hover {

  color: #415755;

}

.btn-details:hover:before {

  width: calc( 100% + 14px );

  transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  -webkit-transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  -moz-transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  -o-transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  -ms-transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}



.img-lgpopup {

  cursor: pointer;

}

.img-lgpopup i {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 60px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  background: #000;

  color: #fff;

}

.img-lgpopup i:before {

  font-size: 22px;

}

.img-lgpopup i:hover {

  -webkit-transform: translate(-50%, -50%) rotate(90deg);

  -ms-transform: translate(-50%, -50%) rotate(90deg);

  transform: translate(-50%, -50%) rotate(90deg);

}



.btn-play {

  position: relative;

  text-align: center;

  width: 60px;

  height: 60px;

  display: block;

  background: #fff;

  color: #415755;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.btn-play i {

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 1;

  display: block;

  cursor: pointer;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

.btn-play i:before {

  margin-left: 2px;

}

.btn-play:before {

  content: "";

  position: absolute;

  z-index: 0;

  left: 50%;

  top: 50%;

  transform: translateX(-50%) translateY(-50%);

  display: block;

  width: 100%;

  height: 100%;

  background: #fff;

  border-radius: 50%;

  animation: pulse-border 1500ms ease-out infinite;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.btn-play:hover {

  background: #415755;

  color: #fff;

}

.btn-play:hover:before {

  background: #415755;

}



.octf-swiper-button-next, .octf-swiper-button-prev {

  position: absolute;

  z-index: 1;

  width: 60px;

  height: 60px;

  color: #415755;

  outline: none;

  text-align: center;

  line-height: 60px;

  font-weight: bold;

  top: 50%;

  left: 0;

  background: #9f9e9e;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.octf-swiper-button-next i:before, .octf-swiper-button-prev i:before {

  font-size: 16px;

}

.octf-swiper-button-next.swiper-button-disabled, .octf-swiper-button-prev.swiper-button-disabled {

  cursor: not-allowed;

}

.octf-swiper-button-next:not(.swiper-button-disabled):hover, .octf-swiper-button-prev:not(.swiper-button-disabled):hover {

  color: #fff;

  background: #415755;

}



.octf-swiper-button-next {

  left: auto;

  right: 0;

}



.octf-swiper-pagination {

  text-align: center;

  margin-top: 60px;

  margin-bottom: 30px;

  line-height: 1;

}

.octf-swiper-pagination .swiper-pagination-bullet {

  position: relative;

  width: 30px;

  height: 30px;

  margin: 0 !important;

  opacity: 1;

  background: 0;

  border: 1px solid;

  border-color: transparent;

  outline: none;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.octf-swiper-pagination .swiper-pagination-bullet:before {

  position: absolute;

  content: "";

  top: 50%;

  left: 50%;

  width: 4px;

  height: 4px;

  background: #415755;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.octf-swiper-pagination .swiper-pagination-bullet-active {

  border-color: #415755;

}



.arrow-top {

  padding-top: 70px;

}

.arrow-top .octf-swiper-button-next, .arrow-top .octf-swiper-button-prev {

  background: 0;

}

.arrow-top .octf-swiper-button-next:hover, .arrow-top .octf-swiper-button-prev:hover {

  background: 0;

  color: #9f9e9e;

}

.arrow-top .octf-swiper-button-next {

  top: 30px;

  right: 0;

}

.arrow-top .octf-swiper-button-prev {

  right: 60px;

  left: auto;

  top: 30px;

}



.arrow-bot {

  padding-bottom: 70px;

}

.arrow-bot .octf-swiper-button-next, .arrow-bot .octf-swiper-button-prev {

  top: auto;

  bottom: 0;

  background: 0;

  -webkit-transform: translateY(0);

  -ms-transform: translateY(0);

  transform: translateY(0);

}

.arrow-bot .octf-swiper-button-next:hover, .arrow-bot .octf-swiper-button-prev:hover {

  background: 0;

  color: #9f9e9e;

}

.arrow-bot .octf-swiper-button-prev {

  right: 60px;

  left: auto;

}



.scroll-down {

  position: relative;

  color: #fff;

  display: inline-block;

  min-height: 50px;

  line-height: 1;

}

.scroll-down:hover, .scroll-down:active, .scroll-down:focus {

  color: #fff;

}

.scroll-down:after {

  position: absolute;

  content: "";

  font-family: "Flaticon";

  font-size: 14px;

  bottom: 0;

  left: 43%;

  animation: MoveUpDown 1.5s linear infinite;

  -webkit-transform: rotate(-90deg);

  -ms-transform: rotate(-90deg);

  transform: rotate(-90deg);

}



.header-vertical .container {

  width: 100%;

}



@media (min-width: 768px) {

  .header-vertical .container {

    max-width: 750px;

  }

}

@media (min-width: 992px) {

  .header-vertical .container {

    max-width: 970px;

  }

}

@media (min-width: 1230px) {

  .header-vertical .container {

    max-width: 1200px;

  }

}

@keyframes pulse-border {

  0% {

    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

    opacity: 1;

  }

  100% {

    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.7);

    opacity: 0;

  }

}

@keyframes MoveUpDown {

  0%, 100% {

    bottom: 0;

  }

  50% {

    bottom: 10px;

  }

}

.dark-scheme {

  background: #0a0a0a;

}

.dark-scheme .btn-details {

  color: #fff;

}

.dark-scheme .btn-details:before {

  background: #505050;

}

.dark-scheme blockquote {

  color: #fff;

}

.dark-scheme blockquote:before {

  background-image: url("https://via.placeholder.com/189x150.png");

}



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

# Elements

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

html {

  box-sizing: border-box;

}



*,

*:before,

*:after {

  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */

  box-sizing: inherit;

}



body {

  background: #fff;

  /* Fallback for when there is no custom background color defined. */

  overflow: hidden;

}



hr {

  background-color: #ccc;

  border: 0;

  height: 1px;

  margin-bottom: 1.5em;

}



ul,

ol {

  margin: 0 0 20px;

  padding-left: 18px;

}



ul {

  list-style: disc;

}



ol {

  list-style: decimal;

}



li > ul,

li > ol {

  margin-bottom: 0;

  margin-left: 1.5em;

}



dt {

  font-weight: 700;

}



dd {

  margin: 0 1.5em 1.5em;

}



.none-style {

  list-style: none;

  padding-left: 0;

}



img {

  height: auto;

  /* Make sure images are scaled correctly. */

  max-width: 100%;

  /* Adhere to container width. */

}



figure {

  margin: 1em 0;

  /* Extra wide images within figure tags don't overflow the content area. */

}



table {

  margin: 0 0 1.5em;

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  border-width: 1px 0 0 1px;

}



caption,

td,

th {

  padding: 0;

  font-weight: normal;

  text-align: left;

}



table,

th,

td {

  border: 1px solid #eee;

}



th {

  font-weight: 700;

}



th,

td {

  padding: 0.4375em;

}



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

# Forms

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

/* #button Group

================================================== */

.octf-btn {

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  font-size: 13px;

  -webkit-border-radius: 0;

  -moz-border-radius: 0;

  border-radius: 0;

  padding: 18px 41px;

  line-height: 1.42857143;

  display: inline-block;

  margin-bottom: 0;

  text-decoration: none;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  white-space: nowrap;

  vertical-align: middle;

  font-family: "Titillium Web", sans-serif;

  font-weight: 600;

  text-align: center;

  background: #415755;

  cursor: pointer;

  border: 1px solid transparent;

  color: #fff;

  outline: none;

  position: relative;

}

.octf-btn:before, .octf-btn:after {

  content: "";

  position: absolute;

  background: #415755;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.octf-btn:before {

  width: calc( 100% + 2px );

  height: 1px;

  bottom: -6px;

  left: 10px;

}

.octf-btn:after {

  width: 1px;

  height: calc( 100% + 2px );

  top: 10px;

  right: -6px;

}

.octf-btn:hover, .octf-btn:active, .octf-btn:focus {

  background: transparent;

  color: #415755;

  border-color: #415755;

}

.octf-btn:hover:before, .octf-btn:active:before, .octf-btn:focus:before {

  width: 0;

}

.octf-btn:hover:after, .octf-btn:active:after, .octf-btn:focus:after {

  height: 0;

}



.dark-scheme .octf-btn {

  background: #fff;

  color: #415755;

}

.dark-scheme .octf-btn:hover, .dark-scheme .octf-btn:active, .dark-scheme .octf-btn:focus {

  background: #415755;

  color: #fff;

}



.octf-btn.octf-btn-light {

  background: #fff;

  color: #415755;

}

.octf-btn.octf-btn-light:before, .octf-btn.octf-btn-light:after {

  background: #fff;

}

.octf-btn.octf-btn-light:visited {

  background: #fff;

  color: #415755;

}

.octf-btn.octf-btn-light:hover, .octf-btn.octf-btn-light:focus {

  color: #fff;

  background: #415755;

  border-color: #415755;

}



.octf-btn.octf-btn-dark {

  color: #fff;

  background: #415755;

}

.octf-btn.octf-btn-dark:before, .octf-btn.octf-btn-dark:after {

  background: #415755;

}

.octf-btn.octf-btn-dark:visited {

  color: #fff;

  background: #415755;

}

.octf-btn.octf-btn-dark:hover, .octf-btn.octf-btn-dark:focus {

  background: #fff;

  color: #415755;

  border-color: #fff;

}



input[type=text],

input[type=email],

input[type=url],

input[type=password],

input[type=search],

input[type=number],

input[type=tel],

input[type=range],

input[type=date],

input[type=month],

input[type=week],

input[type=time],

input[type=datetime],

input[type=datetime-local],

input[type=color],

textarea {

  color: #555555;

  border: none;

  background: #fff;

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  padding: 8px 10px;

  box-sizing: border-box;

  outline: none;

  font-size: 14px;

  font-weight: 500;

}

input[type=text]:focus,

input[type=email]:focus,

input[type=url]:focus,

input[type=password]:focus,

input[type=search]:focus,

input[type=number]:focus,

input[type=tel]:focus,

input[type=range]:focus,

input[type=date]:focus,

input[type=month]:focus,

input[type=week]:focus,

input[type=time]:focus,

input[type=datetime]:focus,

input[type=datetime-local]:focus,

input[type=color]:focus,

textarea:focus {

  color: #555555;

}



select {

  border: none;

  background: #fff;

  outline: none;

  border: 1px solid rgba(0, 0, 0, 0.1);

}



textarea {

  width: 100%;

  height: 130px;

  vertical-align: top;

}

#contact-form textarea {
  height: 43px;
}

#contact-form p {
  margin: 0 0 0 0;
}



::-webkit-input-placeholder {

  /* Chrome/Opera/Safari */

  color: #555555;

}



::-moz-placeholder {

  /* Firefox 19+ */

  color: #555555;

}



:-ms-input-placeholder {

  /* IE 10+ */

  color: #555555;

}



:-moz-placeholder {

  /* Firefox 18- */

  color: #555555;

}



/*Dark Scheme*/

.dark-scheme input[type=text],

.dark-scheme input[type=email],

.dark-scheme input[type=url],

.dark-scheme input[type=password],

.dark-scheme input[type=search],

.dark-scheme input[type=number],

.dark-scheme input[type=tel],

.dark-scheme input[type=range],

.dark-scheme input[type=date],

.dark-scheme input[type=month],

.dark-scheme input[type=week],

.dark-scheme input[type=time],

.dark-scheme input[type=datetime],

.dark-scheme input[type=datetime-local],

.dark-scheme input[type=color],

.dark-scheme textarea {

  color: #dddddd;

  background: transparent;

  border-bottom-color: #292929;

}

.dark-scheme input[type=text]:focus,

.dark-scheme input[type=email]:focus,

.dark-scheme input[type=url]:focus,

.dark-scheme input[type=password]:focus,

.dark-scheme input[type=search]:focus,

.dark-scheme input[type=number]:focus,

.dark-scheme input[type=tel]:focus,

.dark-scheme input[type=range]:focus,

.dark-scheme input[type=date]:focus,

.dark-scheme input[type=month]:focus,

.dark-scheme input[type=week]:focus,

.dark-scheme input[type=time]:focus,

.dark-scheme input[type=datetime]:focus,

.dark-scheme input[type=datetime-local]:focus,

.dark-scheme input[type=color]:focus,

.dark-scheme textarea:focus {

  color: #dddddd;

}

.dark-scheme ::-webkit-input-placeholder {

  /* Chrome/Opera/Safari */

  color: #dddddd;

}

.dark-scheme ::-moz-placeholder {

  /* Firefox 19+ */

  color: #dddddd;

}

.dark-scheme :-ms-input-placeholder {

  /* IE 10+ */

  color: #dddddd;

}

.dark-scheme :-moz-placeholder {

  /* Firefox 18- */

  color: #dddddd;

}



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

# Navigation

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

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

## Links

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

a {

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  /*color: #415755;*/

  text-decoration: none;

}

a:hover, a:focus, a:active {

  color: #9f9e9e;

  text-decoration: none;

}

a:focus {

  outline: 0;

}

a:hover, a:active {

  outline: 0;

}



.dark-scheme a {

  color: #fff;

}

.dark-scheme a:hover, .dark-scheme a:focus, .dark-scheme a:active {

  color: #fff;

}



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

## Top Bar

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

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

## Logo

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

#site-logo {

  min-width: 200px;

  display: inline-flex;

  vertical-align: middle;

  align-items: center;

  line-height: 1;

}

#site-logo img {

  height: 65px;

}

#site-logo img.logo-static {

  display: block;

}

#site-logo img.logo-scroll {

  display: none;

}



.is-stuck #site-logo img.logo-static {

  display: none;

}

.is-stuck #site-logo img.logo-scroll {

  display: block;

}



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

## Menus

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

.main-navigation ul, .vertical-main-navigation ul {

  list-style: none;

  padding-left: 0;

}



.site-header {

  position: absolute;

  width: 100%;

  z-index: 999;

}

.site-header.header-static {

  position: static;

}



.octf-main-header {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}



.octf-mainbar-container {

  display: flex;

  flex-flow: row wrap;

  align-items: stretch;

}



.octf-mainbar {

  display: flex;

  flex-flow: column wrap;

  flex: 1 auto;

}



.octf-main-header .octf-mainbar-row {

  display: flex;

  flex-wrap: nowrap;

  align-items: stretch;

  flex: 1 auto;

  background: rgb(65 87 85 / 93%);

}



.octf-mainbar-row > [class^=octf-col] {

  display: flex;

  align-items: stretch;

  position: static;

}



.octf-mainbar-row .octf-col {

  flex-basis: 0;

  flex-grow: 0.65;

  max-width: 100%;

  width: 100%;

  min-height: 1px;

  padding-right: 15px;

  padding-left: 15px;

}



.octf-mainbar-row > [class^=octf-col] {

  flex-flow: row nowrap;

}

.octf-mainbar-row > [class^=octf-col].text-left {

  justify-content: flex-start;

}

.octf-mainbar-row > [class^=octf-col].text-center {

  justify-content: center;

}

.octf-mainbar-row > [class^=octf-col].text-right {

  justify-content: flex-end;

}



.octf-main-header .octf-row > div:empty {

  display: none;

}



.octf-row {

  margin-right: -15px;

  margin-left: -15px;

}



.octf-col:before {

  display: inline-flex;

}



.octf-main-header .octf-row .octf-col-auto {

  flex: 0 0 auto;

  width: auto;

  max-width: none;

}



.octf-header-module {

  display: inline-flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  position: relative;

}



/* Main Menu */

.main-navigation {

  position: relative;

  display: inline-block;

  vertical-align: middle;

  height: 100%;

  width: auto;

}



.main-navigation > ul {

  position: relative;

  display: flex;

  width: 100%;

  vertical-align: middle;

  height: 100%;

}



.main-navigation ul {

  font-family: "Titillium Web", sans-serif;

  font-weight: normal;

  font-size: 14px;

  list-style: none;

  margin: 0px 0px;

  padding: 0px 0px;

}



.main-navigation > ul > li {

  margin: 0px 20px;

  padding: 0px 0px;

  float: left;

  position: relative;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -webkit-align-items: center;

  -ms-flex-align: center;

  align-items: center;

  height: 100%;

}

.main-navigation > ul > li:last-child {

  margin-right: 0;

}

.main-navigation > ul > li:first-child {

  margin-left: 0;

}



.main-navigation > ul > li > a:before {

  position: absolute;

  height: 8px;

  width: 8px;

  bottom: -14px;

  left: 50%;

  opacity: 0;

  margin-left: -5px;

  background: #66CC33;

  content: "";

  display: block;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  transform: rotate(45deg);

}



.main-navigation > ul > li:hover > a:before,

.main-navigation > ul > li.current-menu-item > a:before,

.main-navigation > ul > li.current-menu-ancestor > a:before {

  bottom: -4px;

  opacity: 1;

}



.main-navigation ul ul {

  float: none;

  margin: 0px 0px;

  padding: 0px 0px;

  background-color: #415755;

}



.main-navigation ul > li > a {

  position: relative;

  display: flex;

  -webkit-box-align: center;

  -webkit-align-items: center;

  -ms-flex-align: center;

  align-items: center;

  height: 100%;

  text-decoration: none;

  text-align: center;

  text-transform: uppercase;

  outline: none;

  color: #66CC33;

  font-weight: 700;  

  white-space: nowrap;

  overflow: hidden;

  -webkit-transition: all 0.2s ease-out 0s;

  -moz-transition: all 0.2s ease-out 0s;

  -o-transition: all 0.2s ease-out 0s;

  transition: all 0.2s ease-out 0s;

}



.main-navigation ul > li.menu-item-has-children > a {

  padding-right: 17px;

}



.main-navigation > ul > li.menu-item-has-children:last-child > a:after {

  right: 0px;

}



.main-navigation ul li li {

  display: block;

  position: relative;

  padding: 0px 34px;

}



.main-navigation ul li li a {

  font-size: 16px;

  line-height: 30px;

  color: #66CC33;

  text-align: left;

  display: block;

  padding: 5px 0px 5px 0px;

  position: relative;

  text-decoration: none;

  outline: none;

  text-transform: none;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}



.main-navigation:not(.no-line) ul li li a:before {

  position: absolute;

  content: "";

  top: 50%;

  left: 0;

  width: 0px;

  height: 1px;

  background: #fff;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  visibility: hidden;

  opacity: 0;

}



.main-navigation:not(.no-line) ul li li a:hover:before,

.main-navigation:not(.no-line) ul ul li.current-menu-item > a:before,

.main-navigation:not(.no-line) ul ul li.current-menu-ancestor > a:before {

  left: 0px;

  visibility: visible;

  opacity: 1;

  width: 30px;

}



.main-navigation ul li li a:hover,

.main-navigation ul ul li.current-menu-item > a,

.main-navigation ul ul li.current-menu-ancestor > a {

  padding-left: 40px;

  color: #fff;

}



.main-navigation.no-line ul li li a:hover,

.main-navigation.no-line ul ul li.current-menu-item > a,

.main-navigation.no-line ul ul li.current-menu-ancestor > a {

  padding-left: 0;

}



.main-navigation ul > li.menu-item-has-children > a:after {

  position: absolute;

  right: 1px;

  top: 50%;

  margin-top: -4px;

  font-family: "Flaticon";

  content: "";

  font-size: 8px;

  line-height: 1;

  color: #c3c7c9;

  font-weight: 500;

}



.main-navigation ul > li.menu-item-has-children > a:hover:after {

  color: #fff;

}



.main-navigation ul > li li.menu-item-has-children > a:after {

  position: absolute;

  content: "";

  font-family: Flaticon;

  top: 50%;

  right: 0;

  margin-top: -5px;

  font-size: 9px;

  color: #b6b6b6;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  transform: rotate(-90deg);

}



.main-navigation ul li ul {

  min-width: 290px;

  white-space: nowrap;

  padding: 20px 0px;

  position: absolute;

  top: 100%;

  left: -34px;

  z-index: 10;

  visibility: hidden;

  opacity: 0;

  -webkit-transform: translateY(30px);

  -ms-transform: translateY(30px);

  transform: translateY(30px);

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);

  -moz-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);

  box-sizing: border-box;

}

.main-navigation ul li ul:before {

  content: "";

  position: absolute;

  height: 10px;

  width: 100%;

  top: -10px;

  left: 0;

}



.main-navigation ul li ul ul {

  left: calc(100% + 2px);

  top: -30px;

  transition: all 0.35s ease-in-out;

  -webkit-transition: all 0.35s ease-in-out;

  -moz-transition: all 0.35s ease-in-out;

  -o-transition: all 0.35s ease-in-out;

  -ms-transition: all 0.35s ease-in-out;

}



.main-navigation ul li:hover > ul {

  visibility: visible;

  opacity: 1;

}



.main-navigation ul > li:hover > ul {

  -webkit-transform: translateY(10px);

  -ms-transform: translateY(10px);

  transform: translateY(10px);

}



@-webkit-keyframes stickySlideUp {

  from {

    -webkit-transform: translateY(100%);

    transform: translateY(100%);

  }

  to {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@keyframes stickySlideUp {

  from {

    -webkit-transform: translateY(100%);

    transform: translateY(100%);

  }

  to {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@-webkit-keyframes stickySlideDown {

  from {

    -webkit-transform: translateY(-100%);

    transform: translateY(-100%);

  }

  to {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@keyframes stickySlideDown {

  from {

    -webkit-transform: translateY(-100%);

    transform: translateY(-100%);

  }

  to {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

.is-stuck {

  position: fixed;

  left: 0;

  right: 0;

  top: 0;

  z-index: 99;

  border: none !important;

  -webkit-animation: stickySlideDown 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;

  -moz-animation: stickySlideDown 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;

  animation: stickySlideDown 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;

}



.admin-bar .is-stuck,

.admin-bar .site-header-vertical {

  top: 32px;

}



@media screen and (min-width: 1024px) {

  .is-stuck {

    -webkit-box-shadow: 4px 4px 30px 0px rgba(42, 67, 113, 0.15);

    -moz-box-shadow: 4px 4px 30px 0px rgba(42, 67, 113, 0.15);

    box-shadow: 4px 4px 30px 0px rgba(42, 67, 113, 0.15);

    -webkit-backdrop-filter: blur(20px) saturate(180%);

    backdrop-filter: blur(10px) saturate(180%);



  }

  .is-stuck .main-navigation ul.menu > li:hover > ul {

    transform: translateY(0);

  }

  .is-stuck .main-navigation ul.menu > li > a {

    color: #66CC33;

  }

  .is-stuck .main-navigation ul.menu > li > a:after {

    color: #66CC33;

  }

  .is-stuck .main-navigation ul.menu > li > a:before {

    background: #66CC33;

  }

  .is-stuck .cart-contents .count {

    background: #fff;

    color: #415755;

  }

  #site-logo {

  min-width: 142px;

}

}

/* Responsive */

@media (max-width: 1070px) {
  .main-navigation > ul > li {

    margin: 0 10px;

  }

  .housecall-div {
    margin-left: 15px;
  }

}

@media (max-width: 1170px) {

  .big-button.housecall {
    padding: 6px 12px; /* tighter, less wide */
    font-size: 11px; /* smaller text */
  }

  .housecall-div {
    margin-left: 15px;
  }

  .main-navigation > ul > li {

    margin: 0 14px;

  }

  #site-navigation {
    margin-left: 15px;
  }
}

@media (max-width: 1440px) {

  .octf-btn-cta .btn-cta-header {

    display: none;

  }

}

@media (max-width: 1265px) {

  .octf-btn-cta .contact-header {

    display: none;

  }

  #company-intros {
    padding-top: 20px;
  }

}

@media (max-width: 782px) {

  .admin-bar .site-header,

  .admin-bar .site-header-vertical,

  .admin-bar .is-stuck {

    top: 46px;

  }

}

@media (max-width: 600px) {

  .admin-bar .is-stuck,

  .admin-bar .site-header-vertical {

    top: 0;

  }

}

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

## Vertical Header

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

@media only screen and (min-width: 1025px) {

  .site-header-vertical {

    background-image: url(https://via.placeholder.com/340x950.png);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover

  }

  .site-header-vertical {

    width: 340px;

  }

  .header-vertical .site-footer {

    margin-left: 340px;

  }

  .header-vertical .footer-bottom {

    margin-left: 340px;

  }

  .header-vertical .site-content {

    margin-left: 340px;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

  }

  .header-vertical .site-footer {

    margin-left: 340px;

  }



  .site-header-vertical {

    position: fixed;

    top: 0;

    left: 0;

    width: 340px;

    height: 100%;

    outline: 0;

    z-index: 101;

    -webkit-backface-visibility: hidden;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

  }

  .site-header-vertical .header-desktop {

    position: relative;

    display: inline-block;

    width: 100%;

    vertical-align: middle;

    height: 100%;

  }



  .vertical-main-navigation {

    position: relative;

    display: table;

    width: 100%;

    height: 100%;

    min-height: 0;

    vertical-align: middle;

    padding: 0;

    z-index: 100;

  }

  .vertical-main-navigation > ul {

    display: table-cell;

    width: 100%;

    height: 100%;

    vertical-align: middle;

  }

  .vertical-main-navigation ul {

    font-family: "Titillium Web", sans-serif;

    font-weight: normal;

    font-size: 14px;

    margin: 0px 0px;

    padding: 0px 0px;

  }

  .vertical-main-navigation ul ul {

    margin: 0;

    padding: 0;

    background-color: #415755;

  }

  .vertical-main-navigation ul > li > a {

    position: relative;

    text-decoration: none;

    text-align: center;

    text-transform: uppercase;

    display: block;

    outline: none;

    color: #fff;

    line-height: 48px;

    white-space: nowrap;

    overflow: hidden;

    -webkit-transition: all 0.2s ease-out 0s;

    -moz-transition: all 0.2s ease-out 0s;

    -o-transition: all 0.2s ease-out 0s;

    transition: all 0.2s ease-out 0s;

  }

  .vertical-main-navigation ul > li.menu-item-has-children > a:after {

    position: absolute;

    right: 10px;

    top: 50%;

    margin-top: -4px;

    font-family: "Flaticon";

    content: "";

    font-size: 8px;

    line-height: 1;

    color: #fff;

    font-weight: 500;

  }

  .vertical-main-navigation ul li {

    display: block;

    position: relative;

  }

  .vertical-main-navigation ul li li {

    padding: 0px 34px;

  }

  .vertical-main-navigation ul li li a {

    font-size: 16px;

    line-height: 30px;

    color: #b6b6b6;

    text-align: left;

    display: block;

    padding: 5px 0px 5px 0px;

    position: relative;

    text-decoration: none;

    outline: none;

    text-transform: none;

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

  }

  .vertical-main-navigation ul li li a:hover, .vertical-main-navigation ul li li.current-menu-item > a, .vertical-main-navigation ul li li.current-menu-ancestor > a {

    padding-left: 40px;

    color: #fff;

  }

  .vertical-main-navigation ul li ul {

    min-width: 250px;

    white-space: nowrap;

    padding: 20px 0px;

    position: absolute;

    top: 10px;

    left: calc(100% + 15px);

    z-index: 10;

    visibility: hidden;

    opacity: 0;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

  }

  .vertical-main-navigation ul li ul ul {

    left: 100%;

    top: 10px;

    transition: all 0.35s ease-in-out;

    -webkit-transition: all 0.35s ease-in-out;

    -moz-transition: all 0.35s ease-in-out;

    -o-transition: all 0.35s ease-in-out;

    -ms-transition: all 0.35s ease-in-out;

  }

  .vertical-main-navigation ul > li:hover > ul {

    visibility: visible;

    opacity: 1;

    -webkit-transform: translateY(-10px);

    -ms-transform: translateY(-10px);

    transform: translateY(-10px);

  }



  .vertical-main-navigation.no-line ul li li a:hover,

  .vertical-main-navigation.no-line ul ul li.current-menu-item > a,

  .vertical-main-navigation.no-line ul ul li.current-menu-ancestor > a {

    padding-left: 0;

  }



  .vertical-main-navigation:not(.no-line) ul li li a:before {

    position: absolute;

    content: "";

    top: 50%;

    left: 0;

    width: 0px;

    height: 1px;

    background: #fff;

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    visibility: hidden;

    opacity: 0;

  }

  .vertical-main-navigation:not(.no-line) ul li li a:hover:before, .vertical-main-navigation:not(.no-line) ul ul li.current-menu-item > a:before, .vertical-main-navigation:not(.no-line) ul ul li.current-menu-ancestor > a:before {

    left: 0px;

    visibility: visible;

    opacity: 1;

    width: 30px;

  }

}

@media (min-width: 768px) {

  .row-height-full.elementor-section.elementor-section-height-full > .elementor-container .elementor-row {

    height: 100%;

  }

}

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

## Header Mobile

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

.header_mobile {

  display: none;

}



@media only screen and (max-width: 1024px) {

  .octf-main-header,

  .header-desktop {

    display: none;

  }



  .header_mobile {

    display: block;

    width: 100%;

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  }

  .header_mobile.open, .header_mobile.is-stuck {

    background: #415755;

    -webkit-box-shadow: 4px 4px 30px 0px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: 4px 4px 30px 0px rgba(0, 0, 0, 0.3);

    box-shadow: 4px 4px 30px 0px rgba(0, 0, 0, 0.3);

  }

  .header_mobile .mobile_nav .mobile_mainmenu li a {

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

  }

  .header_mobile .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow i {

    color: rgba(255, 255, 255, 0.7);

  }



  .header_mobile .mlogo_wrapper {

    position: relative;

  }

  .header_mobile .mlogo_wrapper img {

    height: 90px;

  }



  .header_mobile .mlogo_wrapper .mobile_logo {

    float: left;

  }



  #mmenu_toggle {

    position: absolute;

    cursor: pointer;

    width: 26px;

    height: 20px;

    right: 34px;

    margin-top: -10px;

    top: 50%;

  }



  #mmenu_toggle button {

    position: absolute;

    left: 0;

    top: 50%;

    margin: -2px 0 0;

    background: #fff;

    height: 3px;

    padding: 0;

    border: none;

    width: 100%;

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    outline: none;

    border-radius: 2px;

  }



  #mmenu_toggle button:before {

    content: "";

    position: absolute;

    left: 0;

    top: -8px;

    width: 26px;

    height: 3px;

    background: #fff;

    -webkit-transform-origin: 1.5px center;

    transform-origin: 1.5px center;

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    border-radius: 2px;

  }



  #mmenu_toggle button:after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 26px;

    height: 3px;

    background: #fff;

    -webkit-transform-origin: 1.5px center;

    transform-origin: 1.5px center;

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    border-radius: 2px;

  }



  #mmenu_toggle.active button {

    background: none;

  }



  #mmenu_toggle.active button:before {

    top: 0;

    -webkit-transform: rotate3d(0, 0, 1, -45deg);

    transform: rotate3d(0, 0, 1, -45deg);

    -webkit-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

  }



  #mmenu_toggle.active button:after {

    bottom: 0;

    -webkit-transform: rotate3d(0, 0, 1, 45deg);

    transform: rotate3d(0, 0, 1, 45deg);

    -webkit-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

  }



  .mobile_nav {

    display: none;

    margin-top: 20px;

  }



  .mobile_nav .mobile_mainmenu {

    font-family: "Titillium Web", sans-serif;

    margin: 0;

    padding: 0;

  }



  .mobile_nav .mobile_mainmenu ul {

    position: relative;

    margin: 0;

    padding: 0;

    margin-left: 15px;

  }



  .mobile_nav .mobile_mainmenu ul {

    display: none;

  }



  .mobile_nav .mobile_mainmenu li {

    position: relative;

    list-style: none;

  }



  .mobile_nav .mobile_mainmenu li a {

    padding: 9px 0;

    display: block;

    font-size: 16px;

  }



  .mobile_nav .mobile_mainmenu > li > a {

    text-transform: uppercase;

    font-size: 14px;

  }



  .mobile_nav .mobile_mainmenu > li:last-child > a {

    border: none;

  }



  .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow {

    color: #fff;

    position: absolute;

    display: block;

    right: 0;

    top: 0;

    cursor: pointer;

    width: 40px;

    height: auto;

    padding: 9px 12px 9px 0;

    line-height: inherit;

    text-align: right;

    box-sizing: border-box;

  }



  .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow i {

    color: #9397a7;

    display: inline-block;

    line-height: 1;

    -webkit-transition: transform 0.3s ease-in-out;

    -moz-transition: transform 0.3s ease-in-out;

    transition: transform 0.3s ease-in-out;

  }



  .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow i:before {

    font-size: 10px;

    font-weight: 600;

  }



  .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow.active i {

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    transform: rotate(90deg);

  }



  .mobile_nav ul li a:before {

    position: absolute;

    content: "";

    top: 50%;

    left: 0;

    width: 30px;

    height: 1px;

    background: #fff;

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    visibility: hidden;

    opacity: 0;

  }



  .mobile_nav ul li > a:hover:before {

    visibility: visible;

    opacity: 1;

  }



  .mobile_nav ul li a:hover {

    padding-left: 40px;

  }

}

@media only screen and (max-width: 767px) {

  .mlogo_wrapper {

    width: 100%;

  }

}

@media only screen and (max-width: 320px) {

  .mobile_logo img {

    max-width: 230px;

    max-height: 47px;

  }

}

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

## Page Header

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

.page-header {

  width: 100%;

  height: 500px;

  color: #fff;

  font-family: "Titillium Web", sans-serif;

  font-weight: 500;

  font-size: 14px;

  text-align: center;

  background: center center no-repeat;

  background-size: cover;

}

.page-header .breadcrumbs {

  margin-bottom: 0;

  padding-left: 0;

}

.page-header .breadcrumbs li {

  display: inline-block;

  text-transform: uppercase;

  position: relative;

  padding-left: 24px;

  margin-left: 7px;

}

.page-header .breadcrumbs li:before {

  content: "••";

  position: absolute;

  color: #fff;

  font-family: "Josefin Sans", sans-serif;

  font-size: 14px;

  line-height: 1;

  letter-spacing: 4px;

  left: -2px;

  top: 8px;

}

.page-header .breadcrumbs li:first-child {

  padding-left: 0;

  margin-left: 0;

}

.page-header .breadcrumbs li:first-child:before {

  display: none;

}

.page-header .breadcrumbs li a {

  color: #fff;

  background-size: 0 2px;

  background-position: 0 88%;

  background-repeat: no-repeat;

  background-image: linear-gradient(0deg, #7e7e7e, #f5f5f5);

}

.page-header .breadcrumbs li a:hover {

  background-size: 100% 2px;

}

.page-header.header-static .page-title {

  margin-top: -15px;

}



/*.page-title {*/

/*  color: #FFFFFF;*/

/*  font-size: 60px;*/

/*  font-weight: 300;*/

/*  margin-top: 75px;*/

/*  margin-bottom: 10px;*/

/*}*/

.page-title {
  color: #FFFFFF;
  font-size: 60px;
  font-weight: 300;
  margin-top: 75px;
  margin-bottom: 10px;

  /* Text shadow for depth and visibility */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 255, 255, 0.25);

  /* Keep the bright white color instead of using gradient */
  color: #FFFFFF;

  /* Enhance the glow effect */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 255, 255, 0.4),
    0 0 20px rgba(255, 255, 255, 0.2);

  /* Add a subtle outline */
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2);

  /* Add a subtle blur on hover for interactive effect */
  transition: filter 0.3s ease;
}

.page-title:hover {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

/* For dark backgrounds, adjust the shadow */
@media (prefers-color-scheme: dark) {
  .page-title {
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.7),
      0 0 12px rgba(255, 255, 255, 0.3);
  }
}

/* For light backgrounds, adjust the shadow and add contrast */
@media (prefers-color-scheme: light) {
  .page-title {
    color: #FFFFFF;
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 8px rgba(0, 0, 0, 0.6),
      0 0 12px rgba(0, 100, 255, 0.4);
    -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.4);
  }
}

.page-header .breadcrumbs {
  color: #FFFFFF;

  /* Add depth with text shadow */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 6px rgba(255, 255, 255, 0.4),
    0 0 12px rgba(255, 255, 255, 0.2);

  /* Add a subtle outline for better visibility */
  -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.2);

  /* Smooth transition for hover effect */
  transition: all 0.2s ease;
}

/* Add a hover effect for interactive feel */
.page-header .breadcrumbs a:hover {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(255, 255, 255, 0.5);
  filter: brightness(1.2);
}

/* For dark backgrounds, slightly adjust the shadow */
@media (prefers-color-scheme: dark) {
  .page-header .breadcrumbs {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.7),
      0 0 8px rgba(255, 255, 255, 0.3);
  }
}

/* For light backgrounds, use stronger shadows and contrast */
@media (prefers-color-scheme: light) {
  .page-header .breadcrumbs {
    color: #FFFFFF;
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.8),
      0 0 6px rgba(0, 0, 0, 0.6),
      0 0 10px rgba(0, 100, 255, 0.3);
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
  }
}

/*Header Left*/

.header-vertical .page-header {

  height: 400px;

}



/* Dark scheme*/

.dark-scheme .page-title {

  margin-top: 0;

}



@media (max-width: 1024px) {

  .page-header {

    height: 400px;

  }



  .page-title {

    font-size: 42px;

  }

}

@media (max-width: 600px) {

  .page-header .page-title {

    font-size: 32px;

  }

}

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

# Accessibility

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

/* Text meant only for screen readers. */

.screen-reader-text {

  border: 0;

  clip: rect(1px, 1px, 1px, 1px);

  clip-path: inset(50%);

  height: 1px;

  margin: -1px;

  overflow: hidden;

  padding: 0;

  position: absolute !important;

  width: 1px;

  word-wrap: normal !important;

  /* Many screen reader and browser combinations announce broken words as they would appear visually. */

}

.screen-reader-text:focus {

  background-color: #f1f1f1;

  border-radius: 3px;

  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);

  clip: auto !important;

  clip-path: none;

  color: #21759b;

  display: block;

  font-size: 14px;

  font-weight: bold;

  height: auto;

  left: 5px;

  line-height: normal;

  padding: 15px 23px 14px;

  text-decoration: none;

  top: 5px;

  width: auto;

  z-index: 100000;

  /* Above WP toolbar. */

}



/* Do not show the outline on the skip link target. */

#content[tabindex="-1"]:focus {

  outline: 0;

}



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

# Alignments

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

.alignleft {

  float: left;

  margin-right: 1.5em;

}



.alignright {

  float: right;

  margin-left: 1.5em;

}



.aligncenter {

  clear: both;

  display: block;

  margin-left: auto;

  margin-right: auto;

}



.text-center {

  text-align: center;

}



.text-left {

  text-align: left;

}



.text-right {

  text-align: right;

}



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

# Clearings

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

.clear:before,

.clear:after,

.entry-content:before,

.entry-content:after,

.comment-content:before,

.comment-content:after,

.site-header:before,

.site-header:after,

.site-content:before,

.site-content:after,

.site-footer:before,

.site-footer:after {

  content: "";

  display: table;

  table-layout: fixed;

}



.clear:after,

.entry-content:after,

.comment-content:after,

.site-header:after,

.site-content:after,

.site-footer:after {

  clear: both;

}



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

# Content

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

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

## Posts and pages

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

.entry-content {

  padding: 42px 0 42px;

}



.post-box .post-inner {

  padding: 20px 15px 10px;

  border: 5px double #749996;

  background: #fff;

  margin-bottom: 30px;

  overflow: hidden;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.post-box .entry-title {

  margin-bottom: 12px;

}

.post-box .entry-title a {

  color: #415755;

  background-image: linear-gradient(0deg, #4b4b4b, #f5f5f5);

}

.post-box p {

  line-height: 30px;

  margin-bottom: 16px;

}

.post-box .entry-footer {

  line-height: 1;

}

.post-box .entry-media {

  position: relative;

  margin-bottom: 34px;

  overflow: hidden;

  height: 50%;

}

.post-box .entry-media.post-cat-abs .post-cat {

  position: absolute;

  z-index: 1;

  bottom: 0;

  left: 0;

}

.post-box .entry-media .video-popup {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

.post-box .post-cat {

  margin-bottom: -10px;

}

.post-box .post-cat a {

  font-family: "Titillium Web", sans-serif;

  text-transform: uppercase;

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.6px;

  line-height: 1.1;

  display: inline-block;

  color: #fff;

  background: #415755;

  padding: 8px 10px;

  margin-right: 7px;

  margin-bottom: 10px;

}

.post-box .post-cat a:hover {

  background: #f5f5f5;

  color: #415755;

}

.post-box .entry-meta {

  font-family: "Josefin Sans", sans-serif;

  text-transform: uppercase;

  font-size: 14px;

  margin-bottom: 8px;

  color: #415755;

}

.post-box .entry-meta > span {

  position: relative;

  display: inline-block;

  margin-right: 10px;

  padding-left: 25px;

}

.post-box .entry-meta > span:before {

  position: absolute;

  content: "••";

  font-size: 18px;

  line-height: 1;

  left: -2px;

  top: 4px;

}

.post-box .entry-meta > span:first-child {

  padding-left: 0;

}

.post-box .entry-meta > span:first-child:before {

  display: none;

}

.post-box .entry-meta > span a {

  color: #9f9e9e;

}

.post-box .entry-meta > span a:hover {

  color: #415755;

}

.post-box .img-slider {

  position: relative;

}

.post-box .img-slider .octf-swiper-button-next, .post-box .img-slider .octf-swiper-button-prev {

  background: #fff;

  color: #415755;

}

.post-box .img-slider .octf-swiper-button-next:hover, .post-box .img-slider .octf-swiper-button-prev:hover {

  color: #9f9e9e;

}

.post-box .audio-box iframe {

  width: 100%;

  margin-bottom: 30px;

}

.post-box .link-box {

  margin-bottom: 22px;

  position: relative;

  padding-left: 52px;

}

.post-box .link-box a {

  font-size: 22px;

  font-weight: 400;

  font-family: "Titillium Web", sans-serif;

  color: #415755;

}

.post-box .link-box i {

  color: #415755;

  position: absolute;

  left: 0;

  top: -1px;

}

.post-box .link-box i:before {

  font-size: 40px;

  line-height: 1;

}

.post-box .quote-box {

  overflow: hidden;

  margin-bottom: 20px;

}

.post-box .quote-box img {

  float: left;

  width: 28px;

  height: 22px;

  margin-top: 4px;

}

.post-box .quote-box img:before {

  font-size: 100px;

  line-height: 1;

}

.post-box .quote-box .quote-text {

  position: relative;

  padding-left: 42px;

  font-size: 22px;

  font-weight: 400;

  line-height: 36px;

  font-family: "Titillium Web", sans-serif;

  color: #415755;

}

.post-box .quote-box .quote-text span {

  display: block;

  font-family: "Josefin Sans", sans-serif;

  margin-top: 6px;

  text-transform: uppercase;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.5px;

  color: #9f9e9e;

}

.post-box .quote-box .quote-text:before {

  position: absolute;

  content: "";

  top: 5px;

  left: 0;

  background-image: url("https://via.placeholder.com/189x150.png");

  width: 28px;

  height: 22px;

  background-repeat: no-repeat;

}

.post-box:not(.blog-post):hover .post-inner {

  border-color: #415755;

}


.page-pagination {

  margin-top: 50px;

  margin-bottom: 0;

}

.page-pagination li {

  display: inline-block;

}

.page-pagination li a, .page-pagination li span {

  font-family: "Titillium Web", sans-serif;

  font-size: 16px;

  color: #bfbfbf;

  font-weight: 600;

  display: block;

  text-align: center;

  line-height: 18px;

  margin-right: 5px;

  border-bottom: 2px solid #d8d8d8;

  padding: 7px;

  background: transparent;

}

.page-pagination li a i:before, .page-pagination li span i:before {

  font-size: 12px;

}

.page-pagination li a.next, .page-pagination li a.prev {

  line-height: 15px;

}

.page-pagination li span, .page-pagination li a:hover {

  color: #415755;

  border-bottom-color: #000000;

}



/* blog post */

.blog-post {

  box-shadow: none;

  overflow: inherit;

  margin-bottom: 0;

}

.blog-post > .inner-post p:not(:last-child) {

  margin-bottom: 20px;

}

.blog-post > .inner-post p:last-child {

  margin-bottom: 0;

}

.blog-post > .inner-post .entry-summary {

  padding-bottom: 50px;

  overflow: hidden;

}

.blog-post .entry-footer {

  margin-bottom: 30px;

  padding-bottom: 40px;

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

.blog-post .tagcloud {

  margin: 2px -3px 0;

  float: left;

}

.blog-post .tagcloud a {

  color: #415755;

  background: #fff;

  font-size: 14px !important;

  font-family: "Titillium Web", sans-serif;

  text-transform: lowercase;

  font-weight: 400;

  padding: 8px 12px;

  margin: 0 3px;

  margin-bottom: 10px;

  line-height: 1;

  display: inline-block;

  border: 1px solid #e0e0e0;

  margin-bottom: 0;

}

.blog-post .tagcloud a:hover {

  background: #415755;

  color: #fff;

}

.blog-post .share-post {

  float: right;

  margin: 0 -5px;

}

.blog-post .share-post a {

  float: left;

  height: 30px;

  width: 30px;

  text-align: center;

  line-height: 30px;

  font-weight: 500;

  font-size: 14px;

  font-family: "Titillium Web", sans-serif;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  background: transparent;

  color: #415755;

  margin: 0 5px;

  border: 1px solid #e0e0e0;

  transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -ms-transition: all 0.4s ease-in-out;

}

.blog-post .share-post a:hover {

  color: #fff;

}

.blog-post .share-post a:hover.face {

  background: #4661c5;

  border-color: #4661c5;

}

.blog-post .share-post a:hover.twit {

  background: #44b1e4;

  border-color: #44b1e4;

}

.blog-post .share-post a:hover.pint {

  background: #ff2e2e;

  border-color: #ff2e2e;

}

.blog-post .share-post a:hover.linked {

  background: #0073B0;

  border-color: #0073B0;

}

.blog-post .share-post a:hover.google {

  background: #DC4A38;

  border-color: #DC4A38;

}

.blog-post .share-post a:hover.tumblr {

  background: #3C586D;

  border-color: #3C586D;

}

.blog-post .share-post a:hover.reddit {

  background: #FD4507;

  border-color: #FD4507;

}

.blog-post .share-post a:hover.vk {

  background: #5082B9;

  border-color: #5082B9;

}

.blog-post .author-bio {

  position: relative;

  text-align: center;

  overflow: hidden;

  margin-bottom: 50px;

  padding-top: 76px;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

}

.blog-post .author-bio .author-image {

  margin-bottom: 20px;

  position: absolute;

  top: 0;

  left: 50%;

  border: 10px solid #fff;

  overflow: hidden;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}

.blog-post .author-bio .author-info {

  padding: 96px 170px 46px;

  background-position: center;

  background-repeat: no-repeat;

}

.blog-post .author-bio .author-info h5 {

  margin-bottom: 15px;

}

.blog-post .author-bio .author-info .des {

  margin-bottom: 15px;

}

.blog-post .author-bio .author-info .author-socials a {

  font-size: 14px;

  margin-right: 22px;

  color: #b6b6b6;

}

.blog-post .author-bio .author-info .author-socials a:hover {

  color: #415755;

}

.blog-post .author-bio .author-info .author-socials a:last-child {

  margin-right: 0;

}



.drop-cap, .elementor-drop-cap {

  font-family: "Titillium Web", sans-serif;

  float: left;

  text-align: center;

  background: #fff;

  width: 42px;

  height: 42px;

  line-height: 1;

  margin: 8px 18px 0 0 !important;

}

.drop-cap span, .elementor-drop-cap span {

  font-size: 24px;

  line-height: 40px;

  border: 1px solid #415755;

  display: block !important;

  font-weight: bold;

  color: #415755;

}



.post-nav {

  margin-bottom: 50px;

  overflow: hidden;

}

.post-nav a {

  position: relative;

  display: block;

  line-height: 1;

  min-height: 75px;

}

.post-nav a:before {

  position: absolute;

  font-family: "Flaticon";

  font-size: 20px;

  top: 50%;

  color: #415755;

  background: transparent;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.post-nav h6 {

  font-size: 18px;

  line-height: 24px;

  margin-bottom: 11px;

}

.post-nav h6 > span {

  background-image: linear-gradient(0deg, #4b4b4b, #f5f5f5);

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.post-nav span:not(.title-link) {

  font-family: "Josefin Sans", sans-serif;

  text-transform: uppercase;

  display: inline-block;

  font-size: 12px;

  line-height: 1;

  color: #9f9e9e;

}

.post-nav .post-prev {

  float: left;

  margin-left: -40px;

  width: 380px;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.post-nav .post-prev a {

  padding-left: 40px;

}

.post-nav .post-prev a:before {

  content: "";

  left: 0;

}

.post-nav .post-prev .thumb-post-prev {

  float: left;

  margin-right: 20px;

  width: 75px;

}

.post-nav .post-prev .info-post-prev {

  text-align: left;

}

.post-nav .post-prev:hover {

  margin-left: 0;

}

.post-nav .post-next {

  float: right;

  margin-right: -40px;

  width: 380px;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.post-nav .post-next a {

  padding-right: 40px;

}

.post-nav .post-next a:before {

  content: "";

  right: 0;

}

.post-nav .post-next .thumb-post-next {

  float: right;

  margin-left: 20px;

  width: 75px;

}

.post-nav .post-next .info-post-next {

  text-align: right;

}

.post-nav .post-next:hover {

  margin-right: 0;

}



.related-posts h3, .blog-grid h3, .blog-slider h3 {

  margin-bottom: 30px;

}

.related-posts .post-box .post-inner, .blog-grid .post-box .post-inner, .blog-slider .post-box .post-inner {

  padding: 19px;

  margin-bottom: 0;

}

.related-posts .post-box .post-inner .entry-media, .blog-grid .post-box .post-inner .entry-media, .blog-slider .post-box .post-inner .entry-media {

  margin-bottom: 24px;

}

.related-posts .post-box .post-inner .the-excerpt, .blog-grid .post-box .post-inner .the-excerpt, .blog-slider .post-box .post-inner .the-excerpt {

  margin-bottom: 5px;

}

.related-posts .post-box .post-inner .entry-title, .blog-grid .post-box .post-inner .entry-title, .blog-slider .post-box .post-inner .entry-title {

  margin-bottom: 15px;

}



.related-posts {

  margin-bottom: 78px;

}



/*Version Dark*/

.dark-scheme .post-box .quote-box .quote-text:before {

  background-image: url("https://via.placeholder.com/189x150.png");

}

.dark-scheme .page-pagination li span, .dark-scheme .page-pagination li a:hover {

  color: #dddddd;

  border-color: #505050;

}

.dark-scheme .blog-post .author-bio .author-info h5 {

  color: #415755;

}

.dark-scheme .blog-post .tagcloud a {

  color: #fff;

  background: #415755;

  border-color: #415755;

}

.dark-scheme .blog-post .tagcloud a:hover {

  border-color: #fff;

  background: #fff;

  color: #415755;

}

.dark-scheme .post-nav a:before {

  color: #fff;

}

.dark-scheme .drop-cap, .dark-scheme .elementor-drop-cap {

  background: #0a0a0a;

}

.dark-scheme .drop-cap span, .dark-scheme .elementor-drop-cap span {

  border-color: #fff;

  color: #fff;

}



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

## Comments

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

.comments-area ol, .comments-area ul {

  list-style: none;

  padding-left: 0;

}

.comments-area ol .comment-respond, .comments-area ul .comment-respond {

  margin-top: -30px;

  margin-bottom: 40px;

}

.comments-area .comments-title {

  margin-bottom: 25px;

}

.comments-area .comment-item {

  padding-bottom: 12px;

  margin-bottom: 40px;

  overflow: hidden;

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

.comments-area .comment-item .gravatar {

  float: left;

}

.comments-area .comment-item .comment-content:not(.pingback) {

  padding-left: 110px;

}

.comments-area .comment-item .comment-meta {

  position: relative;

}

.comments-area .comment-item .comment-meta .comment-author {

  font-size: 18px;

  text-transform: capitalize;

  margin-bottom: 2px;

  margin-top: -3px;

}

.comments-area .comment-item .comment-meta .comment-time {

  font-family: "Josefin Sans", sans-serif;

  display: block;

  color: #9f9e9e;

  font-size: 14px;

  font-weight: 600;

  text-transform: uppercase;

  margin-bottom: 4px;

}

.comments-area .comment-item .comment-meta .comment-reply {

  display: block;

  position: absolute;

  top: 0;

  right: 10px;

}

.comments-area ul.children {

  padding-left: 110px;

}



.comment-respond {

  padding-top: 10px;

}

.comment-respond .comment-reply-title small {

  font-size: 16px;

  font-weight: 400;

  text-transform: lowercase;

  margin-left: 5px;

}

.comment-respond .comment-reply-title small a {

  color: #ad1010;

}

.comment-respond .comment-reply-title small a:hover {

  color: #9f9e9e;

}



.comment-form p {

  margin-bottom: 20px;

  line-height: 1.4;

}

.comment-form p label {

  margin-left: 8px;

}

.comment-form p.form-submit {

  margin-bottom: 0;

}

.comment-form .comment-notes {

  margin-bottom: 10px;

}

.comment-form .logged-in-as {

  font-size: 14px;

  margin-bottom: 20px;

}

.comment-form .logged-in-as a {

  color: #555555;

}

.comment-form input[type=text],

.comment-form input[type=email] {

  width: 100%;

}

.comment-form .octf-btn {

  margin-top: 10px;

}

.comment-form .octf-btn:before, .comment-form .octf-btn:after {

  display: none;

}

.comment-form .octf-btn:hover {

  border: 1px solid;

}



/*Version Dark*/

.dark-scheme .comments-area .comment-item {

  border-bottom-color: rgba(255, 255, 255, 0.1);

}

.dark-scheme .comment-form .logged-in-as a {

  color: #dddddd;

}



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

## Widgets

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

.widget ul {

  list-style: none;

  padding-left: 0;

  margin-bottom: 0;

}

.widget ul li {

  position: relative;

}

.widget ul li a {

  display: inline;

  background-size: 0 2px;

  background-position: 0 88%;

  background-repeat: no-repeat;

  background-image: linear-gradient(0deg, #4b4b4b, #f5f5f5);

}

.widget ul li a:hover {

  background-size: 100% 2px;

}

.widget .tagcloud {

  margin: 0 -3px -10px;

}

.widget .tagcloud a {

  color: #415755;

  background: #fff;

  font-size: 14px !important;

  font-family: "Titillium Web", sans-serif;

  text-transform: lowercase;

  font-weight: 400;

  padding: 8px 12px;

  margin: 0 3px;

  margin-bottom: 10px;

  line-height: 1;

  display: inline-block;

  border: 1px solid #e0e0e0;

}

.widget .tagcloud a:hover {

  background: #415755;

  color: #fff;

}



.widget-area {

  font-family: "Titillium Web", sans-serif;

}

.widget-area .widget {

  margin-bottom: 43px;

}

.widget-area .widget:last-child {

  margin-bottom: 0;

}

.widget-area .widget .widget-title {

  padding-bottom: 12px;

  margin-bottom: 40px;

  text-transform: uppercase;

  font-weight: 600;

  text-align: left;

  position: relative;

}

.widget-area .widget .widget-title:before {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 66px;

  height: 2px;

  border-bottom: 2px dotted #415755;

}

.widget-area .widget ul:not(.recent-news) > li {

  font-weight: 600;

  font-size: 16px;

  position: relative;

  margin-bottom: 10px;

}

.widget-area .widget ul:not(.recent-news) > li:last-child {

  margin-bottom: 0;

}

.widget-area .widget ul:not(.recent-news) > li a {

  color: #415755;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.widget-area .widget ul:not(.recent-news) > li .count {

  font-family: "Josefin Sans", sans-serif;

  position: absolute;

  right: 20px;

  top: 50%;

  line-height: 1;

  color: #9f9e9e;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.widget-area .widget select {

  width: 100%;

  padding: 8px;

  outline: none;

}

.widget-area .widget table caption {

  margin-bottom: 10px;

}

.widget-area .widget table td, .widget-area .widget table th {

  border-color: #aaa;

  text-align: center;

}

.widget-area .widget_categories ul li a,

.widget-area .widget_archive ul li a,

.widget-area .widget_nav_menu ul li a,

.widget-area .widget_product_categories ul li a {

  display: block;

  padding: 10px 20px;

  background: #f4f4f4;

  text-transform: uppercase;

}

.widget-area .widget_categories ul li a:hover,

.widget-area .widget_archive ul li a:hover,

.widget-area .widget_nav_menu ul li a:hover,

.widget-area .widget_product_categories ul li a:hover {

  color: #fff;

  background: #415755;

  text-decoration: none;

}

.widget-area .widget_categories ul li a:hover + span.count,

.widget-area .widget_archive ul li a:hover + span.count,

.widget-area .widget_nav_menu ul li a:hover + span.count,

.widget-area .widget_product_categories ul li a:hover + span.count {

  color: #fff;

}

.widget-area .widget_nav_menu ul li a > span {

  color: #dddddd;

}

.widget-area .widget_nav_menu ul li.current-menu-item a {

  color: #fff;

  background: #415755;

}



.widget .recent-news li:not(:last-child) {

  margin-bottom: 25px;

}

.widget .recent-news .thumb {

  float: left;

  margin-right: 20px;

  width: 75px;

}

.widget .recent-news h6 {

  margin-bottom: 15px;

  line-height: 24px;

  font-size: 18px;

  font-weight: 400;

}

.widget .recent-news h6 a {

  color: #415755;

}

.widget .recent-news .post-on {

  font-family: "Josefin Sans", sans-serif;

  font-size: 12px;

  display: block;

  line-height: 1;

  text-transform: uppercase;

  color: #9f9e9e;

}



.search-form {

  position: relative;

}

.search-form .search-field {

  width: 100%;

  padding: 0 46px 0 10px;

  height: 46px;

  line-height: 1;

  border: none;

  border-bottom: 1px solid #e6e6e6;

  -webkit-border-radius: 0;

  -moz-border-radius: 0;

  border-radius: 0;

}

.search-form .search-submit {

  border: none;

  position: absolute;

  top: 0;

  right: 0;

  height: 100%;

  width: 46px;

  outline: none;

  text-align: center;

  vertical-align: middle;

  color: #415755;

  background: transparent;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.search-form .search-submit i:before, .search-form .search-submit i:after {

  font-size: 17px;

  font-weight: 600;

}



.author-widget_wrapper {

  padding: 30px;

  background-image: url('https://via.placeholder.com/270x370.png');

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

}

.author-widget_wrapper .author-widget_image-wrapper {

  margin-bottom: 22px;

}

.author-widget_wrapper .author-widget_title {

  font-size: 22px;

  margin-bottom: 5px;

  color: #fff;

}

.author-widget_wrapper .author-widget_text {

  font-family: "Raleway", sans-serif;

  font-size: 14px;

  line-height: 28px;

  color: #dddddd;

  margin-bottom: 15px;

}



.author-widget_social a {

  display: inline-block;

  font-size: 12px;

  text-align: center;

  height: 28px;

  width: 28px;

  line-height: 28px;

  cursor: pointer;

  margin-right: 7px;

  background: transparent;

  border: 1px solid #e0e0e0;

  color: #fff;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.author-widget_social a:last-child {

  margin-right: 0px;

}

.author-widget_social a:hover {

  background: #444444;

  border-color: #444444;

}



.instafeed-gallery {

  margin-left: -5px;

  margin-right: -5px;

}

.instafeed-gallery .instafeed-item {

  display: inline-block;

  width: 33.33333333%;

  padding-left: 5px;

  padding-right: 5px;

  margin-bottom: 10px;

}

.instafeed-gallery .instafeed-item a {

  display: inline-block;

  position: relative;

}

.instafeed-gallery .instafeed-item a img {

  max-width: 100%;

  height: auto;

}

.instafeed-gallery .instafeed-item a .overlay {

  opacity: 0;

}

.instafeed-gallery .instafeed-item a:hover .overlay {

  z-index: 1;

  opacity: 0.3;

}

.instafeed-gallery .instafeed-item:nth-last-child(1), .instafeed-gallery .instafeed-item:nth-last-child(2), .instafeed-gallery .instafeed-item:nth-last-child(3) {

  margin-bottom: 0;

}



/*Version Dark*/

.dark-scheme .widget-area .widget .widget-title:before {

  border-color: #fff;

}

.dark-scheme .widget-area .widget ul:not(.recent-news) > li a {

  color: #fff;

}

.dark-scheme .widget-area .widget_categories ul li a,

.dark-scheme .widget-area .widget_archive ul li a,

.dark-scheme .widget-area .widget_nav_menu ul li a,

.dark-scheme .widget-area .widget_product_categories ul li a {

  background: #415755;

}

.dark-scheme .widget-area .widget_categories ul li a:hover,

.dark-scheme .widget-area .widget_archive ul li a:hover,

.dark-scheme .widget-area .widget_nav_menu ul li a:hover,

.dark-scheme .widget-area .widget_product_categories ul li a:hover {

  color: #415755;

  background: #fff;

}

.dark-scheme .widget-area .widget_categories ul li a:hover + span.count,

.dark-scheme .widget-area .widget_archive ul li a:hover + span.count,

.dark-scheme .widget-area .widget_nav_menu ul li a:hover + span.count,

.dark-scheme .widget-area .widget_product_categories ul li a:hover + span.count {

  color: #415755;

}

.dark-scheme .widget .recent-news h6 a {

  color: #fff;

}

.dark-scheme .widget .tagcloud a {

  color: #fff;

  background: #415755;

  border-color: #415755;

}

.dark-scheme .widget .tagcloud a:hover {

  border-color: #fff;

  background: #fff;

  color: #415755;

}

.dark-scheme .search-form .search-submit {

  color: #dddddd;

}



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

## Responsive Blog

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

@media only screen and (max-width: 991px) {

  .content-area {

    margin-bottom: 60px;

  }

    .our-team .content-area {
  }


}

@media only screen and (max-width: 767px) {

  .blog-post .author-bio .author-info {

    padding-right: 30px;

    padding-left: 30px;

    background-size: cover;

  }



  .post-nav .post-prev,

  .post-nav .post-next {

    width: 50%;

  }



  .post-nav .thumb-post-next,

  .post-nav .thumb-post-prev {

    display: none;

  }



  .post-nav .post-next {

    margin-right: 0;

  }



  .post-nav .post-prev {

    margin-left: 0;

  }



  .related-posts .col-sm-6:first-child {

    margin-bottom: 30px;

  }



  .comment-respond .comment-reply-title {

    font-size: 32px;

  }



  .comments-area ul.children {

    padding-left: 50px;

  }



  .comment-form .octf-btn {

    font-size: 12px;

    padding: 15px 28px;

  }

}

@media only screen and (max-width: 600px) {

  .single-post .entry-content {

    padding: 50px 0 70px;

  }



  .post-box .post-inner {

    padding: 20px 20px 18px;

  }

}

@media only screen and (max-width: 479px) {

  .blog-post .tagcloud,

  .blog-post .share-post {

    float: none;

  }



  .blog-post .share-post {

    margin-top: 20px;

  }

}

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

# Infinite scroll

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

/* Globally hidden elements when Infinite Scroll is supported and in use. */

.infinite-scroll .posts-navigation,

.infinite-scroll.neverending .site-footer {

  /* Theme Footer (when set to scrolling) */

  display: none;

}



/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */

.infinity-end.neverending .site-footer {

  display: block;

}



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

# Media

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

.page-content .wp-smiley,

.entry-content .wp-smiley,

.comment-content .wp-smiley {

  border: none;

  margin-bottom: 0;

  margin-top: 0;

  padding: 0;

}



/* Make sure embeds and iframes fit their containers. */

embed,

iframe,

object {

  max-width: 100%;

}



/* Make sure logo link wraps around logo image. */

.custom-logo-link {

  display: inline-block;

}



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

## Captions

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

.wp-caption {

  margin-bottom: 1.5em;

  max-width: 100%;

}

.wp-caption img[class*=wp-image-] {

  display: block;

  margin-left: auto;

  margin-right: auto;

}

.wp-caption .wp-caption-text {

  margin: 0.8075em 0;

}



.wp-caption-text {

  text-align: center;

}



.bypostauthor {

  color: inherit;

}



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

## Galleries

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

.gallery-caption {

  display: block;

}



.gallery {

  margin-bottom: 1.5em;

  margin-left: -7px;

  margin-right: -7px;

}



.gallery-item {

  display: inline-block;

  text-align: center;

  vertical-align: top;

  width: 100%;

  margin: 0;

  padding: 7px;

}





.gallery-columns-3 .gallery-item {

  max-width: 33.33%;

}



.gallery-columns-4 .gallery-item {

  max-width: 25%;

}



.gallery-columns-5 .gallery-item {

  max-width: 20%;

}



.gallery-columns-6 .gallery-item {

  max-width: 16.66%;

}



.gallery-columns-7 .gallery-item {

  max-width: 14.28%;

}



.gallery-columns-8 .gallery-item {

  max-width: 12.5%;

}



.gallery-columns-9 .gallery-item {

  max-width: 11.11%;

}



.gallery-columns-6 .gallery-caption,

.gallery-columns-7 .gallery-caption,

.gallery-columns-8 .gallery-caption,

.gallery-columns-9 .gallery-caption {

  display: none;

}



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

# Elementor Widgets

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

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

## Heading

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

.ot-heading {

  position: relative;

}

.ot-heading > span {

  font-family: "Josefin Sans", sans-serif;

  font-size: 14px;

  font-weight: 600;

  color: #9f9e9e;

  display: inline-block;

  margin-bottom: 6px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.ot-heading h2 {

  margin-bottom: 0;

  line-height: 48px;

}

.ot-heading.is-dots {

  padding-bottom: 30px;

}

.ot-heading.is-dots:before {

  content: "";

  position: absolute;

  left: 1px;

  bottom: 1px;

  width: 66px;

  height: 2px;

  border-bottom: 2px dotted #415755;

}



.dark-scheme .ot-heading.is-dots:before {

  border-bottom-color: #fff;

}



.theratio-align-center .ot-heading.is-dots:before {

  left: 50%;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}



.theratio-align-right .ot-heading.is-dots:before {

  left: auto;

  right: 2px;

}



.theratio-align-left .ot-heading.is-dots:before {

  left: 1px;

  right: auto;

}



@media (max-width: 1024px) {

  .theratio-tablet-align-center .ot-heading.is-dots:before {

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

  }



  .theratio-tablet-align-right .ot-heading.is-dots:before {

    left: auto;

    right: 2px;

  }



  .theratio-tablet-align-left .ot-heading.is-dots:before {

    left: 1px;

    right: auto;

  }

}

@media (max-width: 767px) {

  /*BACK TO GREEN COLOR WHEN BACKGROUND GOES LIGHT*/

  .ot-heading > span {

    font-size: 12px;

  }



  .ot-heading h2 {

    font-size: 27px;

    line-height: 38px;

  }



  .ot-heading {

    padding-bottom: 20px;

  }

  .ot-heading:before {

    width: 40px;

  }



  .theratio-mobile-align-center .ot-heading.is-dots:before {

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

  }



  .theratio-mobile-align-right .ot-heading.is-dots:before {

    left: auto;

    right: 2px;

  }



  .theratio-mobile-align-left .ot-heading.is-dots:before {

    left: 1px;

    right: auto;

  }

}

@media (max-width: 600px) {

  .ot-heading h2 br {

    display: none;

  }

}

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

## Video Popup

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

.video-popup span {

  font-family: "Titillium Web", sans-serif;

  font-size: 13px;

  text-transform: uppercase;

  font-weight: 600;

  margin-left: 20px;

}



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

## Icon Box

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

.icon-box {

  padding: 37px 50px;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.icon-box .icon-main {

  color: #415755;

}

.icon-box .icon-main i, .icon-box .icon-main span:before {

  font-size: 54px;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.icon-box .icon-main i, .icon-box .icon-main img {

  margin-bottom: 17px;
  max-height: 70px;

}

.privacy-policy p, .privacy-policy h1, .privacy-policy h2, .privacy-policy h3, .privacy-policy h4, .privacy-policy h5, .privacy-policy h6{
  display: block;
  clear: both;
  float: none;
  width: 100%;
}

.icon-box .icon-main span {

  display: block;

  line-height: 1;

  margin-bottom: 28px;

}

.icon-box h5 {

  margin-bottom: 15px;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.icon-box h5 a {

  color: #415755;

}

.icon-box p {

  margin-bottom: 13px;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}



.icon-box--bg-img {

  position: relative;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  background-color: #f4f4f4;

}

.icon-box--bg-img.icon-box--is-line-hover:before, .icon-box--bg-img.icon-box--is-line-hover:after {

  content: "";

  position: absolute;

  background: #415755;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.icon-box--bg-img.icon-box--is-line-hover:before {

  width: 0;

  height: 1px;

  bottom: -10px;

  left: 10px;

}

.icon-box--bg-img.icon-box--is-line-hover:after {

  width: 1px;

  height: 0;

  top: 10px;

  right: -11px;

}

.icon-box--bg-img.icon-box--is-line-hover:hover:before {

  width: calc( 100% + 5px );

}

.icon-box--bg-img.icon-box--is-line-hover:hover:after {

  height: calc( 100% + 5px );

}

.icon-box--bg-img:hover {

  background-color: #415755;

}

.icon-box--bg-img:hover h5 {

  color: #fff;

}

.icon-box--bg-img:hover h5 a {

  color: #fff;

}

.icon-box--bg-img:hover p {

  color: #dddddd;

}

.icon-box--bg-img:hover .btn-details {

  opacity: 0.9;

  color: #fff;

}

.icon-box--bg-img:hover .btn-details:before {

  background: #505050;

}



.icon-box--classic {

  padding: 0;

}

.icon-box--classic p {

  margin-bottom: 0;

}



.icon-box--bg-color {

  padding: 30px;

  padding-bottom: 28px;

  background-color: #415755;

  border: 1px solid #292929;

  position: relative;

}

.icon-box--bg-color .link_overlay {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: -1;

}

.icon-box--bg-color h5 {

  color: #fff;

  margin-bottom: 11px;

  line-height: 1.1;

}

.icon-box--bg-color p {

  color: #dddddd;

  margin-bottom: 0;

}

.icon-box--bg-color .icon-main {

  color: #fff;

  text-align: center;

  line-height: 1;

  margin-top: 10px;

}

.icon-box--bg-color .icon-main i, .icon-box--bg-color .icon-main span:before {

  font-size: 45px;

}

.icon-box--bg-color .icon-main span {

  margin-bottom: 0;

}

.icon-box--bg-color .icon-main img {

  max-width: 60px;

}

.icon-box--bg-color.icon-box--icon-left .icon-main {

  float: left;

}

.icon-box--bg-color.icon-box--icon-left .content-box {

  padding-left: 68px;

}

.icon-box--bg-color.icon-box--icon-right .icon-main {

  float: right;

}

.icon-box--bg-color.icon-box--icon-right .content-box {

  padding-right: 68px;

  text-align: right;

}

.icon-box--bg-color:hover {

  background-color: #000;

}

.icon-box--bg-color:hover .link_overlay {

  z-index: 1;

}



@media (min-width: 768px) and (max-width: 991px) {

  .icon-box--bg-img {

    padding: 25px 40px;

  }



  .icon-box--bg-color {

    padding: 20px;

  }

}

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

## Service Box

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

.service-box .image-box {

  position: relative;

  overflow: hidden;

}

.service-box .image-box .overlay {

  background: rgba(26, 26, 26, 0.3);

  opacity: 0;

  z-index: 1;

}

.service-box .image-box img {

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.service-box .info-box {

  padding: 25px 20px 0;

}

.service-box h4 {

  margin-bottom: 12px;

}

.service-box p {

  margin-bottom: 10px;

}

.service-box:hover .image-box .overlay {

  opacity: 1;

}

.service-box:hover .image-box img {

  -webkit-transform: scale(1.02);

  -ms-transform: scale(1.02);

  transform: scale(1.02);

}



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

## Counter

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

.ot-counter {

  font-family: "Titillium Web", sans-serif;

  display: block;

  text-align: center;

}

.ot-counter span {

  font-family: "Josefin Sans", sans-serif;

  font-weight: 300;

  color: #c2c2c2;

  font-size: 42px;

  line-height: 1;

}

.ot-counter h6 {

  font-size: 18px;

  text-transform: uppercase;

  /*color: #232323;*/

  color: #c2c2c2;

  margin-top: 8px;

  font-weight: 600;

  margin-bottom: 0;

  letter-spacing: 1px;

  display: inline-block;

}



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

## Countdown

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

.ot-countdown {

  text-align: center;

  display: flex;

  margin-bottom: 0;

  color: #fff;

}

.ot-countdown li {

  display: inline-block;

  line-height: 1;

  flex-grow: 1;

  flex-basis: 0;

  font-weight: 600;

  color: #415755;

}

.ot-countdown li span {

  font-size: 120px;

  font-family: "Titillium Web", sans-serif;

  display: block;

  margin-bottom: 13px;

  white-space: nowrap;

}

.ot-countdown li p {

  margin-bottom: 0;

  font-size: 18px;

  text-transform: uppercase;

  white-space: nowrap;

}

.ot-countdown li.seperator {

  font-size: 72px;

  font-weight: bold;

  color: #a7a7a7;

  margin-top: 27px;

}



.cs-form {

  text-align: center;

  margin: 0 auto;

  overflow: hidden;

  max-width: 475px;

  justify-content: space-between;

}

.cs-form > span.wpcf7-form-control-wrap {

  max-width: 335px;

  width: 100%;

  margin-top: 7px;

}

.cs-form > span.wpcf7-form-control-wrap .wpcf7-text {

  background: transparent;

  color: #555555;

  width: 100%;

}

.cs-form > span.wpcf7-form-control-wrap .wpcf7-text::placeholder {

  color: #555555;

}

.cs-form .octf-btn {

  padding: 15px 34px;

}

.cs-form .octf-btn:before, .cs-form .octf-btn:after {

  display: none;

}

.cs-form + div {

  max-width: 475px;

  margin-left: auto !important;

  margin-right: auto !important;

}



@media (max-width: 767px) {

  .ot-countdown li p {

    font-size: 14px;

  }



  .ot-countdown li span,

  .ot-countdown li.seperator {

    font-size: 42px;

  }



  .ot-countdown li span {

    margin-bottom: 10px;

  }



  .ot-countdown li.seperator {

    line-height: 55px;

    margin-top: -6px;

  }

}

@media (max-width: 600px) {

  .cs-form {

    display: block;

  }

  .cs-form > span.wpcf7-form-control-wrap {

    margin: 0 auto;

    display: block;

  }

  .cs-form .octf-btn {

    margin-top: 15px;

  }

}

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

## Contact-info

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

.contact-info {

  font-size: 16px;

  overflow: hidden;

  color: #415755;

}

.contact-info h6 {

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 5px;

}

.contact-info i {

  font-size: 26px;

  margin-top: 2px;

  line-height: 1;

  float: left;

  color: #66CC33;

}

.contact-info i:before {

  font-size: 26px;

}

.contact-info img {

  width: 30px;

  margin-top: 3px;

  float: left;

}

.contact-info p {

  margin-bottom: 0;

}

.contact-info .info-text {

  padding-left: 50px;

  font-weight: 300;

}



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

## Testimonials

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

.ot-testimonials .testi-item {

  background: transparent;

  padding-right: 20px;

  margin-top: 26px;

}

.ot-testimonials .testi-item .t-head {

  overflow: hidden;

  justify-content: normal;

  padding-left: 20px;

}

.ot-testimonials .testi-item .t-head img {

  max-width: 80px;

  margin-right: 25px;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

}

.ot-testimonials .testi-item .t-head h6 {

  font-size: 22px;

  margin-bottom: 2px;

}

.ot-testimonials .testi-item .t-head span {

  font-size: 14px;

  text-transform: uppercase;

  font-weight: 500;

  color: #6f6f6f;

}

.ot-testimonials .testi-item .ttext {

  position: relative;

  margin-bottom: 50px;

  padding: 37px 35px 37px 40px;

  font-size: 18px;

  line-height: 36px;

  background: #fff;

  border: 1px solid #e0e0e0;

}

.ot-testimonials .testi-item .ttext > span {

  position: absolute;

  content: "";

  left: 28px;

  top: -1px;

  width: 80px;

  height: 1px;

  background: #fff;

}

.ot-testimonials .testi-item .ttext:before {

  position: absolute;
  font-family: "Titillium Web", sans-serif;
  font-size: 200px;
  color: #415755;
  top: 23px;
  left: 29px;
  content: "“";
  width: 80px;
  height: 45px;
  z-index: 1;

/*  background: url("https://via.placeholder.com/189x150.png") no-repeat center;*/

}

.ot-testimonials .ot-testimonials-slider-s2 .testi-item {

  padding-right: 0;

  padding-bottom: 10px;

  margin: 0;

}

.ot-testimonials .ot-testimonials-slider-s2 .testi-item .ttext {

  font-size: 20px;

  padding: 0;

  margin-bottom: 30px;

  border: none;

  background: none;

}

.ot-testimonials .ot-testimonials-slider-s2 .testi-item .ttext:before {

  display: none;

}

.ot-testimonials .ot-testimonials-slider-s2 .testi-item .t-head {

  padding-left: 0;

}

.ot-testimonials .ot-testimonials-slider-s2 .testi-item .t-head h5 {

  margin-bottom: 3px;

}



.ot-testimonials.v-dark .ot-testimonials-slider-s1 .octf-swiper-button-next, .ot-testimonials.v-dark .ot-testimonials-slider-s1 .octf-swiper-button-prev, .ot-testimonials.v-dark .ot-testimonials-slider-s2 .octf-swiper-button-next, .ot-testimonials.v-dark .ot-testimonials-slider-s2 .octf-swiper-button-prev {

  color: #fff;

  background: #0a0a0a;

}

.ot-testimonials.v-dark .ot-testimonials-slider-s1 .octf-swiper-button-next:hover, .ot-testimonials.v-dark .ot-testimonials-slider-s1 .octf-swiper-button-prev:hover, .ot-testimonials.v-dark .ot-testimonials-slider-s2 .octf-swiper-button-next:hover, .ot-testimonials.v-dark .ot-testimonials-slider-s2 .octf-swiper-button-prev:hover {

  color: #919191;

}

.ot-testimonials.v-dark .octf-swiper-pagination .swiper-pagination-bullet {

  background: #0a0a0a;

}

.ot-testimonials.v-dark .octf-swiper-pagination .swiper-pagination-bullet:before {

  background: #fff;

  border-color: #fff;

}

.ot-testimonials.v-dark .testi-item .t-head h6, .ot-testimonials.v-dark .testi-item .t-head h5 {

  color: #fff;

}

.ot-testimonials.v-dark .testi-item .ttext {

  color: #fff;

  background: #0a0a0a;

  border-color: #292929;

}

.ot-testimonials.v-dark .testi-item .ttext > span {

  background: #0a0a0a;

}

.ot-testimonials.v-dark .testi-item .ttext:before {

  background: url("https://via.placeholder.com/189x150.png") no-repeat center;

}

.ot-testimonials.v-dark .testi-item .ttext .layer-behind {

  background: #415755;

}

.ot-testimonials.v-dark .ot-testimonials-slider-s2 .testi-item .ttext {

  color: #dddddd;

  background: none;

}

.ot-testimonials.v-dark .ot-testimonials-slider-s2 .testi-item .t-head span {

  color: #d0cfcf;

}



@media (max-width: 480px) {

  .ot-testimonials .t-head img {

    margin-right: 15px;

  }

}

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

## Image Carousel

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

.image-carousel .swiper-wrapper {

  align-items: center;

}

.image-carousel .swiper-slide {

  text-align: center;

}

.image-carousel .swiper-slide figure {

  line-height: inherit;

}

.image-carousel .swiper-slide img {

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.image-carousel .octf-swiper-pagination {

  margin-top: 30px;

}

.image-carousel .octf-swiper-button-next, .image-carousel .octf-swiper-button-prev {

  background: #fff;

}



.image-gallery .gallery-icon {

  position: relative;

}

.image-gallery .gallery-icon .overlay {

  background: rgba(0, 0, 0, 0.4);

  opacity: 0;

  visibility: hidden;

  z-index: 1;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.image-gallery .gallery-icon .overlay i {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 60px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  -webkit-transform: translateY(-50%) translateX(-50%);

  -ms-transform: translateY(-50%) translateX(-50%);

  transform: translateY(-50%) translateX(-50%);

  background: #000;

  color: #fff;

}

.image-gallery .gallery-icon .overlay i:before {

  font-size: 22px;

}

.image-gallery .gallery-icon .overlay i:hover {

  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);

  -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);

  transform: translateY(-50%) translateX(-50%) rotate(90deg);

}

.image-gallery .gallery-icon:hover .overlay {

  opacity: 1;

  visibility: visible;

}



@media (max-width: 600px) {

  .image-gallery .gallery.gallery-columns-2 .gallery-item, .image-gallery .gallery.gallery-columns-3 .gallery-item, .image-gallery .gallery.gallery-columns-4 .gallery-item, .image-gallery .gallery.gallery-columns-5 .gallery-item, .image-gallery .gallery.gallery-columns-6 .gallery-item, .image-gallery .gallery.gallery-columns-7 .gallery-item, .image-gallery .gallery.gallery-columns-8 .gallery-item, .image-gallery .gallery.gallery-columns-9 .gallery-item, .image-gallery .gallery.gallery-columns-10 .gallery-item {

    max-width: 100%;

  }

}

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

## Image Category

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

.cate-lines {

  position: relative;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.cate-lines .cate-item_content {

  position: absolute;

  bottom: 67px;

  left: 60px;

}

.cate-lines img {

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  width: 100%;     /* Fill the container width */
  height: 300px;   /* Set a consistent height */
  object-fit: cover; /* Maintain aspect ratio and crop if needed */

  filter: brightness(66%) contrast(100%) saturate(100%); /* Darkens the image */


}

.cate-lines h2 {

  position: relative;

  color: #fff;

  font-weight: 300;

  margin-bottom: 0;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.cate-lines .number-stroke {

  font-size: 150px;

  position: absolute;

  left: calc(100% - 23px);

  bottom: -30px;

}

.cate-lines:before, .cate-lines:after {

  content: "";

  position: absolute;

  background: #fff;

  z-index: 1;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.cate-lines:before {

  width: calc(100% - 30px);

  height: 1px;

  bottom: 20px;

  left: 20px;

}

.cate-lines:after {

  width: 1px;

  height: calc(100% - 30px);

  top: 20px;

  right: 20px;

}

.cate-lines:hover h2 {

  color: #415755;

}

.cate-lines:hover .number-stroke {

  -webkit-text-stroke-color: #415755;

}

.cate-lines:hover img {

  filter: brightness(126%);

}

.cate-lines:hover:before, .cate-lines:hover:after {

  background: #222328;

}



@media (min-width: 1024px) and (max-width: 1200px) {

  .cate-lines .cate-item_content {

    bottom: 56px;

    left: 50px;

  }

  .cate-lines h2 {

    font-size: 36px;

  }

  .cate-lines .number-stroke {

    font-size: 100px;

    bottom: -18px;

  }

}

@media (min-width: 768px) and (max-width: 1023px) {

  .cate-lines .cate-item_content {

    bottom: 35px;

    left: 30px;

  }

  .cate-lines h2 {

    font-size: 36px;

  }

  .cate-lines .number-stroke {

    display: none;

  }

}

@media (max-width: 479px) {

  .cate-lines .cate-item_content {

    bottom: 40px;

    left: 40px;

  }

  .cate-lines h2 {

    font-size: 36px;

  }

  .cate-lines .number-stroke {

    font-size: 100px;

    bottom: -18px;

  }

}

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

## Accordion

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

.ot-accordions .acc-item {

  background: #fff;

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.ot-accordions .acc-item .acc-toggle {

  cursor: pointer;

  justify-content: space-between;

  overflow: hidden;

  font-family: "Titillium Web", sans-serif;

  font-size: 20px;

  color: #415755;

  padding: 15px 0 20px;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.ot-accordions .acc-item .acc-toggle i {

  float: right;

  text-align: center;

  line-height: 30px;

  font-size: 10px;

  color: #415755;

}

.ot-accordions .acc-item .acc-toggle i.up {

  display: none;

}

.ot-accordions .acc-item .acc-toggle i.down {

  margin-top: 5px;

}

.ot-accordions .acc-item .acc-toggle i:before {

  font-size: 14px;

}

.ot-accordions .acc-item .acc-content {

  display: none;

  padding: 0 20px 27px 0;

  font-size: 14px;

  line-height: 30px;

}

.ot-accordions .acc-item .acc-content p:last-child, .ot-accordions .acc-item .acc-content ul:last-child {

  margin-bottom: 0;

}

.ot-accordions .acc-item.current .acc-toggle i.down {

  display: none;

}

.ot-accordions .acc-item.current .acc-toggle i.up {

  display: inherit;

}

.ot-accordions .acc-item:last-child {

  border-bottom: none;

}



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

## Tabs

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

.ot-tabs .tabs-heading {

  margin-bottom: 0;

  overflow: hidden;

}

.ot-tabs .tab-link {

  font-family: "Titillium Web", sans-serif;

  min-width: 176px;

  margin-right: 20px;

  padding: 12px 0;

  float: left;

  font-weight: 600;

  text-align: center;

  text-transform: uppercase;

  cursor: pointer;

  border-bottom: 3px solid #dadada;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.ot-tabs .tab-link.current, .ot-tabs .tab-link:hover {

  border-color: #415755;

  color: #415755;

}

.ot-tabs .tab-link:last-child {

  margin-right: 0;

}

.ot-tabs .tab-content {

  display: none;

  padding: 33px 0;

}

.ot-tabs .tab-content.current {

  display: inherit;

}

.ot-tabs .tab-content ul, .ot-tabs .tab-content ol {

  list-style: none;

  padding-left: 0;

  margin-top: 17px;

}

.ot-tabs .tab-content ul li, .ot-tabs .tab-content ol li {

  position: relative;

  padding-left: 46px;

  margin-bottom: 15px;

}

.ot-tabs .tab-content ul li:before, .ot-tabs .tab-content ol li:before {

  content: "";

  position: absolute;

  left: 0;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  width: 30px;

  height: 1px;

  background: #555555;

}

.ot-tabs .tab-content ul li:last-child, .ot-tabs .tab-content ol li:last-child {

  margin-bottom: 0;

}

.ot-tabs p:last-child {

  margin-bottom: 0;

}



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

## Progress Bars

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

.ot-progress {

  font-weight: 700;

  font-size: 14px;

  color: #415755;

  font-family: "Titillium Web", sans-serif;

  font-weight: 600;

}

.ot-progress .pname {

  margin-bottom: 3px;

  text-transform: uppercase;

}

.ot-progress .ppercent {

  position: absolute;

  right: -11px;

  bottom: 100%;

  padding: 0 8px;

  min-width: 40px;

  line-height: 1;

  -webkit-transform: translateY(-10px);

  -ms-transform: translateY(-10px);

  transform: translateY(-10px);

}

.ot-progress .iprogress {

  height: 2px;

  margin-bottom: 6px;

}

.ot-progress .progress-bar {

  height: 100%;

  width: 0;

  background: #415755;

  position: relative;

  -webkit-transition: all 1s 0.5s;

  -o-transition: all 1s 0.5s;

  transition: all 1s 0.5s;

}

.ot-progress .progress-bar:after {

  position: absolute;

  content: "";

  width: 2px;

  height: 10px;

  background: #415755;

  top: 50%;

  right: 0;

  -webkit-transform: translateY(-50%) skewX(-30deg);

  -ms-transform: translateY(-50%) skewX(-30deg);

  transform: translateY(-50%) skewX(-30deg);

}



.circle-progress {

  justify-content: left;

}

.circle-progress .inner-bar {

  position: relative;

  display: inline-block;

  line-height: 1;

  z-index: 1;

}

.circle-progress .inner-bar > span {

  position: absolute;

  width: 100%;

  line-height: 1;

  top: 50%;

  left: 0;

  text-align: center;

  font-family: "Titillium Web", sans-serif;

  font-weight: 300;

  font-size: 30px;

  margin-top: -15px;

  color: #415755;

}

.circle-progress .inner-bar canvas {

  display: block;

}

.circle-progress .inner-bar:after {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  z-index: -1;

  border: 2px solid rgba(10, 10, 10, 0.1);

}

.circle-progress h4 {

  display: block;

  font-size: 18px;

  line-height: 26px;

  margin-left: 20px;

  margin-bottom: 0;

  text-transform: uppercase;

}

.circle-progress.tbottom h4 {

  margin: 19px 0 0;

}



.easyPieChart {

  position: relative;

  text-align: center;

}



.easyPieChart canvas {

  position: absolute;

  top: 0;

  left: 0;

}



@media only screen and (max-width: 480px) {

  .ot-progress .pname {

    margin-bottom: 30px;

  }

}

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

## Process

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

.ot-process {

  padding-right: 20px;

  padding-left: 20px;

}

.ot-process .process_nav {

  margin: 0;

  text-align: center;

  display: flex;

  display: -ms-flexbox;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  border-bottom: 3px solid #000;

}

.ot-process .process_nav li {

  position: relative;

  flex-basis: 0;

  flex-grow: 1;

  margin-right: 70px;

  cursor: pointer;

}

.ot-process .process_nav li:last-child {

  margin-right: 0;

}

.ot-process .process_nav li:after {

  position: absolute;

  content: "";

  width: 100%;

  height: 3px;

  bottom: -3px;

  left: 0;

  background: #fff;

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.ot-process .process_nav li .number-stroke {

  position: absolute;

  left: -17px;

  top: -38px;

  font-size: 72px;

}

.ot-process .process_nav li .icon-main {

  position: relative;

  display: inline-block;

  width: 141px;

  height: 141px;

  line-height: 141px;

  background: #000;

  color: #fff;

  margin-bottom: 25px;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.ot-process .process_nav li .icon-main span:not(.number-stroke) {

  font-size: 56px;

}

.ot-process .process_nav li .icon-main span:not(.number-stroke):before {

  font-size: 56px;

}

.ot-process .process_nav li .icon-main span.ot-flaticon-tip {

  margin-left: 18px;

}

.ot-process .process_nav li.current:after {

  opacity: 1;

  visibility: visible;

}

.ot-process .process_nav li:hover .icon-main, .ot-process .process_nav li.current .icon-main {

  background: #fff;

  color: #000;

}

.ot-process .process_nav li .process-des-item {

  padding: 0;

}

.ot-process .process_nav li h5 {

  margin-bottom: 16px;

}

.ot-process .process_nav h5 {

  font-size: 22px;

  color: #fff;

  margin-bottom: 26px;

}

.ot-process .process-des-item {

  padding: 38px 50px 0;

  text-align: center;

  color: #dddddd;

  margin: 0;

}



.ot-process:not([data-tab]) .process_nav {

  border-bottom: none;

}

.ot-process:not([data-tab]) .process_nav li {

  margin-right: 50px;

}

.ot-process:not([data-tab]) .process_nav li:last-child {

  margin-right: 0;

}



.order-even-top-40 .ot-process:not([data-tab]) .process_nav li:nth-child(even) {

  margin-top: 40px;

}



@media (max-width: 1024px) {

  .ot-process .process_nav li, .ot-process:not([data-tab]) .process_nav li {

    margin-right: 0;

  }

}

@media (max-width: 991px) {

  .ot-process .process_nav {

    display: block;

    border-color: #fff;

  }

  .ot-process .process_nav li {

    margin-bottom: 60px;

  }

  .ot-process .process_nav li:last-child {

    margin-bottom: 30px;

  }

  .ot-process .process_nav li:after {

    display: none;

  }

  .ot-process .process-des-item {

    padding: 20px 30px 0;

  }



  .order-even-top-40 .ot-process:not([data-tab]) .process_nav li:nth-child(even) {

    margin-top: 0;

  }

}

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

## Support Box

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

.support-box {

  position: relative;

}

.support-box .inner-box {

  position: relative;

  transition: all 0.5s linear;

  -webkit-transition: all 0.5s linear;

  -moz-transition: all 0.5s linear;

  -o-transition: all 0.5s linear;

  -ms-transition: all 0.5s linear;

  transform-style: preserve-3d;

}

.support-box .inner-box > div {

  backface-visibility: hidden;

  transition: all 0.5s linear;

  -webkit-transition: all 0.5s linear;

  -moz-transition: all 0.5s linear;

  -o-transition: all 0.5s linear;

  -ms-transition: all 0.5s linear;

}

.support-box .icon-title {

  position: absolute;

  width: 100%;

  text-align: center;

  top: 50%;

  color: #fff;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.support-box .icon-title h5 {

  color: #fff;

  text-transform: uppercase;

  margin-bottom: 0;

  line-height: 42px;

}

.support-box .icon-title span {

  margin-bottom: 4px;

}

.support-box .icon-title span:before {

  font-size: 45px;

}

.support-box .icon-title i {

  font-size: 45px;

  margin-bottom: 20px;

  margin-top: 19px;

}

.support-box .overlay {

  z-index: 1;

  opacity: 1;

  text-align: center;

  padding: 20px 45px;

  background: #0a0a0a;

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

  color: #dddddd;

  -webkit-transform: rotateY(180deg);

  -ms-transform: rotateY(180deg);

  transform: rotateY(180deg);

}

.support-box .overlay p {

  margin-bottom: 0;

}

.support-box:hover .inner-box {

  -webkit-transform: rotateY(180deg);

  -ms-transform: rotateY(180deg);

  transform: rotateY(180deg);

}

.support-box:hover .inner-box .content-box {

  opacity: 0;

}



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

## Features Box

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

.ot-features-box .features-image {

  position: relative;

  color: #fff;

}

.ot-features-box .features-image .overlay {

  cursor: pointer;

  background: rgba(26, 26, 26, 0.4);

  opacity: 0;

  z-index: 1;

}

.ot-features-box .features-image i:before {

  color: #fff;

  font-size: 30px;

}

.ot-features-box .features-image:hover .overlay {

  opacity: 1;

}

.ot-features-box .features-content {

  text-align: center;

  overflow: hidden;

  background-color: #415755;

  padding: 36px 0;

}

.ot-features-box .features-content h6 {

  font-size: 18px;

  text-transform: uppercase;

  margin-bottom: 0;

  line-height: 1;

  position: relative;

  text-align: center;

  color: #fff;

}

.ot-features-box .features-content h6 a {

  color: #fff;

}

.ot-features-box .features-content h6 span {

  font-weight: 300;

  color: #dddddd;

}

.ot-features-box .features-content h6:before {

  content: "";

  position: absolute;

  display: inline-block;

  left: -1px;

  top: 50%;

  height: 1px;

  width: 0;

  background: #fff;

  transition: all 0.45s;

  transition-delay: 0.1s;

}

.ot-features-box .features-content h6:hover:before {

  width: 70px;

}



@media (max-width: 1024px) {

  .ot-features-box .features-content h6:before {

    display: none;

  }

}

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

## Message

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

.message-box {

  padding: 5px;

  overflow: hidden;

  position: relative;

  background: #fff;

  border: 1px solid #e0e0e0;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.message-box .icon-main {

  float: left;

  font-size: 20px;

  width: 52px;

  height: 52px;

  line-height: 52px;

  text-align: center;

  color: #fff;

  background: #32a7eb;

}

.message-box .icon-main span:before {

  font-size: 20px;

}

.message-box .content-box {

  padding-left: 66px;

}

.message-box .content-box h6 {

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 8px;

}

.message-box .content-box p {

  font-size: 14px;

  margin-bottom: 0;

  line-height: 1;

}

.message-box > i {

  position: absolute;

  top: 50%;

  right: 20px;

  line-height: 1;

  margin-top: -7px;

  color: #a5b7d2;

  cursor: pointer;

}

.message-box > i:before {

  font-size: 13px;

}



@media (max-width: 600px) {

  .message-box > i {

    top: 15px;

    right: 10px;

  }



  .message-box .content-box p {

    line-height: 1.4;

  }

}

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

## Pricing Table

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

.ot-pricing-table {

  position: relative;

  text-align: center;

  padding-right: 20px;

  padding-bottom: 20px;

  overflow: hidden;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.ot-pricing-table .inner-table {

  position: relative;

  padding: 70px 45px 47px;

  border: 1px solid #e0e0e0;

  background: #fff;

}

.ot-pricing-table .inner-table .title-table {

  display: inline-block;

  position: absolute;

  top: 0;

  left: 50%;

  padding: 9px 19px;

  line-height: 1;

  font-size: 14px;

  font-weight: 600;

  margin-bottom: 0;

  text-transform: uppercase;

  color: #fff;

  background: #415755;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}

.ot-pricing-table .inner-table h2 {

  font-size: 48px;

  font-weight: 300;

  line-height: 1;

  position: relative;

  display: inline-block;

  padding-left: 27px;

  top: -1px;

}

.ot-pricing-table .inner-table h2 sup {

  position: absolute;

  top: 15px;

  left: 5px;

  font-size: 62.5%;

  font-weight: 400;

}

.ot-pricing-table .inner-table > p {

  display: inline-block;

  position: relative;

  color: #929292;

  bottom: -9px;

  padding-left: 15px;

}

.ot-pricing-table .inner-table > p:before {

  position: absolute;

  content: "";

  top: -15px;

  left: 5px;

  width: 1px;

  height: 49px;

  background: #929292;

  -webkit-transform: rotate(40deg);

  -ms-transform: rotate(40deg);

  transform: rotate(40deg);

}

.ot-pricing-table .inner-table .details {

  margin-top: 26px;

  padding-top: 25px;

  padding-bottom: 26px;

  border-top: 1px solid rgba(0, 0, 0, 0.15);

}

.ot-pricing-table .inner-table .details ul {

  list-style: none;

  margin-bottom: 0;

  padding: 0;

  line-height: 42px;

  text-align: left;

}

.ot-pricing-table .inner-table .details ul li {

  position: relative;

  color: #b8b8b8;

}

.ot-pricing-table .inner-table .details ul li.active {

  color: #555555;

}

.ot-pricing-table .inner-table .details ul li.active:after {

  position: absolute;

  content: "";

  font-family: "Flaticon";

  font-size: 10px;

  right: 0;

}

.ot-pricing-table .inner-table .details.no-icon ul li.active:after {

  display: none;

}

.ot-pricing-table .octf-btn {

  border-color: #415755;

  background: #fff;

  color: #000;

  padding: 15px 31px;

}

.ot-pricing-table .octf-btn:before, .ot-pricing-table .octf-btn:after {

  display: none;

}

.ot-pricing-table .octf-btn:hover {

  background: #415755;

  color: #fff;

}

.ot-pricing-table.is-featured .inner-table {

  background: #415755;

  color: #fff;

}

.ot-pricing-table.is-featured .inner-table .title-table {

  background: #4e4e4e;

}

.ot-pricing-table.is-featured .inner-table .details {

  border-color: rgba(255, 255, 255, 0.15);

  color: #8e88b8;

}

.ot-pricing-table.is-featured .inner-table .details ul li {

  color: #6e6666;

}

.ot-pricing-table.is-featured .inner-table h2,

.ot-pricing-table.is-featured .inner-table .details ul li.active {

  color: #fff;

}

.ot-pricing-table.is-featured .octf-btn:hover {

  border-color: rgba(255, 255, 255, 0.15);

}

.ot-pricing-table:hover {

  -webkit-transform: translateY(-20px);

  -ms-transform: translateY(-20px);

  transform: translateY(-20px);

}



@media (min-width: 1025px) and (max-width: 1199px) {

  .ot-pricing-table .inner-table {

    padding: 70px 45px 47px;

  }

  .ot-pricing-table .inner-table h2 {

    font-size: 40px;

  }

}

@media (max-width: 1024px) {

  .ot-pricing-table {

    max-width: 430px;

    margin: auto;

  }

  .ot-pricing-table .inner-table {

    padding: 45px;

  }

}

@media (max-width: 767px) {

  .ot-pricing-table {

    max-width: 470px;

  }

}

@media (max-width: 479px) {

  .ot-pricing-table .inner-table {

    padding: 33px;

    padding-top: 70px;

  }



  .ot-pricing-table .inner-table .details {

    font-size: 14px;

  }

}

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

## Post Grid

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

.blog-grid {

  margin-right: -15px;

  margin-left: -15px;

}

.blog-grid:after {

  content: "";

  display: block;

  clear: both;

}

.blog-grid .masonry-post-item {

  float: left;

  width: 33.3333333333%;

  padding-bottom: 15px;

  padding-left: 15px;

  padding-right: 15px;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

.blog-grid .masonry-post-item .post-inner {

  margin-bottom: 15px;

}

.blog-grid .masonry-post-item.post-box .entry-meta span.comment-num {

  display: none;

}

.blog-grid .octf-swiper-button-next, .blog-grid .octf-swiper-button-prev {

  width: 50px;

  height: 50px;

  line-height: 50px;

}

.blog-grid.pf_4_cols .masonry-post-item {

  width: 25%;

}

.blog-grid.pf_2_cols .masonry-post-item {

  width: 50%;

}



.blog-slider .post-box .entry-meta span.comment-num {

  display: none;

}



.blog-grid.v-dark .post-box .entry-title a, .blog-slider.v-dark .post-box .entry-title a, .dark-scheme .post-box .entry-title a {

  color: #fff;

}

.blog-grid.v-dark .post-box .link-box i, .blog-grid.v-dark .post-box .link-box a, .blog-slider.v-dark .post-box .link-box i, .blog-slider.v-dark .post-box .link-box a, .dark-scheme .post-box .link-box i, .dark-scheme .post-box .link-box a {

  color: #fff;

}

.blog-grid.v-dark .post-box .quote-box .quote-text, .blog-slider.v-dark .post-box .quote-box .quote-text, .dark-scheme .post-box .quote-box .quote-text {

  color: #fff;

}

.blog-grid.v-dark .post-box .post-inner, .blog-slider.v-dark .post-box .post-inner, .dark-scheme .post-box .post-inner {

  background: #0a0a0a;

  border-color: #292929;

}

.blog-grid.v-dark .post-box .post-inner .the-excerpt, .blog-slider.v-dark .post-box .post-inner .the-excerpt, .dark-scheme .post-box .post-inner .the-excerpt {

  color: #dddddd;

}

.blog-grid.v-dark .post-box .entry-meta > span a:hover, .blog-slider.v-dark .post-box .entry-meta > span a:hover, .dark-scheme .post-box .entry-meta > span a:hover {

  color: #fff;

}

.blog-grid.v-dark .post-box .entry-meta > span:before, .blog-slider.v-dark .post-box .entry-meta > span:before, .dark-scheme .post-box .entry-meta > span:before {

  color: #9f9e9e;

}

.blog-grid.v-dark .post-box:not(.blog-post):hover .post-inner, .blog-slider.v-dark .post-box:not(.blog-post):hover .post-inner, .dark-scheme .post-box:not(.blog-post):hover .post-inner {

  border-color: #fff;

}

.blog-grid.v-dark + .page-pagination li a, .blog-grid.v-dark + .page-pagination li span, .blog-slider.v-dark + .page-pagination li a, .blog-slider.v-dark + .page-pagination li span, .dark-scheme + .page-pagination li a, .dark-scheme + .page-pagination li span {

  color: #fff;

  border-color: #fff;

}

.blog-grid.v-dark .octf-swiper-pagination .swiper-pagination-bullet-active, .blog-slider.v-dark .octf-swiper-pagination .swiper-pagination-bullet-active, .dark-scheme .octf-swiper-pagination .swiper-pagination-bullet-active {

  border-color: #fff;

}

.blog-grid.v-dark .octf-swiper-pagination .swiper-pagination-bullet:before, .blog-slider.v-dark .octf-swiper-pagination .swiper-pagination-bullet:before, .dark-scheme .octf-swiper-pagination .swiper-pagination-bullet:before {

  background: #fff;

}



@media only screen and (min-width: 991px) {

  .blog-grid.pf_4_cols .octf-swiper-button-next, .blog-grid.pf_4_cols .octf-swiper-button-prev {

    width: 40px;

    height: 40px;

    line-height: 40px;

  }

  .blog-grid.pf_4_cols .octf-swiper-button-next i:before, .blog-grid.pf_4_cols .octf-swiper-button-prev i:before {

    font-size: 14px;

  }

  .blog-grid.pf_4_cols .btn-play i {

    width: 50px;

    height: 50px;

    line-height: 50px;

  }

}

@media only screen and (max-width: 991px) {

  .blog-grid .masonry-post-item,

  .blog-grid.pf_4_cols .masonry-post-item {

    width: 50%;

  }

}

@media only screen and (max-width: 768px) {

  .blog-grid .masonry-post-item,

  .blog-grid.pf_4_cols .masonry-post-item,

  .blog-grid.pf_2_cols .masonry-post-item {

    width: 100%;

  }

}

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

## Team

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

.team-wrap {

  position: relative;

  height: 100%;

  width: 100%;

}

.team-wrap .team-text-overlay {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

}

.team-wrap .team-info {

  position: relative;

  width: 100%;

  height: 100%;

  z-index: 1;

  background: rgba(26, 26, 26, 0.6);

  opacity: 0;

  text-align: center;

  display: table;

  table-layout: fixed;

  overflow: hidden;

  color: #fff;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.team-wrap .team-info div.dcell {

  position: relative;

  width: 100%;

  height: 100%;

}

.team-wrap .team-thumb {

  overflow: hidden;

}

.team-wrap img {

  display: block;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.team-wrap .m_extra {

  font-family: "Josefin Sans", sans-serif;

  text-transform: uppercase;

  font-size: 14px;

  position: absolute;

  width: 100%;

  bottom: 0;

  left: 0;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.team-wrap .m_extra span {

  display: block;

  letter-spacing: 0.5px;

  margin-bottom: 32px;

}

.team-wrap h4 {

  margin-bottom: 23px;

  color: #fff;

  text-transform: uppercase;

  line-height: 36px;

  letter-spacing: 0.5px;

}

.team-wrap h4 a {

  color: #fff;

}

.team-wrap h4 a:hover {

  color: #9f9e9e;

}

.team-wrap .team-social > span {

  cursor: pointer;

  margin-bottom: 20px;

  position: absolute;

  z-index: 2;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.team-wrap .team-social > span:before {

  font-size: 21px;

}

.team-wrap .team-social a {

  position: relative;

  display: inline-block;

  color: #fff;

  font-size: 16px;

  width: 35px;

  height: 35px;

  line-height: 35px;

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.team-wrap .team-social a:hover {

  color: #9f9e9e;

}

.team-wrap .team-social.active > span {

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}

.team-wrap .team-social.active a {

  -webkit-transform: translateY(50px);

  -ms-transform: translateY(50px);

  transform: translateY(50px);

  opacity: 1;

  visibility: visible;

}

.team-wrap:hover .team-info {

  opacity: 1;

}

.team-wrap:hover img {

  filter: grayscale(100%);

  -webkit-filter: grayscale(100%);

  -ms-filter: grayscale(100%);

  -webkit-transform: scale(1.05);

  -ms-transform: scale(1.05);

  transform: scale(1.05);

}



.member-info {

  font-family: "Titillium Web", sans-serif;

  list-style: none;

  font-size: 18px;

  padding-left: 0;

}

.member-info li {

  color: #dddddd;

  padding-bottom: 10px;

}



.member-form input[type=text],

.member-form input[type=email] {

  width: 100%;

}

.member-form .octf-btn {

  margin-top: 10px;

}

.member-form .octf-btn:before, .member-form .octf-btn:after {

  display: none;

}

.member-form .octf-btn:hover {

  border: 1px solid;

}



@media (min-width: 1025px) and (max-width: 1300px) {

  .team-wrap h4 {

    font-size: 24px;

    margin-bottom: 10px;

  }



  .team-wrap .team-social a {

    opacity: 1;

    font-size: 14px;

  }

}

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

## Portfolio

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

/* projects-grid

================================================== */

.project-item,

.grid-sizer {

  float: left;

  width: 33.3333333333%;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

.project-item.thumb2x,

.grid-sizer.thumb2x {

  width: 66.66666666%;

}



.projects-grid.pf_5_cols .project-item,

.projects-grid.pf_5_cols .grid-sizer {

  width: 20%;

}

.projects-grid.pf_5_cols .project-item.thumb2x,

.projects-grid.pf_5_cols .grid-sizer.thumb2x {

  width: 40%;

}



.projects-grid.pf_4_cols .project-item,

.projects-grid.pf_4_cols .grid-sizer {

  width: 25%;

}

.projects-grid.pf_4_cols .project-item.thumb2x,

.projects-grid.pf_4_cols .grid-sizer.thumb2x {

  width: 50%;

}



.projects-grid.pf_2_cols .project-item,

.projects-grid.pf_2_cols .grid-sizer {

  width: 50%;

}

.projects-grid.pf_2_cols .project-item.thumb2x,

.projects-grid.pf_2_cols .grid-sizer.thumb2x {

  width: 100%;

}



.projects-grid {

  position: relative;

  overflow: hidden;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  /* info style 2 */

  /* info style 3 */

  /* info hidden */

}

.projects-grid .projects-box {

  position: relative;

  overflow: hidden;

}

.projects-grid .projects-box .portfolio-info {

  width: 100%;

  height: 100%;

  position: absolute;

  bottom: 0;

  left: 0;

  background: rgba(10, 10, 10, 0.8);

  opacity: 0;

  display: flex;

  align-items: center;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.projects-grid .projects-box .portfolio-info .overlay {

  opacity: 1;

  background: transparent;

  z-index: 0;

}

.projects-grid .projects-box .portfolio-info .portfolio-info-inner {

  text-align: center;

  width: 100%;

  z-index: 1;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.projects-grid .projects-box .portfolio-info h5 {

  color: #fff;

  font-size: 24px;

  padding: 0 25px;

  margin-bottom: 17px;

}

.projects-grid .projects-box .portfolio-info h5 a {

  color: #fff;

}

.projects-grid .projects-box .portfolio-info .portfolio-cates {

  color: #9f9e9e;

  font-family: "Josefin Sans", sans-serif;

  font-weight: 500;

  font-size: 14px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 0;

  padding: 0 25px;

}

.projects-grid .projects-box .portfolio-info .portfolio-cates a {

  color: #9f9e9e;

  line-height: 1;

  display: inline-block;

  letter-spacing: 0.5px;

  margin: 0 5px;

}

.projects-grid .projects-box .portfolio-info .portfolio-cates a:before {

  content: "[";

    margin-right: 5px;

  }

  .projects-grid .projects-box .portfolio-info .portfolio-cates a:after {

    content: "]";

    margin-left: 5px;

  }

  .projects-grid .projects-box .portfolio-info .portfolio-cates a:hover {

    color: #fff;

  }

  .projects-grid .projects-box .portfolio-info .portfolio-cates a:first-child {

    margin-left: 0;

  }

  .projects-grid .projects-box .portfolio-info .portfolio-cates a:last-child {

    margin-right: 0;

  }

  .projects-grid .projects-box .projects-thumbnail {

    overflow: hidden;

  }

  .projects-grid .projects-box .projects-thumbnail .overlay {

    visibility: hidden;

  }


  .projects-grid .projects-box img {

    width: 100%;

    height: inherit;

    display: block;

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

  }

  .projects-grid .projects-box:hover .portfolio-info {

    opacity: 1;

  }

  .projects-grid.style-2 .portfolio-info {

    background: none;

    align-items: flex-end;

    height: auto;

  }

  .projects-grid.style-2 .portfolio-info .portfolio-info-inner {

    text-align: left;

    background: #fff;

    padding: 27px 50px 26px;

    -webkit-transform: translateY(40%);

    -ms-transform: translateY(40%);

    transform: translateY(40%);

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

  }

  .projects-grid.style-2 .portfolio-info .portfolio-info-inner h5 {

    margin-bottom: 8px;

    padding: 0;

  }

  .projects-grid.style-2 .portfolio-info .portfolio-info-inner h5 a {

    color: #415755;

  }

  .projects-grid.style-2 .portfolio-info .portfolio-info-inner .portfolio-cates {

    padding: 0;

  }

  .projects-grid.style-2 .portfolio-info .portfolio-info-inner .portfolio-cates a:hover {

    color: #415755;

  }

  .projects-grid.style-2 .projects-box:hover .portfolio-info-inner {

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

  }

  .projects-grid.style-2.w-auto .portfolio-info {

    width: auto;

  }

  .projects-grid.style-3 .projects-thumbnail {

    position: relative;

  }

  .projects-grid.style-3 .projects-thumbnail .overlay {

    background: rgba(0, 0, 0, 0.2);

    opacity: 0;

    visibility: hidden;

    z-index: 1;

    display: none;

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

  }

  .projects-grid.style-3 .projects-thumbnail .overlay i {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 60px;

    height: 60px;

    line-height: 60px;

    text-align: center;

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    -webkit-transform: translateY(-50%) translateX(-50%);

    -ms-transform: translateY(-50%) translateX(-50%);

    transform: translateY(-50%) translateX(-50%);

    background: #000;

    color: #fff;

  }

  .projects-grid.style-3 .projects-thumbnail .overlay i:before {

    font-size: 22px;

  }

  .projects-grid.style-3 .projects-thumbnail .overlay i:hover {

    -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);

    -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);

    transform: translateY(-50%) translateX(-50%) rotate(90deg);

  }

  .projects-grid.style-3 .projects-thumbnail:hover .overlay {

    opacity: 1;

    visibility: visible;

  }

  .projects-grid.style-3 .portfolio-info {

    background: none;

    position: static;

    opacity: 1;

    align-items: flex-end;

  }

  .projects-grid.style-3 .portfolio-info .portfolio-info-inner {

    text-align: left;

    padding-top: 20px;

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

  }

  .projects-grid.style-3 .portfolio-info .portfolio-info-inner h5 {

    padding: 0;

    margin-bottom: 7px;

  }

  .projects-grid.style-3 .portfolio-info .portfolio-info-inner h5 a {

    color: #415755;

    margin-bottom: 10px;

  }

  .projects-grid.style-3 .portfolio-info .portfolio-info-inner .portfolio-cates {

    padding: 0;

  }

  .projects-grid.style-3 .portfolio-info .portfolio-info-inner .portfolio-cates a:hover {

    color: #415755;

  }

  .projects-grid.style-3 .portfolio-info .overlay {

    display: none;

  }

  .projects-grid.style-4 .projects-thumbnail {

    position: relative;

  }

  .projects-grid.style-4 .projects-thumbnail .overlay {

    background: rgba(0, 0, 0, 0.2);

    opacity: 0;

    visibility: hidden;

    z-index: 1;

    display: none;

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

  }

  .projects-grid.style-4 .projects-thumbnail .overlay i {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 60px;

    height: 60px;

    line-height: 60px;

    text-align: center;

    transition: all 0.3s linear;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    -webkit-transform: translateY(-50%) translateX(-50%);

    -ms-transform: translateY(-50%) translateX(-50%);

    transform: translateY(-50%) translateX(-50%);

    background: #000;

    color: #fff;

  }

  .projects-grid.style-4 .projects-thumbnail .overlay i:before {

    font-size: 22px;

  }

  .projects-grid.style-4 .projects-thumbnail .overlay i:hover {

    -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);

    -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);

    transform: translateY(-50%) translateX(-50%) rotate(90deg);

  }

  .projects-grid.style-4 .projects-thumbnail:hover .overlay {

    opacity: 1;

    visibility: visible;

  }

  .projects-grid.style-4 .portfolio-info {

    display: none;

  }

  .projects-grid.img-popup .projects-thumbnail .overlay {

    display: block;

  }

  .projects-grid.img-scale .projects-box:hover img {

    -webkit-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1);

  }

  .projects-grid.no-cat .portfolio-cates {

    display: none;

  }



/*** load more button ***/

.btn-block {

  text-align: center;

  clear: both;

}

.btn-block .octf-btn {

  margin-top: 60px;

}

.btn-block .octf-btn:after, .btn-block .octf-btn:before {

  display: none;

}



/**** isotope filtering ****/

.project_filters {

  position: relative;

  width: 100%;

  text-align: center;

  margin-bottom: 30px;

  padding-left: 0;

}

.project_filters:after {

  content: "";

  display: block;

  clear: both;

}



.project_filters li {

  position: relative;

  display: inline-block;

  text-align: center;

  margin-left: 28px;

  margin-right: 28px;

  margin-bottom: 5px;

}

.project_filters li:last-child {

  margin-right: 0;

}

.project_filters li:first-child {

  margin-left: 0;

}



.project_filters li a {

  font-size: 14px;

}

.project_filters li a::before {

  width: 0;

}

.project_filters li a.selected:before {

  width: calc( 100% + 14px );

}

.project_filters li a:focus, .project_filters li a:active {

  color: #415755;

}

.project_filters li a .filter-count {

  position: absolute;

  top: -11px;

  right: -10px;

  width: 20px;

  text-align: left;

  font-size: 11px;

  color: #828282;

  visibility: hidden;

  opacity: 0;

  transition: all 0.2s linear;

  -webkit-transition: all 0.2s linear;

  -moz-transition: all 0.2s linear;

  -o-transition: all 0.2s linear;

  -ms-transition: all 0.2s linear;

}

.project_filters li a.selected .filter-count, .project_filters li a:hover .filter-count {

  opacity: 1;

  visibility: visible;

  right: -20px;

}



/*Dark scheme*/

.dark-scheme .project_filters li a:focus, .dark-scheme .project_filters li a:active {

  color: #fff;

}



/* Start: Recommended Isotope styles */

/**** 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.6s;

  -moz-transition-duration: 0.6s;

  -ms-transition-duration: 0.6s;

  -o-transition-duration: 0.6s;

  transition-duration: 0.6s;

}



.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;

}



/* End: Recommended Isotope styles */

/* project carousel */

.project-slider .octf-swiper-pagination {

  margin-top: 30px;

}



.project-bottom {

  border-top: 1px solid rgba(0, 0, 0, 0.1);

  padding-bottom: 100px;

}



.single-portfolio-navigation {

  padding-top: 42px;

}

.single-portfolio-navigation .post-nav {

  margin-bottom: 0;

}



.portfolio-related-posts-wrap {

  padding-top: 70px;

}



.portfolio-related-title-wrap h2 {

  margin-bottom: 15px;

}



@media only screen and (min-width: 1025px) {

  .portfolio-related-posts-wrap .octf-swiper-pagination {

    display: none;

  }

}

@media only screen and (max-width: 1199px) {

  .projects-grid.pf_5_cols .grid-sizer,

  .projects-grid.pf_5_cols .project-item,

  .projects-grid.pf_4_cols .grid-sizer,

  .projects-grid.pf_4_cols .project-item {

    width: 33.333333%;

  }

  .projects-grid.pf_5_cols .grid-sizer.thumb2x,

  .projects-grid.pf_5_cols .project-item.thumb2x,

  .projects-grid.pf_4_cols .grid-sizer.thumb2x,

  .projects-grid.pf_4_cols .project-item.thumb2x {

    width: 66.666666%;

  }

}

@media only screen and (max-width: 992px) {

  .project-item,

  .grid-sizer,

  .projects-grid.pf_5_cols .grid-sizer,

  .projects-grid.pf_5_cols .project-item,

  .projects-grid.pf_4_cols .grid-sizer,

  .projects-grid.pf_4_cols .project-item {

    width: 50%;

  }

  .project-item.thumb2x,

  .grid-sizer.thumb2x,

  .projects-grid.pf_5_cols .grid-sizer.thumb2x,

  .projects-grid.pf_5_cols .project-item.thumb2x,

  .projects-grid.pf_4_cols .grid-sizer.thumb2x,

  .projects-grid.pf_4_cols .project-item.thumb2x {

    width: 100%;

  }

}

@media only screen and (max-width: 768px) {

  .projects-box .portfolio-info {

    right: 0;

    opacity: 1;

  }



  .projects-style-1 .projects-box .portfolio-info .portfolio-info-inner {

    padding: 30px;

  }



  .projects-style-1 .projects-box .portfolio-info h5 {

    font-size: 20px;

  }



  .projects-style-1 .projects-box .portfolio-info .portfolio-cates {

    font-size: 12px;

  }

}

@media only screen and (max-width: 600px) {

  .project-item,

  .grid-sizer,

  .projects-grid.pf_5_cols .project-item,

  .projects-grid.pf_4_cols .project-item,

  .projects-grid.pf_2_cols .project-item {

    width: 100%;

  }



  .project_filters li {

    margin-left: 10px;

    margin-right: 10px;

  }



  .portfolio-related-title-wrap h2 {

    font-size: 30px;

  }

}

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

## Miscellaneous

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

.site-overlay {

  *cursor: url(https://via.placeholder.com/32x32.png) 16 16, default;

  background: transparent;

  width: 100vw;

  height: 100vh;

  position: fixed;

  top: 0;

  left: 0;

  visibility: hidden;

  opacity: 0;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  z-index: -1;

}



.dc-bgdark .elementor-drop-cap span {

  background: #415755;

  color: #fff;

}



.wpcf7 .main-form .font14 {

  margin-bottom: 24px;

}

.wpcf7 .main-form input,

.wpcf7 .main-form textarea {

  width: 100%;

  background: #fff;

}

.wpcf7 .main-form input::placeholder,

.wpcf7 .main-form textarea::placeholder {

  text-transform: uppercase;

}

.wpcf7 .main-form button {

  margin-top: 30px;

}

.wpcf7 .main-form button:before, .wpcf7 .main-form button:after {

  display: none;

}

.wpcf7 .main-form button:hover {

  background: #fff;

  color: #415755;

  border-color: #415755;

}

.wpcf7 .main-form p {

  margin-bottom: 15px;

}

.wpcf7 .main-form p:last-child {

  margin-bottom: 0;

}

.wpcf7 div.wpcf7-response-output {

  margin: 20px 0 0;

}

.wpcf7 span.wpcf7-not-valid-tip {

  display: none;

}

.wpcf7 .wpcf7-not-valid {

  border-color: #f00;

}

.wpcf7 div.wpcf7-validation-errors,

.wpcf7 div.wpcf7-acceptance-missing {

  background: #f7e700;

  color: #415755;

}



.grid-lines {

  position: absolute;

  width: 100%;

  height: 100%;

  left: 50%;

  top: 0;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

  z-index: 0;

  pointer-events: none;

  user-select: none;

}

.grid-lines .g-line-vertical {

  height: 100%;

  display: block;

  width: 1px;

  background-color: #fff;

  left: 90px;

  top: 0;

  position: absolute;

}

.grid-lines .g-line-horizontal {

  height: 1px;

  display: block;

  width: 100%;

  background-color: #fff;

  top: 90px;

  left: 0;

  position: absolute;

}

.grid-lines .line-center {

  left: 50%;

}

.grid-lines .line-right {

  left: auto;

  right: 90px;

}

.grid-lines .line-bottom {

  bottom: 90px;

  top: auto;

}



.has-lines-horizontal-bottom .grid-lines .line-top {

  display: none;

}



.has-lines-horizontal-top .grid-lines .line-bottom {

  display: none;

}



.no-lines-vertical-center .grid-lines .line-center {

  display: none;

}



.ot-social-vertical {

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.ot-social-vertical ul {

  line-height: 90px;

}

.ot-social-vertical ul li.elementor-icon-list-item {

  margin-bottom: 40px;

  writing-mode: vertical-rl;

  letter-spacing: 0.75px;

  -webkit-transform: rotate(-180deg);

  -ms-transform: rotate(-180deg);

  transform: rotate(-180deg);

}

.ot-social-vertical ul li.elementor-icon-list-item:last-child {

  margin-bottom: 0;

}



.rs-layer .btn-details {

  color: #fff;

}

.rs-layer .btn-details:before {

  background: #505050;

}



.dark-scheme .wpcf7 .main-form input, .dark-scheme .wpcf7 .main-form textarea {

  background: transparent;

}

.dark-scheme .wpcf7 .main-form button {

  background: #415755;

  color: #fff;

  border-color: #415755;

}

.dark-scheme .wpcf7 .main-form button:hover {

  background: #fff;

  color: #415755;

  border-color: #fff;

}



@media (max-width: 600px) {

  .rs-layer .btn-details:before {

    width: 16px;

    height: 7px;

    bottom: 0;

    left: -5px;

  }

  .rs-layer .btn-details:hover:before {

    width: calc( 100% + 10px );

  }



  .rs-layer.octf-btn:before, .rs-layer.octf-btn:after {

    display: none;

  }

}

@media (max-width: 1024px) {

  .grid-lines .g-line-vertical {

    left: 0;

  }

  .grid-lines .g-line-vertical.line-right {

    right: 0;

    left: auto;

  }

  .grid-lines .g-line-vertical.line-center {

    left: 50%;

  }

}

@media (max-width: 991px) {

  .ot-gallery .gallery-item:nth-child(even) .gallery-icon {

    padding-top: 0;

  }

}

@media (max-width: 767px) {

  .ot-social-vertical {

    display: none;

  }

}

body .elementor-widget:not(:last-child) {

  margin-bottom: 0;

}



div.elementor-widget-heading .elementor-heading-title {

  color: #415755;

  font-weight: 400;

  font-family: "Titillium Web", sans-serif;

}



.dark-scheme .elementor-widget-heading .elementor-heading-title {

  color: #fff;

}



.elementor .elementor-section.elementor-section-boxed > .elementor-container {

  padding: 0 15px;

}



.elementor-default .elementor-widget-text-editor,

.elementor-default .elementor-icon-list-text {

  font-family: "Raleway", sans-serif;

  color: #555555;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}



.elementor-default.dark-scheme .elementor-widget-text-editor,

.elementor-default.dark-scheme .elementor-icon-list-text {

  color: #dddddd;

}



.elementor_library-template-default .post-author-box,

.elementor_library-template-default .post-navigation {

  display: none;

}



.elementor-default .elementor-widget-text-editor p:last-child {

  margin-bottom: 0;

}



.elementor .elementor-section > .elementor-container > .elementor-row {

  width: auto;

  flex: 100%;

  min-width: 100%;

}



.elementor-section > .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated, .elementor-section > .elementor-column-gap-narrow > .elementor-row > .elementor-column > .elementor-element-populated, .elementor-section > .elementor-column-gap-extended > .elementor-row > .elementor-column > .elementor-element-populated {

  padding-top: 0;

  padding-bottom: 0;

}



.elementor .elementor-section > .elementor-column-gap-extended > .elementor-row {

  margin-left: -15px;

  margin-right: -15px;

}

.elementor .elementor-section > .elementor-column-gap-default > .elementor-row {

  margin-left: -10px;

  margin-right: -10px;

}

.elementor .elementor-section > .elementor-column-gap-narrow > .elementor-row {

  margin-left: -5px;

  margin-right: -5px;

}



.elementor .elementor-section-full_width:not(.elementor-inner-section) > .elementor-column-gap-extended > .elementor-row {

  margin-left: 0;

  margin-right: 0;

}



.page-template-template-homepage .elementor-top-section.elementor-section-full_width > .elementor-column-gap-default > .elementor-row, .page-template-template-homepage .elementor-top-section.elementor-section-full_width > .elementor-column-gap-narrow > .elementor-row, .page-template-template-homepage .elementor-top-section.elementor-section-full_width > .elementor-column-gap-extended > .elementor-row, .page-template-template-homepage .elementor-top-section.elementor-section-full_width > .elementor-column-gap-wide > .elementor-row, .page-template-template-homepage .elementor-top-section.elementor-section-full_width > .elementor-column-gap-wider > .elementor-row,

.page-template-template-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-default > .elementor-row,

.page-template-template-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-narrow > .elementor-row,

.page-template-template-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-extended > .elementor-row,

.page-template-template-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-wide > .elementor-row,

.page-template-template-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-wider > .elementor-row,

.page-template-template-home-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-default > .elementor-row,

.page-template-template-home-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-narrow > .elementor-row,

.page-template-template-home-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-extended > .elementor-row,

.page-template-template-home-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-wide > .elementor-row,

.page-template-template-home-full-width .elementor-top-section.elementor-section-full_width > .elementor-column-gap-wider > .elementor-row {

  margin-left: 0;

  margin-right: 0;

}



.ot-flex-column-horizontal .elementor-widget-wrap {

  flex-wrap: nowrap;

}

.ot-flex-column-horizontal .elementor-widget-wrap > .elementor-widget {

  display: flex;

  width: auto;

}



.elementor-section.ml_0 .elementor-container {

  margin-left: 0;

}



@media (max-width: 767px) {

  .elementor .elementor-hidden-phone {

    display: none;

  }

}

@media (min-width: 768px) and (max-width: 1024px) {

  .elementor .elementor-hidden-tablet {

    display: none;

  }

}

@media (min-width: 1025px) {

  .elementor .elementor-hidden-desktop {

    display: none;

  }

}

@media (max-width: 767px) {

  .page-template-template-homepage .elementor-top-section:not(.elementor-section-full_width) > .elementor-container,

  .page-template-template-full-width .elementor-top-section:not(.elementor-section-full_width) > .elementor-container,

  .page-template-template-home-full-width .elementor-top-section:not(.elementor-section-full_width) > .elementor-container {

    padding-left: 15px;

    padding-right: 15px;

  }

  .page-template-template-homepage .elementor-top-section:not(.elementor-section-full_width) > .elementor-column-gap-no,

  .page-template-template-full-width .elementor-top-section:not(.elementor-section-full_width) > .elementor-column-gap-no,

  .page-template-template-home-full-width .elementor-top-section:not(.elementor-section-full_width) > .elementor-column-gap-no {

    padding-left: 0;

    padding-right: 0;

  }

}

@media (min-width: 768px) {

  .elementor .elementor-section.elementor-section-boxed > .elementor-container {

    max-width: 750px;

  }



  .elementor-element .container {

    width: 720px;

    padding: 0;

  }

}

@media (min-width: 992px) {

  .elementor .elementor-section.elementor-section-boxed > .elementor-container {

    max-width: 970px;

  }



  .elementor-element .container {

    width: 940px;

    padding: 0;

  }

}

@media (min-width: 1230px) {

  .elementor .elementor-section.elementor-section-boxed > .elementor-container {

    max-width: 1200px;

  }



  .elementor-element .container {

    width: 1170px;

    padding: 0;

  }

}

@media (min-width: 1230px) {

  .elementor .elementor-section:not(.elementor-section-full_width) > .elementor-column-gap-wide > .elementor-row {

    margin-left: -20px;

    margin-right: -20px;

  }

  .elementor .elementor-section:not(.elementor-section-full_width) > .elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-element-populated {

    padding-left: 20px;

    padding-right: 20px;

  }

  .elementor .elementor-section:not(.elementor-section-full_width) > .elementor-column-gap-wider > .elementor-row {

    margin-left: -30px;

    margin-right: -30px;

  }

  .elementor .elementor-section:not(.elementor-section-full_width) > .elementor-column-gap-wider > .elementor-row > .elementor-column > .elementor-element-populated {

    padding-left: 30px;

    padding-right: 30px;

  }

}

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

## Search

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

.octf-cta-header {

  position: relative;

  height: 100%;

  display: flex;

  align-items: center;

}

.octf-cta-header .toggle_search {

  cursor: pointer;

}

.octf-cta-header .toggle_search i {

  color: #fff;

  text-align: center;

  display: inline-block;

  vertical-align: middle;

  min-width: 22px;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.octf-cta-header .toggle_search i:before, .octf-cta-header .toggle_search i:after {

  font-size: 22px;

}

.octf-cta-header .toggle_search i.ot-flaticon-close-1:before {

  font-size: 18px;

}

.octf-cta-header .h-search-form-field {

  position: absolute;

  z-index: 99;

  top: -webkit-calc(100% + 10px);

  top: expression(100% + 10px);

  top: -moz-calc(100% + 10px);

  top: -o-calc(100% + 10px);

  top: calc(100% + 10px);

  right: -30px;

  width: 340px;

}

.octf-cta-header .h-search-form-field .h-search-form-inner {

  padding: 20px 35px 34px;

  background-color: #415755;

  box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);

  -moz-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);

}

.octf-cta-header .h-search-form-field .h-search-form-inner input {

  background: transparent;

  color: #fff;

  font-weight: 400;

  border-color: rgba(255, 255, 255, 0.1);

}

.octf-cta-header .h-search-form-field .h-search-form-inner button {

  color: #fff;

}

.octf-cta-header .h-search-form-field .h-search-form-inner button i:before {

  font-weight: normal;

}

.octf-cta-header .h-search-form-field .h-search-form-inner ::-webkit-input-placeholder {

  /* Edge */

  color: #fff;

}

.octf-cta-header .h-search-form-field .h-search-form-inner :-ms-input-placeholder {

  /* Internet Explorer */

  color: #fff;

}

.octf-cta-header .h-search-form-field .h-search-form-inner ::placeholder {

  color: #fff;

}

.octf-cta-header .h-search-form-field.show {

  -webkit-animation: searchSlideUp 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;

  animation: searchSlideUp 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;

}



@-webkit-keyframes searchSlideUp {

  from {

    -webkit-transform: translateY(10%);

    transform: translateY(10%);

  }

  to {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@keyframes searchSlideUp {

  from {

    -webkit-transform: translateY(10%);

    transform: translateY(10%);

  }

  to {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@media only screen and (max-width: 600px) {

  .octf-cta-header .h-search-form-field {

    right: -65px;

  }

}

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

## Mini Cart

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

.octf-cart {

  position: relative;

}



.site-header-cart {

  position: absolute;

  visibility: hidden;

  opacity: 0;

  z-index: 10;

  top: -webkit-calc(100% + 10px);

  top: expression(100% + 10px);

  top: -moz-calc(100% + 10px);

  top: -o-calc(100% + 10px);

  top: calc(100% + 10px);

  right: -30px;

  background: #415755;

  color: #fff;

  width: 342px;

  padding: 35px;

  box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);

  -moz-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);

  -webkit-transform: translateY(30px);

  -ms-transform: translateY(30px);

  transform: translateY(30px);

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.site-header-cart .woocommerce-mini-cart__buttons {

  margin-bottom: -15px;

}

.site-header-cart .widget_shopping_cart_content {

  text-align: left;

}



.octf-cart:hover .site-header-cart {

  visibility: visible;

  opacity: 1;

  -webkit-transform: translateY(0px);

  -ms-transform: translateY(0px);

  transform: translateY(0px);

}

.octf-cart:hover .site-header-cart:before {

  content: "";

  position: absolute;

  height: 10px;

  width: 100%;

  top: -10px;

  left: 0px;

}



.cart-contents {

  position: relative;

  display: inline-block;

  color: #fff;

}

.cart-contents:hover {

  color: #fff;

}

.cart-contents i:before {

  font-size: 22px;

}

.cart-contents .count {

  position: absolute;

  bottom: -3px;

  left: -12px;

  width: 22px;

  height: 22px;

  line-height: 22px;

  background: #415755;

  color: #fff;

  text-align: center;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  font-size: 11px;

  font-family: "Titillium Web", sans-serif;

}



@media only screen and (max-width: 1024px) {

  .site-header-cart {

    display: none;

  }

}

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

## Menu Mobie

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

.header-mobile {

  display: none;

}



.header-mobile .is-stuck {

  background-color: #415755;

}

.header-mobile .is-stuck .cart-contents .count {

  background: #fff;

  color: #415755;

}



.mmenu-toggle button {

  background: none;

  border: none;

  outline: none;

  padding: 0;

  color: #fff;

}

.mmenu-toggle button i:before {

  font-size: 22px;

}



.mmenu-wrapper {

  position: fixed;

  top: 0;

  bottom: 0;

  right: 0;

  width: 310px;

  height: 100vh;

  background: #415755;

  overflow-x: hidden;

  z-index: 9999;

  -webkit-transform: translateX(100%);

  -ms-transform: translateX(100%);

  transform: translateX(100%);

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.mmenu-wrapper.mmenu-open {

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

  transform: translateX(0);

}

.mmenu-wrapper .mmenu-inner {

  top: 0;

  height: 100%;

  width: 327px;

  padding: 20px 52px 35px 35px;

  overflow-x: hidden;

  overflow-y: auto;

  box-sizing: border-box;

}

.mmenu-wrapper .mmenu-close {

  display: block;

  margin-bottom: 10px;

  color: #fff;

}

.mmenu-wrapper .mobile_mainmenu {

  margin: 0;

  padding: 0;

}

.mmenu-wrapper .mobile-nav {

  min-width: 240px;

}

.mmenu-wrapper .mobile_mainmenu ul {

  position: relative;

  margin: 0;

  padding: 0;

  margin-left: 15px;

}

.mmenu-wrapper .mobile_mainmenu ul {

  display: none;

}

.mmenu-wrapper .mobile_mainmenu li {

  position: relative;

  list-style: none;

}

.mmenu-wrapper .mobile_mainmenu li a {

  padding: 9px 30px 9px 0;

  display: block;

  font-size: 14px;

  color: #fff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.mmenu-wrapper .mobile_mainmenu > li.menu-item-has-children .arrow {

  color: #fff;

  position: absolute;

  display: block;

  right: 0;

  top: 0;

  cursor: pointer;

  width: 34px;

  height: auto;

  padding: 7px 12px 7px 0;

  line-height: inherit;

  text-align: right;

  box-sizing: border-box;

}

.mmenu-wrapper .mobile_mainmenu > li.menu-item-has-children .arrow i {

  color: #9397a7;

  display: inline-block;

  line-height: 1;

  -webkit-transition: transform 0.3s ease-in-out;

  -moz-transition: transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out;

}

.mmenu-wrapper .mobile_mainmenu > li.menu-item-has-children .arrow i:before {

  font-size: 10px;

  font-weight: 600;

}

.mmenu-wrapper .mobile_mainmenu > li.menu-item-has-children .arrow.active i {

  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  transform: rotate(90deg);

}

.mmenu-wrapper.on-left {

  right: auto;

  left: 0;

  -webkit-transform: translateX(-100%);

  -ms-transform: translateX(-100%);

  transform: translateX(-100%);

}

.mmenu-wrapper.on-left.mmenu-open {

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

  transform: translateX(0);

}

.mmenu-wrapper.on-left .mmenu-close {

  text-align: right;

}

.mmenu-wrapper.on-left .mmenu-close i:before {

  content: "";

}



.mmenu-active .mmenu-overlay {

  background: rgba(0, 0, 0, 0.7);

  visibility: visible;

  opacity: 1;

  z-index: 9998;

}



@media only screen and (max-width: 1024px) {

  .header-mobile {

    display: block;

  }



  .admin-bar section:not(.is-stuck) .mmenu-wrapper {

    top: 32px;

  }

}

@media only screen and (max-width: 782px) {

  .admin-bar section:not(.is-stuck) .mmenu-wrapper {

    top: 46px;

  }

}

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

## Side Panel

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

.panel-btn {

  line-height: 1;

}

.panel-btn i {

  color: #66CC33;

  cursor: pointer;

}

.panel-btn i:before {

  font-size: 22px;

}



.admin-bar .side-panel {

  top: 32px;

}



.side-panel {

  width: 400px;

  position: fixed;

  top: 0;

  bottom: 0;

  right: 0;

  background: rgb(65 87 85 / 93%);

  overflow-x: hidden;

  z-index: 9999;

  -webkit-transform: translateX(100%);

  -ms-transform: translateX(100%);

  transform: translateX(100%);

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.side-panel .side-panel-block {

  padding: 90px 42px 90px 25px;

  height: 100%;

  width: calc(100% + 17px);

  overflow-x: hidden;

  overflow-y: auto;

  box-sizing: border-box;

}

.side-panel .side-panel-close {

  display: block;

  position: absolute;

  right: 0;

  top: 0;

  color: #fff;

  font-size: 20px;

  width: 90px;

  height: 90px;

  line-height: 90px;

  cursor: pointer;

  z-index: 9999;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  /*background: #2f2f2f;*/

  text-align: center;

}

.side-panel .side-panel-close:hover{
  color: black;
}

.side-panel.on-left {

  right: auto;

  left: 0;

  -webkit-transform: translateX(-100%);

  -ms-transform: translateX(-100%);

  transform: translateX(-100%);

}

.side-panel.on-left.mmenu-open {

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

  transform: translateX(0);

}

.side-panel.side-panel-open {

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

  transform: translateX(0);

}



.side-panel-active .panel-overlay {

  background: rgba(0, 0, 0, 0.7);

  visibility: visible;

  opacity: 1;

  z-index: 9998;

}

/* Custom mini cart */

.woocommerce-mini-cart li {

  margin-bottom: 0;

  padding-bottom: 28px;

  padding-right: 32px;

  line-height: 1;

}

.woocommerce-mini-cart li:before, .woocommerce-mini-cart li:after {

  content: ' ';

  display: table;

}

.woocommerce-mini-cart li:after {

  clear: both;

}

.woocommerce-mini-cart li img {

  width: 75px;

  max-width: 100%;

  height: auto;

  float: left;

  margin-left: 0;

  margin-top: 2px;

  margin-right: 20px;

  border: 1px solid rgba(0,0,0,.1);

  box-shadow: none;

  -webkit-border-radius: 0;

  border-radius: 0;

}

.woocommerce-mini-cart li a.remove {

  top: 0;

  margin-top: 0;

  right: 0;

  position: absolute;

  left: auto;

  line-height: .8;

  font-weight: 400;

  font-size: 25px;

  color: #656565!important;

}

.woocommerce-mini-cart li a.remove:hover {

  background: none;

}

.woocommerce-mini-cart li a:not(.remove) {

  display: inline;

  font-family: "Titillium Web",sans-serif;

  font-size: 18px;

  color: #fff;

  font-weight: 500;

  line-height: 24px;

}

.woocommerce-mini-cart li .quantity {

  color: #9f9e9e;

  font-family: "Titillium Web",sans-serif;

  font-weight: 600;

  font-size: 14px;

  display: block;

  margin-top: 12px;

}

.woocommerce-mini-cart li .amount {

  color: #9f9e9e;

  font-weight: 400;

  font-size: 16px;

  font-family: "Josefin Sans",sans-serif;

}

.woocommerce-mini-cart__total {

  border-top: 0;

  padding: 0;

}

.woocommerce-mini-cart__total strong {

  min-width: 40px;

  display: inline-block;

}

.woocommerce-mini-cart__total strong {

  color: #fff;

  font-family: "Titillium Web",sans-serif;

  font-weight: 600;

  font-size: 22px;

}
.octf-cta-header i.ot-flaticon-phone-call {
  margin-right: 10px;
  color: #66CC33;
}

.woocommerce-mini-cart__total .amount {

  float: right;

  font-size: 18px;

  line-height: 44px;

  color: #fff;

  font-weight: 400;

  font-family: "Josefin Sans",sans-serif;

}

.woocommerce-mini-cart__buttons .button  {

  font-size: 13px;

  line-height: 1;

  border-radius: 0;

  font-weight: 600;

  letter-spacing: .5px;

  font-family: "Titillium Web",sans-serif;

  text-transform: uppercase;

  padding: 16px 30px;

  margin-right: 13px;

  display: inline-block;

  margin-bottom: 5px;

  border: 1px solid #415755;

}

.woocommerce-mini-cart__buttons .button:last-child {

  margin-right: 0;

}

.woocommerce-mini-cart__buttons .button.wc-forward {

  border-color: #fff;

  color: #415755;

  background: #fff;

}

.woocommerce-mini-cart__buttons .button.wc-forward:hover {

  color: #fff;

  background: transparent;

  border-color: #fff;

}

.woocommerce-mini-cart__buttons .button.checkout {

  background-color: transparent;

  color: #fff;

  border-color: #fff;

}

.woocommerce-mini-cart__buttons .button.checkout:hover {

  border-color: #fff;

  color: #415755;

  background: #fff;

}

/* Mega Menu */

.main-navigation {

  position: unset;

}

.main-navigation > ul {

  position: unset;

}

.main-navigation > ul > li.mega-dropdown {

  display: list-item;

  float: none;

  position: unset;

  flex-direction: column;

}

.main-navigation ul li ul.mega-sub-menu {

  width: 100%;

  left: 0;

  padding-top: 50px;

}

.main-navigation ul.mega-sub-menu li.row {

  display: flex;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0;

}

.main-navigation ul li ul.mega-sub-menu .col {

  min-width: 220px;

  position: relative;

  left: auto;

  -ms-flex-preferred-size: 0;

  flex-basis: 0;

  -ms-flex-positive: 1;

  max-width: 25%;

  box-shadow: none;

  -webkit-transform: translateY(10px);

  -ms-transform: translateY(10px);

  transform: translateY(10px);

}

.main-navigation ul li.mega-dropdown:hover > ul .col {

  visibility: visible;

  opacity: 1;

}

.main-navigation ul li ul.mega-sub-menu .col li {

  padding-left: 0;

}

.mega-sub-menu .menu-title {

  color: #fff;

  font-size: 20px;

  margin-bottom: 10px;

}

/* Custom Side panel */

.side-panel-block .the-logo {

  margin: 10px 0 40px -40px;

}

.side-panel-block .the-logo img {

  width: 95%;

}

.side-panel-block .ot-heading h2 {

  color: #66CC33;

  font-size: 24px;

  margin-bottom: 20px;

}

.side-panel-block .gallery {

  margin: 0 -10px -10px 0;

  display: table;

}

.side-panel-block .gallery-item {

  padding: 0 10px 10px 0;

  display: inline-block;

  max-width: 33.33333333%;

}

.side-panel .side-panel-block {



}

.header_mobile .container-fluid {

  padding-left: 0;

  padding-right: 0;

}

.header_mobile .octf-row {

  margin-left: 0;

  margin-right: 0;

  background: rgb(65 87 85 / 93%);

}

.header_mobile .octf-col {

  padding-left: 0;

  padding-right: 0;

}

.header_mobile .octf-search {

  margin-right: 30px;

}

.header_mobile .octf-menu-mobile {

  padding-right: 15px;

}

.header_mobile .mlogo_wrapper img {

  height: 50px;
  width: 80%;

}

.header_mobile .octf-row{

  display: flex;

  flex-wrap: nowrap;

  align-items: stretch;

  flex: 1 auto;

}

.side-panel-cinfo {

  padding-bottom: 40px;

}

.side-panel-cinfo ul {

  padding-left: 0;

  margin-bottom: 0;

}

.side-panel-cinfo .icon-list-item, .side-panel-cinfo .icon-list-item a {

  font-family: var(--e-global-typography-text-font-family);

  font-weight: var(--e-global-typography-text-font-weight);

}

.side-panel-cinfo li.icon-list-item, .side-panel-cinfo li.icon-list-item a {

  font-family: "Raleway",sans-serif;

  color: #fff;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.side-panel-cinfo .icon-list-item, .side-panel-cinfo  .icon-list-item a {

  font-family: "Raleway",Sans-serif;

  line-height: 18px;

}

.side-panel-cinfo  .icon-list-items:not(.elementor-inline-items) .icon-list-item:not(:last-child) {

  padding-bottom: calc(25px/2);

}

@media (min-width: 768px){

  .side-panel-block .gallery-columns-3 .gallery-item {

    max-width: 33.33%;

  }

}



@media only screen and (max-width: 782px) {

  .admin-bar .side-panel {

    top: 46px;

  }

}

.gallery-columns-2 {

  display: table;

}

.gallery-columns-2 .gallery-item {

  width: 50%;

}

@media (max-width: 767px){

  .gallery-columns-2 .gallery-item {

    width: 100%;

  }

}

.author-bio .author-info {

  background-image: url('https://via.placeholder.com/870x290.png');

}

.author-bio .author-image {

  max-width: 150px;

}

/* Page Header */

section {

  position: relative;

  padding-top: 110px;

  padding-bottom: 110px;

}

.space-medium {

  padding-top: 70px;

  padding-bottom: 70px;

}

.no-padding {

  padding: 0;

}

.bg-dark-1 {

  background-color: #415755;

}

.page-header {

  background-image: url('../images/bg.jpg');

}

.page-header-contact {

  background-image: url('../images/bg.jpg');

}

.pheader-service-detail1 {

  background-image: url('../images/bg.jpg');

}

.pheader-team {

  background-image: url('../images/bg.jpg');

}

.pheader-services {

  background-image: url('../images/bg.jpg');

}

.pheader-about {

  background-image: url('../images/bg.jpg');

}

.pheader-process {

  background-image: url('../images/bg.jpg');

}

.pheader-studio {

  background-image: url('../images/bg.jpg');

}

.pheader-typo {

  background-image: url('../images/bg.jpg');

}

.pheader-faq {

  background-image: url('../images/bg.jpg');

}

.pheader-portfolio {

  background-image: url('../images/bg.jpg');

}

.pheader-portfolio-detail {

  background-image: url('../images/bg.jpg');

}



/* Post */

.comments-title span {

  color: #bababa;

}

.masonry-post .post-inner {
  /* CHANGED THIS MESSING WITH NEWS POST GRID*/
  /*margin-bottom: 30px;*/

}

.masonry-post .owl-theme .owl-nav [class*='owl-'] {

  width: 50px;

  height: 50px;

}

/* contact */

.contact-left h2 {

  line-height: 1;

}

/*changed this in contact sheet when i added phone number*/
/*.contact-left p {*/

/*  margin-bottom: 24px;*/

/*}*/

.contact-right {

  padding-left: 75px;

  padding-right: 40px;

  background-image: url('../images/bg1-contact.jpg');

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  color: #dddddd;

}

.contact-right .ot-heading {

  padding-top: 81px;

  padding-bottom: 25px;

}

.contact-right h2 {

  color: #66CC33;

}

.contact-right > p {

  margin-bottom: 25px;

}

.contact-right .contact-info {

  padding-bottom: 27px;

}

.contact-right .contact-info h6 {

  color: #FFF;

}

.contact-right .contact-info i:before {

  color: #66CC33;

  font-size: 23px;

}

.contact-right .contact-info, .contact-right .contact-info a {

  color: #d3d3d3;

}

.contact-right .list-social a {

  border-color: rgba(255,255,255,.4);

}

.contact-right .list-social {

  margin-top: 11px;

  padding-bottom: 90px;

}

.contact-map {

  margin-top: -40px;

  z-index: -1;

  position: relative;

}

.map {

  height: 522px;

}

.map iframe {

  width: 100%;

  height: 522px;

  filter: brightness(100%) contrast(100%) saturate(0%) blur(0) hue-rotate(0deg);

}

/* Our Services */

.benefits-sidebar .ot-heading {

  padding-bottom: 38px;

}

.benefits-sidebar .ot-heading h2 {

  line-height: 60px;

}

.principes {

  background-color: #F4F4F4;

  background-image: url(https://via.placeholder.com/411x610.png);

  background-position: 100% 100%;

  background-repeat: no-repeat;

}

.main-principes {

  padding-left: 85px;

}

.main-principes .ot-heading {

  margin-bottom: 30px;

}

.process-classic {

  margin-bottom: 30px;

}

.process-classic span {

  color: #8F8F8F;

  font-size: 20px;

  font-weight: 400;

  font-family: "Titillium Web",sans-serif;

  line-height: 1;

  padding-bottom: 12px;

}

.process-classic h6 {

  font-size: 20px;

  margin-bottom: 15px;

  color: #415755;

  font-weight: 400;

  font-family: "Titillium Web",sans-serif;

}

.process-classic p {

  margin-bottom: 0;

}

.our-services .ot-heading {

  margin-bottom: 50px;

}

.icon-box--bg-img {

  margin-bottom: 20px;

}

.services-feature {

  background-color: #415755;

  padding-bottom: 90px;

}

.icon-box.s2 {

  padding: 39px 2px 19px 2px;

  margin-bottom: 30px;

  background-image: url(https://via.placeholder.com/169x169.png);

}

.icon-box.s2:hover {

  background-image: url(https://via.placeholder.com/169x169.png);

}

.icon-box.s2 .icon-main {

  color: #fff;

}

.icon-box.s2:hover .icon-main {

  color: #415755;

}

.icon-box.s2 h5 {

  font-size: 16px;

  font-weight: 600;

  color: #fff;

}

.icon-box.s2:hover h5 {

  color: #415755;

}

.icon-box .icon-main span.ot-flaticon-tip {

  margin-left: 18px;

}

.feature-content .ot-heading {

  padding-bottom: 20px;

}

.tabs-light .tab-link {

  min-width: 150px;

  border-bottom: 3px solid #4B4B4B;

}

.tabs-light .tab-link:not(.current) {

  color: #9F9F9F;

}

.tabs-light .tab-link.current, .tabs-light .tab-link:hover {

  color: #FFF;

  border-bottom: 3px solid #FFF;

}

.feature-content .ot-tabs .tab-content {

  color: #dddddd;

  padding-top: 16px;

  padding-bottom: 0;

}

.ot-tabs.tabs-light .tab-content {

  color: #dddddd;

}

.tabs-light .tab-content ul li:before, .tabs-light .tab-content ol li:before {

  background: #9F9F9F;

}

.benefits-detail .ot-heading {

  padding-bottom: 18px;

}

.benefits-detail .ot-heading h2 {

  line-height: 60px;

}

/* About Us */

.about-detail .ot-heading {

  margin-bottom: 25px;

}

.about-detail p {

  margin-bottom: 40px;

}

.our-philosophy {

  background-image: url('../images/bg1-aboutus.jpg');

  background-repeat: no-repeat;

  background-size: cover;

}

.our-philosophy .ot-heading {

  margin-bottom: 50px;

}

.our-philosophy .ot-heading:before {

  border-color: #FFF;

}

.about-counter {

  background-image: url('../images/bg1-home1.jpg');

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 66px 0;

}

.work-content .ot-heading {

  padding: 21px 0 25px 0;

}

.ot-accordions .acc-item .acc-toggle span.up {

  display: none;

}

.ot-accordions .acc-item.current .acc-toggle span.down {

  display: none;

}

.ot-accordions .acc-item.current .acc-toggle span.up {

  display: inherit;

}

.about-team {

  background-image: url('../images/bg2-home1.jpg');

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

}

.about-testi {

  padding-bottom: 85px;

}

.about-testi .ot-heading{

  margin-bottom: 50px;

}

/* Our Team */

.skill-content .ot-heading {

  margin-bottom: 25px;

}

.ot-progress .progress-bar {

  color: #415755;

}

.team-clients {

  padding: 70px 0;

}

.clients-slide .owl-stage, .clients-slide-medium .owl-stage {

  display: flex;

  align-items: center;

}

.clients-slide .img-item figure, .clients-slide-medium .img-item figure {

  margin-top: 0;

  margin-bottom: 0;

}

.clients-slide .img-item img, .clients-slide-medium .img-item img {

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.clients-slide .img-item img, .clients-slide-medium .img-item img {

  width: auto;

  opacity: .7;

  filter: brightness(100%) contrast(0%) saturate(100%) blur(0) hue-rotate(0deg);

}

.clients-slide .img-item img:hover, .clients-slide-medium .img-item img:hover {

  opacity: 1;

  filter: brightness(100%) contrast(100%) saturate(100%) blur(0) hue-rotate(0deg);

}

.section-team-list {

  background-image: url(https://via.placeholder.com/1920x1577.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

}

.counter-of-team {

  padding-top: 120px;

}

.section-team-list .ot-heading {

  margin-bottom: 50px;

}

.our-skills {

  padding-top: 80px;

  padding-bottom: 120px;

}

.octf-btn.border-hover-dark:hover {

  border-color: #415755;

}

.octf-btn.border-hover-light:hover {

  border-color: #fff;

}

/* SInle Team */

.single-team {

  padding-top: 90px;

  padding-bottom: 100px;

}

.team-member-img {

  margin-right: -100px;

  padding-top: 55px;

  position: relative;

  z-index: 1;

}

.team-member-info {

  background-image: url(https://via.placeholder.com/770x485.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 40px;

}

.team-member-info h2 {

  color: #fff;

  font-size: 42px;

  line-height: 1;

  padding-top: 75px;

  margin-bottom: 25px;

}

.team-member-info h5 {

  color: #FFF;

  font-family: "Josefin Sans",Sans-serif;

  font-size: 14px;

  text-transform: uppercase;

  letter-spacing: .5px;

  margin-bottom: 28px;

}

.single-team-detail {

  padding-top: 55px;

}

.single-team-detail h4 {

  margin-bottom: 28px;

  line-height: 1;

}

.single-team-skill {

  padding-top: 45px;

  margin-bottom: 50px;

}

.single-team-skill h4 {

  margin-bottom: 30px;

  line-height: 1;

}

.single-team-skill p {

  margin-bottom: 0;

}

.single-team-contact h4 {

  line-height: 1;

}

.single-team-detail p {

  margin-bottom: 50px;

}

.single-team-detai strong {

  color: #415755;

}

.team-feature-detail h6 {

  margin-bottom: 10px;

  font-size: 16px;

  font-weight: 600;

  line-height: 1;

}

.team-feature-detail {

  margin-bottom: 27px;

}

.team-feature-detail p {

  margin-bottom: 0;

}

/* Our process */

.our-process {

  background-image: url(https://via.placeholder.com/1920x1612.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

}

.our-process .ot-heading {

  margin-bottom: 50px;

}

.process-step {

  background-image: url(https://via.placeholder.com/1183x533.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

}

.process-step .ot-heading {

  margin-bottom: 60px;

}

.process-step .ot-heading h2 {

  color: #fff;

}

.process-step .ot-heading.is-dots:before {

  border-bottom-color: #fff;

}

.ot-process .process_nav li .icon-main {

  text-align: center;

}

.ot-process .process_nav li .icon-main .dcell {

  display: block;

}

.ot-process .process_nav li .icon-main i:before {

  font-size: 56px;

}

.ot-process .process_nav li .icon-main .dcell .ot-flaticon-tip {

  margin-left: 18px;

}

.skill-process-detail  .ot-heading {

  margin-bottom: 25px;

}

.skill-process-detail p {

  margin-bottom: 33px;

}

.process-news {

  background-color: #F4F4F4;

  background-image: url(https://via.placeholder.com/412x533.png);

  background-position: 100% 100%;

  background-repeat: no-repeat;

}

.our-studio-detail {

  background-image: url(https://via.placeholder.com/375x375.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 60px 50px 60px 50px;

  margin-top: 78px;

}

.our-studio-detail .ot-heading {

  padding-bottom: 12px;

}

.our-studio-detail .ot-heading h2 {

  color: #fff;

  font-size: 36px;

}

.our-studio-detail p {

  color: #dddddd;

  margin-bottom: 0;

}

.services-studio {

  background-color: #F4F4F4;

}

.services-studio-detail .ot-heading {

  margin-bottom: 25px;

}

.services-studio-detail p {

  margin-bottom: 40px;

}

.services-studio-detail .icon-box {

  padding: 0;

  padding-right: 30px;

  background-color: rgba(244,244,244,.98);

}

.services-studio-detail .icon-box.last {

  padding-right: 0;

}

.services-studio-detail .icon-box .icon-main span {

  margin-bottom: 22px;

}

.services-studio-detail .icon-box .icon-main i:before {

  font-size: 50px;

}

.services-studio-detail .icon-box h5 {

  margin-bottom: 9px;

}

.services-studio-detail .icon-box h5 a{

  color: #415755;

}

.services-studio-detail .icon-box p {

  margin-bottom: 10px;

  color: #555;

}

.services-studio-detail .icon-box--bg-img:hover .btn-details {

  color: #415755;

}

.services-studio-detail .icon-box:hover .btn-details:before {

  background: #DDD;

  border-color: #DDD;

}

.progress-studio {

  background-image: url(https://via.placeholder.com/1920x505.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

}

.main-color-stext {

  color: #dddddd;

  padding-top: 8px;

}

.circle-progress.text-light .inner-bar > span {

  color: #fff;

}

.studio-testi-slide {

  width: 100%;

  position: relative;

}

.studio-testi-img {

  width: 100%;

}

.studio-testi-slide-block {

  margin-left: 0;

  margin-right: 0;

}

.studio-testi-slide-block {

  margin-top: 58px;

  padding-top: 82px;

  padding-left: 87px;

  background-color: #F4F4F4;

}

.studio-testi-slide-block .ot-heading {

  margin-bottom: 25px;

}

.studio-testi-slide-block .testimonials-slide-2 {

  padding-bottom: 70px;

}

.studio-testi-slide-block .testimonials-slide-2 .testi-item .ttext:before {

  display: none;

}

.ot-testimonials .ot-testimonials-slider-s2 .testi-item .ttext {

  padding: 0 70px 0 0;

  background-color: #F4F4F4;

  border: none;

}

.studio-testi-img-block {

  z-index: -1;

  position: relative;

}

.testimonials-slide-2.owl-theme .owl-nav .owl-next, .testimonials-slide-2.owl-theme .owl-nav .owl-prev {

  bottom: 0;

  right: 0;

  top: auto;

  background-color: #F4F4F4;

  -webkit-transform: translateY(0%);

  -ms-transform: translateY(0%);

  transform: translateY(0%);

}

.testimonials-slide-2.owl-theme .owl-nav .owl-next:hover, .testimonials-slide-2.owl-theme .owl-nav .owl-prev:hover {

  background-color: #F4F4F4;

}

.testimonials-slide-2.owl-theme .owl-nav .owl-prev {

  right: 60px;

  left: auto;

}

.clients-process .container-fluid {

  padding-left: 40px;

  padding-right: 40px;

}

.portfoli-studio .ot-heading {

  margin-bottom: 50px;

}

/* Typo */

.typo {

  padding-top: 90px;

  padding-bottom: 50px;

}

.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6 {

  margin-bottom: 25px;

}

.theratio-separato {

  height: 1px;

  width: 100%;

  background-color: rgba(0,0,0,.1);

  margin: 80px 0;

}

.bg-classic-transparent {

  background: transparent;

}

.mt-30 {

  margin-top: 30px;

}

.mb-30 {

  margin-bottom: 30px;

}

.space-1 {

  width: 100%;

  height: 1px;

}

.space-2 {

  width: 100%;

  height: 2px;

}

.space-5 {

  width: 100%;

  height: 5px;

}

.space-10 {

  width: 100%;

  height: 10px;

}

.space-20 {

  width: 100%;

  height: 20px;

}

.space-25 {

  width: 100%;

  height: 25px;

}

.space-30 {

  width: 100%;

  height: 30px;

}

.space-40 {

  width: 100%;

  height: 40px;

}

.space-50 {

  width: 100%;

  height: 50px;

}

.space-60 {

  width: 100%;

  height: 60px;

}

.space-70 {

  width: 100%;

  height: 70px;

}

.space-80 {

  width: 100%;

  height: 80px;

}

.space-90 {

  width: 100%;

  height: 90px;

}

.space-100 {

  width: 100%;

  height: 100px;

}

.space-110 {

  width: 100%;

  height: 110px;

}

.space-120 {

  width: 100%;

  height: 120px;

}

.space-130 {

  width: 100%;

  height: 130px;

}

.space-140 {

  width: 100%;

  height: 140px;

}

.space-150 {

  width: 100%;

  height: 150px;

}

.space-55 {

  width: 100%;

  height: 55px;

}

.p-80 {

  padding: 80px;

}

.hight-light-1 {

  background-color: #415755;

}

.hight-light-2 {

  background-color: #878787;

}

.dc-bgdark .drop-cap span {

  background: #415755;

  color: #fff;

}

ul.style-default li, ol.style-default li {

  padding-bottom: 6px;

  padding-top: 6px;

}

ul.style-default li:first-child , ol.style-default li:first-child {

  padding-top: 0;

}

ul.style-default li:last-child, ol.style-default li:last-child {

  padding-bottom: 0;

}

.icon-main.info {

  background: #43BAFF;

}

.icon-main.success {

  background: #4BD48B;

}

.icon-main.warning {

  background: #F9AF3B;

}

.icon-main.danger {

  background: #F5592F;

}

.cta {

  background-image: url('../images/bg1-home1.jpg');

  background-repeat: no-repeat;

  background-size: cover;

  padding: 70px 0 73px 0;

  color: #A9A9A9;

}

.cta-light {

  background-image: url('../images/bg2-home1.jpg');

  background-repeat: no-repeat;

  background-size: cover;

  padding: 70px 0 73px 0;

  color: #000;

}

.pricing-plan .container-custom {

  max-width: 1340px;

}

.pricing-wrap-title {

  background-color: #fff;

}

.error-404 {

  background-image: url('https://via.placeholder.com/1920x950.png');

  height: 100vh;

  padding: 0;

}

.error-logo .the-logo img {

  width: 80px;

}

.coming-soon {

  height: 100vh;

  background-image: url(https://via.placeholder.com/1920x1080.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 0;

  display: flex;

  align-items: center;

}

.cs-logo {

  padding-bottom: 120px;

}

.cs-logo img {

  width: 80px;

}

.cs-content h2 {

  padding-bottom: 50px;

  font-size: 72px;

  line-height: 110px;

}

.cs-countdown {

  padding-bottom: 97px;

}

.cs-stext p {

  font-size: 18px;

  margin-bottom: 33px;

}

.cs-social {

  display: inline-block;

}

.cs-social a {

  font-size: 14px;

  border: 1px solid transparent;

  border-radius: 50%;

  padding: 7px;

  color: #415755;

  text-align: center;

  margin-right: 11px;

}

.cs-social a:hover {

  background-color: #fff;

}

.cs-social a i {

  width: 14px;

  height: 14px;

}

/* Portfolio */

.project-item {

  padding: 15px;

}

.no-gaps .project-item {

  padding: 0px;

}

.projects-grid.p-info-s2 .portfolio-info .portfolio-info-inner {

  background: #415755;

}

.projects-grid.p-info-s2 .portfolio-info .portfolio-info-inner h5 a {

  color: #FFF;

  background-image: linear-gradient(0deg,#FFFFFF,#FFFFFF);

}

.projects-metro {

  margin-left: -15px;

  margin-right: -15px;

}

.projects-metro .project-item.thumb2x .projects-thumbnail img {

  margin-top: calc(-30px/2);

}

.projects-grid.style-4 .projects-thumbnail .overlay {

  cursor: pointer;

}

.projects-grid.img-popup .projects-thumbnail .overlay {

  display: flex;

  align-items: center;

  justify-content: center;

}

.projects-grid.img-popup .projects-thumbnail .overlay h5 {

  display: none;

  margin-bottom: 0;

  color: #fff;

  text-align: center;

}

.projects-grid.style-5 .projects-box .portfolio-info {

  opacity: 1;

  visibility: visible;

  background: rgba(10,10,10,.6);

}

.projects-grid.style-5 .projects-box:hover .portfolio-info {

  opacity: 0;

  visibility: hidden;

}

.p-detail-info h6 {

  color: #415755;

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 20px;

  line-height: 1;

  text-transform: uppercase;

}

.p-detail-info p {

  color: #415755;

  font-weight: 400;

  line-height: 1;

  font-family: "Raleway",Sans-serif;

}

.portfolio-detail-info p:last-child {

  margin-bottom: 0;

}

.portfolio-detail-info {

  background-image: url(https://via.placeholder.com/720x654.png);

  background-repeat: no-repeat;

  background-size: cover;

  padding: 50px 50px 50px 50px;

  margin-top: 10px;

}

.portfolio-detail-info h6 {

  color: #FFF;

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 16px;

  line-height: 1;

  text-transform: uppercase;

}

.portfolio-detail-info p {

  color: #FFF;

  font-weight: 400;

  line-height: 24px;

  margin-bottom: 36px;

  font-family: "Raleway",Sans-serif;

}

.portfolio-detail-info p:last-child {

  margin-bottom: 0;

}

.gallery.s2 {

  margin: 0 -30px -30px 0;

}

.s2 .gallery-item {

  padding: 0 30px 30px 0;

}

.room-area h3 {

  color: #C2C2C2;

  font-family: "Josefin Sans",Sans-serif;

  font-size: 42px;

  font-weight: 300;

  line-height: 1;

  margin-bottom: 13px;

}

.room-area h6 {

  font-size: 18px;

  line-height: 1;

  margin-bottom: 0;

  font-weight: 600;

  text-transform: uppercase;

}

.share-portfolio {

  text-align: right;

  margin-bottom: 40px;

}

.share-portfolio a {

  display: inline-block;

  height: 26px;

  width: 26px;

  text-align: center;

  line-height: 26px;

  font-weight: 500;

  font-size: 12px;

  font-family: "Titillium Web", sans-serif;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  background: transparent;

  color: #415755;

  margin: 0 3px;

  border: 1px solid #E9E9E9;

  transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -ms-transition: all 0.4s ease-in-out;

}

.share-portfolio a:hover {

  background-color: #415755;

  border-color: #415755;

  color: #fff;

  opacity: 0.9;

}

.single-portfolio-navigation {

  margin-bottom: 0;

}

.gallery-columns-3 .gallery-item {

  float: left;

}

.projects-grid.img-popup.popup-is-title .projects-thumbnail .overlay h5 {

  display: block;

}

.projects-grid.img-popup.popup-is-title .projects-thumbnail .overlay i {

  display: none;

}

.projects-grid.style-4.img-popup .projects-thumbnail .overlay {

  background: rgba(0,0,0,.42);

}

.projects-grid {

  margin: calc(-30px/2);

}

/* Index 1 */

.tp-caption-big {

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.666);

  color: transparent; 

  text-transform: uppercase; 

  font-family: 'Titillium Web';

}

.tp-caption-main, .tp-caption {

  font-family: 'Titillium Web';

}

.tp-desc {

  z-index: 10; 

  font-weight: 500; 

  color: #fff;

  font-family: 'Raleway';

  padding-top: 5px;

}

.rev-btn .octf-btn:before, .rev-btn .octf-btn:after {

  display: none;

}

.rev-btn .octf-btn {

  font-size: 13px;

  line-height: 25px;

  padding: 15px 36px;

  border-color: transparent;

}

.nav-home-3.tparrows, .nav-home-5.tparrows {

  width: 70px;

  height: 70px;

  background: #fff;

  transition: 0.3s;

}

.nav-home-3.tparrows:hover, .nav-home-5.tparrows:hover {

  background-color: #fff;

}

.nav-home-3.tparrows:hover:before, .nav-home-5.tparrows:hover:before {

  color: #9f9e9e;

}

.nav-home-3.tparrows:before, .nav-home-5.tparrows:before {

  font-family: Flaticon;

  font-size: 20px;

  color: #415755;

  line-height: 70px;

  transition: 0.3s;

}

.nav-home-3.tparrows.tp-rightarrow:before, .nav-home-5.tparrows.tp-rightarrow:before {

  content: "\f134";

}

.nav-home-3.tparrows.tp-leftarrow:before, .nav-home-5.tparrows.tp-leftarrow:before {

  content: "\f106";

}

.shape-home-3 {

  background-color: rgba(255,255,255,0.8);

}

@media (min-width: 1600px) {

  .nav-home-5.tparrows {

    margin-left: 50px;

  }

}

@media (min-width: 795px) {

  .tp-bullets.hesperiden  {

    display: none;

  }

}

@media (max-width: 794px) {

  .nav-home-3.tparrows {

    display: none;

  }

}

@media (max-width: 992px) {

  .rev-btn .octf-btn {

    font-size: 12px;

    line-height: 23px;

    padding: 11px 27px;

  }

}

@media (max-width: 992px) {

  .rev-btn .octf-btn {

  }

}

.nav-home-1.tparrows{

  width: 90px;

  height: 90px;

  background: transparent;

  transition: 0.3s;

}

.nav-home-1.tparrows:hover{

  background: rgba(255,255,255,0.4);

}

.nav-home-1.tparrows:before{

  font-family: Flaticon;

  font-size: 20px;

  color: #fff;

  line-height: 90px;

}

.nav-home-1.tparrows.tp-rightarrow:before {

  content: "\f134";

}

.nav-home-1.tparrows.tp-leftarrow:before {

  content: "\f106";

}

/* Slider 2 */

.tp-small {

  font-family: "Josefin Sans";

  text-transform: uppercase;

}

.caption-big-2, .tp-caption.title {

  font-family: "Titillium Web";

}

.tp-desc-2 {

  text-transform: uppercase;

  font-family: "Titillium Web";

}

.tp-caption .btn-details {

  color: #fff;

}

.tp-caption .btn-details:before {

  background: #505050;

}

.nav-home-2.tparrows {

  width: 60px;

  height: 60px;

  background: #0f0f0f;

  transition: 0.3s;

}

.nav-home-2.tparrows:hover{

  background: #fff;

}

.nav-home-2.tparrows:hover:before{

  color: #0f0f0f;

}

.nav-home-2.tparrows:before{

  font-family: Flaticon;

  font-size: 15px;

  color: #fff;

  line-height:60px;

}

.nav-home-2.tparrows.tp-rightarrow:before {

  content: "\f134";

}

.nav-home-2.tparrows.tp-leftarrow:before {

  content: "\f106";

}

.rev-btn .octf-btn:hover {

  background-color: #fff;

}

.banner-desc-1 {

  position: absolute;

  left: 0;

  width: 90px;

  max-width: 90px;

  top: 50%;

  z-index: 1;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.banner-desc-1 ul {

  line-height: 90px;

  padding: 0;

  list-style: none;

  margin: 0;

}

.banner-desc-1 ul li {

  margin: 0;

  padding: 0;

  position: relative;

  font-family: "Titillium Web",Sans-serif;

  font-size: 14.02px;

  text-transform: uppercase;

  margin-bottom: 40px;

  writing-mode: vertical-rl;

  letter-spacing: .75px;

  -webkit-transform: rotate(-180deg);

  -ms-transform: rotate(-180deg);

  transform: rotate(-180deg);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: start;

  -ms-flex-align: start;

  align-items: flex-start;

}

.banner-desc-1 ul li:last-child {

  margin-bottom: 0;

}

.banner-desc-1 ul li a {

  width: 100%;

}

.banner-desc-1 ul li span {

  color: #66CC33;

  font-weight: 700;

  font-family: "Raleway",sans-serif;

  font-size: 21px;

}

.banner-desc-1 ul li:hover span {

  color: white;

}

.story-1 {

  background-image: url(../images/bg1-home1.jpg);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  padding-top: 90px;

  padding-bottom: 90px;

}

.story-text {

  color: #FFF;

  font-family: "Titillium Web",Sans-serif;

  font-size: 30px;

  font-weight: 300;

  line-height: 48px;

  text-align: right;

  padding-right: 20px;

}

.story-author {

  padding: 0 0 0 20px;

/*    background-image: url(https://via.placeholder.com/1920x325.png);*/

background-position: 87% 92%;

background-repeat: no-repeat;

}

.story-author img {

  display: inline-block;

  margin-right: 25px;

}

.story-author .story-content {

  display: inline-block;

  padding-top: 20px;

  padding-bottom: 20px;

  vertical-align: middle;

}

.story-author .story-title {

  color: #FFF;

  font-family: "Titillium Web",Sans-serif;

  font-weight: 400;

  margin-bottom: 6px;

}

.story-author .story-description {

  color: #D0CFCF;

  font-family: "Raleway",Sans-serif;

  font-size: 14px;

  margin-bottom: 0;

  text-transform: uppercase;

}

.grid-lines .color-line-default {

  background-color: rgba(0,0,0,.1);

}

.grid-lines .color-line-secondary {

  background-color: rgba(255,255,255,.3)

}

.bg-light-1 {

  background-color: #F4F4F4;

}

.client-1 {

  padding-bottom: 71px;

  padding-top: 71px;

}

.cate-lines.h-light:hover:before, .cate-lines.h-light:hover:after {

  background: #FFF;

}

.cate-lines.h-light:hover h2 {

  color: #FFF;

}

.cate-lines.h-light:hover .number-stroke {

  -webkit-text-stroke-color: #FFF;

}

.cate-lines.s-dark:before, .cate-lines.s-dark:after {

  background: #415755;

}

.cate-lines.s-dark h2 {

  color: #415755;

}

/* Top header */

.top-header {

  background-color: #0A0A0A;

  background-image: url(https://via.placeholder.com/1920x130.png);

  background-position: center center;

  background-repeat: no-repeat;

  padding: 33px 0;

}

.top-info h6 {

  color: #FFF;

  font-size: 16px;

  margin-bottom: 0;

  line-height: 28px;

  font-family: "Raleway",Sans-serif;

  font-weight: 400;

}

.top-info p {

  color: #C4C4C4;

  font-family: "Titillium Web",sans-serif;

  font-weight: 400;

  margin-bottom: 0;

}

.top-logo img{

  height: 65px;

}

.main-header-s2 {

  background-color: #415755;

  position: relative;

}

.main-header-s2.is-stuck {

  position: fixed;

}

.main-header-s2 .octf-sidepanel {

  padding: 34px 0;

  border: none;

}

.main-header-s2 .octf-search {

  margin-right: 0;

}

.main-header-s2 .octf-cart .count {

  background: #FFF;

  color: #000;

}

.side-panel-left {

  right: auto;

  left: 0;

  transform: translateX(-100%);

}

.side-panel.side-panel-left.side-panel-open {

  transform: translateX(0);

}

.bg-dark-theratio {

  background-color: #0A0A0A;

}

/* Index 2 */

.octf-mainbar-row .octf-col.logo-col {

  flex-grow: 0.2;

}

.octf-mainbar-row .octf-col.menu-col {

  -ms-flex-pack: center;

  justify-content: center;

  flex-grow: 0.6;

}

.octf-mainbar-row .octf-col.cta-col {

  flex-grow: 0.2;

}

.max-w-350 {

  max-width: 350px;

}

.benefits-desc-1 h2 {

  color: #fff;

  line-height: 60px;

  margin-bottom: 38px;

}

.icon-box.s-light .icon-main i, .icon-box.s-light .icon-main span {

  color: #FFF;

}

.icon-box.s-light .icon-box h5 {

  color: #FFF;

}

.icon-box.s-light h5 a {

  color: #FFF;

  background-image: linear-gradient(0deg,#FFFFFF,#FFFFFF);

}

.icon-box.s-light p {

  color: #dddddd;

}

.our-portfolio-1 {

  background-image: url(https://via.placeholder.com/1920x1415.png);

  background-repeat: no-repeat;

  background-size: cover;

  padding-top: 105px;

  padding-bottom: 120px;

}

.ot-heading.s-light:before {

  border-color: #FFF;

}

.ot-heading.s-light h2 {

  color: #FFF;

}

.project_filters.s-light li a{

  color: #fff;

}

.project_filters.s-light li a:before {

  background: #505050;

}

.project_filters.s-light li a span {

  color: #FFF;

}

.about-content-2 .ot-heading {

  margin: 0 -22px 0 0;

  padding: 75px 10px 22px 0;

  background-image: url(https://via.placeholder.com/156x142.png);

  background-position: 100% 12%;

  background-repeat: no-repeat;

}

.cta-2 {

  background-image: url(https://via.placeholder.com/1920x1000.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  padding-bottom: 150px;

  padding-top: 150px;

  color: #fff;

}

.cta-2 h2 {

  color: #FFF;

  font-family: "Titillium Web",Sans-serif;

  font-size: 100px;

  font-weight: 200;

  margin-bottom: 15px;

  line-height: 1;

}

.cta-2 p {

  color: #FFF;

  font-size: 20px;

  margin-bottom: 50px;

}



.z-index-1 {

  z-index: 1;

}

.z-index-2 {

  z-index: 2;

}

.s-light .studio-testi-slide-block{

  background-color: #415755;

}

.ot-testimonials.v-dark .ot-testimonials-slider-s1.owl-theme .owl-nav .owl-next, 

.ot-testimonials.v-dark .ot-testimonials-slider-s1.owl-theme .owl-nav .owl-prev, 

.ot-testimonials.v-dark .ot-testimonials-slider-s2.owl-theme .owl-nav .owl-next, 

.ot-testimonials.v-dark .ot-testimonials-slider-s2.owl-theme .owl-nav .owl-prev {

  color: #fff;

  background: #0a0a0a;

}

.ot-testimonials.v-dark .ot-testimonials-slider-s1.owl-theme .owl-nav .owl-next:hover, 

.ot-testimonials.v-dark .ot-testimonials-slider-s1.owl-theme .owl-nav .owl-prev:hover, 

.ot-testimonials.v-dark .ot-testimonials-slider-s2.owl-theme .owl-nav .owl-next:hover, 

.ot-testimonials.v-dark .ot-testimonials-slider-s2.owl-theme .owl-nav .owl-prev:hover {

  color: #919191;

}

.owl-theme .owl-nav [class*='owl-'] {

  font-weight: 700;

}

.v-dark.post-box .post-inner{

  background: #0a0a0a;

  border-color: #292929;

}

.v-dark.post-box:not(.blog-post):hover .post-inner {

  border-color: #fff;

}

.v-dark.post-box .entry-title a {

  color: #fff;

}

.v-dark.post-box .post-inner .the-excerpt {

  color: #dddddd;

}

.v-dark.post-box .entry-meta > span a:hover {

  color: #fff;

}

/* Index 3 */

.header-mobile-s3 {

  background-color: #415755;

}

.main-header-s3 .octf-search {

  margin-right: 30px;

}

.main-header-slight .octf-cart i {

  color: #415755;

}

.main-header-s3 .octf-sidepanel {

  border-color: rgba(0,0,0,.1);

}

.banner-3 {

  background-image: url(https://via.placeholder.com/1648x1142.png);

  background-position: 100% 0;

  background-repeat: no-repeat;

  padding: 90px 0 120px 0;

}

.our-skill-3 {

  background-image: url(https://via.placeholder.com/827x886.png);

  background-position: center left;

  background-repeat: no-repeat;

}

.testi-slide-block-3 {

  padding: 60px;

  background-image: url(https://via.placeholder.com/869x640.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

}

.ot-testimonials .ot-testimonials-slider-s2.s2 .testi-item .ttext {

  padding-right: 0

  ;

  background-color: transparent;

}

.testimonials-slide-2.s2.owl-theme .owl-nav .owl-next, .testimonials-slide-2.s2.owl-theme .owl-nav .owl-prev {

  background-color: transparent;

}

/* Index 4 */

.benefits-desc-classic h2 {

  line-height: 60px;

  margin-bottom: 38px;

}

.title-s2 {

  font-size: 16px;

  font-weight: 600;

  text-transform: uppercase;

  line-height: 30px;

}

.gallery-columns-5 .gallery-item {

  float: left;

}

.services-4 {

  padding-bottom: 50px;

}

.skill-4, .testi-4 {

  background-image: url('https://via.placeholder.com/1920x200.png');

  background-position: center center;

}

.skill-content-4 {

  max-width: 530px;

  position: relative;

  vertical-align: middle;

  margin: 0 auto;

}

.skill-content-4 p {

  margin-bottom: 33px;

}

.testi-slide-block-4 {

  max-width: 500px;

  margin: 0 auto;

}

.banner-4 {

  background-image: url(https://via.placeholder.com/1920x808.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 180px 0 270px 0;

}

.banner-4 h2 {

  font-family: "Titillium Web",Sans-serif;

  font-size: 72px;

  font-weight: 300;

  line-height: 80px;

  margin-bottom: 40px;

}

.video-popup.s-dark .btn-play {

  color: #FFF;

  background: #415755;

}

.video-popup.s-dark .btn-play:before {

  background: #415755;

}

.banner-desc-4 {

  position: absolute;

  left: -63%;

  width: auto;

  top: 62%;

}

.banner-desc-4 p {

  position: relative;

  display: block;

  color: #415755;

  font-family: "Titillium Web",sans-serif;

  font-size: 14.02px;

  line-height: 18.03px;

  text-transform: uppercase;

  letter-spacing: .75px;

  -webkit-transform: rotate(270deg);

  -ms-transform: rotate(270deg);

  transform: rotate(270deg);

  margin-bottom: 0;

}

.banner-desc-4 p:after {

  position: absolute;

  content: "";

  height: 1px;

  width: 90px;

  left: calc(100% + 12px);

  top: 50%;

  background: #415755;

  animation: MoveUpRight 1.5s linear infinite;

}

.feature-4 {

  background-image: url(https://via.placeholder.com/1145x160.png);

  background-repeat: no-repeat;

  margin-top: -160px;

  padding: 40px 0 39px 0;

}

.feature-wrap {

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  margin-right: -15px;

  margin-left: -15px;

}

.feature-wrap .feature-item {

  -ms-flex: 0 0 21%;

  flex: 0 0 21%;

  max-width: 21%;

  padding-left: 15px;

  padding-right: 15px;

  position: relative;

}

.feature-item h6 {

  color: #989898;

  font-size: 18px;

  font-weight: 600;

  font-family: "Titillium Web",sans-serif;

  line-height: 21px;

  position: relative;

  padding-left: 80px;

  margin-bottom: 0;

}

.feature-item h6:before {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  height: 1px;

  width: 70px;

  background-color: #989898;

}

.feature-item p {

  color: #fff;

  margin-bottom: 0;

}

.header-topbar {

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

.topbar-socials.list-social a {

  border-color: transparent;

  color: rgb(26, 26, 26);

  padding: 10px;

  margin-right: 0;

}

.topbar-socials.list-social a i:before {

  font-size: 14px;

}

.topbar-socials.list-social a:hover {

  background-color: rgb(242, 242, 242);

}

.topbar-info {

  list-style: none;

}

.topbar-info li {

  padding-right: 25px;

  padding-left: 25px;

  line-height: 50px;

  font-weight: 500;

  font-size: 14px;

  color: rgb(26, 26, 26);

  border-right: 1px solid rgba(0, 0, 0, 0.1);

}

.topbar-info li i {

  padding-right: 9px;

}

.topbar-info li:last-child {

  padding-right: 0;

  border-right: none;

}

.topbar-info li i:before {

  font-size: 17px;

}

.logo-size-small {

  width: 150px;

  height: 91px;

}

.main-header-slight {

  position: relative;

}

.main-header-slight.is-stuck {

  position: fixed;background-color: #fff;

}

@media screen and (min-width: 1024px){

  .main-header-slight.is-stuck .main-navigation ul.menu > li > a {

    color: #66CC33;

  }

}

.main-header-slight .panel-btn i {

  color: #66CC33;

}

.main-header-slight.header-4 .octf-sidepanel {

  padding-right: 0;

  padding-left: 30px;

}

.main-header-slight .octf-cta-header .toggle_search i {

  color: rgb(26, 26, 26);

}

.main-header-slight .main-navigation > ul > li > a {

  color: rgb(26, 26, 26);

  font-weight: 600;

}

.main-header-slight.header-4 .octf-search {

  margin-right: 0;

}

.main-header-slight .cta-col {

  width: 13%;

  flex-grow: 0.21;

}

.main-header-slight .main-navigation > ul > li.menu-item-has-children > a:after {

  color: rgb(26, 26, 26);

}

.main-header-slight .main-navigation > ul > li > a:before {

  background-color: rgb(26, 26, 26);

}

.header_mobile_slight .mmenu-toggle button, .header_mobile_slight .octf-cta-header .toggle_search i {

  color: rgb(26, 26, 26);

}

/* Index 5 */

.rev_slider .tp-caption img, .tp-simpleresponsive .tp-caption img {

  max-width: 100% !important;

  max-height: inherit;

}

.rev_slider_wrapper {
  background-color: rgb(26, 26, 26);
}

.tp-loader.spinner3 .bounce1,
.tp-loader.spinner3 .bounce2,
.tp-loader.spinner3 .bounce3 {
    background-color: #66CC33 !important; /* Your desired color */
    box-shadow: 0px 0px 20px 0px rgba(126, 74, 155, 0.45); /* Optional: add a glow effect */
}

.main-header-5 .octf-mainbar-row .menu-col{

  flex-grow: 0.685;

  -ms-flex-pack: flex-end;

  justify-content: flex-end;

}

.main-header-5 .octf-mainbar-row .cta-col{

  flex-grow: 0.115;

}

.client-area-5 {

  padding: 70px 80px 70px 80px;

  background-image: url(https://via.placeholder.com/1920x200.png);

  background-position: center center;

}

.process-area-5 {

  background-image: url(https://via.placeholder.com/1510x510.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 120px 0 80px 0;

}

.counter-area-5 {

  background-image: url(https://via.placeholder.com/1920x200.png);

  background-position: center center;

  padding: 66px 0 57px 0;

}

.testimonials-5 {

  padding-bottom: 85px;

}

.cta-bg-img {

  background-image: url(https://via.placeholder.com/1920x1281.png);

  background-position: center center;

  background-repeat: no-repeat;

  padding: 150px 0;

}

.cta-bg-img h2 {

  font-family: "Titillium Web",Sans-serif;

  font-size: 100px;

  font-weight: 200;

  line-height: 1;

}

.cta-bg-img p {

  color: #FFF;

  font-size: 20px;

}

.overlay-dark {

  background-color: #415755;

  opacity: .5;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  position: absolute;

}

/* TP CAPTION MAIN SLIDER REVOLUTION STUFF*/

.tp-caption.tp-resizeme.tp-caption-main {
  color: #FFFFFF;

  /* Text shadow for depth and visibility */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 255, 255, 0.4),
    0 0 20px rgba(255, 255, 255, 0.2);

  /* Add a subtle outline */
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2);

  /* Add a subtle blur on hover for interactive effect */
  transition: filter 0.3s ease;

}

/* For dark backgrounds, adjust the shadow */
@media (prefers-color-scheme: dark) {
  .tp-caption.tp-resizeme.tp-caption-main {
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.7),
      0 0 12px rgba(255, 255, 255, 0.3);
  }
}

/* For light backgrounds, adjust the shadow and add contrast */
@media (prefers-color-scheme: light) {
  .tp-caption.tp-resizeme.tp-caption-main {
    color: #FFFFFF;
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 8px rgba(0, 0, 0, 0.6),
      0 0 12px rgba(0, 100, 255, 0.4);
    -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.4);
  }
}

.tp-caption.tp-resizeme.tp-desc {
  color: #FFFFFF;

  /* Text shadow for depth and visibility */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 255, 255, 0.4),
    0 0 20px rgba(255, 255, 255, 0.2);

  /* Add a subtle outline */
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2);

  /* Add a subtle blur on hover for interactive effect */
  transition: filter 0.3s ease;
}

/* For dark backgrounds, adjust the shadow */
@media (prefers-color-scheme: dark) {
  .tp-caption.tp-resizeme.tp-desc {
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.7),
      0 0 12px rgba(255, 255, 255, 0.3);
  }
}

/* For light backgrounds, adjust the shadow and add contrast */
@media (prefers-color-scheme: light) {
  .tp-caption.tp-resizeme.tp-desc {
    color: #FFFFFF;
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 8px rgba(0, 0, 0, 0.6),
      0 0 12px rgba(0, 100, 255, 0.4);
    -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.4);
  }
}

/* END TP CAPTION REVOLUTION SLIDER STUFF*/


/* Index 6 */

.full-height {

  height: 100vh;

}

.de-video-content h1 {

  color: #FFF;

  font-size: 60px;

  margin-bottom: 40px;

  line-height: 1;

  font-weight: 200;

  text-transform: uppercase;

  font-family: "Titillium Web",sans-serif;

}

.de-video-content .octf-btn {

  background-color: transparent;

  border: 2px solid #fff;

  padding: 15px 30px;

  line-height: 1;

  font-family: "Titillium Web",Sans-serif;

  font-size: 13px;

  font-weight: 600;

}

.de-video-content .octf-btn:before, .de-video-content .octf-btn:after {

  display: none;

}

.de-video-content .octf-btn:hover, .de-video-content .octf-btn:focus {

  background-color: #fff;

  color: #415755;

}

.de-video-overlay {

  position: absolute;

  width: 100%;

  min-height: 100%;

  background-color: #415755;

  opacity: .5;

  top: 0;

  left: 0;

}

.tp-bannertimer {

  display: none;

}

.image-gallery .gallery-icon.landscape .overlay {

  display: none;

}

/* Side Nav */

.side-nav-logo {

  position: absolute;

  top: 0;

}

.side-nav-logo img {

  width: 80px;

}

.site-header-vertical .side-nav {

  height: 100vh;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

.list-social li:last-child a {

  margin-right: 0;

}

.vertical-main-navigation>ul>li.current-menu-item>a, .vertical-main-navigation>ul>li>a:hover {

  background-size: 100% 2px;

}

@media only screen and (min-width: 1025px){

  .vertical-main-navigation ul>li>a {

    text-decoration: none;

    text-align: center;

    text-transform: uppercase;

    display: inline-block;

    outline: none;

    color: #fff;

    line-height: 48px;

    white-space: nowrap;

    overflow: hidden;

    -webkit-transition: all 0.2s ease-out 0s;

    -moz-transition: all 0.2s ease-out 0s;

    -o-transition: all 0.2s ease-out 0s;

    transition: all 0.2s ease-out 0s;

  }

  .vertical-main-navigation>ul>li>a {

    background-size: 0 2px;

    background-position: 0 70%;

    background-repeat: no-repeat;

    background-image: linear-gradient(0deg,#7e7e7e,#f5f5f5);

  }

  .vertical-main-navigation ul {

    text-align: center;

  }

}

.side-nav .sidenav-col {

  -ms-flex: 0 0 100%;

  flex: 0 0 100%;

  max-width: 100%;

  width: 100%;

}

.side-nav-cta {

  position: absolute;

  bottom: 50px;

}

.side-nav-social li a {

  border-color: rgba(255, 255, 255, 0.4);

  padding: 6px;

}

.side-nav-social i:before {

  font-size: 14px;

}

.ot-accordions.s-dark .acc-item{

  background-color: transparent;

} 

.ot-accordions.s-dark .acc-item .acc-toggle {

  color: #fff;

}

.ot-accordions.s-dark .acc-item .acc-toggle i {

  color: #dddddd;

}

.circle-side {

  background-image: url(https://via.placeholder.com/1920x865.png);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

}

.benefit-side-block {

  width: 53.2%;

}

.benefit-side-img-block {

  width: 46.715%;

}

.benefit-side-desc {

  background-color: #415755;

  margin-top: 55px;

  padding: 60px 70px 70px 70px;

  position: relative;

  z-index: 1;

}

.benefit-side-desc .ot-heading {

  margin-bottom: 32px;

}

.benefit-side-img {

  margin-left: -78px;

}

.testi-side-title .container {

  max-width: 1350px;

}

.testi-heading-side {

  padding: 110px 0px 48px 0px;

  background-color: #0A0A0A;

}

.ot-testimonials.s-dark .testi-item .ttext {

  background-color: transparent;

}

.ot-testimonials.s-dark .layer-behind {

  background-color: transparent;

}

.ot-testimonials.s-dark .testi-item .ttext:before {

  position: absolute;

  font-family: "Titillium Web", sans-serif;

  font-size: 200px;

  color: #fff;

  top: 23px;

  left: 29px;

  content: "“";

  width: 80px;

  height: 45px;

  z-index: 1;

  background: none;

}

.ot-testimonials.s-dark .testi-item .ttext {

  color: #fff;

  background: #0a0a0a;

  border-color: #292929;

}

.ot-testimonials.s-dark .testi-item .ttext .layer-behind {

  background: #415755;

}

.ot-testimonials.s-dark .testi-item .ttext > span {

  background: #0a0a0a;

}

.s-dark .owl-theme .owl-dots .owl-dot span {

  background-color: #fff;

}

.s-dark .owl-theme .owl-dots .owl-dot.active span, .s-dark .owl-theme .owl-dots .owl-dot:hover span {

  background-color: #fff;

}

.s-dark .owl-theme .owl-dots .owl-dot.active {

  border-color: #fff;

}

.header-vertical .site-footer {

  background-color: rgba(0, 0, 0, 0.8);

  padding-top: 60px;

  padding-bottom: 60px;

}

.header-vertical .footer-bottom {

  background-color: rgba(0, 0, 0, 0.8);

  border-top:1px solid #313131;

  padding: 20px 0px 20px 0px;

}

.elementor-3238 .elementor-element.elementor-element-79d1a4f {

  color: #dddddd;

  font-size: 14px;

}

.footer-side-nav p {

  color: #dddddd;

  font-size: 14px;

}

.footer-side-nav .footer-list-item .list-item-text {

  font-family: "Raleway", Sans-serif;

  font-size: 14px;

  line-height: 18px;

  padding-left: 10px;

}

.footer-bottom-nav p{

  color: #7D7D7D;

  font-size: 14px;

}

.vegas-timer {

  display: none;

}

.hero-content {

  position: relative;

}

.hero-content .hero-logo {

  padding-bottom: 30px;

  width: 95px;

  height: 90px;

}

.hero-content h2 {

  color: #FFFFFF;

  font-family: "Titillium Web", Sans-serif;

  font-size: 90px;

  font-weight: 200;

  line-height: 100px;

  margin-bottom: 43px;

}

.btn-scroll {

  position: absolute;

  width: 100%;

  text-align: center;

  font-family: "Titillium Web", Sans-serif;

  font-size: 13px;

  font-weight: 600;

  text-transform: uppercase;

  line-height: 72px;

  letter-spacing: 0.5px;

  bottom: 30px;

  left: 0;

}

.hero-desc {

  left: -75px;

  width: auto;

  bottom: 42%;

  position: absolute;

}

.hero-desc p {

  position: relative;

  display: block;

  color: #fff;

  font-family: "Titillium Web", sans-serif;

  font-size: 14.02px;

  line-height: 18.03px;

  text-transform: uppercase;

  letter-spacing: 0.75px;

  margin-bottom: 0;

  -webkit-transform: rotate(270deg);

  -ms-transform: rotate(270deg);

  transform: rotate(270deg);

}

.hero-desc p:after {

  position: absolute;

  content: "";

  height: 1px;

  width: 90px;

  left: calc( 100% + 12px);

  top: 50%;

  background: #fff;

  animation: MoveUpRight 1.5s linear infinite;

}

.site-header-onepage .site-logo {

  padding-top: 20px;

  padding-bottom: 20px;

}

.site-header-onepage .octf-main-header {

  border: none;

}

#site-logo .logo-onepage {

  height: 50px;

}

.site-header-onepage .mobile_logo {

  padding-top: 15px;

  padding-bottom: 15px;

}

.site-header-onepage .mobile_logo img {

  height: 46px;

}

.site-header-onepage .octf-mainbar-row .octf-col.menu-col {

  flex-grow: 0.8;

}

.lg-outer, .lg-backdrop {

  z-index: 9999;

}

.bullet-home-7 .tp-bullet {

  position: relative;

  display: inline-block;

  width: 30px;

  height: 30px;

  margin: -5px !important;

  left: 0 !important;

  opacity: 1;

  background: 0;

  border: 1px solid;

  border-color: transparent;

  outline: none;

  border-radius: 50%;

  transition: all 0.3s linear;

}

.bullet-home-7 .tp-bullet:before {

  position: absolute;

  content: '';

  top: 50%;

  left: 50%;

  width: 4px;

  height: 4px;

  background: #fff;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  transition: all 0.3s linear;

}

.bullet-home-7 .tp-bullet.selected, .bullet-home-7 .tp-bullet:hover {

  border-color: #fff;

  background: transparent;

}





@media (max-width: 1024px){

  .cta-2 h2 {

    font-size: 85px;

  }

}

@media (min-width: 567px){

  .clients-process .container-fluid {

    padding-left: 80px;

    padding-right: 80px;

  }

}

@media (min-width: 767px){

  .mb-md-70 {

    margin-bottom: 70px;

  }

  .team-block-wrap .team-item {

    width: 50%;

  }

  .section-team-list {

    padding: 105px 0 112px 0;

  }

  .about-team {

    padding: 105px 0 86px 0;

  }

  .how-it-works {

    padding-top: 0px;

    padding-bottom: 98px;

  }

  .our-benefits {

    padding-top: 120px;

    padding-bottom: 115px;

  }

  .services-benefits {

    padding-top: 115px;

    padding-bottom: 115px;

    background: url('../images/bg1-aboutus.jpg');

  }

  .skill-process {

    padding-top: 120px;

    padding-bottom: 90px;

  }

  .process-news {

    padding: 105px 0 120px 0;

  }

  .our-studio {

    padding-top: 120px;

  }

  .clients-process {

    padding-bottom: 100px;

  }

  .studio-counter {

    padding-top: 70px;

    padding-bottom: 105px;

  }

  .services-studio {

    padding: 120px 0;

  }

  .progress-studio {

    padding-bottom: 100px;

  }

  .portfolio-studio {

    padding-bottom: 120px;

  }

  .portfoli-studio {

    padding-top: 0;

    padding-bottom: 100px;

  }

  .elements {

    padding-top: 85px;

  }

  .faq {

    padding-bottom: 90px;

  }

  .p-md-80 {

    padding: 80px;

  }

}

@media (min-width: 992px){

  .contact-page {

    padding: 0;

    margin-top: -40px;

  }

}

@media (min-width: 1025px){

  .about-team, .section-team-list, .cta-2, .cta-bg-img {

    background-attachment: fixed;

  }

}

@media (min-width: 1200px){

  .pricing-wrap-title {

    padding-top: 110px;

    padding-bottom: 48px;

  }

  .pricing-plan {

    margin-top: -271px;

    padding-bottom: 0;

  }

  .main-principes {

    max-width: 600px;

  }

  .feature-content {

    margin-left: 70px;

  }

  .about-img {

    margin-left: -55px;

  }

  .about-img {
    box-shadow: inset 0px 0px 10px 0px #000;
    padding: 10px;
    border-radius: 13px;
  }
  .about-img img {
    border-radius: 10px;
  }

  .about-detail {

    margin-left: 70px;

  }
  .service_left_img img {
    padding: 50px;
    background-image: linear-gradient(90deg, black 50%, transparent 50%);
  }
  .service_right_img img {
    padding: 50px;
    background-image: linear-gradient(90deg, transparent 50%, black 50%);
  }

  .work-img {

    margin-left: 50px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

  }
  .work-img img{
    border-radius: 10px;
  }

  .skill-img {

    margin: 0 -205px 0 0;

    padding-left: 30px;

  }

  .skill-content {

    margin-right: 70px;

  }

  .team-clients .container-fluid, .clients-skill .container-fluid {

    padding: 0 140px;

  }

  .team-block-wrap .team-item {

    width: 20%;

  }

  .team-member-info {

    padding: 0 15px 80px 170px;

  }

  .process-classic.sleft {

    margin-left: 30px;

    margin-bottom: 56px;

  }

  .process-classic.sright {

    margin-right: 30px;

    margin-bottom: 56px;

  }

  .skill-process-detail {

    margin-left: 70px;

  }

  .skill-process-img {

    margin-left: -172px;

  }

  .studio-img {

    margin-right: -325px;

  }

  .services-studio-img {

    margin: 0 -15px 0 -132px;

  }

  .services-studio-detail {

    margin-left: 70px;

  }

  .our-studio-detail {

    margin-top: 270px;

  }

  .clients-process .container-fluid {

    padding-left: 140px;

    padding-right: 140px;

  }

  .portfoli-studio .container-fluid {

    padding-left: 100px;

    padding-right: 100px;

  }

  .studio-testi-slide {

    width: 54.959%;

    position: relative;

  }

  .studio-testi-img {

    width: 45%;

  }

  .studio-testi-img-block {

    margin: 0 -40px 0 -75px;

  }

  .studio-testi-slide-block {

    margin-left: -45px;

    margin-right: 45px;

    margin-top: 58px;

    padding-top: 82px;

    padding-left: 87px;

    background-color: #F4F4F4;

  }

  .our-portfolio {

    padding-top: 80px;

  }

  .our-portfolio-slide {

    padding-top: 80px;

    padding-bottom: 80px;

  }

  .about-img-1 {
    margin: 0 50px 0 0px;
    box-shadow: inset 0px 0px 10px 0px #000;
    padding: 10px;
    border-radius: 13px;
  }
  .about-img-1 img {
    border-radius: 10px;
  }

  .client-1 .container-fluid {

    padding-right: 140px;

    padding-left: 140px;

  }

  .skill-img-1 {

    margin: 0 -320px 0 0;

    padding: 0 0 0 30px;

  }

  .team-1 {

    padding-bottom: 86px;

  }

  .about-img-2 {

    margin: 0 0 0 -375px

  }

  .testi-2 {

    padding-bottom: 120px;

    padding-top: 120px;

  }

  .about-img-3 {

    margin: 0 0 0 -132px;

  }

  .our-skill-3 {

    padding-top: 90px;

    padding-bottom: 0;

  }

  .skill-img-5 {

    margin-left: -170px;

  }

  .about-img-5 {

    margin: 0 -245px 0 0;

  }

  .about-side {

    padding-top: 150px;

  }

  .portfolio-side {

    padding-top: 40px;

  }

  .benefit-side {

    padding-top: 120px;

    padding-bottom: 120px;

  }

  .testi-side-title {

    margin-top: -272px;

  }

  .about-side-img {

    margin: 0px 0px 0px -50px;

    padding: 0px 50px 0px 0px;

  }

  .contact-right {

    margin-right: 60px;

  }

  .ml-xl-35 {

    margin-left: 35px;

  }

  .mr-xl-70 {

    margin-right: 35px;

  }

  .ml-xl-70 {

    margin-left: 70px;

  }

  .mr-xl-70 {

    margin-right: 70px;

  }

  .mt-xl--40 {

    margin-top: -40px;

  }

  .mt-xl-40 {

    margin-top: 40px;

  }

  .p-xl-80 {

    padding: 80px;

  }

  .px-xl-90 {

    padding-left: 90px !important;

    padding-right: 90px !important;

  }

  .pl-xl-7 {

    padding-left: 7px;

  }

}

@media (min-width: 1600px){

  .mr-xxl {

    margin-right: 234px;

  }

  .testi-slide-block-3 {

    margin-top: 70px; 

    padding: 110px 246px 110px 117px;

  }

}

@media (max-width: 1400px){

  .benefit-side-block, .benefit-side-img-block {

    width: 100%;

  }

  .benefit-side-img-block {

    margin-left: 0;

  }

  .skill-content-4, .testi-slide-block-4 {

    padding: 60px;

    max-width: 100%;

  }

  .skill-img-4 img, .testi-img-3 img {

    height: 100%;

  }

}

@media (max-width: 1200px){

  .skill-img-4, .testi-img-3 {

    padding: 60px;

    padding-top: 0;

  }

  .skill-img-4 img, .testi-img-3 img {

    height: auto;

  }

  .main-principes {

    padding: 0 30px;

  }

  .main-principes {

    padding-top: 40px;

    padding-bottom: 40px;

  }

  .team-member-img {

    margin-right: 0;

    padding-top: 0;

  }

  .team-member-info h2 {

    padding-top: 0;

  }

  .gallery-columns-5 .gallery-item {

    max-width: 50%;

  }

}

@media (max-width: 992px){

  .feature-4 {

    background-size: cover;

  }

  .feature-wrap .feature-item{

    -ms-flex: 0 0 33.33333%;

    flex: 0 0 33.33333%;

    max-width: 33.33333%;

  }

  .gallery-columns-5 .gallery-item {

    max-width: 50%;

  }

  .story-text {

    text-align: center;

  }

  .story-author {

    text-align: center;

  }

/*  ADDED THIS BECAUSE THE PICTURES ON SINGLE SERVICE WRAP AT 992 WIDTH*/
  .second-service-image {

    margin-top: 85px;

  }

}

@media (max-width: 767px){

  .cta-bg-img h2 {

    font-size: 60px;

  }

  .banner-desc-1 {

    display: none;

  }

  .gallery-columns-5 .gallery-item {

    max-width: 50%;

  }

  .skill-content-4, .testi-slide-block-4, .skill-img-4, .testi-img-3 {

    padding: 0;

  }

  .benefits-desc-classic h2 {

    line-height: 30px;

    margin-bottom: 0;

  }

  .hero-content h2 {

    font-size: 38px;

    line-height: 50px;

  }

  .banner-3 {

    padding: 76px 0 0 0;

  }

  #home-news {

    padding-top: 55px;

    padding-bottom: 80px;

  }



  .icon-box.s2 {

    margin-bottom: 30px !important;

  }

  .last .icon-box.s2 {

    margin-bottom: 0 !important;

  }

  .tabs-light .tab-link {

    min-width: 100%;

  }

  .octf-btn {

    padding: 12px 20px;

  }

  .clients-process {

    padding-bottom: 60px;

  }

  .studio-testi-slide-block {

    padding-left: 40px;

  }

  .ot-testimonials .ot-testimonials-slider-s2 .testi-item .ttext {

    padding-right: 40px;

  }

  .studio-testi-slide {

    padding-left: 15px;

    padding-right: 15px;

  }

  .studio-testi-img {

    padding-left: 15px;

    padding-right: 15px;

  }

  .benefits-desc-1 h2 {

    color: #fff;

    line-height: 48px;

    margin-bottom: 8px;

  }

  .testi-slide-block-3 {

    padding: 30px;

  }

  .banner-4 h2 {

    font-size: 36px;

    line-height: 48px;

  }

  .feature-wrap .feature-item{

    -ms-flex: 0 0 50%;

    flex: 0 0 50%;

    max-width: 50%;

  }

  .benefits-sidebar .ot-heading {

    padding-bottom: 20px;

  }

  .benefits-sidebar .ot-heading h2 {

    line-height: 38px;

  }

  /*  ADDED HERE FOR MOBILE SIZE CHANGES TO BACKGROUND IMAGES*/
  .services-benefits p{
        color: #000000;
  }
}

@media (max-width: 480px) {

  .feature-wrap .feature-item {

    -ms-flex: 0 0 50%;

    flex: 0 0 50%;

    max-width: 50%;

  }

  .feature-item h6 {

    padding: 0;

  }

  .feature-item h6:before {

    display: none;

  }

}



@media (min-width: 1025px) and (max-width: 1400px) {

  .main-navigation ul li ul.mega-sub-menu {

    padding-left: 15px;

    padding-right: 15px;

  }

}

/* Services Detail */

.services-single {

  padding-top: 90px;

  padding-bottom: 80px;

}

.services-detail-content .ot-heading {

  padding-bottom: 18px;

}

.services-detail-content .ot-heading h2 {

  line-height: 60px;

}

.services-detail-content .simple-slide {

  padding-top: 20px;

  padding-bottom: 42px;

}

.services-detail-content .detail-img {

  padding-top: 20px;

  margin-bottom: 80px;

}

.services-detail-content .circle-progress {

  padding-bottom: 8px;

}

.services-detail-content .service-testi {

  padding-top: 60px;

  margin-bottom: 60px;

}

.services-detail-content .ot-heading.is-dots {

  padding-bottom: 30px;

}

.owl-theme .owl-nav.disabled + .owl-dots {

  margin-top: 60px;

  margin-bottom: 30px;

}

.owl-theme .owl-dots .owl-dot {

  position: relative;

  background-color: transparent;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  margin: 0;

  padding: 0;

  width: 30px;

  height: 30px;

  line-height: 30px;

  border: 1px solid transparent;

  display: inline-block;

  line-height: 30px;

  text-align: center;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.owl-theme .owl-dots .owl-dot span {

  width: 4px;

  height: 4px;

  margin: 0;

  background: #415755;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

}

.owl-theme .owl-dots .owl-dot.active {

  border: 1px solid #415755;

}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {

  background-color: #415755;

}

.owl-theme .owl-dots .owl-dot:focus {

  outline: none;

}

@media (max-width: 992px){ 

  .services-single .widget_nav_menu {

    padding-bottom: 40px;

  }

  .owl-theme .owl-nav.disabled + .owl-dots {

    margin-bottom: 0;

    margin-top: 30px;

  }

}

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

# Footer

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

/* Subscribe Email */

.mc4wp-form-fields .subscribe-inner-form {

  position: relative;

}

.mc4wp-form-fields .subscribe-inner-form input[type=email] {

  height: 46px;

  width: 100%;

  background: transparent;

  color: #b1b0b0;

  border-color: rgba(255, 255, 255, 0.1);

  padding-right: 56px;

}

.mc4wp-form-fields .subscribe-inner-form input[type=email]::placeholder {

  color: #b1b0b0;

}

.mc4wp-form-fields .subscribe-inner-form .subscribe-btn-icon {

  background: transparent;

  border: none;

  outline: none;

  display: block;

  position: absolute;

  right: 0;

  top: 0;

  width: 46px;

  height: 100%;

  line-height: 44px;

  text-align: center;

  color: #fff;

  transition: all 0.3s linear;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

}

.mc4wp-form-fields .subscribe-inner-form .subscribe-btn-icon i {

  display: inline-block;

  vertical-align: middle;

  line-height: 1;

}

.mc4wp-form-fields .subscribe-inner-form .subscribe-btn-icon i:before {

  font-size: 16px;

}



/* Back To Top*/

#back-to-top {

  background: #9f9e9e;

  color: #fff;

  border: 0 none;

  cursor: pointer;

  width: 42px;

  height: 45px;

  line-height: 45px;

  opacity: 0;

  visibility: hidden;

  outline: medium none;

  position: fixed;

  right: 40px;

  bottom: -20px;

  text-align: center;

  text-decoration: none;

  transition: opacity 0.2s ease-out 0s;

  z-index: 1000;

  transition: all 0.5s ease-in-out;

  -webkit-transition: all 0.5s ease-in-out;

  -moz-transition: all 0.5s ease-in-out;

  -o-transition: all 0.5s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

}

#back-to-top.show {

  opacity: 1;

  visibility: visible;

  bottom: 40px;

}

#back-to-top i {

  display: block;

  -webkit-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  transform: rotate(90deg);

}

#back-to-top i:before {

  font-size: 17px;

}



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

## 404

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

.error-404 {

  position: relative;

  height: 100vh;

  display: flex;

  align-items: center;

  color: #fff;

  background: url(https://via.placeholder.com/1920x950.png) center center no-repeat;

  background-size: cover;

}

.error-404 .error-logo {

  position: fixed;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 80px;

}

.error-404 h1 {

  font-size: 180px;

  line-height: 1;

  font-weight: 200;

  color: #fff;

}

.error-404 h2 {

  font-size: 42px;

  line-height: 1;

  margin-bottom: 30px;

  color: #fff;

}

.error-404 .page-content {

  font-size: 18px;

  max-width: 455px;

  margin: auto;

}

.error-404 .page-content h1 {

  font-size: 180px;

  font-weight: 200;

}

.error-404 .page-content p {

  margin-bottom: 30px;

}

.error-404 .page-content form {

  margin: 10px 15px 30px 0;

  padding-top: 10px;

}

.error-404 .page-content form .search-field {

  background: transparent;

  color: #fff;

}

.error-404 .page-content form .search-field::placeholder {

  color: #fff;

}

.error-404 .page-content form button {

  color: #fff;

}

.error-404 .white-btn {

  display: inline-block;

  margin-top: 30px;

  padding: 13px 33px;

  background: #fff;

  color: #415755;

  font-size: 13px;

  font-family: "Titillium Web", sans-serif;

  font-weight: 600;

  text-transform: uppercase;

}

.error-404 .white-btn:hover {

  background: #415755;

  color: #fff;

}

/* Custom HTML */

@media (min-width: 1230px){

  .container {

    max-width: 1200px;

  }

  .container-big {

    max-width: 1540px;

  }

  .container-slider-5 {

    max-width: 1640px;

  }

  .container-large {

    max-width: 100%;

    padding-left: 100px;

    padding-right: 100px;

  }

}

.no-padding {

  padding: 0 !important;

}

/* Custom Css Header HTML */

.octf-btn-cta {

  display: inline-flex;

  vertical-align: middle;

  position: relative;

}

.octf-cart {

  margin-right: 30px;

}

.octf-search {

  margin-right: 65px;

}

.octf-sidepanel {

  padding: 0 34px 0 33px;

  border-style: solid;

  border-width: 0 0 0 1px;

  border-color: rgba(255,255,255,.2);

}

.side-panel-block .gallery {

  padding-bottom: 30px;

}

.side-panel-wrap {

  padding-left: 35px;

  padding-right: 18px;

}

.side-panel-cinfo .panel-cinfo {

  list-style: none;

  padding-left: 0;

  margin-bottom: 3px;

}

.panel-cinfo li {

  color: #fff;

  padding-bottom: 14px;

  padding-top: 14px;

  line-height: 1;

}
.panel-cinfo li i {

  color: #66CC33;

}

.panel-cinfo li:first-child {

  padding-top: 0;

}

.panel-cinfo li:last-child {

  padding-bottom: 0;

}

.panel-cinfo li .panel-list-text {

  padding-left: 14px;

}

.panel-list-icon i:before {

  font-size: 18px;

}

.side-panel-social ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

.side-panel-social li {

  display: inline-block;

}

.side-panel-social a {

  background-color: #415755;

  font-size: 14px;

  border: 1px solid #66CC33;

  border-radius: 50%;

  padding: 7px;

  color: #66CC33;

  text-align: center;

  margin-right: 11px;

}

.side-panel-social a:hover {

  background-color: #66CC33;

  border-color: #66CC33;

  color: #fff;
}

.side-panel-social a i {

  width: 14px;

  height: 14px;

}

.pb-50 {

  padding-bottom: 50px;

}

/* Blog */

.audio-box iframe {

  border: none;

}

.owl-theme .owl-nav {

  margin-top: 0;

}

.owl-theme .owl-nav [class*='owl-'] {

  color: #415755;

  background-color: #fff;

  border-radius: 0;

  border: none;

  margin: 0;

  width: 60px;

  height: 60px;

}

.owl-theme .owl-nav [class*='owl-']:focus {

  outline: none;

  border: none;

}

.owl-theme .owl-nav [class*='owl-']:hover {

  color: #9f9e9e;

  background-color: #fff;

}

.owl-nav i:before {

  font-size: 18px;

}

.owl-theme .owl-nav .owl-prev, .owl-theme .owl-nav .owl-next {

  position: absolute;

  top: 50%;

  left: 0;

  -webkit-transition: all 0.3s linear;

  -moz-transition: all 0.3s linear;

  -o-transition: all 0.3s linear;

  -ms-transition: all 0.3s linear;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.owl-theme .owl-nav .owl-next {

  left: auto;

  right: 0;

}

/* Footer */

.site-footer {

  padding-top: 100px;

  padding-bottom: 100px;

  background-color: #415755;

  color: #dddddd;

}

.widget-footer ul {

  margin: 0;

  padding-left: 0;

  list-style: none;

}

.widget-footer a {

  color: #dddddd;

  font-family: "Raleway",Sans-serif;

}

.widget-footer li {

  padding-bottom: 14px;

}

.widget-footer li:last-child {

  padding-bottom: 0;

}

.widget-footer .footer-social li {

  padding-bottom: 0;

}

.widget-footer a:hover {

  color: #fff;

}

.footer-logo {

  max-width: 230px;

  padding-bottom: 6px;

}

.footer-social {

  padding-top: 9px;

  padding-bottom: 2px;

}

.footer-social ul, .list-social ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

.footer-social li, .list-social li {

  display: inline-block;

}

.footer-social a, .list-social a {

  font-size: 12px;

  border: 1px solid #444;

  border-radius: 50%;

  padding: 7px;

  color: #66CC33;

  text-align: center;

  margin-right: 11px;

}

.footer-social a:hover, .list-social a:hover {

  background-color: #444;

}

.footer-social a i, .list-social a i {

  width: 14px;

  height: 14px;

}

.footer-list {

  margin: 0;

  padding-top: 5px;

  padding-left: 0;

  list-style: none;

}

.widget-footer h6 {

  font-size: 20px;

  color: #66CC33;

  margin-top: 20px;

  margin-bottom: 40px;

  line-height: 1;

}

.footer-list-item i:before {

  font-size: 18px;

}

.footer-list-item .list-item-text {

  padding-left: 14px;

}

.footer-list-item {

  line-height: 1;

  padding-top: 11px;

  padding-bottom: 14px

}

.footer-list-item:first-child {

  padding-top: 0;

}

.footer-list-item:last-child {

  padding-bottom: 0;

}

.footer-widget-subscribe h6{

  margin-bottom: 28px;

}

.footer-widget-subscribe form {

  margin-bottom: 18px;

}

.footer-widget-subscribe p {

  font-size: 14px;

  margin-bottom: 0;

}

.footer-bottom {

  padding: 23px 0;

  background-color: #415755;

  border-top: 1px solid #313131;

}

.footer-bottom p {

  color: #7D7D7D;

  font-size: 15px;

  margin-bottom: 0;

}

.footer-bottom ul {

  list-style: none;

  margin: 0;

  padding-left: 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

.footer-bottom ul li span{

  padding-left: 15px;

  padding-right: 15px;

  border-right: 1px solid #7B7B7B;

  line-height: 1;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.footer-bottom ul li:first-child span {

  padding-left: 0;

}

.footer-bottom ul li:last-child span {

  padding-right: 0;

  border-right: none;

}

.footer-bottom li a {

  color: #7B7B7B;

  font-family: "Raleway",Sans-serif;

  font-size: 14px;

  line-height: 26px;

}

.footer-bottom li a:hover {

  color: #fff;

}

.home_cat_items h2{
  font-size: 24px;
}

.animate__animated{
  opacity: 0;
}
.animate__animated.animate__fadeInUp,
.animate__animated.animate__slideInLeft,
.animate__animated.animate__slideInRight{
  opacity: 1;
}


@media (max-width: 479px) {

  .error-404 h1 {

    font-size: 120px;

  }



  .error-404 h2 {

    font-size: 32px;

  }

}

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

# Responsive

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

@media (min-width: 992px) {

  .lg-hidden {

    display: none;

  }



}

@media (min-width: 768px) and (max-width: 991px) {

  .md-hidden {

    display: none;

  }

}

@media (min-width: 480px) and (max-width: 767px) {

  .sm-hidden {

    display: none;

  }

}

@media (max-width: 1299px) {

  blockquote {

    padding-left: 20px;

    padding-right: 20px;

  }

}







/* #Contact form

================================================== */



#ajax-form label {

  display: block;

  font-family: 'Raleway', sans-serif;

  font-size: 14px;

  line-height:30px;

  margin-bottom: 0;

}

.error {

  font-family: 'Raleway', sans-serif;

  font-size: 14px;

  line-height:30px;

  letter-spacing:1px;

  display: none;

  text-align:center;

}

#ajaxsuccess {

  color:#4BD48B;

  border: 1px solid #4BD48B;

  font-family: 'Raleway', sans-serif;

  line-height:60px;

  height:60px;

  display: none;

  padding-left:10px;

  width: 100%;

  margin-left: auto;

  margin-right: auto;

  margin-top: 30px;

}
@media (min-width: 767px) {
  .services-benefits p {
    color: #ffffff;
  }
}

.services-1 .icon-box--bg-img {
  height: 93%;
}

.white-font {
  color: #ffffff;
}

.important-white-font {
  /* Change from black to white text with !important */
  color: white !important;

  /* Black text shadow for contrast */
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.9),
    0 0 2px rgba(0, 0, 0, 0.7),
    0 0 3px rgba(0, 0, 0, 0.5);

  /* Slightly less bold for a more refined look */
  font-weight: 600;
}

.phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem; /* Space between icon and text */
    font-weight: bold;
    white-space: nowrap; /* Prevents ugly breaking between icon and number */
    margin-right: 20px;
}

.loader {
  position: relative;
  width: 130px;
  height: 100px;
  background-repeat: no-repeat;
  background-image: linear-gradient(#415755, #415755),
  linear-gradient(#66CC33, #415755), linear-gradient(#66CC33, #415755);
  background-size: 80px 70px, 30px 50px, 30px 30px;
  background-position: 0 0, 80px 20px, 100px 40px;
}
.loader:after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 12px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  box-sizing: content-box;
  border: 10px solid #000;
  box-shadow: 78px 0 0 -10px #fff, 78px 0 #000;
  animation: wheelSk 0.75s ease-in infinite alternate;
}

.loader:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0px;
  height: 70px;
  width: 70px;
  background-image: linear-gradient(#fff 45px, transparent 0),
    linear-gradient(#fff 45px, transparent 0),
    linear-gradient(#fff 45px, transparent 0);
  background-repeat: no-repeat;
  background-size: 30px 4px;
  background-position: 0px 11px, 8px 35px, 0px 60px;
  animation: lineDropping 0.75s linear infinite;
}

@keyframes wheelSk {
  0%, 50%, 100% { transform: translatey(0) }
  30%, 90% { transform: translatey(-3px) }
}

@keyframes lineDropping {
  0% {
    background-position: 100px 11px, 115px 35px, 105px 60px;
    opacity: 1;
  }
  50% { background-position: 0px 11px, 20px 35px, 5px 60px }
  60% { background-position: -30px 11px, 0px 35px, -10px 60px }
  75%, 100% {
    background-position: -30px 11px, -30px 35px, -30px 60px;
    opacity: 0;
  }
}

.custom-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #415755;
    color: #66CC33;
    padding: 1.2rem 2rem;
    border-radius: 8px;
    border-color: #66CC33;
    font-size: 1.1rem;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.custom-alert.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1.05);
}

.career-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.widget-footer .list-item-icon {
  color: #66CC33;
}

.side-panel-cinfo .license-icon,
.widget-footer .license-icon {
  width: 20px;
  height: 20px;
}

.housecall-div {
  margin-right: 25px;
  display: flex;
  align-items: center; /* vertical centering */
}

/* CSS */
.big-button {
  z-index: 0;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 0;
  line-height: 1.42857143;
  display: inline-block;
  margin-bottom: 0;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  font-family: "Titillium Web", sans-serif;
  font-weight: 600;
  text-align: center;
  background: #415755;
  cursor: pointer;
  border: 1px solid transparent;
  color: #66CC33;
  outline: none;
  position: relative;
  padding: 8px 14px;   /* reduces width */
  font-size: 14px;     /* makes text smaller */
}

.big-button:before {
  content: "";
  background: linear-gradient(
    45deg,
    #389810,
    #66CC33,
    #35f188,
    #169775,
    #389810
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -2;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-big-button 20s linear infinite;
  transition: opacity 0.5s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-big-button {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.big-button:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}

.big-button:hover {
  color: #415755;
}

.big-button:focus {
  outline: 5px auto #389810
}

.ot-flaticon-send {
  color: #389810;
}

/* Make each column a flexbox container */
#news-posts .col-lg-4,
#news-posts .col-md-6,
#news-posts .col-sm-12 {
  display: flex;
}

/* Force post-box to fill the available height */
#news-posts .post-box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column; /* lets inner content stack properly */
}

#news-posts .post-inner {
height: 100%;
}

#news-posts .post-inner .the-excerpt {
  line-height: 1.5;
  max-height: 8em;   /* taller cutoff */
  overflow: hidden;
  position: relative;
}

#news-posts .post-inner .the-excerpt::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2em; /* fade zone */
  background: linear-gradient(to bottom, transparent, white);
}

#fade-overlay {
  position: fixed;
  inset: 0;
  background: #415755;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1500ms ease; /* adjust speed */
  z-index: 99999;
}
#fade-overlay.active {
  opacity: 1;
  pointer-events: all; /* optional: block clicks during fade */
}

#fade-overlay.black {
background: rgba(0, 0, 0, 0.3)
}

.post-wrapper {
  display: flex;
  align-items: flex-start;   /* top-align text and images */
  gap: 20px;                 /* space between text and images */
}

.post-text {
  flex: 2;                   /* blog content takes more space */
}

.post-gallery {
  flex: 1;                   /* gallery column takes less space */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-gallery img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.blog-post .post-text h1,
.blog-post .post-text h2,
.blog-post .post-text h3,
.blog-post .post-text h4,
.blog-post .post-text h5,
.blog-post .post-text h6 {
  font-size: 21px;
}


.blog-post .entry-title {
  font-size: 42px;
}

/* Uniform thumbnail area */
.projects-thumbnail {
  position: relative;
  overflow: hidden;
  height: 260px;           /* <-- pick your uniform height */
}

/* Make the image fill that area without distortion */
.projects-thumbnail a,
.projects-thumbnail a img {
  display: block;
  width: 100%;
  height: 100%;
}

.projects-thumbnail a img {
  object-fit: cover;       /* crop to fill */
}

/* Ensure overlay still covers the image area */
.projects-thumbnail .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* keep title near bottom, tweak as you like */
  padding: 16px;
}

/* Responsive tweaks if you want shorter thumbnails on smaller screens */
@media (max-width: 1199.98px) {
  .projects-thumbnail { height: 220px; }
}
@media (max-width: 767.98px) {
  .projects-thumbnail { height: 180px; }
}

/* Make sure the overlay link covers the whole thumbnail and is above the image */
.projects-thumbnail { position: relative; }

.projects-thumbnail a.overlay {
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 2;             /* ensure it sits above the img */
  pointer-events: auto;   /* just in case existing styles disable it */
  cursor: pointer;
}

/* Let the anchor receive the click even when clicking the text/icon */
.projects-thumbnail a.overlay h5,
.projects-thumbnail a.overlay i {
  pointer-events: none;
}

.post-inner .entry-media img {
  min-height: -webkit-fill-available;
}

.post-inner .entry-media img {
  min-height: -webkit-fill-available;
}

.news-title{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.news-title-logo{
  height: 2em;
  width: auto;
  margin-right: 10px
}

.defaultimg {
  opacity: 1;
}

.our-team {
  padding-top: 20px;
  padding-bottom: 0px;
}

#team-intro-btn {
  margin-left: 30px;
  margin-right: 10px;
}

#company-intros {
  padding-top: 60px;
}

.career-post {
  padding-bottom: 0px;
      }

#title-text, #id-text {
  font-size: 1em;
}

@media (max-width: 767px) {
#company-intros {
  padding-top: 0px;
}

  #team-intro-btn {
    margin-left: 15px;
  }

  .how-it-works {
    padding-top: 15px;
  }

  .entry-content {
    padding: 42px 0 0px;
  }

  .site-footer {
    padding-top: 66px;
  }

  .blog-post > .inner-post .entry-summary {
    padding-bottom: 0px;
  }

  .contact-right {
    margin-right: 0px;
  }

  #news-posts .post-item {
  padding-left: 15px;
  padding-right: 15px;
}
}