/* • News Index
  ------------------------------------------------------------------------- */
  .news-dropdown-blk  { width:30%; float:right; background-color:#e7e7e7; margin-bottom:10px}

  .fullcol-content-pos { padding:40px 20px 50px 20px; min-height:800px}
  .fullcol-article-pos { padding:40px 100px 50px 100px; min-height:800px}

        #body.orange .date-width,  #body.orange .nl-left  { width:25%; background-color:#d35e3d}
        #body.orange .intro-width, .nl-right-inside { width:75%;}

        #body.green .date-width, #body.green .nl-left  { width:25%; background-color:#99cc33}
        #body.green .ntro-width { width:75%;}

  .news-list div { transition:none}
  .news-list          { width:100%; height:100%; display:table; table-layout:fixed; margin-bottom:30px}
  .news-list .nl-left { /*width: 25%;*/ height:100%; display:table-cell; float:none; /*background-color:#d35e3d*/}
  .news-list .nl-left .nl-left-pos { padding:0 20px}
  .news-list .nl-right, .nl-right-inside { /*width:75%;*/ display: table-cell; float: none; height: 100%;
                                           background-color:#e7e7e7; transition: all 0.3s ease-out;}
  .news-list .nl-right .nl-right-pos,
  .nl-right-inside .nl-right-pos         { padding:20px 30px; vertical-align:bottom}

        #body.orange .news-list:hover .nl-right { background-color:#333; color:#fff; cursor:pointer}
        #body.green .news-list:hover .nl-right  { background-color:#333; color:#fff; cursor:pointer}
        #body.green .news-list:hover .nl-right .news-list-title  { color:#99cc33;}


  /* • Date, month & week Style (Used in Events, News, Press Release and Other Cultural Info)
   ------------------------------------------------------------------------- */
  .news-list-date, .news-list-month, .news-list-week { display:inline-block; line-height:normal;}
        
        #body.orange .news-list-date  { font-size:80px;}
        #body.orange .news-list-month { font-size:30px; padding-right:10px;} 
        #body.orange .news-list-week  { font-size:25px; opacity:0.5; text-transform:uppercase;} 

        #body.green .news-list-date  { font-size:70px;}
        #body.green .news-list-month { font-size:20px; padding-right:10px;} 
        #body.green .news-list-week  { font-size:15px; opacity:0.5; text-transform:uppercase;} 

        #body.orange .news-list-title { color:#d35e3d; line-height:1.4; margin-bottom:10px}
        #body.green .news-list-title  { color:#018752; line-height:1.4; margin-bottom:10px}


  .news-list-date-sm, .news-list-month-sm, .news-list-week-sm { display:inline-block; line-height:normal; color:#fff; padding-top:5px}
  .news-list-date-sm  { font-size:50px;}
  .news-list-month-sm { font-size:20px; padding-right:10px;} 
  .news-list-week-sm  { font-size:15px; opacity:0.5; color:#fff; text-transform:uppercase;} 


  .article-btn-back { font-size:60px; text-align:center; color:#fff; line-height:normal;
                         width:60px; height:60px; background-color:#333;
                        -webkit-border-radius: 50px;
                           -moz-border-radius: 50px;
                                border-radius: 50px; transition: all 0.3s ease-out;}
  .article-btn-back:hover { background-color:#999; cursor:pointer}

  .fa-angle-left  {letter-spacing:5px}


  .article-col-left   { width:10%; float:left}
  .article-col-right  { width:90%; float:left}





/* ==========================================================================
  = Media Style
============================================================================= */

  @media only screen and (max-width: 1024px) {
  .news-dropdown-blk { margin-top:-110px}


  .fullcol-article-pos { padding:25px}

        #body.orange .date-width,  #body.orange .nl-left  { width:28%;}
        #body.orange .intro-width { width:72%;}

        #body.green .date-width, #body.green .nl-left  { width:28%;}
        #body.green .intro-width { width:72%;}

        #body.orange .news-list-date  { font-size:55px;}
        #body.orange .news-list-month { font-size:20px;} 
        #body.orange .news-list-week  { font-size:15px;} 

        #body.green .news-list-date  { font-size:55px;}
        #body.green .news-list-month { font-size:20px;} 
        #body.green .news-list-week  { font-size:15px;} 

  .article-btn-back { font-size:50px; width:50px; height:50px; }
  }

  @media only screen and (max-width: 767px) {
  .news-dropdown-blk { width:100%; float:left; margin-top:auto; margin-bottom:20px}

  .fullcol-content-pos { padding:20px 20px 50px 20px}
  .fullcol-article-pos { padding:20px 20px 50px 20px}

        #body.orange .date-width, #body.orange .nl-left   { width:100%;}
        #body.orange .intro-width, #body.green .nl-left { width:100%;}

        #body.green .date-width  { width:100%;}
        #body.green .intro-width { width:100%;}


  .news-list          { width:100%; height:100%; display:inline-block; table-layout:inherit;}
  .news-list .nl-left { height:100%; display:inline-block; float:left;}
  .news-list .nl-left .nl-left-pos { padding:0 20px 5px 20px}
  .news-list .nl-right { display:inline-block; float:left; height: 100%;}
  .news-list .nl-right .nl-right-pos { padding:20px;}

        #body.orange .news-list-date  { font-size:40px;}
        #body.orange .news-list-month { font-size:20px;} 
        #body.orange .news-list-week  { font-size:15px;} 

        #body.green .news-list-date  { font-size:45px;}
        #body.green .news-list-month { font-size:20px;} 
        #body.green .news-list-week  { font-size:15px;} 


  .article-btn-back { font-size:30px; text-align:left; margin-bottom:20px;
                         width:100%; height:30px; padding:2px ; 
                        -webkit-border-radius: 0px;
                           -moz-border-radius: 0px;
                                border-radius: 0px;}

  .fa-angle-left:before { padding-left:10px}


  .article-col-left   { width:100%; float:left; /*display:none*/}
  .article-col-right  { width:100%; float:left}
  .article-btn-back { display:none}
  }

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

  }