@font-face {
    font-family: 'MavenPro-Black';
    src: url('font/MavenPro-Black.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'MavenPro-Bold';
    src: url('font/MavenPro-Bold.ttf') format('truetype');
    /* font-weight: bold; */
  }
  
  @font-face {
    font-family: 'MavenPro-ExtraBold';
    src: url('font/MavenPro-ExtraBold.ttf') format('truetype');
    /* font-weight: bolder; */
  }
  
  @font-face {
    font-family: 'MavenPro-Medium';
    src: url('font/MavenPro-Medium.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'MavenPro-Regular';
    src: url('font/MavenPro-Regular.ttf') format('truetype');
    /* font-weight: normal; */
  }
  
  @font-face {
    font-family: 'MavenPro-SemiBold';
    src: url('font/MavenPro-SemiBold.ttf') format('truetype');
  }
  
  @import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
  :root {
    --d: 700ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);
    --font-sans: 'MavenPro-Bold';
    --font-serif: 'MavenPro-Regular';
  }
  
  * {
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
  }
  
  body {
    display: grid;
    place-items: center;
    background-color: #001f37;
  }
  
  .page-content {
    display: grid;
    top: -10px;
    grid-gap: 1rem;
    padding: 1rem;
    max-width: 1024px;
    margin: 0 auto;
    font-family: 'MavenPro-Regular';
  
  }
  @media (min-width: 600px) {
    .page-content {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 800px) {
    .page-content {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 2350px) {
    .page-content {
      font-size: xx-large;
    }
  }
  
  .card {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 1rem;
    top: 2em;
    width: 350px;
    align-self: center;
    text-align: center;
    color: whitesmoke;
    background-color: transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
  }
  
  @media (min-width: 600px) {
    .card {
      height: 350px;
    }
  }
  
  @media (min-width: 2350px) {
    .card {
      font-size: x-large;
      top: 350px;
      left: -25rem;
      height: 650px;
      width: 650px;
    }
    
  }
  .card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 0 0;
    transition: transform calc(var(--d) * 1.5) var(--e);
    pointer-events: none;
  }
  .card:after {
    visibility: 0.5;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 200%; */
    pointer-events: none;
    background-color: #c68119;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
    transform: translateY(-50%);
    transition: transform calc(var(--d) * 2) var(--e);
  }
  .card:nth-child(1):before {
    background-image: url(Client\ \(2\).png);
  }
  .card:nth-child(2):before {
    background-image: url(Client.png);
  }
  .card:nth-child(3):before {
    background-image: url(Client\ \(3\).png);
  }
  .card:nth-child(4):before {
    /* background-image: url(https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ); */
  }
  
  .card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem;
    transition: transform var(--d) var(--e);
    z-index: 1;
  }
  .content > * + * {
    margin-top: 1rem;
  }
  
  .card-title {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.2;
  }
  
  .copy {
    font-family: 'MavenPro-Medium';
  
    font-size: 1.125rem;
    /* font-style: italic; */
    line-height: 1.35;
  }
  
  .btn {
    border-radius: 0.4rem;
    cursor: pointer;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    font-family: 'MavenPro-ExtraBold';
    color: white;
    background-color: #07101dd0;
    border: none;
  }
  .btn:hover {
    background-color: #07101dd0;
  }
  .btn:focus {
    outline: 1px dashed #c68119;
    outline-offset: 3px;
  }
  
@media (hover: hover) and (min-width: 600px) {
  .card:after {
    transform: translateY(0);
  }

  .card-content {
    transform: translateY(calc(100% - 4.5rem));
  }
  .card-content > *:not(.title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }

  .card:hover,
.card:focus-within {
    align-items: center;
  }
  .card:hover:before,
.card:focus-within:before {
    transform: translateY(-4%);
  }
  .card:hover:after,
.card:focus-within:after {
    transform: translateY(-50%);
  }
  .card:hover .card-content,
.card:focus-within .card-content {
    transform: translateY(0);
  }
  .card:hover .card-content > *:not(.title),
.card:focus-within .card-content > *:not(.title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }

  .card:focus-within:before, .card:focus-within:after,
.card:focus-within .card-content,
.card:focus-within .card-content > *:not(.title) {
    transition-duration: 0s;
  }
}
  
  @media (min-width: 2350px) {
    .card {
        font-size: x-large;
        position: absolute;
        top: 40px;
        left: 8rem;
        height: 300px;
        width: 300px;
      }
    .card-title {
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.2;
      top: 10px;
    }
  
    .copy {
      font-family: 'MavenPro-SemiBold';
      font-size: 2.125rem;
      /* font-style: italic; */
      line-height: 1.35;
  }
  
  
  .btn {
    cursor: pointer;
    font-family: 'MavenPro-SemiBold';
    border-radius: 0.4em;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 4.65rem;
    font-weight: bold;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    color: white;
    background-color: #07101dd0;
    border: none;
  }
  }
  
  @media (min-width: 700px) and (max-width:1000px){
    .card-title {
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.2;
      
    }
  
    .card {
      font-size: x-large;
      top: 380px;
      /* left: rem; */
      height: 300px;
      width: 300px;
    }
  
    .copy {
      font-family: 'MavenPro-SemiBold';
      font-size: 2.125rem;
      /* font-style: italic; */
      line-height: 1.35;
  }}

  
   
.circular-menu {
  position: fixed;
  bottom: 1em;
  right: 1em;
}

.circular-menu .floating-btn {
  display: block;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background-color:#001F37;
  box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26);  
  color: hsl(0, 0%, 100%);
  text-align: center;
  line-height: 3.9;
  cursor: pointer;
  outline: 0;
}

.circular-menu.active .floating-btn {
  box-shadow: inset 0 0 3px 001F37;
}

.circular-menu .floating-btn:active {
  box-shadow: 0 4px 8px 0 001F37;
}

.circular-menu .floating-btn i {
  font-size: 1.3em;
  transition: transform .2s;  
}

.circular-menu.active .floating-btn i {
  transform: rotate(-45deg);
}

.circular-menu:after {
  display: block;
  content: ' ';
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  background-color: #c68119a2;
  transition: all .3s ease;
}

.circular-menu.active:after {
  transform: scale3d(5.5, 5.5, 1);
  transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
}

.circular-menu .items-wrapper {
  padding: 0;
  margin: 0;
}

.circular-menu .menu-item {
  position: absolute;
  top: .2em;
  right: .2em;
  z-index: -1;
  display: block;
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  font-size: 1em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  text-align: center;
  line-height: 3;
  background-color: hsla(0,0%,0%,.1);
  transition: transform .3s ease, background .2s ease;
}

.circular-menu .menu-item:hover {
  background-color: hsla(0,0%,0%,.3);
}

.circular-menu.active .menu-item {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circular-menu.active .menu-item:nth-child(1) {
  transform: translate3d(1em,-7em,0);
}

.circular-menu.active .menu-item:nth-child(2) {
  transform: translate3d(-3.5em,-6.3em,0);
}

.circular-menu.active .menu-item:nth-child(3) {
  transform: translate3d(-6.5em,-3.2em,0);
}

.circular-menu.active .menu-item:nth-child(4) {
  transform: translate3d(-7em,1em,0);
}

/**
 * The other theme for this menu
 */

.circular-menu.circular-menu-left {
  right: auto; 
  left: 1em;
}

.circular-menu.circular-menu-left .floating-btn {
  background-color: #c68119fb;
}

.circular-menu.circular-menu-left:after {
  background-color: #001f3778;
}

.circular-menu.circular-menu-left.active .floating-btn i {
  transform: rotate(90deg);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(1) {
  transform: translate3d(-1em,-7em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(2) {
  transform: translate3d(3.5em,-6.3em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(3) {
  transform: translate3d(6.5em,-3.2em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(4) {
  transform: translate3d(7em,1em,0);
}


#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}


.metodo-15 {
  background: #001F37; /*naranja*/
}
.metodo-15 .metodo-icon {
  background: #001F37; /*naranja*/
}


@media (min-width: 2350px) {
  .card-title {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.2;
    
  }

  .copy {
    font-family: 'MavenPro-SemiBold';
    font-size: 2.125rem;
    /* font-style: italic; */
    line-height: 1.35;
}
.card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  top: 2em;
  width: 350px;
  align-self: center;
  text-align: center;
  color: transparent;
  background-color: transparent;
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1); */
  border-radius: 50%;
}
.card {
  font-size: x-large;
  top: 200px;
  left: -25rem;
  height: 650px;
  width: 650px;
}
}

 
.circular-menu {
  position: fixed;
  bottom: 1em;
  right: 1em;
}

.circular-menu .floating-btn {
  display: block;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background-color:#001F37;
  box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26);  
  color: hsl(0, 0%, 100%);
  text-align: center;
  line-height: 3.9;
  cursor: pointer;
  outline: 0;
}

.circular-menu.active .floating-btn {
  box-shadow: inset 0 0 3px 001F37;
}

.circular-menu .floating-btn:active {
  box-shadow: 0 4px 8px 0 001F37;
}

.circular-menu .floating-btn i {
  font-size: 1.3em;
  transition: transform .2s;  
}

.circular-menu.active .floating-btn i {
  transform: rotate(-45deg);
}

.circular-menu:after {
  display: block;
  content: ' ';
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  background-color: #c68119a2;
  transition: all .3s ease;
}

.circular-menu.active:after {
  transform: scale3d(5.5, 5.5, 1);
  transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
}

.circular-menu .items-wrapper {
  padding: 0;
  margin: 0;
}

.circular-menu .menu-item {
  position: absolute;
  top: .2em;
  right: .2em;
  z-index: -1;
  display: block;
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  font-size: 1em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  text-align: center;
  line-height: 3;
  background-color: hsla(0,0%,0%,.1);
  transition: transform .3s ease, background .2s ease;
}

.circular-menu .menu-item:hover {
  background-color: hsla(0,0%,0%,.3);
}

.circular-menu.active .menu-item {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circular-menu.active .menu-item:nth-child(1) {
  transform: translate3d(1em,-7em,0);
}

.circular-menu.active .menu-item:nth-child(2) {
  transform: translate3d(-3.5em,-6.3em,0);
}

.circular-menu.active .menu-item:nth-child(3) {
  transform: translate3d(-6.5em,-3.2em,0);
}

.circular-menu.active .menu-item:nth-child(4) {
  transform: translate3d(-7em,1em,0);
}

/**
 * The other theme for this menu
 */

.circular-menu.circular-menu-left {
  right: auto; 
  left: 1em;
}

.circular-menu.circular-menu-left .floating-btn {
  background-color: #c68119fb;
}

.circular-menu.circular-menu-left:after {
  background-color: #001f3778;
}

.circular-menu.circular-menu-left.active .floating-btn i {
  transform: rotate(90deg);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(1) {
  transform: translate3d(-1em,-7em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(2) {
  transform: translate3d(3.5em,-6.3em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(3) {
  transform: translate3d(6.5em,-3.2em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(4) {
  transform: translate3d(7em,1em,0);
}


#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}


.metodo-15 {
  background: #001F37; /*naranja*/
}
.metodo-15 .metodo-icon {
  background: #001F37; /*naranja*/
}



@media only screen and (max-width: 1368px) { 

.circular-menu {
position: fixed;
bottom: 1em;
right: 1em;
z-index: 91;
}

.circular-menu .floating-btn {
display: block;
width: 7em;
height: 7em;
border-radius: 50%;
background-color:#c68119;
box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26);  
color: hsl(0, 59%, 80%);
text-align: center;
line-height: 3.9;
cursor: pointer;
outline: 0;
}

.circular-menu.active .floating-btn {
box-shadow: inset 0 0 3px 001F37;
}

.circular-menu .floating-btn:active {
box-shadow: 0 4px 8px 0 001F37;
}

.circular-menu .floating-btn i {
font-size: 0em;
transition: transform .2s;  
}

.circular-menu.active .floating-btn i {
transform: rotate(-45deg);
}

.circular-menu:after {
display: block;
content: ' ';
width: 11em;
height: 11em;
border-radius: 50%;
position: absolute;
top: 0;
right: 1em;
z-index: -2;
background-color: #c68119a2;
transition: all .3s ease;
}

.circular-menu.active:after {
transform: scale3d(5.5, 5.5, 1);
transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
}

.circular-menu .items-wrapper {
padding: 0;
margin: 0;
}

.circular-menu .menu-item {
position: absolute;
top: -2em;
right: -2em;
z-index: -1;
display: block;
text-decoration: none;
color: hsl(0, 0%, 100%);
font-size: 2em;
width: 3em;
height: 3em;
border-radius: 50%;
text-align: center;
line-height: 3;
background-color: #c68119;
transition: transform .3s ease, background .2s ease;
}

.circular-menu .menu-item:hover {
background-color: hsla(0,0%,0%,.3);
}

.circular-menu.active .menu-item {
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circular-menu.active .menu-item:nth-child(1) {
transform: translate3d(1em,-7em,0);
}

.circular-menu.active .menu-item:nth-child(2) {
transform: translate3d(-3.5em,-6.3em,0);
}

.circular-menu.active .menu-item:nth-child(3) {
transform: translate3d(-6.5em,-3.2em,0);
}

.circular-menu.active .menu-item:nth-child(4) {
transform: translate3d(-7em,1em,0);
}

/**
* The other theme for this menu
*/

.circular-menu.circular-menu-left {
right: auto; 
left: 1em;
}

.circular-menu.circular-menu-left .floating-btn {
background-color: #c68119fb;
}

.circular-menu.circular-menu-left:after {
background-color: #001f3778;
}

.circular-menu.circular-menu-left.active .floating-btn i {
transform: rotate(90deg);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(1) {
transform: translate3d(-1em,-7em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(2) {
transform: translate3d(3.5em,-6.3em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(3) {
transform: translate3d(6.5em,-3.2em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(4) {
transform: translate3d(7em,1em,0);
}
.metodo-cover {
    padding: 80px 20px 0 20px;
}

.metodo-space {
    height: 0px;
}

.metodo-icon {
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
}
.metodo-cover {
    padding: 80px 0px 0 0px;
}

.metodo {
    width: 100%;
    float: left;
}


.metodo-affinity {
    width: 100%;
    float: left;
    /* background: transparent; */
    padding: 0px;
    margin-top: 1800px;
}


.metodo-space {
    height: 140px;
}

.metodo-icon {
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
}
.circle {
    position: absolute;
    left: 18em;
    top: 20em;
    width: 500px;
    height: 400px;
    margin: 500px auto;
}
.box {
    width: 145px;
    height: 145px; 
    /* font-size: 100px; */
}

.box:hover, .box.open {
    width: 120px;
    height: 120px; 

}

.metodo-content p{
    font-size: 44px;
}
.circle a p {
    font-size: 18px;
    line-height:1em;
    /* margin: -3.5em; */
  }
  
}