/******************************************************************
    Template Name: JM Carganilla
    Description: News and Articles
    Author: JM Carganilla
    Author URI: http://southforbes-articles.html
    Version: 1.0
    Created: @ Cathayland Inc.
******************************************************************/


/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

@font-face {
   font-family: 'SF-New-Republic';
   src: url('fonts/SF New Republic.ttf') format('truetype');
}
@font-face {
   font-family: 'SF-New-Republic-Bold';
   src: url('fonts/SF New Republic Bold.ttf') format('truetype');
}

body {
    color:#484647;
    background-color: #DDD;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
}

/*Addational Custom CSS*/       
.list-table > li {display: table-cell; }
textarea {resize: none; }
input {margin-bottom: 15px; }
/*---------------------------------standard css------------------------------------------*/

a,a:hover {text-decoration: none !important; }

.bg-white:{background-color: #fff;}
.margin1em {margin:1em; }
.nopadding {padding: 0px; }
.nopaddingbot {padding-bottom: 0px; }
.nopaddingtop {padding-top: 0px; }
.nomarginbot {margin-bottom: 0px; }
.nomargintop {margin-top: 0px; }
.paddingLR0{padding-left: 0; padding-right: 0; }
/*paddings*/
.paddingtop1em {padding-top: 1em; }
.paddingtop2em {padding-top: 2em; }
.paddingtop3em {padding-top: 3em; }
.paddingtop4em {padding-top: 4em; }
.paddingtop5em {padding-top: 5em; }
.paddingtop7em {padding-top: 7em; }
.paddingtop14em {padding-top: 14em; }
.paddingbot1em {padding-bottom: 1em; }
.paddingbot2em {padding-bottom: 2em; }
.paddingbot3em {padding-bottom: 3em; }
.paddingbot4em {padding-bottom: 4em; }
.paddingbot5em {padding-bottom: 5em; }
.paddingbot7em {padding-bottom: 7em; }
.padding5em {padding: 5em; }
.padding3em {padding: 3em; }
.padding1em {padding: 1em; }
/*margins*/
.nomargin {margin:0px; }
.margintop1em {margin-top: 1em; }
.margintop2em {margin-top: 2em; }
.margintop3em {margin-top: 3em; }
.margintop4em {margin-top: 4em; }
.margintop5em {margin-top: 5em; }
.margintop6em {margin-top: 6em; }
.margintop7em {margin-top: 7em; }
.marginbot1em {margin-bottom: 1em; }
.marginbot2em {margin-bottom: 2em; }
.marginbot3em {margin-bottom: 3em; }
.marginbot4em {margin-bottom: 4em; }
.marginbot5em {margin-bottom: 5em; }
.marginbot6em {margin-bottom: 6em; }
.marginbot7em {margin-bottom: 7em; }

.borderbot3em {border-bottom: 3em; }
.lh15 {line-height: 15px; }
.lh25 {line-height: 25px; }

.col-right {float:right; margin: 0 auto; }
.col-center{float: none; margin-right: auto; margin-left: auto; }
.allcaps {text-transform:   uppercase; }

.light{font-weight: 300; }
.regular {font-weight: 400; }
.medium {font-weight: 500; }
.semi-bold{font-weight: 600; }
.bold {font-weight: 700; }
.extra-bold {font-weight: 800; }
.black {font-weight: 900; }
.left {float: left; }
.right {float: right; }
/*font-size*/
.fs12 {font-size: 12px; }
.fs14 {font-size: 14px; }
.fs16 {font-size: 16px; }
.fs18 {font-size: 18px; }
.fs20 {font-size: 20px; }
.fs22 {font-size: 22px; }
.fs24 {font-size: 24px; }
.fs26 {font-size: 26px; }
.fs28 {font-size: 28px; }
.fs30 {font-size: 30px; }
.fs32 {font-size: 32px; }
.fs34 {font-size: 34px; }
.fs36 {font-size: 36px; }
.fs40 {font-size: 40px; }
.fs48 {font-size: 48px; }
/*text-align*/
.text-center {text-align: center; }
.text-left {text-align: left; }
.text-right {text-align: right; }
.text-justify {text-align: justify; }
/*text-color*/
.color-white {color: #fff; }
.color-lightgray {color:#ABABAB; }
.color-black{color: #484647; }
.color-orange {color: #FBAA1D; }
.e-center{margin-left: auto; margin-right: auto; } 
/*end of standard css*/

/*jPages*/
.holder { margin: 15px 0;text-align: center; }
.holder a {font-size: 12px !important; cursor: pointer; margin: 0 5px; color: #166862 !important;}
.holder a:hover {background-color: transparent !important; font-weight:700 !important; color: #bda916 !important;}
.holder a.jp-previous { margin-right: 15px; }
.holder a.jp-previous:hover{background-color: transparent !important; font-weight:700 !important; color: #bda916 !important;}
.holder a.jp-next:hover {background-color: transparent !important; font-weight:700 !important; color: #bda916 !important;}
.holder a.jp-next { margin-left: 15px; }
.holder a.jp-current, a.jp-current:hover {color: #bda916 !important; font-weight: 700 !important; }
.holder a.jp-disabled, a.jp-disabled:hover {color: #bbb; }
.holder a.jp-current, a.jp-current:hover,
.holder a.jp-disabled, a.jp-disabled:hover {cursor: default; background: none; }
.holder span { margin: 0 5px; }
#itemContainer { min-height: auto !important; }

/*HEADER*/
body .container {background-color: #fff;}
.top-header-wrapper a img, .header-img-wrapper img { width: 100%; }
.top-header-wrapper{ padding: 0; }
.header-img-wrapper:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition-duration: 0.5s;
}

.articles-container {
    padding: 0 1em;
    background-color: #fbfbf3;
}

.articles-wrapper{
    padding: 1em;
    min-height: 48em;
    text-align: center;

}

.articles-wrapper:hover {
    
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    transition-duration: 0.5s;
}

.articles-wrapper a img {
    width: 100%;
    margin: 1em 0;
    -webkit-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
    -moz-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
    box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
    min-height: 42em;
}


.articles-wrapper .captions {
    margin-top: 1em;
    text-transform: uppercase;
    font-weight: 600;
    color: #166862;text-align: left;
}

.displayInDesktop{ display: block; }
.displayInMobile{ display: none; }

.captions p.title {
    font-size: 14px;
    line-height: 18px;
    min-height: 5em;
    display: flex;
    align-items: center;
}
.captions p.date{
    color: #000;
    font-size: 11px;
    font-weight: 300;
}



/*===== TABLET SIZE =====*/
@media screen and (max-width: 1199px) {

    .articles-wrapper a img {
        width: 100%;
        margin: 1em 0;
        -webkit-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        -moz-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        min-height: 47em;
    }

}
@media screen and (max-width: 991px) {

    .articles-wrapper {
        padding: 1em;
        min-height: 58em;
        text-align: center;
    }
    .articles-wrapper a img {
        width: 100%;
        margin: 1em 0;
        -webkit-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        -moz-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        min-height: 54em;
    }

}

/*===== SCREEN 600 WIDTH OR LESS / MOBILE =====*/
@media screen and (max-width: 600px) {

    .displayInDesktop{display: none; }
    .displayInMobile{display: block; }
    .header-img-wrapper img {width: 135%; }
    .articles-wrapper {
        padding: 1em;
        min-height: 45em;
        text-align: center;
    }
    .articles-wrapper a img {
        width: 100%;
        margin: 1em 0;
        -webkit-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        -moz-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        min-height: 40em;
    }
}

@media screen and (max-width: 460px) {

    .articles-wrapper {
        padding: 1em;
        min-height: 38em;
        text-align: center;
    }
    .articles-wrapper a img {
        min-height: 32em;
    }

}

@media screen and (max-width: 420px) {

    .articles-wrapper {
        padding: 1em;
        min-height: 40em;
        text-align: center;
    }
    .articles-wrapper a img {
        min-height: 29em;
    }

}

@media screen and (max-width: 375px) {
    .captions p.title {
        font-size: 11px;
        line-height: 15px;
        min-height: 2em;
        display: flex;
        align-items: center;
    }

    .articles-wrapper a img {
        width: 100%;
        margin: 1em 0;
        -webkit-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        -moz-box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
        box-shadow: 0px 8px 11px -1px rgba(191,185,191,1);
       
    }

}

@media screen and (max-width: 320px) {
    .articles-wrapper {
        min-height: 32em;
    }
    .articles-wrapper a img {
        min-height: 22em;
    }
    
}