/*
Theme Name: Fixtail
Theme URI: https://fixtail.com/
Version: 2.0
Description: A WordPress theme for Fixtail (marketing site)
Author: Paul Jarvis
Author URI: https://fixtail.com
Details URI: https://fixtail.com
License: Fixtail only. SERIOUSLY.
Text Domain: fix
Tags: white


black			#2c2d2e	
text			#7c7e80
grey			#a2a5a8
light			#edeff0

teal			#00cca5
blue			#147ef2 
yellow		#ffbb04
purple		#7156e5


48, 108, 168, 228, 288, 348, 408, 468, 528, 588, 648, 708, 768, 828, 888, 948, 1008, 1068, 1128, 1188, 1248, 1308, 1368


font sizes 	112 56 45 34 24 20 18 16 14 12
font face: "acumin-pro" 400, 600, 700

*/










/* reset, yo */
a,hr{padding:0}a,button,input,select,textarea{margin:0}article,aside,details,figure,footer,header,hr,main,nav,section,summary{display:block}abbr,address,article,aside,audio,b,blockquote,body,body div,caption,cite,code,dd,del,details,dfn,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:0 0}input[type=checkbox],th{vertical-align:bottom}html{box-sizing:border-box;overflow-y:scroll}*,:after,:before{box-sizing:inherit}embed,img,object{max-width:100%}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{font-size:100%;vertical-align:baseline;background:0 0}del{text-decoration:line-through}abbr[title],dfn[title]{}td{vertical-align:top}input,select{vertical-align:middle}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}input[type=radio]{vertical-align:text-bottom}.ie7 input[type=checkbox]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}table{border-collapse:separate;border-spacing:0;font:100%}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=file],input[type=submit],label{cursor:pointer}button,input[type=button]{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:after{content:" ";display:block;clear:both}










/* = html5 ----------------------- */

::-moz-selection { background: #edeff0; text-shadow: none; }
::selection { background: #edeff0; text-shadow: none; }

::-webkit-input-placeholder { color: #a2a5a8; padding-top: 4px; }
::-moz-placeholder { color: #a2a5a8; } 
:-ms-input-placeholder { color: #a2a5a8; }
input:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; }

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

.wf-loading * { visibility: hidden; }


.friend { background: #ffedbc; border-radius: 2px; padding: 4px 8px; margin-bottom: 20px; color: #2c2d2e; display: inline-block; }

.white-popup { position: relative; background: #fff; padding: 24px; width:auto; max-width: 468px; margin: 24px auto; font-size: 16px; }





/* = structure ------------------- */

html, body { min-height: 100%; height: 100%; font: 400 16px/1.5 "acumin-pro", sans-serif; color: #2c2d2e; }
	body { background: #fff url("/wp-content/themes/fixtail/assets/fixtail-background.png") top center repeat-y; background-size: 100% auto; }

section { clear: both; float: none; display: block; position: relative; width: 100%; text-align: center; }

	.wrap { text-align: left; margin: 0 auto; padding: 12px; }


	#footer { background: #2c2d2e; color: #fff; }
	#soon-section { max-width: 408px; margin: 0 auto; }







/* = navigation ------------------ */

.logo { text-align: center; display: block; }
	.logo a { background: url("/wp-content/themes/fixtail/assets/fixtail.gif") left center no-repeat; padding-left: 48px; background-size: 46px auto; color: #00cca5; font-weight: 400; display: inline-block; }

.menu { font-size: 14px; display: block; text-align: center; margin: 16px auto; }
	.menu li { display: inline-block; }
	.menu li a { padding: 8px; font-weight: 600; transition: ease .4s all; }
		
	#header .menu a { color: #2c2d2e; margin-left: 4px; }
	#footer .menu a { color: #fff; }
	#footer .menu { margin-left: -4px; }
	#header .menu li a:hover, #footer .menu li a:hover { color: #00cca5; }

/* .home .menu-item-12, .home .menu-item-17, .home .menu-item-46, .home .menu-item-47 { display: none; } */







/* = typography ------------------ */

h1, h2, h3, h4 { font-weight: 600; line-height: 1; margin-bottom: 20px; font-size: 20px; }

h2 span { display: block; text-transform: uppercase; font-size: 14px; letter-spacing: 0 !important; color: #7c7e80; font-weight: 400; margin-bottom: 16px; }
h2 div { display: inline-block; font-size: 14px; letter-spacing: 0 !important; color: #7c7e80; font-weight: 400; }
h2 a { color: #147ef2; }

#articles h3 { font-weight: 600; font-size: 24px; margin-top: 40px; }

p, ul, ol { margin-bottom: 20px; }
	li {}
	#faq p  { font-size: 16px; }
	#articles ul, #articles ol { margin-left: 20px; }
	#articles ul li { list-style: circle; margin-bottom: 8px; }
	#articles ol li { list-style: decimal; margin-bottom: 8px; }
	
blockquote {}
	cite {}
	
a { text-decoration: none; }
a:hover {}

	#articles a { color: #00cca5; }

strong, b { font-weight: 600; }
em, i {}

small { color: #7c7e80; font-size: 14px; display: block; }
	.article small a, .white-popup small a { color: #7c7e80; border-bottom: 1px solid #7c7e80; }
	.white-popup small { margin-top: 24px; }
	#footer small { width: 100%; float: left; margin-top: 40px; }

img {}
	.feature img { height: auto; width: 100%; max-width: 1450px; z-index: 1; border-radius: 8px; }

hr { border: none; outline: none; width: 40px; height: 2px; display: block; background: #7c7e80; margin: 40px 0; }









/* = forms ---------------------- */

form { }

label {}

input, select, textarea, button, .button { font: 500 16px/1 "acumin-pro", sans-serif; vertical-align: middle; border: none; outline: none; box-shadow: none; box-sizing: border-box; cursor: pointer; }

.button { border-radius: 4px; padding: 12px 16px; font-size: 16px; font-weight: 600; color: #fff; display: inline-block; transition: ease .4s all; }
	.main { border: 2px solid #00cca5; background: #00cca5; color: #fff; }
	.alt { border: 2px solid #7c7e80; background: #fff; color: #7c7e80; }
	.button.blue { border: 2px solid #147ef2; }
	.button.dark { border: 2px solid #2c2d2e; }

.newsletter { margin-bottom: 40px; }
	#articles .newsletter { max-width: 408px; }
	#articles .newsletter form, #hero .newsletter .form, .white-popup form { background: #fff; }
	#articles .newsletter input, #hero .newsletter input, #soon-section .newsletter input, .white-popup input { color: #2c2d2e !important; }
	.newsletter form, .white-popup form { border: 2px solid #00cca5; border-radius: 4px; float: right; width: 100%; }
	.newsletter input, .white-popup input { background: none; padding: 8px 16px; width: 100%; text-align: center; color: #fff; }
	.newsletter button, .white-popup button { background: #00cca5; padding: 12px 16px; font-weight: 600; color: #fff; width: 100%; }
	.mc4wp-success p { padding: 16px; font-size: 14px; margin: 0; color: #00cca5; font-weight: 600; }
	
.button:hover { transform: scale(1.02); }
.button:active { transform: scale(0.96); }





/* = common ---------------------- */

.outcome { color: #fff; border-radius: 8px; padding: 24px; margin-bottom: 16px; }
	.teal { background: #00cca5; }
	.blue { background: #147ef2; }
	.purple { background: #7156e5; }
	.dark { background: #2c2d2e; }

.plans { font-size: 16px; margin-top: 40px; }
	.plan { border-radius: 8px; padding: 20px; margin-bottom: 20px; background: #fff; }
	.solo { border: 2px solid #147ef2; }
	.pro { border: 2px solid #00cca5; }
	.enterprise { border: 2px solid #2c2d2e; }
	.plan .button-wrap { margin-top: 32px; }

	.solo h2 { color: #147ef2; }
	.pro h2 { color: #00cca5; }
	.enterprise h2 { }

.icon { text-indent: -9999px; width: 20px; height: 16px; display: inline-block; margin: 0 16px 16px 0; }
	.twitter { background: url("/wp-content/themes/fixtail/assets/icon-twitter.png") center center no-repeat; background-size: auto 100%; }
	.youtube { background: url("/wp-content/themes/fixtail/assets/icon-youtube.png") center center no-repeat; background-size: auto 100%; }


.tabs li { border-radius: 8px; padding: 20px; margin-bottom: 4px; font-size: 16px; }
	.tabs li a { color: #2c2d2e; }
	.tabs li a strong { display: block; }
	#one a strong { color: #147ef2}
	#two a strong { color: #00cca5; }
	#three a strong { color: #7156e5; }
.tabs li.active { background: #f6f7f7; }


.fx { max-width: 40px; margin: 40px 0; }

.article, .top-meta { margin-bottom: 40px; display: block; }


.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

.mfp-close { display: none !important; }




/* = queries ---------------------- */


@media (min-width: 948px) {
	body { font-size: 20px; }
	.wrap { margin: 20px auto; max-width: 948px; }
	.logo { float: left; }
	.menu { font-size: 16px; margin: 0; }
	
	#footer .menu { float: left; }
	#footer .newsletter { float: right; width: 348px; }
	#header .menu { float: right; margin-top: 2px; }
	#header .menu .menu-item-47 a { border: 2px solid #00cca5; border-radius: 4px; color: #00cca5; padding: 8px 16px; transition: ease .4s all; }
	#header .menu .menu-item-46 a { border: 2px solid #00cca5; background: #00cca5; color: #fff; border-radius: 4px; padding: 8px 16px; }

	#header .menu .menu-item-47:hover, #header .menu .menu-item-46:hover { transform: scale(1.02); }
	#header .menu .menu-item-46 a:hover { color: #fff; }
	#header .menu .menu-item-47:active, #header .menu .menu-item-46:active { transform: scale(0.96); }


	#hero .content { max-width: 550px; padding: 80px 0; }	
	#hero .wrap { background: url("/wp-content/themes/fixtail/assets/fixtail-phone.png") right center no-repeat; background-size: auto 100%; }
	
	.outcome, .plan { padding: 80px 48px; }
	.split { width: 454px; float: left; margin-right: 16px; }
	.end { margin: 160px 0 0 0; }
	#faq .end { margin: 0; }
	#faq p { margin-right: 20px; }

	.more { float: left; width: 648px; }
	.perfect { float: right; width: 230px; margin-top: 40px; font-size: 16px; }
	.plans { float: left; display: block; }
		.plan { float: left; width: 292px; margin-right: 16px; max-height: 470px; }
		.plans .end { margin-right: 0; }

	.newsletter input, .white-popup input { width: auto; text-align: left; float: left; }
	.newsletter button, .white-popup button { width: auto; float: right; }

	.tabs { float: left; width: 330px; margin-top: 24px; }
	.screens { float: right; width: 594px; }
	.tabs li { border-radius: 8px 0 0 8px; font-size: 14px; }

	.fx { float: right; margin-top: -32px; }

	#articles .wrap { max-width: 948px; margin: 160px auto; }
	.single #articles .article { margin: -300px auto 160px auto; background: #fff; border-radius: 4px; z-index: 1001; padding: 80px; position: relative; }
	h1, h2 { font-size: 34px; letter-spacing: -0.02em; }
	h3 { font-size: 34px; font-weight: 500; }
	h4 { font-size: 20px; }

}



@media (min-width: 1188px) {
	.wrap { max-width: 1110px; margin: 80px auto; padding: 0; }

	#header .wrap { margin: 40px auto; }
	#hero .content { margin-left: 80px; }
	#hero .content { margin-left: 80px; max-width: 550px; padding: 80px 0; }
.article { margin-bottom: 80px; }

	.split { width: 546px; }
		.more, .plans { margin-left: 80px; }
		.perfect { margin-right: 80px; }

	.tabs { width: 430px; margin-top: 60px; }
	.screens { width: 680px; }
	.tabs li { font-size: 16px; }

	h1, h2 { font-size: 45px; letter-spacing: -0.02em; }
}



@media (min-width: 1450px) {
	body { background-size: 1450px auto; }
}



@media (min-width: 1908px) {
}