/*Not so sexy desktop styles*/
#mobile-header {
	display: none;
	z-index: 500;
	color: #ffffff;
	position: fixed;
	top: 0;
	width: 100%;
}

#mm-toggle {
	position: fixed;
	z-index: 501;
	background: #ec9050;
	border-radius: 2px;
	border: 1px solid #DA7834 !important;
	padding: 5px 5px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0
		rgba(255, 255, 255, 0.05);
}

#mm-toggle.acd {
	padding: 6px 5px 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15), 0 1px 0
		rgba(255, 255, 255, 0.05);
	background: #E08647;
	border: 1px solid #C26C31
}

#mm-toggle img {
	height: auto !important;
	width: auto !important;
	margin: 0 !important;
}

.aboutlink.responsive {
	display: none !important;
	text-align: center !important;
	width: 195px !important;
	left: auto !important;
	position: relative !important;
}

.aboutlink.responsive img {
	width: 100% !important;
	height: auto !important;
}

.m-drop {
	display: none;
	width: 100%;
	background: #ec9050;
	z-index: 100;
	position: fixed;
	padding-top: 46px;
	top: 0;
	padding-left: 0;
	list-style: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.m-drop .serv-d {
	padding-left: 0;
	list-style: none;
	display: none;
	background: rgb(245, 138, 64);
}

.m-drop .acsd {
	padding-bottom: 0 !important;
}

.m-drop .serv-d li:first-child {
	margin-top: 6px;
	border-top: 1px solid #DD8345;
}

.m-drop .serv-d li:last-child {
	border-bottom: none;
}

.m-drop .serv-d li {
	border-bottom: 1px solid #E26F1F;
}

.m-drop li {
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-size: 14px;
	padding: 6px 0;
	border-bottom: 1px solid #DD8345;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.m-drop li:last-child {
	border-bottom: 2px solid #CE773D;
}

.m-drop li:hover {
	background: rgba(255, 255, 255, 0.1);
}

.m-drop li a {
	color: #ffffff;
	font-size: 14px;
	font-family: 'texgyreherosbold';
	text-decoration: none;
	display: block;
}

.m-drop li:hover a {
	color: #FFE6CB;
}

#enquire .resp-title {
	display: none;
}

#about-responsive {
	display: none;
}

#about-responsive .resp-fish {
	vertical-align: top;
}

#about-responsive .resp-fish .title {
	clear: both;
	padding: 4px 10px 5px;
	background: #fcb040;
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
	margin: 10px auto 0;
	border-radius: 2px;
	border: 1px solid #EB9B27;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#about-responsive #ff-team-head {
	margin: 12px auto 4px !important;
	display: block;
}

#about-responsive .resp-fish img {
	display: block;
	margin: 0 auto;
}

#about-responsive .resp-fish img:hover {
	opacity: 0.6;
}

#about-responsive .resp-fish a {
	color: #fcb040 !important;
}

#about-responsive .fish-section {
	padding-bottom: 8px !important;
}

#about-responsive #useless-facts {
	width: 90% !important;
	margin: 20px auto !important;
	display: block;
}

@media only screen and (min-width: 769px) {
	.m-drop {
		display: none !important;
	}
}

/*Sexy tablet styles*/
@media only screen and (max-width: 768px) {
	body {
		width: 100% !important;
		padding-bottom: 0 !important;
	}
	#bottom-wrap {
		position: relative !important;
		margin-top: -10px !important;
	}
	#header {
		display: none !important;
	}
	#mobile-header {
		display: block !important;
		text-align: left;
	}
	#mobile-header img {
		margin: 0 0 0 20px;
		height: 56px;
	}
	#scales {
		height: 110px;
	}
	#header-scales {
		background: transparent url(../images/header-scales.png) repeat-x bottom
			left;
		height: 60px;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 203;
	}
	#home-social {
		display: none;
	}
	#progress {
		display: none;
	}
	#vol {
		display: none;
	}
	#play {
		display: inline-block;
		float: none;
	}
	#mute {
		display: inline-block;
		float: none;
	}
	#controls,#controls p {
		text-align: center;
		padding: 0 !important;
		width: 100% !important;
	}
	#mm-toggle {
		top: 13px;
		right: 20px;
	}
	#header_dropdown {
		display: none !important;
	}
	.hmecnt {
		width: 100% !important;
	}
	.aboutlink {
		display: none !important;
	}
	.hmecnt {
		text-align: center !important;
	}
	.left-icons a img,.right-icons a img {
		width: 80px !important;
		margin: 14px !important;
	}
	.hmecnt:hover .left-icons a,.hmecnt:hover .right-icons a {
		opacity: 0.5 !important;
	}
	.hmecnt p:hover  ~ div a {
		opacity: 1 !important;
	}
	.hmecnt .left-icons a:hover,.hmecnt .right-icons a:hover {
		opacity: 1 !important;
	}
	.right-icons,.left-icons {
		float: none !important;
		display: inline-block !important;
		margin-top: 10px !important;
	}
	.hmecnt p img {
		width: 90% !important;
	}
	.hmecnt p {
		margin-top: 18px !important;
	}
	.wrap {
		width: 100% !important;
	}
	#home-orange {
		height: 448px !important;
	}
	.clients_content img {
		width: 100% !important;
	}
	.wrap .button_right,.wrap .button_left {
		display: none !important;
	}
	.clients_content {
		width: 100% !important;
	}
	#enquiry {
		font-size: 14px !important;
	}
	#enquiry img {
		width: 300px !important;
		height: auto !important;
	}
	.hmecnt a .overlay-home-link1,.hmecnt a .overlay-home-link2,.hmecnt a .overlay-home-link3,.hmecnt a .overlay-home-link4
		{
		display: none !important;
	}
	.aboutlink.responsive {
		display: block !important;
		margin: 0 auto !important;
	}
	#clients {
		height: 100px !important;
	}
	.m-drop {
		width: 100% !important;
	}
	#resp-btn {
		display: inline-block !important;
		vertical-align: top !important;
		color: #282828 !important;
		text-decoration: none !important;
		font-family: 'texgyreherosbold';
		font-size: 14px !important;
		padding-right: 10px;
		margin-top: 9px;
		line-height: 0;
	}

	/*about page*/
	#about {
		display: none !important;
	}
	#about-responsive {
		display: block !important;
		width: 100% !important;
	}
	#about-responsive .top-section img {
		width: 90% !important;
		margin: 0 auto !important;
		display: block !important;
		padding-top: 6px;
	}
	#about-responsive .mid-section {
		padding-top: 14px !important;
	}
	#about-responsive .mid-section img#grill-fish {
		width: 90% !important;
		display: block !important;
		margin: 0 auto !important;
	}
	#about-responsive .mid-section .mid-content {
		padding: 20px 20px 10px !important;
	}
	#about-responsive .mid-section img#rating-bars {
		width: 90% !important;
		display: block !important;
		margin: 0 auto !important;
	}
	#about-responsive .mid-section img#rating-titles {
		width: 90% !important;
		display: block !important;
		margin: 0 auto !important;
	}
	#about-responsive .fish-section {
		text-align: center;
	}
	#about-responsive .resp-fish {
		width: 40% !important;
		margin: 3% !important;
		display: inline-block !important;
		font-size: 13px;
	}

	/*Animation page*/
	.hmecnt .mainform input[type=text] {
		width: 70% !important;
	}
	.hmecnt .mainform textarea {
		width: 70% !important;
	}
	.yellow-resp {
		height: 795px !important;
	}
	.yellow-resp .hmecnt {
		padding-top: 10px !important;
	}
	.yellow-resp .sub-resp {
		font-size: 20px !important;
	}
	.yellow-resp .head-resp {
		font-size: 34px !important;
	}
	.orange-resp {
		height: auto !important;
		padding-bottom: 30px;
	}
	.orange-resp p {
		padding: 12px !important;
		font-size: 14px !important;
		width: auto !important;
		text-align: center !important;
		margin-top: 0 !important;
		float: none !important;
	}
	#anim-white .hmecnt p {
		float: none !important;
		width: auto !important;
		font-size: 14px !important;
		text-align: center !important;
		padding: 12px !important;
	}
	#anim-white {
		height: auto !important;
	}

	/*contact*/
	.launch,#contactform {
		width: 100% !important;
	}
	#contactform textarea {
		width: 450px !important;
	}
	#speech {
		position: absolute;
		top: 1188px !important;
		display: none;
		left: 0 !important;
		right: 0 !important;
		margin: 0 auto;
		text-align: center;
	}
	#contact.launch .submit {
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	/*enquire*/
	.whackafishgame,#whackbutton,#whackfinger {
		display: none !important;
	}
	#enquire {
		width: 100% !important;
	}
	.circle1 img,.circle2 img,.circle3 img,.circle4 img {
		display: none !important;
	}
	ul#projecttypes {
		width: 100% !important;
	}
	ul#projecttypes li a {
		text-decoration: none !important;
	}
	ul#projecttypes li {
		width: 90% !important;
		height: auto !important;
		display: block;
		margin: 0 auto;
		float: none !important;
	}
	ul#projecttypes li h3 {
		display: none !important;
	}
	.circle1,.circle2,.circle3,.circle4 {
		background: #ec9050 !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
		border: 1px solid #C07A39;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
		border-bottom: none;
	}
	.circle1 {
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.circle4 {
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border-bottom: 1px solid #C07A39 !important;
	}
	.circle1.selected,.circle2.selected,.circle3.selected,.circle4.selected
		{
		background: #FAAE7A !important;
		border: 1px solid #CA935F;
		box-shadow: inset 0 1px 0 #AA601B, inset 0 -1px 0 #FFC399;
		border-bottom: none;
	}
	.circle4.selected {
		border-bottom: 1px solid #C07A39 !important;
	}
	.circle1.selected {
		box-shadow: inset 0 1px 0 #E49A55, inset 0 -1px 0 #FFC399;
	}
	#enquire .resp-title {
		display: block !important;
		font-family: 'texgyreherosbold';
		color: #ffffff;
		padding: 18px;
		text-decoration: none !important;
	}
	.enterdetails-topform {
		width: 100% !important;
	}
	.enterdetails-topform input {
		display: block;
		clear: both;
		float: none !important;
		width: 70% !important;
		margin: 0px auto 24px !important;
	}
	h2.enter-your-details {
		margin-bottom: 18px !important;
		margin-top: 20px !important
	}
	.blackboard {
		background-repeat: no-repeat;
		background-image: none;
		width: 90%;
		height: 206px;
		margin: 0 auto;
		position: relative;
		background: #333;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
	}
	.blackboard h3 {
		margin: 0 auto;
		padding-top: 10px;
		text-align: center;
		display: block;
		font-family: 'Varela Round', sans-serif;
		font-size: 24px;
		color: #FFFFFF;
		top: auto !important;
		left: auto !important;
		position: relative !important;
	}
	.blackboard ol {
		position: initial;
		padding: 10px 40px;
	}
	#enterdetailsform .bigtextbox {
		width: 80% !important;
		padding: 5% !important;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.project-deadline .slider {
		width: 60% !important;
	}
	.slider2 {
		width: 60% !important;
		margin-top: 32px !important
	}
	ul.deadline-selection {
		width: 100% !important;
	}
	.deadline-selection li {
		width: 20% !important;
		margin: 30px 2.5% 4px !important;
	}
	.deadline-selection li h4 {
		font-size: 16px !important;
	}
	.deadline-selection li p {
		font-size: 14px !important;
	}
	.project-deadline {
		min-height: 310px !important;
	}
	ul.project-budget {
		width: 100% !important;
		margin-bottom: 105px !important;
	}
	.project-budget li {
		width: 18% !important;
		margin: 30px 1% 10px !important;
	}
	.project-budget li h4 {
		font-size: 16px !important;
	}
	.e-errors {
		width: 100% !important;
	}
	.e-errors img {
		display: block;
		width: 90%;
		margin: 0 auto;
	}
	h2.enter-your-details.error {
		color: #FA4F4F !important;
	}
	.details-errors,.brief-errors {
		margin: -33px auto 27px !important;
	}
}

/*Sexy horizontal phone styles*/
@media only screen and (max-width: 480px) {
	#mobile-header {
		text-align: center;
	}
	#mobile-header img {
		margin: 0 auto;
		height: 44px;
	}
	#scales {
		height: 10px;
		margin-bottom: 58px;
	}
	#header-scales {
		background: transparent url(../images/header-scales.png) repeat-x bottom
			left;
		height: 48px;
	}
	#controls {
		height: 22px !important;
		text-align: center;
		padding: 0;
		border-top: 3px solid #282828;
		position: relative;
		z-index: 4;
	}
	#play {
		width: 20px !important;
		height: 19px !important;
		background-size: 18px 30px !important;
		background-position: center center !important;
	}
	#play.playing {
		width: 20px !important;
		height: 19px !important;
		background-size: 16px 17px !important;
		background-position: center center !important;
	}
	#mute {
		width: 20px !important;
		height: 19px !important;
		background-size: 20px 30px !important;
		background-position: center center !important;
	}
	#mute.muted {
		width: 20px !important;
		height: 19px !important;
		background-size: 17px 17px !important;
		background-position: center center !important;
	}
	#mm-toggle {
		top: 9px;
		right: 7px;
	}
	#mm-toggle img {
		width: 16px !important;
	}
	.m-drop {
		padding-top: 34px !important;
		width: 100% !important;
	}
	#resp-btn {
		display: none !important;
	}
	#about-responsive .mid-section .mid-content {
		text-align: justify !important;
		padding-bottom: 4px !important
	}
	#about-responsive .resp-fish {
		font-size: 11px;
	}
	#about-responsive .resp-fish .resp-desc {
		text-align: justify;
		line-height: 13px;
	}
	.yellow-resp {
		height: 785px !important;
	}
	.yellow-resp .sub-resp {
		font-size: 18px !important;
	}
	.yellow-resp .head-resp {
		font-size: 28px !important;
	}
	#contact .submit {
		font-size: 18px !important;
		width: 112px !important;
	}
	#contact.launch .submit {
		width: 240px !important;
	}
	#enquire .toptitle img {
		width: 90% !important;
	}
	h2.projecttype-title {
		width: 90% !important;
		margin-bottom: 18px;
		background: #fcb040 !important;
		border-radius: 3px;
	}
	h2.enter-your-details {
		width: 90% !important;
		margin-bottom: 20px;
		background: #ffffff !important;
		border-radius: 3px;
		margin-top: 20px !important;
	}
	h2.your-project-brief {
		width: 90% !important;
		margin-bottom: 18px;
		background: #fcb040 !important;
		border-radius: 3px;
		margin-top: 26px !important;
	}
	h2.project-deadline-title {
		width: 90% !important;
		margin-bottom: 20px;
		background: #ffffff !important;
		border-radius: 3px;
		margin-top: 20px !important;
	}
	h2.rough-project-budget {
		width: 90% !important;
		margin-bottom: 18px;
		background: #fcb040 !important;
		border-radius: 3px;
		margin-top: 26px !important;
	}
	.enterdetails-topform input {
		width: 85% !important;
	}
	.enter-details {
		margin-top: 6px !important;
	}
	.blackboard h3 {
		font-size: 16px !important;
	}
	.blackboard ol {
		position: initial !important;
		margin: 0px;
		left: auto !important;
		font-family: 'Varela Round', sans-serif;
		font-size: 13px !important;
		color: #FFFFFF;
		padding: 12px 10px 0 30px;
	}
	.deadline-selection li h4 {
		font-size: 10px !important;
	}
	.deadline-selection li p {
		font-size: 10px !important;
	}
	.project-deadline {
		min-height: 198px !important;
	}
	
	#enquiry > div > p:nth-child(2) {
		width:80%;
		margin:10px auto;
	}
	
	iframe[name=google_conversion_frame] { display:none; }
	
	.facts { width: 100%; }
	
	.facts .values {
		top: 236px;
		font-size: 18px;
		right: 20px;
		line-height: 26px;
	}
	
	#contact.launch .submit {
		width: 312px !important;
		margin-left: -6px;
	}
	
	.project-deadline .slider {
	width: 70% !important;
	}
	
	.slider .ui-slider-handle {
	width: 43px;
	height: 25px;
	top: -8px;
	margin-left: -32px;
	}
	
	.slider2 {
	width: 75% !important;
	}
	
	.slider2 .ui-slider-handle {
	width: 43px;
	height: 25px;
	top: -8px;
	margin-left: -18px;
	}
	
	.nav-previous a {background: url(/images/previous-mobile.png) left no-repeat;height: 31px;}
	.nav-next a {background: url(/images/next-mobile.png) left no-repeat;height: 31px;}
	
}

@media only screen and (max-width: 320px) {
	.facts .values {
		top: 215px;
		font-size: 14px;
		right: 17px;
		line-height: 23px;
	}

	#footer { height: 118px; }
}

@media only screen and (max-width: 487px) {
	#contactform textarea {
		width: 200px !important;
		height: 100px !important;
	}
	#speech {
		top: 825px !important;
	}
}

@media only screen and (max-width: 420px) {
	.yellow-resp {
		height: 825px !important;
	}
	h2.projecttype-title {
		font-size: 18px;
	}
}

@media only screen and (max-width: 370px) {
	.yellow-resp {
		height: 850px !important;
	}
}

/*Sexy snaggy phone styles */
@media only screen and (max-width: 450px) {
	#home-orange {
		/*height: 550px !important;*/
		height: 770px!important;
	}
	#clients {
		height: 80px !important;
	}
}

@media only screen and (max-width: 450px) {
	#home-orange {
		/*height: 550px !important;*/
		height: 770px!important;
	}
	#clients {
		height: 80px !important;
	}
}

/*Sexy vertical phone styles*/
@media only screen and (max-width: 320px) {
	#clients {
		height: 70px !important;
	}
	#about-responsive .resp-fish .title {
		font-size: 10px !important;
	}
}