/* RESPONSIVE CSS
-------------------------------------------------- */

/* XS */
@media (max-width: 576px) {
  .ItemBox.col-sm-3 h2 {font-size: 1rem;}
  .ItemBox.col-sm-3 .ItemBoxText {border:none;text-align: center;width: 100%;}
  .ItemBox.col-sm-3 .ItemBoxContent {height:auto;}


  .ItemBox.col-12 h2 {font-size: 2rem;margin-bottom:0;}
  .ItemBox.col-12 .ItemBoxContent {height:auto;}

  .ItemBox.col-6 h2 {font-size: 1rem;}
  .ItemBox.col-6 p {font-size:0.85rem;line-height: 1.1;}
  .ItemBox.col-6 .ItemBoxText {border: 2px solid #FFF;width: 90%;height: 70%;}
  .ItemBox.col-6 .ItemBoxContent {height:110px;}

  .FooterContent {height:auto!important;font-size: 1.2rem;}
  .FooterContent h5 {font-size: 1rem;font-family: NationalWeb-book;}

  .NewsList .carousel-item {height:200px;}
  .NewsList .carousel-item h1.display-3 {font-size: 3rem;line-height: 1;}
  .NewsList .carousel-item p.lead {font-size: 1.25rem;line-height: 1;}
  
  header {height:65px;}
  .logo {height:calc(65px - 8px);}
  body {margin-top:65px;}

}

/* SM */
@media (min-width: 576px) and (max-width: 768px) { 
  .ItemBox.col-12 .ItemBoxContent {height:170px;}
  .ItemBox.col-6 p {line-height: 1.2;}
  .ItemBox.col-6 .ItemBoxContent {height:170px;}
  .ItemBox.col-sm-3 .ItemBoxContent {height:170px;}
  .NewsList .carousel-item {height:340px;}
  header {height:105px;}
  .logo {height:calc(105px - 8px);}
  body {margin-top:105px;}
}

/* MD */
@media (min-width: 768px) and (max-width: 992px) { 
  .ItemBox.col-12 .ItemBoxContent {height:200px;}
  .ItemBox.col-6 .ItemBoxContent {height:200px;}
  .ItemBox.col-sm-3 .ItemBoxContent {height:200px;}
  .NewsList .carousel-item {height:400px;}
  header {height:165px;}
  .logo {height:calc(165px - 8px);}
  body {margin-top:165px;}
}

/* LG */
@media (min-width: 992px) and (max-width: 1200px) {}
/* XL */
@media (min-width: 1200px) {}