/* --------------------------------------
=========================================
KINGBAKER'S - Multipurpose Landing Page
Version: 1.0
Designed By: CreativeCary
=========================================
-----------------------------------------

1. GLOABL-CSS
	1.1 IMPORT GOOGLE WEBFONT
	1.2 GENERAL-CSS
	1.3 TYPOGRAPHY

2. MASTER COLOR SETTINGS (TO CHANGE ENTIRE THEME)
	2.1 BACKGROUND COLOR SETTINGS
	2.2 BORDER COLOR SETTINGS
	2.3 TEXT COLOR SETTINGS 

3. PRELOADER 
	3.1 LOADING
	3.2 LOADING ANIMATION

4. SECTION CSS

5. HEADER SECTION

6. HAND MADE SECTION

7. CELEBRATIONS SECTION

8. OUR SPECIALITY SECTION

9. CLIENT SECTION

10. CONTACT FORM SECTION

10. FOOTER SECTION

11. RESPONSIVE FIXES


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

/* --------------------------------------
=========================================
   1. GLOABL - CSS
=========================================
-----------------------------------------*/

/*---------------------------------------
   1.1 IMPORT GOOGLE WEBFONT               
-----------------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,500,900);
 @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300);
/*---------------------------------------
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Slab', serif;
-----------------------------------------*/

/*---------------------------------------
   1.2 GENERAL - CSS               
-----------------------------------------*/

body {
	font-size: 16px; /* PIXEL FALLBACK */
	font-size: 1.6rem;
	line-height: 1.5;
}

button {
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	border: none;
	text-transform: uppercase;
	font-weight: bold;
	margin-top:20px;
	padding: 15px 40px;
}

iframe {
	border: none;
}

.clear-top{
	margin-top:0;
	padding-top:0;
}

.clear-bottom{
	margin-bottom:0;
	padding-bottom:0;
}

.form-group {
    margin-bottom: 0;
}
.container{
	z-index:0;
}

/*---------------------------------------
   1.3 TYPOGRAPHY               
-----------------------------------------*/
	
body {
	font-family: 'Roboto', serif;
}

h1, h2, h3, h4, h5, h6, small, strong, ul.time-list, .product-box .rate, ul.time-list li, .contact p strong, .contact strong, .contact p em, .footer-form input, .footer-form textarea, footer p strong, button {
	font-family: 'Roboto Slab', serif;
}

h1 {
	font-size: 70px; /* PIXEL FALLBACK */
	font-size: 7rem;
	font-weight: bold;
	margin-top: 70px;
}

h2 {
	font-size: 48px; /* PIXEL FALLBACK */
	font-size: 4.8rem;
	font-weight: bold;
	margin: 0;
}

h3 {
	font-size: 24px; /* PIXEL FALLBACK */
	font-size: 2.4rem;
	font-weight: bold;
}

h4 {
	font-size: 26px; /* PIXEL FALLBACK */
	font-size: 2.6rem;
	font-weight: bold;
	text-transform: uppercase;
}

p small {
	font-size: 12px; /* PIXEL FALLBACK */
	font-size: 1.2rem;
}

/* --------------------------------------
=========================================
   2. MASTER COLOR SETTINGS
=========================================
-----------------------------------------*/

/*---------------------------------------
   2.1 BACKGROUND COLOR SETTINGS               
-----------------------------------------*/
body { background: #eeeff1; }

#loading, .hand-made, .our-speciality, .contact { background-color: #fef2eb; }

.overlay { background:rgba(0,0,0,0.5);}

.footer-form button, footer { background: #140d0d; }

.footer-form button:hover { background: #000; }

.header-right-box, .company, .company:before, .company:after, .cake-top, .product-box .rate, .footer-form, ul.footer-social li, button { background-color: #2b3654; }

.product-box:hover { background-color: #; }

.cake-box { background-color: #fffcf4; }

.error{ background:#e2574c; }

.success{ background:#42b089; }

.footer-form input, .footer-form textarea{ background:#fff; }

button:hover { background: #151822;}

/*---------------------------------------
   2.2 BORDER COLOR SETTING            
-----------------------------------------*/	

.client-image img{ border-color:#2b3654; }

/*---------------------------------------
   2.3 TEXT COLOR SETTINGS               
-----------------------------------------*/
h1, .celebrations h2, body, .client h3, .footer-form h3, .error, .success, ul.footer-social li i { color: #fff; }

h2, h3, ul.time-list li, .contact p em, .footer-form input, .footer-form textarea { color: #533537; }

.product-box:hover h3, .product-box:hover p, .client p { color: #354053; }

#object [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after, ul.time-list li span, .contact p strong, .contact strong { color:#2b3654; }

.hand-made p, .cake-box p, .product-box p { color:#7c5e60; }

/* --------------------------------------
=========================================
   3. PRELOADER
=========================================
-----------------------------------------*/

/*---------------------------------------
   3.1 LOADING               
-----------------------------------------*/

#loading{
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	margin-top: 0px;
	top: 0px;
}

#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
}

#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 130px;
	width: 130px;
	margin-top: -100px;
	margin-left: -100px;
}

#object{
	width: 130px;
	height: 130px;
	-webkit-animation: animate 1s infinite ease-in-out;
	animation: animate 1s infinite ease-in-out;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	text-align:center;
}

#object [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
	font-size:130px !important;
	line-height:130px;

}
/*---------------------------------------
   3.2 LOADING ANIMATION               
-----------------------------------------*/

@-webkit-keyframes animate {
  0% { -webkit-transform: perspective(0px); }
  100% { -webkit-transform: perspective(0px) rotateY(-180deg); }
}

@keyframes animate {
  0% { 
    transform: perspective(0px) rotateY(0deg);
    -webkit-transform: perspective(0px) rotateY(0deg) ; 
  }  
  100% { 
    transform: perspective(0px) rotateY(-180deg) ;
    -webkit-transform: perspective(0px) rotateY(-180deg);
  }
  
}

/* --------------------------------------
=========================================
   4. SECTION CSS
=========================================
-----------------------------------------*/

section {
	padding: 100px 0;
	text-align: center;
}

.separator {
	background: url(../img/separator.png) no-repeat;
	width: 176px;
	height: 35px;
	display: inline-block;
	margin: 30px 0;
}

.separator.white {
	background: url(../img/separator-white.png) no-repeat;
}

/* --------------------------------------
=========================================
   5. HEADER SECTION
=========================================
-----------------------------------------*/

header {
	background: url(../img/header-bg.jpg) no-repeat bottom fixed;
	background-size: cover;
}

.company {
  width: 222px;
  height: 230px;
  padding-top: 15px;
  position: relative;
  text-align: center;
}

.company:before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 20px;
  width: 51%;
  -webkit-transform: skew(0deg, -8deg);
  -moz-transform: skew(0deg, -8deg);
  -ms-transform: skew(0deg, -8deg);
  -o-transform: skew(0deg, -8deg);
  transform: skew(0deg, -8deg);
}

.company:after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 0;
  height: 20px;
  width: 51%;
  -webkit-transform: skew(0deg, 8deg);
  -moz-transform: skew(0deg, 8deg);
  -ms-transform: skew(0deg, 8deg);
  -o-transform: skew(0deg, 8deg);
  transform: skew(0deg, 8deg);
}

.chef-image {
	text-align:center;
	margin-top:10px;
}

.chef-image img {
	width: 100%;
	max-width: 530px;
}

.header-right-box {
	padding: 25px;
}

/* --------------------------------------
=========================================
   6. HAND MADE SECTION
=========================================
-----------------------------------------*/

.big-cake img {
	width: 100%;
	max-width: 630px;
}

/* --------------------------------------
=========================================
   7. CELEBRATIONS SECTION
=========================================
-----------------------------------------*/
	
.celebrations {
	background: url(../img/celebrations-bg.jpg) center center fixed;
	background-size: cover;
	padding:0;
}

.celebrations .overlay{
	padding:100px 0;
}

.cake-box {
	padding: 0 0 50px;
	margin-top: 50px;
}

.cake-top {
	height: 205px;
	line-height: 205px;
}

.cake-box h3 {
	margin: 30px 20px 10px 20px;
}

.cake-box p {
	padding: 0 20px;
}

/* --------------------------------------
=========================================
   8. OUR SPECIALITY SECTION
=========================================
-----------------------------------------*/	

.our-speciality .separator {
	margin-bottom: 50px;
}

.product-box {
	padding: 0 0 10px;
	position: relative;
}

.product-box img {
	width: 100%
}

.product-box .rate {
	position: absolute;
	line-height: 25px;
	font-size: 16px;
	padding:0 8px;
	font-weight: bold;
}

.product-box h3, .product-box p {
	padding-left: 20px;
	padding-right: 20px;
}

/* --------------------------------------
=========================================
   9. CLIENT SECTION
=========================================
-----------------------------------------*/	

.client {
	background: url(../img/client-bg.jpg) no-repeat center fixed;
	background-size: cover;
	position:relative;
	padding:0;
}

.client .overlay{
	padding:100px 0 200px 0;
	color:#FFF !important;
}

.client em, .client p {color:#FFF !important;}

.client-image {
	margin: 0 0 20px;
}

.client-image img {
    border-bottom-width: 5px;
    border-style: solid;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -khtml-border-radius: 100px;
}

.client p {
	max-width: 850px;
	display: inline-block;
}

/* --------------------------------------
=========================================
   10. CONTACT FORM SECTION
=========================================
-----------------------------------------*/
		
.contact {
	text-align: left;
	padding-bottom: 0px;
}

ul.time-list {
	padding: 0px;
}

ul.time-list li {
	list-style:none;
	font-size: 14px;
	font-weight: bold;
	line-height: 24px;
	padding: 0px;
}

ul.time-list li span {
	float: left;
	width: 100px;
}

.contact p strong, .contact strong {
	font-size: 14px;
	font-weight: bold;
}

.contact p em {
	font-size: 14px;
}

.footer-form {
	margin: -200px 0 0;
    padding: 60px 30px;
	text-align: center;
}

.footer-form h3 {
	text-transform: uppercase;
}

.footer-form input, .footer-form textarea {
	width: 100%;
	line-height: 50px;
	border: none;
    margin: 20px 0 10px 0;	
	padding: 0 15px;
}

.footer-form button {
	margin-top: 20px;
	width: 100%;
}

.error{
	text-align:center;
	line-height:50px;
	margin-bottom:15px;
}

.success{
	text-align:center;
	line-height:50px;
	margin-bottom:15px;
}
	
.girl-image {
    margin: -80px 0 0 -72px;
}
/* --------------------------------------
=========================================
   11. FOOTER SECTION
=========================================
-----------------------------------------*/	

footer {
	padding: 50px 0;
	text-align: center;
}

ul.footer-social {
	display: inline-block;
	margin: 0px 0 20px;
	padding: 0px;
}

ul.footer-social li {
	display: inline-block;
	margin: 0px 10px;
	width: 40px;
	line-height: 40px;
}

ul.footer-social li i {
	font-size: 20px;
}

footer p strong {
	font-weight: normal;
}

/* --------------------------------------
=========================================
   12. RESPONSIVE FIXES
=========================================
-----------------------------------------*/	

/*---------------------------------------
   12.1 SMALLER THAN 1200PX               
-----------------------------------------*/

@media only screen and (max-width: 1199px) {
	
.chef-image {
	margin: 100px 0 0 10px;
}

.product-box .rate {
    line-height: 50px;
    font-size: 26px;
    padding: 0 10px;
}
.footer-form {
	margin:0;
}

.client .overlay {
    padding: 100px 0 100px 0;
}

.girl-image {
    display:none;
}

.contact {
    padding-bottom: 100px;
}

}	

/*----------------------------------------------
   12.2 LARGER THAN 768 AND SMALLER THAN 992PX               
-----------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
button {
	padding: 10px 20px;
}

.chef-image {
	margin: 300px 0 0 10px;
}

.big-cake img {
    margin-top: 150px;
}

.girl-image {
	margin: 163px 0 0 -71px;
}

}

/*---------------------------------------
   12.3 SMALLER THAN 768PX               
-----------------------------------------*/

@media only screen and (max-width: 768px) {
	

.footer-form {
	padding: 30px;
}

.chef-image {
    margin: 50px 0 0 10px;
}

.big-cake img {
	margin-top:50px;
}

.product-box .rate {
	line-height: 80px;
	font-size: 36px;
	padding:0 15px;
}

.float-fix{
	display: flex;
    flex-direction: column-reverse;
}
	
.contact .clear-top{
	margin-top:50px;
}
	
}
/*---------------------------------------
   12.4 SMALLER THAN 480PX               
-----------------------------------------*/

@media only screen and (max-width: 480px) {
	
h1 {
	font-size: 5rem;
}

h2 {
	font-size: 3.5rem;
}

.product-box .rate {
    line-height: 50px;
    font-size: 26px;
    padding: 0 10px;
}

}