/* ********** Custom Properties ********** */
:root {
  --first-color: #00cac7;
  --first-alpha-color: rgba(0, 202, 199, 1);
  --second-color: #0a309b;
  --second-alpha-color: rgba(10, 48, 155, 1);
  --white-color: #EDFCFF;
  --gray-light-color: #f3f3f3;
  --gray-color: #ccc;
  --gray-dark-color: #666;
  --black-color: #000;
  --link-color: #509ee3;
  --link-alpha-color: rgba(80, 158, 227,0.50);
  --link-bg-alpha-color: rgba(33, 150, 243, 0.75);
  --title-color: #333;
  --text-color: #222;
  --white-alpha-color: rgba(206, 153, 153, 0.5);
  --black-alpha-color: rgba(0, 0, 0, 0.5);
  --font: "Raleway", sans-serif;
  --max-width: 1200px;
  --header-height: 4rem;
  --hero-image-movil: url('assets/hero-image-waves-mobile.png');
}


/* ********** Reset ********** */
html {
  box-sizing: border-box;
  font-family: var(--font);
  scroll-behavior: smooth;
  background-color: var(--white-color);
  color: var(--black-color);
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--black-color);
  font-family: var(--font);
}

a {
  color: var(--link-color);
  transition: all 0.5s ease-out;
}

a:hover {
  opacity: 0.75;
}

h1 {
  margin: 0;
  font-size: 2rem;
}

h2 {
  margin: 0;
  font-size: 1.5rem;
}

h3 {
  margin: 0;
  font-size: 1.25rem;
}

h4 {
  margin: 0;
  font-size: 1rem;
}

h5 {
  margin: 0;
  font-size: 0.85rem;
}

h6 {
  margin: 0;
  font-size: 0.7rem;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  line-height: 1.6;
}

.wave-separator{
display: block;
}


/* ********** Contact Form ********** */

.contact-container{
  grid-template-columns: repeat(2, 50%);
  width: 100%;
}

.contact-description{
  grid-template-columns: 1;
  grid-template-rows: repeat(2, 48%);
  width: 48%;
  float: left;
}

.contact-description h2{
  font-size: 3rem;
}

.contact-description a{
  text-decoration: none;
}


.container-form{
  grid-template-columns: 1;
  grid-template-rows: repeat(2, 48%);
  width: 100%;
  float: left;
}

.contact-form {
  margin: 2rem auto;
  padding: 1rem;
  max-width: 800px;
  border-radius: 1rem;
  background-color: var(--second-alpha-color);
}

.contact-form > * {
  padding: 0.5rem;
  margin: 1rem auto;
  display: block;
  width: 100%;
}

.contact-form input,
.contact-form textarea {
  font-size: 0.85rem;
  font-family: var(--font);
}

.contact-form input {
  border: 0;
  padding-left: 0;
  border-bottom: thin solid var(--gray-dark-color);
}

.contact-form textarea {
  border: thin solid var(--gray-dark-color);
  resize: none;
}

.contact-form input[type="submit"] {
  margin-top: 0;
  cursor: pointer;
  transition: all 0.5s ease-out;
}

.contact-form input[type="submit"]:hover {
  opacity: 0.75;
}

.contact-form *::placeholder {
  color: var(--gray-dark-color);
}

.contact-form-response {
  padding: 1rem;
  width: 400px;
  text-align: center;
  background-color: var(--white-color);
}
.contact-form-response svg {
  margin-top: 2rem;
  width: 4rem;
  height: 4rem;
  fill: var(--first-color);
}

.modal#gracias:target {
  opacity: 1;
  pointer-events: auto;
}

@media screen and (max-width: 768px) {
 
  .contact-container{
    grid-template-columns:1;
    width: 100%;
  } 

  .contact-description{
    grid-template-columns: 1;
    grid-template-rows: repeat(2, 48%);
    width: 100%;
  }

  .contact-description h2{
    font-size: 2rem;
  }

}

@media screen and (min-width: 1024px) {
  
  .contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;
  }

  .contact-form textarea,
  .contact-form-loader {
    grid-column: span 2;
  }

  .contact-form input[type="submit"] {
    margin-left: 0;
  }
}

/* ********** HeroImage ********** */
.hero-image {
  background-image: var(--hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: var(--hero-attachment);
}

.hero-image-opacity {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-image-content{
  width: 80%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  justify-content: space-between;
}


.hero-image-container{
  float: left;
  text-align: left;
}

.hero-image-title {
  font-size: 5.5vw;
  color: var(--white-color);
  text-align: left;
}


.gradient-text{
  font-size: 5.8vw;
  font-weight: bold;
  background-image:linear-gradient(-45deg, #10cf89,#34dbe1, #095bb8);
  /*color: #d90062 #509ee3 ;*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-small{
  font-size: 3.2vw;
  background-image:linear-gradient(45deg, #10cf89,#34dbe1, #095bb8);
  /*color: #d90062 #509ee3 ;*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


@media screen and (max-width: 768px){
  .hero-image-title{
    font-size: 12.5vw;
    margin-top: 2rem;
  }

  .gradient-text{
    font-size: 7.5vw;
  }

  .gradient-text-small{
    font-size: 9.5vw;
    background-image:linear-gradient(45deg, #10cf89,#34dbe1, #095bb8);
    /*color: #d90062 #509ee3 ;*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hero-image {
    background-image: var(--hero-image-movil);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: var(--hero-attachment);
  }

  .hero-image-content img{
    display: none;
  }
}


/* ********** Menu ********** */
.menu-btn {
  outline: thin solid var(--second-color);
  border: 0;
  cursor: pointer;
  background-color: var(--first-color);
}

.menu-btn svg {
  fill: var(--white-color);
}

.menu {
  position: fixed;
  left: 0;
  bottom: var(--header-height);
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--second-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.menu.is-active {
  opacity: 1;
  pointer-events: auto;
}

.menu a {
  padding: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: var(--white-color);
  
}

.menu a:hover {
  color: var(--first-alpha-color);
}

@media screen and (min-width: 1024px) {
  .menu-btn {
    display: none;
  }

  .menu {
    position: static;
    width: auto;
    flex-direction: row;
    opacity: 1;
    pointer-events: auto;
  }

  .menu a {
    padding: 0 1rem;
  }

  .menu a:last-child {
    padding-right: 0;
  }

  .menu a:hover {
    background-color: var(--second-alpha-color);
  }
}

@media screen and (max-width: 768px){
  .menu.is-active{
    border-top-left-radius: .8rem;
    border-top-right-radius: .8rem;
    background-color: var(--first-color);
  }

  .menu.is-active a{
    color: var(--second-color);
  }

}

/* ********** Modal ********** */
.modal {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--black-alpha-color);
  opacity: 0;
  pointer-events: none;
  transition: all 1s;
}

.modal-content {
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.modal-close svg {
  width: 3rem;
  height: 3rem;
  fill: var(--first-color);
}

.modal[id|="trabajo"]:target {
  opacity: 1;
  pointer-events: auto;
}

/* ********** Utilities ********** */
.avatar {
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

.bg-gray-light {
  background-color: var(--gray-light-color);
 
}

.box-shadow-1 {
  box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.25);
}

.btn {
  border-radius: 15rem;
  padding: 1rem;
  display: inline-block;
  width: 12vw;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: var(--black-color);
  background-color: var(--first-color);
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width);
}
.profile {
  border-radius: 50%;
}


.firma{
  width: 100px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.firma img{
  border-radius: 50%;
}

.none {
  display: none;
}

.section {
  padding: 2rem 1rem;
}

.section-title {
  margin: 2rem auto;
  padding: 0.5rem 1rem;
  text-align: center;
  color: var(--white-color);
}

.text-first-color {
  color: var(--first-color);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

@media screen and (min-width: 1024px) {
  .full-lg-screen {
    width: 100%;
    min-height: 100vh;
  }

  .text-lg-center {
    text-align: center;
  }

  .text-lg-left {
    text-align: left;
  }

  .text-lg-right {
    text-align: right;
  }
}


/* ********** Tecnologias ********** */

.tecnologias section{
  margin: 2rem auto;
  padding: 1rem;
  max-width: 800px;
  border-radius: 1rem;
}

.tec-container{
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.tec-descripcion{
  width: 50%;
  height: auto;
}

.gif-tec{
  width: 40%;
  height: auto;
}

.link-social{
  width: 3rem;
  height: auto;
}

@media screen and (max-width: 768px){
  .tec-container{
    flex-direction: column-reverse;
    align-items: center;
  }

  .tec-descripcion{
    width: 100%;
    height: auto;
  }

  .gif-tec{
    width: 80%;
    height: auto;
  }
  
  .link-social{
    width: 2.5rem;
    height: auto;
  }
  
}

/* ********** Formación Académica ********** */

.formacion section{
  margin: 2rem auto;
  padding: 1rem;
  max-width: 800px;
  border-radius: 1rem;
}

#formacion{
  background-color: var(--second-color);
}

.formacion-container{
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.formacion-container p{
  color: var(--white-color);
  width: 80%;
  line-height: 2.5;
}

.box-formacion{
  width: 20%;
  height: auto;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  text-align: center;
  line-height: 1.5rem;
  color: var(--white-color);
}

.box-formacion hr{
  width: 50%;
}

.box-formacion img{
  width: 80%;
  height: auto;
  margin-top: 1rem;
  border-radius: 50%;
}


@media screen and (max-width: 768px){
  .formacion-container{
    flex-direction: column;
    align-items: center;
  }

  .formacion-container p{
    width: 100%;
    line-height: 2.1;
  }

  .box-formacion{
    width: 80vw;
  }

}

/* ********** Portafolio ********** */

.portafolio section{
  margin: 2rem auto;
  padding: 1rem;
  max-width: 800px;
  border-radius: 1rem;
}

.portafolio-container{
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box-portfolio{
  width: 10rem;
  height: auto;
  margin: 1rem;
  text-align: center;
  border-radius: .5rem;
  margin-top: 1.2rem;
  margin-left: 1.5rem;
  background-color: var(--black-color);
  color: var(--white-color);
}

.box-portfolio:hover{
  scale: 1.1;
  transition: 0.5s;
  background-color: var(--link-alpha-color);
  color: var(--white-color) ;
}

.box-portfolio img{
  width: 100vw;
  height: auto;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.box-portfolio img:hover{
  filter: grayscale(1);
}

.box-portfolio h4{
  padding-top: .5rem;
  padding-bottom: .5rem;
}

@media screen and (max-width: 768px){
  .portafolio-container{
    flex-direction: column;
    align-items: center;
  }

  .box-portfolio{
    width: 70vw;
    height: auto;
  }
}

/* ********** Servicios ********** */

.serv-container{
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

#servicios{
  background-color: var(--second-color);
}

.serv-descripcion{
  width: 50%;
  height: auto;
  color: var(--white-color);
  line-height: 3.5;
}

.serv-png{
  width: 30%;
  height: 30%;
}

.serv-descripcion h2{
  font-size: 3rem;
}

.contenedor_precios_servicios{
  margin-top: 5rem;
  display: flex;
  justify-content:space-evenly;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 20vw;
  padding: 1.2rem 0.5rem;
  margin: 2rem 0;
  text-align: center;
  position: relative;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(33,150,243,.4),0 4px 6px -4px rgba(33,150,243,.4);
  border-radius: 10px;
  background-color: var(--link-color);
}

.content {
  padding: 20px;
}

.content .price {
  color: white;
  font-weight: 800;
  font-size: 50px;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.42);
}

.content .description {
  color: var(--black-color);
  margin-top: 10px;
  font-size: 14px;
}

.content .title {
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.64);
  margin-top: 10px;
  font-size: 25px;
  letter-spacing: 1px;
}

.btn-card-servicios {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
  outline: none;
  color: rgb(255 255 255);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--first-color);
  border-radius: 0.5rem;
  width: 90%;
  text-shadow: 0px 4px 18px #2c3442;
}

.btn-card-servicios a{
  color: var(--white-color);
  text-decoration: none;
}





@media screen and (max-width: 768px){
  .serv-container{
    flex-direction: column;
    align-items: center;
  }

  .serv-descripcion{
    width: 100%;
    height: auto;
  }

  .serv-descripcion h2{
    font-size: 1.8rem;
  }

  .contenedor_precios_servicios{
    flex-direction: column;
    align-items: center;
  }

  .serv-png{
    margin-top: 3.5rem;
    width: 80%;
    height: 80%;
  }

  .card {
    width: 72.5vw;
  }
}


/* ********** Modal Windows********** */

.modal{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 997;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0008;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-in-out;
}

.modal:target{
  opacity: 1;
  pointer-events: auto;
}

.modal-container{
  position: relative;
  border: thin solid var(--link-alpha-color);
  border-radius: .5rem;
  padding: 2rem;
  width: 50%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  background: var(--second-alpha-color);
  color: var(--white-color);
  backdrop-filter: blur(25px);
}

.modal-descripcion{
 display: flex;
 flex-direction: row;
 justify-content: space-around;
}

.modal-descripcion img{
  width: 50%;
  height: 35vh;
  margin-left: auto;
  margin-right: auto;
}
.modal-descripcion p{
  margin: .5rem;
}

.btn-link-project{
  width: auto;
  height: 2rem;
  background-color: #dDefff;
  border: thin #2a9df4 solid;
  border-radius: .5rem;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 2.5rem;
}

.btn-link-project:hover{
  scale: 1;
}

.modal-descripcion a{
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
}


.modal-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 3rem;
  color: var(--black-color);
  background-color: var(--first-alpha-color);
  transition: background-color 300ms linear, transform 300ms ease-in-out;
}

.modal-close:hover{
  background-color: var(--first-alpha-color);
  transform: scale(1.2);
}

/* ********** Mobile Styles ********** */

@media screen and (min-width: 100px) and (max-width: 768px){
 .modal-container{
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
 } 

 .modal-descripcion{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
 }

 .modal-descripcion img{
  width: 100%;
  height: 30vh;
  margin-left: auto;
  margin-right: auto;
}

.btn-link-project{
  margin: .5rem;
}
}

/* ********** Tablet Styles ********** */

@media screen and (min-height: 700px) and (max-width: 1300px){
  .modal-container{
    width: 80vw;
    height: auto;
    
   } 
  
   .modal-descripcion{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
   }
  
   .modal-descripcion img{
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .btn-link-project{
    margin: .8rem;
  }

  .btn{
    width: auto;
    padding: .5rem;
    margin-left: 1.5rem;
  }
}

/* ********** Site Styles ********** */
.about > article {
  margin-bottom: 2rem;
  color: var(--black-color);
}

.about-bg{
  background-color: #000;
}

.contact-card {
  margin: 1rem auto;
  padding: 1rem;
  width: 100%;
  height: 144px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 1rem;
  color: var(--white-color);
  background-color: var(--second-alpha-color);
}

.contact-card > svg {
  width: 2rem;
  height: 2rem;
  fill: var(--first-color);
}

.contact-card > small {
  margin-top: -1rem;
}
.contact-card a{
  color: var(--white-color);
}

.footer {
  margin-bottom: var(--header-height);
  padding: 1.5rem;
  text-align: center;
  color: var(--black-color);
  font-size: 1.2rem;
  font-weight: bold;
}

.footer a{
  text-decoration: none;
}

.header {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  padding: 1rem;
  width: 100%;
  height: var(--header-height);
  background-color: var(--second-color); 
}


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

.logo a {
  color: var(--first-color);
  font-weight: bold;
  font-size: 2rem;
  text-decoration: none;
}

.logo-png{
  width: 2.5rem;
  height: auto;
  border:  thin var(--first-color) solid;
  border-radius: 50%;
}

.social-media a {
  padding: 0 0.4rem;
  text-decoration: none;
}

.social-media svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media screen and (min-width: 768px) {
  .contact-cards {
    display: grid;
    grid-template-columns: repeat(2, 48%);
    justify-content: space-between;
  }

  .portfolio > .container {
    display: grid;
    grid-template-columns: repeat(2, 50%);
  }

  .portfolio .section-title {
    grid-column: span 2;
  }

  .portfolio-modal {
    max-width: 800px;
    flex-direction: row;
  }

  .portfolio-info {
    margin-left: 1rem;
    align-self: center;
  }

  .services > .container {
    display: grid;
    grid-template-columns: repeat(2, 45%);
    justify-content: space-between;
    align-content: center;
  }

  .services .section-title {
    grid-column: span 2;
  }
}

/* ********** Desktop Styles ********** */

@media screen and (min-width: 1024px) {
  .about {
    display: grid;
    grid-template-columns: repeat(3, 30%);
    justify-content: space-between;
    align-content: center;
    -moz-outline-radius: 1rem;
    color: var(--black-color);
  }


  .contact-cards {
    grid-template-columns: repeat(2, 48%);
    width: 50%;
    float: right;
  }

  .footer {
    margin-bottom: 0;
  }

  .header {
    position: sticky;
    top: 0;
    padding: 0.5rem;
    height: calc(var(--header-height) - 0.5rem);
  }

  .portfolio > .container {
    grid-template-columns: repeat(3, 1fr);
  }

  .portfolio .section-title {
    grid-column: span 3;
  }

  .services > .container {
    grid-template-columns: repeat(3, 30%);
  }

  .services .section-title {
    grid-column: span 3;
  }

  .btn-contact{
    margin-top: 5rem;
    float: left;
  }

  .btn-contact:last-child{
    margin-left: 2rem;
    background-color: var(--white-color);
    color: var(--second-color);
  }

}

/* ********** Mobile Styles ********** */

@media screen and (max-width: 768px){
 .section-title{
  margin-top: -1.5rem;
  margin-bottom: 2.5rem;
  padding: .5rem;
  max-width: 800px;
  font-size: 3rem;
 }

 .gradient-text{
  line-height: 3rem;
 }

 .profile {
  border-radius: 50%;
}

.btn{
  width: auto;
  padding: .5rem;
  margin-left: 1.5rem;
}


.btn-contact{
  margin-top: 5rem;
}

.btn-contact:last-child{
  margin-top: 2rem;
  background-color: var(--white-color);
  color: var(--second-color);
}


.logo a{
  color: #fff;
  font-size: 1.8rem;
}

.menu a{
 border-bottom: thin var(--link-alpha-color) solid;
 text-align: left;
}

.header{
  background-color: var(--first-color);
}

.header a{
  color: var(--white-color);
}

.about-links-social{
  display: inline-flex;
  justify-content: space-between;
  width: 85vw;
  margin-left: auto;
  margin-right: auto;
}

}


/* ********** Tablet Styles ********** */

@media screen and (min-width: 700px) and (max-width: 920px){
  
  .profile{
   display: none;
  }

  .logo a{
    color: var(--white-color);
  }

  .box-formacion{
    width: 50vw;
  }

  .box-portfolio{
    width: 50vw;
  }

  .tec-descripcion{
    width: 100%;
    height: auto;
    font-size: 1.3rem;
  }
  .gif-tec{
    width: 80%;
    height: auto;
  }

  .btn{
    width: auto;
    padding: .5rem;
    margin-left: 1.5rem;
  }


}

@media screen and (min-width: 700px) and (max-height: 1024px){

  .contact-container{
    grid-template-columns: repeat(2, 30%);
    width: 100%;
  }
  
  .contact-description{
    grid-template-columns: 1;
    grid-template-rows: repeat(2, 48%);
    width: 48%;
    float: left;
  }
  
  .contact-description h2{
    font-size: 3rem;
  }


  }

#contenedor_carga{
  background-color: var(--second-alpha-color);
  height: 100%;
  width: 100%;
  position:fixed;
  -webkit-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
  z-index: 10000;
}

#carga{
  border: 5px solid var(--first-alpha-color);
  border-top-color: var(--first-color);
  border-top-style: groove;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-animation: girar 1s linear infinite;
  -o-animation: girar 1s linear infinite;
  animation: girar 1s linear infinite;
}

@keyframes girar {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}