/*
Theme Name: Tutti Frutti
Description: Custom Wordpress theme for Tutti Frutti website
Author: Clever Starfish


---------------------------------------
BASIC STUFF AND TYPOGRAPHY
------------------------------------ */

html { overflow-y: scroll; }
article, aside, figure, footer, header, hgroup, nav, section { display: block; }

body {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	font-family: 'Arial W01 Rounded',Arial,sans-serif;
	color:#767676;
	background: #d3d889;
	-webkit-text-size-adjust:none;
}

p {
	
}

strong {
	font-weight: normal;
	font-family: 'Arial W01 Rounded Bold';
}

a:link, a:active, a:visited {
	text-decoration: none;
	font-family: 'Arial W01 Rounded Bold',Arial,sans-serif;
	color:#f38026;
}
a:hover {
	
}
a img {
	border: 0;
}

h1 {
	font: normal normal 36px/38px 'Arial W01 Rounded Bold',Arial,sans-serif;
	margin: 20px 0 10px 0;
	color:#565656;
}
.home h1 {
	color:#f07f25;
}

h2 {
	font: normal normal 22px/30px 'Arial W01 Rounded Bold',Arial,sans-serif;
	margin: 16px 0 6px 0;
	color:#f07f25;
}

h3 {
	font: normal normal 18px/22px 'Arial W01 Rounded Bold',Arial,sans-serif;
	margin: 14px 0 -6px 0;
	color:#565656;
}

h4 {
	font: normal normal 18px/22px 'Arial W01 Rounded Bold',Arial,sans-serif;
	margin: 30px 0 14px 0;
	color: white;
	background: #FEB831;
	border-radius: 20px;
	padding: 14px 20px;
}

#content_inner li {
	margin:10px 0;
}

iframe {
	margin: 0;
	border: 0;
	outline: 0;
	overflow: hidden;
}


/* ------------------------------------
HEADER
------------------------------------ */

header {
	max-width: 960px;
	width:100%;
	height: 224px;
	margin: 0 auto;
	padding-top:20px;
	position: relative;
	z-index: 100;
}

#logo {
	display: block;
	width:221px;
	height:148px;
	margin: 0 auto;
	background: url(_inc/img/logo.png) no-repeat top center;
	text-align: left;
	text-indent: -9999px;
	font-size: 1px;
	color: white;
}

#social {
	float: right;
	height:50px;
	text-align: center;
}
#social a {
	display: inline-block;
	width: 32px;
	height: 31px;
	font-size: 1px;
	text-align: left;
	text-indent: -9999px;
	margin-left:6px;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
#social a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
#social a#fb {
	background: url(_inc/img/fb.png) no-repeat top left;
}
#social a#twitter {
	background: url(_inc/img/twitter.png) no-repeat top left;
}
#social a#foursquare {
	background: url(_inc/img/foursquare.png) no-repeat top left;
	display: none;
}


/* ------------------------------------
GENERAL LAYOUT
------------------------------------ */

#wrapper {
	background: #fbfbfb url(_inc/img/bg_pattern.png) repeat-x center 490px;
	padding: 1px 0 30px 0;
	min-height: 700px;
}

#content {
	width: 100%;
	max-width: 960px;
	min-height: 400px;
	margin: 0 auto;
	background: white;
	border-radius: 40px;
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1);
}
html.ie8 #content {
	border: 1px solid #eaeaea;
}
#content_inner {
	padding: 50px 50px 30px 50px;
	position: relative;
}
#content_inner h1 {
	margin-top:0;
}

.error404 #content_inner {
	padding: 94px 50px 91px 50px;
}
.error404 #content_inner img {
	float:left;
	width:100%;
	max-width:378px;
}
.content404 {
	float: left;
	margin: 24px 0 0 36px;
}
.error404 h1 {
	font-size: 84px;
	line-height: 80px;
	color: #F48126;
}
.error404 h3 {
	font-size: 18px;
	line-height: 29px;
}

.locationsmap {
	width: 100%;
	height: 360px;
}
.instagram-feed img{
	width: 55px;
	height: 55px;
/*	margin: 18px 0;*/
}
.locationinfo .instapress-shortcode-image{
	max-width: 50px;
}

/* ------------------------------------
HOMEPAGE
------------------------------------ */

#banner {
	position: relative;
	width: 960px;
	margin: -38px auto 0 auto;
	height: 386px;
	overflow: hidden;
}
#banner #mask {
	position: absolute;
	z-index:6;
	width: 960px;
}
#banners {
	position: absolute;
	width: 890px;
	top:30px;
	left:42px;
	height: 346px;
}
#banners a {
	position: absolute;
	display: block;
	width: 890px;
	height: 346px;
}
#banners a img {
	width:890px;
	height: 346px;
}
#banner_link {
	display: block;
	width:820px;
	height:300px;
	position: absolute;
	top:70px;
	left:75px;
	z-index: 7;
	background: rgba(255,255,255,0);
}
html.ie8 #banner_link, html.ie8 #prev, html.ie8 #next {
	background: white;
	filter: alpha(opacity=0);
}

#pager {
	position: absolute;
	width:800px;
	height:14px;
	right:80px;
	top:55px;
	text-align: right;
	z-index: 7;
}
#pager a {
	display: inline-block;
	width:14px;
	height:14px;
	margin-left:8px;
	background: url(_inc/img/dot_off.png) no-repeat top left;
	text-align: left;
	text-indent: -9999px;
}
#pager a.activeSlide {
	background: url(_inc/img/dot_on.png) no-repeat top left;
}

#prev, #next {
	display: block;
	width: 70px;
	height: 70px;
	position: absolute;
	left: 0;
	top: 156px;
	z-index: 9999;
	background: rgba(255,255,255,0);
}
#next {
	left:893px;
	right:0;
}

#content_home {
	width:100%;
	max-width: 960px;
	margin: 0 auto;
}
#content_inner_home {
	
}
.home_col {
	width:231px;
	margin-right:12px;
	padding-top:25px;
	float: left;
}
.home_col.first {
	padding-top:0;
}
.home_col.last {
	margin-right:0;
}
.home_col p {
	padding-left: 15px;
}
.home_col.first p {
	padding-left:0;
}
.home_col p a {
	white-space: nowrap;
}


/* ------------------------------------
LOCATION PAGES
------------------------------------ */

.locationinfo {
	float: left;
	width: 240px;
	margin-right:20px;
	margin-bottom:20px;
}
.locationimage {
	float: left;
	width:220px;
	margin-right:20px;
}
.locationmap {
	float: right;
	max-width: 360px;
	width: 100%;
	height: 360px;
}
#twitterfeed {
	background: #b0b919 url(_inc/img/twitter_icon.png) no-repeat 14px 14px;
	padding: 16px 16px 16px 52px;
	border-radius: 16px;
	max-width: 500px;
	margin-bottom: 10px;
}
#twitterfeed p {
	font-size: 12px;
	line-height: 14px;
	color: white;
	font-family: 'Arial W01 Rounded Bold',Arial,sans-serif;
	margin: 0;
	margin-top: 0 !important;
}
#twitterfeed ul, #twitterfeed li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#twitterfeed ul img, .tweet_join, .tweet_avatar, .tweet_time {
	display: none;
}
.tweet_text a {
	color: white !important;
}
#twitterfeed a {
	color:#5b600e;
}
a#facebooklike, a#instagramlike {
	display: block;
	background: #f07f26 url(_inc/img/fb_icon.png) no-repeat 14px 14px;
	padding: 16px 16px 16px 52px;
	border-radius: 16px;
	max-width: 500px;
	font-size: 12px;
	line-height: 14px;
	color: #723d13;
	font-family: 'Arial W01 Rounded Bold',Arial,sans-serif;
	margin-bottom: 10px;
}

a#instagramlike {
	background: #ffb815 url(_inc/img/instagram-icon.png) no-repeat 14px 14px;
}

/* ------------------------------------
INTERNAL PAGES
------------------------------------ */

#leftcol {
	float: left;
	width: 100%;
	max-width: 300px;
}
.franchisebox {
	border-radius: 26px;
	padding: 25px;
	font:normal normal 14px/22px 'Arial W01 Rounded Bold',Arial,sans-serif;
	color: black;
	margin-left: 47px;
}
.page-id-20 #content_inner img, .page-id-206 #content_inner img, .page-id-151 #content_inner img, .page-id-196 #content_inner img {
	margin-right:5px;
}

.flavour_box {
	display: none;
}
#flavours_nav {
	position:absolute;
	top:60px;
	left:242px;
}
#flavours_nav a {
	padding:8px 18px;
	background: #b2ba19 !important;
	text-align:left !important;
	font-weight:normal !important;
	color: #ffffff;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px; 
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px; 
margin-right:10px;
}
#flavours_nav a.current {
	background: #f48126  !important;
}
	


/* ------------------------------------
NAVIGATION
------------------------------------ */

nav {
	text-align: center;
}

.menu {
	
}

.menu ul, .menu ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	display:inline;
}

.menu li a {
	font:normal normal 19px/normal 'Arial W01 Rounded Bold',Arial,sans-serif;
	text-decoration: none;
	display: inline-block;
	padding: 26px 14px 20px 14px;
	overflow: hidden;
	color:#999991;
}

.menu li a:hover, .menu .current_page_item > a, .menu .current_page_parent > a {
	color:#f17f26;
}

.menu .children {
	display: none;
}

#mobile_nav {
	display: none;
}
#mobile_nav div.selector {
	background:#e2e2e2 url(_inc/img/select_bg.png) no-repeat center right;
	padding: 220px;
	padding:3px 20px;
	border-radius: 20px;
	margin-top:20px;
}
#mobile_nav div.selector span {
	background:none;
	text-align: left;
	font-size: 14px;
	font-family: 'Arial W01 Rounded Bold',Arial,sans-serif;
	color: #565656;
}
#mobile_nav div.selector select {
	width:230px;
	height: 33px;
}

/* DROPDOWN MENU */
.menu ul {margin:0; padding:0; list-style-type:none; position:relative; z-index:9999;}
.menu ul li, .menu ul li ul li { position:relative;line-height:0;margin:0;}
.menu ul ul li a {margin-top:0;}
.menu ul ul {opacity:0;position:absolute;margin-top:7px; display:none; width:200px; top:0; left:16px;}
html.ie .menu ul ul {top:-14px;}
html.ie7 .menu ul ul {top:35px;}
.menu ul ul a {float:none !important;font-size:16px !important;position:relative;padding:8px 14px;background: #565656 !important;text-align:left !important;font-weight:normal !important;color: #b8b9b3;-webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
}
.menu ul ul a:hover {color:#f17f26;}
.menu ul li ul {width:14.1em;}
.menu ul li ul a {width:180px; height:auto; float:left;}
.menu ul li ul ul {position:absolute;top:-20px;left:200px;margin:0;}
.menu ul li:hover ul ul, .menu ul li:hover ul ul ul, .menu ul li:hover ul ul ul ul {display:none;}
.menu ul li:hover ul, .menu ul li li:hover ul, .menu ul li li li:hover ul, .menu ul li li li li:hover ul {display:block;opacity:1;}
@media screen and (-webkit-min-device-pixel-ratio:0){
/*safari fix*/
.menu ul ul { margin-top:19px;padding-top:2px; }
}
/*fix for IE7 and below*/
.menu ul ul {top:20px !ie;}
.menu ul li ul ul {margin:0 !ie;top:-50px !ie;left:0 !ie;}
/*round the corners of the top and bottom menu items*/
.menu ul ul li:first-child a { -moz-border-radius-topleft: 18px;-moz-border-radius-topright: 18px;border-top-left-radius: 18px;border-top-right-radius: 18px; padding-top:14px; }
.menu ul ul li:last-child a { -moz-border-radius-bottomleft: 18px;-moz-border-radius-bottomright: 18px;border-bottom-left-radius: 18px;border-bottom-right-radius: 18px; padding-bottom:14px; }
/*end rounding*/
/* END DROPDOWN MENU */


/* ------------------------------------
FOOTER
------------------------------------ */

footer {
	background: url(_inc/img/footer_bg.png) no-repeat top center;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding:75px 0 20px 0;
	height: 100px;
	position: relative;
}
#footer_inner {
	padding: 0 30px 30px 30px;
}
footer p {
	color: #848939;
	font-size: 10px;
	line-height: 12px;
}
#footer_social {
	text-align: center;
	width: 100%;
	margin-bottom: -60px;
}
footer p.copyright {
	float: left;
}
#footer_fb {
	margin-left:56px;
}

a#starfish { position:relative; margin-top:16px; background: url(http://www.cleverstarfish.com/starfish_neg.png) top left no-repeat; width: 84px; height: 23px; display: block; float:right; z-index: 999; margin-bottom:30px; }
a#starfish:hover { background-position: bottom left; }
a#starfish span { width: 1px; height: 1px; overflow: hidden; display: block; text-indent: -9999em; }


/* ------------------------------------
FORMS
------------------------------------ */

button, input[type='text'],input[type='email'], select, textarea {
	font: 14px 'Arial W01 Rounded Bold',Arial,sans-serif;
	border: 2px solid #a2a917;
	background: white;
	padding: 8px;
	margin: 0;
	outline: none;
	width:260px;
	border-radius: 5px;
	float: left;
	-webkit-appearance: none;
}
input[type=submit] {
	font: 14px 'Arial W01 Rounded Bold',Arial,sans-serif;
	display: inline;
	clear: both;
	border-radius: 20px;
	background: #c1002d;
	color: white;
	text-align: center;
	padding: 10px 20px;
	outline: none;
	border: 0;
	-webkit-appearance: none;
}
.gform_footer {
	clear: both;
	text-align: center;
	padding-top: 10px;
}
label {
	font: 14px 'Arial W01 Rounded Bold',Arial,sans-serif;
	width: 143px;
	clear: left;
	float: left;
	padding: 18px 10px 0 16px;
	color: black;
}
.formnote {
	font: 14px 'Arial W01 Rounded Bold',Arial,sans-serif;
	clear: left;
	float: left;
	padding: 18px 20px 0 32px;
	color: black;
}
.formnote label {
	width: 90%;
	padding: 0px 10px 0 16px;
}
.formnote a {
	color: black;
	text-decoration: underline; 
}
.gform_wrapper ul, .gform_wrapper li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.validation_message {
	font-size: 11px;
	color: white;
	margin: 2px 30px 0 0;
	text-align: right;
}
.gfield_required, .validation_error {
	display: none;
}
.gform_wrapper {
	padding: 30px 14px;
	background: #b2ba19;
	border-radius: 26px;
	margin-top:14px;
}
#contactform {
	float: right;
	width: 500px;
}
#contactform > img, #contactform p > img, #contactform p a > img {
	width: 100%;
	max-width: 550px;
}
.ginput_container {
	float: left;
	padding-top:10px;
}
.ginput_container label {
	width: auto;
	float: none;
	padding: 0 6px 0 6px;
}
.gfield_radio li {
	display: inline;
}
.gfield_radio, .ginput_container div.selector {
	margin-top:8px !important;
}



/* ------------------------------------
EVERYTHING ELSE, MISCELLANEOUS STUFF
------------------------------------ */

.alignright {
	clear: right;
	float: right;
	margin: 0px 0px 16px 16px;
}

.alignleft {
	clear: left;
	float: left;
	margin: 0px 16px 16px 0px;
}

.wp-caption-text {
	font-style: italic;
	font-size: 11px;
	line-height: 16px;
	margin-top: 3px;
}

a {-webkit-tap-highlight-color:#ffc88c;}
::-moz-selection{background: #ffc88c; !important}
::selection {background: #ffc88c; !important}



/* ------------------------------------
MEDIA QUERIES
------------------------------------ */

@media screen and (max-width: 959px) {
	header {
		height: auto
	}
	#wrapper {
		background: #fbfbfb;
	}
	#content {
		border-radius: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
		background: none;
	}
	html.ie8 #content {
		border: none;
	}
	#banner {
		display: none;
	}
	#social {
		float: none;
		width: 122px;
		margin: 0 auto;
		padding-right:6px;
	}
	#content_inner_home {
		padding:0 20px;
	}
	.home_col.first {
		width:100%;
		margin-right:0;
	}
	.home_col {
		width:32%;
		margin-right:2%;
	}
	.home_col.last {
		margin-right:0;
	}
	.menu li a {
		font-size: 15px;
		padding:26px 10px 26px 10px;
	}
	.locationinfo {
		float: none;
		width: 100%;
		margin-right:0;
	}
	.locationimage {
		float: left;
		width:40%;
		max-width: 220px;
		margin-right:20px;
	}
	.locationmap {
		float: left;
		max-width: 60%;
		margin-right: 0;
	}
	.ginput_container {
		width: 98%;
	}
	.error404 #content_inner img {
		max-width: 300px
	}
}

@media screen and (max-width: 890px) {
	button, input[type='text'], select, textarea {
		float: none;
		clear: left;
		width:95%;
	}
	label {
		width: 100%;
		padding-left:0;
	}
	#contactform {
		width:350px;
		float:left;
		margin-left:20px;
	}
	.gform_footer {
		text-align: left;
	}
}

@media screen and (max-width: 820px) {
	#footer_social {
		margin-bottom:0;
		width: 250px;
		text-align: left;
	}
	footer p.copyright, a#starfish {
		float: none;
		text-align: left;
	}
	#footer_fb {
		margin-left:0;
	}
}

@media screen and (max-width: 768px) {
	#social a#foursquare {
		display: inline-block;
	}
	.home_col {
		width: 100%;
		margin-right:0;
		float: none;
		clear: left;
	}
	.home_col img {
		clear: left;
		float: left;
		margin:-20px 20px 10px 0;
	}
	.menu li a {
		font-size: 13px;
		padding:26px 6px 6px 10px;
	}
	#contactform {
		width:290px;
		float:left;
		margin-left:20px;
	}
	button, input[type='text'], select, textarea {
		width:90%;
	}
}

@media screen and (max-width: 720px) {
	.menu {
		display: none;
	}
	#mobile_nav {
		display: block;
	}
	.locationimage {
		float: none;
		width:100%;
		margin-right:0;
		max-width: 100%;
	}
	.locationmap {
		float: none;
		max-width: 100%;
	}
	#contactform {
		width:100%;
		clear: both;
		float:none;
		margin-left:0;
		padding: 0;
		border-radius: 0;
	}
	label {
		margin-left:2%;
	}
	button, input[type='text'], select, textarea {
		width:90%;
		margin-left:2%;
	}
	
	.error404 #content_inner {
		text-align: center;
	}
	.error404 #content_inner img {
		float: none;
	}
	.content404 {
		float: none;
		margin-left:0;
	}
	.error404 h1 {
		font-size: 60px;
		line-height: 60px;
	}
}

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

	#content_inner {
		padding:40px 20px 0 20px;
	}
	.error404 #content_inner {
		padding:94px 20px 0 20px;
	}
	.home_col img {
		float: none;
		margin: 0;
	}
}
.menu li a {
    padding: 26px 5px 20px 5px !important;
	font: normal normal 19px/normal 'Arial W01 Rounded Bold',Arial,sans-serif !important;
}

.frutti-banner{min-height: 425px; background-attachment: fixed; background-position: center; background-size: cover;}
.location-div img{max-width:100%;}
.location-div{text-align:center;}
.location-inner{position:relative;}
.location-inner .overlay{text-align:center; position:absolute; top:0; left:0; width:100%; height:97%; background:linear-gradient(to bottom, rgb(244, 129, 38,.5) 0%,rgb(178, 186, 25,.5) 100%);}
.location-inner:hover .overlay{opacity:1;background:rgba(00,00,00,.5);}
.location-inner .overlay h2{color:#fff; margin-top: 70px;} 
.bg-green h1{color:#fff;}
.bg-green p{color:#fff;}
.franchising-contact-form label{width:100%; padding-left: 0;}
.franchising-contact-form label input{width:100%;}
.franchising-contact-form label select{opacity:1 !important; width:100%;}
.frutti-banner-form{background-image:linear-gradient(to bottom, rgb(178, 186, 25,.7) 0%,rgb(244, 129, 38,.7) 100%), url(https://www.tfyogurt-franchise.com.au/wp-content/uploads/image_1394084926.jpg); background-size: cover; background-position: center; background-attachment: fixed;}
.franchising-contact-form{width: 80%; margin: 0 auto;}
.franchising-contact-form p{float:left; width:45%; padding:0 15px;}
.franchising-contact-form label input[type="radio"]{width:auto;}
.franchising-contact-form label textarea{width:100%; height:80px;}
.franchising-contact-form p input[type="submit"]{float:right; margin-top:50px; width: 200px; height: 60px; border-radius: 0; font-size: 18px;}
.wpcf7-response-output{float: left; width: 95%; margin-bottom: 30px !important;}
.slick-slide{height:auto !important;}
.slick-slide img{max-width:100%;}
.location-slider .slick-arrow{display:none !important;}
.location-slider ul.slick-dots{display:none !important;}