@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700);

@font-face {
    font-family: "gesslight";
		src: url("../fonts/gesslight.otf") format("opentype");
}
@font-face {
    font-family: "gessmedium";
		src: url("../fonts/gessmedium.otf") format("opentype");
}

* {
	direction:rtl;
  word-spacing: 3px;
}

html{
  overflow-x: hidden;
}

body{
  overflow-x: hidden;
}

.grayscale {
		-webkit-filter: none; /* Safari 6.0 - 9.0 */
    filter: none;
		transition: all .7s;
}

.grayscale:hover{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}

#youtube-icon {
	position:absolute;
	top:26%;
	left:41%;
	font-size:20.1vw;
	color:#fff;
	transition: all 2s;
}

#youtube-icon:hover {
	color:#E02927;
}

#facebook-icon {
	position:absolute;
	top:26%;
	left:11%;
	font-size:20.1vw;
	color:#fff;
	transition: all 2s;
}

#facebook-icon:hover {
	color:#3b5998;
}

#instagram-icon {
	position:absolute;
	top:26%;
	right:11%;
	font-size:20.1vw;
	color:#fff;
	transition: all 2s;
}

#instagram-icon:hover {
	color:#964B00;
}



@media screen and (max-width: 768px) {


					body{
						margin: 0px;
						font-size: 12px;
						background-color:#623394;
					}

					body a:hover{
						text-decoration: none;
					}

					.desktop {
						display: none;
					}

					.tablet {

					}


					.section1 {
						width: 100%;
						position: relative;
					}

					.mt12vw {
						margin-top:16vw;
					}

					nav {
						position:fixed;
						top:0%;
						background-color:#1a1262;
						height:16vw;
						width:100%;
						border-top: 0px solid #ea094b;
						box-shadow: 0vw .14vw .08vw black;
						z-index:99;
					}

					nav a{
						color: #fff;
						text-decoration: none;

					}

					nav a:hover{
						text-decoration: none;
					}

					nav h4 {
						font-size:.9vw;
						font-weight:600;
						padding:0;
						margin:0;
						color: white;
						font-family:"gesslight";
					}

					.navbar-toggle-menu-off {
						display: none;
					}

					.navbar-toggle-menu-on {
						position: fixed;
						top:2.5%;
						bottom:0%;
						width:100%;
						background-color:#ea094b;
						margin-top:12vw;
						padding-top: 0vw;
						z-index: 97;
						overflow: scroll;
					}

					.navbar-toggle-menu-on ul {
						border-bottom: .1vw solid #cecece;
						margin: 3vw 0vw 0vw 0vw;
					}

					.navbar-toggle-menu-on li{
						padding:4vw 3vw;
						color: #fff;
						font-family: "gesslight";
						font-size: 4.5vw;
						border-top: .1vw solid #cecece;
					}

					.dropdown-content-joy-of-baking {
							display: none;
							background-color:#1a1262;
							min-width:120%;
							z-index:98;
							box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
					}

					.dropdown-content-joy-of-baking a {
							display: block;
							color: #fff;
							font-size:.9vw;
							font-family:"gesslight";
							padding: 8% 10%;
							text-decoration: none;
							border-top:.1vw solid #110a53;
							line-height: 1.5vw;
					}

					.dropdown-content-joy-of-baking a:hover {
						background-color: #ea094b;
						text-decoration: none;
					}

					.dropdown:hover .dropdown-content-joy-of-baking {
					    display: block;
					}

					.dropdown-content-press-center {
					    display: none;
							background-color:#1a1262;
							min-width:12%;
							z-index:98;
					    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
					}

					.dropdown-content-press-center a {
							display: block;
					    color: #fff;
							font-size:.9vw;
							font-family:"gesslight";
					    padding: 8% 10%;
					    text-decoration: none;
							border-top:.1vw solid #110a53;
					}

					.dropdown-content-press-center a:hover {
						background-color: #ea094b;
						text-decoration: none;

					}

					.dropdown:hover .dropdown-content-press-center {
					    display: block;
					}


					.footer-purple {
						height: 36vw;
						width: 100%;
						background-color: #623394;
						text-align: center;
						padding-top: 4vh;
						color: #ffffff;
						line-height: 1vw;
					}

					.footer-purple a {
						color: #ffffff;
					}

					.footer-purple li {
						display: inline;
					}

					.gm-blue {
						color:#1a1262;
					}

					.gm-pink {
						color:#ea094b;
					}

					.gm-white {
						color: #fff;
					}

					.gm-black {
						color: #000;
					}

					.gm-blue-bg {
						background-color: #1a1262;
					}

					.gm-pink-bg {
						background-color: #ea094b;
					}

					.gm-roboto {
						font-family:"gesslight";
					}
					.gm-roboto-nor {
						font-family:"gesslight";
					}

					.bakers-tips-tab {
						padding:0px;
						margin: 0px;
					}
					.bakers-tips-tab ul{
						background-color: #000;
						color: #fff;
						padding:0px;
						margin: 0 0 .5vw 0;
					}
					.bakers-tips-tab li{
						background-color: #0D0D0D;
						font-size: 3.4vw;
						padding:1vw;
						margin: 0px;
					}

					.gm-btn-style1 {
						background-color:#ea094b;
						color:#fff;
						font-size:2.5vw;
						font-family:"gesslight";
						padding:1.2vw;
						border: .2vw solid #fff;
						cursor: pointer;
					}

					.gm-btn-style2 {
						background-color:#ea094b;
						color:#fff;
						font-size: 5vw;
						font-family:"gesslight";
						padding:2vw;
						border: .2vw solid #fff;
						cursor: pointer;
					}

					.gm-btn-style3 {
						background-color:#1a1262;
						color:#fff;
						font-size: 5vw;
						font-family:"gesslight";
						padding:2vw;
						border: .2vw solid #fff;
						cursor: pointer;
					}

					.gm-btn-style1:hover {
						background-color:#1a1262;
					}




					.xyz {
						display: inline;
						position: relative;
					}



					/*animation for products page*/
					@keyframes related-recipe {
					    0%   {bottom:3%; left:9%;}

					    50%  {bottom:0%; left:9%;}

					    100% {bottom:3%; left:9%;}
					}

					.related-recipes-ani {
						animation-name: related-recipe;
					 animation-duration: 1s;
					 animation-timing-function: linear;

					 animation-iteration-count: infinite;
					 animation-direction: alternate;
					}



}












@media screen and (min-width: 769px) {

						body{
							margin: 0px;
							font-size: 12px;
							background-color:#623394;
						}

						body a:hover{
							text-decoration: none;
						}

						.desktop {

						}

						.tablet {
							display: none;
						}


						.section1 {
							width: 100%;
							position: relative;
						}

						nav {
							position:fixed;
							top:0%;
							background-color:#1a1262;
							height:5.1vw;
							width:100%;
							border-top: 0px solid #ea094b;
							box-shadow: 0vw .07vw .04vw black;
							z-index:99;
						}

						nav a{
							color: #fff;
							text-decoration: none;

						}

						nav a:hover{
							text-decoration: none;
						}

						nav h4 {
							font-size:1vw;
							font-weight:600;
							padding:0;
							margin:0;
							color: white;
							font-family:"gesslight";
						}



						.dropdown-content-joy-of-baking {
								display: none;
								background-color:#1a1262;
								min-width:120%;
								z-index:98;
								box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
						}

						.dropdown-content-joy-of-baking a {
								display: block;
								color: #fff;
								font-size:.9vw;
								font-family:"gesslight";
								padding: 8% 10%;
								text-decoration: none;
								border-top:.1vw solid #110a53;
								line-height: 1.5vw;
						}

						.dropdown-content-joy-of-baking a:hover {
							background-color: #ea094b;
							text-decoration: none;

						}

						.dropdown:hover .dropdown-content-joy-of-baking {
								display: block;
						}

						.dropdown-content-press-center {
								display: none;
								background-color:#1a1262;
								min-width:12%;
								z-index:98;
								box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
						}

						.dropdown-content-press-center a {
								display: block;
								color: #fff;
								font-size:.9vw;
								font-family:"gesslight";
								padding: 8% 10%;
								text-decoration: none;
								border-top:.1vw solid #110a53;
						}

						.dropdown-content-press-center a:hover {
							background-color: #ea094b;
							text-decoration: none;

						}

						.dropdown:hover .dropdown-content-press-center {
								display: block;
						}


						.footer-purple {
							height: 14vw;
							width: 100%;
							background-color: #623394;
							text-align: center;
							padding-top: 4vh;
							color: #ffffff;
							line-height: 1vw;
						}

						.footer-purple a {
							color: #ffffff;
						}

						.footer-purple li {
							display: inline;
						}

						.gm-blue {
							color:#1a1262;
						}

						.gm-pink {
							color:#ea094b;
						}

						.gm-white {
							color: #fff;
						}

						.gm-black {
							color: #000;
						}

						.gm-blue-bg {
							background-color: #1a1262;
						}

						.gm-pink-bg {
							background-color: #ea094b;
						}

						.gm-roboto {
							font-family:"gesslight";
						}
						.gm-roboto-nor {
							font-family:"gesslight";
						}

						.bakers-tips-tab {
							padding:0px;
							margin: 0px;
						}
						.bakers-tips-tab ul{
							background-color: #000;
							color: #fff;
							padding:0px;
							margin: 0 0 .5vw 0;
						}
						.bakers-tips-tab li{
							background-color: #0D0D0D;
							font-size: 1.2vw;
							padding:1vw;
							margin: 0px;
						}

						.gm-btn-style1 {
							background-color:#ea094b;
							color:#fff;
							font-size:1.5vw;
							font-family:"gesslight";
							padding:1.2vw;
							border: .2vw solid #fff;
							cursor: pointer;
						}

						.gm-btn-style2 {
							background-color:#ea094b;
							color:#fff;
							font-size: .8vw;
							font-family:"gesslight";
							padding:.7vw;
							border: .2vw solid #fff;
							cursor: pointer;
						}

						.gm-btn-style3 {
							background-color:#1a1262;
							color:#fff;
							font-size: .8vw;
							font-family:"gesslight";
							padding:.7vw;
							border: .2vw solid #fff;
							cursor: pointer;
						}

						.gm-btn-style1:hover {
							background-color:#1a1262;
						}

						.xyz {
							display: inline;
							position: relative;
						}

}



/*animation for products page -- related recipe jumping */
@keyframes related-recipe {
		0%   {bottom:3%; left:9%;}

		50%  {bottom:0%; left:9%;}

		100% {bottom:3%; left:9%;}
}

.related-recipes-ani {
	animation-name: related-recipe;
 animation-duration: 1s;
 animation-timing-function: linear;

 animation-iteration-count: infinite;
 animation-direction: alternate;
}

.home_link {
	background-color:#1a1262;
	color:#FFF;
	padding:15px 20px 15px 10px;
	border-radius:0 10px 10px 0;
	left:0; top:45%;
	position:fixed;
	z-index:999;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
}

.home_link:hover {background-color:#623394;}