/***********************************
******** Universal *****************
***********************************/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@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&family=Oswald:wght@200;300;400;500;600;700&display=swap');

@-webkit-keyframes bounce { 
    0%, 20%, 53%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
 } 
 
 @keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {
        animation-timing-function: cubic-bezier((.215,.61,.355,1));
        transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
 }

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    list-style: none;
    background-color: white;
    width: 100%;
    overflow-x: hidden !important;
}

body a {
    text-decoration: none !important;
}

section {
    margin-bottom: 0;
}

.read-more-btn {
    width: 250px;
    height: 60px;
    display: inline-block;
    position: relative;
    top: 50px;
    margin-left: -1rem;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: white;
    border: none;
}

.read-btn-text {
    background-color: #E02B20;
    padding: 20px 45px;
}

.read-btn-icon {
    background-color: #E02B20;
    padding: 20px 15px;
    margin-left: 5px;
    z-index: -1;
}

.read-btn-icon object {
    position: relative;
    top: 6px;
}

.star-form-btn {
    margin-top: 2rem !important;
}

.h-full {
	height: 100%;
}

.w-full {
	width: 100%;
}

.me-10 {
	margin-right: 6rem !important;
}

.animated-btn {
    animation-fill-mode: both;
    z-index: 10;
}

.btn-bounce {
    animation-name: bounce;
    transform-origin: center bottom;
}

.object-fit {
	object-fit: cover;
}


/* MEDIA QUERIES and BREAK POINTS */

@media screen and (min-width: 1200px) {
    
    .dropdown-menu {
        margin-top: 1.5rem !important;
        background-color: black;
        border-top: 2px solid #E02B20;
    }
    
    .dropdown-menu > .menu-item > a {
        color: #FFF !important;
    }
    
    .dropdown-menu > .menu-item > a:hover {
        color: #000 !important;
    }
    
}

@media screen and (max-width: 575px) {
    .topBar {
        font-size: 0.75rem !important;
    }

    .herotron-textblock h1 {
        font-size: 0.9em !important;
    }

    .herotron-textblock p {
        font-size: 1rem !important;
    }

	
    .read-btn-text {
        font-size: 0.5em;
    }

    .read-btn-icon {
        display: none;
    }

    .read-btn-icon object {
        height: 15px;
    }
    
    .services-info {
        width: 24.4rem !important;
    }
	
	.about-section h1, .quality-section h1 {
		font-size: 2.4em !important;
	}

    .brackets-textblock p, .machining-textblock p, .stamping-textblock p, .fabricate-textblock p {
        font-size: 0.9em !important;
    }
	
	#services h3 {
		font-size: 1.7em !important;
	}

    .service-subcat {
        width: 25rem !important;
    }


}

@media screen and (max-width: 767px) {


	.herotron-textblock h1 {
		font-size: 1em !important;
	}
	
    .read-btn-text {
        font-size: 0.6em;
    }

    .read-btn-icon {
        display: none;
    }

    .read-more-btn {
        display: inline;
    }
    
    .about-section {
        margin-left: 0 !important;
    }
    
    .quality-section-textblock > .read-more-btn {
        font-size: 2rem;
    }

    .quality-section-textblock > .read-more-btn > .read-btn-text {
        padding: 15px 20px;
    }

    .about-img {
        display: none !important;
    }

    .quality-image {
        display: none !important;
    }

}

@media screen and (max-width: 990px) {
    .read-more-btn {
        width: .5vw;
    }

    .footer2 {
        display: none !important;
    }
    
    .about-section {
        margin-left: 0 !important;
        width: 25rem !important;
    }
	
	.about-img {
		background: url('../img/aboutus/sharp-cert.jpg') left bottom 10% no-repeat, url('../img/aboutus/AS9100D.jpg') left top no-repeat, url('../img/aboutus/DJI_0354a.jpg') center 45% no-repeat !important;
		background-size: 75%, 45%, 70% !important;
		height: 750px !important;
	}
    
    .read-more-btn {
        width: 200px;
        height: 30px;
        font-size: 1em;
        letter-spacing: 0;
        padding: 2%;
    }
}

@media screen and (min-width: 990px) {
	.herotron-textblock p {
        font-size: 2.5vw !important;
    }
}

/* MAIN TOP CONTACT INFO BAR */

.topBar {
    height: 60px;
    background-color: #23272A;
    color: #FFF;
    font-weight: 200;
    font-size: 0.9rem;
}

.topBar a {
    color: #fff;
}

.topBar svg {
    fill: #E02B20;
    margin-bottom: 5px;
}

.contact-divider {
    margin-left: 20px;
    margin-right: 10px;
    color: #707070;
}

.contact-top i {
    margin-right: 5px;
    color: #E02B20;
}

.contact-top {
   margin-top: 18px;
}

/* PRIMARY NAV MENU */

.main-menu {
	background: #fff;
}

.mainNavBar ul {
    margin-left: 15px;
}

.mainNavBar a {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    color: #23272A !important;
    margin-right: 18px;
}

.menu-border-bottom {
	border-bottom: solid 1px #ccc;
}


/* HERO/JUMBOTRON FOR MAIN PAGE */ 

.herotron-textblock::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0.3 !important;
}

.herotron-textblock {
	position: relative;
	background: rgba(70,70,85,0.35);
    z-index: 10;
	border-radius: 20px;
}

.herotron {
    height: 80vh;
	background-image: url("../img/home/st-hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
	background-position: top 25% left 50%;
}

.herotron p {
    font-family: 'Oswald', Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 900;
    transform: scale(1, 1.2);

}

.herotron-textblock a:hover {
    color: white;
}

.scroll-btn {
	position:absolute;
    bottom: 40px;
    left: 50%;
    color: #fff;
	  -webkit-text-stroke: 1px black;
    text-decoration: none;
	text-shadow: 1px 4px 5px #222;
    transition: opacity .3s;
	font-size: 3rem;
	-webkit-animation-duration: 1.5s;
    animation-duration: 1.5s !important;
}

.scroll-btn:hover {
	opacity: 0.6;
	color: #eee !important
}

.infinite-anim {
    animation-iteration-count: infinite;
}

/* ABOUT US SECTION */

#about {
    /*margin-bottom: -35%;*/
}

.about-section {
    height: 900px;
    background-color: #FFF !important;
    margin-bottom: 30%;
    margin-left: 20%;
    overflow-y: hidden;
}

.about-section-textblock, .quality-section-textblock {
    margin: 15% 015% 30%;
    padding-bottom: 35%;
}

.about-section h1, .quality-section h1 {
    font-family: 'Oswald', Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 900;
    font-size: 3.5em;
    transform: scale(1, 1.2);
}

.about-section h1::before, .quality-section h1::before {
    content: " ";
    position: absolute;
    left: -4.5rem;
    top: 1.5rem;
    border: 6px solid #E02B20;
    width: 68px;
    height: 0;
    transform: rotate(90deg);
}

.about-section p, .quality-section p {
    color: #73787C;
    font-size: 1em;
    letter-spacing: .9px;
    width: 99%;
    margin-top: 10%;
}

.about-section-textblock a:hover, .quality-section-textblock a:hover {
    color: white;
}

.about-img, .quality-image {
    overflow: hidden;
    width: 99%;
}

.about-img {
/* 	background: url('../img/aboutus/sharp-cert.jpg') left bottom no-repeat, url('../img/aboutus/AS9100D.jpg') left top no-repeat, url('../img/aboutus/DJI_0354a.jpg') right top no-repeat;
	background-size: 35%, 30%, 60%; */
	height: 600px;
	padding-bottom: 4rem;
	margin-bottom: 2%;
	margin-top: 7rem;
}

/* SERVICES SECTION */

#services {
    margin-top: -25%;
    padding-top: 0;
}

.services-info {
    height: 980px !important;
    padding-right: 2rem;
    margin-right: -3%;
}

.services-textblock {
    margin-left: 5rem;
    padding-top: 15rem;
}

.services-textblock p {
    color: #73787C;
}

.services-info h1 {
    font-family: 'Oswald', Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 900;
    font-size: 3.5em;
    transform: scale(1, 1.2);
}

.services-info h1::before {
    content: " ";
    position: absolute;
    left: -4.5rem;
    top: 1.5rem;
    border: 6px solid #E02B20;
    width: 68px;
    height: 0;
    transform: rotate(90deg);
}

#services h3 {
    font-family: 'Oswald', Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 900;
    font-size: 2.2rem;
}

#services p {
    font-size: 1em;
    letter-spacing: .9px;
    width: 80%;
    margin-top: 2%;
}

.service-subcat {
    background-color: #2E3337 !important;
    width: 45rem;
    height: 490px;
    padding: 7rem;
    font-size: 1rem;
    margin-left: -4%;
    margin-right: -20em;
}

.service-subcat p {
    color: #C4C4C4 !important;
    width: 90%;
    margin-right: auto;
}

.service-subcat a:hover {
    color: white;
}


.brackets-panel {
  background: linear-gradient(rgba(46, 51, 55, 0.8), rgba(46, 51, 55, 0.8)), url('../img/bracket_5.jpg') no-repeat center;
  background-size: cover;
}

.stamping-panel {
    background: linear-gradient(rgba(46, 51, 55, 0.8), rgba(46, 51, 55, 0.8)), url('../img/stamping/LEE_9805a_res.jpg') no-repeat right;
    background-size: cover;
}

/*********************************
***** QUALITY CONTROL SECTION ****
*********************************/

.quality-section {
    height: 875px;
    margin-top: 0;
    background-color: #FFF !important;
    overflow-y: hidden;
}

.quality-image img:nth-child(1) {
    position: absolute;
    width: 473px;
    height: 473px;
    object-fit: cover;
    margin: 0 auto;
    z-index: -1;
    overflow-y: hidden !important;
}

.quality-image img:nth-child(2) {
    position: relative;
    top: 50%;
    left: -10%;
    width: 361px;
    height: 248px;
    object-fit: cover;
    margin: 0 auto;
}

.quality-image img:nth-child(3) {
    position: relative;
    top: -40%;
    right: -32%;
    height: 242px;
    width: 393px;
    transform: rotate(60deg);
    z-index: 2;
}

.quality-image {
    padding-top: 20%;
    margin-left: 25%;
    height: 100%;
    width: 100%;
    overflow-y: visible;
}

/*********************************
***** Red Contact SECTION ****
*********************************/

.red_bg {
    color: white;
    width: 100%;
    height: 201px;
    background-color: #E02B20;
}

.red_bg:hover {
    background-color: #b8140c !important;
}

.red_bg h2 {
    font-family: 'Oswald', Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    font-size: 4.2rem;
    margin-top: 10%;
    padding-top: 3.5%;
}


#quality-control::after {
    content: "";
    display: inline;
}

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

footer {
    height: 495px;
    max-height: 900px;
    width: 100%;
    overflow-y: visible;
}

.footer-main {
    background-color: #23272A;
    height: 410px;
}

.footer-sub {
    background-color: #2E3337;
    height: 85px;
}

.footer1 {
    padding: 20px;
    margin: 0 auto;
}

.footer1 img {
    margin-bottom: 10% !important;
    margin-top: 15%;
}

.footer1 p, .footer3 p {
    font-size: 0.9em;
}

.footer2 {
    margin: 5px auto;
    padding: 20px;
}

.footer2 p {
    font-weight: bold;
    font-size: 1.4em;
    margin-top: 12%;
} 

.footer2 a, .footer2 a:hover {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
}

.footer3 {
    padding-top: 15%;
    margin-left: 10%;
}

.footer-nav li {
    margin-top: -18%;
}

.footer-nav ul, .footer-nav li {
    margin-left: 0;
}

.footer-nav > ul > div > li::before {
    content: "\f054"; /* FontAwesome Unicode */
    font-family: FontAwesome;
    color: #E02B20;
    display: inline-block;
    margin-right: 1.3em; 
    margin-bottom: -2em;
    margin-left: -0.3em;
    width: 1.3em;
    vertical-align: bottom;
}

.footer-nav {
    height: 300px;
}

.footer-sub p {
    margin: 0 auto;
    margin-top: 2rem;
    font-size: 1rem;
}

.footer-sub a {
    color: white;
    text-decoration: none;
}

/***********************
****** Terms.php Style *****/

.terms-body {
    margin: 0 auto;
	padding: 5%;
}

/***********************
****** Page.php Style *****/

.page-body-single {
    margin: 20px 10px;
	padding: 1%;
}

.page-img {
    padding: 2em;
}

.page-img img {
    height: auto;
    max-width: 30rem;
}

.hero-pg-header h2 {
    text-align: center;
	margin: 5%;
	font-weight: bold;
	font-size: calc(90% + 2.5vw) !important;
	transform: scale(1, 1.1);
}

.st-gallery-img img {
	height: 15rem !important;
    max-width: 30rem !important; 
}

.st-gallery {
	height: 480px !important;
	object-fit: cover;
}

.capabilities-list a {
	font-weight: bold;
    font-size: 16px;
    color: #23272A !important;
}

/*****************************
***** Products Index Style ***/

.product-label {
    font-weight: 600;
    text-decoration: uppercase;
    margin-bottom: 5%;
}

.product-label a {
    color: #212121;
}

.product-category-description {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/*****************************
***** Product Category Index Style ***/

.product-nav-list {
	margin-left: 3rem;
/* 	margin-right: 3rem; */
	width: 75%;
}

.product-nav-list a {
    font-size: 1.5em;
    font-weight: 700;
    color: #E02B20;
}

.product-nav-list a:hover {
    color: #E02B20;
}

.product-img {

}