body,html {width: 100%;height: 100%;}
.header-text{float:left;margin-left:50px;}
.benefit-text{margin-left:20px;width:700px;}
/*.bg-primary-2{background-color:#7d7d7d;}*/

.bg-primary-2{background-color:#7d7d7d!important}a
.bg-primary-2:focus,a.bg-primary-2:hover,button.bg-primary-2:focus,button.bg-primary-2:hover{background-color:#c61017!important}

@media (min-width: 300px) {
    .element {
        background-image: url(../images/Benefit-mobile-background.png);
		width:100%; 
		height:100%; 
		background-size: cover;
    }
}

@media (min-width: 400px) {
    .element {
        background-image: url(../images/Benefit-mobile-background.png);
		width:100%; 
		height:100%; 
		background-size: cover;
    }
}

@media (min-width: 600px) {
    .element {
        background-image: url(../images/Benefit-web-background.jpg);
		width:100%; 
		height:100%; 
		background-size: cover;
    }
}

@media (min-width: 300px) {
    .element-t {
        margin-left:20px;
		margin-right:20px;
    }
}

@media (min-width: 400px) {
    .element-t {
        margin-left:20px;
		margin-right:20px;
    }
}

@media (min-width: 600px) {
    .element-t {
        margin-left:100px;
		margin-right:100px;        
    }
}

/*how does it work */
.element-h{width:900px; margin:auto; padding:20px;}

  /* hide mobile version by default */
  .switchphoto .mobilephone {
    display: none;
  }
  /* when screen is less than 600px wide
     show mobile version and hide desktop */
  @media (max-width: 450px) {
    .switchphoto .mobilephone {
      display: block;
    }
    .switchphoto .webphone {
      display: none;
    }
  }