@import url('reset.css');
@import url('fonts.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:700');

.tLeft { text-align: left; }
.tCenter { text-align: center; }
.tRight { text-align: right; }
.tJustify { text-align: justify; }

.display-table {
	display: table;
	width: 100%;
}
.display-tCell {
	display: table-cell;
	vertical-align: top;
	width: 50%;
}

div.wrapper {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

body.home {
	background: #72BCC5 url('../img/home/marcupcakes_bg_inicio.png') repeat;
}
body.cupcakes {
	background: #DF7294 url('../img/cupcakes/marcupcakes_bg_cupcakes.png') repeat;
} 
body.pasteles {
	background: #FFCA73 url('../img/pasteles/marcupcakes_bg_pasteles.png') repeat;
}
body.delicias {
	background: #C6E583 url('../img/delicias/marcupcakes_bg_delicias.png') repeat;
}
body.novedades {
	background: #72BCC5 url('../img/novedades/marcupcakes_bg_novedades.png') repeat;
}
h1 {
	display: none;
}
header nav ul {
	padding-top: 25px;
}
header nav ul li {
	display: inline-block;
	vertical-align: middle;
}
header nav ul li:before {
	content: '';
	width: 50px;
	height: 15px;
	margin: 0 10px;
	display: inline-block;
	vertical-align: middle;
	background: transparent url('../img/generales/marcupcakes_separador.png') no-repeat center center;
}
header nav ul li.noSeparar:before {
	content: '';
	width: auto;
	height: auto;
	display: inline-block;
	vertical-align: middle;
	background: none;
	margin: 0;
}
header nav ul li a {
	font-family: 'foxinthesnow';	
	text-decoration: none;
	color: #FFFFFF;
	font-size: 1.5em;

	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}
header nav ul li a:hover {
	color: #3D738D;
}
header nav ul li a img {
	width: 150px;
	position: relative;
	z-index: 1;
}
section.cuadros nav ul li {
	display: inline-block;
	vertical-align: top;
	width: 250px;
	height: 250px;
}
section.cuadros nav ul li a {
	position: relative;
	display: block;
	width: 250px;
	height: 250px;
	overflow: hidden;
	color: #FFFFFF;
}
section.cuadros nav ul li a img {
	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
	transition: all 0.25s linear;
}
section.cuadros nav ul li a:hover img {
	-moz-transform: scale(1.125) rotate(-7.5deg);
	-webkit-transform: scale(1.125) rotate(-7.5deg);
	transform: scale(1.125) rotate(-7.5deg);
}
section.cuadros nav ul li a span {
	position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    line-height: 250px;
    padding: 5px 0;
	left: 0; right: 0;
	top: 0; bottom: 0;
	margin: auto;
	font-family: 'foxinthesnow';
	opacity: 0;

	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
	transition: all 0.25s linear;
}
section.cuadros nav ul li a:hover span {
	opacity: 1;
}
section.cuadros nav ul li a:hover span.cupcakes { 
	background: rgba(251, 246, 188, 0.75);
	color: #3D738D;
}
section.cuadros nav ul li a:hover span.delicias { 
	background: rgba(255, 255, 255, 0.75);
	color: #3D738D;
}
section.cuadros nav ul li a:hover span.pasteles { 
	background: rgba(220, 231, 251, 0.75);
	color: #3D738D;
}
section.cuadros {
	position: relative;
    margin-top: -40px;
}
section.cuadros nav ul li.amarillo { background: #FFCA73; }
section.cuadros nav ul li.rosa { background: #F27A96; }
section.cuadros nav ul li.verde { background: #BFDB80; }

section.catalogo {
	background: #FFF3E6;
	position: relative;
    margin-top: -40px;
	color: #993974
}
section.catalogo.cupcakes { padding: 20px 0; }
section.catalogo.pasteles { padding: 60px 0; }
section.catalogo.delicias { padding: 50px 0 20px; }

section.catalogo div.owl-carousel div.item {
	font-family: 'Noto Serif', serif;
	font-size: 0.75em;
	line-height: 1.25em;
}
section.catalogo.cupcakes div.owl-carousel div.item div.mod {
	padding-top: 10px;
	height: 190px;
}
section.catalogo.cupcakes div.owl-carousel div.item div.mod:nth-child(even) {
	padding-top: 0;
}
/*section.catalogo.delicias div.owl-carousel div.owl-item:nth-child(even) {
	position: relative;
	bottom: 50px;
}
section.catalogo.delicias div.owl-carousel div.owl-item:nth-child(odd) {
	position: relative;
	bottom: 0;
}*/
section.catalogo.cupcakes div.owl-carousel div.item div.mod {
	padding-bottom: 20px;
}

section.catalogo.armado div.content {
	padding: 25px;
}
section.catalogo.armado div.content h2 {
	font-family: 'foxinthesnow';
	font-size: 2.25em;
	margin: 30px 0;
}
section.catalogo.armado div.content div.display-table div.display-tCell {
	width: 33.33%;
}
section.catalogo.armado div.content div.display-table div.display-tCell h3 {
	font-family: 'Noto Serif', serif;
	font-size: 0.875em;
	margin-bottom: 25px;
}
section.catalogo.armado div.content div.display-table div.display-tCell h3 img {
	vertical-align: middle;
	width: 24px;
	height: 24px;
}
section.catalogo.armado div.content a.btn {
	display: inline-block;
	margin: 10px 0;
	padding: 10px 25px;
	text-decoration: none;
	background: #FFCA73;
	color: #FFFFFF;
	font-family: 'Noto Serif', serif;
	font-size: 0.75em;
}
section.catalogo.armado div.content a.btn.ck { background: #DF7294; }
#pan { background: url('../img/armado/pasteles/sprite.png') no-repeat -200px 0; }
#pan-ck { background: url('../img/armado/cupcakes/sprite.png') no-repeat -210px -210px; }
#cubierta { background: url('../img/armado/pasteles/sprite.png') no-repeat 0 -240px; }
#cubierta-ck { background: url('../img/armado/cupcakes/sprite.png') no-repeat -210px 0; }
#relleno { background: url('../img/armado/pasteles/sprite.png') no-repeat -200px -120px; }

section.subtitulo h2 {
	font-family: 'foxinthesnow';
	color: #FFFFFF;
	font-size: 6em;
	margin-top: 25px;
	color: #993974;
}
section.subtitulo nav ul {
	font-family: 'Noto Serif', serif;
}
section.subtitulo nav ul li:before {
	content: '·';
	color: #993974;
	margin: 0 10px;
}
section.subtitulo nav ul li:first-child:before {
	content: '';
	margin-left: 0;
}
section.subtitulo nav ul li {
	display: inline-block;
	vertical-align: middle;
	text-transform: uppercase;
}
section.subtitulo nav ul li.especial {
	display: block;
	margin-top: 5px;
}
section.subtitulo nav ul li.especial:before {
	content: ' ';
}
section.subtitulo nav ul li.especial.cup:before {
	margin: 0;
}
section.subtitulo nav ul li a {
	text-decoration: none;
	color: #993974;
	font-size: 0.85em;
	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
	transition: all 0.25s linear;
}
section.subtitulo nav ul li a:hover,
section.subtitulo nav ul li a.current {
	color: #FFFFFF;
}

div.separador_1 {
	margin-top: 50px;
	height: 30px;
	background: transparent url('../img/generales/marcupcakes_separador_form_1.png') repeat-x;
}
div.separador_2 {
	margin-top: 50px;
	height: 10px;
	background: transparent url('../img/generales/marcupcakes_separador_form_2.png') repeat-x;
}

section.conocenos,
section.novedades {
	background: #F27A96;
	position: relative;
    margin-top: -40px;
	color: #F7FCFE;
	font-size: 0.8125em;
}
section.conocenos div.display-table aside.display-tCell,
section.novedades div.display-table aside.display-tCell {
	padding: 40px 30px;
}
section.novedades div.display-table aside.display-tCell {
	padding: 0;
	position: relative;
}
section.novedades div.display-table aside.display-tCell img.poster {
	width: 100%;
	vertical-align: middle;
}
section.conocenos div.display-table aside.display-tCell article,
section.novedades div.display-table aside.display-tCell article {
	position: relative;
	font-family: 'Noto Serif', serif;
	line-height: 1.75;
}
section.conocenos div.display-table aside.display-tCell article p{
	margin: 25px;
}
section.novedades div.display-table aside.display-tCell article#paso-1 p {
	width: 90%;
    max-width: 275px;
    margin: 15px auto;
    line-height: 1.5;
}
section.novedades div.display-table aside.display-tCell article#paso-1 p.preview{
	margin-top: 85px;
}
section.novedades div.display-table aside.display-tCell article#paso-2,
section.novedades div.display-table aside.display-tCell article#paso-3 { display: none; }
section.novedades div.display-table aside.display-tCell article#paso-2 p,
section.novedades div.display-table aside.display-tCell article#paso-3 p {
	width: 90%;
    max-width: 275px;
    margin: 15px auto;
    line-height: 1.5;
}
section.novedades div.display-table aside.display-tCell article#paso-2 ul {
	margin-bottom: 10px;
}
section.novedades div.display-table aside.display-tCell article#paso-2 ul li {
	width: 90%;
    max-width: 300px;
    margin: 0 auto;
    line-height: 1.5;
} 
section.novedades div.display-table aside.display-tCell article#paso-2 p.mTop { margin-top: 85px; }
section.novedades div.display-table aside.display-tCell article#paso-3 p.mTop { margin-top: 85px; }
section.novedades div.display-table aside.display-tCell nav.paginador {
	position: absolute;
	width: 100%;
	bottom: 50px;
	left: 0;
}
section.novedades nav.paginador div.display-tCell {
	vertical-align: middle;
}
section.novedades nav.paginador ul li {
	display: inline-block;
	font-family: 'Noto Serif', serif;
	font-size: 0.875em;
}
section.novedades nav.paginador ul li span {
	display: block;
	cursor: pointer;
	width: 16px;
	height: 16px;
	line-height: 16px;
	border: solid 1px #F7FCFE;
	border-radius: 50%;
}
section.novedades nav.paginador ul li span.activo,
section.novedades nav.paginador ul li span:hover {
	background: #F7FCFE;
	color: #F27A96;
}
section.novedades nav.paginador a {
	text-decoration: none;
	color: #FFFFFF
}
section.conocenos div.display-table aside.display-tCell article p.no-mRight { margin-right: 0 }
section.conocenos div.display-table aside.display-tCell article p.no-mLeft { margin-left: 0 }
section.conocenos div.display-table aside.display-tCell article p img {
	display: block;
	margin: auto;
}
section.conocenos div.display-table aside.display-tCell article img#corazon {
	display: block;
	position: absolute;
	bottom: 0; left: -85px;
}
section.conocenos div.notas {
	display: block;
	width: 75%;
	max-width: 350px;
	margin: 0 auto;
	position: relative;
	padding-bottom: 50px;
}
section.conocenos div.notas p {
	font-family: 'Noto Serif', serif;
	line-height: 1.5;
}
section.conocenos div.notas span#nota-1,
section.conocenos div.notas span#nota-2 {
	display: block;
	position: absolute;
	width: 35px; 
	height: 35px;
}
section.conocenos div.notas span#nota-1 {
	top: -10px;
	left: -45px;
	background: transparent url('../img/conocenos/marcupcakes_nota1.png') no-repeat center center; 
}
section.conocenos div.notas span#nota-2 {
	top: -10px;
	right: -45px;
	background: transparent url('../img/conocenos/marcupcakes_nota2.png') no-repeat center center; 
}
section.contacto {
	background: #63B0BB;
	padding: 50px 0 20px;
}
section.contacto h2 {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	font-family: 'foxinthesnow';
	color: #FFFFFF;
	font-size: 2em;
}
section.contacto form,
section.contacto .form {
	width: 100%;
	max-width: 700px;
	margin: 25px auto 0;
	padding: 25px;
	background: rgba(255,255,255,0.25);
}
section.contacto div.row {
	display: table;
	width: 100%;
	margin: 5px 0;
}
section.contacto div.row div.lblField,
section.contacto div.row div.txtField {
	font-family: 'AauxProBoldSC', arial;
	text-transform: uppercase;
	display: table-cell;
	vertical-align: middle;
	color: #FFFFFF;
	font-size: 0.875em;
}
section.contacto div.row div.lblField.vTop {
	vertical-align: top;
	padding-top: 10px;
}
section.contacto div.row div.lblField { width: 15%; }
section.contacto div.row div.txtField { width: 85%; }

section.contacto div.row div.txtField input[type="text"],
section.contacto div.row div.txtField textarea {
	width: 100%;
	box-sizing: border-box;
	background: none;
	border: 0;
	background: rgba(99, 176, 187, 0.6);
	font-size: 1em;
	font-family: arial;
	line-height: 30px;
	color: #FFFFFF;
	padding: 0 5px;
	resize: none;
	outline: 0;
	font-family: 'Noto Serif', serif;
}
section.contacto div.row div.txtField input[type="reset"],
section.contacto div.row div.txtField input[type="submit"] {
	background: 0;
	border: solid 1px transparent;
	color: #FFFFFF;
	font-family: 'AauxProBoldSC', arial;
	text-transform: uppercase;
	font-size: 1em;
	padding: 6px 15px
}
section.contacto div.row div.txtField div.send {
	display: none;
}
section.contacto div.row div.txtField div.mTop {
	margin-top: 10px;
}
section.contacto div.row div.txtField input[type="reset"]:hover,
section.contacto div.row div.txtField input[type="submit"]:hover {
	background: 0;
	border-color: #FFFFFF;
}
section.contacto div.row div.txtField input[type="reset"]:focus,
section.contacto div.row div.txtField input[type="submit"]:focus {
	outline: 0;
}
section.contacto div.row div.txtField input[type="submit"] {
	background: #3D738D;
	margin-left: 2px;
}
section.contacto div.social ul {
	margin-top: 50px;
}
section.contacto div.social ul li{
	display: inline-block;
	vertical-align: top;
	text-align: center;
	width: 120px;

	color: #FFFFFF;
	font-family: 'AauxProBoldSC', arial;
	font-size: 1.125em;
}
section.contacto div.social ul li a {
	text-decoration: none;
	color: #FFFFFF;
	font-size: 0.75em;
}
section.contacto div.social ul li span {
	display: block;
}
section.contacto div.social ul li a span {
	margin-top: 5px;
}

/* Radios */
	input[type="radio"].select {
		position:absolute; 
		z-index:-1000; 
		left:-1000px; 
		overflow: hidden; 
		clip: rect(0 0 0 0); 
		height:1px; 
		width:1px; 
		margin:-1px; 
		padding:0; 
		border:0;
	}

	input[type="radio"].select + label.lSelect{
		padding-left: 20px;
		margin-left: 10px;
		height:16px; 
		display:inline-block;
		line-height:1.25em;
		background-repeat:no-repeat;
		background-position: 0 0;
		font-size:100%;
		vertical-align:middle;
		cursor:pointer;
	}

	input[type="radio"].select:checked + label.lSelect {
		background-position: 0 -16px;
	}

	label.lSelect {
		background-image:url(../imagenes/radio.png);
		*background-image: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
/* End Radios */

@media screen and (max-width: 768px) {
	div.wrapper { width: 90%; }
	header nav ul li { display: none; }
	header nav ul li:nth-child(3) { display: inline-block; }
	section.cuadros nav ul li,
	section.cuadros nav ul li a {
		width: 180px;
		height: 180px;
	}
	section.cuadros nav ul li img {
		width: 100%;
	}
	section.contacto form { 
		width: 85%;
	}
	section.subtitulo h2 {
		font-size: 4em;
	}
	section.contacto form div.row {
		margin: 0;
		margin-top: 10px;
	}
	section.contacto form div.row div.lblField, 
	section.contacto form div.row div.txtField {
		display: block;
		width: 100%;
	}
	section.contacto form div.row div.lblField {
		padding-bottom: 4px;
	}
	section.contacto form div.row div.lblField.vTop {
		padding-top: 0;
	}
}