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

Template Name: Chipsofic
Template Description: Chipsofic is a One Page HTML Template for Chips, Fries, Restaurant and Food Product Seller. It can be easily customized as it is well documented and developed using latest web technologies. 
Version: 1.0
Author: BootPeople

* This file contains the styling for this theme. If you want to change any style of the theme, just edit from here. But, before editing anything, please make sure that you have proper css knowledge. Also, if you want to edit style of responsive version, then please edit the responsive.css file available at assets/css/responsive.css

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


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

[TABLE OF CONTENTS]

	1. Global Styles
    2. Buttons
    3. Preloaders
    4. Header Section
        4.1. Header and Sticky Bar
        4.2. Logo
        4.3. Main Menu
        4.4. Slider
    5. Top Section
    6. About Us Section
    7. Ingredient Section
    8. Our Process Section
    9. Gallery Section
    10. Progress Counter Section
	11. Meet The Team Section
    12. Testimonial Section
    13. Blog Section
    14. Blog Single Section
    15. Coupon/Newsletter Section
    16. Map Section
    17. Contact Section
    18. Footer Section
        18.1 Footer Top
        18.2 Copyright

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


/*-----------------------------
 1. Global Styles 
-------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Raleway:200,400,700,800');
body {
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #232323;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
}

.clear {
    clear: both;
}

iframe {
    border-width: 0px;
}

img {
    max-width: 100%;
}

.chipsofic-content-block {
    padding: 65px 0 95px;
}

.section-gray {
    background-color: #fff;
}

.section-title h1 {
    font-size: 45px;
    margin-bottom: 0;
    text-transform: uppercase;
}

.section-title h2 {
    font-size: 35px;
    text-transform: uppercase;
}

.chipsofic-subtitle {
    color: #232323;
    font-family: 'Raleway', sans-serif;
    font-size: 23px;
    font-weight: 200;
    line-height: 1.3;
}

.testjus {
    text-align: justify;
}

;
.btn-for {
    background: #ffffffcf;
    padding: 10px;
    border-radius: 10px;
}


/*-----------------------------
2. Buttons
-------------------------------*/

.chipsofic-small-btn {
    background: #fe7e17;
    border: 1px solid #fe7e17;
    color: #fff;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px 20px;
    text-transform: uppercase;
}

.chipsofic-small-btn:hover {
    background: transparent;
    color: #fe7e17;
}

.chipsofic-medium-btn {
    background: #fe7e17;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    padding: 15px;
    width: 30%;
    text-transform: uppercase;
}

.chipsofic-medium-btn:hover {
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.chipsofic-fullwidth-btn {
    background: #fe7e17;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    text-transform: uppercase;
    width: 100%;
    padding: 12px;
}

.chipsofic-fullwidth-btn:hover {
    background: #232323;
    color: #fff;
}

.chipsofic-form-btn {
    background: #232323;
    border-radius: 0;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px 20px;
    text-transform: uppercase;
    width: 100%;
}

.chipsofic-form-btn:hover {
    background: #000;
    color: #fff;
}


/*-----------------------------
3. Preloaders
-------------------------------*/

.spinner {
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
    background-color: #fff;
    border-radius: 100%;
    height: 40px;
    margin: 100px auto;
    width: 40px;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}

.chipsofic-site-preloader-wrap {
    background: #fe7e17 none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

.chipsofic-site-preloader-wrap .spinner {
    left: 50%;
    margin: -20px 0 0 -20px;
    position: absolute;
    top: 50%;
}


/*-----------------------------
4. Header Section
-------------------------------*/


/* 4.1. Header and Sticky Bar */

.header-area {
    background: url('assets/img/slide-bg.jpg') no-repeat fixed center;
    background-size: cover;
}

.header-area .cbp-af-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.header-area .cbp-af-header.cbp-af-header-shrink {
    background: rgba(0, 0, 0, .8);
    border-bottom: 1px solid #fe7e17;
}

.header-area .cbp-af-header h1 {
    line-height: 0;
}

.header-area .cbp-af-header.cbp-af-header-shrink .main-menu li a {
    padding: 21px 15px;
}

.header-area .cbp-af-header.cbp-af-header-shrink .logo img {
    max-height: 55px;
}


/* 4.2. Logo */

.logo {
    padding: 3px 0;
    text-transform: uppercase;
}

.logo img {
    -webkit-transition: all 0.4s ease 0s;
    max-height: 155px;
    transition: all 0.4s ease 0s;
    max-width: 300%;
    position: relative;
    top: -15px;
}

.pclass {
    padding: 20px;
    font-size: 13px !important;
    line-height: 22px !important;
    text-align: justify;
}

.logo a {
    color: #494949;
}

.logo a:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: 0.8;
}

.logo h1 {
    display: inline-block;
    font-size: 16px;
    margin: 0;
    padding: 0px;
}


/* 4.3. Main Menu */

.main-menu {
    font-family: 'Raleway', sans-serif;
    padding-right: 40px;
}

.main-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.main-menu li {
    display: inline-block;
    position: relative;
}

.main-menu li a {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 700;
    padding: 30px 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.main-menu li:hover>a {
    color: #fe7e17;
    text-decoration: none;
}

.responsive-menu-wrap {
    display: none;
}


/* 4.4. Slider */

.main-slides .owl-nav div {
    color: #ffffff;
    font-size: 25px;
    height: 40px;
    left: 50px;
    line-height: 1.5;
    margin-top: -20px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    position: absolute;
    text-align: center;
    top: 60%;
    width: 40px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.main-slides .owl-nav div.owl-next {
    left: auto;
    right: 50px;
}

.main-slides:hover .owl-nav div {
    opacity: 0.8;
    top: 50%;
}

.main-slides .owl-nav div:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.main-slide-item-table {
    display: table;
    height: 100%;
    width: 100%;
}

.main-slide-item-tablecell {
    display: table-cell;
    vertical-align: middle;
}


/*-----------------------------
5. Top Section
-------------------------------*/

.top-area {
    margin: auto;
    padding: 17.5% 0 14.5%;
    width: 90%;
}

.top-area h1 {
    color: #fff;
    font-size: 55px;
    font-weight: 900;
    line-height: 1.5;
    text-transform: uppercase;
}

.top-area p {
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    line-height: 1.5;
}

.top-area .btn {
    background: #fe7e17;
    border: 1px solid #fe7e17;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    padding: 15px 40px;
    text-transform: uppercase;
}

.about-us-section .col-md-7 {
    margin-top: 120px;
}

.top-area .btn:hover {
    background: rgba(0, 0, 0, .3);
    color: #fff;
}


/*-----------------------------
6  About Us Section
-------------------------------*/

.about-us-section {
    margin-top: 50px;
}

.about-us-section a {
    color: #333;
    text-decoration: none;
}

.about-us-section h1 {
    font-size: 45px;
    line-height: 1;
    margin-bottom: 0;
    text-transform: uppercase;
}

.about-us-section h1 span {
    font-size: 45px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0;
    text-transform: uppercase;
}

.about-us-section h2 {
    font-size: 26px;
    font-weight: 200;
    margin-top: 5px;
}

.about-us-section h3 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0;
}

.about-us-section h3 span {
    ;
    font-weight: 700;
}

.about-us-section img {
    -moz-transition: all 0.9s;
    -webkit-transition: all 0.9s;
    display: block;
    margin: 0 auto;
    max-width: 219px;
    /*    max-width: 380px;*/
    transition: all 0.9s;
}

.about-us-section img:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.about-us-section i {
    color: #BC0F21;
    padding-right: 10px;
}

.chips-feature-block {
    margin-top: 20px;
}


/*-----------------------------
7. Progress Bar Section
-------------------------------*/

.progress {
    background: #cccccc;
    height: 25px;
}

.progress .ingrediant-percentage {
    font-weight: bold;
    line-height: 25px;
    padding: 0;
    margin: 0 0 0 10px;
    text-transform: uppercase;
}

.progress .ingrediant-percentage .val {
    float: right;
    font-style: normal;
    margin: 0 20px 0 0;
}

.progress-bar {
    text-align: left;
    transition-duration: 3s;
}

.progress-bar-block p {
    margin-top: 10px;
}

.chipsofic-progress-bar {
    margin: 20px auto 0 auto;
    width: 90%;
}

.chipsofic-progress-bar h4 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}


/*-----------------------------
8. Our Process Section
-------------------------------*/

.process-block {
    background: url('assets/img/video-bg.jpg') no-repeat fixed center;
    background-size: cover;
}

.process-block .fa {
    font-size: 100px;
    color: #fe7e17;
    cursor: pointer;
}

.process-block .fa:hover {
    color: #fff;
}

.process-block h1,
.process-block .chipsofic-subtitle {
    color: #fff;
}

.modal-dialog {
    width: 60%;
}

.modal-content {
    border: none;
    border-radius: 0px;
}


/*-----------------------------
9 Gallery Section
-------------------------------*/

.gallery-lightbox {
    display: block;
    position: relative;
    margin-bottom: 30px;
}

.gallery-lightbox img {
    width: 100%
}

.gallery-lightbox i.fa {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.3s ease 0s;
    color: #000;
    font-size: 25px;
    left: 50%;
    line-height: 1.5;
    margin-left: -10px;
    margin-top: -10px;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 60%;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 20px;
    z-index: -1;
}

.gallery-lightbox:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.2s ease 0s;
    background: #fe7e17 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.2s ease 0s;
    visibility: hidden;
    width: 100%;
    z-index: -1;
}

.gallery-lightbox:hover i.fa {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    top: 50%;
    visibility: visible;
    z-index: 2;
}

.gallery-lightbox:hover:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    opacity: 0.7;
    visibility: visible;
    z-index: 1;
}

.gallery-area {
    margin-top: 50px;
}


/*-----------------------------
10. Progress Counter Section
-------------------------------*/

.counter-block {
    background: #fe7e17 url('assets/img/progress-bg.png') no-repeat scroll center center;
    color: #fff;
}

.counter-block h1,
.counter-block .chipsofic-subtitle {
    color: #fff;
}

.counter-block h2 {
    color: #fff;
    font-size: 55px;
    font-weight: 700;
    margin: 0;
}

.chipsofic-counter-area {
    margin-top: 50px;
}

.chipsofic-counter-area p {
    font-weight: bold;
    text-transform: uppercase;
}


/*-----------------------------
11. Meet The Team Section
-------------------------------*/

.single-team-item {
    color: #6e6e6e;
    display: block;
    margin-top: 50px;
}

.single-team-item h3 {
    color: #222222;
    font-weight: 700;
}

.single-team-item h4 {
    color: #6e6e6e;
    font-weight: 300;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.single-team-item i.fa,
.about-us-section i.fa {
    font-size: 25px;
    color: #333333;
}

.single-team-item i.fa:hover,
.about-us-section i.fa:hover {
    opacity: 0.8;
}

.single-team-item img {
    -moz-transition: all 0.9s;
    -webkit-transition: all 0.9s;
    background-color: #ffffff;
    border-radius: 50%;
    border: 1px solid #f8f8f8;
    box-shadow: -2px 0 9px -2px #fe7e17;
    transition: all 0.9s;
    width: 200px;
}

.single-team-item p {
    color: #6e6e6e;
}

.single-team-item ul,
.about-us-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.single-team-item ul li,
.about-us-section ul li {
    display: inline-block;
    margin-right: 5px;
}

.single-team-item ul li:last-child,
.about-us-section ul li:last-child {
    margin-right: 0px;
}

.single-team-item:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


/*-----------------------------
12. Testimonial Section
-------------------------------*/

.review-stars {
    list-style: outside none none;
    margin: 0 auto;
    padding: 0;
}

.review-stars li {
    display: inline-block;
}

.review-stars i.fa {
    color: #FFD203;
    font-size: 20px;
    margin: 0;
    padding: 0;
}

.testimonial-btn {
    text-align: center;
    margin-top: 30px;
}

.testimonial-bg-1 {
    background: url('assets/img/testimonial-bg.jpg') no-repeat fixed center;
    background-size: cover;
}

.circle-testimonial-item {
    background: rgba(0, 0, 0, .3);
    border: 1px dotted #000;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    margin-top: 30px;
    padding: 20px 7px;
}

.circle-testimonial-item h4 {
    color: #fff;
    font-style: normal;
    text-align: right;
    text-transform: uppercase;
}

.circle-testimonial-item h4 span {
    color: #fff;
    display: block;
    text-transform: none;
}

.circle-testimonial-item img {
    -moz-transition: all 0.9s;
    -webkit-transition: all 0.9s;
    background-color: #fff;
    border-radius: 75px;
    border: 1px solid #EAEAEA;
    display: block;
    height: 150px;
    margin: 0 auto 10px;
    padding: 5px;
    transition: all 0.9s;
    width: 150px;
}

.list-testimonial-item img {
    -moz-transition: all 0.9s;
    -webkit-transition: all 0.9s;
    background-color: #fff;
    border-radius: 75px;
    border: 1px solid #EAEAEA;
    display: block;
    height: auto;
    margin: 0 auto 10px;
    padding: 5px;
    transition: all 0.9s;
    width: 150px;
}

.circle-testimonial-item:hover img,
.list-testimonial-item:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.list-testimonial-item {
    border-bottom: 1px dotted #ccc;
    font-size: 16px;
    margin-top: 15px;
    font-family: 'Raleway', sans-serif;
    padding: 20px 15px;
}

.testimonial-section-heading p {
    font-style: normal;
    padding: 5px 20px;
    text-align: center;
}

.testimonial-section-wrapper {
    background-color: #222222;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    font-size: 24px;
    padding: 60px 0px 90px;
    position: relative;
}

.testimonial-section-wrapper>h2 {
    margin: 0 0 30px;
    padding: 0;
    text-align: center;
}

.testimonial-section-wrapper h4 {
    font-size: 17px;
    margin: 20px 0 0;
}

.testimonial-section-wrapper h4 span {
    display: block;
    font-size: 14px;
    font-weight: normal;
    margin-top: 10px;
}

.testimonial-section-wrapper ul {
    margin-top: 15px;
}

.testimonial-section-wrapper h1,
.testimonial-section-wrapper .chipsofic-subtitle {
    color: #fff;
}

.list-testimonial-item h4 {
    text-align: right;
    text-transform: uppercase;
}

.list-testimonial-item h4 span {
    display: block;
    font-size: 14px;
    font-weight: normal;
    text-transform: none;
}


/*-----------------------------
13. Blog Section
-------------------------------*/

.blog-bg-1 {
    background-image: url(assets/img/image/pufkilogo.png)
}

.blog-bg-2 {
    background-image: url(assets/img/image/pumfylogo1.png)
}

.blog-bg-3 {
    background-image: url(assets/img/image/crinklelogo.png)
}

.blog-preview {
    background-color: #ddd;
    background-position: center center;
    background-size: cover;
    height: 220px;
    margin-bottom: 20px;
}

.post-meta {
    font-size: 12px;
}

.post-meta ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.post-meta i.fa {
    margin-right: 5px;
}

.post-meta ul li:last-child {
    margin-right: 0;
}

.post-meta ul li {
    display: inline-block;
    margin-right: 10px;
}


/*-----------------------------
14. Blog Single Section
-------------------------------*/

.single-blog-item {
    background-color: #ffffff;
    box-shadow: -2px 0 9px -2px #dddddd;
    color: #6e6e6e;
    display: block;
    margin: 50px 0 0;
    padding: 15px;
}

.single-blog-item h3 {
    color: #222222;
    font-size: 20px;
    margin: 0 0 10px;
}

.single-blog-item>p {
    margin-top: 6px;
}

.single-blog-item.list {
    border-bottom: 1px dotted #e0e0e0;
    box-shadow: none;
}

.single-blog-item:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    color: #6e6e6e;
    cursor: pointer;
    opacity: 0.8;
    text-decoration: none;
}

.blog-single-modal img {
    float: right;
    padding: 10px 0px 10px 15px;
    width: 50%;
}

.blog-single-modal {
    padding: 10px 25px;
}

.blog-single-modal .post-meta {
    padding-bottom: 10px;
}


/*-----------------------------
15. Coupon/Newsletter Section
-------------------------------*/

.newsletter-block {
    background: #fe7e17 url('assets/img/scissors.png') no-repeat scroll right bottom;
    color: #fff;
}

.newsletter-block h2 {
    color: #fff;
}

.newsletter input[type=email],
.newsletter input[type=text] {
    border-radius: 0;
    border: 1px solid #333;
    height: 45px;
}

.newsletter {
    margin-top: 25px;
}


/*-----------------------------    
16. Google Map
-------------------------------*/

.gmap_outer {
    background-color: rgb(238, 238, 238);
    height: 380px;
    overflow: hidden;
    position: relative;
}

.gmap {
    padding: 0;
    height: 450px;
}

.gmap.border {
    box-shadow: -2px 0 9px -2px #dddddd;
    background: #ffffff;
    padding: 8px;
}

#map1 {
    display: block;
    height: 100%;
    margin: 0 auto;
    width: 100%;
}


/*-----------------------------
17. Contact Form Section
-------------------------------*/

.contact-info-block {
    margin-top: 50px;
}

.contact-info-block ul {
    list-style: none;
    padding: 0;
    font-weight: bold;
}

.contact-info-block ul a {
    color: #333333;
}

.contact-info-block ul a:hover {
    text-decoration: none;
}

.contact-info-block i.fa {
    padding-right: 9px;
}

.contact-info-block ul li {
    padding-bottom: 5px;
}

.contact-form {
    margin-top: 50px;
}

.contact-form label {
    display: block;
    font-weight: 400;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    border: 1px solid #ddd;
    margin-bottom: 15px;
    padding: 7px;
    width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border: 1px solid #fe7e17;
}

.contact-form textarea {
    height: 100px;
}

.contact-form input[type="submit"] {
    border-radius: 3px;
    color: #ffffff;
    width: 100%;
}

.contact-form input[type="submit"]:hover {
    background-color: #222;
    color: #ffffff;
}

.contact-form.wide-form {
    border: none;
    box-shadow: none;
    color: #222;
}

.contact-form.wide-form input[type="submit"] {
    border: 1px solid #fff;
}


/*-----------------------------
18. Footer Section
-------------------------------*/


/* 18.1 Footer Top */

.footer-logo {
    display: inline-block;
    margin: 0;
    max-width: 300px;
    padding: 0 30px 10px 0;
}

.footer-social i.fa {
    font-size: 22px;
}

.footer-social i.fa:hover {
    color: #ffffff;
}

.footer-social ul li {
    display: inline-block;
    margin-right: 5px;
}

.footer-social ul li:last-child {
    margin-right: 0px;
}

.footer-top-area {
    background: #000;
    border-top: 5px solid #fe7e17;
}

.footer-top-area,
.footer-top-area a {
    color: #ffffff;
}

.footer-widget {
    padding: 40px 0;
}

.footer-widget i.fa {
    color: #fe7e17;
    padding-right: 5px;
}

.footer-widget ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.footer-widget a:hover {
    color: #fe7e17;
    text-decoration: none;
}


/* 18.2 Copyright */

.footer-copyright-area {
    background-color: #000;
    color: #ffffff;
    padding: 5px 0 15px;
}

.footer-copyright-area a {
    color: #ffffff;
}

.footer-copyright-area a:hover {
    color: #fe7e17;
    text-decoration: none;
}

.go-top {
    background-color: rgba(0, 0, 0, 0.4);
    bottom: 2em;
    color: white;
    display: none;
    font-size: 12px;
    padding: 1em;
    position: fixed;
    right: 2em;
    text-decoration: none;
    z-index: 999;
}

.go-top:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.btn-for {
    background: #ffffffcf;
    padding: 10px;
    border-radius: 10px;
}