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


/*** 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:110px;
height:110px;
background:transparent;
position: absolute;
top:0;
left:0;
}

/***Header Styles ***/

#Header,
#Header .Liner {
box-sizing: border-box;
position:relative;
padding-bottom:0;
border-bottom: 3px solid #ededed;
width:100%;
max-width: 100%;
padding-top:60px;
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:fixed;
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: #fff;
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) {


#Header, 
#Header .Liner {
padding-top:0;
}

#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;
}

.ResponsiveNavReady .ResponsiveNavButton > span,
.ResponsiveNavActive .ResponsiveNavButton > span {
}

} 
/* closing brace for mobiles media query */


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


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

} 
/* closing brace for mobiles media query */


@media screen and (max-width: 360px) {
#Header,
#Header .Liner {
background-size: 75px 75px !important;
}
}
/*******************
THIS IS FOR THE BLOCKBUILDER SO THAT YOU SEE A HEADER WITH YOUR NEW HEIGHT
*******************/
.SS_BB2 #PageWrapper #Header .Liner{
padding-bottom:0;
}


