/*======================================================================*/
/* MAIN STYLES FOR OLA JUICE BAR - DESIGNED MOBILE FIRST */
/*======================================================================*/

/* IMPORTED FONTS */
/*=====================================================================*/

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?d7wlwu');
	src:url('fonts/icomoon.eot?#iefixd7wlwu') format('embedded-opentype'),
		url('fonts/icomoon.ttf?d7wlwu') format('truetype'),
		url('fonts/icomoon.woff?d7wlwu') format('woff'),
		url('fonts/icomoon.svg?d7wlwu#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* FIXES */ 
/*=====================================================================*/

* {
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.group:before,
.group:after {
  display: table;
  content: "";
}
.group:after {
  clear: both;
}

/* HTML / BODY / MAINCONTENT STYLES */
/*=====================================================================*/

html {
	background: #1a1a1a;
}

html, body, #main-body {
	width: 100%;
	height: 100%;
	font-size: 1em;
	line-height: 1.5em;
	font-family: 'Muli', sans-serif;
	color:#fff;
	position: relative;
}

#main-body {
	transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
}

::-webkit-input-placeholder {
   color: #9c9c9c;
}

:-moz-placeholder { /* Firefox 18- */
   color: #9c9c9c;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #9c9c9c;  
}

:-ms-input-placeholder {  
   color: #9c9c9c;  
}

#main-body.active {
	z-index: -100;
}

/* HEADERS */
/*=====================================================================*/

h1, h2, h3, h4, h5, h6 {
	font-family: 'montserrat', sans-serif;
	line-height: 1.25em;
	font-weight: 400;
	margin:0 0 20px;
	padding:0;
	color:#fff;
	text-align: center;
	font-weight: 400;

	/* Transitions */

	transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-ms-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out; 
}

h1 {font-size: 2em;} h2 {font-size: 1.5em;} h3 {font-size: 1.25em;} h4 {font-size: 1.25em;} h5 {font-size: 1.25em;} h6 {font-size: 1em;}

img {
	display: block;
	width: 100%;
}

a, a:visited {
	color: #FFC700;
	text-decoration: none;
}

/* PRODUCTION QUICK CLASSES */
/*=====================================================================*/

.italic {
	font-style: italic;
	font-weight: 400;
}

.wrap {
	width:100%;
	max-width: 1280px;
	margin:0 auto;
	padding:0 20px;
}

.wrap-big {
	width:100%;
	max-width: 1480px;
	margin:0 auto;
	padding:0 20px;
}

.thousand {
	width:100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	display: block;
}

.eight-hundred {
	width:100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 0;
	display: block;
}

.six-hundred {
	width:100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 0;
	display: block;
}

.section {
	padding:50px 0;
}

.section-big {
	padding: 100px 0 50px;
}

.pad {
	padding:20px 0;
}

.pad-small {
	padding: 10px 0;
}

.pad-half {
	padding: 20px 10px;
}

.pad-top {
	padding-top: 20px;
}

.pad-bot {
	padding-bottom: 20px;
}

.mobile-hidden {
	display: none;
}

.desktop-hidden {
	display: block;
}

.push {
	min-height: 85%;
}	

.half, .quarter, .third, .third-last {
	width: 100%;
}

.half-small, .quarter-small, .third-small {
	display: block;
	width: 50%;
	float: left;
}

.third-small-last {
	display: block;
	width: 50%;
	clear: both;
	margin: 0 auto;
}

/* BUTTON STYLES */
/*=====================================================================*/

.bttn, .bttn:visited {
	display: block;
	width: 280px;
	height: 60px;
	margin: 40px auto 0;
	border: 2px solid #FFC700;
	text-align: center;
	line-height: 54px;
	font-size: 1.15em;
	font-family: 'montserrat', sans-serif;
	background: #FFC700;
	color: #fff;
	border-radius: 50px;
	position: relative;
}

.bttn:hover {
	color: #fff;
}

.bttn-text {
	z-index: 1;
	position: absolute;
	width: 100%;
}

/* MOBILE MENU */
/*=====================================================================*/

#mobile-bar {
	display: block;
	width: 100%;
	height: 48px;
	background: #1a1a1a;
	border-bottom: 1px solid #FFC700;
}

#mobile-bar > a, #mobile-bar > a:visited {
	display: block;
	width: 25%;
	height: 100%;
	float: left;
	text-align: center;
	line-height: 48px;
	font-size: 1.3em;
	border-right: 1px solid #FFC700;
}

#mobile-bar > a:last-child {
	border: none;
}

.phone-mobile:before {
	font-family: 'icomoon';
	content: "\e602";
}

.phone-email:before {
	font-family: 'icomoon';
	content: "\e601";
}

.phone-maps:before {
	font-family: 'icomoon';
	content: "\e600";
}

#menu-toggle:before {
	font-family: 'icomoon';
	content: "\e606";
}

#mobile-menu {
	display: none;
	width: 100%;
	background: #1a1a1a;
}

#mobile-menu > a, #mobile-menu > a:visited {
	display: block;
	width: 100%;
	height: 56px;
	line-height: 56px;
	padding: 0 20px;
	text-align: center;
	font-family: 'montserrat', sans-serif;
	color: #fff;
	background: #FFC700;
	border-bottom: 1px solid #545454;
}
#main-menu > a.bttn.order-bttn {
        padding: 0;
        height:44px;
        line-height:40px;
        width:132px;
        min-width:132px;
        color: #FFFFFF;
        margin: 0;
        font-size:.875rem;
}

#mobile-menu > #selected {
	background: #97AF00;
}

/* MENU BAR */
/*=====================================================================*/

#logo {
	max-width: 200px;
	display: block;
	margin: 0 auto;
	padding: 20px 0 25px;
}

#social-icons, #main-menu {
	display: none;
}

/* SOCIAL ICONS */
/*=====================================================================*/

.facebook:before {
	font-family: 'icomoon';
	content: '\e603';
	font-size: 1.2em;
}

.instagram:before {
	font-family: 'icomoon';
	content: '\e604';
	font-size: 1.2em;
}

.phone:before {
	font-family: 'icomoon';
	content: '\e602';
	font-size: 1.2em;
}

.email:before {
	font-family: 'icomoon';
	content: '\e601';
	font-size: 1.2em;
}

.map:before {
	font-family: 'icomoon';
	content: '\e600';
	font-size: 1.2em;
}

/* FOOTER */
/*=====================================================================*/

footer {
	padding: 50px 0 20px;
	color: #999;
	text-align: center;
	font-size: .875em;
	line-height: 1.5em;
	box-shadow: inset 0 5px 10px rgba(0,0,0,.7);
}

/* PRIVACY POLICY */
/*=====================================================================*/

#privacy, #template {
	background: url("../img/dark_wood.png") repeat, #1a1a1a;
}

#privacy h1, #privacy h6, #template h1, #template h2, #template h3, #template h4, #template h5, #template h6 {
	text-align: left;
}

/*======================================================================*/
/* LANDSCAPE MOBILE LAYOUT */
/*======================================================================*/

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



}

/*======================================================================*/
/* TABLET PORTRAIT AND IPHONE 6+ LAYOUT */
/*======================================================================*/

/* , only screen and (min-width: 736px) and (orientation: landscape) */
@media screen and (min-width: 768px), only screen and (min-width: 736px) and (orientation: landscape) {

/* HEADERS */
/*=====================================================================*/

h1 {font-size:3em;} h2 {font-size: 2.75em;} h3 {font-size: 2.5em;} h4 {font-size: 2.5em;} h5 {font-size: 1.75em;} h6 {font-size: 1.5em;}


h1, h2, h3, h4, h5, h6 {
	
}

/* PRODUCTION QUICK CLASSES */
/*=====================================================================*/

.big {
	font-size: 1.5em;
	line-height: 1.5em;
}

.pad, .pad-small {
	padding:20px;
}

.pad-left {
	padding-left: 20px;
}

.pad-right {
	padding-right: 20px;
}

.section {
	padding:100px 0;
}

.section-big {
	padding: 200px 0 100px;
}

.half {
	display: block;
	float: left;
	width: 50%;
}

.third-small, .third-small-last {
	display: block;
	float: left;
	width: 33%;
	clear: none;
	margin: 0;
}

.third {
	display: block;
	width: 50%;
	float: left;
}

.third-last {
	display: block;
	width: 50%;
	clear: both;
	margin: 0 auto;
}

.quarter {
	width: 50%;
	float: left;
}

.quarter-small {
	display: block;
	width: 25%;
	float: left;
}

.desktop-hidden {
	display: none;
}

a, a:visited {
	/* Transitions */
	transition:all 0.2s ease-out;
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-ms-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
}

a:hover {
	color: #97AF00;
}

/* BUTTON STYLES */
/*=====================================================================*/

.bttn-filter {
	display: block;
	width: 0;
	height: 100%;
	z-index: 0;
	background: #97AF00;
	border-radius: 50px;
	margin: 0 auto;
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
}

.bttn:hover {
	border: 2px solid #97AF00;
}

.bttn:hover > .bttn-filter {
	width: 100%;
}

/* MENU BAR */
/*=====================================================================*/

#mobile-bar, #mobile-menu, #mobile-menu > a {
	display: none;
}

#menu-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	width: 100%;
	display: block;
	background: #1a1a1a;
	border-bottom: 1px solid #545454;
}

#menu-bar .wrap {
	position: relative;
}

#logo {
	display: block;
	float: left;
	max-width: 160px;
	padding: 15px 0;
}

#main-menu {
	display: block;
	width: auto;
	padding: 0;
	position: absolute;
	bottom: 8px;
	right: 20px;
}

#main-menu > a, #main-menu > a:visited {
	display: block;
	float: left;
	padding: 10px 20px;
	color:#FFC700;
	font-family: 'montserrat', sans-serif;
}
    
    #main-menu > a.bttn.order-bttn {
        padding: 0;
        height:44px;
        line-height:40px;
        width:132px;
        min-width:132px;
        color: #FFFFFF;
        margin: 0;
        font-size:.875rem;
}

#main-menu > #select {
	color: #97AF00;
}

/* SOCIAL ICONS */
/*=====================================================================*/

#social-icons {
	display: block;
	float: right;
	padding: 10px 0;
}

#social-icons > a, #social-icons > a:visited {
	display: block;
	float: left;
	padding: 10px 10px;
	color:#FFC700;
	position: relative;
}

#social-icons > .phone > .number {
	display: none;
	position: absolute;
	left: -15px;
	bottom: -20px;
	opacity: 0;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
}

#social-icons > .email > .e-address {
	display: none;
	position: absolute;
	left: -115px;
	bottom: -20px;
	opacity: 0;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
}

#social-icons > .phone:hover > .number, #social-icons > .email:hover > .e-address {
	opacity: 1;
	display: block;
}

#main-menu > a:hover, #social-icons > a:hover {
	color: #97AF00;
}

/* FOOTER */
/*=====================================================================*/

footer {
	padding: 100px 0 20px;
	text-align: left;
}

/* PRIVACY POLICY */
/*=====================================================================*/

.privacy-push {
	display: block;
	width: 100%;
	height: 137px;
}

}

/*======================================================================*/
/* SMALL DESKTOP AND TABLET LANSCAPE */
/*======================================================================*/

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

/* PRELOADER */
/*=====================================================================*/

#preloader {
	display: block;
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../img/preloader.gif") no-repeat center,#1a1a1a;
    background-size: 85%;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    width: 
}

.no-js #preloader {
	display: none;
}

/* PRODUCTION QUICK CLASSES */
/*=====================================================================*/

.third, .third-last {
	display: block;
	width: 33%;
	float: left;
	clear: none;
	margin: 0;
}

.quarter {
	width: 25%;
	float: left;
}

.mobile-hidden {
	display: block;
}

}

/*======================================================================*/
/*======================================================================*/
/* MODERNIZER STYLES FOR NO- CLASSES */
/*======================================================================*/
/*======================================================================*/