/* Reset Css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent }
body { line-height: 1 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
nav ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none }
a { text-decoration: none; outline: 0; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color: #408513; outline: 0; transition: all 0.5s ease 0s; }
ins { background-color: #ff9; color: #000; text-decoration: none }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: 700 }
del { text-decoration: line-through }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help }
table { border-collapse: collapse; border-spacing: 0 }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cac9c9; margin: 30px 0; padding: 0 }
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 }
html[xmlns] .clearfix { display: block }
* html .clearfix { height: 1% }
.fl { float: left }
.fr { float: right }
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; vertical-align: middle; transition: all 0.5s ease 0s; }
.ie8 img { height: auto; width: auto\9; }
.ie8 img.size-large { max-width: 60%; width: auto; }
:hover { transition: all 0.5s ease 0s; }
ul { list-style: none; margin: 0; padding: 0; }
li { list-style: none; }
.last_li, .last_box { margin-right: 0 !important; padding-right: 0 !important }
.first_li, .first_box { margin-left: 0 !important; padding-left: 0 !important }

/*sup, sub {height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative}
sup {bottom: 1ex} 
sub {top: .5ex}*/

/*a:hover{text-decoration:underline}*/
/* ================================= Reset Css ================================= */

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
::-webkit-input-placeholder {
color: #adadad
}
:-moz-placeholder {
color: #adadad
}
::-moz-placeholder {
color: #adadad
}
:-ms-input-placeholder {
color: #adadad
}
 button::-moz-focus-inner {
border: 0
}
:focus { outline: none; }
::-moz-focus-inner {
border:0;
}
input[type=number] { -moz-appearance: textfield }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0
}
input[type=submit], input[type=button] { cursor: pointer; border: 0 }
input:focus { outline: none; }
textarea { resize: none }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/************************************************ Global Styles #X ***************************************************/



/* HR Rules */

/* Image Alignment */
.alignnone, a img.alignnone { margin: 5px 20px 20px 0 }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto }
.alignright, a img.alignright { float: right; margin: 5px 0 20px 20px }
.alignleft, a img.alignleft { float: left; margin: 5px 20px 20px 0 }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto }
/* TypoGraphy */

/*
font-family: 'Alegreya', serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto', sans-serif; 
font-family: 'Lato', sans-serif;
*/

h1, .h1_style { }
h2 { }
h3 { }
h4 { }
h5 { }
h6 { }
p, ul li, ol li { }
.intro_line, .small_intro { }
.intro_line a, .small_intro a { }
.intro_line { }
.small_intro { }
.light_fonts { }
span.light_fonts { }
.c ul, .c ol { margin: 0 0 30px 20px }
ul li { }
ol { counter-reset: section }
ol li:before { color: #266ec0; font-weight: lighter; content: counter(section, decimal) "."; counter-increment: section; padding-right: 5px }
/************************************************ Global Styles #X ***************************************************/

/* ================================= Grid System Css ================================= */

.col-960 { margin: 0 auto; padding: 0 0 0 1%; max-width: 980px; /* 20 extra for padding */ }
.onerow { clear: both; padding: 0 10px }
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; margin: 0 3% 0 0 }
.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 { margin: 0; }
.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }
.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img { }
/* =================================  Custom Css #cc ================================= */	

* { margin: 0; padding: 0; }
header, section, footer, aside, nav, main, article, figure { display: block; }
body { background-image: url(../images/bg.jpg); line-height: 1 ; font-family: 'Lato', sans-serif;}
.container {margin:0 auto}
/*----------------------------------   Header ---------------------------*/
.header_top { background: #ffde16; height: 50px;}
.wrapper {margin: 0 auto; width: 1200px;}
li {display: inline;}
.phone_no{width:30%; float:left;  padding: 10px 0;}
.social_icon{width:65%; padding: 10px 0; float:left; text-align:right}

.logo{width:30%; float:left}
.food_icon{width:70%; display:inline-block}
.logo img{width:100%; margin:0 0 0 -30px}
.banner {background:url("../images/bg.png");}
.Intro_contact{background:#424242; color: white;font-weight: normal; padding: 35px 0 43px; text-align: center; line-height:25px; }
.Intro_contact p{font-size:18px}
.Food_color { color: #ffde16; font-weight: bold;}

.main_intro {background: #ef775e; padding: 35px 0 40px;}
.main_intro p {font-size:18px; line-height:25px; color:#ffffff}
.join {color: #ffffff; font-size: 18px; display:block; text-align: center;}
.phone_no{ transition:all 0.3s linear 0s !important}
.social_icon a, .phone_no .phone { background: rgb(0, 0, 0);  border-radius: 24px;  color: yellow;  display: inline-block;  font-family: FontAwesome;  font-size: 18px;  font-style: normal;  font-weight: normal;  height: 30px;    line-height: 30px !important; text-align: center;width: 30px; transition:all 0.3s linear 0s !important}
.social_icon a:hover,  .phone_no:hover .phone {  background: rgb(48, 142, 205); transition:all 0.3s linear 0s}
.phone_no:hover .no{ color:rgb(48, 142, 205)}
.social_icon li {padding:0 10px 0 0;}
.no {padding: 0 10px 0; color: #000000; font-weight:bold; transition:all 0.3s linear 0s}
.main_intro .wrapper p{font-weight:400; text-align:justify}
.Intro_contact p{ font-weight:400;}
.join { font-weight:400;}
.rotate3dY .g_plus{color:red}
footer{background:rgb(66, 66, 66) none repeat scroll 0 0}
.col1{margin-bottom:0}
.f_left {display: block; float: left;  padding: 22px 0;  width: 50%;}
.f_right { padding: 10px 0;  text-align: right;}
.f_right  img { max-width: 210px;}
.f_left{color:#ffde16; font-weight:bold }
.f_left a{color:#ffffff;font-weight:bold }
/*.f_left a:hover{color:#ff7c6d; border-bottom:2px solid #27ae60}*/
.f_left a:hover{ border-bottom:1px solid}
.tile-big img{margin-top:-20px}
@media screen and (max-width: 320px) and (orientation: portrait) {}

/********************************* Mobile Potrait ********************************/
@media screen and (max-width: 480px) and (orientation: portrait) {
}

/********************************* Mobile landscape ********************************/
@media screen and (max-width: 480px) and (orientation: landscape) {
}

/********************************* big Mobile landscape ********************************/
@media screen and (max-width: 640px) and (orientation: landscape) {
}

/* ================================= Common For All mobile definitions #mx ================================= */
@media all and (max-width: 767px) {
.food_icon > img{width:100%}	
.food_icon {display:none}
.logo{float:none; width: 100%}
.wrapper { margin: 0 auto;  max-width: 1200px;   width: 100%;}
.logo img{margin:0 auto; width:50%}
.logo > a {display: block; text-align:center; width: 100%;}
.food_footer{text-align:center}
.f_left{float:none; width:100%; padding:5px 0; font-size:15px}
.f_right{text-align:center}
.f_left a{font-size:15px}
/*---------------------Header------------------*/
.social_icon { margin: 0 auto; padding: 10px 0;  text-align: center; width:100%;}

.phone_no { padding: 10px 0; text-align: center; width:100%}

.header_top { height: 96px;}
ul{float:none}
.Intro_contact p{font-size:15px}
.Intro_contact {padding:15px 0 15px}
.main_intro p{font-size:15px}
.join {font-size:15px}
.main_intro{padding:20px 0 20px}
}
/********************************* ipad portrait #mx ********************************/

/********************************* ipad portrait #ip ********************************/
@media only screen and (min-width : 768px) and (max-width: 1000px) {
.wrapper{width:100%}
.header_top{width:100%}
.phone_no{padding:10px 10px 10px 35px}
.food_icon > img{width:100%}
.logo img{margin:0 0 0 15px}
.food_icon > img { margin: 0 15px;}
}

/********************************* ipad landscape #il ********************************/
@media only screen and (min-width : 1001px) and (max-width : 1024px) {
	.wrapper{width:100%}
.header_top{width:100%}
.phone_no{padding:10px 35px}
.food_icon > img{width:100%}
.logo img{margin:0}

}

/* ================================= Small Computer #Sc ================================= */
@media screen and (min-width:1025px) {
	.food_icon > img {
    width: 100%;
}
}

/* ================================= Large Computer #lc ================================= */
@media screen and (min-width: 1450px) {
	.food_icon > img {
    width: 100%;
}
}