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

Kasgro Website - Build 3

Redesign by Dustin Ketterman

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

@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,900,100,200,700);

*, *:before, *:after {
 -moz-box-sizing: border-box; 
 -webkit-box-sizing: border-box; 
 box-sizing: border-box;
}

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

General Style

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

* {
	draggable: no;
	padding: 0;
	margin: 0;
}

html {
	background: white;
}

body {
	overflow-x: hidden;
}

a, a>* {
	-webkit-transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
	-o-transition: 0.1s ease-in-out;
	transition: 0.1s ease-in-out;

	text-decoration: none;
}



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

Font Style

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

h1, h2, h3, h4, h5, h6 {
	font-family: "Work Sans", "Segoe UI", sans-serif;
	font-weight: 200;
	line-height: 1.2em;
}

p, li, q, td, dt, dd {
	font-family: "Work Sans", "Segoe UI", sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.4em;
}

sup, sub {
	font-size: 0.6em;
	line-height: 0.6em;
	padding: 0;
	position: relative;
}

sup {
	top: 3px;
	left: 2px;
}

sub {
	bottom: 5px;
	right: 2px;
}

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

Functional Elements Style

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

.clear {
	clear: both;
}

.corset {
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}

.grayStripes {
	background: linear-gradient(rgba(100,100,100,0.1), rgba(240,240,240,0.1), rgba(30,30,30,0.1), rgba(30,30,30,0.1)), repeating-linear-gradient(-45deg, #232323 0, #232323 5px, #262626 5px, #262626 10px, #232323 10px);
	height: 23px;
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	position: relative;
	z-index: 200;
}

.third, .twothird, .fourth, .threefourth, .half, .whole {
	display: inline-block;
	vertical-align: top;
	padding: 3px;
}

.third {
	width: 33.3333%;
	width: calc(100%/3);
}

.twothird {
	width: 66.6666%;
	width: calc(200%/3);
}

.fourth {
	width: 25%;
}

.threefourth {
	width: 75%;
}

.fifth {
	width: 20%;
	display: inline-block;
	vertical-align: top;
}

.half {
	width: 50%;
}

.whole {
	width: 100%;
}

.connector {
	height: 40px;
	width: 2px;
	margin: 0 auto;
	display: block;
	background: #CCCCCC;
}

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

Navigation Style

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

nav {
	font-size: 0;
	background: white;
	text-align: left;
}

nav .corset {
	padding-bottom: 3px;
}

#kasgro {
	background: white;
	color: black;
	font-family: "Arial Black";
	font-weight: 800;
	padding-top: 16px;
	padding-bottom: 0px;
	text-align: center;
	width: 25%;
	display: inline-block;
	cursor: default;

	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	position: relative;
}

#kasgro h1::selection {
	background: transparent;
}

#kasgro a {
	color: black;
}

nav ul {
	width: 75%;
	font-size: 0;
	display: inline-block;
	position: absolute;
	right: -1%;
	bottom: 5px;
}

nav ul li {
	list-style: none;
	display: inline-block;
	width: 14%;
	text-align: center;
	font-size: 14px;
	vertical-align: bottom;
	line-height: 1em;
}

nav ul li a {
	display: block;
	color: black;
	padding: 22px 0;
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
}

nav ul li:not(:first-of-type) {
	border-left: 2px solid #CCCCCC;
}

nav ul li a::first-line {
	font-weight: 700;
	letter-spacing: 1px;
}

nav ul li a:link, nav ul li a:visited {
	background: white;
}

nav ul li a:hover, nav ul li a:active {
	background: #CCCCCC;
}

nav ul li a.active {
	background: #CCCCCC;
}

#navButton {
	display: none;
}

#kasgro h1, h1.logo {
	font-size: 54px;
	font-family: "Work Sans", "Arial Black", Arial;
	font-weight: 900;
	font-variant: small-caps;
	margin-bottom: -0.1em;
	letter-spacing: -1px;
	line-height: 57px;
	position: relative;
	top: 1px;
}

nav #kasgro h1:hover {
	-webkit-filter: drop-shadow(2px 2px 3px rgba(90,90,90,0.7));
	-moz-filter: drop-shadow(2px 2px 3px rgba(90,90,90,0.7));
	filter: drop-shadow(2px 2px 3px rgba(90,90,90,0.7));
}

#homePageTitle {
	font-size: 30px;
	font-family: 'Work Sans';
	font-weight: 200;
	position: absolute;
	top: 0;
	left: 0;
	width: 25%;
	text-align: center;
	display: block;
	color: black;
	opacity: 0;
	pointer-events: none;
	height: 3em;
	line-height: 3em;
}

#kasgro p:not(.rednready) {
	text-transform: lowercase;
	font-variant: small-caps;
	font-size: 18px;
	letter-spacing: 0.22em;
	padding-left: 0.475em;
	line-height: 1em;
	font-weight: 300;
	position: relative;
	bottom: 3px;
}

.KasgroK {
	color: transparent;
	background: url(images/images/logo_07.png);
	display: inline-block;
	background-size: auto 100%;
	width: 84px;
	height: 54px;
	margin-right: -0.25em;
	position: relative;
	bottom: 0.13em;
}

.KasgroK::selection {
	background: transparent;
}

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

Header Style

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

header {
	position: relative;
}

#MainImage {
	max-width: 1000px;
	height: 400px;
	max-height: 100vh;
	margin: 0 auto;
	position: relative;

	background-size: 110% auto;
	border-bottom: 2px solid white;
}

#carouselPort {
	height: 400px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 0;
}

#carousel {
	width: 10000px;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: -o-max-content;
	width: max-content;

	position: relative;
	font-size: 0;
}

.pony {
	border: 3px solid white;
	width: 1000px;
	height: 400px;
	display: inline-block;
	position: relative;
	max-height: 100vh;
}

#prevImage {
	border-top: 3px solid white;
	border-bottom: 3px solid white;
	background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0.5));
	background-size: 110% auto;
	
	height: 400px;
	max-height: 100vh;

	opacity: 1;
	position: absolute;
	top: 112px;
	left: 0;
}

#nextImage {
	border-top: 3px solid white;
	border-bottom: 3px solid white;
	background: linear-gradient(-90deg, rgba(255,255,255,1), rgba(255,255,255,0.5));
	background-size: 110% auto;

	height: 400px;
	max-height: 100vh;

	opacity: 1;
	position: absolute;
	top: 112px;
	right: 0;
}

#prevImage p, #nextImage p {
	line-height: 700px;
	font-size: 240px;
	color: white;
	font-weight: 100;
	text-shadow: 0 0 5px rgba(3,3,3,0);

	-webkit-transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
	-o-transition: 0.1s ease-in-out;
	transition: 0.1s ease-in-out;

	display: none;
	position: absolute;
}

#prevImage p:hover, #nextImage p:hover {
	text-shadow: 0 0 30px rgba(3,3,3,0.4);
	cursor: pointer;
}

#prevImage::selection, #prevImage p::selection, #nextImage::selection, #nextImage p::selection {
	background: transparent;
}

#prevImage p {
	text-align: right;
	left: 0;
}

#nextImage p {
	text-align: left;
	right: 0;
}

#MainImage p {
	font-size: 16px;
	line-height: 1.2em;
}

#MainImage h1 {
	font-size: 48px;
}

#MainImage h2 {
	font-size: 42px;
	padding-bottom: 10px;
	padding-top: 10px;
	border-top: 3px double white;
	border-bottom: 3px double white;
	margin-bottom: 10px;
	margin-top: 10px;
}

#MainImage h3 {
	font-size: 36px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: 3px double white;
	border-bottom: 3px double white;
	margin-top: 5px;
	margin-bottom: 5px;
}

#MainImage h4 {
	font-size: 36px;
}

.bolder {
	font-weight: 900;
}

.block {
	position: relative;
	border: 3px solid white;
	color: white;
	float: left;
	text-align: center;
	background: rgba(30,30,30,0.5);

	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.block.dark {
	background: repeating-linear-gradient(-45deg, rgba(1,1,1,0.05) 0, rgba(1,1,1,0.05) 5px, rgba(1,1,1,0) 5px, rgba(1,1,1,0) 10px, rgba(1,1,1,0.05) 10px), rgba(30,30,30,0.8);
}

.block a:link, .block a:visited {
	color: white;
	font-style: italic;
	border-bottom: 1px dotted white;
}

.block:hover {
	background: repeating-linear-gradient(-45deg, rgba(1,1,1,0.05) 0, rgba(1,1,1,0.05) 5px, rgba(1,1,1,0) 5px, rgba(1,1,1,0) 10px, rgba(1,1,1,0.05) 10px), rgba(30,30,30,0.9);
}

.wide1 { width: 20%; }

.wide2 { width: 40%; }

.wide3 { width: 60%; }

.wide4 { width: 80%; }

.wide5 { width: 100%; }

.height1 { height: 200px; padding: 30px;}

.height2 { height: 400px; padding: 110px 60px; }

.wide5 { padding-left: 10%; padding-right: 30%; padding-top: 130px;}

.shortRound {
	width: 1000px;
	height: 400px;
	padding: 110px 30% 0 10%;
}

#MainImage .shortRound h2 { font-size: 48px; }

#mainContact {
	padding-top: 15px;
}

#caption {
	padding: 30px 15px 0 15px;
	background: white;
	cursor: pointer;

	position: absolute;
	right: 0;
	bottom: 0;
}

#caption p {
	color: black;
	font-size: 12px;
	line-height: 1.3em;
}

#caption.opened {
	opacity: 0;
	-webkit-transition: 1.2s ease-in;
	-moz-transition: 1.2s ease-in;
	-o-transition: 1.2s ease-in;
	transition: 1.2s ease-in;
}

#caption.opened:hover {
	opacity: 1;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.doublemdash {
	width: 13px;
	margin: 0 auto;
	height: 9px;
	border-bottom: 3px double white;
	margin-bottom: 6px;
}

#phoneIcon, #emailIcon {
	display: inline-block;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

.IBtext {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	padding-left: 42px;
	margin-left: -42px;
	width: 328px;
}

#secondaryPage #MainImage, #secondaryPage #carouselPort, #secondaryPage #prevImage, #secondaryPage #nextImage, #secondaryPage .pony {
	height: 400px;
}


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

Main Styling

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

main {
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0)), repeating-linear-gradient(-45deg, #FAFAFA 0, #FAFAFA 5px, white 5px, white 10px, #FAFAFA 10px);
	counter-reset: section;
}

main .corset {
	background: white;
	padding: 30px 0;
}

main h1.stripy {
	font-size: 42px;
	padding: 10px 0;
	color: #232323;
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px 60px;
	position: relative;
	color: black;
	font-weight: 300;
	border-bottom: 2px solid #CCCCCC;
	z-index: 2;
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(255,255,255,1) 100%), repeating-linear-gradient(-45deg, transparent 0px, transparent 5px, #F8F8F8 5px, #F8F8F8 10px, transparent 10px);
}

.thirdCase {
	font-size: 0;
	border-bottom: 2px solid #CCCCCC;
	border-top: 2px solid #CCCCCC;
	padding-bottom: 2px;
}

.thirdCase ~ .thirdCase {
	margin-top: 80px;
}

main .thirdCase .third, main .thirdCase .half {
	padding: 10px;
	position: relative;
}


main .pictobox::after {
	counter-increment: section;
	content: counter(section);
	color: #232323;
	font-family: "Work Sans", "Segoe UI", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1em;
	margin: 0;
	margin-top: -3px;
	margin-right: -4px;
	padding: 0;
	text-align: right;
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 0;
	right: 0;
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-bottom: 15px solid white;
	border-right: 15px solid white;

		-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

main .thirdCase .third:not(:first-of-type) {
	border-left: 2px solid #CCCCCC;
}

main .thirdCase .third, main .thirdCase .twoThird {
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

.pictobox {
	font-size: 36px;
	font-weight: 900;
	color: white;
	display: inline-block;
	background: blue;
	width: 100%;
	height: 150px;
	padding-top: 20px;
	position: relative;
}

main .third h3, main .half h3 {
	font-size: 24px;
	font-weight: 200;
	color: white;
	display: inline-block;
	width: 100%;
	padding: 10px 25px;	
	line-height: 1em;
	background: repeating-linear-gradient(-45deg, rgba(1,1,1,0.05) 0, rgba(1,1,1,0.05) 5px, rgba(1,1,1,0) 5px, rgba(1,1,1,0) 10px, rgba(1,1,1,0.05) 10px), rgba(30,30,30,0.9);
	position: absolute;
	bottom: 0;
	left: 0;
}

main .third img {
	margin: 0 auto;
	max-width: 80%;
	max-height: 150px;
	display: block;
}

.third a:link, .third a:visited {
	border-bottom: 1px dotted black;
	font-style: italic;
}

.third a:hover, .third a:active {
	color: red;
}

#expe {
	background: linear-gradient(rgba(30,30,30,0), rgba(30,30,30,0), rgba(0,0,0,0.75)), url(images/loaded4.jpg) no-repeat center center;
	background: url(images/schnabel.jpg) no-repeat;
	background-size: 100% auto;
	background-position: 50% 60%;
}

#serv {
	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.75)), url(images/alstom3.2.jpg) no-repeat center center;
	background: url(images/welding2.jpg) no-repeat center center;
	background-size: 100% auto;
	background-position: center right;
}

#opti {
	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.75)), url(images/loaded3.jpg) no-repeat center center;
	background: url(images/loaded3.jpg) no-repeat;
	background-size: 105% auto;
	background-position: 50% 40%;
}

#manu {
	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.75)), url(images/loaded3.jpg) no-repeat center center;
	background: url(images/welding1.jpg) no-repeat;
	background-size: 115% auto;
	background-position: 0% 43%;
}

#mana {
	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.75)), url(images/loaded3.jpg) no-repeat center center;
	background: url(images/tnj.jpg) no-repeat;
	background-size: 110% auto;
	background-position: 100% 38%;
}

.fullWide {
	padding: 30px 20%;
	margin: 0 auto;
	width: 100%;
	border-bottom: 2px solid #CCCCCC;
	border-left: 2px solid #CCCCCC;
	border-right: 2px solid #CCCCCC;

	line-height: 1.3em;
}

.fullWide p {
	padding-bottom: 8px;
	line-height: 1.25em;
	font-size: 16px;
}

main .third.homeText p, main .half.homeText p {
	padding: 10px;
	line-height: 1.3em;
	font-size: 16px;
	color: black;
}

main .third.homeText p::after, main .half.homeText p::after {
	content: "";
	display: block;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 6px;
}

#rednreadybanner {
	background: red;
	text-align: center;
	display: block;
	width: 50%;
	padding: 9px;
	margin: 0 auto;
	position: relative;
	margin-top: 65px;
	margin-bottom: 25px;
}

#rednreadybanner::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -70px;
	background: linear-gradient(110deg, transparent 0px, transparent 20px, red 20px, red 30px, transparent 30px, transparent 40px, red 40px, red 50px, transparent 50px, transparent 60px, red 60px, red 70px);
	width: 70px;
	height: 36px;
}

#rednreadybanner::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: -70px;
	background: linear-gradient(290deg, transparent 0px, transparent 20px, red 20px, red 30px, transparent 30px, transparent 40px, red 40px, red 50px, transparent 50px, transparent 60px, red 60px, red 70px);
	width: 70px;
	height: 36px;
}

#rednreadybanner p {
	font-size: 18px;
	line-height: 1em;
	color: white;
	font-family: serif;
}

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

	Main - General Information Page

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

#general .pictobox {
	height: 200px;
}

main#general .third h3, main#general .half h3 {
	font-size: 30px;
	font-weight: 200;
	padding: 10px 25px;	
}

#general .half {
	border-left: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;

		-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

#general .half:hover {
	background: #CCCCCC;
}

#general .half:hover .pictobox::after {
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-bottom: 15px solid #CCCCCC;
	border-right: 15px solid #CCCCCC;
}

#general .half:nth-of-type(2) {
	border-right: 2px solid #CCCCCC;
}

#general .contact {
	text-align: center;
	padding-top: 5px;
}

#general .asideContents {
	padding: 0;
}

#timeLine {
	padding: 0;
	position: relative;
	z-index: 900;
}

#timeLine dt, #timeLine dd {
	border-left: 2px solid #CCCCCC;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 20px;
	position: relative;
}

#timeLine dt {
	font-size: 24px;
	font-weight: 200;
	line-height: 1.3em;
	cursor: pointer;
	padding-top: 6px;

	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

#timeLine dt::before {
	content: '';
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	border: 2px solid #CCCCCC;
	background: white;
	border-radius: 5px;
	left: -6px;
	top: 0.75em;
}

#timeLine dt.activeTime::before {
	background: #D2D2D2;
}

#timeLine dt::-moz-selection {
	background-color: transparent;
	color: black;
}

#timeLine dt::selection {
	background-color: transparent;
	color: black;
}


#timeLine dd {
	display: none;
	font-size: 15px;
	line-height: 1.2em;
	padding: 10px;
	margin-right: 10px;

	background: repeating-linear-gradient(-45deg, rgba(1,1,1,0.05) 0, rgba(1,1,1,0.05) 5px, rgba(1,1,1,0) 5px, rgba(1,1,1,0) 10px, rgba(1,1,1,0.05) 10px), rgba(30,30,30,0.9);
	color: white;
}

#timeLine dd::after {
	content: '';
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	border-left: 10px solid transparent;
	border-top: 10px solid transparent;
	border-right: 10px solid white;
	border-bottom: 10px solid white;

	right: 0;
	bottom: 0;
}

#timeLine dd.activeTime::before {
	width: 12px;
	height: 12px;
	background: transparent;
}

#timeLine dt.activeTime {
	font-size: 48px;
}

#timeLine dd.activeTime {
	display: block;
}

#historyTitle {
	background: repeating-linear-gradient(-45deg, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 5px, rgba(0,0,0,0.4) 5px, rgba(0,0,0,0.4) 10px, rgba(0,0,0,0.3) 10px), url(images/tracks.jpg);
	background-size: 150%;
	background-position: 40% 50%;
	height: 5em;
	padding-top: 1.35em;
}

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

	Management

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

.contact .personnel {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3em;
	padding: 0;
	margin: 0;
	padding-top: 0.6em;
}

.contact p {
	text-align: center;
}

.contact .position {
	font-weight: 300;
}

.contact a {
	color: black;
}

.contact p.email, .contact p.phone {
	font-size: 16px;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
}

.contact .contactLink {
	font-size: 14px;
	border: 2px solid #CCCCCC;
	padding: 6px 12px;
	line-height: 1em;
	color: #CCCCCC;
	font-weight: 700;
	display: inline-block;
	margin: 0 auto;
	margin-top: 28px;

	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

.contact .contactLink:hover {
	color: black;
	border-color: black;
}

.contact .officePhone {
	border-bottom: 2px solid #CCCCCC;
	display: inline-block;
	padding-bottom: 10px;
}

.graphPic {
	width: 175px;
	height: 175px;
	display: block;
	outline: 2px solid #CCCCCC;
	border: 8px solid white;
	background: white;
	padding: 10px;
	overflow: hidden;
	text-align: center;
	display: none;
}

.management p {
	clear: both;
}

.graphPic:nth-of-type(odd) {
	float: left;
	margin-right: 15px;
}

.graphPic:nth-of-type(even) {
	float: right;
	margin-left: 15px;
}

#management .graphPic:nth-of-type(1) {
	background: url(images/team1.jpg);
	width: 275px;
	background-size: auto 160%;
	background-position: 50% 25%;
}

#management .graphPic:nth-of-type(2) {
	background: url(images/jeff.jpg);
	background-size: auto 140%;
	background-position: 35% 30%;
}

#management .graphPic:nth-of-type(3) {
	background: url(images/rick.jpg);
	background-size: auto 160%;
	background-position: 60% 20%;
}

#teamPix {
	position: relative;
	width: 100%;
	height: 190px;
	font-size: 0;
	margin-top: 15px;
	overflow-x: hidden;
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
}

#teamPix .teamPic {
	width: 33.3333%;
	width: calc(100% / 3);
	height: 100%;
	display: inline-block;
}

#teamPix .teamPic:not(:first-of-type) {
	border-left: 2px solid #CCCCCC;
}

.teamPic:nth-of-type(1) {
	background: url(images/team1.jpg);
	background-size: auto 220%;
	background-position: 53% 25%;
}

.teamPic:nth-of-type(2) {
	background: url(images/jeff.jpg);
	background-size: auto 140%;
	background-position: 35% 30%;
}

.teamPic:nth-of-type(3) {
	background: url(images/rick.jpg);
	background-size: auto 160%;
	background-position: 60% 20%;
}

.coverall {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	position: absolute;
	top: 0;
	left: 0;
}

.coverall {
	mix-blend-mode: hard-light;
}

.coverall::after {
	content: "";
	width: 33.5%;
	width: calc(100% / 3 + 2px);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: block;
	background: rgba(255,255,255,0.4);
	mix-blend-mode: hard-light;
}

@keyframes moveCycle {
	10% { left: 0; }
	22% { left: 33%; left: calc(100% / 3);}
	43% { left: 33%; left: calc(100% / 3);}
	55% { left: 67%; left: calc(200% / 3);}
	76% { left: 67%; left: calc(200% / 3);}
	88% { left: 0; }
}

.coverall::after {
	animation-name: moveCycle;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}

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

	Manufacturing

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

#manufacturing .fullWide {
}

#manufacturing li {
	margin-left: 30px;
	font-size: 16px;
	/*list-style: none;*/
}

#manufacturing .serviceBox p, #manufacturing aside p {
	font-size: 16px;
	line-height: 1.2em;
	padding-bottom: 0.6em;
}

#manufacturing ul ul li {
	margin-left: 50px;
	font-size: 14px;
}

aside {
	padding: 0;
}

#manufacturing h4 {
	font-size: 30px;
	color: black;
	text-align: center;
}

#manufacturing h5 {
	font-size: 22px;
	color: black;
	text-align: left;
	font-weight: 300;
}

.asideBox {
	width: 100%;
	margin-top: 2px;
	border-bottom: 2px solid white;
	background: #EAEAEA;
}

.asideBox h4, #manufacturing .asideBox h4 {
	background: repeating-linear-gradient(-45deg, rgba(1,1,1,0.05) 0, rgba(1,1,1,0.05) 5px, rgba(1,1,1,0) 5px, rgba(1,1,1,0) 10px, rgba(1,1,1,0.05) 10px), rgba(30,30,30,0.9);

	font-size: 30px;
	text-align: center;
	color: white;
	padding: 15px 0;
	line-height: 1.1em;
	font-weight: 200;
}

.asideContents {
	padding: 10px;
	border: 2px solid #CCCCCC;
	color: black;
	background: white;
	margin: 8px;
}

#manufacturing .half {
	padding: 0;
	min-width: 200px;
	background: white;
}

#manufacturing .half div {
	border: 2px solid #CCCCCC;
	margin: 1px;
	margin-top: 2px;
	padding: 15px;
}

.serviceBox {
	width: calc(150%);
	position: relative;
	left: -25%;
	padding: 1px;
	padding-top: 20px;
}

#manufacturing .contactLink {
	font-size: 14px;
}

.articleLink a:link, .articleLink a:visited {
	margin: 0 auto;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	display: block;
	width: 92%;
	border: 2px solid #CCCCCC;
	padding: 5px;
	line-height: 1em;
	color: #CCCCCC;

		-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

.articleLink a:hover, .articleLink a:active {
	color: black;
	border: 2px solid black;
}

#manufacturing .thirdCase, #general .thirdCase {
	border: none;
}

#manufacturing .threefourth, #general .threefourth {
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
	padding: 0;
	margin: 3px;
	margin-top: 5px;
	width: calc(75% - 6px);
	padding-bottom: 2px;
}

#manufacturing #wecx {
	background: repeating-linear-gradient(-45deg, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 5px, rgba(0,0,0,0.4) 5px, rgba(0,0,0,0.4) 10px, rgba(0,0,0,0.3) 10px), url(images/beardSchnabel.jpg);
	background-size: 200%;
	background-position: 100% 50%;
	height: 6em;
	padding-top: 1.8em;
}

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

	Main - Link Page

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

main .third.industryLink::after {
	counter-increment: section;
	content: counter(section);
	color: white;
	font-family: "Work Sans", "Segoe UI", sans-serif;
	font-weight: 200;
	font-size: 16px;
	line-height: 1em;
	margin: 0;
	margin-top: 0px;
	margin-right: 0px;
	padding: 0;
	text-align: right;
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 0;
	right: 0;
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-bottom: 15px solid #CCCCCC;
	border-right: 15px solid #CCCCCC;

	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

#linkPage .thirdCase:not(:first-of-type) {
	border-top: 0;
	margin-top: 0;
}

main .third.industryLink:hover::after {
	color: #232323;
}

main .third.industryLink {
	padding: 40px 20px;
}

.linkText {
	background: repeating-linear-gradient(-45deg, rgba(1,1,1,0.05) 0, rgba(1,1,1,0.05) 5px, rgba(1,1,1,0) 5px, rgba(1,1,1,0) 10px, rgba(1,1,1,0.05) 10px), rgba(30,30,30,0.9);
	opacity: 0;
	display: block;
	width: 100%;
	position: absolute;
	padding: 40px 0;
	height: 230px;
	top: 0;
	left: 0;

	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

.linkText h4 {
	text-align: center;
	font-size: 24px;
	font-weight: 900;
	color: white;
	padding: 0 10px;
	position: absolute;
	bottom: 50%;	
	line-height: 1.1em;
	width: 100%;
}

.linkText p {
	text-align: left;
	color: white;
	font-size: 14px;
	font-weight: 300;
	padding: 0 20px;
	font-style: italic;
	line-height: 1.2em;

	position: absolute;
	top: 50%;
}

.linkText:hover {
	opacity: 1;
}

#secondaryPage main .third.industryLink {
  height: 230px;
  padding-top: 115px;
  padding-bottom: 115px;
}

#secondaryPage main .third.industryLink img {
  margin-top: 0;
}

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

Equipment Page 

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

#theEquipmentList .thirdCase {
	border-bottom: none;
	padding-bottom: 0;
}

.lvl1 {
	width: 33.333333333333333%;
	width: calc(100%/3); 
	position: relative;
	display: inline-block;
	cursor: pointer;
	border-bottom: 2px solid #CCCCCC;
}

.lvl1 h1 {
	font-size: 150px;
	line-height: 0.635em;
	color: rgb(255,255,255);
	opacity: 0.6;
	font-weight: 900;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 10px;
	bottom: 60px;
	letter-spacing: -8px;
	z-index: 101;
	padding-bottom: 0.028em;
	pointer-events: none;

	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

.lvl1:not(#others) {
	border-right: 2px solid #CCCCCC;
}

.lvl1:not(#others) h1::after {
	content: "s";
	font-size: 100px;
	display: inline;
	color: rgb(255,255,255);
	position: relative;
	bottom: 1px;
	left: 0;
	pointer-events: none;

		-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

#others h1 {
	bottom: 58px;
}

#others .therNoO {
	font-size: 90px;
	letter-spacing: -2px;
	padding-left: 5px;
}

#fd, #fm {
	position: relative;
}

#fd .picture, #fm .picture, #others .picture {
	position: relative;
	left: 0;
	top: 0;
	height: 300px;
	width: 100%;
}

#fd .picture {
	background: url(images/loaded3.jpg) 59% 36% no-repeat;
	background-size: auto 110%;
}

#fm .picture {
	background: url(images/srt4.jpg) 0% 100% no-repeat;
	background-size: auto 110%;
}

#others .picture {
	background: url(images/caboose.jpg) 5% 60% no-repeat;
	background-size: auto 125%;
}

.picture h5 {
	width: 100%;
	background: repeating-linear-gradient(-45deg, rgba(1,1,1,0.05) 0, rgba(1,1,1,0.05) 5px, rgba(1,1,1,0) 5px, rgba(1,1,1,0) 10px, rgba(1,1,1,0.05) 10px), rgba(30,30,30,0.85);
	font-size: 20px;
	color: white;
	font-weight: 200;
	position: absolute;
	bottom: 0;
	padding: 20px 40px;
	text-align: right;
	z-index: 100;
	pointer-events: none;
}

.picture h5::after {
	content: "";
	width: 100%;
	position: absolute;
	height: 15px;
	left: 0;
	top: -15px;
	background: rgba(255,255,255,1);
	pointer-events: none;
}

.lvl1 .grayArea {
	width: 100%;
	height: 300px;
	background: repeating-linear-gradient(-45deg, rgba(1,1,1,0.05) 0, rgba(1,1,1,0.05) 5px, rgba(1,1,1,0) 5px, rgba(1,1,1,0) 10px, rgba(1,1,1,0.05) 10px), rgba(0,0,0,0.25);
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;

	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

.lvl1 .grayArea:hover, .lvl1.active .grayArea {
	opacity: 1;
}

.lvl1:hover > h1, .lvl1:hover > h1:not(#others)::after, .lvl1.active > h1, .lvl1.active > h1:not(#others)::after {
	opacity: 1;
}

.lightStripes {
	width: 100%;
	height: 30px;
	background: repeating-linear-gradient(-45deg, #FCFCFC 0, #FCFCFC 5px, #FFFFFF 5px, #FFFFFF 10px, #FCFCFC 10px);
}

.axleBox {
	display: none;
	border-bottom: 2px solid #CCCCCC;
}

.lvl2.fifth:not(:first-of-type) {
	border-left: 2px solid #CCCCCC;
}

.lvl2 {
	padding: 36px 0;
	cursor: pointer;
}

.lvl2, .lvl2 > *, .lvl2:hover > *::after {
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

.lvl2:hover > *, .lvl2:hover > *::after {
	color: #232323;
}

.lvl2 h2 {
	font-size: 78px;
	font-weight: 900;
	text-align: center;
	color: #CCCCCC;
	line-height: 1em;
}

.lvl2 h2::after {
	content: "axle";
	display: block;
	color: #CCCCCC;
	font-family: "Work Sans", "Segoe UI", sans-serif;
	font-size: 20px;
	line-height: 1em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: relative;
	bottom: 12px;
}

.lvl2.active {
	background: #232323;
}

.lvl2.active h2, .lvl2.active h2::after {
	color: white;
}

table {
	border-collapse: collapse;
	width: 100%;
}

#theTable {
	display: none;
	width: 100%;
	position: relative;
}

#theTable tr {
	width: 100%;
}

#theTable td {
	font-size: 14px;
	font-weight: 300;
	border-bottom: 2px solid #CCCCCC;
	text-align: center;
	padding: 3px 0;
}

#theTable .labels {
	max-width: 940px;
}

#theTable .labels td {
	color: #FFFFFF;
	font-weight: 700;
	line-height: 1.1em;
	border-top: none;
	background: #CCCCCC;
}

#theTable td.tableTitle {
	text-align: left;
}

#theTable tr:not(.labels) {
	display: none;
}

#theTable td.tableLvl1 {
	background: repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #DEDEDE 5px, #DEDEDE 10px, transparent 10px);
	color: #232323;
	font-weight: 900;
	font-size: 30px;
	padding: 0;
	padding-left: 10px;
}

#theTable td.tableLvl2 {
	font-weight: 900;
	padding-left: 20px;
	font-size: 18px;
}

#theTable td.tableLvl2::first-letter {
	color: red;
}

#theTable .note {
	font-weight: 300;
	font-style: italic;
	font-size: 14px;
	vertical-align: middle;
}

#theTable tr.fd {
	width: 100%;
}

#theTable .carInitial {
	width: 29%;
}

#theTable .carType {
	width: 10%;
}

#theTable .carLength {
	width: 10%;
}

#theTable .carHeight {
	width: 10%;
}

#theTable .carLoad {
	width: 18%;
}

#theTable .carQuantity {
	width: 7%;
}

#theTable .carDrawing {
	width: 16%;
	cursor: pointer;
	font-weight: bold;

	-webkit-transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
	-o-transition: 0.1s ease-in-out;
	transition: 0.1s ease-in-out;
}

#theTable .carDrawing:hover {
	color: #BCBCBC;
}

#showAll {
	width: 120px;
	height: 60px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
	display: block;
	margin: 0 auto;
	padding: 3px 15px;
	padding-top: 15px;
	background: #CCCCCC;
	cursor: pointer;

	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

#showAll p {
	color: #FFFFFF;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.1em;
	cursor: pointer;
}

#showAll:hover {
	background: #BCBCBC;
}

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

Tariff Style

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

#tariff .tariffSection {
	padding: 0;
}

#tariff .tariffSection h3 {
	display: block;
	text-align: center;
	color: black;
	background: white;
	position: relative;
	line-height: 1.1em;
	padding: 49px 0;
	font-weight: 300;
}

#tariff .tariffSection h3:hover {
	background: #CCCCCC;
}

#tariff .third {
	border-bottom: 2px solid #CCCCCC;
}

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

Cleaning Style

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

#weldingGuide, #cleaningGuide {
	padding-bottom: 2px;
}

#cleaning .third, #cleaning .twoThird {
	display: inline-block;
	padding: 0;
}

#cleaning .twoThird {
	width: 66%;
}

.cleaningPic {
	padding: 0;
	margin: 0;
}

.cleaningPic img {
	width: 100%;
}

#cleaning .third img, #cleaning .twoThird img {
	max-width: 100%;
	width: 100%;
	max-height: 100%;
	height: auto;
}

.cleaningPics {
	padding: 20px;
	padding-bottom: 0;
	position: relative;
	height: 460px;
	border: 2px solid #CCCCCC;
	background: repeating-linear-gradient(-45deg, transparent 0px, transparent 5px, #F8F8F8 5px, #F8F8F8 10px, transparent 10px);

}

.cleaningPics .cleanPic {
	width: 36%;
	display: block;
	position: absolute;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	z-index: 8;

	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

.cleanPic img {
	width: 100%;
}

main .cleaningPics .cleanPic::after {
	counter-increment: section;
	content: counter(section);
	color: #232323;
	font-family: "Work Sans", "Segoe UI", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1em;
	margin: 0;
	margin-top: -3px;
	margin-right: 0;
	padding: 0;
	text-align: right;
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 0;
	right: 0;
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-bottom: 15px solid white;
	border-right: 15px solid white;
}

.cp1 .cleanPic:nth-of-type(1), .cp1 .cleanPic:nth-of-type(1) img {
	z-index: 11;

	-ms-transform-origin: 0 0 0;
	-webkit-transform-origin: 0 0 0;
	transform-origin: 0 0 0;
}

.cp1 .cleanPic:nth-of-type(2), .cp1 .cleanPic:nth-of-type(2) img {
	top: 40%;
	left: 32%;
	z-index: 10;

	-ms-transform-origin: 50% 100% 0;
	-webkit-transform-origin: 50% 100% 0;
	transform-origin: 50% 100% 0;
}

.cp1 .cleanPic:nth-of-type(3), .cp1 .cleanPic:nth-of-type(3) img {
	right: 20px;
	z-index: 9;

	-ms-transform-origin: 100% 0 0;
	-webkit-transform-origin: 100% 0 0;
	transform-origin: 100% 0 0;
}

.cp2 .cleanPic:nth-of-type(1){
	z-index: 11;
	top: 40%;

	-ms-transform-origin: 0 100% 0;
	-webkit-transform-origin: 0 100% 0;
	transform-origin: 0 100% 0;
}

.cp2 .cleanPic:nth-of-type(2){
	left: 32%;
	z-index: 10;

	-ms-transform-origin: 50% 0 0;
	-webkit-transform-origin: 50% 0 0;
	transform-origin: 50% 0 0;
}

.cp2 .cleanPic:nth-of-type(3){
	top: 40%;
	right: 20px;
	z-index: 9;

	-ms-transform-origin: 100% 100% 0;
	-webkit-transform-origin: 100% 100% 0;
	transform-origin: 100% 100% 0;
}

.cleaningPics .cleanPic:hover {
	-ms-transform: scale(1.7,1.7);
	-webkit-transform: scale(1.7,1.7);
	transform: scale(1.7,1.7);
	z-index: 15;
}

.cleaningText {
	border-bottom: 2px solid #CCCCCC;
	width: 100%;
	padding: 10px 0;
	border: 2px solid #CCCCCC;
	border-top: none;
}

.cleaningText h3 {
	color: red;
	font-size: 42px;
	line-height: 1em;
	font-weight: 300;
	display: inline-block;
	width: 40%;
	text-align: right;
}

.cleaningText p {
	display: inline-block;
	font-size: 16px;
	line-height: 1.2em;
	width: 50%;
	vertical-align: top;
	padding-left: 1%;
	border-left: 2px solid #CCCCCC;
	margin-left: 1%;
}

.photoer {
	cursor: pointer;
}

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

Footer Style

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

footer {
	background: linear-gradient(90deg, rgba(30,30,30,0), rgba(30,30,30,1), rgba(30,30,30,1), rgba(30,30,30,1), rgba(30,30,30,1), rgba(30,30,30,0)), repeating-linear-gradient(-45deg, #232323 0, #232323 5px, #1F1F1F 5px, #1F1F1F 10px, #232323 10px);
}

footer .corset {
	padding: 20px 0 30px 0;
	font-size: 0;
	background: rgb(30,30,30);
}

footer a {
	color: white;
}

footer h4 {
	padding: 10px 0 5px 0;
	font-size: 18px;
	font-weight: 700;
	color: white;
	text-align: left;
}

footer .fourth p, footer .half p {
	font-size: 14px;
	font-weight: 200;
	color: white;
	text-align: left;
	padding: 0 10px;
	line-height: 1.5em;
}

.red {
	background: red;
	width: 100%;
	padding-top: 7px;
	padding-bottom: 8px;
}

.red p {
	font-size: 14px;
	color: white;
	text-align: center;
}

footer .sitemap a:link, footer .contacter a:link, footer .contacter a:visited footer .sitemap a:visited {
	border-bottom: 1px dotted transparent;
}

footer .sitemap a:active, footer .contacter a:active, footer .contacter a:hover, footer .sitemap a:hover {
	border-bottom: 1px dotted white;
}

footer .social {
	padding: 20px;
	width: 100%;
	text-align: center;
}

footer .social a {
	display: inline-block;
	width: 42px;
	height: 42px;
	border-radius: 21px;
	margin-right: 20px;
}

footer .social a:link, footer .social a:visited {
	background: transparent;
}

footer .social a:hover, footer .social a:active {
	background: red;
}

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

Contact Sheet outline-style: 

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

#contactContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: repeating-linear-gradient(-45deg, rgba(1,1,1,0.05) 0, rgba(1,1,1,0.05) 5px, rgba(1,1,1,0) 5px, rgba(1,1,1,0) 10px, rgba(1,1,1,0.05) 10px), rgba(30,30,30,0.8);
	z-index: 1000;
	display: none;
}

#contactFrame {
	margin: 0 auto;
	position: fixed;
	width: 500px;
	height: 80vh;
	top: 10vh;
	left: calc(50vw - 250px);
	background: white;
	border: 10px solid #CCCCCC;
	border-radius: 20px;
	overflow-y: scroll;
	z-index: 1001;
	display: block;
	display: none;
}

#contact {
	padding: 50px;
	position: relative;
	z-index: 1002;
}

#exitButton {
	display: none;
	font-family: 'Work Sans';
	position: fixed;
	top: calc(10vh + 20px);
	right: calc(50% - 210px);
	width: 30px;
	height: 30px;
	border: 1px solid #CCCCCC;
	font-weight: 200;
	border-radius: 15px;
	font-size: 24px;
	text-align: center;
	line-height: 1.1em;
	color: #CCCCCC;
	background: white;
	cursor: pointer;
	z-index: 10005;

	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

#exitButton:hover {
	color: black;
	border: 1px solid black;
}

#contact h1 {
	text-align: center;
}

#contact h1.contactSheet {
	font-size: 30px;
	font-weight: 200;
	line-height: 1.1em;
	padding-bottom: 14px;
}

#contact h2 {
	font-size: 26px;
	font-weight: 400;
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
	padding: 4px;
	background: repeating-linear-gradient(-45deg, transparent 0px, transparent 5px, #F8F8F8 5px, #F8F8F8 10px, transparent 10px);
}

#contact h4 {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	border-left: 2px solid #CCCCCC;
	padding-left: 12px;
	padding-top: 6px;
}

#contact h4 .position {
	font-weight: 200;
}

.contactInfo {
	border-left: 2px solid #CCCCCC;
	padding-bottom: 6px;
}

#contact p {
	font-size: 14px;
	margin: 0;
	font-weight: 400;
	padding-left: 24px;
}

#contact a {
	color: black;
}

#contact p.email a::before, #manufacturing p.email a::before, #management p.email a::before {
	content: url(images/icon_email_red.png);

	display: inline-block;
	padding: 0;
	margin: 0;
	overflow: hidden;
	width: 64px;
	height: 64px;
	margin-right: -38px;
	margin-bottom: -48px;
	vertical-align: text-top;

	-ms-transform-origin: 0 0 0;
	-webkit-transform-origin: 0 0 0;
	transform-origin: 0 0 0;

	-webkit-transform: scale(0.25,0.25);
	-moz-transform: scale(0.5,0.5);
	transform: scale(0.25,0.25);
}

#contact p.phone::before, #management p.phone::before, #manufacturing p.phone::before {
	content: url(images/icon_phone3_red.png);

	display: inline-block;
	padding: 0;
	margin: 0;
	overflow: hidden;
	width: 64px;
	height: 64px;
	margin-right: -43px;
	margin-bottom: -48px;
	vertical-align: text-top;

	-ms-transform-origin: 0 0 0;
	-webkit-transform-origin: 0 0 0;
	transform-origin: 0 0 0;

	-webkit-transform: scale(0.25,0.25);
	-moz-transform: scale(0.5,0.5);
	transform: scale(0.25,0.25);
}

.contactLink {
	cursor: pointer;
}




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

	Media Queries for different device sizes follow.

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

@media only screen and (max-width: 1250px) { #phoneIcon, #emailIcon { display: none; } #nextImage p, #prevImage p { font-size: 120px;} }

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

p, li, q, td, dt, dd {
	font-size: 14px;
}

.corset { width: 100%; padding: 0 6px;}

.grayStripes {
	background: linear-gradient(rgba(100,100,100,0.1), rgba(240,240,240,0.1), rgba(30,30,30,0.1), rgba(30,30,30,0.1)), repeating-linear-gradient(-45deg, #232323 0, #232323 5px, #262626 5px, #262626 10px, #232323 10px);
	height: 23px;
	border-bottom: 3px solid white;
	border-top: 3px solid white;
}

.third, .twothird, .fourth, .threefourth, .half, .whole {
	display: inline-block;
	vertical-align: top;
	padding: 3px;
}

.third {
	width: 33.3333%;
	width: calc(100%/3);
}

.twothird {
	width: 66.6666%;
	width: calc(200%/3);
}

.fourth {
	width: 25%;
}

.threefourth {
	width: 75%;
}

.fifth {
	width: 20%;
	display: inline-block;
	vertical-align: top;
}

.half {
	width: 50%;
}

.whole {
	width: 100%;
}

.connector {
	display: none;
}

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

Navigation Style

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

nav {
	text-align: center;
}

nav .corset {
	padding-bottom: 3px;
}

#kasgro {
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0)), repeating-linear-gradient(-45deg, #FAFAFA 0, #FAFAFA 5px, white 5px, white 10px, #FAFAFA 10px);
	padding-top: 12px;
	padding-bottom: 2px;
	text-align: center;
	width: 100%;
	display: inline-block;
}

nav ul {
	width: 100%;
	position: relative;
	right: 0;
	bottom: 0;
}

nav ul li a {
	padding: 10px 0;
}

nav ul li a::first-line {
	letter-spacing: 0;
}

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

Header Style

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

#MainImage {
	width: 100%;
	height: auto;
	max-height: none;
}

#carouselPort {
	width: 100%;
/*	position: fixed;
	z-index: -10;*/
}

#prevImage {
	background: transparent;
	position: absolute;
}

#nextImage {
	background: transparent;
	position: absolute;
}

#prevImage p, #nextImage p {
	line-height: 800px;
	font-size: 90px;
	text-shadow: 0 0 5px rgba(3,3,3,0.8);
}

#prevImage p:hover, #nextImage p:hover {
	text-shadow: 0 0 8px rgba(3,3,3,1);
}

#MainImage p {
	font-size: 14px;
}

.wide2 { width: 50%; }

.wide3 { width: 50%; }

.height1 { height: 210px; padding: 30px 20px;}

.height2 { height: auto; padding: 60px 100px; width: 100%; }

.wide5 { padding-left: 10%; padding-right: 30%; padding-top: 130px;}

.shortRound {
	height: auto;
	width: 100%;
	padding: 60px 100px;
}

#MainImage .shortRound h2 { font-size: 48px; }

#caption {
	padding: 8px 15%;
	position: relative;
	right: 0;
	bottom: 0;
	width: 100%;
	height: auto;
}

#caption p {
	color: black;
	font-size: 12px;
	line-height: 1.3em;
}

#caption.opened {
	position: absolute;
	bottom: 0;
	opacity: 0.75;
	-webkit-transition: 1.2s ease-in;
	-moz-transition: 1.2s ease-in;
	-o-transition: 1.2s ease-in;
	transition: 1.2s ease-in;
}

.IBtext {
	text-align: center;
	width: auto;
}

#secondaryPage #MainImage, #secondaryPage #carouselPort, #secondaryPage #prevImage, #secondaryPage #nextImage, #secondaryPage .pony {
	height: auto;
}


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

Main Styling

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

main .corset {
	padding: 15px 5px;
}

main h1.stripy {
	font-size: 36px;
	padding: 10px 5px;
}

.thirdCase ~ .thirdCase {
	margin-top: 40px;
}

main .pictobox::after {
	font-size: 14px;
}

main .third h3, main .half h3 {
	font-size: 20px;
}

main .third img {
	margin: 0 auto;
	max-width: 80%;
	max-height: 150px;
	display: block;
}

#expe {
	background-size: 120% auto;
	background-position: 50% 60%;
}

#serv {
	background-size: 120% auto;
	background-position: center right;
}

#opti {
	background-size: 120% auto;
	background-position: 50% 40%;
}

#manu {
	background-size: 115% auto;
	background-position: 0% 43%;
}

#mana {
	background-size: 110% auto;
	background-position: 100% 38%;
}

.fullWide {
	padding: 30px 10%;
}

.fullWide p {
	padding-bottom: 8px;
	line-height: 1.25em;
	font-size: 14px;
}

main .third.homeText p, main .half.homeText p {
	padding: 10px;
	line-height: 1.3em;
	font-size: 14px;
	color: black;
}

#rednreadybanner {
	width: 75%;
	padding: 9px;
	margin-top: 35px;
	margin-bottom: 15px;
}

#rednreadybanner::before {
	height: 34px;
}

#rednreadybanner::after {
	height: 34px;
}

#rednreadybanner p {
	font-size: 16px;
}

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

	Main - General Information Page

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

#general .pictobox {
	height: 150px;
}

main#general .third h3, main#general .half h3 {
	font-size: 20px;
	padding: 10px;	
}

#timeLine dt, #timeLine dd {
	margin-left: 10px;
}

#timeLine dt {
	font-size: 24px;
	font-weight: 200;
	line-height: 1.3em;
	cursor: pointer;
	padding-top: 6px;

	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

#timeLine dd {
	font-size: 14px;
}

#timeLine dt.activeTime {
	font-size: 42px;
}

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

	Management

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

.contact .personnel {
	font-size: 18px;
}

.contact p.email, .contact p.phone {
	font-size: 14px;
}

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

	Manufacturing

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

#manufacturing li {
	margin-left: 18px;
	font-size: 14px;
}

#manufacturing .serviceBox p, #manufacturing aside p {
	font-size: 14px;
}

#manufacturing ul ul li {
	margin-left: 26px;
}

#manufacturing h4 {
	font-size: 22px;
}

#manufacturing h5 {
	font-size: 18px;
}

.asideBox h4, #manufacturing .asideBox h4 {
	font-size: 22px;
	padding: 20px 10px;
}

#manufacturing .half {
	padding: 0;
	min-width: 0;
	background: white;
}

.serviceBox {
	width: 100%;
	left: 0;
}

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

	Main - Link Page

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

main .third.industryLink::after {
	font-size: 14px;
}

.linkText {
	background: rgba(255,255,255,0.85);
	opacity: 1;
	padding: 30px 0;
	height: 230px;
}

.linkText h4 {
	font-size: 20px;
	font-weight: 700;
	color: black;
	position: relative;
	bottom: 3%;	
}

.linkText p {
	color: black;
	position: relative;
	top: 0;
}

.linkText:hover {
	opacity: 1;
}

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

Equipment Page 

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

.lvl1 h1 {
	font-size: 90px;
	bottom: 49px;
	letter-spacing: -3px;
}

.lvl1:not(#others) h1::after {
	font-size: 63px;
	bottom: 0;
}

#others h1 {
	bottom: 45px;
}

#others .therNoO {
	font-size: 54px;
	letter-spacing: 0;
	padding-left: 3px;
}

#fd .picture, #fm .picture, #others .picture {
	height: 250px;
}

.picture h5 {
	font-size: 16px;
	padding: 15px;
}

.picture h5::after {
	height: 10px;
	top: -10px;
}

.lvl1 .grayArea {
	height: 250px;
}

.lvl2 {
	padding: 30px 0;
}

.lvl2 h2 {
	font-size: 54px;
}

.lvl2 h2::after {
	font-size: 16px;
	bottom: 7px;
}

#theTable td.tableLvl1 {
	font-size: 24px;
}

#theTable td.tableLvl2 {
	font-size: 18px;
}

#showAll {
	width: 100px;
	height: 50px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	padding-top: 12px;
}

#showAll p {
	letter-spacing: 0;
}

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

Cleaning Style

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

#cleaning .third, #cleaning .twoThird {
	display: inline-block;
	padding: 0;
}

#cleaning .twoThird {
	width: 66%;
}

.cleaningPic {
	padding: 0;
	margin: 0;
}

.cleaningPic img {
	width: 100%;
}

#cleaning .third img, #cleaning .twoThird img {
	max-width: 100%;
	width: 100%;
	max-height: 100%;
	height: auto;
}

.cleaningPics {
	padding: 20px;
	padding-bottom: 0;
	position: relative;
	height: 70.5vw;
	border: 2px solid #CCCCCC;
	background: repeating-linear-gradient(-45deg, transparent 0px, transparent 5px, #F8F8F8 5px, #F8F8F8 10px, transparent 10px);

}

.cleaningPics .cleanPic {
	width: calc(50% - 15px);
	display: block;
	position: absolute;
	height: 33vw;
	overflow: hidden;
}

.cleanPic img {
	width: 110%;
}

main .cleaningPics .cleanPic::after {
	font-size: 14px;
}

.cp1 .cleanPic:nth-of-type(1), .cp1 .cleanPic:nth-of-type(1) img {
	left: 10px;
	top: 10px;
}

.cp1 .cleanPic:nth-of-type(2), .cp1 .cleanPic:nth-of-type(2) img {
	top: 10px;
	left: calc(50% + 5px);
}

.cp1 .cleanPic:nth-of-type(3), .cp1 .cleanPic:nth-of-type(3) img {
	right: calc(50% + 5px);
	top: 35.6vw;
}

.cp2 .cleanPic:nth-of-type(1){
	z-index: 11;
	top: 10px;
	left: 10px;
}

.cp2 .cleanPic:nth-of-type(2){
	left: calc(50% + 5px);
	top: 10px;
	z-index: 10;
}

.cp2 .cleanPic:nth-of-type(3){
	top: 35.6vw;
	right: calc(50% + 5px);
	z-index: 9;
}

.cleaningPics .cleanPic:hover {
	-ms-transform: none;
	-webkit-transform: none;
	transform: none;
	z-index: 15;
}

.cleaningText {
	border-bottom: 2px solid #CCCCCC;
	width: calc(50% - 15px);
	padding: 10px 0;
	border: 2px solid #CCCCCC;
	border-top: 2px solid #CCCCCC;
	position: relative;
	left: calc(50% + 5px);
	top: -34.6vw;
	background: white;
	margin-bottom: -28vw;
}

.cleaningText h3 {
	color: red;
	font-size: 30px;
	line-height: 1em;
	font-weight: 300;
	display: inline-block;
	width: 100%;
	text-align: left;
	padding-bottom: 5px;
	padding-left: 5px;
	border-bottom: 2px solid #CCCCCC;
}

.cleaningText p {
	display: inline-block;
	font-size: 14px;
	line-height: 1.2em;
	width: 96%;
	vertical-align: top;
	padding-left: 2%;
	border-left: 2px solid #CCCCCC;
	margin-left: 2%;
}

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

Footer Style

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

footer .corset {
	padding: 20px;
}

footer a {
	color: white;
}

footer h4 {
	padding: 10px 0 5px 0;
	font-size: 16px;
	font-weight: 700;
	color: white;
	text-align: left;
}

footer .fourth p, footer .half p {
	font-size: 14px;
	font-weight: 200;
	color: white;
	text-align: left;
	padding: 0 10px;
	line-height: 1.5em;
}

.red {
	background: red;
	width: 100%;
	padding-top: 7px;
	padding-bottom: 8px;
}

.red p {
	font-size: 12px;
	color: white;
	text-align: center;
}

footer .sitemap a:link, footer .contacter a:link, footer .contacter a:visited footer .sitemap a:visited {
	border-bottom: 1px dotted transparent;
}

footer .sitemap a:active, footer .contacter a:active, footer .contacter a:hover, footer .sitemap a:hover {
	border-bottom: 1px dotted white;
}

footer .social {
	padding: 20px;
	width: 100%;
	text-align: center;
}

footer .social a {
	display: inline-block;
	width: 42px;
	height: 42px;
	border-radius: 21px;
	margin-right: 20px;
}

footer .social a:link, footer .social a:visited {
	background: transparent;
}

footer .social a:hover, footer .social a:active {
	background: red;
}

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

Contact Sheet outline-style: 

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

#contactFrame {
	height: 90vh;
	top: 5vh;
}

#contact h2 {
	font-size: 24px;
}

#exitButton {
	top: calc(5vh + 20px);
}

#contact h4 {
	font-size: 18px;
}

#contact h4 .position {
	font-weight: 300;
}

.contactInfo {
	border-left: 2px solid #CCCCCC;
	padding-bottom: 6px;
}

}



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

.third, .twothird, .fourth, .threefourth, .half, .whole {
	width: 100%;
}

#manufacturing .threefourth, #general .threefourth {
	width: 100%;
}

.fifth {
	width: 20%;
	display: inline-block;
	vertical-align: top;
}

#MainImage {
	max-height: none;
}

#carouselPort {
	position: fixed;
	z-index: -10;
}

.wide2 { width: 50%; }

.wide3 { width: 50%; }

.height1 { height: 210px; padding: 10px 15px;}

.height2 { height: auto; padding: 70px 40px; width: 100%; }

.shortRound {
	height: auto;
	width: 100%;
	padding: 50px 30px;
	max-height: none;
}

#MainImage h2 {
	font-size: 36px;
	padding-bottom: 10px;
	padding-top: 10px;
	border-top: 3px double white;
	border-bottom: 3px double white;
	margin-bottom: 10px;
	margin-top: 10px;
}

#MainImage h3 {
	font-size: 24px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: 3px double white;
	border-bottom: 3px double white;
	margin-top: 5px;
	margin-bottom: 5px;
}

#MainImage h4 {
	font-size: 24px;
}

#MainImage .shortRound h2 { font-size: 36px; }

#caption {
	padding: 8px 5%;
	position: relative;
	right: 0;
	bottom: 0;
	width: 100%;
	height: auto;
}

#caption p {
	color: black;
	font-size: 12px;
	line-height: 1.3em;
}

#navButton {
	display: block;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	background: white;
	border: 2px solid #CCCCCC;
	border-radius: 1vw;
	margin-top: 5vw;
	margin-bottom: 5vw;
	position: absolute;
	right: 25px;
	top: 10px;
}

#navButton div {
	display: block;
	width: 24px;
	height: 3px;
	border-radius: 2px;
	background: #CCCCCC;
	margin: 0 6px;
	position: relative;
	top: 17px;
}

#navButton div::before, #navButton div::after {
	content: '';
	display: block;
	margin: 0 auto;
	width: 24px;
	height: 3px;
	background: #CCCCCC;
	border-radius: 1vw;
	position: relative;
}

#navButton div::before {
	bottom: 7px;
}

#navButton div::after {
	top: 4px;
}

#navButton.openNav {
	border-color: #999999;
}

#navButton.openNav div, #navButton.openNav div::before, #navButton.openNav div::after {
	background: #999999;
}

#kasgro {
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0)), repeating-linear-gradient(-45deg, #FAFAFA 0, #FAFAFA 5px, white 5px, white 10px, #FAFAFA 10px);
	padding-top: 20px;
	padding-bottom: 6px;
	text-align: left;
	width: 100%;
	display: inline-block;
	padding-left: 15px;
}

nav ul {
	width: 100%;
	position: relative;
	right: 0;
	bottom: 0;
	border: 2px solid #CCCCCC;
	border-top: none;
	display: none;
}

nav ul li {
	list-style: none;
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 14px;
	vertical-align: bottom;
	line-height: 1em;
}

nav ul li br {
	display: none;
}

nav ul li a {
	display: block;
	color: black;
	padding: 6px 0;
	border-top: 2px solid #CCCCCC;
	border-bottom: none;
}

nav ul li:not(:first-of-type) {
	border-left: none;
}

nav ul li a::first-line {
	font-weight: 300;
}

nav ul li a:link, nav ul li a:visited {
	background: white;
}

nav ul li a:hover, nav ul li a:active {
	background: #CCCCCC;
}

nav ul li a.active {
	background: #CCCCCC;
}

#rednreadybanner {
	width: 100%;
	margin-bottom: 0;
}

#rednreadybanner::before, #rednreadybanner::after {
	display: none;
}

main h1.stripy {
	font-size: 30px;
	padding: 10px 5px;
}

.lvl1 {
	width: 33.333333%;
	width: calc(100% / 3);
	width: 100%;
}

.lvl1 h1 {
	font-size: 60px;
	bottom: 27px;
	letter-spacing: -1px;
	left: 10px;
}

.lvl1:not(#others) {
	border-right: 2px solid #CCCCCC;
}

.lvl1:not(#others) h1::after {
	font-size: 48px;
}

#others h1 {
	bottom: 25px;
}

#others .therNoO {
	font-size: 42px;
}

#fd .picture, #fm .picture, #others .picture {
	position: relative;
	left: 0;
	top: 0;
	height: 120px;
	width: 100%;
}

#fd .picture {
	background: url(images/loaded3.jpg) 59% 36% no-repeat;
	background-size:  110%;
}

#fm .picture {
	background: url(images/srt4.jpg) 0% 70% no-repeat;
	background-size:  110%;
}

#others .picture {
	background: url(images/caboose.jpg) 5% 70% no-repeat;
	background-size:  110%;
}

.picture h5 {
	font-size: 16px;
	line-height: 1.1em;
	padding: 5px;
}

.picture h5::after {
	content: "";
	width: 100%;
	position: absolute;
	height: 5px;
	left: 0;
	top: -5px;
	background: rgba(255,255,255,1);
	pointer-events: none;
}

.lvl1 .grayArea {
	height: 120px;
}

.lvl2 {
	padding: 10px 0;
	cursor: pointer;
}

.lvl2 h2 {
	font-size: 36px;
}

.lvl2 h2::after {
	font-size: 14px;
	letter-spacing: 1px;
	position: relative;
	bottom: 5px;
}

#theTable td {
	font-size: 12px;
	font-weight: 300;
	border-bottom: 2px solid #CCCCCC;
	text-align: center;
	padding: 3px 0;
}

#theTable .labels {
	max-width: 940px;
}

#theTable .labels td {
	color: #FFFFFF;
	font-weight: 200;
	line-height: 1em;
	border-top: none;
	background: #CCCCCC;
}

#theTable td.tableTitle {
	text-align: left;
}

#theTable tr:not(.labels) {
	display: none;
}

#theTable td.tableLvl1 {
	font-size: 24px;
}

#theTable td.tableLvl2 {
	font-weight: 700;
	padding-left: 10px;
	font-size: 18px;
}

#theTable td.tableLvl2::first-letter {
	color: red;
}

#theTable .note {
	font-weight: 300;
	font-style: italic;
	font-size: 12px;
	vertical-align: middle;
}

#theTable tr.fd {
	width: 100%;
}

#theTable .carInitial {
	width: 29%;
}

#theTable .carType {
	width: 10%;
}

#theTable .carLength {
	width: 10%;
}

#theTable .carHeight {
	width: 10%;
}

#theTable .carLoad {
	width: 18%;
}

#theTable .carQuantity {
	width: 7%;
}

#theTable .carDrawing {
	width: 16%;
	cursor: pointer;
	font-weight: bold;
}

#theTable .carDrawing:hover {
	color: #BCBCBC;
}

#showAll {
	width: 80px;
	height: 40px;
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
	display: block;
	margin: 0 auto;
	padding: 3px 15px;
	padding-top: 3px;
	background: #CCCCCC;
	cursor: pointer;
}

#showAll p {
	font-weight: 400;
}

.cleaningPic {
	padding: 0;
	margin: 0;
}

.cleaningPics {
	padding: 10px;
	padding-bottom: 0;
	position: relative;
	height: auto;
	border: 2px solid #CCCCCC;
	background: repeating-linear-gradient(-45deg, transparent 0px, transparent 5px, #F8F8F8 5px, #F8F8F8 10px, transparent 10px);

}

.cleaningPics .cleanPic {
	width: calc(50% - 15px);
	width: 100%;
	display: block;
	position: relative;
	height: 54vw;
	overflow: hidden;
	margin-bottom: 10px;
}

.cleanPic img {
	width: 110%;
}

main .cleaningPics .cleanPic::after {
	font-size: 14px;
}

.cp1 .cleanPic:nth-of-type(1), .cp1 .cleanPic:nth-of-type(1) img {
	left: 0;
	top: 0;
}

.cp1 .cleanPic:nth-of-type(2), .cp1 .cleanPic:nth-of-type(2) img {
	top: 0;
	left: 0;
}

.cp1 .cleanPic:nth-of-type(3), .cp1 .cleanPic:nth-of-type(3) img {
	right: 0;
	top: 0;
}

.cp2 .cleanPic:nth-of-type(1){
	z-index: 11;
	top: 0;
	left: 0;
}

.cp2 .cleanPic:nth-of-type(2){
	left: 0;
	top: 0;
	z-index: 10;
}

.cp2 .cleanPic:nth-of-type(3){
	top: 0;
	right: 0;
	z-index: 9;
}

.cleaningPics .cleanPic:hover {
	-ms-transform: none;
	-webkit-transform: none;
	transform: none;
	z-index: 15;
}

.connector {
	display: block;
}

.cleaningText {
	border-bottom: 2px solid #CCCCCC;
	width: 100%;
	padding: 10px 0;
	border: 2px solid #CCCCCC;
	border-top: none;
	position: relative;
	left: 0;
	top: 0;
	background: white;
	margin-bottom: 0;
}

.cleaningText h3 {
	color: red;
	font-size: 20px;
	line-height: 1em;
	font-weight: 300;
	display: inline-block;
	width: 100%;
	text-align: left;
	padding-bottom: 5px;
	padding-left: 5px;
	border-bottom: 2px solid #CCCCCC;
}

.linkText {
	border-bottom: 2px solid #CCCCCC;
}

#contactFrame {
	width: 96%;
	left: 2%;
}

#exitButton {
	right: calc(3% + 20px);
}



}