/*
* @package      Style
* @description  This package holds all common style declarations
*               of the site
*/

@import "_variables.scss";
@import "includes/_mixins.scss";

@import "includes/_normalize.scss";
@import "modules/_page-layouts.scss";
@import "modules/tm-grid/_tm-grid.scss";


/*
* @section      Icon Fonts
* @description  This section holds all icon fonts stored in template
*/


@import "fonts/_arrows.scss";
@import "fonts/_fl-continuous.scss";
@import "fonts/_font-awesome.scss";

/*
* @section      Main Styles
* @description  This section holds template default elements style declarations
*/

html {
  font-size: 60px;

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
    font-size: 70px;
  }

  @media (min-width: $screen-md-min) and (max-width: $screen-lg-min - 1) {
    font-size: 80px;
  }

  @media (min-width: $screen-lg-min) {
    font-size: 100px;
  }

  .old-ie {
    display: none;
  }

  &.lt-ie11 {
    .old-ie{
      display: block;
    }
  }
}

body {
  font-family: $default-font-family;
  font-weight: $default-font-weight;
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: none;
  color: $content-color;
  background: $content-bg;

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
    font-size: 18px;
  }

  @media (min-width: $screen-md-min) {
    font-size: $default-font-size;
    line-height: $default-line-height;
  }
}


/*
* @subsection   Typography
* @description  Describes default font settings for basic html elements and
*               css classes
*/

h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 {
  display: block;
  color: $grayscale-darken;
  font-weight: 500;

  a{
    &:focus,
    &:hover {
      color: $primary;
      border-bottom:2px solid;
    }
  }
}

h1, .heading-1 {
  font-size: 38px;
  line-height: 1.33;

  @media (min-width: $screen-sm-min) {
    font-size: 40px;
    line-height: 1.16;
  }

  > .heading-2{
    margin-bottom: rem(33px);
  }
}

h2, .heading-2 {
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  mark{
    padding: 5px 60px;
  }

  @media (min-width: $screen-sm-min) {
    font-size: 32px;
    line-height: 1.32;
    letter-spacing: 0.36em;

  }
}
.heading-2-variant-1{
  letter-spacing: 0.19em;
  font-weight: 400;
}

h3, .heading-3 {
  font-size: 30px;
  line-height: 1.5;

  @media (min-width: $screen-sm-min) {
    font-size: 45px;
    line-height: 1.37;
  }
}

h4, .heading-4 {
  font-size: 26px;

  @media (min-width: $screen-sm-min) {
    font-size: 34px;
    line-height: 1.47;
  }
}

h5, .heading-5 {
  font-size: 22px;

  @media (min-width: $screen-sm-min) {
    font-size: 24px;
    line-height: 1.66;
  }

}

h6, .heading-6 {
  font-size: 18px;
  font-weight: 400;

  @media (min-width: $screen-sm-min) {
    font-size: 20px;
    line-height: 1.5;
  }
}

p, .list, .contact-info {
  font-weight: 300;

  a:hover {
    color: $primary;
  }
}

address{
  a:hover{
    color: $primary;
  }
}

mark {
  display: inline-block;
  padding: 5px;
  color: #FFF;
  background: $primary;
}

em {
  color: $primary;
}

small, .small {
  display: block;
  font-size: 0.675em;
  line-height: 1.643em;
  text-transform: uppercase;
  letter-spacing: 0.34em;
}

.big {
  font-size: 1.2em;
}

time {
  font-size: 20px;
  font-weight: 400;
  &:before{
    padding-right: 8px;
  }
}

hr{
  height: 3px;
  width: 79px;
  display: inline-block;
  padding: 0;
  border:none;
  background:$primary;
}


/*
* @section      Main Layout
* @description  This section holds class declarations for elements indent creation
*/

/*
* @subsection   Offsets
* @description  Describes vertical indentation between the elements
*/

* + h1 {
}

* + h2 {

}

* + h3 {
}

* + h4 {

}

* + h5{

}

* + h6 {
  margin-top: 15px;
  @media(min-width: $screen-sm-min){
    margin-top: 35px;
  }
}

* + p {
  margin-top: 15px;
}

* + img {

}

* + address{
  margin-top: 30px;
}

* + .btn{
  margin-top: 67px;
}

* + .responsive-tabs{
  margin-top: 30px;
 @media(min-width: $screen-md-min){
   margin-top: 49px;
 }
}

* + .copyright{
  margin-top: 30px;
  @media(min-width: $screen-md-min){
    margin-top: 109px;
  }
}

* + .link {

}

* + .list{

}

* + .index-list {

}

* + .marked-list {

}

* + .ordered-list {
}

* + .inline-list {
  margin-top: 30px;
  @media(min-width: $screen-md-min){
    margin-top: 80px;
  }
}

* + .rd-mailform{
    margin-top: 90px;
}

* + .terms-list, .terms-list + p{
  margin-top: 30px;
  @media(min-width: $screen-sm-min){
    margin-top: 80px;
  }
}

* + .contact-info {

}

* + .btn-group{
  margin-top: rem(100px);
}

* + .box,
* + .box-xs,
* + .box-sm,
* + .box-md,
* + .box-lg {

}

* + .row{
  margin-top: 40px;
  @media(min-width: $screen-md-min){
    margin-top: 64px;
  }
}

.container + .container {
  margin-top: 100px;
}

* + .container-fluid{
  margin-top: 66px;
}

* + .rd-mailform{

}

* + .offset {
  &-1 {
    margin-top: 40px;
    @media(min-width: $screen-md-min){
      margin-top: 85px;
    }
  }

  &-2 {
    margin-top: 40px;
    @media(min-width: $screen-md-min){
      margin-top: 62px;
    }
  }

  &-3 {
    @media(min-width: $screen-md-min){
      margin-top: 109px;
    }
  }
  &-4{
    margin-top: 36px;
  }
  &-5{
    @media(min-width: $screen-md-min){
      margin-top: 25px;
    }
  }
}

* + time{

}

p + p{

}
time + h6{
  margin-top: 12px;
}

img + h6{
  margin-top: 10px;
  @media(min-width: $screen-md-min){
    margin-top: 45px;
  }
}

h6 + .marked-list{
  margin-top: 12px;
}

h2 + h4{
  margin-top: rem(100px);
}

hr + h6{
 @media(min-width: $screen-sm-min){
   margin-top: 61px;
 }
}

.icon + p{
  margin-top: 30px;
}

.box, .box-xs, .box-sm, .box-md, .box-lg {
  & + .box,
  & + .box-xs,
  & + .box-sm,
  & + .box-md,
  & + .box-lg {

  }
}

.flow-offset-1 {
  @include make-flow-offset(30px);
}

.flow-offset-2 {
  @include make-flow-offset(60px);
}
.flow-offset-3 {
  @include make-flow-offset(22px);
}
.container {
  .rd-navbar-search-results{
    .result-item + .result-item{
      margin-top: 30px;
    }
  }
}


/*
* @subsection   Postfix
* @description  Describes instant right margin classes
*/

.postfix-1 {

}


/*
* @subsection   Prefix
* @description  Describes instant left margin classes
*/

.preffix-1 {

}


/*
* @subsection   Insets
* @description  Describes instant padding classes
*/

.inset {
  &-1 {
    padding-top: 10px;
  }

  &-2 {
    @media(min-width: $screen-md-min){
      padding-right: 55px;
    }
  }

  &-3 {
    padding-top: 14px;
  }
  &-4{
    @media(min-width: $screen-md-min){
      padding-right: 95px;
    }
  }
}


/*
* @subsection   Well
* @description  Describes section inner indents
*/

.well-xs {
  padding-top: 50px;
  padding-bottom: 50px;
}

.well-sm {
  padding-top: 45px;
  padding-bottom: 55px;
  @media(min-width: $screen-sm-min){
    padding-top: 87px;
    padding-bottom: rem(105px);
  }
  &--inset-1{
    padding-bottom: 0;
  }
  &--inset-2{
    @media(min-width: $screen-lg-min){
      padding-bottom: rem(145px);
    }
  }
  &--inset-3{
    @media(min-width: $screen-lg-min){
      padding-bottom: 97px;
    }
  }
  &--inset-4{
    @media(min-width: $screen-lg-min){
      padding-top: 70px;
      padding-bottom: 97px;
    }
  }
}

.well-md {
  padding-top: 50px;
  padding-bottom: 50px;
  @media(min-width: $screen-md-min){
    padding-top: rem(140px);
    padding-bottom: rem(138px);
  }
}

.well-lg {
  padding-top: rem(120px);
  padding-bottom: rem(120px);
}

.well-xl {
  padding-top: 100px;
  padding-bottom: 100px;
  @media(min-width: $screen-lg-min){
    padding-top: rem(310px);
    padding-bottom: rem(268px);
  }
  &--inset-1{
    @media(min-width: $screen-lg-min){
      padding-bottom: rem(333px);
    }
  }
}

/*
* @section      Helpers
* @description  This section holds various helper classes for
*               conditional page styling
*/

.round {
  border-radius: 50%;
}

.bg-overlay{

  &:after{
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-color: rgba($greyscale-darker, .68);
    z-index: 2;
  }
}

.copyright{
    span{
        position: relative;
        &:after{
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            transform: translateY(-100%);
            margin-left: 3px;
            background-color: lighten(saturate(adjust_hue($default, 190.00000000000009), 2.8037383177570123%), 41.96078431372549%);
        }
    }
}

.z-index{
  position: relative;
  z-index: 9;
}

.ie-11{
  .rd-parallax{
    &-layer[data-url]{
      top: 0;
      bottom: 0;
    }
  }
  .well-sm{
    padding-top: 217px;
  }
}

/*
* @subsection   Colors
*/

html body .page { // Increases specificity to use with background helpers
  .text-primary {
    color: $primary;
  }
}


/*
* @subsection   Backgrounds
*/
.bg-primary {
  background: $primary;

  &, #{headings()}{
    color: $white;
  }

  hr{
    background: $white;
  }

  .marked-list{
    li{
      &:before{
        color: $white;
      }
      a{
        &:hover{
          color: $white;
          text-decoration: underline;
        }
      }
    }
  }

  .icon-primary{
    color: $white;
  }
  a{
    color: $white;
    &:hover{
      color: $white;
    }
  }

  .inline-list{
    a:hover{
      color: inherit;
    }
  }

  .btn-primary{
    background-color: $white;
    color: $grayscale-darken;
    border: 2px solid $white;
    &:hover{
      color: $white;
      background-color: transparent;
      border: 2px solid $white;
    }
  }
  
  p, .list, .terms-list{
    a:hover{
      color: $white;
      text-decoration: underline;
    }
  }
}
.bg-greyscale{
  background-color: $grayscale-darken;
}
.bg-header{
  background-color: $header-bg;
}

.bg-image{
  background-size: cover;
  &-1{
    background-image: url("../images/bg-image01.jpg");
  }
  &-2{
    background-image: url("../images/bg-image02.jpg");
  }
  &-3{
    background-image: url("../images/bg-image03.jpg");
  }
}

/*
* @subsection   Parallax
*/
.rd-parallax{
  .btn-primary{
    background-color: $primary;
    color: $white;
    border-color: $primary;
    &:hover{
      background-color: transparent;
    }
  }

  &, #{headings()}{
    color: $white;
  }


  h6{
    color: $primary;
  }
}
@import "helpers/_floating.scss";
@import "helpers/_text-alignment.scss";
@import "helpers/_text-styling.scss";
@import "helpers/_animate.scss";


/*
* @section      Components
* @description  This section holds all elements style declarations of template
*/

/*
 * @subsection   Box
 */
@import "modules/tm-box/_boxes.scss";

.box {

}

/*
* @subsection   Quote
*/
.quote{

}

blockquote{
  position:relative;
  &::before {
    content: '\f10d';
    position: absolute;
    font-size: 72px;
    font-family: "FontAwesome";
    color: rgba($white,0.2);
    top: 0;
    line-height: 1;
    left: 0;
  }
}

/*
* @subsection   Pricing Box
*/

.pricing-box{

}

/*
* @subsection   Breadcrumbs
*/

.breadcrumbs{

}

/*
* @subsection   Post
*/

.post{

}

/*
* @subsection   List
*/

.list{
  li + li{
    margin-top: 10px;
  }
}

/*
* @subsection   Inline List
*/

.inline-list {
  @include transform(translateY(-30px));
  margin-bottom: -30px;
  margin-left: -45px;


  > li {
    display: inline-block;
    margin-top: 30px;
    margin-left: 45px;

    padding: 5px 14px;
    font-size: 10px;
    text-transform: uppercase;
    transition: .3s;
    letter-spacing: 0.36em;

    &:hover{
      background-color: $white;
      color: $grayscale-default;
    }
    a:after{
      display: none;
    }
  }
}


/*
* @subsection   Marked List
*/

.marked-list {
  text-align: left;

  > li {
    position: relative;
    padding-left: 30px;

    &:before {
      content: "\e008";
      position: absolute;
      left: 0;
      top: 50%;
      font-weight: 400;
      font-size: 0.675em;
      font-family: $arrows;
      color: $primary;
      @include transform(translateY(-50%));
    }

    & + li {
      margin-top: 8px;
    }

    > a:hover {
      color: $primary;
    }
  }
}


/*
* @subsection   Index List
*/

.index-list {
  counter-reset: li;

  > li {
    > .index-list__counter{
      &:before {
        content: counter(li, decimal-leading-zero) '';
        counter-increment: li;
        font-size: 76px;
        font-weight: 400;
        letter-spacing: 0.36em;
      }
    }
  }

  // Sets offset between list rows
  @include make-flow-offset(30px);
}


/*
* @subsection   Ordered List
*/

.ordered-list {
  > li {
    padding-left: 20px;
    list-style-type: decimal;
  }
}


/*
* @subsection   Terms  List
*/

.terms-list {
  > dt + dd {
    margin-top: 20px;
  }

  > dd + dt {
    margin-top: 35px;
    @media(min-width: $screen-sm-min){
      margin-top: 80px;
    }
  }
}


/*
* @subsection   Contact Info
*/

.contact-info {
  p {
  }

  dl {
    dt, dd {
      display: inline-block;
    }

    dt:after {
      content: ':';
    }

    dt {
      min-width: 80px;
    }
  }
}


/*
* @subsection   Counter
*/

.counter{

}


/*
* @subsection   Thumb
*/
.isotope-item {
  width: 100%;
}

.thumb {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 99.9999%;

  > img {
    width: 100%;
  }

  &__overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba($grayscale-darken, .5);
    opacity: 0;
    text-align: center;
    transition: .3s all ease;

    > *{
      vertical-align: middle;
      @include transform(translateY(30px));
      transition: .3s all ease;
    }

    &:before{
      content: '\f055';
      display: inline-block;
      font-family: 'FontAwesome';
      font-size: 50px;
      position: absolute;
      left: 50%;
      top: 50%;
      color: $primary;
      opacity: 0;
      transition: .6s;
      @include transform(translate(-100%, -50%));
    }
  }

  &:hover {
    //img{
    //  transform: scale(1.1);
    //}
    .thumb__overlay {
      opacity: 1;

      &:before{
        opacity: 1;
        @include transform(translate(-50%, -50%));
      }

      > *{
        @include transform(translateY(0));
      }
    }
  }
}


/*
* @subsection   Link
*/

.link {
  display: inline-block;
}


/*
* @subsection   Video
*/

.video {
  position: relative;
  padding-bottom: percentage(340 / 570); // percentage( Height / Width ) on PSD

  > iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

//*
//Imports
//*

@import "components/_buttons.scss";
@import "components/_icons.scss";


/*
* @section      Extensions
* @description  This section holds some of style declarations for necessary
*               scripts
*/

@import "extensions/_rd-navbar.scss";
@import "extensions/_rd-mailform.scss";
@import "extensions/_rd-google-map.scss";
@import "extensions/_rd-parallax.scss";
@import "extensions/_ui-to-top.scss";
@import "extensions/_responsive-tabs.scss";
@import "extensions/_swiper.scss";
@import "extensions/_magnific-popup.scss";

/*
* @section      Page Header
* @description  This section holds specific style redeclarations for some
*               of common elements in page header
*/

.page-header {
  position: relative;

  &, #{headings()}{
    color: $white;
  }

  .rd-navbar-wrap-variant-1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .rd-navbar-brand{
    .brand-name {
      color: $white;
    }
  }
  
  .swiper-slider{

    h2{
      position: absolute;
      top:30%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      font-family: $sec-font-family;
      width: 100%;
      text-align: center;
      @media(min-width: $screen-sm-min){
        top: 51%;
      }
    }

    .btn{
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      @media(min-width: $screen-sm-min){
        top: 65%;
      }
      &-primary{
        border-color: $white;
        color: $white;
        background-color: transparent;
        &:hover{
          border-color: $primary;
          color: $primary;
        }
      }
    }

  }

}


/*
* @section      Page Content
* @description  This section holds specific style redeclarations for some
*               of common elements in page content
*/

.page-content {
  .desktop & {
    min-height: 100vh;
  }
}

/*
* @section      Page Footer
* @description  This section holds specific style redeclarations for some
*               of common elements in page footer
*/

.page-footer {

  .fl-continuous-ico, [class^="fl-continuous-"]::before,
  [class*=" fl-continuous-"]::before,
  [class^="fl-continuous-"]::after,
  [class*=" fl-continuous-"]::after {
    font-weight: 700;
  }

}

.copyright {
}