/*Frontpage top carousel css begin*/
#myCarousel {
    margin: 1em 0em;
}

body.section-Front-Page-en #myCarousel .carousel-caption {
    left: 60%;
    right: 1%;
    bottom: 3%;
    text-align: left;
    padding: 1em;
    background: rgba(146,144,144,0.57);
    color: white;
}

body.section-Front-Page-zh #myCarousel .carousel-caption {
    right: 1%;
    left: 52%;
    bottom: 3%;
    text-align: left;
    padding: 1em;
    background: rgba(146,144,144,0.57);
    color: white;
}

#myCarousel .carousel-caption h3 {
    color: white;
}

#myCarousel .carousel-caption h3.carousel-caption-title {
    font-size: 1.375em;
}

#myCarousel .carousel-control {
    background-image: none;
    color: white;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img {
    width: 100% /*when img is less then screen width*/
}

@media (max-width: 993px) {
    #myCarousel .carousel-caption {
        position: static;
        background: rgba(102,102,102,0.75);
    }
    #myCarousel .carousel-caption h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 0;
        margin-bottom: 0;
        font-size: 14px;
    }
    #myCarousel .carousel-caption p {
        display: none;
    }
    .carousel-indicators {
        display: none;
    }
}

/*special layout for FP Carousel focus news overlay text*/
/* default positions for reference:
	lower left
        left: 3%;
        right: 55%;
    lower right
        left: 55%;
        right: 3%;    
*/
@media (min-width: 993px) {
    body.section-Front-Page-zh #myCarousel div.carousel-inner div.item:nth-child(1) .carousel-caption {
        left: 55%;
        right: 3%;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 5%;
    }
    body.section-Front-Page-zh #myCarousel div.carousel-inner div.item:nth-child(2) .carousel-caption {
        left: 60%;
        right: 1%;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 3%;
    }
    body.section-Front-Page-zh #myCarousel div.carousel-inner div.item:nth-child(3) .carousel-caption {
        left: 56%;
        right: 1%;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 5%;
    }
    body.section-Front-Page-zh #myCarousel div.carousel-inner div.item:nth-child(4) .carousel-caption {
        left: 61%;
        right: 1.75%;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 3%;
    }    
    body.section-Front-Page-zh #myCarousel div.carousel-inner div.item:nth-child(5) .carousel-caption {
        left: 61%;
        right: 1.75%;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 3%;
    }
    body.section-Front-Page-zh #myCarousel div.carousel-inner div.item:nth-child(6) .carousel-caption {
        left: 61%;
        right: 1.75%;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 3%;
    }
    body.section-Front-Page-en #myCarousel div.carousel-inner div.item:nth-child(1) .carousel-caption {
        left: 60%;
        right: 1%;  
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 3%;
    }
    body.section-Front-Page-en #myCarousel div.carousel-inner div.item:nth-child(2) .carousel-caption {
        left: 60%;
        right: 1%;  
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 3%;
    }
    body.section-Front-Page-en #myCarousel div.carousel-inner div.item:nth-child(3) .carousel-caption {
        left: 60%;
        right: 1%;    
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 3%;
    }
    body.section-Front-Page-en #myCarousel div.carousel-inner div.item:nth-child(4) .carousel-caption {
        left: 60%;
        right: 1%;  
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        bottom: 5%;
    }
/* subtitle styles
    body.section-Front-Page-zh #myCarousel div.carousel-inner div.item:nth-child(1) .carousel-caption h3.carousel-caption-title {font-size:20px;}
    body.section-Front-Page-zh #myCarousel div.carousel-inner div.item:nth-child(1) .carousel-caption h3.carousel-caption-subtitle {font-size:20px; margin-top:0px; text-align:right}
*/
    body.section-Front-Page-en #myCarousel div.carousel-inner div.item:nth-child(1) .carousel-caption h3.carousel-caption-subtitle {margin-top:0px;}
}
/*Frontpage top carousel css end*/

/*Frontpage slogan css begin*/
div[id^="slogan-"] {
    text-align: center;
    margin: 3em auto;
}
div[id^="slogan-"] h3 {
    color: #72a3b3;
    font-weight: bold;
    font-size:1.875em;
}
div[id^="slogan-"] p {
    font-size: 1.75em;
}
#slogan-en p {
    letter-spacing: 1px;
    color: #1f6c86;
}

#slogan-zh p {
    letter-spacing: 0.2em;
    color: #1f6c86;
}

@media (max-width:992px) {
    div[id^="slogan-"] h3,
    div[id^="slogan-"] p {
        font-size: 3vw;
    }
}

@media (max-width:767px) {
    div[id^="slogan-"] h3 {
        font-size: 24px;
    }
    div[id^="slogan-"] p {
        font-size: 18px;
    }
}
/*Frontpage slogan css end*/


/*frontpage navigation array css start*/
/* original files by iecosystem are here IT_Documents/Development/www.efchina.org/website_1_V1.0_en/style */
.focus {
    margin:1em auto 0em auto;
}

@media (min-width:1300px) {
    .focus>.hd>ul {
        height: 125px; /*give static height after 1300*/
    }
}
@media (max-width:1299px) {
    .focus>.hd>ul {
        height: 9.5vw; /*reserve space for the hover inidcator bar by making ul tall enough, otherwise when it's shown, lower elements shift down*/
    }
}

.focus .hd li {
    float:left;
    width:13%;
    margin-right:1.5%;
    text-align:center;
    margin-bottom: -25px;
    height: 90%; /*make some space between image and hover inidcator bar, height of li should be taller than img+span for bar to display below li. formula to calculate height is li_wideth*.9-25(span height)*/
}

.focus .hd img {
    width:100%;
}
.focus .hd li span { 
    background:url(images-ieco/gray_bg_80.png) repeat;
    display:block; 
    position:absolute;
    color:#fff;
    font-size: 0.9em;
    line-height:25px;
    padding-top: 3px;
    position: relative;
    bottom: 28px;
}

@media (max-width: 993px) {
    .focus .hd li span { 
        font-size: 1.4vw;
    }
}

.focus .bd {
    width: 100%;
    margin: 0;
    padding: 0;
}

.focus .hd {
    background-color: transparent;
    padding: 0;
}

.focus .hd li:hover {
    /*transform: scale(1.1);*/
    border-bottom:5px solid #0d627d;
}

.focus .hd li:last-child {
    margin-right: 0;
}

/* use narrow and extra narrow font for en nav tiles*/
.focus.en .hd li span {
    background: url(images-ieco/gray_bg_80.png) repeat;
    display: block;
    position: absolute;
    color: #fff;
    line-height: 13px;
    height: 25px;
    padding-top: 5px;
    vertical-align: bottom;
    position: relative;
    bottom: 25px;
    font-family: NewsGothCnBT;
    font-size:0.9em;
}

.focus.en .hd li:nth-child(1) span {
}
.focus.en .hd li:nth-child(2) span {
    font-family: NewsGothXCnBT;
}
.focus.en .hd li:nth-child(3) span {
}
.focus.en .hd li:nth-child(4) span {
    font-family: NewsGothXCnBT;
}
.focus.en .hd li:nth-child(5) span {
}
.focus.en .hd li:nth-child(6) span {
}
.focus.en .hd li:nth-child(7) span {
    font-family: NewsGothXCnBT;
}

@media (max-width: 767px) {
    .focus .hd {
        overflow-x: scroll;
        display: none;
    }
}

@media (max-width: 993px) {
    .focus.en .hd li span { 
        font-size: 1.4vw;
    }
}

/*frontpage navigation array css end*/


/* Program entry pic css start*/
/*hidden at desktop view*/
#program-entry {
  display: none;
}

#fp_program_entry_title a:link, a:visited {
    color: #1e6d86;
}

#fp_program_entry_title {
    border-bottom: 1.25px solid #008EC2;
    height: 40px;
    font-size: 1.25em;
    margin-bottom: 1em;
}

/* Program entry pic, displayed in mobile view*/
@media (max-width: 768px) {
    #program-entry {
    display: block;
    }
    #program-entry .portletProgramEntry img{
    width: 100%;
    }
}
/* Program entry pic css end*/

/*Frontpage News Block css begin*/
#fp-news-block {
    margin-top: 3em;
    /*display: inline-block; use inline-block or overflow to make parent div receive children's height*/
    /*overflow: auto;*/
}
/* resize frontpage first news image */
#fp-news-block .fp-first-news .fp-newsImageContainer img {
    width: 100%;
    height: auto;
}

/* other news images */
#fp-news-block div[id*='fp-newsitem'] .fp-newsImageContainer img  {
    width: 100%;
    /*clip: rect(0px,175px,175px,0px);*/
    float: left;
}
.fp-newsImageContainer.col-md-3 {
    margin-right: 1em;
}
div[id*='fp-newsitem'] {
    margin-bottom:2em;
}

div#fp-newsitem-3 {
    margin-top: 5.55%;;
}

.fp-first_news {
    padding-right:23px;
}

#fp-other-news23 {
    padding-left:23px;
}

#fp-other-news45 {
    padding-left:38px; /*15+23*/
}
/* so that description text does not wrap image*/
div[id*='fp-newsitem'] .newsitem-detail {
    overflow: hidden;
}

.newsitem-detail h3.active::before {
    font-family: FontAwesome;
    content: "\f0da";
    padding-right: 0.5em;
}

#fp-news-list {
    margin-top: 1em;
}

#fp_newsroom_title,
#fp_report_title {
    border-bottom: 1.25px solid #008EC2;
    height: 40px;
    margin-bottom: 1em;
}

/*remove extra padding added by bootstrap*/
#fp-newsitem-1 {
    padding-left: 0;
}
#fp-other-news23,
#fp-other-news45 {
    padding-right: 0;
}
#fp-newsitem-1-desc {
    padding-left: 0;
}
#fp-newsitem-1 .fp-newsImageContainer img {
    width: 100%
}
#fp-first-news-row2 {
    clear: left;
}
#fp-newsitem-1-desc-ph {
  margin-bottom: 0;
}

/*front page item padding fix*/
@media (max-width: 992px) {
    #fp-newsitem-1 {
        padding-right: 0;
    }
    #fp-news-block .fp-other-news23 {
        padding-left: 0;
    }
    #fp-newsitem-2 .fp-newsImageContainer,
    #fp-newsitem-3 .fp-newsImageContainer {
        padding-left: 0;
    }
    #fp-other-news23 {
        padding-left: 0;
    }
    #fp-other-news45 {
        padding-left: 0;
    }
    #fp-first-report #fp-reportImageContainer {
        padding-right:0;
    }
    .fp-report1-desc {
        padding-left:0;
    }
    .slick-slider {
        padding-left: 0;
        padding-right: 0;
    }
    .listing_entry .col-sm-10 {
        padding-left: 0px;
    }
}

@media (max-width: 992px) {
    #fp-news-block span[id*='fp-newsitem'] .fp-newsImageContainer img  {
        width: 100%;
    }
    div[id*='fp-newsitem'] .newsitem-detail {
        float:left;
    }
    div#fp-newsitem-2 {
        margin-top: 1em;
    }
}
/*Frontpage News Block css end*/

/*Frontpage Report Block css begin*/
#fp-report-block {
    margin-top: 3em;
    /*display: inline-block; use inline-block or overflow to make parent div receive children's height*/
    overflow: visible;
}
#fp-first-report {
    clear: left;
}

#fp-first-report #fp-reportImageContainer {
    padding-left: 0;
    margin-bottom: 2em;
}

.fp-report1-desc {
    padding-right: 0;
}

.fp-report1-photocredit {
    text-align: right;
}

.fp-other-reports {
    margin-top: 2em;
}

#fp-reportImageContainer img {
    width: 100%;
    /*clip-path: polygon(0% 0%, 100% 0%, 100% 245px, 0% 245px);*/
    max-height: 245px;
}

.report-desc {overflow: hidden}
/*makes sure each news items starts from a newline*/
.section-News-en dl dt,
.section-News-zh dl dt {
    clear: both;
}

/* frontpage slides text overlay */
.report-slide-title {
    top: 75%;
    line-height: 1.2em;
    padding: 0em 1.5em;
    position: absolute;
    display: block;
    hyphens: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white !important;
    font-size: 16px;
    padding-top: 2px; /* top of letter is chopped off*/
    max-height: 20%;
    font-family: NewsGothCnBT;
    text-shadow: #dacece 0px 2px 3px;
}

.report-slide-date {
    display: none;
    bottom: 5%;
    padding: 0em 24px;
    position: absolute;
    color: white;
}


.slick-slider {
    padding-left: 40px;
    padding-right: 40px;
}
.slick-cloned div:first-child,
.slick-slide div[id^=fp-report-] {
    max-width:100%;
    margin: 0px auto;
}
/*make other slides smaller*/
.slick-slide {
    transform: scale(0.8);
}
/*and center slide bigger*/
.slick-center div[id^=fp-report-] {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
}
.slick-img {
    width: 100%;
}
/* Arrows had to add more weight to the rules*/
body[class*='section-Front-Page'] .slick-prev,
body[class*='section-Front-Page'] .slick-next
{
    width: 111px;
    height: 111px;
    z-index: 100;
}
body[class*='section-Front-Page'] .slick-prev {
    background-image: url('/modaji/images/report_nav_button_left.png');
    left: 15px;
}
body[class*='section-Front-Page'] .slick-next {
    background-image: url('/modaji/images/report_nav_button_right.png');
    right: 15px;
}
body[class*='section-Front-Page'] .slick-prev:before
{
    content: '';/*reset slick carousel default arrow*/
}
body[class*='section-Front-Page'] .slick-next:before
{
    content: ''; /*reset slick carousel default arrow*/
}
/*Frontpage Report Block css end*/