/*
Theme Name:     Gail Hodson-Walker
Theme URI:      http://www.gailhodson-walker.com/
Description:    Gail Hodson-Walker WordPress theme.
Author:         CodeThisFor.Me
Author URI:     http://www.codethisfor.me/
Version:        1.0
*/

body {
	color: #999999;
	font: 16px/24px "Mank Sans", sans-serif;
	min-width: 260px;
	overflow-x: hidden;
	width: 100%;
}

.wrapper {
	margin: 0 20px;
	max-width: 960px;
}

/************************************************************

HEADER

************************************************************/

#top {
	background: #FFFFFF;
	z-index: 9900;
	position: static;
	top: 0px;
	width: 100%;
}

header {
	padding-top: 50px;
}

header h1, header h1 a {
	height: 100px;
	width: 100px;
}

header h1 {
	background: url(images/gail-hw.png) 50% 50% no-repeat;
	background-size: cover;
	margin: 0 auto 50px;
}

header h1 a {
	display: block;
	outline: none;
	overflow: hidden;
	text-indent: -9999px;
}

/************************************************************

NAVIGATION

************************************************************/

nav#site-navigation {
	border-top: 1px solid #292943;
	padding: 25px 0;
}

nav#site-navigation ul {
	margin: 0;
	text-align: center;
	text-indent: 0;
}

nav#site-navigation ul li {
	display: inline-block;
	font-size: 17px;
	line-height: 180%;
	margin: 0 0 0 25px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
}

nav#site-navigation li:first-child {
	margin-left: 0;
}

nav#site-navigation ul li a {
	color: #292943;
	text-decoration: none;
	white-space: nowrap;
}

nav#site-navigation ul li a:hover {
	color: #AACCEE;
}

nav#site-navigation .current-menu-item > a,
nav#site-navigation .current-menu-ancestor > a,
nav#site-navigation .current_page_item > a,
nav#site-navigation .current_page_ancestor > a {
	color: #636363;
	font-weight: bold;
}

/************************************************************

FIXED HEADER

************************************************************/

#top.fixed header {
	padding-top: 25px;
}

#top.fixed header h1, #top.fixed header h1 a {
	height: 50px;
	width: 94px;
}

#top.fixed header h1 {
	margin-bottom: 25px;
}

#top.fixed nav#site-navigation {
	padding-bottom: 25px;
}

/************************************************************

FEATURES

************************************************************/

section#featured {
	margin-bottom: 50px;
	margin-top: 50px;
}

section#featured .col {
	margin-bottom: 2%;
}

section#featured .col.end {
	margin-right: 0;
}

section#featured .col a {
	display: block;
	position: relative;
}

section#featured .col img {
	height: auto;
	margin: 0;
	width: 100%;
}

section#featured .col span {
	bottom: 0;
	color: #FFFFFF;
	font-size: 21px;
	left: 0;
	letter-spacing: 1px;
	padding: 25px 10px;
	position: absolute;
	right: 0;
	text-align: center;
	text-transform: uppercase;
	-webkit-transition: all 0.1s linear;
	transition: all 0.1s linear;
	z-index: 10;
}

section#featured .col.col-one span {
	background: #DF8CA8;
	background: rgba(223, 147, 170, 0.7);
}

section#featured .col.col-one a:hover span {
	background: #DF8CA8;
	padding-bottom: 50px;
}

section#featured .col.col-two span {
	background: #E8862D;
	background: rgba(232, 134, 45, 0.7);
}

section#featured .col.col-two a:hover span {
	background: #E8862D;
	padding-bottom: 50px;
}

section#featured .col.col-three span {
	background: #F0AC2B;
	background: rgba(240, 172, 43, 0.7);
}

section#featured .col.col-three a:hover span {
	background: #F0AC2B;
	padding-bottom: 50px;
}

/************************************************************

CONTENT

************************************************************/

.content {
	margin-bottom: 50px;
}

#contact form p{
	margin:0px;
}

.content h1 {
	color: #292943;
	font-family: 'Mank Sans', sans-serif;
	font-size: 28px;
	letter-spacing: 1px;
	line-height: 120%;
	margin: 50px 0;
	text-align: center;
	text-transform: uppercase;
}

.content h2.logo {
	background: url('images/little-mr-mrs.png') 50% 50% no-repeat;
	height: 80px;
	margin: 25px auto 50px;
	outline: none;
	overflow: hidden;
	text-indent: -9999px;
	width: 180px;
}

.content .text p {
	font-size: 19px;
	line-height: 160%;
	margin-bottom: 25px;
}

.content .text p a {
	color: #FFFFFF;
}

#contact.content .left.text p a {
	color: #999999;
}

#contact.content .right.text p.success,
#contact.content .right.text p.error {
	font-family: 'Mank Sans Medium', sans-serif;
}

.wpcf7-spinner{
	position: absolute;
}

.wpcf7-submit{
	width:100% !important;
}

input::placeholder, textarea::placeholder {
	color: white;
	opacity: 1; /* Firefox */
}
  
input::-ms-input-placeholder, textarea::-ms-input-placeholder { /* Edge 12 -18 */
	color: 	white;	;
}

.cf7sr-g-recaptcha iframe{
	margin:0px;
	height:100px;
	/* [_site_admin_email] */
}

.wpcf7 form.sent .wpcf7-response-output{
	background-color:#969635;
    border: 0;
    margin: 0;
	text-align:center;
	padding:5px;
}

.wpcf7 form .wpcf7-response-output{
	background-color:#DF8CA8;
	margin:0px;
	border:red;
	padding:5px;
	/* width:95%; */
}

.content .text p a:hover {
	text-decoration: none;
}

.content .image img {
	height: auto;
	margin: 0;
	width: 100%;
}

.content .left {
	position: relative;
}

.content .left.text {
	padding: 25px;
}

.content .left span.as-seen {
	background: url('images/fabulous-places.png') 50% 50% no-repeat;
	bottom: 25px;
	height: 140px;
	left: 25px;
	outline: none;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	width: 140px;
	z-index: 90;
}

.content .right {
	color: #FFFFFF;
	padding: 25px;
}

.content .right.icon {
	background-image: url('images/icon.png');
	background-position: 100% 100%;
	background-repeat: no-repeat;
	padding-bottom: 75px;
}

.content span.pink { color: #DF8CA8; font-family: 'Mank Medium', sans-serif; }
.content span.green { color: #989238; font-family: 'Mank Medium', sans-serif; }
.content span.blue { color: #73A8CE; font-family: 'Mank Medium', sans-serif; }
.content span.orange { color: #E8862D; font-family: 'Mank Medium', sans-serif; }
.content span.yellow { color: #F0AC2B; font-family: 'Mank Medium', sans-serif; }

.content.pink .right { background-color: #DF8CA8; }
.content.green .right { background-color: #989238; }
.content.blue .right { background-color: #73A8CE; }
.content.orange .right { background-color: #E8862D; }
.content.yellow .right { background-color: #F0AC2B; }

/************************************************************

GALLERY

************************************************************/

#gallery {
	margin-bottom: 25px;
}

#gallery h1 {
	color: #292943;
	font-family: 'Mank Sans', sans-serif;
	font-size: 28px;
	letter-spacing: 1px;
	margin: 50px 0;
	text-align: center;
	text-transform: uppercase;
}

#gallery .gallery-item {
	float: left;
	margin: 0 1% 1% 0;
	width: 24.25%;
}

#gallery .gallery-item.end {
	margin-right: 0;
}

#gallery .gallery-item a {
	background-color: #E8862D;
	display: block;
}

#gallery .gallery-item a img {
	transition: all 0.1s;
}

#gallery .gallery-item a:hover img {
	opacity: 0.55;
}

#shop .gallery-item {
	float: left;
	margin: 0 1% 1% 0;
	width: 24.25%;
}

#shop .gallery-item.end {
	margin-right: 0;
}

#shop .gallery-item a {
	background-color: #DF8CA8;
	display: block;
}

#shop .gallery-item a img {
	transition: all 0.1s;
}

#shop .gallery-item a:hover img {
	opacity: 0.55;
}

/************************************************************

CONTACT FORM

************************************************************/

#contact .left {
	color: #292942;
}

#contact .left a {
	color: inherit !important;
}

#contact form {

}

#contact form .row {
	margin-bottom: 10px;
}

#contact form .row label {
	display: none;
}

#contact form .row input,
#contact form .row textarea {
	background: #f0ac2b;
	border: 1px solid #e3c58d;
	color: #FFFFFF;
	display: block;
	font: 16px/24px "Mank Sans", sans-serif;
	padding: 2.5%;
	width: 95%;
}

#contact form .row input:focus,
#contact form .row textarea:focus {
	border-color: #FFFFFF;
	outline: none;
}

#contact form .row.marmite {
	display: none;
}

#contact form .row.button {
	margin-bottom: 0;
	text-align: right;
}

#contact form .row.button img {
	float: left;
	display: none;
	margin-top: 8px;
}

#contact form .row.button button {
	background: #AACCEE;
	border: 1px solid #AACCEE;
	color: #FFFFFF;
	cursor: pointer;
	font: 21px/24px "Mank Sans", sans-serif;
	padding: 2.5%;
	width: 200px;
}

#contact form .row.button button:hover {
	background: #f1810f;
	border: 1px solid #f1810f;
}

/************************************************************

FOOTER

************************************************************/

footer {
	background-color: #292943;
	clear: both;
	color: #FFFFFF;
	padding: 25px 0;
	text-align: center;
}

footer a {
	color: #FFFFFF;
	text-decoration: none;
	-webkit-transition: all 0.1s linear;
	transition: all 0.1s linear;
}

footer a:hover {
	color: #AACCEE;
}

footer p {
	font-size: 22px;
	line-height: 140%;
	margin-bottom: 25px;
}

footer p.icons {
	text-transform: uppercase;
	padding-right: 30px;
}

footer p.icons a {
	display: inline-block;
	margin-bottom: 10px;
	margin-left: 30px;
}

footer p.icons a:hover span.fa {
	background: #AACCEE;
}

footer p.icons a span.fa {
	background: #FFFFFF;
	border-radius: 100%;
	color: #292943;
	height: 48px;
	line-height: 46px;
	margin-right: 10px;
	padding-top: 2px;
	width: 48px;
	-webkit-transition: all 0.1s linear;
	transition: all 0.1s linear;

}

footer ul {
	border-top: 1px solid #CCDDFF;
	padding-top: 25px;
}

footer ul li {
	font-size: 17px;
	text-align: center;
}

footer ul li:first-child {
	margin-left: 0;
}

footer .social {
	padding: 25px 0;
}

#toTop {
	background: url('images/to-top.png') 0px 0px no-repeat;
	border: none;
	bottom: 20px;
	display: none;
	height: 60px;
	position: fixed;
	overflow: hidden;
	right: 20px;
	text-decoration: none;
	text-indent: -9999px;
	width: 60px;
	z-index: 99999;
}

#toTopHover {
	background: url('images/to-top.png') 0px -70px no-repeat;
	display: block;
	filter: alpha(opacity=0);
	float: left;
	height: 60px;
	-moz-opacity: 0;
	opacity: 0;
	overflow: hidden;
	width: 60px;
}

/************************************************************

MEDIA QUERIES

************************************************************/

@media screen and (min-width: 600px) {
	header h1,
	header h1 a { height: 170px; width: 170px; }
	nav#site-navigation ul li { font-size: 19px; }
	section#featured .col { float: left; margin-bottom: 0; margin-right: 2%; width: 32%; }
	section#featured .col span { font-size: 17px; }
	#contact form .row input,
	#contact form .row textarea { font-size: 21px; }
	footer p.icons { height: 48px; line-height: 48px; padding-right: 30px; }
}

@media screen and (min-width: 768px) {
	.content h1, #gallery h1 { font-size: 36px; }
	.content .left { float: left; position: relative; width: 50%; }
	.content .right { float: right; width: 50%; }
	.content .image img { height: 100%; max-width: none; }
	.content .text p { font-size: 21px; }
	footer ul li { float: left; font-size: 19px; margin-left: 2%; width: 48%; }
	footer ul li.left { text-align: left; }
	footer ul li.center { text-align: center; width: 50%; }
	footer ul li.right { float: right; text-align: right; }
}

@media screen and (min-width: 1024px) {
	.wrapper { margin-left: auto; margin-right: auto; }
	nav#site-navigation ul li { font-size: 21px; margin: 0 0 0 80px; }
	section#featured .col span { font-size: 21px; }
}