/* OUR COFFEE PAGE */

#content{
	margin-top:6.18921%;
	position:relative;
	background:url('images/topBackground.png')top no-repeat,
				 url('images/mail2.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 section>h2{
	margin-bottom:3.06748%;
}
input, textarea{
	font-family:Verdana, Geneva, sans-serif;
	color:#aaaaaa;
	padding-left:10px;
	padding-right:10px;
	font-size:100%;
	width:390px;
	background-image: -webkit-linear-gradient(top, #f6f6f6, #ebebeb); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #f6f6f6, #ebebeb);

   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #f6f6f6, #ebebeb);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #f6f6f6, #ebebeb);
   height:60px;
   -moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	-o-border-radius:10px;
	border: 2px solid rgba(218, 218, 218, 0.8);
	margin-bottom:20px;
}
input, textarea:focus{
	outline:none;
}
textarea{
	height:200px;
	resize: none;
	padding-top:10px;
	padding-bottom:10px;
}
button{
	background:url('images/sendBut.jpg') no-repeat 0px -54px;
	width:175px;
	height:54px;
	border:none;
	margin-left:240px;
}
button:hover{
	background-position:0px 0px;
}
#second{
	float:right;
	width:48%;
	background:url("images/spliterV.jpg") repeat-y;
	padding-left:2%;
}
#second p{
	margin-bottom:4%;
}
#second>section{
	margin-bottom:4%;
}
#first{
	width:49%;
	float:left;
}
#first>section{
	position:relative;
	float:left;
	margin:1.2% 0.7% 0 0.5%;
	overflow:hidden;
	width:273px;
	height:182px;
}
#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;
}
.r{
	float:right;
}
.l{
	float:left;
	width:45%;
	font-weight:bold;
}

#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: 50%;
		position:relative;
	}
	#second{
		width:45%;
	}
	#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:60%;
		left:20%;
	}
	#second{
		width:100%;
		background:none;
	}
}

@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{
		left:10%;
		width:77%;
	}
}
@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{
		left:-1%;
	}
		
}
@media screen
	and (max-width : 320px)
	 {
		#midCont article>h2{
			text-align:center;
		}
		.orderBut{
			left:8.88%;
		}
		input, textarea{
			width:255px;
		}
		#footer{
			/*top:1788px;*/
		}
		#first{
			left:0%;
			width:100%;
		}
		button{
			margin-left:60px;
		}

}