/*
Theme Name: Rugged 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.1
*/

/* 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; }

/* HEADER
********************************************************************************************************************************************************** */

/* BODY
********************************************************************************************************************************************************** */

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

/* HTML CONTENT
********************************************************************************************************************************************************** */
.logo {
	font-size: 10vw;
	display: flex;
	align-items: center;
	white-space: nowrap;
	
	position: relative;
}
.rugged {
	font-weight: 400;
	margin-right: 0.1rem;
	color: #1a1a1a;
	display: inline-block;
	animation: ruggedVibrate 0.5s ease 1.8s 1;
}
.demand {
	font-weight: 400;
	color: #e4461c;
	position: relative;
	animation: demandSlide 1.8s ease-out forwards;
}
.logo2 {
	font-size: 10vw;
	display: flex;
	align-items: center;
	white-space: nowrap;
	
	position: relative;
}
.rugged2 {
	font-weight: 400;
	margin-right: 0.1rem;
	color: #1a1a1a;
	display: inline-block;
	animation: ruggedVibrate 0.5s ease 1.8s 1;
}
.demand2 {
	font-weight: 400;
	color: #e4461c;
	position: relative;
	animation: demandSlide 1.8s ease-out forwards;
}


@keyframes demandSlide {
	0% { transform: translateX(800px); opacity: 0; }
	100% { transform: translateX(-0.1rem); opacity: 1; }
}
@keyframes ruggedVibrate {
	0%   { transform: translateX(0); }
	20%  { transform: translateX(-2px); }
	40%  { transform: translateX(2px); }
	60%  { transform: translateX(-2px); }
	80%  { transform: translateX(2px); }
	100% { transform: translateX(0); }
}
.logo-slider {
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 2rem 0;
}
.logo-track {
	display: inline-block;
	animation: scroll 10s linear infinite;
}
.logo-track img {
	height:48px !important;
	margin: 0 2rem;
	vertical-align: middle;
	filter: grayscale(100%);
	opacity: 0.8;
	transition: transform 0.3s ease;
}
.logo-track img:hover {
	transform: scale(1.1);
	filter: none;
	opacity: 1;
}
@keyframes scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* RESPONSIVE
********************************************************************************************************************************************************** */
@media only screen and (max-width:767px) {
	.logo {  font-size: 12vw; }
	.logo-track { animation: scroll 5s linear infinite !important; }
}
@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 input[type="text"], form input[type="email"], form input[type="tel"], form textarea { font-size: 1.1em; } 
form input[type="submit"] { min-width: 180px; border: none; border-radius: 5px; font-size: 1.2em; }

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 form input[type="tel"], .wpcf7 form textarea { position:relative; padding-left:30px; } 
.wpcf7 span[data-name="customer-name"]::before { font-family: 'Font Awesome 5 Free'; content: "\f007"; position: absolute; top: -2px; left: 8px; opacity: .5; } 
.wpcf7 span[data-name="customer-email"]::before { font-family: 'Font Awesome 5 Free'; content: "\f0e0"; position: absolute; top: -2px; left: 8px; opacity: .5;}
.wpcf7 span[data-name="customer-phone"]::before { font-family: 'Font Awesome 5 Free'; content: "\f879"; font-weight: 700; position: absolute; top: -2px; left: 8px; opacity: .5; } 
.wpcf7 span[data-name="customer-location"]::before { font-family: 'Font Awesome 5 Free'; content: "\f3c5"; font-weight: 700; position: absolute; top: -8px; left: 8px; } 
.wpcf7 span[data-name="customer-message"]::before { font-family: 'Font Awesome 5 Free'; content: "\f27a"; position: absolute; left: 8px; top: -14px; opacity: .5; } 

/* 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: 185px; 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: 5px 15px; 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); }

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