@charset utf-8;
/*
Theme Name: La Madre
Author: Code by Ricardo Juárez	
Author URI: http://rjvv.com/
Version: 1.0
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Copyright: (c) 2023 Ricardo Juárez
*/

:root {
    --small: 12px;
    --body: 15px;
    --medium: 20px;
    --big: 50px;
    --huge: 75;
    --xhuge: 115px;
    --linesmall: 20px;
    --linebody: 25px;
    --linemedium: 30px;
    --linebig: 60px;
    --linehuge: 80;
    --linexhuge: 110px;

    --sans: 'Helvetica', 'Arial', sans-serif;
    --serif: 'Times New Roman', Times, serif;

    --border: 1px solid var(--contrast);
	--fc: #FFD362;
	--tc: #000;
	--f0: #443D2B;
	--t0: #D9D9D9;
		--pad:50px;
		--shadow:     1.5px 1.5px 0 var(--contrast),
    -1.5px -1.5px 0 var(--contrast),
    1.5px -1.5px 0 var(--contrast),
    -1.5px 1.5px 0 var(--contrast),
    0 1.5px 0 var(--contrast),
    0 -1.5px 0 var(--contrast),
    1.5px 0 0 var(--contrast),
    -1.5px 0 0 var(--contrast);

}


.theme-light {
   --primary: var(--fc);
   --contrast: var(--tc);
}
.theme-dark {
   --primary: var(--fo);
   --contrast: var(--to);
}


*{
	overscroll-behavior: none;

	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
            -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;

}
html, body
{
margin:0;
font-size:100%;
width:100%;
     }
     
     	html { margin-top: 0px !important; }
	* html body { margin-top: 0px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 0px !important; }
		* html body { margin-top: 0px !important; }
	}

.page-template-portada{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
footer{
	text-align: center;
	padding: 20px;
}
body {
margin:0;
-moz-osx-font-smoothing: grayscale; 
text-rendering:optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
font-size: var(--body);
line-height: 1.3;
font-family: var(--serif);
background-color: var(--primary);
color: var(--contrast);
}
.close-button{
font-size: 40px;
padding: 20px;
cursor: pointer;
text-decoration: underline;
text-align: center;
}
.pop{
	position: relative;
	background-color: black;
	color: white;
	border-radius: 30px;
	padding: 50px 50px 50px 50px;
	max-width: 500px;
	font-family: var(--sans);
}
.pop-cont{
	display: none;
	justify-content: center;align-items: center;
	position: fixed;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	z-index: 99999999999;
}
h1, h2, h3{
	margin-bottom: 0;
}


.placeholder-active{
	border: none !important ;
	cursor: default !important;
	}
	.placeholder-active::before,
.placeholder-active::after{
	display: none;
} 



  .placeholder {
	  cursor: pointer;
  width: 100%;
  aspect-ratio: 4 / 1;
  border: 1px solid var(--contrast);
  position: relative;
  margin-bottom: 10px !important;
}

.placeholder::before,
.placeholder::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--contrast);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.placeholder::before {
  transform: rotate(13.5deg);
}

.placeholder::after {
  transform: rotate(-13.5deg);
}

.content{
	padding-bottom: 70px;
}
.vertical{
	  text-transform: lowercase;
writing-mode: vertical-rl;
  font-size: 6vw;
  transform: rotate(180deg);
  text-align: right;
}
.close-modal{
position: absolute;width: 100%;
height: 100%;
z-index: 1; }

   #gallery-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            z-index: 9999999;
        }

        #gallery-modal img {
            max-width: 90%;
            max-height: 90%;
            object-fit:contain;
        }


#gallery-modal .next{
	margin-left: -20%;
}
#gallery-modal .prev{
	margin-right: -20%;
}
        #gallery-modal .nav {
	        user-select: none;
	        position: relative;
	        z-index: 999;
            background: none;
            border: none;
            color: white;
            font-size: 18vw;
            cursor: pointer;
		font-weight: bold;
  font-size: 18vw;
  line-height: 0.7;
            }
        


.block{
	margin-bottom: 50px;
}

.section .block:last-of-type{
	margin-bottom: 0;
}

.uppercase{
	text-transform: uppercase;
}
.underline{
	text-decoration: underline;
}
.vcenter{
	align-items: center; 
	}
.zigzag{
			--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/24.00px 100%;
  -webkit-mask: var(--mask);
          mask: var(--mask);
          width: 100%;
          height: 17px;
         filter: drop-shadow(0px 5px 0px #000000);
         background: var(--contrast);
         position: relative;
		}
		
		.zigzag:before{
			--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/24.00px 100%;
  -webkit-mask: var(--mask);
          mask: var(--mask);
          width: 100%;
          height: 13px;
         filter: drop-shadow(0px 5px 0px #000000);
         background: var(--contrast);
         position: absolute;
         top: 0px;
         background-color: var(--primary);
         z-index: 1;
         content: '';
         display: block;
		}
		


:root {
  --width: 70px;
  --halfwidth: calc(var(--width) / 2);
  --thickness: 110%;
  --offset: 4px;
  --backgroundcolor: var(--primary);
  --linecolor: var(--contrast);
}

.zigzag_v {
  position: fixed;
  width: var(--width);
  z-index: 1;
  height: calc(100vh - 100px);
  left: 7vh;
  top: 50px;
}

.zigzag_v:before,
.zigzag_v:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
}

.zigzag_v:before {
  width: calc(var(--width) - var(--offset));
  left: var(--thickness);
  background: linear-gradient(45deg, var(--linecolor) var(--halfwidth), transparent 0) 0 var(--halfwidth),
              linear-gradient(135deg, var(--linecolor) var(--halfwidth), transparent 0) 0 var(--halfwidth);
  background-position: top left;
  background-repeat: repeat-y;
  background-size: var(--width) var(--width);
  height: 100%;
}

.zigzag_v:after {
  width: var(--width);
  left: 100%;
  background: linear-gradient(45deg, var(--backgroundcolor) var(--halfwidth), transparent 0) 0 var(--halfwidth),
              linear-gradient(135deg, var(--backgroundcolor) var(--halfwidth), transparent 0) 0 var(--halfwidth);
  background-position: top left;
  background-repeat: repeat-y;
  background-size: var(--width) var(--width);
  height: 100%;
}
		
.centersvg rect {
  transform:translate(-50%);
  transform-box:fill-box;
}
.rotated{
transform: rotate(90deg);
position: absolute;
height: 100%;
 top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(90deg); /* Rotate 90 degrees clockwise */
            height: 100%; 
            }


       .icon-container {
      width: 45px;
      height: 45px;
      display: grid;
      grid-template-columns: repeat(3, 15px);
      grid-template-rows: repeat(3, 15px);
      cursor: pointer;
      pointer-events: all;
    }

    .square {
      width: 100%;
      height: 100%;
      background-color: var(--contrast);     }
    .space {
      width: 100%;
      height: 100%;
      background-color: transparent; 
    }
		
header{
	justify-content: space-between;
	position: sticky;
	z-index: 99999;
	display: flex;
	padding: 50px;
	width: 100%;
	top: 0;
	left: 0;
	align-items: center;
	pointer-events: none;
}
.logo{
	pointer-events: all;
}
.logo svg{
	width: 130px;
}

.logos{
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap:20px;
}
.logop img{
	max-height: 100px;
	max-width: 220px;
	margin-bottom: 20px;
}
.theme-light .logop img {
  filter: brightness(0);
}


.theme-light .page-id-853 .logop img {
  filter: none;
  mix-blend-mode:multiply;
}



.bg{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}
.bg img{
	object-fit:cover;
	height: 100%;
}

.zigzag-line {
  width: 200px; /* Set the desired width */
  height: 20px; /* Set the desired height */
  background: linear-gradient(45deg, transparent 33.33%, #000 33.33%, #000 66.66%, transparent 66.66%),
              linear-gradient(-45deg, transparent 33.33%, #000 33.33%, #000 66.66%, transparent 66.66%);
  background-size: 20px 20px; /* Adjust the size of each "dot" */
}
.grid.gapped{
gap:100px;}

.grid{
	display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}
.bigstroke{
	  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  text-decoration-skip-ink: auto;
  -webkit-text-stroke: 5px white;
  text-stroke: 5px white;
    paint-order: stroke fill;
}
.padded{
	padding: 0 var(--pad);
}
footer a, .post-content a{
	text-decoration: underline;
}
.tabs a{
	text-decoration: none;
}

h3.ui-accordion-header{
	margin: 0 !important;
	cursor: pointer;
	font-size: 20px !important;
	padding: 5px 0;
	border-bottom: 1px dashed;
}
.ui-accordion-header::after{
	content:' ↓';
}
.ui-accordion-header-active::after{
	content:' ↑';
}
.ui-accordion-content {
  display: none;
  padding: 30px 0;
}

#main{
	flex: 1;
}
[id^="menu-main"]{
	font-family: var(--sans);
	font-size: var(--medium);
	text-transform: lowercase;
	font-weight: bold;
	display: flex;
	justify-content: center;
	position: fixed;
	width: 100%;
	bottom: 0px;
	padding: 10px;
	z-index: 99999;
	background-color: var(--primary);
	}
[id^="menu-main"] li{
	margin: 0 20px;
}



	.menu-home{
		text-align: center;
		text-transform: lowercase;
		display: flex;
		flex-direction: column;
		}
			.menu-home h2{
			font-weight: bold;
			font-size: 9vh;
			display: block;
		}
		.menu-home h3{
			font-style: italic;
		}
					.menu-home h3, .page-template-portada .cabecera{
					text-align: center;
			font-size: 18px;
		}	.menu-home{
		text-align: center;
		text-transform: lowercase;
		padding-bottom: 25px;
		}
			.menu-home h2{
			font-weight: bold;
			font-size: 10vh;
			display: inline-block;
			line-height: 1;
		}
		
	.page-template-portada .cabecera{
	margin-top: -145px;
	padding: 40px 215px 25px;
	background-color: var(--primary);
	position: sticky;
	top: 0;
	z-index: 9999;
}
.subtitulo{
	margin-top: 20px;
}
.tags{
	display: flex;
	font-size: 15px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.tags li.active, .tags li.activehover{
	color: var(--primary);
	background: var(--contrast);
}
.menu-home a{
	width: fit-content;
	margin: 0px auto;
	display: inline-block;
}
.menu-home a.active{
	display: inline-block;
	}
.menu-home a.hidden{
display: none;
}
.foto.placeholder{
	width: 50%;
	position: relative;
}
.placeholder .pie{
	position: absolute;
	font-family: var(--sans);
	bottom: -25px;
}


.tags li{
	font-style: normal;
	margin: 5px;
	padding: 3px 10px;
	border: 2px solid;
	border-radius: 20px; 
	height: fit-content;
	cursor: pointer;
}
.post-content h2{
	margin-bottom: 30px;
font-size: 40px;	
}
.post-content h3{
	margin-bottom:30px;
font-size: 30px;	
}

.post-content p, .post-content ul, .post-content ol{
	font-size: 15px;
	margin-bottom: 30px;
}
.post-content *:last-child{
	margin-bottom: 0;
}

@media all and (-ms-high-contrast:none){}