@import url("https://fonts.googleapis.com/css?family=Indie+Flower");
.divA { position: relative; margin: 5em 0 5em 0; display: flex; justify-content: center; height: 600px; }
.divA > .divB { position: relative; height: 600px; width: 1024px; background-position: center; background-size: 100% 100%; background-color: whitesmoke; transition: 0.5s ease-out; }
.divA > .divB:hover { background-size: 105% 105%; transition: 0.3s ease-out; }
.divA > .divB > h1 { position: absolute; background-color: #eaeaeaa6; padding: 0.3em; bottom: 1em; font-family: 'Santral-UltraItalic'; font-size: 3em; color: #313131; }
.divA > .divB > h1 > .lineEffect { width: 0; height: 5px; background-color: #f73232; transition: 0.5s ease-out; }
.divA > .divB > h1 > .lineEffect.active { width: 100%; transition: 0.3s ease-out; }
.divA > .divB > .divC { position: absolute; background-color: rgba(0, 0, 0, 0.8); color: #ffffff; width: 300px; height: 600px; right: 0px; display: flex; flex-direction: column; }
.divA > .divB > .divC > .divC1 { flex: 4; background-size: 80% 100%; background-position: center; background-repeat: no-repeat; }
.divA > .divB > .divC > .divC2 { flex: 1; display: flex; justify-content: space-evenly; align-items: center; }
.divA > .divB > .divC > .divC2 > div { width: 20px; height: 20px; border-radius: 50%; }
.divA > .divB > .divC > .divC3 { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px dashed #464646; border-top: 1px dashed #464646; }
.divA > .divB > .divC > .divC3 > div { position: absolute; width: 100%; height: 100%; opacity: 0; font-size: 1.25em; letter-spacing: -1px; font-weight: normal; transition: 1s; display: flex; justify-content: center; align-items: center; }
.divA > .divB > .divC > .divC3 > div .especIcon { margin-top: 2px; width: 30px; height: 30px; padding: 0.1em; }
.divA > .divB > .divC > .divC3 > div .especValue { font-family: "Santral-UltraItalic"; letter-spacing: -1.25px; font-size: 1.7em; }
.divA > .divB > .divC > .divC3 > div .especUnit { font-family: "Santral-UltraItalic"; letter-spacing: -1.25px; font-size: 1em; }
.divA > .divB > .divC > .divC3 > .active { opacity: 1; transition: 0.5s; }
.divA > .divB > .divC > .divC4 { flex: 3; display: flex; align-items: center; overflow: hidden; }
.divA > .divB > .divC > .divC4 > div { position: absolute; opacity: 0; margin: 0 1.8em; font-size: 1.25em; font-family: Santral-Light; letter-spacing: -1px; font-weight: normal; line-height: 1.2em; transition: 1s; }
.divA > .divB > .divC > .divC4 > .active { opacity: 1; transition: 2s; }
.divA > .divB > .divC > .divC5 { flex: 2; display: flex; justify-content: space-evenly; align-items: center; }
.divA > .divB > .divC > .divC5 > button { font-family: 'Indie Flower'; padding: 0.5em 2em; background: #f73232; color: white; font-size: 1.5em; transition: 0.5s; }
.divA > .divB > .divC > .divC5 > button:hover { opacity: 0.7; transition: 0.3s; }

@keyframes bottomToTop { 0% { margin: 10em 0; opacity: 0; }
  100% { opacity: 1; margin: 4em auto; } }
@keyframes expandProduct { 30% { margin-top: 0; top: 0; margin-left: 0; height: 200px; }
  40% { margin-top: 0; top: 0; height: 100%; margin-left: 0; width: 200px; }
  100% { margin: 0; top: 0; height: 100%; width: 100%; } }
@keyframes compressProduct { 0% { margin: 0; top: 0; height: 100%; margin-left: 0; width: 100%; }
  5% { margin: 0; top: 0; height: 100%; margin-left: 0; width: 95%; }
  85% { margin: 0; top: 0; height: 100%; margin-left: 0; width: 90%; }
  100% { margin: 0; top: 0; height: 100%; margin-left: 0; width: 0; } }
@keyframes rebound { 30% { transform: scale(0.9, 1.1) translateY(-100px); }
  50% { transform: scale(1.05, 0.95) translateY(0); }
  57% { transform: scale(1, 1) translateY(-7px); }
  64% { transform: scale(1, 1) translateY(0); }
  100% { transform: scale(1, 1) translateY(0); opacity: 1; } }
.panelProduct { overflow-y: auto; position: fixed; top: 0; z-index: 9999; background-color: #f7f7f7; transition: 0.5s; }
.panelProduct .wraper { transition: 0.5s; }
.panelProduct .wraper.hover { opacity: 0.1; transform: scale(0.9); transition: 0.3s; }
.panelProduct.hover { transition: 0.3s; background-color: #ccc; }
.panelProduct h1 { font-family: "Santral-UltraItalic"; letter-spacing: -1.25px; font-size: 7em; padding: 0; margin: 0.5em 0 0 -100vh; opacity: 0; transition: 0.5s ease-out; }
.panelProduct h1.open { opacity: 1; margin: 1em 0 0 100px; transition: 0.5s ease-in; }
.panelProduct h3 { font-family: "Santral-UltraItalic"; letter-spacing: -1.25px; font-size: 3em; color: #0063be; padding: 0; margin: -0.85em 0 0 -100vh; opacity: 0; transition: 0.5s ease-out; }
.panelProduct h3.open { opacity: 1; margin: -0.85em 0 0 100px !important; transition: 0.7s ease-in; }
.panelProduct .btClose { position: absolute; top: 9em; right: 8em; background-image: url(../images/back.svg); background-repeat: no-repeat; background-position: center; background-size: 45px 45px; border-radius: 50%; width: 45px; height: 45px; background-color: transparent; transition: 0.3s; transition: transform 0.05s; z-index: 1; }
.panelProduct .btClose.hover { transform: scale(1.5); background-size: 25px 25px; background-color: #0063be; /* Color invertido */ border-radius: 50%; transition: width 0.3s height 0.3s; transition: transform 0.1s; }
.panelProduct .backText { display: flex; position: fixed; width: 100vw; height: 100vh; top: 0; flex-direction: column; align-items: center; justify-content: center; margin-left: 100vw; font-size: 200px; color: #757575; font-family: "Santral-UltraItalic"; letter-spacing: -1.25px; line-height: 0; -webkit-filter: blur(50px); opacity: 0; transition: 0.5s; }
.panelProduct .backText > h4 { font-size: 5vw; margin-bottom: -6vw; }
.panelProduct .backText > h2 { font-size: 20vw; color: #0063be; }
.panelProduct .backText.hover { opacity: 1; margin-left: 0px; -webkit-filter: blur(0px); transition: 0.2s; }
.panelProduct .content { display: flex; flex-wrap: wrap; justify-content: center; margin: 4em auto; font-family: "Santral-Medium"; font-size: 0.8em; }
.panelProduct .content > .box { display: flex; flex-direction: column; justify-content: center; font-family: "Santral-SemiBoldItalic"; font-size: 1.5em; background: #f1f1f1; padding: 2em; margin: 0.2em; max-width: 200px; opacity: 0; transition: 0.5s; }
.panelProduct .content > .box.open { opacity: 1; transition: 0.5s ease-out; }
.panelProduct .content > .box:hover { background: #e6e6e6; transition: color 0s; }
.panelProduct .content > .box > .imgModel > img { width: 100%; height: 100%; }
.panelProduct .content > .box > .nameModel { text-align: center; opacity: 0; }
.panelProduct .content > .box > .nameModel.open { opacity: 1; transition: 0.5s ease-in; }
.panelProduct .content > .imgModel { min-width: 450px; max-width: 450px; min-height: 450px; max-height: 450px; background-color: #f1f1f1; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: url(../images/zoom.png), auto; }
.panelProduct .content > .imgModel > img { max-width: 350px; max-height: 350px; }
.panelProduct .content > .imgModel > img.open { -webkit-animation: rebound 1s ease-out; animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1); }
.panelProduct .content > .details { margin-left: 75px; min-width: 450px; max-width: 550px; }
.panelProduct .content > .details > h4 { color: #0063be; }
.panelProduct .content > .details > h4 > span { color: #000000; }
.panelProduct .content > .details > .selModels { display: flex; width: 100%; flex-wrap: wrap; }
.panelProduct .content > .details > .selModels > button { font-family: 'Santral-SemiBoldItalic'; font-size: 1em; background-color: transparent; padding: 1em 2em 1em 2em; margin: 0 1em 1em 0; font-weight: bold; color: #2b2b2b; border: 1px solid #ccc; }
.panelProduct .content > .details > .selModels > button.active { border: 2px solid #000000; }
.panelProduct .content > .details > .selColorsA, .panelProduct .content > .details .selColorsB { flex: 1; display: flex; align-items: center; }
.panelProduct .content > .details > .selColorsA > div, .panelProduct .content > .details .selColorsB > div { width: 20px; height: 20px; border: 1px solid #9a9a9a; margin-right: 1.5em; border-radius: 50%; transition: transform 0.5s; }
.panelProduct .content > .details > .selColorsA > div:hover, .panelProduct .content > .details > .selColorsA > div.open, .panelProduct .content > .details .selColorsB > div:hover, .panelProduct .content > .details .selColorsB > div.open { transform: scale(1.3); transition: transform 0.2s; }
.panelProduct .content > .details > .selColorsA > div.open, .panelProduct .content > .details .selColorsB > div.open { transform: scale(1.3); border: 2px solid; }
.panelProduct .content > .details > .especs { flex: 1; display: flex; flex-direction: column; font-weight: bold; }
.panelProduct .content > .details > .especs > .tr { display: flex; line-height: 2em; border-bottom: 1px solid #ededed; }
.panelProduct .content > .details > .especs > .tr > .especDesc { flex-basis: 50%; }
.panelProduct .content > .details > .especs > .tr > .especValueUnit { display: flex; justify-content: flex-end; flex-basis: 50%; text-align: right; }
.panelProduct .content.open { opacity: 0; -webkit-animation: bottomToTop .5s ease-out; animation-delay: 1.2s; animation-fill-mode: forwards; }
.panelProduct.open { -webkit-animation: expandProduct 0.8s ease-out; animation-fill-mode: forwards; }
.panelProduct.close { -webkit-animation: compressProduct 0.5s ease-out; animation-fill-mode: forwards; }

/*# sourceMappingURL=products.css.map */