@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Orbitron:wght@400..900&family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Caveat:wght@400..700&family=Great+Vibes&family=Orbitron:wght@400..900&family=Sacramento&display=swap');
:root {
	--negro: #0000;
	--verdeLogo: #e58d97;
    --verdeMusgo:#1f2605;
	--verdeHoja: #1f6521;
	--verdeChillon: #53900f;
    --amarrillo: #d6ce15;


  

	--negroFondo: #081C08;
	--grisOscuro : #474b4f;
	--grisClaro: #6b6e70;
	--violeta: #CEB7D9;
	--violetaFuerte :#C38BBD;
	--rojoFuerte: #EB1B25;
	--rosadito:#F8C2D9;
  
	--primary-50:#eaf9e8;
	--primary-100:#bbebb6;
	--primary-200:#b2e293;  
	--primary-300:#88d462;    
	--primary-400:#71cc44;
	--primary-500:#38b814; 
	--celesteModaClub:#14B893;
	--primary-600:#2aae13;
	--primary-700:#1b880f;
	--primary-800:#1d690c;
	--primary-900:#215009;
  
	--negroModa:#021510;
  
  
  }
  /*=============================================
TOP
=============================================*/

#top ul{
	padding-top:8px;
}

#top ul li{
	display:inline;
	line-height:30px;
	margin:0px 5px;
	color:white;
}

.social ul li a i{
	font-size:18px;
	margin:0 1px;
}

.registro ul{
	text-align: right;
	font-size:12px;
}

/*=============================================
HEADER
=============================================*/
#bm {
  width: 40%;
  height: 40%;
  margin: 0 auto;
 



}
header {
background: #0b0c10;
background: -webkit-linear-gradient(to top right, #0b0c10 20%, #0b0c10 44%, #0b0c10 100%);
background: -moz-linear-gradient(to top right, #0b0c10 20%, #0b0c10 44%, #0b0c10 100%);
background: linear-gradient(to top right, #0b0c10 20%, #0b0c10 44%, #0b0c10 100%);
}
header #btnCategorias{
	margin:20px 0;
	
	
}

header #btnCategorias p{
	line-height:40px;
	margin-bottom:0px;
}

header #btnCategorias p span{
	cursor: pointer;
}

header #buscador{
	margin:20px 0;
}

header #buscador input{
	padding:19px;
	border-radius:0;
}

header #buscador button{
	padding:9px;
	border:1px solid silver;
	border-radius:0;
}

header #carrito{
	margin:20px 0;
}

header #carrito button{
	padding:9px 15px;
	border:1px solid silver;
	border-radius:0;
}

header #carrito p{
	padding:2px;
	padding-left:60px;
	border:1px solid #aaa;
	font-size:12px;
}

header #categorias{
	display:none;
	margin-top:-10px;
	position: relative;
	padding-bottom:20px;
}

header #categorias h4{
	margin-top:20px;
	margin-bottom:-10px;
}

header #categorias hr{
	border:1px solid rgba(255,255,255,.3);
}

/*=============================================
VENTANAS MODALES
=============================================*/

.modalTitulo{
	padding:5px 0px;
}

.modalTitulo h3{
	text-align:center;
	margin-top:-5px;
	padding:15px 0px;
	border-radius:5px 5px 0px 0px;
}

.modalFormulario .close{
	position:absolute;
	right:27px;
	top:15px;
	color:white;
}

.modalFormulario .facebook, .modalFormulario .google{
	cursor:pointer;
}

.modalFormulario .facebook p{
	background:#46639f;
}

.modalFormulario .google p{
	background:#d6513e;
}

.modalFormulario .facebook p, .modalFormulario .google p{
	color:white;
	text-align:center;
	line-height:40px;
	padding:8px;
	font-size:18px;
	margin-top:10px;
	margin-bottom:20px;
}

.modalFormulario p i{
	margin-left:-25px;
	margin-right:25px;
	font-size:25px;	
}

.modalFormulario form{
	padding:20px;
}

.modalFormulario form hr{
	border:1px solid #eee;
}

.modalFormulario form input[type="text"], .modalFormulario form input[type="email"], .modalFormulario form input[type="password"]{
	padding:25px;
}
.modalFormulario form input[type="submit"]{
	padding:15px;
}

.modalFormulario form .checkBox{
	margin-top:10px;
}

/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width:1200px){

	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:1px 1px;
		padding-left:0px;
	}

	header #carrito{
		padding-left:50px;
	}

	.modalFormulario .facebook p{
		margin-right:-15px;
	}

}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){

	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:1px 1px;
		padding-left:0px;
	}

	header #carrito{
		padding-left:70px;
	}

	.modalFormulario .facebook p{
		margin-right:-15px;
	}

}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){

	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:1px 1px;
	}

	header #carrito{
		padding-left:55px;
	}

	header #carrito p{
		display:none;
	}

	.modalFormulario .facebook p{
		margin-right:-15px;
	}

}

/*=============================================
MOVIL (XS revisamos en 320px)
=============================================*/

@media (max-width:767px){

	/*=============================================
	TOP
	=============================================*/

	#top ul{
		text-align: center;
	}

	#top #registro{
		border-top:1px solid #222;
	}
	
	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:1px;
		padding-bottom:10px;
	}

	header #categorias{
		margin-bottom:10px;
	}

	header #buscador{
		margin-bottom:10px;
	}

	header #carrito{
		margin:0px;
	}

	.modalFormulario .google p{
		margin-top:-15px;
	}
	
}






/*FIN LETRASMOVIL*/

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}

/*animacion borde*/
.row {
	margin-right: 0;
    margin-left: 0;
}

.social-row {
	display: flex;
    flex-direction: column;
    right: 0;
    position: absolute;
}

@media (min-width: 768px) {
	.social-row {
		position: relative;
	  	flex-direction: row;
	  	justify-content: flex-end;
	}
}

.social-row a {
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-size: contain;
   	padding: 1em 0;
    z-index: 99;
    margin-bottom: 1em;
  	margin-right: 1em;
}

@media (min-width: 768px) {
	.social-row a {
	    width: 2.5em;
  	  	height: 2.5em;
	    padding: 1em 0;
	    margin-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.social-row a {
	    width: 3em;
	    height: 3em;
	    padding: 0;
	}
}

.countach {
	font-family: countach,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.tilda-petite {
	font-family: tilda-petite,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.montserrat {
	font-family: montserrat, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.skintone-text {
	color: var(--skintone-color);
}

.dark-text {
	color: var(--dark-color);
}

.white-text {
	color: #fff;
}

 /* a:hover {
	color: #c2c2c2;
}  */

.dark-background {
	background: var(--dark-color);
}


.logo {
	width: 20vh;
}

@media (min-width: 768px) {
	.logo {
		width: 16em;
	}
}

@media (min-width: 992px) {
	.logo {
		width: 18em;
	}
}

@media (min-width: 1200px) {
	.logo {
	    width: 28vh;
    	height: 28vh;
	}
}

h1 {
	font-size: 4.5vh;
    letter-spacing: 4px;
    padding-top: .5em;
}

@media (min-width: 992px) {
	h1 {
		font-size: 2.75em;
	}
}

@media (min-width: 1200px) {
	h1 {
		font-size: 3em;
	    letter-spacing: 5px;
	}
}

.lead {
    font-size: 1.5rem;
  	padding-top: 0.5em;
}

@media (min-width: 992px) {
	.lead {
	    font-size: 2rem;
	    padding-top: 0.5em;
	}
}

@media (min-width: 1200px) {
	.lead {
    	font-size: 2.5rem;
		padding-top: 1em;
	}
}

p.general {
    font-size: 2.5vh;
    margin-bottom: 0.5em;
    line-height: 1.25em;
}

@media (min-width: 992px) {
	p.general {
		font-size: 1.25em;
		 line-height: 1.5em;
	}
}

@media (min-width: 1200px) {
	p.general {
	    font-size: 1.5em;
	}
}


.inner-border {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.outer-border {
	border: 2px solid #3fc04f;
   	height: 98%;
    width: 98%;
    padding: 6px;
    margin: 0 auto;
}

@media (min-width: 992px) {
	.outer-border {
		height: 94%;
	}
}

.mid-border {
    border: 6px solid #3fc04f;
    height: 100%;
    width: 100%;
    padding: 6px;
    margin: auto;
}

.inner-border {
	position: relative;
	border: 2px solid #3fc04f;
    height: 100%;
    width: 100%;
    margin: auto;
}


/* Decorations */
.corner-decoration {
	position: absolute;
    width: 3em;
    margin: -3px;
}

@media (min-width: 768px) {
	.corner-decoration {
		width: 3.5em;
	  	margin: -4px;
	}
}

@media (min-width: 992px) {
	.corner-decoration {
		width: 4em;
	  	margin: -5px;
	}
}

@media (min-width: 1200px) {
	.corner-decoration {
		width: 5em;
	  	margin: -6px;
	}
}

.corner-decoration.corner-left-top {
	left: 0;
	top: 0;
}

.corner-decoration.corner-right-top {
	top: 0;
	right: 0;
	 -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.corner-decoration.corner-right-bottom {
	right: 0;
	bottom: 0;
	 -webkit-transform: scale(-1);
  	transform: scale(-1);
}

.corner-decoration.corner-left-bottom {
	left: 0;
	bottom: 0;
	-webkit-transform: scaleY(-1);
  	transform: scaleY(-1);
}


.vertical-decoration {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 11em;
}


@media (min-width: 768px) {
	.vertical-decoration {
		width: 16em;
	}
}


@media (min-width: 992px) {
	.vertical-decoration {
		width: 20em;
	}
}

@media (min-width: 1200px) {
	.vertical-decoration {
		width: 27em;
	}
}

.vertical-decoration.top {
	top: 0;

}

.vertical-decoration.bottom {
	bottom: 0;
	-webkit-transform: scaleY(-1);
  	transform: scaleY(-1);
}






/* ANIMACION NOMBRE*/ 

h5{
  position:relative;
  font-family: Origin Tech Demo ;
  color: #fff;
  /*font-weight: 200;
  /*text-transform: uppercase;*/
  font-size: 2em;
  letter-spacing: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, #26a65b, #EAEE0B, #0BEE0F);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.1);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100%{
    background-position: 500%;
  }
}

.wrap{
  /* position:relative; */
  display: inline-flex;
  flex-wrap: wrap;
  margin:auto;
  /* width:95vmin; height:95vmin;
   background:transparent; */


}
.navbarMio {
	border: var(--primary-900) solid 1px;
	background-color: var(--primary-100);
	margin-top: 2%;
	border-radius: 8px;
  }
  .inputBtonMio {
	border: var(--primary-900) solid 1px;
	color: var(--primary-900);
	margin-top: 2%;
  }
  .custom-toggler.navbar-toggler {
	border-color: var(--primary-900);
  } 
  .custom-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(33,80,9, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  .navbar-toggler:hover {
	box-shadow: 0 0 5px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 20px #102642 , 0 0 30px #99cc33, 0 0 40px #99cc33 , 0 0 20px #99cc33 inset ;
  }

  .colorIcono{
	color: var(--primary-900);
  }
.menu{ 
	display: flex; 
	margin-top: 4px;
	margin-left: 4px;
	margin-right: 4px;
	margin-bottom: 4px;
	border:1px solid var(--verdeHoja);
	border-radius: 10px;
  /* position:absolute;
  left:0; top:0; */
  /* width:47.5%; height:47.5%;
  overflow:hidden;
  background:#050505; */
}
.menu div{
display: inline;
	overflow:hidden;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
    border-radius: 10px;
	margin-left: 8px;
	color: var(--verdeHoja);
   
   
 
}
.menu:nth-child(1){
  border-radius:10%;

 
}
.menu:nth-child(1) {
  background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('https://ledesmasoluciones.com.ar/quiensoy.webp');

}
.menu:nth-child(2){
  border-radius:10% ;
  /* left:50.5%; */
 


}
.menu:nth-child(2) div{
  background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('https://ledesmasoluciones.com.ar/diseno3.webp');

}
.menu:nth-child(3){
  border-radius:10%;
  /* top:50.5%; */

}
.menu:nth-child(3) div{
  background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('https://ledesmasoluciones.com.ar/reparacion2.webp');

}
.menu:nth-child(4){
  border-radius:10%;
  /* top:50.5%; left:50.5%; */

}

.menu:nth-child(4) div{
  background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://ledesmasoluciones.com.ar/productosmenu2.webp');

}
.menu:nth-child(5){
  width:55%;height:55%;
  left:22.5%; top:22.5%;
  border-radius:50vmin;

  box-shadow: 0 0 5px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 20px #102642 , 0 0 30px #99cc33, 0 0 40px #99cc33 , 0 0 20px #99cc33 inset ;
}






.menu:hover {
transition-duration: 1s;
transform:scale(0.8) translatez(0px);
	box-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #102642 , 0 0 70px #99cc33, 0 0 80px #99cc33 , 0 0 100px #99cc33 ;
}




#quiensoy {
display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
  margin:0px auto;
  padding:0%;

}


#quiensoytxt{
 /* -webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg);  */
	/* text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre; */
}





#reparacion {
 /* -webkit-transform: rotate(50deg); 
-moz-transform: rotate(50deg);  */
	/* text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre; */
}

#ventas{
 /* -webkit-transform: rotate(-50deg); 
-moz-transform: rotate(-50deg);  */
	/* text-decoration: normal;
  text-align: top;
  -o-text-overflow: clip;
  text-overflow: clip; */
  white-space: pre;
 
}

#diseno{
 /* -webkit-transform: rotate(50deg); 
-moz-transform: rotate(50deg);  */
	/* text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre; */
 
}

h2{
	font-size: 24px;
}
.contenedorLogo{
	margin-top: 100px;


}
#logoLedesma{
	margin-top: 20px;
	margin-bottom: 5px;
	width: 50%;
	

}

.button1 {
  background-color: black; 
  color: green; 
  border: 2px solid #4CAF50;
  border-radius: 5px;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

#quien{

	position:relative;
  font-family: Origin Tech Demo ;
  color: #fff;
  /*font-weight: 200;
  /*text-transform: uppercase;*/
  font-size: 2em;
  letter-spacing: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, #26a65b, #EAEE0B, #0BEE0F);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.1);
}


  .iconos1 {
    background-color: black; 
    color: green; 

  }

  .HolaEImagen{
  		margin: auto;
	width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
 border-top: 10px double #3bb54a;
border-bottom: 10px double #3bb54a;
border-right: 10px double #3bb54a;
border-left: 10px double #3bb54a;
border-radius: 40px 40px 40px 40px;
  }

 
  .presentacionDerecha{
  	width: 60%;
  	margin-left: 3%;
  	
  }

main #imgPerfil { 
	margin: auto;
	width: 75%;
	background-color: black;


}
 .img-thumbnail{
     background-color:transparent;  
     background: transparent;
     border-radius: 100%;
   border: 3px solid var(--verdeMusgo);
 box-shadow: 0 0 5px rgba(255,255,255,1) , 0 0 10px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #102642 , 0 0 40px #99cc33, 0 0 40px #99cc33 , 0 0 10px #99cc33 ;

}

p{
	font-family: Roboto,black;
}
header{
	
}

main{	
	/* margin-top: auto;
	
	 border-radius: 10px; */
	 

}
	 
.imgPresentacion{
	width: 300px;
	height: 200px;
	margin: auto;
}
.H2NosotrosSubEncabezado{
	font-size: 36px;
	color: var(--primary-50);
	text-align: center;
	margin-top: 16px;
	margin-bottom: 8px;

	font-family: "Great Vibes", cursive;
  color: var(--primary-50);
  /*font-weight: 200;
  /*text-transform: uppercase;*/

}
.H2NosotrosSubEncabezado2{
	font-size: 16px;
	color: var(--primary-50);
	text-align: left;
	margin-top: 8px;
	margin-bottom: 8px;
	font-family: "Orbitron", sans-serif;
  color: var(--primary-50);
  /*font-weight: 200;
  /*text-transform: uppercase;*/

}


main h5{
	text-align: center;
}

.h2Animacion{
	margin: 5%;
	position:relative;
  font-family: Origin Tech Demo ;
  color: #fff;
  /*font-weight: 200;
  /*text-transform: uppercase;*/
	opacity: 1;
  letter-spacing: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #3BB54A);

  background-size: 90%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.1);
}



 h3{
	text-align: center;
	color:#3BB54A ;
}

main ul  {
	
color:#3BB54A ;
}
main h2 {
	text-align: center;
}

.nav li {
	border: 1px solid white;
	border-radius: 6%;
	
}

.nav li.active a{
    color: red;
  }
.grupoCard {
	margin: auto;
	width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;

}
.CardLateral {
	display: inline-flex;

	align-items: center;
	width: 100%;
	/* border: 5px solid var(--primary-900);
	border-radius: 5px; */
margin: 0;


}


.imgContenedor{

	width: 40%;
	margin: auto;

	

}

.txtContenedor h4{
		width: 60%;
	margin-left: 3%;
	color: var(--negroFondo);



}

.Subtitulo p{
	
color: var(--negroFondo);
}
main .txtContenedor p {
	color: var(--negroFondo);
}

.txtContenedor {
		width: 60%;
	margin-left: 3%;
	

}

.txtContenedor .tituloCard h4{ width:100% }
.CardLateral .button1{ margin-bottom:3%;  }

#enque{

	margin-left: 15%;
}


#saludo{
	width: 25%;
}

.fondoanimacion{
		background: black;
	border: 10px double #3BB54A;
	border-radius: 50%;
}

.presentacionDerecha .button1{ margin-bottom:3%;  }

#Nosotros{

	margin: auto;
	width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
 .decorate {
	position: fixed;
	z-index: -140;
	bottom: 0;
	left: -20px;
	pointer-events: none;
	width: 100px;
	height: 300px;
  }
  .lines {
	position: fixed;
	z-index: -160;
	bottom: 0;
	pointer-events: none;
	width: 100px;
	height: 400px;

}
.lines .line {
	position: absolute;
	width: 3.5px;
	height: 100%;
	top: 0;
	left: 14px;
	background: var(--primary-900);
	box-shadow: 0px 0px 5px 0px #031802;
}
.llave {
	position: fixed;
	z-index: 0%;
	right: 0;
	bottom: 0;
	pointer-events: none;
	width: 150px;
	height: 250px;
  }
  .whatsapp {
	position:fixed;
	width:60px;
	height:60px;
	bottom:220px;
	right:40px;
	background-color:#25d366;
	color:var(--primary-50);
	border-radius:50px;
	text-align:center;
	font-size:40px;
	z-index:100;
  box-shadow: 0px 0px 9px 2px #65e463;
  
  }
  .whatsapp :hover {
	  
  -webkit-box-shadow: 0px 0px 73px 14px var(--primary-500);
  -moz-box-shadow: 0px 0px 73px 14px var(--primary-500);
  box-shadow: 0px 0px 73px 14px var(--primary-500);
	
	
  }
  
  
  .whatsapp-icon {
	margin-top:13px;
  }

@media only screen and (max-width: 600px) { 
	.decorate {
		
		width: 80px;
		height: 150px;
	  }
	  .lines {
		left: -5px;
		width: 20px;
		height: 200px;
	}
	.llave {
		position: fixed;
		z-index: 0%;
		right: 0;
		bottom: 0;
		pointer-events: none;
		width: 80px;
		height: 150px;
	  }
	  .whatsapp {
		
		width:60px;
		height:60px;
		bottom:125px;
		right:10px;
	
	  
	  }

}