/* ##########################################################################
B R E A K P O I N T (480px)  
########################################################################## */

@media only screen and (min-width: 480px) and (max-width: 767px) {
.menu-site > li {
float: left;
width: 100% !important;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
padding-left: 0px !important;
padding-right: 0px !important;
}

.menu-site > li > a {
border-bottom: 1px solid #d0d2d6;
display: block;
color: #000;
padding: 20px !important;
background: #fff;
}

.menu-site > li > a:hover {
border-bottom: 1px solid #d0d2d6;
display: block;
color: #fff !important;
padding: 8px 0 7px;
background: #b41747;
}	

.container.middle {
width: auto !important;
margin:0 auto;
}

.left1 {margin-left:25px;}
#home-promo {max-width: 527px !important}
#home-promo-pad {min-width: 100px !important; max-width: 100px !important}
#home-promo h3 {font-size: 20px; max-width: 350px; padding-top: 5px !important}
#home-promo .first {font-size: 12px;line-height:14px; color:#fff; max-width: 275px; padding: 0px; margin: 0; display: table !important}
#home-promo .second {display:none !important;}
#home-promo .third {display:none !important;}
#home-promo .btn, #home-promo .btn a {font-size: 11px;}
#home-promo .btn-extra-large {padding: 0px 6px 0px 6px;}

/*! New Style Coding For New Landing Pages 04/10/2018 */	
.prime-header h1 {font-size:24px; line-height:30px; max-width: 600px}
.prime-header h1 span {font-size:25px;}	
a#quick-rfq {position: absolute !important;}

/*! New Style Coding For New Landing Pages 04/17/2018 */

/*.bar1 {min-height: 300px} 
.top {margin-top:-90px;} */

.top .col-md-6 {width:50%; float:right;}

.top .button {
display: inline-block;
font-weight: 500;
font-size: 15px;
font-family: 'Roboto', sans-serif;
line-height: 20px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
text-shadow: none;
white-space: normal;
width: 220px;
height: auto;
padding: 5px;
position: relative;
z-index: 1000;
margin:5px 0;
}

.top .button1 {
display: inline-block;
font-weight: 500;
font-size: 15px;
font-family: 'Roboto', sans-serif;
line-height: 20px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
text-shadow: none;
white-space: normal;
width: 220px;
height: auto;
padding: 5px;
position: relative;
z-index: 1000;
margin:5px 0;
}

.top .button1 :hover {
border:1px solid #fff;
}	

/*! New Style Coding For New homepage layout 04/27/2018 */	

.services-industries {
top: 0px !important;
}	

h3.home-services {
font-size: 34px;
font-weight: 300;
letter-spacing: 0;
text-transform: uppercase;
text-align: center;
padding: 40px 0px 20px 0px;

}	

span.service-bio {
font-size: 12px;
line-height: 18px;
text-transform: none;
letter-spacing: 0 !important;
padding: 8px 0 16px 0;
width: 100% !important;

}	

.service-cell {
background: rgba(0, 0, 0, .25);
width: 100%;
height: 266px;
transition: 0.8s;
margin: 10px 0;
border: 1px solid #fff;
box-shadow: 2px 2px #ddd;

}	
.service-cell:hover {
width: 95%;
height: 95%;
margin: 5px;
box-shadow: 2px 2px #ddd;	

}		

/*! New Coding landing page header 05/03/2018 */	

.prime-header-back {
max-height: 300px;
overflow: hidden
}

.prime-header-back img{
height: 100%;
min-height: 300px;	
width: 190% !important;
max-width: 190% !important;
top: 0 !important;
right: 50%
}

.secondary-header div { 
padding: 0 16px;
}	

/*! New Coding From Matt 05/09/2018 */	
.site-branding {
padding: 8px 0;
width: 25%;
float:left;
}	

.site-branding-1 {
padding: 0;
width: 50%;
display: block;
position: relative;
float: left;
margin-top: 30px;
text-align:center;
left:0;
}

.site-branding-2 {
display: none;
}	

.banner-slider .slide-title {
width:75%;
}

/*! New Coding From Matt 05/11/2018 */

.prime-header-1 .dim4 {
position: absolute;
display: block;
margin: 10px 0px;
}	

.prime-header-1 h1 span {
font-size: 14px;
line-height: 20px;
width: 100%;
font-weight: 600;
text-align: left;
text-shadow: 2px 2px #000;
top: 0px;
margin-bottom: 0px;
position: relative;
display: block;
}

.prime-header-1 h1 {
font-size: 15px;
text-align: left;
font-weight: 600;
line-height: 20px;
z-index: 100;
max-width: 1300px;
text-shadow: 2px 2px #000;
margin-top: -50px !important;
margin-bottom:10px !important;;
}

.breadcrumbs {
font-size: 10px !important;
line-height: 15px!important;
top: 5px;
margin-left: 15px;
}

.prime-header-1 .top .button {
display: inline-block;
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0px;
width: 175px;
}	


.prime-header-1 .top .button1 {
display: inline-block;
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0px;
width: 175px;
top: -40px;
}	

.prime-header-1 .button1:hover {
border: 1px solid #fff;
}

.prime-header-1 .bar7 {width:95% !important;}

/*! New Coding landing page header 06/12/2018 */	

.secondary-header h2 {
font-size: 24px !important;
line-height: 28px !important;
}

.metbrand2 {
font-size: 22px !important;
letter-spacing: -0.5px !important;
}	

.middle-buttons {
margin:0 auto;
}
.middle-buttons .text-left {
width: 40%;
float: left;
}

.middle-buttons .text-right {
width: 40%;
float: right;
}

.service-list > li {
list-style: none;
font-size: 15px;
padding: 0 5px;
}

.industry-list > li {
list-style: none;
font-size: 15px;
padding: 0 5px;
}	

.sidebar-area {
background: #fafbfb;
border-top: none !important;
padding-top: 38px;
clear: both;
}

.site-sidebar {
margin-top: 0px !important;
padding-top: 0px;
box-shadow: 5px 2px 5px 5px #ecedee;
}

.menu-sidebar {
margin-bottom: 40px;
padding: 0 10px !important;
}

hr, .hr {
padding: 20px 0 !important;
margin-bottom: 0px !important;
}

#complementary .contact-us {
margin-top: 20px;
}

.contact-us-title {
font-size: 25px !important;
}


/*! New Coding landing page header 08/09/2018 */	

.main .site-branding {
padding: 10px;
margin: 0 auto;
width: 60%;
float:left;
margin-top:10px;
}	

.main .site-branding-1 {
display:none !important;
}	

.main .navigation-toggle {
background: transparent;
border: transparent;
margin: 0;
padding: 0;
position: absolute;
top: -175px;
right: 16px;
z-index: 9999;
}

.main .navigation-toggle-title {
display: table-cell;
vertical-align: middle;
padding-right: 8px;
font-size: 10px;
}

.main .site-header-primary {
border-bottom: none;
padding-top: 0px;
padding-bottom: 0px;
}
.main .menu-header > li > a {
border-bottom: 1px solid #d0d2d6;
display: block;
color: #000;
padding: 8px 0 7px;
font-size: 12px;
text-align: center;
}

.banner-slider .slide .media {
display: inline !important;
}

.banner-slider .slide {
height: 350px!important;
}

.main .site-search {
display: inline-block;
vertical-align: top;
position: relative;
width: 40px;
top: 20px;
float: right;
}

.spyglass {
border: 0;
margin: auto 0;
padding: 0px;
/*position: relative !important;*/
top: 0;
right: 0;
bottom: 0;
width: 40px!important;
height: 40px!important;
background: #eee !important;
display: inline-block;
}	


.main .top-bar {
background: #e3e4e6;
padding:5px 0 5px 0;
}

.main .search-form-btn .icon {
font-size: 20px;
margin-left: -7px;
}

/*.main .top-bar input {
width: 200px;
} */	


.article-intro-region {
background: linear-gradient(to bottom, rgba(36,36,36,.01) 2%, rgba(0,0,0,0.89) 20%,rgba(0,0,0,0.99) 45%,rgba(0,0,0,1) 100%);
margin-top: -100px; padding: 0 0 20px 0;
z-index:  10; text-align: left}

.article-related a:hover {opacity: 0.8; box-shadow: 1px 2px 3px rgba(0,0,0,.8)}

.container-nav {
background: #e3e4e6;
padding: 0 16px 20px
}	

.bottom-main h4 {color:#fff;}	
	
.services-content-area .site-content {
background: #E3E4E6 url(http://www.metlabs.com/wp-content/uploads/2018/08/bg-rpt-02.png) repeat center top !important;
padding-top: 24px;
padding-bottom: 4px;
}	

.contact-us {
background: #b41747 url(http://www.metlabs.com/wp-content/uploads/2018/08/bg-01.png) no-repeat center top !important;
}	

.bottom-main .btn {margin-top:0; margin-bottom:20px;}
.bottom-main .new-logo-1 {margin-bottom: 50px;}	
.bottom-main .bottom-org {
color: #fff;
font-size: 11px;
line-height: 15px;
margin-top: 0px;
padding: 10px;
}	
}




/* ##########################################################################
B R E A K P O I N T (768px)  
########################################################################## */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.container.middle {width: auto !important;margin:0 auto;}
#home-promo {max-width: 610px !important}
#home-promo-pad {min-width: 75px !important; max-width: 75px !important}
#home-promo h3 {font-size: 24pt !important; max-width: 380px; padding-top: 30px !important}
#home-promo .first {font-size: 12px; line-height: 16px; color:#fff; max-width: 275px; padding: 0px; margin: 0; display: table !important}
#home-promo .second {display:none !important;}
#home-promo .third {display:none !important;}
#home-promo .btn, #home-promo .btn a {font-size: 11pt !important}


/*! New Style Coding For New Landing Pages 04/10/2018 */	
.prime-header h1 {font-size:34px; line-height: 30px; max-width: 700px;}
.prime-header h1 span {font-size:18px;}	



/*! New Style Coding For homepage layout 04/27/2018 */	
.service-wrap h3 {
color: #fff;
font-size: 12px;
line-height: 16px;
font-weight: 800;
text-align: center;
text-transform: uppercase;
padding-left:5px;
padding-right:5px;
}

.btn-alt {

width: 75% !important;
left: 0;
right: 0;
margin: 0 auto;
padding: 5px !important;
color: #fff !important;
font-size: 12px!important;
letter-spacing: 0 !important;
position: absolute;
bottom: 45px;
border: solid 1px #fff !important;
}

.site-branding {
padding: 8px 0;
width: 25%;
float:left;
}	

.site-branding-1 {
padding: 0;
width: 50%;
float: left;
margin-top: 30px;
text-align:center;
left:0;
display: block;
}

.site-branding-2 {
display: none;
}	


.banner-slider .slide-title {
width:75%;
}

/*! New Coding landing page header 08/09/2018 */	

.main .site-branding {
padding: 10px;
margin: 0 auto;
width: 60%;
float:left;
}	

.main .site-branding-1 {
display:none !important;
}	

.main .navigation-toggle {
background: transparent;
border: transparent;
margin: 0;
padding: 0;
position: absolute;
top: -170px;
right: 16px;
z-index: 9999;
}

.main .navigation-toggle-title {
display: table-cell;
vertical-align: middle;
padding-right: 8px;
font-size: 10px;
}

.main .site-header-primary {
border-bottom: none;
padding-top: 0px;
padding-bottom: 0px;
}
.main .menu-header > li > a {
border-bottom: 1px solid #d0d2d6;
display: block;
color: #000;
padding: 8px 0 7px;
font-size: 12px;
text-align: center;
}

.banner-slider .slide .media {
display: inline !important;
}

.banner-slider .slide {
height: 350px!important;
}

.main .site-search {
display: inline-block;
vertical-align: top;
position: relative;
width: 40px;
top: 20px;
float: right;
}

.spyglass {
border: 0;
margin: auto 0;
padding: 0px;
/*position: relative !important;*/
top: 0;
right: 0;
bottom: 0;
width: 40px!important;
height: 40px!important;
background: #eee !important;
display: inline-block;
}	


.main .top-bar {
background: #e3e4e6;
padding:5px 0 5px 0;
}

.main .search-form-btn .icon {
font-size: 20px;
margin-left: -7px;
}

/*.main .top-bar input {
width: 200px;
} */	


.article-intro-region {
background: linear-gradient(to bottom, rgba(36,36,36,.01) 2%, rgba(0,0,0,0.89) 20%,rgba(0,0,0,0.99) 45%,rgba(0,0,0,1) 100%);
margin-top: -100px; padding: 0 0 20px 0;
z-index:  10; text-align: left}

.article-related a:hover {opacity: 0.8; box-shadow: 1px 2px 3px rgba(0,0,0,.8)}

.container-nav {
background: #e3e4e6;
padding: 0 16px 20px
}	


}