/* MAIN PAGE */

#coffeePic{
	top: 30px;
	position: relative;
	width:62.39%;
	height:338px;
	background: url('images/coffeePic.png') no-repeat;
	background-size:contain;
	margin:0 auto;

}
#content{
	margin-top:94px;
	position:relative;
	background:url('images/topBackground.png')top no-repeat,
				 url('images/inside2.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;
}
#desc{
	color:#3f3838;
	width: 65.8125%;
}
#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:20px;
	position:relative;
	margin-top:1.8571%;
}
#order{
	margin-right:5%;
}
.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: 64.8125%;
		}
	#content{
		font-size:98%; /* FIX PRIVREMENI */
	}
	#botCont{
		
	}
}
@media screen
	and (max-width : 800px)
	 {
	 #content{
		margin-top:20px;
	}	
	#ribbonRed{
	 	top: -4px;
	 }
	 #desc{
	 	width:57.8125%;
	 }
	 #order{
	 	margin-top:70px;
	 }
	 #midCont article p{
			width:100%;
		}
	#midCont article img{
			float:none;
			left:28.0303%;
			position:relative;
	}
	#midCont{
		padding-bottom:290px;
	}
}

@media screen
	and (max-width : 768px)
	 {
	 #ribbonRed{
	 	top: -4px;
	 }
	 #footer{
	 	/*top: 1482px;*/
	 }
	 #content{
	 	/*height: 1050px;*/
	 }
	 #midCont{
	 	/*padding-bottom: 256px;*/
	 }
}
@media screen
	and (max-width : 640px)
	 {
	  #content{
		margin-top:-40px;
		/*height: 1260px;*/
	}	
	#desc h2{
		position:relative;
		width: 100%;
		text-align: center;
	}
	#desc img{
		position:relative;
		left:28.88%;
	}
	#desc{
		width:100%;
	}
	.orderBut{
		position:relative;
		left:28.88%;
	}
	#footer{
		/*top: 1610px;*/
	}
	#midCont{
		padding-bottom:250px;
	}
}
@media screen
	and (max-width : 480px)
	 {

	 #content{
		  margin-top:-100px;
		  /*height: 1260px;*/
	}
	#ribbonRed{
		 	top: -3px;
		 }
	#desc img, #midCont article img{
			position:relative;
			left:21.88%;
	}
	#midCont{
		padding-bottom:140px;
	}
	#footer{
		/*top: 1530px;*/
	}
		
}
@media screen
	and (max-width : 320px)
	 {
	 	#coffeePic{
		  width:80%;
		}
		#content{
			margin-top:-120px;
		}	
		#ribbonRed{
		 	top: -2px;
		 }
		 #desc img{
			left:7.88%;
		}
		#midCont article img{
			left:3.88%;
		}
		.orderBut{
			left:8.88%;
		}
		#footer{
			/*top:1788px;*/
		}

}