:root {
	/*Colors*/
  --white: #FFFFFF;
  --black: #000000;
  --main-color: #C7C7C7;
  --secondary-color:#F7F7F7;
  --text-input-field: #ACD9B2;
  --color-of-links: #B2F7C5;
	/*texts:*/
	/*font-size*/
  --textSm: 1.4rem; 
  --textMd: 1.6rem;
  --textLg: 1.8rem;
  --rem: 1rem;
  	/*ver clases mas abajo*/

	--padding04 : 0.4rem;
	/*ver clases mas abajo*/

  	/*font-family*/
  --fontMain: sans-serif;
  --fontSecondary: sans-serif;
  --fontHeading: sans-serif;

  /*tamaño imagenes - width*/
  --contImgPostSm: 15rem;
  --contImgPostMd: 25rem;
  --contImgPostLg: 35rem;

  --contImgcardSm: 10rem;
  --contImgcardMd: 15rem;
  --contImgcardLg: 20rem;

  --contImgLogoMain: 20rem;
  --contImgLogoSm: 0.25rem;
  --contImgLogoMd: 0.5rem;

  /*tamaño imagenes - height*/
}

*{ margin: 0; box-sizing: border-box;};
html {  overflow-x: hidden; width: 100vw; padding: 0; line-height: 1.15;} /*puede llegar a ser necesario*/
html {  font-size: 62.5%; }  /* Now 10px = 1rem! */
body {font-size: 16px; font-size: 1.6rem; line-height: 1.5; margin: 0}
		/*fuente: https://gist.github.com/mrwweb/5627502; */ /*si no soporta rem soportara px*/
main {  display: block;}

/*heading*/
h1,h2,h3,h4,h5,h6{
		margin-top: 0;
		font-family: var(--fontHeading);
		line-height: 1.5;
	} 
p{font-weight: 300; margin: 0} /*es recomendable guardar los valores en variables root*/
h1{font-size: 6rem}  
h2{font-size: 4.8rem}
h3{font-size: 3.6rem}
h4{font-size: 2.4rem}

a{text-decoration: none; display: inline-block; /*overflow: hidden*/}
ul{list-style: none; margin: 0; padding: 0;}
[type="submit"]{border:none; border-radius: 25%; font-size: 1.6rem; padding: 0.5rem; cursor: pointer; width: 100%; height: 6rem}

picture {margin:0; overflow: hidden; width: var(--contImgPostMd)} /*imagenes post*/
figure {margin:0; overflow: hidden; width: var(--contImgcardMd); /*height:var(--contImgcardMd);*/}
img{max-width: 100%; height: auto; object-fit: contain; vertical-align: top; object-position: 1px 1px;} /*100% de un contenedor ; object-fit: cover*/

.figImg{display: block; width: auto; margin: 0; padding: 0; object-fit: cover; overflow: hidden}
.contCentrado {max-width: 120.0rem; width: 95%; margin: 0 auto} /* BEM-layout*/

header{ margin: 0 auto; padding: 0; /*width: 95%*; max-width: 1200px; padding: 1rem*/}
main{max-width: 120.0rem; width: 100%; margin: 0 auto;} /*en pantalla <1200px toma el 95%*/
footer{margin: 0 auto; padding: 0;/*width: 95%*; max-width: 1200px; padding: 1rem*/}

.bodyTag{
	background: #a4b0be;
}
.padding4{
	padding: var(--padding04)
}

.bold{font-weight: bold;}
.textC{text-align:center}
.textL{text-align:left;}
.textSm{font-size: var(--textSm);}
.textMd{font-size: var(--textMd)}
.textLg{font-size: var(--textLg)}

.fontMain{font-style: var(--fontMain)}
.fontSecondary{font-style: var(--fontSecondary)}
.fontHeading{font-style: var(--fontHeading)}

	/*////////////////////////////////////////////////////////////*/
	.social-link{display: inline-block; /*border: 2px solid white;*/ width: 50px; height: 50px; margin: 0 20px;}
	.social-link.instagram{background-image: url('./img/instagram.svg'); background-size: cover;}


	/*////////////////////////////////////////////////////////////*/
	.contHeader{
		min-width: 72rem;
	}
		/* ---- barra de navegacion azul ----*/
		.navBoton1 ul{
		display: flex;
		flex-direction: row;
		 margin:0;
		 padding:0;
		}

		.navBoton1 ul{
		     margin:0;
		  padding:0;
		}

		.navBoton1 li{
		  width: 120px;
		  height: 30px;
		  list-style: none; 
		/*   border: 1px solid red; */
		  background-color: blue;
		  padding:10px;
		   margin:0;
		  padding:0;
		  display: flex;
		  align-items:center;
		  flex-grow: 1;
		  transition: flex-grow .6s;
		}.navBoton1 li:hover{
			flex-grow: 2;
		}

		.navBoton1 a{
		  line-height: 28px;
		  width: 100%;
		  height: 100%;
		  border: 1px solid white; 
		  text-decoration: none;
		  color: white;
		  text-align: center;
		/* border: 1px solid white;
		transition: 0.3s; */
		/*transition: all 0.1s ;*/
		} .navBoton1 a:hover{
		/*background-color: white;*/
		font-weight: 600;
		 text-shadow: 1px 1px 2px grey;
		}

		li.tabActive{
			background-color: red;
		}

	.header_nav{}
	.header_banner{
		padding: 2rem 0;
		display: flex;
		min-width: 78rem;
		min-height: 20vh;
		background: #e1b12c;
	}
    .banner_right{
    	display: flex;
    	flex-direction: column;
    	min-width: 50rem;
    	width: 90rem;
    	max-height: 100%;
		background: #e1b12c;
    }
    .banner_right__contImg{
    	margin: 0 auto;
    	min-height: 20rem;
    	min-width: 40rem;
    }
    .banner_right__contImg img{
    	object-position: 1px -10px;
    }
    .banner_left{
    	padding: 1.2rem;
    	min-width: 27rem;
    	max-height: 40vh;
		background: #BAFF49;
    }
    .banner_left__marcofotoPerfil{
    	display: block;
    	object-fit: cover;
    	overflow: hidden;
		width: 17rem;
		max-height: 17rem;
		border-radius: 50%;
		border: 1px solid black;
		margin: auto auto;
	}
	.text_miPortafolioLorem{
		font-size: 2.2rem;
	}
	/*////////////////////////////////////////////////////////////*/
	.contMainAside{
		min-width: 78rem;
		margin: 0;
		display:flex;
	}

			
	/*////////////////////////////////////////////////////////////*/
	.contMain{
		margin: 0;
		padding: 4rem 0;
		max-width: 100%;
		background: #e1b12c;
	}

.art_event{ /*border: 2px solid blue;*/ box-sizing: border-box; padding: 20px 0px; width: 80vw; margin:4rem auto; border-radius: 15px; overflow: hidden; flex-shrink: 0; background-color: #e0ffff; }
.layImg {width: 75rem; height: 35rem; margin:auto auto;}
.layImg .img{ width: inherit; height: inherit; object-fit: cover;}
.layDetail{ margin: -40px auto 10px auto; width: 55rem; padding:20px; background-color: white; border-radius: 15px; margin-top:-10px; position: relative; text-align: center;}
.layDetail .title{font: bold 1em verdana;}
.layDetail .url{ color: blue; border: 1px solid; border-radius: 5px; padding: 5px 20px; text-decoration: none;}
	/*////////////////////////////////////////////////////////////*/
	.contAside{
		margin: 0;
		width: 100%;
		background: #BAFF49;
	} 
	/*////////////////////////////////////////////////////////////*/
	.contFooter{
		margin: 0;
		width: 100%;
		height: 3rem;
		background: black;
		color: white;
		text-align: center;
	}