@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");
:root {
  --color-white-100: hsl(206, 5%, 100%);
  --color-white-200: hsl(206, 5%, 90%);
  --color-white-300: hsl(206, 5%, 80%);
  --color-white-400: hsl(206, 5%, 65%);
  --color-white-500: hsl(206, 5%, 50%);
  --color-black-100: hsl(213, 20%, 10%);
  --color-black-200: hsl(213, 23%, 8%);
  --color-black-300: hsl(214, 21%, 6%);
  --color-black-400: hsl(210, 21%, 6%);
  --color-black-500: hsl(216, 22%, 4%);
  --color-black-600: hsl(220, 18%, 3%);
  --color-black-700: hsl(220, 27%, 2%);
  --color-black-800: hsl(180, 20%, 1%);
  --color-blue-100: hsl(214, 95%, 93%);
  --color-blue-200: hsl(213, 97%, 87%);
  --color-blue-300: hsl(212, 96%, 78%);
  --color-blue-400: hsl(213, 94%, 68%);
  --color-blue-500: hsl(217, 91%, 60%);
  --color-blue-600: hsl(221, 83%, 53%);
  --color-blue-700: hsl(224, 76%, 48%);
  --color-blue-800: hsl(226, 71%, 40%);
  --color-blue-900: hsl(224, 64%, 33%);
  --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
     0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@font-face {
  font-family: 'CocoSharp Trial'; /* Replace 'YourFontName' with the name you want to use for the font */
  src: url('../fonts/cocosharp/Coco-Sharp-Extrabold-trial.ttf') format('truetype');  /* Path to WOFF2 (recommended) */
      
  font-weight: 100; /* Optional: specify font weight if different */
  font-style: normal;  /* Optional: specify font style if different */
}

@font-face {
  font-family: 'Crimson-Foam-Font'; /* Replace 'YourFontName' with the name you want to use for the font */
  src: url('../fonts/crimson_foam/Crimson-Foam-Font.ttf') format('truetype'), url('../fonts/crimson_foam/Crimson-Foam-Font.woff') format('woff');  /* Path to WOFF2 (recommended) */
      
  font-weight: normal; /* Optional: specify font weight if different */
  font-style: normal;  /* Optional: specify font style if different */
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 100%;
  box-sizing: inherit;
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

body {
  font-family: "CocoSharp Trial", sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  height: -webkit-fill-available;

}

main {
  overflow: hidden;
}

.img-logo {
  height: 50px;
}
a,
button {
  cursor: pointer;
  border: none;
  outline: none;
  user-select: none;
  background: none;
  box-shadow: none;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.section {
  margin: 0 auto;
  padding: 6rem 0 1rem;
}

.container {
  max-width: 90rem;
  height: auto;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.centered {
  text-align: center;
  vertical-align: middle;
  margin-bottom: 1rem;
}

.heading-xl {
  font-family: 'CocoSharp Trial';
  font-size: clamp(2.648rem, 6vw, 4.241rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
}
.heading-lg {
  font-family: 'CocoSharp Trial';
  font-size: clamp(2.179rem, 5vw, 3.176rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
}
.heading-md {
  font-family: 'CocoSharp Trial';
  font-size: clamp(1.794rem, 4vw, 2.379rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1px;
}
.heading-sm {
  font-family: 'CocoSharp Trial';
  font-size: clamp(1.476rem, 3vw, 1.782rem);
  font-weight: 600;
  line-height: 1.5;
}
.heading-xs {
  font-family: 'CocoSharp Trial';
  font-size: clamp(1.215rem, 2vw, 1.335rem);
  font-weight: 500;
  line-height: 1.5;
}

.paragraph {
  font-family: 'CocoSharp Trial';
  font-size: clamp(1rem, 2vw, 1.125rem);
  text-wrap: balance;
  color: var(--color-white-200);
}

.btn {
  display: inline-block;
  font-family: 'CocoSharp Trial';
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  outline: none;
  border: none;
  border-radius: 0.25rem;
  text-transform: unset;
  transition: all 0.3s ease-in-out;
}
.btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
}
.btn-darken {
  padding: 0.75rem 2rem;
  color: var(--color-white-100);
  background-color: var(--color-black-200);
  box-shadow: var(--shadow-medium);
}
.btn-neutral {
  padding: 0.75rem 2rem;
  color: var(--color-black-500);
  background-color: var(--color-white-100);
  box-shadow: var(--shadow-medium);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: auto;
  margin: 0 auto;
  transition: all 0.35s ease;
  background-color: rgba(245, 255, 255, 0.8);
}
.header.on-scroll {
  background: var(--color-black-300);
  box-shadow: var(--shadow-medium);
}

.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  column-gap: 1.25rem;
  width: 100%;
  height: 4.25rem;
  margin: 5px auto;

}

.brand {
  font-family: 'CocoSharp Trial';
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -1px;
  color: var(--color-white-100);
  text-transform: uppercase;
}

.menu {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: auto;
  padding: 4rem 0 3rem;
  overflow: hidden;
  background-color: var(--color-black-300);
  box-shadow: var(--shadow-medium);
  transition: all 0.4s ease-in-out;
  width: 80%;
}
.menu.is-active {
  top: 0;
  width: 100%;
  height: auto;
}
.menu-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  row-gap: 1.25rem;
}
.menu-link {
  font-family: 'CocoSharp Trial';
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black-100);
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.menu-block {
  display: inline-block;
  font-family: 'CocoSharp Trial';
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  user-select: none;
  white-space: nowrap;
  text-align: center;
  margin-left: auto;
  padding: 0.65rem 1.5rem;
  border-radius: 3rem;
  text-transform: capitalize;
  color: var(--color-white);
  background-color: var(--color-blue-600);
  box-shadow: var(--shadow-medium);
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 48rem) {
  .menu {
    position: relative;
    top: 0;
    width: 80%;
    height: auto;
    padding: 0rem;
    margin-left: auto;
    background: none;
    box-shadow: none;
  }
  .menu-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0 auto;
  }
  .menu-link {
    text-transform: capitalize;
  }
  .menu-block {
    margin-left: 2rem;
  }
}

.burger {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
  order: -1;
  z-index: 10;
  width: 1.6rem;
  height: 1.15rem;
  border: none;
  outline: none;
  background: none;
  visibility: visible;
  transform: rotate(0deg);
  transition: 0.35s ease;
}
@media only screen and (min-width: 48rem) {
  .burger {
    display: none;
    visibility: hidden;
  }
}
.burger-line {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  border: none;
  outline: none;
  opacity: 1;
  border-radius: 1rem;
  transform: rotate(0deg);
  background-color: var(--color-white-100);
  transition: 0.25s ease-in-out;
}
.burger-line:nth-child(1) {
  top: 0px;
}
.burger-line:nth-child(2) {
  top: 0.5rem;
  width: 70%;
}
.burger-line:nth-child(3) {
  top: 1rem;
}
.burger.is-active .burger-line:nth-child(1) {
  top: 0.5rem;
  transform: rotate(135deg);
}
.burger.is-active .burger-line:nth-child(2) {
  opacity: 0;
  visibility: hidden;
}
.burger.is-active .burger-line:nth-child(3) {
  top: 0.5rem;
  transform: rotate(-135deg);
}





@media only screen and (min-width: 48rem) {
  .banner-column {

    justify-content: center;
  }
}
@media only screen and (min-width: 64rem) {
  .banner-column {
    margin-top: 4rem;
  }
}
.banner-image {
  display: block;
  max-width: 18rem;
  height: auto;
  margin-top: 2rem;
  object-fit: cover;
  justify-self: center;
}
@media only screen and (min-width: 48rem) {
  .banner-image {
    order: 1;
    max-width: 20rem;
    height: auto;
  }
}
@media only screen and (min-width: 64rem) {
  .banner-image {
    max-width: 25rem;
    height: auto;
    margin-right: 5rem;
  }
}
.banner-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1.75rem;
}
.banner-links {
  position: absolute;
  top: 30%;
  right: 1.5rem;
  display: grid;
  justify-items: center;
  row-gap: 0.5rem;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 64rem) {
  .banner-links {
    opacity: 1;
    visibility: visible;
  }
}
.banner-links > * {
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--color-white-100);
}
.banner-links::before {
  position: absolute;
  content: "";
  top: -3rem;
  width: 4rem;
  height: 1.5px;
  transform: rotate(90deg);
  background: var(--color-white-100);
}
.banner-links::after {
  position: absolute;
  content: "";
  bottom: -3rem;
  width: 4rem;
  height: 2px;
  transform: rotate(90deg);
  background: var(--color-white-100);
}


/*iamge gallery*/



/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container-img {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}




.banner-section {
  background-image: url(../img/banner-img.png);
  height: 1000px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

.banner-inner h1{ margin: auto;color: #fff;     text-shadow: 1px 1px 2px black;}

/*******categorias*******/
.cat-infinity{display: flex; padding: 0px 0px;  flex-direction: column;}
.cat-infinity h2{margin:40px auto; color: #EB5E28;    font-size: 2.5rem;}
.cat-infinity-imgs{display: flex; flex-direction: row;flex-wrap: wrap; justify-content: space-around; margin-top: 40px;}
.cat-infinity-prod h3{margin-top: 20px; text-align: center;}
.cat-infinity-prod{   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3); transition: 0.3s ease-in-out;}
.cat-infinity-prod:hover{ box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);  transition: 0.3s ease-in-out;}
.tend-img-body a p{text-transform: uppercase; }

.tend-img-body {  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3); transition: 0.3s ease-in-out;}
.tend-img-body:hover{ box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);  transition: 0.3s ease-in-out;}
/******** muebles *********/


.trinity-mueble {display: flex; flex-wrap: wrap; margin: auto;}
.trinity-mueble-left{width: 33.33%; display: flex; min-width: 250px;}
.trinity-mueble-left-2{display: flex; flex-direction: column;}
.trinity-mueble-left-2 img{height: 50%;}
.trinity-mueble-center{background-color: #EB5E28; display: flex; flex-direction: column; width: 33.33%; justify-content: center; align-items: center; color:#fff; text-align: center; min-width: 250px;    padding: 20px;}
.trinity-mueble-center p{margin-top: 20px;}
.trinity-mueble-right{width: 33.33%; min-width: 250px;}
.trinity-mueble-right img{height: 100%;}
section{margin-top:32px;}

/******** Collecion *********/

.trinity-coleccion{display: flex; flex-wrap: wrap;}
.trinity-coleccion-left{width: 50%; display: flex;}
.trinity-coleccion-left-ftext {  position: absolute; width: 28%; margin: 2rem 3rem;}
.trinity-coleccion-left-text{ display: flex; margin-top: 20px; flex-direction: column;}
.trinity-coleccion-left-ftext h3{color:  #EB5E28; font-size: 2.2rem; }
.btn-brdr-orange { padding: 5px 10px; border: solid 2px #EB5E28;
  text-decoration: none;  cursor: pointer;  min-width: 90px;  height: fit-content;  margin: 20px 0px; color: #EB5E28; min-width: 95px;    width: 30%;}
  .btn-brdr-orange:hover { border: solid 2px #000; color: #000;transition-duration: 1s;}
.trinity-coleccion-right{width: 50%; display: flex; flex-direction: column;}
.trinity-coleccion-right-top{width: 100%; display: flex; }
.trinity-coleccion-right-bottom{width: 100%; display: flex;}
.trinity-coleccion-txt{background-color: #EB5E28; display: flex; flex-direction: column; justify-content: center; align-items: center;padding: 10px;  text-align: center;  color: #fff;}
.trinity-coleccion-right-top img{max-width: 50%; }
.trinity-coleccion-right-bottom img{max-width: 50%; }

.trinity-prod{display: flex; flex-wrap: wrap;}
.trinity-prod img{width: 50%;}
.trinity-prod-txt{display: flex; align-items: start; justify-content: start; width: 50%; flex-direction: column; text-align: start; padding: 0 5%;}
.trinity-prod-txt h3{color: #EB5E28; }
.trinity-prod-txt p{max-width: 80%; margin-top: 20px;}

a{text-decoration: none;}

/****isntagram******/
.trinity-insta{display: flex; flex-direction: column; background-color: #F2EEEE;}
.insta-head{display: flex; justify-content: center; align-items: center; width: 100%; padding: 64px 0; }
.insta-head a{margin-left: 25px;}
.insta-post-body{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.insta-post{max-width: 25%;}
.insta-post a{color: #fff;}
.inst-post-int{position: absolute;  max-width: 15%;  margin: 1rem;     z-index: 1;}
.inst-post-int p{ margin-top: 10px;}
.comments{filter: brightness(50%);}



/************contacto*************/

.trinity-cont{display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 100%;}
.trinity-cont-body{display: flex; justify-content: space-evenly; align-items: center; margin-top: 64px;  width: 100%;}
.cont-box p{ margin-top: 20px;}
.trinity-cont a{margin-top: 64px;}
.main-big-org-btn{background-color: #EB5E28; color: #fff; border: #EB5E28 1px solid; padding: 10px 20px;}
.main-big-org-btn:hover{background-color: #fff; color: #EB5E28; border: #EB5E28 1px solid; transition-duration: 1s;}


/***********footer**************/
.trinity-footer{background-color: #000; color: #fff; display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 64px;}
.footer-logo{width: 33%;}
.footer-links{display: flex; width: 33%; justify-content:space-between; align-items: center;}
.footer-links li{padding: 10px;}
.footer-links a{color: #fff; cursor: pointer;}
.footer-links a:hover{color: #EB5E28; transition-duration: 1s;}
.footer-soc{display: flex; color: #EB5E28; width: 33%; justify-content: end; align-items: center;}
.footer-soc p{padding: 10px;}
.footer-soc a{padding: 10px;}

.bk-white{background-color: #fff;}



.trinity-tend{display: flex; flex-wrap: wrap;}
.trinity-tend-right{ display: flex; width: 25%;flex-direction: column;   justify-content: flex-start;align-items: self-start; padding: 40px 0px 0px 0px;}
.trinity-tend-txt{width: 75%; text-align: start;}
.trinity-tend-right h3{color: #EB5E28;}
.trinity-tend-left {width: 75%; display: flex;     justify-content: space-between;}
.trinity-tend-left p{color: #000; margin-top: 20px;}

/**************collecion****************/
.banner-section-collecion{
  background-image: url(../img/collecion.png);
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.juguetes-col{display: flex; flex-direction: column;
justify-content: center; align-items: center; margin-top: 20px; }
.juguetes-col h2{color: #EB5E28; border-bottom: 20px; text-transform: uppercase;}
.juguetes-col p{width: 76%; margin-top: 32px;}




.juguetes-img-center {display: flex; justify-content: center;}
.juguetes-img-bottom{display: flex; width: 100%;
  max-width: 1077px;
}
.juguetes-img-gal {
  margin: auto;
  display: flex
;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}




/******products************/

/* The grid: Four equal columns that floats next to each other */
.prod-column {
  float: left;
  min-width: 25%;
  max-height: 350px ;
  padding: 10px;
  display: flex;
}

.prod-column img{max-height: 330px;    width: auto!important;}

/* Style the images inside the grid */
.prod-column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.prod-column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.prod-row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */


/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}


.prodt-main-img{ display: flex !important ; flex-direction: row;    justify-content: center; height: 550px; }
.prodt-main-img img{max-width: 50%; z-index: -1;min-width: 350px; margin-right: 20px; object-fit: contain;}

.prodt-text h1{color: #EB5E28;}
.prodt-text p{color: #000; margin-top: 20px; width: 80%;}
.prodt-text {width: 50%; position: relative;margin-top: 10%;}

.prod-img-menu{ margin-top: 20px; overflow: scroll;
  /* width: 200px; */ overflow-y: hidden;overflow-x: scroll;
  max-height: 450px; display: flex; transition-duration: 100ms;}
  .prod-img-menu::-webkit-scrollbar {
    display: none;
  }


.prod-btns{display: flex;}
.prod-btns button {margin: 5px;}

  #slideBack{background-color: #EB5E28; border-radius: 80px;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;}
  #slide{background-color: #EB5E28; border-radius: 80px;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;}

.prodt-text-vermas p{margin: 20px 0!important;}



.trinity-cont h2{font-family:Crimson-Foam-Font;   line-height: 1;   font-size: 6rem; color: #EB5E28;     font-weight: normal;}

.cat-librero{max-height: 269px ;}

@media only screen and (max-width: 1200px){
  .trinity-cont h2 {    font-size: 4rem;}

}

@media only screen and (max-width: 800px){
  .trinity-mueble-center {  width: 100%;    padding: 20px;}

    .trinity-mueble-left {
      width: 100%;
      display: flex;
      min-width: 250px;
      justify-content: center;
  }
  .trinity-mueble-right {
    width: 100%;
    min-width: 250px;
    justify-content: center;
}

.trinity-coleccion-left-ftext {
  width: 35%;
}
.trinity-coleccion-left-text {
  flex-wrap: wrap;
}

}

@media only screen and (max-width: 650px){
  .cat-infinity-prod{  width: 80%;        margin: auto;}
  .cat-infinity-prod img{  width: 80%;margin: 30px auto;}
  .cat-infinity-prod h3 {    font-size: 32px;}
   .trinity-mueble-left {
    width: 100%;  display: flex;
    min-width: 250px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;}
  .trinity-mueble-left img { width: 100%;}
  .trinity-mueble-left-2 { width: 100%;overflow: hidden;}
  .trinity-mueble-left-2 img{height: 50%;}
  .cat-librero{max-height: 400px ;}
  img, video {  display: block;  max-width: 100%; height: auto;  object-fit: contain;}
.cat-infinity h2 {  font-size: 3.5rem;}
.heading-xl {  font-size: 4rem;  margin-top: 150px !important;  text-align: center;}
.navbar {  min-height: 80px;}
.img-logo {  height: 80px;  margin: 10px;}
.burger {  width: 2.6rem;  height: 2.15rem;  color: #000;}
.burger-line {   background-color: hsl(220, 27%, 2%);}
.burger-line:nth-child(2) {  width: 100%;}
.menu {  background-color: hsl(206, 5%, 90%);}
.menu-link {  font-size: 2.2rem;}
.trinity-mueble-left-2 {  display: flex;  flex-direction: row;}

.trinity-mueble-right { width: 100%;min-width: 250px; margin: auto;}
.banner-section { height: 850px;}
.trinity-tend-txt{width: 100%; text-align: start;}
.trinity-mueble-right img {
  height: 100%;
  width: 100%;
}
.trinity-mueble-center h3{    font-size: 2.5rem;
  margin: 10px;}
  .trinity-mueble-center p{    font-size: 2rem;
    margin: 10px;}
    .trinity-mueble-center p {
      margin: 40px;
      font-size: 2.5rem;
  }
  .trinity-mueble-center { width: 100%; margin: auto; padding: 20px 5px;}
.btn-brdr-orange {
  background-color: #fff;
}

.trinity-tend-right {
  display: flex;
  width: 100%;}
  .trinity-tend-right h3 {
    color: #EB5E28;
    font-size: 3rem;
     margin-bottom: 15px;
}

.trinity-tend-right p {

  font-size: 2rem;
}
.trinity-tend-left {
  width: 80%;
  margin: auto;
  flex-wrap: wrap;
}
.tend-img-body{width: 100%;}
.tend-img-body img{width: 100%;}
.trinity-tend-left p {
  font-size: 2.5rem;
  margin: 20px 0 40px 0;
}

.trinity-coleccion-left {
  width: 100%;
}    .trinity-mueble-center p {
  margin: 40px 5px;
  font-size: 2rem;
}


.trinity-coleccion-left img {
  width: 100%;
}
.trinity-coleccion-left-ftext {width: 80%;}
.trinity-coleccion-left-text p {font-size: 1.5rem;}

body {
  font-size: 1.5rem
}

.btn-brdr-orange {  min-width: 185px; text-align: center;margin-top: 10px;}
.trinity-coleccion-right {
    width: 100%;}
    .trinity-coleccion-right-top {   flex-wrap: wrap;  }
    .trinity-coleccion-right-top img {
      max-width: 100%;
      width: 100%;  }
      .trinity-coleccion-right-bottom {
        width: 100%;
        display: flex
    ;
        flex-wrap: wrap-reverse;
    }
    .trinity-coleccion-right-bottom img {
      max-width: 100%;
      width: 100%;  }
      .trinity-coleccion-txt {
        padding: 40px 10px; }
        .trinity-prod img {
          width: 100%;
          margin: auto;
      }
      .trinity-prod-txt {
       width: 100%;
        padding: 5% 0;
        margin: auto;  }
        .insta-post {
          max-width: 100%;
          width: 100%;
      }

      .trinity-cont h2 {
        font-size: 6rem;
        max-width: 80%;
        text-align: center;
    }
    .trinity-cont-body {
         flex-wrap: wrap;    justify-content: center;
         align-items: center; }

.cont-box{ width: 80%; display: flex; align-items: center; justify-content: center;flex-direction: column;        margin: 5% 0;}
.cont-box img {width: 50%;}

.inst-post-int {  max-width: 100%;}
.insta-post img{width: 100%;}
.inst-post-int p {
  display: none;
    }

.trinity-footer {
   flex-wrap: wrap-reverse;
}
.footer-logo {
  width: 33%;
}
.footer-soc {    justify-content: center;
  width: 100%;}

.footer-links{
  width: 100%; margin: auto;justify-content: space-between;
  align-items: baseline;}


.prodt-main-img {  flex-wrap: wrap;height: auto;}
.prodt-text {
  width: 80%;
  position: relative;
  margin-top: 10%;
}

.prodt-main-img img {
  max-width: 70%;}

  .prod-btns {
    display: flex
;
    justify-content: center;
    margin: 10px;
}
.navbar {

  justify-content: space-between;

}

}
@media only screen and (max-width: 510px){
  .img-logo {
    height: 50px;
    margin: 10px;
}

}

.juguetes-img-bottom a img{max-height:278px ;}




.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.prod-size li{display: flex;}
.text-num{font-family: sans-serif; margin-top: 0px!important;}
.text-medidas{margin-top: 10px ;}