@import 'variable';
@import 'mixin';


/* Typography
================================================== */

body {
    color: #232323;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 24px;
    font-family: $arimo;
    background: #e9edf2;
}
.body-color{
    background: #f0f1f4;
}


p{
    margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
.navbar-container .navbar .nav-item a,
.post-cat,
.post-list-item .nav-tabs li a,
.ts-social-list li b,
.widgets.ts-social-list-item ul li a b,
.footer-social li a,
.ts-cat-title span,
.view-link-btn span {
    font-family: $heebo;
}

h1 {
    font-size: 36px;
    font-weight: 500;

}
h2 {
    font-size: 28px;
    font-weight: 500;

}

h3 {
    font-size: 20px;
    font-weight: 500;
}

h4 {
    font-size: 16px;
}

/* Global styles
================================================== */

a,
a:active,
a:focus,
a:hover,
a:visited {
    text-decoration: none;
    outline: 0 solid;

}
a{
    transition: all ease 500ms;
}

a:hover {
    color: $primary-color;
}
// btn
.btn{
    font-size: 13px;
    text-transform: uppercase;
    color: $white-color;
    cursor: pointer;
    outline: none;
    border: none;
    padding: 13px 37px;
    border-radius: 0;
    font-weight: 600;
    &.btn-primary{
        // background: #e91e63;
        background: $primary-color;
    }
    &:hover{
        background: #222;
    }
}
// read more btn
.read-more-btn {
    font-size: 11px;
    font-weight: 500;
    color: #888888;
    text-transform: uppercase;
    border: 1px solid #ddd;
    display: inline-block;
    padding: 4px 20px;
}
// older post btn
.older-post-btn {
    .read-more-btn {
        background: $white-color;
        color: #232323;
        border: none;
    }
}
// view link btn
.view-link-btn,
.view-link-btns {
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    margin: auto;
    text-align: center;
    margin: auto;
    transform: translateY(-20%);

    span {
        background: $white-color;
        height: 48px;
        line-height: 48px;
        padding: 2px 20px;
        min-width: 140px;
        display: inline-block;
        text-transform: uppercase;
        font-size: 11px;
        color: #222222;
        font-weight: 500;
    }
}

button:focus,
.btn:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none !important;
}


section, .section{
    padding: 15px 0;
}
.section-bg{
    background: #f7f7f7;
}

.hidden{
    display: none!important;
}
.pl-0{
    padding-left: 0;
}
.pl-10{
    padding-left: 10px;
}
.pr-0{
    padding-right: 0;
}
.pb-0{
    padding-bottom: 0;
}
.pt-0{
    padding-top: 0;
}
.p-0{
    padding: 0;
}
.pr-10{
    padding-right: 10px;
}
.p-30{
    padding: 30px 0;
}
.p-50{
    padding: 50px 0;
}
.p-60{
    padding: 60px 0;
}
.pt-110{
    padding-top: 110px;
}
.p-10{
    padding: 0 10px;
}
.plr-30{
    padding: 0 30px;
}
.plr-1{
    padding: 0 5px;
}
.plr-10{
    padding: 0 10px;
}
.p-100{
    padding: 100px 0;
}
.mt-15{
    margin-top: 15px;
}
.mt-50{
    margin-top: 50px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-15{
    margin-bottom: 15px;
}
.mb-25{
    margin-bottom: 25px;
}
.mb-30{
    margin-bottom: 30px !important;
}
.mb-35{
    margin-bottom: 35px;
}
.mb-40{
    margin-bottom: 40px;
}
.mb-45{
    margin-bottom: 45px;
}
.mb-50{
    margin-bottom: 50px;
}
.mb-60{
    margin-bottom: 60px;
}
.mb-70{
    margin-bottom: 70px;
}
.mb-80{
    margin-bottom: 80px;
}
.mr--20{
    margin-right: -20px;
}
.gap-30{
    height: 30px;
}

.post-cat{
    background: $blue-color;
}
/*Text color --*/
.green-color{
    color: $green-color;
}
.blue-color{
    color: $blue-color;
}
.blue-dark-color{
    color: $blue-dark-color
}
.bl-light-color{
    color: $blue-light-color;
}
.pink-color{
    color: $pink-color;
}
.yellow-color{
    color: $yellow-color;
}
.purple-color{
    color: $purple-color !important;
}
/*---- Background color --*/
.ts-green-bg{
    background:$green-color;
}
.ts-blue-bg{
    background: $blue-color;
}
.ts-blue-dark-bg{
    background: $blue-dark-color;
}
.ts-blue-light-bg{
    background:  $blue-light-color;
}
.ts-pink-bg{
    background: $pink-color;
}
.ts-yellow-bg{
    background: $yellow-color;
}
.ts-orange-bg{
    background: $orange-color;
}
.ts-purple-bg{
    background: $purple-color;
}
.ts-white-bg{
    background: $white-color;
}
.ts-blue-light-heighlight{
    background: $blue-light-color;
}

/* social color */
.ts-facebook{
    a{
        i{
            background: $facebook;
        }
    }
}
.ts-google-plus{
    a{
        i{
            background: $google-plus;
        }
    }
}
.ts-twitter{
    a{
        i{
            background: $twitter;
        }
    }
}
.ts-pinterest{
    a{
        i{
            background: $pinterest;
        }
    }
}
.ts-linkedin{
    a{
        i{
            background: $linkedin;
        }
    }
}
.ts-youtube{
    a{
        i{
            background: $youtube;
        }
    }
}

/* defailt title setting */
.ts-title{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    color: #151515;
    .title-before{
        position: absolute;
        left: -30px;
        top: 0;
        width: 3px;
        height: 100%;
        content: '';
        background: $primary-color;
    }
    &.white{
        color: $white-color;
    }
    &.block-title-style2{
        .view-all-link{
            min-width: 55px;
            margin-left: 10px;
        }
    }
    &.title-bg {
        display: flex;
        align-items: center;
        margin-left: 0 !important;
        .title-text {
            position: relative;
            font-size: 14px;
            font-weight: 600;
            background: $primary-color;
            color: $white-color;
            line-height: 26px;
            padding: 0 5px;
            padding: 2px 15px;
            display: inline-block;
            z-index: 1;
            white-space: nowrap;
            margin-right: 20px;

        }

        .title-after {
            width: 100%;
            height: 1px;
            background: $primary-color;
        }
    }
    &.block-title-style3,
    &.block-title-style5 {
        margin-left: 0 !important;
        display: flex;
        align-items: center;
        .title-text{
            white-space: nowrap;
            margin-right: 20px;
        }
        .title-after {
            width: 100%;
            height: 1px;
            background: $primary-color;
        }
    }

    &.block-title-style3{
        .title-text{
            background: transparent !important;
        }
    }
    &.block-title-style7{
        align-items: flex-end;
        .title-text{
            margin-right: 0;
        }
        .view-all-link{
            position: absolute;
            right: 0;
            top: 5px;
            z-index: 1;
        }
    }
}
// title area
.title-area,
.grid-no-shadow{
    .block-title-style1,
    .block-title-style5{
        margin-left: 30px !important;
    }
}
.ts-grid-box.ts-col-box,
.widgets-populer-post{
    .block-title-style1{
        margin-left: 15px;
    }
}

// slider title
.most-populer-item,
.has-block-title-style5,
.has-block-title-style2,
.has-block-title-style3,
.ts-grid-box-heighlight{
    .block-title-style2,
    .block-title-style3,
    .block-title-style5{
        padding-right: 50px
    }
}
// post title
.post-title{
    font-size: 15px;
    font-weight: 500;
    color: #151515;
    margin-bottom: 5px;
    line-height: 20px;
    //  min-height: 35px;
    &.lg{
        font-size: 36px;
        margin-bottom: 17px;
        word-break: break-word;
        line-height: 40px;
    }

    &.ex-lg{
        font-weight: 700;
        font-size: 44px;
        color: #212121;
        margin-bottom: 15px;
    }
    &.md{
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 10px;
    }
    &.md-title{
        font-size: 24px;
        margin-bottom: 10px;
    }
    &.large{
        font-size: 30px;
        margin-bottom: 15px;
        font-weight: 500;
        line-height: 36px;
    }
    a{
        color: #222222;
        &:hover{
            color: $primary-color;
        }

    }
}
.section-bg {
    .ts-cat-title {
        span {
            &:before {
                background: #f7f7f7;
            }
        }
    }
}
// border top
.border-top{
    border-top: 1px solid #e9e9e9;
    &.bar1{
        border-color: #4d4d70;
    }
}
// featured slider
#featured-slider{
    .owl-nav{
        position: absolute;
        right: 0;
        top: 0;
        .owl-prev{
            &:before{
                position: absolute;
                right: 0;
                top: 0px;
                bottom: 0;
                width: 1px;
                height: 15px;
                background: #406a91;
                content: '';
                margin: auto;
            }
        }
        .owl-prev,
        .owl-next{
            font-size: 14px;
            background: #00386c;
            color: $white-color;
            width: 28px;
            height: 28px;
            display: inline-block;
            position: relative;
            margin: 0;
        }
    }
}

/* post meta --*/
.post-meta-info{
    margin-bottom: 10px;
    padding-left: 0;
    li{
        font-size: 12px;
        display: inline-block;
        position: relative;
        margin-right: 20px;
        @include transition();
        font-weight: 600;
        color: #5c5c5c;
        i{
            margin-right: 6px;
            font-size: 15px;
        }
        a{
            color: #5c5c5c;

            @include transition();
            &:hover{
                color: $primary-color;
            }
            &.post-cat{
                margin-left: 0;
                color: $white-color;
            }
        }
        &.author{
            padding-left: 0px;

            img{
                position: relative;
                left: 0;
                top: 0;
                width: 25px;
                height: 25px;
                margin-right: 6px;
                display: inline-block;
                @include border-radius(50%);
            }
            a{
                color: #232323;
            }
        }

        &:last-child{
            margin-right: 0;
        }
        &.active{
            color: $primary-color;
            font-weight: 600;
        }
    }
    .share-post{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: $primary-color;
        color: #fff;
        display: block;
        text-align: center;
        padding: 10px 0;
        cursor: pointer;
       
    }
  
    .social-share-post{
        .social-list{
            position: absolute;
            right: 40px;
            top: 0;
            padding: 0;
            z-index: 1;
            background: #f7f7f7;
            min-height: 50px;
            min-width: 235px;
            padding: 12px 18px;
            opacity: 0;
            visibility: hidden;
            width: 0;
            transition: all ease 500ms;
            li{
                &:last-child{
                    margin-right: 0;
                }
            }
        }
        &:hover{
            .social-list{
                opacity: 1;
                width: 100%;
                visibility: visible;
            } 
        }
    }
}

/*- blocqoute */
blockquote{
    font-weight: 700;
    font-style: italic;
    color: #232323;
    line-height: 36px;
    padding: 0 0 0 75px;
    position: relative;
    z-index: 1;
    padding: 30px 30px 25px 40px;
    margin: 30px 0;
    position: relative;
    background: #f7f7f7;

    &:before{
        content: '\f10d';
        font-family: 'Fontawesome';
        position: relative;
        left: 0;
        display: block;
        /* width: 100px; */
        height: 100%;
        color: #d72924;
        padding: 0 37px 0 0;
        z-index: -1;
        top: 0;
        bottom: 0;
        margin: auto;
        font-size: 36px;
        line-height: 60px;
        font-style: normal;

    }
    cite{
        font-weight: 700;
        /* float: right; */
        position: relative;
        font-size: 16px;
        display: block;
        /* text-align: right; */
        &:after{
            position: absolute;
            /* right: -50px; */
            top: 0;
            width: 40px;
            height: 2px;
            background: #d72924;
            content: '';
            bottom: 0;
            margin: auto 10px 13px;

        }
    }

}




/* table */
table,
iframe {
    border: 1px solid $gray-light;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    text-align: center;
}
iframe{
    border: none;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td,
table>thead>tr>th,
table>tbody>tr>th,
table>tfoot>tr>th,
table>thead>tr>td,
table>tbody>tr>td,
table>tfoot>tr>td {
    border-top: 1px solid #e7e7e7;
}

table>thead>tr>th,
table>tbody>tr>th,
table>tfoot>tr>th,
table>thead>tr>td,
table>tbody>tr>td,
table>tfoot>tr>td {
    padding: 5px 0;
}
select{
    width: 100%;
    &.postform{
        height: 40px;
    }
}
div#calendar_wrap caption {
    margin: 10px;
}

.table-striped>tbody>tr:nth-child(odd),
table>tbody>tr:nth-child(odd) {
    border: 1px solid #e7e7e7;
}

dt {
    font-weight: bold;
    margin: 6px;
}

/* Sticky */
.meta-featured-post{
    display: none;
}
// grid sm title
.grid-no-desc{
    .post-content p{
        display: none;
    }
}

// grid md title
.grid-md{
    .post-title{
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 10px;
        //  min-height: 48px;
    }
    .ts-overlay-style{
        .overlay-post-content{
            .post-title{
                margin-bottom: 10px;
            }
        }
    }
}
// entry header
.entry-header{
    .entry-title {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 20px;
        a{
            color: $title-color;
        }
    }
}
// post meta
.post-meta{
    color: $gray-color;
    font-size: 14px;
    padding:20px 0 15px;
    span{
        padding-right: 5px;
        margin-right: 5px;
        i{
            margin-right: 5px;
            color:$primary-blue;
        }
    }
    a {
        color: $gray-color;
    }
}

/* Global */
.post-password-form{
    input[type="password"] {
        padding: 4px 15px;
        margin-right: 10px;
    }
    input[type="submit"] {
        padding: 5px 15px;
        background: $primary-color;
        color: $white-color;
        border: none;
        cursor: pointer;
    }
}


/* Image */

img, figure {
    -ms-interpolation-mode: bicubic;
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

img[class*="wp-image-"] {
    margin-top: 10px;
    margin-bottom: 10px;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
}
// wp cation
.wp-caption {
    margin-bottom: 8px;
    max-width: 100%;
    border-radius: 0;
    padding: 0;
    clear: both;
    &.aligncenter {
        margin-bottom: 10px;
    }
    .wp-caption-text {
        text-align: center;
        margin-top: 4px;
        font-style: italic;
        color: $gray-color;
        margin-bottom: 0;
    }
}
// align center
.aligncenter {
    clear: both;
    display: block;
    margin: 0 auto;
}
// align left
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}
// aligh right
.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

p {
    margin: 0 0 15px;
}



/*------------------ owl carosel ---*/
.owl-nav {
    position: absolute;
    right: 0;
    top: -50px;
    .owl-next,
    .owl-prev{
        margin: 0 0 0 20px;
        display: inline-block;
        position: relative;
        i{
            font-size: 20px;
            line-height: 27px;
        }
        &:hover{
            i{
                color: $primary-color;
            }
        }
    }
    .owl-prev{
        &:before{
            position: absolute;
            right: -11px;
            top: 0px;
            width: 1px;
            height: 15px;
            background: #ddd;
            content: '';
            bottom: 0;
            margin: auto;
            display: block;
            text-align: center;
        }
    }
}
// owl default dots 
.owl-dots {
    position: absolute;
    right: 0;
    top: -49px;
    z-index: 1;
    .owl-dot{
        span{
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: $primary-color;
            display: inline-block;
            opacity: 1;
            margin: 0 3px;
            opacity: .5;
        }
        &.active{
            span{
                height: 10px;
                width: 10px;
                border-radius: 50%;
                position: relative;
                top: 2px;
                opacity: 1;
            }
        }
    }
}
// more news slider
#more-news-slider{
    .owl-dots{
        .owl-dot{
            span{
                background: $white-color;
            }
        }
    }
}


.not-found{
    text-align: center;
    clear: both;
    h1.error-title{
        font-size: 36px;
        font-weight: 800;
    }
    .search-forms{
        margin-top: 50px; 
        margin-bottom: 40px;
        .form-control{
            height: 40px;
            outline: none;
            &:focus{
                border-color: #d72924;
                box-shadow: none;
            }
           
        }
    }
}

// header search popup
.modal-searchPanel {
	.xs-search-group {
		position: relative;
		input:not([type="submit"]) {
			height: 70px;
			background-color: transparent;
			border-radius: 50px;
			border: 2px solid $white-color;
			color: $white-color;
			padding: 0 30px;
			&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
				color: $white-color;
			}
			&::-moz-placeholder { /* Firefox 19+ */
				color: $white-color;
			}
			&:-ms-input-placeholder { /* IE 10+ */
				color: $white-color;
			}
			&:-moz-placeholder { /* Firefox 18- */
				color: $white-color;
			}
		}
		.search-button {
			background-color: transparent;
			border: 0px;
			padding: 0;
			color: $white-color;
			position: absolute;
			right: 0;
			cursor: pointer;
			top: 50%;
			transform: translateY(-50%);
			height: 100%;
			width: 70px;
			border-radius: 0 50px 50px 0;
		}
	}
}

/* magnific pop up modal */
.mfp-bg {
	&.xs-promo-popup {
		background-color: rgba(0,0,0,.87);
		padding-bottom: 100%;
		border-radius: 100%;
		overflow: hidden;
		animation: menu-animation .8s ease-out forwards;
	}
}


/* animation keyframes list */
@keyframes menu-animation {
	0% {
		opacity: 0;
		transform: scale(0.04) translateY(300%);
	}
	40% {
		transform: scale(0.04) translateY(0);
		transition: ease-out;
	}
	40% {
		transform: scale(0.04) translateY(0);
	}
	60% {
		opacity: 1;
		transform: scale(0.02) translateY(0px);
	}
	61% {
		opacity: 1;
		transform: scale(0.04) translateY(0px);
	}
	99.9% {
		opacity: 1;
		height: 0;
		padding-bottom: 100%;
		border-radius: 100%;
	}
	100% {
		opacity: 1;
		transform: scale(2) translateY(0px);
		height: 100%;
		padding-bottom: 0;
		border-radius: 0;
	}
}


/* Styles for dialog window */
.xs-promo-popup {
	.modal-content {
		background-color: transparent;
		padding: 0px;
		border: 0px;
	}
	.mfp-close {
		color: $white-color;
		opacity: 0;
		transition: all 1s ease .8s;
		transform: translateY(-500px);
	}
	&.mfp-ready {
		.mfp-close {
			opacity: 1;
			transform: translateY(0); 
		}
	}
}
.ts-search-form{
    .form-control{
        height: 60px;
        border-radius: 36px !important;
    }
    .vinkmag-serach{
        position: relative;
        overflow: hidden;
        &:before{
            position: absolute;
            right: -1px;
            top: 0;
            bottom: 0;
            content: "\f002";
            font-family: 'Fontawesome';
            font-size: 20px;
            background: #f00;
            z-index: 333;
            padding: 18px 33px;
            margin: auto;
            color: #fff;
            border-top-right-radius: 36px;
            border-bottom-right-radius: 36px;
            cursor: pointer;
        }
    }
}

/* at start */
.xs-promo-popup.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	transition: all 1s ease .8s;
	transform: translateY(-500px);
}
/* animate in */
.xs-promo-popup.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	transform: translateY(0); 
}