.news-demo {
  background: #fff;
  padding: 20px;
}




.news-holder {
	width:100%;
    margin: 0 auto;
    font-family:'Exo 2',sans-serif;
	padding-top:50px;
}

.news-holder * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
  color: #336699;
  text-decoration: none;
}

.news-headlines {
  list-style: none;
  position: relative;
}

  .news-headlines li {
    padding: 5px;
    margin-bottom: 15px;
	border-radius: 20px 0px 0 20px;
    position: relative;
    z-index: 20;
    color: #336699;
	float:left;
	width:100%;
  }

  .nh-anim {
    -webkit-transition: all .75s ease-out;
    -moz-transition: all .75s ease-out;
    -o-transition: all .75s ease-out;
    transition: all .75s ease-out;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  
 

  .news-headlines li:hover, a:hover {
      cursor: pointer;
      text-decoration: none;
  }
  
  .news-headlines .highlight {
     width: 100%;
     background:#db1f26;
	 box-shadow:0px 5px 0 0 #bf1319;
	 color:#000;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
  }
  
 .nh-anim.selected .aj-title
  {
	  color:#fff;
	  transition:all 0.5s ease-in-out;
  }
  
  
  .nh-anim.selected .aj-content
  {
	  color:#fff;
	  transition:all 0.5s ease-in-out;
  }
  
  
  
  
  
  .aj-content
  {
	  color:#000;
	  margin-top:10px;
  }

.aj-icon
{
	float:left;
	margin-right:20px;
	width:13%;
	text-align:center;
	height:80px;
	width:80px;
	line-height:80px;
	background:#fff;
	border-radius:50%;
}

.aj-icon img
{
	max-width:60%;
}

.aj-main
{
	float:left;
	width:83%;
}
.news-headlines {
   float: left;
   width: 70%;
   margin-top:40px;
}

.aj-title
{
	color:#000;
	font-size:20px;
	font-weight:bold;
}

.news-preview {
   float: left;
   width: 30%;
   background: url(../images/mob2.png) no-repeat;
   position: relative;
   z-index: 5;
   margin-left: -2px;
   background-size:100%;
   position: relative;
}

  .news-preview img {
    display: block;
  
    width: 95%;
    height: auto;
   
    margin: 45px auto 60px auto;
  } 

.news-content {
    position: absolute;
    z-index: 10;
    padding: 10px;
    top: 0;
    left: 0;
    display: none;
}

.top-content {
    display: block;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}




@media (min-width:320px) and (max-width:767px)  {
	

.news-preview
{
	width:100%;
	margin-left:0;
	margin-bottom: -500px;
	margin-top:50px;
}

.news-preview img
{
	display: block;
width: 97%;
height: auto;
margin: 31px auto 60px;
}

.news-headlines
{
	width:100%;
}

.aj-main
{
	width:100%;
}


#product2
{
	padding-bottom:0;
}


.prod-mob
{
	width:100%;
}

.prod-mob img
{
	max-width:100%;
}

}


@media (min-width:360px) and (max-width:400px)  {

.news-preview
{
	width:80%;
	margin-left:10%;
}

.news-preview img
{
	margin: 30px auto 60px;
}


}




@media (min-width:401px) and (max-width:430px)  {

.news-preview
{
	width: 65%;
margin-left: 15%;
}

.news-preview img
{
	margin: 28px auto 60px;
	width:98%;
}


}



@media (min-width:431px) and (max-width:600px)  {
	
	.news-preview
{
	width: 65%;
margin-left: 15%;
}

.news-preview img
{
	margin: 28px auto 60px;
	width:98%;
}

.news-preview
{
	margin-bottom: 300px;
}

}



@media (min-width:601px) and (max-width:767px)  {
	
	.aj-main
	{
		width:80%
	}
	
	
	.news-preview {
    width: 45%;
    margin-left: 20%;
    margin-bottom: 0;
    margin-top: 50px;
}

.news-preview img
{
	width:98%;
}
	
}



@media (min-width:768px) and (max-width:960px)  {
	
	
	.aj-icon
	
	{
		display:none;
	}
	
	.news-headlines
	{
		width:60%;
		margin-top: 22px;
	}
	
	.news-preview
	{
		width:40%;
	}
	
	.news-preview img {
    display: block;
    width: 96%;
    height: auto;
    margin: 38px auto 60px;
}
	
}



@media (min-width:961px) and (max-width:1200px)  {
	
.news-preview img {
    display: block;
    width: 97%;
    height: auto;
    margin: 34px auto 60px;
}	
	
}