@import url("table.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Anton|Roboto:400,500,700,900');
html, body{
    background: #e0dfde;
    color: #495057;
    font-size: 18px;
    font-family: 'Roboto', Gotham, "Helvetica Neue", Helvetica, Arial, "儷黑 Pro", "LiHei Pro", 'Noto Sans SC', "微軟正黑體", "Microsoft JhengHei", sans-serif;
    line-height: 1.75em;
    width: 100%;
    height:auto;
    margin:0;
    padding:0;
    /*overflow:auto*/
}

/*---   Font   ---*/
h1, h2, h3, h4, h5, h6{ color: var(--dark-gray); font-family: 'Noto Sans TC', sans-serif; font-weight: 700; }
h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small{ color:var(--secondary);}
h1, .h1{ font-size: 1.75rem;}
h2, .h2{ font-size: 1.65rem;}
h3, .h3{ font-size: 1.5rem;}
h4, .h4{ font-size: 1.375rem;}
h5, .h5{ font-size: 1.25rem;}
h6, .h6{ font-size: 1rem;}
@media print, screen and (min-width: 40em) {
  h1, .h1{ font-size: 2.25rem; }/*36px*/
  h2, .h2{ font-size: 1.75rem;}/*28px*/
  h3, .h3{ font-size: 1.625rem;}/*26px*/
  h4, .h4{ font-size: 1.5rem;}/*24px*/
  h5, .h5{ font-size: 1.25rem;}/*20px*/
  h6, .h6{ font-size: 1rem;}/*16px*/
}
:focus{ outline: 0;} /* remember to define focus styles! */
/*---  Title Underline  ---------------------*/
/*hr{margin: 0.5rem auto;}*/
hr{ margin-top: .5rem; border-bottom: 1px solid #ff5447}
hr.subhr{ border-bottom: 5px solid #ff8f47;}
.separator-center::after { border-bottom: 0.3rem solid #E38A6D;}
.divider{ background-color: #ff8f47; border: 3px; display: inline-block; height: 3px; width: 40px;}
.collapse{ padding: 0;}
.marTop{ margin-top: 3rem;}
.marBtm{ margin-bottom: 3rem;}
.text{ padding: 0 20px; margin-bottom:50px}
/*---   paragraph Spacing -------------------*/
.post-content{ padding: 1.5rem 0 3rem; background: #edeadc;}
.post-body{ padding: 2rem 0}
.post-title h1{ padding-bottom: 1rem;}
@media screen and (min-width: 64em){
    .post-content{ padding: 3rem 0 4rem;}
    .post-title h1{ padding-bottom: 2rem;}
	.text{ padding-left: 0; padding-right: 0;}
}
/*.accordion-title{ color: #468bcd; text-decoration:none; font-weight:700;}*/
/*---   Link   ----------------------------------------------------------------------------------------------*/
a{ color: #212529; transition: all 0.5s ease 0.3s;}
a:hover, a:focus{ color: #ff8f47; text-decoration: none;}
/*---   Button   --------------------------------------------------------------------------------------------*/
.button { background-color: #ff8f47; color: #fff}
.button:hover { background-color: #d0a22f; color: #fff}
.button.hollow{  border-color: #ff8f47; }

.button.secondary{ background: #495057; color: #fff}
.button.secondary:hover, .button.secondary:focus { background-color: #bababa; color: #0a0a0a;}
.button.hollow.secondary { border: 1px solid #888; color: #888;  background: transparent;}
.button.hollow.secondary:hover, .button.hollow.secondary:focus{ border-color: #555; color: #555;}
.button.hollow.secondary:hover.disabled, .button.hollow.secondary:hover[disabled], .button.hollow.secondary:focus.disabled, .button.hollow.secondary:focus[disabled] { border: 1px solid #e9e9e9; color: #e9e9e9;}
.button.hollow { border: 1px solid #468bcd; color: #468bcd;}
.button.alert { background-color: #f36497; color: #fff; text-decoration:none;font-weight:700}
.button.alert:hover, .button.alert:focus { background-color: #bb4770; color: #fff;}
/*---   structure   -----------------------------------------------------------------------------------------*/
.wrapper{ }
.wrap-inner{ width:100%; margin:0 auto;}
@media screen and (min-width:1360px){ .wrap-inner { width: 1300px; margin:0 auto;}}
@media screen and (max-width:1359px){ .wrap-inner { width: 98%; margin:0 auto;}}
.contentwrapper{ background: #fff;}
.innertube{padding: 40px 0;}
.reveal-overlay{ background-color: rgba(10, 10, 10, 0.85);}
@media print, screen and (min-width: 40em) {
    .reveal.large {
      width: 100%;
      max-width: 64rem; }
}

/* ----------------------------------------------------------------------------------------------------------
   Header
------------------------------------------------------------------------------------------------------------*/
.top-bar{ background: #fff; padding: 0;}
.top-bar > .flex_header{ display: flex; justify-content: space-between; margin: 0 auto;}
.top-bar > .flex_header div{ flex: 0 0 auto;}
.top-bar .title{ margin-right: 12px;} 
.top-bar .label.success{ background:#4CAF50;color:#fff;padding:12px 16px;font-size: 16px;}

/* ----------------------------------------------------------------------------------------------------
   Footer
------------------------------------------------------------------------------------------------------*/
footer{ font-size: 16px; line-height: 1.35; background: #ff8f47; border-top: 1px solid #f0f0f0; color:#fff;}
.copyright-info a{ color: #fff}
.copyright-info a:hover{ color: #fc0}
.bg-count{ background: url(../image/bg.jpg) top left; background-attachment: fixed;}
/* --------------------------------------------------------------------------------------------------
   Form
-------------------------------------------------------------------------------------------------  */
label{ font-size: 16px; }
label .title{ width: 90px;}
legend{ color: #000; font-size: 18px;}
.fieldset legend{ padding: 0 1rem;}
[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
textarea { margin: 0 0 1rem; padding: 0.75rem 0.75rem; background-color: #fff; border: 1px solid #cacaca; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); }
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus{ outline: none; border: 1px solid #fff; background-color: #fefefe;}
[type="checkbox"], [type="radio"]{ margin-right: 5px;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color: #999;}
input::-moz-placeholder, textarea::-moz-placeholder{ color: #999;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder{ color: #999;}
input::placeholder, textarea::placeholder { color: #999;}
.pop-up .close-button{ color: #7f8c8d; z-index: 100}
[type='checkbox']{ }
.pop-up .close-button:hover, .close-button:focus { color: #bdc3c7;}
.pop-up .button{ background: #1abc9c; color: #fff; border: 1px solid #4ed1b7; border-bottom: 3px solid #16a085;box-shadow: 2px 4px 8px rgba(10, 10, 10, 0.3); margin-top: .3rem}
.require{ color: #f36497; margin-left: 6px;}

.fieldset .flex-col{ display: flex; flex-direction: column;}
.fieldset .flex-row{ display: flex; flex-direction: row; margin-bottom: 10px;}
.document .fieldset { border: 1px solid #aaa;}
.traffic{ display: flex; flex-direction: column;}
@media screen and (min-width: 64em){ .traffic{ flex-direction: row;}}

.form-list-row{ display:flex; flex-direction: row;}
.form-list-row .item-col1{ flex: 0 1 20px;}
.form-list-row .item-col2{ flex: 0 1 90%;}

.search-plan .area{ color: #d74c0e; font-weight: bold;}
.search-plan fieldset{ border-bottom: 1px dashed #888; margin-bottom: 10px;}
.search-plan fieldset:last-child{ border-bottom: none;}
.resultBox{ border: 3px dashed #ff5447; }
      .count.card{ border: 3px solid #dcdcdc; padding: 0 21px;}
      .count .data, .count .amount{ line-height: 1.2; font-weight: normal;}
      .count .data{ padding-top: 8px; border-right: 1px solid #aaa;}
      .count .data strong, .data strong{ color: #ff5447;}
      .count .data div, .count .amount div{ font-size: 14px;}
      .count .amount strong, .amount strong{ color: #ff5447; font-weight: 700; font-size: 30px;}

/*.count-info{ background:#ff5447; color: #fff; border-color:#ff5447; padding: 12px 16px; margin-right: 0;}
.count-info h5{ font-size: 20px;margin-bottom: 0px;}
.count-info h5 img{ margin-bottom: 5px; margin-right: 3px}
.count-info.card, .citybox.card{ margin-bottom: 0;}
.count-info .amount{ border-radius: 6px; color:#000; font-size: 14px; background:#fcfcfc; padding: 13px 10px; line-height: 1.2}
.count-info .amount .unit{ color: #4CAF50; margin-right: 6px;}
.count-info .amount strong{ color: #4CAF50; font-size: 24px}
.count-info .data strong{ color:#fff;}
.count-info .data span{ font-size: 15px;}*/
.citybox{ margin: 0 1px 1px 1px;}
.citybox:last-child{ margin: 0 0 1px 1px;}
.citybox .date .label{ background: #fff; border:1px solid #e6e6e6; border-left:none; color:#ff8f47;}
.citybox .date .label:last-child{ border-left: none; border-right:none; }


.tabs { border: 1px solid #e6e6e6; background: #fefefe;}
.tabs-title > a { padding: 1rem 1.5rem .75rem; font-size: 1rem; color: #333;}
.tabs-title > a:hover { background: #ff8f47; color: #fff;}
.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] { background: #e6e6e6; color: #ff5447; font-weight: bold;}
.tabs-content { border: 1px solid #e6e6e6; border-top: none;}
.masonry-css {
 /* -webkit-row-count: 1;
          row-count: 1;
  -webkit-column-gap: .5rem;
          column-gap: .5rem;*/
display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: 0px 2rem;
}
.masonry-css-item .card{ transition: all 0.5s ease 0.3s;}
.masonry-css-item .card:hover{ border: 1px solid #ff8f47;}
@media screen and (min-width: 25em) { /*400px*/
  .masonry-css {
    /*-webkit-column-count: 1;
            column-count: 1;*/
    grid-template-columns: auto;
    padding: 0px 1rem            
  }
}

@media screen and (min-width: 37.5em) {/*600px*/
  .masonry-css {
    /*-webkit-column-count: 3;
            column-count: 3;*/
    grid-template-columns: auto auto;
    padding: 0px 1rem
  }
}

@media screen and (min-width: 50em) {/*800px*/
  .masonry-css {
    /*-webkit-column-count: 3;
            column-count: 3;*/
    grid-template-columns: auto auto;
    padding: 0px 1rem
  }
}

@media screen and (min-width: 68.75em) {/*1100px*/
  .masonry-css {
    /*-webkit-column-count: 5;
            column-count: 5;*/
    grid-template-columns: auto auto auto;
  }
}

.masonry-css-item {
  /*-webkit-column-break-inside: avoid;
          break-inside: avoid;
  margin-bottom: .5rem;*/
  text-align: center;

}

/*--  事故統計分析  --------*/
.ranking .input-group-field{ background: #f5f5f5; border: none; margin: 0; }
.ranking .calendar{ text-decoration: none;
  border: 0px solid #bbb;
  background:#f5f5f5;  
  display: block;
  padding: 12px 12px;
  border-left: 0;
  cursor: pointer;
  align-self: center;
  justify-content: center; 
  line-height: 1; }
.ranking .total div h2{ font-size: 3rem; }
.ranking .total .label{}
.ranking .total .item:first-child, .ranking .total .item:nth-child(2), .ranking .total .item:nth-child(3), .ranking .total .item:nth-child(4){ border-right: 0px solid #dcdcdc; width: 100%;}
@media screen and (min-width: 64em) { .ranking .total .item:first-child, .ranking .total .item:nth-child(2), .ranking .total .item:nth-child(3){ border-right: 1px solid #dcdcdc; width: 25%} .ranking .total .item:nth-child(4){ border-right: none; width: 25%}}
.month .prev, .month .next{ border-radius: 50px; padding:5px 10px;}
.month .timebox{ font-size: 20px;}
.ranking .card{ /* Permalink - use to edit and share this gradient. 固定鏈接 - 用於編輯和分享此漸變： https://colorzilla.com/gradient-editor/#f5f5f5+25,f5f5f5+25,ffffff+60 */background: linear-gradient(to bottom,  #f5f5f5 25%,#f5f5f5 25%,#ffffff 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border-radius: 3px; -webkit-box-shadow: 3px 20px 19px -18px rgba(0,0,0,0.5); -moz-box-shadow: 3px 20px 19px -18px rgba(0,0,0,0.5); box-shadow: 3px 20px 19px -18px rgba(0,0,0,0.5);}
.ranking .card-divider{ background: transparent; padding-bottom: .3rem;}
.ranking .card-divider h5{ /* Permalink - use to edit and share this gradient. 固定鏈接 - 用於編輯和分享此漸變： https://colorzilla.com/gradient-editor/#ffeadc+24,ffeadc+24,f7f7f7+100 */
background: linear-gradient(to bottom,  #ffeadc 24%,#ffeadc 24%,#f7f7f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 color:#ff8f47; padding: .2rem .6rem; border-radius: 4px; font-family: arial; font-style: italic; font-weight: bold; }
.ranking .card-divider .topic{ padding-top:.2rem; color: #666; font-weight: bold; font-size: .85rem; line-height: 1.2}
.ranking .card-section{ padding-bottom: 1rem;}
.ranking .card-section h2{ font-size:36px; font-family:arial;margin-bottom: 0rem; line-height: 1.2;}
.ranking .card-section .data{ font-size: .85rem; color: #666;}


/*--  login/register  ---------------------------------------------------------------------------------------------------------*/
.form-block{ background: #fff;}
.form-block fieldset{ padding: 2.5rem; border: 1px solid #468bcd;  -webkit-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.2);}
.form-block legend{   }
.form-block .input-row input[type=text], .input-row input[type=password] { padding-left: 52px;}
.form-block .input-row { position: relative;}
.form-block .input-icon { position: absolute; left: 0; top: 0; margin:15px}
.form-block .required, .inquery .required{ color: var(--warning); margin-left: 5px;}
.margin-right{ padding-right: 0;}
      @media screen and (min-width: 64em) { .margin-right{ padding-right: 10px;} }

/* --------------------------------------------------------------------------------------------------
   Logo
-------------------------------------------------------------------------------------------------  */
a.logo{ background: url(../image/logo_s.png) no-repeat left top; display: block; width: 45px; height: 49px; margin: 20px 0 10px 0;}
a .title{ font-size: 0.8rem; font-weight: bold; display:block; line-height: 0.8; margin-top:9px; margin-left:5px;}
a .title .subtitle{ font-size: 10px; font-weight: normal;}
@media screen and (min-width: 64em){ 
   a.logo{ background: url(../image/logo.png) no-repeat left top; width: 71px; height: 78px; margin: 30px 0;}
   a .title{ font-size: 26px; font-weight: bold; display:block; line-height: 0.8;margin-top: 3px; margin-left:8px}
   a .title .subtitle{ font-size: 14px; font-weight: normal;}
}
.topnav.menu{ background: transparent;}
.topnav.menu > li { }
.topnav.menu > li:last-child { border-right: none;}
.topnav.menu > li > a:hover{ background: #FF8F47; color:#fff; border-radius: 3px}

/* --------------------------------------------------------------------------------------------------
   Navigation
-------------------------------------------------------------------------------------------------  */
.navigation{ background: #FF8F47;
background: linear-gradient(180deg, rgba(255, 143, 71, 1) 1%, rgba(255, 117, 71, 1) 100%);
  border-top: #ededed 1px solid;
  border-bottom: #d5d2ce 1px solid; width:100%;}
.navigation .menu{ background: transparent; padding: 0px}
.navigation .menu > li{ border-right: #FFC5A1 1px solid;}
.navigation .menu > li:first-child{ border-left: #FFC5A1 1px solid;}
.navigation .menu > li > a{ color: #fff; display:inline-block; padding: 1.8rem 1.2rem 1.7rem ; margin:0; font-weight: bold; font-size: 22px}
.navigation .menu > li > a:hover{ color: #ff8f47; background: #f5f4f2; text-decoration: none;}
.navigation .menu .is-active > a, .navigation .menu .active > a{ background: rgba(255, 255, 255, .5); color: #000;}
.navigation .menu > li > a span{ margin-left: 5px; font-weight: normal; color: #ff5447}
.navigation .menu > li > a span.success{ background: #fff}
.navigation .dropdown.menu > li.is-dropdown-submenu-parent > a { padding-right: 1.2rem; }
.navigation .dropdown.menu > li.is-dropdown-submenu-parent > a::after{ border: inset 0; border-color: #f2b6d2 transparent transparent;}
.navigation .menu > li > a img{ margin-bottom: 8px;}
.navigation i{ margin-bottom: 12px; }
/*--   SubMenu   --*/
.navigation .is-dropdown-submenu{ background: #fff; border: 0px solid #ff8f47; box-shadow: 1px 2px 5px rgba(10, 10, 10, 0.2); z-index: 999; min-width: 200px}
.navigation .is-dropdown-submenu li{ border-left: none; border-right: none; border-bottom: 1px solid #ffddc7;}
.navigation .dropdown .is-dropdown-submenu{ padding: 0}
.navigation .dropdown .is-dropdown-submenu a{ color: #fff; font-weight: normal; background: #ff8f47; text-align: center; margin: 0; padding: .7rem 1rem; width: 100%;}
.navigation .dropdown .is-dropdown-submenu a:last-child{ border-bottom: none;}
.navigation .dropdown .is-dropdown-submenu a:hover{ background: #fff; color: #ff8f47;}

/* --------------------------------------------------------------------------------------------------
   Mobile :: Header
-------------------------------------------------------------------------------------------------  */
.hamburger{ border: none; padding: 5px 0; transition: all 1s ease;}
.hamburger .menu-icon{ width: 30px;}
/*--   Mobile Navigation   --*/
.off-canvas{ background: #ff8f47;}
.close-button{ color: #fff; z-index: 100}
.close-button:hover, .close-button:focus { color: #fff;}
.accordion-menu{ margin: 0rem 0 2rem 0;}
.accordion-menu li a{ background: #ff8f47; border-bottom: 1px solid #ffd2b5; color:#fff; font-size: 18px; font-weight: 400; letter-spacing: .022em; padding: 1.2rem 1.2rem 1rem 1.2rem;}
.accordion-menu li a:hover{ background: rgba(255, 255, 255, .9); color: #ff8f47}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after{ border: inset 6px; content: ''; border-color: #000 transparent transparent;}
.accordion-menu .is-accordion-submenu a{ padding: .7rem 1rem .7rem 1.3rem;}
ul.submenu{ padding:0}
ul.submenu li a{ background:rgba(255, 255, 255, 1); color:#4d4d4d; border-top: 1px solid #ff8f47; line-height: 1.7; }
ul.submenu li a:hover{ background:rgba(255, 255, 255, .9); color: #ff8f47}
/*------------------------------------------------------------------------------------------------------
   INDEX Layout
--------------------------------------------------------------------------------------------------------*/
.slidewrapper{}
.owl-nav{ position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;}
/*.owl-next{ float: right;}
.owl-prev{ float: left;}*/

.owl-nav .owl-next {
  position: absolute;
  top: 20%;
  right: 0%;
  border-radius: 0;
  width: 60px;
  height: 60px;
  transition: all 0.3s ease;
  background: rgba(33, 33, 33, 0.3) !important;
}
.owl-nav .owl-next:focus { outline: none; border: none; box-shadow: none;}
.owl-nav .owl-next:hover { background: #212121 !important;}
.owl-nav .owl-next .arrow-right.icon {
  color: #000;
  position: absolute;
  margin-left: 15px;
  margin-top: 0px;
  width: 0px;
  height: 1px;
  background-color: currentColor;
}
.owl-nav .owl-next .arrow-right.icon:before {
  content: '';
  position: absolute;
  right: -20px;
  top: -10px;
  width: 24px;
  height: 24px;
  border-top: solid 2px white;
  border-right: solid 2px white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.owl-nav .owl-prev {
  position: absolute;
  top: 20%;
  left: 0%;
  border-radius: 0;
  width: 60px;
  height: 60px;
  background: rgba(33, 33, 33, 0.3) !important;
  transition: all 0.3s ease;
}
.owl-nav .owl-prev:focus { outline: none; border: none; box-shadow: none;}
.owl-nav .owl-prev:hover { background: #212121 !important;}
.owl-nav .owl-prev .arrow-left.icon {
  color: #000;
  position: absolute;
  margin-left: 8px;
  margin-top: 0px;
  width: 0px;
  height: 1px;
  background-color: currentColor;
}
.owl-nav .owl-prev .arrow-left.icon:before {
  content: '';
  position: absolute;
  left: 15px;
  top: -10px;
  width: 24px;
  height: 24px;
  border-top: solid 2px white;
  border-right: solid 2px white;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.arrow-left, .arrow-right{ border-style: none; border-width: 0;}

.owl-dots{ position: absolute; bottom: 0; left: 50%; width: 60%; padding-left: 0; margin-left: -30%; text-align: center;}
@media screen and (min-width: 64em){ .owl-dots{ /*bottom: -30px; left: 50%;*/}
    .owl-nav .owl-next { top: 40%;}
    .owl-nav .owl-prev { top: 40%;}
}
.section-03{ background: #fff;}
.section-03 .separator-center::after{ border-bottom: 0.3rem solid #E38A6D;}
.section-03 .conceptItem .card-section{ padding: 57px 30px;}
.section-03 .conceptItem .card{ border: 1px solid #E38A6D;transition: all 0.5s ease 0.3s; border-radius: 3px; -webkit-box-shadow: 3px 30px 29px -28px rgba(0,0,0,0.5); -moz-box-shadow: 3px 30px 29px -28px rgba(0,0,0,0.5); box-shadow: 3px 30px 29px -28px rgba(0,0,0,0.5);} 
.section-03 .conceptItem .card:hover{ -webkit-box-shadow: 3px 10px 20px -28px rgba(0,0,0,0.5); -moz-box-shadow: 3px 10px 20px -28px rgba(0,0,0,0.5); box-shadow: 3px 10px 20px -28px rgba(0,0,0,0.5);}
.section-03 .conceptItem .card-section .con_list_title{ font-size: 36px; margin: 50px 0 30px 0;}
.section-03 .conceptItem .card-section p{ line-height: 28px }
.section-03 .conceptItem .card .button{ border-radius: 5px;}
.section-03 .conceptItem a i, .section-03 .conceptItem a p{  color: #6f6f6f; transition: all 0.5s ease 0.3s;}
.section-03 .conceptItem a:hover i, .section-03 .conceptItem a:hover p{  color: #ff8f47;}
.section-03 .conceptItem a .button{ background: #f0f0f0; color: #ff8f47; transition: all 0.5s ease 0.3s;}
.section-03 .conceptItem a:hover .button{ background: #4d4d4d; color: #fff;}

/* --------------------------------------------------------------------------------------------------
   SubTitle
-------------------------------------------------------------------------------------------------  */
.sub-banner{ top: 0; bottom: 0;width: 100%; z-index: 99; background: rgba(255,255,255,.5);}

/* --------------------------------------------------------------------------------------------------
   BreadCrumbs
-------------------------------------------------------------------------------------------------  */
.navbar{ text-align: left; margin: 0 0 20px 0; background:#4d4d4d;}
.navbar h1.title-head{ font-size: 26px; margin-bottom: 0;}
.navbar ul{ display: inline-block;}
.navbar .breadcrumbs{ margin-top: 10px; margin-bottom: 0}
.navbar .breadcrumbs li{ font-size: 14px; }
.navbar .breadcrumbs .disabled{ color: #FFEB3B; font-weight: bold;}
.navbar .breadcrumbs li:not(:last-child)::after{ /*color: var(--success); */color: #ff8f47; content: "/";}
.navbar .breadcrumbs a{ color: #fff;}
.navbar .breadcrumbs a:hover{ color: #ff8f47}
.menu .active > a { background: transparent; color: #00a0e9;}

/* --------------------------------------------------------------------------------------------------
   NewsList
-------------------------------------------------------------------------------------------------  */
.latest-release .latest-row{ 
                  display: flex;
                  display: -webkit-flex;
                  display: -ms-flex;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
            background: #fff;
            border-bottom: 1px solid #dcdcdc;
                  padding: 1rem 1rem .5rem;
                  margin-bottom: 0;
}
.latest-release:last-child .latest-row{ border-bottom:  none;}
.latest-release .latest-row:hover{ background: #ececec; cursor: pointer; transition: 1s;}
.latest-release .latest-row:hover a{ color: #ff8f47}
.latest-row .latest-time{ color: #777; font-weight: bold; font-size: 0.85rem; margin-top: 0; margin-bottom: .5em; }
.latest-row .latest-title a{ font-weight: bold; font-size: 21px}
.latest-row .latest-title a:hover{ }
.latest-row .tags.success, .tags.success{ background:#00a072; color: #fff;font-size: 15px; padding: 5px 10px 4px 10px}
.latest-row .fa-file-pdf-o, .download i.fa-file-pdf-o{ color: #fa0f00; margin-left: 12px;}
.latest-row .fa-file-word-o, .download i.fa-file-word-o{ color: #1f5fbc; margin-left: 12px;}
@media print, screen and (min-width: 40em) {
   .latest-release .latest-row{ -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;align-items:flex-start;}
   .latest-row .latest-time{ margin-right: 1rem; flex: 0 0 200px;}
}
/* --------------------------------------------------------------------------------------------------
   Pagination
-------------------------------------------------------------------------------------------------  */
.pagination li { margin-right: 0.0625rem; border-radius: 3px; font-size: 1.125rem; display: none; background: #e6e6e6;}
.pagination li:last-child, .pagination li:first-child { display: inline-block; }
@media print, screen and (min-width: 40em) { .pagination li { display: inline-block; } }
.pagination a, .pagination button { display: block; padding: 0.1875rem .8rem; border-radius: 3px; color: #0a0a0a;}
.pagination a:hover, .pagination button:hover { background: #ff8f47;}
.pagination .current { padding: 0.1875rem 0.8rem; background: #ff8f47; color: #fefefe; cursor: default;}

/* --------------------------------------------------------------------------------------------------
   Scrolltop
-------------------------------------------------------------------------------------------------  */
.scroll-top-wrapper { 
  position: fixed;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  text-align: center;
  z-index: 99999999;
  background: #333;
  color: #000;
  width: 60px;
  height: 60px;
  line-height: 50px;
  right: 15px;
  bottom: 15px;
  padding-top: 2px;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border-bottom-right-radius: 45px;
  border-bottom-left-radius: 45px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover{ background: #ff8f47;}
.scroll-top-wrapper.show{ visibility:visible; cursor:pointer; opacity: 1.0;}
.scroll-top-wrapper i{ filter: invert(100%) sepia(93%) saturate(4129%) hue-rotate(179deg) brightness(122%) contrast(110%);}
.scroll-top-wrapper:hover i{ filter: invert(100%) sepia(93%) saturate(4129%) hue-rotate(179deg) brightness(122%) contrast(110%);}


/* Medium and up   40em = 640px */
@media screen and (min-width: 40em) {}

/* Medium only   63.9375em = 1023px */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up   64em = 1024px */
@media screen and (min-width: 64em) {}

/* Large only     74.9375em = 1190px */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}