/*
Theme Name: ospersonality
Theme URI: http://ordasvit.com/wp-ospersonality
Author: Ordasoft
Author URI: http://ordasoft.com/
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ospersonality

Description: ospersonality is responsive and eye-catching WordPress theme. The responsive layout of theme looks great on every device. Theme has great selection of modern Google fonts, options for links, copyright, logo and image background uploader. Also you can display your social profiles and mail simply inserting link in special field (facebook, twitter, skype, google plus and others). It has a lot of custom widget areas to show sidear left or sidebar right and footer content.
Tags: left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready

 Table of Contents:

  1 - Reset
  2 - Header
  3 - Main Menu
  4 - Gallery
  5 - Post Formats
      5.1 - Aside
       5.2 - Audio
       5.3 - Chat
       5.4 - Images
       5.5 - Link
      5.6 - Quote
       5.7 - Status
      5.8 - Video
 6 - Attachments
 7 - Elements ospersonality
 8 - Social links
 9 - Contact us
 10 - Contact us page
 11 - Post page
 12 - Category page
 13 - Сategory item
 14 - Author articles
 15 - Slider
 16 - We provide
 17 - Color switch
 18 - Comment
 19 - Footer
 20 - Copyright
 21 - Responsive
 */
//------------------------mixin----------------------
$dark: #323943;
$white: #fff;
$gray: #CFD9D0;
$orange: #ff6700;
$lilac: #58CEE3;
$blue: #58CEE3;
$green: #39C59F;
$red: #EC1E26;
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}
@mixin transition($time) {
    -webkit-transition: all $time ease-out;
    -moz-transition: all $time ease-out;
    -o-transition: all $time ease-out;
    transition: all $time ease-out;
}
@mixin rotate($deg) {
    transform: rotate($deg);
    -webkit-transform: rotate($deg);
   -moz-transform: rotate($deg);
    -o-transform: rotate($deg);
}
%button {
    padding: 18px 45px;
    color: $white;
    cursor: pointer;
    border: none;
    box-shadow: none;
    text-decoration: none;
    font-size: 0.8em;
    text-transform: uppercase; 
    font-weight: 400;
    margin: 5px 0;
    text-align: center;
}
@mixin  btn-background($btn-background) {
    @extend %button;
    background-color: $btn-background;
    &:hover {
        background-color: $white;
        text-decoration: none;
        color:$btn-background;
    }
}
@mixin input-type {
    @include border-radius(0);
    border: none;
    border-bottom: 2px solid lighten($dark, 60%);
    margin: 10px 0;
    padding: 10px;
    color: lighten($dark, 30%);
}
@mixin respond-to($media) {
    @if $media == w320 {
        @media only screen and (max-width: 320px) { @content; }
    }
    @else if $media == w375 {
        @media screen and (max-width: 375px) { @content; }
    }
    @else if $media == w414 {
        @media screen and (max-width: 414px) { @content; }
    }
    @else if $media == w568 {
        @media screen and (max-width: 568px) { @content; }
    }
    @else if $media == w600 {
        @media screen and (max-width: 600px) { @content; }
    }
    @else if $media == w736 {
        @media screen and (max-width: 736px) { @content; }
    }
    @else if $media == w768 {
        @media screen and (max-width: 768px) { @content; }
    }
    @else if $media == w992 {
        @media screen and (max-width: 992px) { @content; }
    }
    @else if $media == w1024 {
        @media screen and (max-width: 1024px) { @content; }
    }
    @else if $media == w1280 {
        @media screen and (max-width: 1280px) { @content; }
    }
}
/*---------------classes-------------------*/
.text-red {
    color: $orange;
}
/*-----------------------reset---------------------------*/
body img {
    max-width: 100%;
    height: auto;
}
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,nav,section,summary {display:block;}
audio,canvas,video {display:inline-block;}
audio:not([controls]) {display:none;height:0;}
[hidden] {display:none;}
html {font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
h1,h2,h3,h4,h5,h6 {clear:both;line-height:20px;}
h1 {font-size:46px; line-height: 1em;}
h2 {font-size:30px; line-height: 1em;}
h3 {font-size:24px; line-height: 1em;}
h4 {font-size:20px; line-height: 1em;}
h5 {font-size:18px; line-height: 1em;}
h6 {font-size:16px; line-height: 1em;}
address {font-style:italic;}
abbr[title] {border-bottom:1px dotted;}
b,strong {font-weight:bold;}
dfn {font-style:italic;}
mark {background:#ff0;color:#000;}
p {margin:0; padding: 0; font-weight: 400;}
code,kbd,pre,samp {font-family:monospace,serif;font-size:14px;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}
pre {background:#f5f5f5;color:#666;font-family:monospace;font-size:14px;margin:20px 0;overflow:auto;padding:20px;
    white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
blockquote,q {-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:"";content:none;}
blockquote {
    font-size:18px;
    font-style:italic;
    font-weight:300;
    margin:24px 40px;
    border-left:5px solid $orange;
}
blockquote blockquote {margin-right:0;}
blockquote cite,blockquote small {font-size:14px;font-weight:normal;text-transform:uppercase;}
blockquote em,blockquote i {font-style:normal;font-weight:300;}
blockquote strong,blockquote b {font-weight:400;}
small {font-size:smaller;}
sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
dl {margin:0 0px;}
dt {font-weight:bold;}
dd {margin:0 0 20px;}
menu,ol,ul {margin: 0;padding:0;}
ul {list-style-type:square;}
nav ul,nav ol {list-style:none;list-style-image:none;}
li > ul,
li > ol {
    margin: 0 0 0 30px;
}
img {-ms-interpolation-mode:bicubic;border:0;vertical-align:middle;}
svg:not(:root) {overflow:hidden;}
figure {margin:0;}
form {margin:0;}
fieldset {border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend {border:0;padding:0;white-space:normal;}
button,input,select,textarea {font-size:100%;margin:0;max-width:100%;vertical-align:baseline;}
button,input {line-height:normal;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled] {cursor:default;}
input[type="checkbox"],input[type="radio"] {padding:0;}
input[type="search"] {-webkit-appearance:textfield;padding-right:2px;/*Don't cut off the webkit search cancel button*/width:270px;}
input[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner {border:0;padding:0;}
textarea {overflow:auto;vertical-align:top;}
table {border-bottom:1px solid #ededed;border-collapse:collapse;border-spacing:0;font-size:14px;line-height:2;margin:0 0 20px;width:100%;}
caption,th,td {font-weight:normal;text-align:left;}
caption {font-size:16px;margin:20px 0;}
th {font-weight:bold;text-transform:uppercase;}
td {border-top:1px solid #ededed;padding:6px 10px 6px 0;}
del {color:#333;}
ins {background:#fff9c0;text-decoration:none;}
hr {background:url(images/dotted-line.png) repeat center top;background-size:4px 4px;border:0;height:1px;margin:0 0 24px;}
body {height:100%;}
* {
    outline: none;
}
a:hover {
    text-decoration: none;
}
body {
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    word-wrap: break-word;
    @media (max-width: 768px){
       overflow-x: hidden;
    }
}
body a {
    color: $orange;
}
.bypostauthor,
.sticky {
 margin: 0;
}
.inveiw {
  opacity: 1;
}
.outveiw {
  opacity: 0;
}
.row{
    margin: 0 !important;
}
.col-lg-12 {
    padding: 0 !important;
}
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.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;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.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;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    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. */
}
/*-----------------------------------menu theme----------------------------------------------*/

#primary-navigation .nav-menu ul li.page_item_has_children {
    position: relative;
}
#primary-navigation .nav-menu ul li.page_item_has_children:after {
    content: '\f107';
    display: inline-block;
    font-family: "Ionicons";
    color: #ffffff;
    font-size: 1em;
    position: absolute;
    top: 39%;
    right: 0px;
}
#primary-navigation .nav-menu ul li.page_item_has_children .children{
    position: absolute;
    display: none;
    width: 250px;
    left: 0;
    margin: 0;
    z-index: 999;
}
#primary-navigation .nav-menu ul li.page_item_has_children .children > li.page_item_has_children > .children {
    position: absolute;
    display: none;
    width: 250px;
    left: 100%;
    margin: 0;
    z-index: 999;
}
#primary-navigation .nav-menu ul li.page_item_has_children .children li {
    margin: 0;
    padding: 0;
    text-align: left;
}
#primary-navigation .nav-menu ul li.page_item_has_children .children li a {
    margin: 0;
    padding: 15px 10px;
    width: auto;
}
#primary-navigation .nav-menu ul li.page_item_has_children .children li:before {
    display: none;
}
.comment {
    list-style: none;
}
.comments-title {
    line-height: 1em;
}


/*------------------menus-------------------*/

/* menu appearance*/
.for-menu {
    background: transparent;
    text-align: center;
    .site-title {
        margin-top: 100px;
        a {
            color: $dark; 
        }    
    }
    .site-description {
        color: $orange; 
    }
    img {
        margin-top: 50px; 
    }
}

#navbar {
    border-radius: 0;
    text-align: center;
    margin: 0;
    border-bottom: 3px solid $orange; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    height: 60px;
    @include respond-to(w768) {
        min-height: 1px !important;
        margin: 0;
        text-align: left;
    }
}
#navbar li, #navbar li a {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}
#menu-menu {
    text-align: center;
    display: inline-block;
    margin: 0 auto;
}
#navbar li {
    @include respond-to(w768) { display: block; }
    padding: 0;
    margin: 0 !important;
    border-left: 1px solid darken($dark, 100%);
    border-right: 1px solid rgba($white, 0.05); 
    float: left;
    &:first-child{
        border-left: none; 
    }
    &:last-child {
        border-right: none;
    }
    &:hover {
        background: lighten($dark, 5%); 
    }
    .sub-menu {
        li {
            padding: 5px;
        }
    }
}
#navbar .current-menu-item {
    background: lighten($dark, 5%);
    a {
        color: $orange !important;
    }
}
#navbar li {
   @include respond-to(w1024) { margin: 4px 9px !important;}
   @include respond-to(w768) { margin: 4px 20px !important;}
}
#navbar li a {
    font-weight: 400;
    padding: 20px 25px;
    text-decoration: none;
    transition: all .2s;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    @include respond-to(w768) {
        padding: 10px; 
    }
}

.primary-navigation {
    .menu-toggle {
        display: none;
        padding: 0;
        float: right;
        border: none;
        background: transparent;
        @include respond-to(w1024) { display: block;}
        @include respond-to(w768) {
            position: absolute;
            right: 10px;
            top: -55px;
        }
        i {
            color: $orange;
            font-size: 2.5em;
        }
    }
}
.primary-navigation .nav-menu {
    @include respond-to(w768) { display: none;}
}

/*-------------------------------------------------------------------toggled-menu-------------------------------------------------------------------------------*/
.primary-navigation.toggled-on .nav-menu {
    display: block;
    position: absolute;
    width: 100%;
    left: auto;
    top: 5px;
    right: 0px;
    z-index: 99;
    background: rgba($dark, 0.8);
    @include respond-to(w768) {
        background: $white;
        border: 1px solid $orange;  
    }
}

.for-menu-fixed {
    #navbar {
        #primary-navigation.toggled-on {
            .nav-menu {
                //overflow-y: scroll;
                li {
                    a {
                        color:$white !important;
                    }
                }
            }
        }
    }
}


#menu-menu .menu-item-has-children:hover .sub-menu {
    display: block;
}


#menu-menu {
    .menu-item-has-children {
        position: relative;
        &:after {
            content: '\f107';
            display: inline-block;
            font-family: "FontAwesome";
            color: $white;
            font-size: 1em;
            position: absolute;
            top: 16px;
            right: 6px;
            cursor: pointer;
                @include respond-to(w768) {
                    top: 7px;
                    left: 0px;
                }
            }
        .sub-menu {
            display: none;
            width: 250px;
            top: 96%;
            position: absolute;
            z-index: 102;
            background: lighten($dark, 5%);
            text-align: left;
            margin: 0;
            left: 0;
            @include respond-to(w1024) { top: 105%;}
            @include respond-to(w768) {
                position: static;
                width: 100%;
                margin: 0;
                border-top: 1px solid $white;
                border-bottom: 1px solid $white;
            }
             li.menu-item-has-children  {
                .sub-menu {
                    display: none;
                    position: absolute;
                    top: -3px;
                    right: 100%;
                }
                &:hover .sub-menu {
                    display: block;
                }
            }
             li {
                display: block;
                margin: 5px;
                border: none;
                float: none;
                  a {
                    font-size: 13px !important;
                    padding:  5px;
                  }
             }
        }
    }
}
/*--------------img animation---------------*/
// @keyframes scaler {
//   0% {
//     transform: scale(1);
//   }
//   50% {
//     transform: scale(1.2);
//   }
//   100% {
//     transform: scale(1);
//   }
// }
@-webkit-keyframes scaler {
  0% {
     -webkit-transform: translate3d(0px, 0px, 0px) scale(1);
     -moz-transform: translate3d(0px, 0px, 0px) scale(1);
    transform-origin: center right;
    -webkit-transform-origin: center right;
    -moz-transform-origin: center right;
  }
  47% {
     -webkit-transform: translate3d(0px, 20px, 0px) scale(1.1);
     -moz-transform: translate3d(0px, 20px, 0px) scale(1.1);
    transform-origin: center right;
    -webkit-transform-origin: center right;
    -moz-transform-origin: center right;
    opacity: 1;
  }
  48% {
     -webkit-transform: translate3d(0px, 20px, 0px) opacity(1.1);
     -moz-transform: translate3d(0px, 20px, 0px) scale(1.1);
    transform-origin: center right;
    -webkit-transform-origin: center right;
    -moz-transform-origin: center right;
    opacity: 0.3;
  }
  50% {
     -webkit-transform: translate3d(50px, 30px, 0px) scale(1.1);
     -moz-transform: translate3d(50px, 30px, 0px) scale(1.1);
    transform-origin: center right;
    -webkit-transform-origin: center right;
    -moz-transform-origin: center right;
    opacity: 1;
  }
  100% {
     -webkit-transform: translate3d(0px, 0px, 0px) scale(1);
     -moz-transform: translate3d(0px, 0px, 0px) scale(1);
    transform-origin: center right;
    -webkit-transform-origin: center right;
    -moz-transform-origin: center right;
  }
}

/*------------------arrow move---------------*/
@-webkit-keyframes arrow {
  0% {
    margin-top: -5px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes arrow {
  0% {
    margin-top: -5px;
  }
  100% {
    margin-top: 0px;
  }
}
/*--------------------------header---------------------------*/

.site-title {
    font-size: 42px;
    margin-top: 0;
}
#header {
    position: relative;
    margin: 0;
    background: $dark;
    .header-social {
        height: 55px;
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        text-align: center;
        ul {
            list-style: none;
            margin: 5px 0; 
            li {
                display: inline-block;
                background: $orange;
                @include border-radius(50%);
                a {
                    font-family: Cabin, sans-serif; 
                }
                
            }
            .facebook {
                padding: 5px 15.4px;
            }
            .linkedin,
            .instagram,
            .vimeo,
            .skype {
                padding: 5px 11.8px;
            }
            .google {
                padding: 5px 6.4px;
            }
            .youtube {
                padding: 5px 10px;
            }
        }
    }
    .header-top {
        height: 300px;
        -webkit-background-size: cover; 
         -o-background-size: cover; 
         background-size: cover;  
        background-position: center;
        position: relative;
        .overlay-header {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba($white, 0.50);   
            ul {
                height: 100%; 
                li {
                    display: inline-block;
                    width: 20%;
                    height: 100%;
                    float:left; 
                    padding: 0;
                    margin: 0;  
                    border-left: 1px solid $white;
                    -webkit-box-sizing: border-box; 
                    -moz-box-sizing: border-box; 
                    box-sizing: border-box; 
                    &:first-child {
                        border-left: none;
                    }
                }
            }
        }
    }
}




/*--------------all page----------------*/
@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}




#slider {
    height: 400px;
    .swiper-slide {
        -webkit-background-size: 100% !important; 
        -o-background-size: 100% !important; 
        background-size: 100% !important; 
        background-position: center center !important; 
    }
    .swiper-slide-active {
        .slide-content {
            h1 {
               animation: bounceInDown 1.5s 1 alternate ease-in-out;
            -o-animation: bounceInDown 1.5s 1 alternate ease-in-out;
                -ms-animation: bounceInDown 1.5s 1 alternate ease-in-out;
                -webkit-animation: bounceInDown 1.5s 1 alternate ease-in-out;
                -moz-animation: bounceInDown 1.5s 1 alternate ease-in-out;
            }
            .exerpt {
                 animation: zoomIn 1s 1 alternate ease-in-out;
            -o-animation: zoomIn 1s 1 alternate ease-in-out;
                -ms-animation: zoomIn 1s 1 alternate ease-in-out;
                -webkit-animation: zoomIn 1s 1 alternate ease-in-out;
                -moz-animation: zoomIn 1s 1 alternate ease-in-out;
            }
            .more {
                animation: fadeInUp   1s 1 alternate ease-in-out;
            -o-animation: fadeInUp   1s 1 alternate ease-in-out;
                -ms-animation: fadeInUp   1s 1 alternate ease-in-out;
                -webkit-animation: fadeInUp   1s 1 alternate ease-in-out;
                -moz-animation: fadeInUp   1s 1 alternate ease-in-out;
            }
        }
    }
    .swiper-pagination-progress {
        .swiper-pagination-progressbar {
            background: $orange !important; 
        }
    }
    .swiper-button-next {
        bottom: 10px !important;  
        top: auto !important;
        width: 50px !important;
        height: 20px !important;
        background: none; 
        &:after {
            content: "\f105";
            font-family: FontAwesome; 
            display: inline-block;
            color: $white;
            position: absolute;
            background: $orange;
            font-size: 33px;
            padding: 0 20px;
            left: auto;
            bottom: 0px;
            opacity: 0.5;
            @include transition(0.3s);
        }
        &:hover:after {
            opacity: 1;
            @include transition(0.3s);
        }
    }
    .swiper-button-prev {
        bottom: 10px !important;  
        top: auto !important;
        left: auto !important;
        right: 70px !important;
        width: 50px !important;
        height: 20px !important;
        background: none;
        &:after {
            content: "\f104";
            font-family: FontAwesome; 
            display: inline-block;
            color: $white;
            position: absolute;
            background: $orange;
            font-size: 33px;
            padding: 0 20px;
            left: auto;
            bottom: 0px;
            opacity: 0.5;
            @include transition(0.3s);
        }
        &:hover:after {
            opacity: 1;
            @include transition(0.3s);
        }  
    }
    .slide-content {
        position: relative;
        height: 100%;
        h1 {
            color: $white;
            text-align: center;
            text-transform: uppercase;
            padding: 35px 0;
            margin: 0;
            background: rgba($dark, 0.35); 
            line-height: 2em;
        }
        .exerpt {
            color: $orange;
            font-weight: 400;
            padding: 15px;
            background: rgba($white, 0.8);   
        }
        .more {
            position: absolute;
            bottom: 24px;
            left: 10px;
            .more-button {
                @include btn-background($orange);
                padding: 17px 20px;
                 
            }  
        }
    }
}


#home-content {
    //height: 350px;
    text-align: left;
    padding: 2% 0 0 5%;
    .content-block {
        position: relative;
        &:before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 100%;
            background: $dark;
            position: absolute;
            left: -20px;    
        }
        p {
            color: $orange; 
        }
    }
}

#subscribe-position {
    .textwidget {
        background: $orange;
        margin: 50px 0; 
        text-align: center; 
        i {
            color: $white;
            font-size: 4em;
            margin: 4px 0;
        }
    }
    .widget_newsletter_widget {
        #subscribe-form {
            padding: 15px 0;
            #subscriber-email {
                padding: 10px;
                width: 70%;
                border: 1px solid $dark;
            }
            #sub-submit {
                @include btn-background($orange);
                @include transition(0.3s);
                padding: 14px 0 12px 0;
                width: 29%;
                &:hover {
                    background: darken($orange,30%);
                    color: $white;  
                }
            }
        }
    }
}

#content-top {
    margin: 75px 0;
    text-align: center;
    h3 {
        font-size: 2.5em; 
        line-height: 2em; 
    } 
    .textwidget {
        font-size: 1em;
        font-weight: 400;
        color: $orange;   
    }
}

#main,
#page {
    //padding: 0 25px;
    min-height: 500px;
}


/*-------------------blog-content-----------------------*/

.blog-content {
    .blog-title {
        position: relative;
        margin-bottom: 50px;  
        &:before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 100%;
            background: $dark;
            position: absolute;
            left: -20px;    
        }
        h1 {
            text-transform: uppercase;
        }
        p {
            color: $orange; 
        }
    }
    .accordion {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      color: $dark;
      overflow: hidden;
      position: relative;
      cursor: crosshair;
      
      .first-post {
          background-attachment: fixed !important;
      }
      .accordion-body {
          background-size: 100% !important;
          background-position: center center !important;
          overflow: hidden;
          position: relative;
          margin-bottom: 20px !important; 
            &:after {
                position: absolute;
                display: inline-block;
                content: '';
                width: 100%;
                height: 100%;
                left: 0px;
                top: 0;
                pointer-events: none;
                z-index: 1;
                background-color: rgba($white, 0.6);
                -webkit-transition: all 0.3s ease-out;
                -moz-transition: all 0.3s ease-out;
                -o-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
            }
            .overlay-header {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                //background: rgba($white, 0.80);   
                ul {
                    height: 100%; 
                    li {
                        display: inline-block;
                        width: 20%;
                        height: 100%;
                        float:left; 
                        padding: 0;
                        margin: 0;  
                        border-left: 1px solid rgba($white, 0.2);
                        -webkit-box-sizing: border-box; 
                        -moz-box-sizing: border-box; 
                        box-sizing: border-box; 
                        &:first-child {
                            border-left: none;
                        }
                    }
                }
            }
            .date-body {
                text-align: center;
                display: inline-block;
                h2 {
                    font-family: inherit;
                    font-size: 4em;
                    font-weight: 400;
                    color: $dark;
                    line-height: 50px;
                    text-transform: none;
                }
                h5 {
                    font-family: inherit;
                    font-size: 1.5em;
                    font-weight: 900;
                    color: $dark;
                    line-height: 25px;
                    text-transform: none;
                }
            }
            .accord-content {
                height: 350px;
                padding: 7% 25px 0 5%;
                overflow: hidden;
                position: relative;
                -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
                filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
                -moz-opacity: 1;
                -khtml-opacity: 1;
                -webkit-opacity: 1;
                -o-opacity: 1;
                opacity: 1;
                -webkit-transition: height 0.3s 0s ease-in-out, padding 0.3s 0s ease-in-out, opacity 0.3s 0.2s ease-in-out;
                -moz-transition: height 0.3s 0s ease-in-out, padding 0.3s 0s ease-in-out, opacity 0.3s 0.2s ease-in-out;
                -o-transition: height 0.3s 0s ease-in-out, padding 0.3s 0s ease-in-out, opacity 0.3s 0.2s ease-in-out;
                transition: height 0.3s 0s ease-in-out, padding 0.3s 0s ease-in-out, opacity 0.3s 0.2s ease-in-out;
                @include respond-to(w375) {
                    height: 395px; 
                }
                @include respond-to(w320) {
                    height: 445px;
                }
                .cat-body {
                  position: relative;
                  z-index: 99;
                  padding: 15px;
                  font-weight: 400;
                  line-height: 25px;
                  color: $dark;
                }
                .link-blog {
                  display: block;
                  text-align: center;
                    a {
                    @include btn-background($orange);
                      display: inline-block;
                      float: left;
                      margin: 0 0 0 15px;
                      padding: 15px 20px;
                      position: relative;
                      font-family: inherit;
                      font-size: 0.8125em;
                      font-weight: 400;
                      color: $dark;
                      line-height: inherit;
                      text-transform: uppercase;
                      @include transition(0.3s);
                      z-index: 99;
                      &:hover {
                          text-decoration: none;
                        }

                    }
                }
            }
            .accord-header {
                height: 150px;
                &:before,
                &:after {
                  content: "";
                  display: table;
                  clear: both;
                }
                .cat-title {
                  font-family: inherit;
                  font-size: 25px;
                  font-weight: bold;
                  color: #dark;
                  line-height: 110px;
                  text-transform: uppercase;
                }
                .date {
                  text-align: center;
                }
            }
            .accord-header,
            .date-body,
            .cat-title {
              position: relative;
              z-index: 99;
            }
            .date-body {
              h2 {
                  color: $orange; 
              }
            }
        }
        .accord-body--close {
           &:after {
              background-color: rgba($white, 0.2);
            } 
            .accord-content {
              height: 0px;
              padding-top: 0px;
              padding-bottom: 0px;
              -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
              filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
              -moz-opacity: 0;
              -khtml-opacity: 0;
              -webkit-opacity: 0;
              -o-opacity: 0;
              opacity: 0;
            }
            .date-body {
                // h2 {
                //     color: $orange;
                // }
                // h5 {
                //     color: $white;
                // }
            }
            .accord-header {
                .cat-title {
                  //color: $white;
                }
            }
            .accord-content {
                .cat-body {
                  //color: $white;
                }
                .link-blog {
                    a {
                      //color: $white;
                    }
                }
            }
        }

    }
}


.category-content,
.blog {
    .loop-item {
        display: inline-block;
        float: left;
        .post-block {
            margin: 10px;
            border: 1px solid lighten($dark, 65%);
            .img-block {
                img {
                   max-height: 235px;
                   @include respond-to(w768) {
                        max-height: 150px;
                    }
                }  
            }
            .post {
                .entry-title {
                    font-size: 1.6em;
                    line-height: 1em;
                    font-weight: 400;
                    margin: 10px;   
                }
                .exerpt {
                    padding: 10px;
                    text-align: justify;
                    text-indent: 10px;  
                }
                .more {
                    text-align: right;
                    margin: 10px; 
                }
            }
        }
    }
}

/*-----------------------------services-------------------------*/
#services {
    margin-top: 50px;
    @include respond-to(w768) {
        height: 1025px; 
    }
    @include respond-to(w600) {
        height: 1075px; 
    }
    @include respond-to(w568) {
        height: 1125px; 
    }
    @include respond-to(w414) {
        height: 1650px; 
    }
    .services-title {
        position: relative;
        margin-bottom: 50px;  
        &:before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 100%;
            background: $dark;
            position: absolute;
            left: -20px;    
        }
        h1 {
            text-transform: uppercase;
        }
        p {
            color: $orange; 
        }  
    }
    .show-services-w {
        height: 400px;
        li {
            display: inline-block;
            float: left;
            width: 20%;
            text-align: center;
            padding: 0 20px;
            @include respond-to(w768) {
                width: 50%;
                &:last-child {
                    width: 100%; 
                }
            }
            @include respond-to(w414) {
                width: 100%; 
            }
            .one-service {
                .entry-title {
                    position: relative;
                    text-transform: uppercase;
                    &:before {
                        content: '';
                        display: inline-block;
                        width: 3px;
                        height: 100%;
                        background: $dark;
                        position: absolute;
                        left: 0;
                    }
                }
                i {
                    padding: 25px;
                    margin: 15px 0; 
                    color: $orange;
                    font-size: 4em;   
                }
                .fa-android,
                .fa-user-secret {
                    padding: 50px 56px;
                }
            } 
        }
    }
}

#shop-section {
    margin: 0 0 75px 0;
    height: 445px; 
    .shop-title {
        position: relative;
        margin-bottom: 50px;  
        
        &:before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 100%;
            background: $dark;
            position: absolute;
            left: -20px;    
        }
        h1 {
            text-transform: uppercase;
        }
        p {
            color: $orange; 
        }    
    }
    .store {
        .products-list {
            padding: 0 10px; 
            .product-item {
                position: relative;
                display: inline-block;
                float: left;
                text-align: center;
                width: 25%;
                padding: 0 10px;
                @include respond-to(w768) {
                    width: 50%; 
                }
                @include respond-to(w414) {
                    width: 100%; 
                }
                .product-body {
                    position: relative;
                    background: lighten($dark, 70%);
                    &:hover .add_to_cart_button {
                        @include transition(0.3s);
                        opacity: 1; 
                    } 
                    .onsale {
                        position: absolute;
                        left: -3px;
                        top: -2px;
                        background: url("images/sale.png") no-repeat;
                        color: transparent;
                        font-size: 0px;
                        display: inline-block;
                        width: 60px;
                        height: 60px;
                        -webkit-background-size: 100%; 
                           -o-background-size: 100%; 
                           background-size: 100%;    
                    }
                    .add_to_cart_button {
                        color: transparent;
                        font-size: 0px;
                        background: none;
                        padding: 0;
                        margin: 0; 
                        position: absolute;
                        bottom: 0;
                        right: 0px;
                        opacity: 0.5;  
                        @include transition(0.3s);
                        &:before {
                            content: "\f290";
                            display: inline-block;
                            color: $white;
                            font-size: 20px;
                            font-family: FontAwesome; 
                            padding: 10px 15px;
                            background: $orange;  
                        }     
                    }
                    .added_to_cart {
                        color: transparent;
                        font-size: 0px;
                        background: none;
                        padding: 0;
                        margin: 0; 
                        position: absolute;
                        bottom: 0;
                        right: 0px;
                        @include transition(0.3s);
                        &:before {
                            content: "\f00c";
                            display: inline-block;
                            color: $white;
                            font-size: 20px;
                            font-family: FontAwesome; 
                            padding: 10px 15px;
                            background: lighten($dark, 30%);  
                        } 
                    }
                    .footer-product {
                        padding: 15px; 
                        .product-title {
                            text-decoration: none;
                            &:hover, &:active {
                                text-decoration: none;
                            }
                            h3 {
                                margin: 0;
                                font-size: 1.2em;
                                text-align: left;
                                font-weight: 400; 
                            }
                        }
                        .bottom-line {
                            display: block;
                            height: 1px;
                            background: $orange;
                            margin: 15px 50% 15px 0;   
                        }
                        .price {
                            display: block;
                            text-align: left;
                            ins {
                                background: transparent; 
                                span {
                                    color: $orange;
                                    font-weight: 700; 
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}

#info-block {
    margin: 75px 0; 
    .info-title {
        position: relative;
        margin-bottom: 50px;        
        &:before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 100%;
            background: $dark;
            position: absolute;
            left: -20px;    
        }
        h1 {
            text-transform: uppercase;
        }
        p {
            color: $orange; 
        }
    }
    .info-bg {
        background: $orange;
        padding: 25px 0;
        .blocks {
            i {
                font-size: 4em;
                margin: 20px;
            }
            .title-blocks {
                display: block;
                position: relative;
                text-transform: uppercase;
                font-weight: 400;   
                color: $dark;   
                &:before {
                    content: '';
                    display: inline-block;
                    width: 3px;
                    height: 100%;
                    background: $dark;
                    position: absolute;
                    left: -20px;    
                }
            }
            .text-blocks {
                color: $white;
                padding: 15px 15px 0 0;
                display: block;
                font-weight: 400;
            }
        }  
    }
}

#any-section {
    margin: 75px 0 0 0; 
    .any-title {
        position: relative;
        margin-bottom: 50px;        
        &:before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 100%;
            background: $dark;
            position: absolute;
            left: -20px;    
        }
        h1 {
            text-transform: uppercase;
        }
        p {
            color: $orange; 
        }
    }
    .contact-bg {
        background: url("images/contact-bg.jpg") no-repeat;
        background-attachment: fixed;
        background-size: 100%;
        background-position: center center; 
        height: 500px;
        position: relative;
        padding: 35px; 
        @include respond-to(w768) {
            padding: 35px 0; 
        }
        .overlay {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #FFF;
            background: linear-gradient( to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF',GradientType=0 );
            ul {
                height: 100%; 
                li {
                    display: inline-block;
                    width: 20%;
                    height: 100%;
                    float:left; 
                    padding: 0;
                    margin: 0;  
                    border-left: 1px solid rgba($white,0.3);
                    -webkit-box-sizing: border-box; 
                    -moz-box-sizing: border-box; 
                    box-sizing: border-box; 
                    &:first-child {
                        border-left: none;
                    }
                }
            }
        }
        form {
            .contact-input {
                text-align: center;
                input {
                    border: none;
                    background: transparent;
                    border-bottom: 1px solid $dark;
                    padding: 5px; 
                } 
                textarea {
                    border: none;
                    background: transparent;
                    border-bottom: 1px solid $dark;
                    padding: 5px;
                    height: 100px;
                    margin: 20px 10px;
                    width: 75%;
                } 
                input[type="submit"] {
                    @include btn-background($orange);
                    @include transition(0.3s);
                    padding: 14px 0 12px 0;
                    width: 29%;
                    &:hover {
                        background: darken($orange,30%);
                        color: $white;  
                    }
                }
            }
            
        }
    }
}



@-webkit-keyframes hover {
    from {
        -webkit-transform: translate3d(0px, 0px, 0px);
     -moz-transform: translate3d(0px, 0px, 0px); 
    }
     to {
        -webkit-transform: translate3d(50px, 0px, 0px);
     -moz-transform: translate3d(50px, 0px, 0px);
     }
}
.archive-content,
.search-content,
.tag-content,
.category-content,
.blog,
.search-content {
    position: relative;
    height: auto !important;
    overflow: hidden;
    .loop-item {
        position: static !important;
    }
}
.archive-content,
.search-content,
.tag-content,
.category-content,
.blog,
.blog-content {
    // position: relative;
    // height: 100vh;
    // overflow: hidden;
}

/*-----------------------home-content-----------------------------*/

/*-------------------------------footer----------------------------------*/

#footer {
    height: 75px;
    @include respond-to(w414) {
        height: 100px;
    }
    #copyright {
        text-align: center;
        padding: 15px 0;
        font-weight: 100;
        @include respond-to(w414) {
            padding: 15px;
        }
        @include respond-to(w375) {
            padding: 25px;
        }
    }
}


/*---------------------------page prelouder---------------------------------*/


.cssload-loader {
    width: 244px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    position: absolute;
    left: 50%;
    top:45%;
    transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
    font-family: helvetica, arial, sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    font-size:18px;
    color: $white;
    letter-spacing: 0.2em;
}
.cssload-loader::before, .cssload-loader::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: $dark;
    position: absolute;
    animation: cssload-load 0.81s infinite alternate ease-in-out;
        -o-animation: cssload-load 0.81s infinite alternate ease-in-out;
        -ms-animation: cssload-load 0.81s infinite alternate ease-in-out;
        -webkit-animation: cssload-load 0.81s infinite alternate ease-in-out;
        -moz-animation: cssload-load 0.81s infinite alternate ease-in-out;
}
.cssload-loader::before {
    top: 0;
}
.cssload-loader::after {
    bottom: 0;
}



@keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 229px;
        height: 29px;
        width: 15px;
    }
}

@-o-keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 229px;
        height: 29px;
        width: 15px;
    }
}

@-ms-keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 229px;
        height: 29px;
        width: 15px;
    }
}

@-webkit-keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 229px;
        height: 29px;
        width: 15px;
    }
}

@-moz-keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 229px;
        height: 29px;
        width: 15px;
    }
}
#page-preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: $orange;
    z-index: 100500;
}


/*----------------page titles----------------*/
#archive,
#search,
#tag,
#category,
#page,
#single,
#blog-sidebar {
    .page-title {
        position: relative;
        margin: 50px; 
        text-transform: uppercase; 
        color: $dark !important; 
        &:before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 100%;
            background: $dark;
            position: absolute;
            left: -20px;    
        }
    }
}


/*--------------------------sidebar----------------------------------*/
.sidebar {
    background: rgba($dark, 0.85);
    padding: 15px;
    color: $white;
    .widget_title {
        margin: 0;
        text-align: center;
        text-transform: uppercase;
        color: $white;
        padding: 20px 0;
    }
    .woof_sid_widget {
        .price_slider {
            background-color: $orange;
            .ui-slider-range {
                background-color: $orange !important;
            }
            .ui-slider-handle {
                background-color: $orange !important; 
            }
        }
    }
    .product_list_widget {
        li {
            border-bottom: 1px solid $white;
            padding: 10px !important;
            margin-bottom: 10px !important;
            &:last-child {
                border-bottom: none;
            }  
            img {
                width: 75px !important;
            }
            .product-title {
                color: $white;
                font-size: 1.2em;
            }
            .star-rating {
                display: none;
            }
            ins {
                background: transparent; 
            }
        }
    }
    .searchform {
        input {
            @include input-type;
            width: 100%;
        }
        input[type="submit"] {
            @include btn-background($orange);
            @include transition(0.3s);
        }
    }
    ul {
        list-style: none;
        li {
            padding: 5px 0;
            a {
                color: lighten($dark, 50%);
            }
        }
    }
}


/*-----------------------------------------------------------------------------single------------------------------------------------------------------*/

#single {
    padding: 75px 25px 0 25px;
    min-height: 450px;
    .content {
        .entry-title {
            color: $dark;
            text-align: center;
            text-transform: uppercase;
            font-size: 2em;
            margin: 0 0 25px 0;
            z-index: 11;
            line-height: 1em;
        }
        .entry-content {
            .entry-thumbnail {
                text-align: center;
            }
            p {
                padding: 20px 10px;
                font-size: 0.9em;
                line-height: 2em;
                font-weight: 400;
                text-align: justify;
                text-indent: 15px;
            }
        }
        .entry-meta {
            .date,
            .comments-link,
            .tags-links,
            .author,
            .categories-links {
                display: inline-block;
                width: 50%;
                float: left;
                padding: 10px;
                border-top: 1px solid lighten($dark, 70%);
                i {
                    color: lighten($orange, 20%);
                    padding: 0 8px 0 0;
                }
                a {
                    color: lighten($dark, 40%);
                    font-style: italic;
                    font-weight: 400;
                    font-size: 0.8em;
                    &:hover {
                        color: $orange;
                        text-decoration: underline;
                    }
                }
            }
            .comments-link {
                border-bottom: 1px solid lighten($dark, 70%);
                width: 100%;
            }
        }
    }
}


/*----------------------------------------------------------------------------comment form------------------------------------------------------------------------*/

#respond {
    #reply-title {
        color: $dark;
        text-align: center;
        text-transform: uppercase;
        font-size: 2em;
        margin: 20px 0;
        line-height: 1em;
    }
    #commentform {
        .comment-notes {
            color: lighten($dark, 30%);
            font-size: 0.8em;
            padding: 5px;
        }
        textarea {
            @include input-type;
            background: transparent;
            height: 150px;
        }
        input {
            @include input-type;
            background: transparent;
        }
        input[type="submit"] {
            @include btn-background($orange);
            @include transition(0.3s);
        }
    }
}


/*----------------------------------------------------------------------------------post-navigation--------------------------------------------------------------------*/

.post-navigation {
    text-align: center;
    padding: 20px 0;
    .nav-links {
        a {
            color: lighten($dark, 40%);
            font-style: italic;
            font-weight: 400;
            font-size: 0.8em;
            margin: 0 10px;
            &:hover {
                color: $orange;
                text-decoration: underline;
            }
        }
    }
}


/*--------------------------------------------------------------------------------sidebar-fixed-------------------------------------------------------------------------*/

.sidebar-fixed {
    position: fixed;
    top:45px;
    width: 22%;
}
body.admin-bar {
    .sidebar-fixed {
        top:77px;
    }
}


/*------------------------------------------------------------------------------------about us page-----------------------------------------------------------------------------*/
#about-us {
    margin-bottom: 25px;
    #about-intro {
        h2 {
            color: lighten($dark, 30%);
            text-transform: uppercase;
            font-size: 2em;
            margin: 20px 0;
            line-height: 1em;
        }
    }
    .panorama {
        text-align: center;
       p {
            padding: 20px 10px;
            font-size: 0.9em;
            line-height: 2em;
            font-weight: 400;
            text-align: justify;
            text-indent: 15px;
       }
       .dir {
            text-align: right;
            color: lighten($orange, 10%);
            padding: 0 8px 0 0;
       }
    }
    blockquote {
        font-weight: 400;
    }
    
    #skillset {
        padding: 20px 10px;
        font-size: 0.9em;
        line-height: 2em;
        font-weight: 400;
        text-align: justify;
        text-indent: 15px;
        h2 {
            color: lighten($dark, 30%);
            text-transform: uppercase;
            font-size: 2em;
            margin: 20px 0;
            line-height: 1em;
        }
        ul {
            list-style-position: inside;
        }
    }
}


#team {
    text-align: center;
    padding: 15px;
    margin: 20px 0 0 0;
    background: lighten($gray, 70%);
    border: 1px  solid lighten($gray, 50%);
    h2 {
        color: lighten($dark, 30%);
        text-transform: uppercase;
        font-size: 2em;
        margin: 20px 0;
        line-height: 1em;
    }
    ul {
        list-style: none;
        li {
            display: inline-block;
            figure {
                margin: 0 0 20px 0;
            }
            p {
                padding: 20px 10px;
                font-size: 0.9em;
                line-height: 2em;
                font-weight: 400;
                text-align: justify;
                text-indent: 15px;
                text-align: center;
            }
            .team_name {
                border-bottom: 1px solid lighten($dark, 70%);
            }
        }
    }
}
/*----------faq------------------------*/
#accordion {
    .panel-title {
        color: lighten($dark, 30%);
        text-transform: uppercase;
        font-size: 2em;
        margin: 20px 0;
        line-height: 1em;
    }
    .panel-body {
        padding: 20px;
        font-size: 0.9em;
        line-height: 2em;
        font-weight: 400;
        text-align: justify;
        text-indent: 15px;
    } 
}


/*-------gallery---------------------*/

#page {
    .gallery {
        margin-bottom: 50px; 
        .gallery-item {
            margin: 0 !important;
            position: relative;
            &:before {
                pointer-events: none;
                position: absolute;
                content: '';
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                //background: rgba($orange,0.3); 
                @include transition(0.2s);
            }
            &:hover:before {
                background: rgba($orange,0.7);
                @include transition(0.2s);
            }
            a {
                &:after {
                    content: "\f0b2";
                    display: inline-block;
                    font-family: FontAwesome;
                    font-size: 25px;
                    position: absolute;
                    left: 10px;
                    bottom: 10px;
                    color: $white;
                    opacity: 0.5;
                    @include transition(0.2s);      
                }
                &:hover:after {
                    opacity: 1;
                    @include transition(0.2s);
                    font-size: 35px;  
                }
                
                img {
                    border: 1px solid $white !important;
                } 
            }
        }
    }
}


/*-------------404 page--------------*/
.page-404 {
    min-height:450px;
    .errorbox {
        margin:75px 0 0;
        h1 {
            font-size:152px;
            line-height: 152px;
            a {
              display: block;
            }
        }
    }
}
/*---------------shop--------------*/
#content-shop {
    .woof_sid_auto_shortcode{
        border: 1px solid rgba($dark, 0.35);
        //background: rgba($dark, 0.75);
        padding: 35px 25px 10px 25px;
        @include border-radius(0);
        .price_slider {
            background-color: $orange;
            .ui-slider-range {
                background-color: $orange !important;
            }
            .ui-slider-handle {
                background-color: $orange !important; 
            }
        }
        .woof_submit_search_form_container {
            button {
                @include btn-background($orange);
                &:hover {
                    background: darken($orange, 15%); 
                    color: $white; 
                }
            }
        }
    }
}

.novisible {
    opacity: 0; 
}
.visible {
    opacity: 1; 
}

.woof {
    .woof_redraw_zone {
        .woof_price3_search_container,
        .woof_author_search_container {
            padding: 0 15px; 
        }
        input {
            @include border-radius(0);
            font-size: 1em; 
        }
        .chosen-drop,
        .chosen-single {
            @include border-radius(0);
            font-size: 1em;
        }
    }
}

/*--------------woocommerce-account--------------*/
.woocommerce-account {
    .woocommerce {
        h2 {
            text-align: center;
        }
        .login {
            background: lighten($gray, 65%);
            width: 300px;
            margin: 0 auto;
            #username,
            #password {
                @include input-type;
                background: $white !important;
            }
            .button {
                @include btn-background($orange);
                padding: 7px 10px;
                @include transition(0.3s);
                font-weight: 400;
            }
        }
    }
}


/*--------woocommerce-cart------------*/
.woocommerce-cart {
    .cart-empty {
        text-align: center;
        font-size: 1.2em;
    }
    .return-to-shop {
        text-align: center;
        .button {
            @include btn-background($orange);
            padding: 15px 20px;
            @include transition(0.3s);
            font-weight: 400;
            &:hover {
                background: darken($orange, 30%);
                color: $white; 
            }
        }
    }
}


/*---------------woocommerce------------*/
.woocommerce {
    .products {
        .product-category {
            h3 {
                color: lighten($dark, 30%);
                text-transform: uppercase;
                text-align: center;
                font-size: 3em;
                margin: 20px 0;
                line-height: 1em;
                .count {
                    background: transparent;
                }
                &:hover {
                    color: $orange;
                }
            }
        }
    }
}


/*---------------single-product------------------------*/
.single-product {
    .product {
        margin: 75px 0 0 0;
        .onsale {
            top: 0;
            left:0;
            @include border-radius(0);
            background: $orange;
            padding: 5px 8px;
            min-height: 0;
            max-width: 0;
            line-height: 1em;   
        }
        .summary {
            .product_title {
                color: $dark;
                text-align: left;
                text-transform: uppercase;
                font-size: 2em;
                margin: 0 0 25px 0;
                z-index: 11;
                line-height: 1em;
            }
            .woocommerce-product-rating {
                text-align: center;
                color: lighten($orange, 10%);
                .woocommerce-review-link {
                    display: none;
                }
            }
            .price {
                text-align: left;
                padding: 5px 0 15px 0;
                margin: 0 0 15px 0;
                color: $dark;
                font-weight: 400;  
                border-bottom: 1px solid lighten($dark, 70%);
                del {
                    span {
                        color: lighten($dark, 40%);
                    }
                }
                ins {
                    span {
                        color: $orange;
                    }
                }
            }
            p {
                padding: 10px;
                font-size: 0.9em;
                line-height: 2em;
                font-weight: 400;
                text-align: justify;
                text-indent: 15px;
            }
            .stock {
                font-size: 0.9em;
                line-height: 2em;
                font-weight: 400;
                color: $orange;
                text-transform: uppercase;
            }
            .cart {
                .qty {
                    line-height: 2.5em;
                    margin-top: 5px;
                }
                .single_add_to_cart_button {
                    @include btn-background($orange);
                    @include transition(0.3s);
                    @include border-radius(0);
                    &:hover {
                        background: darken($orange,20%);
                        color: $white; 
                    }
                }
            }
            .product_meta {
                .posted_in {
                    font-weight: 400; 
                }
            }
        }
        .woocommerce-tabs {
            padding:20px 0 0 0;
            border-top: 1px solid lighten($dark, 70%);
            .tabs {
                margin:0 !important;
                padding:0 !important;
                .description_tab,
                .reviews_tab {
                    @include border-radius(0);
                     &:before {
                        content: none;
                    }
                    &:after {
                        content: none;
                    }
                    a {
                        font-weight: 400;
                    }
                }
            }
            .woocommerce-Tabs-panel {
                padding: 20px !important;
                font-weight: 400; 
                h2 {
                    text-transform: uppercase;
                }
                #submit {
                    @include btn-background($orange);
                    @include transition(0.3s);
                    @include border-radius(0 !important);
                }
            }
        }
        .related {
            h2 {
                text-transform: uppercase;
                text-align: left;
                color: $dark;
                margin: 25px; 
            }
            .products {
                .product {
                .onsale {
                    position: absolute;
                    right: 0;
                    top: 0;
                    background: $orange;
                    color: $white;
                    padding: 3px 12px;
                    font-weight: 900;
                    min-height: 0;
                    min-width: 60px;
                    line-height: 2em;
                    @include border-radius(0);       
                }
                h3 {
                    position: absolute;
                    top:0;
                    left: 0;
                    right: 0;
                    width: 100%;
                    text-align: center; 
                    text-decoration: none;
                    color: $white;
                    text-transform: uppercase;
                    margin: 20% 0 0 0;
                    line-height: 1em;
                    background: rgba($orange,0.55); 
                    @include transition(0.2s);
                    &:hover {
                        text-decoration: none;
                    }
                }
                .price {
                    text-align: left;
                    color: $dark;
                    font-weight: 400; 
                    del {
                        display: inline-block;
                        color: lighten($dark, 30%);
                    }
                    ins {
                        color: $orange;
                    }
                }
                .star-rating {
                    position: absolute;
                    top: 5px;
                    left: 5px;
                }
                .product_type_simple {
                    @include btn-background($orange);
                    @include transition(0.3s);
                    @include border-radius(0 !important);
                    &:hover {
                        background: darken($orange,20%);
                        color: $white;  
                    } 
                }
            }
            }
        }
    }
}
.woocommerce-account {
    .woocommerce {
        .woocomerce-FormRow,
        .login {
            input {
                border: 1px solid $dark !important;
                padding: 8px !important;
                background: $white !important;   
            }
            .button {
                @include btn-background($orange !important);
                @include transition(0.3s);
                @include border-radius(0 !important);
                border: none !important;
                &:hover {
                    background: darken($orange,20%) !important;
                    color: $white !important;  
                } 
            }
            
        } 
    }
}
.woocommerce-account {
    .woocommerce {
        .register {
            input {
                border: 1px solid $dark;
                padding: 8px;
                background: $white !important;   
            }
        } 
    }
} 



/*----------------page products------------------*/
#page {
    .woocommerce {
        .products {
            .product {
                position: relative;
                text-align: center;
                background: lighten($dark, 70%);
                &:hover .add_to_cart_button {
                    @include transition(0.3s);
                    opacity: 1; 
                }
                .onsale {
                    position: absolute;
                    left: -3px;
                    top: -2px;
                    background: url("images/sale.png") no-repeat;
                    color: transparent;
                    font-size: 0px;
                    display: inline-block;
                    width: 60px;
                    height: 60px;
                    -webkit-background-size: 100%; 
                       -o-background-size: 100%; 
                       background-size: 100%;
                    -webkit-border-radius: 0; 
                           border-radius: 0;        
                }
                img {
                    margin: 0; 
                }
                h3 {
                    margin: 0 15px;
                    padding: 15px 0; 
                    font-size: 1.2em;
                    text-align: left;
                    font-weight: 400;
                    border-bottom: 1px solid $orange;
                }
                .price {
                    text-align: left;
                    color: $dark;
                    font-weight: 400;
                    margin: 15px;  
                    del {
                        display: inline-block;
                        color: $dark;
                    }
                    ins {
                        color: $orange;
                    }
                }
                .star-rating {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                }
                .product_type_simple {
                    color: transparent;
                    font-size: 0px;
                    background: none;
                    padding: 0;
                    position: absolute;
                    bottom: 38%;
                    right: 0px;
                    opacity: 0;  
                    @include transition(0.3s);
                    &:before {
                        content: "\f290";
                        display: inline-block;
                        color: $white;
                        font-size: 20px;
                        font-family: FontAwesome; 
                        padding: 10px 15px;
                        background: $orange;  
                    } 
                    
                }
            }
        }
    }
}


#page {
    .woocommerce {
        .product {
  
            .footer-product {
                position: absolute;
                bottom: -75px;
                opacity: 0; 
                background: $white;
                width: 100%;
                height: 30%;
                padding: 20px 0px 0 0;
                @include transition(0.2s);
                .star-rating {
                    display: none;
                }
                .add_to_cart_button {
                    padding: 10px 20px;
                    position: relative;
                    bottom: -75px;
                    opacity: 0;
                    @include transition(0.8s);
                    
                }
                .added_to_cart {
                    position: absolute;
                    top: -51%;
                    padding: 7px 32px;
                    ing: 4px 35px;
                    left: 30%;
                    background: lighten($dark, 30%);
                    color: white;
                    text-transform: uppercase;
                    font-size: 15px;
                    font-weight: 400;
                    &:hover {
                        background: lighten($dark, 10%);
                        color: $white;  
                    } 
                }
                .price {
                    position: relative;
                    bottom: -75px;
                    opacity: 0;
                    @include transition(0.5s);
                }  
            }
        }
    }
}

/*------------------cart--------------------*/
.shop_table {
    .coupon {
        input[type="submit"] {
            @include btn-background($orange);
            @include transition(0.3s);
            @include border-radius(0 !important);
        }
        #coupon_code {
            width: 100px;
            line-height: 34px;
            margin-top: 5px;
        }
    }
}
.cart_totals {
    .checkout-button {
        @include btn-background($orange !important);
        @include transition(0.3s);
        @include border-radius(0 !important);
    }
}
.button {
    @include btn-background($orange);
    @include transition(0.3s);
    @include border-radius(0);
}
.woocommerce {
    .cart_item,
    td {
        a {
            font-size: 1.2em;
            font-weight: 400;  
        }
    }
}

.woocommerce-page {
    #payment {
        #place_order {
           @include btn-background($orange); 
           &:hover {
               background: darken($orange,20%);
               color: $white; 
           }
        }
    } 
} 
.woocommerce-info {
    border-top-color: $orange;
}
.woocommerce-MyAccount-navigation {
    padding: 0 0 0 30px; 
}
/*-----------------pagination-----------------*/
.pagination {
    display: block;
    text-align: center;
    padding: 20px 0;
    margin: 0;
    .nav-links {
        .page-numbers {
            @include btn-background($orange);
            padding: 10px 30px;
            @include transition(0.3s);
        }
        .current {
            background: lighten($dark, 30%);
        }
    }
}
/*----------------------owl-wrapper--------------------*/
.owl-wrapper {
    .excerpt,
    .title {
        font-weight: 600;
    }
}

/*-----------------shop filter-----------------*/
.woof_container_product_cat {
    width: 100% !important;
    ul {
        li {
            display: inline-block;
        }
    } 
}
.woof_price_search_container {
    width: 100% !important; 
}
.woof_checkbox_sales_container,
.woof_checkbox_instock_container {
    width: auto !important; 
}