/*---------------------------------------
   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: 100px;
}

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: #e3d8c9; }

.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: #3c3c3b; }

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

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

.error{ background:#e2574c; }

.success{ background:#42b089; }

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

button:hover { background: #8d143d; }

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

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

/*---------------------------------------
   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: #fef2eb; }

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

.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: 50px 0;
	text-align: center;
}

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

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

.separatoraperitivo {
	background: url(../img/separatore-aperitivo.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: 244px;
  height: 263px;
  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: 430px;
}

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

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

.big-cake img {
	width: 100%;
	max-width: 350px;
	padding-top:40px;
}

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

.celebrationspromo {
	background: url(../img/promo.jpg) center center fixed;
	background-size: cover;
	padding:0;
}

.celebrationspromo .overlay {
	padding:100px 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: 80px;
	font-size: 36px;
	padding:0 15px;
	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;
}

.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: 10px 0 5px 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: 0px 0 0 -30px;
}
/* --------------------------------------
=========================================
   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;
}
.inputSubmit {
	background-color:#cbbba0 !important;
}
.inputSubmit:hover {
	background-color:#7b6a58 !important;
	color:#fff;
}
.footer-logo {
	max-width: 300px;
	margin: auto;
}
.footer-logo img {
	width:100%;
}
footer a:link, footer a:visited {
	color:#fff;
}
footer a:hover {
	color:#e3d8c9;
}
/* --------------------------------------
=========================================
   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;
}

}