

#newhp{     margin-bottom: -200px; position: relative; }
#newhp.all{margin-bottom: 0;}
#newhp h2{background: none; color:#464f56; font-weight: bold; }
#newhp .btn{transition: opacity 0.4s ease-in-out;}

.main.HPboxes{position: relative; z-index: 99;}

#newhp .graySection .content{padding: 20px 0;}

#newhp .grn-bck{background: #b6c933; color:white;}
#newhp .blu-bck{background:#84c4f0; color:white;}
#newhp .ylw-bck{background: #fcdc2d; color:black;}
#newhp .red-bck{background:#d8222e;color:white; }


#newhp .rozcs{ margin: 0 -10px;}
#newhp .rozcs .rozc-out{width: 25%; padding: 0 10px; float:left;}
#newhp .rozcs .rozc{ position: relative; overflow: hidden; cursor: pointer; }
#newhp .rozcs .rozc .photo{background-position: center; background-size:cover; }
#newhp .rozcs .rozc .photo img{opacity: 0; width: 100%;}

#newhp .rozcs .rozc .rozc-in{position: absolute;bottom: -75px; z-index: 9; padding: 5px 0 40px 0; transition: all 250ms ease-in-out; width: 100%;}
#newhp .rozcs .rozc .rozc-in .icon{position: absolute; width: 40px; top:15px; left: 12px; }
#newhp .rozcs .rozc .rozc-in strong{display: block; font-size: 14pt; padding: 10px 5px 0px 60px;}
#newhp .rozcs .rozc .rozc-in p{opacity: 0; font-size: 11pt; padding: 5px 5px 5px 60px; margin-top:  0; transition: all 250ms ease-in-out;}
#newhp .rozcs .rozc .rozc-in.wthArr:before{    content: "";position: absolute;top: -20px;left: 0px;border-top: none;border-left: none;border-bottom: 20px solid #b6c933;border-right: 20px solid transparent;}
#newhp .rozcs .rozc .rozc-in.grn-bck.wthArr:before{   border-bottom-color: #b6c933;}
#newhp .rozcs .rozc .rozc-in.blu-bck.wthArr:before{   border-bottom-color: #84c4f0;}
#newhp .rozcs .rozc .rozc-in.ylw-bck.wthArr:before{   border-bottom-color: #fcdc2d;}
#newhp .rozcs .rozc .rozc-in.red-bck.wthArr:before{   border-bottom-color: #d8222e;}

#newhp .rozcs .rozc:hover .rozc-in{bottom: 0px;}
#newhp .rozcs .rozc:hover .rozc-in p{opacity: 1;}

#newhp h2.mainTit{padding: 30px 0 10px 0;}

#newhp .rozcs .rozc .btn{position: absolute; bottom: 10px; right: 10px; background: white; padding: 8px 16px; text-transform: none; border: none; font-size: 10pt; z-index: 10;}
#newhp .rozcs .grn-bck .btn{color: #b6c933;}
#newhp .rozcs .blu-bck .btn{color:#84c4f0;}
#newhp .rozcs .ylw-bck .btn{color: #fcdc2d; color:black;}
#newhp .rozcs .red-bck .btn{color:#d8222e;}
#newhp .rozcs .rozc .btn:hover{color:white; background: black;}

#newhp .twtter .sts{background: #f3f3f3; margin: 0 0 20px 0; padding: 20px; position: relative;}
#newhp .twtter img.largeinsta{ width: 100%; display: block; position: relative;}
#newhp .twtter .sts.insta:before{
    content: "";
    position: absolute;
    top: -20px;
    z-index: 9999;
    left: 0px;
    border-top: none;
    border-left: none;
    border-bottom: 20px solid #f3f3f3;
    border-right: 20px solid transparent;
}
#newhp .twtter .sts img.mini{height:48px; width: 48px;float:left;}
#newhp .twtter .sts p{padding: 0 0 0 60px; margin: 0;}
#newhp .twtter .sts h5 {margin: 0; padding: 0 0 0 60px; font-size: 14pt;}
#newhp .twtter .sts h5 a{color:#3ca1e6; }
#newhp .twtter .sts .date{text-decoration: none;}
#newhp .loadstack {overflow: hidden; width: 100%; height: 1px;}
#newhp .twtter {
    margin: 0 -20px 0 0;
}
#newhp .twtter .tripple{
    max-width: 100%;
}



#newhp .tripple{ margin: 0 -10px;}
#newhp .tripple .tripple-item{width: 33.3333%; padding: 0 10px; float:left;}
#newhp .tripple .news{position: relative; overflow: hidden; height: 600px; background: white;}
#newhp .tripple .news .photo{background-position: center; background-size:cover; height: 260px;}
#newhp .tripple .news .photo img{width: 100%; opacity: 0;}
#newhp .tripple .news .news-in{background: white; position: relative; padding: 15px 15px 0 15px;}
#newhp .tripple .news .news-in:before{    content: "";position: absolute;top: -20px;left: 0px;border-top: none;border-left: none;border-bottom: 20px solid white;border-right: 20px solid transparent;}
#newhp .tripple .news .news-in h3{font-size: 16pt; margin: 0 auto;}
#newhp .tripple .news .news-in p{ display: block;  }
#newhp .tripple .news .btnspace {position: absolute; bottom: 0; width: 100%; height: 130px; text-align: center; padding: 35px 0 0 0;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
#newhp .tripple .news .btnspace .btn{display: inline-block; color: white; background: #464f56;border: none; text-transform: none; font-size: 12pt; margin-top: 20px;}
#newhp .tripple .news .btnspace .btn:hover{ opacity: .8;}

#newhp .loadmore {position: absolute; bottom: 200px; height: 200px; width: 100%;text-align: center;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

#newhp .loadmore .btn{display: inline-block; color: white; background: #464f56;border: none; text-transform: none; font-size: 12pt; margin-top: 100px; padding-left: 40px;
    padding-right: 40px;}
#newhp .loadmore .btn:hover{ opacity: .8;}

#newhp .tripple .timeline{    background: #464f56;color: white;margin: -70px 0; padding: 0 0 20px 0;}
#newhp .tripple .timeline h2{color:white;}
#newhp .tripple .timeline .tml-item{ padding: 0 0 15px 0;  }
#newhp .tripple .timeline .tml-item .tml-date{position: relative;  float: left;background: white;margin: 0 10px 10px 15px;width: 75px;height: 75px; color:#464f56; text-align: center; font-weight: bold; padding: 20px 0 0 0;    line-height: 14pt; }
#newhp .tripple .timeline .tml-item .tml-date:before{    content: "";position: absolute;top: 0;right: -20px;border-top: none;border-left: none;    border-top: 20px solid white;    border-right: 20px solid transparent;}
#newhp .tripple .timeline .tml-item .tml-content{padding: 15px 0 0 105px;}
#newhp .tripple .timeline .tml-item .tml-content h3{margin: 0; font-size: 16pt}
#newhp .tripple .timeline .tml-item .tml-content h3 a{margin: 0; font-size: 16pt; text-decoration: none; padding: 0;}
#newhp .tripple .timeline .tml-item .tml-content p{ margin: 0; font-size: 10pt; line-height: initial; padding: 5px 10px 0 0;}
#newhp .tripple .timeline .tml-item .tml-content a{color:white;  font-size: 10pt; float: right; text-decoration: underline; padding: 0 10px;}
#newhp .tripple .timeline .btn{ display: inline-block; background: white; color: #464f56; border: none; text-transform: none; font-size: 12pt; margin-top: 20px; position: relative;z-index: 99;}
#newhp .tripple .timeline .btn:hover{ opacity: .8;}


#newhp .tripple .timeline .tml-perex {padding: 0 10px;}
#newhp .tripple .timeline .tml-perex strong{ background: white;color: #464f56;position: relative;  float: left; margin: 0 10px 10px -100px;width: 75px;height: 75px;   text-align: center; font-weight: bold; padding: 20px 1px 0 2px;    line-height: 14pt; }
#newhp .tripple .timeline .tml-perex strong:before{    content: "";position: absolute;top: 0;right: -20px;border-top: none;border-left: none;    border-top: 20px solid white;    border-right: 20px solid transparent;}
#newhp .tripple .timeline .tml-perex p{padding-left: 100px;}
#newhp .tripple .timeline .tml-perex ul{padding-left: 100px;}
#newhp .nopad-top{min-height: 500px;}





#timelinepage{min-height: 75px; margin-bottom: 10px;}

#timelinepage .title{font-size: 20pt; font-weight: bold; margin: 0 0 10px 0;}
#timelinepage strong{ background: #464f56;color: white;position: relative;  float: left; margin: 0 10px 10px -100px;width: 75px;height: 75px;   text-align: center; font-weight: bold; padding: 20px 1px 0 2px;    line-height: 14pt; }
#timelinepage strong:before{    content: "";position: absolute;top: 0;right: -20px;border-top: none;border-left: none;    border-top: 20px solid #464f56;    border-right: 20px solid transparent;}
#timelinepage p{padding-left: 100px; margin: 0;}
#timelinepage ul{padding-left: 100px;}
#timelinepage .soc{float:right;padding-left: 100px; width: 100%; margin: 10px 0 30px 0;}
#timelinepage .soc .socin{float:left;  margin: 0; padding: 5px 10px; margin: 0 5px 0 0; text-decoration: none; font-size: 11pt;  display:block; color:white; opacity: 0; }

#timelinepage .soc .socin.fb{ background: #31709e;}
#timelinepage .soc .socin.tw{ background: #83c4f0;}
#timelinepage .soc .socin.ml{ background: grey;}
#timelinepage .soc .socin span{}
#timelinepage:hover  .soc .socin{opacity: 1;}
#timelinepage:hover .soc .socin:hover{opacity: .7;}
#timelinepage p.more{text-align: right; margin: 5px 0 30px 0;font-size: 10pt;float: right;  }


#timelinepagecontent {padding-left: 100px; margin: 0;}





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

    #newhp .rozcs .rozc .rozc-in{ bottom: 0px; padding: 5px 0 60px 0}
    #newhp .rozcs .rozc .rozc-in p{display:none;}

    #newhp .tripple.articles .tripple-item{width: 50%;}
    #newhp .tripple.articles .tripple-item.fortml{width: 100%;}
    #newhp .tripple .timeline {margin: 20px 0 0 0;}
}



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

    #timelinepage .soc .socin {opacity: 1;width: 36px;}
    #timelinepage .soc .socin span{display: none;}

    #newhp .rozcs .rozc-out{width:  50%; margin-bottom: 20px;}
    #newhp .twtter .tripple .tripple-item{width: 50%;}
}


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

    #newhp .rozcs .rozc-out{width:  100%;}

    #newhp .tripple.articles .tripple-item{width: 100%;margin: 0 0 20px 0;}
    #newhp .twtter .tripple .tripple-item{width: 100%;}
    #newhp .twtter { margin: 0;}
    #newhp .twtter .tripple{ margin: 0;}
    #newhp .loadmore{margin: 0 0 0 -10px; width: 98%;}

    #newhp .tripple .timeline .btn{margin: 20px 20px 0 20px;}

}

