/*setup*/
*{
  margin: 0;
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Futura Lt BT';
  font-size: 1.025em;
}
body, html{
    height:100%;
}
a{
  text-decoration: none;
}
/*variables*/
:root {
    --claro:#eae2d6;
    --medio:#d5c3aa;
    --obscuro:#857666;
    --resalte:#e1b80d;
}
/*general*/
.cont{
    padding: 25px 0;
}
.sec_title{
  grid-area:t;
  display: flex;
}
h1{
  font-size: 3em;
}
h1,h2,h3,h4{
  font-family: 'Futura Hv Bt';
}
h2 {font-size:1.45em !important;}
h3 {font-size:1.3em !important;}
.myul{
  display:flex;
  flex-direction: column;
}
.myul > span{
  display: flex;
  cursor: pointer;
  font-size: 20px;
  margin:10px 0;
  align-items: center;

}
.myul> span::before{
  content:"";
  margin-right: 15px;
  height: 25px;
  width:25px;
  background-color: var(--claro);
  min-width: 25px;
  min-height: 25px;
}
.myul > span[active="1"]::before{
  background-color: var(--resalte);
}
.myul > span:not([active="1"]):hover::before{
  background-color: var(--medio);
}
.myul > span:first-child{
  margin-top: 0;
}
.btn_drop{
  position: relative;
  cursor: pointer;
  border-bottom:solid 2px var(--claro);
  padding-bottom: 4px;
  font-family: 'Futura Hv Bt';
}
.btn_drop::after{
  display: block;

  content: '';
  border-width: 0 2px 2px 0;
  border-color: var(--claro);
  border-style: solid;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 7px;
  height: 7px;
  position: absolute;
  right: 0;
  bottom:50%;
  transition: transform .25s;
}
.btn_drop:hover{
  border-color: var(--medio);
}
.btn_drop:hover::after{
  border-color: var(--medio);
}
.btn_drop[active="1"]{
  border-color: var(--resalte);
}
.btn_drop[active="1"]::after{
  border-color: var(--resalte);
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.link{
  display: flex;
  cursor: pointer;
  border-bottom:solid 2px var(--claro);
  position:relative;
  padding-right: 24px;
  padding-bottom: 3px;
  color:var(--claro);
  font-family:'Futura Hv Bt' ;
}
.link::after{
  display: block;
  content: '';
  border-width: 0 2px 2px 0;
  border-color: var(--claro);
  border-style: solid;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 7px;
  height: 7px;
  position: absolute;
  right: 0;
  top: calc(50% -  4.5px) ;
}
.link:hover{
  border-bottom:solid 2px var(--medio);
}
.link:hover::after{
  animation-name: hoverLink;
  animation-duration: .5s;
  border-color: var(--medio);
}
@keyframes hoverLink {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-45deg) translateX(-2.5px) translateY(-2.5px);
    -webkit-transform: rotate(-45deg) translateX(-2.5px) translateY(-2.5px);
  }
  100% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
}
.gallery{
  display: grid;
  overflow: hidden;
  grid-gap:20px;
}
.gallery > *{
  width: 100%;
  transition: opacity .5s;
  display: none;
}
.fcolumn{
  display: flex;
  flex-direction: column;
}
/*index*/
body{
  display: grid;
  grid-template-rows: fit-content(200px) 50px auto 100px;
  background-color: var(--claro);
  transition: height .25s;
}
.wrapper{
  display: grid;
  grid-template-columns: 980px;
  justify-content: center;
}
#logo_p{
  background-image: url("../imgs/logo_minart_20.png");
  background-size: contain;
  background-repeat:no-repeat;
  height: 150px;
  margin: 25px 0;
}
nav{
    background-color: var(--medio);
}
#nav_d{
  display: flex;
  font-size: 25px;
  justify-content: space-between;
}
nav > div > span {
  color: black;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: flex-start;
  cursor:pointer;
}
nav > div > span:hover{
  color: var(--obscuro);
}
#content{
  background-color: var(--obscuro);
  color: var(--claro);
}
footer{
  padding: 25px 0;
}
footer > div{
  display:flex;
}
footer > div > div >*{
    padding-bottom: 2.5px;
}
/*get involved*/
#cont_gi{
  display:grid;
  grid-template-areas: 't t'
                       'm c';
  grid-gap:20px;
  grid-template-rows: fit-content(100px) auto;
}
#div_gi_m{
  grid-area: m;
}
#div_gi_c{
  grid-area: c;
}
#div_gi_c>div{
  display:none;
  padding-left: 20px;
  flex-direction: column;
}
#div_gi_c>div[active="1"]{
  display:flex;
}
#div_gi_c>div>h2{
  margin-bottom: 20px;
}
.div_gi_img{
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap:20px;
}
.div_gi_img>span{
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#get_01a{
  background-image: url('../imgs/get_01a.JPG');
}
#get_01b{
  background-image: url('../imgs/get_01b.JPG');
}
#get_02a{
  background-image: url('../imgs/get_02a.JPG');
}
#get_02b{
  background-image: url('../imgs/get_02b.JPG');
}
#get_03a{
  background-image: url('../imgs/get_03a.JPG');
}
#get_03b{
  background-image: url('../imgs/get_03b.JPG');
}
#get_04a{
  background-image: url('../imgs/get_04a.JPG');
}
#get_04b{
  background-image: url('../imgs/get_04b.JPG');
}
#get_05b{
  background-image: url('../imgs/get_05b.JPG');
}
#get_05a{
  background-image: url('../imgs/get_05a.JPG');
}
#get_06a{
  background-image: url('../imgs/get_06a.JPG');
}
#get_06b{
  background-image: url('../imgs/get_06b.JPG');
}
#get_07a{
  background-image: url('../imgs/get_07a.JPG');
}
#get_07b{
  background-image: url('../imgs/get_07b.JPG');
}
#get_08a{
  background-image: url('../imgs/get_08a.JPG');
}
#get_08b{
  background-image: url('../imgs/get_08b.JPG');
}
#get_09a{
  background-image: url('../imgs/get_09a.JPG');
}
#get_09b{
  background-image: url('../imgs/get_09b.JPG');
}
/*catalogue*/
#cont_cat{
  display: grid;
  grid-template-areas: 't .'
                       'm tc'
                       'm c';
  grid-template-columns: min-content auto;
  grid-column-gap:  30px;
  grid-template-rows: fit-content(60px) auto 1fr;
  grid-row-gap: 20px;
}
/*------*/
#div_cat_cats{
  grid-area:c;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  grid-gap: 30px;
}
#div_cat_title{
  grid-area: tc;
}
#div_cat_cats > div{
  display:flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--claro);
  color: black;
  height: min-content;
  cursor: pointer;
}
#div_cat_cats > div > *{
  cursor: pointer;
}
#div_cat_cats > div > img{
  width:100% ;
}
#div_cat_cats > div > span{
  padding: 10px 0;
  width: 100%;
  text-align: center;
  position: relative;
}
#div_cat_cats > div > span::before{
  display: block;
  position: absolute;
  content : ' ';
  width: 40px;
  transition: transform .25s;
  background-color: var(--resalte);
  left:0;
  height: 100%;
  top:0;
  transform-origin:0   0;
  transform:  scale(0,1);
}
#div_cat_cats > div:hover >span::before{
  transform:  scale(1,1);
}
/*------*/
#div_cat_m {
  padding-right: 20px;
  border-right: dashed var(--claro) 1px;
  grid-area: m;
}
#div_cat_cm > span{
  font-size: 15px;
}
#div_cat_cm > span::before{
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
#cat_drop{
  margin-bottom: 20px;
}
/*------*/
#div_cat_prod{
  grid-area:c;
  display: none;
  grid-template-areas: 'img desc';
  grid-column-gap: 20px;
  font-size: 20px;
}
#div_cat_prod > div {
  grid-area: desc;
}
#div_cat_prod > div > *{
  margin-bottom: 25px;
}
#div_cat_prod > div > span:last-child{
  align-self: flex-end;
}
#prod_img{
  grid-area: img;
  width:100%
}

#prod_price::before{
  content: 'Price: ';
  font-family: 'Futura Hv Bt';
}
#prod_size::before{
  content: 'Size: ';
  font-family: 'Futura Hv Bt';
}

#prod_sizetb{
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}
#prod_sizetb th{
  font-family: 'Futura Hv Bt';
}
#prod_sizetb tr{
  border-bottom: dashed 1px var(--claro);
}
#prod_title{
  display: none;
  grid-area: tc;
}
#prod_title >span{
  font-family: inherit;
  display: inline-flex;
  align-items: center;
}
#prod_title > span:first-child::after{
  content: '';
  display: inline-block;
  margin: 0 10px;
  width: 4px;
  background-color:var(--resalte);
  height: 29px;
}

/*--------About Us---*/
#cont_au{
  display:grid;
  grid-template-areas: 't t'
                       'c g';
  grid-template-columns : auto 300px;
  grid-row-gap: 20px;
  grid-column-gap: 100px;
}
#au_text{
  grid-area: c;
}
#au_text>p{
  -moz-column-count: 2;
  -moz-column-gap: 20px;

  -webkit-column-count: 2;
  -webkit-column-gap: 20px;

  column-count: 2;
  column-gap: 20px;
  position: relative;
}

#au_text > h4{
  margin-top: 20px;
  text-align: center;
}
#au_centerline{
  height: 100%;
  border-width: 0 .5px;
  border-style: dashed;
  border-color: var(--claro);
  position: absolute;
  left:50%;
  top:0;
}
#cont_au p{
  text-align: justify;
}
#cont_au > .gallery{
  grid-area:g;
  grid-template-columns: 250px;
  grid-template-rows: repeat(2,210px);
}
/*------Buy------*/
.buy_sec{
  display: grid;
  grid-template-columns: 150px 1fr;
  padding:20px 0;
  grid-column-gap: 20px;
  align-items: center;
  align-items: stretch;
  border-bottom: solid var(--claro) 1px;
}
.buy_sec>h3{
  border-right: dashed var(--claro) 1px;
  display: flex;
  -ms-align-items: center;
  align-items: center;
}
.buy_sec>div{
  align-items: flex-start;
}
.buy_sec>div>*{
  margin-bottom: 10px;
  text-align: justify;
}