@font-face {
    font-family: 'caviar_dreamsregular';
    src: url('fonts/caviardreams-webfont.eot');
    src: url('fonts/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/caviardreams-webfont.woff') format('woff'),
         url('fonts/caviardreams-webfont.ttf') format('truetype'),
         url('fonts/caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
Theme name: JwF
Description: Custom Theme
*/

/******* JwF WordPress CSS *******/

/* Common elements styling */
.post h1 { font-size: 30px; line-height: 36px; color: #414b55; margin-bottom: 30px; }
.post h2 { font-size: 28px; line-height: 32px; color: #414b55; margin-bottom: 20px;}
.post h3 { font-size: 26px; line-height: 30px; color: #414b55; }
.post h4 { font-size: 24px; line-height: 28px; color: #414b55; }
.post h5 { font-size: 22px; line-height: 26px; color: #414b55; }
.post h6 { font-size: 20px; line-height: 24px; color: #414b55; }

.post .entry ul { font-size: 20px; line-height: 24px; margin-left: 25px; color: #414b55; }
.post .entry ol { font-size: 20px; line-height: 24px; margin-left: 25px; color: #414b55; }
.post .entry a img { border: 0 }

p img { padding: 0;	max-width: 100%; }
img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright { margin: 2px 0 2px 7px; display: inline; }
img.alignleft { margin: 2px 7px 2px 0; display: inline; }
.alignright { float: right; display: inline; }
.alignleft { float: left; display: inline; }
.aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Calendar widget */
#wp-calendar { empty-cells: show; margin: 10px auto 0; }
#wp-calendar #next a { padding-right: 10px; text-align: right; }
#wp-calendar #prev a { padding-left: 10px; text-align: left; }
#wp-calendar a { display: block; }
#wp-calendar caption { text-align: center; width: 100%; }
#wp-calendar td { padding: 3px 0; text-align: center; }
.wp-caption { border: 1px solid #ddd; text-align: center; padding-top: 4px; margin: 10px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0;}

/* Big images in rich text editor should not break page layout */
.post .entry { overflow: hidden; } 

/******* /JwF WordPress CSS *******/

/* MAIN SITE CSS */

body, html { height: 100%; min-height: 100%; }
body { 
	background-color: #414B55; 
	font-family: 'caviar_dreamsregular';
	font-size: 20px;
	line-height: 24px; 
	color: #414b55; 
 }

#header { background: #fff; }
#logo { background: url(images/logo.png) no-repeat; float: left; height: 154px; width: 155px; margin: 0 0 0 100px; position: relative; z-index: 999; font-size: 0; line-height: 0; text-indent: -4000px; }
#logo a { display:block; width:155px; height:  154px;  }
#toptext {float: right; color: #414b55; line-height: 10px; padding: 20px 0 0 0; margin: 0 67px 0 0;}
#quotestext {font-size: 25px; line-height: 27px; }
#phonenumber {font-size: 31px; line-height: 34px; }
#email {font-size: 19px;}
#nav { padding-top: 16px; height: 91px; width: 983px; background: url(images/navbg.png) no-repeat; position: relative; float: left; z-index: 999;}
#nav ul { text-align:center;  }
#nav li { display: inline; color: #FFFFFF; padding: 20px 0 0 0; font-size: 20px;}
#nav li a { padding: 0 10px; color: #fff; text-decoration: none; }
#nav li a:hover { text-decoration: underline; }
#top_image { position: relative; margin: -30px 0 -5px 63px; top: -25px; float: left; height: 350px; width: 859px; overflow: hidden; }
#mid_background {background-color: #dedfa3; margin: -52px 0 0 0;}
#text_background {color: #FFFFFF; background-color: #fff; padding-bottom: 20px; }
.main_text {font-size: 20px; color: #414b55; padding: 25px 0;}
#signature {background:  url(images/signature.jpg); height: 89px; width: 250px; float: right;}
#footer_background {background-color: #414b55; font-family: "Times New Roman", Times, serif; color: #FFFFFF; font-size: 15px;}
#footer_text {padding: 10px 0; text-align: center;}

#stairs {background:  url(images/stairsbutton.jpg) no-repeat; width: 160px; height: 31px; color: #FFFFFF; position: relative; top: -25px; border: solid 7px #FFFFFF; font-size: 20px; padding: 127px 0 0 20px; float: left; margin: 0 0 0 42px; z-index: 10;}
#stairs a { color: #fff; }

#conservatories {background:  url(images/conservatoriesbutton.jpg) no-repeat; width: 160px; height: 31px; color: #FFFFFF; position: relative; top: -25px; border: solid 7px #FFFFFF; font-size: 20px; padding: 127px 0 0 20px;  float: left; margin: 0 0 0 42px; z-index: 10;}
#conservatories a { color: #fff; }

#kitchens {background: url(images/kitchensbutton.jpg) no-repeat; width: 160px; height: 31px; color: #FFFFFF; position: relative; top: -25px; border: solid 7px #FFFFFF; font-size: 20px; padding: 127px 0 0 20px;  float: left; margin: 0 0 0 42px; z-index: 10;}
#kitchens a { color: #fff; }

#bespoke {background: url(images/bespokejoinerybutton.jpg) no-repeat; width: 160px; height: 31px; color: #FFFFFF; position: relative; top: -25px; border: solid 7px #FFFFFF; font-size: 20px; padding: 127px 0 0 20px;  float: left; margin: 0 0 0 42px; z-index: 10;}
#bespoke a { color: #fff; }

form {width:600px; font-size:14px; text-align:left;}
fieldset {width:600px; font-size:14px;}
label {width:100px; color: #000; }
input {width:200px;}

.home-nav { position: relative; width: 100%; top: -25px; z-index: 10; }
.home-nav li { position: relative;  display: inline; float: left; width: 180px; height: 158px;  border: solid 7px #fff; margin-left: 42px; overflow: hidden; }
.home-nav li a { text-decoration: none; color :#fff; }
.home-nav li span { position: absolute; bottom: 10px; left: 20px; width: 160px; font-size: 20px; line-height: 22px; }

.post { padding: 20px 0 20px 57px; }
.post a { color: #414b55; }
.post p { font-size: 20px; line-height: 24px; color: #414b55; padding-bottom: 20px;}
.post ul { font-size: 20px; line-height: 24px; margin-left: 25px; color: #414b55; padding-bottom: 20px; }
.post ol { font-size: 20px; line-height: 24px; margin-left: 25px; color: #414b55; }

.commentlist { color: #414b55; font-size: 16px; line-height: 18px; }
.commentlist li { padding-bottom: 10px;  }
.commentlist li div { padding-bottom: 5px; }
.commentlist .children { padding: 10px 0 0 20px; }

#respond h3 { color: #414b55; font-size: 26px; line-height: 30px; }
#respond label { display:block; }
#respond p { padding-bottom: 20px; color: #414b55; }

.form-allowed-tags { display:none; }

.pagination { padding: 0 57px 20px; color: #414b55; font-size: 18px; line-height: 20px; }

#gallery-1 .gallery-item {
    text-align: left;
}

/* ------------------------------------------------------------ *\
    New CSS
\* ------------------------------------------------------------ */

/* ------------------------------------------------------------ *\
    Nav Trigger
\* ------------------------------------------------------------ */

.nav-trigger { position: relative; display: none; width: 40px; height: 40px; background: #414b55; }
.nav-trigger span { position: absolute; display: block; height: 3px; width: 20px; background: #fff; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s; left: 10px; }
.nav-trigger span:nth-child(1) { top: 12px; }
.nav-trigger span:nth-child(2) { top: 19px; }
.nav-trigger span:nth-child(3) { top: 26px; }

body.has-menu-opened .nav-trigger span { transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s; }
    
body.has-menu-opened .nav-trigger span:nth-child(3),
body.has-menu-opened .nav-trigger span:nth-child(1) { top: 19px;  background: #fff; }

body.has-menu-opened .nav-trigger span:nth-child(2) { opacity: 0; }
body.has-menu-opened .nav-trigger span:nth-child(1) { transform: rotate(45deg); }
body.has-menu-opened .nav-trigger span:nth-child(3) { transform: rotate(-45deg); }

/* ------------------------------------------------------------ *\
    Mobile Styles
\* ------------------------------------------------------------ */

@media(max-width: 767px){
    html #wpadminbar { position: fixed; }
    body { min-width: 320px; padding-top: 76px; }
    body.has-menu-opened { overflow: hidden; }
    #mid_background { background: transparent; margin: 0 !important; }
    
    .container_12,
    .container_16 { width: auto; }

    .container_12 .grid_12,
    .container_16 .grid_16 { width: auto; display: block; max-width: 100%; float: none; margin: auto; }

    #top_image { width: 100%; height: 300px; margin: 0; top: 0;   }
    #top_image img { max-width: 100% !important; width: auto !important; height: auto !important;  }
    #nav { width: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100vh; overflow: auto; /*display: none;*/ background: #414b55; display: flex; align-items:center; justify-content:center; padding: 30px 0; box-sizing: border-box; z-index: 20; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
    body.has-menu-opened #nav  { visibility: visible; opacity: 1;  }
    #nav ul { width: 100%;  }
    #nav li { display: block; }

    #footer_text { padding: 10px; }

    #logo { margin-left: 10px; height: 74px; width: 51px; background-size: contain; }
    #logo a { width: 100%; height: 100%; }

    #toptext { margin-right: 70px; padding: 10px 0; }
    #quotestext { font-size: 18px; line-height: 1; }
    #phonenumber { font-size: 22px; line-height: 1; }
    #email { font-size: 16px; line-height: 1; }

    #header { position: fixed; top: 0; left: 0; width: 100%; z-index: 500; }
    body.logged-in #header  { top: 46px; }
    #header .nav-trigger { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; display: inline-block; z-index: 60; }

    .post { padding: 10px; }

    .home-nav { top: 0;  }
    .home-nav ul:after { display: table; content: '';clear: both;  }
    .home-nav ul { display: flex; padding: 7px; }
    .home-nav li { display: inline-block; margin: 0; width: auto; height: auto; }
    .home-nav li img { width: 100%; height: auto;  }
    .home-nav li span { font-size: 14px; line-height: 1; left: 10px; }
    
    .post p { font-size: 16px; }
    .post table td { display: block; width: 100%; }
    .post .cff-lb { width: 100% !important;  }
    .post .cff-post-text { margin-bottom: 20px !important;  }

    .gallery-columns-4 { display: flex; flex-wrap:wrap; margin: 0 -10px; padding-top: 10px;  }
    .gallery-columns-4 .gallery-item { box-sizing: border-box; width: 33.33% !important; padding: 10px; margin: 0 !important;  }
    #gallery-1 img { width: 100%; height: auto; }

}

@media(max-width: 600px){
    .home-nav ul { flex-wrap:wrap;  }
    .home-nav li { width: 50%; box-sizing: border-box; }
}

@media(max-width: 480px){
    .gallery-columns-4 .gallery-item { width: 50% !important; }
}