@viewport {width:device-width;}
body {
	width: 1000px;
    height:100vh;
	margin:0 auto;
	font-family:helvetica;
	font-family: 'Open Sans', sans-serif;
}
h1{
	margin:0 0 30px 0;
    height: 50px;
    line-height: 50px;
    background:black;
    color:white;
    display:inline-block;
    padding:0 0 0 20px;
    width:800px;
    border-radius:50px 0 0 50px;
    font-size:23px;
}
/*
img{
    height: 32px;
    width: 32px;
    margin: -40px 0 0 105px;
    position:relative;
    float:right;
    margin-top:-40px;
    margin-left:105px;
    z-index: 1111;
    background: white;
    border-radius: 50%;
    padding: 4px;
}
*/
section {
    min-height:600px;
    box-sizing:border-box;
    width:1000px;
    position:relative;
    border:1pt solid transparent;
    left:0;
    right:0;
    margin:70px auto;
}
div {
    box-sizing:border-box;
    padding:0;
    margin: 0;
    width:95%;
    margin:0 auto;
    min-height:600px;
    border:1pt solid transparent;;
    display:block;
}
a{text-decoration: none;}
a,
a:visited {
	text-decoration: none;
    color:#009ae8;
}
form {
    position:absolute;
    right:0;
    width: 300px;
    background: black;
    box-sizing:border-box;
    padding: 0 38px 0 0;
    text-align: center;
    margin:0;
    float:right;
    border-radius: 50px;
    padding:5px;
    display: inline-block;
}
form span {
    height: 29px;
    width: 29px;
    margin: -42px 0px 0 90px;
    position:relative;
    float:right;
    margin-top:-40px;
    margin-left:105px;
    z-index: 1111;
    border-radius:0 20px 20px 0;
    padding:4px 4px 4px 20px;
    border:1px solid transparent;
    cursor:pointer;
    overflow:hidden;
    transition:all linear 0.75s;
    background:white;
}
form span:hover {
    height:80px;
    margin-bottom:-100%;
    border-radius:0 20px 0 0;
    padding-bottom:20px;
    transition:all linear 0.2s;
    height:80px;
    margin-bottom:-100%;
    border-radius:0px 20px 20px 20px;
    padding-bottom:5px;
    transition:all linear 0.2s;
    border:1px solid #ddd;
}
form span:before {
    content:'';
    height:4px;
    width:4px;
    border-bottom:2px solid black;
    border-right:2px solid black;
    position:absolute;
    left:6px;
    top:15px;
    transform:rotate(-45deg);
    transition:all linear 0.2s;

}
span:hover:before {
    transform:rotate(45deg);
    transition:all linear 0.2s;
}
span img {
    height:auto;
    width:29px;
    z-index: 2111;
    margin-bottom:15px;
}
span img#seagull {
    border-radius:0;
    padding:10px 4px;
    width:35px;
    margin:0 0 15px -8px;
    background:transparent;
    margin-top:-7px;
}
span img:hover {
}
/*
img#yamaha:before,
img#yamaha:after{
    content:'content';
    height:100px;
    width:100px;
    display:block;
}
*/
input[type="text"] {
    width:100%;
    padding: 15px;
    box-sizing: border-box;
    height: 40px;
    line-height:20px;
    margin: 0;
    border: none;
    text-align: center;
    background: #f9f9f9;
    text-shadow: 0 1px 0 white, 0 -1px 0 white;
    border-radius: 50px;
    overflow:hidden;
    font-size:12px;
    outline:none;
}
form a{
	box-sizing:border-box;
	display:inline-block;
	width:100%;
	margin:0;
	padding:15px;
	line-height:15px;
	background: white;
	text-align: left;
	border-top:1px solid #fff;
	border-right:1px solid #eee;
	border-bottom:1px solid #ddd;
	border-left:1px solid #eee;
	transition:all 0.75s;
}
form a:nth-child(even){
	background:#f2f2f2;
}
form a:hover{
	background:#eee;
	transition:all 0.2s;
}
ul {
	display: inline-block;
	height:20px;
	line-height:20px;
	margin-top:10px;
	font-size:10px;
	width:100px;
	float:left;
}
p {font-size:14px;line-height:22px;padding:20px;}
p span {width:100%;text-align:center;font-size:20px;line-height:20px;display:inline-block;font-weight:bold;}
li {
	box-sizing:border-box;
	display:inline-block;
	width:20%;
	margin:0;
	padding:0;
	background: white;
	transition:all 0.75s;
    height:auto;
    padding:20px;
    border:1pt solid transparent;
    cursor:pointer;
    display:inline-block;
    font-size:12px;
    line-height:20px;
    vertical-align: middle;
    vertical-align: -webkit-baseline-middle;
}
li:hover {
    border-radius:8px;
    background:#ddd;
    border:1px solid #ccc;
    background:#eee;
    transition:all 0.2s;
}
li:nth-child(even){
	background:#f2f2f2;
}
table {
	width:80%;
	display: none;
	transition:all 0.75s;
    margin:0 auto;
}
table.view {
	display:table;
	transition:all 0.75s;
}
th {
    text-transform:capitalize;
	font-size:20px;
	line-height:100px;
	height:80px;
	text-align:center;
    margin-bottom:30px;
}
td {
	line-height:15px;
	width:50%;
	box-sizing:border-box;
	width:50%;
	margin:0;
	padding:15px;
	line-height:15px;
	background: white;
	text-align: left;
    font-size:12px;
	border-bottom:1px solid #ddd;
	transition:all 0.75s;
}
tr:last-child td {
    border-bottom:none;
}
footer {
    font-size: 10px;
    color: #999;
    text-align: left;
    position: fixed;
    z-index:1;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 943px;
    height: 50px;
    line-height: 50px;
    background: rgba(255,255,255,0.9);
    padding: 0 20px;
    box-sizing: border-box;
}
section.overlay{
    z-index:1001;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    background:rgba(0,0,0,0.8) !important;
    display:none;
}
form span.overlay {
    display:block;
    background:white;
    z-index:9999 !important;
    height:80px;
    margin-bottom:-100%;
    border-radius:0px 20px 20px 20px;
    padding-bottom:5px;
    transition:all linear 0.2s;
}
form span.overlay:before {
    transform:rotate(45deg);
}
form span.overlay2 {
    overflow:visible;
    transition:all linear 0.75sa;
}
form span.overlay2:after {
    content:'Select Seagull Guitars →';
    color: #38bcff;
    display: inline-block;
    width: 200px;
    z-index: 9999;
    margin: -97px 0 0 -242px;
    text-shadow: 1px 0 0 black, -1px 0 0 black;
    position: absolute;
}

table img{
    max-width:400px;
    margin:0 auto 60px;;
    height:auto;
    display:block;
}
/*
@media screen and (min-width: 1360px) {

	html,
	body {
		width: 1360px;
		margin:0 auto;
	}
}

@media screen and (orientation:portrait) {
	html,body {height: auto;}
}
/*