/*
 Theme Name:   VM LAW
 Description:  Property of VM LAW
 Author:       HasTech
 Author URI:   http://hastech.company/
 Version:      1.1.1
 Tags:         slider, site-builder, page-builder, responsive-layout, fixed-layout, fluid-layout, masonry, blog, one-column, two-column, three-column, four-column, custom-colors, custom-header, custom-menu, editor-style, featured-images, translation-ready, full-width-template, theme-options
 License:      GPL 2.0
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Template:     layerswp
*/
/* ----------------------------------------
    ** TABLE OF CONTENTS ** 
------------------------------------------
  1. THEME DEFAULT CSS 
  2. NECESSARY CLASSES 
  3. DEFAULT BUTTON STYLE
  4. STICKY MENU
  5. SUB MENU
  6. POST CONTENT CSS
  7. SIDEBAR AREA
  8. Author Bio Widget
  9. Category Widget
  10. Newsletter Form
  11. Popular Posts Widget
  12. Archives Widget
  13. Tags Widget
  14. Instagram Feed Widget
  15. Fullwidth Instagram Feed Widget
  16. Latest Tweets Widget
  17. BREADCRUMB AREA
  18. SIDEBAR AREA
  19. Tags
  20. PAGE AREA
  21. Archive PAGE AREA
  22. BLOG DETAILS PAGE
  23. 404 PAGE
  24. SEARCH PAGE
  25. SHOP PAGE
  26. PRODUCT DETAILS PAGE
  27. COMMENTS AREA
  28. UNIT TEST STYLES
  29. BLOG WIDGET CSS
  30. HERO SLIDER CSS
  31. Lira Contact Address
  32. Lira Contact Message
  33. Lira About Area
  34. Single Article
  35. Footer Area
  36. Responsive CSS





------------------------------------- */
/* ---------------------------------------- 
  1. THEME DEFAULT CSS 
---------------------------------------- */

html {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: calc(100%) !important;
}
body {
    color: #666666;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #383838;
    font-weight: 500;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}
.story,
p {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
}
a:focus,
:focus {
    outline: 0px solid;
}
a:hover {
    text-decoration: none;
}
a:active,
a:hover {
    outline: 0 none;
}
img {
    max-width: 100%;
    height: auto;
}
a {
    text-decoration: none;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.container {
    margin: auto;
    max-width: 1200px;
    padding: 0 20px;
}
.container.list-masonry {
    max-width: 1200px;
}
[class*="column"] {
    margin-bottom: 0px;
}
.content-vertical-massive {
    padding-top: 120px;
    padding-bottom: 120px;
}
.fix {
    overflow: hidden;
}
.clear {
    clear: both;
}
/* ---------------------------------------- 
  2. NECESSARY CLASSES 
---------------------------------------- */

.pt-15 {
    padding-top: 15px;
}
.pt-25 {
    padding-top: 25px;
}
.pb-15 {
    padding-bottom: 15px;
}
.pb-20 {
    padding-bottom: 20px;
}
.ptb-120 {
    padding-bottom: 120px;
    padding-top: 120px;
}
.mr-25 {
    margin-right: 25px;
}
.section-title.large .heading {
    font-size: 64px;
    font-size: 64px;
    font-size: 4rem;
    line-height: 0.8;
}
/* section-title */

.section-title {
    margin-bottom: 0;
}
.section-title .heading {
    font-size: 22px;
    text-transform: capitalize;
    margin-bottom: 25px;
}
/* excerpt */

.section-title .excerpt {
    color: inherit;
    font-size: inherit;
    margin-bottom: 40px;
}
/* ---------------------------------------- 
  3. DEFAULT BUTTON STYLE
---------------------------------------- */

a.button {
    background-color: rgba(0, 0, 0, 0);
    border: medium none;
    color: #666;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 15px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    vertical-align: middle;
}
.button:hover {
    background-color: transparent;
    color: #383838;
}
.header-site.is_stuck_show.is_stuck {
    box-shadow: 0 1px 3px rgba(50, 50, 50, 0.4);
    z-index: 99999;
}
/* ---------------------------------------- 
  4. STICKY MENU
---------------------------------------- */

.header-site.header-sticky.is_stuck.is_stuck_show .container {
    padding: 20px;
}
/* ---------------------------------------- 
  5. SUB MENU
---------------------------------------- */

.nav.nav-horizontal .sub-menu,
.nav.nav-horizontal .children {
    background-color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
    left: 0;
    line-height: normal;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    padding: 15px 0;
    position: absolute;
    top: 50px;
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    visibility: hidden;
    z-index: 5;
}
.nav.nav-horizontal ul.menu li:hover > .sub-menu,
.nav.nav-horizontal ul.menu li:hover > .children {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    top: 100%;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    visibility: visible;
}
.sub-menu li,
.nav .children li {
    border-color: currentcolor currentcolor transparent;
    -o-border-image: none;
    border-image: none;
    border-style: none none solid;
    border-width: medium medium 1px;
    clear: both;
    display: block;
    margin: 0;
    width: 220px;
}
.header-site .sub-menu li a,
.header-site .nav .children li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #707070;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 15px;
    text-transform: capitalize;
}
.sub-menu li a:hover,
.nav .children li a:hover {
    color: #303030;
}
/* ---------------------------------------- 
  6. POST CONTENT CSS
---------------------------------------- */

.lira-post-widget .single-blog-item {
    margin-bottom: 60px;
}
.blog-img {
    display: block;
    position: relative;
}
.blog-img img {
    display: block;
}
.pst-titel a {
    background: #fafafa none repeat scroll 0 0;
    bottom: -12px;
    color: #a1a1a1;
    font-size: 12px;
    font-weight: 600;
    height: 25px;
    left: 0;
    line-height: 27px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    width: 120px;
    z-index: 999;
}
.pst-titel a:hover,
.blog-ph .pst-titel a:hover {
    color: #666;
}
.post-titel-author h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 3px;
}
.post-titel-author h3 a:hover {
    color: #666;
}
.post-titel-author > span,
.post-txt a {
    color: #a1a1a1;
    font-size: 12px;
}
.post-titel-author > span a {
    color: #707070;
    font-weight: 500;
}
.post-srt-content {
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 22px;
}
.post-srt-content p {
    color: #606060;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}
.post-titel-author > span a:hover,
.post-srt-content > a:hover,
.post-txt a:hover,
.social-middle ul li a:hover,
.category-list ul li a:hover,
.twist-single ul li a:hover {
    color: #383838;
}
.post-srt-content > a {
    color: #a1a1a1;
    font-size: 12px;
    font-weight: 500;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.post-srt-content > a i {
    margin-left: 6px;
}
.post-info {
    padding-top: 13px;
}
.post-txt {
    margin-left: 1px;
}
.post-txt a {
    font-family: "Poppins", sans-serif;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.post-txt a i {
    margin-right: 6px;
}
.post-txt {
    color: #a1a1a1;
    font-size: 12px;
    font-weight: 500;
}
.post-txt i {
    margin-right: 6px;
}
.post-content.thumbnail-body {
    background-color: #fff;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 2;
}
.post-content.thumbnail-body p {
    margin: 0;
}
.post-content.thumbnail-body .button {
    margin-top: 16px;
    padding: 0;
}
/* ---------------------------------------- 
  7. SIDEBAR AREA
---------------------------------------- */

.sidebar .content:first-child {
    padding-top: 0px;
}
.sidebar .widget .section-nav-title {
    color: #383838;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    text-transform: inherit;
}
.widget .menu-main-menu-container li a {
    font-weight: 400;
}
/* ---------------------------------------- 
  8. Author Bio Widget
---------------------------------------- */

.sidebar .content.widget.widget_author_bio_widget {
    padding: 0 0 7px;
}
.about-info > h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
}
.about-info > p {
    color: #606060;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 15px;
}
.about-area .about-info > p {
    margin: 0 0 10px;
    padding: 0 10%;
}
.widget_author_bio_widget .about-me .social-middle ul li {
    border-bottom: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.social-middle ul li a {
    color: #707070;
    font-size: 12px;
    line-height: 27px;
    padding: 6px 16px;
}
.social-middle ul li a:hover {
    color: #383838;
}
/* ---------------------------------------- 
  9. Category Widget
---------------------------------------- */

.sidebar .widget_categories ul li {
    color: #606060;
}
.sidebar .widget ul li ul li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 6px;
    margin-top: 6px;
}
.widget.widget_rss ul li a.rsswidget {
    display: block;
    font-weight: 500;
}
.footer-site .widget .section-nav-title {
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
}
.footer-site table#wp-calendar tr td {
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
}
.footer-site table {
    border: 2px solid rgba(255, 255, 255, 0.8);
}
.footer-site table thead tr th{
	border-bottom: 2px solid rgba(255, 255, 255, 0.8);
	border-right: 2px solid rgba(255, 255, 255, 0.8);
	text-align: center;
	color: #fff;
}
.footer-site aside.widget_categories ul li ul li:first-child {
    margin-top: 6px;
}
.footer-site aside.widget ul li ul {
    margin-left: 15px;
}
.footer-site .widget.widget_rss li{
	margin-bottom: 15px;
}
.footer-site .widget.widget_rss li:last-child{
	margin-bottom: 0;
}
.sidebar .widget_categories ul li a ,
.sidebar .widget_archive ul li a {
    color: #606060;
    display: inline-block;
    margin: 1px 0;
    width: 90%;
}
.sidebar .widget_pages ul li a {
    display: block;
}
.sidebar .widget_categories ul li:last-child a {
    margin: 1px 0 0;
}
.sidebar .widget li ul {
    margin: 0 0 0 10px;
}
.sidebar .widget_categories ul li:hover,
.sidebar .widget_categories ul li a:hover {
    color: #383838;
}
/* ---------------------------------------- 
  10. Newsletter Form
---------------------------------------- */

.newsletter-form {
    display: block;
    margin: 23px 0 0;
    position: relative;
    padding-bottom: 20px;
}
.newsletter-form input[type="email"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #e9e9e9;
    box-shadow: none;
    color: #626262;
    font-size: 14px;
    height: 45px;
    padding-left: 10px;
    width: 80%;
}
.newsletter-form button {
    background: #ebebeb none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0;
    color: #a1a1a1;
    font-size: 16px;
    height: 45px;
    line-height: 39px;
    position: absolute;
    right: 0;
    top: 0;
    width: 20%;
}
/* ---------------------------------------- 
  11. Popular Posts Widget
---------------------------------------- */

.sidebar .content.widget.widget_popular_posts {
    padding: 0 0 12px;
}
.popular-post {
    padding-bottom: 0;
    padding-top: 10px;
}
.popular-single {
    display: block;
    overflow: hidden;
    padding-bottom: 25px;
}
.popular-single:last-child {
    padding-bottom: 0;
}
.popular-img {
    display: block;
    float: left;
    overflow: hidden;
    width: 40%;
}
.popular-img img {
    display: block;
}
.popular-content {
    overflow: hidden;
    padding-left: 15px;
    padding-top: 0;
}
.popular-content h5 {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}
.post-date {
    color: #a1a1a1;
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin: 5px 0 3px;
}
.popular-content > p {
    line-height: 19px;
    margin: 0;
}
/* ---------------------------------------- 
  12. Archives Widget
---------------------------------------- */
.sidebar .widget ul li ul li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.sidebar .content.widget {
    margin-bottom: 63px;
    margin-left: 20px;
    margin-right: 20px;
    overflow: hidden;
    padding: 0;
}
.sidebar .widget_archive {
    display: block;
    position: relative;
}
option {
    font-size: 12px;
    padding: 3px 10px;
}
.sidebar .widget_archive select option {
    background: #ffffff none repeat scroll 0 0;
    border: 0 solid #626262;
    color: #858585;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    padding: 3px 10px;
}
/* ---------------------------------------- 
  13. Tags Widget
---------------------------------------- */

.sidebar .widget_tag_cloud .tagcloud {
    padding-bottom: 0;
    padding-top: 18px;
}
.sidebar .widget_tag_cloud .tagcloud a {
    border: 1px solid #ebebeb;
    border-radius: 0;
    color: #606060;
    display: inline-block;
    font-size: 14px !important;
    margin: 0 7px 10px 0;
    padding: 8px 15px 6px;
}
.sidebar .widget_tag_cloud .tagcloud a:hover {
    background: #ebebeb none repeat scroll 0 0;
    border-color: #ebebeb;
}
/* ---------------------------------------- 
  14. Instagram Feed Widget
---------------------------------------- */

.sidebar .instagram-pics img {
    display: block;
}
.sidebar .jr-insta-slider .jr-insta-thumb ul {
    margin: 0 -3px;
    padding-top: 12px;
}
.jr-insta-thumb ul.thumbnails {
    font-size: 0;
    list-style: outside none none;
    margin-left: 0;
}
.sidebar .jr-insta-slider .jr-insta-thumb ul li {
    border-bottom: medium none;
    float: left;
    margin: 0 3px 6px;
    padding: 0;
}
.sidebar .jr-insta-slider .jr-insta-thumb ul li a {
    display: block;
}
/* ---------------------------------------- 
  15. Fullwidth Instagram Feed Widget
---------------------------------------- */

.insta-feed {
    padding-bottom: 0;
    padding-top: 0;
}
.insta-feed .media {
    margin: 0 -10px;
}
.media-body .excerpt .jr-insta-thumb ul {
    margin: 0;
    padding-top: 0;
}
.media-body .excerpt .jr-insta-thumb ul.thumbnails li {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    box-shadow: none;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.media-body .excerpt .jr-insta-thumb ul.thumbnails.jr_col_6 li {
    width: 16.666% !important;
}
.media-body .excerpt .jr-insta-thumb ul.thumbnails {
    font-size: 0;
    list-style: outside none none;
    margin-left: 0;
}
.media-body .excerpt .jr-insta-thumb ul li {
    border-bottom: medium none;
    float: left;
    margin: 0 3px 6px;
    padding: 0;
}
.media-body .excerpt .jr-insta-thumb ul li a {
    display: block;
}
.media-body .excerpt .jr-insta-thumb ul li a img {
    width: 100%;
}
/* ---------------------------------------- 
  16. Latest Tweets Widget
---------------------------------------- */
.sidebar .widget_tp_widget_recent_tweets .tp_recent_tweets ul li {
    border-bottom: medium none;
    margin: 0 0 6px;
    padding: 0 0 6px 35px;
}
.sidebar .tp_recent_tweets ul li span {
    color: #606060;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 15px;
}
/* ---------------------------------------- 
  17. BREADCRUMB AREA
---------------------------------------- */

.breadcrumb-area {
    background-color: #707070;
    padding: 90px 0;
    background-size: cover;
}
.breadcrumb-area.single-page {
    padding: 90px 0 80px;
}
.breadcrumb-title h1 {
    color: #383838;
    font-size: 40px;
    font-weight: 600;
    text-transform: uppercase;
}
.bread-crumbs {
    margin: 0;
}
.bread-crumbs li,
.bread-crumbs li a {
    color: #fff;
    font-size: 14px;
}
.bread-crumbs li a:hover,
.bread-crumbs li .current > a {
    text-decoration: none;
}
.breadcrumb-padding.pages-p {
    text-align: center;
}
.bread-crumbs a,
.breadcrumb-list a {
    color: #ffffff;
}
.bread-crumbs a:hover {
    color: #5aa16a;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.breadcrumb-area.archive-page {
    padding: 67px 0 70px;
}
.breadcrumb-list > ul {
    color: #ffffff;
}
.breadcrumb-list li {
    display: inline-block;
}
/* ---------------------------------------- 
  18. SIDEBAR AREA
---------------------------------------- */

.sidebar .content.well {
    background: transparent;
}
.push-bottom-large {
    margin-bottom: 0;
}
/* ---------------------------------------- 
  19. Tags
---------------------------------------- */

.tagcloud a {
    display: inline-block;
}
.tagcloud a {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    display: inline-block;
    margin: 0 6px 10px 0;
    padding: 8px 15px 6px;
    text-align: center;
    font-size: 14px !important;
}
.footer-site .tagcloud a{
	color: #fff;
}
.tagcloud a:hover {
    border-color: #1bb4b9;
    background: #1bb4b9;
    color: #fff
}
/* textwidget */

.textwidget img {
    margin-top: 10px;
}
.textwidget form {
    margin-top: 5px;
}
/* ---------------------------------------- 
  20. PAGE AREA
---------------------------------------- */

.page-area {
    padding-top: 75px;
    padding-bottom: 90px;
}
.page-area {
    padding-top: 75px;
    padding-bottom: 70px;
}
/* ---------------------------------------- 
  21. Archive PAGE AREA
---------------------------------------- */

.archive-page {
    padding-bottom: 60px;
    padding-top: 120px;
}
.post-list-item + .post-list-item {
    margin-top: 80px;
}
.post-list-item .button {
    color: #a1a1a1;
    font-size: 12px;
    font-weight: 500;
    padding: 0;
    text-transform: uppercase;
}
.post-list-item .button:hover {
    color: #383838;
}
/* ---------------------------------------- 
  22. BLOG DETAILS PAGE
---------------------------------------- */

.single-blog-page {
    padding-top: 120px;
    padding-bottom: 90px;
}
.single-title-heading {
    font-weight: 500;
    font-size: 26px;
	word-break: break-all;
    margin-bottom: 20px;
}
.story h1,
.comment h1,
.story h2,
.comment h2,
.story h3,
.comment h3,
.story h4,
.comment h4,
.story h5,
.comment h5,
.story h6,
.comment h6 {
    font-weight: 500;
    margin-bottom: 15px;
}
.story h1,
.comment h1 {
    font-size: 54.4px;
    font-size: 54.4px;
    font-size: 3.4rem;
}
.story h2,
.comment h2 {
    font-size: 48px;
    font-size: 48px;
    font-size: 3rem;
}
.story h3,
.comment h3 {
    font-size: 43.2px;
    font-size: 43.2px;
    font-size: 2.7rem;
}
.story h4,
.comment h4 {
    font-size: 41.6px;
    font-size: 41.6px;
    font-size: 2.6rem;
}
.story h5,
.comment h5 {
    font-size: 38.4px;
    font-size: 38.4px;
    font-size: 2.4rem;
}
.story h6,
.comment h6 {
    font-size: 35.2px;
    font-size: 35.2px;
    font-size: 2.2rem;
    font-weight: 500;
}
pre {
    overflow-x: scroll;
}
/*------------------------------
  23. 404 area
------------------------------*/

.page-404 {
    padding-bottom: 90px;
    padding-top: 100px;
}
.not-found-area .not-found-title .subtitle {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.not-found-area .not-found-subtitle p {
    margin-bottom: 30px;
}
.not-found-area .search-form input {
    margin-bottom: 20px;
}
.not-found-area .search-form input[type="search"] {
    border-color: #343b4d;
    float: left;
    margin-bottom: 20px;
    margin-right: 10px;
}
.not-found-area .search-form input[type="submit"] {
    background: #343B4D;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    padding-left: 20px;
    padding-right: 20px;
    text-transform: uppercase;
}
.not-found-area .search-form input[type="submit"]:hover {
    background: #204768;
    color: #fff;
}
/*------------------------------
  24. Search area
------------------------------*/

.search-page-area {
    padding-bottom: 90px;
    padding-top: 100px;
}
.not-found-form h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.not-found-form p {
    margin-bottom: 30px;
}
.not-found-form .search-form input {
    margin-bottom: 20px;
}
.not-found-form .search-form input[type="search"] {
    border-color: #343b4d;
    float: left;
    margin-right: 10px;
}
.not-found-form .search-form input[type="submit"] {
    background: #343B4D;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    padding-left: 20px;
    padding-right: 20px;
    text-transform: uppercase;
}
.not-found-form .search-form input[type="submit"]:hover {
    background: #204768;
    color: #fff;
}
/* ---------------------------------------- 
  25. SHOP PAGE
---------------------------------------- */

.product-pages {
    padding-top: 75px;
    padding-bottom: 90px;
}
/* ---------------------------------------- 
  26. PRODUCT DETAILS PAGE
---------------------------------------- */

.single-product-page {
    padding-top: 75px;
    padding-bottom: 90px;
}
/* ---------------------------------------- 
  27. COMMENTS AREA
---------------------------------------- */

.grid.comments-nested.push-top {
    border-top: 0px solid #ddd;
}
.push-top-large .children {
    margin-left: 20px;
}
.comment.even.content.well,
.comment-list .even.content.well {
    display: block;
    width: 100%;
    background-color: #f5f5f5;
}
.comment.odd.content.well,
.comment-list .odd.content.well {
    display: block;
    width: 100%;
    background-color: #f7f7f7;
}
.comment-respond {
    width: 100%;
}
.push-top-large {
    margin-top: 0;
}
.form-submit input[type="submit"] {
    padding: 10px 14px;
}
/* ---------------------------------------- 
  28. UNIT TEST STYLES
---------------------------------------- */
/* menu css */

.nav-horizontal li:hover > a {
    color: #303030;
}
.nav-horizontal ul.menu li ul.children li ul.children {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    left: 100%;
    top: 0;
}
.nav-horizontal ul.menu li ul.children li:hover ul.children {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
body.blog .header-site {
    border-bottom: 1px solid #ddd;
}
article.single-article img {
    padding-bottom: 20px;
}
table#wp-calendar tr td {
    text-align: center;
    border-right: 2px solid rgba(0, 0, 0, 0.08);
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.header-site .container {
    padding: 30px 20px;
}
.header-site .nav-horizontal > ul > li {
    margin: 0 2px;
    padding-bottom: 0;
}
.header-site .nav-horizontal > ul > li > a {
    color: #707070;
    display: block;
    font-size: 14px;
    font-weight: 700;
    padding: 0 15px;
    text-transform: uppercase;
}
.header-site .nav-horizontal > ul > li:hover > a,
.header-site .nav-horizontal > ul > li.current-menu-item > a,
.header-site .nav-horizontal > ul > li.current_page_item > a {
    color: #303030;
}
.header-site .nav ul li > .sub-menu > li.current-menu-item > a,
.header-site .nav ul li > .sub-menu > li.current_page_item > a {
    color: #303030;
}
/* page image aligment */

.alignleft {
    margin-right: 15px;
}
.wp-caption {
    background: transparent;
}
.avatar .avatar-body .avatar-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
}
.post-password-form input[type="password"] {
    display: block;
    margin: 10px 0;
    width: 40%;
}
.post-password-form input[type="submit"] {
    margin: 0;
    padding: 7px 20px;
}
.conmment-title_quick .heading.comment-title {
    font-size: 20px;
    font-weight: 500;
    margin: 20px 0 13px;
}
.copy blockquote {
    font-size: 24px;
    font-size: 24px;
    font-size: 1.5rem;
}
#post-1151 .meta-info p span,
#post-1152 .meta-info p span {
    font-size: 14px;
}
a.button {
    padding-left: 0;
}
.blog-pages {
    padding: 90px 0;
}
.sk .tag-sticky-2 {
    border: 1px solid #a1a1a1;
    padding: 0 10px 10px;
}


.post-titel-author > span,
.post-txt a {
    color: #666666;
}
.post-srt-content > a {
    color: #666666;
}
.extra-pagination {
    margin-top: 15px;
}
/* heading style */

.story h1,
#comments .copy h1 {
    font-size: 34px;
}
.story h2,
#comments .copy h2 {
    font-size: 28px;
}
.story h3,
#comments .copy h3 {
    font-size: 24px;
}
.story h4,
#comments .copy h4 {
    font-size: 21px;
}
.story h5,
#comments .copy h5 {
    font-size: 18px;
}
.story h6,
#comments .copy h6 {
    font-size: 15px;
    font-weight: 400;
}
/* ---------------------------------------- 
  29. BLOG WIDGET CSS
---------------------------------------- */

.blog .pdall-100 {
    padding: 30px 0 80px;
}
/* blog main area */

.ht-blog {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.ht-blog:hover {
    border: 1px solid transparent;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
}
/* blog image css*/

.ht-blog-thumb {
    position: relative;
}
.ht-blog-thumb:before {
    background: #000 none repeat scroll 0 0;
    content: "";
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .5s;
    transition: .5s;
}
.ht-blog:hover .ht-blog-thumb:before {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.ht-blog-thumb img {
    width: 100%;
    display: block;
}
/* blog post meta css*/

.ht-blog-thumb span.post_dates {
    background: #0aaac0 none repeat scroll 0 0;
    color: #fff;
    font-size: 18.6px;
    height: 70px;
    left: 0;
    top: 0;
    line-height: 70px;
    margin: auto;
    position: absolute;
    text-align: center;
    width: 70px;
    -webkit-transition: .5s;
    transition: .5s;
}
.ht-blog-thumb span.post_dates:hover {
    background: #f00;
    color: #fff;
}
.ht-blog-thumb span.post_dateslb {
    top: auto;
    bottom: 0;
}
.ht-blog-thumb span.post_datesr {
    left: auto;
    right: 0;
}
.ht-blog-thumb span.post_datesrb {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
}
.ht-blog-thumb span.post_datescenter {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/* blog content area */

.ht-single-content {
    padding: 15px;
}
/* blog post meta */

.ht-blog-date span {
    font-size: 14px;
    margin-right: 10px;
    position: relative;
    color: #888;
}
.ht-blog-date span + span:before {
    content: "";
    position: absolute;
}
.ht-blog-date a {
    color: #888;
}
.ht-blog-date i {
    margin-right: 2px;
    color: #888;
}
/* blog title css */

.ht-content-text h2 {
    color: #1b1b1b;
    font-size: 18px;
    font-weight: 700;
    padding: 20px 0 10px;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.ht-content-text h2 {
    color: #1b1b1b;
}
.ht-content-text h2 a:hover {
    color: #0aaaa0;
}
/* blog paragraph css */

.ht-content-text p {
    color: #333333;
}
/* blog button css*/

.btn_middle {
    text-align: center;
}
.btn_right {
    text-align: right;
}
a.ht-read-more {
    color: #888888;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    padding: 5px 0;
}
.ht-read-more:hover {
    color: #0aaac0;
    border-color: #0aaac0;
}
/* carousel style */

.blog-carousel [class*="span-"] {
    width: 100%;
}
.carousel-style-one.owl-theme .owl-controls .owl-buttons div,
.blog-style-three .blog-carousel.carousel-style-one.owl-theme .owl-controls .owl-buttons div {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0px solid #eaeaea;
    border-radius: 50%;
    color: #0aaaa0;
    display: inline-block;
    font-size: 20px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    padding: 0;
    height: 48px;
    left: -50px;
    line-height: 48px;
    margin: -24px 0 0 0;
    width: 48px;
    text-align: center;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}
.carousel-style-one.owl-theme .owl-controls .owl-buttons div.owl-next,
.blog-style-three .blog-carousel.carousel-style-one.owl-theme .owl-controls .owl-buttons div.owl-next {
    left: auto;
    right: -50px;
}
.carousel-style-one.owl-theme .owl-controls .owl-buttons div:hover,
.blog-carousel.carousel-style-one.owl-theme .owl-controls .owl-buttons div:hover {
    border-color: #1BB4B9;
    color: #fff;
    background: #1BB4B9;
}
.layers-contact-widget .form.content {
    padding: 0;
}
.form-single input {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: none;
    color: #606060;
    float: left;
    height: 40px;
    margin-bottom: 30px;
}
.form-textarea textarea {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #ddd;
    color: #606060;
}
/* ---------------------------------------- 
  30. HERO SLIDER CSS
---------------------------------------- */

.textwidget img {
    margin-top: 0;
}
.single-middle,
.single-middle {
    position: relative;
    display: block;
}
.main-slide-area .owl-theme .owl-dots,
.main-slide-area .owl-theme .owl-nav {
    bottom: 23px;
    margin: 0;
    position: absolute;
    right: 65px;
    text-align: right;
}
.main-slide-area .owl-theme .owl-nav [class*="owl-"] {
    background: transparent none repeat scroll 0 0;
    border-radius: 3px;
    color: #8a8a8a;
    cursor: pointer;
    display: inline-block;
    font-size: 24px;
    margin: 0 5px;
    padding: 0;
    -webkit-transition: .3s;
    transition: .3s;
}
.main-slide-area .owl-theme .owl-dots,
.main-slide-area .owl-theme .owl-nav:before {
    color: #8a8a8a;
    content: "/";
    height: 0;
    left: 23px;
    margin: 0 auto;
    padding: 8px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 0;
}
.main-slide-area .owl-theme .owl-nav [class*="owl-"]:hover {
    background: transparent none repeat scroll 0 0;
    color: #fff;
    text-decoration: none;
}
.slidemdl-single {
    display: block;
    overflow: hidden;
    position: relative;
}
.slide-content {
    margin: 0;
    top: 20%;
}
.slide-content {
    background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    overflow: hidden;
    padding: 60px 30px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.slide-content p {
    padding: 0 10%;
}
.slide-content a {
    color: #b3b3b3;
    font-size: 16px;
    font-weight: 500;
    line-height: 0;
    -webkit-transition: .4s;
    transition: .4s;
}
.slide-content a:hover {
    color: #fff;
}
.animate-one {
    -webkit-animation: 1500ms linear 0s normal none 1 running flipInX;
    animation: 1500ms linear 0s normal none 1 running flipInX;
}
.animate-two {
    -webkit-animation: 1500ms linear 3s normal none 1 running flipInY;
    animation: 1500ms linear 3s normal none 1 running flipInY;
}
.animate-three {
    -webkit-animation: 2000ms linear 5s normal none 1 running rollIn;
    animation: 2000ms linear 5s normal none 1 running rollIn;
}
.slide-single + .slide-single {
    margin-top: 16px;
}
.slide-single img {
    display: block;
}
.main-slide-area.container {
    padding: 0;
}
.main-slide-area {
    margin: 0 -8%;
}
.main-slide-area .slide-content > h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
}
.main-slide-area .slide-content > p {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 15px;
}
.main-slide-area .slide-content a {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 0;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.main-slide-area .slide-content a:hover {
    color: #fff;
}
/* Large Device : 1920px */

@media (min-width: 1400px) and (max-width: 1920px) {
    .main-slide-area {
        margin: 0 -33%;
    }
    .slide-single + .slide-single {
        margin-top: 20px;
    }
    .main-slide-area .slide-content {
        margin: 0 80px;
    }
}
/* Large Device : 1600px */

@media (min-width: 1440px) and (max-width: 1640px) {
    .main-slide-area {
        margin: 0 -18%;
    }
    .slide-single + .slide-single {
        margin-top: 18px;
    }
}
/* Large Device : 1400px */

@media (min-width: 1370px) and (max-width: 1440px) {
    .main-slide-area {
        margin: 0 -13%;
    }
    .slide-single + .slide-single {
        margin-top: 16px;
    }
}
/* ---------------------------------------- 
  31. Lira Contact Address
---------------------------------------- */
.single-address-icon i {
    font-size: 25px;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.single-address-info h4 {
    font-family: lato;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}
.single-address-info p {
    color: #333333;
    font-size: 14px;
    margin-bottom: 0;
}
.single-address:hover i {
    color: #0aaaa0;
}
/* ---------------------------------------- 
  32. Lira Contact Message
---------------------------------------- */
.layers-contact-widget .container > .span-6 {
    width: calc(100% / 12 * 12 - 20px);
}
.layers-contact-widget .container > .column {
    margin-left: 0;
    margin-right: 0;
}
/* contact-message */

.contact-message {
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.contact-message label {
    font-size: 13px;
    color: #666;
    font-weight: 400;
}
.contact-message input,
.contact-message textarea {
    border: 1px solid #f1f1f1;
    margin-bottom: 20px;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    color: #303030;
    max-width: inherit;
}
.contact-message textarea {
    height: 200px;
    margin-bottom: 30px;
    padding-top: 15px;
}
.contact-message input[type="submit"] {
    background: #303030 none repeat scroll 0 0;
    color: #ffffff;
    float: left;
    padding: 0 30px;
    text-transform: uppercase;
    width: auto;
}
/* ---------------------------------------- 
  33. Lira About Area
---------------------------------------- */

.lira-about-area {
    padding-bottom: 100px;
    padding-top: 100px;
}
.lira-about-area .media-body .heading {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}
.lira-about-area .sub-heading {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 30px;
}
.lira-about-area .excerpt p {
    margin-bottom: 25px;
}
.lira-about-area .button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #000000;
    border-radius: 30px;
    color: #000000;
    font-weight: 400;
    padding: 14px 30px 12px;
}
.lira-about-area .button:hover {
    background-color: #666666;
    border: 1px solid #666666;
    color: #ffffff;
}
/* ---------------------------------------- 
  34. Single Article
---------------------------------------- */
.story blockquote {
    background: #f1f1f1 none repeat scroll 0 0;
    border-left: 5px solid #d4d4d4;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 26px;
    padding: 25px;
}
.story blockquote p {
    font-size: 16px;
    font-style: italic;
}
.form-submit input[type="submit"] {
    background: #303030 none repeat scroll 0 0;
    border: medium none;
    box-shadow: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    height: 40px;
    overflow: hidden;
    text-transform: uppercase;
    width: 20%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.form-submit input[type="submit"]:hover {
    background: #000 none repeat scroll 0 0;
}
/* comment-reply */

.comment-reply-title {
    color: #383838;
    font-size: 20px;
}
/* related-post-area */

.related-post-area {
    margin-top: 80px;
}
.related-post-area .section-title {
    margin-bottom: 30px;
}
.related-post-area .section-title h2 {
    border-bottom: 1px solid #a1a1a1;
    display: inline-block;
}
.post-titel-author h3 {
    font-size: 20px;
    word-break: break-all;	
    line-height: 1.2;
}
.related-post-area .owl-dots {
    margin-top: 45px;
    text-align: center;
    width: 100%;
}
.related-post-area .owl-dot {
    border-radius: 100%;
    display: inline-block;
    margin: 0 7px;
}
.related-post-area .owl-dot span {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    background: #d6d6d6 none repeat scroll 0 0;
    border-radius: 50%;
    display: block;
    height: 10px;
    -webkit-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
    width: 10px;
}
.owl-dot.active {
    background: #d1d1d1 none repeat scroll 0 0;
}
.owl-dot.active span {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
}
/* blog-heading-title  */
.sticky header.blog-heading-title h1.heading ,
.tag-sticky-2 header.blog-heading-title h1.heading {
    padding-left: 25px;
    position: relative;
}
.sticky header.blog-heading-title h1.heading:before ,
.tag-sticky-2 header.blog-heading-title h1.heading:before{
    position: absolute;
	left: 3px;
    top: 7px;
    content: '\f08d';
    color: #000;
    font-family: FontAwesome;
    transform: rotate(-45deg);
}

.blog-heading-title .heading {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
    word-break: break-all;
    padding-top: 5px;
}
.meta-info p span {
    display: inline-block;
    font-size: 12px;
}
.meta-info p span {
    margin-right: 10px;
}
.single-blog-item .thumbnail-body .post-srt-content a.button:hover {
    background-color: rgba(0, 0, 0, 0);
}
.button:hover {
    background: transparent !important;
}
/* lira blog area */

.lira-post-widget {
    padding-bottom: 50px;
}
.pagination a,
.pagination span {
    padding: 7px 10px;
}
#scrollUp {
    background-color: #a1a1a1;
    bottom: 40px;
    box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: block;
    font-size: 24px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    right: 40px;
    text-align: center;
    width: 40px;
}
/* ---------------------------------------- 
  35. Footer Area
---------------------------------------- */

#scrollUp:hover {
    background-color: #303030;
}
.footer-site.invert {
    padding: 0;
}
.copyright-style-2 .copytest .site-text a {
    color: #999;
}
.copyright-style-2 {
    padding-bottom: 30px;
    padding-top: 30px;
}
.copyright-style-2 .nav-horizontal.footermenu a {
    color: #999999;
    text-transform: uppercase;
}
.copyright-style-1 {
    background: #2a2a2a none repeat scroll 0 0;
    padding: 30px 0;
}
.header-site .sub-menu li a,
.header-site .nav .children li a {
    font-weight: 500;
}
.sidebar .content.widget:last-child {
    border-bottom: 0 none;
    padding-bottom: 0;
}
.breadcrumb-area.pages-area {
    position: relative;
}
.breadcrumb-area.pages-area:before {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    position: absolute;
    top: 0;
    width: 100%;
}

#footer .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    z-index: 99;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    display: block;
    border: none;
    margin-left: 15px;
}
.footer-site .widget.widget_nav_menu ul li {
    margin: 0;
}
#footer .sub-menu li {
    width: 100%;
    padding-top: 0;
    border: none;
}
#footer .copyright .sub-menu {
    display: none;
}
#footer .sub-menu li a {
    padding: 4px 0;
    color: #fff;
}
.footer-top-grid aside.widget {
    margin: 35px 0;
}
.footer-top-grid aside.widget:last-child {
    margin-bottom: 0;
}
.footer-top-grid aside.widget:first-child {
    margin-top: 0;
}
p.inner-post-pagination a {
    padding-top: 10px;
    display: inline-block;
}
.story p.inner-post-pagination a {
    text-decoration: none;
}
.inner-post-pagination span{
    height: 30px;
    width: 30px;
    display: inline-block;
    text-align: center;
    background: #454545;
    line-height: 30px;
    margin: 10px 5px 0 5px;
    color: #fff;
}
.inner-post-pagination a span {
	background: #F5F5F5;
	color: #454545;
	transition: all 0.3s ease 0s;
}
.inner-post-pagination a:hover span{
	background: #454545;
	color: #fff;
}
.inner-post-pagination > span:first-child {
    height: auto;
    width: auto;
    background: transparent;
    margin: 0 5px 0 0;
	color: #454545;
}
/* ================================
  36. Responsive CSS
================================ */
/* -------------------------------
  Medium Device : 992px
------------------------------- */

@media (min-width: 992px) and (max-width: 1169px) {
    /* Slider */
    
    .hs-item .hs-content {
        margin-bottom: 180px;
        margin-top: 180px;
    }
    .hero-slider .slick-dots {
        bottom: 70px;
    }
    .post-titel-author h3 a {
        font-size: 16px !important;
    }
    /* sidebar */
    
    .sidebar .content.widget {
        margin-left: 0;
        margin-right: 0;
    }
}
/* -------------------------------
  Tablet (Portrait) : 768px
------------------------------- */

@media (min-width: 768px) and (max-width: 990px) {
    /* default */
    
    .header-site .responsive-nav {
        padding: 0 0 10px;
    }
    .admin-bar .off-canvas-right {
        margin-top: 35px;
    }
    .header-site.invert .responsive-nav .l-menu {
        color: #ef476f;
    }
    .close-canvas {
        margin-top: 30px;
    }
    .admin-bar .close-canvas {
        margin-right: 10px;
        margin-top: 10px;
    }
    .off-canvas-right .nav-mobile {
        padding-top: 70px !important;
    }
    .logged-in.admin-bar .off-canvas-right .nav-mobile {
        padding-top: 70px;
    }
    .off-canvas-right aside .search-submit {
        border: 1px solid #cccccc !important;
        color: #ffffff;
        font-size: 11px;
        margin-top: 10px;
        text-transform: uppercase;
        width: auto;
    }
    .off-canvas-right aside .search-submit:hover {
        background: #222;
        border: 1px solid #222 !important;
        color: #ffffff;
    }
    .nav-vertical a {
        color: #ffffff !important;
        display: block;
        font-size: 14px;
        font-weight: 500;
        padding: 5px 0;
        text-transform: capitalize;
    }
    /* Slider */
    
    .hs-item .hs-content {
        margin-bottom: 150px;
        margin-top: 150px;
    }
    .hs-item .hs-content h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    /* about */
    
    .lira-about-area .media-body .heading {
        font-size: 20px;
        margin-bottom: 5px;
        margin-top: 0;
    }
    .lira-about-area .sub-heading {
        font-size: 14px;
    }
    /* main-slide-area */
    
    .main-slide-area .span-3 {
        width: calc(100% / 12 * 12 - 20px)
    }
    .main-slide-area .slide-single {
        float: left;
        padding: 0 10px;
        width: 50%;
    }
    .main-slide-area .slide-single {
        margin-top: 0;
    }
    .main-slide-area .single-middle {
        margin: 20px 0;
    }
    .main-slide-area .slide-content > h1 {
        font-size: 30px;
        margin-bottom: 5px;
    }
    /* copyright-area  */
    
    .copyright-area .nav-horizontal ul {
        display: block;
        float: none;
        text-align: center;
    }
    .copyright-area .text-right {
        text-align: center;
    }
    .copyright .nav-horizontal a {
        font-size: 11px;
        font-weight: 500;
        padding: 0;
    }
}
/* -------------------------------
  Tablet (Landscape) : 800px
------------------------------- */

@media (min-width: 769px) and (max-width: 991px) {
    /* main-slide-area */
    
    .main-slide-area .span-3,
    .main-slide-area .span-6 {
        width: calc(100% / 12 * 12 - 20px)
    }
    .main-slide-area .slide-single {
        float: left;
        padding: 0 10px;
        width: 50%;
    }
    .main-slide-area .slide-single {
        margin-top: 0;
    }
    .main-slide-area .single-middle {
        margin: 20px 0;
    }
    .main-slide-area .slide-content > h1 {
        font-size: 30px;
        margin-bottom: 5px;
    }
}
/* ------------------------
  Mobile Device (320)
------------------------- */

@media (max-width: 767px) {
    html.js {
        margin-top: 0px!important;
    }
    html .logged-in {
        margin-top: 0px!important;
    }
    .hidden-xs {
        display: none !important
    }
    /* Header */
    
    .off-canvas-right.open {
        padding-top: 80px;
        z-index: 99999 !important;
        background: #000000 none repeat scroll 0 0;
    }
    .close-canvas {
        margin-top: 20px;
    }
    .logged-in .wrapper-site {
        margin-top: 45px;
    }
    .logged-in .off-canvas-right.open {
        padding-top: 130px;
    }
    .logged-in .off-canvas-right.open .close-canvas {
        margin-right: 10px;
        margin-top: 65px;
    }
    .off-canvas-right .search-submit {
        border: 1px solid #ffffff;
        font-size: 13px;
        text-transform: uppercase;
    }
    /* logo */
    
    .custom-logo {
        width: 70px !important;
    }
    /* Slider */
    
    .hs-item .hs-content {
        margin-bottom: 100px;
        margin-top: 100px;
    }
    .hs-item .hs-content h1 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    /* post */
    
    .post-titel-author h3 a {
        font-size: 16px !important;
        line-height: 1.4;
    }
    /* instagram bottom */
    
    .media-body .excerpt .jr-insta-thumb ul.thumbnails.jr_col_6 li {
        width: 25% !important;
    }
    .media-body .excerpt .jr-insta-thumb ul.thumbnails.jr_col_6 li:nth-child(n+5) {
        display: none;
    }
    /* scrollUp */
    
    #scrollUp {
        bottom: 20px;
        font-size: 20px;
        height: 30px;
        line-height: 30px;
        right: 20px;
        width: 30px;
    }
    /* about */
    
    .lira-about-area .media-body .heading {
        font-size: 20px;
        margin-bottom: 5px;
        margin-top: 30px;
    }
    .lira-about-area .sub-heading {
        font-size: 14px;
    }
    .copyright .site-text {
        font-size: 14px;
        text-align: center;
    }
    .copyright-area .nav-horizontal ul {
        display: block;
        float: none;
        text-align: center;
    }
    .copyright-area .text-right {
        text-align: center;
    }
    .copyright .nav-horizontal a {
        font-size: 11px;
        font-weight: 500;
        padding: 0;
    }
    .form-submit input[type="submit"] {
        width: auto;
    }
    .single-article {
        margin-bottom: 80px;
    }
    /* main-slide-area */
    
    .main-slide-area .slide-single img {
        margin: auto;
    }
    .main-slide-area .single-middle {
        margin: 20px 0;
    }
    .main-slide-area .slide-content > h1 {
        font-size: 22px;
        margin-bottom: 5px;
    }
    .popular-img {
        width: 100px;
    }
}
/* -------------------------------
  (landscape) Mobile : 480px
------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* main-slide-area */
    
    .main-slide-area .span-3,
    .main-slide-area .span-6 {
        width: calc(100% / 12 * 12 - 20px);
    }
    .main-slide-area .slide-single {
        float: left;
        padding: 0 10px;
        width: 50%;
    }
    .main-slide-area .slide-single {
        margin-top: 0;
    }
    .main-slide-area .single-middle {
        margin: 20px 0;
    }
    .main-slide-area .slide-content > h1 {
        font-size: 30px;
        margin-bottom: 5px;
    }
}
/* -------------------------------------------
  (Portrait) Mobile :600px. 
------------------------------------------- */

@media only screen and (min-width: 481px) and (max-width: 640px) {
    /* about */
    
    .lira-about-area .media-body .heading {
        margin-top: 0;
    }
    /* main-slide-area */
    
    .main-slide-area .span-3,
    .main-slide-area .span-6 {
        width: calc(100% / 12 * 12 - 20px);
    }
    .main-slide-area .slide-single {
        float: left;
        padding: 0 10px;
        width: 50%;
    }
    .main-slide-area .slide-single {
        margin-top: 0;
    }
    .main-slide-area .single-middle {
        margin: 20px 0;
    }
    .main-slide-area .slide-content > h1 {
        font-size: 30px;
        margin-bottom: 5px;
    }
}
/* -------------------------------------------
  (landscape) Mobile :840px. 
------------------------------------------- */

@media only screen and (min-width: 769px) and (max-width: 840px) {
    .sidebar .content.widget {
        margin-left: 0;
        margin-right: 0;
    }
    /* main-slide-area */
    
    .main-slide-area .span-3,
    .main-slide-area .span-6 {
        width: calc(100% / 12 * 12 - 20px);
    }
    .main-slide-area .slide-single {
        float: left;
        padding: 0 10px;
        width: 50%;
    }
    .main-slide-area .slide-single {
        margin-top: 0;
    }
    .main-slide-area .single-middle {
        margin: 20px 0;
    }
    .main-slide-area .slide-content > h1 {
        font-size: 30px;
        margin-bottom: 5px;
    }
}
/* -------------------------------------------
  (landscape) Mobile :960px. 
------------------------------------------- */

@media only screen and (min-width: 840px) and (max-width: 990px) {
    .sidebar .content.widget {
        margin-left: 0;
        margin-right: 0;
    }
    /* main-slide-area */
    
    .main-slide-area {
        margin: 0 -3%;
    }
    .main-slide-area .span-3,
    .main-slide-area .span-6 {
        width: calc(100% / 12 * 12 - 20px)
    }
    .main-slide-area .slide-single {
        float: left;
        padding: 0 10px;
        width: 50%;
    }
    .main-slide-area .slide-single {
        margin-top: 0;
    }
    .main-slide-area .single-middle {
        margin: 20px 0;
    }
    .main-slide-area .slide-content > h1 {
        font-size: 30px;
        margin-bottom: 5px;
    }
}
p.inner-post-pagination {
    width: 100%;
    float: left;
}
.inner-post-pagination span:not(.pageination-page-text) {
    padding: 7px 14px;
    border: 1px solid #ddd;
    display: inline-block;
    margin: 15px 5px 0 5px;
    text-align: center;
}
.header-site .sub-menu li, 
.header-site .nav .children li {
    width: 235px;
}