/* 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;
}

#ribbonRed{
	background:url('images/ribbonRed.png') no-repeat;
	background-size:contain;
	width:8.4375%;
	height:202px;
	position:absolute;
	top: -6px;
	left:88.54166%;
}
#desc, #order{
	float:left;
}
#ic{
	margin-left: 24%;
}
#es{
	width:283px;
}
#desc{
	color:#3f3838;
	width: 53.8125%;
	float:right;
}
#desc p{
	text-align:justify;
}
#desc h2{
	margin-bottom:4.2857%;
}
.orderBut{
	background: url('images/orderButton.jpg') no-repeat 0px -57px;
	border: none;
	width: 177px;
	height: 57px;
	margin-left: 63px;
	position:relative;
	margin-top:1.8571%;
}
#order{
	margin-right:5%;
}
#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;
}
#midCont h2{
	padding-bottom:3%;
}
#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;
}
.orderBut:hover{
	background-position:0px 0px;
}
#botCont{
	color:#d1b9a2;
}
#botCont article{
	top: -30px;
	position: relative;
	width: 78%;
}
#midCont article>p{
	float:left;
	width:64%;
}
#midCont article>img{
	float:right;
	margin-bottom:3%;
	box-shadow:0px 2px 7px -1px rgba(0,0,0,0.6);
}
#footer{
	/*top: 1375px;*/
	}

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




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

	}
	#first>section{
		width:32%;
	}
	.shade p{
		width:96%;
	}
	#first section{
		margin:1.2% 0.69% 0 0.5%;
	}
	
}
@media screen
	and (max-width : 800px)
	 {
	 #content{
	}	
	#ribbonRed{
	 	top: -4px;
	 }
	 #desc{
	 	width:51.8125%;
	 }
	 #order{
	 	margin-top:70px;
	 }
	 #midCont article p{
			width:100%;
		}
	#midCont article img{
			float:none;
			left:28.0303%;
			position:relative;
	}
	#midCont{
		padding-bottom:290px;
	}
	#first>section{
		width: 31.8%;
		height:150px;
		margin:1.2% 0.65% 0 0.5%;

	}
	#first>section>img{
		width:100%;
	}
	.shade{
		width:92%;
	}
	.shade p{
		width:100%;
		margin-top:22%;
	}
}

@media screen
	and (max-width : 768px)
	 {
	 #ribbonRed{
	 	top: -4px;
	 }
	 #desc{
	 	width: 49.8125%;
	 }
	 #first>section{
		width:31.9%;
		height:142px;
	}
	#first>section>img{
		width:100%;
	}
	#first>section{
		width: 31.8%;
		height:143px;
		margin:1.2% 0.65% 0 0.5%;

	}
	.shade p{
		width:100%;
		margin-top:19%;
	}
	 #footer{
	 	/*top: 1482px;*/
	 }
	 #content{
	 	/*height: 1050px;*/
	 }
	 #midCont{
	 	/*padding-bottom: 256px;*/
	 }
}
@media screen
	and (max-width : 640px)
	 {
	#content{
		/*height: 1260px;*/
	}
	#first>section{
		width:273px;
		height:172px;
	}
	.shade{
		width:94%;
	}
	.shade p{
		width:100%;
		margin-top:25%;
	}
	#pichold{
		width:51%;
		margin-left:25%;
	}
	#midCont h2{
		text-align:center;
	}
	#desc h2{
		position:relative;
		width: 100%;
		text-align: center;
	}
	#cap{
		position:relative;
		left:21.88%;
	}
	#desc{
		width:100%;
	}
	#ic{
		left: 7.88%;
		position:relative;
	}
	#es{
		margin-left: 21%;
	}
	.orderBut{
		position:relative;
		left:21.88%;
	}
	#footer{
		/*top: 1610px;*/
	}
	#midCont{
		padding-bottom:250px;
	}
}
@media screen
	and (max-width : 480px)
	 {

	#content{
		  /*height: 1260px;*/
	}
	#ribbonRed{
		 	top: -3px;
	}
	#cap{
		left: 11.88%;
	}
	.orderBut{
		position:relative;
		left:11.88%;
	}
	 #midCont article img{
			position:relative;
			left:21.88%;
	}
	#pichold{
		width:66%;
		margin-left:17%
	}
	#ic {
		left: 1.88%;
		position: relative;
	}
	#es{
		margin-left: 11%;
	}
	#midCont{
		padding-bottom:140px;
	}
	#footer{
		/*top: 1530px;*/
	}
		
}
@media screen
	and (max-width : 320px)
	 {
	 	#coffeePic{
		  width:80%;
		}
		#pichold {
		  width: 96%;
		  margin-left: 1%;	
		}
		 #cap{
			left:0%;
			width:99%;
		}
		#midCont article img{
			left:3.88%;
		}
		#ic {
		    left: -5%;
		    position: relative;
		}
		#es{
			margin-left:-2%;
		}
		.orderBut{
			left:-3%
		}
		#footer{
			/*top:1788px;*/
		}

}