/************************************************/
/*                                              */
/*   BERRY'S SAWMILL INC.                       */
/*   Built by WebSight Design, Inc.             */
/*                                              */
/************************************************/

/* Fonts
.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}
.roboto-condensed-<uniquifier> {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400, 700;;
  font-style: normal, italic;
}
*/


/******** BROWSER CSS RESET *************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	/*** Include Padding/Borders in width for all elements ***/
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
footer, header, nav { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* Responsive images & embedded objects (remove for image cropping) */
img, object, embed { max-width: 100%; }

/****** GLOBAL ELEMENT CSS ******/
html * { max-height: 999999px; } /* Android mobile font sizing fix */

body {
	font-size: 18px; font-family: "Roboto", sans-serif; font-weight:400; color:#000; line-height: normal;
	background: #fff;
	-webkit-text-size-adjust: none;
}

#page { width:100%; min-width:350px; max-width:1920px; margin:0 auto; }

h1, h2, h3, h4, h5, h6, p { padding: 0px 0px 20px; }
p { line-height:140%; }

a, a:visited { color:#13392c; text-decoration:underline; }
a:hover { color:#728873; text-decoration:underline; }

img { height:auto; }
b, strong { font-weight:700; }
i, em { font-style:italic; }

.clear { clear: both; }
.clearfix::after { content:''; display:table; clear:both; }

.mob { display:block; }
.mob2 { display:inline; }
.dsk, .dsk2 { display:none; }

.container { width:100%; max-width:1400px; margin:0 auto; padding:0 15px; }


#header { width:100%; padding:15px 0 0 0; display:block; background:#13392c; position:relative; text-align:center; }
h1#logo { font-family: "DM Serif Display", serif; font-size:30px; color:#fff; width:auto; display:inline-block; vertical-align:middle; }

#mainmenu { background:#edb516; display:block; width:calc(100% + 30px); margin-left:-15px; padding:10px 0; }
#mainmenu ul { display:flex; width:100%; max-width:615px; list-style-type:none; align-items:center; justify-content:space-evenly; }
#mainmenu ul li { display:block; font-family: "Roboto Condensed", sans-serif; font-weight:700; font-size:16px; }
#mainmenu ul li:last-child { display:none; }
#mainmenu ul li a { color:#13392c; text-decoration:none; }
#mainmenu ul li a:hover { color:#fff; text-decoration:none; }


#content { }
#content h2 { font-family: "DM Serif Display", serif; color:#13392c; font-size:28px; line-height:120%; }
#content h3 { font-size:22px; }


div.title-bar { background:url('../images/title-bar2.png') 0 0 no-repeat; background-size:auto 48px; height:48px; padding:15px 0 0 0; margin:0 0 20px 0; }
h2.tbh2 { width:100%; max-width:1400px; margin:0 auto; padding:0 0 0 15px;
    font-size:18px !important; color:#13392c; font-family: "Roboto Condensed", sans-serif !important; font-weight:700;
}
    
#about, #products, #contact { margin:40px 0 20px 0; }

.about-img img { width:100%; display:block; }

div.products-list { background:url('../images/products-bg.jpg') 50% 50% no-repeat #13392c; background-size:cover; }
div.products-list ul { display:flex; flex-wrap:wrap; align-items:stretch; }
div.products-list ul li { width:50%; display:block; border-right:4px #fff solid; border-bottom:4px #fff solid; color:#fff; height:100px; }
div.products-list ul li div { display:flex; width:100%; height:100%; text-align:center; align-items:center; padding:20px; }
div.products-list ul li div p { display:block; width:100%; padding:0;
    font-size:20px; font-family: "Roboto Condensed", sans-serif; font-weight:700;
}

.contact-img { margin:0 0 20px 0; }
.contact-img iframe { width:100%; height:300px; display:block; }

#footer { width:100%; padding:30px 15px; display:block; background:#13392c; text-align:center; font-size:16px; color:#fff; }
#footer a { color:#fff; }

.fancybox-content { max-width:1000px; }


/***************************************************
	DESKTOP LAYOUT BREAKPOINTS
****************************************************/
@media(min-width: 800px) {
    
    body { font-size:20px;}
    
    .dsk { display:block; }
	.dsk2 { display:inline; }
	.mob, .mob2 { display:none; }
    
    #header { text-align:left; padding:30px 0 25px 0; }
    h1#logo { font-size:50px; padding:30px 0 25px 0; }
    
    img.featureImg { width:100%; display:block; }
    
    #mainmenu { position:absolute; top:40px; right:0; width:50%; padding:30px 0 30px 35px; border-radius:45px 0 0 45px; margin:0; }
    #mainmenu ul li, #mainmenu ul li:last-child { font-size:24px; display:block; }
    
    #content { }
    #content h2 { font-size:36px; }
    #content h3 { font-size:30px; }
    
    div.title-bar { background:url('../images/title-bar2.png') 50% 0 no-repeat; background-size:auto 59px; margin:0 0 50px 0; height:59px; }
    h2.tbh2 {font-size:24px !important; }
    
    #about { margin:100px 0 30px 0; }
    
    .about-content { display:flex; align-items:flex-start; }
    .about-text { width:34%; display:block; padding:0 5% 0 0; }
    .about-img { width:66%; display:block; }
    
    
    #products { margin:100px 0 30px 0; }
    
    div.products-list { background:url('../images/products-bg.jpg') 50% 50% no-repeat #13392c; background-size:cover; }
    div.products-list ul { display:flex; flex-wrap:wrap; align-items:stretch; }
    div.products-list ul li { width:16.666%; display:block; border-right:4px #fff solid; border-bottom:4px #fff solid; color:#fff; height:150px; }
    div.products-list ul li div { display:flex; width:100%; height:100%; text-align:center; align-items:center; padding:20px; }
    div.products-list ul li div p { display:block; width:100%; padding:0;
        font-size:24px; font-family: "Roboto Condensed", sans-serif; font-weight:700;
    }
    
    #contact { margin:100px 0 30px 0; }
    
    .contact-content { display:flex; align-items:flex-start; }
    .contact-text { width:34%; display:block; padding:0 0 0 5%; }
    .contact-img { width:66%; display:block; margin:0; }
    .contact-img iframe { width:100%; height:450px; display:block; }
    
    div.half { width:50%; float:left; }
    
    #footer { padding:50px 15px; margin-top:100px; }

}
/** end desktop breakpoint **/



@media (min-width:1400px) { 

    .container { padding:0; }
    h2.tbh2 { padding:0; }

}



/*** Skip to Content invisible link for accessibility ***/
#skip a
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
/* uncommenting will make the link visible when focused
#skip a:focus
{
position:static;
float:left;
width:auto;
height:auto;
}
*/