@font-face {
	font-family: 'Moderat-Regular';
	src: url(../fonts/Moderat-Regular.ttf);
}
@font-face {
	font-family: 'Moderat-Medium';
	src: url(../fonts/Moderat-Medium.ttf);
}
@font-face {
  font-family: 'TiemposText-Regular';
  src: url(../fonts/TiemposText-Regular.ttf);
}
@font-face {
	font-family: 'TiemposHeadline-Medium';
	src: url(../fonts/TiemposHeadline-Medium.ttf);
}
@font-face {
	font-family: 'TiemposText-Italic';
	src: url(../fonts/TiemposText-Italic.ttf);
}
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Moderat-Medium";
  color: #0522ff;
}
a{
	color: #0522ff;
}
.tiempos-italic{
  font-family: 'TiemposText-Italic' !important;
}
.colophon-font p, .about-font p, .moderat-regular{
  font-family: "Moderat-Regular";
}
.moderat-meidum{
  font-family: 'Moderat-Medium'; 
}
.colophon-font h4{
  font-family: 'TiemposHeadline-Medium';
}
p{
	font-family:"TiemposText-Regular";
	margin-bottom:5px;
	font-size:25px;
}
h4{
	font:800 calc(16px - -.8vw) "Moderat-Medium";
}
section{
	padding-top:150px;
	padding-bottom:100px;
}
hr{
	width:25px;
	height:4px !important;
	color:#0522ff;
	opacity:1;
	margin:50px 0px;
}
/************Menu Start*************/
ul.header-menu{
	text-decoration:none;
	outline:none;
	list-style:none;
	margin:0px;
	padding:0px;
}
.header-menu a{
	text-decoration:none;
	outline:none;
	font-size:40px;
	font:600 calc(16px - -1.5vw) "TiemposHeadline-Medium";
	font-weight: 600;
	color:#0522ff;
  letter-spacing: 1px;
}
.topleft {
  position: fixed;
  top: 8px;
  left: 16px;
  font-size: 18px;
}
.topright {
  position: fixed;
  top: 8px;
  right: 16px;
  font-size: 18px;
}
.bottomleft {
  position: fixed;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}
.bottomright {
  position: fixed;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}
.header-menu li i {
	font-size:26px;
}
/*****Animation******/
.header-menu li a {
  display: inline;
}
.header-menu li a:after {
  width: 0px;
  overflow: hidden;	  
  display: inline-block;
  vertical-align: middle;
  transition: .5s linear;
}
.header-menu li a.about:after {
  content: 'bout';
  margin-top:-5px;
  transition: .7s linear;
}
li:hover a.about:after {
  width: 90px;
}

.header-menu li a.stories:after {
  content: 'tories';
  margin-top:-5px;
}
li:hover a.stories:after {
  width: 110px;
}

.header-menu li a.living-crafts:after {
  content: 'iving Crafts';
  margin-top:-5px;
  white-space: pre;
  transition: .9s linear;
}
li:hover a.living-crafts:after {
  width: 300px;
}

.header-menu li a.colophon:after {
  content: 'redits';
  margin-top:-5px;
  transition: .8s linear;
}
li:hover a.colophon:after {
  width: 110px;
}
/************Menu End*************/
.center {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
  transform: translateY(-50%);
}

.center h1.border {
  color: #0522ff;
  padding: 18px;
  font-size:calc(20px - -2vw);
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  width: fit-content;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
#stories-list h5{
	text-align:right;
	font:800 calc(14px - -.5vw) "Moderat-Medium";
	margin-bottom:5px;
}
#stories-list p{
	margin-bottom:0px;
	text-align:left;
	font-size:calc(16px - -.5vw);
  font-family: "Moderat-Regular";
	margin-top:0px;

}
/* animation class and keyframes */
.overflow-hidden {
 overflow: hidden;
}
.drop-in {
	-webkit-animation: scale-up-ver-bottom 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-ver-bottom 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


/* ----------------------------------------------
 * Generated by Animista on 2022-1-25 18:26:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-ver-bottom
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-ver-bottom {
  0% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}
@keyframes scale-up-ver-bottom {
  0% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}



/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #0522ff; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #0522ff; 
}
/* ----------------------------------------------------------
Updated Css
-----------------------------------------------------------*/
.bg-light-yellow{
  background-color: #ffe7a9;
}
.bg-light-orange{
  background-color: #fae7d9;
}
.bg-light-blue{
  background-color: #d6f6f1;
}
.bg-light-blue-2{
  background-color: #ddf2ff;
}
.sticky-item{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}
.sticky-item-100{
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}
.sticky-item-per-30{
  position: -webkit-sticky;
  position: sticky;
  top: 30%;
}
.sticky-item-per-40{
  position: -webkit-sticky;
  position: sticky;
  top: 40%;
}
.sticky-top-10{
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}
div.sticky-item img{
  position: relative;
  z-index: -1;
}
.zind-1{
  position: relative;
  z-index: 1;
}
.py-50{
  padding-top: 50px;
  padding-bottom: 50px;
}
.pt-50{
  padding-top: 50px;
}
.pb-100{
  padding-bottom: 100px;
}
.pb-600{
  padding-bottom: 600px;
}
.pb-300{
  padding-bottom: 300px;
}
.pb-150{
  padding-bottom: 150px;
}
.pb-450{
  padding-bottom: 450px;
}
/* Calcutta */
.bg-gradient-yellow{
  background: linear-gradient(to bottom, #ffe9ab, #ffce8d);
  /* background: linear-gradient(180deg, #ffe7a9, #fff1cc, #ffe2a3, #ffefcc, #ffce8d, #fff1cc, #ffce8d, #ffe7a9, #ffe7a9); 
  background-size: 1800% 1800%;
  -webkit-animation: gradient 25s ease infinite;
  -z-animation: gradient 25s ease infinite;
  -o-animation: gradient 25s ease infinite;
  animation: gradient 25s ease infinite; */
}
/* Delhi*/
.bg-gradient-orange{
  background: linear-gradient(to bottom, #fbe9d7, #f6d5f7);
  /* background: linear-gradient(180deg, #fbe9d7, #fcf1e8, #f6d5d5, #fbeaea, #f6d5f7, #fbe9d7, #f6d5f7, #fbe9d7, #fbe9d7);
  background-size: 1800% 1800%;
  -webkit-animation: gradient 25s ease infinite;
  -z-animation: gradient 25s ease infinite;
  -o-animation: gradient 25s ease infinite;
  animation: gradient 25s ease infinite; */
}
/* Bang  */
.bg-gradient-blue{
  background: linear-gradient(to bottom, #daf7f5, #91eea3);
  /* background: linear-gradient(180deg, #daf7f5, #eafaf8, #c1f4d9, #e9fbf2, #91eea3, #d6f6f1, #91eea3, #daf7f5, #daf7f5);
  background-size: 1800% 1800%;
  -webkit-animation: gradient 25s ease infinite;
  -z-animation: gradient 25s ease infinite;
  -o-animation: gradient 25s ease infinite;
  animation: gradient 25s ease infinite; */
}
.bg-gradient-blue-2{  
  background: linear-gradient(to bottom, #ddf2ff, #99d8ff);
  /* background: linear-gradient(180deg, #ddf2ff, #e6f5ff, #d6f6f1, #eafaf8, #b3e2ff, #e6f5ff, #b3e2ff, #e6f5ff, #e6f5ff);
  background-size: 1800% 1800%;
  -webkit-animation: gradient 25s ease infinite;
  -z-animation: gradient 25s ease infinite;
  -o-animation: gradient 25s ease infinite;
  animation: gradient 25s ease infinite; */
}
.pb-380{
  padding-bottom: 380px;
}
@media(max-width: 767px){
  p, .story-ul{
    font-size: 18px !important;
  }
  .py-50{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .pt-50{
    padding-top: 25px;
  }
  .pb-600{
    padding-bottom: 360px;
  }
  .pb-450 {
    padding-bottom: 250px;
  }
  .pb-150 {
    padding-bottom: 60px;
  }
  .pb-300 {
    padding-bottom: 150px;
  }
  /* .pb-450 {
    padding-bottom: 120px;
  } */
  .sm-br-none br{
    display: none;
  }
  .pb-380{
    padding-bottom: 400px;
  }
  .story-top{
    margin-top: -215px !important;
  }
  .vh-85 {
    height: 70vh !important;
  }
}
.font-title{
  font-size:calc(25px - -2vw);
}
@-webkit-keyframes gradient {
  0%{background-position:0% 82%}
  50%{background-position:100% 19%}
  100%{background-position:0% 82%}
}
@-moz-keyframes gradient {
  0%{background-position:0% 82%}
  50%{background-position:100% 19%}
  100%{background-position:0% 82%}
}
@-o-keyframes gradient {
  0%{background-position:0% 82%}
  50%{background-position:100% 19%}
  100%{background-position:0% 82%}
}
@keyframes gradient { 
  0%{background-position:0% 82%}
  50%{background-position:100% 19%}
  100%{background-position:0% 82%}
}
.colophon-brand img{
  transition: 0.5s all ease-in-out;
}
.colophon-brand:hover img{
  transform: scale(1.1);
}
.tilde{
  margin: 25px 0;
  font-size: 50px;
  font-weight: 600;
  line-height: initial;
}
.items-center{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.top-200{
  position: relative; 
  top: -200px;
}
.top-25{
  position: relative; 
  top: -25px;
}
.top-0{
  position: relative; 
  top: 0;
  padding-top: 25px;
}
.story-link{
  text-decoration: none;
}
@media(max-width: 480px){
  li:hover a.colophon:after {
    width: 65px;
  }
  li:hover a.about:after {
    width: 60px;
  }
  .sm-br-none br{
    display: none;
  }
}
.vh-85 {
  height: 85vh;
}
.story-top{
  margin-top: -420px;
}
@media(max-width: 450px){
  .xs-pb-410 {
    padding-bottom: 410px !important;
  }
  .font-title {
    font-size: calc(25px - -1.5vw);
  }
}
.story-authors a{
  position: relative;
}
.story-authors a:hover{
  color: #1cb039;
}
.story-authors a h5:before, .story-authors a p:before{
  background-color: #1cb039;
}
.story-authors a.del:hover{
  color: #d53eda;
}
.story-authors a.del h5:before, .story-authors a.del p:before{
  background-color: #d53eda;
}
.story-authors a.calc:hover{
  color: #ffa733;
}
.story-authors a.calc h5:before, .story-authors a.calc p:before{
  background-color: #ffa733;
}
.story-authors a.bang:hover{
  color: #1cb039;
}
.story-authors a.bang h5:before, .story-authors a.bang p:before{
  background-color: #1cb039;
}
.story-authors a h5, .story-authors a p{
  position: relative;
  line-height: 2.5rem !important;
  width: fit-content
}
.story-authors a h5{
  float: right;
}
.story-authors a h5:before, .story-authors a p:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  transition: .9s;
}
.story-authors a:hover h5:before, .story-authors a:hover p:before{
  width: 100%;
  transition: .9s;
}
body{
  cursor: url('../img/cursor.png'), auto;
}
.gap-200{
  padding-top: 200px;
  padding-bottom: 200px;
}
.story-top-400{
  margin-top: -400px;
}
@media(min-width: 768px){
  .img-80{
    height: 80vh;
    width: auto;
  }
}
.img-center{
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.para-end{
  margin-bottom: -4px;
}
.story-ul{
  font-family: "TiemposText-Regular";
  padding-left: 25px;
  font-size: 25px;
}
@media(max-width: 767px){
  .story-authors a h5, .story-authors a p{
    line-height: 1.8rem !important;
  }
  .c-ratio .ratio-21x9 {
    --bs-aspect-ratio: calc(9 / 16 * 100%) !important;
  }
}
@media(min-width: 1920px){
  .pb-600 {
    padding-bottom: 650px;
  }
}
@media(max-width: 480px){
  .para-end{
    margin-bottom: -2px;
  }
}
.c-ratio .ratio-21x9 {
  --bs-aspect-ratio: calc(9 / 24 * 100%);
}
.c-ratio video{
  background-color: #d9f0ff;
  width:100%;
}
p.me-2.zind-1.para-end{
  font-family: "Moderat-Regular";
}