/* --------------

Template name: olive-zaitun
Author: del-code
Version: 1.0

-------------- */

/*------------------------------------------------------------------
[Table of contents]

1. navbar / .nav-item a
2. header / #header-txt h1
3. slogan / .slogan
4. burger menu / #burger-container
5. product description / .product-desc
6. modal / .modal-dialog
7. recipe / .reciepe-txt-top
8. team / .team-info-container
9. footer / .footer-widget

------------------------------------------------------------------*/

/* larger than 2560px */
@media (min-width: 2560px) {
	
	body {
		zoom: 200%;
	}

}	

@media (max-width: 1200px) {
	
	/*-- navbar --*/
	
	.nav-item a{
		font-size: 1.6em;
	}
	
	/*-- header --*/
	
	#header-txt h1{
		font-size: 6em;
	}
	
	#header-txt h3{
		font-size: 3em;
	}
	
	.title-text1, 
	.title-text2
	{
		font-size: 3.2em;
	}
	
	#leaf{
		bottom: 20%;
		left: 20%;
	}
	
	/*-- slogan --*/
	
	.slogan{
		font-size: 4em;
	}
	
	.left-overlap h2,
	.right-overlap h2
	{
		font-size: 3em;
	}
	
	#product-list{
		font-size: 3.5em;
	}
	
	#testimony h4{
		font-size: 1.3em;
	}
	
	#subscribe{
		white-space: normal;
	}
	
}

@media (max-width: 768px) {
	
	/*-- burger menu --*/
	
	#burger-container{
		right: 2%;
	}
	
	/*-- header --*/
	
	#header-cover-horizontal{
		width: 100%;
	}
	
	#header-cover-vertical{
		left: 8%;
	}
	
	#header-txt h1{
		font-size: 5em;
		padding: 0 7% 0 0;
	}
	
	#header-txt h3{
		font-size: 2em;
		padding: 15px 2% 15px 0;
	}
	
	.title-text1, 
	.title-text2
	{
		font-size: 2.7em;
	}
	
	/*-- slogan --*/
	
	#reciepe-slogan,
	#team-slogan,
	.slogan
	{
		font-size: 3.4em;
	}
	
	#team-slogan{
		padding: 60px 0 40px 0;
	}
	
	#overlap-div h2
	{
		font-size: 3em;
	}
	
	.left-align{
		padding-left: 15px;
	}

	.right-align{
		padding-right: 15px;
	}
	
	/*-- product description --*/
	
	.product-desc,
	.product-img
	{
		padding: 15px;
	}
	
	.product-desc h2{
		font-size: 3.2em;
	}
	
	#product-name, 
	#recipe-name
	{
		padding-top: 20px;
	}
	
	.img-product{
		width: 100%;
		height: auto;
	}
	
	/*-- testimony --*/
	#testimony h5{
		font-size: 3.4em;
	}
	
	/*-- modal --*/
	.modal-dialog{
		max-width: 90%;
	}
	
	/*-- recipe --*/
	.reciepe-txt-top{
		top: 5%;	
	}
	
	.reciepe-txt-bottom{
		bottom: 5%;
	}
	
	/*-- team --*/
	
	.team-info-container{
		padding: 0 15px;
	}
	
	.team-info h3 {
		font-size: 1.6em;
	}
	
	/*-- text overlay --*/
	.branch{
		display: none;
	}
	
	.txt-overlay-left{
		margin-left: 0;
	}
	
	.txt-overlay-right{
		margin-right: 0;
	}
	
	.txt-overlay-left,
	.txt-overlay-right
	{
		margin-top: 0;
		
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
	
	
	/*-- footer --*/
	.footer-widget,
	.footer-link-container,
	.footer-social-container
	{
		text-align: center;
	}
	
	#footer-leaf{
		left: 50%;
		top: -110px;
		
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
}

@media (max-width: 736px) {
	
	.product-desc-wrap {
		padding: 0;
	}
	
	/*-- overlap div --*/
	
	.left-overlap,
	.right-overlap
	{
		position: relative;	
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		margin: auto;
		
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
		
		border-radius: 0;
	}
	
	/*-- contact --*/
	.mail{
		background-color: #ffe34c;
	}
	
	.site{
		background-color: rgba(0,0,0,.6);
	}
	
	
}

@media (max-width: 568px) {
	
	#leaf{
		left: 0;
	}
	
	#header-cover-horizontal{
		z-index: 1;
	}
	
	.product-desc h2,
	.product-desc p
	{
		text-align: center;
	}
	
	/*-- mission & vission --*/
	#misvis{
		padding: 35px 15px;
	}
	
}

@media (max-width: 480px) {
	
	/*-- burger menu --*/
	#burger-container{
		right: 5px;
	}
	
	/*-- header --*/
	
	#header-cover-horizontal{
		width: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, .5);
	}
	
	#header-cover-vertical{
		left: 10%;
	}
	
	#header-txt h1{
		font-size: 4em;
		text-align: center;
		padding: 0 0 0 15px;
	}
	
	#header-txt h3{
		padding: 15px 15px;
	}
	
	#leaf {
		top: 30%;
		left: 20%;
		z-index: 1;
	}
	
	/*-- display --*/
	
	.small-display{
		display: block;
	}
	
	.big-display{
		display: none;
	}
	
	/*-- slogan --*/
	
	#team-slogan,
	.slogan{
		font-size: 3.2em;
	}
	
	.slogan-child{
		font-size: 1.4em;
	}
	
	.sub-content-row .col-sm-4{
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	#best-product{
		font-size: 2.7em;
		line-height: 1.3;
	}
	
	.reciepe-txt-top h3, 
	.reciepe-txt-bottom h3{
		font-size: 2.2em;
		padding: 15px;
	}
	
	/*-- contact --*/
	
	.mail{
		background-color: #ffe34c;
	}
	
	.site{
		background-color: rgba(0,0,0,.6);
	}
	
}

@media (max-width: 320px) {
	
	#overlap-div{
		padding: 0;
	}
	
	#header-txt h1{
		font-size: 3.7em;
	}
	
	.reciepe-txt-top h3, 
	.reciepe-txt-bottom h3{
		padding: 0;
	}
	
}