@font-face {
  font-family: "axiforma";
  font-display: swap;
  src: url("../axiforma.otf");
}

.titulo{
  font-family: axiforma; 
  font-size:200%; 
  color: rgb(192,0,0);
  font-weight: bold;
}

.subtitulo{
  font-family: axiforma; 
  font-size:130%; 
  color: #7c7b7b;
}


.titulop{
  font-family: axiforma; 
  font-size:180%; 
  color: rgb(192,0,0);
  font-weight: bold;
}

.subtitulofooter {
  font-family: axiforma; 
  font-size:70%;
}

.subtitulop{
  font-family: axiforma; 
  font-size:110%; 
  color: #7c7b7b;
}

/*centrar*/
.box{
  margin: 0 auto;
  width: 128px;
}

/*input contacto*/
.ii{
  font-family: axiforma;
  width: 100%;
  padding: 25px 20px;
  margin: 6px 0;
  background-color: rgb(242,242,242);
  font-weight: bold;
  color: #7c7b7b;
  border-style: none;
}

.iii{
  font-family: axiforma;
  width: 100%;
  padding: 40px 20px;
  margin: 6px 0;
  background-color: rgb(242,242,242);
  font-weight: bold;
  color: #7c7b7b;
  border-style: none;
}

/*hover circle*/

.main{
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: center;
}
.column{
  flex-basis: 1 10px;
  width: calc(100% / 3 - 10px);
  margin: 5px;
  padding: 0;
}
figure {
    position: relative; 
  overflow: hidden;
  margin: 0;
  height: 100%;
  width: 100%;
  filter: grayscale(.8);
}
figure img{
  width: 100%;
  height: 100%;
}
figure::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(0,0,0,.2);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
figure:hover{
  animation: bloom ease-in-out .75s forwards;
}
figure:hover::before {
    animation: circle .75s;
}
@keyframes bloom {
    0% {
        filter: grayscale(.8);
    }
    40% {
        filter: grayscale(.5);
    }
    100% {
        filter: grayscale(0);
    }
}
@keyframes circle {
    0% {
        opacity: .5;
    background: rgba(213,156,34,.2);
    
    }
    40% {
        opacity: 1;
    background: rgba(213,34,160,.2);
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}



/*blanco y negro*/

.blancoynegro img {
  filter: url('#grayscale'); 
  -webkit-filter: grayscale(95%);
  -moz-filter: grayscale(95%);
  -ms-filter: grayscale(95%);
  -o-filter: grayscale(95%);
  filter: grayscale(95%);
  filter: Gray();
  
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  }
  .blancoynegro img:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: none;
  
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  }
/*blanco y negro*/
#hide
{
    height:2000px;    
}

#hide DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme
{
    opacity:0;
}

.fadeinleft {
	opacity:0;
	margin-left:-300px;	
	max-width:100%;
}

.footer {
    background-color: #FFFFFF;
    line-height: 20px;
    /*border-top: 1px solid #DDDDDD;*/
    overflow: hidden;
  }
  .footer nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: normal;
  }
  .footer nav > ul a:not(.btn) {
    color: #777777;
    display: block;
    margin-bottom: 3px;
  }
  .footer nav > ul a:not(.btn):hover, .footer nav > ul a:not(.btn):focus {
    color: #777777;
  }
  .footer .social-area {
    padding: 15px 0;
  }
  .footer .social-area h5 {
    padding-bottom: 15px;
  }
  .footer .social-area > a:not(.btn) {
    color: #777777;
    display: inline-block;
    vertical-align: top;
    padding: 10px 5px;
    font-size: 18px;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
  }
  .footer .social-area > a:not(.btn):hover, .footer .social-area > a:not(.btn):focus {
    color: #777777;
  }
  .footer .copyright {
    color: #777777;
    padding: 10px 15px;
    margin: 15px 3px;
    line-height: 20px;
    text-align: left;
  }
  .footer hr {
    border-color: #DDDDDD;
  }
  .footer .title {
    color: #777777;
  }
  .footer .title {
    text-align: left;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
  }
  .footer .btn-social {
    color: #9A9A9A;
  }
  
  .footer:not(.footer-big) nav > ul {
    font-size: 16px;
  }
  .footer:not(.footer-big) nav > ul li {
    margin-left: 20px;
    float: left;
  }
  .footer:not(.footer-big) nav > ul a {
    padding: 10px 0px;
    margin: 15px 10px 15px 0px;
  }
  
  .footer-color-gray {
    background-color: #F5F5F5;
  }
  
  .footer-color-black,
  .footer-transparent {
    background-color: rgba(30, 30, 30, 0.97);
    color: #DDDDDD;
  }

  .footer-color-red{
    background-color: rgb(192,0,0);
    color: rgb(192,0,0);
  }
  
  
  
  .footer-big {
    padding-top: 30px;
  }
  .footer-big hr {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .footer-big .container > hr {
    margin-top: 50px;
  }
  .footer-big .copyright {
    margin: 10px 0px 20px;
  }
  .footer-big .social-area > * {
    margin: 0 15px;
  }
  .footer-big nav > ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: normal;
  }
  .footer-big nav > ul li {
    float: none;
  }
  .footer-big nav > ul .btn {
    margin-bottom: 5px;
  }
  .footer-big nav > ul .btn-social.btn-simple {
    padding: 0 0 4px 0;
  } 
  .footer-big .form-group {
    margin-top: 15px;
  }
  .footer-big .numbers h4 {
    margin: 0 0 10px 0;
  }
  

  /* efecto up */

  .imgimg {
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -ms-transition: margin 0.5s ease-out;
    transition: margin 0.5s ease-out;
    }
    .ex1 img:hover {
    margin-top: 2px;
    }

    /* ir arriba*/

    /*Flecha para hacer la pagina hacia arriba*/
.ir-arriba{
  display:none;
  background-repeat:no-repeat;
  font-size:20px;
  color:black;
  cursor:pointer;
  position:fixed;
  bottom:10px;
  right:10px;
  z-index:2;
}

.arial{
  font-family:arial;
}

/* flip */
.flip3D{
  width: 218px; 
  height: 218px;
}

.flip3D > .front{
  position: absolute;
  transform: perspective(600px;) rotateY(0deg);
  background-color: rgb(242,242,242); width: 210px; height: 210px; border-radius: 7px;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
  color: white;
}

.flip3D > .back{
  position: absolute;
  transform: perspective(600px) rotateY(180deg);
  background-color: rgb(242,242,242); width: 210px; height: 210px; border-radius: 7px;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
}

.flip3D:hover > .front{
  transform:perspective(600px) rotateY(-180deg);
}

.flip3D:hover > .back{
  transform:perspective(600px) rotateY(0deg);
}

/* flip blanco*/

.flip3Dd{
  width: 218px; 
  height: 218px;
}

.flip3Dd > .frontd{
  position: absolute;
  transform: perspective(600px;) rotateY(0deg);
  background-color: white; width: 210px; height: 210px; border-radius: 7px;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
  color: white;
}

.flip3Dd > .backd{
  position: absolute;
  transform: perspective(600px) rotateY(180deg);
  background-color: white; width: 210px; height: 210px; border-radius: 7px;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
}

.flip3Dd:hover > .frontd{
  transform:perspective(600px) rotateY(-180deg);
}

.flip3Dd:hover > .backd{
  transform:perspective(600px) rotateY(0deg);
}

.btnmio{
  background-color: rgb(192,0,0); color: white; font-family: axiforma;
}

/**/

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}

/* formularios*/


.buscar {
  width: 50%;
  max-width: 500px;
  min-width: 370px;
  margin: 2rem auto 3rem;
}
input, label {
  background: rgba(255,255,255,1);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 35px;
  padding: 0 .5rem;
  height: 35px;
  width: 70%;
  display: inline-block;
  color: #9ECCAA;
  vertical-align: top;
  -webkit-appearance: none;
  box-shadow: 6px 6px 0 0 #98A2BA;
  transition: .7s;
  cursor: none;
}
label {
  background: rgba(253,80,50,1);
  width: 30%;
  padding: 0;
  cursor: pointer;
  color: #fafafa;
}
label:active, label:focus {
  opacity: .7;
}
input:hover, input:focus {
  background: rgba(255,255,255,1);
  border: 0 none;
  outline: 0 none;
  z-index: 2;
  box-shadow: -8px -8px 0 0 rgb(192,0,0);
}
input:hover + label,
input:focus + label { 
  background: rgba(253,80,50,1);
  box-shadow: -8px -8px 0 0 rgb(192,0,0);
  border: 0 none;
}
label:before, label:after {
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #fafafa;
  position: absolute;
  top: -10px;
  left:-240%;
  z-index: 5;
  opacity: 0;
}
label:after {
  border-top-color: transparent;
  border-bottom-color: #fafafa;
  top: auto;
  bottom: -10px;
}
input:hover + label:before,
input:hover + label:after {
  opacity: 1;
  -webkit-animation: .5s miraquete infinite steps(1);
          animation: .5s miraquete infinite steps(1);
}
input:focus + label:after,
input:focus + label:before {
  opacity: 1;
  -webkit-animation: 2s correveidile infinite;
          animation: 2s correveidile infinite;
}
::-webkit-search-cancel-button {
  cursor: pointer;
  padding: 0 .3rem;
}
@-webkit-keyframes miraquete {
  0% {opacity:1; -webkit-transform: scale(.75); transform: scale(.75)}
  50% {-webkit-transform: scale(1.5);transform: scale(1.5)}
}
@keyframes miraquete {
  0% {opacity:1; -webkit-transform: scale(.75); transform: scale(.75)}
  50% {-webkit-transform: scale(1.5);transform: scale(1.5)}
}
@-webkit-keyframes correveidile {
  0% {left: -240%; -webkit-transform: scale(.75); transform: scale(.75)}
  50% {left: -10px; -webkit-transform: scale(2); transform: scale(2)}
}
@keyframes correveidile {
  0% {left: -240%; -webkit-transform: scale(.75); transform: scale(.75)}
  50% {left: -10px; -webkit-transform: scale(2); transform: scale(2)}
}
    .logo-footer {
        width: 175px;
        height: 15px;
    }