/*
Theme Name: hysj
Theme URI: https://wordpress.org/themes/hysj/
Author: qtouch
Author URI: https://qtouch.me/
Description: Responsive design for the website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: hysj

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* TOP BAR AREA */

.site-header{
    border-bottom: 1px solid #CCC;
}


@media only screen and (min-width: 40.0625em){
    .top-bar-section>ul>.divider, .top-bar-section>ul>[role="separator"] {
    border-right: none;
    /* border-bottom: none;
    border-top: none;
    clear: none;
    height: 2.8125rem;
    width: 0; */
    }
    .top-bar-section .has-dropdown>a:after {
        /* border: inset 5px;
        content: "";
        display: block;
        height: 0;
        width: 0;
        border-color: rgba(255,255,255,0.4) transparent transparent transparent;
        border-top-style: solid;
        margin-top: -2.5px; */
        top: 2rem;
    }
}

.title-area{
    height:60px;
}

@media only screen and (min-width: 1141px) {
    .topbar-container{
        width:1200px;
        margin: 0 auto;
    }
    /* nav.top-bar {
        text-align:center;
        }
        section.top-bar-section {
        display: inline-block;
        } */
  }



@media only screen and (max-width: 1140px) {
    .topbar-container{
    width:980px;
    }
    /* nav.top-bar {
        text-align:center;
        }
        section.top-bar-section {
        display: inline-block;
        } */
  }

@media only screen and (max-width: 640px) {
    .topbar-container{
    width:100%;
    }
  }


/* area that is not covered by any menu's items*/ 
.top-bar 
/* logo area */
,.top-bar-section ul li, .top-bar.expanded .title-area 
/* menu item */
,.top-bar-section li:not(.has-form) a:not(.button) 
/* menuitem with dropdown when hovering */
,.top-bar-section ul li:hover:not(.has-form) > a 
{
    background: transparent;
}

/* general font and colors */
.top-bar-section ul li > a 
/* topbar H1 name */
,.top-bar .name h1 a, .top-bar .name h2 a, .top-bar .name h3 a, .top-bar .name h4 a, .top-bar .name p a, .top-bar .name span a
{
    color: #333;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}

/* menu item when hover */
.top-bar-section li:not(.has-form) a:hover:not(.button) 
{
    background: transparent;
    color: red;
}

/* parent menu item when leaving a hovered child for another parent menu item */
.top-bar-section li.hover > a:not(.button) {
    color: #333;
}

/* menu item when active */
.top-bar-section li.active:not(.has-form) a:not(.button) 
{
    background: transparent;
    font-weight: 700;
    color: #333;
}

/* menu item when active and hover */
.top-bar-section li.active:not(.has-form) a:hover:not(.button) 
{
    background: red;
    color: white;
}

/* dropdown arrow color */
.top-bar-section .has-dropdown > a::after 
{
    border-color: rgba(51, 51, 51, 0.4) transparent transparent;
}

/* dropdown parent when hovering a child item */
.top-bar-section ul li:hover:not(.has-form) > a 
{
    color: #333;
}

/* ul.dropdown, only to add border no background */
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown, .top-bar-section .has-dropdown > a:focus + .dropdown
{
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* dropdown child */
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) 
{
    background: #fff;
    color: #333;
}
/* dropdown child when hover */
.top-bar-section .dropdown li:hover:not(.has-form):not(.active) > a:not(.button) 
{
    background: #fff;
    color: red;
}

.top-bar-section .has-form {
    background:white;
}

/* on small screen */

/* content of the toggled menu */
.top-bar .toggle-topbar.menu-icon a 
{
    color: #333;
}
/* toggle 3 horizontal bars */
.top-bar .toggle-topbar.menu-icon a span::after 
{
    box-shadow: 0 0 0 1px #333, 0 7px 0 1px #333, 0 14px 0 1px #333;
}
/* responsive dropdown back menu */
.top-bar-section .dropdown li.parent-link a, .top-bar-section .dropdown li.title h5 a {
    color: #333;
    font-size: 18px;
    text-transform: uppercase;
}

.top-bar, .top-bar .name {
	height: 60px;
}
.top-bar-section li:not(.has-form) a:not(.button) {
	line-height: 60px;
}

.top-bar .logo img {
    max-height: 60px;
    width: auto;
  }
  
  @media only screen and (min-width: 40.063em) {
    .top-bar {
      height: 60px;
    }
    .top-bar-section li:not(.has-form) a:not(.button) {
      line-height: 60px;
    }
    .top-bar .logo img {
      max-height: 60px;
    }
  }

/* TOP BAR AREA CLOSURE */

@media only screen {
    .vgrid-small-1, .vgrid.vgrid-small-1 {
        min-height: 1.54rem;
        min-height: 3.12vh
    }

    .vgrid-small-2, .vgrid.vgrid-small-2 {
        min-height: 3.08rem;
        min-height: 6.24vh
    }

    .vgrid-small-3, .vgrid.vgrid-small-3 {
        min-height: 4.62rem;
        min-height: 9.36vh
    }
    .vgrid-small-8, .vgrid.vgrid-small-3 {
        min-height: 12.32rem;
        min-height: 24.96vh
    }
    /*.... until min-height: 100vh*/

    .vgrid-small-offset-top-0, .vgrid.vgrid-small-offset-top-0 {
        margin-top: 0;
        margin-top: 0vh
    }

    .vgrid-small-offset-top-1, .vgrid.vgrid-small-offset-top-1 {
        margin-top: 1.54rem;
        margin-top: 3.12vh
    }

    .vgrid-small-offset-top-2, .vgrid.vgrid-small-offset-top-2 {
        margin-top: 4.08rem;
        margin-top: 6.24vh
    }

    .vgrid-small-offset-top-3, .vgrid.vgrid-small-offset-top-3 {
        margin-top: 4.62rem;
        margin-top: 9.36vh
    }

    /*.... until margin-top: 100vh*/

    /*You can do the same for vgrid-small-offset-bottom*/

    .vgrid-small-offset-bottom-0, .vgrid.vgrid-small-offset-bottom-0 {
        margin-bottom: 0;
        margin-bottom: 0vh
    }

    .vgrid-small-offset-bottom-1, .vgrid.vgrid-small-offset-bottom-1 {
        margin-bottom: 1.54rem;
        margin-bottom: 3.12vh
    }

    .vgrid-small-offset-bottom-2, .vgrid.vgrid-small-offset-bottom-2 {
        margin-bottom: 4.08rem;
        margin-bottom: 6.24vh
    }

    .vgrid-small-offset-bottom-3, .vgrid.vgrid-small-offset-bottom-3 {
        margin-bottom: 4.62rem;
        margin-bottom: 9.36vh
    }
}
/*Foundation use different media query to allow the grid to be responsive. The class name is identify by small, medium, large, xlarge and xxlarge. You will need this set up the vgrid for the media query small, medium, large so*/

@media only screen and (min-width:40.0625em) {
    .vgrid-medium-1, .vgrid.vgrid-medium-1 {
        min-height: 1.54rem;
        min-height: 3.12vh
    }

    .vgrid-medium-2, .vgrid.vgrid-medium-2 {
        min-height: 4.08rem;
        min-height: 6.24vh
    }

    .vgrid-medium-3, .vgrid.vgrid-medium-3 {
        min-height: 4.62rem;
        min-height: 9.36vh
    }
}
/*.... until min-height: 100vh*/

@media only screen and (min-width:64.0625em) {
    .vgrid-large-1, .vgrid.vgrid-large-1 {
        min-height: 1.54rem;
        min-height: 3.12vh
    }

    .vgrid-large-2, .vgrid.vgrid-large-2 {
        min-height: 4.08rem;
        min-height: 6.24vh
    }

    .vgrid-large-3, .vgrid.vgrid-large-3 {
        min-height: 4.62rem;
        min-height: 9.36vh
    }
}

/*.... until min-height: 100vh*/

@font-face {
    font-family: Baskerville;
    src: url('css/Baskerville.ttc');
}
@font-face {
    font-family: Berthold;
    src: url('css/Berthold%20Akzidenz%20Grotesk%20Medium%20Condensed.otf');
}
@font-face {
    font-family: BertholdBaskerville;
    src: url('css/Berthold-Baskerville-Book-Italic.ttf');
}
@font-face{
    font-family:PTF55F_W;
    src:url('css/PTF55F_W.woff');
}

html{
    font-size: 14px;
    font-family: Berthold,Baskerville,BertholdBaskerville;
}
body{
    font-size: 14px;
    /*font-family: Baskerville,Berthold,BertholdBaskerville;*/
    /* padding: 0 20px; */
    max-width: 1200px;
    margin: 0 auto;
    word-wrap:normal;
    -webkit-word-break: break-word;
    -moz-word-break: break-word;
    -ms-word-break: break-word;
}

h1{
    font-family: Berthold;
}
h3{
    font-family: BertholdBaskerville;
    font-size: 1rem;
}
.h1_40{
    font-size: 5rem;
    line-height: 5rem;
    margin: 0;
    font-family: Berthold;
}
.h1_05{
    font-size: 1.5rem;
    font-family: Berthold;
    margin: 0;
}

.BertholdBaskerville{
    font-family: BertholdBaskerville;
}
p{
    font-family: Georgia, sans-serif;
    margin: 0;
}
a{
    color: inherit;
}

.page-template-tpl-homepage .row, 
.page-template-tpl-homepage .column, 
.page-template-tpl-homepage .columns, 
.single-post .row, 
.single-post .column, 
.single-post .columns{
    margin: 0;
    padding: 0;
}


.sm-show{display: none;}
.borderRight{
    border-right: 1px solid lightgray;
}
.borderRight.list-8{
        border-right: none;
}
.borderBottom{
   border-bottom: 1px solid lightgray;
}
.borderBottom.list-10
{
    border: none;
}
#article_one h1,#article_two h1{
    font-size: 2rem ;
}
#article_one{
    border: 0;
}
#article_one.related img{
    height: 300px !important;
}
#article_one img{
    height: 150px !important;
}

#article_two:last-child{
    border-bottom: 0;
}
#article_two img{
   /* height: 268px !important;
    width: 136px !important;*/
    float: right;
}
.navBtn{
    margin: 0;
    color: #000000;
    border-color: #ffffff;
    background-color: #ffffff;
    padding:1rem;
}
.navBtn:hover,.navBtn:focus{
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
}
#submit{
    margin: 0;
    color: #909090;
    border-color: #ffffff;
    background-color: #454545;
    padding: 1% 5%;float: right;
}
#submit:hover,#submit:focus{
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
}
.logo_header{
    /*width: 7rem;*/
    max-height: 6.4rem;
    background-color: red;
/*    margin-left: 0.1rem;
    float: left;*/
}


#menu{
    position: absolute;
   /* width: 20%;*/
    left: -220px; /*html padding-left:20px*/
    z-index:99;
    padding: 3%;
    background-color: rgba(0,0,0,0.7);
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -ms-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;
    opacity: 0;
}

#menu a{
    color:#fff;
}

/*
#menu ul{
   padding-top: 40%;
}
*/

#closeMenu{
    float: right;
    background-color:transparent;
    border:none;
}

/*
section#email{

}
*/
section#email h2{
    margin-top: 2%;
}

input.inputArea{
    display: inline-block;
    background-color: lightgray;
}
input.emailBtn{
   /* margin-left: 10%;*/
    width: 3rem;
    height: 3rem;
    background-color: #000000;
    color: #ffffff;
}
textarea#comment{
    background-color: lightgray;
}
textarea#comment:focus{
    background: #fafafa;
    border-color: #999999;
    outline: none;
}
aside img  {
    width: 60%;
}
.magazine{
    border-top: 1px solid;
    border-bottom: 1px solid;
    width: 100%;
    height: 10rem;
    background-size: cover;
    background-repeat: no-repeat;
}
.article_aside{
    height: 13rem;
    background-size: cover;
}
#aside_head{
    margin: 5% 0;
}
#aside_head img{
    display: inline-block;
    width: 5%;
}
#aside_head .titleText{
    display: inline-block;
    font-size: 1rem;
}


.footBtn{
    margin: 1rem 2rem;
    color: #000000;
    border-color: #ffffff;
    background-color: #ffffff;
}
.footBtn:hover,.footBtn:focus{
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
}
.logo_footer{
    width: 3rem;
    height: 3rem;
    float: left;
    margin-left: 1rem;
}
.foot-li{
    margin: 2% 0 5% 10%;
}

.social_icon{
    font-size: 2rem;
}
.social_icon i{
    background-color: gray;
    color: white;
}

/*.firstLetter:first-letter{
    font-size: 10rem;
    float: left;
    line-height: 7rem;
    color: red;
}*/
.firstLetter{
    clear: both;
}
.firstLetter p{
    line-height: 2rem;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.firstLetter p a{
/*    display: block;
    text-align: center;*/
    color: blue;
}
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
p.wp-caption-text {
display: block;
margin-left: auto;
margin-right: auto;
white-space: normal;
 font-size: 1.0rem;
}
.aligncenter p.wp-caption-text {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center; /* changed 0724 */
 white-space: normal;
 font-size: 1.0rem;
}
/*category page*/
.category_list li{
    font-family: Berthold;
    font-size: 1rem;
}


/*comment*/
#author{
    width: 90%;
}
.magazine-1 img{
    width: 3rem;
    height: 3rem;
    margin-right: 4%;
    float: left
}
.mgz-1{
    width:500px;
    height: 200px;
}
.commentlist li {
    list-style: none;
    border-top: 1px solid;
    padding-top: 3%;
    margin-bottom: 3%;
}
#article_one.top-lists-4{
    padding: 0;
}
#article_one.top-lists-4.list-2,#article_one.top-lists-4.list-3,#article_one.top-lists-4.list-4
{
    border-right: 1px solid lightgray;
}
.widget-ul .widget_sp_image img{
    width:500px;
    height:200px;
}
.home h2{
     font-family: Berthold;
     line-height: 2.5rem;
     margin-top: 0.7rem;
}
.hysj-header-title h1{
    padding-top:30%;
    color:#fff;
    font-size:3.5rem;
}

.hysj-header-title{
    height: 100%;
 /*   width: 40%;*/
    width: 27%;
    display: inline-block;
    text-align: left; 
    /*background-color: rgba(0,0,0,.7);*/
    background-color: rgba(0,0,0,.5);
    color: #ffffff;
   /* padding:9% 3% 0 3%;*/
    padding:5% 3% 0 3%;
}
#article-list,.lineRight{
    border-right: 1px solid lightgray;padding-right: 2%
}
@media  only screen
and (min-device-width: 320px) and (max-device-width:640px){
    .sm-show{display: block;}
}


@media only screen
and (min-device-width: 320px) and (max-device-width: 767px){
    /*.navBtn{
        padding: 0 .3rem;
        font-size: .6rem;
        margin-top: 2.5rem
    }*/
    img.logo_header{
       /* width: 4rem;*/
        height: 6rem;
    }
    .hysj-header{
        background-size: cover!important;
        position: relative;
    }
    .hysj-header-title{
        position: absolute;
        bottom:0;
        left:0;
        width:auto;
        height:auto;
        padding: 18px 0 0 5px!important;
    }
    .hysj-header-title h1{
        font-size: 2rem;
    }
    .first article{
        width:49%;
    }
    .second {
        width: 100% !important;
        border-right:none;
    }
    .sidebar{
        display: none;
    }
    .wp-caption{
        width: 100%!important;
        max-width: 100%;
    }

    .hysj-content{
        width:100%;
        border-right:none!important;
    }
    /*.hysj-bottom-subscribe{
        display: none;
    }*/
    .hysj-related article{
        width:50%;
        height: 16rem;
    }
    .hysj-comments{
        width: 100% !important;
        border-right: none!important;
    }
/*     
    .hysj-single-head{
        position: relative;
    } */

    .hysj-single-headimage{
        position: absolute;
        z-index: -1;
        width: 100% !important;
    }

    /* .hysj-single-title{
        position: absolute;
        z-index: 1;
        background-color: rgba(0,0,0,.7);
        color:#fff;
        width:100%;
        height:100%;
        color:#fff;
    }

    .hysj-single-title .text-left{
        top: 40px !important;;
        left:10px !important;
    }
    .hysj-single-title h1{
        color:#fff;
    }
    .hysj-single-title .text-left span,.hysj-single-title .text-left p{
        color:#fff!important;
    } */

    .article_one img,.article_two img {
        height: auto !important;
    }
    .article_one.borderRight{
        border-right: none;
    }
    .lineRight,#article-list{
        border-right: none;
        padding-right:0;
    }
    footer .small.button.footBtn{
        padding: 0 .1rem;
        font-size: .6rem;
        margin: 0;
    }
    .hysj-related .article_one h1{
        font-size: 1.5rem;
    }
}

@media only screen
and (min-device-width: 375px) and (max-device-width: 767px){
   /* .navBtn{
        padding: 0 .3rem;
        font-size: .7rem;
        margin-top: 2.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        min-width:auto !important;
    }*/
    .hysj-header-title h1{
        font-size: 2rem;
    }
    footer .small.button.footBtn{
        padding: 0 .3rem;
        font-size: .7rem;
        margin: 0;
    }
    .hysj-related article{
        width:49%;
        height: 20rem;
    }
}

@media only screen
and (min-device-width: 414px) and (max-device-width: 767px){
    .navBtn{
        /*padding: 0 .3rem;*/
        font-size: .9rem;
       /* margin-top: 2rem;*/
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        min-width:auto !important;
    }
    .hysj-header-title h1{
        font-size: 2rem;
    }
    .hysj-related article{
        width:49%;
        height: 21rem;
    }
}
@media only screen
and (min-device-width: 540px) and (max-device-width: 767px){
    .navBtn{
        padding: 0 1rem;
        font-size: 1rem;
        margin-top: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        min-width:auto !important;
    }
    .hysj-header-title h1{
        font-size: 2rem;
    }
    .hysj-related article{
        width:49%;
        height: 25rem;
    }
    footer .small.button.footBtn{
        padding: 0 .5rem;
        font-size: 1rem;
        margin: 0;
    }
}
@media only screen
and (min-device-width: 640px) and (max-device-width: 767px){

    .navBtn{
        padding: 0 1rem;
        font-size: 1.4rem;
        margin-top: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        min-width:auto !important;
    }
    .hysj-related article{
        width:49%;
        height: 26rem;
    }
    footer .small.button.footBtn{
        padding: 0 1rem;
        font-size: 1rem;
        margin: 0;
    }
}
@media only screen
and (min-device-width: 720px) and (max-device-width: 767px){


    .hysj-related article{
        width:49%;
        height: 30rem;
    }

}
.alignleft {
    display: inline;
    float: left;
    padding-right:10px;
}

.alignright {
    display: inline;
    float: right;
    padding-left:10px;
}

/*
    update-date:2016-12-14,
    author:guo
*/
.fl{float: left;}
.fr{float:right;}
/*------------header.php:start-----------*/
.logoArea{
    width: 14rem;
    height:100%;
   /* float: left;
    text-align: center;*/
}
.header-menu-btn{
    text-align: left;
   /* border-left: 1px solid;*/
    height: 100%;
    /*padding-left:5%;*/
}

/*----tpl-normal.php:start-----*/
.product-buy-button{
    padding-top:1rem;
}
.product-buy-button .navBtn{
    border:1px solid #333;
    outline:none;
}
.product-magazine{
    display: block;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding-top: 1rem;
}
.bigShow{
   /* border: 1px solid #ccc;*/
    text-align: center;
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
   /* height: 100%;*/
}
.bigShow img{
    width: 100%;
}
.product-magazine .aside-list{
    display: block;
    margin:0;
}
.product-magazine .aside-list~.aside-list{
    margin-top:1rem;
}
.subscribe-list-box{
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    padding: 1% 0;
}
.subscribe-list-box~.subscribe-list-box{
    border-top:none;
}
.subscribe-list-box-img{
    height: 100%;
}
.subscribe-list-box-img img{
    width: 80%;
    height: 100%;
}
.subscribe-list-box .navBtn{
    min-width:10rem;
    outline:none;
    border: 1px solid #333;
}
.subscribe-list-box .navBtn~.navBtn,.subscribe-list-box form~.navBtn{
    margin-top: 0.5rem;
}
/*------------tpl-normal.php:end-------------*/



/*
    update-date:2017-02-13,
    author:guo
*/
.box{color:#333;}
.seaBtn{width: 100%;background-color: #233;
    border: none;
    outline: none;
    box-shadow: none;
    text-shadow: none;
    width: 100%;
    height: 29px;
color:#fff;}
.sm_select{
    height: 29px;
    padding: 0 0.5em;
    border:none;
    outline: none;
    box-shadow:none;
    text-shadow:none;
}
.font-xs-default-h1{
    font-size:2rem;
}
.medium-pt-80{
    padding-top:80px;
}
.img-width-auto img{
    max-width:none !important;
}
.list-cover{
    text-align: center;
}
.f-dropdown {
    left:auto;
    top: 70px;
    width: 170px;
    right: 20px;
    z-index: 89;
    font-size:1.4rem;
}
.f-dropdown:before {
    top: -12px;
    left: 147px;
    z-index: 89;
}
.f-dropdown:after {
    top: -15px;
    left: 146px;
    z-index: 88;
}
.f-dropdown li {
    font-size:1.6rem;
}

.iframe-div{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  margin: 20px 0;
}

.iframe-class{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.headMenuBtn{
    font-size:45px;
    line-height:6rem;
}
.medium-h-25{
    height:25rem;
}

@media only screen
and (min-device-width:320px) and (max-device-width: 767px){
        .font-xs-default-h1{
            font-size:1.4rem;
        }
        html,body{
            font-size:12px;
        }
        .small-no-h{
            height:auto!important;
        }
        .h1_40 {
            font-size:2rem;
            line-height:3rem;
        }
        .post-template-single-event .h1_40{
            font-size:3rem;
        }
        .small-pt-10{
            padding-top:10px;
        }
        .small-hide{
            display: none;
        }
        .hysj-bottom-subscribe-tax-wpsc_product_category{
            display: block !important;
        }
        .borderRight{
            border-right:none;
        }
        .dot{
            font-size:20px;
            line-height: 1;
            display: block;
            text-align: center;
            height: 100%;
            font-style: normal;
            transform: rotate(90deg);
            color: #333;
            vertical-align: middle;
            padding-left:48px;
        }

        .headMenuBtn{
            font-size:35px;
            line-height:6rem;
        }

        .firstLetter p{
            line-height: 1.5rem;
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }
        .subscribe-list-box{
            padding: 3% 0;
        }
        .subscribe-list-box-img {
            margin-bottom: 10px;
        }
        .alignright{
            padding-left: 0;
        }
        .alignleft{
            padding-right: 0;
        }

}
/*适配移动端结束*/

.reveal-modal{
    padding-top: 5rem;
}

/*ul,li{list-style-type:none;}*/

.list-tags{
    color: #ed2a26;
}
.list-tags,.list-title{
    font-family:Berthold,"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   
}
.list-desc{
    font-family:PTF55F_W,"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    padding-bottom: 6px;
}
.list-cover img{
    width: 100%;
}
.article_two{
    padding:10px 0!important;
}
.articleCont{
   font-family:PTF55F_W,"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif!important; 
}
/*header.php*/
.headerCont{
    border-bottom: 1px solid;
  /* height:6rem;*/
}
.topSeaBtn{
    padding: 1.05rem;
    background-color:#333;
    color:#fff;
}
.topSeaBtn:hover,.topSeaBtn:focus{
    background-color:#555;
}

/*category.php*/

.category-page-title{
    text-align: center;
}

.topic-box{
    overflow:hidden;
}
.category .cat-item{
    display: inline-block;
    max-width:48%;
    border-radius: 10px;
    padding:4px 8px;
    font-size: 11px;
    color: red;
    font-weight: bold;
    margin-left: 5px;
}

.category .cat-item:hover, .cat-item>a:hover{
    color:white !important;
    background-color: red;
}

.current-cat-parent{
    color:white !important;
    background-color: red;
}

.current-cat{
    color:white !important;
    background-color: red;
}


.topic-box .cat-item:last-child::after{
    content:"";
}

/*tpl-store.php*/
.magazingCover{
    height: 300px;
}
.magazineType{
    height: 2rem;
}
.magazineTitle{
    height: 2rem;
}
.txtSynopsis{
    height: 13rem;
}

.magazineType,.magazineTitle,.txtSynopsis{
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space:nowrap;
}
.txtSynopsis{
    white-space:normal;
}
.searchBoxIn{
    padding-top: 1rem;
    float: right;
}
/*single-magazine.php*/
.topMagazineBanner{
    max-width: none;
    overflow: hidden;
}


/*footer.php*/
.footerSmallBtnBox{
    font-size:2rem;
    padding-right: 2rem;
    line-height: 1.5;
}
.footMenu{
    position: absolute;
    bottom:3rem;
    display: none;
    z-index: 10;
    right: 0;
    width: 60%;
}
.fBtn{
    padding: 0!important;
    margin: 0!important;
    font-size: 1.8rem!important;
    line-height:3rem;
    margin-bottom: 1px!important;
    background-color:#000;
    color:#fff;
}

/*plugins*/
.wpsc_checkout_table{
    width: 100%;
}

/* Table Styling */

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }


/*Button background color*/
.ec-size .ec-store .grid-product__buy-now .form-control__button {
    background: red;
    }
    /*Text color*/
    .ec-size .ec-store .grid-product__buy-now .form-control__button {
    color: white;
    }

.hysj-single-title{
    position: absolute;
    z-index: 1;
    background-color: rgba(0,0,0,.3);
    color:#fff;
    height:auto;
    bottom: 0;
}

.hysj-single-title h1{
    color: #fff;
}

.hysj-single-head{
    position: relative;
}

/* single-sharing-bars */
.sharing-buttons{
    list-style: none;
}

.sharing-buttons li{
    display:inline;
}

/* Homepage Event List */

.home-event{
    margin-left:10px;
}

.home-event-list-header{
    font-size:3rem;
    text-decoration: underline;  
    display: inline-block;
}

.home-event-list-header:hover{
color:rgb(223, 15, 15);
}


.event-rows{
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

.home-event-title{
    font-size:2rem;
}

.event-rows:hover .home-event-title{
    color:rgb(223, 15, 15);
    text-decoration: underline;
    }

.event-rows:hover .home-event-excerpt{
        color:black;
    }


.home-event-excerpt{
    font-size:0.85rem;
	margin-right:15px;
}

.home-event-list-image{
    padding-top:10px;
}

.homepage-side-widget{
    margin-bottom:10px !important;
}

/* Homepage Event List On Test Homepage, use .page-template-homepage-test-template */

.page-template-homepage-test-template .home-event-list-link {
    border-bottom: 3px solid red;
}

.page-template-homepage-test-template .home-event-list-header{
    background-color: red;
    color: white;
    text-decoration: none;
    padding: 10px;
    margin-bottom: 0px;
}

.page-template-homepage-test-template .home-event-list-header:hover{
    text-decoration: underline;
}

/* Homepage Event List On Test Homepage Closing */

/* Homepage Event List Closing */

/* Single Event Post/Page */

.post-template-single-event .hysj-single-title{
    position: relative;
    color:#000;
    height:auto;
    background-color: white;
}

.post-template-single-event  .hysj-single-title h1{
    color: #000;
}

.post-template-single-event .hysj-single-head{
    position: relative;
}

/* Single Event Post/Page Closing*/

/* Magazine Showcase Page */

/* .page-template-magazine .row, .page-template-magazine .column, .page-template-magazine .columns {
    max-width: 100%;
} */

@media only screen and (min-width: 1141px) {
    .magazine-spread, .magazine-content{
        max-width: none;
        width:1200px;
        margin: 0 auto;
    }
  }

@media only screen and (max-width: 1140px) {
    .magazine-spread, .magazine-content{
    max-width: none;
    width:980px;
    }
  }

@media only screen and (max-width: 640px) {
    .magazine-spread, .magazine-content{
    width:100%;
    }
  }


/* Magazine Showcase Page Closing */

/* Search Page */

.search-caption{
    color:#70757A;
    font-size:1.5rem;
}

.search-result-item{
    padding-bottom: 15px;
    padding-top:15px;
    border-bottom: 2px solid #CCC;
}

/* Search Page Closing*/



/*Collapsible (originally for 2018 Writing Competition) */
    .collapsible-1 {
        background-color: #ccc;
        color:black;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
    }

    .collapsible-1:focus{
        outline: none;
    }
    
    .active, .collapsible-1:hover {
        background-color: rgb(223, 15, 15);
        color:white;
    }
    
    .collapsible-1-content {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

input:focus::-webkit-input-placeholder { 
    color:transparent; 
}

input:focus:-moz-placeholder { 
    color:transparent; 
}


/*Collapsible (originally for 2018 Writing Competition) */

.flex-direction-nav li{
    height:0;
}

/* Post List Page CSS */

.postListRow{
    border-bottom: 2px solid #CCC;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.postNav{
    width: fit-content;
    margin-bottom: 10px;
}

.postNav a{
    border: 1px solid #DDD;
    color:red;
    font-size: 1.4rem;
    padding: 5px;
}

.postNav a:visited{
    color:#A00;
}

.postNav a:hover{
    color:white !important;
    background-color: red;
}

.postNav .current{
    color:white;
    background-color: red;
    font-size: 1.4rem;
    padding: 5px;
}

/* Post List Page Closing */

/* Homepage Revamp CSS */

.more-posts{
    display: block;
    text-align: center;
    padding: 10px;
    border: 1px solid #DDD;
    width: 50%;
    margin: 10px auto;
}

.more-posts:hover{
    background-color: red;
    color:white;
}

.more-posts:focus{
    background-color: red;
    color:white;
}

.page-template-homepage-test-template h2{
    font-family: Berthold;
    line-height: 2.5rem;
    margin-top: 0.7rem;
}

/* Homepage Revamp Closing */

/* Gallery Fix */

.gallery{
    text-align: center;
}

.gallery-item{
    display:inline-block;
    margin-left: 10px;
}

/* Gallery Fix Closing */

@media only screen
and (min-device-width:1200px) {
    
    /* Home Slider Image */
    .slider-image{
        height:600px;
        background-size:cover;
        text-align: right;
    }

    .flexslider-caption{
        text-align: left;
        height: 100%;
        width: 27%;
        display: inline-block;
        background-color: rgba(0,0,0,.5);
        color: #ffffff;
        padding:5% 3% 0 3%;
    }

    .slider-title{
        padding-top:30%;
        color:white;
    }

    .slider-images{
        height:600px;
    }
    .hysj-header{
        height:600px!important;
    }
    .flex-direction-nav{
        margin:0;
    }

    .post-template-single-event .firstLetter p{
        line-height: 2rem;
        font-size: 1.2rem;
        margin-bottom: 1rem;
        padding: 0 10%;
    }
}


.button.background-red{
    background:#d3081c;
}

.header-container{
    height:50px;
}

    .hysj-navbar-large {
    background-color:white;
    position: fixed;
    top:0;
    left:0;
    z-index:99;
    width: 100%;
    margin:0px;
    list-style: none;
    height:50px;
    max-width: 100%;
    padding-top: 10px;
    }
   

    #menu-hysj-navbar-desktop{
    position: relative;   
    width: 100%;
    float:left;
    height: 100%;
    margin:0px;
    list-style: none;
    }

    #menu-hysj-navbar-desktop>li{
        float:left;
        width: 20%;
        text-align: center;
        font-size: 14px;
        height:100%;
    }

    .current-menu-item {
        background-color: #D00;
        color:white !important;
        font-weight: bold;
    }

.current-menu-ancestor {
        background-color: #D00;
        color:white;
        font-weight: bold;
    }

    .admin-bar .hysj-navbar-large{
        top:32px;
    }

    .h-100{
        height:100%;
    }

    #menu-hysj-navbar-desktop li:hover {
        background-color: #D00;
        color:white;
        font-weight: bold;
    }

    .hysj-button{
        background-color: #D00;
        font-weight: bold;
    }

    #menu-hysj-navbar-desktop ul.sub-menu{
        width:100%;
        margin-left:0;
        background: white;
    }

    #menu-hysj-navbar-desktop ul.sub-menu li{
        margin-left:0;
        width:100%; 
        color:black;
    }

    .related-posts{
        border-top: 2px solid #DDD;
        max-width:100%;
        padding-top:10px;
    }

    .related-post-block{
        text-align: center;
    }

    .related-post-block:hover{
        background: #EEE;
    }

    .related-post-thumbnail{
        height: 136px;
    }

    .related-post-title{
        font-size:1.8rem;
    }

    .hysj-navbar-large ul ul { /* this targets all sub menus */
        display: none; /* hide all sub menus from view */
        position: relative;
        top: 1.1rem; /* this should be the same height as the top level menu -- height + padding + borders */
    }

    .hysj-navbar-large ul ul li { /* this targets all submenu items */
    float: none; /* overwriting our float up above */
    width: 150px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
    list-style: none;
    }

    .hysj-navbar-large ul li:hover > ul {
        display: block; /* show sub menus when hovering over a parent */
    }

    .hysj-navbar-large ul ul li ul {
        /* target all second, third, and deeper level sub menus */
        position: absolute;
        left: 100%; /* this needs to match the sub menu width set above -- width + padding + borders */
        top: 0; /* this ensures the sub menu starts in line with its parent item */
    }

 blockquote:before{
    content: '\201C';
    z-index: -99;
    position: absolute;
    color: #DDD;
    font-size: 9rem;
    margin-top: -3rem;
    margin-left: -21rem;
  }


  blockquote{
      border-left:none;
      margin-left: 20%;
      margin-right: 20%;
      margin-top:5%;
      margin-bottom:5%;
      border-top:3px solid #FFF;
      border-bottom:3px solid #F00;
      text-align: center;
      padding: 0 0 0 0;
  }

    blockquote p{
        font-weight:bold;
        margin-bottom: 30px !important;
        margin-top: 30px !important;
        font-size: 20px !important;
        line-height: 3rem !important ;
    }

   .single li{
       font-size:1.2rem;
   }
      
    .img-social-icon{
        width:2.8rem;
    }

    .social-font{
        font-size: 12px;
    }



    /* Admin Bar Fix */
@media screen and (max-width:600px){
    html #wpadminbar{
        position:fixed;
    }
}

@media only screen
and (min-device-width: 767px) and (max-device-width: 1042px) {
    
    .slider-image{
        height:546px;
        background-size:cover !important;
    }
}

@media only screen
and (min-device-width: 320px) and (max-device-width: 767px) {

    .slider-image{
        height:180px;
        background-size:cover !important;
    }

   .header-container{
    height:0rem;
   }

   .postListRow{
       border-bottom: none;
       margin-bottom: 0px;
       padding-bottom: 0px;
   }

   .postListBlock{
    border-bottom: 2px solid #CCC;
    padding-bottom: 20px;
    margin-bottom: 20px;
   }

    .hysj-navbar{
    top:unset;
    background-color: #333;
    bottom:0;
   }

   .bottom-push{
       height: 5rem;
   }

   .hysj-navbar a{
    float: left;
    border-left:white;
    font-size: 14px;
    color: white;
    text-decoration: none;
    width: 20%;
    height: 100%;
    text-align: center;
   }
   


  .hysj-navbar a:focus{
    background-color: #D00;
  }

  blockquote:before{
    font-size: 9rem;
    margin-top: -3rem;
    margin-left: -12rem;
  }

  blockquote{
    margin-left: 8%;
    margin-right:8%;
    margin-top:8%;
    margin-bottom:8%;
}

blockquote p{
    font-size: 16px !important;
}

.related-post-block{
    margin-bottom: 20px;
    border-bottom: 1px solid #DDD;
}

}

.firstLetter p.drop-caps:first-letter {
font-size: 75px;
margin-right: 3px;
float: left;
line-height: 50px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}

.firstLetter p.drop-caps {
padding-top: 30px;
}

.firstLetter p.drop-first:first-letter {
font-size: 75px;
margin-right: 3px;
float: left;
line-height: 50px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}

.firstLetter img{
	padding-top: 30px;
}

.single-post h3{
    font-family: Georgia, sans-serif;
    font-size: 1.4rem;
}

div.buzzsprout-player { 
background-color:red;
}

div.episode h3 { 
background-color:red;
}
div.episode div.podcast_name { 
background-color:blue;
}
div.episode div.description {
background-color: teal;
}
div.episode p.artist { 
background-color: yellow;
}
div.episode p.date {
color: purple;
}