/*
Theme Name: The Dainty Feast 2015
Description: Theme for The Dainty Feast website.
Author: Drink Tea Eat Biscuits
*/


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

*, *:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}


body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  
}

a {
  color: inherit;
  text-decoration: inherit;
}

a img {
  border: none;
}

input {
	border-radius: 0;
}

.sunday {
	font-family: 'Sunday' !important;
}

.white {
	color: #fff;
}

.normal-weight {
	font-weight: 400;
}

#demo-content > section {
	overflow: hidden;
}

/*
================================================== Header
*/

header.top-header {
	position: absolute;
	width: 100%;
}



header.top-header #DF_Logo {
	width: 140px;
	height: 88.5px;
	position: absolute;
	left: 45px;
	top: 35px;
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
	transition: all 200ms ease-out;
}

header.top-header #DF_Logo:hover path {
	fill: #fff;
	transition: all 200ms ease-out;
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
}

header.top-header #DF_Logo:hover path {
	fill: #E3BA0A;
}

header.top-header nav {
	position: absolute;
	right: 30px;
	top: 30px;
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
	transition: all 200ms ease-out;
}

header.top-header nav a {
	padding: 20px 15px 10px;
color: #FFF;
display: inline-block;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.22em;
-webkit-transform: translateZ(0px);
        transform: translateZ(0px);
transition: all 200ms ease-out 0s;
position: relative;
border-bottom: 2px rgba(255,255,255,0) solid;
margin: 0 5px;
}

header.top-header nav a:hover {
	border-bottom: 2px rgba(255,255,255,1) solid;
}

#header {
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
	transition: all 200ms ease-out;
}

header.page-scrolled {
	position: fixed;
	top: 0;
	background-color: rgba(0,0,0,0.8);
	height: 70px;
	z-index: 99999;
}

header.page-scrolled nav {
	top: 10px;
}

header.page-scrolled #DF_Logo {
	width: 84px;
height: 53.5px;
position: absolute;
left: 45px;
top: 7px;
}

/* Navigation section */

#navigation_button {
    width: 75px;
    position: fixed;
    right: 3px;
    top: 2px;
    padding: 22px;
    display:none;
}

/*
================================== FOOTER
*/

footer {
	background-color: #202121;
	position: relative;
}

.footer-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	height: 300px;
}

footer #DF_Logo {
	width: 140px;
	height: 88.5px;
	position: absolute;
	left: 35px;
	bottom: 80px;
}

footer #social-icons {
	position: absolute;
	right: 20px;
	bottom: 80px;
	
}

footer #social-icons a svg {
	height: 24px;
	margin: 7px;
	display: inline-block;
	vertical-align: middle;
}

#footer-bottom {
	width: 100%;
	border-top: 2px #333333 solid;
	position: absolute;
	bottom: 0;
	height: 60px;
}

.copyright {
	color: #555555;
	font-size: 12px;
	padding: 20px 20px;
}

.drink-tea {
	position: absolute;
	right: 20px;
	bottom: 20px;
	color: #555555;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

#instafeed {
    width: 600px;
    position: absolute;
    left: 50%;
    margin: 0 0 0 -300px;
    height: 190px;
    top: 30px;
    overflow: hidden;
    text-align: center;
}

#instafeed a {
	display: inline-block;
}

#instafeed a img {
	height: 90px;
	width: 90px;
	margin: 3px 5px;
}

/*
================================== HOME SECTION

	
	-moz-osx-font-smoothing: auto;
	-webkit-font-smoothing: none;

	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
*/

#home {
	background-image: url(images/header-hold.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 100vh;
	display: block;
}

.header-text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -55px;
	margin-left: 70px;
}

#opening-text {
	position: absolute;
	width: 777px;
	height: 318px;
	top: 50%;
	left: 48%;
	margin-top: -165px;
	margin-left: -460px;
	overflow: visible;
	opacity: 0;
}

#main-text,
#underlines,
#lines {
	-webkit-filter: url(images/drop-shadow.svg#dropshadow);
	        filter: url(images/drop-shadow.svg#dropshadow);
}

#sub-text {
	position: absolute;
	top: 50%;
	left: 51%;
	opacity: 0;
}

#dots-8 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 180px;
}

#sub-text #dots-8:nth-of-type(1) {
margin-top: 126px;
margin-left: 28px;
-webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
}

#sub-text #dots-8:nth-of-type(2) {
margin-top: 226px;
margin-left: 38px;
-webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
}

#home h1 {
	position: absolute;
    width: auto;
    top: 50%;
    left: 50%;
    margin-top: 146px;
    margin-left: -125px;
    -webkit-transform: rotate(-4.5deg);
            transform: rotate(-4.5deg);
    color: #FFF;
    font-size: 19px;
    line-height: 33px;
    letter-spacing: 0.075em;
    text-align: center;
    font-weight: 400;
    width: 500px;
}

#see-menu {
	width: 300px;
	position: absolute;
	left: 50%;
	bottom: 35px;
	margin-left: -150px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.2em;
	display: block;
	-webkit-transform: scale(0.95, 0.95) perspective(1px) rotate(0deg);
	        transform: scale(0.95, 0.95) perspective(1px) rotate(0deg);
	transition: all 200ms ease-out 0s;
}

#see-menu:hover {
	 -webkit-transform: scale(1, 1) perspective(1px) rotate(0.5deg);
	         transform: scale(1, 1) perspective(1px) rotate(0.5deg);
}


#see-menu #title-lines {
	width: 102px;
    height: 32px;
    position: absolute;
    left: 50%;
    margin-left: -51px;
    bottom: 55px;
 
}

#see-menu p {
	position: absolute;
	bottom: -20px;
	left: 50%;
	margin-left: -125px;
	width: 250px;
	display: block;
	padding: 40px;
}



#arrow-down {
	position: absolute;
	color: #FFF;
	width: 30px;
	height: 30px;
	left: 50%;
	bottom: -20px;
	margin-left: -15px;
}


#see-menu #line:nth-of-type(1) {
	position: absolute;
	left: 0px;
	width: 62px;
	top: 50%;
	margin-top: -30px;
	margin-left: -9px;
}

#see-menu #line:nth-of-type(2) {
	position: absolute;
	right: 0px;
	width: 62px;
	top: 50%;
	margin-top: -30px;
	margin-right: -7px;
}


/*
================================== ABOUT
*/

#about {
	text-align: center;
	padding: 80px 0 70px;
	display: block;
}

.about-text {
	width: 960px;
	margin: 0 auto;
	color: #2d2d2d;
	padding: 30px 0;
}

.about-text p:first-of-type {
	font-weight: 400;
}

.about-text p {
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0.025em;
	font-weight: 300;
	padding: 0 0 20px;
}


/*
================================== MENU
*/

#menu {
	text-align: center;
	padding: 80px 0 120px;
	background-image: url(images/wood-bg2.jpg);
	background-size: cover;
	display: block;
}


/* Section Title */

.section-title h1 {
	font-size: 42px;
	letter-spacing: 0.2em;
	font-weight: 400;
	display: inline-block;
	vertical-align: middle;
	color: #2d2d2d;
}

.section-title {
	margin: 50px 0 100px;
	position: relative;
}

.section-title #title-lines {
	display: inline-block;
	vertical-align: middle;
}

.section-title #title-lines:nth-of-type(3) {
	width: 115px;
	height: 50px;
	-webkit-transform: rotate(-90deg);
	        transform: rotate(-90deg);
}

.section-title #title-lines:nth-of-type(4) {
	width: 115px;
	height: 50px;
	-webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
}

.section-title #title-lines path {
	fill: #2d2d2d;
}

#two-lines {
	width: 300px;
	position: absolute;
	top: -30px;
	margin-left: -150px;
	left: 50%;
}

#two-lines path,
#dots-3 path {
	fill: #2d2d2d;
}

.section-title #two-lines:nth-of-type(5) {
	bottom: -30px;
	top: auto;
}

.section-title #dots-3:nth-of-type(1) {
	top: -50px;
	
}

.section-title #dots-3:nth-of-type(6) {
	bottom: -50px;
	top: auto;
}

#dots-3 {
	width: 45px;
	position: absolute;
	margin-left: -22px;
	left: 50%;
}

.white-section-title #title-lines path,
.white-section-title #two-lines path,
.white-section-title #dots-3 path,
.white-section-title h1{
	color: #fff;
	fill: #fff;
}

/* Our Menu Text */

.our-menu-top-line {
	color: #fff;
	font-size: 23px;
	line-height: 36px;
	letter-spacing: 0.025em;
	padding: 0 0 20px;
}

.our-menu-line-2 {
	font-weight: 300;
	line-height: 32px;
	font-size: 20px;
	letter-spacing: 0.025em;
	padding: 0 0 10px;
	color: #fff;
}

.newletter-cta {
	font-weight: 300;
	line-height: 32px;
	font-size: 20px;
	letter-spacing: 0.025em;
	padding: 0 0 10px;
	color: #fff;
}

.newletter-cta .sunday {
	padding: 0 5px 3px 0;
	display: inline-block;
	letter-spacing: 0.05em;
	color: #1c96d4;
}

div#click-for-more-info {
	width: 320px;
	display: inline-block;
	position: relative;
	margin: 0 0 0 -95px;
}

div#click-for-more-info p {
color: #FFF;
position: absolute;
text-align: center;
font-size: 20px;
line-height: 33px;
letter-spacing: 0.06em;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -125px;
width: 200px;
height: 60px;
-webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
}


/* Canepes */

#canape-grid {
	width: 950px;
	margin: 0 auto 80px;
	text-align: center;
}

.canape {
	position: relative;
	width: 225px;
	height: 225px;
	display: inline-block;
	cursor: pointer;
}

.double-width-canape {
	width: 454px;
}

.canape-text {
	width: 225px;
height: 225px;
position: absolute;
opacity: 0;
top: 50%;
left: 50%;
-webkit-transform: scale(0.9, 0.9) perspective(1px) rotate(0deg);
        transform: scale(0.9, 0.9) perspective(1px) rotate(0deg);
transition: all 200ms ease-out 0s;
margin-top: -112px;
margin-left: -112px;
}

.canape-text:before {
	content: '';
	width: 0px;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

.canape .canape-text .title {
	color: #FFF;
	display: inline-block;
	vertical-align: middle;
	font-size: 19px;
	letter-spacing: 0.05em;
	width: 200px;
	line-height: 29px;
	margin: -6px 0 0;

}

.canape img {
	transition: all 100ms ease-out;
	opacity: 1;

}

.canape:hover img {
	opacity: 0;
	-webkit-transform: scale(0.9, 0.9);
	        transform: scale(0.9, 0.9);
}

.canepeClicked img {
	opacity: 0;
	-webkit-transform: scale(0.9, 0.9);
	        transform: scale(0.9, 0.9);
}

.canape:hover .canape-text {
	opacity: 1;
	-webkit-transform: scale(1, 1) perspective(1px) rotate(-3deg);
	        transform: scale(1, 1) perspective(1px) rotate(-3deg);
}

#canape-grid > div.canape:nth-of-type(2n):hover .canape-text {
	-webkit-transform: scale(1, 1) perspective(1px) rotate(3deg);
	        transform: scale(1, 1) perspective(1px) rotate(3deg);
}

#canape-lines {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -141px;
	margin-top: -100px;
	width: 282px;
	height: 200px;
}

.double-width-canape {

}

/* PRICES */

.menu-prices {
	width: 1070px;
	margin: 0px auto;
	position: relative;
	padding: 123px 0px 50px;
	height: 320px;
}

#tasty-canapes-6,
#tasty-canapes-8 {
	width: 464px;
	height: 86px;
	display: block;
	position: absolute;
	top: 17px;
	
}

#canapes-6 {
	left: 0;
	-webkit-transform: rotate(-8deg);
	        transform: rotate(-8deg);
}

#canapes-8 {
	right: 0;
	-webkit-transform: rotate(4deg);
	        transform: rotate(4deg);
}

.canape-price {
position: absolute;
width: 464px;
}

.a-selection-of {
	position: absolute;
	top: 0;
	left: 95px;
	font-size: 21px;
	letter-spacing: 0.1em;
}

.canapes-price {
	position: absolute;
	top: 110px;
	left: 200px;
	font-size: 37px;
	letter-spacing: 0.1em;
}

.per-head {
	position: absolute;
	top: 110px;
	left: 312px;
	font-size: 23px;
	letter-spacing: 0.1em;
}

#line-per-head {
	position: absolute;
	top: 142px;
	left: 312px;
	width: 124px;
}

.or-price {
	position: absolute;
	width: 40px;
	left: 50%;
	margin: 0 0 0 -20px;
}

.or-price p{
	padding: 15px 0 10px;
	font-size: 24px;
}

.or-price #dots-3 path {
	fill: #fff;
}



/*
================================== DELIVERY
*/

#delivery {
	text-align: center;
	padding: 80px 0 70px;
	display: block;
}

#delivery .section-title #title-lines {
	display: none;
}

#line-star {
	width: 216px;
	height: 97px;
	position: absolute;
	top: 20px;
	margin-left: 54px;
	left: 50%;
}

.delivery-text {
	width: 960px;
	margin: 0 auto;
	color: #2d2d2d;
	padding: 30px 0;
}

.delivery-text p:first-of-type {
	font-weight: 400;
}

.delivery-text p {
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0.025em;
	font-weight: 300;
	padding: 0 0 20px;
}

.delivery-text p .sunday {
	color: #1c96d4;
	font-size: 22px;
	display: inline-block;
	-webkit-transform: translate(0, -2px);
	        transform: translate(0, -2px);
}


/*
================================== STAY UP TO DATE
*/

#stay-up-to-date {
	text-align: center;
	padding: 80px 0 120px;
	background-image: url(images/wood-bg.jpg);
	background-size: cover;
	background-position: center bottom;
	display: block;
	height: 660px;
	position: relative;
	overflow: hidden;
}

#stay-up-to-date h1 {
	font-size: 40px;
	letter-spacing: 0.2em;
	font-weight: 400;
	position: absolute;
	left: 50%;
	margin-left: -400px;
	top: 50%;
	margin-top: -50px;
	-webkit-transform: rotate(-10deg);
	        transform: rotate(-10deg);
}

#stay-up-to-date h1 #dots-8:first-of-type {
	position: absolute;
	top: -25px;
	left: 50%;
	margin: 0 0 0 -90px;
}

#stay-up-to-date h1 #dots-8:last-of-type {
	position: absolute;
	top: auto;
	bottom: -25px;
	left: 50%;
	margin: 0 0 0 -90px;
}

#stay-up-to-date p {
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 400;
	position: absolute;
	left: 50%;
	margin-left: -48px;
	top: 50%;
	margin-top: -8px;
	text-align: left;
}

#mc_embed_signup {
	position: absolute;
	left: 50%;
	margin-left: -115px;
	top: 50%;
	margin-top: 40px;
	text-align: left;
}

#mce-EMAIL {
	-webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
   border: none;
   background-color: #fff;
   height: 55px;
   opacity: 0.89;
   display: block;
   float: left;
   width: 300px;
   font-size: 18px;
   letter-spacing: 0.01em;
   font-family: "Lato";
   padding: 0 15px;
   color: #5d5d5d;
}

#mc_embed_signup .clear {
	float: left;
	position: relative;
}

.mc-field-group {
		float: left;
}

.button {
	display: block;
	float: left;
	-webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
   border: none;
   background-color: #b7b7b7;
   height: 55px;
   width: 59px;
   cursor: pointer;
   text-indent:-9999px;
}

#send-arrow {
	position: absolute;
	right: 50%;
	top: 50%;
	margin: -14px -14px 0 0;
	width: 29px;
	height: 29px;
	pointer-events: none;
}

#send-arrow polygon {
	color: #ededed;
}

#mce-responses {
	position: absolute;
}

/* scrolling canapes */

#shortbread-canape,
#cake-canape,
#phone {
	position: absolute;
}

#shortbread-canape {
	left: 40px;
	top: 0px;
	width: 200px;
	height: 200px;
}

#cake-canape {
	left: 300px;
	bottom: -50px;
	width: 200px;
	height: 200px;
}

#phone {
	right: -20px;
	bottom: -110px;
}


/*
================================== CONTACT
*/

#contact {
	text-align: center;
	padding: 80px 0 0px;
	display: block;
}

.contact-text {
	width: 960px;
	margin: 0 auto;
	color: #2d2d2d;
	padding: 30px 0;
}

.contact-text p:first-of-type {
	font-weight: 400;
}

.contact-text p {
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0.025em;
	font-weight: 300;
	padding: 0 0 20px;
}


#contact-details {
	margin: 60px 0;
	position: relative;
	padding: 15px 0 40px 0;
}
#contact-details #two-lines {
	width: 480px;
	margin-left: -240px;
}

#contact-details #two-lines path {
	fill: #CBCBCB;
}

#contact-details #two-lines:first-of-type {

}

#contact-details #two-lines:last-of-type {
 bottom: 130px;
 top: auto;
}

#phone-icon,
#mail-icon {
	display: inline-block;
	vertical-align: middle;
}

#phone-icon path,
#mail-icon path,
#mail-icon polygon {
	fill: #cecece;
}

#phone-icon {
	width: 35px;
	height: 40px;
	margin: 0 10px 5px 0;
}

#mail-icon {
	width: 39px;
	height: 25px;
	margin: 0 15px 4px 0;
	-webkit-transform: rotate(-3deg);
	        transform: rotate(-3deg);
}

.phone-number {
	font-size: 30px;
	letter-spacing: 0.025em;
	color: #2d2d2d;
	margin: 0 0 20px;
}

.email-address {
	font-size: 26px;
	letter-spacing: 0.025em;
	color: #2d2d2d;
	margin: 0 0 10px;
}

.address {
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #2d2d2d;
	margin: 120px 0 0;
}

/* google map */


#contact iframe {
	margin-bottom: -4px; 
}

.overlay {
   background:transparent; 
   position:relative; 
   width:100%;
   height:400px; /* your iframe height */
   top:400px;  /* your iframe height */
   margin-top:-400px;  /* your iframe height */
}








/* PRELOADER */







/* ==========================================================================
   Author's custom styles
   ========================================================================== */


#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
}

#loader-wrapper .preload-logos {
	width: 150px;
	position: absolute;
	z-index: 99999;
	top: 50%;
	left: 50%;
	height: 94px;
	margin-top: -150px;
	margin-left: -85px;
	transition: all 200ms ease-out;
}

#loader-wrapper .preload-logos path {
	fill: #ddd;
}

.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 10px;
  height: 10px;
  background-color: #fff;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
  

    z-index: 1001;
}


    
    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #202121;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */  
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
    .loaded #loader {
        opacity: 0;  
        transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */  
        transition: all 0.3s 1s ease-out;
    }

    .loaded .preload-logos {
    	opacity: 0;
    }
    
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
        display: none;
    }
    .no-js h1 {
        color: #222222;
    }

    #content {
        margin: 0 auto;
        padding-bottom: 50px;
        width: 80%;
        max-width: 978px;
    }  


/*
================================================== 404
*/

#not-found {
	text-align: center;
	padding: 80px 0 120px;
	background-image: url(images/wood-bg2.jpg);
	background-size: cover;
	display: block;
	height: 100vh;
	position: relative;
	z-index: -1;
	width: 100%;
}

#not-found-text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-2deg); 
	width: 100%;
}

#not-found h1 {
	color: #fff;
	font-weight: 400;
	letter-spacing: 0.1em;
	font-size: 40px;
	
}

#not-found-text p {
	color: #fff;
	font-size: 22px;
	font-weight: 300;
	padding: 20px;
}

/*
================================================== Blog
*/

.blog-header {
	text-align: center;
	padding: 160px 0 120px;
	background-image: url(images/wood-bg2.jpg);
	background-size: cover;
	background-position: center center;
	display: block;
	position: relative;
	z-index: -1;
	width: 100%;
}


.blog-page-title {
	font-size: 50px;
	font-weight: 300;
	color: #fff;
	letter-spacing: 0.1em;
	transform: translate(-50%, -50%) rotate(-2deg);
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 50px 0 0 -40px;
}

.blog-posts {
	width: 100%;

	padding: 80px 20px 200px;
	background-color: #f8f8f8;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}


.post {
	display: inline-block;
	background-color: #fff;
	width: 370px;
	border: 10px #eee solid;
	transition: all 0.2s ease-out;
	margin: 40px 15px;
}

.post:hover {
	border: 10px #ccc solid;
}

.post-title {
	padding: 15px 20px;
	font-weight: 700;
	font-size: 23px;
}

.excerpt {
	padding: 0 20px 10px;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.3;
}

.read-more {
	padding: 10px 20px 10px;
	font-size: 16px;
	font-weight: 400;
	text-align: right;
	color: #bbb;

}