/*
Theme Name: Hispanic Mechanic
Description: Custom theme for Hispanic Mechanic.
Author: Nick & Hazelnut Creative
Author URI: https://oceanwp.org/ & https://hazelnutcreative.com
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* fonts */
@font-face {
    font-family: 'octin';
    src: url('fonts/octin_vintage-webfont.woff2') format('woff2'),
         url('fonts/octin_vintage-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* basics */
h1 {
	font-size: 14px;
	margin: 0px;
	display: inline-block;
}

h2, h3 {
	font-family: 'octin' !important;
	font-weight: normal;
}

/* top bar */
#top-bar-inner a:hover {
	text-decoration: underline;
}
.is-sticky #top-bar-wrap {
	opacity: 1 !important;
}
@media only screen and (max-width: 768px) {
	#top-bar-content {
		float: left;
		text-align: left;
	}
	#top-bar-social.top-bar-right {
		position: absolute;
		right: 0;
		top: 50%;
		height: 20px;
		line-height: 20px;
		margin-top: -10px;
	}
}
/* mobile top bar */
@media only screen and (max-width: 620px) {
	#top-bar-content {
		text-align: center;
	}	
	#top-bar-social.top-bar-right {
		display: none !important;
	}
	#mobile-social-by-Kate {
		display: inline;
	}
}
@media only screen and (min-width: 620px) {
	#mobile-social-by-Kate {
		display: none;
	}
}
#mobile-book-now {
	display: none;
}
@media only screen and (max-width: 620px) {
	#mobile-book-now {
		display: inline;
		background: white;
    	color: #f6313e;
    	padding: 3px 5px;
    	margin-left: 10px;
		font-size: .9em;
	}	
	.topbar-content {
		line-height: 2em;
	}
}

/* nav */
#site-navigation {
	 height: 100px; 
}
.middle-site-logo {
	padding-top: 100px;
}
#site-header.center-header {
	font-family: 'octin';
}
#site-navigation-wrap .dropdown-menu >li >a {
	padding-top: 50px;
}
#site-header.center-header #site-navigation-wrap .middle-site-logo {
	width: 20%;
}
#site-header.center-header #site-navigation-wrap .left-menu, #site-header.center-header #site-navigation-wrap .right-menu {
	width: 40%;
}
@media only screen and (min-width: 920px) {
	#site-navigation-wrap .right-menu>li {
		float: left !important;
	}
	#site-navigation-wrap .left-menu>li {
		float: right !important;
	}
}
.middle-site-logo:hover img {
  -moz-opacity: 0.9 !important;
  -webkit-opacity: 0.9 !important;
  opacity: 0.9 !important;
}
.sf-menu ul.sub-menu {
	top: 88% !important;
}
.menu-book-button span {
	background: #f6313e;
    padding: 5px;
    color: white;
}
.menu-book-button span:hover {
	background: black;
}

/* mobile side nav */
#sidr {
	font-family: Octin;
}
a.sidr-class-toggle-sidr-close {
	color: white !important;
}

/* tablet nav */
@media only screen and (max-width: 768px) {
	#site-navigation {
		 height: 80px;
	}
	#site-navigation-wrap .dropdown-menu >li >a {
		padding-top: 40px;
	}
	.middle-site-logo {
		padding-top: 70px;
	}
	#site-navigation-wrap .right-menu>li {
		/*float: right !important;*/
	}
	#site-navigation-wrap .left-menu>li {
		/*float: left !important;*/
	}
	#site-header.center-header #site-navigation-wrap .middle-site-logo a img {
		max-width: 130px !important;
	}
}

/* inbetween tablet & mobile nav */
@media only screen and (min-width: 768px) and (max-width: 920px) {
	#site-navigation-wrap .right-menu>li {
    	float: none !important;
	}
	#site-navigation-wrap .dropdown-menu >li >a,
	#site-header.center-header #site-navigation-wrap .dropdown-menu >li >a {
		font-size: 18px !important;
	}
}
@media only screen and (max-width: 768px) {
	#site-header.center-header #site-logo {
		padding-left: 10px;
	}
	.oceanwp-mobile-menu-icon.mobile-right {
		padding-right: 10px;
	}
}
	
/* copyright */
#copyright a:hover {
	text-decoration: underline;
}

/* home page top images */
@media only screen and (max-width: 479px) {
	.elementor-image-gallery .gallery.gallery-columns-2 .gallery-item {
		width: 50%;
	}
}

/* hide gear on portrait tablets */
@media only screen and (min-width: 768px) and (max-width: 900px) {
	#gear-image {
		display: none;
	}
}

/* menu circles */
@media only screen and (max-width: 768px) {
	.elementor-element-e83683c {
		max-width: 500px;
		margin: 0 auto;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.elementor-14 .elementor-element.elementor-element-7b99dd8 > .elementor-widget-container {
		padding: 0% 0% 0% 5% !important;
	}
}

/* contact form */
.caldera-grid .form-control {
    width: 75% !important;
    border-radius: 0px !important;
	border: 2px solid #000 !important;
}
.caldera-grid .form-control:focus {
	border: 2px solid green !important;
	box-shadow: 0 0 5px rgb(93,134,67) !important;
}
.caldera-grid input[type=submit] {
	margin: 10px 15px;
	border: 2px solid black !important;
		border-radius: 0 !important;
	background: black !important;
	color: white !important;
}
.caldera-grid input[type=submit]:hover {
	border: 2px solid black !important;
	background: white !important;
	color: black !important;
}
.caldera-grid label {
    float: left !important;
    width: 25% !important;
	padding-left: 15px;
}
.caldera-grid .btn {

}
.caldera-grid form textarea {
	min-height: 100px;
}
#special-offers {
	width: 100% !important;
}
.caldera-grid input[type=checkbox] {
    -webkit-appearance: button-bevel !important;
}
input[type=checkbox]:before {
	background: #eee !important;
	    -webkit-appearance: button-bevel !important;
}
input[type=checkbox]:checked:before {
	color: #5d8643 !important;
    background: #fff !important;
	    -webkit-appearance: button-bevel !important;
}

/* book button */
#bookButton a {
	padding: 5px 7px;
	background: black;
	color: white;
	font-family: Octin;
	font-size: 1.2em;
	width: 100%;
    max-width: 180px;
    display: block;
    text-align: center;
}
#bookButton a:hover {
	background: #5d8643;
}

/* news */
#news-row img:hover {

}
#news-row a:hover {
	color: #f6313e;
}

/* mailchimp footer signup */
#mc4wp-form-1 label {
	display: inline;
}
#mc4wp-form-1 input[type="email"] {
	max-width: 270px;
	margin: 0 10px;
	border-radius: 0;
}
@media only screen and (max-width: 768px) {
	#mc4wp-form-1 label {
		display: block;	
		margin-bottom: 5px;
	}
	#mc4wp-form-1 input[type="email"] {
		margin: 0 10px 0 0;
	}
}
@media only screen and (max-width: 479px) { 
	#mc4wp-form-1 input[type="email"] {
		margin: 0 0 10px 0;
		max-width: 100%;
	}
}