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

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.1
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. Product 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 Blog 單頁
    15. Coupon/Newsletter Section 優惠券/新聞欄
    16. Purchase Section 採購科
    17. Footer Section 頁腳部分
        17.1 Footer Top 頁腳頂部
        17.2 Copyright 版權
		

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


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

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Raleway:200,400,700,800');

body {
    color: #06a856;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
    color: #04723a;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
}
.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}
.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}
a {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.clear {
    clear: both;
}
iframe{
    border-width: 0px;
}
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: #04723a;
    font-family: 'Raleway', sans-serif;
    font-size: 23px;
    font-weight: 200;
}

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

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

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

.chipsofic-form-btn {
    background: #04723a;
    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: #034523;
    color: #fff;
}

.chipsofic-purchase-btn ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chipsofic-purchase-btn .fa {
  color: #fff;
  float: left;
  font-size: 30px;
  padding: 10px 20px 10px 15px;
}
.chipsofic-purchase-btn li {
  color: #fff;
  font-size: 16px;
  text-align: left;
  text-transform: uppercase;
}
.chipsofic-purchase-btn li span {
  font-weight: bold;
}

.chipsofic-purchase-btn {
  background: #f8e100;
  border-radius: 35px;
  padding: 12px 25px 10px;
  width: 50%;
}

.chipsofic-purchase-btn:hover {
  background: #04723a;
}

/*-----------------------------
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: #f8e100 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(4,114,58,1);
    border-bottom: 1px solid #f8e100;
}
.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: #70b173;
}
.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: 'Ralew bay', sans-serif;
}
.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: #f8e100;
    text-decoration: none;
}
.main-menu .active a {
    color: #f8e100;
}
.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: #f8e100;
    border: 1px solid #f8e100;
    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, 128, 128,.3);
    color: #fff;
}

/*-----------------------------
6  About Us Section
-------------------------------*/
.about-us-section a {
    color: #03582d;
    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;
}
.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;
}
.about-us-section p {
    padding-top: 5px;
}

/*-----------------------------
7. Product Section
-------------------------------*/

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

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

.choose-our-chips-content-area h3 {
    font-size: 24px;
    font-weight: 700;
}
.choose-our-chips-content-area .pricing {
    font-size: 17px;
}

.choose-our-chips-content-area .pricing span {
    font-weight: bold;
}

.choose-our-chips-content-area img {
    -moz-transition: all 0.9s;
    -webkit-transition: all 0.9s;
    max-width: 200px;
    padding: 6px;
    transition: all 0.9s;
}

/*-----------------------------
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: #f8e100;
    cursor:pointer;
}

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

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

.modal-dialog {
    width: 60%;
    max-width: 1150px;
}

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

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

.gallery-lightbox {
    display: block;
    position: relative;
}
.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: #fff;
    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: #f8e100 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.8;
    visibility: visible;
    z-index: 1;
}

.chipsofic-content-block.gallery-block {
    padding: 45px 0 0;
}
.gallery-area {
  margin-top: 50px;
}
.gallery-area .container-fluid, .gallery-area .col-lg-3, .gallery-area .col-md-6 {
  margin: 0;
  overflow: hidden;
  padding: 0;
}

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

.counter-block {
    background: #f8e100 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: #046433;
    display: block;
    margin-top: 50px;
}
.single-team-item h3 {
    color: #03532a;
    font-size: 24px;
    font-weight: 700;
}
.single-team-item h4 {
    color: #046433;
    font-size: 18px;
    font-weight: 300;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.single-team-item i.fa, .about-us-section i.fa {
    font-size: 25px;
    color: #03582d;
}
.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 #f8e100;
    transition: all 0.9s;
    width: 200px;
}

.single-team-item p {
    color: #046433;
}
.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; 
}

.circle-testimonial-item {
    background: rgba(0, 128, 128,.3);
    border: 1px dotted #034523;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    margin-top: 30px;
    padding: 20px 7px;
}
.circle-testimonial-item h4 {
    color:#fff;
    font-size: 18px;
    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;
}
.circle-testimonial-item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.testimonial-section-heading p {
    font-style: normal;
    padding: 5px 20px;
    text-align: center;
}
.testimonial-slider-wrapper {
    background-color: #03532a;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    font-size: 24px;
    padding: 60px 0px 90px;
    position: relative;
}
.testimonial-slider-wrapper.section-white {
    background-color: #fff;
    color: #03532a;
}
.testimonial-slider-wrapper.section-white .owl-nav div {
    color: #03532a;
}
.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 {
    float: right;
    margin-right: 50px;
}

.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 > h2 {
    margin: 0 0 30px;
    padding: 0;
    text-align: center;
}

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

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

/*-----------------------------
13. Blog Section
-------------------------------*/
.blog-bg-1 {
    background-image: url(assets/img/blog-bg-1.png)
}
.blog-bg-2 {
    background-image: url(assets/img/blog-bg-2.png)
}
.blog-bg-3 {
    background-image: url(assets/img/blog-bg-3.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: #03532a;
    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: #f8e100 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 #03582d;
    height: 45px;
}

.newsletter {
    margin-top: 25px;
}

/*-----------------------------
16. Purchase Section
-------------------------------*/

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

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

.purchase.now {
  margin-top: 50px;
}

.btn-right {
    float: right;
}

.btn-left {
    float: left;
}

/*-----------------------------
17. Footer Section
-------------------------------*/

/* 17.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: #034c27;
    border-top: 5px solid #f8e100;
}
.footer-top-area,
.footer-top-area a {
    color: #ffffff;
}
.footer-widget {
    padding: 40px 0;
}
.footer-widget i.fa {
    color: #f8e100;
    padding-right: 5px;
}
.footer-widget ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.footer-widget a:hover {
    color: #f8e100;
    text-decoration: none;
}
        
/* 17.2 Copyright */

.footer-copyright-area {
    background-color: #034c27;
    color: #ffffff;
    padding: 5px 0 15px;
}
.footer-copyright-area a {
    color: #ffffff;
}
.footer-copyright-area a:hover {
    color:#f8e100;
    text-decoration: none;
}

.go-top {
	background-color: rgba(0, 128, 128, 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);
}