/* TYPOGRAPHY
-------------------------------------------------------------------------------*/
body {
	font-size: 16px;
	line-height: 1.625em;
}
@media screen and (max-width: 800px) {
	body {
		font-size: 0.875rem;
		line-height: 1.375rem;
	}
}
body, select, input, textarea, h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
body, select, input, textarea, ol p {
	color: #74757C;
}
h1 {
	font-size: 1.50em;
	font-weight: 700;
	line-height: 1.35em;
	color: #00CED6;
	text-transform: uppercase;
}
h2 {
	font-weight: 600;
	font-size: 1.375em;
	line-height: 1.35em;
	margin-bottom: .35em;
}
h3 {
	font-size: 1em;
	line-height: 1.625em;
	margin-bottom: 1em;
	text-transform: uppercase;
	color: #613F96;
}
p {
	margin-bottom: 2em;
}
th {
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: .85em;
	color: #939393;
}
td {
	border-top: 1px solid #B2B2B2;
}
ol li,
ol h3 {
	color: #00CED6;
	font-weight: 700;
	font-size: 1.35rem;
}
ol h3 {
	margin-top: 0;
	margin-bottom: .25em;
	line-height: 1.5rem;
}
ol p {
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5rem;
}
@media (min-width: 48em) {
	ol li {
		padding-right: 3rem !important;
	}
}


/* LINKS
-------------------------------------------------------------------------------*/
a {
	color: #7645C3;
	text-decoration: none;
}
a:hover {
	color: #7645C3;
	text-decoration: underline;
}
::-moz-selection {
	background: #F6E898;
	color: #fff;
	text-shadow: none;
}
::selection {
	background: #F6E898;
	color: #fff;
	text-shadow: none;
}
a:link {
	-webkit-tap-highlight-color: #F6E898;
}
.arrow {
	background-color: #F6E898;
	padding: .5em .5em .5em 1em;
	color: #EA8A0A;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-top: 1em;
	display: inline-block;
	position: relative;
}
.arrow:hover {
	color: #F9A21C;
	text-shadow: 0 1px 0 rgba(256,256,256,.5);
	text-decoration: none;
}
.arrow:before {
	bottom: 100%;
	left: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #F9A21C;
	border-width: 0 0 15px 30px;
	margin-left: -0px;
}
.arrow:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: auto;
	border-left-color: #F6E898;
	border-width: 20px 20px 20px 15px;
	margin-top: -20px;
}


/* STRUCTURE
-------------------------------------------------------------------------------*/
body {
	background-color: #201757;
}
.content {
	padding: 60px 0;
	background-color: #FFFFFF;
}
.page-template-page-tips-php .content,
.page-template-page-checklist-php .content {
	padding-top: 160px;
}
.section {
	background: #F5F5F5;
	padding: 2em 0;
}


/* HEADER
-------------------------------------------------------------------------------*/
.header {
	height: 80px;
	background: #1F1A55;
}
.logo {
	float: left;
	width: 230px;
	height: 70px;
	padding: 4px 0;
}

.header ul,
.header li {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.header ul {
	padding-left: 0;
}
.menu-primary-container {
	float: right;
	height: 80px;
	line-height: 80px;
	text-align: right;
	overflow: hidden;
}
.menu-primary-container li {
	display: inline-block;
	margin: 0 .65em;
}
.menu-primary-container a {
	color: #613F96;
	font-size: 1.313em;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .02em;
}
.menu-primary-container a:hover {
	color: #00CED6;
}
.menu-primary-container .current-menu-item a,
.menu-primary-container .current-menu-ancestor a {
	color: #F6E898;
}
.menu-primary-container .sub-menu {
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 80px;
	background-color: #F6E898;
	text-align: center;
}
.menu-primary-container .sub-menu a {
	display: inline-block;
	color: #F9A11C;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 1.188em;
}
.menu-primary-container .sub-menu a:hover {
	color: #F38413;
}
.menu-primary-container .sub-menu .current-menu-item{
	position: relative;
}
.menu-primary-container .sub-menu .current-menu-item:after {
	bottom: 0;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: auto;
	border-color: transparent transparent #ffffff transparent;
	border-width: 0 10px 10px 10px;
	margin-left: -10px;
}
.menu-primary-container .current-menu-ancestor .sub-menu {
	display: block;
}
@media screen and (max-width: 800px) and (min-width: 600px) {
	.logo {
		width: 160px !important;
		margin: 10px auto !important;
	}
	.menu-primary-container {
		font-size: .9em;
	}
}
@media screen and (max-width: 600px) {
	.header {
		overflow: visible;
		height: auto !important;
	}
	.logo {
		float: none;
		display: block;
		width: 230px !important;
		margin: 0 auto !important;
	}
	.logo img {
		margin-left: 10px;
	}
	.menu-primary-container {
		float: none;
		height: auto;
		width: 100%;
		clear: both;
		text-align: center;
		font-size: .85em;
	}
	.menu-primary-container .sub-menu {
		top: 150px;
	}
}


/* HERO
-------------------------------------------------------------------------------*/
.hero {
	height: 300px;
	color: #00CED6;
	background: #201a55; /* Old browsers */
	background: -moz-linear-gradient(top,  #201a55 41%, #312566 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,#201a55), color-stop(100%,#312566)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #201a55 41%,#312566 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #201a55 41%,#312566 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #201a55 41%,#312566 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #201a55 41%,#312566 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#201a55', endColorstr='#312566',GradientType=0 ); /* IE6-9 */
}
.hero .post {
	height: 300px;
	background-image: url('../_img/illustration-hero.png');
	background-size: 52%;
	background-repeat: no-repeat;
	background-position: right 15px;
	overflow: hidden;
}
.hero h1 {
	float: left;
	font-size: 2.5em;
	margin-top: 1em;
}
.hero p {
	clear: both;
	float: left;
	width: 47%;
}
.hero strong {
	color: #fff;
}
.home .content h2 {
    font-size: 1.50em;
    font-weight: 700;
    line-height: 1.35em;
    color: #00CED6;
    text-transform: uppercase;
}
.home .section h3 {
	font-weight: 800;
	margin-bottom: 0;
}
@media screen and (max-width: 600px) {
	.home .entry {
		margin-bottom: 0;
	}
	.hero {
		height: inherit !important;
	}
	.hero .post {
		height: inherit !important;
		background-position: 50% top;
		background-size: 85%;
		padding-top: 50%;
	}
}


/* TIPS
-------------------------------------------------------------------------------*/
.tips .col:nth-child(odd) {
	clear: both;
}


/* CHECKLIST
-------------------------------------------------------------------------------*/
.item {
	background-color: #F5F5F5;
	margin-bottom: 1.5em;
	padding: 1em;
}
.item p {
	margin-bottom: 1em;
}
.products {
	line-height: 1.15em;
}
.product-rec {
	text-align: left;
}
.product-price {
	text-align: right;
}
@media only screen and (max-width: 739px) {
	.item-description {
		padding: 0;
	}
}


/* SHOWCASE
-------------------------------------------------------------------------------*/
.post {
	margin-bottom: 2em;
	padding-bottom: 2em;
	clear: both !important;
}
.entry {
	width: 55%;
	float: left;
	margin-bottom: 50px;
}
.wp-post-image {
	width: 40%;
	float: right;
	border: 1em solid #F5F5F5;
	margin-bottom: 50px;
}
.section .wp-post-image {
	border-color: #fff;
}
@media screen and (max-width: 600px) {
	.attachment-post-thumbnail {
		margin-bottom: 1em;
	}
}


/* PAGINATION
-------------------------------------------------------------------------------*/
.pagination {
	clear: both;
	text-align: center;
	background-color: #FFFFFF;
	padding: 1em 0 0 0;
}
.pagination a:hover {
	text-decoration: none;
}
.pagination	.page-numbers {
	display: inline-block;
	padding: .25em .5em;
	border-radius: 3px;
	border: 1px solid #F5F2EC;
}
.pagination	.page-numbers:hover {
	background-color: #F6E898;
	border: 1px solid #F6E898;
}
.pagination .dots,
.pagination .dots:hover,
.pagination .current,
.pagination .current:hover {
	background-color: #FFFFFF;
	border: 1px solid #F5F2EC;
}
.pagination .dots,
.pagination .dots:hover {
	color: #CCCCCC;
}
.pagination .current {
	color: #444444;
}


/* ABOUT
-------------------------------------------------------------------------------*/
.bar {
	background: #F5F5F5;
	position: relative;
}
.bar .container {
	position: relative;
}
.bar h1 {
	padding: 2em 0;
	margin: 0;
}
.bar .arrow {
	position: absolute;
	top: 23%;
	right: 1%;
}
.colophon {
	width: 55%;
	float: left;
}
.creators {
	width: 40%;
	float: right;
}
.creator {
	margin-top: 1em;
	font-size: 1.125em;
}
.creator p {
	margin-top: 1.125em;
}
.avatar {
	width: 100px;
	float: left;
	margin-right: 7%;
	border: .35em solid #F5F5F5;
}
@media screen and (max-width: 600px) {
	img.avatar {
		width: 100px;
		float: left;
		margin-right: 15px;
	}
}


/* FOOTER
-------------------------------------------------------------------------------*/
.footer {
	clear: both;
	height: 70px;
	text-align: center;
	color: #fff;
	line-height: 69px;
	background-color: #1F1A55;
	background-image: url('../_img/bg-block.svg');
	background-position: top center;
	background-size: 70px 70px;
}
.footer a {
	color: #F6E898;
	text-decoration: none;
}