
#home-primary img {
width:100%;	
display: block;
}


.home-bottom {
	width: 100%;
	}  

.newsitems{
	margin-top: 0px;
	width: calc(100% + 20px);
	margin-left: calc(0px - 10px);
	}
	
.productitems{
	margin-top: 0px;
	margin-left: 0px;
	padding-right: 0px;
	scroll-snap-type: x mandatory;
	}	


.newsitem-content p {
	background:black;
	color:white;
	padding: 5%;
	width:100%;
}

.productitem-content p {
	background:black;
	color:white;
	padding: 5%;
	width:100%;
	white-space: normal;
	margin-bottom: 0;
}

div.productitems{
  overflow: auto;
  white-space: nowrap;
}

div.productitem {
  display: inline-block;
  text-align: center;
  scroll-snap-align: start;
}

div:nth-child(1 of .productitem-content){
	padding-left: 0;
}

/* TO DO: add arrows */
div.productitems a:hover {
}

.home-promo {
    position: relative;

}

.newsitems b,  .newsitems a {
	  color: #00CE29 !important;  
	  font-weight: bold !important;
	  font-size: 16px;
	  line-height: 20px;
  }	
  
.productitems b {
	  color: #00CE29 !important;  
	  font-weight: bold !important;
	  font-size: 16px;
	  line-height: 20px;
  }		
  
.productitems a {
	  color: white !important;  
	  font-size: 16px;
	  line-height: 20px;
  }		  	

.youtube-player {
	padding-bottom: 67.33%;
}

.youtube-player img {
	width:100%;
	height:100%;
	background: black;
}


.product-header {
	margin-bottom: 10px;
	margin-top: 30px;
}	 

.news-header{
	margin-bottom: 10px;
	margin-top: 20px;
}
	
.product-header h5, .news-header h5 {
    display: table;
    background: black;
    width: 100%;
    text-align: center;
    font-size: 22px !important;
    font-family: arial, sans-serif;
    font-weight: normal;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 30px!important;
    text-transform: uppercase;
    color: white !important;
    letter-spacing: 0.20em;
    }
	
    .newsitem-content p, .productitem-content p{
      min-height: 170px;  
    } 
	
@media (max-width:774px){
		

.home-promo-image {
	display:none;
}

.home-promo-image-mobile {
	display:block;
}

.newsitemimage {
	padding-bottom: 70%;
}


#maincontenthome {
    float: left;
    width: 90%;
    margin-left: 5%;
    margin-top: 100px;
    margin-bottom: 60px;
}

.newsitem-content p{
	height: auto;
  min-height:auto;
  }
  


}



@media (min-width:775px){

	
.home-promo-image-mobile {
	display:none;
}

.newsitemimage {
	padding-bottom: 67.33%;
}

	}


* {
  box-sizing: border-box;
}


/* Add padding BETWEEN each column */


.newsitems > .newsitem-column {
  padding: 10px;
}


/* Create three equal columns that floats next to each other */
.newsitem-column {
  float: left;
  width: 33.3333%;
}

  .productitem-column {
	float:left;  
width:100%;
	  
  }
  
  .productitem {
width:30%;
  }

/* Clear floats after rows */
.newsitems:after {
  content: "";
  display: table;
  clear: both;
}


/* Content */


.productitem-content {
  padding: 10px;  
}


.newsitem-image img {
  width: 100%;
  padding-bottom: 2%;
}

 .productitem-image img {
  width: 100%;
  padding-bottom: 2%;
}


/* Default: 3 columns */

@media screen and (min-width: 1071px) {
div:nth-child(3n+1 of .newsitem-column){
	clear: both;
}

/*
div:nth-child(1 of .newsitem-column){
	padding-left: 0;
}
*/
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1070px) {
  .newsitem-column {
    width: 50%;
  }
  
  .productitem-column {

width:100%;
	  
  }
  
  .productitem {
width:42%;
  }
  
    div:nth-child(odd of .newsitem-column){
	clear: both;
}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 774px) {
	
	#maincontent {
		margin-top: 20px;
	}
	
  .newsitem-column {
    width: 100%;
  }
  
    .productitem {
	 width: 67%; 
  }
  
  .productitem-column {
    width: 100%;
  }

}

@media (max-width:520px){
/* no padding	 */	
		
#maincontent {
    width: 100%; 
    margin: 20px 0 0 0;	
}	

.home-promo-image-mobile{
/*   margin: 0; */
}


.home-bottom {
	margin-left: 0;
	}  

.product-header{
	margin-left: 0;
		margin-right: 0;}

.newsitem-content {
	padding: 0 !important;
}

.newsitems > .newsitem-column {
  padding: 0px;
}


}



