/*
Theme Name:     Matchbook Child Theme for Divi
Author:         Matchbook Media
Author URI:     http://www.matchbook.media
Template:       Divi
Version:        1.1.0
*/

/* * * * * * * * * * * * * *
  CSS DIRECTORY
	- ROOT VARIABLES
	- EM SIZING RULES
	- FONTS
	- GLOBAL
* * * * * * * * * * * * * * */

/* * * * * * * * * * * * * *
  DIVI BREAKPOINTS	
	- mobile-s: 480px;
	- mobile-m: 600px;
	- mobile:   782px;
	- tablet:   981px;
	- laptop:   1350px;
	- laptop-l: 1405px;
* * * * * * * * * * * * * * */

/* * * * * * * * * * * * * */
/*  ROOT VARIABLES         */
/* * * * * * * * * * * * * */
/* Edit the values - not the names. */
:root {
	--color-primary                : #387c9e;
	--color-primary-dark           : #14141c;
	--color-primary-light          : #f3f3f3;
	--color-primary-text           : #14141c;
	--color-primary-text-light     : #f3f3f3;
	--color-secondary              : #00b3ff;
	--color-secondary-text         : #00b3ff;
	--border-radius-primary        : 0em;
	--border-radius-secondary      : 0.25em;
	--font-family-heading          : 'Roboto', sans-serif;
	--font-family-sub-heading      : 'Roboto', sans-serif;
	--font-family-paragraph        : 'Roboto', sans-serif;
	--font-size-heading            : 3.5em;
	--font-size-sub-heading        : 2em;
	--font-size-paragraph          : 1.2em;
	--padding-primary              : 1em;
	--padding-secondary            : 0.5em;
	--row-max-width                : none;
	--button-background-color      : var(--color-secondary);
	--button-border-color          : var(--button-background-color);
	--button-text-color            : var(--color-primary-text-light);
	--button-text-color-hover      : var(--color-primary-text);
	--button-background-color-hover: var(--color-primary-light);
	--button-border-color-hover    : var(--button-background-color-hover);
}

/* * * * * * * * * * * * * */
/*  EM SIZING RULES        */
/* * * * * * * * * * * * * */
/* Don't edit these values. */
@media (min-width: 1351px) {
	body {
		font-size: .7vw;
	}
}
@media (max-width: 1350px) {
	body {
		font-size: .9vw;
	}
}
@media (max-width: 981px) {
    body {
		font-size: 1.2vw;
	}
}
@media (max-width: 782px) {
	body {
		font-size: 1.5vw;
	}
}
@media (max-width: 615px) {
	body {
		font-size: 2vw;
	}
}
@media (max-width: 500px) {
	body {
		font-size: 2.5vw;
	}
}
@media (max-width: 380px) {
	body {
		font-size: 3.3vw;
	}
}

/* * * * * * * * * * * * * */
/*  FONTS                  */
/* * * * * * * * * * * * * */
/* Add all the fonts you want here. */
@font-face {
	font-family: 'Roboto';
	src: url('./fonts/roboto.woff2') format('woff2'),
		 url('./fonts/roboto.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url('./fonts/roboto-bold.woff2') format('woff2'),
		 url('./fonts/roboto-bold.woff') format('woff');
	font-weight: 700;
	font-style: bold;
}

/* * * * * * * * * * * * * */
/*  GLOBAL                 */
/* * * * * * * * * * * * * */
/* You shouldn't have to edit this. If you do, use a variable and add it in ROOT VARIABLES. */
/* HTML ELEMENTS / DIVI ELEMENTS */
h1 {
	color: var(--color-primary-text);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading);
}
h2 {
	color: var(--color-primary-text);
	font-family: var(--font-family-sub-heading);
	font-size: var(--font-size-sub-heading);
}
h3 {
	color: var(--color-primary-text);
	font-family: var(--font-family-sub-heading);
	font-size: var(--font-size-sub-heading);
}
h4 {
	color: var(--color-primary-text);
	font-family: var(--font-family-sub-heading);
	font-size: var(--font-family-sub-heading);
}
span,
p,
.et_pb_text_inner {
	color: var(--color-primary-text);
	font-family: var(--font-family-paragraph);
	font-size: var(--font-size-paragraph);
}
a,
.woocommerce a {
	color: var(--color-secondary);
}
.et_pb_row {
    max-width: var(--row-max-width);
}
.et_pb_button,
.woocommerce button.woocommerce-button.button,
.et-db #et-boc .et-l .et_pb_button,
.single_add_to_cart_button{
	background-color: var(--button-background-color);
	color: var(--button-text-color);
	border-color: var(--button-border-color);
	font-size: var(--font-size-paragraph);
	font-family: var(--font-family-paragraph);
	padding: var(--padding-secondary) var(--padding-primary);
	border-radius: var(--border-radius-secondary);
}
.et_pb_module .et_pb_button:hover,
.woocommerce button.woocommerce-button.button:hover,
.et-db #et-boc .et-l .et_pb_button:hover,
.single_add_to_cart_button:hover {
	background-color: var(--button-background-color-hover);
	color: var(--button-text-color-hover);
	border-color: var(--button-border-color-hover);
	font-size: var(--font-size-paragraph);
	font-family: var(--font-family-paragraph);
	padding: var(--padding-secondary) var(--padding-primary);
	border-radius: var(--border-radius-secondary);
}
.et_pb_button:after{
	font-size: var(--font-size-paragraph);	
}
/* DIVI HEADER FIX */
#top-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    float: none;
}
#top-menu li {
	padding-right: var(--font-size-paragraph);
	font-size: var(--font-size-paragraph);
}
#mobile_menu li a {
	font-size: var(--font-size-paragraph);
}
@media (max-width: 980px) {
	#top-menu {
		display: none;
	}
}