/*
Theme Name: Improved Nature by Digital Solutions
Template: jumpstart
Author: Ingrid DiPaula
Description: Our custom work made for Improved Nature.
Version: 1.0
*/

/* ========================= CSS Variables ========================= */

@import url('https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Permanent+Marker|Sriracha&display=swap');

@font-face {
	font-family: 'Ernest and Emily';
	src: url('/wp-content/themes/jumpstart-child/assets/fonts/ernest-and-emily.otf');
}

@font-face {
	font-family: 'proxima-nova';
	src: url('/wp-content/themes/jumpstart-child/assets/fonts/Proxima Nova Regular.otf');
}

:root {
	--color-green: #40693D;
	--color-text: #222;
	--color-orange: #FDB714;
	--color-darkgreen: #4d673b;
	--color-deepblue: #153143;

	--font-ernest-emily: "Ernest and Emily", sans-serif;
	--font-proxima-nova: "proxima-nova", sans-serif;
	--font-sriracha: "Sriracha", cursive;
	--font-covered: "Covered By Your Grace", cursive;
	--font-marker: "Permanent Marker", cursive;

}

/* ========================= Global Styles ========================= */

/* --------------- Body Styles --------------- */

body {
	color: var(--color-text);
	font-family: var(--font-proxima-nova);
	font-size: 20px;
	line-height: 125%;
}

.epic-thumb .epic-thumb-header .entry-title {
	font-family: var(--font-sriracha) !important;
	font-weight: normal;
}


html .btn {
	font-family: var(--font-proxima-nova);
	font-size: 1rem;
	padding: 0.5rem 1rem;
	text-align: center;
	text-transform: uppercase;
}

.btn.transparent {
	background-color: transparent;
	border: white solid 1px;
	color: white;
}

.btn.transparent:hover {
	background-color: white;
	border: white solid 1px;
	color: gray;
}

.btn.transparent.black {
	background-color: transparent;
	border: var(--color-text) solid 1px;
	color: var(--color-text);
}

.btn.transparent.black:hover {
	background-color: var(--color-text);
	border: var(--color-text) solid 1px;
	color: white;
}

.btn.script {
	font-family: var(--font-ernest-emily);
	text-transform: none;
}

.font-ernest-emily {
	font-family: var(--font-ernest-emily) !important;
}

.btn.yellow {
	background-color: var(--color-orange);
	border: #bd892b solid 1px;
}

.btn.yellow.btn-lg {
	font-size: 1.2rem;
	background-color: var(--color-orange);
	border: #bd892b solid 1px;
}

.btn.yellow:hover {
	background-color: #555;
}

.btn.yellow.btn-lg:hover {
	background-color: #555;
}

.btn.green {
	background-color: var(--color-green);
	border: #4d673b solid 1px;
}

.btn.green.btn-lg {
	font-size: 1.2rem;
	background-color: var(--color-green);
	border: #4d673b solid 1px;
}

.btn.green:hover {
	background-color: var(--color-deepblue);
}

.btn.green.btn-lg:hover {
	background-color: var(--color-deepblue);
}

.post_grid .entry-title {
	font-family: var(--font-proxima-nova);
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 400;
}

.post_grid .entry-title a:hover {
	color: var(--color-orange);
}

.post-grid-on-dark a {
	color: var(--color-orange);
}

.post-grid-on-dark a:hover {
	color: #fff;
}

.post-grid-on-light a {
	color: var(--color-deepblue);
}

.post-grid-on-light a:hover {
	color: var(--color-orange);
}


/* --------------- Header Styles --------------- */

header.site-header {
	border-top: var(--color-green) solid;
	border-width: 0.5rem 0 0 0;
	max-width: unset !important;
	width: 100%;
}

header.site-header .header-top {
	display: none;
}

header.site-header .header-content .site-logo.image-logo {
	float: none;
	margin: 0 auto;
	width: 325px;
}

/* ----- Navigation Styles ----- */

header.site-header nav.header-nav li.menu-item .menu-btn {
	font-size: 1.25rem;
	padding: 1rem;
}

header.site-header nav.header-nav ul.tb-primary-menu a.menu-btn {
	border-top: transparent solid 2px;
	color: black;
	font-family: var(--font-proxima-nova);
    font-weight: 500;
}

header.site-header nav.header-nav ul.tb-primary-menu a.menu-btn:hover {
	background-color: transparent;
	border-top: var(--color-orange) solid 2px;
	color: var(--color-green);
}

header.site-header nav.header-nav ul.tb-primary-menu li.current-menu-item a.menu-btn {
	border-top: var(--color-green) solid  2px;
	color: var(--color-green);
}

header.site-header nav.header-nav ul.sub-menu {
	background-color: transparent;
}

header.site-header nav.header-nav ul.sub-menu a.menu-btn {
	background-color: rgba(255, 255, 255, 0.86);
}

header.site-header nav.header-nav ul.sub-menu a.menu-btn:hover {
	background-color: white;
}

/* --------------- Footer Styles --------------- */

footer.site-footer {
	background-image: url('/wp-content/uploads/2019/02/iStock-953010970-2400px.jpg');
	background-position: center center;
	background-size: cover;
	border-top: var(--color-deepblue) solid 1px;
}

footer.site-footer > .wrap {
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

footer.site-footer .tb-mini-post-grid.thumb-small .featured-image {
	height: unset;
	margin: 0;
	padding: 0.25rem;
	width: 33%;
}

#bottom .widget-title {
    background: transparent;
    font-size: 36px;
    font-family: var(--font-ernest-emily);
    color: var(--color-deepblue);
    line-height: 1.1;
    font-weight: 300;
    margin: 0 0 20px 0;
}

/* --------------- Heading Styles --------------- */

h1, h2, h3, h5, h6 {
	font-family: var(--font-proxima-nova);
}
.text-dark h1, .text-dark h2, .text-dark h3, .text-dark h4, .text-dark h5, .text-dark h6 {
	color: var(--color-darkgreen);
}

h1 {
	color: var(--color-text);
	font-size: 2.29rem;
	font-weight: 400;
}

h2 {
	color: #505050;
	font-size: 2.1rem;
	font-weight: 500;
	font-family: var(--font-sriracha);
}

h3 {
	color: #505050;
	font-size: 1.6rem;
	font-weight: 600;
}

h4 {
	color: var(--color-orange);
	font-family: var(--font-ernest-emily);
	font-size: 3rem;
    font-weight: 300;
    letter-spacing: 2px;
}

h5 {
	color: var(--color-text);
	font-size: 1.35rem;
	font-weight: 400;
	text-transform: uppercase;
}

h6 {
	color: var(--color-text);
	font-size: 1.5rem;
	font-weight: 300;
}

/* ========================= Home Page Styles ========================= */

body.home header.site-header {
	background-image: url('/wp-content/uploads/2019/02/iStock-953010970-2400px.jpg');
	background-position: center center;
	background-size: cover;
	border: 0;
}

body.home header.site-header > .wrap {
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.55) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.55) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/*
body.home header.site-header nav.header-nav::after {
	content: "How do we improve nature?";
	display: block;
	font-family: var(--font-ernest-emily);
	font-size: 7rem;
	padding: 3rem 0;
	text-align: center;
}*/

body.home section.hero-main {
/* 	background-image: url('/wp-content/uploads/2019/02/Slider-Tastefully.jpg'); */
	background-image: url('/wp-content/uploads/2019/02/Slider-Tastefully2.jpg');
	background-position: center center;
	background-size: cover;
	padding: 0 !important;
	transition: 0.5s;
}

body.home section.hero-main[active-index='0'] {
/* 	background-image: url('/wp-content/uploads/2019/02/Slider-Tastefully.jpg'); */
	background-image: url('/wp-content/uploads/2019/02/Slider-Tastefully2.jpg');
}

body.home section.hero-main[active-index='1'] {
/* 	background-image: url('/wp-content/uploads/2019/02/Slider-Naturally.jpg'); */
	background-image: url('/wp-content/uploads/2019/02/Naturally3.jpg');

}

body.home section.hero-main[active-index='2'] {
	background-image: url('/wp-content/uploads/2019/02/Slider-Sustainably.jpg');
}

body.home section.hero-main .element-columns {
	max-width: unset !important;
}

body.home section.hero-main .element-columns .col {
	height: 600px;
	padding: 0;
}

body.home section.hero-main .activator {
	cursor: pointer;
	margin: 2rem 0;
	transition: 0.5s;
}

body.home section.hero-main .activator[active] {
	color: var(--color-green);
}

body.home section.why-in h4 a{
	color: var(--color-orange);
}

body.home section.why-in h4 a:hover{
	color: var(--color-deepblue);
}


body.home section.email-sign-up {
    background-image: linear-gradient(#A0B388, #66834e);
}

body.home section.email-sign-up h4 {
	color: #fff;
	line-height: 80%;
}

/* ========================= Product Page Styles ========================= */

body.custom-layout-products section.nutritional-claims .element-jumbotron.script-title h1 {
	line-height: 1.3;
    font-family: var(--font-ernest-emily);
}


/* ========================= Naturally Page Styles ========================= */

body.custom-layout-naturally section.post-grid .entry-title a {
	color: #fff;
    font-family: var(--font-proxima-nova);
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 400;
}

body.custom-layout-naturally section.post-grid .entry-title a:hover {
	color: var(--color-orange);
    font-family: var(--font-proxima-nova);
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 400;
}

body.custom-layout-naturally section.post-grid a {
	color: var(--color-orange);
    font-family: var(--font-proxima-nova);
    font-size: 20px;
    font-weight: 500;
    text-align: right;
}

body.custom-layout-naturally section.post-grid a:hover {
	color: var(--color-deepblue);
    font-family: var(--font-proxima-nova);
    font-size: 20px;
    font-weight: 500;
    text-align: right;
}

/* ========================= News Page Styles ========================= */

.post_list article.post .thumb-wrapper {
	height: unset;
	width: unset;
}

.post_list article.post h2.entry-title {
	color: var(--color-green);
	font-size: 1.66rem;
	font-weight: bold;
}

.post_list article.post {
	border-bottom: var(--color-orange) solid 1px;
}

/* ========================= Recipe Styles ========================= */

/* div.cooked-recipe-directions > div:nth-child(1) > div > p */

/* styling numbered paragraphs */
div.cooked-recipe-directions div.cooked-dir-content p{
	margin-bottom:10px !important;
}

/* styling 'source' */
.cooked-recipe-directions .cooked-heading {
    margin: 0 0 1rem;
    display: block;
    font-weight: 300;
    font-style:italic;
    font-size: 1.00rem;
    line-height: 1.5;
}

/* ========================= Media Query Styles ========================= */

/* --------------- Phone Styles --------------- */
@media(max-width: 768px) {



}

/* --------------- Tablet Styles --------------- */
@media(min-width: 768px) and (max-width: 991px) {



}

/* --------------- Laptop Styles --------------- */
@media(min-width: 991px) and (max-width: 1200px) {



}

/* --------------- Desktop Styles --------------- */
@media(min-width: 1200px) {



}