@media screen and (max-width: 900px) {
/* El scroll */
html , body{ max-width: 100% !important;
	overflow-x: hidden !important;}


/* header */
header {
width: 100%;
height: 600px;
background:  url(../img/Fondo-header.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;	
background-attachment: fixed;}

.what{position: fixed;
bottom:110px;
left:0px;
color: white;
z-index: 999;}

.what a i{
position: absolute;
font-size:35px;
background:  rgba(14, 135, 12, 1) ;
z-index: 4;
border-radius: 0px 30px 30px 0px;
width: 50px ;height:50px;
display: flex;
justify-content: center;
align-items: center;}

.what a{color:white;
text-decoration: none;}

.what a p{font-size: 18px; 
padding-left: 55px;
left: -250px;
width: 0px;
position: absolute;;
border-radius: 0px 33px 33px 0px;
display: flex;
align-items: center;
;font-family:Leonsans;
background:  rgba(14, 135, 12, 1) ;}

.what a:hover > p{
opacity: 1;
visibility: visible;;
transition:all 1.4s ease ;
width: 150px ;
left: 0px;
height: 50px;}

.what2{position: fixed;
bottom:55px;
left:0px;
color: white;
z-index: 999;}

.what2 a i{
position: absolute;
font-size:35px;
background:#0e77a8;;
z-index: 4;
border-radius: 0px 30px 30px 0px;
width: 50px ;
height:45px;
display: flex;
justify-content: center;
align-items: center;}

.what2 a{color:white;
text-decoration: none;}

.what2 a p{font-size: 18px; 
padding-left: 55px;
left: -250px;
width: 0px;
position: absolute;
border-radius: 0px 33px 33px 0px;
display: flex;
align-items: center;
;font-family:Leonsans;}

.what2 a:hover > p{
opacity: 1;
visibility: visible;background:#0e77a8;;
transition:all 1.4s ease ;
width: 150px ;
left: 0px;
height: 45px;}


.todo{ background: rgba(2,0,1,0.8);
height:70px;}

.heade-a{margin: 0 auto;
max-width: 1500px;
margin: 0 auto;}

.conten{ display: flex;
max-width: 1500px;
margin: 0 auto}

.btn-men{
margin: 0 auto;
display:grid;
grid-template-columns: repeat(2,1fr);
width: 100%;
padding: 7px 0px;
max-width: 800px;}

.conten i{
font-size: 29px;
margin-left: 20px;
margin-top:15px;
margin-right: 20px;  
color: white; 
cursor: pointer;}

.conten i:hover {
color:#2feab8;
;transition: all 1s ease;
filter: drop-shadow(0px 0px 1px #2feab8);
transform: rotate(-90deg);}

.conten nav {display: inline-flex;
justify-content: right;
align-items: right;}

.conten nav ul{margin-right: 5px;
margin-top: 20px;display: none;}

.conten nav li{
display:inline-block;
text-decoration: none;
color: #ffff;
margin-right: 10px; ;}			

.conten nav a{
text-decoration: none;
color: #ffff; 
font-style: normal;
font-size: 23px;
border-bottom: 3px solid transparent;
font-family:StickNoBills;
letter-spacing: 1px;}

.conten nav ul li #inicio{  
cursor: pointer;
transition: all 1s ease;
color:#2feab8;	
border-bottom: 2px solid #2feab8}

.conten nav ul li a:hover{
border-bottom: 2px solid;
color:#2feab8;
transition: all 300ms ease-out;
cursor: pointer;
text-shadow: 0px 0px 20px black;
width: 100%}

.conten nav:hover > ul li  #inicio{
color:white;
border-bottom:2px solid transparent;
 	 	transition: all 1s ease;}

.conten nav ul li #inicio:hover{
border-bottom: 2px solid;
color:#2feab8;
transition: all 300ms ease-out;
cursor: pointer;
text-shadow: 0px 0px 20px black;
width: 100%}


.conten #img{
width:70px;
height:40px; 
border-radius: 50%;
margin-top:10px;
margin-right: 30px;
box-shadow: 0px 0px 2px  #00BB89;;
padding: 1px;}

.conten #img:hover{	
box-shadow: 0px 0px 14px #00BB89;
transition:all 0.5s ease-out}


#btn-men{position: relative;
display: none;}

.container-menu{
position: absolute;
background: rgba(7,7,7,0.89);
height:600px;
width:250px;
top: 0px;
left: -600px;
transition: all 900ms ease;
opacity: 0;
visibility: hidden;
z-index: 1;
max-width: 1800px;
overflow: hidden;
z-index: 999}

#btn-men:checked ~ .container-menu{
opacity: 1;
visibility: visible;
transition: all 1.5s ease;
left:0%;
z-index: 999}

.cont-menu{ 
width: 100%;
height: auto;
position: relative;
z-index: 1;
max-width: 1800px ;
margin: 0 auto;
z-index: 999}

.cont-menu nav{margin-top:80px}

.cont-menu  nav a{ 
	display: block; 
text-decoration: none;
font-style: normal;
 font-size: 22px;
color: #c7c7c7c7;
font-family:StickNoBills;
display: flex;
justify-content: center;
align-items: center;
padding:7px;
margin: 0px 10px;
border-radius:20px}
			
.cont-menu nav a:hover{ 
background:rgba(38, 125, 200,0.4); 
transition: all 1.2s ease-out;
box-shadow: 0px 0px 2px rgba(38, 125, 200,0.4)}

.cont-menu nav .sociales{display: flex;
align-items: center;
justify-content: center;
margin:10px auto;}

.cont-menu  nav .sociales a{ 
	display: block; 
text-decoration: none;
font-family: 'Stick No Bills', sans-serif;
font-style: normal;
 font-size: 30px;
color: #c7c7c7c7;
border-radius: 50%;
padding: 0px 10px}

.cont-menu  nav .sociales a:hover{ 
background:transparent; 
color:#ffff  ;
transition: all 1.2s ease-out;
animation:loop 2s infinite ;
box-shadow: 0px 0px  0px rgba(38, 125, 200,0.4)}

@keyframes  loop{
	0%{transform:scale(1.0);}
	50%{transform:scale(1.3)}
	100%{transform:scale(1.0)}}

.cont-menu  nav .sociales a > .fa-facebook:hover{
color:#0253cc;
transition: all 1 ease-out;
filter: drop-shadow(0px 0px 10px #0253cc);}

.cont-menu  nav .sociales a > .fa-instagram:hover{
color: #9E37B8 ;
filter: drop-shadow(0px 0px 10px #9E37B8);  
transition: all 1 ease-out}

.cont-menu  nav .sociales a > .fa-google-plus:hover{  
color:#d33672  ;
transition: all 1 ease-out;
filter: drop-shadow(0px 0px 10px #d33672 ) }


.cont-menu  nav a #inicio{  
cursor: pointer;
transition: all 1s ease;
background:rgba(28, 125, 155,0.4); 
color: red;
border-bottom: 2px solid }

 .cont-menu label{ position: absolute; 
right: 10px;
color: #ffff; 
cursor: pointer; 
font-size:24px  ;
border: 1px solid transparent;
border-radius: 50%;
top: -60px;;
padding: 4px 8px ;
transform: rotate(-90deg)}      

.cont-menu label:hover {color:#2feab8;
filter: drop-shadow(0px 0px 1px #2feab8) ;
transition: all 1s ease;
transform: rotate(90deg)}

.saludo{
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
margin-top: 200px;
width: 500px;
background: rgba(0,0,0,0.8);
padding:10px 10px;
border-radius:13px;
box-shadow: 0px 0px 3px  #009fbb;

background-size: 800px 300px;}

@keyframes lot{
	0%{text-shadow: 0px 0px 10px #009fbb}
  50%{text-shadow: 0px 0px 30px #8f12dd}
	100%{text-shadow: 0px 0px 10px #009fbb}}
	
.saludo h1{ 
font-family:StickNoBills;
text-shadow: 10px 6px 10px black;
text-align:center;
margin: 0 auto;
color:#ffffff ;  
font-size:70px;
text-align: center;
text-shadow: 0px 0px 10px #009fbb;
animation: lot 6s infinite;}

.saludo  p {
font-size:25px;
text-align: center; 
line-height:1;
color:#32dfb4;;
text-shadow: 0px 0px 10px black;
border-bottom: 1px solid #16c7deb0;;
width: 230px;
margin: 0 auto;
font-family:type;
}		

/* bienvenida */
.Bienvenido{color: white;
margin: 50px auto;
width:75%;
max-width:100%;}

.Bienvenido .hello{
padding: 20px 10px;
margin: 10px 10px;
border-radius:10px}

	.Bienvenido .hello h4{
	font-size: 40px;
	font-family:StickNoBills;text-align: center;
margin: 5px 0px;}

.Bienvenido .hello  p {font-size:15px;
color: white;
;width:90%;
text-align: center;
font-family:Leonsans;
margin: auto;
line-height: 1.1;
max-width: 530px;}	

	.Bienvenido .hello h5{
	font-size: 28px;
	font-family:StickNoBills;text-align: center;
	margin-top: 15px}

.Bienvenido .hello ul{
font-size: 14px;text-align: center;
display:block;
margin: 0 auto;font-family:Leonsans;;
width: 85%
;padding-bottom: 20px;}

.Bienvenido .hello li{list-style: non;
font-size: 14px;
width:100%;
margin: 0 auto;
padding-top:2px}

/* web */
.pag-web{
background: rgba(10,10,10,0.66);
padding:20px 0px}

.pag-web-a{display:grid;
grid-template-columns: repeat(2	,1fr);
width:90%;
margin: 0% auto;
max-width:100%;}

.web{width:100%;
margin: 0 auto;}

.web  h4 {
text-shadow: 0px 5px 5px black;
text-shadow: 0px 0px 2px rgba(15, 17, 125,0.9);
letter-spacing: 1px;
margin-top: 10px;
font-family:StickNoBills;
font-size:30px;
color:rgb(01, 184, 255);}

.web p {font-size:15px;
color: white;
;width:97%;
line-height: 1.3;
margin-top: 5px;
text-align: left;
margin-bottom: 20px;
font-family:Leonsans;}		

.web a{text-decoration: none;
	margin-top: 40px}

.web #car {
padding:5px 10px;
cursor: pointer;
  text-align:center;
  color: white;  
font-size:16px ;
border-radius:33px;
font-family:TitilliumWeb;
letter-spacing: 3px;;
background-size:100%;}

.web #car:hover {
  background-size:100% ;
  transition: all 2s ease-in-out;
box-shadow:0px 0px 20px  rgba(113, 69, 232, 0.8);}


.pag-web .img{  
position: relative;
background:  url(../img/foo.png); 
background-size: 100% 250px;
background-repeat: no-repeat;
max-width: 600px;
;} 

.pag-web .img img {   
text-align: center;
border-radius: 5px;
margin: 0 auto;
width: 90%;
;height: 250px; }

.pag-web .img img:hover {   
transition: all 1s ease-out;
filter: drop-shadow(0px 0px 20px rgba(156, 18, 169, 0.7)); }


/* beneficios */
.divido{
display: grid;
grid-template-columns: repeat(2,1fr);		
background: url(../img/banner.webp);
background-size: 100% 400PX;
background-position: center;
padding:20px 40px;
margin:40px auto; 
border-radius:33px;
width: 95%;}

.divido .parte1 {width: 100%}

.divido h5{font-size:20px;
color:white ;
text-shadow: 0px 5px 5px black;
letter-spacing: 1px; 
font-family:Leonsans;}

.divido p {font-size:15px;
color: white;
;width:96%;
line-height: 1.3;
margin-top: 15px;
max-width: 500px;
text-align: left;
margin-bottom: 0px;
font-family:Leonsans;}		

.divido article ul{
margin-top: 10px;}

.divido article li {font-size:15px;
color: white;
line-height: 1.3;
max-width: 500px;
text-align: left;
list-style: none;
font-family:Leonsans;
border-bottom: 1px solid transparent}		

.divido article li::before {
  content: "+ ";
  font-size:15px}

/* web */

.pag-web-b{display:grid;
grid-template-columns: repeat(2	,1fr);
width:99%;
margin: 0% auto;
margin-bottom: 10px;}

.web2{width:100%;
margin: 0 auto;
margin-left: -20px;}

.web2  h4 {font-size:28px;
text-shadow: 0px 5px 5px black;
text-shadow: 0px 0px 2px rgba(15, 17, 125,0.9);
color:rgb(01, 184, 255);
font-family:Leonsans;
letter-spacing: 1px;
margin-top: 10px;
font-family:StickNoBills;
width: 80%;}

.web2 p {font-size:15px;
color: white;
;width:96%;
line-height: 1.3;
margin-top: 5px;
text-align: left;
margin-bottom: 10px;
font-family:Leonsans;}	

.web2 ul {display: grid;
grid-template-columns: repeat(2,1fr);}

.web2 ul li {font-size:15px;
color: white;
;width:90%;
line-height: 1.1;
margin-left: 25px;
font-family:Leonsans;
font-family:TitilliumWeb}	

.web2 ul li::marker{color: #37b0b8;}

.web a{text-decoration: none;
	margin-top: 40px}

.pag-web2.img2{ 
position: relative; 
background-size: 90% 250px;
background-repeat: no-repeat;
max-width: 600px;
;} 

.pag-web2 .img2 img {   
text-align: center;
border-radius: 5px;
margin: 0 auto;
width: 70%;
;height: 250px;
max-width: 550px;
margin-left: 50px; }

.pag-web .img img:hover {   
transition: all 1s ease-out;
filter: drop-shadow(0px 0px 20px rgba(156, 18, 169, 0.7)); }


.portafolio{
width: 100%;
align-items: center; 
margin:0px auto; 
text-align: center; 
background-size: 100% 100%;
background-repeat: no-repeat;
padding:20px 0px 20px 0px;
background-image: url(../img/pro.svg);	
background-size: cover;
background-repeat: no-repeat;
background-position: center; 
max-width: 100%;}


.proyectos h5 {width:100%;
line-height: 1;
max-width:260px;
text-align: center;
margin: 15px auto;
font-family:StickNoBills;
font-family:TitilliumWeb;
font-size:40px;
color:rgb(01, 184, 255);}	

.proyectos p {font-size:15px;
color: white;
;width:80%;
line-height: 1.3;
max-width:600px;
text-align: center;
margin:0px auto;}		

.trabajos{display: grid;
grid-template-columns: repeat(3,1fr); 
width:95%;
max-width:100%;
justify-content: center;
align-items: center ;
margin: 20px auto;
grid-gap:10px ;}

.pro {width:100%;  
background:rgba(07, 51, 124,0.2); 
border-radius:20px ;
box-shadow:0px 0px 0cap rgba(8, 189, 209, 0.5);
padding-top: 10px;
}

.pro:hover{ 
	box-shadow:0px 0px 10px rgba(8, 189, 209, 0.5);; 	
cursor: pointer;
transform: scale(1.08);
z-index: 3;
background:rgba(07, 51,104,0.6);
transition: all 1s ease;}

.pro a{text-decoration: none;}

.pro img{width:95%;
height:120px;
margin: 0px auto;
justify-content: center;
align-items: center;
display: flex;
border-radius: 10px; }


.pro h3 { color:rgb(229, 245, 248); 
		font-size:16px;
		text-align: center;
font-family:Leonsans;
margin-top: 10px;}

.pro p {
padding:5px 0PX;
font-size:13px;
color: rgb(229, 245, 248);
text-align: center;
font-family:Leonsans;
width:90% ;
text-decoration: none;}				

.pro button{background:rgba(01, 184, 255,0.4);
	border-radius:5px;
	padding:3px 15px;
margin: 10px;
 font-family:StickNoBills;
 border: none;
 font-size:15px;cursor: pointer;
 border: 1px solid rgba(255, 255, 255, 0.654);}


.pro button:hover{background:rgba(129, 1, 155, 0.6);
transition: all 1s ease-out ;
color: white;}

#servicio{
	padding:30px 0px ;
background: rgba(4, 7, 36, 0.98);}

.ser{display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap:10px;
width:95%;
margin: 10px auto;
height: auto;
max-width: 750px;}
.ser .s1 div{
width: 100%;}

.ser .s1 div img{
	width: 100%;
background: rgb(6, 12, 17);
height: 200px;;
margin-bottom: 10px;
border: 1px solid rgb(4, 42, 141,0.77);}

.ser .s0 h5{
font-size:18px;
text-align: center;
padding-top: 5px;
width:100%;
color: white;  
color: #ecf0f1;
font-family:Leonsans}

.ser .s1 div p{
font-size:14px;
text-align: left;
width: 100%;
color: #ecf0f1; 
font-style: normal;
line-height: 1.3;
padding:5px 15px;
margin-top: 0px;
font-family:Leonsans}

.ser .s0 {
	width: 100%;
padding:10px 0px;
background: linear-gradient(to right,#033a64, #341073,
 #1762b3);
background-size:600% 600%;}


.ser .s0:hover{
transition: all 2s ease-out;
cursor: pointer;
  background-position: 70% 0%;}

.ser .s2 div img{
	width: 100%;
	height:185px;
	margin-top: 10px ;
border: 1px solid rgb(4, 42, 141,0.77);}

.ser .s2 div p{
font-size:14px;
text-align: left;
width: 100%;  
font-family: TraditionSansXLight;
color: #ecf0f1	; 
font-style: normal;
line-height: 1.3;
padding:5px 15px;
margin-top: 0px;
font-family:Leonsans}


.ser .s3  li{
font-size:14px;
text-align: left;
width: 100%;color: #ecf0f1; 
font-style: normal;
list-style: none;
line-height: 1.2;
padding:0px 15px;
margin-top: 0px;
font-family:Leonsans}

.ser .s3  li::before{content:"! " ;
color: rgb(240, 240, 240);
font-size:17px;}

.coon{width: 90%;margin: 10px auto}

.coon h5 {
color:white;
;width:70%;
line-height: 1;
margin: 0px auto;
text-align:center;
max-width: 700px;
font-family:Leonsans;
margin-top: 40px;
font-family:StickNoBills;
font-size:60px;
color:rgb(01, 184, 255);
font-family:TitilliumWeb;
font-size:40px}

.coon p {font-size:15px;
color: white;
;width:85%;
line-height: 1.3;
text-align:center;
font-family:TitilliumWeb;
margin: 5px auto;
max-width: 700px;}		


.contmary{  display: grid; 
			grid-template-columns: repeat(3,1fr);
			width: 90%;
			margin: 20px auto;
			max-width: 1100px}

.contalfa{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 180px;
margin-bottom: 10px}

.contalfa figure{position: relative;
	height:180px;
	width: 95%;
	overflow: hidden;
	box-shadow:0px 0px 5px  rgba(0,0,0,0.5)
	;cursor: pointer;}

.contalfa figure img{ 
width: 100%; 
height: 180px;
transition: all 500ms ease-out}

.contalfa figure .capa2{
position: absolute;
top: 0; 
width: 100%;
height: 180px;
background: rgba(24, 23, 27,0.9);
opacity: 0;
visibility: hidden;
text-align: center;
border: 1px solid black;}

.contalfa figure:hover > .capa2{opacity: 1;
	visibility: visible; 
width: 100%;
transition: all 3s ease ; }

.contalfa figure:hover > .capa2 h4{
		padding: 0; 
		transition: all 1.5s ease ; 
			color: #fff;
		font-size:20px;
		width: 100%;
		text-align: center;
		margin-top: 20px;
font-family:Leonsans;}


.contalfa figure:hover > .capa2 p{
	margin:0px auto; 
font-size:15px;
transition: all 700ms ease ;color: #fff;
width: 90%;
transition: all 1.5s ease;
font-family:Leonsans;}

.mensaje-f{width: 80%;
max-width: 700px;
margin: 50px auto;
display: grid;
grid-template-columns: repeat(2,1fr);
;background-color: #5822bcb1 ;
border-radius: 33px;
padding-left: 20px;}

.mensaje-f .imagen img{ 
	width: 280px;height: 200px;}

	.mensaje-f .texto h6{
		font-family:TitilliumWeb;
		font-size: 25px;
		padding-top: 20px;
		color: white;}

		.mensaje-f .texto p{
color: white;
width: 90%;
line-height: 1.1;
font-family:TitilliumWeb;
font-size: 15px;}

.mensaje-f .texto button{background: chocolate;
border: none;
margin-top: 20px;
padding: 10px;
	border-radius: 20px 10px 20px 10px}

.mensaje-f .texto button:hover{
border: none;
margin-top: 20px;
border-radius: 20px 10px 20px 10px;
box-shadow: 0px 0px 10px chocolate;
transition: all 2s ease;
text-shadow: 0px 0px 10px black;}


	.mensaje-f .texto button a{
		font-family:TitilliumWeb;
		font-size: 15px;
		text-decoration: none;
		color: white;}


.container-form {
width: 100%;
margin-top: 30px;
background: hsla(205, 28%, 28%, 1);
background: radial-gradient(circle, hsla(205, 28%, 18%, 1) 0%, hsla(0, 3%, 6%, 1)95%);
padding: 30px 0px}

.all{padding: 0px}

.containerpx{width: 95%;
display: grid; 
grid-template-columns: repeat(2,1fr);
grid-gap:10px;
margin: 0px auto;
max-width: 890px;
padding:20px 0px;}

.info-form h6 {
font-size: 20px;
color:#ffff ;
font-family:Leonsans;
text-align: center;
letter-spacing:1px;
margin-top: 20px}

.info-form p{
font-size:14px;  
color:#ffff;	
text-align:center;
margin: 10px auto;
font-family:Leonsans;
width: 300px}

.contac{margin-top: 20px}

.container-form a {
	font-size: 16px;
	 color:#ffff;
font-family:Leonsans;
text-decoration: none;}


.contac a p b {
font-family:Leonsans;
text-decoration: none;
color:white}


.contac a p  {
font-family:Leonsans;
text-decoration: none;color:gray;
padding-top: 5px}


.contac a p:hover  {
font-family:Leonsans;
text-decoration: none;color:white}


.footer-red-social ul{
display: grid;
grid-template-columns: repeat(3,1fr);
width:250px;
margin: 0px auto}	

.footer-red-social ul li{
position: relative;
list-style: none;
margin: 10px;
cursor: pointer;
display: flex; 
justify-content: center;
align-items: center;}

.footer-red-social  ul li a {text-decoration: none;}

.footer-red-social ul li a .fa 
{font-size: 30px;
	border-radius:50%;
width: 50px; 
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: white;}


.footer-red-social  ul li a .fa-facebook:hover{
color:#4abce6;
transition: all 1 ease-out;
transform: scale(1.3);
transition: all 1s ease;}

.footer-red-social  ul li a .fa-instagram:hover{
color:#9E37B8 ;
transition: all 1 ease-out;
transform: scale(1.3);
transition: all 1s ease;}

.footer-red-social  ul li a  .fa-google-plus:hover{  
color:#d33672  ;
transition: all 1 ease-out;
transform: scale(1.3);
transition: all 1s ease;}

form{ 
width:100%;
padding: 10px ;
box-shadow: 0px 0px 30px black;
color: white}

form h6 {
font-size: 20px;
color:#ffff ;
font-family:Leonsans;
text-align: center;
letter-spacing:1px;
margin-top: 10px}

.container-form form .campo
{background:none;
display: block;
margin: 15px 10px;
padding:10px;
font-size: 16px;
border: 0;
border-bottom: 1px solid gray;	
outline: 0px;
outline:none;
cursor: pointer;
width: 99%;
font-family:Leonsans;
color: white}

.container-form form .campo::placeholder {
font-size: 16px;
background: none;
font-family:Leonsans;
color: white;}

.select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

font-family:Leonsans;}

.select::-ms-expand {
    display: none;
border:0;
font-family:Leonsans;}	

.select{
	display: inline-block;
	cursor: pointer;
  	outline: 0; 
  	font-size: 16px;
    transition: all 0.25s ease;
    outline:none;
	border: 0;
	background:  none;
	margin:10px;
	width:90%; 	
	padding: 5px;
font-family:Leonsans;
border-bottom: 1px solid gray;
color: white}

.select option{
background:#111111;
border: none;
font-family: monospace;
border: 0px ;
color: white}

.select option::placeholder :hover {
color: white;
font-size: 16px;
background: none;
font-family:Leonsans;
color: white}

.container-form .btn-enviar
{display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
padding:10px;
font-size:16px;
border: none;
outline: 0px;
color:white;
cursor: pointer;
margin-top:10px;
font-family:Leonsans;
box-shadow: 0px 0px 10px black;
background: transparent;}

.container-form .btn-enviar:hover {
box-shadow: 0px 0px 20px hsla(225, 18%, 8%, 1);
background: hsla(225, 18%, 28%, 1)}

.piedepag .grupo1{
	width: 100%;
	margin: auto;
	grid-gap: 5px;
	padding: 10px 0px }


.piedepag{
padding:5px;
background:#0A0D11}

.Creador{
text-align: center; 
width: 700px;
margin: 0 auto;}

.Creador a{text-decoration: none;
color:white;
width: 100%;
letter-spacing: 1px}

.Creador a{
font-size: 20px ;
color: #24dff9;
font-family:StickNoBills;}

.Creador a:hover{
color:#2feab8}
	
.Creador p {color: white;
font-family: monospace;
font-size: 14px;
font-family:Leonsans}

.Creador p a {color: white;
font-family: monospace;
font-size: 14px;
font-family:Leonsans}

.Creador p a:hover{color:#2feab8}

cite {color:white;
font-family: monospace;
font-size:10px;
font-family:Leonsans;
opacity:0.5;
cursor: pointer;}


@media screen and (min-width: 300px) and (max-width: 500px) {
/* El scroll */
html , body{ max-width: 100% !important;
	overflow-x: hidden !important;}


/* header */
header {
width: 100%;
height: 700px;
background:  url(../img/Fondo-header.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;	
background-attachment: fixed;}

.what{position: fixed;
bottom:100px;
left:0px;
color: white;
z-index: 999;}

.what a i{
position: absolute;
font-size:35px;
background:  rgba(14, 135, 12, 1) ;
z-index: 4;
border-radius: 0px 30px 30px 0px;
width: 45px ;
height:45px;
display: flex;
justify-content: center;
align-items: center;}

.what a{color:white;
text-decoration: none;}

.what a p{font-size: 16px; 
padding-left: 45px;
left: -250px;
width: 0px;
position: absolute;;
border-radius: 0px 33px 33px 0px;
display: flex;
align-items: center;
;font-family:Leonsans;
background:  rgba(14, 135, 12, 1) ;}

.what a:hover > p{
opacity: 1;
visibility: visible;;
transition:all 1.4s ease ;
width: 150px ;
left: 0px;
height: 45px;}

.what2{position: fixed;
bottom:50px;
left:0px;
color: white;
z-index: 999;}

.what2 a i{
position: absolute;
font-size:35px;
background:#0e77a8;;
z-index: 4;
border-radius: 0px 30px 30px 0px;
width: 45px ;
height:45px;
display: flex;
justify-content: center;
align-items: center;}

.what2 a{color:white;
text-decoration: none;}

.what2 a p{font-size: 16px; 
padding-left: 45px;
left: -250px;
width: 0px;
position: absolute;
border-radius: 0px 33px 33px 0px;
display: flex;
align-items: center;
;font-family:Leonsans;}

.what2 a:hover > p{
opacity: 1;
visibility: visible;background:#0e77a8;;
transition:all 1.4s ease ;
width: 140px ;
left: 0px;
height: 45px;}


.todo{ background: rgba(2,0,1,0.8);
height:70px;}

.heade-a{margin: 0 auto;
max-width: 1500px;
margin: 0 auto;}

.conten{ display: flex;
max-width: 1500px;
margin: 0 auto}

.btn-men{
margin: 0 auto;
display:grid;
grid-template-columns: repeat(2,1fr);
width: 100%;
padding: 7px 0px;
max-width: 800px;}

.conten i{
font-size: 29px;
margin-left: 20px;
margin-top:15px;
margin-right: 20px;  
color: white; 
cursor: pointer;}

.conten i:hover {
color:#2feab8;
;transition: all 1s ease;
filter: drop-shadow(0px 0px 1px #2feab8);
transform: rotate(-90deg);}

.conten nav {display: inline-flex;
justify-content: right;
align-items: right;}

.conten nav ul{margin-right: 5px;
margin-top: 20px;display: none;}

.conten nav li{
display:inline-block;
text-decoration: none;
color: #ffff;
margin-right: 10px; ;}			

.conten nav a{
text-decoration: none;
color: #ffff; 
font-style: normal;
font-size: 23px;
border-bottom: 3px solid transparent;
font-family:StickNoBills;
letter-spacing: 1px;}

.conten nav ul li #inicio{  
cursor: pointer;
transition: all 1s ease;
color:#2feab8;	
border-bottom: 2px solid #2feab8}

.conten nav ul li a:hover{
border-bottom: 2px solid;
color:#2feab8;
transition: all 300ms ease-out;
cursor: pointer;
text-shadow: 0px 0px 20px black;
width: 100%}

.conten nav:hover > ul li  #inicio{
color:white;
border-bottom:2px solid transparent;
 	 	transition: all 1s ease;}

.conten nav ul li #inicio:hover{
border-bottom: 2px solid;
color:#2feab8;
transition: all 300ms ease-out;
cursor: pointer;
text-shadow: 0px 0px 20px black;
width: 100%}


.conten #img{
width:60px;
height:40px; 
border-radius: 50%;
margin-top:10px;
margin-right: 20px;
box-shadow: 0px 0px 2px  #00BB89;;
padding: 1px;}

.conten #img:hover{	
box-shadow: 0px 0px 14px #00BB89;
transition:all 0.5s ease-out}


#btn-men{position: relative;
display: none;}

.container-menu{
position: absolute;
background: rgba(7,7,7,0.89);
height:700px;
width:250px;
top: 0px;
left: -600px;
transition: all 900ms ease;
opacity: 0;
visibility: hidden;
z-index: 1;
max-width: 1800px;
overflow: hidden;
z-index: 999}

#btn-men:checked ~ .container-menu{
opacity: 1;
visibility: visible;
transition: all 1.5s ease;
left:0%;
z-index: 999}

.cont-menu{ 
width: 100%;
height: auto;
position: relative;
z-index: 1;
max-width: 1800px ;
margin: 0 auto;
z-index: 999}

.cont-menu nav{margin-top:80px}

.cont-menu  nav a{ 
	display: block; 
text-decoration: none;
font-style: normal;
 font-size: 22px;
color: #c7c7c7c7;
font-family:StickNoBills;
display: flex;
justify-content: center;
align-items: center;
padding:7px;
margin: 0px 10px;
border-radius:20px}
			
.cont-menu nav a:hover{ 
background:rgba(38, 125, 200,0.4); 
transition: all 1.2s ease-out;
box-shadow: 0px 0px 2px rgba(38, 125, 200,0.4)}

.cont-menu nav .sociales{display: flex;
align-items: center;
justify-content: center;
margin:10px auto;}

.cont-menu  nav .sociales a{ 
	display: block; 
text-decoration: none;
font-family: 'Stick No Bills', sans-serif;
font-style: normal;
 font-size: 30px;
color: #c7c7c7c7;
border-radius: 50%;
padding: 0px 10px}

.cont-menu  nav .sociales a:hover{ 
background:transparent; 
color:#ffff  ;
transition: all 1.2s ease-out;
animation:loop 2s infinite ;
box-shadow: 0px 0px  0px rgba(38, 125, 200,0.4)}

@keyframes  loop{
	0%{transform:scale(1.0);}
	50%{transform:scale(1.3)}
	100%{transform:scale(1.0)}}

.cont-menu  nav .sociales a > .fa-facebook:hover{
color:#0253cc;
transition: all 1 ease-out;
filter: drop-shadow(0px 0px 10px #0253cc);}

.cont-menu  nav .sociales a > .fa-instagram:hover{
color: #9E37B8 ;
filter: drop-shadow(0px 0px 10px #9E37B8);  
transition: all 1 ease-out}

.cont-menu  nav .sociales a > .fa-google-plus:hover{  
color:#d33672  ;
transition: all 1 ease-out;
filter: drop-shadow(0px 0px 10px #d33672 ) }


.cont-menu  nav a #inicio{  
cursor: pointer;
transition: all 1s ease;
background:rgba(28, 125, 155,0.4); 
color: red;
border-bottom: 2px solid }

 .cont-menu label{ position: absolute; 
right: 10px;
color: #ffff; 
cursor: pointer; 
font-size:24px  ;
border: 1px solid transparent;
border-radius: 50%;
top: -60px;;
padding: 4px 8px ;
transform: rotate(-90deg)}      

.cont-menu label:hover {color:#2feab8;
filter: drop-shadow(0px 0px 1px #2feab8) ;
transition: all 1s ease;
transform: rotate(90deg)}

.saludo{
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
margin-top:230px;
width:95%;
background: rgba(0,0,0,0.8);
padding:20px 5px;
border-radius:13px;
box-shadow: 0px 0px 3px  #009fbb;

background-size: 800px 300px;}

@keyframes lot{
	0%{text-shadow: 0px 0px 10px #009fbb}
  50%{text-shadow: 0px 0px 30px #8f12dd}
	100%{text-shadow: 0px 0px 10px #009fbb}
}
	
.saludo h1{ 
font-family:StickNoBills;
text-shadow: 10px 6px 10px black;
text-align:center;
margin: 0 auto;
color:#ffffff ;  
font-size:50px;
text-align: center;
text-shadow: 0px 0px 10px #009fbb;
animation: lot 6s infinite;}

.saludo  p {
font-size:23px;
text-align: center; 
line-height:1;
color:#32dfb4;;
text-shadow: 0px 0px 10px black;
border-bottom: 1px solid #16c7deb0;;
width: 240px;
margin: 0 auto;
font-family:type;}		

/* bienvenida */
.Bienvenido{color: white;
margin: 50px au5o;
width:95%;}

.Bienvenido .hello{
padding:  10px;
margin: 10px 10px;
border-radius:10px}

	.Bienvenido .hello h4{
	font-size: 33px;
	font-family:StickNoBills;text-align: center;
margin: 5px 0px;
padding-top: 15px;}

.Bienvenido .hello  p {font-size:17px;
color: white;
;width:95%;
text-align: center;
font-family:Leonsans;
margin: auto;
line-height: 1.1;}	

	.Bienvenido .hello h5{
	font-size: 28px;
	font-family:StickNoBills;text-align: center;
	margin-top: 15px}

.Bienvenido .hello ul{
font-size: 17px;text-align: left;
display:block;
margin: 0 auto;font-family:Leonsans;;
width: 90%;
;padding-bottom: 20px;}

.Bienvenido .hello li{
font-size: 16px;
width:95%;
margin: 0 auto;
padding-top:4px;
list-style:decimal;}

/* web */
.pag-web{
background: rgba(10,10,10,0.66);
padding:20px 0px}

.pag-web-a{display:grid;
grid-template-columns: repeat(1	,1fr);
width:90%;
margin: 0% auto;}

.web{width:97%;
margin: 0 auto;}

.web  h4 {
text-shadow: 0px 5px 5px black;
text-shadow: 0px 0px 2px rgba(15, 17, 125,0.9);
letter-spacing: 1px;
margin-top: 10px;
font-family:StickNoBills;
font-size:28px;
color:rgb(01, 184, 255);}

.web p {font-size:17px;
color: white;
;width:96%;
line-height: 1.3;
margin-top: 5px;
text-align: left;
margin-bottom: 20px;
font-family:Leonsans;}		

.web a{text-decoration: none;
	margin-top: 10px}

.web #car {
padding:5px 15px;
cursor: pointer;
  text-align:center;
  color: white;  
font-size:18px ;
border-radius:33px;
font-family:TitilliumWeb;
letter-spacing: 3px;
background-size:100%;}

.web #car:hover {
  background-size:100% ;
  transition: all 2s ease-in-out;
box-shadow:0px 0px 20px  rgba(113, 69, 232, 0.8);}


.pag-web .img{  
position: relative;
background:  url(../img/foo.png); 
background-size: 100% 200px;
background-repeat: no-repeat;
max-width: 600px;
margin-top: 20px;} 

.pag-web .img img {   
text-align: center;
border-radius: 5px;
margin: 0 auto;
width: 90%;
;height: 220px; }

.pag-web .img img:hover {   
transition: all 1s ease-out;
filter: drop-shadow(0px 0px 20px rgba(156, 18, 169, 0.7)); }


/* beneficios */
.divido{
display: block;
background: url(../img/banner.webp);
background-size: 100% 100%;
background-position: center;
padding:20px 15px;
margin:40px auto; 
border-radius:33px;
width: 90%;}

.divido .parte1 {width: 100%}


.divido h5{font-size:25px;
color:white ;
text-shadow: 0px 5px 5px black;
letter-spacing: 1.1px; 
font-family:Leonsans;
text-align: center;}

.divido p {font-size:17px;
color: white;
;width:95%;
line-height: 1.3;
margin-top: 15px;
max-width: 500px;
text-align: left;
margin-bottom: 10px;
font-family:Leonsans;}		

.divido article ul{
margin-top: 15px;}

.divido article li {font-size:17px;
color: white;
line-height: 1.3;
max-width: 500px;
text-align: left;
list-style: none;
font-family:Leonsans;
border-bottom: 1px solid transparent}		

.divido article li::before {
  content: "+ ";
  font-size:18px}

/* web */

.pag-web-b{display:block;
width:90%;
margin-bottom: 10px;}

.web2{width:100%;
margin:10px auto;
margin-bottom: 20px;}

.web2  h4 {font-size:28px;
text-shadow: 0px 5px 5px black;
text-shadow: 0px 0px 1px rgba(231, 198, 251, 0.9);
color:rgb(49, 172, 221);
font-family:Leonsans;
letter-spacing: 1px;
margin-top: 10px;
font-family:StickNoBills;
text-align: center;
margin: 0 auto;}

.web2 p {font-size:17px;
color: white;
;width:100%;
line-height: 1.3;
margin-top: 5px;
text-align: left;
margin-bottom: 10px;
font-family:Leonsans;}	

.web2 ul {display: grid;
grid-template-columns: repeat(2,1fr);}

.web2 ul li {font-size:18px;
color: white;
;width:80%;
line-height: 1.4;
margin-left: 25px;
font-family:Leonsans;
font-family:TitilliumWeb}	

.web2 ul li::marker{color: #37b0b8;}

.web a{text-decoration: none;
	margin-top: 40px}

.pag-web2.img2{ 
position: relative; 
background-size: 90% 250px;
background-repeat: no-repeat;
max-width: 600px;
;} 

.pag-web2 .img2 img {   
text-align: center;
border-radius: 5px;
margin: 0 auto;
width: 70%;
;height: 200px;
max-width: 550px;
margin-left: 50px; }

.pag-web .img img:hover {   
transition: all 1s ease-out;
filter: drop-shadow(0px 0px 20px rgba(156, 18, 169, 0.7)); }


.portafolio{
width: 100%;
align-items: center; 
margin:0px auto; 
text-align: center; 
background-size: 100% 100%;
background-repeat: no-repeat;
padding:20px 0px 20px 0px;
background-image: url(../img/pro.svg);	
background-size: cover;
background-repeat: no-repeat;
background-position: center; }


.proyectos h5 {width:100%;
line-height: 1;
max-width:260px;
text-align: center;
margin: 15px auto;
font-family:StickNoBills;
font-family:TitilliumWeb;
font-size:40px;
color:rgb(01, 184, 255);}	

.proyectos p {font-size:17px;
color: white;
;width:90%;
line-height: 1.3;
max-width:750px;
text-align: center;
margin:0px auto;}		

.trabajos{display: grid;
grid-template-columns: repeat(1,1fr); 
width: 85%;
max-width:330px;
justify-content: center;
align-items: center ;
margin: 20px auto;
grid-gap:10px ;
}

.pro {width:100%;  
background:rgba(07, 51, 124,0.2); 
border-radius:20px ;
box-shadow:0px 0px 0cap rgba(8, 189, 209, 0.5);
padding-top: 10px;
height: 370px;
margin-top: 10px;}

.pro:hover{ 
	box-shadow:0px 0px 10px rgba(8, 189, 209, 0.5);; 	
cursor: pointer;
transform: scale(1.08);
z-index: 3;
background:rgba(07, 51,104,0.6);
transition: all 1s ease;}

.pro a{text-decoration: none;}

.pro img{width:95%;
height:160px;
margin: 0px auto;
justify-content: center;
align-items: center;
display: flex;
border-radius: 10px; }


.pro h3 { color:rgb(229, 245, 248); 
		font-size:22px;
		text-align: center;
font-family:Leonsans;
margin-top: 15px;}

.pro p {
padding:5px 0PX;
font-size:17px;
color: rgb(229, 245, 248);
text-align: center;
font-family:Leonsans;
width:95% ;
text-decoration: none;}				

.pro button{background:rgba(01, 184, 255,0.4);
	border-radius:5px;
	padding:6px 25px;
margin: 10px;
 font-family:StickNoBills;
 border: none;
 font-size:20px;cursor: pointer;
border: 1px solid white;}


.pro button:hover{background:rgba(93, 1, 155, 0.6);
transition: all 1s ease-out ;
color: white;
;box-shadow:0px 0px 1px rgba(1, 144, 155,0.6);}

#servicio{
	padding:30px 0px ;
background: rgba(4, 7, 36, 0.98);}

.ser{display: grid;
grid-template-columns: repeat(1,1fr);
grid-gap:10px;
width:80%;
margin: 10px auto;
height: auto;
max-width: 750px;}

.ser .s1 div{
width: 100%;}

.ser .s1 div img{
	width: 100%;
background: rgb(6, 12, 17);
height: 200px;;
margin-bottom: 10px;
border: 1px solid rgb(4, 42, 141,0.77);}

.ser .s0 h5{
font-size:22px;
text-align: center;
padding-top: 5px;
width:100%;
color: white;  
color: #ecf0f1;
font-family:Leonsans}

.ser .s1 div p{
font-size:17px;
text-align: left;
width: 100%;
color: #ecf0f1; 
font-style: normal;
line-height: 1.3;
padding:5px 15px;
margin-top: 0px;
font-family:Leonsans}

.ser .s0 {
	width: 100%;
padding:10px 0px;
background: linear-gradient(to right,#033a64, #341073,
 #1762b3);
background-size:100% 600%;}


.ser .s0:hover{
transition: all 2s ease-out;
cursor: pointer;
  background-position: 70% 0%;}

.ser .s2 div img{
	width: 100%;
	height:185px;
	margin-top: 10px ;
border: 1px solid rgb(4, 42, 141,0.77);}

.ser .s2 div p{
font-size:17px;
text-align: left;
width: 100%;  
font-family: TraditionSansXLight;
color: #ecf0f1	; 
font-style: normal;
line-height: 1.3;
padding:5px 15px;
margin-top: 0px;
font-family:Leonsans}

.ser .s3  li{
font-size:17px;
text-align: left;
width: 100%;color: #ecf0f1; 
font-style: normal;
list-style: none;
line-height: 1.3;
padding:3px 15px;
margin-top: 0px;
font-family:Leonsans}

.ser .s3  li::before{content:"! " ;
color: rgb(240, 240, 240);
font-size:20px;}

.coon{width: 90%;margin: 10px auto}

.coon h5 {
color:white;
;width:70%;
line-height: 1;
margin: 0px auto;
text-align:center;
max-width: 700px;
font-family:Leonsans;
margin-top: 40px;
font-family:StickNoBills;
font-size:60px;
color:rgb(01, 184, 255);
font-family:TitilliumWeb;
font-size:40px}

.coon p {font-size:16px;
color: white;
;width:100%;
line-height: 1.3;
text-align:center;
font-family:TitilliumWeb;
margin: 10px auto;
max-width: 700px;}		


.contmary{  display: grid; 
			grid-template-columns: repeat(1,1fr);
			width: 90%;
			margin: 30px auto;
			max-width: 350px}

.contalfa{
	width: 95%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 180px;
	margin: 0 auto;
margin-bottom: 20px}

.contalfa figure{position: relative;
	height:180px;
	width: 95%;
	overflow: hidden;
	box-shadow:0px 0px 5px  rgba(0,0,0,0.5)
	;cursor: pointer;}

.contalfa figure img{ 
width: 100%; 
height: 180px;
transition: all 500ms ease-out}

.contalfa figure .capa2{
position: absolute;
top: 0; 
width: 100%;
height: 180px;
background: rgba(24, 23, 27,0.9);
opacity: 0;
visibility: hidden;
text-align: center;
border: 1px solid black;}

.contalfa figure:hover > .capa2{opacity: 1;
	visibility: visible; 
width: 100%;
transition: all 3s ease ; }

.contalfa figure:hover > .capa2 h4{
		padding: 0; 
		transition: all 1.5s ease ; 
			color: #fff;
		font-size:20px;
		width: 100%;
		text-align: center;
		margin-top: 20px;
font-family:Leonsans;}


.contalfa figure:hover > .capa2 p{
	margin:0px auto; 
font-size:16px;
transition: all 700ms ease ;color: #fff;
width: 90%;
transition: all 1.5s ease;
font-family:Leonsans;}

.mensaje-f{width: 80%;
max-width: 300px;
margin: 30px auto;
display: grid;
grid-template-columns: repeat(1,1fr);
;background-color: #5822bcb1 ;
border-radius: 33px;
padding:20px 10px ; }

.mensaje-f .imagen img{ 
	width:250px;height: 140px;
display: flex;
justify-content: center;
align-items: center;margin: 0 auto;}

	.mensaje-f .texto h6{
		font-family:TitilliumWeb;
		font-size: 23spx;
		padding-top: 5px;
		color: white;
	width: 90%;
margin: 0 auto;}

		.mensaje-f .texto p{
color: white;
line-height: 1.1;
font-family:TitilliumWeb;
font-size: 16px;
margin: 0 auto;
width: 95%;}

.mensaje-f .texto button{background: chocolate;
border: none;
margin-top:10px;
padding: 5px 10px;
	border-radius: 20px 10px 20px 10px;
font-size: 20px;
margin-left: 5%;
border: 3px solid black}

.mensaje-f .texto button:hover{
border: none;
margin-top: 20px;
border-radius: 20px 10px 20px 10px;
box-shadow: 0px 0px 10px chocolate;
transition: all 2s ease;
text-shadow: 0px 0px 10px black;
border: 3px solid black;}


	.mensaje-f .texto button a{
		font-family:TitilliumWeb;
		font-size: 15px;
		text-decoration: none;
		color: white;}


.container-form {
width: 100%;
margin-top: 30px;
padding: 10px 0px}

.all{padding: 0px}

.containerpx{width:90%;
display: grid; 
grid-template-columns: repeat(1,1fr);
grid-gap: 10px;
margin: 0px auto;
max-width: 790px;
padding:0px 0px;}

.info-form h6 {
font-size: 22px;
color:#ffff ;
font-family:Leonsans;
text-align: center;
letter-spacing:1px;
margin-top: 20px}

.info-form p{
font-size:17px;  
color:#ffff;	
text-align:center;
margin: 10px auto;
font-family:Leonsans;
width: 300px}

.contac{margin-top: 20px}

.container-form a {
	font-size: 16px;
	 color:#ffff;
font-family:Leonsans;
text-decoration: none;}

.contac a p b {
font-family:Leonsans;
text-decoration: none;
color:white}

.contac a p  {
font-family:Leonsans;
text-decoration: none;color:gray;
padding-top: 10px;
font-size: 17px;}


.contac a p:hover  {
font-family:Leonsans;
text-decoration: none;color:white}


.footer-red-social ul{
display: grid;
grid-template-columns: repeat(3,1fr);
width:250px;
margin: 0px auto}	

.footer-red-social ul li{
position: relative;
list-style: none;
margin: 10px;
cursor: pointer;
display: flex; 
justify-content: center;
align-items: center;}

.footer-red-social  ul li a {text-decoration: none;}

.footer-red-social ul li a .fa 
{font-size: 30px;
	border-radius:50%;
width: 50px; 
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: white;}

.footer-red-social  ul li a .fa-facebook:hover{
color:#4abce6;
transition: all 1 ease-out;
transform: scale(1.3);
transition: all 1s ease;}

.footer-red-social  ul li a .fa-instagram:hover{
color:#9E37B8 ;
transition: all 1 ease-out;
transform: scale(1.3);
transition: all 1s ease;}

.footer-red-social  ul li a  .fa-google-plus:hover{  
color:#d33672  ;
transition: all 1 ease-out;
transform: scale(1.3);
transition: all 1s ease;}

form{ 
width:100%;
padding: 10px ;
box-shadow: 0px 0px 30px black;
color: white}

form h6 {
font-size: 20px;
color:#ffff ;
font-family:Leonsans;
text-align: center;
letter-spacing:1px;
margin-top: 10px}

.container-form form .campo
{background:none;
display: block;
margin: 15px 10px;
padding:10px;
font-size: 16px;
border: 0;
border-bottom: 1px solid gray;	
outline: 0px;
outline:none;
cursor: pointer;
width: 95%;
font-family:Leonsans;
color: white}

.container-form form .campo::placeholder {
font-size: 16px;
background: none;
font-family:Leonsans;
color: white;}

.select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

font-family:Leonsans;}

.select::-ms-expand {
    display: none;
border:0;
font-family:Leonsans;}	

.select{
	display: inline-block;
	cursor: pointer;
  	outline: 0; 
  	font-size: 16px;
    transition: all 0.25s ease;
    outline:none;
	border: 0;
	background:  none;
	margin:10px;
	width:90%; 	
	padding: 5px;
font-family:Leonsans;
border-bottom: 1px solid gray;
color: white}

.select option{
background:#111111;
border: none;
font-family: monospace;
border: 0px ;
color: white}

.select option::placeholder :hover {
color: white;
font-size: 16px;
background: none;
font-family:Leonsans;
color: white}

.container-form .btn-enviar
{display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
padding:10px;
font-size:16px;
border: none;
outline: 0px;
color:white;
cursor: pointer;
margin-top:10px;
font-family:Leonsans;
box-shadow: 0px 0px 10px black;
background: transparent;}

.container-form .btn-enviar:hover {
box-shadow: 0px 0px 20px hsla(225, 18%, 8%, 1);
background: hsla(225, 18%, 28%, 1)}

.piedepag .grupo1{
	width: 100%;
	margin: auto;
	grid-gap: 5px;
	padding: 10px 0px }


.piedepag{
padding:5px;
background:#0A0D11}

.Creador{
text-align: center; 
width: 90%;
margin: 0 auto;}

.Creador a{text-decoration: none;
color:white;
width: 100%;
letter-spacing: 1px}

.Creador a{
font-size: 23px ;
color: #24dff9;
font-family:StickNoBills;}

.Creador a:hover{
color:#2feab8}
	
.Creador p {color: white;
font-family: monospace;
font-size: 14px;
font-family:Leonsans}

.Creador p a {color: white;
font-family: monospace;
font-size: 14px;
font-family:Leonsans}

.Creador p a:hover{color:#2feab8}

cite {color:white;
font-family: monospace;
font-size:10px;
font-family:Leonsans;
opacity:0.9;
cursor: pointer;}}
}