/*
Theme Name: MyPetArt OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP theme must be installed before activating this custom child theme!
Author: FWUK
Author URI: https://freelanceworks.co.uk/
Template: oceanwp
Text Domain: oceanwp
Version: 1.0
*/

/* SITE WIDE
********************************************************************************************************************************************************** */
html { max-width: 1920px; margin:0 auto; background:#fafafa; }
a, a:hover, a:focus { text-decoration: none; outline: none !important; }
.grecaptcha-badge { display: none; }
.omw-modal.omw-open { transition: all .6s ease-in-out !important; }
.omw-modal .omw-close-modal { top: 4px !important; right: 4px !important;	border-radius: 20px; }

/* HEADER
********************************************************************************************************************************************************** */
#top-bar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.top-bar-right {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 74%;
	margin-left: auto;
}
.fwuk-loggedin-user span { 
	margin-right: 5px;
}
.sidr-class-fwuk-loggedin-user span {
	display: block;
	text-align:center;
}
@media only screen and (max-width:767px) {
	.top-bar-right { margin-left: initial; line-height: 1.2; }
}

#site-navigation-wrap .dropdown-menu > li.btn > a > span {
	background-color: #13a1d5 !important;
}

/* BODY
********************************************************************************************************************************************************** */
.centered-minimal-page-header {
	border-bottom: 1px solid #454545;
}

/* FOOTER
********************************************************************************************************************************************************** */

/* WooCommerce
********************************************************************************************************************************************************** */

/* RESPONSIVE
********************************************************************************************************************************************************** */
@media only screen and (max-width:767px) {

}
@media only screen and (min-width:768px) {

}
@media only screen and (max-width: 959px) {

}
@media only screen and (min-width: 960px) {

}

/* CONTACT FORM 7
********************************************************************************************************************************************************** */
.fwuk-one-half { position: relative; margin-right: 4%; float: left;	width: 48%; margin-bottom: .7em; }
.fwuk-last { margin-right: 0 !important; clear: right; }
@media only screen and (max-width: 767px) { .fwuk-one-half { width: 100%; margin-right: 0; } }
form textarea {	min-height: initial; line-height: 1.5; resize: vertical; }
/*
form p { margin: 0 0 10px !important; }
form input[type="text"], form input[type="email"], form input[type="tel"], form textarea { border-color: #bbb !important; } 

SAMPLE CONTACT FORM
<div class="fwuk-one-half">[text* your-name placeholder "Your Name"]</div>
<div class="fwuk-one-half fwuk-last">[email* your-email placeholder "Contact Email"]</div>
<div class="fwuk-one-half">[tel* your-number placeholder "Contact Tel"]</div>
<div class="fwuk-one-half fwuk-last">[text* your-location placeholder "Town/Location"]</div>
<div>[textarea your-message x3 placeholder "Your Message"]</div>
[submit "SEND"]
*/

/* BUTTON ANIMATIONS
********************************************************************************************************************************************************** */
.fwuk-soh-1 { min-width: 185px; text-align: center; display: inline-block; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
	position: relative; background: #dd3333; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s;  transition-duration: 0.3s;
	padding: 5px 15px; color: #fff; margin: 5px; }
.fwuk-soh-1::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #000;
	-webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform;
	-webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.fwuk-soh-1:hover, .fwuk-soh-1:focus, .fwuk-soh-1:active { color: #fff; }
.fwuk-soh-1:hover::before, .fwuk-soh-1:focus::before, .fwuk-soh-1:active::before { -webkit-transform: scaleX(1); transform: scaleX(1); }

.fwuk-soh-2 { min-width: 245px; text-align: center; display: inline-block; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
	position: relative; background: #229799; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s;  transition-duration: 0.3s;
	padding: 10px 20px; color: #fff; margin: 5px; }
.fwuk-soh-2::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #000;
	-webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform;
	-webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.fwuk-soh-2:hover, .fwuk-soh-2:focus, .fwuk-soh-2:active { color: #fff; }
.fwuk-soh-2:hover::before, .fwuk-soh-2:focus::before, .fwuk-soh-2:active::before { -webkit-transform: scaleX(1); transform: scaleX(1); }

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