Typography

Font-Faces

Noto Sans

Noto Sans Regular

Noto Sans Regular Italic

Noto Sans Bold

Noto Sans Bold Italic

Font Weight Helper Classes

Regular - '.font-regular'

Bold - '.font-bold'

Headings

Headings

CSS
          	
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: inherit;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 40px;
}
          	 
            
          

Heading 1 - <h1 class="heading1>

CSS
          	
h1, .heading1 {
  border-bottom: 2px solid #e0e0e0;
  font-size: 3.8rem;
  margin-bottom: 30px;
  padding-bottom: 10px;
}
          	 
            
          

Heading 2 - <h2 class="heading2>

CSS
          	
h2, .heading2 {
  font-size: 3.1rem;
}
          	 
            
          

Heading 3 - <h3 class="heading3>

CSS
          	
h3, .heading3 {
  font-size: 2.8rem;
  line-height: 3rem;
  margin-bottom: 20px;
}	
          
          	 
            
          

Heading 4 - <h4 class="heading4>

CSS
          	
h4, .heading4 {
  font-size: 2.5rem;
  line-height: 3rem;
} 		
          
          	 
            
          
Heading 5 - <h5 class="heading5>
CSS
          	
h5, .heading5 {
  font-size: 2.2rem;
  line-height: 3rem;
}	
          
          	 
            
          
Heading 6 - <h6 class="heading6>
CSS
          		
h6, .heading6 {
  font-size: 1.9rem;
  line-height: 3rem;
}		
          
          	 
            
          

Headings with border - '.heading-border'

CSS
          	
h1.heading-border, .heading1.heading-border, h2.heading-border, .heading2.heading-border, h3.heading-border, .heading3.heading-border, h4.heading-border, .heading4.heading-border, h5.heading-border, .heading5.heading-border, h6.heading-border, .heading6.heading-border {
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 15px;
}
          	 
            
          

Heading 1 - <h1 class="heading1 heading-border">

Heading 2 - <h2 class="heading2 heading-border">

Heading 3 - <h3 class="heading3 heading-border">

Heading 4 - <h4 class="heading4 heading-border">

Heading 5 - <h5 class="heading5 heading-border">
Heading 6 - <h6 class="heading6 heading-border">

Body Copy

Normal Body Copy

Lorem ipsum dolor bold copy sit amet, consectetur Default text hyperlink adipisicing elit. Nobis eos saepe, magnam ut nihil incidunt eaque nisi voluptates dolor accusamus perspiciatis eveniet, sint vel labore mollitia nostrum voluptatibus in voluptas.

Large Body Copy -
'.large-body-copy'

Lorem ipsum dolor bold copy sit amet, consectetur Default text hyperlink adipisicing elit. Nobis eos saepe, magnam ut nihil incidunt eaque nisi voluptates dolor accusamus perspiciatis eveniet, sint vel labore mollitia nostrum voluptatibus in voluptas.

Extra Large Body Copy -
'.xl-body-copy'

Lorem ipsum dolor bold copy sit amet, consectetur Default text hyperlink adipisicing elit. Nobis eos saepe, magnam ut nihil incidunt eaque nisi voluptates dolor accusamus perspiciatis eveniet, sint vel labore mollitia nostrum voluptatibus in voluptas.

CSS
          	
body {
  font-family: "Noto Sans",sans-serif;
  font-size: 1.5rem;
  line-height: 2.4rem;
}
          	 
            
          
CSS
          	
.large-body-copy {
  font-size: 1.8rem;
  line-height: 2.9rem;
}
          	 
            
          
CSS
          	
.xl-body-copy {
  font-size: 2rem;
  font-weight: 700;
}
          	 
            
          

Ordered/Unordered List

Unordered List

  • Unordered list ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    • ...

Ordered List

  1. Ordered list ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    • ...

Unstyled List -
'ul.unstyled-list'

  • Ordered list ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    • ...
HTML
  • Ordered list ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    • ...
              
			 
              
          
HTML
  1. Ordered list ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    • ...
              
			 
              
          
HTML
  • Ordered list ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    • ...
              
			 
              
          
SCSS
          	
.unstyled-list {
	list-style: none;
	padding: 0;

	li {
		@include font-size(20);
		@include line-height(32);

		ul {
			list-style: none;
		}
	}

}
          	 
            
          

Two Column List -
'ul.two-col-list'

  • Ordered list
  • Consectetur adipiscing
  • Integer
  • Facilisis
  • Nulla
  • Faucibus porta
HTML
  • Ordered list
  • Consectetur adipiscing
  • Integer
  • Facilisis
  • Nulla
  • Faucibus porta
        			 
        		  
        		
SCSS
        			
.two-col-list {
	@extend %clearfix;
	li {
		float: left;
		margin: 0 2% 0 0;
		width: 48%;
		@include line-height(28);
	}
	
}
        			 
        		  
        		

Four Column List -
'ul.four-col-list'

  • Ordered list
  • Consectetur adipiscing
  • Integer
  • Facilisis
  • Nulla
  • Faucibus porta
HTML
  • Ordered list
  • Consectetur adipiscing
  • Integer
  • Facilisis
  • Nulla
  • Faucibus porta
        
        			 
        		  
        		
SCSS
        			
.four-col-list {
	@extend %clearfix;

	li {
		float: left;
		margin: 0 2% 0 0;
		width: 23%;

		@include bp-sm {
			width: 100%;
			margin: 0;
		}
	}
}
        			 
        		  
        		

Misc. Copy Helpers

Left aligned text. '.text-left'

Center aligned text. '.text-center'

Right aligned text. '.text-right'

Justified text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis necessitatibus incidunt, dolore sit veniam, distinctio fugiat voluptatem doloremque sint a quidem repudiandae expedita voluptate quaerat quis! Ipsum, quis excepturi porro. '.text-justify'

No wrap text. Donec id elit non. '.text-nowrap'


Lowercased text. '.text-lowercase'

Uppercased text. '.text-uppercase'

Capitalized text. '.text-capitalize'

Colors

Text Colors

Primary

  • Blue - #429dc9 - '.text-pl-blue'
  • Orange - #f57828 - '.text-pl-orange'
  • Green - #84bd00 - '.text-pl-green'
  • Dark Gray - #343741 - '.text-pl-dk-gray'

Secondary

  • Dark Orange - #d65432 - '.text-pl-dk-orange'

Gray Shades

  • Light Gray - #e5e7e5 - '.text-pl-lt-gray'
  • Light Gray 2 - #dedfdd - '.text-pl-lt-gray'
  • Light Gray 3 - #f2f4f4 - '.text-pl-lt-gray'
  • Medium Gray - #a7a8aa - '.text-pl-md-gray'
  • Medium Gray 2 - #6c6c6c - '.text-pl-md-gray'

Background Colors

Primary

  • '.bg-pl-blue'

  • '.bg-pl-orange'

  • '.bg-pl-green'

  • '.bg-pl-dk-gray'

Secondary

  • '.bg-pl-dk-orange'

Gray Shades

  • '.bg-pl-lt-gray'

  • '.bg-pl-lt-gray2'

  • '.bg-pl-lt-gray3'

  • '.bg-pl-md-gray'

  • '.bg-pl-md-gray2'

Black/White

  • '.bg-pl-black'

  • '.bg-pl-white'

Image Dimensions

Hero

1550x475px
  • This image will be scaled and cropped to fit the users device dimensions
  • Will be centered vertically and horizontally
  • Image type: JPG 60-80 quality

Short Hero

1550x290px
  • This image will be scaled and cropped to fit the users device dimensions
  • Will be centered vertically and horizontally
  • Image type: JPG 60-80 quality

Full Width Content Rotator

900x400px
  • This image will be scaled and cropped to fit the users device dimensions
  • Will be centered vertically and horizontally
  • Image type: JPG 60-80 quality

Text and Image Widget

768x415px
  • This image will be scaled and cropped to fit the users device dimensions
  • Will be centered vertically and horizontally
  • Image type: JPG 60-80 quality or png for images with transparency

Image Link Widget / Insights & News

265x165px
  • This image will be scaled and cropped to fit the users device dimensions
  • Will be centered vertically and horizontally
  • Image type: JPG 60-80 quality

Link Thumb Image

115x115px
  • This image will be scaled and cropped to fit the users device dimensions
  • Will be centered vertically and horizontally
  • Image type: JPG 60-80 quality or png for images with transparency

Services List Icon

45x65px
  • PNG

Testimonial / Quote Image

1550x450px
  • This image will be scaled and cropped to fit the users device dimensions
  • Will be centered vertically and horizontally
  • Image type: JPG 60-80 quality

Layout

Global Header

Proto Labs, Inc.,
5540 Pioneer Creek Dr., Maple Plain, MN 55359 USA | 877.479.3680
Proto Labs, Inc. is an Equal Opportunity/Affirmative Action employer
© Proto Labs 1999–2016
ISO 9001:2008 Certified | ITAR Registered

HTML

Proto Labs, Inc.,
5540 Pioneer Creek Dr., Maple Plain, MN 55359 USA | 877.479.3680
Proto Labs, Inc. is an Equal Opportunity/Affirmative Action employer
© Proto Labs 1999–2016
ISO 9001:2008 Certified | ITAR Registered
    			 
    			
    		

SCSS

                
    #main-footer {
	@include font-size(13);
	@include line-height(22);
	.navbar-brand {
		width: 180px;
		margin-top: 10px;

		img {

		}

		@include bp-sm {
			width: 120px;
			margin: 0 -5px -5px 0;
		}
	}

	.bg-pl-dk-gray {
		color: $pl-white;
	}
}
    			 
                
            

Navigation Menus

SCSS
            	
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
	max-height: 100vh;
}

.navbar-default {
	background-color: $pl-white;
	padding: 0;
	margin-bottom: 0;
	border-bottom: none;
	@include box-shadow(0 6px 6px 0px rgba($pl-black,0.25));

	@include bp-md {
		padding: 0;
		background-color: $pl-dk-gray;

		.container {
			width: auto;
		}
	}
	@include bp-sm {
		@include box-shadow(none);
	}
}
.navbar-header {
	

	@include bp-md-up {
		@include vertical-center(absolute);
	}
	@include bp-md {
		padding: 10px 0;
		background-color: $pl-white;
		float: none;
		margin: 0 -15px !important;
	}
	@include bp-sm {
		padding: 0;
	}

	.navbar-toggle {

		@include bp-md {

		}
	}
	
}	
.navbar-brand {
	padding: 0;

	@include bp-md {
		margin-left: 30px;
		width: 150px;
	}
	@include bp-xs {
		width: 125px;
		margin-left: 15px;
	}

	img {
		max-width: 100%;
		@include vertical-center(relative);
	}
}	
#main-nav {
	min-height: 90px;
}
.navbar-nav {

	@include bp-md {
		margin: 0 -30px; 
		float: none !important;
	}

	
	li {

		@include bp-md {
			float: none;
		}
		&.hidden-desktop {
			@include bp-md-up {
				display: none;
			}
		}
		&.hidden-mobile {

			@include bp-md {
				display: none;
			}
		}
		
		&.dropdown {

			&:hover {
				.dropdown-menu {
					//display: block;
				}
			}

			&:last-child {

				a {
					//border-bottom: 1px solid $pl-lt-gray;

				}
			}

			.dropdown-menu {
				@include box-shadow(0 10px 7px 2px rgba(0, 0, 0, 0.2));
				@include border-radius(0);
				border: none;
				left: 0;
				right: auto;
				min-width: 315px;
				max-height: calc(100vh -140px);
				overflow: auto;

				@include bp-sm {
					@include box-shadow(none);
				}

				> li {
					border-bottom: 1px solid $pl-lt-gray;
					padding-bottom: 10px;

					@include bp-sm {
						border-bottom: none;
						padding-bottom: 0;
					}

					&:last-child {
						border-bottom: none;
					}

					a {
						text-transform: none;
						padding: 15px 0;
						margin: 0 15px;
						display: block;
						
						color: $pl-dk-gray;

						@include bp-md {
							color: $pl-white !important;
							border: none;
							margin: 0 30px;
							font-weight: $font-regular;
						}
						@include bp-sm {
							margin: 0 25px;
							padding: 15px 0;
						}

						&:hover, &:focus {
							color: $pl-blue !important;

							@include bp-md {
								color: $pl-white !important;
							}
						}
					}

					&:last-child {

						a {
							border: none;
						}
					}

					ul {
						list-style: disc;
						padding: 0 30px;

						@include bp-sm {
							padding: 0 45px;
						}

						li {

							a {
								padding: 5px 0;
								margin: 0;
								font-weight: $font-regular;
							}
						}
					}
				}
			}
		}
		&.active, &.open {

			a {
				background-color: transparent !important;
				color: $pl-dk-gray;

				@include bp-md {
					color: $pl-white !important;
				}

				&:hover, &:focus {
					color: $pl-blue !important;

					@include bp-md {
						color: $pl-white !important;
					}
				}
			}
		}
		&.open {

			> a {

				@include bp-md {
					background-color: $pl-blue !important;
				}

				i {

					&.plicon-chev-down:before {
						content: 'b';
					}
				}
			}
			.dropdown-menu {
				@include bp-md {
					float: none;
					background-color: transparent;
					position: static;
				}
			}
		}

		a {
			text-transform: uppercase;
			font-weight: $font-bold;

			@include bp-md {
				border-top: 1px solid $pl-lt-gray;
				padding: 15px 30px;
			}

			i {
				//@include vertical-center(relative);
				top: 5px;
				font-size: 80%;
				margin-left: 5px;

				@include bp-md {
					@include vertical-center(absolute);
					right: 10px;
				}
				
			}

			.navbar-default & {
				color: $pl-dk-gray;
				@include font-size(14);
				padding: 35px 25px;

				@include bp-md {
					color: $pl-white;
					padding: 15px 25px;
				}

				&:hover, &:focus, &.active {
					background-color: transparent;
					color: $pl-blue;

					@include bp-md {
						color: $pl-white;
					}
				}
			}
			
			
		}

		.navbar-btn {
			padding: 10px 20px !important;
			margin: 25px 0 4px 35px;
			font-weight: $font-regular;

			@include bp-md {
				margin: 50px 0 150px;
				@include horizontal-center(relative);
				display: inline-block;
				border: none;
			}
		}
	}
}

.navbar-collapse {
	border: none;

	@include bp-md {
		padding: 0 30px !important;
		margin: 0 -15px !important;

	}

	&.collapse {
		display: none !important;

		&.in {
			display: block !important;
		}
		@include bp-md-up {
			display: block !important;
		}
	}

}
.mobile-quote {
	
	@include bp-sm-up {
		display: none !important;
	}

	@include bp-sm {
		display: block;
		clear: both;
		padding: 12px;
		height: 60px;
		text-align: right;
		position: relative;
		margin: 0 10px 0 0;
		border-top: 1px solid $pl-lt-gray;
		@include font-size(12);
	}

	.btn {
		float: right;
		margin: 0 0 0 15px;
		padding: 8px 20px;
		@include font-size(13);
	}
	.mobile-quote-tagline {
		@include vertical-center(relative);
		@include line-height(15);
	}

}
.mobile-nav {
	display: none;

	@include bp-md {
		display: block;
		float: right;

		li {
			float: left;



			a {
				color: $pl-dk-gray;
				@include bp-sm {
					padding: 12px 15px 0;
				}
				@include bp-xs {
					padding: 12px 7px 0; 
				}

				i {
					//@include vertical-center(relative);
					@include font-size(24);

					&.plicon-menu {

						&:before {
							@include font-size(31);
							position: relative;
							top: -3px;
						}
					}
				}
			}
			.btn {
				@include font-size(14);
				margin: 5px 15px 0 10px;
			}
		}
	}
	@include bp-sm {
		li {

			a {
				padding: 12px 15px 0;
			}
		}
	}

	@include bp-xs {
		li {

			a {
				padding: 12px 7px 0;
			}
		}
	}
}
.nav-inline {
	margin: 15px -15px;

	#global-header & {
		margin: 0 -15px;
	}

	> li {
		float: left;
	}
}
.utility-nav {
	margin-bottom: 10px;
	float: left;

	@include bp-sm {
		float: none;
		text-align: center;
	}

	li {
		@include bp-sm {
			float: none;
			display: inline;
		}
		a {
			color: $pl-dk-gray;
			padding: 15px 20px;
			@include font-size(14);
			text-transform: uppercase;

			&:hover {
				color: $pl-blue;
			}

			@include bp-sm {
				display: inline-block;
				float: none;
				padding: 10px 20px;
			}

			&.btn {
				padding: 10px 20px;
			}
		}
	}
}
.legal-nav {
	margin: 15px -15px;

	@include bp-sm {
		margin: 15px -15px 20px;
	}

	li {

		a {
			color: $pl-white;
			text-transform: none;
			@include font-size(13);

			&:hover {
				color: $pl-md-gray;
			}
		}
	}
}
.social-nav {
	float: none;
	margin: 0 -10px 0 20px;
	display: inline-block;
	vertical-align: middle;

	@include bp-md {
		display: block;
		margin: 0 -10px;
	}

	li {
		

		a {
			color: $pl-white;
			padding: 10px;

			&:hover {
				color: $pl-md-gray;
			}

			i {
				@include font-size(28);
			}
		}
	}
}
.user-tools-nav {
	float: right;
	margin-right: -15px;

	li {

		a{
			color: $pl-lt-gray2;
			text-transform: none;
			font-weight: $font-regular;
			@include font-size(12);
			padding: 5px 20px;

			&:hover {
				background-color: transparent;
				color: $pl-white;
			}

			i {
				margin: 0 10px 0 0;
				@include font-size(18);
				position: relative;
				top: 5px;
			}
			
		}
		&.open {
			a, a:hover, a:focus {
				background: transparent;
			}
			.dropdown-menu {
				li {

					a {
						&:hover, &.active {
							color: $pl-white;
							background-color: $pl-dk-gray;
						}
					}
				}
			}
		}

		&:last-child {

			a {
				padding-right: 0;
			}
		}
		
	}
}
.dropdown-menu {
	z-index: 10000;
	@include border-radius(0);
	margin: 0;
	border: none;

	li {

		a {
			color: $pl-dk-gray;

			&:hover {
				color: $pl-white;
				background-color: $pl-dk-gray;
			}

		}
	}
}


.nav > li > a:hover, .nav > li > a:focus {
	background: transparent;
}
.social-connect {
	margin: 15px 0;
	text-align: right;
	@include font-size(14);
	font-weight: $font-bold;

	@include bp-md {
		text-align: left;
	}
}
&.divider {
		
	> li {
		padding-right: 5px;

		&:after {
			content: " | ";
			@include vertical-center(absolute);
			color: $pl-md-gray2;
			right: 0;


		}
		&:last-child {
			
			&:after {
				display: none;
			}
		}
	}
		
}
            	 
              
            

Social Nav

HTML

    			 
    			
    		

User Tools Nav

Ulility Nav

HTML

    			 
    			
    		

Components

Case Studies Rotator

HTML

Case Study - Bounce Imaging

Case Study - <strong>Bounce Imaging</strong>
  • Industry
    Law Enforcement, Millitary, Emergency Services
  • Process
    Plastic Injection Molding
  • Material
    Glass-Filled Nylon

The Explorer Ball Spies Potential Dangers for First Responders

Bounce Imaging turns to Proto Labs’ rapid manufacturing services to protect internal components of its tactical ball and accelerate its speed to market.

Simply tossing a ball can make dangerous places safer for police, firefighters and other first responders — if that ball is the Explorer, a smartphone-enabled camera tucked inside a baseball-sized shell, developed by a Boston startup, Bounce Imaging.

Read the full case study
    			 
    			
    		

SCSS

                
.content-block {
	min-height: 410px;
	@extend %clearfix;
	position: relative;
	overflow: hidden;
	@include sectionMargin();

	.slick-carousel & {
		min-height: 400px;
		margin-bottom: 0;
	}

	&.case-study {

		@include bp-sm {
			padding: 15px;
		}
	}

	&.featured-video {
		//margin: 60px 0;
	}
}

.content-media {
	position: absolute;
	left: 0;
	overflow: hidden;
	min-height: 410px;
	width: 60%;
	height: 100%;

	.featured-video & {
		position: relative;
		padding: 47px 0 40px 40px;



		@include bp-sm {
			padding: 0;
		}
	}
	.content-media-right & {
		padding: 47px 40px 40px 0;

		@include bp-sm {
			padding: 0;
		}
	}

	.content-media-left & {
		float: left;
	}
	.content-media-right & {
		float: right;
		left: 40%;

		@include bp-md {
			left: 45%;
		}
		@include bp-sm {
			left: 0;
			float: none;
		}
	}
	.featured-video & {
		left: 0;
	}

	@include bp-md {
		width: 55%;
	}

	@include bp-sm {
		float: none; 
		width: 100%;
		min-height: 150px;
		position: relative;
		left: 0;
	}
	.case-study & {
		position: relative;
		width: 100%;
		min-height: 250px;
		margin-bottom: 30px;
	}

	
}
.cs-list {
	list-style: none;
	padding: 0;
	position: relative;
	margin: 0 0 30px 0px;
	border-left: 2px solid $pl-orange;

	@include bp-sm {
		margin: 0 0 30px;
	}

	li {
		padding-left: 125px;
		margin-bottom: 5px;
	}
	.category {
		text-transform: uppercase;
		font-weight: $font-bold;
		position: absolute;
		left: 15px;
	}
}
.content-container {
	width: 40%;
	float: right;
	padding: 40px;
	background-color: $pl-dk-gray;
	color: $pl-white;

	.light-background & {
		background-color: $pl-lt-gray3;
		color: $pl-dk-gray;
	}
	.content-media-left & {
		float: right;
	}
	.content-media-right & {
		float: left;

		.content-content {

			.container-fluid & {
				float: right;

				@include bp-sm {
					float: none;
				}
			}
		}
	}

	@include bp-md {
		width: 45%;
		//padding-bottom: 100px;
	}
	@include bp-sm {
		float: none;
		width: 100%;
		padding: 40px 40px 80px;
	}

	&:after {
		content: '';
		background-color: $pl-dk-gray;
		//padding-bottom: 1000px;
		width: 100%;
		margin: 0;
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.light-background & {
			background-color: $pl-lt-gray3;
		}
	}
	.case-study & {
		width: 100%;
		background-color: transparent;
		color: $pl-dk-gray;
		padding: 0;

		&:after {
			display: none;
		}
	}
	

	.content-content {

		.container-fluid & {
			width: 400px;

			@include bp-lg {
				width: 300px;
			}
			@include bp-sm {
				width: 100%;
			}
		}
		
		.case-study & {
			width: auto;
		}

		h2 {
			@include font-size(26);
			font-weight: $font-bold;
			margin: 0 0 20px;
			padding: 0;
			border: none;

			@include bp-md {
				@include font-size(20);
			}
		}
		.caption {
			margin-bottom: 30px;

			@include bp-md {
				margin-bottom: 30px;
			}

			p {
				margin-bottom: 30px;
			}
		}
		.cta-text {
			color: $pl-white;
			text-transform: uppercase;
			@include font-size(20);
			position: relative;
			padding-right: 20px;
			display: block;

			.light-background & {
				color: $pl-dk-gray;
			}

			
			i {
				@include font-size(16);
				position: absolute;
				right: auto;
				bottom: -2px;
				margin-left: 10px;

				@include bp-xs {
					@include font-size(12);
				}
			}

			@include bp-md {
				@include font-size(18);
			}
		}

		.case-study & {
			max-width: none;

			.subtitle {
				@include font-size(18);
				margin: 0 0 40px;
				font-weight: $font-bold;
			}
			.cta-text {
				color: $pl-blue;

				&:hover {
					color: $pl-blue;
				}
			}
		}
	}
}
    			 
                
            

Content Rotator

HTML

		
		




					
			
    			 
    			
    		

SCSS

                
.content-block {
	min-height: 410px;
	@extend %clearfix;
	position: relative;
	overflow: hidden;
	@include sectionMargin();

	.slick-carousel & {
		min-height: 400px;
		margin-bottom: 0;
	}

	&.case-study {

		@include bp-sm {
			padding: 15px;
		}
	}

	&.featured-video {
		//margin: 60px 0;
	}
}

.content-media {
	position: absolute;
	left: 0;
	overflow: hidden;
	min-height: 410px;
	width: 60%;
	height: 100%;

	.featured-video & {
		position: relative;
		padding: 47px 0 40px 40px;



		@include bp-sm {
			padding: 0;
		}
	}
	.content-media-right & {
		padding: 47px 40px 40px 0;

		@include bp-sm {
			padding: 0;
		}
	}

	.content-media-left & {
		float: left;
	}
	.content-media-right & {
		float: right;
		left: 40%;

		@include bp-md {
			left: 45%;
		}
		@include bp-sm {
			left: 0;
			float: none;
		}
	}
	.featured-video & {
		left: 0;
	}

	@include bp-md {
		width: 55%;
	}

	@include bp-sm {
		float: none; 
		width: 100%;
		min-height: 150px;
		position: relative;
		left: 0;
	}
	.case-study & {
		position: relative;
		width: 100%;
		min-height: 250px;
		margin-bottom: 30px;
	}

	
}
.cs-list {
	list-style: none;
	padding: 0;
	position: relative;
	margin: 0 0 30px 0px;
	border-left: 2px solid $pl-orange;

	@include bp-sm {
		margin: 0 0 30px;
	}

	li {
		padding-left: 125px;
		margin-bottom: 5px;
	}
	.category {
		text-transform: uppercase;
		font-weight: $font-bold;
		position: absolute;
		left: 15px;
	}
}
.content-container {
	width: 40%;
	float: right;
	padding: 40px;
	background-color: $pl-dk-gray;
	color: $pl-white;

	.light-background & {
		background-color: $pl-lt-gray3;
		color: $pl-dk-gray;
	}
	.content-media-left & {
		float: right;
	}
	.content-media-right & {
		float: left;

		.content-content {

			.container-fluid & {
				float: right;

				@include bp-sm {
					float: none;
				}
			}
		}
	}

	@include bp-md {
		width: 45%;
		//padding-bottom: 100px;
	}
	@include bp-sm {
		float: none;
		width: 100%;
		padding: 40px 40px 80px;
	}

	&:after {
		content: '';
		background-color: $pl-dk-gray;
		//padding-bottom: 1000px;
		width: 100%;
		margin: 0;
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.light-background & {
			background-color: $pl-lt-gray3;
		}
	}
	.case-study & {
		width: 100%;
		background-color: transparent;
		color: $pl-dk-gray;
		padding: 0;

		&:after {
			display: none;
		}
	}
	

	.content-content {

		.container-fluid & {
			width: 400px;

			@include bp-lg {
				width: 300px;
			}
			@include bp-sm {
				width: 100%;
			}
		}
		
		.case-study & {
			width: auto;
		}

		h2 {
			@include font-size(26);
			font-weight: $font-bold;
			margin: 0 0 20px;
			padding: 0;
			border: none;

			@include bp-md {
				@include font-size(20);
			}
		}
		.caption {
			margin-bottom: 30px;

			@include bp-md {
				margin-bottom: 30px;
			}

			p {
				margin-bottom: 30px;
			}
		}
		.cta-text {
			color: $pl-white;
			text-transform: uppercase;
			@include font-size(20);
			position: relative;
			padding-right: 20px;
			display: block;

			.light-background & {
				color: $pl-dk-gray;
			}

			
			i {
				@include font-size(16);
				position: absolute;
				right: auto;
				bottom: -2px;
				margin-left: 10px;

				@include bp-xs {
					@include font-size(12);
				}
			}

			@include bp-md {
				@include font-size(18);
			}
		}

		.case-study & {
			max-width: none;

			.subtitle {
				@include font-size(18);
				margin: 0 0 40px;
				font-weight: $font-bold;
			}
			.cta-text {
				color: $pl-blue;

				&:hover {
					color: $pl-blue;
				}
			}
		}
	}
}
    			 
                
            

News Rotator

HTML

    			 
    			
    		

SCSS

                
.news-item {
	margin-bottom: 30px;
	position: relative;

	&:hover {

		.news-category {
			background-color: $pl-black;
		}

		.news-image {

			&:before {
				background-color: rgba($pl-black, 0.3);
			}
		}
	}

	.slick-slider & {
		margin-bottom: 0;
	}
	
	.news-image {
		height: 165px;
		position: relative;
		overflow: hidden;

		@include bp-md-lg {
			height: 150px;
		}

		&:before {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba($pl-black, 0);
			content: '';
			z-index: 1;
			@include transition(all 500ms ease 0ms);
		}
	}
	.news-category {
		background-color: $pl-blue;
		color: $pl-white;
		padding: 5px 10px;
		text-transform: uppercase;
		@include font-size(14);
		@include line-height(15);
		display: table-cell;
		height: 50px;
		width: 800px;
		vertical-align: middle;
		font-weight: $font-bold;
		@include transition(all 500ms ease 0ms);
	}
	.news-content {

		h2 {
			margin: 15px 0;
			@include font-size(16);
			@include line-height(24);
			font-weight: $font-bold;
			border: none;
			padding-bottom: 0;

			@include bp-sm {
				@include line-height(22);
			}
		}
		time {
			margin: 0 0 15px;
			font-style: italic;
			display: block;
			color: $pl-md-gray;
		}
		.caption {
			margin-bottom: 15px;
		}
		.cta-text {
			text-transform: uppercase;
			@include font-size(16);
			color: $pl-blue;

			&:before {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 2;
			}
		}
		*:empty {
			display: none;
		}
	}

}
    			 
                
            

Testimonials Rotator

HTML

    			 
    			
    		

SCSS

                
.quote-container {
	position: relative;
	min-height: 345px;
	background-color: $pl-dk-gray;

	@include bp-md-up {
		height: 345px;
	}

	.quote-image {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	blockquote {
		.container-fluid & {
			@include containerWrap();	
			padding: 90px 0;
		}
		
		border: none;
		padding: 90px 30px;
		position: relative;
		min-height: 375px;

		@include bp-md {
			padding: 80px 0;
		}
		@include bp-sm {
			padding: 40px 30px;

			.container-fluid & {
				padding: 40px 15px;
				width: auto;
			}
		}

		> p {
			@include font-size(33);
			@include line-height(50);
			color: $pl-white;
			font-weight: $font-bold;
			padding-left: 55px;
			position: relative;
			display: block;

			@include bp-sm {
				@include font-size(26);
				@include line-height(38);
				padding: 10px 30px 0;
			}

			&:before, &:after {
				font-family: Arial, sans-serif;
				color: $pl-green;
				@include font-size(85);
				@include line-height(68);

				@include bp-sm {
					@include font-size(70);
				}
			}
			&:before {
				content: '“';
				position: absolute;
				top: -18px;
				left: 0;
			}
			&:after {
				content: ' ”';
				position: absolute;
				bottom: -25px;
				margin-left: 10px;

				@include bp-sm {
					//margin-left: 0;
				}
			}
		}
		footer {
			margin-top: 40px;
			text-align: right;
			text-transform: uppercase;
			font-weight: $font-bold;
			@include line-height(24);

			&:before {
				color: $pl-white;
			}

			.quote-author {
				color: $pl-white;
			}
			.quote-author-company {
				color: $pl-green;
			}
		}
	}
	
} 
    			 
                
            
Featured Video/Case Study/Image

Featured Video/Case Study/Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
View All Materials

HTML

Featured Video/Case Study/Image

Featured Video/Case Study/Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
View All Materials
    			 
    			
    		

SCSS

                
.content-block {
	min-height: 410px;
	@extend %clearfix;
	position: relative;
	overflow: hidden;
	@include sectionMargin();

	.slick-carousel & {
		min-height: 400px;
		margin-bottom: 0;
	}

	&.case-study {

		@include bp-sm {
			padding: 15px;
		}
	}

	&.featured-video {
		//margin: 60px 0;
	}
}

.content-media {
	position: absolute;
	left: 0;
	overflow: hidden;
	min-height: 410px;
	width: 60%;
	height: 100%;

	.featured-video & {
		position: relative;
		padding: 47px 0 40px 40px;



		@include bp-sm {
			padding: 0;
		}
	}
	.content-media-right & {
		padding: 47px 40px 40px 0;

		@include bp-sm {
			padding: 0;
		}
	}

	.content-media-left & {
		float: left;
	}
	.content-media-right & {
		float: right;
		left: 40%;

		@include bp-md {
			left: 45%;
		}
		@include bp-sm {
			left: 0;
			float: none;
		}
	}
	.featured-video & {
		left: 0;
	}

	@include bp-md {
		width: 55%;
	}

	@include bp-sm {
		float: none; 
		width: 100%;
		min-height: 150px;
		position: relative;
		left: 0;
	}
	.case-study & {
		position: relative;
		width: 100%;
		min-height: 250px;
		margin-bottom: 30px;
	}

	
}
.cs-list {
	list-style: none;
	padding: 0;
	position: relative;
	margin: 0 0 30px 0px;
	border-left: 2px solid $pl-orange;

	@include bp-sm {
		margin: 0 0 30px;
	}

	li {
		padding-left: 125px;
		margin-bottom: 5px;
	}
	.category {
		text-transform: uppercase;
		font-weight: $font-bold;
		position: absolute;
		left: 15px;
	}
}
.content-container {
	width: 40%;
	float: right;
	padding: 40px;
	background-color: $pl-dk-gray;
	color: $pl-white;

	.light-background & {
		background-color: $pl-lt-gray3;
		color: $pl-dk-gray;
	}
	.content-media-left & {
		float: right;
	}
	.content-media-right & {
		float: left;

		.content-content {

			.container-fluid & {
				float: right;

				@include bp-sm {
					float: none;
				}
			}
		}
	}

	@include bp-md {
		width: 45%;
		//padding-bottom: 100px;
	}
	@include bp-sm {
		float: none;
		width: 100%;
		padding: 40px 40px 80px;
	}

	&:after {
		content: '';
		background-color: $pl-dk-gray;
		//padding-bottom: 1000px;
		width: 100%;
		margin: 0;
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.light-background & {
			background-color: $pl-lt-gray3;
		}
	}
	.case-study & {
		width: 100%;
		background-color: transparent;
		color: $pl-dk-gray;
		padding: 0;

		&:after {
			display: none;
		}
	}
	

	.content-content {

		.container-fluid & {
			width: 400px;

			@include bp-lg {
				width: 300px;
			}
			@include bp-sm {
				width: 100%;
			}
		}
		
		.case-study & {
			width: auto;
		}

		h2 {
			@include font-size(26);
			font-weight: $font-bold;
			margin: 0 0 20px;
			padding: 0;
			border: none;

			@include bp-md {
				@include font-size(20);
			}
		}
		.caption {
			margin-bottom: 30px;

			@include bp-md {
				margin-bottom: 30px;
			}

			p {
				margin-bottom: 30px;
			}
		}
		.cta-text {
			color: $pl-white;
			text-transform: uppercase;
			@include font-size(20);
			position: relative;
			padding-right: 20px;
			display: block;

			.light-background & {
				color: $pl-dk-gray;
			}

			
			i {
				@include font-size(16);
				position: absolute;
				right: auto;
				bottom: -2px;
				margin-left: 10px;

				@include bp-xs {
					@include font-size(12);
				}
			}

			@include bp-md {
				@include font-size(18);
			}
		}

		.case-study & {
			max-width: none;

			.subtitle {
				@include font-size(18);
				margin: 0 0 40px;
				font-weight: $font-bold;
			}
			.cta-text {
				color: $pl-blue;

				&:hover {
					color: $pl-blue;
				}
			}
		}
	}
}
    			 
                
            

HTML

    			 
    			
    		

SCSS

                
.content-block {
	min-height: 410px;
	@extend %clearfix;
	position: relative;
	overflow: hidden;
	@include sectionMargin();

	.slick-carousel & {
		min-height: 400px;
		margin-bottom: 0;
	}

	&.case-study {

		@include bp-sm {
			padding: 15px;
		}
	}

	&.featured-video {
		//margin: 60px 0;
	}
}

.content-media {
	position: absolute;
	left: 0;
	overflow: hidden;
	min-height: 410px;
	width: 60%;
	height: 100%;

	.featured-video & {
		position: relative;
		padding: 47px 0 40px 40px;



		@include bp-sm {
			padding: 0;
		}
	}
	.content-media-right & {
		padding: 47px 40px 40px 0;

		@include bp-sm {
			padding: 0;
		}
	}

	.content-media-left & {
		float: left;
	}
	.content-media-right & {
		float: right;
		left: 40%;

		@include bp-md {
			left: 45%;
		}
		@include bp-sm {
			left: 0;
			float: none;
		}
	}
	.featured-video & {
		left: 0;
	}

	@include bp-md {
		width: 55%;
	}

	@include bp-sm {
		float: none; 
		width: 100%;
		min-height: 150px;
		position: relative;
		left: 0;
	}
	.case-study & {
		position: relative;
		width: 100%;
		min-height: 250px;
		margin-bottom: 30px;
	}

	
}
.cs-list {
	list-style: none;
	padding: 0;
	position: relative;
	margin: 0 0 30px 0px;
	border-left: 2px solid $pl-orange;

	@include bp-sm {
		margin: 0 0 30px;
	}

	li {
		padding-left: 125px;
		margin-bottom: 5px;
	}
	.category {
		text-transform: uppercase;
		font-weight: $font-bold;
		position: absolute;
		left: 15px;
	}
}
.content-container {
	width: 40%;
	float: right;
	padding: 40px;
	background-color: $pl-dk-gray;
	color: $pl-white;

	.light-background & {
		background-color: $pl-lt-gray3;
		color: $pl-dk-gray;
	}
	.content-media-left & {
		float: right;
	}
	.content-media-right & {
		float: left;

		.content-content {

			.container-fluid & {
				float: right;

				@include bp-sm {
					float: none;
				}
			}
		}
	}

	@include bp-md {
		width: 45%;
		//padding-bottom: 100px;
	}
	@include bp-sm {
		float: none;
		width: 100%;
		padding: 40px 40px 80px;
	}

	&:after {
		content: '';
		background-color: $pl-dk-gray;
		//padding-bottom: 1000px;
		width: 100%;
		margin: 0;
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.light-background & {
			background-color: $pl-lt-gray3;
		}
	}
	.case-study & {
		width: 100%;
		background-color: transparent;
		color: $pl-dk-gray;
		padding: 0;

		&:after {
			display: none;
		}
	}
	

	.content-content {

		.container-fluid & {
			width: 400px;

			@include bp-lg {
				width: 300px;
			}
			@include bp-sm {
				width: 100%;
			}
		}
		
		.case-study & {
			width: auto;
		}

		h2 {
			@include font-size(26);
			font-weight: $font-bold;
			margin: 0 0 20px;
			padding: 0;
			border: none;

			@include bp-md {
				@include font-size(20);
			}
		}
		.caption {
			margin-bottom: 30px;

			@include bp-md {
				margin-bottom: 30px;
			}

			p {
				margin-bottom: 30px;
			}
		}
		.cta-text {
			color: $pl-white;
			text-transform: uppercase;
			@include font-size(20);
			position: relative;
			padding-right: 20px;
			display: block;

			.light-background & {
				color: $pl-dk-gray;
			}

			
			i {
				@include font-size(16);
				position: absolute;
				right: auto;
				bottom: -2px;
				margin-left: 10px;

				@include bp-xs {
					@include font-size(12);
				}
			}

			@include bp-md {
				@include font-size(18);
			}
		}

		.case-study & {
			max-width: none;

			.subtitle {
				@include font-size(18);
				margin: 0 0 40px;
				font-weight: $font-bold;
			}
			.cta-text {
				color: $pl-blue;

				&:hover {
					color: $pl-blue;
				}
			}
		}
	}
}
    			 
                
            

Hero

Real Parts. Really Fast.

Custom prototypes and low-volume production parts in as fast as 1 day

HTML

Real Parts. Really Fast.

Custom prototypes and low-volume production parts in as fast as 1 day
    			 
    			
    		

SCSS

                
.hero-container {
	position: relative;
	overflow: hidden;

	.container {
		height: 475px;

		@include bp-md {
			height: 285px;
		}
		@include bp-sm {
			height: 200px;
		}
	}

		

	&.short-hero {
		margin-bottom: 80px;
		min-height: 287px;
		@include sectionMargin();

		@include bp-xs {
			min-height: 0;
		}

		.container {
			height: 250px;

			@include bp-xs {
				height: 170px;
			}
		}
	}

	.bg-cover {

		img {
			//@include greyscale();
		}
	}
	


}
.hero-content {
	@include center-all(absolute);
	top: 31%;
	color: $pl-white;
	z-index: 5;
	
	text-align: center;

	width: 80%;

	@include bp-sm {
		width: 90%;
	}

	.short-hero & {
		text-align: center;
		top: 50%;


		@include bp-sm {
			width: 100%;

			.btn {
				margin-top: 20px;
			}
		}
	}

	.left &, .right & {
		@include vertical-center(relative);
		left: auto;
		text-align: left;
	}
	.right & {
		text-align: right;
	}

	.hero-title {
		@include font-size(70);
		//white-space: nowrap;
		border: none;
		padding-bottom: 0;
		margin-bottom: 8px;
		text-shadow: 0px 2px 8px rgba($pl-dk-gray, 0.75);


		@include bp-md {
			@include font-size(48);
		}

		@include bp-sm {
			@include font-size(28);
			//white-space: normal;
		}

		.short-hero & {
			@include font-size(48);
			margin-top: 0;
			margin-bottom: 15px;
			text-shadow: none;

			@include bp-sm {
				@include font-size(32);
				margin-bottom: 5px;
			}
		}
	}
	.caption {
		text-transform: uppercase;
		@include font-size(18);
		text-shadow: 0px 2px 8px rgba($pl-dk-gray, 0.75);

		@include bp-md {
			display: none;
		}

		.short-hero & {
			@include font-size(28);
			text-transform: none;
			display: block;
			text-shadow: none;

			@include bp-sm {
				@include font-size(18);
			}
		}
	}
	*:empty {
		display: none;
	}
}
    			 
                
            

Short Hero / CTA

Get an Injection Molding Quote

Get a Quote

HTML

Get an Injection Molding Quote

Get a Quote
    			 
    			
    		

SCSS

                
.hero-container {
	position: relative;
	overflow: hidden;

	.container {
		height: 475px;

		@include bp-md {
			height: 285px;
		}
		@include bp-sm {
			height: 200px;
		}
	}

		

	&.short-hero {
		margin-bottom: 80px;
		min-height: 287px;
		@include sectionMargin();

		@include bp-xs {
			min-height: 0;
		}

		.container {
			height: 250px;

			@include bp-xs {
				height: 170px;
			}
		}
	}

	.bg-cover {

		img {
			//@include greyscale();
		}
	}
	


}
.hero-content {
	@include center-all(absolute);
	top: 31%;
	color: $pl-white;
	z-index: 5;
	
	text-align: center;

	width: 80%;

	@include bp-sm {
		width: 90%;
	}

	.short-hero & {
		text-align: center;
		top: 50%;


		@include bp-sm {
			width: 100%;

			.btn {
				margin-top: 20px;
			}
		}
	}

	.left &, .right & {
		@include vertical-center(relative);
		left: auto;
		text-align: left;
	}
	.right & {
		text-align: right;
	}

	.hero-title {
		@include font-size(70);
		//white-space: nowrap;
		border: none;
		padding-bottom: 0;
		margin-bottom: 8px;
		text-shadow: 0px 2px 8px rgba($pl-dk-gray, 0.75);


		@include bp-md {
			@include font-size(48);
		}

		@include bp-sm {
			@include font-size(28);
			//white-space: normal;
		}

		.short-hero & {
			@include font-size(48);
			margin-top: 0;
			margin-bottom: 15px;
			text-shadow: none;

			@include bp-sm {
				@include font-size(32);
				margin-bottom: 5px;
			}
		}
	}
	.caption {
		text-transform: uppercase;
		@include font-size(18);
		text-shadow: 0px 2px 8px rgba($pl-dk-gray, 0.75);

		@include bp-md {
			display: none;
		}

		.short-hero & {
			@include font-size(28);
			text-transform: none;
			display: block;
			text-shadow: none;

			@include bp-sm {
				@include font-size(18);
			}
		}
	}
	*:empty {
		display: none;
	}
}
    			 
                
            

Image With Text Content

Image Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus aliquam venenatis. Curabitur pretium ipsum et tortor scelerisque, at pellentesque neque eleifend. Nam at massa laoreet arcu commodo tincidunt. Curabitur venenatis justo in lorem accumsan vehicula. Sed sollicitudin leo ac ipsum volutpat blandit.

Image Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus aliquam venenatis. Curabitur pretium ipsum et tortor scelerisque, at pellentesque neque eleifend. Nam at massa laoreet arcu commodo tincidunt. Curabitur venenatis justo in lorem accumsan vehicula. Sed sollicitudin leo ac ipsum volutpat blandit.

Image Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus aliquam venenatis. Curabitur pretium ipsum et tortor scelerisque, at pellentesque neque eleifend. Nam at massa laoreet arcu commodo tincidunt. Curabitur venenatis justo in lorem accumsan vehicula. Sed sollicitudin leo ac ipsum volutpat blandit.

HTML

    			
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus aliquam venenatis. Curabitur pretium ipsum et tortor scelerisque, at pellentesque neque eleifend. Nam at massa laoreet arcu commodo tincidunt. Curabitur venenatis justo in lorem accumsan vehicula. Sed sollicitudin leo ac ipsum volutpat blandit.

    			 
    			
    		

SCSS

                
img, .image-wrapper {
	
	.caption {
		margin-top: 20px;

		&:empty {
			display: none;
		}
	}

	
	&.pull-left {
		margin: 9px 30px 20px 0;

		@include bp-sm {
			margin: 9px 30px 10px 0;
		}

		&.icon-image {
			float: left !important;
		}

	}
	&.pull-right {
		margin: 9px 0 20px 30px;

		@include bp-sm {
			margin: 9px 0 10px 30px;
		}

		&.icon-image {
			float: right !important;
		}
	}
	&.pull-left, &.pull-right {
		max-width: 50%;

		@include bp-xs {
			max-width: 100%;
			float: none !important;
			margin: 0 0 30px;
		}
	}

	&.image-block {
		width: 100%;
		display: block;
		margin: 0 0 30px;
		text-align: center;
	}

}
    			 
                
            

SCSS

                
.link-list {
	list-style: none;
	padding: 0;
	margin: 0 -15px 50px;

	@include bp-sm {
		margin: 0 -15px 35px;
	}

	li {
		display: inline-block;
		max-width: 24%;
		width: 100%;
		vertical-align: top;
		margin-bottom: 15px;
		padding: 0 15px;

		@include bp-md {
			max-width: 32.3333%;
		}
		@include bp-sm {
			max-width: 49%;
		}
		@include bp-xs {
			max-width: none;
		}

		a {

		}
		.link-image {
			position: relative;
			overflow: hidden;
			left: 0;
			top: 0;
		}
	}

	&.thumb-link {
		margin: 0 0 50px;

		@include bp-sm {
			margin: 0 0 35px;
		}


		li {
			margin-bottom: 30px;
			position: relative;
			padding: 0 15px 0 130px;
			height: 115px;


			@include bp-lg {
				max-width: 32.3333%;
			}
			@include bp-md {
				max-width: 49%;
			}
			@include bp-sm {
				padding: 0 15px 0 105px;
				height: 90px;
			}
			@include bp-xs {
				max-width: none;
			}


			.link-image {
				height: 115px;
				width: 115px;
				position: absolute;
				top: 0;
				left: 0;

				@include bp-sm {
					height: 90px;
					width: 90px;
				}
			}

			> a {
				@include vertical-center(absolute);
			}
		}
	}
	&.image-link {
		margin: 0 -15px 50px;

		@include bp-sm {
			margin: 0 -15px;
		}

		@include bp-xs {
			margin: 0;
		}

		li {
			margin-bottom: 30px;
			position: relative;

			.link-image {
				height: 165px;
				top: 1px;

				@include bp-md-lg {
					height: 150px;
				}

				&:before {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					background-color: rgba($pl-black, 0);
					content: '';
					z-index: 1;
					@include transition(all 500ms ease 0ms);
				}
			}
			a {
				display: block;
				background-color: $pl-blue;
				color: $pl-white;
				padding: 5px 10px;
				@include font-size(14);
				@include line-height(15);
				display: table-cell;
				height: 50px;
				width: 800px;
				vertical-align: middle;
				@include transition(all 500ms ease 0ms);

				&:hover {
					text-decoration: none;
				}

				&:before {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					
				}
			}

			&:hover {

				.link-image {

					&:before {
						background-color: rgba($pl-black, 0.3);
					}
					
				}
				a {
					background-color: $pl-black;

					&:before {
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						content: '';
						z-index: 2;
					}
				}
			}
		}
	}
}

    			 
                
            

Request Info Form

* First Name
* Last Name
Company
* Email
Phone
CountryUnited StatesAfghanistanÅland IslandsAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua and BarbudaArgentinaArmeniaArubaAustraliaAustriaAzerbaijanBahamasBahrainBangladeshBarbadosBelarusBelgiumBelizeBeninBermudaBhutanBolivia, Plurinational State ofBonaire, Sint Eustatius and SabaBosnia and HerzegovinaBotswanaBouvet IslandBrazilBritish Indian Ocean TerritoryBrunei DarussalamBulgariaBurkina FasoBurundiCambodiaCameroonCanadaCape VerdeCayman IslandsCentral African RepublicChadChileChinaChristmas IslandCocos (Keeling) IslandsColombiaComorosCongoCongo, the Democratic Republic of theCook IslandsCosta RicaCôte d'IvoireCroatiaCubaCuraçaoCyprusCzech RepublicDenmarkDjiboutiDominicaDominican RepublicEcuadorEgyptEl SalvadorEquatorial GuineaEritreaEstoniaEthiopiaFalkland Islands (Malvinas)Faroe IslandsFijiFinlandFranceFrench GuianaFrench PolynesiaFrench Southern TerritoriesGabonGambiaGeorgiaGermanyGhanaGibraltarGreeceGreenlandGrenadaGuadeloupeGuamGuatemalaGuernseyGuineaGuinea-BissauGuyanaHaitiHeard Island and McDonald IslandsHoly See (Vatican City State)HondurasHong KongHungaryIcelandIndiaIndonesiaIran, Islamic Republic ofIraqIrelandIsle of ManIsraelItalyJamaicaJapanJerseyJordanKazakhstanKenyaKiribatiKorea, Democratic People's Republic ofKorea, Republic ofKuwaitKyrgyzstanLao People's Democratic RepublicLatviaLebanonLesothoLiberiaLibyaLiechtensteinLithuaniaLuxembourgMacaoMacedonia, the former Yugoslav Republic ofMadagascarMalawiMalaysiaMaldivesMaliMaltaMarshall IslandsMartiniqueMauritaniaMauritiusMayotteMexicoMicronesia, Federated States ofMoldova, Republic ofMonacoMongoliaMontenegroMontserratMoroccoMozambiqueMyanmarNamibiaNauruNepalNetherlandsNew CaledoniaNew ZealandNicaraguaNigerNigeriaNiueNorfolk IslandNorthern Mariana IslandsNorwayOmanPakistanPalauPalestinian Territory, OccupiedPanamaPapua New GuineaParaguayPeruPhilippinesPitcairnPolandPortugalPuerto RicoQatarRéunionRomaniaRussian FederationRwandaSaint BarthélemySaint Helena, Ascension and Tristan da CunhaSaint Kitts and NevisSaint LuciaSaint Martin (French part)Saint Pierre and MiquelonSaint Vincent and the GrenadinesSamoaSan MarinoSao Tome and PrincipeSaudi ArabiaSenegalSerbiaSeychellesSierra LeoneSingaporeSint Maarten (Dutch part)SlovakiaSloveniaSolomon IslandsSomaliaSouth AfricaSouth Georgia and the South Sandwich IslandsSouth SudanSpainSri LankaSudanSurinameSvalbard and Jan MayenSwazilandSwedenSwitzerlandSyrian Arab RepublicTaiwan, Province of ChinaTajikistanTanzania, United Republic ofThailandTimor-LesteTogoTokelauTongaTrinidad and TobagoTunisiaTurkeyTurkmenistanTurks and Caicos IslandsTuvaluUgandaUkraineUnited Arab EmiratesUnited KingdomUnited States Minor Outlying IslandsUruguayUzbekistanVanuatuVenezuela, Bolivarian Republic ofViet NamVirgin Islands, BritishVirgin Islands, U.S.Wallis and FutunaWestern SaharaYemenZambiaZimbabwe
Comment

HTML

* First Name
* Last Name
Company
* Email
Phone
Country United States Afghanistan Åland Islands Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia, Plurinational State of Bonaire, Sint Eustatius and Saba Bosnia and Herzegovina Botswana Bouvet Island Brazil British Indian Ocean Territory Brunei Darussalam Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Republic Chad Chile China Christmas Island Cocos (Keeling) Islands Colombia Comoros Congo Congo, the Democratic Republic of the Cook Islands Costa Rica Côte d'Ivoire Croatia Cuba Curaçao Cyprus Czech Republic Denmark Djibouti Dominica Dominican Republic Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Falkland Islands (Malvinas) Faroe Islands Fiji Finland France French Guiana French Polynesia French Southern Territories Gabon Gambia Georgia Germany Ghana Gibraltar Greece Greenland Grenada Guadeloupe Guam Guatemala Guernsey Guinea Guinea-Bissau Guyana Haiti Heard Island and McDonald Islands Holy See (Vatican City State) Honduras Hong Kong Hungary Iceland India Indonesia Iran, Islamic Republic of Iraq Ireland Isle of Man Israel Italy Jamaica Japan Jersey Jordan Kazakhstan Kenya Kiribati Korea, Democratic People's Republic of Korea, Republic of Kuwait Kyrgyzstan Lao People's Democratic Republic Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Macao Macedonia, the former Yugoslav Republic of Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Martinique Mauritania Mauritius Mayotte Mexico Micronesia, Federated States of Moldova, Republic of Monaco Mongolia Montenegro Montserrat Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norfolk Island Northern Mariana Islands Norway Oman Pakistan Palau Palestinian Territory, Occupied Panama Papua New Guinea Paraguay Peru Philippines Pitcairn Poland Portugal Puerto Rico Qatar Réunion Romania Russian Federation Rwanda Saint Barthélemy Saint Helena, Ascension and Tristan da Cunha Saint Kitts and Nevis Saint Lucia Saint Martin (French part) Saint Pierre and Miquelon Saint Vincent and the Grenadines Samoa San Marino Sao Tome and Principe Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Sint Maarten (Dutch part) Slovakia Slovenia Solomon Islands Somalia South Africa South Georgia and the South Sandwich Islands South Sudan Spain Sri Lanka Sudan Suriname Svalbard and Jan Mayen Swaziland Sweden Switzerland Syrian Arab Republic Taiwan, Province of China Tajikistan Tanzania, United Republic of Thailand Timor-Leste Togo Tokelau Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Turks and Caicos Islands Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States Minor Outlying Islands Uruguay Uzbekistan Vanuatu Venezuela, Bolivarian Republic of Viet Nam Virgin Islands, British Virgin Islands, U.S. Wallis and Futuna Western Sahara Yemen Zambia Zimbabwe
Comment
    

    			 
    			
    		

SCSS

                
form {
	@extend %clearfix;
	.form-group {
		//@extend %clearfix;
		margin-bottom: 5px;
	}

	.form-control {
		height: 45px !important;
		@include border-radius(2px);
		@include box-shadow(none);
		background-color: #fafafa !important;
		border: 1px solid $pl-lt-gray  !important;
		margin-bottom: 10px;

		&:hover, &:focus {
			background-color: $pl-white !important;
			border: 3px solid $pl-blue !important;
			@include box-shadow(none);
		}

		&.input-validation-error, &.error {
			background: transparent !important;
			border: 3px solid $pl-dk-orange !important;
			@include box-shadow(0 0 3px 0 $pl-dk-orange);
		}
	}
	label.error {
		color: $pl-dk-orange;
		@include font-size(14);
		text-transform: none !important;
		display: block;
	}
	textarea.form-control {
		height: 124px !important;
	}
	button {
		margin: 20px 0 60px !important;
	}
	label {
		font-weight: $font-regular !important;
		text-transform: uppercase !important;
	}
	.contour & {
		span.field-validation-error {
			color: $pl-dk-orange !important;
			@include font-size(14);
			text-transform: none !important;
		}
	}
	.form-validation-message {
		color: $pl-dk-orange;
		margin: 28px 30px;
	}

	.text {
		.contour & {
			@extend .form-control;
			padding: 6px 12px !important;
		}
		
	}
	legend {
		.contour & {
			@include font-size(31);
			border-bottom: 1px solid $pl-lt-gray;
			padding-bottom: 10px;
			margin: 20px 0px 40px;

		}
	}
	input[type="file"] {
		margin-bottom: 10px;
	}
	fieldset {
		.contour & {
			border: 1px solid $pl-lt-gray !important;
			padding: 15px;
			position: relative;
			margin: 90px 0 30px;

			legend {
				margin: 0;
				position: absolute;
				top: -65px;
				left: -2px;
			}
		}
	}
	.checkbox {

		.contour & {
			input {
				margin: 5px 0 0;
			}
		}
	}
	.checkbox, .radio {

		label {
			text-transform: none !important;
		}
	}
}
.contour {
	@include sectionMargin();
}
.request-more-information-thank-you-message {
	display:none;
}
.contourNavigation {
	@extend %clearfix;
}
.contourField.checkbox > div {
	position: absolute;
	top: 0;
	left: 0;
}
.contourNavigation {

	.btn.primary {
		background-color: $pl-blue;
		@extend .btn-default;
	}

}
.contourMessageOnSubmit {
	@extend .large-body-copy;
	margin: 40px 0 80px;
}
.validation-summary-errors {
	margin: 20px 0;
	color: $pl-dk-orange;
}
    			 
                
            

Responsive Tables

Responsive Table Options

Click the tabs below to see examples of various tables. Most of the changes will only be noticeable when viewing on a mobile device or resizing your browser window to a mobile width.

Some general styling has been applied with your color schemes, and this can be adjusted as needed.

The tables used below is the markup used on your current site. You will still be able to add css classes to the table element or any other css classes you currently use, and you will be able to style them as needed.

  • The content that is in the first column of the tables will be treated as a title bar of the mobile content block.
  • <th> tags should be used if you want the styled bar at the top, and the text in those fields is also used in the mobile content blocks if the 'show-headers' class is used

Available CSS classes

The 'responsive-table' class is required for all responsive tables, but all others are optional and can be used all together if needed and as needed.

<table class="responsive-table show-headers condensed-table highlight-feature">

  • 'responsive-table' - makes the table responsive and stacks rows on mobile
  • 'show-headers' - this will clone the text in each <th> element and apply it to the mobile content block for every row. This only effects mobile
  • 'condensed-table' - adding this class will just tighten up the padding of the table cells
  • 'highlight-feature' - adding this class will highlight the first column of the table. This only effects desktop.
Material / Grade Max Depth
Aluminum / 6061-T651 3.75 in. (95.25mm)
Aluminum / 7075-T651 3.75 in. (95.25mm)
Brass / 260 (70/30) 1.75 in. (44.45mm)

Table Info

  • This should be used for simple tables that you want to stack in mobile.
  • Each row will become a stacked content block on mobile devices.
  • It requires the 'responsive-table' class on the table element.

 

 

 


Table HTML

Material / Grade Max Depth
Aluminum / 6061-T651 3.75 in. (95.25mm)
Aluminum / 7075-T651 3.75 in. (95.25mm)
Brass / 260 (70/30) 1.75 in. (44.45mm)
Material / Grade Features Color Max Depth
Aluminum / 6061-T651
  • Improved corrosion resistance over 7075
  • General purpose aluminum
  • Medium strength
Gray 3.75 in. (95.25mm)
Aluminum / 7075-T651
  • Higher strength over 6061
  • Good fatigue strength
Gray 3.75 in. (95.25mm)
Brass / 260 (70/30)
  • Good corrosion resistance
  • Resistant to most chemicals
  • Plate stock
Yellow 1.75 in. (44.45mm)

Table HTML

Material / Grade Features Color Max Depth
Aluminum / 6061-T651
  • Improved corrosion resistance over 7075
  • General purpose aluminum
  • Medium strength
Gray 3.75 in. (95.25mm)
Aluminum / 7075-T651
  • Higher strength over 6061
  • Good fatigue strength
Gray 3.75 in. (95.25mm)
Brass / 260 (70/30)
  • Good corrosion resistance
  • Resistant to most chemicals
  • Plate stock
Yellow 1.75 in. (44.45mm)
Material / Grade Features Color Max Depth
Aluminum / 6061-T651
  • Improved corrosion resistance over 7075
  • General purpose aluminum
  • Medium strength
Gray 3.75 in. (95.25mm)
Aluminum / 7075-T651
  • Higher strength over 6061
  • Good fatigue strength
Gray 3.75 in. (95.25mm)
Brass / 260 (70/30)
  • Good corrosion resistance
  • Resistant to most chemicals
  • Plate stock
Yellow 1.75 in. (44.45mm)

Table HTML

Material / Grade Features Color Max Depth
Aluminum / 6061-T651
  • Improved corrosion resistance over 7075
  • General purpose aluminum
  • Medium strength
Gray 3.75 in. (95.25mm)
Aluminum / 7075-T651
  • Higher strength over 6061
  • Good fatigue strength
Gray 3.75 in. (95.25mm)
Brass / 260 (70/30)
  • Good corrosion resistance
  • Resistant to most chemicals
  • Plate stock
Yellow 1.75 in. (44.45mm)
Material / Grade Features Color Max Depth
Aluminum / 6061-T651
  • Improved corrosion resistance over 7075
  • General purpose aluminum
  • Medium strength
Gray 3.75 in. (95.25mm)
Aluminum / 7075-T651
  • Higher strength over 6061
  • Good fatigue strength
Gray 3.75 in. (95.25mm)
Brass / 260 (70/30)
  • Good corrosion resistance
  • Resistant to most chemicals
  • Plate stock
Yellow 1.75 in. (44.45mm)

Table HTML

Material / Grade Features Color Max Depth
Aluminum / 6061-T651
  • Improved corrosion resistance over 7075
  • General purpose aluminum
  • Medium strength
Gray 3.75 in. (95.25mm)
Aluminum / 7075-T651
  • Higher strength over 6061
  • Good fatigue strength
Gray 3.75 in. (95.25mm)
Brass / 260 (70/30)
  • Good corrosion resistance
  • Resistant to most chemicals
  • Plate stock
Yellow 1.75 in. (44.45mm)

Search Overlay

HTML

You Searched for "parts"

Search Results

Loading More Results
    			 
    			
    		

SCSS

                
.search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba($pl-black, 0.8);
	z-index: 10000;
	display: none;
	overflow-x: hidden;
	overflow-y: auto;
}
.search-wrapper, .search-close-wrapper {
	margin: 0 auto;
	width: 80%;
	max-width: 1070px;
	background-color: rgba($pl-black, 0.9);

	@include bp-sm {
		width: 100%;
		padding: 100px 15px;
	}
	
}
.search-wrapper {
	position: static;
	padding: 100px 80px 50px 40px;
	min-height: 100%;

	@include bp-sm {
		width: 100%;
		padding: 100px 15px;
	}
}
.search-close-wrapper {
	
	height: 100px;
	padding: 0;
	//background-image: linear-gradient(to top, transparent, rgba($pl-black, 0.8) 55%);
	//background-image: -webkit-linear-gradient(bottom, rgba($pl-black, 0), #000 85%);
	background-color: transparent;
	@include horizontal-center(fixed);
	pointer-events: none;
	z-index: 100000;
}
.search-close {
	color: $pl-white;
	position: absolute;
	top: 30px;
	right: 20px;
	cursor: pointer;
	pointer-events: auto;

	i {
		@include font-size(30);

		@include bp-xs {
			@include font-size(20);
		}
	}
}
.search-container {
	color: $pl-white;

	.search-bar {
		position: relative;
		margin-bottom: 35px;

		input {
			@include font-size(38);
			height: 60px;
			background: none;
			border: none;
			border-bottom: 1px solid $pl-white;
			width: 100%;

			&::-ms-clear {
			    display: none;
			    width: 0;
			    height: 0;
			}

			@include bp-xs {
				height: 40px;
				@include font-size(20);
			}
		}
		.search-btn {
			right: 20px;
			@include vertical-center(absolute);
			margin: 0 !important;
			cursor: pointer;

			i {
				@include font-size(30);

				@include bp-xs {
					@include font-size(18);
				}
			}
		}

	}
	.search-info {
		@include font-size(22);
		margin-bottom: 70px;
	}
	h2 {
		margin: 0 0 30px;
	}
	.search-results {
		list-style: none;
		padding: 0;

		li {
			margin-bottom: 40px;

			.result-title {
				text-transform: uppercase;
			}
			.result-path {
				font-weight: $font-regular;
				margin-top: 5px;
				display: block;
			}
		}
		.more-results {
			text-transform: uppercase;
			font-weight: $font-bold;
		}
	}
} 
    			 
                
            

Services

HTML

  • 3D Printing

    3D Printing
    1 to 50+ 3D printed parts in 1 to 7 days. Stereolithography, selective laser sintering and direct metal laser sintering.
    Learn More
    			 
    			
    		

SCSS

                
.services-container {
	list-style: none;
	background-color: $pl-white;
	margin: -100px auto 35px;
	padding: 10px 0 0 10px;
	text-align: center;
	display: inline-block;
	@include horizontal-center(relative);
	@extend %clearfix;


	@include bp-sm {
		margin-top: -50px;
		display: block;
	}

	> li {
		float: left;
		width: 365px;
		margin-right: 10px;
		margin-bottom: 40px;
		position: relative;

		@include bp-lg {
			width: 300px;
		}
		@include bp-md {
			width: 225px;
		}
		@include bp-sm {
			float: none;
			width: auto;
			margin-bottom: 0;
		}

		&:hover {

			h2 {

				a {
					background-color: $pl-green;
					color: $pl-dk-gray;
					text-decoration: none;
				}
			}
		}
		h2 {
			
			margin: 0 0 20px;
			padding: 0;
			@include font-size(22);
			text-transform: uppercase;
			border: none;
			
			@include bp-md {
				@include font-size(18);
			}
			@include bp-sm {
				margin: 0 0 10px;
				
			}

			a {
				background-color: $pl-dk-gray;
				color: $pl-white;
				display: block;
				padding: 15px;

			}
		}
		img {
			margin: 7px 20px 20px 75px;
			float: left;

			@include bp-lg {
				margin: 7px 20px 20px 40px;
			}
			@include bp-md {
				margin: 7px 10px 20px;
				width: 25px;
			}
			@include bp-sm {
				display: none;
			}
		}
		.caption {
			margin: 0 20px 20px;
			text-align: left;
			min-height: 75px;

			@include bp-md {
				margin: 0 5px 20px;
			}

			@include bp-sm {
				display: none;
			}
			> ul {
				list-style: none;

			}
		}
		.cta-text {
			text-transform: uppercase;

			@include bp-sm {
				display: none;
			}

			&:before {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				content: '';
			}
		}
	}
}

.services-intro {
	@extend %clearfix;
	
	@include bp-sm-up {
		margin-top: -40px !important;
	}

	
} 
    			 
                
            

Tabs

Standard content here...
Metric content here...

HTML

Maximum Extents

Standard content here...
Metric content here...
    			 
    			
    		

SCSS

                
.tabs-container {
	position: relative;
	margin-bottom: 20px;
	
	> h3 {
		@include font-size(18);
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		font-weight: $font-bold;

		@include bp-sm {
			position: static;
			margin-bottom: 30px;
		}
	}
	.nav-tabs {

		> li {
			float: none;
			display: inline-block;
			margin-right: -2px;

			
			a {

				&:hover {
					border-color: transparent;
					text-decoration: underline;
				}
			}
			&.active {

				a {
					@include border-radius(0);
					border-color: $pl-lt-gray $pl-lt-gray transparent;

					&:hover {
						text-decoration: none;
					}
				}
			}
		}
	}
	.tab-content {
		padding: 15px;
		border: 1px solid $pl-lt-gray;
		border-top: none;
		//min-height: 350px;
	}
}
    			 
                
            

Content Separator

Without border fdjskl fdsaj fdskafdsa fdsaf dsafdsa


fdsafdsafdsafdf dsaf ds afdsa

 

With border fds fdsa fdsa fdsa


fdsafdsafdsafdsafdsafdsa

 

HTML

    			 
    			
    		

SCSS

                
    .content-block {
	min-height: 410px;
	@extend %clearfix;
	position: relative;
	overflow: hidden;
	@include sectionMargin();

	.slick-carousel & {
		min-height: 400px;
		margin-bottom: 0;
	}

	&.case-study {

		@include bp-sm {
			padding: 15px;
		}
	}

	&.featured-video {
		//margin: 60px 0;
	}
}

.content-media {
	position: absolute;
	left: 0;
	overflow: hidden;
	min-height: 410px;
	width: 60%;
	height: 100%;

	.featured-video & {
		position: relative;
		padding: 47px 0 40px 40px;



		@include bp-sm {
			padding: 0;
		}
	}
	.content-media-right & {
		padding: 47px 40px 40px 0;

		@include bp-sm {
			padding: 0;
		}
	}

	.content-media-left & {
		float: left;
	}
	.content-media-right & {
		float: right;
		left: 40%;

		@include bp-md {
			left: 45%;
		}
		@include bp-sm {
			left: 0;
			float: none;
		}
	}
	.featured-video & {
		left: 0;
	}

	@include bp-md {
		width: 55%;
	}

	@include bp-sm {
		float: none; 
		width: 100%;
		min-height: 150px;
		position: relative;
		left: 0;
	}
	.case-study & {
		position: relative;
		width: 100%;
		min-height: 250px;
		margin-bottom: 30px;
	}

	
}
.cs-list {
	list-style: none;
	padding: 0;
	position: relative;
	margin: 0 0 30px 0px;
	border-left: 2px solid $pl-orange;

	@include bp-sm {
		margin: 0 0 30px;
	}

	li {
		padding-left: 125px;
		margin-bottom: 5px;
	}
	.category {
		text-transform: uppercase;
		font-weight: $font-bold;
		position: absolute;
		left: 15px;
	}
}
.content-container {
	width: 40%;
	float: right;
	padding: 40px;
	background-color: $pl-dk-gray;
	color: $pl-white;

	.light-background & {
		background-color: $pl-lt-gray3;
		color: $pl-dk-gray;
	}
	.content-media-left & {
		float: right;
	}
	.content-media-right & {
		float: left;

		.content-content {

			.container-fluid & {
				float: right;

				@include bp-sm {
					float: none;
				}
			}
		}
	}

	@include bp-md {
		width: 45%;
		//padding-bottom: 100px;
	}
	@include bp-sm {
		float: none;
		width: 100%;
		padding: 40px 40px 80px;
	}

	&:after {
		content: '';
		background-color: $pl-dk-gray;
		//padding-bottom: 1000px;
		width: 100%;
		margin: 0;
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.light-background & {
			background-color: $pl-lt-gray3;
		}
	}
	.case-study & {
		width: 100%;
		background-color: transparent;
		color: $pl-dk-gray;
		padding: 0;

		&:after {
			display: none;
		}
	}
	

	.content-content {

		.container-fluid & {
			width: 400px;

			@include bp-lg {
				width: 300px;
			}
			@include bp-sm {
				width: 100%;
			}
		}
		
		.case-study & {
			width: auto;
		}

		h2 {
			@include font-size(26);
			font-weight: $font-bold;
			margin: 0 0 20px;
			padding: 0;
			border: none;

			@include bp-md {
				@include font-size(20);
			}
		}
		.caption {
			margin-bottom: 30px;

			@include bp-md {
				margin-bottom: 30px;
			}

			p {
				margin-bottom: 30px;
			}
		}
		.cta-text {
			color: $pl-white;
			text-transform: uppercase;
			@include font-size(20);
			position: relative;
			padding-right: 20px;
			display: block;

			.light-background & {
				color: $pl-dk-gray;
			}

			
			i {
				@include font-size(16);
				position: absolute;
				right: auto;
				bottom: -2px;
				margin-left: 10px;

				@include bp-xs {
					@include font-size(12);
				}
			}

			@include bp-md {
				@include font-size(18);
			}
		}

		.case-study & {
			max-width: none;

			.subtitle {
				@include font-size(18);
				margin: 0 0 40px;
				font-weight: $font-bold;
			}
			.cta-text {
				color: $pl-blue;

				&:hover {
					color: $pl-blue;
				}
			}
		}
	}
}
    			 
                
            
You Searched for "parts"

Search Results

Loading More Results
You Searched For ""