/*
 * Title:   Miracle | Responsive Multi-Purpose HTML5 Template - Main Style file
 * Author:  http://themeforest.net/user/soaptheme
 */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[Table of contents]

1. Base Styles
  1.1. Reset
  1.2. Layout
2. Global Styles
  2.1. General Styles
  2.2. Form Elements
  2.3. Buttons
  2.4. Message box
  2.5. Table
  2.6. Design Elements
  2.7. Toggle & Accordion
  2.8. Blog Posts
  2.9. Sticky Notes
  2.10. Social Icons
  2.11. Callout Box
3. Header
  3.1. Main Header
  3.2. Slideshow
  3.3. Page Title Container
  3.4. Main Menu
  3.5. Mobile Menu
4. Main Content
  4.1. Galleries
  4.2. Icon Box
  4.3. Banner
  4.4. Process Builder
  4.5. Post Slider
  4.6. Pricing table
  4.7. Progress Bar
  4.8. Style Changer
  4.9. Tab
  4.10. Team
  4.11. Testimonial
5. Footer
6. Page Content
  6.1. Standard Pages
  6.2. Portfolio Pages
  6.3. Blog Pages
  6.4. Homepage
  6.5. WooCommerce Pages

  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 1. Base Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 1.1. Reset ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 1) Reset */

@font-face {
  font-family: "GothamLight";
  src: url("../fonts/gotham-light.ttf");
}

@font-face {
  font-family: "GothamExtraLight";
  src: url("../fonts/gotham-extralight.ttf");
}

@font-face {
  font-family: "Myria";
  src: url("../fonts/MYRIAABI.ttf");
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  zoom: 1;
}

html {
  font-size: 16px;
  min-height: 100%;
  overflow-x: hidden !important;
}

body {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  background-color: #fff;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
  -ms-overflow-style: scrollbar;
  /*oveflow-y: scroll;*/
}

iframe,
img {
  border: 0;
}

img {
  border-style: none;
  height: auto;
  max-width: 100%;
  vertical-align: top;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover,
a:focus {
  text-decoration: none;
  color: #ff6600;
}

a:focus {
  outline: none;
}

/* 3) Lists */

ul {
  list-style: none;
  margin: 0;
}

/* 4) Contents */

small {
  font-size: 0.8333em;
}

/* 5) Table */

/* 6) HTML5 & CSS3 Styles for older browsers */

footer,
header,
menu,
nav,
section {
  display: block;
}

/* 7) Tools */

.hidden {
  display: block !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 8) Color */

.color-white {
  color: #fff !important;
}

.custom-font1 {
  font-family: Playfair Display;
}

.custom-font2 {
  font-family: Open Sans Condensed;
}

.custom-font3,
#header .logo,
#nav > ul > li > a,
.mobile-nav,
.page-loading-wrapper header .logo {
  font-family: Dosis;
}

/* 1.2. Layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#page-wrapper {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.box-sm {
  margin-bottom: 20px;
}

.box-md,
.box {
  margin-bottom: 30px;
}

.box-lg {
  margin-bottom: 40px;
}

/* 2. Global Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 2.1. General Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.title {
  font-weight: normal;
}

.description > *:last-child {
  margin-bottom: 0;
}

.section-info {
  border-top: 1px solid #d4dde5;
  padding: 50px 0;
  position: relative;
}

.section-info .section-title {
  display: inline-block;
  line-height: 1em;
  margin-top: -0.6em;
  padding-right: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  font-weight: 300;
}

.hide-children > *:not(.active) {
  display: none;
}

/* Unordered List */

/* bullet text */

/* image hover effect */

.image {
  overflow: hidden;
  z-index: 1;
  position: relative;
  display: block;
}

.image img {
  -moz-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  -webkit-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  -webkit-backface-visibility: hidden;
  width: 100%;
}

/* five stars rating */

/* columns */

/* animated */

.animated {
  visibility: hidden;
}

.image-container {
  position: relative;
}

.image-container img {
  width: 100%;
}

/* text box */

/* 2.2. Form Elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

form [class^="col-"] > input,
form [class^="col-"] > select,
form [class^="col-"] > .btn,
form [class^="col-"] > button,
form [class*=" col-"] > input,
form [class*=" col-"] > select,
form [class*=" col-"] > .btn,
form [class*=" col-"] > button {
  width: 100%;
}

form {
  font-size: 1.0833em;
  font-weight: 400;
  display: block;
}

.form-group:not(.box) {
  margin-bottom: 20px;
}

input.input-text2,
select {
  background: #edf6ff;
  border: none;
  line-height: normal;
}

form.form-grey input.input-text {
  background: #8a8a8a;
  color: #fff;
}

form.form-grey input.input-text::-webkit-input-placeholder {
  color: #fff;
}

form.form-grey label {
  color: #ff6600;
}

input.input-text {
  background: #8a8a8a;
  color: #fff;
  height: 40px;
  font-size: 14px;
  border-radius: 4px;
  padding: 5px 12px;
}

input.input-text,
select {
  padding-left: 20px;
  padding-right: 20px;
  height: 42px;
  font-size: 1.0833em;
}

input.input-text.input-lg,
select.input-lg {
  height: 48px;
  font-size: 1.1667em;
}

input.input-text.input-md,
select.input-md {
  height: 42px;
  font-size: 1.0833em;
}

input.input-text.input-sm,
select.input-sm {
  height: 34px;
  font-size: 1em;
}

input.input-text.input-xs,
select.input-xs {
  height: 28px;
  font-size: 0.9167em;
}

input.input-text.white,
select.white {
  background: #fff;
}

input.input-text {
  -moz-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  -o-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  -ms-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  border: 1px solid transparent;
  cursor: text;
}

input.input-text:focus {
  outline: none;
  border: 1px solid #ff6600;
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.6);
}

/* Select Box */

select {
  padding: 10px 0 10px 20px;
  line-height: 38px;
  max-width: 100% !important;
}

select option {
  padding: 2px 10px 2px 18px;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select {
    padding-right: 18px;
  }
}

/* Checkbox and Radio */

/* 2.3. Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.btn {
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0 30px;
  white-space: nowrap;
  /*text-transform: uppercase;*/
  /*font-weight: 600;*/
  /*background: #ff6600;*/
  font-size: 0.9167em;
  height: 42px;
  line-height: 42px;
  -webkit-border-radius: 21px 21px 21px 21px;
  -moz-border-radius: 21px 21px 21px 21px;
  -ms-border-radius: 21px 21px 21px 21px;
  border-radius: 21px 21px 21px 21px;
  margin-right: 5px;
  -moz-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  -webkit-transition: all 0.2s ease 0s;
  -ms-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
  box-shadow: none;
  vertical-align: baseline;
}

.btn i {
  margin-right: 5px;
}

.btn:last-child {
  margin-right: 0;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: none;
}

.btn.active {
  box-shadow: none;
}

.btn.btn-sm {
  height: 28px;
  line-height: 28px;
  font-weight: 400;
  padding: 0 20px;
  font-size: 0.8333em;
  -webkit-border-radius: 14px 14px 14px 14px;
  -moz-border-radius: 14px 14px 14px 14px;
  -ms-border-radius: 14px 14px 14px 14px;
  border-radius: 14px 14px 14px 14px;
}

.btn.btn-lg {
  height: 47px;
  line-height: 47px;
  font-size: 1em;
  padding: 0 36px;
  -webkit-border-radius: 24px 24px 24px 24px;
  -moz-border-radius: 24px 24px 24px 24px;
  -ms-border-radius: 24px 24px 24px 24px;
  border-radius: 24px 24px 24px 24px;
}

.btn.style1:hover,
.btn.style1:active,
.btn.style1:focus,
.btn.style1.active {
  background: #ff7d26;
  color: #fff;
}

.btn.style2 {
  background: #20466c;
}

.btn.style2:hover,
.btn.style2:active,
.btn.style2:focus,
.btn.style2.active {
  background: #ff6600;
  color: #fff;
}

.btn.style3 {
  background: #edf6ff;
  color: inherit;
}

.btn.style3:hover,
.btn.style3:active,
.btn.style3:focus,
.btn.style3.active {
  color: #ff6600;
}

.btn.style4 {
  background: none;
  border: 1px solid #d4dde5;
  color: inherit;
  line-height: 40px;
}

.btn.style4.btn-sm {
  line-height: 26px;
}

.btn.style4.btn-lg {
  line-height: 45px;
}

.btn.style4:hover,
.btn.style4:active,
.btn.style4:focus,
.btn.style4.active {
  color: #fff;
  border-color: #ff6600;
  background: #ff6600;
}

.btn.style4.color-white {
  border-color: #fff;
}

.btn.style4.color-white:hover,
.btn.style4.color-white:active,
.btn.style4.color-white:focus,
.btn.style4.color-white.active {
  border-color: #ff6600;
}

.btn.style4.color-black {
  border-color: #343434;
  color: #343434;
}

.btn.style4.color-black:hover,
.btn.style4.color-black:active,
.btn.style4.color-black:focus,
.btn.style4.color-black.active {
  border-color: #ff6600;
  color: #fff;
}

/* 2.4. Message box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 2.5. Table ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#header #nav,
.icon-box[class*=" style-side-"].style-side-5 .icon-container,
.icon-box[class*=" style-side-"].style-side-5 .box-content,
.icon-box[class*=" style-side-"].style-side-6 .icon-container,
.icon-box[class*=" style-side-"].style-side-6 .box-content {
  display: table-cell;
  vertical-align: middle;
}

/* 2.6. Design Elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* twitter box */

/* recent posts */

/* archives */

/* filters categories */

/* search box */

/* price filter */

/* banner slider */

/* best sellers widget */

/* textbox */

.text-box {
  background: #edf6ff;
  padding: 20px 25px;
}

.text-box > *:last-child {
  margin-bottom: 0;
}

/* flickr gallery */

/* color filter */

/* size filter */

/* 2.7. Toggle & Accordion ~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 2.8. Blog Posts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 2.9. Sticky Notes ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 2.10. Social Icons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 2.11. Callout Box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.callout-box {
  position: relative;
}

.callout-box .callout-content {
  display: table;
  width: 100%;
}

.callout-box .callout-text {
  display: table-cell;
  vertical-align: middle;
}

.callout-box .callout-text > * {
  margin-bottom: 0;
}

.callout-box .callout-action {
  display: table-cell;
  padding-left: 40px;
  vertical-align: middle;
  white-space: nowrap;
}

.callout-box.style1 {
  /*.callout-content { height: 100%; padding-bottom: 20px; }*/
}

.callout-box.style1 .callout-box-wrapper {
  background: rgba(147, 159, 170, 0.95);
}

.callout-box.style1
  .callout-box-wrapper
  > .container
  > .row
  > div:not(.callout-content-container) {
  z-index: 1;
}

.callout-box.style1 .callout-content-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.callout-box.style1 .callout-content {
  display: inline-block;
  height: auto;
  width: 98%;
  vertical-align: middle;
}

.callout-box.style1 .callout-text h2,
.callout-box.style1 .callout-text h3 {
  color: #fff;
  font-size: 3.3333em;
  padding-right: 35px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.callout-box.style1 .callout-text h3 {
  font-size: 2.5em;
}

.callout-box.style1 .btn {
  color: #fff;
  border-color: #fff;
}

.callout-box.style1 .btn:hover {
  border-color: #ff6600;
}

.callout-box.style1 .container {
  position: relative;
}

.callout-box.style1 .callout-image-container {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}

.callout-box.style1 .callout-image {
  position: relative;
  z-index: 1;
  display: table-cell;
  vertical-align: bottom;
}

.callout-box.style1 .callout-image img {
  margin-top: 5px;
}

.callout-box.style1 .callout-stripe {
  position: absolute;
  bottom: 0;
  right: 0;
  float: none;
  padding: 0;
  color: #fff;
  background: #ff6600;
  padding: 7px 0 7px 50px;
  font-size: 0.8333em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 0;
}

.callout-box.style1 .callout-stripe:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  bottom: 0;
  width: 1000px;
  background: #ff6600;
}

.callout-box.style1 .callout-stripe img {
  margin-right: 8px;
}

.callout-box.style2 .callout-action,
.callout-box.style3 .callout-action {
  text-align: right;
}

.callout-box.style2 .callout-text *,
.callout-box.style3 .callout-text * {
  color: #fff;
  line-height: 1.6667em;
}

.callout-box.style2 {
  background: #1b4268;
  padding: 30px 0;
}

.callout-box.style2 .btn {
  color: #fff;
  border-color: #fff;
  padding: 0 45px;
}

.callout-box.style2 .btn:hover {
  border-color: #ff6600;
}

.callout-box.style3 {
  background: #ff7a5c;
  padding: 40px 0;
}

.callout-box.style3 .callout-text * {
  font-size: 2.5em;
}

.callout-box.style3 .btn:hover {
  color: #fff;
  /*background: #1b4268;*/
  background: #cccccc;
}

/* 2.12. Slider ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 2.13. Parallax ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.parallax {
  background-attachment: fixed;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: auto auto;
  /*background-size: cover;*/
  overflow: hidden;
  position: static;
}

.parallax .container {
  -webkit-backface-visibility: hidden;
}

/* 3. Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 3.1. Main Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 3.2. Slideshow ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 3.3. Page Title Container ~~~~~~~~~~~~~~~~~~~~~~~ */

.page-title-container {
  position: relative;
  overflow: visible;
}

.page-title-container .page-title {
  padding: 120px 0 25px;
}

/* 3.4. Main Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#nav {
  text-align: right;
}

#nav li.active > a {
  color: #ff6600;
}

#nav > ul > li {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  text-align: left;
}

#nav > ul > li > a {
  font-family: "GothamLight", Arial, sans-serif;
  font-size: 17px;
  line-height: 2.75;
  font-weight: 400;
  letter-spacing: normal;
  opacity: 1;
  display: block;
  color: #fff;
  /*font-weight: bold;*/
  /*font-weight: 700;*/
  /*text-transform: uppercase;*/
  line-height: 44px;
  padding: 0 40px;
  -moz-transition: all 0.25s ease 0s;
  -o-transition: all 0.25s ease 0s;
  -webkit-transition: all 0.25s ease 0s;
  -ms-transition: all 0.25s ease 0s;
  transition: all 0.25s ease 0s;
}

#nav > ul > li > a:hover {
  color: #ff6600;
}

#nav > ul > .mega-menu-item {
  position: static;
}

#nav > ul > li.menu-item-has-children:hover > a {
  color: #ff6600;
  background: rgba(255, 255, 255, 0.9);
}

/* 3.5. Mobile Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4. Main Content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.1. Galleries ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.2. Icon Box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.3. Banner ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.4. Process Builder ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.5. Post Slider ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.6. Pricing table ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.7. Progress Bar ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* colored progress bar */

/* circle progress */

/* counters box */

/* 4.8. Style Changer ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.9. Tabs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.10. Team ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4.11. Testimonial ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 5. Footer ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 6. Page Content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 6.1. Standard Pages ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* features slider */

/* brand slider */

/* theme features section */

/* google map */

/* contact page */

/* faq page */

/* terms and conditions */

/* 404 page */

/* 6.2. Portfolio Pages ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 6.3. Blog Pages ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* single post */

/* 6.4. Homepage ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* RESPONSIVE SECTION */

/* 6.5. WooCommerce Pages ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* category page */

/**
 * EasyZoom core styles
 */

/**
 * EasyZoom layout variations
 */