/* laptops and down */
@media (max-width: 1199px) {
  .card {
    margin: 0;
  }
}


/* tablet and down */
@media (max-width: 991px) {
	
  /* home */
	
  .block.news .news-item {
    background: #f4f4f4;
    margin-bottom: 20px;
    height: auto;
    overflow: hidden;
}
  
  /* cards */
  
  .block.cards h4 {
    margin: 20px;
  }
  
  .card {
    margin: 0;
    margin-bottom: 20px;
  }
  .card:hover {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  .card .front b {
    font-weight: bold;
    padding-top: 80px;
  }
  .card .front b,
  .card .back .products h3 {
    font-size: 13px;
  }
  .card .front em {
    font-size: 18px;
  }
  .card .front b {
    font-size: 18px;
  }
  /* products */
  
  .block.three-icons h2 {
    width: auto;
  }
  
  
  /* masthead */
  
  #masthead #top-bar .container {
    width: 100%;
  }
  
  #masthead .logo-container {
    float: none;
    margin: 0 auto;
  }
  
   #masthead .logo-container .logo {
    float: none;
    height: 40px;
    overflow: hidden;
  }
  #masthead .logo {
    left: 50%;
    margin-left: -65px;
    padding: 8px 20px 15px 20px;
  }
  #masthead .logo:hover {
  text-decoration: none;
  padding: 10px 20px 20px 20px;
  }
  h1 {
    font-size: 40px;
  }
  #masthead .page-sign,
  body.home #masthead.corporate .page-sign {
    margin-top: 100px;
    margin-bottom: 40px;
    width: 100%;
  }
   #masthead.page .page-sign h1 {
     margin-top: 130px;
     font-size: 45px !important;
   }
   body.home #masthead.corporate .page-sign h1 {
     margin-top: 80px;
   }
  
  /* subnav */
  
  .subnav ul li {
    margin: 0 10px;
    font-size: 13px;
  }
  
  /* collapse navigation */
  .navbar-toggle {
    display: block;
    padding: 2px 10px;
  }
  #masthead .navigation-bar {
    height: 60px;
  }
  #masthead .navigation-bar .container {
    width: 100%;
  }
  #masthead .navi-container,
  #masthead.corporate .navi-container {
    position: absolute;
    margin: 0 ;
    left: 0;
    top: 0;
    padding-top: 80px;
    margin-top: -30px;
    z-index: 10000;
    background: #333;
    -webkit-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
    transform: translateX(-100%); 
    width: 300px;
    padding-bottom: 30px;
  }
  #masthead .navi-container.open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  #masthead .navigation > li,
  #masthead.corporate .navigation > li {
    display: block;
    width: 100% !important;
    
  }
  #masthead .navigation li a {
    text-align: left;
    padding: 15px 25px;
    border-bottom: 1px solid #444;
  }
  #masthead .navigation li a:hover {
    background: #444;
    color: #fff;
  }
  
  #masthead .navigation .sub-menu {
    position: static;
    display: none;
    top: 0;
    padding: 0;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  #masthead .navigation > li:hover .sub-menu {
    display: none;
  }
  #masthead .navigation .sub-menu:before {
    display: none;
  }
  #masthead .navigation .sub-menu li {
    background: transparent;
  }
  #masthead .navigation .sub-menu li a {
    color: #777;
    padding: 10px 20px;
  }
  #masthead .navigation .sub-menu li:first-child,
  #masthead .navigation .sub-menu li:last-child {
    padding: 0;
  }
  #masthead .navigation > li:hover .sub-menu {
    padding-bottom: 0;
  }
  
  /* home */
  blockquote p {
    font-size: 18px;
  }
  /* products */
  
  .block.platform .items {
    text-align: left;
    padding-top: 0;
  }
  .block.three-icons .icon-right {
    display: none;
  }

  /* timeline */

  .block.timeline .timeline .item {
    width: auto;
    left: 0;
    position: static;
    margin: 0 0 20px 0;
    text-align: center;
  }
  .block.timeline .timeline .item.left,
  .block.timeline .timeline .item.right {
    margin: 0 0 20px 0;
    height: auto;
  }
  .block.timeline .timeline .year h3 {
    margin-bottom: 30px;
  }

  .block.timeline.gray .timeline .year h3  {
    text-align: center
  }
}

/* Brand Resources */
@media (min-width: 1199px) {
#Box_Container, #Incorrect_Logo .container, #Clear_Space .container,#Typography .container {
    width: 80%;
    margin: 0 auto;
}
#colors .container {
    width: 50%;
    margin: 0 auto;
}
}