/*======================================================
Screen Style Sheet
Bayou City Bolt & Supply
------------------------------------------------------
Author(s): Melody Tran
Created: January 23th 2017
======================================================*/


.tablet-phone,
#mobile-nav,
.tinysite{
	display:none;
}
.phone-none{
	display:block;
}

/* Tablet & Phone */
@media only screen and (max-width: 1200px) {

.constrain{width:92%;}
#sidebar-right,
.forms .input-group,
.contact-left, 
.contact-right{
	width:100%;
	float: none;
}
.tablet-phone{
	display:block;
}	

#content{
	width:100%;
	padding:20px 0 0;
}

#main-content{
	width:92% !important;
	margin:0 auto;
	float:none !important;
}
.fullsite, input[type=file],
.content-cta{display:none !important;}
.smallsite {display:block !important;}	

#telephone a {
	pointer-events: auto;
}

#hamburger {
    float: right;
    color: #000;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 110px;
    margin-left: 40px;
}	
#hamburger i {
    font-size: 25px;
    vertical-align: middle;
    margin-left: 10px;
}
#hamburger.menu-close i:after{
	content:"\f128";
	font-size:22px;
	color:#a9a9a9;
}
#mobile-nav {
    width: 50%;
    left: auto;
    right: 0;
    top: 160px;
    z-index: 1000;
    display: none;
    background-color: #fff;
}
.mm-panels>.mm-panel{
	padding:20px;
}
.mm-panels>.mm-panel>.mm-listview{
	margin: 0;
}
.mm-listview>li:not(.mm-divider):after{
	border-color: #d8d8d8 !important;
}
.mm-listview .mm-next:before,
#mobile-nav .menu-rfq:after,
#mobile-nav .mmenu-close:after{
	border-color: transparent !important;
}
.mm-listview>li>a{
    font-family: 'Roboto Condensed', sans-serif;	
}
.mm-listview>li {
	font-weight:700;
	text-transform: uppercase;
}
#mobile-nav .menu-rfq a {
    color: #fff !important;
    margin-left: -115px;
    left: 50%;
    position: relative;
}
#mobile-nav .menu-rfq {
	padding:20px 0;
}

#mobile-nav .mmenu-close {
    cursor: pointer;
}
#mobile-nav .mmenu-close i{
	color:#757575 !important;
	display: block;
	text-align: center;
	font-size:22px;
}
#home-banner .banner-caption{
    margin: 0 auto;
    text-align: center;
    width: 80%;	
}
#page-index #main-content{
	width:100%;
}
.sec-buckets-container,
.cta-container{
	width:100%;
}
#sidebar-left {
    width: 60% !important;
    position: relative;
    margin: 0 20px 40px;
    float: none;
    padding: 15px 0;
    border-bottom: 1px solid #d8d8d8;
}
#secondary-nav {
    padding: 0;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 99;
    left: 0;
    display: none;
    top: 54px;
}
#sidebar-left h3 a {
    padding: 20px 0;
    display: initial;
    font-size: 20px;
}
#sidebar-left h3:after {
    content: "\f3d0";
    position: absolute;
    font-family: "Ionicons";
    right: 15px;
    font-size: 20px;
    top: 17px;
}
#sidebar-left h3.sidebar-open:after {
    content: "\f126";
}
#secondary-nav > li > a{
    padding: 10px 0;	
}
#secondary-nav > li > ul:before{
	right:16px;
}
#secondary-nav > li > ul li a{
	padding:8px 30px;
}
#secondary-nav > li > ul > li > ul > li > a{
	padding:8px 45px;
}
.google-map iframe,
#contact{
	border-top:none;
	padding:0;
	margin:30px 0;
}
.get-dir{
	margin:0 0 20px -115px;
	left:50%;
	position: relative;
}
.contact-left {
	margin-top:50px;
	padding-top:50px;
    border-top: solid 1px #979797;
}
#quickContact{
	margin-bottom:0;
}

}


/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

#global-nav{
	float:left;
}	
.hero-btns{
	width:500px;
	margin:0 auto;
}	
#home-buckets {
    width: 630px;
}
#home-buckets .fauxlink:nth-child(7),
#home-buckets .fauxlink:nth-child(8),
#home-buckets .fauxlink:nth-child(9),
#home-buckets .fauxlink:nth-child(10){
	display:none;
}
#sec-buckets{
	padding:40px;
}

#sec-buckets .fauxlink{
	width:100%;
	height:230px;
	float:none;
	margin:20px 0;
	position:relative;
}
#sec-buckets .fauxlink img{
	height:100%;
}
#sec-buckets .bkt-caption{
    width: 50%;
    position: absolute;
    background: #fff;
    top: 0;
    right: 0;
    height: 100%;	
}
#sec-buckets .bkt-caption h3{
	margin:0 0 10px;
}
.footer-right {
    float: none;
    clear: both;
    text-align: center;
}
.footer-right a{
	margin:0 10px;
}
#quickContact{
	border:none;
	padding:30px 40px 50px;
}
#quickContact .input-group:nth-child(odd){
	width:48%;
	float:left;
}
#quickContact .input-group:nth-child(even){
	width:48%;
	float:right;
}
.forms .submit{
	width:190px;
	margin-left:-95px;
	left:50%;
	position: relative;
}
#sidebar-right{
	text-align: center;
}
#sidebar-right .rfq-btn{
    display: inline-block;	
}
#sidebar-right .linecard-btn {
    display: inline-block;
    margin: 0 0 0 15px;
}
}


/* Phone (landscape & portrait) ----------- */
@media only screen and (max-width : 767px) {
    
#main-content .rfq-btn,#main-content .linecard-btn  {
    width: 100% !important;
    margin-bottom: 20px !important;
}

.tinysite{
	display:block;
}
#bread-social,
.phone-none,
#home-banner p,
#home-buckets .fauxlink,
.hex{
	display:none;
}	
#main-content{width:90% !important;}
#telephone{
	float:left;
}
.tablet-search {
    position: absolute;
    float: none;
    right: 0;
    top: -46px;
}
#search-onclick-btn {
    color: #fff;
    font-size: 23px;
    padding: 7px;
    text-align: center;
}
#search-onclick-btn.search-open .fa:before{
    content: "\f00d";	
}
.toggle-container {
    position: absolute;
    z-index: 999;
    border: 1px solid #fff;
    display: none;
    right: 0;
}
.search-form{
    float: none;
    border: none;	
    margin:0;
}
#mobile-nav,
#home-buckets{
	width:100%;
}
#home-banner, #home-banner .slides li{
	height:380px;
}
#home-banner .banner-caption{
    width: 100%;
    padding: 20px 0;	
}
.hero-btns a{
	float:none;
	margin:0 auto 10px;
}
#home-buckets .view-all {
    color: #fff;
    background: #0d5025;
    width: 80%;
    margin: 30px auto;
    padding: 10px 0;
    font-size: 18px;
}
#sec-buckets{
	padding:40px 0;
}
#sec-buckets .fauxlink {
	width:80%;
    float: none;
    height: 370px;
    margin: 0 auto 30px;
    position:relative;
}
#sec-buckets .fauxlink img{
	width:100%;
}
#sec-buckets .bkt-caption {
    height: 230px;
    padding: 20px 20px 0;
    position: absolute;
    bottom: 0;
    background: #fff;
}
#sec-buckets .bkt-caption h3{
	margin:0 0 10px;
}
#sec-buckets .bkt-caption p{
	font-size:16px;
}
.footer-left,
.footer-right,
.footer-left #footer-logo, 
.footer-left .address, 
.footer-left .phone, 
#copyright, 
#footer-bottom a{
	float:none;
}
#footer-logo{
	margin-left: -78px;
    left: 50%;
    position: relative;
}
.footer-left i{
	position:relative;
	left:auto;
	top:auto;
	display:block;
	text-align: center;
}
.footer-left .address,
.footer-left .phone,
#footer-bottom #copyright{
	text-align: center;
	padding:0;
}
#footer-bottom a{
	display:block;
	text-align: center;
	margin: 0 10px !important;
}
.social-links{
    width: 114px;
    margin-left: -57px;
    left: 50%;
    position: relative;
}
.social-links a{
	float:left !important;
}
#back-top {
    float: none;
    margin: 20px 0 20px -20px;
    left: 50%;
    position: relative;
}
#internal-buckets .fauxlink{
    margin: 0;
    float: none;
    width: 100%;	
}
.fauxlink h4{
    font-size: 18px;
    text-align: left;
    margin: 0;
    border-bottom: 1px solid #cfcfcf;	
    position:relative;
}
.fauxlink h4 a{
    width: 100%;
    display: block;
    padding: 15px 0;
}
.fauxlink h4:after {
    content: "\f3d0";
    font-family: "Ionicons";
    color:#757576;
    position: absolute;
    right: 5px;
    top: 14px;
    font-size: 20px;
}
#sidebar-right .rfq-btn,
#sidebar-right .linecard-btn{
	width:90%;
    display: block;
    margin:10px auto;
}

#landing-banner h1{
	font-size:36px;
}
#sidebar-left{
	width:90% !important;
}
.call-btn,
.get-dir{
	width:100%;
}
.call-btn{
	margin:20px 0 0;
}
.get-dir{
	margin: 0;
	left:auto;
}
#contact .input-group, 
#rfq .input-group{
	width:100% !important;
	float:none;
}
table td{
	font-size:12px;	
}
table .sticky-head{
	font-size:11px;
}
#main-content .two_columns {
    width: 100%;
    float: none;
    padding-right: 0;
}
}