/*
Theme Name: 	Starkers
Theme URI: 		http://viewportindustries.com/products/starkers
Description: 	The totally nude Wordpress theme!
Version: 		4.0
Author: 		Elliot Jay Stocks & Keir Whitaker
Author URI: 	http://viewportindustries.com
Tags: 			starkers, naked, clean, basic
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";
@import "fonts/stylesheet.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
html {
	overflow-x: hidden;
}


.home-top {
	background: url("images/bg_top.jpg") top center no-repeat;
	height: 52.39vw;
	border-bottom-style: solid;
	border-bottom-width: 8px;
	border-image: linear-gradient(90deg, #000000,#0000FF);
}
#inside .home-top {
	display: none;
}
.extra-padding {
	padding: 0 83px;
}
.header-logo {
	background: url("images/logo_header.png") top center no-repeat;
	width: 22.08333vw;
	height: 10.521vw;
	background-size: contain;
	display: inline-block;
	text-indent: -9899px;
	position: relative;
	z-index: 5;
	left: -2.4vw;
}
.menu-header ul {
	display: flex;
	justify-content: space-between;
}
.menu-header li {
	font-size: 1.25vw;
	line-height: 2.343vw;
	font-family: 'gothambold', sans-serif;
}
.menu-header ul ul li, li.ubermenu-item-level-1 {
	font-size: 0.875vw !important;
	line-height: 0.875vw !important;
	font-family: 'gothambold', sans-serif;
}
.menu-header li a {
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
}
.menu-header li a:hover {
	color: white;
	text-decoration: none;
}
.home-move-up {
	position: relative;
	z-index: 2;
	top: -7.35vw;
}
.hero img {
	box-shadow: 0 0 10px #000000;
}
.ubermenu-skin-grey-white {
	background: transparent !important;
}
.desktop-card {
	position: relative;
}
.inside-content .card.desktop-card p.specifications {
	position: absolute;
	bottom: 0; 
	right: 15px;
	margin-bottom: 0;
}

.category-menu-box {
	background: rgba(255,255,255,0.8);
	margin: 0 !important;
	padding: 0 !important;
}
.category-menu-box ul {
	padding: 0;
}
#menu-category-menu > li.menu-item-object-category, #menu-category-menu > li.menu-item-object-custom {
	border-bottom: solid 1px #000000;
	padding: 0.3vw 0;
}
#menu-category-menu  a[href="#"] {
	cursor: default!important;
}
.category-menu-box > ul {
	margin-bottom: 0 !important;
}
.category-menu-box > ul > li {
	font-family: 'gothambold', sans-serif;
}
.category-menu-box ul ul {
}
ul#menu-category-menu {
	margin-bottom: 0 !important;
}
#menu-category-menu > li {
	font-size: 1.25vw;
	text-transform: uppercase;
	font-family: 'gothambold', sans-serif;
	font-weight: bold;
}
#menu-category-menu a {
	color: #2e3192;
	text-decoration: none;
}
#menu-category-menu ul li {
	display: inline-block;
	font-size: 0.833vw !important;
	line-height: 0.8333vw;
	font-family: 'gothambold', sans-serif;
	padding: 0 0.833vw;
}
#menu-category-menu ul li:first-child {
	/* border-right: solid 1px #2e3192; */
}
#menu-category-menu ul li:last-child {
	/* border-right: solid 1px #2e3192; */
	margin-left: 0;
	padding-left: 0;
}
#menu-category-menu ul.sub-menu {
	margin-top: -0.521vw;
}
#menu-category-menu ul.sub-menu li:first-child:after {
	margin: 0 20px;
}
.home-page-content p {
	font: 1.40625vw/140% Bitter, Georgia, sans-serif;
	color: white;
	text-shadow: #000000 0 0 5px, #000000 0 0 5px, #000000 0 0 5px, #000000 0 0 5px;
}

.featured-section {
	background: url("images/bg_middle.jpg") top center no-repeat;
	height: 30.15625vw;
	background-size: cover;
}
.border {
	background: url("images/border.jpg") top center no-repeat;
	background-size: cover;
	height: 7px;
}
.featured-section h2, .inside-content h2 {
	font-size: 1.5625vw;
	font-family: 'gothambold', sans-serif;
}
.featured-section h3 {
	font-size: 1.25vw;
	font-family: 'gothambook', sans-serif;
}
.card h5 {
	font-size: 1.125vw;
	font-family: 'gothambold', sans-serif;
}
.inside-content a, .featured-section a {
	color: black;
	text-decoration: none;
	font-weight: bold;
}
.inside-content a:hover, .featured-section a:hover {
	text-decoration: underline;
	color: black;
}
.inside-content .card p {
	font-size: 0.875vw;
}
.shadow-photo, #product-description-2 img {
	border: solid 1px #888888;
	box-shadow: 0 0 5px #888888;
}
.ubermenu-submenu {
	width: auto !important;
}
.ubermenu-submenu .ubermenu-target {
	padding: 5px 10px !important;
}

.footer-top {
	background: url("images/bg_bottom.jpg") top center no-repeat;
	height: auto;
	background-size: cover;
}
.footer-bottom {
	background: #2e3192;
}
.footer-contact h3 {
	font-size: 1.5625vw;
	font-weight: bold;
	font-family: 'gothamlight', sans-serif;
}
.footer-contact label {
	position: absolute;
	left: -9999px;
}
.footer-contact input[type="submit"] {
	font-size: 1.25vw;
	font-weight: bold;
	font-family: 'gothambold', sans-serif;
	background: transparent;
	border: none;
	text-transform: uppercase;
}

.not-phone {
	font-size: 1.25vw;
	font-family: 'gothambook', sans-serif;
	line-height: 1.25vw;
	font-weight: bold;
}
.phone {
	font-size: 1.5625vw;
	font-family: 'gothambold', sans-serif;
	font-weight: bold;
}
.hours p {
	font-size: 1.25vw;
	font-family: 'gothambook', sans-serif;
	font-weight: bold;
}

.menu-footer li {
	font-size: 1.25vw;
	font-family: 'gothambold', sans-serif;
	text-transform: uppercase;
}
.menu-footer ul {
	display: flex;
	justify-content: space-between;
}
.menu-footer li a {
	color: white;
	text-decoration: none;
}
.menu-footer li a:hover {
	color: white;
	text-decoration: none;
}
.copyright p {
	margin-top: -3.125vw;
}
.copyright p {
	color: white;
	text-transform: uppercase;
	font-family: 'gothambook', sans-serif;
}
.copyright a {
	color: white;
	text-decoration: none;
}
.copyright a:hover {
	color: white;
	text-decoration: none;
}

.inside-header {
	background: #000000;
}
.inside-header .address {
	color: white;
}
.inside-content {
	border-bottom: solid 1px #888888;
	padding-bottom: 50px;
}
.inside-content h1 {
	font-family: 'gothambold', sans-serif;
	font-size: 2vw;
	text-transform: uppercase;
}
.inside-content h3 {
	font-family: 'gothambold', sans-serif;
	font-size: 1.25vw;
	text-decoration: underline;
}

.inside-content p {
	font-family: 'bitter', sans-serif;
	font-size: 1vw;
	margin-bottom: 1vw;
}


/* Top Level Items */
#megaMenu ul.megaMenu > li.menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {
	background: transparent !important; 
}

@media screen and (min-width: 1280px) and (max-width: 1440px) {
	.footer-top {
		height: auto;
	}
	
	.card h5 {
		font-size: 1.5vw;
	}
	.inside-content .card p {
		font-size: 1.125vw;
	}
}

@media screen and (max-width: 991px) {
	
	.home-top, .footer-top, .footer-bottom {
		height: auto;
	}
	
	.header-logo {
		width: 300px;
		height: 143px;
		left: 0;
		display: block;
		margin: 10px auto;
	}
	.extra-padding {
		padding: 0 20px;
	}
	.home-move-up {
		top: 0;
	}
	.home-page-content p {
		font-size: 1.3em;
	}
	.featured-section {
		height: auto;
	}
	.featured-section h2, .inside-content h2 {
		font-size: 1.75em;
		text-align: center;
	}
	.featured-section h3, .footer-contact h3 {
		font-size: 1.5em;
	}
	.footer-contact input[type="submit"] {
		font-size: 2em;
		text-shadow: #FFFFFF 0 0 5px, #FFFFFF 0 0 5px, #FFFFFF 0 0 5px;
	}
	.not-phone {
		font-size: 1.25em;
		line-height: 1.25em;
		font-weight: bold;
	}
	.phone {
		font-size: 1.5em;
	}
	.hours p {
		font-size: 1.25em;
	}
	.copyright p {
		font-size: 1em;
		margin-top: 20px;
	}
	footer p.address, header p.address, .inside-header {
		text-align: center;
	}
	footer p.address {
		padding-top: 20px;
	}
	.hours p {
		text-align: center;
	}
	#wprmenu_bar .menu_title a {
		display: inline-block;
		position: relative;
		top: 0;
		font-size: 36px;
		color: white;
		text-decoration: none;
	}
	.inside-header .address {
		text-align: center !important;
	}
	.inside-content {
		padding-bottom: 20px;
	}
	.inside-content h1 {
		font-size: 2em;
	}
	.inside-content p, .inside-content .card p {
		font-size: 1.2em;
		margin-bottom: 1.2em;
	}
	.card h5 {
		font-size: 1.5em;
		margin-bottom: 15px;
	}
}