@import url(https://fonts.googleapis.com/css?family=Dosis:600,200|Great+Vibes);

 section{
   margin:0;padding:0;border: 0 none; 
  position: relative;
} 
/* [class="fa"]:before {font-family: 'fontawesome', sans-serif;} */


section {
   background: var(--bs-grey); 
  /* background:  url("../img/bk4.jpg") ;  */
 
  /* width: 80vw; */
  max-width: 160rem;
  min-width: 390px;
   height: 75rem; 
    /* margin: 2rem auto; */
  box-shadow: 0 0 6px rgba(0,0,0,.4);
  margin-left: 10px;
  margin-right: 10px;

}

/* @media (max-width: 768px) {
  section {
     height: 610rem;
  }
} */

article {
  position: absolute;
  left: 0;
  top: 5rem;
  right: 0;
  bottom: 0;
  padding: 1rem 2rem 0;
   overflow: auto; 
  transition: .7s;
  transform: scale(0);
  transform-origin: center right;
  transition-delay: .1s;
}
 /* article:before {
  color: rgba(0,0,0,.2);
  font-size: 4rem;
  font-weight: 100;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}  */

 body > h2 {height: auto;} 




.tab {
  /* background: #fff; */
  background: white;
  width: 100%;
  height: 5rem;
  box-shadow: 0 0 6px rgba(0,0,0,.4);
  
}
.tab:after {
  content:'';  
  width: 50%;
  height: 5rem;
   background: var(--bs-golden);
   /* background: linear-gradient(rgb(210, 243, 235, 1), rgba(230, 250, 245, .2)); */
  position: absolute;
  transition: .5s;
  
}
input {
  display: none;
  
}
label {
  width: 50%;
  float: left;
color:var(--bs-golden);
   /* color: #BEE3D1; */
  text-align: center;
  cursor: pointer;
  transition: .5s;
  z-index: 2;
  position: relative;
  justify-items: center;

}
label:hover {color:var(--bs-grey);}
label:before {
  display: block;
  font-size: 3rem;
  line-height: 5rem;
  z-index: 2;
}
#construction:checked ~ nav [for='construction'],
#realestate:checked ~ nav [for='realestate'] {
  color:var(--bs-grey);
  font-weight: 600;

}
/*very imp if you want to change selected item*/
#construction:checked ~ nav:after {
  left:50%;
  border-top: 0 none;  
  text-align: center;
}
#realestate:checked ~ nav:after {
    left: 0%;  
  text-align: center;


}
/* #posts:checked ~ nav:after {
  left: 50%;
}
#books:checked ~ nav:after {
  left: 75%;
} */

#construction:checked ~ .uno,
#realestate:checked ~ .dos
{
  display: block;
  transform: scale(1);
  transition-delay: .5s; 
}
a {color: rgba(0,0,0,.4)}
/* a:hover {color: rgba(0,0,0,.2)}

a:hover {color: rgba(0,0,0,.2)} */




/* Construction service */
:root {
  --base-grid: 8px;
  --colour-white: #fff;
  --colour-black: #1a1a1a;
  --colour-blue:var(--bs-blue);
}

*, :after, :before {
    box-sizing: border-box;
}

/* html {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(-170deg,#064997 20%,#105ba7);
  background-position: 100%;
} */

/* body {
  background-image: linear-gradient(270deg,#2b67ac 3px,transparent 0),linear-gradient(#2b67ac 3px,transparent 0),linear-gradient(270deg,rgba(43,103,172,.4) 1px,transparent 0),linear-gradient(#2b67ac 1px,transparent 0),linear-gradient(270deg,rgba(43,103,172,.4) 1px,transparent 0),linear-gradient(#2b67ac 1px,transparent 0);
  background-size: 112px 112px,112px 112px,56px 56px,56px 56px,28px 28px,28px 28px;
  font-family: Josefin Sans, sans-serif;
    margin: 0;
  padding: 0;
} */

@keyframes on-load {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  70% {
    opacity: .7;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes text {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(calc(var(--base-grid)*5));
  }
}