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

	Responsive Design for Battery Wholesale Inc.
	Created by: Bobbie Jo
	February 2018/************************************************** 

	Responsive Design for Battery Wholesale Inc.
	Created by: Bobbie Jo
	February 2018
	Version 1.0
	
**************************************************/

/*=================================================
1200px and beyond
==================================================*/
/*Large Desktop */
@media (max-width: 1200px) {
	
}

/*=================================================
1180px 
==================================================*/
/*Medium Desktop */
@media (max-width: 1180px) {
	#main-content { width: 100%; }
	.column-content { width: 100%; }
	.product { width: 100%; } 
	
	.storeImg {  }
	.battery-boxes { width: 60%; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: auto auto; }
	.column-index { display: inline-block; horizontal-align: center; vertical-align: top; margin: 0;   }
	.diamond-shape { }
	.item-count {  }
	.column-spec { display: block; }
	.specImage { width: 100%; }
	.specImage img { display: block; margin-left: auto; margin-right: auto; text-align: center; }
	.locationPage { grid-template-columns: 65% 35%; }
}

/*=================================================
900px
==================================================*/
/*Narrow Desktop */
@media (max-width: 900px) {
	/*********** Navigation *********/
	.mainNav { float: none; width: 100%; margin-top: 0; text-align: right; }
	.mainNav ul { border-radius: 0; }
	.nav { margin-top: -20px; }
	
	/********** Content ***********/
	.floatRight { float: none; margin-left: 0; margin-right: 0; }
	.store { border-right: none; }
	.abc li { display: block; width: 100%; }
	#contactFormWrapper { display: block; width: 100%; }
	.locationPage { display: block; }
}

/*=================================================
770px
==================================================*/
/* Landscape phone to portrait tablet */
@media (max-width: 770px) {
	.mainNav ul { display: none; }
	.nav { display: none; }	
	.specialNav {
		display: block;
		background: #333;
		width: 100%;
		color: #FFF;
		padding: 5px 0 5px 40px;
	}
	.fa-bar { cursor: pointer; }
	.phone iframe { top: 60px; right: 20px; }

	/* The side navigation menu */
	.sidenav {
		height: 100%; /* 100% Full-height */
		width: 0; /* 0 width - change this with JavaScript */
		position: fixed; /* Stay in place */
		z-index: 1; /* Stay on top */
		top: 0;
		left: 0;
		background-color: #111; /* Black*/
		overflow-x: hidden; /* Disable horizontal scroll */
		padding-top: 60px; /* Place content 60px from the top */
		transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	}

	/* The navigation menu links */
	.sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 1.2em;
		color: #818181;
		display: block;
		transition: 0.3s;
		border-bottom: 1px solid #888888;
	}

	.sidenav a:last-child { border-bottom: none; }

	/* When you mouse over the navigation links, change their color */
	.sidenav a:hover{
		color: #f1f1f1;
	}

	/* Position and style the close button (top right corner) */
	.sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
		border-bottom: none;
	}
	
	.battery-boxes { width: 80%; margin-left: auto; margin-right: auto; }
	.column-index { justify-content: space-evenly;  }
	.contentBlock { display: block; }
	.contentGrid { margin-left: auto; margin-right: auto;  }
	.contentGrid img { margin-left: auto; margin-right: auto; }
	.location img { margin-left: auto; margin-right: auto; }
	.location { display: block; margin-left: auto; margin-right: auto; text-align: center; }
	.locationStore { margin-left: auto; margin-right: auto; text-align: center; } 
	.goback { margin: 0px; padding: 8px; }
}
/*=================================================
760px
==================================================*/
@media screen and (max-width: 760px) {
		
.store { display: block; width: 100%; text-align: center; padding: 10px 0; border-bottom: 1px inset #444; }
.noborder { border-bottom: none; }

  .productTable, .crownTable {
    border: 0;
  }
  
  .productTable th, .crownTable th { display: none; }
  
  .addColor { background: #0F3B5F; color: #FFFFFF;  }
  
  .productTable tr, .crownTable tr {
    border-bottom: 1px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  .productTable td, .crownTable td {
    border: 1px solid #ddd;
    display: block;
    text-align: right;
	padding: 10px;
  }
  .productTable td:before, .crownTable td:before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  .productTable td:last-child, .crownTable td:last-child {
    border-bottom: 0;
  }
  
  .trojanTable { border: 0; }
	.trojanTable th { display: none; }
    .addColor { background: #0F3B5F; color: #FFFFFF;  }
	.addColor2 { padding: 10px; background: #0F3B5F; color: #FFFFFF;  }
	.trojanTable tr { border: 0; display: block; margin-bottom: .625em; }
	.trojanTable td { border: 0; display: block; text-align: right; padding: 10px; }
	.trojanTable td:before {
		/*
		* aria-label has no advantage, it won't be read inside a table
		content: attr(aria-label);
		*/
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}
  .trojanTable td:last-child {
    border-bottom: 0;
  }
    
  .location { display: inline; width: 100%; margin: 10px; padding: 10px; } 
}
/*=================================================
640px
==================================================*/
/* Landscape phones and down */
@media (max-width: 640px) {
	
	.column-content img { width: 100%; }
	.battery-size, .select_style { width: 95%; }
	
}


/*=================================================
590px
==================================================*/
/* Landscape phones and down */
@media (max-width: 590px) {
	.column { display: inline;  }
	.diamond-shape { margin-left: auto; margin-right: auto; height: 200px; width: 200px; }
	.item-count { height: 200px; width: 200px; }
	.column-content img { width: 100%; }
}

/*=================================================
480px
==================================================*/
/* Portrait Phones */
@media (max-width: 480px) {
	.logo { margin-top: 40px; }
	.sidenav { padding-top: 15px;}
    .sidenav a {font-size: 18px;}
	.product img { width: 100%; }
	
	.battery-boxes { display: block; width: 100%; margin-left: auto; margin-right: auto; }
	.column-index { width: 100%; margin-top: 5px; margin-bottom: 5px; }
	.diamond-shape { transform: none;  }
	.item-count { transform: none; } 
}