h1 {
    font-size: 3em;
    line-height: 1em;
    font-family: 'Anybody', cursive;
    font-weight: 700;
}
h2 {
    font-size: 1.5em;
    line-height: 1.4em;
    font-family: 'Anybody', cursive;
    font-weight: 400;
}

h3, h3 a {
    font-size: 2em;
    line-height: 1.35em;
    font-family: 'Anybody', cursive;
    font-weight: 700;
}
h6 {
    font-family: 'Anybody', cursive;
    font-weight: 200;
    font-size:0.6em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blockquote {
    font-size: 2.7em;
    line-height: 1.4em;
    font-family: 'Anybody', cursive;
    font-weight: 200;  
    font-style: italic;
}

.post-content p {
    font-size:1.3em;
    line-height: 1.5em;
    color:#858585;
    max-width:70%;
}

p {
    color:rgb(119, 119, 119);   
}
small {
    font-size: .875em;
    
}

a {
    color:#bebebe;
    text-decoration: none!important;
}
.logo {
    max-width:120px;
    height:auto;
}
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgb(8, 8, 8)!important;
}

h1 a:hover, h2 a:hover,h3 a:hover {
    text-shadow: 0 0 15px rgba(256, 256, 256, 0.35);
    transition: 500ms ease-in-out;
}
.logo {
    position: fixed!important;
    width: 15px;
    height: 80px;
    top: 23px;
    left: 41px;
    z-index: 9999;
}
.vertical-logo {
transform-origin: top left;
left:0px;
top:0px;
transform: rotate(-90deg) translateX(-100%);
width:80px;
    height:15px;

}

.carousel {
    width:100%;
    transition: .5s;
}

#myCarousel > div.carousel-inner > div.carousel-item > div > a > h1  {
    cursor: url("img/cursor-a.png")15 15,move!important;   
    opacity: 0.09;   
}
#myCarousel > div.carousel-inner > div.carousel-item > div > a:hover > h1  {
    opacity: 1;
    transition: ease-in-out .5s;
}
#myCarousel > div.carousel-inner > div.carousel-item > div > a > h1 > span {
    opacity: 1;
    color:#fff;
}
#myCarousel > div.carousel-inner > div.carousel-item > div > a > h1 > span {
    opacity: 1;
}
.carousel-caption {
    position: absolute;
    left:0px;
    text-align: left;
    width:100vh;
    height:auto;
    background:transparent;
    transform-origin: top left;
    left:-40px;
    top:20px;
    transform: rotate(-90deg) translateX(-100%);
}



.carousel-indicators {
    transform-origin: top left;
    left:100px;
    top:0;
    transform: rotate(-90deg) translateX(-100%);
    background: transparent;
    z-index:9999;
  }

.carousel-indicators {
height:50px;
width:100vh;
    z-index: 2;
    display: flex;
    justify-content: start;
    padding : 0;
    margin-right:0%;
    margin-bottom: 0rem;
    margin-left: 0%;
    list-style: none;
    position: absolute;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 auto;
    font-size: 1.3em;
    letter-spacing: 1px;
    font-family: 'Anybody', cursive;
    font-weight: 100;
    width: 29px;
    height: 40px;
    border: none;
    border-radius: 0%;
    padding: 0;
    margin-right: 30px;
    margin-left: 12px;
    margin-top: 10px;
    text-indent: 0px;
    cursor: pointer;
    background-color: transparent;
    background-clip: padding-box;
    opacity: .1;
    transition: opacity .6s ease;
}


.soc-icons {
    fill:#fff;
    float:right;
    margin-left:20px;
    margin-top: 5px;
}

#myCarousel > div.carousel-indicators.bg-dark > .active {
    opacity:1;
}



.carousel-indicator-button:hover {
    color: rgb(255, 255, 255)!important;
    opacity: 1;
}
.carousel-control-prev {
    left: 0px;
}
.carousel-control-prev {
    cursor: url("img/cursor-l.png")15 15,move!important;   
}
.carousel-control-next {
    cursor: url("img/cursor-r.png")15 15,move!important;  
}
.carousel-control-next:hover { 
    backdrop-filter: blur(3px);
    transition: 400ms ease-in-out;
}
.carousel-control-prev:hover { 
    backdrop-filter: blur(3px);
    transition: 400ms ease-in-out;
}
body {
    cursor: url("img/cursor-1.png") 15 15,move;  
}
body a:hover {
    cursor: url("img/cursor-a.png")15 15,move;  
}
#myCarousel > div.carousel-indicators.bg-dark > a {
    cursor: url("img/cursor-b.png")15 15,move;     
}


.carousel-indicator-button {
    color:rgb(250, 249, 245)!important;
    opacity: 1;
    font-size: 0.5em;
}
.opacity-25 {
    opacity: 0.25;
}
body > div.container-fluid > div.row.pb-5 > div.col-md-12.col-golden-lg > div.ps-5.pt-5.featured-post > h1 > a {
    color: #fff;
}

body > div.container-fluid > div.row.pb-5 > div.col-golden-sm > div:nth-child(2) > div.col-golden-sm {
    padding-left: 0px;
    padding-right: 0px;
}

.featured-post-triangle {
position: absolute;
width: 143px;
height: 143px;
right:0px;
top:0px;
opacity: 1;
}
.featured-post {
    position: relative;
    /*background: #0e0e0e;   fallback for old browsers */                
    transition: 1s;
}
.featured-post h1{
    background: #8A2387;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F27121, #E94057, #8A2387);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #F27121, #E94057, #8A2387); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;               
    transition: 1s;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1{
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap;
    animation: 
    typing 1s steps(30, end),
    blink-caret .5s step-end infinite;
  }
  
  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange }
  }


.border-top {
    border-top: 1px solid #292929!important;
}
.carousel-item {
    transition: transform .5s ease-in-out;
    background: #080808!important;
    cursor: url("img/swipe.png")15 15,move!important;
  }
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: opacity 0s 1s;
  }

  .img-zoom-anim {
    animation: 30s ease 0s normal none infinite running zoomin;
    -webkit-animation: 30s ease 0s normal none infinite running zoomin;
    -o-animation: 30s ease 0s normal none infinite running zoomin;
    -moz--o-animation: 30s ease 0s normal none infinite running zoomin;
  }
  @keyframes zoomin {
    0% { transform: scale(1, 1) }
    50% { transform: scale(1.1, 1.1) }
    100% { transform: scale(1, 1) }
}

  /*#myCarousel > div.carousel-inner > div.carousel-item > video ,
  #myCarousel > div.carousel-inner > div.carousel-item > img {
    width:auto;
    height:100vh;
    float: right;
  }*/

  #vid {
    width:auto;
    height:100vh;
  }


  .border-bottom {
    border-bottom: 1px solid #292929!important;
}


/*.item-2 {
    background: url(content/02.png);
    background-size: auto;
    background-position: center center;
}*/



ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width:100%;
    height:180px;
    position: relative;
  }
  li {
    position: absolute;
    
   /* left: 50%;
   /* margin-left: -247px;*/
   /* margin-top: 5%;*/
  }
  li:nth-child(4) {
    animation: xfade 16s 0s infinite;
  }
  li:nth-child(3) {
    animation: xfade 16s 4s infinite;
  }
  li:nth-child(2) {
    animation: xfade 16s 8s infinite;
  }
  li:nth-child(1) {
    animation: xfade 16s 12s infinite;
  }
  @keyframes xfade{
    17% {
      opacity:1;
    }
    25% {
      opacity:0;
    }
    92% {
      opacity:0;
    }
  }



.btn-group-sm>.btn, .btn-sm {
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-padding-x: 0.85rem;
    --bs-btn-font-size: 0.775rem;
    letter-spacing: 0px;
    text-transform: uppercase;
    --bs-btn-border-radius: 0rem;
    transition: 120ms ease-in-out;
    box-shadow: 0 0 15px rgb(255 255 255 / 8%);
}
.btn-sm:hover {
    box-shadow: 0 0 15px rgb(255 255 255 / 45%);
    transition: 200ms ease-in-out;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #080808;
    --bs-btn-border-color: #292929;
    --bs-btn-hover-color: rgb(10, 10, 10);
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}
a > svg {
    fill: #fff;  
    opacity: .2;
}
a:hover > svg {
    fill: #080808;  
}

.modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: 0 0.5rem 1remrgba(var(--bs-body-color-rgb), 0.35);
    backdrop-filter: blur(20px);
    transition: all .5s;
}
#exampleModal > div {
    min-width: 640px!important;
    margin-right: 20px;
    margin-left: auto;
}
#exampleModal > div > div {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #fff;
    pointer-events: auto;
    background-color: transparent;
    background-clip: padding-box;
    border: none;
}


.footer-bg {
    background: #0e0e0e;
}

/*************** single content **************/
.big-headline {
    font-size: 5em;
}


.carousel-caption{
    /* not to display caption at its current position */
    display: none !important;
}






.carousel-indicators-container {
    width:50px;
    height:100vh;
    float:left;
}

#carouselExampleCaptions > div > div > img {
width:100%;
}

.new-carousel-caption-position > a > h1{
    font-size: 3em;
    line-height: .9em; 
}

.new-carousel-caption-position {
    text-align: left;
    width: 100vh;
    height: 80px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-top: 83px;
    padding-left: 24px;
    transform-origin: top left;
    transform: rotate(-90deg) translateX(-100%);
    z-index: 999;
    background: #080808;
    margin-top:10px;
    border-top:1px solid #ccc;
}
#carouselExampleCaptions > div > div.carousel-item > img {
    text-align: center!important;
    margin:0px auto!important;
    height:100vh!important;
    width: auto!important;

}