/* ----------------------------
edicioneselboletin.com
---------------------------- */
@font-face {
	font-family: formataLight;
	src: url(/..theTree/fonts/Formata-Light.otf);
}

::selection { color:#333; background:#ffd17f; }

* {
	font: 100% formataLight, 'Helvetica Neue', Helvetica, sans-serif;
	color: #f2dada;
}

:root {
	--nOfCards: 5;
	--cardWidth: 18vw;
	--cardHeight: 24vw;
	--grid-template-columns: 18vw 18vw 18vw 18vw 18vw;
	--gridGap: 2vw 1vw;
	--fontSize: .7vw;
	--theCardThumbWidth: 21vw;
	--menuBtnDisplay: none;
	--menuTop: 0;
	--menuPadding: 4vh 0 0 !important;
	color:#f2dada;
	background: #1f3549;
}

@media screen {
	#contact {
		grid-template-columns: auto auto;
		justify-content: center;
		gap: 20vh;
	}
	#contact>ul {
		width: 19vh;
		height: 19vh;
	}
}
@media screen and (max-width:1920px) {
	:root {
		--nOfCards: 4;
		--cardWidth: 21vw;
		--cardHeight: 28vw;
		--grid-template-columns: 21vw 21vw 21vw 21vw;
		--fontSize: .9vw;
		--theCardThumbWidth: 25vw;
	}
}

@media screen and (max-width:1440px) {
	:root {
		--nOfCards: 3;
		--cardWidth: 30vw;
		--cardHeight: 40vw;
		--grid-template-columns: 30vw 30vw 30vw;
		--fontSize: 1.1vw;
		--theCardThumbWidth: 30vw;
	}
}

@media screen and (max-width:1024px) {
	:root {
		--cardWidth: 31.5vw;
		--cardHeight: 42vw;
		--grid-template-columns: 31.5vw 31.5vw 31.5vw;
		--fontSize: 1.2vw;
		--menuBtnDisplay: block;
		font: 75% formataLight, 'Helvetica Neue', Helvetica, sans-serif;
	}
	.menuQuery {
		--menuTop: 8vh !important;
		--menuPadding: 0 !important;
		justify-content: flex-start;
		background: #800100;
		width: 15em;
		right: 1vw;
		display: none;
	}
	.menuQuery.show{
		display: block;
	}
	.menuQuery .fieldset {
		display: flex;
		flex-wrap: wrap;
		justify-content: unset;
		margin-top: auto;
		flex-direction: column;
		align-content: flex-start;
	}
}

@media screen and (max-width:800px) {
	:root {
		--nOfCards: 2;
		--cardWidth: 45vw;
		--cardHeight: 60vw;
		--grid-template-columns: 45vw 45vw;
		--fontSize: 2vw;
	}
}

@media screen and (max-width:480px) {
	:root {
		--nOfCards: 1;
		--cardWidth: 96vw;
		--cardHeight: 132vw;
		--grid-template-columns: 96vw;
		--fontSize: 4vw;
		--theCardThumbWidth: 96vw;
	}
	.menuQuery {
		font-size:4vw;
	}
	#contact {
		grid-template-columns: unset;
		grid-template-rows: auto;
		gap: 5vh;
	}
	#contact>ul {
		width: 50vw;
		height: 50vw;
	}
}

/* HEADER */

.header {
	position: fixed;
	z-index: 19;
	grid-row: 1;
	display: grid;
	grid-template-columns: auto;
	background: #1f3549;
	border-bottom: solid 1px #bf615f;
	border-image: linear-gradient(to right, #1f3549, #1f3549, #748da4, #1f3549, #1f3549);
	border-image-slice: 20%;
	height: 8vh;
	width:100vw;
	margin: 0;
	padding: 0;
	top: 0;
	justify-content: space-between;
}

.header #logo {
	grid-column: 1;
	background-image: url(logoEdicioneSuroeste.png);
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	background-origin: content-box;
	position: absolute;
	top: 1vh;
	left: 3vh;
	width: 8vh;
	height: 8vh;
}
.header #displayButtons {
	grid-column: 2;
	display:flex;
	justify-content: flex-end;
/*	padding-right: 2vh;
	background: #333;*/
/*
	position:absolute;
	height:6em;
	width:2.5em;
	flex-direction:column;
*/
}
.header #displayButtons .displayButton {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: .7;
	margin: 2.5vh .5vh;
	height: 3vh;
	width: 3vh;
}
.header #displayButtons .displayButton:hover {
	opacity: 1;
}
.header #menu {
	background-image:url(/..theTree/img/menuW2.png);
	display: var(--menuBtnDisplay);
}
.header #contactBtn {
	background-image:url(/..theTree/img/contactW.png);
}
.header #gotopBtn {
	background-image:url(/..theTree/img/arrowW.png);
	rotate: -90deg;
}

.body {
	display: grid;
	grid-template-rows: 10vh 85vh;
	top: 0;
	left: 0;
	bottom:100vh;
	right: 100vw;
	padding: 0;
}
#bodyMain {
	display: grid;
	grid-template-rows: auto auto;
	justify-content: center;
	align-content: start;
	height: fit-content;
	top: 8vh;
}
#mainDoc {
	display: grid;
	padding: 2vh 0;
}

.menuQuery {
	position: fixed;
	top: var(--menuTop);
	padding: var(--menuPadding);
	justify-self: center;
	z-index: 21;
}
.menuQuery .fieldset {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1.5vh;
/*	gap: 1vw;*/
}
.menuQuery .fieldset label {
	text-wrap: nowrap;
/*	border-color: #bf615f;*/
}
.menuQuery .fieldset label:hover {
/*	border-color: #d89897;*/
	text-shadow: 0px 0px 1px;
}

.menuQuery .fieldset label:has(input[checked="checked"]) {
/*	border-color: #fff;*/
	text-shadow: 0px 0px 1px;
}

.dataCards {
	padding: 0;
}

.dataCards table thead {
	display: none;
}
.dataCards table tbody {
	display: grid;
	gap: var(--gridGap) ;
	grid-template-columns: var(--grid-template-columns) ;
	justify-content: center;
	padding: 1vw;
}
.dataCard {
	height: var(--cardHeight) !important;
	font-size: var(--fontSize);
	border: none !important;
}
.dataCard td {
	border: none !important;
	display: grid;
}
.dataCard>td>span {
	font-size: var(--fontSize);
	display: grid;
	grid-template-rows: var(--cardWidth) auto;
}

.dataCard .thumbImg {
	width: var(--cardWidth);
	height: var(--cardHeight);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border: solid 1px #bf615f !important;
}
.dataCard .new:before {
	content:"N o v e d a d";
	position:absolute;
/*	margin: 2.5em auto auto -.75em;*/
	padding:0.5rem 2rem;
	background:#1f3549;
	font-size: var(--fontSize);
	font-weight:bold;
	color:#eee;
	border:solid 1px #bf615f;
/*	translate: -.5vw 1.5vw;*/
	translate: calc( -.5 * var(--fontSize) ) calc( 1.5 * var(--fontSize) );
	rotate: -30deg;
	z-index:2;
}
.dataCard .free:before {
	content:"Descarga gratuita en PDF";
	position:absolute;
	margin-top: 50%;
	width: calc(100% - 2px);
	padding:.5vh 0;
	background:linear-gradient(to right, rgba(255, 0, 255,0.5), rgb(0, 128, 0), rgba(255, 0, 255,0.5));
	font-size:2rem;
	color:#00ff00;
	transform: translate(0, 50%);
	z-index:2;
	text-align:center;
}
.dataCardTxt {
	display: grid;
	gap: .2vw;
	grid-auto-rows: max-content;
	justify-items: center !important;
	background: linear-gradient(to right, rgba(0, 0, 0,0.7), rgba(0, 0, 0,0.7));
	opacity: 1;
	bottom: 0;
	height: calc( var(--cardHeight) - var(--cardWidth) );
	padding: .1vw;
	overflow-y: auto;
}
/* .dataCard:hover .dataCardTxt {
	opacity: 1;
} */
.dataCardTxt li {
	text-align: center;
}

.dataCardTxt li.dc_author,.dataCardTxt li .dc_title {
	font-weight: bold;
}

.dataCardTxt li.dc_resumee {
	font-size: 80%;
}

tr:hover td, tr.selected td {
	background-color: transparent !important;
}

.theCardContainer {
	position:absolute;
	width: calc( 3*var(--theCardThumbWidth) + 1.5vw);
/*	height: 37vw;*/
	padding:.5vw;
	background: #eddd97;
	display: grid;
/*	grid-template-rows: 32vw auto;*/
}
.theCardContainer * {
	color: #333;
}
.theCardContainer .closeBtn {
	/* margin-top: 3em; */
	position: absolute;
	top: 0;
	right: 0;
	width: 4em;
	height: 4em;
	/*background: #333;*/
	background-image: url(/..theTree/img/close.png);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}
.theCard {
	height: calc( 4*var(--theCardThumbWidth)/3 + 3vw);
	display: grid;
	grid-template-columns: var(--theCardThumbWidth) calc( 2*var(--theCardThumbWidth) );
	gap: .5vw;
}
.theCard .thumbImg {
	height: calc( 4*var(--theCardThumbWidth)/3 );
	margin-bottom: .5vw;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border: none !important;
}
.theCard .field span {
	margin-left:0;
}
.theCard .field span:first-child, .field label:first-child {
	display:none;
}
.theCard .theTextForm {
	display: flex;
	flex-direction: column;
	overflow: auto;
}
.theCard .theTextForm span {
	font-size: 1.2em;
	margin-bottom: .1vw;
}
.theCard .theTextForm span br {
	margin-bottom: .25em;
}
.theCard .theTextForm span.synopsis {
	overflow-y: auto;
}
.theCardContainerBottom {
	display: grid;
	grid-template-rows: 2vw 2vw;
}
.theCardContainerButtons {
	display: grid;
	grid-template-columns: 50% 50%;
	padding-left: 21vw;
}
.theCardContainerButtons>ul {
	align-content: center;
	text-align: center;
	font-size: 1.3em;
}
.theCardContainerButtons>ul:first-child {
	color: #800100;
	background: #F3C943;
}
.theCardContainerButtons>ul:last-child {
	color: #eee;
	background: #800100;
}
.theCardContainerBottomInfo {
	font-weight: bold;
	align-content: end;
	text-align: center;
}
@media screen and (max-width:480px) {
	.theFrame {
		justify-content: flex-start;
	}
	.theCardContainer {
		width: 100vw;
		padding: 2vw;
	}
	.theCard {
		height: auto;
/*		width: 100vw;*/
		display: grid;
		grid-template-rows: auto auto auto;
		grid-template-columns: unset;
		gap: 5vw;
	}
	.theCard .thumbImg {
		width: 100%; /*var(--theCardThumbWidth);*/
		margin-bottom: 2vh;
	}
	.theCardContainerBottom {
		grid-template-rows: auto;
	}
	.theCardContainerButtons {
		grid-template-columns: unset;
		grid-template-rows: 4vh 4vh;
		padding-left: unset;
	}
	.theCardContainerBottomInfo {
		height: 4vh;
	}
}

#contact {
	display: grid;
	justify-items: center;
	align-content: center;
	border-top: solid 1px #eddd97;
	border-image: linear-gradient(to right, #1f3549, #1f3549, #748da4, #1f3549, #1f3549);
	border-image-slice: 1;
	margin-bottom: 5vh;
}

#contact>ul {
	align-content: end;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: center;
}
#contact #phone {
	background-image:url(/..theTree/img/phone128W.png);
}
#contact #email {
	background-image:url(/..theTree/img/at128W.png);
}


/*
@media (orientation: portrait) {
	#__docFrameContainer__.stretch img,#__docFrameContainer__.stretch video { width:100%; height:auto; }
}
@media (orientation: landscape) {
	#__docFrameContainer__.stretch img, #__docFrameContainer__.stretch video { height:100%; width:auto; }
}
*/
