/*****************************
CSS for Customized DOG DAYS template. V1.1
*****************************/


#navbar {
width:100%;
height:auto;
background:transparent;
}

.sticky {
position:fixed;
top:0;
width:100%;
}

.sticky + .buffer {
padding-top: 50px;
}

/*** Set PageWrapper to full width, rather than 1600px This will allow us to make header and footer backgrounds full monitor width ***/

#PageWrapper, 
#Header {
width:100%;
max-width:100%;
padding: 0;
margin: 0;
}

.logo {
width:100px;
height:100px;
background:transparent;
position: absolute;
top:0;
left:0;
}

/***Header Styles ***/


#Header, 
#Header .Liner {
box-sizing: border-box;
position:relative;
padding-bottom:0;
width:100%;
max-width: 100%;
background-size: 100px 100px !important;
}


#Header .WebsiteName,
#Header .Tagline {
padding: 15px 0;
margin-top:0;
width:100%;
max-width:100%;
text-align:center;
pointer-events: none;
}


#Header .HorizontalNavBar {
position:relative;
width:100%;
max-width:100%;
margin:0 auto;
opacity: 1;
left:0;
}

.ResponsiveNavWrapper{
background:transparent;
width:100%;
max-width:100%;
height:auto;
margin-bottom: 0;
left:0;
}

.ResponsiveNavWrapper::after{
content: "";
display: table;
clear:both;
}


/***Target ColumnsWrapper, to set width,center, and stretch 

full height to enclose the columns  ***/

#ColumnsWrapper {
box-sizing: border-box;
border:1px solid #ccc;
background: white;
width:1200px;
max-width: 100%;
margin: 20px auto;
padding:10px 25px;
position:relative;
}

#ColumnsWrapper::after {
content: "";
display: table;
clear:both;
}

#ContentWrapper {
box-sizing: border-box;
position:relative;
}

#ContentColumn {
box-sizing: border-box;
width: calc(100% - 340px);
}

#NavColumn,
#NavColumn .Liner {
box-sizing: border-box;
width: 340px;
}


/**************************
ALL MEDIA QUERY BREAKPOINTS BELOW
**************************/

@media only screen and (min-width: 1366px) {
#Header .Liner {
background-position: calc(50% - 550px) 0% !important;
}

.logo {
left: calc(50% - 600px)!important;
}
}


/*Increase the px value here, to make the header taller on 

screens wider than 980px*/

@media only screen and (min-width: 980px) {
#Header .Tagline {
margin-bottom:0;
}
} 
/* end of 980px and larger breakpoint */




@media only screen and (max-width: 979px) {



.modern #Header .WebsiteName,
.modern #Header .Tagline {
width: 100%;
position:relative;
right:4%;
}

#PageWrapper #ContentColumn .Liner {
padding:0;
}

#ContentColumn,
#NavColumn,
#NavColumn .Liner {
display:block;
float:none;
width:100% !important;
margin:0;
padding:0;
}

#ColumnsWrapper {
width:100%;
max-width:100%;
}


}

@media screen and (max-width: 768px) {

.buffer{display:none;}

#Header, 
#Header .Liner {
padding-top:0;
border-bottom: 3px solid #ebebeb;
}

#PageWrapper #Header .WebsiteName,
#PageWrapper #Header .Tagline {
width:100%;
position:relative;
right: 4%
text-align:right;
}

.ResponsiveNavReady .ResponsiveNavButton {
margin: 0 4% -1px auto;
border-radius: 4px 4px 0 0;
}

.ResponsiveNavActive .ResponsiveNavButton {
border-radius: 4px !important;
}

} 
/* closing brace for mobiles media query */


@media screen and (max-width: 767px) {


#Header .HorizontalNavBar,
.sticky {
position:relative;
}

} 
/* closing brace for mobiles media query */
/*******************
THIS IS FOR THE BLOCKBUILDER SO THAT YOU SEE A 

HEADER WITH YOUR NEW HEIGHT
*******************/
.SS_BB2 #PageWrapper #Header .Liner{
padding-bottom:0;
}


