'overpass',helvetica,arial,sans-serif@import url('https://fonts.googleapis.com/css?family=:100,300,400,700,900');

html {
  height: 100vh;
  /*background-image:url("img/leaves.png");*/
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #ffffff;
}

.HomeText{
  position:static;
  font-size: 600%;
  line-height: 60%;
  text-align: center;
  color: #ffffff;
  background: #000000;
  margin-top: 15%;
  opacity: 0%;
  font-family: 'overpass',helvetica,arial,sans-serif;
}

.landing{
  background-image:url("img/hatbn.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  height: 100%;
  margin: 0%;

}

a {
  text-decoration: none;
}

body {
  justify-content: center;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  margin:0px;
  padding-bottom: 10%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  margin-left: 5%;
  font-weight:bold;

}

h1 a {
  text-decoration: none;
  color: #f00658;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
}

h2{
  margin-top: 1%;
  margin-bottom: 0%;
  font-size: 3em;
  text-align: center;
  color: #212b3b;
  /*background-color: #f00658;*/
  font-family: 'overpass',helvetica,arial,sans-serif;
  font-weight:400;
}

h3 {
  margin-top: 1%;
    margin-bottom: 0%;
  font-size: 1.9em;
  text-align: center;
  color: #212b3b;
  text-decoration:none;
  /*background-color: #f00658;*/
  font-family: 'overpass',helvetica,arial,sans-serif;
  font-weight:400;
}

h4 {
  text-decoration: none;
  color: #212b3b;
  font-family: 'overpass',helvetica,arial,sans-serif;
  font-size: 25px;
  margin-top: 5%;
  margin:auto;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:700;
}

h5 {
  text-align: center;
  text-decoration: none;
  color: #212b3b;
  font-family: 'overpass',helvetica,arial,sans-serif;
  font-size: 36px;
  margin-top: 2%;
  margin-bottom: 2%;
  font-weight:550;
}

h6 {
  text-align: center;
  text-decoration: none;
  color: #f00658;
  font-family: 'overpass',helvetica,arial,sans-serif;
  font-size: 36px;
  margin-top: 2%;
  margin-bottom: 2%;
  font-weight:550;
}


.work{
  height:auto;
  background-color: #ffffff;
  background-size: 100%;
  background-position: center;
  margin: 0%
}

.menu {
  display: flex;
  list-style: none;
  justify-content: space-around;
  margin-right: 5%;
}

.menu li {
  font-size: 1em;
  color: #AAB6BD;
  font-weight: normal;
  padding: 7px;
  margin-top: 20px;
}

/*LOGO HEADER*/
#imagen-logo {
  margin-left: 35%;
  position: absolute;
  width: 300px;
  height: 300px;
  background: url(img/logo.png)
  no-repeat;
  background-size: 250px;
}
/*LOGO HEADER*/

/*ANIMATION MOUSE*/

/*ANIMATION MOUSE*/

.ContainerProjects {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.ContainerProjects div {
  width: 350px;
  margin: 20px;
  height: 350px;
  background: pink;
}


#home {
  font-size: 1em;
  color: #F00658;
  font-weight: bold;
  padding: 7px;
  margin-top: 20px;
}

#home:hover {
  font-size: 1em;
  color: #f00658;
  font-weight:bold;
  padding: 7px;
  margin-top: 20px;
  text-decoration: underline;
}

.projects #projects{
  font-size: 1em;
  color: #f00658;
  font-weight:bolder;
  padding: 7px;
  margin-top: 20px;

}

#projects {
  font-size: 1em;
  color: #F00658;
  font-weight: bold;
  padding: 7px;
  margin-top: 20px;
}

#projects:hover {
  font-size: 1em;
  color: #f00658;
  font-weight:bold;
  padding: 7px;
  margin-top: 20px;
  text-decoration: underline;
}

.aboutme #aboutme{
  font-size: 1em;
  color: #f00658;
  font-weight: bolder;
  padding: 7px;
  margin-top: 20px;
}

#aboutme {
  font-size: 1em;
  color: #F00658;
  font-weight: bold;
  padding: 7px;
  margin-top: 20px;
}

#aboutme:hover {
  font-size: 1em;
  color: #f00658;
  font-weight:bold;
  padding: 7px;
  margin-top: 20px;
  text-decoration: underline;
}

/*cuadrados hover*/


#imagen-collages{
  width: 350px;
  height: 350px;
  background: url(img/collages.png);
  background-size: 350px;
  border-radius: 8px;
}

#imagen-collages:hover {
  width: 350px;
  height: 350px;
  background: url(img/collages.hover.png);
    background-size: 350px;
      border-radius: 8px;
}



#imagen-inspo {
  width: 350px;
  height: 350px;
  background: url(img/inspo.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-inspo:hover {
  width: 350px;
  height: 350px;
  background: url(img/inspo.hover.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-web {
  width: 350px;
  height: 350px;
  background: url(img/web.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-web:hover {
  width: 350px;
  height: 350px;
  background: url(img/web.hover.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-apps {
  width: 350px;
  height: 350px;
  background: url(img/apps.png);
  background-size: 350px;
    border-radius: 8px;

}

#imagen-apps:hover {
  width: 350px;
  height: 350px;
  background: url(img/apps.hover.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-ironhack {
  width: 350px;
  height: 350px;
  background: url(img/ironhack.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-ironhack:hover {
  width: 350px;
  height: 350px;
  background: url(img/ironhack.hover.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-branding {
  width: 350px;
  height: 350px;
  background: url(img/branding.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-branding:hover {
  width: 350px;
  height: 350px;
  background: url(img/branding.hover.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-illustrations {
  width: 350px;
  height: 350px;
  background: url(img/illustrations.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-illustrations:hover {
  width: 350px;
  height: 350px;
  background: url(img/illustrations.hover.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-games {
  width: 350px;
  height: 350px;
  background: url(img/games.png);
  background-size: 350px;
    border-radius: 8px;
}

#imagen-games:hover {
  width: 350px;
  height: 350px;
  background: url(img/games.hover.png);
  background-size: 350px;
    border-radius: 8px;
}



.ContainerApps {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 0px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.ContainerApps div {
  width: 350px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 0px;
  margin-bottom: 0%;
  height: 350px;
  background: pink;
}




.ContainerWeb {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}






/*COLLAGE*/
.containercollages {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.Containercollages div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}
/*END COLLAGE*/


/*ILLUSTRATIONS*/
.containerillustrations {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.Containerillustrations div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;
}

/*END ILLUSTRATIONS*/


/*GAMES*/
.containergames {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.Containergames div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;
}

/*END GAMES*/


.containerinspo {
  align-content: center;
  display: flex;
  justify-content: space-around;
  margin-right: 5%;
}

.ContainerAboutMe {
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-around;
}
.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.ContainerAboutMe img{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-top: 10px;
  max-width: 400px;
  max-height: 400px;
  padding: 20px;
  justify-content: space-around;
}
.ContainerAboutMe p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  font-size: 100%;
  line-height: 25px;
  margin-right: 2%;
  display: flex;
  width: auto;
  justify-content: space-around;
  font-weight:300;
}

  .containercontact {
    list-style: none;
    padding: 30px;
    align-content: center;
    display:block;
    justify-content: space-around;
    margin: 20px;  text-decoration: none;
      color: #212b3b;
      font-family: 'courier new',courier,monospace;
      line-height: 25px;
      font-size: 140%;
      margin-left: 31%;
      display: block;
      width: 60%;
      font-weight:300;
  }
.containercontact p{
  font-weight:400;
}

.containerwitty {
  align-content: center;
  display: flex;
  justify-content: space-around;
  margin-right: 5%;
}

.containersos {
  align-content: center;
  display: flex;
  justify-content: space-around;
  margin-right: 5%;
}

.containerabc {
  align-content: center;
  display: flex;
  justify-content: space-around;
  margin-right: 5%;
}

.containeramiggo {
  align-content: center;
  display: flex;
  justify-content: space-around;
  margin-right: 5%;
}


.containertabaxco {
  align-content: center;
  display: flex;
  justify-content: space-around;
  margin-right: 5%;
}

.containercv {
  align-content: center;
  display: flex;
  justify-content: space-around;
  margin-right: 5%;
}


#imagen-witty {
  width: 300px;
  height: 300px;
  background: url(img/wittylogo.png)
  no-repeat;
  background-size: 300px;
}

#imagen-witty:hover {
  width: 300px;
  height: 300px;
  background: url(img/wittyapp.png)
  no-repeat;
  background-size: 300px;
}

#imagen-sos {
  width: 300px;
  height: 300px;
  background: url(img/soslogo.png)
  no-repeat;
  background-size: 300px;
}

#imagen-sos:hover {
  width: 300px;
  height: 300px;
  background: url(img/sosapp.png)
  no-repeat;
  background-size: 300px;
}

#imagen-loomis {
  width: 300px;
  height: 300px;
  background: url(img/loomislogo.png)
  no-repeat;
  background-size: 300px;
}

#imagen-loomis:hover {
  width: 300px;
  height: 300px;
  background: url(img/loomisapp.png)
  no-repeat;
  background-size: 300px;
}

#imagen-escaneame {
  width: 300px;
  height: 300px;
  background: url(img/escaneamelogo.png)
  no-repeat;
  background-size: 300px;
}

#imagen-escaneame:hover {
  width: 300px;
  height: 300px;
  background: url(img/escaneameapp.png)
  no-repeat;
  background-size: 300px;
}

#imagen-bridgestone {
  width: 300px;
  height: 300px;
  background: url(img/bridgestonelogo.png)
  no-repeat;
  background-size: 300px;
}

#imagen-bridgestone:hover {
  width: 300px;
  height: 300px;
  background: url(img/bridgestoneapp.png)
  no-repeat;
  background-size: 300px;
}

#imagen-bankapp {
  width: 300px;
  height: 300px;
  background: url(img/bankapplogo.png)
  no-repeat;
  background-size: 300px;
}

#imagen-bankapp:hover {
  width: 300px;
  height: 300px;
  background: url(img/bankappapp.png)
  no-repeat;
  background-size: 300px;
}

#imagen-abc {
  width: 300px;
  height: 300px;
  background: url(img/abc.png)
  no-repeat;
  background-size: 300px;
}

#imagen-abc:hover {
  width: 300px;
  height: 300px;
  background: url(img/abc.hover.jpg)
  no-repeat;
  background-size: 300px;
}

#imagen-finect {
  width: 300px;
  height: 300px;
  background: url(img/finect.png)
  no-repeat;
  background-size: 300px;
}

#imagen-finect:hover {
  width: 300px;
  height: 300px;
  background: url(img/finect.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-transitoh {
  width: 300px;
  height: 300px;
  background: url(img/transitoh.png)
  no-repeat;
  background-size: 300px;
}

#imagen-transitoh:hover {
  width: 300px;
  height: 300px;
  background: url(img/transitoh.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-humble {
  width: 300px;
  height: 300px;
  background: url(img/humble.png)
  no-repeat;
  background-size: 300px;
}

#imagen-humble:hover {
  width: 300px;
  height: 300px;
  background: url(img/humble.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-momofone {
  width: 300px;
  height: 300px;
  background: url(img/momofone.png)
  no-repeat;
  background-size: 300px;
}

#imagen-carnescampoverde:hover {
  width: 300px;
  height: 300px;
  background: url(img/carnescampoverde.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-carnescampoverde {
  width: 300px;
  height: 300px;
  background: url(img/carnescampoverde.png)
  no-repeat;
  background-size: 300px;
}

#imagen-momofone:hover {
  width: 300px;
  height: 300px;
  background: url(img/momofone.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-amiggo {
  width: 300px;
  height: 300px;
  background: url(img/amiggo.png)
  no-repeat;
  background-size: 300px;
}

#imagen-amiggo:hover {
  width: 300px;
  height: 300px;
  background: url(img/amiggo.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-klubi {
  width: 300px;
  height: 300px;
  background: url(img/klubi.png)
  no-repeat;
  background-size: 300px;
}

#imagen-klubi:hover {
  width: 300px;
  height: 300px;
  background: url(img/klubi.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-codeswiftr {
  width: 300px;
  height: 300px;
  background: url(img/codeswiftr.png)
  no-repeat;
  background-size: 300px;
}


#imagen-codeswiftr:hover {
  width: 300px;
  height: 300px;
  background: url(img/codeswiftr.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-tabaxco {
  width: 300px;
  height: 300px;
  background: url(img/tabaxco.png)
  no-repeat;
  background-size: 300px;
}

#imagen-tabaxco:hover {
  width: 300px;
  height: 300px;
  background: url(img/tabaxco.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-mvt {
  width: 300px;
  height: 300px;
  background: url(img/mvt.png)
  no-repeat;
  background-size: 300px;
}

#imagen-mvt:hover {
  width: 300px;
  height: 300px;
  background: url(img/mvt.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-letterland {
  width: 300px;
  height: 300px;
  background: url(img/letterland.png)
  no-repeat;
  background-size: 300px;
}

#imagen-letterland:hover {
  width: 300px;
  height: 300px;
  background: url(img/letterland.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-hookedon {
  width: 300px;
  height: 300px;
  background: url(img/logohookedon.png)
  no-repeat;
  background-size: 300px;
}

#imagen-hookedon:hover {
  width: 300px;
  height: 300px;
  background: url(img/hookedon.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-sunsilk {
  width: 300px;
  height: 300px;
  background: url(img/sunsilk.png)
  no-repeat;
  background-size: 300px;
}

#imagen-sunsilk:hover {
  width: 300px;
  height: 300px;
  background: url(img/sunsilk.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-sirdapp {
  width: 300px;
  height: 300px;
  background: url(img/sirdapp.png)
  no-repeat;
  background-size: 300px;
}

#imagen-sirdapp:hover {
  width: 300px;
  height: 300px;
  background: url(img/sirdapp.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-ncl {
  width: 300px;
  height: 300px;
  background: url(img/ncl.png)
  no-repeat;
  background-size: 300px;
}

#imagen-ncl:hover {
  width: 300px;
  height: 300px;
  background: url(img/ncl.hover.png)
  no-repeat;
  background-size: 300px;
}

#imagen-tecmola {
  width: 300px;
  height: 300px;
  background: url(img/tecmola.png)
  no-repeat;
  background-size: 300px;
}

#imagen-tecmola:hover {
  width: 300px;
  height: 300px;
  background: url(img/tecmola.hover.png)
  no-repeat;
  background-size: 300px;
}

.ContainerRRSS {
  display:block;
  height: auto;
  overflow:hidden;
  position: fixed;
  float: left;
  margin-left: 5%;
  margin-top: 2%;

  flex-direction: column;
}

.Containerback {
  display:block;
  height: auto;
  overflow:hidden;
  position: fixed;
  float: left;
  margin-left: 5%;
  margin-top: 2%;

  flex-direction: column;
}

#imagen-linkedin {
  width: 60px;
  height: 60px;
  background: url(img/linkedin.png)
  no-repeat;
  background-size: 60px;
}

#imagen-linkedin:hover {
  width: 60px;
  height: 60px;
  background: url(img/linkedin.hover.png)
  no-repeat;
  background-size: 60px;
}

#imagen-linkedin {
display: block;
margin-top: 4%;
margin-left: 5%;
padding: 4px;
}

#imagen-medium{
  width: 60px;
  height: 60px;
  background: url(img/medium.png)
  no-repeat;
  background-size: 60px;
}

#imagen-medium:hover {
  width: 60px;
  height: 60px;
  background: url(img/medium.hover.png)
  no-repeat;
  background-size: 60px;
}

#imagen-medium {
display: block;
margin-top: 4%;
margin-left: 5%;
padding: 4px;
}

#imagen-instagram {
  width: 60px;
  height: 60px;
  background: url(img/instagram.png)
  no-repeat;
  background-size: 60px;
}

#imagen-instagram:hover {
  width: 60px;
  height: 60px;
  background: url(img/instagram.hover.png)
  no-repeat;
  background-size: 60px;
}

#imagen-instagram {
  display: block;
  margin-top: 4%;
  margin-left: 5%;
  padding: 4px;
}

#imagen-email {
  width: 60px;
  height: 60px;
  background: url(img/email.png)
  no-repeat;
  background-size: 60px;
}

#imagen-email:hover {
  width: 60px;
  height: 60px;
  background: url(img/email.hover.png)
  no-repeat;
  background-size: 60px;
}

#imagen-email {
display: block;
margin-top: 4%;
margin-left: 5%;
padding: 4px;
}

#imagen-back {
  width: 60px;
  height: 60px;
  background: url(img/back.png)
  no-repeat;
  background-size: 60px;
}

#imagen-back:hover {
  width: 60px;
  height: 60px;
  background: url(img/back.hover.png)
  no-repeat;
  background-size: 60px;
}

#imagen-back {
display: block;
margin-top: 4%;
margin-left: 5%;
padding: 4px;
}

footer {

  position: fixed;
  left:0%;
  bottom:0%;
  height:auto;
  width:100%;
  background-color: #ffffff;
  opacity: 100%;
  margin-top: 100%;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;


}



.FooterText {
    text-decoration: none;
    color: #f00658;
    text-align: center;
    font-family: 'courier new',courier,monospace;
    line-height: 25px;
    font-weight: 300;
}


/*LANDING*/

.landing #home {
  font-size: 1em;
  color: #ffffff;
  font-weight: bold;
  padding: 7px;
  margin-top: 20px;
}

.landing #home:hover {
  font-size: 1em;
  color: #f00658;
  font-weight:bold;
  padding: 7px;
  margin-top: 20px;
}

.landing #projects {
  font-size: 1em;
  color: #ffffff;
  font-weight: bold;
  padding: 7px;
  margin-top: 20px;
}

.landing #projects:hover {
  font-size: 1em;
  color: #f00658;
  font-weight:bold;
  padding: 7px;
  margin-top: 20px;
}

.landing #aboutme {
  font-size: 1em;
  color: #ffffff;
  font-weight: bold;
  padding: 7px;
  margin-top: 20px;
}

.landing #aboutme:hover {
  font-size: 1em;
  color: #f00658;
  font-weight:bold;
  padding: 7px;
  margin-top: 20px;
}

.landing h1 a {
  text-decoration: none;
  color: #ffffff;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
}

.landing footer {
  position: fixed;
  left:0%;
  bottom:0%;
  height:auto;
  width:100%;
  background-color: #000000;
  opacity: 70%;
  margin-top: 100%;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
}

.landing .FooterText {
    text-decoration: none;
    color: #ffffff;
}

.landing #imagen-linkedin {
  width: 60px;
  height: 60px;
  background: url(img/linkedin.white.png)
  no-repeat;
}

.landing #imagen-linkedin:hover {
  width: 60px;
  height: 60px;
  background: url(img/linkedin.hover.png)
  no-repeat;
}

.landing #imagen-linkedin {
display: block;
margin-top: 4%;
margin-left: 5%;
padding: 4px;
}

.landing #imagen-medium{
  width: 60px;
  height: 60px;
  background: url(img/medium.white.png)
  no-repeat;
}

.landing #imagen-medium:hover {
  width: 60px;
  height: 60px;
  background: url(img/medium.hover.png)
  no-repeat;
}

.landing #imagen-medium {
display: block;
margin-top: 4%;
margin-left: 5%;
padding: 4px;
}

.landing #imagen-instagram {
  width: 60px;
  height: 60px;
  background: url(img/instagram.white.png)
  no-repeat;
}

.landing #imagen-instagram:hover {
  width: 60px;
  height: 60px;
  background: url(img/instagram.hover.png)
  no-repeat;
}

.landing #imagen-instagram {
display: block;
margin-top: 4%;
margin-left: 5%;
padding: 4px;
}

.landing #imagen-email {
  width: 60px;
  height: 60px;
  background: url(img/email.white.png)
  no-repeat;
}

.landing #imagen-email:hover {
  width: 60px;
  height: 60px;
  background: url(img/email.hover.png)
  no-repeat;
}

.landing #imagen-email {
display: block;
margin-top: 4%;
margin-left: 5%;
padding: 4px;
}

/*WITTY*/

.WittyPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  width: 500px;
}

.WittyPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}

/*END WITTY*/

/*ABC*/

.ABCPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  width: 500px;
}

.ABCPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}

/*END ABC*/

/*SOS*/

.SOSPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  width: 500px;
}

.SOSPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}




/*END SOS*/

/*transitoh*/

.transitohPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  justify-content: space-around;
  width: 200px;
}

.transitohPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:300;
  display: block;
  width: 60%;
  justify-content: space-around;}



/*CONTAINER*/

.containertransitohwireframes {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containertransitoh img{
  width: 691px;
  height: 491px;
}

.Containertransitoh div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}

.containertransitohwireframes img{
  width: 361px;
  height: 513px;
}

.Containertransitohwireframes div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}

.containeruxtransitoh {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containeruxtransitoh img{
  width: 360px;

}

.containeruxtransitoh div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;}

/*END transitoh*/

/*KLUBI*/

.klubiPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  justify-content: space-around;
  width: 200px;
}

.klubiPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:300;
  display: block;
  width: 60%;
  justify-content: space-around;}



/*CONTAINER*/

.containerklubi {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containerklubi img{
  max-width: 100%;
}

.Containerklubi div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}

.containerklubi img{
  width: 361px;
  height: 513px;
}



/*END KLUBI*/


/*AMIGGO*/

.amiggoPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  width: 200px;
}

.amiggoPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containeramiggo img{
  width: 691px;
  height: 491px;
}

.Containeramiggo div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}
/*END AMIGGO*/


/*codeswiftr*/

.codeswiftrPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  width: 200px;
}

.codeswiftrPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containercodeswiftr img{
  width: 691px;
  height: 491px;
}

.Containercodeswiftr div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}
/*END codeswiftr*/

/*TABAXCO*/

.tabaxcoPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  width: 400px;
}

.tabaxcoPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*END TABAXCO*/

/*MVT*/

.mvtPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  width: 200px;
}

.mvtPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containermvt img{
  width: 400px;
  height: 400px;
}

.Containermvt div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}
/*END MVT*/

/*LOOMIS*/

.loomisPage img{
  width: 200px;
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
}

.loomisPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containerloomiswireframes {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containerloomis {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containerloomis img{
  width: 194px;


}

.Containerloomis div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;
  position: relative;
}

.containeruxloomis {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containeruxloomis img{
  width: 360px;

}

.containeruxloomis div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;}

/*END LOOMIS*/

/*escaneame*/

.escaneamePage img{

  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
    width: 200px;
}

.escaneamePage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containerescaneame img {
  width: 276px;
  height: 572px;

}



/*END ESCANEAME*/

/*BANKAPP*/

.bankappPage img{
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  justify-content: space-around;
  width: 200px;
}


.bankappPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

/*CONTAINER*/
.containerbankapp {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containerbankapp img{
  width: 194px;

}

.Containerbankapp div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}
/*END bankapp*/

/*BRIDGESTONE*/

.bridgestonePage img{
    display: block;
    align-content: center;
    justify-content: space-around;
    margin: auto;
    margin-top: 2%;
    display: flex;
    justify-content: space-around;
    width: 200px;
  }


.bridgestonePage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}

  .bridgestonePage li{
    text-decoration: none;
    color: #212b3b;
    font-family: 'courier new',courier,monospace;
    line-height: 25px;
    font-size: 16px;
    margin-top: 5%;
    margin:auto;
    font-weight:400;
    display: block;
    width: 60%;
    justify-content: space-around;
    font-weight:300;}



/*CONTAINER*/

/*CONTAINER*/
.containerbridgestone {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containerbridgestone img{
  width: 360px;

}

.Containerbridgestone div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}

.containerbridgestonevideo {
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
  justify-content: space-around;
}

/*CONTAINER*/

.containeruxbridgestone {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containeruxbridgestone img{
  width: 360px;

}

.containeruxbridgestone div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;

}


/*END BRIDGESTONE*/

/*LETTERLAND*/

.letterlandPage img{
  width: 200px;
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
}

.letterlandPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containerletterland {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containerletterland img{
  width: 50%;


}

.Containerletterland div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;
}

/*END LETTERLAND*/

/*HOOKEDON*/

.hookedonPage img{
  width: 200px;
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
}

.hookedonPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containerhookedon {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containerhookedonux img{
  width: 70%;


}
.containerhookedon img{
  width: 50%;
}

.Containerhookedon div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;
}

/*END HOOKEDON*/

/*SUNSILK*/

.sunsilkPage img{
  width: 200px;
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
}

.sunsilkPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containersunsilk {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containersunsilk img{
  width: 80%;


}

.Containersunsilk div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;
}

/*END SUNSILK*/


/*SIRDAPP*/



.sirdappPage img{
  width: 200px;
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
}

.sirdappPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containersirdapp {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containersirdapp img{
  width: 80%;


}

.Containersirdapp div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;
}

/*END SIRDAPP*/

/*NCL*/

.nclPage img{
  width: 200px;
  display: block;
  align-content: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 2%;
  display: flex;
}

.nclPage p{
  text-decoration: none;
  color: #212b3b;
  font-family: 'courier new',courier,monospace;
  line-height: 25px;
  font-size: 16px;
  margin-top: 5%;
  margin:auto;
  font-weight:400;
  display: block;
  width: 60%;
  justify-content: space-around;
  font-weight:300;}


/*CONTAINER*/

.containernclwires {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containerncl {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}

.containerncl img{
  width: 80%;


}

.Containerncl div {
  display: block;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 5%;
  display: flex;
}

/*END NCL*/


/*MAGARI*/


/*MAGARIPrueba1*/


.grid-blockindexmagari {
  height: 500px;
  width: 100%;
  background-image:url("img/magari.png");

  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ffffff;
  opacity: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;



}

.grid-blockindexmagari img{
  width: 100%;
  margin: 20px;
  height: 300px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-position: center;


}


/*MAGARIPrueba2*/
/*grid-blockindexmagari {
  height: 400px;
  width: 100%;
  background-image:url("img/magari.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ffffff;
  opacity: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  background-attachment: fixed;
}

.grid-blockindexmagari img{
  width: 100%;
  margin: 20px;
  height: 20%;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}*/

/*MAGARIPruebaimagenseparada*/
/*.grid-blockindexmagari {
  height: 500px;
  width: 100%;
  background-color: #ffffff;
  opacity: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  background-attachment: fixed;
}

.grid-blockindexmagari img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);

}

*/



.grid-blockindexmagari h2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.grid-blockindexmagari a{
    text-align: center;
    position: fixed;
    margin-top: 35%;
}

.Containerbannermagari {
  padding: 1%;
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  margin-right: 5%;
  margin-left: 5%;
  margin-top: 2%;
  margin-bottom: 2%;
  box-shadow: 2px 2px 10px #f4f4f4;
  border-radius: 8px;
}
.flex-column-magari {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.Containerbannermagari img{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 1%;
  margin-top: 10px;
  width: 300px;
  height: 300px;
  padding: 20px;
  justify-content: space-around;
  border-radius: 28px;

}

.Containerbannermagari h3{
  text-decoration: none;
    margin-top: 10px;
  color: #212b3b;
  font-family: "martel Sans", Helvetica, sans-serif;
  /*font-size: 100%;*/
  margin-right: 2%;
/*  display: flex;*/
  width: auto;
  justify-content: space-around;
    text-align: left;
}


.Containerbannermagari h4{
  text-decoration: none;
  color: #212b3b;
  margin-right: 2%;
  display: flex;
  width: auto;
  justify-content: space-around;
  text-decoration: none;
  text-align: left;
  font-family: "martel Sans", Helvetica, sans-serif;
  font-size: 1em;
  margin-top: 5%;
  margin-bottom: 0%;
  font-weight:lighter;
}

.containermagari {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  max-width: 100%;
  padding: 20px;
  justify-content: space-around;
}



.containermagari img {
  margin-bottom: 5%;
  display: flex;
  width: 250px;
  margin: 20px;
  height: 320px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
  /*border-bottom: 50px solid #ffffff;*/
  border-radius: 8px;

}


.containermagari img:active {
  -webkit-transform: scale(2);
  transform: scale(2);
  cursor: zoom-out;
}

.buttongetintouchmagari {
  display: inline-block;
  border-radius: 4px;
  border: 2px;
  color: #ffffff;
  background: #212b3b;
  text-align: center;
  font-weight:normal;
  font-size: 20px;
  padding: 20px;
  width: 160px;
  cursor: pointer;
  margin-bottom: : 35%;
  margin-left: 50%;
  transform: translateX(-50%);
  font-family: "martel Sans", Helvetica, sans-serif;


}

.buttongetintouchmagari:hover {
  display: inline-block;
  border-radius: 4px;
  background: #ffffff;
  border: none;
  color: #000000;
  text-align: center;
  font-size: 20px;
  padding: 20px;
  width: 160px;
  cursor: pointer;
  margin-bottom: : 35%;
  margin-left: 50%;
  transform: translateX(-50%);

}



/*BUTTONHOME*/
.buttonhome {
  display: inline-block;
  border-radius: 4px;
  background: #f00658;
  border: none;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  padding: 20px;
  width: 180px;
  cursor: pointer;
  margin-top: 5%;
  margin-left: 50%;
  transform: translateX(-50%);
  position: fixed;
}

.buttonhome:hover {
  display: inline-block;
  border-radius: 4px;
  background: #ffffff;
  border: none;
  color: #000000;
  text-align: center;
  font-size: 24px;
  padding: 20px;
  width: 180px;
  cursor: pointer;
  margin-top: 5%;
  margin-left: 50%;
  transform: translateX(-50%);
  position: fixed;
}
/*END BUTTONHOME*/

/*BUTTONABOUTME*/
.buttonaboutme {
  display: inline-block;
  border-radius: 4px;
  background: #ffffff;
  border-style: solid;
  border-color: #f00658;
  color: #f00658;
  text-align: center;
  font-weight:300;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.buttonaboutme:hover {
  display: inline-block;
  border-radius: 4px;
  background: #f00658;
  border-style: solid;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}
/*END BUTTONABOUTME*/

/*Download CV*/
.containerDownloadcv a {
  display: inline-block;
  border-radius: 4px;
  background: #ffffff;
  border-style: solid;
  border-color: #f00658;
  color: #f00658;
  text-align: center;
  font-weight:300;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:5px;
  margin-left: 50%;
  transform: translateX(-50%);

}

.containerDownloadcv a:hover {
  display: inline-block;
  border-radius: 4px;
  background: #f00658;
  border-style: solid;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:5px;
  margin-left: 50%;
  transform: translateX(-50%);
}
/*Download CV*/

/*BUTTONCV*/
.buttoncv {
  display: inline-block;
  border-radius: 4px;
  background: #ffffff;
  border-style: solid;
  border-color: #f00658;
  color: #f00658;
  text-align: center;
  font-weight:300;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:5%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.buttoncv:hover {
  display: inline-block;
  border-radius: 4px;
  background: #f00658;
  border-style: solid;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:5%;
  margin-left: 50%;
  transform: translateX(-50%);
}
/*END BUTTONCV*/

/*BUTTONAMIGGOLINK*/
.buttonamiggolink {
  display: inline-block;
  border-radius: 4px;
  background: #ffffff;
  border-style: solid;
  border-color: #f00658;
  color: #f00658;
  text-align: center;
  font-weight:300;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.buttonamiggolink:hover {
  display: inline-block;
  border-radius: 4px;
  background: #f00658;
  border-style: solid;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}
/*END BUTTONAMIGGOLINK*/

/*BUTTONAMIGGOLINK*/
.buttonamiggolink {
  display: inline-block;
  border-radius: 4px;
  background: #ffffff;
  border-style: solid;
  border-color: #f00658;
  color: #f00658;
  text-align: center;
  font-weight:300;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.buttonamiggolink:hover {
  display: inline-block;
  border-radius: 4px;
  background: #f00658;
  border-style: solid;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}
/*END BUTTONcodeswiftr/*BUTTONcodeswiftrLINK*/
.buttoncodeswiftrlink {
  display: inline-block;
  border-radius: 4px;
  background: #ffffff;
  border-style: solid;
  border-color: #f00658;
  color: #f00658;
  text-align: center;
  font-weight:300;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.buttoncodeswiftrlink:hover {
  display: inline-block;
  border-radius: 4px;
  background: #f00658;
  border-style: solid;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}
/*END BUTTONcodeswiftrLINK*/

/*BUTTONBRIDGESTONELINK*/
.buttonbridgestonelink {
  display: inline-block;
  border-radius: 4px;
  background: #ffffff;
  border-style: solid;
  border-color: #f00658;
  color: #f00658;
  text-align: center;
  font-weight:300;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.buttonbridgestonelink:hover {
  display: inline-block;
  border-radius: 4px;
  background: #f00658;
  border-style: solid;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:10%;
  margin-left: 50%;
  transform: translateX(-50%);
}
/*END BUTTONBRIDGESTONELINK*/

/*Slider*/
.container{
  margin: auto;
  background-color: white;
  width: 800px;
  padding: 30px;

}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.slider{
  position: relative;
  width: 691px;
  height: 491px;
}

ul.slider li {
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    width: inherit;
    height: inherit;
    transition: opacity .5s;
    background:#fff;
}

ul.slider li img{
  width: 691px;
  height: 491px;
  object-fit: cover;


}

ul.slider li:first-child {
    opacity: 1; /*Mostramos el primer <li>*/

}

ul.slider li:target {
    opacity: 1; /*Mostramos el <li> del enlace que pulsemos*/
}

.menu{
  text-align: center;
  margin: 20px;
}

.menu li{
  display: inline-block;
  text-align: center;
}

.menu li a{
  display: inline-block;
  color: white;
  text-decoration: none;
  background-color: #f00658;
  padding: 10px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  border-radius: 100%;
}

/*End slider*/

/*AUDIO*/
.ContainterAboutme audio {

  display: inline-block;
  text-align: center;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom:5%;
  margin-left: 50%;

}
/*AUDIO*/