Da

✏️ Editing: pages.less

/* Less Variables */
@import 'variables.less';

article[id*="post-"] {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: normal;
}
.main-container {
    // Full width template
    &.full-width {
        .wpb_row {
            margin-bottom: 0;
        }
        blockquote { 
            border: none;
            font-size: 14px;
            font-style: italic;
            margin: 20px 0;
            padding: 0 30px;
        }
    }
    .shop_content { 
        .title-breadcrumb {
            .entry-header {
                display: none;
            }
        }
        .shop-products {
            .item-col {
                margin: 30px 0 0;
            }
        }
    }
    .shop-desc, .category-desc {
        text-align: center;
        .bg-shop{
            margin-bottom: 30px;
        }
    } 
    /* ABOUT PAGE
    -----------------------------*/
    &.about-page {
        .page-content {
            padding: 0;
        } 
         
        h3 {
            background: url(../images/bg-widget-title.png) no-repeat left bottom;
            font-size: 20px;
            margin: 0 0 40px;
            padding-bottom: 15px;
            text-transform: uppercase;
            width: 100%;
        }
        .corporate-counter {
            text-align: center;
            .counter-image {
                display: inline-block;
                margin-right: 20px;
                vertical-align: middle;
            }
            .counter-info {
                color: @darkcolor;
                display: inline-block;
                text-align:left;
                vertical-align: middle;
                .counter-number {
                    font-size: 30px;
                    font-weight: bold;
                }
                .counter-text {
                    // font-family: @headingfont;
                    font-size: 12px;
                    font-weight: bold;
                    text-transform: uppercase;
                }
            }
        }
        .our-works {
            ul {
                li {
                    padding-left: 60px;
                    i {
                        background: @primarycolor;
                        border: 3px solid lighten(@primarycolor, 15%);
                        border-radius: 84px;
                        color: #fff;
                        display: inline-block;
                        float: left;
                        font-family: Ubuntu;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: bold;
                        height: 48px;
                        left: 0;
                        line-height: 42px;
                        margin-right: 15px;
                        position: absolute;
                        text-align: center;
                        top: 0;
                        width: 48px;
                    }
                    strong {
                        display: block;
                    }
                }
            }
        }
        .about-intro {
            color: @textcolor;
            font-size: 15px;
            h2 {
                font-weight: 500;
                margin-bottom: 40px;
                text-transform: capitalize;
                font-size: 33px;
                strong {
                    font-weight: 500;
                }
            }
            p {
                margin-bottom: 15px;
            }
            a.button {
                .buttonMixin();
                margin-top: 20px;
            }
        }
        .about-skill {
            .vc_progress_bar .vc_single_bar {
                margin-bottom: 35px;
                &:last-child {
                    margin-bottom: 0;
                }
                .vc_label {
                    padding: 0 0 0 10px;
                    text-transform: uppercase;
                }
            }
        }
        .vc_column_container {
            .wpb_wrapper {
                h3 {
                    border: none;
                    font-size: 21px;
                    margin: 0 0 10px;
                }
                .wpb_heading,
                h4 {
                    font-size: 16px;
                    margin: 0 0 25px;
                    padding: 0 0 5px;
                }
            }
            .vc_progress_bar {
                .vc_single_bar {
                    box-shadow: none;
                    margin: 0 0 40px;
                    .vc_label {
                        color: #000;
                        font-size: 12px;
                        height: 15px;
                        line-height: 15px;
                        padding-bottom: 0;
                        padding-left: 40px;
                        padding-top: 0;
                        .vc_label_units {
                            background: #3e3e3e;
                            border: 3px solid #a0a0a0;
                            border-radius: 100%;
                            color: #fff;
                            display: block;
                            font-size: 11px;
                            font-weight: 700;
                            height: 40px;
                            left: -10px;
                            line-height: 35px;
                            position: absolute;
                            text-align: center;
                            text-shadow: none;
                            top: -10px;
                            width: 40px;
                        }
                    }
                }
            }
            ul {
                padding: 0;
                li {
                    list-style: none;
                    padding-left: 0;
                    position: relative;
                }
            }
        } 
    }
    /* BLOG PAGE
    -----------------------------*/
    .blog-page {
        &.blog-nosidebar {
            article {
                border: 0;
                float: left;
                margin: 0 0 50px 0;
                width: 100%;
            }
        }
        .post,
        article {
            float: left; 
            width: 100%;
            &:not(:last-child) {
                margin: 0 0 50px; 
            }
            &.sticky {
                .entry-title {
                    &:before {
                        content: "\f2a6";
                        font-family: 'Ionicons';
                        display: inline-block;
                        margin-right: 10px;
                        color: @primarycolor;
                        .rotate(45deg);
                    }
                }
            }
        }
        .post-thumbnail {
            margin: 0;
            position: relative;
			float: left;
			width: 49%;
			margin-right: 30px;
            a {
                display: inline-block;
                width: 100%;
				text-align: center;
            }
            .su-slider-centered {
                margin-bottom: 0;
            }
            .su-responsive-media-yes {
                margin-bottom: 0;
            }
            .su-slider-slide-title {
                display: none;
            }
        }
        .postinfo-wrapper {
        	overflow: hidden;
			text-align: left;
			white-space: normal;
			word-wrap: break-word;
			word-break: normal;
            &.no-thumbnail {
                padding: 0;
                width: 100%;
                margin: 0; 
            }
        }
        .searchform {
            .form-input {
                .input_text {
                    height: 40px;
                    display: inline-block;
                    vertical-align: middle;
                }
                .button {
                    height: 40px;
                    line-height: 40px;
                    border-radius: 0;
                    i {
                        display: block;
                    }
                }
            }
        }
        .entry-header {
            background: none;
            border: none;
            display: block;
            float: none;
            padding: 0;
            margin: 0 0 20px;
        }
        .entry-title {
            text-transform: capitalize;  
            &:after {
                display: none;
            }
            a {
                color: @headingcolor;
                &:hover {
                    color: @primarycolor;
                }
            }
        }
        .post-meta{
            font-size: .93em;
            margin: 0;  
        }
        .post-category {
            background: @primarycolor;           
			font-size: 10px; 
			text-transform: uppercase;
            z-index: 11;
            padding: 0 5px;
           display: none;
            a {
                 color:#fff;
            }
        }
        .post-date {
            span {
                padding-right: 2px;
            }
        }
        .post-separator {
            color: lighten(@textcolor, 30%);
            display: inline-block;
            margin: 0 10px;
            vertical-align: middle;
        }
         .post-author,.post-date{
            font-size: 12px;
            color: lighten(@textcolor, 30%);
        }
        .post-author{
        	color: @primarycolor;
        	.post-by{
        		color: lighten(@textcolor, 30%);
        	}
        	&:before{
				content: '\f007';
				display: inline-block;
				font-family: FontAwesome;
				margin-right: 5px;
                color: lighten(@textcolor, 30%);
        	}
			
        }
        .post-date{
        	&:before{
				content: '\f073';
				display: inline-block;
				font-family: FontAwesome;
				margin-right: 5px;
                color: lighten(@textcolor, 30%);
        	}
			
        }
        .su-responsive-media-yes {
            margin-bottom: 0;
        }
        .player {
            float: left;
            margin: 10px 0 0;
            width: 100%;
        }
        .archive-title { 
            margin: 0 0 10px;
            padding: 0;
        }
        .entry-summary,
        .entry-content {
            margin: 10px 0 0;
            .readmore {
                margin-top: 10px;
            }
        }
        blockquote {
            border-left: 4px solid @primarycolor;
            color: @lightgreycolor;
            font-size: 14px;
            font-style: italic;
            line-height:27px;
            margin: 20px 0 20px 0;
            padding: 0 20px; 
        }
         
        .entry-meta {
            float: left;
            margin: 0 0 20px;
            padding: 5px 0;           
             
        }
        .social-comment {
        	display: none;
            .clearfix();
            .comment {
                float: right;
                margin-top: 12px;
                color:#fff;
                &:hover {
                    color: @primarycolor;
                }
            }
        }
        .social-sharing {
            float: right;
           margin: 0;
            .widget-title {
                background: none;
                font-size: 14px;
                line-height: 26px;
                margin: 0 10px 0 0;
                width: auto;
                font-family: @bodyfont;
                display: inline-block;
                vertical-align: middle;
            }
            .social-icons {
                margin: 0;
                padding: 0;
                display: inline-block;
                vertical-align: middle;
                li {
                    display: inline-block;
                    vertical-align: middle;
                    list-style: none;
                    position: relative;
                    &:first-child {
                        border-left: none;
                    }
                    .roadtip {
                        line-height: 1.5;
                    }
                    .social-icon {
                        background: darken(@pagecontentbackground, 10%);
                        border-radius: 100%;
                        display: inline-block;
                        font-size: 12px;
                        height: 26px;
                        line-height: 26px;
                        margin-right: 5px;
                        text-align: center;
                        width: 26px;
                        &:hover {
                            background: @primarycolor !important;
                            color: #fff;
                        }
                        i {
                            line-height: 26px;
                        }
                    }
                }
            }
        }
        .author-info {
            float: left;
            margin: 0;
            padding-left: 100px;
            position: relative;
            width: 100%;
            h2 {
                font-size: 16px;
                margin: 0 0 10px;
                text-transform: uppercase;
            }
            .author-avatar {
                left: 0;
                position: absolute;
                top: 0;
            }
            .author-description {
                color: @greycolor;
                a {
                    color: @greycolor;
                    font-weight: bold;
                    margin-left: 5px;
                    text-transform: none;
                    &:hover {
                        color: @linkhovercolor;
                    }
                }
            }
        }
        .moretag {
            color: @primarycolor;
            &:hover {
                color: @primarycolor;
            }
        }
        .navigation {
            .newer {
                float: left;
                a:before {
                    content: '\f177';
                    display: inline-block;
                    font-family: FontAwesome;
                    font-size: 12px;
                    margin-right: 5px;
                }
            }
            .older {
                float: right;
                a:after {
                    content: '\f178';
                    display: inline-block;
                    font-family: FontAwesome;
                    font-size: 12px;
                    margin-left: 5px;
                }
            }
        }
        .pagination {
            float: left;
            width: 100%;
            margin: 0;
            .pagination-inner {  
                position: relative; 
                border: 1px solid @bordercolor;
                border-radius: 4px; 
                text-align: right;
                padding: 13px 15px;
                text-align: center; 
            } 
            a,
            span {
                background: rgba(241, 241, 241, 0.2);
                border-radius: 100%;
                color: @headingcolor;
                display: inline-block;
                padding: 0;
                font-size: 1em;
                font-weight: normal;
                text-align: center;
                text-transform: uppercase;
                line-height: 32px;
                height: 32px;
                width: 32px;
                &.current,
                &:hover {
                    background: @primarycolor;
                    color: @white;
                }
                &.next,
                &.prev {
                    font-size: 0;
                    position: relative; 
                    &:before {
                        display: inline-block;
                        font-family: FontAwesome;
                        font-size: 14px;
                        vertical-align: baseline;
                    } 
                }
                &.prev { 
                    &:before {
                        content: '\f100';
                    }
                }
                &.next { 
                    &:before {
                        content: '\f101';
                    }
                }
            }
        }
        .page-links {
            clear: both;
            margin: 15px 0;
            a {
                background: rgba(241,241,241,0.2);
                color: #fff;
                display: inline-block; 
                font-size: 1em;
                font-weight: normal;
                height: 30px;
                line-height: 30px;
                padding: 0;
                width: 30px;
                text-align: center;
                .border-radius(100%);
                &.current,
                &:hover {
                    background-color: @primarycolor;
                    color: @white;
                }
            }
            & > span {
                background: @primarycolor;
                color: #fff;
                display: inline-block; 
                font-size: 1em;
                font-weight: normal;
                height: 30px;
                line-height: 30px;
                padding: 0;
                width: 30px;
                text-align: center;
                .border-radius(100%);
            }
        }
        .comments-area {
            float: left;
            width: 100%;
            .comments-title,
            .comment-reply-title { 
                position: relative;
                text-transform: capitalize;
            }
            .commentlist {
               margin: 25px 0 0;
                .clearfix();
                li.comment {
                    float: left;
                    list-style: none;
                    width: 100%;
                    article.comment {
						margin: 0 0 25px; 
                        .comment-avatar {
                            float: left;
                        }
                        .comment-info {
                            border:1px solid @bordercolor;
                            border-radius: 3px;
                            margin-left: 75px;
                            padding: 15px;
                            position: relative;
                            .clearfix();
                            &:before {
                                border-bottom: 1px solid @bordercolor;
                                border-left: 1px solid @bordercolor;
                                content: '';
                                display: block;
                                height: 10px;
                                left: -5px;
                                position: absolute;
                                top: 10px;
                                transform: rotate(45deg);
                                width: 10px;
                            }
                            .reply {
                                display: inline-block;
                                font-style: normal;
                                float: right;
                                margin-left: 10px;
                                position: absolute;
                                right: 15px;
                                top: 15px;
                                 
                                a {
                                    padding: 2px 8px;
                                    border-radius: 3px;
                                    color: #fff;
									background: #333;
									border: 1px solid #2d2d2d;
                                    &:hover {
                                        background: @primarycolor;
                                        border-color: @primarycolor;
                                        color: #fff;
                                    }
                                }
                            }
                        }
                    }
                }
                .comment-meta {
                    float: left;
                    line-height: 1;
                    margin: 0 0 10px;
                    width: 100%;
                    font-style: italic;
                    img {
                        margin-right: 10px;
                    }
                    cite {
                        float: left;
                        margin-bottom: 10px;
                        .fn {
                            font-size: 12px;
                            font-weight: 500;
                            text-transform: uppercase; 
                        }
                        span {
                            display: none;
                        }
                    }
                    time {
                        clear: both;
                        float: left;
                        font-size: 12px; 
                    }
                    p {
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
                .comment-content {
                    float: left;
                    width: 100%;
                    p:last-child {
                        margin-bottom: 0;
                    }
                        .edit-link {
                            font-size: .857em;
                            .comment-edit-link{
                            	color: @primarycolor;
                            }
                        }
                }
            }
            .pagination {
                clear: both;
                margin: 15px 0;
                width: 100%;
                .next,
                .prev {
                    position: relative;
                    text-indent: -9999px;
                    &:after {
                        content: '\f054';
                        display: inline-block;
                        font-family: FontAwesome;
                        height: 34px;
                        left: 0;
                        position: absolute;
                        text-align: center;
                        text-indent: 0;
                        top: 0;
                        width: 34px;
                    }
                }
                .prev {
                    &:after {
                        content: '\f053';
                    }
                }
            }
            .comment-respond {
                float: left;
                width: 100%; 
                .comment-form {
                    margin-bottom: 30px;
                    label {
                        display: inline-block;
                        margin-bottom:10px;
                    }
                    .comment-input {
                        margin: 0 -10px;
                        p.comment-form-cookies-consent{
                            margin-left: 10px;
                            clear: both;
                            #wp-comment-cookies-consent{
                                margin: 0 5px 0 0;
                                display: inline-block;
                                vertical-align: middle;
                            }
                            label{
                                display: inline-block;
                                vertical-align: middle;
                                margin: 0;
                            }
                        }
                    }
                    .comment-form-author,
                    .comment-form-email,
                    .comment-form-url {
                        float: left;
                        padding:10px;
                        width: 33.3333%;
                        input {
                            width: 100%;
                            border:1px solid @bordercolor; 
                            border-radius: 3px;
                            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                            &:focus{
                                border-color: #494949;
                            }
                        }
                    }
                    #comment {
                        background: none;
                        border:1px solid @bordercolor; 
                        min-height: 100px;
                        outline: none;
                        width: 100%;
                        border-radius: 3px;
                        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                        &:focus{
                            border-color: #494949;
                        }

}
                    .form-submit {
                        margin-top: 20px;
                    }
                    #submit {
                        background: #333;
                        border: 0;
                        color: #fff;
                        &:hover {
                            background: @primarycolor;
                        }
                    }
                }
            }
        }
        .nav-single {
            border-bottom: 1px solid @bordercolor;
            border-top: 1px solid @bordercolor;
            float: left;
            font-size: 13px;
            padding: 10px 0;
            width: 100%;
            a {
                color: @greycolor;
                &:hover {
                    color: @primarycolor;
                }
            }
            .nav-previous {
                float: left;
            }
            .nav-next {
                float: right;
            }
        }
        .btn,
        .btn-primary,
        #searchsubmit,
        #wsearchsubmit {
            background: @primarycolor;
            border: none;
            border-radius: 2px;
            box-shadow: none;
            color: #fff;
            font-size: 14px;
            font-weight: normal;
            height: 26px;
            line-height: 26px;
            padding: 0 10px;
            text-shadow: none;
            -webkit-transition: all .4s ease;
                    transition: all .4s ease;
            &:hover {
                background: @greycolor;
            }
        }
        .archive-header {
            border-bottom: 1px solid @bordercolor;
            margin-bottom: 30px;
            span {
                text-transform: capitalize;
                font-weight: 500;
            }
        }
        .author-info.archives {
            margin: 0 0 60px;
            .author-avatar {
                margin-right: 0;
            }
            .author-description {
                margin-left: 82px;
                h2 {
                    border-bottom: 1px solid @bordercolor;
                    margin: 0 0 10px;
                }
            }
        }
        .attachment {
            .navigation {
                border-bottom: 1px solid @bordercolor;
                border-top: 1px solid @bordercolor;
                margin: 0 0 25px;
                padding: 5px 0;
            }
        }
        &.single {
            .author-info {
                border-bottom: 1px solid @bordercolor;
                margin-bottom: 40px;
                padding-bottom: 40px;
            }
            .postinfo-wrapper{
                .entry-content{ 
                    margin-bottom: 13px;  
                    .clearfix();
                }
                .post-info {
                    .clearfix();
                }
            }
            .post-category{
                left: 25px;
            }
            .relatedposts {
                float: left;
                width: 100%;
                margin: 15px 0 0;
                padding: 25px 0 0 0;
                border-top: 1px solid @bordercolor;
                h3 {
                    margin: 0 0 30px;
                    position: relative;
                    text-transform: capitalize;
                }
            }
            .relatedthumb {
                float: left;
                .image {
                    margin-bottom: 20px;
                }
                .post-date{
                    color: lighten(@textcolor, 30%);
                }
                .short-description {
                    color: @greycolor;
                    font-size: 13px;
                    margin-bottom: 15px;
                }
                h4 {
                    font-size: 16px; 
                    margin: 0;
                    text-transform: capitalize;
                    a {
                        color: @headingcolor;
                        &:hover {
                            color: @primarycolor;
                        }
                    }
                }
                img {
                    padding: 0;
                    width: 100%;
                }
                a { 
                    text-decoration: none;
                }
            }
            .post {
                .clearfix();
                .player {
                    float: right;
                    max-width: none;
                    padding: 0;
                }
            }
            .post-thumbnail {
                width: 100%;
                .post-date {
                    left: 10px;
                    right: auto;
                }
            }
			.entry-header { 
				padding-top: 0; 
				.entry-title { 
					color: @headingcolor; 
					&:after {
						max-width: 180px;
					}
				}
				.post-separator {
					color: @greycolor;
					display: inline-block;
					margin: 0 10px;
				}
                .post-author,.post-date{
                    font-size: 12px;
                }
                .post-author{
                	&:before{
						content: '\f007';
						display: inline-block;
						font-family: FontAwesome;
						margin-right: 5px;
                       color: #fff;
                	}
					
                }
                .post-date{
                	&:before{
						content: '\f073';
						display: inline-block;
						font-family: FontAwesome;
						margin-right: 5px;
                        color: #fff;
                	}
					
                }
                
			}
            .postinfo-wrapper {
                float: right;
                padding: 30px 0 0;
                width: 100%; 
            }
            .entry-meta {
                text-transform: capitalize;
                margin: 0;
            }
            .comments-area {
                border-top: 1px solid @bordercolor;
                float: right;
                max-width: none;
                padding-top: 20px;
                
            }
            label {
                vertical-align: middle;
                margin: 0;
            }
			button, html input[type=button], input[type=reset], input[type=submit] {
				.buttonMixin();
				height: 29px;
				line-height: 29px;
				padding: 0 15px; 
			}
        }
        &.style_v2 { 
            &:not(.single) {
                margin: 0 -15px;
                width: auto;
                .post, .article {
                    margin-bottom: 40px;
                    border: 0;
                    width: 50%;
                    padding: 0 15px;
                    &:nth-of-type(2n+1) {
                        clear: both;
                    }
                } 
            }
            .post, .article { 
                .post-thumbnail {
                    margin: 0 0 20px;
                    width: 100%; 
                }
                .postinfo-wrapper {
                    width: 100%;
                    padding: 0;  
                } 
            } 
            &.single {
                .entry-content {
                    padding: 0;
                }
            }
        }
        &.style_v3 {  
            .post, .article { 
                .post-thumbnail { 
                    width: 100%; 
                    margin: 0 0 30px;
                }
                .postinfo-wrapper {
                    width: 100%;
                    padding: 0;  
                    .entry-title {
                        font-size: 24px;
                    }
                }
                  
            }  
        }
        &.style_v4 {
            .post {
                &:first-child {
                    .post-thumbnail {
                        width: 100%;
                        margin: 0 0 30px;
                    }
                    .postinfo-wrapper {
                        width: 100%;
                        padding: 0;
                        .entry-title {
                            font-size: 24px;
                        }
                    }
                }
            }
        }
    }
    /* Contact page */
    &.contact-page {
        .page-content {
            padding: 0;
        }  
        .contact-input {
            display: block;
            margin: 0 -10px;
            &:after {
                clear: both;
                content: '';
                display: table;
            }
            span {
                float: left;
                margin: 0 0 20px;
                padding: 0 10px;
                width: 50%;
                &.wpcf7-not-valid-tip {
                    margin: 0;
                }
                span {
                    width: 100%;
                }
                input,
                .wpcf7-text { 
                    border: 1px solid @bordercolor;
                    border-radius: 0;
                    height: 46px;
                    padding-left: 15px;
                    width: 100%;
                }
            }
        }
        .contact-message {
            float: left;
            margin: 0 0 20px;
            width: 100%;
            span {
                float: left;
                width: 100%;
            }
            textarea,
            .wpcf7-textarea {
                border-radius: 0;
                height: 135px;
                padding: 15px;
                width: 100%;
            }
        }
        .address {
            ul {
                max-width: 380px;
                padding: 0;
                li {
                    border-top: 1px solid @bordercolor;
                    list-style: none;
                    padding: 10px 0;
                    i {
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        width: 40px;
                    }
                }
            }
        }
        .box-contact-1 {
            text-align: center;
            .widget_text {
                .widgettitle {
                    font-size: 30px;
                    font-weight: 900;
                    text-transform: uppercase;
                }
            }
        }
        .box-contact-2 {
            text-align: center;
            .vc_icon_element {
                > div.vc_icon_element-inner {
                    border: 0;
                    border-radius: 100%;
                    box-shadow: 0 0 0 3px @darkcolor;
                    color: #fff;
                    height: 95px !important;
                    line-height: 95px !important;
                    text-align: center;
                    -webkit-transition: color .3s;
                       -moz-transition: color .3s;
                            transition: color .3s;
                    width: 95px !important;
                    &:hover {
                        background: @primarycolor !important;
                        box-shadow: 0 0 0 3px @primarycolor;
                        span,
                        a {
                            color: @white !important;
                        }
                    }
                }
            }
        }
        .box-contact-3 {
            .contact-input {
                span {
                    input {
                        background:#e7e7e7;
                    }
                }
            }
            .contact-message {
                .wpcf7-textarea {
                    background:#e7e7e7;
                }
            }
            .contact-submit {
                display: inline-block;
                text-align: center;
                width: 100%;
            }
        }
        .box-contact-4 {
            text-align: center;
            .vc_icon_element {
                margin: 0;
                > div {
                    background: rgba(120, 120, 120, .61);
                    border: 0;
                    border-radius: 100%;
                    color: #fff;
                    height: 95px !important;
                    line-height: 95px !important;
                    text-align: center;
                    -webkit-transition: color .3s;
                    -webkit-transition: -webkit-transform .2s, opacity .2s;
                       -moz-transition: color .3s;
                       -moz-transition:    -moz-transform .2s, opacity .2s;
                            transition: color .3s;
                            transition:         transform .2s, opacity .2s;
                            transition: background .2s, color .2s;
                    width: 95px !important;
                    &:after {
                        border: 2px solid transparent;
                        border-radius: 50%;
                        bottom: 4px;
                        -webkit-box-sizing: content-box;
                           -moz-box-sizing: content-box;
                                box-sizing: content-box;
                        content: '';
                        left: 4px;
                        position: absolute;
                        right: 4px;
                        top: 4px;
                        -webkit-transition: -webkit-transform .2s, opacity .2s;
                           -moz-transition:    -moz-transform .2s, opacity .2s;
                                transition:         transform .2s, opacity .2s;
                        z-index:1;
                        pointer-events: none;
                    }
                    &:hover {
                        background: @primarycolor;
                        &:after {
                            border-color: #fff;
                        }
                    }
                    span,
                    a {
                        color: #fff !important;
                        z-index: 11;
                    }
                }
            }
        }
        .contact-infor, .contact-form {
            h2 {
                font-size: 1.5em;
            }
        }
    }
    // Default page template
    &.default-page {
        blockquote {
            border: none;
            font-size: 14px;
            font-style: italic;
            margin: 10px 0;
            padding: 0;
        }
        .comments-area {
            clear: both;
            float: left;
            margin: 0;
            width: 100%;
            .comments-title,
            .comment-reply-title {
                border-top: 1px solid @bordercolor;
                font-size: 20px;
                margin: 0 0 20px;
                padding: 25px 0 0;
                text-transform: capitalize;
            }
            .comment-respond {
                .comment-form {
                    margin-bottom: 30px;
                }
            }
            .commentlist {
                margin: 0 0 40px;
                padding: 0;
                li.comment {
                    list-style: none;
                    article.comment {
                        margin: 0 0 25px;
                        .comment-avatar {
                            float: left;
                        }
                        .comment-info {
                            border:1px solid @bordercolor;
                            border-radius: 3px;
                            margin-left: 60px;
                            padding: 15px;
                            position: relative;
                            &:before {
                                border-bottom: 1px solid @bordercolor;
                                border-left: 1px solid @bordercolor;
                                content: '';
                                display: block;
                                height: 10px;
                                left: -5px;
                                position: absolute;
                                top: 10px;
                                transform: rotate(45deg);
                                width: 10px;
                            }
                            .reply {
                                display: inline-block;
                                font-style: normal;
                                float: right;
                                margin-left: 10px;
                                position: absolute;
                                right: 15px;
                                top: 15px;
                                 
                                a {
                                    padding: 2px 8px;
                                    border-radius: 3px;
                                    color: #fff;
                                    background: #333;
                                    border: 1px solid #2d2d2d;
                                    &:hover {
                                        background: @primarycolor;
                                        border-color: @primarycolor;
                                        color: #fff;
                                    }
                                }
                            }

}
                    }
                }
                .comment-meta {
                    float: left;
                    line-height: 1;
                    margin: 0 0 10px;
                    width: 100%;
                    font-style: italic;
                    img {
                        margin-right: 10px;
                    }
                    cite {
                        float: left;
                        margin-bottom: 10px;
                        .fn {
                            font-size: 12px;
                            font-weight: 500;
                            text-transform: uppercase; 
                        }
                        span {
                            display: none;
                        }
                    }
                    time {
                        clear: both;
                        float: left;
                        font-size: 12px; 
                    }
                    p {
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
                .comment-content {
                    font-size: 13px;
                    p:last-child {
                        margin: 0;
                    }
                }
            } 
            .comment-form {
                label {
                    display: block;
                }
                .comment-notes,
                .form-allowed-tags {
                    font-size: 12px;
                }
                .comment-input {
                    margin: 0 -10px;
                }
                .comment-form-author,
                .comment-form-email,
                .comment-form-url {
                    float: left;
                    padding: 0 10px;
                    width: 33.3333%;
                    input {
                        width: 100%;
                    }
                }
                #comment {
                    min-height: 130px;
                    width: 100%;
                }
            }
        }
    }
    /* Error 404 page */
    &.error404 {
        min-height: 200px;
        text-align: center;
        .search-form-wrapper {
            padding: 100px 0;
            h1 {
                color: @primarycolor;
                font-size: 200px;
                font-weight: 900;
                letter-spacing: 10px;
                line-height: 1.1;
                margin: 0 0 30px;
            }
            h2 {
                color: #fff;
                font-size: 40px;
                text-transform: uppercase;
                font-weight: 600;
            }
            p {
                color: @textcolor;
                font-size:15px;
                font-weight: 300;
                margin: 20px auto 30px;
                text-align: center;
                width: 60%;
            }
            
            a.button {
                background: @primarycolor;
                border-radius: 35px;
                box-shadow: none;
                color: #fff;
                display: inline-block;
                font-family: Josefin Sans, Arial, Helvetica, sans-serif;
                font-size: 12px;
                font-weight: bold;
                height: 40px;
                line-height: 40px;
                margin-top: 60px;
                padding: 0 30px;
                text-shadow: none;
                text-transform: uppercase;
                -webkit-transition: all .3s ease;
                        transition: all .3s ease;
                white-space: nowrap;
                &:hover {
                    background: darken(@primarycolor, 10%);
                }
            }
        }
    }
    &.service-page {
        .page-content {
            padding-bottom: 0;
        }
        .box-services {
            .wpb_column {
                &:hover {
                    .wpb_text_column .box-content {
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }
            .wpb_content_element {
                margin-bottom: 0;
            }
            .vc_column-inner {
                padding: 0;
                .wpb_single_image {
                    margin-bottom: 0;
                }
                > .wpb_wrapper {
                    overflow: hidden;
                    position: relative;
                    .box-content {
                        background: #fff;
                        bottom: 0;
                        left: 0;
                        opacity: 0;
                        padding: 40px;
                        padding-top: 80px;
                        position: absolute;
                        right: 0;
                        text-align: center;
                        top: 0;
                        -webkit-transition: all .2s ease-out;
                           -moz-transition: all .2s ease-out;
                            -ms-transition: all .2s ease-out;
                             -o-transition: all .2s ease-out;
                        visibility: hidden;
                        i {
                            background: @darkcolor;
                            border-radius: 100%;
                            color: #fff;
                            display: inline-block;
                            font-size: 40px;
                            height: 115px;
                            line-height: 115px;
                            text-align: center;
                            width: 115px;
                            &:before {
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
        }
        // corporate-counter
        .corporate-price-table {
            .ts-price-table {
                background: #343434;
                border-radius: 3px;
                box-shadow: 0 1px #fff inset, 0 1px 3px rgba(34, 25, 25, .4);
                text-align: center;
                header {
                    background: lighten(@primarycolor, 10%);
                    padding: 20px;
                    h3,
                    h4 {
                        color: #fff;
                        font-size: 14px;
                        font-weight: 600;
                        text-transform: uppercase;
                    }
                }
                .table-description {
                    padding: 0 20px 40px 20px;
                    .table-price {
                        font-family: @headingfont;
                        font-size: 48px;
                        font-weight: bold;
                        margin: 0;
                        padding: 50px 0;
                        text-transform: uppercase;
                        .desc-price {
                            font-size: 12px;
                        }
                    }
                    ul {
                        li {
                            border-bottom: 1px solid @bordercolor;
                            list-style: none;
                            padding: 15px 0;
                            &:first-child {
                                border-top: 1px solid @bordercolor;
                            }
                        }
                    }
                    a.button {
                        background: none;
                        border: 1px solid @darkcolor;
                        color:@darkcolor;
                        line-height: 40px;
                        margin:40px 0 0;
                        padding: 0 20px;
                        &:hover {
                            background: @primarycolor;
                            border-color:@primarycolor;
                            color: #fff;
                        }
                    }
                }
                &.active-table {
                    header {
                        background: @primarycolor;
                    }
                    .table-description {
                        a.button {
                            background: @primarycolor;
                            border-color:@primarycolor;
                            color: #fff;
                            &:hover {
                                background: @darkcolor;
                                border-color:@darkcolor;
                            }
                        }
                    }
                }
            }
        }
    }
    .deals-page {
        .shop-products {
            .product-wrapper {
                .count-down {
                    display: block;
                }
            }
        }
    }
}

.latest-posts4.vc_row .row-container{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1230px;
}
.main-container .latest-posts4 .box-text{
    margin: 0 15px 30px 15px;
}
.main-container .latest-posts4 .posts-carousel{
    .group{
        padding: 0 15px;
    }
}
.latest-posts4 .posts-carousel .owl-item .group{
     &:not(:last-child){
        margin-right: 30px;
    }
    .post-thumb{
         display: block;
        img{
            height: max-content;
        }
    }
}

/* PORTFOLIO
-----------------------------*/
.main-container .esg-loadmore-wrapper {
    margin-top: 30px;
}

// contact-us pages
.wpcf7-form{
    label{
        font-weight: normal;
        display: block !important;
    }
}
.wpcf7{
    font-size: 12px;
    input,textarea{
        width: 100%;
        font-size: 14px;
        height: 42px;
    }
    .wpcf7-textarea{
        height: auto;
    }
    .wpcf7-submit{
        .buttonMixin();
        width: auto;
    }

}
.not-found{
    .form-input{
        .button{
            .buttonMixin();
            vertical-align: middle;
            font-size: 20px; 
        }
    }
}
.post-password-form input[type=submit] {
    color: #FFF;
    box-shadow: none;
    display: inline-block;
    font-size: 1.3rem;
    border: 1px solid #333333;
     background: #333333; 
    font-weight: 500;
    border-radius: 0;
    padding: 0 20px;
    line-height: 40px !important;
    height: 40px !important;
    text-shadow: none;
    text-transform: capitalize;
    white-space: nowrap;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    margin-left: 5px;
    vertical-align: middle;
    &:hover{
        background: @primarycolor;
        border-color:@primarycolor;
    }
}

.post-password-form input[type="password"]{ 
    border: 1px solid @bordercolor;
    height: 40px;
    padding: 5px; 
}
#comments{
    .comment-respond{
        .form-submit{
            margin: 20px 0;
            input[type=submit]{
                .buttonMixin();
            }
        }
    }
}
 
// blog-page
.main-container{
    .blog-page{
        overflow: hidden;
    }
}
.blog-page.single{
    .post{
            width:100%;
            padding:0;
            float: none;
        }
}
.main-container .blog-page .post:nth-of-type(2n+1){
    clear: left;
}

📁 Sid Gifari File Manager