/*-----------------------------------------------------------------------------------

    Template Name: koffee
    Template URI: https://devitems.com/html/koffee-preview/
    Description: This is html5 template
    Author: HasTech
    Author URI: https://devitems.com/
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Contact Info CSS
    2. About Area
    3. Special Area
    4. Booking Area
    5. Advertise Area
    6. Menu Area
    7. Event Area
    8. Team Area
    9. Client Area
    10. Blog Area
    11. Blog Details Page
    12. Contact Page
    13. About Page

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  1. Contact Info CSS
/*----------------------------------------*/
.single-contact {
    float: left;
    position: relative;
    width: 25%;
}
.information h4 {
    font-size: 20px;
    font-weight: 400;
    position: relative;
    z-index: 2;
}
.information h4 span {
    color: #5e5e5e;
    font-weight: 700;
    padding-right: 10px;
}
.single-contact:after {
    background: #614a3d none repeat scroll 0 0;
    border-color: #614a3d;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    content: "";
    height: 90px;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 100%;
}
.single-contact:hover {border-color: #614a3d;}
.single-contact:hover:after {opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
.information {
    border: 1px solid #eeeeee;
    padding: 28px 0;
}
.single-contact:hover .information h4, .single-contact:hover .information h4 span {color: #ffffff; top: 3px}
/*----------------------------------------*/
/*  2. About Area
/*----------------------------------------*/
.about-text > h3 {
    color: #5e5e5e;
    font-family: "Courgette",cursive;
    margin-bottom: 21px;
    font-size: 36px
}
.about-text > p:nth-child(2) {margin-bottom: 15px;}
.about-text > p:nth-child(3) {margin-bottom: 46px;}
.about-text {
    padding: 52px 0;
    position: relative;
    z-index: 2;
}
/*----------------------------------------*/
/*  3. Special Area
/*----------------------------------------*/
.special-area .container-fluid, .image-area .container-fluid {
    padding-left: 5px;
    padding-right: 5px;
}
.special-item, .single-image-item {
    float: left;
    width: 25%;
    padding-left: 5px;
    padding-right: 5px
}
.item-content{position: relative}
.item-content img, .single-image-item img {max-width: 100%;}
.item-hover {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    bottom: 10px;
    height: auto;
    left: 10px;
    overflow: hidden;
    position: absolute;
    right: 10px;
    top: 10px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: auto;
}
.item-content:hover .item-hover {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}
.hover-text > h1 {
    color: #ffffff;
    font-family: "Courgette",cursive;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.item-content:hover .hover-text > h1 {top: 25%;}
.hover-text > p {
    bottom: 28%;
    color: #ffffff;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    padding: 0;
    position: absolute;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
    -webkit-transition: all 0.3s ease-in-out 0.1s;
    transition: all 0.3s ease-in-out 0.1s;
    left: 20px;
    right: 20px
}
.item-content:hover p {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
}
.hover-text > h1:hover a {color: #be937b;}
.hover-text {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
.hover-text .price {
    bottom: 17%;
    color: #ffffff;
    display: block;
    font-size: 20px;
    font-weight: 500;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    right: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
    -webkit-transition: all 0.3s ease-in-out 0.1s;
    transition: all 0.3s ease-in-out 0.1s;
}
.item-content:hover .price {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
}
/*----------------------------------------*/
/*  4. Booking Area
/*----------------------------------------*/
.booking-form input {margin-bottom: 20px;}
.booking-form input:focus {
    color: #614a3d;
    border-color: #614a3d;
}
.booking-form input:focus:-ms-input-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    color: 614a3d
}
.booking-form input:focus:-moz-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    color: 614a3d
}
.booking-form input:focus::-webkit-input-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    color: 614a3d
}
.booking-form .default-btn {margin-top: 20px; padding: 0 98px;}
.active.day {
    background: #614a3d none repeat scroll 0 0;
    color: #ffffff;
}
.day {cursor: pointer; text-align: center;}
.datepicker thead tr:nth-child(2) {
    background: #614a3d none repeat scroll 0 0;
    color: #ffffff;
    text-align: center;
}
.datepicker-switch {text-align: center;}
.datepicker {padding: 0;}
.date-wrapper .datepicker {padding: 0 17px;}
.datepicker .prev, .datepicker .next {
    cursor: pointer;
    font-size: 22px;
    padding: 0 8px;
}
/*----------------------------------------*/
/*  5. Advertise Area
/*----------------------------------------*/
.advertise-text > h1 {
    color: #ffffff;
    font-family: "Courgette",cursive;
    margin-bottom: 21px;
}
.advertise-text > p {
    color: #ffffff;
    font-size: 16px;
    line-height: 26px;
    margin: 0;
    padding: 0 72px;
}
/*----------------------------------------*/
/*  6. Menu Area
/*----------------------------------------*/
.menu-area .section-title {margin-bottom: 79px;}
.menu-image {margin-bottom: 17px; position: relative;}
.menu-image img {
    max-width: 100%;
    border: 1px solid #f1f1f1;
}
.menu-image > a {
    display: block;
    position: relative;
}
.menu-image > span {
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    color: #614a3d;
    display: block;
    font-size: 24px;
    font-weight: 500;
    height: 48px;
    left: 0;
    line-height: 47px;
    margin: auto;
    position: absolute;
    right: 0;
    top: -23px;
    width: 130px;
    z-index: 2;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}
.single-menu > h4 {
    color: #5e5e5e;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 9px;
}
.single-menu > span {display: block;}
.single-menu h4:hover a {color: #614a3d;}
.single-menu:hover .menu-image span {
    background: #614a3d none repeat scroll 0 0;
    color: #ffffff;
}
.col-md-3:nth-child(1) .single-menu, .col-md-3:nth-child(2) .single-menu, .col-md-3:nth-child(3) .single-menu, .col-md-3:nth-child(4) .single-menu {
    margin-bottom: 63px;
}
.menu-area .default-btn {
    line-height: 42px;
    margin-top: 59px;
    padding: 0 37px;
}
.menu-btn, .event-btn {line-height: 0; overflow: hidden;}
.menu-section .col-md-3:nth-child(5) .single-menu, .menu-section .col-md-3:nth-child(6) .single-menu, .menu-section .col-md-3:nth-child(7) .single-menu, .menu-section .col-md-3:nth-child(8) .single-menu {
    margin-bottom: 63px;
}
/*----------------------------------------*/
/*  7. Event Area
/*----------------------------------------*/
.event-text > h1 {
    color: #5e5e5e;
    font-family: "Courgette",cursive;
}
.event-title > span {
    display: inline-block;
    font-family: "Roboto",sans-serif;
    font-size: 30px;
    padding-left: 5px;
    position: relative;
    top: -1px;
}
.event-text > .event-title {
    color: #614a3d;
    font-size: 60px;
    margin-bottom: 30px;
    padding-top: 22px;
}
.event-text .default-btn {margin-top: 35px;}
/*----------------------------------------*/
/*  8. Team Area
/*----------------------------------------*/
.single-team > a {
    border: 1px solid #f1f1f1;
    display: block;
    overflow: hidden;
}
.team-text > h4 {
    color: #5e5e5e;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}
.team-text > h4:hover a {color: #614a3d;}
.team-text h5 {font-weight: 400; margin-bottom: 16px;}
.team-links > a {
    border: 1px solid #614a3d;
    border-radius: 50%;
    color: #614a3d;
    display: inline-block;
    font-size: 16px;
    height: 29px;
    line-height: 27px;
    margin: 0 6px;
    width: 29px;
}
.team-links > a:hover {
    background: #614a3d none repeat scroll 0 0;
    color: #ffffff;
}
.team-text {padding: 17px 0 0;}
/*----------------------------------------*/
/*  9. Client Area
/*----------------------------------------*/
.single-tesimonial > p {
    color: #dbdada;
    margin-bottom: 18px;
    padding: 0 20px;
}
.client-rating i {
    color: #ffffff;
    font-size: 18px;
    margin: 0 1px;
}
.single-tesimonial > h4 {
    color: #ffffff;
    font-weight: 500;
    margin-top: 12px;
}
.single-client {
    background: #ffffff none repeat scroll 0 0;
    display: table;
    height: 112px;
    text-align: center;
    width: 100%;
}
.single-client-container .col-md-4:nth-child(1), .single-client-container .col-md-4:nth-child(2), .single-client-container .col-md-4:nth-child(3) {
    margin-bottom: 32px;
}
.client-table-cell {
    display: table-cell;
    vertical-align: middle;
}
.single-client:hover {opacity: 0.8;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.owl-dots {margin-top: 62px; text-align: center;}
.owl-dot {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: inline-block;
    height: 14px;
    margin: 0 6px;
    -webkit-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
    width: 14px;
    position: relative
}
.owl-dot:after {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    content: "";
    height: 20px;
    left: -5px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: -5px;
    -webkit-transition: all 0.1s ease-out 0s;
    transition: all 0.1s ease-out 0s;
    width: 20px;
}
.owl-dot.active:after {opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
.testimonial-carousel {padding-top: 15px;}
/*----------------------------------------*/
/*  10. Blog Area
/*----------------------------------------*/
.single-blog {margin: 4px 0;}
.blog-text {
    border: 1px solid #f1f1f1;
    padding: 25px;
}
.blog-text > span {
    display: block;
    font-weight: 500;
    margin-bottom: 13px;
}
.blog-text > h4 {
    color: #5e5e5e;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 14px;
    text-transform: capitalize
}
.blog-text > a {
    color: #777777;
    display: inline-block;
    margin-top: 13px;
}
.blog-text > h4:hover a, .blog-text > a:hover {color: #614a3d;}
.single-blog, .single-team > a {transition: all 0.3s ease 0s}
.single-blog:hover, .single-team:hover > a {box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);}
.blog-image {display: block; position: relative;}
.blog-image:after {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.single-blog:hover .blog-image:after {
    bottom: 10px;
    left: 10px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    right: 10px;
    top: 10px;
}
.blog-image > img {width: 100%;}
.blog-section .col-lg-4:nth-child(1) .single-blog, .blog-section .col-lg-4:nth-child(2) .single-blog, .blog-section .col-lg-4:nth-child(3) .single-blog {
    margin-bottom: 30px;
}
/*----------------------------------------*/
/*  11. Blog Details Page
/*----------------------------------------*/
.details-title {
    color: #5e5e5e;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 26px;
    margin-top: 27px;
}
.post-information > a {
    color: #888888;
    display: inline-block;
}
.post-information > a:first-child {
    margin-right: 43px;
    position: relative;
}
.post-information > a:first-child:after {
    content: "/";
    position: absolute;
    right: -45px;
    top: 0;
    width: 24px;
}
.post-information {margin-bottom: 24px; overflow: hidden;}
.blog-details-area p:nth-child(4) {margin-bottom: 24px;}
.content-image, .content-text {float: left; width: 50%;}
.content-image > img {max-width: 100%;}
.content-text {padding-left: 30px;}
.blog-details-content {margin-top: 26px; overflow: hidden;}
.content-list > span {
    display: block;
    margin-bottom: 9px;
}
.content-list span i {
    color: #757575;
    font-size: 18px;
    position: relative;
    top: 2px;
    width: 17px;
}
.content-text > p {margin-bottom: 27px; padding-top: 31px;}
.blog-details-area .social-links {
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 17px;
    padding-top: 40px;
}
.comments > h4, .new-comment-post h4 {
    color: #5e5e5e;
    line-height: 13px;
    margin-bottom: 60px;
    text-transform: uppercase;
}
.comments {padding-top: 80px;}
.author-image {border: 1px solid #dfdfdf; float: left;}
.comment-text > h5 {
    color: #535353;
    font-weight: 500;
    margin-bottom: 11px;
    text-transform: uppercase;
}
.comment-text {padding-left: 31px;}
.comment-text a i {
    color: #614a3d;
    font-size: 20px;
    padding-top: 2px;
}
.comment-text > a i:hover {color: #000000;}
.reply-comment {padding-left: 100px;}
.single-comment {margin-bottom: 24px;}
.new-comment-post {
    margin-top: 45px;
    padding-right: 60px;
}
.comment-form input {
	border-color: #f3f3f3;
    height: 40px;
    margin-bottom: 25px;
}
.comment-form textarea {border-color: #f3f3f3;}
.comment-form .default-btn {
    color: #fffefe;
    line-height: 38px;
    margin-top: 25px;
    padding: 0;
    width: 100%;
}
.post-information > a:hover, .comment-text > h5 a:hover {color: #614a3d;}
.widget{margin-bottom: 30px}
.search-box > input {
    border-color: #f3f3f3;
    font-size: 13px;
    height: 40px;
    padding: 0 20px;
}
.search-box {position: relative;}
.search-box > button {
    background: #614a3d none repeat scroll 0 0;
    border: 0 none;
    color: #ffffff;
    font-size: 18px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
}
.search-box > button:hover {background: #000000 none repeat scroll 0 0;}
.single-widget > h4 {
  color: #614a3d;
  font-weight: 500;
  line-height: 13px;
  margin-bottom: 25px;
  padding-top: 32px;
  text-align: center;
  text-transform: uppercase;
}
.single-widget {
  border-bottom: 1px solid #f1f1f1;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  margin-bottom: 30px;
  overflow: hidden;
  padding-bottom: 25px;
  padding-left: 24px;
  position: relative;
}
.single-widget:after {
    background: #614a3d none repeat scroll 0 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.single-widget a {
    color: #6f6f6f;
    display: inline-block;
    margin-bottom: 11px;
}
.single-widget a:hover, .single-widget a:hover i{color: #614a3d}
.single-widget a i {
    color: #606060;
    font-size: 21px;
    line-height: 11px;
    padding-right: 11px;
    position: relative;
    top: 3px;
}
.single-widget li:last-child a {margin: 0;}
.recent-item > a, .gallery > a {
    display: block;
    float: left;
    margin: 0 20px 0 0;
    position: relative;
    width: 51px;
}
.recent-item {margin-bottom: 20px; overflow: hidden;}
.recent-text {
    overflow: hidden;
}
.recent-text h5{
    font-size: 14px;
}
.recent-item img, .gallery img {max-width: 100%;}
.recent-item > a:before, .recent-item > a:after, .gallery > a:before, .gallery > a:after {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.recent-item:hover > a:before, .recent-item:hover > a:after, .gallery > a:hover:before, .gallery > a:hover:after {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: scale(1);
            transform: scale(1);
}
.recent-item > a:after, .gallery > a:after {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    bottom: 0;
    color: #ffffff;
    content: "";
    font-family: "Material-Design-Iconic-Font";
    font-size: 20px;
    height: 11px;
    left: 0;
    line-height: 10px;
    margin: auto;
    right: 0;
    top: 0;
    width: 17px;
}
.recent-text > h5 a {
    color: #6f6f6f;
    font-weight: 400;
    text-transform: capitalize;
}
.recent-info > a {
    color: #999999;
    font-size: 13px;
    margin: 0;
}
.recent-info a i {
    color: #614a3d;
    font-size: 12px;
    padding-right: 7px;
    top: 1px;
}
.recent-info > a:first-child {
    margin-right: 23px;
    position: relative;
}
.recent-info > a:first-child:after {
    content: "/";
    position: absolute;
    right: -14px;
    top: 0;
}
.recent-item:last-child {margin: 0;}
.tags a {line-height: 24px; margin: 0;}
.tags li {display: inline-block; margin-right: 20px;}
.tags {padding-right: 12px;}
.gallery > a {
    float: left;
    margin-bottom: 9px;
    margin-right: 13px;
    width: auto;
}
/*----------------------------------------*/
/*  12. Contact Page
/*----------------------------------------*/
#contact-form {text-align: center;}
#contact-form input, #contact-form textarea {
    border-color: #dddddd;
    margin-bottom: 20px
}
#contact-form textarea {
    background: #ffffff none repeat scroll 0 0;
    height: 100px;
}
#contact-form .default-btn {
    margin-top: 20px;
    padding: 0 95px;
}
.contact-info-map-area {position: relative;}
.contact-information-container {
    background: #ffffff none repeat scroll 0 0;
    display: block;
    margin: 60px 0;
    padding: 27px 0 70px;
    position: absolute;
    right: 14%;
    top: 0;
    width: 370px;
}
.info-icon {
    color: #614a3d;
    display: block;
    float: left;
    font-size: 30px;
    padding-top: 5px;
    width: 50px;
}
.info-text {
    display: block;
    float: left;
    line-height: 22px;
}
.single-information {
    margin-bottom: 10px;
    overflow: hidden;
    padding: 0 50px;
}
.contact-links > h3 {
    color: #5e5e5e;
    margin-bottom: 16px;
    text-align: center;
    padding-top: 8px;
}
.social-links a i {
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    margin: 0 6px;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 26px;
}
.social-links .zmdi-facebook {background: #3b5998 none repeat scroll 0 0;}
.social-links .zmdi-google-plus {background: #ea4335 none repeat scroll 0 0;}
.social-links .zmdi-twitter {background: #1c9dec none repeat scroll 0 0;}
.social-links .zmdi-pinterest {background: #cb1f27 none repeat scroll 0 0;}
.social-links .zmdi-linkedin {background: #0177b5 none repeat scroll 0 0;}
.social-links {text-align: center;}
.social-links a i:hover {background: #000000 none repeat scroll 0 0;}
#contact-form .default-btn {
    margin-top: 20px;
    padding: 0 95px;
}
/*----------------------------------------*/
/*  13. About Page
/*----------------------------------------*/
.image-wrapper {position: relative;}
.image-wrapper:after {
    background: #614a3d none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.text-tablecell {
    height: auto;
    left: 50%;
    margin: auto;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.text-tablecell > h3 {
    color: #ffffff;
    font-family: "Courgette",cursive;
    font-size: 23px;
    line-height: 36px;
}
.text-tablecell > img {margin-bottom: 20px;}
.image-hover-text {
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 2;
}
.image-wrapper:hover:after {background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;}
.single-fun-factor.text-center > h3 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 19px;
}
.fun-icon {padding-bottom: 22px;}
.single-fun-factor.text-center > h4 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
}