html,body {
  width:100%
}

body {


}

h1 {

}

p {

  	margin-bottom:15px
}

a {
  color:#0064af;
  text-decoration:none  
}

a:hover {
  color:#000;
  text-decoration:none
}

.center { display: block; margin: 0 auto; }

.blue {color: #0064af !important;}

strong {font-weight: 400;}

#contact {width: 100%; height: 25px; color: #0064af; text-align: right; margin-top: 10px; outline: 0px solid #ff0000;}
#contact ul {list-style-type: none;}
#contact ul li {display: inline; text-align: center;	padding: 0 5px 0 5px; }		

.left {display: block; float: left; margin-left: 20px; border: 0px solid red;}

.right {display: block; float: right; text-align: left;}

.half {min-width: 45%; max-width: 45%;}

.fixed {max-width: 1000px;}

section .container {
	max-width: 1200px;
	margin: 0px auto;
	border: 0px solid green;
	display: block;
}

section {overflow: hidden;}



section.home-mobile {display: none;}

section .htw {position: relative; min-height: 580px; max-height: 580px; overflow: hidden;}

section .one-third {
	min-width: 320px; 
	max-width: 320px; 
	float: left;
	border: 0px solid red;
}
section .two-thirds {
	min-width: 640px; 
	max-width: 640px; 
	float: left;
	border: 0px solid green;
}

.margin-left {margin-left: 20px;}
.margin-right {margin-right: 20px;}

.tech-tip-box {
	border: 1px solid #0064af;
	border-radius: 5px;
	display: inline-block;
	padding: 10px;
	margin: 0px 0px 40px 40px;
	float: right;
	text-align: center;
}

.tech-tip-box .tech-title {
	margin: -20px 0px 0px 10px;
	padding: 0px 5px 0px 5px;
	display: inline-block;
	background: #fff;
	color: #0064af;
	font-size: 24px;
	font-weight: 400;
}

.tech-tip-box .tech-link {
	font-size: 14px;	
}

.tech-tip-box .tech-item {
	margin: 15px;
}

.htw-container {
	min-width: 1200px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	position: absolute; z-index: 2000; left: 0;right: 0; margin-left: auto; margin-right: auto; top: 20px;
}


section a.info-button {
	background: #fff;
	padding: 2px 8px 2px 8px;
	color: #dc3232;
	font-size: 16px;
	text-decoration: none;
	border: 1px solid #ccc;
}

section a.info-button  strong {display: inline;}

section  a.info-button:hover {	color: #fff; background: #a02424;	border: 1px solid #aa2626;
	transition: background .25s ease-in-out;
	-moz-transition: background .25s ease-in-out;
	-webkit-transition: background .25s ease-in-out;	}
	
section h1{
  text-align: center;
  font-size:36px;
  color: #303030;
  font-weight: 300;
}

section h2{
  text-align: center;
  font-size:36px;
  color: #303030;
  font-weight: 300;
}

section h3{
  text-align: left;
  font-size:30px;
  color: #303030;
  font-weight: 300;
}

section div.top-margin {
	display: block;
	margin-top: 180px;
}

section div.clear{
	clear: both;
}

#section-block {
	width: 100%;
	background: #0163b1;
	border-top: 0px solid #0163b1;
}

#section-block #default{
	border: 0px solid red;
}

#section-block #default img{
	border: 0px solid green;
}

#intro-vid { border: 0px solid red; margin-top: 20px; }




#section-block #home {width: 100%; height: 385px; padding-left: 20px; border: 0px solid red; background: url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y; }
#section-block #home span {display: block; font-size: 36px; font-weight: 400; line-height: 42px; padding: 10px 0; color: #fff;}
#section-block #home span em {display: block; font-style: normal;  font-weight: 700; color: #fff;}
#section-block #home strong {
	display: block; text-align: left;font-size: 24px; 
	font-weight: 400; line-height: 30px; margin-top: 20px;
	padding: 0 0 0 30px; color: #fff;
	background: url(https://www.protocase.com/img/icon-g-arrow.png) top left no-repeat;
	}
#section-block #home p {color: #fff; min-width: 100%; font-weight: 600; margin: 30px auto;}

#section-block #home img {float: right; margin-right: 20px;}

#section-block #home #intro-vid {float: right; position: relative; width: 580px; height: 385px;  padding-left: 50px; background: url()top left no-repeat;}
#section-block #home #intro-vid #vid-wrapper {position: absolute; top: 28px; left: 35px; border: 4px solid #fff;}

section.testimonials {
  padding: 10px 0px 10px 0px;
  background: #fff;
  border-bottom: 0px solid #eee;
  width:100%
}

section#how-to-work {
  padding: 10px 0px 10px 0px;
  background: #fff url(https://www.protocase.com/img/office.jpg) top center no-repeat;
  background-size: 100% auto ;
  border-top: 1px solid #ccc;
  width:100%
}
section#how-to-work2 {
  padding: 10px 0px 10px 0px;
  background: #fff url(https://www.protocase.com/img/office2.jpg) top center no-repeat;
  background-size: 100% auto ;
  border-top: 1px solid #ccc;
  width:100%
}
section#how-to-work3 {
  padding: 10px 0px 10px 0px;
  background: #fff url(https://www.protocase.com/img/office3.jpg) top center no-repeat;
  background-size: 100% auto ;
  border-top: 1px solid #ccc;
  width:100%
}
section.designer {
  padding: 10px 0px 10px 0px;
  background: #f5f5f5;
  border-bottom: 0px solid #eee;
  width:100%;
  overflow: hidden;
  text-align: center;
}

section.spotlight {
  padding: 10px 0px 10px 0px;
  background: #fff;
  width:100%;
    overflow: hidden;
}

section.spotlight p a {
	font-size: 24px; 
	line-height: 30px;
	font-weight: 300;
	color: #303030;
	text-decoration: none;
	
}
section.spotlight p a:hover {	color: #00507d;	text-decoration: none;}

section.top-message H1 {
  display: inline-block;
  font-size:72px;
  color: #545454;
  text-align:center;
  width:75%;		

  border: 0px solid green;
}

section.top-message img.product-image {

  float: left;
  margin-right: 20px;
    border: 0px solid blue;
  }

section.top-message h4 {
  font-size:24px;
  color: #000;
  text-align:center;
  position:relative;
}
.spacer {display: block; height: 20px;}
.spacer-home {display: block; height: 120px;}

section.product-blocks {

  border: 0px solid red;
  width:100%;
  text-align: center;
  background: #0064af url() top left repeat-y; 
}

section.header-block {
  text-align: left !important;
  margin-top: 0px !important;
  padding-top: 0px !important;
  width:100%;
    background: #0064af url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y;
}

	.shadow {
		display: block;
		width: 100%;
		height: 20px;margin-bottom: 10px; margin-top: 10px;
		background: #fff url(https://www.protocase.com/v7/img/title-shadow.jpg)top center no-repeat;
	}

ul.two-column {
	list-style-type: none; 
	text-align: left !important;
}
ul.two-column li {display: inline-block; float: left; min-width: 45%; max-width: 45%; width: 45%; border: 0px solid red;}


section.header-block h1 {display: block; font-size: 48px; font-weight: 400; line-height: 48px; padding: 20px 0; color: #fff; margin-top: 0px;}
section.header-block h2 {display: block; text-align: left !important; font-size: 18px; font-weight: 600; line-height: 24px; margin-top: 10px; padding: 0 0 0 30px; 
	color: #fff;
	background: url(https://www.protocase.com/img/icon-g-arrow.png) top left no-repeat;
	}

section.section-top {
  background: #0064af;
  width:100%;

}
section.product-blocks .margin {
	display: block;
	margin-top: 0px;
}

section.product-blocks h1 {
  font-size:32px;
  font-weight: 300;
  color:#fff;
  text-align:center;
  position:relative;
  margin-top: 40px;  
}

section.product-blocks h1 a {font-weight: 400; color:#eee; text-decoration: none;}
section.product-blocks h1 a:hover {font-weight: 400; color:#fff; text-decoration: none;}

section.product-blocks h2 {
  font-size:30px;
  font-weight: 300;  
  color:#303030;
  text-align:center;
  position:relative;
  margin-top: 20px;  
}

section.product-blocks .message-wrapper {
  background-color: rgba(255,255,255,0.15); 
  	border-radius: 3px;	
	-khtml-border-radius:  3px;
	-webkit-border-radius:  3px;
	-moz-border-radius:  3px;	
}

table.blueTable {
  border: 2px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  border: 1px solid #AAAAAA;
  padding: 5px 5px;
  vertical-align: top;
}
table.blueTable tbody td {
  font-size: 16px;
}
table.blueTable tr:nth-child(even) {
  background: #D0E4F5;
}
table.blueTable thead {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
table.blueTable thead th {
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
  border-left: none;
}

table.blueTable tfoot td {
  font-size: 14px;
}
table.blueTable tfoot .links {
  text-align: right;
}
table.blueTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

ul#solutions {display: table; list-style-type: none; margin: 0px auto; padding: 0px; border: 0px solid green;}

ul#solutions li.block {display: table-cell; max-width: 320px;margin-right: 10px; text-align: center; vertical-align: top;}
ul#solutions li.divider {display: table-cell; max-width: 10px; min-width: 10px; width: 10px; margin-right: 10px; vertical-align: top;}

ul#solutions li.divide {display: inline-block; margin-right: 10px; text-align: center; border-left: 1px dashed #ccc; min-height: 260px; margin-top: 140px;}

ul#solutions li h1 {
	font-size: 24px;
	font-weight: 300;
	color: #fff;
	line-height: 30px;
}

ul#solutions li span {
	font-size: 24px;
	font-weight: 300;
	color: #fff;

}
ul#solutions li p {
	display: inline;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
}

ul#solutions li div {
	display: block;
	width: 240px;
	height: 224px;
	min-width: 240px;
	min-height: 224px;
	margin: 10px auto 10px auto;
	border: 1px solid #ccc;
	padding: 0px;
	font-size: 30px;
	text-align: center;
	color: #303030;
	border-radius: 3px;	
	-khtml-border-radius:  3px;
	-webkit-border-radius:  3px;
	-moz-border-radius:  3px;	
}

ul#solutions li div.enclosures {background: #f5f5f5 url(https://www.protocase.com/img/home-enclosure-back.png) top center no-repeat;
background-size: 240px 224px;
	 -webkit-transition: all .25s;
  	 -moz-transition: all .25s;
    transition: all .25s
	}
ul#solutions li div.enclosures:hover {
	background: #ffffff url(https://www.protocase.com/img/home-enclosure-back.png) top center no-repeat;
	border: 1px solid #afcde6; 
	 -webkit-transition: all .255s;
  	 -moz-transition: all .25s;
    transition: all .25s
	}
ul#solutions li div.parts {background: #f5f5f5 url(https://www.protocase.com/img/home-parts-back.png) top center no-repeat;
	 -webkit-transition: all .25s;
  	 -moz-transition: all .25s;
    transition: all .25s
	}
ul#solutions li div.parts:hover {
	background: #ffffff url(https://www.protocase.com/img/home-parts-back.png) top center no-repeat;
	border: 1px solid #afcde6; 
	 -webkit-transition: all .255s;
  	 -moz-transition: all .25s;
    transition: all .25s
	}
ul#solutions li div.mcf {background: #f5f5f5 url(https://www.protocase.com/img/home-cnc-back.png) top center no-repeat;
	 -webkit-transition: all .25s;
  	 -moz-transition: all .25s;
    transition: all .25s
	}
ul#solutions li div.mcf:hover {
	background: #ffffff url(https://www.protocase.com/img/home-cnc-back.png) top center no-repeat;
	border: 1px solid #afcde6; 
	 -webkit-transition: all .255s;
  	 -moz-transition: all .25s;
    transition: all .25s
	}	
	
ul#solutions li div.cnc {background: #f5f5f5 url(https://www.protocase.com/img/home-cnc-back.png) top center no-repeat;
	 -webkit-transition: all .25s;
  	 -moz-transition: all .25s;
    transition: all .25s
	}
ul#solutions li div.cnc:hover {
	background: #ffffff url(https://www.protocase.com/img/home-cnc-back.png) top center no-repeat;
	border: 1px solid #afcde6; 
	 -webkit-transition: all .255s;
  	 -moz-transition: all .25s;
    transition: all .25s
	}

ul#solutions li div:hover {
	background: #fff url(../../img/products/storinator-s45-new.png) center center no-repeat;
	  -webkit-transition:background .3s;
	  -moz-transition:background .3s;
	  transition:background- .3s	
}

ul.inline {list-style-type: none; border: 0px solid blue; margin: 10px 0px; padding: 0px;}
ul.inline li {display: inline-block; margin-right: 10px; vertical-align: top;}

ul#two-column { margin:0 auto !important; padding:0;list-style-type: none; display: table; }

ul#two-column img.diagram {display: block; margin: 0 auto;}

ul#two-column li {
	min-width: 475px; width: 475px; max-width: 475px; 
	text-align: center;
	outline: 1px solid transparent; vertical-align: top; padding:10px 0px 10px 0px; margin-left: 20px; display: table-cell;}

ul#two-column li:hover {outline: 1px solid #eee; }	

.prod-os {display: block; width: 75%; margin: 0px auto; background: #ddd; border: 1px solid #ccc; text-align: center; padding: 5px;}
.prod-os img {float: left;}
.prod-os strong {display: block; font-size: 24px; font-weight: 400; margin: 0px; color: #007dc3;}

a.section-button {
	display: inline-block;
	background: #69af32; color: #fff;
	padding: 2px 6px 2px 6px;
	
	font-size: 22px;
	font-weight: 400;
	text-decoration: none;
	border: 1px solid #eee;
	cursor: pointer;
	margin-top: 10px;
	border-radius: 3px;	
	-khtml-border-radius:  3px;
	-webkit-border-radius:  3px;
	-moz-border-radius:  3px;		
}

a.section-button strong {display: inline; }

a.section-button:hover {	color: #fff; background: #303030;	border: 1px solid #303030;  text-decoration:none;
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;	}

	
#rig {
    max-width:1200px;
    margin:10px auto; /*center aligned*/
    padding:0;
    font-size:0; /* Remember to change it back to normal font size if have captions */
    list-style:none;
    background-color:transparent;
	border: 0px solid red;
}
#rig li {
    display: inline-block;
    *display:inline;/*for IE6 - IE7*/
    max-width:13.5%;
    vertical-align:middle;
    box-sizing:border-box;
    margin:3px;
    padding:0;
}
    
#rig li:hover {
    display: inline-block;
    *display:inline;/*for IE6 - IE7*/
    max-width:13.5%;
    vertical-align:middle;
    box-sizing:border-box;
    margin:3px;
    padding:0;
}
    
/* The wrapper for each item */
.rig-cell {
    /*margin:12px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
    display:block;
    position: relative;
    overflow:hidden;
	margin: 0px;
}
.rig-cell:hover {
    /*margin:12px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
    display:block;
    position: relative;
    overflow:hidden;
	margin: 0px;
}
    
/* If have the image layer */
.rig-img {
    display:block;
    width: 100%;
    height: auto;
    border:none;

}

#rig li:hover .rig-img {
 
}
        
/* If have the overlay layer */
.rig-overlay {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #69af32 url(../img/home/grid/link.png) no-repeat center top;
    background-size:35px 35px;
    opacity:0;
    filter:alpha(opacity=0);/*For IE6 - IE8*/
    transition:all 0.6s;
}
#rig li:hover .rig-overlay {
    opacity:0.9;
}

/* If have captions */
.rig-text {
    display:block;
    padding:0 10px;
    box-sizing:border-box;
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    font-size:13px;
	line-height: 15px;
    font-weight:300;
	font-family: 'Source Sans Pro', sans-serif;
    font-weight:normal!important;
    top:42%;
    color:white;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    transform:translateY(-20px);
    transition:all .3s;
}
#rig li:hover .rig-text {
    transform:translateY(0px);
    opacity:0.9;
}

.mobile-only {display: none;}
section.no-mobile {display: block;}
section.mobile-only {display: none;}

table#mob-table td {
			/* Behave  like a "row" */
			border: 1px solid #303030;
			border-bottom: 1px solid #eee;
			padding-left: 2px;
		}


@media (max-width: 9000px) {
    #rig li {
        width:25%;
    }
}

@media (max-width: 700px) {
    #rig li {
        width:33.33%;
    }
}

@media (max-width: 550px) {
    #rig li {
        width:50%;
    }
}	

@media screen and (min-width: 320px) and (max-width: 480px) { 

#section-block {
	width: 100% !important; min-width: 100% !important; width: 100% !important;
	background: #0163b1;
	border-top: 0px solid #0163b1;
	padding: 0px 0px 0px 0px;
	min-height: 300px;
}

#section-block #default{
	border: 0px solid red;
}

#section-block #default span{
	font-size: 30px;
}
#section-block #default p{
	width: 300px;  font-size: 18px; font-weight: 300; 
}
#section-block #default img{
	display: none;
}


#header {height: 60px;}

#rig {display: none;}

.mobile-only {display: block;}
img.no-mobile {display: none;}
img.mobile-30 {width: 30%; height: auto; margin: 5px;}
img.mobile-50 {width: 50%; height: auto; margin: 5px;}
img.mobile-70 {width: 70%; height: auto; margin: 5px;}
img.mobile-90 {width: 90%; height: auto; margin: 5px;}
img.mobile-100 {width: 100%; height: auto; margin: 0px;}
img.mobile-center {display: block !important; float: none; margin: 0px auto 10px auto;}
.no-mobile {display: none;}
.center { max-width: 300px !important; margin: 0 auto;}


section .container {
	min-width: 320px;
	max-width: 320px;	
	width: 320px;
	margin: 0px auto;
	border: 0px solid green;
	display: block;
}

section .one-third {
	min-width: 320px; 
	max-width: 320px; 
	float: left;
	border: 0px solid red;
}
section .two-thirds {
	min-width: 320px; 
	max-width: 320px; 
	float: left;
	border: 0px solid green;
}

.margin-left {margin-left: 0px;}
.margin-right {margin-right: 0px;}

.tech-tip-box {
	max-width: 320px !important;
	border: 0px solid transparent;
	border-radius: 0px;
	display: block;
	padding: 0px;
	margin: 20px 0px 40px 0px;
	float: left !important;

}

.tech-tip-box .tech-title {
	margin: -20px 0px 0px 10px;
	padding: 0px 5px 0px 5px;
	display: inline-block;
	background: #fff;
	color: #0064af;
	font-size: 24px;
	font-weight: 400;
}

.tech-tip-box iframe {width: 300px !important; height: 169px !important;}

.tech-tip-box .tech-link {
	font-size: 14px;	
}

.tech-tip-box .tech-item {
	margin: 0px;
}

#section-block #new-home {width: 320px !important; max-width: 320px !important; min-width: 320px !important; max-height: 385px; color: #fff; padding-left: 0px; margin-top: 0px !important; background: #0163b1 url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y; }

section.home {
display: none;	
width: 320px !important; max-width: 320px !important; min-width: 320px !important;
height: 250px; padding-left: 0px; 
border: 0px solid red; 
color: #fff;
text-align: center;
background: #0163b1 url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y; 	
overflow: hidden;
padding-bottom: 0px;
} 	

section .htw {position: relative;  max-height: 2000px;}

.htw-container {
	min-width: 300px;
	max-width: 300px;
	margin: 0 auto;
	padding: 0px;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	position: relative;  margin-left: auto; margin-right: auto; top: 20px;
}

section.home-mobile  {
display: block;
width: 100% !important; max-width: 100% !important; min-width: 100% !important;
padding-left: 0px; 
border: 0px solid red; 
color: #fff;
text-align: center;
background: #0163b1 url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y; 	
overflow: hidden;
padding-bottom: 0px;
margin-top: 0px;
} 	


ul#solutions {display: block; list-style-type: none; margin: 0px auto; padding: 0px; border: 0px solid green;}

ul#solutions li.block {display: block; max-width: 320px;margin-right: 10px; text-align: center; vertical-align: top;}

	ul#product-box { width: 320px; overflow: auto; min-height: 2000px !important; padding-left: 0px;}
	ul#product-box { width: 320px; overflow: auto; min-height: 2000px !important; padding-left: 0px;}
	ul#product-box li.semi-t {display: inline-block; width: 275px; margin: 0px; }




		/* Force table to not be like tables anymore */
		table#mob-table, table#mob-table thead, table#mob-table tbody, table#mob-table th, table#mob-table td, table#mob-table tr {
			display: block;
			
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		table#mob-table thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		table#mob-table tr {
		  margin: 0 0 1rem 0;
		}
		  
		table#mob-table tr:nth-child(odd) {
		  background: #ccc;
		}
    
		table#mob-table td {
			/* Behave  like a "row" */
			border: 1px solid #303030;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
			padding-top: 4px;padding-bottom: 4px;
		}

		table#mob-table td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			max-width: 45%;
			padding-right: 10px;
			white-space: wrap;			
			padding-top: 4px;padding-bottom: 4px;
		}

		/*
		Label the data
		You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		table.perf td:nth-of-type(1):before { content: "Gauge"; }
		table.perf td:nth-of-type(2):before { content: "Thickness"; }
		table.perf td:nth-of-type(3):before { content: "Circle Diameter"; }
		table.perf td:nth-of-type(4):before { content: "Pattern "; }
		table.perf td:nth-of-type(5):before { content: "Sheet Size"; }
		table.perf td:nth-of-type(6):before { content: "ASTM Tolerance"; }

		
	}