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

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
    5. Top Section
    6. About Us Section
    7. Why Choose us Section
    8. Become A Dealer Section
    9. Pricing Section
    10. Progress Counter Section
	11. Meet The Team Section
    12. Testimonial Section
    13. Coupon/Newsletter Section
    14. Google Map
    15. Contact Section
    16. Footer Section
        16.1 Footer Top
        16.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;
}
img {
    max-width: 100%;
}
.chipsofic-content-block {
    padding: 65px 0 95px;
}
.section-gray {
    background-color: #F8F8F8;
}

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

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

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

.chipsofic-dealer-btn:hover {
    background: transparent;
    border: 1px solid #fff;
    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;
}

.chipsofic-icon-btn {
    background: #fe7e17;
    border: 1px solid #fe7e17;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    margin-top: 10px;
    padding: 15px 40px;
    text-transform: uppercase;
}

.chipsofic-icon-btn:hover {
    background: #333;
    border: 1px solid #333;
    color: #fff;
}

.chipsofic-icon-btn i.fa {
    padding-left: 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #fff;
}

.chipsofic-icon-btn:hover i.fa {
    padding-left: 15px;
}

.pricing-table-item.featured .chipsofic-fullwidth-btn {
    background: #232323;
    border: 1px solid #232323;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    padding: 12px;
    text-transform: uppercase;
    width: 100%;
    
}
.pricing-table-item.featured .chipsofic-fullwidth-btn:hover {
    background: transparent;
    border: 1px solid #232323;
    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;
}
.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;
}
.main-menu .active a {
    color: #fe7e17;
}
.responsive-menu-wrap {
    display: none;
}

/*-----------------------------
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;
}
.top-area .btn:hover {
    background: rgba(0,0,0,.3);
    color: #fff;
}

/*-----------------------------
6  About Us Section
-------------------------------*/
.about-us-section a {
    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: 380px;
    transition: all 0.9s;
    width: 100%;
}
.about-us-section img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.about-us-section p {
    padding-top: 5px;
}

/*-----------------------------
7. Why Choose Us Section
-------------------------------*/

.choose-our-chips-content-area {
    margin-top:20px;
}

.choose-our-chips-content-area h3 {
  font-weight: 700;
}

.single-feature-item {
    margin-top: 30px;
}

.single-feature-item i.fa {
    font-size: 40px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-feature-item:hover i.fa {
    color: #000;
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
}

/*-----------------------------
8. Dealer Section
-------------------------------*/
.dealer-block {
    background: url('assets/img/dealer-bg.jpg') no-repeat fixed center;
    background-size: cover;
    color: #fff;
    padding: 65px 0;
}

.dealer-block .section-title h1, .dealer-block .chipsofic-subtitle {
    color: #fff;
}

.dealer-application {
    background: rgba(254,126,23,.9);
    border-radius: 5px;
    color: #fff;
    padding: 10px 30px 25px;
    text-align: center;
}

.dealer-application h3 {
    color: #fff;
}


/*-----------------------------
9. Commission Section
-------------------------------*/

.pricing-table-item {
    border: 1px solid #ccc;
    margin-top: 60px;
    padding: 15px 30px 35px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.pricing-table-item:hover {
    margin-top: 30px;
    box-shadow: 0 0 5px rgb(204,204,204);
}
.pricing-table-item h3 {
  text-align: center;
  text-transform: uppercase;
}
.pricing-table-item ul {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}
.pricing-table-item ul li i.fa {
  padding-right: 10px;
}
.pricing-table-item .price span {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: 80px;
  line-height: 34px;
}
.pricing-table-item .price .per-month {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  padding-top: 8px;
}
.pricing-table-item .price i.fa {
  font-size: 78px;
  font-weight: bold;
}

.pricing-table-item .price ul {
    color: #232323;
    margin: 25px auto;
    width: 160px;
}
.pricing-table-item .price ul li {
  float: left;
  display: block;
}

.pricing-table-item.featured {
    background: #fe7e17;
    border: 1px solid #fe7e17;
    box-shadow: 0 0 5px rgb(204,204,204);
    color: #fff;
    margin-top: 50px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

.pricing-table-item.featured:hover {
    margin-top: 30px;
}

.pricing-table-item.featured h3, .pricing-table-item.featured .price ul {
    color: #fff;
}

.pricing-table-item.featured .pricing-content {
    border-top: 1px solid #fff;
}

.pricing-content {
    border-top: 1px solid #ccc;
    margin-top: 15px;
    padding-top: 20px;
}

/*-----------------------------
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 {
    font-size: 25px;
    color: #333333;
}
.single-team-item 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-bg-1 {
    background: url('assets/img/testimonial-bg.jpg') no-repeat fixed center;
    background-size: cover; 
}

.testimonial-section-heading p {
    font-style: normal;
    padding: 5px 20px;
    text-align: center;
}
.testimonial-slider-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-slides .owl-nav div {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    color: #ffffff;
    font-size: 19px;
    height: 40px;
    line-height: 1.5;
    margin-top:20px;
    opacity: 0.8;
    position: absolute;
    text-align: center;
    width: 40px;
}

.testimonial-slides .owl-nav {
    margin: auto;
    width: 60px;
}

.testimonial-slides .owl-nav div.owl-next {
    margin-left: 25px;
}
.testimonial-slides .owl-nav div:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.testimonial-slider-wrapper ul {
    margin-top: 15px;
}
.testimonial-slide-item-table {
    display: table;
    height: 100%;
    width: 100%;
}
.testimonial-slide-item-tablecell {
    display: table-cell;
    vertical-align: middle;
}

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

.testimonial-slider-wrapper .owl-carousel .owl-item img {
    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;
}

.testimonial-slides {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    margin-top: 30px;
    padding: 20px 7px;
}

.testimonial-slides h4 {
    color:#fff;
    font-style: normal;
    font-size: 17px;
    text-align: center;
    text-transform: uppercase;
}
.testimonial-slides h4 span {
    color:#fff;
    display: block;
    text-transform: none;
    font-weight: normal;
    margin-top: 10px;
    font-size: 14px;
}

/*-----------------------------
13. 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;
}

/*-----------------------------    
14. 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%;
}

/*-----------------------------
15. 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;
}

/*-----------------------------
16. Footer Section
-------------------------------*/

/* 16.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;
}
        
/* 16.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);
}