/* OUR COFFEE PAGE */

#content{
	margin-top:6.18921%;
	position:relative;
	background:url('images/topBackground.png')top no-repeat,
				 url('images/coffeeCupf.png')  right bottom  no-repeat,
			     url('images/botBackground1.png')  bottom  no-repeat,
			     #fff;
}

#botCont{
	color:#d1b9a2;
}
#botCont article{
	top: -30px;
	position: relative;
	width: 78%;
}

#midCont article>h2{
	margin-bottom:3.06748%;
	margin-left:1.4%;
}
#first img, .shade{
	margin-bottom:0.5%;
}
#first>section{
	position:relative;
	float:left;
	margin:1.2% 0.7% 0 0.5%;
	overflow:hidden;
	width:273px;
	height:182px;
}
#first{
	margin-left: 1%;
}
#first>section img{
	position:relative;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
}
#first>section>img:hover{
	 -webkit-transition: all 0.2s linear;
}
.shade:hover{
	opacity:1;
}
.shade{
	width: 255px;
	height: 162px;
	background:rgba(255, 144, 0, 0.65);
	position:absolute;/* needed*/
	top:0;/* needed*/
	left:-2px;/* needed*/
	opacity:0;
	color:#fff;
	padding:10px;
	-webkit-transition: all 0.2s ease-in-out;
}
.shade p{
	margin-top:70px;
	width: 255px;
}
.shade h5{
	text-decoration:underline;
	font-size:110%;
	font-weight: normal;
}
#footer{
	/*top: 1375px;*/
	}

/***************************************************************************************************************************************/




/* SMARTPHONE AND TABLET  */
@media screen
	and (max-width : 960px)
	 {
	#desc{
		width: 64.8125%;
		}
	#content{
		font-size:98%; /* FIX PRIVREMENI */

	}
	#botCont{
		
	}
	#first{
		width: 70%;
		left:18%;
		position:relative;
	}
	#midCont article h2{
			text-align:center;
		}
}
@media screen
	and (max-width : 800px)
	 {
	 #content{
		margin-top:6.18921%;
	}	
	 #desc{
	 	width:57.8125%;
	 }
	#midCont article p{
			width:100%;
		}
	#midCont article h2{
			text-align:center;
		}
	#midCont article img{
			float:none;
	}
	#midCont{
		padding-bottom:290px;
	}
	#first{
		width: 90%;
		left:7%;
	}
}

@media screen
	and (max-width : 768px)
	 {
	 #footer{
	 	/*top: 1482px;*/
	 }
	 #content{
	 	/*height: 1050px;*/
	 }
	 #midCont{
	 	/*padding-bottom: 256px;*/
	 }
}
@media screen
	and (max-width : 640px)
	 {
	 #content{
		margin-top:6.18921%;
		/*height: 1260px;*/
	}	
	#desc h2{
		position:relative;
		width: 100%;
		text-align: center;
	}
	#desc img{
		position:relative;
		left: 24.88%;
	}
	#desc{
		width:100%;
	}
	#desc>p{
		width:100%;
	}	
	.orderBut{
		position:relative;
		left:28.88%;
	}
	#footer{
		/*top: 1610px;*/
	}
	#midCont{
		padding-bottom:250px;
	}
	#midCont>article section p{
		width:100%;
	}
	#midCont #third img{
		margin-left:35%;
	}
	#midCont article>h2{
			text-align:center;
			margin-bottom:10%;
		}
	#first,#second{
		margin-bottom:25%;
	}
	#first{
		left:25%;
	}
}
@media screen
	and (max-width : 480px)
	 {

	 #content{
		  /*height: 1260px;*/
	}
	#ribbonRed{
		 	top: -3px;
		 }
	#desc img{
			position:relative;
			left: 16.88%;
	}
	#midCont{
		padding-bottom:140px;
	}
	#midCont article>h2{
		text-align:center;
		}
	#footer{
		/*top: 1530px;*/
	}
	#first,#second{
		margin-bottom:40%;
	}
	#first{
		left:17%;
	}
		
}
@media screen
	and (max-width : 320px)
	 {
		#midCont article>h2{
			text-align:center;
		}
		.orderBut{
			left:8.88%;
		}
		#footer{
			/*top:1788px;*/
		}
		#first,#second{
			margin-bottom:80%;
		}
		#first{
			left:0%;
		}

}