/*
	Theme Name:   Manufacturing Child Theme
	Theme URI:    https://www.wpbeginner.com/
	Description:  A Twenty Twenty-One child theme 
	Author:       WPBeginner
	Author URI:   https://www.wpbeginner.com
	Template:     manufacturing
	Version:      1.0.0
	Text Domain:  manufacturingthemechild

	Theme Name: Manufacturing Child Theme
	Theme URI: http://themes.webdevia.com/factory/
	Description: Manufacturing WordPress Theme Child
	Author: Mymoun
	Author URI: http://www.webdevia.com/
	Version: 1.1
	Text Domain: Sherman Machines
	Domain Path: /languages

	License: ---
	License URI: ----

	Tags: two-columns, responsive-layout , custom-background, threaded-comments, translation-ready, custom-menu
*/

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

  Theme Name: Sherman Machines - shared on wplocker.com
  Theme URI: http://themes.webdevia.com/factory/
  Description: Manufacturing WordPress Theme
  Author: Mymoun
  Author URI: http://www.webdevia.com/
  Version: 1.1
  Text Domain: Sherman Machines
  Domain Path: /languages
  
  License: ---
  License URI: ----

  Tags: two-columns, responsive-layout , custom-background, threaded-comments, translation-ready, custom-menu
  
***************************************/
/* ----------------------------------------------------------------------------

  Unfortunately WordPress will require a style.css file
  located in the theme's root folder for stuff to work.

  However, we will not be using vanilla CSS. We're using Sass.

  Sass is a superset of CSS that adds in amazing features
  such as variables, nested selectors and loops..

  All Sass files are located in the /scss folder.
  Please note that none of your scss files will be compiled to /css/app.css before you run
  'npm run watch', 'npm run build', "compass compile" or "compass watch",

  More info on how to use Sass with Foundation can be found here:
  http://foundation.zurb.com/docs/sass.html

  For Define a table of contents please check /scss/app.scss.

  If you for some reason would like to write plain css instead of using Sass,
  you could just enqueue this file (style.css) to the header and add your styles in this file

---------------------------------------------------------------------------- */

/* Variables */
:root {
  --dark-red: #ff0000;
}


/* Header contact button styling */
header.l-header.corporate-layout {
    border-bottom: solid 1px #ddd;
    box-shadow: 0 0 10px 0px rgba(0,0,0,0.4);
    z-index: 9;
    position: relative;
}

#menu-item-2607 > a {
    color: white;
    background-color: #990000;
    border-radius: 0;
    padding: 8px 16px !important;
    margin-top: 8px;
    margin-right: -10px;
    margin-left: 18px;
    position: relative;
    top: -8px;
}

.corporate.top-bar-section ul.menu>li>a {
    color: #303030;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 16px !important;
    padding-top: 10px !important;
    padding-right: 16px !important;
    padding-bottom: 10px !important;
    padding-left: 16px !important;
    text-transform: uppercase;
}

.corporate-layout .top-bar-section ul.menu > li > a, .creative-layout .top-bar-section ul li > a {
	margin-right: 6px;
}

div#cta {
    padding: 60px 0;
    background: linear-gradient(45deg, #000000, #760000);
    max-width: 100%;
    border-top: solid 1px #ddd;
    color: #fff;
    border-bottom: solid 1px #747474;
}

div#cta .row-inner {
    max-width: 85.71429em;
    margin: 0 auto;
}

div#cta h2 {
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 32px;
    line-height: 1;
    text-align: center;
}

div#cta p {
    font-size: 20px;
    margin-bottom: 32px;
    opacity: 0.8;
}

div#cta .button.cta-button {
    background: #990000;
    padding: 32px 64px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    border: 0;
}

@media only screen and (max-width: 1100px) {
	.corporate-layout .top-bar-section ul li {
		margin: 0 -10px 0;
	}
}

@media only screen and (max-width: 980px) {
/* 	.corporate-layout .top-bar-section ul.menu > li > a {
		padding: 10px 6px !important;
	} */
	
	.corporate-layout .top-bar-section ul li {
    background-color: transparent;
    margin: 0 -15px 0;
  }
}

@media (max-width: 900px) {
	#menu-item-2607 > a {
		border: none;
		color: #333;
		background: none;
		padding: 10px 16px !important;
		padding-left: 0px !important;
		margin-left: 16px !important;
		margin-top: 0px;
	}
}

/* Homepage Our Capabilities and Contact Nav Button Hover */
.vc_btn3.vc_btn3-style-custom:focus, .vc_btn3.vc_btn3-style-custom:hover, .top-bar-section li:not(.has-form) a:not(.button):hover, .button.cta-button:hover  {
    opacity: 0.75;
    transition: all 300ms;
}

/* Images */
.wpb_single_image.vc_align_center:hover {
	opacity: 0.8;
    transition: all 300ms;
}

/* Hero banner */
#home-banner {
	margin-bottom: 20px
}

/* Cta blade */
.row-inner {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
}

.cta-content {
    text-align: center;
}

.button.cta-button:after {
	content: none;
	padding-left: 0px;
}

.button.cta-button:after, .button.slick-arrow:after {
	content: none;
	padding-left: 0px;
}

.button.cta-button {
	background-color: var(--dark-red);
	color: white;
	font-size: 16px;
}


.slick-arrow {
    background: none;
    position: absolute;
    top: calc(50% - 30px);
    z-index: 1;
    border-radius: 4px;
    cursor: pointer;
    transition: all 400ms;
    background: none;
    border: 0 !important;
    outline: 0 !important;
    font-size: 80px;
    color: #fff;
    text-shadow: 0px 3px 13px rgba(0,0,0,1);
}

.slick-arrow:hover {
    background: rgba(255,255,255,0.4);
}

.slick-arrow:focus {
    background: rgba(255,255,255,0.4);
}

.slick-track {
  height: 600px;
  overflow: hidden;
}

.slick-track img {
  width: auto;
  height: 100%;
  object-fit: cover;
}

button:after, .button:after {
	content:none !important;
	padding: none !important;
}

button.slick-next.slick-arrow {
    right: 0;
}

button.slick-prev.slick-arrow {
    left: 0;
}

.slider-container {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.text-overlay > p {
    color: #fff;
    font-size: 60px;
    text-shadow: 0px 3px 13px rgba(0,0,0,1);
    font-weight: bold;
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
}

.slider-container:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(45deg, #000000ad, #7600009c);
    display: block;
    z-index: 1;
}

@media only screen and (max-width:1350px) {
	div#cta .row-inner {
		max-width: 100%;
		padding-left: 5%;
		padding-right: 5%;
	}
}



@media only screen and (max-width:850px){
	.text-overlay > p {
		font-size: 32px;
	}
	button.slick-arrow {
		display: none;
	}
}