@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,800|Lora:400italic|Playfair+Display:700);

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'Raleway', Arial, sans-serif;
    color: #333;
    background: #fff;
	background-image:url(../img/bg-body.jpg);
	background-size:100% auto;
	background-repeat:no-repeat;
	background-attachment:fixed;
	--color-1: #e6007e;
	--color-2: #62406f;
	--color-3: #783361;
	--color-4: #c6ae36;
	--gris-claro: #f4f4f4;
	--gris-oscuro: #ccc;
	--positivo: #fff;
	--negativo: #333;
	--fuente-xxxl: 8vw;
	--fuente-xxl: 4vw;
	--fuente-xl: 3vw;
	--fuente-l: 2.5vw;
	--fuente-m: 2vw;
	--fuente-n: 1.35vw;
	--fuente-s: 1.2vw;
	--fuente-xs: 0.9vw;
	--fuente-w-1: 300;
	--fuente-w-2: 600;
	--fuente-w-3: 700;
	--alto-1: 15vh;
	--alto-2: 55vh;
	--padding-0: 0.5vw;
	--padding-1: 1vw;
	--padding-2: 2vw;
	--padding-3: 3vw;
	--padding-4: 4vw;
	--padding-xl: 10vw;
	overflow-x: hidden;
}

h1{
	font-size:var(--fuente-xxl);
}

h2{
	font-size:var(--fuente-xl);
}

h3{
	font-size:var(--fuente-l);
	margin: var(--padding-0) 0 var(--padding-0) 0;
}

.parte{
	color: var(--color-2);
}

h4{
	font-size:var(--fuente-n);
	font-weight: var(--fuente-w-3);
	margin: 0 0 var(--padding-0) 0;
	padding: 0 0 var(--padding-0) 0;
	border-bottom: 1px dashed var(--color-2);
}

h4 span{
	font-weight: var(--fuente-w-3);
	color: var(--color-1);
}

h5{
	font-size:var(--fuente-s);
	font-weight: var(--fuente-w-3);
	margin: 0 0 var(--padding-0) 0;
	padding: 0 0 var(--padding-0) 0;
	border-bottom: 1px dashed var(--color-2);
}

h5 span{
	font-weight: var(--fuente-w-3);
	color: var(--color-1);
}

h5 a{
	color: var(--color-2);
}


p{
	font-size: var(--fuente-n);
	font-weight: var(--fuente-w-1);
	margin-bottom: var(--padding-1);
}

h1 a, h2 a, h3 a{
	color: var(--negativo);
}

a {
	color: var(--positivo);
	text-decoration: none;
}

a:hover {
	color:var(--negativo);
}

a.boton{
	display: inline-block;
	background-color:var(--color-2);
	padding:var(--padding-1) var(--padding-2);
	font-size:var(--fuente-s);
	margin-top:var(--padding-1);
	font-weight: var(--fuente-w-3);
}

a.boton:hover{
	color: var(--positivo);
	opacity: 0.8;
}

.boton-3{
	float: left;
	width: 100%;
	background-color: var(--color-2);
	padding: var(--padding-3);
	font-size:var(--fuente-s);
	margin-top:var(--padding-1);
	font-weight: var(--fuente-w-3);
}

.boton-3:hover{
	color: var(--positivo);
	opacity: 0.8;
}

.boton__volumen{
	position: absolute;
	right: 0;
	bottom: var(--padding-4);
	width: 50%;
	padding: var(--padding-3) !important;
	font-size: var(--fuente-n) !important;
}

.boton__volumen-izq{
	left: 0;
	right: inherit;
	text-align: right;
}

strong{
	font-weight: var(--fuente-w-3);
	color: var(--color-2);
}

blockquote{
	margin: 0;
	padding: 0;
}

blockquote p{
	font-family: "Times New Roman", "serif";
	font-size: var(--fuente-m);
	font-style: italic;
	color: #6b6b6b;
}

blockquote cite{
	float: left;
	width: 40%;
}

blockquote img{
	float: right;
	width: 60%;
}

.test-2{
	float: left;
	width: 100%;
	margin-bottom: var(--padding-4)
}

img.test-img-2{
	width: 30%;
	margin: 0;
	
}


/*top MEH*/

.top-va{
	position:absolute;
	width:100%;
	top:0;
	padding:var(--padding-1) var(--padding-2);
	box-sizing:border-box;
	z-index:10;
}

.logo-va{
	float:left;
	width: 15%;
}

.logo-va img{
	max-width: 100%;
}

.sit-princ{
	position: absolute;
	top: var(--padding-1);
	right: var(--padding-1);
	z-index: 13;
}

.sit-princ a{
	color: var(--color-1);
}

/*Header*/
/* Header */
.header {
	position: relative;
	margin: 0 auto;
	min-height: 100vh;
	width: 100%;
}

.bg-img {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bg-img img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
}

.title {
	z-index: 1000;
	margin: 0 auto;
	padding: 0 var(--padding-1);
	width: 120%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.title h1 {
	padding: 0 0 var(--padding-0);
	color: var(--negativo);
	font-weight: var(--fuente-w-3);
	font-size: var(--fuente-xl);
	margin: 0 auto;
}

.title p {
	color: var(--negativo);
	padding: 0 0 var(--padding-0);
	font-weight: var(--fuente-w-2);
	font-size: var(--fuente-n);
	margin: 0 auto;
}

.title h1,
.title p.subline {
	line-height: 1;
}

.title p.subline {
	font-size: var(--fuente-l);
	text-shadow:2px 2px 1px #fff;
	font-weight: var(--fuente-w-2);
	line-height:1.2em;
}

/* Trigger Button */
button.trigger {
	position: fixed;
	bottom: 40px;
	left: 50%;
	z-index: 5000;
	display: block;
	margin-left: -0.5em;
	padding: 0;
	width: 1em;
	height: 1em;
	border: none;
	background: transparent;
	color: transparent;
	font-size: var(--fuente-m);
	cursor: pointer;
}

.container:not(.notrans) button.trigger {
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.container.modify:not(.notrans) button.trigger {
	opacity: 0;
	pointer-events: none;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

button.trigger::before {
	position: absolute;
	bottom: 100%;
	left: -100%;
	padding: 0.8em;
	width: 300%;
	color: var(--negativo);
	content: attr(data-info);
	font-size: var(--fuente-xs);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

button.trigger:focus {
	outline: none;
}

button.trigger span {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

button.trigger span::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #333;
	content: "\e097";
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'icomoon';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*Contenido*/

.cbp-so-scroller {
	margin-top:var(--padding-4);
	overflow: hidden;
}

.cbp-so-section {
	margin-bottom:var(--padding-xl);
	background-color:rgba(255,255,255,0.95);
	position: relative;
}

.centrar-cont{
	display: flex;
}

figure.cbp-so-side, .cbp-so-side{
	align-content: start;
}

/* Clear floats of children */
.cbp-so-section:before,
.cbp-so-section:after {
	content: " ";
	display: table;
}

.cbp-so-section:after {
	clear: both;
}

.radiografia{
	
}

.radiografia-2{
	float: left;
	width: 100%;
	padding: 0 var(--padding-4);
}

.radiografia-3{
	float: left;
	width: 50%;
	padding: 0;
	padding: 0 var(--padding-3) 0 0;
}

.anexos-mas{
	float: left;
	width: 50%;
	padding: var(--padding-2);
  	background-color: var(--gris-oscuro);
	
}

.anexos-mas a{
	color: var(--color-1);
}

.radiografia-sub{
	float: left;
	width: 25%;
	padding: 0 var(--padding-4) 0 0;
}

/* Text styling */
.volumen{
	color: var(--color-1);
  margin: 0;
  font-weight: var(--fuente-w-3);
  font-size: var(--fuente-m);
}

.cbp-so-section h2 {
	margin:0 0 var(--padding-1) 0;
	line-height: 1;
}

.cbp-so-section p{
}

/* Sides */
.cbp-so-side {
	width: 50%;
	float: left;
	margin: 0;
	padding:var(--padding-4);
	overflow: hidden;
	min-height: 12em;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	-moz-transition: -moz-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.cbp-so-side_2{
	width: 30%;
}

.cbp-so-side_3{
	width: 70%;
	padding: var(--padding-4) var(--padding-4) var(--padding-4) 0;
}

/* Clear floats of children */
.cbp-so-side:before,
.cbp-so-side:after {
	content: " ";
	display: table;
}

.cbp-so-side:after {
	clear: both;
}

.cbp-so-side-right {
	text-align: left;
}

.cbp-so-side-left {
	text-align: right;
}

.cbp-so-side-right img {
	float: left;
	max-width:150%;
	border-radius:1.5em;
}

.cbp-so-side-left img {
	float: right;
	max-width:150%;
	border-radius:1.5em;
}

/* Initial state (hidden or anything else) */
.cbp-so-init .cbp-so-side {
	opacity: 0;
}

.cbp-so-init .cbp-so-side-left {
	-webkit-transform: translateX(-80px);
	-moz-transform: translateX(-80px);
	transform: translateX(-80px);
}

.cbp-so-init .cbp-so-side-right {
	-webkit-transform: translateX(80px);
	-moz-transform: translateX(80px);
	transform: translateX(80px);
}

figcaption{
	display: inline-block;
	margin: var(--padding-1) 0;
	width: 100%;
}

/* Animated state */
/* add you final states (transition) or your effects (animations) for each side */
.cbp-so-section.cbp-so-animate .cbp-so-side-left,
.cbp-so-section.cbp-so-animate .cbp-so-side-right {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
	opacity: 1;
}

/* For example, add a delay for the right side:
.cbp-so-section.cbp-so-animate .cbp-so-side-right {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
*/

/* Example media queries */

/*Galeria*/

.galeria-informe{
	float: left;
	width: 100%;
	background-color: var(--positivo);
	padding: var(--padding-2) var(--padding-4);
	margin-bottom: var(--padding-4);
}

.galeria-informe article{
	width: 60%;
	margin: 0 auto var(--padding-4);
	text-align: center;
}


/*Footer*/

.pata{
	float: left;
	background-color:rgba(255,255,255,0.8);
	width:100%;
	padding:2em;
	text-align:center;
	font-size:0.8em;
}

.pata p{
	font-size: var(--fuente-xs);
}

/*Más Artículos*/

.mas-articulos-wra{
	float: left;
	margin: 0 0 var(--padding-4) calc(var(--padding-2)*-1);
	width: calc(100% + (var(--padding-2)*2));
}

.mas-articulos{
	margin:0 auto;
	width:100%;
}

.mas-division{
	float:left;
	width:32.63%;
	margin: 0 1% 0 0;
	background-color:#f4f4f4;
	text-align:center;
	padding:var(--padding-2);
	box-sizing:border-box;
	background-position:center center;
	border-radius: var(--padding-2);
}

.mas-division:nth-child(1){
	border-radius: 0 var(--padding-2) var(--padding-2) 0;
}

.mas-division:nth-child(3){
	border-radius: var(--padding-2) 0 0 var(--padding-2);
}

.mas-division:last-child{
	margin: 0;
}
			
.mas-division h3 a, .mas-division p, .mas-division a{
	color:#fff;
}

.mas-division p{
	font-size: var(--fuente-s);
  font-weight: var(--fuente-w-3);
}
					
.mas-division a.v-mas{
	display: inline-block;
	padding:var(--padding-1);
	background-color:var(--color-2);
	font-size:var(--fuente-s);
}
			
			.mas-division.art-1{
				background-image:url(../img/que-es-meh.jpg);
				background-size:cover;
			}
			
			.mas-division.art-2{
				background-image:url(../img/dialogos-por-la-verdad.jpg);
				background-size:cover;
			}
			
			.mas-division.art-3{
				background-image:url(../img/papeles-chiquita-3.jpg);
				background-size:cover;
			}
			
			
			
			.mas-division.art-4{
				background-image:url(../img/spotify.jpg);
				background-size:cover;
			}