/*
Theme Name: Dessau Child
Theme URI: http://dessau.select-themes.com
Description: A child theme of Dessau Theme. This child theme was carefully developed to be best suited for the design blog layout necessary for The Dreamhouse Project and customized with TDP brand colours  fonts.
Author: Natasha Washington
Author URI: http://thedreamhouseproject.ca
Version: 1.0.0
Text Domain: dessau
Template: dessau
*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
	--------------------------------------------------------------*/
/*--------------------------------------------------------------


# Colour Variables
--------------------------------------------------------------*/

:root {
	--primary-color: #0c757c; /* turquoise */
	--secondary-color: #addfe4; /* light turquoise */
	--accent-color: #a92259; /* fuscia */
	--neutral-color: #717e94; /* dark grey */
	--secondary-neutral-color: #eef2f5; /* light grey */
}

/*--------------------------------------------------------------
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: var(--primary-color);
	color: var(--secondary-neutral-color);
	border-radius: 4px;
	border: none;
	height: 50px;
	padding: 10px 20px;
	text-transform: uppercase;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--secondary-neutral-color);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);	
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background: var(--secondary-color);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	border: 1px solid var(--primary-color);
	background: var(--secondary-neutral-color);
	height: 50px;
	padding: 5px 15px;
	color: var(--neutral-color); 
	font-size: 14px;
}

textarea {
	height: 100px;
}

.search-form input[type="submit"] {
	width: inherit;
	padding: 10px 20px;
	display: block;
	margin: 5px auto;
	border: none;
}

.mc4wp-form-fields input[type="text"],
.mc4wp-form-fields input[type="email"] {
	display: inline-block;
	margin: 5px auto;
	width: 49%;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: var(--neutral-color);
}
::-moz-placeholder { /* Firefox 19+ */
	color: var(--neutral-color);
}
:-ms-input-placeholder { /* IE 10+ */
	color: var(--neutral-color);
}
:-moz-placeholder { /* Firefox 18- */
	color: var(--neutral-color);
}


/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
#qodef-back-to-top>span {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	color: var(--secondary-neutral-color);
	border-radius: 4px;
	height: 50px;
	padding: 10px 20px;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--secondary-neutral-color);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background: var(--secondary-color);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	border: 1px solid var(--primary-color);
	background: var(--secondary-neutral-color);
	height: 50px;
	padding: 5px 15px;
	color: var(--neutral-color); 
	font-size: 14px;
}

textarea {
	height: 100px;
}

.search-form input[type="submit"] {
	width: inherit;
	padding: 10px 20px;
	display: block;
	margin: 5px auto;
	border: none;
}

.mc4wp-form-fields input[type="text"],
.mc4wp-form-fields input[type="email"] {
	display: inline-block;
	margin: 5px auto;
	width: 49%;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: var(--neutral-color);
}
::-moz-placeholder { /* Firefox 19+ */
	color: var(--neutral-color);
}
:-ms-input-placeholder { /* IE 10+ */
	color: var(--neutral-color);
}
:-moz-placeholder { /* Firefox 18- */
	color: var(--neutral-color);
}