#main{
  background:#f3f3f3;
}

.teaser-tile__label {
    position: relative;
    background-color: #fff;
    padding: 10px;
    text-align: center;

  }
.teaser-tile .teaser-tile__label .btn{
    color: #000;
    text-decoration: none;
    font-weight: 800;
    font-size: 18px;
    padding-bottom: 4px;
}
.brand_nav{
  margin:-25px 0 40px 0;
}
.brand_nav a{
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  font-weight: 800;
}

.brand_nav .navigation {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  width:100%;
   background:url(/-/media/Images/Brand/Franke/franke_bg.png) repeat-x center;
}

.brand_nav a:hover{
  color: #000;
}
.brand_nav_item {
padding: 32px 0 0 ;
  flex: 33%;
}

.logo {
background: url(/-/media/Images/Brand/Franke/franke_brand_logo.svg) no-repeat center;
background-size:contain;
height: 90px;
  flex: 33%;

}
  .top_logo {
display:none
}
.brand_nav .active{
  font-weight: 600;
}


/******** Controls the height underneath the text block - padding-bottom, sets background colour for the component *********/
.hero_wrapper {
  width: 100%;
}
/******** Gradient/image on the left *********/
.left_side {
  background-image: linear-gradient(
    to bottom left,
    rgba(0, 0, 0, 0.3),
    rgba(255, 255, 255, 0.2)
  );
  width: 950px;
  margin: 0;
}
/******** Gradient/image on the right *********/

.right_side {
  background-image: linear-gradient(
    to bottom right,
    rgba(0, 0, 0, 0.3),
    rgba(255, 255, 255, 0.2)
  );
  width: 950px;
  margin: 0;
}
/******** Change the background colour - sets border at bottom *********/
.banner{
  display: flex;
  align-items: stretch;
  background-color: #53565A;
  height: 500px;
}
/******** Change the background image - controls the width of image sets border either side *********/

.hero_image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1440px;
    background: url("/-/media/Images/Brand/Franke/banners/s_desktop.jpg") no-repeat center;
  border-left: 10px solid #fff;
  border-right: 10px solid #fff;
}


/**** 1366 breakpoint | Banner height change - Text size smaller *********/

@media only screen and (max-width: 1440px) {
    .hero_image {
    flex: 0 0 100%;
    border: none;
  }

  .banner {
    height: 400px;
  }

  .hero_image {
    background: url("/-/media/Images/Brand/Franke/banners/s_laptop.jpg") no-repeat center;
    background-size: cover;
  }
  
}

@media (max-width: 900px) {
  .brand_nav{
    margin-top:-16px;
  }
.brand_nav .navigation{
  background: #CF352E;
    margin: -50px 0 40px;
  }

  .brand_nav_item{
    padding: 8px 0 ;
    flex: 50%;
  }

.brand_nav a{
  font-size: 18px;
}

  .logo {
display:none
 
}
  .top_logo {
display:block;
min-width: 100%;
text-align: center;
}
}

@media only screen and (max-width: 767px) {

  .banner {
    height: 300px;
  }
  .hero_image {
    background: url("/-/media/Images/Brand/Franke/banners/s_mob_l.jpg") no-repeat center;
    background-size: cover;
  }
  
  .mob_hide {
    display: none;
  }

}
@media only screen and (max-width: 440px) {

.brand_nav .navigation{
  background: #CF352E;
    margin: -48px 0 40px;
    padding-top:35px;
  }

  .hero_image {
    background: url("/-/media/Images/Brand/Franke/banners/s_mob.jpg")
      no-repeat center;
    background-size: cover;
  }
}