/*
Theme Name: PepperBones
Description: A custom designed theme for Pepper & Bones
Author: Joey Cavella
*/

:focus { outline: 0;}
ol, ul, li { list-style:none; padding:0; margin:0}
a img { border: 0; }
h1,h2,h3,h4,h5,h6 { clear:both; font-weight:normal; margin-top:3px; }
p { margin:0px; margin-bottom: 1.4em;}
a { text-decoration: none; }
a:focus, a:active, a:hover { text-decoration: none; }
table { border-collapse:collapse; }
div { position:relative; }

html, body { margin:0; padding:0; }

body {
background-color:#111;
/*
font-family: 'Montserrat', sans-serif;
font-weight:400;
*/
font-family: 'Open Sans', sans-serif;
font-weight:400;
font-size:10px; 
letter-spacing:2px; 
line-height:2.2em;

-webkit-font-smoothing: antialiased;
}

a { color:#66afb8; }



/*/////////////////// MENU /////////////////// */

#menu-left-column { 
position:fixed; 
width:20%;
min-width:184px;
max-width:290px;
height:102%;
background-color:#111;
border-right: 1px solid #444;
text-align:center;
z-index:2;
/*background: url('images/black_leather.jpg');*/
}
.menu-main-container { 
margin-top:20px; 
padding-top:30px; 
padding-bottom:10px; 
/*background-color:#ddd;*/
/*border-top:1px solid #e9e9e9;*/ 
/*
border-top:1px solid #b9b9b9;
border-bottom:1px solid #b9b9b9;
*/
}

#menu-logo { margin-top:50%; }
#menu-logo img { width:190px; height:auto; }

#menu-line { border-top:1px solid #888; width:77%; margin-top:25px; margin-bottom:25px; margin-left:11%; }

.menu li { margin-bottom:24px; }
.menu li a { text-transform:uppercase; font-size:13px; font-family: 'Montserrat', sans-serif;}
.menu li a:hover { color:#888; }

#menu-address { margin-top:30px; }
#menu-address p { margin:0; text-transform:uppercase; color:#777; font-size:10px; letter-spacing:1px; font-weight:400; line-height:1em; margin-top:8px; }

#menu-bottom-image { margin-top:40px; }
#menu-bottom-image img { width:54px; height:auto; }

#social { margin-top:40px; }
#social a { color:#888; }
#social a:hover { color:#aaa; }
#social .fa { font-size:17px; }



/*/////////////////// MOBILE MENU /////////////////// */

#mobile-top { display:none; text-align:center; margin-bottom:20px; }

#mobile-top #menu-logo { margin-top:30px; }
#mobile-top #menu-logo img { width:190px; height:auto; }

.menu-main-menu-container { margin-top:10px; }
#mobile-top .menu li { display:inline-block; margin-right:20px; margin-bottom:6px; }
#mobile-top .menu li a { font-size:14px; }


/* MAIN */
#page { width:100%; }
#main {}



/*/////////////////// GRID /////////////////// */

.grid { margin:0; padding:0; padding-bottom:4px; margin-left:20%; width:81%; background-color:#111; }
.grid .grid-item { display:inline-block; width:32%; margin:4px 8px 4px 0; height:auto; overflow:hidden; background-color:#222; line-height:0.5em; cursor:pointer; }
.grid .grid-item .image img { width:100%; height:auto; }

.grid .grid-item .title { 
display:none;
position:absolute; background-color:#000; width:94%; height:10%; bottom:0px; z-index:1; 
padding:10px; font-size:11px; text-transform:uppercase; line-height:1em; text-align:center; }
.grid .grid-item .title span { width:90%; }
.grid .grid-item .title { color:#f5f5f5; }





/*/////////////////// PAGES /////////////////// */


#page-content { margin-left:20%; padding:30px; min-height:500px; background-color:#fff; }
.entry-content { width:90%; }

.about .entry-content { font-size:1.17em; }

.about .entry-title { margin-bottom:24px; text-transform:uppercase; }

.entry-content img { width:100%; height:auto; }





/*/////////////////// POPUPS /////////////////// */

body.single, #single-content { background-color:#fff; text-transform:uppercase; }


.vimeo {  }

/*
.vimeo {
	position: relative;
	padding-bottom: 56.25%; 
	padding-top: 25px;
	height: 0;
}
.vimeo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
*/



/*/////////////////// NEWS /////////////////// */

.blog .page-title { margin-bottom:30px; }

.blog .post { margin-bottom:50px; }
 







/*/////////////////// FOOTER /////////////////// */

#footer { background:#222; border-top:1px solid #aaa; }

.indent { margin-left:20%; }

#footer .content { padding:10px; left:20px; }
#footer .content { color:#888; text-transform:uppercase; }
#footer .content a { color:#aaa; }
#footer .content a:hover { color:#fff; }

.footer-column { text-align:center; width:100%; color:#aaa; }
.footer-column .fa { font-size:20px; }
.footer-column:nth-child(3) { float:right; margin-right:0; }
.copyright { font-size:10px; text-transform:uppercase; }





/*/////////////////// SCREEN SIZE ADJUSTMENTS /////////////////// */

@media (max-width:1038px) {
	.grid .grid-item { width:44%; }
}
@media (max-width:1000px) {
	#menu-logo img { width:130px; height:auto; }
}
@media (max-width:870px) {
	#page-content { padding-left:44px; }
}
@media (max-width:740px) {
	.grid .grid-item { display:block; width:100%; }
	#menu-left-column { display:none; }
	#mobile-top { display:block; }
	#page-content  { margin-left:0; width:95%; }
	.grid, #footer  { margin-left:0; width:100%; }
}
@media (max-width:644px) {
	.about #mobile-top, .blog #mobile-top { left:10%; }
	.grid .grid-item { display:block; width:100%; }
	#single-content p { font-size:8px; letter-spacing:1px; line-height:1.3em; }
	.vimeo iframe { width:100%; height:auto; }
	.entry-content { width:98%; }
}