/*imagen inicio */
 header .img {
background-size: 50% 100%;
background-repeat: no-repeat;
padding: 10px}

 header .img img{margin: 0 auto;
 align-items: center;
justify-content: center;
width: 220px; 
height:220px;
display: block;
position: relative;
margin-top:200px;
background: rgba(10,10,10,0.7);}


/* Fonts */
@font-face{
font-family:StickNoBills;
src:url(../fonts/StickNoBills.ttf);}

@font-face{
font-family:Leonsans;
src:url(../fonts/Leonsans.ttf);}

@font-face{
font-family:TitilliumWeb
;src:url(../fonts/TitilliumWeb.ttf);}


.inicio{
	width: 90%;	
	max-width:1200px;
	margin: 0 auto;
	padding-top: 100px;
display: grid;
grid-template-columns:repeat(2,1fr);}

.headerPress {padding-top:50px;
width:100%;}

.headerPress span{ color: white ;
text-align: center;
font-size: 22px;
font-family:Leonsans;
margin: 10px auto;}


.headerPress h2{
color: white ;
font-family:StickNoBills;
letter-spacing: 2px;
font-size:50px;
text-shadow: 0px 0px 5px black}

.headerPress h2 b{ color:#2feab8 ;
text-shadow: 0px 0px 5px black;
font-size:50px}

.headerPress p{ color:white;
font-size:20px;
font-family:Leonsans;
letter-spacing: 1px;
text-shadow: 10px 10px 50px black;}


.headerImg img{
width: 400px;
height:350px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
background-color:rgba(9, 113, 127, 0.4);
padding:px;
border-radius:50%;
box-shadow: 0px 0px 1px rgba(89, 18, 221, 0.93);
margin-top: 40px}

.red-social{ margin: 0px auto}

.red-social ul{position: relative;
	display: flex;
max-width: 500px;
margin-top: 20px;}	

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

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

.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;
background: rgb(0,0,0,0.8);
border: 2px solid black}

.red-social  ul li a .fa:hover{
animation:loop 2.5s infinite ;
border: 2px solid black}

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


.red-social  ul  #contac a {background:black;
border: 0.5px solid transparent;
box-shadow: 0px 0px 3px rgba(18, 177, 221, 0.817);
font-family:Leonsans;
color: white;
width: 150px;
height: 45px;
font-size: 20px;
border-radius:35px ;
display: flex;
justify-content: center;
align-items: center;}


.red-social  ul  #contac a:hover{
transition:all 2s ease ;
color: #2feab8;
border: 2px solid #2feab8;
animation:loop 2s infinite}

.red-social  ul li a .fa-facebook:hover{
background:#253d70;
transition: all 1 ease-out;}

.red-social  ul li a .fa-instagram:hover{
background:#9E37B8 ;; 
transition: all 1 ease-out;}


.red-social  ul li a .fa-google-plus:hover{  
background:#d33672  ;
transition: all 1 ease-out; }

.resumen {max-width: 630px;
margin: 30px auto;
color: white;}

.resumen span {text-align: center;
font-size: 35px;
display: flex;justify-content: center;
font-family:TitilliumWeb}

.resumen span b {text-align: center;
font-size: 35px;
display: flex;justify-content: center;
font-family:TitilliumWeb;
color: #17afe2;
padding-left: 10px;}

.resumen h5 {text-align: center;
font-size: 30px;
display: flex;justify-content: center;
font-family:TitilliumWeb}

.resumen ul{display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap:20px;
margin: 20px;}

.resumen ul li a{text-decoration: none;
color: white;}

.resumen ul li{background: rgb(37, 77, 165);
list-style:none;
height: 100px;
border-radius: 14px;}

.resumen ul li:hover{background: #7a13e0;
cursor: pointer;
box-shadow: 0px 0px 10px #7a13e0;
transition: all 1s ease;}


.resumen ul li i{font-size: 40px;
display: flex;justify-content: center;
margin-top: 15px;}

.resumen ul li  p{font-size:18px;
	 font-family:Leonsans;
	text-align: center;
margin: 10px auto;}


.whoami1 { 
margin: 30px auto;
background: rgba(10,10,10,0.66);
color: white;}

.whoami{display: grid;
grid-template-columns: repeat(2,1fr);
width: 100%;
margin:0px auto;
padding: 10px 0px;
max-width:1100px;}

.whoami1 figure img{display: block;
width: 400px;
height:320px;
margin: 20px 0px;
border-radius: 30px}

.whoami div{margin-top: 40px;
margin-left: -80px;}

.whoami  span{
color: #71d8fa;
font-size: 20px;
font-family:Leonsans;}

.whoami div h5{font-family:StickNoBills;
font-size: 40px;
padding:5px 0	px;}

.whoami div p  {font-size:20px;
color: white;
width:90%;
line-height:1.3; 
text-align:left;
font-family:Leonsans;}

.whoami div  a{text-decoration: none;}

.whoami div  a p {color: white;
font-size: 20px;font-family:Leonsans;
text-decoration: none;
	background:rgba(12, 88, 143, 0.783);
margin: 20px 5px ;
padding: 10px 3px ;list-style: none;border-radius: 20px;
text-align: center;
width: 320px;
border: 3px solid black;
background: linear-gradient(90deg,rgba(61, 115, 223, 0.408), 2%, rgb(113, 13, 159) 51%, rgb(125, 9, 115) 100%);}

.whoami div  a p:hover {box-shadow: 0px 0px 10px #7a13e0;
border:3px solid #7a13e0;
transition: 2s all ease;}


.Experiencia{color: white;
width: 98%;	
margin: 0px auto;
padding: 0px 0px;
border-radius: 60px;}

.web-elemento{max-width:1100px;;
margin: 0px auto;
width: 100%;
padding:30px 10px;}

.web-elemento-title{display: flex;
margin-bottom: 10px}

.web-elemento-title .title{ background: #0a0d1f;;
width: 200% ;
margin-right: 30px;
border-radius:33px;
padding: 20px 40px;
box-shadow: 0px 0px 5px rgba(61, 115, 223, 0.808);}

.web-elemento-title .title h4{
	font-family:TitilliumWeb;
font-size: 40px;} 

.web-elemento-title .title p{
	font-family:TitilliumWeb;
font-size: 20px;} 

.web-elemento-title .title a{text-decoration: none;}

.web-elemento-title .title a p{
color: white; text-decoration: none;
padding: 10px 20px;
	font-family:TitilliumWeb;
font-size:20px;
border-radius: 20px;
margin-top: 20px;
width: 250px;
text-align: center;
background: linear-gradient(120deg,rgba(15, 114, 220, 0.878), 2%, rgb(43, 11, 148) 51%, rgb(15, 155, 206) 100%);
background-size:100%;}


.web-elemento-componet{display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 20px}

.parte{
border-radius: 20px;
 border:0px solid  #004F79;
width: 100%; 
cursor:pointer;
margin: 0px auto;
; background: rgb(32, 11, 113);
padding:5px;}


.parte  img { width:100%;
height:150px;
border-radius: 20px;}


.parte h6 {  	 
 color: #ffff;
	  	color: #fff;
padding:5px 10px;
		 font-size:18px ; font-family:Leonsans}

.parte p { font-size: 15px;
color: #ffff;;
padding: 0px 10px;
padding-bottom: 5px;
font-family:Leonsans;}


.Skills {width:900px; margin: 0px auto;
color:white;;}

.Skills h5{	 font-size:35px ; 
color:white;text-align: center;
margin: 20px 0px;
font-family:TitilliumWeb}

.Skills ul{display:grid;
grid-template-columns: repeat(6,1fr);
grid-gap: 10px;}

.Skills ul li{background-color: rgb(49, 5, 144);
padding: 10px 0px;list-style: none;
border-radius: 10px;}

.Skills ul li img{width: 60px;height: 60px;
;margin: 0 auto;
display: flex;justify-content: center
;align-items: center;}

.Skills ul li h6{font-size: 16px; text-align: center;
font-family:Leonsans;
margin-top: 10px;}


.cardp2 { display: grid;
	grid-template-columns: repeat(2,1fr);
width: 100%;
margin: 30px auto ;
max-width:1150px}

.cardp2 .img-pc{border:2px solid rgb(120, 64, 200);
	box-shadow: 0px 0px 6px rgb(11, 107, 192);
	width:350px;
	height: 260px;
	margin: 0 auto;
margin-top: 30px ;}


.cardp2 div img{display: flex;
width:360px;
height: 258px;;
margin: 0 auto;
background: black;
transform: translateX(21px) translateY(-18px);
box-shadow: 0px 0px 5px rgb(25, 182, 214);}

.cardp2 div img:hover{display: flex;
	transform: translateX(-30px) translateY(30px);
box-shadow: 0px 0px 20px rgb(15, 146, 131);
margin: 0 auto;
cursor: pointer;
transition: all 1s ease-out;}

.cardp2 .text2 {margin-left: -50px;
width:100% ;}

.cardp2 div p {font-size:20px;
color: white;
;width:100%;
margin: 0 auto;
line-height: 1.3;font-family:Leonsans;
margin-top: 20px;
text-align:left;}

.cardp2 div ul{display: grid
	;grid-template-columns: repeat(2,1fr);
grid-gap:5px ;
width: 100%;
margin-top: 10px;}

.cardp2 div ul li {font-size:16px;
color: white;
;width:100%;
line-height: 1.3;font-family:Leonsans;
background-color: #0f1b57;
padding: 10px ;list-style: none;
border-left:4px solid rgb(112, 39, 223) ;}