@charset "utf-8";

/* =======================| homepage styles for responsie design |==================== */

/* =======================| width > 1200 |=================================== */
@media (min-width: 1200px)  {
/* -------------------------------------------------------------------------- */ 
  
  #u-info-1, #u-benefit-1, #u-prog-1 {
    width: 1140px;
  }

}
/* =======================| width 992-1199 |================================= */
@media (min-width: 992px) and (max-width: 1199px)  {
/* -------------------------------------------------------------------------- */ 
 /*-----| global widht for header, moto, info |-----*/
  #u-header-1, #u-moto-1, #u-info-1, #u-benefit-1/*, #u-prog-1*/ {
    width: 940px;
  }
  
   /* -----| image |----- */
  /* style for section image is in separate css file home-image */
  /* -----| moto |----- */

  #u-moto-left-2 h2, #u-moto-left-2 h2 span {
    font-size: 3.125rem;
    font-weight: 700;
    width: auto;
    margin-top: 31px;
  }

  /* -----| footer |----- */
  #u-footer-left-2, #u-footer-right-2 {
    width: 400px; 
  }
  #u-footer-left-2 {
      margin: 50px 20px 100px auto;
  }
    #u-footer-right-2 {
      margin: 50px auto 100px 50px;
  }

}
/* =======================| width < 991 |================================= */
@media (max-width: 991px) {
/* ----------------------------------------------------------------------- */   
/* -----| menu |----- */
  #u-mainmenu {
    margin: 65px -20px 0 auto;
  }

/* -----| footer |----- */  
  #u-footer-left-1, #u-footer-right-1 {
    width: 400px;  
  }
  #u-footer-left-1 {
    padding: 0 10px 0 50px;
  }
  #u-footer-right-1 {
    padding: 0 10px 0 30px;
  }

}
/* =======================| width 768-991 |================================= */
@media (min-width: 768px) and (max-width: 991px) {
/* ------------------------------------------------------------------------- */ 

/*-----| global widht for header, moto, info |-----*/
  #u-header-1, #u-moto-1, #u-info-1, #u-benefit-1/*, #u-prog-1*/ {
    width: 720px;
  }
  .breadcrumb {
    font-size: 0.6875rem;
  }
  
/* -----| moto |----- */  
  #u-moto-1 {
    min-height: 300px;
  }
  #u-moto-left, #u-moto-right {
    min-height: 100px;
  }
  #u-moto-left-2 h2, #u-moto-left-2 h2 span {
    font-size: 2.25rem;
    margin-top: 0;
    font-weight: 700;
  }
  #u-moto-right-2 p {
    margin-top: 0;
  }

/* -----| benefit |----- */
  #u-benefit-1 {
    min-height: 600px;
  }

/* -----| footer |----- */  
  #u-footer-left-1 {
    padding-left: 50px;
  }
  #u-footer-right-1{
    padding-left: 30px;
  }
  #u-footer-left-2, #u-footer-right-2 {
    min-height: 400px;
    width: 330px;
    margin-top: 0; 
  }
  #u-footer-left-2 {
      margin: 50px 37px 100px auto;
  }
    #u-footer-right-2 {
      margin: 50px auto 100px 37px;
  }

}
/* =======================| width < 767 |================================= */
@media  (max-width: 767px) {
/* ----------------------------------------------------------------------- */ 
/* -----| header |----- */
  #u-header {
    height: 140px;
  }

/* -----| bredcrumb (joomla code) |----- */
.breadcrumb{
/*  font-size: 0.75rem;*/
  text-align: left;
  margin-top: 30px;
  max-width: 400px;
}
.breadcrumb ul, .breadcrumb li {
  float:none;
}
.breadcrumb li.active {
  visibility: hidden;  
}
  
/* -----| info + benefit |----- */
  #u-info-1, #u-benefit-1 {
    min-height: 350px;
    width: 540px;
  }
  #u-info-3, #u-benefit-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;    
  }
  #u-info-left, #u-info-right, #u-benefit-left, #u-benefit-right {
    min-width: 100%;
  }
  #u-info-left-1, #u-info-right-1 {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    flex: 1;
    max-width: 100%;
  }

/* -----| program |----- */  
  #u-prog-1 {
    width: 540px;
  }
  #u-prog-top-1 {
    width: 400px;
    margin: 50px auto 0; 
  }
  #u-prog-top-2 h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: 700;
  }
  #u-prog-bottom {
    width: 400px;
    margin: 18px auto;
  }
  .u-prog-cell {
    width: 400px;
    min-width: 100%;
    min-height: 100px;
  }
  .u-prog-cell h4 {
    margin-top: 15px;
  }
  .u-prog-cell img {
    margin-top: 15px;
  }
  .u-prog-cell p {
    margin-top: 5px;
  }

/* -----| footer |----- */  
  #u-footer-left, #u-footer-right {
    min-width: 100%; 
  }
  #u-footer-left-1, #u-footer-right-1 {
    padding: 0;
    width: 540px;
    margin: 0 auto; 
  }  
  #u-footer-left-2, #u-footer-right-2 {
    min-height: 250px;
    margin: 50px auto; 
  }
  #u-footer-left-3, #u-footer-right-3 {
    padding-bottom: 0; 
  } 

}
/* =======================| width 576-767 |================================ */
@media  (min-width: 576px) and (max-width: 767px) {
/* ------------------------------------------------------------------------ */ 
/* -----| header |----- */
  #u-header-1 {
    width: 540px;
  }

/* -----| moto |----- */
  #u-moto-1 {
    min-height: 350px;
    width: 540px;
  }  
  #u-moto-3{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }  
  #u-moto-left, #u-moto-right {
    min-width: 100%;
    min-height: 100px;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  #u-moto-left-2 h2, #u-moto-left-2 h2 span {
    font-size: 2.25rem;
    margin-top: 0;
    font-weight: 700;
  }
  #u-moto-right-2{
    padding-left: 5px;
    padding-right: 5px;
  }
  #u-moto-right-2 p{
    width: auto;
    margin-right: -5px;
    margin-left: 5px;
    margin-top: 0;
  }

/* -----| footer |----- */
  #u-footer-left-1, #u-footer-right-1 {
    width: 540px;
    margin: 0 auto; 
  }
  #u-footer-left-2, #u-footer-right-2 {
    width: 540px;
    margin: 30px auto; 
  }
    #u-footer-left-3, #u-footer-right-3 {
    padding: 0 20px;
  }

}
/* =======================| width < 576 |================================== */
@media  (max-width: 575px) { 
/* ------------------------------------------------------------------------ */ 
/* -----| header |----- */
  
  #u-header {
    height: 120px;
  }
/*  #u-image {
    top: 120px;
  }*/
  #u-header-1 {  
    width: 340px;
  }
  #u-topicon {
    margin: 0 8px;
  }
/* -----| moto |----- */
  #u-moto-1{
    min-height: 420px;
    width: 340px;
  }
  #u-moto-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }   
  #u-moto-left, #u-moto-right{
    min-width: 100%;
    min-height: 100px;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  #u-moto-left-2 h2, #u-moto-left-2 h2 span {
    font-size: 1.875rem;
    margin-top: 0;
    font-weight: 700;
  }
  #u-moto-right-2 p {
    width: auto;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
  }

/* -----| info + benefit |----- */
  #u-info-1, #u-benefit-1 {
    width: 340px;
  }

/* -----| benefit |----- */  
  #u-benefit-left img {
    max-width: 340px;
  }

/* -----| program |----- */  
  #u-prog-1 {
    width: 340px;
  }
  #u-prog-top-1 {
    width: 340px;
  }
  #u-prog-bottom {
    width: 340px;
  }
  .u-prog-cell {
    width: 340px;
  }

/* -----| footer |----- */
  #u-footer-left-1, #u-footer-right-1 {
    width: 340px;
    margin: 0 auto; 
  }
  #u-footer-left-2, #u-footer-right-2 {
    width: 340px;
    margin: 30px auto; 
  }
    #u-footer-left-3, #u-footer-right-3 {
    padding: 0 20px;
  }

}

/* =======================| height < 560 |================================= */
@media  (max-height: 560px) { 
/* ------------------------------------------------------------------------ */ 
/*--- scrollUp header ---*/
  
  #u-header {
    transition: transform .5s;
  }
  .scrollUp {
    transform: translateY(-100%);
    overflow-y: hidden !important; 
  }
}
  

/* -----------------------| end |------------- */