/* FIRMAS 2.0 TCOM */

.darcy-ftcom, .darcy-ftcom-1, .darcy-ftcom-2 {width: 200px; height: 190px; margin: 0 auto; transition: all 1s;} .darcy-ftcom {border: 1px solid #000; outline: 8px solid #4D8060; margin-top: 8px; margin-bottom: 8px; position: relative;} .darcy-ftcom-1, .darcy-ftcom-2 {display: flex; justify-content: center; align-items: flex-end; box-sizing: border-box; padding: 10px;} .darcy-ftcom-1 {background-image: url(https://i.ibb.co/XsJ6W5R/darcella-firma-1.png);} .darcy-ftcom-2 {background-image: url(https://i.ibb.co/2cFGjqJ/darcella-firma-2.png); position: absolute; top: 0; left: 0; opacity: 0;} .darcy-ftcom-1>span, .darcy-ftcom-2>span {color: #fff; background: #000000cc; padding: 10px; font: 700 9px/11px 'Arial'; text-transform: uppercase; letter-spacing: 1px; text-align: center; text-shadow: 1px 0 0 #00000094;} .darcy-ftcom-1>span i, .darcy-ftcom-2>span i {color: #6cb186;} .darcy-ftcom:hover .darcy-ftcom-2 {opacity: 1; transition: all 1s; transition-delay: 0.3s;}

.phina-TCOM {margin: 0 auto; border: 5px solid #D6BF40; background: #000; width: 300px; height: 200px; display: flex; align-items: center; padding-left: 20px; box-sizing: border-box; cursor: crosshair; position: relative;} .phina-TCOM:before {content: ''; position: absolute; width: 100%; height: 100%; background-image: url(https://i.imgfly.me/sTFbco.gif); top: 0; left: 0; filter: grayscale(0); transition: all 1s; transition-delay: 1s;} .phina-TCOM:after {content: ''; position: absolute; width: 100%; height: 100%; background: #000000a1; top: 0; left: 0; opacity: 0; transition: all 1s; transition-delay: 1s;} .phina-TCOM>em {display: block; position: absolute; width: 80px; height: 80px; background-image: url(https://i.imgfly.me/sTFpF4.md.png); z-index: 3; background-size: cover; transform: scale(0); transition: all 1s; transition-delay: 0.8s;} .phina-TCOM>em:before {content: 'Hufflepuff pride !'; position: absolute; background: linear-gradient(90deg,#eee19b,#d59a03); color: #000; text-transform: uppercase; width: 150px; height: 21px; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; bottom: -35px; left: -15px; opacity: 0; transition: all 1s; transition-delay: 0s;} .phina-TCOM .phi-box {width: 100px; background: #000000ad; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 11px; line-height: 14px; text-transform: uppercase; padding: 10px; box-sizing: border-box; border: 1px solid #D6BF40; opacity: 1; transform:scale(1); transition: all 1s; transition-delay: 1.5s;} .phina-TCOM .phi-box span {position: relative; left: 0; background: linear-gradient(180deg,#eee19b,#d59a03); -webkit-box-decoration-break: clone; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; transition: all 1s; transition-delay: 1.8s;} .phina-TCOM .phi-box i {position: relative; top: 0; display: block; font-size: 25px; margin: 15px; background: linear-gradient(180deg,#eee19b,#d59a03); -webkit-box-decoration-break: clone; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; transition: all 1s; transition-delay: 1.8s;} .phina-TCOM:hover .phi-box {opacity: 0; transform:scale(0.6); transition: all 1s; transition-delay: 1.8s;} .phina-TCOM:hover .phi-box i {top: -10px; opacity: 0; transition: all 1s; transition-delay: 1s;} .phina-TCOM:hover .phi-box span {left: -10px; opacity: 0; transition: all 1s; transition-delay: 0s;} .phina-TCOM:hover:before {filter: grayscale(1); transition: all 1s; transition-delay: 2s;} .phina-TCOM:hover:after {opacity: 1; transition: all 1s; transition-delay: 2s;} .phina-TCOM:hover em {transform: scale(1); opacity: 1; transition: all 1s; transition-delay: 2.5s;} .phina-TCOM:hover em:before {opacity: 1; left: 0; transition: all 1s; transition-delay: 3.5s;}

.pburke {width: 300px; height: 160px; margin: 0 auto; background: #000; outline: 1px solid var(--burkecolor); padding: 5px; position: relative; margin-top: 8px; overflow: hidden;} .pburke .pburkemg {width: 100%; height: 100%; background-image: url(https://i.postimg.cc/x8F7GVCV/jinx2.gif); transition: all 1s; transition-delay: 2.2s;} .pburke .burke-scond {position: absolute; top: 0; left: -300px; width: 100%; height: 100%; background: rgba(0, 0, 0, .9); padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-evenly; opacity: 0; transition: all 1s; transition-delay: 1.3s;} .pburke .burke-scond>i {font-size: 50px; position: relative; color: var(--burkecolor); top: -40px; opacity: 0; transition: all 1s; transition-delay: 0.6s;} .pburke .burke-scond>span {text-transform: uppercase; font-size: 10px; line-height: 15px; letter-spacing: .2px; color: #fff; text-align: justify; text-align-last: left; width: 150px; position: relative; top: 40px; opacity: 0; transition: all 1s; transition-delay: 0.5s;} .pburke .burke-scond>span>strong {color: var(--burkecolor);} .pburke:hover .pburkemg {filter: grayscale(1); transition: all 1s; transition-delay: 0s;} .pburke:hover .burke-scond {opacity: 1; left: 0; transition: all 1s; transition-delay: 0.8s;} .pburke:hover .burke-scond>i {top: 0; opacity: 1; transition: all 1s; transition-delay: 1.5s;} .pburke:hover .burke-scond>span {top: 0; opacity: 1; transition: all 1s; transition-delay: 1.6s;}

@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap'); .casiopeia-tcom {width: 450px; height: 190px; background: #000; border: 1px solid #8a76ab; position: relative; margin: 0 auto; padding: 8px; margin-top: 7px; margin-bottom: 5px;} .casiopeia-tcom .casiemag {width: 100%; height: 100%; background-image: url(https://i.postimg.cc/W4RBfV72/cassie-b.gif); filter: grayscale(0); transition: all 1s; transition-delay: 1.8s;} .casiopeia-tcom .cass-tc {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000000a8; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; transform: scale(0); opacity: 0; transition: all 1s; transition-delay: 1s;} .casiopeia-tcom .cass-tc>span {width: 100%; text-align: center; font: 400 50px "Pirata One", system-ui; background: linear-gradient(228deg,#8A76AB,#351146); -webkit-box-decoration-break: clone; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; left: -40px; opacity: 0; transition: all 1s; transition-delay: 0.5s;} .casiopeia-tcom .cass-tc>em {font-size: 10px; line-height: 14px; text-transform: uppercase; font-style: normal; color: #fff; width: 290px; text-align: justify; position: relative; left: 40px; opacity: 0; transition: all 1s; transition-delay: 0s;} .casiopeia-tcom .cass-tc>em>strong {color: #8A76AB;} .casiopeia-tcom:hover .casiemag {filter: grayscale(1); transition: all 1s; transition-delay: 0s;} .casiopeia-tcom:hover .cass-tc {transform:scale(1); opacity: 1; transition: all 1s; transition-delay: 0.8s;} .casiopeia-tcom:hover .cass-tc>span {left: 0; opacity: 1; transition: all 1s; transition-delay: 1.5s;} .casiopeia-tcom:hover .cass-tc>em {left: 0; opacity: 1; transition-delay: 1.8s;}

.emeval-tcom {width:360px; height:200px; margin:0 auto; background:#000; padding:10px; border:1px solid #4b4b4b; margin-top:8px; margin-bottom:5px; position:relative; overflow:hidden;} .emeval-tcom .emeval-1 {width:100%; height:100%; background-image:url(https://i.postimg.cc/K8gXNjBq/emeric-2.gif); filter:grayscale(0); transition:all 1s; transition-delay: 0.8s;} .emeval-tcom .emeval-2 {width:100%; height:100%; background:#000000a6; box-sizing:border-box; padding:20px; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:space-evenly; opacity:0; visibility:hidden; transition: all 1s; transition-delay: 0s;} .emeval-tcom .emeval-2>span {width:40%; height: 99px; color:#fff; font:400 9px/13px var(--fuente1); text-transform:uppercase; text-align:justify; text-align-last:left; border:1px solid #4b4b4b; padding:10px; background:#000000bf;} .emeval-tcom .emeval-2>em {width:80px; height:80px; background-image:url(https://i.postimg.cc/RCj209jw/ministr.gif); background-size:cover; outline: 1px solid #4b4b4b; padding: 20px;} .emeval-tcom .emeval-2>span>strong {color:#3ba2db;} .emeval-tcom .emeval-2>span>i {color:#b96092; font-weight:bold;} .emeval-tcom:hover .emeval-1 {filter:grayscale(1); transition: all 1s; transition-delay: 0s;} .emeval-tcom:hover .emeval-2 {opacity:1; visibility:visible; transition: all 1s; transition-delay: 0.8s;}

.badoock-tcom {width: 350px; height: 200px; margin: 0 auto; background-image: url(https://i.postimg.cc/Y0x7qTdK/ebba-2.png); border: 8px solid #000; outline: 1px solid #8A76AB; margin-top: 8px; margin-bottom: 5px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; box-sizing: border-box;} .badoock-tcom>span {background: #000000ba; display: block; width: 92px; font: 400 9px/11px var(--fuente1); padding: 10px; color: #fff; text-align: justify; border: 1px solid #000; text-transform: uppercase;} .badoock-tcom>span>i {display: block; text-align: center; font-size: 15px; margin-bottom: 10px;} .badoock-tcom>span i, .badoock-tcom>span>strong {color: #9a7fc5;}

.greyback-tcom {width: 400px; height: 180px; margin: 0 auto; margin-top: 8px; margin-bottom: 5px; background-image: url(https://i.postimg.cc/zvpZjRbH/hunter-2.gif); border: 6px solid #000; outline: 1px solid #5269b5;} .greyback-tcom .greyinitial {font: 700 100px 'times new roman'; color: #fff; text-shadow: 3px 0 #5269b5; position: relative; top: 20px; left: 30px; opacity: 1; transition: all 1s;} .greyback-tcom .greyinitial>span {font: 400 10px var(--fuente1); position: absolute; background: #5269b5; padding: 5px 10px; top: 100px; left: -15px; width: 90px; text-align: center; text-transform: uppercase; letter-spacing: 3px; text-shadow: none;} .greyback-tcom:hover .greyinitial {left: 15px; opacity: 0; transition: all 1s;}

.martinz-tcom {width: 250px; height: 200px; margin: 0 auto; margin-top: 8px; margin-bottom: 5px; background-image: url(https://i.postimg.cc/MGBCLLfS/martin-b.png); border: 1px solid #24917a; outline: 1px solid #5269b5; outline-offset: 5px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px; box-sizing: border-box;} .martinz-tcom>span {display: block; width: 200px; font: 700 10px/10px var(--fuente1); color: #fff; text-transform: uppercase; text-align: justify; position: relative; border-left: 2px solid #fff; padding-left: 5px; text-shadow: 1px 0 #00000080;}

@charset "UTF-8"; @font-face {font-family: "Malibu Icon Font";src:url("//dl.dropbox.com/s/al7xt1fn1kcnvui/malibuniv.eot");src:url("//dl.dropbox.com/s/al7xt1fn1kcnvui/malibuniv.eot?#iefix") format("embedded-opentype"),url("//dl.dropbox.com/s/c8zz04e0u6tpc6i/malibuniv.woff") format("woff"),url("//dl.dropbox.com/s/qjwjrcqjptljvym/malibuniv.ttf") format("truetype"),url("//dl.dropbox.com/s/2z9w3pxgx4hguss/malibuniv.svg#malibuniv") format("svg");font-weight: normal;font-style: normal;} [data-icon]:before {font-family: "Malibu Icon Font" !important;content: attr(data-icon);font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} [class^="mau-"]:before,[class*=" mau-"]:before {font-family: "Malibu Icon Font" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} [class^="mau-"],[class*=" mau-"]{display:inline-grid;} .mau-admin-o:before {content: "\e918";} .mau-admin:before {content: "\e919";} .eva-tcom {width: 334px; height: 200px; margin: 8px auto 5px; border: 4px solid #000; outline: 1px solid #d6a740; display: flex; flex-wrap: wrap; justify-content: space-between;} .eva-tcom .eva-t1 {width: 190px; height: 200px; background-image: url(https://i.postimg.cc/MTh9DRzm/eva-2.png);} .eva-tcom .eva-t2 {width: 140px; height: 200px; background: #d6a740; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 10px; box-sizing: border-box; text-align: justify;} .eva-tcom .eva-t2>i {font-size: 40px;} .eva-tcom .eva-t2>h {font: italic 700 18px georgia; text-align: center; text-shadow: 1px 0 #00000078;} .eva-tcom .eva-t2>span {font-size: 10px; text-transform: uppercase; border-top: 2px solid; padding-top: 10px; line-height: 12px;}

#masonbywal br {
  display: none;
}

#masonbywal {
  --personalm: linear-gradient(90deg, var(--masse1), var(--masse2));
  width: 305px;
  height: 195px;
  margin: 8px auto 5px;
  background: var(--personalm);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: crosshair;
}

#masonbywal .masongr-f1 {
  width: 290px;
  height: 180px;
  background: var(--masseblck);
  border: 1px solid var(--masseblck);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#masonbywal .masongr-f1::before {
  content: ' ';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: var(--masonfimg);
  background-size: cover;
  top: 0;
  left: 0;
  filter: grayscale(1);
  opacity: .6;
}

#masonbywal .masenome {
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  text-align: center;
  font: 400 40px 'Amarante';
  text-transform: uppercase;
  background: var(--personalm);
  -webkit-box-decoration-break: clone;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.masenome.msup {
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 2s;
}

.masenome.msdown {
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 2s;
}

.mase-inter {
  position: absolute;
  color: #fff;
  font: italic 400 9px 'Onest';
  text-transform: uppercase;
  letter-spacing: 10px;
  top: 126.5px;
  text-align: center;
  left: 23px;
  opacity: 1;
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 2.5s;
}

#masonbywal .masongr-f2 {
  width: 290px;
  height: 180px;
  position: absolute;
  display: flex;
  overflow: hidden;
}

.masons-job {
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, var(--masseblck), var(--masse1));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  top: -190px;
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 1.8s;
}

.masons-job > span, 
.masons-job > b {
  color: #fff;
  font: 500 9px 'Onest';
  text-transform: uppercase;
  text-align: center;
}

.masons-job > span {
  position: relative;
  top: 10px;
  left: -5px;
  opacity: 0;
  transition: opacity 1s ease 1.2s, left 1s ease 1.2s;
}

.masons-job > b {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2px;
  position: relative;
  text-align: right;
  bottom: 5px;
  width: 100px;
  background: linear-gradient(90deg, var(--masse1), var(--masseblck));
  padding: 2px 5px;
  right: -10px;
  opacity: 0;
  transition: opacity 1s ease 0.8s, right 1s ease 0.8s;
}

.masons-job > b::before {
  content: 'Cargo';
  position: absolute;
  font-weight: 500;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  left: 5px;
  text-align: left;
}

.masons-job > .logodacm {
  width: 100px;
  height: 100px;
  background-image: url(https://i.imgur.com/Cz24Z8I.png);
  background-size: cover;
  transform: rotate(-360deg);
  opacity: 0;
  transition: transform 1s ease 1s, opacity 1s ease 1s;
}

.masons-deux {
  width: 55%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  bottom: -190px;
  transition: bottom 1s ease 1.5s, opacity 1s ease 1.5s;
}

.masons-deux::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: var(--masonfimg2);
  background-size: cover;
  filter: grayscale(100%) brightness(40%);
  -webkit-filter: grayscale(100%) brightness(40%);
  -moz-filter: grayscale(100%) brightness(40%);
}

.masons-deux > span {
  position: relative;
  font: 700 8px/10px 'Onest';
  text-transform: uppercase;
  text-align: justify;
  color: #fff;
  text-shadow: 1px 0 0 #0009;
  width: 130px;
  margin-bottom: 10px;
  border-left: 2px solid var(--masse2);
  padding-left: 5px;
  letter-spacing: 1px;
  bottom: -10px;
  opacity: 0;
  transition: bottom 1s ease, opacity 1s ease;
}

/* Hover states */
#masonbywal:hover .mase-inter {
  left: 18px;
  opacity: 0;
  transition: all 1s ease 0s;
}

#masonbywal:hover .masenome.msup,
#masonbywal:hover .masenome.msdown {
  clip-path: none;
  transition: clip-path 1s ease 0.8s;
}

#masonbywal:hover .masenome.msup,
#masonbywal:hover .masenome.msdown {
  top: 90px;
  opacity: 0;
  transition: top 1s ease 1.2s, opacity 1s ease 1.2s;
}

#masonbywal:hover .masons-job {
  top: 0;
  opacity: 1;
  transition: all 1s ease 1.4s;
}

#masonbywal:hover .masons-deux {
  bottom: 0;
  opacity: 1;
  transition: bottom 1s ease 1.5s, opacity 1s ease 1.5s;
}

#masonbywal:hover .masons-job > span {
  left: 0;
  opacity: 1;
  transition: left 1s ease 2s, opacity 1s ease 2s;
}

#masonbywal:hover .masons-job .logodacm {
  transform: rotate(0deg);
  opacity: 1;
  transition: transform 1s ease 2.5s, opacity 1s ease 2.5s;
}

#masonbywal:hover .masons-job > b {
  right: 0;
  opacity: 1;
  transition: right 1s ease 2.8s, opacity 1s ease 2.8s;
}

#masonbywal:hover .masons-deux > span {
  bottom: 0;
  opacity: 1;
  transition: bottom 1s ease 3s, opacity 1s ease 3s;
}