/**
 * wallop.css
 *
 * @fileoverview Default styles for wallop – recommended
 *
 * @author Pedro Duarte
 * @author http://pedroduarte.me/wallop
 */

/*
  This is the top-level selector

  It should be relative positioned
  to allow the children to be positioned absolutely
  relative to this
 */
.Wallop {
	position: relative;
	float: left;
	width:100%;
}
/*
  This element groups all the items, but not the buttons

  It's a recommendation but it's very likely
  you'll want to hide any overflow from the items
  Especially when doing animations such as scale
 */
.Wallop-list {
	position: relative;
	overflow: hidden;
}
/*
  This is the item element

  By default, they are all hidden and
  positioned absolute
  I recommend always having .Wallop-item--current
  in your markup by default (probably on the first element)
 */
.Wallop-item {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
/*
  This is the current item element

  All we do here, is make it visible again reset
  the position to static. Could also be relative
 */
.Wallop-item--current {
	visibility: visible;
	position: relative;
}
#buttons {
	background: transparent none repeat scroll 0 0;
	border: medium none;
	color: white;
	position: absolute;
	top: 47%;
	transform: translateY(-50%);
	width: 16px;
	text-align: center;
	cursor: pointer;
	z-index: 9;
	height: 96px;
	padding: 0px;
}
.Wallop-buttonPrevious {
	left: 0;
}
.Wallop-buttonNext {
	right: 0;
}
.Wallop-item.Wallop-item--current > img {
	width: 100%;
	border: 3px solid #ebebeb;
}
.wallop-item-header {
	background: #555555 none repeat scroll 0 0;
	color: #fff;
	float: left;
	font-size: 16px;
	padding: 10px 15px;
	width: 100%;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
}
@media (max-width: 767px) {
.Wallop {
	float: none;
	margin: 0 auto;
	position: relative;
	width: 82%;
	
}
.Wallop.Wallop--1 #buttons, 
.Wallop.Wallop--2 #buttons, 
.Wallop.Wallop--3 #buttons, 
.Wallop.Wallop--4 #buttons, 
.Wallop.Wallop--5 #buttons, 
.Wallop.Wallop--6 #buttons,
.Wallop.Wallop--7 #buttons, 
.Wallop.Wallop--8 #buttons, 
.Wallop.Wallop--9 #buttons, 
.Wallop.Wallop--10 #buttons, 
.Wallop.Wallop--11 #buttons, 
.Wallop.Wallop--12 #buttons
.Wallop.Wallop--13 #buttons, 
.Wallop.Wallop--14 #buttons, 
.Wallop.Wallop--15 #buttons, 
.Wallop.Wallop--16 #buttons, 
.Wallop.Wallop--17 #buttons, 
.Wallop.Wallop--18 #buttons,
.Wallop.Wallop--19 #buttons, 
.Wallop.Wallop--20 #buttons, 
.Wallop.Wallop--21 #buttons, 
.Wallop.Wallop--22 #buttons, 
.Wallop.Wallop--23 #buttons, 
.Wallop.Wallop--24 #buttons,
.Wallop.Wallop--25 #buttons, 
.Wallop.Wallop--26 #buttons, 
.Wallop.Wallop--27 #buttons, 
.Wallop.Wallop--28 #buttons, 
.Wallop.Wallop--29 #buttons, 
.Wallop.Wallop--30 #buttons,
.Wallop.Wallop--31 #buttons, 
.Wallop.Wallop--32 #buttons, 
.Wallop.Wallop--33 #buttons, 
.Wallop.Wallop--34 #buttons, 
.Wallop.Wallop--35 #buttons, 
.Wallop.Wallop--36 #buttons,
.Wallop.Wallop--37 #buttons, 
.Wallop.Wallop--38 #buttons, 
.Wallop.Wallop--39 #buttons,
.Wallop.Wallop--40 #buttons
{
	top: 80px;
}


}
 @media (max-width: 767px) and (orientation:portrait) {
header.majorWarranty h2 {
	font-size: 1.8em;
}
.Wallop.Wallop--1 #buttons, 
.Wallop.Wallop--2 #buttons, 
.Wallop.Wallop--3 #buttons, 
.Wallop.Wallop--4 #buttons, 
.Wallop.Wallop--5 #buttons, 
.Wallop.Wallop--6 #buttons,
.Wallop.Wallop--7 #buttons, 
.Wallop.Wallop--8 #buttons, 
.Wallop.Wallop--9 #buttons, 
.Wallop.Wallop--10 #buttons, 
.Wallop.Wallop--11 #buttons, 
.Wallop.Wallop--12 #buttons
.Wallop.Wallop--13 #buttons, 
.Wallop.Wallop--14 #buttons, 
.Wallop.Wallop--15 #buttons, 
.Wallop.Wallop--16 #buttons, 
.Wallop.Wallop--17 #buttons, 
.Wallop.Wallop--18 #buttons,
.Wallop.Wallop--19 #buttons, 
.Wallop.Wallop--20 #buttons, 
.Wallop.Wallop--21 #buttons, 
.Wallop.Wallop--22 #buttons, 
.Wallop.Wallop--23 #buttons, 
.Wallop.Wallop--24 #buttons,
.Wallop.Wallop--25 #buttons, 
.Wallop.Wallop--26 #buttons, 
.Wallop.Wallop--27 #buttons, 
.Wallop.Wallop--28 #buttons, 
.Wallop.Wallop--29 #buttons, 
.Wallop.Wallop--30 #buttons,
.Wallop.Wallop--31 #buttons, 
.Wallop.Wallop--32 #buttons, 
.Wallop.Wallop--33 #buttons, 
.Wallop.Wallop--34 #buttons, 
.Wallop.Wallop--35 #buttons, 
.Wallop.Wallop--36 #buttons,
.Wallop.Wallop--37 #buttons, 
.Wallop.Wallop--38 #buttons, 
.Wallop.Wallop--39 #buttons,
.Wallop.Wallop--40 #buttons 
{
	top: 80px;
}
}