/* slider */

#Accordion{
	overflow:hidden;
	height:400px;
}



@keyframes logoshrink {
  0%{
	  width: 30vw;
	  margin-left:-15vw;	  
  }
  100%{
	width : 20vw;
	margin-left:-10vw;		  
	  
  }
}

@keyframes logoshrinkNormal {
  0%{
	  
	width : 20vw;
	margin-left:-10vw;	
  
  }
  100%{


	  width: 30vw;
	  margin-left:-15vw;				
	  
  }
}


#Accordion:hover #thelogo{
	
	animation-name: logoshrink;
	animation-duration: 1s;	
	
	width : 20vw;
	margin-left:-10vw;		
	
}

@media (max-width: 769px){
	.coffee-item-8 { 
		border-top: thin solid #fff;
		border-bottom: thin solid #fff;
		border-right: none;
		border-left: none;
	}
	
	.coffee-gallery-wrap {
		display: block;
	}
}

#Accordion:hover {

}


@keyframes titlepositionhover {
  from {
	  
	  top:75%;
	  }
  to {
	  top:30%;
	}
}

@keyframes titlepositionhoverout {
  from {right:46%;}
  to {right:35%;}
}

@keyframes fadeinopacity {
  
  0%   {opacity:0}

  20%  {opacity:0}
  100% {opacity:1}
  
}



@keyframes movetitleslowup {
  
  0%   {bottom:0%}

  100% {bottom:80%}
  
}

@keyframes movetitleslowdown {
  
  0%   {bottom:80%}

  100% {bottom:0%}
  
}

@keyframes movetitleslowupcoffee {
  
	0%   {bottom:0%}
  
	100% {bottom:70%}
	
}

@keyframes movetitleslowdowncoffee {
  
	0%   {bottom:70%}
  
	100% {bottom:0%}
	
}


h1.vert{
  position: relative;
  margin-bottom: 45px;
  font-family: 'Oswald', sans-serif;
  font-size: 44px;
  text-transform: uppercase;
  color: #424242;
}

h1.item-title {
	transform-origin: top left;
    font-size: 18px;
    position: absolute;
    bottom: 0%;
    width: auto;
    text-align: left;
    left: 6%;
	color:#FFFFFF;
	text-transform: uppercase;
	min-width:200px;
	animation-name: movetitleslowdown;
	animation-duration: 1s; 	
	margin-bottom: 34px;
}

h1.item-title.first-h1{

}

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.gallery-wrap__slide .second-img {
	display: none;
}
@media (min-width: 992px) {
	.gallery-wrap__slide-image {
		display: inline-block;
		overflow: hidden;
		position: relative;
		margin: 0;
    	padding: 0;
	}
	.gallery-wrap__slide .second-img {
		position: absolute;
		display: block;
		left: 0;
		top: 0;
		border-radius: 50%;
		transition: 0.5s;
		transform: translateY(100%);
	}
	.gallery-wrap__slide:hover .first-img {
		visibility: hidden;
	}
	.gallery-wrap__slide:hover .second-img {
		transform: translateY(0);
	}
}

.item-content{
	flex:1;
	transition: background-color 0.5s ease;
	background-color:rgba(0,0,0,0.1); /* gray tint */ 
	text-align:center;
	color:#EEEEEE;
	padding-top:6%;
	height:100%;	
}

.item-content .item-title{
	font-weight:bold;
}

.accordion-item {
  flex: 1;
  height: 400px;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  position:relative;
  cursor:pointer;
font-size: 22px;
  color: #fff;
  /*
  &:hover{
    flex: 7;
  }
  */
  /*
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
transform: skew(-5deg);  
*/
  
}

.item-content .item-description{
	display:none;
}

p.item-description {
	opacity: 1;
    margin-left: 110px;
    bottom: 20px;
    text-align: left;
}
p.item-description a {color:#fff; font-weight: bold;}

.accordion-item:hover h1.item-title,
.accordion-item.active-hover h1.item-title {
	bottom: 80%;
	animation-name: movetitleslowup;
	animation-duration: 1s;      
}
.accordion-item:hover,
.accordion-item.active-hover {
	flex: 7;
}
.accordion-item:hover .item-content,
.accordion-item.active-hover .item-content {
	transition: background-color 0.5s ease;
	background-color:rgba(0,0,0,0.4);	/* dark tint */
	display:block;
	height:100%;
	transition: flex 0.8s ease;
}
.accordion-item:hover .item-content .item-description,
.accordion-item.active-hover .item-content .item-description {
	display:block;
	text-shadow: 2px 2px 4px #000000;
}
.accordion-item:hover .item-content .pdct-items,
.accordion-item.active-hover .item-content .pdct-items {
	display: flex;
	animation-name: fadeinopacity;
	animation-duration: 2s;
}
.accordion-item:hover p.item-description,
.accordion-item.active-hover p.item-description {
	animation-name: fadeinopacity;
	animation-duration: 2s;
}

@media (max-width: 992px) {
	.accordion-item {
		flex: 7;
	}

	.accordion-item h1.item-title {
		bottom: 80%;
	}

	.accordion-item .item-content{
		background-color:rgba(0,0,0,0.4);	/* dark tint */
		display:block;
		height:100%;
	}

	.accordion-item .item-content .item-description{
		display:block;
		text-shadow: 2px 2px 4px #000000;
	}

	.accordion-item .item-content .pdct-items {
		display: flex;
	}
}

.accordion-item-4 { 
  background-image: url('../images/beverage-product-filling.jpg');
}

.accordion-item-5 { 
  background-image: url('../images/food-product-filling.jpg');
	    border-right: thin solid #fff;
    border-left: thin solid #fff;
}

.accordion-item-6 { 
  background-image: url('../images/chemical-product-filling-packaging.jpg');
}

.accordion-item-1 { 
  background-image: url('../images/bag-in-box-filling-machines.jpg');
}

.accordion-item-2 { 
  background-image: url('../images/face-mounted-stand-u-pouches.jpg');
	    border-right: thin solid #fff;
    border-left: thin solid #fff;
}

.accordion-item-3 { 
  background-image: url('../images/double-membrane-closed-product-fillers.jpg');
}

/* Coffee-specific styles */
.coffee-gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.coffee-item-content{
	flex:1;
	transition: background-color 0.5s ease;
	background-color:rgba(0,0,0,0.4); /* gray tint */ 
	color:#EEEEEE;
	text-align:left;
	padding-top:6%;
	height:100%;	
}
.coffee-lineup .coffee-item-content div{
	align-content: center; 
}
.coffee-lineup .coffee-item-7 .coffee-item-content p{
	text-align: left;
}

.coffee-item-content .coffee-item-title{
	font-weight:bold;
}

.coffee-item-content div{
	align-content: center; 
}

h1.coffee-item-title {	
    font-size: 1.2em;
    position: absolute;
    bottom: 0%;
    width: auto;
    text-align: left;
    left: 6%;
	color:#FFFFFF;
	text-transform: uppercase;
	min-width:200px;
	animation-name: movetitleslowdowncoffee;
	animation-duration: 1s; 	
	margin-bottom: 34px;
}

.coffee-item {
  flex: 1;
  height: 400px;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  position:relative;
  cursor:pointer;
  font-size: 22px;
  color: #fff;
}

.coffee-item-content .coffee-item-description{
	display:none;
}

p.coffee-item-description {
	opacity: 1;
    margin-left: 110px;
    bottom: 20px;
    text-align: left;
}

span.coffee-item-description {
    margin-top: 10px;
}

p.coffee-item-description a {color:#fff; font-weight: bold;}

.coffee-item:hover h1.coffee-item-title,
.coffee-item.active-hover h1.coffee-item-title {
	bottom: 70%;
	animation-name: movetitleslowupcoffee;
	animation-duration: 1s;     
	color: #000;
}

.coffee-item:hover,
.coffee-item.active-hover {
	flex: 7;
}

.coffee-item:hover .coffee-item-content,
.coffee-item.active-hover .coffee-item-content {
	transition: background-color 0.5s ease;
	background: linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,1));	/* dark tint */
	display:block;
	height:100%;
	transition: flex 0.8s ease;
}

.coffee-item:hover .coffee-item-content .coffee-item-description,
.coffee-item.active-hover .coffee-item-content .coffee-item-description {
	color: #242424;
	text-shadow: none;
	display:block;
}

.coffee-item:hover .coffee-item-content .pdct-items,
.coffee-item.active-hover .coffee-item-content .pdct-items {
	display: flex;
	animation-name: fadeinopacity;
	animation-duration: 2s;
}

.coffee-item:hover p.coffee-item-description,
.coffee-item.active-hover p.coffee-item-description, 
.coffee-item:hover span.coffee-item-description,
.coffee-item.active-hover span.coffee-item-description {
	animation-name: fadeinopacity;
	animation-duration: 2s;
}

.coffee-item-7 { 
  background-image: url('../images/coffee/retail-cold-coffee-brewer.jpg');
}

.coffee-item-8 { 
  background-image: url('../images/coffee/medium-cold-coffee-brewing-systems.png');
  border-right: thin solid #fff;
  border-left: thin solid #fff;
}

.coffee-item-9 { 
  background-image: url('../images/coffee/large-scale-cold-coffee-brewing.jpg');
}

div.item-content-hide{
	display:none;
}
/* slider end */

.t-clearall{
	background:none;
	padding:0px;
	margin:0px;
	float:none;
    background-image: none;
}

@media (max-width: 992px){
	
	#Accordion{
		overflow:visible;
		height:auto;
	}
	
	.gallery-wrap {
		display: block;
	}
	
	.coffee-gallery-wrap {
		display: block;
	}
	
	h1.item-title {	
	margin-bottom: 15px;
}
	.accordion-item {
		height: 300px!important;
		width: 100%!important;
		float: none;
		flex: none;
	}
	
	
	p.item-description {
    margin-left: 50px;
    margin-top: 45px;
}

	/* Coffee-specific responsive styles */
	.coffee-item {
		height: 300px!important;
		width: 100%!important;
		float: none;
		flex: none;
	}

	.coffee-item h1.coffee-item-title {
		bottom: 0% !important;
		margin-bottom: 15px;
		color: #424242;
		animation: none !important;
	}
	
	.coffee-item:hover h1.coffee-item-title,
	.coffee-item.active-hover h1.coffee-item-title {
		bottom: 0% !important;
		animation: none !important;
	}

	.coffee-item .coffee-item-content{
		background: linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,1));	/* dark tint */
		display:block;
		height:100%;
	}

	.coffee-item .coffee-item-content .coffee-item-description{
		color: #242424;
		text-shadow: none;
		display:block;
	}

	.coffee-item .coffee-item-content .pdct-items {
		display: flex;
	}

	p.coffee-item-description {
		margin-left: 50px;
		margin-top: 45px;
	}
	
	span.coffee-item-description {
		margin-top: 10px;
	}
	
	
}