@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Raleway:wght@200;300;400;500;600;700&display=swap');

html {
    box-sizing: border-box
}

*,
:after,
:before {
    box-sizing: inherit
}

html {
    font-size: 16px
}

body {
    color: #3B2314;
    color: var(--color-black, #3B2314);
    background-color: #fff;
    background-color: var(--color-white, #fff);
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45
}

blockquote,
details,
dl,
ol,
p,
pre,
ul {
    margin-bottom: 1.25em
}

h1,
h2,
h3,
h4,
h5,
 {
    color: inherit;
    line-height: 1.15;
    margin: 2.75rem 0 1rem
}

.h1,
h1 {
    margin-top: 0;
    font-size: 1.802em
}

.h2,
h2 {
    font-size: 1.602em
}

.h3,
h3 {
    font-size: 1.424em
}

.h4,
h4 {
    font-size: 1.266em
}

.h5,
h5 {
    font-size: 1.125em
}



.text-small,
small {
    font-size: .833em
}

body,
button,
input,
select,
textarea {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%
}

a {
    color: #FF9B33;
    color: var(--color-primary, #FF9B33);
    text-decoration: none
}

a:focus,
a:hover {
    color: inherit
}


a[href^=tel] {
 color: #fff;
 text-decoration:inherit;
}

.button {
    background-color: #FF9B33;
    background-color: var(--color-primary, #FF9B33);
    padding: 12px 32px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 0;
    min-width: 180px
}

.button.outline {
    background-color: transparent;
    border: 2px solid #fff
}

.button.outline,
.button:active,
.button:focus,
.button:hover {
    color: #fff
}

.banner {
    
    min-height: 600px;
    display: flex;
    align-items: center
}


.banner-full-w {
	width:100%;
	
	text-align:center;
}

.banner-wrapper {
	width:965px;
    
    
    
     
  margin: 0 auto;
}



@media (max-width: 600px) {
	
.banner-wrapper {
	width:100%;
	
}
}







.full-w {
	width:100%;
	background-color:#fff;
	text-align:center;
}

.wrapper-a {
	width:965px;
	
	padding:40px 0 ;
    
    
    
     
  margin: 0 auto;
}



@media (max-width: 600px) {
	
.wrapper-a {
	width:100%;
	
}


.wrapper-a img {
	
	width:600px;
	height:auto;
	
}

}

.banner.banner-overlay:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .4
}

.monaka-header.monaka-header-overlay-dark-bg~#content .banner,
.monaka-header.monaka-header-overlay-light-bg~#content .banner,
.monaka-header.monaka-header-transparent-dark~#content .banner,
.monaka-header.monaka-header-transparent-light~#content .banner {
    height: 100vh
}

@media screen and (min-width:1001px) {
    .monaka-header-center-3~#content .banner {
        height: calc(100vh - 170px)
    }
    .monaka-header-center-3.monaka-header-overlay-dark-bg~#content .banner,
    .monaka-header-center-3.monaka-header-overlay-light-bg~#content .banner,
    .monaka-header-center-3.monaka-header-transparent-dark~#content .banner,
    .monaka-header-center-3.monaka-header-transparent-light~#content .banner {
        height: 100vh
    }
}

.banner-image {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    max-width: 100%;
    pointer-events: none
}

.banner-content {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    align-self: center
}

.banner-content>div {
    flex: 1;
    text-align: center
}

.banner-content>div h1,
.banner-content>div h2 {
    color: #fff;
    margin: 0
}

.banner-content>div h1 {
    font-weight: 700;
    font-size: 72px
}

.banner-content>div h2 {
    font-weight: 400;
    font-size: 32px
}

.banner-content>div>div {
    margin-top: 40px
}

.banner-content>div .button {
    margin: 0 5px
}

.demo,
.features {
	color:#805D3C;
    margin: 0
}

.demo .cabecera{
	width:960px;
	min-height:375px;
	margin:0 auto;
	position:relative;
	background:url(../img/bg-desayuno.jpg)  ;
	margin-bottom:60px;
}


.demo .cabecera .foto{
	position:absolute;
	right:0;
	top:20px;
	width:450px;
	min-height:408px;
}

.demo .cabecera .desayuno{
	position:absolute;
	
	left:30px;
	top:160px;
	width:auto;
	min-height:100px;
}


@media (max-width: 500px) {
	
	.demo .cabecera {
	width: 501px;
	
}


.demo .cabecera .foto{
	position:absolute;
	right:0;
	top:20px;
	width:380px;
	min-height:345px;
	opacity: .7
}

}
















.demo .cabecera-sand{
	width:960px;
	min-height:680px;
	margin:0 auto;
	position:relative;
	background:url(../img/bg-sandwich.jpg)  ;
	margin-bottom:60px;
}
.demo .cabecera-sand h2{
	font-family: 'Raleway', sans-serif;
	color:#674840;
	font-size:100px;}
	
	.demo .cabecera-sand h3{
	font-family: 'Dancing Script', sans-serif;
	color:#888080;
	line-height:0;
	font-size:63px;}

.demo .cabecera-sand .foto{
	position:absolute;
	right:0;
	top:20px;
	width:450px;
	min-height:408px;
}

.demo .cabecera-sand .sandwich{
	position:absolute;
	
	right:60px;
	top:530px;
	width:auto;
	min-height:100px;
}


@media (max-width: 500px) {
	
	.demo .cabecera-sand {
	width: 501px;
	min-height:355px;
	background:url(../img/bg-sandwich-m.jpg) no-repeat  ;
}


.demo .cabecera-sand .foto{
	position:absolute;
	right:0;
	top:20px;
	width:380px;
	min-height:345px;
	opacity: .7
}


.demo .cabecera-sand h2{
	font-family: 'Raleway', sans-serif;
	color:#674840;
	font-size:60px;}
	
	.demo .cabecera-sand h3{
	font-family: 'Dancing Script', sans-serif;
	color:#888080;
	line-height:0;
	font-size:50px;}



.demo .cabecera-sand .sandwich{
	position:absolute;
	
	right:60px;
	top:270px;
	width:auto;
	min-height:100px;
}

}





















.demo .cabecera-platos{
	width:960px;
	min-height:400px;
	margin:0 auto;
	position:relative;
	background:url(../img/bg-platos.jpg)  ;
	margin-bottom:60px;
}


.demo .cabecera-platos .foto{
	position:absolute;
	left:-96px;
	top:80px;
	width:450px;
	min-height:420px;
}

.demo .cabecera-platos .platos{
	position:absolute;
	
	right:115px;
	top:80px;
	width:auto;
	min-height:100px;
}


.demo .cabecera-platos h2{
	font-family: 'Raleway', sans-serif;
	color:#E9E4E0;
	font-size:70px;}
	
	
	
	.demo .cabecera-platos h3{
	font-family: 'Dancing Script', sans-serif;
	color:#E9E4E0;
	line-height:0;
	font-size:50px;}


@media (max-width: 500px) {
	
	.demo .cabecera-platos {
	width: 501px;
	min-height:350px;
}


.demo .cabecera-platos .foto{
	position:absolute;
	left:-105px;
	top:30px;
	width:380px;
	min-height:345px;
	opacity: .6
}


.demo .cabecera-platos h2{
	font-family: 'Raleway', sans-serif;
	color:#fff;
	line-height:55px;
	margin-bottom:15px;
	font-size:60px;}
	
	.demo .cabecera-platos h3{
	font-family: 'Dancing Script', sans-serif;
	color:#fff;
	text-align:center;
	line-height:0;
	font-size:50px;}
	
	
	.demo .cabecera-platos .platos{
	position:absolute;
	
	right:35px;
	top:120px;
	width:auto;
	min-height:100px;
}

}









































.demo .cabecera-postres{
	width:960px;
	min-height:400px;
	margin:0 auto;
	position:relative;
	background:url(../img/bg-postre.jpg)  ;
	margin-bottom:60px;
}


.demo .cabecera-postres .foto{
	position:absolute;
	left:-96px;
	top:80px;
	width:350px;
	min-height:420px;
}

.demo .cabecera-postres .platos{
	position:absolute;
	
	right:250px;
	top:80px;
	width:auto;
	min-height:100px;
}


.demo .cabecera-postres h2{
	font-family: 'Raleway', sans-serif;
	color:#E9E4E0;
	font-size:90px;}
	
	
	
	.demo .cabecera-postres h3{
	font-family: 'Dancing Script', sans-serif;
	color:#E9E4E0;
	line-height:0;
	font-size:70px;}


@media (max-width: 500px) {
	
	.demo .cabecera-postres {
	width: 501px;
	min-height:350px;
}


.demo .cabecera-postres .foto{
	position:absolute;
	left:-105px;
	top:30px;
	width:380px;
	min-height:345px;
	opacity: .6
}


.demo .cabecera-postres h2{
	font-family: 'Raleway', sans-serif;
	color:#fff;
	line-height:55px;
	margin-bottom:15px;
	font-size:60px;}
	
	.demo .cabecera-postres h3{
	font-family: 'Dancing Script', sans-serif;
	color:#fff;
	text-align:center;
	line-height:0;
	font-size:50px;}
	
	
	.demo .cabecera-postres .platos{
	position:absolute;
	
	right:75px;
	top:130px;
	width:auto;
	min-height:100px;
}

}
















.demo h4,
.features h4 {
	font-family: 'Raleway', sans-serif;
    font-weight: 500;
	font-size:15px;
	color:#3B2416;
	text-align: left;
    margin: 5px 0 5px;
	min-width:300px;
}


.demo h3,
.demo h4,
.features h2,
.features h3,
.features h4 {
    font-family: 'Raleway', sans-serif;
	
}

/*.demo h3,
.demo h4,
.features h3,
.features h4 {
    opacity: .8
}*/
.demo span.titular,
.demo span.titular-space{
	font-weight:600;
	font-family: 'Raleway', sans-serif;
	line-height:40px;
	color: #603813;	
	font-size:20px;}
	

.demo span.titular-ensalada,
.demo span.titular-ensalada-space{
	font-weight:400;
	font-family: 'Raleway', sans-serif;
	line-height:60px;
	color: #A08064;
	
	width:300px;	
	font-size:40px;}	

@media (max-width: 500px) {
	
	.demo span.titular-space{
		display:none;

}

.demo span.titular-ensalada-space{
		display:none;

}
}
	
.demo h2,
.features h2 {
    text-align: center;
	color:#fff;    
    font-size: 118px;
     margin: 0.25rem 0;
	font-family: 'Dancing Script', sans-serif;
}

.demo h3,
.features h3 {
    text-align: right;
	color:#fff;    
    font-weight:300;
     margin: 0;

}

.demo ul,
.features ul {
    padding: 0;
    margin: 0 auto;
    max-width: 1280px;
    text-align: center;
    list-style: none
}

.demo ul p,
.features ul p {
    text-align: left;
	margin:0 0 25px 0;
	font-size:14px;

}

.demo li,
.features li {
    vertical-align: top;
    display: inline-block;
    margin: 0 10px
}

.demo section,
.features section {
    max-width: 300px;
    text-align: left
}

.demo section p,
.features section p {
    opacity: .5
}

.demo figure,
.features figure {
    max-width: 300px;
    margin: 0!important;
    position: relative
}

.demo img,
.features img {
    display: block;
    max-width: 100%;
    /*opacity: .4;
    transition: opacity .25s ease*/
}

.demo img:hover,
.features img:hover {
    opacity: 1
}

.demo .soon,
.features .soon {
    opacity: .1;
    background-color: #000;
    display: block;
    width: 300px;
    height: 178px
}

.demo figcaption,
.features figcaption {
    display: block;
    margin-top: 20px;
    font-weight: 700
}

.features h4 {
    margin: 0 0 15px
}

#configurator-switch {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none
}

.configurator {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center
}

.configurator ul {
    margin: 0;
    padding: 15px;
    list-style: none
}

.configurator li {
    margin-top: 4px;
    font-size: 12px
}

.configurator .configurator-close,
.configurator .configurator-open {
    background-color: #fff;
    border-top: 1px solid #cbcbcb;
    border-bottom: 1px solid #cbcbcb;
    border-left: 1px solid #cbcbcb;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42px;
    height: 42px;
    margin: auto 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    visibility: hidden;
    cursor: pointer;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease;
    will-change: transform;
    z-index: 1
}

.configurator .configurator-close svg,
.configurator .configurator-open svg {
    width: 24px;
    height: 24px;
    fill: #3B2314;
    fill: var(--color-black, #3B2314)
}

.configurator-reset {
    color: grey;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 700;
    width: 40px
}

.configurator-reset:hover {
    color: currentColor;
    text-decoration: underline
}

.configurator-inner {
    background-color: #fff;
    border: 1px solid #cbcbcb;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    will-change: transform;
    width: 220px;
    height: 540px;
    padding: 40px 10px 20px
}

.configurator-scroll {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    max-height: 480px;
    margin: auto;
    background: linear-gradient(#fff 30%, hsla(0, 0%, 100%, 0)), linear-gradient(hsla(0, 0%, 100%, 0), #fff 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), transparent), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), transparent) 0 100%;
    background: linear-gradient(#fff 30%, hsla(0, 0%, 100%, 0)), linear-gradient(hsla(0, 0%, 100%, 0), #fff 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), transparent), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), transparent) 0 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll
}

.configurator-scroll::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px
}

.configurator-scroll::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #c9c9c9
}

li.configurator-category {
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px
}

li.configurator-category:first-child {
    margin-top: 0
}

li.configurator-separator {
    height: 1px;
    margin: 10px 0
}

input:checked~.configurator-close {
    visibility: visible !important;
    -webkit-transform: translateX(-220px);
    transform: translateX(-220px)
}

input:checked~.configurator-close svg {
    opacity: .4
}

input:not(:checked)~.configurator-open {
    visibility: visible !important
}

input:checked~.configurator-inner {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

#footer {
    background-color: #FFAD33;
    background-color: var(--color-black, #FFAD33);
    display: flex;
    align-items: center;
    height: 200px;
}

#footer .content {
	width: 1024px;
	text-align: center;
    margin: auto;
}
@media (max-width: 800px) {
	
	#footer .content {
	width: 400px;
	text-align: center;
    margin: auto;
}
}


#footer .contacto {
    float: left;
}

#footer .icon {
	float: right;
}

@media (max-width: 800px) {
	
#footer .icon {
	margin-top:15px;
	float: left;
}
}


#footer p {
    color: #fff;
    color: var(--color-white, #fff);
    flex: 1;
    text-align: left;
    
    margin: 0
}





.tortas {
    background-color: #F2F0EF;
    background-color: var(--color-black, #F2F0EF);
	margin-top:35px;
    display: flex;
    align-items: center;
    
}

.tortas .thecakehouse {
	width: 965px;
	padding:35px 0;
	background:url(../img/tortas-bg.png) top -1px right no-repeat;
	text-align: center;
	min-height:315px;
    margin: auto;
}

.tortas .thecakehouse img {
	
	margin:25px 0;
	
	}

.tortas .thecakehouse i {
	font-size:36px;
	color:#DD92B0;
	padding:15px 10px;
	
	}
	
	.tortas .thecakehouse i:hover {
	
	color:#805D3B;
	
	
	}

@media (max-width: 800px) {
	
	.tortas .thecakehouse {
	width: 400px;
	text-align: center;
    margin: auto;
}
}






































.indexhome {
    background-color: #F2F0EF;
    background-color: var(--color-black, #F2F0EF);
	margin-top:35px;
    display: flex;
    align-items: center;
    
}

.indexhome .tch {
	width: 965px;
	padding:35px 0;
	background:url(../img/index-bg.png) top -1px right no-repeat;
	text-align: center;
	min-height:315px;
    margin: auto;
}

.indexhome .tch img {
	
	margin:25px 0;
	
	}
	
	.indexhome .tch .st {
		font-weight:600;
		color:#3B2314;
	
	}

.indexhome .tch i {
	font-size:36px;
	color:#573B1C;
	padding:15px 10px;
	
	}
	
	.indexhome .tch i:hover {
	
	color:#805D3B;
	
	
	}

@media (max-width: 800px) {
	
	.indexhome .tch {
	width: 400px;
	text-align: center;
    margin: auto;
}
}


































.cafe {
    background-color: #DCD8D4;
    background-color: var(--color-black, #DCD8D4);
	
    display: flex;
    align-items: center;
    
}

.cafe .tch {
	width: 965px;
	
	
	text-align: center;
	min-height:315px;
    margin: auto;
}

.cafe .tch  h2{
	font-size:32px;
	font-family: 'Raleway', sans-serif;
	font-weight:400;
	color:#805D3B;
	text-align:center;
	
}

.cafe .tch  h2 .curs{
	font-family: 'Dancing Script', sans-serif;
	font-size:100px;
	
}



.cafe .tch .pic {
	width: 565px;
	
	background:url(../img/cafe.jpg) no-repeat;
	text-align: center;
	min-height:645px;
	float:left;
}

.cafe .tch .txt {
	width: 400px;

	padding:50px 30px;
	color:#4D4D4D;
	background:url(../img/bg-cafe.png) left  bottom no-repeat;
	text-align: center;
	min-height:645px;
	float:left;
}

.cafe .tch img {
	
	
	
	}
	
	.cafe .tch .st {
		font-weight:600;
		color:#805D3B;
	
	}

.cafe .tch i {
	font-size:36px;
	color:#573B1C;
	padding:15px 10px;
	
	}
	
	.cafe .tch i:hover {
	
	color:#805D3B;
	
	
	}

@media (max-width: 800px) {
	
	.cafe .tch {
	width: 500px;
	text-align: center;
    margin: auto;
}

.cafe .tch .pic {
	width: 565px;
	
	background:url(../img/cafe.jpg) bottom no-repeat;
	text-align: center;
	min-height:385px;
	float:left;
}

.cafe .tch .txt {
	width: 400px;
	padding-top:5px;
	margin:0 40px;
	background:url(../img/bg-cafe.png) left  top no-repeat;
	min-height:550px;

}

}

























.contactos {
    background: #3A2313 ;
    display: flex;
    align-items: center;
    
}
.contactos .bg-contacto {
	width: 965px;
	
	background: url(../img/bg-contacto.jpg) no-repeat;
	
    margin: auto;
	
}
.contactos .tch {
	width: 700px;
	padding:35px 70px;
	background: #F2F1F0;
	color:#4D4D4D;
	text-align: center;
	min-height:315px;
    margin: auto;
	margin-top:180px;
}


.contactos .tch h2 {
	color:#FF9B33;
	font-family: 'Dancing Script', sans-serif;
	font-size:50px;
	
	}
	

.contactos .tch ul {
	list-style-type: none;
	padding:0;
	
	}	
	
	
.contactos .tch img {
	
	margin:25px 0;
	
	}

.contactos .tch a {
color:#4D4D4D;}

.contactos .tch i {
	font-size:22px;
	color:#805D3B;
	padding:15px 10px;
	
	}
	
	.contactos .tch i:hover {
	
	color:#805D3B;
	
	
	}

@media (max-width: 800px) {
	
	.contactos .tch {
	width: 450px;
	padding:35px 10px;
	text-align: center;
    margin: auto;
}
}