/* =============================================================================
   ABC Kiosko y Más 2014 : kioskoymas.abc.es
   ========================================================================== */

/* =============================================================================
   RESETS
   ========================================================================== */
   
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video, img{ display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, section, nav, img{ margin: 0; padding: 0; }
mark, rp, rt, ruby, summary, time{ display: inline; }
html{}
body{ background:#fff; color:#312e2f;}
input, textarea{ outline: none; resize: none; border: none; border: 0; }
a{ text-decoration: none; outline: none; color:#312e2f;}
a.active{ outline: none; }
.none{ display: none; }
.float-left{ float: left; }
.float-right{ float: right; }
.align-left{ text-align: left; }
.align-center{ text-align: center; }
.align-right{ text-align: right; }
.color-black{ color:#312e2f;}
.color-abc{ color:#cf3520;}
.no-border{ border:none;}
table{ border-collapse: collapse; border-spacing: 0; font-size: inherit; font: 100%; }
fieldset, img{ border: 0; }
address, caption, cite, code, dfn, em, /*strong,*/ th, var, optgroup{ font-style:inherit; font-weight:inherit; }
li{	list-style: none; }
h1, h2, h3, h4, h5, h6{	font-size: 100%; }
input, button, textarea, select, optgroup, option{ font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
select, input, button, textarea, button{ font: 100%; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.chromeframe{ margin:0.2em 0; background:#ccc; color:#000; padding:0.2em 0;}
img{ max-width:100%;}
p{ text-rendering: optimizeLegibility; font-feature-settings: "kern" 1;}
p{ text-rendering: optimizeLegibility; font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; -moz-font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1";}
header a{-webkit-font-smoothing:subpixel-antialiased;}
strong{	font-weight:normal;}

/* ============================
   Common 
   ============================ */
   
header{
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	transition:all 0.3s ease;
	}
@font-face {
    font-family: "Museum";
    font-style: normal;
    font-weight: normal;
    src: url("../museo-webfont/museo-webfont.eot?#iefix") format("embedded-opentype"), url("../museo-webfont/museo-webfont.woff") format("woff"), url("../museo-webfont/museo-webfont.ttf") format("truetype"), url("../museo-webfont/museo-webfont.svg#MuseoSlab500") format("svg");
}	


/* ============================
   Typography
   ============================ */

body{
	font-family: "Museum",serif;
	font-size:16px; 
	line-height:22px; 
	font-weight:normal;
	}
h1{
	font-size:20px;
	line-height:26px;
	color:#cf3520;
	text-shadow:1px solid #fff;
	margin-bottom:10px;
	font-weight:normal;
	}
	h1 span{
		font-size:18px;
		color:#312e2f;
		}
h2, h3{
	font-size:20px;
	line-height:26px;
	text-shadow:1px solid #fff;
	margin-bottom:10px;
	font-weight:normal;
	text-align:center;
	}	
h3{
	color:#cf3520;
	padding-bottom:30px;
	background:url(../images/detail-arrow-2.png) no-repeat center bottom;
	}	
h4{
	margin-bottom:30px;
	font-weight:normal;
	}		
h5{
	font-size:20px;
	line-height:22px;
	text-shadow:1px solid #fff;
	font-weight:normal;	
	}		
	

/* ============================
   Grid
   ============================ */

.wrapper{
    width:90%;
    padding:0 5% 30px;
	}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-3--2-1, .grid-3--1-2{
	display:block;
	width:100%;
	max-width:1000px;
	margin:0 auto;
	text-align:left;
	}
.grid-1 .col, .grid-2 .col, .grid-3 .col, .grid-4 .col, .grid-5 .col, .grid-3--2-1 .col, .grid-3--1-2 .col{
	width:100%;
	margin-bottom:20px;
	/**/ text-align:center;
	}	

/* ============================
   Header
   ============================ */

header{
	float:left;
	border-bottom:1px solid #fff;
	background:#1F445F;
	}
	header h1{
		color:#fff;
		padding:10px 0 5px;
		text-align:center;
		}
	header.wrapper{
		padding-bottom:0;
		}
	header .grid-1 .col{
		float:left;
		padding:10px 0;
		margin-bottom:0;
		}
	header img{
		float:left;
		max-width:72px;
		margin-top:0;
		}
	header .col div{
		float:right;
		}
	header span{
		display:none;
		}		
	header a{
		display:inline-block;
		font-size:14px;
		padding:8px 16px;
		margin-top:2px;
		color:#858585;
	  	border-radius:50px;
		background:#e6e6e6;
		box-shadow:0 1px 1px 0 #858585;
		}
		header a:hover{
			background:#f6f6f6;
			}
	

/* ============================
   Hero
   ============================ */

#hero{
	float:left;
	text-align:center;
	padding-top:;
	padding-bottom:0;
	background:#eaeef0;
	}
	#hero h2{
		margin:10px 0;
		}
	#hero img{
		display:inline-block;
		}
.price{
	text-align:center;
	}
	.price .left div{
		background:none!important;
		}
	.price p{
		display:inline-block;
		padding:8px 4px 10px;		
		}
		.price p:first-child{
			padding:8px 6px 10px 16px;
			background:url(../images/underline.png) no-repeat 0 3px;
			}	
		.price .left div p:nth-child(3) span{
			font-size:14px;
			font-weight:300;
			}		
.normal-list li{
	padding:6px 0 8px 18px;
	background:url(../images/item.png) no-repeat 0 9px;
	}			
.cta{
	display:inline-block;
	font-weight:bold;
	padding:17px 28px 17px 60px;
	margin:0 0 22px;
	color:#fff;
	border-radius:50px;
	font-size:20px;
	background:#cf3520 url(../images/cta-detail.png) no-repeat 12px 10px;
	background:url(../images/cta-detail.png) no-repeat 12px 10px, -moz-linear-gradient(top, #cf3520 0%, #cc3521 100%);
	background:url(../images/cta-detail.png) no-repeat 12px 10px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf3520), color-stop(100%,#cc3521));
	background:url(../images/cta-detail.png) no-repeat 12px 10px, -webkit-linear-gradient(top, #cf3520 0%,#cc3521 100%);
	background:url(../images/cta-detail.png) no-repeat 12px 10px, -o-linear-gradient(top, #cf3520 0%,#cc3521 100%);
	background:url(../images/cta-detail.png) no-repeat 12px 10px, -ms-linear-gradient(top, #cf3520 0%,#cc3521 100%);
	background:url(../images/cta-detail.png) no-repeat 12px 10px, linear-gradient(to bottom, #cf3520 0%,#cc3521 100%);	
	border:1px solid #b7301d;
	box-shadow:inset 0 1px 1px 0 rgba(255,255,255,0.4), 0 3px 0 0 #8A2D20, 0 3px 3px 1px rgba(0,0,0,0.3);
	}
	.cta:hover{
		background:#e02e16 url(../images/cta-detail.png) no-repeat 12px 10px;
		box-shadow:inset 0 1px 1px 0 rgba(255,255,255,0.4), 0 3px 0 0 #8A2D20, 0 3px 3px 1px rgba(0,0,0,0.3);
		}	
	.cta:active{
		background:#bd3421 url(../images/cta-detail.png) no-repeat 12px 12px;
		box-shadow:inset 0 1px 1px 0 rgba(255,255,255,0.4), 0 2px 0 0 #8A2D20, 0 3px 3px 1px rgba(0,0,0,0.3);
		padding:20px 30px 14px 62px;
		}	
	
/* ============================
   Share
   ============================ */

#share{
	float:left;
	padding-top:20px;
	padding-bottom:0;
	background:#eaeef0;
	}
	.grid-1 .col .twitter{
		text-align:left;
		} 
	.twitter{
		background:#fff url(../images/twitter.png) no-repeat 0 0;
		padding:7px 10px 2px 80px;
		}	
		.twitter a{
			display:inline-block;
			}
			.twitter img{
				display:none;
				/*padding:10px 0;*/
				}
	
/* ============================
   Reasons
   ============================ */

#reasons .col{
	text-align:center;
	clear:left;
	padding-top:20px;
	margin-bottom:0;
	}
#reasons img{
	display:inline-block;
	clear:left;
	margin:10px 0 0;
	}
#reasons h4{	
	font-size:22px;
	line-height:26px;
	margin:10px 0;
	}
	#reasons a{
		display:block;
		}
	

/* ============================
   Footer
   ============================ */		

footer{
	background:#eaeef0;
	}				
footer .grid-1 .col{
	padding-top:20px;
	text-align:center;
	margin:0;
	font-size:13px;
	}
		
		
/* ============================
   Colorbox
   ============================ */

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:1; overflow:hidden; padding-top:140px; height:100%;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{/*overflow:auto;*/ overflow:visible !important; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:0 auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#fff;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{ background:#fff;}
        #cboxTitle{position:absolute; top:-24px; left:0; color:#ccc;}
        #cboxCurrent{display:none !important;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:-56px; left:8px; background:url(../images/sprite.png) no-repeat 0 -3747px; width:23px; height:50px; text-indent:-9999px; opacity:0.3; z-index:9999;}
        #cboxPrevious:hover{opacity:1;}
        #cboxNext{position:absolute; top:-56px; left:50px; background:url(../images/sprite.png) no-repeat -25px -3747px; width:23px; height:50px; text-indent:-9999px; opacity:0.3; z-index:9999;}
        #cboxNext:hover{opacity:1;}
        #cboxClose{position:absolute; top:-48px; right:0px; display:block; background:url(../images/close.png) no-repeat center center; width:40px; height:40px; text-indent:-9999px; opacity:0.6;}
        #cboxClose:hover{opacity:1;}
        /* popup monrealista add */
        .popup #cboxContent{padding:30px;}
        .popup #cboxContent h3 {margin-top:10px }
        .popup #cboxContent a.print {color:#333; float:right;}
        .popup #cboxContent small {font-size: 11px; margin-top: 15px; display: block; line-height: 13px}


.lightbox img{
	margin-bottom:20px;
	}		
.lightbox p{
	font-size:14px;
	line-height:20px;
	}		
.lightbox .price .right{
	font-size:15px;
    margin-left:-32px;
    margin-right:-32px;
	}
.lightbox .cta{
    margin-left:-44px;
	 min-height:20px;	
	}

/* ==========================================================================
   Media Queries
   ========================================================================== */


@media only screen and (min-width: 537px) {	
.twitter{
	padding:20px 10px 14px 80px;
	}	
}

@media only screen and (min-width: 768px) {
	
 
/* ============================
   Typography
   ============================ */

h1{
	font-size:28px;
	line-height:34px;
	margin-bottom:8px;
	}	
	h1 span{
		font-size:26px;
		color:#312e2f;
		}
h2{
	font-size:22px;
	line-height:28px;
	margin-bottom:12px;
	letter-spacing:-1px;
	}
	h2.title{
		font-size:26px;
		line-height:32px;
		margin-top:10px;
		}	
h3{
	font-size:24px;
	line-height:26px;
	padding-bottom:36px;
	text-shadow:1px solid #fff;
	margin-bottom:20px;
	}
h4{
	margin-bottom:20px;
	}	
h5{
	font-size:25px;
	line-height:30px;
	margin-top:20px;
	}		
	

/* ============================
   Grid
   ============================ */
   
.wrapper{
	padding:0 5% 40px;
	}
.grid-1 .col, .grid-2 .col, .grid-3 .col, .grid-4 .col, .grid-5 .col, .grid-3--2-1 .col, .grid-3--1-2 .col{
	display:inline-block;
	vertical-align:top;
	margin-left:0;
	}
	.grid-1 .col:first-child, #features.faq .grid-1 .col, .grid-2 .col:first-child, .grid-3 .col:first-child, .grid-4 .col:first-child, .grid-5 .col:first-child, .grid-3--2-1 .col:first-child, .grid-3--1-2 .col:first-child{
		margin-left:0;
		}	
		.grid-2 .col{
			width:47.5%;
			}
		.grid-3 .col{
			width:30%;
			}	
		.grid-4 .col{
			width:21.25%;
			}
			.grid-4 .col:nth-child(4n+1){
				margin-left:0;
				}
		.grid-5 .col{
			width:18%;
			margin-left:2.5%;
			}
		.grid-3--2-1 .col, .grid-3--1-2 .col{
			width:30%;
			}
			.grid-3--2-1 .col:first-child{
				width:65%;
				}				
			.grid-3--1-2 .col:last-child{
				width:65%;
				}		
				
/* ============================
   Header
   ============================ */

header h1{
	padding:20px 0 16px;
	}
header img{
	max-width:none;
	margin:12px 0 8px;
	}
header .col div{
	margin-top:22px;
	}
header span{
	display:inline-block;
	font-family:Arial, sans-serif;
	font-size:13px;
	color:#999;
	font-style:italic;
	padding:0 5px 0 0;
	}	
	
/* ============================
   Hero
   ============================ */

#hero{
	padding-bottom:20px;
	}
	#hero h2 {
    	margin: 30px 0 -10px;
		}
.price{
	text-align:left;
	display:inline;
	}	
	.price p:first-child{
		background:none;
		}
.price .left, .price .right{
	display:inline-block;
	vertical-align:top;
	text-align:left;
	}	
	.price .left p{
		display:block;
		padding:0;
		text-align:center;
		}
	.price .left div{
		display:inline-block;
		width:131px;
		height:93px;
		text-align:center;
		padding:30px 20px 10px 0;
		margin-top:22px;
		background:url(../images/bg-price-2.png)!important;
		}
		.price .left div p strong{
			font-size:26px;
			font-weight:700;
			}
		.price .left div p:nth-child(3) span{
			font-size:14px;
			font-weight:300;
			vertical-align:super;
			}		
	.price .right{
		margin-left:2%;
		}	
.cta{
	margin-top:58px;
	}
	
/* ============================
   Share
   ============================ */

#share{
	padding-top:30px;
	padding-bottom:10px;
	}
	#share .grid-1{
		max-width:500px;
		}
	.twitter{
		background:#fff url(../images/twitter.png) no-repeat 0 0;
		padding:20px 10px 10px 90px;
		}	
		.twitter a, .twitter img{
			display:inline-block;
			}
			.twitter img{
				padding:0 10px 0 22%;
				}	
			
/* ============================
   Reasons
   ============================ */

#reasons{
	margin-bottom:-30px;
	}
#reasons .col{
	margin:10px 0 30px 0;
	}
#reasons img{
	float:left;
	margin:0 26px 0 0;
	}
#reasons h4{	
	margin-top:13px;
	}	
	#reasons .col img{
		margin:0 26px 0 0;
		}
	#reasons a{
		display:inline-block;
		}
		#reasons .col a img{
			margin:8px 10px 0 0;
			}	
		
/* ============================
   Footer
   ============================ */		
				
footer .grid-1 .col{
	margin:0 0 -30px;
	}				

/* ============================
   Colorbox
   ============================ */

#colorbox, #cboxOverlay, #cboxWrapper{ padding-top:50px;}


        
}


@media only screen and (min-width: 1024px) {

/* ============================
   Typography
   ============================ */

h3{
	font-size:26px;
	}	
	
/* ============================
   Header
   ============================ */
   
header img{
	float:none;
	}
	header .col div{
    	margin-top:-66px;
		}   	

/* ============================
   Reasons
   ============================ */

#reasons h4{	
	font-size:26px;
	line-height:30px;
	margin:18px 0;
	}
	#reasons img{
    	margin:0 26px;
		}
	#reasons p{
		margin-right:100px;
		}
	#reasons .col img {
	    margin:0 26px 0 100px;
		}	

		
/* ============================
   Colorbox
   ============================ */

#colorbox, #cboxOverlay, #cboxWrapper{ padding-top:100px;}

}

/* ============================
   Retina display
   ============================ */

		
@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (-o-min-device-pixel-ratio: 2/1),
	only screen and (min--moz-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2){
	
	/*.normal-list li{ background:url(../images/item-x2.png) no-repeat 0 9px / 14px auto;	}
	#lead h4{ background:url(../images/promo-ribbon-x2.png) no-repeat right 0 / 66px auto;}*/
	.price .left div{ background:url(../images/bg-price-2-x2.png) 0 0 / 151px auto;}
	.twitter{ background:#fff url(../images/twitter-x2.png) no-repeat 0 0 / auto 60px;}	
		
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir{ background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px;}
.ir:before{ content: ""; display: block; width: 0; height: 100%;}
.no-padding-top.subsection
.hidden{ display: none !important; visibility: hidden;}
.visuallyhidden{ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{ clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}
.invisible{ visibility: hidden;}
.clearfix:before,
.clearfix:after{ content: " "; display: table;}
.clearfix:after{ clear: both;}
.clearfix{ *zoom: 1;}


/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
	header, header div, header{ position:relative; background:none;}
	.col .column:first-child.col-pdf, .col .column.col-pdf{	width:600px; margin:0; background:none;}
	.col .column:first-child.col-pdf div{ display:inline-block;	width:300px; padding:0;}
	.col .column:first-child.col-pdf p{	color:#333;	font-size:11px;	padding:20px;}
	.col .column:first-child.col-pdf p:first-child{	padding-bottom:0;}
	.col .column:first-child.col-pdf p:last-child{ padding-top:0; padding-bottom:0;}
	.col .column:first-child.col-pdf .alr{ width:48%; margin:0;	vertical-align:top;}
	.col .column:first-child.col-pdf .alr.alr-100{ width:100%;}
	.col .column:first-child.col-pdf .alr img{ width:100%;}
	.sec-title.section.pdf-title{ padding-top:0;}
	.pdf-h1{ display:inline-block; font-size:26px; line-height:26px; margin-left:30px; padding:12px 0; color:#fff; background:#000 url(../images/nav-detail.png) no-repeat 0 center;}
	.note{ /*font-weight:700;*/ font-size:18px;}	
}