@charset "UTF-8";

/*
Theme Name: American Machining & Fabrication
Theme URI: https://www.amfabpa.com
Author: Pacer Studios
Author URI: https://pacerstudios.com
Description: Custom theme for American Machining & Fabrication, LLC — a steel and metal fabrication and machine shop in New Brighton, PA. American-flag palette (navy and red), Oswald/Inter typography, photo homepage slider, branded login page, and styled Gravity Forms. Built on the Pacer Studios Blank Theme.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.9
Requires PHP: 7.4

*/

/* Imports */
/* font-family: 'Inter', sans-serif; — body | font-family: 'Oswald', sans-serif; — headings */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Oswald:wght@400;500;600;700&display=swap');
@import url(css/sp-portrait.css);
@import url(css/sp-landscape.css);
@import url(css/tablet-portrait.css);
@import url(css/tablet-landscape.css);

[data-icon]:before {
	font-family: 'ElegantIcons';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@font-face {
	font-family: 'ElegantIcons';
	src:url('fonts/ElegantIcons.eot');
	src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
		url('fonts/ElegantIcons.woff') format('woff'),
		url('fonts/ElegantIcons.ttf') format('truetype'),
		url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    font-family: 'Inter', 'Open Sans', sans-serif;
}

html {
	scroll-behavior: smooth
}

body {
	line-height: 1
}

a {
	text-decoration-skip-ink: auto
}

a[href^="tel"] {
	color: inherit;
	text-decoration: none
}

button {
	outline: 0
}

ol,
ul {
	list-style: none
}

blockquote,
q {
	quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none
}

q {
	display: inline;
	font-style: italic
}

q:before {
	content: '"';
	font-style: normal
}

q:after {
	content: '"';
	font-style: normal
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"],
input[type="password"] {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0
}

input[type="search"] {
	-webkit-appearance: textfield
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

th,
td {
	padding: 2px
}

big {
	font-size: 120%
}

small,
sup,
sub {
	font-size: 80%
}

sup {
	vertical-align: super
}

sub {
	vertical-align: sub
}

dd {
	margin-left: 20px
}

kbd,
tt {
	font-family: courier;
	font-size: 12px
}

ins {
	text-decoration: underline
}

del,
strike,
s {
	text-decoration: line-through
}

dt {
	font-weight: bold
}

address,
cite,
var {
	font-style: italic
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent
}

.sticky {}

.bypostauthor {}

.wp-caption {}

.wp-caption-text {}

.gallery-caption {}

.alignright {
    float: right;
    margin-left: 2vw;
    margin-bottom: 2vw;
}

.alignright::after {
    clear: both;
}

.alignleft {
    float: left;
    margin-right: 2vw;
    margin-bottom: 2vw;
}

.alignright::after {
    clear: both;
}

.aligncenter {
    text-align: center;
    margin: 0 auto;
}

.aligncenter::after {
    clear: both;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute!important;
	width: 1px;
	word-wrap: normal!important;
	word-break: normal
}

.screen-reader-text:focus {
	background-color: #f7f7f7;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip: auto!important;
	-webkit-clip-path: none;
	clip-path: none;
	color: #007acc;
	display: block;
	font-size: 14px;
	font-size: .875rem;
	font-weight: 700;
	height: auto;
	right: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000
}

.skip-link {
	left: -9999rem;
	top: 2.5rem;
	z-index: 999999999;
	text-decoration: underline
}

.skip-link:focus {
	display: block;
	left: 6px;
	top: 7px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: normal;
	padding: 15px 23px 14px;
	z-index: 100000;
	right: auto
}

.visually-hidden:not(:focus):not(:active),
.form-allowed-tags:not(:focus):not(:active) {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap
}

/* Globals */

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', 'Open Sans', sans-serif;
	font-weight: 600;
	color: #16203A;
}

/* Admin Bar Hide Until Launch */
#wpadminbar {
	display: none;
}

/* Workaround for clearing out DIVs that don't behave */
.cleardiv { clear:both; font-size:0px; line-height:0px; height:0; overflow:hidden; }

/* Desktop */
@media screen and (min-width: 1280px) {
    
    #wrapper {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
    }

	#container {
		display: block;
        width: 100%;
        height: auto;
        position: relative;
		overflow: auto;
	}

    #header {
        display: block;
        width: 100%;
        height: 10vw;
        position: relative;
        background-color: #1F2C4C;
    }

    #branding {
        display: block;
        width: 25vw;
        height: 10vw;
        position: absolute;
        left: 7vw;
        top: 0vw;
    }

    #menu {
        display: block;
        width: 55vw;
        height: 10vw;
        position: absolute;
        right: 7vw;
        top: 0vw;
    }

    /* Level One Menu */
    #menu ul {
        z-index:99999;
    }
    
    #menu ul li {
        list-style:none;
        float:left;
        position:relative;	
    }
    
    #menu ul li:hover {
        background:#B22234;
    }
    
    #menu ul li a {
        color:#FFF;	
        display:inline-block;
        padding: 1vw;
        text-decoration:none;
        text-transform:uppercase;
    }
    
    /* Level Two Menu */
    #menu ul li ul {
        display:none;
        min-width: 15vw;
    }
    
    #menu ul li:hover ul {
        display:block;
        background:#16203A;
        position:absolute;
    }
    
    #menu ul li ul li {
        width:100%;	
    }

    /* Level Three Menu */
    #menu ul li ul li ul {
        position: absolute;
        left: 15vw;
        top: 0vw;
        display: none !important;
    }

    #menu ul li ul li:hover ul {
        display: block !important;
    }

    /* Mobile Toggle */
    .mobile_icon {
        display:none;	
    }

    #search {
        float: right;
    }

    /* Slider */
    .swipe {
        overflow: hidden;
        visibility: hidden;
        position: relative;
    }
    
    .swipe-wrap {
        overflow: hidden;
        position: relative;
    }
    
    .swipe-wrap > div {
        float: left;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    #homeindex_slider {
		display: block;
		width: 100%;
		height: 40.36vw;
		position: relative;
	}

    .homepage_slide {
        background-color: #1F2C4C !important;
    }

	#homepage_sliderwrap {
		display: block;
		width: 100%;
		height: 40.36vw;
		position: relative;
	}

	.homeswipe-wrap {
		width: 100%;
		height:40.36vw;
		overflow: hidden;
		position: relative;
	}
	
	.homeswipe-wrap > div {
		float: left;
		width: 100%;
		min-height: 40.36vw;
		text-align: center;
		position: relative;
		background-color: #171717;
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
	}

	.homeswipe-wrap > div img {
		width: auto;
		height:40.36vw;
		margin: 0 auto;
	}

	.slider_content {
		display: block;
		width: 50.83vw;
		height: auto;
		padding: 1.56vw;
		background-color: rgba(0,0,0,.7);
		position: absolute;
		right: 10vw;
		bottom: 15vw;
	}

	.slider_content h2 {
		font-size: 2.40vw;
		font-weight: 600!important;
    	color: #FFF !important;
		margin-bottom: 1vw;
	}

	.slider_content p {
		color: #ffffff;
		line-height: 1.1vw;
		margin-bottom: 1vw;
	}

	.slider_content a {
		display: inline-block;
		padding: .5vw 1vw;
		background: #B22234;
		border: 2px solid #ffffff;
		text-decoration: none;
		font-size: 1vw;
		color: #ffffff;
	}

	#arrow_prevhome {
		width: 3vw;
		height: 4vw;
		background: url(images/slider_arrow.png) top left no-repeat;
		background-size: contain;
		position: absolute;
		z-index: 999;
		top: 19vw;
		left: 0vw;
		cursor: pointer;
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}

	#arrow_nexthome {
		width: 3vw;
		height: 4vw;
		background: url(images/slider_arrow.png) top left no-repeat;
		background-size: contain;
		position: absolute;
		z-index: 999;
		top: 19vw;
		right: 0vw;
		cursor: pointer;
	}

    /* Home Page */


    /* Content */
    .post-edit-link {
        display: inline-block;
        text-decoration: none;
        background: #B22234;
        color: #FFF;
        padding: .5vw;
        margin-bottom: 1vw;
    }

    #content {
        display: block;
        width: 100%;
        height: auto;
        padding: 7vw;
        position: relative;
    }

    #content h1 {
        font-size: 2.3vw;
        margin-bottom: 1vw;
    }

    #content h2 {
        font-size: 2.0vw;
        margin-bottom: 1vw;
    }

    #content h3 {
        font-size: 1.7vw;
        margin-bottom: 1vw;
    }

    #content h4 {
        font-size: 1.4vw;
        margin-bottom: 1vw;
    }

    #content h5 {
        font-size: 1.1vw;
        margin-bottom: 1vw;
    }

    #content h6 {
        font-size: .8vw;
        margin-bottom: 1vw;
    }

    #content p {
        font-size: .8vw;
        margin-bottom: 1vw;
    }

    #content ul {
        list-style: disc;
        margin-bottom: 1vw;
    }

    #content ul li {
        margin-left: 1vw;
        margin-bottom: 1vw;
    }

    #content ol {
        list-style: decimal;
        margin-bottom: 1vw;
    }

    #content ol li {
        margin-left: 1vw;
        margin-bottom: 1vw;
    }

    #content strong {
        font-weight: bold;
    }

    #content em {
        font-style: italic;
    }

    #content blockquote {
        display: inline-block;
        padding: 1vw;
        margin-left: 2vw;
        background: #eee;
        font-style: italic;
        font-size: 1.4vw;
        border: 1px solid #1F2C4C;
    }

    /* Subpages */

    /* Footer */
    #footer {
        display: block;
        width: 100%;
        height: 10vw;
        padding: 3.5vw 7vw;
        position: relative;
        background: #1F2C4C;
        color: #FFF;
        border-top: .25vw solid #B22234;
        font-size: .8vw;
    }

    #footer a {
        color: #FFF;
    }

    /* Branding */
    #header {
        border-bottom: .25vw solid #B22234;
    }

    #site-title {
        padding-top: 2.4vw;
    }

    #site-title a {
        display: inline-block;
        color: #FFF;
        font-size: 1.7vw;
        line-height: 2.1vw;
        font-weight: 800;
        text-transform: uppercase;
        text-decoration: none;
    }

    #site-description {
        color: #D6DBE7;
        font-size: .85vw;
        margin-top: .4vw;
    }

    #menu ul.menu {
        padding-top: 3.4vw;
    }

    #search {
        position: absolute;
        top: .8vw;
        right: 0vw;
    }

    #search input[type="search"],
    #search input[type="text"] {
        padding: .3vw .6vw;
        font-size: .8vw;
        border: 0;
        background: #FFF;
        color: #16203A;
    }

    #search input[type="submit"] {
        padding: .3vw .6vw;
        font-size: .8vw;
        border: 0;
        background: #B22234;
        color: #FFF;
        cursor: pointer;
    }


    /* Gravity Forms */
    #content .gform_wrapper ul.gform_fields {
        list-style: none;
        margin-bottom: 0;
    }

    #content .gform_wrapper .gfield {
        margin-left: 0;
        margin-bottom: .8vw;
    }

    #content .gform_wrapper .gfield_label {
        display: inline-block;
        font-size: .8vw;
        font-weight: 600;
        margin-bottom: .5vw;
    }

    #content .gform_wrapper input[type="text"],
    #content .gform_wrapper input[type="email"],
    #content .gform_wrapper input[type="tel"],
    #content .gform_wrapper textarea {
        width: 40vw;
        padding: .5vw;
        font-size: .8vw;
        border: 1px solid #1F2C4C;
        background: #FFF;
        color: #16203A;
    }

    #content .gform_wrapper input[type="submit"] {
        padding: .5vw .9vw;
        font-size: .9vw;
        font-weight: 600;
        border: 0;
        background: #B22234;
        color: #FFF;
        cursor: pointer;
    }

    #content .gform_wrapper .validation_message,
    #content .gform_wrapper .gfield_required {
        color: #B22234;
    }



    /* Design Refinements */
    #content .entry-content {
        max-width: 62vw;
    }

    #content h1 {
        display: inline-block;
        font-size: 2.5vw;
        text-transform: uppercase;
        letter-spacing: .05vw;
        padding-bottom: .8vw;
        border-bottom: .18vw solid #B22234;
        margin-bottom: 1.6vw;
    }

    #content h2 {
        font-size: 1.7vw;
        text-transform: uppercase;
        letter-spacing: .04vw;
        color: #1F2C4C;
        margin-top: 2vw;
        padding-left: .8vw;
        border-left: .3vw solid #B22234;
    }

    #content h3 {
        font-size: 1.35vw;
        color: #1F2C4C;
    }

    #content p {
        font-size: .95vw;
        line-height: 1.65vw;
        color: #333A45;
    }

    #content ul {
        list-style: square;
    }

    #content ul li,
    #content ol li {
        font-size: .95vw;
        line-height: 1.65vw;
        margin-bottom: .6vw;
        color: #333A45;
    }

    #content ul li::marker {
        color: #B22234;
    }

    #content .entry-content a {
        color: #B22234;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid rgba(178,34,52,.35);
    }

    #content .entry-content a:hover {
        border-bottom-color: #B22234;
    }

    #menu ul li a {
        font-family: 'Oswald', 'Open Sans', sans-serif;
        font-size: .95vw;
        font-weight: 500;
        letter-spacing: .08vw;
    }



    .slider_content {
        width: 44vw;
        text-align: left;
        background-color: rgba(15,22,40,.88);
        border-left: .4vw solid #B22234;
        padding: .8vw 1.6vw;
    }

    .slider_content h2 {
        text-transform: uppercase;
        letter-spacing: .06vw;
    }

    .slider_content p {
        font-size: 1vw;
        line-height: 1.5vw;
        color: #E6E9F0;
    }

    .slider_content a {
        font-family: 'Oswald', 'Open Sans', sans-serif;
        font-size: .9vw;
        padding: .6vw 1.4vw;
        background: #B22234;
        border: 0;
        text-transform: uppercase;
        letter-spacing: .08vw;
        font-weight: 500;
    }

    #content a.post-edit-link {
        color: #FFF;
        border-bottom: 0;
    }

    #content .gform_wrapper input[type="submit"] {
        font-family: 'Oswald', 'Open Sans', sans-serif;
        text-transform: uppercase;
        letter-spacing: .08vw;
        font-weight: 500;
    }

    #copyright {
        font-size: .8vw;
        color: rgba(255,255,255,.75);
        letter-spacing: .04vw;
    }



    /* GF Extended Fields */
    #content .gform_wrapper select {
        width: 40vw;
        padding: .5vw;
        font-size: .8vw;
        border: 1px solid #1F2C4C;
        background: #FFF;
        color: #16203A;
    }

    #content .gform_wrapper .gfield_checkbox {
        list-style: none;
        margin-bottom: 0;
    }

    #content .gform_wrapper .gfield_checkbox li,
    #content .gform_wrapper .gchoice {
        list-style: none;
        margin-left: 0;
        margin-bottom: .4vw;
        font-size: .8vw;
    }

    #content .gform_wrapper .gfield_checkbox label {
        font-size: .8vw;
        font-weight: 400;
        margin-left: .4vw;
    }

    #content .gform_wrapper .gfield_checkbox input[type="checkbox"] {
        accent-color: #B22234;
    }

    #content .gform_wrapper input[type="file"] {
        font-size: .8vw;
    }

    #content .gform_wrapper .gfield_description {
        font-size: .8vw;
        color: #5A6270;
        margin-top: .4vw;
    }



    /* Footer Photo & Depth */
    #footer {
        background-image: linear-gradient(to bottom, rgba(31,44,76,.80) 0%, rgba(31,44,76,.94) 60%, rgba(31,44,76,1) 100%), url(images/footer-bg.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #header {
        box-shadow: 0 .15vw .6vw rgba(11,17,32,.35);
    }

    .slider_content {
        box-shadow: 0 .3vw 1.2vw rgba(11,17,32,.45);
    }



    /* Logo */
    #branding {
        width: 30vw;
        display: grid;
        grid-template-columns: auto 1fr;
        align-content: center;
        column-gap: 1.2vw;
    }

    #site-logo {
        grid-row: 1 / 3;
        align-self: center;
    }

    #site-logo img {
        display: block;
        height: 7.5vw;
        width: auto;
    }

    #site-title {
        padding-top: 0vw;
        align-self: end;
    }



    /* Search & 404 */
    #content .entry-title a {
        color: #1F2C4C;
        text-decoration: none;
    }

    #content .entry-title a:hover {
        color: #B22234;
    }

    #content article {
        margin-bottom: 2vw;
    }

    #content .search-form {
        margin: .5vw 0 2vw 0;
    }

    #content .search-form input[type="search"],
    #content .search-form .search-field {
        width: 26vw;
        padding: .5vw;
        font-size: .9vw;
        border: 1px solid #1F2C4C;
        background: #FFF;
        color: #16203A;
        vertical-align: middle;
    }

    #content .search-form input[type="submit"],
    #content .search-form .search-submit {
        padding: .5vw 2vw;
        font-size: .9vw;
        border: 0;
        background: #B22234;
        color: #FFF;
        font-family: 'Oswald', 'Open Sans', sans-serif;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .08vw;
        cursor: pointer;
        vertical-align: middle;
    }

    #content .nav-previous a,
    #content .nav-next a {
        color: #B22234;
        font-weight: 600;
        text-decoration: none;
    }



    /* Edit link on its own line */
    #content a.post-edit-link {
        display: table;
    }



    /* Smaller site title (desktop) */
    #site-title a {
        font-size: 1.45vw;
        line-height: 1.8vw;
    }


/* END Desktop */
}