@import base.sass

.screen-reader-text
  clip: rect(1px, 1px, 1px, 1px)
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)
  position: absolute !important
  white-space: nowrap
  height: 1px
  width: 1px
  overflow: hidden
  &:focus
    clip: auto !important
    display: block
    height: auto
    left: 5px
    top: 5px
    width: auto
    z-index: 100000

body
  font-size: $body-font-size
  font-family: $body-font
  color: $body-font-color
  line-height: $main-line-height
  word-wrap: break-word
  word-break: break-word

a
  color: $link-color
  text-decoration: $link-decoration
  &:hover
    color: $link-hover
    text-decoration: inherit
    -webkit-transition: all 400ms ease-out
    -moz-transition: all 400ms ease-out
    -o-transition: all 400ms ease-out
    transition: all 400ms ease-out
  &:focus
    outline: none !important
    box-shadow: none

h1, h2, h3, h4, h5, h6
  font-family: $headings-font

p
  margin-bottom: $paragraph-margin-bottom
  line-height: $main-line-height

h1, h2, h3, h4
  margin: 1.114em 0 0.5em
  font-weight: inherit
  line-height: 1.2

h1
  margin-top: 0
  font-size: 3.157em

h2
  font-size: 2.2em

h3
  font-size: 1.777em

h4
  font-size: 1.333em

h1, h2, h3, h4, h5, h6
  color: $headings-color
  font-weight: 600

small, .font_small
  font-size: 0.75em

.hide-element
  display: none

.show-element
  display: block

.alignleft
  float: left
  margin: 0 15px 30px 0

.aligncenter
  display: block
  margin: 0 auto 30px auto

.alignright
  float: right
  margin: 0 0 30px 15px

.alignnone
  float: none
  display: block
  margin: 0 0 30px 0

.size-full
  width: 100%
  height: auto
  margin: 0 0 30px 0

p .alignleft
  float: left
  margin: 5px 15px 30px 0

p .aligncenter
  display: block
  margin: 5px auto 30px auto

p .alignright
  float: right
  margin: 5px 0 30px 15px

p .alignnone
  float: none
  display: block
  margin: 5px 0 0 0

p .size-full
  width: 100%
  height: auto
  margin: 5px 0 0 0

.wp-caption
  background: #fff
  border: 1px solid #f0f0f0
  max-width: 96%
  /* Image does not overflow the content area */
  padding: 5px 3px 10px
  text-align: center

.wp-caption.alignnone
  margin: 5px 20px 20px 0

.wp-caption.alignleft
  margin: 5px 20px 20px 0

.wp-caption.alignright
  margin: 5px 0 20px 20px

.wp-caption img
  border: 0 none
  height: auto
  margin: 0
  max-width: 98.5%
  padding: 0
  width: auto

.wp-caption p.wp-caption-text
  font-size: 11px
  line-height: 17px
  margin: 0
  padding: 0 4px 5px

.bypostauthor
  font-size: 16px

/*=====================*/
/** WordPress Classes */
/*======================*/
.sticky
  & .sticky-icon
    color: $sticky-icon-color

.gallery
  margin: 0 auto 18px
  &.gallery-item
    float: left
    margin-top: 0
    text-align: center
    width: 33%

.gallery-columns-2 .gallery-item
  width: 50%

.gallery-columns-4 .gallery-item
  width: 25%

.gallery img
  box-shadow: 0px 0px 4px #999
  border: 1px solid white
  padding: 8px
  background: #f2f2f2

.gallery img:hover
  background: white

.gallery-columns-2 .attachment-medium
  max-width: 92%
  height: auto

.gallery-columns-4 .attachment-thumbnail
  max-width: 84%
  height: auto

.gallery .gallery-caption
  color: #888
  font-size: 12px
  margin: 0 0 12px

.gallery dl, .gallery dt
  margin: 0

.gallery br + br
  display: none

/*========================*/
/** Helpers
/*========================*/
.padding-with-color
  padding: 30px
  border: 4px double $padding-with-color-border-color
  background: $padding-with-color-bg-color
figure
 margin: 0
 padding: 0
.grid-ultra
  max-width: 1600px

.is-uppercase
  text-transform: uppercase

.is-600
  font-weight: 600

.img-responsive
  max-width: 100%
  height: auto

.akis-btn
  padding: 5px 20px
  border-style: solid
  letter-spacing: 1px
  font-size: 14px
  @include for-smartphone-only
    padding: 3px 7px
    font-size: 12px
  border-radius: 100px
  display: inline-block
  & .fas
    margin-right: 8px

.is-plain
  color: $plain-btn-color
  border-color: $plain-btn-border-color
  &:hover
    background: $plain-btn-hover-bg-color
    color: $plain-btn-hover-color

.is-plain-inverted
  color: $plain-btn-inverted-color
  background: $plain-btn-inverted-bg-color
  &:hover
    background: transparent
    color: $plain-btn-inverted-hover-bg-color

.is-danger
  color: $danger-btn-color
  background: $danger-btn-bg-color
  border-color: $danger-btn-border-color
  &:hover
    color: $danger-btn-hover-color
    background: $danger-btn-hover-bg-color
    border-color: $danger-btn-hover-border-color

.is-vivid
  background: $vivid-btn-bg-color
  border: 1px solid $vivid-btn-border-color
  color: $vivid-btn-color
  &:hover
    background: $vivid-btn-hover-bg-color
    color: $vivid-btn-hover-color

.has-padding-20
  padding: 20px

.is-regular
  font-weight: 400

.no-margin
  margin: 0

.no-padding
  padding: 0

.is-block
  display: block

.is-inline-block
  display: inline-block

.is-square
  border-radius: 0

.has-border
  border-width: 1px
/*== Mobile Menu Actions ==*/
.mobile-menu-actions
  text-align: right !important
  & li
    margin: 0 8px 0 8px !important
    &:last-child
      margin-right: 0

.top-menu
  margin: 0
  padding: 0

.justwp-sticky
  position: fixed
  width: 100%
  left: 0
  top: 0
  z-index: 100
  border-top: 0
  background: inherit

.transparent-header
  width: 100%
  position: absolute
  z-index: 9999
  border-bottom: none !important

/*=====================*/
/** Header Area        */
/*=====================*/
#header ul
  margin: 0
  padding: 0
  list-style-type: none
  font-size: $main-nav-font-size
  color: $link-color
  font-family: $body-font
  text-align: right
  & li
    display: inline-block
    margin: 0 10px 0 10px
    position: relative
    &:first-child
      margin-left: 0
    &:last-child
      margin-right: 0
    & a
      color: inherit
      font-weight: $main-nav-weight
      padding: 4px 0 4px 0
      border-top: 2px solid transparent
      &:hover
        border-top: 2px solid $link-hover-border-color
        transition: all 0.8s ease-in
    &:hover > ul
      z-index: 9999
      opacity: 1
      visibility: visible
      margin-top: 0
    & ul
      padding: 12px
      background: $submenu-bg
      line-height: $submenu-line-height
      position: absolute
      opacity: 0
      visibility: hidden
      left: -12px
      -webkit-transition: opacity 0.8s linear, margin-left 0.5s linear, margin-top 0.2s linear
      -moz-transition: opacity 0.8s linear, margin-left 0.5s linear, margin-top 0.2s linear
      -ms-transition: opacity 0.8s linear, margin-left 0.5s linear, margin-top 0.2s linear
      -o-transition: opacity 0.8s linear, margin-left 0.5s linear, margin-top 0.2s linear
      transition: opacity 0.8s linear, margin-left 0.5s linear, margin-top 0.2s linear
      & li
        position: relative
        display: block
        float: none
        margin: 0
        & a
          width: 180px
          font-weight: normal
          font-size: 15px
          display: block
          border: none
          text-align: left
          &:hover
            border: none
            color: $submenu-link-hover-color
            -webkit-transition: all 0.2s linear
            -moz-transition: all 0.2s linear
            -ms-transition: all 0.2s linear
            -o-transition: all 0.2s linear
            transition: all 0.2s linear

.mobile-trigger
  font-size: 24px
  font-weight: 900
  padding: 0 10px 0 0

.logo-image
  line-height: 10px
  display: block

.site-title,
.site-tagline
  margin: 0

.site-title
  & a
    font-family: $headings-font
    font-size: $site-title-font-size
    color: $body-font-color

    text-decoration: inherit
    &:hover
      text-shadow: 0 1px 3px rgba(150, 150, 150, 1)

.site-tagline
  color: $body-font-color
  font-size: 0.9em
  line-height: 19px
  font-family: $body-font
  font-weight: 100

/*= Header style specific CSS =*/

#header
  &.header-style-2
    & ul
      text-align: left
/*=== Overlay Search ===*/
#search-overlay
  display: none
  z-index: 99999

.block
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  overflow: auto
  text-align: center
  background: rgba(0, 0, 0, 0.9)
  border: #a0a0a0 solid 1px
  margin: 0
  &:before
    content: ''
    display: inline-block
    height: 100%
    vertical-align: middle
    margin-right: 0
    width: 5px

.centered
  display: inline-block
  vertical-align: middle
  width: 50%
  @include for-mobile-only
    width: 88%
  @include for-smartphone-only
    width: 90%
  padding: 10px 15px
  color: #FFF
  border: none
  background: transparent

#search-box
  position: relative
  width: 100%
  margin: 0

#search-form
  height: 4em
  border: 1px solid #999
  -webkit-border-radius: 2px
  -moz-border-radius: 2px
  border-radius: 2px
  background-color: #fff
  overflow: hidden

#search-text
  font-size: 14px
  color: #ddd
  border-width: 0
  background: transparent

#search-box input[type="text"]
  width: 90%
  @include for-smartphone-only
    width: 100%
  padding: 20px
  color: #333
  outline: none
  font-size: 1.4em
  background: #ffffff

#search-button
  position: absolute
  top: 0
  right: 0
  height: 100%
  width: 100px
  font-size: 14px
  color: #fff
  text-align: center
  line-height: 42px
  border-width: 0
  background-color: $search-overlay-button-bg-color
  -webkit-border-radius: 0 2px 2px 0
  -moz-border-radius: 0 2px 2px 0
  border-radius: 0 2px 2px 0
  cursor: pointer

#close-btn
  position: fixed
  top: 1em
  right: 1em

#close-btn:hover
  color: #777
  cursor: pointer

#cart-overlay
  display: none
  z-index: 9999
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  overflow: auto
  text-align: center
  background: #ffffff

/*======================*/
/** Header Image          */
/*=======================*/
.header-image-container
  position: relative
  background-size: cover !important
  @include for-mobile-only
    height: 350px
  @include for-tablet-up
    height: 500px
  @include for-desktop-only
    height: 760px
  @include for-widescreen-only
    height: 800px
  @include for-widescreen-up
    height: 900px
  image-rendering: -webkit-optimize-contrast
  background-repeat: no-repeat
  background-position: center
  & .header-page-wrapper
    width: 60%
    position: absolute
    left: 10%
    top: 28%
    & h2
      font-size: $hero-font-size
      @include for-fullhd-up
        font-size: 140px
      margin: 0 0 10px 0
      color: $hero-font-color
    & h3
      margin: 0
      @include for-fullhd-up
        font-size: 50px
      font-size: $after-hero-font-size
      font-family: $after-hero-font-family
      font-weight: 900
    & .header-btn
      margin-top: 30px
      display: inline-block
      font-size: 15px
      & .fas
        background: #1E3B82
        border-radius: 50%
        line-height: 28px
        color: #fff
        height: 40px
        font-size: 23px
        width: 40px
        text-align: center
        padding: 6px
        vertical-align: middle
        margin-right: 7px

/*=======================*/
/** Slider Content
/**======================*/
.fs-slider-wrapper
  & .fs-slide
    position: relative
    display: flex
    height: 850px
    @include for-smartphone-only
      height: 250px
    @include for-mobile-only
      height: 300px
    @include for-tablet-only
      height: 600px
    //  height: 520px
    //@include for-mobile-only
    //  height: 480px
    //@include for-smartphone-only
    //  height: 360px
    & .slide-contents
      @include for-smartphone-only
        display: flex
        justify-content: center
        align-items: center
      padding: 40px
      width: 60%
      position: absolute
      left: 10%
      top: 28%
      & h2
        font-size: 100px
        @include for-smartphone-only
          font-size: 20px
          margin: 0
        margin: 0 0 10px 0
        color: #1e3b82
      & h3
        @include for-smartphone-only
          font-size: 14px
          margin: 0
        margin: 0
        font-size: 40px
        font-family: "Muli", sans-serif
        font-weight: 900
      & a
        margin-top: 30px
        display: inline-block
        font-size: 15px
        & .fas
          background: #1E3B82
          border-radius: 50%
          line-height: 28px
          color: #fff
          height: 40px
          font-size: 23px
          width: 40px
          text-align: center
          padding: 6px
          vertical-align: middle
          margin-right: 7px
  & .slick-next
    right: 53px
    @include for-smartphone-only
      right: 30px
    z-index: 999
    height: 25px
    width: 25px
    &:before
      font-size: 65px
      @include for-smartphone-only
        font-size: 30px
  & .slick-prev
    left: 8px
    @include for-smartphone-only
      left: 0
    z-index: 999
    height: 25px
    width: 25px
    &:before
      font-size: 65px
      @include for-smartphone-only
        font-size: 30px

.mobile-slide-contents
  display: flex
  justify-content: center
  align-items: center
  height: 100%
  & h2
    font-size: 18px
    margin: 0 0 4px 0
  & h3
    font-size: 14px
    margin: 3px 0 0 0
  & a
    margin-top: 10px

/*======================*/
/** Main Content        */
/*======================*/
/*= Generic =*/
.section-link
  display: inline-block
  &:after
    content: ''
    display: block
    width: 0
    height: 2px
    background: #000
    transition: width .5s
  &:hover::after
    width: 100%
    transition: width .5s

.heading-container
  position: relative
  margin-bottom: 120px
  @include for-smartphone-only
    margin-bottom: 75px
  @include for-mobile-only
    margin-bottom: 60px
  & h3
    margin: 0
    transform: scale(5)
    @include for-smartphone-only
      transform: scale(2)
    @include for-mobile-only
      transform: scale(3)
    color: rgba(100,100,100,0.2)
  & h4
    margin: 0
    position: absolute
    top: 31%
    right: 0
    left: 0
    font-size: 27px
    @include for-smartphone-only
      font-size: 20px
      position: relative
    @include for-mobile-only
      margin-top: 20px
      position: relative


/*= About home =*/
.about-style-1
  margin-bottom: 60px
  & h2
    margin: 10px 0 10px -49px
    font-size: 53px
    border-top: 10px solid
    display: inline-block
    padding-top: 10px
  & .about-content
    padding: 40px
    width: 46%

.about-style-2
  margin-bottom: 60px
  @include for-smartphone-only
    margin-bottom: 0
  @include for-mobile-only
    margin-bottom: 0
  & .about-content-wrapper
    position: relative
  & .about-content
    width: 70%
    @include for-smartphone-only
      width: 100%
  & .about-image-wrapper
    z-index: 999
    position: relative
    &:before
      content: ''
      position: absolute
      top: -54px
      left: -60px
      height: 59%
      border-left: 17px solid $about-before-content-bg
      width: 50%
      z-index: -1
      border-top: 16px solid $about-before-content-bg
    &:after
      content: ''
      position: absolute
      bottom: -19px
      right: -30px
      height: 59%
      width: 50%
      z-index: -1
      border-bottom: 16px dotted $about-after-content-bg



/*= Home Works / Portfolio */
/*= Team Members =*/
.team-member-content
  & h3
    margin: 0
    font-size: 40px
  & .home-single-member
    margin-bottom: 20px
    & .team-image
      position: relative
      & .member-overlay
        opacity: 0
        height: 96%
        position: absolute
        top: 0
        left: 0
        display: flex
        justify-content: center
        background: $team-overlay-bg
        align-items: center
        width: 100%
        & a
          color: $team-overlay-link-color
          padding: 11px
          border-radius: 50%
          line-height: 10px
          background: transparent
          border: 1px solid $team-overlay-link-border-color
    & h4
      margin: 7px 0 0 0
      font-size: 15px
      font-weight: 400
    & p
      font-size: 12px
      margin: 0
    & .team-job
      line-height: 18px
    &:hover
      & .member-overlay
        opacity: 1
        -webkit-transition: all 400ms ease-out
        -moz-transition: all 400ms ease-out
        -o-transition: all 400ms ease-out
        transition: all 400ms ease-out
        & a:hover
          background: $team-overlay-link-bg-hover-color
          color: $team-overlay-link-hover-color


.blog-item
  margin-bottom: 60px

article
  & h1, h2, h3, h4, h5, h6
    margin: 0 0 20px 0
article h1
  @include for-smartphone-only
    font-size: 28px

.single-item
  & .featured-image-container
      position: relative
      &:before
        @include for-smartphone-only
          display: none
        content: ''
        position: absolute
        top: -54px
        left: -60px
        height: 59%
        border-left: 17px solid $about-before-content-bg
        width: 50%
        z-index: -1
        border-top: 16px solid $about-before-content-bg


.blog-item-meta
  font-family: 'Muli', serif
  font-size: 14px
  color: $blog-item-meta-color
  list-style: none
  padding: 0
  margin: 4px 0
  &:before
    content: ''
    width: 20px
    background: $blog-item-meta-line-color
    height: 2px
    display: inline-block
    vertical-align: middle
  & li
    position: relative
    display: inline-block
    margin: 0
    padding: 0
    &:after
      content: '-'
      margin: 0 3px
    &:last-child:after
      content: ''
    & a
      margin: 0 4px 0 4px
    &:first-child
      margin-left: 0

.comment-reply-link,
.pagination-link
  display: inline-block

.pagination-link
  padding: 3px 8px

.post-pagination
  padding: 10px
  border: 2px dotted #244eb2
  & .columns
      justify-content: center
      align-items: center

/*= Home testimonials =*/
.testimonial-section-content
  & h3
    margin: 0
    font-size: 40px
    @include for-smartphone-only
      font-size: 30px
.single-testimonial-inlist
  position: relative
  padding: 40px
  border-radius: 5px
  & h5
    font-family: 'Muli', serif
    font-size: 14px
    margin: 0
  & .fas
    position: absolute
    top: 10px
    right: 10px
    font-size: 30px
    color: $testimonial-icon-color
  & .testimonial-image
    border-radius: 50%
    padding: 10px


.slick-dots
  display: flex
  justify-content: center
  margin: 0
  padding: 1rem 0
  list-style-type: none
  & li
    margin: 0 0.25rem
    width: 30px
    height: 5px
    background: $testimonial-not-active-color
    &.slick-active
      background: $testimonial-active-color
  & button
    display: block
    width: 1rem
    height: 1rem
    padding: 0
    border: none
    border-radius: 100%
    background-color: blue
    text-indent: -9999px


/*= Homepage Blog content =*/
.ag-home-blog-wrapper
  & article
    margin-bottom: 30px
    text-align: left
    border: 1px solid $blog-item-border-color
    padding: 22px 26px
    background: $blog-item-bg-color
    border-radius: 5px

    & .blog-item-inner-texts
      line-height: $blog-item-line-height
      & h2
        font-size: 20px
        margin: 10px 0
      @include for-smartphone-only
        padding: 5px


.slick-prev:before
  font-family: 'Font Awesome 5 Free', Serif
  content: "\f104"
  font-weight: 600
  font-size: 40px
  background: #1e3b82
  padding: 10px 20px
  @include for-mobile-only
    font-size: 20px
.slick-next:before
  font-family: 'Font Awesome 5 Free', Serif
  content: "\f105"
  font-weight: 600
  font-size: 40px
  background: #1e3b82
  padding: 10px 20px
  @include for-mobile-only
    font-size: 20px
/*======================*/
/*=====================*/
/** Single post */
/*=====================*/
.major-title
  font-weight: 400
  padding: 10px 0
  border-bottom: 1px solid #eee
  & h1
    font-size: 24px
  & p
    margin: 3px 0 0 0
    font-size: 14px

/*======================**/
/** Search Form (Native)
/*=======================*/
#searchform
  & input[type=text]
    border-top: none
    border-left: none
    border-right: none
    border-bottom: 3px solid $search-input-border-color
    padding: 0
  & input[type=submit]
    border: none
    background: $search-submit-bg-color
    color: $search-submit-text-color
    -webkit-border-radius: 3px
    -webkit-border-bottom-left-radius: 0
    -moz-border-radius: 3px
    -moz-border-radius-bottomleft: 0
    border-radius: 3px
    border-bottom-left-radius: 0
/*=====================*/
/** Comments **/
/*=====================*/
.avatar
  height: 64px
  width: 64px

.gravatar
  flex: 3
  & img
    float: right
/* width: 1.6rem; */
.comments-container
  & article
    padding: 15px 20px
    background: $comment-bg
  &.comment-meta
    flex: 2
  & .comment-author-link
    font-size: 16px
    color: $comment-name-color
    font-weight: 900
  & time
    font-size: 13px
    padding: 5px
    background: $comment-name-color
    color: #ffffff
    display: block
    & a
      color: $link-hover
  & .comment-author
    margin: 0
  & .comment-content
    margin: 20px 0 0 0

.comment-form
  & input[type=text], input[type=email], input[type=password], input[type=tel]
    width: 100%
    border: 2px solid #d8d8d8
  & textarea
    width: 100%
    border: 2px solid #d8d8d8
  & input[type=submit]
    padding: 8px 24px
    border: 1px solid #50596C
    color: $text-color
    margin-top: 5px
    display: inline-block
    cursor: pointer
    &:hover
      border: 1px solid #50596c
      color: inherit
      background: $button-hover-color
/*=====================*/
/** Widget Area (Main) + Top Areas*/
/*=====================*/
.widget-area
  padding: 0 8px
  & h3
    margin-bottom: 30px
    font-size: $widget-title-font-size
    font-weight: $widget-title-font-weight
    &:before
      content: ''
      width: 20px
      background: #181b31
      height: 2px
      display: inline-block
      vertical-align: middle
      margin-right: 8px
    &:first-child
      margin-top: 0

.widget-container
  margin-bottom: 50px
  & img
    max-width: 100%
    height: auto
  select, input[type=text], input[type=email]
    width: 100%
    padding: 4px
    border: 1px solid $widget-input-border
  & ul
    padding: 0
    margin: 0
    list-style-type: none
    & li
      padding-bottom: 5px
      line-height: 26px
      border-bottom: 1px solid rgba(100, 100, 100, 0.1)
      margin-top: 16px
      & span.count
        font-size: 12px
      &:first-child
        margin-top: 0
      &:before
        font-family: 'Font Awesome 5 Free', Serif
        content: "\f192"
        margin-right: 6px
        vertical-align: text-top
        color: $link-hover
        font-size: 7px
        font-weight: 900
      & .post-date
        font-size: 12px
        display: block
      & ul.sub-menu
        padding: 0 0 0 8px
      & ul.children
        padding: 0 0 0 8px
        & li
          margin: 0
          border: none
          padding-bottom: 2px
          & a
            font-size: 14px
          &:before
            content: "\f105"
      & a
        color: $link-color
        &:hover
          color: $link-hover
  & #wp-calendar
    width: 100%
    & caption
      padding: 4px 0
      background: rgba(220, 220, 220, 0.2)
    & tfoot tr td a
      padding: 4px
      background: rgba(220, 220, 220, 0.2)
      color: #444444
  & .widget_recent_entries
    font-size: 12px
    display: inline-block
  & .tagcloud
    & a
      padding: 2px 8px
      background: #f4f4f4
      margin: 0 3px 6px 0
      display: inline-block
      border: 1px solid rgba(200, 200, 200, 0.5)
      font-size: 13px !important
      color: $text-color
      &:hover
        background: #eeeeee
        border: 1px solid rgba(200, 200, 200, 1)
/*=====================*/
/** Footer Area        */
/*=====================*/
.footer-area
  background: $footer-bg

.footer-widget
  font-size: $footer-widget-font-size
  line-height: $footer-widget-line-height
  padding: 5px 25px
  @include for-smartphone-only
    text-align: center
    padding: 10px
    margin: 0 0 20px 0 
  & .footer-widget-title
    font-size: $footer-widget-title-font-size
    font-weight: $footer-widget-title-font-weight
    line-height: $footer-widget-title-line-height
    margin: 0 0 30px 0
    &:before
      content: ''
      width: 8px
      height: 8px
      display: inline-block
      vertical-align: text-top
      margin-right: 8px
      border-radius: 50%
  & ul
    margin: 0
    padding: 0
    list-style: none
    & li
      margin: 8px 0
      &:first-child
        margin-top: 0
      & a
        color: $footer-widget-link-color
        &:hover
          color: $link-hover
  .tagcloud a
    padding: 2px 8px
    background: #fefefe
    margin: 0 3px 6px 0
    display: inline-block
    border: 1px solid rgba(200, 200, 200, 0.5)
    font-size: 13px !important
    color: $text-color
    &:hover
      background: #eeeeee
      border: 1px solid rgba(200, 200, 200, 1)

.pink-dot
  &:before
    background: pink
.red-dot
  &:before
    background: red
.green-dot
  &:before
    background: #3ED2A7
.blue-dot
  &:before
    background: #1E3B82

/*=====================*/
/** Copyright Area        */
/*=====================*/
#copyright
  background: $copyright-bg
  color: $copyright-txt
  font-family: $body-font
  font-size: $copyright-font-size
  & p
    margin: 0
  & a
    color: $copyright-link
    &:hover
      color: $copyright-link-hover
  & ul
    list-style-type: none
    margin: 0
    & li
      display: inline-block
      margin: 0 8px 0 0
      &:after
        font-family: 'Font Awesome 5 Free', Serif
        content: "\f111"
        margin-left: 10px
        font-size: 5px
        vertical-align: middle
      &:last-child
        margin-right: 0
      &:last-child:after
        content: ''
        margin-left: 0
  & .social-menu li:after
    content: ''
    margin: 0
  & .social-menu a
    font-size: $copyright-social-size