html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:     100%;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family:"Meiryo", Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:1.8;
    font-weight:normal;
    color: #333;
    background: rgb(240,253,242);
    background: linear-gradient(180deg, rgba(240,253,242,1) 0%, rgba(255,255,255,1) 20%);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-word-wrap: break-word;
    word-wrap: break-word
}

h2 {
    font-size:26px;
    line-height:1.3;
    font-weight:normal;
    margin: 0 0 10px;
    padding: 0;
    color: #333;
}

h3 {
    font-size:21px;
    line-height:1.3;
    font-weight:bold;
    margin: 0 0 10px;
    padding: 0;
    color: #00803d;
}

p {
    font-size:16px;
    line-height:30px;
    font-weight:normal;
    margin: 10px 0;
    padding: 0;
    color: #333;
}

/*--------------------------------------------------------------
# NEW
--------------------------------------------------------------*/
.vl-1-3-block .vl-small-block .vl-post-item .separator, 
.vl-1-3-block .vl-small-block .vl-post-item .separator {
    width: 30px;
    background: #fff;
    height: 3px;
    margin: 10px 0;
}


aside,
footer,
header,
nav {
    display: block;
}

img {
    border: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
i {
    font-style: italic;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

ul {
    margin: 0 0 20px 25px;
    padding: 0;
}

ul {
    list-style: square;
}

li > ul {
    margin-bottom: 0;
    margin-left: 20px;
}

img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
    vertical-align: middle;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #00803d;
}

a:active {}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.vl-clearfix:before,
.vl-clearfix:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
}

.vl-clearfix:after,
.site-footer:after {
    clear: both;
}

/* Make sure select elements fit in widgets. */

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/

#primary{
    width: 69%;
    float: left;
}

#secondary{
    width: 27%;
    float: right;
}

/* Category Block Widget */
.vl-category_block .vl-post-thumb{
    float: left;
    width: 100px;
}

.vl-category_block .vl-post-thumb .vl-thumb-container{
    padding-bottom: 100px;
}

/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
.vl-container{
    width: 1170px;
    margin: 0 auto;
}
#vl-middle-section {    
    padding-bottom: 30px;
}
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
#vl-masthead{
    position: relative;
    z-index: 999;
    background: #deefe6z;
}

.vl-top-header{
    height: 5px;
}

.vl-top-header.vl-theme-color{}

.vl-header{
    padding: 10px 0;
    background-size: cover;
    background-position: center;
}

.vl-header .vl-container{
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
}

#vl-site-branding{
    text-align: center;
}

#vl-site-branding .custom-logo-link img.custom-logo {
    width: 250px;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#vl-site-navigation{
    margin-bottom: 40px;
}

#vl-site-navigation.vl-main-navigation.vl-theme-color {
    background: rgb(0,136,64);
    background: linear-gradient(0deg, rgba(0,136,64,1) 0%, rgba(1,167,81,1) 100%);
    border-top: solid 1px #00e06c;
}

#vl-site-navigation .vl-container{
    display: flex;
    justify-content: center;
}

.vl-main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.vl-main-navigation li {
    float: left;
    position: relative;
    padding: 15px 0;
    margin: 0 30px;
}

.vl-main-navigation a {
    display: block;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
    color: #fff;
}

.vl-main-navigation .vl-menu > ul > li > a:after{
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    top: 100%;
    margin-top: -15px;
    background: #fff;
    height: 1px;
    transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
}

.vl-main-navigation .vl-menu > ul > li:hover > a:after,
.vl-main-navigation .vl-menu > ul > .current_page_item > a:after,
.vl-main-navigation .vl-menu > ul > .current-menu-item > a:after{
    width: 100%;
}

/* Top Section Blocks */
.vl-post-thumb {
    position: relative
}

.vl-thumb-container {
    position: relative;
    padding-bottom: 70%;
    /*background: #f7f7f7;*/
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.vl-thumb-container img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.vl-top-block{
    margin-bottom: 50px;
}

/* Top Section Blocks style2 */

.vl-top-block.style2 .vl-top-block-wrap {
    margin-left: -20px;
    margin-right: -20px;
    display: flex
}

.vl-top-block.style2 .vl-post-content {
    text-align: center
}

.vl-top-block.style2 .vl-post-item .vl-post-thumb {
    margin-bottom: 20px
}

.vl-top-block.style2 .vl-thumb-container {
    padding-bottom: 86%
}

/* Top Section Blocks style3 */

.vl-top-block.style3 .vl-top-block-wrap {
    margin-left: -15px;
    margin-right: -15px;
    display: flex
}

.vl-post-content.vl-gradient-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    /*background: -moz-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(20%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.9)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%);
    background: -o-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%);
    background: -ms-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#b3000000',GradientType=0);*/
    background: rgba(0, 0, 0, 0.6);
}

.vl-post-content.vl-gradient-overlay h2.vl-post-title {
    color: #fff;
    margin-bottom: 0;
}

/* Top Section Blocks style4 */

.vl-top-block.style4 .vl-top-block-wrap {
    display: flex;
    flex-wrap: wrap
}

/* Middle Section */

#secondary.vl-entry-area .theiaStickySidebar:after {
    content: "";
    display: table;
    clear: both;
}

#secondary.vl-entry-area h2.vl-entry-title{
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px;
    background: #00a951;
    position: relative;
    margin-bottom: 20px;
}

#secondary.vl-entry-area h2.vl-entry-title:before {
    position: absolute;
    content: "";
    top: 50px;
    right: 0;
    left: 0;
    border-bottom: dotted 4px #00a951;
}

#secondary.vl-entry-area h2.vl-entry-title a {
    color: #fff;
}

#secondary.vl-entry-area h2.vl-entry-title span{
    position: relative;
    display: inline-block;
}

#secondary.vl-entry-area .vl-entry_viral_news_category_block ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#secondary.vl-entry-area .vl-entry_viral_news_category_block ul li {
    margin: 0 0 5px;
    padding: 10px 15px;
    background: #eef7f2;
}

#secondary.vl-entry-area .vl-entry_viral_news_category_block ul li:hover {
    background: #dcefe5;
    transition: 0.4s;
}

#secondary.vl-entry-area .vl-entry_viral_news_category_block ul li a {
    font-size: 16px;
    font-weight: normal;
    color: #333;
}

#secondary.vl-entry-area .vl-entry_viral_news_category_block ul li a:hover,
#secondary.vl-entry-area .vl-entry_viral_news_category_block ul li:hover a {
    color: #00803d;
    font-weight: bold;
    transition: 0.4s;
}

#secondary.vl-entry-area .vl-entry_viral_news_category_block{
    margin-bottom: 30px;
}

/* Middle Section style2 */

.vl-middle-block {
    margin-bottom: 60px;
}

.style2 .vl-1-3-block .vl-big-block {
    margin-bottom: 40px;
}

.vl-1-3-block .vl-big-block .vl-post-thumb {
    position: relative;
}

.vl-1-3-block .vl-big-block .vl-thumb-container {
    padding-bottom: 60%;
}

.vl-1-3-block .vl-big-block .vl-thumb-container img {}

.vl-1-3-block .vl-big-block .vl-post-content {
    padding: 15px;
}

.vl-1-3-block .vl-small-block {
    display: flex;
    /*margin: 0 -15px;*/
}

.vl-1-3-block .vl-small-block .vl-post-item {
    width: 33.33%;
    padding: 15px;
    margin-right: 15px;
    background: #f8fcfa;
    border: solid 1px #cce7d9;
}

.vl-1-3-block .vl-small-block .vl-post-item:last-child {
    margin-right: 0;
}

.vl-1-3-block .vl-small-block .vl-post-thumb {
    margin-bottom: 15px;
}

.vl-1-3-block .vl-small-block .vl-post-content {}

h3.vl-post-title,
h3.vl-post-title a,
h3.vl-post-title a:hover {
    color: #00803d;
}

.vl-1-3-block .vl-small-block .vl-post-content p,
.vl-1-3-block .vl-small-block .vl-post-content p a {}

/* Middle Section style3 */

.vl-1-6-block .vl-big-block .vl-post-item {
    margin-bottom: 40px;
}

.vl-1-6-block .vl-big-block .vl-post-thumb {
    float: left;
    width: 50%;
    padding-right: 15px;
}

.vl-1-6-block .vl-big-block .vl-post-thumb .vl-thumb-container img {}

.vl-1-6-block .vl-big-block .vl-post-content {
    margin-left: 50%;
    padding-left: 30px;
}

.vl-1-6-block .vl-big-block .vl-post-thumb .vl-thumb-container img {
    object-fit: cover;
    height: 300px;
}

.vl-1-6-block .vl-big-block .vl-post-content h2.vl-post-title {
    color: #333;
}

.vl-1-6-block .vl-big-block .vl-post-content .vl-excerpt p {
    color: #333;
    position: relative;
    padding: 10px 20px;
}

.vl-1-6-block .vl-big-block .vl-post-content .vl-excerpt p:before,.vl-1-6-block .vl-big-block .vl-post-content .vl-excerpt p:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.vl-1-6-block .vl-big-block .vl-post-content .vl-excerpt p:before{
    border-left: solid 3px #00a951;
    border-top: solid 3px #00a951;
    top:0;
    left: 0;
}
.vl-1-6-block .vl-big-block .vl-post-content .vl-excerpt p:after{
    border-right: solid 3px #00a951;
    border-bottom: solid 3px #00a951;
    bottom:0;
    right: 0;
}

.vl-1-6-block .vl-small-block {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.vl-1-6-block .vl-small-block .vl-post-item {
    width: 50%;
    padding: 0 15px;
}

.vl-1-6-block .vl-small-block .vl-post-item:nth-last-child(2) {
    margin-bottom: 0;
}

.vl-1-6-block .vl-small-block .vl-post-thumb {
    float: left;
    width: 120px;
}

.vl-1-6-block .vl-small-block .vl-post-content {
    margin-left: 140px;
}

/* Middle Section style4 */

.style-viral-news {
    padding: 15px 0;
    border-top: solid 4px #009EFF;
    border-bottom: solid 4px #009EFF;
}

.style-viral-news h2 {}

.style-viral-news h3 {
    color: #0079c3;
}

.style-viral-news img {
    margin-bottom: 15px;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
#vl-colophon{
    background: #eef7f2;
    color: #333;
    padding: 20px 0;
    font-size: 16px;
    text-align: center;
}

#vl-colophon a{
    color: #00803d;
}

#vl-colophon a:hover{
    text-decoration: none;
    transition: 0.4s;
}

#vl-back-top{
    background: #00a951;
    color: #FFF;
    height: 40px;
    width: 40px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

#vl-back-top .fa{
    line-height: 40px;
}

#vl-back-top:hover{
    background: #333333;
}

/*** arrows (for all except IE7) **/
/* styling for both css and generated arrows */
/* styling for right-facing arrows */

/*-------------------------------s-------------------------------
## Search Overlay CSS
--------------------------------------------------------------*/

.vl-main-navigation a.vl-toggle-menu{
    display: none;
}
/*================RESPONSIVE CSS==================*/

@media screen and (max-width: 1200px){
    .vl-container{
        width: 100%;
        padding: 0 40px;
    }
}

@media screen and (max-width: 1000px){
    .vl-container{
        padding: 0 20px;
    }

    .vl-top-header .vl-container{
        display: block;
    }

    #vl-site-navigation .vl-container{
        justify-content: flex-end;
    }

    .vl-main-navigation .vl-menu{
        display: none;
        background: #FFF;
        float: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .vl-main-navigation li{
        float: none;
        display: inline-block;
    }

    .vl-main-navigation ul ul li{
        display: block;
        text-align: left;
    }

    .vl-main-navigation .vl-menu a{
        color: #0E0E0E !important;
    }

    .vl-main-navigation a.vl-toggle-menu{
        display: block;
        float: right;
        height: 54px;
        width: 54px;
        cursor: pointer;
    }

    .vl-main-navigation a.vl-toggle-menu span{
        position: relative;
        background: #333;
        height: 2px;
        width: 32px;
        margin: 0 auto;
        display: block;
        top: 50%;
        margin-top: -1px;
        box-shadow: 0 10px 0px 0px #333, 0 -10px 0px 0px #333;
    }

    .vl-theme-color.vl-main-navigation a.vl-toggle-menu span{
        background: #FFF;
        box-shadow: 0 10px 0px 0px #FFF, 0 -10px 0px 0px #FFF;
    }

}

@media screen and (max-width: 768px){
    .vl-header .vl-container{
        display: block;
    }

    #vl-site-branding{
        text-align: center;
    }

    .vl-menu > ul > li,
    .vl-main-navigation li{
        padding: 0;
        display: block;
        border-bottom: 1px solid #FAFAFA;
    }

    .vl-menu > ul > li > a,
    .vl-main-navigation a{
        padding: 12px 0;
    }

    .vl-main-navigation ul ul{
        position: static;
        box-shadow: none;
        border-top: 1px solid #FAFAFA;
    }

    .vl-main-navigation ul ul li{
        text-align: center;
    }

    .vl-menu > ul > li > a:after{
        display: none;
    }

    
    .vl-top-block.style2 .vl-top-block-wrap,
    .vl-top-block.style3 .vl-top-block-wrap{
        flex-wrap: wrap;
    }

    .vl-top-block.style4 .vl-post-item{
        width: 50%;
        margin-bottom: 30px;
    }

    #primary{
        width: auto !important;
        float: none !important;
    }

    #secondary{
        width: auto !important;
        float: none !important;
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 580px){
    #vl-site-branding{
        padding: 0;
    }
    
    .vl-top-block.style2 .vl-top-block-wrap,
    .vl-top-block.style3 .vl-top-block-wrap{
        display: block;
    }

    
    .vl-top-block.style4 .vl-post-item:last-child{
        margin-bottom: 0;
    }

    .vl-top-block.style4 .vl-post-item:nth-child(1), 
    .vl-top-block.style4 .vl-post-item:nth-child(2),
    .vl-top-block.style4 .vl-post-item{
        width: 100%;
    }

    .vl-1-3-block .vl-small-block{
        display: block;
    }

    .vl-1-3-block .vl-small-block .vl-post-item{
        width: 100%;
        margin-bottom: 30px;
    }

    .vl-1-3-block .vl-small-block .vl-post-item:last-child{
        margin-bottom: 0;
    }

    .vl-1-6-block .vl-big-block .vl-post-thumb,
    .vl-1-6-block .vl-big-block .vl-post-content{
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        float: none;
        margin: 0;
    }

    .vl-1-6-block .vl-big-block .vl-post-thumb{
        margin-bottom: 20px;
    }

    .vl-1-6-block .vl-small-block .vl-post-item{
        width: 100%;
    }
}

@media screen and (min-width: 1171px){
    .vl-main-navigation .vl-menu{
        display: block !important;
    }
}
#vl {
    letter-spacing: -1px;
}