/* ======================== VARIABLE ======================== */
/* ======================== FONTS ======================== */
/* ======================== HEADER ======================== */
/* ======================== MENU ======================== */
/* ======================== FOOTER ======================== */
/* ======================== URL ======================== */
/* ======================== FONTS ======================== */
/* ==================== BORDER RADIUS ==================== */
/* Ref: 
    http://www.w3schools.com/css/css3_borders.asp 
    http://border-radius.com/
    border-radius: tl tr br bl:
*/
/* ==================== BOX SHADOW ==================== */
/* Ref: 
    http://www.cssmatic.com/box-shadow
*/
/* ==================== Set Font ==================== */
/* ==================== HOVER A ==================== */
/* Ref: 
*/
/*
@include transition(all .3s ease);
*/
/*
@include background-opacity(#000, $opacity: 0.3);
*/
/*========= COMMON ===============*/
/*========= HEADER ===============*/
/*========= MENU ===============*/
/*========= HOME ===============*/
/*========= PRODUCT ===============*/
/*========= FOOTER ===============*/
/*  ================================================================================
  LARGE DEVICES 
  Large Desktops 1200px and Up (>1200) 
  ================================================================================ */
/*  ================================================================================
  MEDIUM DEVICES
  Desktops 992px and Up (>992px & <1200px)
  ================================================================================ */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 100% !important; }
  .main-nav > ul > li {
    padding: 13px 20px; }
  .bg-container .inner-container {
    width: 74%; }
  .bg-container aside {
    width: 22.5%; }
  .tin-video {
    padding: 45px 1em; }
    .tin-video .container .tin-box {
      width: 66%; }
      .tin-video .container .tin-box .tinnb-box .first-news {
        width: 49%; }
      .tin-video .container .tin-box .tinnb-box .second-news {
        width: 49%; }
    .tin-video .container .video-box {
      width: 33%; }
  footer .ft-container .col-info {
    width: 40%; }
    footer .ft-container .col-info #form_dk {
      max-width: 90%; }
  footer .ft-container .col-map {
    width: 30.8%; }
  footer .ft-container .col-thongke {
    width: 18.3%; } }

/*  ================================================================================
  SMALL DEVICES
  Tablets 768px and Up (>768px & <992px)
  ================================================================================ */
@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 100% !important; }
  .webinfo .slogan {
    font-size: 16px; }
  .main-nav > ul > li {
    padding: 13px 20px; }
  .nav-bg {
    display: none; }
  #w_menu_mobile {
    display: block; }
  .bg-container .inner-container {
    width: 100%; }
  .bg-container aside {
    width: 100%; }
  .tin-video {
    padding: 45px 1em; }
    .tin-video .container .tin-box {
      width: 100%;
      float: none; }
      .tin-video .container .tin-box .tinnb-box .first-news {
        width: 49%; }
      .tin-video .container .tin-box .tinnb-box .second-news {
        width: 49%; }
    .tin-video .container .video-box {
      width: 100%;
      float: none; }
  footer .ft-container .col-info {
    width: 100%;
    clear: both; }
    footer .ft-container .col-info #form_dk {
      max-width: 100%; }
  footer .ft-container .col-map {
    width: 100%;
    clear: both;
    margin-bottom: 1em; }
  footer .ft-container .col-thongke {
    width: 100%;
    clear: both; } }

/*  ================================================================================
  EXTRA SMALL
  (>425px & <768px)
  ================================================================================ */
/*  ================================================================================
  MOBILE SIZE
  Phones Less than 425px
  (<425px)
  ================================================================================ */
@media screen and (max-width: 425px) {
  .container {
    width: 100% !important; }
  .webinfo .slogan {
    font-size: 16px; }
  .main-nav > ul > li {
    padding: 13px 20px; }
  .nav-bg {
    display: none; }
  #w_menu_mobile {
    display: block; }
  .bg-container .inner-container {
    width: 100%; }
  .bg-container aside {
    width: 100%; }
  .tin-video {
    padding: 45px 1em; }
    .tin-video .container .tin-box {
      width: 100%;
      float: none; }
      .tin-video .container .tin-box .tinnb-box .first-news {
        width: 49%; }
      .tin-video .container .tin-box .tinnb-box .second-news {
        width: 49%; }
    .tin-video .container .video-box {
      width: 100%;
      float: none; }
  footer .ft-container .col-info {
    width: 100%;
    clear: both; }
    footer .ft-container .col-info #form_dk {
      max-width: 100%; }
  footer .ft-container .col-map {
    width: 100%;
    clear: both;
    margin-bottom: 1em; }
  footer .ft-container .col-thongke {
    width: 100%;
    clear: both; }
  .hd-top {
    display: none; }
  .webinfo {
    position: relative; }
    .webinfo .slogan {
      margin-top: 0; }
  header {
    background-size: cover !important; }
  .logo-banner {
    display: block;
    text-align: center; }
    .logo-banner > img {
      max-width: 70px; }
  .pr-box {
    width: 50%; }
  .first-news {
    display: none; }
  .second-news {
    width: 100% !important;
    float: none; } }

/*# sourceMappingURL=main.css.map */